/* Kings & Queens - the sell page (on top of main.css): "the buying desk", variation 5 of the ten Jeff chose from (13-10-2026).
   The valuation is a conversation with the house's Hatton Garden buying desk: the desk's messages in vellum, the customer's in
   Hatton green, quick replies and a composer in the tray at the foot of the thread. Everything is scoped under .sl / .sl-*. */

.sl{
  --sl-card:#FFFDF9;                         /* a whiter tint of paper: the panel and its cards */
  --sl-line:rgba(18,21,18,.085);
  --sl-line2:rgba(18,21,18,.15);
  --sl-field:rgba(18,21,18,.2);
  --sl-r:22px;
  --sl-lift:0 1px 2px rgba(13,26,19,.05),0 10px 24px -16px rgba(13,26,19,.28);
}
.sl :focus-visible{outline:2px solid var(--brass);outline-offset:3px}
/* fields that draw their own brass ring (the composer's pill, the details' cells, the photo places, the ticks) */
.sl .sl-in:focus-visible,.sl .sl-f input:focus-visible,.sl .sl-f textarea:focus-visible,.sl .sl-f select:focus-visible,.sl .sl-slot input:focus-visible,.sl .sl-tk input:focus-visible{outline:0}
.sl button{cursor:pointer}
.sl button:disabled{cursor:default}
.sl svg.i{flex:none}
.sl-wa-i{color:#25D366}
.sl-stars{color:var(--brass);letter-spacing:.16em;font-style:normal}
.sl-mono{font-family:var(--mono);letter-spacing:.06em}

/* ================= hero: the desk itself ================= */
.sl-hero{position:relative;overflow:hidden;padding:clamp(120px,8.6vw,132px) 0 clamp(122px,8.6vw,132px)}
.sl-photo{position:absolute;top:0;right:0;bottom:0;width:min(58vw,1000px);margin:0}
.sl-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 58%}
.sl-photo:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--hatton) 0%,rgba(13,26,19,.8) 22%,rgba(13,26,19,.28) 58%,rgba(13,26,19,.42) 100%),
             linear-gradient(180deg,rgba(13,26,19,.7) 0%,rgba(13,26,19,0) 30%,rgba(13,26,19,.05) 60%,var(--hatton) 100%)}
.sl-hero-in{position:relative;z-index:2}
.sl-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.sl-crumbs a{display:inline-flex;align-items:center;min-height:44px;margin:-16px 0;transition:color calc(var(--beat)*2) linear}
.sl-crumbs a:hover{color:var(--gilt)}
.sl-crumbs [aria-current]{color:var(--vellum)}
.sl-h1{margin-top:22px;font:400 clamp(56px,7.2vw,120px)/.95 var(--display);letter-spacing:-.022em;color:var(--vellum)}
.sl-h1 em{color:var(--brass)}
.sl-intro{margin-top:20px;max-width:520px;font:400 clamp(17px,1.3vw,20px)/1.5 var(--sans);color:rgba(243,238,228,.8);text-wrap:pretty}
.sl-hrate{display:inline-flex;align-items:center;gap:10px;margin-top:10px;min-height:44px;font:400 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sage);transition:color calc(var(--beat)*2) linear}
.sl-hrate b{font-weight:400;color:var(--vellum)}
.sl-hrate:hover{color:var(--gilt)}
.sl-photo-cap{position:absolute;z-index:2;right:var(--m);bottom:calc(clamp(122px,8.6vw,132px) - 2px);display:flex;align-items:center;gap:10px;font:400 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,228,.72)}
.sl-photo-cap i{width:22px;height:1px;background:var(--brass)}

/* ================= the desk: rails either side of the conversation ================= */
.sl-desk{position:relative;padding:0 0 clamp(96px,8vw,150px)}
.sl-ro{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sl-ro img{position:absolute;left:50%;top:-640px;width:1760px;max-width:none;transform:translateX(-50%);opacity:.2;
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%);mask-image:radial-gradient(closest-side,#000 55%,transparent 100%)}
.sl-desk-in{position:relative;display:grid;grid-template-columns:minmax(244px,1fr) minmax(0,720px) minmax(244px,1fr);column-gap:clamp(28px,3.2vw,60px);align-items:start}
.sl-side{grid-column:1;grid-row:1;justify-self:end;width:min(100%,286px);position:sticky;top:112px;padding-top:58px}
.sl-req{grid-column:3;grid-row:1;justify-self:start;width:min(100%,318px);position:sticky;top:112px;padding-top:58px}

/* left rail: the promises, the rating, a review */
.sl-side .lab{color:var(--bronze)}
.sl-promises{list-style:none;margin-top:16px;border-top:1px solid var(--sl-line2)}
.sl-promises li{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--sl-line);font:400 15px/1.35 var(--sans);color:var(--ink)}
.sl-promises svg.i{width:22px;height:22px;color:var(--bronze)}
.sl-rate{display:flex;align-items:center;gap:16px;margin-top:30px}
.sl-rate b{font:400 64px/.8 var(--display);letter-spacing:-.03em;color:var(--ink)}
.sl-rate span{display:flex;flex-direction:column;gap:7px;font:400 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.sl-rate .sl-stars{font-size:15px;letter-spacing:.2em}
.sl-quote{position:relative;margin:22px 0 0;padding:20px 22px 18px;border-radius:4px 18px 18px 18px;background:var(--vellum)}
.sl-quote blockquote{font:400 21px/1.28 var(--display);color:var(--ink);text-wrap:pretty}
.sl-quote figcaption{margin-top:12px;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}

/* ================= the conversation panel ================= */
.sl-chat{grid-column:2;grid-row:1;position:relative;z-index:3;margin-top:-108px;background:var(--sl-card);border-radius:var(--sl-r);
  box-shadow:0 0 0 1px rgba(18,21,18,.06),0 2px 6px rgba(13,26,19,.05),0 50px 100px -48px rgba(13,26,19,.55)}
.sl-head{display:flex;align-items:center;gap:14px;padding:18px 20px 16px 22px}
.sl-av{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 35%,var(--garden),var(--hatton) 70%);box-shadow:inset 0 0 0 1px rgba(184,153,95,.55),inset 0 0 0 3px var(--hatton),inset 0 0 0 4px rgba(184,153,95,.22),0 2px 6px -2px rgba(13,26,19,.45);overflow:hidden}
.sl-av img{display:block;width:auto;height:66%;margin-top:6%}
.sl-av-lg{width:50px;height:50px}
.sl-who{flex:1;min-width:0}
.sl-name{font:400 26px/1 var(--display);letter-spacing:-.008em;color:var(--ink)}
.sl-who p{margin-top:7px;font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.sl-head-wa{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px 0 15px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--sl-line2);font:500 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);transition:box-shadow calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear}
.sl-head-wa:hover{background:var(--vellum);box-shadow:inset 0 0 0 1px var(--brass)}
.sl-head-wa svg.i{width:19px;height:19px}

