:root {
    color-scheme: light;
    --blue-france: #000091;
    --blue-france-hover: #1212ff;
    --blue-ink: #161673;
    --red-marianne: #e1000f;
    --red-dark: #b6000c;
    --ink: #1e1e2a;
    --muted: #5a5a6e;
    --paper: #fff;
    --ground: #f6f6fe;
    --line: #dddded;
    --success: #18753c;
    font-family: Marianne, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--ground);
}

.hero-proof { margin-top: .75rem; color: var(--muted); font-size: .92rem; }
.free-quiz-count { display: flex; align-items: baseline; gap: .25rem; color: var(--blue); }
.free-quiz-count strong { font-size: 2.5rem; }
.result-conversion { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin: 1.5rem 0; padding: 1.5rem; border-left: 5px solid var(--red); }
.explanation-language-switcher { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.explanation-language-switcher a { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; }
.explanation-language-switcher a.is-active { color: #fff; background: var(--blue); border-color: var(--blue); }
@media (max-width: 700px) { .result-conversion { align-items: stretch; flex-direction: column; } }

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        linear-gradient(120deg, rgb(0 0 145 / 5%), transparent 30rem),
        var(--ground);
}

a {
    color: inherit;
}

button,
input,
textarea {
    font: inherit;
}

.tricolour {
    position: relative;
    z-index: 20;
    display: grid;
    height: .42rem;
    grid-template-columns: repeat(3, 1fr);
    direction: ltr;
}

.tricolour span:nth-child(1) {
    background: var(--blue-france);
}

.tricolour span:nth-child(2) {
    background: #fff;
}

.tricolour span:nth-child(3) {
    background: var(--red-marianne);
}

.site-header {
    position: relative;
    z-index: 10;
    display: flex;
    width: min(76rem, calc(100% - 2rem));
    min-height: 5.5rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 auto;
}

.site-header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--blue-france), #fff 50%, var(--red-marianne));
    content: "";
    opacity: .3;
}

.site-header nav {
    display: flex;
    align-items: center;
    gap: 1.15rem;
}

.nav-form {
    margin: 0;
}

.site-header nav > a:not(.button),
.text-link,
.back-link {
    color: var(--blue-france);
    font-weight: 750;
    text-decoration-thickness: .08em;
    text-underline-offset: .25em;
}

.site-header nav > a:not(.button):hover,
.text-link:hover,
.back-link:hover {
    color: var(--red-dark);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    color: var(--blue-france);
    font-size: 1.45rem;
    font-weight: 750;
    letter-spacing: -.035em;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border-radius: .15rem;
    background: linear-gradient(90deg, var(--blue-france) 0 33.333%, #fff 33.333% 66.666%, var(--red-marianne) 66.666%);
    box-shadow: 0 0 0 1px rgb(0 0 145 / 16%);
    color: transparent;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: -.06em;
    direction: ltr;
}

.brand-name strong {
    color: var(--red-marianne);
    font-weight: inherit;
}

.language-switcher {
    position: relative;
}

.language-switcher summary {
    display: flex;
    min-height: 2.55rem;
    align-items: center;
    gap: .45rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    border-radius: .25rem;
    background: var(--paper);
    color: var(--blue-france);
    font-size: .85rem;
    font-weight: 800;
    list-style: none;
    cursor: pointer;
}

.language-switcher summary::-webkit-details-marker {
    display: none;
}

.language-switcher summary::after {
    content: "⌄";
    font-size: 1rem;
    line-height: .75;
}

.language-menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    display: grid;
    min-width: 12rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: var(--paper);
    box-shadow: 0 1rem 2.5rem rgb(22 22 115 / 16%);
}

.language-menu a {
    padding: .72rem .9rem;
    text-decoration: none;
}

.language-menu a:hover,
.language-menu a[aria-current="true"] {
    background: #ececfe;
    color: var(--blue-france);
    font-weight: 750;
}

.shell {
    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 7rem) 0;
}

.shell-narrow {
    width: min(46rem, calc(100% - 2rem));
}

.hero {
    position: relative;
    display: grid;
    min-height: 40rem;
    grid-template-columns: minmax(0, 1.28fr) minmax(18rem, .72fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);
}

.hero::before {
    position: absolute;
    z-index: -1;
    top: 8%;
    right: -8vw;
    width: 30rem;
    height: 30rem;
    border: 5rem solid rgb(225 0 15 / 4%);
    border-radius: 50%;
    content: "";
}

.hero-copy {
    padding: 2rem 0;
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--red-marianne);
    font-size: .77rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}

h1,
h2 {
    text-wrap: balance;
}

h1 {
    max-width: 12ch;
    margin: 0;
    color: var(--blue-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.25rem, 7.4vw, 6.6rem);
    font-weight: 500;
    line-height: .94;
    letter-spacing: -.055em;
}

h1::first-line {
    color: var(--blue-france);
}

h1.page-title {
    max-width: 19ch;
    font-size: clamp(2.7rem, 6vw, 5rem);
}

h2 {
    margin-top: .5rem;
    color: var(--blue-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.lede {
    max-width: 48rem;
    margin: 1.8rem 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 2vw, 1.28rem);
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 2rem;
}

.level-section {
    padding-top: clamp(4rem, 7vw, 6.5rem);
    padding-bottom: 0;
}

.level-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.level-card {
    position: relative;
    display: flex;
    min-height: 22rem;
    flex-direction: column;
    padding: 1.55rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: .35rem solid var(--blue-france);
    border-radius: .35rem;
    background: var(--paper);
    box-shadow: 0 .8rem 2rem rgb(22 22 115 / 7%);
}

.level-card-cr {
    border-top-color: #6a6af4;
}

.level-card-naturalisation {
    border-top-color: var(--red-marianne);
}

.level-card header,
.level-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.level-card header > strong {
    padding: .3rem .55rem;
    border-radius: .2rem;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .78rem;
    letter-spacing: .08em;
}

.level-number {
    color: var(--red-marianne);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.1rem;
}

.level-card h3 {
    margin: 1.6rem 0 .75rem;
    color: var(--blue-ink);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.65rem;
    font-weight: 500;
    line-height: 1.15;
}

.level-card > p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

.level-card-meta {
    margin: auto 0 1.3rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .78rem;
}

.level-language-note {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.official-framework {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    border-top: 1px solid #d8d8ef;
    background: linear-gradient(135deg, #f3f3fd 0 48%, #fff4f4 48% 100%);
}

.official-source-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 2rem;
}

.official-source-grid article {
    display: flex;
    min-height: 18rem;
    flex-direction: column;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-bottom: .3rem solid var(--blue-france);
    background: rgb(255 255 255 / 92%);
}

.official-source-grid article:last-child {
    border-bottom-color: var(--red-marianne);
}

.official-source-grid article > span {
    color: var(--red-marianne);
    font-family: Georgia, serif;
    font-size: 1.9rem;
}

.official-source-grid h3 {
    margin: 1rem 0 .65rem;
    color: var(--blue-ink);
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.official-source-grid p {
    margin: 0 0 1rem;
    color: var(--muted);
    line-height: 1.55;
}

.official-source-grid .text-link {
    margin-top: auto;
}

.official-verified {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: .8rem;
}

.independent-note {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    padding-left: 1rem;
    border-left: 3px solid var(--red-marianne);
    color: var(--muted);
    font-size: .84rem;
    line-height: 1.5;
}

.button {
    display: inline-flex;
    min-height: 3.15rem;
    align-items: center;
    justify-content: center;
    padding: .82rem 1.3rem;
    border: 2px solid var(--blue-france);
    border-radius: .2rem;
    background: var(--blue-france);
    box-shadow: 0 .25rem 0 #00006d;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .15s;
}

.button:hover {
    background: var(--blue-france-hover);
    box-shadow: 0 .15rem 0 #00006d;
    transform: translateY(.1rem);
}

.button-small {
    min-height: 2.45rem;
    padding: .52rem .85rem;
    box-shadow: none;
}

.button-outline {
    background: transparent;
    box-shadow: none;
    color: var(--blue-france);
}

.button:disabled {
    border-color: #9292a8;
    background: #9292a8;
    box-shadow: none;
    cursor: not-allowed;
    opacity: .7;
    transform: none;
}

.republic-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    border: 1px solid rgb(0 0 145 / 15%);
    border-radius: .4rem;
    background: #fff;
    box-shadow: 1.2rem 1.2rem 0 #e3e3fd;
}

.republic-card::after {
    position: absolute;
    right: -4.5rem;
    bottom: -5rem;
    width: 12rem;
    height: 12rem;
    border: 2.5rem solid rgb(225 0 15 / 7%);
    border-radius: 50%;
    content: "";
}

.republic-symbol {
    display: grid;
    width: 7.2rem;
    height: 7.2rem;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    margin-bottom: 2rem;
    border-radius: 50%;
    box-shadow: 0 0 0 .5rem #f2f2fb;
    direction: ltr;
}

.republic-symbol span {
    display: grid;
    place-items: center;
}

.republic-blue {
    background: var(--blue-france);
}

.republic-white {
    background: #fff;
    color: var(--ink);
    font-family: Georgia, serif;
    font-size: .95rem;
    font-weight: 700;
}

.republic-red {
    background: var(--red-marianne);
}

.republic-motto {
    color: var(--red-marianne);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.republic-card h2 {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

.republic-card > p:last-child {
    position: relative;
    z-index: 1;
    color: var(--muted);
    line-height: 1.6;
}

.values-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--blue-france);
    color: #fff;
}

.values-strip span {
    padding: 1.25rem;
    border-right: 1px solid rgb(255 255 255 / 30%);
    font-family: Georgia, serif;
    font-size: clamp(1rem, 2vw, 1.35rem);
    text-align: center;
}

.values-strip span:last-child {
    border-right: 0;
    background: var(--red-marianne);
}

.content-section {
    padding-top: clamp(4.5rem, 8vw, 7.5rem);
}

.section-heading {
    display: grid;
    max-width: 56rem;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    column-gap: 3rem;
}

.section-heading .eyebrow {
    grid-column: 1 / -1;
}

.section-heading h2 {
    margin: 0;
}

.section-heading > p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 3.5rem 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: var(--line);
}

.metrics article {
    position: relative;
    display: flex;
    min-height: 8.5rem;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    padding: 1.5rem;
    background: var(--paper);
}

.metrics article::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .28rem;
    background: var(--blue-france);
    content: "";
}

.metrics article:nth-child(2)::before {
    background: linear-gradient(90deg, var(--blue-france), var(--red-marianne));
}

.metrics article:nth-child(3)::before {
    background: var(--red-marianne);
}

.metrics strong {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
}

.metrics span {
    color: var(--muted);
}

.home-grid,
.dashboard-grid,
.support-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
}

.themes,
.explanation-card,
.panel {
    border-radius: .4rem;
}

.themes {
    padding: clamp(1.6rem, 4vw, 2.7rem);
    background: var(--blue-france);
    color: #fff;
}

.themes .card-kicker {
    color: #ffb7bc;
}

.themes h2 {
    margin: .4rem 0 1.4rem;
    color: #fff;
}

.themes ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.themes li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 0;
    border-top: 1px solid rgb(255 255 255 / 24%);
    line-height: 1.35;
}

.themes li strong {
    display: grid;
    min-width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--blue-france);
}

.explanation-card {
    position: relative;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 2.7rem);
    border: 1px solid #ffc9cc;
    background: #fff5f5;
}

