/* =====================================================================
   Ghostables design system
   One family (Archivo, width + weight axes), one accent (teal), one radius (4px).
   Spacing is a fixed scale; sections, gutters and type are fluid between 360px and 1440px.
   ===================================================================== */

@font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.e3a28eade2.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-400.08949f728d.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("/assets/fonts/plex-mono-500.01d2854474.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* colour: light */
  --paper: #FCFCFB;
  --stone: #F1F2F0;
  --stone-2: #E7E9E6;
  --line: #DCDFDC;
  --line-strong: #BFC5C1;
  --ink: #0D1317;
  --ink-2: #3A444B;
  --ink-3: #5F696F;
  --teal: #0E7276;
  --teal-deep: #0A5A5E;
  --teal-tint: #DAEBE9;
  --amber: #9A4D0B;
  --amber-tint: #F5E6D3;
  /* colour: vault (dark) */
  --vault: #071A1E;
  --vault-2: #0C252A;
  --vault-3: #12313A;
  --vault-line: #1D3B41;
  --vault-ink: #E8F0EF;
  --vault-ink-2: #A2B7B7;
  --signal: #5FDFD1;
  --signal-amber: #F0B35E;

  /* type */
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wide: 115%;
  --fs-d1: clamp(2.75rem, 1.5rem + 4.6vw, 5.5rem);
  --fs-h1: clamp(2.375rem, 1.62rem + 2.9vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 1.42rem + 1.8vw, 3rem);
  --fs-h3: clamp(1.5rem, 1.36rem + 0.45vw, 1.75rem);
  --fs-h4: 1.25rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.33vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;

  /* space */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --section: clamp(72px, 2.5rem + 6.6vw, 144px);
  --head-gap: clamp(40px, 1.6rem + 2.4vw, 64px);
  --gutter: clamp(20px, 4.4vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --maxw: 1360px;
  --header-h: 72px;
  --radius: 4px;
  --card-pad: var(--s6);

  /* motion */
  --ease: cubic-bezier(.2, .7, .15, 1);
  --dur: 240ms;

  /* layers */
  --z-header: 50;
  --z-menu: 100;
}
@media (max-width: 767px) { :root { --header-h: 64px; --fs-body: 1rem; --card-pad: var(--s5); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; font-weight: 400; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none; overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px; }
.tone-vault :focus-visible { outline-color: var(--signal); }
::selection { background: var(--teal-tint); color: var(--ink); }
.icon { width: 1em; height: 1em; flex: none; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm); }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.d1, .h1, .h2 { font-stretch: var(--wide); font-weight: 520; text-wrap: balance; }
.d1 { font-size: var(--fs-d1); line-height: 1; letter-spacing: -0.036em; }
.h1 { font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.032em; }
.h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.027em; }
.h3 { font-size: var(--fs-h3); line-height: 1.22; letter-spacing: -0.012em; font-weight: 600; text-wrap: balance; }
.h4 { font-size: var(--fs-h4); line-height: 1.32; letter-spacing: -0.006em; font-weight: 600; text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; }
.text { color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.small { font-size: var(--fs-sm); line-height: 1.55; }
.label { display: block; font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: 0.875em; }
.muted { color: var(--ink-3); }
.prose { color: var(--ink-2); max-width: 62ch; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--fs-h3); line-height: 1.25; font-weight: 600; color: var(--ink); letter-spacing: -0.012em; margin-top: var(--s7); }
.prose h3 { font-size: var(--fs-h4); line-height: 1.32; font-weight: 600; color: var(--ink); margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--s2); }
.prose a, .text a, .lead a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.prose a:hover, .text a:hover, .lead a:hover { color: var(--teal-deep); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink); font-weight: 600; }
.prose strong { color: var(--ink); font-weight: 600; }

/* tone: vault */
.tone-vault { background: var(--vault); color: var(--vault-ink); }
.tone-vault .lead, .tone-vault .text, .tone-vault .prose { color: var(--vault-ink-2); }
.tone-vault .label { color: var(--signal); }
.tone-vault .muted { color: var(--vault-ink-2); }
.tone-vault .text a, .tone-vault .lead a { color: var(--signal); }
.tone-stone { background: var(--stone); }
.tone-paper { background: var(--paper); }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section.tone-paper + .section.tone-paper, .section.tone-stone + .section.tone-stone, .section.tone-vault + .section.tone-vault { padding-top: 0; }
.page-hero + .section, .hero + .section { padding-top: var(--section); }
.hero + .section.proof-strip { padding-top: var(--s8); }
.tone-paper + .tone-paper > .container > .divider-top,
.tone-stone + .tone-stone > .container > .divider-top { border-top: 1px solid var(--line); padding-top: var(--section); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.stack > * + * { margin-top: var(--s5); }

.sec-head { max-width: 920px; margin-bottom: var(--head-gap); }
.sec-head .label { margin-bottom: var(--s4); }
.sec-head .lead { margin-top: var(--s5); }
.sec-head.is-center { margin-inline: auto; text-align: center; }
.sec-head.is-center .lead { margin-inline: auto; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s7); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px;
  border-radius: var(--radius); border: 1px solid transparent; font-size: var(--fs-sm); line-height: 1; font-weight: 600; letter-spacing: 0.004em;
  white-space: nowrap; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { height: 40px; padding: 0 16px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #26323A; }
.btn-secondary { border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink); }
.tone-vault .btn-primary { background: var(--paper); color: var(--ink); }
.tone-vault .btn-primary:hover { background: #D9E5E3; }
.tone-vault .btn-secondary { border-color: #34545A; color: var(--vault-ink); }
.tone-vault .btn-secondary:hover { border-color: var(--vault-ink); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--ink); transition: color var(--dur) var(--ease); }
.link-arrow .icon { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--teal); }
.link-arrow:hover .icon { transform: translateX(3px); }
.tone-vault .link-arrow { color: var(--vault-ink); }
.tone-vault .link-arrow:hover { color: var(--signal); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
  background: rgb(252 252 251 / 0.92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--s5); }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; min-width: 44px; padding: 0 12px 0 8px; margin-left: -8px; border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 600; transition: background-color var(--dur) var(--ease); }
.menu-btn:hover { background: var(--stone); }
.menu-btn .icon { width: 24px; height: 24px; }
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand .lockup { height: 24px; width: auto; }
.header-links { margin-left: auto; display: flex; align-items: center; gap: var(--s6); font-size: var(--fs-sm); font-weight: 500; }
.header-links a { color: var(--ink-2); transition: color var(--dur) var(--ease); }
.header-links a:hover { color: var(--ink); }
.header-cta { margin-left: var(--s2); }
@media (max-width: 1199px) { .header-links .hl-wide { display: none; } }
@media (max-width: 1023px) {
  .header-links { display: none; }
  .header-cta { margin-left: auto; }
}
@media (max-width: 519px) {
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { padding: 0 10px; justify-content: center; }
  .header-inner { gap: var(--s3); }
  .brand .lockup { height: 20px; }
  .header-cta { display: none; }
}