/* the five steps */
.sl-prog{padding:0 22px;border-top:1px solid var(--sl-line);border-bottom:1px solid var(--sl-line);background:linear-gradient(180deg,rgba(243,238,228,.55),rgba(243,238,228,0))}
/* under way, the steps keep to the top of the window (under the site's header while it shows), as a messaging app keeps its title */
.sl-live .sl-prog{position:sticky;z-index:6;top:var(--sl-hdr,0px);background:rgba(251,249,244,.94);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);box-shadow:0 12px 24px -22px rgba(13,26,19,.45);transition:top calc(var(--beat)*4) var(--sweep)}
.sl-prog-now{display:none}
.sl-prog{container-type:inline-size}
@container (max-width:640px){                    /* a narrower panel: the other steps by their numerals, the current one by name too */
  .sl-steps{grid-template-columns:auto auto auto auto auto;justify-content:space-between}
  .sl-steps button{padding:0 4px}
  .sl-steps button:not(.on) span{display:none}
}
.sl-steps{list-style:none;display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between;column-gap:10px}
.sl-steps button{position:relative;width:100%;display:flex;align-items:center;gap:8px;height:50px;font:500 10.5px/1.15 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);text-align:left;white-space:nowrap;transition:color calc(var(--beat)*3) linear}
.sl-steps i{font:400 17px/1 var(--display);font-style:normal;letter-spacing:.06em;color:inherit;transition:color calc(var(--beat)*3) linear}
.sl-steps button:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:0 50%;transition:transform calc(var(--beat)*5) var(--sweep)}
.sl-steps .on{color:var(--ink)}
.sl-steps .on i{color:var(--bronze)}
.sl-steps .on:after{transform:none}
.sl-steps .done{color:var(--graphite)}
.sl-steps .done i{color:var(--bronze)}
.sl-steps .done span:after{content:"";display:inline-block;width:12px;height:12px;margin:-2px 0 0 6px;vertical-align:middle;background:var(--brass);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/contain no-repeat}
.sl-steps button:not(:disabled):hover{color:var(--bronze)}

/* ================= the thread ================= */
.sl-thread{display:flex;flex-direction:column;padding:22px 26px 20px;min-height:132px}
.sl-ex{display:flex;flex-direction:column;min-width:0}
.sl-ex > *{min-width:0}
.sl-sep{display:flex;align-items:center;gap:14px;margin:12px 0 18px;font:400 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.sl-sep:before,.sl-sep:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(130,102,55,0),rgba(130,102,55,.3))}
.sl-sep:after{background:linear-gradient(90deg,rgba(130,102,55,.3),rgba(130,102,55,0))}
.sl-sep span{padding:7px 13px 6px;border-radius:999px;background:var(--vellum);box-shadow:inset 0 0 0 1px rgba(130,102,55,.16)}
.sl-ex:first-child .sl-sep{margin-top:0}

.sl-row{display:flex;align-items:flex-start;gap:11px}
.sl-desk-row + .sl-me-row,.sl-me-row + .sl-desk-row{margin-top:12px}
.sl-bs{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:min(530px,86%)}
.sl-b{position:relative;padding:11px 16px 12px;font:400 16px/1.5 var(--sans);text-wrap:pretty;overflow-wrap:anywhere}
.sl-bs .sl-b{background:var(--vellum);color:var(--ink);border-radius:6px 18px 18px 6px;box-shadow:0 1px 0 rgba(18,21,18,.05),inset 0 0 0 1px rgba(18,21,18,.035)}
.sl-bs .sl-b:first-child{border-top-left-radius:3px}
.sl-bs .sl-b:last-child{border-bottom-left-radius:18px}
.sl-bs .sl-b:only-child{border-radius:3px 18px 18px 18px}
.sl-b strong{font-weight:500}
.sl-ex + .sl-ex{margin-top:14px}
.sl-ex .sl-sep + .sl-desk-row{margin-top:0}


/* typing */
.sl-typing{display:inline-flex !important;align-items:center;gap:5px;height:42px;padding:0 17px !important}
.sl-typing i{width:6px;height:6px;border-radius:50%;background:var(--bronze);opacity:.3;animation:sl-dot 1.05s ease-in-out infinite}
.sl-typing i:nth-child(2){animation-delay:.15s}
.sl-typing i:nth-child(3){animation-delay:.3s}
@keyframes sl-dot{0%,70%,100%{opacity:.28;transform:none}35%{opacity:1;transform:translateY(-3px)}}

/* the customer's answers: their own bubble, with an edit that rewinds the conversation */
.sl-me-row{justify-content:flex-end;align-items:center;gap:6px}
.sl-me{background:var(--hatton);color:var(--paper);border-radius:18px 4px 18px 18px;max-width:min(460px,78%);box-shadow:0 1px 0 rgba(13,26,19,.2),0 10px 22px -16px rgba(13,26,19,.7)}
.sl-me b{font-weight:500}
.sl-me small{display:block;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--sage)}
.sl-me .sl-mono{color:var(--gilt);letter-spacing:.08em}
.sl-edit{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 10px;border-radius:999px;font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--taupe);transition:color calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear}
.sl-edit svg.i{width:14px;height:14px}
.sl-edit:hover{color:var(--bronze);background:rgba(243,238,228,.8)}
.sl-sent .sl-edit{visibility:hidden;pointer-events:none}
.sl-mlogo{display:block;height:var(--mh,30px);aspect-ratio:var(--ar,3);background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;margin:3px 2px}
.sl-mlogo.word{aspect-ratio:auto;height:auto;margin:0;background:none;-webkit-mask:none;mask:none;font:400 22px/1.1 var(--display)}
.sl-me:has(.sl-mlogo:not(.word)){padding:12px 20px}

/* a photographs bubble */
.sl-me.sl-pics{padding:6px;border-radius:18px 4px 18px 18px}
.sl-pgrid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:4px}
.sl-pgrid figure{position:relative;margin:0;width:clamp(84px,11vw,128px);aspect-ratio:1;border-radius:13px;overflow:hidden;background:var(--garden)}
.sl-pgrid figure:first-child{border-top-left-radius:13px}
.sl-pgrid img{width:100%;height:100%;object-fit:cover}
.sl-pgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font:400 9.5px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);background:linear-gradient(transparent,rgba(13,26,19,.75))}
.sl-pics p{padding:7px 8px 3px;font:400 13px/1.3 var(--sans);color:var(--sage)}

/* a watch from the house (part-exchange), in a bubble */
.sl-wcard{display:flex;align-items:center;gap:14px}
.sl-wcard img{flex:none;width:46px;height:62px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.sl-wcard span{display:flex;flex-direction:column;gap:3px}
.sl-wcard i{font:400 10px/1.2 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--sage)}

/* the contact bubble */
.sl-contact{display:flex;flex-direction:column;gap:2px}
.sl-contact b{font:400 20px/1.2 var(--display);margin-bottom:4px}
.sl-contact span{font-size:14.5px;color:rgba(251,249,244,.82)}
.sl-contact .sl-via{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gilt)}

/* ================= the reply tray: quick replies + the composer ================= */
.sl-tray{position:relative;bottom:0;z-index:5;padding:14px 22px 18px;border-top:1px solid var(--sl-line);border-radius:0 0 var(--sl-r) var(--sl-r);
  background:rgba(250,247,240,.9);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);box-shadow:0 -14px 30px -24px rgba(13,26,19,.35)}
