/* Secondary pages (roles.html, terms.html, privacy.html and the like), 2026-09-30.
   Same tokens as styles.css; this file only adds the page header, the plan
   cards and the reading column for the legal text. Cards are one pixel wider
   than the column so their hairlines sit on the lattice's grid lines, like
   the home page's (see the on-the-grid block at the end of styles.css). */
.page-head { padding: 72px 0 36px; }
.page-head h1 { font-size: clamp(32px, 4.6vw, 48px); letter-spacing: -.02em; max-width: 780px; white-space: pre-line; }   /* a \n in the title is a line break (Josie, 2026-09-30) */
/* The lede sits in a bounding box so the lattice does not run through the
   text (Josie, 2026-09-30: "hard to read"). Same surface and hairline as
   the cards; ten cells wide plus one pixel so the right edge is on a line. */
.page-head .lede { max-width: calc(72px * 10 + 1px); color: var(--muted); font-size: 15px; line-height: 1.6; margin: 24px 0 0; padding: 20px 24px; background: var(--card); border: 1px solid var(--line); }
.page-head .lede a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
/* Lede + call-out row (pricing, 2026-09-30: Josie, "some type of call out on
   the right side of the hero"). The row is one pixel wider than the column
   so both boxes sit on grid lines: the lede takes what is left (nine cells
   at full width), one cell of air, then a three-cell raised block that is
   one link. Without a call-out (`.solo`) the lede keeps its ten cells. */
