/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 */
/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: cool · nav: N9 · footer: Ft5 · honest: pass · tokens: pass */
:root {
    --color-ink: #081423;
    --color-ink-soft: #526274;
    --color-ink-muted: #718096;
    --color-paper: #f5f8fc;
    --color-paper-strong: #fbfcff;
    --color-rule: #d7e1ee;
    --color-rule-strong: #b9cbe1;
    --color-accent: #2e6bff;
    --color-accent-ink: #fbfcff;
    --color-accent-soft: #e7efff;
    --color-signal-topic: #168b87;
    --color-signal-density: #e49a21;
    --color-panel-soft: #f1f5fa;
    --color-dark-soft: #b4c1d0;
    --font-body: "Inter", Arial, Helvetica, sans-serif;
    --font-display: "Space Grotesk", Arial, Helvetica, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 68px;
    --space-4xl: 90px;
    --space-5xl: 112px;
    --text-xs: .75rem;
    --text-sm: .9rem;
    --text-lg: 1.16rem;
    --text-xl: 1.35rem;
    --text-display: clamp(2.25rem, 6.8vw, 5rem);
    --text-section: clamp(2.25rem, 7vw, 4rem);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --rule-hair: 1px;
    --page-gutter: 18px;
}

html,
body {
    overflow-x: clip;
}

body.listen-page {
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
}

.listen-page *,
.listen-page *::before,
.listen-page *::after {
    box-sizing: border-box;
}

.listen-page a { color: inherit; }

.listen-shell {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: var(--page-gutter);
}

.listen-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-lg);
    font-size: var(--text-sm);
}

.listen-nav-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xl);
    min-width: 0;
}

.listen-brand,
.listen-back {
    min-width: 0;
    white-space: nowrap;
    text-decoration: none;
}

.listen-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    letter-spacing: -.03em;
}

.listen-mark {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    flex: 0 0 28px;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    position: relative;
}

.listen-mark::before {
    width: 10px;
    height: 10px;
    border: 2px solid var(--color-accent-ink);
    border-radius: 50%;
    content: '';
}

.listen-back { color: var(--color-ink-soft); }

.listen-language-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .04em;
}

.listen-language-switch a {
    text-decoration: none;
}

.listen-language-switch a[aria-current="page"] {
    color: var(--color-ink);
    font-weight: 700;
}

.listen-back:hover,
.listen-back:focus-visible,
.listen-privacy a:hover,
.listen-privacy a:focus-visible {
    color: var(--color-accent);
}

.listen-hero {
    display: grid;
    gap: var(--space-3xl);
    padding-block: var(--space-4xl) var(--space-5xl);
}

.listen-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.listen-kicker::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-signal-density);
    content: '';
}

.listen-hero h1,
.listen-section h2,
.listen-note-band h2,
.listen-footer-line {
    min-width: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-display);
    font-style: normal;
}

.listen-hero h1 {
    max-width: 18ch;
    margin: var(--space-lg) 0;
    font-size: var(--text-display);
    line-height: 1;
    letter-spacing: -.075em;
    font-weight: 800;
    overflow-wrap: normal;
    word-break: normal;
}

.listen-keep-word {
    display: inline-block;
    white-space: nowrap;
}

.listen-accent { color: var(--color-accent); }

.listen-lead {
    max-width: 62ch;
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
    line-height: 1.65;
}

.listen-note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin: var(--space-xl) 0 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.listen-note span {
    padding: var(--space-xs) var(--space-sm);
    border: var(--rule-hair) solid var(--color-rule-strong);
    border-radius: 999px;
    background: var(--color-paper-strong);
    font-size: var(--text-xs);
    font-weight: 700;
}

.listen-surface {
    min-width: 0;
    padding: var(--space-lg);
    border-top: 3px solid var(--color-ink);
    border-bottom: var(--rule-hair) solid var(--color-rule-strong);
    background: var(--color-paper-strong);
}

.listen-surface-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.listen-surface-label {
    color: var(--color-ink-muted);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.listen-surface-name {
    margin: var(--space-xs) 0 0;
    font-size: var(--text-xl);
    font-weight: 700;
}

.listen-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-signal-topic);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.listen-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-signal-topic);
}

.listen-chart {
    display: block;
    width: 100%;
    height: 170px;
    margin-block: var(--space-md) var(--space-lg);
}

