/* Source Serif 4, self-hosted (no request to Google). Variable font:
     one file covers weights 500-600. Browsers fetch only the subsets the
     page's characters need, per unicode-range. */
  @font-face{
    font-family:"Source Serif 4";
    font-style:normal;font-weight:500 600;font-display:swap;
    src:url("fonts/source-serif-4-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:"Source Serif 4";
    font-style:normal;font-weight:500 600;font-display:swap;
    src:url("fonts/source-serif-4-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;
  }
  @font-face{
    font-family:"Source Serif 4";
    font-style:italic;font-weight:400;font-display:swap;
    src:url("fonts/source-serif-4-italic-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:"Source Serif 4";
    font-style:italic;font-weight:400;font-display:swap;
    src:url("fonts/source-serif-4-italic-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{
    --bg:#10161d;
    --surface:#171f28;
    --ink:#e8ecf1;
    --ink-soft:#c6cdd6;
    --muted:#93a0ad;
    --accent:#569cd6;
    --accent-strong:#7db4e3;
    --accent-dim:rgba(86,156,214,.16);
    --teal:#4db6c7;
    --line:#243040;
    --radius:14px;
    --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:17px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  main{max-width:640px;margin:0 auto;padding:48px 22px 56px;}

  /* Header */
  header{text-align:center;margin-bottom:28px;}
  .eyebrow{
    display:inline-block;font-size:12px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--teal);
    margin:0 0 10px;
  }
  h1{
    font-family:var(--serif);
    font-size:clamp(34px,6.5vw,44px);line-height:1.1;
    letter-spacing:-.01em;margin:0 0 8px;font-weight:600;
  }
  .tagline{
    font-family:var(--serif);font-style:italic;font-weight:400;
    font-size:18px;color:var(--muted);margin:0;
  }
  .lead{
    font-size:18px;line-height:1.55;color:var(--ink-soft);
    text-align:center;margin:0 0 28px;
  }
  .lead-left{text-align:left;font-size:16.5px;margin:0 0 16px;}

  /* Sections */
  h2{
    font-family:var(--serif);font-style:normal;
    font-size:19px;letter-spacing:0;text-transform:none;
    color:var(--ink);margin:44px 0 6px;font-weight:600;
    padding-bottom:8px;border-bottom:1px solid var(--line);
  }
  h3{
    font-size:15px;font-weight:650;color:var(--ink);margin:0 0 8px;
    letter-spacing:-.01em;
  }
  .panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:20px 20px 18px;
    margin:0 0 12px;
  }
  .panel p{margin:0;color:var(--ink-soft);font-size:16px;}
  .panel p + p{margin-top:10px;}

  /* Lists */
  ul.bul{list-style:none;padding:0;margin:0;}
  ul.bul li{
    padding:13px 0 13px 28px;
    position:relative;
  }
  ul.bul li + li{border-top:1px solid var(--line);}
  ul.bul li::before{
    content:"";position:absolute;left:6px;top:20px;
    width:7px;height:7px;border-radius:50%;background:var(--accent);
  }
  ul.bul strong{font-weight:650;color:var(--ink);}
  ul.bul span{display:block;color:var(--muted);font-size:15px;margin-top:2px;line-height:1.45;}

  /* Steps (first month) */
  ol.steps{list-style:none;padding:0;margin:0;counter-reset:step;}
  ol.steps li{
    counter-increment:step;
    padding:16px 0 16px 48px;border-top:1px solid var(--line);
    position:relative;
  }
  ol.steps li:last-child{border-bottom:1px solid var(--line);}
  ol.steps li::before{
    content:counter(step);
    position:absolute;left:0;top:16px;
    width:32px;height:32px;border-radius:50%;
    background:var(--accent-dim);color:var(--accent);
    font-size:13px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  ol.steps strong{font-weight:650;display:block;margin-bottom:2px;}
  ol.steps span{color:var(--muted);font-size:15px;line-height:1.45;}
  /* Stat line */
  .stat-line{text-align:center;font-size:15px;color:var(--muted);margin:14px 0 0;}
  .stat-line b{color:var(--ink);font-weight:650;}

  /* CEFR signal bars */
  .bars-row{display:flex;gap:5px;margin:14px 0 12px;}
  .lvl{
    flex:1;text-align:center;padding:12px 2px 10px;
    border:1px solid var(--line);border-radius:12px;background:var(--surface);
  }
  .lvl-hi{border-color:var(--accent);border-width:1.5px;background:var(--accent-dim);}
  .sig{display:flex;align-items:flex-end;justify-content:center;gap:2px;height:26px;margin-bottom:8px;}
  .sig i{width:4px;background:var(--line);border-radius:1px;display:block;}
  .sig i:nth-child(1){height:20%;}
  .sig i:nth-child(2){height:40%;}
  .sig i:nth-child(3){height:60%;}
  .sig i:nth-child(4){height:80%;}
  .sig i:nth-child(5){height:100%;}
  .sig i.on{background:var(--muted);}
  .lvl-hi .sig i.on{background:var(--accent);}
  .lvl-hi .lvl-code{color:var(--accent);}
  .lvl-code{font-weight:700;font-size:14px;letter-spacing:-.01em;}
  .lvl-note{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.25;}
  .bars-note{font-size:15px;color:var(--muted);margin:0 0 2px;line-height:1.5;}
  .bars-caption{font-size:14px;color:var(--muted);text-align:center;margin:0;}
  .bars-caption b{color:var(--accent);font-weight:650;}
  .footnote{font-size:12px;color:var(--muted);margin:16px 0 0;}
  .footnote a{color:var(--accent);text-decoration:none;}
  .footnote a:hover{text-decoration:underline;}

  /* FAQ */
  details.faq{
    background:var(--surface);border:1px solid var(--line);
    border-radius:12px;padding:0;margin:0 0 8px;
  }
  details.faq summary{
    cursor:pointer;padding:14px 18px;font-weight:650;font-size:15.5px;
    list-style:none;color:var(--ink);line-height:1.35;
  }
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary::after{
    content:"+";float:right;color:var(--accent);font-weight:700;font-size:18px;line-height:1;
  }
  details.faq[open] summary::after{content:"–";}
  details.faq .faq-body{
    padding:0 18px 16px;color:var(--muted);font-size:15px;line-height:1.55;
  }
  details.faq .faq-body p{margin:0;}

  /* CTAs */
  .cta-block{margin:8px 0 0;}
  .cta{
    display:block;text-align:center;
    background:var(--accent);color:#0d1319;
    border:1.5px solid var(--accent);text-decoration:none;
    padding:15px 20px;border-radius:12px;
    font-weight:650;font-size:16.5px;
    transition:background .15s ease, border-color .15s ease, transform .15s ease;
  }
  .cta:hover,.cta:focus{background:var(--accent-strong);border-color:var(--accent-strong);}
  .cta + .cta{margin-top:10px;}
  .cta-outline{background:transparent;color:var(--accent);}
  .cta-outline:hover,.cta-outline:focus{background:var(--accent-dim);color:var(--accent-strong);border-color:var(--accent-strong);}
  .cta-note{overflow-wrap:anywhere;text-align:center;font-size:13.5px;color:var(--muted);margin:12px 0 0;}

  footer{
    margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
    color:var(--muted);font-size:13.5px;text-align:center;
  }
  footer a{color:var(--accent);text-decoration:none;}
  footer a:hover{text-decoration:underline;}
  a:focus-visible,.cta:focus-visible,summary:focus-visible{
    outline:2px solid var(--accent);outline-offset:3px;
  }

  /* Phones. Six level tiles side by side leaves ~44px inside each, and
     "Intermediate" needs about 60 — it wrapped and made the row ragged.
     Most people meeting this page will arrive by scanning the QR, so the
     narrow case is the common one, not the exception. */
  @media (max-width:559px){
    .bars-row{flex-wrap:wrap;}
    .lvl{flex:0 0 calc((100% - 10px) / 3);}
  }

  @media (min-width:480px){
    main{padding:56px 28px 64px;}
  }

  /* Language switcher */
  .langbar{
    display:flex;justify-content:flex-end;gap:6px;
    max-width:640px;margin:0 auto;padding:14px 22px 0;
    font-size:13px;
  }
  .langbar a,.langbar span{
    padding:4px 10px;border-radius:999px;text-decoration:none;
    font-weight:650;letter-spacing:.02em;
  }
  .langbar a{color:var(--muted);border:1px solid transparent;}
  .langbar a:hover{color:var(--accent);border-color:var(--line);background:var(--surface);}
  .langbar .current{color:var(--accent);background:var(--accent-dim);}