/* ===================================================================
   Paper and ink — SpeakToWords, November 2026

   The same system as the mobile app: warm paper, deep ink, a
   recording-light coral and a highlighter yellow. Headings are set in
   a serif, because the product's whole job is turning speech into
   something you read.

   This sheet loads after style.css and owns the look. Most of the old
   sheet already draws its colours from the four variables below, so
   redefining them does most of the work; the rest of this file
   restyles the components the old sheet drew in blue by hand.
   =================================================================== */

:root {
    /* Old names, new values: every existing rule that reads these
       follows along instead of having to be found and rewritten. */
    --primary-color: #EE5234;
    --secondary-color: #1C2230;
    --accent-color: #FFD95A;
    --bg-color: #F4EEE3;
    --text-color: #1C2230;
    --border-radius: 14px;

    /* The palette itself. */
    --paper: #F4EEE3;
    --paper-deep: #EDE4D5;
    --card: #FFFCF6;
    --card-raised: #FFFFFF;
    --ink: #1C2230;
    --ink-soft: #5C6270;
    --ink-faint: #9A9CA3;
    --line: #E3D9C8;
    --line-soft: #EFE7DA;
    --coral: #EE5234;
    --coral-deep: #D8401F;
    --highlight: #FFD95A;
    --note: #F8E6A8;
    --ok: #2E8B62;
    --warn: #B7791F;
    --bad: #C8372D;
    --studio: #14161E;
    --on-studio: #F4EEE3;

    --serif: 'Literata', Georgia, 'Times New Roman', serif;
    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --r-sm: 10px;
    --r: 14px;
    --r-lg: 20px;
    --r-xl: 28px;
}

/* ------------------------------------------------------------ base -- */

html, body { background: var(--paper); }

body {
    font-family: var(--sans);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4,
.hero h1, .hero h2,
.pricing h2, .features h2, .how-it-works h2, .testimonials h2, .faq h2,
.v5-card h3, .v5-legal-header h1, .dashboard-section h2 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { color: var(--ink-soft); }

a { color: var(--ink); text-decoration-color: var(--line); }
a:hover { color: var(--coral); }

::selection { background: var(--highlight); color: var(--ink); }

/* The old sheet's section tints were cool greys; everything is paper now. */
section, .features, .how-it-works, .pricing, .testimonials, .faq,
.content-wrapper, main, .container { background: transparent; }

/* ---------------------------------------------------------- header -- */

header, .site-header, .dashboard-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: none;
}

.logo img { height: 34px; width: auto; }
.logo .tagline {
    font-family: var(--sans);
    color: var(--ink-faint);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
}

/* The wordmark beside the new mark. */
.stw-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 1.32rem;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1;
}
.stw-wordmark em { font-style: normal; color: var(--coral); }

.nav-links a {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--ink-soft);
    border-radius: var(--r-sm);
}
.nav-links a:hover { color: var(--ink); background: transparent; }
.nav-links a.active { color: var(--ink); font-weight: 600; }

.nav-links a.btn-primary,
.nav-links a.btn-secondary {
    padding: 9px 18px;
    border-radius: var(--r-sm);
    font-weight: 600;
}
.nav-links a.btn-primary {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
}
.nav-links a.btn-primary:hover { background: #000; color: #fff; }
.nav-links a.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.nav-links a.btn-secondary:hover { border-color: var(--ink); background: transparent; }

.stw-upgrade-link {
    color: var(--coral) !important;
    font-weight: 600 !important;
}

.menu-toggle span { background: var(--ink); }

/* --------------------------------------------------------- buttons -- */

.btn-brand, .v5-btn, .btn-primary, .btn-secondary,
button[type="submit"], input[type="submit"] {
    font-family: var(--sans);
    font-weight: 600;
    border-radius: var(--r);
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
}

.btn-brand-primary, .v5-btn-primary, .v5-act-primary,
button[type="submit"], input[type="submit"] {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: none;
}
.btn-brand-primary:hover, .v5-btn-primary:hover, .v5-act-primary:hover,
button[type="submit"]:hover, input[type="submit"]:hover {
    background: #0F131C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(28, 34, 48, .16);
}

.btn-brand-secondary, .v5-act-quiet {
    background: transparent;
    color: var(--ink) !important;
    border: 1px solid var(--line);
}
.btn-brand-secondary:hover, .v5-act-quiet:hover {
    background: var(--card);
    border-color: var(--ink);
}

/* Coral is the recording light: one action per screen, no more. */
.stw-accent-btn {
    background: var(--coral);
    color: #fff;
    border: 1px solid var(--coral);
}
.stw-accent-btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

/* ------------------------------------------------------------ hero -- */

.hero {
    background: var(--paper);
    padding-top: clamp(40px, 7vw, 86px);
    padding-bottom: clamp(30px, 5vw, 60px);
}
.hero h1 {
    font-family: var(--serif);
    letter-spacing: -0.035em;
}
.hero h1 .accent,
.hero h1 span.gradient-text,
.hero .highlight-text {
    color: var(--coral);
    -webkit-text-fill-color: var(--coral);
    background: none;
}
.hero p, .hero-subtitle { color: var(--ink-soft); font-size: 1.08rem; }

.eyebrow, .badge-pill, .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--note);
    border: none;
    padding: 6px 12px;
    border-radius: 999px;
}

