/* The one stylesheet for every page: tokens, base type, header, menu, footer and every page component.
   Pages carry no inline styles, so a component looks the same wherever it appears. */
@font-face{font-family:"IBM Plex Sans";src:url("/fonts/ibm-plex-sans-var.woff2") format("woff2");font-weight:100 700;font-style:normal;font-display:swap}
:root{
 color-scheme:dark;--ground:#000000;--primary:#FFFFFF;--secondary:#8A9094;--line:rgba(138,144,148,.38);
 /* One type scale for every page. Text: 11 13 14 16 17 18 21 24. Headings: 32 40 56. Two fluid display
    sizes: page titles, and the home lockup, which is the largest type on the site. Nothing sets a raw px size. */
 --fs-label:11px;--fs-xs:13px;--fs-sm:14px;--fs-base:16px;--fs-body:17px;--fs-md:18px;--fs-lg:21px;--fs-xl:24px;
 --fs-2xl:32px;--fs-3xl:40px;--fs-4xl:56px;--fs-display:clamp(44px,10vw,76px);--fs-mark:clamp(56px,15.5vw,140px);
 /* Tracking: capitals open up, large lowercase closes in, so both lines of a lockup read at one texture. */
 --track-caps:.01em;--track-display:-.04em;--track-head:-.03em;--track-sub:-.01em;--track-tight:-.02em;
 /* The home lockup: the line under the wordmark is set at this share of its size, so both lines run the same width. */
 --lockup-ratio:.56;
 /* Section rhythm: one vertical step between every section on every page. */
 --space-section:48px;--space-head:40px;
 /* The mark's asymmetric corners, at three sizes. */
 --corner-lg:24px 0 24px 0;--corner-md:14px 0 14px 0;--corner-sm:8px 0 8px 0;
 --bar:64px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-family:"IBM Plex Sans",sans-serif;background:var(--ground);color:var(--primary)}
*,*::before,*::after{box-sizing:border-box}
/* The header is sticky, so an anchor target lands below it rather than under it. */
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 16px)}
body{margin:0;font-size:var(--fs-body);line-height:1.6}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
a{color:inherit;text-underline-offset:.25em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--primary);outline-offset:5px}
::selection{background:var(--primary);color:var(--ground)}
code,pre,kbd{font-family:var(--mono)}
code{font-size:.9em}
.skip{position:absolute;z-index:40;top:12px;left:12px;padding:12px 18px;background:var(--ground);transform:translateY(-200%)}
.skip:focus{transform:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{width:min(100% - 40px,1280px);margin-inline:auto}
/* A small label, set as written in sentence case: no tracked capitals anywhere on the site. */
.eyebrow{font-size:var(--fs-xs);font-weight:500;line-height:1.5;color:var(--secondary)}
.split-rule{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.split-rule::before,.split-rule::after{content:"";height:1px;background:var(--line)}
@media(min-width:760px){.wrap{width:min(100% - 80px,1280px)}}

/* The brand lockup, used in the bar, the menu and the footer. */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none;min-height:44px}
.brand-symbol{width:32px;height:32px;display:block;fill:var(--primary)}
.wordmark{width:118px;height:34px;display:block;fill:var(--primary);overflow:visible}
.wordmark text{font-family:"IBM Plex Sans",sans-serif}

/* Buttons: white and filled for the main action, outlined for a secondary one. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:40px;padding:0 18px;background:var(--primary);color:var(--ground);border:1px solid var(--primary);border-radius:var(--corner-md);font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.btn:focus-visible{outline-offset:3px}
.btn-lg{min-height:52px;padding:0 28px;font-size:var(--fs-base);border-radius:var(--corner-lg)}
.btn-ghost{background:var(--ground);color:var(--primary)}

/* A small status label with a dot, for what is live or coming. */
.pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:30px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-xs);font-weight:500;line-height:1.3;color:var(--primary)}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary);flex:none}
.pill.soon::before{background:none;border:1px solid var(--secondary)}

/* Header: one compact sticky bar. From 900px the six links and the button sit in the bar; below that a
   single menu button opens the full list as a modal dialog. */
