@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500&family=IBM+Plex+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");

/* Base */
html, body { background: var(--bg); color: var(--text); margin: 0; }
body { font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; }
.sv-root *, .sv-root *::before, .sv-root *::after { box-sizing: border-box; }
.sv-num { font-variant-numeric: tabular-nums; }
.sv-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 1.08em; line-height: 1; letter-spacing: -0.01em; padding-right: 0.04em; color: var(--human); }
.sv-muted { color: var(--text-muted); }
.sv-secondary { color: var(--text-secondary); }
.sv-measure { max-width: var(--measure); }
:where(.sv-root) :focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Grid frame */
.sv-frame { max-width: var(--container); margin: 0 auto; border-left: var(--hairline) solid var(--border-grid); border-right: var(--hairline) solid var(--border-grid); }
.sv-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-bottom: var(--hairline) solid var(--border-grid); }
.sv-row--band { background: var(--bg-band); }
.sv-cell { position: relative; min-width: 0; border-right: var(--hairline) solid var(--border-grid); }
.sv-cell:last-child { border-right: 0; }
.sv-span-3 { grid-column: span 3; } .sv-span-4 { grid-column: span 4; } .sv-span-6 { grid-column: span 6; }
.sv-span-8 { grid-column: span 8; } .sv-span-9 { grid-column: span 9; } .sv-span-12 { grid-column: span 12; }
.sv-cell--content { padding: var(--space-14) var(--space-10); }
.sv-cell--header { padding: var(--space-20) var(--space-10) var(--space-14); }
.sv-cell--hero { padding: var(--space-24) var(--space-10); }
.sv-cell--inset { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.sv-cell--inset > .sv-card { flex: 1; }


/* Card */
.sv-card { background: var(--surface); border: var(--hairline) solid var(--border-card); border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.sv-card--lg { padding: var(--space-12); }
.sv-card--link { text-decoration: none; color: inherit; transition: background-color 160ms ease, border-color 160ms ease; }
.sv-card--link:hover { background: var(--surface-hover); border-color: var(--border-hover); }
.sv-card--machine { border-color: var(--machine-border); }
.sv-card__foot { margin-top: auto; padding-top: var(--space-5); }

/* Label (mono eyebrow) */
.sv-label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.sv-label--machine { color: var(--machine); }
.sv-label--human { color: var(--human); }

/* Tag */
.sv-tag { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; border: var(--hairline) solid var(--border-control); color: var(--text-secondary); white-space: nowrap; }
.sv-tag::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.sv-tag--human { background: var(--human-tint); border-color: var(--human-border); color: var(--human); }
.sv-tag--human::before { background: var(--human); }
.sv-tag--machine { background: var(--machine-tint); border-color: var(--machine-border); color: var(--machine); }
.sv-tag--machine::before { border: 1.5px solid var(--machine); }
.sv-tag--neutral::before { display: none; }

/* Button */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; border: var(--hairline) solid transparent; transition: background-color 160ms ease, border-color 160ms ease, transform 100ms ease; white-space: nowrap; }
.sv-btn:active { transform: scale(0.98); }
.sv-btn--primary { background: var(--human); color: var(--on-human); }
.sv-btn--primary:hover { background: var(--human-hover); }
.sv-btn--primary:active { background: var(--human-pressed); }
.sv-btn--secondary { background: transparent; color: var(--text); border-color: var(--border-control); }
.sv-btn--secondary:hover { border-color: var(--border-hover); background: var(--surface); }
.sv-btn--ghost { background: transparent; color: var(--text-secondary); padding: 0 var(--space-3); }
.sv-btn--ghost:hover { color: var(--text); }
.sv-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.sv-btn--lg { height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.sv-btn__arrow { transition: transform 160ms ease; }
.sv-btn:hover .sv-btn__arrow { transform: translateX(2px); }
.sv-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Link */
.sv-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-control); text-underline-offset: 4px; transition: text-decoration-color 160ms ease; }
.sv-link:hover { text-decoration-color: var(--text); }

/* Navbar */
.sv-nav { position: sticky; top: 0; z-index: 10; background: var(--bg); }
.sv-nav .sv-cell { height: var(--nav-height); display: flex; align-items: center; padding: 0 var(--space-6); }
.sv-nav__links { display: flex; gap: var(--space-6); font-size: 14px; }
.sv-nav__links a { color: var(--text-muted); text-decoration: none; }
.sv-nav__links a:hover, .sv-nav__links a[aria-current] { color: var(--text); }
.sv-nav__end { justify-content: flex-end; }
.sv-logo { display: block; height: 22px; width: auto; }

