/* ==========================================================================
   TrackPerfect design tokens
   --------------------------------------------------------------------------
   Single source of truth for the palette and type. Every colour in style.css
   and forum.css resolves through these, so a rebrand is an edit here rather
   than a sweep of ~365 hardcoded values.

   Source: the "TrackPerfect — Landing (design reference 3a)" handoff —
   cream ground, moss-green accent, Zilla Slab / Work Sans / Space Mono.

   Three values are deliberately DARKER than the handoff, because the handoff
   used them for small text below WCAG AA (measured on --bg):
     --text-dim        #8a7f6b -> #766b57   (3.44:1 -> 4.57:1)
     --accent-2        #6b7a52 -> #63724a   (4.04:1 -> 4.54:1)
     --part-tenor-ink  #7d9a55 -> #597631   (2.76:1 -> 4.51:1)
   The handoff values are preserved exactly for the decorative bar fills
   (--part-tenor / --part-bari), where they carry no text.

   Measured contrast on --bg: text 14.55:1, text-strong 15.81:1,
   text-muted 8.47:1, text-dim 4.57:1, accent 5.24:1, accent-2 4.54:1,
   danger 6.24:1, success 5.64:1, info 5.08:1; --on-accent over --accent
   6.01:1. All pass AA for body text — keep replacements at or above these.
   ========================================================================== */
:root {
    /* Page and surfaces — warm cream, lighter as they come forward */
    --bg:              #f4efe4;
    --bg-deep:         #ece4d4;   /* header / footer bands */
    --bg-deepest:      #e4dbc7;
    --surface:         #fdfaf2;   /* cards, panels */
    --surface-2:       #f4efe4;   /* raised rows, alt striping */
    --surface-3:       #e4dbc7;
    --surface-overlay: rgba(244, 239, 228, 0.94);

    /* Hairlines */
    --border:          #d9d0bd;
    --border-strong:   #c9bfa9;

    /* Ink */
    --text:            #231d16;
    --text-strong:     #1a150f;
    --text-muted:      #4c4335;
    --text-dim:        #766b57;
    --on-accent:       #ffffff;

    /* Moss green — primary accent: links, active state, primary buttons */
    --accent:              #4f6b3a;
    --accent-hover:        #3c5229;
    --accent-deep:         #2e3f1f;
    --accent-tint:         rgba(79, 107, 58, 0.07);
    --accent-tint-strong:  rgba(79, 107, 58, 0.14);
    --accent-tint-soft:    rgba(79, 107, 58, 0.04);

    /* Secondary accent */
    --accent-2:              #63724a;
    --accent-2-hover:        #4e5c39;
    --accent-2-tint:         rgba(99, 114, 74, 0.08);
    --accent-2-tint-strong:  rgba(99, 114, 74, 0.16);
    --accent-2-tint-soft:    rgba(99, 114, 74, 0.04);

    /* Status */
    --danger:              #a8241c;
    --danger-tint:         rgba(168, 36, 28, 0.08);
    --danger-tint-strong:  rgba(168, 36, 28, 0.16);
    --success:             #1f6b46;
    --success-tint-strong: rgba(31, 107, 70, 0.16);
    --info:                #1f5fd0;
    --info-tint-strong:    rgba(31, 95, 208, 0.16);

    /* Inverted band (the landing page's dark section) */
    --band:            #231d16;
    --band-text:       #f4efe4;
    --band-muted:      #bfb4a0;
    --band-accent:     #a5c178;

    /* Four-part voice colours. The plain token is the decorative bar fill,
       exactly as handed off; the -ink variant is for text at label size. */
    --part-tenor:      #7d9a55;
    --part-tenor-ink:  #597631;
    --part-lead:       #4f6b3a;
    --part-bari:       #6b7a52;
    --part-bari-ink:   #63724a;
    --part-bass:       #42513a;

    /* Shadows — warm and shallow, per the handoff's card shadow */
    --shadow-color:    rgba(60, 45, 20, 0.10);
    --shadow-color-lg: rgba(60, 45, 20, 0.18);

    /* Type */
    --font-display: 'Zilla Slab', Georgia, 'Times New Roman', serif;
    --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
}

/* Header */
header {
    width: 100%;
    max-width: 1280px;
    padding: 18px 56px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: nowrap;
}

header img.logo {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: block;
}

.site-title {
    font-family: var(--font-display);
    /* Larger than the handoff's flat 24px. clamp() keeps it from overflowing
       the header next to the 56px icon and the hamburger on narrow screens. */
    font-size: clamp(22px, 5.5vw, 34px);
    font-weight: 700;
    letter-spacing: normal;
    color: var(--text);
    margin-top: 0;
    white-space: nowrap;
}

.header-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

/* Hamburger button */
.hamburger {
    display: none;
    background: none;
    border: none;
    margin-left: auto;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
}

.hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-muted);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.hamburger.active .hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font: 500 14px var(--font-body);
    transition: color 0.2s;
}

/* The handoff's dark "Sign in" pill. */
.nav-link--pill {
    padding: 9px 18px;
    background: var(--text);
    color: var(--bg);
    border-radius: 6px;
    font-weight: 600;
}

.nav-link--pill:hover { background: var(--accent); color: var(--on-accent); }

.nav-link:hover {
    color: var(--accent);
}

/* Header user section */
.header-user {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.header-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
}