/* ---------- flyout menu ---------- */
.flyout { position: fixed; inset: 0; z-index: var(--z-menu); }
.flyout[hidden] { display: none; }
.flyout-scrim { position: absolute; inset: 0; background: rgb(7 26 30 / 0.62); opacity: 0; transition: opacity 280ms var(--ease); }
.flyout.is-open .flyout-scrim { opacity: 1; }
.flyout-panel {
  position: absolute; inset: 0 auto 0 0; display: flex; flex-direction: column; background: var(--paper);
  box-shadow: 24px 0 64px rgb(7 26 30 / 0.18); transform: translateX(-24px); opacity: 0;
  transition: transform 320ms var(--ease), opacity 240ms var(--ease);
}
.flyout.is-open .flyout-panel { transform: none; opacity: 1; }
.fo-cols { display: flex; flex: 1; min-height: 0; }
.fo-col { width: clamp(296px, calc((100vw - 120px) / 3), 420px); overflow-y: auto; overscroll-behavior: contain; padding: var(--s5) 28px 40px; }
.fo-head { display: flex; align-items: center; justify-content: space-between; flex: none; height: var(--header-h); padding: 0 28px 0 40px; border-bottom: 1px solid var(--line); }
.fo-head .lockup { height: 24px; }
.fo-close { width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border-radius: var(--radius); color: var(--ink); transition: background-color var(--dur) var(--ease); }
.fo-close:hover { background: var(--stone); }
.fo-close .icon { width: 24px; height: 24px; }
.fo-col-1 { background: var(--paper); display: flex; flex-direction: column; }
.fo-col-2 { background: var(--stone); border-left: 1px solid var(--line); }
.fo-col-3 { background: var(--paper); border-left: 1px solid var(--line); }
.flyout[data-depth="1"] .fo-col-2:not(.has-active), .fo-col-3:not(.has-active) { display: none; }
.fo-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); width: 100%; min-height: 44px; padding: 10px 12px;
  border-radius: var(--radius); font-size: 1rem; line-height: 1.35; font-weight: 450; text-align: left; color: var(--ink);
  transition: background-color 160ms var(--ease);
}
.fo-item .icon { width: 16px; height: 16px; color: var(--ink-2); }
.fo-item:hover { background: var(--stone-2); }
.fo-item[aria-expanded="true"] { background: var(--teal-tint); font-weight: 600; }
.fo-col-2 .fo-item[aria-expanded="true"] { background: var(--paper); }
.fo-col ul > li + li { margin-top: 2px; }
.fo-blurb { font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-3); padding: 0 12px; margin-bottom: var(--s4); max-width: 36ch; }
.fo-utility { margin-top: auto; padding-top: var(--s6); border-top: 1px solid var(--line); }
.fo-utility a { display: block; padding: 8px 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); border-radius: var(--radius); }
.fo-utility a:hover { color: var(--ink); background: var(--stone); }
.fo-group[hidden] { display: none; }
.fo-group.is-entering > * { animation: fo-in 280ms var(--ease) both; }
@keyframes fo-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.fo-back { display: none; }

@media (max-width: 1023px) {
  .flyout-panel { inset: 0; width: 100%; overflow: hidden; overflow: clip; transform: translateX(-16px); }
  .fo-head { padding-inline: var(--gutter); }
  .fo-head .lockup { height: 20px; }
  .fo-cols { width: 300%; transition: transform 320ms var(--ease); }
  .fo-col { width: 33.3334%; padding: var(--s5) var(--gutter) var(--s7); display: block !important; background: var(--paper); border: 0; }
  .fo-col-1 { display: flex !important; }
  .flyout[data-depth="2"] .fo-cols { transform: translateX(-33.3334%); }
  .flyout[data-depth="3"] .fo-cols { transform: translateX(-66.6667%); }
  .fo-item { min-height: 52px; font-size: 1.0625rem; border-bottom: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
  .fo-item:hover, .fo-col-2 .fo-item:hover { background: none; }
  .fo-item[aria-expanded="true"], .fo-col-2 .fo-item[aria-expanded="true"] { background: none; font-weight: 450; }
  .fo-col ul > li + li { margin-top: 0; }
  .fo-back { display: block; margin-bottom: var(--s4); }
  .fo-back button { display: inline-flex; align-items: center; gap: 6px; height: 44px; font-size: var(--fs-sm); font-weight: 600; color: var(--teal); }
  .fo-back .icon { width: 16px; height: 16px; }
  .fo-title { font-stretch: var(--wide); font-size: 1.75rem; line-height: 1.15; font-weight: 520; letter-spacing: -0.02em; margin-top: var(--s2); }
  .fo-blurb { padding: 0; margin-top: var(--s3); margin-bottom: var(--s5); }
  .fo-utility { padding-top: var(--s5); }
  .fo-utility a { padding-inline: 0; }
}
html.menu-open { overflow: hidden; }

/* ---------- footer ---------- */
.site-footer { padding-bottom: var(--s6); }
.site-footer.tone-vault { background: #041316; }
.site-footer > .container { border-top: 1px solid var(--vault-line); padding-top: var(--s9); }
.site-footer .brand { color: var(--vault-ink); }
.site-footer .brand .lockup { height: 26px; }
.footer-top { display: grid; grid-template-columns: 1fr; gap: var(--s8); }
.footer-brand p { margin-top: var(--s5); color: var(--vault-ink-2); font-size: var(--fs-sm); max-width: 40ch; }
.footer-cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s7) var(--col-gap); }
.footer-col { grid-column: span 2; }
.footer-heading { font-size: var(--fs-sm); font-weight: 600; color: var(--vault-ink); margin-bottom: var(--s4); }
.footer-col li + li { margin-top: var(--s3); }
.footer-col a { font-size: var(--fs-sm); line-height: 1.4; color: var(--vault-ink-2); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--vault-ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4) var(--s6); margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--vault-line); font-size: var(--fs-xs); color: var(--vault-ink-2); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--s5); }
.footer-legal a:hover { color: var(--vault-ink); }
@media (max-width: 1199px) { .footer-col { grid-column: span 4; } }
@media (max-width: 639px) {
  .site-footer > .container { padding-top: var(--s8); }
  .footer-col { grid-column: span 6; }
  .footer-col a, .footer-legal a, .crumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* ---------- home hero ---------- */
.hero { position: relative; overflow: hidden; min-height: min(calc(100svh - var(--header-h)), 860px); display: flex; align-items: center; padding-block: var(--s9); isolation: isolate; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--vault) 0%, rgb(7 26 30 / 0.92) 34%, rgb(7 26 30 / 0) 62%); }
.hero-copy { max-width: 880px; }
.hero.is-compact { min-height: min(calc(100svh - var(--header-h)), 640px); }
.hero-copy .h1 { max-width: 16ch; }
.hero-copy .lead { margin-top: var(--s5); max-width: 46ch; }
@media (max-width: 899px) {
  .hero { align-items: flex-end; min-height: min(calc(100svh - var(--header-h)), 760px); padding-top: 38svh; padding-bottom: var(--s8); }
  .hero::before { background: linear-gradient(180deg, rgb(7 26 30 / 0) 0%, rgb(7 26 30 / 0.55) 34%, var(--vault) 58%); }
}