.head-row { display: grid; grid-template-columns: 1fr calc(72px * 3 + 1px); column-gap: calc(72px - 1px); align-items: stretch; width: calc(100% + 1px); margin-top: 24px; }
.head-row .lede { margin: 0; max-width: none; }
.head-row.solo { grid-template-columns: 1fr; width: 100%; }
.head-row.solo .lede { max-width: calc(72px * 10 + 1px); }
.callout { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 20px; background: var(--blue); box-shadow: var(--raise-lg); color: #fff; transition: box-shadow .15s, transform .15s; }   /* blue block, white type (Josie, 2026-09-30: "add color, maybe the blue and white type") */
.callout:hover { transform: translateY(-1px); }
.callout:active { box-shadow: var(--press-lg); transform: none; }
.callout .eyebrow { margin: 0 0 2px; color: rgba(255, 255, 255, .72); }
.callout b { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
.callout p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .84); }
.callout .more { margin-top: auto; padding-top: 12px; font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 255, 255, .55); }
.callout:hover .more { text-decoration-color: #fff; }
@media (prefers-reduced-motion: reduce) { .callout { transition: none; } }
.page-head .meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.page-head .meta b { color: var(--fg); font-weight: 600; }

/* ---- pricing: four plan cards in a two-by-two card, hover = the raised block ---- */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--card); border: 1px solid var(--line); width: calc(100% + 1px); }
.plan { position: relative; z-index: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px 26px 30px; border-bottom: 1px solid var(--line); }
.plan:nth-child(odd) { border-right: 1px solid var(--line); }
.plan:nth-last-child(-n+2) { border-bottom: 0; }
.plan::before { content: ""; position: absolute; inset: 0; background: var(--neu); box-shadow: var(--raise-lg); opacity: 0; transition: opacity .2s; z-index: -1; pointer-events: none; }
.plan:hover::before { opacity: 1; }
@media (hover: none) { .plan:hover::before { opacity: 0; } }
.plan-top { display: flex; justify-content: space-between; align-items: center; }
.plan .idx { font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
.plan h2 { font-size: 22px; }
.plan-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.price b { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1; }
.price b.ask { font-size: 19px; }
.price span { font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.plan-time { margin: 0; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.plan-time i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.plan ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.plan li { position: relative; padding-left: 18px; }
.plan li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--verm); }
.plan .btn { align-self: flex-start; margin-top: 12px; }
.p-note { margin: 14px 0 0; font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.p-note:empty { display: none; }
.next .btn { margin-top: 4px; }
.ar-links { justify-content: flex-start; margin-top: 18px; }
.ar-links p { margin: 0; font-size: 14px; }

/* ---- open roles: the home page's cell grid with a mark per role ---- */
.roles .glyph { font-size: 11px; letter-spacing: 0; }
.cell .cell-act { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.roles .cell { align-items: flex-start; padding-top: 30px; }
.roles .cell .glyph { margin-top: 2px; }

/* ---- legal: contents rail + reading column on a card ---- */
.doc { display: grid; grid-template-columns: 190px 1fr; gap: 48px; align-items: start; background: var(--card); border: 1px solid var(--line); width: calc(100% + 1px); padding: 40px 44px 48px; }
.toc { position: sticky; top: 76px; display: grid; gap: 4px; font: 600 11px/1.7 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toc .eyebrow { margin-bottom: 8px; }
.toc a:hover, .toc a[aria-current] { color: var(--fg); }
.prose { max-width: 660px; font-size: 15px; line-height: 1.7; min-width: 0; }
.prose h2 { font-size: 22px; margin: 44px 0 12px; scroll-margin-top: 84px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin: 0 0 7px; }
.prose li p { margin: 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--muted); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 600; }
.prose .muted { color: var(--muted); }
.prose code { font: 500 13px var(--mono); background: var(--neu); padding: 1px 6px; border-radius: 4px; }
/* the summary at the top of a legal page: three raised lines */
.summary { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.summary li { padding: 14px 18px; background: var(--neu); box-shadow: var(--raise-md); border-radius: 12px; font-size: 14px; line-height: 1.5; display: flex; gap: 12px; align-items: flex-start; }
.summary li i { flex: 0 0 auto; width: 8px; height: 8px; margin-top: .5em; border-radius: 50%; background: var(--blue); }
/* the one rule, set like a pull quote and pressed into the surface */
.rule { margin: 20px 0 22px; padding: 22px 24px; background: var(--neu); box-shadow: var(--press-lg); border-radius: 14px;
  font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: 19px; line-height: 1.35; letter-spacing: -.01em; }
/* numbered tests */
.checks { list-style: none; padding: 0; counter-reset: c; }
.checks li { position: relative; padding-left: 40px; margin-bottom: 12px; counter-increment: c; }
.checks li::before { content: counter(c, decimal-leading-zero); position: absolute; left: 0; top: .25em; font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--muted); }
/* qualifies / does not, side by side */
.status { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); margin: 18px 0 20px; }
.status > div { padding: 18px 20px; }
.status > div + div { border-left: 1px solid var(--line); }
.status b { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 12px; }
.status b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.status .no b::before { background: var(--verm); }
.status ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.status li { margin-bottom: 8px; }
.status li:last-child { margin-bottom: 0; }
/* what the site collects: a definition list as rows */
.rows { margin: 0 0 14px; border: 1px solid var(--line); }
.rows > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.55; }
.rows > div:last-child { border-bottom: 0; }
.rows dt { font: 600 11px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; padding-top: 2px; }
.rows dd { margin: 0; }

@media (max-width: 840px) {
  .page-head { padding: 52px 0 24px; }
  .head-row { grid-template-columns: 1fr; row-gap: 16px; width: 100%; }
  .callout b { font-size: 34px; }
  .plans { grid-template-columns: 1fr; }
  .plan:nth-child(odd) { border-right: 0; }
  .plan:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .plan:last-child { border-bottom: 0; }
  .doc { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 32px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .toc .eyebrow { flex: 0 0 100%; margin-bottom: 2px; }
  .status { grid-template-columns: 1fr; }
  .status > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .rows > div { grid-template-columns: 1fr; gap: 6px; }
  .rule { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .plan::before { transition: none; } }

/* where each model sits (privacy.html §4): three tiers, colour from least
   exposure (blue) through magenta to most (vermilion), the site's three accents */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin: 18px 0 20px; }
.tiers .scale { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font: 600 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tiers .scale i { flex: 1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue), var(--mag), var(--verm)); }
.tier { --tc: var(--blue); position: relative; padding: 18px 18px 20px; border-top: 4px solid var(--tc); min-width: 0; }
.tier + .tier { border-left: 1px solid var(--line); }
.tier.t2 { --tc: var(--mag); }
.tier.t3 { --tc: var(--verm); }
:root:not([data-theme="light"]) .tier.t1 { --tc: #4A5EFF; }
:root:not([data-theme="light"]) .tier.t2 { --tc: #E04FCB; }
:root:not([data-theme="light"]) .tier.t3 { --tc: #FF5A3C; }
.tier .tn { display: block; font: 600 11px/1 var(--mono); letter-spacing: .12em; color: var(--tc); margin-bottom: 10px; }
.tier h4 { font-size: 15px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.01em; }
.tier .tin { margin: 0 0 12px; padding: 10px 12px; background: var(--neu); box-shadow: var(--press-md, var(--press-lg)); border-radius: 10px; font-size: 13px; line-height: 1.45; }
.tier .tin b { display: block; font: 600 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tier .models { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.tier .models li { margin: 0; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; font: 500 12px/1.3 var(--sans); }
.tier .risk { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.tier .risk li { position: relative; padding-left: 14px; margin-bottom: 8px; }
.tier .risk li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--tc); }
.tier .risk li:last-child { margin-bottom: 0; }
.tier .risk a { color: var(--fg); }
@media (max-width: 840px) {
  .tiers { grid-template-columns: 1fr; }
  .tier + .tier { border-left: 0; }
}