/* ==========================================================================
   VNYX IT — audience, trust and founder sheets
   (accounting.html, insurance.html, law.html, trust.html, about.html)
   Builds only on site.css tokens/components. Every class here is page-level;
   nothing restyles a shared component globally.
   ========================================================================== */

/* ---------- Night-safe signal colors (AA on --night) ---------- */
.theme-night { --rust-lt: #E8875A; --cobalt-lt: #9AA6FF; --ok-lt: #5CC48C; }
.theme-night .h3 em, .theme-night .h4 em { color: var(--amber); font-style: italic; }
.theme-night .tag--rust { color: var(--rust-lt); border-color: rgba(232, 135, 90, 0.42); background: rgba(232, 135, 90, 0.08); }
.theme-night .tag--cobalt { color: var(--cobalt-lt); border-color: rgba(154, 166, 255, 0.4); background: rgba(154, 166, 255, 0.08); }
.theme-night .tag--ok { color: var(--ok-lt); border-color: rgba(92, 196, 140, 0.4); background: rgba(92, 196, 140, 0.08); }
.theme-night .label .tick { opacity: 0.7; }
.theme-night .reg { color: var(--night-text); }

/* ---------- Sheet head helpers ---------- */
.sheet-title .t { font-family: var(--f-sans); font-weight: 500; font-size: var(--t-sm); color: var(--ink-2); }
.theme-night .sheet-title .t { color: var(--night-text); }
.sheet-meta.label { justify-content: flex-end; }
.paper-2 { background: var(--paper-2); }

/* ---------- Hero ---------- */
.pg-hero { padding-top: calc(var(--nav-h) + clamp(1.75rem, 4vw, 3rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.pg-hero .sheet-head { margin-bottom: clamp(2rem, 4.5vw, 3.75rem); }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.pg-hero__copy .display { max-width: 14ch; }
.pg-hero__copy .lede { margin-top: var(--s6); max-width: 44ch; }
.pg-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.pg-hero__fine { margin-top: var(--s4); font-size: var(--t-sm); color: var(--graphite); max-width: 52ch; display: flex; gap: 0.6rem; align-items: baseline; }
.pg-hero__fine svg { flex: none; color: var(--ok); transform: translateY(2px); }
.pg-hero__aside { position: relative; }
.pg-hero__aside .stamp { position: absolute; right: 1.25rem; bottom: -3.4rem; z-index: 2; background: var(--paper); }

/* Title-block facts strip */
.tblock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--rule-strong); margin: clamp(3rem, 6vw, 4.5rem) 0 0; background: rgba(248, 246, 240, 0.7); }
.tblock > div { padding: 1rem 1.15rem 1.1rem; border-right: 1px solid var(--rule-strong); display: grid; gap: 0.35rem; align-content: start; }
.tblock > div:last-child { border-right: 0; }
.tblock dt { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }
.tblock dd { margin: 0; font-family: var(--f-display); font-variation-settings: "opsz" 36; font-size: 1.3rem; line-height: 1.2; }
.tblock dd small { display: block; font-family: var(--f-sans); font-size: var(--t-xs); color: var(--graphite); margin-top: 0.2rem; line-height: 1.4; }

/* ---------- Drawings ---------- */
.drw { position: relative; margin: 0; border: 1px solid var(--rule-strong); background: var(--card); padding: clamp(2.25rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem); }
.drw__tag { position: absolute; top: -1px; left: -1px; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.65rem; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-2); }
.drw__tag--r { left: auto; right: -1px; }
.drw svg { width: 100%; height: auto; overflow: visible; }
.drw figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem 1rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 720px) {
  /* Drawings go edge to edge on phones so their labels stay legible */
  .drw { margin-inline: calc(-1 * var(--gutter)); padding-inline: 10px; border-inline: 0; }
  .drw__tag { left: 0; }
  .drw__tag--r { right: 0; }
}
.theme-night .drw { background: var(--night-2); border-color: var(--night-rule); }
.theme-night .drw__tag { background: var(--night); border-color: var(--night-rule); color: var(--night-muted); }
.theme-night .drw figcaption { border-color: var(--night-rule); color: var(--night-muted); }