.header-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: var(--on-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.65em;
}

/* Typography
   PartPerfect set Outfit on <body> and opted individual prose blocks into
   Geist. Here it is the other way round: <body> is the sans (--font-body) and
   headings opt *into* the serif, so long-form forum and blog text stays in the
   more readable face while headings carry the brand voice. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
}

h1 {
    color: var(--text-strong);
    font-size: 2.2em;
    margin-bottom: 10px;
}

h2 {
    color: var(--accent);
    font-size: 1.6em;
    margin-bottom: 20px;
}

p {
    color: var(--text-muted);
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Layout */
.container {
    max-width: 1100px;
    width: 90%;
    margin: 0 auto 60px;
    text-align: center;
}

.container-wide {
    max-width: 1100px;
    width: 90%;
    margin: 40px auto;
}

/* Hero */
.hero-section {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    width: 90%;
    margin: 70px auto 50px;
    overflow: visible;
}

.hero-content {
    flex: 1;
}

.hero-headline {
    font-family: var(--font-body);
    font-size: clamp(36px, 4.2vw, 54px);
    font-weight: 700;
    color: var(--text);
    line-height: 1.04;
    margin-bottom: 28px;
    letter-spacing: -0.035em;
}

.hero-headline__line {
    display: block;
}

.hero-headline em {
    font-style: normal;
    color: var(--accent-2-hover);
    position: relative;
}

.hero-headline em::after {
    content: '';
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: 2%;
    height: 3px;
    background: var(--accent-2-hover);
    opacity: 0.4;
    border-radius: 2px;
}

.hero-headline__accent {
    color: var(--accent-hover);
}

.hero-features {
    list-style: none;
    padding: 0;
}

.hero-features li {
    color: var(--text-muted);
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 35px;
    margin-bottom: 14px;
    position: relative;
}

.hero-features li::before {
    content: "♪";
    color: var(--accent);
    font-size: 1.3em;
    position: absolute;
    left: 0;
    top: -1px;
}

.hero-download-card {
    margin-top: 36px;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 30px 35px;
    text-align: center;
    max-width: 650px;
}

.hero-download-card h2 {
    color: var(--text-strong);
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 10px;
}

.hero-download-card .platform-label {
    color: var(--accent);
    font-size: 1.05em;
    font-weight: 600;
    margin-bottom: 15px;
}

.store-buttons {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.store-column {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.store-column .platform-label {
    margin-bottom: 8px;
}

.app-store-badge {
    display: flex;
}

.app-store-badge a {
    display: flex;
}

.app-store-badge img {
    height: 54px;
    width: 162px;
    object-fit: contain;
    display: block;
}

.android-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 16px;
    background: var(--border);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-dim);
    font-size: 0.85em;
    white-space: nowrap;
    box-sizing: border-box;
}

.android-badge strong {
    color: var(--text-muted);
    margin-right: 4px;
}

/* Phone mockup */
.hero-phone {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.phone-stage {
    position: relative;
    width: 100%;
    height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.phone-anchor {
    position: relative;
    width: 340px;
    overflow: visible;
}

.staff-lines {
    position: absolute;
    inset: -200px;
    pointer-events: none;
    z-index: 1;
    width: calc(100% + 400px);
    height: calc(100% + 400px);
    overflow: visible;
}

.phone {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 60px 80px var(--shadow-color-lg)) drop-shadow(0 20px 40px var(--shadow-color-lg));
}

.phone__bezel {
    width: 340px;
    height: 780px;
    background: linear-gradient(155deg, var(--surface-3), var(--bg-deepest));
    border-radius: 50px;
    padding: 7px;
    position: relative;
    border: 1px solid var(--border-strong);
}

.phone__notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 30px;
    background: #000;
    border-radius: 16px;
    z-index: 5;
}

.phone__screen {
    width: 100%;
    height: 100%;
    background: var(--bg-deep);
    border-radius: 44px;
    padding: 12px 16px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-body);
}

.phone__status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px 0;
    color: var(--text);
}

.phone__time-status {
    font-size: 14px;
    font-weight: 600;
}

.phone__status-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mi-sm {
    font-size: 16px !important;
}

.mi-fill {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.phone__help {
    position: absolute;
    right: 16px;
    top: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone__track-title {
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: var(--text);
    margin-top: 30px;
    letter-spacing: -0.01em;
}

.wf {
    padding: 0;
}

.wf__label {
    font-size: 11px;
    letter-spacing: 0.12em;
    font-weight: 700;
    margin-bottom: 4px;
}

.wf__label--green {
    color: var(--success);
}

.wf__label--blue {
    color: var(--info);
}

.wf__box {
    background: var(--bg-deep);
    border-radius: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border);
}

.wf__svg {
    width: 100%;
    height: 36px;
    display: block;
}

.wf__box--animated {
    position: relative;
    overflow: hidden;
}

.wf__svg--dim {
    position: relative;
    z-index: 1;
}

/* Dark overlay that covers the unplayed portion, shrinking from left to right */
.wf__bright-mask {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background: var(--surface-overlay);
    animation: wf-dim 12s linear infinite;
}

.wf__playhead {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 5%;
    width: 1.5px;
    background: #fff;
    opacity: 0.85;
    border-radius: 1px;
    z-index: 3;
    animation: wf-head 12s linear infinite;
}

@keyframes wf-dim {
    0%   { clip-path: inset(0 0 0 5%); }
    95%  { clip-path: inset(0 0 0 98%); }
    100% { clip-path: inset(0 0 0 5%); }
}

@keyframes wf-head {
    0%   { left: 5%; }
    95%  { left: 98%; }
    100% { left: 5%; }
}

.phone__time-display {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 2px 0;
}

.phone__time-display span {
    color: var(--text-dim);
    font-weight: 500;
}

.phone__transport {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
}

.iconbtn {
    background: transparent;
    border: none;
    color: var(--text);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iconbtn--pill {
    color: var(--text);
}

.transport-pill {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--surface-2);
    border-radius: 999px;
    padding: 4px 6px;
}

.phone__play {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--text);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px;
}

