/* StaatsPass stylesheet. One token layer, every component below uses it.
   Source of truth: the owner's redesign (Alan, 2 October 2026: shared/tg-40880010-0-staatspass.css,
   index.html, account.html and the hero mockup PDF), integrated into this token layer.
   Palette: Luxembourg flag red #ED2939 and blue #00A1DE, the logo's navy, body text #4B5563. */

/* 1. Tokens */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/plus-jakarta-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500 800;font-display:swap;src:url("/assets/plus-jakarta-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* colour: red only on the primary CTA and the "Most chosen" card, blue for links, badges, the active language, hover and focus */
  --sp-navy:#0F2444;--sp-navy-hover:#0A1A33;--sp-navy-soft:#E9EEF5;
  --sp-red:#ED2939;--sp-red-btn:#E52230;--sp-red-hover:#C91F2D;--sp-red-text:#C91F2D;--sp-red-soft:#FDECEE;
  --sp-azure:#00A1DE;--sp-azure-soft:#E8F6FC;--sp-azure-line:#BFE4F5;--sp-azure-light:#7FD3F3;--sp-link:#0077B3;--sp-link-hover:#005C8A;
  --sp-ink:#0F2444;--sp-muted:#4B5563;--sp-muted-on-navy:#B8C7D9;
  --sp-white:#FFFFFF;--sp-surface:#F7FAFC;--sp-tint:#F2F9FD;--sp-line:#E6EEF5;--sp-line-strong:#CBD7E3;
  --sp-success:#1B7A4A;--sp-success-soft:#E4F4EA;
  --sp-on-navy:rgba(255,255,255,.82);--sp-line-on-navy:rgba(255,255,255,.18);
  /* semantic aliases kept for older markup */
  --sp-primary:var(--sp-navy);--sp-primary-hover:var(--sp-navy-hover);--sp-primary-soft:var(--sp-navy-soft);
  --sp-accent:var(--sp-red);--sp-accent-text:var(--sp-red-text);--sp-accent-soft:var(--sp-red-soft);
  --sp-btn-bg:var(--sp-red-btn);--sp-btn-bg-hover:var(--sp-red-hover);--sp-btn-fg:var(--sp-white);
  /* spacing scale */
  --sp-s1:4px;--sp-s2:8px;--sp-s3:12px;--sp-s4:16px;--sp-s5:24px;--sp-s6:32px;--sp-s7:48px;--sp-s8:64px;--sp-s9:72px;
  /* radius scale */
  --sp-r-control:10px;--sp-r-card:16px;--sp-r-card-lg:20px;--sp-r-pill:999px;--sp-r-sm:7px;
  /* shadow scale */
  --sp-shadow-none:none;--sp-shadow-soft:0 1px 2px rgba(15,36,68,.06),0 1px 1px rgba(15,36,68,.04);--sp-shadow-raised:0 16px 40px rgba(15,36,68,.10);--sp-shadow-card:0 20px 50px rgba(15,36,68,.10),0 1px 0 rgba(15,36,68,.04);--sp-shadow-red:0 8px 20px rgba(237,41,57,.25);--sp-shadow-featured:0 16px 40px rgba(237,41,57,.12);
  /* type scale (Plus Jakarta Sans, 16 body, 14 labels, headings 800; H1 clearly larger than H2) */
  --sp-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sp-t-xs:.75rem;--sp-t-sm:.875rem;--sp-t-base:1rem;--sp-t-md:1.0625rem;--sp-t-lg:1.1875rem;--sp-t-h3:1.375rem;--sp-t-h2:clamp(1.875rem,2.6vw,2.375rem);--sp-t-h1:clamp(2rem,3vw,2.5rem);--sp-t-display:clamp(2.375rem,4.2vw,3.75rem);--sp-t-num:2.5rem;--sp-t-btn:1.0625rem;
  --sp-w-head:800;--sp-w-bold:700;--sp-w-semi:600;--sp-w-body:500;
  --sp-lh:1.5;--sp-lh-tight:1.1;
  /* layout: the container sets the margins; inner blocks take the full width their parent gives */
  --sp-container:1440px;--sp-gutter:20px;--sp-gap:var(--sp-s4);--sp-section:var(--sp-s7);
  --sp-control-h:44px;--sp-abs-unit:0.9px;--sp-abs-pad-stem:20px;--sp-abs-pad-option:40px;--sp-abs-pad-row:88px;--sp-control-h-lg:52px;--sp-icon:18px;--sp-nav-h:72px;--sp-sidebar:232px;--sp-stripe:4px;
  --sp-ring:0 0 0 3px var(--sp-azure);
  --sp-ease:.15s ease;
}
@media(min-width:768px){:root{--sp-gutter:40px;--sp-gap:var(--sp-s5);--sp-section:var(--sp-s9)}}
@media(min-width:1280px){:root{--sp-gutter:80px}}

/* 2. Base */
.question-report{display:block;margin-top:var(--sp-s4);width:100%}
.question-report-flag{border:0;background:transparent;color:var(--sp-muted);font:inherit;font-size:var(--sp-t-sm);padding:var(--sp-s2) 0;cursor:pointer}
.question-report-flag:hover,.question-report-flag:focus-visible{color:var(--sp-link);text-decoration:underline}
.question-report-fields{display:grid;gap:var(--sp-s3);width:100%;padding:var(--sp-s3) 0}
.question-report-fields[hidden]{display:none}
.question-report-fields label{display:grid;gap:var(--sp-s1);width:100%;font-size:var(--sp-t-sm)}
.question-report-fields select,.question-report-fields input{width:100%;min-height:var(--sp-control-h);border:1px solid var(--sp-line-strong);border-radius:var(--sp-r-control);padding:var(--sp-s2);font:inherit}
.question-report-fields .btn{justify-self:start}
.question-report-status{display:block;color:var(--sp-success);font-size:var(--sp-t-sm)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sp-font);font-weight:var(--sp-w-body);font-size:var(--sp-t-base);line-height:var(--sp-lh);color:var(--sp-ink);background:var(--sp-white)}
h1,h2,h3,h4{font-weight:var(--sp-w-head);line-height:var(--sp-lh-tight);margin:0 0 var(--sp-s4);letter-spacing:-.02em;text-wrap:balance;overflow-wrap:anywhere}
h1{font-size:var(--sp-t-h1)}
h2{font-size:var(--sp-t-h2);letter-spacing:-.025em}
h3{font-size:var(--sp-t-h3);letter-spacing:-.015em}
h4{font-size:var(--sp-t-md)}
p{margin:0 0 var(--sp-s4);color:var(--sp-muted)}
p:last-child{margin-bottom:0}
li,td,th,label,legend{color:inherit}
a{color:var(--sp-link);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--sp-ease)}
a:hover{color:var(--sp-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--sp-ring)}
img,svg{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
.container{width:100%;max-width:var(--sp-container);margin-inline:auto;padding-inline:var(--sp-gutter)}
.container>*{min-width:0}
.urgency-strip{background:var(--sp-navy);color:var(--sp-white);border-bottom:var(--sp-stripe) solid var(--sp-azure)}
.urgency-strip .container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s2) var(--sp-s5);padding-block:var(--sp-s3);font-size:var(--sp-t-sm)}
.urgency-strip strong{font-weight:var(--sp-w-head);color:var(--sp-white)}
.urgency-strip span{color:var(--sp-white)}
.urgency-clock{font-variant-numeric:tabular-nums;font-weight:var(--sp-w-head);white-space:nowrap;background:var(--sp-azure);padding:var(--sp-s1) var(--sp-s2);border-radius:var(--sp-r-pill)}
.urgency-card-line,.urgency-exam-line{font-size:var(--sp-t-sm);color:var(--sp-ink);margin-bottom:var(--sp-s2)}
.urgency-card-line{font-weight:var(--sp-w-bold)}
.urgency-result{display:flex;flex-wrap:wrap;gap:var(--sp-s2) var(--sp-s5);background:var(--sp-azure-soft);border:1px solid var(--sp-azure-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);margin-block:var(--sp-s5);color:var(--sp-ink)}
.urgency-result strong{font-weight:var(--sp-w-head)}
.urgency-strip strong,.urgency-strip span,.urgency-card-line,.urgency-exam-line,.urgency-result>*{text-wrap:balance}
.section{padding-block:var(--sp-section)}
.section-alt{background:var(--sp-tint);border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line)}
.section-alt+.section-alt{border-top:0}
.section .container>h1,.section .container>h2{margin-bottom:var(--sp-s3)}
.section .container>h2+p,.section .container>h1+p{color:var(--sp-muted);font-size:var(--sp-t-md);margin-bottom:var(--sp-s6)}
.section .container>h2:not(:first-child){margin-top:var(--sp-s6)}
.section .container>.cards+p{margin-top:var(--sp-s5);color:var(--sp-muted)}
.section .container>.cards+p+p{color:var(--sp-muted)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-s6);margin-bottom:var(--sp-s6)}
.section-head>div{min-width:0}
.section-head h2{margin:0}
.section-head p{margin:0;font-size:var(--sp-t-base);color:var(--sp-muted);flex:0 1 46ch}
@media(max-width:819px){.section-head{flex-direction:column;align-items:flex-start;gap:var(--sp-s4)}.section-head p{flex:none}}
.eyebrow{display:block;font-weight:var(--sp-w-head);font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sp-red-text);margin-bottom:var(--sp-s3)}
.lead{font-size:var(--sp-t-lg);line-height:1.55;color:var(--sp-muted);margin-bottom:var(--sp-s5)}
.context{color:var(--sp-muted);font-size:var(--sp-t-base);margin:0}
.notice{background:var(--sp-azure-soft);border:1px solid var(--sp-azure-line);border-radius:var(--sp-r-control);padding:var(--sp-s3) var(--sp-s4);color:var(--sp-ink);font-size:var(--sp-t-sm);margin:0 0 var(--sp-s4)}
.page-head{margin-bottom:var(--sp-s6)}
.page-head h1{margin-bottom:var(--sp-s1)}
.page-title{font-size:var(--sp-t-h1);margin:0 0 var(--sp-s5)}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-s3);margin-top:var(--sp-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(--sp-navy);color:var(--sp-white);padding:var(--sp-s2) var(--sp-s4);border-radius:0 0 var(--sp-r-control) 0}
.skip:focus{left:0;z-index:100}

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

