/* Fully Booked Co. — shared styles */

:root{
  --ivory:#F7F3EC; --ivory-2:#FCFAF5;
  --slate:#3E4E66; --dark:#2C384D; --indigo:#332F63;
  --ink:#1E2431; --muted:#434C5C;   /* Round 4 §0: darkened from #6A7183 — 4.5:1+ against every point of the gradient */
  --line:rgba(30,36,49,.12);
  --card:#fff;
  --wrap:clamp(1080px,58vw,1320px);   /* grows a little on very wide screens so the page reads as designed, not merely centred */
  --r:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
/* html gets its own background so body's gradient does NOT propagate to the
   canvas - propagated backgrounds size to the viewport, not the document. */
html{scroll-behavior:smooth;scroll-padding-top:96px;background:var(--ivory)}
[id]{scroll-margin-top:96px}

body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:var(--ivory);
  /* ivory at top -> blue at bottom */
  /* full-page gradient: ivory at the top, slate down at the footer.
     NOT background-attachment:fixed - that maps the gradient to the viewport
     and every screenful ends up going ivory -> blue. */
  background-image:linear-gradient(180deg,
    var(--ivory) 0%,
    var(--ivory) 55%,
    #EDEBEE 72%,
    #CFD5E0 88%,
    #B9C1D0 100%);   /* bottom band lightened so --muted still passes 4.5:1 on it */
  background-repeat:no-repeat;
  min-height:100vh;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:72px 0}

/* ---------- type ---------- */
h1{font-size:clamp(34px,4.6vw,74px);font-weight:800;letter-spacing:-.035em;line-height:1.04}
h2{font-size:clamp(27px,3vw,50px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
h3{font-size:19px;font-weight:700;letter-spacing:-.015em}
p{font-size:clamp(17px,1.05vw,19px)}
.lede{font-size:clamp(17px,1.25vw,22px);color:var(--muted);margin-top:16px;max-width:56ch}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);background:rgba(62,78,102,.10);
  padding:6px 13px;border-radius:100px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,243,236,.82);
  backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:72px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:17px;letter-spacing:-.02em;margin-right:auto}
.brand img{width:34px;height:34px;display:block}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:500}
.navlinks a:hover{color:var(--ink)}
.navtoggle{display:none;background:none;border:0;font:inherit;cursor:pointer;padding:8px}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--slate);color:#fff;text-decoration:none;
  font-size:15.5px;font-weight:650;border:1px solid var(--slate);
  border-radius:100px;padding:13px 26px;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px);background:var(--dark);
  box-shadow:0 14px 30px -14px rgba(44,56,77,.65)}
.btn-ghost{background:transparent;color:var(--slate)}
.btn-ghost:hover{background:rgba(62,78,102,.07);color:var(--dark)}
.btn-light{background:var(--ivory);color:var(--dark);border-color:var(--ivory)}
.btn-light:hover{background:#fff;border-color:#fff}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:20px;margin-top:44px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:28px 24px;box-shadow:0 22px 50px -38px rgba(33,63,120,.5)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:16px}
.k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--slate);margin-bottom:12px}

/* offer cards */
.offer{display:flex;flex-direction:column}
.offer .hook{font-size:17px;font-weight:650;color:var(--ink);margin-bottom:10px}
.offer .price{margin-top:auto;padding-top:20px;font-size:15px;font-weight:700;color:var(--slate)}
.offer .price span{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px}
.offer .note{font-size:14.5px;color:var(--muted);margin-top:12px;font-style:italic}

/* numbered steps */
.steps{counter-reset:s}
.step{position:relative;padding-left:56px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;
  width:38px;height:38px;border-radius:50%;background:var(--slate);color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700}

/* ---------- footer ---------- */
footer{background:var(--dark);color:var(--ivory);padding:56px 0 40px}
footer .top{display:flex;flex-wrap:wrap;gap:24px;align-items:center;
  justify-content:space-between;padding-bottom:26px;border-bottom:1px solid rgba(247,243,236,.16)}
footer .brand{color:var(--ivory);margin-right:0}
footer nav{display:flex;flex-wrap:wrap;gap:22px}
footer a{color:rgba(247,243,236,.72);text-decoration:none;font-size:14.5px}
footer a:hover{color:var(--ivory)}
footer .note{margin-top:24px;font-size:13.5px;color:rgba(247,243,236,.7)}