/* The little fact chips under the headline. */
.hero-stats .stat, .trust-badges span, .hero-chip {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.86rem;
    padding: 8px 14px;
}
.hero-stats .stat strong, .hero-chip strong { color: var(--ink); }

/* -------------------------------------------------------- the card -- */

.v5-card, .feature-card, .step-card, .testimonial-slide,
.faq-item, .v5-checkout-card, .v5-checkout-sidebar,
.v5-legal-card, .dashboard-section, .upload-section,
.stw-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: none;
}

.v5-card:hover, .feature-card:hover {
    border-color: #D6C8B0;
    transform: none;
    box-shadow: 0 10px 30px rgba(28, 34, 48, .06);
}

.v5-badge-text, .v5-section-title, .section-label {
    font-family: var(--sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.v5-status-dot { background: var(--coral); }

.section-subtitle { color: var(--ink-soft); font-size: 1.02rem; }

/* --------------------------------------------------------- pricing -- */

.pricing .v5-grid, .v5-grid {
    background: transparent;
    border: none;
    gap: 18px;
    border-radius: 0;
}
.v5-card { padding: 30px 26px; }
.v5-card.featured {
    background: var(--card-raised);
    border-color: var(--ink);
}
.v5-card.featured .v5-badge-text { color: var(--coral); }

.v5-price-row { display: flex; align-items: baseline; flex-wrap: wrap; }
.v5-amount {
    font-family: var(--serif);
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--ink);
}
.v5-period { color: var(--ink-faint); font-size: 0.92rem; }
.v5-was { color: var(--ink-faint); }

.v5-features li {
    color: var(--ink-soft);
    font-size: 0.94rem;
    border-bottom: 1px solid var(--line-soft);
    padding: 10px 0;
}
.v5-features li:last-child { border-bottom: none; }

.switcher-box {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 8px;
}
.switcher-label { color: var(--ink-faint); font-size: 0.92rem; }
.switcher-label.active { color: var(--ink); font-weight: 600; }
.discount-tag {
    background: var(--note) !important;
    color: var(--ink) !important;
    border-radius: 999px !important;
}
.toggle-btn { background: var(--line); }
.toggle-btn.active, .toggle-btn[data-on="1"] { background: var(--ink); }
.toggle-knob { background: var(--card-raised); }

.guarantee-badge {
    background: var(--note);
    border: 1px solid #EBD79C;
    border-radius: var(--r);
    color: var(--ink);
}
.guarantee-badge p, .guarantee-text p { color: #6B6246; }

/* ----------------------------------------------------- how it works -- */

.step-card, .step {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}
.step-number, .step .number {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--serif);
    font-weight: 700;
    border-radius: 50%;
}

/* ---------------------------------------------------- testimonials -- */

.testimonials { background: transparent; }
.testimonial-slide { padding: 28px; }
.testimonial-content p {
    font-family: var(--serif);
    font-size: 1.12rem;
    line-height: 1.6;
    color: var(--ink);
}
.testimonial-stars, .stars { color: var(--coral); letter-spacing: 2px; }
.avatar-initials {
    background: var(--note);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 700;
}
.author-name { color: var(--ink); font-weight: 600; }
.author-title { color: var(--ink-faint); }

/* ------------------------------------------------------------- faq -- */

.faq-item { padding: 4px 22px; }
.faq-question, .faq-item summary, .faq-item h3 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 600;
}
.faq-answer p, .faq-item p { color: var(--ink-soft); }

