/* Floorbeat landing site. Tokens are documented in BRAND.md; change them there first. */
:root{
  --night:#0F0B0D;
  --surface:#1A1417;
  --surface-2:#221A1E;
  --line:#2E2428;
  --cream:#FFF6EE;
  --soft:#D8C7BB;
  --muted:#A8958B;
  --wine:#A6093D;
  --ember:#E8955A;
  --amber:#D9A441;
  --rose:#E0798E;
  --grad:linear-gradient(120deg,var(--wine) 0%,var(--ember) 55%,var(--amber) 100%);
  --display:"Fraunces",Georgia,serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radius:18px;
  --wrap:1120px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);font:400 17px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
section{padding:72px 0}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(32px,7vw,52px)}
h3{font-size:22px;line-height:1.2}
p{margin:0}
.label{display:inline-block;font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.lede{color:var(--soft);font-size:18px;max-width:40ch;margin-top:16px}
.gt{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* buttons: 52px tall so a thumb never misses. A light runs around the rim, the signature in small. */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;
  font:600 16px/1 var(--body);letter-spacing:.01em;text-decoration:none;color:var(--night);border:0;
  background:linear-gradient(120deg,#F2B07A 0%,var(--ember) 40%,var(--amber) 100%);
  box-shadow:0 0 0 1px rgba(255,214,170,.35) inset,0 10px 30px -10px rgba(232,149,90,.75),0 0 40px -12px rgba(166,9,61,.9);
  transition:transform .2s ease,box-shadow .2s ease}
.btn::before{content:"";position:absolute;inset:-2px;border-radius:inherit;z-index:-1;padding:2px;
  background:conic-gradient(from var(--ang),transparent 0 70%,rgba(255,240,220,.95) 82%,var(--ember) 88%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orbit 3.2s linear infinite}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%) -150% 0/60% 100% no-repeat;transition:background-position .6s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,214,170,.5) inset,0 16px 40px -12px rgba(232,149,90,.9),0 0 60px -10px rgba(166,9,61,1)}
.btn:hover::after{background-position:250% 0}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{color:var(--cream);background:rgba(26,20,23,.65);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line) inset}
.btn.ghost::after{background-image:linear-gradient(105deg,transparent 30%,rgba(232,149,90,.25) 50%,transparent 70%)}
.btn.ghost:hover{box-shadow:0 0 0 1px rgba(232,149,90,.5) inset,0 12px 34px -14px rgba(232,149,90,.6)}
@keyframes orbit{to{--ang:360deg}}

/* the signature beat line, drawn by site.js */
.beat{position:relative;height:80px;overflow:hidden;pointer-events:none}
.beat svg{position:absolute;left:0;top:0;overflow:visible}
.b-trace{fill:none;stroke:url(#beatGrad);stroke-width:1.5;opacity:.38;stroke-linecap:round;stroke-linejoin:round}
.beat-glow{filter:drop-shadow(0 0 3px rgba(255,220,180,1)) drop-shadow(0 0 10px rgba(242,176,122,.95)) drop-shadow(0 0 24px rgba(232,149,90,.85)) drop-shadow(0 0 40px rgba(166,9,61,.9))}
.beat-glow path,.fx-glow path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--l) 3;--dur:5.2s;
  animation:var(--dur,3.6s) linear var(--delay,0s) infinite both}
.b-trail{--l:.2;animation-name:run-trail!important;stroke:url(#beatGrad);stroke-width:2.5;opacity:.75}
.b-mid{--l:.07;animation-name:run-mid!important;stroke:#F2B07A;stroke-width:3;opacity:.95}
.b-head{--l:.0005;animation-name:run-head!important;stroke:#FFF8EE;stroke-width:7}
@keyframes run-trail{from{stroke-dashoffset:.2}to{stroke-dashoffset:-1.1}}
@keyframes run-mid{from{stroke-dashoffset:.07}to{stroke-dashoffset:-1.23}}
@keyframes run-head{from{stroke-dashoffset:.0005}to{stroke-dashoffset:-1.2995}}
.beat.divider{max-width:var(--wrap);margin:0 auto}
.beat.divider + section,section + .beat.divider{margin-top:0}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(15,11,13,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo img{height:32px;width:auto}
.nav-links{display:none;gap:28px;align-items:center}
.nav-links a:not(.btn){text-decoration:none;color:var(--soft);font-weight:500;font-size:15px}
.nav-links a:not(.btn):hover{color:var(--cream)}
.nav .btn{min-height:44px;font-size:15px;padding:0 18px}

/* hero */
.hero{position:relative;padding:56px 0 72px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -30% auto;height:520px;background:radial-gradient(50% 50% at 50% 50%,rgba(166,9,61,.35),transparent 70%);pointer-events:none}
.hero-in{position:relative;display:grid;gap:48px}
.hero-mark{width:72px;height:72px;margin-bottom:28px}
.hero h1{font-size:clamp(48px,12vw,88px)}
.hero .lede{font-size:19px;max-width:34ch}
.beat-hero{position:absolute;left:0;right:0;bottom:0}

.wishes{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px}
.wishes-h{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.wish{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid var(--line);font-weight:500}
.wish:last-child{border-bottom:0}
/* granted chip: a glowing seal, and a light that sweeps the rows one after another */
.wish{position:relative}
.granted{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px 0 4px;border-radius:999px;overflow:hidden;
  font-size:13px;font-weight:600;letter-spacing:.02em;color:#FFE2C2;
  background:linear-gradient(120deg,rgba(166,9,61,.28),rgba(232,149,90,.2) 60%,rgba(217,164,65,.22));
  box-shadow:0 0 0 1px rgba(232,149,90,.4) inset,0 0 18px -6px rgba(232,149,90,.7)}
.granted .seal{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:var(--night);
  box-shadow:0 0 10px rgba(232,149,90,.9)}
.granted svg{width:14px;height:14px}
.granted::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,240,220,.55) 50%,transparent 65%) -120% 0/70% 100% no-repeat;
  animation:sweep 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s + 1s)}
@keyframes sweep{0%{background-position:-120% 0}18%,100%{background-position:220% 0}}
.js .wishes.rv .granted{opacity:0;transform:scale(.6)}
.js .wishes.rv.in .granted{opacity:1;transform:none;transition:opacity .4s ease,transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i,0) * .18s + .3s)}

/* problem */
.problem{background:var(--surface)}
.pain{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:12px}
.pain li{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:var(--night);border:1px solid var(--line);border-radius:14px}
.pain li b{display:block;font-family:var(--display);font-weight:600;font-size:20px;margin-bottom:2px}
.pain li span{color:var(--soft)}
.pain .x{flex:none;width:28px;height:28px;border-radius:50%;background:rgba(224,121,142,.14);color:var(--rose);display:grid;place-items:center;margin-top:2px}
.pain .x svg{width:14px;height:14px}

/* product blocks */
.split{display:grid;gap:40px;align-items:center}
.ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--soft)}
.ticks li b{color:var(--cream);font-weight:600}
.ticks svg{flex:none;width:22px;height:22px;color:var(--amber);margin-top:1px}

.pos-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.pos-top{display:flex;justify-content:space-between;color:var(--muted);font-size:14px;font-weight:500;margin-bottom:14px}
.pos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pos-item{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 10px;font-size:14px;font-weight:500;min-height:64px}
.pos-item small{display:block;color:var(--muted);font-weight:400;margin-top:4px}
.pos-item.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.pos-bar{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:14px 16px;border-radius:12px;background:var(--night);border:1px solid var(--line);font-weight:600}
.pos-bar .send{background:var(--amber);color:var(--night);border-radius:999px;padding:8px 14px;font-size:14px}

.watch{display:grid;place-items:center;padding:20px 0}
.watch-body{position:relative;width:min(300px,78vw);aspect-ratio:1;border-radius:50%;background:#050304;border:10px solid #2A2124;
  box-shadow:0 0 0 2px #3A2E32,0 40px 90px -30px rgba(166,9,61,.6);display:grid;place-items:center;text-align:center}
.watch-face{width:72%}
.wf-tag{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--rose)}
.wf-main{font-family:var(--display);font-size:clamp(22px,6vw,28px);line-height:1.1;margin:8px 0 4px}
.wf-sub{font-size:13px;color:var(--soft)}
.wf-acts{display:flex;gap:6px;justify-content:center;margin-top:14px}
.wf-acts span{font-size:12px;font-weight:600;padding:8px 12px;border-radius:999px;background:var(--surface-2)}
.wf-acts span:first-child{background:var(--amber);color:var(--night)}
.bubble{margin:24px auto 0;width:min(300px,100%);background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:15px}
.bubble small{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}

