/* =====================================================================
   Home page on phones — templates/site/home/_mobile.html (rebuilt
   2026-10-25 from research, see _concepts/mobile-landing-research.md).
   Shown instead of the laptop sections (.hx-desk) at 700px and below;
   above that, .hm is hidden and none of the phone rules apply, except on
   a phone turned sideways (a touch screen under 500px tall), which keeps
   this design instead of getting the laptop page: one iPhone experience
   in either orientation. The query, used throughout:
     (max-width: 700px), (max-height: 500px) and (pointer: coarse)

   Built as a small design system: tokens first, then a handful of
   components, then the page. Everything on the phone page draws from the
   same tokens, including the pieces it borrows (the Exam Coach demo from
   home.css, the site menu and header, the cookie notice, the assistant's
   button), so one button, one chip, one tag and one row look and behave
   the same everywhere. Black, white and neutral greys; sentence-case
   labels; no outlined pills, decorative icons, glow, frosted or floating
   panels. Site colours come from site.css (dark by default, light via the
   toggle); logical properties so Arabic mirrors.
   ===================================================================== */

/* ---------- tokens ---------- */
[data-page="home"] {
  /* type: one scale, eight sizes */
  --mp-t-display: 40px;   /* the headline */
  --mp-t-title: 36px;     /* section heads (serif) */
  --mp-t-head: 20px;      /* a card's title */
  --mp-t-lead: 17px;      /* intro text, buttons, row titles */
  --mp-t-body: 15.5px;    /* reading text */
  --mp-t-small: 14px;     /* chips, secondary text */
  --mp-t-cap: 13px;       /* labels, fine print, hints */
  --mp-t-micro: 12px;     /* tags */
  /* sizes: three control heights, two radii, two icon sizes */
  --mp-h-btn: 52px;       /* primary and secondary buttons */
  --mp-h-ctl: 44px;       /* chips, choice rows, small buttons: the touch minimum */
  --mp-h-row: 56px;       /* disclosure rows */
  --mp-r-card: 14px;
  --mp-r-in: 10px;        /* anything inside a card */
  --mp-ic: 16px;
  --mp-ic-l: 20px;
  /* lines and fills */
  --mp-line: var(--rule);
  --mp-line-2: var(--rule-2);
  --mp-fill: color-mix(in srgb, var(--ink) 7%, transparent);
  --mp-fill-2: color-mix(in srgb, var(--ink) 13%, transparent);
  --mp-card-bg: var(--sheet);
  /* motion: one curve, two speeds. --mp-dur when a control changes state
     (selected, on, off) and when something leaves, --mp-dur-2 when content
     arrives (a reply, an opened answer, a new step, the menu, the chat
     sheet): leaving is quicker than arriving. Opacity and transform only:
     nothing eases its height or slides the page. */
  --mp-ease: cubic-bezier(.2, .7, .2, 1);
  --mp-dur: .16s;
  --mp-dur-2: .24s;
  --mp-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  /* the page's side edge: the header, menu and footer share it */
  --mp-g: 20px;
}
:root[data-theme="light"] [data-page="home"] { --mp-card-bg: var(--paper-2); }

.hm { display: none; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .hx-desk { display: none; }
  .hm { display: block; }
  /* the page's own buttons carry "Start free", so the header offers "Log in" */
  [data-page="home"] .nav-right > .btn { display: none; }
  /* content first: no logo splash, no back-to-top button over the text */
  [data-page="home"] .ac-arrival { display: none !important; }
  html[data-arrival] [data-page="home"] .nav { animation: none !important; }
  [data-page="home"] .ac-top { display: none !important; }
}

.hm {
  --g: var(--mp-g);     /* side gutter */
  --gap: 64px;          /* between sections */
  /* spacing inside a section: heading → its paragraph 12 · heading or
     paragraph → the main block 24 · block → a button or row 24 · block → a
     quiet line under it 12 · inside a card 16 · card padding 20 */
  --sp-line: 12px;
  --sp-block: 24px;
  --sp-in: 16px;
  --pad: 20px;
  overflow-x: clip;
  padding: 0 var(--g);
  /* on a wide phone (landscape, or a big Android) the column stays a
     readable width instead of stretching edge to edge */
  max-width: 600px;
  margin: 0 auto;
}
.hm :where(ul, ol, p, h1, h2, h3, h4, figure) { margin: 0; padding: 0; list-style: none; }
.hm [hidden] { display: none !important; }
.hm .ic { width: var(--mp-ic); height: var(--mp-ic); flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm em { font-style: italic; }
/* text: 1.5 for reading, 1.3 for titles; paragraphs and list items never
   end on a lone word. The typo filter (app.py) does the rest: curly
   apostrophes, a number kept with its word, French ? ! : kept with theirs. */
.hm { line-height: 1.5; }
.hm :is(p, li, mark, summary span, .mp-rows b, .mp-rows span) { text-wrap: pretty; }
/* icons: one line weight, 1.5px on screen at every size (arrows, ticks,
   the demo's checks and arrows, the plus and minus, the footer's globe) */
.hm .ic, .hm .mp-demo .hxe .ic { stroke-width: 1.5px; }
.hm .ic *, .hm .mp-demo .hxe .ic * { vector-effect: non-scaling-stroke; }

/* ======================================================= components */

/* primary button: the one filled action, full width */
.mp-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; height: var(--mp-h-btn); margin-top: var(--sp-block);
  border: 0; border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 var(--mp-t-lead)/1 var(--sans); letter-spacing: -.01em; text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: transform var(--mp-dur) var(--mp-ease), opacity var(--mp-dur);
}
/* a press shows at once (no transition on the way in) and eases back on
   release; home-m.js adds the touch listener iOS needs for :active */
