@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&display=swap');

:root {
    --navy: #0d2638;
    --navy-2: #17384e;
    --ink: #183042;
    --muted: #66727c;
    --ivory: #f7f3ea;
    --paper: #fffdf8;
    --gold: #d6ae58;
    --gold-dark: #a77c27;
    --line: #ddd7ca;
    --soft: #efe9dd;
    --white: #ffffff;
    --shadow: 0 18px 45px rgba(23, 41, 53, 0.08);
    --radius: 14px;
    --serif: Georgia, 'Times New Roman', serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--ivory);
    line-height: 1.6;
}
a { color: inherit; }
.container { width: min(1120px, calc(100% - 36px)); margin-inline: auto; }
.narrow { width: min(860px, calc(100% - 36px)); }

.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { text-decoration: none; font: 700 1.45rem/1 var(--serif); color: var(--navy); }
.main-nav { display: flex; gap: 24px; align-items: center; }
.main-nav a { text-decoration: none; font-size: .92rem; padding: 7px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a.active { color: var(--navy); border-color: var(--gold); }

.hero { background: linear-gradient(135deg, #0b2232, #14384f); color: var(--white); }
.hero-grid { min-height: 520px; display: grid; grid-template-columns: 1.35fr .85fr; align-items: stretch; }
.hero-copy { padding: 86px 8vw 78px 0; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { margin: 0 0 14px; letter-spacing: .18em; font-size: .76rem; font-weight: 800; color: #f1d790; }
.eyebrow.dark { color: var(--gold-dark); }
.hero h1, .dictionary-hero h1 { margin: 0; font: 700 clamp(3rem, 7vw, 5.4rem)/.98 var(--serif); }
.hero-subtitle { margin: 18px 0 0; max-width: 640px; font: 400 clamp(1.25rem, 2.8vw, 2rem)/1.25 var(--serif); color: #eef2f4; }
.gold-rule { width: 62px; height: 3px; background: var(--gold); margin: 28px 0; }
.hero-text { max-width: 550px; font-size: 1.08rem; color: #dce5e9; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 8px; padding: 13px 19px; font: 700 .96rem/1 var(--sans); text-decoration: none; cursor: pointer; }
.button-gold { align-self: flex-start; margin-top: 18px; color: #2d2718; background: var(--gold); box-shadow: 0 10px 25px rgba(0,0,0,.14); }
.button-gold:hover { background: #e1bc68; }
.button-navy { background: var(--navy); color: var(--white); min-width: 120px; }
.button-navy:hover { background: var(--navy-2); }

.hero-panel { background: rgba(6, 21, 31, .44); border-left: 1px solid rgba(255,255,255,.12); padding: 78px 48px; display: flex; flex-direction: column; justify-content: center; }
.panel-kicker { letter-spacing: .15em; font-size: .72rem; color: #d8bd76; font-weight: 800; }
.hero-panel h2 { font: 700 2rem/1.15 var(--serif); margin: 8px 0 18px; }
.hero-panel p { color: #d5dee2; }
.panel-stat { border-top: 1px solid rgba(255,255,255,.18); margin-top: 24px; padding-top: 22px; display: grid; gap: 4px; }
.stat-label { color: #adbac1; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

.cards-section { padding: 76px 0; }
.section-heading { max-width: 650px; margin-bottom: 30px; }
.section-heading h2, .results-header h2, .dictionary-intro h2 { font: 700 2.2rem/1.15 var(--serif); color: var(--navy); margin: 0; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; min-height: 250px; text-decoration: none; box-shadow: 0 8px 25px rgba(27,48,62,.04); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.feature-card-active:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #c9b47d; }
.feature-icon { width: 48px; height: 48px; border: 1px solid #c7b57d; display: grid; place-items: center; border-radius: 50%; color: var(--navy); font: 700 1.1rem var(--serif); }
.feature-card h3 { font: 700 1.45rem/1.2 var(--serif); color: var(--navy); margin: 22px 0 10px; }
.feature-card p { color: var(--muted); }
.card-link { color: var(--gold-dark); font-weight: 800; }
.muted-card { opacity: .68; }
.coming-soon { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.quote-section { padding: 0 0 80px; }
.quote-card { background: var(--paper); border: 1px solid var(--line); padding: 42px; text-align: center; }
.quote-card p { margin: 0; font: italic 1.55rem/1.45 var(--serif); color: var(--navy); }
.quote-card span { display: block; margin-top: 14px; color: var(--muted); }

.site-footer { background: var(--navy); color: #dce5e9; padding: 34px 0; }
.footer-wrap { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.footer-wrap strong { color: var(--white); font-family: var(--serif); font-size: 1.2rem; }
.footer-wrap p { margin: 5px 0 0; font-size: .86rem; color: #aab8c0; }
.footer-wrap a { text-decoration: none; color: #f0d890; }

.dictionary-page { min-height: calc(100vh - 180px); }
.dictionary-hero { background: var(--navy); color: var(--white); padding: 66px 0 76px; }
.dictionary-hero h1 { font-size: clamp(2.8rem, 6vw, 4.4rem); }
.dictionary-hero p:last-child { color: #d0dbe1; font-size: 1.08rem; }
.search-shell { margin-top: -34px; padding-bottom: 80px; }
.search-card { background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); padding: 26px; }
.direction-switcher { border: 0; padding: 0; margin: 0 0 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.direction-option input { position: absolute; opacity: 0; pointer-events: none; }
.direction-option span { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px; background: #fbfaf6; cursor: pointer; font-size: .9rem; }
.direction-option input:checked + span { border-color: var(--gold-dark); background: #f4ead2; color: var(--navy); font-weight: 800; }
.search-label { display: block; font-weight: 800; margin-bottom: 8px; color: var(--navy); }
.search-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search-row input { width: 100%; border: 1px solid #cfc9bc; border-radius: 8px; background: var(--white); padding: 14px 15px; font: inherit; color: var(--ink); }
.search-row input:focus { outline: 3px solid rgba(214,174,88,.22); border-color: var(--gold-dark); }
.search-hint { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }
.results-header { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 42px 0 18px; }
.results-header p { color: var(--muted); }
.result-list { display: grid; gap: 12px; }
.result-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; }
.result-source { margin: 0; font: 700 1.35rem/1.3 var(--serif); color: var(--navy); }
.result-target { margin: 8px 0 0; font-size: 1.04rem; }
.category-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 260px; }
.category-list span { border: 1px solid #ded4bb; background: #f7f0dd; color: #6e5924; padding: 4px 8px; border-radius: 999px; font-size: .72rem; }
.empty-state, .dictionary-intro, .notice { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 30px; margin-top: 36px; }
.empty-state h3 { margin-top: 0; font-family: var(--serif); color: var(--navy); }
.notice-error { border-color: #d6aaa6; background: #fff7f5; color: #7d2e28; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-copy { padding: 70px 0 58px; }
    .hero-panel { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: 38px 0 46px; background: transparent; }
    .cards-grid { grid-template-columns: 1fr; }
    .feature-card { min-height: auto; }
    .footer-wrap, .results-header { align-items: flex-start; }
    .result-card { flex-direction: column; }
    .category-list { justify-content: flex-start; max-width: none; }
}

@media (max-width: 560px) {
    .container, .narrow { width: min(100% - 24px, 1120px); }
    .nav-wrap { min-height: 64px; }
    .main-nav { gap: 14px; }
    .hero-copy { padding-top: 54px; }
    .hero-panel { padding-bottom: 40px; }
    .cards-section { padding: 54px 0; }
    .search-row { grid-template-columns: 1fr; }
    .button-navy { width: 100%; }
    .results-header, .footer-wrap { flex-direction: column; }
    .quote-card { padding: 30px 20px; }
}

.study-page { min-height: calc(100vh - 180px); }
.study-hero { background: var(--navy); color: var(--white); padding: 62px 0 74px; }
.study-hero h1 { margin: 0; font: 700 clamp(2.7rem, 6vw, 4.25rem)/1 var(--serif); }
.study-hero p:last-child { max-width: 700px; color: #d0dbe1; font-size: 1.05rem; }
.study-shell { margin-top: -32px; padding-bottom: 80px; }
.study-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; }
.study-card-topline { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .84rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.countdown { color: var(--gold-dark); text-align: right; }
.study-prompt { padding: 54px 0 44px; text-align: center; }
.study-label { margin: 0 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 800; }
.study-prompt h2 { max-width: 690px; margin: 0 auto; color: var(--navy); font: 700 clamp(2.2rem, 7vw, 4rem)/1.15 var(--serif); }
.translation-panel { border-top: 1px solid var(--line); padding: 30px 0 8px; text-align: center; }
.translation-panel.translation-visible { animation: translationReveal .42s ease both; }
.translation-text { margin: 0; color: var(--ink); font: 400 clamp(1.4rem, 4vw, 2rem)/1.35 var(--serif); }
.study-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.study-categories span { border: 1px solid #ded4bb; background: #f7f0dd; color: #6e5924; padding: 5px 9px; border-radius: 999px; font-size: .74rem; }
.study-actions { display: flex; justify-content: center; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--line); }
.study-actions .button { min-width: 160px; }
.study-note { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: .84rem; }

@keyframes translationReveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .translation-panel.translation-visible { animation: none; }
}

@media (max-width: 560px) {
    .study-card { padding: 22px 18px; }
    .study-card-topline { align-items: flex-start; }
    .study-prompt { padding: 44px 0 36px; }
    .study-actions .button { width: 100%; }
}

/* Compact study layout: keeps the vocabulary card high in the viewport. */
.compact-nav { min-height: 62px; }
.compact-study-page { min-height: calc(100vh - 150px); padding-top: 0; }
.study-heading-compact {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    padding-bottom: 16px;
}
.study-heading-compact .eyebrow { margin-bottom: 5px; }
.study-heading-compact h1 {
    margin: 0;
    color: var(--navy);
    font: 700 clamp(1.8rem, 4vw, 2.45rem)/1.05 var(--serif);
}
.study-direction {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.study-direction a {
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    padding: 7px 11px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 700;
}
.study-direction a:hover,
.study-direction a.active {
    border-color: var(--gold-dark);
    background: #f4ead2;
    color: var(--navy);
}
.compact-study-shell {
    margin-top: 0;
    padding-bottom: 42px;
}
.compact-study-prompt { padding: 38px 0 32px; }
.compact-study-footer { padding: 24px 0; }

@media (max-width: 700px) {
    .study-heading-compact {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-top: 16px;
        padding-bottom: 12px;
    }
    .study-direction { justify-content: flex-start; }
    .compact-study-prompt { padding: 32px 0 28px; }
}

@media (max-width: 560px) {
    .compact-nav { min-height: 58px; }
    .study-heading-compact h1 { font-size: 1.75rem; }
    .study-direction { width: 100%; }
    .study-direction a { flex: 1 1 auto; text-align: center; }
    .compact-study-shell { padding-bottom: 28px; }
    .compact-study-footer { padding: 20px 0; }
}

/* Mobile study-mode optimization: keep the complete practice cycle in view. */
@media (max-width: 560px) {
    body:has(.compact-study-page) {
        line-height: 1.45;
    }

    .compact-nav {
        min-height: 52px;
    }

    .compact-nav .brand {
        font-size: 1.25rem;
    }

    .compact-nav .main-nav {
        gap: 10px;
    }

    .compact-nav .main-nav a {
        font-size: .82rem;
        padding-block: 5px;
    }

    .study-heading-compact {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 10px 12px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .study-heading-compact .eyebrow {
        display: none;
    }

    .study-heading-compact h1 {
        font-size: 1.32rem;
        white-space: nowrap;
    }

    .study-direction {
        width: auto;
        justify-content: flex-end;
        gap: 5px;
    }

    .study-direction a {
        flex: 0 1 auto;
        padding: 5px 7px;
        font-size: .68rem;
        line-height: 1.2;
    }

    .compact-study-shell {
        padding-bottom: 16px;
    }

    .study-card {
        padding: 14px 14px 13px;
        border-radius: 11px;
    }

    .study-card-topline {
        gap: 8px;
        padding-bottom: 10px;
        font-size: .68rem;
        line-height: 1.25;
        letter-spacing: .055em;
    }

    .countdown {
        max-width: none;
        flex: 0 0 auto;
        white-space: nowrap;
        line-height: 1.25;
    }

    .study-card-topline > span:first-child {
        min-width: 0;
        white-space: nowrap;
    }

    .compact-study-prompt {
        padding: 23px 0 20px;
    }

    .study-label {
        margin-bottom: 5px;
        font-size: .66rem;
    }

    .study-prompt h2 {
        font-size: clamp(1.75rem, 9vw, 2.45rem);
        line-height: 1.08;
    }

    .translation-panel {
        padding: 17px 0 2px;
    }

    .translation-text {
        font-size: clamp(1.2rem, 6vw, 1.55rem);
        line-height: 1.2;
    }

    .study-categories {
        gap: 4px;
        margin-top: 12px;
    }

    .study-categories span {
        padding: 3px 6px;
        font-size: .64rem;
    }

    .study-actions {
        margin-top: 14px;
        padding-top: 13px;
    }

    .study-actions .button {
        min-width: 0;
        width: 100%;
        padding: 11px 15px;
        font-size: .9rem;
    }

    .compact-study-footer {
        padding: 14px 0;
    }
}

/* Extra-tight layout for shorter phone screens. */
@media (max-width: 560px) and (max-height: 720px) {
    .compact-nav {
        min-height: 48px;
    }

    .study-heading-compact {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .study-heading-compact h1 {
        font-size: 1.18rem;
    }

    .study-direction a {
        padding: 4px 6px;
        font-size: .63rem;
    }

    .study-card {
        padding: 11px 12px;
    }

    .study-card-topline {
        padding-bottom: 8px;
    }

    .compact-study-prompt {
        padding: 17px 0 15px;
    }

    .translation-panel {
        padding-top: 13px;
    }

    .study-categories {
        margin-top: 9px;
    }

    .study-actions {
        margin-top: 10px;
        padding-top: 10px;
    }
}

/* Long study text safety: keep unusually long words/expressions inside the card. */
.study-prompt h2,
.translation-text {
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

/* Mobile status refinement + room for the future Puter listen action. */
.study-actions {
    gap: 10px;
    flex-wrap: wrap;
}

/* When audio is added, place Listen and Next word together without growing the card unnecessarily. */
.study-actions.has-audio .button {
    flex: 1 1 150px;
}

@media (max-width: 560px) {
    /* The direction is already obvious from the selector immediately above the card.
       Hiding the duplicate label gives the countdown/status the full card width. */
    .study-card-topline > span:first-child {
        display: none;
    }

    .study-card-topline {
        justify-content: center;
        padding-bottom: 8px;
        min-height: 25px;
    }

    .countdown {
        width: 100%;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: .7rem;
    }

    /* Audio-ready action layout: once the Puter button is enabled, both controls
       can share one row on normal phones and stack only on very narrow screens. */
    .study-actions.has-audio {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .study-actions.has-audio .button {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }
}

@media (max-width: 360px) {
    .study-actions.has-audio {
        grid-template-columns: 1fr;
    }
}


/* Mobile direction-row refinement:
   keep the study title on its own line and both translation directions
   together in one compact row directly beneath it. */
@media (max-width: 560px) {
    .study-heading-compact {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        align-items: stretch;
    }

    .study-heading-compact > div {
        width: 100%;
    }

    .study-heading-compact h1 {
        white-space: normal;
    }

    .study-direction {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .study-direction a {
        width: 100%;
        min-width: 0;
        padding: 6px 5px;
        text-align: center;
        white-space: nowrap;
        font-size: .67rem;
    }
}

@media (max-width: 360px) {
    .study-direction a {
        font-size: .61rem;
        padding-inline: 3px;
    }
}

/* Puter text-to-speech action. */
.button-audio {
    appearance: none;
    border: 1px solid var(--navy);
    background: transparent;
    color: var(--navy);
    cursor: pointer;
    font: inherit;
}

.button-audio:hover:not(:disabled) {
    background: rgba(20, 39, 64, .06);
}

.button-audio:disabled {
    cursor: not-allowed;
    opacity: .42;
}

.button-audio span {
    margin-right: 5px;
}

@media (max-width: 560px) {
    .study-actions.has-audio .button {
        white-space: nowrap;
        padding: 10px 8px;
        font-size: .84rem;
    }
}

/* During the five-second recall period, only Next word is shown. Once the
   translation is revealed, JavaScript exposes Listen and the two actions share
   the prepared row. */
@media (max-width: 560px) {
    .study-actions.has-audio.audio-pending {
        grid-template-columns: 1fr;
    }
}


/* Mobile study actions: Listen + Next word always share one responsive row. */
@media (max-width: 560px) {
    .study-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        align-items: stretch;
    }

    .study-actions .button,
    .study-actions button,
    .study-actions a {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
        white-space: nowrap;
        text-align: center;
    }

    /* When Listen is still hidden, Next word may use the full row. */
    .study-actions:has([hidden]) {
        grid-template-columns: 1fr;
    }

    .study-actions [hidden] {
        display: none !important;
    }
}

@media (max-width: 360px) {
    .study-actions {
        gap: 6px;
    }

    .study-actions .button,
    .study-actions button,
    .study-actions a {
        padding-left: 5px;
        padding-right: 5px;
        font-size: .78rem;
    }
}


/* Strong mobile action layout override:
   keep Listen and Next word on one row at all mobile widths. */
@media (max-width: 560px) {
    .study-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .study-actions > * {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    .study-actions .button,
    .study-actions button,
    .study-actions a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        white-space: nowrap !important;
        text-align: center !important;
        font-size: .82rem !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 380px) {
    .study-actions {
        gap: 6px !important;
    }

    .study-actions .button,
    .study-actions button,
    .study-actions a {
        padding-inline: 4px !important;
        font-size: .74rem !important;
    }
}


/* Phrase study refinements. Phrases can be substantially longer than vocabulary
   items, so typography scales more conservatively while preserving the same card. */
.phrase-study-prompt h2 {
    font-size: clamp(1.7rem, 4.5vw, 2.65rem);
    line-height: 1.14;
}

.phrase-notes {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.phrase-notes p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

@media (max-width: 560px) {
    .phrase-study-prompt {
        padding-top: 16px;
        padding-bottom: 14px;
    }

    .phrase-study-prompt h2 {
        font-size: clamp(1.28rem, 6.2vw, 1.8rem);
        line-height: 1.14;
    }

    .phrase-study-card .translation-text {
        font-size: clamp(1.05rem, 5.1vw, 1.35rem);
    }

    .phrase-notes {
        margin-top: 9px;
        padding-top: 8px;
        font-size: .82rem;
    }
}


/* Vocabulary category selector */
.category-picker {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.category-picker label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.category-picker select {
    min-width: 220px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper, #fffdf8);
    color: var(--navy);
    padding: 8px 34px 8px 10px;
    font: inherit;
}

@media (max-width: 560px) {
    .category-picker {
        gap: 6px;
        margin-top: 0;
    }

    .category-picker label {
        font-size: .62rem;
    }

    .category-picker select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        padding: 6px 28px 6px 8px;
        font-size: .72rem;
    }
}


/* Vocabulary controls: direction + category share one row above the title. */
.vocabulary-controls-section {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr);
    gap: 12px;
    align-items: center;
    padding-top: 18px;
    padding-bottom: 8px;
}

.vocabulary-controls-section .study-direction {
    display: flex;
    gap: 7px;
    width: auto;
}

.vocabulary-controls-section .category-picker {
    display: block;
    margin: 0;
    min-width: 0;
}

.vocabulary-controls-section .category-picker select {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.vocabulary-title-section {
    padding-top: 4px;
    padding-bottom: 8px;
}

.vocabulary-title-section .eyebrow {
    margin-bottom: 3px;
}

.vocabulary-title-section h1 {
    margin: 0;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (max-width: 560px) {
    .vocabulary-controls-section {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        padding-top: 7px;
        padding-bottom: 5px;
    }

    .vocabulary-controls-section .study-direction {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .vocabulary-controls-section .category-picker {
        grid-column: 1 / -1;
    }

    .vocabulary-controls-section .category-picker select {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: .72rem;
    }

    .vocabulary-title-section {
        padding-top: 1px;
        padding-bottom: 5px;
    }

    .vocabulary-title-section .eyebrow {
        display: none;
    }

    .vocabulary-title-section h1 {
        font-size: 1.18rem;
    }
}


/* Final vocabulary heading/control order */
.vocabulary-title-section {
    padding-top: 14px;
    padding-bottom: 6px;
}

.vocabulary-title-section .eyebrow {
    margin: 0 0 3px;
}

.vocabulary-title-section h1 {
    margin: 0;
    text-transform: uppercase;
}

.vocabulary-controls-section {
    padding-top: 4px;
    padding-bottom: 8px;
}

@media (min-width: 561px) {
    .vocabulary-controls-section {
        display: grid;
        grid-template-columns: auto minmax(240px, 1fr);
        gap: 12px;
        align-items: center;
    }

    .vocabulary-controls-section .study-direction {
        display: flex;
        gap: 7px;
        width: auto;
    }

    .vocabulary-controls-section .category-picker {
        margin: 0;
        min-width: 0;
    }

    .vocabulary-controls-section .category-picker select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .vocabulary-title-section {
        padding-top: 7px;
        padding-bottom: 4px;
    }

    .vocabulary-title-section .eyebrow {
        display: block;
        font-size: .62rem;
        margin-bottom: 2px;
    }

    .vocabulary-title-section h1 {
        font-size: 1.12rem;
        line-height: 1.1;
    }

    .vocabulary-controls-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding-top: 2px;
        padding-bottom: 5px;
    }

    .vocabulary-controls-section .study-direction {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .vocabulary-controls-section .category-picker {
        width: 100%;
        margin: 0;
    }
}


/* Phrase title and category controls, matching Vocabulary. */
.phrase-title-section {
    padding-top: 14px;
    padding-bottom: 6px;
}

.phrase-title-section .eyebrow {
    margin: 0 0 3px;
}

.phrase-title-section h1 {
    margin: 0;
    text-transform: uppercase;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.phrase-controls-section {
    padding-top: 4px;
    padding-bottom: 8px;
}

.phrase-controls-section .category-picker {
    margin: 0;
}

@media (min-width: 561px) {
    .phrase-controls-section {
        display: grid;
        grid-template-columns: auto minmax(240px, 1fr);
        gap: 12px;
        align-items: center;
    }

    .phrase-controls-section .study-direction {
        display: flex;
        gap: 7px;
        width: auto;
    }

    .phrase-controls-section .category-picker {
        min-width: 0;
    }

    .phrase-controls-section .category-picker select {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (max-width: 560px) {
    .phrase-title-section {
        padding-top: 7px;
        padding-bottom: 4px;
    }

    .phrase-title-section .eyebrow {
        display: block;
        font-size: .62rem;
        margin-bottom: 2px;
    }

    .phrase-title-section h1 {
        font-size: 1.12rem;
        line-height: 1.1;
    }

    .phrase-controls-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding-top: 2px;
        padding-bottom: 5px;
    }

    .phrase-controls-section .study-direction {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
    }

    .phrase-controls-section .category-picker {
        width: 100%;
    }

    .phrase-controls-section .category-picker select {
        width: 100%;
        min-width: 0;
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: .72rem;
    }
}


/* Shared footer navigation */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.footer-links a {
    white-space: nowrap;
}

@media (max-width: 560px) {
    .footer-links {
        gap: 10px;
        font-size: .82rem;
    }
}


/* Learning method */
.method-section {
    padding-top: 54px;
    padding-bottom: 58px;
}

.method-heading {
    max-width: 760px;
}

.method-heading > p:last-child {
    max-width: 700px;
    margin-top: 10px;
}

.method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 28px;
    border: 1px solid var(--border);
    background: var(--surface);
}

.method-step {
    position: relative;
    padding: 28px 26px;
    min-width: 0;
}

.method-step + .method-step {
    border-left: 1px solid var(--border);
}

.method-number {
    display: block;
    margin-bottom: 13px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--gold-dark, #8d6b24);
}

.method-step h3 {
    margin: 0 0 7px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    color: var(--navy);
}

.method-step p {
    margin: 0;
    line-height: 1.6;
}

.method-note {
    margin: 16px 0 0;
    font-size: .9rem;
    color: var(--muted);
}

/* Small study-page help control */
.study-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.practice-help-trigger {
    flex: 0 0 auto;
    border: 0;
    padding: 4px 0;
    background: transparent;
    color: var(--navy);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.practice-help-trigger:hover,
.practice-help-trigger:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.practice-help-trigger span {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .72rem;
    line-height: 1;
}

.practice-help {
    width: min(520px, calc(100% - 28px));
    max-height: calc(100vh - 40px);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 24px 70px rgba(20, 31, 46, .22);
}

.practice-help::backdrop {
    background: rgba(15, 27, 43, .46);
}

.practice-help-inner {
    padding: 25px 27px 26px;
}

.practice-help-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.practice-help-header .eyebrow {
    margin-bottom: 3px;
}

.practice-help-header h2 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    color: var(--navy);
}

.practice-help-close {
    border: 0;
    background: transparent;
    color: var(--navy);
    font-size: 1.65rem;
    line-height: 1;
    cursor: pointer;
}

.practice-help-steps {
    margin: 20px 0 17px;
    padding-left: 22px;
}

.practice-help-steps li + li {
    margin-top: 9px;
}

.practice-help p {
    line-height: 1.6;
}

.practice-help-tip {
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: .9rem;
    color: var(--muted);
}

@media (max-width: 700px) {
    .method-section {
        padding-top: 38px;
        padding-bottom: 40px;
    }

    .method-grid {
        grid-template-columns: 1fr;
        margin-top: 20px;
    }

    .method-step {
        padding: 20px 19px;
    }

    .method-step + .method-step {
        border-left: 0;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 560px) {
    .study-title-row {
        align-items: center;
        gap: 10px;
    }

    .practice-help-trigger {
        font-size: .68rem;
    }

    .practice-help-trigger span {
        width: 18px;
        height: 18px;
    }

    .practice-help-inner {
        padding: 20px 19px 21px;
    }
}


/* Practice help dialog readability fix */
.practice-help {
    background: #fffdf7;
    color: #1d2733;
    border: 1px solid #c9c1b2;
    box-shadow: 0 28px 80px rgba(10, 18, 28, .34);
    opacity: 1;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.practice-help::backdrop {
    background: rgba(10, 18, 28, .68);
}

.practice-help-inner,
.practice-help-header,
.practice-help p,
.practice-help li {
    color: #1d2733;
}

.practice-help-header {
    background: #fffdf7;
}

.practice-help-header h2,
.practice-help-header .eyebrow,
.practice-help-close,
.practice-help strong {
    color: #14253a;
}

.practice-help-tip {
    color: #4e5966;
    border-top-color: #d8d1c5;
}

.practice-help-steps {
    color: #1d2733;
}


/* Landing page resource highlights */
.resource-highlights {
    padding-top: 52px;
    padding-bottom: 24px;
}

.resource-heading {
    max-width: 760px;
}

.resource-heading > p:last-child {
    max-width: 720px;
    margin-top: 10px;
}

.resource-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 26px;
}

.resource-card {
    padding: 24px 22px;
    border: 1px solid var(--border);
    background: #fffdf7;
    min-width: 0;
}

.resource-value {
    display: block;
    margin-bottom: 9px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1;
    color: var(--navy);
}

.resource-card h3 {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 1rem;
}

.resource-card p {
    margin: 0;
    line-height: 1.55;
    color: var(--muted);
}

.practice-help-puter {
    margin-top: 16px;
    padding: 13px 14px;
    border: 1px solid #d8d1c5;
    background: #f7f2e8;
    color: #263445;
    font-size: .9rem;
    line-height: 1.55;
}

.practice-help-puter strong {
    color: #14253a;
}

@media (max-width: 700px) {
    .resource-highlights {
        padding-top: 38px;
        padding-bottom: 12px;
    }

    .resource-grid {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 20px;
    }

    .resource-card {
        padding: 18px 17px;
    }

    .resource-value {
        font-size: 1.65rem;
    }
}


/* Practical orientation on the landing page */
.practical-section {
    padding-top: 18px;
    padding-bottom: 56px;
}

.practical-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
    gap: 34px;
    padding: 30px;
    border: 1px solid var(--border);
    background: #f7f2e8;
}

.practical-copy h2 {
    margin-top: 2px;
    margin-bottom: 12px;
    color: var(--navy);
}

.practical-copy p {
    max-width: 760px;
    line-height: 1.65;
}

.practical-copy p + p {
    margin-top: 10px;
}

.practical-points {
    display: grid;
    align-content: start;
    border-left: 1px solid var(--border);
    padding-left: 26px;
}

.practical-points div {
    padding: 11px 0;
}

.practical-points div + div {
    border-top: 1px solid var(--border);
}

.practical-points strong,
.practical-points span {
    display: block;
}

.practical-points strong {
    margin-bottom: 3px;
    color: var(--navy);
}

.practical-points span {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.45;
}

/* Puter link inside practice help */
.practice-help-puter a {
    color: #14253a;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.practice-help-puter a:hover,
.practice-help-puter a:focus-visible {
    text-decoration-thickness: 2px;
}

@media (max-width: 700px) {
    .practical-section {
        padding-top: 10px;
        padding-bottom: 40px;
    }

    .practical-panel {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 21px 19px;
    }

    .practical-points {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 7px;
    }
}


/* Mobile navigation fix: keep all four links visible without horizontal overflow */
@media (max-width: 700px) {
    .site-header .nav-wrap {
        align-items: flex-start;
        gap: 10px;
    }

    .site-header .main-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 8px;
        width: 100%;
        min-width: 0;
    }

    .site-header .main-nav a {
        display: block;
        min-width: 0;
        padding: 6px 7px;
        text-align: center;
        white-space: nowrap;
        font-size: .78rem;
    }
}

@media (max-width: 430px) {
    .site-header .nav-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .site-header .brand {
        align-self: flex-start;
    }

    .site-header .main-nav {
        width: 100%;
    }
}


/* Compact mobile header: brand on first line, all four links on second line */
@media (max-width: 700px) {
    .site-header .nav-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .site-header .brand {
        align-self: flex-start;
        margin: 0;
        line-height: 1.1;
    }

    .site-header .main-nav {
        display: flex;
        width: 100%;
        gap: 0;
        justify-content: space-between;
        align-items: center;
        min-width: 0;
    }

    .site-header .main-nav a {
        flex: 0 1 auto;
        min-width: 0;
        padding: 4px 2px;
        font-size: .72rem;
        line-height: 1.15;
        text-align: center;
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .site-header .main-nav a {
        font-size: .67rem;
        padding-left: 1px;
        padding-right: 1px;
    }
}


/* Dictionary scope note */
.dictionary-scope-note {
    margin-top: 14px;
    padding: 12px 14px;
    border-left: 3px solid #b08a3e;
    background: #f7f2e8;
    color: #3f4a56;
    font-size: .9rem;
    line-height: 1.5;
}

.dictionary-scope-note strong {
    color: var(--navy);
}

/* Study-page contrast */
.study-page {
    background: #fbfaf6;
}

.study-page .site-header {
    background: #14253a;
    border-bottom-color: rgba(255,255,255,.12);
}

.study-page .site-header .brand,
.study-page .site-header .main-nav a {
    color: #f7f2e8;
}

.study-page .site-header .main-nav a.active {
    color: #d8b96a;
    border-bottom-color: #d8b96a;
}

@media (max-width: 700px) {
    /* Dictionary: bring the search interface into the first viewport */
    .dictionary-hero {
        padding-top: 10px !important;
        padding-bottom: 8px !important;
    }

    .dictionary-hero .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .dictionary-hero .eyebrow {
        margin: 0 0 2px !important;
        font-size: .6rem !important;
    }

    .dictionary-hero h1 {
        margin: 0 0 4px !important;
        font-size: 1.35rem !important;
        line-height: 1.05 !important;
    }

    .dictionary-hero p {
        margin: 0 !important;
        font-size: .82rem !important;
        line-height: 1.3 !important;
    }

    .dictionary-scope-note {
        margin-top: 7px;
        padding: 7px 9px;
        font-size: .73rem;
        line-height: 1.3;
    }

    .dictionary-page,
    .dictionary-content,
    .dictionary-search,
    .dictionary-form-wrap {
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    /* Vocabulary/Phrases: dark header plus a subtle slate band behind controls */
    .study-page {
        background:
            linear-gradient(to bottom, #e5eaf0 0, #e5eaf0 122px, #fbfaf6 122px, #fbfaf6 100%);
    }

    .study-page .site-header {
        background: #14253a;
    }

    .study-page .site-header .nav-wrap {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .study-page .site-header .brand {
        color: #fffaf0;
    }

    .study-page .site-header .main-nav a {
        color: #e7edf3;
    }

    .study-page .site-header .main-nav a.active {
        color: #d8b96a;
    }

    .study-page .vocabulary-title-section,
    .study-page .phrase-title-section {
        padding-top: 8px;
    }
}


/* Dictionary note now follows the search hint */
.dictionary-form .dictionary-scope-note,
.dictionary-search .dictionary-scope-note {
    margin-top: 10px;
}

@media (max-width: 700px) {
    .search-hint {
        margin-bottom: 0 !important;
    }

    .dictionary-scope-note {
        margin-top: 6px;
    }
}


/* Dictionary layout refinement */
.dictionary-scope-card {
    margin-top: 16px;
    padding: 18px 20px;
    background: #f7f2e8;
    border: 1px solid #d8cfbf;
    border-left: 3px solid #b08a3e;
    border-radius: 10px;
}

.dictionary-scope-card .eyebrow {
    margin: 0 0 6px;
}

.dictionary-scope-card p:last-child {
    margin: 0;
    color: #3f4a56;
    line-height: 1.5;
}

@media (max-width: 700px) {
    /* Prevent the search card from crowding/overlapping the intro copy */
    .dictionary-hero {
        position: relative;
        z-index: 1;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .dictionary-hero .container {
        position: relative;
    }

    .dictionary-hero p:last-child {
        margin-bottom: 0 !important;
    }

    .dictionary-page,
    .dictionary-content,
    .dictionary-search,
    .dictionary-form-wrap,
    .search-card {
        position: relative;
        z-index: 2;
        margin-top: 0 !important;
    }

    form.dictionary-form,
    .dictionary-form {
        margin-top: 0 !important;
    }

    .dictionary-scope-card {
        margin-top: 10px;
        padding: 12px 13px;
        border-radius: 8px;
    }

    .dictionary-scope-card .eyebrow {
        margin-bottom: 4px;
        font-size: .62rem;
    }

    .dictionary-scope-card p:last-child {
        font-size: .78rem;
        line-height: 1.35;
    }
}


/* Final mobile Dictionary spacing fix:
   neutralize the desktop negative overlap used by .search-shell */
@media (max-width: 700px) {
    .search-shell {
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    .dictionary-hero {
        margin-bottom: 0 !important;
    }
}


/* Shared site branding */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.brand-logo {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    flex: 0 0 auto;
}

@media (max-width: 700px) {
    .brand {
        gap: 7px;
    }

    .brand-logo {
        width: 24px;
        height: 24px;
    }
}






/* Dictionary result: word/translation left, categories/audio right */
.dictionary-result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 260px);
    gap: 18px 28px;
    align-items: start;
}

.result-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.dictionary-result-card .category-list {
    width: 100%;
    justify-content: flex-end;
}

.dictionary-result-card .result-actions {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 9px;
}

.dictionary-listen {
    min-width: 0;
    padding: 6px 11px;
    font-size: .76rem;
    line-height: 1.1;
}

@media (max-width: 700px) {
    .dictionary-result-card {
        display: block;
    }

    .dictionary-result-card .result-main {
        width: 100%;
    }

    .dictionary-result-card .result-source {
        margin-bottom: 0;
    }

    .dictionary-result-card .result-target {
        margin-top: 7px;
    }

    .dictionary-result-card .result-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 12px;
        align-items: center;
        width: 100%;
        margin-top: 12px;
    }

    .dictionary-result-card .category-list {
        justify-content: flex-start;
        max-width: none;
        gap: 4px;
    }

    .dictionary-result-card .category-list span {
        padding: 3px 6px;
        font-size: .66rem;
    }

    .dictionary-result-card .result-actions {
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
        align-self: center;
    }

    .dictionary-listen {
        width: auto;
        min-width: 0;
        padding: 5px 9px;
        font-size: .72rem;
        white-space: nowrap;
    }
}


/* Landing hero visual refinement */
.hero {
    position: relative;
    overflow: hidden;
}

.hero::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    right: -150px;
    top: -210px;
    border: 1px solid rgba(216, 189, 118, .16);
    border-radius: 50%;
    pointer-events: none;
}

.hero-grid {
    position: relative;
    z-index: 1;
}

.hero-study-visual {
    padding: 54px 42px;
    background: rgba(5, 18, 28, .38);
}

.hero-visual-frame {
    position: relative;
    min-height: 390px;
    padding: 28px 30px 26px;
    border: 1px solid rgba(231, 211, 158, .46);
    background:
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
    box-shadow: inset 0 0 0 7px rgba(255,255,255,.018);
    display: flex;
    flex-direction: column;
}

.hero-visual-frame::before,
.hero-visual-frame::after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    pointer-events: none;
}

.hero-visual-frame::before {
    left: 12px;
    top: 12px;
    border-left: 1px solid rgba(216, 189, 118, .72);
    border-top: 1px solid rgba(216, 189, 118, .72);
}

.hero-visual-frame::after {
    right: 12px;
    bottom: 12px;
    border-right: 1px solid rgba(216, 189, 118, .72);
    border-bottom: 1px solid rgba(216, 189, 118, .72);
}

.hero-visual-topline {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: #d8bd76;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.hero-level-mark {
    display: flex;
    align-items: baseline;
    margin: 36px 0 24px;
    color: rgba(255,255,255,.96);
    font-family: var(--serif);
    line-height: .72;
}

.hero-level-mark span {
    font-size: clamp(5.6rem, 9vw, 8.2rem);
    font-weight: 400;
}

.hero-level-mark strong {
    margin-left: -5px;
    color: #d8bd76;
    font-size: clamp(5.6rem, 9vw, 8.2rem);
    font-weight: 700;
}

.hero-visual-copy {
    margin-top: auto;
}

.hero-visual-copy .panel-kicker {
    margin: 0 0 7px;
}

.hero-visual-copy h2 {
    margin: 0;
    max-width: 310px;
    font: 700 1.72rem/1.12 var(--serif);
}

.hero-visual-copy > p:last-child {
    margin: 9px 0 0;
    color: #cbd6dc;
    font-size: .9rem;
    letter-spacing: .035em;
}

.hero-tool-line {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 15px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.16);
    color: #e7edf0;
    font-size: .72rem;
}

.hero-tool-line span:not(:last-child)::after {
    content: "·";
    margin-left: 15px;
    color: #d8bd76;
}

@media (max-width: 900px) {
    .hero-study-visual {
        padding: 42px 28px;
    }

    .hero-visual-frame {
        min-height: 350px;
        padding: 24px;
    }
}

@media (max-width: 700px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        padding: 54px 0 44px;
    }

    .hero-study-visual {
        padding: 0 0 42px;
        border-left: 0;
        background: transparent;
    }

    .hero-visual-frame {
        min-height: 0;
        padding: 20px 21px 19px;
    }

    .hero-level-mark {
        margin: 24px 0 18px;
    }

    .hero-level-mark span,
    .hero-level-mark strong {
        font-size: clamp(4.5rem, 25vw, 6.5rem);
    }

    .hero-visual-copy h2 {
        font-size: 1.45rem;
    }

    .hero-tool-line {
        margin-top: 18px;
        padding-top: 13px;
    }
}


/* Landing study-space refinement */
.cards-section {
    position: relative;
    padding: 88px 0 92px;
}

.cards-section::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(176, 138, 62, .28) 20%,
        rgba(176, 138, 62, .28) 80%,
        transparent
    );
}

.study-space-heading {
    max-width: 700px;
    margin-bottom: 36px;
}

.study-space-heading h2 {
    max-width: 620px;
}

.section-rule {
    width: 44px;
    height: 2px;
    margin-top: 18px;
    background: #b08a3e;
}

.cards-grid {
    gap: 22px;
}

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 285px;
    padding: 30px 30px 28px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)),
        var(--paper);
    border-color: #ddd5c6;
}

.feature-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(to right, #b08a3e, #d8bd76);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.feature-card-active:hover::after {
    transform: scaleX(1);
}

.feature-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.feature-index {
    color: #b8aa8d;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.feature-card .feature-icon {
    width: 50px;
    height: 50px;
    background: #fbf7ec;
    border-color: #cab67c;
}

.feature-card h3 {
    margin-top: 24px;
    font-size: 1.52rem;
}

.feature-card p {
    margin-bottom: 22px;
    color: #53616b;
    line-height: 1.62;
}

.feature-card .card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    color: #263d51;
    font-weight: 800;
    font-size: .86rem;
    letter-spacing: .01em;
}

.feature-card .card-link span {
    transition: transform .18s ease;
}

.feature-card-active:hover .card-link span {
    transform: translateX(3px);
}

@media (max-width: 900px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .feature-card {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .cards-section {
        padding: 58px 0 62px;
    }

    .study-space-heading {
        margin-bottom: 24px;
    }

    .section-rule {
        margin-top: 13px;
    }

    .cards-grid {
        gap: 14px;
    }

    .feature-card {
        padding: 22px 22px 20px;
    }

    .feature-card h3 {
        margin-top: 18px;
        font-size: 1.34rem;
    }

    .feature-card p {
        margin-bottom: 16px;
        font-size: .92rem;
        line-height: 1.5;
    }

    .feature-card .feature-icon {
        width: 44px;
        height: 44px;
    }
}


/* Study-space line icons */
.feature-icon svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.feature-card:nth-child(2) .feature-icon svg {
    width: 24px;
    height: 24px;
}

.feature-card:nth-child(3) .feature-icon svg {
    width: 26px;
    height: 26px;
}

@media (max-width: 700px) {
    .feature-icon svg,
    .feature-card:nth-child(2) .feature-icon svg,
    .feature-card:nth-child(3) .feature-icon svg {
        width: 22px;
        height: 22px;
    }
}


/* Landing hero-to-study-space navigation */
#study-space {
    scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* Landing resource snapshot */
.resource-highlights {
    position: relative;
    padding-top: 84px;
    padding-bottom: 90px;
}

.resource-heading {
    max-width: 720px;
    margin-bottom: 42px;
}

.resource-heading > p:last-child {
    max-width: 660px;
    color: #53616b;
    line-height: 1.65;
}

.resource-snapshot {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid #cfc5b3;
    border-bottom: 1px solid #cfc5b3;
    background: rgba(255, 253, 247, .48);
}

.resource-stat {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    min-width: 0;
    padding: 34px 30px 32px;
}

.resource-stat + .resource-stat {
    border-left: 1px solid #d8cfbf;
}

.resource-stat-mark {
    padding-top: 7px;
    color: #b08a3e;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.resource-stat-content {
    min-width: 0;
}

.resource-stat .resource-value {
    display: block;
    margin: 0 0 12px;
    color: var(--navy);
    font: 700 clamp(2.7rem, 4vw, 4rem)/.95 var(--serif);
    letter-spacing: -.025em;
}

.resource-stat h3 {
    margin: 0 0 8px;
    color: var(--navy);
    font: 700 1.08rem/1.25 var(--serif);
}

.resource-stat p {
    margin: 0;
    color: #596771;
    font-size: .9rem;
    line-height: 1.55;
}

.resource-stat::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -1px;
    width: 42px;
    height: 2px;
    background: #b08a3e;
}

@media (max-width: 900px) {
    .resource-snapshot {
        grid-template-columns: 1fr;
    }

    .resource-stat + .resource-stat {
        border-left: 0;
        border-top: 1px solid #d8cfbf;
    }

    .resource-stat {
        grid-template-columns: 34px minmax(0, 1fr);
    }
}

@media (max-width: 700px) {
    .resource-highlights {
        padding-top: 58px;
        padding-bottom: 62px;
    }

    .resource-heading {
        margin-bottom: 26px;
    }

    .resource-stat {
        gap: 11px;
        padding: 22px 18px 21px;
        grid-template-columns: 26px minmax(0, 1fr);
    }

    .resource-stat .resource-value {
        margin-bottom: 8px;
        font-size: 2.55rem;
    }

    .resource-stat h3 {
        margin-bottom: 5px;
        font-size: 1rem;
    }

    .resource-stat p {
        font-size: .84rem;
        line-height: 1.45;
    }

    .resource-stat::after {
        left: 18px;
        width: 32px;
    }
}


/* Landing learning-method progression */
.method-section {
    position: relative;
    padding-top: 86px;
    padding-bottom: 86px;
}

.method-heading {
    max-width: 720px;
    margin-bottom: 44px;
}

.method-heading > p:last-child {
    max-width: 680px;
    color: #53616b;
    line-height: 1.65;
}

.method-path {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.method-path::before {
    content: "";
    position: absolute;
    top: 26px;
    left: calc(16.666% + 26px);
    right: calc(16.666% + 26px);
    height: 1px;
    background: #c9b77f;
}

.method-step {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 18px;
    padding: 0 28px;
    min-width: 0;
}

.method-step:first-child {
    padding-left: 0;
}

.method-step:last-child {
    padding-right: 0;
}

.method-marker {
    position: relative;
    z-index: 1;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid #b99c58;
    border-radius: 50%;
    background: #fbfaf6;
    color: var(--navy);
    box-shadow: 0 0 0 7px #fbfaf6;
}

.method-marker span {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.method-step-copy {
    padding-top: 3px;
}

.method-verb {
    display: block;
    margin-bottom: 5px;
    color: #a37b2e;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.method-step h3 {
    margin: 0 0 9px;
    color: var(--navy);
    font: 700 1.45rem/1.15 var(--serif);
}

.method-step p {
    margin: 0;
    color: #596771;
    font-size: .91rem;
    line-height: 1.55;
}

.method-note {
    max-width: 760px;
    margin: 38px auto 0;
    padding: 15px 20px;
    border-top: 1px solid #d8cfbf;
    border-bottom: 1px solid #d8cfbf;
    color: #4f5d67;
    font-size: .88rem;
    line-height: 1.55;
    text-align: center;
}

@media (max-width: 900px) {
    .method-path {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .method-path::before {
        top: 26px;
        bottom: 26px;
        left: 26px;
        right: auto;
        width: 1px;
        height: auto;
    }

    .method-step,
    .method-step:first-child,
    .method-step:last-child {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 18px;
        padding: 0 0 30px;
    }

    .method-step:last-child {
        padding-bottom: 0;
    }
}

@media (max-width: 700px) {
    .method-section {
        padding-top: 58px;
        padding-bottom: 60px;
    }

    .method-heading {
        margin-bottom: 28px;
    }

    .method-path::before {
        top: 22px;
        bottom: 22px;
        left: 22px;
    }

    .method-step,
    .method-step:first-child,
    .method-step:last-child {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding-bottom: 25px;
    }

    .method-step:last-child {
        padding-bottom: 0;
    }

    .method-marker {
        width: 44px;
        height: 44px;
        box-shadow: 0 0 0 5px #fbfaf6;
    }

    .method-step h3 {
        margin-bottom: 6px;
        font-size: 1.28rem;
    }

    .method-step p {
        font-size: .84rem;
        line-height: 1.45;
    }

    .method-note {
        margin-top: 28px;
        padding: 12px 8px;
        font-size: .8rem;
    }
}


/* Desktop method-path spacing refinement
   Keep the connector visually separate from the stage headings. */
@media (min-width: 901px) {
    .method-step-copy {
        padding-top: 13px;
    }
}


/* Desktop method-path alignment refinement:
   move the connector upward rather than moving the text block downward. */
@media (min-width: 901px) {
    .method-path::before {
        top: 19px;
    }

    .method-step-copy {
        padding-top: 3px;
    }
}


/* Landing: Practical by Design — editorial refinement */
.practical-editorial {
    position: relative;
    padding-top: 88px;
    padding-bottom: 92px;
}
.practical-editorial .practical-rule {
    width: 54px;
    height: 2px;
    margin-bottom: 26px;
    background: #b08a3e;
}
.practical-editorial .practical-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid #d8cfbf;
    border-radius: 2px;
    background: linear-gradient(135deg, rgba(255,253,247,.92), rgba(246,242,232,.72));
    box-shadow: 0 18px 45px rgba(21,39,55,.06);
}
.practical-editorial .practical-copy {
    padding: 46px 50px 42px;
}
.practical-editorial .practical-kicker {
    margin: 15px 0 10px;
    color: #a37b2e;
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .16em;
}
.practical-editorial .practical-copy h2 {
    max-width: 720px;
    margin-bottom: 22px;
    color: var(--navy);
    font-size: clamp(2.15rem, 4vw, 3.75rem);
    line-height: 1.03;
    letter-spacing: -.025em;
}
.practical-editorial .practical-copy h2 em {
    color: #8c6a2c;
    font-weight: 500;
}
.practical-editorial .practical-copy > p:not(.eyebrow):not(.practical-kicker) {
    max-width: 760px;
    color: #53616b;
    line-height: 1.68;
}
.practical-editorial .practical-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    border-top: 1px solid #d8cfbf;
}
.practical-editorial .practical-points > div {
    position: relative;
    padding: 25px 30px 27px;
}
.practical-editorial .practical-points > div + div {
    border-left: 1px solid #d8cfbf;
}
.practical-editorial .practical-points > div::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 30px;
    width: 34px;
    height: 2px;
    background: #b08a3e;
}
.practical-editorial .practical-points strong {
    display: block;
    margin-bottom: 7px;
    color: var(--navy);
    font-family: var(--serif);
    font-size: 1.08rem;
}
.practical-editorial .practical-points span {
    color: #596771;
    font-size: .88rem;
    line-height: 1.5;
}
@media (max-width: 700px) {
    .practical-editorial {
        padding-top: 58px;
        padding-bottom: 62px;
    }
    .practical-editorial .practical-rule { margin-bottom: 20px; }
    .practical-editorial .practical-copy { padding: 29px 22px 27px; }
    .practical-editorial .practical-copy h2 {
        font-size: 2.2rem;
        line-height: 1.04;
    }
    .practical-editorial .practical-points { grid-template-columns: 1fr; }
    .practical-editorial .practical-points > div { padding: 19px 22px 20px; }
    .practical-editorial .practical-points > div + div {
        border-left: 0;
        border-top: 1px solid #d8cfbf;
    }
    .practical-editorial .practical-points > div::before { left: 22px; }
}


/* Practical by Design: balanced desktop composition */
@media (min-width: 901px) {
    .practical-editorial .practical-panel {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(330px, .9fr);
        align-items: stretch;
    }

    .practical-editorial .practical-copy {
        min-width: 0;
    }

    .practical-editorial .practical-points {
        display: grid;
        grid-template-columns: 1fr;
        border-top: 0;
        border-left: 1px solid #d8cfbf;
    }

    .practical-editorial .practical-points > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 30px;
    }

    .practical-editorial .practical-points > div + div {
        border-left: 0;
        border-top: 1px solid #d8cfbf;
    }

    .practical-editorial .practical-points > div::before {
        top: -1px;
        left: 30px;
    }
}

/* =========================================================
   Shared footer + final responsive safeguards
   Consolidated after visual approval
   ========================================================= */

.site-footer {
    border-top: 1px solid rgba(205, 190, 157, .38);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 82px;
}

.footer-copyright {
    margin: 0;
    font-size: .78rem;
    letter-spacing: .035em;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact-link {
    color: inherit;
    font-size: .76rem;
    font-weight: 650;
    letter-spacing: .055em;
    text-decoration: none;
    transition: color .18s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: #b08a3e;
}

.footer-contact-link:focus-visible {
    outline: 2px solid #b08a3e;
    outline-offset: 4px;
    border-radius: 2px;
}

.footer-link-divider {
    width: 1px;
    height: 20px;
    margin: 0 3px 0 2px;
    background: rgba(205, 190, 157, .52);
}

.footer-icon-link {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(205, 190, 157, .46);
    border-radius: 50%;
    transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}

.footer-icon-link svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-icon-link:hover,
.footer-icon-link:focus-visible {
    border-color: #b08a3e;
    background: rgba(176, 138, 62, .08);
    transform: translateY(-1px);
}

.footer-icon-link:focus-visible {
    outline: 2px solid #b08a3e;
    outline-offset: 3px;
}

.result-source,
.result-target,
.study-prompt h2,
.translation-text,
.phrase-notes,
.quote-card p,
.feature-card h3,
.feature-card p {
    overflow-wrap: anywhere;
    word-break: normal;
}

.dictionary-result-card .result-main,
.dictionary-result-card .result-meta,
.study-card,
.study-prompt,
.translation-block {
    min-width: 0;
}

@media (max-width: 700px) {
    .footer-inner {
        min-height: auto;
        padding-top: 16px;
        padding-bottom: 16px;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
        text-align: center;
    }

    .footer-copyright {
        width: 100%;
        font-size: .68rem;
        line-height: 1.35;
        white-space: nowrap;
    }

    .footer-links {
        width: 100%;
        justify-content: center;
        gap: 9px;
    }

    .footer-contact-link {
        font-size: .7rem;
    }

    .footer-link-divider {
        height: 18px;
        margin-left: 2px;
        margin-right: 2px;
    }

    .footer-icon-link {
        width: 32px;
        height: 32px;
    }

    .dictionary-result-card .result-meta,
    .dictionary-result-card .category-list {
        min-width: 0;
    }

    .dictionary-result-card .category-list span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .footer-copyright {
        font-size: .64rem;
        letter-spacing: .02em;
    }
}

@media (max-width: 350px) {
    .container,
    .narrow {
        width: calc(100% - 16px);
    }

    .site-header .main-nav a {
        font-size: .63rem;
    }

    .site-header .brand {
        font-size: 1.28rem;
    }
}


/* Cross-browser guarantee for native hidden content.
   Prevents component CSS from overriding the HTML hidden attribute. */
[hidden] {
    display: none !important;
}


/* Arabe A1 additions */
:root {
    --arabic-font: "Noto Naskh Arabic", "Traditional Arabic", "Arabic Typesetting", "Geeza Pro", serif;
}

/* Noto Naskh Arabic test: apply the selected candidate to every learner-facing
   Arabic string, while retaining local RTL/alignment rules per component. */
[lang="ar"],
.arabic-text,
.arabic-inline {
    font-family: var(--arabic-font);
}

.arabic-text {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    font-size: 1.35em;
    line-height: 1.9;
}

.arabic-inline {
    direction: rtl;
    unicode-bidi: isolate;
    display: inline-block;
}

.speak-button {
    margin-top: 0.75rem;
}

.module-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .8rem;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.module-status::before {
    content: '';
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

@media (max-width: 1100px) {
    .main-nav { flex-wrap: wrap; justify-content: flex-end; }
}

/* Arabe A1 content components. Keep identity colors behind variables so the
   temporary blue palette can be changed to green later without component edits. */
:root {
    --arabe-accent: var(--blue, #2f5f95);
    --arabe-accent-strong: var(--navy, #17324d);
}

.arabic-study-text {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 650;
    letter-spacing: 0;
}

.arabic-detail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8rem 1rem;
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(23, 50, 77, .12);
}

.arabic-detail > span,
.dictionary-plural > span {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.arabic-detail .arabic-text {
    margin: 0;
    font-size: 1.55rem;
}

.mini-audio {
    border: 0;
    background: transparent;
    color: var(--arabe-accent-strong);
    font: inherit;
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}

.mini-audio:disabled { opacity: .55; cursor: wait; }

.dictionary-plural {
    margin: .55rem 0 0;
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: .92rem;
}

.dictionary-plural .arabic-inline { font-size: 1.2rem; }

@media (max-width: 600px) {
    .arabic-detail { grid-template-columns: 1fr auto; }
    .arabic-detail > span { grid-column: 1 / -1; }
}

/* Step 2.1 refinements */
/* Isolated vocabulary items are centered for flashcard-style study. RTL remains
   active so Arabic shaping and punctuation direction stay correct. */
.vocabulary-page .vocabulary-arabic-centered {
    text-align: center;
    margin-inline: auto;
}

.phrase-empty-state {
    margin-top: 0;
}

.dictionary-audio-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.dictionary-audio-actions .dictionary-listen {
    min-width: 0;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .dictionary-audio-actions {
        width: 100%;
        justify-content: stretch;
    }

    .dictionary-audio-actions .dictionary-listen {
        flex: 1 1 10rem;
    }
}

/* Step 2.2 dictionary audio sizing + mobile metadata layout */
@media (min-width: 701px) {
    .dictionary-audio-actions .dictionary-listen {
        flex: 0 0 142px;
        width: 142px;
        min-height: 34px;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .dictionary-result-card .result-meta {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dictionary-result-card .category-list {
        width: 100%;
        justify-content: flex-start;
        gap: 5px;
    }

    .dictionary-result-card .category-list span {
        padding: 4px 7px;
        font-size: .68rem;
        line-height: 1.2;
    }

    .dictionary-audio-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 7px;
    }

    .dictionary-audio-actions .dictionary-listen {
        flex: 0 0 auto;
        width: auto;
        min-width: 118px;
        min-height: 32px;
        padding: 5px 8px;
        font-size: .68rem;
        line-height: 1;
        justify-content: center;
    }
}

@media (max-width: 390px) {
    .dictionary-audio-actions .dictionary-listen {
        min-width: 0;
        flex: 1 1 calc(50% - 4px);
        padding-inline: 6px;
    }
}

/* Step 2.3: dictionary mobile word/category alignment.
   Flatten the two desktop columns so the main lookup word and its category
   metadata can share the first mobile row without duplicating markup. */
@media (max-width: 700px) {
    .dictionary-result-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(min-content, 44%);
        column-gap: 10px;
        row-gap: 7px;
        align-items: start;
    }

    .dictionary-result-card .result-main,
    .dictionary-result-card .result-meta {
        display: contents;
    }

    .dictionary-result-card .result-source {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
        margin: 0;
        min-width: 0;
    }

    .dictionary-result-card .category-list {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        width: auto;
        max-width: 100%;
        justify-content: flex-end;
        gap: 4px;
        margin: 0;
    }

    .dictionary-result-card .category-list span {
        padding: 3px 6px;
        font-size: .64rem;
        line-height: 1.15;
    }

    .dictionary-result-card .result-target {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 3px 0 0;
    }

    .dictionary-result-card .dictionary-plural {
        grid-column: 1 / -1;
        grid-row: 3;
        margin-top: 2px;
    }

    .dictionary-result-card .result-actions {
        grid-column: 1 / -1;
        grid-row: 4;
        width: 100%;
        margin-top: 5px;
        justify-content: flex-start;
    }

    .dictionary-audio-actions .dictionary-listen {
        flex: 0 1 124px;
        width: 124px;
        min-width: 0;
        min-height: 30px;
        padding: 5px 7px;
        font-size: .66rem;
    }
}

@media (max-width: 390px) {
    .dictionary-result-card {
        grid-template-columns: minmax(0, 1fr) minmax(min-content, 48%);
    }

    .dictionary-audio-actions .dictionary-listen {
        flex: 1 1 calc(50% - 4px);
        width: auto;
    }
}

/* Step 2.5 vocabulary: singular/main item and plural are distinct study sections. */
.vocabulary-study-card {
    overflow: hidden;
}

.vocabulary-main-section {
    padding-bottom: 24px;
}

.vocabulary-main-categories {
    margin-top: 4px;
}

.vocabulary-main-actions {
    margin-top: 18px;
}

.vocabulary-plural-section {
    border-top: 1px solid var(--line);
    padding: 24px 0 4px;
    text-align: center;
}

.vocabulary-plural-section .study-label {
    margin-bottom: 8px;
}

.vocabulary-plural-word {
    display: block;
    margin: 0 auto 16px;
    text-align: center;
    font-size: clamp(1.7rem, 4vw, 2.35rem);
    line-height: 1.5;
}

.vocabulary-plural-listen {
    min-width: 180px;
}

@media (max-width: 600px) {
    .vocabulary-main-section {
        padding-bottom: 18px;
    }

    .vocabulary-plural-section {
        padding-top: 18px;
    }

    .vocabulary-main-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vocabulary-main-actions .button,
    .vocabulary-plural-listen {
        min-width: 0;
        width: 100%;
    }
}

/* Step 2.6 — temporary Frases host diagnostics. Remove after diagnosis. */
.phrase-debug-panel {
    margin-top: 18px;
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px dashed var(--navy);
    background: rgba(20, 39, 64, .035);
}
.phrase-debug-panel h2 { margin: 0 0 6px; font-size: 1rem; }
.phrase-debug-panel p { margin: 0 0 12px; font-size: .84rem; }
.phrase-debug-panel dl { margin: 0; font-size: .78rem; }
.phrase-debug-panel dl > div {
    display: grid;
    grid-template-columns: minmax(120px, .8fr) minmax(0, 2fr);
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid var(--line);
}
.phrase-debug-panel dt { font-weight: 700; }
.phrase-debug-panel dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
    .phrase-debug-panel dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Step 2.6 — Vocabulario audio controls share the same visual width.
   The singular audio occupies one half of the main action row; the plural
   audio uses the identical half-row width and is centered below. */
.vocabulary-main-actions {
    --vocabulary-action-gap: 10px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: var(--vocabulary-action-gap) !important;
    width: 100% !important;
}
.vocabulary-main-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
.vocabulary-plural-listen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - (var(--vocabulary-action-gap, 10px) / 2));
    min-width: 0;
    margin-inline: auto;
    box-sizing: border-box;
}
@media (max-width: 560px) {
    .vocabulary-main-actions { --vocabulary-action-gap: 8px; }
    .vocabulary-plural-section { --vocabulary-action-gap: 8px; }
    .vocabulary-plural-listen {
        width: calc(50% - (var(--vocabulary-action-gap) / 2)) !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        font-size: .82rem !important;
        line-height: 1.15 !important;
    }
}
@media (max-width: 380px) {
    .vocabulary-main-actions { --vocabulary-action-gap: 6px; }
    .vocabulary-plural-section { --vocabulary-action-gap: 6px; }
    .vocabulary-plural-listen {
        width: calc(50% - (var(--vocabulary-action-gap) / 2)) !important;
        padding-inline: 4px !important;
        font-size: .74rem !important;
    }
}

/* Step 3.1 — isolated Frases renderer.
   Deliberately avoids the inherited .study-card/.study-shell stack while we
   stabilize this module. Once proven, these rules can be folded back into the
   shared study system. */
.phrases31-page {
    min-height: calc(100vh - 150px);
}

.phrases31-stage {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 1;
    padding-top: 8px;
    padding-bottom: 48px;
}

.phrases31-card {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    box-sizing: border-box;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    color: var(--ink);
}

.phrases31-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
}

.phrases31-countdown {
    color: var(--gold-dark);
    text-align: right;
}

.phrases31-prompt {
    display: block;
    padding: 42px 0 34px;
    text-align: center;
}

.phrases31-prompt h2 {
    display: block;
    max-width: 760px;
    margin: 0 auto;
    color: var(--navy);
    font: 700 clamp(1.65rem, 4.5vw, 2.65rem)/1.2 var(--serif);
    overflow-wrap: anywhere;
}

.phrases31-arabic {
    text-align: center !important;
    direction: rtl;
    unicode-bidi: isolate;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.65 !important;
}

.phrases31-translation {
    display: block;
    border-top: 1px solid var(--line);
    padding: 28px 0 8px;
    text-align: center;
}

.phrases31-translation[hidden] {
    display: none !important;
}

.phrases31-translation.is-visible {
    animation: translationReveal .42s ease both;
}

.phrases31-translation-text {
    max-width: 760px;
    margin: 0 auto;
    color: var(--ink);
    font: 400 clamp(1.3rem, 3.5vw, 1.9rem)/1.45 var(--serif);
    overflow-wrap: anywhere;
}

.phrases31-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 20px;
}

.phrases31-categories span {
    border: 1px solid #ded4bb;
    background: #f7f0dd;
    color: #6e5924;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .74rem;
}

.phrases31-notes {
    max-width: 760px;
    margin: 22px auto 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.phrases31-notes p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.phrases31-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.phrases31-actions .button {
    flex: 0 1 190px;
    min-width: 190px;
    justify-content: center;
}

.phrases31-empty {
    display: block !important;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
}

@media (max-width: 560px) {
    .phrases31-stage {
        padding-top: 5px;
        padding-bottom: 24px;
    }

    .phrases31-card {
        padding: 16px 14px;
        border-radius: 11px;
    }

    .phrases31-topline {
        justify-content: center;
        padding-bottom: 9px;
        font-size: .68rem;
    }

    .phrases31-topline > span:first-child {
        display: none;
    }

    .phrases31-countdown {
        width: 100%;
        text-align: center;
    }

    .phrases31-prompt {
        padding: 23px 0 20px;
    }

    .phrases31-prompt h2 {
        font-size: clamp(1.28rem, 6.2vw, 1.8rem);
        line-height: 1.2;
    }

    .phrases31-arabic {
        font-size: clamp(1.65rem, 8vw, 2.2rem) !important;
    }

    .phrases31-translation {
        padding: 17px 0 2px;
    }

    .phrases31-translation-text {
        font-size: clamp(1.05rem, 5.1vw, 1.35rem);
    }

    .phrases31-categories {
        gap: 4px;
        margin-top: 12px;
    }

    .phrases31-categories span {
        padding: 3px 6px;
        font-size: .64rem;
    }

    .phrases31-notes {
        margin-top: 14px;
        padding-top: 10px;
        font-size: .82rem;
    }

    .phrases31-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
        padding-top: 14px;
    }

    .phrases31-actions .button {
        min-width: 0;
        width: 100%;
        padding-inline: 7px;
        font-size: .82rem;
        white-space: nowrap;
    }
}

/* Frases: an Arabic translation is a learning target rather than a running
   Arabic paragraph, so center it while preserving RTL shaping. */
.phrases-page .translation-text.arabic-text {
    text-align: center;
    margin-inline: auto;
}

/* Step 4.3 — refined dictionary presentation and Arabic lookup input. */
.arabic-search-input {
    font-family: var(--arabic-font);
    direction: rtl;
    text-align: right;
    font-size: 1.2rem;
}

.dictionary-result-card .result-target {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    font-size: clamp(1.3rem, 2.3vw, 1.55rem);
    line-height: 1.45;
}

.dictionary-result-card .result-target.arabic-text {
    margin-inline: auto;
    text-align: center;
    font-size: clamp(2rem, 4.5vw, 2.65rem);
    line-height: 1.65;
}

.dictionary-result-card .dictionary-plural {
    width: 100%;
    justify-content: center;
    text-align: center;
}

@media (max-width: 700px) {
    .dictionary-result-card .result-target {
        text-align: center;
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .dictionary-result-card .result-target.arabic-text {
        text-align: center;
        font-size: clamp(2rem, 9vw, 2.5rem);
    }

    .dictionary-result-card .dictionary-plural {
        justify-content: center;
        text-align: center;
    }
}

/* Step 4.4 — phrase readability and lighter dictionary audio controls. */
/* In Árabe → Español, the Arabic prompt is an isolated learning target:
   center it and use a regular Noto Naskh weight for clearer letterforms. */
.phrases-page .study-prompt h2.arabic-study-text {
    width: 100%;
    margin-inline: auto;
    text-align: center;
    font-weight: 400;
}

/* Keep the PLURAL label anchored to the left while the Arabic form remains
   geometrically centered across the complete result width. */
.dictionary-result-card .dictionary-plural {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: .65rem;
    width: 100%;
    justify-content: initial;
    text-align: initial;
}

.dictionary-result-card .dictionary-plural > span {
    grid-column: 1;
    justify-self: start;
    text-align: left;
}

.dictionary-result-card .dictionary-plural .arabic-inline {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}

/* Dictionary audio is intentionally a secondary action: compact outline
   control with a speaker icon instead of a prominent full CTA button. */
.dictionary-audio-actions {
    gap: .45rem;
}

.dictionary-audio-actions .dictionary-listen {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    flex: 0 0 106px;
    width: 106px;
    min-width: 106px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(23, 50, 77, .24);
    border-radius: 999px;
    background: transparent;
    color: var(--arabe-accent-strong);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.dictionary-audio-actions .dictionary-listen:hover {
    background: rgba(23, 50, 77, .055);
    border-color: rgba(23, 50, 77, .38);
}

.dictionary-audio-actions .dictionary-listen:focus-visible {
    outline: 2px solid var(--arabe-accent);
    outline-offset: 2px;
}

.dictionary-audio-actions .dictionary-listen:disabled {
    opacity: .55;
    cursor: wait;
}

.dictionary-speaker-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    fill: currentColor;
}

@media (max-width: 700px) {
    .dictionary-result-card .dictionary-plural {
        justify-content: initial;
        text-align: initial;
    }

    .dictionary-result-card .result-actions.dictionary-audio-actions {
        justify-content: center;
        gap: 8px;
    }

    .dictionary-audio-actions .dictionary-listen {
        flex: 0 0 104px;
        width: 104px;
        min-width: 104px;
        min-height: 30px;
        padding: 5px 8px;
        font-size: .7rem;
    }

    .dictionary-audio-actions.single-action .dictionary-listen {
        flex-basis: 104px;
        width: 104px;
    }
}


/* Step 4.5 — phrase hierarchy and compact listening control. */
/* Spanish source phrase: slightly quieter than the previous study-card scale. */
.phrases-page .study-prompt h2:not(.arabic-study-text) {
    font-size: clamp(1.85rem, 5.4vw, 3.25rem);
}

/* Arabic translations use the regular Noto Naskh weight for readability. */
.phrases-page .translation-text.arabic-text {
    font-weight: 400;
}

/* Match Diccionario's compact speaker-pill treatment without changing the
   primary "Siguiente frase" action. */
.phrases-page .phrase-listen {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    flex: 0 0 106px;
    width: 106px;
    min-width: 106px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(23, 50, 77, .24);
    border-radius: 999px;
    background: transparent;
    color: var(--arabe-accent-strong);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.phrases-page .phrase-listen:hover {
    background: rgba(23, 50, 77, .055);
    border-color: rgba(23, 50, 77, .38);
}

.phrases-page .phrase-listen:focus-visible {
    outline: 2px solid var(--arabe-accent);
    outline-offset: 2px;
}

.phrases-page .phrase-listen:disabled {
    opacity: .55;
    cursor: wait;
}

@media (max-width: 700px) {
    .phrases-page .phrase-listen {
        flex: 0 0 104px;
        width: 104px;
        min-width: 104px;
        min-height: 30px;
        padding: 5px 8px;
        font-size: .7rem;
    }
}

/* Step 4.6 — dictionary result hierarchy and metadata placement. */
.dictionary-result-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.dictionary-result-card .result-main {
    min-width: 0;
}

/* Arabic → Spanish: make the looked-up Arabic form the visual focus. */
.dictionary-ar-es-result .result-source.arabic-text {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(2.15rem, 4vw, 2.7rem);
    line-height: 1.45;
    font-weight: 400;
}

.dictionary-ar-es-result .result-target {
    margin-top: .45rem;
    font-size: clamp(1.22rem, 2vw, 1.42rem);
    line-height: 1.45;
    text-align: center;
}

/* Audio remains secondary and centered. */
.dictionary-result-card > .dictionary-audio-actions {
    width: 100%;
    margin-top: 2px;
    justify-content: center;
}

/* Categories get their own final row so long tag sets no longer compete with
   the lookup word. They stay anchored at the bottom-right of each card. */
.dictionary-result-card .dictionary-category-row {
    width: 100%;
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

@media (max-width: 700px) {
    .dictionary-result-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .dictionary-result-card .result-main,
    .dictionary-result-card .result-source,
    .dictionary-result-card .result-target,
    .dictionary-result-card .dictionary-plural,
    .dictionary-result-card > .dictionary-audio-actions,
    .dictionary-result-card .dictionary-category-row {
        grid-column: 1;
        grid-row: auto;
    }

    .dictionary-result-card .result-main {
        display: block;
        width: 100%;
    }

    .dictionary-ar-es-result .result-source.arabic-text {
        font-size: clamp(2.05rem, 9vw, 2.5rem);
        text-align: center;
    }

    .dictionary-ar-es-result .result-target {
        font-size: 1.22rem;
        text-align: center;
    }

    .dictionary-result-card .dictionary-category-row {
        justify-content: flex-end;
        margin-top: 2px;
    }
}


/* Step 4.7 — vocabulary scale/audio refinement and dictionary metadata order. */
.vocabulary-page .compact-study-prompt h2 {
    font-size: clamp(1.9rem, 5.5vw, 3.25rem);
    line-height: 1.2;
}

.vocabulary-page .translation-text {
    font-size: clamp(1.65rem, 4.5vw, 2.5rem);
    line-height: 1.3;
}

.vocabulary-page .compact-study-prompt h2.arabic-text,
.vocabulary-page .translation-text.arabic-text,
.vocabulary-page .vocabulary-plural-word {
    font-family: var(--arabic-font);
    font-weight: 400;
}

.vocabulary-page .vocabulary-plural-word {
    font-size: clamp(1.7rem, 4.5vw, 2.35rem);
    line-height: 1.4;
}

/* Use the same compact speaker-pill as Frases instead of a primary-size audio button. */
.vocabulary-page .vocabulary-main-actions .vocabulary-listen,
.vocabulary-page .vocabulary-plural-listen.vocabulary-listen {
    flex: 0 0 106px;
    width: 106px;
    min-width: 106px;
    min-height: 30px;
    padding: 5px 9px;
}

.vocabulary-page .vocabulary-plural-listen.vocabulary-listen {
    display: inline-flex;
    margin-left: auto;
    margin-right: auto;
}

/* Categories now lead each dictionary card. Keep them at the top and aligned
   to the left on both desktop and mobile, with wrapping for long tag sets. */
.dictionary-result-card .dictionary-category-row {
    order: -1;
    width: 100%;
    margin: 0 0 4px;
    justify-content: flex-start;
    max-width: none;
    text-align: left;
}

@media (max-width: 700px) {
    .vocabulary-page .compact-study-prompt h2 {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .vocabulary-page .translation-text {
        font-size: clamp(1.5rem, 7vw, 2.15rem);
    }

    .vocabulary-page .vocabulary-main-actions .vocabulary-listen,
    .vocabulary-page .vocabulary-plural-listen.vocabulary-listen {
        flex: 0 0 104px;
        width: 104px;
        min-width: 104px;
        min-height: 30px;
        padding: 5px 8px;
    }

    .dictionary-result-card .dictionary-category-row {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        margin-bottom: 2px;
    }
}


/* Step 4.8 — vocabulary audio parity and direction-specific study typography. */
/* Vocabulario: make every Escuchar control identical to the compact control
   used in Frases, including hover/focus/disabled states. */
.vocabulary-page .vocabulary-listen {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    flex: 0 0 106px;
    width: 106px;
    min-width: 106px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(23, 50, 77, .24);
    border-radius: 999px;
    background: transparent;
    color: var(--arabe-accent-strong);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

.vocabulary-page .vocabulary-listen:hover {
    background: rgba(23, 50, 77, .055);
    border-color: rgba(23, 50, 77, .38);
}

.vocabulary-page .vocabulary-listen:focus-visible {
    outline: 2px solid var(--arabe-accent);
    outline-offset: 2px;
}

.vocabulary-page .vocabulary-listen:disabled {
    opacity: .55;
    cursor: wait;
}

/* Frases, Árabe → Español: force Noto Naskh Arabic explicitly. The generic
   study-heading shorthand otherwise has enough specificity to restore the serif font. */
.phrases-page.direction-ar-es .study-prompt h2.arabic-study-text {
    font-family: var(--arabic-font);
    font-weight: 400;
}

/* Frases, Español → Árabe: make both source and revealed translation a little
   quieter than the previous scale on desktop and mobile. */
.phrases-page.direction-es-ar .study-prompt h2:not(.arabic-study-text) {
    font-size: clamp(1.65rem, 4.6vw, 2.85rem);
}

.phrases-page.direction-es-ar .translation-text.arabic-text {
    font-size: clamp(1.8rem, 4.2vw, 2.45rem);
    font-family: var(--arabic-font);
    font-weight: 400;
}

@media (max-width: 700px) {
    .vocabulary-page .vocabulary-listen {
        flex: 0 0 104px;
        width: 104px;
        min-width: 104px;
        min-height: 30px;
        padding: 5px 8px;
        font-size: .7rem;
    }

    /* Vocabulario, Español → Árabe: slightly enlarge the revealed Arabic word. */
    .vocabulary-page .translation-text.arabic-text {
        font-size: clamp(1.72rem, 8vw, 2.35rem);
    }

    /* Vocabulario, Árabe → Español: slightly enlarge the Arabic prompt. */
    .vocabulary-page .compact-study-prompt h2.arabic-text {
        font-size: clamp(1.95rem, 9vw, 2.75rem);
    }

    .phrases-page.direction-es-ar .study-prompt h2:not(.arabic-study-text) {
        font-size: clamp(1.18rem, 5.6vw, 1.58rem);
    }

    .phrases-page.direction-es-ar .translation-text.arabic-text {
        font-size: clamp(1.45rem, 6.4vw, 1.8rem);
        line-height: 1.55;
    }
}

/* Step 5.0 · Diccionario visual */
.visual-hero p:last-child { max-width: 760px; }
.visual-library { padding: 58px 0 84px; }
.visual-library-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.visual-library-intro h2 { margin: 0 0 10px; font: 700 clamp(2rem, 4vw, 3rem)/1.08 var(--serif); color: var(--navy); }
.visual-library-intro > div:first-child > p:last-child { margin: 0; max-width: 700px; color: var(--muted); }
.visual-count { min-width: 112px; padding-left: 24px; border-left: 1px solid var(--line); }
.visual-count strong { display: block; font: 700 2.5rem/1 var(--serif); color: var(--navy); }
.visual-count span { display: block; margin-top: 5px; color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.visual-topic-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 38px; border-top: 1px solid var(--line); }
.visual-topic-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--navy); text-decoration: none; font-size: .84rem; font-weight: 700; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.visual-topic-nav a:hover { border-color: #c9b47d; box-shadow: 0 5px 16px rgba(27,48,62,.07); transform: translateY(-1px); }
.visual-topic { scroll-margin-top: 24px; padding: 34px 0 46px; border-top: 1px solid var(--line); }
.visual-topic-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 20px; }
.visual-topic-heading h2 { margin: 0; font: 700 1.7rem/1.2 var(--serif); color: var(--navy); }
.visual-topic-heading span { color: var(--muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.visual-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.visual-card-link { min-width: 0; color: inherit; text-decoration: none; }
.visual-card { height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 7px 22px rgba(27,48,62,.045); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.visual-card-link:hover .visual-card { transform: translateY(-3px); border-color: #c9b47d; box-shadow: var(--shadow); }
.visual-thumb-wrap { position: relative; display: grid; place-items: center; height: 220px; padding: 14px; background: #fff; border-bottom: 1px solid var(--line); overflow: hidden; }
.visual-thumb-wrap img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.visual-open-mark { position: absolute; right: 11px; bottom: 11px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(11,34,50,.9); color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.16); }
.visual-open-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.visual-card-copy { padding: 16px 18px 18px; }
.visual-card-copy h3 { margin: 0 0 7px; font: 700 1.08rem/1.25 var(--serif); color: var(--navy); }
.visual-card-copy > span { color: var(--gold-dark); font-size: .85rem; font-weight: 800; }
.visual-dialog { width: min(1180px, calc(100% - 28px)); max-width: none; height: min(92vh, 900px); max-height: none; padding: 0; border: 0; border-radius: 12px; background: #f5f3ed; box-shadow: 0 22px 70px rgba(0,0,0,.3); overflow: hidden; }
.visual-dialog::backdrop { background: rgba(5,18,27,.78); }
.visual-dialog-bar { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px 0 24px; background: var(--navy); color: #fff; }
.visual-dialog-bar h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 1.05rem/1.2 var(--serif); }
.visual-dialog-close { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; font: 300 1.8rem/1 sans-serif; }
.visual-dialog-stage { height: calc(100% - 60px); overflow: auto; padding: 22px; text-align: center; }
.visual-dialog-stage img { display: inline-block; max-width: 100%; height: auto; background: #fff; box-shadow: 0 6px 24px rgba(27,48,62,.12); }

@media (max-width: 850px) {
    .visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .visual-thumb-wrap { height: 200px; }
}

@media (max-width: 560px) {
    .visual-library { padding: 42px 0 60px; }
    .visual-library-intro { align-items: flex-start; }
    .visual-count { min-width: 78px; padding-left: 14px; }
    .visual-count strong { font-size: 2rem; }
    .visual-topic-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 28px; scrollbar-width: thin; }
    .visual-topic-nav a { flex: 0 0 auto; }
    .visual-topic { padding: 28px 0 38px; }
    .visual-grid { grid-template-columns: 1fr; gap: 15px; }
    .visual-thumb-wrap { height: 260px; }
    .visual-card-copy { padding: 14px 16px 16px; }
    .visual-dialog { width: calc(100% - 12px); height: calc(100dvh - 12px); border-radius: 8px; }
    .visual-dialog-bar { height: 54px; padding-left: 16px; }
    .visual-dialog-stage { height: calc(100% - 54px); padding: 10px; }
    .visual-dialog-stage img { max-width: none; width: auto; min-width: 100%; }
}

/* Step 6.0 · Conjugación */
.conjugation-library { padding: 58px 0 86px; }
.conjugation-toolbar { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:24px; }
.conjugation-toolbar h2 { margin:0; font:700 clamp(2rem,4vw,3rem)/1.08 var(--serif); color:var(--navy); }
.conjugation-search { width:min(380px,100%); }
.conjugation-search input { width:100%; min-height:46px; border:1px solid var(--line); border-radius:999px; background:var(--paper); padding:10px 18px; font:inherit; color:var(--navy); }
.conjugation-search input:focus { outline:2px solid var(--arabe-accent); outline-offset:2px; }
.conjugation-filters { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0 34px; border-top:1px solid var(--line); }
.conjugation-filter { min-height:36px; padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--paper); color:var(--navy); font:700 .82rem/1.15 inherit; cursor:pointer; }
.conjugation-filter.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.conjugation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; }
.verb-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:0 7px 22px rgba(27,48,62,.045); overflow:hidden; }
.verb-card-head { display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:22px 22px 16px; }
.verb-group-label { margin:0 0 6px; color:var(--gold-dark); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.verb-card h3 { margin:0; color:var(--navy); font:700 1.45rem/1.2 var(--serif); }
.verb-lemma { min-width:110px; text-align:center; font-size:2.15rem; line-height:1.35; font-weight:400; color:var(--navy); }
.verb-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.verb-summary > div { padding:12px 18px 14px; text-align:center; }
.verb-summary > div + div { border-left:1px solid var(--line); }
.verb-summary span { display:block; margin-bottom:3px; color:var(--muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.verb-summary strong { display:block; color:var(--navy); font-size:1.8rem; line-height:1.35; font-weight:400; }
.verb-details summary { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; cursor:pointer; color:var(--navy); font-size:.84rem; font-weight:800; list-style:none; }
.verb-details summary::-webkit-details-marker { display:none; }
.verb-details summary span { font-size:1.2rem; transition:transform .18s ease; }
.verb-details[open] summary span { transform:rotate(45deg); }
.verb-details-body { border-top:1px solid var(--line); padding:4px 18px 20px; }
.verb-tense h4 { margin:20px 0 10px; color:var(--navy); font:700 1rem/1.2 var(--serif); letter-spacing:.04em; text-transform:uppercase; }
.verb-paradigm { border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.verb-form-row { display:grid; grid-template-columns:minmax(115px,.75fr) minmax(0,1.5fr) 106px; align-items:center; gap:12px; min-height:58px; padding:8px 12px; }
.verb-form-row + .verb-form-row { border-top:1px solid var(--line); }
.verb-form-arabic { text-align:center; font-size:1.55rem; line-height:1.5; font-weight:400; color:var(--navy); }
.verb-form-spanish { font-size:.86rem; line-height:1.35; color:var(--text); }
.verb-audio { justify-self:end; }
.verb-audio svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.conjugation-empty { padding:50px 0; text-align:center; color:var(--muted); }
@media (max-width:800px) { .conjugation-grid { grid-template-columns:1fr; } }
@media (max-width:600px) {
  .conjugation-library { padding:42px 0 60px; }
  .conjugation-toolbar { display:block; }
  .conjugation-search { margin-top:20px; width:100%; }
  .conjugation-filters { flex-wrap:nowrap; overflow-x:auto; padding-bottom:26px; scrollbar-width:thin; }
  .conjugation-filter { flex:0 0 auto; }
  .verb-card-head { grid-template-columns:1fr; gap:8px; text-align:center; padding:18px 16px 14px; }
  .verb-group-label { text-align:left; }
  .verb-lemma { min-width:0; font-size:2rem; }
  .verb-summary > div { padding:10px 8px 12px; }
  .verb-summary strong { font-size:1.55rem; }
  .verb-details-body { padding:2px 10px 14px; }
  .verb-form-row { grid-template-columns:minmax(95px,.85fr) minmax(0,1.45fr); gap:8px; padding:9px 8px 10px; }
  .verb-form-arabic { font-size:1.42rem; }
  .verb-form-spanish { font-size:.8rem; }
  .verb-audio { grid-column:1 / -1; justify-self:center; margin-top:1px; }
}

/* Step 6.1 — compact icon-only audio controls for Conjugación. */
.verb-audio {
  appearance:none; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; min-width:30px; min-height:30px; padding:0;
  border:1px solid rgba(23,50,77,.24); border-radius:999px; background:transparent;
  color:var(--arabe-accent-strong); cursor:pointer; box-shadow:none; justify-self:end;
}
.verb-audio:hover { background:rgba(23,50,77,.055); border-color:rgba(23,50,77,.38); }
.verb-audio:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
.verb-audio svg { width:14px; height:14px; }
@media (max-width:600px) { .verb-audio { grid-column:1 / -1; justify-self:center; margin-top:1px; } }

/* Step 7.0 — site-wide migration QA.
   Six navigation destinations no longer need to be squeezed onto one mobile line. */
@media (max-width: 700px) {
    .site-header .main-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 8px;
        width: 100%;
    }

    .site-header .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 5px 6px;
        white-space: normal;
        line-height: 1.15;
        font-size: .74rem;
    }
}

@media (max-width: 390px) {
    .site-header .main-nav a {
        font-size: .7rem;
    }
}

/* Step 7.1 — compact 3-column mobile navigation. */
@media (max-width: 700px) {
    .site-header .nav-wrap {
        gap: 3px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .site-header .main-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px 6px;
        width: 100%;
    }

    .site-header .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 28px;
        padding: 3px 4px;
        white-space: normal;
        line-height: 1.08;
        font-size: .7rem;
    }
}

@media (max-width: 390px) {
    .site-header .main-nav {
        column-gap: 4px;
    }

    .site-header .main-nav a {
        font-size: .66rem;
        padding-left: 2px;
        padding-right: 2px;
    }
}


/* Step 7.9 — page-specific color scheme */

/* 1) Essex Green only on the homepage hero ("EL ÁRABE, PASO A PASO")
   and its right-hand frame. */
.hero {
    background: #0B4F3C;
}
.hero-panel {
    background: #083F31;
}

/* 2) Desktop/tablet: top navigation bar is white on every page. */
.site-header,
.study-page .site-header {
    background: #ffffff;
    border-bottom-color: var(--line);
}
.site-header .brand,
.site-header .main-nav a,
.study-page .site-header .brand,
.study-page .site-header .main-nav a {
    color: var(--navy);
}
.site-header .main-nav a:hover,
.site-header .main-nav a.active,
.study-page .site-header .main-nav a:hover,
.study-page .site-header .main-nav a.active {
    color: var(--navy);
    border-bottom-color: var(--gold);
}

/* 3) Mobile only: Vocabulario and Frases use the original blue menu bar. */
@media (max-width: 700px) {
    .site-header.site-header-mobile-blue,
    .study-page .site-header.site-header-mobile-blue {
        background: #14253a;
        border-bottom-color: rgba(255,255,255,.12);
    }

    .site-header.site-header-mobile-blue .brand,
    .site-header.site-header-mobile-blue .main-nav a,
    .study-page .site-header.site-header-mobile-blue .brand,
    .study-page .site-header.site-header-mobile-blue .main-nav a {
        color: #e7edf3;
    }

    .site-header.site-header-mobile-blue .brand,
    .study-page .site-header.site-header-mobile-blue .brand {
        color: #fffaf0;
    }

    .site-header.site-header-mobile-blue .main-nav a.active,
    .study-page .site-header.site-header-mobile-blue .main-nav a.active {
        color: #d8b96a;
        border-bottom-color: #d8b96a;
    }
}


/* Step 8.0 — approved homepage review */

/* Four-column material overview on desktop; 2×2 on medium screens. */
@media (min-width: 901px) {
    .resource-snapshot {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .resource-stat {
        gap: 14px;
        padding: 30px 22px 29px;
    }

    .resource-stat .resource-value {
        font-size: clamp(2.45rem, 3.35vw, 3.5rem);
    }

    .resource-stat h3 {
        font-size: 1rem;
    }

    .resource-stat p {
        font-size: .84rem;
    }

    .resource-stat::after {
        left: 22px;
    }
}

@media (min-width: 701px) and (max-width: 900px) {
    .resource-snapshot {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .resource-stat + .resource-stat {
        border-top: 0;
    }

    .resource-stat:nth-child(even) {
        border-left: 1px solid #d8cfbf;
    }

    .resource-stat:nth-child(n+3) {
        border-top: 1px solid #d8cfbf;
    }
}

/* Four-step study progression on desktop. */
@media (min-width: 901px) {
    .method-path {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .method-path::before {
        left: calc(12.5% + 26px);
        right: calc(12.5% + 26px);
    }

    .method-step {
        gap: 15px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .method-step:first-child {
        padding-left: 0;
    }

    .method-step:last-child {
        padding-right: 0;
    }

    .method-step h3 {
        font-size: 1.36rem;
    }

    .method-step p {
        font-size: .86rem;
    }
}

/* Footer: recognizable website and X marks without external icon assets. */
.footer-icon-link .footer-icon-x {
    fill: currentColor;
    stroke: none;
    width: 15px;
    height: 15px;
}

.footer-icon-link .footer-icon-globe {
    fill: none;
    stroke: currentColor;
}

/* Step 8.3 — Outfit brand + native mobile hamburger menu */
.brand > span {
    font-family: "Outfit", var(--sans);
    font-weight: 700;
}

.mobile-nav-details {
    display: none;
}

@media (max-width: 700px) {
    .site-header .nav-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0 12px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .site-header .brand {
        min-width: 0;
    }

    .site-header .desktop-main-nav {
        display: none;
    }

    .site-header .mobile-nav-details {
        display: block;
        position: static;
    }

    .site-header .mobile-nav-toggle {
        display: inline-flex;
        width: 40px;
        height: 40px;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        list-style: none;
        border: 1px solid rgba(13, 38, 56, .18);
        border-radius: 10px;
        background: transparent;
        color: var(--navy);
        cursor: pointer;
        user-select: none;
    }

    .site-header .mobile-nav-toggle::-webkit-details-marker {
        display: none;
    }

    .site-header .mobile-nav-toggle::marker {
        content: "";
    }

    .site-header .mobile-nav-toggle-line {
        display: block;
        width: 18px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .2s ease, opacity .2s ease;
        transform-origin: center;
    }

    .site-header .mobile-nav-details[open] .mobile-nav-toggle-line:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .site-header .mobile-nav-details[open] .mobile-nav-toggle-line:nth-child(2) {
        opacity: 0;
    }

    .site-header .mobile-nav-details[open] .mobile-nav-toggle-line:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .site-header .mobile-main-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        padding: 6px max(18px, calc((100vw - 1120px) / 2)) 8px;
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(13, 38, 56, .10);
    }

    .site-header .mobile-main-nav a {
        display: flex;
        align-items: center;
        min-height: 43px;
        padding: 8px 0;
        color: var(--navy);
        text-decoration: none;
        font-size: .88rem;
        line-height: 1.2;
        border: 0;
    }

    .site-header .mobile-main-nav a + a {
        border-top: 1px solid rgba(13, 38, 56, .07);
    }

    .site-header .mobile-main-nav a.active {
        color: var(--navy);
        font-weight: 700;
    }

    .site-header.site-header-mobile-blue .mobile-nav-toggle,
    .study-page .site-header.site-header-mobile-blue .mobile-nav-toggle {
        color: #fffaf0;
        border-color: rgba(255, 255, 255, .28);
    }

    .site-header.site-header-mobile-blue .mobile-main-nav,
    .study-page .site-header.site-header-mobile-blue .mobile-main-nav {
        background: #14253a;
        border-top-color: rgba(255, 255, 255, .12);
        border-bottom-color: rgba(255, 255, 255, .12);
    }

    .site-header.site-header-mobile-blue .mobile-main-nav a,
    .study-page .site-header.site-header-mobile-blue .mobile-main-nav a {
        color: #e7edf3;
    }

    .site-header.site-header-mobile-blue .mobile-main-nav a + a,
    .study-page .site-header.site-header-mobile-blue .mobile-main-nav a + a {
        border-top-color: rgba(255, 255, 255, .09);
    }

    .site-header.site-header-mobile-blue .mobile-main-nav a.active,
    .study-page .site-header.site-header-mobile-blue .mobile-main-nav a.active {
        color: #d8b96a;
    }
}

/* Step 8.5 — exact mobile header alignment */
@media (max-width: 700px) {
    .site-header .nav-wrap {
        min-height: 56px;
        align-items: center;
    }

    .site-header .brand {
        display: inline-flex;
        align-items: center;
        align-self: center;
        min-height: 40px;
        margin: 0;
        line-height: 1;
    }

    .site-header .brand-logo {
        display: block;
        align-self: center;
        margin: 0;
    }

    .site-header .brand > span {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        margin: 0;
        line-height: 1;
    }

    .site-header .mobile-nav-details {
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        align-self: center;
        justify-self: end;
        line-height: 0;
    }

    .site-header .mobile-nav-toggle {
        display: flex;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        line-height: 0;
    }
}

/* Step 9.0 — approved Diccionario refinements. */
.dictionary-page .results-header h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.35rem);
    line-height: 1.1;
}

.dictionary-page .dictionary-result-card {
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 9px;
}

.dictionary-page .dictionary-result-card .result-target {
    margin-top: 7px;
}

.dictionary-page .dictionary-result-card > .dictionary-audio-actions {
    margin-top: 0;
}

.dictionary-page .dictionary-intro a {
    color: var(--navy);
    font-weight: 700;
    text-decoration-color: rgba(176, 138, 62, .72);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.dictionary-page .dictionary-intro a:hover,
.dictionary-page .dictionary-intro a:focus-visible {
    color: var(--navy-2);
    text-decoration-color: currentColor;
}

@media (max-width: 700px) {
    .dictionary-page .results-header h2 {
        font-size: clamp(1.55rem, 7vw, 1.9rem);
    }

    .dictionary-page .dictionary-result-card {
        padding: 16px 18px;
        gap: 7px;
    }

    .dictionary-page .dictionary-result-card .result-target {
        margin-top: 4px;
    }

    .dictionary-page .dictionary-result-card .dictionary-plural {
        margin-top: 0;
    }

    .dictionary-page .dictionary-result-card > .dictionary-audio-actions {
        margin-top: 1px;
    }
}

/* Step 10.0 · Diccionario visual — approved mobile intro spacing */
@media (max-width: 560px) {
    .visual-library.container {
        width: min(1120px, calc(100% - 44px));
    }

    .visual-library-intro {
        display: block;
    }

    .visual-library-intro > div:first-child > p:last-child {
        max-width: none;
    }

    .visual-count {
        width: max-content;
        min-width: 0;
        margin-top: 22px;
        padding: 0;
        border-left: 0;
    }
}

/* Step 12.0 — Frases notes readability */
.phrases-page .phrase-notes > p:last-child {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

@media (max-width: 560px) {
    .phrases-page .phrase-notes > p:last-child {
        max-width: none;
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* Step 13.0 — Conjugación page polish */
.conjugation-hero {
    background: var(--navy);
}

.conjugation-a1-note {
    margin: -10px 0 34px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 10px;
    background: var(--paper);
}

.conjugation-a1-note .eyebrow {
    margin: 0 0 6px;
}

.conjugation-a1-note p:last-child {
    margin: 0;
    color: var(--text);
    line-height: 1.55;
}

@media (max-width: 600px) {
    .conjugation-a1-note {
        margin-top: -6px;
        margin-bottom: 26px;
        padding: 16px 18px;
    }
}

/* Step 13.1 — Conjugación responsive typography refinements */
.conjugation-a1-note p:last-child {
    font-size: 0.9rem;
}

@media (max-width: 700px) {
    .conjugation-library-head h2,
    .conjugation-section-head h2 {
        font-size: 1.55rem;
        line-height: 1.15;
        margin-bottom: 18px;
    }

    .conjugation-search,
    .conjugation-search-wrap {
        margin-top: 12px;
    }

    .conjugation-a1-note p:last-child {
        font-size: 0.86rem;
    }
}

/* Step 13.2 — Fix mobile Conjugación toolbar using the actual markup */
@media (max-width: 600px) {
    .conjugation-toolbar h2 {
        font-size: 1.55rem;
        line-height: 1.15;
    }

    .conjugation-search {
        margin-top: 28px;
    }
}

/* Step 13.3 — Mobile Conjugación toolbar: separate rows */
@media (max-width: 600px) {
    .conjugation-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .conjugation-toolbar h2 {
        margin: 0;
    }

    .conjugation-search {
        width: 100%;
        margin-top: 0;
    }
}

/* Landing heading typography parity with English C1 */
.study-space-heading h2,
.resource-heading h2,
.method-heading h2 {
    font-size: 2.2rem;
}

@media (max-width: 700px) {
    .study-space-heading h2,
    .resource-heading h2,
    .method-heading h2 {
        font-size: clamp(1.85rem, 8vw, 2rem);
    }
}

/* Landing mobile — tighter spacing between major sections only.
   Internal card, resource-row and method-step spacing is intentionally unchanged. */
@media (max-width: 700px) {
    .cards-section {
        padding-bottom: 40px;
    }

    .resource-highlights {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    .method-section {
        padding-top: 36px;
    }
}

/* Final Arabic readability refinement.
   Use Noto Naskh Arabic Regular consistently for learner-facing phrase text
   in both translation directions, on desktop and mobile. */
.phrases-page.direction-ar-es .study-prompt h2.arabic-study-text,
.phrases-page.direction-es-ar .translation-text.arabic-text {
    font-family: var(--arabic-font);
    font-weight: 400;
}

/* =========================================================
   Open education / Creative Commons footer
   Adapted from the English C1 reference footer.
   ========================================================= */
.footer-open-education {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: center;
    padding-top: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-oer-identity { display: flex; align-items: center; gap: 15px; min-width: 0; }
.footer-oer-logo-stack { display: grid; justify-items: start; gap: 7px; flex: 0 0 auto; }
.footer-oer-logo-link { display: inline-flex; flex: 0 0 auto; border-radius: 8px; overflow: visible; padding-top: 3px; }
.footer-oer-logo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.footer-oer-logo { display: block; width: 76px; height: auto; max-height: none; object-fit: contain; overflow: visible; }
.footer-oer-copy { display: grid; gap: 3px; min-width: 0; }
.footer-oer-copy strong { color: #fff; font-size: .88rem; line-height: 1.2; }
.footer-oer-copy span { color: rgba(255,255,255,.72); font-size: .72rem; line-height: 1.4; }
.footer-oer-credit { max-width: 150px; margin: 0; padding: 0; color: rgba(255,255,255,.48); font-size: .56rem; line-height: 1.35; text-align: left; }
.footer-oer-credit a { color: inherit; text-underline-offset: 2px; }
.footer-license-block { min-width: 0; }
.footer-cc-license { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: .76rem; font-weight: 700; text-decoration: none; }
.footer-cc-license:hover, .footer-cc-license:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.footer-cc-license:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.footer-cc-badge { display: block; width: 88px; height: 31px; object-fit: contain; }
.footer-license-copy { max-width: 720px; margin: 9px 0 0; color: rgba(255,255,255,.7); font-size: .7rem; line-height: 1.5; }
.footer-inner.footer-inner-links-only { min-height: auto; justify-content: center; padding-top: 15px; padding-bottom: 15px; }
.footer-inner-links-only .footer-links { width: auto; justify-content: center; }
.footer-inner-links-only .footer-contact-link, .footer-inner-links-only .footer-icon-link { flex: 0 0 auto; }

@media (max-width: 700px) {
    .footer-open-education { grid-template-columns: 1fr; gap: 30px; padding-top: 22px; padding-bottom: 20px; }
    .footer-oer-identity { align-items: flex-start; justify-content: center; gap: 16px; text-align: left; }
    .footer-oer-logo-stack { justify-items: center; }
    .footer-oer-logo { width: 68px; }
    .footer-oer-credit { max-width: 145px; text-align: center; font-size: .55rem; }
    .footer-license-block { margin-top: 4px; text-align: center; }
    .footer-cc-license { justify-content: center; }
    .footer-license-copy { margin-left: auto; margin-right: auto; max-width: 560px; }
    .footer-inner.footer-inner-links-only { padding-top: 14px; padding-bottom: 16px; }
}

@media (min-width: 701px) {
    .footer-oer-identity { align-items: flex-start !important; padding-top: 10px !important; overflow: visible !important; }
    .footer-oer-logo-stack { padding-top: 6px !important; overflow: visible !important; }
    .footer-oer-logo-link { display: inline-flex !important; align-items: flex-start !important; justify-content: center !important; width: 68px !important; height: 54px !important; padding: 3px 0 0 !important; margin: 0 !important; line-height: normal !important; overflow: visible !important; }
    .footer-oer-logo { display: block !important; flex: 0 0 auto !important; width: 68px !important; height: 51px !important; min-width: 68px !important; min-height: 51px !important; max-width: 68px !important; max-height: 51px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; overflow: visible !important; }
}