/* SVG vocabulary */
.svg text { font-family: var(--f-mono); letter-spacing: 0.06em; fill: var(--graphite); font-size: 14px; }
.svg .tx-ink { fill: var(--ink); }
.svg .tx-rust { fill: var(--rust); }
.svg .tx-cobalt { fill: var(--cobalt-ink); }
.svg .tx-ok { fill: var(--ok); }
.svg .tx-sm { font-size: 12px; }
.svg .tx-lg { font-size: 17px; }
.svg .tx-disp { font-family: var(--f-display); letter-spacing: -0.01em; font-size: 22px; fill: var(--ink); }
.svg .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.svg .ln-thin { fill: none; stroke: var(--graphite); stroke-width: 1; stroke-linecap: round; }
.svg .ln-rust { fill: none; stroke: var(--rust); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svg .ln-cobalt { fill: none; stroke: var(--cobalt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.svg .ln-ok { fill: none; stroke: var(--ok); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svg .fl-cobalt { fill: var(--cobalt-tint); }
.svg .fl-rust { fill: var(--rust-tint); }
.svg .fl-paper { fill: var(--paper); }
.svg .fl-card { fill: var(--card); }
.svg .fl-ink { fill: var(--ink); }
.svg .fl-cobalt-solid { fill: var(--cobalt); }
.svg .fl-rust-solid { fill: var(--rust); }
.svg .dash { stroke-dasharray: 5 5; }
.theme-night .svg text { fill: var(--night-muted); }
.theme-night .svg .tx-ink, .theme-night .svg .tx-disp { fill: var(--night-text); }
.theme-night .svg .tx-rust { fill: var(--rust-lt); }
.theme-night .svg .tx-cobalt { fill: var(--cobalt-lt); }
.theme-night .svg .ln { stroke: var(--night-text); }
.theme-night .svg .ln-rust { stroke: var(--rust-lt); }
.theme-night .svg .ln-cobalt { stroke: var(--cobalt-lt); }
.theme-night .svg .fl-card, .theme-night .svg .fl-paper { fill: var(--night-2); }

/* Dashed lines and fills fade in instead of being stroke-drawn */
.line-draw .dash, .line-draw .fade { stroke-dasharray: 5 5; stroke-dashoffset: 0; opacity: 0; transition: opacity 0.9s var(--ease-out); transition-delay: calc(var(--d, 0s) + 0.5s); }
.line-draw .fade { stroke-dasharray: none; }
.line-draw.is-in .dash, .line-draw.is-in .fade { opacity: 1; }
.line-draw .nodraw { stroke-dasharray: none; stroke-dashoffset: 0; }
.line-draw text { opacity: 0; transition: opacity 0.8s var(--ease-out); transition-delay: 0.7s; }
.line-draw.is-in text { opacity: 1; }

/* ---------- Annotation notes ---------- */
.annots { display: grid; gap: 1.1rem; margin-top: var(--s6); }
.annot { display: grid; grid-template-columns: 30px 1fr; gap: 0.85rem; font-size: var(--t-sm); line-height: 1.6; color: var(--ink-2); }
.annot__n { width: 28px; height: 28px; border: 1px solid var(--cobalt); color: var(--cobalt-ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 0.6875rem; }
.annot b { display: block; color: var(--ink); font-weight: 600; font-size: var(--t-md); margin-bottom: 0.1rem; }
.theme-night .annot { color: var(--night-muted); }
.theme-night .annot b { color: var(--night-text); }
.theme-night .annot__n { border-color: var(--amber); color: var(--amber); }

/* ---------- Split section heads ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.split--top { align-items: start; }
.split .body-lg + .body-lg { margin-top: var(--s4); }

/* ---------- Big facts (citations as typography) ---------- */
.cites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--night-rule); }
.cites > div { padding: 1.5rem 1.5rem 1.5rem 0; border-right: 1px solid var(--night-rule); display: grid; gap: 0.6rem; align-content: start; }
.cites > div + div { padding-left: 1.5rem; }
.cites > div:last-child { border-right: 0; }
.cites .big { font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 40; font-weight: 340; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.03em; color: var(--night-text); }
.cites .big em { font-style: italic; color: var(--amber); }
.cites p { color: var(--night-muted); font-size: var(--t-sm); line-height: 1.6; max-width: 34ch; }
.pull { font-family: var(--f-display); font-variation-settings: "opsz" 72, "SOFT" 60; font-size: var(--t-xl); line-height: 1.4; max-width: 46ch; color: var(--night-text); border-left: 2px solid var(--amber); padding-left: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.pull span { display: block; margin-top: 0.5rem; font-family: var(--f-sans); font-size: var(--t-sm); color: var(--night-muted); }

/* ---------- Ledger: asks -> we put in place -> proof ---------- */
.ledger { border-top: 2px solid var(--ink); }
.ledger__head, .ledger__row { display: grid; grid-template-columns: 64px repeat(3, minmax(0, 1fr)); }
.ledger__head { border-bottom: 1px solid var(--rule-strong); }
.ledger__head > div { padding: 0.9rem 1.25rem 0.9rem 0; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); display: flex; gap: 0.5rem; align-items: center; }
.ledger__head > div:nth-child(n+3) { padding-left: 1.25rem; }
.ledger__head .sw { width: 10px; height: 10px; border: 1px solid currentColor; flex: none; }
.ledger__head .c-ask { color: var(--rust); }
.ledger__head .c-do { color: var(--cobalt-ink); }
.ledger__head .c-proof { color: var(--ok); }
.ledger__row { border-bottom: 1px solid var(--rule-strong); position: relative; transition: background-color 0.3s; }
.ledger__row:hover { background: rgba(248, 246, 240, 0.8); }
.ledger__no { padding: 1.5rem 0; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--graphite); letter-spacing: 0.08em; }
.ledger__cell { padding: 1.5rem 1.5rem 1.6rem 0; position: relative; line-height: 1.55; font-size: 0.975rem; color: var(--ink-2); }
.ledger__cell + .ledger__cell { padding-left: 1.5rem; border-left: 1px dashed var(--rule-strong); }
.ledger__cell + .ledger__cell::before {
  content: ""; position: absolute; left: -6px; top: 1.85rem; width: 11px; height: 11px;
  background: var(--paper); border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg) scale(0.75);
}
.paper-2 .ledger__cell + .ledger__cell::before { background: var(--paper-2); }
.ledger__k { display: none; }
.ledger__cell--ask strong { display: block; font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.15rem; line-height: 1.3; color: var(--ink); margin-bottom: 0.4rem; }
.ledger__cell--ask .cite { display: inline-block; margin-top: 0.3rem; }
.ledger__cell--proof { color: var(--ink); }
.ledger__cell--proof .proof { display: grid; grid-template-columns: 18px 1fr; gap: 0.55rem; }
.ledger__cell--proof svg { color: var(--ok); margin-top: 0.2rem; }
.cite { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }

/* Not-legal-advice note */
.legal { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; align-items: baseline; margin-top: var(--s6); padding-top: 1rem; border-top: 1px dashed var(--rule-strong); font-size: var(--t-xs); line-height: 1.6; color: var(--graphite); max-width: 92ch; }
.legal b { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.theme-night .legal { border-color: var(--night-rule); color: var(--night-muted); }
.theme-night .legal b { color: var(--night-text); }

/* ---------- Moves (what leaves the closet) ---------- */
.moves { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.photo { position: relative; margin: 0; border: 1px solid var(--rule-strong); background: var(--night); }
.photo__img { position: relative; overflow: hidden; }
.photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(0.75) contrast(1.05); }
.moves > :first-child { position: sticky; top: calc(var(--nav-h) + 2rem); }
.photo .tag { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(10, 12, 15, 0.7); color: var(--night-text); border-color: rgba(236, 233, 225, 0.3); }
.photo figcaption { padding: 0.75rem 0.9rem; background: var(--paper); border-top: 1px solid var(--rule-strong); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.photo__mark { position: absolute; border: 1.5px solid var(--amber); border-radius: 50%; pointer-events: none; }
.photo__mark::after { content: attr(data-n); position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--night); font-family: var(--f-mono); font-size: 0.6875rem; display: grid; place-items: center; }

.mlist { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.mlist > li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1rem; padding: 1.5rem 0; border-bottom: 1px solid var(--rule-strong); }
.mlist__no { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--cobalt-ink); padding-top: 0.35rem; }
.mlist h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 500; font-size: var(--t-xl); line-height: 1.25; }
.mlist h3 .from { color: var(--rust); }
.mlist h3 .to { color: var(--cobalt-ink); }
.mlist p { margin-top: 0.45rem; color: var(--ink-2); max-width: 56ch; }
.also { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.also .label { margin-right: 0.25rem; }

/* Permission matrix */
.matrix-wrap { margin-top: clamp(3rem, 6vw, 5rem); }
.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--rule-strong); background: var(--card); }
.matrix { width: 100%; border-collapse: collapse; min-width: 560px; font-size: var(--t-sm); }
.matrix caption { caption-side: top; text-align: left; padding: 0 0 0.9rem; }
.matrix th, .matrix td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule); text-align: center; }
.matrix thead th { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); font-weight: 500; border-bottom: 1px solid var(--rule-strong); background: var(--paper); }
.matrix tbody th { text-align: left; font-weight: 500; color: var(--ink); }
.matrix tbody th small { display: block; font-weight: 400; color: var(--graphite); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.15rem; }
.matrix tr:last-child th, .matrix tr:last-child td { border-bottom: 0; }
.matrix tbody tr:hover { background: var(--cobalt-tint); }
.pm { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.pm--edit { background: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-tint); }
.pm--view { border: 1.5px solid var(--cobalt); }
.pm--none { width: 14px; height: 1.5px; border-radius: 0; background: var(--graphite); opacity: 0.6; }
.pm--wall { width: auto; height: auto; border-radius: 2px; padding: 0.2rem 0.45rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: var(--rust); border: 1px solid rgba(177, 74, 22, 0.4); background: var(--rust-tint); }
.matrix-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: 0.9rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); align-items: center; }
.matrix-legend span { display: inline-flex; gap: 0.5rem; align-items: center; }
.matrix-legend .pm { width: 14px; height: 14px; }
.matrix-legend .pm--none { width: 12px; height: 1.5px; }