/* ---------- interior page hero ---------- */
.page-hero { padding-top: clamp(48px, 2rem + 4vw, 96px); padding-bottom: clamp(56px, 2.5rem + 3.4vw, 96px); border-bottom: 1px solid var(--line); }
.page-hero.tone-vault { border-bottom: 0; }
.page-hero .grid-12 { align-items: center; row-gap: var(--s7); }
.page-hero-copy { grid-column: 1 / span 6; }
.page-hero-copy.is-wide { grid-column: 1 / span 10; }
.page-hero-aside { grid-column: 8 / span 5; }
.page-hero .h1 { font-size: clamp(2.25rem, 1.5rem + 2.4vw, 3.5rem); max-width: 20ch; }
.page-hero-copy.is-wide .h1 { max-width: 22ch; }
.page-hero .lead { margin-top: var(--s5); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s6); }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.tone-vault .crumbs { color: var(--vault-ink-2); }
.tone-vault .crumbs li + li::before { color: var(--vault-line); }
@media (max-width: 1099px) {
  .page-hero-copy, .page-hero-copy.is-wide, .page-hero-aside { grid-column: 1 / -1; }
}

/* ---------- statement ---------- */
.statement .h1 { max-width: 20ch; }
.statement-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); margin-top: var(--s8); }
.statement-body > div { grid-column: 6 / span 6; }
.statement-body .text + .text { margin-top: var(--s4); }
@media (max-width: 1023px) { .statement-body > div { grid-column: 1 / -1; } .statement-body { margin-top: var(--s7); } }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s7); align-items: center; }
.split-copy { grid-column: 1 / span 5; }
.split-media { grid-column: 7 / span 6; }
.split.is-reverse .split-copy { grid-column: 8 / span 5; grid-row: 1; }
.split.is-reverse .split-media { grid-column: 1 / span 6; grid-row: 1; }
.split-copy .label { margin-bottom: var(--s4); }
.split-copy .lead, .split-copy .text { margin-top: var(--s5); }
.split-copy .text + .text { margin-top: var(--s4); }
.split-copy .checks-wrap { margin-top: var(--s6); }
@media (max-width: 1099px) {
  .split-copy, .split-media, .split.is-reverse .split-copy, .split.is-reverse .split-media { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- feature list (2 columns, hairline-topped) ---------- */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7) var(--col-gap); }
.features.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature { border-top: 1px solid var(--line); padding-top: var(--s5); }
.tone-vault .feature { border-top-color: var(--vault-line); }
.feature .h4 + .text, .feature .h3 + .text { margin-top: var(--s3); }
.feature .link-arrow { margin-top: var(--s4); }
@media (max-width: 1023px) { .features.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 679px) { .features, .features.is-3 { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- timeline (numbered sequence) ---------- */
.timeline { display: grid; grid-template-columns: repeat(var(--tl, 4), minmax(0, 1fr)); gap: var(--col-gap); counter-reset: none; }
.tl-step { position: relative; padding-top: var(--s6); border-top: 2px solid var(--ink); }
.tl-num { display: block; font-family: var(--mono); font-size: var(--fs-sm); font-weight: 500; color: var(--teal); margin-bottom: var(--s4); }
.tl-step .h4 + .text { margin-top: var(--s3); }
.tone-vault .tl-step { border-top-color: var(--vault-ink); }
.tone-vault .tl-num { color: var(--signal); }
@media (max-width: 1023px) { .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); } }
@media (max-width: 599px) { .timeline { grid-template-columns: 1fr; row-gap: var(--s6); } }

/* ---------- checks ---------- */
.checks li { position: relative; padding-left: 30px; color: var(--ink-2); }
.checks li + li { margin-top: var(--s3); }
.checks.is-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s5); }
.checks.is-2col li + li { margin-top: 0; }
@media (max-width: 519px) { .checks.is-2col { grid-template-columns: 1fr; } }
.checks li .icon { position: absolute; left: 0; top: 0.28em; width: 18px; height: 18px; color: var(--teal); }
.tone-vault .checks li { color: var(--vault-ink-2); }
.tone-vault .checks li .icon { color: var(--signal); }

/* ---------- sticky steps ---------- */
.steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.steps-list { grid-column: 1 / span 5; }
.steps-visual { grid-column: 7 / span 6; }
.steps-sticky { position: sticky; top: calc(var(--header-h) + 48px); }
.step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--s7); }
.step .h3, .step .text { transition: color 400ms var(--ease); }
.steps .step:not(.is-active) .h3, .steps .step:not(.is-active) .text { color: var(--ink-3); }
.step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: var(--s4); }
.step:last-child { min-height: 54vh; }
.step .label { margin-bottom: var(--s3); }
.step .text { margin-top: var(--s3); }
html:not(.js) .steps .step .h3 { color: var(--ink); }
html:not(.js) .steps .step .text { color: var(--ink-2); }
@media (max-width: 1023px) {
  .steps { display: block; }
  .steps-visual { display: none; }
  .step, .step:first-child, .step:last-child { min-height: 0; padding-block: var(--s6); border-top: 1px solid var(--line); }
  .steps .step:not(.is-active) .h3 { color: var(--ink); }
  .steps .step:not(.is-active) .text { color: var(--ink-2); }
  .step-inline-visual { display: block; margin-top: var(--s5); }
}
@media (min-width: 1024px) { .step-inline-visual { display: none; } }

