/* Pricing, FAQ, paywall and upgrade dialog. */

/* ------------------------------------------------------------ pricing hero */

.pricing-hero { text-align: center; padding: 34px 0 30px; }
.pricing-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.01em;
}
.pricing-hero .lede {
  margin: 0 auto 26px;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
}

/* --- what the subscription is worth ---------------------------------------
   Two weights, because twelve equal cards is a specification sheet and a
   reader deciding whether to pay is not reading one. The three things a free
   account genuinely cannot do get the size; everything else gets a line.

   The hero cards lead with a rule in the accent rather than a coloured panel,
   so they read as important without the section turning loud. */
.pro-hero {
  display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 28px;
}
.pro-hero-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px;
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
.pro-hero-i { display: block; font-size: 1.7rem; line-height: 1; margin-bottom: 12px; }
.pro-hero-card h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.4; }
.pro-hero-card p { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ink-2); }

/* The rest: an icon, a name, and one line. Nothing here should need a
   decision about whether to read it. */
.pro-rows {
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
}
.pro-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); padding: 15px 18px;
}
.pro-row-i { font-size: 1.15rem; line-height: 1.35; flex: none; }
.pro-row b { display: block; font-size: .95rem; margin-bottom: 2px; }
.pro-row span { font-size: .85rem; line-height: 1.6; color: var(--ink-3); }
.pro-row [lang="de"], .pro-row span { word-break: break-word; }

@media (min-width: 720px) {
  .pro-hero { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .pro-rows { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------- plan cards */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  max-width: 880px;
  margin: 34px auto 10px;
  align-items: start;
}

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow); }

.plan.featured {
  border-color: var(--brand);
  border-width: 2px;
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 220px),
    var(--surface);
}

.plan-flag {
  position: absolute;
  top: -13px; inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--brand);
  color: #fff;
  font-size: .74rem;
  font-weight: 800;
  padding: 5px 15px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px -4px var(--brand);
}
html[data-theme="dark"] .plan-flag { color: #06131F; }

.plan-name { margin: 6px 0 4px; font-size: 1.35rem; font-weight: 800; }
.plan-tag { margin: 0 0 16px; color: var(--muted); font-size: .92rem; }

.plan-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 20px; }
.plan-price b {
  font-family: var(--font-de);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.plan.featured .plan-price b { color: var(--brand-ink); }
.plan-price span { font-size: .9rem; color: var(--muted); }

.plan-feats { list-style: none; margin: 0 0 22px; padding: 0; }
.plan-feats li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; font-size: .92rem;
  border-top: 1px solid var(--line-soft);
}
.plan-feats li:first-child { border-top: 0; }
.plan-feats .tick {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800;
  margin-top: 1px;
}
.plan-feats .yes .tick { background: var(--ok-bg); color: var(--ok); }
.plan-feats .no .tick { background: var(--surface-2); color: var(--muted); }
.plan-feats .no { color: var(--muted); }
.plan-feats .no b { font-weight: 500; }
.plan-feats b { font-weight: 600; }
.plan-feats .strong b { font-weight: 800; }
.plan-feats em {
  display: block; font-style: normal;
  font-size: .8rem; color: var(--muted); margin-top: 2px;
}

.btn.block { display: block; width: 100%; text-align: center; }
.plan-fine { margin: 10px 0 0; text-align: center; font-size: .8rem; color: var(--muted); }

/* ------------------------------------------------------------ value cards */

.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, border-color .16s ease;
}
.value-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.value-icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--brand-soft); font-size: 1.3rem; margin-bottom: 13px;
}
.value-card h3 { margin: 0 0 7px; font-size: 1.02rem; font-weight: 700; }
.value-card p { margin: 0; color: var(--ink-soft); font-size: .93rem; }

/* -------------------------------------------------------------------- FAQ */

.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.faq-item { border-top: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 0; }

.faq-item summary {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  transition: background .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ''; }
.faq-item summary:hover { background: var(--surface-2); }
.faq-item summary > span:first-child { flex: 1; }

.faq-chev {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 1rem;
  font-weight: 700;
  transition: transform .22s ease, background .22s ease;
}
.faq-item[open] .faq-chev { transform: rotate(45deg); background: var(--accent-soft); color: var(--accent-ink); }

.faq-a { padding: 0 20px 18px; }
.faq-a p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.8;
  max-width: 70ch;
}
.faq-item[open] .faq-a { animation: faqIn .22s ease both; }
@keyframes faqIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.faq-cta {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; margin-top: 26px;
}

/* -------------------------------------------------------------- plan note */

.plan-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px; font-size: .88rem;
}
.badge.lock { background: var(--surface-2); color: var(--muted); }
.badge.free { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }

.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--brand-ink); font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline;
}

/* locked exercise cards in a listing */
a.card.is-locked { opacity: .92; }
a.card.is-locked:hover { border-color: var(--accent); transform: none; }


/* ---------------------------------------------------------- locked screen */

