/* DeleCCSE — design system, ported from b1cittadinanza (worker 03 there).
   Light, calm paper; ink; ONE accent (deep teal #1F6E5C = _config.ACCENT); serif headings (no web font to load); big
   radii; soft depth. Mobile first; logical properties everywhere so ar/ur (dir=rtl) mirror without extra rules.
   Every colour comes from the tokens below. */
:root {
  --bg: #F7F8F5; --bg-2: #EEF2EE; --surface: #FFFFFF; --surface-2: #FAFBF9; --ink: #161C1A; --ink-2: #3C4542; --muted: #626C68;
  --line: #E1E7E3; --line-2: #CFD8D3;
  --accent: #1F6E5C; --accent-deep: #17584A; --accent-ink: #FFFFFF; --accent-soft: #E5F1EC; --accent-line: #BFDCCF;
  --ok: #2F7A4B; --ok-soft: #E6F2EA; --bad: #B3261E; --bad-soft: #FBE9E7;
  --radius: 22px; --radius-sm: 14px; --radius-lg: 32px;
  --shadow: 0 1px 2px rgba(20,40,32,.05), 0 6px 20px rgba(20,40,32,.06);
  --shadow-lg: 0 2px 6px rgba(20,40,32,.05), 0 22px 56px rgba(20,40,32,.12);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --wrap: 1160px;
}
[dir=rtl] { --serif: var(--font); }   /* Arabic script: the serif stack has no Arabic glyphs */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-wrap: anywhere; overflow-x: clip; }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; overflow-wrap: normal; word-break: normal; hyphens: manual; color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.35rem); }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 760px; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.tiny { font-size: .8rem; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; }
.skip:focus { top: 10px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

/* ── brand ─────────────────────────────────────────────────────────────── */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand i { width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; display: inline-grid; place-items: center;
           font: 800 .95rem/1 var(--font); font-style: normal; letter-spacing: -.02em; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14), 0 4px 10px rgba(31,110,92,.25); }
.brand span { font: 700 1.28rem/1 var(--serif); letter-spacing: -.01em; }