/* ---------- comparison table ---------- */
.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink); }
.cmp { width: 100%; border-collapse: collapse; min-width: 720px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--line); }
.cmp thead th { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); padding-block: 16px; }
.cmp tbody th { font-weight: 600; width: 30%; color: var(--ink); }
.cmp td { color: var(--ink-2); width: 35%; }
.cmp td.is-us { color: var(--ink); }
.cmp .cell { display: flex; gap: 12px; }
.cmp .cell .icon { width: 18px; height: 18px; margin-top: 0.22em; color: var(--teal); }
.cmp thead th.is-us { color: var(--teal); }
.table-wrap.is-plain { border-top: 0; }
.feature .checks-wrap { margin-top: var(--s4); }
.table-note { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; }
@media (max-width: 767px) {
  .cmp-wrap { overflow: visible; }
  .cmp { min-width: 0; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tr { display: grid; gap: var(--s3); padding-block: var(--s5); border-bottom: 1px solid var(--line); }
  .cmp th, .cmp td, .cmp tbody th, .cmp td.is-us { display: block; width: auto; padding: 0; border: 0; }
  .cmp tbody th { font-size: 1.0625rem; }
  .cmp td::before { content: attr(data-label); display: block; margin-bottom: var(--s1); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-3); }
  .cmp td.is-us::before { color: var(--teal); }
}

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); }
.tile { position: relative; display: flex; flex-direction: column; min-height: 320px; padding: var(--card-pad); border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); overflow: hidden; transition: border-color var(--dur) var(--ease); }
.tile:hover { border-color: var(--line-strong); }
.tile.tone-vault { background: var(--vault); border-color: var(--vault); color: var(--vault-ink); }
.tile.is-tint { background: var(--teal-tint); border-color: var(--teal-tint); }
.tile .h3 { max-width: 20ch; }
.tile .text { margin-top: var(--s3); max-width: 44ch; }
.tile .link-arrow { margin-top: auto; padding-top: var(--s5); }
.tile-visual { margin-block: var(--s5) var(--s2); flex: 1; display: flex; align-items: center; min-height: 120px; }
.tile-visual svg { width: 100%; height: auto; max-height: 220px; }
.tile.span-7 { grid-column: span 7; }
.tile.span-5 { grid-column: span 5; }
.tile.span-6 { grid-column: span 6; }
.tile.span-4 { grid-column: span 4; }
.tile.span-8 { grid-column: span 8; }
.tile.row-2 { grid-row: span 2; }
@media (max-width: 1023px) { .tile.span-7, .tile.span-5, .tile.span-6, .tile.span-4, .tile.span-8 { grid-column: span 12; } .tile.row-2 { grid-row: auto; } .tile { min-height: 0; } }

/* ---------- rail (horizontal scroll) ---------- */
.rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); margin-bottom: var(--head-gap); }
.rail-head .sec-head { margin-bottom: 0; }
.rail-controls { display: flex; gap: var(--s2); flex: none; }
.rail-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); transition: border-color var(--dur) var(--ease), opacity var(--dur); }
.rail-btn:hover { border-color: var(--ink); }
.rail-btn[disabled] { opacity: 0.35; cursor: default; }
.rail-btn .icon { width: 18px; height: 18px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 26vw, 380px); gap: var(--col-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: start; display: flex; }
.rail-card { flex: 1; display: flex; flex-direction: column; min-height: 280px; padding: var(--card-pad); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--dur) var(--ease); }
.rail-card:hover { border-color: var(--ink); }
.rail-card .text { margin-top: var(--s3); }
.rail-card .link-arrow { margin-top: auto; padding-top: var(--s5); }
@media (max-width: 679px) { .rail-controls { display: none; } .rail { grid-auto-columns: 84%; } }