.locked-panel {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(600px 200px at 50% 0%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    var(--surface);
  padding: 48px 24px;
  box-shadow: var(--shadow-sm);
}
.locked-icon { font-size: 2.6rem; margin-bottom: 10px; }
.locked-panel h2 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.locked-panel > p { margin: 0 auto 22px; max-width: 46ch; color: var(--ink-soft); }
.locked-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.locked-alt { margin: 18px 0 0; font-size: .88rem; color: var(--muted); }

/* ------------------------------------------------------- dashboard gating */

.gate-card {
  border: 1px dashed var(--brand);
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
    var(--surface);
  padding: 26px 22px;
  text-align: center;
}
.gate-lock { font-size: 1.9rem; margin-bottom: 8px; }
.gate-card h3 { margin: 0 0 7px; font-size: 1.1rem; font-weight: 800; }
.gate-card > p { margin: 0 auto 14px; max-width: 52ch; color: var(--ink-soft); font-size: .93rem; }
.gate-list {
  list-style: none; margin: 0 auto 18px; padding: 0;
  display: inline-flex; flex-direction: column; gap: 6px; text-align: start;
}
.gate-list li { font-size: .88rem; color: var(--ink-soft); }
.gate-list li::before { content: '✓'; color: var(--ok); font-weight: 800; margin-inline-end: 8px; }

/* ------------------------------------------------------------ upgrade modal */

/*
 * The backdrop is opaque from the moment it exists.
 *
 * It used to start at opacity 0 and be faded in by the .open class, which
 * meant a full-screen pointer-events:auto layer was visible exactly when a CSS
 * transition happened to run. When one did not — a tab that was not
 * compositing, throttled timers, a browser that skipped it — the overlay sat
 * over the page at opacity 0: every click landed on nothing, no modal
 * appeared, and the site looked dead while being perfectly alive underneath.
 *
 * That was reproduced on production, signed out, with the welcome six seconds
 * into the visit, and it is the third time an invisible modal has cost this
 * project real traffic. A timer that forces the opacity would patch it; this
 * removes the state instead. There is no longer any way for the overlay to
 * block without being seen, because it has nothing to fade in from.
 *
 * The entrance is now carried entirely by the panel inside it, which is
 * visible either way — an animation that does not run leaves it ten pixels
 * low rather than invisible.
 */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 18, 22, .58);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  position: relative;
  width: min(460px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 26px 24px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  transform: translateY(10px) scale(.98);
  transition: transform .2s cubic-bezier(.2, .8, .3, 1);
}
.modal-backdrop.open .modal { transform: none; }

.modal-x {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); cursor: pointer; font-size: .85rem;
}
.modal-x:hover { background: var(--surface-2); color: var(--ink); }

.modal-kicker {
  display: inline-block; font-family: var(--font-de);
  font-size: .74rem; font-weight: 800; letter-spacing: .08em;
  color: var(--brand-ink); background: var(--brand-soft);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.modal h2 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; }
.modal-reason { margin: 0 0 14px; color: var(--muted); font-size: .9rem; }

.modal-price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 16px; }
.modal-price b { font-family: var(--font-de); font-size: 2.5rem; font-weight: 800; color: var(--brand-ink); line-height: 1; }
.modal-price span { color: var(--muted); font-size: .9rem; }

.modal-list { list-style: none; margin: 0 0 16px; padding: 0; }
.modal-list li { font-size: .92rem; padding: 6px 0; color: var(--ink-soft); }
.modal-list li::before { content: '✓'; color: var(--ok); font-weight: 800; margin-inline-end: 9px; }

.modal-notice {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .85rem;
  line-height: 1.65;
  margin-bottom: 18px;
}
.modal-actions { display: flex; flex-direction: column; gap: 9px; }
.modal-actions .btn { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-backdrop, .faq-chev { transition: none; }
  .faq-item[open] .faq-a { animation: none; }
}

@media (max-width: 700px) {
  .plan { padding: 22px 18px; }
  .plan-price b { font-size: 2.5rem; }
  .faq-item summary { padding: 15px 16px; font-size: .94rem; gap: 10px; }
  .faq-a { padding: 0 16px 16px; }
  .locked-panel { padding: 34px 18px; }
  .modal { padding: 24px 20px 20px; }
}

/* ============================================================ account pages
   The account page is the one screen where signing in is explained rather
   than demanded, so it reads as a single calm card rather than a form wall. */

.acc-link { display: inline-flex; align-items: center; justify-content: center; }

.acc-wrap { max-width: 460px; margin: 0 auto 26px; }

.acc-panel { padding: 26px 24px; }

.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 6px;
}
.acc-head h2 { margin: 0 0 2px; font-size: 1.25rem; }

.acc-tabs {
  display: flex; gap: 6px; padding: 4px;
  background: var(--surface-2); border-radius: 12px; margin-bottom: 16px;
}
.acc-tab {
  flex: 1; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-weight: 600; cursor: pointer;
}
.acc-tab.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.acc-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.acc-why { margin: 0 0 16px; color: var(--ink-2); font-size: .92rem; line-height: 1.65; }

.acc-form { display: grid; gap: 12px; }
.acc-form label {
  display: grid; gap: 6px;
  font-size: .86rem; font-weight: 600; color: var(--ink-2);
}
.acc-form input {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-weight: 400;
}
.acc-form input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

.btn.block, .btn-google.block { width: 100%; justify-content: center; }

/* Google's button, in Google's livery.
   The surface stays white in both themes on purpose: this is the treatment
   people have been trained to trust across every site they sign into, and a
   version restyled to match our palette would lose exactly the recognition
   that makes it worth putting first. */
.btn-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 16px; border: 1px solid #DADCE0; border-radius: 12px;
  background: #FFF; color: #1F1F1F;
  font: inherit; font-weight: 700; font-size: .95rem;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background .15s ease;
}
.btn-google:hover:not(:disabled) { background: #F5F6F7; }
.btn-google:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-google:disabled { opacity: .6; cursor: default; }
.btn-google svg { flex: none; }

.acc-google-note {
  margin: 9px 0 0; text-align: center;
  color: var(--ink-3); font-size: .8rem;
}


.acc-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; color: var(--ink-3); font-size: .82rem;
}
.acc-or::before, .acc-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

