/* Revbound v2: "the week view". The page is laid on a calendar: hour lines, a moving
   now-line, time-stamped sections. Violet = action, yellow = highlight/deal, mint = booked. */
:root{
  color-scheme:light;
  /* Brand tokens, taken from the app (kg-crm/static/css/app.css) and the Revbound mark. */
  --ink:#09090B;--ink-2:#18181B;--ink-3:#27272A;--ink-soft:#3F3F46;--ink-mute:#71717B;
  --paper:#FFFFFF;--lav:#FAFAFA;--lav-2:#F4F4F5;--lav-3:#E4E4E7;
  --violet:#09090B;--violet-2:#52525B;--violet-ink:#09090B;
  --sun:#22C55E;--sun-2:#4ADE80;--sun-ink:#052E16;
  --mint:#22C55E;--mint-tint:#DCFCE7;--mint-ink:#15803D;
  --coral:#F05100;
  --display:'Bricolage Grotesque','Inter',system-ui,sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,monospace;
  --r:22px;--r-lg:32px;--wrap:1240px;--ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
::selection{background:var(--sun);color:var(--ink)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 16px}}
.sr,.mq-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);margin:0;font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance;font-optical-sizing:auto}
h1{font-size:clamp(46px,7.6vw,108px)}
h2{font-size:clamp(36px,5.4vw,72px)}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.15}
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.55;color:var(--ink-soft);max-width:600px;text-wrap:pretty}
.stamp{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--mono);color:var(--violet-ink)}
.stamp b{font-weight:600;background:var(--lav-2);padding:6px 9px;border-radius:8px;color:var(--violet-ink)}
.stamp.on-dark{color:#D4D4D8}.stamp.on-dark b{background:rgba(255,255,255,.08);color:#fff}
.it{font-style:italic;font-weight:500;color:var(--violet)}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(36px) scale(.985);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;border:1.5px solid transparent;
  font:600 15px/1 var(--sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),box-shadow .25s,background .2s,color .2s}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-violet{background:var(--violet);color:#fff;box-shadow:0 10px 24px -10px rgba(9,9,11,.7)}
.btn-violet:hover{background:var(--violet-ink);transform:translateY(-2px)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn-sun{background:var(--sun);color:var(--ink)}
.btn-sun:hover{background:var(--sun-2);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--lav-3)}
.btn-line:hover{border-color:var(--violet);color:var(--violet)}
.btn-line.light{color:#fff;border-color:rgba(255,255,255,.3)}
.btn-line.light:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.06)}
.btn-lg{height:58px;padding:0 28px;font-size:16.5px}
.btn-block{width:100%}