.listen-chart-fill { fill: var(--color-accent-soft); }
.listen-chart-line { fill: none; stroke-linecap: round; stroke-width: 4; }
.listen-chart-line--tone { stroke: var(--color-accent); }
.listen-chart-line--topic { stroke: var(--color-signal-topic); }
.listen-chart-line--density { stroke: var(--color-signal-density); }
.listen-chart-rule { stroke: var(--color-rule); }
.listen-chart-dot { stroke: var(--color-paper-strong); stroke-width: 3; }
.listen-chart-dot--tone { fill: var(--color-accent); }
.listen-chart-dot--topic { fill: var(--color-signal-topic); }
.listen-chart-dot--density { fill: var(--color-signal-density); }

.listen-signal-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
    border-top: var(--rule-hair) solid var(--color-rule);
    padding-top: var(--space-lg);
}

.listen-signal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: var(--space-sm);
}

.listen-signal::before {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: var(--space-xs);
    border-radius: 50%;
    background: var(--color-accent);
    content: '';
}

.listen-signal:nth-child(2)::before { background: var(--color-signal-topic); }
.listen-signal:nth-child(3)::before { background: var(--color-signal-density); }

.listen-signal small { color: var(--color-ink-muted); font-size: var(--text-xs); }
.listen-signal strong { color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 700; }

.listen-section {
    padding-block: var(--space-4xl);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.listen-section-head {
    display: block;
    margin-bottom: var(--space-2xl);
}

.listen-section h2 {
    max-width: 16ch;
    margin: 0 0 var(--space-lg);
    font-size: var(--text-section);
    line-height: 1.04;
    letter-spacing: -.06em;
}

.listen-section-intro {
    max-width: 62ch;
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.listen-workflow {
    display: grid;
    gap: 0;
    border-top: var(--rule-hair) solid var(--color-ink);
}

.listen-step {
    display: grid;
    gap: var(--space-md);
    padding-block: var(--space-lg);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.listen-step-number { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.listen-step h3 { margin: 0 0 var(--space-xs); font-size: var(--text-xl); }
.listen-step p { max-width: 62ch; margin: 0; color: var(--color-ink-soft); line-height: 1.6; }
.listen-step-detail { align-self: center; color: var(--color-ink-muted); font-size: var(--text-sm); letter-spacing: .02em; }

.listen-spec {
    display: grid;
    border-top: var(--rule-hair) solid var(--color-ink);
}

.listen-spec-row {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-md);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.listen-spec-key { font-weight: 700; }
.listen-spec-value { color: var(--color-ink-soft); }

.listen-note-band {
    display: grid;
    gap: var(--space-lg);
    margin-block: 0 var(--space-4xl);
    padding: var(--space-2xl) 0;
    border-top: 3px solid var(--color-accent);
    border-bottom: var(--rule-hair) solid var(--color-rule);
}

.listen-note-band h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.7rem); line-height: 1.04; }
.listen-note-band p { max-width: 48ch; margin: 0; color: var(--color-ink-soft); line-height: 1.6; }

.listen-privacy {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    color: var(--color-ink-soft);
    font-size: var(--text-sm);
}

.listen-privacy a { color: var(--color-accent); text-underline-offset: 3px; white-space: nowrap; }

.listen-footer {
    padding-block: var(--space-2xl) var(--space-3xl);
    border-top: var(--rule-hair) solid var(--color-rule);
}

.listen-footer-line {
    max-width: 38ch;
    margin: 0 0 var(--space-lg);
    font-size: clamp(1.8rem, 5vw, 3.25rem);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.listen-footer-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-top: var(--space-md);
    border-top: var(--rule-hair) solid var(--color-rule);
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
}

.listen-page a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

@media (min-width: 40rem) {
    :root { --page-gutter: 28px; }
    .listen-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: var(--space-4xl); }
    .listen-signal-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .listen-signal { display: block; }
    .listen-signal strong { display: block; margin-top: var(--space-xs); }
    .listen-step { grid-template-columns: 52px minmax(0, 1fr) minmax(130px, .42fr); align-items: start; }
    .listen-spec-row { grid-template-columns: minmax(150px, .45fr) minmax(0, 1fr); }
    .listen-note-band { grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); align-items: end; }
}

@media (min-width: 60rem) {
    .listen-hero { padding-block: var(--space-5xl) var(--space-5xl); }
    .listen-surface { padding: var(--space-xl); }
    .listen-section-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-4xl); align-items: start; }
    .listen-section h2 { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}