:root {
  color-scheme: light;
  --pearl: #f4f6f8;
  --surface: #ffffff;
  --surface-sunk: #eaeef2;
  --graphite: #16181c;
  --graphite-2: #5c626b;
  --hairline: #e2e7ec;
  --ink: #0f3d52;
  --correct: #1f7a4d;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --lift-1: 0 1px 2px rgb(22 24 28 / 6%);
  --lift-2: 0 8px 24px rgb(22 24 28 / 14%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-block-start: 72px; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--graphite);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height: 1.75;
  font-size: 17px;
}
/* Arabic needs more leading than Latin at the same size, so 1.75 is the base
   and the five Latin locales come down rather than Arabic going up. */
body:lang(en), body:lang(fr), body:lang(de), body:lang(es), body:lang(tr) { line-height: 1.6; }
/* German compounds and Turkish agglutinations are single unbreakable tokens.
   Hyphenation follows the lang attribute the document already carries, so this
   is correct in eight languages from one rule. */
p, li, h1, h2, h3, article { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* One shell for every band: the band is full-bleed, the content is not. */
.wrap { max-inline-size: 72rem; margin-inline: auto; padding-inline: var(--s-5); }

/* ── The header ─────────────────────────────────────────────────────────────
   Sticky and solid, so the section words stay reachable, with the hairline
   drawing the edge the shadow would otherwise need. */
.top { position: sticky; inset-block-start: 0; z-index: 10; background: var(--surface); border-block-end: 1px solid var(--hairline); }
.top-row { display: flex; align-items: center; gap: var(--s-5); min-block-size: 60px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); margin: 0; }
.brand .mark { display: block; flex: none; }
.top-nav { display: flex; gap: var(--s-5); margin-inline: auto; }
.top-nav a { text-decoration: none; color: var(--graphite-2); font-size: 0.95rem; min-block-size: 44px; display: inline-flex; align-items: center; }
.top-nav a:hover { color: var(--graphite); }
.top-side { display: flex; align-items: center; gap: var(--s-4); margin-inline-start: auto; }
.signin { text-decoration: none; font-size: 0.95rem; font-weight: 600; min-block-size: 44px; display: inline-flex; align-items: center; }
/* The nav is a desktop courtesy: every target is one scroll away on a phone,
   and header room there belongs to the language and the way in. */
@media (max-width: 860px) { .top-nav { display: none; } }

/* The language menu: the platform's own disclosure element, no script. The
   panel is a white card; the current language is bold, not decorated. */
.lang { position: relative; }
.lang summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2);
  min-block-size: 44px; font-size: 0.95rem; color: var(--graphite-2);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--graphite); }
.lang[open] summary svg { transform: rotate(180deg); }
.lang ul {
  position: absolute; inset-inline-end: 0; inset-block-start: 100%;
  margin: var(--s-2) 0 0; padding: var(--s-2); list-style: none;
  background: var(--surface); border-radius: var(--r-2); box-shadow: var(--lift-2);
  min-inline-size: 10rem; z-index: 20;
}
.lang li a { display: flex; align-items: center; min-block-size: 40px; padding-inline: var(--s-3); border-radius: var(--r-1); text-decoration: none; color: var(--graphite); font-size: 0.95rem; }
.lang li a:hover { background: var(--surface-sunk); }
.lang li a[aria-current] { font-weight: 700; }

/* ── The hero ───────────────────────────────────────────────────────────────
   Copy at the reading start, the living sheet beside it, stacked on a phone
   with the sheet after the words. The heading is the page's one big voice. */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--s-8); } }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); line-height: 1.2; margin: 0 0 0.4em; letter-spacing: normal; text-wrap: balance; }