.analysis {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
}

.analysis__icon {
    color: var(--text-dim);
    display: inline-flex;
}

.analysis__flat {
    color: var(--danger);
    font-weight: 600;
}

.analysis__sep {
    width: 1px;
    height: 14px;
    background: var(--border-strong);
}

.analysis__db {
    color: var(--info);
    font-weight: 600;
}

.analysis__acc {
    color: var(--text-muted);
    font-weight: 500;
}

.analysis__acc strong {
    color: var(--success);
    font-weight: 700;
}

.analysis__close {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 18px;
}

.seg {
    position: relative;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-2-hover) 0%, var(--accent-2) 25%, var(--text-dim) 50%, var(--info) 75%, var(--info) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    box-shadow: inset 0 1px 2px var(--border-strong), inset 0 -1px 2px var(--shadow-color);
}

.seg__label {
    color: var(--text);
    text-shadow: 0 1px 2px var(--shadow-color);
}

.seg__center {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 1px;
    background: var(--text-dim);
    transform: translateX(-0.5px);
}

.seg__handle {
    position: absolute;
    left: calc(50% - 16px);
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--text), var(--border-strong));
    box-shadow: 0 2px 6px var(--shadow-color), inset 0 1px 1px var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-slider {
    padding: 6px 0 8px;
}

.phone-slider__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    margin-bottom: 12px;
}

.phone-slider__pct {
    color: var(--text-dim);
    font-size: 13px;
}

.phone-slider__track {
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    position: relative;
}

.phone-slider__fill {
    height: 100%;
    border-radius: 2px;
}

.phone-slider__knob {
    position: absolute;
    top: -9px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--text), var(--border-strong));
    box-shadow: 0 2px 4px var(--shadow-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.phones-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 14px;
    color: var(--text);
    font-size: 12px;
    margin-top: 2px;
}

.phone__rerec {
    background: var(--danger);
    color: var(--on-accent);
    border: none;
    padding: 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    margin: 4px 28px 2px;
    box-shadow: 0 4px 14px var(--danger-tint-strong);
    text-align: center;
}

.phone__tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--bg-deep);
    border-radius: 22px;
    margin: 4px -4px 0;
    padding: 10px 4px 6px;
}

.phone-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
}

.phone-tab .material-symbols-outlined {
    font-size: 22px;
}

.phone-tab--active {
    color: var(--info);
}

.phone__home {
    width: 130px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-muted);
    margin: 4px auto 2px;
}

/* Floating cards */
.float-card {
    position: absolute;
    z-index: 3;
    background: var(--surface-overlay);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 20px 40px var(--shadow-color-lg);
}

.float-card--tl {
    top: 8%;
    left: -90px;
    animation: floaty 6s ease-in-out infinite;
}

.float-card--br {
    top: 32%;
    right: -90px;
    animation: floaty 7s ease-in-out infinite reverse;
}

.float-card--bl {
    bottom: 12%;
    left: -100px;
    animation: floaty 8s ease-in-out infinite;
    min-width: 200px;
}

.float-card__title {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--danger);
    font-weight: 600;
    margin-bottom: 4px;
}

.float-card__body {
    font-size: 14px;
    color: var(--text);
    font-family: var(--font-mono);
}

.float-card__big {
    font-family: var(--font-body);
    font-size: 46px;
    line-height: 1;
    color: var(--success);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-shadow: 0 0 24px var(--success-tint-strong);
}

.float-card__big span {
    font-size: 22px;
    color: var(--success);
    opacity: 0.75;
    font-weight: 600;
}

.float-card__cap {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 600;
}

.float-card__heading {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: -0.005em;
    margin-top: 10px;
}

.float-card__sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fc-slider {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fc-slider__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fc-slider__dot--green {
    background: var(--success);
    box-shadow: 0 0 8px var(--success-tint-strong);
}

.fc-slider__dot--blue {
    background: var(--info);
    box-shadow: 0 0 8px var(--info-tint-strong);
}

.fc-slider__bar {
    flex: 1;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.fc-slider__bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
}

@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* Footer screenshot */
.footer-screenshot {
    margin-bottom: 24px;
}

.footer-screenshot img {
    max-height: 300px;
    width: auto;
    border-radius: 12px;
    opacity: 0.8;
}

/* Section divider */
.section-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    margin: 0 auto;
    border-radius: 2px;
}

/* Feature sections */
.features-wrapper {
    max-width: 1100px;
    width: 90%;
    margin: 60px auto 0;
}

.feature-section {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 70px;
}

