/* French.lu stylesheet. One token layer; every component below uses it.
   Structure and rhythm follow the StaatsPass redesign (Alan, 2 October 2026); palette is French.lu's own:
   the logo's blue #002494 (primary, CTA), its red #ED2433 (accent), navy for dark surfaces, white page.
   Two typefaces, both self-hosted: Source Serif 4 for display headings and taught French, Inter for text. */

/* 1. Tokens */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:200 900;font-display:swap;src:url(/fonts/source-serif-4.ttf) format("truetype")}
:root{
  --fl-blue:#002494;--fl-blue-hover:#001A6E;--fl-blue-soft:#E8ECF9;--fl-blue-line:#C3CCEE;
  --fl-red:#ED2433;--fl-red-hover:#C9182A;--fl-red-soft:#FDE9EB;
  --fl-navy:#0B1A4F;--fl-navy-deep:#071239;
  --fl-ink:#0F1F4F;--fl-muted:#4B5569;--fl-muted-on-navy:#B9C3E3;--fl-on-navy:rgba(255,255,255,.84);--fl-line-on-navy:rgba(255,255,255,.16);
  --fl-white:#FFFFFF;--fl-surface:#F6F8FC;--fl-tint:#F3F5FC;--fl-line:#E4E8F2;--fl-line-strong:#C9D1E3;
  --fl-success:#1B7A4A;--fl-success-soft:#E4F4EA;
  --fl-s1:4px;--fl-s2:8px;--fl-s3:12px;--fl-s4:16px;--fl-s5:24px;--fl-s6:32px;--fl-s7:48px;--fl-s8:64px;--fl-s9:72px;
  --fl-r-control:10px;--fl-r-card:16px;--fl-r-card-lg:20px;--fl-r-pill:999px;--fl-r-sm:7px;
  --fl-shadow-soft:0 1px 2px rgba(15,31,79,.06),0 1px 1px rgba(15,31,79,.04);--fl-shadow-raised:0 16px 40px rgba(15,31,79,.10);--fl-shadow-card:0 20px 50px rgba(15,31,79,.10),0 1px 0 rgba(15,31,79,.04);--fl-shadow-blue:0 8px 20px rgba(0,36,148,.28);--fl-shadow-featured:0 16px 40px rgba(0,36,148,.14);
  --fl-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fl-display:"Source Serif 4",Georgia,"Times New Roman",serif;--phrase-font:var(--fl-display);
  --fl-t-xs:.75rem;--fl-t-sm:.875rem;--fl-t-base:1rem;--fl-t-md:1.0625rem;--fl-t-lg:1.1875rem;--fl-t-h3:1.375rem;--fl-t-h2:clamp(1.875rem,2.6vw,2.5rem);--fl-t-h1:clamp(2.125rem,3.2vw,2.875rem);--fl-t-display:clamp(2.5rem,4.4vw,4rem);--fl-t-num:2.75rem;--fl-t-btn:1.0625rem;
  --fl-lh:1.55;--fl-lh-tight:1.1;
  --fl-container:1440px;--fl-gutter:20px;--fl-gap:var(--fl-s4);--fl-section:var(--fl-s7);
  --fl-control-h:44px;--fl-control-h-lg:52px;--fl-icon:18px;--fl-nav-h:72px;--fl-stripe:4px;
  --fl-ring:0 0 0 3px rgba(0,36,148,.35);--fl-ease:.15s ease;
  --brand-navy:var(--fl-blue);--brand-red:var(--fl-red);
}
@media(min-width:768px){:root{--fl-gutter:40px;--fl-gap:var(--fl-s5);--fl-section:var(--fl-s9)}}
@media(min-width:1280px){:root{--fl-gutter:80px}}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--fl-font);font-size:var(--fl-t-base);line-height:var(--fl-lh);color:var(--fl-ink);background:var(--fl-white)}
h1,h2,h3,h4{font-family:var(--fl-display);font-weight:600;line-height:var(--fl-lh-tight);margin:0 0 var(--fl-s4);letter-spacing:-.015em;color:var(--fl-ink);text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:var(--fl-t-h1)}
h2{font-size:var(--fl-t-h2)}
h3{font-size:var(--fl-t-h3);font-family:var(--fl-font);font-weight:700;letter-spacing:-.01em}
h4{font-size:var(--fl-t-md);font-family:var(--fl-font);font-weight:700}
p{margin:0 0 var(--fl-s4);color:var(--fl-muted);text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--fl-blue);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--fl-ease)}
a:hover{color:var(--fl-blue-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--fl-ring)}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
[lang=fr],[data-taught]{font-family:var(--phrase-font)}
.container{width:100%;max-width:var(--fl-container);margin-inline:auto;padding-inline:var(--fl-gutter)}
.container>*{min-width:0}
.section{padding-block:var(--fl-section)}
.section-alt{background:var(--fl-tint);border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line)}
.section-alt+.section-alt{border-top:0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--fl-s6);margin-bottom:var(--fl-s6)}
.section-head>div{min-width:0}
.section-head h2{margin:0}
.section-head p{margin:0;font-size:var(--fl-t-md);color:var(--fl-muted);flex:0 1 46ch}
@media(max-width:819px){.section-head{flex-direction:column;align-items:flex-start;gap:var(--fl-s4)}.section-head p{flex:none}}
.eyebrow{display:block;font-weight:700;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fl-red);margin-bottom:var(--fl-s3)}
.lead{font-size:var(--fl-t-lg);line-height:1.55;color:var(--fl-muted);margin-bottom:var(--fl-s5)}
.notice{background:var(--fl-blue-soft);border:1px solid var(--fl-blue-line);border-radius:var(--fl-r-control);padding:var(--fl-s3) var(--fl-s4);color:var(--fl-ink);font-size:var(--fl-t-sm);margin:0 0 var(--fl-s5)}
.page-head{margin-bottom:var(--fl-s6)}
.page-head h1{margin-bottom:var(--fl-s2)}
.page-head .lead{margin-bottom:0}
.actions{display:flex;flex-wrap:wrap;gap:var(--fl-s3);margin-top:var(--fl-s6)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--fl-blue);color:var(--fl-white);padding:var(--fl-s2) var(--fl-s4);border-radius:0 0 var(--fl-r-control) 0}
.skip:focus{left:0;z-index:100}