/* ---------- legal pages ---------- */
.legal{background:var(--ivory);max-width:760px;margin:0 auto;
  border-radius:var(--r);padding:48px 44px;border:1px solid var(--line)}
.legal h2{font-size:23px;margin:38px 0 12px}
.legal h2:first-of-type{margin-top:26px}
.legal p,.legal li{font-size:16px;color:var(--ink);margin-bottom:12px}
.legal ul{padding-left:22px}
.legal .updated{font-size:14px;color:var(--muted)}
.todo{background:#FFF4D6;border:1px solid #E4C77A;border-radius:10px;
  padding:12px 14px;font-size:14.5px;color:#6B5312;margin:14px 0}

/* ---------- reveal: the site-wide default (Round 3 §12) ----------
   motion.js adds .rv to every revealable and .is-in when it enters view.
   Values are the live 1.0 site's, verbatim: 30px rise, .9s, (.2,.7,.2,1).
   Without JS (or with reduced motion) everything is simply visible. */
html.js:not(.reduce) .rv{opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js:not(.reduce) .rv.is-in{opacity:1;transform:none}

/* ---------- FAQ (restored from the live 1.0 site, expanded) ---------- */
.faq{max-width:800px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;font-size:19px;font-weight:600;display:flex;justify-content:space-between;gap:20px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--muted);font-size:22px;line-height:1;flex:0 0 auto}
.faq details[open] summary::after{content:'\2013'}
.faq p{color:var(--muted);font-size:15.5px;margin-top:14px;max-width:680px;line-height:1.55}

/* ---------- responsive ---------- */
@media (max-width:860px){
  section{padding:64px 0}
  .g3,.g2{grid-template-columns:1fr}
  .navlinks{display:none;position:absolute;top:72px;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--ivory);border-bottom:1px solid var(--line);
    padding:8px 24px 18px}
  .navlinks.open{display:flex}
  .navlinks a{padding:11px 0;font-size:16px;width:100%}
  .navtoggle{display:block}
  .legal{padding:34px 22px}
}


/* ---------- audit: form ---------- */
.formcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:30px 26px;max-width:620px;margin:64px auto 0;
  box-shadow:0 24px 60px -34px rgba(33,63,120,.5)}
.formcard label{display:block;font-size:13.5px;font-weight:600;margin:18px 0 6px}
.formcard label:first-of-type{margin-top:0}
.opt{font-weight:400;color:var(--muted)}
.formcard input,.formcard textarea{width:100%;font-family:inherit;font-size:15.5px;
  color:var(--ink);background:var(--ivory-2);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;transition:border .15s,box-shadow .15s}
.formcard input:focus,.formcard textarea:focus{outline:none;border-color:var(--slate);
  box-shadow:0 0 0 3px rgba(62,78,102,.15)}
.formcard textarea{resize:vertical;min-height:88px}
.formcard button{width:100%;margin-top:24px;font-size:16px;padding:15px}
.fineprint{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}
.formerr{display:none;margin-top:16px;background:#FDECEC;border:1px solid #E8A9A9;
  border-radius:10px;padding:12px 14px;font-size:14.5px;color:#7A2020}
.formerr a{color:#7A2020;font-weight:600}
#thanks{display:none;text-align:center;padding:26px 8px}
#thanks h2{margin:14px 0 10px}
#thanks p{color:var(--muted);max-width:44ch;margin:0 auto}
.legal a{color:var(--slate);font-weight:600}
.legal a:hover{color:var(--dark)}

/* ---------- hero: copy, then the lock screen appears on the first small scroll (one beat) ---------- */
/* the hero is shorter than the viewport on purpose: the next section's edge peeks (Round 4 §0) */
.hero{padding:0;height:auto;position:relative}
.hero-pin{position:static;height:auto;display:flex;align-items:center;padding:34px 0 18px;box-sizing:border-box}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;width:100%}
.hero-copy h1,.hero-copy .lede,.hero-copy .cta{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .hero[data-stage] .hero-copy h1{opacity:1;transform:none}
html.js .hero[data-stage] .hero-copy .lede{opacity:1;transform:none;transition-delay:.15s}
html.js .hero[data-stage] .hero-copy .cta{opacity:1;transform:none;transition-delay:.3s}
.hero-hint{margin-top:34px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px;transition:opacity .4s}
.hero-hint i{display:inline-block;width:18px;height:28px;border:2px solid var(--muted);border-radius:12px;position:relative}
.hero-hint i::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:6px;margin-left:-1.5px;border-radius:2px;background:var(--muted);animation:wheel 1.4s ease-in-out infinite}
@keyframes wheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}}
.hero[data-stage="1"] .hero-hint{opacity:0}