/* ---------- Season calendar ---------- */
.season { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--rule-strong); border: 1px solid var(--rule-strong); }
.season__m { background: var(--paper-2); padding: 0.75rem 0.6rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; min-height: 168px; position: relative; }
.season__name { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.season__dl { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--rust); line-height: 1.35; display: grid; gap: 0.2rem; }
.season__dl span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--rust); transform: rotate(45deg) translateY(-1px); margin-right: 0.35rem; }
.season__bar { margin-top: auto; height: 52px; display: flex; border: 1px solid var(--rule-strong); background: var(--paper); overflow: hidden; }
.seg { display: block; flex: 1; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 0.8s var(--ease-out); transition-delay: var(--d, 0s); }
.season.is-in .seg { transform: none; }
.seg--good { background: var(--cobalt); opacity: 0.85; }
.seg--think { background: repeating-linear-gradient(-45deg, rgba(233, 138, 44, 0.55) 0 4px, rgba(233, 138, 44, 0.15) 4px 8px); }
.seg--avoid { background: repeating-linear-gradient(-45deg, var(--rust) 0 3px, rgba(177, 74, 22, 0.15) 3px 7px); }
.season__state { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.season-legend { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; margin-top: 1rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.season-legend span { display: inline-flex; align-items: center; gap: 0.55rem; }
.season-legend i { display: inline-block; width: 22px; height: 12px; border: 1px solid var(--rule-strong); }
.weekend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--rule-strong); }
.weekend > div { padding: 1.5rem 1.5rem 0 0; display: grid; gap: 0.5rem; align-content: start; position: relative; }
.weekend > div + div { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
.weekend .label { color: var(--cobalt-ink); }
.weekend p { color: var(--ink-2); font-size: 0.975rem; }

/* ---------- Out of scope (night) ---------- */
.oos { border-top: 1px solid var(--night-rule); }
.oos__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--night-rule); align-items: start; }
.oos__name { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-size: var(--t-xl); line-height: 1.25; color: var(--night-text); }
.oos__why { color: var(--night-muted); line-height: 1.6; }
.oos__tag { justify-self: end; }