/* ── header ────────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: rgba(247,248,245,.88); backdrop-filter: saturate(1.4) blur(12px);
       -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.nav { display: flex; gap: 2px; margin-inline-start: auto; align-items: center; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 8px 11px; border-radius: 999px; font-size: .95rem; white-space: nowrap; }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a[aria-current=page] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.nav .lang { font-weight: 650; color: var(--muted); }
.nav .try { display: none; }
.menu-btn { display: none; margin-inline-start: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
            font: 600 .95rem/1.2 var(--font); color: var(--ink); cursor: pointer; }
.acct { min-width: 0; margin-inline-start: 6px; }
.acct a, .acct button { white-space: nowrap; }
.top .top-try { display: none; }
.menu-btn, .top-try { white-space: nowrap; flex: none; }
@media (max-width: 980px) {
  .menu-btn { display: inline-flex; margin-inline-start: 0; }
  .top .top-try { display: inline-flex; margin-inline-start: auto; min-height: 38px; padding: 6px 14px; font-size: .9rem; box-shadow: none; }
  .nav { display: none; position: absolute; top: 68px; inset-inline: 0; flex-direction: column; align-items: stretch; background: var(--surface);
         border-bottom: 1px solid var(--line); padding: 10px 16px 18px; box-shadow: var(--shadow-lg); gap: 2px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; border-radius: 12px; }
  .acct { margin: 8px 0 0; }
}
@media (max-width: 420px) {
  .brand span { font-size: 1.08rem; } .brand i { width: 30px; height: 30px; font-size: .85rem; } .top .wrap { gap: 8px; padding: 0 14px; }
  .top .top-try { padding: 6px 12px; font-size: .86rem; } .menu-btn { padding: 7px 12px; font-size: .88rem; }
}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot { margin-top: 96px; background: var(--ink); color: #CFC8BC; padding: 56px 0 40px; font-size: .92rem; }
.foot a { color: #F1ECE3; text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot .brand { color: #fff; }
.foot .brand span { color: #fff; }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1.4fr repeat(3, 1fr); }
.foot-grid h4 { margin: 0 0 10px; color: #fff; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot .legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 22px; font-size: .84rem; line-height: 1.6; color: #B9B1A4; }
.foot .legal p { max-width: 900px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* ── surfaces ──────────────────────────────────────────────────────────── */
main { padding: 28px 0 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.card.flat { box-shadow: none; background: var(--surface-2); }
.card.cta { display: flex; flex-direction: column; align-items: flex-start; }
.card.cta > .btn, .card.cta > .row:last-child { margin-top: auto; }
.card.cta > .row:last-child { padding-top: 12px; }
.card.cta > :nth-last-child(2) { margin-bottom: 12px; }
.card.lift { box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .35em; }
a.card { color: inherit; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.hero { padding: 40px 0 12px; }
.hero p.lead, p.lead { font-size: 1.16rem; color: var(--ink-2); max-width: 640px; }
.kicker { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.kicker.pillk { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; box-shadow: var(--shadow); }
.section { margin-top: 64px; }
.band { margin-top: 88px; }
.band-head { max-width: 720px; margin-bottom: 28px; }
.band-head p { color: var(--ink-2); font-size: 1.06rem; }
.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 11px; font-size: .8rem; font-weight: 650;
        background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.pill.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.pill.off { background: var(--ink); border-color: var(--ink); color: #fff; }
.pill.pass { background: var(--surface); border-color: var(--line-2); color: var(--ink); }
.pill.fail { background: var(--accent); border-color: var(--accent); color: #fff; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 11px 0; border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-inline-start: 28px; }
.checks li::before { content: ""; position: absolute; inset-inline-start: 0; top: .3em; width: 18px; height: 18px; border-radius: 99px; background: var(--accent-soft);
                     border: 1px solid var(--accent-line); }
.checks li::after { content: ""; position: absolute; inset-inline-start: 6px; top: calc(.3em + 4px); width: 5px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.notice { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; font-size: .95rem; }
.notice.good { background: var(--accent-soft); border-color: var(--accent-line); }
.notice.bad { background: var(--surface); border-color: var(--accent); border-inline-start-width: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

/* ── buttons, inputs ───────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 22px; border-radius: 999px;
       background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font: 650 1rem/1.2 var(--font); text-decoration: none;
       cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 8px 18px rgba(31,110,92,.24); transition: transform .12s ease, box-shadow .12s ease, background .12s;
       text-align: center; }
.btn:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(31,110,92,.28); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn.ghost:hover { border-color: var(--ink-2); background: var(--surface); }
.btn.dark { background: var(--ink); border-color: var(--ink); box-shadow: 0 8px 18px rgba(28,26,23,.2); }
.btn.lg { min-height: 56px; padding: 14px 28px; font-size: 1.08rem; }
.btn.sm { min-height: 40px; padding: 7px 16px; font-size: .93rem; }
.btn.block { width: 100%; }
.btn.sm[data-k] { min-width: 44px; padding-inline: 10px; }   /* accent keyboard: equal keys, touch-sized */
.btn .arr { font-size: 1.1em; line-height: 1; }
[dir=rtl] .btn .arr { transform: scaleX(-1); }
.in, select.in, textarea.in { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2);
       border-radius: var(--radius-sm); padding: 11px 14px; min-height: 48px; }
textarea.in { min-height: 260px; line-height: 1.7; resize: vertical; }
.in:focus { border-color: var(--accent); }
.in:focus, .btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
label { display: block; font-weight: 600; font-size: .95rem; }
label .in { margin-top: 6px; font-weight: 400; }

/* ── home: hero ────────────────────────────────────────────────────────── */
.home-hero { position: relative; display: grid; gap: 40px; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; padding: 40px 0 8px; }
.home-hero::before { content: ""; position: absolute; z-index: -1; inset-inline-end: 0; top: -120px; width: 70%; height: 720px;
                     background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0)); pointer-events: none; }
.home-hero h1 { margin-bottom: .35em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin-top: 26px; }
.hero-cta .note { font-size: .9rem; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 44px; background: var(--surface); border: 1px solid var(--line);
         border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.facts div { padding: 18px 20px; border-inline-start: 1px solid var(--line); }
.facts div:first-child { border-inline-start: 0; }
.facts b { display: block; font: 700 1.7rem/1.1 var(--serif); color: var(--ink); margin-bottom: 4px; }
.facts span { font-size: .88rem; color: var(--muted); line-height: 1.4; display: block; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { border-inline-start: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* the arch: the try-one-question card */
.arch { position: relative; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
        border-radius: 260px 260px var(--radius-lg) var(--radius-lg) / 200px 200px var(--radius-lg) var(--radius-lg); padding: 64px 28px 26px; }
.arch::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--accent-line); pointer-events: none; opacity: .7;
                border-radius: 250px 250px 24px 24px / 190px 190px 24px 24px; }
.arch > * { position: relative; }
.taste-head { text-align: center; }
.taste-head .kicker { margin-bottom: 6px; }
.taste-head h2 { font-size: 1.45rem; margin-bottom: 18px; }
.playbig { display: grid; justify-items: center; gap: 10px; margin-bottom: 16px; }
.playbig button { width: 76px; height: 76px; border-radius: 999px; border: 0; background: var(--accent); color: #fff; cursor: pointer; display: grid; place-items: center;
                  box-shadow: 0 0 0 8px var(--accent-soft), 0 14px 30px rgba(31,110,92,.35); transition: transform .12s ease; }
.playbig button:hover { transform: scale(1.04); }
.playbig button svg { width: 28px; height: 28px; margin-inline-start: 4px; }
.playbig button.on svg { margin: 0; }
[dir=rtl] .playbig button svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 4px; }
.playbig .lbl { font-weight: 650; font-size: .95rem; }
.playbig .prog { width: 160px; height: 4px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.playbig .prog i { display: block; height: 100%; width: 0; background: var(--accent); }
.taste .stem { font-weight: 650; margin: 4px 0 10px; }
.taste .hint { text-align: center; margin: 0 0 4px; }
.taste .after { margin-top: 16px; }
.taste .verdict { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.taste .verdict i { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-style: normal; flex: none; background: var(--ink); color: #fff; }
.taste .verdict.ok i { background: var(--accent); }
.taste .next { margin-top: 16px; padding: 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.taste .next h3 { font-family: var(--serif); font-size: 1.15rem; }
.opt.right { border-color: var(--ok); background: var(--ok-soft); }
.opt.wrong { border-color: var(--bad); background: var(--bad-soft); }
.opt.locked { cursor: default; }

/* ── home: bands ───────────────────────────────────────────────────────── */
.split { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split.rev > :first-child { order: 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 24px; } .split.rev > :first-child { order: 0; } }
.who .card { display: flex; flex-direction: column; }
.who .num { font: 700 2.4rem/1 var(--serif); color: var(--accent); margin-bottom: 10px; }
.src { font-size: .85rem; color: var(--muted); }
.src a { color: var(--ink-2); }
.dates { display: grid; gap: 10px; grid-template-columns: repeat(6, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.dates li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 12px; text-align: center; }
.dates b { display: block; font: 700 1.7rem/1 var(--serif); }
.dates span { display: block; font-size: .85rem; color: var(--muted); margin-top: 4px; }
.dates li.past { box-shadow: none; background: transparent; border-style: dashed; color: var(--ink-2); }
.dates li.past b { font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; }
.dates li.next { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.dates li.next span { color: var(--accent-deep); font-weight: 650; }
@media (max-width: 760px) { .dates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.year { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.year h3 { margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.nextbox { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 18px; padding: 16px 20px;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.nextbox b { font: 700 1.25rem/1.2 var(--serif); }
.free-paid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 820px) { .free-paid { grid-template-columns: 1fr; } }
.free-paid .card { display: flex; flex-direction: column; }
.free-paid .card .row:last-child { margin-top: auto; padding-top: 18px; }
.card.inkcard { background: var(--ink); border-color: var(--ink); color: #E9E3D8; }
.card.inkcard h3 { color: #fff; font-family: var(--serif); font-size: 1.4rem; }
.card.inkcard .muted { color: #BDB5A8; }
.faq details { background: var(--surface); }

/* compare table → cards on phones */
.tablewrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.t th, table.t td { text-align: start; padding: 12px 10px; border-top: 1px solid var(--line); vertical-align: top; }
table.t thead th { border-top: 0; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
table.t tbody th { font-weight: 700; }
table.t tr.hl td, table.t tr.hl th { background: var(--accent-soft); }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 14px; }
@media (max-width: 760px) {
  table.stackable thead { display: none; }   /* each cell carries its column name (data-l) */
  table.stackable, table.stackable tbody, table.stackable tr, table.stackable th, table.stackable td { display: block; width: 100%; }
  table.stackable tr { padding: 12px 0; border-top: 1px solid var(--line); }
  table.stackable tr:first-child { border-top: 0; }
  table.stackable th, table.stackable td { border: 0; padding: 3px 0; }
  table.stackable td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: .85rem; }
  table.stackable tr.hl { background: var(--accent-soft); border-radius: 12px; padding: 12px; }
  table.stackable tr.hl td, table.stackable tr.hl th { background: transparent; }
}

/* ── result sheet (scheda) — home sample, mock result, account ─────────── */
.scheda { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 22px 24px; }
.scheda-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.scheda-head h3 { margin: 0; font-family: var(--serif); font-size: 1.3rem; }
.scheda-head .tot { font: 700 1.2rem/1 var(--serif); white-space: nowrap; }
.srow { display: grid; grid-template-columns: minmax(84px, 7.5rem) minmax(0, 1fr) minmax(3.2rem, auto) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.srow:first-of-type { border-top: 0; }
.srow .sn { font-weight: 650; }
.srow .sv { font: 700 1.25rem/1 var(--serif); text-align: end; font-variant-numeric: tabular-nums; }
.srow .sv small { font: 500 .75rem var(--font); color: var(--muted); }
.sbar { position: relative; height: 12px; border-radius: 99px; background: var(--bg-2); }
.sbar i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: var(--ink-2); }
.sbar s { position: absolute; inset-block: -5px; inset-inline-start: 58.333%; width: 2px; background: var(--accent); border-radius: 2px; }
.srow.risk .sbar i { background: var(--accent); }
.srow.risk .sn { color: var(--accent-deep); }
.srow.none .sv { color: var(--muted); font: 500 .85rem var(--font); white-space: nowrap; }
.srow .flag { min-width: 6.6rem; text-align: end; }
.scheda .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); margin-top: 6px; }
.scheda .legend s { display: inline-block; width: 2px; height: 12px; background: var(--accent); vertical-align: -2px; margin-inline-end: 6px; }
.scheda .verdict { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: .95rem; }
.scheda .verdict.bad { border-color: var(--accent-line); background: var(--accent-soft); }
@media (max-width: 520px) {
  .srow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .srow .sbar { grid-column: 1 / -1; grid-row: 2; }
  .srow .flag { grid-column: 1 / -1; text-align: start; min-width: 0; }
  .srow .flag:empty { display: none; }
}

/* ── speaking demo (home) ──────────────────────────────────────────────── */
.demo { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 22px; }
.demo .examiner { margin-bottom: 14px; }
.demo .bubble { font-size: .97rem; }
.pron { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pron span { font-size: .85rem; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.pron span b { font-weight: 700; margin-inline-start: 4px; font-variant-numeric: tabular-nums; }
.pron span.low { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.fix { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: .93rem; }
.fix s { color: var(--muted); }
.fix b { color: var(--accent-deep); }
.critlist { display: grid; gap: 0; margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.critlist div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.critlist div:first-child { border-top: 0; }
.critlist div.hl { color: var(--accent-deep); font-weight: 650; }

/* ── exam room ─────────────────────────────────────────────────────────── */
.room { max-width: 880px; margin: 0 auto; }
.room-bar { position: sticky; top: 76px; z-index: 10; display: flex; gap: 12px; align-items: center; justify-content: space-between;
            background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 20px;
            box-shadow: var(--shadow-lg); margin-bottom: 20px; }
[dir=rtl] .room-bar { padding: 8px 20px 8px 8px; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.2rem; }
.timer.low { color: var(--accent); }
.room h2 { font-size: 1.5rem; margin-top: 8px; }
.q { padding: 16px 0; border-top: 1px solid var(--line); }
.q:first-child { border-top: 0; }
.card.q { padding: 20px 22px; border-top: 1px solid var(--line); }
.q .stem { font-weight: 650; margin-bottom: 10px; }
.opts { display: grid; gap: 8px; }
.opt { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 12px 14px; cursor: pointer;
       background: var(--surface); font-weight: 400; transition: border-color .12s, background .12s; }
.opt:hover { border-color: var(--ink-2); }
.opt input { margin-top: 4px; accent-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tf { display: flex; gap: 8px; flex-wrap: wrap; }
.tf .opt { flex: 1 1 140px; }
.reading { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; line-height: 1.8; font-size: 1.04rem; box-shadow: var(--shadow); }
.reading h3 { margin-top: 0; font-family: var(--serif); font-size: 1.3rem; }
.cloze select, .cloze-sel { font: inherit; border: 1px solid var(--accent-line); border-radius: 8px; padding: 2px 6px; background: var(--accent-soft); max-width: 100%; color: var(--ink); }
.player { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line);
          border-radius: 999px; padding: 6px 16px 6px 6px; margin-bottom: 12px; }
[dir=rtl] .player { padding: 6px 6px 6px 16px; }
.player .bar { flex: 1 1 140px; height: 6px; background: var(--bg-2); border-radius: 99px; overflow: hidden; }
.player .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 99px; }
.words { font-variant-numeric: tabular-nums; }
.review .ok { color: var(--accent-deep); font-weight: 700; }
.review .ko { color: var(--ink); font-weight: 700; text-decoration: underline wavy var(--line-2); }
mark.err { background: transparent; border-bottom: 2px solid var(--accent); padding: 0 1px; color: inherit; }
mark.err:target, mark.err.on { background: var(--accent-soft); }
.script { font-size: .92rem; color: var(--ink-2); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }

/* score */
.score { display: flex; align-items: baseline; gap: 8px; }
.score b { font: 700 3rem/1 var(--serif); letter-spacing: -.02em; }
.meter { height: 10px; background: var(--bg-2); border-radius: 99px; position: relative; }
.meter i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ink-2); border-radius: 99px; }
.meter s { position: absolute; inset-block: -4px; width: 2px; background: var(--accent); border-radius: 2px; }
.crit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.crit:first-child { border-top: 0; }
.crit .meter { grid-column: 1 / -1; }
.nextstep { margin-top: 16px; display: flex; gap: 16px 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
            background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.nextstep h3 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 4px; }
.nextstep p { margin: 0; color: var(--ink-2); }
.nextstep > div { flex: 1 1 280px; }
.offer { margin-top: 12px; display: flex; gap: 12px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px;
         background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); }
.offer p { margin: 0; flex: 1 1 260px; }
.offer.col { flex-direction: column; align-items: stretch; }
.offer.col p { flex: none; }

/* speaking room */
.examiner { display: flex; gap: 14px; align-items: center; }
.avatar-e { width: 56px; height: 56px; border-radius: 999px 999px 18px 18px; background: var(--accent); display: grid; place-items: center; color: #fff; font: 700 1.3rem/1 var(--serif);
            box-shadow: 0 0 0 5px var(--accent-soft), 0 8px 20px rgba(31,110,92,.25); flex: none; }
.avatar-e.talk { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 0 0 8px var(--accent-soft), 0 10px 28px rgba(31,110,92,.35); } }
@media (prefers-reduced-motion: reduce) { .avatar-e.talk, .status.you .dot { animation: none; } a.card:hover, .btn:hover { transform: none; } }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; }
.status .dot { width: 10px; height: 10px; border-radius: 99px; background: var(--line-2); }
.status.you .dot { background: var(--accent); animation: pulse 1s infinite; }
.chat { display: grid; gap: 10px; margin-top: 16px; }
.bubble { max-width: 88%; padding: 11px 15px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); border: 1px solid var(--line); }
.bubble.c { margin-inline-start: auto; background: var(--accent-soft); border-color: var(--accent-line); border-radius: 18px 18px 6px 18px; }
[dir=rtl] .bubble { border-radius: 18px 18px 6px 18px; }
[dir=rtl] .bubble.c { border-radius: 18px 18px 18px 6px; }
.bubble .who { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.cards4 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.cards4 button { text-align: start; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 16px; cursor: pointer; }
.cards4 button:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.lv { display: flex; gap: 3px; height: 18px; align-items: flex-end; }
.lv i { width: 5px; height: 4px; background: var(--line-2); border-radius: 2px; }
.lv i.on { background: var(--accent); height: 16px; }

/* ── account / plan / sign-in ──────────────────────────────────────────── */
.acct-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px;
            font: inherit; cursor: pointer; color: var(--ink); text-decoration: none; }
.avatar { width: 30px; height: 30px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-deep); display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.acct-in { color: var(--ink); font-weight: 650; text-decoration: none; padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); }
.dash { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; }
.dash > * { min-width: 0; }
@media (max-width: 900px) { .dash { grid-template-columns: 1fr; } }
.countdown { position: relative; overflow: hidden; background: var(--ink); color: #EDE7DC; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-lg); }
.countdown::after { content: ""; position: absolute; inset-inline-end: -40px; top: 20px; width: 200px; height: 260px; border: 2px solid rgba(232,196,181,.25);
                    border-radius: 100px 100px 0 0; pointer-events: none; }
.countdown b { display: block; font: 700 clamp(2.2rem, 6vw, 3.2rem)/1.05 var(--serif); color: #fff; margin: 6px 0; position: relative; }
.countdown .tiny, .countdown .small { color: #C9C1B4; position: relative; }
.countdown .row { position: relative; }
.countdown .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.phases { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.phases li { position: relative; padding: 4px 0 18px; padding-inline-start: 34px; }
.phases li::before { content: ""; position: absolute; inset-inline-start: 8px; top: 8px; width: 12px; height: 12px; border-radius: 99px; background: var(--surface); border: 2px solid var(--line-2); }
.phases li::after { content: ""; position: absolute; inset-inline-start: 13px; top: 24px; bottom: -2px; width: 2px; background: var(--line); }
.phases li:last-child::after { display: none; }
.phases li.now::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.phases li.done::before { background: var(--ink-2); border-color: var(--ink-2); }
.phases b { display: block; }
.phases p { margin: 2px 0 0; color: var(--muted); font-size: .93rem; }
.todo { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--radius-sm);
        background: var(--accent-soft); border: 1px solid var(--accent-line); }
.todo b { font-size: 1.02rem; }
.sessions { display: flex; flex-wrap: wrap; gap: 8px; }
.sessions button { font: inherit; font-weight: 600; background: var(--surface); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; color: var(--ink); }
.sessions button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.signin-wrap { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; max-width: 980px; }
@media (max-width: 820px) { .signin-wrap { grid-template-columns: 1fr; } }
.signin-wrap .why { padding: 8px 4px; }

/* ── pricing ───────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: 8px; }
@media (max-width: 1100px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: 10px; position: relative; }
.plan .for { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 0; min-height: 3em; }
.plan h3 { font-family: var(--serif); font-size: 1.35rem; margin: 0; }
.plan .price { font: 700 2.8rem/1 var(--serif); letter-spacing: -.02em; display: flex; align-items: baseline; gap: 8px; }
.plan .price small { font: 500 .85rem var(--font); color: var(--muted); letter-spacing: 0; }
.plan .perday { font-size: .88rem; color: var(--ink-2); font-weight: 600; }
.plan .checks { font-size: .93rem; margin: 6px 0 4px; }
.plan .btn { margin-top: auto; }
.plan.main { border: 2px solid var(--accent); box-shadow: 0 0 0 6px var(--accent-soft), var(--shadow-lg); }
.plan .badge { position: absolute; top: -13px; inset-inline-start: 22px; }
.plan .badge .pill { background: var(--accent); color: #fff; border-color: var(--accent); }
.plan:not(.main) .badge { visibility: hidden; }
.trustline { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; color: var(--muted); font-size: .9rem; margin-top: 18px; }

/* faq */
details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; }
details + details { margin-top: 10px; }
summary { cursor: pointer; font-weight: 650; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 1.4rem/1 var(--font); color: var(--accent); flex: none; }
details[open] > summary::after { content: "–"; }
details > summary.small::after { font-size: 1.1rem; }

/* worker 05 · right-to-left interface (ar, ur): Italian exam material stays left-to-right */
[dir=rtl] :is([lang=it], .stem, .reading, .cloze, .script, .opts, .chat){direction:ltr;text-align:left;unicode-bidi:isolate}

/* Exam reminder consent and narrow-screen fields (task 03b). */
.exam-subscribe form{display:grid;gap:1rem;max-width:46rem}
.exam-subscribe input[type=email],.exam-subscribe select{display:block;width:100%;min-width:0;margin-top:.35rem;padding:.7rem;border:1px solid var(--line,#ddd);border-radius:12px;font:inherit;background:#fff}
.exam-consent{display:flex;align-items:flex-start;gap:.65rem;font-size:.9rem}
.exam-consent input{flex:none;margin-top:.3rem}.exam-subscribe button{justify-self:start}

/* Inline free writing and real grader samples (task 04). */
.freewrite{max-width:850px;margin-inline:auto}
.freewrite textarea{min-height:200px;width:100%;resize:vertical;text-align:left}
.freewrite [aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}
.freewrite .stack,.real-sample .card{min-width:0;overflow-wrap:anywhere}
.freewrite .row>.btn{white-space:normal;text-align:center}
.freewrite [data-fw-key]{min-width:44px;min-height:44px}
.fw-issues{padding-inline-start:1.4rem}.fw-issues li+li{margin-top:1rem}
.real-sample .reading{white-space:pre-wrap;overflow-wrap:anywhere}
.real-sample .sample-score{margin-block:.75rem;font-size:1.15rem;font-weight:700;color:var(--accent)}

/* Task 05: original answer highlights and responsive error-library cards. */
.error-highlight{background:var(--accent-soft);color:inherit;border-bottom:2px solid var(--accent);padding:0 .1em;border-radius:3px}
.error-highlight sup{color:var(--accent);font-weight:700}
.error-cards{margin-block:1.5rem;align-items:stretch}
.seo .error-cards h2{font-size:1.2rem;margin-top:.5rem}
.error-cards .card{min-width:0}.error-retest{white-space:normal;text-align:center}
.seo .error-issues{font-size:.9rem}.seo .error-issues th{white-space:normal}
@media(min-width:641px){.seo .error-issues{table-layout:fixed}.seo .error-issues th:first-child{width:6%}}

/* Compact deadline emphasis inside exam tables (task 03b). */
[data-deadline].notice{display:inline-block;max-width:100%;padding:.25rem .4rem;background:var(--accent-soft);border-color:var(--accent-line)}

/* Growth: a visible correction, a clear first action, native-language entry points. */
.growth-hero{align-items:center;padding-block:46px 28px;gap:40px}
.growth-hero h1{font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.09;max-width:16ch}
.growth-hero .lead{max-width:42ch}.growth-secondary{display:flex;gap:12px 22px;flex-wrap:wrap;margin-top:18px}
.growth-languages{display:flex;flex-wrap:wrap;gap:4px 7px;margin-top:24px;max-width:540px}
.growth-languages a{font-size:.78rem;line-height:1.6;padding:5px 9px;border-radius:99px;border:1px solid var(--line);text-decoration:none;background:var(--surface-2);white-space:nowrap}
.growth-languages a[aria-current]{color:white;background:var(--accent);border-color:var(--accent)}
.growth-proof{padding:28px;border:1px solid var(--line);border-radius:28px;background:var(--surface);box-shadow:var(--shadow-lg);min-width:0}
.proof-line{margin-top:24px}.proof-line>span{font-size:.78rem;color:var(--muted)}.proof-line p{font:600 clamp(1.2rem,2vw,1.7rem)/1.4 var(--serif);margin:7px 0}
.proof-line s{text-decoration-color:var(--accent);text-decoration-thickness:1px}.proof-line.improved{border-inline-start:3px solid var(--accent);padding-inline-start:16px}
.proof-why{padding:14px;background:var(--surface-2);border-radius:12px;font-size:.92rem}.growth-proof>.small{font-size:.76rem}
.growth-full{max-width:100%;margin:0 0 30px}.growth-full>.real-sample{padding-block:20px;margin:0}
.growth-listening>.taste{max-width:600px;margin:auto}.growth-path{padding:24px;border:1px solid var(--accent-line);border-radius:22px;background:var(--surface-2);margin-block:24px}
.growth-path h2{font-size:1.3rem!important;margin:0 0 8px!important}.growth-path .row{margin-top:16px}.growth-path .btn{white-space:normal;text-align:center}
@media(max-width:768px){.growth-hero{padding-top:28px;gap:24px}.growth-hero h1{max-width:none;font-size:2.25rem}.growth-proof{padding:22px}.growth-languages{margin-top:18px}.growth-hero .hero-cta .btn{font-size:1rem;padding:14px 20px}.growth-hero .hero-cta .note{font-size:.79rem}.growth-path{padding:18px}.growth-secondary{font-size:.9rem}.growth-full>.real-sample{padding-inline:0}}

.freewrite [data-fw-words]{display:block;margin-block:6px 16px}

/* Instant practice: static first paint, logical spacing, no media or late sizing. */
.instant-quiz{min-width:0;padding:20px;background:var(--surface);border:1px solid var(--accent-line);border-radius:var(--radius);box-shadow:var(--shadow);align-self:start}
.instant-quiz h2,.seo .instant-quiz h2{font:700 1.2rem/1.25 var(--font);margin:0}
.instant-quiz .iq-hint{font-size:.8rem;color:var(--muted);margin:4px 0 10px}
.instant-quiz .iq-progress{font-size:.78rem;color:var(--muted);margin:0 0 4px}
.instant-quiz .iq-question{font:600 1.15rem/1.45 var(--serif);margin:0 0 12px;min-block-size:2.9em}
.iq-options{display:grid;gap:8px}.iq-options button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);font:inherit;font-weight:500;line-height:1.3;padding:8px 12px;text-align:start;cursor:pointer;transition:background .12s,border-color .12s}
.iq-key{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:99px;background:var(--surface);border:1px solid var(--line-2);font-size:.75rem;font-weight:700;color:var(--muted)}
.iq-options button:not([aria-disabled]):hover{border-color:var(--accent);background:var(--accent-soft)}
.iq-options button[aria-disabled]{cursor:default}.iq-options button[aria-disabled]:not(.iq-correct):not(.iq-wrong){opacity:.55}
.iq-options .iq-correct{border-color:var(--ok);background:var(--ok-soft);box-shadow:inset 0 0 0 1px var(--ok)}
.iq-options .iq-wrong{border-color:var(--bad);background:var(--bad-soft);box-shadow:inset 0 0 0 1px var(--bad)}
.iq-options .iq-correct .iq-key{background:var(--ok);border-color:var(--ok);color:#fff}.iq-options .iq-wrong .iq-key{background:var(--bad);border-color:var(--bad);color:#fff}
.iq-options .iq-correct::after{content:'✓';margin-inline-start:auto;color:var(--ok);font-weight:700}.iq-options .iq-wrong::after{content:'✗';margin-inline-start:auto;color:var(--bad);font-weight:700}
.iq-blank{display:inline-block;min-width:3.2em;padding:0 4px;border-bottom:2px dashed var(--line-2);text-align:center;color:transparent}
.iq-blank-right{border-bottom:2px solid var(--ok);color:var(--ok);font-weight:700}.iq-blank-wrong{border-bottom:2px solid var(--bad);color:var(--bad);margin-inline-end:6px}
.iq-feedback{padding-top:10px}.iq-verdict{font-size:.95rem;margin:0 0 8px;min-block-size:1.4em}
.iq-feedback .iq-right,.iq-result .iq-right{color:var(--ok);font-weight:700}.iq-feedback .iq-miss{color:var(--bad);font-weight:700}
.iq-rule{border-inline-start:3px solid var(--ok);background:var(--ok-soft);border-radius:0 10px 10px 0;padding:10px 12px;margin:0 0 12px}
.iq-rule b{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);margin-bottom:4px}
.iq-rule p{margin:0;font-size:.9rem;line-height:1.45}
.iq-result .iq-score-label{margin:0;font-size:.8rem;color:var(--muted)}
.iq-result .iq-score{margin:0 0 10px;font:700 2.6rem/1 var(--serif);color:var(--ink)}
.iq-fix{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:12px;margin-bottom:12px}
.iq-fix-h{margin:0 0 6px;font-size:.8rem;font-weight:700;color:var(--accent-deep)}
.iq-fix-q{margin:0 0 10px;font:1.05rem/1.5 var(--serif)}
.iq-fix .iq-rule{margin:0}
.iq-perfect{font-size:.92rem;margin:0 0 12px}
.iq-result .btn{width:100%;justify-content:center}
.iq-note{font-size:.78rem;color:var(--muted);margin:6px 0 10px;text-align:center}
.iq-more{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-size:.85rem;margin:0}
.quiz-bridge{padding:16px;margin-block:14px 20px;border:1px solid var(--accent-line);border-radius:var(--radius);background:var(--surface-2)}
.quiz-bridge p{margin:0 0 10px;font-size:.9rem;line-height:1.45}
.quiz-bridge .quiz-disclosure{border:0;padding:0}.quiz-disclosure>summary{font:650 1rem/1.4 var(--font);cursor:pointer}
.quiz-disclosure .instant-quiz{margin-top:12px}.quiz-bridge.quiz-open{padding:0;border:0;background:none}.quiz-open .iq-deadline{margin:0 0 10px}.iq-reminder{display:inline-block;margin-top:10px;font-size:.85rem}
.growth-hero+.growth-secondary{margin-top:8px}
.pg-home main .wrap>.growth-proof{max-width:760px;margin-block:24px}
@media(max-width:900px){.pg-home .home-hero{gap:16px;padding-block:20px 8px}.pg-home .home-hero h1{font-size:1.85rem;max-width:none;line-height:1.1}.pg-home .home-hero .lead{font-size:1rem;line-height:1.4;margin-block:10px}.pg-home .home-hero .kicker{margin-bottom:8px}.pg-home .hero-cta{margin-top:12px;gap:8px}.pg-home .hero-cta .btn{padding:12px 18px;font-size:1rem}.pg-home .hero-cta .note{font-size:.75rem}.instant-quiz{padding:16px}.quiz-bridge{padding:14px}}

/* Shared paywall: fixed three-column comparison, including compact quota offers and RTL. */
.paywall-compare{margin-block:20px;padding:20px;min-width:0}
.paywall-compare h2{font:700 1.2rem/1.3 var(--font);margin:0 0 12px}
.paywall-compare table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:.9rem;line-height:1.35}
.paywall-compare th,.paywall-compare td{text-align:start;vertical-align:top;padding:9px 8px;overflow-wrap:anywhere;border-bottom:1px solid var(--line)}
.paywall-compare th:first-child{width:44%}.paywall-compare thead{color:var(--muted)}
.paywall-compare td:last-child{font-weight:650}.paywall-compare .compare-current{background:var(--accent-soft);outline:2px solid var(--accent);outline-offset:-2px;color:var(--ink)}
.paywall-compare .compare-current th{border-inline-start:4px solid var(--accent)}
.paywall-compare .compare-terms,.paywall-compare .compare-note{font-size:.78rem;line-height:1.4;margin:10px 0;overflow-wrap:anywhere}
.paywall-compare .compare-note{color:var(--muted)}.paywall-compare .btn{white-space:normal;max-width:100%;text-align:center}
.compare-compact{padding:12px;margin-block:12px}.compare-compact h2{font-size:1rem;margin-bottom:6px}
.compare-compact table{font-size:.78rem;line-height:1.25}.compare-compact th,.compare-compact td{padding:5px}
.compare-compact .compare-terms,.compare-compact .compare-note{font-size:.7rem;line-height:1.3;margin:7px 0}
@media(max-width:480px){.paywall-compare{padding:12px}.paywall-compare table{font-size:.78rem}.paywall-compare th,.paywall-compare td{padding:6px 4px}.compare-compact table{font-size:.72rem}.compare-compact th,.compare-compact td{padding:4px}.compare-compact .btn{font-size:.85rem;padding:9px 12px}}

/* Weak-section recovery card: same responsive surface on reports and practice. */
.weak-loop{display:grid;gap:14px;min-width:0;overflow-wrap:anywhere}.weak-loop>*{margin:0}.weak-loop h3,.weak-loop p{margin:0}.weak-loop .pill{justify-self:start;max-width:100%;white-space:normal}.weak-loop .btn{justify-self:start;white-space:normal;text-align:center;max-width:100%}.weak-loop .wl-score{font-size:clamp(1.1rem,3vw,1.5rem);font-weight:700}.weak-loop [data-weak-save]{display:grid;gap:12px}

/* Original oral feedback: keep Italian passages left-to-right within RTL interfaces. */
.oral-sample > summary { line-height:1.55; }
.oral-sample > .stack { margin-top:18px; }
.oral-sample [lang="it"] { text-align:left; overflow-wrap:anywhere; }
.oral-sample h3,.oral-sample h4 { margin-bottom:0; }
.oral-sample .card p:last-child { margin-bottom:0; }
.oral-sample .pill { max-width:100%; white-space:normal; }

/* «Today» card for returning visitors (assets/today.js): device-only diary, three steps for the day. */
.today-slot{padding-top:20px}
.today{padding:18px 20px;border:1px solid var(--accent-line)}
.today-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;margin-bottom:10px}
.today-head h2{font:700 1.25rem/1.25 var(--font);margin:0}.today-head p{margin:0}
.today-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.today-list a{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.today-list a:hover{border-color:var(--accent);background:var(--accent-soft)}
.td-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:99px;border:2px solid var(--line-2);font-size:.8rem;color:#fff}
.today-list .done .td-check{background:var(--ok);border-color:var(--ok)}
.today-list .done .td-label{color:var(--muted);text-decoration:line-through}
.td-label{flex:1;min-width:0}.td-min{flex:none;font-size:.78rem;font-weight:500;color:var(--muted)}
.today-all{margin:0 0 8px;font-size:.9rem;color:var(--ok);font-weight:600}
.today-save{display:inline-block}
.resit-promise { display: inline-flex; gap: 8px; align-items: baseline; margin: 14px auto 0; padding: 8px 14px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 600; font-size: .95rem; max-width: 100%; }

/* «or» between the Google button and the email form */
.gsi { display: flex; justify-content: center; min-height: 44px; }
.gsi:empty { display: none; }
.or-line { display: flex; align-items: center; gap: .75rem; margin: 0; }
.or-line::before, .or-line::after { content: ""; flex: 1; border-top: 1px solid var(--line, rgba(0,0,0,.12)); }
.srow a.sn { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.srow a.sn:hover { text-decoration-color: currentColor; }
.srow .pill.go { text-decoration: none; background: var(--accent-soft, #f6e3dc); color: var(--accent-deep, inherit); }

/* ── writing & speaking rooms ── */
.wo-task .pill { white-space: normal; }
.wo-photo { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.wo-report .list li { list-style: none; }
.wo-report .list { padding-inline-start: 0; }
textarea.in[data-text] { min-height: 220px; resize: vertical; }
[data-room=write] .row [data-k], [data-room=oral] [data-send] { min-width: 44px; min-height: 44px; }

/* ── DeleCCSE additions (main session 11-09) ─────────────────────────────── */
.ok { color: var(--ok); } .bad { color: var(--bad); }
.hero.slim { padding-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
        color: var(--ink-2); text-decoration: none; font: 600 .92rem/1.2 var(--font); cursor: pointer; }
.chip:hover { border-color: var(--accent-line); color: var(--ink); }
.chip.on, .chip[aria-selected=true] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip.soon { color: var(--muted); background: var(--surface-2); cursor: default; }
.link-card { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.link-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.link-card h3 { margin: 6px 0 8px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 20px 0 0; font-size: .86rem; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-inline-end: 8px; color: var(--line-2); }
.crumbs a { color: var(--muted); }
.qpage h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-top: 10px; }
.qopts, .qlist { padding: 0; margin: 18px 0; list-style: none; display: grid; gap: 10px; }
.qopts li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.qopts li small, .opt small { display: block; color: var(--muted); }
.qopts li[role=button] { cursor: pointer; }
.qopts li.iq-correct, .opt.iq-correct { border-color: var(--ok); background: var(--ok-soft); }
.qopts li.iq-wrong, .opt.iq-wrong { border-color: var(--bad); background: var(--bad-soft); }
.qlist li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.reveal { margin-top: 8px; padding: 14px 18px; background: var(--accent-soft); border-radius: var(--radius-sm); }
.reveal summary { font-weight: 700; cursor: pointer; min-height: 44px; }
.reveal .ans { margin: 12px 0 8px; }
.qcard { margin-bottom: 14px; }
.qhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.qtext { font-size: 1.12rem; font-weight: 650; margin: 0 0 6px; }
.qtr { margin: 0 0 10px; }
.qopts-btn { display: grid; gap: 10px; margin-top: 12px; }
.qopts-btn .opt { display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 48px; padding: 12px 16px; text-align: start; background: var(--surface);
                  border: 1px solid var(--line-2); border-radius: var(--radius-sm); font: 1rem/1.4 var(--font); color: var(--ink); cursor: pointer; }
.qopts-btn .opt:hover:not(:disabled) { border-color: var(--accent); }
.qopts-btn .opt.chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.qopts-btn .opt:disabled { cursor: default; opacity: 1; }
.qfeedback .verdict { margin: 14px 0 6px; }
.verdict.ok b { color: var(--ok); } .verdict.bad b { color: var(--bad); }
.exambar { position: sticky; top: 76px; z-index: 10; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 18px 0;
           padding: 10px 14px; background: rgba(255,255,255,.94); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow); }
.exambar [data-clock] { font-variant-numeric: tabular-nums; font-size: 1.1rem; }
.room-h { font-size: clamp(1.6rem, 4vw, 2.2rem); }
.tabs { margin-bottom: 18px; }
.tarea h2 { font-size: 1.35rem; }
.reading { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; margin: 12px 0; }
.reading h4 { margin: 0 0 8px; }
.reading p { margin: 0 0 .6em; }
.card.q { margin: 12px 0; }
.opts { display: grid; gap: 8px; margin-top: 10px; }
.opts .opt { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.opts .opt input { margin-top: 4px; accent-color: var(--accent); }
.opts .opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.player .bar { flex: 1 1 120px; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.player .bar i { display: block; height: 100%; width: 0; background: var(--accent); }
.scheda.plain { padding: 0; border: 0; box-shadow: none; background: none; }
.scheda.plain .srow { grid-template-columns: minmax(0, 1.4fr) minmax(80px, 1fr) auto; }
.dates2 { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.dates2 li { padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 2px; }
.dates2 li span { font-size: .86rem; color: var(--muted); }
.dates2 li.past { opacity: .5; }
.dates2 li.next { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.offer { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 12px; padding: 14px 16px;
         background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm); }
.steps { display: grid; gap: 8px; padding-inline-start: 22px; }
.card.group.risk { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.btn.danger { color: var(--bad); border-color: var(--bad-soft); }
.iq-tr { font-size: .9rem; color: var(--muted); margin: -4px 0 10px; }
.langs-row .chips { margin-top: 0; }
.wrongq { margin-top: 10px; }
.src a { color: var(--muted); }
.mockstep .kicker { margin-bottom: 8px; }
@media (max-width: 640px) {
  .exambar { top: 70px; border-radius: var(--radius-sm); }
  .scheda.plain .srow { grid-template-columns: minmax(0, 1fr) auto; }
  .scheda.plain .srow .sbar { grid-column: 1 / -1; order: 3; }
}

/* tap targets ≥ 44px (layout gate TAP) */
.brand { min-height: 44px; }
.menu-btn, .top .top-try { min-height: 44px; align-items: center; }
summary { min-height: 44px; align-items: center; padding-block: 6px; }
.grid-2 > .card.cta { height: 100%; }
@media (max-width: 640px) {
  table.who, table.who tbody, table.who tr, table.who th, table.who td { display: block; width: 100%; }
  table.who tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  table.who th, table.who td { border: 0; padding: 2px 14px; }
  table.who td { color: var(--muted, #555); }
}