/* tenseon.com · one stylesheet · brand: Tenseon identity round 3 (black and white only, square corners, one 69.3° cut)
   Two families: Archivo (wide, 600) for display and interface; Source Serif 4 for anything a person would say.
   The system monospace appears only where real source code is shown. */

@font-face { font-family: "Archivo"; src: url(/assets/fonts/archivo.woff2?v=e8f5ba765d) format("woff2"); font-weight: 400 600; font-stretch: 100% 112%; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/fonts/sourceserif4-400.woff2?v=56e505b9d2) format("woff2"); font-weight: 400; font-display: swap; }
/* metric-matched fallbacks so the font swap doesn't move the layout */
@font-face { font-family: "Archivo fb"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 104%; ascent-override: 84%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Serif fb"; src: local("Georgia"), local("Times New Roman"); size-adjust: 98%; ascent-override: 104%; descent-override: 33%; line-gap-override: 0%; }

:root {
  --paper: #FFFFFF; --ink: #0B0B0B; --ink-2: #5D5D5D; --steel: #717171; --mist: #E7E7E7; --rule: #E4E4E4; --well: #F4F4F4;
  --inv-paper: #0B0B0B; --inv-ink: #FFFFFF; --inv-ink-2: #A3A3A3; --inv-rule: #2D2D2D; --graphite: #2D2D2D;
  --sans: "Archivo", "Archivo fb", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", "Serif fb", Georgia, serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: 20px; --max: 1280px; --col-gap: 24px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F0F0F; --ink: #EEEEEE; --ink-2: #9F9F9F; --steel: #9F9F9F; --mist: #2D2D2D; --rule: #282828; --well: #191919;
    --inv-paper: #000000; --inv-ink: #EEEEEE; --inv-ink-2: #A3A3A3; --inv-rule: #353535; --graphite: #2D2D2D;
  }
}
@media (prefers-color-scheme: dark) { .ft { border-top: 1px solid var(--rule); } }
/* contrast-pairs --ink/--paper --ink-2/--paper --steel/--paper --ink/--well --ink-2/--well --inv-ink/--inv-paper --inv-ink-2/--inv-paper --paper/--ink */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); font-stretch: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
@media (max-width: 640px) { body { font-size: 16px; } }
img, svg { display: block; max-width: 100%; }
main { flex: 1 0 auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
p, ul, ol, dl, dd, figure, h1, h2, h3, h4, blockquote, table { margin: 0; }
ul[role=list], ol[role=list] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ft :focus-visible, .inv :focus-visible { outline-color: var(--inv-ink); }
::selection { background: var(--ink); color: var(--paper); }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
@media (min-width: 760px) { :root { --gutter: 40px; --col-gap: 32px; } }
.nw { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.mt20 { margin-top: 20px; } .mt28 { margin-top: 28px; } .mt40 { margin-top: 40px; } .mt64 { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- type ---------- */
h1, h2, h3, .h2, .h3 { font-family: var(--sans); font-weight: 600; font-stretch: 112%; text-wrap: balance; }
h1 { font-size: clamp(44px, 7vw, 104px); line-height: .96; letter-spacing: -.034em; }
h2, .h2 { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.024em; }
h3, .h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.01em; }
/* the section kicker: a short stroke at the brand's 69.3° angle, then the name */
.h2-s, h2.h2-s { font-size: clamp(30px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.024em; }
.say { font-family: var(--serif); font-size: clamp(18px, 1.45vw, 20px); line-height: 1.6; max-width: 33em; text-wrap: pretty; }
.say > * + * { margin-top: 1em; }
.prose { font-family: var(--serif); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.62; max-width: 33em; text-wrap: pretty; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--sans); font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; letter-spacing: -.018em; margin-top: 2.2em; }
.prose > h2:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.margin-note { font: 400 14px/1.55 var(--sans); color: var(--ink-2); border-top: 1px solid var(--ink); padding-top: 12px; max-width: 34ch; }
.label { font: 400 13px/1.4 var(--sans); color: var(--ink-2); }
code, pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; }
pre { overflow-x: auto; }
.link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; }

