/* Tarent landing — FINAL palette + chrome (post-team-feedback).
   Loads after styles.css and landing/parts.css. White-first, Blue Hat blue,
   black used only as an accent. Overrides the SecondTouch indigo tokens. */

:root{
  --bg-page:#ffffff;--bg-sidebar:#ffffff;--bg-card:#ffffff;
  --bg-input:#f4f7fb;--bg-hover:#eaf0f8;--border:#e5e6ee;
  --text-heading:#0a1526;--text-primary:#3a4658;--text-muted:#6a7789;--text-faint:#98a3b2;
  --accent:#2145ca;--accent-light:rgba(33,69,202,.075);
  --ink:#0a1526;--ink-soft:#16233a;
  --tint:#f4f8fd;--tint-2:#e9f1fb;
  --success:#177d4e;--danger:#c0362c;--warning:#a9760a;
  --chart-active:#177d4e;--chart-warm:#1a37a8;--chart-cold:#64748b;
  --msg-sent:#1d4ed8;--msg-received:#a9760a;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text-primary);font-family:'Aeonik','Aeonik Pro',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:#1a37a8}
img,svg{max-width:100%}

/* ── layout skeleton ─────────────────────────────── */
.f-wrap{max-width:1160px;margin:0 auto;padding:0 34px}
.f-block{background:#fff;position:relative}
.f-tint{background:var(--tint)}
.f-block>section{padding:clamp(74px,7.6vw,118px) 0!important;border:0!important;background:transparent!important}
.f-block>section>.wrap,.f-block>section>div{max-width:1160px}
.f-sec{padding:clamp(74px,7.6vw,118px) 0}
.f-sec.tight{padding:clamp(52px,5vw,76px) 0}
.f-eyebrow{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:18px}
.f-h2{font-size:clamp(29px,3.5vw,44px);line-height:1.1;letter-spacing:-.02em;color:var(--text-heading);font-weight:640;margin:0 0 18px;text-wrap:pretty;max-width:22ch}
.f-h2.wide{max-width:30ch}
.f-lede{font-size:16.5px;line-height:1.62;color:var(--text-primary);max-width:62ch;margin:0;text-wrap:pretty}
.f-center{text-align:center}
.f-center .f-h2,.f-center .f-lede{margin-left:auto;margin-right:auto}
.f-center .f-h2{max-width:26ch}

/* ── nav ─────────────────────────────────────────── */
/* FIXED, not sticky, and compresses on scroll (.slim is toggled by
   landing/nav.js). Height animates on .f-nav-in; the logo scales rather than
   changing font-size, so the transition stays on the compositor.

   It was sticky, which keeps the bar IN FLOW: slimming from 85px to 61px
   therefore shortened the document by 24px and threw everything below it
   upwards mid-scroll — a visible lurch, and the reason an in-page jump landed
   somewhere slightly different each time (the target's offset moved while the
   jump was in flight). nav.js still carries hysteresis that was added to damp
   that feedback loop. Taking the bar out of flow removes the cause: the page
   reserves --nav-space once and the bar's height is now purely cosmetic.

   --nav-space is the UNSLIMMED height, border included, and is the single
   source of truth: .ch-hero sizes itself against the same variable, so the
   two can no longer drift (they had — the hero assumed 84px against a real
   85px bar and overhung the fold by exactly 1px on every screen). */
:root{--nav-space:85px}
body{padding-top:var(--nav-space)}
.f-nav{--nav-h:84px;position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.68);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--border);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.f-nav-in{display:flex;align-items:center;gap:28px;height:var(--nav-h);max-width:1160px;margin:0 auto;padding:0 34px;transition:height .3s cubic-bezier(.22,.61,.36,1)}
.f-nav.slim{--nav-h:60px;background:rgba(255,255,255,.86);border-bottom-color:var(--border);box-shadow:0 1px 24px -10px rgba(10,21,38,.30)}
.f-logo{display:inline-flex;align-items:baseline;font-size:29px;font-weight:800;color:var(--text-heading);letter-spacing:-.028em;transform-origin:left center;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.f-nav.slim .f-logo{transform:scale(.74)}
@media(max-width:860px){:root{--nav-space:65px}.f-nav{--nav-h:64px}.f-nav.slim{--nav-h:52px}.f-logo{font-size:24px}}
.f-logo em{font-style:normal;color:var(--accent)}
.f-nav-links{display:flex;gap:22px;margin-left:auto}
.f-nav-links a{font-size:13.5px;color:var(--text-primary);font-weight:500;white-space:nowrap}
.f-nav-links a:hover{color:var(--accent)}
.f-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;height:44px;padding:0 20px;border-radius:9px;font-size:14.5px;font-weight:560;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;font-family:inherit}
.f-btn.pri{background:var(--accent);color:#fff}
.f-btn.pri:hover{background:#1a37a8;color:#fff}
.f-btn.sec{background:#fff;color:var(--text-heading);border-color:var(--border)}
.f-btn.sec:hover{border-color:var(--text-faint);color:var(--text-heading)}
.f-btn.ink{background:var(--ink);color:#fff}
.f-btn.ink:hover{background:#000;color:#fff}
.f-btn.sm{height:38px;padding:0 15px;font-size:13.5px}
@media(max-width:860px){.f-nav-links{display:none}}

/* ── hero (text-only, two-colour tagline) ────────── */
.f-hero{padding:clamp(78px,9vw,132px) 0 clamp(58px,6vw,86px);background:#fff;position:relative;overflow:hidden}
@media(max-width:640px){.f-hero{padding-top:34px}.f-kicker{margin-bottom:18px}}
.f-hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--border)}
.f-hero .f-wrap{position:relative;z-index:1}
.f-kicker{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);font-weight:600;margin-bottom:26px}
.f-kicker b{color:var(--accent);font-weight:700}
.f-kicker s{width:14px;height:1px;background:var(--border);text-decoration:none}
.f-tag{font-size:clamp(40px,6.6vw,104px);line-height:1.0;letter-spacing:-.038em;font-weight:660;color:var(--ink);margin:0 0 28px;text-wrap:balance}
.f-tag em{font-style:normal;color:var(--accent)}
.f-hero p.f-lede,.ss-b-hero p.f-lede{font-size:clamp(16.5px,1.15vw,21px);max-width:56ch;color:var(--text-primary)}
.f-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.f-trust{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:22px;border-top:1px solid var(--border)}
.f-trust span{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text-muted)}
.f-trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.f-hero.centered{text-align:center}
.f-hero.centered .f-tag{max-width:20ch;margin-inline:auto}
.f-hero.centered p.f-lede{margin-inline:auto}
.f-hero.centered .f-cta-row,.f-hero.centered .f-trust{justify-content:center}
.f-hero.centered .f-trust{border-top:0;padding-top:0;margin-top:40px}

/* ── stats / the quiet arithmetic ────────────────── */
.f-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:44px}
.f-stat{background:#fff;padding:26px 24px 24px}
.f-stat b{display:block;font-size:clamp(30px,3.3vw,40px);line-height:1;letter-spacing:-.03em;color:var(--ink);font-weight:660;margin-bottom:10px}
.f-stat b em{font-style:normal;color:var(--accent)}
.f-stat p{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.f-stat.hl{background:var(--tint-2)}
.f-note{margin:16px 0 0;font-size:12px;color:var(--text-faint)}

/* ── benefit grid ────────────────────────────────── */
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px;margin-top:44px}
.f-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:24px}
.f-card.tinted{background:var(--tint)}
.f-card h3{margin:0 0 9px;font-size:16.5px;font-weight:600;color:var(--text-heading);letter-spacing:-.01em}
.f-card p{margin:0;font-size:14px;line-height:1.58;color:var(--text-muted)}
.f-card .n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:650;margin-bottom:14px;display:block}

/* ── won't-do list ───────────────────────────────── */
.f-wont{display:grid;gap:0;margin-top:38px;border-top:1px solid var(--border)}
.f-wont li{list-style:none;display:grid;grid-template-columns:118px 1fr;gap:24px;padding:20px 2px;border-bottom:1px solid var(--border);align-items:baseline}
.f-wont b{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--danger);font-weight:650}
.f-wont b.will{color:var(--success)}
.f-wont p{margin:0;font-size:15px;line-height:1.55;color:var(--text-primary)}
.f-wont p small{display:block;margin-top:5px;font-size:13px;color:var(--text-muted)}
@media(max-width:640px){.f-wont li{grid-template-columns:1fr;gap:7px}}

