/* ADpilot marketing home, v2. Plain CSS on purpose: the old marketing
   Tailwind bundle is prebuilt and the app's ds.css is the app's vocabulary. */
:root{
  --night:#15131D; --night-2:#1E1B29; --line-d:rgba(250,247,240,.12);
  --paper:#FAF7F0; --paper-2:#F1ECE2; --ink:#1E2024; --mute:#5F5E66; --line:rgba(30,32,36,.14);
  --violet:#766CF6; --pink:#EA4D99; --lilac:#CFC9FF; --lilac-ink:#2A2160;
  --grad:linear-gradient(100deg,#6366F1 0%,#8B5CF6 50%,#EC4899 100%);
  --display:"Outfit",system-ui,sans-serif; --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --r:0.625rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:2px solid var(--violet);outline-offset:0.1875rem;border-radius:0.25rem}
::selection{background:var(--violet);color:var(--paper)}

.wrap{max-width:87.5rem;margin:0 auto;padding:0 clamp(1rem,3.4vw,3rem)}
.center{text-align:center}
.mt-l{margin-top:3rem}
.dark{background:var(--night);color:var(--paper)}
.cream{background:var(--paper)}
.sec{padding:clamp(4.5rem,10vw,8.75rem) 0}

/* type */
.display{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.015em;line-height:.88;margin:0}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.6vw,4.4rem);line-height:1.02;letter-spacing:-.02em;margin:0}
.eyebrow{font:600 0.75rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;margin:0 0 1.375rem}
.dark .eyebrow{color:var(--lilac)}
.lead{font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--mute);margin:0;max-width:56ch}
.dark .lead{color:rgba(250,247,240,.72)}
.lead-c{margin:1.125rem auto 0}
.split-h{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:end;margin-bottom:3.5rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:0.625rem;border-radius:0.5rem;padding:0.75rem 1.125rem;font:600 0.9375rem/1 var(--sans);transition:transform .2s,background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(0.25rem)}
.btn-pink{background:var(--pink);color:var(--ink)}
.btn-pink:hover{background:#F06AAB;box-shadow:0 0.5rem 1.5rem -8px rgba(234,77,153,.6)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-ghost{border:1px solid rgba(250,247,240,.35);color:var(--paper)}
.btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-lg{padding:1rem 1.375rem;font-size:1rem}
.btn-sm{padding:0.625rem 0.875rem;font-size:0.875rem}
.btn-full{width:100%;justify-content:space-between}

/* announcement + nav */
.ann{background:var(--lilac);color:var(--lilac-ink);font-size:0.8125rem;font-weight:600;text-align:center;padding:0.5625rem 2.75rem;position:relative}
.ann a:hover{text-decoration:underline}
.ann-x{position:absolute;right:0.875rem;top:50%;transform:translateY(-50%);font-size:1.25rem;line-height:1}
.nav{position:sticky;top:0;z-index:50;background:rgba(21,19,29,.86);backdrop-filter:blur(0.875rem);-webkit-backdrop-filter:blur(0.875rem);border-bottom:1px solid var(--line-d);color:var(--paper)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:4.75rem}
.nav-logo img{height:2.75rem;width:auto}
.nav-links{display:flex;gap:1.875rem;font-size:0.9375rem}
.nav-links a{opacity:.82;transition:opacity .2s}
.nav-links a:hover{opacity:1}
.nav-cta{display:flex;align-items:center;gap:1.125rem}
.nav-signin{font-size:0.9375rem;opacity:.82}
.nav-signin:hover{opacity:1}
.nav-burger{display:none;width:2.5rem;height:2.5rem;position:relative}
.nav-burger span{position:absolute;left:0.625rem;right:0.625rem;height:2px;background:var(--paper);transition:transform .25s}
.nav-burger span:first-child{top:0.9375rem}.nav-burger span:last-child{top:1.4375rem}
.nav.is-open .nav-burger span:first-child{transform:translateY(0.25rem) rotate(45deg)}
.nav.is-open .nav-burger span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav-mobile{display:none}

/* hero */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3.5rem,7vw,6rem);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:stretch}
.hero-h{font-size:clamp(3.6rem,9.2vw,9.6rem);color:var(--paper)}
.hero-sub{font:700 clamp(1.4rem,2.4vw,2.2rem)/1.15 var(--display);margin:1.75rem 0 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.hero-p{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.6;color:rgba(250,247,240,.75);max-width:46ch;margin:1.125rem 0 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:2rem}
.hero-note{margin:1rem 0 0;font:500 0.8125rem/1.4 var(--mono);color:var(--lilac)}

/* work */
.work-h{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3em}
.chip-rot{display:inline-block;background:var(--lilac);color:var(--lilac-ink);border-radius:0.625rem;padding:.08em .4em .14em;font-size:.82em;transition:opacity .3s,transform .3s}
.chip-rot.is-out{opacity:0;transform:translateY(0.5rem)}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:4rem}
.card4-img{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--paper-2)}
.card4-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card4:hover .card4-img img{transform:scale(1.05)}

.card4-t{font:700 1.15rem/1.2 var(--display);margin:1rem 0 0.625rem}

.acc-i{border-top:1px solid var(--line-d)}
.acc-i:last-child{border-bottom:1px solid var(--line-d)}
.acc-b{display:flex;align-items:center;gap:1.5rem;width:100%;text-align:left;padding-top:1.625rem;padding-bottom:1.625rem}
.acc-n{font:500 0.8125rem/1 var(--mono);color:var(--lilac);width:1.75rem}
.acc-t{font:700 clamp(1.4rem,2.4vw,2rem)/1.1 var(--display);flex:1;transition:color .2s}
.acc-b:hover .acc-t{color:var(--lilac)}
.acc-plus{width:1.375rem;height:1.375rem;position:relative}
.acc-plus::before,.acc-plus::after{content:"";position:absolute;left:0;right:0;top:0.625rem;height:2px;background:currentColor;transition:transform .3s}
.acc-plus::after{transform:rotate(90deg)}
.acc-i.is-open .acc-plus::after{transform:rotate(0)}
.acc-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)}
.acc-i.is-open .acc-p{grid-template-rows:1fr}
.acc-p>.wrap{overflow:hidden;min-height:0}
.acc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:3.5rem;align-items:center}
.acc-i.is-open .acc-grid{padding-bottom:2.5rem}
.acc-body{font-size:1.1rem;line-height:1.65;color:rgba(250,247,240,.8);max-width:56ch;margin:0 0 1.5rem 7.25rem}
.acc-grid .btn{margin-left:3.25rem}