.lede { font-size: 1.15rem; color: var(--graphite-2); margin: 0; max-inline-size: 34rem; }
.cta { margin: var(--s-6) 0 0; }
.cta-btn {
  display: inline-flex; align-items: center; min-block-size: 48px; padding: 0 var(--s-6);
  border-radius: var(--r-2); background: var(--ink); color: var(--surface);
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.cta-btn:hover { transform: translateY(-1px); box-shadow: var(--lift-2); }
.cta-btn:active { transform: translateY(0); }

/* ── The bands ──────────────────────────────────────────────────────────────
   Pearl, then white, alternating: the separation IS the background change. */
section { padding-block: var(--s-8); }
.band { background: var(--surface); }
h2 { display: flex; align-items: center; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.4; margin: 0 0 1em; }
/* The sheet's corner square, marking each section the way the current screen
   is marked in the dashboard. */
h2::before {
  content: ''; flex: none; inline-size: 10px; block-size: 10px;
  background: var(--ink); border-radius: 1px; margin-inline-end: var(--s-3);
}
h3 { font-size: 1.05rem; margin: 0 0 0.3em; }
.measure { max-inline-size: 44rem; margin: 0; }

/* The three steps: the list stays a real ordered list for the reader who gets
   no styles, and lays out as numbered cards for everybody else. */
#steps ol { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
@media (min-width: 760px) { #steps ol { grid-template-columns: repeat(3, 1fr); } }
#steps li {
  counter-increment: step; margin: 0; background: var(--surface);
  border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--lift-1);
}
#steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  inline-size: 32px; block-size: 32px; margin-block-end: var(--s-3);
  background: var(--ink); color: var(--surface); border-radius: var(--r-1);
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Card grids: features two across, plans three across, all white on pearl or
   sunk on white depending on the band they sit in. */
.cards { display: grid; gap: var(--s-4); }
@media (min-width: 700px) { #features .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 860px) { #pricing .cards { grid-template-columns: repeat(3, 1fr); } }
article { background: var(--surface); border-radius: var(--r-3); padding: var(--s-5); box-shadow: var(--lift-1); }
.band article { background: var(--pearl); box-shadow: none; }
article p { margin: 0; color: var(--graphite-2); }
.plans-note { color: var(--graphite-2); font-size: 0.95rem; max-inline-size: 44rem; margin: var(--s-5) 0 0; }

/* The plans page: one table, plans as columns, one row per real feature. The
   first column reads as labels, the value cells centre, and on a narrow
   screen the TABLE scrolls inside its own container so the page never does. */
.plans-page { padding-block: var(--s-7) var(--s-6); }
.plans-page h1 { margin-block-end: 0.3em; }
.plans-scroll { margin-block-start: var(--s-6); overflow-x: auto; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--lift-1); }
.plans-table { border-collapse: collapse; inline-size: 100%; min-inline-size: 40rem; }
.plans-table th, .plans-table td { padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--hairline); font-weight: 400; }
.plans-table thead th { border-block-start: 0; font-weight: 700; font-size: 1.05rem; }
.plans-table thead th:not(:first-child), .plans-table td { text-align: center; }
.plans-table th[scope="row"] { text-align: start; color: var(--graphite-2); font-size: 0.95rem; }
.plans-table td { font-variant-numeric: tabular-nums; }
.tick { color: var(--ink); font-weight: 700; }

/* The questions: two columns of question-and-answer pairs where the width is
   there, one where it is not, each pair holding together as a block. */
.qa-grid { display: grid; gap: var(--s-5) var(--s-7); }
@media (min-width: 860px) { .qa-grid { grid-template-columns: 1fr 1fr; } }
.qa p { margin: 0; color: var(--graphite-2); }

/* The closing invitation: the second and last appearance, centred and given
   room, because it is the page's final sentence. */
.closing { padding-block: var(--s-8) var(--s-9); text-align: center; }
.closing .cta { margin: 0; }

/* ── The footer ─────────────────────────────────────────────────────────────
   Identity and the badge, the four doors into the product, and every language
   as real links: the crawler-visible list the header menu summarises. */
