/* Round 8q: the pages that moved out of the React app into the site (Download, Privacy, Terms, Support, the comparisons;
   the data catalog adds data-catalog.css). Site kit only: tokens.css colours, Saira Condensed display, Bricolage body,
   JetBrains Mono labels, --cta for the one action colour, the 1320 px content container. Light and dark from the
   tokens. The page text comes from the app's content modules (app-pages.mjs); this file only lays it out. */
.pg-hero,.pg-section,.legal-layout{width:min(1320px,calc(100% - 96px));margin-inline:auto}
.pg-hero{padding:88px 0 64px;border-bottom:1px solid var(--line)}
.pg-hero h1{max-width:18ch;margin:26px 0 22px;font:700 clamp(52px,6.6vw,104px)/.94 "Saira Condensed",sans-serif;letter-spacing:-.02em;color:var(--text);text-wrap:balance}
.pg-eyebrow,.pg-kicker{display:inline-flex;align-items:center;gap:10px;font:500 11.5px/1.4 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--muted2)}
.pg-eyebrow::before{content:"";width:18px;height:2px;background:var(--cta-text)}
.pg-live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--live)}
.pg-eyebrow .pg-live{order:-1}
@media (prefers-reduced-motion:no-preference){.pg-live{animation:pg-live 1.8s ease-in-out infinite}}
@keyframes pg-live{0%,100%{opacity:1}50%{opacity:.35}}
.pg-lead{max-width:680px;margin:0;font-size:18px;line-height:1.65;color:var(--body)}
.pg-updated{margin:-6px 0 22px;font:500 12px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--muted2)}
.pg-note{margin:22px 0 0;font:500 11.5px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--muted2)}
.pg-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.pg-ghost{display:inline-flex;align-items:center;min-height:52px;padding:0 22px;border:1px solid var(--edge);border-radius:var(--r-xs);color:var(--text);font-size:15px;font-weight:500;text-decoration:none;transition:border-color .2s,color .2s}
.pg-ghost:hover{border-color:var(--edge-hover)}
.pg-section{padding:72px 0 0}
.pg-section-head{display:grid;gap:14px;margin-bottom:34px;max-width:760px}
.pg-section-head h2,.pg-card h2{margin:0;font:700 clamp(32px,3.4vw,46px)/1.02 "Saira Condensed",sans-serif;letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.pg-section-head p{margin:0;font-size:16px;line-height:1.6;color:var(--body)}
.pg-card{padding:30px 30px 32px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-elevated)}
.pg-card h3{margin:14px 0 8px;font:700 26px/1.1 "Saira Condensed",sans-serif;color:var(--text)}
.pg-card p{margin:0;font-size:15px;line-height:1.6;color:var(--body)}
.pg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.pg-prose{font-size:16px;line-height:1.7;color:var(--body)}
.pg-prose p{margin:0 0 14px}.pg-prose p:last-child{margin-bottom:0}
.pg-prose a,.legal-prose a,.sp-contact a{color:var(--accent);text-underline-offset:4px}
.pg-close{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.pg-close>div{display:grid;gap:12px;max-width:640px}
main#main{padding-bottom:110px}

/* Download */
.dl-action{margin-top:34px}
.dl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dl-cta-button{gap:12px;min-height:60px;padding:18px 28px;font-size:16px;font-weight:700}
.dl-cta-button svg{flex-shrink:0}
.dl-cta-disabled{background:transparent;color:var(--muted2);border-color:var(--edge);cursor:default}
.dl-cta-disabled:hover{background:transparent}
.dl-cta-note{font:500 11.5px/1.6 var(--font-mono);letter-spacing:.06em;color:var(--muted2)}
.dl-cta-zip{font-size:13px;color:var(--muted2);text-underline-offset:3px}
.dl-cta-zip:hover{color:var(--text)}
.dl-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--line);overflow:hidden}
.dl-steps li{display:flex;flex-direction:column;gap:10px;padding:30px 26px;background:var(--bg-elevated)}
.dl-steps .pg-kicker{color:var(--cta-text)}
.dl-steps h3{margin:0;font:700 24px/1.1 "Saira Condensed",sans-serif;color:var(--text)}
.dl-steps p{margin:0;font-size:14.5px;line-height:1.6;color:var(--body)}
.dl-pipeline{margin:22px 0 0;font:500 11.5px/1.6 var(--font-mono);letter-spacing:.08em;color:var(--muted2);overflow-wrap:anywhere}