.mp-btn:active { transform: scale(.985); opacity: .88; transition-duration: 0s; }
/* chip: a choice you tap (the lesson's answers, the demo's subjects and topics) */
.mp-chips button, .mp-demo .hxe .hxe-chip, .mp-demo .hxe .hxe-topics .hxe-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: var(--mp-h-ctl); height: auto; padding: 8px 15px;
  border: 1px solid var(--mp-line-2); border-radius: 999px; background: transparent; box-shadow: none; color: var(--ink);
  font: 500 var(--mp-t-small)/1.25 var(--sans); text-align: start; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--mp-dur), border-color var(--mp-dur), color var(--mp-dur), transform var(--mp-dur);
}
.mp-chips button:active, .mp-demo .hxe .hxe-chip:active { transform: scale(.98); transition-duration: 0s; }
.mp-chips button[aria-pressed="true"], .mp-demo .hxe .hxe-chip[aria-checked="true"], .mp-demo .hxe .hxe-chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper); box-shadow: none;
}
.mp-chips button.is-ghost, .mp-demo .hxe .hxe-app .hxe-chip { border-style: dashed; color: var(--ink-3); }
.mp-chips button.is-ghost[aria-pressed="true"] { border-style: solid; color: var(--paper); }
.mp-demo .hxe .hxe-app .hxe-chip[aria-pressed="true"] { background: transparent; border-style: solid; color: var(--ink); }
/* tag: a small fact about something, never tappable */
.mp-t, .mp-demo .hxe .hxe-tag, .mp-demo .hxe .hxe-ex {
  position: static; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px;
  border: 0; border-radius: 999px; background: var(--mp-fill); box-shadow: none;
  font: 500 var(--mp-t-micro)/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.mp-t-ok { background: var(--mp-fill-2); color: var(--ink); }
.mp-demo .hxe .hxe-tag i { width: 6px; height: 6px; }
/* label: names a part of something, sentence case */
.mp-label, .mp-band h4, .mp-demo .hxe .hxe-k, .mp-demo .hxe .hxe-flash small, .mp-demo .hxe .hxe-guide .label {
  font: 500 var(--mp-t-cap)/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3);
}
/* links: inline links underline; a standalone link carries a small arrow */
.mp-fine a, .mp-demo .hxe .hxe-foot a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--mp-line-2); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.mp-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--mp-h-ctl); margin-top: 6px; font: 500 var(--mp-t-body)/1.3 var(--sans); color: var(--ink); text-decoration: none; }
/* text you tap (links, disclosure rows) dims while pressed */
.mp-fine a, .mp-link, .mp-faq summary, .mp-demo > summary, .mp-demo .hxe :is(.hxe-foot a, .hxe-note a) { transition: opacity var(--mp-dur) var(--mp-ease); }
.mp-fine a:active, .mp-link:active, .mp-faq summary:active, .mp-demo > summary:active, .mp-demo .hxe :is(.hxe-foot a, .hxe-note a):active { opacity: .55; transition-duration: 0s; }
[dir="rtl"] .mp-link .ic { transform: scaleX(-1); }
/* disclosure row: a hairline row with a plus that becomes a minus */
.mp-faq summary, .mp-demo > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--mp-h-row);
  padding: 14px 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mp-faq summary::-webkit-details-marker, .mp-demo > summary::-webkit-details-marker { display: none; }
.mp-demo > summary i, .mp-faq summary i { position: relative; flex: none; width: var(--mp-ic-l); height: var(--mp-ic-l); }
.mp-demo > summary i::before, .mp-demo > summary i::after, .mp-faq summary i::before, .mp-faq summary i::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; border-radius: 2px; background: var(--ink);
}
/* the plus turns into a minus: its upright bar rotates down onto the other */
.mp-demo > summary i::after, .mp-faq summary i::after { transform: rotate(90deg); transition: transform var(--mp-dur-2) var(--mp-ease); }
.mp-demo[open] > summary i::after, .mp-faq details[open] summary i::after { transform: rotate(180deg); }
/* what opens fades in where it is; the row itself never moves */
.mp-demo[open] > :not(summary), .mp-faq details[open] > :not(summary) { animation: mp-in var(--mp-dur-2) var(--mp-ease) both; }
/* card: a quiet fill; nothing inside it gets a second card */
.mp-card { margin-top: var(--sp-block); border-radius: var(--mp-r-card); background: var(--mp-card-bg); }
/* focus: one visible ring for every interactive thing */
.hm :is(a, button, summary):focus-visible { outline: none; box-shadow: var(--mp-focus); border-radius: 999px; }
.hm summary:focus-visible, .hm .mp-link:focus-visible { border-radius: 6px; }

/* ======================================================= the page */

