/* ==========================================================================
   SelectRate design system, Phase 3
   White dominant · SelectRate blue · pale SelectRate blue · dark ink/navy
   Type: IBM Plex Sans + IBM Plex Mono (approved brand faces)
   ========================================================================== */

:root{
  /* Brand */
  --blue:        #1B4BC4;
  --blue-d:      #163C9E;   /* hover / pressed */
  --blue-pale:   #EDF2FC;   /* pale SelectRate blue band */
  --blue-pale-2: #E1EAFA;   /* pale blue, one step up: chips, icon wells */
  --blue-line:   #C8D6F2;   /* border on pale blue ground */

  /* Ink */
  --ink:    #16202B;        /* headings */
  --ink-2:  #2B3846;        /* strong body */
  --body:   #4F5A66;        /* body */
  --muted:  #646D79;        /* captions, labels (AA on white, near and pale grounds) */
  --faint:  #6B7480;      /* light captions (AA on white for textual uses) */

  /* Ground */
  --white:  #FFFFFF;        /* dominant */
  --near:   #F6F7F9;        /* near-white band */
  --navy:   #0F1A26;        /* contained dark CTA + footer */
  --navy-2: #16232F;

  /* Lines */
  --line:   #E3E7EE;
  --line-2: #EDF0F5;
  --line-d: #1D2C3A;        /* on navy */

  /* Status (used only in technical panels, never decorative) */
  --ok:     #1B6B3A;  --ok-bg:   #E8F3EC;  --ok-line: #C2DFCD;
  --warn:   #8A6A17;  --warn-bg: #F7F0DC;  --warn-line:#E4D3A4;
  --stop:   #9B2C2C;  --stop-bg: #F8ECEC;  --stop-line:#E6C6C6;

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 12px;
  --radius-s: 8px;
  --shadow-1: 0 1px 2px rgba(22,32,43,.05);
  --shadow-2: 0 1px 2px rgba(22,32,43,.05), 0 14px 32px -16px rgba(22,32,43,.18);
  --shadow-3: 0 2px 4px rgba(22,32,43,.06), 0 26px 56px -22px rgba(22,32,43,.24);

  --header-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 18px); }

body{
  margin:0; background:var(--white); color:var(--body);
  font-family:var(--sans); font-size:16.5px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{ max-width:100%; }
a{ color:var(--blue); text-decoration:none; }
a:hover{ color:var(--blue-d); }

:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 18px; border-radius:0 0 var(--radius-s) 0;
  font-size:14px; font-weight:600;
}
.skip:focus{ left:0; color:#fff; }

/* ---------- layout ------------------------------------------------------ */
.wrap{ width:100%; max-width:1296px; margin:0 auto; padding-inline:72px; }
.sec{ padding-block:104px; }
.sec-s{ padding-block:76px; }
.measure{ max-width:68ch; }
.measure-w{ max-width:78ch; }

.g-white{ background:var(--white); }
.g-near { background:var(--near); }
.g-pale { background:var(--blue-pale); }
.g-navy { background:var(--navy); }
.rule-t{ border-top:1px solid var(--line); }

/* ---------- type -------------------------------------------------------- */
h1,h2,h3,h4{ color:var(--ink); margin:0; text-wrap:balance; letter-spacing:-.022em; font-weight:700; }
h1{ font-size:clamp(34px, 4.2vw, 52px); line-height:1.08; letter-spacing:-.032em; }
h2{ font-size:clamp(27px, 2.6vw, 37px); line-height:1.15; letter-spacing:-.026em; }
h3{ font-size:20.5px; line-height:1.32; font-weight:600; letter-spacing:-.014em; }
h4{ font-size:17px;   line-height:1.4;  font-weight:600; letter-spacing:-.01em; }

p{ margin:0 0 1.05em; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ color:var(--ink-2); font-weight:600; }

.eyebrow{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.17em; text-transform:uppercase; color:var(--blue);
  margin:0 0 16px;
}
.eyebrow-m{ color:var(--muted); }
.lede{ font-size:19px; line-height:1.6; color:var(--ink-2); }
.small{ font-size:14.5px; line-height:1.6; }
.mono{ font-family:var(--mono); }
.label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

.sec > .wrap > .h-block{ margin-bottom:44px; }
.h-block .lede{ margin-top:16px; max-width:70ch; }

/* ---------- buttons ----------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; height:50px; padding-inline:26px;
  border-radius:var(--radius-s); font-size:15.5px; font-weight:500; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease);
}
.btn-p{ background:var(--blue); color:#fff; box-shadow:var(--shadow-1); }
.btn-p:hover{ background:var(--blue-d); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-2); }
.btn-s{ background:var(--white); color:var(--ink); border-color:var(--line); }
.btn-s:hover{ color:var(--ink); border-color:#C9D0DA; transform:translateY(-1px); box-shadow:var(--shadow-1); }
.btn-g{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); }
.btn-g:hover{ color:#fff; border-color:rgba(255,255,255,.55); transform:translateY(-1px); }
.btn-sm{ height:42px; padding-inline:18px; font-size:14.5px; }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* directional link */
.dlink{ display:inline-flex; align-items:center; gap:7px; font-weight:500; font-size:15.5px; }
.dlink svg{ transition:transform .2s var(--ease); flex:none; }
.dlink:hover svg{ transform:translateX(3px); }

/* ---------- header ------------------------------------------------------ */
.hdr{
  position:sticky; top:0; z-index:100; background:var(--white);
  border-bottom:1px solid var(--line);
}
.hdr-in{ display:flex; align-items:center; gap:24px; height:var(--header-h); }
.hdr-logo{ display:flex; align-items:center; flex:none; }
.hdr-logo img{ height:32px; width:auto; display:block; }
.hdr-nav{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.hdr-right{ display:flex; align-items:center; gap:16px; margin-left:auto; flex:none; }
.hdr-signin{ font-size:14.5px; font-weight:500; color:var(--ink); }
.hdr-signin:hover{ color:var(--blue); }

.navitem{ position:relative; }
.navtop{
  display:inline-flex; align-items:center; gap:5px; height:38px; padding-inline:13px;
  border-radius:7px; font-size:14.5px; font-weight:500; color:var(--ink-2);
  background:none; border:0; font-family:inherit; cursor:pointer;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.navtop:hover, .navitem[data-open="true"] .navtop{ background:var(--near); color:var(--ink); }
.navtop .chev{ width:11px; height:11px; color:var(--faint); transition:transform .2s var(--ease); }
.navitem[data-open="true"] .navtop .chev{ transform:rotate(180deg); }

.navpanel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:110;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-3); padding:10px;
  min-width:max-content;                 /* content-aware sizing */
  opacity:0; visibility:hidden; transform:translateY(-5px);
  transition:opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.navitem[data-open="true"] .navpanel{ opacity:1; visibility:visible; transform:none; }
.navpanel.two{ display:grid; grid-template-columns:repeat(2,minmax(210px,1fr)); gap:2px; }
.navpanel.three{ display:grid; grid-template-columns:repeat(3,minmax(206px,1fr)); gap:2px; }
.navpanel.three .navgrp{ min-height:1.1em; }
.navlink{
  display:block; padding:9px 12px; border-radius:7px; color:var(--ink);
  transition:background-color .14s var(--ease);
}
.navlink:hover{ background:var(--blue-pale); color:var(--ink); }
.navlink b{ display:block; font-size:14.5px; font-weight:500; line-height:1.35; }
.navlink span{ display:block; font-size:12.5px; color:var(--muted); line-height:1.4; margin-top:2px; }

.navtoggle{
  display:none; width:42px; height:42px; margin-left:auto; border:1px solid var(--line);
  border-radius:var(--radius-s); background:var(--white); color:var(--ink);
  align-items:center; justify-content:center; cursor:pointer;
}

/* Dropdown panels used to be anchored to their trigger with left:0, which let
   the wider ones run past the right gutter. The Lines mega-menu was clipped
   from about 1041px to 1280px, and the Resources panel was clipped at 1041px.
   Two fixes, no overflow hiding, no change to menu content:

   1. The rightmost menu opens leftward, staying attached to its trigger.
   2. The Lines mega-menu is far wider than its trigger, so it is anchored to
      the header content box and its right edge lines up with the header's
      right edge. All three columns stay inside the content column at every
      width. The narrower two-column panels keep their own trigger anchor. */

/* the last menu that actually has a dropdown opens leftward, so it cannot
   run past the gutter; Docs sits in a .navitem with no panel, so this is
   matched by structure rather than by counting items */
.hdr-nav > .navitem:has(> .navpanel):not(:has(~ .navitem > .navpanel)) > .navpanel{
  left:auto; right:0;
}

.hdr-in{ position:relative; }
.navitem:has(> .navpanel.three){ position:static; }
.navpanel.three{
  left:auto;
  right:72px;                /* matches .wrap padding-inline, so the panel's
                                right edge sits on the content edge */
  /* nav items are 38px tall and vertically centred in the header, so their
     bottom edge sits at (header + 38) / 2; keep the original 8px gap below it */
  top:calc((var(--header-h) + 38px) / 2 + 8px);
}
@media (max-width:1180px){
  .navpanel.three{ right:44px; }   /* .wrap padding-inline drops to 44px here */
}

/* mobile drawer */
.mnav{ display:none; border-top:1px solid var(--line); background:var(--white); }
.mnav[data-open="true"]{ display:block; }
.mnav .wrap{ padding-block:14px 26px; }
.mgroup{ border-bottom:1px solid var(--line-2); padding-block:6px; }
.mgroup > .label{ display:block; padding:12px 0 6px; }
.mgroup a{ display:block; padding:9px 0; font-size:15.5px; color:var(--ink); font-weight:450; }
.mnav .cta-row{ margin-top:22px; }
.mnav .btn{ flex:1; justify-content:center; }

/* ---------- hero -------------------------------------------------------- */
.hero{ background:var(--white); border-bottom:1px solid var(--line); }
.hero .wrap{ padding-block:76px 84px; }
.hero-split{ display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:64px; align-items:center; }
.hero-narrow{ max-width:74ch; }
.hero h1{ margin-bottom:0; }
.hero-stand{
  margin:20px 0 0; font-size:clamp(21px,2vw,26px); line-height:1.24; font-weight:600;
  letter-spacing:-.022em; color:var(--blue);
}
.hero-copy{ margin-top:22px; font-size:18px; line-height:1.62; color:var(--body); max-width:62ch; }
.hero .cta-row{ margin-top:32px; }

/* ---------- On this page ------------------------------------------------ */
.otp{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-2); padding:22px 24px; max-width:420px;
}
.otp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
.otp-head .label{ margin:0; }
.otp ol{ list-style:none; margin:0; padding:0; counter-reset:otp; }
.otp li{ counter-increment:otp; border-top:1px solid var(--line-2); }
.otp li:first-child{ border-top:0; }
.otp a{
  display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:baseline;
  padding:11px 0; font-size:15px; line-height:1.4; color:var(--ink); font-weight:450;
  transition:color .14s var(--ease);
}
.otp a::before{
  content:counter(otp,decimal-leading-zero);
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--faint);
  transition:color .14s var(--ease);
}
.otp a:hover{ color:var(--blue); }
.otp a:hover::before{ color:var(--blue); }
.otp-btn{ display:none; background:none; border:0; padding:0; cursor:pointer; color:var(--muted); font-family:inherit; font-size:13px; }

