/* ADpilot marketing site: "Flight Deck". Design spec: docs/MARKETING-FLIGHT-DECK.md.
   Plain CSS on purpose: the app's ds.css is the app's vocabulary, and the
   prebuilt marketing Tailwind bundle serves only the legal pages.
   Fonts (SIL Open Font License 1.1): Big Shoulders Display, Instrument Sans, Martian Mono. */

/* ---------- Fonts ---------- */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bigshoulders-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/bigshoulders-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-stretch:75% 100%;font-display:swap;src:url(fonts/instrument-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;src:url(fonts/martian-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;src:url(fonts/martian-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched fallbacks: the swap keeps line breaks, so no layout shift. */
@font-face{font-family:"BSD Fallback";src:local("Arial Narrow"),local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:66%;ascent-override:149%;descent-override:32%;line-gap-override:0%}
@font-face{font-family:"IS Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica");size-adjust:107%;ascent-override:91%;descent-override:23%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --night-0:#0D0B14; --night:#15131D; --night-1:#1C1A27; --night-2:#272436; --night-3:#343046;
  --line-d:rgba(250,247,240,.11); --line-d2:rgba(250,247,240,.2);
  --cream:#FAF7F0; --cream-2:#F1ECE2; --cream-3:#E6DFD1; --paper:#FAF7F0;
  --ink:#1E2024; --mute:#55545C; --line:rgba(30,32,36,.14);
  --paper-hi:rgba(250,247,240,.92); --mute-d:#ABA8BA;
  --violet:#766CF6; --violet-hi:#A49DFF; --violet-ink:#3A2F9E; --magenta:#EA4D99; --pink:#EA4D99; --lilac:#CFC9FF; --lilac-ink:#2A2160;
  --amber:#FFB547; --green:#42D69A;
  --grad:linear-gradient(100deg,#766CF6 0%,#A35BD9 50%,#EA4D99 100%);
  --f-display:"Big Shoulders Display","BSD Fallback",system-ui,sans-serif;
  --f-text:"Instrument Sans","IS Fallback",system-ui,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --display:var(--f-display); --sans:var(--f-text); --mono:var(--f-mono);
  --t-hero:clamp(3.4rem,7.6vw,8.6rem); --t-h1:clamp(3rem,7vw,7rem); --t-h2:clamp(2.4rem,4.6vw,4.6rem);
  --t-lead:clamp(1.06rem,1.25vw,1.25rem); --t-label:.6875rem;
  --r:.75rem; --r-s:.375rem; --nav-h:4.5rem;
  --gut:clamp(1rem,4vw,3rem); --sec-y:clamp(4rem,8.5vw,7.5rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 1rem)}
@media (min-width:1700px){html{font-size:17px}}
@media (min-width:2100px){html{font-size:19.5px}}
@media (min-width:2500px){html{font-size:22px}}
@media (min-width:3200px){html{font-size:27px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--night);color:var(--paper-hi);font:400 1rem/1.6 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;font-kerning:normal}
img,svg{display:block;max-width:100%}
img{height:auto}
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-hi);outline-offset:3px;border-radius:4px}
.cream :focus-visible,.cream-2 :focus-visible{outline-color:var(--violet)}
::selection{background:var(--violet);color:#fff}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:1rem;top:-4rem;z-index:100;background:var(--cream);color:var(--ink);padding:.75rem 1rem;border-radius:var(--r-s);font-weight:600;transition:top .2s}
.skip:focus{top:1rem}

.wrap{width:100%;max-width:84rem;margin:0 auto;padding:0 var(--gut)}
.sec{padding:var(--sec-y) 0;position:relative}
.dark{background:var(--night);color:var(--paper-hi)}
.night-0{background:var(--night-0);color:var(--paper-hi)}
.cream{background:var(--cream);color:var(--ink)}
.cream-2{background:var(--cream-2);color:var(--ink)}
.center{text-align:center}
.mt-l{margin-top:3rem}

/* ---------- Type ---------- */
.display{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.9;margin:0}
.h1{font:800 var(--t-h1)/.9 var(--f-display);text-transform:uppercase;margin:0}
.h2{font:800 var(--t-h2)/.95 var(--f-display);text-transform:uppercase;letter-spacing:.005em;margin:0;text-wrap:balance}
.h3{font:700 1.375rem/1.2 var(--f-text);letter-spacing:-.01em;margin:0}
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--mute);margin:0;max-width:58ch;text-wrap:pretty}
.dark .lead,.night-0 .lead{color:var(--mute-d)}
.lead-c{margin:1.125rem auto 0}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font:500 var(--t-label)/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;margin:0 0 1.5rem;color:var(--violet-ink)}
.eyebrow::before{content:"";width:.5rem;height:.5rem;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
.dark .eyebrow,.night-0 .eyebrow{color:var(--violet-hi)}
.mono{font-family:var(--f-mono)}
.split-h{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.25rem,4vw,4rem);align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}

/* Gate sign: the aviation word, always followed by a plain h2 */
.sign{display:inline-flex;align-items:stretch;margin:0 0 1.5rem;font:800 1rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.14em;border-radius:.3rem;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.sign-n{display:grid;place-items:center;padding:.5rem .6rem;background:var(--violet);color:#fff;font:600 .6875rem/1 var(--f-mono);letter-spacing:.06em}
.sign-w{display:grid;place-items:center;padding:.45rem .8rem .5rem;background:var(--ink);color:var(--cream)}
.dark .sign-w,.night-0 .sign-w{background:var(--cream);color:var(--night)}
.sec-h{max-width:52rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-h .lead{margin-top:1.25rem}
.sec-h-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.25rem,4vw,4rem);align-items:end;max-width:none}
.sec-h-split .lead{margin:0}
.tag-s{display:inline-flex;align-items:center;gap:.4rem;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;padding:.4rem .55rem;border-radius:99rem;border:1px solid currentColor;opacity:.85;white-space:nowrap}
.cream .tag-s,.cream-2 .tag-s{color:var(--mute)}
.dark .tag-s,.night-0 .tag-s{color:var(--mute-d)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:2.75rem;border-radius:.5rem;padding:.75rem 1.15rem;font:600 .9375rem/1 var(--f-text);transition:transform .2s var(--ease),background .2s,color .2s,box-shadow .2s,border-color .2s;white-space:nowrap}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(.25rem)}
.btn-pink{background:var(--magenta);color:var(--night)}
.btn-pink:hover{background:#F26AAC;box-shadow:0 .75rem 2rem -.75rem rgba(234,77,153,.75)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#000}
.dark .btn-ink,.night-0 .btn-ink{background:var(--night-2);color:var(--cream)}
.btn-ghost{border:1px solid var(--line-d2);color:var(--cream)}
.btn-ghost:hover{background:var(--cream);color:var(--night);border-color:var(--cream)}
.cream .btn-ghost,.cream-2 .btn-ghost{border-color:var(--line);color:var(--ink)}
.cream .btn-ghost:hover,.cream-2 .btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-lg{min-height:3.25rem;padding:1rem 1.4rem;font-size:1rem}
.btn-sm{min-height:2.5rem;padding:.6rem .9rem;font-size:.875rem}
.btn-full{width:100%;justify-content:space-between}
.txt-link{font-weight:600;color:var(--violet-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.dark .txt-link,.night-0 .txt-link{color:var(--violet-hi)}
.txt-link:hover{text-decoration-thickness:2px}

/* ---------- Icons ---------- */
.ico{width:1.15em;height:1.15em;flex:none;vertical-align:-.18em}
.pico{width:1.125rem;height:1.125rem;display:block;flex:none}
.mark{display:block;flex:none}

/* ---------- Announcement + nav ---------- */
.ann{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--night-0);color:var(--mute-d);font:500 .75rem/1.4 var(--f-mono);letter-spacing:.02em;text-align:center;padding:.6rem 3rem;position:relative;border-bottom:1px solid var(--line-d)}
.ann a{color:var(--paper-hi)}
.ann a b{color:var(--violet-hi);font-weight:500;margin-right:.5rem;text-transform:uppercase;letter-spacing:.12em}
.ann a:hover{text-decoration:underline;text-underline-offset:.2em}
.ann-x{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:2.25rem;height:2.25rem;font-size:1.25rem;line-height:1;color:var(--mute-d)}
.nav{position:sticky;top:0;z-index:50;background:rgba(21,19,29,.82);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line-d);color:var(--paper-hi)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:var(--nav-h)}
.nav-logo{display:flex;align-items:center}
.nav-logo img{height:1.9rem;width:auto}
.nav-links{display:flex;gap:.25rem;font-size:.9375rem}
.nav-links a{padding:.5rem .75rem;border-radius:.4rem;color:var(--mute-d);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--cream);background:rgba(250,247,240,.06)}
.nav-links a[aria-current="page"]{color:var(--cream)}
.nav-cta{display:flex;align-items:center;gap:.75rem}
.nav-signin{font-size:.9375rem;color:var(--mute-d);padding:.5rem .5rem}
.nav-signin:hover{color:var(--cream)}
.nav-burger{display:none;width:2.75rem;height:2.75rem;position:relative;border-radius:.5rem}
.nav-burger span{position:absolute;left:.75rem;right:.75rem;height:2px;background:var(--cream);transition:transform .25s}
.nav-burger span:first-child{top:1.05rem}.nav-burger span:last-child{top:1.55rem}
.nav.is-open .nav-burger span:first-child{transform:translateY(.25rem) rotate(45deg)}
.nav.is-open .nav-burger span:last-child{transform:translateY(-.25rem) rotate(-45deg)}
.nav-mobile{display:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.75rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 30rem at 85% 110%,rgba(234,77,153,.20),transparent 60%),
    radial-gradient(50rem 28rem at 8% -10%,rgba(118,108,246,.28),transparent 60%),
    linear-gradient(rgba(250,247,240,.035) 1px,transparent 1px) 0 0/100% 4rem,
    linear-gradient(90deg,rgba(250,247,240,.035) 1px,transparent 1px) 0 0/4rem 100%;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 90% 80% at 50% 30%,#000 40%,transparent 100%)}