/* ---------- header ---------- */
.skip { position: absolute; left: 12px; top: -100px; z-index: 50; background: var(--ink); color: var(--paper); padding: 12px 16px; font-weight: 500; }
.skip:focus { top: 12px; }
.hd { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.hd-in { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.brand { display: block; padding: 8px 0; margin-right: auto; }
.lockup { height: 22px; width: auto; color: var(--ink); }
@media (min-width: 760px) { .lockup { height: 26px; } .hd-in { min-height: 76px; } }
.nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 10px 12px; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.menu { display: none; }
@media (max-width: 899px) {
  .hd .nav { display: none; }
  .menu { display: block; position: static; }
  .menu > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; padding: 0 4px; font-weight: 500; font-size: 15px; }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu > summary::after { content: ""; width: 14px; height: 8px; margin-left: 8px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
  .menu[open] > summary::after { height: 0; border-bottom: 0; }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 8px 0 20px; }
  .menu-panel ul { list-style: none; margin: 0; padding: 0 var(--gutter); }
  .menu-panel a { display: block; padding: 14px 0; font-size: 24px; font-weight: 600; font-stretch: 112%; letter-spacing: -.015em; text-decoration: none; border-top: 1px solid var(--rule); }
  .menu-panel a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; }
}
@media (max-width: 520px) { .hd-in { gap: 14px; } .hd .btn-s { min-height: 38px; padding-inline: 12px; font-size: 14px; } }