/* below-hero variant */
.otp-bar{ max-width:none; }
.otp-bar ol{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); column-gap:34px; }
.otp-bar li{ border-top:1px solid var(--line-2); }
.otp-bar li:nth-child(-n+3){ border-top:0; }

/* ---------- cards ------------------------------------------------------- */
.grid{ display:grid; gap:22px; align-items:stretch; }
.g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 26px 28px; display:flex; flex-direction:column; gap:10px; height:100%;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card-lift:hover{ transform:translateY(-1px); box-shadow:var(--shadow-2); border-color:#D5DCE7; }
.card h3{ font-size:18px; }
.card p{ font-size:15.5px; line-height:1.58; margin:0; }
.g-near .card, .g-pale .card{ background:var(--white); }

.ico{
  width:38px; height:38px; border-radius:9px; background:var(--blue-pale-2);
  color:var(--blue); display:flex; align-items:center; justify-content:center; flex:none;
  margin-bottom:6px;
}
.ico svg{ width:19px; height:19px; }

/* numbered step cards */
.step-n{
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--blue);
}

/* ---------- tables ------------------------------------------------------ */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); }
table{ border-collapse:collapse; width:100%; font-size:15px; }
thead th{
  text-align:left; padding:13px 18px; background:var(--near);
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{ padding:14px 18px; border-top:1px solid var(--line-2); vertical-align:top; line-height:1.55; }
tbody tr:first-child td{ border-top:0; }
tbody td:first-child{ color:var(--ink); font-weight:500; }
td code, th code{ white-space:nowrap; }
.num{ font-variant-numeric:tabular-nums; }

/* ---------- code / technical panels ------------------------------------- */
code{
  font-family:var(--mono); font-size:.9em; background:var(--near);
  border:1px solid var(--line-2); border-radius:5px; padding:1px 5px; color:var(--ink-2);
}
pre{
  margin:0; background:var(--navy); color:#D7E0EA; border-radius:var(--radius);
  padding:22px 24px; overflow-x:auto; font-size:13.5px; line-height:1.66;
}
pre code{ background:none; border:0; padding:0; color:inherit; font-size:inherit; white-space:pre; }
.pre-wrap{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-2); }
.pre-head{
  background:var(--navy-2); color:#8D9BAA; border-bottom:1px solid var(--line-d);
  padding:10px 24px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
}
.pre-wrap pre{ border-radius:0; }

.panel{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-2);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 20px; border-bottom:1px solid var(--line); background:var(--near);
}
.panel-head .label{ margin:0; }
.panel-body{ padding:20px; }

.note{
  border:1px solid var(--blue-line); background:var(--blue-pale); border-radius:var(--radius);
  padding:20px 22px; font-size:15.5px; line-height:1.6;
}
.note p:last-child{ margin-bottom:0; }