/* ---------- fact strip ---------- */
.proof-strip { padding-top: var(--s8); }
.facts { display: grid; grid-template-columns: repeat(var(--facts, 3), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.split-media .facts { grid-template-columns: 1fr; }
.split-media .fact + .fact { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
.tone-vault .split-media .fact + .fact { border-top-color: var(--vault-line); }
.fact { padding: var(--s6) var(--col-gap) var(--s2) 0; }
.fact + .fact { border-left: 1px solid var(--line); padding-left: var(--col-gap); }
.fact .label + .h4 { margin-top: var(--s3); }
.fact .text { margin-top: var(--s3); font-size: var(--fs-sm); }
.tone-vault .facts { border-top-color: var(--vault-line); }
.tone-vault .fact + .fact { border-left-color: var(--vault-line); }
@media (max-width: 899px) {
  .facts { grid-template-columns: 1fr; }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .tone-vault .fact + .fact { border-top-color: var(--vault-line); }
  .fact { padding-bottom: var(--s6); }
  .fact:last-child { padding-bottom: 0; }
}

/* ---------- index list (large rows) ---------- */
.index { border-top: 1px solid var(--line); }
.index-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: baseline; padding-block: var(--s6); border-bottom: 1px solid var(--line); transition: background-color var(--dur) var(--ease); }
.index-row .h3 { grid-column: 1 / span 5; font-stretch: var(--wide); font-weight: 520; letter-spacing: -0.02em; }
.index-row .text { grid-column: 6 / span 5; }
.index-row .index-go { grid-column: 12; justify-self: end; width: 24px; height: 24px; transition: transform var(--dur) var(--ease), color var(--dur); }
.index-row:hover .index-go { transform: translateX(4px); color: var(--teal); }
.index-row:hover .h3 { color: var(--teal-deep); }
.index-row .tag { display: block; margin-top: var(--s2); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); font-stretch: 100%; letter-spacing: 0; }
.index-more { margin-top: var(--s6); color: var(--ink-2); font-size: var(--fs-sm); }
.index-more a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.index-more a:hover { color: var(--teal); }
@media (max-width: 899px) {
  .index-row { grid-template-columns: 1fr 24px; row-gap: var(--s3); }
  .index-row .h3 { grid-column: 1; }
  .index-row .text { grid-column: 1; }
  .index-row .index-go { grid-column: 2; grid-row: 1; }
}

/* ---------- CTA band ---------- */
.cta-band .grid-12 { align-items: end; row-gap: var(--s6); }
.cta-band .cta-copy { grid-column: 1 / span 7; }
.cta-band .cta-actions { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: flex-end; }
.cta-band .lead { margin-top: var(--s5); }
@media (max-width: 1023px) { .cta-band .cta-copy, .cta-band .cta-actions { grid-column: 1 / -1; justify-content: flex-start; } }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s5); padding-block: var(--s5); cursor: pointer; font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { width: 20px; height: 20px; margin-top: 3px; transition: transform var(--dur) var(--ease); color: var(--ink-2); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .faq-a { padding-bottom: var(--s6); max-width: 62ch; color: var(--ink-2); }
.faq .faq-a p + p { margin-top: var(--s3); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(var(--plans, 3), minmax(0, 1fr)); gap: var(--col-gap); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.plan.is-featured { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.plan-flag { position: absolute; top: var(--s6); right: var(--s6); font-size: var(--fs-xs); line-height: 1.4; font-weight: 600; color: var(--teal-deep); background: var(--teal-tint); padding: 3px 10px; border-radius: var(--radius); }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s4); }
.plan-price strong { font-stretch: var(--wide); font-size: 2.75rem; line-height: 1; font-weight: 520; letter-spacing: -0.03em; }
.plan-price span { color: var(--ink-3); font-size: var(--fs-sm); }
.plan-alt { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.plan .checks { margin-top: var(--s5); margin-bottom: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.plan .btn { margin-top: auto; }
.plan-note { margin-top: var(--s5); font-size: var(--fs-sm); color: var(--ink-3); }
.plans.plans-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plans.plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .plans.plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) { .plans.plans-3 { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 679px) { .plans.plans-4 { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- tier matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; min-width: 680px; font-size: var(--fs-sm); }
.matrix th, .matrix td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; padding-left: 0; }
.matrix thead th { font-weight: 600; }
.matrix tbody th[colspan] { text-align: left; padding-top: var(--s6); font-weight: 600; color: var(--ink); border-bottom-color: var(--ink); }
.matrix td { color: var(--ink-2); }
.matrix tbody th[scope="row"] { font-weight: 400; }
.matrix .icon { width: 18px; height: 18px; margin-inline: auto; }
.matrix .yes { color: var(--teal); }
.matrix .no { color: var(--line-strong); }

/* ---------- forms ---------- */
.form { display: grid; gap: var(--s5); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
@media (max-width: 679px) { .form-row { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--ink-3); }
.input { width: 100%; height: 48px; padding: 0 14px; background: var(--paper); border: 1px solid #7E8783; border-radius: var(--radius); font-size: 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
textarea.input { height: auto; min-height: 160px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.input:hover { border-color: var(--ink-2); }
.input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
.input[aria-invalid="true"] { border-color: var(--amber); }
.field-error { font-size: var(--fs-sm); color: var(--amber); }
.form-status { font-size: var(--fs-sm); padding: 12px 14px; border-radius: var(--radius); }
.form-status.is-error { background: var(--amber-tint); color: var(--amber); }
.form a { color: var(--teal); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.form-done { padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--radius); }
.form-done .h4 { margin-bottom: var(--s2); }
.inline-form { display: flex; gap: var(--s3); max-width: 560px; }
.inline-form .input { flex: 1; }
@media (max-width: 519px) { .inline-form { flex-direction: column; } .inline-form .input { flex: none; } }

/* ---------- code ---------- */
.code { background: var(--vault); color: var(--vault-ink); border-radius: var(--radius); padding: var(--s6); overflow-x: auto; font-family: var(--mono); font-size: 0.875rem; line-height: 1.7; }
.code .c { color: #6F8C8C; }
.code .k { color: var(--signal); }
.code .s { color: #E8C99A; }

/* ---------- diagrams and demos (shared) ---------- */
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.tone-stone .panel { background: var(--paper); }
.panel.tone-vault { background: var(--vault); border-color: var(--vault); }
.panel-pad { padding: var(--card-pad); }
.tone-vault .panel { background: var(--vault-2); border-color: var(--vault-line); }
.figure-caption { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-3); max-width: 64ch; }
.tone-vault .figure-caption { color: var(--vault-ink-2); }

/* ---------- diagram palette ---------- */
.dg { width: 100%; height: auto; overflow: visible; }
.dg text { font-family: var(--font); }
.dg-solid { fill: var(--ink); }
.dg-hollow { fill: none; stroke: var(--teal); stroke-width: 2; }
.dg-faint { fill: var(--stone-2); }
.dg-box, .dg-card { fill: var(--paper); stroke: var(--line-strong); }
.dg-seal-panel { fill: var(--teal-tint); stroke: var(--teal); }
.dg-ghost-box { fill: none; stroke: var(--line-strong); stroke-dasharray: 4 5; }
.dg-bar { fill: var(--stone-2); }
.dg-seal { fill: var(--teal-tint); }
.dg-seal-strong { fill: var(--teal); }
.dg-line { stroke: var(--line); fill: none; }
.dg-link { stroke: var(--ink-3); fill: none; stroke-width: 1.5; }
.dg-link-strong { stroke: var(--teal); fill: none; stroke-width: 2; }
.dg-dash { stroke-dasharray: 5 5; }
.dg-muted { stroke: var(--line-strong); }
.dg-alert-box { fill: var(--amber-tint); stroke: var(--amber); }
.dg-alert-fill { fill: var(--amber); }
.dg-alert-stroke { stroke: var(--amber); fill: none; stroke-width: 1.5; }
.dg-alert-text { fill: var(--amber); font-size: 14px; font-weight: 600; }
.dg-tick { stroke: var(--line-strong); }
.dg-axis { stroke: var(--ink-3); }
.dg-hatch-fill { fill: var(--teal-tint); }
.dg-window { fill: var(--amber-tint); stroke: var(--amber); }
.dg-small { fill: var(--ink-3); font-size: 14px; }
.dg-strong { fill: var(--ink); font-weight: 600; }
.dg-node { fill: var(--ink); }
.dg-ghost-node { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.dg-revoke { stroke: var(--amber); stroke-width: 2; stroke-linecap: round; }
.dg-boundary { stroke: var(--ink-3); stroke-dasharray: 3 5; }
.dg-anchor { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.dg-label { fill: var(--ink-3); font-size: 15px; }
.dg-value { fill: var(--ink); font-size: 17px; font-weight: 500; }
.dg-title { fill: var(--ink); font-size: 18px; font-weight: 600; }
.dg-mono { fill: var(--ink); font-family: var(--mono); font-size: 14px; }
.dg-pill { fill: var(--teal-tint); }
.dg-pill-text { fill: var(--teal-deep); font-size: 14px; font-weight: 600; }
.dg-alert-pill { fill: var(--amber-tint); }
.dg-alert-ink { fill: var(--amber); }
.dg-pill-strong { fill: var(--teal); }
.dg-on-strong { fill: var(--paper); }
.dg-ok { fill: var(--teal); }
.dg-ok-tick { fill: none; stroke: var(--paper); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tone-vault .dg-solid { fill: var(--vault-ink); }
.tone-vault .dg-hollow { stroke: var(--signal); }
.tone-vault .dg-faint { fill: var(--vault-3); }
.tone-vault .dg-box { fill: var(--vault-2); stroke: var(--vault-line); }
.tone-vault .dg-bar { fill: var(--vault-3); }
.tone-vault .dg-seal { fill: rgb(95 223 209 / 0.24); }
.tone-vault .dg-link { stroke: #6F8C8C; }
.tone-vault .dg-line { stroke: var(--vault-line); }
.tone-vault .dg-alert-box { fill: rgb(240 179 94 / 0.12); stroke: var(--signal-amber); }
.tone-vault .dg-alert-fill { fill: var(--signal-amber); }
.tone-vault .dg-alert-stroke { stroke: var(--signal-amber); }
.tone-vault .dg-alert-text { fill: var(--signal-amber); }
.tone-vault .dg-small { fill: var(--vault-ink-2); }
.tone-vault .dg-node { fill: var(--vault-ink); }
.tone-vault .dg-ghost-node { stroke: var(--vault-ink-2); }
.tone-vault .dg-tick, .tone-vault .dg-muted { stroke: #3E5E64; }
.tone-vault .dg-axis { stroke: var(--vault-ink-2); }
.tone-vault .dg-title, .tone-vault .dg-strong, .tone-vault .dg-value { fill: var(--vault-ink); }
.tone-vault .dg-seal-panel { fill: rgb(95 223 209 / 0.1); stroke: var(--signal); }
.tone-vault .dg-anchor { fill: var(--vault-2); stroke: var(--vault-ink); }
.tone-vault .dg-card { fill: var(--vault-2); stroke: var(--vault-line); }
.tone-vault .dg-boundary { stroke: var(--vault-ink-2); }
.tile.is-tint .dg-faint { fill: rgb(14 114 118 / 0.1); }
.tile.is-tint .dg-solid { fill: var(--teal-deep); }

/* lifecycle diagram: parts appear with data-step 1-4 on an ancestor */
.lifecycle .lc-sealed, .lifecycle .lc-chain, .lifecycle .lc-verify, .lifecycle .lc-prev, .lifecycle .lc-status { opacity: 0; transition: opacity 520ms var(--ease); }
.lifecycle .lc-plain { transition: opacity 360ms var(--ease); }
.lifecycle .lc-sealed rect { transform-box: fill-box; transform-origin: left center; transform: scaleX(0.2); transition: transform 600ms var(--ease); }
.steps-mobile-visual { display: none; }
@media (max-width: 1023px) { .steps-mobile-visual { display: block; max-width: 520px; margin-bottom: var(--s6); } }

/* ---------- trust mark ---------- */
.trustmarks { display: grid; gap: var(--s5); justify-items: start; }
.trustmark { display: inline-flex; align-items: center; gap: 16px; padding: 18px 24px 18px 20px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); }
.trustmark .mark { flex: none; width: 34px; height: 34px; color: var(--ink); }
.trustmark .tm-text { display: grid; gap: 2px; }
.trustmark .tm-kicker { font-size: var(--fs-xs); line-height: 1.2; color: var(--ink-3); font-weight: 500; }
.trustmark .tm-name { font-stretch: 108%; font-size: 1.25rem; line-height: 1.15; font-weight: 600; letter-spacing: -0.025em; }
.trustmark .tm-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding-left: 16px; border-left: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; color: var(--teal); }
.trustmark .tm-status .icon { width: 14px; height: 14px; }
.trustmark.is-dark { background: var(--vault-2); border-color: var(--vault-line); color: var(--vault-ink); }
.trustmark.is-dark .mark { color: var(--vault-ink); }
.trustmark.is-dark .mark { --acc: var(--signal); }
.trustmark.is-dark .tm-kicker { color: var(--vault-ink-2); }
.trustmark.is-dark .tm-status { color: var(--signal); border-left-color: var(--vault-line); }
.trustmark.is-lg { padding: 26px 32px 26px 28px; gap: 20px; }
.trustmark.is-lg .mark { width: 48px; height: 48px; }
.trustmark.is-lg .tm-name { font-size: 1.75rem; }
.trustmark.is-lg .tm-kicker { font-size: var(--fs-sm); }
.tm-stage { display: grid; place-items: center; padding: clamp(32px, 5vw, 64px) clamp(16px, 3vw, 48px); border-radius: var(--radius); background: var(--vault-2); border: 1px solid var(--vault-line); }
.tm-stage .trustmarks { gap: var(--s4); justify-items: stretch; }
@media (max-width: 519px) { .trustmark, .trustmark.is-lg { padding: 14px 16px; gap: 12px; } .trustmark.is-lg .mark { width: 36px; height: 36px; } .trustmark .tm-status { margin-left: 0; padding-left: 12px; } .trustmark.is-lg .tm-name { font-size: 1.25rem; } }

/* ---------- legal documents ---------- */
.legal-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); align-items: start; }
.legal-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); font-size: var(--fs-sm); }
.legal-toc-label { font-weight: 600; margin-bottom: var(--s3); }
.legal-toc li + li { margin-top: var(--s2); }
.legal-toc a { color: var(--ink-3); transition: color var(--dur) var(--ease); }
.legal-toc a:hover { color: var(--ink); }
.legal-body { grid-column: 5 / span 8; }
.legal-body section + section { margin-top: var(--s7); }
.legal-body section > * + * { margin-top: var(--s4); }
.legal-body section > h3 { margin-top: var(--s6); }
.legal-body section > h2 + * { margin-top: var(--s4); }
.legal-body section > h2:first-child { margin-top: 0; }
.legal-body h2 span { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--teal); margin-bottom: var(--s2); }
.legal-body code { font-family: var(--mono); font-size: 0.875em; }
.legal-body .callout { padding: var(--s5); background: var(--stone); border-left: 3px solid var(--teal); border-radius: var(--radius); }
@media (max-width: 1023px) { .legal-toc { display: none; } .legal-body { grid-column: 1 / -1; } }

/* ---------- interactive demos ---------- */
.demo { padding: var(--card-pad); }
.demo-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s3) var(--s6); margin-bottom: var(--s5); }
.demo-status { font-size: var(--fs-sm); color: var(--ink-2); max-width: 60ch; min-height: 1.55em; }
.demo-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); }
.demo-table th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 1px solid var(--line); }
.demo-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.demo-table .num { font-variant-numeric: tabular-nums; }
.demo-table .seal { color: var(--ink-3); }
.demo-table .state { font-weight: 600; white-space: nowrap; }
.demo-table tr.is-ok .state { color: var(--teal); }
.demo-table tr.is-unchecked .state { color: var(--ink-3); font-weight: 500; }
.demo-table tr.is-altered td, .demo-table tr.is-gap td { background: var(--amber-tint); }
.demo-table tr.is-altered .state, .demo-table tr.is-gap .state { color: var(--amber); }
.demo-table tr.is-altered td:first-child, .demo-table tr.is-gap td:first-child { box-shadow: inset 3px 0 0 var(--amber); padding-left: 12px; }
.demo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.demo-actions .link-arrow { margin-left: var(--s3); }
.demo-note { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; }
@media (max-width: 679px) {
  .demo-table { min-width: 0; }
  .demo-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .demo-table tr { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); padding: var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
  .demo-table td, .demo-table tr.is-altered td, .demo-table tr.is-gap td { padding: 0; border: 0; background: none; box-shadow: none; }
  .demo-table td.seal { display: none; }
  .demo-table td.state { grid-column: 2; grid-row: 1; text-align: right; }
  .demo-table td.num { grid-column: 2; grid-row: 2; text-align: right; }
  .demo-table tr.is-altered, .demo-table tr.is-gap { background: var(--amber-tint); box-shadow: inset 3px 0 0 var(--amber); }
  .demo-actions .btn { height: 44px; }
}