/* ---------- Two-column scope (insurance / law) ---------- */
.scope2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--rule-strong); background: var(--card); }
.scope2 > div { padding: clamp(1.5rem, 3vw, 2.5rem); }
.scope2 > div + div { border-left: 1px solid var(--rule-strong); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(177, 74, 22, 0.035) 10px 11px); }
.scope2 h3 { margin: 0.8rem 0 1.25rem; }
.scope2 .checklist li { font-size: 0.975rem; }
.scope2 .checklist b { font-weight: 600; color: var(--ink); }
.scope2 .hosted-note { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed var(--rule-strong); font-size: var(--t-sm); color: var(--ink-2); }

/* Conversion table: where it lives today -> where it lands */
.xt { border-top: 2px solid var(--ink); }
.xt__row { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--rule-strong); }
.xt__row > div { padding: 1.25rem 0; }
.xt__from { color: var(--ink-2); }
.xt__from b, .xt__to b { display: block; font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; }
.xt__from b { color: var(--rust); }
.xt__to b { color: var(--cobalt-ink); }
.xt__to { color: var(--ink); }
.xt__arrow { display: grid; place-items: center; color: var(--cobalt); }
.xt__arrow svg { width: 22px; height: 22px; }

/* ---------- Pains (night field notes) ---------- */
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-rule); }
.pain { padding: 2rem 1.75rem 2.25rem 0; display: grid; gap: 0.9rem; align-content: start; }
.pain + .pain { padding-left: 1.75rem; border-left: 1px solid var(--night-rule); }
.pain svg.ico { width: 64px; height: 64px; color: var(--night-text); }
.pain .label { color: var(--rust-lt); }
.pain h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 400; font-size: 1.5rem; line-height: 1.2; color: var(--night-text); }
.pain p { color: var(--night-muted); line-height: 1.65; }
.pain p b { color: var(--night-text); font-weight: 500; }