/* 4. Forms: 44 px controls, 10 px corners, 14 px labels, blue focus ring; choice grids are real radios */
.field{display:grid;gap:var(--sp-s2);margin-bottom:var(--sp-s4);min-width:0}
.field>label,.field>span,.field legend{font-weight:var(--sp-w-bold);font-size:var(--sp-t-sm);color:var(--sp-ink);padding:0}
.field fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:var(--sp-s2)}
.field select,.field input,input[type="email"],input[type="text"],input[type="date"],input[type="number"],select{width:100%;min-height:var(--sp-control-h);padding:var(--sp-s2) var(--sp-s3);border:1.5px solid var(--sp-line-strong);border-radius:var(--sp-r-control);font:inherit;font-size:.9375rem;color:var(--sp-ink);background:var(--sp-white);transition:border-color var(--sp-ease),box-shadow var(--sp-ease)}
select{appearance:none;-webkit-appearance:none;padding-right:var(--sp-s6);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' 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(--sp-s3) center;background-size:var(--sp-icon)}
input:hover,select:hover{border-color:var(--sp-azure)}
input:focus,select:focus,input:focus-visible,select:focus-visible{outline:none;border-color:var(--sp-azure);box-shadow:0 0 0 3px var(--sp-azure-soft)}
input::placeholder{color:var(--sp-muted)}
.field .error{color:var(--sp-red-text);font-size:var(--sp-t-sm)}
.field .help{color:var(--sp-muted);font-size:var(--sp-t-sm)}
.field-row{display:grid;gap:var(--sp-s3)}
@media(min-width:480px){.field-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.choice-grid{display:grid;gap:var(--sp-s2);grid-template-columns:repeat(2,minmax(0,1fr))}
.choice-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.choice{position:relative;min-width:0}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:block;text-align:center;font-weight:var(--sp-w-bold);font-size:var(--sp-t-sm);padding:var(--sp-s3) var(--sp-s1);border-radius:var(--sp-r-control);border:1.5px solid var(--sp-line-strong);background:var(--sp-white);color:var(--sp-ink);transition:border-color var(--sp-ease),background var(--sp-ease),color var(--sp-ease);overflow-wrap:anywhere}
.choice input:hover+span{border-color:var(--sp-azure)}
.choice input:checked+span{border-color:var(--sp-azure);background:var(--sp-azure-soft);color:var(--sp-link)}
.choice input:focus-visible+span{box-shadow:var(--sp-ring)}

/* 5. Surfaces: cards share border, radius and lift; the featured card is the only red one */
.card,.onb,.qcard,.score-card,.stat,.faq details,.cookie-banner,.test-progress,.daily-plan li,.upsell{background:var(--sp-white);border:1.5px solid var(--sp-line);border-radius:var(--sp-r-card);box-shadow:var(--sp-shadow-none)}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-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-4{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-s5);align-items:stretch}
@media(min-width:640px){.cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:var(--sp-s3);padding:var(--sp-s5);min-width:0;transition:border-color var(--sp-ease),box-shadow var(--sp-ease),transform var(--sp-ease)}
.card:hover{border-color:var(--sp-azure-line);box-shadow:var(--sp-shadow-raised);transform:translateY(-3px)}
.card.featured{border-color:var(--sp-red);box-shadow:var(--sp-shadow-featured)}
.card.featured:hover{border-color:var(--sp-red)}
.card.muted{background:var(--sp-surface)}
.card h3{margin:0}
.card p{margin:0;color:var(--sp-muted);font-size:var(--sp-t-sm);line-height:1.5}
.card .price{color:var(--sp-ink);font-size:var(--sp-t-h3);white-space:nowrap}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-s2);flex:1;color:var(--sp-ink);font-size:var(--sp-t-sm)}
.card ul li{display:flex;gap:var(--sp-s2);align-items:flex-start;padding-top:var(--sp-s2);border-top:1px solid var(--sp-line)}
.card ul li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--sp-r-pill);background:var(--sp-azure-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077B3' 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>form{padding-top:var(--sp-s2)}
.card>.btn{align-self:stretch}
.card .btn{white-space:normal;text-align:center}
.card form .btn:not(.btn-link){width:100%}
.card-form{display:grid;gap:var(--sp-s2)}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-s3);flex-wrap:wrap;padding-top:var(--sp-s3)}
.card-foot form{margin:0}
.card-foot a{font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);text-decoration:none}
.price{font-weight:var(--sp-w-head);font-size:var(--sp-t-h3);line-height:1.1;margin:0;color:var(--sp-ink)}
.tag{display:inline-flex;align-self:flex-start;font-size:var(--sp-t-xs);font-weight:var(--sp-w-head);color:var(--sp-link-hover);background:var(--sp-azure-soft);padding:4px 10px;border-radius:var(--sp-r-pill)}
.tag.gray{color:var(--sp-muted);background:var(--sp-line)}
.ribbon{position:absolute;top:-13px;left:var(--sp-s5);font-size:var(--sp-t-xs);font-weight:var(--sp-w-head);color:var(--sp-white);background:var(--sp-red);padding:5px 12px;border-radius:var(--sp-r-pill);white-space:nowrap}
.pricing-cards{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.pricing-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pricing-cards .card{padding-top:var(--sp-s6)}

/* 6. Header: tricolour stripe, wordmark, centre links, language switch with the active language in blue, account button */
.flag-stripe{display:flex;height:var(--sp-stripe)}
.flag-stripe span{flex:1}
.flag-stripe span:nth-child(1){background:var(--sp-red)}
.flag-stripe span:nth-child(2){background:var(--sp-white)}
.flag-stripe span:nth-child(3){background:var(--sp-azure)}
.nav{position:sticky;top:0;z-index:50;background:var(--sp-white);border-bottom:1px solid var(--sp-line)}
.nav .container{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s4);min-height:var(--sp-nav-h)}
.brand{display:flex;align-items:center;text-decoration:none;flex:none;border-radius:var(--sp-r-sm)}
.brand-logo{height:30px;width:auto;display:block}
@media(min-width:768px){.brand-logo{height:36px}}
.nav-links{display:none;gap:var(--sp-s6);list-style:none;margin:0;padding:0}
.nav-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--sp-ink);text-decoration:none;font-weight:var(--sp-w-semi);font-size:var(--sp-t-base);transition:color var(--sp-ease)}
.nav-links a:hover{color:var(--sp-link)}
@media(min-width:1024px){.nav-links{display:flex}}
.nav .container.mobile-catalogue-row{display:none}
@media(max-width:1023px){.nav .container.mobile-catalogue-row{display:block;min-height:0;border-top:1px solid var(--sp-line)}.mobile-catalogue-link{display:block;padding-block:var(--sp-s2);color:var(--sp-link);font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);text-decoration:none}.mobile-catalogue-link:focus-visible{box-shadow:var(--sp-ring)}}
.nav-right{display:flex;align-items:center;gap:var(--sp-s3);min-width:0}
.nav-right .btn-outline{white-space:nowrap}
@media(max-width:639px){.nav-right .btn-outline{padding-inline:var(--sp-s3);font-size:var(--sp-t-sm)}}
.lang{display:flex;gap:2px;border:1px solid var(--sp-line);border-radius:var(--sp-r-control);padding:3px;background:var(--sp-white);flex:none}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 10px;border-radius:var(--sp-r-sm);font-size:.8125rem;font-weight:var(--sp-w-bold);text-decoration:none;color:var(--sp-muted);transition:background var(--sp-ease),color var(--sp-ease)}
.lang a:hover{background:var(--sp-azure-soft);color:var(--sp-link)}
.lang a[aria-current]{background:var(--sp-link);color:var(--sp-white)}
@media(max-width:479px){.lang a{padding:0 7px}}
.user-chip{text-decoration:none;display:flex;align-items:center;gap:var(--sp-s2);min-width:0;font-size:var(--sp-t-sm);font-weight:var(--sp-w-semi);color:var(--sp-muted)}
.user-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar{flex:none;width:36px;height:36px;border-radius:var(--sp-r-pill);background:var(--sp-azure-soft);color:var(--sp-link-hover);font-weight:var(--sp-w-head);font-size:var(--sp-t-sm);display:grid;place-items:center}