.seg { display: inline-flex; padding: 3px; border-radius: var(--radius); background: var(--stone); border: 1px solid var(--line); }
.seg button { height: 44px; padding: 0 16px; border-radius: 3px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); transition: background-color var(--dur) var(--ease), color var(--dur); }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgb(13 19 23 / 0.08); }
.ghost-rows { display: grid; gap: 6px; }
.ghost-row { position: relative; display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: var(--s4); height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.ghost-row .gid { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.ghost-row .gname { font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost-row .gstate { font-size: var(--fs-xs); font-weight: 600; color: var(--teal); }
.ghost-row.is-deleted .gname { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.ghost-row.is-deleted .gstate { color: var(--ink-3); }
.ghost-row .gblocks { display: none; gap: 5px; }
.ghost-row .gblocks i { display: block; height: 12px; border-radius: 1.5px; background: var(--teal-tint); }
[data-mode="observer"] .ghost-row { border-color: var(--line); }
[data-mode="observer"] .ghost-row .gname, [data-mode="observer"] .ghost-row .gstate { display: none; }
[data-mode="observer"] .ghost-row .gblocks { display: flex; }
[data-mode="observer"] .ghost-row.is-deleted { opacity: 1; }
.ghost-caption { margin-top: var(--s4); font-size: var(--fs-sm); color: var(--ink-2); min-height: 3em; max-width: 60ch; }
@media (max-width: 519px) { .ghost-row { grid-template-columns: 1fr auto; } .ghost-row .gid { display: none; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s8); align-items: start; }
.contact-form { grid-column: 1 / span 7; }
.contact-aside { grid-column: 9 / span 4; }
.contact-aside .h4 + .text { margin-top: var(--s3); }
.contact-aside .text + .h4 { margin-top: var(--s6); }
@media (max-width: 1023px) { .contact-form, .contact-aside { grid-column: 1 / -1; } }

/* ---------- brand page ---------- */
.logo-stage.is-hero { min-height: 360px; border-radius: var(--radius); }
.logo-stage.is-hero .mark { width: 144px; height: 144px; }
.swatch-meta .muted { margin-top: var(--s1); }
.type-specimen .lead { margin-top: var(--s5); }

/* ---------- people (contributors) ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--col-gap); }
.person { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.person .h4 { margin-top: var(--s4); }
.person .text { margin-top: var(--s1); font-size: var(--fs-sm); }
.monogram { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius); background: var(--stone); font-stretch: var(--wide); font-weight: 600; font-size: 1rem; color: var(--ink); }

/* ---------- definition list (facts) ---------- */
.dl { display: grid; grid-template-columns: minmax(160px, 1fr) 2fr; border-top: 1px solid var(--line); }
.dl dt, .dl dd { padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.dl dt { color: var(--ink-3); font-size: var(--fs-sm); padding-right: var(--s5); }
.dl dd { color: var(--ink); font-weight: 500; }
.tone-vault .dl, .tone-vault .dl dt, .tone-vault .dl dd { border-color: var(--vault-line); }
.tone-vault .dl dt { color: var(--vault-ink-2); }
.tone-vault .dl dd { color: var(--vault-ink); }

/* ---------- status list ---------- */
.statuses { display: grid; gap: 0; border-top: 1px solid var(--line); }
.status-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.chip { justify-self: start; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--radius); font-size: var(--fs-xs); font-weight: 600; background: var(--teal-tint); color: var(--teal-deep); }
.chip.is-alert { background: var(--amber-tint); color: var(--amber); }
.chip.is-neutral { background: var(--stone-2); color: var(--ink-2); }
@media (max-width: 679px) { .status-row { grid-template-columns: 1fr; gap: var(--s2); } }

/* ---------- swatches (brand page) ---------- */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--col-gap); }
.swatch { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--paper); }
.swatch-chip { height: 120px; }
.swatch-meta { padding: var(--s4); font-size: var(--fs-sm); }
.swatch-meta strong { display: block; font-weight: 600; }
.swatch-meta span { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink-3); }
.logo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.logo-tile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logo-stage { display: grid; place-items: center; min-height: 220px; padding: var(--s7); background: var(--paper); color: var(--ink); }
.logo-stage.tone-vault { background: var(--vault); color: var(--vault-ink); }
.logo-stage .lockup { height: 40px; width: auto; }
.logo-stage .mark { height: 72px; width: 72px; }
.logo-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
@media (max-width: 767px) { .logo-tiles { grid-template-columns: 1fr; } }

