@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;
}

/* =========================================================
   Árabe A1-style study Listen controls — v5
   The visual treatment is copied from the sister site's
   compact speaker-pill control. The button is reset first so
   older generic study-action rules cannot inflate it on mobile.
   ========================================================= */

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

/* Base compact speaker pill, matching Árabe A1. */
.phrases-page .phrase-listen,
.vocabulary-page .vocabulary-listen {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    width: 106px;
    min-width: 106px;
    max-width: 106px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid rgba(23, 50, 77, .24);
    border-radius: 999px;
    background: transparent;
    color: var(--navy);
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
}

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

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

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

/* Desktop: retain the requested equal-width Listen / Next layout. */
@media (min-width: 701px) {
    .phrases-page .vocabulary-main-actions,
    .vocabulary-page .vocabulary-main-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen,
    .phrases-page .vocabulary-main-actions > .button-navy,
    .vocabulary-page .vocabulary-main-actions > .button-navy {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 40px;
        justify-self: stretch !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen {
        border-radius: 8px;
        padding: 10px 14px;
        font-size: .9rem;
    }
}

/* Mobile: exactly the compact Árabe A1-style speaker pill.
   The parent is explicitly flex so older grid/equal-width rules cannot
   make the Listen control occupy half or all of the row. */
@media (max-width: 700px) {
    .phrases-page .vocabulary-main-actions,
    .vocabulary-page .vocabulary-main-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen {
        all: unset !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .38rem !important;
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 5px 8px !important;
        border: 1px solid rgba(23, 50, 77, .24) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--navy) !important;
        font-family: var(--sans) !important;
        font-size: .7rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen:hover:not(:disabled),
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen:hover:not(:disabled) {
        background: rgba(23, 50, 77, .055) !important;
        border-color: rgba(23, 50, 77, .38) !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen:focus-visible,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen:focus-visible {
        outline: 2px solid var(--gold) !important;
        outline-offset: 2px !important;
    }

    .phrases-page .vocabulary-main-actions > .phrase-listen:disabled,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen:disabled {
        opacity: .55 !important;
        cursor: wait !important;
    }

    .phrases-page .vocabulary-main-actions > .button-navy,
    .vocabulary-page .vocabulary-main-actions > .button-navy {
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}



/* v6 — hard-lock the speaker SVG intrinsic dimensions.
   HTML also carries width/height attributes so a stale cached stylesheet
   cannot inflate the icon to the browser's default 300×150 SVG size. */
.dictionary-speaker-icon {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
}

/* =========================================================
   v7 — Mobile Listen button corner radius
   Match the rounded-corner treatment used by the desktop
   Listen control instead of the fully pill-shaped mobile rule.
   ========================================================= */
@media (max-width: 700px) {
    .phrases-page .vocabulary-main-actions > .phrase-listen,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen {
        border-radius: 8px !important;
    }
}

/* =========================================================
   v8 — Definitive rounded mobile Listen control
   Apply rounding to the actual button box and clip its
   background/border so no native square corners can show.
   ========================================================= */
@media (max-width: 700px) {
    body.phrases-page button.phrase-listen.dictionary-listen,
    body.vocabulary-page button.vocabulary-listen.dictionary-listen {
        -webkit-appearance: none !important;
        appearance: none !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        background-clip: padding-box !important;
    }
}

/* =========================================================
   v9 — Exact Árabe A1 mobile Listen-button treatment
   These rules intentionally mirror the sister site's
   .phrase-listen / .vocabulary-listen component.
   ========================================================= */

.phrases-page .phrase-listen,
.vocabulary-page .vocabulary-listen {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .38rem !important;
    flex: 0 0 106px !important;
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
    min-height: 30px !important;
    height: auto !important;
    max-height: none !important;
    padding: 5px 9px !important;
    border: 1px solid rgba(23, 50, 77, .24) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--navy) !important;
    font: inherit !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    overflow: visible !important;
}

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

.phrases-page .phrase-listen:focus-visible,
.vocabulary-page .vocabulary-listen:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
}

.phrases-page .phrase-listen:disabled,
.vocabulary-page .vocabulary-listen:disabled {
    opacity: .55 !important;
    cursor: wait !important;
}

@media (max-width: 700px) {
    .phrases-page .phrase-listen,
    .vocabulary-page .vocabulary-listen,
    body.phrases-page button.phrase-listen.dictionary-listen,
    body.vocabulary-page button.vocabulary-listen.dictionary-listen,
    .phrases-page .vocabulary-main-actions > .phrase-listen,
    .vocabulary-page .vocabulary-main-actions > .vocabulary-listen {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .38rem !important;
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        min-height: 30px !important;
        height: auto !important;
        max-height: none !important;
        padding: 5px 8px !important;
        border: 1px solid rgba(23, 50, 77, .24) !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: var(--navy) !important;
        font: inherit !important;
        font-size: .7rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
}

/* =========================================================
   v10 — Mobile study actions: equal-width buttons
   Listen and Next word / Next phrase each occupy 50% of the
   available action row while retaining the Árabe A1 styling.
   ========================================================= */
@media (max-width: 700px) {
    body.phrases-page .vocabulary-main-actions,
    body.vocabulary-page .vocabulary-main-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    body.phrases-page .vocabulary-main-actions > .phrase-listen,
    body.vocabulary-page .vocabulary-main-actions > .vocabulary-listen,
    body.phrases-page .vocabulary-main-actions > .button-navy,
    body.vocabulary-page .vocabulary-main-actions > .button-navy {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        justify-self: stretch !important;
        flex: none !important;
    }

    body.phrases-page .vocabulary-main-actions > .phrase-listen,
    body.vocabulary-page .vocabulary-main-actions > .vocabulary-listen {
        min-height: 30px !important;
        height: auto !important;
        border-radius: 999px !important;
    }
}

/* =========================================================
   v11 — Mobile Listen button fills its 50% grid cell
   Override the earlier Árabe A1 fixed 104px button width.
   ========================================================= */
@media (max-width: 700px) {
    html body.phrases-page .study-actions.has-audio.vocabulary-main-actions > button.dictionary-listen.phrase-listen,
    html body.vocabulary-page .study-actions.has-audio.vocabulary-main-actions > button.dictionary-listen.vocabulary-listen {
        box-sizing: border-box !important;
        display: inline-flex !important;
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        min-height: 30px !important;
        height: auto !important;
        padding: 5px 8px !important;
        border-radius: 999px !important;
    }
}

/* =========================================================
   v14 — Header brand typography
   Exact current Árabe A1 treatment:
   keep the existing .brand sizing/layout, but apply Outfit
   only to the text span inside the brand.
   ========================================================= */
.brand > span {
    font-family: "Outfit", var(--sans);
    font-weight: 700;
}

/* =========================================================
   v15 — Dictionary Listen buttons
   Same visual language as Vocabulary / Phrases, but smaller
   because dictionary cards use these as secondary actions.
   ========================================================= */

.dictionary-page .dictionary-audio-actions .dictionary-listen {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .32rem !important;

    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    min-height: 27px !important;
    height: 27px !important;
    max-height: 27px !important;

    padding: 4px 7px !important;
    border: 1px solid rgba(23, 50, 77, .24) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--navy) !important;

    font: inherit !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

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

.dictionary-page .dictionary-audio-actions .dictionary-listen:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
}

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

.dictionary-page .dictionary-audio-actions .dictionary-speaker-icon {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    flex: 0 0 12px !important;
    fill: currentColor !important;
}

/* Keep dictionary audio controls compact on phones as well. */
@media (max-width: 700px) {
    .dictionary-page .dictionary-result-card .dictionary-audio-actions {
        justify-content: center !important;
        gap: 7px !important;
    }

    .dictionary-page .dictionary-audio-actions .dictionary-listen,
    .dictionary-page .dictionary-audio-actions.single-action .dictionary-listen {
        flex: 0 0 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        min-height: 27px !important;
        height: 27px !important;
        max-height: 27px !important;
        padding: 4px 6px !important;
        border-radius: 999px !important;
        font-size: .64rem !important;
    }
}

/* =========================================================
   v16 — Dictionary Listen control alignment + rounded shape
   The dictionary.php v2 markup no longer uses .button-audio,
   so target the actual result-actions structure directly.
   ========================================================= */

.dictionary-page .result-actions > button.dictionary-listen {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;

    flex: 0 0 88px !important;
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 27px !important;
    min-height: 27px !important;
    max-height: 27px !important;

    margin: 0 !important;
    padding: 0 7px !important;
    border: 1px solid rgba(23, 50, 77, .24) !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    color: var(--navy) !important;

    font-family: var(--sans) !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.dictionary-page .result-actions > button.dictionary-listen > .dictionary-speaker-icon {
    display: block !important;
    flex: 0 0 12px !important;
    width: 12px !important;
    min-width: 12px !important;
    max-width: 12px !important;
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    fill: currentColor !important;
    vertical-align: middle !important;
}

.dictionary-page .result-actions > button.dictionary-listen > span {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.dictionary-page .result-actions > button.dictionary-listen:hover:not(:disabled) {
    background: rgba(23, 50, 77, .055) !important;
    border-color: rgba(23, 50, 77, .38) !important;
}

.dictionary-page .result-actions > button.dictionary-listen:focus-visible {
    outline: 2px solid var(--gold) !important;
    outline-offset: 2px !important;
}

.dictionary-page .result-actions > button.dictionary-listen:disabled {
    opacity: .55 !important;
    cursor: wait !important;
}

@media (max-width: 700px) {
    .dictionary-page .result-actions > button.dictionary-listen {
        flex: 0 0 86px !important;
        width: 86px !important;
        min-width: 86px !important;
        max-width: 86px !important;
        height: 27px !important;
        min-height: 27px !important;
        max-height: 27px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        font-size: .64rem !important;
    }
}

/* =========================================================
   v17 — Landing page typography refinement
   Approved adjustments:
   1) Slightly reduce the main hero title.
   2) Reduce ordinary section headings on mobile.
   3) Reduce resource statistics on mobile.
   4) Reduce the editorial "Built for learners..." heading,
      especially on mobile.
   ========================================================= */

/* 1) Hero title: retain prominence with a slightly tighter scale. */
.hero h1 {
    font-size: clamp(3rem, 6vw, 4.8rem);
}

/* 4) Editorial practical heading: keep it expressive, but with a lower ceiling. */
.practical-copy h2 {
    font-size: clamp(2.1rem, 3.6vw, 3.35rem);
    line-height: 1.08;
}

@media (max-width: 700px) {
    /* 1) Hero title — mobile. */
    .hero h1 {
        font-size: clamp(2.65rem, 11vw, 2.9rem);
        line-height: 1;
    }

    /* 2) Main landing-page section headings — mobile. */
    .cards-section .section-heading h2,
    .resource-highlights .section-heading h2,
    .method-section .section-heading h2 {
        font-size: clamp(1.85rem, 8vw, 2rem);
        line-height: 1.12;
    }

    /* 3) Resource figures — mobile. */
    .resource-snapshot .resource-value {
        font-size: clamp(2.05rem, 9vw, 2.25rem);
        line-height: 1;
    }

    /* 4) Editorial practical heading — mobile. */
    .practical-copy h2 {
        font-size: clamp(1.9rem, 8vw, 2rem);
        line-height: 1.1;
    }
}

/* =========================================================
   v18 — Landing page mobile inter-section rhythm
   Reduce only the vertical whitespace between the major
   homepage sections. Internal card/resource/method spacing
   is intentionally left unchanged.
   ========================================================= */
@media (max-width: 700px) {
    /* Built for focused learning */
    .cards-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* Serious practice, freely available. */
    .resource-highlights {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* Read. Think. Check. */
    .method-section {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* Built for learners who already know the rules. */
    .practical-section {
        padding-top: 32px !important;
        padding-bottom: 40px !important;
    }
}

/* =========================================================
   v19 — Open education / Creative Commons 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-link {
    display: inline-flex;
    flex: 0 0 auto;
    border-radius: 8px;
}

.footer-oer-logo-link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.footer-oer-logo {
    display: block;
    width: 72px;
    height: auto;
}

.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-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-oer-credit {
    padding-top: 0;
    padding-bottom: 15px;
    color: rgba(255, 255, 255, .48);
    font-size: .59rem;
    line-height: 1.35;
}

.footer-oer-credit a {
    color: inherit;
    text-underline-offset: 2px;
}

@media (max-width: 700px) {
    .footer-open-education {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 22px;
        padding-bottom: 20px;
    }

    .footer-oer-identity {
        justify-content: center;
        text-align: left;
    }

    .footer-oer-logo {
        width: 64px;
    }

    .footer-license-block {
        text-align: center;
    }

    .footer-cc-license {
        justify-content: center;
    }

    .footer-license-copy {
        margin-left: auto;
        margin-right: auto;
        max-width: 560px;
    }

    .footer-oer-credit {
        text-align: center;
        padding-bottom: 14px;
    }
}

/* =========================================================
   v20 — Open education footer refinements
   ========================================================= */

/* OER logo + credit are treated as one visual unit. */
.footer-oer-logo-stack {
    display: grid;
    justify-items: start;
    gap: 7px;
    flex: 0 0 auto;
}

.footer-oer-logo-link {
    overflow: visible;
    padding-top: 3px;
}

.footer-oer-logo {
    display: block;
    width: 76px;
    height: auto;
    max-height: none;
    object-fit: contain;
    overflow: visible;
}

.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;
}

/* The lower footer row now contains only contact / social links. */
.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;
}

/* Remove any inherited spacing intended for the old copyright + links layout. */
.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 {
        gap: 30px;
    }

    .footer-oer-identity {
        align-items: flex-start;
        justify-content: center;
        gap: 16px;
    }

    .footer-oer-logo-stack {
        justify-items: center;
    }

    .footer-oer-logo {
        width: 68px;
    }

    .footer-oer-credit {
        max-width: 145px;
        text-align: center;
        font-size: .55rem;
    }

    /* Extra separation between the OER identity and CC licence area. */
    .footer-license-block {
        margin-top: 4px;
    }

    .footer-inner.footer-inner-links-only {
        padding-top: 14px;
        padding-bottom: 16px;
    }
}

/* =========================================================
   v21 — Desktop OER logo clipping fix
   Mobile already renders correctly, so this adjustment is
   intentionally limited to desktop/tablet layouts.
   ========================================================= */
@media (min-width: 701px) {
    .footer-oer-identity,
    .footer-oer-logo-stack,
    .footer-oer-logo-link {
        overflow: visible !important;
    }

    .footer-oer-identity {
        align-items: flex-start !important;
        padding-top: 8px !important;
    }

    .footer-oer-logo-stack {
        padding-top: 4px !important;
    }

    .footer-oer-logo-link {
        display: block !important;
        padding-top: 0 !important;
        line-height: 0 !important;
    }

    .footer-oer-logo {
        display: block !important;
        width: 76px !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center top !important;
        overflow: visible !important;
    }
}

/* =========================================================
   v22 — Desktop OER logo: match the proven mobile rendering
   The SVG itself is fine. The mobile version renders correctly,
   so desktop now uses the same physical logo scale and an explicit
   image box with extra top breathing room.
   ========================================================= */
@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;
    }
}