/* ============================================================================
   Dara — the landing's design system.

   This is the product's "Copilot" system (DESIGN.md) applied to the marketing
   site. `src/static/css/styles.css` is the implementation it mirrors: a token
   whose value differs from the app's is a BUG, not a choice. Anything the
   landing does differently on purpose is written down in the deviations
   register in `landing/AGENTS.md` — nowhere else.

   Loaded by every page under landing/. Page families add one more sheet on
   top: home.css (the 8 selling pages), article.css (blog + compare),
   legal.css (terms/privacy/refunds).
   ============================================================================ */

/* ---------------------------------------------------------------- type ---
   Open Sans, self-hosted, served by the same origin as this page from the
   app's own vendor directory (/static is mounted before landing/ in
   src/main.py). The site used to pull three families from Google Fonts —
   Fraunces + Geist + Geist Mono — for a system that has one. */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/vendor/fonts/open-sans/open-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/vendor/fonts/open-sans/open-sans-var-latin-ext.woff2') format('woff2');
  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: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/vendor/fonts/open-sans/open-sans-var-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/static/vendor/fonts/open-sans/open-sans-var-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ------------------------------------------------------------- display ---
   Literata, self-hosted, ONE weight and its italic. The display face is the
   landing's alone — the app has no headline read at 60px and no room for a
   second family — and it exists because Open Sans set at 62px is a UI face
   doing display work: heavy, even-stroked, and blunt where this page needs
   contrast and air.

   Why not the Fraunces the site used to load: **Fraunces has no Cyrillic.**
   Prod's Russian headline never rendered in it — it fell through the stack to
   Iowan Old Style, which exists only on macOS, so the face Nikita sees is not
   the face a Windows visitor sees (Georgia) or an Android one (whatever the
   system serif is), and Android is most of the paid traffic. Literata carries
   Latin, Latin-ext, Cyrillic and Cyrillic-ext, so every locale and every
   device gets the same headline for the first time. Devanagari and Arabic are
   not in it — those two locales point --font-display at their Noto face. */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-italic-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-italic-latin-ext.woff2') format('woff2');
  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: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/literata/literata-400-normal-latin-ext.woff2') format('woff2');
  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;
}

/* -------------------------------------------------------------- tokens ---
   Copied from the app's :root. Light only — see the deviations register for
   why the landing has no dark theme. */
