/* Nexxtool AI homepage: base, type, nav, buttons.
   Fonts: Schibsted Grotesk (headlines), IBM Plex Sans (body), IBM Plex Mono (code only). All self-hosted, SIL OFL. */
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-v7-latin-wght.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/ibm-plex-sans-latin-wght.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500.woff2") format("woff2")}
:root{
  --bg:#06080C;--s1:#0B0F17;--s2:#0E131D;--input:#0A0E15;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --text:#F2F5FA;--body:#B8C0CC;--muted:#7D8796;--blue:#4C8DFF;--blue-l:#4C8DFF;--blue-glow:rgba(76,141,255,.45);
  --red:#EF4444;--red-text:#FF6B6B;--red-fill:#2A0B10;--green:#22C55E;--green-text:#4ADE80;--green-fill:#0B2416;
  --ease:cubic-bezier(.22,1,.36,1);
  --head:"Schibsted Grotesk",system-ui,sans-serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --nav-h:5.25rem;
  /* G1 text floors (shared tokens, also used by docs/legal/pricing chrome and dashboard/admin): 0 on phones/tablets, real floors from 1280px up.
     Use as font-size:max(<design size>,var(--t-body)) for sentences, max(<design size>,var(--t-small)) for small labels. */
  --t-body:0px;--t-small:0px;
}
@media (min-width:1280px){:root{--t-body:15px;--t-small:13px}}
*,*::before,*::after{box-sizing:border-box}
/* Scale = 16px x min(width/1536, height/1024); floor 12px, cap 24px. Tablet/phone keep 16px. */
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
@media (min-width:1280px){html{font-size:clamp(12px,min(calc(100vw / 96),calc(100vh / 64)),24px)}}
body{margin:0;background:var(--bg);color:var(--body);font:400 max(1.0625rem,var(--t-body))/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
code,pre,kbd,textarea.pg-textarea-tall{font-family:var(--mono)}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus{outline:none}
:focus-visible{outline:.125rem solid #8DB8FF;outline-offset:.1875rem;border-radius:.25rem}
.skip{position:absolute;left:.75rem;top:-3.75rem;z-index:100;background:#fff;color:#000;padding:.625rem 1rem;border-radius:.4rem;font-weight:600}
.skip:focus{top:.75rem}
.wrap{width:87.5vw;margin:0 auto}
.ic{width:1.5rem;height:1.5rem;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type scale */
h1,h2,h3{font-family:var(--head);color:var(--text)}
h2{font-size:2.5rem;line-height:1.08;font-weight:700;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:max(1.2rem,var(--t-body));line-height:1.25;font-weight:600;letter-spacing:-.008em}
.eyebrow{font-family:var(--sans);font-size:max(.85rem,var(--t-small));line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#A3ACBB;font-weight:600}
.sec-sub{font-size:max(1.125rem,var(--t-body));line-height:1.55;color:var(--body);max-width:40rem}
.fine{font-size:max(.9rem,var(--t-body));line-height:1.5;color:var(--muted)}
.grad{background:linear-gradient(180deg,#F3F7FF 0%,#7FA9FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* buttons: flat */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;height:3.25rem;padding:0 1.75rem;border-radius:62.44rem;font-family:var(--sans);font-weight:600;font-size:max(1.0625rem,var(--t-body));white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color .15s,border-color .15s,color .15s}
.btn .arrow{width:1.2rem;height:1.2rem}
.btn-primary{background:#FFFFFF;color:#06080C}
.btn-primary:hover{background:#F2F5FA}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line2)}
.btn-ghost:hover{border-color:rgba(255,255,255,.6)}
.btn-sm{height:2.7rem;padding:0 1.25rem;font-size:max(.98rem,var(--t-body))}
.btn-sm .arrow{width:1.1rem;height:1.1rem}

/* nav */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background-color .15s,border-color .15s}
.nav.scrolled{background:rgba(6,8,12,.9);border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:1.5rem}
.brand{font-family:var(--head);color:var(--text);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;white-space:nowrap}
.nav-links{display:flex;gap:2.1rem;font-size:max(.98rem,var(--t-body));white-space:nowrap}
.nav-links a{color:#C9D0DB;transition:color .15s}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:1.3rem}
.nav-signin{font-size:max(.98rem,var(--t-body));color:#E6EAF1;font-weight:500;white-space:nowrap}
.nav-signin:hover{color:#fff}
.nav-burger{display:none;width:2.75rem;height:2.75rem;border:1px solid var(--line2);border-radius:.6rem;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.nav-burger span{display:block;width:1.1rem;height:.125rem;background:#fff;border-radius:.125rem;transition:transform .15s,opacity .15s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.425rem) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.425rem) rotate(-45deg)}

/* inline highlights (used in the hero example and nowhere else) */
.chip{border-radius:.4rem;padding:1px .4rem;margin:0 1px;color:#fff;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chip-red{background:rgba(239,68,68,.82)}
.chip-green{background:rgba(34,197,94,.34);box-shadow:inset 0 0 0 1px rgba(34,197,94,.55)}

@media (max-width:1279px){
  .wrap{width:auto;margin:0 1.75rem}
  .nav-links{display:none;position:absolute;left:0;right:0;top:var(--nav-h);flex-direction:column;gap:0;background:#080B11;border-bottom:1px solid var(--line);padding:.5rem 1.75rem 1rem}
  .nav-links.open{display:flex}.nav-links a{padding:.9rem 0;border-bottom:1px solid var(--line);font-size:max(1.05rem,var(--t-body))}
  .nav-burger{display:flex}.nav-signin{display:none}
}
@media (max-width:520px){:root{--nav-h:4.25rem}.wrap{margin:0 1.25rem}.nav-links{padding:.5rem 1.25rem 1rem}.brand{font-size:1.3rem}.btn-sm{height:2.5rem;padding:0 1rem;font-size:max(.92rem,var(--t-body))}.nav-right{gap:.6rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
/* brand logo (owner N monogram) */
.brand{display:inline-flex;align-items:center;gap:.55rem}
.brand-logo{width:28px;height:28px;border-radius:6px;flex:none;display:block}
@media (max-width:520px){.brand{gap:.4rem}.brand-logo{width:24px;height:24px;border-radius:5px}}
@media (max-width:400px){.brand{font-size:1.1rem}}
@media (max-width:380px){.brand{font-size:1rem}.brand-logo{width:22px;height:22px}}
@media (max-width:340px){.nav .brand-logo{display:none}}

/* Hero. Master artboard = ref-hero.png at 1536px, where 1rem = 16px. Sizes are rem; the art block is anchored to the right edge and the copy to the
   container's left edge, so the composition scales with min(width, height) and always fits the first screen together with the strip.
   Phone and tablet (<1280px) use a stacked layout. This is the ONLY place (with the playground) that uses glass, blur and glow. */
.hero{--dk:1;--dv:0;position:relative;overflow:hidden;margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h);isolation:isolate;min-height:calc(46.1rem + var(--dv) * 1rem)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.4rem;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,19,0),#080C13)}
.hero-bg{position:absolute;inset:0;z-index:-3;background:
  radial-gradient(44% 46% at 94% 6%,rgba(30,50,98,.34),transparent 72%),
  radial-gradient(20% 26% at 0% 97%,rgba(30,78,230,.55),transparent 74%),
  radial-gradient(60% 55% at 70% 42%,rgba(16,28,56,.6),transparent 74%),
  linear-gradient(180deg,#06080C 0%,#070B14 55%,#06080C 100%)}
/* art block: 98rem wide, right edge 2vw past the viewport (the rock bleeds off-screen); x coordinates inside it equal ref-hero x at 1536 */
.hero-art{position:absolute;right:-2vw;top:0;width:98rem;height:100%;pointer-events:none}
.hero-rock{position:absolute;right:0;top:24.25rem;width:69.12rem;z-index:1;mix-blend-mode:screen;will-change:transform}
.hero-rock img{width:100%;height:auto;aspect-ratio:2400/960}
.hero-visual{--hr:.786;position:absolute;left:45.24rem;top:calc(6.04rem + (.786 - var(--hr)) * 42.82rem * var(--dk));width:calc(42.82rem * var(--dk));aspect-ratio:1/var(--hr);z-index:2;pointer-events:auto}
.hero-copy{position:relative;margin-left:6.25vw;margin-top:2.6rem;width:40rem;z-index:3}
.hero-copy .eyebrow{margin-bottom:1.4rem;color:#9AA3B2}
.hero h1{max-width:38.2rem;font-weight:800;font-size:4.75rem;line-height:.97;letter-spacing:-.035em;color:#F4F7FC}
.lede{font-size:max(1.2rem,var(--t-body));line-height:1.45;color:#B2BAC7;width:39rem;margin-top:1rem}
.cta-row{display:flex;gap:1.5rem;margin-top:1.4rem}
.cta-row .btn{height:3.6rem;font-size:max(1.1rem,var(--t-body));padding:0 1.85rem}
.micro{margin-top:.65rem;font-size:max(.95rem,var(--t-body));color:#8B95A6}
.trust{display:flex;gap:1.6rem;margin-top:1rem}
.trust li{display:flex;align-items:center;gap:.7rem;max-width:10.2rem;font-size:max(.9rem,var(--t-body));line-height:1.35;color:#BAC3D0}
.trust .ic{color:#7DA9FF;width:1.6rem;height:1.6rem}

/* glass stack: flat panel, then the transform fitted to the reference quad (fit_tilt.py) */
.stack{--u:calc(1rem * var(--dk) * var(--fk,1));position:absolute;inset:0;font-size:calc(1.037rem * var(--dk) * var(--fk,1))}
.stack-float{position:absolute;inset:0}
.glass{border-radius:1.5em;border:1.5px solid;border-color:rgba(205,228,255,.92) rgba(130,178,255,.8) rgba(120,170,255,.85) rgba(195,222,255,.9);background:linear-gradient(150deg,rgba(96,128,196,.13),rgba(16,28,58,.12) 50%,rgba(44,78,156,.18));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(14,20,34,.9)}}
.g-card{--ts:1;--op:1;--ba:.38;position:absolute;inset:0;transform-origin:50% 50%;padding:1.7em 1.7em 1.6em;display:flex;flex-direction:column;opacity:var(--op);z-index:calc(10 - var(--n,0));contain:layout;
  transform:var(--T,perspective(98.49rem) rotateY(-26.1deg) rotateX(20.88deg) rotateZ(-1.95deg) translate(-50%,50%) scale(var(--ts)) translate(50%,-50%));
  transition:transform 700ms var(--ease),opacity 700ms var(--ease)}
/* the script writes the complete transform string for each depth (--T0..--T9) once on load/resize; a move only swaps data-n.
   depth n = 0 (front) .. 9 (back): scale .92^n (desktop), opacity table, border alpha .38 x opacity */
.g-card[data-n="0"]{--n:0;--ts:1;--op:1;--ba:.38;--T:var(--T0)}
.g-card[data-n="1"]{--n:1;--ts:.92;--op:.72;--ba:.2736;--T:var(--T1)}
.g-card[data-n="2"]{--n:2;--ts:.8464;--op:.58;--ba:.2204;--T:var(--T2)}
.g-card[data-n="3"]{--n:3;--ts:.7787;--op:.48;--ba:.1824;--T:var(--T3)}
.g-card[data-n="4"]{--n:4;--ts:.7164;--op:.4;--ba:.152;--T:var(--T4)}
.g-card[data-n="5"]{--n:5;--ts:.6591;--op:.34;--ba:.1292;--T:var(--T5)}
.g-card[data-n="6"]{--n:6;--ts:.6064;--op:.29;--ba:.1102;--T:var(--T6)}
.g-card[data-n="7"]{--n:7;--ts:.5578;--op:.25;--ba:.095;--T:var(--T7)}
.g-card[data-n="8"]{--n:8;--ts:.5132;--op:.21;--ba:.0798;--T:var(--T8)}
.g-card[data-n="9"]{--n:9;--ts:.4722;--op:.18;--ba:.0684;--T:var(--T9)}
/* the card's glow lives on a pseudo-element and only its opacity changes (no box-shadow is ever animated); back cards: border only */
.g-card::after{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity 700ms var(--ease);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 1px 0 0 rgba(170,205,255,.35),inset -1px 0 0 rgba(120,170,255,.5),inset 0 -1px 0 rgba(140,185,255,.7),0 0 3em rgba(90,150,255,.4),inset 0 0 1.6em rgba(150,190,255,.2)}
.g-card[data-n="0"]::after{opacity:1}
/* only the front card is glass (blur); the others are a cheap solid fill. While a move runs, the front card swaps to its solid fill and the blur returns 50ms after the move ends (script toggles .is-moving). */
.g-card[data-n="0"]{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.g-card:not([data-n="0"]){background:rgba(16,24,42,.55);-webkit-backdrop-filter:none;backdrop-filter:none;border-color:rgba(150,180,255,var(--ba))}
.hero-visual.is-warm .g-card{will-change:transform,opacity}
.hero-visual.is-moving .g-card{will-change:transform,opacity;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hero-visual.is-moving .g-card[data-n="0"]{background:rgba(18,28,52,.82)}
.g-edge,.g-card::before{transition:opacity 700ms var(--ease)}
.g-card:not([data-n="0"]) .g-edge,.g-card:not([data-n="0"])::before{opacity:0}
.g-card.is-leave{opacity:0;transition:transform 700ms var(--ease),opacity 300ms var(--ease)}
.g-card.is-return{transition:transform 700ms var(--ease),opacity 350ms var(--ease)}
.g-card.is-pop{opacity:0;transition:none!important;--ts:.98}
.deck-still .g-card{transition:none!important}
.g-card .res-text,.g-card .bubble,.g-card .msg-body{min-width:0;overflow-wrap:normal;word-break:normal}
.g-card .nb{white-space:nowrap}
.g-card .chip{-webkit-box-decoration-break:clone;box-decoration-break:clone;overflow-wrap:normal;word-break:normal}
.bubble-mono,.g-codeline{font-family:var(--mono);font-size:calc(.8125 * var(--u));line-height:1.5;overflow-wrap:normal;white-space:pre-wrap}
.g-bignum{position:absolute;left:calc(1.1 * var(--u));top:calc(.8 * var(--u));font:600 calc(1.25 * var(--u))/1 var(--head);color:#7D8796;font-variant-numeric:tabular-nums;opacity:0;visibility:hidden}
.g-card:not([data-n="0"]) .g-bignum{opacity:1;visibility:visible}
.g-body{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}
.g-card:not([data-n="0"]) .g-body{opacity:0;visibility:hidden;transition:opacity 250ms var(--ease),visibility 0s linear 250ms}
.g-card[data-n="0"] .g-body{opacity:1;visibility:visible;transition:opacity 250ms var(--ease) 120ms,visibility 0s}
.g-progress{position:absolute;left:0;right:0;top:-1.25em;display:flex;gap:3px}
.g-progress i{flex:1;height:3px;border-radius:1.5px;background:rgba(255,255,255,.12)}
.g-progress i.on{background:#4C8DFF}
.g-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--u);margin-bottom:.5em}
.g-hl{display:flex;align-items:flex-start;gap:calc(.8 * var(--u));min-width:0}
.g-numwrap{display:inline-flex;align-items:baseline;gap:calc(.15 * var(--u));flex:none;line-height:1.1;padding:.12em 0}
.g-num{font:700 calc(2.75 * var(--u))/1.1 var(--head);color:var(--text);font-variant-numeric:tabular-nums;display:inline-block}
.g-of{font:500 calc(1 * var(--u))/1 var(--sans);color:var(--muted)}
.g-titles{display:flex;flex-direction:column;min-width:0;padding-top:calc(.1 * var(--u))}
.g-name{font:600 calc(1.25 * var(--u))/1.2 var(--head);color:#F2F5FA}
.g-sub{font:calc(.9375 * var(--u))/1.3 var(--sans);color:var(--body);margin-top:calc(.15 * var(--u))}
.g-hr{display:flex;flex-direction:column;align-items:flex-end;gap:calc(.3 * var(--u));flex:none;position:relative}
.g-arrows{display:flex;gap:calc(.5 * var(--u))}
.deck-arrow{width:calc(2.25 * var(--u));height:calc(2.25 * var(--u));padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(6,8,12,.35);color:#F2F5FA;display:grid;place-items:center;cursor:pointer;transition:border-color 200ms}
.deck-arrow:hover{border-color:#4C8DFF}
.deck-arrow .ic{width:var(--u);height:var(--u)}
.g-hint{font:calc(.75 * var(--u))/1 var(--sans);color:#B8C0CC;opacity:0;transition:opacity 400ms var(--ease);white-space:nowrap}
.hero-visual.hint-on .g-card[data-n="0"] .g-hint{opacity:1}
.hero-visual.is-touch .g-card[data-n="0"] .g-hint{opacity:1;white-space:normal;text-align:right;max-width:9em;font-size:var(--u);line-height:1.2}
.g-caption{position:static;font:calc(.75 * var(--u))/1 var(--sans);color:#7D8796;letter-spacing:0}
.g-card.is-in .g-num{animation:numIn 250ms var(--ease) both}
.g-card.is-out .g-num{animation:numOut 250ms var(--ease) both}
@keyframes numIn{from{transform:translateY(.5em);opacity:0}to{transform:none;opacity:1}}
@keyframes numOut{from{transform:none;opacity:1}to{transform:translateY(-.5em);opacity:0}}
.g-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(130deg,rgba(255,255,255,.2),transparent 26%)}
.g-edge{position:absolute;left:-2px;right:-2px;bottom:-2px;height:4px;border-radius:0 0 1.5em 1.5em;background:linear-gradient(90deg,rgba(91,157,255,.35),#86B6FF 35%,#B4D0FF 70%,rgba(91,157,255,.5));box-shadow:0 0 22px 4px rgba(76,140,255,.9),0 10px 60px 10px rgba(54,110,255,.6)}
.g-cols{display:grid;grid-template-columns:minmax(0,1fr) 9.6em;gap:1.5em;position:relative;flex:1;min-height:0}
.g-msgs{display:flex;flex-direction:column;justify-content:space-between;gap:.7em;min-width:0}
.msg{display:flex;gap:.8em;align-items:flex-start}
.msg-avatar{flex:none;width:2.7em;height:2.7em;border-radius:50%;display:grid;place-items:center;background:rgba(10,16,30,.9);border:1px solid rgba(255,255,255,.16);color:#DCE4F2}
.msg-avatar .ic{width:1.45em;height:1.45em}
.msg-body{min-width:0;flex:1}
.msg-label{display:block;font-size:.98em;color:#C5CEDC;margin:0 0 .35em .2em}
.bubble{font-size:1.06em;line-height:1.42;color:#EAF0F8;background:rgba(12,18,32,.78);border:1px solid rgba(255,255,255,.1);padding:.75em .95em;border-radius:.8em}
.msg-blocked,.msg-passed{display:block}
.res{display:flex;gap:.85em;align-items:flex-start;padding:.9em 1em;border-radius:.9em}
.res-red{background:linear-gradient(180deg,rgba(46,10,16,.94),rgba(32,8,13,.94));border:1px solid rgba(239,68,68,.8);box-shadow:0 0 0 1px rgba(239,68,68,.14),0 0 2.2em -.2em rgba(239,68,68,.5),inset 0 0 2em rgba(239,68,68,.14)}
.res-amber{background:linear-gradient(180deg,#2A1C06,#231705);border:1px solid rgba(245,158,11,.6);box-shadow:0 0 0 1px rgba(245,158,11,.14),0 0 2.2em -.2em rgba(245,158,11,.4),inset 0 0 2em rgba(245,158,11,.1)}
.res-icon-amber{background:#F59E0B;color:#2A1C06!important;box-shadow:0 0 1.1em rgba(245,158,11,.6)}
.res-amber .res-title{color:#F59E0B}
.res-green{background:linear-gradient(180deg,rgba(9,30,20,.9),rgba(8,23,16,.9));border:1px solid rgba(34,197,94,.55);box-shadow:0 0 1.6em -.5em rgba(34,197,94,.45)}
.res-icon{flex:none;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;color:#fff}
.res-icon .ic{width:1.1em;height:1.1em;stroke-width:2.5}
.res-icon-red{background:var(--red);box-shadow:0 0 1.1em rgba(239,68,68,.75)}
.res-icon-green{background:var(--green);box-shadow:0 0 1em rgba(34,197,94,.65)}
.res-text{min-width:0}
.res-title{display:block;font-family:var(--sans);font-size:1.14em;font-weight:600;margin-bottom:.25em}
.res-red .res-title{color:#FF6B6B}
.res-green .res-title{color:#4BE184}
.res-text p{font-size:1.02em;line-height:1.42;color:#EDEFF5}
.res-rule{color:#EBCDD1!important;font-size:.96em!important;margin-top:.25em}
.res-text .bubble-green{background:transparent;border:0;padding:0 .8rem 0 0;color:#E9F4EC}
.g-rules{background:rgba(110,140,200,.1);border:1px solid rgba(190,215,255,.28);border-radius:.9em;padding:1em .85em;align-self:start}
.g-rules-title{font-family:var(--sans);font-size:.98em;font-weight:600;color:#E7ECF5;margin:0 0 .6em}
.g-rules li{display:flex;align-items:center;gap:.7em;padding:.62em 0;border-top:1px solid rgba(255,255,255,.07);font-size:.86em;color:#C9D1DE;line-height:1.25;white-space:nowrap;position:relative}
.g-rules li:first-child{border-top:0}
.g-rules li span{letter-spacing:-.03em}
.g-rules li.is-on{color:#fff}
.g-rules li.is-on::after{content:"";position:absolute;right:0;top:50%;width:.4em;height:.4em;margin-top:-.2em;border-radius:50%;background:#4C8DFF;box-shadow:0 0 .6em rgba(76,141,255,.9)}
.g-rules .ic{width:1.6em;height:1.6em;padding:.28em;border:1px solid rgba(255,255,255,.16);border-radius:.45em;background:rgba(255,255,255,.04);color:#B8C9EA}

/* deck: the card that comes forward pulses its red row (0.4s) and then its green row (1.2s), 600ms each. Nothing is ever hidden. */
@keyframes pulseGlow{0%,100%{opacity:0}50%{opacity:1}}
.res{position:relative}
.res-red::after,.res-amber::after,.res-green::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0}
.res-red::after{box-shadow:0 0 0 1px rgba(239,68,68,.32),0 0 3.6em .2em rgba(239,68,68,.95),inset 0 0 2.6em rgba(239,68,68,.3)}
.res-amber::after{box-shadow:0 0 0 1px rgba(245,158,11,.3),0 0 3.6em .2em rgba(245,158,11,.9),inset 0 0 2.6em rgba(245,158,11,.26)}
.res-green::after{box-shadow:0 0 3em .1em rgba(34,197,94,.9),inset 0 0 1.6em rgba(34,197,94,.18)}
.g-card.pulse-b .res-red::after,.g-card.pulse-b .res-amber::after,.g-card.pulse-p .res-green::after{animation:pulseGlow 600ms var(--ease) 1}
.hero-visual{touch-action:pan-y;outline-offset:.4rem}

/* >=1280px: front card's left edge at 47% (1280-1535) or 45% (>=1536) of the viewport. The script sets --dk (deck scale, = min(height-based, width-based) so the front card's right edge lands at ~76%) and --dv (extra hero height when the deck is scaled up),
   then computes the transform of every depth so the fan ends at exactly 95% of the viewport. The rock is pinned under the front card's bottom-left corner. */
@media (min-width:1280px){
  .hero{--bl:47vw;--rw:max(69.12rem,calc((102vw - var(--bl) - .7rem) / .752));--artx:calc(102vw - 98rem)}
  .hero-visual{left:calc(var(--bl) - var(--artx))}
  .hero-rock{right:auto;width:var(--rw);left:calc(var(--bl) + .7rem - var(--rw) * .2479 - var(--artx));top:calc(38.59rem - var(--rw) * .2075 + var(--dv) * 1rem)}
}
@media (min-width:1536px){.hero{--bl:45vw}}

/* tablet + phone (<1280): copy, buttons, then the deck STANDING ON the rock like desktop (whole deck rotateY(-8deg) rotateX(3deg); front card + 3 behind, fanned up-and-right, scale .94^n).
   The script seats every card's bottom-left corner on the rock's lit edge and sets the rock position and the height of the visible rock face. */
@media (max-width:1279px){
  .hero{min-height:0;display:flex;flex-direction:column;padding-bottom:0}
  .hero::after{height:1.2rem}
  .hero-copy{order:1;margin:0 1.75rem;width:auto;max-width:46rem;padding-top:2rem}
  .hero h1{max-width:none;font-size:clamp(2.6rem,8.6vw,4.4rem)}
  .lede{width:auto;max-width:34em;font-size:1.15rem}
  .cta-row{flex-wrap:wrap;gap:.9rem}
  .trust{flex-wrap:wrap;gap:1rem 1.8rem}
  .hero-art{position:relative;order:2;right:auto;width:auto;height:auto;margin:1.75rem 1.75rem 0;padding-bottom:3rem}
  .hero-rock{right:auto;left:-40%;top:auto;bottom:0;width:170%;overflow:hidden}
  /* every card keeps the desktop shape (height = .786 x width) and the desktop layout: it is built at its design size (width / --ps) and scaled as ONE unit by the script's transform (scale --ps, same for every card) */
  .hero-visual{--ps:.84;position:relative;left:auto;top:auto;width:70%;max-width:none;aspect-ratio:1/.786;margin:0 auto}
  .stack{position:absolute;inset:0;font-size:calc(1rem * var(--fk,1))}.stack-float{position:absolute;inset:0}
  .g-card{position:absolute;inset:auto;left:0;bottom:0;width:calc(100% / var(--ps));height:calc(100% / var(--ps));min-width:0;padding:1.7em 1.7em 1.6em}
  .g-card[data-n="1"]{--ts:.94}.g-card[data-n="2"]{--ts:.8836;--op:.5;--ba:.19}.g-card[data-n="3"]{--ts:.8306;--op:.32;--ba:.1216}
  .g-card[data-n="4"],.g-card[data-n="5"],.g-card[data-n="6"],.g-card[data-n="7"],.g-card[data-n="8"],.g-card[data-n="9"]{--op:0;pointer-events:none}
  .g-card:not([data-n="0"]) .g-bignum{display:none}
  .g-msgs{justify-content:flex-start;gap:0}
  .g-card .msg-blocked{margin-top:.875rem}.g-card .msg-passed{margin-top:.75rem}
}
@media (max-width:1279px){
  /* phone: the one-line description under the title is dropped (content shortened, shape and layout unchanged); compact paddings, same rows side by side */
  .g-sub,.msg-label,.res-rule{display:none}
  .res-text .bubble-green{padding-right:1.2rem}.g-card .chip{padding-top:0;padding-bottom:0}
  .g-num{font-size:calc(1.9 * var(--u))}.g-head{margin-bottom:.35em}.deck-arrow{width:calc(1.9 * var(--u));height:calc(1.9 * var(--u))}
  .g-head{position:relative}.g-caption{display:none}
  .hero-visual.is-touch .g-card[data-n="0"] .g-hint{position:absolute;left:4.9em;top:1.75em;align-self:flex-start;max-width:none;text-align:left;white-space:nowrap}
  .bubble,.res-text p{line-height:1.3}.res-title{margin-bottom:.1em}
  .msg-avatar{width:1.7em;height:1.7em}.msg-avatar .ic{width:1.05em;height:1.05em}.msg{gap:.4em}
  .g-card{padding:.95em}
  .g-cols{grid-template-columns:minmax(0,1fr) 8.2em;gap:.6em}
  .g-hr{position:absolute;inset:0 0 -.5em 0;pointer-events:none;align-items:flex-end}.g-hr .deck-arrow{pointer-events:auto}
  .msg{gap:.55em}.msg-avatar{width:2.2em;height:2.2em}
  .bubble{padding:.4em .5em}.res{padding:.45em .55em;gap:.45em}.res-icon{width:1.4em;height:1.4em}
  .g-rules{padding:.5em .5em}.g-rules-title{margin-bottom:.3em}.g-rules li{gap:.45em;padding:.2em 0;line-height:1.15}.g-rules .ic{display:none}
  .g-caption{font-size:var(--u)}.g-rules li,.g-rules-title,.bubble,.res-text p,.res-title{font-size:1em}.bubble-mono,.g-codeline{font-size:var(--u)}
}
@media (max-width:767px){.hero-art{margin-left:0;margin-right:0}.hero-visual{width:88%}}
@media (max-width:520px){
  .hero-copy{margin:0 1.25rem;padding-top:1.25rem}.hero-art{margin:1.25rem 1.25rem 0}
  .hero h1{font-size:2.55rem}.cta-row .btn{flex:1 1 100%}
  .trust li{flex:1 1 100%;max-width:none}
  .hero-art{margin-left:0;margin-right:0}
}
@media (prefers-reduced-motion:reduce){.g-card,.g-card::after,.g-edge,.g-card::before,.g-body,.g-hint{transition:none!important}.g-card.is-in .g-num,.g-card.is-out .g-num{animation:none}.g-card.pulse-b .res-red::after,.g-card.pulse-b .res-amber::after,.g-card.pulse-p .res-green::after{animation:none}}

/* Sections below the hero: flat, solid, tinted-dark surfaces. No blur, no glow, no shadows. One card row only (the features carousel). */

/* compatibility strip (fully on the first screen with the hero) */
.strip{background:#080C13;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:6.1rem}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 3rem}
.logos li{display:flex;align-items:center}
.logo,.logo-own{display:inline-flex;align-items:center;gap:.55rem;color:var(--text);opacity:.72;transition:opacity 200ms}
.logo:hover,.logo:focus-visible{opacity:1}
.logo-ic{height:1.5rem;width:1.5rem;fill:currentColor;flex:none}
.logo span{font-family:var(--head);font-weight:600;font-size:max(1.0625rem,var(--t-body));letter-spacing:-.01em;line-height:1.5rem}
.logo-openai .logo-ic,.logo-anthropic .logo-ic{height:1.4rem;width:1.4rem}
.logo-mistral .logo-ic{height:1.5rem;width:1.5rem}
.logo-own{opacity:1;color:var(--body);font-family:var(--sans);font-weight:500;font-size:max(1rem,var(--t-body))}
.logo-own .ic{width:1.125rem;height:1.125rem;stroke-width:1.5}
.strip-side{text-align:right;flex:none}
.strip-side .eyebrow{font-size:max(.7rem,var(--t-small));margin-bottom:.45rem}
.strip-right{font-size:max(.95rem,var(--t-body));color:var(--muted)}

/* 5. who it's for: one list, two columns, no cards */
.who{padding:3.5rem 0 3.25rem;background:var(--s1)}
/* G3: the intro sits directly under the heading, left-aligned, like every other section */
.who-head{display:block}
.who-head .sec-sub{margin-top:.75rem;max-width:40rem;text-align:left}
.who-list{display:grid;grid-template-columns:1fr 1fr;column-gap:4.5rem;margin-top:1.9rem}
.who-list li{padding:1.05rem 0 1.15rem;border-top:1px solid var(--line2)}
.who-list h3{font-size:max(1.15rem,var(--t-body));margin-bottom:.3rem}
.who-list p{font-size:max(1rem,var(--t-body));line-height:1.5;color:var(--body)}
.who .fine{margin-top:1.3rem;max-width:46rem}

/* 6. pricing: one bordered table, plans as columns */
.price{padding:4.5rem 0 3.25rem}
/* 0.5C-1: like G3, the intro sits directly under the heading, left-aligned */
.price-head{display:block}
.price-head .sec-sub{margin-top:.75rem;max-width:40rem;text-align:left}
.ent{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-top:1.5rem;padding:.9rem 1.4rem;background:var(--s1);border:1px solid var(--line2);border-radius:.6rem}
.ent strong{font-family:var(--head);font-size:max(1.15rem,var(--t-body));color:var(--text);font-weight:600}
.pnote{margin-top:1.1rem;font-size:max(.92rem,var(--t-body));color:var(--muted)}
.pnote-link{color:var(--blue-l);font-weight:600}.pnote-link:hover{color:#fff}

/* 7. developers and trust */
.dev{padding:4.5rem 0 4.75rem;background:var(--s1)}
.dev-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:4.5rem;align-items:start}
.dev-l .sec-sub{margin:.9rem 0 1.6rem}
.code-card{border-radius:.6rem;border:1px solid var(--line2);background:var(--input);overflow:hidden}
.code-tabs{display:flex;gap:.2rem;padding:.55rem .7rem 0;border-bottom:1px solid var(--line)}
.code-tab{font:inherit;font-size:max(.92rem,var(--t-body));font-weight:600;color:#9AA5B8;background:none;border:0;border-bottom:2px solid transparent;padding:.5rem .9rem .7rem;cursor:pointer;transition:color .15s,border-color .15s}
.code-tab:hover{color:#fff}
.code-tab.is-active{color:#fff;border-bottom-color:var(--blue)}
.code-pane{position:relative}
.code-pane pre{margin:0;padding:1.15rem 1.3rem 1.3rem;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere;font:400 max(.88rem,var(--t-body))/1.62 var(--mono);color:#D5E2F8;min-height:22rem}
.code-copy{position:absolute;right:.8rem;top:.7rem;z-index:2;font:inherit;font-size:max(.82rem,var(--t-small));font-weight:600;color:#C9D6EE;background:#121826;border:1px solid var(--line2);border-radius:.4rem;padding:.3rem .75rem;cursor:pointer}
.code-copy:hover{background:#1B2335;color:#fff}
.dev-docs{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;margin-top:1.3rem}
.dev-docs a{color:var(--blue-l);font-weight:500;font-size:max(1rem,var(--t-body));border-bottom:1px solid transparent}
.dev-docs a:hover{color:#fff;border-bottom-color:#fff}
.dev-status{margin-top:.5rem;font-size:max(.9rem,var(--t-body));color:var(--muted)}
.dev-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.dev-cta .btn{height:3rem;font-size:max(1rem,var(--t-body))}
.dev-r h3{font-size:1.3rem;margin-bottom:1rem}
.trust-list{display:flex;flex-direction:column;gap:.85rem}
.trust-list li{display:flex;gap:.8rem;font-size:max(1.02rem,var(--t-body));line-height:1.5;color:var(--body)}
.trust-list .ic{width:1.3rem;height:1.3rem;color:var(--green-text);margin-top:.2rem}
.trust-list strong{color:var(--text);font-weight:600}
.notes-h{margin-top:2.4rem}
.notes>div{display:grid;grid-template-columns:9.2rem 1fr;gap:1rem;padding:.8rem 0;border-top:1px solid var(--line2)}
.notes dt{font-family:var(--head);font-weight:600;color:var(--text);font-size:max(.95rem,var(--t-body));line-height:1.4}
.notes dd{font-size:max(.92rem,var(--t-body));line-height:1.5;color:var(--body)}

/* 8. FAQ, final CTA */
.faq{padding:4rem 0 4.5rem}
.faq-list{display:grid;grid-template-columns:1fr 1fr;column-gap:3.5rem;align-items:start;margin-top:1.8rem}
.qa{border-top:1px solid var(--line2)}
.qa summary{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;padding:1.1rem 0;cursor:pointer;list-style:none;font-family:var(--head);font-weight:600;font-size:max(1.12rem,var(--t-body));color:var(--text)}
.qa summary::-webkit-details-marker{display:none}
.qa-ic{flex:none;color:var(--blue);transition:transform .15s}
.qa-ic .ic{width:1.25rem;height:1.25rem}
.qa[open] .qa-ic{transform:rotate(45deg)}
.qa-a{padding:0 2.4rem 1.2rem 0}
.qa-a p{font-size:max(1rem,var(--t-body));line-height:1.6;color:var(--body)}
.cta{padding:.5rem 0 4.5rem}
.cta-band{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:2.5rem;padding:3rem 3rem 3.4rem;border:1px solid rgba(76,141,255,.35);border-radius:.75rem;background:#080C14}
.cta-band>*{position:relative;z-index:1}
.cta-horizon{position:absolute!important;left:-10%;right:-10%;bottom:0;height:62%;z-index:0!important;pointer-events:none;background:radial-gradient(60% 100% at 50% 118%,rgba(76,141,255,.85) 0%,rgba(40,90,230,.45) 38%,transparent 72%)}
.cta-horizon::after{content:"";position:absolute;left:6%;right:6%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#8FB6FF 30%,#C5DAFF 50%,#8FB6FF 70%,transparent);box-shadow:0 0 1.4rem 2px rgba(76,141,255,.9)}
.cta-band h2{font-size:2.8rem;letter-spacing:-.03em}
.cta-act{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.cta-act .micro{margin:0}

/* footer */
.foot{padding:3rem 0 1.8rem;background:#080B11;border-top:1px solid var(--line)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:3rem;align-items:start}
.foot-tag{margin-top:.7rem;font-size:max(.95rem,var(--t-body));color:#9CA7BA;max-width:22em;line-height:1.5}
.foot-copy{margin-top:1.1rem;font-size:max(.9rem,var(--t-body));color:var(--muted)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.foot-h{font-family:var(--head);font-size:max(.95rem,var(--t-body));color:var(--text);font-weight:600;margin-bottom:.8rem}
.foot-col ul{display:flex;flex-direction:column;gap:.55rem}
.foot-col a{font-size:max(.95rem,var(--t-body));color:#B6BFCC}.foot-col a:hover{color:#fff}
.foot-bar{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:baseline;margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:max(.9rem,var(--t-body));color:var(--muted)}
.foot-tm{font-size:max(.75rem,var(--t-small));color:var(--muted)}
.foot-bar a{color:var(--blue-l)}.foot-bar a:hover{color:#fff}

/* 404 */
.nf-body .hero-bg{display:none}
.nf{padding:7rem 0 8rem}
.nf-code{font-family:var(--head);font-weight:800;font-size:5rem;line-height:1;color:#7FA9FF;letter-spacing:-.04em}
.nf h1{font-size:3rem;margin:.6rem 0 0;max-width:24rem;line-height:1.05;letter-spacing:-.03em}
.nf .lede{width:auto;max-width:32rem}

/* tablet + phone */
@media (max-width:1279px){
  .strip-in{flex-direction:column;align-items:center;gap:.9rem;padding:1.2rem 0}.strip-side{text-align:center;display:flex;gap:.9rem;align-items:baseline;justify-content:center;flex-wrap:wrap}.strip-side .eyebrow{margin:0}
  .logos{justify-content:center;gap:1rem 1.5rem}.logo-ic{height:1.125rem!important;width:1.125rem!important}.logo span{font-size:max(.95rem,var(--t-body))}
  .tset{grid-template-columns:1fr 1fr}
  .dev-grid{grid-template-columns:minmax(0,1fr);gap:3rem}
  .price-head,.who-head{flex-direction:column;align-items:flex-start;gap:.8rem}
}
@media (max-width:760px){
  h2{font-size:2rem}
  .who{padding:1.75rem 0}.who-list{grid-template-columns:1fr}
  .price{padding:2.25rem 0 2rem}
  .ent{flex-direction:column;align-items:flex-start;gap:.8rem}
  .dev{padding:2rem 0 2.25rem}.dev-grid{gap:2rem}.code-pane pre{min-height:0;font-size:max(.82rem,var(--t-small));padding-top:2.7rem}.dev-cta .btn{flex:1 1 100%}
  .notes>div{grid-template-columns:1fr;gap:.2rem}
  .faq{padding:2rem 0 2.25rem}.faq-list{grid-template-columns:1fr}.qa-a{padding-right:0}
  .cta{padding:0 0 2rem}.cta-band{flex-direction:column;align-items:flex-start;padding:1.8rem 1.4rem 2.6rem;gap:1.2rem}.cta-band h2{font-size:1.9rem}.cta-act{align-items:flex-start;width:100%}.cta-act .btn{width:100%}
  .foot-in{grid-template-columns:1fr;gap:1.8rem}.foot-cols{grid-template-columns:1fr 1fr}
  .nf{padding:4rem 0 5rem}.nf h1{font-size:2.3rem}.nf-code{font-size:3.6rem}
}

/* phone only (P1.3): the largest section paddings are tightened so the page is <= 12 screens at 390x844 */
@media (max-width:767px){
  .try-sec{padding:1.5rem 0 1.5rem}.who{padding:1.25rem 0 1.25rem}
  .price{padding:1.5rem 0 1.25rem}.dev{padding:1.5rem 0 1.5rem}.faq{padding:1.5rem 0 1.5rem}.cta{padding:0 0 1.25rem}
  .foot{padding:2rem 0 1.25rem}.foot-in{gap:1.25rem}.foot-cols{gap:1.25rem 1.5rem}
  .who-list{margin-top:1.1rem}.who-list li{padding:.8rem 0 .85rem}
  .dev-grid{gap:1.5rem}.notes-h{margin-top:1.6rem}.notes>div{padding:.6rem 0}
  .faq-list{margin-top:1rem}.qa summary{padding:.85rem 0}
  .try{margin-top:1.1rem}
}

/* pricing: plan feature rows (values come from the plan fields in the database; see shared/plan-rows.js) */
@media (max-width:760px){
}

/* 3. Try it live. Glass is allowed here (with the hero) and nowhere else. */
.try-sec{padding:4rem 0 4.25rem;background:var(--s1)}
/* G3: the intro sits directly under the heading, left-aligned */
.sec-head{display:block}
.sec-head .sec-sub{margin-top:.75rem;max-width:40rem;text-align:left}
.try{margin-top:1.9rem;border-radius:1.4rem;padding:1.3rem;border:1.5px solid;border-color:rgba(190,218,255,.7) rgba(130,178,255,.55) rgba(120,170,255,.6) rgba(180,212,255,.7);
  background:linear-gradient(150deg,rgba(96,128,196,.12),rgba(16,28,58,.16) 50%,rgba(44,78,156,.16));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 3rem -.5rem rgba(76,130,255,.4)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.try{background:rgba(14,20,34,.92)}}
.try-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:0 .2rem 1rem}
.try-ex{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.try-ex-l{font-size:max(.92rem,var(--t-body));color:var(--muted);margin-right:.25rem}
.try-title{display:flex;align-items:center;gap:.55rem;font-size:max(.92rem,var(--t-body));color:var(--muted)}
.try-sep{color:var(--muted)}
.try code{font:500 .88em var(--mono);color:var(--blue)}
.chip-btn{font:inherit;font-size:max(.92rem,var(--t-body));font-weight:500;color:#D3DCEC;background:rgba(255,255,255,.05);border:1px solid rgba(190,215,255,.22);border-radius:.45rem;padding:.4rem .85rem;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.chip-btn:hover{background:rgba(120,160,255,.16);border-color:rgba(150,185,255,.55);color:#fff}
/* H3: the "A clean reply" start chip looks exactly like the other three (it used to be dimmed, which read as disabled) */
.try-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
.try-pane{border-radius:1rem;padding:1.2rem 1.2rem 1.3rem;border:1px solid rgba(150,180,255,.26);background:rgba(10,16,30,.5);min-width:0;display:flex;flex-direction:column}
.pg-label{display:block;font-size:max(.92rem,var(--t-body));color:var(--body);font-weight:500;margin:0 0 .45rem}
.pg-label-row{display:flex;justify-content:space-between;align-items:center}
.pg-link{font:inherit;font-size:max(.92rem,var(--t-body));color:var(--blue);background:none;border:0;cursor:pointer;padding:.2rem .1rem}
.pg-link:hover{color:#fff;text-decoration:underline}
.pg-textarea{width:100%;display:block;resize:vertical;min-height:5.2rem;margin:0 0 .9rem;background:var(--input);color:#E8EEF8;border:1px solid var(--line2);border-radius:.7rem;padding:.75rem .9rem;font:400 max(1rem,var(--t-body))/1.5 var(--sans);transition:border-color .15s}
.pg-textarea-tall{min-height:7.6rem;font:400 max(.9rem,var(--t-body))/1.55 var(--mono);color:#CFE0FF}
.pg-textarea:focus{border-color:rgba(130,178,255,.8)}
.pg-picker{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;margin:-.1rem 0 1rem}
.pg-picker-l{font-size:max(.92rem,var(--t-body));color:var(--muted);margin-right:.2rem}
.pg-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:auto}
.pg-actions .btn{height:2.9rem;font-size:max(1rem,var(--t-body));padding:0 1.4rem}
.pg-verdict-box{min-height:0}
.pg-empty{font-size:max(1rem,var(--t-body));color:var(--muted);padding:.9rem .2rem}
.pg-verdict-box .res{padding:1rem 1.1rem;border-radius:.9rem;gap:.9rem;font-size:max(1rem,var(--t-body))}
.pg-verdict-box .res{display:flex;gap:.85rem;align-items:flex-start;border-radius:.9rem}
.pg-verdict-box .res-red{background:rgba(46,10,16,.9);border:1px solid rgba(239,68,68,.75)}
.pg-verdict-box .res-green{background:rgba(9,30,20,.9);border:1px solid rgba(34,197,94,.55)}
.pg-verdict-box .res-info{border:1px solid var(--line2);background:rgba(255,255,255,.04)}
.pg-verdict-box .res-icon{flex:none;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;color:#fff}
.pg-verdict-box .res-icon .ic{width:1.2rem;height:1.2rem;stroke-width:2.5}
.pg-verdict-box .res-icon-red{background:var(--red)}.res-icon-green{background:var(--green)}
.pg-verdict-box .res-title{display:block;font-family:var(--sans);font-size:max(1.15rem,var(--t-body));font-weight:600;margin-bottom:.25rem}
.pg-verdict-box .res-red .res-title{color:#FF6B6B}.res-green .res-title{color:var(--green-text)}
.pg-verdict-box .res-text{min-width:0}
.pg-verdict-box .res-text p{font-size:max(1rem,var(--t-body));line-height:1.45;color:#EDEFF5}
.pg-verdict-box .res-code{display:inline-block;margin-top:.45rem;font:500 max(.78rem,var(--t-small))/1.4 var(--mono);color:#FFB9B9;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);padding:.15rem .5rem;border-radius:.4rem}
.pg-verdict-box .res-code-green{color:#A3F2C0;background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.32)}
.pg-score{color:#B9C3D4;font-size:max(.92rem,var(--t-body))}
.pg-issues{margin:.55rem 0 0;display:flex;flex-direction:column;gap:.45rem}
.pg-issues li{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;font-size:max(.98rem,var(--t-body));color:#F1D6D6}
.pg-issues code{font:500 max(.78rem,var(--t-small)) var(--mono);color:#FFB9B9;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.32);padding:.12rem .45rem;border-radius:.4rem}
.pg-raw{margin-top:.9rem;border:1px solid var(--line2);border-radius:.8rem;background:var(--input);overflow:hidden}
.pg-raw summary{cursor:pointer;list-style:none;padding:.65rem 1rem;font-size:max(.92rem,var(--t-body));font-weight:500;color:#B9C6DD;display:flex;justify-content:space-between;align-items:center}
.pg-raw summary::-webkit-details-marker{display:none}
.pg-raw summary::after{content:"+";font-size:max(1.15rem,var(--t-body));line-height:1;color:var(--blue)}
.pg-raw[open] summary::after{content:"\2212"}
.pg-pre{margin:0;padding:.2rem 1rem .9rem;max-height:17rem;overflow:auto;font:400 max(.85rem,var(--t-small))/1.55 var(--mono);color:#CFE0FF;white-space:pre-wrap;word-break:break-word}
.try-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.9rem .2rem 0;font-size:max(.92rem,var(--t-body));color:var(--muted)}
.try-foot a{color:var(--blue);font-weight:600}.try-foot a:hover{color:#fff}
/* H3: the rule chips sit in an even grid (3 per row: label + 5 chips = 2 full rows), never one chip alone on a line */
@media (min-width:1280px){.pg-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}.pg-picker .pg-picker-l{margin:0;align-self:center}.pg-picker .chip-btn{width:100%;padding-left:.4rem;padding-right:.4rem;text-align:center}}
@media (max-width:1279px){.sec-head{flex-direction:column;align-items:flex-start;gap:.8rem}}
@media (max-width:760px){
  .try-sec{padding:2.25rem 0 2.5rem}
  .try{padding:.8rem;border-radius:1.1rem}.try-grid{grid-template-columns:1fr}.try-pane{padding:1rem}
  .try-title{display:none}
  .pg-textarea{font-size:max(1rem,var(--t-body))}.pg-actions .btn{flex:1 1 100%;height:3rem}
}

/* Promotion banner: homepage only, above the nav. Rendered by the server only while a promotion is enabled and its sign-up window is open. */
.promo-bar{position:relative;z-index:60;height:2.5rem;background:#0E131D;border-bottom:1px solid rgba(255,255,255,.08);color:#F2F5FA;font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:max(.875rem,var(--t-small));line-height:1.25}
.promo-bar[hidden]{display:none}
.promo-bar-in{position:relative;display:flex;align-items:center;justify-content:center;height:100%;padding:0 3rem}
.promo-bar-t{margin:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.promo-bar-link{color:#4C8DFF;font-weight:600;margin-left:.5rem;white-space:nowrap}
.promo-bar-link:hover{color:#7FA9FF}
.promo-bar-x{position:absolute;right:max(.5rem,calc((100vw - 87.5vw) / 2 - .75rem));top:50%;transform:translateY(-50%);width:2rem;height:2rem;border:0;border-radius:50%;background:transparent;color:#B8C0CC;font-size:1.25rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.promo-bar-x:hover{color:#F2F5FA;background:rgba(255,255,255,.08)}
.promo-bar-link:focus-visible,.promo-bar-x:focus-visible{outline:2px solid #4C8DFF;outline-offset:2px;border-radius:.25rem}
@media (max-width:760px){
  .promo-bar{height:auto;min-height:2.5rem}
  .promo-bar-in{padding:.35rem 2.75rem .35rem 1rem;justify-content:flex-start}
  .promo-bar-t{white-space:normal;text-align:left;overflow:visible}
  .promo-bar-x{right:.4rem}
}

/* "What happens to every AI reply": 5 glass panels joined by a glowing line. Normal page flow: no pinning, nothing tied to the scroll position.
   When the section is in view the steps light up by themselves (home-sections script), once, then stay lit. Animates transform + opacity only.
   >=1280px: the 5 panels in one row. <1280px: vertical stack with the line down the left. */
.sec-headl{display:block}
.sec-headl .sec-sub{margin-top:.75rem;max-width:40rem;text-align:left}
.flow{background:var(--bg);position:relative}
.flow-in{padding:3.25rem 0 3rem}
.flow-stage{position:relative;margin-top:2rem}
.flow-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;position:relative;z-index:1}
.flow-line{position:absolute;left:0;right:0;top:1.9rem;height:2px;background:rgba(120,170,255,.22);z-index:0}
.flow-fill{position:absolute;inset:0;background:linear-gradient(90deg,#7FB0FF,#4C8DFF);box-shadow:0 0 .9rem 1px rgba(76,141,255,.9);transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform 600ms var(--ease);will-change:transform}
.fstep{display:block}
.fp{position:relative;height:100%;padding:1.1rem 1.15rem 1.3rem;border-radius:1.1rem;opacity:.62;transform:translateY(.5rem) scale(.98);transform-origin:50% 50%;transition:transform 600ms var(--ease),opacity 600ms var(--ease);display:flex;flex-direction:column;gap:.7rem}
.fstep.is-lit .fp{opacity:1;transform:none}
.fp-n{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid rgba(150,190,255,.6);background:#0B1220;color:#BFD6FF;font:700 max(1rem,var(--t-body))/1 var(--head);display:grid;place-items:center;transition:background-color 400ms,color 400ms,border-color 400ms}
.fstep.is-lit .fp-n{background:var(--blue);border-color:#9CC0FF;color:#06080C;box-shadow:0 0 .9rem rgba(76,141,255,.8)}
.fp-t{font-size:max(1.15rem,var(--t-body));line-height:1.2;color:var(--text)}
.fvs{display:grid;flex:1;align-content:start}
/* lit panels get the same soft blue edge glow as the hero cards (.g-edge) */
.fp::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-2px;height:4px;border-radius:0 0 1.1rem 1.1rem;background:linear-gradient(90deg,rgba(91,157,255,.35),#86B6FF 35%,#B4D0FF 70%,rgba(91,157,255,.5));box-shadow:0 0 18px 3px rgba(76,140,255,.8),0 8px 40px 6px rgba(54,110,255,.5);opacity:0;transition:opacity 600ms var(--ease);pointer-events:none}
.fstep.is-lit .fp::after{opacity:1}
/* No code / Developers: steps 4-5 crossfade in 200ms */
.fvs>.fv{grid-area:1/1;align-self:start;display:flex;flex-direction:column;gap:.5rem;transition:opacity 200ms linear}
.fv-dev{opacity:0;visibility:hidden}
.flow[data-mode="dev"] .fv-nocode{opacity:0;visibility:hidden}
.flow[data-mode="dev"] .fv-dev{opacity:1;visibility:visible}
.fbub{display:block;margin:0;padding:.65rem .8rem;border-radius:.75rem;border:1px solid rgba(190,215,255,.25);background:rgba(255,255,255,.06);color:#EDF2FB;font-size:max(1rem,var(--t-body));line-height:1.4}
.fbub-l{display:inline-block;margin-right:.5rem;padding:0 .4rem;border-radius:.3rem;background:rgba(76,141,255,.3);color:#CFE0FF;font:700 max(.875rem,var(--t-small))/1.5 var(--sans)}
.fbub-g{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.14)}
.ftag{align-self:flex-start;padding:.15rem .6rem;border-radius:62rem;border:1px solid rgba(190,215,255,.4);color:#CFE0FF;font-size:max(.875rem,var(--t-small));font-weight:600}
.fchips{display:flex;flex-wrap:wrap;gap:.5rem}
.fchip{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:62rem;font-size:max(.95rem,var(--t-body));font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);opacity:.5;transform:scale(.95);transition:opacity 400ms var(--ease),transform 400ms var(--ease);transition-delay:0ms}
.fchip-ic .ic{width:1rem;height:1rem;stroke-width:3}
.fstep.is-lit .fchip{opacity:1;transform:none;transition-delay:calc(250ms + var(--i) * 300ms)}
.fstep.is-lit .fchip-ok{background:rgba(34,197,94,.22);border-color:rgba(34,197,94,.7)}
.fstep.is-lit .fchip-bad{background:rgba(239,68,68,.3);border-color:rgba(239,68,68,.85)}
.fprob{display:flex;gap:.6rem;align-items:flex-start;margin:0;padding:.7rem .8rem;border-radius:.75rem;background:rgba(46,10,16,.85);border:1px solid rgba(239,68,68,.75);color:#FFD0D0;font-size:max(1rem,var(--t-body));line-height:1.4}
.fprob-ic{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center}
.fprob-ic .ic{width:.9rem;height:.9rem;stroke-width:3}
.fok{display:flex;gap:.6rem;align-items:center;color:#A3F2C0;font-size:max(1rem,var(--t-body));font-weight:600;line-height:1.35}
.fok-ic{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--green);color:#04130A;display:grid;place-items:center}
.fok-ic .ic{width:1rem;height:1rem;stroke-width:3}
.ffall{display:block;font-size:max(.9rem,var(--t-body));line-height:1.4;color:#B8C0CC}
.fcode{display:block;padding:.55rem .7rem;border-radius:.6rem;background:var(--input);border:1px solid var(--line2);color:#CFE0FF;font:500 max(.95rem,var(--t-body))/1.3 var(--mono);overflow-wrap:anywhere}
.flow-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.2rem;margin-top:1.6rem}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:62rem;padding:.25rem;background:rgba(255,255,255,.03)}
.seg-b{font:inherit;font-size:max(1rem,var(--t-body));font-weight:600;color:#C9D6EE;background:none;border:0;border-radius:62rem;padding:.55rem 1.2rem;cursor:pointer;min-height:2.75rem;transition:background-color .2s,color .2s}
.seg-b.is-on{background:#fff;color:#06080C}
.flow-replay{display:inline-flex;align-items:center;gap:.5rem;font:inherit;font-size:max(1rem,var(--t-body));font-weight:600;color:#fff;background:none;border:1px solid var(--line2);border-radius:62rem;padding:0 1.2rem;min-height:2.75rem;cursor:pointer}
.flow-replay:hover{border-color:rgba(255,255,255,.6)}
.flow-replay .ic{width:1.1rem;height:1.1rem}

/* desktop: panels fill the content width, equal height, content sized to the panel */
@media (min-width:1280px){
  .flow-in .wrap{width:87.5vw}
  .fp{min-height:12rem}
  .fp>.fbub,.fp>.fchips,.fp>.fprob{margin-block:auto}
  .fvs{align-content:center}
  .fp-t{font-size:max(1.3rem,var(--t-body))}
  .fbub,.fprob,.fok{font-size:max(1.05rem,var(--t-body))}
  .fchip{font-size:max(1.02rem,var(--t-body))}
  .ffall{font-size:max(1rem,var(--t-body))}
}
/* tablet + phone: vertical stack, line down the left */
@media (max-width:1279px){
  .flow-in{padding:1.75rem 0}
  .flow-stage{margin-top:1.25rem;padding-left:3.5rem}
  .flow-steps{grid-template-columns:1fr;gap:.9rem}
  .flow-line{left:1.35rem;right:auto;top:1.2rem;bottom:1.2rem;width:2px;height:auto}
  .flow-fill{transform:scaleY(var(--p,0));transform-origin:50% 0}
  .fp{min-height:0;padding:.8rem .95rem 1rem;gap:.45rem}
  .fp-n{position:absolute;left:-3.5rem;top:0;width:2.9rem;height:2.9rem}
  .fp-t{font-size:max(1.1rem,var(--t-body));padding-top:.15rem;min-height:1.6rem}
  .flow-ctl{margin-top:1.2rem}
  .seg{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .seg-b{padding:.4rem .6rem;font-size:max(.9375rem,var(--t-body));line-height:1.25}
}
@media (max-width:767px){
  .flow-in{padding:1.4rem 0 1rem}
  .flow-stage{margin-top:.9rem}
  .flow-steps{gap:.4rem}
  .fp{padding:.5rem .85rem .6rem;gap:.3rem}
  .fp-n{width:2.6rem;height:2.6rem;left:-3.3rem}
  .flow-stage{padding-left:3.3rem}
  .flow-line{left:1.3rem}
  .fbub,.fprob{padding:.45rem .65rem;line-height:1.35}
  .fchips{gap:.35rem}
  .fchip{padding:.25rem .6rem}
  .fp-t{min-height:0;padding-top:.05rem}
  .flow-ctl{margin-top:.8rem;gap:.5rem;flex-wrap:nowrap}
  .seg{flex:1 1 auto;width:auto;min-width:0}
  .seg-b{padding:.4rem .5rem}
  .seg-x{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .flow-replay{flex:none;width:auto;padding:0 .9rem;justify-content:center}
  .flow .sec-sub{font-size:max(.9375rem,var(--t-body))}
}
/* reduced motion: no movement, everything in its final (lit) state */
@media (prefers-reduced-motion:reduce){
  .fp,.fstep .fp{opacity:1!important;transform:none!important;transition:none!important}
  .fp::after{opacity:1!important;transition:none!important}
  .fchip{opacity:1!important;transform:none!important;transition:none!important}
  .flow-fill{transform:none!important;transition:none!important}
  .fv{transition:none!important}
}
.flow.is-static .fp{opacity:1;transform:none}
.flow.is-static .fp::after{opacity:1}
.flow.is-static .fchip{opacity:1;transform:none}
.flow.is-static .flow-fill{transform:none}

/* "What you get": every feature as a small glass card in one grid; a click opens a detail popup (dialog). Nothing moves on its own.
   Animates transform + opacity only. 4 columns >=1280, 3 columns 768-1279, 2 columns on phones. */
.expl{padding:3.5rem 0 3.75rem;background:var(--s1)}
.fgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:2rem 0 0;padding:0;list-style:none}
.fgrid>li{display:flex;min-width:0;position:relative;left:calc(var(--sh,0)*(100% + 1rem))}
/* a short last row is centred (4, 4, 4, then 2): the cards of that row shift right by half the empty tracks; the grid keeps its real column count */
@media (min-width:1280px){
  .fgrid>li:nth-child(4n+1):last-child{--sh:1.5}
  .fgrid>li:nth-child(4n+1):nth-last-child(2),.fgrid>li:nth-child(4n+2):last-child{--sh:1}
  .fgrid>li:nth-child(4n+1):nth-last-child(3),.fgrid>li:nth-child(4n+2):nth-last-child(2),.fgrid>li:nth-child(4n+3):last-child{--sh:.5}
}
.fcard{--acc:110,168,255;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;width:100%;min-height:10.5rem;padding:1.1rem 1.15rem 1.15rem;border-radius:1.1rem;border:1.5px solid rgba(130,178,255,.38);background:linear-gradient(150deg,rgba(96,128,196,.14),rgba(16,28,58,.16) 50%,rgba(44,78,156,.2));color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform 150ms var(--ease)}
.fcard-check{--acc:110,168,255}
.fcard-fix{--acc:251,191,36}
.fcard-know{--acc:74,222,128}
.fcard-control{--acc:196,165,255}
.fcard::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;border:1.5px solid rgba(var(--acc),.9);box-shadow:0 0 1.2rem -.2rem rgba(var(--acc),.55);opacity:0;transition:opacity 150ms var(--ease);pointer-events:none;z-index:-1}
.fcard::after{content:"";position:absolute;left:12%;right:12%;bottom:-1.5px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(var(--acc),.85),transparent);opacity:.55;pointer-events:none}
.fcard:hover{transform:translateY(-3px)}
.fcard:hover::before,.fcard:focus-visible::before{opacity:1}
.fcard:focus-visible{outline:2px solid #8DB8FF;outline-offset:3px}
.fcard-ic{flex:none;width:2.5rem;height:2.5rem;border-radius:.75rem;background:rgba(var(--acc),.16);border:1px solid rgba(var(--acc),.45);color:rgb(var(--acc));display:grid;place-items:center;margin-bottom:.25rem}
.fcard-ic .ic{width:1.35rem;height:1.35rem;stroke-width:1.75}
.fcard-plus{position:absolute;top:.8rem;right:.8rem;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(190,215,255,.35);color:#CFE0FF;display:grid;place-items:center}
.fcard-plus .ic{width:.95rem;height:.95rem;stroke-width:2.25}
.fcard-n{font:700 max(1.075rem,var(--t-body))/1.25 var(--head);color:var(--text);letter-spacing:-.005em}
.fcard-t{font-size:max(.9375rem,var(--t-body));line-height:1.45;color:#B8C0CC}
@media (min-width:768px) and (max-width:1279px){
  .fgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fgrid>li:nth-child(3n+1):last-child{--sh:1}
  .fgrid>li:nth-child(3n+1):nth-last-child(2),.fgrid>li:nth-child(3n+2):last-child{--sh:.5}
}
@media (max-width:767px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-top:1rem}
  .fgrid>li{left:calc(var(--sh,0)*(100% + .4rem))}
  .fgrid>li:nth-child(2n+1):last-child{--sh:.5}
  .fcard{min-height:0;padding:.6rem .8rem .6rem;gap:.15rem}.fcard-t{line-height:1.35}
  .fcard-ic{width:2rem;height:2rem;margin-bottom:0}
  .fcard-plus{top:.65rem;right:.65rem;width:1.6rem;height:1.6rem}
}
@media (hover:none){.fcard:hover{transform:none}}

/* the detail popup: centred dialog on desktop, bottom sheet on phones */
.fdlg{padding:0;border:0;background:transparent;color:var(--body);width:100%;height:100%;max-width:none;max-height:none;margin:0;overflow:hidden}
.fdlg[open]{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.fdlg-sheet{margin:auto}
.fdlg::backdrop{background:rgba(3,5,9,.74);opacity:0;transition:opacity 200ms ease-out}
.fdlg.is-open::backdrop{opacity:1}
.fdlg-sheet{position:relative;display:flex;flex-direction:column;width:min(35rem,calc(100vw - 2rem));max-height:calc(100vh - 3rem);max-height:calc(100dvh - 3rem);border-radius:1.5rem;border:1.5px solid rgba(150,195,255,.6);background:linear-gradient(150deg,rgba(26,38,70,.97),rgba(11,17,32,.98) 55%,rgba(20,34,72,.97));box-shadow:0 0 3rem -.5rem rgba(76,130,255,.45),0 1.5rem 4rem rgba(0,0,0,.6);opacity:0;transform:scale(.96);transition:opacity 200ms ease-out,transform 200ms ease-out;will-change:transform,opacity}
.fdlg.is-open .fdlg-sheet{opacity:1;transform:translateY(var(--dy,0)) scale(1)}
.fdlg.is-drag .fdlg-sheet{transition:none}
.fdlg-sheet::after{content:"";position:absolute;left:8%;right:8%;bottom:-2px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#86B6FF 35%,#B4D0FF 70%,transparent);box-shadow:0 0 18px 3px rgba(76,140,255,.75);pointer-events:none}
.fdlg-grip{display:none;flex:none;justify-content:center;padding:.6rem 0 0;touch-action:none}
.fdlg-grip i{display:block;width:2.75rem;height:.3rem;border-radius:1rem;background:rgba(190,215,255,.45)}
.fdlg-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem 0 1.5rem}
.fdlg-count{font-size:max(.875rem,var(--t-small));font-weight:600;color:#9AA5B8;letter-spacing:.02em}
.fdlg-nav{display:flex;gap:.4rem}
.fdlg-btn{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid rgba(190,215,255,.3);background:rgba(255,255,255,.05);color:#E4EAF5;display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .15s,border-color .15s}
.fdlg-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.55)}
.fdlg-btn .ic{width:1.2rem;height:1.2rem;stroke-width:2}
.fdlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.6rem 1.5rem 0}
.fd-h{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.fdlg[data-group="check"]{--acc:110,168,255}
.fdlg[data-group="fix"]{--acc:251,191,36}
.fdlg[data-group="know"]{--acc:74,222,128}
.fdlg[data-group="control"]{--acc:196,165,255}
.fd-ic{flex:none;width:3rem;height:3rem;border-radius:.9rem;background:rgba(var(--acc,110,168,255),.16);border:1px solid rgba(var(--acc,110,168,255),.5);color:rgb(var(--acc,110,168,255));display:grid;place-items:center}
.fd-ic .ic{width:1.6rem;height:1.6rem;stroke-width:1.75}
.fd-t{font:700 max(1.55rem,var(--t-body))/1.2 var(--head);color:var(--text);letter-spacing:-.01em}
.fd-p{margin:0 0 1.1rem;font-size:max(1.0625rem,var(--t-body));line-height:1.6;color:#C9D2DF}
.fd-mock{display:flex;flex-direction:column;gap:.7rem;padding:1.1rem 1.2rem;border-radius:1.1rem;font-size:max(1rem,var(--t-body));color:#E4EAF5;background:rgba(8,13,26,.6)}
.fd-mock p{margin:0}
.fdlg-plans{flex:none;margin:1.1rem 1.5rem 1.5rem;padding:.8rem 1rem;border-radius:.9rem;border:1px solid rgba(190,215,255,.22);background:rgba(255,255,255,.04);font-size:max(.9375rem,var(--t-body));line-height:1.5;color:#E4EAF5}
.fdlg-plans[hidden]{display:none}
.fdlg-plans b{display:block;margin-bottom:.15rem;font-size:max(.8125rem,var(--t-small));font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9AA5B8}
html.dlg-open{overflow:hidden;scrollbar-gutter:stable}
@media (max-width:767px){
  .fdlg[open]{align-items:flex-end}
  .fdlg-sheet{margin:0 auto}
  .fdlg-sheet{width:100%;max-height:85vh;max-height:85dvh;border-radius:1.5rem 1.5rem 0 0;border-bottom:0;transform:translateY(100%);padding-bottom:env(safe-area-inset-bottom)}
  .fdlg.is-open .fdlg-sheet{transform:translateY(var(--dy,0))}
  .fdlg-sheet::after{display:none}
  .fdlg-grip{display:flex}
  .fdlg-bar{padding:.3rem .8rem 0 1.1rem}
  .fdlg-body{padding:.4rem 1.1rem 0}
  .fdlg-plans{margin:.9rem 1.1rem 1.1rem}
  .fd-t{font-size:max(1.4rem,var(--t-body))}
}
@media (prefers-reduced-motion:reduce){
  .fcard,.fcard::before,.fdlg::backdrop,.fdlg-sheet{transition:none!important}
  .fdlg-sheet,.fdlg.is-open .fdlg-sheet{transform:translateY(var(--dy,0))!important}
  .fcard:hover{transform:none}
}
.pv-ic{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%}
.pv-ic .ic{width:.9rem;height:.9rem;stroke-width:3}
.is-ok>.pv-ic,.pv-res.is-ok .pv-ic{background:var(--green);color:#04130A}
.is-bad>.pv-ic,.pv-res.is-bad .pv-ic{background:var(--red);color:#fff}
.pv-bub,.pv-field,.pv-code{padding:.65rem .8rem;border-radius:.7rem;border:1px solid rgba(190,215,255,.25);background:rgba(255,255,255,.06);line-height:1.4}
.pv-mono,.pv-code{font-family:var(--mono);font-size:max(.95rem,var(--t-body))}
.pv-code.is-ok{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.12)}
.pv-code s{color:#FFB9B9}
.pv-arrow{color:#8FB6FF;align-self:flex-start;transform:rotate(90deg)}
.pv-arrow .ic{width:1.2rem;height:1.2rem}
.pv-res{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;border-radius:.7rem;flex-wrap:wrap}
.pv-res.is-bad{background:rgba(46,10,16,.85);border:1px solid rgba(239,68,68,.75);color:#FFD0D0}
.pv-res b{font-weight:700}.pv-res span:last-child{color:#CBB0B0;font-size:max(.9375rem,var(--t-body))}
.pv-why,.pv-note{color:#B8C0CC;font-size:max(.9375rem,var(--t-body))}
.pv-list{display:flex;flex-direction:column;gap:.45rem}
.pv-row{display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:.6rem;border:1px solid rgba(190,215,255,.18);background:rgba(255,255,255,.04)}
.pv-row.is-bad{border-color:rgba(239,68,68,.5)}
.pv-t{flex:1;min-width:0;overflow-wrap:anywhere}
.pv-r{font-weight:600;color:#CFE0FF}
.pv-row code,.pv-r code{font:500 max(.9rem,var(--t-body)) var(--mono);color:#CFE0FF}
.pv-btnrow{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pv-btn{display:inline-block;padding:.45rem 1.1rem;border-radius:62rem;background:#fff;color:#06080C;font-weight:600}
.pv-btn-red{background:rgba(239,68,68,.2);color:#FFB9B9;border:1px solid rgba(239,68,68,.6)}
.pv-flow{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pv-flow span,.pv-flow b{padding:.4rem .75rem;border-radius:.6rem;border:1px solid rgba(190,215,255,.25);background:rgba(255,255,255,.06)}
.pv-flow b{background:rgba(76,141,255,.25);border-color:rgba(76,141,255,.7)}
.pv-flow i{color:#8FB6FF;display:inline-flex}.pv-flow i .ic{width:1.1rem;height:1.1rem}
.pv-tags{display:flex;gap:.5rem;flex-wrap:wrap}
.pv-tag{padding:.2rem .7rem;border-radius:62rem;font-size:max(.9375rem,var(--t-body));font-weight:600}
.pv-tag.is-ok{background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.6);color:#A3F2C0}
.pv-k{padding:.55rem .8rem;border-radius:.7rem;border:1px solid rgba(190,215,255,.25);background:rgba(255,255,255,.06)}
.pv-k span{display:block;font-size:max(.875rem,var(--t-small));color:#9AA5B8}
.pv-k.is-bad{border-color:rgba(239,68,68,.5)}
.pv-packs{display:flex;gap:.6rem;flex-wrap:wrap}
.pv-packs li{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:.7rem;border:1px solid rgba(76,141,255,.6);background:rgba(76,141,255,.16);font-weight:600}
.pv-packs .ic{width:1.1rem;height:1.1rem;color:#8FB6FF}
.pv-seg{display:inline-flex;align-self:flex-start;border:1px solid var(--line2);border-radius:62rem;padding:.2rem}
.pv-seg span{padding:.35rem .9rem;border-radius:62rem;color:#C9D6EE}
.pv-seg .is-on{background:#fff;color:#06080C;font-weight:600}
.pv-use b{font:800 1.8rem/1 var(--head);color:#fff}
.pv-bar{height:.8rem;border-radius:62rem;background:rgba(255,255,255,.1);overflow:hidden}
.pv-bar i{display:block;height:100%;background:linear-gradient(90deg,#4C8DFF,#7FB0FF);border-radius:62rem}
.pv-keyrow{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;padding:.55rem .8rem;border-radius:.7rem;border:1px solid rgba(190,215,255,.25);background:rgba(255,255,255,.06)}
.pv-keyrow code{font:500 max(.95rem,var(--t-body)) var(--mono);color:#CFE0FF;overflow-wrap:anywhere}
.pv-q{display:flex;flex-direction:column;gap:.45rem;counter-reset:q}
.pv-q li{counter-increment:q;display:flex;align-items:center;gap:.7rem;padding:.5rem .7rem;border-radius:.6rem;border:1px solid rgba(190,215,255,.18);background:rgba(255,255,255,.04)}
.pv-q li::before{content:counter(q);flex:none;width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-weight:700;font-size:max(.875rem,var(--t-small))}
.pv-q li.is-done::before{background:var(--green);color:#04130A}

/* Homepage round: logo strip, safe AI address, your data, and the phone fixes for try / pricing / developers / FAQ. Loaded after the section partials. */

/* B2 logo strip: label above, logos centred */
.strip-in{flex-direction:column;align-items:center;justify-content:center;gap:.7rem;min-height:6.1rem;padding:.9rem 0}
.strip-label{margin:0;text-align:center;font-size:max(.8rem,var(--t-small))}
.logos{justify-content:center}

/* E. Safe AI address */
.addr{padding:3.75rem 0 4rem;background:var(--bg)}
.addr-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"h vis" "foot vis";column-gap:4rem;row-gap:1.6rem;align-items:center}
.addr-h{grid-area:h;align-self:end}.addr-h .sec-sub{margin-top:.75rem}
.addr-foot{grid-area:foot;align-self:start}
.addr-vis{grid-area:vis;padding:1.4rem 1.5rem;border-radius:1.3rem;display:flex;flex-direction:column;gap:.9rem;transform:perspective(70rem) rotateY(-6deg) rotateX(2deg)}
.addr-row{padding:.9rem 1rem;border-radius:.9rem;border:1px solid rgba(190,215,255,.22);background:rgba(255,255,255,.05)}
.addr-after{border-color:rgba(34,197,94,.6);background:rgba(34,197,94,.1)}
.addr-tag-l{display:block;margin-bottom:.35rem;font-size:max(.875rem,var(--t-small));font-weight:600;color:#9AA5B8;letter-spacing:.06em;text-transform:uppercase}
.addr-row p{margin:0;color:#E4EAF5;font-size:max(1rem,var(--t-body));line-height:1.5}
.addr-k{color:#9AA5B8}
.addr-row code{overflow-wrap:normal;word-break:normal;font:500 max(.95rem,var(--t-body)) var(--mono);color:#CFE0FF}
.addr-ok{display:inline-flex!important;align-items:center;gap:.4rem;margin-top:.55rem!important;padding:.15rem .7rem;border-radius:62rem;background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.6);color:#A3F2C0!important;font-weight:600;font-size:max(.9375rem,var(--t-body))!important}
.addr-ok .ic{width:1rem;height:1rem;stroke-width:3}
.addr-arrow{align-self:center;color:#8FB6FF;transform:rotate(90deg)}.addr-arrow .ic{width:1.4rem;height:1.4rem}
.addr-steps{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem}
.addr-steps li{display:flex;align-items:center;gap:.6rem;color:var(--text);font-weight:500}
.addr-n{flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:rgba(76,141,255,.22);border:1px solid rgba(76,141,255,.7);color:#CFE0FF;display:grid;place-items:center;font:700 max(.9rem,var(--t-body)) var(--head)}
.addr-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.6rem;margin-top:1.4rem}
.addr-cta .btn{height:3.25rem}
.addr-link{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--blue-l);font-weight:600;border-bottom:1px solid transparent}.addr-link:hover{color:#fff}

/* G. Your data */
.data{padding:3.5rem 0 3.5rem;background:var(--s1)}
.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem 4rem;margin-top:1.8rem}
.data-grid li{display:flex;gap:.9rem;align-items:flex-start;padding:1rem 0;border-top:1px solid var(--line2)}
.data-grid .ic{flex:none;width:1.3rem;height:1.3rem;color:var(--green-text);margin-top:.2rem}
.data-grid h3{font-size:max(1.15rem,var(--t-body));margin-bottom:.25rem}
.data-grid p{font-size:max(1rem,var(--t-body));line-height:1.5;color:var(--body)}
.data-link{margin-top:1rem}.data-link a{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--blue-l);font-weight:600}.data-link a:hover{color:#fff}

/* B3 try it live */
.pg-rules-toggle{display:none}
.bt-long{display:inline}
.pg-score-hint{display:block;color:#B9C3D4;font-size:max(.9rem,var(--t-body));margin-top:.1rem}

/* B5 pricing notes */

/* H developers */
.dev-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
.dev-docs li{display:block}
.code-card{position:relative}
.code-fade{display:none}
.dev-status{margin-top:.5rem;font-size:max(.95rem,var(--t-body));color:var(--muted)}
.dev-status a{color:var(--blue-l);font-weight:500}.dev-status a:hover{color:#fff}
.dev-r .notes-h{margin-top:0;font-size:1.3rem;margin-bottom:.4rem}
.note{border-top:1px solid var(--line2)}
.note summary{display:block;padding:.8rem 0 .2rem;font-family:var(--head);font-weight:600;color:var(--text);font-size:max(1rem,var(--t-body));line-height:1.4;list-style:none;pointer-events:none}
.note summary::-webkit-details-marker{display:none}
.note p{padding:0 0 .8rem;font-size:max(.95rem,var(--t-body));line-height:1.5;color:var(--body)}

/* B7 phone: one rhythm for every section. top/bottom 2rem; heading -> intro .6rem; intro -> content 1.1rem; left aligned; no text under 14px (legal 13px) */
@media (max-width:767px){
  .flow-in,.expl,.try-sec,.addr,.who,.price,.data,.faq,.dev{padding-top:2rem;padding-bottom:2rem}
  .strip-in{padding:.9rem 0;gap:.5rem}
  .sec-headl .sec-sub,.sec-head .sec-sub,.who-head .sec-sub,.price-head .sec-sub,.addr-h .sec-sub,.dev-l .sec-sub{margin-top:.6rem;font-size:max(1rem,var(--t-body))}
  h2{text-align:left}
  .sec-head,.who-head,.price-head{gap:.6rem}
  .flow-stage,.fgrid,.try,.who-list,.data-grid,.faq-list{margin-top:1.1rem}
  .dev-l .sec-sub{margin:.6rem 0 1.1rem}
  /* strip */
  .logos{display:grid;grid-template-columns:1fr 1fr;gap:.2rem .75rem;width:100%;justify-items:stretch}
  .logos li{justify-content:center}
  .logo,.logo-own{width:100%;min-height:2.75rem;justify-content:center}
  .logo span,.logo-own span{font-size:max(1rem,var(--t-body))}
  /* try it live */
  .pg-rules{display:none}.pg-rules.is-open{display:block}
  .pg-rules-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:2.75rem;margin:0 0 .8rem;padding:0 .9rem;font:inherit;font-size:max(1rem,var(--t-body));font-weight:600;color:#CFE0FF;background:rgba(255,255,255,.05);border:1px solid rgba(190,215,255,.25);border-radius:.7rem;cursor:pointer}
  .pg-rules-toggle::after{content:"+";font-size:max(1.2rem,var(--t-body));color:var(--blue)}
  .pg-rules-toggle[aria-expanded="true"]::after{content:"\2212"}
  .try-ex{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .try-ex-l{grid-column:1 / -1;margin:0;font-size:max(.9375rem,var(--t-body))}
  .try-ex .chip-btn{white-space:normal;text-align:center;min-height:2.75rem;padding:.4rem .6rem;font-size:max(.9375rem,var(--t-body));display:flex;align-items:center;justify-content:center}
  .try-head{padding-bottom:.8rem}
  .pg-picker{gap:.5rem}.pg-picker-l{flex:0 0 100%;margin:0;font-size:max(.9375rem,var(--t-body))}
  .pg-picker .chip-btn{min-height:2.75rem;font-size:max(.9375rem,var(--t-body))}
  .pg-label{font-size:max(.9375rem,var(--t-body))}
  .pg-textarea{min-height:4.2rem;margin-bottom:.7rem}
  .pg-actions{gap:.6rem}.pg-actions .btn{flex:1 1 0;height:3rem;padding:0 .8rem}
  .try-pane{padding:.9rem}
  .pg-verdict-box{min-height:0}.pg-empty{padding:.5rem .2rem}
  .pg-label-row .pg-link{min-height:2.75rem;font-size:max(.9375rem,var(--t-body))}
  .pg-raw summary{min-height:2.75rem;font-size:max(.9375rem,var(--t-body))}
  .try-foot{font-size:max(.9375rem,var(--t-body));padding-top:.6rem}.try-foot a{display:inline-flex;align-items:center;min-height:2.75rem}
  .bt-long{display:none}
  .pg-issues li{font-size:max(.9375rem,var(--t-body))}.pg-issues code,.pg-verdict-box .res-code{font-size:max(.875rem,var(--t-small))}
  /* who */
  .who-list li{padding:.7rem 0 .75rem}.who-list p{font-size:max(1rem,var(--t-body))}
  .who .fine{font-size:max(.875rem,var(--t-small))}
  /* pricing: one plan at a time */
  .ent{font-size:max(1rem,var(--t-body))}.ent strong{font-size:max(1.05rem,var(--t-body))}.ent .btn{height:2.75rem}
  .pnote{font-size:max(.9375rem,var(--t-body))}.pnote-link{display:inline-flex;align-items:center;min-height:2.75rem}
  /* data */
  .data-grid{grid-template-columns:1fr;gap:0}
  .data-grid li{padding:.75rem 0}
  /* faq */
  .qa summary{min-height:2.75rem;font-size:max(1.05rem,var(--t-body))}.qa-a p{font-size:max(1rem,var(--t-body))}
  /* address */
  .addr-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "vis" "foot";row-gap:1.1rem}
  .addr-vis{padding:1rem;gap:.5rem;transform:perspective(70rem) rotateY(-3deg) rotateX(1deg)}
  .addr-row{padding:.7rem .85rem}
  .addr-row code{font-size:max(.875rem,var(--t-small))}
  .addr-steps{flex-direction:column;gap:.5rem}
  .addr-cta{margin-top:1rem}.addr-cta .btn{flex:1 1 100%}
  .addr-tag-l{font-size:max(.875rem,var(--t-small))}
  /* developers */
  .dev-grid{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .code-pane pre{white-space:pre;overflow-wrap:normal;overflow-x:auto;font-size:max(.875rem,var(--t-small));line-height:1.5;padding:2.9rem 1rem .9rem;min-height:0}
  .code-fade{display:block;position:absolute;right:0;bottom:0;top:3rem;width:2.5rem;pointer-events:none;background:linear-gradient(90deg,rgba(10,14,21,0),var(--input) 92%)}
  .code-tab{min-height:2.75rem;font-size:max(.9375rem,var(--t-body))}
  .code-copy{font-size:max(.875rem,var(--t-small));min-height:2.25rem}
  .dev-docs{gap:0 1.2rem;margin-top:.7rem}
  .dev-docs a{display:inline-flex;align-items:center;min-height:2.75rem;font-size:max(.9375rem,var(--t-body))}
  .dev-status{margin-top:0;font-size:max(.9375rem,var(--t-body))}.dev-status a{display:inline-flex;align-items:center;min-height:2.75rem}
  .dev-cta{margin-top:.6rem;gap:.6rem}.dev-cta .btn{flex:1 1 100%;height:3rem}
  .dev-r .notes-h{margin-bottom:.2rem}
  .note summary{pointer-events:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:2.75rem;padding:.2rem 0;cursor:pointer;font-size:max(1rem,var(--t-body))}
  .note summary::after{content:"+";flex:none;font-size:1.25rem;color:var(--blue)}
  .note[open] summary::after{content:"\2212"}
  .note p{padding-bottom:.8rem}
  /* footer links tap size */
  .foot-col a{display:inline-flex;align-items:center;min-height:2.75rem}
  .foot-bar a{display:inline-flex;align-items:center;min-height:2.75rem}
  .foot-col ul{gap:0}
}

/* phone compaction (page target <= 11 screens at 390x844) */
@media (max-width:767px){
  .flow-in,.expl,.try-sec,.addr,.who,.price,.data,.faq,.dev{padding-top:1.5rem;padding-bottom:1.5rem}
  .ent{flex-direction:row;flex-wrap:wrap;align-items:center;padding:.7rem 1rem;gap:.5rem 1rem;margin-top:1rem}
  .data .sec-sub{display:none}
  .who-list p,.data-grid p,.qa-a p{font-size:max(.9375rem,var(--t-body));line-height:1.45}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-col ul{flex-direction:row;flex-wrap:wrap;gap:0 1.2rem}
  .foot-col li{flex:0 0 auto}
}

@media (max-width:767px){
  .flow-in,.expl,.try-sec,.addr,.who,.price,.data,.faq,.dev{padding-top:1.25rem;padding-bottom:1.25rem}
  .code-pane{position:static}
  .code-copy{top:.5rem;right:.6rem}
  .code-pane pre{padding:.8rem 1rem;font-size:max(.875rem,var(--t-small));line-height:1.4}
  .dev-docs{display:flex;flex-wrap:wrap;gap:0 1rem}
  .dev-cta{display:flex;flex-wrap:nowrap}.dev-cta .btn{flex:1 1 0;padding:0 .6rem;font-size:max(.9375rem,var(--t-body))}
  .dev-cta .btn .arrow{display:none}
  .dev-l .sec-sub{margin-bottom:.8rem}
  .try{padding:.6rem}.try-pane{padding:.75rem}
  .try-foot{gap:0 1rem}
  .try-head{padding-bottom:.6rem}
}
@media (max-width:767px){
  .addr-cta{flex-wrap:nowrap;gap:1rem}.addr-cta .btn{flex:1 1 auto;padding:0 1rem}.addr-link{flex:none}
  .addr-cta .btn .arrow{display:none}
}

/* phone: tap sizes, minimum text, tighter flow */
.strip-label{font-size:max(.875rem,var(--t-small))}
@media (max-width:767px){
  .brand{display:inline-flex;align-items:center;min-height:2.75rem}
  .btn-sm{min-height:2.75rem}
  .code-copy{min-height:2.75rem;padding:0 .8rem}
}
.expl :focus-visible,.fdlg :focus-visible,.flow :focus-visible,.ptabs :focus-visible,.data :focus-visible,.addr :focus-visible{outline:2px solid #8DB8FF;outline-offset:2px}
@media (max-width:767px){.foot-col a,.foot-bar a{min-width:2.75rem;justify-content:flex-start}}

/* phone pricing card: facts as a compact 2-column grid */
@media (max-width:767px){
  .ent{padding:.6rem .9rem}
}
@media (max-width:767px){
  .pnote-link{display:inline;padding:.8rem 0}
  .ent{flex-wrap:nowrap}.ent strong{font-size:max(.9375rem,var(--t-body));line-height:1.3;flex:1}.ent .btn{flex:none;padding:0 1rem}
}
@media (max-width:767px){
  .dev .notes{display:grid;grid-template-columns:1fr 1fr;column-gap:.8rem;align-items:start}
  .dev .note[open]{grid-column:1 / -1}
  .dev .note summary{font-size:max(.9375rem,var(--t-body));line-height:1.25;gap:.5rem;padding:.35rem 0}
  .code-pane pre{line-height:1.3;padding:.6rem 1rem}
  .dev-docs a{min-height:2.5rem}
  .dev-docs a,.dev-status a{min-height:2.75rem}
  .dev-l .sec-sub{margin-bottom:.6rem}
  .dev-r .notes-h{font-size:max(1.15rem,var(--t-body));margin-bottom:0}
}
@media (max-width:767px){
  .foot{padding:1.25rem 0 1rem}
  .foot-in{gap:.8rem}.foot-tag{margin-top:.4rem}.foot-copy{margin-top:.5rem}
  .foot-cols{grid-template-columns:1fr;gap:.2rem}
  .foot-h{margin-bottom:0}
  .foot-bar{margin-top:.8rem;padding-top:.5rem}
  .who-list li{padding:.55rem 0 .6rem}.who-head{gap:.4rem}
  .who-list h3{margin-bottom:.15rem;font-size:max(1.05rem,var(--t-body))}
  .data-grid li{padding:.55rem 0}.data-grid h3{font-size:max(1.05rem,var(--t-body))}.data-link{margin-top:.2rem}
  .qa summary{padding:.4rem 0}
}
@media (max-width:767px){
  .price-head{gap:.2rem}
  .pnote{margin-top:.4rem;line-height:1.45}.ent{margin-top:.7rem}
  .try-ex{gap:.4rem}.pg-picker{margin-bottom:.7rem}.try-foot{padding-top:.3rem}
  .cta-band{padding:1.3rem 1.2rem 1.9rem;gap:.9rem}
}
@media (max-width:767px){
}

/* Pricing cards (homepage #pricing and /pricing share this markup and this CSS; the standalone pricing-cards.v1.css is cut from here:
   every rule below whose selectors all start with .ptable/.pcol/.pprice/.prows/.pfeat/.ptab/.pbtn/.pknow/.pincl/.pslot/.btn is exported).
   Four separate glass cards with gaps (same glass + soft blue edge glow as the hero). >=1280: 4 across. 768-1279: 2x2. <768: plan tabs, one card.
   Card rows (top to bottom): name, tagline, price, hero number, button, one icon line per feature, small print. On >=768 the cards share row
   tracks (subgrid), so every row sits at the same height on every card. Only transform + opacity ever animate. */
.ptable{display:grid;grid-template-columns:repeat(var(--pcols,4),minmax(0,1fr));gap:0 1.25rem;margin-top:2.6rem;max-width:none}
.ptable[style*="--pcols:1;"]{max-width:24rem}
.ptable[style*="--pcols:2;"]{max-width:48rem}
.ptable[style*="--pcols:3;"]{max-width:72rem}
.pcol{position:relative;isolation:isolate;min-width:0;padding:2.3rem 1.4rem 1.5rem;border-radius:1.4rem;transition:transform 150ms var(--ease)}
/* the glass layer is its own element so the Pro card can be raised without moving its rows */
.pcol::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;border:1.5px solid;border-color:rgba(190,215,255,.62) rgba(130,178,255,.5) rgba(120,170,255,.55) rgba(180,210,255,.58);background:linear-gradient(150deg,rgba(96,128,196,.14),rgba(16,28,58,.2) 50%,rgba(44,78,156,.2));-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 0 2.2rem -.6rem rgba(76,130,255,.32),inset 0 1px 0 rgba(255,255,255,.1)}
.pcol::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;z-index:-1;border-radius:0 0 1.4rem 1.4rem;background:linear-gradient(90deg,rgba(91,157,255,.35),#86B6FF 35%,#B4D0FF 70%,rgba(91,157,255,.5));box-shadow:0 0 18px 3px rgba(76,140,255,.7),0 8px 36px 5px rgba(54,110,255,.4);opacity:.5;transition:opacity 150ms var(--ease);pointer-events:none}
.pcol-rec::before{top:-8px;border-color:rgba(214,232,255,.95) rgba(150,195,255,.9) rgba(140,185,255,.9) rgba(205,226,255,.95);background:linear-gradient(150deg,rgba(110,145,220,.2),rgba(20,36,76,.24) 50%,rgba(52,92,184,.28));box-shadow:0 0 3.2rem 0 rgba(76,140,255,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.pcol-rec::after{opacity:1;box-shadow:0 0 24px 5px rgba(76,140,255,.95),0 10px 48px 8px rgba(54,110,255,.65)}
.pcol-flag{position:absolute;top:-.8rem;left:50%;transform:translateX(-50%);z-index:1;padding:.2rem .85rem;border-radius:62.44rem;background:var(--blue);color:#06080C;font-size:max(.8125rem,var(--t-small));font-weight:700;line-height:1.3;letter-spacing:.01em;white-space:nowrap;box-shadow:0 0 1rem rgba(76,141,255,.55)}
.pcol-rec .pcol-flag{top:calc(-.8rem - 8px)}
.pcol-ribbon{background:#22C55E;color:#04130A;white-space:normal;text-align:center;width:max-content;max-width:calc(100% - 1.4rem);box-shadow:0 0 1rem rgba(34,197,94,.45)}
.pcol-top{display:flex;align-items:center;min-height:1.8rem}
.pcol h3{margin:0;font-size:1.4rem;line-height:1.2}
.pcol-tag{margin:.15rem 0 0;font-size:max(.9375rem,var(--t-body));line-height:1.4;color:#AEB9CB}
.pprice{margin:.9rem 0 0;display:flex;align-items:baseline;gap:.3rem}
.pprice-n{font-family:var(--head);font-weight:800;font-size:2.75rem;line-height:1;color:var(--text);letter-spacing:-.03em}
.pprice-per{color:var(--muted);font-size:max(1rem,var(--t-body))}
.pcol-hero{margin:.7rem 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem;line-height:1.2}
.pcol-hero-n{font-family:var(--head);font-weight:800;font-size:max(1.85rem,var(--t-body));line-height:1.1;color:var(--text);letter-spacing:-.02em}
.pcol-hero-was{font-size:max(.9375rem,var(--t-body));color:var(--muted);text-decoration:line-through}
.pcol-hero-u{font-size:max(1rem,var(--t-body));font-weight:600;color:#C9D6EE}
.pcol-promo{margin:.35rem 0 0;font-size:max(.875rem,var(--t-small));line-height:1.4;color:var(--green-text,#4ADE80)}
.pbtn{width:100%;height:3rem;margin:1.1rem 0 .55rem;font-size:max(1rem,var(--t-body))}
.pfeat{margin:0;padding:0;list-style:none}
.pfeat-incl li{display:flex;align-items:flex-start;gap:.75rem;padding:.7rem 0;border-top:1px solid var(--line);min-width:0}
.pfeat-ic{flex:none;width:1.35rem;height:1.35rem;margin-top:.1rem;color:#8FB6FF}
.pfeat-ic .ic{width:100%;height:100%;stroke-width:1.75}
.pfeat-tx{display:flex;flex-direction:column;min-width:0}
.pfeat-tx b{font-size:max(1rem,var(--t-body));font-weight:600;line-height:1.3;color:var(--text)}
.pfeat-tx small{font-size:max(.8125rem,var(--t-small));line-height:1.35;color:var(--muted)}
.pfeat-incl li:not(:has(small)) .pfeat-ic{margin-top:.05rem}
.pfeat-incl li.is-empty{padding:0;border-top:0}
.pfeat-own li{position:relative;padding:.55rem 0 .55rem 1.4rem;border-top:1px solid var(--line);font-size:max(.9375rem,var(--t-body));line-height:1.35;color:var(--text)}
.pfeat-own li::before{content:"";position:absolute;left:.1rem;top:1.05rem;width:.5rem;height:.28rem;border-left:.125rem solid var(--green-text,#4ADE80);border-bottom:.125rem solid var(--green-text,#4ADE80);transform:rotate(-45deg)}
.pcol-foot{padding-top:.8rem;border-top:1px solid var(--line)}
.pcol-foot:empty{padding:0;border-top:0}
.pcol-note{margin:0 0 .5rem;font-size:max(.8125rem,var(--t-small));line-height:1.4;opacity:.85}
.pcol-renew{margin:0 0 .35rem;font-size:max(.8125rem,var(--t-small));line-height:1.4;opacity:.8}
.pcol-refund{margin:0}
.pcol-refund a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.ptabs{display:none}
/* under the cards */
.pincl{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.8rem;margin:1.9rem 0 0;padding:0;list-style:none;font-size:max(.98rem,var(--t-body));color:var(--body)}
.pincl .pincl-l{color:var(--muted)}
.pincl li:not(.pincl-l){display:flex;align-items:center;gap:.5rem}
.pincl .ic{width:1.15rem;height:1.15rem;color:var(--green-text);flex:none}
.pincl-rate{margin:.7rem 0 0;font-size:max(.9375rem,var(--t-body));line-height:1.5;color:var(--muted)}
.pknow{margin-top:.7rem;max-width:60rem;font-size:max(.9375rem,var(--t-body));line-height:1.45;color:var(--muted)}

/* >=768: shared row tracks, so every row sits at the same height on every card (empty placeholders hold the track) */
@media (min-width:768px){
  .ptable.is-aligned{align-items:stretch;row-gap:2rem}
  .ptable.is-aligned .pcol{display:grid;grid-row:span var(--prows,12);grid-template-rows:subgrid;row-gap:0}
  .ptable.is-aligned .pcol>*{min-width:0}
  .ptable.is-aligned .pfeat-incl{display:contents}
  .ptable.is-aligned .pfeat-own{margin:0}
  .ptable.is-aligned .pbtn{align-self:start}
  .ptable.is-aligned .pcol-foot{align-self:end}
}
/* 768-1279: 2 x 2 */
@media (min-width:768px) and (max-width:1279px){
  .ptable{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptable.is-aligned{row-gap:2.6rem}
}
@media (min-width:1280px){.ptable.is-aligned{row-gap:0}}
/* hover (desktop only): lift 4px, glow brightens, 150ms */
@media (hover:hover) and (min-width:768px){
  .pcol:hover{transform:translateY(-4px)}
  .pcol:hover::after{opacity:1}
}
/* phone: one plan at a time (tabs) */
@media (max-width:767px){
  .ptable{grid-template-columns:minmax(0,1fr);max-width:none;margin-top:1.1rem}
  .ptabs{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:1.1rem}
  .ptab{min-height:2.75rem;padding:0 .3rem;font:600 max(1rem,var(--t-body)) var(--head);color:#C9D6EE;background:transparent;border:1px solid var(--line2);border-radius:.7rem;cursor:pointer}
  .ptab.is-on{background:#fff;color:#06080C;border-color:#fff}
  .ptabs+.ptable{margin-top:1.5rem}
  .ptable .pcol{margin-bottom:1.6rem;padding:1.5rem 1.15rem 1.2rem}
  .ptable.is-tabbed .pcol{display:none;margin-bottom:0}
  .ptable.is-tabbed .pcol.is-on{display:block}
  .pcol-flag{font-size:max(.875rem,var(--t-small))}
  .pcol-rec::before{top:0}
  .pcol-rec .pcol-flag{top:-.8rem}
  .pcol-tag{font-size:max(.9375rem,var(--t-body))}
  .pprice{margin-top:.6rem}
  .pcol-hero{margin-top:.5rem}
  .pbtn{height:2.75rem;margin:.9rem 0 .4rem}
  .pslot{display:none}
  .pfeat-incl li.is-empty{display:none}
  .pfeat-incl li{padding:.55rem 0}
  .pfeat-tx small{font-size:max(.875rem,var(--t-small))}
  .pcol-promo{font-size:max(.9375rem,var(--t-body))}
  .pcol-foot{padding-top:.5rem}
  .pcol-refund{margin:0}
  /* "Every plan includes": the label, then the items in two tidy left-aligned columns */
  .pincl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:.4rem 1rem;margin-top:1.1rem;font-size:max(.9375rem,var(--t-body))}
  .pincl .pincl-l{grid-column:1 / -1}
  .pincl li:not(.pincl-l){align-items:flex-start}
  .pincl .ic{margin-top:.2rem;width:1rem;height:1rem}
  .pincl-rate{font-size:max(.9375rem,var(--t-body))}
  .pknow{margin-top:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .pcol,.pcol::after{transition:none!important}
  .pcol:hover{transform:none}
}