.sl-tray[hidden]{display:none}
.sl-tray,.sl-tray > *{min-width:0;max-width:100%}
.sl-live .sl-tray{position:sticky}            /* once the conversation is under way, the tray stays at the foot of the window */
.sl-tray > *{transition:opacity calc(var(--beat)*2) linear}
.sl-tray.wait > *{opacity:.28;pointer-events:none}
.sl-tray-top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:28px;margin-bottom:10px}
.sl-ask{display:flex;align-items:center;gap:10px;font:400 10.5px/1.3 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--bronze)}
.sl-ask:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px rgba(184,153,95,.2);animation:sl-ping 2.6s var(--sweep) infinite}
@keyframes sl-ping{0%{box-shadow:0 0 0 0 rgba(184,153,95,.5)}70%,100%{box-shadow:0 0 0 7px rgba(184,153,95,0)}}
.sl-back{display:inline-flex;align-items:center;gap:7px;height:44px;margin:-14px -10px -14px 0;padding:0 10px;font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite);transition:color calc(var(--beat)*2) linear}
.sl-back svg.i{width:15px;height:15px;transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-back:hover{color:var(--bronze)}
.sl-back:hover svg.i{transform:translateX(-3px)}
.sl-back[hidden]{display:none}

/* chips */
.sl-opts{display:flex;flex-wrap:wrap;gap:8px}
.sl-opts:empty{display:none}
.sl-chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 17px;border-radius:12px;background:var(--sl-card);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--sl-line2),0 1px 2px rgba(13,26,19,.06);font:500 15px/1.2 var(--sans);text-align:center;
  transition:box-shadow calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear,transform calc(var(--beat)*3) var(--sweep)}
.sl-chip:hover{box-shadow:inset 0 0 0 1px var(--brass),0 8px 18px -12px rgba(13,26,19,.45);transform:translateY(-1px)}
.sl-chip:active{transform:translateY(0) scale(.98)}
.sl-chip svg.i{width:17px;height:17px;color:var(--bronze)}
.sl-chip[aria-pressed="true"]{background:var(--hatton);color:var(--paper);box-shadow:inset 0 0 0 1px var(--hatton),0 8px 18px -12px rgba(13,26,19,.6)}
.sl-chip[aria-pressed="true"] svg.i{color:var(--gilt)}
.sl-chip.soft{background:transparent;box-shadow:inset 0 0 0 1px var(--sl-line2);color:var(--graphite);font-weight:400}
.sl-chip.soft:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--brass)}
.sl-chip.soft[aria-pressed="true"]{background:var(--hatton);color:var(--paper)}
.sl-tick{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:var(--brass);color:var(--hatton);display:grid;place-items:center;transform:scale(0);transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-tick svg.i{width:11px !important;height:11px !important;color:var(--hatton) !important;stroke-width:3}
[aria-pressed="true"] > .sl-tick{transform:none}

/* brands, by their marks */
.sl-o-brand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sl-bchip{height:62px;padding:0 12px}
.sl-bchip.sl-more{gap:8px;font-size:14px;grid-column:span 2}
.sl-logo{display:block;height:var(--lh,24px);aspect-ratio:var(--ar,3);max-width:100%;background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.sl-logo[data-brand="Rolex"]{--lh:33px}
.sl-logo[data-brand="Patek Philippe"]{--lh:42px}
.sl-logo[data-brand="Audemars Piguet"]{--lh:29px}
.sl-logo[data-brand="Richard Mille"]{--lh:9px}
.sl-logo[data-brand="Cartier"]{--lh:24px}
.sl-logo.word{height:auto;aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;font:400 23px/1 var(--display);letter-spacing:.01em}

/* models */
.sl-o-model .sl-chip{flex:0 0 auto}

/* option cards: condition, sell or exchange, what comes with it */
.sl-o-cond,.sl-o-deal,.sl-o-with{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sl-o-with{grid-template-columns:repeat(3,minmax(0,1fr))}
.sl-opt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:13px 15px 14px;border-radius:14px;text-align:left;background:var(--sl-card);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--sl-line2),0 1px 2px rgba(13,26,19,.06);
  transition:box-shadow calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear,transform calc(var(--beat)*3) var(--sweep)}
.sl-opt:hover{box-shadow:inset 0 0 0 1px var(--brass),0 8px 18px -12px rgba(13,26,19,.45);transform:translateY(-1px)}
.sl-opt b{display:block;font:500 15.5px/1.25 var(--sans)}
.sl-opt small{display:block;margin-top:3px;font:400 13.5px/1.4 var(--sans);color:var(--graphite);text-wrap:pretty}
.sl-dot{width:18px;height:18px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--taupe);transition:box-shadow calc(var(--beat)*3) var(--sweep)}
.sl-box{width:18px;height:18px;margin-top:1px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--taupe);display:grid;place-items:center;color:transparent;transition:background-color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.sl-box svg.i{width:12px;height:12px;stroke-width:3}
.sl-opt[aria-pressed="true"]{background:var(--hatton);color:var(--paper);box-shadow:inset 0 0 0 1px var(--hatton),0 10px 22px -14px rgba(13,26,19,.65)}
.sl-opt[aria-pressed="true"] small{color:var(--sage)}
.sl-opt[aria-pressed="true"] .sl-dot{box-shadow:inset 0 0 0 5px var(--brass),inset 0 0 0 9px var(--hatton)}
.sl-opt[aria-pressed="true"] .sl-box{background:var(--brass);box-shadow:none;color:var(--hatton)}
.sl-opt .sl-oi{position:absolute;right:14px;top:13px;width:20px;height:20px;color:var(--bronze)}
.sl-opt[aria-pressed="true"] .sl-oi{color:var(--gilt)}
.sl-o-deal .sl-opt{padding-right:46px}
.sl-acts{grid-column:1 / -1;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:2px}
.sl-go{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:12px;background:var(--hatton);color:var(--paper);font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;transition:background-color calc(var(--beat)*2) linear,opacity calc(var(--beat)*2) linear}
.sl-go svg.i{width:17px;height:17px;color:var(--gilt);transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-go:hover{background:var(--heritage)}
.sl-go:hover svg.i{transform:translateX(3px)}
.sl-go:disabled{opacity:.35;background:var(--hatton)}

/* photographs: three places, a tap each */
.sl-o-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:center}
.sl-skip{align-self:stretch;min-width:118px}
.sl-skip[hidden]{display:none}
.sl-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:112px;border-radius:14px;overflow:hidden;cursor:pointer;color:var(--graphite);
  background:var(--sl-card);border:1.5px dashed rgba(130,102,55,.38);
  transition:color calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear,border-color calc(var(--beat)*2) linear}