:root {
  --bg-primary:    #F7F3EB;   /* the cream page */
  --bg-surface:    #FFFFFF;   /* cards */
  --bg-secondary:  #F3EEE5;   /* neutral chip / icon plate */
  --bg-tertiary:   #E7E0D6;
  --border-color:  #E7E0D6;   /* hairline */

  --text-primary:   #1F1F1F;  /* ink */
  --text-secondary: #6E6963;
  --text-muted:     #9B948A;

  --accent-primary:       #171717;  /* the one accent: the dark CTA pill */
  --accent-primary-hover: #000000;
  --on-accent:            #FFFFFF;
  --accent-danger:        #B8433A;
  --accent-success:       #33B15C;
  --accent-warning:       #D4A04A;
  /* On the paywall green means FREE (the trial tags, the recommended plan).
     The landing sells the same free trial, so it says it in the same colour. */
  --badge-green:    #2E7D45;
  --badge-green-bg: #E4F2E7;
  --hero: #F9E3C8;            /* the peach highlight */

  --grad-page:  linear-gradient(180deg, #F7F3EB 30%, #F9EBDE);
  --grad-voice:
      radial-gradient(120% 60% at 15% 18%, rgba(255,255,255,.55), transparent 60%),
      radial-gradient(90% 45% at 85% 32%, rgba(255,255,255,.4), transparent 65%),
      radial-gradient(140% 70% at 50% 78%, rgba(255,255,255,.35), transparent 70%),
      linear-gradient(180deg, #9FC2DE 0%, #AECBE3 35%, #DCE9F2 100%);
  --call-dock-bg:   #C9DCEA;
  --call-dock-line: rgba(255, 255, 255, 0.72);

  --font-sans: 'Open Sans', 'Segoe UI', 'SF Pro Text', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  /* Headlines only — h1/h2, the step numerals, and nothing else. */
  --font-display: 'Literata', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;

  --radius-sm:    8px;
  --radius-md:   18px;   /* option rows, inputs, small cards */
  --radius-lg:   24px;   /* cards */
  --radius-sheet:28px;
  --radius-btn:  999px;
  --radius-full: 9999px;

  --shadow-sm:       0 6px 18px rgba(31, 26, 20, 0.06);
  --shadow-md:       0 10px 30px rgba(31, 26, 20, 0.08);
  --shadow-floating: 0 16px 40px rgba(31, 26, 20, 0.14);

  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* ---------------------------------------------------------------- base --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Two halves of one gradient. Every section carries one of them, and the
   sequence is arranged so the stop a section ENDS on is the stop the next one
   BEGINS on — which is what makes a long page breathe warm and cool without a
   single visible seam. The old sheet put --grad-page on the hero alone, so the
   peach it ended on met flat cream and drew a hard line across the page. */
.surface-warm { background: linear-gradient(180deg, #F7F3EB 0%, #F9EBDE 100%); }
.surface-cool { background: linear-gradient(180deg, #F9EBDE 0%, #F7F3EB 100%); }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Kept from the old sheet, and still only a net: the real overflows are
     fixed where they start (see the 375px block at the foot of home.css).
     landing/AGENTS.md — hiding overflow is worse than scrolling it. */
  overflow-x: hidden;
}

a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
/* Display tier: the two sizes a person reads from across the room. Regular
   weight, because contrast here comes from the letterforms and the size, not
   from mass — the old site set its headline at 320 for exactly this reason. */
h1, h2 { font-family: var(--font-display); font-weight: 400; }
/* The app's display sizes are drawn for a 390px phone. A marketing page is
   read at 1440 and its headline is the first thing on it, so the scale runs
   further up — and tracking is optical, so a line set at 84px has to be
   tighter than the same line at 33px to hold together. Card headings, which
   are the SAME size here as in the app, keep the app's 20/600/-0.01em
   exactly. */
h1 { font-size: clamp(38px, 5vw, 70px); letter-spacing: -0.022em; line-height: 1.03; }
h2 { font-size: clamp(30px, 4vw, 52px);  letter-spacing: -0.02em;  line-height: 1.06; }
h3 { font-size: 20px;  letter-spacing: -0.01em; line-height: 1.25; }
h4 { font-size: 17px;  letter-spacing: -0.01em; line-height: 1.3; }

/* A headline is one sentence in ink; the clause that carries the offer is the
   heavier one. The old system said it with a teal serif italic — there are no
   serifs here and no second accent, so weight does the work. */
/* The clause that carries the offer. Three signals at once — the italic, the
   colour, and the mark under it — because it is the one line on the page a
   visitor has to leave with. Green, not a new hue: on the paywall this click
   lands on, green already means free. */
h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--badge-green);
}
h3 em, h4 em { font-style: normal; font-weight: 700; color: var(--text-primary); }
/* Ordinary inline emphasis stays italic: in body copy `He <em>is</em> cooking`
   marks a word being talked about, which is what italic is for. */
em, .ital { font-style: italic; }

p { margin: 0 0 1em; color: var(--text-secondary); }
/* The sentence under a heading. Capped by measure, not by column width, so it
   sets its own line length wherever it lands. */
.lead { max-width: 46ch; color: var(--text-secondary); font-size: 19px; line-height: 1.55; }
strong, b { font-weight: 700; color: var(--text-primary); }

.container {
  width: min(1180px, calc(100% - 48px));
  margin-inline: auto;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- buttons ---
   Primary = the one dark pill. Secondary = the "line" button: white surface
   and the soft shadow, ink text, NO border (DESIGN.md → Buttons). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent-primary); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-primary-hover); box-shadow: var(--shadow-md); }
.btn-primary .arrow { transition: transform var(--transition-normal); }
.btn-primary:hover .arrow { transform: translateX(4px); }

.btn-alt { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.btn-alt:hover { box-shadow: var(--shadow-md); }

.btn-big { min-height: 54px; padding: 16px 34px; width: 100%; max-width: 420px; }
.btn .tg-icon { width: 20px; height: 20px; flex-shrink: 0; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Quality floor: every interactive thing on the page is reachable and says so. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------------- nav --- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 243, 235, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
nav.scrolled { border-bottom-color: var(--border-color); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

/* The app's wordmark, exactly: ink text, 800, -0.02em. No serif, no dot. */
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-actions { display: flex; align-items: center; gap: 10px; }

/* Soft chip (DESIGN.md → Badges / Chips): r999, 7px 14px, neutral fill. */
.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.lang-pill:hover { color: var(--text-primary); }

/* The same object as the app's `.signin-chip` / `#onboarding-signin-link`:
   a funnel URL always starts a fresh anonymous session, so signing in is the
   only way a returning learner keeps their progress. It is not a whisper. */
.login-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.login-link:hover { box-shadow: var(--shadow-md); }
.login-link:active { transform: scale(0.97); }

/* -------------------------------------------------------------- footer --- */
footer {
  background: var(--accent-primary);
  color: rgba(255, 255, 255, 0.66);
  padding: 48px 0 32px;
}
footer a { color: rgba(255, 255, 255, 0.66); text-decoration: none; transition: color 0.15s ease; }
footer a:hover { color: #FFFFFF; }
.foot-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
}
.foot-inner .wordmark { color: #FFFFFF; font-size: 20px; }
/* Four links and three gaps measure past a 327px row, so the last one (the
   email) used to be clipped. It never wraps on desktop, where there is room. */
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ----------------------------------------------------------------- FAQ ---
   Hairline rows, no card. The marker is Lucide `chevron-down` rotating on
   open — the old +/− was a monospace glyph from a font this system no longer
   loads, and DESIGN.md has one icon set. */
.faq-list { display: grid; gap: 0; max-width: 780px; }
.faq-item { border-bottom: 1px solid var(--border-color); }
.faq-item:first-child { border-top: 1px solid var(--border-color); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: no-repeat center / 20px 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239B948A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
/* Two shapes in the wild: most pages use <details>/<summary>, ru/index.html
   and a few blog posts print the answers open under an <h3>. Both are FAQ
   rows and both read the same. */
.faq-item > h3 {
  margin: 0;
  padding: 24px 0 8px;
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.faq-item p,
.faq-item .faq-answer {
  margin: 0;
  padding: 0 0 24px;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- tables --- */
/* A comparison is an object on the page, not a set of rules floating on the
   background — it gets the same white card and the same soft shadow as every
   other object here, and its head band is the neutral chip fill. */
.compare-table,
.price-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-size: 15px;
}
.compare-table th,
.price-table th {
  padding: 15px 20px;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: start;
}
/* The column the page is arguing for is the one in ink. */
.compare-table th:last-child,
.price-table th:last-child { color: var(--text-primary); }
.compare-table td,
.price-table td {
  padding: 16px 20px;
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}
.compare-table tr:first-child td,
.price-table tr:first-child td { border-top: none; }
.compare-table td:first-child,
.price-table td:first-child {
  color: var(--text-primary);
  font-weight: 600;
}
.compare-table td:last-child,
.price-table td:last-child { color: var(--text-primary); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .compare-table,
  .price-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ----------------------------------------------------------- final CTA --- */
.final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 112px 0 120px;
  text-align: center;
}
.final-cta .bg-img { position: absolute; inset: 0; z-index: -2; }
.final-cta .bg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
      radial-gradient(ellipse 70% 60% at 50% 42%, rgba(247, 243, 235, 0.72), rgba(247, 243, 235, 0.94) 70%),
      linear-gradient(180deg, #F7F3EB 0%, #F9EBDE 100%);
}
.final-cta h2 { margin-bottom: 20px; }
.final-cta p { font-size: 19px; max-width: 520px; margin: 0 auto 30px; }
.final-cta .cta-row { justify-content: center; }
.final-cta .fineprint {
  max-width: 480px;
  margin: 22px auto 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.6;
}
.final-cta .fineprint a { color: var(--text-secondary); text-decoration: underline; }

/* -------------------------------------------------------------- motion ---
   The system's list entrance: rise-in .45s cubic-bezier(.22,.9,.32,1),
   staggered .04s. Declared INSIDE the no-preference query so a reduced-motion
   visitor is never left looking at `opacity: 0`. */
@media (prefers-reduced-motion: no-preference) {
  .reveal > * {
    opacity: 0;
    transform: translateY(12px);
    animation: reveal 0.45s cubic-bezier(0.22, 0.9, 0.32, 1) both;
  }
  .reveal > *:nth-child(1) { animation-delay: 0.04s; }
  .reveal > *:nth-child(2) { animation-delay: 0.08s; }
  .reveal > *:nth-child(3) { animation-delay: 0.12s; }
  .reveal > *:nth-child(4) { animation-delay: 0.16s; }
  .reveal > *:nth-child(5) { animation-delay: 0.20s; }
  .reveal > *:nth-child(6) { animation-delay: 0.24s; }
  @keyframes reveal { to { opacity: 1; transform: none; } }
}

/* ----------------------------------------------------------------- RTL ---
   Most of what the old sheets patched here is gone: the shared rules are
   written with logical properties, so `dir="rtl"` mirrors them by itself.
   What remains is what direction genuinely cannot infer. */
html[dir="rtl"] { text-align: right; }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn-primary:hover .arrow { transform: scaleX(-1) translateX(4px); }

/* ------------------------------------------------------------ narrow ---
   Wordmark + sign-in + language chip + a full-size CTA want more than a
   327px row. Compact the CTA rather than drop it: once the hero scrolls
   away this is the only entry point still on screen. */
@media (max-width: 480px) {
  .nav-actions { gap: 6px; }
  .nav-actions .login-link { padding: 8px 12px; font-size: 13px; }
  .nav-actions .lang-pill { padding: 7px 10px; }
  .nav-actions .btn { min-height: 44px; padding: 11px 15px; font-size: 14px; gap: 8px; }
  .nav-actions .btn .arrow { display: none; }
  .nav-actions .btn .tg-icon { width: 16px; height: 16px; }
  .wordmark { font-size: 21px; }
}