/* shared text */
.mp-h2 { font: 400 var(--mp-t-title)/1.06 var(--serif); letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.mp-h2 em { color: var(--ink-2); }
/* a heading's italic phrase stays whole ("Then revise / the way that
   works.", not "Then revise the / way that works."). Measured in all five
   languages: every phrase fits a line from 340px up except the pricing
   heading's, which is a sentence and wraps normally. */
@media (min-width: 340px) { .mp-h2:not(#mp-plans-h) em { white-space: nowrap; } }
.mp-p { margin-top: var(--sp-line) !important; font-size: var(--mp-t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.mp-sec { margin-top: var(--gap); }
.mp-fine { margin-top: var(--sp-line) !important; text-align: center; font-size: var(--mp-t-cap); line-height: 1.5; color: var(--ink-3); }
.mp-c { text-align: center; }

/* 1 · hero */
.mp-hero { position: relative; padding-top: 36px; text-align: center; }
.mp-h1 { max-width: 350px; margin: 0 auto !important; font: 650 var(--mp-t-display)/1.05 var(--sans); letter-spacing: -.036em; text-wrap: balance; color: var(--ink); }
.mp-h1 em { font: italic 400 1.12em/1 var(--serif); letter-spacing: -.01em; }
/* English breaks as "Ask anything. / It explains it / until it clicks."
   (balance can't cross the <br>); other languages wrap on their own */
html[lang="en"] .mp-h1 { max-width: 7.2em; }
.mp-sub { margin: var(--sp-in) auto 0 !important; max-width: 34ch; font-size: var(--mp-t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

/* 2 · the example lesson */
.mp-lead { margin-top: 32px; }
.mp-lead .mp-lesson { margin-top: 0; }
.mp-hint { margin-top: var(--sp-line) !important; text-align: center; font-size: var(--mp-t-cap); color: var(--ink-4); }
.mp-lesson { padding: var(--pad); }
.mp-lesson-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--mp-line); }
.mp-lesson-bar b { font-size: var(--mp-t-small); font-weight: 600; line-height: 1.3; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-me { margin: var(--sp-in) 0 0 auto !important; width: fit-content; max-width: 86%; padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--mp-fill); font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink); }
[dir="rtl"] .mp-me { margin: var(--sp-in) auto 0 0 !important; border-radius: 18px 18px 18px 4px; }
.mp-ai { margin-top: var(--sp-in); display: grid; gap: 10px; font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }
.mp-ai b { color: var(--ink); font-weight: 600; }
.mp-ask { color: var(--ink) !important; font-weight: 600; }
.mp-chips { margin-top: var(--sp-in); display: flex; flex-wrap: wrap; gap: 8px; }
.mp-reply .mp-r { padding-top: var(--sp-in); margin-top: var(--sp-in); border-top: 1px solid var(--mp-line); }
.mp-reply .mp-r:not([hidden]) { animation: mp-in var(--mp-dur-2) var(--mp-ease) both; }
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* the page's two entrances: a short fade with a 4px settle for something
   new appearing, a plain fade for content swapped in place */
@keyframes mp-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }

/* 3 · why not a chatbot: plain rows */
.mp-rows { margin-top: var(--sp-block) !important; border-top: 1px solid var(--mp-line); }
.mp-rows li { display: grid; gap: 4px; padding: var(--sp-in) 0; border-bottom: 1px solid var(--mp-line); }
.mp-rows b { font-size: var(--mp-t-lead); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); }
.mp-rows span { font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }

/* 4 · revise */
.mp-plan { padding: var(--pad); }
.mp-plan-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }   /* the date drops under the title when both don't fit */
.mp-plan-head b { font-size: var(--mp-t-lead); font-weight: 600; line-height: 1.3; color: var(--ink); }
.mp-plan-head span { display: inline-block; font-size: var(--mp-t-cap); color: var(--ink-3); white-space: nowrap; }
.mp-plan-head span::first-letter { text-transform: uppercase; }
.mp-topic { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-top: var(--sp-in); padding-top: 14px; border-top: 1px solid var(--mp-line); }
.mp-topic b { font-size: var(--mp-t-body); font-weight: 600; line-height: 1.3; color: var(--ink); }
.mp-src { font-size: var(--mp-t-cap); color: var(--ink-3); }
.mp-acts { margin-top: 8px !important; display: flex; flex-wrap: wrap; row-gap: 2px; font-size: var(--mp-t-small); color: var(--ink-2); }
.mp-acts li + li::before { content: "·"; margin: 0 7px; color: var(--ink-4); }
.mp-demo { margin-top: var(--sp-block); border-top: 1px solid var(--mp-line); border-bottom: 1px solid var(--mp-line); }
.mp-demo > summary span { display: grid; gap: 4px; }
.mp-demo > summary b { font-size: var(--mp-t-lead); font-weight: 600; line-height: 1.3; color: var(--ink); }
.mp-demo > summary small { font-size: var(--mp-t-cap); color: var(--ink-3); }

/* the Exam Coach demo (home.css) on the same components: no second heading,
   no laptop tilt, no card inside a card, the same tabs, rows and buttons */
.mp-demo .hxe { padding: 0 0 20px !important; margin: 0 !important; background: none !important; }
.mp-demo .hxe .hx-wrap { padding: 0 !important; max-width: none !important; }
.mp-demo .hxe-head { display: none !important; }
.mp-demo .hxe [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
.mp-demo .hxe .hxe-card {
  translate: none !important; scale: none !important; rotate: none !important; opacity: 1 !important;
  margin-top: var(--sp-in); padding: var(--pad); border-radius: var(--mp-r-card); background: var(--mp-card-bg); box-shadow: none;
}
.mp-demo .hxe .hxe-ex { position: absolute; top: var(--pad); inset-inline-end: var(--pad); }
.mp-demo .hxe .hxe-q { font: 600 var(--mp-t-lead)/1.3 var(--sans); letter-spacing: -.01em; padding-inline-end: 92px; }
.mp-demo .hxe .hxe-hint, .mp-demo .hxe .hxe-sub { font-size: var(--mp-t-small); color: var(--ink-3); }
.mp-demo .hxe .hxe-k { margin: var(--sp-in) 0 10px; }
/* segmented tabs: the steps and the activity bar */
.mp-demo .hxe .hxe-steps, .mp-demo .hxe .hxe-seg {
  width: 100%; margin: var(--sp-in) 0 0; padding: 3px; gap: 2px; border-radius: 999px; background: var(--mp-fill); box-shadow: none;
}
.mp-demo .hxe .hxe-steps button, .mp-demo .hxe .hxe-seg button {
  flex: 1 1 0; justify-content: center; gap: 6px; height: var(--mp-h-ctl); padding: 0 10px; border-radius: 999px;
  font: 500 var(--mp-t-small)/1 var(--sans); color: var(--ink-3); box-shadow: none;
}
.mp-demo .hxe .hxe-seg button { flex: 1 1 auto; padding: 0 6px; font-size: var(--mp-t-cap); white-space: normal; line-height: 1.1; text-align: center; }
/* a long activity name ("Práctica de examen", "Entraînement à l'examen")
   takes two short lines instead of being cut off by the card's edge */
.mp-demo .hxe .hxe-steps b { width: auto; height: auto; box-shadow: none; background: none !important; color: inherit !important; font: 500 var(--mp-t-cap)/1 var(--sans); }
.mp-demo .hxe .hxe-steps [aria-selected="true"], .mp-demo .hxe .hxe-seg [aria-selected="true"] { background: var(--mp-card-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--mp-line); }
.mp-demo .hxe .hxe-steps button[disabled] { opacity: 1; color: var(--ink-4); }
/* choice rows: where you study, and the quiz's answers */
.mp-demo .hxe .hxe-opts { grid-template-columns: 1fr; gap: 8px; }
.mp-demo .hxe .hxe-opt small { display: none; }
.mp-demo .hxe .hxe-flash { height: 168px; }
.mp-demo .hxe .hxe-opt, .mp-demo .hxe .hxe-quiz button {
  min-height: var(--mp-h-ctl); padding: 11px 40px 11px 14px; border: 1px solid var(--mp-line-2); border-radius: var(--mp-r-in);
  background: transparent; box-shadow: none; animation: none !important; font-size: var(--mp-t-body);
}
.mp-demo .hxe .hxe-quiz button { padding-inline-end: 14px; }
.mp-demo .hxe .hxe-opt b { font: 600 var(--mp-t-body)/1.25 var(--sans); }
.mp-demo .hxe .hxe-opt i { top: 50%; margin-top: -9px; width: 18px; height: 18px; }
.mp-demo .hxe .hxe-opt[aria-checked="true"], .mp-demo .hxe .hxe-quiz .ok { border-color: var(--ink); background: var(--mp-fill); box-shadow: none; }
.mp-demo .hxe .hxe-quiz i { width: auto; height: auto; box-shadow: none !important; background: none !important; color: var(--ink-3); font: 500 var(--mp-t-cap)/1 var(--sans); }
.mp-demo .hxe .hxe-quiz .no { border-color: var(--mp-line); color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
/* inside the plan: one level only */
.mp-demo .hxe .hxe-view { margin-top: var(--sp-in); padding: var(--sp-in) 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--mp-line); }
.mp-demo .hxe .hxe-flash > span, .mp-demo .hxe .hxe-guide { border-radius: var(--mp-r-in); background: var(--mp-fill); box-shadow: none; }
.mp-demo .hxe .hxe-nav button { width: 36px; height: 36px; background: transparent; box-shadow: none; }
.mp-demo .hxe .hxe-nav button:active { background: var(--mp-fill); }
.mp-demo .hxe .hxe-nav em { font: 500 var(--mp-t-cap)/1 var(--sans); font-variant-numeric: tabular-nums; }
/* the demo's own button is the page's button */
.mp-demo .hxe .hxe-btn, .mp-demo .hxe .hxe-end .btn {
  width: 100%; height: var(--mp-h-btn); margin-top: var(--sp-in); border-radius: 999px; background: var(--ink); color: var(--paper);
  font: 600 var(--mp-t-lead)/1 var(--sans); letter-spacing: -.01em; justify-content: center;
}
.mp-demo .hxe .hxe-btn .ic, .mp-demo .hxe .hxe-end .btn svg, .mp-demo .hxe .hxe-foot .ic { display: none; }
.mp-demo .hxe .hxe-end { flex-direction: column; align-items: stretch; }
.mp-demo .hxe .hxe-foot { margin-top: var(--sp-in); font-size: var(--mp-t-cap); line-height: 1.5; }
/* "Generate my study plan": while it works, the button itself says what
   it's doing (spinner + "Mapping the topics…") instead of a line under it
   that kept an empty strip at the bottom of the card the rest of the time */
.mp-demo .hxe .hxe-act { position: relative; margin-top: var(--sp-block); }
.mp-demo .hxe .hxe-act .hxe-btn { margin-top: 0; }
.mp-demo .hxe .hxe-gen .hxe-spin { display: none; }
.mp-demo .hxe .hxe-stage { position: absolute; inset-inline: 0; bottom: 0; height: var(--mp-h-btn); place-items: center; pointer-events: none; }
.mp-demo .hxe .hxe-stage span { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--mp-t-body)/1 var(--sans); color: var(--paper); }
.mp-demo .hxe .hxe-stage span::before { content: ""; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--paper) 30%, transparent); border-top-color: var(--paper); }
.mp-demo .hxe .hxe-stage span.on::before { animation: spin .8s linear infinite; }
/* only a title shares its line with the "Free demo" tag; the line under
   it (the plan's "4 topics, each with…") uses the card's full width */