/* ----------------------------------------------------------- forms -- */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
    font-family: var(--sans);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--ink);
    padding: 13px 15px;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(28, 34, 48, .07);
}
label { color: var(--ink-soft); font-size: 0.9rem; font-weight: 500; }

/* ------------------------------------------------------- dashboard -- */

.dashboard-layout, .dashboard-body { background: var(--paper); }

.dashboard-sidebar {
    background: var(--card);
    border-right: 1px solid var(--line);
}
.dashboard-sidebar a, .sidebar-link {
    color: var(--ink-soft);
    border-radius: var(--r-sm);
    font-weight: 500;
}
.dashboard-sidebar a:hover, .sidebar-link:hover { background: var(--paper-deep); color: var(--ink); }
.dashboard-sidebar a.active, .sidebar-link.active {
    background: var(--ink);
    color: var(--paper);
}

.dashboard-section {
    padding: 26px;
    margin-bottom: 20px;
}
.dashboard-section h2 { font-size: 1.32rem; margin-bottom: 4px; }
.dashboard-section .section-hint { color: var(--ink-faint); font-size: 0.88rem; }

/* The upload area is the one place the coral belongs on this page. */
.upload-zone, .dropzone, #dropZone {
    background: var(--card);
    border: 2px dashed var(--line);
    border-radius: var(--r-xl);
    color: var(--ink-soft);
    transition: border-color .2s ease, background-color .2s ease;
}
.upload-zone:hover, .dropzone:hover, #dropZone:hover,
.upload-zone.dragover, .dropzone.dragover, #dropZone.dragover {
    border-color: var(--coral);
    background: #FFF7F3;
}
.upload-icon, .dropzone svg { color: var(--coral); }

/* Usage meters. */
.usage-bar, .progress-bar, .meter { background: var(--line); border-radius: 999px; }
.usage-bar > *, .progress-bar > *, .meter > * {
    background: var(--ink);
    border-radius: 999px;
}
.usage-bar.is-low > *, .meter.is-low > * { background: var(--coral); }

/* Transcript table. */
.transcriptions-table, .stw-table { border-collapse: separate; border-spacing: 0; }
.transcriptions-table th, .stw-table th {
    background: transparent;
    color: var(--ink-faint);
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}
.transcriptions-table td, .stw-table td {
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink);
    font-size: 0.93rem;
}
.transcriptions-table tr:hover td { background: var(--paper-deep); }

