:root{
    --ink:#1B1D22; --paper:#FFFFFF; --surface:#FFFFFF; --navy:#16365C; --navy-deep:#0C2138;
    --accent:#2D5FA8; --accent-soft:#7FA9DC; --accent-dim:#4A7CBF; --accent-text:#1D4E8F; --cream:var(--tint); --muted:#5C5A53; --hairline:#DCE4EF; --tint:#EEF2F8;
    --serif:"Newsreader","Iowan Old Style",Garamond,Georgia,serif;
    --sans:"Inter",-apple-system,system-ui,sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt";line-height:1.55;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 28px}
  .serif{font-family:var(--serif)}
  .eyebrow{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--navy)}
  .eyebrow.on-dark{color:var(--accent-soft)}
  .ital{font-style:italic;font-weight:400}

  /* ---------- nav ---------- */
  nav{position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(255,255,255,0);backdrop-filter:saturate(160%) blur(0px);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
  nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--hairline)}
  .nav-in{max-width:1180px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}
  .logo{display:flex;align-items:center;gap:11px;color:var(--navy)}
  .logo .seal{width:32px;height:32px;flex:none}
  .logo .wm{font-family:var(--serif);font-weight:500;font-size:23px;color:var(--ink)}
  .nav-links{display:flex;gap:30px;align-items:center;font-size:14px}
  .nav-links a{color:var(--muted);font-weight:500}.nav-links a:hover{color:var(--ink)}
  .nav-right{display:flex;align-items:center;gap:14px}
  .lang{display:flex;border:1px solid var(--hairline);border-radius:7px;overflow:hidden;font-size:12px;background:var(--surface)}
  .lang button{border:none;background:none;padding:6px 11px;cursor:pointer;color:var(--muted);font-weight:600;letter-spacing:.04em}
  .lang button.active{background:var(--navy);color:#fff}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;padding:12px 22px;font-size:14.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;border:1px solid transparent;transition:transform .12s,background .25s,color .25s,box-shadow .25s}
  .btn:active{transform:translateY(1px)}
  .btn.primary{background:var(--navy);color:#fff}.btn.primary:hover{background:var(--navy-deep)}
  .btn.ghost{background:transparent;color:var(--navy);border-color:var(--navy)}.btn.ghost:hover{background:rgba(22,54,92,.06)}
  .btn.on-dark{background:var(--cream);color:var(--navy-deep)}.btn.on-dark:hover{background:#fff}
  .btn.ghost.on-dark{background:transparent;color:var(--cream);border-color:rgba(238,242,248,.5)}.btn.ghost.on-dark:hover{background:rgba(238,242,248,.08)}
  .btn.lg{padding:15px 30px;font-size:16px}
  .navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--hairline);border-radius:8px;background:var(--surface);cursor:pointer;color:var(--navy)}
  @media(max-width:860px){
    .nav-links{display:none}
    .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;background:rgba(255,255,255,.98);backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);border-bottom:1px solid var(--hairline);padding:6px 28px 16px}
    .nav-links.open a{padding:13px 0;border-bottom:1px solid var(--hairline);width:100%;font-size:15px}
    .navtoggle{display:inline-flex}
    .lang button{padding:8px 11px}
    .nav-in{position:relative}
  }
  /* below phone breakpoint: the nav Contact button is redundant (contact is also in the
     hero CTA, the final CTA band and the footer), so drop it to keep the row from
     overflowing narrow phones */
  @media(max-width:560px){
    .nav-right .btn.primary{display:none}
    .sec{padding:76px 0}
    .hero{padding:96px 0 44px}
  }
  /* narrow phones (~320-400px): shrink the wordmark and tighten gaps so
     logo + language toggle + hamburger still fit without horizontal overflow */
  @media(max-width:400px){
    .nav-in{padding:14px 18px;gap:10px}
    .logo{gap:8px}
    .logo .wm{font-size:19px}
    .logo .seal{width:27px;height:27px}
    .nav-right{gap:9px}
  }

  /* ---------- section rhythm ---------- */
  .sec{padding:120px 0;position:relative}
  .sec.dark{background:radial-gradient(140% 120% at 50% -10%,var(--navy) 0%,var(--navy-deep) 70%);color:var(--cream)}
  .sec.dark .lead,.sec.dark p{color:rgba(238,242,248,.74)}
  .kick{display:inline-flex;align-items:center;gap:12px;margin-bottom:18px}
  .kick .rule{width:30px;height:1px;background:var(--accent-soft)}
  h2.big{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,60px);letter-spacing:-.015em;line-height:1.06;color:var(--ink)}
  .sec.dark h2.big{color:#fff}
  .lead{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:60ch;margin-top:18px;font-weight:400}

  /* ---------- hero ---------- */
  .hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;position:relative;overflow:hidden}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;width:100%}
  @media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center}}
  .hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);background:var(--tint);border:1px solid var(--hairline);padding:7px 15px;border-radius:980px;margin-bottom:28px}
  .hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,7.4vw,86px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);overflow-wrap:break-word}
  .hero h1 .ital{color:var(--navy)}
  .hero .sub{font-size:clamp(17px,2vw,21px);color:var(--muted);max-width:46ch;margin:24px 0 30px}
  @media(max-width:900px){.hero .sub{margin-left:auto;margin-right:auto}}
  .capture{display:flex;gap:10px;max-width:440px;flex-wrap:wrap}
  @media(max-width:900px){.capture{margin:0 auto;justify-content:center}}
  .capture input{flex:1;min-width:220px;border:1px solid var(--hairline);background:var(--surface);border-radius:8px;padding:13px 18px;font-size:15px;font-family:inherit;color:var(--ink)}
  .capture input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,54,92,.12)}
  .reassure{font-size:13px;color:var(--muted);margin-top:14px}
  .ok{display:none;margin-top:14px;color:var(--navy);font-weight:600}
  .scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
  .scrollcue .ln{width:1px;height:34px;background:linear-gradient(var(--accent-soft),transparent);animation:cue 2s ease-in-out infinite}
  @keyframes cue{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

  /* orbit animation */
  .spin{transform-box:fill-box;transform-origin:center;animation:spin linear infinite}
  .spin.s1{animation-duration:80s}.spin.s2{animation-duration:120s;animation-direction:reverse}.spin.s3{animation-duration:160s}
  @keyframes spin{to{transform:rotate(360deg)}}
  .twinkle{animation:tw 4s ease-in-out infinite}
  @keyframes tw{0%,100%{opacity:.45}50%{opacity:1}}
  @media(prefers-reduced-motion:reduce){.spin,.twinkle,.scrollcue .ln{animation:none}}

  /* ---------- privacy (dark) ---------- */
  .manifest{display:grid;grid-template-columns:1fr .8fr;gap:50px;align-items:center}
  @media(max-width:900px){.manifest{grid-template-columns:1fr;text-align:center}}
  .manifest h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.6vw,56px);line-height:1.08;letter-spacing:-.015em;color:#fff}
  .manifest .art svg{width:100%;height:auto;max-height:380px}

  /* ---------- features (cards) ---------- */
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;margin-top:54px}
  @media(max-width:880px){.grid3{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.grid3{grid-template-columns:1fr}}
  .fcard{background:var(--surface);padding:34px 30px;transition:background .25s}
  .fcard:hover{background:var(--tint)}
  .fcard .gl{width:54px;height:54px;margin-bottom:20px;color:var(--navy)}
  .fcard h3{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin-bottom:9px}
  .fcard p{color:var(--muted);font-size:14.5px}

  /* ---------- journey path ---------- */
  .journey{margin-top:60px}
  .journey-art{width:100%;height:auto;margin-bottom:8px}
  .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  @media(max-width:780px){.steps4{grid-template-columns:1fr 1fr}}
  .st4 .rn{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--accent)}
  .st4 h4{font-family:var(--serif);font-size:19px;margin:4px 0 5px;color:var(--ink)}
  .st4 p{font-size:14px;color:var(--muted)}

  /* ---------- study-types constellation ---------- */
  .constell{position:relative;margin-top:50px;min-height:340px}
  .constell svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
  .chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:820px;margin:0 auto;padding-top:30px}
  .chip{background:var(--surface);border:1px solid var(--hairline);border-radius:9px;padding:11px 17px;display:flex;align-items:center;justify-content:center;text-align:center;gap:9px;box-shadow:0 1px 2px rgba(28,30,36,.04),0 10px 26px rgba(28,30,36,.05)}
  .chip b{font-family:var(--serif);font-weight:600;color:var(--navy);font-size:16px}
  .chip span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}

  /* ---------- evidence (dark, forest art) ---------- */
  .evidence{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
  @media(max-width:900px){.evidence{grid-template-columns:1fr;text-align:center}}
  .forest-art{background:rgba(238,242,248,.04);border:1px solid rgba(127,169,220,.28);border-radius:16px;padding:26px}
  .forest-art svg{width:100%;height:auto}
  /* evidence shots: two-up pair. flex-grow/basis are proportional to each image's
     aspect ratio (1122/580 and 670/555) so the pair renders at a matched height. */
  .ev-shots{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap;margin:32px auto 0}
  .ev-shots img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.4);min-width:0}
  .ev-shots .ev-forest{flex:1.934 1 414px;max-width:660px;min-width:0}
  .ev-shots .ev-prisma{flex:1.207 1 258px;max-width:412px;min-width:0}
  @media(max-width:720px){.ev-shots{gap:20px}.ev-shots .ev-forest,.ev-shots .ev-prisma{flex:1 1 100%;max-width:520px}}

  /* ---------- pricing ---------- */
  .prices{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:54px;max-width:920px;margin-left:auto;margin-right:auto}
  @media(max-width:900px){.prices{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.prices{grid-template-columns:1fr}}
  .price{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:24px 20px;display:flex;flex-direction:column}
  .price .pp{font-size:33px}
  .price .plaunch{font-size:11px;line-height:1.35;color:var(--accent);font-weight:600;margin:1px 0 2px;min-height:30px}
  .price.feat{box-shadow:inset 0 0 0 1.5px var(--navy)}
  .price .tag{align-self:flex-start;background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 11px;border-radius:5px;margin-bottom:10px}
  .price .pn{font-family:var(--serif);font-weight:600;font-size:19px}
  .price .pp{font-family:var(--serif);font-size:36px;font-weight:500;color:var(--navy);margin:8px 0 4px}
  .price .pp small{font-size:14px;color:var(--muted);font-family:var(--sans);font-weight:400}
  .price ul{list-style:none;margin:16px 0 22px;display:flex;flex-direction:column;gap:10px}
  .price li{font-size:13.5px;color:var(--ink);padding-left:22px;position:relative}
  .price li::before{content:"❋";position:absolute;left:0;top:1px;color:var(--accent);font-size:11px}
  .price .btn{margin-top:auto;width:100%}
  .pricenote{text-align:center;color:var(--muted);font-size:13.5px;margin-top:24px;font-style:italic;font-family:var(--serif)}

  /* ---------- faq ---------- */
  .faq{max-width:780px;margin:46px auto 0;border-top:1px solid var(--hairline)}
  details{border-bottom:1px solid var(--hairline);padding:22px 4px}
  summary{font-family:var(--serif);font-weight:500;cursor:pointer;list-style:none;font-size:19px;display:flex;justify-content:space-between;gap:18px;align-items:center}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+";color:var(--accent);font-size:24px;font-weight:300;flex:none}
  details[open] summary::after{content:"–"}
  details p{color:var(--muted);font-size:15px;margin-top:13px;max-width:66ch}

  /* ---------- final cta (dark) ---------- */
  .finalcta{text-align:center}
  .finalcta h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5vw,64px);line-height:1.06;color:#fff;letter-spacing:-.015em}
  .finalcta .capture{margin:30px auto 0;justify-content:center}
  .finalcta .capture input{background:rgba(238,242,248,.1);border-color:rgba(238,242,248,.3);color:#fff}
  .finalcta .capture input::placeholder{color:rgba(238,242,248,.55)}
  .finalcta .reassure{color:rgba(238,242,248,.6)}

  footer{padding:64px 0;border-top:1px solid var(--hairline);text-align:center;color:var(--muted);font-size:13px}
  footer .fwm{font-family:var(--serif);font-size:22px;color:var(--ink);margin-bottom:10px}
  footer .col{max-width:54ch;margin:0 auto}

  /* reveal */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .5s cubic-bezier(.16,.7,.3,1),transform .5s cubic-bezier(.16,.7,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
  .rough{filter:url(#roughen)}

  /* (legacy "dynamic bento" styles + animated primitives removed — replaced by the pinned product tour) */

  /* ===== essaycomp-style timeline ===== */
  .timeline{margin-top:64px}
  .tl-svg{width:100%;height:auto;display:block}
  .tl-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:-6px}
  .tl-labels .st4{text-align:center;padding:0 8px}
  @media(max-width:640px){.tl-labels{grid-template-columns:1fr 1fr}}

  /* ===== "text over faint background art" (Harvard-Crimson model) ===== */
  .bleed{position:relative;overflow:hidden}
  .bleed>.wrap{position:relative;z-index:2}
  .bleed .bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .bleed .pattern{position:absolute;inset:0;background-image:repeating-linear-gradient(125deg,transparent 0 46px,rgba(45,95,168,.05) 46px 47px),repeating-linear-gradient(55deg,transparent 0 66px,rgba(45,95,168,.032) 66px 67px)}
  .bleed .figure{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(760px,86%);opacity:.16}
  .bleed.dark .figure{opacity:.18}
  .bleed .figure svg{width:100%;height:auto}
  .bleed .manifesto{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.4vw,62px);line-height:1.07;letter-spacing:-.015em;color:#fff;max-width:20ch;margin:0 auto}
  .kick.center{justify-content:center}
  .lead.center{margin-left:auto;margin-right:auto}
  /* hero variant of the model */
  .hero.bleed .hero-grid{display:block;grid-template-columns:none;text-align:center;max-width:880px;margin:0 auto;position:relative;z-index:2}
  .hero.bleed .sub{margin-left:auto;margin-right:auto}
  .hero.bleed .capture{margin-left:auto;margin-right:auto;justify-content:center}
  /* deliberate breathing room between the hero h1 and its CTA */
  .hero-text .capture{margin-top:34px}
  .hero.bleed .scrollcue{z-index:3}
  /* full-bleed flowing "constellation field" (replaces boxed figures) */
  .bleed .field{position:absolute;inset:0;width:100%;height:100%;-webkit-mask:radial-gradient(128% 120% at 50% 44%,#000 46%,transparent 100%);mask:radial-gradient(128% 120% at 50% 44%,#000 46%,transparent 100%)}
  @keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(16px,-12px)}}
  @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,11px)}}
  .dn{animation:drift 15s ease-in-out infinite}
  .dn2{animation:drift2 19s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.dn,.dn2{animation:none}}

  /* =====================================================================
     UPGRADE LAYER · Apple-grade polish + Google Design tactility
     ===================================================================== */
  :root{
    --shadow-sm:0 1px 2px rgba(11,30,54,.05),0 4px 12px rgba(11,30,54,.05);
    --shadow-md:0 6px 18px rgba(11,30,54,.07),0 22px 48px rgba(11,30,54,.09);
    --shadow-lg:0 12px 34px rgba(11,30,54,.11),0 36px 80px rgba(11,30,54,.13);
    --ease:cubic-bezier(.16,.7,.3,1);
  }
  /* — buttons: depth + spring lift — */
  .btn{box-shadow:0 1px 2px rgba(11,30,54,.06);will-change:transform}
  .btn.primary{box-shadow:0 2px 9px rgba(22,54,92,.24),0 1px 2px rgba(22,54,92,.18)}
  .btn.primary:hover{transform:translateY(-1.5px);box-shadow:0 9px 24px rgba(22,54,92,.30)}
  .btn.ghost:hover{transform:translateY(-1.5px)}
  .btn.on-dark:hover{transform:translateY(-1.5px);box-shadow:0 12px 28px rgba(0,0,0,.30)}
  .btn.lg{border-radius:10px}

  /* — hero: spotlight halo + tighter Apple tracking — */
  .hero.bleed .bg::after{content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
    width:min(1120px,124%);height:780px;pointer-events:none;z-index:0;
    background:radial-gradient(closest-side,rgba(22,54,92,.11),rgba(22,54,92,.04) 46%,transparent 72%)}
  .hero h1{letter-spacing:-.03em}
  .hero .kicker{box-shadow:var(--shadow-sm)}
  .capture input{transition:border-color .2s,box-shadow .2s,background .2s}

  /* — hero trust strip — */
  .trust{display:flex;flex-wrap:wrap;gap:11px 24px;justify-content:center;align-items:center;
    margin-top:30px;font-size:13px;color:var(--muted);font-weight:500}
  .trust .ts{display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
  .trust .ts svg{width:15px;height:15px;color:var(--accent);flex:none}
  .trust .sep{width:1px;height:13px;background:var(--hairline)}
  @media(max-width:560px){.trust{gap:9px 16px}.trust .sep{display:none}}

  /* — card tactility (Google Design) — */
  .fcard,.price,.chip,.bcard{transition:transform .42s var(--ease),box-shadow .42s var(--ease),background .25s,border-color .3s}
  .fcard:hover{transform:translateY(-3px)}
  .price{box-shadow:var(--shadow-sm)}
  .price:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--accent-soft)}
  .price.feat:hover{box-shadow:inset 0 0 0 1.5px var(--navy),var(--shadow-lg)}
  .chip{cursor:default}
  .study-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;text-align:left}
  @media(max-width:900px){.study-grid{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.study-grid{grid-template-columns:1fr}}
  .scard{background:var(--surface);border:1px solid var(--hairline);border-radius:10px;padding:14px 16px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
  .scard:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
  .scard .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
  .scard .ac{font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--ink)}
  .scard .micro{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);flex:none}
  .scard p{font-size:12.5px;color:var(--muted);margin-top:5px}
  .roadmap-note{max-width:640px;margin:22px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}
  .chip:hover{transform:translateY(-3px);box-shadow:0 2px 5px rgba(28,30,36,.06),0 16px 34px rgba(28,30,36,.11);border-color:var(--accent-soft)}
  .bcard:hover{transform:translateY(-4px);box-shadow:0 20px 52px rgba(8,18,38,.42)}

  /* — reveals: add gentle de-blur (Apple) — */
  .reveal{filter:blur(7px)}
  .reveal.in{filter:blur(0)}
  @media(prefers-reduced-motion:reduce){.reveal{filter:none}}

  /* — nav: sliding underline + active state — */
  .nav-links a{position:relative;padding:5px 0}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:1.5px;
    background:var(--accent);transition:right .32s var(--ease)}
  .nav-links a:hover::after,.nav-links a.active::after{right:0}

  /* — scroll-alive workflow timeline — */
  .tl-prog{stroke-dasharray:900;stroke-dashoffset:900}
  .timeline.play .tl-prog{animation:tldraw 2.6s var(--ease) .15s forwards}
  @keyframes tldraw{to{stroke-dashoffset:0}}
  .tl-node-lit{opacity:0;transform-box:fill-box;transform-origin:center}
  .timeline.play .tl-node-lit{animation:nodepop .5s var(--ease) forwards}
  .timeline.play .tl-node-lit:nth-of-type(1){animation-delay:.2s}
  .timeline.play .tl-node-lit:nth-of-type(2){animation-delay:.85s}
  .timeline.play .tl-node-lit:nth-of-type(3){animation-delay:1.5s}
  .timeline.play .tl-node-lit:nth-of-type(4){animation-delay:2.15s}
  @keyframes nodepop{0%{opacity:0;transform:scale(.2)}60%{transform:scale(1.5)}100%{opacity:1;transform:scale(1)}}
  .tl-labels .st4{opacity:.4;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .timeline.play .tl-labels .st4{opacity:1;transform:none}
  .timeline.play .tl-labels .st4:nth-child(1){transition-delay:.25s}
  .timeline.play .tl-labels .st4:nth-child(2){transition-delay:.9s}
  .timeline.play .tl-labels .st4:nth-child(3){transition-delay:1.55s}
  .timeline.play .tl-labels .st4:nth-child(4){transition-delay:2.2s}
  @media(prefers-reduced-motion:reduce){.tl-prog,.timeline.play .tl-node-lit{animation:none}.tl-prog{stroke-dashoffset:0}
    .tl-node-lit{opacity:1}.tl-labels .st4{opacity:1;transform:none}}

  /* =====================================================================
     WORKFLOW · compact pipeline stage strip
     Replaces the old pinned, scroll-snapped product tour. Non-negotiable:
     no position:sticky, no scroll-snap, no scroll listeners, no
     IntersectionObserver scroll math. This section adds zero work to the
     page's scroll path. Text-only: phase labels and stage names, no
     screenshots.
     ===================================================================== */
  .stripwrap{position:relative;z-index:2;margin-top:clamp(38px,5vh,54px)}
  /* phase brackets: four one-word labels, desktop only. They carry the
     "guided, in order" meaning without adding a paragraph of prose. */
  .phases{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));margin-bottom:15px}
  .phase{grid-column:span var(--span);position:relative;padding-bottom:11px;text-align:center}
  .phase span{font-size:10.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
    color:var(--accent-text)}
  .phase::after{content:"";position:absolute;left:9px;right:9px;bottom:0;height:6px;
    border:1px solid var(--hairline);border-bottom:none;border-radius:4px 4px 0 0}

  .nodes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:0;row-gap:30px}
  .node{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;
    padding-top:2px;background:none;border:0;font:inherit;color:inherit;cursor:default;
    text-align:center;-webkit-tap-highlight-color:transparent}
  /* the rail: drawn per node, full cell width, behind the tile. Because it is
     part of each cell it stays continuous no matter how the grid wraps. The
     true first/last nodes cap the rail at their own centre. */
  .node::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;
    background:var(--hairline);z-index:0}
  .node:first-child::before{left:50%}
  .node:last-child::before{right:50%}

  .tile{position:relative;z-index:1;width:46px;height:46px;border-radius:11px;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface);border:1px solid var(--hairline);color:var(--navy);
    box-shadow:var(--shadow-sm);
    transition:border-color .22s var(--ease),color .22s var(--ease),
      transform .22s var(--ease),box-shadow .22s var(--ease)}
  .tile svg{width:21px;height:21px;display:block}
  .lab{font-size:12.5px;font-weight:500;color:var(--muted);line-height:1.25;letter-spacing:.005em;
    max-width:11ch;transition:color .22s var(--ease)}

  .node:hover .tile,.node:focus-visible .tile{border-color:var(--accent-soft);color:var(--accent);
    transform:translateY(-3px);box-shadow:0 8px 20px rgba(12,33,56,.10)}
  .node:hover .lab,.node:focus-visible .lab{color:var(--ink)}
  .node:focus-visible{outline:none}
  .node:focus-visible .tile{outline:2px solid var(--navy);outline-offset:3px}

  /* responsive: wrap the same strip, never restructure it */
  @media(max-width:1080px){
    .phases{display:none}
    .nodes{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:34px}
  }
  @media(max-width:720px){
    .nodes{grid-template-columns:repeat(4,minmax(0,1fr))}
    .tile{width:42px;height:42px;border-radius:10px}
    .tile svg{width:19px;height:19px}
    .node::before{top:21px}
    .lab{font-size:11.5px}
  }
  @media(max-width:420px){
    .nodes{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .tile,.lab{transition:none}
  }
  /* keyboard focus parity for the new hover affordances */
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .nav-links a:focus-visible{color:var(--ink)}
  .nav-links a:focus-visible::after{right:0}
  .finalcta .capture input:focus{border-color:var(--accent-soft);box-shadow:0 0 0 3px rgba(127,169,220,.45)}

  /* =====================================================================
     PROOF · the shipped product, in its own skin ("Obsidian Instrument")
     The --pf-* values below are verbatim copies of the app's real dark
     design tokens (Trabalho Privado/07 - Compendium/packages/design-tokens/tokens.css).
     Do NOT restyle this section to the site's cream palette — the whole
     point is an honest preview of the actual dark Screening screen.
     ===================================================================== */
  #proof{
    --pf-bg:#0a0b0d;--pf-s0:#0e1013;--pf-s1:#14171b;--pf-inset:#07080a;
    --pf-border:#262b32;--pf-border-strong:#353c45;--pf-border-subtle:#1a1e23;
    --pf-text:#eef1f5;--pf-text-2:#b3bcc7;--pf-muted:#828d9b;
    --pf-accent:#d7e6f7;--pf-accent-text:#c3daf2;--pf-accent-weak:#1a2c3f;--pf-accent-weak-border:#3a5570;
    --pf-ai:#7c8bff;--pf-ai-weak:rgba(124,139,255,.12);--pf-ai-border:rgba(124,139,255,.25);--pf-ai-text:#a5b0ff;
    --pf-inc:#3ddc97;--pf-inc-text:#6ff0b8;--pf-inc-weak:#0e3326;--pf-inc-border:#1f6b4d;
    --pf-may:#f5c451;--pf-may-text:#ffd97a;--pf-may-weak:#3a2f0d;--pf-may-border:#6e5a1c;
    --pf-exc:#f8736b;--pf-exc-text:#ff9d96;--pf-exc-weak:#3a1513;--pf-exc-border:#6e2722;
    --pf-mono:"Geist Mono",ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,monospace}
  #proof .lead{color:var(--pf-text-2)}
  #proof h2.big{color:#fff}
  #proof .eyebrow{color:var(--pf-accent-text)}
  #proof .kick .rule{background:var(--pf-accent-weak-border)}
  .pf-frame{max-width:860px;margin:52px auto 0;text-align:left;background:var(--pf-s0);
    border:1px solid var(--pf-border);border-radius:14px;overflow:hidden;
    box-shadow:0 0 0 1px var(--pf-accent-weak-border),0 0 32px rgba(215,230,247,.14),0 18px 48px rgba(0,0,0,.6)}
  .pf-titlebar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--pf-bg);
    border-bottom:1px solid var(--pf-border-subtle);font-size:12px;color:var(--pf-text-2)}
  .pf-titlebar b{font-weight:600;color:var(--pf-text);letter-spacing:.01em}
  .pf-titlebar .pf-loc{margin-left:auto;font-family:var(--pf-mono);font-size:10.5px;color:var(--pf-muted)}
  .pf-titlebar .pf-loc i{font-style:normal;color:var(--pf-accent-text)}
  .pf-body{padding:20px 22px 18px;background:var(--pf-bg)}
  .pf-h{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--pf-text)}
  .pf-lead2{font-size:12.5px;color:var(--pf-muted);margin-top:3px}
  .pf-topline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
  .pf-seg{display:inline-flex;border:1px solid var(--pf-border);border-radius:6px;overflow:hidden;font-size:11px;font-weight:500}
  .pf-seg span{padding:5px 12px;color:var(--pf-muted)}
  .pf-seg .on{background:var(--pf-accent-weak);color:var(--pf-accent-text)}
  .pf-kappa{margin-left:auto;font-family:var(--pf-mono);font-size:11px;color:var(--pf-text-2)}
  .pf-progress{height:4px;background:var(--pf-s1);border-radius:999px;margin-top:12px;overflow:hidden}
  .pf-progress i{display:block;height:100%;width:86%;background:var(--pf-accent);border-radius:999px}
  .pf-tally{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:10.5px;font-family:var(--pf-mono)}
  .pf-tally .pf-count{color:var(--pf-muted);margin-right:auto;letter-spacing:.04em}
  .pf-badge{display:inline-flex;align-items:center;gap:6px;border:1px solid;border-radius:999px;padding:3px 10px}
  .pf-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
  .pf-badge.inc{color:var(--pf-inc-text);border-color:var(--pf-inc-border);background:var(--pf-inc-weak)}
  .pf-badge.may{color:var(--pf-may-text);border-color:var(--pf-may-border);background:var(--pf-may-weak)}
  .pf-badge.exc{color:var(--pf-exc-text);border-color:var(--pf-exc-border);background:var(--pf-exc-weak)}
  .pf-badge.neu{color:var(--pf-text-2);border-color:var(--pf-border);background:var(--pf-s1)}
  .pf-badge.neu::before{display:none}
  .pf-card{background:var(--pf-s1);border:1px solid var(--pf-border);border-radius:10px;padding:18px 20px;margin-top:14px}
  .pf-recmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--pf-mono);font-size:10.5px}
  .pf-pos{color:var(--pf-muted);letter-spacing:.06em}
  .pf-pill{border:1px solid var(--pf-border);border-radius:5px;padding:2px 7px;color:var(--pf-text-2)}
  .pf-pill.pend{color:var(--pf-may-text);border-color:var(--pf-may-border);background:var(--pf-may-weak)}
  .pf-authors{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-family:var(--pf-mono);font-size:10.5px;
    color:var(--pf-muted);text-transform:uppercase;letter-spacing:.08em}
  .pf-rectitle{font-size:15.5px;font-weight:600;line-height:1.35;color:var(--pf-text);margin-top:8px}
  .pf-abslab{display:block;margin-top:12px;font-family:var(--pf-mono);font-size:9.5px;
    text-transform:uppercase;letter-spacing:.14em;color:var(--pf-muted)}
  .pf-abs{font-size:12.5px;line-height:1.6;color:var(--pf-text-2);margin-top:4px}
  .pf-abs mark{background:var(--pf-ai-weak);color:var(--pf-ai-text);border-radius:4px;padding:.05em 3px;
    box-shadow:inset 0 -1px 0 var(--pf-ai-border)}
  .pf-ai{border:1px solid var(--pf-ai-border);border-radius:10px;margin-top:14px;overflow:hidden}
  .pf-ai-head{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--pf-ai-weak);
    font-size:11.5px;font-weight:500;color:var(--pf-ai-text)}
  .pf-ai-head::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pf-ai);flex:none}
  .pf-ai-body{padding:11px 13px 12px;font-size:12px;color:var(--pf-text-2);display:flex;flex-direction:column;gap:9px}
  .pf-quote{border-left:2px solid var(--pf-ai-border);padding:3px 0 3px 11px;font-style:italic;color:var(--pf-text);line-height:1.55}
  .pf-quote .src{display:block;font-style:normal;font-family:var(--pf-mono);font-size:10px;color:var(--pf-muted);margin-top:4px}
  .pf-ai-foot{font-size:10.5px;color:var(--pf-muted)}
  .pf-decide{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
  .pf-db{flex:1 1 0;min-width:110px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px;border-radius:8px;background:var(--pf-s1);font-size:12.5px;font-weight:600;border:1px solid}
  .pf-db.inc{color:var(--pf-inc-text);border-color:rgba(61,220,151,.4)}
  .pf-db.may{color:var(--pf-may-text);border-color:rgba(245,196,81,.4)}
  .pf-db.exc{color:var(--pf-exc-text);border-color:rgba(248,115,107,.4)}
  .pf-kbd{font-family:var(--pf-mono);font-size:10px;border:1px solid var(--pf-border-strong);border-bottom-width:2px;
    border-radius:4px;padding:1px 5px;color:var(--pf-muted);background:var(--pf-inset)}
  .pf-human{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11.5px;color:var(--pf-muted)}
  .pf-human svg{color:var(--pf-inc);flex:none}
  .pf-cap{max-width:70ch;margin:26px auto 0;text-align:center;font-family:var(--serif);font-style:italic;
    font-size:13.5px;color:var(--pf-muted)}
  @media(max-width:640px){.pf-body{padding:16px 14px 14px}.pf-card{padding:14px}.pf-kappa{margin-left:0}.pf-tally .pf-count{flex-basis:100%}}

/* ---------------------------------------------------------------
   Lifted from style="" attributes so the CSP needs no per-hash
   allowlist. Selectors are tripled on purpose: (0,3,0) specificity
   reproduces the inline attribute's old precedence over this file's
   own rules. Do not reorder above the rules they override.
   --------------------------------------------------------------- */
.ux1.ux1.ux1{position:absolute}
.ux2.ux2.ux2{padding:9px 18px}
.ux3.ux3.ux3{text-align:center}
.ux4.ux4.ux4{display:flex;flex-direction:column;align-items:center}
.ux5.ux5.ux5{margin-left:auto;margin-right:auto}
.ux6.ux6.ux6{padding:0}
.ux7.ux7.ux7{display:block;width:100%;height:auto}
.ux8.ux8.ux8{--span:3}
.ux9.ux9.ux9{--span:4}
.ux10.ux10.ux10{--span:2}
.ux11.ux11.ux11{text-align:center;max-width:1080px}
.ux12.ux12.ux12{padding-top:20px;background:var(--paper)}
.ux13.ux13.ux13{margin-top:34px}
.ux14.ux14.ux14{display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-top:3px}
.ux15.ux15.ux15{background:var(--surface);border-color:var(--navy);box-shadow:0 1px 2px rgba(22,54,92,.08),0 10px 26px rgba(22,54,92,.10)}
.ux16.ux16.ux16{color:var(--navy);font-weight:700;letter-spacing:.04em}
.ux17.ux17.ux17{margin-top:14px}
.ux18.ux18.ux18{color:var(--muted);font-size:14px}
.ux19.ux19.ux19{text-align:center;display:flex;flex-direction:column;align-items:center}
.ux20.ux20.ux20{margin-top:16px;font-size:13px;display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center}
.ux21.ux21.ux21{color:var(--navy)}
.ux22.ux22.ux22{margin-top:12px;font-size:12px}
.ux23.ux23.ux23{color:var(--navy);text-decoration:underline}
.ux24.ux24.ux24{opacity:.85}