/* Lithnet web design system — tokens and components (light theme) */
:root{
  --blue:#006fb0;--blue-hover:#005a91;--blue-deep:#0d4f80;--blue-tint:#eaf3fa;--blue-tint-2:#d6e8f5;--blue-line:#b9d6ec;
  --navy:#0b2238;--navy-2:#13314f;
  --ink:#0f1c2b;--ink-2:#3a4959;--ink-3:#566577;
  --line:#dbe3eb;--line-2:#c3cfdb;
  --bg:#ffffff;--bg-2:#f5f8fb;--bg-3:#ebf1f6;
  --grey-mark:#8794a3;
  --ok:#17784a;--ok-tint:#e7f4ed;--warn:#9a5b06;--warn-tint:#fbf1e1;--bad:#b42318;--bad-tint:#fbebe9;
  --font:'Geist',ui-sans-serif,system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:6px;--r:10px;--r-lg:16px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --maxw:1200px;--gutter:32px;
  --shadow:0 1px 2px rgba(11,34,56,.06),0 8px 24px -12px rgba(11,34,56,.18);
  --heading:#0b2238;--surface:#ffffff;--btn:#006fb0;--btn-hover:#005a91;--node-line:#0b2238;
  --ok-ink:#0f4f31;--ok-line:#c5e4d2;--warn-line:#f0dcb8;--bad-ink:#7d1810;--bad-line:#f1c9c4;
  --hdr-bg:rgba(255,255,255,.96);--hl:#f7fbfe;--zone-bg:#fbfdff;--shot-line:rgba(11,34,56,.12);--shot-filter:none;--band-edge:transparent;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0}
.site{font-family:var(--font);color:var(--ink);background:var(--bg);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;min-height:100vh}
/* Text avoids a last line of one short word (or a lone word and its arrow). Headings that balance keep that. */
.site{text-wrap:pretty}
.site a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
.site a:hover{color:var(--blue-hover)}
.site :focus-visible{outline:3px solid #f2a93b;outline-offset:2px;border-radius:4px}
.site img,.site video{max-width:100%;display:block}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:-.01em}
code{font-family:var(--mono);font-size:.86em;background:var(--bg-3);padding:1px 6px;border-radius:4px;color:var(--heading)}
/* Inline code and file paths are short tokens: each moves to the next line whole rather than breaking at a hyphen. */
p code,li code,p .mono{white-space:nowrap}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:880px}
.section{padding:var(--s9) 0}
.section--sm{padding:var(--s8) 0}
.section--tint{background:var(--bg-2)}
.section--blue{background:var(--blue-tint)}
.section--line{border-top:1px solid var(--line)}
/* Two plain sections in a row share one gap: without a background or rule between them, their paddings
   would add up to a double gap. */
.section:not(.section--tint):not(.section--blue):not(.section--navy)+.section:not(.section--tint):not(.section--blue):not(.section--navy):not(.section--line){padding-top:0}
.section--navy{background:var(--navy);color:#e8eff6}
.section--navy a{color:#9fd0f2}.section--navy a:hover{color:#c9e5f8}
.section--navy .h2,.section--navy .h3{color:#fff}
.section--navy .lead,.section--navy p{color:#c5d3e0}
.stack{display:flex;flex-direction:column;gap:var(--s4)}
/* Long-form legal text: the stack gap spaces the paragraphs, so they carry no margins of their own. */
.legal p{margin:0}
.stack-lg{display:flex;flex-direction:column;gap:var(--s6)}
.row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s8);align-items:center}
.split--even{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--top{align-items:start}
.sec-head{display:flex;flex-direction:column;gap:var(--s3);max-width:760px;margin-bottom:var(--s7)}

/* type */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);font-weight:500;margin:0}
.h1{font-size:52px;line-height:1.08;letter-spacing:-.025em;font-weight:650;margin:0;color:var(--heading);text-wrap:balance}
.h1--md{font-size:44px}
.h1 .sub{display:block;font-weight:500;color:var(--ink-2);font-size:.62em;letter-spacing:-.015em;line-height:1.2;margin-top:12px}
.h2{font-size:34px;line-height:1.15;letter-spacing:-.02em;font-weight:650;margin:0;color:var(--heading);text-wrap:balance}
.h3{font-size:20px;line-height:1.3;letter-spacing:-.01em;font-weight:620;margin:0;color:var(--heading)}
/* A heading in a card: one step larger than .h3. */
.h3--card{font-size:22px}
.h4{font-size:15px;line-height:1.4;font-weight:620;margin:0;color:var(--heading)}
.lead{font-size:20px;line-height:1.55;color:var(--ink-2);margin:0;max-width:66ch}
.body{margin:0;max-width:68ch;color:var(--ink-2)}
.small{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}
.caption{font-size:14px;line-height:1.5;color:var(--ink-3);margin:0}
.muted{color:var(--ink-3)}
.status{font-family:var(--font);font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0}
.status b{color:var(--heading);font-weight:600}
.status .dot{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.list li{position:relative;padding-left:26px;color:var(--ink-2)}
.list li::before{content:"";position:absolute;left:2px;top:.62em;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) translateY(-4px)}
.list--dash li::before{border:0;width:10px;height:2px;background:var(--ink-3);transform:none;top:.8em}
/* An item that is not included shows only its grey dash (.nil), in the place of the tick. */
.list li.list__nil::before{content:none}
.list li.list__nil>.nil{position:absolute;left:0;top:.8em}
.list--sm li{font-size:15px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:8px;font-family:var(--font);font-size:16px;font-weight:600;line-height:1;text-decoration:none!important;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn--primary{background:var(--btn);color:#fff!important;border-color:var(--btn)}
.btn--primary:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.btn--secondary{background:var(--surface);color:var(--blue)!important;border-color:var(--blue-line)}
.btn--secondary:hover{border-color:var(--blue);background:var(--blue-tint)}
.btn--sm{min-height:38px;padding:0 14px;font-size:14px;border-radius:7px}
/* A button in a card wraps its label rather than run past the card edge. */
.card .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:8px;padding-bottom:8px}
.btn--block{width:100%;white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
.btn--light{background:#fff;color:#0b2238!important;border-color:#fff}
.btn--ghost-light{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.45)}
.btn--ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;align-content:flex-start}
/* Inline, so a link that wraps keeps its arrow after the last word: the word joiner and no-break space stop
   the arrow wrapping onto a line of its own (a.card.arrow-link stays a flex row with the arrow at the end). */
.arrow-link{font-weight:600;text-decoration:none!important;display:inline}
.arrow-link::after{content:"\2060\00a0→";position:relative;left:0;transition:left .15s}
.arrow-link:hover::after{left:3px}
.ext::after{content:"\2060\00a0↗";font-size:.85em}

/* cards & panels */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.card--tint{background:var(--bg-2)}
.card--flat{box-shadow:none}
.card--accent{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--shadow)}
figure.card>figcaption:last-child{margin-top:auto}
.card--sm{padding:var(--s5);gap:var(--s3);border-radius:var(--r)}
.panel{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);padding:var(--s6)}
.divider{height:1px;background:var(--line);border:0;margin:0}
.label{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;padding:5px 10px;border-radius:999px;background:var(--blue-tint);color:var(--blue-deep);font-weight:500;width:fit-content}
.pill--free{background:var(--ok-tint);color:var(--ok)}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:var(--hdr-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);font-family:var(--font)}
.hdr__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);height:72px;display:flex;align-items:center;gap:28px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none!important;color:var(--heading)!important;font-weight:680;font-size:21px;letter-spacing:-.02em}
.logo svg{width:28px;height:28px;flex:none}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav__item{position:relative}
.nav__btn,.nav__link{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:7px;font:inherit;font-size:15px;font-weight:550;color:var(--ink)!important;background:none;border:0;cursor:pointer;text-decoration:none!important}
.nav__btn:hover,.nav__link:hover,.nav__item:focus-within .nav__btn{background:var(--bg-3)}
.nav__btn::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.6}
.menu{position:absolute;top:calc(100% + 6px);left:0;min-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;display:none;flex-direction:column}
.nav__item:hover .menu,.nav__item:focus-within .menu{display:flex}
.nav__item:hover::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.menu a{display:block;padding:9px 12px;border-radius:7px;font-size:15px;color:var(--ink)!important;text-decoration:none!important}
.menu a:hover{background:var(--blue-tint);color:var(--blue-deep)!important}
.menu small{display:block;color:var(--ink-3);font-size:13px;line-height:1.35}
.menu hr{border:0;height:1px;background:var(--line);margin:6px 4px}
.hdr__actions{display:flex;gap:10px;align-items:center}
.hdr__m{display:none}
.burger{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--heading)}
.mnav{border-top:1px solid var(--line);background:var(--surface);padding:8px 16px 24px;max-height:calc(100vh - 64px);overflow:auto}
.mnav__group{padding:12px 0;border-bottom:1px solid var(--line)}
.mnav__group a:not(.btn){display:block;padding:10px 0;font-size:16px;color:var(--ink)!important;text-decoration:none!important}
.mnav__title{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:4px 0}
.hdr--min .hdr__in{height:64px;justify-content:space-between}