/* Metric */
.sv-metric { display: flex; flex-direction: column; gap: var(--space-2); }
.sv-metric__value { font-family: var(--font-mono); font-size: 32px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--text); }
.sv-metric--lg .sv-metric__value { font-size: 56px; line-height: 1; letter-spacing: -0.04em; }
.sv-metric--machine .sv-metric__value { color: var(--machine); }
.sv-metric__label { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }

/* Checklist */
.sv-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sv-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-top: var(--hairline) solid var(--border-quiet); font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.sv-list li:first-child { border-top: 0; padding-top: 0; }
.sv-list li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; }
.sv-list--yes li::before { border: 1.5px solid var(--text-secondary); border-radius: var(--radius-full); background: radial-gradient(circle, var(--text-secondary) 0 2.5px, transparent 3px); }
.sv-list--no li::before { background: linear-gradient(45deg, transparent 45%, var(--text-muted) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--text-muted) 45% 55%, transparent 55%); }
.sv-list--plain li::before { width: 6px; height: 1px; margin-top: 13px; background: var(--text-muted); }

/* Spec panel (key/value document) */
.sv-spec { display: flex; flex-direction: column; }
.sv-spec__row { display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr; gap: var(--space-5); padding: var(--space-4) 0; border-top: var(--hairline) solid var(--border-quiet); }
.sv-spec__row:first-child { border-top: 0; padding-top: 0; }
.sv-spec__key { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); padding-top: 3px; }
.sv-spec__val { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.sv-spec__val code { font-family: var(--font-mono); font-size: 14px; color: var(--machine); }

/* Pipeline: human vs machine steps */
.sv-pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; }
.sv-pipe__step { display: grid; grid-template-columns: 12px 1fr auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; font-size: 15px; color: var(--text); position: relative; }
.sv-pipe__step::before { content: ""; width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--human); justify-self: center; position: relative; z-index: 1; }
.sv-pipe__step:not(:last-child)::after { content: ""; position: absolute; left: 5.5px; top: calc(50% + 6px); height: calc(100% - 12px); width: 1px; background: var(--border-control); }
.sv-pipe__step--machine { color: var(--machine); }
.sv-pipe__step--machine::before { background: var(--surface); border: 1.5px solid var(--machine); }
.sv-pipe__who { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.sv-pipe__step--machine .sv-pipe__who { color: var(--machine); }

/* Progress */
.sv-progress { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4); align-items: baseline; }
.sv-progress__label { font-size: 15px; color: var(--text-secondary); }
.sv-progress__value { font-family: var(--font-mono); font-size: 13px; color: var(--text); font-variant-numeric: tabular-nums; }
.sv-progress__track { grid-column: 1 / -1; height: 4px; background: var(--ink-500); border-radius: var(--radius-sm); overflow: hidden; }
.sv-progress__fill { height: 100%; background: var(--text); border-radius: var(--radius-sm); }
.sv-progress--machine .sv-progress__fill { background: var(--machine); }

/* Steps (engagement sequence) */
.sv-step { display: flex; flex-direction: column; gap: var(--space-5); }
.sv-step__index { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-muted); display: flex; align-items: center; gap: var(--space-3); }
.sv-step__index::after { content: ""; flex: 1; height: 1px; background: var(--border-quiet); }

/* Comparison */
.sv-compare__term { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-top: var(--hairline) solid var(--border-quiet); padding-top: var(--space-4); margin-top: auto; }
.sv-compare__term b { display: block; font-family: var(--font-mono); font-size: 28px; line-height: 1.25; letter-spacing: -0.03em; font-weight: 400; text-transform: none; color: var(--text); margin-top: var(--space-2); }
.sv-compare--after .sv-compare__term b { color: var(--human); }

/* Accordion (FAQ) */
.sv-acc { border-top: var(--hairline) solid var(--border-grid); }
.sv-acc details { border-bottom: var(--hairline) solid var(--border-grid); }
.sv-acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: var(--space-6); align-items: center; padding: var(--space-6) var(--space-10); font-family: var(--font-mono); font-size: 20px; line-height: 1.35; letter-spacing: -0.02em; font-weight: 500; color: var(--text); transition: background-color 160ms ease; }
.sv-acc summary::-webkit-details-marker { display: none; }
.sv-acc summary:hover { background: var(--surface); }
.sv-acc summary::after { content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--text-muted); text-align: center; transition: transform 200ms ease; }
.sv-acc details[open] summary::after { transform: rotate(45deg); }
.sv-acc__body { padding: 0 var(--space-10) var(--space-8); max-width: calc(var(--measure) + 80px); color: var(--text-secondary); font-size: 17px; line-height: 1.6; }