.acc-alt { margin: 14px 0 0; text-align: center; }
.link-btn {
  border: 0; background: none; padding: 0;
  color: var(--ink-2); font: inherit; font-size: .86rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

.acc-msg { margin: 14px 0 0; font-size: .88rem; line-height: 1.6; }
.acc-msg.ok  { color: var(--ok, #1A6E54); }
.acc-msg.bad { color: var(--bad, #b3261e); }

.acc-fine { margin: 16px 0 0; text-align: center; }

.acc-sync { margin: 14px 0 18px; color: var(--ink-2); font-size: .9rem; line-height: 1.6; }

.acc-upgrade {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.acc-upgrade p { margin: 0 0 12px; color: var(--ink-2); font-size: .9rem; }

.acc-help { max-width: 620px; margin: 0 auto; padding: 22px 24px; }
.acc-help h2 { margin: 0 0 12px; font-size: 1.05rem; }
.acc-steps { margin: 0 0 14px; padding-inline-start: 20px; display: grid; gap: 9px; }
.acc-steps li { color: var(--ink-2); font-size: .92rem; line-height: 1.65; }
.acc-steps b { color: var(--ink); }

/* ------------------------------------------------------------------- admin */

.admin-table select,
.admin-table input[type="date"] {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .86rem;
}
.admin-table td { vertical-align: middle; }
.admin-table .btn { padding: 7px 14px; font-size: .84rem; }

@media (max-width: 560px) {
  .acc-panel { padding: 20px 17px; }
  .acc-head { flex-direction: column; align-items: flex-start; }
}

/* iOS Safari zooms the whole page when a focused input is under 16px, which
   on a sign-in form throws the layout sideways mid-typing. */
@media (max-width: 820px) {
  .acc-form input,
  .admin-table select,
  .admin-table input[type="date"] { font-size: 16px; }
}

/* The password rule, stated before the server states it in English. */
.acc-hint {
  display: block; margin-top: 2px;
  font-size: .78rem; font-weight: 400; line-height: 1.5; color: var(--ink-3);
}

/* ════════════════════════════════════════════════════════ trial countdown
   Sits under the header, states the time left and what it costs to keep
   going. No countdown theatrics — the number is real and it is the same
   number the database holds. */

.trial-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 16px;
  padding: 9px 18px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  font-size: .88rem; line-height: 1.5;
}
.trial-bar .trial-txt { color: var(--ink-2); }
.trial-bar .trial-txt b { color: var(--ink); font-weight: 700; }

.trial-bar .trial-cta {
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: .84rem; text-decoration: none;
  white-space: nowrap;
}
html[data-theme="dark"] .trial-bar .trial-cta {
  background: var(--signal); color: var(--canvas);
}
.trial-bar .trial-cta:hover { filter: brightness(1.06); }

/* Under a day left: warmer, but still just a fact. */
.trial-bar.urgent { background: var(--warn-bg); border-bottom-color: var(--warn-line); }
.trial-bar.urgent .trial-txt b { color: var(--ink); }

.trial-bar.over { background: var(--surface-2); }
.trial-bar.over .trial-txt b { color: var(--ink); }

@media (max-width: 560px) {
  .trial-bar { padding: 8px 12px; font-size: .82rem; gap: 8px 10px; }
  .trial-bar .trial-cta { padding: 5px 11px; font-size: .78rem; }
}

/* ══════════════════════════════════════════ Schreiben: corrections that teach
   A strikethrough shows that you were wrong. These rows say why, which is the
   part a learner can actually carry into the next sentence. */

.fix-teach {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: grid; gap: 7px;
}
.ft-row { margin: 0; display: grid; gap: 2px; }
.ft-k {
  font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-3); text-transform: uppercase;
}
.ft-v { font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.ft-v b { color: var(--ink); font-weight: 700; }
.ft-de {
  font-family: var(--font-de); direction: ltr; text-align: left;
  display: block; padding: 6px 10px; margin-top: 2px;
  background: var(--surface-2); border-radius: 8px;
  font-size: .88rem; color: var(--ink);
}

@media (max-width: 560px) {
  .ft-v { font-size: .86rem; }
}

/* ═══════════════════════════════════════════ Sprechen: level → Teil → list
   The index used to be the whole catalogue on one screen. Now it asks two
   questions first, and each answer is a large, obvious target. */

.spn-crumbs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 20px; font-size: .88rem;
}
.spn-crumb {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.spn-crumb:hover { color: var(--ink); }
.spn-sep  { color: var(--ink-3); }
.spn-here { font-weight: 700; color: var(--ink); }

.spn-h   { margin: 0 0 6px; font-size: 1.15rem; }
.spn-sub { margin: 0 0 18px; color: var(--ink-2); font-size: .92rem; line-height: 1.65; }

.spn-grid { display: grid; gap: 14px; }
.spn-grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.spn-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.spn-card {
  position: relative;
  display: grid; gap: 7px; justify-items: start;
  padding: 20px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit;
  font: inherit; text-align: start; cursor: pointer;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease), border-color .15s var(--ease);
}
.spn-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--ink-3); }
.spn-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.spn-badge {
  font-family: var(--font-de); font-weight: 700; font-size: .8rem;
  padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-2);
}
.spn-t { font-size: 1.02rem; font-weight: 700; }
.spn-n { font-size: .85rem; color: var(--ink-2); line-height: 1.55; }
.spn-go { position: absolute; inset-inline-end: 16px; bottom: 16px; color: var(--ink-3); }

/* ───────────────────────────── Sprechen leads the level page */

.sp-lead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-2); color: inherit; text-decoration: none;
  transition: transform .12s var(--ease), box-shadow .18s var(--ease);
}
.sp-lead:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.sp-lead-body { flex: 1 1 340px; min-width: 0; }
.sp-lead h2 { margin: 10px 0 6px; font-size: 1.3rem; }
.sp-lead p  { margin: 0; color: var(--ink-2); font-size: .93rem; line-height: 1.7; }
.sp-lead-cta { flex: 0 0 auto; white-space: nowrap; }