.mp-demo .hxe .hxe-plan-h { padding-inline-end: 0; }
.mp-demo .hxe .hxe-plan-h .hxe-q { padding-inline-end: 92px; }
/* smallest phones: the tag goes above the title instead of narrowing it
   to a few words a line, and the four activities sit two by two */
@media (max-width: 360px) {
  .mp-demo .hxe .hxe-ex { position: static; margin-bottom: var(--sp-line); }
  .mp-demo .hxe .hxe-q, .mp-demo .hxe .hxe-plan-h .hxe-q { padding-inline-end: 0; }
  .mp-demo .hxe .hxe-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; }
  .mp-demo .hxe .hxe-steps button { flex: 1 1 auto; padding: 0 8px; white-space: normal; line-height: 1.1; text-align: start; }
}
/* German's single long words (Karteikarten, Prüfungstraining) need the
   two-by-two activities a little sooner */
@media (max-width: 380px) { html:lang(de) .mp-demo .hxe .hxe-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; } }
/* the plan's card header: the topic on its own line, then its tag and
   the 1 / 4 arrows on one line, instead of the arrows alone on a row */
.mp-demo .hxe .hxe-view-h b { flex-basis: 100%; }
/* "Tap one to start." sits under the choices, so when it goes (and the
   subjects appear in its place) nothing above the finger moves */