/* 3. Buttons: primary blue with its glow, secondary white with a strong border, outline, ghost-light on navy, quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--fl-s2);min-height:var(--fl-control-h);padding:var(--fl-s3) var(--fl-s5);border-radius:var(--fl-r-control);font-family:inherit;font-weight:700;font-size:var(--fl-t-btn);line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--fl-ease),color var(--fl-ease),border-color var(--fl-ease),box-shadow var(--fl-ease),transform var(--fl-ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--fl-blue);color:var(--fl-white);border-color:var(--fl-blue);box-shadow:var(--fl-shadow-blue)}
.btn-primary:hover{background:var(--fl-blue-hover);border-color:var(--fl-blue-hover);color:var(--fl-white)}
.btn-secondary{background:var(--fl-white);color:var(--fl-ink);border-color:var(--fl-line-strong)}
.btn-secondary:hover{border-color:var(--fl-blue);color:var(--fl-blue)}
.btn-outline{background:transparent;color:var(--fl-ink);border-color:var(--fl-ink);font-size:.9375rem;padding:var(--fl-s2) var(--fl-s4);min-height:40px}
.btn-outline:hover{background:var(--fl-ink);color:var(--fl-white)}
.btn-ghost-light{background:transparent;color:var(--fl-white);border-color:rgba(255,255,255,.3);font-size:var(--fl-t-base)}
.btn-ghost-light:hover{border-color:var(--fl-white);color:var(--fl-white)}
.btn-quiet{background:transparent;color:var(--fl-muted);border-color:transparent;font-weight:600;font-size:var(--fl-t-sm)}
.btn-quiet:hover{color:var(--fl-ink);background:var(--fl-surface);transform:none}
.btn-block{width:100%}
.btn-lg{min-height:var(--fl-control-h-lg);padding:var(--fl-s4) var(--fl-s6)}
.btn-sm{font-size:var(--fl-t-sm);padding:var(--fl-s2) var(--fl-s4);min-height:40px}
.btn svg{width:var(--fl-icon);height:var(--fl-icon);stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 4. Forms */
.field{display:grid;gap:var(--fl-s2);margin-bottom:var(--fl-s4);min-width:0}
.field>label,.field>span,label{font-weight:700;font-size:var(--fl-t-sm);color:var(--fl-ink);display:block}
label>input:not([type=checkbox]),label>select{margin-top:var(--fl-s2);font-weight:400}
input[type="email"],input[type="text"],input[type="date"],input[type="number"],select{width:100%;min-height:var(--fl-control-h);padding:var(--fl-s2) var(--fl-s3);border:1.5px solid var(--fl-line-strong);border-radius:var(--fl-r-control);font:inherit;font-size:.9375rem;color:var(--fl-ink);background:var(--fl-white);transition:border-color var(--fl-ease),box-shadow var(--fl-ease)}
select{appearance:none;-webkit-appearance:none;padding-right:var(--fl-s6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--fl-s3) center;background-size:var(--fl-icon)}
input:hover,select:hover{border-color:var(--fl-blue)}
input:focus,select:focus,input:focus-visible,select:focus-visible{outline:none;border-color:var(--fl-blue);box-shadow:0 0 0 3px var(--fl-blue-soft)}
input::placeholder{color:var(--fl-muted)}
form{display:grid;gap:var(--fl-s4);margin:0}
form label{margin:0}
.check{display:flex;gap:var(--fl-s3);align-items:flex-start;font-weight:400;color:var(--fl-muted);font-size:var(--fl-t-sm)}
.check input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--fl-blue)}
form .btn{justify-self:start}
[role=status]:empty{display:none}