/* the preview tag (preview builds only; the launch build leaves it out) */
.preview { flex-basis: 100%; margin: 8px 0 0; border: 1px solid var(--inv-rule); color: var(--inv-ink-2); display: flex; gap: 10px; align-items: center; padding: 6px 10px; font: 500 12.5px/1.3 var(--sans); }
.preview a { color: var(--inv-ink); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font: 500 16px/1.2 var(--sans); text-decoration: none; cursor: pointer; border-radius: 0; transition: transform .12s var(--ease); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn .ar { display: inline-block; transition: transform .18s var(--ease); }
.btn:hover .ar { transform: translateX(3px); }
.btn-s { min-height: 42px; padding: 0 18px; font-size: 15px; white-space: nowrap; }
.btn-o { background: transparent; color: var(--ink); }
.btn-o[aria-current] { background: var(--ink); color: var(--paper); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

/* ---------- check marks: a quiet footnote-like link after the fact it supports ---------- */
.st, .mk-g { display: inline-block; width: .62em; height: .62em; border: 1.5px solid currentColor; vertical-align: .02em; flex: none; }
.st[data-status=pass], .mk[data-status=pass] .mk-g { background: currentColor; }
.st[data-status=fail], .mk[data-status=fail] .mk-g { background: linear-gradient(45deg, transparent 43%, currentColor 43% 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, currentColor 43% 57%, transparent 57%); }
.st[data-status=not-run], .mk[data-status=not-run] .mk-g { border-style: dotted; }
.mk { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; min-width: 24px; margin-left: .3em; padding: 0 2px; font: 500 12px/1 var(--sans); letter-spacing: 0; text-transform: lowercase; text-decoration: underline dotted 1px; text-underline-offset: 3px; color: var(--ink-2); vertical-align: .32em; white-space: nowrap; cursor: pointer; }
.mk:hover { color: var(--ink); text-decoration-style: solid; }
.mk .mk-g { width: 7px; height: 7px; border-width: 1.25px; }
.ft .mk, .inv .mk { color: var(--inv-ink-2); }
.note { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink-2); max-width: 62ch; }

/* ---------- home: hero ---------- */
.hero { padding-block: clamp(36px, 4.4vw, 64px) clamp(64px, 8vw, 120px); }
.hero-h { font-size: clamp(50px, 9.4vw, 136px); line-height: .9; letter-spacing: -.045em; max-width: 10ch; text-wrap: initial; }
@media (min-width: 900px) { .hero-h { max-width: none; } }
.hero-row { display: grid; gap: 48px; margin-top: clamp(32px, 3.4vw, 52px); }
.hero-lede { font-family: var(--serif); font-size: clamp(20px, 1.85vw, 26px); line-height: 1.45; max-width: 30em; text-wrap: pretty; }
.hero-act { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; margin-top: 32px; }
.hero-now { margin-bottom: clamp(16px, 1.8vw, 24px); font: 400 16px/1.4 var(--sans); }
.hero-now b { font-weight: 600; }
@media (min-width: 960px) {
  .hero-row { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  .hero-main { grid-column: 1 / span 6; }
  .hero-row > .doc { grid-column: 8 / -1; margin-top: .3em; }
}
@media (max-width: 520px) { .hero-act .btn { width: 100%; } }

/* The headline's last word is cut once, like the symbol: one straight line at 69.3°, and the part to the right of
   it lifts up the cut. "cheaper." is always on one line, so the cut looks the same at every width. The real text is
   the left part (.hcut-a); the right part is a copy drawn by CSS with empty alternative text, so it isn't in the page
   text or the heading's accessible name. It only switches on (class .fr) once Archivo has loaded, because the cut is
   positioned for Archivo's letter widths; without it, or without JavaScript, the word is simply whole. The line runs
   through --cx at mid-height with the brand slope (0.3778 across per 1 down). The moves are the symbol's, scaled to
   the cap height: kerf opens .065em, then lifts (.022em, -.058em). */
.hcut { display: inline-block; white-space: nowrap; }
html[data-cut=on].fr .hcut { --cx: 2.84em; --k: .1em; position: relative; }
html[data-cut=on].fr .hcut-a { display: inline-block; clip-path: polygon(-.5em calc(50% - 1em), calc(var(--cx) + .3778em) calc(50% - 1em), calc(var(--cx) - .3778em) calc(50% + 1em), -.5em calc(50% + 1em)); }
html[data-cut=on].fr .hcut::after {
  content: attr(data-text); content: attr(data-text) / ""; /* the second form gives it no accessible text */
  position: absolute; inset: 0; pointer-events: none; user-select: none;
  clip-path: polygon(calc(var(--cx) + .3778em) calc(50% - 1em), calc(100% + .5em) calc(50% - 1em), calc(100% + .5em) calc(50% + 1em), calc(var(--cx) - .3778em) calc(50% + 1em));
  transform: translate(calc(var(--k) + .035em), -.095em);
  animation: h-cut .8s var(--ease) .1s both;
}
@keyframes h-cut {
  0%, 18% { transform: translate(0, 0); }
  42% { transform: translate(var(--k), 0); animation-timing-function: var(--ease); }
  100% { transform: translate(calc(var(--k) + .035em), -.095em); }
}
@media (forced-colors: active) { html[data-cut=on].fr .hcut-a { clip-path: none; } html[data-cut=on].fr .hcut::after { content: none; } }
/* the symbol (where a page shows it large) performs the same cut */
.sym { width: 96px; height: auto; color: var(--ink); overflow: hidden; }
html[data-cut=on].fr .sym-r { animation: sym-cut .8s var(--ease) .1s both; }
@keyframes sym-cut {
  0%, 18% { transform: translate(-6.42px, 5.66px); }
  42% { transform: translate(-2.14px, 5.66px); animation-timing-function: var(--ease); }
  100% { transform: translate(0, 0); }
}

/* ---------- home: bands ---------- */
.band { padding-block: clamp(64px, 8.4vw, 128px); border-top: 1px solid var(--ink); }
.band-tight { padding-block: clamp(48px, 5.6vw, 80px) clamp(56px, 6.4vw, 96px); }
.band .say { margin-top: 28px; }

/* the spec document */
.g-spec { display: grid; gap: 32px; }
@media (min-width: 1000px) {
  .g-spec { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); row-gap: 0; align-items: start; }
  .g-spec > h2 { grid-column: 1 / span 5; grid-row: 1 / span 2; }
  .g-spec > .say { grid-column: 7 / -1; margin-top: 0; }
  .g-spec > .kinds { grid-column: 7 / -1; }
}
.kinds { margin-top: 40px; border-top: 1px solid var(--ink); }
.kinds > div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.kinds dd { margin: 0; font-size: 16px; color: var(--ink-2); }
@media (max-width: 480px) { .kinds > div { grid-template-columns: 1fr; gap: 6px; } }
.doc { border: 1px solid var(--ink); background: var(--paper); }
.doc-top { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--ink); font: 500 13px/1.4 var(--sans); }
.doc-top span + span { color: var(--ink-2); }
.doc-lines li { display: grid; grid-template-columns: 28px 1fr; gap: 8px 14px; align-items: baseline; padding: 14px 18px 15px; border-bottom: 1px solid var(--rule); }
.doc-lines .doc-c { grid-column: 2; justify-self: start; }
.doc-n { font: 500 12px/1 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.doc-lines p { font-size: 16px; line-height: 1.42; }
.doc-c { display: inline-block; font: 600 11.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .07em; padding: 3px 7px; white-space: nowrap; border: 1px solid var(--ink); }
.c-test { background: var(--ink); color: var(--paper); }
.c-rec { background: transparent; color: var(--ink); }
.c-sign { border: 0; padding: 4px 0 2px; border-bottom: 1.5px solid var(--ink); }
.doc-cap { padding: 12px 18px 14px; font: 400 14px/1.55 var(--serif); color: var(--ink-2); }
.doc-cap b { font: 500 13px var(--sans); color: var(--ink); }
@media (max-width: 600px) { .doc-top { flex-direction: column; gap: 2px; } }

/* how a switch works: four steps */
.steps { margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--ink); counter-reset: none; }
.steps li { display: grid; grid-template-columns: 56px 1fr; gap: 6px 20px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); align-items: baseline; }
.steps-n { grid-row: 1 / span 3; font-weight: 600; font-stretch: 112%; font-size: clamp(36px, 3.4vw, 48px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: clamp(19px, 1.7vw, 23px); }
.steps p { font-family: var(--serif); font-size: 18px; line-height: 1.5; max-width: 36em; text-wrap: pretty; }
.steps .steps-who { font: 600 13px/1.3 var(--sans); color: var(--ink); }
@media (min-width: 900px) {
  .steps li { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
  .steps-n { grid-column: 1 / span 1; grid-row: 1; }
  .steps h3 { grid-column: 2 / span 4; }
  .steps li > p:not(.steps-who) { grid-column: 6 / span 5; }
  .steps .steps-who { grid-column: 11 / -1; text-align: right; }
}

/* what we think */
.g-think { display: grid; gap: 32px; }
@media (min-width: 960px) { .g-think { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); } .g-think > h2 { grid-column: 1 / span 3; align-self: start; } .why { grid-column: 5 / span 7; } }
.why > p:not(.why-links) { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); line-height: 1.5; max-width: 31em; text-wrap: pretty; }
.why > p + p { margin-top: 1em; }
.why-links { display: flex; gap: 28px; margin-top: 32px !important; font-size: 16px; }

