/* =====================================================================
   CakeAssist v2 · "Mocha Latte", Oct 12 2026 (was Espresso Mint: v2-mint-refactor.css; B&W+Mocha draft: v2-bw-mocha.css)
   Everything below overrides the classic Espresso & Copper theme.
   The classic look lives in archive/cakeassist-classic-*.html.
   ===================================================================== */
:root{
  --espresso:#2B1A12; --crema:#F3E9DA; --card:#FFFDF8; --mint:#3FD0A0; --mint-deep:#0F7A5A; --on-mint:#2B1A12; --mint-hover:#4FE0B0; --dot:#3FD0A0;
  --hl:#8FE3C6; --hl-ink:#2B1A12; --hl-rgb:63,208,160; --hl-a:.62; --glow-rgb:63,208,160; --glow-a:.20;
  --feature:#3FD0A0; --feature-ink:#2B1A12; --feature-sub:var(--feature-sub); --feature-hl:#FFFDF8; --feature-dots:rgba(43,26,18,.16); --feature-back:#D99A4E;
  --caramel:#D99A4E; --cocoa:#8A5A3C; --charcoal:#1A1A1A;

  --cream:#FFFDF8; --cream-deep:#F3E9DA; --paper:#FFFDF8;
  --ink:#2B1A12; --ink-rgb:43,26,18; --ink-2:#4F3B2F; --ink-3:#6E5747; --faint:#9A8474; --heading:#2B1A12;
  --accent:#0F7A5A; --accent-2:#D99A4E; --accent-rgb:15,122,90; --accent-wash:#DFF6EC; --accent-ink:#0B6248;
  --line:#E3D6C4; --line-2:#EFE5D7; --device:#F3E9DA; --sh-rgb:43,26,18;
  --bub-us:#2B1A12; --chip:#2B1A12;

  --shadow-s:3px 3px 0 var(--espresso);
  --shadow-m:5px 5px 0 var(--espresso);
  --shadow-l:7px 7px 0 var(--espresso);
  --r-s:10px; --r-m:14px; --r-l:18px; --r-xl:22px;

  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Archivo Black","Figtree",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,Menlo,Consolas,monospace;
  --brand:"Fraunces",Georgia,serif;
  --pop:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- base & type ---------- */
body{background:var(--cream); color:var(--ink); font-family:var(--sans)}
.band{background:var(--crema) !important;
  background-image:radial-gradient(rgba(43,26,18,.13) 1.1px, transparent 1.2px) !important;
  background-size:24px 24px !important}
h1,h2,h3{font-family:var(--display); font-weight:400}
h1{letter-spacing:-.035em; line-height:.98}
h2{letter-spacing:-.03em; line-height:1.02}
h3{font-family:var(--sans); font-weight:700; letter-spacing:-.015em; font-size:20px}
/* italic accents in headings become a mint highlighter swipe: Archivo has no italic */
h1 em, h2 em, h3 em, h1 .l2, h2 i, h1 i, .o30-h em, .tr-head em{
  font-style:normal !important; font-weight:400 !important; color:inherit !important; letter-spacing:inherit !important;
  background:linear-gradient(transparent 58%, rgba(var(--hl-rgb),var(--hl-a)) 58%, rgba(var(--hl-rgb),var(--hl-a)) 92%, transparent 92%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .06em;
}
.speed h2 em,.speed h2 i,.final h2 em,.final h2 i,.final h2 .l2,.speed h2 .l2,.bundle em{color:var(--mint) !important; background:none}
.ofr-last{background:var(--espresso) !important; color:var(--crema)}
.eyebrow{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.1em; color:var(--cocoa)}
.eyebrow::before{content:""; display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--mint); border:1.5px solid var(--espresso); margin-right:9px; vertical-align:-1px}
.speed .eyebrow,.final .eyebrow{color:var(--caramel)}
.lede{color:var(--ink-2)}
.mono{font-family:var(--mono)}

/* ---------- wordmark ---------- */
.wmk{font-family:var(--brand); font-weight:900; font-size:30px; line-height:1; letter-spacing:-.03em;
  color:var(--espresso); white-space:nowrap; display:inline-block}
.wmk-i{position:relative; display:inline-block}
.wmk-i i{position:absolute; left:50%; top:.1em; width:.18em; height:.18em; margin-left:-.09em;
  border-radius:50%; background:var(--dot)}
.foot .wmk{font-size:24px}
.flow-node .wmk{font-size:22px}
.logo:hover .wmk-i i{animation:dotHop .6s var(--pop)}
@keyframes dotHop{0%{transform:none}40%{transform:translateY(-.32em) scale(1.15)}70%{transform:translateY(.03em) scale(.92,1.08)}100%{transform:none}}
@media(max-width:760px){ .nav .wmk{font-size:25px} }

/* ---------- nav ---------- */
.nav{background:rgba(255,253,248,.88)}
.nav.scrolled{border-bottom:2px solid var(--espresso)}
.nav-links a{font-weight:500; position:relative}
.nav-links a::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:3px; border-radius:3px;
  background:var(--mint); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease)}
.nav-links a:hover::after{transform:scaleX(1)}

/* ---------- buttons: pressable, hard shadow ---------- */
.btn{border-radius:14px; border:2px solid var(--espresso); font-weight:600; height:52px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease)}
.btn-primary{background:var(--mint); color:var(--on-mint); box-shadow:4px 4px 0 var(--espresso)}
.btn-primary:hover{background:var(--mint-hover); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--espresso)}
.btn-primary:active,.btn-ghost:active,.btn-light:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--espresso)}
.btn-ghost{background:var(--card); color:var(--espresso); border-color:var(--espresso); box-shadow:4px 4px 0 var(--espresso)}
.btn-ghost:hover{background:var(--card); transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--espresso); border-color:var(--espresso)}
.btn-light{background:var(--mint); color:var(--on-mint); border-color:var(--crema); box-shadow:4px 4px 0 var(--crema)}
.btn-light:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--crema)}
.btn-outline-light{border:2px solid var(--crema); color:var(--crema); box-shadow:4px 4px 0 rgba(243,233,218,.35)}
.nav .btn{height:42px; border-radius:12px; box-shadow:3px 3px 0 var(--espresso)}
.nav .btn:hover{box-shadow:5px 5px 0 var(--espresso)}

/* ---------- cards: 2px espresso outline, hard offset shadow ---------- */
.order,.msg-card,.chan,.jcard,.jpanel,.auto,.chatw,.isnt-card,.avail-card,.hand-card,.dfy-card,
.price-card,.addon,.fx-card,.fstat,.ftab,.ofr-step,.ofr-risk,.bundle,.cb-card,.lane{
  border:2px solid var(--espresso) !important; box-shadow:5px 5px 0 var(--espresso) !important;
  background-color:var(--card);
}
.cb-stack{border:2px solid var(--espresso) !important; box-shadow:none !important; background:var(--crema) !important}
.ftab{box-shadow:6px 6px 0 var(--espresso) !important}
.chan:hover,.auto:hover,.addon:hover,.jcard:hover{transform:translate(-3px,-3px) rotate(-.4deg); box-shadow:8px 8px 0 var(--espresso) !important}
.addon:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.4deg)}
.addon,.auto,.chan,.jcard{transition:transform .25s var(--pop), box-shadow .25s var(--ease)}
.igp,.phone,.app-phone{border:2px solid var(--espresso) !important; box-shadow:8px 8px 0 var(--espresso) !important}
.speed .stat,.results .stat{border:2px solid rgba(243,233,218,.35)}
.step-n{border:2px solid var(--espresso) !important; font-family:var(--display); font-weight:400}
.step.on .step-n{background:var(--mint) !important; color:var(--on-mint) !important}
.tag,.tag-price,.ofr-tag,.badge,.assist-tag{font-family:var(--mono); font-weight:700; letter-spacing:.02em}
.price-card{background:var(--card) !important}
.bundle{background:var(--espresso) !important; color:var(--crema)}
.faq details{border-bottom:2px dashed rgba(43,26,18,.18)}
.faq summary .pm{border:2px solid var(--espresso) !important; background:var(--mint) !important; color:var(--on-mint) !important}

