/* ==========================================================================
   ChipFans site.css V26.0.8
   One stylesheet for every page. Component markup: docs/components.md.

   The visual language is a photomask: chrome (black) on quartz (white), one
   interconnect blue, and color only inside the layout drawing. Lines carry
   meaning, so the only borders are:
     dashed 2px chrome   an authorized scope, always labelled "Authorized scope"
     solid 2px chrome    ChipFans' own perimeter (the security-contact frame)
     4px left rule       a binding statement
     1px chrome          header bottom, footer top, table rows
     plot frame          a window onto a drawing
   Square corners, no shadows, no cards. Every spacing and line-height is a
   multiple of the 4px lambda.

   Widths:  >= 1200 desktop | 901-1199 narrow desktop (H2 at 112% width, the
   service pair takes the full row; 901-1099 also gives the hero copy, the rail
   head and the trust frame's text one more column, moves the content that
   starts on column 6 to column 7, and uses the four-column table) | <= 900 one
   column with the Menu button | <= 560 phone.
   ========================================================================== */

/* ---------- 1. Fonts: Archivo variable, self-hosted (assets/fonts, OFL) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */
:root {
  --quartz: #FFFFFF;     /* page: the clear mask blank */
  --chrome: #000000;     /* ink, primary buttons, rules, scope and perimeter lines */
  --oxide: #555B66;      /* secondary text: section intros, captions, footer notes */
  --metal: #2C46D6;      /* link underlines, focus ring, hover; metal layers in the drawing */
  --wafer: #F2F4FD;      /* footer band (metal at 6% on quartz) */
  --poly: #D0243A;       /* drawings only */
  --diffusion: #13895A;  /* drawings only */
  --lambda: 4px;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --maxw: 1240px;        /* content width: 12 columns */
  --gap: 24px;           /* column gutter */
  --pad: 40px;           /* smallest distance from content to the viewport edge */
  --section: 96px;       /* space above each section */
  --inset: 24px;         /* text inset inside a dashed scope box */
  --outdent: 24px;       /* how far a scope box reaches out past the text it holds, on both sides */
  --plot-h: 480px;       /* height of the hero plot window */
  /* Measures. In Archivo 1ch (the width of "0") is 0.573em, wider than an average letter,
     so 47ch holds at most about 64 characters of running text, and 40ch about 44-52 at
     lead size. Both scale with the text they are used on. */
  --measure: 47ch;
  --measure-lead: 39ch;
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--quartz);
  color: var(--chrome);
  font-family: var(--font);
  font-size: 1.125rem;      /* 18px */
  line-height: 1.75rem;     /* 28px */
  font-weight: 400;
  font-stretch: 100%;
  font-kerning: normal;
  font-synthesis: none;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--metal); }
strong, b { font-weight: 600; }
::selection { background: var(--metal); color: var(--quartz); }
:focus-visible { outline: 3px solid var(--metal); outline-offset: 3px; }

/* ---------- 4. Type (font sizes in rem so a reader's default text size applies; px in comments) ---------- */
h1, .h1 { font-size: 3.75rem; line-height: 4rem; font-weight: 600; font-stretch: 125%; letter-spacing: -0.015em; }      /* 60/64 */
h2, .h2 { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; font-stretch: 125%; letter-spacing: -0.01em; }     /* 36/40 */
h3, .h3 { font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; font-stretch: 112%; letter-spacing: -0.005em; }    /* 24/28 */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, td, th, figcaption { text-wrap: pretty; }
p { max-width: var(--measure); }
.h1-narrow { font-stretch: 112%; }          /* inner-page H1 longer than 45 characters */
.lead { font-size: 1.3125rem; line-height: 2rem; max-width: var(--measure-lead); }   /* 21/32 */
.small { font-size: 0.875rem; line-height: 1.25rem; }                                /* 14/20 */
.muted { color: var(--oxide); }
.nowrap { white-space: nowrap; }
/* Media-query ems follow the reader's default text size, not the page's: this matches only
   when the window is under 20 times that size (never at the default 16px, from 320px up; up
   to 479px at 24px, 639px at 32px). There a compound kept whole could be wider than the line,
   so it may break rather than push the page sideways. */
@media (max-width: 19.99em) { .nowrap { white-space: normal; } }

/* ---------- 5. Utilities ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; z-index: 20; left: 16px; top: 12px;
  padding: 12px 16px;
  background: var(--chrome); color: var(--quartz);
  font-size: 1rem; line-height: 1.25rem; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.skip-link:hover { color: var(--quartz); }

/* ---------- 6. Grid: 12 columns, 1240px max, 24px gutters; full-bleed lines on both sides ----------
   Every page band is a .grid. Children sit in the content columns by default.
   Named lines: full-start, content-start, "col 1" ... "col 12", content-end, full-end. */