/* ---------- the cut diagram (pricing) ---------- */
/* Today: one black bar. After: the same bar cut once at 69.3 deg (horizontal run = height x 0.3778);
   the right part slides up the cut, like the symbol's lift, and turns Mist: the part of the bill that goes away. */
.cut-fig { --h: clamp(44px, 5vw, 64px); --run: calc(var(--h) * .3778); --lift: calc(var(--h) * .34); --split: 58%; display: grid; gap: clamp(24px, 3.4vw, 40px); padding-top: 8px; }
.cut-row { display: grid; gap: 12px; }
@media (min-width: 760px) { .cut-row { grid-template-columns: 72px 1fr; column-gap: 24px; align-items: start; } .cut-row .cut-labs { grid-column: 2; } .cut-k { padding-top: calc(var(--lift) + var(--h) / 2 - 9px); } }
.cut-k { font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.cut-bar { position: relative; height: var(--h); margin-top: var(--lift); margin-right: calc(var(--lift) * .3778); }
.cut-whole { position: absolute; inset: 0; background: var(--ink); }
.cut-l, .cut-r { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.cut-l { left: 0; width: calc(var(--split) + var(--run)); clip-path: polygon(0 0, 100% 0, calc(100% - var(--run)) 100%, 0 100%); }
.cut-r { left: var(--split); right: 0; clip-path: polygon(var(--run) 0, 100% 0, 100% 100%, 0 100%); transition: transform .7s var(--ease) .2s, background-color .7s var(--ease) .2s, left .22s var(--ease); }
.cut-fig.done .cut-r { left: calc(var(--split) + 4px); transform: translate(calc(var(--lift) * .3778), calc(var(--lift) * -1)); background: repeating-linear-gradient(110.7deg, var(--ink) 0 1.5px, transparent 1.5px 8px); }
.cut-fig.pre .cut-r { left: var(--split); transform: none; background: var(--ink); }
.cut-labs { display: grid; grid-template-columns: var(--split) 1fr; font-size: 15px; line-height: 1.45; }
.cut-labs p { padding-right: 16px; }
.cut-labs b { display: block; font-weight: 500; }
.cut-labs span { color: var(--ink-2); }
.cut-labr { transition: opacity .5s var(--ease) .5s; }
.cut-fig.pre .cut-labr { opacity: 0; }
.cut-cap { margin-top: 28px; font: 400 15px/1.55 var(--serif); color: var(--ink-2); max-width: 60ch; }
.cut-cap a { color: var(--ink); }
@media (max-width: 560px) { .cut-fig { --split: 52%; } .cut-labs { font-size: 14px; } }

/* ---------- inner pages ---------- */
.page { padding-bottom: clamp(80px, 11vw, 160px); }
.ph-head { padding-block: clamp(56px, 9vw, 136px) clamp(48px, 6vw, 88px); }
.ph-head h1 { max-width: 15ch; }
.ph-lede { margin-top: 28px; font-family: var(--serif); font-size: clamp(20px, 1.85vw, 25px); line-height: 1.45; max-width: 31em; text-wrap: pretty; }
.ph-lede a { text-decoration-thickness: 1px; }
.ph-meta { margin-top: 18px; font: 400 15px/1.6 var(--sans); color: var(--ink-2); max-width: 90ch; }
.g-read { display: grid; gap: 32px; }
@media (min-width: 960px) {
  .g-read { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  .g-read > .side { grid-column: 1 / span 3; position: sticky; top: 112px; margin-top: 8px; }
  .g-read > .read { grid-column: 4 / span 8; }
}
.side ol { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ink); display: grid; gap: 2px; font: 400 14px/1.45 var(--sans); }
.side a { display: block; padding: 5px 0; color: var(--ink-2); text-decoration: none; }
.side a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 959px) { .side ol { display: none; } }
.read > section + section { margin-top: clamp(56px, 6vw, 88px); }
.ab-top { display: grid; gap: 48px; padding-block: clamp(56px, 8vw, 120px) clamp(56px, 7vw, 104px); }
@media (min-width: 960px) { .ab-top { grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); } .ab-head { grid-column: 1 / span 6; } .ab-people { grid-column: 8 / -1; padding-top: 14px; } }
.ab-now { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 16px; max-width: 36em; }
.ab-people .roster { margin-top: 14px; }
.ab-people .roster li { grid-template-columns: 1fr; gap: 2px; }
.ab-build { padding-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--ink); }
.plan { width: 100%; margin-top: 32px; border-collapse: collapse; font-size: 16px; }
.plan th, .plan td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.plan thead th { font-size: 13px; font-weight: 500; color: var(--ink-2); border-bottom-color: var(--ink); padding-bottom: 10px; }
.plan tbody th { font-weight: 600; font-stretch: 112%; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.01em; width: 30%; }
.plan td:last-child { width: 18%; }
@media (max-width: 600px) { .plan thead { display: none; } .plan tr, .plan th, .plan td { display: block; width: auto !important; border: 0; padding: 2px 0; } .plan tr { padding: 14px 0; border-bottom: 1px solid var(--rule); } }
.ab-ask { margin-top: 32px; font-family: var(--serif); font-size: 19px; line-height: 1.5; max-width: 36em; }
.read .cut { max-width: 680px; }
.sendlist { margin-top: 16px; border-top: 1px solid var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.sendlist li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.statement { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.32; letter-spacing: -.008em; max-width: 24em; text-wrap: pretty; }
.roster { margin-top: 24px; border-top: 1px solid var(--ink); }
.roster li { display: grid; gap: 4px 32px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .roster li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: baseline; } }
.roster-n { font-weight: 600; font-stretch: 112%; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.015em; }
.roster-r { font-family: var(--serif); font-size: 18px; color: var(--ink-2); }