.site-header{position:sticky;top:0;z-index:30;background:var(--ground);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;height:var(--bar)}
.site-nav{margin-left:auto;align-self:stretch;display:none}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;height:100%}
.site-nav a{position:relative;display:flex;align-items:center;height:100%;font-size:var(--fs-sm);font-weight:500;color:var(--secondary);text-decoration:none}
.site-nav a:hover{color:var(--primary)}
.site-nav a:focus-visible{outline-offset:-2px;color:var(--primary)}
/* The current page: white, with a bar sitting on the header's bottom rule. */
.site-nav a[aria-current="page"]{color:var(--primary)}
.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--primary)}
.bar .nav-cta{display:none}
.bar .nav-cta[aria-current="page"]{background:var(--ground);color:var(--primary)}
/* Two bars: the menu glyph. They cross when the menu is open. */
.menu-button,.menu-close{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;background:none;border:0;color:var(--primary);cursor:pointer}
.menu-button:focus-visible,.menu-close:focus-visible{outline-offset:-4px}
.bars{position:relative;display:block;width:20px;height:9px}
.bars::before,.bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor}
.bars::before{top:0}.bars::after{bottom:0}
.menu-close .bars::before{top:3.75px;transform:rotate(45deg)}
.menu-close .bars::after{bottom:3.75px;transform:rotate(-45deg)}
@media(min-width:900px){
 :root{--bar:72px}
 .brand-symbol{width:36px;height:36px}.wordmark{width:132px;height:38px}
 .site-nav{display:block}
 .bar .nav-cta{display:inline-flex}
 .menu-button{display:none}
}
@media(min-width:1100px){.site-nav ul{gap:32px}}

/* The menu. Pages run no script for it: the button opens this dialog with an invoker command (show-modal),
   a real modal, so focus stays inside, Esc closes it and focus returns to the button. Browsers without
   invoker commands fall back to popovertarget, which also closes on Esc. */
.menu{position:fixed;inset:0;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;background:var(--ground);color:var(--primary);border:0;overflow-y:auto}
.menu::backdrop{background:var(--ground)}
.menu-bar{display:flex;align-items:center;height:var(--bar);border-bottom:1px solid var(--line)}
.menu-nav ul{list-style:none;margin:0;padding:8px 0 0}
.menu-nav li{border-bottom:1px solid var(--line)}
.menu-nav a{display:flex;align-items:center;min-height:56px;font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--track-tight);text-decoration:none;color:var(--secondary)}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--primary)}
.menu-nav a[aria-current="page"]::before{content:"";width:8px;height:8px;margin-right:12px;background:var(--primary);border-radius:4px 0 4px 0}
.menu-cta{margin-top:32px}
.menu-cta .btn{width:100%;min-height:48px;font-size:var(--fs-base);border-radius:var(--corner-lg)}
.menu-legal{list-style:none;display:flex;flex-wrap:wrap;gap:4px 20px;margin:24px 0 40px;padding:0;font-size:var(--fs-xs);color:var(--secondary)}
.menu-legal a{display:inline-flex;align-items:center;min-height:44px}
html:has(.menu[open]),html:has(.menu:popover-open){overflow:hidden}
@media(min-width:900px){.menu{display:none!important}}
@media(prefers-reduced-motion:no-preference){.menu[open],.menu:popover-open{animation:menu-in 160ms cubic-bezier(.22,.7,.22,1)}@keyframes menu-in{from{opacity:0}to{opacity:1}}}

/* Footer: the mark and status on the left, three short link groups on the right. */
.site-footer{margin-top:48px;border-top:1px solid var(--line);color:var(--secondary);font-size:var(--fs-xs);line-height:1.6}
.footer-grid{display:grid;gap:32px;padding-block:48px 32px}
.footer-brand p{margin-top:16px;max-width:44ch}
.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.footer-heading{font-size:var(--fs-xs);font-weight:600;line-height:1.5;color:var(--primary)}
.footer-nav ul{list-style:none;margin:8px 0 0;padding:0}
.footer-nav a{display:inline-flex;align-items:center;min-height:36px;font-size:var(--fs-sm);text-decoration:none}
.footer-nav a:hover{color:var(--primary);text-decoration:underline}
.footer-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:20px 32px;border-top:1px solid var(--line)}
@media(min-width:760px){
 .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;padding-block:56px 40px}
 .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---- Page components ---- */

/* The page head: a large title and one short paragraph. */
.document-head{padding-block:56px var(--space-head);max-width:960px}
.document-head .pill{margin-bottom:20px}
.document-head h1{font-size:var(--fs-display);font-weight:700;line-height:1;letter-spacing:var(--track-display);text-wrap:balance}
.document-head p:last-child:not(.pill){font-size:var(--fs-md);line-height:1.55;max-width:52ch;color:var(--secondary);margin-top:24px}
/* A section: a title row, then content. Consecutive sections are divided by a hairline. */
.flow-section{padding-block:var(--space-section)}
.flow-section+.flow-section{border-top:1px solid var(--line)}
.flow-title{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.flow-title h2{font-size:var(--fs-2xl);line-height:1.05;font-weight:700;letter-spacing:var(--track-head);text-wrap:balance}
.flow-title .eyebrow{white-space:nowrap}
.lede{margin-top:20px;font-size:var(--fs-base);line-height:1.65;max-width:62ch}
.lede a,.section-note a,.terms dd a,.framing a{color:var(--primary)}
.framing{margin-top:20px;font-size:var(--fs-sm);color:var(--secondary);max-width:62ch}
.section-note{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--secondary);max-width:75ch}
.more-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-sm);font-weight:500;color:var(--primary)}
.more-row{margin-top:8px}
@media(min-width:760px){
 :root{--space-section:80px;--space-head:64px}
 .document-head{padding-block:96px var(--space-head)}
 .document-head p:last-child:not(.pill){font-size:var(--fs-lg)}
 .flow-title h2{font-size:var(--fs-3xl)}
 .lede{font-size:var(--fs-body);margin-top:24px}.section-note,.framing{margin-top:28px}
}