/* features */
.feat-grid{display:grid;gap:12px;margin-top:40px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.feat .fx{width:100%;height:auto;aspect-ratio:2/1;margin:-4px 0 14px;border-radius:12px;background:radial-gradient(60% 70% at 50% 60%,rgba(166,9,61,.14),transparent 70%)}
.feat p{color:var(--soft);margin-top:8px}

/* steps */
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{position:relative;padding:24px 24px 24px 84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:24px;top:22px;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad);color:var(--night);font:600 18px/1 var(--display)}
.steps p{color:var(--soft);margin-top:6px}

/* audience */
.who{display:grid;gap:12px;margin-top:40px}
.who article{padding:28px 24px;border-radius:var(--radius);border:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--night))}
.who .role{font:600 13px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.who h3{margin-top:12px;font-size:24px}
.who p{color:var(--soft);margin-top:10px}

/* faq */
.faq{display:grid;gap:10px;margin-top:36px;max-width:760px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.faq summary{list-style:none;cursor:pointer;min-height:60px;padding:18px 56px 18px 20px;position:relative;font-weight:600;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font:400 28px/1 var(--body);color:var(--amber)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 20px 20px;color:var(--soft)}

/* waitlist + footer */
.waitlist{text-align:center;padding:88px 0;position:relative;overflow:hidden}
.waitlist::before{content:"";position:absolute;inset:auto -20% -60%;height:500px;background:radial-gradient(50% 50% at 50% 50%,rgba(232,149,90,.22),transparent 70%)}
.waitlist .wrap{position:relative}
.waitlist h2{font-size:clamp(40px,10vw,72px)}
.waitlist .lede{margin:16px auto 0}
.waitlist .btn-row{justify-content:center}
.placeholder{margin:28px auto 0;max-width:440px;padding:16px;border:2px dashed var(--line);border-radius:14px;color:var(--muted);font-size:14px}
footer{border-top:1px solid var(--line);padding:32px 0 112px}
.foot{display:flex;flex-direction:column;gap:16px;color:var(--muted);font-size:15px}
.foot img{height:28px;width:auto}
.foot a{color:var(--soft)}

/* sticky thumb bar on phones */
.thumb-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(15,11,13,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.thumb-bar .btn{flex:1;padding:0 12px}

/* reveal, only when JS runs and motion is welcome */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}

@media (min-width:720px){
  section{padding:104px 0}
  .wrap{padding:0 32px}
  .pain{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .who{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{padding:84px 24px 24px}
  .steps li::before{top:24px}
}
@media (min-width:960px){
  .nav-links{display:flex}
  .thumb-bar{display:none}
  footer{padding-bottom:40px}
  .foot{flex-direction:row;justify-content:space-between;align-items:center}
  .hero{padding:96px 0 120px}
  .hero-in{grid-template-columns:1.15fr .85fr;align-items:center}
  .split{grid-template-columns:1fr 1fr;gap:72px}
  .split.rev > :first-child{order:2}
  .feat-grid{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .beat-glow{display:none}
  .btn::before,.granted::after{animation:none}
  .js .wishes.rv .granted{opacity:1;transform:none}
  .btn{transition:none}
}

/* FB ripple mark: rings drop out of the disc like a stone in water */
.hero-mark{width:88px;height:88px;margin-bottom:28px;overflow:visible}
.ripple-mark{width:100%;height:100%;overflow:visible}
.rip{transform-box:fill-box;transform-origin:center;opacity:0;animation:ripple 3.6s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes ripple{0%{transform:scale(1);opacity:.9;stroke-width:2.2}100%{transform:scale(2.3);opacity:0;stroke-width:.4}}
@media (prefers-reduced-motion:reduce){
  .rip{animation:none;opacity:.5}
  .rip[style*="--k:1"]{transform:scale(1.3);opacity:.35}
  .rip[style*="--k:2"]{transform:scale(1.55);opacity:.2}
}

/* feature motion graphics: line drawings with the signature light running through them (site.js) */
.fx{overflow:visible}
.fx .b-trace{stroke-width:1.6;opacity:.45}
.fx-glow path{--dur:4.2s}
.fx-ink{fill:none;stroke:var(--soft);stroke-width:1.4;opacity:.35;stroke-linecap:round;stroke-linejoin:round}
.fx-hot{fill:none;stroke:var(--rose);stroke-width:2.4;stroke-linecap:round}
.fx-txt{font:600 11px/1 var(--body);fill:var(--soft);letter-spacing:.04em}
.fx-txt.hot{fill:var(--rose)}
.fx-txt.ok{fill:var(--amber)}
.fx-dot{fill:var(--amber)}
.fx-blink{animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}

/* the watch: a light rides the rim, and each alert drops a ripple */
.watch{position:relative}
.watch-stage{position:relative;display:grid;place-items:center}
.watch-fx{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);pointer-events:none}
.wrip{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ember);opacity:0;pointer-events:none;animation:wrip 3.6s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes wrip{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.45);opacity:0}}
@media (prefers-reduced-motion:reduce){.fx-glow,.wrip{display:none}.fx-blink{animation:none;opacity:1}}

/* lit outline: a light that runs the border, kept for the few things that matter */
.lit{position:relative;isolation:isolate}
.lit::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(166,9,61,.9) 74%,var(--ember) 84%,#FFF3E2 88%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orbit 6s linear infinite}
.lit::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 0 50px -18px rgba(232,149,90,.55),0 0 0 1px rgba(232,149,90,.12)}
.feat{position:relative;isolation:isolate;transition:transform .25s ease,border-color .25s ease}
.feat::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:conic-gradient(from var(--ang),transparent 0 62%,rgba(166,9,61,.9) 74%,var(--ember) 84%,#FFF3E2 88%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:orbit 4s linear infinite}
.feat:hover,.feat:focus-within{transform:translateY(-3px);border-color:transparent}
.feat:hover::before,.feat:focus-within::before{opacity:1}
.placeholder.lit{border-style:solid;border-color:transparent}
@media (prefers-reduced-motion:reduce){.lit::before,.feat::before{animation:none}}


/* ============================================================
   THE DOORS
   A 320vh stage pins its frame for the whole scroll. JS writes
   --open (0..1); every transform below reads it. Because --open is
   recomputed from absolute scroll each tick (never incremented),
   scrolling back closes the doors exactly as they opened.

   @property is what lets --open animate smoothly rather than
   snapping; browsers without it still get the correct positions,
   just stepped per frame, which is already per-frame anyway.
   ============================================================ */
@property --open{syntax:"<number>";inherits:true;initial-value:0}

/* 240vh of travel, pinned at 78vh: the doors read as a tall banner with the
   next section peeking in, rather than a full-screen takeover before the
   visitor has scrolled at all. */
.door-stage{--open:0;position:relative;height:240vh;background:var(--night)}
.door-pin{
  position:sticky;top:0;height:78vh;min-height:520px;overflow:hidden;
  display:grid;place-items:center;
  perspective:1700px;perspective-origin:50% 48%;
}

/* the room behind the doors, dollying in as they part */
.door-room{position:absolute;inset:0;z-index:0;overflow:hidden}
.door-room img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.28 - var(--open) * .22));
  filter:brightness(calc(.42 + var(--open) * .58)) saturate(1.05);
}
/* warm light spilling from the widening gap */
.door-room::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44% 70% at 50% 52%,
    rgba(255,196,118,calc(var(--open) * .36)), transparent 72%);
}

/* the two leaves */
.door{
  position:absolute;top:-2%;height:104%;width:51%;z-index:2;
  background:url("/assets/img/door.webp") center/cover no-repeat;
  box-shadow:0 0 70px rgba(0,0,0,.6);
  will-change:transform;
  backface-visibility:hidden;
}
/* Handles meet in the CENTRE, like real double doors. The source art has its
   handle on the LEFT edge, so the LEFT leaf is the mirrored one and the right
   leaf uses the artwork as-shot. Mirroring goes on a ::before layer, never on
   the element: scaleX(-1) on the box flips it around its own centre, shoving
   it off-screen and inverting the hinge. */