.acc-grid img{border-radius:var(--r);width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* search charts */
.charts{display:grid;grid-template-columns:1.6fr 1fr;gap:1.5rem}
.chart{margin:0;background:#fff;border:1px solid var(--line);border-radius:0.875rem;padding:1.625rem}
.chart-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem 1.25rem;align-items:baseline;margin-bottom:1.125rem}
.chart-t{font:700 1.15rem/1.2 var(--display)}
.chart-s{font-size:0.8125rem;color:var(--mute)}
.chart-foot{font-size:0.75rem;color:var(--mute);margin:0.875rem 0 0}
.chart-box{position:relative}
.chart-box svg{width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .ax{font:500 0.6875rem var(--mono);fill:var(--mute)}
.chart .lbl{font:600 0.75rem var(--sans);fill:var(--ink)}
.chart .ln{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:rgba(118,108,246,.10)}
.chart .band{fill:rgba(234,77,153,.10)}
.chart .dot{fill:var(--violet);stroke:#fff;stroke-width:2}
.chart .xh{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .hit{fill:transparent;cursor:crosshair}
.tip{position:absolute;pointer-events:none;background:var(--ink);color:var(--paper);font-size:0.75rem;line-height:1.35;padding:0.4375rem 0.625rem;border-radius:0.375rem;white-space:nowrap;opacity:0;transform:translate(-50%,-120%);transition:opacity .15s}

.sw-0,.bar-0{background:var(--violet)}
.sw-1,.bar-1{background:var(--pink)}

.chip-hl{display:inline-block;background:var(--lilac);color:var(--lilac-ink);border-radius:0.75rem;font:700 .36em/1 var(--display);text-transform:none;letter-spacing:0;padding:.5em .7em;vertical-align:middle;transform:translateY(-.3em)}

.pg-btn{width:2.25rem;height:2.25rem;flex:none;border-radius:0.5rem;background:var(--pink);color:var(--ink);font-weight:700}
.quote{background:var(--lilac);color:var(--lilac-ink);border-radius:0.875rem;padding:1.875rem;display:flex;flex-direction:column}
.q-mark{font:800 4rem/.6 var(--display);height:1.75rem}
.quote p{font-size:1.1rem;line-height:1.55;margin:0.625rem 0 1.125rem}

.q-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:0.8125rem}
.city{position:relative;color:var(--ink)}
.city img{width:100%;height:clamp(17.5rem,46vw,40rem);object-fit:cover}
.city-bar{display:flex;justify-content:space-between;padding-top:1rem;padding-bottom:1rem;font:600 0.75rem/1 var(--sans);text-transform:uppercase;letter-spacing:.1em}

/* journal */
.journal{padding-top:clamp(3.5rem,7vw,6rem)}
.journal-h{font-size:clamp(3.4rem,10vw,10rem)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:3.5rem}
.post-img{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--paper-2);margin-bottom:0.875rem}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.post:hover .post-img img{transform:scale(1.04)}
.post-d{font:500 0.75rem var(--mono);color:var(--mute);margin-left:0.25rem}
.post-t{font:600 1.08rem/1.35 var(--sans);margin:0.75rem 0 0}
.post:hover .post-t{text-decoration:underline;text-underline-offset:0.1875rem}

/* about */
.about-h{font-size:clamp(3.2rem,9vw,9.4rem);display:flex;flex-direction:column}

.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);margin-top:3.5rem;align-items:start}

/* pricing */
.pricing{border-top:1px solid var(--line);background:var(--paper-2)}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.price{background:var(--paper);border:1px solid var(--line);border-radius:0.875rem;padding:1.875rem;display:flex;flex-direction:column}
.price-hi{background:var(--night);color:var(--paper);border-color:var(--night);box-shadow:0 1.875rem 3.75rem -30px rgba(118,108,246,.55)}
.price-top{display:flex;justify-content:space-between;align-items:center}
.price-n{font:700 1.6rem/1 var(--display)}
.price-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.625rem;margin-top:1.5rem}
.price-big{font:800 3.6rem/1 var(--display)}
.price-big-s{font-size:2.4rem}
.price-v s{font:700 1.6rem/1 var(--display);opacity:.45;text-decoration-thickness:2px}
.price-per{font-size:0.875rem;opacity:.7}
.price-note{font-size:0.8125rem;color:var(--pink);margin:0.5rem 0 0;font-weight:600}
.price-sub{font-size:0.875rem;opacity:.7;margin:0.375rem 0 0}
.price-f{list-style:none;margin:1.5rem 0 1.875rem;padding:0;display:grid;gap:0.625rem;font-size:0.9375rem}
.price-f li{display:flex;gap:0.625rem}
.price-f li::before{content:"+";color:var(--violet);font-weight:700}
.price-hi .price-f li::before{color:var(--lilac)}
.price .btn{margin-top:auto}

/* under the hood */
.hood .h2{margin-bottom:3.5rem}

.giant{font:800 clamp(4rem,19vw,19.5rem)/.8 var(--display);letter-spacing:-.03em;margin:clamp(3.5rem,8vw,6.875rem) 0 -.12em;background:linear-gradient(100deg,rgba(118,108,246,.75),rgba(234,77,153,.6));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;user-select:none}