/* 7. Hero: copy on the left, the white plan form plus the navy "today" product visual on the right */
.hero{background:linear-gradient(180deg,var(--sp-tint) 0%,var(--sp-white) 100%);padding-block:var(--sp-s7) var(--sp-s7)}
@media(min-width:1024px){.hero{padding-block:var(--sp-s9) var(--sp-s8)}}
.hero-grid{display:grid;gap:var(--sp-s6);align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s8)}}
.hero-copy{display:flex;flex-direction:column;gap:var(--sp-s5);min-width:0}
.hero-pill{display:inline-flex;align-items:center;gap:var(--sp-s2);align-self:flex-start;background:var(--sp-white);border:1px solid var(--sp-azure-line);color:var(--sp-link);font-size:.8125rem;font-weight:var(--sp-w-bold);padding:6px 12px;border-radius:var(--sp-r-pill);max-width:100%}
.hero-pill::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--sp-azure)}
.hero h1{font-size:var(--sp-t-display);line-height:1.05;letter-spacing:-.03em;margin:0}
.hero h1 em{font-style:normal;color:var(--sp-red)}
.hero .lead{margin:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:center;margin:0}
.hero-note{font-size:var(--sp-t-sm);color:var(--sp-muted);margin:0}
.checks{display:flex;gap:var(--sp-s3) var(--sp-s5);flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:var(--sp-t-sm);color:var(--sp-muted);font-weight:var(--sp-w-semi)}
.checks li{display:flex;align-items:center;gap:var(--sp-s2);min-width:0}
.checks svg{width:var(--sp-icon);height:var(--sp-icon);stroke:var(--sp-azure);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hero-side{display:flex;flex-direction:column;gap:var(--sp-s4);min-width:0}
.home-paths{scroll-margin-top:var(--sp-s9)}
.home-path-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-gap)}
@media(min-width:640px){.home-path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.home-path-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.home-path-card p{flex:1}
.hero-price{font-size:var(--sp-t-lg);font-weight:var(--sp-w-bold);color:var(--sp-navy)}
.home-proof{padding-block:var(--sp-s5)}
.home-proof ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-s4);padding:0;margin:0;list-style:none}
.home-proof li{padding:var(--sp-s4);border:1px solid var(--sp-line);border-radius:var(--sp-r-control);font-weight:var(--sp-w-semi)}
@media(max-width:1023px){.home-proof ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:639px){.home-proof ul{grid-template-columns:minmax(0,1fr)}}
.product-comparison{list-style:none;padding:0;display:grid;gap:var(--sp-s3)}
.product-comparison li{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s4);padding:var(--sp-s4);border:1px solid var(--sp-line);border-radius:var(--sp-r-control)}
@media(max-width:639px){.product-comparison li{grid-template-columns:minmax(0,1fr)}}
.contact-form{display:grid;gap:var(--sp-s3);width:100%}
.contact-form input,.contact-form textarea{width:100%;min-width:0}
.contact-form .contact-honey{display:none}
.home-card-link{display:inline-flex;align-items:center;align-self:flex-start;min-height:var(--sp-control-h);font-weight:var(--sp-w-bold);color:var(--sp-link);text-decoration:none}
.home-card-link:hover{text-decoration:underline}
.home-card-link:focus-visible{box-shadow:var(--sp-ring)}
.home-pass{margin-top:var(--sp-gap);background:var(--sp-navy);border-color:var(--sp-navy);color:var(--sp-white);display:flex;gap:var(--sp-s5)}
.home-pass h3,.home-pass p,.home-pass .price{color:var(--sp-white)}
.home-pass-action{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s4)}
@media(min-width:768px){.home-pass{flex-direction:row;justify-content:space-between;align-items:center}.home-pass-action{flex:none}}
.onb{padding:var(--sp-s5);border:0;border-top:4px solid var(--sp-red);border-radius:var(--sp-r-card-lg);box-shadow:var(--sp-shadow-card);scroll-margin-top:96px;min-width:0;display:flex;flex-direction:column;gap:var(--sp-s4)}
@media(min-width:768px){.onb{padding:var(--sp-s6)}}
.onb .field{margin:0}
.onb-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-s3);flex-wrap:wrap}
.onb h2{font-size:var(--sp-t-h3);margin:0}
.onb .sub,.onb-note{color:var(--sp-muted);font-size:.8125rem;font-weight:var(--sp-w-semi);margin:0}
.onb .btn-block{margin-top:var(--sp-s1)}
.today-card{background:var(--sp-navy);color:var(--sp-white);border-radius:var(--sp-r-card);padding:var(--sp-s4) var(--sp-s5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s4);min-width:0}
.today-card>div{min-width:0}
.today-card .eyebrow{font-size:var(--sp-t-xs);letter-spacing:.08em;color:var(--sp-azure-light);margin-bottom:2px}
.today-card .title{font-size:.9375rem;font-weight:var(--sp-w-bold);display:block}
.progress-block{display:flex;flex-direction:column;gap:6px;min-width:160px;flex:0 0 auto}
.progress-meta{display:flex;justify-content:space-between;gap:var(--sp-s3);font-size:var(--sp-t-xs);font-weight:var(--sp-w-bold);color:var(--sp-muted-on-navy)}
.today-card .progress{background:rgba(255,255,255,.15)}
@media(max-width:639px){.today-card{flex-direction:column;align-items:stretch}.progress-block{min-width:0}}
.auth-grid{display:grid;gap:var(--sp-s6);align-items:start}
@media(min-width:1024px){.auth-grid{grid-template-columns:1.2fr minmax(0,1fr)}}
.auth-grid .onb{border-top-color:var(--sp-red)}

/* 8. Feature row, plan timeline and plan page */
.features{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-s5);padding-block:var(--sp-s6);border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line)}
@media(min-width:640px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.features{grid-template-columns:repeat(4,minmax(0,1fr))}}
.feature{display:flex;align-items:center;gap:var(--sp-s4);min-width:0}
.feature>div{min-width:0}
.feature-icon{width:44px;height:44px;border-radius:var(--sp-r-control);background:var(--sp-azure-soft);display:grid;place-items:center;flex:none}
.feature-icon svg{width:22px;height:22px;stroke:var(--sp-link);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.feature strong{display:block;font-weight:var(--sp-w-head);font-size:var(--sp-t-base);color:var(--sp-ink)}
.feature small{font-size:.8125rem;color:var(--sp-muted)}
.plan-strip{display:flex;align-items:center;gap:var(--sp-s3);margin-top:var(--sp-s5)}
.plan-strip::after{content:"";order:1;flex:1;height:2px;border-top:2px dashed var(--sp-line-strong)}
.day{order:0;display:inline-flex;align-items:center;gap:var(--sp-s2);min-height:36px;padding:0 var(--sp-s4);border-radius:var(--sp-r-pill);font-weight:var(--sp-w-bold);font-size:var(--sp-t-sm);white-space:nowrap;border:1px solid var(--sp-line);background:var(--sp-white)}
.day::before{content:"";width:8px;height:8px;border-radius:var(--sp-r-pill);background:currentColor}
.day.today{color:var(--sp-link-hover);border-color:var(--sp-azure);background:var(--sp-azure-soft)}
.day.exam{order:2;color:var(--sp-red-text);border-color:var(--sp-red);background:var(--sp-red-soft)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-s3);margin-block:var(--sp-s5)}
.stat{padding:var(--sp-s4);background:var(--sp-surface);min-width:0;text-align:center}
.stat b{display:block;font-weight:var(--sp-w-head);font-size:var(--sp-t-h3);color:var(--sp-navy);line-height:1.2}
.stat small{display:block;color:var(--sp-muted);font-size:var(--sp-t-xs);margin-top:2px;line-height:1.3}
.daily-plan{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s2);counter-reset:day}
.daily-plan li{display:flex;flex-wrap:wrap;gap:var(--sp-s2) var(--sp-s4);align-items:center;padding:var(--sp-s3) var(--sp-s4);font-size:.9375rem;color:var(--sp-muted)}
.daily-plan li strong{font-weight:var(--sp-w-bold);color:var(--sp-ink);font-variant-numeric:tabular-nums;min-width:7.5em}

/* 9. FAQ */
.faq{display:grid;gap:var(--sp-s3)}
.faq details{transition:border-color var(--sp-ease)}
.faq details:hover{border-color:var(--sp-azure-line)}
.faq summary{list-style:none;cursor:pointer;padding:var(--sp-s4) var(--sp-s5);font-weight:var(--sp-w-bold);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-s4);border-radius:var(--sp-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(--sp-r-pill);background:var(--sp-azure-soft);color:var(--sp-link);font-weight:var(--sp-w-head)}
.faq details[open] summary::after{content:"\2212"}
.faq details>p{padding:0 var(--sp-s5) var(--sp-s4);color:var(--sp-muted);margin:0}