/* ---------- Package teaser ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.tier { display: flex; flex-direction: column; gap: 0.9rem; }
.tier .dim { margin-bottom: 0.25rem; }
.tier__name { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-size: var(--t-2xl); line-height: 1.1; }
.tier__price { font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 30; font-weight: 360; font-size: clamp(2.5rem, 1.9rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; }
.tier__price small { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); display: block; margin-top: 0.45rem; }
.tier__sum { color: var(--ink-2); font-size: 0.975rem; }
.tier--pick { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt) inset; }
.tier--pick .card__corner { color: var(--cobalt-ink); border-color: var(--cobalt-line); background: var(--cobalt-tint); }
.monthly { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 2rem; align-items: center; margin-top: var(--s4); padding: 1.25rem 1.5rem; border: 1px dashed var(--rule-strong); }
.monthly .v { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.2; }
.monthly .v .num { font-family: var(--f-display); }
.monthly p { color: var(--ink-2); font-size: var(--t-sm); }
.fineprint { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--graphite); }

/* ---------- FAQ layout ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-grid__aside { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq-grid__aside p { margin-top: var(--s4); color: var(--ink-2); max-width: 34ch; }

/* ---------- CTA sheet ---------- */
.pg-cta { overflow: hidden; }
.pg-cta__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.pg-cta .display { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); max-width: 15ch; }
.pg-cta__box { border: 1px solid var(--rule-strong); background: var(--card); padding: clamp(1.5rem, 3vw, 2.25rem); position: relative; }
.pg-cta__box .checklist { margin-bottom: 1.5rem; }
.pg-cta__box .btn { width: 100%; }
.pg-cta__box .sub { margin-top: 0.9rem; text-align: center; font-size: var(--t-sm); }
.pg-cta__ghost { position: absolute; right: -2vw; bottom: -0.15em; font-family: var(--f-display); font-variation-settings: "opsz" 144; font-weight: 300; font-size: clamp(6rem, 22vw, 20rem); line-height: 0.8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(43, 63, 224, 0.16); pointer-events: none; user-select: none; }

/* ---------- Stamp that lands ---------- */
.stamp[data-reveal] { opacity: 0; transform: rotate(-6deg) scale(1.5); transition: opacity 0.35s ease-out, transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: var(--d, 0s); }
.stamp[data-reveal].is-in { opacity: 0.92; transform: rotate(-6deg) scale(1); }

/* ==========================================================================
   TRUST
   ========================================================================== */
.roles { list-style: none; margin: var(--s6) 0 0; padding: 0; border-top: 1px solid var(--rule-strong); }
.roles li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule-strong); align-items: baseline; }
.roles .who { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.roles .who.c-you { color: var(--ink); }
.roles .who.c-us { color: var(--cobalt-ink); }
.roles .who.c-seal { color: var(--rust); }
.roles p { color: var(--ink-2); }
.roles p b { color: var(--ink); font-weight: 600; }

.triggers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.trigger { border: 1px solid rgba(177, 74, 22, 0.35); background: var(--rust-tint); padding: 1.25rem 1.35rem; border-radius: var(--radius); }
.trigger .label { color: var(--rust); }
.trigger h4 { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.2rem; margin: 0.5rem 0 0.35rem; }
.trigger p { font-size: var(--t-sm); color: var(--ink-2); }

.seal-wrap { position: relative; }
.seal-g { transform-box: fill-box; transform-origin: center; }
.line-draw .seal-g { opacity: 0; transform: scale(1.6) rotate(-14deg); transition: opacity 0.3s ease-out 1.5s, transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1) 1.5s; }
.line-draw.is-in .seal-g { opacity: 1; transform: none; }
.line-draw .seal-g text { opacity: 1; transition: none; }
.svg .seal-txt { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; fill: #F6E7D9; font-weight: 500; }
.svg .seal-core { font-family: var(--f-display); font-size: 26px; fill: #F6E7D9; letter-spacing: 0; font-style: italic; }

/* Gate timeline: read-only until you sign */
.gate { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: var(--s4); }
.gate::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 0; border-top: 2px dashed var(--rule-strong); }
.gate::after { content: ""; position: absolute; left: 50%; right: 0; top: 33px; height: 3px; background: var(--cobalt); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease-in-out) 0.4s; }
.gate.is-in::after { transform: none; }
.gate__st { position: relative; padding: 0 1rem 0 0; display: grid; gap: 0.55rem; align-content: start; }
.gate__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--graphite); margin-top: 27px; position: relative; z-index: 1; }
.gate__st--w .gate__dot { border-color: var(--cobalt); background: var(--cobalt); }
.gate__st .label { margin-top: 0.6rem; }
.gate__st--w .label { color: var(--cobalt-ink); }
.gate__st h3 { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.gate__st p { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; }
.gate__mode { position: absolute; top: 0; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; }
.gate__mode--r { left: 0; color: var(--graphite); }
.gate__mode--w { left: calc(50% + 12px); color: var(--cobalt-ink); }
.gate__sign { position: absolute; left: 50%; top: 10px; width: 2px; height: 50px; background: var(--ink); transform: translateX(-1px); z-index: 2; }
.gate__sign::after { content: "SIGNED"; position: absolute; top: 52px; left: 50%; transform: translateX(-50%) rotate(-6deg); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--ink); border: 1.5px solid var(--ink); padding: 0.1rem 0.35rem; background: var(--paper); white-space: nowrap; display: none; }

.see { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-top: clamp(3rem, 6vw, 4.5rem); }
.see .card h3 { margin: 0.75rem 0 1rem; }
.see .card p + p { margin-top: 0.75rem; }
.see .card p { color: var(--ink-2); }