/* footer */
.foot{border-top:1px solid var(--line-d);position:relative}
.foot-mark{display:flex;justify-content:center;transform:translateY(-50%)}
.foot-mark img{background:var(--paper);border-radius:1rem;padding:0.625rem;width:4.5rem;height:4.5rem}
.foot-top{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;padding-bottom:3.5rem}
.foot-lead{font-size:1.15rem;line-height:1.5;color:rgba(250,247,240,.82);margin:0 0 1.375rem;max-width:44ch}
.foot-box{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line-d);background:var(--night-2);border-radius:0.5rem;padding:0.9375rem 1.125rem;font-weight:600;max-width:28.75rem;transition:border-color .2s}
.foot-box:hover{border-color:var(--lilac)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;font-size:0.875rem}
.foot-cols div{display:flex;flex-direction:column;gap:0.5625rem}
.foot-cols a,.foot-cols span{color:rgba(250,247,240,.78)}
.foot-cols a:hover{color:var(--paper)}
.foot-dim{opacity:.6}
.foot-h{font:700 0.75rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--lilac);margin:0 0 0.375rem}
.foot-c{font-size:0.8125rem;color:rgba(250,247,240,.5);margin:3rem 0 2.25rem}
.foot-strip{border-top:1px solid var(--line-d);overflow:hidden;padding:1.375rem 0}
.marq{display:flex;gap:3.5rem;width:max-content;animation:marq 60s linear infinite;font:700 1.2rem/1 var(--display);color:rgba(250,247,240,.55)}
@keyframes marq{to{transform:translateX(-50%)}}

/* responsive */
@media (max-width:1100px){
  .nav-links{display:none}
  .cards4{grid-template-columns:repeat(2,1fr)}
  .charts{grid-template-columns:1fr}

}
@media (max-width:860px){
  .hero-grid,.split-h,.acc-grid,.about-grid,.foot-top{grid-template-columns:1fr}

.acc-body,.acc-grid .btn{margin-left:0}
  .posts,.prices{grid-template-columns:1fr}

  .foot-cols{grid-template-columns:1fr 1fr}
  .nav-signin{display:none}
  .nav-burger{display:block}
  .nav.is-open .nav-mobile{display:flex;flex-direction:column;gap:0.25rem;padding:0.5rem 1rem 1.25rem}
  .nav-mobile a{padding:0.75rem 0;border-bottom:1px solid var(--line-d);font-size:1.0625rem}
  .split-h{gap:1.25rem}
}
@media (max-width:560px){
  .cards4{grid-template-columns:1fr}

  .nav-cta .btn{padding:0.625rem 0.875rem;font-size:0.875rem}
  .nav-logo img{height:2.25rem}
  .city-bar span:nth-child(2){display:none}

}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- Journal ---------- */
.jx-hero{padding:clamp(3.5rem,8vw,6.875rem) 0 clamp(3rem,6vw,5rem)}
.jx-h{font-size:clamp(4rem,13vw,13rem);color:var(--paper)}
.jx-lead{margin-top:1.75rem}
.jx-list{padding-top:clamp(3rem,6vw,5rem)}
.jx-empty{text-align:center;padding:5rem 0}
.jx-empty .lead{margin:1rem auto 0}
.jx-lead-post{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding-bottom:clamp(3rem,6vw,5rem);border-bottom:1px solid var(--line)}
.jx-lead-img{aspect-ratio:16/10;border-radius:0.875rem;overflow:hidden;background:var(--paper-2)}
.jx-lead-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.jx-lead-post:hover .jx-lead-img img{transform:scale(1.03)}
.jx-lead-t{font:700 clamp(1.8rem,3.2vw,3rem)/1.08 var(--display);letter-spacing:-.015em;margin:1.125rem 0 1rem}
.jx-lead-body .lead{margin-bottom:1.75rem}
.jx-grid{margin-top:clamp(2.5rem,5vw,4rem);row-gap:3rem}
.post-x{font-size:0.9375rem;line-height:1.55;color:var(--mute);margin:0.5rem 0 0}
.jx-pager{display:flex;justify-content:space-between;align-items:center;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line)}

.jx-progress{position:fixed;top:0;left:0;height:0.1875rem;width:0;background:var(--grad);z-index:60}
.jx-post-hero{padding:clamp(2.5rem,6vw,5rem) 0 clamp(7.5rem,14vw,12.5rem)}
.jx-post-head{max-width:68.75rem}
.jx-back{display:inline-block;font-size:0.875rem;color:var(--lilac);margin-bottom:1.75rem}
.jx-back:hover{text-decoration:underline}
.jx-title{font:700 clamp(2.2rem,5vw,4.6rem)/1.04 var(--display);letter-spacing:-.02em;margin:1.375rem 0 1.375rem;max-width:22ch}