/* 5. Surfaces: cards share border, radius and lift; the featured card is the only red-bordered one */
.card,.qcard,.faq details,.cookie-banner,.test-progress,.lesson-list,.upsell,.stat{background:var(--fl-white);border:1.5px solid var(--fl-line);border-radius:var(--fl-r-card)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fl-s5);align-items:stretch}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards-2{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fl-s5);align-items:stretch}
@media(min-width:768px){.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:var(--fl-s3);padding:var(--fl-s5);min-width:0;color:inherit;text-decoration:none;transition:border-color var(--fl-ease),box-shadow var(--fl-ease),transform var(--fl-ease)}
.card:hover{border-color:var(--fl-blue-line);box-shadow:var(--fl-shadow-raised);transform:translateY(-3px);color:inherit}
.card.featured{border-color:var(--fl-red);box-shadow:var(--fl-shadow-featured)}
.card.featured:hover{border-color:var(--fl-red)}
.card.muted{background:var(--fl-surface)}
.card h3{margin:0}
.card p{margin:0;color:var(--fl-muted);font-size:var(--fl-t-sm);line-height:1.5}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--fl-s2);flex:1;color:var(--fl-ink);font-size:var(--fl-t-sm)}
.card ul li{display:flex;gap:var(--fl-s2);align-items:flex-start;padding-top:var(--fl-s2);border-top:1px solid var(--fl-line)}
.card ul li::before,.checks li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--fl-r-pill);background:var(--fl-blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23002494' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.card>form,.card>.btn,.card>.card-foot{margin-top:auto}
.card>.btn{align-self:stretch}
.card .btn{white-space:normal;text-align:center}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--fl-s3);flex-wrap:wrap;padding-top:var(--fl-s3)}
.card-foot span{font-size:var(--fl-t-sm);font-weight:700;color:var(--fl-blue)}
.card-num{font-family:var(--fl-display);font-weight:600;font-size:var(--fl-t-h2);line-height:1;color:var(--fl-blue)}
.price{font-weight:700;font-size:var(--fl-t-num);line-height:1;margin:0;color:var(--fl-ink);font-variant-numeric:tabular-nums}
.price small{font-size:var(--fl-t-sm);font-weight:400;color:var(--fl-muted);display:block;margin-top:var(--fl-s2)}
.tag{display:inline-flex;align-self:flex-start;font-size:var(--fl-t-xs);font-weight:700;color:var(--fl-blue);background:var(--fl-blue-soft);padding:4px 10px;border-radius:var(--fl-r-pill);white-space:nowrap}
.tag.gray{color:var(--fl-muted);background:var(--fl-line)}
.tag.green{color:var(--fl-success);background:var(--fl-success-soft)}
.ribbon{position:absolute;top:-13px;left:var(--fl-s5);font-size:var(--fl-t-xs);font-weight:700;color:var(--fl-white);background:var(--fl-red);padding:5px 12px;border-radius:var(--fl-r-pill);white-space:nowrap}
.pricing-cards .card{padding-top:var(--fl-s6)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--fl-s3);margin-block:var(--fl-s5)}
.stat{padding:var(--fl-s4);background:var(--fl-surface);min-width:0;text-align:center}
.stat b{display:block;font-weight:700;font-size:var(--fl-t-h3);color:var(--fl-blue);line-height:1.2}
.stat small{display:block;color:var(--fl-muted);font-size:var(--fl-t-xs);margin-top:2px;line-height:1.3}
@media(max-width:479px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 6. Header: tricolour stripe, monogram mark plus wordmark, centre links, language switch, account button */
.flag-stripe{display:flex;height:var(--fl-stripe)}
.flag-stripe span{flex:1}
.flag-stripe span:nth-child(1){background:var(--fl-blue)}
.flag-stripe span:nth-child(2){background:var(--fl-white)}
.flag-stripe span:nth-child(3){background:var(--fl-red)}
.nav{position:sticky;top:0;z-index:50;background:var(--fl-white);border-bottom:1px solid var(--fl-line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:var(--fl-s4);min-height:var(--fl-nav-h)}
.brand{display:flex;align-items:center;gap:var(--fl-s3);text-decoration:none;flex:none;border-radius:var(--fl-r-sm)}
.brand-mark{width:38px;height:38px;border-radius:var(--fl-r-pill);background:var(--fl-blue);padding:3px}
.brand-logo{height:24px;width:auto;display:none}
@media(min-width:480px){.brand-logo{display:block}}
@media(min-width:768px){.brand-logo{height:28px}}
.nav-links{display:none;gap:var(--fl-s6);list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--fl-ink);text-decoration:none;font-weight:600;font-size:var(--fl-t-base);transition:color var(--fl-ease)}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--fl-blue)}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-right{display:flex;align-items:center;gap:var(--fl-s3);min-width:0}
.nav-right .btn-outline{white-space:nowrap}
@media(max-width:639px){.nav-right .btn-outline{display:none}}
.lang{display:flex;gap:2px;border:1px solid var(--fl-line);border-radius:var(--fl-r-control);padding:3px;background:var(--fl-white);flex:none}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 9px;border-radius:var(--fl-r-sm);font-size:.8125rem;font-weight:700;text-decoration:none;color:var(--fl-muted);transition:background var(--fl-ease),color var(--fl-ease)}
.lang a:hover{background:var(--fl-blue-soft);color:var(--fl-blue)}
.lang a[aria-current]{background:var(--fl-blue);color:var(--fl-white)}
@media(max-width:479px){.lang a{padding:0 6px;font-size:.75rem}}
.subnav{display:flex;gap:var(--fl-s5);overflow-x:auto;padding:var(--fl-s3) var(--fl-gutter);max-width:var(--fl-container);margin-inline:auto;border-bottom:1px solid var(--fl-line);scrollbar-width:none}
.subnav a{white-space:nowrap;font-weight:600;font-size:var(--fl-t-sm);text-decoration:none;color:var(--fl-muted)}
.subnav a:hover,.subnav a[aria-current]{color:var(--fl-blue)}
@media(min-width:1024px){.subnav{display:none}}