/* 10. Footer (navy) and cookie banner */
.site-footer{background:var(--sp-navy);color:var(--sp-muted-on-navy);padding-block:var(--sp-s7) var(--sp-s6);font-size:var(--sp-t-sm)}
.footer-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-s4) var(--sp-s6)}
.footer-top img{height:28px;width:auto}
.site-footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-s2) var(--sp-s5);font-weight:var(--sp-w-semi)}
.site-footer a{color:var(--sp-muted-on-navy);text-decoration:none;min-height:32px;display:inline-flex;align-items:center;border-radius:var(--sp-r-sm);transition:color var(--sp-ease)}
.site-footer a:hover{color:var(--sp-white)}
.footer-bottom{margin-top:var(--sp-s6);padding-top:var(--sp-s4);border-top:1px solid var(--sp-line-on-navy);display:flex;flex-wrap:wrap;gap:var(--sp-s2) var(--sp-s5);justify-content:space-between;align-items:center;font-size:.8125rem}
.footer-bottom p{margin:0;color:inherit}
.site-footer .container{text-align:center}
.footer-logo{display:block;width:180px;height:auto;margin:0 auto var(--sp-s4)}
.footer-copyright,.footer-identity,.footer-description{margin:0;color:var(--sp-muted-on-navy)}
.footer-identity,.footer-links,.footer-description{margin-top:var(--sp-s4)}
.footer-links{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--sp-s5);row-gap:var(--sp-s1)}
.footer-links a,.footer-cookie-link{white-space:normal}
.footer-cookie-link{border:0;background:none;color:var(--sp-muted-on-navy);font:inherit;font-weight:var(--sp-w-semi);cursor:pointer;min-height:32px;padding:0}
.footer-cookie-link:hover,.footer-cookie-link:focus-visible{color:var(--sp-white)}
.footer-identity a{text-decoration:underline;text-underline-offset:3px}
.footer-description{line-height:1.7}
@media(max-width:819px){.footer-top,.footer-bottom{flex-direction:column;align-items:center;text-align:center}.site-footer nav{justify-content:center}}
/* C5: one bottom surface with reserved space. */
.cookie-banner{position:fixed;inset:auto 0 0;z-index:60;padding:var(--sp-s3) var(--sp-gutter);display:grid;gap:var(--sp-s2);border-radius:0;box-shadow:var(--sp-shadow-soft)}
.cookie-banner p{margin:0;font-size:var(--sp-t-sm);color:var(--sp-muted)}
.cookie-actions{display:flex;flex-wrap:wrap;gap:var(--sp-s2);align-items:center}
.cookie-actions .btn-primary{font-size:var(--sp-t-sm);padding-inline:var(--sp-s4)}
.cookie-actions .btn-quiet{color:var(--sp-muted);background:transparent;border-color:transparent;box-shadow:none;font-weight:var(--sp-w-body);font-size:var(--sp-t-xs);padding-inline:var(--sp-s2)}
.mobile-buy-bar{display:none}
body{padding-bottom:var(--sp-consent-h,0px)}
@media(min-width:768px){.cookie-banner{grid-template-columns:minmax(0,1fr) auto;align-items:center}}
@media(max-width:767px){
 .mobile-buy-bar{position:fixed;inset:auto 0 var(--sp-consent-h,0px);z-index:59;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-s3);padding:var(--sp-s2) var(--sp-gutter);background:var(--sp-white);border-top:1px solid var(--sp-line)}
 .mobile-buy-bar strong{white-space:nowrap}
 body:has(.mobile-buy-bar){padding-bottom:calc(var(--sp-consent-h,0px) + var(--sp-s8) + env(safe-area-inset-bottom))}
 .mobile-buy-bar{padding-bottom:calc(var(--sp-s2) + env(safe-area-inset-bottom))}
}


/* 11. Mini test */
.test-main{padding-block:var(--sp-s6) var(--sp-section)}
.test-main>h1{margin-bottom:var(--sp-s3)}
.test-main>h1+p{color:var(--sp-muted);font-size:var(--sp-t-md);margin-bottom:var(--sp-s5)}
.test-select{display:grid;gap:var(--sp-s3);align-items:end;margin-bottom:var(--sp-s5)}
@media(min-width:768px){.test-select{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}}
.test-select .field{margin:0}
.test-progress{display:grid;grid-template-columns:1fr auto;gap:var(--sp-s2) var(--sp-s4);align-items:center;padding:var(--sp-s3) var(--sp-s4);margin-bottom:var(--sp-s4);box-shadow:var(--sp-shadow-none)}
.timer{font-weight:var(--sp-w-bold);color:var(--sp-ink);font-variant-numeric:tabular-nums;font-size:var(--sp-t-lg)}
.test-progress .count{font-weight:var(--sp-w-bold);color:var(--sp-muted);white-space:nowrap;font-size:var(--sp-t-sm)}
.test-progress .progress{grid-column:1/-1}
.progress{height:6px;background:var(--sp-line);border-radius:var(--sp-r-pill);overflow:hidden}
.progress>span{display:block;height:100%;background:var(--sp-azure);border-radius:inherit;transition:width var(--sp-ease)}
.test-question[hidden]{display:none}
.course-question[hidden]{display:none}
.test-back{display:inline-flex;align-items:center;min-height:var(--sp-control-h);margin-top:var(--sp-s4);color:var(--sp-muted);font-size:var(--sp-t-sm);text-decoration:underline;text-underline-offset:var(--sp-s1)}
.test-back:focus-visible{outline:var(--sp-s1) solid var(--sp-azure);outline-offset:var(--sp-s1)}
.qcard{padding:var(--sp-s4)}
@media(min-width:768px){.qcard{padding:var(--sp-s6)}}
.area{display:inline-block;font-size:var(--sp-t-xs);font-weight:var(--sp-w-bold);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-navy);background:var(--sp-navy-soft);padding:4px 10px;border-radius:var(--sp-r-pill);margin-bottom:var(--sp-s4)}
.qcard h2{font-size:var(--sp-t-h3);font-weight:var(--sp-w-semi);line-height:1.35;margin-bottom:var(--sp-s5)}
.qcard fieldset{border:0;padding:0;margin:0 0 var(--sp-s5);min-width:0;display:grid;gap:var(--sp-s3)}
.qcard legend{font-weight:var(--sp-w-bold);font-size:var(--sp-t-sm);color:var(--sp-muted);padding:0;margin-bottom:var(--sp-s2)}
@media(min-width:640px){.qcard fieldset{grid-template-columns:repeat(2,minmax(0,1fr))}.qcard legend{grid-column:1/-1}}
.option{position:relative;display:flex;align-items:center;gap:var(--sp-s3);padding:var(--sp-s3) var(--sp-s4);border:1px solid var(--sp-line);border-radius:var(--sp-r-control);background:var(--sp-white);cursor:pointer;font:inherit;color:var(--sp-ink);text-align:left;width:100%;min-height:52px;min-width:0;transition:border-color var(--sp-ease),background var(--sp-ease),box-shadow var(--sp-ease)}
.option:hover{border-color:var(--sp-navy);background:var(--sp-surface)}
.option:has(input:focus-visible){box-shadow:var(--sp-ring)}
.option input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.option .key{flex:none;width:28px;height:28px;border-radius:var(--sp-r-pill);display:grid;place-items:center;background:var(--sp-surface);border:1px solid var(--sp-line);font-weight:var(--sp-w-bold);font-size:var(--sp-t-sm);color:var(--sp-navy);transition:background var(--sp-ease),color var(--sp-ease)}
.option.selected,.option:has(input:checked){border-color:var(--sp-azure);background:var(--sp-azure-soft);box-shadow:inset 0 0 0 1px var(--sp-azure)}
.option.selected .key,.option:has(input:checked) .key{background:var(--sp-navy);color:var(--sp-white);border-color:var(--sp-navy)}
.test-actions{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-s3);flex-wrap:wrap}
/* The 400 ms between a chosen answer and the next question. The selection stays fully visible,
   only a second tap on the same card is ignored so one touch never answers two questions. */
.advancing fieldset,.test-finishing fieldset{pointer-events:none}
.figure-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:var(--sp-s2);margin:0 0 var(--sp-s5)}
.figure-cell{border:1px solid var(--sp-line);border-radius:var(--sp-r-control);text-align:center;padding:var(--sp-s1);background:var(--sp-surface)}
.figure-cell svg{display:block;width:100%;height:95px}
.figure-cell small{display:block;font-size:var(--sp-t-xs);color:var(--sp-muted)}
.abstract-stem{width:100%;margin:0 0 var(--sp-s5);overflow:hidden;border:1px solid var(--sp-line);border-radius:var(--sp-r-control);background:var(--sp-surface);padding:var(--sp-s2)}
.abstract-stem svg{display:block;width:100%;height:auto;max-height:290px}
.qcard fieldset:has(.abstract-choice){grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-s2)}
.qcard fieldset:has(.abstract-choice) legend{grid-column:1/-1}
.abstract-choice{min-width:0;min-height:92px;flex-direction:column;justify-content:center;padding:var(--sp-s2) var(--sp-s1);gap:var(--sp-s1)}
.abstract-choice .key{width:22px;height:22px;font-size:var(--sp-t-xs)}
.abstract-option-svg,.abstract-option-svg svg{display:block;width:100%;max-width:64px;height:auto;aspect-ratio:1}
.abstract-option-svg{margin:auto}
.abstract-stem svg,.abstract-option-svg svg{overflow:visible}

