/* Ordis AI v2: design system. Layers: reset, base, layout, components, utilities.
   Consumes tokens.css only. Scroll/entrance looks, .odo, .wave and the live pulse live in motion.css. */

/* ---------- reset ---------- */
/* Animatable glow strength for the footer wordmark (see .site-footer__word). */
@property --glow{syntax:'<number>';inherits:false;initial-value:0}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{min-block-size:100svh}
  img,picture,video,canvas,svg{display:block;max-inline-size:100%}
  img,video{block-size:auto}
  input,button,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
  button{padding:0;border:0;background:none;cursor:pointer}
  ul[role="list"],ol[role="list"]{padding:0;list-style:none}
  fieldset{min-inline-size:0;padding:0;border:0}
  legend{padding:0}
  table{border-collapse:collapse;border-spacing:0}
  summary{cursor:pointer}
  textarea{resize:vertical}
}

/* ---------- base ---------- */
@layer base{
  html{background:var(--bg-0);color:var(--ink)}
  @media (prefers-reduced-motion:no-preference){html.no-js{scroll-behavior:smooth}}
  html.is-menu-open{overflow:hidden}
  body{
    background:var(--bg-0);color:var(--ink);
    font-family:var(--font-sans);font-size:var(--fs-body);font-weight:400;line-height:1.6;
    font-synthesis:none;font-kerning:normal;
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  }
  /* Film grain: one static noise tile, above content but under the menu (40) and header (50). */
  body::after{
    content:"";position:fixed;inset:0;z-index:30;pointer-events:none;opacity:var(--grain);
    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='.85' 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 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;
  }
  ::selection{background:var(--accent);color:var(--accent-ink)}
  :focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  :focus:not(:focus-visible){outline:none}
  /* One offset for hash jumps, focus scrolling and scrollIntoView, so nothing lands under the fixed header. */
  html{scroll-padding-top:calc(var(--header-h) + 24px)}
  [hidden]{display:none !important}
  /* Paper sections: re-resolve surface and ink from the light tokens. */
  [data-theme="light"]{background:var(--bg-0);color:var(--ink)}

  h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.2;text-wrap:balance}
  p,li,dd,figcaption,blockquote{text-wrap:pretty}
  strong,b{font-weight:600}
  small{font-size:var(--fs-small)}
  code,kbd,samp,pre{font-family:var(--font-mono);font-size:.875em}
  pre{white-space:pre-wrap;overflow-wrap:anywhere}
  hr{block-size:0;border:0;border-top:1px solid var(--line-2)}
  sup,sub{font-size:.7em;line-height:0}

  a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--line-3);text-underline-offset:.22em;transition:text-decoration-color var(--d-xs) var(--ease-ui),color var(--d-xs) var(--ease-ui)}
  @media (hover:hover) and (pointer:fine){a:hover{text-decoration-color:currentColor}}

  /* Icons (spec 5.10): stroke drawn from CSS, 1em by default. */
  .ico{display:inline-block;flex:none;inline-size:1em;block-size:1em;vertical-align:-.125em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  .ico path,.ico circle,.ico rect,.ico line,.ico polyline{vector-effect:non-scaling-stroke}
}