/* Form */
.sv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.sv-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.sv-field--full { grid-column: 1 / -1; }
.sv-field__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.sv-input { height: 48px; padding: 0 var(--space-4); background: var(--bg); border: var(--hairline) solid var(--border-control); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font-sans); font-size: 15px; transition: border-color 160ms ease; width: 100%; }
textarea.sv-input { height: auto; min-height: 128px; padding: var(--space-3) var(--space-4); line-height: 1.6; resize: vertical; }
.sv-input::placeholder { color: var(--text-muted); }
.sv-input:hover { border-color: var(--border-hover); }
.sv-input:focus-visible { outline: none; border-color: var(--text); box-shadow: var(--focus-ring); }
.sv-field--error .sv-input { border-color: var(--danger); }
.sv-field__msg { font-size: 13px; line-height: 1.5; color: var(--text-muted); display: flex; gap: var(--space-2); align-items: center; }
.sv-field--error .sv-field__msg { color: var(--danger); }
.sv-field--error .sv-field__msg::before { content: "!"; display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--danger); border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 10px; flex: none; }
.sv-form__note--success { display: flex; gap: var(--space-2); align-items: center; color: var(--success); font-size: 15px; }

/* CTA band */
.sv-cta { background: var(--human); color: var(--on-human); }
.sv-cta .sv-label { color: var(--on-human); opacity: 1; }
.sv-cta .sv-btn--cta { background: var(--on-human); color: var(--text); }
.sv-cta .sv-btn--cta:hover { background: var(--ink-850); }

/* Footer */
.sv-footer .sv-cell { padding: var(--space-10); }
.sv-footer a { color: var(--text-muted); text-decoration: none; font-size: 14px; line-height: 2; }
.sv-footer a:hover { color: var(--text); }

/* Responsive */
@media (max-width: 960px) {
  .sv-row { grid-template-columns: minmax(0, 1fr); }
  .sv-row > .sv-cell { grid-column: 1 / -1; border-right: 0; border-bottom: var(--hairline) solid var(--border-grid); }
  .sv-row > .sv-cell:last-child { border-bottom: 0; }
  .sv-cell--content, .sv-cell--header { padding: var(--space-12) var(--space-6); }
  .sv-cell--hero { padding: var(--space-14) var(--space-6); }
  .sv-hero__title.display { font-size: 44px; line-height: 1.1; letter-spacing: -0.035em; }
  .sv-nav__links { display: none; }
  .sv-form { grid-template-columns: minmax(0, 1fr); }
  .sv-acc summary { padding: var(--space-5) var(--space-6); font-size: 18px; }
  .sv-acc__body { padding: 0 var(--space-6) var(--space-6); }
}
@media (prefers-reduced-motion: reduce) { .sv-root * { transition: none !important; } }
.sv-tag::before { background: var(--text-muted); }
.sv-tag--human::before { background: var(--human); }
.sv-tag--machine::before { background: transparent; }
.sv-footer .sv-label { margin-bottom: var(--space-3); }
.display, .display-sm, .heading-1, .heading-2, .heading-3, .sv-compare__term b, .sv-acc summary { word-spacing: -0.12em; }
.sv-accent { word-spacing: normal; }
.sv-step__index { text-transform: uppercase; }
.sv-form__note--success[hidden] { display: none; }

/* ToneCard */
.sv-tone { --tone: var(--tone-sabi); height: 100%; box-sizing: border-box; border-radius: var(--radius-md); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); background: var(--tone); color: var(--on-tone); }
.sv-tone--sabi { --tone: var(--tone-sabi); }
.sv-tone--odo { --tone: var(--tone-odo); }
.sv-tone--fuji { --tone: var(--tone-fuji); }
.sv-tone--kinari { --tone: var(--tone-kinari); }
.sv-tone .sv-label { color: var(--on-tone-muted); margin: 0; }
.sv-tone h2, .sv-tone h3, .sv-tone h4 { color: var(--on-tone); margin: 0; }
.sv-tone p { color: var(--on-tone-muted); margin: 0; font-size: 15px; line-height: 1.55; }
.sv-tone .sv-tone__num { font-family: var(--font-mono); font-size: 56px; line-height: 1; letter-spacing: -0.05em; color: var(--on-tone); font-variant-numeric: tabular-nums; }
.sv-tone hr { border: 0; border-top: var(--hairline) solid var(--tone-line); margin: 0; }

/* Glow: the machine's light. Sabiasagi only, on numbers, small interface marks and agent cards. Never on words. */
.sv-metric--machine.sv-metric--glow .sv-metric__value { text-shadow: var(--glow-number); }
.sv-tag--machine.sv-tag--glow { box-shadow: var(--glow-chip); }
.sv-pipe__step--machine::before { box-shadow: var(--glow-node); }
.sv-progress--machine .sv-progress__track { overflow: visible; }
.sv-progress--machine .sv-progress__fill { box-shadow: var(--glow-bar); }
.sv-card--glow { border-color: var(--machine-glow-border); box-shadow: var(--glow-card); }