/* 12. Result */
.result{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-gap);align-items:start;min-width:0}
@media(min-width:1024px){.result{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.result>*{min-width:0}
.score-card{padding:var(--sp-s5)}
@media(min-width:768px){.score-card{padding:var(--sp-s6)}}
.score-card h1{margin-bottom:var(--sp-s2)}
.score-card h2{font-size:var(--sp-t-h3);margin:var(--sp-s6) 0 var(--sp-s3)}
.score-number{font-size:var(--sp-t-num);font-weight:var(--sp-w-bold);line-height:1;color:var(--sp-navy);margin:0 0 var(--sp-s3);font-variant-numeric:tabular-nums}
.score-number small{font-size:var(--sp-t-h3);color:var(--sp-muted);font-weight:var(--sp-w-semi)}
.score-card .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.breakdown{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s2)}
.breakdown li{display:grid;grid-template-columns:1fr auto;gap:var(--sp-s1) var(--sp-s4);align-items:center;padding:var(--sp-s2) 0;font-size:.9375rem;text-transform:capitalize}
.breakdown li span:last-of-type{font-weight:var(--sp-w-bold);font-variant-numeric:tabular-nums}
.breakdown .progress{grid-column:1/-1}
.table-wrap{width:100%;min-width:0;max-width:100%;overflow-x:auto;border:1px solid var(--sp-line);border-radius:var(--sp-r-control)}
.answers{width:100%;border-collapse:collapse;font-size:.9375rem}
.answers th,.answers td{text-align:left;padding:var(--sp-s2) var(--sp-s3);border-top:1px solid var(--sp-line);vertical-align:top}
.answers th{font-size:var(--sp-t-xs);font-weight:var(--sp-w-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--sp-muted);border-top:0;background:var(--sp-surface)}
.answers td:first-child,.answers th:first-child{white-space:nowrap;color:var(--sp-muted)}
.answers td:nth-child(2){text-transform:capitalize}
.abstract-explanation{margin:var(--sp-s1) 0 0;line-height:1.5;min-width:0;color:var(--sp-muted);font-size:var(--sp-t-sm)}
.upsell{background:var(--sp-navy);border-color:var(--sp-navy);color:var(--sp-white);padding:var(--sp-s5);display:flex;flex-direction:column;gap:var(--sp-s3);position:sticky;top:calc(var(--sp-nav-h) + var(--sp-s4))}
.upsell h2{color:var(--sp-white);margin:0;font-size:var(--sp-t-h3)}
.upsell p{margin:0;color:var(--sp-on-navy)}
.upsell p:first-of-type{font-size:var(--sp-t-h2);font-weight:var(--sp-w-bold);color:var(--sp-white);line-height:1.1}
.upsell form{margin-top:var(--sp-s2)}
.upsell .btn{width:100%}


/* 13. Signed-in pages: My account is centred on the plan (days to exam, progress, today's area, level per area); purchases are one row */
.account-section{background:var(--sp-surface);padding-block:var(--sp-s7) var(--sp-s8)}
.account{display:flex;flex-direction:column;gap:var(--sp-s6)}
.account-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-s4);flex-wrap:wrap}
.account-head>div{min-width:0}
.account-head h1{font-size:var(--sp-t-h1);margin:0}
.account-head .eyebrow{margin-bottom:var(--sp-s2);color:var(--sp-red-text)}
.dash{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-s5)}
@media(min-width:1100px){.dash{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.plan-card{background:var(--sp-navy);color:var(--sp-white);border-radius:var(--sp-r-card-lg);padding:var(--sp-s5);display:flex;flex-direction:column;gap:var(--sp-s5);box-shadow:0 20px 50px rgba(15,36,68,.18);min-width:0}
@media(min-width:768px){.plan-card{padding:var(--sp-s6)}}
.plan-card p{color:inherit}
.plan-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-s4)}
.plan-card-top>div{min-width:0}
.plan-card .eyebrow{font-size:var(--sp-t-xs);color:var(--sp-azure-light);margin-bottom:var(--sp-s2)}
.plan-card h2{font-size:clamp(1.5rem,2.2vw,1.75rem);margin:0;color:var(--sp-white)}
.plan-card .sub{font-size:.9375rem;color:var(--sp-muted-on-navy);display:block;margin-top:var(--sp-s2)}
.countdown{text-align:right;flex:none}
.countdown strong{display:block;font-size:var(--sp-t-num);font-weight:var(--sp-w-head);line-height:1;letter-spacing:-.02em}
.countdown span{font-size:.8125rem;font-weight:var(--sp-w-bold);color:var(--sp-muted-on-navy)}
.plan-card .progress{height:8px;background:rgba(255,255,255,.15)}
.plan-card .progress-block{min-width:0}
.plan-actions{display:flex;gap:var(--sp-s3);flex-wrap:wrap}
.plan-actions form{margin:0}
.plan-actions .btn-primary{box-shadow:none}
@media(max-width:639px){.plan-card-top{flex-direction:column}.countdown{text-align:left}.plan-actions .btn{width:100%}}
.levels{background:var(--sp-white);border:1.5px solid var(--sp-line);border-radius:var(--sp-r-card-lg);padding:var(--sp-s5);display:flex;flex-direction:column;gap:var(--sp-s4);min-width:0}
.levels-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-s3);flex-wrap:wrap}
.levels h2{font-size:var(--sp-t-lg);margin:0}
.levels-head a{font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);text-decoration:none;white-space:nowrap}
.level{display:flex;flex-direction:column;gap:5px;min-width:0}
.level-meta{display:flex;justify-content:space-between;gap:var(--sp-s3);font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold)}
.level-meta span:last-child{color:var(--sp-muted);white-space:nowrap}
.level .progress{height:6px}
.level.weak .level-meta span:last-child{color:var(--sp-red)}
.level.weak .progress>span{background:var(--sp-red)}
.levels-note{font-size:var(--sp-t-sm);color:var(--sp-muted);margin:0}
.others h2{font-size:var(--sp-t-h3);margin:0 0 var(--sp-s4)}
.mini-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-s4)}
@media(min-width:640px){.mini-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.mini-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mini{background:var(--sp-white);border:1.5px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5) var(--sp-s5);display:flex;flex-direction:column;gap:var(--sp-s2);min-width:0}
.mini.active{background:var(--sp-azure-soft);border-color:var(--sp-azure-line)}
.mini h3{font-size:var(--sp-t-md);margin:0}
.mini .meta{font-size:var(--sp-t-sm);color:var(--sp-muted)}
.mini.active .meta{color:var(--sp-link-hover);font-weight:var(--sp-w-semi)}
.mini.active a{color:var(--sp-link-hover)}
.mini a,.mini .btn-link{margin-top:auto;padding-top:var(--sp-s2);font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);text-decoration:none;align-self:flex-start}
.mini form{margin-top:auto}
.mini-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-s2)}
.badge-active{font-size:11px;font-weight:var(--sp-w-head);color:var(--sp-white);background:var(--sp-link);padding:3px 8px;border-radius:var(--sp-r-pill);white-space:nowrap}
.account-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-s3);flex-wrap:wrap}
.account-foot a:not(.btn){font-size:var(--sp-t-sm);font-weight:var(--sp-w-semi);text-decoration:none}
.app-sidebar{display:flex;flex-wrap:wrap;gap:var(--sp-s2);margin-bottom:var(--sp-s5)}
.app-sidebar a{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--sp-s4);border-radius:var(--sp-r-pill);border:1px solid var(--sp-line);background:var(--sp-white);color:var(--sp-ink);font-weight:var(--sp-w-semi);font-size:var(--sp-t-sm);text-decoration:none}
.app-sidebar a[aria-current]{background:var(--sp-azure-soft);border-color:var(--sp-azure);color:var(--sp-link)}
.app-dashboard{width:100%;min-width:0}
.section .container>.cards+.cards{margin-top:var(--sp-gap)}

/* 14. App shell reserved for build 3 (ui-spec: 232 px sidebar, 64 px header) */
.app{display:grid;grid-template-columns:minmax(0,1fr);min-height:100vh;background:var(--sp-surface)}
@media(min-width:1024px){.app{grid-template-columns:var(--sp-sidebar) minmax(0,1fr)}}
.side{min-width:0;background:var(--sp-white);border-bottom:1px solid var(--sp-line);display:flex;flex-direction:column;gap:var(--sp-s4);padding:var(--sp-s4)}
.side nav{min-width:0}
@media(min-width:1024px){.side{border-bottom:0;border-right:1px solid var(--sp-line);padding:var(--sp-s5) var(--sp-s3);position:sticky;top:0;height:100vh}}
/* Below the sidebar breakpoint the five section links wrap onto as many rows as the phone
   needs. They used to sit on one nowrap row, which made the whole app grid 645 px wide and
   scrolled every paid page sideways at 390 px. */
.side nav ul{list-style:none;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:2px}
@media(min-width:1024px){.side nav ul{flex-direction:column;flex-wrap:nowrap}}
.side nav a{display:flex;align-items:center;gap:var(--sp-s3);min-height:var(--sp-control-h);padding:0 var(--sp-s3);border-radius:var(--sp-r-control);color:var(--sp-ink);text-decoration:none;font-weight:var(--sp-w-semi);font-size:.9375rem;white-space:nowrap;border-left:3px solid transparent;transition:background var(--sp-ease)}
.side nav a:hover{background:var(--sp-surface)}
.side nav a[aria-current="page"]{background:var(--sp-azure-soft);border-left-color:var(--sp-azure);color:var(--sp-navy);font-weight:var(--sp-w-bold)}
.topbar{background:var(--sp-white);border-bottom:1px solid var(--sp-line);min-height:var(--sp-nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-s4);padding:0 var(--sp-gutter)}
.topbar h1{font-size:var(--sp-t-h3);margin:0}

.page{padding:var(--sp-gutter);display:grid;gap:var(--sp-gap);align-content:start}

/* 15. Motion preference */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* 16. Grid symmetry: four cards share one row on desktop; plan days tile on wide screens */
@media(min-width:1024px){.cards:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:768px){.daily-plan{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-s3)}.daily-plan li{flex-direction:column;align-items:flex-start;gap:var(--sp-s1);height:100%}}