/* The card: the mark's corners on a hairline box. */
.node{border:1px solid var(--secondary);padding:20px;border-radius:var(--corner-lg);min-width:0}
.node h3{font-size:var(--fs-lg);font-weight:600;line-height:1.2;letter-spacing:var(--track-tight)}
.node p{margin-top:8px;font-size:var(--fs-sm);color:var(--secondary)}
.node .eyebrow{margin:0 0 10px}
.node.pending{border-style:dashed}
.cards{display:grid;gap:12px;margin-top:32px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cards .price{display:block;font-size:var(--fs-2xl);font-weight:700;letter-spacing:var(--track-head);font-variant-numeric:tabular-nums;margin-bottom:2px}
@media(min-width:760px){.cards{gap:16px}.node{padding:24px}}

/* Something published later: a dashed box. */
.placeholder{margin-top:24px;border:1px dashed var(--secondary);border-radius:var(--corner-lg);padding:20px;max-width:780px}
.placeholder p+p{margin-top:4px;font-size:var(--fs-base);color:var(--secondary)}

/* Term and explanation lists (support, terms, privacy, trust). */
.terms{margin-top:8px;max-width:66ch}
.terms dt{font-weight:600;font-size:var(--fs-md);line-height:1.35;letter-spacing:var(--track-sub);margin-top:24px}
.terms dd{margin-top:6px;font-size:var(--fs-base);line-height:1.65;color:var(--secondary)}
.terms dd strong{color:var(--primary);font-weight:600}
@media(min-width:760px){.terms dt{font-size:var(--fs-lg)}}

/* Reference tables (docs, trust). */
.tools{width:100%;max-width:960px;border-collapse:collapse;margin-top:28px;font-size:var(--fs-base);line-height:1.55}
.tools caption{text-align:left;font-size:var(--fs-xs);color:var(--secondary);padding-bottom:12px}
.tools th,.tools td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.tools thead th{padding-block:0 10px;font-size:var(--fs-xs);font-weight:500;line-height:1.5;color:var(--secondary)}
.tools tbody th{font-weight:600}
.tools td{color:var(--secondary)}
.tools code{overflow-wrap:anywhere;color:var(--primary)}
.tools col.t{width:34%}
.tools .num{text-align:right;font-variant-numeric:tabular-nums;color:var(--primary)}
@media(min-width:760px){.tools col.t{width:32%}.tools code{overflow-wrap:normal}}
/* On a phone each row stacks: the term above its explanation. The ARIA roles in the markup keep it a
   table for screen readers, because browsers drop table semantics once a table's display is changed. */
@media(max-width:759px){
 .tools thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .tools,.tools caption,.tools tbody,.tools tr,.tools th,.tools td{display:block}
 .tools tbody tr{padding-block:14px;border-bottom:1px solid var(--line)}
 .tools tbody tr:first-child{border-top:1px solid var(--line)}
 .tools th,.tools td{padding:0;border:0}
 .tools td{margin-top:6px}
 .tools .num{text-align:left}
}

/* Home: the hero. One centred lockup and one light: the mark, with the site's only glow, above the
   wordmark and its line at a fixed ratio that sets both lines to one width, so the pair scales as one unit. The mark's two halves close as
   the page loads, because only an agreed answer is sent. Pure CSS: pages run no script. */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-block:40px 72px}