/* 7. Hero: full logo and copy on the left, the offer card on the right */
.hero{background:linear-gradient(180deg,var(--fl-tint) 0%,var(--fl-white) 100%);padding-block:var(--fl-s7)}
@media(min-width:1024px){.hero{padding-block:var(--fl-s9) var(--fl-s8)}}
.hero-grid{display:grid;gap:var(--fl-s6);align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--fl-s8)}}
.hero-copy{display:flex;flex-direction:column;gap:var(--fl-s5);min-width:0}
.hero-logo{height:44px;width:auto;align-self:flex-start}
@media(min-width:768px){.hero-logo{height:56px}}
.hero-pill{display:inline-flex;align-items:center;gap:var(--fl-s2);align-self:flex-start;background:var(--fl-white);border:1px solid var(--fl-blue-line);color:var(--fl-blue);font-size:.8125rem;font-weight:700;padding:6px 12px;border-radius:var(--fl-r-pill);max-width:100%}
.hero-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--fl-red)}
.hero h1{font-size:var(--fl-t-display);line-height:1.05;letter-spacing:-.02em;margin:0}
.hero .lead{margin:0;max-width:60ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--fl-s3);align-items:center;margin:0}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--fl-s2) var(--fl-s5);font-size:var(--fl-t-sm);font-weight:600;color:var(--fl-ink)}
.checks li{display:flex;align-items:center;gap:var(--fl-s2)}
.checks li::before{margin-top:0}
.hero-side{display:flex;flex-direction:column;gap:var(--fl-s4);min-width:0}