.grid {
  display: grid;
  column-gap: var(--gap);
  grid-template-columns:
    [full-start] minmax(calc(var(--pad) - var(--gap)), 1fr)
    [content-start] repeat(12, [col] minmax(0, calc((var(--maxw) - 11 * var(--gap)) / 12)))
    [content-end] minmax(calc(var(--pad) - var(--gap)), 1fr)
    [full-end];
}
.grid > * { grid-column: content; min-width: 0; }

/* ---------- 7. Sections and the rail: H2 in columns 1-4, content from column 6 ---------- */
main { padding-bottom: var(--section); }
.section { padding-top: var(--section); row-gap: 40px; }
.rail-head { grid-column: col 1 / span 4; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.rail-intro { color: var(--oxide); max-width: 36ch; }
.rail-body { grid-column: col 6 / content-end; }
.rail-body > * + * { margin-top: 24px; }
.wide { grid-column: content; }               /* a full-width row inside a rail section, e.g. a table */

/* ---------- 8. Header ---------- */
.site-header { border-bottom: 1px solid var(--chrome); background: var(--quartz); }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-height: 72px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  color: var(--chrome); text-decoration: none;
  font-size: 1.3125rem; line-height: 1.75rem; font-weight: 700; font-stretch: 125%; letter-spacing: -0.01em;   /* 21/28 */
}
.brand:hover { color: var(--chrome); }
.brand .hl { color: var(--metal); }
.brand-mark { width: 28px; height: 28px; flex: none; }
.nav-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
.nav-list a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  font-size: 1rem; line-height: 1.25rem; font-weight: 500;    /* 16/20 */
  text-decoration: none; text-underline-offset: 8px;
}
.nav-list a:hover { color: var(--chrome); text-decoration: underline 2px var(--metal); }
.nav-list a[aria-current="page"] { text-decoration: underline 2px var(--chrome); }
.nav-list .nav-contact { padding: 0 16px; border: 2px solid var(--chrome); font-weight: 600; }
.nav-list .nav-contact:hover,
.nav-list .nav-contact[aria-current="page"] { background: var(--chrome); color: var(--quartz); text-decoration: none; }
.menu-btn {
  display: none;
  align-items: center;
  min-height: 44px; padding: 0 16px;
  background: var(--quartz); color: var(--chrome);
  border: 2px solid var(--chrome); border-radius: 0;
  font: 600 1rem/1.25rem var(--font);
  cursor: pointer;
}
.menu-btn[aria-expanded="true"] { background: var(--chrome); color: var(--quartz); }

/* ---------- 9. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 22px;
  background: var(--chrome); color: var(--quartz);
  border: 2px solid transparent; border-radius: 0;    /* the transparent border still draws in forced-colors mode */
  font: 600 1rem/1.25rem var(--font); text-decoration: none; text-align: center;
  cursor: pointer;
}
.btn:hover, .btn:active { background: var(--metal); color: var(--quartz); }
.link {
  display: inline-block;
  padding-block: 8px;                       /* a 44px target: the 28px line plus 8px above and below */
  font-weight: 600;
  text-decoration: underline 2px var(--metal);
  text-underline-offset: 6px;
}
.link:hover { color: var(--metal); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.link-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0 32px; }
.link-list a { display: inline-flex; align-items: center; min-height: 44px; }
/* Stacked link rows: each offer of the service pair (so both offers' links line up at every
   width), and a link row of three or more in a rail body (so no row ends with a lone link). */
.pair-item .link-list,
.rail-body > .link-list:has(> li:nth-child(3)) { flex-direction: column; align-items: flex-start; }

/* ---------- 10. Page header for inner pages: plot slice band, then H1 and lead ---------- */
.page-head { padding-top: 40px; }
.band {
  grid-column: content-start / full-end;
  height: 162px;                            /* the 160px slice inside a 1px frame */
  border: 1px solid var(--chrome); border-right: 0;
  overflow: hidden;
  background: var(--quartz);
}
.band img { width: 2560px; height: 160px; max-width: none; }   /* 1:1 and never scaled: the band is a window */
.page-head > * + * { margin-top: 24px; }
.page-head > .band + * { margin-top: 48px; }
.page-head > .page-links { margin-top: 32px; }

/* ---------- 11. Statement: lead-size text on the 4px rule, for binding commitments ---------- */
.statement {
  border-left: 4px solid var(--chrome);
  padding-left: 20px;
  font-size: 1.3125rem; line-height: 2rem; font-weight: 500;     /* 21/32 */
  max-width: calc(var(--measure-lead) + 24px);                   /* the text keeps the lead measure */
}

/* ---------- 12. Lists ---------- */
/* The measure sits on the list, so item text ends on the same right edge as paragraphs and
   term lists; align-content keeps the 8px rhythm when a grid row (the service pair) is taller. */