.hero .pill{margin-bottom:40px}
.hero-mark{position:relative;isolation:isolate;width:clamp(64px,17vw,104px);margin-bottom:36px}
.hero-mark::before{content:"";position:absolute;z-index:-1;inset:-150%;background:radial-gradient(closest-side,rgba(255,255,255,.17),rgba(255,255,255,.06) 42%,rgba(255,255,255,0))}
.mechanism{display:block;width:100%;height:auto;overflow:visible;fill:var(--primary)}
.lockup{display:flex;flex-direction:column;align-items:center;font-size:var(--fs-mark);font-weight:700;line-height:1}
.lockup-word{letter-spacing:var(--track-caps);margin-right:calc(-1 * var(--track-caps));line-height:.86;background:linear-gradient(180deg,#FFFFFF 38%,#AEB4B8);-webkit-background-clip:text;background-clip:text;color:transparent}
.lockup-line{margin-top:.16em;font-size:calc(var(--lockup-ratio) * 1em);font-weight:500;line-height:1.1;letter-spacing:var(--track-tight)}
.hero-sub{margin-top:32px;max-width:36ch;font-size:var(--fs-md);line-height:1.5;letter-spacing:var(--track-sub);color:var(--secondary);text-wrap:balance}
.hero-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px}
.hero-actions .note{font-size:var(--fs-sm);color:var(--secondary)}
@media(min-width:900px){
 .hero{padding-block:72px 64px}
 .hero-sub{font-size:var(--fs-lg)}
}
@media(prefers-reduced-motion:no-preference){
 .mechanism .upper{animation:close-upper 1100ms 250ms cubic-bezier(.22,.7,.22,1) both}
 .mechanism .lower{animation:close-lower 1100ms 250ms cubic-bezier(.22,.7,.22,1) both}
 @keyframes close-upper{from{transform:translate(46px,-46px)}to{transform:none}}
 @keyframes close-lower{from{transform:translate(-46px,46px)}to{transform:none}}
}

/* Home: how it works. A real sequence, so the steps are numbered. */
.steps{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:18px;border:1px solid var(--primary);border-radius:var(--corner-md);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums}
.steps .node p{font-size:var(--fs-base);line-height:1.55}
@media(min-width:760px){.steps{grid-template-columns:repeat(3,1fr);gap:16px}}

/* Home: the five checks, each a link to its product section. Two wide, then three. */
.check-grid{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:12px}
.pillars{list-style:none;padding:0;margin-bottom:0}
/* The pillars and the steps are read, not clicked, so they sit under a hairline rather than in a box. On
   the home page whitespace alone divides the sections, so each hairline marks a column, never a section. */
.hero~.flow-section{border-top:0}
.pillars .node,.steps .node,.cards-plain .node{border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0}
.pillars .node p{font-size:var(--fs-base);line-height:1.55}
.node .pillar-checks{margin-top:16px;font-size:var(--fs-sm);font-weight:500;color:var(--primary)}
.check-card{display:flex;flex-direction:column;height:100%;text-decoration:none;transition:border-color 160ms}
.check-card:hover{border-color:var(--primary);text-decoration:none}
.check-card:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.check-card p{flex:1;font-size:var(--fs-base);line-height:1.55}
.check-card .card-more{margin-top:18px;font-size:var(--fs-sm);font-weight:500}
@media(min-width:760px){
 .check-grid{grid-template-columns:repeat(6,1fr);gap:16px}
 .check-grid li{grid-column:span 3}
 .check-grid li:nth-child(n+3){grid-column:span 2}
}

/* Products: the strengths every check shares. */
.strengths{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--corner-lg);overflow:hidden}
.strengths li{padding:18px 16px;background:var(--ground);font-size:var(--fs-sm);line-height:1.45;color:var(--secondary)}
.strengths strong{display:block;margin-bottom:4px;font-size:var(--fs-base);font-weight:600;color:var(--primary)}
@media(min-width:900px){.strengths{grid-template-columns:repeat(4,1fr)}.strengths li{padding:22px 24px}}
/* Products: jump links to each check. */
.jump{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--corner-md);font-size:var(--fs-sm);font-weight:500;text-decoration:none}
.jump a:hover{border-color:var(--primary)}
/* Products: one section per check. Name, promise and price on the left; what it catches on the right. */
.product{display:grid;gap:24px;padding-block:44px;border-top:1px solid var(--line)}
.product h2{font-size:var(--fs-2xl);line-height:1.05;font-weight:700;letter-spacing:var(--track-head)}
.promise{margin-top:12px;font-size:var(--fs-lg);line-height:1.35;font-weight:500;letter-spacing:var(--track-sub);max-width:26ch}
.price-tag{margin-top:24px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
.price-tag b{font-size:var(--fs-2xl);font-weight:700;letter-spacing:var(--track-head);font-variant-numeric:tabular-nums}
.price-tag span{font-size:var(--fs-sm);color:var(--secondary)}
.product h3{font-size:var(--fs-sm);font-weight:600;line-height:1.5;color:var(--secondary)}
.catches{list-style:none;margin:12px 0 0;padding:0}
.catches li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:var(--fs-base);line-height:1.5}
.catches li:first-child{border-top:1px solid var(--line)}
.catches li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:10px;background:var(--primary);border-radius:5px 0 5px 0}
.use-when{margin-top:20px;font-size:var(--fs-base);line-height:1.55;color:var(--secondary)}
.use-when strong{color:var(--primary);font-weight:600}
.product .more-link{margin-top:8px}
@media(min-width:900px){
 .product{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;padding-block:64px}
 .product h2{font-size:var(--fs-3xl)}
}