.door.l{
  left:0;transform-origin:left center;
  transform:rotateY(calc(var(--open) * -78deg)) translateX(calc(var(--open) * -7%));
  background-image:none;
}
.door.l::before{
  content:"";position:absolute;inset:0;
  background:url("/assets/img/door.webp") center/cover no-repeat;
  transform:scaleX(-1);
}
.door.r{
  right:0;transform-origin:right center;
  transform:rotateY(calc(var(--open) * 78deg)) translateX(calc(var(--open) * 7%));
}
/* Leading edge darkens as each leaf swings away from the light. The leading
   edge is the inner one, so the gradients point toward the centre seam. */
.door.l::after{
  background:linear-gradient(270deg,
    rgba(0,0,0,calc(.05 + var(--open) * .5)) 0%, transparent 38%);
}
.door.r::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,calc(.05 + var(--open) * .5)) 0%, transparent 38%);
}
/* edge shading: the leading edge darkens as it swings away from the light */
.door::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(0,0,0,calc(.05 + var(--open) * .5)) 0%, transparent 38%);
}

/* the headline, over the closed doors, gone once they part */
.door-title{
  position:relative;z-index:3;text-align:center;padding:0 24px;
  opacity:calc(1 - var(--open) * 2.6);
  transform:translateY(calc(var(--open) * -28px));
  pointer-events:none;
}
.door-title .eyebrow{color:#F0C98A}
.door-title h1{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  color:#fff;margin:14px 0 0;
  font-size:clamp(2.1rem,5.2vw,4.2rem);letter-spacing:-.04em;line-height:1.02;
  text-shadow:0 10px 50px rgba(0,0,0,.8);
}
.door-title h1 em{
  font-style:normal;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.door-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:3;color:rgba(255,255,255,.62);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:calc(1 - var(--open) * 3);
}
.door-scroll::after{
  content:"";display:block;width:1px;height:26px;margin:10px auto 0;
  background:linear-gradient(rgba(255,255,255,.6), transparent);
}

/* the product, rising out of the room once the doors are mostly open */
.door-reveal{
  position:relative;z-index:3;display:grid;place-items:center;gap:12px;
  text-align:center;padding:0 24px;
  opacity:calc((var(--open) - .62) * 3.4);
  transform:translateY(calc((1 - var(--open)) * 70px));
  pointer-events:none;
}
.door-stage.is-open .door-reveal{pointer-events:auto}
.door-reveal .eyebrow{color:#F0C98A}
.dr-title{
  font-family:var(--display);font-weight:600;
  color:#fff;font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.03em;
  margin:10px 0 4px;text-shadow:0 8px 40px rgba(0,0,0,.7);
}
.dr-list{
  list-style:none;display:flex;flex-direction:column;gap:0;
  text-align:left;max-width:30em;margin:0 auto;
}
.dr-list li{
  display:flex;align-items:center;gap:13px;
  color:#E6EDF7;font-size:clamp(.95rem,1.7vw,1.12rem);font-weight:600;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.1);
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
.dr-list li:last-child{border-bottom:none}
.dr-list .x{
  flex:none;width:19px;height:19px;border-radius:50%;position:relative;
  background:rgba(224,121,142,.18);
}
.dr-list .x::before,.dr-list .x::after{
  content:"";position:absolute;left:5px;right:5px;top:50%;height:2px;
  border-radius:2px;background:var(--rose);
}
.dr-list .x::before{transform:rotate(45deg)}
.dr-list .x::after{transform:rotate(-45deg)}
.dr-kicker{color:#AEBECF;font-size:1.02rem}
.dr-kicker strong{color:var(--amber);font-weight:700}

/* Reduced motion / no JS: no pin, no swing. The doors are already open and
   the headline and product both read as one normal section. A pinned hero
   that cannot animate would otherwise be a blank screen. */
.door-stage.static-open{height:auto;--open:1}
.door-stage.static-open .door-pin{position:relative;height:auto;padding:90px 0}
.door-stage.static-open .door{display:none}
.door-stage.static-open .door-title{opacity:1;transform:none}
.door-stage.static-open .door-reveal{opacity:1;transform:none;pointer-events:auto;margin-top:40px}
.door-stage.static-open .door-scroll{display:none}
html:not(.js) .door-stage{height:auto}
html:not(.js) .door-pin{position:relative;height:auto;padding:90px 0}
html:not(.js) .door{display:none}
html:not(.js) .door-title{opacity:1}
html:not(.js) .door-reveal{opacity:1;transform:none;pointer-events:auto;margin-top:40px}
html:not(.js) .door-scroll{display:none}
.door-stage .eyebrow{display:inline-block;font:600 13px/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#F0C98A}
.dr-list{padding:0}
.door-stage .dr-kicker{margin:6px 0 0}
.door-stage,#watch,#features{overflow-x:clip}
.door-stage{padding:0}

/* doors fill the whole screen under the nav, so no dark band shows below them */
.door-pin{top:64px;height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:480px}
/* title and reveal share one cell, centred on the doors instead of stacking */
.door-pin > .door-title,.door-pin > .door-reveal{grid-area:1/1}
.door-title{transform:translateY(calc(var(--open) * -28px))}
.door-stage{height:260vh}

/* line-art POS and watch, same language as the feature graphics */
.pos-art,.watch-art{width:100%;max-width:480px;margin:0 auto}
.watch-art{max-width:360px}
.pos-art .fx,.watch-art .fx{width:100%;height:auto;display:block}
.fx-ink.on{stroke:var(--amber);opacity:.85}
.fx .mid{text-anchor:middle}
.fx-txt.cream{fill:var(--cream);font-size:14px}
.fx-big{font:600 26px/1 var(--display);fill:var(--cream)}
.pos-art .fx-txt{font-size:12px}
.wr{fill:none;stroke:var(--ember);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:wr 3.6s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:calc(var(--k) * 1.2s)}
@keyframes wr{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.32);opacity:0}}

/* titles: words rise in one by one, then a glint runs across them */
.js .tw{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.7,.2,1),filter .6s ease;transition-delay:calc(var(--w) * 70ms)}
.js .in .tw,.js .tw-on .tw{opacity:1;transform:none;filter:none;animation:glint 1.4s ease-out both;animation-delay:calc(var(--w) * 90ms + .5s)}
@keyframes glint{0%,100%{text-shadow:none}40%{text-shadow:0 0 18px rgba(242,176,122,.85),0 0 40px rgba(166,9,61,.6)}}

/* wishes are granted one after another, not all at once */
.js .wishes.rv .wish{opacity:0;transform:translateX(-12px);transition:opacity .5s ease,transform .5s ease;transition-delay:calc(var(--i) * .6s + .3s)}
.js .wishes.rv.in .wish{opacity:1;transform:none}
.js .wishes.rv.in .granted{transition-delay:calc(var(--i) * .6s + .8s)}
@media (prefers-reduced-motion:reduce){
  .js .tw{opacity:1;transform:none;filter:none;animation:none}
  .js .wishes.rv .wish{opacity:1;transform:none}
  .wr{animation:none}
}

/* door title sits just above the handles, never on them */
.door-pin{--title-gap:calc((100svh - 64px) * .48)}
.door-pin > .door-title{align-self:end;margin-bottom:var(--title-gap)}

/* ===== watch-first sections ===== */
.art{width:100%;max-width:500px;margin:0 auto}
.art .fx,.alert-big .fx{width:100%;height:auto;display:block}
.fx-hand{font:italic 600 17px var(--display);fill:#F2D9B8}
.kicker{margin-top:22px;font:600 21px/1.3 var(--display);color:var(--cream)}
.new{display:inline-block;margin-right:8px;padding:4px 9px;border-radius:999px;background:var(--grad);color:var(--night);letter-spacing:.08em}
.proof{margin-top:26px;font:600 20px/1.35 var(--display);color:var(--cream);max-width:24ch}
.proof .gt{display:block;font-size:clamp(44px,9vw,64px);line-height:1}

/* the alert watch */
.alert-stage{display:grid;gap:28px;margin-top:40px;align-items:center}
.alert-big{--ac:#E0798E;max-width:380px;width:100%;margin:0 auto}
.aw-glow{fill:var(--ac);opacity:.1;transition:fill .5s}
.aw-kind{fill:var(--ac);letter-spacing:.14em}
.aw-btn{fill:none;stroke:var(--ac);stroke-width:1.6}
.aw-btxt{fill:var(--ac);font-weight:700}
.aw-title{font-size:19px}
.aw-screen{transition:opacity .35s ease}
.aw-screen.swap{opacity:0}
.alert-big .b-trail,.alert-big .b-mid{stroke:var(--ac)}
.alert-list{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory}
.alert-list li{flex:0 0 auto;scroll-snap-align:start}
.al{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:168px;min-height:76px;padding:14px 16px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);color:var(--cream);font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,box-shadow .25s}
.al i{width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.al b{font:600 15px/1.2 var(--body)}
.al span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ac)}
.al[aria-pressed="true"]{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset,0 0 28px -10px var(--ac)}
@media (min-width:960px){
  .alert-stage{grid-template-columns:1fr 1.1fr;gap:56px}
  .alert-list{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible}
  .al{min-width:0}
}

/* talk: the voice wave */
.wave line{transform-box:fill-box;transform-origin:center;animation:wv 1.1s ease-in-out infinite}
.wave line:nth-child(2){animation-delay:.15s}.wave line:nth-child(3){animation-delay:.3s}.wave line:nth-child(4){animation-delay:.45s}.wave line:nth-child(5){animation-delay:.6s}
@keyframes wv{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

/* freebies: a light scans the ticket and stamps the notes */
.stamp rect{fill:rgba(224,121,142,.14);stroke:var(--rose);stroke-width:1.4}
.stamp text{fill:var(--rose);font:700 11px var(--body);letter-spacing:.05em;text-anchor:middle}
.stamp.ok rect{fill:rgba(217,164,65,.12);stroke:var(--amber)}
.stamp.ok text{fill:var(--amber)}
.scan{fill:var(--amber);opacity:0;filter:url(#fxglow)}
.js .ticket .stamp{opacity:0;transform:scale(1.5);transform-box:fill-box;transform-origin:center}
.js .ticket.in .stamp{opacity:1;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--s) * 1.15s + 1s)}
.js .ticket.in .scan{animation:scan 3.8s linear .3s both}
@keyframes scan{0%{transform:translateY(0);opacity:0}5%{opacity:.9}92%{opacity:.9}100%{transform:translateY(250px);opacity:0}}

/* the register board */
.note rect{fill:rgba(255,255,255,.02);stroke:var(--c);stroke-width:1.6}
.note circle{fill:var(--c)}
.note text{fill:var(--c);font:700 12px var(--body);letter-spacing:.1em}
.note .nb{font:500 14px var(--body);fill:var(--cream);letter-spacing:0}
.note .ackd{fill:#7BD88F;font-size:12px}
.note.acked{animation:ackfade 6s ease-in-out infinite}
@keyframes ackfade{0%,55%{opacity:1}75%,90%{opacity:.18}100%{opacity:1}}
.js .art .note{opacity:0;transition:opacity .5s ease}
.js .art.in .note{opacity:1}
.js .art.in .note:nth-child(2){transition-delay:.35s}.js .art.in .note:nth-child(3){transition-delay:.7s}.js .art.in .note:nth-child(4){transition-delay:1.05s}

/* clock-out points */
.js .receipt .pt{opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--p) * .45s + .5s)}
.js .receipt.in .pt{opacity:1;transform:none}
.bar{fill:url(#beatGrad);transform-box:fill-box;transform-origin:left;transform:scaleX(.73)}
.js .receipt .bar{transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1) 2.4s}
.js .receipt.in .bar{transform:scaleX(.73)}

/* same weekday curve */
.ly{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 4;opacity:.8}
.today{fill:none;stroke:url(#beatGrad);stroke-width:2.8;stroke-linecap:round}
.js .art .today{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s ease .4s}
.js .art.in .today{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  .wave line,.note.acked{animation:none}
  .js .ticket .stamp,.js .art .note,.js .receipt .pt{opacity:1;transform:none}
  .js .receipt .bar{transform:scaleX(.73)}
  .js .art .today{stroke-dashoffset:0}
  .scan{display:none}
}

/* doors with depth: a heavy frame, raking light across the moldings, and leaves resting just ajar */
.door-pin::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 12px #1B110D,inset 0 0 0 13px rgba(255,214,170,.10),inset 0 0 0 22px rgba(0,0,0,.35),inset 0 0 90px 30px rgba(0,0,0,.65)}
.door.l{transform:rotateY(calc(var(--open) * -78deg - 2.5deg)) translateX(calc(var(--open) * -7%))}
.door.r{transform:rotateY(calc(var(--open) * 78deg + 2.5deg)) translateX(calc(var(--open) * 7%))}
.door.l::after{background:
  linear-gradient(270deg,rgba(0,0,0,calc(.18 + var(--open) * .5)) 0%,transparent 30%),
  linear-gradient(118deg,rgba(255,226,190,.16) 0%,transparent 34%,transparent 62%,rgba(0,0,0,.32) 100%),
  linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 16%,transparent 84%,rgba(0,0,0,.45) 100%)}
.door.r::after{background:
  linear-gradient(90deg,rgba(0,0,0,calc(.18 + var(--open) * .5)) 0%,transparent 30%),
  linear-gradient(242deg,rgba(255,226,190,.10) 0%,transparent 34%,transparent 62%,rgba(0,0,0,.38) 100%),
  linear-gradient(180deg,rgba(0,0,0,.28) 0%,transparent 16%,transparent 84%,rgba(0,0,0,.45) 100%)}
/* the seam: a thin line of warm light from the room, brighter as they open */
.door-room::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);z-index:1;
  background:linear-gradient(180deg,transparent,rgba(255,196,118,.85) 30%,rgba(255,196,118,.85) 70%,transparent);
  filter:blur(2px);opacity:calc(.7 - var(--open) * 3)}

/* phones: show the handle side of each leaf at the seam, not the middle of the panel */
@media (max-width:719px){
  .door.r{background-position:left center}
  .door.l::before{background-position:left center}
  .door-pin{--title-gap:calc((100svh - 64px) * .56)}
}

/* "available today." arrives on a beat: a pulse of light runs through it, then it keeps a slow heartbeat */
.door-title h1 em{display:inline-block;
  background:linear-gradient(100deg,var(--wine) 0%,var(--ember) 30%,var(--amber) 45%,#FFF3E2 50%,var(--amber) 55%,var(--ember) 70%,var(--wine) 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:em-in 1.2s cubic-bezier(.2,.7,.2,1) .5s both,em-sweep 4.8s linear 1.4s infinite,em-beat 4.8s ease-out 1.4s infinite}
@keyframes em-in{0%{opacity:0;transform:scale(.94);filter:blur(8px)}55%{opacity:1;transform:scale(1.04);filter:blur(0) drop-shadow(0 0 22px rgba(242,176,122,.9))}100%{transform:scale(1);filter:none}}
@keyframes em-sweep{0%{background-position:100% 0}40%,100%{background-position:-50% 0}}
@keyframes em-beat{0%,100%{filter:none}6%{filter:drop-shadow(0 0 16px rgba(242,176,122,.85)) drop-shadow(0 0 34px rgba(166,9,61,.6))}12%{filter:none}18%{filter:drop-shadow(0 0 12px rgba(242,176,122,.7))}28%{filter:none}}
@media (prefers-reduced-motion:reduce){.door-title h1 em{animation:none;background-position:30% 0}}

/* talk: the owner on the beach and three restaurants, one conversation at a time */
.talk-wrap{display:grid;gap:36px}
.talk-art{max-width:1000px;width:100%}
.talk-tabs{display:flex;gap:10px;margin-top:28px;overflow-x:auto;padding-bottom:4px}
.tt{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;min-height:64px;padding:12px 16px;border-radius:14px;text-align:left;cursor:pointer;
  background:var(--night);border:1px solid var(--line);color:var(--cream);font:inherit;transition:border-color .25s,box-shadow .25s}
.tt b{font:600 15px/1.2 var(--body)}
.tt span{font-size:13px;color:var(--muted)}
.tt[aria-pressed="true"]{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset,0 0 28px -10px var(--ember)}
.talk-art .fx-txt{font-size:12px}
.talk-art .fx-txt.cream{font-size:15px}
.tw-role{font-size:9px!important;letter-spacing:.1em}
.tw-watch.own{stroke:var(--amber);opacity:.9}
.sea{stroke:#6E8FC4;opacity:.5}
.scene{opacity:0;transition:opacity .45s ease}
.scene.on{opacity:1}
.scene .bub{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.scene.on .bub{opacity:1;transform:none;transition-delay:1.1s}
.scene.on .bub.late{transition-delay:2.6s}
.scene .fx-glow path{--dur:1.1s}
.wave.sm line{animation-duration:.8s}
.call{stroke:#9FE8B8!important;opacity:.9!important}
.callt{fill:#9FE8B8!important;letter-spacing:.06em}
.ring{fill:none;stroke:#9FE8B8;stroke-width:1.4;transform-box:fill-box;transform-origin:center;opacity:0;
  animation:wr 2.4s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:calc(var(--k) * .35s)}
@media (prefers-reduced-motion:reduce){.scene .bub{opacity:1;transform:none}.ring{animation:none;opacity:.4}}

/* phones: the talk scene keeps a readable size and scrolls sideways */
@media (max-width:719px){
  .talk-art{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px}
  .talk-art .fx{width:640px;max-width:none}
}

/* curve: today's bell draws over last year's; on the way down it calls "send 1 home", again and again */
#curve .art .today{stroke-dasharray:1;stroke-dashoffset:1;transition:none}
#curve .art.in .today{animation:bell-draw 8s linear .1s infinite}
@keyframes bell-draw{0%{stroke-dashoffset:1}35%,92%{stroke-dashoffset:0;opacity:1}98%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.sh circle{fill:var(--rose)}
.sh line{stroke:var(--rose);stroke-width:1.2}
.sh text{fill:var(--rose);font:700 9px var(--body);letter-spacing:.08em}
.sh,.sh-head{opacity:0}
#curve .art.in .sh:nth-of-type(1){animation:sh0 8s linear .1s infinite}
#curve .art.in .sh:nth-of-type(2){animation:sh1 8s linear .1s infinite}
#curve .art.in .sh:nth-of-type(3){animation:sh2 8s linear .1s infinite}
#curve .art.in .sh-head{animation:sh3 8s linear .1s infinite}
@keyframes sh0{0%,20.8%{opacity:0}22.8%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes sh1{0%,25.2%{opacity:0}27.2%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes sh2{0%,28.9%{opacity:0}30.9%,92%{opacity:1}98%,100%{opacity:0}}
@keyframes sh3{0%,20.8%{opacity:0}22.8%,92%{opacity:1}98%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){#curve .art .today{stroke-dashoffset:0}.sh,.sh-head{opacity:1}}

/* price tracker rows: provider tips and the real cost since each change */
#prices .fx-txt.cream{font-size:14px}
#prices .fx-txt.strong{font-size:14px;font-weight:700}
#prices .tip{font-size:11px;letter-spacing:.02em}
#prices .tip.alt{fill:var(--amber)}
#prices .tip.best{fill:#7BD88F}
#prices .tip.credit{fill:var(--rose)}
#prices .fx-glow path{--dur:3s}
.proof.under{margin:28px 0 0 24px;max-width:none}

/* item drill-down: the price line, and the invoice behind each dot */
.item-demo{margin-top:72px}
.id-title{font-size:clamp(24px,4vw,32px);margin-bottom:24px}
.id-grid{display:grid;gap:20px;align-items:start}
.id-card{background:var(--night);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.id-head b{display:block;font:600 20px/1.2 var(--display)}
.id-head span{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.id-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 12px}
.id-tiles div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;text-align:center}
.id-tiles small{display:block;font-size:11px;letter-spacing:.14em;color:var(--muted)}
.id-tiles b{display:block;margin-top:4px;font:600 18px/1 var(--body)}
.id-tiles b.hot{color:var(--rose)}
.id-chart{width:100%;height:auto;display:block;overflow:visible}
.id-line{stroke-width:2!important;opacity:.7!important}
.id-dot{fill:var(--night);stroke:var(--ember);stroke-width:2;cursor:pointer;transition:r .2s,fill .2s}
.id-dot:hover,.id-dot:focus-visible,.id-dot.on{fill:var(--amber);r:8;outline:none}
.id-dot.on{filter:drop-shadow(0 0 8px rgba(242,176,122,.9))}
.id-hint{margin-top:10px;font-size:13px;color:var(--muted)}
.id-inv{background:#FBF5EE;color:#1A1417;border-radius:14px;padding:20px;font-size:13px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06)}
.id-inv.flash{animation:invflash .45s ease}
@keyframes invflash{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}
.inv-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #1A1417;padding-bottom:8px}
.inv-top b{font:700 18px var(--display)}
.inv-top span{font-weight:700;letter-spacing:.06em}
.inv-meta{display:flex;justify-content:space-between;margin:10px 0 12px;color:#5A4A44}
.inv-lines{width:100%;border-collapse:collapse}
.inv-lines th{text-align:left;font-size:11px;letter-spacing:.08em;color:#7A6A62;border-bottom:1px solid #D8C7BB;padding:6px 4px}
.inv-lines td{padding:7px 4px;border-bottom:1px solid #EFE3D8}
.inv-lines th:not(:first-child),.inv-lines td:not(:first-child){text-align:right}
.inv-lines tr.hot td{background:rgba(232,149,90,.18);font-weight:700}
.inv-sum{display:flex;justify-content:space-between;margin-top:12px;font-size:15px}
.inv-note{margin-top:12px;padding:8px 10px;border-radius:8px;background:#F1E7DD;color:#5A4A44;font-weight:600}
.inv-note.up{background:rgba(166,9,61,.1);color:#A6093D}
.inv-note.down{background:rgba(30,122,70,.1);color:#1E7A46}
@media (min-width:960px){.id-grid{grid-template-columns:1.25fr .9fr}}
@media (prefers-reduced-motion:reduce){.id-inv.flash{animation:none}}

@media (max-width:719px){.id-dot{r:9;stroke-width:3}.id-dot.on{r:12}}

.alert-list li{display:flex}
.al{width:100%}
@media (min-width:960px){.alert-list li{min-width:0}}

/* talk v4: the message lives on the watch face, like the real app */
.talk-art .idle{fill:#0A0708;stroke:none}
.talk-art .idle-t{font:600 16px var(--body)!important;fill:var(--soft)!important}
.talk-art .idle-w{font-size:8px!important;letter-spacing:.14em;fill:var(--muted)!important}
.fc-top{font:700 8.5px var(--body);letter-spacing:.14em;fill:rgba(255,255,255,.75)}
.fc-msg{font:700 13px var(--body);fill:#fff}
.fc-pill{fill:rgba(255,255,255,.92)}
.fc-ptxt{font:700 9px var(--body);fill:#33518C}
.call-f .fc-ptxt{fill:#1E6B3A}
.own-call .fc-msg{font-size:11px;fill:#9FE8B8}
.own-call .fc-pill,.own-call .fc-ptxt{display:none}
.scene .fc{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.9);transition:opacity .45s ease,transform .45s cubic-bezier(.3,1.5,.5,1)}
.scene.on .fc.first{opacity:1;transform:none;transition-delay:.1s}
.scene.on .fc.arrive{opacity:1;transform:none;transition-delay:1.2s}
.scene.on .fc.own-call{opacity:1;transform:none;transition-delay:.2s}
.scene.on .fc.late{opacity:1;transform:none;transition-delay:3s}
.scene.on .fc.first{animation:fc-out 6s linear both}
@keyframes fc-out{0%,48%{opacity:1}52%,100%{opacity:0}}
@media (max-width:719px){.talk-art .fx{width:720px!important}}
@media (prefers-reduced-motion:reduce){.scene .fc{opacity:1;transform:none}.scene .fc.first{display:none}}

.id-chart .fx-glow path{--dur:9s}

/* the doors open onto the name, big */
.dr-logo{width:min(84vw,760px);height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(232,149,90,.35))}
.dr-tag{margin-top:18px;font:600 clamp(20px,3vw,30px)/1.2 var(--display);color:#fff;text-shadow:0 6px 30px rgba(0,0,0,.85)}
.dr-stats{display:grid;gap:10px;margin-top:22px;width:min(92vw,860px)}
.dr-stats div{padding:14px 16px;border-radius:14px;background:rgba(15,11,13,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(232,149,90,.35);text-align:left}
.dr-stats b{display:block;font:600 clamp(28px,4vw,40px)/1 var(--display)}
.dr-stats span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--soft)}
.dr-note{margin-top:12px;font-size:12px;color:rgba(255,246,238,.6)}
@media (min-width:720px){.dr-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:719px){.dr-logo{width:min(80vw,420px)}.dr-stats div{padding:10px 12px}.dr-stats span{font-size:13px}}
.cn{font:600 9px var(--body);fill:rgba(255,255,255,.32);transition:fill .3s}
.cn.speaking{fill:#fff;font-weight:800}
.cap{font:700 11px var(--body);fill:#E8FBEF}

/* "Start today" booking dialog */
.start-dlg{width:min(860px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid rgba(232,149,90,.35);border-radius:20px;
  background:var(--surface);color:var(--cream);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(166,9,61,.6)}
.start-dlg::backdrop{background:rgba(8,5,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.start-dlg[open]{animation:sd-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes sd-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.start-form{position:relative;padding:28px 22px 24px;overflow:auto;max-height:calc(100dvh - 26px)}
.start-form h2{font-size:clamp(26px,5vw,38px)}
.sd-sub{color:var(--soft);margin-top:8px}
.sd-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--night);color:var(--cream);font-size:24px;cursor:pointer}
.sd-grid{display:grid;gap:22px;margin-top:22px}
.sd-step{font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin:14px 0 10px}
.sd-step small{text-transform:none;letter-spacing:0;color:var(--muted)}
.sd-days,.sd-times{display:flex;flex-wrap:wrap;gap:8px}
.sd-chip{min-width:64px;min-height:48px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--night);color:var(--cream);cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center}
.sd-chip b{font:600 14px var(--body)}
.sd-chip span{font-size:12px;color:var(--muted)}
.sd-chip[aria-checked="true"]{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset,0 0 22px -8px var(--amber);background:rgba(217,164,65,.12)}
.sd-fields label{display:block;font-size:14px;color:var(--soft);margin-bottom:12px}
.sd-fields input,.sd-fields select{display:block;width:100%;min-height:48px;margin-top:6px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--night);color:var(--cream);font:16px var(--body)}
.sd-fields input:focus,.sd-fields select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,164,65,.2)}
.sd-err{min-height:22px;margin-top:6px;color:var(--rose);font-size:14px}
.sd-go{width:100%;margin-top:6px}
.sd-done{text-align:center;padding:10px 0}
.sd-done h3{font-size:26px}
.sd-done p{color:var(--soft);margin:8px 0 16px}
@media (min-width:760px){.sd-grid{grid-template-columns:1.1fr 1fr;gap:32px}.start-form{padding:36px 36px 30px}}
@media (prefers-reduced-motion:reduce){.start-dlg[open]{animation:none}}
.btn-row.center{justify-content:center}
.dr-cta{justify-content:center;margin-top:18px}
.giftcard{max-width:380px;margin:28px 0 0}
.gc-amt{font:600 52px var(--display);fill:url(#beatGrad)}
.js .giftcard{transform:translateY(18px) rotate(-4deg) scale(.96)}
.js .giftcard.in{transform:rotate(-2deg);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
.nag{margin-top:30px;font-size:clamp(24px,3.6vw,32px);color:var(--rose)}
.nag-sub{margin-top:10px;color:var(--soft);max-width:40ch}

/* daily report: the nightly email, like the real one */
.mail{width:100%;max-width:560px;margin:0 auto;border-radius:18px;overflow:hidden;background:#FBF5EE;color:#1A1417;
  box-shadow:0 40px 90px -36px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.06),0 0 60px -24px rgba(232,149,90,.5)}
.mail-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:14px 18px;background:#F1E7DD;border-bottom:1px solid #E2D3C6;font-size:14px}
.mail-dot{width:28px;height:28px;border-radius:50%;background:var(--grad)}
.mail-time{color:#7A6A62;font-size:13px}
.mail-subj{grid-column:1/-1;font:600 17px var(--display)}
.mail-body{padding:16px 18px 20px}
.rp-cap{text-align:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7A6A62}
.rp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.rp-t{border:1px solid #E2D3C6;border-top:3px solid var(--c);border-radius:10px;padding:10px 8px;text-align:center;background:#fff}
.rp-t small{display:block;font-size:9px;letter-spacing:.12em;color:#7A6A62}
.rp-t b{display:block;margin:4px 0 2px;font:700 18px var(--body);color:var(--c)}
.rp-t span{display:block;font-size:10.5px;color:#5A4A44}
.rp-t em{display:block;margin-top:6px;font-style:normal;font-size:10px;color:#7A6A62}
.rp-t i{font-style:normal;font-weight:800;color:#1E7A46;margin-left:4px}
.rp-t i.bad{color:#C0392B}
.rp-comb{margin:12px 0 4px;padding:10px;border-top:1px solid #E2D3C6;text-align:center}
.rp-comb small{font-size:10px;letter-spacing:.14em;color:#7A6A62;margin-right:8px}
.rp-comb b{font:800 20px var(--body)}
.rp-comb span{display:block;font-size:11px;color:#5A4A44}
.rp-h{margin-top:12px;font:600 15px var(--display)}
.rp-tl{margin-top:8px}
.rp-hrs{display:flex;justify-content:space-between;margin-left:56px;margin-right:38px;font-size:10px;color:#7A6A62}
.rp-row{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:4px;height:22px;border-bottom:1px solid #EFE3D8}
.rp-row b{font-size:12px}
.rp-row span{font-size:11px;text-align:right;color:#5A4A44}
.rp-row i{position:relative;display:block;height:10px;margin-left:var(--s);width:var(--w);border-radius:3px;background:#F2C7C0;border:1px solid #C0392B;
  transform-origin:left;transform:scaleX(1)}
.rp-row i.late{background:repeating-linear-gradient(135deg,#F2C7C0 0 4px,#fff 4px 7px)}
.rp-row i.brk::after{content:"";position:absolute;left:52%;width:9%;top:0;bottom:0;background:repeating-linear-gradient(135deg,#bbb 0 3px,#fff 3px 6px)}
.rp-row i.ot{background:#F7D9A8;border-color:#D9822B}
.js .mail .rp-row i{transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .mail.in .rp-row i{transform:scaleX(1)}
.js .mail.in .rp-row:nth-child(3) i{transition-delay:.12s}.js .mail.in .rp-row:nth-child(4) i{transition-delay:.24s}
.js .mail.in .rp-row:nth-child(5) i{transition-delay:.36s}.js .mail.in .rp-row:nth-child(6) i{transition-delay:.48s}
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rp-chips span{font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;border:1px solid}
.rp-chips .bad{color:#A6093D;border-color:#E9A9B8;background:#FBE9EE}
.rp-chips .warn{color:#8A5E1E;border-color:#E9CFA0;background:#FBF1DE}
.rp-chips .ok{color:#1E7A46;border-color:#A9D9B9;background:#E8F6EC}
@media (max-width:480px){.rp-t b{font-size:15px}.rp-t span{font-size:9.5px}}
@media (prefers-reduced-motion:reduce){.js .mail .rp-row i{transform:none;transition:none}}

/* voice receptionist: a call that answers itself, then the after-hours log */
.call-art{width:100%;max-width:480px;margin:0 auto}
.call-phone{width:100%;max-width:260px;height:auto;display:block;margin:0 auto}
.ring-w{animation:ringw 1.4s ease-in-out infinite}
@keyframes ringw{0%,100%{opacity:.25}50%{opacity:.9}}
.cv{display:grid;gap:10px;margin-top:18px}
.cv-l{max-width:86%;padding:12px 14px;border-radius:16px;font-size:15px;line-height:1.4}
.cv-l small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;opacity:.75}
.cv-l.ai{background:linear-gradient(180deg,#182A4A,#33518C);color:#fff;border-radius:16px 16px 16px 4px}
.cv-l.you{justify-self:end;background:var(--night);border:1px solid var(--line);color:var(--cream);border-radius:16px 16px 4px 16px}
.after{margin-top:18px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--night)}
.after-h{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-bottom:6px}
.after-r{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.after-r:first-of-type{border-top:0}
.after-r b{color:var(--amber)}
.after-r span{color:var(--soft)}
.js .call-art .cv-l,.js .call-art .after-r{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.js .call-art.in .cv-l,.js .call-art.in .after-r{opacity:1;transform:none;transition-delay:calc(var(--d) * .9s + .8s)}
@media (prefers-reduced-motion:reduce){.ring-w{animation:none}.js .call-art .cv-l,.js .call-art .after-r{opacity:1;transform:none}}

/* phone icon text sized to fit */
.call-phone .fx-txt{font-size:8px}
.call-phone .fx-txt.cream{font-size:10px}

/* day timelapse: four synced cameras sped up, one clock */
.lapse-tabs{display:flex;gap:10px;margin-top:26px;overflow-x:auto;padding-bottom:4px}
.lapse{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;padding:12px;border-radius:20px;background:#070506;border:1px solid var(--line)}
.cam{position:relative;border-radius:12px;overflow:hidden;background:radial-gradient(80% 90% at 50% 70%,#1A1214,#0B0809);border:1px solid #241A1D}
.cam svg{display:block;width:100%;height:auto}
.cam::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);animation:flick .18s steps(2) infinite}
@keyframes flick{50%{opacity:.6}}
.cam-l{position:absolute;left:10px;top:8px;font:700 9px var(--body);letter-spacing:.12em;color:var(--soft);background:rgba(0,0,0,.45);padding:3px 6px;border-radius:4px}
.mover circle{fill:none;stroke:var(--amber);stroke-width:1.6}
.mover path{stroke:var(--amber);stroke-width:1.6;fill:none}
.mover{animation:hop 1.6s steps(6) infinite}
.m1{animation-duration:1.3s}.m2{animation-duration:1.9s;animation-direction:reverse}
.m3,.m4,.m5{animation-name:queue;animation-duration:2.4s}.m4{animation-delay:-.8s}.m5{animation-delay:-1.6s}
.m6{animation-duration:1.1s}.m7,.m8,.m9{animation-name:sit;animation-duration:3s}.m8{animation-delay:-1s}.m9{animation-delay:-2s}
.m10{animation-name:walk;animation-duration:2s}
@keyframes hop{0%,100%{transform:translateX(0)}33%{transform:translateX(14px)}66%{transform:translateX(-8px)}}
@keyframes queue{0%{transform:translateX(0);opacity:1}80%{transform:translateX(60px);opacity:1}100%{transform:translateX(70px);opacity:0}}
@keyframes sit{0%,40%{opacity:1}50%,90%{opacity:0}100%{opacity:1}}
@keyframes walk{0%,100%{transform:translateX(-50px)}50%{transform:translateX(50px)}}
.flow .trail{fill:none;stroke:var(--ember);stroke-width:1.2;stroke-dasharray:3 4;opacity:.45}
.flow .dot{fill:var(--amber);filter:drop-shadow(0 0 4px rgba(242,176,122,.9))}
.lapse-bar{grid-column:1/-1;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:6px 6px 2px}
.rec{width:10px;height:10px;border-radius:50%;background:#E05555;box-shadow:0 0 10px #E05555;animation:blink 1s steps(2) infinite}
.lapse-clock{font:700 18px var(--body);font-variant-numeric:tabular-nums;color:var(--cream);min-width:86px}
.scrub{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.scrub i{display:block;height:100%;width:0;background:var(--grad)}
.speed{font-size:12px;color:var(--muted)}
@media (max-width:719px){.lapse{padding:8px;gap:6px}.lapse-bar{grid-template-columns:auto auto 1fr}.speed{grid-column:1/-1}.cam-l{font-size:7.5px}}
@media (prefers-reduced-motion:reduce){.mover,.cam::after,.rec{animation:none}}

@media (min-width:960px){.alert-list{grid-template-columns:repeat(2,1fr)}}

@media (min-width:960px){.lapse{grid-template-columns:repeat(4,1fr)}}
.flow .fx-txt{font-size:8px}

/* daily order tablet */
.tablet{width:100%;max-width:540px;margin:0 auto;padding:16px;border-radius:26px;background:#0A0708;border:10px solid #221A1E;
  box-shadow:0 0 0 1px #3A2E32,0 40px 90px -36px rgba(0,0,0,.9),0 0 60px -26px rgba(232,149,90,.5)}
.tb-top{display:flex;justify-content:space-between;align-items:baseline;padding:4px 4px 10px;border-bottom:1px solid var(--line)}
.tb-top b{font:600 18px var(--display)}
.tb-top span{font-size:13px;color:var(--muted)}
.tb-cat{margin:12px 4px 6px;font:700 11px var(--body);letter-spacing:.14em;color:var(--ember)}
.tb-row{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #1F171A}
.tb-name b{display:block;font-size:15px}
.tb-price{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;background:rgba(232,149,90,.14);color:#F2C9A6;font-size:12px;font-weight:600}
.tb-ch{margin-left:6px;font-size:11px;font-weight:700}
.tb-ch.up{color:var(--rose)}
.tb-ch.down{color:#7BD88F}
.tb-sup{font-size:11px;font-weight:600;padding:4px 8px;border-radius:999px;border:1px solid var(--amber);color:var(--amber);white-space:nowrap}
.tb-step{display:flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:999px;padding:3px}
.tb-step button{width:34px;height:34px;border-radius:50%;border:0;background:#2E2428;color:var(--cream);font:700 18px/1 var(--body);cursor:pointer}
.tb-step button:last-child{background:var(--wine)}
.tb-step output{min-width:18px;text-align:center;font-weight:700}
.tb-unit{font-size:12px;color:var(--muted);min-width:40px}
.tb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.tb-sum{font-size:14px;color:var(--soft)}
.tb-send{min-height:44px}
.tb-sent{display:grid;gap:6px;margin-top:10px}
.tb-sent p{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(123,216,143,.08);border:1px solid rgba(123,216,143,.35);font-size:13px;
  opacity:0;transform:translateX(-10px)}
.tb-sent p b{color:#7BD88F}
.tb-sent p span{color:var(--soft)}
.tb-sent.go p{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--k) * .5s + .2s)}
@media (max-width:560px){.tb-row{grid-template-columns:1fr auto;row-gap:6px}.tb-sup{justify-self:start}.tb-unit{text-align:right}}

/* dispute a charge from the invoice */
.inv-dispute{margin-top:10px;min-height:40px;font-size:14px;width:100%}
.inv-done{margin-top:8px;font-size:13px;font-weight:600;color:#1E7A46}
.inv-done:empty{display:none}

/* training */
.tr-tabs{display:flex;gap:10px;margin-top:26px;overflow-x:auto;padding-bottom:4px}
.tr-tabs .tt[aria-selected="true"]{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset,0 0 28px -10px var(--ember)}
.tr-pane{display:none;margin-top:20px}
.tr-pane.on{display:block;animation:sd-in .35s ease}
.chap,.lvl{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);margin-bottom:10px}
.chap{border-left:3px solid var(--wine)}
.chap-n,.lvl-n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 20px var(--display);border:1px solid var(--line)}
.chap small{font-size:11px;letter-spacing:.14em;color:var(--ember)}
.chap b,.lvl b{display:block;font:600 22px/1.2 var(--display)}
.lvl b{font-size:18px}
.chap span,.lvl span{display:block;color:var(--soft);font-size:14px;margin-top:2px}
.chap em{font-style:normal;font-size:13px;padding:4px 10px;border-radius:999px;border:1px solid var(--line)}
.lvl i{display:block;font-style:normal;margin-top:6px;color:var(--amber);font-size:13px;letter-spacing:.1em}
.lvl u{text-decoration:none;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;margin-left:8px;color:var(--ember)}
.lvl u.play{background:var(--wine);color:#fff;padding:3px 8px;border-radius:999px}
.lvl svg{width:150px;height:76px;border-radius:10px;background:var(--night)}
.lvl.done .lvl-n{color:var(--amber);border-color:var(--amber)}
.lvl.next{border-color:var(--wine);box-shadow:0 0 0 1px var(--wine) inset,0 0 30px -14px var(--wine)}
@media (max-width:560px){.chap,.lvl{grid-template-columns:44px 1fr}.lvl svg,.chap em{display:none}}

.quiz{max-width:640px}
.qz-top{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--soft)}
.qz-bar{height:5px;border-radius:3px;background:var(--line);margin:10px 0 16px;overflow:hidden}
.qz-bar i{display:block;height:100%;background:var(--grad);transition:width .4s}
.qz-card{padding:20px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.qz-q{font:600 18px/1.45 var(--body)}
.qz-ask{margin-top:10px;color:var(--rose);font-weight:700;font-size:14px}
.qz-opts{display:grid;gap:10px;margin-top:12px}
.qz-o{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:start;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--night);color:var(--cream);font:inherit;cursor:pointer;min-height:56px;transition:opacity .3s,border-color .3s}
.qz-l{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);font-weight:800}
.qz-o b{display:block;font-weight:600}
.qz-o small{display:block;margin-top:4px;color:var(--soft);font-size:13px}
.qz-o small em{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;margin-bottom:2px}
.qz-o.bad{border-color:var(--rose);background:rgba(224,121,142,.08)}
.qz-o.bad .qz-l{background:var(--rose);color:var(--night)}
.qz-o.bad em{color:var(--rose)}
.qz-o.good{border-color:#7BD88F;background:rgba(123,216,143,.08)}
.qz-o.good .qz-l{background:#7BD88F;color:var(--night)}
.qz-o.good em{color:#7BD88F}
.qz-o.dim{opacity:.4}

.fl-cat{color:var(--soft)}
.fl-cat b{font:600 20px var(--display);color:var(--cream)}
.fl-row{display:flex;gap:10px;overflow-x:auto;padding:12px 0}
.fl-chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;width:108px;padding:10px 6px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--cream);font:inherit;font-size:12px;cursor:pointer}
.fl-chip svg{width:44px;height:44px}
.fl-chip circle{fill:none;stroke:var(--soft);stroke-width:1.4;opacity:.6}
.fl-chip.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset}
.fl-chip.on circle{stroke:var(--amber);opacity:1}
.fl-card{max-width:420px;height:220px;perspective:1000px;cursor:pointer;margin-top:6px}
.fl-in{position:relative;height:100%;transition:transform .6s;transform-style:preserve-3d}
.fl-card.flip .fl-in{transform:rotateY(180deg)}
.fl-f,.fl-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:18px;padding:22px;border:1px solid rgba(232,149,90,.4);background:var(--surface)}
.fl-f{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(70% 80% at 50% 40%,rgba(166,9,61,.25),var(--surface))}
.fl-f b{font:600 30px var(--display)}
.fl-f span{margin-top:10px;font-size:13px;color:var(--muted)}
.fl-b{transform:rotateY(180deg)}
.fl-b b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.fl-b p{margin:4px 0 14px;color:var(--cream)}

.crs{display:grid;gap:14px}
.crs-list{padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.crs-h{display:flex;justify-content:space-between;font-weight:700}
.crs-h span{color:var(--muted);font-size:13px}
.crs-list ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--soft)}
.crs-list li.ok::after{content:" ✓";color:#7BD88F}
.crs-list li.on{color:var(--cream);font-weight:700}
.crs-main{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.crs-title{font:600 22px var(--display)}
.crs-video{position:relative;margin-top:12px;border-radius:12px;overflow:hidden}
.crs-video svg{display:block;width:100%;height:auto}
.crs-step{position:absolute;left:10px;top:10px;display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:rgba(15,11,13,.82);max-width:80%}
.cs-n{padding:4px 7px;border-radius:6px;background:#33518C;color:#fff;font-size:12px}
.cs-en{display:block;font-size:14px}
.cs-es{display:block;font-size:12px;color:var(--amber)}
.crs-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.1)}
.crs-prog i{display:block;height:100%;background:var(--grad);transition:width .4s}
.crs-desc{margin-top:12px;color:var(--soft)}
@media (min-width:860px){.crs{grid-template-columns:260px 1fr}}

.chap > .chap-n,.lvl > .lvl-n{display:grid;margin:0;color:var(--cream)}
.lvl.done > .lvl-n{color:var(--amber)}

/* phone pass: everything below only applies under 720px, desktop is untouched */
.art svg.tick-m{display:none}
@media (max-width:719px){
  section{padding:56px 0}
  .art svg.tick-d{display:none}
  .art svg.tick-m{display:block}
  #prices .tick-m .fx-txt{font-size:11.5px}
  #prices .tick-m .fx-txt.cream{font-size:15px}
  #prices .tick-m .fx-txt.strong{font-size:15px}
  .proof.under{margin:22px 0 0}
  /* scroll rows say they scroll: the last card fades out at the edge */
  .alert-list,.talk-tabs,.tr-tabs,.fl-row,.lapse-tabs{margin-right:-16px;padding-right:16px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .alert-list::-webkit-scrollbar,.talk-tabs::-webkit-scrollbar,.tr-tabs::-webkit-scrollbar,.fl-row::-webkit-scrollbar{display:none}
  .al{min-width:62vw}
  /* the talk scene: a smaller stage the camera pans across */
  .talk-art{scrollbar-width:none}
  .talk-art::-webkit-scrollbar{display:none}
  .talk-art .fx{width:600px!important}
  .talk-art .fx-txt.mid{font-size:15px}
  #curve .sh-head{font-size:9.5px;letter-spacing:.02em}
  /* nightly email: one restaurant per row, readable numbers */
  .rp-tiles{grid-template-columns:1fr;gap:6px}
  .rp-t{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline;text-align:left;padding:10px 12px;border-top-width:1px;border-left:4px solid var(--c)}
  .rp-t small{grid-column:1;font-size:10px}
  .rp-t b{grid-column:2;grid-row:1/3;margin:0;font-size:20px;align-self:center}
  .rp-t span{grid-column:1;font-size:12px}
  .rp-t em{grid-column:1/-1;font-size:11.5px;margin-top:4px}
  /* order tablet: compact steppers, supplier names on one line */
  .tb-step{justify-self:start}
  .tb-sent p b{white-space:nowrap}
  .tablet{border-width:7px;padding:12px}
}
.id-bars{display:none}
@media (max-width:719px){
  .id-dots{display:none}
  .id-bars{display:inline}
  .id-bar{fill:rgba(232,149,90,.16);stroke:rgba(232,149,90,.45);stroke-width:1;cursor:pointer;transition:fill .25s}
  .id-bar.on{fill:var(--amber);stroke:var(--amber);filter:drop-shadow(0 0 8px rgba(242,176,122,.8))}
  .id-hint{font-size:13px}
}
.m-only{display:none}
@media (max-width:719px){.m-only{display:inline}.d-only{display:none}}

/* order tablet: one send per supplier, one after the other */
.tb-row{transition:background .3s,box-shadow .3s}
.tb-row.sending{background:linear-gradient(90deg,color-mix(in srgb,var(--sc) 18%,transparent),transparent 70%);box-shadow:inset 3px 0 0 var(--sc)}
.tb-row.sent{opacity:.55}
.tb-send:disabled{cursor:default;opacity:.9}
.tb-sent{gap:10px;margin-top:14px}
.ts-card{--sc:var(--amber);position:relative;overflow:hidden;padding:12px 14px;border-radius:14px;background:#120D0F;border:1px solid #2A2024;
  opacity:.25;transform:translateY(8px) scale(.98);transition:opacity .45s,transform .45s,border-color .45s,box-shadow .45s}
.ts-card.on{opacity:1;transform:none;border-color:var(--sc);box-shadow:0 0 0 1px var(--sc) inset,0 0 34px -12px var(--sc)}
.ts-card.on::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,color-mix(in srgb,var(--sc) 22%,transparent) 50%,transparent 70%);
  transform:translateX(-100%);animation:ts-sweep 1.2s ease-out .1s}
.ts-card.done::after{display:none}
@keyframes ts-sweep{to{transform:translateX(100%)}}
.ts-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.ts-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;color:var(--sc);border:1px solid var(--sc)}
.ts-card.call.on:not(.done) .ts-ic{animation:ts-ring .5s ease-in-out infinite alternate}
@keyframes ts-ring{from{transform:rotate(-14deg);box-shadow:0 0 0 0 var(--sc)}to{transform:rotate(14deg);box-shadow:0 0 0 6px transparent}}
.ts-head b{display:block;color:var(--sc);font-size:15px}
.ts-head small{display:block;color:var(--muted);font-size:12px;margin-top:2px;overflow-wrap:anywhere}
.ts-head em{font-style:normal;font-size:12px;font-weight:700;color:var(--soft);white-space:nowrap}
.ts-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ts-items li{font-size:12px;padding:3px 8px;border-radius:999px;background:#1E1619;color:var(--soft)}
.ts-items li b{color:var(--cream)}
.ts-status{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px;font-size:13px;font-weight:600}
.ts-bar{display:block;height:4px;border-radius:2px;background:#2A2024;overflow:hidden}
.ts-bar i{display:block;height:100%;width:0;background:var(--sc);box-shadow:0 0 10px var(--sc)}
.ts-card.on .ts-bar i{width:100%;transition:width 1.4s cubic-bezier(.3,.1,.3,1)}
.ts-card.call.on .ts-bar i{transition-duration:1.9s}
.ts-s1{color:var(--soft)}
.ts-s2{display:none;color:var(--sc)}
.ts-card:not(.on) .ts-s1{opacity:.6}
.ts-card:not(.on) .ts-s1{font-size:0}
.ts-card:not(.on) .ts-s1::before{content:"Queued, next in line";font-size:13px}
.ts-card.done .ts-s1{display:none}
.ts-card.done .ts-s2{display:block;animation:sd-in .35s ease}
@media (prefers-reduced-motion:reduce){.ts-card.on::after,.ts-ic{animation:none!important}}