.sl-slot:hover,.sl-slot.over{color:var(--bronze);background-color:var(--vellum);border-color:var(--bronze)}
.sl-slot:has(input:focus-visible){outline:2px solid var(--brass);outline-offset:2px}
.sl-slot input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;font-size:0}
.sl-ill{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sl-slot b{font:500 12.5px/1.2 var(--sans);letter-spacing:.02em;color:var(--ink)}
.sl-slot em{font:400 10px/1 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.sl-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sl-slot.has{background:var(--garden);border:0}
.sl-slot.has:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,26,19,0) 40%,rgba(13,26,19,.78));pointer-events:none}
.sl-slot.has b{position:absolute;z-index:2;left:12px;bottom:10px;color:var(--paper)}
.sl-slot.has .sl-ill,.sl-slot.has em{display:none}
.sl-rm{position:absolute;z-index:3;top:5px;right:5px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(13,26,19,.7);color:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.sl-rm svg.i{width:15px;height:15px}
.sl-rm:after{content:"";position:absolute;inset:-5px}
.sl-rm:hover{background:var(--hatton)}
.sl-rm[hidden]{display:none}

/* the composer */
.sl-comp{display:flex;align-items:center;gap:10px;margin-top:12px}
.sl-opts:empty + .sl-results + .sl-comp{margin-top:0}
.sl-comp[hidden]{display:none}
.sl-att{flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--sl-card);box-shadow:inset 0 0 0 1px var(--sl-line2);transition:box-shadow calc(var(--beat)*2) linear,color calc(var(--beat)*2) linear,transform calc(var(--beat)*3) var(--sweep)}
.sl-att svg.i{width:20px;height:20px}
.sl-att:hover{color:var(--bronze);box-shadow:inset 0 0 0 1px var(--brass)}
.sl-att[hidden]{display:none}
.sl-att.glow{animation:sl-glow 2.4s var(--sweep) infinite}
@keyframes sl-glow{0%{box-shadow:inset 0 0 0 1px var(--brass),0 0 0 0 rgba(184,153,95,.45)}70%{box-shadow:inset 0 0 0 1px var(--brass),0 0 0 10px rgba(184,153,95,0)}100%{box-shadow:inset 0 0 0 1px var(--brass),0 0 0 0 rgba(184,153,95,0)}}
.sl-field{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:54px;border-radius:999px;background:#FFFEFC;
  box-shadow:inset 0 0 0 1px var(--sl-field),inset 0 2px 4px rgba(13,26,19,.05);transition:box-shadow calc(var(--beat)*2) linear}