.feature-section.reverse {
    flex-direction: row-reverse;
    max-width: 750px;
}

.feature-image {
    flex-shrink: 0;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 30px var(--shadow-color-lg), 0 0 15px var(--accent-tint-strong);
}

.feature-image-balance {
    width: 320px;
    height: 276px;
}

.feature-image-pitch {
    width: 314px;
    height: 392px;
}

.feature-image-parity {
    width: 320px;
    height: auto;
    box-shadow: none;
    background: none;
    border-radius: 0;
    overflow: visible;
    flex-direction: column;
}

.feature-image-parity img {
    width: 100%;
    height: auto;
    box-shadow: none;
}

.feature-image-ppxl {
    width: 436px;
    height: auto;
    box-shadow: none;
    background: none;
    border-radius: 0;
    overflow: visible;
}

.feature-image-ppxl img {
    width: 100%;
    height: auto;
    object-fit: contain;
    box-shadow: none;
}

.feature-image-caption {
    font-size: 0.8em;
    color: var(--text-dim);
    text-align: center;
    margin-top: 8px;
}

.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px;
}

.feature-content {
    flex: 1;
}

.feature-title {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--text-strong);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.feature-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    color: var(--text-muted);
    font-size: 1.1em;
    line-height: 1.6;
    padding-left: 30px;
    margin-bottom: 12px;
    position: relative;
}

.feature-list a {
    color: var(--accent);
    text-decoration: none;
}

.feature-list a:hover {
    text-decoration: underline;
}

.feature-list li::before {
    content: "✓";
    color: var(--accent);
    font-weight: 700;
    position: absolute;
    left: 0;
}

/* Download section */
.download-section {
    max-width: 1100px;
    width: 90%;
    margin: 20px auto 60px;
}

.download-card {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 50px;
    text-align: center;
}

.download-card h2 {
    color: var(--text-strong);
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 10px;
}

.download-card .platform-label {
    color: var(--accent);
    font-size: 1.15em;
    font-weight: 600;
    margin-bottom: 25px;
}

.app-store-badge {
    display: inline-block;
    margin-bottom: 30px;
}

.app-store-badge img {
    height: 54px;
    transition: opacity 0.2s;
}

.app-store-badge:hover img {
    opacity: 0.85;
}

.android-notice {
    background: var(--accent-2-tint);
    border: 1px solid var(--accent-2-tint-strong);
    border-radius: 12px;
    padding: 20px 30px;
    display: inline-block;
    max-width: 600px;
}

.android-notice p {
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 0;
}

.android-notice strong {
    color: var(--accent-2);
}

.android-notice a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.android-notice a:hover {
    text-decoration: underline;
}

/* Coming Soon (legacy) */
.coming-soon {
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 45px;
}

.coming-soon h2 {
    font-size: 1.8em;
    font-weight: 700;
}

.coming-soon p {
    color: var(--text-muted);
    font-size: 1.1em;
    line-height: 1.6;
}

.coming-soon a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.coming-soon a:hover {
    text-decoration: underline;
}

.coming-soon-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 1.1em;
    word-break: break-all;
}

.coming-soon-link:hover {
    text-decoration: underline;
}

/* Forms */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-size: 0.95em;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1em;
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

/* Buttons */
button.submit-btn {
    background-color: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

button.submit-btn:hover {
    background-color: var(--accent-hover);
}

/* Submitting state (see submit-guard.js) */
button.is-loading,
input.is-loading {
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}

.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 8px;
    vertical-align: -0.15em;
    border: 2px solid var(--border);
    border-top-color: var(--bg);
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

.continue-btn {
    display: inline-block;
    margin-top: 20px;
    text-decoration: none;
    background-color: var(--accent);
    color: var(--on-accent);
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    font-size: 1.05em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.continue-btn:hover {
    background-color: var(--accent-hover);
}

/* Messages */
.success-message {
    background-color: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 30px;
    margin-top: 20px;
    color: var(--accent);
}

.success-message a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
}

.success-message a:hover {
    color: var(--accent-hover);
}

.error-message {
    color: var(--danger);
    margin-bottom: 15px;
}

/* Text pages */
.text-left {
    text-align: left;
}

.text-left h3 {
    color: var(--accent);
    font-size: 1.2em;
    margin-top: 25px;
    margin-bottom: 10px;
}

.last-updated {
    color: var(--text-dim);
    font-size: 0.9em;
    margin-bottom: 25px;
}

/* About */
.about-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    max-width: 1100px;
    width: 90%;
    margin: 60px auto;
}

.about-image {
    flex-shrink: 0;
}

.about-image img {
    max-height: 350px;
    width: auto;
    border-radius: 16px;
    box-shadow: 0 15px 40px var(--shadow-color);
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-family: var(--font-display);
    font-size: 2em;
    font-weight: 700;
    margin-bottom: 20px;
}

.about-content p {
    color: var(--text-muted);
    font-size: 1.15em;
    line-height: 1.7;
    margin-bottom: 15px;
}

.about-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.about-link:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    width: 100%;
    margin-top: auto;
    padding: 30px 0;
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    text-decoration: none;
}

.footer-logo {
    max-height: 36px;
}

.footer-title {
    font-family: var(--font-display);
    font-size: 1.2em;
    font-weight: 700;
    color: var(--accent);
}