/* hero */
.hero{padding:72px 0 80px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);border-bottom:1px solid var(--line)}
.hero__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:22px}

/* product imagery: "stage" treatment */
.stage{background:linear-gradient(160deg,#1f6fb2 0%,#0d4f80 100%);border-radius:var(--r-lg);padding:28px;position:relative;overflow:hidden}
.stage--quiet{background:var(--blue-tint);border:1px solid var(--blue-tint-2)}
.shot{border-radius:var(--r);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.08),0 18px 40px -18px rgba(5,25,45,.55);background:var(--surface);border:1px solid var(--shot-line)}
.shot img,.shot video{width:100%;height:auto}
.shot--phone{border-radius:22px;border:6px solid #0b2238;background:#0b2238}
.shot--phone img{border-radius:16px}
.shot-cap{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14px;color:var(--ink-3)}
.callout-n{position:absolute;width:28px;height:28px;border-radius:50%;background:#f2a93b;color:#1b1203;font-family:var(--mono);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
.n-inline{flex:none;width:22px;height:22px;border-radius:50%;background:#f2a93b;color:#1b1203;font-family:var(--mono);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.video-ctl{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:999px;background:rgba(11,34,56,.78);color:#fff;border:0;font:inherit;font-size:13px;font-weight:550;cursor:pointer}

/* proof band */
.proof{border-bottom:1px solid var(--line);background:var(--bg)}
/* The proof band's bottom border already separates it from a lined section below; avoid a 2 px double rule. */
.proof + .section--line{border-top:0}
.proof__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.proof__item{padding:26px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.proof__item:first-child{border-left:0;padding-left:0}
.proof__k{font-size:22px;font-weight:650;color:var(--heading);letter-spacing:-.015em;line-height:1.2}
.proof__v{font-size:14px;color:var(--ink-3);line-height:1.45}
.logo-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:0 0 26px}

/* placeholder */
.review{font-family:var(--mono);font-size:11px;background:#efe6ff;color:#4b2a8f;padding:1px 6px;border-radius:4px;vertical-align:middle}

/* feature grid */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line);gap:1px}
.feature{background:var(--surface);padding:30px 28px;display:flex;flex-direction:column;gap:12px}
.ico{width:40px;height:40px;border-radius:10px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.ico svg{width:22px;height:22px}
.card-head{display:flex;align-items:center;gap:14px}

/* step sequence (house style) */
.steps{display:flex;flex-direction:column;gap:20px}
.step{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center;background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:var(--r-lg);padding:28px 28px 28px 40px}
.step__n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--blue-deep);letter-spacing:.04em}
.step__media{display:flex;justify-content:center;align-items:center;gap:16px;padding:4px 0}
.step__media .shot{max-width:520px}
.step__media .shot--phone{max-width:200px}

/* spec panel */
.spec{display:grid;grid-template-columns:220px minmax(0,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:0}
.spec dt,.spec dd{margin:0;padding:14px 20px;border-top:1px solid var(--line);font-size:15px}
.spec dt{font-family:var(--mono);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);background:var(--bg-2);padding-top:16px}
.spec dt:first-of-type,.spec dd:first-of-type{border-top:0}

/* tables */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-lg);overflow:auto;background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:14px 18px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:0;background:var(--bg-2);font-size:14px;font-weight:620;color:var(--heading);position:sticky;top:0;z-index:2}
.tbl tbody th{font-weight:550;color:var(--heading);width:34%}
.tbl td{color:var(--ink-2)}
.tbl .yes{color:var(--ok);font-weight:600}
.tbl .no{color:var(--ink-3)}
.tbl .grp th{background:var(--bg-3);font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);padding:9px 18px}
.tbl--hl td:last-child{background:var(--hl)}
.tbl--sticky thead th{top:72px}
.tbl-wrap--visible{overflow:visible}
.tbl-wrap--visible thead th:first-child{border-top-left-radius:var(--r-lg)}
.tbl-wrap--visible thead th:last-child{border-top-right-radius:var(--r-lg)}
/* Clip shaded cells to the rounded frame (overflow stays visible so the header row can stick). */
.tbl-wrap--visible>.tbl{clip-path:inset(0 round calc(var(--r-lg) - 1px))}
/* A table of four text columns (the security leaders control table). The row heading's default width (34%) leaves
   the short control names mostly empty and squeezes the requirement text into tall rows, so the columns get set
   widths. On a phone the table becomes stacked cards (.tbl--cards), so the widths apply from tablet width up. */
@media (min-width:761px){
  .tbl--cols4 th:nth-child(1){width:20%}
  .tbl--cols4 th:nth-child(2){width:24%}
  .tbl--cols4 th:nth-child(3){width:30%}
  .tbl--cols4 th:nth-child(4){width:26%}
}

/* faq */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:18px;color:var(--heading);position:relative;text-wrap:balance}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:24px;font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 22px;color:var(--ink-2);max-width:70ch}