.sl-field:focus-within{box-shadow:inset 0 0 0 1.5px var(--brass),0 0 0 3px rgba(184,153,95,.13)}
.sl-comp.bad .sl-field{box-shadow:inset 0 0 0 1.5px var(--bronze),0 0 0 4px rgba(130,102,55,.12)}
.sl-in{flex:1;min-width:0;height:100%;padding:0 22px;font:400 17px/1 var(--sans);color:var(--ink);border-radius:999px}
.sl-in::placeholder{color:#8F877A;opacity:1}
.sl-in[hidden]{display:none}
.sl-pre{padding-left:22px;font:400 17px/1 var(--sans);color:var(--graphite)}
.sl-pre:not([hidden]) + .sl-in{padding-left:6px}
.sl-pre[hidden]{display:none}
.sl-field > *{min-width:0}
.sl-pick{flex:1 1 0;min-width:0;width:100%;height:100%;padding:0 22px;text-align:left;font:400 16px/1 var(--sans);color:#8F877A;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-pick:hover{color:var(--ink)}
.sl-pick[hidden]{display:none}
.sl-send{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--hatton);color:var(--gilt);box-shadow:0 8px 18px -10px rgba(13,26,19,.7);transition:background-color calc(var(--beat)*2) linear,transform calc(var(--beat)*3) var(--sweep),opacity calc(var(--beat)*2) linear}
.sl-send svg.i{width:21px;height:21px;transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-send:hover{background:var(--heritage)}
.sl-send:hover svg.i{transform:translateX(2px)}
.sl-comp.empty .sl-send{background:var(--stone);color:var(--graphite);box-shadow:none}
.sl-err{display:flex;align-items:flex-start;gap:8px;margin:10px 4px 0;font:400 14px/1.4 var(--sans);color:var(--bronze)}
.sl-err svg.i{width:17px;height:17px;margin-top:1px}
.sl-err[hidden]{display:none}

/* searching the house (part-exchange) */
.sl-results{position:absolute;left:16px;right:16px;bottom:calc(100% + 8px);z-index:6;max-height:min(360px,52vh);overflow:auto;padding:6px;border-radius:16px;background:var(--sl-card);box-shadow:0 0 0 1px var(--sl-line2),0 24px 50px -20px rgba(13,26,19,.45)}
.sl-results[hidden]{display:none}
.sl-hit{width:100%;display:flex;align-items:center;gap:14px;padding:8px 12px 8px 8px;border-radius:11px;text-align:left;transition:background-color var(--beat) linear}
.sl-hit img{flex:none;width:42px;height:56px;object-fit:contain}
.sl-hit span{display:flex;flex-direction:column;gap:3px;min-width:0}
.sl-hit b{font:500 15px/1.2 var(--sans);color:var(--ink)}
.sl-hit i{font:400 11px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;color:var(--graphite)}
.sl-hit:hover,.sl-hit.on{background:var(--vellum)}
.sl-none{padding:14px;font:400 14px/1.45 var(--sans);color:var(--graphite)}

/* ================= V · your details: a card in the thread ================= */
.sl-you{margin:12px 0 0 45px;padding:22px 22px 20px;border-radius:18px;background:#FFFEFC;box-shadow:0 0 0 1px var(--sl-line2),0 18px 40px -26px rgba(13,26,19,.45)}
.sl-you-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sl-you-h h3{font:400 24px/1 var(--display);color:var(--ink)}
.sl-you-h span{margin-left:auto;font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.sl-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:14px;background:#FFFEFC;box-shadow:inset 0 0 0 1px var(--sl-field),0 1px 2px rgba(13,26,19,.05),0 14px 28px -24px rgba(13,26,19,.5)}
.sl-group .sl-f{border-bottom:1px solid var(--sl-line2);transition:background-color calc(var(--beat)*2) linear}
.sl-group .sl-f:nth-child(odd){border-right:1px solid var(--sl-line2)}
.sl-group .sl-f:nth-child(n+3){border-bottom:0}
.sl-group .sl-f:nth-child(1){border-top-left-radius:14px}
.sl-group .sl-f:nth-child(2){border-top-right-radius:14px}
.sl-group .sl-f:nth-child(3){border-bottom-left-radius:14px}
.sl-group .sl-f:nth-child(4){border-bottom-right-radius:14px}
.sl-f{position:relative}
.sl-f input,.sl-f textarea,.sl-f select{display:block;width:100%;height:64px;padding:27px 16px 9px;border-radius:14px;background:#FFFEFC;font:400 17px/1.25 var(--sans);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--sl-field);transition:box-shadow calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear;-webkit-appearance:none;appearance:none}
.sl-group .sl-f input{border-radius:inherit;background:transparent;box-shadow:none}
.sl-f textarea{height:104px;padding-top:30px;resize:vertical;border:0;outline:0;min-height:104px}
.sl-f input:hover,.sl-f textarea:hover,.sl-f select:hover{background:rgba(243,238,228,.45)}
.sl-f input:focus,.sl-f textarea:focus,.sl-f select:focus{background:#FFFEFC;box-shadow:inset 0 0 0 1.5px var(--brass),0 0 0 3px rgba(184,153,95,.13);outline:0}
.sl-group .sl-f input:focus{box-shadow:none;background:transparent}
.sl-group .sl-f:focus-within{box-shadow:inset 0 0 0 1.5px var(--brass);background:#FFFEFC;position:relative;z-index:1}
.sl-group .sl-f:hover:not(:focus-within){background:rgba(243,238,228,.4)}
.sl-group .sl-f input:hover{background:transparent}
.sl-f label{position:absolute;z-index:2;left:17px;top:22px;font:400 16px/1.2 var(--sans);color:var(--graphite);pointer-events:none;transform-origin:0 0;white-space:nowrap;transition:transform calc(var(--beat)*3) var(--sweep),color calc(var(--beat)*2) linear}
.sl-f label small{margin-left:6px;font:400 13px/1 var(--sans);color:var(--taupe)}
.sl-f input:focus + label,.sl-f input:not(:placeholder-shown) + label,.sl-f textarea:focus + label,.sl-f textarea:not(:placeholder-shown) + label,.sl-f.sel label{transform:translateY(-12px) scale(.76);color:var(--bronze)}
.sl-more-f .sl-f + .sl-f{margin-top:10px}
.sl-f.sel select{padding-right:44px;cursor:pointer}
.sl-f.sel select.ph{color:#8F877A}
.sl-f.sel svg.i{position:absolute;right:16px;top:23px;width:18px;height:18px;color:var(--graphite);pointer-events:none}
.sl-f.bad{background:rgba(220,198,154,.2)}
.sl-f.bad label{color:var(--bronze)}
.sl-fe{display:flex;align-items:flex-start;gap:7px;margin:7px 2px 0;font:400 13.5px/1.35 var(--sans);color:var(--bronze)}
.sl-group .sl-fe{margin:-4px 0 0;padding:0 16px 11px;font-size:13px}
.sl-fe svg.i{width:15px;height:15px;margin-top:1px}
.sl-fe[hidden]{display:none}
.sl-legend{margin:18px 0 9px;font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
.sl-pref{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sl-pref .sl-chip{width:100%;padding:0 12px;font-size:14.5px}
.sl-pref .sl-chip[aria-checked="true"]{background:var(--hatton);color:var(--paper);box-shadow:inset 0 0 0 1px var(--hatton)}
.sl-pref .sl-chip[aria-checked="true"] svg.i:not(.sl-wa-i){color:var(--gilt)}
.sl-more-f{margin-top:16px}
.sl-ticks{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.sl-tk{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;font:400 15px/1.35 var(--sans);color:var(--ink);cursor:pointer}
.sl-tk input{position:absolute;left:0;top:50%;width:22px;height:22px;margin-top:-11px;opacity:0}
.sl-tk i{flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:transparent;background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--sl-field);transition:background-color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.sl-tk i svg.i{width:14px;height:14px;stroke-width:3}
.sl-tk:hover i{box-shadow:inset 0 0 0 1.5px var(--brass)}
.sl-tk input:checked + i{background:var(--hatton);box-shadow:none;color:var(--gilt)}
.sl-tk input:focus-visible + i{outline:2px solid var(--brass);outline-offset:3px}
.sl-tk.bad i{box-shadow:inset 0 0 0 1.5px var(--bronze);background:rgba(220,198,154,.18)}
.sl-tk a{color:var(--bronze);transition:color calc(var(--beat)*2) linear}
.sl-tk a:hover{color:var(--ink)}
.sl-tk small{margin-left:4px;font-size:13px;color:var(--taupe)}
.sl-submit{margin-top:18px;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.sl-submit .btn{width:100%;border-radius:12px;height:60px}
.sl-submit .btn.busy{pointer-events:none;opacity:.8}
.sl-fine{font:400 13px/1.5 var(--sans);color:var(--graphite);text-align:center}
.sl-submit .sl-send-e{margin:0;padding:0 2px;justify-content:center}             /* the request did not go through */
.sl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}            /* a field people never see: robots fill it */
.sl-or{display:flex;align-items:center;gap:14px;margin:2px 0;font:400 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.sl-or:before,.sl-or:after{content:"";flex:1;height:1px;background:var(--sl-line)}
.sl-wa-alt{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--sl-line2);font:500 12px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);transition:box-shadow calc(var(--beat)*2) linear,background-color calc(var(--beat)*2) linear}
.sl-wa-alt svg.i{width:19px;height:19px}
.sl-wa-alt .sl-go-i{width:16px;height:16px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-wa-alt:hover{background:var(--vellum);box-shadow:inset 0 0 0 1px var(--brass)}
.sl-wa-alt:hover .sl-go-i{transform:translateX(3px)}

/* ================= the thank-you: a last word from the desk, and the request ================= */
.sl-ty{display:block;margin-bottom:6px;font:400 30px/1.05 var(--display);color:var(--ink)}
.sl-ty em{color:var(--bronze)}
.sl-receipt{position:relative;margin:10px 0 0 45px;max-width:560px;padding:24px 24px 22px;border-radius:18px;overflow:hidden;background:#FFFEFC;box-shadow:0 0 0 1px var(--sl-line2),0 18px 40px -26px rgba(13,26,19,.45)}
.sl-receipt:before{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;background:url(../svg/seal-paper.svg) center/contain no-repeat;opacity:.16;pointer-events:none}
.sl-r-top{display:flex;align-items:center;gap:10px;font:400 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--bronze)}
.sl-r-top i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--hatton);color:var(--gilt)}
.sl-r-top i svg.i{width:12px;height:12px;stroke-width:3}
.sl-r-no{margin-top:14px;font:400 clamp(22px,2.2vw,28px)/1 var(--mono);letter-spacing:.04em;color:var(--ink)}
.sl-r-what{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--sl-line2);font:400 14px/1.4 var(--sans);color:var(--graphite)}
.sl-r-what .sl-logo{--lh:20px;color:var(--ink)}
.sl-r-what .sl-logo[data-brand="Richard Mille"]{--lh:7px}
.sl-r-ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.sl-r-ctas .btn{width:100%;height:56px;padding:0 20px;border-radius:12px}
.sl-r-ctas .btn.brass .sl-wa-i,.sl-submit .btn.brass .sl-wa-i{color:var(--hatton)}

/* ================= your request, beside the conversation ================= */
.sl-card{padding:22px 22px 18px;border-radius:18px;background:var(--sl-card);box-shadow:0 0 0 1px var(--sl-line),0 1px 2px rgba(13,26,19,.04),0 30px 60px -40px rgba(13,26,19,.4)}
.sl-card-top{display:flex;flex-direction:column;gap:9px;padding-bottom:16px;border-bottom:1px dashed var(--sl-line2)}
.sl-card .lab{color:var(--bronze)}
.sl-no{font:400 10.5px/1 var(--mono);letter-spacing:.08em;color:var(--graphite);white-space:nowrap}
.sl-no b{font-weight:400;color:var(--ink)}
.sl-watch{padding:20px 0 18px;border-bottom:1px dashed var(--sl-line2)}
.sl-wlogo{display:block;height:26px;width:auto;max-width:150px;aspect-ratio:var(--ar,3);background:var(--ink);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:left center;mask-position:left center;margin-bottom:12px}
.sl-wlogo:empty:not([style*="mask"]){display:none}
.sl-wlogo.rm{height:9px}
.sl-wlogo.word{height:auto;aspect-ratio:auto;background:none;-webkit-mask:none;mask:none;font:400 22px/1 var(--display);letter-spacing:.01em;color:var(--ink)}
.sl-wmodel{font:400 30px/1.05 var(--display);color:var(--ink)}
.sl-wmodel.muted{opacity:1;color:var(--taupe)}
.sl-wmeta{margin-top:9px;font:400 10.5px/1.5 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--graphite)}
.sl-wmeta:empty{display:none}
.sl-rows div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-bottom:1px solid var(--sl-line);font:400 14px/1.35 var(--sans)}
.sl-rows dt{color:var(--graphite);white-space:nowrap}
.sl-rows dd{text-align:right;color:var(--ink);border-radius:6px;transition:background-color 1.2s linear}
.sl-rows dd.empty{color:var(--taupe)}
.sl-rows dd.flash{animation:sl-flash 1.4s var(--sweep)}
@keyframes sl-flash{0%{background:rgba(184,153,95,.35);box-shadow:0 0 0 4px rgba(184,153,95,.35)}100%{background:rgba(184,153,95,0);box-shadow:0 0 0 4px rgba(184,153,95,0)}}
.sl-thumbs{display:inline-flex;gap:4px}
.sl-thumbs img{width:28px;height:28px;border-radius:7px;object-fit:cover}
.sl-meter{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:18px}
.sl-meter i{height:3px;border-radius:2px;background:var(--stone);transition:background-color calc(var(--beat)*4) linear}
.sl-meter i.on{background:var(--brass)}
.sl-card-wa{display:flex;align-items:center;gap:11px;margin-top:16px;padding:0 16px;min-height:52px;border-radius:12px;background:var(--vellum);font:500 11.5px/1.2 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--ink);transition:background-color calc(var(--beat)*2) linear,box-shadow calc(var(--beat)*2) linear}
.sl-card-wa span{flex:1}
.sl-card-wa .sl-go-i{width:16px;height:16px;color:var(--bronze);transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-card-wa:hover{box-shadow:inset 0 0 0 1px var(--brass)}
.sl-card-wa:hover .sl-go-i{transform:translateX(3px)}
.sl-restart{display:block;margin:10px auto 0;height:44px;padding:0 12px;font:500 10.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite);transition:color calc(var(--beat)*2) linear}
.sl-restart:hover{color:var(--bronze)}
.sl-restart[hidden]{display:none}
.sl-card-fine{margin-top:14px;padding:0 6px;font:400 13px/1.5 var(--sans);color:var(--graphite)}
.sl-sent .sl-card{box-shadow:0 0 0 1px rgba(184,153,95,.5),0 30px 60px -40px rgba(13,26,19,.4)}

/* ================= below the desk ================= */
.sl-sh{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:end}
.sl-sh > div{grid-column:1 / span 7}
.sl-sh .h2{margin-top:20px}
.sl-shp{grid-column:9 / span 4;font:400 17px/1.6 var(--sans);text-wrap:pretty}
.sec-light .sl-shp,.sec-paper .sl-shp{color:var(--graphite)}
.sec-dark .sl-shp{color:var(--sage)}

/* how it works, along a bezel's minute track */
.sl-how{padding:clamp(100px,9vw,170px) 0 clamp(100px,9vw,160px)}
.sl-track{position:relative;margin-top:clamp(60px,5.5vw,96px);height:34px}
.sl-track img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;opacity:.85}
.sl-track i{position:absolute;top:50%;left:calc(var(--x) * (100% + var(--g)) / 3);width:13px;height:13px;margin:-6.5px 0 0 0;border-radius:50%;background:var(--vellum);box-shadow:inset 0 0 0 1.5px var(--bronze),0 0 0 5px var(--vellum)}
.sl-track i:first-of-type{background:var(--bronze)}
.sl-how-list{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--g);margin-top:30px}
.sl-rn{display:block;font:400 clamp(60px,5.4vw,96px)/1 var(--display);letter-spacing:.02em;color:var(--bronze)}
.sl-how-list h3{margin-top:20px;font:400 clamp(24px,2vw,32px)/1.15 var(--display);color:var(--ink)}
.sl-how-list p{margin-top:12px;max-width:400px;font:400 16px/1.6 var(--sans);color:var(--graphite);text-wrap:pretty}

/* why sell to us */
.sl-why{position:relative;overflow:hidden;padding:clamp(100px,9vw,170px) 0}
.sl-ro-dark img{left:auto;right:-640px;top:-560px;width:1240px;transform:none;opacity:.22;-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,transparent 100%)}
.sl-why .wrap{position:relative}
.sl-why-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--g);margin-top:clamp(56px,5vw,90px)}
.sl-why-grid li{padding-top:26px;border-top:1px solid rgba(243,238,228,.16)}
.sl-why-grid svg.i{width:28px;height:28px;color:var(--brass)}
.sl-why-grid h3{margin-top:22px;font:400 clamp(23px,1.75vw,29px)/1.18 var(--display);color:var(--vellum)}
.sl-why-grid p{margin-top:12px;font:400 15px/1.6 var(--sans);color:var(--sage);text-wrap:pretty;max-width:340px}
.sl-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:clamp(64px,6vw,104px)}
.sl-voices figure{display:flex;flex-direction:column;margin:0;padding:28px 28px 24px;border-radius:4px 22px 22px 22px;background:var(--garden);box-shadow:inset 0 0 0 1px rgba(243,238,228,.06)}
.sl-voices .sl-stars{font-size:14px}
.sl-voices blockquote{flex:1;margin-top:16px;font:400 clamp(20px,1.55vw,25px)/1.3 var(--display);color:var(--vellum);text-wrap:pretty}
.sl-voices figcaption{margin-top:22px;font:400 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}