.footer-copy {
    font-size: 0.85em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.footer-link {
    color: var(--accent);
    font-size: 0.85em;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Admin */
.admin-card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--text-strong);
}

.status-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-pending {
    background-color: var(--accent-2-tint-strong);
    color: var(--accent-2);
}

.badge-granted {
    background-color: var(--accent-tint-strong);
    color: var(--accent);
}

.badge-revoked {
    background-color: var(--danger-tint-strong);
    color: var(--danger);
}

.admin-card-body p {
    margin-bottom: 6px;
    font-size: 0.95em;
}

.admin-card-body strong {
    color: var(--text-muted);
}

.admin-form {
    margin-top: 15px;
    border-top: 1px solid var(--border);
    padding-top: 15px;
}

.admin-form-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.admin-form-row .form-group {
    margin-bottom: 10px;
}

.admin-notes {
    flex: 1;
}

.admin-form select {
    padding: 10px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95em;
}

.admin-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.admin-actions {
    margin-top: 10px;
}

.admin-actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.admin-delete-form {
    text-align: right;
}

.delete-btn {
    background-color: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.delete-btn:hover {
    background-color: var(--danger-tint);
}

.admin-nav {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.admin-nav-link {
    display: block;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 25px 35px;
    color: var(--accent);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 600;
    transition: border-color 0.2s;
}

.admin-nav-link:hover {
    border-color: var(--accent);
}

.admin-nav-link.logout {
    background-color: transparent;
    border-color: var(--danger);
    color: var(--danger);
    padding: 12px 25px;
    font-size: 0.95em;
}

.admin-nav-link.logout:hover {
    background-color: var(--danger-tint);
}

.admin-menu {
    list-style: none;
    padding: 0;
    margin: 25px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-menu-row {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
}

.admin-menu-link {
    flex: 0 0 220px;
    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    padding: 8px 14px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s;
}

.admin-menu-link:hover {
    border-color: var(--accent);
}

.admin-menu-desc {
    color: var(--text-muted);
    font-size: 0.9em;
    line-height: 1.4;
}

.admin-menu-footer {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 600px) {
    .admin-menu-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .admin-menu-link {
        flex: 0 0 auto;
    }
    .admin-menu-desc {
        font-size: 0.85em;
    }
}

.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.back-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.95em;
}

.back-link:hover {
    text-decoration: underline;
}

.device-info {
    color: var(--text-muted);
    font-size: 0.9em;
}

.device-details {
    background-color: var(--bg);
    border-radius: 8px;
    padding: 12px;
    margin: 10px 0;
}

.device-details p {
    margin-bottom: 4px;
    font-size: 0.9em;
}

/* Beta Testers Table */
.testers-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.platform-filter {
    display: flex;
    gap: 8px;
}

.filter-btn {
    padding: 8px 20px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: border-color 0.2s, color 0.2s;
}

.filter-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}

.filter-btn.active {
    border-color: var(--accent);
    background-color: var(--accent-tint);
    color: var(--accent);
}

.testers-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.testers-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

.testers-table th {
    background-color: var(--surface);
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    padding: 12px 14px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}

.testers-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}

.testers-table tbody tr:hover {
    background-color: var(--surface-2);
}

.testers-table td:nth-child(7),
.testers-table td:nth-child(8) {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.platform-form select {
    padding: 6px 10px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.9em;
    cursor: pointer;
}

.platform-form select:focus {
    outline: none;
    border-color: var(--accent);
}

.add-tester-heading {
    margin-top: 40px;
    margin-bottom: 16px;
    color: var(--text-strong);
}

.add-tester-form {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 40px;
}

.add-tester-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.add-tester-grid .full-width {
    grid-column: 1 / -1;
}

.add-tester-grid label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.9em;
}

.add-tester-grid input,
.add-tester-grid select,
.add-tester-grid textarea {
    width: 100%;
    padding: 10px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95em;
    box-sizing: border-box;
}