.explanation-card::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 5.5rem;
    height: .5rem;
    background: linear-gradient(90deg, var(--blue-france) 0 33%, #fff 33% 66%, var(--red-marianne) 66%);
    content: "";
}

.explanation-card > p:not(.card-kicker) {
    color: var(--muted);
    line-height: 1.65;
}

.card-kicker {
    color: var(--red-marianne);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.check-list {
    display: grid;
    gap: .8rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    position: relative;
    padding-left: 1.8rem;
    line-height: 1.45;
}

.check-list li::before {
    position: absolute;
    top: .05rem;
    left: 0;
    display: grid;
    width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    content: "✓";
    font-size: .72rem;
    font-weight: 900;
}

.language-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.language-pills span {
    padding: .4rem .65rem;
    border: 1px solid #d6d6ef;
    border-radius: 99rem;
    background: #fff;
    color: var(--blue-france);
    font-size: .78rem;
    font-weight: 750;
}

.panel {
    padding: clamp(1.4rem, 4vw, 2.25rem);
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 .75rem 2.5rem rgb(0 0 145 / 6%);
}

.form-stack {
    display: grid;
    gap: 1.1rem;
    margin-top: 2rem;
}

.form-stack label {
    display: grid;
    gap: .45rem;
    color: var(--blue-ink);
    font-weight: 750;
}

.form-stack input:not([type="checkbox"]),
.form-stack textarea {
    width: 100%;
    padding: .85rem .95rem;
    border: 1px solid #aaaac0;
    border-radius: .2rem;
    background: #fff;
    color: var(--ink);
}

.form-stack input:focus,
.form-stack textarea:focus {
    border-color: var(--blue-france);
    outline: 3px solid rgb(0 0 145 / 16%);
}

.form-stack small,
.ticket-row small {
    color: var(--muted);
    font-weight: 500;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.check-row {
    display: flex !important;
    align-items: flex-start;
    font-weight: 500 !important;
    line-height: 1.5;
}

.check-row input {
    margin-top: .3rem;
}

.form-errors,
.flash {
    width: min(72rem, calc(100% - 2rem));
    margin: 1rem auto;
    padding: 1rem 1.2rem;
    border-left: 4px solid var(--red-marianne);
    border-radius: .2rem;
    background: #fff0f0;
    color: #8f0009;
}

.flash-success {
    border-left-color: var(--success);
    background: #e3fdeb;
    color: #0c5c2e;
}

.form-foot {
    text-align: center;
}

.dashboard-grid,
.support-grid {
    margin-top: 3rem;
}

.access-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem 1.2rem;
    border: 1px solid #c9c9ec;
    border-left: .35rem solid var(--blue-france);
    border-radius: .3rem;
    background: #f5f5fe;
}

.access-status.is-paid {
    border-color: #b8e8c8;
    border-left-color: var(--success);
    background: #edfff3;
}

.access-status-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.access-status.is-paid .access-status-icon {
    background: var(--success);
}

.access-status strong {
    color: var(--blue-ink);
}

.access-status p {
    margin: .2rem 0 0;
    color: var(--muted);
    font-size: .87rem;
    line-height: 1.45;
}

.feature-card,
.ticket-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-card p {
    color: var(--muted);
    line-height: 1.6;
}

.feature-card .button,
.feature-card .text-link {
    margin-top: auto;
}

.ticket-list {
    gap: .8rem;
}

.ticket-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    text-decoration: none;
}

.ticket-row:hover strong {
    color: var(--blue-france);
}

.ticket-row span {
    display: grid;
    gap: .25rem;
}

.ticket-row em {
    color: var(--muted);
    font-size: .82rem;
    font-style: normal;
    text-align: end;
}

.conversation {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.message {
    max-width: 88%;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: #fff;
}

.message-user {
    justify-self: end;
    border-color: #c9c9f4;
    background: #ececfe;
}

.message header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: .8rem;
}

.message p {
    margin-bottom: 0;
    line-height: 1.55;
}

.inline-form {
    margin-top: 1rem;
    text-align: end;
}

.text-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--red-dark);
    text-decoration: underline;
    cursor: pointer;
}

.site-footer {
    display: grid;
    width: min(72rem, calc(100% - 2rem));
    grid-template-columns: .8fr 1.2fr 1fr;
    align-items: start;
    gap: 2rem;
    margin: 2rem auto 0;
    padding: 2.5rem 0 3rem;
    border-top: .35rem solid;
    border-image: linear-gradient(90deg, var(--blue-france) 0 33%, #ddd 33% 66%, var(--red-marianne) 66%) 1;
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.5;
}

.footer-brand {
    display: grid;
    gap: .35rem;
}

.site-footer strong {
    color: var(--blue-france);
    font-size: 1.15rem;
}

.site-footer p {
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem 1rem;
}

.footer-links a {
    color: var(--blue-france);
    font-weight: 700;
    text-underline-offset: .2em;
}

.footer-preferences {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--blue-france);
    font-weight: 700;
    text-align: start;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

.analytics-consent {
    position: fixed;
    z-index: 100;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    width: min(58rem, calc(100% - 2rem));
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--line);
    border-top: .35rem solid var(--blue-france);
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 1rem 3rem rgb(0 0 0 / 22%);
}

.analytics-consent[hidden] {
    display: none;
}

.analytics-consent strong {
    color: var(--blue-france);
    font-size: 1.05rem;
}

.analytics-consent p {
    max-width: 42rem;
    margin: .35rem 0 .25rem;
    color: var(--muted);
    line-height: 1.45;
}

.analytics-consent a {
    color: var(--blue-france);
    font-size: .85rem;
    font-weight: 700;
}

.analytics-consent-actions {
    display: flex;
    flex: 0 0 auto;
    gap: .75rem;
}

.pricing-shell {
    width: min(68rem, calc(100% - 2rem));
}

.pricing-heading {
    max-width: 52rem;
    margin: 0 auto 3rem;
    text-align: center;
}

.pricing-heading .page-title,
.pricing-heading .lede {
    margin-right: auto;
    margin-left: auto;
}

.pricing-free-tier {
    display: flex;
    max-width: 48rem;
    align-items: center;
    gap: 1.3rem;
    margin: 0 auto 1.5rem;
    padding: 1.1rem 1.35rem;
    border: 1px solid #d6d6ef;
    border-radius: .35rem;
    background: var(--paper);
}

.pricing-free-count {
    display: grid;
    width: 4rem;
    height: 4rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 2.2rem;
}

.pricing-free-tier h2,
.pricing-free-tier p {
    margin: 0;
}

.pricing-free-tier h2 {
    margin-top: .15rem;
    font-size: 1.35rem;
}

.pricing-free-tier p:last-child {
    margin-top: .25rem;
    color: var(--muted);
    line-height: 1.5;
}

.pricing-card {
    display: grid;
    grid-template-columns: minmax(18rem, .78fr) minmax(0, 1.22fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: .5rem solid;
    border-radius: .45rem;
    border-image: linear-gradient(90deg, var(--blue-france), var(--red-marianne)) 1;
    background: var(--paper);
    box-shadow: 0 1.25rem 3.5rem rgb(0 0 145 / 10%);
}

.pricing-summary,
.pricing-includes {
    padding: clamp(1.7rem, 5vw, 3.25rem);
}

.pricing-summary {
    background: #ececfe;
}

.pricing-summary h2,
.pricing-includes h2 {
    margin-bottom: 1.4rem;
}

.pricing-badge {
    display: inline-flex;
    padding: .4rem .7rem;
    border-radius: 99rem;
    background: var(--blue-france);
    color: #fff;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.pricing-price {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    color: var(--blue-france);
    direction: ltr;
}

.pricing-price strong {
    font-family: Georgia, serif;
    font-size: clamp(4rem, 9vw, 6.5rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.055em;
}

.pricing-price span {
    max-width: 5rem;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.25;
}

.pricing-payment {
    color: var(--blue-ink);
    font-weight: 800;
}

.pricing-disabled-button {
    width: 100%;
    margin-top: 1.2rem;
}

.pricing-draft-note {
    margin: 1rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}

.pricing-includes {
    align-self: center;
}

.pricing-promises {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 2rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: var(--line);
}

.pricing-promises article {
    display: grid;
    gap: .45rem;
    padding: 1.4rem;
    background: var(--paper);
}

.pricing-promises strong {
    color: var(--blue-france);
}

.pricing-promises span {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.legal-shell {
    padding-top: clamp(2.5rem, 5vw, 5rem);
}

.legal-language-note,
.legal-alert {
    padding: 1rem 1.2rem;
    border-left: .3rem solid var(--red-marianne);
    border-radius: .2rem;
    background: #fff0f0;
    color: #6b0007;
    line-height: 1.55;
}

.legal-language-note {
    margin: 0 0 1.5rem;
}

.legal-document {
    padding: clamp(1.5rem, 5vw, 3.4rem);
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
    box-shadow: 0 .75rem 2.5rem rgb(0 0 145 / 6%);
}

.legal-document .page-title {
    font-size: clamp(2.5rem, 6vw, 4.7rem);
}

.legal-updated {
    margin: 1.4rem 0 2rem;
    color: var(--muted);
    font-size: .86rem;
}

.legal-alert {
    margin: 0 0 2.5rem;
}

.legal-alert strong {
    color: var(--red-dark);
}

.legal-alert p {
    margin: .35rem 0 0;
}

.legal-document section {
    padding: 1.3rem 0;
    border-top: 1px solid var(--line);
}

.legal-document section:first-of-type {
    border-top: 0;
}

.legal-document section h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.legal-document section p,
.legal-document section li,
.legal-details {
    color: #3f3f50;
    line-height: 1.7;
}

.legal-document section a,
.check-row a {
    color: var(--blue-france);
    font-weight: 700;
    text-underline-offset: .2em;
}

.legal-details {
    margin: 0;
}

.legal-details div {
    display: grid;
    grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid #eeeeF6;
}

.legal-details dt {
    color: var(--blue-ink);
    font-weight: 800;
}

.legal-details dd {
    margin: 0;
}

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

.exam-history {
    margin-top: 4rem;
}

.exam-history h2 {
    margin-bottom: .45rem;
}

.exam-history-intro {
    max-width: 48rem;
    margin: 0 0 1.5rem;
    color: var(--muted);
    line-height: 1.55;
}

.progress-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.progress-summary article {
    display: grid;
    gap: .25rem;
    padding: 1.15rem;
    border: 1px solid var(--line);
    border-top: .3rem solid var(--blue-france);
    border-radius: .35rem;
    background: var(--paper);
}

.progress-summary article:nth-child(4) {
    border-top-color: var(--red-marianne);
}

.progress-summary strong {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 500;
    direction: ltr;
}

.progress-summary span {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 750;
}

.level-progress-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.level-progress-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-top: .28rem solid var(--blue-france);
    border-radius: .35rem;
    background: var(--paper);
}

.level-progress-card header {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: .6rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.level-progress-card header span,
.exam-level-pill,
.active-exam-level span {
    padding: .22rem .45rem;
    border-radius: 99rem;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;
}

.level-progress-card header strong {
    color: var(--blue-ink);
    font-size: .8rem;
}

.level-progress-card > div {
    display: grid;
    gap: .15rem;
}

.level-progress-card > div strong {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.level-progress-card > div small {
    color: var(--muted);
    font-size: .65rem;
}

.exam-level-pill.level-card-naturalisation {
    background: #ffe9e9;
    color: var(--red-dark);
}

.active-exam-level {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    font-weight: 750;
}

.exam-history-empty {
    color: var(--muted);
}

.exam-history-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 145 / 5%);
}

.exam-history-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    text-align: left;
}

.exam-history-table th,
.exam-history-table td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.exam-history-table th {
    background: #f5f5fe;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.exam-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.exam-history-table tbody tr:hover {
    background: #fafaff;
}

.exam-history-table td:first-child {
    display: grid;
    gap: .15rem;
}

.exam-history-table small {
    color: var(--muted);
}

.status-pill {
    display: inline-flex;
    padding: .3rem .55rem;
    border-radius: 99rem;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .72rem;
    font-weight: 800;
    white-space: nowrap;
}

.status-pill.is-passed {
    background: #e3fdeb;
    color: #0c5c2e;
}

.status-pill.is-failed {
    background: #ffe9e9;
    color: var(--red-dark);
}

.status-pill.is-partial {
    background: #fff4d6;
    color: #715100;
}

.exam-history-score {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 1.2rem;
    direction: ltr;
}

.exam-history-delta {
    font-weight: 850;
    direction: ltr;
}

.exam-history-delta.is-up {
    color: var(--success);
}

.exam-history-delta.is-down {
    color: var(--red-dark);
}

.exam-history-delta.is-neutral {
    color: var(--muted);
}

.exam-shell,
.exam-result-shell {
    padding-top: clamp(2rem, 5vw, 4.5rem);
}

.exam-header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.exam-header h1 {
    font-size: clamp(2.3rem, 5vw, 4rem);
}

.exam-timer {
    display: grid;
    min-width: 10rem;
    gap: .3rem;
    padding: 1rem 1.25rem;
    border-left: .35rem solid var(--red-marianne);
    background: var(--paper);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 145 / 8%);
}