/* the houses we buy */
.sl-houses{padding:clamp(100px,9vw,170px) 0}
.sl-house-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(50px,5vw,84px);border-top:1px solid var(--sl-line2);border-left:1px solid var(--sl-line2)}
.sl-house-grid li{border-right:1px solid var(--sl-line2);border-bottom:1px solid var(--sl-line2)}
.sl-house{width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(26px,2.4vw,40px);text-align:left;color:var(--ink);transition:background-color calc(var(--beat)*3) linear}
.sl-house .sl-logo{height:var(--lh);margin-bottom:26px;transition:color calc(var(--beat)*3) linear}
.sl-house .sl-logo[data-brand="Rolex"]{--lh:52px}
.sl-house .sl-logo[data-brand="Patek Philippe"]{--lh:60px;margin-top:-4px;margin-bottom:22px}
.sl-house .sl-logo[data-brand="Audemars Piguet"]{--lh:42px;margin-top:5px;margin-bottom:31px}
.sl-house .sl-logo[data-brand="Richard Mille"]{--lh:13px;margin-top:20px;margin-bottom:45px}
.sl-house .sl-logo[data-brand="Cartier"]{--lh:36px;margin-top:8px;margin-bottom:34px}
.sl-house .sl-logo.word{height:52px;display:flex;align-items:center;font-size:40px;letter-spacing:.01em}
.sl-hm{font:400 16px/1.55 var(--sans);color:var(--graphite);max-width:360px;text-wrap:pretty}
.sl-hgo{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;font:500 11.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--bronze);transition:color calc(var(--beat)*2) linear}
.sl-hgo svg.i{width:16px;height:16px;transition:transform calc(var(--beat)*3) var(--sweep)}
.sl-house:hover{background:var(--vellum)}
.sl-house:hover .sl-logo{color:var(--bronze)}
.sl-house:hover .sl-hgo{color:var(--ink)}
.sl-house:hover .sl-hgo svg.i{transform:translateX(4px)}