.jx-meta{display:grid;grid-template-columns:repeat(4,1fr);margin:2.5rem 0 0;border-top:1px solid var(--line-d)}
.jx-meta div{padding:1rem 1rem 0 0}
.jx-meta dt{font:600 0.6875rem/1 var(--sans);text-transform:uppercase;letter-spacing:.12em;color:var(--lilac);margin-bottom:0.5rem}
.jx-meta dd{margin:0;font-size:0.875rem;color:rgba(250,247,240,.82)}
.jx-figure{margin-top:calc(-1 * clamp(5.625rem,11vw,10rem))}
.jx-figure img{width:100%;max-width:68.75rem;margin:0 auto;aspect-ratio:16/9;object-fit:cover;border-radius:0.875rem;box-shadow:0 2.5rem 5rem -40px rgba(21,19,29,.55)}
.jx-body{display:grid;grid-template-columns:13.75rem minmax(0,45rem) 1fr;gap:clamp(1.5rem,4vw,4rem);padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(4rem,8vw,6.875rem)}
.jx-toc{position:sticky;top:6.25rem;align-self:start;font-size:0.875rem}
.jx-toc nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.jx-toc a{padding:0.375rem 0 0.375rem 0.875rem;margin-left:-1px;border-left:2px solid transparent;color:var(--mute);line-height:1.35}
.jx-toc a:hover{color:var(--ink)}
.jx-toc a.is-on{border-left-color:var(--violet);color:var(--ink);font-weight:600}
.jx-toc .foot-h,.jx-share .foot-h{color:var(--violet)}
.jx-share{position:sticky;top:6.25rem;align-self:start;display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem}
.jx-share a,.jx-share button{color:var(--mute);text-align:left}
.jx-share a:hover,.jx-share button:hover{color:var(--ink)}
.jx-prose{font-size:1.1rem;line-height:1.78;color:#33353B}
.jx-prose>*:first-child{margin-top:0}
.jx-prose h2{font:700 clamp(1.6rem,2.6vw,2.15rem)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin:2.6em 0 .7em;scroll-margin-top:6.25rem}
.jx-prose h3{font:700 clamp(1.25rem,2vw,1.5rem)/1.2 var(--display);color:var(--ink);margin:2em 0 .6em;scroll-margin-top:6.25rem}
.jx-prose p{margin:0 0 1.2em}
.jx-prose a{color:#5A50E0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:0.1875rem}
.jx-prose a:hover{color:var(--pink)}
.jx-prose strong{color:var(--ink)}
.jx-prose ul,.jx-prose ol{margin:0 0 1.3em;padding-left:1.3em}
.jx-prose li{margin-bottom:.5em}
.jx-prose li::marker{color:var(--violet)}
.jx-prose blockquote{margin:1.8em 0;padding:1.2em 1.4em;border-radius:0.75rem;background:var(--lilac);color:var(--lilac-ink);font-size:1.05em}
.jx-prose blockquote p:last-child{margin:0}
.jx-prose code{background:rgba(30,32,36,.07);border-radius:0.3125rem;padding:.1em .35em;font:500 .88em var(--mono)}
.jx-prose pre{background:var(--night);color:var(--paper);border-radius:0.75rem;padding:1.2em 1.4em;overflow-x:auto;margin:0 0 1.4em;font-size:.9em}
.jx-prose pre code{background:none;padding:0;color:inherit}
.jx-prose img{max-width:100%;height:auto;border-radius:0.75rem;margin:1.8em 0}
.jx-prose table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.92em;display:block;overflow-x:auto}
.jx-prose th{background:var(--paper-2);text-align:left;font-weight:600}
.jx-prose th,.jx-prose td{border-bottom:1px solid var(--line);padding:.65em .8em;vertical-align:top}
.jx-prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.jx-more{background:var(--paper-2);border-top:1px solid var(--line)}
.jx-more .split-h{margin-bottom:2.5rem}
.cta-band{padding:clamp(4.5rem,9vw,8.125rem) 0}
.cta-in{display:grid;grid-template-columns:1.2fr 1fr;gap:3.5rem;align-items:end}
.cta-h{font-size:clamp(2.6rem,6vw,6rem);color:var(--paper)}
.cta-in .lead{margin-bottom:1.625rem}
@media (max-width:1100px){
  .jx-body{grid-template-columns:minmax(0,1fr)}
  .jx-toc,.jx-share{position:static}
  .jx-toc{display:none}
  .jx-share{flex-direction:row;gap:1.125rem;border-top:1px solid var(--line);padding-top:1.25rem}
  .jx-share .foot-h{margin:0}
}
@media (max-width:860px){
  .jx-lead-post,.cta-in{grid-template-columns:1fr}
  .jx-meta{grid-template-columns:1fr 1fr}
  .jx-prose{font-size:1.04rem}
}
.jx-prose .jx-intro{font-size:1.22em;line-height:1.6;color:var(--ink);padding-bottom:1.2em;border-bottom:1px solid var(--line);margin-bottom:1.6em}
.jx-prose .jx-intro strong{font-weight:600}
.jx-prose figure{margin:2em 0}
.jx-prose figure img{margin:0;width:100%;border:1px solid var(--line)}
.jx-prose figcaption{font-size:.82em;color:var(--mute);margin-top:.7em;text-align:center}
.jx-faq{border-top:1px solid var(--line)}
.jx-faq:last-of-type{border-bottom:1px solid var(--line)}
.jx-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1em 0;font:700 1.08em/1.35 var(--display);color:var(--ink)}
.jx-faq summary::-webkit-details-marker{display:none}
.jx-faq summary::after{content:"+";font-size:1.4em;line-height:1;color:var(--violet);transition:transform .25s}
.jx-faq[open] summary::after{transform:rotate(45deg)}
.jx-faq>*:not(summary){margin-top:0}
.jx-faq[open]{padding-bottom:.6em}
.jx-prose .jx-cta{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.4em;padding:1.3em 1.5em;border-radius:0.875rem;background:var(--night);color:var(--paper);text-decoration:none;font:700 1.1em/1.3 var(--display)}
.jx-prose .jx-cta .arr{color:var(--pink);transition:transform .2s}
.jx-prose .jx-cta:hover{color:var(--paper)}
.jx-prose .jx-cta:hover .arr{transform:translateX(0.25rem)}
.jx-prose ol{counter-reset:li;list-style:none;padding-left:0}
.jx-prose ol>li{counter-increment:li;position:relative;padding-left:2.3em}
.jx-prose ol>li::before{content:counter(li);position:absolute;left:0;top:.15em;width:1.55em;height:1.55em;border-radius:50%;background:var(--lilac);color:var(--lilac-ink);font:700 .78em/1.55em var(--sans);text-align:center}