.add-tester-grid input:focus,
.add-tester-grid select:focus,
.add-tester-grid textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .hero-section {
        gap: 40px;
        margin: 50px auto 40px;
    }

    .hero-headline {
        font-size: clamp(30px, 8vw, 44px);
    }

    .hero-phone {
        min-height: 600px;
    }

    .feature-section {
        gap: 35px;
    }

    .feature-image-balance {
        width: 270px;
        height: 233px;
    }

    .feature-image-pitch {
        width: 265px;
        height: 331px;
    }

    .feature-image-parity {
        width: 320px;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column-reverse;
        gap: 30px;
        margin: 30px auto 40px;
    }

    .hero-headline {
        font-size: clamp(26px, 7.5vw, 36px);
        text-align: center;
    }

    .hero-features li {
        font-size: 1.05em;
    }

    .hero-phone {
        min-height: auto;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .phone-stage {
        height: auto;
        min-height: 500px;
        justify-content: center;
        overflow: visible;
    }

    .staff-lines {
        inset: -100px;
        width: calc(100% + 200px);
        height: calc(100% + 200px);
    }

    .phone-anchor {
        width: 280px;
        margin: 0 auto;
        overflow: visible;
    }

    .phone__bezel {
        width: 280px;
        height: 640px;
        border-radius: 42px;
    }

    .phone__screen {
        border-radius: 36px;
        padding: 10px 12px 6px;
        gap: 6px;
    }

    .phone__track-title {
        font-size: 16px;
        margin-top: 24px;
    }

    .phone__time-display {
        font-size: 15px;
    }

    .iconbtn {
        width: 28px;
        height: 28px;
    }

    .iconbtn .material-symbols-outlined {
        font-size: 18px;
    }

    .phone__play {
        width: 36px;
        height: 36px;
    }

    .phone__play svg {
        width: 16px;
        height: 16px;
    }

    .transport-pill {
        gap: 2px;
        padding: 3px 4px;
    }

    .analysis {
        gap: 5px;
        padding: 6px 10px;
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
    }

    .seg {
        height: 36px;
        font-size: 10px;
        padding: 0 16px;
    }

    .seg__handle {
        width: 26px;
        height: 26px;
        left: calc(50% - 13px);
    }

    .phone-slider {
        padding: 4px 0 6px;
    }

    .phone-slider__row {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .phone-slider__knob {
        width: 18px;
        height: 18px;
        top: -7px;
    }

    .phones-row {
        padding: 6px 10px;
        font-size: 11px;
        gap: 6px;
    }

    .phone__rerec {
        margin: 4px 16px 2px;
        font-size: 13px;
        padding: 9px;
    }

    .phone__tabs {
        border-radius: 18px;
        padding: 8px 4px 5px;
    }

    .phone-tab {
        font-size: 10px;
    }

    .float-card {
        display: none;
    }

    .feature-section,
    .feature-section.reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 50px;
    }

    .feature-image-balance {
        width: 320px;
        height: 276px;
        margin: 0 auto;
    }

    .feature-image-pitch {
        width: 314px;
        height: 392px;
        margin: 0 auto;
    }

    .feature-image-parity {
        width: 300px;
        margin: 0 auto;
    }

    .feature-content {
        text-align: center;
    }

    .feature-title {
        font-size: 1.5em;
        text-align: center;
    }

    .feature-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .feature-list li {
        text-align: left;
    }

    .download-card {
        padding: 35px 25px;
    }

    .download-card h2 {
        font-size: 1.6em;
    }

    .hamburger {
        display: flex;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--bg);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin-left: 0;
        padding: 10px 0;
        z-index: 1000;
    }

    .header-nav.open {
        display: flex;
    }

    .header-nav .nav-link {
        padding: 12px 20px;
        width: 100%;
        text-align: center;
        font-size: 1.05em;
    }

    .header-nav .nav-link:hover {
        background-color: var(--surface);
    }

    .header-nav .header-user {
        flex-direction: column;
        gap: 0;
        width: 100%;
        white-space: normal;
        padding: 8px 0;
        border-top: 1px solid var(--border);
        margin-top: 4px;
    }

    .header-nav .header-user .nav-link {
        width: 100%;
    }

    header {
        position: relative;
        padding: 16px 20px;
    }

    header img.logo {
        width: 44px;
        height: 44px;
    }

    .android-notice {
        padding: 15px 20px;
    }

    .coming-soon {
        padding: 30px 25px;
    }

    .about-section {
        flex-direction: column;
        gap: 30px;
        margin: 30px auto;
    }

    .about-image img {
        max-height: 280px;
    }

    .about-content h2 {
        text-align: center;
    }

    /* Admin dashboard responsive */
    .admin-nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .admin-nav-link {
        padding: 18px 20px;
        font-size: 1em;
        text-align: center;
        flex: 1 1 calc(50% - 10px);
        min-width: 140px;
    }

    .admin-nav-link.logout {
        flex: 0 1 auto;
    }

    .admin-form-row {
        flex-direction: column;
        gap: 10px;
    }

    .add-tester-grid {
        grid-template-columns: 1fr;
    }

    .testers-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .platform-filter {
        flex-wrap: wrap;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Responsive - Small phones */
@media (max-width: 480px) {
    .hero-headline {
        font-size: clamp(22px, 6.5vw, 30px);
    }

    .hero-features li {
        font-size: 0.95em;
    }

    .phone-anchor {
        width: 240px;
        margin: 0 auto;
    }

    .phone__bezel {
        width: 240px;
        height: 550px;
        border-radius: 36px;
        padding: 5px;
    }

    .phone__screen {
        border-radius: 30px;
        padding: 8px 8px 4px;
        gap: 3px;
    }

    .phone__notch {
        width: 90px;
        height: 24px;
        top: 12px;
        border-radius: 12px;
    }

    .phone__status {
        font-size: 11px;
        padding: 4px 10px 0;
    }

    .mi-sm {
        font-size: 13px !important;
    }

    .phone__track-title {
        font-size: 13px;
        margin-top: 16px;
    }

    .wf__label {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .wf__box {
        padding: 4px 6px;
        border-radius: 6px;
    }

    .wf__svg {
        height: 28px;
    }

    .phone__time-display {
        font-size: 12px;
    }

    .iconbtn {
        width: 24px;
        height: 24px;
    }

    .iconbtn .material-symbols-outlined {
        font-size: 16px;
    }

    .phone__play {
        width: 32px;
        height: 32px;
    }

    .phone__play svg {
        width: 14px;
        height: 14px;
    }

    .transport-pill {
        gap: 1px;
        padding: 2px 3px;
    }

    .phone__transport {
        padding: 2px 4px;
    }

    .analysis {
        gap: 4px;
        padding: 5px 8px;
        font-size: 10px;
        white-space: nowrap;
        overflow: hidden;
    }

    .analysis__close {
        font-size: 14px;
    }

    .seg {
        height: 32px;
        font-size: 9px;
        padding: 0 14px;
    }

    .seg__handle {
        width: 22px;
        height: 22px;
        left: calc(50% - 11px);
    }

    .seg__handle svg {
        width: 10px;
        height: 10px;
    }

    .phone-slider {
        padding: 3px 0 4px;
    }

    .phone-slider__row {
        font-size: 10px;
        margin-bottom: 6px;
    }

    .phone-slider__knob {
        width: 16px;
        height: 16px;
        top: -6px;
    }

    .phones-row {
        padding: 5px 8px;
        font-size: 10px;
        gap: 5px;
    }

    .phones-row .material-symbols-outlined {
        font-size: 14px !important;
    }

    .phone__rerec {
        margin: 2px 10px 2px;
        font-size: 11px;
        padding: 6px;
    }

    .phone__tabs {
        border-radius: 14px;
        padding: 5px 2px 3px;
    }

    .phone-tab {
        font-size: 8px;
        gap: 2px;
    }

    .phone-tab .material-symbols-outlined {
        font-size: 16px;
    }

    .phone__home {
        width: 100px;
        height: 3px;
        margin: 2px auto 1px;
    }

    .phone-stage {
        min-height: 380px;
        overflow: visible;
    }

    .staff-lines {
        inset: -80px;
        width: calc(100% + 160px);
        height: calc(100% + 160px);
    }

    .feature-image-balance {
        width: 260px;
        height: 224px;
    }

    .feature-image-pitch {
        width: 255px;
        height: 318px;
    }

    .feature-image-parity {
        width: 260px;
    }

    .feature-title {
        font-size: 1.3em;
    }

    .feature-list li {
        font-size: 1em;
    }

    /* Admin - small phones */
    .admin-nav-link {
        flex: 1 1 100%;
        padding: 16px 20px;
        font-size: 0.95em;
    }
}

/* FAQ page */
.faq-page h2 {
    margin-bottom: 30px;
}

.faq-toc {
    margin-bottom: 40px;
}

.faq-toc h3 {
    color: var(--accent);
    font-size: 1.1em;
    margin: 20px 0 8px;
}

.faq-toc h3:first-child {
    margin-top: 0;
}

.faq-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.faq-toc li {
    padding: 4px 0;
}

.faq-toc a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.faq-toc a:hover {
    color: var(--accent);
}

.faq-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0 0 40px;
}

.faq-answers h3 {
    margin: 40px 0 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.faq-answers h3:first-child {
    margin-top: 0;
}

.faq-qa {
    margin-bottom: 30px;
    scroll-margin-top: 100px;
}

.faq-qa h4 {
    color: var(--text);
    font-size: 1em;
    font-weight: 600;
    margin: 0 0 8px;
}

.faq-qa p {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

.faq-qa ol,
.faq-qa ul {
    color: var(--text-muted);
    line-height: 1.7;
    margin: 6px 0 0;
    padding-left: 32px;
}

.faq-qa li {
    margin-bottom: 6px;
}

.faq-qa a {
    color: var(--accent);
}

/* 404 page */
.error-page {
    max-width: 600px;
    width: 90%;
    margin: 80px auto;
    text-align: center;
}

.error-staff {
    margin-bottom: 30px;
}

.error-staff-svg {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.error-code {
    font-family: var(--font-body);
    font-size: clamp(80px, 15vw, 140px);
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 16px;
}

.error-note {
    color: var(--danger);
    display: inline-block;
    animation: wobble 2s ease-in-out infinite;
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-8deg); }
    75% { transform: rotate(8deg); }
}

.error-title {
    font-family: var(--font-body);
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 600;
    color: var(--accent-2-hover);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.error-message {
    font-size: 1.1em;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 36px;
}

.error-actions {
    margin-bottom: 30px;
}

.error-btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent-hover);
    color: var(--on-accent);
    font-family: var(--font-body);
    font-size: 1em;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s;
}

.error-btn:hover {
    background: var(--accent);
}

.error-hint {
    font-size: 0.85em;
    color: var(--text-dim);
}

/* ==========================================================================
   Landing page — from the "design reference 3a" handoff.
   Colours come from the tokens above; the handoff's inline styles are
   translated into classes here so the markup stays readable.
   ========================================================================== */

/* Mono eyebrow / label, used above headings and for the voice-part codes */
.eyebrow {
    font: 700 13px var(--font-mono);
    font-size: clamp(10px, 2.9vw, 13px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}

.lp-hero {
    width: 100%;
    max-width: 1280px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
    padding: 72px 56px 64px;
}

.lp-hero h1 {
    font: 600 54px/1.08 var(--font-display);
    color: var(--text);
    margin: 0 0 18px;
    letter-spacing: normal;
    text-wrap: pretty;
}

.lp-hero-lede {
    font: 400 18px/1.55 var(--font-body);
    color: var(--text-muted);
    margin: 0 0 28px;
    max-width: 46ch;
}

.lp-cta-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}

.lp-btn-primary,
.lp-btn-secondary {
    display: inline-block;
    border-radius: 8px;
    font: 600 16px var(--font-body);
    text-decoration: none;
    cursor: pointer;
}

.lp-btn-primary {
    padding: 14px 26px;
    background: var(--accent);
    color: var(--on-accent);
    border: none;
    box-shadow: 0 2px 0 var(--accent-hover);
}

.lp-btn-primary:hover { background: var(--accent-hover); }

.lp-btn-secondary {
    padding: 14px 22px;
    border: 1.5px solid var(--border-strong);
    background: transparent;
    color: var(--text);
}

.lp-btn-secondary:hover { border-color: var(--accent); color: var(--accent); }

.lp-fineprint {
    margin-top: 18px;
    font: 400 13px var(--font-body);
    color: var(--text-dim);
}

/* Hero panel: drop zone + the four voice-part rows */
.lp-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 26px;
    box-shadow: 0 12px 30px var(--shadow-color);
}