/* a line of this website's own spec */
.aside-note { margin-top: clamp(56px, 6vw, 88px); padding-top: 14px; border-top: 1px solid var(--rule); font-size: 15px; color: var(--ink-2); max-width: 40em; }
.aside-note a { color: var(--ink); }

/* ---------- checks report ---------- */
.report { width: 100%; border-collapse: collapse; font-size: 15px; }
.report th, .report td { text-align: left; vertical-align: baseline; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--rule); }
.report thead th { font: 500 13px/1.3 var(--sans); color: var(--ink-2); padding-bottom: 10px; border-bottom-color: var(--ink); }
.report tbody th { white-space: nowrap; font-weight: 500; width: 7.5em; }
.report tbody th .st { margin-right: 10px; }
.report .id { font: 500 14px var(--sans); font-variant-numeric: tabular-nums; }
.report .res { width: 30%; }
.report .mk { margin-left: 0; vertical-align: baseline; font-size: 15px; color: var(--ink); gap: 8px; }
.report .mk .mk-g { width: 9px; height: 9px; }
.report .word { font-weight: 500; }
.report .val { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.report .how, .report .detail { display: block; margin-top: 6px; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; max-width: 70ch; }
.report .how { color: var(--ink); }
.report tr:target th, .report tr:target td { background: var(--well); }
.report:not(.short) .res { width: 34%; }
@media (max-width: 720px) {
  .report thead { display: none; }
  .report, .report tbody, .report tr, .report th, .report td { display: block; width: auto !important; }
  .report tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .report th, .report td { border: 0; padding: 2px 0; }
  .report .res { margin-top: 6px; }
}
.sec { padding-block: clamp(56px, 8vw, 112px); }
.body { max-width: 62ch; text-wrap: pretty; }
.toc { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); max-width: 760px; }
.launch-i { padding: 12px 0; border-bottom: 1px solid var(--rule); list-style: decimal inside; }

