/* /concierge: ten scenes, the action bar, the price block.
   Tokens, fonts, sheets and forms come from /offers/offers.css. This file adds to them, and every
   override of a shared rule is scoped to body.concierge so /offers does not move. No dashes in copy.
   Mobile first at 390 px; the chaptered desktop layout starts at 900 px. */

:root{--bar-h:120px;--mid:clamp(56px,8.3vw,120px);--line:#2a343b;--card:#151c21;--soft:#bdb6a8;--gold:#E0A458}
@media (min-width:900px){:root{--bar-h:84px}}
/* WCAG 2.4.11: a focused or targeted element must not hide under the fixed bar. concierge.js writes the
   measured height to --bar-h and sets .bar-off on <html> while the bar is away. */
html{scroll-padding-bottom:var(--bar-h)}
html.bar-off{scroll-padding-bottom:0}

/* ---- B6: shared rules fixed for this page only ---- */
body.offers.concierge{--teal-deep:#1A6F61;--bad:#9a3d1f;padding-bottom:env(safe-area-inset-bottom)}
.concierge main{overflow-x:clip}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The sheet is paper: a teal ring is 1.9:1 there. Ink ring plus a paper halo, so it also shows on ink buttons. */
body.concierge dialog.sheet :focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px var(--tagpaper)}
body.concierge .pane h3:focus{outline:none;box-shadow:none}
/* The 12 px label is wider than the 9.5 px one: it wraps, and the 44 px close button never shrinks. */
body.concierge .sheet .x{flex:none}
body.concierge .sheet .top .lbl{min-width:0;padding-right:12px}
/* 12 px floor over offers.css (lines 20, 41-45, 72, 84, 101, 105-110, 129, 131, 134, 141-142, 147, 169, 179, 195) */
body.concierge .bar .home,body.concierge .foot .fine,body.concierge .opt-note,
body.concierge .sheet .top .lbl,body.concierge .sheet-dock .p small,body.concierge .pane[data-pane="done"] .lbl,
body.concierge .vault .vh,body.concierge .vault .f,body.concierge .vault .rw,body.concierge .chips span,
body.concierge .gate b,body.concierge .reach .rh,body.concierge .steps .sh,body.concierge .steps li,
body.concierge .steps li::before,body.concierge .rr i,body.concierge .rr .txt,body.concierge .care{font-size:12px}
@media (max-width:560px){body.concierge .steps ol{grid-template-columns:repeat(2,1fr)}}
body.concierge .field-err{margin:-8px 0 0;font:500 13px/1.4 var(--sg);color:var(--bad)}
body.concierge fieldset .field-err{margin:0}
body.concierge .bar{max-width:1312px;padding:max(10px,env(safe-area-inset-top)) 18px 0}
body.concierge .bar>a:first-child{display:flex;align-items:center;min-width:44px;min-height:44px}

/* ---- the scenes ---- */
.scene{position:relative;z-index:2;max-width:1312px;margin:0 auto;padding:30px 18px 36px;border-top:1px solid #1b242b;
  display:flex;flex-direction:column;gap:12px}
.scene#s1{border-top:0;padding-top:10px}
.scene .k{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0}
.scene h1,.scene h2{font-weight:700;letter-spacing:-.01em;text-wrap:balance}
.scene h1{font-size:clamp(30px,4.45vw,64px);line-height:1.02}
.scene h2{font-size:clamp(29px,3.6vw,52px);line-height:1.04}
.scene h1 em{font-style:normal;color:var(--gold)}
.scene a{color:var(--teal)}
.scene a:hover{color:var(--cream)}
.scene .fine{font-size:13px;line-height:1.45;color:var(--soft)}

/* A typed guest line: plain text, a 2 px rule, a mono label. Never a chat bubble. */
.said{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:2px solid #3a444c}
.said.hot{border-left-color:var(--gold)}
.said .who{font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.said .say{font-size:15px;line-height:1.35}
.said-list{display:flex;flex-direction:column;gap:10px}
.proof,.lede{font-size:15px;line-height:1.45;color:var(--soft)}

/* The text block of a stacked scene is a column of its own */
.scene.stack>.txt{display:flex;flex-direction:column;gap:12px}

/* The first screen */
.meta{display:flex;justify-content:space-between;align-items:center;gap:12px}
.meta .brand{color:var(--soft)}
.hero-cta,.hero-note{display:none}
.jump{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}

/* Phone: the text block dissolves, so the screen can sit between the claim and its proof line (mock order). */
@media (max-width:899px){
  .scene.split>.txt{display:contents}
  .scene.split .vis{order:1}
  .scene.split .morning{order:2}
  .scene.split .proof{order:3}
  .wire{display:none}
}

/* The screen: a light card, the real image, an honest caption. */
.vis{width:100%;max-width:440px;display:flex;flex-direction:column;gap:18px}
.screen{margin:0}
.frame{position:relative}
.frame img{display:block;width:100%;height:auto;border-radius:16px;background:#f3f5f6}
.screen figcaption{margin-top:10px;font:500 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
#s1 .vis{max-width:none}
#s1 .frame{width:clamp(150px,calc((100vh - 430px) * .46),210px);margin:0 auto;border:5px solid #2a343b;border-radius:30px;background:#f9fafb}
@supports (height:100svh){#s1 .frame{width:clamp(150px,calc((100svh - 430px) * .46),210px)}}
#s1 .frame img{border-radius:25px;background:#f9fafb}
#s1 figcaption{text-align:center}

/* The gold ring. Placed per image by inline --x --y --w --h (percent of the image). 3 px gold + 1.5 px ink outline: 3:1 on white. */
.ring{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);box-sizing:border-box;border:3px solid var(--gold);
  outline:1.5px solid var(--ink);border-radius:12px;pointer-events:none}

/* The thread: a short tick under the typed line (phone), a horizontal wire to the screen (desktop). */
.tick{display:block;width:2px;height:16px;margin-left:13px;background:var(--gold);transform-origin:50% 0}
.wire{position:relative;height:2px}
.wire::before{content:"";position:absolute;inset:0;background:var(--gold);transform-origin:0 50%}
.wire::after{content:"";position:absolute;right:-6px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--gold)}

/* Scene 2: three rules */
.rules{display:flex;flex-direction:column;gap:14px;margin-top:2px}
.rule{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.rule h3{font-size:19px;line-height:1.2}
.rule p{font-size:15px;line-height:1.45;color:var(--soft)}
.note{font-size:13px;line-height:1.45;color:var(--soft)}
.never{margin-top:18px}
.never h3{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.never ul{list-style:none}
.never li{position:relative;padding:8px 0 8px 22px;font-size:15px;line-height:1.4;color:#d9d2c3;border-top:1px solid rgba(239,231,216,.08)}
.never li:first-child{border-top:0}
.never li::before{content:"\2715";position:absolute;left:0;top:9px;color:var(--gold);font:700 13px var(--mono)}

/* Scene 7: the 06:30 line */
.morning{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.morning .k{color:var(--teal)}
.morning p:last-child{font-size:14px;line-height:1.4;color:var(--soft)}

/* ---- the price: the test week first, then both setups, always visible ---- */
.plans{display:flex;flex-direction:column;gap:16px}
.trial,.setup{border-radius:16px;padding:16px}
.trial{background:var(--cream);color:var(--ink);display:flex;flex-direction:column;gap:8px}
.trial .lbl,.setup .lbl{font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.trial .lbl{color:var(--teal-deep)}
.trial .nm{font:700 21px/1.15 var(--sg)}
.trial .pr{font:700 30px/1 var(--sg);letter-spacing:-.02em}
.trial .pr small,.plan .pr small,.plan .mo small{margin-left:8px;font:400 12px/1.3 var(--mono);letter-spacing:.03em}
.trial .pr small,.plan .mo small{display:block;margin:6px 0 0}
.trial .pr small{color:#3A3F45}
.trial ul{list-style:none;display:grid;gap:6px;margin:4px 0 6px}
.trial li{position:relative;padding-left:20px;font-size:14px;line-height:1.45;color:#3A3F45}
.trial li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal-deep);font:700 13px var(--mono)}
.trial li b{color:var(--ink)}
.trial :focus-visible{outline-color:var(--ink)}
.acts{display:grid;gap:10px;margin-top:6px}
.trial .how,.plan .how{min-height:44px;border-radius:12px}
.trial .cta,.plan .cta{min-height:48px;border-radius:12px}
.setup{border:1px solid var(--line);background:var(--card);padding:14px 16px 16px}
.setup .lbl{color:var(--gold);margin-bottom:4px}
.plan-row{display:flex;flex-direction:column}
.plan{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.plan .nm{font:700 16px/1.25 var(--sg)}
.plan .pr{font:700 26px/1.1 var(--sg);letter-spacing:-.02em;margin-top:2px}
.plan .pr small,.plan .mo small{color:var(--soft)}
.plan .mo{font:600 18px/1.2 var(--sg);color:var(--gold)}
.plan .care{display:grid;gap:4px;margin:8px 0 4px;font:400 12px/1.4 var(--mono)}
.plan .care div{display:grid;grid-template-columns:96px 1fr;gap:10px}
.plan .care dt{color:var(--soft);letter-spacing:.06em}
.plan .care dd{color:#d9d2c3}
.setup .how{color:var(--soft);font:500 12px var(--mono);letter-spacing:.04em;border:1px solid rgba(189,182,168,.35)}
.setup .how:hover{border-color:var(--cream);color:var(--cream)}
.setup .cta{background:transparent;border:1.5px solid var(--teal);color:var(--teal);font:700 15px var(--sg)}
.setup .cta:hover{background:rgba(63,191,168,.1);color:var(--cream);border-color:var(--cream)}
.incl{margin-top:8px;padding-top:14px;border-top:1px solid var(--line)}
.incl ul{list-style:none;display:grid;gap:6px}
.incl li{position:relative;padding-left:20px;font-size:14px;line-height:1.45;color:#d9d2c3}
.incl li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal);font:700 13px var(--mono)}
.incl li b,.incl .line b{color:var(--cream)}
.incl .line{margin-top:10px;font-size:14px;line-height:1.45;color:var(--soft)}
@media (min-width:600px){.acts{grid-template-columns:1fr 1fr}}

/* Built in parts, and what the monthly buys: the guarded lists */
.parts,.buys{display:flex;flex-direction:column;gap:12px}
.parts{margin-top:20px}
.parts .k{margin-bottom:2px}
.parts>p,.buys>p{font-size:15px;line-height:1.5;color:var(--soft)}
.parts ul,.buys ul{list-style:none;display:grid;gap:10px}
.parts li,.buys li{position:relative;padding-left:18px;font-size:15px;line-height:1.5;color:var(--soft)}
.parts li::before{content:"+";position:absolute;left:0;top:1px;color:var(--teal);font:700 13px var(--mono)}
.buys li::before{content:"\00D7";position:absolute;left:0;top:1px;color:var(--gold);font:700 13px var(--mono)}
.parts li b,.buys li b{color:var(--cream)}
.parts>p.fine{font-size:13px}

/* The close: a person, then the door */
.close{display:flex;flex-direction:column;gap:12px;padding:20px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.close h3{font-size:26px;line-height:1.08;font-weight:700;letter-spacing:-.01em}
.close>p:not([class]){font-size:14px;line-height:1.45;color:var(--soft)}
.close-cta{display:flex;flex-direction:column;gap:12px}
.close .btn{min-height:52px;font-size:16px}
.contact{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;font:500 12px/1.5 var(--mono);color:var(--soft);text-align:center}
.contact a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal)}

/* ---- buttons and the action bar ---- */
.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border-radius:12px;font:700 15px var(--sg);
  text-decoration:none;text-align:center;cursor:pointer}
.btn.go{background:var(--gold);color:var(--ink)}
.btn.go:hover{background:#ecb878}
.btn.wa,.scene a.btn.wa{border:1.5px solid var(--teal);color:var(--teal)}
.btn.wa:hover,.scene a.btn.wa:hover{border-color:var(--cream);color:var(--cream)}
.scene a.btn.go,.scene a.btn.go:hover{color:var(--ink)}

.actbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;flex-direction:column;gap:8px;
  padding:8px 12px max(14px,env(safe-area-inset-bottom));background:#0b0f12;border-top:1px solid #26313a}
.actbar-note{margin:0;font-size:13px;line-height:1.3;color:var(--soft);text-align:center;text-wrap:balance}
.actbar-btns{margin:0;display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.actbar .btn{min-height:48px;padding:0 12px}
/* Away on the price and close scenes (concierge.js adds .off); gone while a sheet is open (display, not opacity). */
.actbar.off{visibility:hidden;opacity:0;transform:translateY(12px);transition:transform .25s ease-out,opacity .2s ease-out,visibility 0s linear .25s}
body:has(dialog.sheet[open]) .actbar{display:none}

/* ---- the sheets and the footer ---- */
.foot{padding-bottom:calc(30px + env(safe-area-inset-bottom))}

/* ---- desktop: chapters, text left, the screen right, a wire between ---- */
@media (min-width:900px){
  body.concierge .bar{padding-inline:64px}
  .scene{padding:80px 64px;gap:22px}
  .scene#s1{padding-top:56px;padding-bottom:64px}
  .scene .k{font-size:13px}
  .said .say{font-size:clamp(15px,.67vw + 12.4px,22px)}
  .proof,.lede{font-size:clamp(15px,.38vw + 13.5px,19px);line-height:1.5;max-width:30em}
  .lede{max-width:34em}
  .tick{display:none}
  .scene h2{margin-top:6px}
  .scene.split{display:grid;grid-template-columns:minmax(0,1fr) var(--mid) minmax(0,1fr);align-items:center;gap:0}
  .scene.split>.txt{display:flex;flex-direction:column;gap:22px;min-width:0;grid-column:1}
  .scene.split>.vis{justify-self:start;min-width:0;grid-column:3}
  .scene.split>.wire{display:block;grid-column:2}
  #s1 .wire{display:none}
  #s1.split{grid-template-columns:minmax(0,1fr) clamp(40px,5vw,72px) minmax(0,1fr)}
  #s1 .vis{justify-self:center}
  #s1 .frame{width:clamp(240px,calc((100vh - 300px) * .5),330px);border-width:6px;border-radius:40px}
  @supports (height:100svh){#s1 .frame{width:clamp(240px,calc((100svh - 300px) * .5),330px)}}
  #s1 .frame img{border-radius:34px}
  .meta{justify-content:flex-start;gap:24px}
  .hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
  .hero-cta .btn{min-height:56px;padding:0 28px;font-size:17px}
  .hero-cta .jump{display:inline-flex;align-items:center;min-height:44px;margin-left:4px}
  .hero-note{display:block;font-size:15px;color:var(--soft)}
  .rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .rule{padding:22px}
  .rule h3{font-size:21px}
  .never ul{columns:2;column-gap:40px}
  .never li{break-inside:avoid}
  .trial,.setup{padding:30px 32px;border-radius:20px}
  .trial .nm{font-size:34px}
  .trial .pr{font-size:40px}
  .trial li{font-size:16px}
  .plan-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:6px}
  .plan{padding:18px;border:1px solid var(--line);border-radius:14px}
  .plan .nm{font-size:17px}
  .plan .pr{font-size:30px}
  .plan .acts{margin-top:auto;grid-template-columns:1fr}
  .plan .care div{grid-template-columns:1fr;gap:2px}
  .plan{min-width:0;overflow-wrap:anywhere}
  .incl li,.incl .line{font-size:16px}
  .scene.stack#s9 .txt{margin-bottom:10px}
  .scene.stack#s9>.fine{max-width:46em}
  .parts{max-width:46em}
  .scene.stack#s10{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;row-gap:22px;align-items:start}
  .scene.stack#s10>.txt{grid-column:1}
  .scene.stack#s10>.buys{grid-column:1}
  .scene.stack#s10>.close{grid-column:2;grid-row:1/span 2;padding:32px}
  .buys>p,.buys li{font-size:17px}
  .close h3{font-size:32px}
  .close>p:not([class]){font-size:16px}
  .close-cta{flex-direction:row;flex-wrap:wrap}
  .close-cta .btn{flex:1 1 auto;padding:0 24px}
  .actbar{flex-direction:row;justify-content:center;align-items:center;gap:20px;padding:12px 24px max(12px,env(safe-area-inset-bottom))}
  .actbar-note{font-size:14px;text-align:left}
  .actbar-btns{display:flex;gap:12px}
  .actbar .btn{padding:0 24px}
}

/* The test week beside the setup only where both fit; below 1100 px they stack, the two setups side by side. */
@media (min-width:1100px){
  .plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start}
  .trial .acts{grid-template-columns:1fr}
}

/* ---- the signature: base style above is the finished state (tick, ring, wire drawn) ---- */
@media (prefers-reduced-motion:no-preference){
  /* Scroll-driven draw, transform and opacity only. */
  @supports (animation-timeline:view()){
    @keyframes sig-tick{from{transform:scaleY(0)}to{transform:scaleY(1)}}
    @keyframes sig-wire{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    @keyframes sig-ring{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
    @keyframes sig-dot{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
    .tick{animation:sig-tick linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    .ring{animation:sig-ring ease-out both;animation-timeline:view();animation-range:entry 10% cover 34%}
    .wire::before{animation:sig-wire linear both;animation-timeline:view();animation-range:entry 0% cover 36%}
    .wire::after{animation:sig-dot ease-out both;animation-timeline:view();animation-range:cover 26% cover 40%}
  }
  /* No scroll timelines (Firefox, iOS 18 and older): concierge.js adds .pre to what is below the fold, an
     IntersectionObserver adds .in, and a short transition draws it. */
  @supports not (animation-timeline:view()){
    .tick.pre,.ring.pre,.wire.pre::before,.wire.pre::after{transition:transform .5s ease-out,opacity .5s ease-out}
    .wire.pre::after{transition-delay:.4s}
    .tick.pre:not(.in){transform:scaleY(0)}
    .ring.pre:not(.in){opacity:0;transform:scale(.94)}
    .wire.pre:not(.in)::before{transform:scaleX(0)}
    .wire.pre:not(.in)::after{opacity:0;transform:scale(.2)}
  }
}