.lp-dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: 10px;
    padding: 28px;
    text-align: center;
}

.lp-dropzone-glyph { font: 700 34px var(--font-display); color: var(--accent); }
.lp-dropzone-title { font: 600 15px var(--font-body); margin-top: 6px; }
.lp-dropzone-hint  { font: 400 12.5px var(--font-body); color: var(--text-dim); margin-top: 4px; }

/* ---- Voice-part sliders: CURRENTLY UNUSED ------------------------------
   These rendered the four TEN/LD/BAR/BS rows inside the hero upload box,
   which was removed on request. Kept because the four-part mix is central to
   the product and will likely resurface (a features page, a player UI), and
   because this project has no version control to recover them from. The
   --part-* tokens exist only for these rules. Delete both together if the
   sliders are not coming back. Markup to restore them is in the design
   handoff ("design reference 3a"). Also covers .lp-panel-caption, the
   sliders' readout line.
   ---------------------------------------------------------------------- */
.lp-parts { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.lp-part {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    padding: 10px 14px;
}

.lp-part-code { font: 700 11px var(--font-mono); width: 34px; }
.lp-part-name { font: 600 13px var(--font-body); width: 70px; }

.lp-part-track {
    flex: 1;
    height: 4px;
    background: var(--surface-3);
    border-radius: 2px;
    position: relative;
}

.lp-part-fill { position: absolute; inset: 0; border-radius: 2px; }

.lp-part-knob {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--surface);
    border-radius: 50%;
    border: 2px solid currentColor;
}