/* ---------- layout ---------- */
@layer layout{
  .shell{inline-size:100%;max-inline-size:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

  /* Blueprint edge rules at the shell edges, from 768px. */
  main.rules{position:relative;display:block}
  @media (min-width:768px){
    main.rules::before{content:"";position:absolute;inset-block:0;z-index:0;pointer-events:none;
      inset-inline:max(calc(var(--gutter) * .5),calc((100% - var(--max)) / 2 - var(--gutter) * .5));
      border-inline:1px solid var(--line-1)}
  }

  .section,.cta-band{--py:var(--py-s);padding-block:var(--py)}
  .section--l,.cta-band{--py:var(--py-l)}
  .section--raised{background:var(--bg-1)}
  /* Section seams: the padding moves into the shell so the hairline spans the shell, not the viewport. */
  :is(.section,.page-hero,.cta-band,.hero) + :is(.section,.cta-band){padding-top:0}
  :is(.section,.page-hero,.cta-band,.hero) + :is(.section,.cta-band) > .shell:first-child{padding-top:var(--py);border-top:1px solid var(--line-1)}
  .section--raised + .section:not(.section--raised) > .shell:first-child,
  .section:not(.section--raised) + .section--raised > .shell:first-child{border-top-color:var(--line-2)}

  .page-hero{padding-top:calc(var(--header-h) + var(--py-s));padding-bottom:var(--py-s)}
  .page-hero > .shell,.page-hero--split > .shell > :first-child{display:grid;align-content:start;gap:clamp(20px,2.2vw,28px)}
  .page-hero .display{margin-top:4px}
  .page-hero .cluster{margin-top:8px}
  @media (min-width:960px){
    .page-hero--split > .shell{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(32px,5vw,80px)}
  }

  /* align-content:start: when a grid parent stretches the head (a .split column beside a taller list), the extra
     height must not be shared out between its rows, which pushed the eyebrow ~120px away from the title. */
  .sec-head{display:grid;align-content:start;gap:16px;max-inline-size:60rem;margin-bottom:clamp(40px,5vw,64px)}
  .sec-head > .lede{margin-top:4px}
  .split > .sec-head{margin-bottom:0} /* the .split gap already spaces it from the next column */
  .sec-head--center{justify-items:center;margin-inline:auto;text-align:center}
  .sec-head--center .lede{margin-inline:auto}
  @media (min-width:960px){
    .sec-head--split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(32px,5vw,80px);max-inline-size:none;align-items:end}
    .sec-head--split > :not(.lede){grid-column:1}
    .sec-head--split > .lede{grid-column:2;grid-row:1 / span 3;align-self:end;margin-top:0}
  }

  .split{display:grid;gap:clamp(32px,5vw,80px);grid-template-columns:minmax(0,1fr)}
  @media (min-width:960px){
    .split{grid-template-columns:repeat(2,minmax(0,1fr))}
    .split--wide-left{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
    .split--wide-right{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  }
  .stack{display:flex;flex-direction:column;gap:var(--stack-gap,24px)}
  .cluster{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
  ul.cluster,ol.cluster{padding:0;list-style:none}

  /* Registration marks: a 10px L at each corner. */
  .reg{position:relative}
  .reg::after{content:"";position:absolute;inset:-6px;pointer-events:none;z-index:1;--m:var(--ink-3);
    background:
      linear-gradient(var(--m),var(--m)) top left/10px 1px,linear-gradient(var(--m),var(--m)) top left/1px 10px,
      linear-gradient(var(--m),var(--m)) top right/10px 1px,linear-gradient(var(--m),var(--m)) top right/1px 10px,
      linear-gradient(var(--m),var(--m)) bottom left/10px 1px,linear-gradient(var(--m),var(--m)) bottom left/1px 10px,
      linear-gradient(var(--m),var(--m)) bottom right/10px 1px,linear-gradient(var(--m),var(--m)) bottom right/1px 10px;
    background-repeat:no-repeat}
}

/* ---------- components ---------- */
@layer components{

  /* Type */
  .display{font-size:var(--fs-display);font-weight:300;line-height:.92;letter-spacing:-.045em;text-wrap:balance}
  .h2{font-size:var(--fs-h2);font-weight:300;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
  .h3{font-size:var(--fs-h3);font-weight:400;line-height:1.3;letter-spacing:-.01em}
  .eyebrow{display:inline-flex;align-items:center;gap:.7em;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .eyebrow::before{content:"";flex:none;inline-size:.55em;block-size:.55em;background:var(--accent)}
  .lede{max-inline-size:66ch;font-size:clamp(1.0625rem,.99rem + .3vw,1.25rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  .mono{font-family:var(--font-mono)}
  .small{font-size:var(--fs-small)}
  .muted{color:var(--ink-2)}
  .accent{color:var(--accent-text)}
  .mk{display:inline-block;inline-size:.5em;block-size:.1em;margin-inline-end:.25em;vertical-align:.32em;background:var(--accent)}

  /* Buttons */
  .btn{
    position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    min-block-size:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-1);
    font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
    -webkit-user-select:none;user-select:none;cursor:pointer;
    transition:background-color var(--d-xs) var(--ease-ui),border-color var(--d-xs) var(--ease-ui),color var(--d-xs) var(--ease-ui);
  }
  .btn .ico{inline-size:14px;block-size:14px}
  .btn--primary{background:var(--accent);color:var(--accent-ink)}
  .btn--primary:active{background:var(--accent-press)}
  .btn--ghost{border-color:var(--line-3);color:var(--ink)}
  .btn--ghost:active{background:var(--bg-2)}
  .btn--sm{min-block-size:40px;padding:0 16px}
  .btn--lg{min-block-size:56px;padding:0 28px}
  .btn--block{display:flex;inline-size:100%}
  .btn:focus-visible{outline-offset:3px}
  @media (hover:hover) and (pointer:fine){
    .btn--primary:hover{background:var(--accent-hover)}
    .btn--primary:active{background:var(--accent-press)}
    .btn--ghost:hover{border-color:var(--ink-3);background:var(--bg-2)}
  }
  /* Arrow spring: hover (fine pointers) and keyboard focus. */
  .arr{transition:transform var(--d-xs) var(--ease-spring)}
  :is(.btn,.link-arrow,.card,.site-footer__top-link):focus-visible .arr{transform:translateX(4px)}
  :is(.btn,.link-arrow,.site-footer__top-link):focus-visible .arr--up{transform:translateY(-4px)}
  .card:has(.card__link:focus-visible) .arr{transform:translateX(4px)}
  @media (hover:hover) and (pointer:fine){
    :is(.btn,.link-arrow,.card,.site-footer__top-link):hover .arr{transform:translateX(4px)}
    :is(.btn,.link-arrow,.site-footer__top-link):hover .arr--up{transform:translateY(-4px)}
  }

  .link-arrow{display:inline-flex;align-items:center;gap:.45em;min-block-size:24px;color:var(--ink);font-weight:500;text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em}
  .link-arrow .ico{inline-size:.9em;block-size:.9em}
  @media (hover:hover) and (pointer:fine){.link-arrow:hover{text-decoration-color:currentColor}}

  /* Ruled grids: hairlines drawn by the cells, so a short last row stays clean. */
  :is(.cells,.stats,.cards,.features,.steps,.plans,.logo-grid){
    --cols:3;display:grid;grid-template-columns:minmax(0,1fr);
    padding:0;list-style:none;border-top:1px solid var(--line-2);border-left:1px solid var(--line-2)}
  :is(.cells,.stats,.cards,.features,.steps,.plans,.logo-grid) > *{min-inline-size:0;background:var(--bg-0);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
  .section--raised :is(.cells,.stats,.cards,.features,.steps,.plans,.logo-grid) > *{background:var(--bg-1)}
  :is(.cells,.stats,.features,.steps,.plans):has(> :last-child:nth-child(2)){--cols:2}
  :is(.cells,.stats,.features,.steps,.plans):has(> :last-child:nth-child(4)),
  :is(.cells,.stats,.features,.steps,.plans):has(> :last-child:nth-child(8)){--cols:4}
  .cards--2{--cols:2}.cards--3{--cols:3}.cards--4{--cols:4}
  /* Two-up range: a lone third card takes the full row instead of leaving an empty ruled slot. */
  @media (min-width:640px) and (max-width:959.98px){.cards--3 > :last-child:nth-child(odd){grid-column:1/-1}}
  @media (min-width:640px){:is(.cells,.stats,.cards,.features,.steps,.plans){grid-template-columns:repeat(2,minmax(0,1fr))}}
  @media (min-width:960px){:is(.cells,.stats,.cards,.features,.steps,.plans){grid-template-columns:repeat(var(--cols),minmax(0,1fr))}}

  .cell{display:grid;align-content:start;gap:10px;padding:clamp(16px,2vw,24px)}
  .cell dt{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .cell dd{display:flex;align-items:center;gap:12px;font-size:clamp(1.5rem,1rem + 2.2vw,3rem);font-weight:300;line-height:1.05;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
  .cell dd.sub{display:block;font-size:var(--fs-small);font-weight:400;line-height:1.5;letter-spacing:0;color:var(--ink-2)}

  .stat{display:flex;flex-direction:column;gap:8px;padding:clamp(20px,2.4vw,32px);container-type:inline-size}
  .stat__value{order:-1;margin-bottom:8px;font-size:clamp(2.5rem,1.9rem + 2.8vw,4.5rem);font-size:min(clamp(2.5rem,1.9rem + 2.8vw,4.5rem),24cqi);font-weight:300;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
  .stat__label{font-size:var(--fs-body);font-weight:500;line-height:1.35;color:var(--ink)}
  .stat__note{font-size:var(--fs-small);color:var(--ink-2)}

  .card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.6vw,32px);transition:background-color var(--d-sm) var(--ease-ui)}
  .card__eyebrow{margin-bottom:4px}
  .card__title{color:var(--ink)}
  .card__body{color:var(--ink-2);font-size:var(--fs-small);line-height:1.6;max-inline-size:52ch}
  .card__link{color:inherit;text-decoration:none}
  .card__link::after{content:"";position:absolute;inset:0;z-index:1}
  .card__link:focus-visible{outline:none}
  .card:has(.card__link:focus-visible){outline:2px solid var(--focus);outline-offset:-2px;z-index:2}
  .card__cta{margin-top:auto;padding-top:16px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.08em;text-transform:uppercase}
  @media (hover:hover) and (pointer:fine){
    .card:has(.card__link):hover{background:var(--bg-2)}
    .card:has(.card__link):hover .card__cta{text-decoration-color:currentColor}
  }

  .feature{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.6vw,32px)}
  .feature__icon{display:grid;place-items:center;inline-size:44px;block-size:44px;margin-bottom:12px;border:1px solid var(--line-2);border-radius:var(--r-1);color:var(--ink)}
  .feature__icon .ico{inline-size:22px;block-size:22px}
  .feature__body{font-size:var(--fs-small);color:var(--ink-2);max-inline-size:52ch}

  .step{display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.6vw,32px)}
  .step__n{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;color:var(--accent-text);font-variant-numeric:tabular-nums}
  .step__n::after{content:"";flex:1;block-size:1px;background:var(--line-2)}
  .step__body{font-size:var(--fs-small);color:var(--ink-2);max-inline-size:52ch}

  /* Pricing */
  .seg{min-inline-size:0;margin:0;padding:0;border:0}
  .seg__track{position:relative;display:grid;grid-template-columns:1fr 1fr;inline-size:min(100%,420px);padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-1)}
  .seg__opt{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:8px;min-block-size:40px;padding:0 12px;border-radius:999px;cursor:pointer;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;transition:color var(--d-sm) var(--ease-ui)}
  .seg__opt input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;appearance:none}
  .seg__opt:has(input:checked){color:var(--accent-ink)}
  .seg__opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
  @media (hover:hover) and (pointer:fine){.seg__opt:not(:has(input:checked)):hover{color:var(--ink)}}
  .seg__thumb{position:absolute;z-index:0;inset-block:4px;inset-inline-start:4px;inline-size:calc(50% - 4px);border-radius:999px;background:var(--accent);transition:transform var(--d-md) var(--ease-inout)}
  .seg__track:has(input[value="annual"]:checked) .seg__thumb{transform:translateX(100%)}
  .seg__save{padding:2px 6px;border-radius:var(--r-1);background:var(--bg-3);color:var(--ink);letter-spacing:.04em;transition:background-color var(--d-sm) var(--ease-ui),color var(--d-sm) var(--ease-ui)}
  .seg__opt:has(input:checked) .seg__save{background:var(--accent-ink);color:var(--accent)}

  .plans{--cols:4}
  .plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(24px,2.4vw,32px);container-type:inline-size}
  .plan--featured{box-shadow:inset 0 2px 0 var(--accent)}
  .section .plans > .plan--featured,.plans > .plan--featured{background:var(--bg-1)}
  .section--raised .plans > .plan--featured{background:var(--bg-2)}
  .plan__badge{position:absolute;top:clamp(20px,2.2vw,28px);right:clamp(20px,2.2vw,28px);padding:3px 8px;border-radius:var(--r-1);background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
  .plan__name{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .plan__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:clamp(2.5rem,2rem + 2vw,3.75rem);font-size:min(clamp(2.5rem,2rem + 2vw,3.75rem),22cqi);font-weight:300;line-height:1.1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
  .plan__per{font-size:var(--fs-body);letter-spacing:0;color:var(--ink-3)}
  .plan__billed{min-block-size:1.6em;font-size:var(--fs-small);color:var(--ink-2)}
  .plan__desc{font-size:var(--fs-small);color:var(--ink-2)}
  .plan__list{display:grid;gap:10px;margin-block:12px 20px;padding:16px 0 0;border-top:1px solid var(--line-1);list-style:none;font-size:var(--fs-small)}
  .plan__list li{display:flex;align-items:flex-start;gap:10px}
  .plan__list .ico{margin-top:.25em;color:var(--ink-2)}
  .plan--featured .plan__list .ico{color:var(--accent-text)}
  .plan__cta{margin-top:auto}

  /* Table */
  .table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line-2);overscroll-behavior-x:contain}
  .table-wrap:focus-visible{outline-offset:2px}
  .table{inline-size:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-small);font-variant-numeric:tabular-nums}
  .table th,.table td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-1);background:var(--bg-0)}
  .section--raised .table :is(th,td){background:var(--bg-1)}
  .table tbody tr:last-child > *{border-bottom:0}
  .table thead th{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;border-bottom-color:var(--line-2)}
  .table tbody th{font-weight:500;color:var(--ink)}
  .table td{color:var(--ink-2);min-inline-size:8rem}
  .table td .ico{inline-size:16px;block-size:16px}
  .table .is-ours{background:var(--bg-2);color:var(--ink)}
  .table thead .is-ours{color:var(--ink);box-shadow:inset 0 2px 0 var(--accent)}
  .table td.is-ours .ico{color:var(--accent-text)}
  .table--sticky-col :is(th,td):first-child{position:sticky;left:0;z-index:1;box-shadow:inset -1px 0 0 var(--line-2)}
  @media (max-width:639px){.table th,.table td{padding:12px}}

  /* Accordion: CSS only; smooth where ::details-content and interpolate-size exist. */
  .accs{border-top:1px solid var(--line-2)}
  .acc{border-bottom:1px solid var(--line-2);interpolate-size:allow-keywords}
  .acc__q{display:flex;align-items:center;justify-content:space-between;gap:24px;min-block-size:56px;padding:18px 0;list-style:none;cursor:pointer;font-size:var(--fs-h3);font-weight:400;line-height:1.35;letter-spacing:-.01em;transition:color var(--d-xs) var(--ease-ui)}
  .acc__q::-webkit-details-marker{display:none}
  .acc__q::marker{content:""}
  .acc__q:focus-visible{outline-offset:4px}
  .acc__icon{flex:none;inline-size:18px;block-size:18px;color:var(--ink-2);transition:transform var(--d-sm) var(--ease-ui),color var(--d-xs) var(--ease-ui)}
  .acc__icon path{transition:d var(--d-sm) var(--ease-ui)}
  .acc[open] .acc__icon{transform:rotate(180deg);color:var(--accent-text)}
  .acc[open] .acc__icon path{d:path("M8 8v0M3 8h10")}
  @supports not (d:path("M0 0")){.acc[open] .acc__icon{transform:rotate(45deg)}}
  .acc__a{padding:0 0 24px;max-inline-size:68ch;color:var(--ink-2)}
  .acc__a > * + *{margin-top:12px}
  .acc::details-content{block-size:0;overflow:clip;transition:block-size var(--d-sm) var(--ease-ui),content-visibility var(--d-sm) var(--ease-ui) allow-discrete}
  .acc[open]::details-content{block-size:auto}
  @media (hover:hover) and (pointer:fine){.acc__q:hover .acc__icon{color:var(--ink)}}

  /* Terminal */
  .terminal{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-1);font-family:var(--font-mono);font-size:var(--fs-small)}
  .terminal__bar{display:flex;align-items:center;gap:16px;min-block-size:40px;padding:0 16px;border-bottom:1px solid var(--line-1)}
  .terminal__dots{flex:none;inline-size:8px;block-size:8px;margin-inline-end:28px;border-radius:50%;background:var(--ink-4);box-shadow:14px 0 0 var(--ink-4),28px 0 0 var(--ink-4)}
  .terminal__title{font-size:var(--fs-eyebrow);letter-spacing:.04em;color:var(--ink-3)}
  .terminal__body{padding:clamp(16px,2vw,24px)}
  .terminal__code{display:block;font-size:inherit;line-height:1.75;color:var(--ink-2)}
  .terminal__line{display:block;min-block-size:1.75em;white-space:pre-wrap;overflow-wrap:anywhere}
  .t-c,.t-dim{color:var(--ink-3)}
  .t-k{color:var(--ink)}
  .t-s{color:var(--accent-text)}
  .t-ok{color:var(--success)}
  [data-theme="light"] .t-ok{color:#1E7A4D}

  /* Panel (product UI mock surface) */
  .panel{position:relative;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-1)}
  .section--raised .panel{background:var(--bg-0)}
  .panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:48px;padding:10px 16px;border-bottom:1px solid var(--line-1)}
  .panel__title{font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
  .panel__body{padding:16px}

  /* Small parts */
  .chip{display:inline-flex;align-items:center;gap:8px;min-block-size:32px;padding:0 12px;border:1px solid var(--line-2);border-radius:var(--r-1);background:transparent;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;text-decoration:none;transition:border-color var(--d-xs) var(--ease-ui),color var(--d-xs) var(--ease-ui),background-color var(--d-xs) var(--ease-ui)}
  button.chip{cursor:pointer}
  .chip[aria-pressed="true"]{border-color:var(--accent-text);color:var(--accent-text)}
  @media (hover:hover) and (pointer:fine){
    button.chip:hover,a.chip:hover{border-color:var(--line-3);color:var(--ink);background:var(--bg-2)}
    .chip[aria-pressed="true"]:hover{border-color:var(--accent-text);color:var(--accent-text)}
  }
  .pill{display:inline-flex;align-items:center;gap:8px;min-block-size:26px;padding:0 10px;border:1px solid var(--line-2);border-radius:999px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
  .pill::before{content:"";flex:none;inline-size:6px;block-size:6px;border-radius:50%;background:var(--pill-c,var(--ink-3))}
  .pill:has(> .dot)::before{display:none}
  .pill--ok{--pill-c:var(--success)}
  .pill--warn{--pill-c:var(--warning)}
  .pill--danger{--pill-c:var(--danger)}
  .pill--info{--pill-c:var(--info)}
  .tag{display:inline-flex;align-items:center;min-block-size:20px;padding:0 6px;border:1px solid var(--line-2);border-radius:var(--r-1);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
  .dot{display:inline-block;flex:none;inline-size:8px;block-size:8px;border-radius:50%;background:var(--ink-3)}
  .dot--ok,.dot--live{background:var(--success)}
  .dot--warn{background:var(--warning)}
  .dot--danger{background:var(--danger)}
  .dot--info{background:var(--info)}
  .bar{position:relative;block-size:4px;overflow:hidden;border-radius:999px;background:var(--line-2)}
  .bar__fill{display:block;block-size:100%;inline-size:calc(var(--v,0) * 1%);border-radius:inherit;background:var(--accent)}

  /* Logos and media */
  .logo-grid{--cols:4}
  .logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logo-grid > li{display:grid;place-items:center;min-block-size:clamp(88px,9vw,120px);padding:20px}
  @media (min-width:640px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
  @media (min-width:960px){
    .logo-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
    .logo-grid:has(> :last-child:nth-child(8)){--cols:8}
    .logo-grid:has(> :last-child:nth-child(6)){--cols:6}
  }
  .logo{display:inline-block;flex:none;inline-size:var(--logo-size,28px);block-size:var(--logo-size,28px);background:currentColor;color:var(--ink-2);
    -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;transition:color var(--d-xs) var(--ease-ui)}
  @media (hover:hover) and (pointer:fine){.logo-grid > li:hover .logo,.logo:hover{color:var(--ink)}}
  .logo-img{display:inline-block;flex:none;vertical-align:middle}
  /* Brand colours: the SVG paints itself instead of masking currentColor. */
  .logo--color{background:var(--logo) center/contain no-repeat;-webkit-mask:none;mask:none}
  .media{display:grid;gap:12px}
  .media__img{inline-size:100%;block-size:auto;background:var(--bg-1)}
  .media__cap{font-size:var(--fs-small);color:var(--ink-3)}

  /* CTA band */
  .cta-band > .shell{display:grid;justify-items:start;gap:clamp(20px,2.2vw,28px)}
  .cta-band__title{max-inline-size:14ch}
  .cta-band .cluster{margin-top:12px}

  /* Toast (created by app.js) */
  .toast{position:fixed;z-index:60;inset-inline:0;bottom:24px;inline-size:max-content;max-inline-size:calc(100% - 32px);margin-inline:auto;padding:12px 16px;border:1px solid var(--line-3);border-radius:var(--r-2);background:var(--bg-3);color:var(--ink);font-family:var(--font-mono);font-size:var(--fs-eyebrow);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-out)}
  .toast:empty{padding:0;border:0}
  .toast.is-visible{opacity:1;transform:none}

  /* ---------- header ---------- */
  .site-header{
    position:fixed;inset-block-start:0;inset-inline:0;z-index:50;block-size:var(--header-h);
    border-bottom:1px solid transparent;background:transparent;
    transition:background-color var(--d-sm) var(--ease-ui),border-color var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-ui),-webkit-backdrop-filter var(--d-sm) var(--ease-ui),backdrop-filter var(--d-sm) var(--ease-ui);
  }
  .site-header.is-scrolled,html.no-js .site-header,html.is-menu-open .site-header{
    border-bottom-color:var(--line-1);background:var(--glass);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  }
  @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    .site-header.is-scrolled,html.no-js .site-header{background:var(--bg-1)}
  }
  html.is-menu-open .site-header{background:var(--bg-0)}
  .site-header.is-hidden{transform:translateY(-100%)}
  .site-header.is-hidden:focus-within,html.is-menu-open .site-header.is-hidden{transform:none}
  .site-header__inner{display:flex;align-items:center;gap:16px;block-size:100%}
  @media (min-width:960px){.site-header__inner{display:grid;grid-template-columns:1fr auto 1fr}}

  .brand{display:inline-flex;align-items:center;gap:10px;min-block-size:40px;color:var(--ink);text-decoration:none;justify-self:start}
  .brand__mark{flex:none;inline-size:24px;block-size:24px;background:currentColor;
    -webkit-mask:url("/assets/img/brand/mark-128.png") center/contain no-repeat;mask:url("/assets/img/brand/mark-128.png") center/contain no-repeat;
    transition:background-color var(--d-sm) var(--ease-ui)}
  .brand__word{font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
  @media (hover:hover) and (pointer:fine){.brand:hover .brand__mark{background:var(--accent)}}

  .site-nav{display:none}
  .site-nav__list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
  .site-nav__item{position:relative;display:flex;align-items:center}
  .site-nav__link{position:relative;display:inline-flex;align-items:center;min-block-size:40px;padding:0 12px;border-radius:var(--r-1);font-size:var(--fs-small);font-weight:450;color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color var(--d-xs) var(--ease-ui)}
  .site-nav__link::after{content:"";position:absolute;left:50%;bottom:5px;inline-size:4px;block-size:4px;margin-left:-2px;background:var(--accent);opacity:0;transform:scale(0);transition:opacity var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-out)}
  .site-nav__link[aria-current="page"],.site-nav__item--has-sub:has([aria-current="page"]) > .site-nav__link{color:var(--ink)}
  .site-nav__link[aria-current="page"]::after,.site-nav__item--has-sub:has([aria-current="page"]) > .site-nav__link::after{opacity:1;transform:none}
  .site-nav__item--has-sub > .site-nav__link{padding-inline-end:4px}
  .site-nav__toggle{display:inline-grid;place-items:center;inline-size:28px;block-size:40px;border-radius:var(--r-1);color:var(--ink-3);transition:color var(--d-xs) var(--ease-ui)}
  .site-nav__toggle .chev{inline-size:12px;block-size:12px;transition:transform var(--d-sm) var(--ease-ui)}
  .site-nav__toggle[aria-expanded="true"]{color:var(--ink)}
  .site-nav__toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  @media (hover:hover) and (pointer:fine){.site-nav__link:hover,.site-nav__toggle:hover{color:var(--ink)}}

  /* Solutions sub-menu: closed = invisible and unfocusable; opens on hover/focus without JS, on aria-expanded with JS. */
  .site-nav__sub{
    position:absolute;top:calc(100% + 8px);left:-8px;z-index:2;display:grid;gap:2px;inline-size:340px;margin:0;padding:8px;list-style:none;
    border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--bg-1);
    box-shadow:0 16px 40px -12px rgba(0,0,0,.55);
    visibility:hidden;opacity:0;transform:translateY(-6px);
    transition:opacity var(--d-xs) var(--ease-in),transform var(--d-xs) var(--ease-in),visibility 0s linear var(--d-xs);
  }
  [data-theme="light"] .site-nav__sub{box-shadow:0 16px 40px -16px rgba(20,18,15,.28)}
  .site-nav__sub::before{content:"";position:absolute;inset-inline:0;bottom:100%;block-size:10px}
  html.no-js .site-nav__item--has-sub:is(:hover,:focus-within) > .site-nav__sub,
  html:not(.no-js) .site-nav__toggle[aria-expanded="true"] + .site-nav__sub{
    visibility:visible;opacity:1;transform:none;
    transition:opacity var(--d-sm) var(--ease-out),transform var(--d-sm) var(--ease-out),visibility 0s;
  }
  html.no-js .site-nav__item--has-sub:is(:hover,:focus-within) .chev{transform:rotate(180deg)}
  .site-nav__sublink{display:grid;gap:2px;padding:10px 12px;border-radius:var(--r-1);text-decoration:none;transition:background-color var(--d-xs) var(--ease-ui)}
  .site-nav__subname{font-size:var(--fs-small);font-weight:500;color:var(--ink)}
  .site-nav__subdesc{font-size:.8125rem;line-height:1.45;color:var(--ink-3)}
  .site-nav__sublink[aria-current="page"]{background:var(--bg-2)}
  .site-nav__sublink[aria-current="page"] .site-nav__subname::after{content:"";display:inline-block;inline-size:4px;block-size:4px;margin-inline-start:8px;vertical-align:.2em;background:var(--accent)}
  @media (hover:hover) and (pointer:fine){.site-nav__sublink:hover{background:var(--bg-2)}}
  .site-nav__sublink:focus-visible{outline-offset:-2px}

  .site-header__actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto;justify-self:end}

  .menu-toggle{position:relative;display:inline-grid;place-items:center;inline-size:44px;block-size:44px;margin-inline-end:-10px;border-radius:var(--r-1);color:var(--ink)}
  .menu-toggle__bars,.menu-toggle__bars::before,.menu-toggle__bars::after{display:block;inline-size:18px;block-size:1.5px;background:currentColor;border-radius:1px}
  .menu-toggle__bars{position:relative;background:transparent}
  .menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0;transition:transform var(--d-sm) var(--ease-ui)}
  .menu-toggle__bars::before{transform:translateY(-3.5px)}
  .menu-toggle__bars::after{transform:translateY(3.5px)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:rotate(-45deg)}

  @media (min-width:960px){
    .site-nav{display:block}
    .menu-toggle{display:none}
  }
  @media (max-width:479px){.site-header__actions .btn--sm{padding:0 12px}}
  /* 320px (WCAG reflow width): without the arrow, brand + CTA + menu button fit inside the gutters. */
  @media (max-width:359px){.site-header__actions .btn--sm .arr{display:none}}

  /* No JS: no toggles; below 960px the primary nav shows as a wrapped row. */
  html.no-js .menu-toggle{display:none}
  @media (max-width:959px){
    html.no-js .site-header{position:relative;block-size:auto}
    html.no-js .site-header__inner{flex-wrap:wrap;row-gap:0;padding-block:12px}
    html.no-js .site-nav{display:block;order:3;flex-basis:100%;margin-inline:-12px}
    html.no-js .site-nav__list{flex-wrap:wrap}
    html.no-js :is(.site-nav__toggle,.site-nav__sub){display:none}
    html.no-js .site-nav__item--has-sub > .site-nav__link{padding-inline-end:12px}
    html.no-js .page-hero{padding-top:var(--py-s)}
  }

  /* ---------- mobile menu ---------- */
  .site-menu{
    position:fixed;inset:var(--header-h) 0 0;z-index:40;overflow-y:auto;overscroll-behavior:contain;
    background:var(--bg-0);
    opacity:0;transform:translateY(-8px);
    transition:opacity var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-ui);
  }
  .site-menu.is-open{opacity:1;transform:none;transition:opacity var(--d-sm) var(--ease-out),transform var(--d-md) var(--ease-out)}
  .site-menu__nav{display:flex;flex-direction:column;gap:32px;min-block-size:100%;padding:16px var(--gutter) calc(32px + env(safe-area-inset-bottom))}
  .site-menu__list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line-1)}
  .site-menu__list > li{border-bottom:1px solid var(--line-1)}
  .site-menu__link{display:flex;align-items:center;gap:14px;min-block-size:64px;padding:8px 0;font-size:var(--fs-h2);font-weight:300;line-height:1.1;letter-spacing:-.03em;color:var(--ink);text-decoration:none}
  .site-menu__link[aria-current="page"]::before,.site-menu__sublink[aria-current="page"]::before{content:"";flex:none;inline-size:8px;block-size:8px;background:var(--accent)}
  .site-menu__sub{display:grid;margin:-4px 0 0;padding:0 0 14px 1.25rem;list-style:none;border-left:1px solid var(--line-2);margin-left:4px}
  .site-menu__sublink{display:flex;align-items:center;gap:10px;min-block-size:44px;font-size:var(--fs-h3);color:var(--ink-2);text-decoration:none}
  @media (hover:hover) and (pointer:fine){.site-menu__sublink:hover{color:var(--ink)}}
  .site-menu__mail{margin-top:auto;font-family:var(--font-mono);font-size:var(--fs-small);color:var(--ink-2)}
  .site-menu__mail a{display:inline-flex;align-items:center;min-block-size:44px}
  /* Staggered rows on open; closing drops the delays so it feels immediate. */
  .site-menu__list > li,.site-menu__nav > .btn{opacity:0;transform:translateY(12px);transition:opacity var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-ui)}
  .site-menu.is-open :is(.site-menu__list > li,.site-menu__nav > .btn){opacity:1;transform:none;transition:opacity var(--d-md) var(--ease-out),transform var(--d-md) var(--ease-out)}
  .site-menu.is-open .site-menu__list > li:nth-child(2){transition-delay:.03s}
  .site-menu.is-open .site-menu__list > li:nth-child(3){transition-delay:.06s}
  .site-menu.is-open .site-menu__list > li:nth-child(4){transition-delay:.09s}
  .site-menu.is-open .site-menu__list > li:nth-child(5){transition-delay:.12s}
  .site-menu.is-open .site-menu__nav > .btn{transition-delay:.15s}
  @media (min-width:960px){.site-menu{display:none}}

  /* ---------- footer ---------- */
  .site-footer{position:relative;background:var(--bg-0);border-top:1px solid var(--line-1);overflow:hidden}
  .site-footer__inner{container-type:inline-size;padding-top:clamp(56px,7vw,88px)}
  .site-footer__top{display:grid;gap:48px}
  @media (min-width:768px){.site-footer__top{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px)}}
  .site-footer__brand{display:grid;justify-items:start;align-content:start;gap:16px}
  .site-footer__tagline{max-inline-size:32ch;color:var(--ink-2)}
  .site-footer__mail{font-size:var(--fs-small)}
  .site-footer__social{display:flex;gap:8px;margin:4px 0 0;padding:0;list-style:none}
  .site-footer__social a{display:grid;place-items:center;inline-size:40px;block-size:40px;border:1px solid var(--line-2);border-radius:var(--r-1);color:var(--ink-2);transition:color var(--d-xs) var(--ease-ui),border-color var(--d-xs) var(--ease-ui),background-color var(--d-xs) var(--ease-ui)}
  @media (hover:hover) and (pointer:fine){.site-footer__social a:hover{color:var(--ink);border-color:var(--line-3);background:var(--bg-2)}}
  .site-footer__nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  /* Columns drop to two before a link would wrap (the nav is narrow beside the brand at 768). */
  @media (min-width:640px){.site-footer__nav{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}}
  @media (min-width:960px){.site-footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .site-footer__heading{margin-bottom:12px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .site-footer__col ul{display:grid;margin:0;padding:0;list-style:none}
  .site-footer__col a{display:inline-flex;white-space:nowrap;align-items:center;min-block-size:32px;font-size:var(--fs-small);color:var(--ink-2);text-decoration:none;transition:color var(--d-xs) var(--ease-ui)}
  .site-footer__col a[aria-current="page"]{color:var(--ink)}
  @media (hover:hover) and (pointer:fine){.site-footer__col a:hover{color:var(--ink)}}
  /* Giant outlined wordmark, sized to the shell (cqi) and clipped at its baseline. */
  .site-footer__word{
    display:block;block-size:.74em;margin-top:clamp(48px,7vw,96px);overflow:hidden;
    font-size:21cqi;font-weight:300;line-height:1;letter-spacing:-.05em;white-space:nowrap;
    color:transparent;-webkit-text-stroke:1px var(--line-3);
    -webkit-user-select:none;user-select:none;
  }
  @supports not (font-size:1cqi){.site-footer__word{font-size:18vw}}
  /* Pointer glow (footer-glow.js): an orange radial fill clipped to the glyphs, centred on the cursor. */
  .site-footer__word{
    --gx:50%;--gy:50%;--glow:0;
    background:radial-gradient(circle 220px at var(--gx) var(--gy),color-mix(in srgb,var(--accent) calc(var(--glow) * 100%),transparent),transparent 70%) no-repeat;
    /* lint-allow: clip-text (the glow is the only fill; the glyphs stay an outline when it is off) */
    -webkit-background-clip:text;background-clip:text;
    transition:--glow var(--d-sm) var(--ease-ui);
  }
  .site-footer__word.is-glow{--glow:1;-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 45%,var(--line-3))}
  .site-footer__bottom{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-block:20px 28px;border-top:1px solid var(--line-1)}
  .site-footer__legal{margin-inline-end:auto;font-size:var(--fs-small);color:var(--ink-3)}
  .site-footer__top-link{display:inline-flex;align-items:center;gap:8px;min-block-size:32px;font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color var(--d-xs) var(--ease-ui)}
  .site-footer__top-link .ico{inline-size:13px;block-size:13px}
  @media (hover:hover) and (pointer:fine){.site-footer__top-link:hover{color:var(--ink)}}

}

