/* Advisor Booking v4 (Manychat-grade): black text, green emphasis and underlines, white page.
   Type: Inter Tight 800 display (heavy, tight), Inter body, JetBrains Mono for labels and buttons.
   Motion: CSS keyframes + a 6KB script (reveal on scroll, count-up, ticker, phone thread, tile scenes, FAQ). No frameworks. */
:root{
  --ink:#0e0e0e; --ink-2:#161616; --text:#1f2937; --muted:#6b7280; --muted-2:#9ca3af; --line:#e5e7eb; --line-2:#ececec;
  --paper:#ffffff; --paper-2:#f7f7f7;
  --accent:#0F7A62; --accent-ink:#ffffff; --accent-hover:#0B5F4C; --accent-tint:#E8F4EF; --accent-tint-deep:#BFE0D3; --accent-deep:#0A4A3C; --accent-bright:#2FBF8F; --accent-pale:#CFEFE3;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:16px; --radius-lg:24px; --radius-xl:32px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.18); --shadow-lg:0 30px 60px -20px rgba(0,0,0,.28);
  --max:1160px; --ease:cubic-bezier(.2,.7,.2,1); --dur:.7s;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-48px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:999px;z-index:100;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--accent-bright)}
.on-dark .howcard :focus-visible{outline-color:var(--accent)}
.pane--green :focus-visible{outline-color:#fff}

/* ---------- Layout ---------- */
.container{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.section{padding-block:120px}
.section--tight{padding-block:72px}
@media (max-width:760px){.section{padding-block:72px}.section--tight{padding-block:48px}}
.center{text-align:center}
.narrow{max-width:640px;margin-inline:auto}
.narrow--wide{max-width:820px}
.nowrap{white-space:nowrap}
.left{text-align:left}
.sub--tight{margin-top:0}
.dot--light{width:10px;height:10px;border-radius:50%;background:var(--accent-bright);display:inline-block}
.stack{display:flex;flex-direction:column;align-items:center;gap:14px}
.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}
.grid{display:grid;gap:24px}
.grid>*{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- Type ---------- */
.display{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;line-height:.98;color:var(--ink);text-wrap:balance}
.h1{font-size:clamp(38px,4.9vw,62px)}
.h2{font-size:clamp(36px,5.6vw,64px)}
.h3{font-size:clamp(22px,2.4vw,28px);font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.h4{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.sub{color:var(--muted);font-size:clamp(17px,1.6vw,20px);line-height:1.5;margin-top:20px;text-wrap:pretty}
.small{font-size:14px;color:var(--muted);line-height:1.5}
.fine{font-size:13px;color:var(--muted-2);line-height:1.5}
.mono{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.em,.sub b,.lead b,.row-list b{color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
.on-dark{color:#fff}
.on-dark .display{color:#fff}
.on-dark .sub{color:#b8b8b8}
.on-dark .small,.on-dark .fine{color:#9a9a9a}

/* Section icon above headlines (Manychat's spot mark) */
.spot{width:44px;height:44px;margin:0 auto 22px;color:var(--accent);display:flex;align-items:center;justify-content:center}
.spot svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.spot--left{margin:0 0 22px}

/* Underline that draws itself */
.ul{position:relative;display:inline-block;color:var(--accent);white-space:nowrap}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.075em;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .5s}
.in .ul::after,.ul.in::after{transform:scaleX(1)}
@media (max-width:420px){.ul{white-space:normal;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:.06em;text-underline-offset:.12em}.ul::after{display:none}}

/* ---------- Buttons ---------- */
.pill{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;border:2px solid var(--ink);font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;line-height:1;white-space:nowrap;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;cursor:pointer}
.pill .arr{display:inline-block;transition:transform .25s var(--ease)}
.pill:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pill:hover .arr{transform:translateX(5px)}
.pill--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill--accent:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.pill--outline{background:transparent;color:var(--ink)}
.pill--outline:hover{background:var(--ink);color:#fff}
.pill--light{background:#fff;border-color:#fff;color:var(--ink)}
.pill--light:hover{background:#f2f2f2;border-color:#f2f2f2}
.pill--sm{min-height:42px;padding:0 20px;font-size:12px}
.pill--lg{min-height:64px;padding:0 38px;font-size:14px}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:480px){.pill{white-space:normal;text-align:center;width:100%;max-width:440px;padding:16px 22px;line-height:1.3}.pill--sm{width:auto}}
.linkmono{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px;padding:14px 4px}
.linkmono .arr{transition:transform .25s var(--ease)}
.linkmono:hover .arr{transform:translateX(4px)}
.linkmono:hover{color:var(--accent)}

/* ---------- Nav ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.header.is-stuck{border-bottom-color:var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.nav__brand{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.mark{width:28px;height:28px;flex:0 0 28px}
.mark__body{fill:var(--ink)}
.mark__page{fill:var(--paper)}
.footer__brand .mark__body{fill:#fff}
.footer__brand .mark__page{fill:var(--ink)}
.nav__panel{display:flex;align-items:center;gap:28px;flex:1;justify-content:flex-end}
.nav__links{display:flex;gap:26px;margin-right:auto;margin-left:44px}
.nav__links a{font-size:14px;color:var(--muted);text-decoration:none;font-weight:500;padding:14px 0;position:relative;transition:color .2s;display:inline-block}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__phone{font-size:14px;color:var(--muted);text-decoration:none}
.nav__phone[hidden]{display:none}
.nav__toggle{display:none;width:44px;height:44px;border:0;background:none;padding:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px}
.nav__bar{display:block;width:22px;height:2px;background:var(--ink);transition:transform .25s,opacity .25s}
@media (max-width:900px){
  .nav__toggle{display:flex}
  .nav__panel{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--line);padding:16px max(20px,env(safe-area-inset-left,0px)) 24px;flex-direction:column;align-items:stretch;gap:16px;box-shadow:var(--shadow)}
  .nav.is-open .nav__panel{display:flex;animation:fadeDown .25s var(--ease)}
  .nav__links{flex-direction:column;gap:2px;margin:0}
  .nav__links a{display:block;padding:12px 4px;font-size:17px;color:var(--ink)}
  .nav__links a::after{display:none}
  .nav.is-open .nav__bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav__bar:nth-child(2){opacity:0}
  .nav.is-open .nav__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ---------- Reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rv.in{opacity:1;transform:none}
.rv--left{transform:translateX(-40px)}
.rv--right{transform:translateX(40px)}
.rv--scale{transform:scale(.94)}
.rv.in.rv--left,.rv.in.rv--right,.rv.in.rv--scale{transform:none}

/* ---------- Hero ---------- */
.hero{padding-block:48px 16px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
.hero .h1 .line{display:block;overflow:hidden}
.hero .h1 .line>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease)}
.hero.in .h1 .line>span{transform:none}
.hero .h1 .line:nth-child(2)>span{transition-delay:.08s}
.hero .h1 .line:nth-child(3)>span{transition-delay:.16s}
.hero .lead{max-width:560px;margin-top:28px;font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--muted)}
.hero .cta{margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.hero{text-align:center}.hero .lead{margin-inline:auto}.hero .cta{align-items:center}.hero .cta p{max-width:600px;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:22px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 2.4s infinite}

/* Phone mock */
.phone-col{position:relative}
.phone-wrap{position:relative;display:flex;justify-content:center;padding:32px 0 20px}
.phone{width:min(300px,82vw);aspect-ratio:9/18;background:var(--ink);border-radius:44px;padding:12px;box-shadow:var(--shadow-lg);position:relative;transform:rotate(-2deg);transition:transform 1.2s var(--ease)}
.in .phone{transform:rotate(0)}
.phone__screen{background:#fff;border-radius:34px;height:100%;overflow:hidden;display:flex;flex-direction:column}
.phone__bar{display:flex;align-items:center;gap:12px;padding:38px 16px 12px;border-bottom:1px solid var(--line)}
.phone__bar .av{width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--font-display)}
.phone__bar b{display:block;font-size:14px;line-height:1.2;color:var(--ink)}
.phone__bar span{display:block;font-size:11px;line-height:1.3;color:var(--muted);margin-top:2px}
.phone__notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:20px;background:var(--ink);border-radius:999px}
.thread{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.bub{max-width:84%;padding:10px 13px;border-radius:18px;font-size:13.5px;line-height:1.4;opacity:0;transform:translateY(10px) scale(.96);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bub.show{opacity:1;transform:none}
.bub--out{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.bub--in{align-self:flex-start;background:#f1f1f1;color:var(--ink);border-bottom-left-radius:6px}
.bub--sys{align-self:center;background:var(--accent-tint);color:var(--accent-hover);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;border-radius:999px;padding:7px 12px;text-align:center}
.typing{align-self:flex-start;background:#f1f1f1;border-radius:18px;padding:12px 14px;display:none;gap:5px}
.typing.show{display:inline-flex}
.typing i{width:6px;height:6px;border-radius:50%;background:#9a9a9a;animation:dots 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
.phone__foot{padding:10px 14px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.phone__foot span{flex:1;height:34px;border-radius:999px;background:#f3f3f3}
.phone__foot i{width:34px;height:34px;border-radius:50%;background:var(--accent)}

/* Ticker */
.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:56px;overflow:hidden;white-space:nowrap;padding:16px 0;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:inline-flex;gap:0;animation:marquee 34s linear infinite;will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex;align-items:center;gap:18px;padding:0 24px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);font-weight:600}
.ticker__item::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* ---------- Stat band ---------- */
.statband{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:48px 32px;max-width:980px;margin:48px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;box-shadow:var(--shadow)}
.stat{text-align:center;min-width:0}
.stat__num{font-family:var(--font-display);font-size:clamp(44px,6vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.stat--accent .stat__num{color:var(--accent)}
.stat__label{margin-top:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;line-height:1.5}
@media (max-width:640px){.statband{grid-template-columns:1fr;gap:32px;padding:36px 20px}}

/* ---------- Before / after pair ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;margin-top:56px;overflow-x:clip}
@media (max-width:860px){.pair{grid-template-columns:1fr}}
.pane{border-radius:var(--radius-lg);padding:40px 36px;display:flex;flex-direction:column;gap:22px}
.pane--grey{background:var(--paper-2);border:1px solid var(--line)}
.pane--green{background:var(--accent);color:#fff}
.pane .kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.pane--green .kicker{color:var(--accent-pale)}
.pane .h3{color:inherit}
.row-list{display:grid;gap:12px}
.row-list li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.5;padding:12px 0;border-top:1px solid rgba(0,0,0,.06)}
.pane--green .row-list li{border-top-color:rgba(255,255,255,.18)}
.row-list .mk{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-top:1px}
.pane--grey .mk{background:#e8e8e8;color:var(--muted)}
.mk--bad,.pane--grey .mk--bad{background:#FBE3E3;color:#C62828}
.mk--bad svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pane--green .mk{background:#fff;color:var(--accent)}
.pane--green .mk svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pane--green .row-list b{color:#fff;text-decoration-color:var(--accent-bright)}
.pane .pill{align-self:flex-start;margin-top:auto}
@media (max-width:480px){.pane .pill{align-self:stretch}}

/* ---------- "See how it works" stage ---------- */
.stage{background:var(--accent-deep);border-radius:var(--radius-xl);padding:56px;position:relative;overflow:hidden;color:#fff;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px}
.stage__grid{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:48px;align-items:center}
@media (max-width:900px){.stage{padding:28px 20px}.stage__grid{grid-template-columns:1fr}}
.howcard{background:#fff;color:var(--ink);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-lg)}
.howcard .h3{margin-bottom:12px}
.howcard p.small{margin-bottom:12px}
.howlist{display:grid;gap:4px}
.howlist button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:14px 14px;cursor:pointer;transition:background .2s;color:var(--ink)}
.howlist button:hover{background:var(--paper-2)}
.howlist button[aria-pressed="true"]{background:var(--accent-tint)}
.howlist b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.howlist span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.howlist button[aria-pressed="true"] span::after{content:" \2192"}
.stage__note{position:absolute;top:28px;right:32px;max-width:240px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.55;color:var(--accent-pale);text-transform:uppercase}
@media (max-width:900px){.stage__note{position:static;max-width:none;margin-bottom:20px}}
.stage .phone{transform:none;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}

/* ---------- Process tiles with scenes ---------- */
.tile3{display:flex;flex-direction:column;gap:18px}
.scene{aspect-ratio:4/3;border-radius:var(--radius);background:var(--paper-2);border:1px solid var(--line);position:relative;overflow:hidden;padding:20px}
.scene--grid{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;background-color:var(--accent-tint)}
.scene .rows{display:grid;gap:8px}
.scene .row{height:34px;border-radius:9px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 10px;opacity:0;transform:translateX(-14px)}
.in .scene .row{animation:rowIn .5s var(--ease) forwards}
.in .scene .row:nth-child(1){animation-delay:.1s}.in .scene .row:nth-child(2){animation-delay:.3s}.in .scene .row:nth-child(3){animation-delay:.5s}.in .scene .row:nth-child(4){animation-delay:.7s}.in .scene .row:nth-child(5){animation-delay:.9s}
.scene .row i{width:16px;height:16px;border-radius:50%;background:var(--accent-tint);flex:0 0 16px}
.scene .row s{text-decoration:none;height:8px;border-radius:4px;background:#e4e4e4;flex:1}
.scene .row s:nth-of-type(2){flex:.5}
.scene .row em{font-style:normal;font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;border-radius:999px;padding:3px 8px;opacity:0;transform:scale(.6)}
.in .scene .row em{animation:stamp .4s var(--ease) forwards}
.in .scene .row:nth-child(1) em{animation-delay:1.1s}.in .scene .row:nth-child(2) em{animation-delay:1.35s}.in .scene .row:nth-child(3) em{animation-delay:1.6s}.in .scene .row:nth-child(4) em{animation-delay:1.85s}
.scene--cal .cal{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:100%}
.scene--cal .d{background:#fff;border:1px solid var(--line);border-radius:8px;display:grid;grid-template-rows:auto 1fr 1fr 1fr;gap:4px;padding:6px}
.scene--cal .d b{font-family:var(--font-mono);font-size:9px;color:var(--muted);text-align:center;letter-spacing:.06em}
.scene--cal .slot{border-radius:4px;background:#f1f1f1}
.scene--cal .slot.b{background:var(--accent);opacity:0;transform:scale(.7)}
.in .scene--cal .slot.b{animation:stamp .4s var(--ease) forwards}
.in .scene--cal .slot.b:nth-of-type(1){animation-delay:.3s}
.scene--cal .d:nth-child(2) .slot.b{animation-delay:.6s!important}.scene--cal .d:nth-child(3) .slot.b{animation-delay:.9s!important}.scene--cal .d:nth-child(4) .slot.b{animation-delay:1.2s!important}.scene--cal .d:nth-child(5) .slot.b{animation-delay:1.5s!important}
.tile3 .step{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600}
.tile3 .h4{font-size:19px}
.tile3 p{font-size:15px;color:var(--muted);line-height:1.55}

/* ---------- Results (shimmer) ---------- */
.result{border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:12px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s}
.result:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.result__media{aspect-ratio:16/10;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(100deg,#f1f1f1 30%,#fafafa 50%,#f1f1f1 70%);background-size:200% 100%;animation:shimmer 2.2s linear infinite}
.result__media .tag{position:absolute;top:10px;left:10px}
.result__media .ph{position:absolute;right:12px;bottom:10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.result h3{font-size:15px;font-weight:700;color:var(--ink);line-height:1.4}
.result .who{font-size:13px;color:var(--muted)}
.result .pillrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);line-height:1.6}
.tag{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;background:var(--accent-tint);color:var(--accent-hover)}

/* ---------- Package ---------- */
.tile{display:flex;align-items:center;gap:14px;padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-tint-deep)}
.tile .icon{width:40px;height:40px;border-radius:10px;background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px}
.tile .icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.ctabox{background:var(--accent-tint);border:1px solid var(--accent-tint-deep);border-radius:var(--radius-lg);padding:36px 28px;text-align:center;max-width:760px;margin:48px auto 0}
.ctabox p{color:var(--ink);font-weight:500;margin-bottom:20px;font-size:17px}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:960px;margin:28px auto 0;text-align:left}
.pricing .card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.pricing b{display:block;color:var(--ink);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.pricing span{font-size:15px;color:var(--muted);line-height:1.5}
.pricing--two{grid-template-columns:repeat(2,1fr);max-width:760px}
/* Five core tiles: three up, then two centered */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;list-style:none;margin:48px 0 0;padding:0}
.tiles .tile{flex:1 1 280px;max-width:calc((100% - 32px)/3)}
@media (max-width:980px){.tiles .tile{max-width:calc((100% - 16px)/2)}}
@media (max-width:640px){.tiles .tile{max-width:none;flex-basis:100%}}
.also{max-width:760px;margin-inline:auto;color:var(--muted);line-height:1.6}
/* The offer: eleven pieces, three across, last row centered */
.offers{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;list-style:none;margin:44px 0 0;padding:0;text-align:left}
.offers li{flex:1 1 300px;max-width:calc((100% - 32px)/3);background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}
.offers li:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-tint-deep)}
.offers .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:600}
.offers h3{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25;margin:0;letter-spacing:-.01em}
.offers p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
@media (max-width:980px){.offers li{max-width:calc((100% - 16px)/2)}}
@media (max-width:640px){.offers li{max-width:none;flex-basis:100%}}
@media (max-width:760px){.pricing,.pricing--two{grid-template-columns:1fr}}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:24px auto 0}
.shot{aspect-ratio:4/3;border-radius:14px;background:linear-gradient(100deg,#f1f1f1 30%,#fafafa 50%,#f1f1f1 70%);background-size:200% 100%;animation:shimmer 2.6s linear infinite;display:flex;align-items:flex-end;padding:14px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);text-align:left;line-height:1.6}
@media (max-width:640px){.shots{grid-template-columns:1fr}}

/* ---------- FAQ (black) ---------- */
.faq-sec{background:var(--ink);color:#fff;padding-block:120px}
@media (max-width:760px){.faq-sec{padding-block:72px}}
.faq-sec .spot{color:var(--accent-bright)}
.faq{max-width:820px;margin:56px auto 0}
.faq details{border-top:1px solid rgba(255,255,255,.14)}
.faq details:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-size:17px;font-weight:500;color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{width:12px;height:12px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:transform .3s var(--ease);flex:0 0 12px;margin-right:6px}
.faq details[open] summary .chev{transform:rotate(-135deg)}
.faq .a{overflow:hidden;color:#b8b8b8;font-size:15.5px;line-height:1.65;padding:0 4px}
.faq .a>div{padding-bottom:22px}
.faq .a p+p{margin-top:10px}
.faq .a ul{list-style:disc;padding-left:20px}
.faq .a ol{list-style:decimal;padding-left:20px}
.faq .a p+ol,.faq .a ol+p,.faq .a ul+p{margin-top:10px}
.faq .a li{margin:4px 0}
.faq .a b{color:#fff}

/* ---------- Final + footer (black) ---------- */
.final{background:var(--ink);color:#fff;padding-block:40px 0}
.footer{background:var(--ink);color:#b8b8b8;padding-block:72px 24px;font-size:14px}
.footer__top{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
@media (max-width:860px){.footer__top{grid-template-columns:1fr}}
.footer__brand{color:#fff;font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.04em;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:36px}
@media (max-width:560px){.footer__cols{grid-template-columns:1fr 1fr}}
.footer__cols h3{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#8a8a8a;margin-bottom:12px;font-weight:600}
.footer__cols a{display:block;color:#d4d4d4;text-decoration:none;font-size:13.5px;padding:9px 0;transition:color .2s}
.footer__cols a:hover{color:var(--accent-bright)}
.bigstat{background:var(--accent-tint);color:var(--ink);border-radius:var(--radius);padding:28px 28px 24px;overflow:hidden;position:relative;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end}
.bigstat .n{font-family:var(--font-display);font-weight:300;font-size:clamp(64px,9vw,120px);line-height:.9;letter-spacing:-.05em;color:var(--accent)}
.bigstat .t{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.03em;margin-top:8px;color:var(--ink)}
.bigstat .as{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.footer__disc{margin-top:40px;font-size:12.5px;line-height:1.6;color:#8f8f8f;max-width:900px}
.footer__copy{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#777}
.ctabar{margin-top:40px}
.ctabar a{display:flex;align-items:center;justify-content:center;gap:14px;min-height:88px;border-radius:999px;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--font-mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:background .25s,transform .25s var(--ease)}
.ctabar a:hover{background:var(--accent-hover);transform:translateY(-2px)}
.ctabar a .arr{transition:transform .25s var(--ease)}
.ctabar a:hover .arr{transform:translateX(6px)}
@media (max-width:480px){.ctabar a{min-height:72px;font-size:12px;padding:0 20px;text-align:center}}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:55;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-right,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.sticky-cta.is-on{transform:none}
.sticky-cta .pill{width:100%;max-width:none;min-height:52px;font-size:13px;box-shadow:none}
@media (min-width:901px){.sticky-cta{display:none}}

/* ---------- Book page ---------- */
.book{padding-block:48px 120px}
.book__card{display:grid;grid-template-columns:minmax(260px,380px) 1fr;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-lg);overflow:hidden}
.book__side{padding:40px 36px;border-right:1px solid var(--line);background:var(--paper-2)}
.book__side .host{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.book__side h1{font-family:var(--font-display);font-size:34px;line-height:1.02;font-weight:800;color:var(--ink);margin-top:10px;letter-spacing:-.04em}
.book__meta{margin-top:22px;display:grid;gap:12px}
.book__meta li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14px;font-weight:500}
.book__meta svg{width:18px;height:18px;flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.book__prep{margin-top:26px;color:var(--text);font-size:15px;line-height:1.6}
.book__prep ol{list-style:decimal;padding-left:20px;margin-top:8px}
.book__prep li{margin:6px 0}
.book__main{padding:40px 36px;min-width:0}
.book__main h2{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-bottom:16px}
.calendly-mount{min-height:200px}
.calendly-frame{width:100%;height:720px;border:0;border-radius:12px}
.notice{background:var(--paper-2);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:10px;padding:14px 16px;color:var(--muted);font-size:15px;line-height:1.5}
.notice a,.small a,.book__prep a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.book .small{overflow-wrap:anywhere;margin-top:12px}
@media (max-width:880px){.book__card{grid-template-columns:1fr}.book__side{border-right:0;border-bottom:1px solid var(--line)}}

/* ---------- Legal ---------- */
.legal{max-width:760px;margin:0 auto;padding-block:56px 120px}
.legal h1{font-family:var(--font-display);font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.legal h2{font-size:22px;font-weight:700;color:var(--ink);margin-top:36px;margin-bottom:10px;letter-spacing:-.01em}
.legal h3{font-size:17px;font-weight:600;color:var(--ink);margin-top:20px;margin-bottom:6px}
.legal p,.legal li{font-size:16px;line-height:1.65;color:var(--text);margin-bottom:12px}
.legal ul{list-style:disc;padding-left:22px}

/* ---------- Keyframes ---------- */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,122,98,.45)}70%{box-shadow:0 0 0 8px rgba(15,122,98,0)}}
@keyframes dots{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes rowIn{to{opacity:1;transform:none}}
@keyframes stamp{to{opacity:1;transform:scale(1)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- Reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.hero .h1 .line>span,.bub,.scene .row,.scene .row em,.scene--cal .slot.b{opacity:1!important;transform:none!important}
  .ul::after{transform:scaleX(1)!important}
  .phone{transform:none}
  .ticker__track{animation:none!important}
}
.no-motion .rv,.no-motion .hero .h1 .line>span,.no-motion .bub{opacity:1;transform:none;transition:none}
/* Hero headline: the three display lines are for wide screens; on phones the sentence flows naturally so no line holds one or two words. */
@media (max-width:600px){.h1{font-size:clamp(32px,9.3vw,36px)}.hero .h1 .line,.hero .h1 .line>span,.h1 .line,.h1 .line>span,.hero .h1 .ul{display:inline;overflow:visible;transform:none;transition:none;opacity:1}.h1 .line::after{content:" "}.hero .eyebrow{display:inline-block;line-height:1.9;margin-bottom:18px}.hero .eyebrow::before{display:inline-block;vertical-align:middle;margin-right:10px}}
/* h1 flows naturally on phones */

/* Problem section as one column, and the thin legal line that replaced the footer. */
.pair--single{grid-template-columns:minmax(0,760px);justify-content:center}
.pricing-wrap{scroll-margin-top:96px}
.legal-line{background:var(--ink);text-align:center;padding:14px 20px 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8d8d8d}
.legal-line a{display:inline-block;color:#bdbdbd;text-decoration:none;padding:12px 10px}
.legal-line a:hover,.legal-line a:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.legal-line span{padding:0 2px}
/* Long URLs in the legal pages wrap instead of pushing the page wider on phones. */
main p,main li{overflow-wrap:break-word}
/* Phones: the button label stays on one line at every width down to 320px; padded boxes give it room. */
@media (max-width:480px){.pill,.pill--lg{white-space:normal;font-size:clamp(11px,3.4vw,13px);letter-spacing:.08em;padding:15px 18px;gap:10px;line-height:1.2}.pane{padding:28px 20px}.ctabox{padding:28px 18px}}
/* Headings never leave one short word alone on the last line. */
h2,h3{text-wrap:balance}
.phone__bar span{text-wrap:balance}
@media (max-width:600px){.nowrap--wide{white-space:normal}}
@media (max-width:360px){.book__side{padding:32px 20px}.book__side h1{font-size:32px}}
.phone__bar span span{display:inline;margin:0;font-size:inherit;white-space:nowrap}
@media (max-width:340px){.phone__bar .sep{display:none}.phone__bar .fit{display:block}}

/* Audit fixes: the stage card may shrink inside its grid; tighter paddings on the narrowest phones so the button fits. */
@media (max-width:900px){.stage__grid>*{min-width:0}}
@media (max-width:480px){.howcard{padding:24px 18px}}
@media (max-width:360px){.stage{padding:24px 14px}.howcard{padding:22px 16px}.howcard .pill .arr{display:none}}
/* Anchor links land with air under the sticky header. */
main section[id]{scroll-margin-top:24px}
/* Short landscape phones: the fixed bar would take a third of the screen with the header. */
@media (max-height:500px){.sticky-cta{display:none!important}}
/* Very large text sizes: headings and labels wrap instead of running off screen. */
.h1,.h2{overflow-wrap:break-word}
/* Three steps stay in one row on tablets instead of two plus an orphan. */
@media (max-width:980px) and (min-width:641px){.grid-3{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (max-width:480px){.howcard .pill{padding-inline:14px;letter-spacing:.06em}}

/* ---------- "See it in action": menu card + channel device ---------- */
.stage--action{padding:40px}
.stage--action .stage__grid{grid-template-columns:minmax(260px,340px) 1fr;gap:40px;align-items:stretch}
@media (max-width:900px){.stage--action{padding:20px 16px 28px}.stage--action .stage__grid{grid-template-columns:1fr;gap:20px}}
.action__menu{display:flex;flex-direction:column}
.action__menu .h3{margin-bottom:14px}
.action__list{display:grid;gap:4px;margin:0 -10px;position:relative}
.action__list button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:12px;padding:12px 14px;cursor:pointer;transition:background .2s;color:var(--ink);font:inherit}
.action__list button:hover{background:var(--paper-2)}
.action__list button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.action__list button[aria-selected="true"]{background:var(--accent-tint)}
.action__list b{display:block;font-size:14.5px;font-weight:600;line-height:1.3;margin-bottom:5px}
.action__list span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:600}
.action__list button[aria-selected="true"] span::after{content:" \2192"}
.action__cta{margin-top:auto;padding-top:22px}
/* Tablet: the menu becomes a two-column grid of chips; phone: one swipeable row with an edge fade */
@media (max-width:900px){
  .action__menu{padding:22px 18px 18px}
  .action__menu .h3{display:none}
  .action__list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}
  .action__list button{border:1px solid var(--line);background:#fff;padding:12px 14px;display:flex;flex-direction:column;justify-content:space-between;gap:8px}
  .action__list button[aria-selected="true"]{border-color:var(--accent);background:var(--accent-tint)}
  .action__list b{margin-bottom:0}
  .action__cta{display:none}
}
@media (max-width:640px){
  .action__list{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:2px 18px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 36px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 36px),transparent)}
  .action__list::-webkit-scrollbar{display:none}
  .action__list button{flex:0 0 clamp(190px,62vw,240px);scroll-snap-align:center}
}
.action__stage{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:18px;min-width:0}
.action__caption{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.55;color:var(--accent-pale);text-transform:uppercase;max-width:260px;min-height:52px;align-self:flex-end;border-left:2px solid rgba(255,255,255,.35);padding-left:12px;margin:0;opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.action__caption.show{opacity:1;transform:none}
@media (max-width:900px){.action__caption{align-self:flex-start;max-width:none;min-height:0;margin-bottom:4px}}

/* Device: a phone for LinkedIn and text, a window for email */
.device{margin:0;position:relative;transition:opacity .3s var(--ease),transform .3s var(--ease);width:100%;max-width:100%}
.device.is-switching{opacity:0;transform:translateY(10px)}
.device__frame{position:relative;background:var(--ink);border-radius:44px;padding:12px;width:min(300px,100%);aspect-ratio:9/18;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);margin:0 auto;transition:width .3s var(--ease),border-radius .3s var(--ease)}
.device__screen{background:#fff;border-radius:34px;height:100%;overflow:hidden;display:flex;flex-direction:column;position:relative}
.device__notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:20px;background:var(--ink);border-radius:999px;z-index:2}
.hd{display:none;align-items:center;gap:10px;padding:40px 16px 12px;border-bottom:1px solid var(--line);color:var(--ink)}
.hd .av{width:34px;height:34px;border-radius:50%;background:var(--accent-tint);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;font-family:var(--font-display);flex:0 0 34px}
.hd b{display:block;font-size:14px;line-height:1.2;color:var(--ink)}
.hd small{display:block;font-size:11px;line-height:1.3;color:var(--muted);margin-top:2px}
.device[data-skin="li"] .hd--li,.device[data-skin="sms"] .hd--sms,.device[data-skin="mail"] .hd--mail{display:flex}
.li-mark{width:22px;height:22px;border-radius:4px;background:#0A66C2;color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 22px}
.hd--sms{flex-direction:column;gap:4px;text-align:center;padding-top:36px}
.hd--sms .av{width:40px;height:40px;background:#E9E9EB;color:var(--muted)}
.device .thread{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.device__foot{padding:10px 14px 16px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.device__foot span{flex:1;height:34px;border-radius:999px;background:#f3f3f3}
.device__foot i{width:34px;height:34px;border-radius:50%;background:var(--accent)}
.device .bub[data-from]::before{content:attr(data-from);display:none;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* LinkedIn skin */
.device[data-skin="li"] .bub--out{background:#E8F1FB;color:var(--ink);border-bottom-right-radius:6px}
.device[data-skin="li"] .bub--in{background:#F3F2EF;color:var(--ink)}
.device[data-skin="li"] .bub[data-from]::before{display:block}
.device[data-skin="li"] .device__foot i{background:#0A66C2}
/* Text (SMS) skin */
.device[data-skin="sms"] .bub--out{background:var(--accent);color:#fff}
.device[data-skin="sms"] .bub--in{background:#E9E9EB;color:var(--ink)}
.device[data-skin="sms"] .bub--sys{background:transparent;color:var(--muted)}
/* Email skin: the phone becomes a window */
.device[data-skin="mail"] .device__frame{width:min(540px,100%);aspect-ratio:9/10;border-radius:16px;padding:0;background:#fff;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.device[data-skin="mail"] .device__screen{border-radius:16px}
.device[data-skin="mail"] .device__notch{display:none}
.hd--mail{padding:12px 16px;gap:12px;background:var(--paper-2);align-items:center}
.win__dots{display:inline-flex;gap:6px}
.win__dots i{width:10px;height:10px;border-radius:50%;background:#ddd}
.win__tab{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.win__subject{font-weight:600;font-size:14px;color:var(--ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.device[data-skin="mail"] .thread{gap:12px;padding:16px}
.device[data-skin="mail"] .bub{max-width:92%;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);padding:12px 14px}
.device[data-skin="mail"] .bub--out{align-self:flex-start}
.device[data-skin="mail"] .bub--in{background:var(--paper-2)}
.device[data-skin="mail"] .bub--sys{align-self:center;border:0;background:var(--accent-tint);color:var(--accent-hover);border-radius:999px;padding:7px 12px}
.device[data-skin="mail"] .bub[data-from]::before{display:block}
.device[data-skin="mail"] .device__foot{display:none}
.device[data-skin="mail"] .typing{border-radius:12px}
/* The Monday report, drawn as bars rather than numbers */
.bub--report{width:100%;max-width:100%!important;align-self:stretch}
.bub--report>b{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:2px}
.bub--report .rep{display:grid;gap:9px;margin-top:10px}
.bub--report .rep div{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;font-size:12px;color:var(--muted)}
.bub--report .rep i{display:block;height:8px;border-radius:4px;background:var(--accent-tint);position:relative;overflow:hidden}
.bub--report .rep i::after{content:"";position:absolute;inset:0;width:var(--w,50%);background:var(--accent);border-radius:4px;transform-origin:left;animation:barIn .8s var(--ease) both}
.bub--report .rep div:nth-child(2) i::after{animation-delay:.1s}.bub--report .rep div:nth-child(3) i::after{animation-delay:.2s}.bub--report .rep div:nth-child(4) i::after{animation-delay:.3s}.bub--report .rep div:nth-child(5) i::after{animation-delay:.4s}
@keyframes barIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Pinned before/after: the green pane rolls over the grey one as you scroll ---------- */
.pin{position:relative}
.pin__stick{position:relative}
/* Too little room to pin (short viewport): fall back to the static side-by-side layout */
.pin.pin--static{height:auto!important}
.pin--static .pin__stick{position:relative!important;top:auto!important}
.pin--static .pane{transform:none!important}
@media screen and (min-width:861px) and (prefers-reduced-motion:no-preference){
  .pin{height:200vh}
  .pin__stick{position:sticky;top:max(88px,calc((100vh - var(--ph,640px))/2))}
  .pair--pin .pane{will-change:transform;transform-origin:center}
  .pair--pin .pane--grey{transform:translateX(calc((50% + 12px)*(1 - var(--p,0)))) scale(calc(.9 + .1*var(--p,0)))}
  .pair--pin .pane--green{position:relative;z-index:2;transform:translate(calc((-50% - 12px)*(1 - var(--p,0))),calc(90vh*(1 - var(--p,0)))) rotate(calc(-6deg*(1 - var(--p,0))));box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
}