/* ── implementation steps ────────────────────────── */
.f-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:44px;counter-reset:s}
.f-step{position:relative;padding-top:22px;border-top:2px solid var(--ink)}
.f-step:nth-child(n+2){border-top-color:var(--border)}
.f-step .w{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:650;margin-bottom:11px}
.f-step h3{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--text-heading)}
.f-step p{margin:0;font-size:13.8px;line-height:1.58;color:var(--text-muted)}

/* ── ink band (black as accent, used once) ───────── */
.f-ink{background:var(--ink);color:#fff}
.f-ink .f-eyebrow{color:#a5b4fc}
.f-ink .f-h2{color:#fff}
.f-ink .f-lede{color:rgba(255,255,255,.72)}
.f-ink .f-quote{font-size:clamp(22px,2.5vw,32px);line-height:1.28;letter-spacing:-.02em;color:#fff;font-weight:600;margin:0 0 20px;max-width:26ch}
.f-ink .f-btn.sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.f-ink .f-btn.sec:hover{border-color:#fff;color:#fff}

/* ── closing statement ──────────────────────────── */
.f-close{padding:clamp(66px,7vw,104px) 0;background:var(--tint);border-top:1px solid var(--border)}
.f-close p{margin:0 auto;max-width:34ch;font-size:clamp(23px,2.7vw,34px);line-height:1.26;letter-spacing:-.022em;color:var(--ink);font-weight:620;text-align:center;text-wrap:balance}
.f-close p em{font-style:normal;color:var(--accent)}
.f-close small{display:block;text-align:center;margin-top:22px;font-size:13.5px;color:var(--text-muted)}

/* ── footer ─────────────────────────────────────── */
.f-foot{background:#fff;border-top:1px solid var(--border);padding:24px 0 28px}
.f-foot-in{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;max-width:1160px;margin:0 auto;padding:0 34px}
.f-foot .f-logo{font-size:17px}
.f-foot nav{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.f-foot a,.f-foot span{font-size:13px;color:var(--text-muted)}
.f-foot a:hover{color:var(--accent)}

/* ── reveal (driven by landing/lp.js) ───────────── */
[data-anim]{opacity:0;transform:translateY(14px);transition:opacity .58s cubic-bezier(.22,.61,.36,1),transform .58s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
[data-anim].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-anim]{opacity:1;transform:none;transition:none}}

/* ── neutralise imported dark/tinted source blocks ─ */
.f-block section.dark,.f-block section.o-dark,.f-block section.arith,.f-block section.obj{background:transparent!important;color:var(--text-primary)!important}
.f-block section.dark *,.f-block section.o-dark *,.f-block section.obj *{border-color:var(--border)}
.f-block h2,.f-block h3{color:var(--text-heading)}
.f-block .eyebrow,.f-block .o-eyebrow{color:var(--accent)!important}
.f-block .card,.f-block .panel{box-shadow:0 1px 2px rgba(10,21,38,.04),0 8px 24px -12px rgba(10,21,38,.1)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);background:var(--ink);color:#fff;font-size:13.5px;padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:.25s;z-index:200}
.toast.show{opacity:1;transform:translateX(-50%)}

/* section reference codes (for team comments) */
.f-code{position:absolute;top:8px;right:8px;white-space:nowrap;z-index:40;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9.5px;letter-spacing:.06em;padding:3px 6px;border-radius:5px;background:rgba(10,21,38,.7);color:#fff;line-height:1;pointer-events:none;opacity:.62}
.f-ink .f-code{background:rgba(255,255,255,.22)}
.f-sec,.f-hero,.f-close,.f-foot{position:relative}
/* ink band: won't-do list */
.f-ink .f-wont{border-top-color:rgba(255,255,255,.16)}
.f-ink .f-wont li{border-bottom-color:rgba(255,255,255,.14)}
.f-ink .f-wont p{color:#fff}
.f-ink .f-wont p small{color:rgba(255,255,255,.6)}
.f-ink .f-wont b{color:#ff9d92}
.f-ink .f-wont b.will{color:#7ee2a8}
.f-ink .f-note{color:rgba(255,255,255,.5)}
.f-ink .f-stat{background:rgba(255,255,255,.05)}
.f-ink .f-stat b{color:#fff}.f-ink .f-stat p{color:rgba(255,255,255,.62)}

.f-strap{font-size:clamp(19px,1.9vw,25px);line-height:1.34;letter-spacing:-.018em;color:var(--ink);font-weight:560;margin:0 0 20px;max-width:none;text-wrap:normal}
.f-hero.centered .f-strap{margin-inline:auto}

/* ── V3 language review additions ─────────────────────────────────── */
/* Nav: outline login button; pull it closer to the primary CTA than the
   nav's 28px flex gap would place it */
.f-btn.outline{background:#fff;color:var(--accent);border-color:var(--accent)}
.f-btn.outline:hover{background:var(--accent-light);color:var(--accent)}
/* Nav actions sit flush right with real space between them. The outline
   button used to be pulled 16px toward the CTA, and with the links hidden
   below 860 nothing pushed the pair to the edge. */
.f-nav-in .f-btn.outline{margin-right:0}
@media(max-width:860px){.f-nav-in .f-btn.outline{margin-left:auto}}
/* Small phones: trim the outer padding and the logo gap so the pair still
   lands inside the bar, and hold the space between the two buttons. */
/* Pair spacing is set against the bar's own gap, which differs at rest and
   when slim — so it is stated for both, or the condensed bar ends up with a
   wider gap than the full-size one. */
.f-nav-in .f-btn.outline + .f-btn.pri{margin-left:-10px}
.f-nav.slim .f-nav-in .f-btn.outline + .f-btn.pri{margin-left:-4px}
/* Hero: prospects line between the lede and the CTAs */
.f-prospects{margin:30px 0 0;font-size:15.5px;font-weight:650;letter-spacing:-.01em;color:var(--text-heading)}
.f-prospects+.f-cta-row{margin-top:14px}
/* Persona pull-quotes (pipeline copy, and anywhere else one is needed) */
.lp-quote{margin:16px 0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);font-size:15.5px;line-height:1.55;font-style:italic;color:var(--text-muted)}
.gate-lead{font-weight:650;color:var(--text-heading)}
/* Why use Tarent? — value props revealed line by line on scroll */
.why-list{list-style:none;margin:44px auto 0;padding:0;max-width:720px}
.why-list li{display:grid;gap:5px;padding:24px 2px;border-top:1px solid var(--border)}
.why-list li:last-child{border-bottom:1px solid var(--border)}
.why-list li b{font-size:17.5px;letter-spacing:-.01em;color:var(--text-heading)}
.why-list li span{font-size:14.5px;line-height:1.62;color:var(--text-muted)}
/* Demo form: textarea matches the input treatment */
.p5 .fld textarea{width:100%;font-family:inherit;font-size:13.5px;color:var(--text-heading);background:var(--bg-input);border:1px solid var(--border);border-radius:9px;padding:10px 12px;outline:none;transition:border-color .15s ease,background .15s ease;resize:vertical;min-height:72px}
.p5 .fld textarea::placeholder{color:var(--text-faint)}
.p5 .fld textarea:focus{border-color:var(--accent);background:var(--bg-card)}
/* Two-step demo form */
#demoForm .btn-pri:hover{transform:none;box-shadow:0 1px 2px rgba(17,24,39,.1);background:#1a37a8}
.p5 .form-note{margin:-6px 0 16px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.p5 .btn-skip{display:block;width:100%;margin-top:9px;background:none;border:0;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer;padding:8px;border-radius:8px;transition:color .15s,background .15s}
.p5 .btn-skip:hover{color:var(--text-heading);background:var(--bg-input)}
/* Balance the three form states: step one breathes a little more, step two
   compresses, and the thank-you stands as tall as a real state — with the
   booked-in check drawing itself in. */
.p5 .form.morphing{transition:height .42s cubic-bezier(.22,1,.36,1);overflow:hidden}
#demoForm [data-step]{animation:step-in .45s cubic-bezier(.22,1,.36,1)}
.p5 .form [data-step="2"] .fld{margin-bottom:9px}
.p5 .form [data-step="2"] .fld textarea{min-height:46px}
.p5 .form [data-step="2"] .form-note{margin:-4px 0 13px}
.p5 .form [data-step="done"]{display:flex;flex-direction:column;align-items:center;text-align:center;padding:26px 0 12px}
.p5 .form [data-step="done"][hidden]{display:none}
.p5 .form [data-step="done"] h4{margin:20px 0 8px}
.p5 .form [data-step="done"] .form-note{margin:0;max-width:36ch}
.done-anim{position:relative;width:72px;height:72px}
.done-anim svg{width:72px;height:72px;fill:none;position:relative}
.da-ring{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:189;stroke-dashoffset:189;transform:rotate(-90deg);transform-origin:center;animation:da-draw .6s ease-out .15s forwards}
.da-tick{stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:da-draw .35s cubic-bezier(.22,1,.36,1) .72s forwards}
@keyframes da-draw{to{stroke-dashoffset:0}}
@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  #demoForm [data-step]{animation:none}
  .da-ring,.da-tick{animation:none;stroke-dashoffset:0}
  .p5 .form.morphing{transition:none}
}
/* Background rhythm from the pipeline down: white (gate) → tint (who & why)
   → white (data sources) → ink (why Tarent) → tint (book a demo) → white
   (footer). The ink beat replaces the one lost with "The quiet problem". */
.f-ink .eyebrow{color:#a5b4fc!important}
.f-ink .sec-title{color:#fff}
.f-ink .why-list li{border-color:rgba(255,255,255,.14)}
.f-ink .why-list li b{color:#fff}
.f-ink .why-list li span{color:rgba(255,255,255,.62)}

/* ── Responsive audit fixes ───────────────────────────────────────── */
/* The hero kicker wraps on narrow phones instead of forcing the layout
   viewport wider; the CTA's .split.even outranked the ≤960 stack rule. */
@media (max-width: 500px) {
  .f-kicker { white-space: normal; flex-wrap: wrap; row-gap: 6px; }
}
@media (max-width: 960px) {
  .p5 .split.even { grid-template-columns: 1fr; }
}

/* Compact footer: the demo CTA lives in the sticky nav, so the footer is
   just a signature. */
.f-foot span{font-size:12.5px;line-height:1.5}
@media(max-width:480px){
  .f-foot{padding:18px 0 22px}
  .f-foot-in{padding:0 20px;gap:4px}
  .f-foot .f-logo{font-size:16px}
  .f-foot span{font-size:12px}
}

/* The bar and wordmark compress on scroll; the buttons were the one thing
   that stayed full size. They animate their own metrics (rather than
   scaling) so the labels stay crisp, on the wordmark's timing. */
.f-nav .f-btn.sm{transition:background .15s,border-color .15s,color .15s,height .3s cubic-bezier(.22,.61,.36,1),padding .3s cubic-bezier(.22,.61,.36,1),font-size .3s cubic-bezier(.22,.61,.36,1)}
.f-nav.slim .f-btn.sm{height:31px;padding:0 12px;font-size:12.5px}
.f-nav-in{transition:height .3s cubic-bezier(.22,.61,.36,1),gap .3s cubic-bezier(.22,.61,.36,1)}
.f-nav.slim .f-nav-in{gap:18px}
.f-nav.slim .f-nav-links{gap:16px}
.f-nav-links{transition:gap .3s cubic-bezier(.22,.61,.36,1)}
@media(max-width:860px){.f-nav.slim .f-btn.sm{height:29px;padding:0 11px;font-size:12px}}
@media(max-width:480px){
  .f-nav-in{padding:0 20px;gap:12px}
  .f-nav.slim .f-nav-in{gap:12px}
  .f-nav-in .f-btn.outline + .f-btn.pri{margin-left:4px}
  .f-nav.slim .f-nav-in .f-btn.outline + .f-btn.pri{margin-left:0}
}

/* Who & why — capability rows. Scoped so .p2 stays untouched. */
#whowhy .why-callout{position:relative}
#whowhy .why-callout::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gx-acc-2,var(--accent));border-radius:3px 0 0 3px;
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s cubic-bezier(.22,1,.36,1) .18s
}
#whowhy .ml-row.in .why-callout::before{transform:scaleY(1)}

#whowhy .sec-title{margin-bottom:36px}
#whowhy .ml-bands{display:grid;gap:56px;margin-top:8px}
#whowhy .ml-copy p + p{margin-top:12px}
#whowhy .ml-row{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:48px;align-items:center
}
#whowhy .ml-row:nth-child(even){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
#whowhy .ml-row:nth-child(even) .ml-copy{order:2}
#whowhy .ml-no{
  display:block;font-size:11px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:12px
}
#whowhy .ml-copy h3{
  margin:0 0 14px;font-size:clamp(30px,3.4vw,40px);line-height:1.12;
  letter-spacing:-.03em;font-weight:700;color:var(--text-heading)
}
#whowhy .ml-copy p{
  margin:0;font-size:15.5px;line-height:1.55;color:var(--text-muted);max-width:36em
}
#whowhy .ml-viz .win{padding:0;overflow:hidden;box-shadow:var(--sh-md,0 10px 28px -12px rgba(20,26,52,.2))}

#whowhy .ml-chrome{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--text-faint);padding:10px 16px;border-bottom:1px solid var(--border);
  background:var(--tint)
}
#whowhy .ml-mail-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
#whowhy .ml-thread{padding:14px 16px 16px;border-right:1px solid var(--border)}
#whowhy .ml-bubble{
  position:relative;overflow:hidden;
  background:var(--gx-tint,#f3f7fd);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;
  opacity:0;transform:translateY(10px)
}
#whowhy .ml-row.in .ml-bubble{animation:ml-up .55s cubic-bezier(.22,1,.36,1) .08s forwards}
#whowhy .ml-bubble::after{
  content:"";position:absolute;top:0;bottom:0;left:-30%;width:28%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-80%)
}
#whowhy .ml-row.in .ml-bubble::after{animation:ml-scan 1.1s ease .2s}
#whowhy .ml-mail-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
#whowhy .ml-mail-hd b{display:block;font-size:13px;color:var(--text-heading);font-weight:650}
#whowhy .ml-mail-hd div span{font-size:11px;color:var(--text-faint)}
#whowhy .ml-mail p{margin:0;font-size:13.5px;line-height:1.55;color:var(--text-heading)}
#whowhy .ml-mail mark{
  background:transparent;color:inherit;border-radius:3px;padding:0 2px;
  box-shadow:inset 0 -1.5px 0 rgba(33,69,202,0)
}
#whowhy .ml-mail mark:nth-of-type(1){animation-delay:.45s}
#whowhy .ml-row.in .ml-mail mark{
  animation:ml-hl .55s cubic-bezier(.22,1,.36,1) forwards
}
#whowhy .ml-row.in .ml-mail mark:nth-of-type(1){animation-delay:.55s}
#whowhy .ml-row.in .ml-mail mark:nth-of-type(3){animation-delay:.7s}
#whowhy .ml-row.in .ml-mail mark.urg{animation-delay:.85s;animation-name:ml-hl-urg}
@keyframes ml-hl{
  to{background:rgba(33,69,202,.12);box-shadow:inset 0 -1.5px 0 rgba(33,69,202,.55)}
}
@keyframes ml-hl-urg{
  to{background:rgba(221,122,44,.14);box-shadow:inset 0 -1.5px 0 rgba(221,122,44,.7)}
}
@keyframes ml-up{to{opacity:1;transform:none}}
@keyframes ml-scan{to{transform:translateX(420%)}}
#whowhy .ml-gap{
  margin-top:10px;padding:8px 10px;border:1px dashed var(--border);border-radius:8px;
  font-size:12px;font-weight:600;color:#c05621;background:#fffaf6;
  opacity:0
}
#whowhy .ml-row.in .ml-gap{animation:ml-up .45s ease .55s forwards}
#whowhy .ml-sigs{list-style:none;margin:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
#whowhy .ml-sigs li{
  display:flex;flex-direction:column;gap:2px;padding-left:10px;border-left:2px solid var(--accent);
  opacity:0;transform:translateY(6px)
}
#whowhy .ml-row.in .ml-sigs li{
  animation:ml-why .45s cubic-bezier(.22,1,.36,1) forwards
}
#whowhy .ml-row.in .ml-sigs li:nth-child(1){animation-delay:.7s}
#whowhy .ml-row.in .ml-sigs li:nth-child(2){animation-delay:.82s}
#whowhy .ml-row.in .ml-sigs li:nth-child(3){animation-delay:.94s}
#whowhy .ml-row.in .ml-sigs li:nth-child(4){animation-delay:1.06s}
#whowhy .ml-sigs b{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
#whowhy .ml-sigs span{font-size:12.5px;color:var(--text-heading)}

#whowhy .ml-net{padding:8px 12px 10px;background:#fff}
#whowhy .ml-net svg{width:100%;height:auto;display:block}
#whowhy .ml-net .e{
  stroke:#d5dae6;stroke-width:1.4;stroke-linecap:round;fill:none;
  stroke-dasharray:180;stroke-dashoffset:160
}
#whowhy .ml-net .e.mute{stroke:#e4e7ef;stroke-width:1.1}
#whowhy .ml-row.in .ml-net .e{animation:ml-edge .7s cubic-bezier(.22,1,.36,1) forwards}
#whowhy .ml-row.in .ml-net .e2{animation-delay:.06s}
#whowhy .ml-row.in .ml-net .e3{animation-delay:.1s}
#whowhy .ml-row.in .ml-net .e4{animation-delay:.14s}
#whowhy .ml-row.in .ml-net .e5{animation-delay:.18s}
#whowhy .ml-row.in .ml-net .e6{animation-delay:.22s}
#whowhy .ml-row.in .ml-net .e7{animation-delay:.26s}
@keyframes ml-edge{to{stroke-dashoffset:0}}
#whowhy .ml-net .n{transform-box:fill-box;transform-origin:center;transform:scale(0)}
#whowhy .ml-net .n circle{fill:#0f9d58;stroke:rgba(255,255,255,.92);stroke-width:1.2}
#whowhy .ml-net .n.a circle{fill:#e8940a}
#whowhy .ml-net .n circle.n-ring{fill:none}
#whowhy .ml-net .n text{
  font-size:9px;font-weight:700;fill:#fff;font-family:inherit;
  text-anchor:middle
}
#whowhy .ml-net .hub rect{fill:#0f9d58;stroke:#fff;stroke-width:1.6}
#whowhy .ml-net .hub text{font-size:11px;font-weight:700;fill:#fff;text-anchor:middle}
#whowhy .ml-net .n-ring{
  fill:none;stroke:var(--accent);stroke-width:2;
  transform-box:fill-box;transform-origin:center;opacity:0
}
#whowhy .ml-row.in .ml-net .n{animation:ml-node .5s cubic-bezier(.34,1.4,.64,1) forwards}
#whowhy .ml-row.in .ml-net .hub{animation-delay:.05s}
#whowhy .ml-row.in .ml-net .n1{animation-delay:.18s}
#whowhy .ml-row.in .ml-net .n2{animation-delay:.24s}
#whowhy .ml-row.in .ml-net .n3{animation-delay:.3s}
#whowhy .ml-row.in .ml-net .n4{animation-delay:.34s}
#whowhy .ml-row.in .ml-net .n5{animation-delay:.38s}
@keyframes ml-node{to{transform:scale(1)}}
#whowhy .ml-row.in .ml-net .n-ring{
  animation:ml-nring 2.2s ease-out 1.1s infinite
}
@keyframes ml-nring{
  0%{opacity:.9;transform:scale(1)}
  70%{opacity:0;transform:scale(1.55)}
  100%{opacity:0;transform:scale(1.55)}
}
#whowhy .ml-net text.lb{
  font-size:9px;font-weight:600;fill:var(--text-muted);text-anchor:middle;opacity:0
}
#whowhy .ml-net text.lb.strong{fill:var(--text-heading);font-weight:700}
#whowhy .ml-row.in .ml-net text.lb{animation:ml-fade .4s ease .55s forwards}
@keyframes ml-fade{to{opacity:1}}
#whowhy .ml-net-cap{
  margin:2px 4px 8px;text-align:center;font-size:12.5px;color:var(--text-muted);
  opacity:0
}
#whowhy .ml-row.in .ml-net-cap{animation:ml-up .45s ease .7s forwards}
#whowhy .ml-net-cap b{color:var(--text-heading);font-weight:650}
#whowhy .ml-net-key{
  list-style:none;margin:0 4px 4px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
  font-size:11.5px;color:var(--text-muted);opacity:0
}
#whowhy .ml-row.in .ml-net-key{animation:ml-up .4s ease .85s forwards}
#whowhy .ml-net-key li{display:inline-flex;align-items:center;gap:6px}
#whowhy .ml-net-key i{width:10px;height:10px;border-radius:50%;flex:none}
#whowhy .ml-net-key .kg{background:#0f9d58}
#whowhy .ml-net-key .ka{background:#e8940a}
#whowhy .ml-net-key .ks{background:transparent;box-shadow:inset 0 0 0 2px var(--accent)}