/* Privacy and Terms */
.legal-hero .pg-lead{max-width:780px;font-size:16.5px;line-height:1.75}
.legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;padding-top:56px}
.legal-toc{align-self:start;position:sticky;top:calc(var(--site-nav-h,68px) + 32px);max-height:calc(100vh - var(--site-nav-h,68px) - 64px);overflow:auto}
.legal-toc nav{display:grid;gap:2px}
.legal-toc nav a{padding:7px 0 7px 12px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--muted2);text-decoration:none;transition:color .2s,border-color .2s}
.legal-toc nav a:hover{color:var(--text)}
.legal-toc nav a[aria-current="true"]{color:var(--text);border-left-color:var(--cta-text)}
.legal-doc{min-width:0;max-width:780px}
.legal-section{scroll-margin-top:calc(var(--site-nav-h,68px) + 24px)}
.legal-section+.legal-section{margin-top:40px;padding-top:40px;border-top:1px solid var(--line)}
.legal-section h2{margin:0 0 18px;font:700 30px/1.1 "Saira Condensed",sans-serif;letter-spacing:-.005em;color:var(--text)}
.legal-prose{font-size:16px;line-height:1.75;color:var(--body);overflow-wrap:anywhere}
.legal-prose p{margin:0 0 14px}.legal-prose p:last-child{margin-bottom:0}
.legal-prose ul,.legal-prose ol{margin:0 0 14px;padding-left:22px}
.legal-prose li{margin:0 0 7px}
.legal-prose strong{color:var(--text);font-weight:700}
.legal-prose code{font:13.5px var(--font-mono);padding:1px 6px;border-radius:var(--r-xs);background:var(--code-bg)}
/* Round 8q fix: each legal table scrolls inside its own box (app-pages.mjs wrapLegalTables), so a wide table never
   widens the page. The edge shadows (scroll-attached under content-attached covers) show only while there is more
   table to scroll to on that side; a thin scrollbar stays visible as the second cue. Cookie names (code) may break
   anywhere, so the cookie table can fit a phone column without scrolling at all. */
.legal-table{max-width:100%;margin:6px 0 16px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  background:linear-gradient(to right,var(--bg) 30%,transparent) left center/40px 100% no-repeat local,linear-gradient(to left,var(--bg) 30%,transparent) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,color-mix(in srgb,var(--text) 22%,transparent),transparent) left center/14px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,color-mix(in srgb,var(--text) 22%,transparent),transparent) right center/14px 100% no-repeat scroll}
.legal-table:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.legal-prose table{width:100%;margin:6px 0 16px;border-collapse:collapse;font-size:14.5px}
.legal-table>table{margin:0}
.legal-prose td code{overflow-wrap:anywhere}
.legal-prose th,.legal-prose td{padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top}
.legal-prose th{color:var(--text);background:var(--bg-elevated);font-weight:600}
.legal-companion{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted2)}
.legal-companion a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--edge);border-radius:var(--r-xs);font:500 12.5px/1 var(--font-mono);letter-spacing:.05em;color:var(--text);text-decoration:none}
.legal-companion a:hover{border-color:var(--edge-hover)}

/* Support (#1585 B): a guides-first hub. No mono kickers or eyebrows; the guide cards are portal.css's .guide-group and
   .guide-card, filtered in place by portal.js. */
.sp-search{display:grid;gap:8px;max-width:560px;margin-top:30px}
.sp-search label{font-size:15px;font-weight:600;color:var(--text)}
.sp-search input{width:100%;min-height:52px;box-sizing:border-box;padding:12px 16px;border:1px solid var(--edge);border-radius:var(--r-xs);background:var(--bg-elevated);color:var(--text);font:inherit;font-size:16px}
.sp-search input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sp-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:26px}
.sp-head h2,.sp-channels>h2{margin:0;font:700 clamp(32px,3.4vw,46px)/1.02 "Saira Condensed",sans-serif;letter-spacing:-.01em;color:var(--text)}
.sp-head a{color:var(--accent);font-size:15px;font-weight:600;text-decoration:none;text-underline-offset:4px}
.sp-head a:hover{text-decoration:underline}
.sp-channels ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:28px 0 0;padding:0;list-style:none}
.sp-channels li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 26px 28px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-elevated)}
.sp-channels h3{margin:0;font:700 24px/1.15 "Saira Condensed",sans-serif;color:var(--text)}
.sp-channels li p{flex:1;margin:0 0 6px;font-size:15px;line-height:1.6;color:var(--body)}
.sp-hours{display:grid;gap:8px;margin-top:20px;font-size:15px;line-height:1.6;color:var(--body)}
.sp-hours p{margin:0}
.sp-live{display:flex;align-items:center;gap:10px;color:var(--text)}
.sp-live[hidden]{display:none}
.sp-live[data-state="online"] .pg-live{background:var(--success)}
.sp-live[data-state="offline"] .pg-live{background:var(--muted2);animation:none}
.sp-workbench{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.sp-report ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;margin:26px 0 0;padding:0;list-style:none}
.sp-report li{display:flex;gap:14px}
.sp-report li>span{font:700 20px/1.2 "Saira Condensed",sans-serif;color:var(--cta-text)}
.sp-report strong{display:block;margin-bottom:4px;font-size:15px;color:var(--text)}
.sp-security{border-color:var(--ai-border)}
.sp-security p{margin:14px 0 18px}
.sp-security a{color:var(--text);font-weight:600;text-underline-offset:4px}
.sp-integration{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:48px;align-items:start}
.sp-integration h2{margin:0;font:700 clamp(30px,3vw,40px)/1.05 "Saira Condensed",sans-serif;color:var(--text)}
.sp-contact{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:0;font-size:14px;color:var(--body)}
.sp-contact>span:first-child{font-size:14px;letter-spacing:.04em;color:var(--muted2)}
.sp-contact{margin-top:72px;padding-top:26px;border-top:1px solid var(--line)}