/* 17. Paid area: preparation, training, mock exams, results, resources (build 3) */
.app-main{min-width:0;display:flex;flex-direction:column}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-s2);font-size:var(--sp-t-sm)}
.side-foot a{color:var(--sp-ink);text-decoration:none}
.side-foot a:hover{text-decoration:underline}
.muted{color:var(--sp-muted);font-size:var(--sp-t-sm)}
.context-line{margin:0;color:var(--sp-muted);font-size:var(--sp-t-sm)}
.exam-lang{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-s3)}
.panel{background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);display:grid;gap:var(--sp-s4);align-content:start;min-width:0}
.panel>h2{margin:0;font-size:var(--sp-t-h3)}
.panel>h3{margin:0;font-size:1rem}
.split{display:grid;gap:var(--sp-gap);min-width:0}
@media(min-width:1024px){.split{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}}
.side-col{display:grid;gap:var(--sp-gap);align-content:start;min-width:0}
.big{font-size:1.75rem;font-weight:var(--sp-w-bold);margin:0;color:var(--sp-navy)}
.tasks{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s2)}
.task{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:center;justify-content:space-between;border:1px solid var(--sp-line);border-radius:var(--sp-r-control);padding:var(--sp-s3) var(--sp-s4);background:var(--sp-white)}
.task.done{background:var(--sp-surface)}
.task div{display:flex;flex-direction:column;gap:2px;min-width:0}
.task small{color:var(--sp-muted);font-size:var(--sp-t-sm)}
.task form{margin:0}
.pill{display:inline-flex;align-items:center;gap:var(--sp-s1);padding:2px var(--sp-s3);border-radius:var(--sp-r-pill);background:var(--sp-surface);border:1px solid var(--sp-line);font-size:var(--sp-t-sm)}
.pill.done{background:var(--sp-azure-soft);border-color:var(--sp-azure)}
.pill.late{background:var(--sp-navy-soft)}
.week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-s2)}
.week li{border:1px solid var(--sp-line);border-radius:var(--sp-r-control);padding:var(--sp-s2);text-align:center;display:grid;gap:2px}
.week small{color:var(--sp-muted)}
.rowlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s3)}
.arearow{background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);display:grid;gap:var(--sp-s4);align-items:center;min-width:0}
/* A row whose control block is a single button keeps the button beside the text. A row that
   carries a whole form, as Entraînement does, puts the form on its own line: side by side it
   squeezed the title column to about 110 px and broke "Raisonnement" across two lines. */
@media(min-width:1024px){
  .arearow{grid-template-columns:minmax(0,1fr) auto}
  .arearow:has(.arearow-form .field){grid-template-columns:minmax(0,1fr)}
}
.arearow-text{min-width:0;display:grid;gap:var(--sp-s1)}
.arearow-text h3{margin:0;font-size:1.0625rem}
.arearow-text p{margin:0}
.arearow-form{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:flex-end;margin:0}
.arearow-form .field{margin:0;flex:1 1 160px;min-width:160px}
.arearow-form .btn{flex:0 0 auto}
.check{display:flex;align-items:center;gap:var(--sp-s2);font-size:var(--sp-t-sm);min-height:var(--sp-control-h)}
.exercise{display:grid;gap:var(--sp-s4);background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);min-width:0}
.exercise fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--sp-s2)}
.exercise legend{font-size:var(--sp-t-sm);color:var(--sp-muted);padding:0 0 var(--sp-s2)}
.exercise-stem{display:grid;gap:var(--sp-s2);min-width:0}
.exercise-stem h2{margin:0;font-size:var(--sp-t-h3)}
.stem{margin:0;font-size:1.0625rem;line-height:1.55}
.correction{background:var(--sp-surface);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);display:grid;gap:var(--sp-s3);margin-top:var(--sp-s4);min-width:0}
.correction h3{margin:0;font-size:1rem}
.correction-head{margin:0}
.why,.rank{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s2)}
.why li{padding:var(--sp-s3);border-left:3px solid var(--sp-line);background:var(--sp-white)}
.why li.right{border-left-color:var(--sp-azure)}
.rank li{padding:var(--sp-s3);background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-control);display:grid;gap:var(--sp-s1)}
.rank p{margin:0}
.note{margin:0;font-style:normal;color:var(--sp-ink)}
.recs{margin:0;padding-left:var(--sp-s5);display:grid;gap:var(--sp-s2)}
.recs li{min-width:0}
.inline{display:inline-flex;margin:0}
.grid-table{width:100%;border-collapse:collapse}
.grid-table th,.grid-table td{text-align:left;padding:var(--sp-s3);border-bottom:1px solid var(--sp-line);font-size:var(--sp-t-sm)}
.grid-table th{color:var(--sp-muted);font-weight:var(--sp-w-bold)}
.grid-table form{margin:0}
.fig-table{width:100%;border-collapse:collapse;background:var(--sp-white)}
.fig-table th,.fig-table td{border:1px solid var(--sp-line);padding:var(--sp-s2) var(--sp-s3);font-size:var(--sp-t-sm)}
.examtop{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:center;justify-content:space-between;background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s3) var(--sp-s5)}
.examtop .timer{font-variant-numeric:tabular-nums;font-size:1.25rem;color:var(--sp-navy)}
.examlayout{display:grid;gap:var(--sp-gap);min-width:0}
@media(min-width:1024px){.examlayout{grid-template-columns:minmax(0,1fr) 200px}}
.exammain{min-width:0}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:var(--sp-s2);align-content:start;background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s4)}
.qgrid p{grid-column:1/-1;margin:0}
.qcell{display:grid;place-items:center;min-height:40px;border:1px solid var(--sp-line);border-radius:var(--sp-r-control);text-decoration:none;color:var(--sp-ink);font-size:var(--sp-t-sm)}
.qcell.answered{background:var(--sp-azure-soft);border-color:var(--sp-azure)}
.qcell.marked{background:var(--sp-navy-soft);border-color:var(--sp-navy)}
.qcell.current{outline:2px solid var(--sp-navy);outline-offset:1px}
.exam-actions{display:flex;flex-wrap:wrap;gap:var(--sp-s3);margin-top:var(--sp-s4)}
.reviewlist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-s4)}
.reviewlist>li{border-top:1px solid var(--sp-line);padding-top:var(--sp-s4);min-width:0}
.row-head{display:flex;flex-wrap:wrap;gap:var(--sp-s3);align-items:center;margin-bottom:var(--sp-s2)}
.sheet{background:var(--sp-white);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s5);display:grid;gap:var(--sp-s3);min-width:0}
.sheet h2{margin:0}
.sheet h3{margin:var(--sp-s2) 0 0;font-size:1rem;color:var(--sp-navy)}
.sheet p{margin:0;line-height:1.6}
.notice{background:var(--sp-azure-soft);border:1px solid var(--sp-azure);border-radius:var(--sp-r-control);padding:var(--sp-s3) var(--sp-s4);margin:0}

/* 15. Authored rule sheet pages, rendered from content/rule-guides.json */
.sheet-guide{display:grid;gap:var(--sp-s3);width:100%;min-width:0}
.sheet-guide h2{margin:var(--sp-s3) 0 0;font-size:1.25rem;color:var(--sp-navy)}
.sheet-guide h3{margin:var(--sp-s2) 0 0;font-size:1rem;color:var(--sp-navy)}
.sheet-guide p{margin:0;line-height:1.6}
.sheet-guide ol,.sheet-guide ul{margin:0;padding-left:var(--sp-s5);display:grid;gap:var(--sp-s2);line-height:1.6}
.sheet-guide table{width:100%;border-collapse:collapse}
.sheet-guide th,.sheet-guide td{border:1px solid var(--sp-line);padding:var(--sp-s2);text-align:left;vertical-align:top}
/* 15b. POLICE information pages: a fact and the public page it comes from, on one full-width line */
.facts{margin:0;padding-left:var(--sp-s5);display:grid;gap:var(--sp-s2);line-height:1.6;width:100%;min-width:0}
a.src{font-size:var(--sp-t-label);color:var(--sp-link);white-space:nowrap}

/* 18. Header at phone width: the account button keeps its icon only, the language switch tightens, so logo, switch and button fit 390 px */
@media(max-width:639px){.nav-right .btn-outline .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.nav-right .btn-outline{position:relative;padding-inline:var(--sp-s2);min-width:40px}.lang a{padding:0 6px;min-height:28px;font-size:.75rem}.brand-logo{height:26px}}

/* 19. Audio clip on a listening item: the native player at full width, written text on demand */
.audio-clip{display:grid;gap:var(--sp-s2);width:100%;min-width:0;background:var(--sp-tint);border:1px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s4)}
.audio-label{margin:0;font-size:var(--sp-t-label);font-weight:var(--sp-w-head);color:var(--sp-navy)}
.audio-player{width:100%;min-width:0;height:var(--sp-control-h);display:block}
.audio-transcript{margin:0;min-width:0}
.audio-transcript summary{cursor:pointer;font-size:var(--sp-t-label);color:var(--sp-link)}
.audio-transcript p{margin:var(--sp-s2) 0 0;line-height:1.55}

.header-contact{display:inline-flex;align-items:center;gap:6px;color:var(--sp-ink);text-decoration:none;font-weight:var(--sp-w-semi);white-space:nowrap}.header-contact svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}@media(max-width:1279px){.header-contact span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}
@media(max-width:479px){.nav .container{gap:8px}.brand-logo{height:23px}.nav-right{gap:8px}.lang a{padding-inline:4px}}