.hero-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:end}
.hero-h{font:800 min(var(--t-hero),6.6rem)/.86 var(--f-display);text-transform:uppercase;letter-spacing:.002em;margin:0;color:var(--cream)}
.hero-h .l2{display:block;color:var(--violet-hi)}
.hero-sub{font:600 clamp(1.1rem,1.45vw,1.35rem)/1.35 var(--f-text);color:var(--cream);margin:0 0 .75rem;letter-spacing:-.01em}
.hero-p{font-size:var(--t-lead);line-height:1.6;color:var(--mute-d);margin:0;max-width:44ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.hero-note{margin:1rem 0 0;font:500 .75rem/1.5 var(--f-mono);color:var(--mute-d);letter-spacing:.01em}
.hero-note b{color:var(--cream);font-weight:600}
.hero-board{margin-top:clamp(2.25rem,5vw,3.75rem)}

/* ---------- Departures board ---------- */
.board{container-type:inline-size;margin:0;overflow:hidden;position:relative;border-radius:1rem;padding:clamp(.75rem,1.6vw,1.25rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#121019,#0B0A10);
  border:1px solid rgba(250,247,240,.08);
  box-shadow:inset 0 1px 0 rgba(250,247,240,.06),0 2.5rem 5rem -2rem rgba(0,0,0,.8),0 0 0 .4rem rgba(250,247,240,.025),0 0 6rem -2rem rgba(118,108,246,.35)}
.board-t{--cw:min(1.3rem,calc((100cqi - 23rem) / 45));--ch:calc(var(--cw) * 1.45);--cg:2px}
.board-head{display:flex;align-items:center;gap:.9rem 1.25rem;flex-wrap:wrap;padding:.25rem .35rem 1rem;border-bottom:1px solid rgba(250,247,240,.07)}
.board-title{display:flex;align-items:center;gap:.7rem;font:800 clamp(1.35rem,2.4vw,2rem)/1 var(--f-display);letter-spacing:.12em;color:var(--cream);text-transform:uppercase;margin:0}
.board-title .mark{width:1.6em;height:1.6em}
.board-brand{display:flex;align-items:center;gap:.6rem;font:500 .75rem/1.3 var(--f-mono);color:var(--mute-d)}
.board-brand b{color:var(--paper-hi);font-weight:600}
.board-clock{margin-left:auto;display:flex;align-items:center;gap:.6rem;font:500 .625rem/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute-d);text-align:right}
.board-clock .fl{--cw:1.05rem}
.board-t{width:100%;border-collapse:separate;border-spacing:0;margin-top:.35rem;table-layout:auto}
.board-t th{font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.16em;color:#8D8A9E;text-align:left;padding:.85rem .5rem .55rem;white-space:nowrap}
.board-t td{padding:.32rem .5rem;vertical-align:middle;border-top:1px solid rgba(250,247,240,.045);white-space:nowrap}
.board-t tbody tr:first-child td{border-top:0}
.board-t th:first-child,.board-t td:first-child{padding-left:.35rem}
.board-t th:last-child,.board-t td:last-child{padding-right:.35rem}
.b-dest{width:1%}
.b-dest>span{display:flex;align-items:center;gap:.55rem;font:500 .8125rem/1.1 var(--f-text);color:var(--paper-hi)}
.b-dest .pico{width:1.05rem;height:1.05rem;fill:var(--cream)}
.b-dest .pico path{fill:var(--cream)}
.b-dest .pico[stroke]{fill:none;stroke:var(--cream)}
.b-flight{width:99%}
.b-status>span{display:flex;align-items:center;gap:.55rem}
.lamp{position:relative;width:1rem;height:1rem;flex:none}
.lamp svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s}
tr[data-s="wait"] .lamp .lw,tr[data-s="ok"] .lamp .lo,tr[data-s="out"] .lamp .lx{opacity:1}
.lamp .lw{color:var(--amber)}.lamp .lo{color:var(--green)}.lamp .lx{color:var(--violet-hi)}
tr[data-s="wait"] .b-status .fl b{color:var(--amber)}
tr[data-s="ok"] .b-status .fl b{color:var(--green)}
tr[data-s="out"] .b-status .fl b{color:var(--violet-hi)}
tr[data-s="out"] .b-flight .fl b{color:#BDB9CC}
@media (prefers-reduced-motion:no-preference){
  tr[data-s="wait"] .lamp .lw{animation:lamp 1.6s ease-in-out infinite}
}
@keyframes lamp{50%{opacity:.35}}

/* Split-flap cells */
.fl{display:inline-flex;gap:var(--cg,2px);vertical-align:middle}
.fl b{position:relative;display:grid;place-items:center;width:var(--cw);height:var(--ch,calc(var(--cw) * 1.45));border-radius:2px;
  background:linear-gradient(180deg,#25222F 0,#1E1C28 49.6%,#09080D 49.6%,#09080D 50.4%,#1A1823 50.4%,#15131D 100%);
  color:#F4EFE3;font:600 calc(var(--cw) * 1.02)/1 var(--f-mono);font-stretch:87.5%;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 1px 1px rgba(0,0,0,.6);perspective:12em;font-variant-numeric:tabular-nums}
.fl b::after{content:attr(data-p);position:absolute;left:0;right:0;top:0;height:50%;overflow:hidden;display:block;text-align:center;line-height:var(--ch,calc(var(--cw) * 1.45));border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#2A2735,#1E1C28);color:inherit;transform-origin:50% 100%;transform:rotateX(-90deg);opacity:0;pointer-events:none}
.fl b.f1::after{animation:flap1 .11s ease-in forwards}
.fl b.f2::after{animation:flap2 .11s ease-in forwards}
@keyframes flap1{from{transform:rotateX(0);opacity:1;filter:brightness(1)}96%{transform:rotateX(-86deg);opacity:1;filter:brightness(.55)}to{transform:rotateX(-90deg);opacity:0}}
@keyframes flap2{from{transform:rotateX(0);opacity:1;filter:brightness(1)}96%{transform:rotateX(-86deg);opacity:1;filter:brightness(.55)}to{transform:rotateX(-90deg);opacity:0}}
.fl-x{display:contents}

.board-foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;flex-wrap:wrap;padding:1rem .35rem .15rem;margin-top:.5rem;border-top:1px solid rgba(250,247,240,.07)}
.board-legend{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:0;padding:0;font:500 .6875rem/1.3 var(--f-mono);color:var(--mute-d)}
.board-legend li{display:flex;align-items:center;gap:.5rem}
.board-legend b{font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.board-legend .lamp{width:.85rem;height:.85rem}
.board-legend .lamp svg{opacity:1;animation:none}
.board-legend li:nth-child(1) b{color:var(--amber)}.board-legend li:nth-child(2) b{color:var(--green)}.board-legend li:nth-child(3) b{color:var(--violet-hi)}
.board-pause{display:inline-flex;align-items:center;gap:.5rem;min-height:2.25rem;padding:.4rem .75rem;border:1px solid var(--line-d);border-radius:.4rem;font:500 .6875rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute-d)}
.board-pause:hover{color:var(--cream);border-color:var(--line-d2)}
.board-pause[hidden]{display:none}
.board-cap{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1rem;font-size:.875rem;color:var(--mute-d)}
.board-cap a{color:var(--violet-hi);font-weight:600}

/* Board layouts by its own width */
@container (max-width:52rem){
  .board-t .b-dest .dn{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .board .fl-x{display:none}
  .board-t{--cw:min(1.05rem,calc((100cqi - 11rem) / 35))}
  .board-t th.b-dest{font-size:0;padding-left:0;padding-right:0}
}
@container (max-width:30rem){
  .board-t .b-time{display:none}
  .board-t .b-status .fl{display:none}
  .board-t th.b-dest,.board-t th.b-status{font-size:0;padding:0}
  .board-t td.b-dest{padding-right:.2rem}
  .board-t td.b-status{width:1.4rem}
  .board-t{--cw:min(1rem,calc((100cqi - 6.6rem) / 22));--cg:1.5px}
  .board-clock span{display:none}
}

/* ---------- Radar ---------- */
.radar-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.radar{position:relative;overflow:hidden;aspect-ratio:1;width:100%;max-width:34rem;margin:0 auto;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(118,108,246,.10),rgba(13,11,20,.0) 70%),var(--night-0);
  box-shadow:inset 0 0 0 1px rgba(164,157,255,.18),inset 0 0 4rem rgba(118,108,246,.18),0 0 0 .6rem rgba(250,247,240,.02),0 0 0 calc(.6rem + 1px) rgba(250,247,240,.06)}
.radar>svg{position:absolute;inset:0;width:100%;height:100%}
.radar .rg{fill:none;stroke:rgba(164,157,255,.22);stroke-width:1}
.radar .rg2{stroke:rgba(164,157,255,.1)}
.radar .tk{stroke:rgba(164,157,255,.35);stroke-width:1}
.radar .tk-b{stroke:rgba(164,157,255,.6)}
.radar .brg{font:500 9px var(--f-mono);fill:#8D8A9E;letter-spacing:.06em}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(164,157,255,0) 0deg,rgba(164,157,255,0) 290deg,rgba(164,157,255,.06) 320deg,rgba(164,157,255,.38) 359deg,rgba(234,77,153,.0) 360deg);transform:rotate(var(--sweep-rest,40deg))}
.radar-sweep::after{content:"";position:absolute;left:50%;top:0;width:1.5px;height:50%;margin-left:-.75px;background:linear-gradient(to top,rgba(197,192,255,.9),rgba(197,192,255,.1));transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .radar-sweep{animation:sweep var(--sweep,6s) linear infinite}
  .blip i{animation:blip var(--sweep,6s) linear infinite;animation-delay:var(--d,0s)}
}
@keyframes sweep{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes blip{0%{opacity:1;transform:scale(1.6)}12%{opacity:1;transform:scale(1)}70%{opacity:.35}100%{opacity:1;transform:scale(1.6)}}
.blip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);display:grid;place-items:center}
.blip i{display:block;width:.7rem;height:.7rem;border-radius:50%;background:var(--magenta);box-shadow:0 0 0 .25rem rgba(234,77,153,.18),0 0 1rem rgba(234,77,153,.8)}
.blip-faint i{width:.4rem;height:.4rem;background:var(--violet-hi);box-shadow:0 0 .5rem rgba(164,157,255,.8)}
.blip b{position:absolute;left:1rem;top:-1.1rem;font:600 .625rem/1 var(--f-mono);color:var(--cream);background:var(--night-2);border:1px solid var(--line-d2);border-radius:.25rem;padding:.25rem .35rem}
.radar-cards{display:grid;gap:.85rem}
.tcard{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.35rem 1rem;align-items:start;padding:1.1rem 1.25rem;border-radius:var(--r);background:var(--night-1);border:1px solid var(--line-d)}
.tcard-n{grid-row:1/3;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.3rem;background:var(--night-2);font:600 .6875rem/1 var(--f-mono);color:var(--cream);border:1px solid var(--line-d2)}
.tcard-t{font:600 1.05rem/1.3 var(--f-text);color:var(--cream);margin:0}
.tcard-s{margin:0;grid-column:3;grid-row:1;font:600 .75rem/1 var(--f-mono);color:var(--cream);text-align:right;white-space:nowrap}
.tcard-s small{display:block;font-size:.5625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-d);margin-bottom:.3rem}
.tcard-src{grid-column:2/4;list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tcard-src li{display:inline-flex;align-items:center;gap:.4rem;font:500 .6875rem/1 var(--f-mono);color:var(--mute-d);background:rgba(250,247,240,.04);border:1px solid var(--line-d);border-radius:.3rem;padding:.35rem .5rem}
.tcard-src li::before{content:"";width:.35rem;height:.35rem;border-radius:50%;background:var(--violet-hi)}
.radar-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.25rem;font-size:.875rem;color:var(--mute-d)}

/* ---------- Flight plan: ATC strips ---------- */
.plan-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.bay{position:relative;padding:clamp(.9rem,2vw,1.4rem) clamp(.6rem,1.6vw,1.1rem);border-radius:.9rem;background:linear-gradient(180deg,#24212E,#191722);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2rem 4rem -2rem rgba(21,19,29,.6)}
.bay-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:0 .35rem .8rem;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute-d)}
.strips{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.strip{--edge:var(--violet);position:relative;display:grid;grid-template-columns:5.6rem minmax(0,1fr) 4.5rem 6.6rem;align-items:stretch;min-height:4.6rem;background:linear-gradient(180deg,#FBF8F1,#F2EDE2);color:var(--ink);border-radius:.2rem;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 3px rgba(0,0,0,.35);border-left:.55rem solid var(--edge);transition:transform .35s var(--ease)}
.strip:nth-child(2){--edge:var(--magenta)}
.strip:nth-child(3){--edge:#4B8BE0}
.strip:nth-child(4){--edge:var(--violet)}
.strip>div{padding:.6rem .7rem;border-left:1px solid rgba(30,32,36,.16);min-width:0}
.strip>div:first-child{border-left:0}
.strip-k{display:block;font:600 .75rem/1 var(--f-mono);letter-spacing:.04em;color:var(--ink)}
.strip-f{display:block;margin-top:.5rem;font:500 .5625rem/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute)}
.strip-t{display:block;font:600 .98rem/1.25 var(--f-text);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-c{display:block;margin-top:.35rem;font-size:.75rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.strip-c b{font:500 .5625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;margin-right:.35rem;color:var(--mute)}
.strip-sc{display:grid!important;align-content:center;justify-items:center;text-align:center}
.strip-sc b{font:800 1.9rem/1 var(--f-display);color:var(--ink)}
.strip-sc small{font:500 .5rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-top:.25rem}
.strip-slot{display:grid!important;align-content:center;gap:.4rem}
.strip-slot span{font:600 .75rem/1 var(--f-mono);color:var(--ink)}
.strip-slot i{display:flex;gap:.3rem;font-style:normal}
.strip-slot .pico{width:.9rem;height:.9rem}
.strip.is-pulled{transform:translateX(-.75rem)}
.strip.is-pulled::after{content:"Picked";position:absolute;right:-.4rem;top:-.55rem;font:600 .5625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;background:var(--violet);color:#fff;padding:.3rem .45rem;border-radius:.2rem}
.plan-list{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.85rem}
.plan-list li{display:grid;grid-template-columns:1.75rem 1fr;gap:.75rem;align-items:start;color:var(--mute);line-height:1.55}
.plan-list b{display:block;color:var(--ink);font-weight:600}
.plan-list .ix{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:.3rem;background:var(--ink);color:var(--cream);font:600 .625rem/1 var(--f-mono)}

/* ---------- Preflight checklist ---------- */
.pre-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.check{margin:0;border-radius:1rem;padding:clamp(1.1rem,2.4vw,1.75rem);background:linear-gradient(180deg,#1A1824,#121019);border:1px solid var(--line-d);box-shadow:0 2rem 4rem -2rem rgba(0,0,0,.7)}
.check-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px dashed rgba(250,247,240,.16)}
.check-h b{font:800 1.35rem/1 var(--f-display);letter-spacing:.14em;color:var(--cream);text-transform:uppercase}
.check-h span{font:500 .6875rem/1.4 var(--f-mono);color:var(--mute-d)}
.check ol{list-style:none;margin:0;padding:0;counter-reset:c}
.check li{counter-increment:c;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;gap:.15rem .75rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid rgba(250,247,240,.06)}
.check li:last-child{border-bottom:0}
.check li::before{content:counter(c,decimal-leading-zero);font:500 .6875rem/1 var(--f-mono);color:#8D8A9E}
.check-n{display:flex;align-items:baseline;gap:.6rem;font:600 .8125rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--cream);min-width:0}
.check-n::after{content:"";flex:1;min-width:1.5rem;border-bottom:2px dotted rgba(250,247,240,.22);transform:translateY(-.2em)}
.check-s{font:600 .75rem/1 var(--f-mono);letter-spacing:.1em;color:var(--green);display:flex;align-items:center;gap:.4rem;justify-self:end}
.check-s::before{content:"";width:.9rem;height:.9rem;border-radius:.2rem;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230D0B14' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.check-d{grid-column:2/4;font-size:.875rem;line-height:1.5;color:var(--mute-d);margin:0}
.check.is-armed li .check-s{color:#6E6A80}
.check.is-armed li .check-s::before{background:transparent;box-shadow:inset 0 0 0 1.5px #6E6A80}
.check.is-armed li.is-done .check-s{color:var(--green)}
.check.is-armed li.is-done .check-s::before{background-color:var(--green);box-shadow:none}
.pre-flag{margin-top:1.5rem;padding:1rem 1.15rem;border-radius:var(--r);border:1px solid rgba(255,181,71,.35);background:rgba(255,181,71,.06);color:var(--paper-hi);font-size:.9375rem;line-height:1.55}
.pre-flag b{color:var(--amber);font:600 .6875rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:.45rem}

/* ---------- Clearance ---------- */
.clr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.shot{margin:0}
.shot-frame{display:block;border-radius:.85rem;overflow:hidden;border:1px solid rgba(30,32,36,.18);background:var(--night);box-shadow:0 2.5rem 5rem -2.5rem rgba(21,19,29,.55),0 0 0 .4rem rgba(30,32,36,.05);transition:transform .3s var(--ease)}
.dark .shot-frame,.night-0 .shot-frame{border-color:var(--line-d)}
.shot-frame:hover{transform:translateY(-.25rem)}
.shot-frame img{width:100%;height:auto}
.shot figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:1rem;font-size:.875rem;color:var(--mute)}
.dark .shot figcaption{color:var(--mute-d)}
.shot figcaption a{font-weight:600;color:var(--violet-ink)}
.ccard{margin-top:2rem;border-radius:var(--r);background:#fff;border:1px solid var(--line);box-shadow:0 1.25rem 2.5rem -1.5rem rgba(21,19,29,.35);overflow:hidden}
.ccard-h{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;background:var(--ink);color:var(--cream);font:500 .6875rem/1.2 var(--f-mono);letter-spacing:.06em}
.ccard-h b{font:800 .95rem/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase}
.ccard-b{padding:1rem}
.ccard-b p{margin:0 0 .85rem;font-size:.9375rem;line-height:1.5;color:var(--mute)}
.ccard-b p b{color:var(--ink)}
.ccard-act{display:flex;flex-wrap:wrap;gap:.45rem}
.ccard-act span{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .7rem;border-radius:.4rem;font:600 .8125rem/1 var(--f-text);border:1px solid var(--line);color:var(--ink)}
.ccard-act span:first-child{background:var(--green);border-color:var(--green);color:#06291B}
.ccard-f{padding:.65rem 1rem;border-top:1px solid var(--line);font:500 .625rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);display:flex;justify-content:space-between;gap:1rem}
.clr-steps{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1.75rem 0 0;padding:0}
.clr-steps li{display:inline-flex;align-items:center;gap:.5rem;font:600 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;padding:.6rem .75rem;border-radius:.35rem;background:var(--cream-2);border:1px solid var(--line);color:var(--ink)}
.clr-steps li+li::before{content:"";width:.45rem;height:.45rem;border-top:1.5px solid var(--mute);border-right:1.5px solid var(--mute);transform:rotate(45deg);margin:0 .4rem 0 -.2rem}

/* ---------- Departure ---------- */
.dest-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11.5rem),1fr));gap:.5rem}
.dest{display:flex;align-items:center;gap:.75rem;padding:.85rem .9rem;border-radius:.5rem;background:var(--night-1);border:1px solid var(--line-d);min-width:0}
.dest-ic{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:.4rem;background:var(--night-0);border:1px solid var(--line-d);flex:none}
.dest-ic .pico{width:1.1rem;height:1.1rem}
.dest-ic .pico,.dest-ic .pico path{fill:var(--cream)}
.dest-ic .pico[stroke]{fill:none;stroke:var(--cream)}
.dest-n{font:600 .9375rem/1.2 var(--f-text);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dest-c{margin-left:auto;font:500 .625rem/1 var(--f-mono);letter-spacing:.1em;color:#8D8A9E}
.dest-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.75rem),1fr))}
@media (min-width:1100px){
  .dest-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .dest{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:.9rem .5rem;padding:1rem}
  .dest-n{grid-column:1/-1;white-space:normal}
  .dest-c{grid-row:1;grid-column:2;justify-self:end;align-self:start}
}
.dest-blog{background:linear-gradient(135deg,rgba(118,108,246,.18),rgba(234,77,153,.10)),var(--night-1);border-color:rgba(164,157,255,.3)}
.langs{margin-top:clamp(2rem,4vw,3rem);padding:clamp(1rem,2vw,1.5rem);border-radius:var(--r);background:var(--night-0);border:1px solid var(--line-d)}
.langs-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem;font:500 .6875rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute-d)}
.langs-h b{font:800 1.25rem/1 var(--f-display);letter-spacing:.12em;color:var(--cream)}
.langs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem .7rem}
.langs li{--cw:1.15rem}
.dep-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(2rem,4vw,3rem);border-radius:var(--r);overflow:hidden;background:var(--line-d);border:1px solid var(--line-d)}
.dep-facts div{background:var(--night);padding:1.25rem 1.35rem}
.dep-facts b{display:block;font:800 clamp(2rem,3.4vw,2.8rem)/1 var(--f-display);color:var(--cream)}
.dep-facts span{display:block;margin-top:.5rem;font-size:.9rem;color:var(--mute-d);line-height:1.45}

/* ---------- Instruments ---------- */
.inst{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem}
.gauge{grid-column:span 2;margin:0;position:relative;border-radius:1rem;padding:1.15rem 1.15rem 1.25rem;background:radial-gradient(120% 90% at 50% 0%,rgba(118,108,246,.12),transparent 60%),#100E17;border:1px solid var(--line-d);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.gauge-wide{grid-column:span 3}
.gauge-h{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;font:500 .625rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.13em;color:var(--mute-d)}
.gauge-h b{color:var(--cream);font-weight:600}
.dial{position:relative;width:100%;max-width:15rem;margin:.75rem auto 0}
.dial svg{width:100%;height:auto;overflow:visible}
.dial .arc{fill:none;stroke:rgba(250,247,240,.09);stroke-width:10;stroke-linecap:round}
.dial .val{fill:none;stroke:url(#gaugeGrad);stroke-width:10;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(234,77,153,.45))}
.dial .tick{stroke:rgba(250,247,240,.3);stroke-width:1.5}
.dial .needle{transform-box:view-box;transform-origin:100px 100px;transform:rotate(var(--a,0deg));transition:transform 1.6s cubic-bezier(.3,1.4,.4,1)}
.dial .needle line{stroke:var(--cream);stroke-width:2.5;stroke-linecap:round}
.dial .hub{fill:var(--cream)}
.dial .hub-ring{fill:none;stroke:rgba(250,247,240,.18);stroke-width:1.5}
.inst.is-armed .dial .needle{transform:rotate(-120deg)}
.dial-r{margin:-.6rem 0 0;text-align:center}
.dial-r b{display:block;font:600 1.5rem/1 var(--f-mono);color:var(--cream);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dial-r b+span{display:block;margin-top:.4rem;}
.dial-r span{font:500 .625rem/1 var(--f-mono);color:var(--green);letter-spacing:.06em}
.gauge-f{margin:.85rem 0 0;font-size:.8125rem;line-height:1.45;color:var(--mute-d);text-align:center}
.bars{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.85rem}
.bars li{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 3.2rem;gap:.75rem;align-items:center;font:500 .75rem/1 var(--f-mono);color:var(--paper-hi)}
.bars i{display:block;height:.6rem;border-radius:99rem;background:rgba(250,247,240,.08);overflow:hidden}
.bars i::after{content:"";display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--grad);transition:width 1.4s var(--ease)}
.inst.is-armed .bars i::after{width:0}
.bars em{white-space:nowrap;font-style:normal;text-align:right;color:var(--mute-d)}
.readout{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:1.75rem}
.readout .fl{--cw:1.9rem}
.decay{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem}
.decay li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.75rem;align-items:center;padding:.6rem .7rem;border-radius:.45rem;background:rgba(250,247,240,.03);border:1px solid var(--line-d);font-size:.8125rem;color:var(--paper-hi)}
.decay li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.decay em{font:500 .625rem/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.1em;padding:.35rem .45rem;border-radius:.25rem;white-space:nowrap}
.decay .dn{color:var(--amber);background:rgba(255,181,71,.1)}
.decay .rf{color:var(--violet-hi);background:rgba(164,157,255,.12)}
.spark{width:100%;height:4.5rem;margin-top:.75rem}
.spark path{fill:none;stroke:var(--violet-hi);stroke-width:2}
.spark .ar{fill:url(#sparkGrad);stroke:none}
.inst-note{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-top:1.25rem;font-size:.875rem;color:var(--mute-d)}

/* ---------- Logbook ---------- */
.log-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.log{position:relative;margin:0;border-radius:.35rem .9rem .9rem .35rem;background:#FFFDF8;color:var(--ink);padding:clamp(1.25rem,3vw,2.25rem) clamp(1.1rem,3vw,2.25rem) clamp(1.25rem,3vw,2rem) clamp(2.4rem,5vw,3.75rem);
  background-image:linear-gradient(90deg,transparent calc(clamp(1.6rem,3.6vw,2.6rem)),rgba(234,77,153,.45) calc(clamp(1.6rem,3.6vw,2.6rem)),rgba(234,77,153,.45) calc(clamp(1.6rem,3.6vw,2.6rem) + 1px),transparent calc(clamp(1.6rem,3.6vw,2.6rem) + 1px)),repeating-linear-gradient(180deg,transparent 0 2.05rem,rgba(118,108,246,.16) 2.05rem calc(2.05rem + 1px));
  box-shadow:0 2rem 4rem -2rem rgba(21,19,29,.45),-.5rem 0 0 -.15rem var(--cream-3),-1rem 0 0 -.3rem #D8D0BF;transform:rotate(-.4deg)}
.log-h{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.log-h b{display:block;font:800 1.6rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.log-h span{font:500 .6875rem/1.4 var(--f-mono);color:var(--mute)}
.log dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.75rem}
.log dl div{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;min-height:2.05rem;border-bottom:1px solid transparent}
.log dt{font:500 .6875rem/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.log dd{margin:0;font:600 .95rem/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.log dd small{font-size:.6875rem;color:#1E7A52;margin-left:.3rem}
.log-q{margin:1rem 0 0;font-size:.875rem;line-height:2.05rem;color:var(--mute)}
.log-q b{white-space:nowrap;font-family:var(--f-mono);font-size:.75rem;font-weight:500;color:var(--ink);background:var(--cream-2);border-radius:.25rem;padding:.2rem .4rem;margin-right:.25rem}
.log-share{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.25rem;padding:.75rem .85rem;border-radius:.5rem;background:var(--ink);color:var(--cream);font:500 .75rem/1.3 var(--f-mono)}
.log-share i{font-style:normal;color:var(--violet-hi)}
.log-share em{margin-left:auto;font-style:normal;font-size:.625rem;text-transform:uppercase;letter-spacing:.12em;color:var(--mute-d)}
.log-tag{position:absolute;right:1rem;top:-.75rem}
.log-tag .tag-s{background:var(--cream);color:var(--mute)}

/* ---------- Trim ---------- */
.trim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:clamp(2rem,4vw,3rem)}
.trim{margin:0;border-radius:1rem;background:#fff;border:1px solid var(--line);padding:clamp(1.1rem,2.4vw,1.75rem);display:flex;flex-direction:column;gap:1rem}
.trim-k{font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.trim-diff{margin:0;font-size:1.05rem;line-height:1.65;color:var(--ink)}
.trim-diff del{color:#9A3B5E;text-decoration:line-through;text-decoration-thickness:2px;background:rgba(234,77,153,.1);border-radius:.2rem;padding:0 .15rem}
.trim-diff ins{text-decoration:none;color:#14583B;background:rgba(66,214,154,.22);border-radius:.2rem;padding:0 .15rem}
.trim-rule{margin-top:auto;display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;padding:.85rem 1rem;border-radius:.6rem;background:var(--night);color:var(--paper-hi);font-size:.9rem;line-height:1.5}
.trim-rule b{display:block;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--violet-hi);margin-bottom:.4rem}
.trim-rule .ico{width:1.25rem;height:1.25rem;color:var(--violet-hi);margin-top:.1rem}
.trim-prompt{font:500 .8125rem/1.55 var(--f-mono);color:var(--mute);background:var(--cream-2);border-radius:.5rem;padding:.75rem .85rem;margin:0}
.trim-prompt ins{text-decoration:none;color:#14583B;background:rgba(66,214,154,.22);border-radius:.2rem}
.trim-prompt del{color:#9A3B5E;background:rgba(234,77,153,.1);text-decoration-thickness:2px;border-radius:.2rem}

/* ---------- Agencies band ---------- */
.ag{position:relative;overflow:hidden;background:radial-gradient(70rem 30rem at 100% 0%,rgba(234,77,153,.22),transparent 60%),radial-gradient(60rem 30rem at 0% 100%,rgba(118,108,246,.35),transparent 60%),#1A1530;color:var(--paper-hi)}
.ag-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:clamp(2rem,4vw,3rem);background:rgba(250,247,240,.12);border:1px solid rgba(250,247,240,.12);border-radius:1rem;overflow:hidden}
.ag-c{background:rgba(21,19,29,.72);padding:clamp(1.25rem,2.4vw,1.9rem);display:flex;flex-direction:column;gap:.6rem}
.ag-c .ico{width:1.5rem;height:1.5rem;color:var(--violet-hi);margin-bottom:.4rem}
.ag-c h3{font:700 1.2rem/1.25 var(--f-text);color:var(--cream);margin:0;letter-spacing:-.01em}
.ag-c p{margin:0;color:var(--mute-d);font-size:.9375rem;line-height:1.55}
.ag-c small{margin-top:auto;padding-top:.5rem;font:500 .625rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:#8D8A9E}

/* ---------- Pricing cards ---------- */
.pricing{background:var(--cream-2);color:var(--ink)}
.prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.price{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:1rem;padding:1.75rem;display:flex;flex-direction:column}
.price-hi{background:var(--night);color:var(--paper-hi);border-color:var(--night);box-shadow:0 2rem 4rem -2rem rgba(118,108,246,.6)}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.price-n{font:800 1.75rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.price-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-top:1.25rem}
.price-big{font:800 3.6rem/1 var(--f-display);letter-spacing:.01em}
.price-big-s{font-size:2.4rem}
.price-v s{font:700 1.6rem/1 var(--f-display);opacity:.5;text-decoration-thickness:2px}
.price-per{font-size:.875rem;opacity:.75}
.price-note{font-size:.8125rem;color:#B02A6C;margin:.5rem 0 0;font-weight:600;line-height:1.45}
.price-hi .price-note{color:#F48CBE}
.price-sub{font-size:.875rem;opacity:.78;margin:.375rem 0 0;line-height:1.45}
.price-f{list-style:none;margin:1.5rem 0 1.75rem;padding:1.25rem 0 0;display:grid;gap:.6rem;font-size:.9375rem;border-top:1px dashed var(--line)}
.price-hi .price-f{border-top-color:var(--line-d2)}
.price-f li{display:grid;grid-template-columns:1rem 1fr;gap:.6rem;line-height:1.4}
.price-f li::before{content:"";width:.7rem;height:.7rem;margin-top:.3rem;background:var(--violet);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
.price-hi .price-f li::before{background:var(--violet-hi)}
.price .btn{margin-top:auto}
.price-hi .btn-ink{background:var(--cream);color:var(--night)}
.tag{font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--violet)}
.tag-hl{background:var(--violet);color:#fff;padding:.4rem .55rem;border-radius:.3rem}
.about-more{margin:1.25rem 0 0;text-align:right}
.about-more a{font-weight:600;color:var(--violet-ink)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.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;align-items:center;gap:1rem;padding:1.15rem 0;font:600 1.075rem/1.35 var(--f-text);color:var(--ink);min-height:2.75rem}
.jx-faq summary::-webkit-details-marker{display:none}
.jx-faq summary::after{content:"";flex:none;width:1.75rem;height:1.75rem;border-radius:.35rem;border:1px solid var(--line);background:linear-gradient(var(--ink),var(--ink)) center/.7rem 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) center/1.5px .7rem no-repeat;transition:transform .25s var(--ease)}
.jx-faq[open] summary::after{transform:rotate(45deg)}
.jx-faq>*:not(summary){margin-top:0}
.jx-faq p{color:var(--mute);line-height:1.65;margin:0 0 1.1rem;max-width:62ch}
.jx-faq[open]{padding-bottom:.25rem}

/* ---------- Journal teaser (home) + Journal index ---------- */
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.post{display:block}
.post-img{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--cream-3);margin-bottom:.9rem}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .post-img img{transform:scale(1.04)}
.post-d{font:500 .6875rem/1 var(--f-mono);color:var(--mute);letter-spacing:.04em}
.post-t{font:600 1.1rem/1.35 var(--f-text);margin:.6rem 0 0;color:var(--ink);letter-spacing:-.01em}
.post:hover .post-t{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.post-x{font-size:.9375rem;line-height:1.55;color:var(--mute);margin:.5rem 0 0}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .875rem}
.meta-row-d .tag{color:var(--violet-hi)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;padding:clamp(5rem,11vw,9rem) 0;background:var(--night-0);isolation:isolate}
.cta-band::before{content:"";position:absolute;inset:auto 0 0 0;height:70%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(50% - 1px),rgba(250,247,240,.0) calc(50% - 1px)),radial-gradient(50rem 22rem at 50% 100%,rgba(118,108,246,.35),transparent 70%)}
.runway{position:absolute;left:50%;bottom:0;width:min(70rem,140vw);height:55%;transform:translateX(-50%);z-index:-1;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 95%);mask-image:linear-gradient(to top,#000 10%,transparent 95%)}
.runway svg{width:100%;height:100%}
.runway .rl{fill:var(--cream)}
.runway .rl-m{fill:var(--magenta)}
.runway .rl-v{fill:var(--violet-hi)}
.cta-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:end}
.cta-h{font:800 clamp(2.8rem,6.4vw,6.8rem)/.88 var(--f-display);text-transform:uppercase;color:var(--cream);margin:0}
.cta-h span{color:var(--violet-hi)}
.cta-in .lead{margin-bottom:1.6rem;color:var(--mute-d)}

/* ---------- Footer ---------- */
.foot{position:relative;background:var(--night);color:var(--paper-hi);border-top:1px solid var(--line-d);padding-top:clamp(3.5rem,7vw,5.5rem)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem 4rem;padding-bottom:clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--line-d)}
.foot-brand img{height:2.6rem;width:auto}
.foot-lead{font-size:1.05rem;line-height:1.55;color:var(--mute-d);margin:1.25rem 0 1.5rem;max-width:42ch}
.foot-box{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line-d);background:var(--night-1);border-radius:.6rem;padding:1rem 1.15rem;font-weight:600;max-width:30rem;color:var(--cream);transition:border-color .2s}
.foot-box:hover{border-color:var(--violet-hi)}
.foot-box small{display:block;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute-d);margin-bottom:.45rem}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;font-size:.9rem;padding:clamp(2.25rem,4vw,3rem) 0}
.foot-cols div{display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.foot-cols a,.foot-cols span{color:var(--mute-d)}
.foot-cols a:hover{color:var(--cream)}
.foot-dim{color:var(--paper-hi)!important}
.foot-h{font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.16em;color:var(--violet-hi);margin:0 0 .5rem}
.foot-c{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;font:500 .6875rem/1.6 var(--f-mono);color:#8D8A9E;margin:0;padding:1.5rem 0 2rem;border-top:1px solid var(--line-d)}
.foot-strip{border-top:1px solid var(--line-d);overflow:hidden;padding:1.1rem 0;background:var(--night-0)}
.marq{display:flex;gap:2.5rem;width:max-content;font:800 1.15rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.14em;color:#6F6B82}
.marq span{display:inline-flex;align-items:center;gap:2.5rem}
.marq span::after{content:"";width:.35rem;height:.35rem;background:var(--violet);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
@media (prefers-reduced-motion:no-preference){.marq{animation:marq 70s linear infinite}}
@keyframes marq{to{transform:translateX(-50%)}}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem}
.share-b{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.6rem;background:#fff;border:1px solid var(--line);color:var(--ink);transition:transform .2s,border-color .2s}
.share-b:hover{transform:translateY(-2px);border-color:var(--violet)}
.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-1);border-color:var(--line-d)}
.share-b-d .pico,.share-b-d .pico path{fill:var(--cream)}

/* ---------- Cookie consent (marketing.v2.consent) ---------- */
.ck{position:fixed;z-index:60;left:1rem;right:1rem;bottom:1rem;max-width:30rem;margin-left:auto;background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:.9rem;padding:1.25rem;box-shadow:0 1.5rem 3rem -1rem rgba(13,11,20,.6);font-family:var(--f-text)}
.ck[hidden]{display:none}
.ck-t{margin:0 0 .5rem;font:700 1.05rem/1.3 var(--f-text)}
.ck-p{margin:0;font-size:.875rem;line-height:1.55;color:var(--mute)}
.ck-p a{color:var(--violet-ink);text-decoration:underline}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;margin-top:1rem}
.ck-b .btn{justify-content:center}
.ck-s{display:none}
@media (max-width:40rem){
  .ck{left:0;right:0;bottom:0;max-width:none;border-radius:.9rem .9rem 0 0;border-width:1px 0 0;padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));display:flex;align-items:center;gap:.75rem}
  .ck-t,.ck-p{display:none}
  .ck-s{display:block;flex:1;min-width:0;margin:0;font-size:.8125rem;line-height:1.35;color:var(--ink)}
  .ck-s a{color:var(--violet-ink);text-decoration:underline}
  .ck-b{flex:none;margin:0;grid-template-columns:1fr 1fr;width:11.5rem;gap:.5rem}
  .ck-b .btn{padding-left:.5rem;padding-right:.5rem;min-width:0}
}

/* ---------- Legal pages (terms, privacy): ruled paper on cream ---------- */
.jx-hero .lg-kick{margin:1.75rem 0 0;color:var(--mute-d)}
.lg-k{font:500 var(--t-label)/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--violet-ink)}
.legal .wrap{max-width:62rem}
.lg-meta{display:flex;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line);font:500 var(--t-label)/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute)}
.lg-body{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(3rem,6vw,4.5rem);margin-top:clamp(2.5rem,5vw,4rem)}
.legal{overflow-wrap:break-word}
.lg-note{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:var(--r);padding:clamp(1.25rem,3vw,2rem)}
.lg-lead{margin:1rem 0 0;font-size:var(--t-lead);line-height:1.6;color:var(--ink)}
.lg-note p+p{margin-top:1rem}
.lg-sec{border-top:1px solid var(--line);padding-top:clamp(1.5rem,3vw,2.25rem)}
.lg-h{display:flex;align-items:baseline;gap:1rem}
.legal h2{font:800 clamp(1.9rem,3.4vw,2.9rem)/.95 var(--f-display);text-transform:uppercase;color:var(--ink);margin:0;text-wrap:balance}
.legal h3{font:700 1.125rem/1.3 var(--f-text);color:var(--ink);margin:0 0 .75rem}
.lg-txt{max-width:46rem;margin-top:1.5rem;font-size:1rem;line-height:1.7;color:var(--mute)}
.lg-txt>*+*{margin-top:1.25rem}
.lg-txt p{margin:0}.lg-txt p+p{margin-top:.875rem}
.legal strong{color:var(--ink);font-weight:600}
.lg-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.6rem}
.lg-list.lg-ol{list-style:decimal;padding-left:1.5rem}
.lg-li{display:flex;gap:.75rem}
.lg-mk{font:500 var(--t-label)/1.9 var(--f-mono);color:var(--violet-ink);flex:none}
.lg-code{overflow-wrap:anywhere;font:500 .8125rem/1.5 var(--f-mono);background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r-s);padding:.15rem .4rem;color:var(--ink)}
.lg-a{color:var(--violet-ink);text-decoration:underline;text-underline-offset:.15em}
.lg-a:hover{color:var(--ink)}
.lg-quote{border-left:2px solid var(--violet);padding-left:1.25rem}
.lg-fine{margin-top:.5rem;font-size:.875rem;color:var(--mute)}
.lg-foot{margin-top:2rem;color:var(--mute)}
.lg-addr{border-top:1px solid var(--line);padding-top:1rem}
.lg-addr p{margin:0}
.lg-dl{margin:0;border-top:1px solid var(--line)}
.lg-def{display:grid;grid-template-columns:minmax(9rem,1fr) 3fr;gap:.5rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.lg-def dt{font:500 var(--t-label)/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.lg-def dd{margin:0}
.lg-tblw{overflow-x:auto;margin-top:1rem}
.lg-tbl{width:100%;min-width:40rem;border-collapse:collapse;text-align:left;font-size:.9375rem}
.lg-tbl th{font:500 var(--t-label)/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.lg-tbl td{padding:.75rem 1rem;vertical-align:top;border-bottom:1px solid var(--line)}
.lg-tbl td.lg-k{white-space:nowrap}
.lg-strong{color:var(--ink);font-weight:600}
@media (max-width:40rem){.lg-def{grid-template-columns:1fr}.lg-meta{flex-direction:column;gap:.35rem}}

/* =================================================================
   Inner pages: page header, Journal, How it works, Playbooks, Pricing,
   About, Demo. Same tokens, same signs, same board language.
   ================================================================= */
.jx-hero{position:relative;overflow:hidden;padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem);background:var(--night);color:var(--paper-hi);isolation:isolate;border-bottom:1px solid var(--line-d)}
.jx-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(50rem 24rem at 90% 0%,rgba(118,108,246,.26),transparent 60%),radial-gradient(40rem 20rem at 0% 120%,rgba(234,77,153,.14),transparent 60%),linear-gradient(rgba(250,247,240,.03) 1px,transparent 1px) 0 0/100% 4rem,linear-gradient(90deg,rgba(250,247,240,.03) 1px,transparent 1px) 0 0/4rem 100%;-webkit-mask-image:radial-gradient(ellipse 90% 90% at 60% 20%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 90% 90% at 60% 20%,#000 30%,transparent 100%)}
.jx-h{font:800 var(--t-h1)/.88 var(--f-display);text-transform:uppercase;color:var(--cream);margin:0;text-wrap:balance}
.jx-lead{margin-top:1.5rem}
.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:1rem;overflow:hidden;background:var(--cream-3)}
.jx-lead-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.jx-lead-post:hover .jx-lead-img img{transform:scale(1.03)}
.jx-lead-t{font:800 clamp(2rem,3.6vw,3.4rem)/.95 var(--f-display);text-transform:uppercase;margin:1.1rem 0 1rem;color:var(--ink)}
.jx-lead-body .lead{margin-bottom:1.75rem}
.jx-grid{margin-top:clamp(2.5rem,5vw,4rem);row-gap:3rem}
.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:3px;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:68rem}
.jx-back{display:inline-flex;align-items:center;gap:.4rem;font:500 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--violet-hi);margin-bottom:1.75rem;min-height:2.75rem}
.jx-back:hover{text-decoration:underline;text-underline-offset:.2em}
.jx-title{font:800 clamp(2.4rem,5.4vw,5.2rem)/.92 var(--f-display);text-transform:uppercase;margin:1.25rem 0;max-width:22ch;color:var(--cream);text-wrap:balance}
.jx-meta{display:grid;grid-template-columns:repeat(4,minmax(0,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:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.14em;color:var(--violet-hi);margin-bottom:.5rem}
.jx-meta dd{margin:0;font-size:.875rem;color:var(--paper-hi)}
.jx-figure{margin-top:calc(-1 * clamp(5.6rem,11vw,10rem))}
.jx-figure img{width:100%;max-width:68rem;margin:0 auto;aspect-ratio:16/9;object-fit:cover;border-radius:1rem;box-shadow:0 2.5rem 5rem -2.5rem rgba(21,19,29,.55)}
.jx-body{display:grid;grid-template-columns:13.5rem minmax(0,45rem) 1fr;gap:clamp(1.5rem,4vw,4rem);padding-top:clamp(3rem,6vw,5rem);padding-bottom:clamp(4rem,8vw,6.5rem)}
.jx-toc{position:sticky;top:6.25rem;align-self:start;font-size:.875rem}
.jx-toc nav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line)}
.jx-toc a{padding:.375rem 0 .375rem .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-ink)}
.jx-share{position:sticky;top:6.25rem;align-self:start;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.jx-share .share-row{display:grid;grid-template-columns:repeat(2,2.75rem)}
.jx-prose{font-size:1.1rem;line-height:1.78;color:#2F3137}
.jx-prose>*:first-child{margin-top:0}
.jx-prose h2{font:800 clamp(1.9rem,3vw,2.6rem)/1 var(--f-display);text-transform:uppercase;color:var(--ink);margin:2.4em 0 .7em;scroll-margin-top:6.25rem}
.jx-prose h3{font:700 clamp(1.2rem,1.9vw,1.4rem)/1.25 var(--f-text);color:var(--ink);margin:2em 0 .6em;scroll-margin-top:6.25rem}
.jx-prose p{margin:0 0 1.2em}
.jx-prose a{color:var(--violet-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.jx-prose a:hover{color:#B02A6C}
.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:.75rem;background:var(--cream-2);border-left:3px solid var(--violet);color:var(--ink);font-size:1.05em}
.jx-prose blockquote p:last-child{margin:0}
.jx-prose code{background:rgba(30,32,36,.07);border-radius:.3rem;padding:.1em .35em;font:500 .85em var(--f-mono)}
.jx-prose pre{background:var(--night);color:var(--cream);border-radius:.75rem;padding:1.2em 1.4em;overflow-x:auto;margin:0 0 1.4em;font-size:.88em}
.jx-prose pre code{background:none;padding:0;color:inherit}
.jx-prose img{max-width:100%;height:auto;border-radius:.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(--cream-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-prose .jx-intro{font-size:1.2em;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-prose .jx-faq summary{font-size:1.02em}
.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:.9rem;background:var(--night);color:var(--cream);text-decoration:none;font:700 1.05em/1.3 var(--f-text)}
.jx-prose .jx-cta .arr{color:var(--magenta);transition:transform .2s}
.jx-prose .jx-cta:hover{color:var(--cream)}
.jx-prose .jx-cta:hover .arr{transform:translateX(.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.4em}
.jx-prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.2em;font:600 .72em/1.6 var(--f-mono);color:var(--violet-ink);background:var(--cream-2);border-radius:.25rem;padding:0 .35em}
.jx-more{background:var(--cream-2);border-top:1px solid var(--line)}
.jx-more .split-h{margin-bottom:2.5rem}

/* How it works */
.hiw-h{font-size:var(--t-h1)}
.hiw-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));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 .6875rem/1 var(--f-mono);color:var(--violet-ink);letter-spacing:.1em}
.hiw-t{font:800 1.75rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;margin:.8rem 0 .6rem}
.hiw-step p{margin:0;color:var(--mute);line-height:1.6}
.hiw-step .rail-ic{margin-bottom:1.1rem}
.hiw-step .hiw-n{display:block}
.hiw-sec{padding-top:clamp(3.5rem,7vw,6.25rem)}
.rail-ic{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.6rem;background:var(--night);color:var(--violet-hi)}
.rail-ic .ico{width:1.4rem;height:1.4rem}
.rails{list-style:none;margin:0 0 1.75rem;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.rail{position:relative;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.6rem}
.rail-n{position:absolute;top:1.6rem;right:1.6rem;font:500 .6875rem/1 var(--f-mono);color:var(--mute)}
.rail h3{font:700 1.2rem/1.25 var(--f-text);margin:1.1rem 0 .5rem}
.rail p{margin:0;color:var(--mute);line-height:1.6}
.charts{display:grid;grid-template-columns:1.6fr 1fr;gap:1.25rem}
.charts-2{grid-template-columns:1fr 1fr}
.chart{margin:0;background:#fff;border:1px solid var(--line);border-radius:1rem;padding:1.6rem}
.chart-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1.25rem;align-items:baseline;margin-bottom:1.1rem}
.chart-t{font:700 1.1rem/1.25 var(--f-text)}
.chart-s{font:500 .6875rem/1.4 var(--f-mono);color:var(--mute)}
.chart-foot{font-size:.75rem;color:var(--mute);margin:.9rem 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 10px var(--f-mono);fill:var(--mute)}
.chart .lbl{font:600 12px var(--f-text);fill:var(--ink)}
.chart .ln{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .ln-pink{fill:none;stroke:var(--magenta);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .area{fill:rgba(118,108,246,.1)}
.chart .band{fill:rgba(234,77,153,.1)}
.chart .band-ok{fill:rgba(118,108,246,.08)}
.chart .dot{fill:var(--violet);stroke:#fff;stroke-width:2}
.chart .dot-pink{fill:var(--magenta)}
.chart .xh{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:0}
.chart .hit{fill:transparent;cursor:crosshair}
.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,.1)}
.chart .qbar{fill:var(--violet)}
.chart .pin circle{fill:var(--night);stroke:#fff;stroke-width:2}
.chart .pin text{font:700 12px var(--f-text);fill:#fff}
.chart-dark{background:var(--night-1);border-color:var(--line-d);color:var(--paper-hi)}
.chart-dark .chart-s{color:var(--mute-d)}
.chart-dark .grid{stroke:var(--line-d)}
.chart-dark .ax{fill:var(--mute-d)}
.chart-dark .dot{stroke:var(--night-1)}
.chart-dark .xh{stroke:var(--cream)}
.chart-foot-d{color:var(--mute-d);margin-top:1rem}
.tip{position:absolute;pointer-events:none;background:var(--night);color:var(--cream);font:500 .6875rem/1.35 var(--f-mono);padding:.45rem .6rem;border-radius:.35rem;white-space:nowrap;opacity:0;transform:translate(-50%,-120%);transition:opacity .15s}
.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(--magenta)}
.qd .qn{font:700 10px var(--f-text);fill:#fff;pointer-events:none}
.qm-toggle{display:inline-flex;border:1px solid var(--line);border-radius:99rem;padding:.2rem}
.qm-toggle button{font:500 .75rem/1 var(--f-mono);padding:.55rem .8rem;border-radius:99rem;color:var(--mute)}
.qm-toggle button.is-on{background:var(--ink);color:var(--cream)}
.qm-legend{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.375rem}
.qm-legend li{font-size:.75rem;background:var(--cream-2);border-radius:99rem;padding:.25rem .625rem;color:var(--mute)}
.qm-legend b{color:var(--ink);margin-right:.2rem}
.sig-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-top:3rem}
.sig{background:var(--night-1);border:1px solid var(--line-d);border-radius:1rem;padding:1.35rem}
.sig-f{margin:0;font:500 .625rem/1.3 var(--f-mono);color:#F48CBE;text-transform:uppercase;letter-spacing:.1em}
.sig h3{font:800 1.5rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;margin:.75rem 0 .9rem;color:var(--cream)}
.sig ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.875rem;color:var(--mute-d)}
.sig li{padding-left:.9rem;position:relative}
.sig li::before{content:"";position:absolute;left:0;top:.62em;width:.35rem;height:.35rem;background:var(--violet-hi);clip-path:polygon(0 0,100% 50%,0 100%,22% 50%)}
.hood-ic{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:.6rem;border:1px solid var(--line-d);color:var(--violet-hi)}
.sig-ic{margin-bottom:1rem}

/* Playbooks */
.pb-hero{padding-bottom:clamp(3.5rem,7vw,5.5rem)}
.pb-hero .eyebrow{margin:0}
.pb-hero .jx-meta dd{font:800 clamp(1.7rem,2.8vw,2.4rem)/1 var(--f-display);color:var(--cream);text-transform:uppercase}
.pb-start{padding:clamp(3rem,6vw,5rem) 0 0}
.pb-start-h{font-size:clamp(2rem,3.6vw,3.2rem);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:800 var(--t-h1)/.88 var(--f-display);text-transform:uppercase;color:var(--cream);max-width:14ch;margin:0}
.pb-list-h{margin:clamp(4rem,8vw,6.5rem) 0 2.5rem}
.pb-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}
.pb-card{position:relative;display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:.85rem;padding:1.4rem 3.5rem 1.4rem 1.4rem;transition:border-color .2s,transform .2s var(--ease),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-k{font:500 .625rem/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--violet-ink)}
.pb-card-t{font:700 1.15rem/1.25 var(--f-text);color:var(--ink)}
.pb-card .arr{position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);color:var(--mute);transition:transform .2s,color .2s}
.pb-card:hover .arr{color:var(--violet);transform:translate(.25rem,-50%)}

/* Pricing page */
.pr-sec{padding-top:0}
.pr-h{margin-bottom:2.25rem}
.pr-defs{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.pr-defs .pb-card{padding-right:1.4rem}
.pr-defs .pb-card:hover{transform:none;border-color:var(--line);box-shadow:none}
.pr-defs p{margin:0;color:var(--mute);line-height:1.6;font-size:.9375rem}
.pr-faq{max-width:52rem}

/* About page */
.ab-links{text-align:left;display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1.75rem}
.ab-facts{margin:0;border-top:1px solid var(--line)}
.ab-facts div{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.ab-facts dt{font:500 .6875rem/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.ab-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.ab-facts a,.ab-legal a{color:var(--violet-ink)}
.ab-legal{margin-top:1.75rem}

/* Demo page */
.demo-hero .tag-s{margin-top:1.75rem}
.demo-tag{display:inline-block;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;padding:.45rem .65rem;border-radius:99rem;border:1px solid var(--line-d2);color:var(--mute-d)}
.demo-hero .demo-tag{margin-top:1.75rem}
.cream .demo-tag{border-color:var(--line);color:var(--mute)}
.demo-nav{position:sticky;top:var(--nav-h);z-index:5;background:var(--cream);border-bottom:1px solid var(--line)}
.demo-nav ol{list-style:none;margin:0 auto;padding:0;display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none}
.demo-nav ol::-webkit-scrollbar{display:none}
.demo-nav a{display:flex;align-items:center;gap:.5rem;padding:1rem .875rem;font:600 .875rem/1 var(--f-text);color:var(--mute);white-space:nowrap;border-bottom:2px solid transparent;min-height:2.75rem}
.demo-nav a b{font:500 .6875rem/1 var(--f-mono);color:var(--violet-ink)}
.demo-nav a:hover,.demo-nav a[aria-current="step"]{color:var(--ink);border-bottom-color:var(--violet)}
.demo-step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(1.75rem,4vw,4rem);align-items:center;padding:clamp(3rem,8svh,6rem) 0;border-bottom:1px solid var(--line);scroll-margin-top:8.5rem}
.demo-step:last-child{border-bottom:0}
.demo-n{font:500 .6875rem/1 var(--f-mono);color:var(--violet-ink);letter-spacing:.1em;text-transform:uppercase}
.demo-t{font:800 clamp(2rem,3.4vw,3.2rem)/.95 var(--f-display);text-transform:uppercase;margin:.75rem 0 1rem}
.demo-step p{margin:0 0 1rem;color:var(--mute);line-height:1.6}
.demo-do{border-left:2px solid var(--violet);padding:.25rem 0 .25rem 1rem;color:var(--ink)!important}
.demo-do b{display:block;font:500 .625rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--violet-ink);margin-bottom:.4rem}
.demo-shot{margin:0}
.demo-shot a{display:block;border-radius:.85rem;overflow:hidden;border:1px solid var(--line);box-shadow:0 1.5rem 4rem -1.5rem rgba(21,19,29,.45);background:var(--night)}
.demo-shot img{width:100%;height:auto}
.demo-shot-tall a{max-height:min(46rem,80svh);overflow-y:auto}
.demo-shot figcaption{margin-top:.6rem;font-size:.8125rem;color:var(--mute)}
.demo-pager{display:flex;gap:.75rem;margin-top:1.5rem}
.demo-pager .btn{border:1px solid var(--line)}
.demo-pager .btn:hover{background:var(--ink);color:var(--cream)}
.demo-pager .btn[hidden]{display:none}
html.demo-js .demo-step{display:none;border-bottom:0}
html.demo-js .demo-step.is-on{display:grid;animation:demo-in .35s var(--ease)}
@keyframes demo-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
.hero-actions .btn-ink{border:0}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .nav-links{display:none}
  .nav-burger{display:block}
  .nav.is-open .nav-mobile{display:flex;flex-direction:column;padding:.5rem var(--gut) 1.25rem;border-top:1px solid var(--line-d)}
  .nav-mobile a{padding:.85rem 0;border-bottom:1px solid var(--line-d);font-size:1.0625rem;color:var(--paper-hi)}
  .nav-mobile a:last-child{border-bottom:0}
  .hero-top{grid-template-columns:1fr;align-items:start}
  .radar-grid,.plan-grid,.pre-grid,.clr-grid,.log-grid,.faq-grid{grid-template-columns:1fr}
  .radar{max-width:28rem}
  .inst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gauge,.gauge-wide{grid-column:span 1}
  .charts{grid-template-columns:1fr}
  .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}
  .rails{grid-template-columns:1fr}
  .jx-body{grid-template-columns:minmax(0,1fr)}
  .jx-toc,.jx-share{position:static}
  .jx-toc{display:none}
  .jx-share{flex-direction:row;align-items:center;gap:1.1rem;border-top:1px solid var(--line);padding-top:1.25rem}
  .jx-share .foot-h{margin:0}
  .jx-share .share-row{display:flex}
  .pb-cards{grid-template-columns:1fr 1fr}
  .strip.is-pulled{transform:translateX(-.6rem)}
}
@media (max-width:860px){
  .split-h,.sec-h-split,.cta-in,.foot-top,.jx-lead-post{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .ag-grid{grid-template-columns:1fr}
  .dep-facts{grid-template-columns:1fr}
  .trim-grid{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr 1fr}
  .nav-signin{display:none}
  .jx-meta{grid-template-columns:1fr 1fr}
  .jx-prose{font-size:1.04rem}
  .charts-2{grid-template-columns:1fr}
  .hiw-steps,.sig-grid{grid-template-columns:1fr}
  .demo-step{grid-template-columns:1fr}
  .demo-shot{order:-1}
  .strip{grid-template-columns:4.6rem minmax(0,1fr) 3.6rem;grid-template-rows:auto auto}
  .strip-t,.strip-c{white-space:normal}
  .strip>.strip-slot{grid-column:1/-1;border-left:0;border-top:1px solid rgba(30,32,36,.16);display:flex!important;justify-content:space-between;align-items:center;padding:.45rem .7rem}
}
@media (max-width:560px){
  .inst{grid-template-columns:1fr}
  .pb-cards{grid-template-columns:1fr}
  .ab-facts div{grid-template-columns:1fr;gap:.25rem}
  .log dl{grid-template-columns:1fr}
  .log{transform:none}
  .nav-cta .btn{padding:.6rem .85rem;font-size:.875rem}
  .nav-logo img{height:1.6rem}
  .bars li{grid-template-columns:5.5rem minmax(0,1fr) 2.8rem}
  .hero-actions .btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

.radar-grid .lead,.pre-grid .lead,.clr-grid .lead,.log-grid .lead,.faq-grid .lead{margin-top:1.25rem}
.radar-cards{margin-top:2rem}
.pico-line{fill:none!important;stroke:currentColor}
.b-dest .pico-line,.dest-ic .pico-line{color:var(--cream)}
.pico-line path,.pico-line circle{fill:none!important}
@media (max-width:560px){.log{margin-left:.75rem}}
.jx-back{display:flex;width:fit-content}
.dark .post-d,.night-0 .post-d{color:var(--mute-d)}
/* Inner page headers carry the gate sign too */
.jx-hero .eyebrow,.jx-post-hero .pb-hero .eyebrow{gap:0;padding:.5rem .75rem .5rem .6rem;border-radius:.3rem;background:var(--cream);color:var(--night);font:800 .9375rem/1 var(--f-display);letter-spacing:.14em}
.jx-hero .eyebrow::before{width:.55rem;height:.55rem;margin-right:.55rem;background:var(--violet)}