.mp-demo .hxe .hxe-pane.sel:has(> .hxe-hint) { display: flex; flex-direction: column; }
.mp-demo .hxe .hxe-hint { order: 1; margin: var(--sp-line) 0 0; }

/* the demo's motion, on the page's terms: the card changes height at once
   (nothing below it slides), a new step or card fades in where it is, an
   answer's explanation settles in, controls change at the press speed,
   and the spinner only turns while it shows */
.mp-demo .hxe .hxe-card { transition: none; }
.mp-demo .hxe .hxe-pane.sel { animation: mp-fade var(--mp-dur-2) var(--mp-ease) both; }
.mp-demo .hxe .hxe-view > * { animation: none; }
.mp-demo .hxe .hxe-view.mp-new > * { animation: mp-fade var(--mp-dur-2) var(--mp-ease) both; }
.mp-demo .hxe .hxe-view:not(.mp-new) > .hxe-why, .mp-demo .hxe .hxe-note { animation: mp-in var(--mp-dur-2) var(--mp-ease) both; }
.mp-demo .hxe :is(.hxe-steps button, .hxe-steps b, .hxe-seg button, .hxe-opt, .hxe-opt i, .hxe-quiz button, .hxe-nav button, .hxe-btn, .hxe-gen b, .hxe-gen .hxe-spin) {
  transition-duration: var(--mp-dur); transition-timing-function: var(--mp-ease);
}
.mp-demo .hxe .hxe-nav button { transition-property: background, opacity; }
.mp-demo .hxe .hxe-gen .hxe-spin { animation: none; }
.mp-demo .hxe .hxe-gen.busy .hxe-spin { animation: spin .8s linear infinite; }
.mp-demo .hxe .hxe-stage span { transform: translateY(4px); transition: opacity var(--mp-dur-2) var(--mp-ease), transform var(--mp-dur-2) var(--mp-ease); }
.mp-demo .hxe .hxe-stage span.on { transform: none; }
/* the flashcard turns over: the page's one longer movement, because it is
   a physical one */
.mp-demo .hxe .hxe-flash > span { transition: transform .4s var(--mp-ease); }
/* presses: rows and tabs fill, the main button dips like the page's */
.mp-demo .hxe :is(.hxe-opt, .hxe-quiz button) { transition-property: background, border-color, color; }
.mp-demo .hxe :is(.hxe-opt, .hxe-quiz button:not([disabled])):active { background: var(--mp-fill-2); transition-duration: 0s; }
.mp-demo .hxe :is(.hxe-steps, .hxe-seg) button:not([disabled]):not([aria-selected="true"]):active { background: var(--mp-fill); transition-duration: 0s; }
.mp-demo .hxe .hxe-nav button:not([disabled]):active { transition-duration: 0s; }
.mp-demo .hxe .hxe-end .btn { transition: transform var(--mp-dur) var(--mp-ease), opacity var(--mp-dur) var(--mp-ease); }
.mp-demo .hxe .hxe-btn:not([disabled]):active, .mp-demo .hxe .hxe-end .btn:active { transform: scale(.985); opacity: .88; transition-duration: 0s; }
/* a touch screen keeps :hover on whatever was last tapped: undo the
   laptop hovers that would otherwise stay stuck on */
@media (hover: none) {
  .hm .mp-demo .hxe :is(.hxe-nav button, .hxe-quiz button, .hxe-opt):hover { box-shadow: none; }
  .hm .mp-demo .hxe .hxe-quiz button:not([disabled]):hover { color: var(--ink-2); }
  .mp-demo .hxe .hxe-app .hxe-chip:hover { border-color: var(--mp-line-2); }
  .mp-demo .hxe :is(.hxe-steps, .hxe-seg) button:not([aria-selected="true"]):hover { color: var(--ink-3); }
}