/* Change flow + approval demo */
.flow { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.steps { list-style: none; margin: var(--s6) 0 0; padding: 0; counter-reset: st; border-left: 1px solid var(--night-rule); }
.steps li { position: relative; padding: 0 0 2rem 2.25rem; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { counter-increment: st; content: "0" counter(st); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--night); border: 1px solid var(--night-rule); font-family: var(--f-mono); font-size: 0.6875rem; color: var(--amber); }
.steps h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 400; font-size: 1.45rem; color: var(--night-text); line-height: 1.2; }
.steps p { margin-top: 0.4rem; color: var(--night-muted); max-width: 48ch; }
.motto { margin-top: clamp(2.5rem, 5vw, 3.5rem); font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 60; font-weight: 340; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--night-text); }
.motto em { color: var(--amber); }

.panel { background: var(--paper); color: var(--ink); border-radius: 6px; border: 1px solid rgba(236, 233, 225, 0.2); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8); overflow: hidden; }
.panel__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--rule-strong); background: var(--paper-2); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.panel__body { padding: 1.4rem 1.25rem 1.25rem; }
.panel__title { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-size: 1.3rem; line-height: 1.25; }
.panel__meta { font-size: var(--t-sm); color: var(--graphite); margin-top: 0.3rem; }
.panel__list { list-style: none; margin: 1.1rem 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.panel__list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 0.6rem; align-items: center; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--rule); font-size: var(--t-sm); }
.panel__list li:last-child { border-bottom: 0; }
.panel__list .st { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.panel__list .ic { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--rule-strong); display: grid; place-items: center; color: transparent; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.panel__list li.done .ic { background: var(--ok); border-color: var(--ok); color: #fff; }
.panel__list li.done .st { color: var(--ok); }
.panel__list li.run .ic { border-color: var(--cobalt); border-top-color: transparent; animation: spin 0.8s linear infinite; }
.panel__list li.run .st { color: var(--cobalt-ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.panel__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; align-items: center; }
.panel__actions .btn { min-height: 46px; }
.panel__status { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); margin-left: auto; }
.panel__status.ok { color: var(--ok); }
.panel__foot { padding: 0.8rem 1.25rem; border-top: 1px solid var(--rule); font-size: var(--t-xs); color: var(--graphite); background: var(--paper-2); }
.panel__steps { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rule); }
.panel__steps span { padding: 0.55rem 0.4rem; text-align: center; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); border-right: 1px solid var(--rule); position: relative; }
.panel__steps span:last-child { border-right: 0; }
.panel__steps span.on { color: var(--cobalt-ink); background: var(--cobalt-tint); }
.panel__steps span.done { color: var(--ok); }

/* Say / won't say ledger */
.say { border-top: 2px solid var(--ink); }
.say__head, .say__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.say__head > div { padding: 0.9rem 0; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; display: flex; gap: 0.5rem; align-items: center; border-bottom: 1px solid var(--rule-strong); }
.say__head > div:first-child { color: var(--ok); }
.say__head > div:last-child { color: var(--rust); padding-left: 1.5rem; }
.say__row { border-bottom: 1px solid var(--rule-strong); }
.say__yes, .say__no { padding: 1.5rem 1.5rem 1.6rem 0; display: grid; grid-template-columns: 22px 1fr; gap: 0.75rem; align-items: start; }
.say__no { padding-left: 1.5rem; border-left: 1px dashed var(--rule-strong); }
.say__yes svg { color: var(--ok); margin-top: 0.4rem; }
.say__no svg { color: var(--rust); margin-top: 0.4rem; }
.say__q { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-size: 1.35rem; line-height: 1.25; color: var(--ink); }
.say__why { display: block; margin-top: 0.45rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; max-width: 48ch; }
.say__no .say__q { color: var(--graphite); position: relative; display: inline; background-image: linear-gradient(var(--rust), var(--rust)); background-repeat: no-repeat; background-position: 0 58%; background-size: 0% 2px; transition: background-size 0.7s var(--ease-out) 0.3s; }
.say__row.is-in .say__no .say__q { background-size: 100% 2px; }
.say__k { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.letter-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.memo { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); display: grid; gap: 0; border-top: 1px solid var(--rule-strong); position: sticky; top: calc(var(--nav-h) + 2rem); }
.memo div { display: grid; grid-template-columns: 52px 1fr; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); }
.memo dt { color: var(--graphite); }
.memo dd { margin: 0; color: var(--ink); text-transform: none; letter-spacing: 0.02em; font-size: var(--t-xs); }
.letter { background: var(--card); border: 1px solid var(--rule-strong); padding: clamp(1.75rem, 5vw, 4rem); position: relative; box-shadow: 0 30px 60px -45px rgba(21, 24, 29, 0.45); }
.letter::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1rem, 2.5vw, 2rem); width: 1px; background: rgba(177, 74, 22, 0.25); }
.letter__open { font-family: var(--f-display); font-variation-settings: "opsz" 72, "SOFT" 60; font-size: var(--t-xl); margin-bottom: var(--s5); }
.letter p { font-size: var(--t-lg); line-height: 1.75; color: var(--ink-2); max-width: 60ch; }
.letter p + p { margin-top: 1.1rem; }
.letter p strong { color: var(--ink); font-weight: 600; }
.letter .sig { margin-top: var(--s6); display: grid; gap: 0.2rem; }
.letter .sig svg { width: min(260px, 70%); height: auto; color: var(--cobalt-ink); }
.letter .sig svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.letter .sig .line-draw path { transition-duration: 2.6s; }
.letter .sig .n { font-family: var(--f-display); font-size: var(--t-lg); }
.letter .sig .r { font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); }