/* rather talk */
.sl-talk{padding:clamp(100px,9vw,170px) 0 clamp(90px,8vw,150px)}
.sl-talk-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:center}
.sl-talk-copy{grid-column:1 / span 6}
.sl-talk-copy .h2{margin-top:20px}
.sl-talk-p{margin-top:24px;max-width:520px;font:400 18px/1.6 var(--sans);color:var(--sage);text-wrap:pretty}
.sl-talk-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.sl-talk-ctas .btn.brass .sl-wa-i{color:var(--hatton)}
.sl-talk-addr{display:flex;align-items:flex-start;gap:12px;margin-top:34px;max-width:560px;font:400 11.5px/1.8 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sage)}
.sl-talk-addr svg.i{width:18px;height:18px;color:var(--brass);margin-top:2px}
.sl-talk-photo{grid-column:8 / span 5;margin:0;position:relative;aspect-ratio:4/5;border-radius:999px 999px 6px 6px;overflow:hidden;box-shadow:0 0 0 1px rgba(184,153,95,.35)}
.sl-talk-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.sl-talk-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,26,19,0) 55%,rgba(13,26,19,.35))}

/* ================= static (capture) ================= */
html.static .sl-typing{display:none !important}

/* ================= responsive ================= */
@media (max-width:1240px){
  .sl-desk-in{grid-template-columns:minmax(0,1fr) minmax(250px,300px)}
  .sl-chat{grid-column:1}
  .sl-req{grid-column:2;width:100%}
  .sl-side{grid-column:1 / -1;grid-row:2;position:static;justify-self:stretch;width:auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);align-items:start;padding-top:64px}
  .sl-side .lab{grid-column:1 / -1}
  .sl-promises{grid-column:1 / span 6}
  .sl-rate{grid-column:8 / span 5;margin-top:16px}
  .sl-quote{grid-column:8 / span 5}
  .sl-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:46px}
}
@media (max-width:1100px){
  .sl-photo{width:70vw}
}
@media (max-width:900px){
  /* the hero: the desk's photograph behind the words, short enough that the conversation starts in the first screen */
  .sl-hero{padding:92px 0 30px}
  .sl-photo{width:100%;left:0}
  .sl-photo img{object-position:20% 50%;opacity:.55}
  .sl-photo:after{background:linear-gradient(180deg,rgba(13,26,19,.75) 0%,rgba(13,26,19,.55) 45%,var(--hatton) 100%)}
  .sl-h1{margin-top:18px;font-size:clamp(44px,12.4vw,64px);text-wrap:balance}   /* no last word alone on a line ("London's trusted Rolex / buyer.") */
  .sl-intro{margin-top:14px;font-size:16px;line-height:1.5}
  .sl-hrate{margin-top:8px}
  .sl-photo-cap{display:none}

  .sl-desk{padding-bottom:84px}
  .sl-ro img{left:auto;right:-380px;top:-140px;width:900px;transform:none;opacity:.16}
  .sl-desk-in{display:flex;flex-direction:column;padding-left:0;padding-right:0}
  .sl-chat{order:1} .sl-req{order:2} .sl-side{order:3}
  .sl-chat{margin:0;border-radius:0;box-shadow:0 1px 0 var(--sl-line)}
  .sl-head{padding:14px 14px 12px 16px;gap:12px}
  .sl-av-lg{width:42px;height:42px}
  .sl-name{font-size:22px}
  .sl-who p{margin-top:6px;font-size:10px;letter-spacing:.1em}        /* 10px, still one line on a 360px phone */
  .sl-head-wa{width:44px;padding:0;justify-content:center}
  .sl-head-wa span{display:none}
  .sl-head-wa svg.i{width:21px;height:21px}
  .sl-prog{padding:10px 16px 12px}
  /* the steps' bar and the tray keep to the window over the scrolling thread: an opaque ground, no blur (WebKit repaints a
     backdrop blur on every frame of a scroll, and behind a 90% ground it barely showed) */
  .sl-live .sl-prog{top:max(var(--sl-hdr,0px),env(safe-area-inset-top));background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}   /* under the header, or clear of the notch while it is tucked away */

  .sl-prog-now{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:9px;font:400 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--graphite)}
  .sl-prog-now b{font-weight:400;color:var(--bronze)}
  .sl-prog-now span{color:var(--ink)}
  .sl-steps{grid-template-columns:repeat(5,1fr);column-gap:5px}
  .sl-steps button{height:44px;justify-content:center;align-items:flex-start;gap:0;padding:8px 0 0;margin-bottom:-12px}
  .sl-steps span{display:none}
  .sl-steps i{font-size:13px}
  .sl-steps button:after{left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--stone);transform:none}
  .sl-steps .on:after,.sl-steps .done:after{background:var(--brass)}
  .sl-steps .done i:after{content:none}
  .sl-thread{padding:18px 14px 16px;min-height:0}
  .sl-row{gap:9px}
  .sl-av{width:30px;height:30px}
  .sl-bs{max-width:calc(100% - 39px)}
  .sl-b{font-size:16px;padding:10px 14px 11px}
  .sl-me{max-width:84%}
  .sl-pgrid figcaption{font-size:10px}
  .sl-edit{min-width:44px;justify-content:center;padding:0}
  .sl-edit span{display:none}
  .sl-edit svg.i{width:16px;height:16px}
  .sl-tray{padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-radius:0;background:#FAF7F0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sl-o-brand{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .sl-bchip{height:58px;padding:0 8px}
  .sl-bchip.sl-more{grid-column:span 3;height:48px}
  .sl-logo[data-brand="Rolex"],.sl-logo[data-brand="Patek Philippe"]{--lh:28px}
  .sl-logo[data-brand="Audemars Piguet"]{--lh:18px}
  .sl-logo[data-brand="Richard Mille"]{--lh:7px}
  .sl-logo[data-brand="Cartier"]{--lh:19px}
  .sl-logo.word{font-size:21px}
  .sl-o-model{gap:7px}
  .sl-chip{min-height:44px;padding:0 14px;font-size:15px}
  .sl-o-cond,.sl-o-deal,.sl-o-with{grid-template-columns:minmax(0,1fr);gap:7px}
  .sl-opt{padding:12px 14px 13px}
  .sl-acts{justify-content:stretch}
  .sl-acts > *{flex:1}
  .sl-slot{height:96px}
  .sl-o-photos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sl-skip{grid-column:1 / -1;min-height:44px}
  .sl-field{height:52px}
  .sl-in{padding:0 18px}
  .sl-pick{padding:0 18px;font-size:15px}
  .sl-pre{padding-left:18px}
  .sl-send{width:52px;height:52px}
  .sl-att{width:46px;height:46px}
  /* the house's watches, found as you type (part-exchange): the list opens above the tray, so it stays short enough that with
     the keyboard up its top, the best match, is still in the window (svh: the window with the browser's bars showing) */
  .sl-results{max-height:min(280px,36vh);max-height:min(280px,30svh)}
  .sl-you{margin-left:0;padding:18px 14px 16px}
  .sl-you-h h3{font-size:22px}
  .sl-group .sl-f:nth-child(n+3){grid-column:1 / -1;border-right:0;border-radius:0}
  .sl-group .sl-f:nth-child(3){border-bottom:1px solid var(--sl-line2)}
  .sl-group .sl-f:nth-child(4){border-radius:0 0 14px 14px}
  .sl-pref .sl-chip{padding:0 6px;font-size:13.5px;gap:6px}
  .sl-tk a{padding:12px 0}                       /* the Privacy Policy link: a 44px tap, the line itself unchanged */
  .sl-receipt{margin-left:0;padding:22px 16px 16px}
  .sl-r-ctas .btn{padding:0 14px;font-size:12px;letter-spacing:.08em;gap:10px}
  .sl-ty{font-size:27px}

  .sl-req{position:static;width:auto;padding:28px var(--m) 0}
  .sl-side{display:block;padding:40px var(--m) 0}
  .sl-promises{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;margin-top:14px}
  .sl-promises li{align-items:flex-start;gap:10px;padding:13px 0;font-size:14px}
  .sl-promises svg.i{width:19px;height:19px;margin-top:1px}
  .sl-rate{margin-top:24px;gap:12px}
  .sl-rate b{font-size:52px}
  .sl-quote{margin-top:24px;padding:16px 16px 14px}
  .sl-quote blockquote{font-size:18px}

  .sl-sh{display:block}
  .sl-sh .h2,.sl-talk-copy .h2{text-wrap:balance}   /* "Three steps. / Paid in full.", not "... Paid in / full." */
  .sl-shp{margin-top:18px}
  .sl-how,.sl-why,.sl-houses{padding:84px 0}
  .sl-talk{padding:84px 0 72px}
  .sl-track{margin-top:36px;height:22px}
  .sl-track i{display:none}
  .sl-how-list{grid-template-columns:minmax(0,1fr);row-gap:30px;margin-top:22px}
  .sl-how-list li{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:8px}
  .sl-rn{grid-row:span 2;font-size:44px;line-height:.9}
  .sl-how-list h3{margin-top:0;font-size:23px}
  .sl-how-list p{margin-top:8px;font-size:15px}
  .sl-why-grid{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:44px}
  .sl-why-grid li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:6px;padding-top:20px}
  .sl-why-grid svg.i{grid-row:span 2;width:26px;height:26px}
  .sl-why-grid h3{margin-top:0;font-size:22px}
  .sl-why-grid p{margin-top:8px;font-size:14.5px}
  /* the reviews: a row to swipe, the next one peeking in */
  .sl-voices{display:flex;gap:10px;margin:48px calc(var(--m) * -1) 0;padding:0 var(--m) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--m);scrollbar-width:none}
  .sl-voices::-webkit-scrollbar{display:none}
  .sl-voices figure{flex:0 0 82%;scroll-snap-align:start;padding:20px 20px 18px}
  .sl-voices blockquote{font-size:19px}
  /* the houses: a list, each mark beside its models */
  .sl-house-grid{grid-template-columns:minmax(0,1fr);border-left:0;margin-top:40px}
  .sl-house-grid li{border-right:0}
  .sl-house{display:grid;grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:center;padding:20px 0}
  .sl-house .sl-logo{grid-row:span 2;justify-self:center;margin:0 !important;max-width:100%}
  .sl-house .sl-logo[data-brand="Rolex"]{--lh:38px}
  .sl-house .sl-logo[data-brand="Patek Philippe"]{--lh:44px}
  .sl-house .sl-logo[data-brand="Audemars Piguet"]{--lh:28px}
  .sl-house .sl-logo[data-brand="Richard Mille"]{--lh:7.5px}
  .sl-house .sl-logo[data-brand="Cartier"]{--lh:26px}
  .sl-house .sl-logo.word{height:auto;font-size:28px}
  .sl-hm{font-size:14.5px;line-height:1.45}
  .sl-hgo{padding-top:2px;margin-top:0}
  .sl-house:hover{background:transparent}
  .sl-hm{font-size:14px}
  .sl-hgo{font-size:10.5px;gap:8px}
  .sl-talk-in{display:block}
  .sl-talk-ctas{flex-direction:column}
  .sl-talk-ctas .btn{width:100%}
  .sl-talk-photo{margin-top:40px;aspect-ratio:4/3.2}
}
@media (max-width:420px){
  .sl-o-brand .sl-bchip:not(.sl-more){height:56px}  /* the marks; "Another brand" keeps its lower 48px */
  .sl-pref{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:380px){                        /* the smallest phones (360, 375): the three ways to reply keep to one line each */
  .sl-you{padding-left:12px;padding-right:12px}
  .sl-f textarea + label{font-size:15px}         /* "Anything else we should know? Optional", at rest, inside its box (at 16px it ran into the border at 360) */
  .sl-pref{gap:6px}
  .sl-pref .sl-chip{padding:0 4px;gap:5px;font-size:13px}
  .sl-pref .sl-chip svg.i{width:16px;height:16px}
}
/* a touch screen keeps the hover look on what was last tapped: an option ticked and then unticked would keep its brass ring,
   a photo place its drop look after the picker is closed. They go back to rest instead */
@media (max-width:900px) and (hover:none){
  .sl-opt:not([aria-pressed="true"]):hover{box-shadow:inset 0 0 0 1px var(--sl-line2),0 1px 2px rgba(13,26,19,.06);transform:none}
  .sl-slot:not(.over):not(.has):hover{color:var(--graphite);background-color:var(--sl-card);border-color:rgba(130,102,55,.38)}
}
/* a phone on its side: the window is too short for the tray and the steps' bar to keep to it (together they would cover the
   whole thread), so both stay in the panel and scroll with it. Landscape only: a browser that shortens the page for the
   keyboard, upright, keeps them as they were */
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){
  .sl-live .sl-prog{position:relative;top:auto}
  .sl-live .sl-tray{position:relative}
}
@media (prefers-reduced-motion:reduce){
  .sl-typing i,.sl-att.glow,.sl-ask:before{animation:none}
}
html.static .sl-ask:before,html.static .sl-att.glow{animation:none}

/* ================= a sell-by-brand page (/sell-rolex/ ...): live's longer heading for it, kept clear of the photograph ================= */
.sl-h1.is-long{max-width:min(48vw,820px);font-size:clamp(46px,5.2vw,92px)}
@media (max-width:900px){
  .sl-h1.is-long{max-width:none;font-size:clamp(38px,10.4vw,56px)}
  /* with the balanced wrap (.sl-h1, phones), a size that sets every house's heading in two lines, the house's name whole on
     the second ("London's trusted / Audemars Piguet buyer."): at 10.4vw Audemars Piguet ran to three, and Rolex and Hublot
     left "buyer." alone. A browser without the balanced wrap keeps the size it had */
  @supports (text-wrap:balance){ .sl-h1.is-long{font-size:clamp(34px,9.8vw,56px)} }
}