/* 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-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);--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-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 */
*,*::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}
.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);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:nowrap;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)}
.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);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(4,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-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-azure);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);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}
.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);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}
@media(max-width:819px){.footer-top,.footer-bottom{flex-direction:column;align-items:center;text-align:center}.site-footer nav{justify-content:center}}
.cookie-banner{position:fixed;left:var(--sp-s4);right:var(--sp-s4);bottom:var(--sp-s4);z-index:60;padding:var(--sp-s4) var(--sp-s5);display:grid;gap:var(--sp-s3);box-shadow:var(--sp-shadow-card);border-radius:var(--sp-r-card)}
@media(min-width:768px){.cookie-banner{left:auto;right:var(--sp-s5);bottom:var(--sp-s5);width:min(440px,calc(100vw - 2*var(--sp-s5)))}}
.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{font-weight:var(--sp-w-semi);font-size:var(--sp-t-sm)}

/* 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}
.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}
.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}

/* 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)}
.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);font-weight:var(--sp-w-semi)}
.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-azure);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)}
.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}