/* 8. Feature row */
.features{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--fl-s5);padding-block:var(--fl-s6);border-top:1px solid var(--fl-line);border-bottom:1px solid var(--fl-line)}
@media(min-width:640px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.features{grid-template-columns:repeat(4,minmax(0,1fr))}}
.feature{display:flex;align-items:center;gap:var(--fl-s4);min-width:0}
.feature>div{min-width:0}
.feature-icon{width:44px;height:44px;border-radius:var(--fl-r-control);background:var(--fl-blue-soft);display:grid;place-items:center;flex:none}
.feature-icon svg{width:22px;height:22px;stroke:var(--fl-blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature strong{display:block;font-weight:700;font-size:var(--fl-t-base);color:var(--fl-ink)}
.feature small{font-size:.8125rem;color:var(--fl-muted)}

/* 9. Upsell (navy offer card), lesson list, test, FAQ */
.upsell{background:var(--fl-navy);border-color:var(--fl-navy);color:var(--fl-white);padding:var(--fl-s5);display:flex;flex-direction:column;gap:var(--fl-s3);box-shadow:var(--fl-shadow-card)}
.upsell .eyebrow{color:var(--fl-red);margin:0}
.upsell h2,.upsell h3{color:var(--fl-white);margin:0}
.upsell h2{font-size:var(--fl-t-h3)}
.upsell p{margin:0;color:var(--fl-on-navy)}
.upsell .price{color:var(--fl-white);font-size:var(--fl-t-num)}
.upsell .price small{color:var(--fl-muted-on-navy)}
.upsell ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--fl-s2);font-size:var(--fl-t-sm);color:var(--fl-on-navy)}
.upsell ul li{display:flex;gap:var(--fl-s2);align-items:flex-start;padding-top:var(--fl-s2);border-top:1px solid var(--fl-line-on-navy)}
.upsell ul li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--fl-r-pill);background:rgba(255,255,255,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.upsell .btn{width:100%;margin-top:var(--fl-s2)}
.upsell .btn-primary{box-shadow:none}
.upsell-sticky{position:sticky;top:calc(var(--fl-nav-h) + var(--fl-s4))}
.split{display:grid;gap:var(--fl-s6);align-items:start}
@media(min-width:1024px){.split{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--fl-s8)}}
.split>div{min-width:0}
.lesson-list{list-style:none;margin:0;padding:0;overflow:hidden}
.lesson-list li+li{border-top:1px solid var(--fl-line)}
.lesson-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--fl-s4);padding:var(--fl-s4) var(--fl-s5);text-decoration:none;color:var(--fl-ink);font-weight:600;transition:background var(--fl-ease)}
.lesson-list a:hover{background:var(--fl-surface);color:var(--fl-blue)}
.lesson-list .tag{flex:none}
.lesson-list .n{color:var(--fl-muted);font-weight:400;font-size:var(--fl-t-sm);min-width:0}
.lesson-list .n b{color:var(--fl-ink);font-weight:600;font-size:var(--fl-t-base);display:block}
.block{display:grid;gap:var(--fl-s5)}
.block .card{gap:var(--fl-s2)}
.block .card h2{font-size:var(--fl-t-h3);margin:0}
.audio-row{display:flex;flex-wrap:wrap;gap:var(--fl-s3);align-items:center}
.audio-row select{width:auto;min-width:96px}
.test-main{padding-block:var(--fl-s6) var(--fl-section)}
.test-progress{display:grid;grid-template-columns:1fr auto;gap:var(--fl-s2) var(--fl-s4);align-items:center;padding:var(--fl-s3) var(--fl-s4);margin-bottom:var(--fl-s4)}
.test-progress .count{font-weight:700;color:var(--fl-muted);white-space:nowrap;font-size:var(--fl-t-sm)}
.progress{grid-column:1/-1;height:8px;border-radius:var(--fl-r-pill);background:var(--fl-line);overflow:hidden}
.progress>span{display:block;height:100%;width:0;background:var(--fl-blue);border-radius:inherit}
.qcard{padding:var(--fl-s5)}
.qcard h2{font-size:var(--fl-t-h3);font-family:var(--fl-font);font-weight:700;line-height:1.35;margin-bottom:var(--fl-s3)}
.qcard ol{margin:0;padding:0;list-style:none;display:grid;gap:var(--fl-s2);counter-reset:q}
.qcard ol li{display:flex;align-items:center;gap:var(--fl-s3);padding:var(--fl-s3) var(--fl-s4);border:1.5px solid var(--fl-line);border-radius:var(--fl-r-control);font-size:var(--fl-t-sm);color:var(--fl-muted);min-width:0;flex-wrap:wrap}
.qcard ol li b{color:var(--fl-ink);font-weight:600}
.qcard ol li .tag{margin-left:auto}
.test-actions{display:flex;justify-content:flex-start;align-items:center;gap:var(--fl-s3);flex-wrap:wrap;margin-top:var(--fl-s5)}
.faq{display:grid;gap:var(--fl-s3)}
.faq details{transition:border-color var(--fl-ease)}
.faq details:hover{border-color:var(--fl-blue-line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--fl-s4) var(--fl-s5);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:var(--fl-s4);border-radius:var(--fl-r-card)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:var(--fl-r-pill);background:var(--fl-blue-soft);color:var(--fl-blue);font-weight:700}
.faq details[open] summary::after{content:"\2212"}
.faq details>p{padding:0 var(--fl-s5) var(--fl-s4);margin:0}
.legal{max-width:72ch}
.legal p{font-size:var(--fl-t-md)}
.address{color:var(--fl-muted);font-size:var(--fl-t-sm)}