.list { display: grid; gap: 8px; align-content: start; max-width: var(--measure); padding-left: 24px; list-style: square; }
.list > li { padding-left: 4px; }
.list > li::marker { color: var(--chrome); }
.terms { display: grid; gap: 20px; max-width: var(--measure); }   /* a dl of term + description pairs */
.terms dt { font-weight: 600; }
.terms dd { margin-top: 4px; }

/* ---------- 13. Service pair: two equal columns, rows aligned with subgrid ----------
   The pair sits side by side when its container gives it at least 640px. On narrow
   desktops (901-1199) the rail body holding it takes the full row under the rail head,
   so the two lines of work stay side by side at every desktop width. */
.rail-body, .wide { container-type: inline-size; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 16px; }
.pair-item { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; align-content: start; justify-items: start; }
.pair-item .list { margin-top: 4px; }
.pair-item .link-list { column-gap: 24px; }
@supports not (grid-template-rows: subgrid) {
  .pair-item { grid-row: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
}
@container (max-width: 639px) {
  .pair { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .pair-item { grid-row: auto; grid-template-rows: none; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1199px) {
    .pair { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
    .pair-item { grid-row: auto; grid-template-rows: none; }
  }
}

/* ---------- 14. Step list: hanging numerals; the steps inside the authorized scope sit in the
   dashed box, which reaches out by --outdent on both sides, so its numerals keep the same
   vertical and its text keeps the same right edge as the steps outside it ---------- */
.process > .steps { padding-inline: calc(var(--inset) - var(--outdent)); }
.steps { list-style: none; display: grid; gap: 24px; }
.step { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; }
.step-num { font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; font-stretch: 125%; font-variant-numeric: tabular-nums; }   /* 24/28 */
.step-title { font-size: 1.3125rem; line-height: 1.75rem; font-weight: 600; font-stretch: 112%; letter-spacing: -0.005em; }      /* 21/28 */
.step-body > p { margin-top: 4px; max-width: 44ch; }
.scope {
  position: relative;
  margin-top: 40px;
  margin-inline: calc(-1 * var(--outdent));
  padding: 32px calc(var(--inset) - 2px) 28px;
  border: 2px dashed var(--chrome);
}
.scope-label {
  position: absolute; top: -12px; left: calc(var(--inset) - 10px);   /* the label's text starts on the numeral vertical */
  padding: 0 8px;
  background: var(--quartz);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;       /* 14/20 */
}
.process > .scope + * { margin-top: 32px; }

/* ---------- 15. Engagement table: Step / What happens / Signed off by / Output ----------
   A real <table> with ARIA table roles, so screen readers keep the headers when the
   layout changes. 1100px and up: rows are subgrids of the page columns, so the step
   sits in the rail (columns 1-4) and the details start on column 6. 701-1099px: a
   four-column table. 700px and below: stacked rows that keep every label. Rows inside
   the authorized scope are one dashed row group, which, like the step-list box, reaches
   out by --outdent on both sides so every row rule ends on the content edges. */
.engagement { grid-column: content; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: subgrid; font-size: 1rem; line-height: 1.5rem; }   /* 16/24 */
.engagement thead, .engagement tbody, .engagement tr {
  display: grid; grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: subgrid;
}
.engagement thead, .engagement tbody { margin-inline: calc(-1 * var(--outdent)); padding-inline: var(--outdent); }
.engagement tr { padding-block: 20px; border-bottom: 1px solid var(--chrome); }
.engagement thead tr { padding-block: 0 12px; }
.engagement th, .engagement td { padding: 0; text-align: left; vertical-align: top; font-weight: 400; }
.engagement thead th { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.engagement tr > :nth-child(1) { grid-column: 1 / span 4; }
.engagement tr > :nth-child(2) { grid-column: 6 / span 3; }
.engagement tr > :nth-child(3) { grid-column: 9 / span 2; }
.engagement tr > :nth-child(4) { grid-column: 11 / span 2; }
.eng-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: baseline; row-gap: 8px; }
.eng-num { font-size: 1.5rem; line-height: 1.75rem; font-weight: 600; font-stretch: 125%; font-variant-numeric: tabular-nums; }
.eng-title { font-size: 1.3125rem; line-height: 1.75rem; font-weight: 600; font-stretch: 112%; letter-spacing: -0.005em; text-wrap: pretty; }
.eng-step .tag { grid-column: 2; justify-self: start; }
.engagement .eng-scope {
  position: relative;
  margin-top: 40px;
  padding-inline: calc(var(--outdent) - 2px);
  border: 2px dashed var(--chrome);
}
.engagement .eng-scope tr:last-child { border-bottom: 0; }
/* The label row is the label's positioning box, so the label's text starts on the numeral vertical. */
.engagement .eng-scope-head { position: relative; display: block; height: 0; padding: 0; border: 0; }
.engagement .eng-scope-head th {
  position: absolute; top: -12px; left: -8px;
  padding: 0 8px;
  background: var(--quartz);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap;
}
.engagement .eng-scope tr:nth-child(2) { padding-top: 32px; }
.tag {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid transparent;             /* draws in forced-colors mode, where the fill is dropped */
  background: var(--chrome); color: var(--quartz);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0;
}

/* ---------- 16. Trust frame: ChipFans' own perimeter, solid 2px ---------- */
.trust-frame {
  grid-column: content;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-columns: subgrid;
  row-gap: 24px;
  border: 2px solid var(--chrome);
  padding: 40px;
}
/* The text keeps to columns 1-4 like a rail head, so column 5 stays empty before the right half. */
.trust-text { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 16px; align-self: start; }
.trust-side { grid-column: 6 / -1; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.trust-contact { display: grid; justify-items: start; gap: 4px; }
.trust-k { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.address {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  min-height: 44px;                         /* a 44px target even on one line */
  font-size: 1.5rem; line-height: 2rem; font-weight: 600; font-stretch: 112%; letter-spacing: -0.005em;   /* 24/32 */
  text-decoration: underline 2px var(--metal); text-underline-offset: 6px;
  overflow-wrap: anywhere;
}
/* Until the owner supplies the address, the token's dashed line is the link's only underline. */
.address:has(.owner-input) { text-decoration: none; }
.address:hover { color: var(--metal); }
.inline-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 24px; }
.inline-links a { display: inline-flex; align-items: center; min-height: 44px; }
.trust-side .sectxt { align-self: stretch; margin-top: 16px; }

/* ---------- 17. security.txt card: the live fields under a black title bar ---------- */
/* The card is a size container. Narrower than 27.5rem (440px at the default text size: phones,
   and the trust frame from 901 to 1099px), each value goes under its field name, so an address
   or a date keeps its line instead of breaking mid-word. */
.sectxt { min-width: 0; container-type: inline-size; }
.sectxt-bar {
  margin: 0;
  max-width: none;
  padding: 9px 15px;
  border: 1px solid transparent;             /* draws in forced-colors mode, where the fill is dropped */
  background: var(--chrome); color: var(--quartz);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0;
  overflow-wrap: anywhere;
}
.sectxt-fields > div {
  display: grid; grid-template-columns: 152px minmax(0, 1fr); column-gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--chrome);
}
.sectxt-fields > div:last-child { border-bottom: 0; }   /* the frame's padding closes the card */
@container (max-width: 27.49rem) {
  .sectxt-fields > div { grid-template-columns: minmax(0, 1fr); }
}
.sectxt-fields dt { font-size: 0.875rem; line-height: 1.5rem; font-weight: 600; }
.sectxt-fields dd { font-size: 1rem; line-height: 1.5rem; overflow-wrap: break-word; }   /* URLs carry <wbr> break points */

/* ---------- 18. Identity block: registered details, reused in footer, about and trust ---------- */
.identity { display: grid; gap: 16px; }
.identity dt { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.identity dd { margin-top: 4px; }
.identity-note { color: var(--oxide); }

/* ---------- 19. Prose: policy text with an H2/H3 rhythm, lists and dl, at the body measure ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 20px; }
.prose > h3 { margin-top: 40px; }
.prose > h3 + * { margin-top: 12px; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 24px; }
.prose ul:not([class]) { list-style: square; }
.prose ul:not([class]) > li, .prose ol:not([class]) > li { padding-left: 4px; }   /* the text starts where a .list item's does */
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--chrome); }
.prose a:not([class]) { text-decoration: underline 2px var(--metal); text-underline-offset: 4px; }
.prose dl:not([class]) { display: grid; gap: 16px; }
.prose dl:not([class]) dt { font-weight: 600; }

/* ---------- 20. Contact channel ---------- */
.channel > * + * { margin-top: 20px; }
.channel h3 { margin-top: 32px; }

/* ---------- 21. Figure and caption ---------- */
.figure { min-width: 0; }
.caption, figcaption { font-size: 0.875rem; line-height: 1.25rem; color: var(--oxide); max-width: 64ch; }   /* small text: about 85 characters, two lines for the hero caption */
.figure > figcaption { margin-top: 12px; }

/* ---------- 22. CTA band and pointer line ---------- */
.cta-band .rail-body > p { font-size: 1.3125rem; line-height: 2rem; max-width: var(--measure-lead); }
.pointer { font-size: 1rem; line-height: 1.5rem; }
.pointer .link { display: inline; padding-block: 0; }   /* a link inside a sentence stays in the line */

/* ---------- 23. Owner input and review mode (open any page with #review) ----------
   .owner-input        an unknown value, always visible as a dashed token
   [data-owner-confirm] a commitment the owner must confirm; reads normally
   [data-owner-block]   ships only when the owner supplies or approves it; hidden
   In #review mode every confirm and block is outlined with its key. Components
   never use ::after, so review labels can. */
.owner-input {
  color: var(--metal);
  text-decoration: underline dashed 1px var(--metal);
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}
.owner-input::before {
  /* inline-block, so neither the dashed underline nor a link underline reaches the prefix */
  display: inline-block;
  margin-right: 6px;
  color: var(--oxide);
  font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0;
  content: "Owner to supply:";
}
/* In a value cell (dd) the prefix takes its own line above the value: a full-width inline-block, in flow. */
dd > .owner-input::before { width: 100%; margin: 0 0 4px; }
html:not(.review) [data-owner-block] { display: none !important; }
.review [data-owner-confirm],
.review [data-owner-block] { position: relative; outline: 2px solid var(--metal); outline-offset: 4px; }
.review [data-owner-block] { outline-color: var(--chrome); }
.review [data-owner-confirm]::after,
.review [data-owner-block]::after {
  position: absolute; z-index: 5; left: -6px; bottom: 100%; margin-bottom: 6px;
  padding: 0 6px;
  background: var(--metal); color: var(--quartz);
  font: 600 0.75rem/1rem var(--font); font-stretch: 100%; letter-spacing: 0;   /* 12/16 */
  white-space: nowrap; text-transform: none;
  content: "Confirm: " attr(data-owner-confirm);
}
.review [data-owner-block]::after { background: var(--chrome); content: "Owner block: " attr(data-owner-block); }
.review .owner-input { background: var(--wafer); }
/* text-level marks (a span inside a sentence, a paragraph, a list item other than a step): the
   label runs in the line, after the text, so it never covers the line above, however tight the
   spacing (a bullet list's 8px gap, the footer's 12px, the 16px under the trust frame's H2) */
.review span[data-owner-confirm]::after,
.review p:is([data-owner-confirm], [data-owner-block])::after,
.review li:not(.step):is([data-owner-confirm], [data-owner-block])::after { position: static; display: inline; margin: 0 0 0 4px; white-space: normal; }
/* rows of the identity block and the security.txt card: the label sits inside the row, at its right */
.review .sectxt-fields > [data-owner-block] { outline-offset: -2px; }
.review :is(.identity, .sectxt-fields) > :is([data-owner-confirm], [data-owner-block])::after { left: auto; right: 2px; top: 2px; bottom: auto; margin: 0; }
/* a security.txt card row's URL can reach its right edge: the label takes a grid line of its own at the row's foot */
.review .sectxt-fields > :is([data-owner-confirm], [data-owner-block])::after { position: static; grid-column: 1 / -1; justify-self: end; margin: 4px 0 0; }
/* full-bleed sections: outline inside the viewport and label at the content edge */
.review .grid[data-owner-confirm], .review .grid[data-owner-block] { outline-offset: -2px; }
.review .grid[data-owner-confirm]::after, .review .grid[data-owner-block]::after {
  left: max(var(--pad), (100% - var(--maxw)) / 2); top: 8px; bottom: auto; margin: 0;
}
/* table rows: outline and label inside the row, clear of the "Authorized scope" label and the next row */
.review tr[data-owner-confirm] { outline-offset: -2px; }
.review tr[data-owner-confirm]::after { left: auto; right: 2px; top: 2px; bottom: auto; margin: 0; }

/* ---------- 24. Footer ----------
   The link columns and the identity columns sit on the page columns: 6-7, 8-9 and 10-12
   (the widest for the address), the same lines in both rows. */
.site-footer { background: var(--wafer); border-top: 1px solid var(--chrome); padding: 64px 0 32px; row-gap: 48px; }
.footer-brand { grid-column: col 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-brand .brand { margin-top: -8px; }   /* the wordmark's text shares the top line of the column heads; 44px target kept */
.footer-brand p { color: var(--oxide); font-size: 1rem; line-height: 1.5rem; max-width: 34ch; }
.footer-nav, .footer-identity .identity {
  grid-column: col 6 / content-end;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-columns: subgrid;
  column-gap: var(--gap); row-gap: 24px;
}
.footer-nav > :nth-child(1), .footer-identity .identity > :nth-child(1) { grid-column: 1 / span 2; }
.footer-nav > :nth-child(2), .footer-identity .identity > :nth-child(2) { grid-column: 3 / span 2; }
.footer-nav > :nth-child(3), .footer-identity .identity > :nth-child(3) { grid-column: 5 / span 3; }
.footer-head { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; }
.footer-nav ul { list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-size: 1rem; line-height: 1.5rem; text-decoration: none; }
.footer-nav a:hover { color: var(--chrome); text-decoration: underline 2px var(--metal); text-underline-offset: 4px; }
.footer-identity { grid-column: content; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-columns: subgrid; row-gap: 16px; }
.footer-identity-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 8px; }
.footer-identity-head p { color: var(--oxide); font-size: 1rem; line-height: 1.5rem; max-width: 34ch; }
.footer-identity .identity { grid-column: 6 / -1; }
.footer-identity dd { font-size: 1rem; line-height: 1.5rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; color: var(--oxide); font-size: 0.875rem; line-height: 1.25rem; }
.footer-base p { margin: 0; }
.footer-base .version { margin-left: 12px; }

/* ---------- 25. Hero (home page only) ---------- */
.hero { padding-top: 56px; grid-template-rows: auto auto auto 1fr; }
.hero-title { grid-column: content; grid-row: 1; margin-bottom: 40px; }
.hero-title .line { display: block; }
.hero-copy { grid-column: col 1 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: 24px; }
.hero-actions { grid-column: col 1 / span 5; grid-row: 3; margin-top: 32px; align-self: start; }
.hero .plot { grid-column: col 6 / full-end; grid-row: 2 / span 3; }

/* ---------- 26. Hero plot: a window onto the drawing (tools/plot generates the SVG) ---------- */
.plot { margin: 0; min-width: 0; container-type: inline-size; }
.plot-canvas {
  position: relative;
  height: var(--plot-h);
  overflow: hidden;
  border: 1px solid var(--chrome); border-right: 0;
  background: var(--quartz);
}
.plot-svg { position: absolute; top: 0; left: 0; width: 1600px; height: 560px; max-width: none; }
.plot-svg .ann-label { font-family: var(--font); font-size: 14px; font-weight: 500; font-stretch: 100%; }   /* drawing units, not rem */
/* The legend is a grid of six cells, "Layers" first: one row when the window is wide,
   three columns or two columns when it is not, so a row never ends with a lone cell. */
.layers {
  display: grid; grid-template-columns: auto; justify-content: start; align-items: center;
  column-gap: 16px;
  padding: 4px 8px 4px 12px;
  border: 1px solid var(--chrome); border-top: 0; border-right: 0;
}
.layers-label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.layer-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 0.875rem; line-height: 1.25rem; cursor: pointer; }
.layer-toggle input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--chrome); cursor: pointer; }
.swatch { width: 28px; height: 16px; flex: none; }
.layer-toggle:has(input:not(:checked)) .swatch { opacity: .5; }
.plot figcaption { padding: 12px 16px 0; }
/* At the default 16px text size two columns fit from about 304px (labels wrap inside their
   cells), three need about 488px and one row about 806px. The thresholds are in rem, so a
   reader's larger default text size moves to fewer columns instead of pushing the last cell
   out of the window. One column is the base, so without container queries the legend never
   overflows. */