/* ---------- lifetime strip ---------- */
.ltd-strip{display:flex;align-items:center;justify-content:center;gap:16px;min-height:44px;padding:8px 16px;background:var(--sun);color:var(--ink);text-decoration:none;font-size:14px;position:relative;overflow:hidden}
.ltd-strip::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.22) 14px 28px);animation:stripes 3s linear infinite}
@keyframes stripes{to{background-position:40px 0}}
.ltd-strip>*{position:relative}
.ltd-badge{font:700 11px/24px var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--sun)}
.ltd-copy b{font-weight:700}
.ltd-timer{display:inline-flex;gap:4px;align-items:center;font:600 13px var(--mono)}
.ltd-timer i{font-style:normal;background:var(--ink);color:#fff;border-radius:7px;padding:3px 6px;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}
.ltd-cta{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.ltd-cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ltd-over .ltd-strip{display:none}
@media (max-width:760px){.ltd-hide-s,.ltd-cta{display:none}.ltd-strip{gap:10px;font-size:13px}}
@media (max-width:400px){.ltd-hide-xs{display:none}.ltd-badge{font-size:10px;padding:0 8px}.ltd-timer i{min-width:24px;padding:3px 4px}.ltd-strip{gap:8px;padding:8px 10px}}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;padding:12px 0;transition:background .3s,box-shadow .3s}
.hdr.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--lav-2)}
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.03em}
.logo .lm{width:34px;height:34px;border-radius:11px;background:var(--violet);display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(9,9,11,.8)}
.logo .lm svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.nav{display:flex;gap:2px;padding:5px;border-radius:999px;background:var(--lav);border:1px solid var(--lav-2)}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-soft);padding:9px 16px;border-radius:999px;transition:background .2s,color .2s}
.nav a:hover{color:var(--ink);background:#fff}
.nav a[aria-current]{background:#fff;color:var(--violet);box-shadow:0 1px 3px rgba(9,9,11,.1)}
.hdr-cta{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.hdr-cta .btn{height:44px;padding:0 18px;font-size:14.5px}
.login{font-weight:600;font-size:14.5px;text-decoration:none;padding:10px 14px;border-radius:999px}
.login:hover{background:var(--lav)}
.menu-btn{display:none;width:46px;height:46px;border-radius:14px;border:1px solid var(--lav-2);background:#fff;cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);position:relative;transition:transform .25s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-6px}.menu-btn span::after{top:6px}
.menu-open .menu-btn span{background:transparent}
.menu-open .menu-btn span::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span::after{transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
@media (max-width:960px){
  .hdr .wrap{grid-template-columns:1fr auto}
  .nav,.hdr-cta .login,.hdr-cta .btn{display:none}
  .menu-btn{display:grid}
  .mnav{display:flex;flex-direction:column;position:fixed;left:0;right:0;top:var(--mnav-top,70px);z-index:49;background:#fff;padding:8px 16px 20px;
    border-bottom:1px solid var(--lav-2);box-shadow:0 30px 60px -30px rgba(9,9,11,.4);opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .25s var(--ease),transform .25s var(--ease);max-height:calc(100vh - var(--mnav-top,70px));overflow:auto}
  .mnav a{padding:15px 6px;font:600 20px var(--display);letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid var(--lav-2)}
  .mnav .btn{margin-top:14px;font:600 16px var(--sans);border:0}
  .menu-open .mnav{opacity:1;transform:none;pointer-events:auto}
}

/* ---------- calendar-grid background (the page's texture) ---------- */
.grid-bg{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;
  background-image:linear-gradient(var(--lav-2) 1px,transparent 1px),linear-gradient(90deg,var(--lav-2) 1px,transparent 1px);
  background-size:100% 72px,calc(100% / 7) 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.grid-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,transparent calc(100% / 7 * 2),rgba(9,9,11,.05) calc(100% / 7 * 2),rgba(9,9,11,.05) calc(100% / 7 * 3),transparent calc(100% / 7 * 3))}
.now{position:absolute;left:0;right:0;height:2px;background:var(--violet);top:18%;opacity:.55;animation:now 16s linear infinite}
.now::before{content:"";position:absolute;left:calc(100% / 7 * 2 - 6px);top:-5px;width:12px;height:12px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 6px rgba(9,9,11,.15)}
.now::after{content:attr(data-t);position:absolute;left:calc(100% / 7 * 2 + 12px);top:-11px;font:600 11px var(--mono);color:var(--violet);background:#fff;padding:3px 7px;border-radius:6px;border:1px solid var(--lav-3)}
@keyframes now{from{top:8%}to{top:92%}}
.grid-bg.dark{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);-webkit-mask-image:none;mask-image:none}
.grid-bg.dark::before{display:none}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;padding:56px 0 88px}
.hero-in{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero h1{margin:22px 0 24px}
.hero h1 .slot{display:inline-block;position:relative;padding:0 .12em;margin:0 -.04em;color:var(--ink);z-index:0}
.hero h1 .slot::before{content:"";position:absolute;inset:.08em 0 .02em;border-radius:.14em;background:var(--sun);z-index:-1;transform:rotate(-1.5deg) scaleX(0);transform-origin:left;animation:slotIn .9s var(--ease) .5s forwards}
@keyframes slotIn{to{transform:rotate(-1.5deg) scaleX(1)}}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.hero-meta{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--ink-mute);font-size:14px;flex-wrap:wrap}
.hero-meta .logos{display:flex}
.hero-meta .logos img{width:34px;height:34px;border-radius:50%;border:3px solid #fff;background:#fff;object-fit:contain;padding:4px;margin-left:-8px;box-shadow:0 2px 6px rgba(9,9,11,.12)}
.hero-meta .logos img:first-child{margin-left:0}
@media (max-width:1000px){.hero-in{grid-template-columns:1fr;gap:48px}}

/* signature: the live week */
.week{position:relative;background:#fff;border-radius:var(--r-lg);border:1px solid var(--lav-2);padding:20px;
  box-shadow:0 1px 2px rgba(9,9,11,.05),0 40px 80px -40px rgba(9,9,11,.45);transform:rotate(1.2deg);transition:transform .6s var(--ease)}
.week:hover{transform:rotate(0)}
.week-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.week-h b{font:700 18px var(--display);letter-spacing:-.02em}
.week-h small{display:block;font:500 12px var(--mono);color:var(--ink-mute);margin-top:2px}
.counter{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--mint-tint);color:var(--mint-ink);font:600 13px var(--sans);white-space:nowrap}
.counter i{font:700 15px var(--mono);font-style:normal;font-variant-numeric:tabular-nums}
.counter.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.12)}}
.cal{display:grid;grid-template-columns:44px repeat(5,1fr);position:relative}
.cal .dh{font:600 11.5px var(--mono);color:var(--ink-mute);text-align:center;padding-bottom:8px}
.cal .dh.today{color:var(--violet)}
.cal-body{grid-column:1/-1;display:grid;grid-template-columns:44px repeat(5,1fr);position:relative;height:340px;border-top:1px solid var(--lav-2)}
.cal-hours{display:grid;grid-template-rows:repeat(8,1fr)}
.cal-hours span{font:500 10.5px var(--mono);color:var(--ink-mute);transform:translateY(-7px)}
.cal-col{position:relative;border-left:1px solid var(--lav-2);background-image:linear-gradient(var(--lav-2) 1px,transparent 1px);background-size:100% calc(100% / 8)}
.ev{position:absolute;left:4px;right:4px;border-radius:9px;padding:6px 8px;font-size:11.5px;line-height:1.25;overflow:hidden}
.ev b{display:block;font-weight:600;font-size:11.5px}
.ev span{opacity:.75}
.ev.busy{background:repeating-linear-gradient(-45deg,var(--lav) 0 6px,#fff 6px 12px);border:1px solid var(--lav-2);color:var(--ink-mute)}
.ev.new{background:var(--violet);color:#fff;box-shadow:0 10px 20px -10px rgba(9,9,11,.9);transform:scale(.4);opacity:0;animation:drop .6s cubic-bezier(.34,1.56,.64,1) forwards}
.ev.new.settled{background:var(--mint-tint);color:var(--mint-ink);box-shadow:inset 3px 0 0 var(--mint);transition:background .6s,color .6s,box-shadow .6s}
@keyframes drop{to{transform:none;opacity:1}}
.ghost{position:absolute;left:4px;right:4px;border-radius:9px;border:2px dashed var(--violet);background:rgba(9,9,11,.06);opacity:0;transition:opacity .3s}
.ghost.on{opacity:1;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{background:rgba(9,9,11,.14)}}
.inc{position:absolute;left:-28px;top:-26px;z-index:2;display:flex;gap:10px;align-items:flex-start;max-width:310px;padding:12px 14px;border-radius:18px;background:var(--ink);color:#fff;
  box-shadow:0 20px 40px -18px rgba(9,9,11,.7);opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.inc.on{opacity:1;transform:none}
.inc .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font:700 12px var(--sans)}
.inc b{display:block;font-size:13px}
.inc p{margin:2px 0 0;font-size:13.5px;color:#D4D4D8;line-height:1.4}
.inc .st{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font:600 11.5px var(--mono);color:var(--sun)}
.inc .st.ok{color:var(--mint)}
.week-f{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.week-f span{display:inline-flex;align-items:center;gap:6px;font:500 12px var(--sans);color:var(--ink-mute)}
.week-f i{width:10px;height:10px;border-radius:3px;display:inline-block}
@media (max-width:1000px){.week{transform:none}.inc{left:12px;top:-30px}}
@media (max-width:520px){.week{padding:14px;border-radius:24px}.cal-body{height:300px}.cal,.cal-body{grid-template-columns:30px repeat(5,1fr)}.ev{padding:4px 5px;font-size:10px}.ev b{font-size:10px}.ev span{display:none}.inc{max-width:calc(100% - 24px)}}

/* ---------- integrations: labelled lanes ---------- */
.lanes{padding:20px 0 40px}
.lane{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:24px;padding:20px 0;border-top:1px solid var(--lav-2)}
.lane:last-child{border-bottom:1px solid var(--lav-2)}
.lane h4{margin:0;font:600 12.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.lane h4 b{display:block;font:700 22px var(--display);letter-spacing:-.02em;text-transform:none;color:var(--ink);margin-top:4px}
.tiles{display:flex;flex-wrap:wrap;gap:10px}
.tl{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:16px;background:var(--lav);font-weight:600;font-size:15px;
  transition:transform .3s var(--ease),background .3s,box-shadow .3s}
.tl:hover{transform:translateY(-3px) rotate(-1deg);background:#fff;box-shadow:0 14px 28px -16px rgba(9,9,11,.5)}
.tl img{width:36px;height:36px;padding:7px;border-radius:11px;background:#fff;object-fit:contain}
.tl img.mono{filter:brightness(0)}
@media (max-width:760px){.lane{grid-template-columns:1fr;gap:14px}.tl{height:46px;font-size:14px}.tl img{width:32px;height:32px}}

/* ---------- section heads ---------- */
section{position:relative;padding:120px 0}
@media (max-width:760px){section{padding:80px 0}}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head h2{margin-top:16px}
.head .lead{justify-self:end}
@media (max-width:900px){.head{grid-template-columns:1fr;gap:18px}.head .lead{justify-self:start}}

/* ---------- the tour: pinned horizontal scroll ---------- */
.tour{padding:0;background:var(--lav)}
.tour-pin{height:calc(var(--n,6) * 85vh)}
.tour-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.tour-top{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:36px}
.tour-top h2{max-width:720px}
.tour-prog{flex:none;width:200px;height:4px;border-radius:4px;background:var(--lav-3);overflow:hidden}
.tour-prog i{display:block;height:100%;width:100%;background:var(--violet);transform-origin:left;transform:scaleX(0)}
.track{display:flex;gap:24px;padding-left:max(28px,calc((100vw - var(--wrap)) / 2 + 28px));will-change:transform}
.panel{flex:none;width:min(560px,78vw);border-radius:var(--r-lg);background:#fff;border:1px solid var(--lav-2);padding:28px;display:flex;flex-direction:column;gap:18px;
  box-shadow:0 30px 60px -40px rgba(9,9,11,.4)}
.panel h3{font-size:28px}
.panel p{margin:0;color:var(--ink-soft);font-size:15.5px}
.panel .pv{background:var(--lav);border-radius:20px;padding:22px;min-height:250px;display:flex;flex-direction:column;justify-content:center}
.panel.hl{background:var(--violet);border-color:var(--violet);color:#fff}
.panel.hl p{color:#D4D4D8}
.panel.hl .stamp,.panel.hl .stamp b{color:#fff}
.panel.hl .stamp b{background:rgba(255,255,255,.16)}
.panel.hl .pv{background:rgba(255,255,255,.12)}
@media (max-width:900px){
  .tour{padding:80px 0}
  .tour-pin{height:auto}
  .tour-sticky{position:static;height:auto;overflow:visible}
  .tour-prog{display:none}
  .track{flex-direction:column;padding:0 16px;transform:none!important}
  .panel{width:100%;padding:22px}
  .panel h3{font-size:24px}
  .panel .pv{padding:16px;min-height:0}
}

/* ---------- booking rules (yellow block) ---------- */
.sunblock{background:var(--sun);border-radius:40px;margin:0 14px;overflow:hidden;isolation:isolate}
.sunblock .grid-bg{background-image:linear-gradient(rgba(9,9,11,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,11,.07) 1px,transparent 1px);-webkit-mask-image:none;mask-image:none}
.sunblock .grid-bg::before{display:none}
.sunblock .stamp b{background:rgba(9,9,11,.08);color:var(--ink)}
.sunblock .stamp{color:var(--ink)}
.sunblock .lead{color:#3F3F46}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}
.rule{background:#fff;border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 0 rgba(9,9,11,.9);border:2px solid var(--ink)}
.rule .if{font:600 12.5px var(--mono);color:var(--ink-mute);text-transform:uppercase;letter-spacing:.05em}
.rule .if em{font-style:normal;color:var(--ink);background:var(--lav-2);padding:2px 6px;border-radius:5px;text-transform:none;letter-spacing:0}
.rule .then{display:flex;align-items:center;gap:10px;font:700 22px var(--display);letter-spacing:-.02em}
.rule .then::before{content:"";flex:none;width:28px;height:28px;border-radius:9px;background:var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/16px no-repeat}
.rule p{margin:0;color:var(--ink-soft);font-size:15px}
.book-scenes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.book-scenes>div{background:#fff;border-radius:var(--r);padding:18px;border:2px solid var(--ink);box-shadow:0 2px 0 rgba(9,9,11,.9)}
@media (max-width:900px){.rules,.book-scenes{grid-template-columns:1fr}.sunblock{margin:0 8px;border-radius:28px}}

/* ---------- features: ink block ---------- */
.inkblock{background:var(--ink);color:#fff;border-radius:40px;margin:0 14px;overflow:hidden;isolation:isolate}
.inkblock .lead{color:#A1A1AA}
.inkblock h2{color:#fff}
.mason{columns:3;column-gap:18px}
.card{break-inside:avoid;margin-bottom:18px;border-radius:var(--r);background:var(--ink-2);border:1px solid var(--ink-3);padding:24px;transition:transform .4s var(--ease),border-color .3s}
.card:hover{transform:translateY(-4px);border-color:var(--violet-2)}
.card h3{color:#fff;font-size:21px}
.card p{margin:8px 0 18px;color:#A1A1AA;font-size:15px}
.card .pv{background:var(--lav);border-radius:16px;padding:16px}
.card.sun{background:var(--sun);border-color:var(--sun)}.card.sun h3{color:var(--ink)}.card.sun p{color:#3F3F46}.card.sun .pv{background:#fff}
.card.vio{background:var(--violet);border-color:var(--violet)}.card.vio p{color:#D4D4D8}.card.vio .pv{background:#fff}
@media (max-width:1000px){.mason{columns:2}}
@media (max-width:640px){.mason{columns:1}.inkblock{margin:0 8px;border-radius:28px}}

/* agency list */
.agency{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ag{padding:26px;border-radius:var(--r);background:var(--lav);transition:background .3s,transform .3s var(--ease)}
.ag:hover{background:var(--lav-2);transform:translateY(-3px)}
.ag .ai{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;margin-bottom:18px}
.ag .ai svg{width:22px;height:22px;stroke:var(--violet);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ag h3{font-size:20px;margin-bottom:8px}
.ag p{margin:0;color:var(--ink-soft);font-size:15px}
@media (max-width:900px){.agency{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.agency{grid-template-columns:1fr}}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:960px){.plans{grid-template-columns:1fr;max-width:500px;margin:0 auto}}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:32px;background:#fff;border:1.5px solid var(--lav-2);transition:transform .35s var(--ease),box-shadow .35s}
.plan:hover{transform:translateY(-5px);box-shadow:0 30px 60px -36px rgba(9,9,11,.5)}
.plan.pop{background:var(--violet);border-color:var(--violet);color:#fff}
.plan.pop .for,.plan.pop .price span,.plan.pop .price-note{color:#D4D4D8}
.plan.pop li{color:#fff}
.plan.pop li::before{background-color:#fff;-webkit-mask:none;mask:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")}
.plan.pop ul{border-color:rgba(255,255,255,.2)}
.badge{position:absolute;top:-14px;right:26px;background:var(--sun);color:var(--ink);font:700 11.5px/28px var(--mono);letter-spacing:.05em;text-transform:uppercase;padding:0 12px;border-radius:999px;transform:rotate(3deg)}
.plan h3{font-size:26px}
.plan .for{margin:8px 0 22px;color:var(--ink-mute);font-size:15px;min-height:46px}
.price{display:flex;align-items:baseline;gap:8px}
.price b{font:800 64px/1 var(--display);letter-spacing:-.05em}
.price span{font-size:15px;color:var(--ink-mute)}
.price-note{margin:8px 0 26px;font:500 13px var(--mono);color:var(--ink-mute)}
.plan ul{list-style:none;padding:24px 0 0;margin:24px 0 0;border-top:1.5px dashed var(--lav-3);display:grid;gap:12px;font-size:15px}
.plan li{display:flex;gap:12px}
.plan li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;background:var(--lav-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309090B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.plan li.no{color:var(--ink-mute)}
.plan li.no::before{background:var(--lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2371717B' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M8 8l8 8M16 8l-8 8'/%3E%3C/svg%3E") center/12px no-repeat}
.note{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:22px;padding:22px 28px;border-radius:var(--r);background:var(--sun)}
.note p{margin:0;font-size:15.5px}
@media (max-width:640px){.note .btn{width:100%}.plan{padding:26px 22px}.price b{font-size:54px}}
.tbl-wrap{overflow-x:auto;border-radius:var(--r);border:1.5px solid var(--lav-2);-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;min-width:600px;font-size:15px}
.cmp th,.cmp td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--lav-2)}
.cmp thead th{font:700 16px var(--display);background:var(--lav)}
.cmp tbody th{font-weight:500;color:var(--ink-soft)}
.cmp tr.grp th{background:var(--lav);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--violet-ink)}
.cmp tr:last-child>*{border-bottom:0}
.y{color:var(--mint-ink);font-weight:700}.n{color:var(--ink-mute)}

/* countdown boxes (lifetime page) */
.ltd-big{display:flex;flex-direction:column;gap:12px;margin-top:34px}
.ltd-big-l{margin:0;font:600 13px var(--mono);color:var(--violet-ink);text-transform:uppercase;letter-spacing:.05em}
.ltd-boxes{display:flex;gap:10px}
.ltd-boxes div{width:94px;padding:16px 0 12px;text-align:center;border-radius:20px;background:var(--sun);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.ltd-boxes i{display:block;font:800 36px/1 var(--display);font-style:normal;font-variant-numeric:tabular-nums}
.ltd-boxes span{display:block;font:600 11.5px var(--mono);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:420px){.ltd-boxes div{width:72px}.ltd-boxes i{font-size:28px}}
.ltd-over .ltd-boxes{opacity:.4}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq-wrap .head-side{position:sticky;top:110px}
@media (max-width:900px){.faq-wrap{grid-template-columns:1fr;gap:28px}.faq-wrap .head-side{position:static}}
.faq details{border-radius:20px;background:var(--lav);margin-bottom:10px;transition:background .3s}
.faq details[open]{background:var(--lav-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font:600 18px var(--display);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;position:relative;transition:transform .3s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--violet);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--violet)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#fff}
.faq details p{margin:0;padding:0 22px 22px;color:var(--ink-soft);font-size:16px}

/* ---------- final CTA ---------- */
.final{position:relative;isolation:isolate;margin:0 14px;border-radius:40px;background:var(--violet);color:#fff;overflow:hidden;text-align:center;padding:130px 24px}
.final .grid-bg{background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%)}
.final .grid-bg::before{display:none}
.final h2{max-width:900px;margin:0 auto 20px;font-size:clamp(38px,6vw,84px)}
.final p{max-width:560px;margin:0 auto 36px;color:#D4D4D8;font-size:18px}
.final .hero-cta{justify-content:center}
.floaters span{position:absolute;padding:10px 14px;border-radius:14px;background:#fff;color:var(--ink);font:600 13px var(--sans);box-shadow:0 20px 40px -20px rgba(9,9,11,.6);animation:bob 6s ease-in-out infinite}
.floaters span em{font:500 11.5px var(--mono);color:var(--mint-ink);font-style:normal;display:block}
.floaters span:nth-child(1){left:6%;top:18%;transform:rotate(-6deg)}
.floaters span:nth-child(2){right:7%;top:22%;animation-delay:-2s;transform:rotate(5deg)}
.floaters span:nth-child(3){left:10%;bottom:16%;animation-delay:-4s;transform:rotate(4deg)}
.floaters span:nth-child(4){right:9%;bottom:14%;animation-delay:-1s;transform:rotate(-4deg)}
@keyframes bob{50%{translate:0 -12px}}
@media (max-width:1000px){.floaters{display:none}}
@media (max-width:640px){.final{margin:0 8px;border-radius:28px;padding:80px 20px}}

/* ---------- page heroes (pricing, lifetime, legal) ---------- */
.phero{position:relative;isolation:isolate;padding:72px 0 64px}
.phero h1{font-size:clamp(42px,6.6vw,92px);margin:20px 0 22px;max-width:980px}

/* ---------- legal ---------- */
.legal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:72px;padding:72px 0 120px}
@media (max-width:900px){.legal{grid-template-columns:1fr;gap:24px;padding-top:40px}}
.toc{position:sticky;top:100px;align-self:start;background:var(--lav);border-radius:var(--r);padding:22px}
.toc p{margin:0 0 12px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--violet-ink)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px}
.toc a{text-decoration:none;color:var(--ink-soft)}
.toc a:hover{color:var(--violet)}
@media (max-width:900px){.toc{position:static}.toc ol{grid-template-columns:1fr 1fr;column-gap:16px}}
.doc{max-width:760px}
.doc h1{font-size:clamp(40px,6vw,72px)}
.doc .meta{display:inline-block;margin:18px 0 6px;font:600 13px var(--mono);background:var(--sun);padding:5px 10px;border-radius:8px}
.doc .intro{font-size:18px;color:var(--ink-soft);margin:14px 0 40px}
.doc h2{font-size:28px;letter-spacing:-.025em;line-height:1.15;margin:52px 0 14px;scroll-margin-top:100px}
.doc h3{font-size:18px;margin:24px 0 8px}
.doc p,.doc li{color:var(--ink-soft);font-size:16px}
.doc ul{padding-left:20px}
.doc li{margin-bottom:8px}
.doc a{color:var(--violet);text-underline-offset:3px}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px}
.doc th,.doc td{text-align:left;padding:11px 12px;border:1px solid var(--lav-2);vertical-align:top}
.doc th{background:var(--lav)}
.doc .tbl{overflow-x:auto}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#fff;margin-top:120px;padding:80px 0 40px;position:relative;isolation:isolate;overflow:hidden}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:380px){.ftr-grid{grid-template-columns:1fr}}
.ftr .logo{color:#fff}
.ftr .blurb{color:#A1A1AA;max-width:320px;margin:16px 0 0}
.ftr h4{margin:0 0 14px;font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--sun)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{text-decoration:none;color:#D4D4D8}
.ftr a:hover{color:#fff}
.ftr-big{margin-top:60px;font:800 clamp(72px,19vw,280px)/.8 var(--display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--ink-3);text-align:center;user-select:none}
.ftr-base{margin-top:28px;padding-top:22px;border-top:1px solid var(--ink-3);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#71717B;font-size:13px}

/* ---------- phones: sticky Log in + trial ---------- */
.mbar{display:none}
@media (max-width:960px){
  .mbar{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:58;display:grid;grid-template-columns:1fr 1.7fr;gap:8px;padding:8px;
    border-radius:22px;background:rgba(9,9,11,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 40px -16px rgba(9,9,11,.6);
    transform:translateY(140%);transition:transform .4s var(--ease)}
  .mbar .btn{height:50px;font-size:15.5px}
  .mbar .btn-line{color:#fff;border-color:rgba(255,255,255,.25)}
  .mbar-on .mbar{transform:none}
  .menu-open .mbar{transform:translateY(140%)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .ftr{margin-top:80px}
}
@media (max-width:640px){
  .hero{padding:36px 0 64px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .head{margin-bottom:36px}
  .rule{padding:22px}.rule .then{font-size:19px}
  .faq summary{font-size:16.5px;padding:18px}
  .faq details p{padding:0 18px 18px}
  .legal{padding-bottom:72px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js [data-reveal]{opacity:1;transform:none}
  .hero h1 .slot::before{transform:rotate(-1.5deg)}
  .ev.new{opacity:1;transform:none}
}

/* shared bits used by pricing / lifetime / legal bodies */
.sec-head{max-width:780px;margin-bottom:44px}
.sec-head h2{margin-top:16px}
.sec-head.center,.center{text-align:center;margin-left:auto;margin-right:auto}
.hero-note{margin-top:16px;font-size:14px;color:var(--ink-mute)}
.feat-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-list>div{padding:26px;border-radius:var(--r);background:var(--lav)}
.feat-list h3{font-size:20px;margin-bottom:8px}
.feat-list p{margin:0;color:var(--ink-soft);font-size:15px}
@media (max-width:900px){.feat-list{grid-template-columns:1fr}}
.final .inner{position:relative}
.final .stamp{color:#D4D4D8}.final .stamp b{background:rgba(255,255,255,.14);color:#fff}
.final h2{margin-top:18px}

/* fixes after first look */
.hero h1 .slot{display:inline;padding:0 .08em;margin:0;-webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:.12em;
  background:linear-gradient(var(--sun),var(--sun)) no-repeat 0 88%/0% 74%;animation:slotGrow 1s var(--ease) .5s forwards}
.hero h1 .slot::before{display:none}
@keyframes slotGrow{to{background-size:100% 74%}}
@media (min-width:901px){.tour-sticky{top:76px;height:calc(100vh - 76px)}}
.tour-top h2{font-size:clamp(34px,4.4vw,60px)}
.track{align-items:flex-start}
.panel .pv{min-height:240px}
@media (prefers-reduced-motion:reduce){.hero h1 .slot{background-size:100% 74%}}
.lanes{padding:20px 28px 40px}
@media (max-width:640px){.lanes{padding:12px 16px 32px}}
.tl img.mono{filter:brightness(0);background:transparent;padding:4px}
@media (max-width:760px){.now::after{display:none}.now{opacity:.35}}

/* =====================================================================
   Brand pass: ink + zinc, green only for "booked" and the deal.
   ===================================================================== */
::selection{background:var(--mint-tint);color:var(--ink)}
:focus-visible{outline-color:var(--ink)}
.stamp{color:var(--ink-mute)}
.stamp b{background:var(--lav-2);color:var(--ink);border:1px solid var(--lav-3)}
.it{color:var(--mint-ink)}
.logo .lm{background:#18181B;box-shadow:0 6px 16px -8px rgba(9,9,11,.6)}
.nav a[aria-current]{color:var(--ink)}
.btn-violet{background:var(--ink);box-shadow:0 10px 24px -12px rgba(9,9,11,.55)}
.btn-violet:hover{background:var(--ink-3)}
.btn-sun{background:var(--sun);color:#04210F}
.btn-sun:hover{background:var(--sun-2)}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}

/* the lifetime strip: ink, with a green badge */
.ltd-strip{background:var(--ink);color:#E4E4E7}
.ltd-strip::before{background:repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.035) 14px 28px)}
.ltd-badge{background:var(--sun);color:#04210F}
.ltd-copy b{color:#fff}
.ltd-timer{color:#A1A1AA}
.ltd-timer i{background:rgba(255,255,255,.1);color:#fff}
.ltd-cta{color:#fff}

/* hero */
.grid-bg::before{background-image:linear-gradient(90deg,transparent calc(100% / 7 * 2),rgba(34,197,94,.045) calc(100% / 7 * 2),rgba(34,197,94,.045) calc(100% / 7 * 3),transparent calc(100% / 7 * 3))}
.hero h1 .slot{background-image:linear-gradient(var(--mint-tint),var(--mint-tint));color:#052E16;box-shadow:none}
.week{box-shadow:0 1px 2px rgba(9,9,11,.05),0 40px 80px -40px rgba(9,9,11,.35)}
.cal .dh.today{color:var(--mint-ink)}
.ev.new{background:var(--ink);box-shadow:0 10px 20px -10px rgba(9,9,11,.6)}
.ghost{border-color:var(--ink);background:rgba(9,9,11,.04)}
@keyframes pulse{50%{background:rgba(9,9,11,.09)}}
.inc .av{background:var(--sun);color:#04210F}
.inc p{color:#D4D4D8}
.inc .st{color:#A1A1AA}
.inc .st.ok{color:#4ADE80}

/* integrations */
.tl:hover{box-shadow:0 14px 28px -16px rgba(9,9,11,.3)}

/* tour */
.tour{background:var(--lav-2)}
.tour-prog i{background:var(--ink)}
.panel{box-shadow:0 30px 60px -40px rgba(9,9,11,.3)}
.panel.hl{background:var(--ink);border-color:var(--ink)}
.panel.hl p{color:#A1A1AA}
.panel.hl .stamp{color:#A1A1AA}
.panel.hl .stamp b{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:#fff}
.panel.hl .pv{background:rgba(255,255,255,.08)}

/* booking rules: a zinc block, not a coloured one */
.sunblock{background:var(--lav-2)}
.sunblock .grid-bg{background-image:linear-gradient(rgba(9,9,11,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(9,9,11,.05) 1px,transparent 1px)}
.sunblock .lead{color:var(--ink-soft)}
.rule{box-shadow:0 3px 0 var(--ink)}
.rule .if em{background:var(--mint-tint);color:#052E16}
.rule .then::before{background-color:var(--sun);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052E16' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.book-scenes>div{box-shadow:0 3px 0 var(--ink)}

/* features: ink block, cards in mint / white / ink */
.inkblock .stamp.on-dark b{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
.card:hover{border-color:#52525B}
.card.sun{background:var(--mint-tint);border-color:var(--mint-tint)}
.card.sun p{color:#14532D}
.card.vio{background:#FAFAFA;border-color:#FAFAFA}
.card.vio h3{color:var(--ink)}
.card.vio p{color:var(--ink-soft)}
.card.vio .pv{background:var(--lav-2)}

.ag .ai svg{stroke:var(--ink)}
.ag .ai{border:1px solid var(--lav-3)}

/* pricing */
.plan.pop{background:var(--ink);border-color:var(--ink)}
.plan.pop .for,.plan.pop .price span,.plan.pop .price-note{color:#A1A1AA}
.plan.pop ul{border-color:var(--ink-3)}
.badge{background:var(--sun);color:#04210F}
.note{background:var(--mint-tint)}
.note p{color:#052E16}
.cmp tr.grp th{color:var(--ink-mute)}
.ltd-big-l{color:var(--mint-ink)}
.ltd-boxes div{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 14px 30px -18px rgba(9,9,11,.7)}
.ltd-boxes span{color:#A1A1AA}

/* FAQ */
.faq details[open] summary i{background:var(--ink)}
.faq summary i::before,.faq summary i::after{background:var(--ink)}
.faq details[open] summary i::before,.faq details[open] summary i::after{background:#fff}

/* final CTA: ink with green */
.final{background:var(--ink)}
.final .grid-bg{background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.final p{color:#A1A1AA}
.final .stamp{color:#A1A1AA}
.final .stamp b{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.12);color:#fff}
.floaters span{box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}

/* legal + footer */
.doc a{color:var(--ink)}
.doc .meta{background:var(--mint-tint);color:#052E16}
.toc a:hover{color:var(--ink)}
.toc p{color:var(--ink-mute)}
.ftr h4{color:#A1A1AA}
.ftr-big{-webkit-text-stroke-color:#27272A}

/* phone bar */
.mbar{background:rgba(9,9,11,.92)}

/* =====================================================================
   Spacing pass
   ===================================================================== */
/* The tour sits under the sticky header: start below it instead of centring into it. */
@media (min-width:901px){
  .tour-sticky{top:0;height:100vh;justify-content:flex-start;padding-top:calc(var(--hdr-h,76px) + 40px);padding-bottom:32px}
  .tour-top{margin-bottom:28px}
  .panel{padding:24px}
  .panel .pv{min-height:200px}
}
@media (min-width:901px) and (max-height:820px){
  .tour-top h2{font-size:clamp(30px,3.6vw,46px)}
  .panel p{display:none}
}
.hero{padding:64px 0 96px}
.hero h1{margin:20px 0 22px}
.lanes{padding-top:8px;padding-bottom:24px}
.lane{padding:22px 0}
.lane h4 b{margin-top:6px}
section{padding:112px 0}
.sunblock,.inkblock{padding:96px 0!important}
.head{margin-bottom:48px}
.rules{gap:18px}
.book-scenes{margin-top:18px;gap:18px}
.mason{column-gap:20px}.card{margin-bottom:20px}
.note{margin-top:24px}
.faq-wrap{gap:64px}
.final{padding:110px 24px}
.ftr{margin-top:96px}
.phero{padding:64px 0 56px}
.phero .lead{margin-top:4px}
@media (max-width:760px){
  section{padding:72px 0}
  .sunblock,.inkblock{padding:64px 0!important}
  .hero{padding:32px 0 64px}
  .head{margin-bottom:32px}
  .final{padding:72px 20px}
  .ftr{margin-top:72px}
  .phero{padding:40px 0 40px}
  .lane{padding:18px 0}
}
.stamp{flex-wrap:wrap;row-gap:6px;line-height:1.3}
.stamp b{white-space:nowrap}

/* =====================================================================
   Round 3: v1 hero, cobalt instead of green, v1 dots on every page,
   centred headings, equal tour cards.
   ===================================================================== */
:root{--sun:#2F55F4;--sun-2:#4A6CFF;--cobalt:#2F55F4;--cobalt-ink:#1E3FD9;--cobalt-tint:#EEF2FF;--cobalt-line:#D6DEFF}

/* cobalt where v2 had green */
.btn-sun{background:var(--cobalt);color:#fff;box-shadow:0 10px 24px -12px rgba(9,9,11,.7)}
.btn-sun:hover{background:var(--cobalt-ink)}
.badge,.ltd-badge{background:var(--cobalt);color:#fff}
.it{color:var(--cobalt)}
.cal .dh.today{color:var(--cobalt)}
.rule .if em{background:var(--cobalt-tint);color:var(--cobalt-ink)}
.rule .then::before{background-color:var(--cobalt);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
.card.sun{background:var(--cobalt-tint);border-color:var(--cobalt-tint)}
.card.sun p{color:var(--ink-soft)}
.note{background:var(--cobalt-tint);border:1px solid var(--cobalt-line)}
.note p{color:var(--ink)}
.ltd-big-l{color:var(--cobalt)}
.doc .meta{background:var(--cobalt-tint);color:var(--cobalt-ink)}
.inc .av{background:var(--cobalt);color:#fff}
.inc .st.ok{color:#D4D4D8}
.stamp b{border-color:var(--lav-3)}
.progress{display:none}

/* ---- v1's dotted background, on every page ---- */
body{position:relative}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2}
body::before{background-image:radial-gradient(#BCC3D6 1.35px,transparent 1.6px);background-size:22px 22px;animation:dotsDrift 24s linear infinite;opacity:.75}
body::after{background-image:radial-gradient(var(--cobalt) 1.6px,transparent 1.9px);background-size:22px 22px;opacity:.5;
  -webkit-mask-image:radial-gradient(circle,#000,transparent 70%);mask-image:radial-gradient(circle,#000,transparent 70%);
  -webkit-mask-size:560px 560px;mask-size:560px 560px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:dotsDrift 24s linear infinite,dotsWave 16s ease-in-out infinite alternate}
@keyframes dotsDrift{to{background-position:44px 66px}}
@keyframes dotsWave{0%{-webkit-mask-position:-20% 0%;mask-position:-20% 0%}50%{-webkit-mask-position:60% 70%;mask-position:60% 70%}100%{-webkit-mask-position:120% 10%;mask-position:120% 10%}}
/* section textures become dots too (no more calendar lines) */
.grid-bg,.grid-bg.dark,.sunblock .grid-bg,.final .grid-bg{background-image:radial-gradient(#BCC3D6 1.35px,transparent 1.6px);background-size:22px 22px;animation:dotsDrift 24s linear infinite;
  -webkit-mask-image:none;mask-image:none}
.grid-bg::before{display:none}
.grid-bg.dark,.final .grid-bg{background-image:radial-gradient(rgba(255,255,255,.18) 1.3px,transparent 1.6px)}
.phero .grid-bg{display:none}
.tour{background:transparent}
.sunblock{background:rgba(244,244,245,.92)}
.ftr{position:relative;z-index:0}

/* ---- the v1 hero, in v2's type ---- */
.vhero{position:relative;isolation:isolate;padding:72px 0 48px;text-align:center}
.vhero .glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:-1;opacity:.75;animation:float 18s ease-in-out infinite alternate}
.vhero .glow.g1{width:620px;height:620px;background:#DDE5FF;top:-220px;left:-6%}
.vhero .glow.g2{width:520px;height:520px;background:#E4E4E7;top:-120px;right:-4%;animation-delay:-6s}
.vhero .glow.g3{width:520px;height:520px;background:#ECE4FF;top:520px;left:30%;animation-delay:-9s}
@keyframes float{to{transform:translate(40px,30px) scale(1.08)}}
.pill{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 6px 0 16px;border:1px solid var(--cobalt-line);border-radius:999px;background:rgba(255,255,255,.85);
  font-size:14px;font-weight:500;color:var(--ink-soft);text-decoration:none;backdrop-filter:blur(8px)}
.pill b{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:600;font-size:12.5px}
.live{width:8px;height:8px;border-radius:50%;background:#22C55E;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.vhero h1{margin:28px auto 24px;max-width:1080px;font-size:clamp(44px,7.4vw,100px)}
.vhero .lead{margin:0 auto}
.vhero .hero-cta{justify-content:center;margin-top:36px}
.hero-note{margin-top:16px;font-size:14px;color:var(--ink-mute)}
/* "booked meetings" as a calendar event */
.evh{position:relative;display:inline-flex;align-items:center;gap:.16em;white-space:nowrap;padding:.02em .2em .08em .26em;margin-left:.04em;color:#0B3D20;isolation:isolate}
.evh::before{content:"";position:absolute;inset:0;border-radius:.14em;background:#DCFCE7;box-shadow:inset .09em 0 0 #16A34A;z-index:-1;transform-origin:left;transform:scaleX(0);animation:evBg .9s var(--ease) .5s forwards}
@keyframes evBg{to{transform:scaleX(1)}}
.evh-t{position:absolute;left:.3em;top:-.72em;font:600 max(11px,.15em)/1 var(--mono);letter-spacing:0;color:#15803D;background:#fff;border:1px solid #BBF7D0;padding:.35em .55em;border-radius:999px;
  opacity:0;transform:translateY(6px);animation:evTag .5s var(--ease) 1.5s forwards;box-shadow:0 4px 12px -6px rgba(21,128,61,.4)}
.evh-c{display:inline-grid;place-items:center;width:.6em;height:.6em;border-radius:50%;background:#16A34A;transform:scale(0);animation:evCheck .5s cubic-bezier(.34,1.56,.64,1) 1.35s forwards}
.evh-c svg{width:.38em;height:.38em;stroke:#fff;fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes evTag{to{opacity:1;transform:none}}
@keyframes evCheck{to{transform:scale(1)}}
/* the app window */
.window-wrap{position:relative;margin:72px auto 0;max-width:1120px;transform-origin:50% 0;will-change:transform}
.window{border:1px solid var(--lav-3);border-radius:28px;background:#fff;overflow:hidden;text-align:left;
  box-shadow:0 2px 4px rgba(9,9,11,.04),0 50px 120px -50px rgba(10,15,36,.45),0 0 0 8px rgba(255,255,255,.7),0 0 0 9px var(--lav-3)}
.w-bar{display:flex;align-items:center;gap:7px;padding:14px 18px;border-bottom:1px solid var(--lav-2);background:var(--lav)}
.w-bar i{width:11px;height:11px;border-radius:50%;background:var(--lav-3)}
.w-url{margin:0 auto;font:12.5px var(--mono);color:var(--ink-mute);background:#fff;border:1px solid var(--lav-3);border-radius:8px;padding:4px 14px}
.w-body{display:grid;grid-template-columns:220px 1fr}
.w-side{border-right:1px solid var(--lav-2);padding:18px 12px;background:var(--lav);display:flex;flex-direction:column;gap:2px}
.w-side .ws{display:flex;align-items:center;gap:10px;padding:6px 8px 16px;font-weight:600;font-size:14px}
.w-side .ws img{width:22px;height:22px}
.w-side a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--ink-mute);text-decoration:none;transition:background .3s var(--ease),color .3s}
.w-side a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.w-side a.on{background:#fff;color:var(--cobalt);box-shadow:0 1px 2px rgba(9,9,11,.12),0 0 0 1px var(--cobalt-line)}
.w-main{padding:44px 48px;display:flex;flex-direction:column;gap:22px;background:radial-gradient(circle at 85% 0%,rgba(228,228,231,.8),transparent 45%),radial-gradient(circle at 10% 100%,rgba(244,244,245,.5),transparent 40%),#fff}
.w-head{transition:opacity .26s var(--ease),transform .26s var(--ease)}
.w-head.swap{opacity:0;transform:translateY(-6px)}
.w-head h3{font-size:clamp(22px,2.6vw,30px)}
.w-head p{margin:6px 0 0;color:var(--ink-mute);font-size:15px}
.w-main .as-stage{height:300px;max-width:620px}
.dots{display:flex;gap:6px;margin-top:auto}
.dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:var(--lav-3);cursor:pointer;transition:width .35s var(--ease),background .35s}
.dots button.on{width:22px;background:var(--cobalt)}
.toasts{position:absolute;inset:0;pointer-events:none;z-index:3}
.toast{position:absolute;display:flex;align-items:center;gap:12px;min-width:270px;max-width:300px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--lav-3);box-shadow:0 1px 2px rgba(9,9,11,.05),0 18px 40px -18px rgba(10,15,36,.35);text-align:left;
  opacity:0;transform:translateY(14px) scale(.96);transition:opacity .45s var(--ease),transform .55s var(--ease)}
.toast.on{opacity:1;transform:none}
.toast .ti{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--cobalt-tint)}
.toast .ti svg{width:18px;height:18px;stroke:var(--cobalt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast.g .ti{background:#DCFCE7}.toast.g .ti svg{stroke:#15803D}
.toast.a .ti{background:#FFF6E5}.toast.a .ti svg{stroke:#B45309}
.toast b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.toast span{display:block;font:12px/1.4 var(--mono);color:var(--ink-mute);margin-top:2px}
.toast.l{left:-84px;top:22%}.toast.r{right:-84px;top:58%}
@media (max-width:1300px){.toast.l{left:-24px}.toast.r{right:-24px}}
@media (max-width:860px){.w-body{grid-template-columns:1fr}.w-side{display:none}.w-main{padding:24px 18px}.w-main .as-stage{height:340px}.toast{display:none}}
@media (max-width:640px){.vhero{padding:40px 0 32px}.vhero h1{font-size:clamp(30px,9.4vw,44px)}.vhero .hero-cta{flex-direction:column;align-items:stretch}.window-wrap{margin-top:44px}.pill{font-size:12.5px;height:34px}}

/* ---- the live week now lives in the booking section ---- */
.book-live{max-width:860px;margin:28px auto 0;padding-top:34px}
.book-live .week{transform:none}

/* ---- headings centred, subheading underneath ---- */
.head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:18px;max-width:880px;margin-left:auto;margin-right:auto}
.head .lead{justify-self:center;margin:0 auto}
.head .stamp{justify-content:center}
.tour-top{flex-direction:column;align-items:center;text-align:center;gap:22px}
.tour-top h2{margin-left:auto;margin-right:auto}
.tour-top .stamp{justify-content:center}
.faq-wrap{grid-template-columns:1fr;max-width:860px;margin:0 auto;gap:36px}
.faq-wrap .head-side{position:static;text-align:center}
.faq-wrap .head-side .stamp{justify-content:center}
.faq-wrap .head-side .lead{margin-left:auto;margin-right:auto}
.phero{text-align:center}
.phero h1,.phero .lead{margin-left:auto;margin-right:auto}
.phero .stamp,.phero .hero-cta{justify-content:center}
.ltd-big{align-items:center}
.sec-head{text-align:center;margin-left:auto;margin-right:auto}
.final{text-align:center}

/* ---- tour: every card the same height ---- */
.track{align-items:stretch}
.panel .pv{flex:1}
.ltd-strip{z-index:60}
.vhero{overflow-x:clip}
.vhero h1{line-height:1.08}
@media (max-width:640px){.vhero h1{line-height:1.14}.evh-t{top:-.8em}}

/* Solid surfaces: nothing that holds content lets the dotted background through. */
.tbl-wrap,table.cmp,.cmp td,.cmp tbody th{background:#fff}
.cmp thead th,.cmp tr.grp th{background:#F4F4F5}
.plan,.panel,.rule,.week,.window,.book-scenes>div{background-color:#fff}
.plan.pop,.panel.hl{background-color:var(--ink)}
.faq details{background:#F4F4F5;border:1px solid #E4E4E7}
.faq details[open]{background:#fff}
.ag,.feat-list>div,.tl{background:#F4F4F5;border:1px solid #E4E4E7}
.ag:hover{background:#fff}
.tl:hover{background:#fff}
.toc{background:#F4F4F5;border:1px solid #E4E4E7}
.doc{background:#fff;border:1px solid #E4E4E7;border-radius:28px;padding:48px 52px}
.doc table,.doc td{background:#fff}
.doc th{background:#F4F4F5}
.btn-line{background:#fff}
.btn-line.light,.mbar .btn-line{background:transparent}
.pill{background:#fff}
.sunblock{background:#F4F4F5}
.note{background:#EEF2FF}
.stamp b{background:#F4F4F5}
@media (max-width:640px){.doc{padding:28px 20px;border-radius:22px}}

/* =====================================================================
   Monochrome pass: ink + white with soft silver gradients. The page is a
   light grey so white surfaces read as surfaces instead of blending in.
   ===================================================================== */
:root{
  --cobalt:#09090B;--cobalt-ink:#27272A;--cobalt-tint:#F4F4F5;--cobalt-line:#E4E4E7;--sun:#09090B;--sun-2:#27272A;
  --page:#F2F2F4;--surface:#FFFFFF;--edge:#E2E2E6;
  --lift:0 1px 2px rgba(9,9,11,.05),0 14px 34px -22px rgba(9,9,11,.22);
  --ink-grad:linear-gradient(160deg,#2A2A2E 0%,#09090B 60%);
  --silver:linear-gradient(180deg,#FFFFFF 0%,#F4F4F6 100%);
}
html{background:var(--page)}
body{background:radial-gradient(1400px 700px at 50% -8%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#F6F6F8 0%,#EEEEF1 100%) fixed;color:var(--ink)}
body::before{background-image:radial-gradient(#C3C3CB 1.35px,transparent 1.6px);opacity:.8}
body::after{background-image:radial-gradient(#3F3F46 1.6px,transparent 1.9px);opacity:.35}
.grid-bg,.sunblock .grid-bg{background-image:radial-gradient(#C3C3CB 1.35px,transparent 1.6px)}

/* header + strip */
.hdr.scrolled{background:rgba(246,246,248,.86);box-shadow:0 1px 0 var(--edge)}
.nav{background:#fff;border-color:var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.04)}
.nav a:hover{background:#F4F4F5}
.nav a[aria-current]{background:var(--ink);color:#fff;box-shadow:none}
.ltd-strip{background:var(--ink-grad)}
.ltd-badge{background:#fff;color:var(--ink)}
.menu-btn{border-color:var(--edge)}

/* buttons */
.btn-violet{background:var(--ink-grad);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 12px 26px -14px rgba(9,9,11,.7)}
.btn-violet:hover{background:linear-gradient(160deg,#3F3F46,#18181B)}
.btn-sun{background:linear-gradient(180deg,#FFFFFF,#E9E9EC);color:var(--ink);box-shadow:0 1px 0 #fff inset,0 10px 24px -14px rgba(0,0,0,.6)}
.btn-sun:hover{background:#fff}
.btn-line{background:#fff;border-color:var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.05)}
.btn-line:hover{border-color:var(--ink)}
.btn-ink{background:var(--ink-grad)}

/* type accents */
.it{background:linear-gradient(90deg,#09090B,#71717B);-webkit-background-clip:text;background-clip:text;color:transparent}
.stamp{color:var(--ink-mute)}
.stamp b{background:#fff;border:1px solid var(--edge);color:var(--ink)}

/* hero (from v1) in monochrome */
.vhero .glow.g1{background:#FFFFFF}
.vhero .glow.g2{background:#E4E4E8}
.vhero .glow.g3{background:#E9E9EE}
.pill{border-color:var(--edge);box-shadow:var(--lift)}
.pill b{background:var(--ink-grad)}
.live{background:var(--ink);animation:pingInk 2s infinite}
@keyframes pingInk{0%{box-shadow:0 0 0 0 rgba(9,9,11,.35)}70%{box-shadow:0 0 0 8px rgba(9,9,11,0)}100%{box-shadow:0 0 0 0 rgba(9,9,11,0)}}
.evh{color:#fff}
.evh::before{background:var(--ink-grad);box-shadow:0 18px 40px -20px rgba(9,9,11,.7)}
.evh-t{color:var(--ink);border-color:var(--edge);box-shadow:0 6px 14px -8px rgba(9,9,11,.4)}
.evh-c{background:#fff}
.evh-c svg{stroke:var(--ink)}
.window{border-color:var(--edge);box-shadow:0 2px 4px rgba(9,9,11,.04),0 50px 120px -50px rgba(9,9,11,.45),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--edge)}
.w-side a.on{color:var(--ink);box-shadow:0 1px 2px rgba(9,9,11,.08),0 0 0 1px var(--edge)}
.w-main{background:radial-gradient(circle at 85% 0%,#F1F1F4,transparent 45%),#fff}
.dots button.on{background:var(--ink)}
.toast{border-color:var(--edge)}
.toast .ti,.toast.g .ti,.toast.a .ti{background:#F4F4F5}
.toast .ti svg,.toast.g .ti svg,.toast.a .ti svg{stroke:var(--ink)}

/* integrations: white tiles on the grey page */
.lane{border-color:var(--edge)}
.tl{background:#fff;border:1px solid var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.04)}
.tl img{background:#F4F4F5}
.tl:hover{box-shadow:var(--lift)}

/* tour */
.tour-prog{background:var(--edge)}
.panel{background:var(--silver);border-color:var(--edge);box-shadow:var(--lift)}
.panel .pv{background:#F1F1F4;border:1px solid var(--edge)}
.panel.hl{background:var(--ink-grad)}
.panel.hl .pv{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}

/* booking: a white block with ink-edged cards */
.sunblock{background:var(--silver);border:1px solid var(--edge);box-shadow:var(--lift)}
.rule{background:#fff;border:1.5px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.rule .if em{background:#F1F1F4;color:var(--ink);border:1px solid var(--edge)}
.rule .then::before{background-color:var(--ink)}
.week{border-color:var(--edge);box-shadow:var(--lift)}
.inc .av{background:#fff;color:var(--ink)}
.inc .st.ok{color:#fff}
.counter{background:#F1F1F4;color:var(--ink);border:1px solid var(--edge)}
.cal .dh.today{color:var(--ink);font-weight:700}
.ev.new.settled{background:#F1F1F4;color:var(--ink);box-shadow:inset 3px 0 0 var(--ink)}
.ghost{border-color:var(--ink-mute)}

/* features: ink block with soft depth */
.inkblock,.final{background:radial-gradient(900px 500px at 80% -10%,#2E2E33 0%,transparent 60%),radial-gradient(700px 400px at 0% 110%,#1F1F23 0%,transparent 60%),#09090B}
.card{background:linear-gradient(180deg,#1C1C1F,#141416);border-color:#2A2A2E}
.card.sun{background:linear-gradient(180deg,#FFFFFF,#E9E9EC);border-color:#fff}
.card.sun h3{color:var(--ink)}
.card.sun p{color:var(--ink-soft)}
.card.sun .pv{background:#fff;border:1px solid var(--edge)}
.card.vio{background:linear-gradient(180deg,#3A3A40,#232327);border-color:#3F3F46}
.card.vio h3{color:#fff}
.card.vio p{color:#C4C4CC}
.card.vio .pv{background:#fff}

/* agencies, pricing, notes */
.ag,.feat-list>div{background:#fff;border:1px solid var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.04)}
.ag:hover{box-shadow:var(--lift)}
.ag .ai{background:#F4F4F5;border-color:var(--edge)}
.plan{background:var(--silver);border-color:var(--edge);box-shadow:var(--lift)}
.plan.pop{background:var(--ink-grad);border-color:#09090B}
.badge{background:#fff;color:var(--ink);border:1px solid var(--edge);box-shadow:0 6px 14px -8px rgba(9,9,11,.5)}
.plan.pop .btn-sun{color:var(--ink)}
.note{background:var(--silver);border:1px solid var(--edge);box-shadow:var(--lift)}
.tbl-wrap{border-color:var(--edge);box-shadow:var(--lift)}
.cmp thead th,.cmp tr.grp th{background:#F4F4F6}
.cmp th,.cmp td{border-bottom-color:#EDEDF0}
.y{color:var(--ink)}
.ltd-big-l{color:var(--ink-mute)}
.ltd-boxes div{background:var(--ink-grad)}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.04)}
.faq details[open]{background:#fff;border-color:#C9C9CF;box-shadow:var(--lift)}
.faq summary i{background:#F4F4F5;border:1px solid var(--edge)}

/* closing CTA + footer */
.final .grid-bg,.grid-bg.dark{background-image:radial-gradient(rgba(255,255,255,.12) 1.3px,transparent 1.6px)}
.final .btn-line.light{background:transparent;border-color:#3F3F46}
.floaters span{background:#fff;border:1px solid var(--edge)}
.floaters span em{color:var(--ink-mute)}
.ftr{background:var(--ink-grad)}

/* legal */
.toc{background:#fff;border-color:var(--edge);box-shadow:0 1px 2px rgba(9,9,11,.04)}
.doc{border-color:var(--edge);box-shadow:var(--lift)}
.doc .meta{background:#F1F1F4;color:var(--ink);border:1px solid var(--edge)}

/* phone bar */
.mbar{background:rgba(9,9,11,.94)}

/* Dots fix: the page gradient must be the canvas (on html), not a background on body.
   A body background gets painted over the fixed dot layers (z-index:-2) and hid them. */
html{background:radial-gradient(1400px 700px at 50% -8%,#FFFFFF 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,#F6F6F8 0%,#EEEEF1 100%) fixed,#F2F2F4}
body{background:transparent}
body::before{opacity:.9}
.it{padding-right:.12em;margin-right:-.06em}

/* Strip + navigation pinned together at the top, on every screen size. */
.topbar{position:sticky;top:0;z-index:60}
.topbar .hdr{position:relative;top:auto}
.topbar .ltd-strip{position:relative}
html{scroll-padding-top:calc(var(--hdr-h,120px) + 16px)}
.doc h2{scroll-margin-top:calc(var(--hdr-h,120px) + 16px)}
.toc{top:calc(var(--hdr-h,120px) + 20px)}
@media (min-width:901px){.tour-sticky{padding-top:calc(var(--hdr-h,120px) + 32px)}}

/* Phones: Log in + Start free trial always pinned to the bottom. */
@media (max-width:960px){
  .mbar{transform:none}
  .menu-open .mbar{transform:translateY(140%)}
}

/* Phone bottom bar: full width, edge to edge. */
@media (max-width:960px){
  .mbar{left:0;right:0;bottom:0;border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow:0 -10px 30px -16px rgba(9,9,11,.55);border-top:1px solid #27272A}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* =====================================================================
   Orange pass (matches app.revbound.io): a soft orange wash from the top
   right with a faint warm glow bottom left, grey dots drifting over it and
   a slow orange highlight wandering through the dots. Ink stays the action
   colour; orange is only the light in the room and the "New" tags.
   ===================================================================== */
:root{--orange:#F97316;--orange-ink:#C2410C;--orange-tint:#FFF1E6;--orange-line:#FED7AA}
html{background:
  radial-gradient(1500px 900px at 76% -14%,rgba(251,146,60,.20) 0%,rgba(251,146,60,0) 68%),
  radial-gradient(1100px 760px at -6% 104%,rgba(250,204,21,.09) 0%,rgba(250,204,21,0) 66%),
  linear-gradient(180deg,#FAF8F6 0%,#F1F0EF 100%) fixed,#F4F2F0;background-attachment:fixed}
body::before{background-image:radial-gradient(#C9C3BD 1.35px,transparent 1.6px);opacity:.85}
body::after{background-image:radial-gradient(var(--orange) 1.6px,transparent 1.9px);opacity:.42}
.grid-bg,.sunblock .grid-bg{background-image:radial-gradient(#CFC9C3 1.35px,transparent 1.6px)}
.hdr.scrolled{background:rgba(250,248,246,.86)}
.vhero .glow.g1{background:#FFE3CC;opacity:.7}
.vhero .glow.g2{background:#FFEFD9;opacity:.65}
.vhero .glow.g3{background:#FDE7D6;opacity:.45}
.live{background:var(--orange);animation:pingOr 2.4s infinite}
@keyframes pingOr{0%{box-shadow:0 0 0 0 rgba(249,115,22,.45)}70%{box-shadow:0 0 0 8px rgba(249,115,22,0)}100%{box-shadow:0 0 0 0 rgba(249,115,22,0)}}
.window{box-shadow:0 2px 4px rgba(9,9,11,.04),0 50px 120px -50px rgba(124,45,18,.35),0 0 0 8px rgba(255,255,255,.75),0 0 0 9px var(--edge)}

/* ---------- What's new ---------- */
.newsec{position:relative}
.newsec .head{margin-bottom:56px}
.nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:1000px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.nf-grid{grid-template-columns:1fr}.newsec .head{margin-bottom:36px}}
.nf{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--edge);border-radius:var(--r);padding:14px 14px 26px;box-shadow:var(--lift);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.nf:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(9,9,11,.05),0 24px 48px -26px rgba(124,45,18,.32)}
.nf h3{margin:10px 12px 8px}
.nf p{margin:0 12px;color:var(--ink-soft);font-size:15px;line-height:1.55}
.nf-tag{align-self:flex-start;margin:18px 12px 0;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-ink);background:var(--orange-tint);border:1px solid var(--orange-line);padding:5px 9px;border-radius:999px}
.nf-stage{position:relative;height:178px;border-radius:14px;overflow:hidden;display:grid;place-items:center;padding:18px;
  background:radial-gradient(120% 90% at 85% -10%,rgba(251,146,60,.16),transparent 60%),radial-gradient(#E7E2DD 1.1px,transparent 1.3px) 0 0/16px 16px,#FAF8F6;border:1px solid #EFEBE7}
.nf-stage>div{width:100%;max-width:290px}
.nf-stage svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Every vignette waits until its card has scrolled in (.in), then loops slowly. */
.nf:not(.in) .nf-stage *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.nf-stage *{animation:none!important;opacity:1!important;transform:none!important}}

/* 1. brief: lines write themselves, then "sent" */
.nf-brief{background:#fff;border:1px solid var(--edge);border-radius:12px;padding:14px 16px;box-shadow:0 10px 24px -18px rgba(9,9,11,.35)}
.nb-top{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.nb-top b{font:700 14px var(--display);letter-spacing:-.01em}
.nb-top span{font-size:11.5px;color:var(--ink-mute)}
.nf-brief i{display:block;height:7px;border-radius:4px;background:#ECE9E6;margin:7px 0;width:var(--w);transform-origin:left;transform:scaleX(0);animation:nbLine 7s var(--ease) infinite}
.nf-brief i:nth-of-type(2){animation-delay:.25s}.nf-brief i:nth-of-type(3){animation-delay:.5s}.nf-brief i:nth-of-type(4){animation-delay:.75s}
@keyframes nbLine{0%,6%{transform:scaleX(0)}22%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
.nb-sent{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:var(--ink);opacity:0;animation:nbSent 7s var(--ease) infinite}
.nb-sent svg{width:14px;height:14px;color:var(--orange)}
@keyframes nbSent{0%,30%{opacity:0;transform:translateY(4px)}38%,86%{opacity:1;transform:none}96%,100%{opacity:0}}

/* 2. no-show: status flips, rebook email slides in */
.nf-noshow{display:grid;gap:10px}
.nn-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:10px 12px;box-shadow:0 10px 24px -18px rgba(9,9,11,.35)}
.nn-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);background:#F1EEEB;color:var(--ink);flex:none}
.nn-row div{display:flex;flex-direction:column;min-width:0;flex:1}
.nn-row b{font-size:13px}.nn-row div span{font-size:11.5px;color:var(--ink-mute)}
.nn-st{position:relative;font-style:normal;width:70px;height:22px;flex:none}
.nn-st s{position:absolute;inset:0;display:grid;place-items:center;text-decoration:none;font-size:11px;font-weight:600;border-radius:999px}
.nn-st s:first-child{background:#F1EEEB;color:var(--ink);animation:nnA 7s var(--ease) infinite}
.nn-st s:last-child{background:var(--ink);color:#fff;opacity:0;animation:nnB 7s var(--ease) infinite}
@keyframes nnA{0%,22%{opacity:1;transform:none}30%,92%{opacity:0;transform:translateY(-6px)}100%{opacity:1}}
@keyframes nnB{0%,22%{opacity:0;transform:translateY(6px)}30%,92%{opacity:1;transform:none}100%{opacity:0}}
.nn-mail{justify-self:end;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--orange-line);color:var(--orange-ink);border-radius:999px;padding:7px 12px;
  opacity:0;animation:nnMail 7s var(--ease) infinite}
.nn-mail svg{width:14px;height:14px}
@keyframes nnMail{0%,36%{opacity:0;transform:translateX(16px)}46%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 3. scheduled: rows arrive one by one, the next send glows */
.nf-sched{display:grid;gap:7px}
.ns-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;background:#fff;border:1px solid var(--edge);border-radius:10px;padding:8px 10px;font-size:12px;
  opacity:0;transform:translateY(8px);animation:nsIn 8s var(--ease) infinite}
.ns-row:nth-child(2){animation-delay:.3s}.ns-row:nth-child(3){animation-delay:.6s}
.ns-row em{font-style:normal;font-size:10.5px;font-weight:600;background:#F1EEEB;border-radius:999px;padding:3px 7px;white-space:nowrap}
.ns-row b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-row span{font:600 11px var(--mono);color:var(--ink-mute);white-space:nowrap}
.ns-row:nth-child(2) span{color:var(--orange-ink);animation:nsSoon 2.4s ease-in-out infinite}
@keyframes nsIn{0%{opacity:0;transform:translateY(8px)}10%,88%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-4px)}}
@keyframes nsSoon{0%,100%{opacity:1}50%{opacity:.45}}

/* 4. later: the ask turns into a dated follow-up */
.nf-later{display:flex;align-items:center;justify-content:center;gap:12px}
.nl-msg{background:#fff;border:1px solid var(--edge);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:12.5px;font-weight:500;max-width:120px;line-height:1.35;box-shadow:0 10px 24px -18px rgba(9,9,11,.35);animation:nlMsg 7s var(--ease) infinite}
.nl-arrow{width:20px;height:20px;color:var(--ink-mute);flex:none;animation:nlArr 7s var(--ease) infinite}
.nl-cal{display:grid;justify-items:center;background:#fff;border:1px solid var(--edge);border-radius:12px;overflow:hidden;width:96px;box-shadow:0 10px 24px -18px rgba(9,9,11,.35);
  opacity:0;transform:scale(.9);animation:nlCal 7s cubic-bezier(.34,1.4,.64,1) infinite}
.nl-cal span{width:100%;text-align:center;background:var(--ink);color:#fff;font:700 10px/20px var(--mono);letter-spacing:.08em}
.nl-cal b{font:700 30px/1.1 var(--display);margin-top:2px}
.nl-cal em{font-style:normal;font-size:10px;color:var(--orange-ink);font-weight:600;padding:0 6px 8px;text-align:center;line-height:1.2}
@keyframes nlMsg{0%{opacity:0;transform:translateY(6px)}8%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes nlArr{0%,18%{opacity:0;transform:translateX(-6px)}28%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes nlCal{0%,30%{opacity:0;transform:scale(.9)}40%,88%{opacity:1;transform:none}100%{opacity:0}}

/* 5. mailbox swap: the dead one is struck out, a live one takes over */
.nf-swap{display:grid;justify-items:center;gap:8px}
.nw-old{position:relative;font:600 12px var(--mono);color:var(--ink-mute);background:#fff;border:1px dashed #D6D1CC;border-radius:999px;padding:7px 14px}
.nw-old i{position:absolute;left:12px;right:12px;top:50%;height:1.5px;background:var(--ink-mute);transform-origin:left;transform:scaleX(0);animation:nwStrike 7s var(--ease) infinite}
.nw-arrow{width:18px;height:18px;color:var(--ink-mute);opacity:0;animation:nwArr 7s var(--ease) infinite}
.nw-new{display:inline-flex;align-items:center;gap:7px;font:600 12px var(--mono);color:var(--ink);background:#fff;border:1px solid var(--edge);border-radius:999px;padding:7px 8px 7px 12px;box-shadow:0 10px 24px -18px rgba(9,9,11,.4);
  opacity:0;transform:translateY(8px);animation:nwNew 7s var(--ease) infinite}
.nw-new svg{width:14px;height:14px;color:var(--orange)}
.nw-new span{font:600 10px var(--sans);color:var(--orange-ink);background:var(--orange-tint);border-radius:999px;padding:3px 7px}
@keyframes nwStrike{0%,12%{transform:scaleX(0)}24%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes nwArr{0%,24%{opacity:0}32%,90%{opacity:1}100%{opacity:0}}
@keyframes nwNew{0%,30%{opacity:0;transform:translateY(8px)}42%,90%{opacity:1;transform:none}100%{opacity:0}}

/* 6. tell me more: question, typing, answer */
.nf-chat{display:grid;gap:8px}
.nc-in,.nc-out{max-width:82%;font-size:12.5px;line-height:1.4;padding:9px 12px;border-radius:14px}
.nc-in{justify-self:start;background:#fff;border:1px solid var(--edge);border-bottom-left-radius:4px;animation:ncIn 8s var(--ease) infinite}
.nc-typing{justify-self:end;display:flex;gap:4px;background:#fff;border:1px solid var(--edge);border-radius:14px;padding:10px 12px;opacity:0;animation:ncType 8s var(--ease) infinite}
.nc-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-mute);animation:ncDot 1s ease-in-out infinite}
.nc-typing i:nth-child(2){animation-delay:.15s}.nc-typing i:nth-child(3){animation-delay:.3s}
.nc-out{justify-self:end;background:var(--ink-grad);color:#fff;border-bottom-right-radius:4px;opacity:0;margin-top:-38px;animation:ncOut 8s var(--ease) infinite}
@keyframes ncIn{0%{opacity:0;transform:translateY(6px)}8%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ncType{0%,16%{opacity:0}22%,40%{opacity:1}46%,100%{opacity:0}}
@keyframes ncOut{0%,44%{opacity:0;transform:translateY(6px)}52%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ncDot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.js .nf.in:hover{transform:translateY(-4px)}
.nf-stage{height:188px}
.nf-brief{padding:12px 14px}
.nb-top{margin-bottom:6px}
.nf-brief i{height:6px;margin:6px 0}
.nb-sent{margin-top:6px}

/* ===== Button hover lock (2026-10-25): every hover is stated in full so no older layer
   (sun-2 #27272A, cobalt-ink) can turn a white button dark with dark text. ===== */
.btn-sun,.btn-sun:hover,.btn-sun:focus-visible,.plan.pop .btn-sun,.plan.pop .btn-sun:hover{color:#09090B}
.btn-sun:hover,.plan.pop .btn-sun:hover{background:#FFFFFF;border-color:transparent;box-shadow:0 1px 0 #fff inset,0 14px 28px -14px rgba(9,9,11,.55)}
.plan.pop .btn-sun:hover{box-shadow:0 0 0 3px rgba(255,255,255,.18),0 14px 28px -14px rgba(0,0,0,.6)}
.btn-line:hover,.plan .btn-line:hover,.note .btn-line:hover{background:#FFFFFF;color:#09090B;border-color:#09090B}
.btn-line.light:hover,.final .btn-line.light:hover,.mbar .btn-line:hover{background:rgba(255,255,255,.08);color:#fff;border-color:#fff}
.btn-ink:hover,.btn-violet:hover{background:linear-gradient(160deg,#3F3F46,#18181B);color:#fff}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}

/* ===== Hero: the real app (2026-10-25). Screens captured from the demo workspace at 1440x900 @2x,
   crossfaded inside the browser frame; tabs below name each screen and fill while it is up. ===== */
.window.shots{background:#F4F2F0}
.shot-stage{position:relative;aspect-ratio:1440/900;background:#F4F2F0;overflow:hidden}
.shot-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  opacity:0;transform:scale(1.012);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.shot-stage img.on{opacity:1;transform:none}
.window.shots .w-url{min-width:220px;text-align:center;transition:opacity .3s}
.shot-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:26px auto 0}
.shot-tabs button{position:relative;overflow:hidden;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--edge);
  background:rgba(255,255,255,.7);color:var(--ink-mute);font:600 13.5px var(--sans);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.shot-tabs button:hover{background:#fff;color:var(--ink);border-color:#D4D4D8}
.shot-tabs button.on{background:#fff;color:var(--ink);border-color:#D4D4D8;box-shadow:0 1px 2px rgba(9,9,11,.06),0 8px 18px -12px rgba(124,45,18,.35)}
.shot-tabs button span{position:relative;z-index:1}
.shot-tabs button i{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.shot-tabs button.run i{animation:shotfill var(--shot-ms,5200ms) linear forwards}
@keyframes shotfill{to{transform:scaleX(1)}}
@media (max-width:640px){.shot-tabs{gap:6px;margin-top:18px}.shot-tabs button{height:34px;padding:0 12px;font-size:12.5px}.window.shots .w-url{min-width:0}}
@media (prefers-reduced-motion:reduce){.shot-stage img{transition:none;transform:none}}

/* ===== Button flicker fix (2026-10-25). The white buttons were a gradient over a transparent
   base colour; on hover the gradient dropped instantly while the base faded in from transparent,
   so the dark card behind flashed through. Solid base colour underneath, and no background
   transition on any button (only lift, shadow, border and text colour animate). ===== */
.btn{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s,color .2s}
.btn-sun{background-color:#FFFFFF}
.btn-line{background-color:#FFFFFF}
.btn-line.light,.final .btn-line.light,.mbar .btn-line{background-color:transparent}
.btn-ink,.btn-violet{background-color:#18181B}

/* ===== Navigation (2026-10-25): Product + Resources mega menus, Pricing, Features.
   Panels hang centred under the whole nav pill; hover opens them, click/tap and keyboard too. ===== */
.nav{position:relative;align-items:center}
.dd{position:static}
.dd-btn{display:inline-flex;align-items:center;gap:5px;font:500 14.5px var(--sans);color:var(--ink-soft);background:none;border:0;
  padding:9px 14px 9px 16px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.dd-btn .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.dd-btn:hover,.dd.open .dd-btn{color:var(--ink);background:#F4F4F5}
.dd.open .dd-btn .chev{transform:rotate(180deg)}
.dd.is-cur .dd-btn{color:var(--ink)}
.mega{position:absolute;top:calc(100% + 10px);left:50%;z-index:60;display:grid;gap:8px;padding:14px;border-radius:22px;background:#fff;
  border:1px solid var(--edge);box-shadow:0 2px 4px rgba(9,9,11,.04),0 30px 70px -30px rgba(124,45,18,.35),0 18px 40px -24px rgba(9,9,11,.28);
  opacity:0;visibility:hidden;transform:translate(-50%,6px) scale(.985);transform-origin:50% 0;
  transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s linear .28s}
.mega::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd.open .mega{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s}
.mega-product{grid-template-columns:330px 230px;width:max-content}
.mega-resources{grid-template-columns:330px 330px;width:max-content}
.mega-col{display:grid;align-content:start;gap:2px}
.mega h5{margin:6px 12px 8px;font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-mute)}
.nav .mi,.mi{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;color:var(--ink);background:none;transition:background .2s}
.nav a.mi:hover,a.mi:focus-visible{background:#FAF7F5}
.mi-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--orange-tint,#FFF1E6);border:1px solid var(--orange-line,#FED7AA);transition:transform .25s var(--ease)}
a.mi:hover .mi-ic{transform:translateY(-1px)}
.mi-ic svg{width:18px;height:18px;fill:none;stroke:var(--orange-ink,#C2410C);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mi-tx{display:grid;gap:2px;min-width:0}
.mi-tx b{font:600 14.5px var(--sans);letter-spacing:-.005em}
.mi-tx span{font-size:13px;line-height:1.35;color:var(--ink-mute)}
.mi.soon{cursor:default}
.mi.soon .mi-ic{background:#F4F4F5;border-color:var(--edge)}
.mi.soon .mi-ic svg{stroke:#A1A1AA}
.mi.soon .mi-tx b{color:var(--ink-soft)}
.mi em,.ftr .soon em,.mnav .soon em{font:600 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-ink,#C2410C);
  background:var(--orange-tint,#FFF1E6);border:1px solid var(--orange-line,#FED7AA);border-radius:999px;padding:3px 7px;margin-left:auto;align-self:center;white-space:nowrap}
.mega-card{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:18px;border-radius:16px;text-decoration:none;color:#fff;min-height:200px;
  background:radial-gradient(120% 90% at 100% 0%,rgba(251,146,60,.55),transparent 60%),linear-gradient(160deg,#27272A,#09090B)}
.nav a.mega-card:hover{background:radial-gradient(120% 90% at 100% 0%,rgba(251,146,60,.7),transparent 60%),linear-gradient(160deg,#27272A,#09090B);color:#fff}
.mc-k{font:600 11px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:#FDBA74}
.mega-card b{font:600 18px/1.25 var(--display);letter-spacing:-.01em}
.mc-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:#E4E4E7}
.mc-go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.mega-card:hover .mc-go svg{transform:translateX(3px)}
@media (max-width:1100px){.mega-product{grid-template-columns:300px 200px}.mega-resources{grid-template-columns:300px 300px}}
@media (prefers-reduced-motion:reduce){.mega,.dd.open .mega{transition:none;transform:translate(-50%,0)}}

/* phone menu: Product and Resources fold open in place */
.mgroup{border-bottom:1px solid var(--lav-2)}
.mgroup summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:15px 6px;font:600 20px var(--display);letter-spacing:-.02em;cursor:pointer}
.mgroup summary::-webkit-details-marker{display:none}
.mgroup summary .chev{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .3s var(--ease)}
.mgroup[open] summary .chev{transform:rotate(180deg)}
.mgroup div{display:grid;padding:0 6px 10px}
.mnav .mgroup a,.mnav .mgroup .soon{display:flex;align-items:center;gap:8px;padding:10px 0;font:500 16px var(--sans);letter-spacing:0;border:0;color:var(--ink-soft);text-decoration:none}
.mnav .mgroup .soon{color:#A1A1AA}
.mnav .soon em{margin-left:6px}

/* footer: brand + up to five columns; unbuilt pages show as "Soon" */
.ftr-grid{grid-template-columns:1.6fr repeat(4,1fr)}
@media (max-width:960px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.ftr-grid{grid-template-columns:1fr 1fr}}
.ftr .soon{display:inline-flex;align-items:center;gap:8px;color:#71717A}
.ftr .soon em{margin-left:0;background:rgba(251,146,60,.12);border-color:rgba(251,146,60,.3);color:#FDBA74}
.nav .mega-card{padding:18px;border-radius:16px;color:#fff;font-size:inherit}
.ftr .soon{display:inline;line-height:1.5}
.ftr .soon em{display:inline-block;margin-left:7px;vertical-align:2px;padding:2px 6px}