/* ---------- utilities ---------- */
@layer utilities{
  .vh{position:absolute !important;inline-size:1px !important;block-size:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;white-space:nowrap !important;border:0 !important}
  .skip-link{position:fixed;top:8px;left:8px;z-index:70;display:inline-flex;align-items:center;min-block-size:40px;padding:0 16px;border-radius:var(--r-1);background:var(--accent);color:var(--accent-ink);font-family:var(--font-mono);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transform:translateY(calc(-100% - 16px))}
  .skip-link:focus,.skip-link:focus-visible{transform:none;outline:2px solid var(--ink);outline-offset:2px}
  .num{font-variant-numeric:tabular-nums}
  .nowrap{white-space:nowrap}
  .ink{color:var(--ink)}
  main:focus{outline:none}
  html.no-js [data-copy]{display:none}
  html.no-js [data-tabs] [role="tablist"]{display:none}

  @media (forced-colors:active){
    .logo,.brand__mark{forced-color-adjust:none;background:CanvasText}
    .logo--color{background:var(--logo) center/contain no-repeat}
    .eyebrow::before,.mk,.bar__fill,.seg__thumb{forced-color-adjust:none;background:Highlight}
    .seg__opt:has(input:checked){color:HighlightText;forced-color-adjust:none}
  }
  @media print{
    body::after,.site-header,.site-menu,.skip-link,.site-footer__word,.toast{display:none !important}
    main.rules::before{display:none}
    .page-hero{padding-top:var(--py-s)}
  }
}