/* ═════════════════════════════════════ the primary action on a page
   One obvious next step per screen: bigger target, brand fill, and a lift
   on hover so it reads as pressable rather than decorative. */

.btn.accent {
  background: var(--ink); color: var(--paper);
  border-color: transparent;
  padding: 13px 26px; font-size: 1rem; font-weight: 800;
  border-radius: 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,.10);
}
html[data-theme="dark"] .btn.accent { background: var(--signal); color: var(--canvas); }
.btn.accent:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift, 0 8px 22px rgba(0,0,0,.16)); }
.btn.accent:active { transform: translateY(0); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.btn.accent:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* On a phone the primary action spans the width — it is the thing to press. */
@media (max-width: 560px) {
  .btn.accent { width: 100%; justify-content: center; padding: 14px 20px; }
  .sp-lead { padding: 18px; }
  .sp-lead-cta { width: 100%; }
  .spn-card { padding: 17px 15px; }
}

/* ───────────────────────────── the primary action on a listing page */

.start-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px;
}
.start-note { margin: 0; color: var(--ink-2); font-size: .88rem; line-height: 1.6; flex: 1 1 260px; }

/* The exam's level buttons ARE its start control — choosing a level begins
   the exam — so they read as the primary action rather than as a quiet list. */
.sim-level {
  border-width: 2px !important;
  font-weight: 700;
}
.sim-level b { font-size: 1.15rem; }
.sim-level:hover { box-shadow: var(--shadow); }
.sim-level:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.sim-level::after {
  content: 'ابدأ ←';
  display: block; margin-top: 10px;
  font-size: .84rem; font-weight: 800; color: var(--ink);
}
html[data-theme="dark"] .sim-level::after { color: var(--signal); }

@media (max-width: 560px) {
  /* Gone on a phone. It lives on /uebungen/alle/, which a reader reaches by
     deliberately asking for the whole list — having asked, being offered a
     different way to choose is an interruption, and stacked it cost most of a
     screen before the first exercise. The wide layout keeps it: there it sits
     beside the heading and costs nothing. */
  .start-row { display: none; }
}

/* ════════════════════════════════════════════════ privacy and terms
   Long-form reading: a narrower measure than the app pages, and headings
   that let someone scan for the one section they came for. */

.legal { max-width: 720px; }
.legal-intro {
  margin: 0 0 28px; padding: 16px 18px;
  background: var(--surface-2); border-radius: var(--radius);
  color: var(--ink-2); font-size: .95rem; line-height: 1.8;
}
.legal-s { margin: 0 0 26px; }
.legal-s h2 {
  margin: 0 0 10px; font-size: 1.08rem;
  padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.legal-s p { margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; line-height: 1.85; }
.legal-s p b { color: var(--ink); font-weight: 700; }
.legal-s p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .legal-intro { padding: 14px; font-size: .9rem; }
  .legal-s p { font-size: .92rem; }
}


/* ------------------------------------------------- what the plan opens

   A free account sees five open exercises among forty. Locked cards are
   already dimmed; these are lifted to the front of the grid by paywall.js and
   marked here so the eye lands on them first. The accent edge does the work —
   loud enough to find at a glance, quiet enough that a grid of them is not
   exhausting. */
.card.is-open,
.card.spn-ex.is-open {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.card.is-open:hover,
.card.spn-ex.is-open:hover { border-color: var(--accent); }

.badge.free {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════ pricing: duration cards
   Three lengths of the same subscription. The discounted price is the only
   large element; the old price, the saving and the length are deliberately
   quieter so the eye lands in the same place on all three and comparison is a
   glance rather than a read.

   The glow is Itqan's own signal blue rather than the usual neon green, and it
   is a halo on the card, not a fill: at these sizes a saturated background
   would fight the price sitting on it. It also does the job the middle column
   does on desktop — on a phone the cards stack and "the highlighted one" has
   to survive losing its position. */

.pc-promo {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: fit-content; margin: 0 auto 26px;
  padding: 8px 18px; border-radius: 999px;
  border: 1px solid var(--signal-wash);
  background: var(--signal-wash); color: var(--accent-ink);
  font-size: .82rem; font-weight: 700;
}
.pc-promo-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal-deep);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 30%, transparent);
}

.pc-grid {
  display: grid; gap: 22px; align-items: stretch;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 20px;
}

.pc {
  position: relative;
  display: flex; flex-direction: column;
  padding: 34px 26px 28px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              border-color .35s var(--ease);
}
.pc:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* the recommended card: brighter ground, a real border, and the halo */
.pc.is-rec {
  border-color: color-mix(in srgb, var(--signal-deep) 45%, transparent);
  border-width: 2px;
  padding: 34px 26px 28px;
  box-shadow:
    0 0 60px -14px color-mix(in srgb, var(--signal) 70%, transparent),
    var(--shadow);
}
.pc.is-rec:hover {
  box-shadow:
    0 0 74px -12px color-mix(in srgb, var(--signal) 85%, transparent),
    var(--shadow-lift);
}
.pc.is-best { border-color: color-mix(in srgb, var(--signal) 40%, transparent); }

/* the flag sits on the top edge, so it reads as a label of the card rather
   than a first line inside it */