/* ---------- How it works ---------- */
.hiw-h{font-size:clamp(3.4rem,9vw,9rem)}
.hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line)}
.hiw-step{padding:2rem 2rem 2.5rem 0;border-bottom:1px solid var(--line)}
.hiw-step:not(:nth-child(3n+1)){padding-left:2rem;border-left:1px solid var(--line)}
.hiw-n{font:500 0.8125rem var(--mono);color:var(--violet)}
.hiw-t{font:700 1.5rem/1.15 var(--display);margin:0.875rem 0 0.625rem}
.hiw-step p{margin:0;color:var(--mute);line-height:1.6}
.hiw-sec{padding-top:clamp(3.5rem,7vw,6.25rem)}
.chart .phase{fill:transparent}
.chart .phase-0{fill:rgba(30,32,36,.04)}.chart .phase-1{fill:rgba(118,108,246,.06)}.chart .phase-2{fill:rgba(234,77,153,.06)}.chart .phase-3{fill:rgba(118,108,246,.10)}
.charts-2{grid-template-columns:1fr 1fr}
.chart-dark{background:var(--night-2);border-color:var(--line-d);color:var(--paper)}
.chart-dark .chart-s{color:rgba(250,247,240,.6)}
.chart-dark .grid{stroke:var(--line-d)}
.chart-dark .ax{fill:rgba(250,247,240,.55)}
.chart-dark .dot{stroke:var(--night-2)}
.chart-dark .xh{stroke:var(--paper)}
.chart .ln-pink{fill:none;stroke:var(--pink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot-pink{fill:var(--pink)}
.chart-foot-d{color:rgba(250,247,240,.55);margin-top:1rem}
.chart .band-ok{fill:rgba(118,108,246,.08)}
.qd{transition:transform 1.2s cubic-bezier(.6,0,.2,1)}
.qd circle{fill:var(--violet);stroke:#fff;stroke-width:2;opacity:.9}
.qd:nth-child(odd) circle{fill:var(--pink)}
.qm-toggle{display:inline-flex;border:1px solid var(--line);border-radius:62.4375rem;padding:0.1875rem}
.qm-toggle button{font-size:0.8125rem;font-weight:600;padding:0.375rem 0.75rem;border-radius:62.4375rem;color:var(--mute)}
.qm-toggle button.is-on{background:var(--ink);color:var(--paper)}
.qm-legend{list-style:none;margin:0.875rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.qm-legend li{font-size:0.75rem;background:var(--paper-2);border-radius:62.4375rem;padding:0.25rem 0.625rem;color:var(--mute)}
.chart .qbar{fill:var(--violet)}
.sig-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.875rem;margin-top:3rem}
.sig{background:var(--night-2);border:1px solid var(--line-d);border-radius:0.875rem;padding:1.375rem}
.sig-f{margin:0;font:500 0.6875rem/1 var(--mono);color:var(--pink);text-transform:uppercase;letter-spacing:.08em}
.sig h3{font:700 1.25rem/1.2 var(--display);margin:0.75rem 0 0.875rem}
.sig ul{list-style:none;margin:0;padding:0;display:grid;gap:0.5625rem;font-size:0.875rem;color:rgba(250,247,240,.78)}
.sig li{padding-left:0.875rem;position:relative}
.sig li::before{content:"";position:absolute;left:0;top:.6em;width:0.3125rem;height:0.3125rem;border-radius:50%;background:var(--lilac)}
@media (max-width:1100px){.sig-grid{grid-template-columns:1fr 1fr}.hiw-steps{grid-template-columns:1fr 1fr}.hiw-step,.hiw-step:not(:nth-child(3n+1)){padding:1.75rem 1.5rem 2rem 0;border-left:0}}
@media (max-width:860px){.charts-2{grid-template-columns:1fr}.hiw-steps,.sig-grid{grid-template-columns:1fr}}
.qd .qn{font:700 0.625rem var(--sans);fill:#fff;pointer-events:none}
.qm-legend b{color:var(--ink);margin-right:0.1875rem}

/* ======================= v3 motion layer ======================= */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.split-line{will-change:transform}

/* hero with deck */
.hero{position:relative;z-index:1;min-height:calc(100svh - 4.75rem);display:flex;align-items:center}
.hero .wrap{width:100%}
.hero-grid{grid-template-columns:1fr 1.1fr;align-items:center}
.hero-index{display:flex;align-items:flex-end;justify-content:space-between;margin-top:2.75rem;max-width:28.75rem}
.hero-index ul{list-style:none;margin:0;padding:0;display:grid;gap:0.25rem;font:700 0.75rem/1.2 var(--sans);text-transform:uppercase;letter-spacing:.12em}
.hero-index li{color:rgba(250,247,240,.35);transition:color .3s;display:flex;align-items:center;gap:0.5rem}
.hero-index li::before{content:"";width:0;height:2px;background:var(--lilac);transition:width .3s}
.hero-index li.is-on{color:var(--paper)}
.hero-index li.is-on::before{width:1rem}
.hero-chev{display:grid;gap:2px}
.hero-chev i{width:0.75rem;height:0.75rem;border-right:2px solid var(--lilac);border-bottom:2px solid var(--lilac);transform:rotate(45deg);animation:chev 1.6s infinite;opacity:.25}
.hero-chev i:nth-child(2){animation-delay:.2s}.hero-chev i:nth-child(3){animation-delay:.4s}
@keyframes chev{0%,100%{opacity:.2}40%{opacity:1}}
.deck-slot{position:relative;height:min(72vh,42.5rem);min-height:27.5rem}

/* work cards as deck cards */
#work{position:relative;z-index:2}
.cards4{align-items:start}
.card4-img{will-change:transform;transform-origin:0 0;box-shadow:0 1.875rem 3.75rem -30px rgba(21,19,29,.0);transition:box-shadow .4s}
html.deck-on .card4-img.is-flying{box-shadow:0 2.5rem 5rem -30px rgba(0,0,0,.6)}
.tri{position:absolute;left:50%;bottom:-1px;transform:translate(-50%,100%);width:72%;min-width:10.625rem;padding:1.625rem 0.875rem 0.875rem;background:var(--paper);color:var(--ink);text-align:center;font-size:0.75rem;line-height:1.35;clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%);transition:transform .45s cubic-bezier(.2,.7,.2,1);z-index:3}
.tri b{display:block;font:800 0.875rem/1.2 var(--display);margin-bottom:2px}
.card4:hover .tri,.card4-img.is-front .tri{transform:translate(-50%,0)}

/* modules pinned */
html.motion #modules .acc-grid img{aspect-ratio:16/9;max-height:18.75rem}
html.motion #modules .acc-b{padding-top:1.25rem;padding-bottom:1.25rem}

/* outwork (comparison) */
.outwork{position:relative}
.ow-h{font-size:clamp(3rem,8vw,8rem);display:inline-block;vertical-align:bottom}
.ow-chip{font-size:clamp(1.1rem,2.6vw,2.6rem);transform:none;margin:0 0 .4em .3em;vertical-align:bottom;transition:opacity .3s}
.ow-chip.is-out{opacity:0}
.ow-grid{display:grid;grid-template-columns:auto 1.3fr 1fr auto;gap:1.125rem;align-items:center;margin-top:3rem}
.ow-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem}
.ow-t{border:1px solid var(--ink);border-radius:0.625rem;min-height:6rem;padding:0.875rem;display:flex;flex-direction:column;justify-content:space-between;gap:0.625rem;font:700 clamp(.9rem,1.15vw,1.05rem)/1.2 var(--display);transition:background .35s,color .35s,border-color .35s,opacity .35s}
.ow-t.is-has{background:var(--ink);color:var(--paper)}
.ow-mark{display:inline-block;width:0.875rem;height:0.875rem;border-radius:50%;border:2px solid currentColor;flex:none;position:relative}
.ow-t.is-has .ow-mark,.ow-mark.on{background:var(--lilac);border-color:var(--lilac)}
.ow-card{min-height:100%}
.ow-say{display:none}
.ow-say.is-on{display:block;animation:pop .45s cubic-bezier(.2,.7,.2,1)}
.ow-say p{font-size:1.15rem}
.ow-legend{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.8125rem;color:var(--mute);margin:1.125rem 0 0 3.375rem}
.ow-legend .ow-mark{margin-left:0.625rem}
.ow-legend .ow-mark:first-child{margin-left:0}

/* city parallax */
.city{overflow:hidden}
.city img{will-change:transform}

/* about bars */
.about-h{display:flex;flex-direction:column;gap:.04em}
.ab-line{display:flex;align-items:center;gap:.18em}
.ab-line-r{justify-content:flex-end}
.ab-bar{display:block;height:.62em;flex:1;max-width:5.4em;border-radius:.16em;transform-origin:left center}
.ab-bar-1{background:linear-gradient(90deg,var(--night) 0 32%,var(--violet) 32% 52%,var(--lilac) 52%)}
.ab-bar-2{background:repeating-linear-gradient(135deg,var(--pink) 0 .12em,#F37DB5 .12em .24em);transform-origin:right center;max-width:3.6em}
.ab-bar-3{background:none;display:flex;gap:.08em;max-width:4.2em}
.ab-bar-3 b{flex:1;background:var(--grad);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}

@media (max-width:1100px){
  .ow-grid{grid-template-columns:1fr}
  .ow-grid .pg-btn{display:none}
  .ow-legend{margin-left:0}
}
@media (max-width:999px){
  .hero{min-height:0}
  .deck-slot{display:none}
  .hero-index{display:none}
  .tri{transform:translate(-50%,0)}
}
@media (max-width:560px){.ow-tiles{grid-template-columns:1fr 1fr}.ow-t{min-height:5rem}}

/* ======================= v4: icons, intro, rails, hood ======================= */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.pico{width:1.125rem;height:1.125rem;display:block}
.tag{font:600 0.6875rem/1 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--violet)}
.tag-hl{background:var(--lilac);color:var(--lilac-ink);padding:0.375rem 0.5625rem;border-radius:0.375rem}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.875rem}
.meta-row-d .tag{color:var(--lilac)}

/* work cards: image + icon title + one line */
.card4-img img{width:100%;height:100%;object-fit:cover}
.card4-t{display:flex;align-items:center;gap:0.625rem;font:700 1.35rem/1.2 var(--display);margin:1.375rem 0 0.375rem}
.card4-t .ico{width:1.625rem;height:1.625rem;padding:0.3125rem;box-sizing:content-box;border-radius:0.5625rem;background:var(--ink);color:var(--lilac)}
.card4-l{margin:0;color:var(--mute);font-size:0.9375rem;line-height:1.5;max-width:30ch}

/* into the machine */
.mi{height:100svh;overflow:hidden;padding:0}
.mi-stage{position:relative;height:100%}
.mi-frame{position:absolute;inset:0;clip-path:inset(18% 26% 18% 26% round 1.5rem)}
.mi-frame img{width:100%;height:100%;object-fit:cover}
.mi-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(21,19,29,.85),rgba(21,19,29,.1) 55%)}
.mi-copy{position:absolute;left:0;right:0;bottom:8%;text-align:center;padding:0 1rem}
.mi-h{font-size:clamp(3.4rem,10vw,10rem);color:var(--paper)}
.mi-p{max-width:46ch;margin:1.125rem auto 0;color:rgba(250,247,240,.8);font-size:1.1rem}
html:not(.motion) .mi{height:auto}
html:not(.motion) .mi-stage{height:80svh}
html:not(.motion) .mi-frame{clip-path:none}