/* ---------- dark sections ---------- */
.speed,.final{background:var(--espresso) !important}
.speed::before,.final::before{opacity:.0}
.speed,.final{background-image:radial-gradient(rgba(243,233,218,.08) 1.1px, transparent 1.2px) !important; background-size:24px 24px !important}

/* ---------- hero ---------- */
.hero::before{background:radial-gradient(46% 40% at 50% 42%, rgba(var(--glow-rgb),var(--glow-a)), rgba(var(--glow-rgb),0) 68%)}
.hero-pill{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--card) !important; border:2px solid var(--espresso) !important; box-shadow:3px 3px 0 var(--espresso) !important; color:var(--espresso) !important}
.hero-pill svg{color:var(--mint)}
.hero h1{font-size:clamp(44px,7.4vw,84px)}
@media(min-width:761px){ .hero{padding-bottom:78px !important} }
.hero-more{color:var(--mint-deep) !important}
.hero h1 .l2{display:inline; font-style:normal !important; font-weight:400 !important; color:var(--ink) !important; letter-spacing:-.035em !important}
.hero h1.kin .l2{display:block; background:none}
.hero h1.kin .l2 .kw{background:linear-gradient(transparent 58%, rgba(var(--hl-rgb),var(--hl-a)) 58%, rgba(var(--hl-rgb),var(--hl-a)) 92%, transparent 92%)}
.hero h1.kin .l2 .kw:last-child{padding-right:.06em}
html{overflow-x:clip}

/* kinetic headline: words rise one by one (2026: kinetic type) */
.kw{display:inline-block; white-space:pre}
.kin .kw{opacity:0; transform:translateY(.55em) rotate(4deg); filter:blur(6px);
  animation:kwIn .7s var(--pop) forwards; animation-delay:calc(var(--k) * 70ms + 120ms)}
@keyframes kwIn{to{opacity:1; transform:none; filter:none}}

/* rotating sticker on the hero phone (experimental touch) */
.hero-vis{position:relative}
.spin-badge{position:absolute; z-index:5; width:118px; height:118px; right:calc(50% - 230px); top:-26px;
  border-radius:50%; background:var(--mint); border:2px solid var(--espresso); box-shadow:4px 4px 0 var(--espresso);
  display:grid; place-items:center; pointer-events:none}
.spin-badge svg{position:absolute; inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); animation:spin 14s linear infinite}
.spin-badge text{font-family:var(--mono); font-weight:700; font-size:10.4px; letter-spacing:.14em; fill:var(--on-mint); text-transform:uppercase}
.spin-badge b{font-family:var(--display); font-weight:400; font-size:24px; line-height:.9; color:var(--on-mint); text-align:center}
.spin-badge b small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; margin-top:2px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){ .spin-badge{width:84px; height:84px; right:-6px; top:auto; bottom:60px} .spin-badge b{font-size:17px} .spin-badge b small{font-size:8px} .spin-badge text{font-size:9.6px} }

/* ---------- marquee of real inquiries (2026: kinetic ticker) ---------- */
.ticker{background:var(--espresso); color:var(--crema); border-block:2px solid var(--espresso); overflow:hidden;
  padding:16px 0; position:relative; transform:rotate(-1.2deg); margin:-14px -2% 0; width:104%; z-index:3}
.ticker-track{display:flex; gap:0; width:max-content; animation:tick 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--display); font-size:22px; letter-spacing:-.01em; white-space:nowrap; display:flex; align-items:center}
.ticker span::after{content:""; display:inline-block; width:22px; height:8px; border-radius:6px; margin:0 26px;
  background:var(--mint); transform:rotate(-24deg)}
.ticker span:nth-child(3n)::after{background:var(--caramel); transform:rotate(18deg)}
.ticker span:nth-child(3n+1)::after{background:var(--crema); width:9px; height:9px; border-radius:50%; transform:none}
@keyframes tick{to{transform:translateX(-50%)}}
@media(max-width:760px){ .ticker span{font-size:17px} .ticker{padding:12px 0} }

/* ---------- order-progress scroll bar (signature element) ---------- */
.oprog{position:fixed; left:20px; bottom:20px; z-index:59; pointer-events:none;
  display:flex; opacity:0; transform:translateY(12px); transition:opacity .3s var(--ease), transform .4s var(--pop)}
.oprog.on{transform:none}
.oprog.on{opacity:1}
.oprog-in{display:flex; align-items:center; gap:10px; background:var(--card); border:2px solid var(--espresso);
  border-radius:12px; box-shadow:3px 3px 0 var(--espresso); padding:6px 10px 6px 12px}
.oprog-segs{display:grid; grid-template-columns:repeat(10,18px); gap:4px}
.oprog-segs i{height:10px; border-radius:4px; border:1.5px solid var(--espresso); background:transparent;
  transition:background .25s var(--ease), transform .35s var(--pop)}
.oprog-segs i.f{background:var(--mint)}
.oprog-segs i.f:nth-child(3n+2){background:var(--caramel)}
.oprog-segs i.f:nth-child(3n){background:var(--espresso)}
.oprog-segs i.pop{transform:scaleY(1.6)}
.oprog-t{font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--espresso); white-space:nowrap}
.oprog-t b{color:var(--mint-deep)}
@media(max-width:760px){ .oprog{left:0; right:0; bottom:auto; top:0; transform:none} .oprog-in{border:0; border-radius:0; box-shadow:none; padding:0; background:transparent; width:100%} .oprog-t{display:none} .oprog-segs{width:100%; grid-template-columns:repeat(10,1fr); gap:2px} .oprog-segs i{height:4px; border:0; border-radius:0; background:rgba(43,26,18,.08)} }

/* ---------- scroll-driven reveals (2026: CSS scroll timelines) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .section h2{animation:hReveal linear both; animation-timeline:view(); animation-range:entry 0% cover 28%}
    .addon,.auto,.chan,.ofr-step,.fstat,.jcard,.step{animation:cardSettle linear both; animation-timeline:view(); animation-range:entry 0% cover 30%}
    .addon:nth-child(odd),.ofr-step:nth-child(odd),.fstat:nth-child(odd){--tilt:-3deg}
  }
}
@keyframes hReveal{from{clip-path:inset(0 0 100% 0); transform:translateY(24px)} to{clip-path:inset(0 0 -10% 0); transform:none}}
@keyframes cardSettle{from{opacity:0; transform:translateY(46px) rotate(var(--tilt,3deg))} to{opacity:1; transform:none}}

/* ---------- sprinkle burst (micro-interaction) ---------- */
.spr{position:fixed; z-index:9999; width:12px; height:5px; border-radius:3px; pointer-events:none;
  border:1px solid rgba(43,26,18,.55); animation:sprFly .8s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes sprFly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0}}

/* ---------- footer ---------- */
.foot{border-top:2px solid var(--espresso); background:var(--crema)}

@media (prefers-reduced-motion: reduce){
  .kin .kw{animation:none; opacity:1; transform:none; filter:none}
  .ticker-track,.spin-badge svg{animation:none}
  .spr{display:none}
}

/* ---------- the one mint section: customer book (Oct 11) ----------
   Mint is the brand's loudest colour, so it gets ONE full section.
   Everything inside switches to espresso/crema so nothing disappears on mint. */