.pc-flag {
  /* Physical left/-50% on purpose: `inset-inline-start` flips under RTL while
     `translateX` does not, so the logical pair pushed the flag off the card
     instead of centring it. Centring inside a box is not a direction
     question. */
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  padding: 6px 15px; border-radius: 999px;
  background: linear-gradient(135deg, var(--signal-deep), var(--signal));
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--signal-deep) 70%, transparent);
}
.pc-flag.best {
  background: linear-gradient(135deg, var(--canvas), var(--signal-deep));
}

.pc-len {
  margin: 4px 0 4px; font-size: 1.15rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.01em;
}
.pc-for {
  margin: 0 0 18px; min-height: 2.6em;
  font-size: .82rem; line-height: 1.6; color: var(--ink-3);
}

.pc-price { display: flex; align-items: baseline; gap: 7px; }
.pc-price b {
  font-size: 3.4rem; line-height: 1; font-weight: 300;
  color: var(--ink); letter-spacing: -.03em;
}
.pc.is-rec .pc-price b { color: var(--signal-deep); }
.pc-cur { font-size: 1rem; font-weight: 700; color: var(--ink-2); }

.pc-was {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 9px;
}
.pc-was s {
  font-size: .95rem; color: var(--ink-3);
  text-decoration-line: line-through; text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, var(--bad) 65%, transparent);
}
.pc-save {
  padding: 3px 10px; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok);
  font-size: .72rem; font-weight: 800;
}

.pc-rate {
  margin: 10px 0 0; font-size: .8rem; font-weight: 700;
  color: var(--accent-ink);
}

/* Holds the button down without collapsing the gap when a card has no rate
   line, so the three CTAs sit on one line across the row. */
.pc-gap { flex: 1 1 auto; min-height: 22px; }

/* The buy button.
 *
 * A flat gradient pill is a shape; it is not obviously a thing you press.
 * What makes this one read as pressable is the solid lip under it — four
 * pixels of a darker blue, the side of a physical key — which deepens on
 * hover and disappears entirely on :active while the button drops onto it.
 * The press is the affordance: it behaves like a button before it is one.
 *
 * The arrow is the second half. It sits still until the pointer arrives and
 * then slides toward the end of the line (leftward, this being RTL), which
 * says "this goes somewhere" in a way a word alone does not.
 */
.pc-cta {
  position: relative;
  margin-top: auto; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 20px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #1f4a78, var(--signal-deep) 62%, #3f79ad);
  color: #fff;
  box-shadow:
    0 4px 0 #173a60,
    0 12px 24px -12px color-mix(in srgb, var(--signal-deep) 85%, transparent);
  font: inherit; font-weight: 900; font-size: 1rem; letter-spacing: .2px;
  cursor: pointer;
  transition: filter .18s var(--ease), box-shadow .18s var(--ease),
              transform .18s var(--ease);
}
.pc-cta-go {
  font-size: 1.05rem; line-height: 1;
  transition: transform .18s var(--ease);
}
.pc-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #173a60,
    0 18px 30px -12px color-mix(in srgb, var(--signal-deep) 95%, transparent);
}
.pc-cta:hover .pc-cta-go { transform: translateX(-4px); }
/* Pressed: the lip is gone and the button is sitting on the card. */
.pc-cta:active {
  transform: translateY(3px);
  box-shadow:
    0 0 0 #173a60,
    0 6px 14px -10px color-mix(in srgb, var(--signal-deep) 90%, transparent);
}
.pc.is-rec .pc-cta {
  background: linear-gradient(135deg, #15375d, #24547f 60%, #357099);
  box-shadow:
    0 4px 0 #0f2a49,
    0 16px 30px -12px color-mix(in srgb, var(--signal-deep) 95%, transparent);
}
.pc.is-rec .pc-cta:hover {
  box-shadow:
    0 6px 0 #0f2a49,
    0 22px 36px -12px color-mix(in srgb, var(--signal-deep) 100%, transparent);
}
.pc.is-rec .pc-cta:active { box-shadow: 0 0 0 #0f2a49; }
.pc-cta:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: 3px; }
html[data-theme="dark"] .pc-cta { box-shadow: 0 4px 0 #0a2238, 0 12px 24px -12px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .pc-cta:hover { box-shadow: 0 6px 0 #0a2238, 0 18px 30px -12px rgba(0, 0, 0, .7); }
html[data-theme="dark"] .pc-cta:active { box-shadow: 0 0 0 #0a2238; }

.pc-under {
  margin: 4px 0 34px; text-align: center;
  font-size: .88rem; line-height: 1.7; color: var(--ink-2);
}
.pc-under a { font-weight: 700; }

@media (max-width: 900px) {
  .pc-grid { grid-template-columns: 1fr; gap: 26px; max-width: 420px; margin-inline: auto; }
  .pc-for { min-height: 0; }
  .pc-price b { font-size: 3rem; }
}

/* What every plan opens. One list, sitting under the three cards and headed by
   the reason it is one list — the durations differ in length and in nothing
   else. Two columns on desktop so eight lines do not become a scroll; one on a
   phone, where a second column would halve the reading width. */
.pc-incl {
  margin: 0 0 34px; padding: 26px 26px 22px;
  border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface);
}
.pc-incl-h {
  margin: 0 0 18px; font-size: 1rem; font-weight: 800;
  color: var(--ink); text-align: center; letter-spacing: -.01em;
}
.pc-incl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pc-incl-list li { display: flex; gap: 10px; align-items: flex-start; }
.pc-incl-list b {
  display: block; font-size: .9rem; font-weight: 700; color: var(--ink);
}
.pc-incl-list em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: .78rem; line-height: 1.6; color: var(--ink-3);
}
.pc-tick {
  flex: none; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ok-bg); color: var(--ok);
  font-size: .68rem; font-weight: 900;
}
.pc-incl-foot {
  margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  text-align: center; font-size: .86rem; color: var(--ink-2);
}
.pc-incl-foot a { font-weight: 700; }