.option.answer-right,.option.answer-right:has(input:checked){border-color:#16804b;background:#e5f6eb;box-shadow:inset 0 0 0 1px #16804b}
.option.answer-wrong,.option.answer-wrong:has(input:checked){border-color:#bf3039;background:#fce9eb;box-shadow:inset 0 0 0 1px #bf3039}
.option.answer-right .key{background:#16804b;color:#fff;border-color:#16804b}
.option.answer-wrong .key{background:#bf3039;color:#fff;border-color:#bf3039}
.answer-verdict{font-weight:800;padding:.75rem 1rem;border-radius:8px;margin:1rem 0 0}
.answer-verdict.is-right{color:#12613a;background:#e5f6eb}
.answer-verdict.is-wrong{color:#a4252d;background:#fce9eb}

/* C1: each result layer uses the full page container. */
.result{display:flex;flex-direction:column;align-items:stretch}
.result-detail,.result-offer,.result-email{width:100%;min-width:0}
.result-email{display:grid;gap:var(--sp-s3)}
.result-email input{width:100%;min-width:0}
.result-weak{margin:var(--sp-s3) 0 0;color:var(--sp-ink);font-weight:var(--sp-w-bold)}
.consent-note{margin:0;font-size:var(--sp-t-sm);color:var(--sp-muted)}
.marketing-choice,.checkout-consent{display:flex;align-items:flex-start;gap:var(--sp-s2);width:100%;font-size:var(--sp-t-sm);line-height:1.5;color:var(--sp-navy);cursor:pointer}
.marketing-choice input,.checkout-consent input{flex:none;width:auto;min-width:var(--sp-s4);height:var(--sp-s4);margin:var(--sp-s1) 0 0;accent-color:var(--sp-red)}
.marketing-choice span,.checkout-consent span{flex:1;min-width:0;text-wrap:balance}
.soft-optin-notice{width:100%;margin:0;font-size:var(--sp-t-sm);line-height:1.5;color:var(--sp-muted)}
.result-detail h2{margin-top:var(--sp-s4)}
.result-offer .card{width:100%}
.result .score-card{padding:var(--sp-s4)}
.result .answers,.result .answers tbody,.result .answers tr,.result .answers td{display:block;width:100%}
.result .answers thead{display:none}
.result .answers td{border:0;padding:var(--sp-s2) var(--sp-s3);overflow-wrap:break-word}
.result .answers tr{border-bottom:1px solid var(--sp-line);padding-block:var(--sp-s3)}
.result .answers td:first-child{font-weight:var(--sp-w-bold)}
/* C7: the parent container owns width, controls keep a full touch target. */
.exam-plan { width:100%; margin-block:var(--sp-s6); }
.exam-plan-form > div { display:grid; gap:var(--sp-s3); width:100%; }
.exam-plan-form [hidden] { display:none; }
.exam-plan-form input { width:100%; min-width:0; min-height:var(--sp-control-h); }
.exam-plan-form button { white-space:normal; }
.plan-allocation,.plan-progress { list-style:none; padding:0; width:100%; }
.plan-allocation li,.plan-progress li { display:flex; flex-wrap:wrap; gap:var(--sp-s3); align-items:center; padding-block:var(--sp-s3); border-bottom:1px solid var(--sp-line); }
.plan-allocation strong,.plan-progress strong { white-space:nowrap; }
.plan-progress progress { width:100%; }
.exam-plan h2 { margin-top:var(--sp-s6); }
.exam-plan fieldset { min-width:0; }
.exam-plan .option { width:100%; }
.exam-plan .abstract-stem,.exam-plan .abstract-option-svg { max-width:100%; }

/* Corps pages: the outer container alone owns width and margins. */
.corps-page > * { max-width:none; }
.corps-catalogue { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-gap); }
.corps-catalogue .card { min-width:0;margin:0; }
.corps-page li { margin-block:var(--sp-s3); }
.corps-page > .card { margin-block:var(--sp-s5); }
.corps-steps { padding-inline-start:var(--sp-s5); }
.corps-page .btn { white-space:normal; height:auto; min-height:var(--sp-control-h); }
.corps-page fieldset.card{min-width:0;width:100%;border:1px solid var(--sp-line);padding:var(--sp-s4)}
.corps-page fieldset.card legend{font-weight:700;padding:0 var(--sp-s2);text-wrap:balance}
.corps-page .answer-option{display:block;width:100%;padding:var(--sp-s3);margin:var(--sp-s2) 0;border:1px solid var(--sp-line);border-radius:var(--sp-r-control);cursor:pointer}
.corps-page .answer-option:has(input:checked){border-color:var(--sp-azure);background:var(--sp-azure-soft);font-weight:var(--sp-w-bold)}
.corps-page audio{display:block;width:100%;margin:var(--sp-s3) 0}
.corps-page .table-wrap pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--sp-s3)}

/* 20. Shared journey rhythm and controls (Alan8044). Natural card heights, no clipping. */
:where(main,footer) a{overflow-wrap:anywhere}
:where(main) [id]{scroll-margin-top:calc(var(--sp-nav-h) + var(--sp-s8))}
textarea{display:block;width:100%;min-width:0;padding:var(--sp-s3);font:inherit;line-height:var(--sp-lh);color:var(--sp-ink);border:1px solid var(--sp-line-strong);border-radius:var(--sp-r-control);resize:vertical}
textarea:focus-visible{outline:none;box-shadow:var(--sp-ring)}
.brand,.header-contact,.nav-links a,.lang a,.nav-right .btn-outline,.mobile-catalogue-link,.site-footer a,.footer-cookie-link,.app-sidebar a,.qcell{min-height:var(--sp-control-h)}
.header-contact,.lang a,.nav-right .btn-outline{min-width:var(--sp-control-h)}
.header-contact svg{flex:none}
.mobile-catalogue-link{display:flex;align-items:center}
.card-foot a,.home-card-link{display:inline-flex;align-items:center;min-height:var(--sp-control-h)}
.card h2{font-size:var(--sp-t-h3);line-height:1.3;margin:0}
.card:hover:has(input,textarea,select){transform:none;box-shadow:var(--sp-shadow-none)}
.corps-page fieldset.card{margin:var(--sp-s5) 0;display:block;box-shadow:var(--sp-shadow-none);transform:none}
.corps-page fieldset.card legend{font-size:var(--sp-t-md);line-height:var(--sp-lh);text-align:start;text-wrap:pretty}
.corps-page .answer-option{min-height:var(--sp-control-h);line-height:var(--sp-lh)}
.answer-option:has(input:focus-visible){box-shadow:var(--sp-ring)}
.course-feedback{margin-top:var(--sp-s4);padding:var(--sp-s4);background:var(--sp-tint);border-left:var(--sp-s1) solid var(--sp-azure)}
.corps-page .course-feedback p{font-size:var(--sp-t-base);line-height:1.65}
.corps-page > h2:not(:first-child){margin-top:var(--sp-s7)}
.corps-page > p,.corps-page > ul,.corps-page > ol{line-height:1.7}
.corps-page:has(fieldset.card) > h2{font-size:var(--sp-t-h3);line-height:1.35;margin-top:var(--sp-s6)}
.section:has(.corps-page fieldset.card){padding-block:var(--sp-s6)}
.corps-page > .course-back{margin-bottom:var(--sp-s5)}
.course-back a{display:inline-flex;align-items:center;min-height:var(--sp-control-h)}
.course-list{list-style:none;padding:0;display:grid;gap:var(--sp-s3);margin-block:var(--sp-s5)}
.corps-page .course-list li{margin:0;min-width:0;border-bottom:1px solid var(--sp-line);padding-bottom:var(--sp-s3)}
.course-list a{display:flex;align-items:center;min-height:var(--sp-control-h);font-weight:var(--sp-w-bold);text-decoration:none}
.course-list span{display:block;color:var(--sp-muted);font-size:var(--sp-t-sm)}
.course-practice{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.course-actions{display:flex;flex-wrap:wrap;gap:var(--sp-s3);margin-block:var(--sp-s5)}
.corps-page #buy form{display:grid;gap:var(--sp-s4)}
.corps-page #buy label{display:grid;gap:var(--sp-s2)}
.corps-page #buy .checkout-consent{display:flex}
.corps-catalogue #buy{grid-column:1/-1}
.catalogue-action{margin-top:auto;display:grid;gap:var(--sp-s4)}
.catalogue-action .btn{width:100%}
@media(min-width:768px){.corps-catalogue{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.corps-catalogue{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Four narrow columns made long German pricing and account labels into stubs. */
@media(min-width:640px) and (max-width:1279px){.cards-4,.pricing-cards,.mini-cards,.features,.cards:has(>:nth-child(4)):not(:has(>:nth-child(5))){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1439px){.nav-links{display:none}.nav .container.mobile-catalogue-row{display:block;min-height:0;border-top:1px solid var(--sp-line)}}
/* A second header row gives every locale a real touch target without squeezing the logo. */
@media(max-width:639px){
 .nav>.container:first-child{flex-wrap:wrap;justify-content:center;padding-block:var(--sp-s2);gap:var(--sp-s2)}
 .nav-right{width:100%;justify-content:space-between;gap:var(--sp-s2)}
 .lang a{min-width:var(--sp-control-h);min-height:var(--sp-control-h)}
 .nav-right .btn-outline{min-width:var(--sp-control-h);min-height:var(--sp-control-h)}
 .nav{position:relative}
 .hero-actions{align-items:stretch}.hero-actions .btn{width:100%}
 .course-actions .btn{width:100%}
 .corps-page fieldset.card{padding:var(--sp-s3)}
 .week{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 21. Blog. The outer container owns width and margins; every block below takes the full width it is given. */
.blog-head{display:grid;gap:var(--sp-s3);justify-items:start;margin-bottom:var(--sp-s6)}
.blog-head h1,.blog-head p{margin:0}
.blog-meta{color:var(--sp-muted);font-size:var(--sp-t-sm)}
.breadcrumbs ol{list-style:none;margin:0 0 var(--sp-s5);padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-s1) var(--sp-s2);font-size:var(--sp-t-sm);color:var(--sp-muted)}
.breadcrumbs li{display:inline-flex;align-items:center;min-width:0}
.breadcrumbs li+li::before{content:"\203A";margin-right:var(--sp-s2);color:var(--sp-muted)}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:var(--sp-control-h);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs [aria-current]{color:var(--sp-ink);overflow-wrap:anywhere}
.blog-body{font-size:var(--sp-t-md);line-height:1.7}
.blog-body p,.blog-body li{color:var(--sp-ink)}
.blog-body .lead{font-size:var(--sp-t-lg);color:var(--sp-ink);font-weight:var(--sp-w-semi)}
.blog-body h2{margin-top:var(--sp-s7)}
.blog-body h3{margin-top:var(--sp-s6)}
.blog-body ul,.blog-body ol{padding-inline-start:var(--sp-s5);margin:0 0 var(--sp-s4)}
.blog-body li{margin-block:var(--sp-s2)}
.blog-body .table-wrap{margin-block:var(--sp-s5)}
.blog-body table{width:100%;border-collapse:collapse;font-size:var(--sp-t-base)}
.blog-body th,.blog-body td{text-align:left;padding:var(--sp-s3) var(--sp-s4);border-top:1px solid var(--sp-line);vertical-align:top;overflow-wrap:break-word}
.blog-body th{border-top:0;background:var(--sp-surface);font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);color:var(--sp-muted)}
.blog-body em{display:inline}
.blog-faq,.blog-sources{margin-top:var(--sp-s7)}
.blog-sources ul{margin:0;padding-inline-start:var(--sp-s5)}
.blog-sources li{margin-block:var(--sp-s2);color:var(--sp-ink)}
.blog-sources a{display:inline-flex;align-items:center;min-height:var(--sp-control-h)}
.blog-cta{margin-top:var(--sp-s7);background:var(--sp-tint);border-color:var(--sp-azure-line)}
.blog-cta:hover{transform:none;box-shadow:var(--sp-shadow-none)}
.blog-cta p{font-size:var(--sp-t-base)}
.blog-cta-actions{display:flex;flex-wrap:wrap;gap:var(--sp-s3)}
.blog-more{margin-top:var(--sp-s7)}
.blog-card h2 a{color:var(--sp-ink);text-decoration:none}
.blog-card h2 a:hover{color:var(--sp-link-hover);text-decoration:underline}
.blog-card .card-foot{margin-top:auto}
@media(max-width:639px){.blog-cta-actions .btn{width:100%}}
@media(max-width:639px){
 .blog-body .table-wrap.wide{border:0}
 .blog-body .wide thead{display:none}
 .blog-body .wide table,.blog-body .wide tbody,.blog-body .wide tr,.blog-body .wide td{display:block;width:100%}
 .blog-body .wide tr{border:1px solid var(--sp-line);border-radius:var(--sp-r-control);padding-block:var(--sp-s2);margin-bottom:var(--sp-s3)}
 .blog-body .wide td{border:0;padding:var(--sp-s1) var(--sp-s4)}
 .blog-body .wide td::before{content:attr(data-label);display:block;font-size:var(--sp-t-xs);font-weight:var(--sp-w-bold);color:var(--sp-muted);text-transform:uppercase;letter-spacing:.04em}
}

/* 22. UI review (Alan, 20 October 2026): one grid rhythm on course and catalogue pages, the buy card beside the course intro, rounded surfaces, a visible hover and focus on everything clickable. */
.corps-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-s5);align-items:start;margin-bottom:var(--sp-s6)}
@media(min-width:1024px){.corps-intro{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-s7)}}
.corps-intro-copy{display:grid;gap:var(--sp-s4);min-width:0}
.corps-intro-copy>*{margin:0}
.corps-page .corps-intro>.card{margin:0}
.corps-page>section:not(.card){margin-top:var(--sp-s7)}
.corps-page>section:not(.card)>h2{margin-bottom:var(--sp-s4)}
.corps-page>section.card{display:flex;flex-direction:row;flex-wrap:wrap;text-align:start;align-items:center;justify-content:space-between;gap:var(--sp-s4);margin-block:var(--sp-s6)}
.corps-page>section.card h2{margin:0;flex:1 1 20rem;text-align:start}
.corps-page>section.card>.btn{align-self:center;flex:0 1 auto}
@media(max-width:639px){.corps-page>section.card>.btn{flex:1 1 100%}}
.corps-catalogue .card h2 a{color:var(--sp-ink);text-decoration:none}
.corps-catalogue .card h2 a:hover,.blog-card h2 a:focus-visible,.corps-catalogue .card h2 a:focus-visible{color:var(--sp-link-hover);text-decoration:underline}
.catalogue-action{padding-top:var(--sp-s3);border-top:1px solid var(--sp-line)}
.catalogue-action .price{margin:0}
.corps-page .course-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--sp-gap)}
.corps-page .course-list li{border:1.5px solid var(--sp-line);border-radius:var(--sp-r-card);padding:var(--sp-s3) var(--sp-s4);background:var(--sp-white);transition:border-color var(--sp-ease),box-shadow var(--sp-ease),transform var(--sp-ease)}
.corps-page .course-list li:hover,.corps-page .course-list li:focus-within{border-color:var(--sp-azure-line);box-shadow:var(--sp-shadow-raised);transform:translateY(-2px)}
.course-list a{color:var(--sp-ink)}
.course-list a:hover{color:var(--sp-link-hover)}
.corps-page .answer-option{transition:border-color var(--sp-ease),background var(--sp-ease)}
.corps-page .answer-option:hover{border-color:var(--sp-azure);background:var(--sp-surface)}
.course-feedback,.answer-verdict{border-radius:var(--sp-r-control)}
.test-back:hover,.course-back a:hover{color:var(--sp-link-hover)}
.mobile-catalogue-link:hover{color:var(--sp-link-hover);text-decoration:underline}
.faq summary{transition:color var(--sp-ease)}
.faq summary:hover{color:var(--sp-link)}
.faq details>p{line-height:1.6}
.product-comparison li{border-radius:var(--sp-r-card);background:var(--sp-white)}
.home-proof li{border-radius:var(--sp-r-card);display:flex;align-items:center}
.corps-page #buy select{min-height:var(--sp-control-h)}
.mobile-buy-bar strong{white-space:normal;text-wrap:balance;min-width:0;line-height:1.3}
.mobile-buy-bar strong span{white-space:nowrap}
.mobile-buy-bar .btn{flex:none}
.field select,.corps-page #buy select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' 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(--sp-s3) center;background-size:var(--sp-icon);padding-right:var(--sp-s6)}
.corps-page #buy .marketing-choice{display:flex}
.corps-page>h1{margin-bottom:var(--sp-s6)}
.score-card h1{margin-bottom:var(--sp-s4)}
@media(max-width:1439px){
 .nav .container.mobile-catalogue-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:0 var(--sp-s5)}
 .mobile-catalogue-row a{display:flex;align-items:center;min-height:var(--sp-control-h);color:var(--sp-link);font-size:var(--sp-t-sm);font-weight:var(--sp-w-bold);text-decoration:none;border-radius:var(--sp-r-sm)}
 .mobile-catalogue-row a:hover{color:var(--sp-link-hover);text-decoration:underline}
}

/* 21. Abstract items: one drawing scale for the stem and the options (report a1a2-abstract-0118).
   src/abstract-scale.js puts the stem width in SVG units (--abs-w) and the option row width
   (--abs-row) on the card. --abs-u is px per unit: the token, or less when the stem or the
   option row would not fit the card; then the whole item shrinks, never the options alone. */
[data-abs]{container-type:inline-size;--abs-u:min(var(--sp-abs-unit),(100cqi - var(--sp-abs-pad-stem))/var(--abs-w),(100cqi - var(--abs-row-pad))/var(--abs-row))}
[data-abs] .abstract-stem svg{width:calc(var(--abs-w)*var(--abs-u));max-width:100%;max-height:none;height:auto;margin-inline:auto}
[data-abs] .abstract-option-svg,[data-abs] .abstract-option-svg svg{width:calc(100*var(--abs-u));max-width:none;height:auto;aspect-ratio:1}

/* 23. Email-capture check (portfolio RECIPE, 23 Oct 2026): a typo suggestion under the field and a hint on the result page. Takes the width its parent gives it. */
.email-check{margin:var(--sp-s2) 0 var(--sp-s3);font-size:var(--sp-t-sm);line-height:1.45}
.email-check__fix{display:inline-flex;align-items:center;min-height:var(--sp-control-h);font:inherit;font-weight:var(--sp-w-bold);color:var(--sp-link);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;overflow-wrap:anywhere}
.email-hint{margin:0 0 var(--sp-s4);padding:var(--sp-s3) var(--sp-s4);border-radius:var(--sp-r-control);background:var(--sp-red-soft);color:var(--sp-red-text);font-weight:var(--sp-w-semi)}