/* Pricing: the price table stays a table at every width; four short columns fit a phone. */
.price-table{width:100%;max-width:880px;border-collapse:collapse;margin-top:28px;font-size:var(--fs-base);line-height:1.4}
.price-table caption{text-align:left;font-size:var(--fs-xs);color:var(--secondary);padding-bottom:12px}
.price-table th,.price-table td{padding:14px 8px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.price-table thead th{padding-block:0 10px;font-size:var(--fs-xs);font-weight:500;color:var(--secondary)}
.price-table th:first-child{padding-left:0;text-align:left}
.price-table tbody th{font-weight:600}
.price-table td.none{color:var(--secondary)}
@media(min-width:760px){.price-table{font-size:var(--fs-md)}.price-table th,.price-table td{padding-inline:16px}}
.figures{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.figures dt{font-size:var(--fs-base);font-weight:600;line-height:1.35;letter-spacing:var(--track-sub);color:var(--primary)}
.figures dd+dt{margin-top:14px}
.figures .fig{font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--track-head);font-variant-numeric:tabular-nums;margin-right:6px}
.figures dd{margin-top:5px;font-size:var(--fs-xs);line-height:1.5;color:var(--secondary)}
.protections{align-items:start}
.protections dt{margin-top:16px;font-size:var(--fs-base);font-weight:600;line-height:1.35;letter-spacing:var(--track-sub)}
.protections dd{margin-top:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--secondary)}