footer { background: var(--surface); border-block-start: 1px solid var(--hairline); padding-block: var(--s-7); color: var(--graphite-2); }
.foot-grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: auto 1fr auto; gap: var(--s-8); } }
.foot-brand { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.brand-foot { gap: 9px; color: var(--graphite-2); font-size: 0.95rem; }
.foot-badge { block-size: 44px; inline-size: auto; }
.foot-links { display: flex; flex-direction: column; gap: var(--s-1); }
.foot-links a { text-decoration: none; font-size: 0.95rem; color: var(--graphite-2); min-block-size: 36px; display: inline-flex; align-items: center; }
.foot-links a:hover { color: var(--graphite); }
.switch ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); padding: 0; margin: 0; }
.switch a { display: inline-flex; align-items: center; min-block-size: 36px; font-size: 0.95rem; text-decoration: none; color: var(--graphite-2); }
.switch a:hover { color: var(--graphite); }
.switch a[aria-current] { color: var(--graphite); font-weight: 700; }

/* ── The scan moment, the page's one orchestrated animation ─────────────────
   Enter and straighten live on two nested wrappers because both stages move
   the transform. The paper enters tilted as photographed, the brackets latch
   onto its fiducials and straighten with it, the pencil marks land in the
   order a student makes them, the brackets get out of the way, and the score
   card rises. Under 2.5 seconds, once. */
.scan { margin: 0; display: flex; justify-content: center; }
.scan-stage { position: relative; inline-size: min(19rem, 86%); }
.scan-enter { animation: scan-enter var(--dur-slow) var(--ease-out) both; }
.scan-tilt {
  border-radius: 2px;
  box-shadow: var(--lift-2);
  animation: scan-straighten var(--dur-slow) var(--ease-out) 700ms both;
}
.scan-sheet { display: block; inline-size: 100%; block-size: auto; }
.scan-brackets { animation: scan-done var(--dur-base) var(--ease-in) 2020ms both; opacity: 0; }
.scan-bracket {
  transform-box: fill-box; transform-origin: center;
  animation: scan-latch var(--dur-base) var(--ease-out) var(--d) both;
}
.scan-fill {
  transform-box: fill-box; transform-origin: center;
  animation: scan-mark var(--dur-fast) var(--ease-out) var(--d) both;
}
.scan-card {
  position: absolute; inset-block-end: -3%; inset-inline: 0;
  margin-inline: auto; inline-size: fit-content;
  display: flex; align-items: baseline; gap: 2px;
  background: var(--surface); border-radius: var(--r-2);
  padding: var(--s-2) var(--s-4); box-shadow: var(--lift-2);
  font-family: ui-monospace, 'SF Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  animation: scan-card var(--dur-slow) var(--ease-out) 2060ms both;
}
.scan-card b { color: var(--correct); font-size: 1.5rem; line-height: 1; }
.scan-card span { color: var(--graphite-2); font-size: 1rem; }
@keyframes scan-enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes scan-straighten { from { transform: rotate(-5deg) scale(0.97); } }
@keyframes scan-latch { from { opacity: 0; transform: scale(1.35); } }
@keyframes scan-mark { from { opacity: 0; transform: scale(0.4); } }
@keyframes scan-done { from { opacity: 1; } }
@keyframes scan-card { from { opacity: 0; transform: translateY(12px); } }

/* The sanctioned simple reveal on scroll, with no script: a scroll-driven
   animation where the browser has one, and a page that is simply there where
   it does not. Vertical only, so nothing needs mirroring. */
@supports (animation-timeline: view()) {
  main section .wrap {
    animation: rise var(--dur-slow) var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }
}
@keyframes rise { from { opacity: 0.01; transform: translateY(16px); } }

/* Reduced motion means the finished frame, not slower motion: every keyframe
   above only defines a start, so removing the animation IS the end state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scan, .scan *, main section .wrap, .cta-btn { animation: none !important; transition: none !important; }
}