.pill{
  display:inline-flex; align-items:center; gap:6px; height:24px; padding-inline:10px;
  border-radius:999px; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
}
.p-ok  { background:var(--ok-bg);   color:var(--ok);   border:1px solid var(--ok-line); }
.p-warn{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-line); }
.p-stop{ background:var(--stop-bg); color:var(--stop); border:1px solid var(--stop-line); }
.p-blue{ background:var(--blue-pale-2); color:var(--blue-d); border:1px solid var(--blue-line); }

/* ---------- lists ------------------------------------------------------- */
.ul{ margin:0 0 1.05em; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
.ul li{ position:relative; padding-left:24px; line-height:1.6; }
.ul li::before{
  content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px;
  border-radius:2px; background:var(--blue-pale-2); border:1px solid var(--blue-line);
}
.ul li strong:first-child{ color:var(--ink); }
.ol{ margin:0 0 1.05em; padding-left:1.3em; }
.ol li{ margin-bottom:10px; line-height:1.6; }

/* definition rows */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,.66fr); gap:32px; padding:20px 0; border-bottom:1px solid var(--line); }
.row h4{ margin:0; }

/* ---------- dark CTA band ---------------------------------------------- */
.ctaband{ background:var(--white); }
.ctaband .wrap{ padding-block:8px 100px; }
.ctaband-in{
  background:var(--navy); color:#B9C5D2; border-radius:16px; padding:56px 60px;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center;
  box-shadow:0 30px 60px -34px rgba(15,26,38,.5);
}
.ctaband h2{ color:#fff; font-size:clamp(25px,2.3vw,33px); }
.ctaband p{ margin:14px 0 0; font-size:17px; color:#94A3B3; max-width:54ch; }
@media (max-width:620px){ .ctaband-in{ padding:36px 26px; border-radius:14px; } }

/* ---------- disclosure (competitor / trademark) ------------------------- */
.disclose{
  border:1px solid var(--line); background:var(--near); border-radius:var(--radius-s);
  padding:16px 18px; font-size:13px; line-height:1.6; color:var(--muted); max-width:82ch;
}
.disclose b{ color:var(--ink-2); font-weight:600; }

/* ---------- footer ------------------------------------------------------ */
.ftr{ background:var(--navy); color:#8C99A8; }
.ftr .wrap{ padding-block:58px 30px; }
.ftr-brand{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; padding-bottom:38px; border-bottom:1px solid var(--line-d); }
.ftr-brand img{ height:25px; width:auto; display:block; }
.ftr-brand p{ margin:15px 0 0; font-size:14px; line-height:1.6; color:#7A8796; max-width:46ch; }
.ftr-top{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:32px; padding-block:38px 40px; border-bottom:1px solid var(--line-d); }
.ftr-col .label{ display:block; color:#5E6C7C; margin-bottom:14px; }
.ftr-col a{ display:block; font-size:13.5px; line-height:1.5; color:#9DAAB8; padding-block:5px; transition:color .14s var(--ease); }
.ftr-col a:hover{ color:#fff; }
.ftr-legal{ padding-top:24px; display:flex; flex-wrap:wrap; gap:18px 40px; justify-content:space-between; align-items:flex-start; }
.ftr-legal p{ margin:0; font-size:12.5px; line-height:1.6; color:#64717F; }
.ftr-legal .tm{ max-width:56ch; text-align:left; }

/* ---------- breadcrumb -------------------------------------------------- */
.crumb{ padding-block:16px 0; font-size:13px; color:var(--muted); }
.crumb ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.crumb a{ color:var(--muted); }
.crumb a:hover{ color:var(--blue); }
.crumb li+li::before{ content:"/"; margin-right:8px; color:var(--line); }

/* ---------- FAQ --------------------------------------------------------- */
.faq{ border-top:1px solid var(--line); }
.faq-i{ border-bottom:1px solid var(--line); padding:24px 0; display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,.6fr); gap:40px; }
.faq-i h3{ font-size:18px; margin:0; }
.faq-i p{ margin:0; font-size:15.5px; }

/* ==========================================================================
   Technical visual language
   ========================================================================== */

/* vertical layer stack: ISO base -> carrier -> program -> version */
.stack{ display:flex; flex-direction:column; gap:0; }
.stack-i{
  position:relative; border:1px solid var(--line); background:var(--white);
  border-radius:var(--radius); padding:16px 20px; display:grid;
  grid-template-columns:auto minmax(0,1fr) auto; gap:16px; align-items:center;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.stack-i + .stack-i{ margin-top:26px; }
.stack-i + .stack-i::before{
  content:""; position:absolute; left:34px; top:-26px; width:1px; height:26px; background:var(--line);
}
.stack-i + .stack-i::after{
  content:""; position:absolute; left:31px; top:-11px; width:7px; height:7px;
  border-right:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue);
  transform:rotate(45deg);
}
.stack-i:hover{ border-color:var(--blue-line); box-shadow:var(--shadow-1); }
.stack-n{
  width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; font-weight:600; flex:none;
  background:var(--blue-pale-2); color:var(--blue); border:1px solid var(--blue-line);
}
.stack-i.base .stack-n{ background:var(--navy); color:#fff; border-color:var(--navy); }
.stack-t b{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.stack-t span{ display:block; font-size:13.5px; color:var(--muted); line-height:1.45; margin-top:2px; }
.stack-w{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
.stack-out{
  margin-top:26px; position:relative; border-radius:var(--radius); padding:16px 20px;
  background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.stack-out::before{ content:""; position:absolute; left:34px; top:-26px; width:1px; height:26px; background:var(--line); }
.stack-out b{ font-size:15.5px; font-weight:600; }
.stack-out span{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7D8C9C; }

/* horizontal pipeline: configure -> test -> publish, sandbox -> uat -> prod */
.flow{ display:grid; gap:0; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); align-items:stretch; }
.flow-i{
  position:relative; border:1px solid var(--line); background:var(--white);
  padding:20px; display:flex; flex-direction:column; gap:7px;
}
.flow-i:first-child{ border-radius:var(--radius) 0 0 var(--radius); }
.flow-i:last-child { border-radius:0 var(--radius) var(--radius) 0; }
.flow-i + .flow-i{ border-left:0; }
.flow-i + .flow-i::before{
  content:""; position:absolute; left:-5px; top:50%; width:9px; height:9px; margin-top:-5px; z-index:2;
  background:var(--white); border-right:1.5px solid var(--blue); border-bottom:1.5px solid var(--blue);
  transform:rotate(-45deg);
}
.flow-i b{ font-size:15.5px; font-weight:600; color:var(--ink); }
.flow-i p{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:0; }
.flow-i .label{ color:var(--blue); }

/* timeline: effective / expiration dates */
.tl{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white); overflow:hidden; }
.tl-row{ display:grid; grid-template-columns:130px minmax(0,1fr); gap:0; border-top:1px solid var(--line-2); }
.tl-row:first-child{ border-top:0; }
.tl-k{ padding:14px 18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--near); border-right:1px solid var(--line-2); display:flex; align-items:center; }
.tl-v{ padding:12px 18px; display:flex; align-items:center; }
.tl-bar{ position:relative; height:28px; flex:1; border-radius:6px; background:var(--near); overflow:hidden; }
.tl-seg{ position:absolute; top:0; bottom:0; border-radius:6px; display:flex; align-items:center; padding-inline:10px; font-family:var(--mono); font-size:11px; font-weight:500; white-space:nowrap; }
.tl-live{ background:var(--blue); color:#fff; }
.tl-next{ background:var(--blue-pale-2); color:var(--blue-d); border:1px dashed var(--blue-line); }
.tl-past{ background:#E9ECF1; color:var(--muted); }

/* worksheet mock */
.ws{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white); box-shadow:var(--shadow-2); }
.ws table{ font-family:var(--mono); font-size:12.5px; }
.ws thead th{ font-size:10px; padding:11px 14px; }
.ws tbody td{ padding:11px 14px; font-variant-numeric:tabular-nums; }
.ws tbody td:first-child{ font-family:var(--sans); font-size:13.5px; font-weight:500; }
.ws-foot{ padding:12px 16px; border-top:1px solid var(--line); background:var(--near); font-size:12.5px; color:var(--muted); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* provenance trace */
.prov{ display:flex; flex-direction:column; gap:0; }
.prov-i{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:14px 0; border-top:1px solid var(--line-2); }
.prov-i:first-child{ border-top:0; }
.prov-d{ width:9px; height:9px; border-radius:50%; background:var(--white); border:2px solid var(--blue); margin-top:6px; flex:none; }
.prov-i b{ display:block; font-size:14.5px; color:var(--ink); font-weight:600; }
.prov-i span{ display:block; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }

/* request -> result */
.rr{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:20px; align-items:center; }
.rr-arrow{ color:var(--blue); display:flex; align-items:center; justify-content:center; }

/* schedule shapes (property locations, auto units, bop package, gl classes) */
.shape{ display:flex; flex-direction:column; gap:10px; }
.shape-i{
  border:1px solid var(--line); border-radius:var(--radius-s); background:var(--white);
  padding:13px 16px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:13px; align-items:center;
}
.shape-i .tag{
  font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue); background:var(--blue-pale-2); border:1px solid var(--blue-line);
  border-radius:5px; padding:3px 7px; flex:none;
}
.shape-i b{ font-size:14.5px; color:var(--ink); font-weight:500; }
.shape-i .sub{ font-size:12.5px; color:var(--muted); display:block; margin-top:1px; }
.shape-i .amt{ font-family:var(--mono); font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.shape-roll{
  margin-top:4px; border:1px dashed var(--blue-line); background:var(--blue-pale);
  border-radius:var(--radius-s); padding:13px 16px; display:flex; justify-content:space-between;
  align-items:center; gap:14px; font-size:14.5px; color:var(--ink); font-weight:500;
}
.shape-roll .amt{ font-family:var(--mono); color:var(--blue-d); font-variant-numeric:tabular-nums; }

/* package (BOP): gate then two components */
.gate{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white); }
.gate-top{ padding:16px 20px; background:var(--near); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:14px; }
.gate-top b{ font-size:15px; color:var(--ink); }
.gate-body{ padding:20px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.gate-c{ border:1px solid var(--line); border-radius:var(--radius-s); padding:15px 16px; background:var(--white); }
.gate-c b{ display:block; font-size:14.5px; color:var(--ink); }
.gate-c span{ display:block; font-size:13px; color:var(--muted); margin-top:4px; line-height:1.5; }
.gate-foot{ padding:14px 20px; border-top:1px solid var(--line); background:var(--blue-pale); font-size:14px; color:var(--ink-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .wrap{ padding-inline:44px; }
  .hero-split{ gap:44px; }
  .ftr-top{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:34px; }
}
@media (max-width:1040px){
  .hdr-nav{ display:none; }
  .navtoggle{ display:flex; }
  .hdr-right{ display:none; }
  .hdr-in{ gap:16px; }
  .g4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow{ grid-auto-flow:row; grid-auto-columns:auto; }
  .flow-i{ border-radius:0; border-left:1px solid var(--line); }
  .flow-i:first-child{ border-radius:var(--radius) var(--radius) 0 0; }
  .flow-i:last-child{ border-radius:0 0 var(--radius) var(--radius); }
  .flow-i + .flow-i{ border-top:0; border-left:1px solid var(--line); }
  .flow-i + .flow-i::before{ left:50%; top:-5px; margin:0 0 0 -5px; transform:rotate(45deg); }
}
@media (max-width:920px){
  .wrap{ padding-inline:30px; }
  .sec{ padding-block:72px; }
  .sec-s{ padding-block:56px; }
  .hero .wrap{ padding-block:56px 60px; }
  .hero-split{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .otp{ max-width:none; }
  .g2,.g3{ grid-template-columns:minmax(0,1fr); }
  .otp-bar ol{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .otp-bar li:nth-child(3){ border-top:1px solid var(--line-2); }
  .row{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .faq-i{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .ctaband-in{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .rr{ grid-template-columns:minmax(0,1fr); }
  .rr-arrow{ transform:rotate(90deg); }
  .ftr-legal{ flex-direction:column; }
  .ftr-legal .tm{ text-align:left; }
}
@media (max-width:620px){
  .wrap{ padding-inline:20px; }
  .sec{ padding-block:56px; }
  .g4{ grid-template-columns:minmax(0,1fr); }
  .ftr-top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ftr-brand{ flex-direction:column; gap:22px; }
  .otp-bar ol{ grid-template-columns:minmax(0,1fr); }
  .otp-bar li{ border-top:1px solid var(--line-2); }
  .otp-bar li:first-child{ border-top:0; }
  .gate-body{ grid-template-columns:minmax(0,1fr); }
  .tl-row{ grid-template-columns:minmax(0,1fr); }
  .tl-k{ border-right:0; border-bottom:1px solid var(--line-2); }
  .cta-row .btn{ width:100%; justify-content:center; }
  /* On this page collapses on mobile */
  .otp-btn{ display:inline-flex; align-items:center; gap:6px; }
  .otp[data-open="false"] ol{ display:none; }
  .otp[data-open="false"] .otp-head{ margin-bottom:0; }
  .shape-i{ grid-template-columns:auto minmax(0,1fr); }
  .shape-i .amt{ grid-column:2; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .btn:hover,.card-lift:hover{ transform:none; }
  .dlink:hover svg{ transform:none; }
}

@media print{
  .hdr,.mnav,.ctaband,.otp{ display:none; }
}

/* ---------- section internals (generated pages) ------------------------- */
.sec h2 + .measure, .sec h2 + .grid, .sec h2 + .tw, .sec h2 + .pre-wrap,
.sec h2 + .faq, .sec h2 + .panel, .sec h2 + .note{ margin-top:26px; }
.sub-h{ margin-top:38px; margin-bottom:14px; }
.sub-h + .measure{ margin-top:0; }
.measure + .grid, .measure + .tw, .measure + .pre-wrap, .measure + .panel,
.measure + .note, .measure + .ws, .measure + .tl, .measure + .stack,
.measure + .flow, .measure + .gate, .measure + .shape, .measure + .disclose{ margin-top:30px; }
.grid + .measure, .tw + .measure, .pre-wrap + .measure, .panel + .measure,
.note + .measure, .ws + .measure, .tl + .measure, .stack + .measure,
.flow + .measure, .gate + .measure, .shape + .measure{ margin-top:30px; }
.grid + .grid, .tw + .tw, .pre-wrap + .tw, .tw + .pre-wrap{ margin-top:22px; }
.sec-head{ margin-bottom:30px; }
.sec-head .measure{ margin-top:18px; }
.viz{ margin-top:34px; }
.viz-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; }
.viz-cap{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.55; }
.dlink-row{ margin-top:26px; }
@media (max-width:920px){ .viz-2{ grid-template-columns:minmax(0,1fr); gap:26px; } }

/* ---------- two-column section: heading rail + body ---------------------- */
.sec-2{ display:grid; grid-template-columns:minmax(0,.33fr) minmax(0,.67fr); gap:24px 68px; align-items:start; }
.sec-2 > .sec-h{ grid-column:1; }
.sec-2 > .sec-h h2{ font-size:clamp(25px,2.05vw,31px); line-height:1.16; }
.sec-2 > .sec-b{ grid-column:2; min-width:0; }
.sec-2 > .sec-w{ grid-column:1 / -1; min-width:0; }
.sec-2 .measure{ max-width:none; }
.sec-b > *:first-child{ margin-top:0; }
.sec-w{ margin-top:8px; }
.sec-w + .sec-w{ margin-top:0; }
.sec-b + .sec-w{ margin-top:14px; }
@media (max-width:1040px){
  .sec-2{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .sec-2 > .sec-h{ grid-column:1; }
  .sec-2 > .sec-b, .sec-2 > .sec-w{ grid-column:1; }
  .sec-2 .measure{ max-width:68ch; }
}
.crumb li:last-child{ color:var(--ink-2); font-weight:500; }

/* ==========================================================================
   API reference (docs.html)
   ========================================================================== */
.doc{ display:grid; grid-template-columns:236px minmax(0,1fr); gap:60px; align-items:start; }
.doc > div{ min-width:0; }
.side{ position:sticky; top:calc(var(--header-h) + 24px); display:flex; flex-direction:column; gap:2px; padding-bottom:40px; }
.side a{ font-size:13.5px; color:var(--body); padding:6px 11px; border-radius:6px; line-height:1.45;
         transition:background-color .14s var(--ease), color .14s var(--ease); }
.side a:hover{ background:var(--blue-pale); color:var(--ink); }
.side .grp{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--faint); margin:24px 0 6px 11px; }
.side .grp:first-child{ margin-top:0; }
.docbody h2{ font-size:28px; letter-spacing:-.024em; margin:66px 0 16px; }
.docbody h2:first-of-type{ margin-top:0; }
.docbody h3{ font-size:18px; margin:36px 0 10px; }
.docbody p{ font-size:16px; line-height:1.65; margin:0 0 15px; max-width:74ch; }
.docbody ul{ margin:0 0 18px; padding-left:20px; max-width:74ch; }
.docbody li{ font-size:15.5px; line-height:1.65; margin-bottom:7px; }
.docbody pre{ margin:0 0 22px; max-width:100%; }
.docbody .note{ margin:0 0 22px; max-width:74ch; }
.docbody table.t{ width:100%; border-collapse:collapse; margin:0 0 24px; font-size:14.5px; }
.docbody table.t th{ text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:600; padding:0 14px 10px 0;
  border-bottom:1px solid var(--line); background:none; white-space:nowrap; }
.docbody table.t td{ padding:12px 14px 12px 0; border-bottom:1px solid var(--line-2); border-top:0;
  color:var(--body); line-height:1.55; vertical-align:top; }
.docbody table.t td:first-child{ color:var(--ink); white-space:nowrap; font-weight:500; }
.ep{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:13px;
     padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-s);
     background:var(--white); margin-bottom:8px; color:var(--ink-2); }
.m{ font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:3px 7px; border-radius:4px; flex:none; }
.get{ background:var(--blue-pale-2); color:var(--blue-d); }
.post{ background:var(--ok-bg); color:var(--ok); }
.patch{ background:var(--warn-bg); color:var(--warn); }
@media (max-width:980px){
  .doc{ grid-template-columns:minmax(0,1fr); gap:34px; }
  .side{ position:static; flex-direction:row; flex-wrap:wrap; gap:4px; }
  .side .grp{ display:none; }
  .docbody table.t td:first-child{ white-space:normal; word-break:break-word; }
  .ep{ flex-wrap:wrap; } .ep span{ word-break:break-all; }
}

/* ---------- forms ------------------------------------------------------- */
.form .fld{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.form .fld:last-of-type{ margin-bottom:22px; }
.form label{ font-size:13.5px; font-weight:500; color:var(--ink); }
.inp{ width:100%; height:46px; padding:0 14px; border:1px solid var(--line); border-radius:7px;
      background:var(--white); font-family:inherit; font-size:15px; color:var(--ink);
      transition:border-color .16s var(--ease), box-shadow .16s var(--ease); }
.inp:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,75,196,.13); }
textarea.inp{ height:auto; padding:12px 14px; resize:vertical; line-height:1.55; }
select.inp{ appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2378838F' stroke-width='1.8' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 13px center; background-size:14px; padding-right:38px; }
.form .grid.g2 .fld{ margin-bottom:0; }

/* unresolved placeholder, deliberately conspicuous until go-live */
.ph{ display:inline-block; font-size:11.5px; letter-spacing:.04em; color:var(--warn);
     background:var(--warn-bg); border:1px dashed var(--warn-line); border-radius:5px;
     padding:1px 6px; }

/* ---------- legal prose ------------------------------------------------- */
.legal{ max-width:78ch; }
.legal h2{ font-size:22px; margin:44px 0 12px; }
.legal h3{ font-size:17.5px; margin:28px 0 8px; }
.legal p, .legal li{ font-size:16px; line-height:1.68; }
.legal ul, .legal ol{ padding-left:22px; margin:0 0 18px; }
.legal li{ margin-bottom:9px; }
.legal a{ text-decoration:underline; text-underline-offset:2px; }

/* card that is itself a link */
a.card{ color:inherit; }
a.card:hover{ color:inherit; }
a.card .dlink{ color:var(--blue); }

@media (max-width:620px){
  .stack-i{ grid-template-columns:auto minmax(0,1fr); }
  .stack-w{ grid-column:2; font-size:10.5px; margin-top:6px; }
  .stack-out{ flex-direction:column; align-items:flex-start; gap:6px; }
  .shape-i .tag{ align-self:flex-start; }
  .otp-head{ align-items:center; }
}

/* a row-spanning card, so a set that does not divide evenly has no orphan */
.grid.g3 > .card-wide{ grid-column:1 / -1; flex-direction:row; align-items:flex-start; gap:20px; }
.grid.g3 > .card-wide > div{ display:flex; flex-direction:column; gap:8px; }
.grid.g3 > .card-wide .ico{ margin-bottom:0; }
.grid.g3 > .card-wide p{ max-width:92ch; }
@media (max-width:920px){ .grid.g3 > .card-wide{ flex-direction:column; gap:10px; } }

/* below-hero On This Page strip, for pages whose hero carries a figure */
.otp-strip{ background:var(--white); border-bottom:1px solid var(--line); }
.otp-strip .wrap{ padding-block:0 30px; }
.otp-strip .otp{ box-shadow:none; border-color:var(--line); background:var(--near); }

/* provenance dots, coloured by source class */
.prov-c{ border-color:var(--warn) !important; }
.prov-p{ border-color:var(--ok) !important; }

/* ==========================================================================
   Final pass: about 10 percent more colour and depth. White stays dominant;
   blue is spent on hierarchy, not decoration.
   ========================================================================== */

/* --- section heading rail gets a blue accent, so hierarchy reads by colour */
.sec-2 > .sec-h{ position:relative; padding-top:18px; }
.sec-2 > .sec-h::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:3px;
  border-radius:2px; background:var(--blue);
}
.sec .wrap > h2{ position:relative; padding-top:18px; }
.sec .wrap > h2::before, .sec-s .wrap > h2::before{
  content:""; position:absolute; top:0; left:0; width:34px; height:3px;
  border-radius:2px; background:var(--blue);
}
.sec-s .wrap > h2{ position:relative; padding-top:18px; }

/* --- the pale blue band reads as a deliberate technical zone --------------- */
.g-pale{ border-top:1px solid var(--blue-line); border-bottom:1px solid var(--blue-line); }
.g-pale .card{ border-color:var(--blue-line); }
.g-pale .panel, .g-pale .tw, .g-pale .tl, .g-pale .gate, .g-pale .ws{ border-color:var(--blue-line); }
.g-near{ border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }

/* --- icon and number containers: a ring rather than a flat fill ----------- */
.ico{
  background:var(--blue-pale-2);
  box-shadow:inset 0 0 0 1px var(--blue-line), 0 1px 2px rgba(27,75,196,.08);
}
.stack-n{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.5), 0 1px 2px rgba(27,75,196,.12); }
.stack-i.base .stack-n{ box-shadow:0 2px 6px rgba(15,26,38,.22); }
.step-n{
  display:inline-flex; align-items:center; height:22px; padding-inline:9px;
  border-radius:999px; background:var(--blue-pale-2); border:1px solid var(--blue-line);
  color:var(--blue-d); align-self:flex-start;
}

/* --- cards: a blue hairline on hover, still restrained -------------------- */
.card{ position:relative; overflow:hidden; }
.card-lift::after{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--blue);
  opacity:0; transition:opacity .2s var(--ease);
}
.card-lift:hover::after{ opacity:1; }
.card-lift:hover{ border-color:var(--blue-line); }

/* --- technical panels: pale blue heads ------------------------------------ */
.panel-head{ background:var(--blue-pale); border-bottom-color:var(--blue-line); }
.panel{ border-color:var(--blue-line); }
.ws thead th{ background:var(--blue-pale); border-bottom-color:var(--blue-line); }
.ws-foot{ background:var(--blue-pale); border-top-color:var(--blue-line); }
.gate-top{ background:var(--blue-pale); border-bottom-color:var(--blue-line); }
.gate{ border-color:var(--blue-line); }
thead th{ background:var(--blue-pale); border-bottom-color:var(--blue-line); color:var(--blue-d); }
.tw{ border-color:var(--blue-line); }

/* --- effective date / version diagram ------------------------------------- */
.tl{ border-color:var(--blue-line); }
.tl-k{ background:var(--blue-pale); color:var(--blue-d); border-right-color:var(--blue-line); }
.tl-bar{ background:var(--blue-pale); box-shadow:inset 0 0 0 1px var(--blue-line); }
.tl-live{ box-shadow:0 2px 8px -2px rgba(27,75,196,.45); }

/* --- process chains ------------------------------------------------------- */
.flow-i{ border-color:var(--blue-line); }
.flow-i .label{ color:var(--blue-d); }
.flow-i + .flow-i::before{ border-color:var(--blue); }
.stack-i{ border-color:var(--blue-line); }
.shape-i{ border-color:var(--blue-line); }

/* --- API request / result panels ------------------------------------------ */
.pre-wrap{ box-shadow:0 1px 2px rgba(22,32,43,.05), 0 18px 40px -22px rgba(15,26,38,.5); }
.pre-head{ background:#17293C; color:#9FB4CA; border-bottom-color:#22394F; }
.rr-arrow svg{ color:var(--blue); }

/* --- On this page --------------------------------------------------------- */
.otp{ border-color:var(--blue-line); }
.otp-head{ padding-bottom:8px; border-bottom:1px solid var(--blue-line); margin-bottom:2px; }
.otp-head .label{ color:var(--blue-d); }
.otp a::before{ color:var(--blue); opacity:.65; }
.otp a{ position:relative; padding-left:0; }
.otp li{ position:relative; }
.otp li::before{
  content:""; position:absolute; left:-24px; top:10px; bottom:10px; width:2px;
  background:var(--blue); border-radius:2px; opacity:0; transition:opacity .16s var(--ease);
}
.otp li:hover::before{ opacity:1; }
.otp{ padding-inline:24px; }

/* --- contained CTA: a blue edge so navy is not just a dark box ------------- */
.ctaband-in{
  border-top:3px solid var(--blue);
  box-shadow:0 30px 60px -34px rgba(15,26,38,.5), 0 0 0 1px rgba(27,75,196,.28);
}

/* --- breadcrumb and the disclosure block ---------------------------------- */
.crumb{ padding-block:18px 0; }
.disclose{ border-color:var(--blue-line); background:var(--blue-pale); }

/* --- notes ---------------------------------------------------------------- */
.note{ border-left:3px solid var(--blue); }

/* utility heroes carry no figure and no contents card, so they are set tighter
   rather than leaving a third of the canvas empty under a short headline */
.hero-compact .wrap{ padding-block:56px 60px; }
.hero-compact .hero-narrow{ max-width:62ch; }
.hero-compact h1{ font-size:clamp(31px,3.1vw,42px); }

/* --- hero composition: a 7/5 split, so a headline is not squeezed into four
       lines by an artificial width cap ------------------------------------- */
.hero-split{ grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); gap:56px; }
.hero-split h1{ font-size:clamp(32px,3.6vw,47px); }
.hero-split .hero-copy{ max-width:56ch; }

/* the contents strip follows the hero directly, so the hero does not need its
   full bottom padding as well */
.hero:has(+ .otp-strip) .wrap{ padding-block:72px 44px; }

/* connector lines in the layer stack read as part of the diagram */
.stack-i + .stack-i::before, .stack-out::before{ background:var(--blue-line); width:2px; left:33px; }
.stack-i + .stack-i::after{ border-color:var(--blue); border-width:2px; }

/* --------------------------------------------------------------- section coda
   A prose block that follows a full-width band used to stay in the narrow
   right column, leaving the left third of the canvas empty for the whole of
   its height. Substantial continuations now use the canvas in two text
   columns, which keeps the measure readable and the composition intentional. */
.sec-2 > .sec-cont{
  grid-column:1 / -1;
  columns:2;
  column-gap:72px;
  margin-top:30px;
}
.sec-2 > .sec-cont > *{ break-inside:avoid; }
.sec-2 > .sec-cont > h3{ break-after:avoid; }
.sec-2 > .sec-cont > *:first-child{ margin-top:0; }
.sec-2 > .sec-cont > .sub-h{ margin-top:30px; }
.sec-2 > .sec-cont > .sub-h:first-child{ margin-top:0; }
@media (max-width:900px){
  .sec-2 > .sec-cont{ columns:1; margin-top:22px; }
}
/* Where the coda is a set of sub-headed topics, each topic owns a column, so
   balancing never strands a heading under the tail of its neighbour. */
.sec-2 > .sec-cont-g{
  columns:auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:34px 72px;
  align-items:start;
}
.sec-2 > .sec-cont-g > .cont-col > *:first-child{ margin-top:0; }
@media (max-width:900px){
  .sec-2 > .sec-cont-g{ grid-template-columns:minmax(0,1fr); gap:26px; }
}
.sec-w > .sub-h:first-child{ margin-top:0; margin-bottom:18px; }
/* A pull line from the copy: the same standing-note treatment, set slightly
   larger, because in the source it is an emphasis line rather than an aside. */
.note-pull{ font-size:17px; line-height:1.55; color:var(--ink); }

/* ------------------------------------------------------------ legal contents
   Policy pages keep a readable prose measure and spend the space beside it on
   a sticky section list, rather than leaving a third of the canvas empty. */
.legal-wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 248px;
  gap:64px;
  align-items:start;
}
.legal-toc{
  position:sticky; top:96px;
  border-left:2px solid var(--blue-line);
  padding-left:18px;
}
.legal-toc-h{
  font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue-d); font-weight:600; margin:0 0 12px;
}
.legal-toc ol{ list-style:none; margin:0; padding:0; counter-reset:ltoc; }
.legal-toc li{ counter-increment:ltoc; margin:0 0 9px; }
.legal-toc a{
  display:block; font-size:13.5px; line-height:1.4; color:var(--muted);
  text-decoration:none; position:relative;
}
.legal-toc a::before{
  content:counter(ltoc) ". "; color:var(--blue-line); font-variant-numeric:tabular-nums;
}
.legal-toc a:hover{ color:var(--blue); }
.legal-wrap .legal h2{ scroll-margin-top:96px; }
@media (max-width:1000px){
  .legal-wrap{ grid-template-columns:minmax(0,1fr); gap:0; }
  .legal-toc{ position:static; order:-1; border-left:0; padding-left:0;
              border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:28px; }
  .legal-toc ol{ display:flex; flex-wrap:wrap; gap:6px 22px; }
  .legal-toc li{ margin:0; }
}

/* A utility hero that carries a standfirst sets it beside the headline rather
   than stacking both inside a narrow cap, which left more than a third of the
   canvas empty and broke the standfirst at about 48 characters. Pages whose
   hero is only an eyebrow and a title (the policies) keep the stacked form. */
.hero-compact .hero-narrow:has(> .hero-copy){
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  column-gap:64px;
  align-items:start;
}
.hero-compact .hero-narrow:has(> .hero-copy) > .eyebrow{ grid-column:1; grid-row:1; }
.hero-compact .hero-narrow:has(> .hero-copy) > h1{
  grid-column:1; grid-row:2; margin:12px 0 0;
}
.hero-compact .hero-narrow:has(> .hero-copy) > .hero-copy{
  grid-column:2; grid-row:2; margin-top:0; max-width:52ch; padding-top:18px;
}
/* Anything after the standfirst (the 404 route buttons) stays under it in the
   same column, so the reading order is headline, explanation, then actions. */
.hero-compact .hero-narrow:has(> .hero-copy) > .cta-row{
  grid-column:2; grid-row:3; align-self:start; margin-top:22px;
}
@media (max-width:900px){
  .hero-compact .hero-narrow:has(> .hero-copy){ display:block; }
  .hero-compact .hero-narrow:has(> .hero-copy) > .hero-copy{ margin-top:20px; }
}

/* Anchored headings must clear the sticky header rather than landing under
   it. scroll-margin only affects scroll-into-view, so it is safe site-wide. */
[id]{ scroll-margin-top:92px; }

/* ==========================================================================
   Responsive, restated
   The facelift block above sets hero and section composition unconditionally
   and is declared after the responsive section, so it was winning at phone
   width and holding the hero in two columns. These restate the stacking
   rules last, where they belong.
   ========================================================================== */
@media (max-width:1180px){
  .hero-split{ gap:44px; }
}
@media (max-width:920px){
  .hero-split{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .hero-split .hero-copy{ max-width:none; }
  .hero:has(+ .otp-strip) .wrap{ padding-block:56px 36px; }
  .sec-2 > .sec-cont{ columns:1; }
  .sec-2 > .sec-cont-g{ grid-template-columns:minmax(0,1fr); gap:26px; }
  .legal-wrap{ grid-template-columns:minmax(0,1fr); gap:0; }
}
/* A card's footer fact: the column name, then the value it carries. */
.card-meta{
  margin-top:auto; padding-top:14px; margin-bottom:0;
  border-top:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
}
.card-meta .label{ margin:0; }
.card-meta strong{ font-size:13.5px; font-weight:600; color:var(--ink); text-align:right; }

/* ---------- v5: nav line groups and availability tags ------------------ */
.navcol{ display:flex; flex-direction:column; gap:2px; }
.navgrp{ display:block; padding:8px 12px 4px; }
.navdev{
  display:inline-block; font-style:normal; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.5; white-space:nowrap;
  color:var(--warn); background:var(--warn-bg); border:1px solid var(--warn-line);
  border-radius:999px; padding:0 7px; margin-left:6px; vertical-align:1px;
}
.msub{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:10px 0 2px; }
.ftr .navdev{ background:transparent; color:inherit; border-color:currentColor; opacity:.72; margin-left:4px; }
.hero .devnote{ margin:0 0 26px; padding:14px 18px; font-size:15px; }
.devnote .pill{ margin-right:8px; vertical-align:1px; }
.prodmark{ vertical-align:-5px; margin-right:11px; border-radius:7px; }
.eyebrow .prodmark{ width:18px; height:18px; vertical-align:-4px; margin-right:7px; border-radius:5px; }
@media (max-width: 900px){ .sec-h h2 .prodmark{ display:block; margin:0 0 12px; vertical-align:baseline; } }
@media (max-width: 620px){ .docbody table.t td code{ white-space:normal; word-break:break-all; } }

/* ---------- ARIA: ownership lane ---------------------------------------- */
.arl{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
      overflow:hidden; box-shadow:var(--shadow-1); }
.arl-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px;
           padding:15px 20px; background:var(--near); border-bottom:1px solid var(--line); }
.arl-head .label{ margin:0; }
.arl-leg{ display:flex; flex-wrap:wrap; gap:8px; }
.arl-b{ display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
        text-transform:uppercase; font-weight:600; padding:4px 9px; border-radius:5px; white-space:nowrap; }
.arl-b.aria{ background:var(--blue-pale-2); color:var(--blue-d); border:1px solid var(--blue-line); }
.arl-b.sr  { background:var(--white);       color:var(--ink-2);  border:1px solid var(--line); }
.arl-b.you { background:var(--navy);        color:#fff;          border:1px solid var(--navy); }
.arl-i{ display:grid; grid-template-columns:150px minmax(0,1fr); border-top:1px solid var(--line-2); }
.arl-i:first-of-type{ border-top:0; }
.arl-who{ padding:19px 16px 19px 20px; border-right:1px solid var(--line-2); background:var(--near);
          display:flex; align-items:flex-start; }
.arl-i.human .arl-who{ background:var(--blue-pale); }
.arl-body{ padding:18px 22px; min-width:0; }
.arl-body b{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.arl-body p{ margin:5px 0 0; font-size:14.5px; line-height:1.55; color:var(--body); }
.arl-body .st{ display:inline-block; margin-top:9px; }
.arl-foot{ padding:14px 20px; border-top:1px solid var(--line); background:var(--blue-pale);
           font-size:14px; line-height:1.55; color:var(--ink-2); }

/* ARIA: capability heads */
.arcap{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.arcap h3{ font-size:18px; }
.arcap .pill{ position:relative; top:-1px; }

@media (max-width: 720px){
  .arl-i{ grid-template-columns:1fr; }
  .arl-who{ border-right:0; border-bottom:1px solid var(--line-2); padding:12px 18px; }
  .arl-body{ padding:15px 18px; }
  .arl-head{ padding:14px 18px; }
  .arl-foot{ padding:13px 18px; }
}

/* ---------- ARIA: capability blocks ------------------------------------- */
.arx{ border:1px solid var(--line); border-radius:var(--radius); background:var(--white);
      overflow:hidden; box-shadow:var(--shadow-1); }
.arx-i{ display:grid; grid-template-columns:minmax(0,.32fr) minmax(0,.68fr); gap:0 52px;
        padding:38px 34px; border-top:1px solid var(--line); }
.arx-i:first-child{ border-top:0; }
.arx-k .n{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
           text-transform:uppercase; color:var(--blue); font-weight:600; }
.arx-k h3{ font-size:24px; line-height:1.15; letter-spacing:-.026em; margin-top:8px; }
.arx-k .say{ display:block; margin-top:10px; font-size:15.5px; line-height:1.5; color:var(--ink-2); font-weight:500; }
.arx-b{ min-width:0; }
.arx-b p{ margin:0; font-size:16px; line-height:1.62; }
.arx-b p + p{ margin-top:12px; }
.arx-q{ display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.arx-q span{ font-size:13.5px; line-height:1.4; background:var(--blue-pale); border:1px solid var(--blue-line);
             color:var(--ink-2); padding:7px 13px; border-radius:999px; }
.arx-foot{ padding:18px 34px; border-top:1px solid var(--line); background:var(--near);
           font-size:15px; line-height:1.55; color:var(--ink-2); }

/* ARIA: decision groups */
.ardg b{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); }
.ardg span{ display:block; margin-top:7px; font-size:14.5px; line-height:1.55; color:var(--body); }

@media (max-width: 860px){
  .arx-i{ grid-template-columns:1fr; gap:18px; padding:30px 24px; }
  .arx-k h3{ font-size:22px; }
  .arx-foot{ padding:16px 24px; }
}
@media (max-width: 480px){
  .arx-i{ padding:26px 18px; }
  .arx-foot{ padding:15px 18px; }
}

/* ---------- A.R.I.A. brand lockup --------------------------------------- */
.arbrand{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.arbrand img{ width:40px; height:40px; border-radius:10px; display:block; flex:none; }
.arbrand b{ display:block; font-size:19px; font-weight:700; color:var(--ink);
            line-height:1.1; letter-spacing:.012em; }
.arbrand span{ display:block; margin-top:5px; font-size:13px; line-height:1.4;
               color:var(--body); letter-spacing:.005em; }

/* A.R.I.A. homepage band */
.arband{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px 34px; align-items:center;
         border:1px solid var(--blue-line); border-radius:var(--radius); background:var(--blue-pale);
         padding:26px 30px; }
.arband-id{ display:flex; align-items:center; gap:13px; }
.arband-id img{ width:38px; height:38px; border-radius:9px; display:block; flex:none; }
.arband-id b{ display:block; font-size:17px; font-weight:700; color:var(--ink);
              line-height:1.1; letter-spacing:.012em; }
.arband-id span{ display:block; margin-top:4px; font-size:12px; line-height:1.35;
                 color:var(--body); white-space:nowrap; }
.arband-b{ min-width:0; }
.arband-b p{ margin:0; font-size:15.5px; line-height:1.58; color:var(--ink-2); }
.arband-b p strong{ color:var(--ink); font-weight:600; }
.arband-seq{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.arband-seq span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
                  font-weight:600; color:var(--blue-d); background:var(--white);
                  border:1px solid var(--blue-line); border-radius:999px; padding:4px 11px; }
.arband-seq i{ font-style:normal; color:var(--blue); font-size:13px; line-height:1; }
.arband-c{ justify-self:end; }

@media (max-width: 1040px){
  .arband{ grid-template-columns:1fr; gap:18px; padding:24px 24px; }
  .arband-c{ justify-self:start; }
  .arband-id span{ white-space:normal; }
}
@media (max-width: 480px){
  .arband{ padding:22px 18px; }
  .arbrand img{ width:36px; height:36px; }
  .arbrand b{ font-size:18px; }
  .arbrand span{ font-size:12.5px; }
}

/* ==========================================================================
   Product demonstration videos (v8.2). Additive only: a 16:9 box that shows
   the YouTube thumbnail and a play button; the player is inserted on click,
   so nothing is requested from YouTube until the visitor chooses to play.
   ========================================================================== */
.vid{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius);
      border:1px solid var(--line); background:var(--navy); box-shadow:var(--shadow-2); }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.vid-play{ position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0;
           background:none; cursor:pointer; display:block; font:inherit; }
.vid-play img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-btn{ position:absolute; left:50%; top:50%; width:68px; height:68px; margin:-34px 0 0 -34px;
          border-radius:50%; background:var(--white); color:var(--blue); display:flex; align-items:center;
          justify-content:center; box-shadow:var(--shadow-3);
          transition:transform .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease); }
.vid-btn svg{ width:30px; height:30px; margin-left:3px; }
.vid-play:hover .vid-btn, .vid-play:focus-visible .vid-btn{ transform:scale(1.06); background:var(--blue); color:#fff; }
.vid-play:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.vid-nojs{ position:absolute; left:16px; bottom:14px; color:#fff; font-size:14.5px; font-weight:500; }
.vidcard .vid{ box-shadow:none; }
.vidcard .vid-btn{ width:54px; height:54px; margin:-27px 0 0 -27px; }
.vidcard .vid-btn svg{ width:24px; height:24px; }
.vid-run{ font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.13em;
          text-transform:uppercase; color:var(--muted); }
.vid-chap{ margin:0 0 1.05em; padding-left:1.3em; }
.vid-chap li{ margin-bottom:8px; line-height:1.55; }
.vid-pend{ position:absolute; inset:0; display:none; flex-direction:column; align-items:center;
           justify-content:center; gap:10px; padding:24px; text-align:center; color:#94A3B3;
           font-size:15px; line-height:1.5; }
.vid-pend .label{ color:#C8D6F2; }
.vid-pending .vid-pend{ display:flex; }
.vid-play[hidden], .vidcard[hidden], .vid-sec[hidden], .otp li[hidden]{ display:none !important; }
@media (max-width:620px){
  .vid-btn{ width:56px; height:56px; margin:-28px 0 0 -28px; }
}