/* Docs: contents beside the text from 900px; a two-column list above it on a phone. */
.docs{display:grid;gap:8px;padding-bottom:24px}
.toc{border-block:1px solid var(--line);padding-block:12px 16px}
.toc p{padding-block:6px 4px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.toc a{display:flex;align-items:center;min-height:40px;font-size:var(--fs-sm);font-weight:500;color:var(--secondary);text-decoration:none}
.toc a:hover{color:var(--primary);text-decoration:underline}
.doc-body{min-width:0}
.doc-body .flow-section:first-child{padding-top:32px}
.doc-body p+p{margin-top:16px}
@media(min-width:900px){
 .docs{grid-template-columns:200px minmax(0,1fr);gap:64px}
 .toc{position:sticky;top:calc(var(--bar) + 32px);align-self:start;border:0;padding:56px 0 0}
 .toc ol{grid-template-columns:1fr}
 .toc a{min-height:36px}
 .doc-body .flow-section:first-child{padding-top:56px}
}
.api-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.api-steps .step-n{margin-bottom:14px}

/* Trust: headline evidence. A figure is never shown bare: each carries a plain label. */
.evidence{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:24px}
.evidence li{border-top:1px solid var(--primary);padding-top:14px}
.evidence b{display:block;font-size:var(--fs-3xl);font-weight:700;line-height:1;letter-spacing:var(--track-display);font-variant-numeric:tabular-nums}
.evidence span{display:block;margin-top:10px;font-size:var(--fs-sm);line-height:1.45;color:var(--secondary);max-width:28ch}
@media(min-width:760px){.evidence{grid-template-columns:repeat(3,1fr);gap:32px}.evidence b{font-size:var(--fs-4xl)}}
.disclosure{margin-top:24px;max-width:960px;border-top:1px solid var(--line)}
.disclosure summary{display:flex;align-items:center;gap:16px;min-height:52px;list-style:none;font-size:var(--fs-base);font-weight:600;cursor:pointer}
.disclosure summary::-webkit-details-marker{display:none}
/* Plus when closed, minus when open. */
.disclosure summary::after{content:"+";margin-left:auto;font-size:var(--fs-lg);font-weight:400;line-height:1}
.disclosure[open] summary::after{content:"\2212"}
.disclosure summary:hover{text-decoration:underline;text-underline-offset:4px}
.disclosure .tools{margin-top:8px}

/* Agents: the live figures. Four stat tiles, then checks by product as labelled bars. */
.stats-status{margin-top:20px;font-size:var(--fs-sm);color:var(--secondary)}
/* Offline, the panel below says it in full; the status line stays for screen readers only. */
.stats[data-state="offline"] .stats-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stats-status[data-state="live"]::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--primary);vertical-align:1px}
.stat-grid{margin-top:28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.stat{border-top:1px solid var(--primary);padding-top:14px;min-width:0}
.stat dd{font-size:clamp(var(--fs-2xl),9vw,var(--fs-4xl));font-weight:700;line-height:1;letter-spacing:var(--track-display);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat dt{margin-top:10px;font-size:var(--fs-sm);line-height:1.4;color:var(--secondary)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.stats[data-state="offline"] .stat dd{color:var(--secondary)}
@media(min-width:900px){.stat-grid{grid-template-columns:repeat(4,1fr);gap:32px}}
.by-product{margin-top:40px;max-width:880px}
.by-product h3{font-size:var(--fs-md);font-weight:600;letter-spacing:var(--track-sub)}
.bar-list{list-style:none;margin:12px 0 0;padding:0}
.bar-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding-block:12px;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.bar-list .value{font-variant-numeric:tabular-nums;font-weight:600}
.bar-list .track{grid-column:1/-1;height:6px}
.bar-list .fill{display:block;height:100%;min-width:4px;background:var(--primary);border-radius:0 3px 3px 0}
.offline{margin-top:28px;max-width:640px}
.offline h3{font-size:var(--fs-lg);font-weight:600;letter-spacing:var(--track-tight)}
.offline p{margin-top:6px;font-size:var(--fs-base);color:var(--secondary)}
.stats[data-state="live"] .offline,.stats[data-state="loading"] .offline{display:none}
.stats:not([data-state="live"]) .by-product{display:none}
.leaderboard{margin-top:32px;display:grid;gap:16px}
@media(min-width:900px){.leaderboard{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}}

/* Token: the mark, large, above a short statement. */
.token-hero{display:grid;gap:40px;padding-block:56px 72px}
.token-mark{display:block;width:128px;height:128px;fill:var(--primary)}
.token-copy .pill{margin-bottom:24px}
.token-copy .lockup{font-size:var(--fs-display)}
.lockup-start{align-items:flex-start}
.token-copy h1:not(.lockup){font-size:var(--fs-display);font-weight:700;line-height:1;letter-spacing:var(--track-display);max-width:12ch;text-wrap:balance}
.token-copy p:not(.pill){margin-top:20px;font-size:var(--fs-md);line-height:1.55;color:var(--secondary);max-width:46ch}
.token-copy p strong{color:var(--primary);font-weight:600}
.token-copy .btn{margin-top:32px}
@media(min-width:900px){.token-hero{grid-template-columns:auto minmax(0,1fr);gap:80px;align-items:center;padding-block:112px 128px}.token-mark{width:260px;height:260px}.token-copy p:not(.pill){font-size:var(--fs-lg)}}

/* Support form. The page's own script sends it as JSON to the API; without the script the button stays
   disabled, and the page CSP (form-action 'none') stops a plain submit either way. */
.support-form{display:grid;gap:28px;margin-top:32px;max-width:62ch}
.field label{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.35;letter-spacing:var(--track-sub)}
.field .hint{display:block;margin-top:4px;font-size:var(--fs-sm);line-height:1.5;color:var(--secondary)}
.field input,.field select,.field textarea{display:block;width:100%;margin-top:12px;padding:12px 14px;min-height:48px;background:var(--ground);color:var(--primary);border:1px solid var(--secondary);border-radius:0;font:inherit;font-size:var(--fs-base);line-height:1.5}
.field textarea{min-height:180px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--primary)}
.send{justify-self:start;min-height:48px;padding:0 32px;background:var(--primary);color:var(--ground);border:1px solid var(--primary);border-radius:var(--corner-lg);font:inherit;font-size:var(--fs-base);font-weight:600;cursor:pointer}
.send:hover{text-decoration:underline;text-underline-offset:4px}
.send:disabled{background:var(--ground);color:var(--secondary);border-color:var(--secondary);text-decoration:none;cursor:not-allowed}
.status{min-height:1.6em;font-size:var(--fs-base);line-height:1.6}
.status:empty{display:none}
.status[data-state="ok"],.status[data-state="error"]{padding-left:16px;border-left:2px solid var(--primary)}
.no-script{font-size:var(--fs-base);color:var(--secondary)}
/* The bot trap sits off-screen and out of the tab order; people never see or reach it. */
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Get started. The install prompt is the one white-bordered box on the page: it is the thing to take.
   Its script shows the copy buttons and turns the app sections into tabs; without it every section
   shows in full and the buttons stay hidden. */
.copy[hidden],.tab-panel[hidden],.release-live[hidden],.release-pending[hidden],[data-fingerprint-row][hidden]{display:none}
.step-h{display:flex;align-items:center;gap:14px}
.step-h .step-n{flex:none;margin:0;letter-spacing:0}
.prompt{margin-top:28px;max-width:900px;border:1px solid var(--primary);border-radius:var(--corner-lg);overflow:hidden}
.prompt-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 10px 10px 20px;border-bottom:1px solid var(--line)}
/* The prompt scrolls inside its box. A faint glow at the bottom edge says there is more; it is covered
   once the end is reached, because the cover scrolls with the text and the glow stays put. */
.prompt-text{margin:0;padding:18px 20px 22px;max-height:min(56vh,480px);overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs);line-height:1.65;background:linear-gradient(to top,var(--ground) 40%,rgba(0,0,0,0)) center bottom/100% 44px no-repeat local,linear-gradient(to top,rgba(138,144,148,.45),rgba(0,0,0,0)) center bottom/100% 28px no-repeat scroll,var(--ground)}
.prompt-text:focus-visible{outline-offset:-4px}
.gs-note{margin-top:16px;font-size:var(--fs-sm);color:var(--secondary);max-width:62ch}
.gs-note a{color:var(--primary)}
.gs-sub{margin-top:40px;font-size:var(--fs-lg);font-weight:600;line-height:1.3;letter-spacing:var(--track-tight)}
/* A command or a line to paste: wrapped rather than scrolled, so it needs no keyboard scrolling. */
.cmd{display:flex;align-items:stretch;margin-top:16px;max-width:900px;border:1px solid var(--secondary);border-radius:var(--corner-md);overflow:hidden}
.cmd code{flex:1;min-width:0;padding:13px 16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fs-xs);line-height:1.6}
.cmd .copy{flex:none;min-width:76px;min-height:44px;padding:0 16px;background:var(--ground);color:var(--primary);border:0;border-left:1px solid var(--secondary);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.cmd .copy:hover{background:var(--primary);color:var(--ground)}
.cmd .copy:focus-visible{outline-offset:-4px}
.app-tabs{margin-top:16px;max-width:900px}
.tablist{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tab{min-height:44px;padding:0 16px;background:var(--ground);color:var(--secondary);border:1px solid var(--line);border-radius:var(--corner-md);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer}
.tab:hover{color:var(--primary);border-color:var(--primary)}
.tab:focus-visible{outline-offset:3px}
.tab[aria-selected="true"]{background:var(--primary);color:var(--ground);border-color:var(--primary)}
.tab-panel{padding-top:20px}
.tab-panel:focus-visible{outline-offset:4px}
.app-tabs:not(.is-tabbed) .tab-panel+.tab-panel{margin-top:20px;border-top:1px solid var(--line)}
.is-tabbed .tab-name{display:none}
.tab-name{margin-bottom:8px;font-size:var(--fs-md);font-weight:600}
.tab-panel>p{font-size:var(--fs-base);line-height:1.6;color:var(--secondary);max-width:62ch}
.tab-panel>p+p,.tab-panel>noscript+p{margin-top:16px}
.tab-panel .tab-foot{margin-top:12px;font-size:var(--fs-sm)}
.tab-panel .tab-foot a{color:var(--primary)}
@media(min-width:600px){.tablist{display:flex;flex-wrap:wrap}}
/* Things to say to your agent: quoted requests, marked as speech rather than boxed like a command. */
.say{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;max-width:900px}
.say li{padding:4px 0 4px 16px;border-left:2px solid var(--line);font-size:var(--fs-base);line-height:1.55}
@media(min-width:760px){.say{grid-template-columns:1fr 1fr;gap:12px 24px}}
/* The four answers a check can give, and what the agent does with each. */
.answers{margin-top:20px;max-width:720px}
.answers div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:4px 16px;padding-block:12px;border-bottom:1px solid var(--line)}
.answers div:first-child{border-top:1px solid var(--line)}
.answers dt{font-size:var(--fs-base);font-weight:600}
.answers dd{font-size:var(--fs-base);line-height:1.55;color:var(--secondary)}
@media(max-width:479px){.answers div{grid-template-columns:1fr}}
/* The release: a status pill until launch, then its version, key fingerprint and files. */
.release{margin-top:24px;max-width:900px}
.release-facts div{display:flex;flex-wrap:wrap;gap:4px 16px;padding-block:10px;border-bottom:1px solid var(--line);font-size:var(--fs-base)}
.release-facts dt{color:var(--secondary)}
.release-facts code{overflow-wrap:anywhere}
.downloads{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.downloads a{display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--corner-md);font-size:var(--fs-sm);font-weight:500;text-decoration:none}
.downloads a:hover{border-color:var(--primary);text-decoration:underline}
.disclosure>p{margin-top:16px;font-size:var(--fs-base);line-height:1.6;color:var(--secondary);max-width:66ch}
.disclosure>.cmd{margin-top:12px}
.disclosure>:last-child{margin-bottom:24px}
@media(min-width:760px){.prompt-bar{padding-left:28px}.prompt-text{padding:22px 28px 26px;font-size:var(--fs-sm)}.cmd code{font-size:var(--fs-sm)}}

/* Good practices: the Docs layout, categories beside the questions from 900px. Each question is a native
   disclosure, so the page runs no script. Its risk rating sits in the summary, visible while it is closed. */
.risk-key{margin-top:24px;max-width:720px}
.risk-key div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:4px 16px;align-items:baseline;padding-block:10px;border-bottom:1px solid var(--line)}
.risk-key div:first-child{border-top:1px solid var(--line)}
.risk-key dd{font-size:var(--fs-sm);line-height:1.55;color:var(--secondary)}
.risk{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border:1px solid var(--primary);border-radius:var(--corner-sm);font-size:var(--fs-xs);font-weight:600;line-height:1.3;white-space:nowrap;justify-self:start}
.risk[data-risk="critical"]{background:var(--primary);color:var(--ground)}
.risk[data-risk="medium"]{border-style:dashed;border-color:var(--secondary);color:var(--secondary)}
.practices{list-style:none;margin:28px 0 0;padding:0;max-width:880px;border-top:1px solid var(--line)}
.practice{border-bottom:1px solid var(--line)}
.practice summary{display:grid;grid-template-columns:minmax(0,1fr) 24px;grid-template-areas:"q sign" "risk sign";gap:10px 16px;padding-block:18px;list-style:none;cursor:pointer}
.practice summary::-webkit-details-marker{display:none}
.practice summary h3{grid-area:q;font-size:var(--fs-md);font-weight:600;line-height:1.35;letter-spacing:var(--track-sub)}
.practice summary .risk{grid-area:risk}
/* Plus when closed, minus when open, as on the Trust page. */
.practice summary::after{content:"+";grid-area:sign;justify-self:end;font-size:var(--fs-lg);font-weight:400;line-height:1.2}
.practice[open] summary::after{content:"\2212"}
.practice summary:hover h3{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.practice summary:focus-visible{outline-offset:2px}
.practice-body{padding-bottom:28px;max-width:66ch}
.practice-body>p{font-size:var(--fs-base);line-height:1.65}
.practice-body .fit{margin-top:14px;padding-left:16px;border-left:2px solid var(--primary);font-size:var(--fs-sm);color:var(--secondary)}
.practice-body .fit a{color:var(--primary)}
.practice-body h4{margin-top:22px;font-size:var(--fs-sm);font-weight:600;line-height:1.4}
.practice-body .nosrc{margin-top:8px;font-size:var(--fs-sm);line-height:1.55;color:var(--secondary)}
.sources{list-style:none;margin:8px 0 0;padding:0}
.sources li{padding:8px 0 8px 16px;border-left:1px solid var(--line);font-size:var(--fs-sm);line-height:1.55;color:var(--secondary)}
.sources li+li{margin-top:6px}
.sources a{color:var(--primary);font-weight:500;overflow-wrap:anywhere}
.sources .host{display:block;font-size:var(--fs-xs)}
/* Rules and judgement: the one white-bordered box on the page. */
.callout{margin-top:40px;max-width:880px;border:1px solid var(--primary);border-radius:var(--corner-lg);padding:24px 20px}
.callout h3{font-size:var(--fs-lg);font-weight:600;line-height:1.25;letter-spacing:var(--track-tight)}
.callout-cols{display:grid;gap:20px;margin-top:20px}
.callout-cols h4{font-size:var(--fs-base);font-weight:600}
.callout-cols p{margin-top:6px;font-size:var(--fs-sm);line-height:1.6;color:var(--secondary)}
.callout .more-row{margin-top:12px}
@media(min-width:760px){
 .practice summary{grid-template-columns:minmax(0,1fr) auto 24px;grid-template-areas:"q risk sign";align-items:baseline;gap:8px 20px;padding-block:20px}
 .practice summary h3{font-size:var(--fs-lg)}
 .callout{padding:32px 36px}
 .callout-cols{grid-template-columns:1fr 1fr;gap:36px}
}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){
 .brand-symbol,.wordmark,.mechanism,.token-mark{fill:CanvasText}:focus-visible{outline-color:Highlight}
 .site-nav a[aria-current="page"]::after,.bars::before,.bars::after,.menu-nav a[aria-current="page"]::before,.catches li::before,.bar-list .fill,.pill::before{background:CanvasText}
 .btn,.node,.placeholder,.prompt,.cmd,.cmd .copy,.tab,.downloads a,.jump a,.field input,.field select,.field textarea,.send,.risk,.callout{border-color:CanvasText}
 .tab[aria-selected="true"]{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
 .lockup-word{background:none;color:CanvasText}.stat,.evidence li,.expect li{border-top-color:CanvasText}
}
@media print{.practice-body{display:block}:root{color-scheme:light;--ground:#FFFFFF;--primary:#000000;--secondary:#444444;--line:#AAAAAA}.site-header{position:static}.site-nav,.nav-cta,.menu-button,.menu,.footer-nav,.toc,.copy,.tablist{display:none!important}.prompt-text{max-height:none;overflow:visible}.tab-panel[hidden]{display:block}}