.exam-timer span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    text-transform: uppercase;
}

.exam-timer strong {
    color: var(--blue-france);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
}

.exam-progress {
    height: .55rem;
    overflow: hidden;
    margin-top: 2rem;
    border-radius: 99rem;
    background: #dddded;
}

.exam-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-france), var(--red-marianne));
    transition: width .2s ease;
}

.exam-progress-copy {
    margin: .55rem 0 0;
    color: var(--muted);
    font-size: .85rem;
}

.exam-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    align-items: start;
    gap: 1.5rem;
    margin-top: 2rem;
}

.exam-question {
    min-width: 0;
}

.exam-question h2 {
    margin: .6rem 0 2rem;
    font-family: inherit;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 750;
    line-height: 1.35;
}

.exam-setup {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.exam-setup fieldset {
    display: grid;
    gap: .55rem;
    padding: 0;
    border: 0;
    margin: 0;
}

.exam-level-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .45rem;
}

.exam-level-choice {
    position: relative;
    cursor: pointer;
}

.exam-level-choice input {
    position: absolute;
    opacity: 0;
}

.exam-level-choice > span {
    display: grid;
    height: 100%;
    gap: .2rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-top: .22rem solid var(--blue-france);
    border-radius: .3rem;
}

.exam-level-choice:nth-child(2) > span {
    border-top-color: #6a6af4;
}

.exam-level-choice:nth-child(3) > span {
    border-top-color: var(--red-marianne);
}

.exam-level-choice input:checked + span {
    border-color: var(--blue-france);
    background: #f5f5fe;
    box-shadow: 0 0 0 2px rgb(0 0 145 / 12%);
}

.exam-level-choice b {
    color: var(--red-marianne);
    font-size: .68rem;
    letter-spacing: .08em;
}

.exam-level-choice strong {
    color: var(--blue-ink);
    font-size: .76rem;
    line-height: 1.25;
}

.exam-level-choice small {
    color: var(--muted);
    font-size: .65rem;
}

.exam-setup legend,
.exam-setup-language > span {
    margin-bottom: .45rem;
    color: var(--blue-ink);
    font-size: .82rem;
    font-weight: 800;
}

.exam-setup-choice {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: .65rem;
    padding: .7rem;
    border: 1px solid var(--line);
    border-radius: .3rem;
    cursor: pointer;
}

.exam-setup-choice:has(input:checked) {
    border-color: var(--blue-france);
    background: #f5f5fe;
}

.exam-setup-choice input {
    margin-top: .2rem;
    accent-color: var(--blue-france);
}

.exam-setup-choice span {
    display: grid;
    gap: .15rem;
}

.exam-setup-choice small {
    color: var(--muted);
    line-height: 1.35;
}

.exam-setup-language {
    display: grid;
}

.exam-setup-language select,
.exam-explanation-language select {
    min-height: 2.65rem;
    padding: .55rem 2rem .55rem .7rem;
    border: 1px solid #c5c5db;
    border-radius: .25rem;
    background: #fff;
    color: var(--blue-ink);
}

.exam-answer-form fieldset {
    display: grid;
    gap: .75rem;
    padding: 0;
    border: 0;
    margin: 0;
}

.exam-option {
    display: grid;
    grid-template-columns: 1.8rem 2.3rem 1fr;
    align-items: center;
    gap: .75rem;
    min-height: 4rem;
    padding: .8rem 1rem;
    border: 1px solid #c5c5db;
    border-radius: .35rem;
    background: #fff;
    cursor: pointer;
    line-height: 1.45;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.exam-option:hover {
    border-color: var(--blue-france);
    background: #f5f5fe;
}

.exam-option:has(input:checked) {
    border-color: var(--blue-france);
    background: #ececfe;
    box-shadow: inset .3rem 0 0 var(--blue-france);
}

.exam-answer-form.is-corrected .exam-option {
    cursor: default;
}

.exam-answer-form.is-corrected .exam-option:hover {
    border-color: #c5c5db;
    background: #fff;
}

.exam-option.is-correct-answer,
.exam-answer-form.is-corrected .exam-option.is-correct-answer:hover {
    border-color: var(--success);
    background: #e3fdeb;
    box-shadow: inset .3rem 0 0 var(--success);
}

.exam-option.is-incorrect-answer,
.exam-answer-form.is-corrected .exam-option.is-incorrect-answer:hover {
    border-color: var(--red-marianne);
    background: #ffe9e9;
    box-shadow: inset .3rem 0 0 var(--red-marianne);
}

.exam-option input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--blue-france);
}

.exam-option-letter {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 50%;
    background: #ececfe;
    color: var(--blue-france);
    font-weight: 850;
    direction: ltr;
}

.exam-actions,
.exam-result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.exam-navigator {
    position: sticky;
    top: 1rem;
}

.exam-navigator h2 {
    margin: 0 0 1rem;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
}

.exam-question-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .45rem;
    direction: ltr;
}

.exam-question-grid a {
    display: grid;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid #c5c5db;
    border-radius: .2rem;
    background: #fff;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
    text-decoration: none;
}

.exam-question-grid a.is-answered {
    border-color: var(--success);
    background: #e3fdeb;
    color: #0c5c2e;
}

.exam-question-grid a.is-current {
    border: 2px solid var(--blue-france);
    background: var(--blue-france);
    color: #fff;
}

.exam-legend {
    display: grid;
    gap: .5rem;
    margin: 1rem 0 1.5rem;
    color: var(--muted);
    font-size: .75rem;
}

.exam-legend span {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.exam-legend i {
    width: .8rem;
    height: .8rem;
    border: 1px solid var(--blue-france);
    border-radius: .1rem;
}

.exam-legend i.is-current {
    background: var(--blue-france);
}

.exam-legend i.is-answered {
    border-color: var(--success);
    background: #e3fdeb;
}

.exam-finish-note {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.45;
}

.exam-feedback-mode {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}

.exam-feedback-mode strong {
    display: block;
    color: var(--blue-ink);
}

.exam-inline-correction {
    margin-top: 1.5rem;
    padding: 1.15rem;
    border-left: .35rem solid var(--red-marianne);
    border-radius: .3rem;
    background: #fff8f8;
}

.exam-inline-correction.is-correct {
    border-left-color: var(--success);
    background: #f2fff6;
}

.exam-inline-correction > strong {
    color: var(--red-dark);
    font-size: 1.05rem;
}

.exam-inline-correction.is-correct > strong {
    color: #0c5c2e;
}

.exam-inline-correction > p {
    margin: .45rem 0 1rem;
}

.exam-result-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 3rem;
    padding: clamp(1.75rem, 5vw, 3.5rem);
    border-top: .5rem solid var(--blue-france);
    border-radius: .4rem;
    background: var(--paper);
    box-shadow: 0 .75rem 2.5rem rgb(0 0 145 / 8%);
}

.exam-result-hero.is-passed {
    border-top-color: var(--success);
}

.exam-result-hero.is-failed {
    border-top-color: var(--red-marianne);
}

.exam-result-hero.is-preview {
    border-top-color: var(--blue-france);
}

.exam-result-hero h1 {
    font-size: clamp(2.7rem, 6vw, 5rem);
}

.exam-score {
    display: grid;
    width: 11rem;
    height: 11rem;
    grid-template-columns: auto auto;
    place-content: center;
    align-items: baseline;
    border: .75rem solid #ececfe;
    border-radius: 50%;
    color: var(--blue-france);
    text-align: center;
    direction: ltr;
}

.exam-score strong {
    font-family: Georgia, serif;
    font-size: 3.5rem;
    font-weight: 500;
}

.exam-score span {
    font-size: 1.25rem;
}

.exam-score small {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: .72rem;
}

.exam-timeout-note {
    padding-left: 1rem;
    border-left: 3px solid var(--red-marianne);
    color: var(--red-dark);
}

.exam-result-actions {
    justify-content: flex-start;
}

.result-paywall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 2rem;
    padding: clamp(1.4rem, 4vw, 2.2rem);
    border: 1px solid #c9c9ec;
    border-left: .4rem solid var(--blue-france);
    border-radius: .35rem;
    background: #f5f5fe;
}

.result-paywall h2 {
    margin: .3rem 0 .5rem;
}

.result-paywall p:last-child {
    max-width: 48rem;
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.result-paywall .button {
    flex: 0 0 auto;
}

.exam-review {
    margin-top: 4.5rem;
}

.exam-review-list {
    display: grid;
    gap: .75rem;
    margin-top: 2rem;
}

.exam-review-item {
    overflow: hidden;
    border: 1px solid var(--line);
    border-left: .35rem solid var(--red-marianne);
    border-radius: .3rem;
    background: var(--paper);
}

.exam-review-item.is-correct {
    border-left-color: var(--success);
}

.exam-review-item summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
}

.exam-review-item.is-correct summary strong {
    color: var(--success);
}

.exam-review-item.is-incorrect summary strong {
    color: var(--red-dark);
}

.exam-review-content {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--line);
    line-height: 1.55;
}

.exam-review-content h3 {
    color: var(--blue-ink);
    font-size: 1.05rem;
}

.exam-explanation {
    padding: 1rem;
    border-radius: .25rem;
    background: #f5f5fe;
}

.exam-explanation-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.exam-explanation-heading > strong {
    color: var(--blue-france);
}

.exam-explanation-language {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 750;
}