/* callouts */
.note{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.note--warn{background:var(--warn-tint);border-color:var(--warn-line)}
.note--error{background:var(--bad-tint);border-color:var(--bad-line);color:var(--bad-ink)}
/* The "write to us" line with its Talk to us button (TalkToUs), under a closing band or after a pricing page's FAQ. */
.note--talk{margin-top:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* scope panel */
.scope{border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;background:var(--surface)}

/* forms */
.form{display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:15px;font-weight:600;color:var(--heading)}
.field .hint{font-size:13px;color:var(--ink-3)}
.input,.select,.textarea{font:inherit;font-size:16px;height:48px;padding:0 14px;border:1.5px solid var(--line-2);border-radius:8px;background:var(--surface);color:var(--ink);width:100%}
.textarea{height:120px;padding:12px 14px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,111,176,.18)}
.fields2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.privacy{font-size:13px;color:var(--ink-3);margin:0}

/* pricing */
.price{font-size:44px;font-weight:680;letter-spacing:-.03em;color:var(--heading);line-height:1;font-variant-numeric:tabular-nums lining-nums}
/* A price lockup is a wrapping row: when "a year…" moves to its own line it starts at the left edge. */
.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
.price small{font-size:16px;font-weight:500;color:var(--ink-3);letter-spacing:0;display:inline-block;line-height:1.35}
.price-from{font-size:15px;color:var(--ink-3);font-weight:500}
.config{background:var(--navy);color:#e6eef6;border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column;gap:20px}
.config .label{color:#9fb3c7}
.config .field label{color:#fff}
.config__out{font-size:48px;font-weight:680;letter-spacing:-.03em;color:#fff;line-height:1;font-variant-numeric:tabular-nums lining-nums}
.config__row{display:flex;gap:14px;align-items:center}
.range{flex:1;min-width:0;accent-color:#5bb3ea;height:28px}
.num-in{width:120px;height:48px;border-radius:8px;border:1.5px solid #3f5a75;background:#0f2c47;color:#fff;font:inherit;font-family:var(--mono);font-size:18px;padding:0 12px;text-align:right}
.examples{display:flex;flex-wrap:wrap;gap:8px}
.ex{font-family:var(--mono);font-size:13px;padding:7px 10px;border-radius:7px;border:1px solid #2c4864;color:#cfe0ef;background:transparent;cursor:pointer}
.ex:hover{border-color:#5bb3ea}
.volume{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:28px 32px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
/* A text-and-button panel in a narrow column puts the button under the text. 31px plus the border matches the 32px config panel beside it, so the bottom buttons line up. */
.volume--stack{grid-template-columns:minmax(0,1fr);justify-items:start;gap:18px;padding:31px}
/* When a split stacks, a column of panels joins the stack, so its last panel (the volume note) can follow the other column. */
@media (max-width:1023px){.split>.split__col{display:contents}.split>.split__col>.volume{order:1}}
.summary{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.summary__row{display:flex;justify-content:space-between;gap:16px;padding:14px 22px;border-top:1px solid var(--line);font-size:15px}
.summary > .summary__row:first-child{border-top:0}
.summary__row span:last-child{font-variant-numeric:tabular-nums;text-align:right;color:var(--heading);font-weight:550}
.summary__row span:only-child{text-align:left}
.summary__total{background:var(--bg-2);font-size:18px;font-weight:650}
/* Stripe embedded checkout (src/scripts/checkout.ts). Stripe sizes its own frame. */
.summary .h4{text-wrap:balance}
.summary .caption{text-wrap:pretty}
.summary__row span.muted{color:var(--ink-3);font-weight:400}
aside > .caption{text-wrap:pretty}
.form [aria-invalid="true"]{border-color:var(--bad)}
.form [aria-invalid="true"]:focus{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-line)}
.form .lf__error{margin:6px 0 0}
.checkout__status{margin-bottom:16px}
.progress{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:13px;color:var(--ink-3);flex-wrap:wrap}
.progress b{color:var(--blue-deep);font-weight:600}
.progress .sep{width:24px;height:1px;background:var(--line-2)}

/* diagrams */
.dg{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:32px}
.vline{width:2px;background:var(--line-2);margin:0 auto;min-height:28px}
.hline{height:2px;background:var(--line-2);width:100%;min-width:24px;flex:none}
.arr-r{display:flex;align-items:center;flex:1;min-width:40px}
.arr-r::before{content:"";flex:1;height:2px;background:currentColor}
.arr-r::after{content:"";border:6px solid transparent;border-left:8px solid currentColor;margin-right:-6px}
.arr-d{display:flex;flex-direction:column;align-items:center;min-height:36px}
.arr-d::before{content:"";flex:1;width:2px;background:currentColor;min-height:24px}
.arr-d::after{content:"";border:6px solid transparent;border-top:8px solid currentColor;margin-bottom:-6px}
.zone{border:1.5px dashed var(--blue-line);border-radius:14px;padding:22px;position:relative;background:var(--zone-bg)}
.zone__t{position:absolute;top:-11px;left:16px;background:var(--surface);padding:0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-deep)}
/* On a phone a long zone title can take two lines, so it sits inside the zone above its contents. */
@media (max-width:760px){.zone__t{position:static;display:block;padding:0;margin:0 0 18px;background:none;line-height:1.4}}

/* misc */
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.kv>div{background:var(--surface);padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.timeline{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;border-top:2px solid var(--blue)}
.tl{padding:18px 18px 0 0;position:relative;display:flex;flex-direction:column;gap:6px}
.tl::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:var(--bg);border:3px solid var(--blue)}
.tl b{font-family:var(--mono);font-size:15px;color:var(--blue-deep)}
.copy-btn{font-family:var(--mono);font-size:12px;height:30px;padding:0 10px;border-radius:6px;border:1px solid var(--line-2);background:var(--surface);color:var(--heading);cursor:pointer}
.hash{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);word-break:break-all}
.copy-btn:hover{border-color:var(--blue-line);background:var(--blue-tint)}
/* A value with its Copy button: the button follows the value, or starts the next line when the value fills the line. */
.copy-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.copy-row .copy-btn{flex:none}
.dl-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--surface)}
.meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;font-size:14px;margin:0}
.meta dt{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding-top:2px}
.meta dd{margin:0;color:var(--ink-2)}
.manifesto{font-size:24px;line-height:1.35;letter-spacing:-.015em;color:var(--heading);font-weight:500;margin:0;max-width:30em;text-wrap:pretty}
.cookie{position:fixed;left:24px;bottom:24px;z-index:60;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px;font-size:15px}
.cookie .btns .btn{flex:1}
.cta-final{background:var(--navy);border-radius:20px;padding:56px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;color:#d3dfeb}
.cta-final .h2{color:#fff}
.cta-final p{color:#c5d3e0;margin:0}
/* A short line under the closing pair (ClosingBand), for example what the free trial unlocks. */
.cta-final__note{font-size:14px;line-height:1.5;text-align:right;text-wrap:balance}

/* footer */
.ftr{background:var(--navy);color:#bcccdc;font-size:15px;padding:64px 0 32px}
.ftr a{color:#dbe6f0!important;text-decoration:none!important}
.ftr a:hover{color:#fff!important;text-decoration:underline!important}
.ftr__cols{display:grid;grid-template-columns:1.3fr;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:28px}
.ftr__col h3{font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#8ea4ba;font-weight:500;margin:0 0 14px}
.ftr__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ftr__base{margin-top:48px;padding-top:24px;border-top:1px solid #23415f;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#9fb3c7}
/* Legal line: each item stays whole and the separator ends the item, so a wrapped line never starts with one. */
.ftr__legal>span{white-space:nowrap}
.ftr__legal>span:not(:last-child)::after,.ftr__legal>span:has(+[data-consent-settings]:not([hidden]))::after{content:" ·"}
.ftr__legal>span:has(+[data-consent-settings][hidden])::after{content:none}
/* Campaign landing page footer: the legal line only, inside the page gutters. */
.ftr--min{padding:28px 0}
.ftr--min .ftr__base{margin-top:0;padding-top:0;border:0}
/* The campaign footer's journey links: the product overview and Talk to us (MinimalFooter). */
.ftr--min .ftr__links{display:flex;flex-wrap:wrap;gap:10px 28px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #23415f}
/* Short pages keep the footer at the bottom of the window. */
body>.site{display:flex;flex-direction:column}
body>.site>main{flex:1 0 auto}
body>.site>main:has(>.ftr--min){display:flex;flex-direction:column}
body>.site>main>.ftr--min{margin-top:auto}
/* The last section fills the space above that footer, so a short page shows no empty band. */
body>.site>main:has(>.ftr--min)>:nth-last-child(2){flex-grow:1}
.ftr__base .linklike{background:none;border:0;padding:0;font:inherit;color:#dbe6f0;cursor:pointer}
.ftr__base .linklike:hover{color:#fff;text-decoration:underline}
.theme-link{background:none;border:0;padding:0;font:inherit;color:#9fb3c7;cursor:pointer}
.theme-link>span{display:inline-flex;align-items:center;gap:6px}
.theme-link>span[hidden]{display:none}
.theme-link svg{width:15px;height:15px}
.theme-link:hover{color:#fff}
.ftr .logo{color:#fff!important}
.social{display:flex;gap:8px}
.social a{width:40px;height:40px;border-radius:8px;border:1px solid #2c4864;display:inline-flex;align-items:center;justify-content:center}
.social svg{width:18px;height:18px}

/* design-system board */
.sw{border-radius:10px;height:84px;border:1px solid rgba(0,0,0,.06)}


/* ===== Dark theme =====
   Production: <html data-theme="auto"> follows the visitor's system setting; data-theme="dark" or "light" forces one.
   Canvas: wrap any page in .theme-dark to preview it. */
.theme-dark,:root[data-theme="dark"]{--bg:#0b1620;--bg-2:#0f1d2a;--bg-3:#16273a;--surface:#122232;
  --ink:#e4ebf2;--ink-2:#b3c1cf;--ink-3:#93a5b7;--heading:#f3f7fb;
  --line:#24374b;--line-2:#34495f;
  --blue:#5ab4ee;--blue-hover:#86c9f4;--blue-deep:#9dd3f7;--blue-tint:#11283c;--blue-tint-2:#1a3a56;--blue-line:#2d5b80;
  --btn:#0f74b8;--btn-hover:#1883cc;--navy:#0f2b49;--navy-2:#163a5e;--node-line:#5d7690;
  --ok:#4cc38a;--ok-tint:#0f2e22;--ok-ink:#bfeed5;--ok-line:#1f5a3f;
  --warn:#f0b45a;--warn-tint:#33260f;--warn-line:#5c4518;
  --bad:#ff8f80;--bad-tint:#3a1916;--bad-ink:#ffd2cb;--bad-line:#6a2a24;
  --hdr-bg:rgba(11,22,32,.94);--hl:#10243a;--zone-bg:#0f2132;--shot-line:rgba(255,255,255,.12);--shot-filter:brightness(.94);--band-edge:#1d3d5f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.65);
  color-scheme:dark;}
@media (prefers-color-scheme:dark){:root[data-theme="auto"]{--bg:#0b1620;--bg-2:#0f1d2a;--bg-3:#16273a;--surface:#122232;
  --ink:#e4ebf2;--ink-2:#b3c1cf;--ink-3:#93a5b7;--heading:#f3f7fb;
  --line:#24374b;--line-2:#34495f;
  --blue:#5ab4ee;--blue-hover:#86c9f4;--blue-deep:#9dd3f7;--blue-tint:#11283c;--blue-tint-2:#1a3a56;--blue-line:#2d5b80;
  --btn:#0f74b8;--btn-hover:#1883cc;--navy:#0f2b49;--navy-2:#163a5e;--node-line:#5d7690;
  --ok:#4cc38a;--ok-tint:#0f2e22;--ok-ink:#bfeed5;--ok-line:#1f5a3f;
  --warn:#f0b45a;--warn-tint:#33260f;--warn-line:#5c4518;
  --bad:#ff8f80;--bad-tint:#3a1916;--bad-ink:#ffd2cb;--bad-line:#6a2a24;
  --hdr-bg:rgba(11,22,32,.94);--hl:#10243a;--zone-bg:#0f2132;--shot-line:rgba(255,255,255,.12);--shot-filter:brightness(.94);--band-edge:#1d3d5f;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.65);
  color-scheme:dark;}}
.theme-dark{background:var(--bg);color:var(--ink)}
.logo-dark{display:none!important}
.theme-dark .logo-light,:root[data-theme="dark"] .logo-light{display:none!important}
.theme-dark .logo-dark,:root[data-theme="dark"] .logo-dark{display:block!important}
@media (prefers-color-scheme:dark){:root[data-theme="auto"] .logo-light{display:none!important}:root[data-theme="auto"] .logo-dark{display:block!important}}
/* real product screenshots stay light; dimmed slightly on dark pages (token) */
.shot img,.shot video{filter:var(--shot-filter)}
.section--navy,.cta-final,.config{box-shadow:inset 0 0 0 1px var(--band-edge)}
.ftr{box-shadow:inset 0 1px 0 var(--band-edge)}
/* theme switch */
.theme-btn{width:40px;height:40px;border:1px solid var(--line);background:var(--surface);color:var(--heading);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.theme-btn:hover{border-color:var(--blue-line);background:var(--blue-tint)}
.theme-btn svg{width:18px;height:18px}

/* responsive — tablet (761 to 1023 px). Two-column splits and three- or four-column grids leave columns too
   narrow for their text here, so splits stack, wide grids drop to two columns and the footer uses three. */
@media (min-width:761px) and (max-width:1023px){
  .split,.split--even,.hero__grid,.step{grid-template-columns:minmax(0,1fr)!important}
  .split,.hero__grid{gap:36px!important}
  .grid3,.grid4,.features{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid3:not(:has(>.feat-hero))>:last-child:nth-child(odd),.features>:last-child:nth-child(odd){grid-column:1/-1}
  /* A lead card takes a full row of its own, so the cards after it pair up from the next row. */
  .grid3:has(>.feat-hero:first-child)>:last-child:nth-child(even){grid-column:1/-1}
  .ftr__cols{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row;row-gap:36px}
  .feat-hero{grid-row:auto}
  /* A proof band of four facts is two rows of two here: four columns are too narrow for a long fact. */
  .proof__in:has(>:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .proof__in:has(>:nth-child(4))>.proof__item:nth-child(odd){border-left:0;padding-left:0}
  .proof__in:has(>:nth-child(4))>.proof__item:nth-child(n+3){border-top:1px solid var(--line)}
  /* A flow of four or more steps runs down the page here, as on a phone: side by side the steps are too narrow. */
  .flow:has(>:nth-child(7)){flex-direction:column}
  .flow:has(>:nth-child(7))>.flow__arr{flex:0 0 30px;justify-content:center;flex-direction:column;align-items:center}
  .flow:has(>:nth-child(7))>.flow__arr::before{width:1.5px;height:auto;flex:1}
  .flow:has(>:nth-child(7))>.flow__arr::after{border:5px solid transparent;border-top:7px solid currentColor;margin:0 0 -2px}
  /* A text-and-button panel in a half-width column puts the button under the text. */
  .grid2>.volume{grid-template-columns:minmax(0,1fr)!important;justify-items:start;gap:18px}
  /* The closing band stacks here, as the hero and splits do: side by side, its title wraps to narrow lines. */
  .cta-final{grid-template-columns:minmax(0,1fr);gap:24px}
  .cta-final>.stack{align-items:flex-start!important}
  .cta-final .btns{justify-content:flex-start!important}
  .cta-final__note{text-align:left}
}

/* responsive — phone */
@media (max-width:760px){
  :root{--gutter:16px}
  .site{font-size:17px}
  .section{padding:56px 0}.section--sm{padding:40px 0}
  .h1,.h1--md{font-size:34px;line-height:1.12}
  .h1 .sub{font-size:.6em}
  .h2{font-size:27px}
  .lead{font-size:18px}
  .grid2,.grid3,.grid4,.split,.split--even,.hero__grid,.features,.scope,.cta-final,.step,.fields2,.volume,.ftr__cols,.kv{grid-template-columns:minmax(0,1fr)!important}
  .split,.hero__grid{gap:28px!important}
  .num-in{width:96px}
  .btns[style*="justify-content:flex-end"]{justify-content:flex-start!important}
  .hero{padding:36px 0 48px}.hero__grid{gap:32px}
  .proof__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof__item{padding:16px 12px;border-left:0;border-top:1px solid var(--line)}
  .proof__item:nth-child(-n+2){border-top:0}.proof__item:first-child{padding-left:12px}
  .logo-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btns .btn{flex:1 1 100%}
  .step{padding:20px;gap:20px}
  .step__media{padding:16px}
  .spec{grid-template-columns:minmax(0,1fr)}
  .spec dt{border-top:1px solid var(--line);padding-bottom:0;background:var(--surface)}
  .spec dd{border-top:0;padding-top:4px}
  .spec dt:first-of-type{border-top:0}
  .cta-final{padding:28px 20px}
  .cta-final>.stack{align-items:stretch!important}
  .cta-final__note{text-align:left}
  .card{padding:22px}
  .scope{padding:22px}
  .kv{grid-template-columns:minmax(0,1fr)}
  .timeline{grid-template-columns:minmax(0,1fr);border-top:0;border-left:2px solid var(--blue);padding-left:20px}
  .tl{padding:0 0 22px}.tl::before{left:-29px;top:4px}
  .manifesto{font-size:20px}
  .tbl{font-size:14px;min-width:620px}
  .tbl--cards{min-width:0}
  .tbl--cards thead{display:none}
  .tbl--cards tr{display:block;border-top:1px solid var(--line);padding:12px 16px}
  .tbl--cards th,.tbl--cards td{display:block;border:0;padding:3px 0;width:auto}
  .tbl--cards td[data-l]::before{content:attr(data-l) ": ";font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
  .tbl--sticky thead th{top:0}
  .tbl-wrap--visible{overflow:auto}
  .cookie{left:12px;right:12px;bottom:12px;max-width:none}
  .ftr{padding:44px 0 24px}
  .dg{padding:18px}
  .dg-row{flex-direction:column!important}
  .dg-row .arr-r{transform:rotate(90deg);min-height:28px;min-width:28px;flex:none;width:28px}
  .config{padding:22px}
  .config__out{font-size:40px}
}
@media (min-width:761px){.show-m{display:none!important}}
/* Architecture diagrams: the drawn diagram needs a desktop width to stay legible; narrower screens get the list version. */
@media (max-width:1023px){.hide-t{display:none!important}}
@media (min-width:1024px){.show-t{display:none!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.logo img{height:26px;width:auto;display:block}
.ftr .logo img{height:24px}
@media (max-width:760px){.logo img{height:22px}}

/* ===== Round 2 components ===== */
/* product-image frames: browser window, phone, Windows screen */
.frame{position:relative;margin:0}
.frame img,.frame video{display:block;width:100%;height:auto;filter:var(--shot-filter)}
.frame__crop{overflow:hidden;position:relative}
.frame__crop img{width:100%;height:100%;object-fit:cover}
.frame-browser{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--shot-line);box-shadow:0 1px 2px rgba(0,0,0,.08),0 22px 48px -22px rgba(5,25,45,.5)}
.frame-browser__bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#eef2f6;border-bottom:1px solid #dbe3eb}
.frame-browser__bar i{width:10px;height:10px;border-radius:50%;background:#c7d1db;display:block}
.frame-browser__bar b{flex:1;height:18px;margin-left:14px;border-radius:999px;background:#fff;border:1px solid #dbe3eb;display:block;max-width:420px}
/* A scene: a recording that draws its own devices, so only rounded corners and a soft edge. */
.frame-scene{border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px var(--shot-line),0 22px 48px -26px rgba(5,25,45,.45)}
.frame-phone{border-radius:34px;padding:9px;background:#0b1620;box-shadow:0 0 0 1px #2a3a4d,0 24px 50px -22px rgba(5,25,45,.6);width:100%}
.frame-phone__screen{border-radius:26px;overflow:hidden;background:#fff;position:relative}
/* A thin status-bar strip in the web app's header colour, so the rounded corners never clip the app's navigation. */
.frame-phone__screen img{padding-top:12px;background:#f8f9fa}
.frame-win{border-radius:12px;padding:10px 10px 0;background:#141c26;box-shadow:0 0 0 1px #2a3a4d,0 24px 50px -22px rgba(5,25,45,.6)}
.frame-win__screen{border-radius:4px;overflow:hidden;position:relative}
.frame-win__chin{height:22px;display:flex;align-items:center;justify-content:center}
.frame-win__chin::after{content:"";width:6px;height:6px;border-radius:50%;background:#3a4a5c}
.callout{position:absolute;width:30px;height:30px;border-radius:50%;background:#f2a93b;color:#1b1203;font-family:var(--mono);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 4px 10px rgba(0,0,0,.25);z-index:3;transform:translate(-50%,-50%)}
.captions{display:flex;flex-direction:column;gap:8px;margin-top:16px;padding:0;list-style:none}
.captions li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.stage--plain{background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:var(--r-lg);padding:32px}
.feature__title{color:var(--heading)!important;text-decoration:none!important}
.feature__title:hover{color:var(--blue)!important;text-decoration:underline!important}
/* proof band: one verbatim line per item */
/* A proof fact's icon: the same tinted tile as a feature icon (.ico), to the left of the fact. The tile never
   shrinks, so every fact's text starts at the same place. */
.proof__item:has(>.proof__ico){flex-direction:row;align-items:flex-start;gap:14px}
.proof__ico{width:40px;height:40px;flex:none;border-radius:10px;background:var(--blue-tint);color:var(--blue);display:flex;align-items:center;justify-content:center}
.proof__ico svg{width:22px;height:22px}
.proof__line{font-size:16px;line-height:1.4;color:var(--ink-2)}
.proof__line strong{display:block;font-size:22px;font-weight:650;color:var(--heading);letter-spacing:-.015em;margin-bottom:2px}
/* copy and placeholder markers */
/* product marks */
.mark{height:56px;width:auto;display:block}
.mark-lg{height:56px}

/* lighter-weight slot for a later product (hidden until used) */
.slot-third{border:1px dashed var(--line-2);border-radius:var(--r);padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg-2)}
/* step sequence images inside frames */
.step__media .frame-win{max-width:440px;width:100%}
.step__media .frame-phone{max-width:180px}
.seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:end}
.seq figure{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.seq .frame-phone{max-width:150px;padding:6px;border-radius:24px}
.seq .frame-phone__screen{border-radius:19px}
.seq .frame-win{padding:6px 6px 0}
.seq .frame-win__chin{height:14px}
.seq .n-inline{margin-top:2px}
.dl-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14px;margin:0}
.dl-meta dt{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);padding-top:2px}
.dl-meta dd{margin:0;color:var(--ink-2);min-width:0}
.dl-file{font-family:var(--mono);font-size:13px;color:var(--heading);overflow-wrap:break-word}
/* SHA-256: the hash is a block exactly 32 characters wide (two even lines of 32), or 16 wide (four lines)
   where the card is too narrow. The Copy button sits to its right, or under it when there is no room. */
.dl-meta dt.dl-hash-dt{padding-top:8px}
.dl-hash{container-type:inline-size;font-family:var(--mono);font-size:12.5px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px}
.dl-hash .hash{display:block;width:calc(16ch + 18px);padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--bg-2);color:var(--heading);font-size:12.5px;line-height:1.55;letter-spacing:0;word-break:break-all}
@container (min-width:calc(32ch + 18px)){.dl-hash .hash{width:calc(32ch + 18px)}}
.dl-hash .copy-btn{flex:none}
@media (max-width:760px){
  .seq{grid-template-columns:repeat(2,minmax(0,1fr))}
  .callout{width:26px;height:26px;font-size:12px}
  .frame-phone{border-radius:26px;padding:7px}
  .frame-phone__screen{border-radius:20px}
  .proof__line strong{font-size:18px}
  .ftr__cols{grid-auto-flow:row}
}
.nw{white-space:nowrap}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-media{position:relative;padding:28px 28px 44px}
.hero-media .frame-win{width:84%}
.hero-media .frame-phone{position:absolute;right:20px;bottom:18px;width:29%}
.proof__line b{color:var(--heading);font-weight:650}
@media (max-width:760px){.hero-media{padding:16px 16px 28px}.hero-media .frame-phone{right:10px;bottom:10px}}

.dg--compare{display:flex;flex-direction:column}
.dg-pair{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px;align-items:center;padding:32px}
.dg-pair+.dg-pair{border-top:1px solid var(--line)}
.dg-pair__text{display:flex;flex-direction:column;gap:8px}
.step-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* Step cards share the grid's rows (subgrid): every picture box is as tall as the tallest one (the phone),
   so the numbered captions start on one line. */
.step-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:16px}
.step-card__media{background:var(--blue-tint);border:1px solid var(--blue-tint-2);border-radius:var(--r-lg);padding:18px;display:flex;align-items:center;justify-content:center;min-height:0;aspect-ratio:4/3.2}
.step-grid .step-card__media{aspect-ratio:auto}
.step-card__media .frame-win{width:100%;padding:6px 6px 0}
.step-card__media .frame-win__chin{height:12px}
@media (max-width:760px){
  .dg-pair{grid-template-columns:minmax(0,1fr);gap:18px;padding:20px}
  .step-grid{grid-template-columns:minmax(0,1fr)}
  .dg-row .zone{flex:1 1 auto!important;width:100%}
  .dg-row>.stack{flex:1 1 auto!important;width:100%}
}
@media (max-width:760px){.hdr__m .btn{padding:0 12px;font-size:13.5px}.hdr__in{gap:8px}}
.config p{margin:0}

.nav__btn,.nav__link{white-space:nowrap}
.nav{min-width:0}
a.card.arrow-link{flex-direction:row;justify-content:space-between;align-items:center}

.bus{position:relative}
.bus::before{content:"";position:absolute;left:0;top:36px;bottom:36px;width:2px;background:var(--line-2)}
@media (max-width:760px){.bus::before{display:none}}
@media (max-width:760px){.dg-src{flex-direction:row!important;gap:10px!important;width:100%}.dg-src>.dg-row{flex:1}}

/* ===== Round 3 components ===== */
/* header: product menus with a "Common problems" column */
.menu--2{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 8px;min-width:640px;padding:10px}
.nav__item:hover .menu--2,.nav__item:focus-within .menu--2{display:grid}
.menu__col{display:flex;flex-direction:column;min-width:0}
.menu__col--alt{background:var(--bg-2);border-radius:9px;padding:4px}
.menu__t{font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:8px 12px 6px}
.mnav__sub{margin:4px 0 6px;padding:2px 0 2px 14px;border-left:2px solid var(--line)}
.mnav__group .mnav__sub a{font-size:15px;padding:8px 0}
/* link rows */
.linkrow{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center}
.linkrow .arrow-link{font-size:16px}
/* house diagram style: numbered markers, flows, legend */
.dg-n{flex:none;width:24px;height:24px;border-radius:50%;background:#f2a93b;color:#1b1203;font-family:var(--mono);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--surface)}
.flow{display:flex;align-items:stretch;gap:0}
.flow__step{flex:1 1 0;min-width:0;position:relative;border:1.5px solid var(--node-line);border-radius:10px;background:var(--surface);padding:30px 18px 18px;display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.flow__step b{color:var(--heading);font-weight:620;font-size:16px}
.flow__step small{font-size:14.5px;color:var(--ink-2)}
.flow__step .dg-n{position:absolute;top:-12px;left:16px}
.flow__step.is-product{background:var(--navy);border-color:var(--navy);color:#c9d6e3}
.flow__step.is-product b{color:#fff}.flow__step.is-product small{color:#c9d6e3}
.flow__arr{flex:0 0 40px;display:flex;align-items:center;color:var(--ink-3)}
.flow__arr::before{content:"";flex:1;height:1.5px;background:currentColor}
.flow__arr::after{content:"";border:5px solid transparent;border-left:7px solid currentColor;margin-right:-2px}
/* architecture diagram (inline SVG; colors from tokens so it follows the theme) */
.arch{width:100%;height:auto;display:block;font-family:var(--font)}
.arch .z rect{fill:var(--zone-bg);stroke:var(--blue-line);stroke-width:1.5;stroke-dasharray:7 5}
.arch .zt rect{fill:var(--surface)}
.arch .zt text{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;fill:var(--blue-deep);text-transform:uppercase}
.arch .n rect{fill:var(--surface);stroke:var(--node-line);stroke-width:1.5}
.arch .n.s rect{fill:var(--navy);stroke:var(--navy)}
.arch .t{font-size:14px;font-weight:620;fill:var(--heading)}
.arch .n.s .t{fill:#fff}
.arch .st{font-size:12px;fill:var(--ink-3)}
.arch .n.s .st{fill:#b8c8d8}
.arch .w{fill:none;stroke:var(--ink-3);stroke-width:1.5}
.arch .w.o{stroke-dasharray:6 5}
.arch .l{font-family:var(--mono);font-size:11px;fill:var(--ink-2)}
.arch .lb{fill:var(--surface)}
.arch .ah{fill:var(--ink-3)}
.arch .num circle{fill:#f2a93b;stroke:var(--surface);stroke-width:3}
.arch .num text{font-family:var(--mono);font-size:12px;font-weight:700;fill:#1b1203}
/* two-column requirement / example tables */
.tbl--2 tbody td:first-child{width:42%;color:var(--heading);font-weight:550}
.tbl--2 thead th{position:static}
.ex-pw{font-family:var(--mono);font-size:14px;color:var(--heading)}
.verdict{font-weight:620}.verdict--bad{color:var(--bad)}.verdict--ok{color:var(--ok)}
/* download packages */
/* Package cards (.dl-card--pkg): heading, picker or subtitle, package details, button, optional link. In a
   .dl-grid the cards share the grid's rows (subgrid), so each part, each detail row and the buttons (same
   height, even when one wraps) line up across a row of cards. The details are one row each: Version,
   Released, File, Size, SHA-256. */
.dl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:0}
.dl-card--pkg{display:grid;grid-template-columns:auto minmax(0,1fr);grid-row:span 7;grid-template-rows:subgrid;column-gap:14px;row-gap:8px;font-size:14px;margin-bottom:20px}
.dl-card--pkg>*,.dl-card--pkg .dl-card__act{grid-column:1/-1}
.dl-card--pkg .dl-card__head{grid-row:1}
.dl-card--pkg .dl-card__ctl{grid-row:2;align-self:start;margin-bottom:8px}
.dl-card--pkg .dl-card__act{grid-row:6;display:flex;flex-direction:column;margin-top:10px}
.dl-card--pkg .dl-card__act .btn{flex:1 1 auto}
/* The Linux card's last row: the data package of the chosen format (DEB or RPM), then the repository link. The
   data package's details use the card's two columns, so they line up with the agent's details above. The
   selectors carry .dl-card--pkg so they win over the global [data-if]{display:contents}. */
.dl-card--pkg .dl-card__extra{grid-row:7;display:grid;grid-template-columns:subgrid;align-content:start;font-size:16px;margin-top:4px}
.dl-card--pkg .dl-card__extra>*{grid-column:1/-1}
.dl-card--pkg .pkg-data{display:grid;grid-template-columns:subgrid;row-gap:8px;font-size:14px;margin:8px 0 18px;padding-top:16px;border-top:1px solid var(--line)}
.dl-card--pkg .pkg-data>.label,.dl-card--pkg .pkg-data>a{grid-column:1/-1}
.dl-card--pkg .pkg-data>a{justify-self:start;font-size:16px;margin-top:2px}
.dl-card--pkg .btn{padding-left:16px;padding-right:16px}
.dl-card--pkg .pkgs,.dl-card--pkg .pkg,.dl-card--pkg .dl-meta{display:contents}
.dl-card--pkg .dl-meta dt{grid-column:1}
.dl-card--pkg .dl-meta dd{grid-column:2}
.dl-card__ctl--row{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:flex-end}
.dl-card__ctl .small{margin-top:-4px}
/* Without JavaScript the Windows and macOS cards list both packages, each with its label, one after the other. */
.dl-card--pkg:has(.pkg__arch:not([hidden])){display:flex;flex-direction:column;gap:14px}
.dl-card--pkg:has(.pkg__arch:not([hidden])) .pkgs{display:flex;flex-direction:column;gap:20px}
.dl-card--pkg:has(.pkg__arch:not([hidden])) .pkg{display:flex;flex-direction:column;gap:12px}
.dl-card--pkg:has(.pkg__arch:not([hidden])) .dl-meta{display:grid}
.dl-card--pkg:has(.pkg__arch:not([hidden])) .dl-card__act{margin-top:0}
.pkg__arch{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0}
.picker{display:flex;flex-direction:column;gap:6px}
/* Segmented picker. The selected option is filled (white on the button blue) and carries a tick, so it
   does not depend on colour alone; the others are outlined. */
.seg{display:inline-flex;flex-wrap:wrap;border:1.5px solid var(--line-2);border-radius:8px;overflow:hidden;width:fit-content;background:var(--surface)}
.seg button{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:500;min-height:40px;padding:0 14px 0 10px;border:0;border-left:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);cursor:pointer}
.seg button::before{content:"";flex:none;width:12px;height:12px;background:transparent;-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.seg button:first-child{border-left:0}
.seg button:hover{background:var(--bg-3);color:var(--heading)}
.seg button[aria-pressed="true"]{background:var(--btn);color:#fff;font-weight:650}
.seg button[aria-pressed="true"]::before{background:currentColor}
.seg button:focus-visible{outline-offset:-4px;border-radius:7px;outline-color:#f2a93b}
.seg{--tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dl-grid{margin-bottom:-20px}
/* Product cards on the downloads hub (ProductCard): mark, name, summary, facts, button, money link, docs guide
   link. Sharing the grid's rows lines each part, and the buttons, up across the row. */
.dl-card--hub{display:grid;grid-row:span 7;grid-template-rows:subgrid;align-content:start;row-gap:14px;margin-bottom:20px}
/* A package card on its own (not in a .dl-grid) has its own rows: the button sits at the bottom so it lines up
   with a neighbouring panel's button. */
.dl-card--solo{grid-row:auto;grid-template-rows:auto auto repeat(3,auto) 1fr;margin-bottom:0}
.dl-card--solo .dl-card__act .btn{flex:none}
.dl-card--solo .dl-card__act{grid-row:6;align-self:end}
@media (max-width:760px){.dl-grid{grid-template-columns:minmax(0,1fr)}.dl-card--pkg{padding:22px}}
/* The current release under a downloads page's heading (ReleaseSummary), with its "What's new" control */
.release-summary{margin:0;font-size:16px;color:var(--ink-2)}
.release-summary .mono{color:var(--heading)}
.whats-new{font-size:14px;font-weight:600;white-space:nowrap}
.release-summary .whats-new{margin-left:12px}
/* release notes dialog */
.notes{width:min(640px,calc(100% - 32px));max-width:none;max-height:min(85dvh,760px);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);color:var(--ink);box-shadow:var(--shadow);font-size:15px;line-height:1.6}
.notes::backdrop{background:rgba(6,17,28,.6)}
.notes__in{display:flex;flex-direction:column;max-height:inherit}
.notes__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 16px 24px;border-bottom:1px solid var(--line)}
.notes__head .h3{padding-top:6px;overflow-wrap:anywhere}
.notes__close{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--heading);cursor:pointer}
.notes__close:hover{border-color:var(--blue-line);background:var(--blue-tint)}
.notes__body{padding:16px 24px 20px;overflow-y:auto;overscroll-behavior:contain;color:var(--ink-2);overflow-wrap:anywhere}
.notes__body>:first-child{margin-top:0}
.notes__body>:last-child{margin-bottom:0}
.notes__body p{margin:0 0 10px}
.notes__body ul,.notes__body ol{margin:0 0 14px;padding-left:22px}
.notes__body li{margin:4px 0}
.notes__body h4,.notes__body h5,.notes__body h6{font-size:15px;font-weight:620;color:var(--heading);margin:14px 0 6px}
.notes__body strong{color:var(--heading);font-weight:620}
.notes__foot{padding:14px 24px;border-top:1px solid var(--line)}
/* One item per change: its type and, for a breaking change, a mark, then its summary and description. */
.notes__body .notes__list{list-style:none;margin:0;padding:0}
.notes__body .notes__item{margin:0;padding:14px 0;border-top:1px solid var(--line)}
.notes__body .notes__item:first-child{padding-top:0;border-top:0}
.notes__body .notes__item:last-child{padding-bottom:0}
/* One group per change type, under a coloured heading, in the Access Manager app's order (groupChanges). */
.notes__body .notes__group{margin:0 0 20px}
.notes__body .notes__group:last-child{margin-bottom:0}
.notes__body .notes__group-head{margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid currentColor;font-size:13px;font-family:var(--mono);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.notes__group--security .notes__group-head,.notes__group--fix .notes__group-head{color:var(--bad)}
.notes__group--feature .notes__group-head{color:var(--ok)}
.notes__group--enhancement .notes__group-head{color:var(--blue)}
.notes__group--deprecation .notes__group-head{color:var(--warn)}
.notes__mark{display:inline-block;font-size:12.5px;font-weight:650;white-space:nowrap}
.notes__mark--breaking,.notes__mark--critical{color:var(--bad)}
.notes__mark--important{color:var(--warn)}
.notes__body .notes__applies{margin:4px 0 0;font-size:13.5px;color:var(--ink-3)}
.notes__body .notes__summary{margin:0;color:var(--heading);font-weight:560}
.notes__desc{margin-top:6px}
.notes__desc>:last-child{margin-bottom:0}
/* A list in a description sits inside the change list, so browsers would give it hollow circles. */
.notes__desc ul{list-style:disc}
html:has(dialog.notes[open]){overflow:hidden}
@media (max-width:760px){.notes{width:calc(100% - 32px);max-height:calc(100dvh - 32px)}.notes__head{padding:16px 12px 12px 16px}.notes__body{padding:14px 16px 16px}.notes__foot{padding:12px 16px}}
/* support panel beside a download card */
.panel--accent{border-color:var(--blue-line);background:var(--blue-tint)}
/* search-page template */
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0}
.mini{display:flex;flex-direction:column;gap:10px}
.sbs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6)}
.media-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:18px;align-items:end}
.price-band{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:center;padding:36px 40px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2)}
.editions3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.config--side{align-self:stretch}
.pricing-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:stretch}
@media (max-width:760px){
  .menu--2{min-width:0}
  .flow{flex-direction:column}
  .flow__arr{flex:0 0 30px;justify-content:center;flex-direction:column;align-items:center}
  .flow__arr::before{width:1.5px;height:auto;flex:1}
  .flow__arr::after{border:5px solid transparent;border-top:7px solid currentColor;margin:0 0 -2px}
  .sbs,.media-pair,.price-band,.editions3,.pricing-top{grid-template-columns:minmax(0,1fr)!important}
  .price-band{padding:22px}
  .tbl--2{min-width:0}
}
@media (max-width:760px){.tbl--cards tbody th{width:auto!important;display:block}}
@media (max-width:760px){.proof__in{grid-template-columns:repeat(2,minmax(0,1fr))!important}.proof__item:nth-child(odd){padding-left:0}}
/* A proof band with an odd number of facts gives its last fact a full row of its own on a phone, as the tablet card grids (.grid3, .features) do. */
@media (max-width:760px){.proof__item:last-child:nth-child(odd){grid-column:1/-1}}
.feat-hero{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){.feat-hero{grid-column:auto;grid-row:auto}}
.status--stack{flex-direction:column;align-items:flex-start;gap:2px}
.status--stack .dot{display:none}
.wrap--wide{max-width:1380px}
.pricing-top{grid-template-columns:minmax(0,1fr) minmax(0,2.25fr) minmax(0,1fr)}
.pro-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:12px;align-items:stretch}
/* Edition cards share the pricing grid's rows (subgrid): name, price, summary, buttons, feature list.
   The prices, summaries and buttons line up across the editions; "Your price" spans all the rows. */
.tier__more{display:flex;flex-direction:column;gap:var(--s4)}
@media (min-width:1121px){
  .pricing-top{grid-template-rows:repeat(5,auto)}
  .pricing-top>.card,.pro-pair>.card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--s4)}
  .pro-pair{grid-row:span 5;grid-template-rows:subgrid;row-gap:var(--s4)}
  .pro-pair>.card{grid-column:1}
  .pro-pair>.config--side{grid-row:1/-1;grid-column:2}
  /* A single button keeps its own height when the row is as tall as a neighbour's two stacked buttons. */
  .pricing-top>.card>.btn,.pro-pair>.card>.btn{align-self:start}
}
.nil{display:inline-block;width:14px;height:2px;background:var(--line-2);vertical-align:middle}
.tbl--hl3 td:nth-child(3){background:var(--hl)}
@media (max-width:760px){.pro-pair{grid-template-columns:minmax(0,1fr)}}
.price{margin:0;white-space:nowrap}
.pricing-top .price{font-size:38px}
.pricing-top .price small{font-size:15px}
.src{font-size:13px;white-space:nowrap;margin-left:2px}
/* In a table cell the source link always starts its own line, so citations sit the same way in every cell. */
.tbl td .src{display:block;width:fit-content;margin:4px 0 0}
/* A card grid of two wide cards over three narrow ones (2 + 3): the Password Protection checks and the How it works
   feature cards. From desktop width it has six columns: a wide card spans three, a narrow card two. At tablet width
   the narrow cards would be too narrow for their text, so the cards pair up in two columns and an odd last card takes
   the full row (as .grid3 does there). On a phone the cards stack. */
.checks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.checks>.card{grid-column:span 2}
.checks>.check--wide{grid-column:span 3}
@media (min-width:761px) and (max-width:1023px){
  .checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .checks>.card,.checks>.check--wide{grid-column:auto}
  .checks>.card:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){.checks{grid-template-columns:minmax(0,1fr)}.checks>.card,.checks>.check--wide{grid-column:auto}}
/* The company facts (CompanyFacts) are a grid with 1px rules between the cells, so the dividers line up from row
   to row. From desktop width the six facts are two rows of three. One row of six does not work: the long customers
   fact needs seven lines in a sixth of the row (1440 px), and from 1024 to 1145 px the sixth fact wraps to a row of
   its own. Below desktop width the facts are two columns (one on a phone), and an odd last fact takes the full row.
   The desktop grid expects a multiple of three facts (company-facts.test.ts fixes six): with any other count, the
   empty cells of the last row show the rule colour. */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--line)}
.facts>div{padding:18px 22px;font-size:16px;font-weight:560;color:var(--heading);background:var(--surface)}
@media (max-width:1023px){
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){.facts{grid-template-columns:minmax(0,1fr)}}
.nsteps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.nsteps li{display:flex;gap:12px;align-items:flex-start;font-size:17px;color:var(--ink-2)}
.nsteps .dg-n{box-shadow:none;margin-top:2px}
.nsteps li > span:last-child{text-wrap:pretty}
.arr-r--opt::before{background:none;border-top:1.5px dashed currentColor;height:0}
@media (max-width:760px){.tbl--2 tbody td:first-child{width:auto!important}.tbl--2 td[data-l]::before{display:block;margin-bottom:2px}.tbl--2 tbody td:first-child{padding-bottom:10px!important}}
.arch .n.s rect{stroke:var(--band-edge)}
.flow__step.is-product{box-shadow:0 0 0 1px var(--band-edge)}
.hdr__actions{flex:none}
.hdr__in{gap:20px}
.nav__btn,.nav__link{padding:0 10px}

/* ===== static site ===== */
[data-if]{display:contents}
[hidden]{display:none!important}
.draftbar{font-family:var(--font);font-size:13px;line-height:1.4;padding:7px 16px;text-align:center;background:#fdeccc;color:#5a3a00}
.draftbar a{color:#5a3a00;font-weight:600;margin-left:6px}
body{background:var(--bg)}
.hdr .mnav{position:absolute;left:0;right:0;top:100%;box-shadow:var(--shadow)}
.hdr{position:sticky}


/* ===== download choice (header) ===== */
.dlm{position:relative}
.dlm__btn[role="button"]::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7;margin-left:2px}
.dlm__btn[aria-expanded="true"]::after{transform:rotate(-135deg) translateY(-1px)}
.dlm__panel{position:absolute;top:calc(100% + 8px);right:0;min-width:330px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;z-index:60;display:flex;flex-direction:column;gap:2px}
.dlm__panel a{display:block;padding:10px 12px;border-radius:7px;color:var(--heading)!important;text-decoration:none!important;font-size:15px;font-weight:600;line-height:1.35}
.dlm__panel a small{display:block;font-weight:400;color:var(--ink-3);font-size:13.5px;margin-top:2px}
.dlm__panel a:hover,.dlm__panel a:focus-visible{background:var(--blue-tint);color:var(--blue-deep)!important}
@media (max-width:1199px){
  .hdr__m .dlm{position:static}
  .hdr__m .dlm__panel{left:0;right:0;top:100%;min-width:0;border-radius:0;border-left:0;border-right:0;padding:8px 16px 16px}
  .hdr__m .dlm__panel a{padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line);border-radius:0}
  .hdr__m .dlm__panel a:last-child{border-bottom:0}
}

/* ===== hub pages (Downloads, Pricing) ===== */
.hub-card{gap:18px}
.hub-tier{display:flex;flex-direction:column;gap:2px;padding:14px 0;border-top:1px solid var(--line)}
.hub-tier:first-of-type{border-top:0;padding-top:0}
.hub-tier b{color:var(--heading);font-weight:620}
.hub-tier span{color:var(--ink-2);font-size:15px}
/* Two product cards side by side share the grid's rows (subgrid): mark, name, summary, three tiers,
   buttons. Each tier, and the buttons, line up across the cards. */
.hub-btns{margin-top:auto}
@media (min-width:761px){
  .hub-grid{row-gap:0}
  .hub-grid>.hub-card{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:0}
  .hub-grid .hub-tiers{display:contents}
  .hub-grid .hub-card>*:not(.hub-tiers){margin-bottom:18px}
  .hub-grid .hub-btns{margin:4px 0 0;align-self:start}
}
/* Card and table headings and button labels that take two lines split evenly, so no word sits alone on the second line. */
.h3,.h4,.btn,.tbl th{text-wrap:balance}
/* The same for the arrow links stacked in a ProductCard links card: a link that takes two lines does not
   leave its last word and arrow alone on the second. The stack's links are flex items, so they are blocks. */
[data-product-card]>.stack>.arrow-link{text-wrap:balance}
/* Two columns of a heading and cards share the grid's rows (subgrid), so the cards start on one line and each pair is one height. */
@media (min-width:761px){.pairs>.stack{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--s4)}}
/* Buttons in an even grid, so a card with a third button keeps the first two in the same place as its neighbour. */
/* Two buttons side by side only from 1120 px: below that, "See editions and pricing" wraps beside a one-line button. */
@media (min-width:1120px){.hub-grid .hub-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:761px){.hub-grid .hub-btns .btn{white-space:normal;text-align:center;line-height:1.25;padding:8px 14px}}
@media (min-width:761px) and (max-width:1119px){.hub-grid .hub-btns{display:grid;grid-template-columns:minmax(0,1fr)}}

/* ===== header layout =====
   The full desktop header (logo, main nav, theme switch and two buttons) fits the 1,136px content width with
   about 20px to spare when it shows the widest set of buttons (shared pages). Below 1,200px the header shows the menu button instead, so the nav never runs
   under the buttons. Change this breakpoint together with the max-width rules above that use it. */
.hdr__in{gap:14px}
.hdr__actions{gap:6px}
.hdr__actions .btn--sm{padding:0 11px}
.nav__btn,.nav__link{padding:0 8px}
@media (max-width:1199px){
  .hdr__in{height:64px;gap:10px}
  .nav,.hdr__actions{display:none}
  .hdr__m{display:flex;gap:8px;align-items:center;margin-left:auto}
}
@media (min-width:1200px){.hdr .mnav,.hdr__m{display:none!important}}

/* ===== tablet widths =====
   Diagrams with fixed-width parts and the three-column pricing row need about 1,120px. Below that they
   use the stacked layout that phones use, so the page never scrolls sideways. */
@media (max-width:1120px){
  .dg-row{flex-direction:column!important}
  .dg-row .arr-r{transform:rotate(90deg);min-height:28px;min-width:28px;flex:none;width:28px}
  .dg-row .zone{flex:1 1 auto!important;width:100%}
  .dg-row>.stack{flex:1 1 auto!important;width:100%}
  /* A connector keeps its desktop width as a fixed size, which would be its height here: it takes its content's height instead. */
  .dg-row>:has(>.arr-r){flex:0 0 auto!important;align-items:center;padding:4px 0}
  .pricing-top{grid-template-columns:minmax(0,1fr)!important}
}

/* ===== enquiry forms (LeadForm.astro) ===== */
.lf .field label{display:block}
.lf__req{color:var(--ink-3);margin-left:2px}
.lf .select{padding-right:36px}
.lf [aria-invalid="true"]{border-color:var(--bad)}
.lf [aria-invalid="true"]:focus{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-line)}
.lf__error{margin:2px 0 0;font-size:13.5px;font-weight:500;color:var(--bad)}
.lf__error:empty{display:none}
.lf__other{display:none}
/* A checkbox field: the box, then its label, in one row. */
.lf__check-row{display:flex;align-items:flex-start;gap:10px}
.lf__check-row input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.lf__check-row input:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lf__check-row input[aria-invalid="true"]{outline:2px solid var(--bad);outline-offset:2px}
.lf .lf__check-row label{font-weight:500;cursor:pointer}
.lf__other--open,.lf__form:has(select[name="lead_heard_about_us"] option[value="Other"]:checked) .lf__other{display:flex}
.lf__notice[hidden]{display:none}
.lf__notice:focus{outline:none}
.lf__hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.lf__turnstile:empty{display:none}
.lf__status{margin:0;font-size:14px;color:var(--ink-2)}
.lf__status:empty{display:none}
.lf .btn[disabled]{opacity:.7;cursor:progress}

/* ===== page intro (PageIntro.astro) =====
   The heading block on pages without a hero. These rules come after the section--sm rules (including the
   phone one), so the space under the heading stays the same at every width. */
.page-intro{padding-bottom:40px}
.page-intro--tint{background:var(--bg-2);border-bottom:1px solid var(--line)}
/* The shared hubs' smaller block. */
.page-intro--compact{padding-bottom:32px}

/* ===== Blocks under a page intro, and diagram figures =====
   These rules come after the phone rules, so the spacing stays the same at every width. */
/* A section that continues an untinted page intro, such as the Password Protection flow diagram. */
.section--under-intro{padding-top:0;padding-bottom:var(--s8)}
/* A diagram figure with a 28px inset. */
.dg--inset{margin:0;padding:28px}

/* ===== Home page: the hero runs on into the product showcase =====
   These rules come after the phone rules, so the spacing stays the same at every width. */
.hero--joined{border-bottom:0;padding-bottom:36px}
/* The section under a joined hero: a short top space and a rule under it. */
.section--under-hero{padding-top:8px;border-bottom:1px solid var(--line)}
/* The product showcase cards (ProductCard showcase): mark, media, text (statement and description), button. Side by
   side, the cards share the grid's rows (subgrid), so the marks, the media and the buttons line up across the cards;
   a shorter text leaves its spare space above the button. */
.showcase-card{gap:20px}
.showcase-card__text{display:flex;flex-direction:column;gap:20px}
.showcase-card .btns .btn{align-self:flex-start}
@media (min-width:761px){
  .showcase-grid{row-gap:0}
  .showcase-grid>.showcase-card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:20px;align-content:start}
}

/* ===== Support page: the money blocks under "Become a customer" =====
   Stacked in one column, the blocks share their two columns (subgrid), so the buttons line up. Below desktop
   width each block puts its button under its text, as the blocks in a grid2 do. */
.volume-group{display:grid;gap:var(--s4)}
@media (min-width:1024px){
  .volume-group{grid-template-columns:minmax(0,1fr) auto}
  .volume-group>.volume{grid-column:1/-1;grid-template-columns:subgrid}
}
@media (max-width:1023px){.volume-group>.volume{grid-template-columns:minmax(0,1fr);justify-items:start;gap:18px}}

/* ===== Access Manager overview: the two parts of Access Manager (AccessManagerParts.astro) =====
   Two zones side by side with their encrypted connection between them. Below desktop width the zones stack and the
   connector turns to run down the page. */
.am-parts{margin:0;display:grid;grid-template-columns:minmax(0,1fr) 104px minmax(0,1fr);align-items:stretch}
.am-parts__zone{display:flex;flex-direction:column;gap:18px}
.am-parts__node{border:1.5px solid var(--node-line);border-radius:10px;background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.am-parts__node b{color:var(--heading);font-weight:620;font-size:17px;line-height:1.35}
.am-parts__node small{font-size:14.5px;line-height:1.45;color:var(--ink-2)}
/* The web app node is filled navy, with the same border as the agent node, so it stays the stronger node in the dark theme too. */
.am-parts__node.is-product{background:var(--navy)}
.am-parts__node.is-product b{color:#fff}
.am-parts__node.is-product small{color:#c9d6e3}
/* A node title with a tag beside it (the agent's "Optional"). */
.am-parts__title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
/* A slimmer tag, so the title line is as tall as the web app node's title and the two lists start level. */
.am-parts__title .pill{padding:2px 8px}
.am-parts__link{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink-3)}
.am-parts__arrow{width:72px;height:12px;flex:none}
.am-parts__label{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:1023px){
  .am-parts{grid-template-columns:minmax(0,1fr)}
  .am-parts__link{flex-direction:row;height:88px;gap:0}
  .am-parts__arrow{transform:rotate(90deg);margin-right:-18px}
}
/* The operating system logos (OsLogos.astro): one .ico tile per logo, in a row, so the row is as tall as the other
   cards' icon tiles. The logos take the tile's colour (currentColor), so they follow the theme. */
.os-logos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
/* The overview's supporting feature cards share the grid's rows (subgrid) from desktop width, so the icons, headings,
   text and links start on one line across the row. */
@media (min-width:1024px){.am-support>.card{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:var(--s4);align-content:start}}
/* On a phone, the facts stack as one column, each with its icon to the left. Side by side, a fact and its icon
   leave too little room for the text. */
@media (max-width:760px){
  .proof__in:has(.proof__ico){grid-template-columns:minmax(0,1fr)!important}
  .proof__in:has(.proof__ico)>.proof__item{padding-left:0!important;border-left:0!important;border-top:1px solid var(--line)!important}
  .proof__in:has(.proof__ico)>.proof__item:first-child{border-top:0!important}
}
/* Password Protection diagrams (PasswordDiagram): a card in the site's style, never a window frame. */
.pd{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:22px 24px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.pd p,.pd ul,.pd ol{margin:0}
.pd__lbl{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px!important}
.pd__pw{border:1.5px solid var(--line-2);border-radius:var(--r);padding:11px 14px;font:600 17px/1.3 var(--mono);color:var(--heading);overflow-wrap:anywhere}
.pd__checks{list-style:none;padding:0;margin-top:14px!important;display:flex;flex-direction:column;gap:8px}
.pd__checks li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r);background:var(--bg-2)}
.pd__mark{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-size:12px;font-weight:700}
.pd__mark--no{background:var(--bad-tint);color:var(--bad)}
.pd__mark--yes{background:var(--ok-tint);color:var(--ok)}
.pd__result{display:flex;align-items:center;gap:10px;margin-top:14px!important;padding:10px 12px;border-radius:var(--r);font-weight:600}
.pd__result--no{background:var(--bad-tint);border:1px solid var(--bad-line);color:var(--bad)}
.pd__result--yes{background:var(--ok-tint);border:1px solid var(--ok-line);color:var(--ok)}
.pd__steps{list-style:none;padding:0;margin-top:12px!important;display:flex;flex-direction:column;gap:6px}
.pd__steps li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 4px 6px;border-bottom:1px dashed var(--line)}
.pd__step{color:var(--ink-3);font-size:14px}
.pd__steps code{font:600 15px/1.3 var(--mono);color:var(--heading)}
.pd__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pd__table{width:100%;border-collapse:collapse;font-size:15px}
.pd__table th{text-align:left;font-weight:600;color:var(--ink-3);font-size:13px;padding:6px 10px;border-bottom:1px solid var(--line)}
.pd__table td{padding:8px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:14px;color:var(--heading)}
.pd__table td:last-child{font-family:var(--font);color:var(--ink-3)}
.pd__table td.pd__bad{color:var(--bad);font-weight:600}
@media (max-width:560px){.pd{padding:18px}.pd__pair{grid-template-columns:minmax(0,1fr)}.pd__steps li{flex-direction:column;gap:2px}}
/* When a layout stacks into one column, its media would span the full width, and a tall recording would be taller
   than the screen. Stacked media is capped at 560 px and centred (owner, 19 October 2026). */
@media (max-width:1023px){
  .hero__grid>:not(.hero__copy),.split .stage--plain{width:100%;max-width:560px;margin-left:auto;margin-right:auto}
}
/* The sample alert card (AlertCard): the diagram card with a title line and a two-column field list, and a caption
   under it. */
.alert-figure{margin:0}
.alert__title{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--heading);font-size:16px;margin-bottom:14px!important}
.alert__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:0}
.alert__fields div{min-width:0}
.alert__fields dt{font-size:13px;font-weight:600;color:var(--ink-3)}
.alert__fields dd{margin:2px 0 0;color:var(--heading);overflow-wrap:anywhere}
.alert__wide{grid-column:1/-1}
@media (max-width:560px){.alert__fields{grid-template-columns:minmax(0,1fr)}}
/* Enlarged screenshots (site.js): the screenshot full size on a dark backdrop. */
.zoomable{cursor:zoom-in}
.zoomable:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.lightbox{max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:24px;border:0;background:transparent;display:none;align-items:center;justify-content:center;cursor:zoom-out}
.lightbox[open]{display:flex}
.lightbox::backdrop{background:rgba(6,17,28,.82)}
.lightbox__img{max-width:min(100%,1600px);max-height:calc(100dvh - 48px);width:auto;height:auto;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);background:#fff}
.lightbox__close{position:fixed;top:16px;right:16px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
.lightbox__close:hover{background:rgba(255,255,255,.26)}