/* modules: icon titles and feature rows */
.mods{padding-top:0}
.acc-ic{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:0.75rem;background:rgba(207,201,255,.1);color:var(--lilac);flex:none}
.acc-ic .ico{width:1.25rem;height:1.25rem}
.acc-i.is-open .acc-ic{background:var(--grad);color:#fff}
.feat{list-style:none;margin:0 0 0 7.25rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 1.25rem}
.feat li{display:flex;align-items:center;gap:0.625rem;font-size:0.9375rem;color:rgba(250,247,240,.85)}
.feat .ico{color:var(--pink);width:1.25rem;height:1.25rem}

/* search on rails */
.rails{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;counter-reset:r}
.rail{position:relative;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.625rem}
.rail:not(:last-child)::after{content:"";position:absolute;right:-21px;top:3.125rem;width:1.375rem;height:2px;background:var(--grad)}
.rail-ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:0.875rem;background:var(--night);color:var(--lilac)}
.rail-ic .ico{width:1.5rem;height:1.5rem}
.rail-n{position:absolute;top:1.625rem;right:1.625rem;font:500 0.75rem var(--mono);color:var(--mute)}
.rail h3{font:700 1.3rem/1.2 var(--display);margin:1.125rem 0 0.5rem}
.rail p{margin:0;color:var(--mute);line-height:1.6}
.chart-rail{padding:1.75rem 1.875rem}
.chart .pin circle{fill:var(--night);stroke:#fff;stroke-width:2}
.chart .pin text{font:700 0.75rem var(--sans);fill:#fff}

/* how it works on home */
.about-wide{margin-top:3rem;border-radius:1.125rem;overflow:hidden;aspect-ratio:21/9}
.about-wide img{width:100%;height:100%;object-fit:cover}
.about-grid-3{grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2.5rem}
.ab-step h3{font:700 1.4rem/1.2 var(--display);margin:1rem 0 0.5rem}
.ab-step h3 span{font:500 0.75rem var(--mono);color:var(--violet);vertical-align:middle;margin-right:0.375rem}
.ab-step p{margin:0;color:var(--mute);line-height:1.6}
.big-cta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0.25rem 1.5rem;margin-top:3.5rem;padding:clamp(1.75rem,4vw,3rem) clamp(1.5rem,4vw,3.5rem);border-radius:1.375rem;background:var(--night);color:var(--paper);position:relative;overflow:hidden;transition:transform .3s}
.big-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(37.5rem 15rem at 85% 50%,rgba(234,77,153,.35),transparent 70%),radial-gradient(31.25rem 13.75rem at 10% 0%,rgba(118,108,246,.35),transparent 70%);transition:opacity .3s}
.big-cta>*{position:relative}
.big-cta-t{font:800 clamp(2.2rem,5.4vw,5.2rem)/.95 var(--display);text-transform:uppercase;letter-spacing:-.015em}
.big-cta-s{grid-column:1;font:500 0.875rem var(--mono);color:var(--lilac)}
.big-cta-a{grid-column:2;grid-row:1/3;display:grid;place-items:center;width:clamp(4rem,8vw,6.5rem);height:clamp(4rem,8vw,6.5rem);border-radius:50%;background:var(--pink);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.big-cta-a .ico{width:42%;height:42%}
.big-cta:hover .big-cta-a{transform:rotate(-45deg) scale(1.06)}
.about-more{margin:1.125rem 0 0;text-align:right}
.about-more a{font-weight:600;color:var(--violet)}

/* under the hood: icon cards */
.hood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:1.125rem;overflow:hidden;margin-top:3.5rem}
.hood-card{background:var(--night);padding:1.875rem 1.875rem 2.125rem;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:0.375rem 1rem;transition:background .3s}
.hood-card:hover{background:var(--night-2)}
.hood-ic{grid-column:2;grid-row:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:0.75rem;border:1px solid var(--line-d);color:var(--lilac);transition:background .3s,color .3s}
.hood-card:hover .hood-ic{background:var(--grad);color:#fff;border-color:transparent}
.hood-big{grid-column:1;grid-row:1;font:800 clamp(2.8rem,5vw,4.6rem)/1 var(--display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.hood-l{grid-column:1/-1;color:rgba(250,247,240,.72);font-size:0.9375rem}

/* share icons */
.share-row{display:flex;flex-wrap:wrap;gap:0.5rem}
.share-b{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:0.75rem;background:#fff;border:1px solid var(--line);color:var(--ink);transition:transform .2s,border-color .2s,box-shadow .2s}
.share-b:hover{transform:translateY(-2px);border-color:var(--violet);box-shadow:0 0.625rem 1.25rem -12px rgba(118,108,246,.7)}
.share-b .ico{width:1.125rem;height:1.125rem}
.share-b.is-done{background:var(--lilac);border-color:var(--lilac)}
.share-b-d{background:var(--night-2);border-color:var(--line-d)}
.share-b-d .pico{fill:var(--paper)}
.jx-share{flex-direction:column}
.jx-share .share-row{display:grid;grid-template-columns:repeat(2,2.5rem)}

@media (max-width:1100px){
  .rails{grid-template-columns:1fr}
  .rail:not(:last-child)::after{display:none}
  .jx-share .share-row{display:flex}
}
@media (max-width:860px){
  .about-grid-3{grid-template-columns:1fr}
  .hood-grid{grid-template-columns:1fr 1fr}
  .feat{margin-left:0;grid-template-columns:1fr}
  .about-wide{aspect-ratio:4/3}
  .big-cta{grid-template-columns:1fr}
  .big-cta-a{grid-column:1;grid-row:auto;margin-top:0.75rem}
}
@media (max-width:560px){.hood-grid{grid-template-columns:1fr}}
.hiw-step .rail-ic{margin-bottom:1.125rem}
.hiw-step .hiw-n{display:block}
.sig-ic{margin-bottom:1rem}
.sig:hover .sig-ic{background:var(--grad);color:#fff;border-color:transparent}
@media (max-width:999px){.mi{height:auto}.mi-stage{height:80svh}.mi-frame{clip-path:none!important}}

/* ======================= v5: every screen, full view ======================= */
/* Type and spacing scale with the smaller of width and height, so a short
   laptop (1280x720) and a tall phone both get a section that fits the screen. */
:root{--vmin-type:min(1vw,1.6vh);--gap-y:clamp(3rem,8svh,8.75rem)}
.wrap{max-width:min(105rem,94vw)}
.sec{padding:var(--gap-y) 0}
@media (min-width:1000px){
  .hero{min-height:calc(100svh - 4.75rem);padding:clamp(1.5rem,4svh,4rem) 0}
  .hero-h{font-size:clamp(3.6rem,min(9.2vw,15svh),12rem)}
  .hero-sub{margin-top:clamp(0.875rem,2.6svh,1.75rem)}
  .hero-actions{margin-top:clamp(1.125rem,3.4svh,2rem)}
  .hero-index{margin-top:clamp(1.125rem,4svh,2.75rem)}
  .deck-slot{height:min(74svh,51.25rem);min-height:23.75rem}

  /* What it ships: the four cards never outgrow the screen height */
  #work{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .cards4{max-width:calc(4 * min(54svh, 22vw) * .75 + 4.5rem);margin-left:auto;margin-right:auto;margin-top:clamp(1.75rem,5svh,4rem)}
  .card4-t{margin-top:clamp(0.75rem,2svh,1.375rem)}

  /* Modules: rows and the open image share whatever height the screen has */
  html.motion #modules .acc-b{padding-top:clamp(0.5rem,1.5svh,1.25rem);padding-bottom:clamp(0.5rem,1.5svh,1.25rem)}
  html.motion #modules .acc-t{font-size:clamp(1.2rem,min(2.4vw,3.6svh),2.2rem)}
  html.motion #modules .acc-grid img{aspect-ratio:auto;height:clamp(9.375rem,calc(100svh - 4.75rem - 6 * min(9svh,4.5rem) - 3.75rem),26.25rem);max-height:none}
  html.motion #modules .acc-i.is-open .acc-grid{padding-bottom:clamp(0.875rem,2.5svh,2.5rem)}

  #outwork,#search,.hood{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .ow-h{font-size:clamp(3rem,min(8vw,13svh),10rem)}
  .ow-t{min-height:clamp(4.375rem,10svh,7.5rem)}
  .chart-rail .chart-box svg{max-height:34svh}
  .about-wide{aspect-ratio:auto;height:clamp(15rem,46svh,40rem)}
  .about-h{font-size:clamp(3.2rem,min(9vw,14svh),11rem)}
  .mi-h{font-size:clamp(3.4rem,min(10vw,16svh),12rem)}
  .hood-big{font-size:clamp(2.4rem,min(5vw,8svh),5.4rem)}
  .hood-card{padding:clamp(1.125rem,3svh,2.125rem) clamp(1.25rem,2.4vw,2.125rem)}
}
/* Big screens: let the type breathe instead of floating in a 87.5rem column */
@media (min-width:1920px){
  body{font-size:1.125rem}
  .lead{font-size:1.3rem}
  .h2{font-size:clamp(3rem,3.6vw,5.6rem)}
  .nav-in{height:5.5rem}
  .nav-logo img{height:3.25rem}
}
/* Tablets */
@media (min-width:600px) and (max-width:999px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .hero{min-height:auto;padding:3.5rem 0 4rem}
  .hero-h{font-size:clamp(4rem,13vw,8rem)}
  .mi-stage{height:70svh}
}
/* Short landscape phones */
@media (max-height:500px) and (orientation:landscape){
  .hero-h{font-size:clamp(2.6rem,12svh,4rem)}
  .mi{height:auto}.mi-stage{height:100svh}
}


/* Root size steps: everything above is in rem, so big screens scale as one piece */
html{font-size:16px}
@media (min-width:1700px){html{font-size:17.5px}}
@media (min-width:2100px){html{font-size:20px}}
@media (min-width:2500px){html{font-size:23px}}
@media (min-width:3200px){html{font-size:28px}}
@media (min-width:1920px){body{font-size:1rem}}

/* Search on rails: steps on the left, chart on the right, one screen tall */
@media (min-width:1000px){
  .search-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:1.5rem;align-items:stretch}
  .search-grid .rails{grid-template-columns:1fr;margin:0;gap:.75rem}
  .search-grid .rail{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;padding:clamp(.9rem,2svh,1.6rem)}
  .search-grid .rail-ic{grid-row:1/3}
  .search-grid .rail h3{margin:0 0 .3rem;font-size:1.15rem}
  .search-grid .rail p{font-size:.9rem;line-height:1.5}
  .search-grid .rail:not(:last-child)::after{display:none}
  .search-grid .chart-rail{display:flex;flex-direction:column}
  .search-grid .chart-rail .chart-box{flex:1;display:flex;align-items:center}
  .search-grid .chart-rail .chart-box svg{max-height:46svh}
  .search .split-h{margin-bottom:clamp(1.5rem,4svh,3.5rem)}
  .about-wide{height:clamp(15rem,40svh,40rem)}
}
@media (min-width:600px) and (max-width:860px){.hood-grid{grid-template-columns:repeat(3,1fr)}}

/* Playbooks: /playbooks and /playbooks/{slug} */
.pb-hero{padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.pb-hero .eyebrow{margin:0}
.pb-hero .jx-meta dd{font:700 clamp(1.6rem,2.6vw,2.2rem)/1 var(--display);color:var(--paper)}
.pb-start{padding:clamp(3rem,6vw,5rem) 0 0}
.pb-start-h{font-size:clamp(1.8rem,3.2vw,2.8rem);margin-bottom:2rem;max-width:24ch}
.pb-start .rails{margin:0}
.pb-note{font-size:.95rem;color:var(--mute);border-left:2px solid var(--violet);padding-left:1rem}
.pb-index-h{font-size:clamp(3rem,9vw,9rem);color:var(--paper);max-width:12ch}
.pb-list-h{margin:clamp(4rem,8vw,6.5rem) 0 2.5rem}
.pb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pb-card{position:relative;display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.5rem 3.5rem 1.5rem 1.5rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.pb-card:hover{border-color:var(--violet);transform:translateY(-2px);box-shadow:0 1rem 2rem -1.25rem rgba(21,19,29,.35)}
.pb-card:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.pb-card-k{font:600 .6875rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.1em;color:var(--violet)}
.pb-card-t{font:700 1.3rem/1.2 var(--display);color:var(--ink)}
.pb-card .arr{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:var(--mute);transition:transform .2s,color .2s}
.pb-card:hover .arr{color:var(--violet);transform:translate(.25rem,-50%)}
@media (max-width:1100px){.pb-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pb-cards{grid-template-columns:1fr}}