.cbook{background:var(--feature); color:var(--feature-ink);
  background-image:radial-gradient(var(--feature-dots) 1.1px, transparent 1.2px); background-size:24px 24px;
  border-bottom:2px solid var(--espresso)}
.cbook h2, .cbook .lede, .cbook .cbook-close{color:var(--feature-ink)}
.cbook h2 em{background:linear-gradient(transparent 58%, var(--feature-hl) 58%, var(--feature-hl) 92%, transparent 92%) !important; color:var(--espresso) !important}
.cbook .eyebrow{color:var(--feature-ink)}
.cbook .eyebrow::before{background:var(--card)}
.cbook .lede{color:var(--feature-sub)}
.cbook .bullets li{color:var(--feature-sub)}
.cbook .bullets li strong{color:var(--feature-ink)}
.cbook .bullets li svg{width:22px; height:22px; padding:2px; margin-top:1px; color:var(--espresso);
  background:var(--card); border:2px solid var(--espresso); border-radius:7px; box-shadow:2px 2px 0 var(--espresso)}
.cbook .cbook-fine{color:var(--feature-sub); border-top:2px dashed rgba(43,26,18,.3); padding-top:12px}
.cbook a{color:var(--feature-ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.cbook .cb-stack{background:var(--crema) !important}
.cbook .cb-s2{opacity:1; background:var(--feature-back) !important}
.cbook .cb-s1{opacity:1}
.cbook .cb-card{box-shadow:7px 7px 0 var(--espresso) !important}
.cbook .cb-next{background:var(--espresso); color:var(--crema)}
.cbook .cb-next svg{color:var(--dot)}
.cbook .cb-av{background:var(--mint); color:var(--on-mint); border:2px solid var(--espresso)}

/* ---------- caramel "why speed matters" section (Oct 11) ----------
   Caramel becomes the background; espresso carries all the type. */
.speed{background:var(--caramel) !important; color:var(--espresso);
  background-image:radial-gradient(rgba(43,26,18,.16) 1.1px, transparent 1.2px) !important; background-size:24px 24px !important;
  border-block:2px solid var(--espresso)}
.speed::before{display:none}
.speed .eyebrow{color:var(--espresso)}
.speed .eyebrow::before{background:var(--card)}
.speed h2{color:var(--espresso)}
.speed h2 em,.speed h2 i,.speed h2 .l2{color:var(--espresso) !important;
  background:linear-gradient(transparent 58%, var(--card) 58%, var(--card) 92%, transparent 92%) !important}
.speed .lede{color:#3A2418}
.speed .stat{background:var(--card); border:2px solid var(--espresso) !important; box-shadow:5px 5px 0 var(--espresso)}
.speed .stat b{color:var(--espresso)}
.speed .stat p{color:#3A2418}
.speed .stat span{color:#7A5A44}
.speed .lane.slow{background:var(--crema)}
.speed-close p{color:#3A2418}
.speed-close strong{color:var(--espresso)}
.speed-close em{color:var(--espresso); background:linear-gradient(transparent 60%, var(--card) 60%, var(--card) 94%, transparent 94%)}
.speed-src{color:#5A3D2B}
.speed-src a:hover{color:var(--espresso)}

/* ---------- real profile photos instead of initials (Oct 11) ----------
   One 4x4 sprite (avatars.jpg, 640px); each person is matched by the colour
   already set on their avatar, so the HTML did not need to change. */
.iga,.ig-ava,.cb-av{background-image:url(avatars.jpg?v=1) !important; background-size:400% 400% !important; background-repeat:no-repeat;
  color:transparent !important; font-size:0 !important; text-indent:-999px; overflow:hidden}
.iga[style*="#E9A27C"]{background-position:0% 0% !important}
.iga[style*="#B9A1D6"]{background-position:33.33% 0% !important}
.iga[style*="#8FB8C9"]{background-position:66.67% 0% !important}
.iga[style*="#E7B95E"]{background-position:100% 0% !important}
.iga[style*="#D98B8B"]{background-position:0% 33.33% !important}
.iga[style*="#9CC5A1"]{background-position:33.33% 33.33% !important}
.iga[style*="#C9A27E"]{background-position:66.67% 33.33% !important}
.iga[style*="#A3B4E0"]{background-position:100% 33.33% !important}
.iga[style*="#E6A3B9"]{background-position:0% 66.67% !important}
.iga[style*="#9DBFB0"]{background-position:33.33% 66.67% !important}
.iga[style*="#D4B483"]{background-position:66.67% 66.67% !important}
.iga[style*="#C79BC4"]{background-position:100% 66.67% !important}
.iga[style*="#8FB0D6"]{background-position:0% 100% !important}
.iga[style*="#E0A07A"]{background-position:33.33% 100% !important}
.iga[style*="#A7C78F"]{background-position:66.67% 100% !important}
.ig-ava,.cb-av{background-position:100% 100% !important}
.cb-av{border:2px solid var(--espresso) !important}

/* card text inside the feature section always stays espresso */
.cbook .cb-card,.cbook .cb-card b{color:var(--espresso)}
.cbook .cb-next,.cbook .cb-next b{color:var(--crema) !important}

/* ---------- ONE highlight style everywhere (Oct 12) ----------
   Every highlighted word on every page is the same solid label in the same colour (--hl),
   with espresso type, so it reads on cream, caramel and dark sections alike. */
h1 em, h2 em, h3 em, h1 i, h2 i, h1 .l2, .o30-h em, .tr-head em, .speed-close em, .bundle em,
.speed h2 em,.speed h2 i,.speed h2 .l2,.final h2 em,.final h2 i,.final h2 .l2,.cbook h2 em{
  background:var(--hl) !important; color:var(--hl-ink) !important; padding:0 .1em !important; border-radius:0 !important;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.hero h1.kin .l2{background:none !important; padding:0 !important}
.hero h1.kin .l2 .kw{background:var(--hl) !important; color:var(--hl-ink) !important}
.hero h1.kin .l2 .kw:first-child{padding-left:.1em}
.hero h1.kin .l2 .kw:last-child{padding-right:.1em}

/* ---------- logo A: typing dots over s · ı · s (Oct 12) ----------
   The i-dot is the middle of a typing indicator; the outer two dots sit over the two s's. */
:root{--dot-soft:#C4B8A8}
.wmk-i i{width:.165em; height:.165em; margin-left:-.0825em; top:.13em; background:var(--dot)}
.wmk-i::before,.wmk-i::after{content:""; position:absolute; top:.137em; width:.152em; height:.152em; border-radius:50%;
  background:var(--dot-soft); left:50%}
.wmk-i::before{margin-left:calc(-.076em - .40em)}
.wmk-i::after{margin-left:calc(-.076em + .40em)}
@keyframes typeDot{0%,60%,100%{transform:none}25%{transform:translateY(-.07em)}}
.wmk-i::before,.wmk-i i,.wmk-i::after{animation:typeDot 1.3s ease-in-out infinite}
.wmk-i i{animation-delay:.18s}.wmk-i::after{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.wmk-i::before,.wmk-i i,.wmk-i::after{animation:none}}

/* =====================================================================
   FINAL PALETTE (Oct 12): Mocha Latte
   Espresso type on cream, latte buttons, mocha customer-book section,
   caramel speed section, mocha dot on the i.
   Accent words: latte marker underline (lower part of the word).
   ===================================================================== */
:root{--mint:#C9A27C;--on-mint:#2B1A12;--mint-hover:#D6B28E;--dot:#C9A27C;--mint-deep:#7A4E36;
--hl:#E8CFAE;--hl-ink:#2B1A12;--glow-rgb:201,162,124;--glow-a:.22;
--feature:#6B4532;--feature-ink:#F3E9DA;--feature-sub:#EADBC8;--feature-dots:rgba(243,233,218,.10);--feature-back:#C9A27C;
--accent:#7A4E36;--accent-ink:#7A4E36;--accent-rgb:122,78,54;--accent-wash:#F1E6D8}
:root{--dot:#B07F55; --dot-soft:#CDBFAE; --mark:#E2C49F}
h1 em, h2 em, h3 em, h1 i, h2 i, h1 .l2, .o30-h em, .tr-head em, .speed-close em, .bundle em,.speed h2 em,.speed h2 i,.speed h2 .l2,.final h2 em,.final h2 i,.final h2 .l2,.cbook h2 em,.wk-close em,.tagline i,.tagline em,.hero h1.kin .l2 .kw,.hero h1.kin .l2 .ks{font-style:normal !important; color:var(--espresso) !important; padding:0 .04em !important; border-radius:0 !important;
  background:linear-gradient(transparent 60%, var(--mark) 60%, var(--mark) 90%, transparent 90%) !important;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; text-decoration:none !important}
.hero h1.kin .l2{background:none !important; padding:0 !important}
.hero h1.kin .l2 .kw,.hero h1.kin .l2 .ks{padding:0 !important}
/* dark sections: cream type, latte marker */
.cbook h2 em,.final h2 em,.final h2 i,.final h2 .l2,.final .tagline i,.final .tagline em,.bundle em{color:var(--crema) !important;
  background:linear-gradient(transparent 62%, rgba(201,162,124,.8) 62%, rgba(201,162,124,.8) 90%, transparent 90%) !important}
/* caramel speed section: espresso type, cream marker */
.speed h2 em,.speed h2 i,.speed h2 .l2,.speed-close em{color:var(--espresso) !important;
  background:linear-gradient(transparent 60%, var(--card) 60%, var(--card) 90%, transparent 90%) !important}

/* ---------- logo A: typing dots over s · ı · s (Oct 12) ---------- */
.wmk-i i{width:.165em; height:.165em; margin-left:-.0825em; top:.13em; background:var(--dot)}
.wmk-i::before,.wmk-i::after{content:""; position:absolute; top:.137em; width:.152em; height:.152em; border-radius:50%; background:var(--dot-soft); left:50%}
.wmk-i::before{margin-left:calc(-.076em - .40em)}
.wmk-i::after{margin-left:calc(-.076em + .40em)}
.final .wmk-i::before,.final .wmk-i::after,.foot.dark .wmk-i::before{background:rgba(243,233,218,.4)}
@keyframes typeDot{0%,60%,100%{transform:none}25%{transform:translateY(-.07em)}}
.wmk-i::before,.wmk-i i,.wmk-i::after{animation:typeDot 1.3s ease-in-out infinite}
.wmk-i i{animation-delay:.18s}.wmk-i::after{animation-delay:.36s}
@media (prefers-reduced-motion:reduce){.wmk-i::before,.wmk-i i,.wmk-i::after{animation:none}}
.speed strong,.speed b{color:var(--espresso)}
.hero h1.kin .l2 .ks{background:none !important}

/* =====================================================================
   FLAVOUR SECTIONS (Oct 12): each coloured band is a cake flavour.
   vanilla hero · espresso ticker · tiramisu customer book · caramel speed ·
   pistachio "what it does" · red velvet calendar · espresso finish.
   Cream sections sit between them so the page stays calm.
   ===================================================================== */
:root{--vanilla:#F6EBCF; --tiramisu:#7A4E36; --pistachio:#B5C98E; --redvelvet:#8E1F2F}
.hero{background-color:var(--vanilla) !important;
  background-image:radial-gradient(rgba(43,26,18,.10) 1.1px,transparent 1.2px) !important; background-size:24px 24px !important}
.hero::before{background:radial-gradient(46% 40% at 50% 42%, rgba(255,253,248,.75), rgba(255,253,248,0) 68%) !important}
.nav{background:rgba(246,235,207,.9)}
.nav.scrolled{background:rgba(255,253,248,.92)}
.hero h1.kin .l2 .kw{background:linear-gradient(transparent 60%, #DDB98C 60%, #DDB98C 90%, transparent 90%) !important}

#customer-book{background-color:var(--tiramisu) !important}

#assistant,#availability{background-size:24px 24px !important; border-block:2px solid var(--espresso)}
#assistant{background-color:var(--pistachio) !important; background-image:radial-gradient(rgba(43,26,18,.13) 1.1px,transparent 1.2px) !important}
#assistant .lede,#assistant p,#assistant li,#assistant .eyebrow{color:#2A3318}
#assistant h2 em,#assistant h2 .l2{background:linear-gradient(transparent 60%, #FFFDF8 60%, #FFFDF8 90%, transparent 90%) !important}

#availability{background-color:var(--redvelvet) !important; background-image:radial-gradient(rgba(243,233,218,.12) 1.1px,transparent 1.2px) !important}
#availability h2,#availability .lede,#availability li,#availability li strong,#availability li b,#availability .eyebrow{color:#F3E9DA !important}
#availability h2 em,#availability h2 .l2{color:#F3E9DA !important;
  background:linear-gradient(transparent 62%, rgba(217,154,78,.85) 62%, rgba(217,154,78,.85) 90%, transparent 90%) !important}
#availability li svg{color:#E2C49F !important}
#availability .avail-card p,#availability .avail-card li{color:inherit !important}

/* =====================================================================
   Oct 12 (b): tiramisu brown takes over the accents, latte goes to the
   customer book section, hero marker runs unbroken across each line.
   ===================================================================== */
:root{--mint:#7A4E36; --on-mint:#F3E9DA; --mint-hover:#8A5A3F; --dot:#7A4E36; --mark:#7A4E36;
  --feature:#C9A27C; --feature-ink:#2B1A12; --feature-sub:#3A2418; --feature-dots:rgba(43,26,18,.14); --feature-back:#7A4E36}
.btn-light{color:var(--on-mint)}
.spin-badge text{fill:var(--on-mint)} .spin-badge b{color:var(--on-mint)}
/* customer book: latte background, espresso type */
#customer-book{background-color:var(--feature) !important}
.cbook h2 em{color:var(--espresso) !important;
  background:linear-gradient(transparent 62%, #FFFDF8 62%, #FFFDF8 92%, transparent 92%) !important}
/* marker on light sections: tiramisu, sitting low so the letters stay readable */
h1 em, h2 em, h3 em, h1 i, h2 i, .o30-h em, .tr-head em, .wk-close em{
  background:linear-gradient(transparent 70%, var(--mark) 70%, var(--mark) 93%, transparent 93%) !important}
/* hero: one continuous marker per line, drawn left to right, words rise over it */
.hero h1 .l2,.hero h1.kin .l2{display:inline !important; padding:0 !important; color:var(--espresso) !important;
  background:linear-gradient(transparent 73%, var(--mark) 73%, var(--mark) 95%, transparent 95%) no-repeat !important;
  background-size:100% 100% !important; -webkit-box-decoration-break:clone; box-decoration-break:clone}
.hero h1 .l2::before{content:"\A"; white-space:pre}
.hero h1.kin .l2 .kw,.hero h1.kin .l2 .ks{background:none !important; padding:0 !important}
@keyframes markIn{from{background-size:0% 100%}}
.hero h1.kin .l2{animation:markIn .9s cubic-bezier(.2,.7,.2,1) .7s both}
@media (prefers-reduced-motion:reduce){.hero h1.kin .l2{animation:none}}

/* Oct 12 (c): light hero like the mint version, soft see-through marker, warm glow */
:root{--mark-soft:rgba(186,128,78,.40)}
.hero{background-color:var(--cream) !important; background-image:none !important}
.nav{background:rgba(255,253,248,.88)}
.hero::before{background:radial-gradient(46% 40% at 50% 42%, rgba(176,127,85,.22), rgba(176,127,85,0) 68%) !important}
h1 em, h2 em, h3 em, h1 i, h2 i, .o30-h em, .tr-head em, .wk-close em{
  background:linear-gradient(transparent 58%, var(--mark-soft) 58%, var(--mark-soft) 92%, transparent 92%) !important}
.hero h1 .l2,.hero h1.kin .l2{
  background:linear-gradient(transparent 58%, var(--mark-soft) 58%, var(--mark-soft) 92%, transparent 92%) no-repeat !important;
  background-size:100% 100% !important}
.hero h1.kin .l2{animation:markIn .9s cubic-bezier(.2,.7,.2,1) .7s both}

/* =====================================================================
   NAV A (Oct 12): floating pill (Features · Pricing · Menu) + layer-cake menu
   ===================================================================== */
.nav{background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important}
.nav.scrolled{background:transparent !important}
.nav-in{position:relative}
.nav-links{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex !important; align-items:center; gap:2px; padding:5px;
  background:rgba(255,253,248,.74); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:2px solid var(--espresso); border-radius:999px; box-shadow:3px 3px 0 var(--espresso); transition:transform .35s var(--pop)}
.nav-links a{padding:9px 17px; border-radius:999px; font-weight:600; font-size:15.5px; color:var(--espresso)}
.nav-links a::after{display:none !important}
.nav-links a:hover,.nav-links a[aria-current]{background:var(--crema)}
.menu-btn,.m-menu{font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:9px; border-radius:999px; background:var(--espresso); color:var(--crema); font-weight:600}
.menu-btn{border:0; padding:9px 18px; font-size:15.5px}
.menu-btn:hover,.m-menu:hover{background:#3d271b}
.burger{display:inline-grid; gap:4px}.burger i{display:block; width:16px; height:2px; border-radius:2px; background:currentColor}.burger i:last-child{width:11px; transition:width .25s}
.menu-btn:hover .burger i:last-child,.m-menu:hover .burger i:last-child{width:16px}
.m-menu{display:none}
.nav.scrolled .nav-links{transform:translate(-50%,-50%) scale(.96)}
@media(max-width:760px){
  .nav-links{display:none !important}
  .nav .nav-gs{display:none !important}
  .m-menu{display:inline-flex; height:44px; padding:0 16px; border:2px solid var(--espresso); font-size:15px; box-shadow:3px 3px 0 var(--espresso)}
  .nav-cta{display:flex; align-items:center}
}
/* the menu: stacked flavour layers, like a slice of layer cake */
.lc{position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; background:var(--cream); font-family:var(--sans);
  visibility:hidden; opacity:0; transition:opacity .25s ease, visibility 0s .3s}
.lc[hidden]{display:flex}
html.lc-open .lc{visibility:visible; opacity:1; transition:opacity .2s ease}
html.lc-open{overflow:hidden}
.lc-top{display:flex; align-items:center; justify-content:space-between; padding:16px max(24px,calc(50% - 560px)); border-bottom:2px solid var(--espresso); background:var(--cream)}
.lc-top .wmk{font-size:28px}
.lc-r{display:flex; gap:12px; align-items:center}
.lc-x{font:inherit; cursor:pointer; display:inline-flex; align-items:center; gap:8px; height:46px; padding:0 18px; border-radius:999px; border:2px solid var(--espresso); background:var(--card); font-weight:600; color:var(--espresso); box-shadow:3px 3px 0 var(--espresso)}
.lc-gs{display:inline-flex; align-items:center; height:46px; padding:0 20px; border-radius:14px; border:2px solid var(--espresso); background:var(--mint); color:var(--on-mint); font-weight:600; box-shadow:3px 3px 0 var(--espresso)}
.layer{flex:1; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc(50% - 560px)); border-bottom:2px solid var(--espresso);
  position:relative; overflow:hidden; transform:translateY(-34px); opacity:0; transition:transform .5s var(--pop), opacity .3s ease, box-shadow .2s ease}
html.lc-open .layer{transform:none; opacity:1}
html.lc-open .layer:nth-of-type(1){transition-delay:.03s} html.lc-open .layer:nth-of-type(2){transition-delay:.08s}
html.lc-open .layer:nth-of-type(3){transition-delay:.13s} html.lc-open .layer:nth-of-type(4){transition-delay:.18s} html.lc-open .layer:nth-of-type(5){transition-delay:.23s}
.layer .lk{color:inherit; text-decoration:none; display:flex; align-items:center}
.layer .lk::after{content:""; position:absolute; inset:0; z-index:1}
.layer:hover,.layer:focus-within{box-shadow:inset 12px 0 0 var(--espresso)}
.layer b{font-family:var(--display); font-weight:400; font-size:clamp(34px,5.4vw,70px); letter-spacing:-.03em; line-height:1; transition:transform .3s var(--pop)}
.layer:hover b{transform:translateX(10px)}
.layer .n{font-family:var(--mono); font-weight:700; font-size:13px; letter-spacing:.08em; margin-right:18px; opacity:.7}
.layer .sub{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; max-width:540px; position:relative; z-index:2}
.layer .sub a{font-size:15px; font-weight:600; padding:8px 14px; border-radius:999px; border:2px solid currentColor; white-space:nowrap; color:inherit; text-decoration:none}
.layer .sub a:hover{background:rgba(255,253,248,.18)}
.layer .arr{font-family:var(--display); font-size:40px; transition:transform .3s var(--pop)}
.layer:hover .arr{transform:translateX(8px)}
.l1{background:var(--tiramisu); color:var(--crema); flex:1.35}.l2b{background:#C9A27C; color:var(--espresso)}.l3{background:#D99A4E; color:var(--espresso)}
.l4{background:var(--pistachio); color:var(--espresso)}.l5{background:var(--redvelvet); color:var(--crema)}
.lc-foot{display:flex; justify-content:space-between; align-items:center; padding:14px max(24px,calc(50% - 560px)); background:var(--espresso); color:var(--crema);
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; text-transform:uppercase}
@media(max-width:760px){
  .lc-top{padding:12px 18px}.lc-top .wmk{font-size:24px}
  .lc-gs,.lc-x{height:44px; padding:0 14px; font-size:15px}
  .layer{padding:0 20px; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px}
  .layer .arr{display:none}.layer .sub{justify-content:flex-start}.layer .sub a{font-size:13px; padding:6px 10px}
  .layer b{font-size:34px}.lc-foot{padding:12px 18px; font-size:11px}.l1{flex:1.9}
}
@media(prefers-reduced-motion:reduce){.layer,.lc{transition:none}}

/* ---------- inner page hero ---------- */
.page-hero{padding:56px 0 64px !important; min-height:0 !important}
.page-hero .ph-in{max-width:980px}
.page-hero h1{font-size:clamp(42px,6.4vw,80px); margin:18px 0 18px}
.page-hero .lede{max-width:640px; font-size:clamp(17px,1.6vw,20px)}
.ph-cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px}
@media(max-width:760px){.page-hero{padding:28px 0 40px !important}.ph-cta .btn{flex:1 1 100%}}

/* ---------- homepage: "and there's more" flavour cards ---------- */
.ex-head{max-width:720px; margin-bottom:34px}
.ex-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.ex-card{display:flex; flex-direction:column; gap:10px; padding:22px 20px 20px; border:2px solid var(--espresso); border-radius:18px; box-shadow:5px 5px 0 var(--espresso);
  color:var(--espresso); text-decoration:none; transition:transform .25s var(--pop), box-shadow .25s var(--pop); min-height:250px}
.ex-card:hover{transform:translate(-3px,-3px) rotate(-.5deg); box-shadow:8px 8px 0 var(--espresso)}
.ex-card .ex-k{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.8}
.ex-card b{font-family:var(--display); font-weight:400; font-size:24px; line-height:1.05; letter-spacing:-.02em}
.ex-card span:not(.ex-k){font-size:15.5px; line-height:1.45}
.ex-card i{font-style:normal; font-weight:700; margin-top:auto}
.ex-pist{background:var(--pistachio)}.ex-red{background:var(--redvelvet); color:var(--crema)}.ex-latte{background:#C9A27C}.ex-car{background:#D99A4E}
.ex-more{margin-top:30px}
@media(max-width:1000px){.ex-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ex-grid{grid-template-columns:1fr}.ex-card{min-height:0}}

/* ---------- homepage: pricing teaser (tiramisu band) ---------- */
.ptease{background:var(--tiramisu) !important; color:var(--crema); border-block:2px solid var(--espresso);
  background-image:radial-gradient(rgba(243,233,218,.10) 1.1px,transparent 1.2px) !important; background-size:24px 24px !important}
.ptease .pt-in{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.ptease h2{color:var(--crema); max-width:16ch}
.ptease h2 em{color:var(--crema) !important; background:linear-gradient(transparent 60%, rgba(217,154,78,.75) 60%, rgba(217,154,78,.75) 92%, transparent 92%) !important}
.ptease .lede{color:rgba(243,233,218,.88); max-width:560px}
.ptease .eyebrow{color:var(--crema)}.ptease .eyebrow::before{background:var(--crema)}
.pt-cta{display:flex; gap:14px; flex-wrap:wrap}
.ptease .btn-light{background:var(--crema); color:var(--espresso); border-color:var(--espresso); box-shadow:4px 4px 0 var(--espresso)}
.faq-more{text-align:center; margin-top:28px}

/* ---------- footer links + final wordmark ---------- */
.foot-links{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14px}
.foot-links a{color:inherit; text-decoration:none; font-weight:500}
.foot-links a:hover{text-decoration:underline; text-underline-offset:3px}
.final-wmk{display:block; margin-bottom:14px}.final-wmk .wmk{font-size:34px; color:var(--crema)}
@media(max-width:760px){.foot-in{flex-direction:column; gap:12px; text-align:center; align-items:center}.foot-links{justify-content:center}}

/* =====================================================================
   STRUCTURE REFINEMENTS (Oct 12, b)
   ===================================================================== */
/* skip link + visible focus */
.skip{position:absolute; left:12px; top:-60px; z-index:400; background:var(--espresso); color:var(--crema); padding:10px 16px; border-radius:10px; font-weight:600; transition:top .2s}
.skip:focus{top:12px}
:where(a,button,summary):focus-visible{outline:3px solid #B07F55; outline-offset:3px; border-radius:8px}
section[id],header[id]{scroll-margin-top:84px}

/* Features: sticky "on this page" chips with scrollspy */
.subnav{position:sticky; top:74px; z-index:55; display:flex; justify-content:center; padding:10px 16px; pointer-events:none}
.sn-in{pointer-events:auto; display:flex; gap:4px; padding:5px; max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,253,248,.82); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  border:2px solid var(--espresso); border-radius:999px; box-shadow:3px 3px 0 var(--espresso)}
.sn-in::-webkit-scrollbar{display:none}
.sn-in a{flex:none; padding:8px 15px; border-radius:999px; font-weight:600; font-size:14.5px; color:var(--espresso); text-decoration:none; white-space:nowrap; transition:background .2s, color .2s}
.sn-in a:hover{background:var(--crema)}
.sn-in a.on{background:var(--espresso); color:var(--crema)}
.page-hero + .subnav{margin-top:-28px}
body:has(.subnav) section[id]{scroll-margin-top:150px}
@media(max-width:760px){
  .subnav{top:62px; padding:8px 0; justify-content:flex-start}
  .sn-in{border-radius:0; border-inline:0; box-shadow:0 3px 0 var(--espresso); width:100%; padding:6px 12px}
  .sn-in a{font-size:13.5px; padding:7px 13px}
  .page-hero + .subnav{margin-top:0}
  body:has(.subnav) section[id]{scroll-margin-top:124px}
}

/* "Keep exploring": the next step after each inner page */
.nextup{padding:64px 0 !important}
.nx-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
.nx-card{position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 64px 24px 26px; border:2px solid var(--espresso); border-radius:20px;
  box-shadow:5px 5px 0 var(--espresso); color:var(--espresso); text-decoration:none; transition:transform .25s var(--pop), box-shadow .25s var(--pop)}
.nx-card:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--espresso)}
.nx-k{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.8}
.nx-card b{font-family:var(--display); font-weight:400; font-size:clamp(26px,3vw,36px); letter-spacing:-.025em; line-height:1}
.nx-d{font-size:16px; line-height:1.45; max-width:40ch}
.nx-card i{position:absolute; right:24px; top:50%; transform:translateY(-50%); font-style:normal; font-family:var(--display); font-size:34px; transition:transform .3s var(--pop)}
.nx-card:hover i{transform:translate(6px,-50%)}
.nx-car{background:#D99A4E}.nx-red{background:var(--redvelvet); color:var(--crema)}.nx-pist{background:var(--pistachio)}.nx-tira{background:var(--tiramisu); color:var(--crema)}
@media(max-width:760px){.nx-grid{grid-template-columns:1fr; gap:14px}.nextup{padding:48px 0 !important}.nx-card{padding:22px 56px 20px 20px}}

/* Footer: real site footer, espresso, continuing from the final CTA */
.foot2{background:var(--espresso) !important; color:rgba(243,233,218,.82); padding:56px 0 28px !important; border-top:1px solid rgba(243,233,218,.14)}
.foot2 .wmk{color:var(--crema); font-size:30px}
.foot2 .wmk-i::before,.foot2 .wmk-i::after{background:rgba(243,233,218,.38)}
.f2-top{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.f2-brand p{margin:14px 0 20px; max-width:34ch; line-height:1.5; font-size:15px}
.f2-brand .btn-primary{box-shadow:4px 4px 0 rgba(243,233,218,.35); border-color:var(--crema)}
.f2-col{display:flex; flex-direction:column; gap:10px}
.f2-col h4{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#C9A27C; margin:4px 0 6px}
.f2-col a{color:var(--crema); text-decoration:none; font-size:15px; width:fit-content}
.f2-col a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-color:#C9A27C}
.f2-bot{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding-top:20px; border-top:1px solid rgba(243,233,218,.14); font-size:13.5px}
.foot2 .a24{color:var(--crema)}
@media(max-width:900px){.f2-top{grid-template-columns:1fr 1fr}.f2-brand{grid-column:1/-1}}
@media(max-width:760px){.foot2{padding:44px 0 calc(28px + 76px) !important}.f2-top{gap:28px}.f2-bot{flex-direction:column}}

/* Phones: card stacks become swipeable rails (peek + dots) instead of 2,000px towers */
@media(max-width:760px){
  .section{padding:56px 0}
  .rail{display:flex !important; grid-template-columns:none !important; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px !important;
    margin-inline:-24px; padding:6px 24px 16px !important; scroll-padding-inline:24px; scrollbar-width:none; overscroll-behavior-x:contain}
  .rail::-webkit-scrollbar{display:none}
  .rail > *{flex:0 0 84%; scroll-snap-align:start; min-width:0}
  .race.rail > *{flex-basis:90%}
  .rail-dots{display:flex; justify-content:center; gap:6px; margin-top:4px}
  .rail-dots i{width:7px; height:7px; border-radius:50%; background:rgba(43,26,18,.22); transition:width .25s var(--pop), background .2s}
  .rail-dots i.on{width:20px; border-radius:6px; background:var(--espresso)}
  .speed .rail-dots i{background:rgba(43,26,18,.3)}.speed .rail-dots i.on{background:var(--espresso)}
}
/* body must not be a scroll container, or sticky nav/subnav silently stop sticking */
body{overflow-x:clip !important; overflow-y:visible !important}
/* once scrolled, the bar gets a frosted cream backing so the logo never sits on top of copy */
.nav{transition:background .25s ease, box-shadow .25s ease}
.nav.scrolled{background:rgba(255,253,248,.86) !important; -webkit-backdrop-filter:blur(14px) saturate(1.3) !important; backdrop-filter:blur(14px) saturate(1.3) !important;
  box-shadow:0 2px 0 var(--espresso) !important}
.nav.scrolled .nav-links{box-shadow:2px 2px 0 var(--espresso)}
body:has(.subnav) .nav.scrolled{box-shadow:none !important}
/* Features chip row: full-width frosted strip tucked right under the top bar, so no copy shows in between */
.subnav{top:var(--navh,58px); background:rgba(255,253,248,.88); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  padding:6px 16px 10px; pointer-events:auto; box-shadow:0 2px 0 var(--espresso)}
.page-hero + .subnav{margin-top:0}
@media(max-width:760px){.subnav{padding:0; box-shadow:none}}

/* =====================================================================
   ADD-ONS AS FEATURES (Oct 12): "Included in every plan" label,
   #extras topping cards with mini mocks, in-section callouts,
   pricing "See how it works" links, homepage line.
   ===================================================================== */
.grp-label{background:var(--tiramisu); padding:26px 0 0}
.grp-label span{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:700; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--espresso); background:var(--card); border:2px solid var(--espresso);
  border-radius:100px; padding:6px 13px; box-shadow:3px 3px 0 var(--espresso)}
.grp-label span::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--pistachio); border:1.5px solid var(--espresso)}
.grp-label + #customer-book{padding-top:56px}

.extras{background-color:var(--crema) !important; background-image:radial-gradient(rgba(43,26,18,.09) 1.1px,transparent 1.2px);
  background-size:24px 24px; border-block:2px solid var(--espresso)}
.ao-head{text-align:center; max-width:760px; margin:0 auto}
.ao-head .lede{margin-left:auto; margin-right:auto}
.ao-head .eyebrow::before{background:var(--caramel) !important}
.ao-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:52px}
.ao{background:var(--card); border:2px solid var(--espresso); border-radius:20px; box-shadow:5px 5px 0 var(--espresso);
  display:flex; flex-direction:column; overflow:hidden; scroll-margin-top:130px;
  transition:transform .25s var(--pop,ease), box-shadow .25s ease}
.ao:hover{transform:translate(-3px,-3px) rotate(-.4deg); box-shadow:8px 8px 0 var(--espresso)}
.ao:nth-child(even):hover{transform:translate(-3px,-3px) rotate(.4deg)}
.ao:target{box-shadow:8px 8px 0 var(--caramel); outline:3px solid var(--caramel); outline-offset:3px}
.ao-vis{background:#F7EFE3; border-bottom:2px solid var(--espresso); padding:16px 14px; min-height:172px;
  display:flex; flex-direction:column; justify-content:center; gap:8px}
.ao:nth-child(4n+2) .ao-vis{background:#EEF2E3}
.ao:nth-child(4n+3) .ao-vis{background:#F6E6D6}
.ao:nth-child(4n+4) .ao-vis{background:#F3E9DA}
.ao-txt{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.ao .tag-price{align-self:flex-start; font-size:13px; padding:4px 10px; border-radius:100px; background:var(--caramel);
  color:var(--espresso); border:1.5px solid var(--espresso); margin-bottom:10px; text-transform:none; letter-spacing:0}
.ao .tag-price small{font-size:11px; opacity:.8; margin-left:1px}
.ao h3{font-size:17.5px; line-height:1.2}
.ao p{margin:7px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-2)}

/* mini mocks */
.mb{font-size:12.5px; line-height:1.35; padding:8px 11px; border-radius:14px; max-width:90%}
.mb.in{background:var(--card); border:1.5px solid #E2D5C3; border-bottom-left-radius:5px; align-self:flex-start}
.mb.out{background:var(--espresso); color:var(--crema); border-bottom-right-radius:5px; align-self:flex-end}
.mrow{display:flex; flex-wrap:wrap; gap:6px}
.mchip{font-family:var(--mono); font-size:10.5px; font-weight:700; padding:4px 8px; border-radius:100px; background:var(--card);
  border:1.5px solid var(--espresso); color:var(--espresso); align-self:flex-start; white-space:nowrap}
.mchip.ok{background:var(--pistachio)}
.mchip.ok::before{content:"✓ "}
.mchip.on{background:var(--tiramisu); color:var(--crema)}
.mstars{align-self:flex-start; color:var(--caramel); font-size:18px; letter-spacing:2px; -webkit-text-stroke:.6px var(--espresso);
  display:flex; align-items:center; gap:8px}
.mstars span{font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0; color:var(--espresso); -webkit-text-stroke:0}
.mbrowser{background:var(--card); border:1.5px solid var(--espresso); border-radius:10px; overflow:hidden; position:relative}
.mbar{display:flex; align-items:center; gap:4px; padding:5px 8px; border-bottom:1.5px solid var(--espresso); background:var(--crema)}
.mbar i{width:6px; height:6px; border-radius:50%; background:#CDBFAE}
.mbar span{font-family:var(--mono); font-size:9.5px; margin-left:6px; color:var(--ink-2)}
.mfeed{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; padding:7px 7px 30px}
.mfeed b{aspect-ratio:1; border-radius:4px; background:linear-gradient(135deg,#E9C9A3,#B07F55)}
.mfeed b:nth-child(2n){background:linear-gradient(135deg,#F3E9DA,#C9A27C)}
.mfeed b:nth-child(3n){background:linear-gradient(135deg,#D9E3C2,#B5C98E)}
.mchat{position:absolute; right:7px; bottom:6px; font-size:10px; font-weight:700; background:var(--tiramisu); color:var(--crema);
  padding:4px 9px; border-radius:100px; border:1.5px solid var(--espresso)}
.mweek{display:grid; grid-template-columns:repeat(4,1fr); gap:5px}
.mweek span{background:var(--card); border:1.5px solid var(--espresso); border-radius:9px; text-align:center; padding:5px 0 6px;
  font-family:var(--mono); font-size:10px; color:var(--ink-2); display:flex; flex-direction:column}
.mweek b{font-family:var(--display); font-weight:400; font-size:17px; color:var(--espresso); line-height:1.1}
.mweek .full{background:var(--redvelvet); color:#F3E9DA}
.mweek .full b{color:#F3E9DA}
.mweek em{font-style:normal; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em}
.mlink{font-family:var(--mono); font-size:11px; font-weight:700; color:var(--espresso); text-decoration:underline; text-underline-offset:3px; align-self:flex-start}

.ao-bundle{margin:40px auto 0; text-align:center; font-size:16px; color:var(--ink-2); max-width:640px}
.ao-bundle b{color:var(--espresso)}
.ao-bundle a{font-weight:700; color:var(--espresso); text-decoration:underline; text-decoration-color:var(--caramel); text-decoration-thickness:2px; text-underline-offset:4px; margin-left:4px; white-space:nowrap}

/* callout inside a feature section */
.ao-call{display:flex; align-items:center; gap:16px; margin:44px auto 0; max-width:820px; background:var(--card); color:var(--espresso);
  border:2px solid var(--espresso); border-radius:16px; box-shadow:4px 4px 0 var(--espresso); padding:14px 18px; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease}
.ao-call:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--espresso)}
.ao-k{flex:none; font-family:var(--mono); font-weight:700; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--caramel); border:1.5px solid var(--espresso); border-radius:100px; padding:4px 9px}
.ao-t{flex:1; display:flex; flex-direction:column; gap:2px; min-width:0}
.ao-t b{font-size:15.5px}
.ao-t span{font-size:14px; color:var(--ink-2); line-height:1.4}
.ao-call i{flex:none; font-style:normal; font-family:var(--mono); font-weight:700; font-size:13px; white-space:nowrap}

/* pricing + homepage links */
.ao-more{display:inline-block; margin-top:12px; font-family:var(--mono); font-weight:700; font-size:12px; color:var(--espresso);
  text-decoration:underline; text-decoration-color:var(--caramel); text-decoration-thickness:2px; text-underline-offset:4px}
.addon .ao-more{margin-top:auto; padding-top:12px}
.ex-more{display:flex; flex-direction:column; align-items:center; gap:18px}
.ex-addons{font-size:15px; font-weight:600; color:var(--espresso); text-decoration:underline; text-decoration-color:var(--caramel);
  text-decoration-thickness:2px; text-underline-offset:5px; text-align:center}

@media(max-width:1080px){.ao-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .ao-grid{gap:16px; margin-top:36px}
  .ao-call{flex-wrap:wrap; gap:10px 12px; padding:14px 16px}
  .ao-t{flex-basis:100%; order:2}
  .ao-call i{order:1; margin-left:auto}
  .grp-label{padding-top:20px}
}
@media(max-width:560px){.ao-grid{grid-template-columns:1fr} .ao-vis{min-height:0}}
@media(max-width:760px){.ao-grid.rail{padding-bottom:10px} .ao-grid.rail .ao-vis{height:178px; min-height:0}}
.ao-call,.ao-call *{text-decoration:none !important}
.mfeed b{aspect-ratio:1.25}
.ao-setup{margin:44px auto 0; max-width:760px; display:flex; align-items:center; justify-content:space-between; gap:20px 28px;
  background:var(--card); border:2px solid var(--espresso); border-radius:20px; box-shadow:5px 5px 0 var(--espresso); padding:22px 26px}
.ao-setup p{margin:0; font-size:16px; line-height:1.5; color:var(--ink-2)}
.ao-setup b{color:var(--espresso); display:block; font-size:17px}
.ao-setup .btn{flex:none}
.ao-call i{text-decoration:underline !important; text-decoration-color:var(--caramel) !important; text-decoration-thickness:2px !important; text-underline-offset:4px}
@media(max-width:760px){.ao-setup{flex-direction:column; align-items:stretch; text-align:center; padding:20px}}
.bundle-price .btn{min-width:220px}
.bundle-price p{color:rgba(243,233,218,.75)}
/* 7 add-ons: the last card (website) spans two columns on wide screens */
@media(min-width:1081px){.ao-grid > .ao:nth-child(7):last-child{grid-column:span 2}
  .ao-grid > .ao:nth-child(7):last-child{flex-direction:row}
  .ao-grid > .ao:nth-child(7):last-child .ao-vis{flex:1.1; border-bottom:0; border-right:2px solid var(--espresso)}
  .ao-grid > .ao:nth-child(7):last-child .ao-txt{flex:1; justify-content:center}}
@media(min-width:1001px){.addons > .addon:nth-child(7):last-child{grid-column:span 2}}

/* Hero headline (Oct 13): "DMs cost you evenings. / Slow replies cost you customers. / Get both back." */
.hero h1.h3s{font-size:clamp(36px,4.3vw,60px); line-height:1.02}
.hero h1.h3s .hl1{display:block}
.hero h1.h3s .l2::before{content:none}
@media(max-width:760px){.hero h1.h3s{font-size:clamp(30px,8.4vw,40px)}}

/* =====================================================================
   MOTION PACK (Oct 13): 2026 motion, all respects reduced motion
   1 crisp hero words (no blur)   2 page-to-page view transitions
   3 flavour bands expand in on scroll   4 section headlines rise word by word
   5 3D tilt on cards (mouse only)   6 shine sweep on main buttons
   7 count-up stats
   ===================================================================== */
/* 1. hero words rise without blur, so text stays sharp once settled */
@keyframes kwIn{from{opacity:0; transform:translateY(.55em) rotate(4deg)} to{opacity:1; transform:none}}
.kin .kw{filter:none !important}
.kin-done .kw{animation:none !important; opacity:1 !important; transform:none !important}

@media (prefers-reduced-motion:no-preference){
  /* 2. smooth page-to-page transitions (Chrome, Edge, Safari 18.2+) */
  @view-transition{navigation:auto}
  .nav{view-transition-name:site-nav}
  ::view-transition-old(root){animation:vtOut .22s ease-in both}
  ::view-transition-new(root){animation:vtIn .45s cubic-bezier(.2,.75,.2,1) both}
  @keyframes vtOut{to{opacity:0; transform:translateY(-8px)}}
  @keyframes vtIn{from{opacity:0; transform:translateY(18px)}}

  /* 3. coloured flavour bands open up as they scroll in */
  @supports (animation-timeline:view()){
    #customer-book,#assistant,#availability,.speed,.ptease,.extras{
      animation:bandIn linear backwards; animation-timeline:view(); animation-range:entry 0% entry 55%}
    @keyframes bandIn{from{clip-path:inset(0 4% 0 4% round 36px)}to{clip-path:inset(0 0 0 0 round 0)}}
  }

  /* 4. section headlines: words rise in one by one */
  .h2k .w2{display:inline-block; opacity:0; transform:translateY(.45em); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1.15); transition-delay:calc(var(--i) * 45ms)}
  .h2k.in2 .w2{opacity:1; transform:none}

  /* 6. shine sweep across the main buttons */
  .btn-primary,.btn-light{position:relative; overflow:hidden; isolation:isolate}
  .btn-primary::after,.btn-light::after{content:""; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg,transparent 35%,rgba(255,253,248,.38) 50%,transparent 65%); transform:translateX(-110%)}
  .btn-primary:hover::after,.btn-light:hover::after{transform:translateX(110%); transition:transform .75s cubic-bezier(.2,.7,.2,1)}
  .hero .btn-primary::after{animation:shineOnce 1.1s 1.6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes shineOnce{from{transform:translateX(-110%)}to{transform:translateX(110%)}}

  /* 5. tilt (set by script) */
  .tilt{transition:transform .18s ease-out, box-shadow .25s ease !important; will-change:transform}
}
/* website mock: a real little site, not just a feed (Oct 13) */
.msite{padding:7px 8px 30px}
.mnav{display:flex; align-items:center; gap:7px; font-size:8.5px; color:var(--ink-2); padding-bottom:6px; border-bottom:1px solid #EADFD0}
.mnav em{font-style:normal; font-family:"Fraunces",serif; font-weight:900; font-size:10px; color:var(--espresso); margin-right:auto}
.mhero{margin:7px 0; padding:9px 9px 10px; border-radius:6px; background:linear-gradient(135deg,#F3E9DA,#E2C49F)}
.mhero b{display:block; font-family:var(--display); font-weight:400; font-size:11px; line-height:1.15; color:var(--espresso); max-width:70%}
.mhero span{display:block; width:46px; height:9px; margin-top:6px; border-radius:4px; background:var(--tiramisu)}
.msite .mfeed{padding:0; grid-template-columns:repeat(4,1fr)}
.ao-note{display:inline-block; margin-top:4px; font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--espresso); background:var(--crema); border:1.5px solid var(--espresso); border-radius:100px; padding:2px 8px}
@media(max-width:760px){.ao-grid.rail .ao-vis{height:auto; min-height:178px}}