.safe3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.safe3 .card h3 { margin: 0.9rem 0 0.6rem; }
.safe3 .card p { color: var(--ink-2); font-size: 0.975rem; }
.safe3 svg.ico { width: 56px; height: 56px; }

.roadmap { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--night-text); }
.roadmap__st { padding: 1.75rem 1.75rem 0 0; position: relative; display: grid; gap: 0.6rem; align-content: start; }
.roadmap__st + .roadmap__st { padding-left: 1.75rem; border-left: 1px solid var(--night-rule); }
.roadmap__st::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--amber); }
.roadmap__st + .roadmap__st::before { left: -7px; background: var(--night); border: 2px solid var(--night-muted); }
.roadmap__st--later::before { border-style: dashed !important; }
.roadmap__st h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 400; font-size: 1.6rem; line-height: 1.15; color: var(--night-text); }
.roadmap__st p { color: var(--night-muted); }
.roadmap__st .checklist li { color: var(--night-text); font-size: var(--t-sm); }
.roadmap__st .checklist svg { color: var(--amber); }

.rules { list-style: none; margin: 0; padding: 0; counter-reset: r; border-top: 1px solid var(--rule-strong); }
.rules li { counter-increment: r; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1rem 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--rule-strong); }
.rules li::before { content: "R." counter(r, decimal-leading-zero); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; color: var(--cobalt-ink); padding-top: 0.45rem; }
.rules h3 { font-family: var(--f-display); font-variation-settings: "opsz" 48; font-weight: 500; font-size: var(--t-xl); line-height: 1.25; }
.rules p { margin-top: 0.35rem; color: var(--ink-2); max-width: 64ch; }

.contact-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; padding-top: var(--s6); border-top: 1px solid var(--rule-strong); }
.contact-line .mail { font-family: var(--f-display); font-variation-settings: "opsz" 144, "SOFT" 50; font-weight: 360; font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--cobalt-ink); word-break: break-word; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pg-hero__grid { grid-template-columns: 1fr; }
  .pg-hero__aside { max-width: 560px; }
  .split, .moves, .flow, .faq-grid, .pg-cta__grid { grid-template-columns: 1fr; }
  .faq-grid__aside { position: static; }
  .moves > :first-child { position: static; }
  .letter-grid { grid-template-columns: 1fr; }
  .letter-grid > .memo { position: static; }
  .letter-grid > :last-child:empty { display: none; }
  .ledger__head { display: none; }
  .ledger__row { grid-template-columns: 1fr; padding: 1.25rem 0 0.5rem; }
  .ledger__no { padding: 0 0 0.5rem; }
  .ledger__cell, .ledger__cell + .ledger__cell { padding: 0.25rem 0 1rem 1.1rem; border-left: 2px solid var(--rule-strong); }
  .ledger__cell--ask { border-left-color: var(--rust) !important; }
  .ledger__cell--do { border-left-color: var(--cobalt) !important; }
  .ledger__cell--proof { border-left-color: var(--ok) !important; }
  .ledger__cell + .ledger__cell::before { display: none; }
  .ledger__k { display: block; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); margin-bottom: 0.3rem; }
  .gate { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2rem; }
  .gate::before, .gate::after, .gate__sign, .gate__mode { display: none; }
  .gate__dot { margin-top: 0; }
}