/* Per-voice colours: the bar keeps the handoff's exact value, the code text
   uses the AA-compliant -ink variant (see the token block). */
.lp-part--tenor .lp-part-fill { background: var(--part-tenor); }
.lp-part--tenor .lp-part-knob { color: var(--part-tenor); }
.lp-part--tenor .lp-part-code { color: var(--part-tenor-ink); }
.lp-part--lead  .lp-part-fill { background: var(--part-lead); }
.lp-part--lead  .lp-part-knob { color: var(--part-lead); }
.lp-part--lead  .lp-part-code { color: var(--part-lead); }
.lp-part--bari  .lp-part-fill { background: var(--part-bari); }
.lp-part--bari  .lp-part-knob { color: var(--part-bari); }
.lp-part--bari  .lp-part-code { color: var(--part-bari-ink); }
.lp-part--bass  .lp-part-fill { background: var(--part-bass); }
.lp-part--bass  .lp-part-knob { color: var(--part-bass); }
.lp-part--bass  .lp-part-code { color: var(--part-bass); }

.lp-panel-caption {
    margin-top: 14px;
    font: 400 11.5px var(--font-mono);
    color: var(--text-dim);
    text-align: center;
}

/* Inverted "how it works" band */
.lp-band {
    width: 100%;
    background: var(--band);
    color: var(--band-text);
    padding: 56px;
}

.lp-band-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.lp-step-num {
    font: 700 13px var(--font-mono);
    letter-spacing: 0.06em;
    color: var(--band-accent);
}

.lp-step-title {
    font: 600 21px var(--font-display);
    color: var(--band-text);
    margin: 10px 0 8px;
}

.lp-step-body { font: 400 14.5px/1.55 var(--font-body); color: var(--band-muted); margin: 0; }

/* Pricing */
.lp-pricing {
    width: 100%;
    padding: 64px 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
}

.lp-plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 30px;
    position: relative;
}

.lp-plan--featured { border: 2px solid var(--accent); }

.lp-plan-badge {
    position: absolute;
    top: -11px;
    left: 26px;
    background: var(--accent);
    color: var(--on-accent);
    font: 700 11px var(--font-mono);
    letter-spacing: 0.06em;
    padding: 3px 10px;
    border-radius: 20px;
}

.lp-plan-name  { font: 700 13px var(--font-mono); letter-spacing: 0.08em; color: var(--text-dim); }
.lp-plan--featured .lp-plan-name { color: var(--accent); }
.lp-plan-price { font: 600 38px var(--font-display); color: var(--text); margin: 8px 0; }
.lp-plan-price span { font-size: 16px; color: var(--text-dim); }
.lp-plan-features { font: 400 14px/1.7 var(--font-body); color: var(--text-muted); }

@media (max-width: 900px) {
    .lp-hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px; }
    .lp-hero h1 { font-size: 40px; }
    .lp-band { padding: 40px 24px; }
    .lp-band-inner { grid-template-columns: 1fr; gap: 28px; }
    .lp-pricing { padding: 40px 24px; }
}