/* 5 · the lecture notes */
.mp-note { padding: var(--pad) var(--pad) 4px; }
.mp-small { margin-top: var(--sp-line) !important; font-size: var(--mp-t-small); line-height: 1.5; color: var(--ink-3); }
.mp-note-head { display: flex; justify-content: space-between; gap: 12px; font-size: var(--mp-t-cap); color: var(--ink-3); }
.mp-rec { display: inline-flex; align-items: center; gap: 7px; }
.mp-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--rec); }
.mp-note-t { margin-top: 10px !important; font: 600 var(--mp-t-head)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.mp-band { padding: var(--sp-in) 0; border-top: 1px solid var(--mp-line); margin-top: var(--sp-in); }
.mp-band + .mp-band { margin-top: 0; }
.mp-band p, .mp-band li { font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }
.mp-band > p, .mp-band > ul { margin-top: 10px; }
.mp-band > p { text-wrap: balance; }   /* the highlighted decision: two even lines, never a lone word */
.mp-dots { display: grid; gap: 8px; }
.mp-dots li { position: relative; padding-inline-start: 16px; }
.mp-dots li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); }
.mp-band mark { background: var(--mp-fill-2); color: var(--ink); font-weight: 500; padding: 1px 3px; margin: 0 -3px; border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mp-dates { display: grid; gap: 8px; }
.mp-dates li { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline; }
.mp-dates b { font-weight: 600; color: var(--ink); white-space: nowrap; }

/* 6 · privacy */
.mp-facts { margin-top: var(--sp-block) !important; display: grid; gap: var(--sp-line); }
.mp-facts b { font-size: var(--mp-t-lead); font-weight: 500; line-height: 1.3; color: var(--ink); }

/* 7 · prices */
.mp-tiers { overflow: hidden; }
.mp-tier { padding: var(--pad); }
.mp-tier + .mp-tier { border-top: 1px solid var(--mp-line); }
.mp-tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mp-tier h3 { font: 400 28px/1 var(--serif); color: var(--ink); }
.mp-amt { font: 600 28px/1 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.mp-amt small { margin-inline-start: 6px; font-size: var(--mp-t-small); font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.mp-ticks { margin-top: var(--sp-in) !important; display: grid; gap: 10px; padding-top: var(--sp-in) !important; border-top: 1px solid var(--mp-line); }
.mp-ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }
.mp-ticks .ic { margin-top: calc((1.5em - var(--mp-ic)) / 2); color: var(--ink); }   /* centred on the first line */
.mp-free .mp-btn { margin-top: var(--pad); }
.mp-pro h3 { font-size: 24px; }
.mp-pro .mp-amt { font-size: 22px; }
.mp-pro-l { margin-top: 10px !important; font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }
.mp-max { margin-top: 10px !important; font-size: var(--mp-t-cap); color: var(--ink-3); }

/* 8 · questions */
.mp-faq { margin-top: var(--sp-block); border-top: 1px solid var(--mp-line); }
.mp-faq details { border-bottom: 1px solid var(--mp-line); }
.mp-faq summary { font-size: var(--mp-t-lead); font-weight: 500; line-height: 1.3; color: var(--ink); }
.mp-faq p { padding: 0 40px 18px 0; font-size: var(--mp-t-body); line-height: 1.5; color: var(--ink-2); }
[dir="rtl"] .mp-faq p { padding: 0 0 18px 40px; }

/* 9 · last call */
.mp-final { margin-top: var(--gap); padding: 8px 0 56px; text-align: center; }

/* ======================================================= around the page
   The site's header, menu, cookie notice, footer and the assistant's
   button, on this page only, drawn from the same tokens. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  /* header: a plain bar; the menu button is an icon button, no outline */
  [data-page="home"] .nav {
    top: 0; width: 100%; margin: 0; padding-top: env(safe-area-inset-top, 0px); border-radius: 0;
    background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--mp-line);
  }
  [data-page="home"] .nav-right .nav-login { display: inline-flex; align-items: center; min-height: var(--mp-h-ctl); padding: 0 8px; font: 500 var(--mp-t-body)/1 var(--sans); color: var(--ink-2); }
  [data-page="home"] .nav .logo { min-height: var(--mp-h-ctl); display: inline-flex; align-items: center; }
  [data-page="home"] .nav .nav-burger { width: var(--mp-h-ctl); height: var(--mp-h-ctl); border: 0; border-radius: 999px; transition: background var(--mp-dur) var(--mp-ease); }
  [data-page="home"] .nav .nav-burger:active { background: var(--mp-fill); transition-duration: 0s; }
  /* the menu fades in with its small settle at the content speed and goes
     at the quicker one; its button's lines turn into a cross in step.
     Scrolling inside the menu stops at its ends instead of moving the page. */
  [data-page="home"] .mobile-menu { transition-duration: var(--mp-dur); transition-timing-function: var(--mp-ease); overscroll-behavior: contain; }
  [data-page="home"] .nav-burger span::before, [data-page="home"] .nav-burger span::after { transition: transform var(--mp-dur) var(--mp-ease); }
  [data-page="home"].menu-open .mobile-menu, [data-page="home"].menu-open .nav-burger span::before, [data-page="home"].menu-open .nav-burger span::after { transition-duration: var(--mp-dur-2); }
  /* touch: no grey flash from the browser; every control here has its own
     press instead: text dims, pills dip, icon buttons fill */
  [data-page="home"] { -webkit-tap-highlight-color: transparent; }
  [data-page="home"] :is(.nav .logo, .nav .nav-login, .mobile-menu a.big, .foot a, .ac-cookie p a) { transition: opacity var(--mp-dur) var(--mp-ease); }
  [data-page="home"] :is(.nav .logo, .nav .nav-login, .mobile-menu a.big, .foot a, .ac-cookie p a):active { opacity: .55; transition-duration: 0s; }
  [data-page="home"] :is(.mobile-menu .mm-cta .btn, .ac-cookie button, .theme-btn) { transition: transform var(--mp-dur) var(--mp-ease), opacity var(--mp-dur) var(--mp-ease); }
  [data-page="home"] :is(.mobile-menu .mm-cta .btn, .ac-cookie button, .theme-btn):active { transform: scale(.98); opacity: .88; transition-duration: 0s; }
  /* menu: the same buttons as the page */
  [data-page="home"] .mobile-menu .mm-cta .btn { height: var(--mp-h-btn); border-radius: 999px; font: 600 var(--mp-t-lead)/1 var(--sans); letter-spacing: -.01em; }
  [data-page="home"] .mobile-menu .mm-cta .btn-line { border-color: var(--mp-line-2); }
  [data-page="home"] .mobile-menu .theme-btn, [data-page="home"] .foot .theme-btn { height: var(--mp-h-ctl); padding: 0 14px; border-color: var(--mp-line-2); font: 500 var(--mp-t-small)/1 var(--sans); }
  /* cookie notice: a card like the page's, buttons at the touch height */
  [data-page="home"] .ac-cookie { border: 0; border-radius: var(--mp-r-card); background: var(--mp-card-bg); box-shadow: 0 0 0 1px var(--mp-line), 0 18px 40px -20px rgba(0, 0, 0, .55); font-size: var(--mp-t-small); }
  [data-page="home"] .ac-cookie button { height: var(--mp-h-ctl); padding: 0 16px; border-color: var(--mp-line-2); font: 600 var(--mp-t-small)/1 var(--sans); }
  [data-page="home"] .ac-cookie button.pri { border-color: var(--ink); }
  [data-page="home"] .ac-cookie { animation-duration: var(--mp-dur-2); animation-timing-function: var(--mp-ease); }
  [data-page="home"] .nav :is(a, button):focus-visible, [data-page="home"] .ac-cookie button:focus-visible { outline: none; box-shadow: var(--mp-focus); border-radius: 999px; }
  /* the assistant's button: present, quiet. It fades in once the page has
     settled (no rise or grow), follows the cookie notice down when that
     goes, and shrinks a touch while pressed. Its sheet and messages arrive
     at the content speed. */
  [data-page="home"] .aca-fab {
    width: 52px; height: 52px; padding: 0; justify-content: center; background: var(--mp-card-bg); color: var(--ink); box-shadow: 0 0 0 1px var(--mp-line-2);
    transform: none; transition: opacity var(--mp-dur-2) var(--mp-ease), transform var(--mp-dur) var(--mp-ease), bottom var(--mp-dur-2) var(--mp-ease);
  }
  [data-page="home"] .aca.ready .aca-fab:active { transform: scale(.94); transition-duration: 0s; }
  [data-page="home"] .aca-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  [data-page="home"] .aca-panel { transition-duration: var(--mp-dur); transition-timing-function: var(--mp-ease); }
  [data-page="home"] .aca-panel.in { transition-duration: var(--mp-dur-2); }
  [data-page="home"] :is(.aca-hello, .aca-msg) { animation-duration: var(--mp-dur-2); }
  [data-page="home"] .aca :is(.aca-chip, .aca-icon, .aca-act, .aca-send:not(:disabled)):active { opacity: .6; transition-duration: 0s; }
  /* arriving here from another of the site's pages: a short crossfade, no
     slide (the site's own page change lifts the whole page 10px) */
  ::view-transition-old(root) { animation: mp-fade .16s cubic-bezier(.2, .7, .2, 1) reverse both; }
  ::view-transition-new(root) { animation: mp-fade .24s cubic-bezier(.2, .7, .2, 1) both; }
  /* footer: plain labels; no one-link column; no second tagline and button under the last call */
  [data-page="home"] .foot { padding: 48px 0 32px; }
  [data-page="home"] .foot .foot-grid > div:nth-child(3), [data-page="home"] .foot .foot-tag, [data-page="home"] .foot .foot-grid > div:first-child .btn { display: none; }
  [data-page="home"] .foot .foot-grid h4 { font: 500 var(--mp-t-cap)/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
  [data-page="home"] .foot .foot-bottom { margin-top: 40px; }
  /* every footer and menu link gets a 44px tap row */
  [data-page="home"] .foot .foot-grid ul { gap: 0; }
  [data-page="home"] .foot .foot-grid ul a, [data-page="home"] .foot .foot-bottom a, [data-page="home"] .foot-langs a {
    display: inline-flex; align-items: center; min-height: var(--mp-h-ctl);
  }
  [data-page="home"] .foot-langs { gap: 0 14px; }
  [data-page="home"] .foot .foot-grid h4 { margin-bottom: 6px; }
  [data-page="home"] .foot .logo { min-height: var(--mp-h-ctl); display: inline-flex; align-items: center; }

  /* one edge for everything: the header, menu and footer sit on the page's
     own side edge (20px; 16px on the smallest phones) and, on a phone
     turned sideways, inside the same 600px column as the page. The menu
     button's lines end on that edge too (its 44px button is 14px wider
     than them on each side). */
  [data-page="home"] .nav-in { max-width: 600px; margin: 0 auto; padding-inline: var(--mp-g) calc(var(--mp-g) - 14px); }
  [data-page="home"] .foot .wrap { max-width: 600px; padding-inline: var(--mp-g); }
  [data-page="home"] .mobile-menu { padding-inline: max(var(--mp-g), calc((100% - 600px) / 2 + var(--mp-g))); }
  /* the footer's logo is the header's logo */
  [data-page="home"] .foot .logo { gap: 9px; font-size: 16.5px; }
  [data-page="home"] .foot .logo i { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
  /* footer columns: Legal sits under Product, beside Company, instead of
     starting below Company's four links and leaving a hole */
  [data-page="home"] .foot .foot-grid > div:nth-child(2) { grid-column: 1; grid-row: 2; }
  [data-page="home"] .foot .foot-grid > div:nth-child(4) { grid-column: 2; grid-row: 2 / span 2; }
  [data-page="home"] .foot .foot-grid > div:nth-child(5) { grid-column: 1; grid-row: 3; }
  /* footer text on the page's scale; the email on its own line, so no
     separator is left hanging at the end of a line */
  [data-page="home"] .foot .foot-grid ul a { font-size: var(--mp-t-body); }
  [data-page="home"] .foot .foot-bottom { font-size: var(--mp-t-cap); }
  [data-page="home"] .foot-langs a { font-size: var(--mp-t-small); }
  [data-page="home"] .foot-langs svg { width: var(--mp-ic); height: var(--mp-ic); stroke-width: 1.5px; }
  [data-page="home"] .foot-langs svg * { vector-effect: non-scaling-stroke; }
  [data-page="home"] .foot-bottom .foot-sep { display: none; }   /* the "·" before the email (wrapped by home-m.js) */
  [data-page="home"] .foot-bottom > span:first-child a { display: flex; width: fit-content; margin-top: -10px; }   /* its 44px tap row tucks under the line above */
  [data-page="home"] .foot .foot-bottom { gap: var(--sp-line); padding-top: var(--sp-block); }
  [data-page="home"] .foot-bottom > span:first-child { text-wrap: pretty; }
  /* menu: one hairline under the last link, not two */
  [data-page="home"] .mm-prefs { margin-top: var(--sp-block, 24px); padding-top: 0; border-top: 0; }
  /* the chat button steps aside while the menu is open */
  [data-page="home"].menu-open .aca.ready .aca-fab { opacity: 0; pointer-events: none; }
  /* the chat sheet on the page's components: 44px icon buttons, the
     page's chips, sans labels, nothing under 12px */
  [data-page="home"] .aca-head { padding-block: max(9px, env(safe-area-inset-top, 0px)) 9px; padding-inline: var(--mp-g) calc(var(--mp-g) - 14px); }
  [data-page="home"] .aca-icon { width: var(--mp-h-ctl); height: var(--mp-h-ctl); }
  [data-page="home"] .aca-id small { font: 500 var(--mp-t-micro)/1.4 var(--sans); letter-spacing: 0; }
  [data-page="home"] .aca-log { padding-inline: var(--mp-g); }
  [data-page="home"] .aca-hello { padding-inline: 0; }
  [data-page="home"] .aca-hello p { font-size: var(--mp-t-body); line-height: 1.5; }
  [data-page="home"] .aca-chips { gap: 8px; }
  [data-page="home"] .aca-chip {
    min-height: var(--mp-h-ctl); padding: 8px 15px; border: 1px solid var(--mp-line-2); background: transparent; box-shadow: none;
    font: 500 var(--mp-t-small)/1.25 var(--sans); color: var(--ink);
  }
  [data-page="home"] .aca-form { padding-inline: var(--mp-g); }
  [data-page="home"] .aca-box { padding: 4px 4px 4px 16px; border-radius: calc(var(--mp-h-btn) / 2); }
  [data-page="home"] .aca-send, [data-page="home"] .aca-stop { width: var(--mp-h-ctl); height: var(--mp-h-ctl); }
  [data-page="home"] .aca-fine { font-size: var(--mp-t-micro); line-height: 1.5; }
}

/* small phones */
@media (max-width: 360px) {
  [data-page="home"] { --mp-t-display: 35px; --mp-t-title: 32px; --mp-g: 16px; }
  .mp-dates li { grid-template-columns: 84px 1fr; }
}
/* switching light and dark: instant and all at once (each part used to
   change colour at its own speed, from .16s to .35s). home-m.js sets the
   class for the one frame of the switch. */
html.mp-snap, html.mp-snap *, html.mp-snap *::before, html.mp-snap *::after { transition: none !important; }

/* a phone turned sideways can be wider than the site's 900px header
   breakpoint (a Pro Max is 932): give it the phone header and menu too,
   the same rules site.css uses at 900px and below */
@media (min-width: 901px) and (max-height: 500px) and (pointer: coarse) {
  [data-page="home"] .nav-in { grid-template-columns: 1fr auto; height: 60px; }
  [data-page="home"] .nav-mid, [data-page="home"] .nav-links, [data-page="home"] .nav-right .langdd, [data-page="home"] .nav-right .theme-ico { display: none; }
  [data-page="home"] .nav-burger { display: grid; place-items: center; }
  [data-page="home"] .mobile-menu { display: block; position: fixed; inset: var(--mm-top, 94px) 0 0 0; background: var(--paper); z-index: 49; padding: 24px max(var(--mp-g), calc((100% - 600px) / 2 + var(--mp-g))) 40px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: opacity var(--mp-dur) var(--mp-ease), transform var(--mp-dur) var(--mp-ease); overflow: auto; overscroll-behavior: contain; }
  [data-page="home"].menu-open .mobile-menu { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--mp-dur-2); }
  [data-page="home"] .mobile-menu a.big { display: block; font: 400 36px/1.1 var(--serif); padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
  [data-page="home"] .mobile-menu .mm-cta { display: grid; gap: 10px; margin-top: 28px; }
  [data-page="home"] .mobile-menu .mm-cta .btn { justify-content: center; }
}

/* reduced motion: the states stay, the movement goes. site.css already
   cuts every animation and transition to nothing; on top of that, in-page
   links jump instead of gliding, and pages swap without a fade. */
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
    html:has(> body[data-page="home"]) { scroll-behavior: auto; }
    .hm :is(.mp-r, details > *, .hxe-pane, .hxe-view > *, .hxe-note, .hxe-why), [data-page="home"] .ac-cookie { animation: none !important; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  }
}