.exam-explanation-language select {
    min-height: 2.25rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.exam-explanation p {
    margin-bottom: 0;
}

.exam-explanation p[hidden] {
    display: none;
}

/* Study guide */
.study-shell {
    overflow: hidden;
}

.study-hero {
    display: grid;
    min-height: 38rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
}

.study-hero h1 {
    max-width: 13ch;
}

.study-roadmap {
    position: relative;
    padding: 2rem;
    border: 1px solid rgb(0 0 145 / 16%);
    border-top: .45rem solid var(--blue-france);
    background: var(--paper);
    box-shadow: 1rem 1rem 0 #e7e7fb;
}

.roadmap-mark {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin-bottom: 1.2rem;
    color: var(--blue-france);
}

.roadmap-mark span {
    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: 1;
}

.roadmap-mark small {
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
}

.study-roadmap ol {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.study-roadmap li {
    display: grid;
    min-height: 3.7rem;
    grid-template-columns: 2.2rem 1fr;
    align-items: center;
    gap: .8rem;
    border-top: 1px solid var(--line);
    font-size: .94rem;
    font-weight: 720;
    line-height: 1.3;
}

.study-roadmap li span {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: #eeeef8;
    color: var(--ink);
    font-size: .76rem;
    font-weight: 900;
}

.study-roadmap li.is-blue span {
    background: var(--blue-france);
    color: #fff;
}

.study-roadmap li.is-red span {
    background: var(--red-marianne);
    color: #fff;
}

.study-numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--blue-france);
    color: #fff;
}

.study-numbers article {
    display: flex;
    min-height: 9rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    border-right: 1px solid rgb(255 255 255 / 24%);
}

.study-numbers article:last-child {
    border-right: 0;
    background: var(--red-marianne);
}

.study-numbers strong {
    font-family: Georgia, serif;
    font-size: clamp(2.4rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1;
}

.study-numbers span {
    max-width: 9rem;
    font-weight: 720;
    line-height: 1.25;
}

.study-method {
    padding-bottom: 2rem;
}

.study-method .section-heading > div .eyebrow {
    margin-bottom: .8rem;
}

.study-method-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin: 3rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.study-method-steps li {
    position: relative;
    min-height: 12rem;
    padding: 4.5rem 1.5rem 1.5rem;
    border: 1px solid var(--line);
    border-bottom: .35rem solid var(--blue-france);
    background: var(--paper);
}

.study-method-steps li:nth-child(2) {
    border-bottom-color: #8c8caa;
}

.study-method-steps li:nth-child(3) {
    border-bottom-color: var(--red-marianne);
}

.study-method-steps li > span {
    position: absolute;
    top: 1.2rem;
    left: 1.5rem;
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 2.3rem;
    line-height: 1;
}

.study-method-steps strong {
    display: block;
    color: var(--blue-ink);
    font-size: 1.1rem;
}

.study-method-steps p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.study-language-note {
    display: grid;
    grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    margin-top: 1.2rem;
    padding: 1.35rem 1.5rem;
    border-left: .35rem solid var(--red-marianne);
    background: #fff1f1;
}

.study-language-note strong {
    color: var(--red-dark);
}

.study-language-note p {
    margin: 0;
    line-height: 1.55;
}

.study-chapters {
    padding-top: 4rem;
}

.study-chapters-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .7fr);
    align-items: end;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.study-chapters-heading h2 {
    margin: 0;
}

.study-chapters-heading > p {
    margin: 0 0 .4rem;
    color: var(--muted);
    line-height: 1.6;
}

.chapter-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.3rem;
}

.chapter-card {
    position: relative;
    display: flex;
    min-height: 27rem;
    grid-column: span 2;
    flex-direction: column;
    padding: 1.7rem;
    border: 1px solid var(--line);
    border-top: .45rem solid var(--blue-france);
    background: var(--paper);
}

.chapter-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.chapter-card-red {
    border-top-color: var(--red-marianne);
}

.chapter-card-white {
    border-top-color: #9292a8;
}

.chapter-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.chapter-card-media {
    display: block;
    width: calc(100% + 3.4rem);
    max-width: none;
    aspect-ratio: 16 / 9;
    margin: 0 -1.7rem 1.4rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    object-fit: cover;
}

.chapter-number {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--blue-france);
    font-weight: 900;
}

.chapter-card-red .chapter-number {
    color: var(--red-dark);
}

.chapter-mark {
    color: rgb(0 0 145 / 10%);
    font-family: Georgia, serif;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: .8;
}

.chapter-card-red .chapter-mark {
    color: rgb(225 0 15 / 11%);
}

.chapter-card h3 {
    margin: .35rem 0 .8rem;
    color: var(--blue-ink);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.14;
}

.chapter-card > p:not(.card-kicker, .chapter-help) {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.chapter-help {
    margin: 1rem 0 0;
    padding: .8rem;
    background: #f5f5fe;
    font-size: .88rem;
    line-height: 1.5;
}

.chapter-card-meta {
    display: flex;
    gap: .8rem;
    margin-top: auto;
    padding: 1.5rem 0 1rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 720;
}

.chapter-card-meta span + span::before {
    margin-right: .8rem;
    color: var(--red-marianne);
    content: "•";
}

.chapter-card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--blue-france);
    font-weight: 850;
    text-decoration: none;
}

.chapter-card-link span {
    font-size: 1.35rem;
    transition: transform .15s;
}

.chapter-card-link:hover span {
    transform: translateX(.25rem);
}

.course-hero {
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(110deg, rgb(0 0 145 / 7%), transparent 52%),
        var(--paper);
}

.course-page-red .course-hero {
    background:
        linear-gradient(110deg, rgb(225 0 15 / 7%), transparent 52%),
        var(--paper);
}

.course-hero-inner {
    display: grid;
    min-height: 31rem;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 36rem);
    align-items: center;
    gap: 4rem;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.course-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 2.5rem;
    color: var(--muted);
    font-size: .84rem;
}

.course-breadcrumb a {
    color: var(--blue-france);
    font-weight: 750;
}

.course-heading .lede {
    max-width: 42rem;
}

.course-heading {
    min-width: 0;
}

.course-hero-art {
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 36rem;
    margin: 0;
}

.course-hero-art img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid rgb(0 0 145 / 13%);
    border-radius: 1.2rem;
    box-shadow: 0 1.4rem 3.5rem rgb(22 22 115 / 13%);
    object-fit: cover;
}

.course-hero-art figcaption {
    margin-top: .65rem;
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    text-align: right;
}

.course-emblem {
    position: absolute;
    right: -1.5rem;
    bottom: -1rem;
    display: grid;
    width: clamp(5.5rem, 8vw, 7rem);
    height: clamp(5.5rem, 8vw, 7rem);
    place-items: center;
    border: .55rem solid #ececfe;
    border-radius: 50%;
    background: var(--blue-france);
    box-shadow: 0 0 0 1px rgb(0 0 145 / 14%);
    color: #fff;
    text-align: center;
}

.course-page-red .course-emblem {
    border-color: #ffe5e6;
    background: var(--red-marianne);
}

.course-page-white .course-emblem {
    border-color: #ececf2;
    background: #fff;
    color: var(--blue-france);
}

.course-emblem span {
    align-self: end;
    font-family: Georgia, serif;
    font-size: clamp(1.55rem, 2.5vw, 2.2rem);
    line-height: 1;
}

.course-emblem small {
    align-self: start;
    margin-top: .25rem;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.4rem;
    margin-top: 2rem;
    color: var(--muted);
    font-size: .9rem;
}

.course-meta span + span::before {
    margin-right: 1.4rem;
    color: var(--red-marianne);
    content: "•";
}

.course-meta strong {
    color: var(--blue-france);
    font-size: 1.08rem;
}

.course-language-help {
    max-width: 46rem;
    margin-top: 1.5rem;
    padding: 1rem 1.2rem;
    border-left: .3rem solid var(--red-marianne);
    background: #fff3f3;
}

.course-language-help strong {
    color: var(--red-dark);
}

.course-language-help p {
    margin: .35rem 0 0;
    line-height: 1.55;
}

.course-layout {
    display: grid;
    grid-template-columns: minmax(13rem, .28fr) minmax(0, .72fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
    padding-top: 4rem;
}

.course-menu {
    position: sticky;
    min-width: 0;
    top: 1.2rem;
    padding: 1.3rem;
    border: 1px solid var(--line);
    background: var(--paper);
}

.course-menu > p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.course-menu ol {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.course-menu li a {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    align-items: center;
    gap: .6rem;
    padding: .65rem .35rem;
    color: var(--blue-ink);
    font-size: .88rem;
    font-weight: 720;
    line-height: 1.25;
    text-decoration: none;
}

.course-menu li a:hover {
    background: #f1f1fd;
}

.course-menu li span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    font-size: .68rem;
}

.course-page-red .course-menu li span {
    background: var(--red-marianne);
}

.course-menu-all {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--blue-france);
    font-size: .84rem;
    font-weight: 750;
}

.course-content {
    display: grid;
    min-width: 0;
    gap: 2rem;
}

.lesson {
    scroll-margin-top: 1.2rem;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    border-top: .4rem solid var(--blue-france);
    background: var(--paper);
    box-shadow: 0 .7rem 2rem rgb(22 22 115 / 5%);
}

.course-page-red .lesson {
    border-top-color: var(--red-marianne);
}

.course-page-white .lesson {
    border-top-color: #777795;
}

.lesson-heading {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.3rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--line);
}

.lesson-index {
    color: rgb(0 0 145 / 16%);
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7vw, 5rem);
    line-height: .85;
}

.course-page-red .lesson-index {
    color: rgb(225 0 15 / 17%);
}

.lesson-heading h2 {
    margin: .25rem 0 .7rem;
}

.lesson-heading > div > p:last-child {
    max-width: 42rem;
    margin: 0;
    color: var(--muted);
    font-size: 1.03rem;
    line-height: 1.55;
}