#whowhy .ml-why{padding:16px 18px 14px}
#whowhy .ml-why-top{display:flex;align-items:center;gap:11px;margin-bottom:12px;opacity:0;transform:translateY(8px)}
#whowhy .ml-row.in .ml-why-top{animation:ml-up .5s cubic-bezier(.22,1,.36,1) .06s forwards}
#whowhy .ml-why-who{flex:1;min-width:0}
#whowhy .ml-why .tier{position:relative}
#whowhy .ml-why .tier::after{
  content:"";position:absolute;inset:-5px;border-radius:999px;
  border:2px solid var(--accent);opacity:0
}
#whowhy .ml-row.in .ml-why .tier::after{animation:ml-nring 2s ease-out .7s 2}
#whowhy .ml-why .why-callout{
  background:var(--gx-tint,#f3f7fd);border-radius:10px;padding:11px 14px 11px 16px;margin-bottom:12px;
  opacity:0;transform:translateY(8px)
}
#whowhy .ml-row.in .ml-why .why-callout{animation:ml-up .5s cubic-bezier(.22,1,.36,1) .22s forwards}
#whowhy .ml-why .why-callout p{margin:0;font-size:13px;line-height:1.5;color:var(--text-heading)}
#whowhy .ml-why ol{list-style:none;margin:0;padding:0}
#whowhy .ml-why li{
  display:flex;flex-direction:column;gap:2px;padding:9px 0 9px 12px;
  border-left:3px solid var(--accent);margin-bottom:6px;
  opacity:0;transform:translateX(-8px)
}
#whowhy .ml-row.in .ml-why li{animation:ml-why .5s cubic-bezier(.22,1,.36,1) forwards}
#whowhy .ml-row.in .ml-why li:nth-child(1){animation-delay:.48s}
#whowhy .ml-row.in .ml-why li:nth-child(2){animation-delay:.62s}
#whowhy .ml-row.in .ml-why li:nth-child(3){animation-delay:.76s}
@keyframes ml-why{to{opacity:1;transform:none}}
#whowhy .ml-why b{font-size:13.5px;color:var(--text-heading);font-weight:650}
#whowhy .ml-why small{font-size:11.5px;color:var(--text-muted)}

