/* Timbercut site.css. Source: src/assets/css/ */
@font-face {
font-family: "Bricolage Grotesque";
src: url("../fonts/bricolage-grotesque-tc.woff2") format("woff2");
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Instrument Sans";
src: url("../fonts/instrument-sans-tc.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/jetbrains-mono-tc.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
}
:root {
color-scheme: only light;
--paper: #f3f3ee;
--paper-2: #e9e9e2;
--paper-3: #deded5;
--white: #fcfcfa;
--ink: #111312;
--ink-2: #343835;
--ink-3: #575c58;
--rule: #d3d4cb;
--rule-2: #b5b7ad;
--cut: #2e3cff;
--cut-strong: #1d29d4;
--cut-wash: #e3e5ff;
--cut-tint: #c4c9ff;
--night: #121514;
--night-2: #191d1b;
--night-3: #222825;
--night-rule: #2e3531;
--night-rule-2: #414943;
--night-text: #ecede7;
--night-text-2: #c4c8c1;
--night-text-3: #9ca39c;
--night-cut: #8f98ff;
--bg: var(--paper);
--bg-2: var(--paper-2);
--surface: var(--white);
--fg: var(--ink);
--fg-2: var(--ink-2);
--fg-3: var(--ink-3);
--line: var(--rule);
--line-2: var(--rule-2);
--accent: var(--cut);
--accent-strong: var(--cut-strong);
--accent-wash: var(--cut-wash);
--on-accent: #ffffff;
--field-bg: var(--white);
--field-border: #7d817b;
--focus: var(--cut);
--shadow: 0 1px 0 rgba(17, 19, 18, 0.04), 0 12px 32px -18px rgba(17, 19, 18, 0.28);
--shadow-lg: 0 1px 0 rgba(17, 19, 18, 0.05), 0 30px 60px -30px rgba(17, 19, 18, 0.35);
--t-done: #1b7343;
--t-done-bg: #dcefe2;
--t-wait: #8a5208;
--t-wait-bg: #f8e8cf;
--t-dup: #43576a;
--t-dup-bg: #e0e7ee;
--t-super: #6340ad;
--t-super-bg: #ebe4f8;
--t-block: #ad2419;
--t-block-bg: #f9e0dc;
--t-idle: #575c58;
--t-idle-bg: #e6e7e0;
--font-display: "Bricolage Grotesque", "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--fs-display: clamp(2.75rem, 1.4rem + 5.4vw, 5.6rem);
--fs-h1: clamp(2.4rem, 1.5rem + 3.8vw, 4.6rem);
--fs-h2: clamp(1.9rem, 1.35rem + 2.3vw, 3.25rem);
--fs-h3: clamp(1.3rem, 1.12rem + 0.7vw, 1.7rem);
--fs-h4: 1.125rem;
--fs-lead: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
--fs-body: 1.0625rem;
--fs-small: 0.9375rem;
--fs-xs: 0.8125rem;
--fs-label: 0.75rem;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--gutter: clamp(1rem, 4vw, 2.5rem);
--gap: clamp(1rem, 2.2vw, 2rem);
--wrap: 82.5rem;
--wrap-wide: 90rem;
--section-y: clamp(4rem, 9vw, 8rem);
--header-h: 4.25rem;
--radius-s: 6px;
--radius: 10px;
--radius-l: 16px;
--radius-xl: 24px;
--ease-cut: cubic-bezier(0.2, 0.75, 0.15, 1);
--ease-out: cubic-bezier(0.25, 1, 0.5, 1);
--dur-1: 140ms;
--dur-2: 260ms;
--dur-3: 520ms;
}
.theme-night {
--bg: var(--night);
--bg-2: var(--night-2);
--surface: var(--night-2);
--fg: var(--night-text);
--fg-2: var(--night-text-2);
--fg-3: var(--night-text-3);
--line: var(--night-rule);
--line-2: var(--night-rule-2);
--accent: var(--night-cut);
--accent-strong: #b3b9ff;
--accent-wash: rgba(143, 152, 255, 0.14);
--on-accent: #0b0e33;
--field-bg: #0e1110;
--field-border: #6f7871;
--focus: #b3b9ff;
--shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 16px 40px -20px rgba(0, 0, 0, 0.7);
--shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
--t-done: #72d9a0;
--t-done-bg: rgba(114, 217, 160, 0.13);
--t-wait: #f2bd6b;
--t-wait-bg: rgba(242, 189, 107, 0.14);
--t-dup: #a9bed2;
--t-dup-bg: rgba(169, 190, 210, 0.14);
--t-super: #c3aefa;
--t-super-bg: rgba(195, 174, 250, 0.14);
--t-block: #ff958c;
--t-block-bg: rgba(255, 149, 140, 0.14);
--t-idle: #b4bab3;
--t-idle-bg: rgba(180, 186, 179, 0.12);
color: var(--fg);
background-color: var(--bg);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + 1rem);
overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--fg);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
font-feature-settings: "kern", "liga", "calt";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { overflow: visible; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:where(button, [role="button"]) { -webkit-tap-highlight-color: transparent; }
table { border-collapse: collapse; }
p, ul, ol, dl, figure, blockquote, h1, h2, h3, h4, h5, h6 { margin: 0; }
ul[role="list"], ol[role="list"], .plain-list { list-style: none; padding: 0; margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
[hidden] { display: none !important; }
h1, h2, h3, h4, .display, .h1, .h2, .h3 {
font-family: var(--font-display);
font-weight: 680;
color: var(--fg);
text-wrap: balance;
font-variation-settings: "opsz" 96;
}
.display {
font-size: var(--fs-display);
line-height: 0.95;
letter-spacing: -0.042em;
font-weight: 700;
}
h1, .h1 {
font-size: var(--fs-h1);
line-height: 0.98;
letter-spacing: -0.038em;
font-weight: 700;
}
h2, .h2 {
font-size: var(--fs-h2);
line-height: 1.02;
letter-spacing: -0.032em;
}
h3, .h3 {
font-size: var(--fs-h3);
line-height: 1.15;
letter-spacing: -0.018em;
font-variation-settings: "opsz" 36;
font-weight: 650;
}
h4, .h4 {
font-family: var(--font-body);
font-size: var(--fs-h4);
line-height: 1.3;
letter-spacing: -0.005em;
font-weight: 650;
}
p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-2); max-width: 40em; }
.body-l { font-size: 1.125rem; }
.small { font-size: var(--fs-small); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--fg-3); }
.fg-2 { color: var(--fg-2); }
strong, b { font-weight: 650; }
:where(h1, h2, h3, .display, .h1, .h2) em { font-style: normal; color: var(--accent); }
.mono, code, kbd, samp, .tc {
font-family: var(--font-mono);
font-feature-settings: "zero" 0, "calt" 0;
font-variant-numeric: tabular-nums;
}
code { font-size: 0.92em; }
.tc { font-size: 0.8125rem; letter-spacing: -0.01em; white-space: nowrap; }
.label {
font-family: var(--font-mono);
font-size: var(--fs-label);
line-height: 1.3;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: var(--fg-3);
}
.kicker {
display: inline-flex;
align-items: center;
gap: 0.65em;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
color: var(--fg-2);
}
.kicker::before {
content: "";
inline-size: 0.6em;
block-size: 0.6em;
background: var(--accent);
flex: none;
}
.kicker__n { color: var(--accent); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
.link {
color: var(--accent);
font-weight: 600;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.link:hover { text-decoration-color: currentColor; }
.link-arrow {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: var(--accent);
font-weight: 600;
text-decoration: none;
min-height: 44px;
}
.link-arrow .icon { transition: transform var(--dur-2) var(--ease-cut); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.link-arrow:hover .icon { transform: translateX(3px); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); margin-top: 2.2em; }
.prose h3 { margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.45em; }
.prose a { color: var(--accent); font-weight: 600; }
.icon {
inline-size: 1.15em;
block-size: 1.15em;
flex: none;
stroke: currentColor;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -0.18em;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon--s { inline-size: 1em; block-size: 1em; }
.icon--l { inline-size: 1.5em; block-size: 1.5em; }
.wrap {
inline-size: 100%;
max-inline-size: calc(var(--wrap) + var(--gutter) * 2);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--wide { max-inline-size: calc(var(--wrap-wide) + var(--gutter) * 2); }
.wrap--narrow { max-inline-size: calc(56rem + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--flush-top { padding-top: 0; }
.section--sunk { background: var(--bg-2); }
.section--ink { background: var(--bg); }
.section + .section--rule { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: var(--s-4); max-inline-size: 48rem; margin-bottom: clamp(2rem, 5vw, 4rem); }
.section-head--split {
max-inline-size: none;
grid-template-columns: minmax(0, 1fr);
align-items: end;
}
@media (min-width: 62em) {
.section-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); }
.section-head--split > .lead { padding-bottom: 0.4rem; }
}
.stack > * + * { margin-top: var(--stack, 1rem); }
.stack-s { --stack: 0.5rem; }
.stack-l { --stack: 1.75rem; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, 0.75rem); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--gap); }
@media (min-width: 48em) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.no-js .js-only { display: none !important; }
.js .nojs-note { display: none !important; }
.visually-hidden {
position: absolute !important;
inline-size: 1px; block-size: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 3px;
border-radius: 4px;
}
main:focus-visible, [tabindex="-1"]:focus-visible { outline: none; }
.skip-link {
position: absolute;
inset-inline-start: var(--gutter);
inset-block-start: 0.75rem;
z-index: 100;
padding: 0.7rem 1rem;
background: var(--ink);
color: var(--paper);
font-weight: 600;
border-radius: var(--radius-s);
transform: translateY(-160%);
transition: transform var(--dur-2) var(--ease-cut);
}
.skip-link:focus { transform: none; }
::selection { background: var(--cut-tint); color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
[data-reveal].is-armed { clip-path: inset(0 100% 0 0); opacity: 0.001; }
[data-reveal="fade"].is-armed { clip-path: none; transform: translateY(14px); }
[data-reveal].is-armed.is-in {
clip-path: inset(0 0 0 0);
opacity: 1;
transform: none;
transition: clip-path 900ms var(--ease-cut), opacity 300ms linear;
}
[data-reveal="fade"].is-armed.is-in { transition: transform 700ms var(--ease-cut), opacity 600ms var(--ease-out); }
[data-reveal-delay="1"].is-in { transition-delay: 90ms; }
[data-reveal-delay="2"].is-in { transition-delay: 180ms; }
[data-reveal-delay="3"].is-in { transition-delay: 270ms; }
}
@media print {
[data-reveal].is-armed { clip-path: none !important; opacity: 1 !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
scroll-behavior: auto !important;
}
}
.brand {
display: inline-flex;
align-items: center;
gap: 0.55rem;
color: var(--fg);
text-decoration: none;
min-height: 44px;
}
.brand__mark { inline-size: 1.9rem; block-size: 1.9rem; }
.brand__word {
font-family: var(--font-display);
font-weight: 720;
font-size: 1.45rem;
letter-spacing: -0.045em;
line-height: 1;
font-variation-settings: "opsz" 48;
transform: translateY(-0.04em);
}
.mark .mark__a { stroke: currentColor; }
.mark .mark__b { stroke: var(--accent); }
.mark .mark__core-a { fill: currentColor; }
.mark .mark__core-b { fill: var(--accent); }
.btn {
--btn-bg: var(--fg);
--btn-fg: var(--bg);
--btn-border: transparent;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55em;
min-height: 48px;
padding: 0.7rem 1.25rem;
border: 1px solid var(--btn-border);
border-radius: 999px;
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 620;
line-height: 1.1;
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-1) linear, color var(--dur-1) linear, border-color var(--dur-1) linear, transform var(--dur-1) var(--ease-cut);
user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn .icon { inline-size: 1.1em; block-size: 1.1em; }
.btn--primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--primary:hover { --btn-bg: var(--accent-strong); }
.btn--ink { --btn-bg: var(--fg); --btn-fg: var(--bg); }
.btn--ink:hover { --btn-bg: var(--fg-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-border: var(--line-2); }
.btn--ghost:hover { --btn-border: var(--fg); --btn-bg: color-mix(in srgb, var(--fg) 5%, transparent); }
.btn--quiet { --btn-bg: transparent; --btn-fg: var(--fg); padding-inline: 0.75rem; }
.btn--quiet:hover { --btn-bg: color-mix(in srgb, var(--fg) 7%, transparent); }
.btn--sm { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.9375rem; }
.btn--xs { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 0.875rem; }
.btn--lg { min-height: 56px; padding: 0.9rem 1.6rem; font-size: 1.0625rem; }
.btn--block { inline-size: 100%; }
.btn[disabled], .btn[aria-disabled="true"] {
--btn-bg: color-mix(in srgb, var(--fg) 10%, transparent);
--btn-fg: var(--fg-3);
--btn-border: transparent;
cursor: not-allowed;
transform: none;
}
.btn--ghost[aria-disabled="true"] { --btn-bg: transparent; --btn-border: var(--line); }
.chip {
display: inline-flex;
align-items: center;
gap: 0.45em;
padding: 0.3rem 0.65rem;
border: 1px solid var(--line-2);
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
line-height: 1.2;
color: var(--fg-2);
white-space: nowrap;
background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.chip .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--accent); }
.chip--sim { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); }
.chip--plan { border-style: dashed; }
.badge {
--tone: var(--t-idle);
--tone-bg: var(--t-idle-bg);
display: inline-flex;
align-items: center;
gap: 0.4em;
max-inline-size: 100%;
padding: 0.22rem 0.6rem 0.22rem 0.45rem;
border-radius: 1rem;
background: var(--tone-bg);
color: var(--tone);
font-size: 0.8125rem;
font-weight: 620;
line-height: 1.3;
}
.badge .icon { flex: none; }
.badge .icon { inline-size: 1em; block-size: 1em; stroke-width: 2.2; }
.badge--l { font-size: 0.9375rem; padding: 0.35rem 0.8rem 0.35rem 0.6rem; }
[data-tone="done"] { --tone: var(--t-done); --tone-bg: var(--t-done-bg); }
[data-tone="wait"] { --tone: var(--t-wait); --tone-bg: var(--t-wait-bg); }
[data-tone="dup"] { --tone: var(--t-dup); --tone-bg: var(--t-dup-bg); }
[data-tone="super"] { --tone: var(--t-super); --tone-bg: var(--t-super-bg); }
[data-tone="block"] { --tone: var(--t-block); --tone-bg: var(--t-block-bg); }
[data-tone="idle"] { --tone: var(--t-idle); --tone-bg: var(--t-idle-bg); }
[data-tone="plan"] { --tone: var(--fg-2); --tone-bg: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }
[data-tone="live"] { --tone: var(--accent); --tone-bg: var(--accent-wash); }
.status-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-l);
box-shadow: var(--shadow);
}
.panel--flat { box-shadow: none; }
.panel__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 1.25rem;
border-bottom: 1px solid var(--line);
}
.panel__body { padding: 1.25rem; }
.note {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 0.9rem 1.1rem;
border-left: 3px solid var(--accent);
background: var(--accent-wash);
border-radius: 0 var(--radius) var(--radius) 0;
font-size: var(--fs-small);
color: var(--fg-2);
}
.note .icon { color: var(--accent); margin-top: 0.15em; }
.note strong { color: var(--fg); }
.op {
margin: 0;
padding: 0.95rem 1.1rem;
border-radius: var(--radius);
background: var(--night);
color: #dfe2dc;
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.7;
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
font-variant-numeric: tabular-nums;
}
.theme-night .op { background: #0b0d0c; border: 1px solid var(--line); }
.op .op__k { color: #9aa3ff; }
.op .op__c { color: #8d948c; }
.ledger-bar {
display: flex;
gap: 2px;
block-size: 0.85rem;
border-radius: 999px;
overflow: hidden;
background: var(--line);
}
.ledger-bar--l { block-size: 1.15rem; }
.ledger-bar__seg {
block-size: 100%;
min-inline-size: 4px;
background: var(--tone);
transition: flex-grow var(--dur-3) var(--ease-cut);
}
.ledger-bar__seg[data-tone="block"] {
background: repeating-linear-gradient(-45deg, var(--tone) 0 4px, color-mix(in srgb, var(--tone) 70%, var(--bg)) 4px 7px);
}
.ledger-bar__seg[data-tone="super"] {
background: repeating-linear-gradient(90deg, var(--tone) 0 3px, color-mix(in srgb, var(--tone) 75%, var(--bg)) 3px 5px);
}
.ledger-legend {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
gap: 0.35rem 1.25rem;
margin-top: 0.9rem;
padding: 0;
list-style: none;
}
.ledger-legend li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-small);
color: var(--fg-2);
min-height: 1.75rem;
}
.ledger-legend .icon { color: var(--tone); }
.ledger-legend .n {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--fg);
min-inline-size: 1.6em;
text-align: right;
}
.kv { display: grid; gap: 0.6rem 1.25rem; grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr); margin: 0; }
.kv dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.25em; }
.kv dd { margin: 0; }
@media (max-width: 30em) {
.kv { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.kv dd { margin-bottom: 0.6rem; }
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.table { inline-size: 100%; font-size: var(--fs-small); }
.table th, .table td { padding: 0.95rem 1.1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.table tbody th { font-weight: 620; color: var(--fg); }
@media (max-width: 47.99em) {
.table--stack thead { display: none; }
.table--stack tr { display: block; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); }
.table--stack tr:last-child { border-bottom: 0; }
.table--stack th, .table--stack td { display: block; padding: 0.2rem 0; border: 0; }
.table--stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); margin-top: 0.5rem; }
}
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 1.35rem 0;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
font-weight: 640;
letter-spacing: -0.02em;
line-height: 1.25;
font-variation-settings: "opsz" 36;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .acc-icon {
flex: none;
inline-size: 2.25rem;
block-size: 2.25rem;
display: grid;
place-items: center;
border: 1px solid var(--line-2);
border-radius: 50%;
transition: transform var(--dur-2) var(--ease-cut), background-color var(--dur-1) linear;
}
.accordion summary:hover .acc-icon { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.accordion details[open] .acc-icon { transform: rotate(45deg); }
.accordion .acc-body { padding: 0 0 1.6rem; max-inline-size: 46rem; color: var(--fg-2); }
.accordion .acc-body > * + * { margin-top: 0.8em; }
.tabs__list {
display: flex;
gap: 0.25rem;
padding: 0.3rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--surface);
inline-size: max-content;
max-inline-size: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab {
flex: none;
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 44px;
padding: 0.5rem 1.05rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--fg-2);
font-weight: 600;
font-size: 0.9375rem;
white-space: nowrap;
transition: background-color var(--dur-1) linear, color var(--dur-1) linear;
}
.tabs__tab:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tabs__tab[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.tabs__tab .count { font-family: var(--font-mono); font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.tabs__panel:focus-visible { outline-offset: 6px; }
.no-js .tabs__list { display: none; }
.no-js .tabs__panel[hidden] { display: block !important; }
.form { display: grid; gap: 1.4rem; }
.field { display: grid; gap: 0.45rem; }
.field__label { font-weight: 620; font-size: 0.975rem; color: var(--fg); }
.field__label .req { color: var(--fg-3); font-weight: 500; font-size: 0.875rem; margin-left: 0.35em; }
.field__hint { font-size: 0.875rem; color: var(--fg-3); }
.input, .select, .textarea {
inline-size: 100%;
min-height: 48px;
padding: 0.7rem 0.9rem;
border: 1px solid var(--field-border);
border-radius: var(--radius);
background: var(--field-bg);
color: var(--fg);
font-size: 1rem;
line-height: 1.4;
transition: border-color var(--dur-1) linear, box-shadow var(--dur-1) linear;
}
.textarea { min-height: 8.5rem; resize: vertical; }
.select {
appearance: none;
padding-right: 2.6rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575c58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.85rem center;
background-size: 1.1rem;
}
.theme-night .select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c8c1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--fg-2); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
border-color: var(--focus);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
fieldset[aria-invalid="true"] .choice-grid { border-color: var(--t-block); box-shadow: 0 0 0 1px var(--t-block); }
.field__error {
display: flex;
gap: 0.4rem;
align-items: flex-start;
color: var(--t-block);
font-size: 0.9rem;
font-weight: 600;
}
.field__error .icon { margin-top: 0.15em; }
fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.45rem; }
.choice-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
gap: 0.5rem;
border-radius: var(--radius);
}
.choice {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 48px;
padding: 0.6rem 0.85rem;
border: 1px solid var(--line-2);
border-radius: var(--radius);
background: var(--field-bg);
cursor: pointer;
font-size: 0.975rem;
transition: border-color var(--dur-1) linear, background-color var(--dur-1) linear;
}
.choice:hover { border-color: var(--fg-2); }
.choice input { inline-size: 1.15rem; block-size: 1.15rem; margin: 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.error-summary {
padding: 1rem 1.2rem;
border: 2px solid var(--t-block);
border-radius: var(--radius);
background: var(--t-block-bg);
}
.error-summary h2, .error-summary h3 { font-size: 1.1rem; font-family: var(--font-body); letter-spacing: 0; color: var(--fg); }
.error-summary ul { margin-top: 0.5rem; padding-left: 1.2rem; }
.error-summary a { color: var(--t-block); font-weight: 650; }
.dialog {
inline-size: min(46rem, calc(100vw - 2rem));
max-block-size: min(88vh, 60rem);
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius-l);
background: var(--surface);
color: var(--fg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.dialog[open] { display: flex; flex-direction: column; }
.dialog::backdrop { background: rgba(10, 12, 11, 0.62); backdrop-filter: blur(2px); }
.dialog__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem 1rem 1.5rem;
border-bottom: 1px solid var(--line);
flex: none;
}
.dialog__body { padding: 1.4rem 1.5rem 1.6rem; overflow-y: auto; overscroll-behavior: contain; }
.dialog__close {
flex: none;
display: grid;
place-items: center;
inline-size: 44px;
block-size: 44px;
border: 1px solid var(--line-2);
border-radius: 50%;
background: transparent;
color: var(--fg);
}
.dialog__close:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
@media (max-width: 40em) {
.dialog { inline-size: 100vw; max-inline-size: 100vw; max-block-size: 100dvh; block-size: 100dvh; border-radius: 0; margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
.dialog[open] { animation: dialog-in var(--dur-2) var(--ease-cut); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }
}
.toast-region {
position: fixed;
inset-inline: 0;
inset-block-end: 1rem;
z-index: 90;
display: grid;
justify-items: center;
pointer-events: none;
padding-inline: 1rem;
}
.toast {
max-inline-size: 36rem;
padding: 0.8rem 1.1rem;
border-radius: var(--radius);
background: var(--ink);
color: var(--paper);
font-size: 0.9375rem;
box-shadow: var(--shadow-lg);
pointer-events: auto;
}
@media (prefers-reduced-motion: no-preference) {
.toast { animation: toast-in var(--dur-2) var(--ease-cut); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
}
.site-header {
position: sticky;
inset-block-start: 0;
z-index: 50;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: saturate(1.4) blur(14px);
-webkit-backdrop-filter: saturate(1.4) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--dur-2) linear, background-color var(--dur-2) linear;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.site-header__bar {
display: flex;
align-items: center;
gap: 1.5rem;
min-height: var(--header-h);
}
.site-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__link {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 44px;
padding: 0.45rem 0.85rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--fg-2);
font-size: 0.975rem;
font-weight: 560;
text-decoration: none;
transition: color var(--dur-1) linear, background-color var(--dur-1) linear;
}
.nav__link:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.nav__link[aria-current="page"], .nav__link.is-active { color: var(--fg); }
.nav__link[aria-current="page"]::after, .nav__link.is-active::after {
content: "";
inline-size: 0.35rem;
block-size: 0.35rem;
border-radius: 50%;
background: var(--accent);
margin-left: 0.15rem;
}
.nav__trigger .icon { transition: transform var(--dur-2) var(--ease-cut); }
.nav__trigger[aria-expanded="true"] { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.js .nav__fallback { display: none; }
.no-js .nav__trigger { display: none; }
.nav-menu {
position: absolute;
inset-block-start: calc(100% + 0.6rem);
inset-inline-start: -0.5rem;
inline-size: 36rem;
padding: 0.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-l);
box-shadow: var(--shadow-lg);
}
@media (prefers-reduced-motion: no-preference) {
.nav-menu:not([hidden]) { animation: menu-in var(--dur-2) var(--ease-cut); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
}
.nav-menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-menu__link {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.15rem 0.8rem;
padding: 0.85rem 0.9rem;
border-radius: var(--radius);
text-decoration: none;
color: var(--fg);
}
.nav-menu__link:hover { background: var(--bg); }
.nav-menu__link[aria-current="page"] { background: var(--accent-wash); }
.nav-menu__icon {
grid-row: span 2;
display: grid;
place-items: center;
inline-size: 2.2rem;
block-size: 2.2rem;
border-radius: var(--radius-s);
background: var(--bg);
border: 1px solid var(--line);
color: var(--accent);
}
.nav-menu__title { font-weight: 650; font-size: 0.975rem; }
.nav-menu__desc { font-size: 0.875rem; color: var(--fg-3); line-height: 1.4; }
.nav-menu__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 0.4rem;
padding: 0.85rem 0.9rem;
border-radius: var(--radius);
background: var(--ink);
color: var(--paper);
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
}
.nav-menu__foot:hover { background: var(--ink-2); }
.nav-menu__foot .chip { color: #c9cdc6; border-color: #4a504c; background: transparent; }
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 44px;
min-width: 44px;
padding: 0.45rem 0.9rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--surface);
color: var(--fg);
font-weight: 600;
font-size: 0.9375rem;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
.no-js .menu-toggle { display: none; }
.mobile-nav {
position: fixed;
inset: var(--header-h) 0 0 0;
z-index: 49;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--paper);
border-top: 1px solid var(--line);
padding: 1.5rem var(--gutter) 2.5rem;
}
@media (prefers-reduced-motion: no-preference) {
.mobile-nav:not([hidden]) { animation: mnav-in var(--dur-2) var(--ease-cut); }
@keyframes mnav-in { from { opacity: 0; transform: translateY(-8px); } }
}
.mobile-nav__group + .mobile-nav__group { margin-top: 1.5rem; }
.mobile-nav__group .label { margin-bottom: 0.5rem; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mobile-nav__list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 3.4rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
font-family: var(--font-display);
font-size: 1.35rem;
font-weight: 640;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 36;
}
.mobile-nav__list a span { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--fg-3); letter-spacing: 0; text-align: right; }
.mobile-nav__list a[aria-current="page"] { color: var(--accent); }
.mobile-nav__cta { display: grid; gap: 0.6rem; margin-top: 1.75rem; }
html.nav-open { overflow: hidden; }
.header-cta { display: none; }
@media (min-width: 62em) {
.nav { display: block; }
.menu-toggle, .mobile-nav { display: none !important; }
.header-cta { display: inline-flex; }
}
@media (max-width: 61.99em) {
.no-js .nav { display: block; overflow-x: auto; }
.no-js .site-header__bar { flex-wrap: wrap; padding-block: 0.5rem; }
}
.page-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem); position: relative; }
.page-hero__inner { display: grid; gap: 1.5rem; }
.page-hero .lead { max-inline-size: 44rem; }
.page-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@media (min-width: 64em) {
.page-hero--split .page-hero__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--s-8); }
}
.ruler {
position: relative;
block-size: 1.75rem;
margin-top: clamp(2rem, 4vw, 3rem);
border-top: 1px solid var(--line-2);
background-image:
linear-gradient(to right, var(--line-2) 1px, transparent 1px),
linear-gradient(to right, var(--line-2) 1px, transparent 1px);
background-size: 100px 12px, 10px 6px;
background-repeat: repeat-x;
background-position: 0 0, 0 0;
}
.ruler__head {
position: absolute;
inset-block-start: -0.55rem;
inline-size: 2px;
block-size: 2.4rem;
background: var(--accent);
left: var(--at, 18%);
}
.ruler__head::before {
content: "";
position: absolute;
inset-block-start: 0;
left: -5px;
inline-size: 12px;
block-size: 9px;
background: var(--accent);
clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.ruler__labels { position: absolute; inset: 0.9rem 0 auto 0; display: flex; justify-content: space-between; pointer-events: none; }
.ruler__labels span { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--fg-3); letter-spacing: 0.02em; }
.cta-band {
position: relative;
overflow: hidden;
border-radius: var(--radius-xl);
padding: clamp(2rem, 6vw, 4.5rem);
display: grid;
gap: 2rem;
}
.cta-band h2 { max-inline-size: 18ch; }
.cta-band .lead { color: var(--fg-2); }
@media (min-width: 62em) {
.cta-band { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: end; }
.cta-band__actions { justify-self: end; }
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.cta-band > :not(.cta-band__track) { position: relative; z-index: 1; }
.cta-band__track { display: none; }
@media (min-width: 62em) {
.cta-band__track {
display: block;
position: absolute;
inset: -1px -2rem auto auto;
inline-size: min(34rem, 50%);
opacity: 0.5;
pointer-events: none;
}
}
.site-footer { padding-block: clamp(3.5rem, 8vw, 6rem) 2rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__top {
display: grid;
gap: 1.5rem;
padding-bottom: clamp(2.5rem, 6vw, 4rem);
border-bottom: 1px solid var(--line);
}
.site-footer__line {
font-family: var(--font-display);
font-size: clamp(2.2rem, 1.4rem + 4vw, 4.75rem);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.04em;
font-variation-settings: "opsz" 96;
max-inline-size: 14ch;
}
.site-footer__line em { font-style: normal; color: var(--accent); }
@media (min-width: 62em) {
.site-footer__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.site-footer__cols {
display: grid;
gap: 2.5rem 2rem;
padding-block: clamp(2.5rem, 5vw, 3.5rem);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__brand { grid-column: 1 / -1; max-inline-size: 22rem; }
.site-footer__brand p { margin-top: 0.9rem; color: var(--fg-3); font-size: var(--fs-small); }
@media (min-width: 62em) {
.site-footer__cols { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
.site-footer__brand { grid-column: auto; }
}
.footer-col h2 { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--fg-3); margin-bottom: 0.9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.footer-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--fg-2); font-size: 0.975rem; }
.footer-col a:hover { color: var(--fg); }
.site-footer__status {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 1.25rem;
align-items: center;
padding: 1.1rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: var(--fs-small);
color: var(--fg-2);
}
.site-footer__status p { flex: 1 1 22rem; }
.site-footer__legal {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.75rem 2rem;
padding-top: 1.75rem;
font-size: 0.875rem;
color: var(--fg-3);
}
.site-footer__legal p { max-inline-size: 44rem; }
.site-footer__legal a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 0.2em; }
.track-art { color: var(--line-2); }
.track-art rect { fill: currentColor; }
.track-art .hot { fill: var(--accent); }
.source-tag, .rule-tag {
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8125rem;
font-weight: 560;
color: var(--fg-2);
white-space: nowrap;
}
.rule-tag { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; }
.avatar {
display: inline-grid;
place-items: center;
inline-size: 2rem;
block-size: 2rem;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.02em;
flex: none;
background: var(--bg-2);
color: var(--fg);
box-shadow: inset 0 0 0 1px var(--line-2);
}
.avatar[data-side="client"] { background: var(--accent-wash); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.stat-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin: 0 0 1.4rem;
}
@media (min-width: 30em) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat-row div { border-top: 1px solid var(--line); padding-top: 0.6rem; }
.stat-row dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.stat-row dd {
margin: 0.2rem 0 0;
font-family: var(--font-display);
font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
font-weight: 680;
letter-spacing: -0.04em;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.hero {
position: relative;
padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 7rem);
overflow: clip;
isolation: isolate;
}
.hero__texture {
position: absolute;
inset: 0 0 auto auto;
inline-size: min(60rem, 75vw);
block-size: 100%;
z-index: -1;
opacity: 0.9;
-webkit-mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to bottom, #000 40%, transparent);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(to left, #000 35%, transparent 95%), linear-gradient(to bottom, #000 50%, transparent);
mask-composite: intersect;
}
.hero__texture svg { inline-size: 100%; block-size: 100%; }
@media (max-width: 69.99em) { .hero__texture { display: none; } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
.hero__eyebrow .chip { white-space: normal; }
@media (min-width: 70em) {
.hero__grid { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); }
.hero__copy { position: sticky; top: calc(var(--header-h) + 1.5rem); padding-top: 0.75rem; }
}
.hero__eyebrow { margin-bottom: 1.5rem; }
.hero__title { max-inline-size: 10ch; }
.hero__lead { margin-top: 1.5rem; max-inline-size: 34rem; }
.hero__who { margin-top: 1rem; font-size: var(--fs-small); color: var(--fg-3); max-inline-size: 30rem; }
.hero__ctas { margin-top: 2rem; }
.hero__note {
display: flex;
gap: 0.5rem;
align-items: flex-start;
margin-top: 1.25rem;
font-size: 0.875rem;
color: var(--fg-3);
max-inline-size: 30rem;
}
.hero__note .icon { margin-top: 0.1em; color: var(--accent); }
@media (max-width: 30em) {
.hero__ctas .btn { inline-size: 100%; }
}
.transform {
margin: 0;
display: grid;
border-radius: var(--radius-xl);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.transform__in { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem) 1.5rem; }
.transform__out { padding: 1.25rem clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); background: var(--night); color: var(--night-text); }
.transform__out { --bg: var(--night); --fg: var(--night-text); --fg-2: var(--night-text-2); --fg-3: var(--night-text-3); --line: var(--night-rule); --line-2: var(--night-rule-2); --accent: var(--night-cut); --accent-wash: rgba(143, 152, 255, 0.14);
--t-done: #72d9a0; --t-done-bg: rgba(114, 217, 160, 0.13); --t-wait: #f2bd6b; --t-wait-bg: rgba(242, 189, 107, 0.14); --t-dup: #a9bed2; --t-dup-bg: rgba(169, 190, 210, 0.14); --t-super: #c3aefa; --t-super-bg: rgba(195, 174, 250, 0.14); --t-block: #ff958c; --t-block-bg: rgba(255, 149, 140, 0.14); --t-idle: #b4bab3; --t-idle-bg: rgba(180, 186, 179, 0.12); }
.transform__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5rem 1rem;
margin-bottom: 0.9rem;
}
.transform__who { font-size: 0.8125rem; color: var(--fg-3); }
.transform__quote {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
line-height: 1.38;
letter-spacing: -0.018em;
font-weight: 520;
font-variation-settings: "opsz" 30;
color: var(--fg);
}
.clause {
background: linear-gradient(to top, var(--cut-wash) 0 62%, transparent 62%);
color: inherit;
padding: 0 0.08em;
border-radius: 2px;
transition: background-color var(--dur-2) linear;
}
.clause sup {
font-family: var(--font-mono);
font-size: 0.55em;
font-weight: 600;
color: var(--accent);
margin-right: 0.15em;
vertical-align: 0.65em;
}
.transform__cut {
position: relative;
block-size: 0;
}
.transform__cut span {
position: absolute;
inset-inline-start: 2rem;
inset-block-start: -0.95rem;
inline-size: 2rem;
block-size: 1.9rem;
background: var(--accent);
clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
z-index: 2;
}
.plan-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-row {
display: grid;
grid-template-columns: 1.75rem minmax(0, 1fr);
gap: 0.75rem;
padding: 0.8rem 0;
border-top: 1px solid var(--line);
}
.plan-row:first-child { border-top: 0; padding-top: 0.25rem; }
.plan-row__n {
display: grid;
place-items: center;
inline-size: 1.6rem;
block-size: 1.6rem;
border-radius: 50%;
border: 1px solid var(--line-2);
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--accent);
margin-top: 0.05rem;
}
.plan-row__title { font-weight: 640; font-size: 0.98rem; line-height: 1.35; color: var(--fg); }
.plan-row__ids { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; color: var(--fg-3); margin-left: 0.6rem; letter-spacing: 0.02em; white-space: nowrap; }
.plan-row__why { font-size: 0.875rem; color: var(--fg-3); line-height: 1.45; margin-top: 0.15rem; }
.plan-row__badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.plan-row__badges .badge { font-size: 0.75rem; }
@media (min-width: 40em) {
.plan-row__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
.plan-row__why { grid-column: 1; }
.plan-row__badges { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: flex-end; align-content: start; max-inline-size: 12.5rem; }
}
.transform__ledger { margin-top: 0.6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.transform__ledger-title { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.8125rem; color: var(--fg-2); margin-bottom: 0.6rem; }
.transform__ledger .ledger-legend { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.transform__ledger .ledger-legend li { font-size: 0.8125rem; min-height: 1.5rem; }
.clause { background: linear-gradient(to top, var(--cut-wash) 0 62%, transparent 62%) no-repeat 0 0 / 100% 100%; }
@media (prefers-reduced-motion: no-preference) {
.js .transform.is-armed .clause { background-size: 0% 100%; transition: background-size 700ms var(--ease-cut); }
.js .transform.is-armed .clause.is-on { background-size: 100% 100%; }
.plan-row { position: relative; }
.plan-row::before {
content: "";
position: absolute;
inset: 0 -0.75rem;
border-radius: var(--radius);
background: var(--accent-wash);
opacity: 0;
pointer-events: none;
}
.plan-row.is-flash::before { animation: row-flash 1400ms var(--ease-out); }
.plan-row.is-flash .plan-row__n { background: var(--accent); color: var(--on-accent, #0b0e33); border-color: var(--accent); transition: background-color 200ms linear; }
@keyframes row-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
}
.problem__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64em) { .problem__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.note-scatter { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 40em) { .note-scatter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note-card {
position: relative;
padding: 1rem 1.1rem 0.9rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
@media (min-width: 64em) {
.note-card:nth-child(odd) { transform: rotate(-0.9deg); }
.note-card:nth-child(even) { transform: rotate(0.8deg) translateY(1.5rem); }
.note-card:nth-child(3) { transform: rotate(0.5deg) translateX(-0.4rem); }
.note-card:nth-child(5) { transform: rotate(-0.4deg) translateX(0.6rem); }
}
.note-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.note-card__meta .tc { color: var(--fg-3); font-size: 0.75rem; }
.note-card__text { font-size: 1rem; line-height: 1.45; color: var(--fg); }
.note-card__who { margin-top: 0.5rem; font-size: 0.8125rem; color: var(--fg-3); }
.note-card__flag {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.8rem;
padding: 0.25rem 0.6rem 0.25rem 0.45rem;
border-radius: 999px;
background: var(--tone-bg);
color: var(--tone);
font-size: 0.8125rem;
font-weight: 620;
}
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.points li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.75rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.points__n { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); padding-top: 0.35rem; }
.points h3 { font-size: 1.35rem; margin-bottom: 0.35rem; }
.points p { color: var(--fg-2); }
.problem__fear {
margin-top: 2rem;
font-family: var(--font-display);
font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.8rem);
line-height: 1.25;
letter-spacing: -0.022em;
font-weight: 560;
font-variation-settings: "opsz" 40;
}
.problem__fear strong { color: var(--accent); font-weight: 680; }
.uev { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: uev; }
@media (min-width: 62em) { .uev { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } }
.uev__step { display: grid; align-content: start; gap: 1rem; padding-right: clamp(0rem, 2vw, 1.5rem); }
.uev__clip {
display: flex;
justify-content: space-between;
align-items: center;
block-size: 3rem;
padding: 0 1rem;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-display);
font-weight: 650;
font-size: 1.15rem;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 36;
margin-bottom: 0.5rem;
}
.uev__step:nth-child(2) .uev__clip { background: var(--accent); color: #fff; }
.uev__step:nth-child(3) .uev__clip { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.uev__clip .tc { opacity: 0.9; font-size: 0.75rem; }
.uev__step h3 { max-inline-size: 22ch; }
.uev__step > p { color: var(--fg-2); }
.uev__list { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.uev__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-small); font-weight: 560; }
.uev__list .icon { color: var(--accent); margin-top: 0.15em; }
.uev__more { margin-top: 2.5rem; }
.control__grid { display: grid; gap: 1.25rem; }
@media (min-width: 56em) { .control__grid { grid-template-columns: 1fr 1fr; } }
.control__col { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.control__col--ask { background: var(--bg-2); border-style: dashed; border-color: var(--line-2); }
.control__h { display: flex; align-items: center; gap: 0.6rem; font-size: 1.4rem; }
.control__h .icon { color: var(--t-done); }
.control__col--ask .control__h .icon { color: var(--t-wait); }
.control__sub { color: var(--fg-3); margin-top: 0.4rem; font-size: var(--fs-small); }
.control__list { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; }
.control__list li { display: grid; gap: 0.2rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.control__list strong { font-weight: 650; }
.control__list span { color: var(--fg-2); font-size: var(--fs-small); }
.control__final {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-radius: var(--radius-l);
background: var(--ink);
color: var(--paper);
font-weight: 600;
font-size: 1.05rem;
}
.control__final .icon { color: var(--night-cut); inline-size: 1.4em; block-size: 1.4em; }
.logo-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
@media (min-width: 62em) {
.logo-story { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.logo-story::before {
content: "";
position: absolute;
inset-inline: 1.5rem;
inset-block-start: 2.05rem;
border-top: 1px dashed var(--line-2);
}
}
.logo-story__step {
position: relative;
padding: 1.4rem 1.4rem 1.6rem;
border-radius: var(--radius-l);
background: var(--night-2);
border: 1px solid var(--line);
display: grid;
gap: 0.75rem;
align-content: start;
}
.logo-story__step--now { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.logo-story__v { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.logo-story__v .tc { font-size: 0.875rem; color: var(--fg); padding: 0.15rem 0.55rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--night); position: relative; z-index: 1; }
.logo-story__step h3 { font-size: 1.3rem; }
.logo-story__step p { color: var(--fg-2); font-size: var(--fs-small); }
.logo-story__step--now h3 { color: var(--fg); }
.teaser-graph__more { margin-top: 2rem; }
.demo-teaser__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64em) { .demo-teaser__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.demo-teaser__copy .lead { max-inline-size: 32rem; }
.demo-teaser__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
@media (min-width: 36em) { .demo-teaser__list { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; } }
.demo-teaser__list li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-small); font-weight: 560; }
.demo-teaser__list .icon { color: var(--accent); margin-top: 0.15em; }
.demo-teaser__copy .cluster { margin-top: 1.75rem; }
.demo-teaser__gate {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-top: 1.4rem;
padding: 0.9rem 1rem;
border-radius: var(--radius);
background: var(--t-wait-bg);
color: var(--fg);
font-size: var(--fs-small);
}
.demo-teaser__gate .icon { color: var(--t-wait); margin-top: 0.15em; }
.status-rows { display: grid; border-top: 1px solid var(--line-2); }
.status-row {
display: grid;
gap: 0.6rem 2rem;
padding: 1.5rem 0;
border-bottom: 1px solid var(--line-2);
align-items: start;
}
.status-row .badge { justify-self: start; }
.status-row p { color: var(--fg-2); max-inline-size: 40rem; }
@media (min-width: 56em) {
.status-row { grid-template-columns: 13rem minmax(0, 0.8fr) minmax(0, 1.3fr); }
.status-row h3 { font-size: 1.35rem; }
}
.page-hero__copy h1 { max-inline-size: 15ch; }
.page-hero__meta .btn { margin-top: 0.25rem; }
.page-hero__aside { min-inline-size: 0; }
@media (max-width: 63.99em) { .page-hero__aside { margin-top: 1rem; } }
.accordion summary h3 { font: inherit; letter-spacing: inherit; margin: 0; max-inline-size: none; }
.cquote { margin: 0; display: grid; gap: 0.45rem; }
.cquote blockquote { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--fg); }
.cquote figcaption { font-size: var(--fs-xs); color: var(--fg-3); }
.page-note {
display: flex;
gap: 0.6rem;
align-items: flex-start;
font-size: var(--fs-small);
color: var(--fg-2);
}
.page-note .icon { color: var(--accent); margin-top: 0.2em; flex: none; }
.spec .panel__head { padding: 0.9rem 1.25rem; }
.spec__list { margin: 0; padding: 0.25rem 1.25rem 0.5rem; }
.spec__list > div { display: grid; gap: 0.25rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.spec__list > div:first-child { border-top: 0; }
@media (min-width: 30em) { .spec__list > div { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; } }
.spec__list dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.2rem; }
.spec__list dd { margin: 0; font-size: var(--fs-small); color: var(--fg); }
.ctx-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: ctx; }
.ctx-layer {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: 0.75rem 1.25rem;
align-items: start;
padding: 1.15rem 1.25rem 1.6rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.ctx-layer__code {
display: grid;
place-items: center;
block-size: 2.25rem;
border: 1px solid var(--line-2);
border-radius: var(--radius-s);
background: var(--bg);
font-family: var(--font-mono);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
}
.ctx-layer__name h3 { font-size: 1.15rem; }
.ctx-layer__name p { margin-top: 0.25rem; color: var(--fg-2); font-size: var(--fs-small); }
.ctx-layer__sample {
grid-column: 2;
display: grid;
gap: 0.25rem;
font-size: var(--fs-small);
color: var(--fg);
}
.ctx-layer__sample .label { color: var(--accent); }
.ctx-layer__clip {
position: absolute;
inset-block-end: 0.55rem;
inset-inline-start: calc(4.75rem + var(--i) * 3.2%);
inline-size: calc(10% + var(--i) * 2%);
block-size: 0.3rem;
border-radius: 999px;
background: var(--line-2);
}
.ctx-layer:first-child .ctx-layer__clip { background: var(--accent); }
.ctx-layer:last-child .ctx-layer__clip { background: var(--ink); }
@media (min-width: 56em) {
.ctx-layer { grid-template-columns: 2.75rem minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
.ctx-layer__sample { grid-column: 3; padding-inline-start: 1.25rem; border-inline-start: 1px dashed var(--line-2); }
}
.caps { display: grid; gap: 3rem; }
@media (min-width: 64em) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } }
.cap-group__head { display: grid; gap: 0.85rem; margin-bottom: 0.75rem; }
.cap-group__clip {
display: flex;
justify-content: space-between;
align-items: center;
block-size: 3rem;
padding: 0 1rem;
border-radius: 999px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-display);
font-weight: 650;
font-size: 1.15rem;
letter-spacing: -0.02em;
}
.cap-group__clip .tc { opacity: 0.9; font-size: 0.75rem; }
.cap-group--e .cap-group__clip { background: var(--accent); color: #fff; }
.cap-group--v .cap-group__clip { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--fg); }
.cap-group__lead { color: var(--fg-2); }
.cap-list { list-style: none; margin: 0; padding: 0; }
.cap { display: grid; gap: 0.4rem; padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--line); }
.cap h3 { font-size: 1.1rem; }
.cap p { color: var(--fg-2); font-size: var(--fs-small); }
.cap__spec code {
display: block;
margin-top: 0.2rem;
padding: 0.5rem 0.65rem;
border-radius: var(--radius-s);
background: var(--bg-2);
color: var(--fg);
font-size: 0.75rem;
line-height: 1.5;
overflow-wrap: anywhere;
}
.policy .table th[scope="row"] { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -0.01em; }
.policy__quote { display: block; color: var(--fg); }
.policy__by { display: block; margin-top: 0.3rem; font-size: var(--fs-xs); color: var(--fg-3); }
.policy__does { display: block; margin-top: 0.5rem; color: var(--fg-2); }
.policy__type { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); color: var(--fg-3); }
@media (min-width: 48em) {
.policy .table th[scope="row"] { inline-size: 22%; }
.policy .table td:nth-child(2) { inline-size: 31%; }
.policy .table td:nth-child(3) { inline-size: 28%; }
}
.policy__foot { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.25rem; font-weight: 600; }
.policy__foot .icon { color: var(--accent); }
.outputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--gap); }
@media (min-width: 40em) { .outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .outputs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.output {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
align-content: start;
gap: 0.5rem 0.75rem;
padding: 1.25rem 0 2rem;
border-top: 2px solid var(--fg);
}
.output__n { color: var(--fg-3); font-size: 0.75rem; }
.output__icon { justify-self: end; color: var(--accent); }
.output h3 { grid-column: 1 / -1; font-size: 1.3rem; margin-top: 0.5rem; }
.output p { grid-column: 1 / -1; color: var(--fg-2); max-inline-size: 34ch; }
.faq { display: grid; gap: 2.5rem; }
@media (min-width: 64em) {
.faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.gate {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-top: 1.1rem;
padding: 0.9rem 1rem;
border-radius: var(--radius);
background: var(--t-wait-bg);
color: var(--fg);
font-size: var(--fs-small);
}
.gate .icon { color: var(--t-wait); margin-top: 0.15em; flex: none; }
.gate[data-ready="true"] { background: var(--t-done-bg); }
.gate[data-ready="true"] .icon { color: var(--t-done); }
.sim-tag {
display: inline-block;
margin-right: 0.35rem;
padding: 0.05rem 0.4rem;
border: 1px dashed var(--line-2);
border-radius: 4px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.02em;
color: var(--fg-3);
white-space: nowrap;
}
.pipe {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem;
}
@media (min-width: 40em) { .pipe { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { .pipe { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.35rem; } }
.pipe__step {
position: relative;
display: grid;
gap: 0.15rem;
padding: 0.85rem 1rem 0.9rem;
border-radius: var(--radius);
background: var(--ink);
color: var(--paper);
}
.pipe__step .tc { font-size: 0.6875rem; opacity: 0.7; }
.pipe__name { font-family: var(--font-display); font-weight: 650; font-size: 1.1rem; letter-spacing: -0.02em; }
.pipe__who { font-size: var(--fs-xs); opacity: 0.75; }
.pipe__step--people { background: var(--accent); color: #fff; }
.pipe__step--people .tc,
.pipe__step--people .pipe__who { opacity: 0.9; }
@media (min-width: 64em) {
.pipe__step:not(:last-child)::after {
content: "";
position: absolute;
inset-block-start: 50%;
inset-inline-end: -0.35rem;
inline-size: 0.35rem;
block-size: 2px;
background: var(--ink);
}
}
.stages { display: grid; gap: 2rem; }
@media (min-width: 64em) { .stages { grid-template-columns: 12.5rem minmax(0, 1fr); gap: 3rem; align-items: start; } }
.stage-index { display: none; }
@media (min-width: 64em) {
.stage-index { display: grid; gap: 0.75rem; position: sticky; top: calc(var(--header-h) + 2rem); padding-top: 3rem; }
.stage-index ol { list-style: none; margin: 0; padding: 0; display: grid; border-inline-start: 1px solid var(--line); }
.stage-index ol a {
display: flex;
gap: 0.65rem;
align-items: baseline;
padding: 0.5rem 0 0.5rem 1rem;
margin-inline-start: -1px;
border-inline-start: 2px solid transparent;
color: var(--fg-3);
text-decoration: none;
font-weight: 560;
transition: color var(--dur-1) linear, border-color var(--dur-1) linear;
}
.stage-index ol a:hover { color: var(--fg); }
.stage-index ol a[aria-current="step"] { color: var(--fg); border-inline-start-color: var(--accent); }
.stage-index .tc { font-size: 0.6875rem; color: var(--fg-3); }
.stage-index ol a[aria-current="step"] .tc { color: var(--accent); }
.stage-index__cta { justify-self: start; margin-top: 0.75rem; }
}
.stage { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 1rem); }
.stage:first-child { border-top: 0; }
.stage__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1.25rem; align-items: start; margin-bottom: 1.75rem; }
.stage__n {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2.75rem, 2rem + 3vw, 4.75rem);
line-height: 0.8;
letter-spacing: -0.06em;
color: transparent;
-webkit-text-stroke: 1.5px var(--line-2);
}
.stage__name { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.stage__head h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); max-inline-size: 22ch; }
.stage__body { display: grid; gap: 1.75rem; }
@media (min-width: 75em) { .stage__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem; align-items: start; } }
.stage__copy { display: grid; gap: 1rem; color: var(--fg-2); align-content: start; }
.stage__team { display: flex; gap: 0.6rem; align-items: flex-start; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--fg); font-size: var(--fs-small); }
.stage__team .icon { color: var(--accent); margin-top: 0.15em; flex: none; }
.artifact { padding: 1.15rem 1.25rem 1.25rem; box-shadow: none; }
.artifact__label {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 1rem;
font-family: var(--font-mono);
font-size: var(--fs-label);
letter-spacing: 0.04em;
color: var(--fg-3);
}
.artifact__label .icon { color: var(--accent); flex: none; }
.artifact__sub { margin: 1.25rem 0 0.6rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; color: var(--fg-3); }
.artifact__foot { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--fg-3); }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; }
.src-row {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr) auto;
gap: 0.35rem 0.75rem;
align-items: center;
padding: 0.75rem 0;
border-top: 1px solid var(--line);
}
.src-row:first-child { border-top: 0; padding-top: 0; }
.src-row__icon { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-s); background: var(--bg-2); color: var(--fg-2); }
.src-row__name { display: grid; font-size: var(--fs-small); }
.src-row__name span { color: var(--fg-3); font-size: var(--fs-xs); }
.src-row__bar { grid-column: 2 / 3; grid-row: 2; block-size: 0.4rem; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.src-row__bar span { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }
.src-row__n { grid-column: 3; grid-row: 1 / 3; font-family: var(--font-display); font-weight: 680; font-size: 1.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.src-row__eg { grid-column: 2 / 4; font-size: var(--fs-xs); color: var(--fg-2); }
.chain { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.chain li { display: grid; gap: 0.25rem; padding: 0 0 1rem 1.4rem; position: relative; }
.chain li::before { content: ""; position: absolute; inset-inline-start: 0.2rem; inset-block-start: 0.45rem; inline-size: 0.45rem; block-size: 0.45rem; border-radius: 50%; background: var(--accent); }
.chain li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(0.2rem + 0.225rem - 0.5px); inset-block: 1.1rem 0.1rem; inline-size: 1px; background: var(--line-2); }
.chain li:last-child { padding-bottom: 0; }
@media (min-width: 36em) { .chain li { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; } }
.chain__k { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-3); padding-top: 0.2rem; }
.chain__v { font-size: var(--fs-small); color: var(--fg); }
.chain__v small { display: block; margin-top: 0.2rem; font-size: var(--fs-xs); color: var(--fg-3); }
.chain__chip .mono { white-space: nowrap; }
.chain__chip { display: inline-flex; gap: 0.35rem; align-items: baseline; margin: 0 0.35rem 0.35rem 0; padding: 0.15rem 0.5rem; border-radius: var(--radius-s); background: var(--bg-2); font-size: var(--fs-xs); }
.found { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.plan-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.plan-entry { display: grid; gap: 0.6rem; }
.plan-entry + .plan-entry { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.plan-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; }
.plan-entry__head h4 { font-size: 1.02rem; flex: 1 1 14rem; }
.plan-entry__id { font-size: 0.75rem; color: var(--fg-3); }
.plan-entry__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; font-size: var(--fs-xs); color: var(--fg-2); }
.tl { display: grid; gap: 0.5rem; }
.tl-row { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; align-items: center; }
.tl-row__v { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-3); }
.tl-track { display: flex; gap: 2px; min-inline-size: 0; }
.tl-clip {
min-inline-size: 0;
flex-basis: 0;
block-size: 2.4rem;
display: flex;
align-items: flex-end;
padding: 0 0 0.3rem 0.3rem;
border-radius: 4px;
background: var(--paper-3);
color: var(--fg-2);
font-family: var(--font-mono);
font-size: 0.625rem;
overflow: hidden;
white-space: nowrap;
}
.tl-clip { container-type: inline-size; }
.tl-clip span { overflow: hidden; }
@container (max-width: 2.6rem) { .tl-clip span { display: none; } }
.tl-clip.is-changed { background: var(--accent); color: #fff; }
.tl-clip.is-gone { background: repeating-linear-gradient(135deg, var(--t-block-bg) 0 5px, transparent 5px 9px), var(--paper-2); color: var(--t-block); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-block) 40%, transparent); }
.tl-clip.is-gone span { text-decoration: line-through; }
.tl-legend { display: flex; gap: 1rem; padding-inline-start: 2.5rem; font-size: var(--fs-xs); color: var(--fg-3); }
.tl-legend span { display: inline-flex; gap: 0.4rem; align-items: center; }
.tl-key { display: inline-block; inline-size: 0.85rem; block-size: 0.85rem; border-radius: 3px; }
.tl-key.is-changed { background: var(--accent); }
.tl-key.is-gone { background: repeating-linear-gradient(135deg, var(--t-block-bg) 0 3px, transparent 3px 5px), var(--paper-2); box-shadow: inset 0 0 0 1px var(--t-block); }
.tl-changes { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; }
.tl-changes li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.tl-changes .mono { font-size: 0.75rem; }
.vchecks { list-style: none; margin: 0; padding: 0; display: grid; }
.vcheck { display: grid; grid-template-columns: 11.75rem minmax(0, 1fr); gap: 0.75rem; align-items: start; padding: 0.65rem 0; border-top: 1px solid var(--line); }
.vcheck:first-child { border-top: 0; padding-top: 0; }
.vcheck .badge { justify-self: start; }
.vcheck__label { font-weight: 620; font-size: var(--fs-small); }
.vcheck__detail { margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--fg-2); }
@media (max-width: 30em) { .vcheck { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; } }
.queue { list-style: none; margin: 0; padding: 0; display: grid; }
.queue-row { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.queue-row:first-child { border-top: 0; padding-top: 0; }
.queue-row__title { font-weight: 620; font-size: var(--fs-small); }
.queue-row__who { font-size: var(--fs-xs); color: var(--fg-3); }
.edges { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
@media (min-width: 40em) { .edges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .edges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.edge { display: grid; align-content: start; gap: 0.6rem; padding: 1.5rem 1.4rem 1.6rem; background: var(--surface); }
.edge__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius); background: var(--accent-wash); color: var(--accent); }
.edge h3 { font-size: 1.2rem; margin-top: 0.35rem; }
.edge p { color: var(--fg-2); font-size: var(--fs-small); }
.edge__ex { font-size: 0.75rem; color: var(--fg); }
.stage-tag {
display: inline-flex;
align-items: center;
padding: 0.2rem 0.6rem;
border-radius: 999px;
font-family: var(--font-mono);
font-size: 0.6875rem;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
border: 1px solid var(--fg);
}
.stage-tag[data-stage="u"] { background: var(--fg); color: var(--bg); }
.stage-tag[data-stage="e"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stage-tag[data-stage="v"] { background: transparent; color: var(--fg); }
ul.glance__list { list-style: none; margin: 0; padding: 0.35rem 0; }
.glance__link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem;
padding: 0.8rem 1.25rem;
text-decoration: none;
border-top: 1px solid var(--line);
transition: background-color var(--dur-1) linear;
}
.glance__list li:first-child .glance__link { border-top: 0; }
.glance__link:hover { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.glance__link strong { display: block; font-weight: 650; }
.glance__link span span { display: block; font-size: var(--fs-xs); color: var(--fg-3); }
.glance__link > .icon { color: var(--fg-3); transition: transform var(--dur-2) var(--ease-cut); }
.glance__link:hover > .icon { transform: translateX(3px); color: var(--accent); }
.glance__icon { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius); background: var(--bg-2); color: var(--fg-2); }
.teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 39.99em) {
.teams .tabs__list { flex-direction: column; inline-size: 100%; border-radius: var(--radius-l); }
.teams .tabs__tab { justify-content: flex-start; border-radius: var(--radius); }
}
.team {
padding: clamp(1.25rem, 3vw, 2.5rem);
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: var(--shadow);
}
.no-js .team + .team { margin-top: 1.25rem; }
.team__head { display: grid; gap: 0.6rem; padding-bottom: clamp(1.25rem, 3vw, 2rem); border-bottom: 1px solid var(--line); }
.team__name { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.team__title { max-inline-size: 40ch; font-family: var(--font-display); font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 650; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.team__grid { display: grid; gap: 2rem; padding-block: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 62em) { .team__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-8); } }
.team__h { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.team__side p { color: var(--fg-2); }
.team__decide { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--bg); }
.team__decide p { font-size: var(--fs-small); }
.fits { list-style: none; margin: 0; padding: 0; display: grid; }
.fit-item { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; padding: 0.95rem 0; border-top: 1px solid var(--line); }
.fit-item:first-child { border-top: 0; padding-top: 0.25rem; }
.fit-item .stage-tag { justify-self: start; align-self: start; margin-top: 0.15rem; }
.fit-item h5 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.fit-item p { margin-top: 0.25rem; font-size: var(--fs-small); color: var(--fg-2); }
@media (max-width: 29.99em) { .fit-item { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; } }
.team__scenario {
display: grid;
gap: 0.6rem;
padding: 1.25rem 1.4rem;
border-radius: var(--radius-l);
}
.team__scenario .label { color: var(--accent); }
.team__scenario-text { font-size: 1.0625rem; line-height: 1.5; max-inline-size: 60rem; }
.team__scenario .link-arrow { justify-self: start; }
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg); }
.role { display: grid; gap: 0.9rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
.role__name { font-size: 1.3rem; }
.role__col .label { margin-bottom: 0.35rem; color: var(--fg-3); }
.role__col p:not(.label) { font-size: var(--fs-small); color: var(--fg-2); }
.role__col--keep p:not(.label) { color: var(--fg); font-weight: 600; }
@media (min-width: 48em) { .role { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; } .role__name { grid-column: 1 / -1; } }
@media (min-width: 75em) { .role { grid-template-columns: 13rem repeat(3, minmax(0, 1fr)); column-gap: 2rem; } .role__name { grid-column: auto; font-size: 1.2rem; } }
.fit { display: grid; gap: 1rem; }
@media (min-width: 48em) { .fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit__col { padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius-l); border: 1px solid var(--line); background: var(--surface); }
.fit__col--no { background: transparent; border-style: dashed; border-color: var(--line-2); }
.fit__col h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.35rem; }
.fit__col--yes h3 .icon { color: var(--t-done); }
.fit__col--no h3 .icon { color: var(--t-wait); }
.fit__col ul { margin-top: 1.1rem; display: grid; gap: 0.85rem; }
.fit__col li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; color: var(--fg-2); }
.fit__col li .icon { margin-top: 0.25em; color: var(--fg-3); }
.fit__col--yes li .icon { color: var(--t-done); }
ul.avail__list { list-style: none; margin: 0; padding: 0.4rem 1.25rem 0.6rem; }
.avail__list li { display: grid; gap: 0.45rem; justify-items: start; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.avail__list li:first-child { border-top: 0; }
.avail__list p { font-size: var(--fs-small); color: var(--fg-2); }
.int-groups { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.int-group { display: grid; gap: 1.25rem; }
@media (min-width: 75em) { .int-group { grid-template-columns: 17rem minmax(0, 1fr); column-gap: var(--s-7); align-items: start; } .int-group__head { position: sticky; top: calc(var(--header-h) + 1.5rem); } }
.int-group__head { display: grid; gap: 0.4rem; align-content: start; }
.int-group__head .label { color: var(--accent); }
.int-group__head h3 { font-size: 1.5rem; }
.int-group__head p { color: var(--fg-2); font-size: var(--fs-small); max-inline-size: 30rem; }
.int-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40em) { .int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .int-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.int-card { display: grid; align-content: start; gap: 1rem; padding: 1.2rem 1.25rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.int-card__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; }
.int-card__icon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--radius); border: 1px solid var(--line); color: var(--fg-2); }
.int-card__name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; }
.int-card__kind { font-size: var(--fs-xs); color: var(--fg-3); }
.int-card__dl { margin: 0; display: grid; gap: 0.75rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.int-card__dl dt { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.int-card__dl dd { margin: 0.2rem 0 0; font-size: var(--fs-small); color: var(--fg-2); }
.int-legal, .where__note, .pilot-terms {
display: flex;
gap: 0.6rem;
align-items: flex-start;
margin-top: 2rem;
max-inline-size: 52rem;
font-size: var(--fs-xs);
color: var(--fg-3);
}
.int-legal .icon, .where__note .icon, .pilot-terms .icon { flex: none; margin-top: 0.15em; }
.ground { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem 1.5rem; }
@media (min-width: 40em) { .ground { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .ground { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ground__item { display: grid; gap: 0.55rem; align-content: start; padding-top: 1rem; border-top: 2px solid var(--fg); }
.ground__n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--fg-3); }
.ground__icon { color: var(--accent); }
.ground__item h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 650; letter-spacing: 0; line-height: 1.3; }
.ground__item p { font-size: var(--fs-small); color: var(--fg-2); }
.arch { display: grid; gap: 0.5rem; align-items: stretch; }
@media (min-width: 75em) {
.arch { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.6rem; }
}
.arch__col {
display: grid;
align-content: start;
gap: 0.75rem;
padding: 1.1rem 1.15rem 1.25rem;
border: 1px solid var(--line);
border-radius: var(--radius-l);
background: var(--surface);
}
.arch__col--core { border-color: transparent; box-shadow: var(--shadow-lg); }
.arch__label { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.arch__label .mono { color: var(--accent); }
.arch__core { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--accent); }
.arch__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.arch__chips li { padding: 0.25rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-xs); color: var(--fg-2); background: var(--bg); }
.arch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.arch__list li { position: relative; padding-left: 1rem; font-size: var(--fs-small); color: var(--fg-2); }
.arch__list li::before { content: ""; position: absolute; left: 0; top: 0.6em; inline-size: 0.4rem; block-size: 2px; background: var(--accent); }
.arch__text { font-size: var(--fs-small); color: var(--fg-2); }
.arch__arrow { display: grid; place-items: center; color: var(--fg-3); }
.arch__arrow .icon { transform: rotate(90deg); }
@media (min-width: 75em) { .arch__arrow .icon { transform: none; } }
.arch-notes { display: grid; gap: 1.75rem; margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 62em) { .arch-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); } }
.arch-notes h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 650; letter-spacing: 0; }
.arch-notes p { margin-top: 0.45rem; font-size: var(--fs-small); color: var(--fg-2); }
.where th[scope="row"] { inline-size: 12rem; }
@media (max-width: 47.99em) { .where th[scope="row"] { inline-size: auto; font-size: 1.05rem; } }
.mission { overflow: hidden; }
.mission .wrap { position: relative; }
.mission__line { margin-top: 1.25rem; max-inline-size: 22ch; font-size: clamp(2.2rem, 1.3rem + 3.6vw, 4.4rem); line-height: 1.02; }
.mission__body { display: grid; gap: 1.25rem; margin-top: clamp(2rem, 4vw, 3rem); max-inline-size: 62rem; color: var(--fg-2); font-size: 1.125rem; }
@media (min-width: 62em) { .mission__body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
.mission__track { display: block; inline-size: min(100%, 32rem); block-size: auto; margin-top: clamp(2.5rem, 5vw, 4rem); opacity: 0.9; }
@media (min-width: 62em) { .mission__track { position: absolute; top: 0.25rem; right: var(--gutter); inline-size: 34%; margin: 0; } }
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden; }
@media (min-width: 48em) { .why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why__item { display: grid; gap: 0.6rem; align-content: start; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); }
.why__n { font-family: var(--font-display); font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--accent); }
.why__item h3 { font-size: 1.45rem; }
.why__item p { color: var(--fg-2); max-inline-size: 34rem; }
.beliefs { display: grid; gap: 2rem; }
@media (min-width: 64em) {
.beliefs { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--s-8); align-items: start; }
.beliefs__head { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.beliefs__list { list-style: none; margin: 0; padding: 0; counter-reset: belief; border-top: 1px solid var(--fg); }
.beliefs__list li { counter-increment: belief; display: grid; gap: 0.5rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid var(--line); }
@media (min-width: 40em) { .beliefs__list li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 2rem; } }
.beliefs__list h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); }
.beliefs__list h3::before { content: counter(belief, decimal-leading-zero); display: block; margin-bottom: 0.35rem; font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500; letter-spacing: 0.06em; color: var(--accent); }
.beliefs__list p { color: var(--fg-2); padding-top: 0.15rem; }
@media (min-width: 40em) { .beliefs__list p { padding-top: 1.35rem; } }
.horizon { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; position: relative; }
@media (min-width: 62em) { .horizon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.horizon__step { position: relative; display: grid; gap: 0.6rem; align-content: start; padding: 1.5rem 1.4rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); }
.horizon__step:not(.is-now) { background: transparent; border-style: dashed; border-color: var(--line-2); }
.horizon__step.is-now { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.horizon__k { justify-self: start; padding: 0.2rem 0.65rem; border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-2); color: var(--fg-2); }
.horizon__step.is-now .horizon__k { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.horizon__step h3 { font-size: 1.4rem; }
.horizon__step p { color: var(--fg-2); font-size: var(--fs-small); }
.pilot-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; counter-reset: none; }
@media (min-width: 48em) { .pilot-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .pilot-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.pilot-step { position: relative; display: grid; gap: 0.5rem; align-content: start; padding-top: 1.25rem; }
.pilot-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; block-size: 3px; border-radius: 3px; background: var(--line-2); }
.pilot-step:first-child::before { background: var(--accent); }
.pilot-step__n { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--accent); }
.pilot-step h3 { font-size: 1.35rem; }
.pilot-step p { color: var(--fg-2); font-size: var(--fs-small); }
.pilot-grid { display: grid; gap: 2rem; }
@media (min-width: 64em) {
.pilot-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-7); align-items: start; }
.enquiry { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.pilot-main { display: grid; gap: 1.75rem; min-inline-size: 0; }
.pilot-intro { font-size: 1.0625rem; }
.error-summary[tabindex="-1"]:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.form__row { display: grid; gap: 1.4rem; }
@media (min-width: 40em) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field--group { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.field--group legend { padding: 0; margin-bottom: 0.45rem; }
.field--group.has-error .choice { border-color: var(--t-block); }
.choice > span { display: grid; gap: 0.1rem; }
@media (min-width: 30em) { .pilot-form .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice strong { font-weight: 620; }
.choice__d { font-size: var(--fs-xs); color: var(--fg-3); }
.check-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.check-chip {
display: inline-flex;
align-items: center;
gap: 0.55rem;
min-height: 44px;
padding: 0.45rem 0.95rem 0.45rem 0.75rem;
border: 1px solid var(--line-2);
border-radius: 999px;
background: var(--field-bg);
font-size: var(--fs-small);
cursor: pointer;
}
.check-chip:hover { border-color: var(--fg-2); }
.check-chip input { inline-size: 1.05rem; block-size: 1.05rem; margin: 0; accent-color: var(--accent); }
.check-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.check-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.check-chip input:focus-visible { outline: none; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding-top: 0.5rem; }
.form__note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--fg-3); max-inline-size: 22rem; }
.form__note .icon { flex: none; margin-top: 0.1em; }
.enquiry { min-inline-size: 0; }
.enquiry__title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
.enquiry__body { display: grid; gap: 1rem; padding: 1.25rem; }
.enquiry__empty { padding: 1.5rem 1.25rem; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--fg-3); font-size: var(--fs-small); text-align: center; }
.enquiry__text {
margin: 0;
max-block-size: 24rem;
overflow: auto;
padding: 1rem 1.1rem;
border-radius: var(--radius);
background: var(--bg);
border: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.8125rem;
line-height: 1.6;
white-space: pre-wrap;
overflow-wrap: anywhere;
color: var(--fg);
}
.enquiry__text:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.enquiry__text.is-stale { opacity: 0.7; }
.enquiry__stale { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--t-wait); }
.enquiry__stale .icon { flex: none; margin-top: 0.1em; }
.enquiry__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.enquiry__status { display: flex; gap: 0.5rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--fg-2); }
.enquiry__status .icon { flex: none; margin-top: 0.1em; color: var(--fg-3); }
.enquiry__status:focus { outline: none; }
.privacy-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
.privacy-hero h1 { max-inline-size: 14ch; }
.privacy-updated { font-size: var(--fs-xs); color: var(--fg-3); }
.privacy-summary { padding: 1.4rem 1.5rem 1.5rem; }
.privacy-summary__title { font-family: var(--font-body); font-size: 1.05rem; font-weight: 650; letter-spacing: 0; }
.privacy-summary ul { margin-top: 0.9rem; display: grid; gap: 0.75rem; }
@media (min-width: 40em) { .privacy-summary ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
.privacy-summary li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: var(--fs-small); }
.privacy-summary li .icon { margin-top: 0.2em; color: var(--accent); }
.policy-body { margin-top: clamp(2.5rem, 5vw, 3.5rem); max-inline-size: 44rem; }
.policy-body h2 { margin-top: 2.5rem; font-size: var(--fs-h3); }
.policy-body h2:first-child { margin-top: 0; }
.policy-body > * + * { margin-top: 0.9rem; }
.policy-body p, .policy-body li { color: var(--fg-2); }
.policy-body ul { padding-left: 1.2rem; display: grid; gap: 0.45rem; }
.policy-body code { font-family: var(--font-mono); font-size: 0.875em; padding: 0.1em 0.4em; border-radius: var(--radius-s); background: var(--bg-2); color: var(--fg); overflow-wrap: anywhere; }
.privacy-owner { margin-top: 2.5rem !important; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.nf { padding-top: clamp(3rem, 7vw, 6rem); }
.nf__grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 62em) { .nf__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--s-8); } }
.nf__copy h1 { max-inline-size: 12ch; }
.offline { margin: 0; display: grid; gap: 0.75rem; }
.offline__frame {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 9;
border-radius: var(--radius-l);
background:
repeating-linear-gradient(135deg, rgba(255, 149, 140, 0.13) 0 12px, transparent 12px 24px),
var(--night);
color: #ff958c;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.offline__text { padding: 0.5rem 1rem; border: 1.5px solid currentColor; border-radius: var(--radius-s); background: var(--night); font-size: clamp(0.9rem, 0.7rem + 1vw, 1.3rem); letter-spacing: 0.12em; text-transform: uppercase; }
.offline__tc, .offline__path { position: absolute; font-size: 0.75rem; color: var(--night-text-2); padding: 0.2rem 0.45rem; border-radius: 4px; background: rgba(0, 0, 0, 0.55); }
.offline__tc { top: 0.75rem; left: 0.75rem; }
.offline__path { bottom: 0.75rem; right: 0.75rem; max-inline-size: calc(100% - 1.5rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offline__track { display: flex; gap: 4px; block-size: 1.25rem; }
.offline__track span { flex: 3; border-radius: 4px; background: var(--fg); opacity: 0.85; }
.offline__track span:nth-child(3) { flex: 5; }
.offline__track span:nth-child(4) { flex: 2; background: var(--accent); }
.offline__track .is-gone { flex: 2; opacity: 1; background: repeating-linear-gradient(135deg, var(--t-block) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--t-block); }
.nf__links { margin-top: clamp(3rem, 6vw, 5rem); }
.nf__links ul { margin-top: 1rem; display: grid; gap: 0; border-top: 1px solid var(--fg); }
@media (min-width: 40em) { .nf__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
@media (min-width: 62em) { .nf__links ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nf__links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.nf__links a strong { font-weight: 650; }
.nf__links a span { grid-column: 1; font-size: var(--fs-xs); color: var(--fg-3); }
.nf__links a .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--fg-3); transition: transform var(--dur-2) var(--ease-cut); }
.nf__links a:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.nf__links a:hover .icon { transform: translateX(3px); color: var(--accent); }