.lesson-visual {
    position: relative;
    display: flex;
    min-height: 9.5rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    overflow: hidden;
    margin: 1.5rem 0 0;
    border-radius: .9rem;
    background:
        radial-gradient(circle at 18% 22%, rgb(255 255 255 / 75%) 0 2.8rem, transparent 2.9rem),
        linear-gradient(125deg, #eeeeff, #fff7ed 58%, #ffe8e9);
    color: var(--blue-france);
}

.lesson-visual::after {
    position: absolute;
    right: -2rem;
    bottom: -3.8rem;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: rgb(225 0 15 / 8%);
    content: "";
}

.visual-flag {
    display: grid;
    width: 12rem;
    height: 7rem;
    grid-template-columns: repeat(3, 1fr);
    overflow: hidden;
    border-radius: .35rem;
    box-shadow: 0 .7rem 1.5rem rgb(0 0 0 / 12%);
    transform: rotate(-3deg);
}

.visual-flag i:nth-child(1) { background: #000091; }
.visual-flag i:nth-child(2) { background: #fff; }
.visual-flag i:nth-child(3) { background: #e1000f; }

.visual-orbit {
    display: grid;
    width: 3.2rem;
    height: 3.2rem;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 .35rem 1rem rgb(0 0 145 / 10%);
    font-weight: 900;
}

.visual-orbit-a { color: var(--red-marianne); font-size: 1.55rem; }
.visual-orbit-b { color: var(--blue-france); }
.visual-orbit-c { color: #fff; background: var(--blue-france); }

.visual-scale {
    font-size: 6rem;
    line-height: 1;
}

.visual-person {
    position: relative;
    width: 3.6rem;
    padding-top: .15rem;
    border-radius: 50% 50% 35% 35%;
    background: #fff;
    color: var(--red-marianne);
    font-size: 2rem;
    text-align: center;
}

.visual-person::after {
    display: block;
    height: 2.7rem;
    border-radius: 2rem 2rem .5rem .5rem;
    background: currentcolor;
    content: "";
}

.visual-person-b { color: var(--blue-france); }

.visual-choice {
    display: grid;
    width: 6.5rem;
    height: 6.5rem;
    place-items: center;
    border: .55rem solid currentcolor;
    border-radius: 50%;
    background: #fff;
    font-size: 3.5rem;
    font-weight: 900;
}

.visual-choice-good { color: var(--success); }
.visual-choice-bad { color: var(--red-marianne); }

.visual-ballot-box {
    width: 10rem;
    height: 6.5rem;
    border: .3rem solid var(--blue-france);
    border-radius: .35rem;
    background: rgb(255 255 255 / 60%);
    box-shadow: inset 0 0 0 .45rem rgb(0 0 145 / 8%);
}

.visual-ballot-box::before {
    position: absolute;
    top: 3.35rem;
    left: calc(50% - 4rem);
    width: 8rem;
    height: .45rem;
    border-radius: .5rem;
    background: var(--blue-france);
    content: "";
}

.visual-ballot-paper {
    position: absolute;
    z-index: 1;
    top: 1rem;
    left: calc(50% - 2.7rem);
    width: 5.4rem;
    height: 4rem;
    border: 1px solid #dad9e8;
    background: #fff;
    box-shadow: 0 .4rem .8rem rgb(0 0 0 / 10%);
    transform: rotate(8deg);
}

.visual-node,
.visual-culture-item {
    display: grid;
    width: 5rem;
    height: 5rem;
    place-items: center;
    border: .25rem solid #fff;
    border-radius: 50%;
    background: var(--blue-france);
    box-shadow: 0 0 0 .15rem rgb(0 0 145 / 16%);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 2.1rem;
}

.visual-node:nth-child(2),
.visual-culture-item:nth-child(2) { background: #fff; color: var(--blue-france); }
.visual-node:nth-child(3),
.visual-culture-item:nth-child(3) { background: var(--red-marianne); }

.visual-europe-stars {
    color: #ffb700;
    font-size: 1.35rem;
    letter-spacing: .45rem;
    line-height: 1.35;
    text-align: center;
}

.visual-europe-stars strong {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 3rem;
    letter-spacing: 0;
}

.visual-shield {
    display: grid;
    width: 7rem;
    height: 7.7rem;
    place-items: center;
    border-radius: 3.5rem 3.5rem 4.5rem 4.5rem;
    background: var(--blue-france);
    color: #fff;
    font-size: 3rem;
    font-weight: 900;
}

.visual-open-lock {
    color: var(--red-marianne);
    font-size: 6rem;
    font-weight: 900;
    transform: rotate(-20deg);
}

.visual-checklist {
    display: grid;
    width: min(80%, 25rem);
    gap: .65rem;
}

.visual-checklist i {
    display: block;
    padding: .3rem 1rem;
    border-radius: .35rem;
    background: #fff;
    box-shadow: inset .35rem 0 0 var(--success);
    color: var(--success);
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 900;
}

.visual-timeline,
.visual-steps,
.visual-emergency,
.visual-work,
.visual-school {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    flex-wrap: wrap;
}

.visual-timeline i,
.visual-steps i,
.visual-emergency i,
.visual-work i,
.visual-school i {
    display: grid;
    min-width: 4.1rem;
    min-height: 4.1rem;
    place-items: center;
    padding: .45rem;
    border: .2rem solid #fff;
    border-radius: 50%;
    background: var(--blue-france);
    box-shadow: 0 0 0 .12rem rgb(0 0 145 / 15%);
    color: #fff;
    font-size: .86rem;
    font-style: normal;
    font-weight: 900;
}

.visual-timeline i:nth-child(even),
.visual-steps i:nth-child(even),
.visual-emergency i:nth-child(even),
.visual-work i:nth-child(even),
.visual-school i:nth-child(even) {
    background: var(--red-marianne);
}

.visual-france {
    display: grid;
    width: 8rem;
    height: 9rem;
    place-items: center;
    background: var(--blue-france);
    clip-path: polygon(50% 0, 92% 24%, 86% 74%, 50% 100%, 10% 77%, 0 28%);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 900;
}

.visual-overseas {
    display: flex;
    max-width: 7rem;
    flex-wrap: wrap;
    gap: .75rem;
}

.visual-overseas i {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: var(--red-marianne);
    box-shadow: 0 0 0 .4rem #fff;
}

.visual-culture-item {
    border-radius: .7rem;
}

.visual-emergency i {
    background: var(--red-marianne);
}

.visual-emergency i:last-child {
    min-width: 5.5rem;
    background: var(--blue-france);
}

.visual-work i,
.visual-school i {
    border-radius: .8rem;
}

.anthem-player {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.2rem;
    margin-top: 1rem;
    padding: 1.35rem;
    border: 1px solid #d9d9ed;
    border-radius: .8rem;
    background: #f3f3ff;
}

.anthem-mark {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    font-size: 1.8rem;
}

.anthem-player h3,
.lesson-examples h3 {
    margin: .2rem 0 .45rem;
}

.anthem-player p {
    margin: 0;
    line-height: 1.5;
}

.anthem-player audio {
    width: min(100%, 34rem);
    margin-top: .9rem;
}

.anthem-player .anthem-credit {
    margin-top: .65rem;
    color: var(--muted);
    font-size: .78rem;
}

.anthem-credit a {
    color: var(--blue-france);
    font-weight: 750;
}

.lesson-examples {
    margin-top: 1.5rem;
    padding: 1.3rem;
    border: 1px solid #e4e4f1;
    border-radius: .8rem;
    background: #fff;
}

.lesson-examples-heading > p:last-child {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.lesson-example-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin-top: 1rem;
}

.lesson-example {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    padding: 1rem;
    border-left: .3rem solid var(--success);
    border-radius: .35rem;
    background: #eff8f2;
}

.lesson-example-forbidden,
.lesson-example-bad,
.lesson-example-trap {
    border-left-color: var(--red-marianne);
    background: #fff1f1;
}

.lesson-example-icon {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    place-items: center;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: .8rem;
    font-weight: 900;
}

.lesson-example-forbidden .lesson-example-icon,
.lesson-example-bad .lesson-example-icon,
.lesson-example-trap .lesson-example-icon {
    background: var(--red-marianne);
}

.lesson-example strong {
    color: var(--blue-ink);
    font-size: .79rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.lesson-example p {
    margin: .35rem 0 0;
    line-height: 1.5;
}

.fact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.fact-grid li {
    position: relative;
    display: grid;
    min-height: 8.3rem;
    grid-template-columns: 2rem 1fr;
    align-content: start;
    gap: .75rem;
    padding: 1.15rem;
    border: 1px solid #e4e4f1;
    background: #fafafe;
}

.fact-grid li > span {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border-radius: 50%;
    background: #e5e5fd;
    color: var(--blue-france);
    font-size: .7rem;
    font-weight: 900;
}

.course-page-red .fact-grid li > span {
    background: #ffe3e5;
    color: var(--red-dark);
}

.fact-grid p {
    margin: .05rem 0 0;
    line-height: 1.55;
}

.lesson-timeline .fact-grid {
    grid-template-columns: 1fr;
}

.lesson-timeline .fact-grid li {
    min-height: auto;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: .25rem solid var(--blue-france);
}

.lesson-emergency .fact-grid li:nth-child(3) {
    border-color: #ffc2c6;
    background: #fff2f2;
}

.lesson-language-help {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: #eeeeff;
}

.lesson-language-help > span {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--blue-france);
    color: #fff;
    font-family: Georgia, serif;
    font-size: 1.25rem;
}

.lesson-language-help strong {
    color: var(--blue-france);
}

.lesson-language-help p {
    margin: .3rem 0 0;
    line-height: 1.55;
}

.lesson-recap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1rem;
    background: var(--line);
}

.lesson-recap section {
    padding: 1.2rem;
    background: #f1f7f3;
}

.lesson-recap .lesson-warning {
    background: #fff6e9;
}

.lesson-recap .lesson-remember .card-kicker {
    color: var(--success);
}

.lesson-recap .lesson-warning .card-kicker {
    color: #8b4f00;
}

.lesson-recap section > p:last-child {
    margin: .4rem 0 0;
    font-weight: 650;
    line-height: 1.5;
}

.course-sources {
    margin-top: 2rem;
    padding: clamp(1.6rem, 4vw, 2.5rem);
    border: 1px solid var(--line);
    background: #f4f4fb;
}

.course-sources h2 {
    margin-bottom: .7rem;
}

.course-sources > p:not(.eyebrow) {
    color: var(--muted);
    line-height: 1.55;
}

.course-sources ul {
    display: grid;
    gap: .8rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.course-sources li {
    padding: 1rem;
    border-left: .25rem solid var(--blue-france);
    background: var(--paper);
}

.course-sources a {
    display: inline-block;
    color: var(--blue-france);
    font-weight: 800;
    line-height: 1.4;
}

.course-sources span {
    display: block;
    margin-top: .25rem;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.45;
}

.course-next {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.course-next a {
    display: flex;
    min-height: 6.5rem;
    flex-direction: column;
    justify-content: center;
    padding: 1.2rem;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--blue-france);
    text-decoration: none;
}

.course-next-link {
    text-align: right;
}

.course-next small {
    margin-bottom: .4rem;
    color: var(--muted);
}

[dir="rtl"] .language-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .independent-note {
    padding-right: 1rem;
    padding-left: 0;
    border-right: 3px solid var(--red-marianne);
    border-left: 0;
}

[dir="rtl"] .check-list li {
    padding-right: 1.8rem;
    padding-left: 0;
}

[dir="rtl"] .check-list li::before {
    right: 0;
    left: auto;
}

[dir="rtl"] .form-errors,
[dir="rtl"] .flash {
    border-right: 4px solid var(--red-marianne);
    border-left: 0;
}

[dir="rtl"] .flash-success {
    border-right-color: var(--success);
}

[dir="rtl"] .exam-timer,
[dir="rtl"] .exam-timeout-note,
[dir="rtl"] .exam-review-item {
    border-right: .35rem solid var(--red-marianne);
    border-left: 0;
}

[dir="rtl"] .exam-review-item.is-correct {
    border-right-color: var(--success);
}

[dir="rtl"] .exam-option:has(input:checked) {
    box-shadow: inset -.3rem 0 0 var(--blue-france);
}

[dir="rtl"] .exam-option.is-correct-answer,
[dir="rtl"] .exam-answer-form.is-corrected .exam-option.is-correct-answer:hover {
    box-shadow: inset -.3rem 0 0 var(--success);
}

[dir="rtl"] .exam-option.is-incorrect-answer,
[dir="rtl"] .exam-answer-form.is-corrected .exam-option.is-incorrect-answer:hover {
    box-shadow: inset -.3rem 0 0 var(--red-marianne);
}

[dir="rtl"] .exam-inline-correction {
    border-right: .35rem solid var(--red-marianne);
    border-left: 0;
}

[dir="rtl"] .exam-inline-correction.is-correct {
    border-right-color: var(--success);
}

[dir="rtl"] .exam-history-table {
    text-align: right;
}

[dir="rtl"] .study-method-steps li > span {
    right: 1.5rem;
    left: auto;
}

[dir="rtl"] .study-language-note,
[dir="rtl"] .course-language-help,
[dir="rtl"] .course-sources li,
[dir="rtl"] .lesson-timeline .fact-grid li {
    border-right: .35rem solid var(--red-marianne);
    border-left: 0;
}

[dir="rtl"] .course-sources li,
[dir="rtl"] .lesson-timeline .fact-grid li {
    border-right-color: var(--blue-france);
    border-right-width: .25rem;
}

[dir="rtl"] .chapter-card-meta span + span::before,
[dir="rtl"] .course-meta span + span::before {
    margin-right: 0;
    margin-left: .8rem;
}

[dir="rtl"] .course-meta span + span::before {
    margin-left: 1.4rem;
}

[dir="rtl"] .course-next-link {
    text-align: left;
}

@media (max-width: 58rem) {
    .hero {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .republic-card {
        max-width: 38rem;
    }

    .section-heading {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .level-cards,
    .official-source-grid,
    .level-progress-grid {
        grid-template-columns: 1fr;
    }

    .level-card {
        min-height: 18rem;
    }

    .exam-layout {
        grid-template-columns: 1fr;
    }

    .exam-navigator {
        position: static;
    }

    .exam-question-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .pricing-card {
        grid-template-columns: 1fr;
    }

    .study-hero,
    .course-hero-inner,
    .course-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .study-hero {
        padding-top: 4rem;
    }

    .study-roadmap {
        max-width: 38rem;
    }

    .chapter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chapter-card,
    .chapter-card:nth-child(4) {
        grid-column: auto;
    }

    .chapter-card:last-child {
        grid-column: 1 / -1;
        min-height: 22rem;
    }

    .course-hero-inner {
        gap: 2rem;
    }

    .course-emblem {
        right: -.75rem;
        width: 6rem;
        height: 6rem;
        border-width: .5rem;
    }

    .course-layout {
        padding-top: 2rem;
    }

    .course-menu {
        position: static;
    }

    .course-menu ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 44rem) {
    .site-header {
        min-height: auto;
        align-items: flex-start;
        padding: 1rem 0;
    }

    .site-header nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .7rem;
        font-size: .86rem;
    }

    .brand-name {
        display: none;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .metrics,
    .form-grid,
    .home-grid,
    .dashboard-grid,
    .support-grid,
    .pricing-promises,
    .site-footer {
        grid-template-columns: 1fr;
    }

    .footer-links,
    .legal-details div {
        grid-template-columns: 1fr;
    }

    .access-status {
        grid-template-columns: auto 1fr;
    }

    .access-status .button {
        grid-column: 1 / -1;
    }

    .pricing-free-tier,
    .result-paywall {
        align-items: flex-start;
        flex-direction: column;
    }

    .analytics-consent {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

    .analytics-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .study-numbers,
    .study-method-steps,
    .study-chapters-heading,
    .chapter-grid,
    .study-language-note,
    .fact-grid,
    .lesson-recap,
    .lesson-example-grid,
    .course-next {
        grid-template-columns: 1fr;
    }

    .study-numbers article {
        min-height: 6.5rem;
        justify-content: flex-start;
        border-right: 0;
        border-bottom: 1px solid rgb(255 255 255 / 24%);
    }

    .study-numbers article:last-child {
        border-bottom: 0;
    }

    .chapter-card:last-child {
        grid-column: auto;
    }

    .course-menu ol {
        grid-template-columns: 1fr;
    }

    .course-emblem {
        right: .45rem;
        bottom: -.4rem;
        width: 5.4rem;
        height: 5.4rem;
    }

    .anthem-player {
        grid-template-columns: 1fr;
    }

    .lesson-visual {
        min-height: 8rem;
    }

    .visual-timeline,
    .visual-steps,
    .visual-emergency,
    .visual-work,
    .visual-school {
        gap: .45rem;
    }

    .course-meta span + span::before {
        margin-right: .7rem;
    }

    .lesson-heading {
        grid-template-columns: 1fr;
    }

    .lesson-index {
        font-size: 3.1rem;
    }

    .fact-grid li {
        min-height: auto;
    }

    .course-next-link {
        text-align: left;
    }

    .course-next strong,
    .course-sources a {
        overflow-wrap: anywhere;
    }

    .values-strip span {
        padding: 1rem .5rem;
        font-size: .95rem;
    }

    .site-footer {
        gap: 1rem;
    }

    .exam-header,
    .exam-result-hero {
        align-items: stretch;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .exam-timer {
        min-width: 0;
    }

    .exam-option {
        grid-template-columns: 1.4rem 2.1rem 1fr;
        padding: .75rem;
    }

    .exam-question-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .exam-score {
        width: 9rem;
        height: 9rem;
    }

    .progress-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exam-level-options {
        grid-template-columns: 1fr;
    }

    .exam-explanation-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-explanation-language {
        align-items: stretch;
        flex-direction: column;
    }
}

.learning-shell, .learning-card-shell { padding-block: 3rem 5rem; }
.learning-summary { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1rem; margin: 2rem 0 3rem; }
.learning-recommendation, .learning-numbers, .study-plan { padding: 1.5rem; }
.learning-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.learning-numbers div { display: flex; flex-direction: column; }
.learning-numbers strong { color: var(--blue); font-size: 2.25rem; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.mastery-card { padding: 1.25rem; }
.mastery-card > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.mastery-bar { height: .55rem; overflow: hidden; background: #e5e7eb; border-radius: 999px; }
.mastery-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--red)); }
.study-plan { margin-top: 3rem; }
.study-plan form { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; margin: 1.5rem 0; }
.study-plan label { display: grid; gap: .4rem; }
.plan-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .65rem; max-height: 360px; overflow: auto; }
.plan-days article { display: grid; gap: .2rem; padding: .8rem; background: var(--paper); border-radius: .6rem; }
.flashcard { padding: 2rem; margin-top: 1.5rem; }
.flashcard-question { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.audio-button { white-space: nowrap; border: 1px solid var(--blue); color: var(--blue); background: transparent; border-radius: 999px; padding: .55rem .8rem; cursor: pointer; }
.flashcard-options { list-style: none; padding: 0; display: grid; gap: .65rem; }
.flashcard-options li { display: flex; gap: .75rem; padding: .8rem; border: 1px solid var(--border); border-radius: .6rem; }
.flashcard-options span { color: var(--blue); font-weight: 800; }
.flashcard-answer { margin-top: 1.5rem; }
.flashcard-answer summary { display: inline-block; cursor: pointer; }
.flashcard-answer > div { margin-top: 1rem; padding: 1rem; background: #f0f5ff; border-left: 4px solid var(--blue); }
.review-ratings { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.review-ratings button { padding: .6rem .8rem; border: 1px solid var(--border); border-radius: .5rem; background: #fff; cursor: pointer; }
@media (max-width: 760px) { .learning-summary { grid-template-columns: 1fr; } .flashcard-question { flex-direction: column; } }

.centers-shell, .center-detail-shell, .eligibility-shell, .guide-shell { padding-block: 3rem 5rem; }
.source-warning { margin: 1.5rem 0; padding: 1rem 1.25rem; background: #fff7dd; border-left: 4px solid #e0a100; }
.source-warning p { margin: .35rem 0; }
.center-search { display: grid; grid-template-columns: 2fr 1fr auto; gap: 1rem; align-items: end; padding: 1.25rem; }
.center-search label, .eligibility-form > label { display: grid; gap: .4rem; font-weight: 700; }
.center-results-heading { margin-top: 2rem; }
.center-results-heading p { margin: .35rem 0 0; color: var(--muted); }
.center-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.center-card { display: flex; flex-direction: column; align-items: start; padding: 1.2rem; }
.center-card-location { display: flex; width: 100%; align-items: start; justify-content: space-between; gap: .75rem; }
.center-card-location .card-kicker { margin-top: .2rem; }
.distance-badge { flex: 0 0 auto; padding: .3rem .55rem; border-radius: 999px; background: #e8edff; color: var(--blue-france); font-size: .78rem; }
.center-card .text-link { margin-top: auto; }
.verification-badge { display: inline-flex; margin: .7rem 0; padding: .25rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.verification-badge.is-pending { background: #fff1c2; color: #755000; }
.verification-badge.is-verified { background: #dff7e8; color: #176b3a; }
.pagination { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; }
.center-detail { max-width: 760px; margin: 1.5rem auto; padding: 2rem; }
.center-detail address { font-style: normal; font-size: 1.15rem; line-height: 1.7; }
.center-actions { display: flex; gap: .7rem; margin: 1.5rem 0; }
.eligibility-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.eligibility-form, .eligibility-result, .eligibility-placeholder { display: grid; gap: 1rem; padding: 1.5rem; }
.eligibility-result { border-top: 6px solid var(--blue); }
.eligibility-result.is-required { border-top-color: var(--red); }
.eligibility-result.is-not_required { border-top-color: #198754; }
.check-row { grid-template-columns: auto 1fr !important; align-items: start; }
.guide-timeline { display: grid; gap: 1rem; }
.guide-step { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; padding: 1.5rem; }
.guide-step > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 900; }
.day-checklist { margin-top: 2rem; padding: 1.5rem; border-left: 5px solid var(--red); }
.official-source-box { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem; background: #eef3ff; }
.official-source-box h2 { width: 100%; }
@media (max-width: 760px) { .center-search, .eligibility-layout { grid-template-columns: 1fr; } .center-actions { align-items: stretch; flex-direction: column; } }

/* Private administration */
.admin-shell {
    width: min(78rem, calc(100% - 2rem));
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

.admin-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2rem;
}

.admin-heading .lede,
.admin-profile-heading .lede {
    margin-top: .8rem;
}

.admin-nav {
    display: flex;
    flex: 0 0 auto;
    gap: .35rem;
    padding: .35rem;
    border: 1px solid var(--line);
    border-radius: .45rem;
    background: var(--paper);
}

.admin-nav a,
.admin-status-tabs a {
    padding: .65rem .85rem;
    border-radius: .25rem;
    color: var(--blue-france);
    font-size: .86rem;
    font-weight: 800;
    text-decoration: none;
}

.admin-nav a[aria-current="page"],
.admin-status-tabs a[aria-current="page"] {
    background: var(--blue-france);
    color: #fff;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin: 0 0 1.5rem;
}

.admin-stats article {
    display: grid;
    gap: .25rem;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-top: .3rem solid var(--blue-france);
    border-radius: .35rem;
    background: var(--paper);
    box-shadow: 0 .55rem 1.5rem rgb(22 22 115 / 5%);
}

.admin-stats article.is-alert {
    border-top-color: var(--red-marianne);
    background: #fff7f7;
}

.admin-stats span {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.admin-stats strong {
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 2.4rem;
    font-weight: 500;
}

.admin-stats small {
    color: var(--muted);
}

.admin-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-list {
    align-items: stretch;
}

.admin-list > header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .6rem;
}

.admin-list h2,
.admin-detail-grid h2,
.admin-section h2,
.admin-shell .form-stack h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2.5vw, 2rem);
}

.admin-list .eyebrow {
    margin-bottom: .4rem;
}

.admin-list-row {
    display: flex;
    min-height: 4.2rem;
    align-items: center;
    gap: .8rem;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}

a.admin-list-row:hover strong {
    color: var(--blue-france);
}

.admin-list-row > span:not(.admin-avatar) {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: .2rem;
}

.admin-list-row small,
.admin-table small {
    display: block;
    overflow: hidden;
    color: var(--muted);
    font-size: .77rem;
    text-overflow: ellipsis;
}

.admin-avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .72rem;
    font-weight: 900;
}

.admin-avatar.is-large {
    width: 5rem;
    height: 5rem;
    font-family: Georgia, serif;
    font-size: 1.45rem;
    font-weight: 500;
}

.admin-pill {
    display: inline-flex;
    width: max-content;
    padding: .3rem .55rem;
    border-radius: 99rem;
    background: #eeeef4;
    color: #525264;
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.admin-pill.is-paid,
.admin-pill.status-paid {
    background: #daf8e4;
    color: #0f5a2c;
}

.admin-pill.status-pending_team {
    background: #ffe0e2;
    color: #8f0009;
}

.admin-pill.status-pending_user {
    background: #ececfe;
    color: var(--blue-france);
}

.admin-filters {
    display: flex;
    align-items: end;
    gap: .75rem;
    margin: 1.4rem 0 1rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
}

.admin-filters label {
    display: grid;
    max-width: 34rem;
    flex: 1;
    gap: .4rem;
    color: var(--blue-ink);
    font-size: .8rem;
    font-weight: 800;
}

.admin-filters input {
    width: 100%;
    min-height: 2.7rem;
    padding: .6rem .75rem;
    border: 1px solid #b9b9ca;
    border-radius: .25rem;
    background: #fff;
}

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
    box-shadow: 0 .5rem 1.5rem rgb(22 22 115 / 5%);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .86rem;
    text-align: left;
}

.admin-table th,
.admin-table td {
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.admin-table th {
    background: #f1f1fb;
    color: var(--blue-ink);
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.admin-table tbody tr:hover,
.admin-table tr.needs-answer {
    background: #fff8f8;
}

.admin-preview {
    max-width: 20rem;
    overflow: hidden;
    color: var(--muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: .84rem;
    font-weight: 750;
}

.admin-status-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: 1rem;
}

.admin-status-tabs a {
    border: 1px solid var(--line);
    background: var(--paper);
}

.admin-status-tabs strong {
    margin-left: .25rem;
}

.admin-profile-heading {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin: 2rem 0;
}

.admin-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.admin-details {
    margin: 1rem 0 0;
}

.admin-details div {
    display: grid;
    grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.3fr);
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid var(--line);
}

.admin-details dt {
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.admin-details dd {
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
    font-size: .88rem;
}

.admin-section {
    margin-top: 2.5rem;
}

.admin-section > h2 {
    margin-bottom: 1rem;
}

.admin-ticket-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

.admin-candidate-line {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}

.admin-candidate-line a {
    color: var(--blue-france);
    font-weight: 750;
}

.admin-email-addresses {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: .35rem;
    background: #f5f5fe;
}

.admin-email-addresses div {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .35rem 0;
}

.admin-email-addresses dt {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-email-addresses dd {
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
}

.admin-email-body {
    overflow-wrap: anywhere;
    line-height: 1.65;
}

.admin-email-body p {
    margin: 0;
    white-space: normal;
}

.admin-email-attachments {
    margin-top: 1rem;
}

.admin-email-attachments ul {
    display: grid;
    gap: .55rem;
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.admin-email-attachments small {
    margin-left: .5rem;
    color: var(--muted);
}

.admin-conversation .message-team {
    justify-self: end;
    border-color: #c9c9f4;
    background: #ececfe;
}

.admin-conversation .message-user {
    justify-self: start;
    border-color: var(--line);
    background: #fff;
}

.admin-form-help {
    margin-top: -.5rem;
    color: var(--muted);
    font-size: .85rem;
}

.admin-reopen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}

@media (max-width: 62rem) {
    .admin-heading {
        align-items: start;
        flex-direction: column;
    }

    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .admin-columns,
    .admin-detail-grid {
        grid-template-columns: 1fr;
    }

    .admin-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-nav {
        width: 100%;
        overflow-x: auto;
    }
}

/* Naturalisation interview */
.interview-shell {
    overflow: hidden;
}

.interview-hero {
    display: grid;
    min-height: 38rem;
    align-items: center;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
    gap: clamp(2rem, 6vw, 6rem);
}

.interview-hero h1 {
    max-width: 13ch;
    font-size: clamp(3rem, 6.5vw, 5.7rem);
}

.interview-language-line {
    max-width: 43rem;
    margin-top: 1.5rem;
    padding-inline-start: 1rem;
    border-inline-start: .25rem solid var(--red-marianne);
    color: var(--muted);
    line-height: 1.55;
}

.interview-distinction {
    position: relative;
    display: grid;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 1.5rem 3.5rem rgb(22 22 115 / 12%);
}

.interview-distinction::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: .42rem;
    background: linear-gradient(var(--blue-france) 0 48%, #fff 48% 52%, var(--red-marianne) 52%);
    content: "";
}

[dir="rtl"] .interview-distinction::before {
    right: 0;
    left: auto;
}

.interview-distinction article {
    display: grid;
    align-items: start;
    padding: 1.25rem;
    grid-template-columns: 3.25rem 1fr;
    gap: 1rem;
}

.interview-distinction article > span {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border-radius: 50%;
    background: #ececfe;
    color: var(--blue-france);
    font-family: Georgia, serif;
    font-size: 1.25rem;
}

.interview-distinction article:last-child > span {
    background: #fee9ea;
    color: var(--red-marianne);
}

.interview-distinction strong {
    color: var(--blue-ink);
    font-size: 1.12rem;
}

.interview-distinction p {
    margin: .35rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.interview-not-equal {
    display: grid;
    height: 2.6rem;
    place-items: center;
    border-block: 1px solid var(--line);
    color: var(--red-marianne);
    font-size: 1.55rem;
    font-weight: 900;
}

.interview-metrics {
    display: grid;
    background: var(--blue-france);
    color: #fff;
    grid-template-columns: repeat(3, 1fr);
}

.interview-metrics article {
    display: grid;
    min-height: 9rem;
    place-content: center;
    padding: 1.5rem;
    border-inline-end: 1px solid rgb(255 255 255 / 20%);
    text-align: center;
}

.interview-metrics strong {
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 500;
}

.interview-metrics span {
    color: #e3e3fd;
}

.interview-method > ol {
    display: grid;
    margin: 2rem 0 0;
    padding: 0;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    list-style: none;
}

.interview-method > ol li {
    display: grid;
    min-height: 13rem;
    align-content: start;
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-top: .3rem solid var(--blue-france);
    background: var(--paper);
    grid-template-columns: 2.5rem 1fr;
    gap: 1rem;
}

.interview-method > ol li:nth-child(2) {
    border-top-color: #6a6af4;
}

.interview-method > ol li:nth-child(3) {
    border-top-color: var(--red-marianne);
}

.interview-method > ol li > span {
    color: var(--red-marianne);
    font-family: Georgia, serif;
    font-size: 2rem;
}

.interview-method > ol strong {
    color: var(--blue-ink);
    font-size: 1.08rem;
}

.interview-method > ol p {
    margin: .5rem 0 0;
    color: var(--muted);
    line-height: 1.55;
}

.interview-privacy-note {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    border-inline-start: .35rem solid var(--success);
    background: #eaf7ef;
}

.interview-privacy-note p {
    margin: .3rem 0 0;
    line-height: 1.5;
}

.interview-themes {
    padding-top: 0;
}

.interview-theme-grid {
    display: grid;
    margin-top: 2rem;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.interview-theme-card {
    position: relative;
    display: flex;
    min-height: 20rem;
    flex-direction: column;
    padding: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-top: .35rem solid var(--blue-france);
    background: var(--paper);
    box-shadow: 0 .7rem 1.8rem rgb(22 22 115 / 7%);
    grid-column: span 2;
}

.interview-theme-card:nth-child(4),
.interview-theme-card:nth-child(5) {
    grid-column: span 3;
}

.interview-theme-card:nth-child(even) {
    border-top-color: #6a6af4;
}

.interview-theme-card:last-child {
    border-top-color: var(--red-marianne);
}

.interview-theme-number {
    position: absolute;
    top: .8rem;
    right: 1rem;
    color: rgb(0 0 145 / 8%);
    font-family: Georgia, serif;
    font-size: 5rem;
    line-height: 1;
}

[dir="rtl"] .interview-theme-number {
    right: auto;
    left: 1rem;
}

.interview-theme-card h3 {
    position: relative;
    margin: .6rem 0;
    color: var(--blue-ink);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    font-weight: 500;
}

.interview-theme-card > p:not(.card-kicker) {
    position: relative;
    margin: 0 0 1.5rem;
    color: var(--muted);
    line-height: 1.55;
}

.interview-theme-card .text-link {
    position: relative;
    margin-top: auto;
}

.interview-faq-band {
    background: linear-gradient(125deg, #ececfe, #fff 55%, #fff1f1);
}

.interview-faq-list {
    display: grid;
    margin-top: 2rem;
    gap: .7rem;
}

.interview-faq-list details {
    border: 1px solid var(--line);
    background: var(--paper);
}

.interview-faq-list summary {
    padding: 1.1rem 3rem 1.1rem 1.25rem;
    color: var(--blue-ink);
    font-weight: 800;
    cursor: pointer;
}

[dir="rtl"] .interview-faq-list summary {
    padding-right: 1.25rem;
    padding-left: 3rem;
}

.interview-faq-list p {
    max-width: 54rem;
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: var(--muted);
    line-height: 1.65;
}

.interview-source-grid {
    display: grid;
    margin-top: 2rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .8rem;
}

.interview-source-grid article {
    display: flex;
    min-height: 16rem;
    flex-direction: column;
    padding: 1.2rem;
    border: 1px solid var(--line);
    background: var(--paper);
}

.interview-source-grid article > span {
    color: var(--red-marianne);
    font-family: Georgia, serif;
    font-size: 1.6rem;
}

.interview-source-grid h3 {
    margin: .65rem 0;
    color: var(--blue-ink);
    font-size: 1rem;
}

.interview-source-grid p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.interview-source-grid .text-link {
    margin-top: auto;
}

.interview-disclaimer {
    max-width: 54rem;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
}

.interview-practice-shell {
    padding-top: 3rem;
}

.interview-back {
    display: inline-block;
    margin-bottom: 2rem;
}

.interview-practice-heading {
    display: grid;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 2rem;
}

.interview-practice-heading h1 {
    max-width: 18ch;
    font-size: clamp(2.7rem, 5vw, 4.7rem);
}

.interview-practice-heading > div:first-child > p:last-child {
    max-width: 48rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.55;
}

.interview-overall-progress {
    display: grid;
    gap: .45rem;
}

.interview-overall-progress > span {
    color: var(--muted);
    font-size: .88rem;
    font-weight: 700;
}

.interview-overall-progress > strong {
    color: var(--blue-france);
    font-size: 1.3rem;
}

.interview-overall-progress > div {
    height: .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line);
}

.interview-overall-progress > div > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue-france), var(--red-marianne));
    transition: width .25s ease;
}

.interview-category-tabs {
    display: flex;
    margin: 2.2rem 0 1.2rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    gap: .25rem;
}

.interview-category-tabs a {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: .5rem;
    padding: .75rem .85rem;
    border-bottom: .25rem solid transparent;
    color: var(--muted);
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
}

.interview-category-tabs a span {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 50%;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .76rem;
}

.interview-category-tabs a[aria-current="page"] {
    border-bottom-color: var(--red-marianne);
    color: var(--blue-france);
}

.interview-practice-layout {
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    gap: 1.2rem;
}

.interview-question-card,
.interview-recording-card {
    border: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 .8rem 2.1rem rgb(22 22 115 / 8%);
}

.interview-question-card {
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border-top: .4rem solid var(--blue-france);
}

.interview-question-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.interview-question-card > header > span {
    color: var(--muted);
    font-size: .9rem;
}

.interview-question-card > h2 {
    max-width: 25ch;
    margin: 1.2rem 0 1rem;
    font-size: clamp(1.9rem, 4vw, 3.15rem);
}

.interview-guidance {
    margin-top: 1.7rem;
    padding: 1.2rem;
    border-inline-start: .3rem solid var(--red-marianne);
    background: #f6f6fe;
}

.interview-guidance-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.interview-guidance-heading h3 {
    margin: .3rem 0;
    color: var(--blue-ink);
    font-size: 1.18rem;
}

.interview-guidance-heading label {
    display: grid;
    min-width: 10rem;
    gap: .3rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
}

.interview-guidance-heading select {
    min-height: 2.6rem;
    padding: .45rem;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.interview-guidance > p {
    margin: .9rem 0 0;
    line-height: 1.65;
}

.interview-sample {
    margin-top: 1rem;
    border: 1px solid var(--line);
}

.interview-sample summary {
    padding: 1rem 1.15rem;
    color: var(--blue-france);
    font-weight: 800;
    cursor: pointer;
}

.interview-sample > div {
    padding: 0 1.15rem 1.15rem;
}

.interview-sample-warning {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
}

.interview-sample blockquote {
    margin: .8rem 0 0;
    padding: 1rem 1.15rem;
    border-inline-start: .3rem solid var(--blue-france);
    background: #ececfe;
    color: var(--blue-ink);
    line-height: 1.65;
}

.interview-draft {
    display: grid;
    margin-top: 1.4rem;
    gap: .35rem;
    color: var(--blue-ink);
    font-weight: 800;
}

.interview-draft small {
    color: var(--muted);
    font-weight: 400;
    line-height: 1.45;
}

.interview-draft textarea {
    width: 100%;
    margin-top: .45rem;
    padding: 1rem;
    resize: vertical;
    border: 1px solid var(--line);
    border-radius: .2rem;
    background: #fff;
    color: var(--ink);
    line-height: 1.55;
}

.interview-draft textarea:focus,
.interview-guidance select:focus {
    outline: .2rem solid rgb(0 0 145 / 22%);
    outline-offset: .1rem;
    border-color: var(--blue-france);
}

.interview-recording-card {
    position: sticky;
    top: 1rem;
    padding: 1.5rem;
    border-top: .4rem solid var(--red-marianne);
}

.interview-mic-icon {
    display: grid;
    width: 3.5rem;
    height: 3.5rem;
    place-items: center;
    border: .45rem solid #fee9ea;
    border-radius: 50%;
    background: var(--red-marianne);
    color: #fff;
}

.interview-recording-card h2 {
    margin: .4rem 0;
    font-size: 1.65rem;
}

.interview-recording-card > p:not(.card-kicker, .interview-mic-status, .interview-local-only) {
    color: var(--muted);
    line-height: 1.55;
}

.interview-mic-status {
    min-height: 2.8rem;
    margin: 1.2rem 0 .7rem;
    padding: .7rem .8rem;
    background: #f6f6fe;
    color: var(--blue-ink);
    line-height: 1.4;
}

.interview-mic-actions {
    display: grid;
}

.interview-mic-actions .button-red {
    border-color: var(--red-marianne);
    background: var(--red-marianne);
}

.interview-mic-actions .button-red:hover {
    background: var(--red-dark);
}

.interview-playback {
    display: grid;
    margin-top: 1rem;
    gap: .7rem;
}

.interview-playback[hidden] {
    display: none;
}

.interview-playback audio {
    width: 100%;
}

.interview-playback .text-link {
    justify-self: start;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.interview-local-only {
    margin-top: 1rem;
    color: var(--success);
    font-size: .83rem;
    line-height: 1.45;
}

.interview-self-rating {
    margin-top: 1.3rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
}

.interview-self-rating > p {
    margin: 0 0 .7rem;
}

.interview-self-rating > div {
    display: grid;
    gap: .5rem;
}

.interview-self-rating button {
    min-height: 2.7rem;
    padding: .55rem .7rem;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--blue-france);
    font-weight: 750;
    text-align: start;
    cursor: pointer;
}

.interview-self-rating button:hover,
.interview-self-rating button.is-selected {
    border-color: var(--blue-france);
    background: #ececfe;
}

.interview-self-rating button[data-rating="ready"].is-selected {
    border-color: var(--success);
    background: #eaf7ef;
    color: var(--success);
}

.interview-self-rating > small {
    display: block;
    min-height: 1.3rem;
    margin-top: .65rem;
    color: var(--success);
}

.interview-question-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.2rem;
}

.interview-source-note {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: 1.2rem;
    padding: 1rem;
    border-inline-start: .3rem solid var(--blue-france);
    background: #ececfe;
    font-size: .88rem;
}

.interview-source-note a {
    color: var(--blue-france);
    font-weight: 750;
}

@media (max-width: 64rem) {
    .interview-source-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 58rem) {
    .interview-hero,
    .interview-practice-heading,
    .interview-practice-layout {
        grid-template-columns: 1fr;
    }

    .interview-hero {
        min-height: 0;
    }

    .interview-method > ol {
        grid-template-columns: 1fr;
    }

    .interview-method > ol li {
        min-height: 0;
    }

    .interview-recording-card {
        position: static;
    }
}

@media (max-width: 44rem) {
    .interview-metrics,
    .interview-source-grid {
        grid-template-columns: 1fr;
    }

    .interview-theme-grid {
        grid-template-columns: 1fr;
    }

    .interview-theme-card,
    .interview-theme-card:nth-child(4),
    .interview-theme-card:nth-child(5) {
        min-height: 17rem;
        grid-column: auto;
    }

    .interview-guidance-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .interview-question-navigation .button {
        padding-inline: .8rem;
        font-size: .88rem;
    }
}

@media (max-width: 34rem) {
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-profile-heading,
    .admin-ticket-heading,
    .admin-reopen {
        align-items: start;
        flex-direction: column;
    }
}

.book-hero {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(15rem, 22rem) 1fr;
    gap: clamp(2.5rem, 6vw, 6rem);
}

.book-cover-wrap {
    perspective: 80rem;
}

.book-cover {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .35rem .8rem .8rem .35rem;
    box-shadow: -1rem 1.4rem 2.8rem rgb(6 31 73 / 24%);
    transform: rotateY(5deg);
}

.book-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 1.5rem 0;
}

.book-language-promise {
    display: grid;
    gap: .7rem;
    max-width: 44rem;
    margin: 1.5rem 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid #c9c9f4;
    border-inline-start: .4rem solid var(--red-marianne);
    border-radius: .4rem;
    background: linear-gradient(105deg, #ececfe 0%, #fff 58%, #fff0f0 100%);
}

.book-language-promise strong {
    color: var(--blue-france);
    font-size: 1.15rem;
}

.book-language-promise small {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.45;
}

.book-language-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.book-language-list span {
    padding: .38rem .65rem;
    border-radius: 999px;
    background: var(--blue-france);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
}

.book-badges span {
    padding: .5rem .75rem;
    border: 1px solid #c9c9f4;
    border-radius: 999px;
    background: #ececfe;
    color: var(--blue-france);
    font-size: .88rem;
    font-weight: 800;
}

.book-badges .book-badge-included {
    border-color: var(--red-marianne);
    background: #fff0f0;
    color: var(--red-dark);
}

.book-included-banner {
    display: grid;
    gap: .3rem;
    max-width: 42rem;
    padding: 1rem 1.15rem;
    border-inline-start: .35rem solid var(--red-marianne);
    margin: 1.4rem 0 1rem;
    background: linear-gradient(100deg, #ececfe, #fff7f7);
    color: var(--blue-ink);
}

.book-included-banner strong {
    font-size: 1.05rem;
}

.book-included-banner span {
    color: var(--muted);
    line-height: 1.5;
}

.book-feature-band {
    background: var(--blue-france);
    color: #fff;
}

.book-feature-grid {
    display: grid;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.book-feature-grid article {
    padding-inline-start: 1.25rem;
    border-inline-start: .3rem solid var(--red-marianne);
}

.book-feature-grid strong {
    display: block;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
}

.book-feature-grid h2 {
    margin: .6rem 0 .35rem;
    font-size: 1.15rem;
}

.book-feature-grid p {
    margin: 0;
    color: #e3e3fd;
}

.book-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.book-tools-lede {
    margin-bottom: 1.5rem;
    max-width: 46rem;
    color: var(--muted);
    line-height: 1.6;
}

.book-tools-grid a,
.resource-card {
    padding: 1.5rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: var(--paper);
    box-shadow: 0 .6rem 1.7rem rgb(22 22 115 / 7%);
}

.book-tools-grid a {
    display: grid;
    gap: .45rem;
    color: var(--blue-france);
    text-decoration: none;
}

.book-tools-grid a:hover {
    border-color: var(--blue-france);
    transform: translateY(-2px);
}

.book-tools-grid span {
    color: var(--muted);
}

.book-resources,
.book-question {
    padding-top: clamp(3rem, 6vw, 6rem);
}

.book-resources {
    display: grid;
    gap: 1.25rem;
}

.resource-card-download {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-inline-start: .35rem solid var(--red-marianne);
}

.resource-card-languages {
    display: grid;
    gap: .9rem;
    border-inline-start: .35rem solid var(--blue-france);
    background: linear-gradient(120deg, #ececfe, var(--paper) 62%);
}

.resource-card-languages h2,
.resource-card-languages p {
    margin: 0;
}

.resource-card-languages .button {
    justify-self: start;
}

.resource-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .7rem;
}

.resource-links a {
    padding: .8rem;
    border-radius: .3rem;
    background: #ececfe;
    color: var(--blue-france);
    font-weight: 750;
}

.book-question h1 {
    margin-block: 2rem;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.book-answer-list {
    display: grid;
    gap: .75rem;
    padding-inline-start: 2.7rem;
}

.book-answer-list li {
    padding: 1rem 1.2rem;
    border: 1px solid var(--line);
    border-radius: .4rem;
    background: var(--paper);
}

.book-answer-list li.is-correct {
    border-color: var(--success);
    background: #eaf7ef;
    font-weight: 750;
}

.book-explanation {
    margin-top: 2rem;
    padding: clamp(1.4rem, 4vw, 2.5rem);
    border-inline-start: .4rem solid var(--blue-france);
    background: var(--paper);
    box-shadow: 0 1rem 2.5rem rgb(22 22 115 / 9%);
}

.correct-answer {
    color: var(--success);
    font-size: 1.1rem;
    font-weight: 800;
}

.question-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.question-meta-row .card-kicker {
    margin: 0;
}

.question-provenance-badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .35rem;
    padding: .32rem .62rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    line-height: 1;
}

.question-provenance-badge.is-official {
    border-color: #9ac9ad;
    background: #e5f6eb;
    color: #146c3c;
}

.question-provenance-badge.is-training {
    border-color: #b8c2e8;
    background: #eef1ff;
    color: var(--blue-france);
}

.question-provenance-badge.is-simulated_scenario {
    border-color: #e4c57b;
    background: #fff5d9;
    color: #725000;
}

@media (max-width: 48rem) {
    .book-hero,
    .book-feature-grid,
    .book-tools-grid {
        grid-template-columns: 1fr;
    }

    .book-cover-wrap {
        width: min(17rem, 78vw);
        margin: 0 auto;
    }

    .resource-card-download {
        align-items: stretch;
        flex-direction: column;
    }
}