@media(max-width:920px){
  #whowhy .ml-row,
  #whowhy .ml-row:nth-child(even){grid-template-columns:1fr;gap:22px}
  #whowhy .ml-row:nth-child(even) .ml-copy{order:0}
  #whowhy .ml-bands{gap:44px;margin-top:48px}
  #whowhy .ml-mail-grid{grid-template-columns:1fr}
  #whowhy .ml-thread{border-right:0;border-bottom:1px solid var(--border)}
}
#whowhy .ml-copy .ticks{margin-top:16px}
@media(prefers-reduced-motion:reduce){
  #whowhy .why-callout::before{transform:none;transition:none}
  #whowhy .ml-mail mark,
  #whowhy .ml-row.in .ml-mail mark,
  #whowhy .ml-row.in .ml-mail mark.urg{
    animation:none;background:rgba(33,69,202,.12);box-shadow:inset 0 -1.5px 0 rgba(33,69,202,.55)
  }
  #whowhy .ml-row.in .ml-mail mark.urg{background:rgba(221,122,44,.14)}
  #whowhy .ml-bubble,#whowhy .ml-gap,#whowhy .ml-why-top,#whowhy .ml-why .why-callout,
  #whowhy .ml-net-cap,#whowhy .ml-net-key{opacity:1;transform:none;animation:none}
  #whowhy .ml-bubble::after,#whowhy .ml-why .tier::after,#whowhy .ml-net .n-ring{animation:none;opacity:0}
  #whowhy .ml-net .e{stroke-dashoffset:0}
  #whowhy .ml-net .n{transform:none}
  #whowhy .ml-net text,#whowhy .ml-why li{opacity:1;transform:none;animation:none}
}