/* ---------- neutral bullets (for limits and risks, where a tick would read as a feature) ---------- */
.bullets li { position: relative; padding-left: 22px; color: var(--ink-2); }
.bullets li + li { margin-top: var(--s3); }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px; border: 1.5px solid var(--ink-3); border-radius: 1px; }

/* ---------- WordPress compatibility list ---------- */
.compat { max-width: 720px; }

/* ---------- audit log (Defender) ---------- */
.log { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; background: var(--vault); color: var(--vault-ink-2); border: 1px solid var(--vault-line); border-radius: var(--radius); padding: var(--card-pad); }
.log-head { display: flex; justify-content: space-between; gap: var(--s4); font-family: var(--font); font-size: var(--fs-sm); font-weight: 600; color: var(--vault-ink); padding-bottom: var(--s4); margin-bottom: var(--s2); border-bottom: 1px solid var(--vault-line); }
.log-chain { color: var(--signal); }
.log-row { display: grid; grid-template-columns: 72px 136px 1fr; gap: var(--s3); padding-block: var(--s2); border-bottom: 1px solid var(--vault-line); }
.log-row:last-child { border-bottom: 0; }
.log-t { color: #6F8C8C; }
.log-e { color: var(--vault-ink); }
@media (max-width: 519px) { .log-row { grid-template-columns: 64px 1fr; } .log-d { grid-column: 2; } }

/* ---------- diagram labels stay legible on small screens ---------- */
@media (max-width: 679px) {
  .dg-small, .dg-alert-text, .dg-pill-text { font-size: 18px; }
  .dg-label, .dg-value { font-size: 18px; }
  .dg-title { font-size: 20px; }
  .dg-mono { font-size: 16px; }
}

/* ---------- lifecycle: before (0), sealed (1), chained (2), verified (3), evidence ready (4) ---------- */
.lifecycle .lc-evidence { opacity: 0; transition: opacity 520ms var(--ease); }
[data-step="0"] .lifecycle .lc-s1 { opacity: 1; }
[data-step="1"] .lifecycle .lc-s2, [data-step="2"] .lifecycle .lc-s2 { opacity: 1; }
[data-step="3"] .lifecycle .lc-s4, [data-step="4"] .lifecycle .lc-s4 { opacity: 1; }
:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .lifecycle .lc-plain { opacity: 0; }
:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .lifecycle .lc-sealed { opacity: 1; }
:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"]) .lifecycle .lc-sealed rect { transform: none; }
:is([data-step="2"], [data-step="3"], [data-step="4"]) .lifecycle :is(.lc-chain, .lc-prev) { opacity: 1; }
:is([data-step="3"], [data-step="4"]) .lifecycle .lc-verify { opacity: 1; }
[data-step="4"] .lifecycle .lc-evidence { opacity: 1; }

/* ---------- the G mark: one sealed cell; the header copy draws itself once on load ---------- */
.lockup, .mark { --acc: var(--teal); }
.tone-vault .lockup, .tone-vault .mark { --acc: var(--signal); }
:is(.lockup, .mark) .acc { fill: var(--acc); }
.gm :is(.c, .f) { transform-box: fill-box; transform-origin: 50% 50%; }
.gm .f { fill: var(--stone-2); }
.tone-vault .gm .f { fill: #17343A; }
.gm .s { fill: var(--acc); transform-box: fill-box; transform-origin: 100% 0; transform: scale(.62); }
html.js :is(.gm-play, .is-in .gm-reveal) .c { animation: gm-in 420ms cubic-bezier(.2, .8, .2, 1) var(--d) both; }
html.js :is(.gm-play, .is-in .gm-reveal) .s { animation: gm-seal 1s cubic-bezier(.2, .8, .2, 1) 1.45s both; }
html.js .is-in .gm-reveal .f { animation: gm-flicker 900ms linear var(--d) both; }
@keyframes gm-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
@keyframes gm-seal { 0% { opacity: 0; transform: scale(.2); fill: currentColor; } 40%, 60% { opacity: 1; transform: none; fill: currentColor; } 100% { opacity: 1; transform: scale(.62); fill: var(--acc); } }
@keyframes gm-flicker { 0%, 33%, 67%, 100% { opacity: 1; } 17% { opacity: .3; } 50% { opacity: .45; } 83% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { html.js :is(.gm-play, .is-in .gm-reveal) :is(.c, .s, .f) { animation: none; } }

/* ---------- wardrail: verdict, code graph, record ---------- */
.verdict { border: 1px solid var(--vault-line); border-radius: var(--radius); padding: var(--card-pad); font-size: var(--fs-sm); line-height: 1.5; }
.verdict-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--vault-line); font-weight: 600; color: var(--vault-ink); }
.verdict-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 1700ms var(--ease) 300ms; }
.verdict-ref, .cg-count { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 400; color: var(--vault-ink-2); }
.vr { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s4); align-items: baseline; padding-block: var(--s4); border-bottom: 1px solid var(--vault-line); }
.vr-k { color: var(--vault-ink); }
.vr-v { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--vault-ink-2); white-space: nowrap; }
.vr-v::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vr.is-ok .vr-v { color: var(--signal); }
.vr.is-flag .vr-v { color: var(--signal-amber); }
.vr-d { grid-column: 1 / -1; font-family: var(--mono); font-size: var(--fs-xs); color: #8BA5A5; overflow-wrap: anywhere; }
.verdict-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s4); padding-top: var(--s4); font-weight: 600; color: var(--signal-amber); }
.vf-sig { font-weight: 400; color: var(--vault-ink-2); }
html.js .verdict :is(.vr, .verdict-foot) { opacity: 0; transform: translateY(4px); transition: opacity 420ms var(--ease), transform 420ms var(--ease); transition-delay: calc(var(--r) * 280ms + 400ms); }
html.js .is-in .verdict :is(.vr, .verdict-foot) { opacity: 1; transform: none; }
.is-in .verdict .verdict-head::after { transform: scaleX(1); }
.cg-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s2) var(--s4); padding-bottom: var(--s4); margin-bottom: var(--s5); border-bottom: 1px solid var(--vault-line); font-size: var(--fs-sm); font-weight: 600; color: var(--vault-ink); }
.cg-head code { font-family: var(--mono); font-weight: 500; color: var(--signal-amber); }
.cg-edge { stroke: var(--vault-line); stroke-width: 1.5; }
.cg-faint { fill: #2C4D53; }
.cg-hot { stroke: var(--signal); stroke-width: 2; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cg-dep circle { fill: var(--signal); }
.cg-ring { fill: none; stroke: var(--signal-amber); stroke-opacity: 0.45; stroke-width: 1.5; }
.cg-changed { fill: var(--signal-amber); }
.codegraph .cg-label { fill: var(--vault-ink-2); font-family: var(--mono); font-size: 15px; }
.codegraph .cg-strong { fill: var(--vault-ink); font-weight: 500; }
html.js .codegraph .cg-hot { stroke-dashoffset: 1; transition: stroke-dashoffset 640ms var(--ease); transition-delay: calc(var(--e) * 140ms + 500ms); }
html.js .codegraph .cg-dep { opacity: 0; transition: opacity 400ms var(--ease); transition-delay: calc(var(--e) * 140ms + 900ms); }
html.js .is-in .codegraph .cg-hot { stroke-dashoffset: 0; }
html.js .is-in .codegraph .cg-dep { opacity: 1; }
.record-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s3) var(--s4); margin-bottom: var(--s5); }
.record-ok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--teal); }
.record-ok .icon { width: 16px; height: 16px; }
.record-link { margin-top: var(--s5); }
.ways .feature { min-width: 0; }
.ways .code { margin-top: var(--s5); padding: var(--s5); font-size: 0.8125rem; }
.ways .link-arrow { margin-top: var(--s5); }
@media (max-width: 519px) { .codegraph .cg-label { font-size: 22px; } .codegraph .cg-strong { transform: translateY(-5px); } .record .dl { grid-template-columns: 1fr; } .record .dl dt { padding-bottom: 0; border-bottom: 0; } }

/* ---------- print: everything visible, no chrome, dark sections readable on paper ---------- */
@media print {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; }
  html.js .verdict :is(.vr, .verdict-foot), html.js .codegraph .cg-dep { opacity: 1 !important; transform: none !important; }
  html.js .codegraph .cg-hot { stroke-dashoffset: 0 !important; }
  .steps .step .h3, .steps .step .text { color: #000 !important; }
  .site-header, .flyout, .skip-link, .hero-canvas, .rail-controls, .demo-actions { display: none !important; }
  .tone-vault, .tone-vault * { background: none !important; color: #000 !important; border-color: #999 !important; }
  .hero { min-height: 0; padding-block: 24px; }
  .hero::before { display: none; }
  a { text-decoration: underline; }
}

/* ---------- reveal on scroll ---------- */
html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  html.js [data-reveal] { opacity: 1; transform: none; }
}