/* ydyom website. Colour tokens are in tokens.css (copied from brainstorm/brand/tokens.css).
   Structure inspired by Babbel and Memrise: a photo collage hero, a strip under it, a row of portrait cards,
   big photos with the app laid over them, bold colour bands, courses as colour tiles.
   Logical properties are used throughout so an Arabic (dir="rtl") version works without a second stylesheet. */

@font-face { font-family: "Figtree Variable"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Figtree Variable"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/figtree-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader Variable"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-wght-italic.woff2") format("woff2-variations"); }
@font-face { font-family: "Newsreader Variable"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("fonts/newsreader-latin-ext-wght-italic.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --font-ui: "Figtree Variable", system-ui, sans-serif;
  --font-display: "Newsreader Variable", Georgia, "Times New Roman", serif;
  --wrap: 76rem;
  --gutter: 1.25rem;
  --teal: #0F6E69; /* darker than the brand teal #1B9993 so white text passes contrast (6:1) */
  /* buttons and bands, light */
  --btn-bg: var(--ink);
  --btn-text: var(--cream);
  --band-bg: var(--panel);
  --band-text: var(--ink);
  --band-muted: var(--text-muted);
  --band-line: rgb(11 42 46 / 0.18);
  --problem-bg: var(--lime-tint);
  --plan-bg: var(--surface);
  --plan-line: var(--line);
  --t2-bg: #CFE8E5; --t2-fg: var(--ink);
  --t4-bg: #DCEFC9; --t4-fg: var(--ink);
  --t6-bg: #F4E6C4; --t6-fg: var(--ink);
  --tint-bg: var(--lime-tint);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 1.125rem/1.6 var(--font-ui); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.skip { position: absolute; inset-inline-start: -999px; }
.skip:focus { inset-inline-start: var(--gutter); top: 0.5rem; background: var(--surface); padding: 0.5rem 1rem; z-index: 10; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 450; line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
h1 { font-size: clamp(2.75rem, 6.5vw, 4.75rem); }
h2 { font-size: clamp(2.125rem, 4.6vw, 3.25rem); }
h3 { font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
h2 em, h1 em { font-style: italic; }
p { margin: 0; }
.eyebrow { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-block-end: 1rem; }
.lead { font-size: clamp(1.1875rem, 2.1vw, 1.375rem); line-height: 1.5; color: var(--text-muted); max-width: 36rem; }
.fine { font-size: 0.875rem; color: var(--text-muted); margin-block-start: 1rem; }
.center { text-align: center; margin-inline: auto; }
.section-head { max-width: 46rem; margin-block-end: clamp(2rem, 4vw, 3.5rem); }
.section-head.center .lead { margin-inline: auto; }
.section-head .lead { margin-block-start: 1.25rem; }

.ph { background: var(--yellow); color: #0B2A2E; padding: 0 0.35em; border-radius: 0.3em; font-weight: 600; }
.ph-box {
  display: grid; place-items: center; text-align: center; padding: 1rem;
  background: color-mix(in srgb, var(--text) 6%, transparent); border: 2px dashed var(--text-muted); color: var(--text-muted);
  font: 600 0.875rem/1.4 var(--font-ui); border-radius: 1.5rem;
}

/* header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); }
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 4.5rem; }
.logo { display: block; line-height: 0; }
.logo img { height: 1.75rem; width: auto; }
.logo-cream { display: none !important; }
.nav { display: flex; gap: 2rem; margin-inline-start: auto; }
.nav a { text-decoration: none; font-weight: 600; font-size: 1rem; padding-block: 0.5rem; }
.nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.site-header .btn { white-space: nowrap; }
@media (max-width: 30rem) { .site-header .wrap { gap: 0.5rem; } .site-header .btn-small { padding-inline: 0.875rem; font-size: 0.875rem; } }
@media (max-width: 52rem) { .nav { display: none; } }
/* The EN/DE switch in the header: outside the menu, so phones (no menu) see it too. */
.lang-switch { margin-inline-start: 1.5rem; padding: 0.35rem 0.7rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 700; font-size: 0.875rem; line-height: 1; text-decoration: none; }
.lang-switch:hover { background: var(--lime); color: var(--ink); }
@media (max-width: 52rem) { .lang-switch { margin-inline-start: auto; } }

/* buttons and pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3.25rem; padding: 0.5rem 1.75rem; border-radius: 999px; border: 0;
  background: var(--btn-bg); color: var(--btn-text);
  font: 700 1rem var(--font-ui); text-decoration: none; cursor: pointer;
}
.btn:hover { filter: brightness(1.12); }
.btn-share { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-small { min-height: 2.75rem; padding-inline: 1.25rem; font-size: 0.875rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-block-start: 2rem; }
.link { font-weight: 700; text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 2px; }
.link::after { content: " \2192"; }
.pills { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-block-start: 1.75rem; list-style: none; padding: 0; }
.pills li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 0.875rem; }
.pills li.on { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.pills li.soon { color: var(--text-muted); }

/* bands */
.band-ink { background: var(--band-bg); color: var(--band-text); }
.band-ink .eyebrow, .band-ink .lead, .band-ink .fine { color: var(--band-muted); }
.band-lime { background: var(--lime); color: var(--ink); }
.band-lime .eyebrow, .band-lime .lead, .band-lime .fine { color: rgb(11 42 46 / 0.78); }
.band-lime .btn { background: var(--ink); color: var(--cream); }
.band-tint { background: var(--tint-bg); }
.band-soft { background: var(--panel); }
.band-ink .ph-box { border-color: var(--band-muted); color: var(--band-muted); background: color-mix(in srgb, var(--band-text) 6%, transparent); }
.problem.band-ink { background: var(--problem-bg); }
.problem > .wave { color: var(--problem-bg); }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; } .split.flip > :first-child { order: 2; } }

/* phone placeholder for app screenshots */
.phone {
  aspect-ratio: 9 / 19; width: 100%; max-width: 15rem; margin-inline: auto;
  border: 0.5rem solid var(--ink); border-radius: 2.25rem; overflow: hidden;
  background: var(--panel); box-shadow: 0 1.5rem 3rem -1rem rgb(11 42 46 / 0.4);
}
.phone .ph-box { height: 100%; border: 0; border-radius: 0; background: transparent; }
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* photo tiles: real photos later, labelled placeholders now */
.photo { border-radius: 1.75rem; overflow: hidden; position: relative; background: var(--panel); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo .ph-box { position: absolute; inset: 0; border-radius: 0; }

/* floating UI chips laid over photos, as on Babbel */
.chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 0.625rem;
  background: var(--surface); color: var(--text); border-radius: 1rem; padding: 0.625rem 0.875rem;
  font-size: 0.875rem; line-height: 1.25; box-shadow: 0 0.75rem 2rem -0.75rem rgb(11 42 46 / 0.45);
}
.chip b { display: block; font-size: 1rem; }
.chip small { color: var(--text-muted); font-size: 0.875rem; }
.chip .dot { width: 2.25rem; height: 2.25rem; border-radius: 0.625rem; background: var(--lime); color: var(--ink); display: grid; place-items: center; flex: none; }
.chip .dot svg { width: 1.25rem; height: 1.25rem; }

/* hero: question, pills, collage */
.hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.hero .lead { margin-block-start: 1.5rem; }
.collage { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: 1.35fr 1fr; gap: 0.75rem; aspect-ratio: 1 / 1.05; }
.collage .a { grid-row: 1 / 3; border-radius: 2rem; }
.collage .b { border-radius: 1.5rem; }
.collage .c { border-radius: 1.5rem; }
.collage .chip.c1 { inset-inline-start: -1.25rem; bottom: 2.5rem; }
.collage .chip.c2 { inset-inline-end: -0.5rem; top: 42%; }
.collage .chip.c3 { inset-inline-start: 34%; top: 1.25rem; }
@media (max-width: 52rem) { .collage .chip.c1 { inset-inline-start: 0.25rem; } .collage .chip.c2 { inset-inline-end: 0.25rem; } }

/* strip under the hero */
.strip { padding-block: 1.25rem; }
.strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2.5rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.625rem); }
.strip li::before { content: "\2726"; font-size: 0.75em; margin-inline-end: 0.75rem; vertical-align: 0.12em; }

/* problem: a row of portrait cards */
.problem { padding-block: clamp(3rem, 6vw, 5rem); }
.portraits { display: grid; grid-auto-flow: column; grid-auto-columns: min(16rem, 72vw); gap: 0.875rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
@media (min-width: 64rem) { .portraits { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.portrait { margin: 0; scroll-snap-align: start; position: relative; aspect-ratio: 3 / 4; border-radius: 1.5rem; overflow: hidden; background: #1c3a3f; }
.portrait .ph-box { position: absolute; inset: 0; border-radius: 0; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption { position: absolute; inset-inline: 0; bottom: 0; padding: 4rem 1rem 1rem; background: linear-gradient(to top, rgb(5 20 22 / 0.92), transparent); color: #fff; font-family: var(--font-display); font-size: 1.3125rem; line-height: 1.2; z-index: 2; }
.portrait figcaption small { display: block; font-family: var(--font-ui); font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lime); margin-block-end: 0.375rem; }
.evidence { margin-block-start: clamp(2rem, 4vw, 3.5rem); max-width: 50rem; }
.evidence .lead { color: var(--band-text); max-width: none; }
.sources a { text-underline-offset: 0.2em; }

/* solution: big photo with the app laid over it */
.showcase { position: relative; }
.showcase .photo { aspect-ratio: 4 / 4.6; border-radius: 2rem; }
.showcase .phone { position: absolute; inset-inline-end: -1rem; bottom: -2rem; width: 38%; max-width: 11rem; z-index: 2; }
.showcase .chip.s1 { inset-inline-start: -1rem; top: 2rem; }
.showcase .chip.s2 { inset-inline-start: 1.5rem; bottom: 2rem; }
@media (max-width: 52rem) { .showcase .phone { inset-inline-end: 0.5rem; } .showcase .chip.s1 { inset-inline-start: 0.5rem; } }
.solution .lead { margin-block-start: 1.25rem; }

/* how it works: three columns with icons, then tiles */
.cols3 { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .cols3 { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.col3 .ico { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--ink); color: var(--lime); display: grid; place-items: center; margin-block-end: 1.25rem; }
.col3 .ico svg { width: 1.75rem; height: 1.75rem; }
.col3 h3 { margin-block-end: 0.5rem; }
.col3 p { color: var(--text-muted); }
.tiles { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 44rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { border-radius: 1.5rem; padding: 1.25rem 1rem; min-height: 9.5rem; display: flex; flex-direction: column; justify-content: space-between; font-weight: 700; font-size: 1rem; line-height: 1.2; }
.tile svg { width: 2rem; height: 2rem; }
.tile small { display: block; font-weight: 400; font-size: 0.875rem; margin-block-start: 0.25rem; opacity: 0.85; }
.tile.t1 { background: var(--lime); color: var(--ink); }
.tile.t2 { background: var(--t2-bg); color: var(--t2-fg); }
.tile.t3 { background: var(--yellow); color: var(--ink); }
.tile.t4 { background: var(--t4-bg); color: var(--t4-fg); }
.tile.t5 { background: var(--cream); color: var(--ink); border: 1px solid rgb(11 42 46 / 0.2); }
.tile.t6 { background: var(--t6-bg); color: var(--t6-fg); }
.tile.t7 { background: var(--lime); color: var(--ink); }
.tile.wide { grid-column: 1 / -1; min-height: 8rem; }
@media (min-width: 64rem) { .tile.wide { grid-column: span 2; min-height: 9.5rem; } }

/* phones fan */
.fan { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-block: 1rem 2rem; }
.fan .phone { max-width: 11.5rem; margin-inline: -1.25rem; }
.fan .phone:nth-child(1) { transform: rotate(-6deg) translateY(1.5rem); }
.fan .phone:nth-child(2) { transform: translateY(-1rem); z-index: 2; max-width: 13rem; }
.fan .phone:nth-child(3) { transform: rotate(6deg) translateY(1.5rem); }
.demo-note { margin-block-start: 1.5rem; }

/* voices (hidden until real quotes exist) */
.quote-list { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .quote-list { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; }
.quote p { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3; }
.quote footer { margin-block-start: 1rem; font-size: 0.875rem; color: var(--text-muted); }

/* pricing */
.seg { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: rgb(250 245 236 / 0.12); margin-block-end: 2rem; gap: 0.25rem; }
.seg button { border: 0; background: transparent; color: var(--band-text); font: 700 1rem var(--font-ui); padding: 0.625rem 1.25rem; border-radius: 999px; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--lime); color: var(--ink); }
.plan-panel small.sub { display: block; color: var(--band-muted); margin-block-end: 1.5rem; font-size: 1rem; }
.plan-grid { display: grid; gap: 1rem; }
@media (min-width: 44rem) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .plan-grid { grid-template-columns: repeat(4, 1fr); } }
.plan { border-radius: 1.75rem; padding: 2rem; background: var(--plan-bg); border: 1px solid var(--plan-line); display: flex; flex-direction: column; gap: 0.75rem; }
.plan.best { background: var(--lime); color: var(--ink); border-color: transparent; }
.plan h3 { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.plan .tag { font: 700 0.875rem var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--lime); color: var(--ink); }
.plan.best .tag { background: var(--ink); color: var(--lime); }
.plan .price { font-family: var(--font-display); font-size: 3rem; line-height: 1.05; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.75rem; }
.plan .price s { font-size: 1.375rem; opacity: 0.6; }
.plan .price small { font-family: var(--font-ui); font-size: 1rem; opacity: 0.8; }
.plan .per { font-size: 1rem; opacity: 0.9; }
.plan .renew { font-size: 0.875rem; opacity: 0.8; }
.plan .btn { margin-block-start: auto; align-self: flex-start; }
.plan.best .btn { background: var(--ink); color: var(--cream); }
.includes { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 0.75rem 3rem; }
@media (min-width: 44rem) { .includes { grid-template-columns: 1fr 1fr; } }
.includes li { padding-inline-start: 1.75rem; position: relative; }
.includes li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--lime); }

/* waiting list on a lime band */
.join .wrap { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 52rem) { .join .wrap { grid-template-columns: 0.55fr 1.45fr; } }
.join-mascot { width: min(16rem, 60%); margin-inline: auto; }
.join-mascot img { width: 100%; height: auto; }
.join form { display: grid; gap: 1.5rem; max-width: 34rem; margin-block-start: 2rem; }
.join label { font-weight: 600; font-size: 1rem; display: block; }
.join input[type="email"], .join input[type="text"] {
  width: 100%; min-height: 3rem; padding: 0.5rem 0; margin-block-start: 0.25rem;
  font: 400 1.125rem var(--font-ui); color: var(--ink); background: transparent;
  border: 0; border-block-end: 2px solid var(--ink); border-radius: 0;
}
.join input::placeholder { color: rgb(11 42 46 / 0.55); }
.join small { font-weight: 400; font-size: 0.875rem; }
fieldset.course-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.course-pick legend { font-weight: 600; font-size: 1rem; padding: 0; margin-block-end: 0.75rem; }
.check { display: flex !important; gap: 0.75rem; align-items: center; font-weight: 400 !important; font-size: 1rem !important; }
.check input[type="checkbox"], .consent input { width: 1.25rem; height: 1.25rem; accent-color: var(--ink); flex: none; margin: 0; }
.check.other input[type="text"] { margin-block-start: 0; min-height: 2.5rem; font-size: 1rem; }
.consent { display: flex !important; gap: 0.75rem; align-items: flex-start; font-weight: 400 !important; }
.form-note { min-height: 1.5rem; font-size: 0.875rem; }
.form-note.is-error { font-weight: 700; }
.form-note.is-success { display: block; margin-block-start: 1rem; padding: 1rem 1.25rem; border-radius: 1rem; background: var(--ink); color: var(--cream); font-size: 1.0625rem; line-height: 1.5; }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

/* FAQ */
.faq-list { max-width: 48rem; }
details { border-block-start: 1px solid var(--line); }
details:last-child { border-block-end: 1px solid var(--line); }
summary { cursor: pointer; font-family: var(--font-display); font-size: 1.5rem; padding: 1.25rem 3rem 1.25rem 0; list-style: none; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; inset-inline-end: 0.25rem; top: 50%; translate: 0 -50%; font: 300 2rem var(--font-ui); color: var(--text-muted); }
details[open] summary::after { content: "\2212"; }
details > div { padding: 0 0 1.5rem; color: var(--text-muted); max-width: 40rem; }
.section-head h1 { font-size: clamp(2.5rem, 6vw, 4rem); }

/* footer: a big call to action, as on Memrise */
.site-footer { padding-block: clamp(3rem, 7vw, 5rem) 2rem; background: var(--band-bg); color: var(--band-muted); }
.foot-cta { display: grid; justify-items: center; text-align: center; gap: 1.25rem; padding-block-end: clamp(2.5rem, 6vw, 4rem); border-block-end: 1px solid var(--band-line); }
.foot-cta img { height: 3.5rem; width: auto; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; padding-block-start: 1.5rem; font-size: 0.875rem; }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.site-footer a:not(.btn) { text-decoration: none; color: var(--band-text); }
.site-footer a:not(.btn):hover { text-decoration: underline; }

/* legal pages */
.legal { padding-block: 3rem 5rem; max-width: 44rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-block-end: 1.5rem; }
.legal p { margin-block-end: 1rem; }
.legal .back { display: inline-block; margin-block-end: 2rem; font-weight: 600; }

/* more modern touches (from Babbel and Memrise) */
/* marker underline under key words */
.hl { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 0.09em; text-underline-offset: 0.14em; text-decoration-skip-ink: none; }
.band-lime .hl { text-decoration-color: var(--ink); }

/* wave edge on top of a coloured band, as on Memrise */
.has-wave { position: relative; margin-block-start: 2.5rem; }
.wave { position: absolute; inset-inline: 0; top: 0; width: 100%; height: clamp(1.5rem, 4vw, 3.5rem); transform: translateY(-99%); color: var(--band-bg); }
.band-lime > .wave { color: var(--lime); }

/* numbered step tags, as on Memrise */
.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; }
.steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: baseline; }
.steps .step-tag { grid-row: span 2; font: 700 0.75rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--lime); color: var(--ink); align-self: start; margin-block-start: 0.35rem; }
.steps b { font-family: var(--font-display); font-weight: 450; font-size: 1.5rem; }
.steps span:not(.step-tag) { color: var(--text-muted); }
#try { background: var(--panel); }

/* sticky call to action on phones */
.sticky-cta { display: none; }
@media (max-width: 52rem) {
  .sticky-cta { display: inline-flex; position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 30; box-shadow: 0 0.75rem 2rem -0.5rem rgb(11 42 46 / 0.55); transform: translateY(160%); transition: transform 0.35s ease; }
  .sticky-cta.show { transform: none; }
}

/* gentle reveal on scroll (only when JavaScript is available) */
.js .reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .sticky-cta { transition: none; } }

/* phones fan: keep the rotated phones inside the screen on narrow widths */
.fan { overflow-x: clip; }
@media (max-width: 44rem) { .fan .phone { max-width: 8.5rem; margin-inline: -0.5rem; } .fan .phone:nth-child(2) { max-width: 9.5rem; } }

/* country dropdown in the waiting-list form */
.join select {
  width: 100%; min-height: 3rem; margin-block-start: 0.25rem; padding: 0.5rem 2rem 0.5rem 0;
  font: 400 1.125rem var(--font-ui); color: var(--ink); background-color: transparent;
  border: 0; border-block-end: 2px solid var(--ink); border-radius: 0; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A2E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.25rem center; background-size: 1.25rem; cursor: pointer;
}
:root[dir="rtl"] .join select { padding: 0.5rem 0 0.5rem 2rem; background-position: left 0.25rem center; }
.join select option { color: #0B2A2E; background: #FAF5EC; }

/* waiting list: big coloured blocks to select a course */
.picks { display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .picks { grid-template-columns: repeat(3, 1fr); } }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick-body { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; min-height: 9.5rem; padding: 1.125rem; border-radius: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; opacity: 0.82; }
.pick-body svg { width: 2rem; height: 2rem; }
.pick-body b { font-family: var(--font-display); font-weight: 450; font-size: 1.3125rem; line-height: 1.15; }
.pick.p1 .pick-body { background: #FFFFFF; color: var(--ink); }
.pick.p2 .pick-body { background: #CFE8E5; color: var(--ink); }
.pick.p3 .pick-body { background: #FFF1B8; color: var(--ink); }
.pick.p4 .pick-body { background: #F6D5CF; color: var(--ink); }
.pick.p5 .pick-body { background: #DDE3F7; color: var(--ink); }
.pick .tick { position: absolute; inset-block-start: 0.875rem; inset-inline-end: 0.875rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; color: var(--ink); opacity: 0.7; pointer-events: none; }
.pick .tick svg { width: 1rem; height: 1rem; opacity: 0; }
.pick input:checked + .pick-body { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 3px var(--ink), 0 0.75rem 1.5rem -0.5rem rgb(11 42 46 / 0.4); }
.pick input:checked ~ .tick { background: var(--ink); color: var(--lime); border-color: var(--ink); opacity: 1; }
.pick input:checked ~ .tick svg { opacity: 1; }
.pick input:focus-visible + .pick-body { outline: 3px solid var(--ink); outline-offset: 4px; }

/* the waiting-list wave sits directly on the band above, with no cream strip between (one wavy line, not two) */
.join.has-wave { margin-block-start: 0; }

/* early bird deadline, highlighted */
.deadline { margin-block-end: 1.25rem; }
.deadline span { display: inline-block; background: var(--yellow); color: #0B2A2E; font: 700 1rem var(--font-ui); padding: 0.5rem 1.125rem; border-radius: 999px; }
.deadline span::before { content: "\23F3"; margin-inline-end: 0.5rem; }
.plan .price small { font-weight: 600; }

/* Oyda on the lime band: a crisp cream "sticker" outline and a soft shadow, so the green mascot stays visible without a fuzzy glow */
.join-mascot { width: min(18rem, 70%); }
.join-mascot img { filter: drop-shadow(3px 0 0 var(--cream)) drop-shadow(-3px 0 0 var(--cream)) drop-shadow(0 3px 0 var(--cream)) drop-shadow(0 -3px 0 var(--cream)) drop-shadow(2px 2px 0 var(--cream)) drop-shadow(-2px -2px 0 var(--cream)) drop-shadow(2px -2px 0 var(--cream)) drop-shadow(-2px 2px 0 var(--cream)) drop-shadow(0 0.9rem 0.9rem rgb(11 42 46 / 0.22)); }

/* delete-account page (added by Issam for the Google Play listing) */
.legal h2 { font-size: 1.625rem; margin-block: 2.25rem 0.75rem; }
.legal ul, .legal ol { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.legal li { margin-block-end: 0.375rem; }
.legal hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 3rem; }
.legal .lead { font-size: 1.1875rem; }
.legal .muted { color: var(--text-muted); }

/* ---- round of changes, 2026-10-19 evening ---- */
/* logo: lime wordmark in an ink badge, larger in the header and inline in headings */
.logo-badge { display: inline-flex; align-items: center; background: var(--ink); border-radius: 1rem; padding: 0.55rem 1.1rem; line-height: 0; }
.site-header .logo-badge img { height: 2rem; width: auto; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.45rem 0.85rem; border-radius: 0.8rem; } .site-header .logo-badge img { height: 1.5rem; } }
.logo-badge.inline { padding: 0.1em 0.42em 0.14em; border-radius: 0.28em; vertical-align: 0.04em; }
.logo-badge.inline img { height: 0.74em; width: auto; display: block; }
.join-title .logo-badge.inline img { height: 0.8em; }

/* hero: the photo, the app next to it, and the two stores (greyed out, coming soon) */
.hero-visual { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem 1.25rem; align-items: center; }
.hv-photo { position: relative; aspect-ratio: 4 / 5; }
.hv-photo > img { width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; }
.hv-photo .chip.c1 { inset-inline-start: -1rem; bottom: 2rem; }
.hv-app .phone { max-width: 14rem; }
.stores { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.25rem 0.75rem; margin-block-start: 0.5rem; }
.store { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.1rem; border-radius: 0.9rem; background: #DAD6CC; color: #7B8683; cursor: not-allowed; }
.store svg { width: 1.6rem; height: 1.6rem; fill: currentColor; flex: none; }
.store small { display: block; font-size: 0.6875rem; line-height: 1; }
.store b { display: block; font-size: 1.0625rem; line-height: 1.2; }
.store .soon { position: absolute; top: -0.65rem; inset-inline-end: 0.6rem; background: var(--lime); color: var(--ink); font: 700 0.6875rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px; }

/* problem cards */
.studies { display: block; font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.35; margin-block-start: 0.5rem; opacity: 0.95; }
.footnote { margin-block-start: 1.25rem; }
.footnote a { text-underline-offset: 0.2em; }
.evidence { margin-block-start: 1.5rem; }

/* feature blocks */
.tile { min-height: 12rem; }
.tile > span { font-size: 1.1875rem; line-height: 1.2; font-weight: 700; }
.tile small { font-size: 0.875rem; line-height: 1.4; font-weight: 400; opacity: 0.9; margin-block-start: 0.375rem; }
.tile svg { margin-block-end: 1.25rem; }
.fan { margin-block-start: clamp(3rem, 6vw, 5rem); }

/* pricing */
.eb { background: var(--yellow); color: #0B2A2E; padding: 0 0.25em; border-radius: 0.3em; font: inherit; }
.band-lime .eb { background: var(--ink); color: var(--lime); }
.plan.dark { background: var(--ink); color: var(--cream); border-color: transparent; }
.plan.dark .btn { background: var(--lime); color: var(--ink); }
.plan-grid.extras { margin-block-start: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .plan-grid.extras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .plan-grid.extras { grid-template-columns: repeat(2, 1fr); } }
.plan.mini { padding: 1.5rem 2rem; }

/* waiting list */
.join-title { font-size: clamp(2.5rem, 6.5vw, 5rem); line-height: 1.12; }
.join-lead { font-size: clamp(1.25rem, 2.4vw, 1.375rem); max-width: none; margin-block-start: 1.5rem; color: var(--ink); }

/* header logo: ink wordmark on a lime badge */
.site-header .logo-badge { background: var(--lime); }

/* header logo, round 3: the brand lockup, the app icon (lime tile) next to the wordmark, larger. The same icon is the favicon and the app icon, so it becomes the thing people recognise. */
.site-header .wrap { min-height: 5.25rem; }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.7rem; line-height: 0; }
.site-header .logo-lockup .logo-icon { height: 3rem; width: 3rem; border-radius: 0.85rem; }
.site-header .logo-lockup img.logo-ink, .site-header .logo-lockup img.logo-cream { height: 2.15rem; width: auto; }
@media (max-width: 30rem) {
  .site-header .wrap { min-height: 4.5rem; }
  .site-header .logo-lockup { gap: 0.5rem; }
  .site-header .logo-lockup .logo-icon { height: 2.5rem; width: 2.5rem; border-radius: 0.7rem; }
  .site-header .logo-lockup img.logo-ink, .site-header .logo-lockup img.logo-cream { height: 1.6rem; }
}

/* ---- round of changes, 2026-10-20 ---- */
/* header logo: the wordmark on a lime badge, larger (no icon, so nothing repeats) */
.site-header .wrap { min-height: 5.5rem; }
.site-header .logo-badge { padding: 0.65rem 1.4rem; border-radius: 1.1rem; }
.site-header .logo-badge img { height: 2.5rem; width: auto; }
@media (max-width: 30rem) {
  .site-header .wrap { min-height: 4.75rem; }
  .site-header .logo-badge { padding: 0.5rem 0.95rem; border-radius: 0.9rem; }
  .site-header .logo-badge img { height: 1.75rem; }
}

/* hero: the photo is exactly as tall as the phone */
.hero-visual { align-items: stretch; }
.hv-photo { aspect-ratio: auto; min-height: 18rem; }
.hv-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-app { display: flex; align-items: center; justify-content: center; }
.hv-app .phone { width: 100%; max-width: 14rem; }

/* big, centred section headings and centred problem cards */
.big-head h2 { font-size: clamp(3rem, 8vw, 5.5rem); }
.section-head.center { margin-inline: auto; text-align: center; max-width: none; }
.portrait figcaption { text-align: center; }
.evidence.center { margin-inline: auto; text-align: center; }
.evidence.center .lead { margin-inline: auto; }
.footnote { text-align: center; }

/* "The answer": the logo badge sits on the text line, not above it */
.answer-title { line-height: 1.2; }
.answer-title .logo-badge.inline { vertical-align: -0.1em; padding: 0.08em 0.4em 0.1em; }
.answer-title .logo-badge.inline img { height: 0.66em; }
.answer-title .colon { margin-inline-start: -0.05em; }
.solution .fan { margin-block-start: clamp(3rem, 6vw, 5rem); }

/* pricing */
.free-note { color: var(--band-muted); font-size: 1rem; margin-block-start: 1rem; }
.seg-mini { display: inline-flex; align-self: flex-start; background: rgb(11 42 46 / 0.12); border-radius: 999px; padding: 0.2rem; gap: 0.2rem; }
.seg-mini button { border: 0; background: transparent; color: var(--ink); font: 700 0.875rem var(--font-ui); padding: 0.45rem 1rem; border-radius: 999px; cursor: pointer; }
.seg-mini button[aria-selected="true"] { background: var(--ink); color: var(--cream); }
.term-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.plan.dark .tag { background: var(--lime); color: var(--ink); }
.plan.dark .per { opacity: 0.9; }
.plan:not(.dark):not(.best) .btn:only-child { display: none; }

/* waiting list: the white wordmark on ink */
.join .logo-badge.on-ink { background: var(--ink); }

/* ---- round of changes, 2026-10-20 (2) ---- */
/* smaller section titles */
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.big-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }

/* hero a little smaller */
.hv-app .phone { max-width: 12.5rem; }

/* the wordmark inside a heading follows the size of the text */
.wm img { height: 0.8em; width: auto; display: inline-block; vertical-align: baseline; margin-block-end: -0.03em; }
.answer-title { line-height: 1.25; }

/* the three screens on top of the photo; her phone (bottom, middle) stays visible */
.showcase .fan.overlay { position: absolute; top: 4%; inset-inline-end: -12%; width: 62%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; z-index: 3; }
.showcase .fan.overlay .phone { max-width: 7.25rem; margin-inline: -0.5rem; border-width: 0.3rem; border-radius: 1.3rem; }
.showcase .fan.overlay .phone:nth-child(1) { transform: rotate(-6deg) translateY(0.8rem); }
.showcase .fan.overlay .phone:nth-child(2) { transform: translateY(-0.5rem); max-width: 8.25rem; }
.showcase .fan.overlay .phone:nth-child(3) { transform: rotate(6deg) translateY(0.8rem); }
@media (max-width: 52rem) { .showcase .fan.overlay { inset-inline-end: -4%; width: 70%; } .showcase .fan.overlay .phone { max-width: 5.5rem; } .showcase .fan.overlay .phone:nth-child(2) { max-width: 6.25rem; } }

/* pricing */
.btn-soon { background: var(--soft) !important; color: var(--text-muted) !important; cursor: not-allowed; pointer-events: none; margin-block-start: auto; align-self: flex-start; }
.plan-list { margin: 0 0 0.5rem; padding-inline-start: 1.25rem; font-size: 1rem; }
.plan-list li { margin-block-end: 0.25rem; }

/* waiting list: a smaller title, the logo fits the text */
.join-title { font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.25; }
.join-title .logo-badge.inline { padding: 0.12em 0.45em 0.16em; vertical-align: -0.12em; }
.join-title .logo-badge.inline img { height: 0.72em; }

/* Oyda comes in from the left edge of the screen, waving */

/* the old single-phone rule for .showcase must not apply to the phones of the fan */
.showcase .fan.overlay .phone { position: relative; inset: auto; width: 100%; }
.showcase .fan.overlay { overflow: visible; }

/* round 6 */
.hero-visual { align-items: center; }
.hv-photo { aspect-ratio: 4 / 4.6; min-height: 0; }
.hv-photo > img { position: absolute; inset: 0; }
.hv-photo { width: 84%; justify-self: start; }
.section-head.center .deadline, .section-head.center .free-note { text-align: center; }
.site-header .logo-badge { padding: 0.5rem 1rem; border-radius: 0.5rem; }
.site-header .logo-badge img { height: 2.1rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.4rem 0.75rem; border-radius: 0.4rem; } .site-header .logo-badge img { height: 1.5rem; } }
.answer-title .wm img { height: 1.0em; margin-block-end: 0; vertical-align: -0.12em; }
.join-title .logo-badge.inline { padding: 0.1em 0.4em; border-radius: 0.25em; vertical-align: -0.2em; }
.join-title .logo-badge.inline img { height: 0.95em; }
@media (max-width: 52rem) {
  .hv-photo { width: 100%; }
  .showcase .fan.overlay { position: relative; top: auto; inset-inline-end: auto; width: 100%; margin-block-start: -3rem; }
  .showcase .fan.overlay .phone { max-width: 6.5rem; }
  .showcase .fan.overlay .phone:nth-child(2) { max-width: 7.5rem; }
}
.answer-title .wm img { height: 1.15em; vertical-align: -0.27em; margin-block-end: 0; }
.join-title .logo-badge.inline { display: inline-block; line-height: 1; vertical-align: baseline; padding: 0.12em 0.4em 0.1em; border-radius: 0.25em; }
.join-title .logo-badge.inline img { display: inline-block; height: 1.05em; vertical-align: -0.25em; }
.join-title .logo-badge.inline { margin-inline-end: 0.12em; }

/* round 7 */
.launch-bar { background: var(--ink-deep, #071A1D); color: var(--cream); display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.4rem var(--gutter); font-size: 0.875rem; }
.launch-bar p { margin: 0; }
.launch-bar b { color: var(--lime); font-variant-numeric: tabular-nums; }
.launch-bar .btn { min-height: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; }
.site-header .logo-badge { padding: 0.5rem 0.55rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.4rem 0.45rem; } }
.hv-photo { justify-self: end; }
.hero-visual { column-gap: 0.5rem; }
.free-note { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 1rem; font: 700 1.125rem var(--font-ui); color: var(--band-text); border: 2px solid var(--lime); border-radius: 999px; padding: 0.4rem 1.1rem; }
.free-note span { color: var(--lime); }
.who-panel { display: flex; flex-direction: column; gap: 0.75rem; }
.who-panel[hidden] { display: none; }
.hv-photo { width: 94%; }
.launch-bar .btn { background: var(--lime); color: #0B2A2E; }
.seg-mini button { white-space: nowrap; }
.section-head.center .deadline { margin-block-start: 1rem; }

.launch-bar { background: var(--yellow); color: #0B2A2E; }
.launch-bar b { color: #0B2A2E; }
.launch-bar .bar-logo { height: 1.15em; width: auto; vertical-align: -0.28em; }
.launch-bar .btn { background: #0B2A2E; color: var(--cream); }
.launch-bar p { white-space: nowrap; } .launch-bar .bar-logo { display: inline-block; }
.site-header .logo-badge img { height: 2.6rem; }
@media (max-width: 30rem) { .site-header .logo-badge img { height: 1.9rem; } }
.btn, .btn-soon { align-items: center; justify-content: center; text-align: center; }
@media (max-width: 52rem) { .join-mascot { width: min(11rem, 48%); } }
.join-lead mark.eb { background: var(--yellow); color: #0B2A2E; padding: 0.1em 0.4em; border-radius: 0.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.launch-bar .bar-offer mark { background: #0B2A2E; color: var(--yellow); padding: 0.15em 0.6em; border-radius: 0.4em; font-weight: 700; }
@media (max-width: 52rem) { .launch-bar .bar-offer { white-space: normal; text-align: center; } }
@media (max-width: 52rem) { .launch-bar { flex-direction: column; gap: 0.6rem; padding-block: 0.7rem; } .launch-bar p { line-height: 1.3; } .launch-bar .bar-offer mark { display: inline-block; line-height: 1.3; } }
.launch-bar { position: sticky; top: 0; z-index: 25; } .site-header { top: var(--bar-h, 0px); }
html { scroll-padding-top: calc(var(--bar-h, 0px) + 5.5rem); }
@media (max-width: 52rem) { .launch-bar .btn { display: none; } }
/* a light halo so the floating button stands out over dark areas */
:root:root .sticky-cta { box-shadow: 0 0 0 3px rgb(255 255 255 / 0.9), 0 0.5rem 1.5rem -0.25rem rgb(255 255 255 / 0.6); }

/* navbar logo trial: lime wordmark on white */
.site-header .logo-badge { background: #fff; box-shadow: 0 0 0 1px rgb(11 42 46 / 0.1); }
.site-header .logo-badge { box-shadow: none; }
/* navbar logo: white wordmark on a dark teal badge */
.site-header .logo-badge { background: #0F3D40; }
/* navbar logo: lime wordmark on the dark ink badge */
.site-header .logo-badge { background: #0B2A2E; }
/* navbar logo: no badge, ink wordmark, larger */
.site-header .logo-badge { background: transparent; padding: 0.25rem 0; border-radius: 0; }
.site-header .logo-badge img { height: 3.1rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.2rem 0; } .site-header .logo-badge img { height: 2.3rem; } }
.site-header .logo-badge img { height: 3.6rem; }
@media (max-width: 30rem) { .site-header .logo-badge img { height: 2.7rem; } }
/* trial: lime badge, cream wordmark */
.site-header .logo-badge { background: var(--lime); padding: 0.5rem 0.55rem; border-radius: 0.5rem; }
.site-header .logo-badge .logo-ink { display: none !important; }
.site-header .logo-badge .logo-cream { display: block !important; }
.site-header .logo-badge img { height: 2.6rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.4rem 0.45rem; } .site-header .logo-badge img { height: 1.9rem; } }
/* final: lime wordmark on the ink badge */
.site-header .logo-badge { background: #0B2A2E; }
/* navbar: white but translucent in light mode */
:root:root .site-header { background: rgb(255 255 255 / 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
/* final: no badge, ink wordmark */
.site-header .logo-badge { background: transparent; padding: 0.25rem 0; border-radius: 0; }
.site-header .logo-badge .logo-ink { display: block !important; }
.site-header .logo-badge .logo-cream { display: none !important; }
.site-header .logo-badge img { height: 3.4rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.2rem 0; } .site-header .logo-badge img { height: 2.5rem; } }

/* navbar in light mode: lime */
:root:root .site-header { background: rgb(198 224 0 / 0.88); }
/* navbar in light mode: light lime */
:root:root .site-header { background: rgb(232 242 140 / 0.85); }
/* navbar in light mode: white, translucent */
:root:root .site-header { background: rgb(255 255 255 / 0.72); }
/* navbar logo, final trial: ink wordmark on the lime badge, a small hello on load and on hover */
.site-header .logo-badge { background: var(--lime); padding: 0.55rem 0.6rem; border-radius: 0.5rem; }
.site-header .logo-badge .logo-ink { display: block !important; }
.site-header .logo-badge .logo-cream { display: none !important; }
.site-header .logo-badge img { height: 2.6rem; }
@media (max-width: 30rem) { .site-header .logo-badge { padding: 0.4rem 0.5rem; } .site-header .logo-badge img { height: 1.9rem; } }
/* navbar logo: cream wordmark on a dark ink badge */
.site-header .logo-badge { background: #0B2A2E; }
.site-header .logo-badge .logo-ink { display: none !important; }
.site-header .logo-badge .logo-cream { display: block !important; }

/* light mode: no badge, ink wordmark underlined with lime */
:root:root .site-header .logo-badge { background: transparent; padding: 0.35rem 0 0.7rem; border-radius: 0; position: relative; }
:root:root .site-header .logo-badge .logo-ink { display: block !important; }
:root:root .site-header .logo-badge .logo-cream { display: none !important; }
:root:root .site-header .logo-badge::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 0.4rem; background: var(--lime); border-radius: 999px; }
/* lime line sits right under the baseline of d, o and m, behind the tails of the y */
:root:root .site-header .logo-badge { z-index: 0; }
:root:root .site-header .logo-badge::after { top: calc(0.35rem + 2.6rem * 0.765 + 0.1rem); bottom: auto; z-index: -1; height: 0.4rem; }
@media (max-width: 30rem) { :root:root .site-header .logo-badge::after { top: calc(0.35rem + 1.9rem * 0.765 + 0.08rem); height: 0.3rem; } }
/* light mode: the wordmark between square brackets, no underline */
:root:root .site-header .logo-badge { padding: 0.3rem 1.1rem; }
:root:root .site-header .logo-badge::after { content: ""; position: absolute; inset: 0; top: 0; bottom: 0; height: auto; z-index: auto; background: none; border-radius: 0; border: 0.28rem solid var(--lime); border-inline: 0; }
:root:root .site-header .logo-badge::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(var(--lime), var(--lime)) left top / 0.28rem 100% no-repeat,
  linear-gradient(var(--lime), var(--lime)) right top / 0.28rem 100% no-repeat; }
@media (max-width: 30rem) { :root:root .site-header .logo-badge { padding: 0.25rem 0.85rem; } }
/* real brackets: each side is a vertical bar with short top and bottom serifs */
:root:root .site-header .logo-badge::before { inset: 0 auto 0 0; width: 0.7rem; background: none; border: 0.26rem solid var(--lime); border-inline-end: 0; }
:root:root .site-header .logo-badge::after { inset: 0 0 0 auto; width: 0.7rem; background: none; border: 0.26rem solid var(--lime); border-inline-start: 0; height: auto; }

.lead mark.eb { padding: 0.05em 0.35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* hero video fills the photo frame like the picture did */
.hv-photo > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2rem; display: block; }
.photo > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* "Sound familiar?": smaller cards on wide screens */
@media (min-width: 64rem) { .portraits { max-width: 54rem; margin-inline: auto; gap: 1.25rem; } }

/* "Sound familiar?" on phones and tablets: one story at a time, like Facebook stories (JS adds .stories) */
@media (max-width: 63.99rem) {
  .portraits.stories { display: block; position: relative; overflow: hidden; width: min(100%, 21rem); aspect-ratio: 5 / 7; margin: 0 auto; padding: 0; border-radius: 1.5rem; background: #1c3a3f; touch-action: pan-y; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .portraits.stories .portrait { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; opacity: 0 !important; transform: none !important; pointer-events: none; transition: opacity 0.25s ease; }
  .portraits.stories .portrait.active { opacity: 1 !important; }
  .story-bars { position: absolute; top: 0.65rem; inset-inline: 0.65rem; display: flex; gap: 0.3rem; z-index: 3; pointer-events: none; }
  .story-bars span { flex: 1; height: 3px; background: rgb(255 255 255 / 0.38); border-radius: 2px; overflow: hidden; }
  .story-bars i { display: block; height: 100%; width: 0; background: #fff; }
  .portraits.stories .portrait::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5rem; background: linear-gradient(to bottom, rgb(5 20 22 / 0.45), transparent); z-index: 2; pointer-events: none; }
}

/* "The answer": the three screenshots keep their place on the photo at every size, a little below the middle,
   in the right half so the woman's face stays free. Everything is a share of the photo's width, so it scales. */
.showcase .photo { position: relative; overflow: hidden; }
.showcase .photo > video { position: absolute; inset: 0; }
.showcase .fan.overlay { position: absolute; top: 31%; inset-inline-end: -5%; inset-inline-start: auto; width: 57%; margin: 0; padding: 0; display: flex; justify-content: center; align-items: flex-start; z-index: 3; overflow: visible; }
.showcase .fan.overlay .phone { width: 36%; max-width: none; margin-inline: -2.5%; border-width: 0.25rem; border-radius: 1.1rem; }
.showcase .fan.overlay .phone:nth-child(2) { width: 41%; max-width: none; }
@media (max-width: 52rem) {
  .showcase .fan.overlay { position: absolute; top: 31%; inset-inline-end: -4%; width: 57%; margin: 0; }
  .showcase .fan.overlay .phone { max-width: none; border-width: 0.15rem; border-radius: 0.7rem; }
  .showcase .fan.overlay .phone:nth-child(1) { transform: rotate(-6deg) translateY(0.4rem); }
  .showcase .fan.overlay .phone:nth-child(2) { max-width: none; transform: translateY(-0.3rem); }
  .showcase .fan.overlay .phone:nth-child(3) { transform: rotate(6deg) translateY(0.4rem); }
}
@media (max-width: 52rem) { .showcase .fan.overlay { inset-inline-end: -1%; } }
/* "The answer": a smaller photo on the left, so the screenshots sit beside her head and stick out past the photo's right edge */
.showcase .photo { width: 80%; margin-inline-end: auto; }
.showcase .fan.overlay { inset-inline-end: -3%; width: 58%; }
@media (max-width: 52rem) { .showcase .fan.overlay { inset-inline-end: -1%; width: 58%; } }
/* the screenshots' top edge moved up, roughly to a fifth of the photo's height */
.showcase .fan.overlay { top: 18%; }
@media (max-width: 52rem) { .showcase .fan.overlay { top: 18%; } }
.showcase .chip.s1 { top: 0.5rem; }
/* screenshots a bit further out to the right */
.showcase .fan.overlay { inset-inline-end: -9%; }
@media (max-width: 52rem) { .showcase .fan.overlay { inset-inline-end: -3%; } }
/* videos: no text selection, no drag, no touch callout (a deterrent, not real protection) */
video { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }
/* the wordmark inside the hero sentence: matches the text's size and sits on its baseline */
.hero .lead .wm img { height: 1.2em; vertical-align: -0.28em; margin-block-end: 0; }

/* phones: the hero label is a small pill that hangs below the picture instead of covering it */
@media (max-width: 52rem) {
  .hv-photo .chip.c1 { inset-inline-start: 0.5rem; bottom: -0.9rem; padding: 0.35rem 0.75rem; gap: 0.5rem; max-width: calc(100% - 1rem); }
  .hv-photo .chip.c1 .dot { display: none; }
  .hv-photo .chip.c1 small { display: none; }
  .hv-photo .chip.c1 b { font-size: 0.875rem; white-space: normal; line-height: 1.2; }
}
/* phones: the course choices in the waiting list are slim rows, not tall blocks */
@media (max-width: 39.99rem) {
  .picks { gap: 0.5rem; }
  .pick-body { flex-direction: row; align-items: center; justify-content: flex-start; gap: 0.75rem; min-height: 0; padding: 0.7rem 3rem 0.7rem 0.9rem; border-radius: 1rem; }
  .pick-body svg { width: 1.4rem; height: 1.4rem; flex: none; }
  .pick-body b { font-size: 1rem; }
  .pick .tick { inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: 0.8rem; width: 1.5rem; height: 1.5rem; }
  .pick input:checked + .pick-body { transform: none; }
}

/* close button on the top banner */
.launch-bar { position: sticky; }
.launch-bar[hidden] { display: none; }
.launch-bar .bar-close { position: absolute; inset-inline-end: 0.5rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: #0B2A2E; cursor: pointer; }
.launch-bar .bar-close:hover { background: rgb(11 42 46 / 0.12); }
.launch-bar .bar-close:focus-visible { outline: 2px solid #0B2A2E; outline-offset: 2px; }
@media (max-width: 52rem) { .launch-bar { padding-inline: 2.75rem; } .launch-bar .bar-close { top: 0.5rem; transform: none; } }
@media (max-width: 52rem) { .launch-bar { padding-inline: 2.5rem; font-size: 0.875rem; } .launch-bar .bar-offer mark { font-size: 0.875rem; } .launch-bar .bar-close { inset-inline-end: 0.25rem; top: 0.35rem; } }
/* the app video fills the phone frame like the screenshot did */
.phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase .chip.s1 { top: 1.25rem; }

.pick .soon { display: block; font-size: 0.875rem; font-weight: 600; opacity: 0.7; }

/* Why ydyom is better: one rounded card, ydyom column on ink */
:root { --vs-us-bg: var(--ink); --vs-us-fg: var(--cream); }
.vs { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 58rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1.75rem; overflow: hidden; }
.vs-head, .vs-row { display: grid; grid-template-columns: 1fr 1fr; }
.vs-head > span { display: flex; align-items: center; padding: 1rem; font-weight: 700; }
.vs-head > span:first-child { grid-column: 1; color: var(--text); font-size: 1.125rem; }
.vs-head > span:last-child { grid-column: 2; background: var(--vs-us-bg); color: var(--vs-us-fg); }
.vs-head .wm img { height: 2rem; width: auto; vertical-align: middle; margin: 0; }
.vs-head .logo-ink { display: none !important; }
.vs-head .logo-cream { display: none !important; }
.vs-head .logo-lime { display: inline-block !important; }
.vs-row { border-block-start: 1px solid var(--line); }
.vs-row b { grid-column: 1; grid-row: 1; padding: 0.875rem 1rem 0; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.vs-row p { margin: 0; display: flex; gap: 0.625rem; align-items: flex-start; padding: 0.5rem 1rem 1rem; font-size: 1rem; line-height: 1.4; }
.vs-row p::before { content: ""; flex: none; width: 1.375rem; height: 1.375rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-size: 62%; }
.vs-row .them { grid-column: 1; grid-row: 2; color: var(--text-muted); }
.vs-row .them::before { background-color: var(--soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9a9d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.vs-row .us { grid-column: 2; grid-row: 1 / 3; padding-top: 2.5rem; background: var(--vs-us-bg); color: var(--vs-us-fg); font-weight: 600; }
.vs-head > span:first-child, .vs-row b, .vs-row .them { background: var(--cream); } /* the generic-apps column; the label column stays white from tablet width up */
.vs-row .us::before { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2A2E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
@media (min-width: 44rem) {
  .vs-head, .vs-row { grid-template-columns: 9rem 1fr 1fr; }
  .vs-head > span { padding: 1.125rem 1.25rem; }
  .vs-head > span:first-child { grid-column: 2; }
  .vs-head > span:last-child { grid-column: 3; }
  .vs-row b { grid-row: 1; align-self: center; background: var(--surface); padding: 1.125rem 1.25rem; }
  .vs-row p { grid-row: 1; align-items: center; padding: 1.125rem 1.25rem; font-size: 1rem; }
  .vs-row .us { grid-row: 1; padding-top: 1.125rem; }
  .vs-row .them { grid-column: 2; grid-row: 1; }
  .vs-row .us { grid-column: 3; }
}
#how .section-head .wm img { height: 1.15em; vertical-align: -0.27em; margin-block-end: 0; }

.join-title .logo-badge .logo-lime { display: none !important; }

/* Course picks: equal-sized cards */
.picks { align-items: stretch; }
.join .pick { display: flex; }
.pick-body { flex: 1; width: 100%; }
@media (min-width: 40rem) {
  .join .pick-body { justify-content: flex-start; gap: 0.75rem; min-height: 0; }
  .pick .soon { margin-block-start: 0.25rem; }
}

/* Share button with icon, share menu, and the waiting-list actions row */
.btn-share svg { flex: none; }
.band-lime .btn.btn-share { background: transparent; color: inherit; }
.form-actions { margin-block-start: 0; }
.share-menu { position: fixed; z-index: 1000; min-width: 12rem; padding: 0.375rem; display: grid; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 0.75rem 2rem -0.5rem rgb(11 42 46 / 0.35); }
.share-menu a, .share-menu button { display: block; width: 100%; text-align: start; padding: 0.625rem 0.875rem; border: 0; border-radius: 0.625rem; background: transparent; color: inherit; font: 600 1rem var(--font-ui); text-decoration: none; cursor: pointer; }
.share-menu a:hover, .share-menu button:hover, .share-menu a:focus-visible, .share-menu button:focus-visible { background: var(--soft); outline: 0; }
/* The answer: the store badges under the buttons */
.solution .stores { margin-block-start: 1.25rem; }
/* "Sound familiar?": stories look: 9:16 frames, a title pill at the top right, bold left-aligned captions */
.portraits { grid-auto-columns: min(15rem, 68vw); }
.portrait { aspect-ratio: 9 / 16; }
.portrait figcaption { text-wrap: balance; text-align: start; font-family: var(--font-ui); font-weight: 700; font-size: 1.375rem; line-height: 1.2; padding: 5rem 1rem 1.5rem; text-shadow: 0 1px 8px rgb(0 0 0 / 0.45); }
.portrait .story-title { position: absolute; top: 0.9rem; inset-inline-end: 0.9rem; z-index: 3; display: block; width: fit-content; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--lime); color: var(--ink); font: 700 0.875rem var(--font-ui); letter-spacing: 0.06em; text-transform: uppercase; pointer-events: none; }
@media (max-width: 63.99rem) {
  .portraits.stories { aspect-ratio: 9 / 16; width: min(100%, 17rem); }
  .portraits.stories .portrait figcaption { font-size: 1.1875rem; padding: 5rem 0.875rem 1.25rem; }
  .portraits.stories .portrait .story-title { top: 1.5rem; font-size: 0.875rem; }
  .portraits.stories .portrait::before { height: 6.5rem; background: linear-gradient(to bottom, rgb(5 20 22 / 0.6), transparent); }
}
@media (min-width: 64rem) { .portraits { max-width: 46rem; } }

.free-note-row { text-align: center; margin-block-start: 2rem; }

/* pricing, as on Babbel: two cards per audience, monthly price first, the charge next to it */
.plan-grid.two, .plan-grid.one { grid-template-columns: 1fr; max-width: 52rem; margin-inline: auto; }
@media (min-width: 44rem) { .plan-grid.two { grid-template-columns: repeat(2, 1fr); } }
.plan-grid.one { max-width: 26rem; }
.plan h3 { font-size: 1.5rem; }
.plan-month { font-size: 1.125rem; margin: 0; }
.plan-month b { font-family: var(--font-display); font-weight: 450; font-size: 2.75rem; line-height: 1.05; }
.plan-who { font-size: 0.875rem; opacity: 0.85; margin: 0; }
.plan-save { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; font: 700 0.875rem var(--font-ui); }
.plan .plan-save .tag { background: var(--yellow); color: #0B2A2E; }
.plan .plan-save .tag + span { font-weight: 400; }
.plan-total { font-size: 0.875rem; opacity: 0.85; margin: 0; }
.plan-fine { text-align: center; font-size: 0.875rem; margin: 1.5rem 0 0; }
.plan-fine.small { font-size: 0.875rem; opacity: 0.75; margin-block-start: 0.5rem; }
.plan-grid.extras { margin-block-start: 2rem; }
.plan-grid.three { grid-template-columns: 1fr; max-width: 66rem; margin-inline: auto; }
@media (min-width: 56rem) { .plan-grid.three { grid-template-columns: repeat(3, 1fr); } }
.plan-offer { font-size: 1rem; margin: 0; }
.plan.free { background: #E8DDC6; color: var(--ink); border-color: transparent; }
.plan-grid.four { grid-template-columns: 1fr; max-width: 80rem; margin-inline: auto; }
@media (min-width: 44rem) { .plan-grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 74rem) { .plan-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Oyda lives in the footer, small, next to the wordmark; the waiting-list block is one column without her */
@media (min-width: 52rem) { .join .wrap { grid-template-columns: 1fr; } }
.foot-brand { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.foot-cta .foot-mascot { height: 3rem; width: auto; }

/* The sign-up success message: a mail icon, the title with a lighter spam hint, then what to do */
.form-note.is-success { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; }
.form-note.is-success .note-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--yellow); color: var(--ink); }
.form-note.is-success .note-icon svg { width: 1.4rem; height: 1.4rem; }
.form-note.is-success .note-text { display: grid; gap: 0.35rem; }
.form-note.is-success strong { color: var(--yellow); font-family: var(--font-display); font-weight: 450; font-size: 1.35rem; line-height: 1.25; }
.form-note.is-success strong em { display: block; margin-block-start: 0.15rem; color: var(--cream); opacity: 0.8; font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: 0.9375rem; }
.form-note.is-success .note-body { font-size: 1.0625rem; }
/* Oyda stands on top of the wordmark in the footer, a bit larger */
.foot-brand { flex-direction: column; gap: 0.5rem; }
.foot-cta .foot-mascot { height: 5.5rem; order: -1; }
.faq-more { margin-block-start: 2rem; }
/* The LinkedIn icon in the footer */
.site-footer a.social { display: inline-flex; align-items: center; }
.site-footer a.social svg { width: 1.25rem; height: 1.25rem; }
/* Legal pages: sub-headings */
.legal h3 { font-size: 1.2rem; margin-block: 1.5rem 0.5rem; }
/* The waiting-list block is centered on the page: title and lead centered, the form in the middle */
.join .wrap > div { max-width: 44rem; margin-inline: auto; }
.join .join-title, .join .join-lead { text-align: center; }
.join form { margin-inline: auto; text-align: start; }
/* ... and a bit smaller */
.showcase .fan.overlay { width: 50%; }
@media (max-width: 52rem) { .showcase .fan.overlay { width: 50%; } }
/* desktop: the three app screenshots sit a bit further left, over the photo */
@media (min-width: 52.01rem) { .showcase .fan.overlay { inset-inline-end: 2%; } }
/* ... and a bit lower */
.showcase .fan.overlay { top: 26%; }
@media (max-width: 52rem) { .showcase .fan.overlay { top: 26%; } }

/* A plan that is announced but not for sale yet: greyed out, no prices. */
.plan.is-soon { opacity: 0.55; filter: grayscale(1); pointer-events: none; user-select: none; }

/* phones: the "Focused progress" chip on the photo is one line, so it stays clear of the woman's head */
@media (max-width: 52rem) {
  .showcase .chip.s1 { top: 0.5rem; padding: 0.4rem 0.75rem; gap: 0.5rem; max-width: calc(100% - 1rem); white-space: nowrap; }
  .showcase .chip.s1 .dot { display: none; }
  .showcase .chip.s1 b { display: inline; font-size: 0.875rem; }
  .showcase .chip.s1 small { font-size: 0.8125rem; margin-inline-start: 0.4rem; }
}