@media (max-width: 700px) {
  .pc-incl { padding: 22px 18px 18px; }
  .pc-incl-list { grid-template-columns: 1fr; gap: 13px; }
}

/* ═══════════════════════════════════════════════ registration, in place
   The sign-up modal and the banner that opens it. The modal reuses the
   account page's form styles (.acc-form, .acc-or, .acc-msg, .btn-google) so
   the two surfaces cannot drift apart visually either. */

/* Smaller and quieter now that it carries only the form. The width comes
   down from 420 to 356 and the padding with it, so on a phone the email
   field is on screen when the panel opens instead of below the pitch. */
.su-modal {
  max-width: 356px;
  padding: 22px 20px 20px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 18px 44px rgb(0 0 0 / .18);
}
.su-modal h2 { margin: 0 0 5px; font-size: 1.08rem; letter-spacing: -.01em; }
.su-why {
  margin: 0 0 9px; font-size: .86rem; line-height: 1.6; color: var(--ink-2);
}
/* A note, not a callout: no filled panel, just a tinted rule beside it. */
.su-perk {
  margin: 0 0 14px; padding: 0 0 0 0;
  padding-inline-start: 10px;
  border-inline-start: 2px solid color-mix(in srgb, var(--signal) 40%, transparent);
  background: none; color: var(--ink-3);
  font-size: .78rem; line-height: 1.6; font-weight: 500;
}
.su-embed {
  margin: 0 0 16px; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface-2); color: var(--ink-2);
  font-size: .84rem; line-height: 1.7;
}
.su-alt { margin: 14px 0 0; text-align: center; font-size: .86rem; color: var(--ink-2); }
.su-alt a { font-weight: 700; }
.su-modal .acc-form { margin-top: 4px; }