/* ---------- contact ---------- */
@media (min-width: 960px) {
  .split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); }
  .split > .l { grid-column: 1 / span 5; align-self: start; }
  .split > .r { grid-column: 7 / span 6; }
}
@media (max-width: 959px) { .split > .r { margin-top: 56px; } }
.mail { display: grid; gap: 6px; padding: 16px 0 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); text-decoration: none; }
.mail:hover .mail-a { text-decoration: underline; text-decoration-thickness: 2px; }
.mail-k { font: 500 14px/1.4 var(--sans); color: var(--ink-2); }
.mail-a { font-weight: 600; font-stretch: 112%; font-size: clamp(26px, 3vw, 40px); letter-spacing: -.02em; line-height: 1.1; overflow-wrap: anywhere; }
.l .say, .r .say { margin-top: 20px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: 15px; padding: 0; }
fieldset.field { gap: 10px; }
fieldset.field legend { margin-bottom: 10px; }
.field .hint { font-size: 14px; color: var(--ink-2); }
.field input[type=text], .field input[type=email], .field select, .field textarea { font: 400 17px/1.4 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--steel); border-radius: 0; padding: 12px 14px; min-height: 52px; width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.field [aria-invalid=true] { border-width: 2px; border-color: var(--ink); }
.err { font-size: 14px; font-weight: 500; display: flex; gap: 8px; }
.err:empty { display: none; }
.err::before { content: "✕"; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 15px; }
.check > .muted { grid-column: 2; font-size: 14px; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.check input[type=radio] { appearance: none; -webkit-appearance: none; border: 1.5px solid var(--ink); background: var(--paper); display: grid; place-content: center; cursor: pointer; }
.check input[type=radio]::before { content: ""; width: 10px; height: 10px; background: var(--ink); transform: scale(0); }
.check input[type=radio]:checked::before { transform: scale(1); }
.form-preview > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-height: 48px; padding: 14px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); font-weight: 500; font-size: 16px; list-style: none; }
.form-preview > summary::-webkit-details-marker { display: none; }
.form-preview > summary::before { content: "+"; width: 1em; font-weight: 400; }
.form-preview[open] > summary::before { content: "–"; }
.form-preview > summary .muted { font-weight: 400; font-size: 14px; }
.form-preview[open] > .form { margin-top: 28px; }
.split > .r { align-self: start; }
.form-wrap:has(form) { margin-top: clamp(48px, 6vw, 80px); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-off { border-left: 2px solid var(--ink); padding: 4px 0 4px 16px; font-size: 15px; }
.summary { border: 2px solid var(--ink); padding: 16px 18px; }
.summary:empty { display: none; }
.summary ul { margin: 8px 0 0; padding-left: 1.2em; }

/* placeholders: deliberately visible so nobody launches with them (the launch build refuses) */
.ph { font: 500 13px/1.4 var(--sans); letter-spacing: 0; text-transform: none; border: 1px dashed currentColor; padding: 1px 6px; color: var(--ink-2); white-space: normal; }

/* ---------- footer: the contact is the headline ---------- */
.ft { background: var(--inv-paper); color: var(--inv-ink); padding-block: clamp(56px, 7vw, 104px) 32px; }
.util .ft { padding-top: 32px; }
.util .ft-contact { display: none; }
.util .ft-base { margin-top: 0; padding-top: 0; border-top: 0; }
.ft a { color: inherit; }
.ft .lockup { color: var(--inv-ink); height: 24px; }
.ft-ask { font-family: var(--serif); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; max-width: 26em; color: var(--inv-ink-2); }
.ft-mail { display: inline-block; margin-top: 16px; font-weight: 600; font-stretch: 112%; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -.028em; text-decoration: none; overflow-wrap: anywhere; }
.ft-mail:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.ft-alt { margin-top: 24px; font-size: 16px; }
.ft-base { margin-top: clamp(48px, 6vw, 88px); padding-top: 24px; border-top: 1px solid var(--inv-rule); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.ft-base .brand { margin-right: 0; }
.ft nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.ft nav a { display: inline-block; padding: 8px 0; text-decoration: none; font-size: 15px; font-weight: 500; }
.ft nav a:hover { text-decoration: underline; }
.ft-legal { margin-left: auto; font: 400 13px/1.4 var(--sans); color: var(--inv-ink-2); }
@media (max-width: 760px) { .ft-legal { margin-left: 0; width: 100%; } }
.ft .ph { color: var(--inv-ink-2); }
.cnt { display: inline-flex; gap: 8px; align-items: baseline; margin-right: 14px; white-space: nowrap; }

/* ---------- evidence dialog ---------- */
.ev { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 760px; max-height: min(86vh, 760px); background: var(--paper); color: var(--ink); border-top: 2px solid var(--ink); }
@media (min-width: 760px) { .ev { margin: auto; border: 1px solid var(--ink); } }
.ev::backdrop { background: rgba(11, 11, 12, .48); }
.ev-in { padding: 24px var(--gutter) 28px; display: grid; gap: 18px; }
.ev-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.ev-id { display: flex; align-items: baseline; gap: 10px; font: 500 14px var(--sans); }
.ev h2 { font-size: clamp(24px, 3vw, 34px); outline: none; }
.ev dl { display: grid; gap: 14px; }
.ev dt { font: 500 13px/1.3 var(--sans); color: var(--ink-2); margin-bottom: 4px; }
.ev dd { margin: 0; max-width: 62ch; }
.ev-val { font-weight: 600; font-stretch: 112%; font-size: 22px; font-variant-numeric: tabular-nums; }
.ev-scope { font-size: 14px; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; }
.ev details summary { cursor: pointer; font-weight: 500; min-height: 32px; display: flex; align-items: center; }
.ev pre { background: var(--well); padding: 14px; max-height: 40vh; overflow: auto; white-space: pre; }
.btn-x { min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--rule); background: none; color: inherit; font: 500 15px var(--sans); cursor: pointer; }
.btn-x:hover { border-color: var(--ink); }

/* ---------- motion off, forced colours, print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .st, .mk-g { forced-color-adjust: none; border-color: CanvasText; }
  .st[data-status=pass], .mk[data-status=pass] .mk-g { background: CanvasText; }
  .cut-l, .cut-r, .cut-whole { forced-color-adjust: none; background: CanvasText; }
  .check input[type=radio] { forced-color-adjust: none; border-color: CanvasText; } .check input[type=radio]::before { background: CanvasText; }
  .cut-fig.done .cut-r { background: GrayText; }
}
@media print { .hd, .ft, .ev, .menu, .preview { display: none !important; } }