/* 10. Footer (navy), cookie banner, mobile buy bar */
.site-footer{background:var(--fl-navy);color:var(--fl-muted-on-navy);padding-block:var(--fl-s7) var(--fl-s6);font-size:var(--fl-t-sm)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--fl-s4) var(--fl-s6)}
.footer-top img{height:30px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--fl-s2) var(--fl-s5);font-weight:600}
.site-footer a{color:var(--fl-muted-on-navy);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;border-radius:var(--fl-r-sm);transition:color var(--fl-ease)}
.site-footer a:hover{color:var(--fl-white)}
.footer-bottom{margin-top:var(--fl-s6);padding-top:var(--fl-s4);border-top:1px solid var(--fl-line-on-navy);display:flex;flex-wrap:wrap;gap:var(--fl-s2) var(--fl-s5);justify-content:space-between;align-items:center;font-size:.8125rem}
.footer-bottom p{margin:0;color:inherit}
.cookie-banner{position:fixed;inset:auto 0 0;z-index:60;padding:var(--fl-s3) var(--fl-gutter);display:grid;gap:var(--fl-s2);border-radius:0;border-width:1px 0 0;box-shadow:0 -8px 30px rgba(15,31,79,.08)}
.cookie-banner p{margin:0;font-size:var(--fl-t-sm);color:var(--fl-muted)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--fl-s2);align-items:center}
.cookie-actions .btn-primary{font-size:var(--fl-t-sm);padding-inline:var(--fl-s4);box-shadow:none}
.cookie-actions .btn-quiet{color:var(--fl-muted);font-weight:400;font-size:var(--fl-t-xs);padding-inline:var(--fl-s2)}
@media(min-width:1024px){.cookie-banner{grid-template-columns:1fr auto;align-items:center}}
.cookie-banner[hidden],[hidden]{display:none!important}
html[data-consent] .cookie-banner{display:none!important}
.cookie-settings{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.mobile-buy-bar{display:none}
@media(max-width:1023px){
  .mobile-buy-bar{position:fixed;inset:auto 0 var(--fl-consent-h,0px);z-index:59;display:flex;justify-content:space-between;align-items:center;gap:var(--fl-s3);padding:var(--fl-s2) var(--fl-gutter) calc(var(--fl-s2) + env(safe-area-inset-bottom));background:var(--fl-white);border-top:1px solid var(--fl-line)}
  .mobile-buy-bar strong{white-space:nowrap;font-size:var(--fl-t-sm)}
  .mobile-buy-bar strong b{display:block;font-size:var(--fl-t-lg);color:var(--fl-blue)}
  .mobile-buy-bar .btn{flex:none}
  body:has(.mobile-buy-bar){padding-bottom:calc(var(--fl-consent-h,0px) + var(--fl-s8) + env(safe-area-inset-bottom))}
}
.actions.tight{margin-top:0}
.split .tag{margin-bottom:var(--fl-s4)}
.card .price{font-size:var(--fl-t-num);line-height:1}
.card .price small{font-size:var(--fl-t-sm)}
.nav .subnav{justify-content:flex-start}
.upsell .btn,.cookie-actions .btn{white-space:normal;text-align:center}
.stats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hero-logo{margin-bottom:var(--fl-s2)}

/* Course content: lessons, exercises, the ten question test and audio.
   Every block takes the width its parent gives it; nothing here caps a
   component. Selected and correct states are visible, never implied. */
.stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lesson-meta{color:var(--fl-muted);font-size:var(--fl-t-sm);margin:0 0 var(--fl-s3)}
.lesson-list .n em{display:block;font-style:normal;color:var(--fl-muted);font-size:var(--fl-t-sm);font-weight:400}
.corpus{list-style:none;margin:0;padding:0;display:grid;gap:var(--fl-s2)}
.corpus>li{display:flex;align-items:center;gap:var(--fl-s3);width:100%;padding:var(--fl-s2) 0;border-bottom:1px solid var(--fl-line)}
.corpus>li:last-child{border-bottom:0}
.corpus-text{flex:1 1 auto;min-width:0;display:grid;gap:2px}
.corpus-text b{font-family:var(--fl-display);font-size:var(--fl-t-md);line-height:var(--fl-lh-tight)}
.corpus-text span{color:var(--fl-muted);font-size:var(--fl-t-sm)}
.corpus-text small{color:var(--fl-blue);font-size:var(--fl-t-xs);text-transform:uppercase;letter-spacing:.04em}
.dialogue{counter-reset:none}
.btn-audio{flex:0 0 auto;width:var(--fl-control-h);height:var(--fl-control-h);display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:var(--fl-r-pill);background:var(--fl-blue-soft);color:var(--fl-blue);border:1px solid var(--fl-blue-line)}
.btn-audio:hover{background:var(--fl-blue);color:var(--fl-white)}
.audio-glyph{font-size:14px;line-height:1}
.audio-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--fl-s3)}
.speed{display:inline-flex;align-items:center;gap:var(--fl-s2);font-size:var(--fl-t-sm);color:var(--fl-muted)}
.speed select{height:var(--fl-control-h);border-radius:var(--fl-r-control);border:1px solid var(--fl-line-strong);padding:0 var(--fl-s2);background:var(--fl-white)}
.exercises{list-style:none;margin:0;padding:0;display:grid;gap:var(--fl-s4)}
.exercises>li{padding:var(--fl-s3);border:1px solid var(--fl-line);border-radius:var(--fl-r-card);background:var(--fl-surface);width:100%}
.x-head b{font-size:var(--fl-t-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--fl-blue)}
.x-prompt{font-family:var(--fl-display);font-size:var(--fl-t-md);margin:var(--fl-s1) 0 var(--fl-s3);display:flex;align-items:center;gap:var(--fl-s2);flex-wrap:wrap}
.x-hint{color:var(--fl-muted);font-size:var(--fl-t-sm);margin:0 0 var(--fl-s2)}
.x-options{list-style:none;margin:0;padding:0;display:grid;gap:var(--fl-s2)}
.option{width:100%;text-align:left;padding:var(--fl-s2) var(--fl-s3);min-height:var(--fl-control-h);border:1px solid var(--fl-line-strong);border-radius:var(--fl-r-control);background:var(--fl-white);font:inherit;font-size:var(--fl-t-base);color:var(--fl-ink);cursor:pointer;transition:background var(--fl-ease),border-color var(--fl-ease)}
.option:hover{border-color:var(--fl-blue);background:var(--fl-blue-soft)}
.option.selected{border-color:var(--fl-blue);background:var(--fl-blue-soft);box-shadow:inset 0 0 0 1px var(--fl-blue);font-weight:600}
.option.right{border-color:var(--fl-success);background:var(--fl-success-soft);font-weight:600}
.option.wrong{border-color:var(--fl-red);background:var(--fl-red-soft)}
.tiles{display:flex;flex-wrap:wrap;gap:var(--fl-s2);margin:var(--fl-s2) 0}
.tile{padding:var(--fl-s1) var(--fl-s3);min-height:var(--fl-control-h);border:1px solid var(--fl-line-strong);border-radius:var(--fl-r-pill);background:var(--fl-white);font:inherit;cursor:pointer}
.tile.used{opacity:.35;pointer-events:none}
.x-line{min-height:var(--fl-control-h);display:flex;flex-wrap:wrap;gap:var(--fl-s2);align-items:center;padding:var(--fl-s2);border:1px dashed var(--fl-line-strong);border-radius:var(--fl-r-control);font-family:var(--fl-display);font-size:var(--fl-t-md)}
.x-actions{display:flex;flex-wrap:wrap;gap:var(--fl-s2);margin-top:var(--fl-s2)}
.x-result{margin:var(--fl-s2) 0 0;font-weight:600;min-height:1.2em}
.x-result.ok{color:var(--fl-success)}
.x-result.no{color:var(--fl-red)}
.x-why{margin:var(--fl-s2) 0 0;color:var(--fl-muted);font-size:var(--fl-t-sm)}
.test-items{list-style:none;margin:0;padding:0}
.test-items .tag{margin-left:var(--fl-s2)}
.card.locked{border-color:var(--fl-blue-line);background:var(--fl-blue-soft)}
#test-result h2 b{color:var(--fl-blue)}
.card .corpus li::before,.card .exercises li::before,.card .x-options li::before{content:none;display:none}