/* The comparisons */
.cmp-sources{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:26px 0 0;font-size:14px}
.cmp-sources span{font:500 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted2)}
.cmp-sources a{color:var(--text);text-underline-offset:4px}
.cmp-matrix-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-elevated)}
.cmp-matrix-wrap:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cmp-matrix{width:100%;min-width:720px;border-collapse:collapse;font-size:15px;line-height:1.5}
.cmp-matrix th,.cmp-matrix td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.cmp-matrix tbody tr:last-child>*{border-bottom:0}
.cmp-matrix thead th{font:500 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);background:var(--bg-surface)}
.cmp-matrix thead th:nth-child(2){color:var(--cta-text)}
.cmp-matrix tbody th{width:22%;font-weight:600;color:var(--text)}
.cmp-matrix td{color:var(--body)}
.cmp-matrix td:nth-child(2){color:var(--text)}
.cmp-editorial{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cmp-editorial h2{margin:14px 0 14px;font-size:clamp(26px,2.4vw,32px)}

@media (max-width:1023px){
  .pg-grid,.cmp-editorial{grid-template-columns:minmax(0,1fr)}
  .dl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-workbench,.sp-integration{grid-template-columns:minmax(0,1fr);gap:24px}
  .sp-channels ul{grid-template-columns:minmax(0,1fr)}
  .legal-layout{grid-template-columns:200px minmax(0,1fr);gap:40px}
}
@media (max-width:900px){
  .pg-hero,.pg-section,.legal-layout{width:calc(100% - 48px)}
}
@media (max-width:640px){
  .pg-hero,.pg-section,.legal-layout{width:calc(100% - 32px)}
  .pg-hero{padding:48px 0 40px}
  .pg-hero h1{font-size:clamp(40px,11vw,56px)}
  .pg-lead{font-size:16px}
  .pg-section{padding-top:52px}
  .pg-card{padding:24px 20px 26px}
  .pg-links>*{flex:1 1 100%;justify-content:center}
  .dl-cta,.dl-cta-button{width:100%}
  .dl-cta-button{justify-content:center}
  .dl-steps{grid-template-columns:minmax(0,1fr)}
  .sp-report ol{grid-template-columns:minmax(0,1fr)}
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:32px}
  .legal-toc{position:static;max-height:none;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .legal-section h2{font-size:26px}
  .legal-prose{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){.pg-ghost,.legal-toc nav a{transition:none}}
[data-download-signed-out][hidden]{display:none}
.pg-eyebrow:has(.pg-live)::before{display:none}
.pg-card>.pg-kicker+h2{margin-top:14px}
@media (max-width:640px){
  .cmp-matrix-wrap{overflow:visible;border:0;background:none}
  .cmp-matrix{min-width:0;display:block}
  .cmp-matrix thead{display:none}
  .cmp-matrix tbody{display:grid;gap:12px}
  .cmp-matrix tr{display:grid;gap:10px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-elevated)}
  .cmp-matrix th,.cmp-matrix td{display:block;width:auto;padding:0;border:0}
  .cmp-matrix tbody th{font:700 22px/1.1 "Saira Condensed",sans-serif}
  .cmp-matrix td::before{content:attr(data-label);display:block;margin-bottom:3px;font:500 10.5px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
  .cmp-matrix td:nth-child(2)::before{color:var(--cta-text)}
}
@media (max-width:640px){.legal-prose table{font-size:13.5px}.legal-prose th,.legal-prose td{padding:8px;overflow-wrap:normal;hyphens:auto}}
/* Round 8q fix (/data/ layout shift): the catalog hero sits above a tall explorer, so the web-font swap (Google Fonts,
   display=swap, as on every page) used to rewrap its heading and lead and push the explorer 100 px (CLS 0.23-0.28).
   Until the web fonts arrive, the hero draws in local fallbacks scaled to the web fonts' measured widths and line
   metrics (size-adjust and overrides, measured in Chromium against Arial and Courier New), and its measures are in em,
   not ch, so the box does not change width when the font changes. The web fonts still win as soon as they load. */
@font-face{font-family:"Saira Condensed Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("Arial");font-weight:700;size-adjust:68.09%;ascent-override:167.43%;descent-override:64.62%;line-gap-override:0%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans");font-weight:400;size-adjust:105.17%;ascent-override:88.43%;descent-override:25.67%;line-gap-override:0%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold");font-weight:700;size-adjust:101.82%;ascent-override:91.34%;descent-override:26.52%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono");font-weight:500;size-adjust:100%;ascent-override:102%;descent-override:30%;line-gap-override:0%}
.dc-page .dc-hero>.dc-kicker{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace}
.dc-page .dc-hero>h1{max-width:10.494em;font-family:"Saira Condensed","Saira Condensed Fallback",sans-serif}
.dc-page .dc-hero>p{max-width:41.664em;font-family:"Bricolage Grotesque","Bricolage Grotesque Fallback",var(--font-sans)}