@container (min-width: 19rem) {
  .layers { grid-template-columns: repeat(2, auto); }
}
@container (min-width: 30.75rem) {
  .layers { grid-template-columns: repeat(3, auto); column-gap: 20px; padding: 0 16px; }
}
@container (min-width: 50.5rem) {
  .layers { grid-template-columns: repeat(6, auto); column-gap: 16px; }
  .layers-label { margin-right: 8px; }
}

/* Layer visibility, like a layout editor's layer palette. Metal 1 and contacts start hidden. */
.ly-m1, .ly-cut { visibility: hidden; }
.plot:has(#ly-m1:checked) .ly-m1,
.plot:has(#ly-cut:checked) .ly-cut { visibility: visible; }
.plot:has(#ly-top:not(:checked)) .ly-top,
.plot:has(#ly-poly:not(:checked)) .ly-poly,
.plot:has(#ly-diff:not(:checked)) .ly-diff,
.plot:has(#ly-top:not(:checked)) .ann-mesh,
.plot:has(#ly-diff:not(:checked)):has(#ly-poly:not(:checked)) .ann-key { visibility: hidden; }

/* The one moment of motion: layers appear in fabrication order, about 1.6s in all. */
@media (prefers-reduced-motion: no-preference) {
  .plot .ly { animation: ly-in .45s cubic-bezier(.2, .6, .2, 1) both; }
  .plot .ly-seal { animation-delay: 0s; }
  .plot .ly-diff { animation-delay: .25s; }
  .plot .ly-poly { animation-delay: .5s; }
  .plot .ly-m1 { animation-delay: .7s; }
  .plot .ly-cut { animation-delay: .9s; }
  .plot .ly-top { animation-delay: 1.1s; }
  .plot .ly-ann { animation-delay: 1.15s; }
}
@keyframes ly-in { from { opacity: 0; } }

/* ---------- 27. Responsive ---------- */
@media (max-width: 1199px) {
  /* narrow desktop and below: the service pair's rail body takes the whole row (901-1199) */
  .pair { column-gap: 32px; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  /* display headings switch to 112% width, like long inner-page H1s, so they keep to two lines */
  h2, .h2 { font-stretch: 112%; }
  .rail-body:has(> .pair) { grid-column: content; }
}

@media (min-width: 1100px) and (max-width: 1139px) {
  .hero-title { font-stretch: 118%; }       /* "Authorized security evaluation." stays on one line */
}

@media (max-width: 1099px) {
  h1, .h1 { font-size: 3rem; line-height: 3.25rem; }      /* 48/52 */
  .nav-list { column-gap: 16px; }

  /* Engagement table: a four-column table up to 1099px */
  .engagement { grid-template-columns: minmax(0, 4.5fr) minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr); column-gap: 16px; }
  .engagement thead, .engagement tbody, .engagement tr {
    grid-template-columns: minmax(0, 4.5fr) minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr); grid-template-columns: subgrid;
    column-gap: 16px;
  }
  .engagement tr > :nth-child(1) { grid-column: 1; }
  .engagement tr > :nth-child(2) { grid-column: 2; }
  .engagement tr > :nth-child(3) { grid-column: 3; }
  .engagement tr > :nth-child(4) { grid-column: 4; }
  .eng-step { grid-template-columns: 32px minmax(0, 1fr); }
  .eng-num { font-size: 1.3125rem; }
  .eng-title { font-size: 1.125rem; line-height: 1.5rem; }
}

@media (min-width: 901px) and (max-width: 1099px) {
  /* The hero copy, the rail head and the trust frame's text take one more column, so the
     inner vertical moves to column 7 with column 6 left empty, as column 5 is from 1100px:
     the hero plot, the rail body and the trust frame's right half all start on it. (A rail
     body holding the service pair still takes the full row, from the rule above.) */
  .hero-copy, .hero-actions { grid-column: col 1 / span 6; }
  .hero .plot { grid-column: col 7 / full-end; }
  .rail-head { grid-column: col 1 / span 5; }
  .rail-body { grid-column: col 7 / content-end; }
  .trust-text { grid-column: 1 / span 5; }
  .trust-side { grid-column: 7 / -1; }
  /* footer columns: equal thirds of columns 6-12, wide enough for the identity labels */
  .footer-nav, .footer-identity .identity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-nav > :nth-child(n), .footer-identity .identity > :nth-child(n) { grid-column: auto; }
}

@media (min-width: 901px) and (max-width: 999px) {
  /* keep the full navigation on one line down to 901px */
  :root { --pad: 32px; }
  .header-bar { column-gap: 16px; }
  .nav-list { column-gap: 12px; }
  .nav-list .nav-contact { padding: 0 12px; }
  /* a 12px gap keeps "Report a vulnerability" and the identity labels on one line */
  .footer-nav, .footer-identity .identity { column-gap: 12px; }
}

@media (min-width: 901px) and (max-width: 929px) {
  .hero-title { font-stretch: 118%; }       /* "Authorized security evaluation." stays on one line */
}

@media (max-width: 900px) {
  :root { --pad: 24px; --section: 72px; --outdent: 0px; --inset: 16px; }
  .grid { column-gap: 0; grid-template-columns: [full-start] var(--pad) [content-start] minmax(0, 1fr) [content-end] var(--pad) [full-end]; }
  .rail-head, .rail-body, .hero-copy, .hero-actions, .footer-brand, .footer-nav { grid-column: content; }
  .section { row-gap: 24px; }
  .rail-intro { max-width: var(--measure); }

  /* Header: a Menu button opens the nav below the bar once site.js has run (html.menu-js).
     Without scripting, or if site.js fails to load, the nav simply stays open. */
  .header-bar { flex-wrap: wrap; min-height: 64px; padding-block: 10px; }
  .site-nav { flex-basis: 100%; padding: 8px 0 16px; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-list a { width: 100%; min-height: 48px; justify-content: flex-start; font-size: 1.125rem; line-height: 1.5rem; }
  .nav-list .nav-contact { justify-content: center; margin-top: 12px; }
  .nav-list a[aria-current="page"] { text-underline-offset: 6px; }
  .menu-js .menu-btn { display: inline-flex; }
  .menu-js .site-nav { display: none; }
  .menu-js .menu-btn[aria-expanded="true"] + .site-nav { display: block; }

  /* Hero: text, then the actions, then the plot */
  .hero { padding-top: 32px; grid-template-rows: none; }
  .hero-title { margin-bottom: 24px; }
  .hero-copy { grid-row: 2; gap: 20px; }
  .hero-actions { grid-row: 3; margin-top: 32px; }
  .hero .plot { grid-column: content-start / full-end; grid-row: 4; margin-top: 40px; }

  .page-head { padding-top: 24px; }
  .page-head > .band + * { margin-top: 32px; }

  .engagement thead, .engagement tbody { padding-inline: var(--inset); }
  .engagement .eng-scope { padding-inline: calc(var(--inset) - 2px); }

  .trust-frame { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; }
  .trust-text, .trust-side { grid-column: 1; }

  .footer-identity { grid-template-columns: minmax(0, 1fr); }
  .footer-identity-head, .footer-identity .identity { grid-column: 1; }
  .footer-nav, .footer-identity .identity { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-nav > :nth-child(n), .footer-identity .identity > :nth-child(n) { grid-column: auto; }
}

@media (min-width: 561px) and (max-width: 900px) {
  /* the open menu's Contact keeps its natural width beside the left-aligned links */
  .nav-list .nav-contact { width: auto; padding: 0 24px; }
}

@media (min-width: 600px) and (max-width: 900px) {
  /* The home H1 at 44/48 and 112% width: "Authorized security evaluation." stays on one
     line from 740px (768 included); 600-739 takes three lines. */
  .hero-title { font-size: 2.75rem; line-height: 3rem; font-stretch: 112%; }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .menu-js .site-nav { transition: opacity .15s linear; }
  @starting-style { .menu-js .menu-btn[aria-expanded="true"] + .site-nav { opacity: 0; } }
}

@media (max-width: 700px) {
  /* Engagement table: stacked rows that keep every label (phones and small tablets) */
  .engagement { display: block; }
  .engagement thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .engagement tbody, .engagement tr, .engagement th, .engagement td { display: block; }
  .engagement tbody { margin: 0; padding: 0; }
  .engagement tr { padding: 20px var(--inset); }
  .engagement .eng-scope { margin-top: 40px; padding: 0; }
  .engagement .eng-scope tr { padding-inline: calc(var(--inset) - 2px); }
  .engagement .eng-scope-head { height: 0; padding: 0; }
  .engagement .eng-scope-head th { left: calc(var(--inset) - 10px); }
  .engagement td { margin-top: 12px; }
  .engagement td::before {
    content: attr(data-label);                          /* fallback for engines without the alt syntax */
    content: attr(data-label) / "";                     /* visible label, not read twice by screen readers */
    display: block;
    color: var(--oxide); font-size: 0.875rem; line-height: 1.25rem; font-weight: 600;
  }
}

@media (max-width: 599px) {
  h1, .h1 { font-size: 2rem; line-height: 2.25rem; font-stretch: 112%; letter-spacing: -0.01em; }   /* 32/36 */
  h2, .h2 { font-size: 1.5rem; line-height: 1.75rem; font-stretch: 118%; }                          /* 24/28 */
  h3, .h3 { font-size: 1.3125rem; line-height: 1.75rem; }                                            /* 21/28 */
  .lead, .statement, .cta-band .rail-body > p { font-size: 1.125rem; line-height: 1.75rem; }         /* 18/28 */
  .step-num { font-size: 1.3125rem; }
  .step-title { font-size: 1.125rem; line-height: 1.75rem; }
  .address { font-size: 1.3125rem; line-height: 1.75rem; }
  .brand { font-size: 1.1875rem; }                                                                   /* 19 */
}

@media (max-width: 560px) {
  :root { --pad: 16px; --section: 56px; --plot-h: 360px; }
  /* Phones: the plot comes before the actions, so it is in the first screen; the reading
     and focus order follows the rows where reading-flow is supported. */
  .header-bar { min-height: 56px; padding-block: 6px; }
  .hero { padding-top: 20px; reading-flow: grid-rows; }
  .hero-title { margin-bottom: 16px; }
  .hero-copy { gap: 16px; }
  .hero .plot { grid-row: 3; margin-top: 20px; }
  .hero-actions { grid-row: 4; margin-top: 24px; }
  .plot-svg { width: 1200px; height: 420px; }          /* the drawing at 0.75 */
  .plot-svg .ann-label { font-size: 18.67px; }          /* still 14px on screen */
  .band { height: 122px; }
  .band img { width: 1920px; height: 120px; }          /* the slice at 0.75, like the hero plot */
  .step { grid-template-columns: 36px minmax(0, 1fr); }
  .scope { padding-top: 28px; }

  .trust-frame { padding: 24px 16px; }
  .sectxt-fields > div { padding: 8px 12px; }
  .sectxt-bar { padding: 9px 11px; }

  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-identity .identity { grid-template-columns: minmax(0, 1fr); }
  .footer-base { flex-direction: column; }
}

@media (max-width: 359px) {
  /* The home H1 at 28/32: "Secure chip design." keeps to one line, so the title takes three
     lines instead of five. */
  .hero-title { font-size: 1.75rem; line-height: 2rem; }
}

/* ---------- 28. Print ---------- */
@media print {
  .skip-link, .menu-btn, .layers, .band { display: none !important; }
  .site-nav { display: block !important; }
  .site-footer { background: none; }
  a { text-decoration: none; }
  .plot-canvas { break-inside: avoid; }
}