/* Status pills. */
.status-badge {
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 4px 11px;
    border: 1px solid transparent;
}
.status-badge.status-completed { background: #E4F1EA; color: #1F6B4A; }
.status-badge.status-processing,
.status-badge.status-pending,
.status-badge.status-queued { background: var(--note); color: #7A5E13; }
.status-badge.status-failed, .status-badge.status-error { background: #FBE5E3; color: #9C2B22; }

/* ---------------------------------------------------- billing pages -- */

.v5-checkout-card, .v5-checkout-sidebar { padding: 28px; }
.price-item { color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.price-item.savings span:last-child { color: var(--ok); }
.price-total {
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--serif);
    font-weight: 700;
}
.billing-toggle label {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.billing-toggle input:checked + label {
    border-color: var(--ink);
    background: var(--card-raised);
}

/* ------------------------------------------------- Black Friday strip -- */

.stw-promo-strip { background: var(--studio); color: var(--on-studio); border-radius: var(--r); }
.stw-promo-tag { background: var(--highlight); color: var(--ink); }
.stw-promo-text strong { color: var(--highlight); }
.stw-promo-left { color: #9FB0C9; }
.v5-promo-note { color: var(--ink-faint); }

/* ----------------------------------------------------------- legal -- */

.v5-legal-header h1 { font-family: var(--serif); color: var(--ink); }
.v5-legal-section h2 { font-family: var(--serif); }
.v5-legal-section p, .v5-legal-section li { color: var(--ink-soft); }
.v5-legal-section ul.v5-features li::before { background: var(--coral); }
.v5-legal-section a { color: var(--coral); }

/* ---------------------------------------------------------- footer -- */

footer, .site-footer {
    background: var(--studio);
    color: var(--on-studio);
    border-top: none;
}
footer h3, footer h4, .site-footer h3, .site-footer h4 {
    font-family: var(--sans);
    color: var(--on-studio);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
footer a, .site-footer a { color: #AFB8C6; text-decoration: none; }
footer a:hover, .site-footer a:hover { color: var(--highlight); }
footer p, .site-footer p { color: #8893A4; }
.footer-brand, .footer-logo {
    font-family: var(--serif);
    color: var(--on-studio);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------- details -- */

.transcript-tooltip.stw-lock {
    background: var(--card);
    border-color: var(--line);
    border-radius: var(--r);
}
.transcript-tooltip.stw-lock .stw-lock-cta { background: var(--note); border-top-color: #EBD79C; }
.transcript-tooltip.stw-lock .stw-lock-btn { background: var(--ink); }
.transcript-tooltip.stw-lock .stw-lock-btn:hover { background: #0F131C; }
.transcript-tooltip.stw-lock .stw-lock-veil span { background: var(--line); }

.dashboard-section.stw-section-focus { animation: stwSectionFocusPaper 1.2s ease-out; }
@keyframes stwSectionFocusPaper {
    0%   { box-shadow: 0 0 0 3px rgba(238, 82, 52, .35); }
    100% { box-shadow: 0 0 0 3px rgba(238, 82, 52, 0); }
}

/* Anything the old sheet still paints blue. */
[style*="#4A90E2"], [style*="#2563EB"] { color: inherit; }
.v5-btn-primary { background-color: var(--ink) !important; }

@media (max-width: 760px) {
    .v5-card { padding: 24px 20px; }
    .dashboard-section { padding: 20px 16px; }
    .v5-amount { font-size: 2.1rem; }
}

/* =====================================================================
   The hero and its uploader.

   That block is a self-contained component with its own local variables,
   so most of it is re-themed by redefining those; what is left are the
   places it paints a blue gradient by hand.

   Every selector here is prefixed with `body`. The hero's own rules live
   in a <style> block further down index.php than this file's <link>, so
   on equal specificity they would win; the extra element lifts these
   above them without resorting to !important.
   ===================================================================== */

body .stw-hero {
    --ink: #1C2230;
    --ink-2: #5C6270;
    --brand: #EE5234;
    --brand-2: #F4785E;
    --tint: #F8E6A8;
    --line: #E3D9C8;
    --card: #FFFCF6;
    background: #F4EEE3;
    font-family: var(--sans);
}

/* Warm, slow light instead of two blue blobs. */
body .stw-hero-bg {
    background:
        radial-gradient(44% 38% at 80% 16%, rgba(238, 82, 52, .10), transparent 68%),
        radial-gradient(40% 36% at 10% 84%, rgba(255, 217, 90, .24), transparent 70%);
}

body .stw-eyebrow {
    color: #7A5E13;
    background: #F8E6A8;
    border-color: #EBD79C;
    letter-spacing: .13em;
}

body .stw-h1 {
    font-family: var(--serif);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.06;
}
body .stw-h1-accent {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #EE5234;
    -webkit-text-fill-color: #EE5234;
}

body .stw-chip-k { font-family: var(--serif); font-weight: 700; }
body .stw-chips li { background: #FFFCF6; backdrop-filter: none; }
body .stw-trust { color: #9A9CA3; }
body .stw-sub { color: #5C6270; }
body .stw-sub strong { color: #1C2230; }

body .stw-drop-card {
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(28, 34, 48, .04), 0 20px 48px -18px rgba(28, 34, 48, .18);
}

/* The equaliser behind the card: coral, and quieter. */
body .stw-eq { opacity: .10; }
body .stw-eq i { background: linear-gradient(180deg, #EE5234, rgba(238, 82, 52, .3)); }

body .stw-dropzone {
    border: 2px dashed #E3D9C8;
    border-radius: 20px;
    background: linear-gradient(180deg, #FFFDF8, #F7F1E6);
}
body .stw-dropzone:hover,
body .stw-dropzone:focus-visible,
body .stw-dropzone.is-over {
    border-color: #EE5234;
    background: linear-gradient(180deg, #FFF9F6, #FDEEE8);
    box-shadow: 0 12px 30px -16px rgba(238, 82, 52, .55);
}
body .stw-zone-icon { color: #EE5234; }
body .stw-zone-title { font-family: var(--serif); font-weight: 700; font-size: 19px; }
body .stw-zone-sub,
body .stw-note,
body .stw-legal,
body .stw-formats-label { color: #9A9CA3; }
body .stw-legal a { color: #5C6270; }
body .stw-fmt { background: #FFFCF6; border-color: #E3D9C8; color: #5C6270; }

body .stw-filechip { background: #F8E6A8; border-color: #EBD79C; }
body .stw-change { color: #EE5234; }
body .stw-form-title { font-family: var(--serif); font-weight: 700; }

body .stw-input { border-color: #E3D9C8; background: #FFFFFF; }
body .stw-input:focus { border-color: #1C2230; box-shadow: 0 0 0 3px rgba(28, 34, 48, .08); }

/* One coral button on the page: the one that starts a transcript. */
body .stw-submit {
    background: #EE5234;
    box-shadow: 0 10px 24px -12px rgba(238, 82, 52, .8);
    font-family: var(--sans);
}
body .stw-submit:hover {
    background: #D8401F;
    box-shadow: 0 14px 30px -12px rgba(238, 82, 52, .9);
}
/* The sweep across the button belonged to a different kind of site. */
body .stw-submit::after { display: none; }

body .stw-spinner { border-color: #E3D9C8; border-top-color: #EE5234; }
body .stw-error { color: #9C2B22; background: #FBE5E3; border-color: #F3CFCA; }

/* =====================================================================
   The remaining bands on the homepage.

   Each of these was its own small design - a white strip, a blue-green
   wash, an indigo gradient - which is what made the page read as several
   sites stacked on top of each other. They are all paper now, separated
   by a line rather than by a colour, except the one feature band that
   earns a dark surface.
   ===================================================================== */

body .trust-strip,
body .capacity-section {
    background: #FFFCF6;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
body .trust-strip svg,
body .trust-strip i { color: var(--coral); }

body .social-proof-strip {
    background: var(--paper-deep);
    background-image: none;
    border-bottom: 1px solid var(--line);
    color: var(--ink-soft);
}
body .social-proof-strip strong,
body .social-proof-strip b { color: var(--ink); }

/* The lyrics feature is the one band that goes dark: it is a different
   kind of job from transcription and the contrast says so. */
body .lyrics-feature {
    background: var(--studio);
    background-image: none;
    color: var(--on-studio);
}
body .lyrics-feature h2,
body .lyrics-feature h3 { color: var(--on-studio); font-family: var(--serif); }
body .lyrics-feature p,
body .lyrics-feature li { color: #AFB8C6; }
body .lyrics-feature .badge-pill,
body .lyrics-feature .eyebrow,
body .lyrics-feature .feature-badge {
    background: rgba(255, 217, 90, .16);
    color: var(--highlight);
    border: none;
}
body .lyrics-feature a.btn,
body .lyrics-feature .btn-brand-primary,
body .lyrics-feature .v5-btn-primary {
    background: var(--highlight) !important;
    color: var(--ink) !important;
    border-color: var(--highlight) !important;
}
body .lyrics-feature .lyrics-card,
body .lyrics-feature .feature-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(244, 238, 227, .14);
    color: var(--on-studio);
}

body .home-faq { background: var(--paper-deep); }
body .home-faq .faq-item { background: var(--card); }

body .footer { background: var(--studio); }

/* =====================================================================
   The last of the cool greys.

   Most of what still looked wrong was not blue but slate - #2E3B4E,
   #64748b, #94A3B8 - the cool grey family the old theme was built on.
   Beside warm paper those read as a different, colder page, so each one
   is answered with its warm equivalent rather than left to drift.
   ===================================================================== */

body .v5-desc,
body .pricing-footnote,
body .swiss-subtitle,
body .swiss-trust-row { color: var(--ink-soft); }

body .v5-features li::before { background: var(--coral); }

body .avatar-color-1 { background: #F8E6A8; color: #7A5E13; }
body .avatar-color-2 { background: #F7DCD3; color: #9C4A32; }
body .avatar-color-3 { background: #E4EDE6; color: #2E6B4F; }
body .avatar-color-4 { background: #EFE7DA; color: #6B6246; }
body .avatar-color-5 { background: #1C2230; color: #F4EEE3; }

body .mobile-sticky-cta,
body .mobile-sticky-cta-btn {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
body .mobile-sticky-cta-btn:hover { background: #0F131C; }

/* The job statuses, wherever they are drawn. */
body .status-completed { background: #E4F1EA; color: #1F6B4A; }
body .status-processing,
body .status-pending,
body .status-queued { background: #F8E6A8; color: #7A5E13; }
body .status-failed,
body .status-error { background: #FBE5E3; color: #9C2B22; }

/* The old Swiss hero is no longer rendered, but if it ever is, it should
   not arrive in the previous palette. */
body .swiss-hero,
body .swiss-hero-container,
body .swiss-hero-left,
body .swiss-visual-box { border-color: var(--line); background-image: none; }
body .swiss-cta-btn { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* =====================================================================
   The dashboard.

   Its styles live in a <style> block inside dashboard.php, below this
   file's <link>, so everything here carries the extra `body` to win on
   specificity rather than with !important.

   The shape of the page is unchanged - the pollers and the upload code
   depend on these class names - but the surfaces, the type and the one
   accent are the app's.
   ===================================================================== */

body .dashboard-section h2,
body .stat-card p, body .stat-value,
body .minutes-count, body .upload-text,
body .file-details h4, body .file-stats p strong,
body .language-select label, body .language-select select,
body .form-group label, body .form-group input,
body .settings-card h3, body .info-row span,
body .data-table th, body .v5-card h3,
body .stw-fb-dialog h3, body .stw-fb-reason { color: var(--ink); }

body .dashboard-section h2,
body .settings-card h3,
body .v5-card h3 { font-family: var(--serif); letter-spacing: -0.02em; }

body .stat-card h3, body .stat-label,
body .form-group small, body .info-row label,
body .cancel-subscription-link, body .v5-desc,
body .stw-fb-lead, body .stw-fb-btn { color: var(--ink-faint); }

body .data-table th {
    color: var(--ink-faint);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    border-bottom-color: var(--line);
}
body .data-table td { border-bottom-color: var(--line-soft); }

body .sidebar-nav a:hover { color: var(--ink); background: var(--paper-deep); }
body .sidebar-nav a.active {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
}
body .sidebar-nav .sidebar-upgrade-btn {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
}
body .sidebar-nav .sidebar-upgrade-btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

body .btn-primary, body .v5-btn-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
body .btn-primary:hover, body .v5-btn-primary:hover { background: #0F131C; }
body .btn-secondary, body .v5-btn-secondary {
    color: var(--ink);
    border-color: var(--line);
    background: transparent;
}
body .download-dropdown-menu a:hover { background: var(--paper-deep); color: var(--ink); }

/* The trial banner is a note pinned to the page, not another blue card. */
body .trial-status {
    background: var(--note);
    border: 1px solid #EBD79C;
    border-radius: var(--r-lg);
}
body .trial-status h3 { color: var(--ink); font-family: var(--serif); }
body .trial-status p { color: #6B6246; }

/* Upload: the one coral thing on the page. */
body .upload-box {
    background: var(--card);
    border: 2px dashed var(--line);
    border-radius: var(--r-xl);
}
body .upload-box:hover, body .upload-box.drag-over {
    border-color: var(--coral);
    background: #FFF9F6;
}
body .upload-icon, body .selected-file, body .file-stats p span { color: var(--coral); }
body .upload-progress-bar { background: var(--coral); }
body .minutes-used { color: var(--coral); }

body .transcribe-btn {
    background: var(--coral);
    border-color: var(--coral);
    color: #fff;
}
body .transcribe-btn:hover { background: var(--coral-deep); border-color: var(--coral-deep); }

body .language-select select:focus,
body .form-group input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(28, 34, 48, .07);
}

body .v5-amount { color: var(--ink); font-family: var(--serif); }
body .v5-period, body .v5-features li::before { color: var(--ink-faint); }
body .v5-features li::before { background: var(--coral); }
body .v5-status-dot { background: var(--ink-faint); }
body .v5-card.basic-card .v5-status-dot,
body .v5-card.pro-card .v5-status-dot { background: var(--coral); }

body .stw-fb-btn:hover { color: var(--coral); }