/* the lock-screen phone. Plays on LOAD, no scroll (Round 4 §2):
   p1  the first notification appears — the phone is clipped down to just that card
   p2  the phone expands out of the notification (clip-path opens to the full device)
   p3  the remaining notifications land, free-fall + bounce, then the caption */
.lock{position:relative;width:clamp(212px,15vw,300px);aspect-ratio:9/19.5;margin:0 auto;justify-self:end;
  border-radius:16.5%/7.6%;background:linear-gradient(135deg,#3a3a3c,#1c1c1e 45%,#2c2c2e);
  box-shadow:0 0 0 1.5px #4a4a4c,0 0 0 3px #111,0 40px 80px -30px rgba(0,0,0,.6);
  --n-top:35%;--n-h:12.6%;
  opacity:0;
  clip-path:inset(var(--n-top) 6% calc(100% - var(--n-top) - var(--n-h)) 6% round 18px);
  transition:clip-path 1.1s cubic-bezier(.16,1,.3,1),opacity .35s ease}
html.js .hero.p1 .lock{opacity:1}
html.js .hero.p2 .lock{clip-path:inset(0 0 0 0 round 16.5%/7.6%)}
.lock .lscreen{position:absolute;inset:2.2% 3.2%;border-radius:14.5%/6.7%;overflow:hidden;color:#fff;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;
  background:radial-gradient(120% 80% at 30% 0%,#3E4E66 0%,#1E2431 55%,#0d1017 100%)}
.lock .island{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);width:34%;height:3.4%;background:#000;border-radius:100px;z-index:3}
.lock .lstatus{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 18px 0;font-size:11px;font-weight:600}
.lock .lock-ico{position:absolute;top:8.5%;left:50%;transform:translateX(-50%);width:11px;height:9px;border:1.5px solid rgba(255,255,255,.85);border-radius:2px}
.lock .lock-ico::before{content:"";position:absolute;left:1.5px;top:-6px;width:5px;height:6px;border:1.5px solid rgba(255,255,255,.85);border-bottom:0;border-radius:4px 4px 0 0}
.lock .ldate{position:absolute;top:12%;left:0;right:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:.01em;opacity:.9}
.lock .ltime{position:absolute;top:15.5%;left:0;right:0;text-align:center;font-size:56px;font-weight:600;letter-spacing:-.02em;line-height:1}
.lock .lnotifs{position:absolute;left:6%;right:6%;top:35%;display:grid;gap:6px}
.lnotif{background:rgba(255,255,255,.14);backdrop-filter:blur(18px) saturate(160%);border-radius:16px;padding:9px 11px;
  display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:start;min-height:54px}
.lnotif .ico{width:28px;height:28px;border-radius:8px;background:var(--ivory);display:grid;place-items:center}
.lnotif .ico img{width:20px;height:20px}
.lnotif .t{display:flex;justify-content:space-between;font-size:11px;font-weight:600}
.lnotif .t span{font-weight:400;opacity:.7;font-size:10px}
.lnotif .b{font-size:11px;line-height:1.3;opacity:.95}
.lock .lcap{position:absolute;left:0;right:0;bottom:6.5%;text-align:center;font-size:11.5px;font-weight:600;color:var(--ivory);opacity:.95}
.lock .homebar{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);width:36%;height:4px;border-radius:100px;background:#fff;opacity:.85}
/* p1: the first card's words fade in; the rest of the screen waits */
.lnotif.n1 .t,.lnotif.n1 .b{opacity:0;transform:translateY(4px);transition:opacity .6s ease .25s,transform .6s ease .25s}
html.js .hero.p1 .lnotif.n1 .t,html.js .hero.p1 .lnotif.n1 .b{opacity:1;transform:none}
/* p2: the rest of the lock screen wakes as the phone opens */
.lock .ltime,.lock .ldate,.lock .lock-ico,.lock .lstatus,.lock .homebar{opacity:0;transition:opacity .6s ease .45s}
html.js .hero.p2 .lock .ltime,html.js .hero.p2 .lock .ldate,html.js .hero.p2 .lock .lock-ico,html.js .hero.p2 .lock .lstatus{opacity:1}
html.js .hero.p2 .lock .homebar{opacity:.85}
/* p3: the remaining notifications pop the way iOS banners do — in from the top of the
   stack, slight scale, one small overshoot settle. No gravity anywhere (Round 5 §5). */
.lnotif.n2,.lnotif.n3{opacity:0;transform:translateY(-14px) scale(.96)}
@keyframes iosPop{0%{opacity:0;transform:translateY(-14px) scale(.96)}60%{opacity:1;transform:translateY(2px) scale(1.01)}100%{opacity:1;transform:none}}
html.js .hero.p3 .lnotif.n2,html.js .hero.p3 .lnotif.n3{animation:iosPop .5s cubic-bezier(.2,.8,.2,1) var(--nd,0s) forwards}
.lnotif.n2{--nd:0s}.lnotif.n3{--nd:.5s}
.lock .lcap{opacity:0;transition:opacity .6s ease 1.1s}
html.js .hero.p3 .lock .lcap{opacity:.95}
@media (max-width:860px),(prefers-reduced-motion:reduce){
  .hero{height:auto;padding:40px 0 24px}
  .hero-pin{padding:0;display:block}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .lock{justify-self:center;width:min(270px,78vw);opacity:1!important;transform:none!important;clip-path:none!important}
  .lnotif .t,.lnotif .b,.lnotif.n2,.lnotif.n3,.lock .ltime,.lock .ldate,.lock .lock-ico,.lock .lstatus,.lock .lcap{opacity:1!important;transform:none!important;animation:none!important}
  .lock .homebar{opacity:.85!important}
  .hero-copy h1,.hero-copy .lede,.hero-copy .cta{opacity:1!important;transform:none!important}
  .hero-hint{display:none}
}

/* ---------- section 2: three small scenes, stacked, each played in three beats (Round 4 §3) ---------- */
.scenes{display:grid;gap:26px;margin-top:40px;max-width:940px;margin-left:auto;margin-right:auto}
.scn{display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;align-items:center}
.scn.flip{grid-template-columns:minmax(0,1fr) 340px}
.scn.flip .scene{order:2}
.scn-copy h3{margin-top:4px}
.scn-copy p{color:var(--muted);font-size:16px;max-width:44ch;margin-top:8px}
.scene{position:relative;height:190px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 26px 60px -36px rgba(33,63,120,.55);overflow:hidden;font-size:12px;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif}
@media (max-width:860px){.scn,.scn.flip{grid-template-columns:1fr;gap:16px}.scn.flip .scene{order:0}.scene{height:180px}}
/* everything that arrives in a scene pops (ease-out, one small settle) — no gravity (Round 5 §5) */
@keyframes popIn{0%{opacity:0;transform:translateY(-14px) scale(.97)}60%{opacity:1;transform:translateY(2px) scale(1.005)}100%{opacity:1;transform:none}}
/* ---- 1 · card on the table ---- */
.sc1 .table{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,#EDE7DF,#DDD3C7)}
.sc1 .pcard{position:absolute;left:22px;bottom:34px;width:126px;height:78px;border-radius:10px;background:linear-gradient(135deg,#3E4E66,#2C384D);color:#fff;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.5)}   /* the card is simply on the table; the scene plays from here on the first scroll */
.sc1 .pcard .chip{position:absolute;left:12px;top:14px;width:22px;height:16px;border-radius:4px;background:linear-gradient(135deg,#E9D8A6,#C9A961)}
.sc1 .pcard .num{position:absolute;left:12px;bottom:12px;font-size:9.5px;letter-spacing:.06em;opacity:.9}
.sc1 .mform{position:absolute;right:18px;top:24px;width:150px;background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:10px;opacity:0;transform:translateY(-14px) scale(.97)}
.sc1 .mform .fld{display:block;height:22px;border-radius:6px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.sc1 .mform .fld i{position:absolute;left:6px;top:8px;height:5px;width:0;border-radius:3px;background:var(--line)}
.sc1 .mform .send{position:absolute;right:10px;top:12px;font-size:10px;font-weight:700;color:#fff;background:var(--slate);border-radius:100px;padding:4px 8px}
.sc1 .mform .reply{display:block;margin-top:8px;font-size:10.5px;color:var(--muted);opacity:0}
.sc1 .patience{position:absolute;right:26px;bottom:26px;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:#8A2B2B;opacity:0}
.sc1 .patience svg{width:30px;height:30px;transform:rotate(-90deg)}
.sc1 .patience .ring{fill:none;stroke:var(--line);stroke-width:3}
.sc1 .patience .fillr{fill:none;stroke:#8A2B2B;stroke-width:3;stroke-dasharray:94.2;stroke-dashoffset:0}
html.scrolled .is-in .sc1 .pcard{animation:cardOut .7s cubic-bezier(.4,0,.8,.4) 3.9s forwards}
@keyframes cardOut{to{opacity:0;transform:translateX(200px) rotate(4deg)}}
html.scrolled .is-in .sc1 .mform{animation:popIn .5s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
html.scrolled .is-in .sc1 .mform .fld i{animation:typing .7s steps(10) 1.5s both}
@keyframes typing{to{width:64%}}
html.scrolled .is-in .sc1 .mform .send{animation:press .4s ease 2.3s both}
@keyframes press{50%{transform:scale(.9);background:var(--dark)}}
html.scrolled .is-in .sc1 .mform .reply{animation:show .4s ease 2.7s both}
@keyframes show{to{opacity:1}}
html.scrolled .is-in .sc1 .patience{animation:show .4s ease 3.1s both}
html.scrolled .is-in .sc1 .patience .fillr{animation:drain 1.4s linear 3.2s forwards}
@keyframes drain{to{stroke-dashoffset:94.2}}
/* ---- 2 · chair three ---- */
.sc2 .slot{position:absolute;left:18px;top:18px;right:18px;display:flex;align-items:center;gap:10px;background:var(--ivory);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-weight:600;font-size:12px}   /* the slot is there from the start */
.sc2 .slot em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:700;border-radius:100px;padding:3px 8px}
.sc2 .slot .ok{background:#DDEBDD;color:#2E6B3E}
.sc2 .slot .no{background:#F6DEDE;color:#8A2B2B;position:absolute;right:12px;opacity:0}
.sc2 .silence{position:absolute;left:22px;bottom:30px;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;opacity:0}
.sc2 .silence .bell{width:26px;height:26px;color:#8A2B2B}
.sc2 .silence .bell svg{width:26px;height:26px}
.sc2 .chair{position:absolute;right:26px;bottom:14px;width:84px;height:84px;opacity:0;transform:translateY(-14px) scale(.97)}
html.scrolled .is-in .sc2 .silence{animation:show .5s ease 1.4s both}
html.scrolled .is-in .sc2 .chair{animation:popIn .55s cubic-bezier(.2,.8,.2,1) 2.5s forwards}
html.scrolled .is-in .sc2 .slot .ok{animation:fadeout .4s ease 3.1s both}
html.scrolled .is-in .sc2 .slot .no{animation:show .4s ease 3.2s both}
@keyframes fadeout{to{opacity:0}}
/* ---- 3 · the DM ---- */
.sc3 .dm{position:absolute;left:18px;top:22px;display:flex;align-items:flex-end;gap:8px;max-width:190px}
.sc3 .dm .av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#F0A,#F80);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.sc3 .dm .bub{background:#EFEFF1;border-radius:14px;border-bottom-left-radius:4px;padding:8px 12px;font-size:12.5px}   /* the DM is already sitting there */
.sc3 .clock{position:absolute;left:18px;right:18px;bottom:22px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);opacity:0;white-space:nowrap}
.sc3 .clock svg{width:34px;height:34px}
.sc3 .clock .hh,.sc3 .clock .mh{transform-origin:20px 20px}
.sc3 .clock b{color:var(--ink);font-weight:700;display:inline-grid}
.sc3 .clock b i{grid-area:1/1;font-style:normal;opacity:0}
.sc3 .clock b i:nth-child(1){opacity:1}
.sc3 .others{position:absolute;right:18px;top:22px;display:grid;grid-template-columns:auto auto;gap:4px 5px;justify-items:center;font-size:10.5px;color:var(--muted);opacity:0;text-align:center;max-width:110px}
.sc3 .others em{grid-column:1 / -1;font-style:normal;margin:0;line-height:1.25}
.sc3 .others span{width:22px;height:22px;border-radius:50%;background:#DDD;color:#2C384D;font-size:10px;font-weight:700;display:grid;place-items:center}
.sc3 .others span:nth-child(2){background:#CDBFB1}
html.scrolled .is-in .sc3 .clock{animation:show .4s ease 1.2s both}
html.scrolled .is-in .sc3 .clock .hh{animation:hourHand 2.4s linear 1.4s forwards}
html.scrolled .is-in .sc3 .clock .mh{animation:minHand 2.4s linear 1.4s forwards}
@keyframes hourHand{to{transform:rotate(120deg)}}
@keyframes minHand{to{transform:rotate(1440deg)}}
html.scrolled .is-in .sc3 .clock b i:nth-child(1){animation:hide .1s linear 2s both}
html.scrolled .is-in .sc3 .clock b i:nth-child(2){animation:tick .1s linear 2s both,hide .1s linear 2.6s both}
html.scrolled .is-in .sc3 .clock b i:nth-child(3){animation:tick .1s linear 2.6s both,hide .1s linear 3.2s both}
html.scrolled .is-in .sc3 .clock b i:nth-child(4){animation:tick .1s linear 3.2s both}
@keyframes tick{to{opacity:1}}@keyframes hide{to{opacity:0}}
html.scrolled .is-in .sc3 .others{animation:show .5s ease 3.9s both}
html.reduce .scene *,html:not(.js) .scene *{animation:none!important;opacity:1!important;transform:none!important}
html.reduce .sc1 .pcard,html:not(.js) .sc1 .pcard{transform:none!important}

.nav-cta{color:var(--slate)!important;font-weight:600!important}

/* ---------- audit stepper ---------- */
.formcard .q label{font-size:17px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px}
.formcard .q label.check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px;font-weight:500;color:var(--muted);cursor:pointer}
.formcard .check input{width:auto;margin-top:3px;accent-color:var(--slate)}
.qnav{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.qnav .btn{width:auto;margin:0}
.formcard:not(.stepped) .q+.q{margin-top:18px}
form:not(.stepped) .qnext,form:not(.stepped) .qback{display:none}
form:not(.stepped) .qsend{width:100%}

/* ---------- the "Let's work together" dialog ---------- */
.dlg{border:0;padding:0;background:transparent;max-width:min(640px,calc(100vw - 32px));width:100%;margin:auto}
.dlg::backdrop{background:rgba(30,36,49,.45);backdrop-filter:blur(3px)}
.dlg-body{position:relative;background:var(--ivory);border-radius:22px;padding:28px 26px 22px;box-shadow:0 40px 90px -30px rgba(20,24,32,.5)}
.dlg-title{font-size:clamp(24px,3vw,32px);text-align:center;margin-bottom:6px}
.dlg .formcard{margin:14px auto 0;max-width:none;box-shadow:none;background:#fff}
.dlg-x{position:absolute;right:16px;top:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.dlg .thanks{display:none;text-align:center;padding:26px 8px}
@media (prefers-reduced-motion:no-preference){
  .dlg[open]{animation:dlgIn .28s cubic-bezier(.16,1,.3,1)}
  .dlg[open]::backdrop{animation:bdIn .28s ease}
  @keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
  @keyframes bdIn{from{opacity:0}}
}

/* ---------- Ivy ---------- */
#ivy{position:fixed;right:18px;bottom:18px;z-index:80;font-family:'Inter',system-ui,sans-serif}
.ivy-bubble{display:flex;align-items:center;gap:10px;background:var(--dark);color:var(--ivory);
  border:0;border-radius:100px;padding:12px 18px 12px 14px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;box-shadow:0 18px 40px -18px rgba(44,56,77,.7);transition:transform .2s cubic-bezier(.16,1,.3,1)}
.ivy-bubble:hover{transform:translateY(-2px)}
.ivy-dot{width:10px;height:10px;border-radius:50%;background:#7FD1AE;box-shadow:0 0 0 4px rgba(127,209,174,.25)}
.ivy-panel{padding:0;position:absolute;right:0;bottom:60px;width:min(360px,calc(100vw - 36px));height:min(520px,calc(100vh - 110px));
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px -30px rgba(33,63,120,.6);overflow:hidden}
.ivy-panel[hidden]{display:none}
.ivy-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--dark);color:var(--ivory)}
.ivy-head b{display:block;font-size:15px}
.ivy-head span{display:block;font-size:11.5px;opacity:.75}
.ivy-close{background:none;border:0;color:var(--ivory);font-size:24px;line-height:1;cursor:pointer;padding:0 4px}
.ivy-log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--ivory)}
.ivy-msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}
.ivy-assistant{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.ivy-user{align-self:flex-end;background:var(--slate);color:#fff;border-bottom-right-radius:4px}
.ivy-typing i{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--muted);animation:ivyDot 1s infinite}
.ivy-typing i:nth-child(2){animation-delay:.15s}.ivy-typing i:nth-child(3){animation-delay:.3s}
@keyframes ivyDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.ivy-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:#fff}
.ivy-form input{flex:1;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:100px;background:var(--ivory-2)}
.ivy-form input:focus{outline:none;border-color:var(--slate)}
.ivy-form button{width:40px;height:40px;border-radius:50%;border:0;background:var(--slate);color:#fff;font-size:18px;cursor:pointer}
.ivy-foot{margin:0;padding:6px 12px 9px;font-size:11px;color:var(--muted);background:#fff;text-align:center}
.ivy-foot a{color:var(--slate)}
@media (prefers-reduced-motion:reduce){.ivy-typing i{animation:none}}
@media (max-width:480px){.ivy-line{display:none}.ivy-bubble{padding:14px}}

/* tall / portrait viewports: no pins, no scroll budgets — the sequences play on entry (motion.js html.tall) */
html.tall .deck-sec::after,html.tall .train-sec::after,html.tall .reel-sec::after,html.tall .phoneseq::after{display:none}
html.tall .deck-pin,html.tall .train-pin,html.tall .reel-pin,html.tall .phoneseq-pin{position:static}
html.tall .phoneseq-pin{min-height:0;padding-top:104px}

/* first section on every page clears the nav */
main > section:first-of-type:not(.hero){padding-top:104px}
/* the section after the hero starts close enough to peek above the fold */
#problem{padding-top:52px}

/* /audit: the form is the page; nothing sits below an empty screen */
main > section:first-of-type.audit-top{padding-top:84px;padding-bottom:12px}
.audit-top h1{font-size:clamp(28px,3.8vw,42px);margin-top:12px!important}
.audit-top .lede{margin-top:8px;font-size:17px}
.audit-top .formcard{margin-top:20px;padding:24px 24px 22px}
#about-teaser{padding:48px 0 56px}

/* ---------- asterisk popover ("* why not calls?") ----------
   Hangs centred under the station that carries the asterisk (train step 5),
   into the space below the row. Never over another station's text. */
.aster{display:inline-block}
.aster > button{background:none;border:0;padding:0 2px;font:inherit;font-weight:700;color:var(--slate);cursor:pointer;line-height:1}
.aster > button:hover,.aster > button[aria-expanded="true"]{color:var(--dark)}
.pop{position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%);width:min(400px,calc(100vw - 48px));
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14.5px;line-height:1.5;color:var(--ink);
  box-shadow:0 20px 50px -20px rgba(33,63,120,.5);z-index:20;text-align:left}
.pop b{display:block;font-size:13px;letter-spacing:.02em;color:var(--slate);margin-bottom:6px}
.pop::after{content:"";position:absolute;left:50%;margin-left:-8px;bottom:100%;border:8px solid transparent;border-bottom-color:#fff}
.pop::before{content:"";position:absolute;left:50%;margin-left:-9px;bottom:100%;border:9px solid transparent;border-bottom-color:var(--line)}
.pop[hidden]{display:none}
.pop.up{top:auto;bottom:calc(100% + 12px)}
.pop.up::after{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:#fff}
.pop.up::before{bottom:auto;top:100%;border-bottom-color:transparent;border-top-color:var(--line)}
@media (max-width:860px){.pop{left:0;transform:none;top:calc(100% + 8px)}.pop::after{left:22px;margin-left:0}.pop::before{left:21px;margin-left:0}}


/* ---------- audit form: reCAPTCHA slot + its nudge (Netlify injects the widget into .captcha at deploy) ---------- */
.captcha{margin-top:14px;min-height:0}
.captcha:empty{display:none}
.formcap{display:none;margin-top:10px;font-size:14px;color:#7A2020;font-weight:600}