@media (max-width: 860px) {
  .tblock { grid-template-columns: 1fr 1fr; }
  .tblock > div:nth-child(2) { border-right: 0; }
  .tblock > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-strong); }
  .cites { grid-template-columns: 1fr; }
  .cites > div, .cites > div + div { padding: 1.25rem 0; border-right: 0; border-bottom: 1px solid var(--night-rule); }
  .pains { grid-template-columns: 1fr; }
  .pain, .pain + .pain { padding: 1.75rem 0; border-left: 0; border-bottom: 1px solid var(--night-rule); }
  .tiers { grid-template-columns: 1fr; }
  .monthly { grid-template-columns: 1fr; }
  .oos__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .oos__tag { justify-self: start; }
  .scope2 { grid-template-columns: 1fr; }
  .scope2 > div + div { border-left: 0; border-top: 1px solid var(--rule-strong); }
  .weekend { grid-template-columns: 1fr; }
  .weekend > div, .weekend > div + div { padding: 1.25rem 0; border-left: 0; border-bottom: 1px solid var(--rule); }
  .season { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .season__m { min-height: 140px; }
  .safe3 { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--night-text); }
  .roadmap__st, .roadmap__st + .roadmap__st { padding: 0 0 2rem 1.75rem; border-left: 0; }
  .roadmap__st::before, .roadmap__st + .roadmap__st::before { top: 4px; left: -8px; }
  .see, .triggers { grid-template-columns: 1fr; }
  .say__head { display: none; }
  .say__row { grid-template-columns: 1fr; padding: 0.5rem 0; }
  .say__yes, .say__no { padding: 1rem 0; }
  .say__no { padding-left: 0; border-left: 0; border-top: 1px dashed var(--rule); }
  .say__k { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.25rem; }
  .say__yes .say__k { color: var(--ok); }
  .say__no .say__k { color: var(--rust); }
  .contact-line { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .gate { grid-template-columns: 1fr 1fr; }
  .xt__row { grid-template-columns: 1fr; }
  .xt__row > div { padding: 0.25rem 0; }
  .xt__row > div:first-child { padding-top: 1.1rem; }
  .xt__row > div:last-child { padding-bottom: 1.1rem; }
  .xt__arrow { justify-items: start; transform: rotate(90deg); width: 22px; }
  .mlist > li { grid-template-columns: 1fr; gap: 0.25rem; }
  .roles li { grid-template-columns: 1fr; gap: 0.3rem; }
  .rules li { grid-template-columns: 1fr; gap: 0.25rem; }
  .rules li::before { padding-top: 0; }
  .pg-hero__aside .stamp { position: relative; right: auto; bottom: auto; display: grid; width: max-content; margin: 1.25rem 0.5rem 0 auto; }
  .panel__status { margin-left: 0; width: 100%; }
  .tblock dd { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .stamp[data-reveal] { opacity: 0.92 !important; transform: rotate(-6deg) !important; }
  .seg, .gate::after { transform: none !important; }
  .line-draw .seal-g, .line-draw .dash, .line-draw .fade, .line-draw text { opacity: 1 !important; transform: none !important; }
  .say__no .say__q { background-size: 100% 2px !important; }
  .panel__list li.run .ic { animation: none; }
}

/* ---------- Additions: trust index, panel, legend ---------- */
.matrix-legend .pm--wall { width: auto; height: auto; font-style: normal; }
.panel [hidden] { display: none !important; }
.panel .btn--ghost { --b-fg: var(--ink); --b-bd: var(--rule-strong); }
.panel :focus-visible { outline-color: var(--cobalt); }
.panel__list .ic svg { width: 12px; height: 12px; }
.idx { border: 1px solid var(--rule-strong); background: var(--card); align-self: end; }
.idx__h { display: flex; justify-content: space-between; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--rule-strong); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite); background: var(--paper); }
.idx ol { list-style: none; margin: 0; padding: 0; }
.idx li + li { border-top: 1px solid var(--rule); }
.idx a { display: grid; grid-template-columns: 64px auto 1fr 20px; gap: 0.75rem; align-items: baseline; padding: 1.05rem 1.1rem; text-decoration: none; transition: background-color 0.2s; }
.idx a::after { content: "\2192"; color: var(--cobalt); transition: transform 0.25s var(--ease-out); }
.idx a:hover { background: var(--cobalt-tint); }
.idx a:hover::after { transform: translateX(3px); }
.idx .n { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--cobalt-ink); }
.idx .t { font-family: var(--f-display); font-variation-settings: "opsz" 36; font-size: 1.2rem; line-height: 1.25; }
.idx .d { border-bottom: 1px dotted var(--rule-strong); transform: translateY(-4px); }
.idx__note { padding: 0.8rem 1.1rem; border-top: 1px solid var(--rule-strong); font-family: var(--f-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
@media (max-width: 600px) { .idx a { grid-template-columns: 56px 1fr 20px; } .idx .d { display: none; } }
/* ---------- Legal documents (privacy, terms) ---------- */
.doc { max-width: 72ch; font-size: var(--t-md, 1.0625rem); line-height: 1.7; color: var(--ink-2); }
.doc h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2; color: var(--ink); margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
.doc h2 .n { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--graphite); margin-right: 0.75rem; vertical-align: 0.2em; }
.doc p, .doc ul { margin-top: 0.9rem; }
.doc ul { padding-left: 1.2rem; }
.doc li + li { margin-top: 0.4rem; }
.doc a { color: var(--cobalt-ink); text-underline-offset: 3px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: var(--s5); font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite); }
.doc-meta b { color: var(--ink); font-weight: 500; }
.nf { min-height: 100svh; display: grid; align-content: center; }
.nf .display { max-width: 14ch; }
.nf__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-top: var(--s6); }