/* the banner */
.su-banner {
  position: relative;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 15px 44px 15px 18px;
  border: 1px solid color-mix(in srgb, var(--signal) 45%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--signal-wash) 80%, var(--surface)),
              var(--surface));
  box-shadow: 0 0 34px -18px color-mix(in srgb, var(--signal) 70%, transparent);
}
.su-banner-t { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.su-banner-t b { font-size: .96rem; color: var(--ink); }
.su-banner-t span { font-size: .82rem; color: var(--ink-2); }
.su-banner-cta { flex: none; }
.su-banner-x {
  position: absolute; top: 8px; inset-inline-end: 10px;
  border: 0; background: none; cursor: pointer;
  color: var(--ink-3); font-size: .9rem; line-height: 1;
  padding: 4px 6px; border-radius: 6px;
}
.su-banner-x:hover { color: var(--ink); background: var(--surface-2); }

@media (max-width: 560px) {
  .su-banner { padding: 14px 40px 14px 14px; gap: 12px; }
  .su-banner-cta { width: 100%; justify-content: center; }
}

/* ── The bonus month ────────────────────────────────────────────────
 * A badge on the two month plans — the offer is the same on both, so
 * the badge is identical on each.
 *
 * Amber, not green: the page is cream and deep navy, and a web-green
 * pill sat outside that palette while a 14%-opacity wash of it barely
 * showed against the card at all. This is the same --sun the site
 * already spends on Itqan+ — the colour it uses for something given
 * rather than sold — filled solid so it carries on cream.
 *
 * Dark mode is html[data-theme="dark"] here, not prefers-color-scheme;
 * the toggle in the header sets it, so a media query would miss it.
 */
.pc-bonus {
  align-self: center;
  margin: 2px 0 6px;
  padding: 5px 14px; border-radius: 999px;
  background: linear-gradient(135deg, var(--sun, #f6a723), #e2890b);
  border: 0;
  color: #3a2600;
  font-size: .78rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 4px 12px -6px color-mix(in srgb, #e2890b 85%, transparent);
}

html[data-theme="dark"] .pc-bonus {
  color: #2a1b00;
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--sun, #f6a723) 70%, transparent);
}
/* ── The bonus-month promo, above the pricing title ──────────────────
 * One object carries the offer: a medal reading +1 شهر, which is the
 * whole argument at a glance. The copy sits beside it, and three small
 * sparks twinkle around it — the only part here that is purely mood.
 *
 * Both themes are written out rather than inherited: the card is amber
 * on cream and amber on deep navy, and the medal keeps its warm face in
 * both so the happy thing stays the brightest thing on the page.
 *
 * Dark mode is html[data-theme="dark"] here, which is what the header
 * toggle sets; a prefers-color-scheme query would never fire.
 */
.offer-promo {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 16px;
  max-width: 36rem; margin: 0 auto 18px;
  padding: 16px 22px; border-radius: 20px;
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in srgb, var(--sun, #f6a723) 26%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--sun, #f6a723) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--sun, #f6a723) 46%, transparent);
  box-shadow: 0 10px 30px -22px color-mix(in srgb, #e2890b 90%, transparent);
  text-align: start;
}

/* The gift. It opens on a loop and a +1 rises out of it — the offer as
   something happening rather than something written. The lid and the box
   are separate groups so only the lid moves, which is what reads as
   opening; moving the whole glyph just reads as a wobble. */
.op-gift {
  position: relative; flex: 0 0 auto;
  width: 66px; height: 66px;
  color: var(--sun, #f6a723);
  filter: drop-shadow(0 6px 12px color-mix(in srgb, #e2890b 40%, transparent));
}
.op-gift-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.op-gift-lid { transform-origin: 32px 29px; }

/* The thing that comes out. Starts hidden inside the box and is clipped by
   nothing — it simply fades in as it rises, so it reads as released. */
.op-pop {
  position: absolute; inset-inline-start: 50%; top: 10px;
  transform: translate(-50%, 0) scale(.6);
  padding: 2px 9px; border-radius: 999px;
  background: linear-gradient(145deg, #ffc558, var(--sun, #f6a723) 55%, #e2890b);
  color: #3a2600; font-size: .78rem; font-weight: 900; line-height: 1.5;
  box-shadow: 0 4px 10px -4px color-mix(in srgb, #e2890b 85%, transparent);
  opacity: 0; pointer-events: none; white-space: nowrap;
}

.op-copy { min-width: 0; }
.op-head {
  margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.35;
  color: var(--ink);
}
.op-head b { color: var(--gold-ink, #8a5a06); font-weight: 900; }

/* Mood. Three dots that twinkle on their own clocks, so the card never
   pulses as one block — that reads mechanical rather than cheerful. */
.op-spark {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sun, #f6a723);
  opacity: 0; pointer-events: none;
}
.op-spark.s1 { top: 14px; inset-inline-end: 22%; }
.op-spark.s2 { bottom: 16px; inset-inline-end: 12%; width: 5px; height: 5px; }
.op-spark.s3 { top: 22px; inset-inline-end: 6%; width: 4px; height: 4px; }

html[data-theme="dark"] .offer-promo {
  background:
    radial-gradient(120% 140% at 100% 0%,
      color-mix(in srgb, var(--sun, #f6a723) 22%, transparent) 0%, transparent 62%),
    color-mix(in srgb, var(--sun, #f6a723) 8%, var(--canvas-2, #0E1E2C));
  border-color: color-mix(in srgb, var(--sun, #f6a723) 40%, transparent);
}
html[data-theme="dark"] .op-head b { color: var(--sun, #f6a723); }

@media (prefers-reduced-motion: no-preference) {
  /* One 3.6s cycle, shared: the lid lifts, the +1 rises out, the box
     settles. Each part keys off the same duration so the box is never
     open while nothing is coming out of it. */
  .op-gift-lid { animation: opLid 3.6s ease-in-out infinite; }
  .op-gift-box { animation: opBox 3.6s ease-in-out infinite; }
  .op-pop { animation: opRelease 3.6s ease-out infinite; }
  .op-spark.s1 { animation: opTwinkle 2.6s ease-in-out infinite .2s; }
  .op-spark.s2 { animation: opTwinkle 3.1s ease-in-out infinite 1.1s; }
  .op-spark.s3 { animation: opTwinkle 2.2s ease-in-out infinite 1.8s; }
  .hl-telc {
    animation: opSweepWord 4.2s ease-in-out infinite,
               opWordLift 4.2s ease-in-out infinite,
               opWordHeat 4.2s ease-in-out infinite;
  }
  .hl-telc::after { animation: opWordShine 4.2s ease-in-out infinite; }
  /* The card badges breathe, a little out of step with each other so the
     row never pulses as one block. */
  .pc-bonus { animation: opBadge 3.2s ease-in-out infinite; }
  .pc.is-best .pc-bonus { animation-delay: .9s; }
}
@keyframes opWordShine {
  0%, 30% { transform: translateX(-130%); }
  62%, 100% { transform: translateX(130%); }
}
/* The red brightens as the band lands and cools again — the colour is
   the thing being animated, not just the box behind it. */
@keyframes opWordHeat {
  0%, 22% { color: #1f4a78; text-shadow: none; }
  38% { color: #2f5f94; text-shadow: 0 0 14px color-mix(in srgb, #2f5f94 48%, transparent); }
  70%, 100% { color: #1f4a78; text-shadow: none; }
}
html[data-theme="dark"] .hl-telc { animation-name: opSweepWord, opWordLift, opWordHeatDark; }
@keyframes opWordHeatDark {
  0%, 22% { color: #9ed4ee; text-shadow: none; }
  38% { color: #c7e8f7; text-shadow: 0 0 16px color-mix(in srgb, #7fc0dc 55%, transparent); }
  70%, 100% { color: #9ed4ee; text-shadow: none; }
}
@keyframes opWordLift {
  0%, 24%, 100% { transform: translateY(0); }
  34% { transform: translateY(-2px); }
  46% { transform: translateY(0); }
}
@keyframes opBadge {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px -6px color-mix(in srgb, #e2890b 85%, transparent); }
  50% { transform: scale(1.045); box-shadow: 0 7px 18px -6px color-mix(in srgb, #e2890b 95%, transparent); }
}
@keyframes opLid {
  0%, 12% { transform: translateY(0) rotate(0deg); }
  26% { transform: translateY(-9px) rotate(-7deg); }
  52% { transform: translateY(-9px) rotate(-7deg); }
  70%, 100% { transform: translateY(0) rotate(0deg); }
}
@keyframes opBox {
  0%, 18% { transform: translateY(0); }
  28% { transform: translateY(2px); }
  70%, 100% { transform: translateY(0); }
}
@keyframes opRelease {
  0%, 20% { opacity: 0; transform: translate(-50%, 10px) scale(.5); }
  34% { opacity: 1; transform: translate(-50%, -14px) scale(1.06); }
  54% { opacity: 1; transform: translate(-50%, -17px) scale(1); }
  68%, 100% { opacity: 0; transform: translate(-50%, -24px) scale(.9); }
}
@keyframes opTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45% { opacity: .95; transform: scale(1); }
}

/* The one lit word in the title. The band is a background whose width is
   animated, so the highlight draws itself across the word every few
   seconds and then rests lit — a sweep that ended empty would leave the
   word looking unstyled half the time. Both themes set their own band;
   the dark one is weaker because it sits on navy, not cream. */
.hl-telc {
  font-style: normal; font-weight: 900;
  color: #1f4a78;
  background-image: linear-gradient(to top,
    color-mix(in srgb, var(--signal-deep) 36%, transparent) 0 40%,
    transparent 40%);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100% 100%;
  padding-inline: 4px; border-radius: 3px;
  position: relative; display: inline-block;
}
/* The shine. A narrow light crossing the word after the band lands, so the
   highlight has a moment of its own rather than only appearing. Clipped to
   the word's own box, and purely decorative — it carries no meaning. */
.hl-telc::after {
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  background: linear-gradient(100deg, transparent 28%,
    color-mix(in srgb, #fff 60%, transparent) 50%, transparent 72%);
  transform: translateX(-130%);
  pointer-events: none; opacity: .6;
}
html[data-theme="dark"] .hl-telc {
  /* Lighter than the cream theme's blue: #1f4a78 on navy is close to
     unreadable, and the band has to lift off a dark ground rather than
     sit on a pale one. */
  color: #9ed4ee;
  background-image: linear-gradient(to top,
    color-mix(in srgb, #7fc0dc 30%, transparent) 0 40%,
    transparent 40%);
}
@keyframes opSweepWord {
  0% { background-size: 0 100%; }
  26%, 100% { background-size: 100% 100%; }
}

@media (max-width: 480px) {
  .offer-promo { padding: 14px 16px; gap: 12px; border-radius: 16px; }
  .op-gift { width: 56px; height: 56px; }
  .op-pop { font-size: .72rem; }
  .op-head { font-size: .98rem; }
}


/* ── The level picker, lifted above the section tabs ─────────────────
 * It used to sit inside .spn-nav with the Teil strip; on its own row it
 * needs its own breathing space, and centring it keeps it from reading
 * as part of the tab strip underneath.
 */
.uex-lvltop {
  display: flex; justify-content: center;
  margin: 2px 0 12px;
}

/* ── The trust band ──────────────────────────────────────────────────
 * Three numbers, three promises, and a line saying where the numbers
 * come from. It is deliberately quiet: a band that shouts reads as
 * marketing, and the job here is the opposite of marketing.
 *
 * The dotted ground is the site's own paper texture rather than a
 * borrowed pattern, and the stats are separated by hairlines instead
 * of cards — three cards would make three claims compete.
 */
.trust {
  margin: 34px 0;
  padding: 30px 0 28px;
  /* The site's own paper, not a tinted panel. The band earns its
     separation from the hairlines above and below it; a different
     ground made it look like something pasted onto the page. */
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.trust-in { text-align: center; }

.trust-pill {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 6px 15px; border-radius: 999px;
  background: color-mix(in srgb, #15803d 12%, transparent);
  color: #15803d; font-size: .8rem; font-weight: 800;
}
.trust-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 70%, transparent);
}
.trust-h { margin: 0; font-size: clamp(1.4rem, 3.2vw, 1.9rem); line-height: 1.3; }
.trust-sub { margin: 7px 0 0; color: var(--ink-2); font-size: .95rem; }

/* A grid, not a flex row: three equal columns keep B1 & B2 in the middle
   at every width, where a wrapping flex row could drop the third stat onto
   its own line and leave the middle one looking like the last. */
.trust-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; margin: 22px auto 0; max-width: 46rem;
}
.trust-stat {
  padding: 2px 16px;
  border-inline-start: 1px solid var(--line);
}
.trust-stat:first-child { border-inline-start: 0; }
/* Centre the whole column, number and label alike.
 *
 * The number carries lang="de" so the B1 & B2 one renders in the German
 * face — and the global [lang="de"] rule also sets direction: ltr and
 * text-align: start, which in an RTL column pins that number to the left
 * while its Arabic label stays centred. The two then read as belonging to
 * different columns. Stating the alignment here beats dropping the lang
 * attribute, which would change the typeface. */
.trust-stat, .trust-n, .trust-l { text-align: center; }
.trust-n {
  display: block; font-size: clamp(1.6rem, 4.4vw, 2.2rem);
  font-weight: 900; line-height: 1.15; color: var(--ink);
}
.trust-stat:nth-child(2) .trust-n { color: #15803d; }
.trust-l { display: block; margin-top: 4px; font-size: .84rem; color: var(--ink-3); }

.trust-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 10px; margin: 22px 0 0; padding: 0; list-style: none;
}
.trust-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 70%, #fff);
  border: 1px solid var(--line);
  color: var(--ink-2); font-size: .82rem; font-weight: 700;
}
.trust-chip-i { display: grid; place-items: center; color: #15803d; }
.trust-chip-i svg { width: 16px; height: 16px; display: block; }


html[data-theme="dark"] .trust { background: var(--paper); }
html[data-theme="dark"] .trust-chip {
  background: color-mix(in srgb, #fff 5%, transparent);
}
html[data-theme="dark"] .trust-pill { color: #86efac; }
html[data-theme="dark"] .trust-stat:nth-child(2) .trust-n { color: #86efac; }

/* The dot is alive, because the sentence beside it is in the present
   tense. Everything else in the band is still. */
@media (prefers-reduced-motion: no-preference) {
  .trust-dot { animation: trustPing 2.4s ease-out infinite; }
}
@keyframes trustPing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #22c55e 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}

@media (max-width: 560px) {
  .trust { margin: 26px 0; padding: 24px 0 22px; }
  .trust-stats { grid-template-columns: 1fr; }
  .trust-stat { border-inline-start: 0; padding: 8px 0; }
  .trust-stat + .trust-stat { border-top: 1px solid var(--line); }
  .trust-chip { font-size: .78rem; padding: 6px 12px; }
}