/* ============================================================================
   The selling page (landing/index.html and its 7 locale twins).
   Loaded after dara.css, which owns the tokens, the type and the chrome.
   ============================================================================ */

section { position: relative; padding: 104px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

/* ------------------------------------------------------------- surfaces ---
   The page is ONE continuous field. Each block ends on the stop the next one
   begins on, so the warm swells read as the page breathing rather than as
   bands stacked on top of each other. Read top to bottom:
     hero      cream -> peach
     audience  peach -> cream   (the short strip is the transition)
     definition/problem         flat cream
     how       cream -> peach
     faq       peach -> cream
     final CTA cream -> peach   (in dara.css, behind its photograph)
   Nothing here needs a hairline: a hairline separates surfaces that TOUCH,
   and these are the same surface continuing. */
.hero      { background: linear-gradient(180deg, #F7F3EB 0%, #F9EBDE 100%); }
.audience  { background: linear-gradient(180deg, #F9EBDE 0%, #F7F3EB 100%); }
#how       { background: linear-gradient(180deg, #F7F3EB 0%, #F9EBDE 100%); }
section.faq { background: linear-gradient(180deg, #F9EBDE 0%, #F7F3EB 100%); }

/* --------------------------------------------------------- section heads ---
   A claim and its elaboration are two things, so they get two columns: the
   eyebrow and the headline on the left, the sentence that qualifies it set
   against the headline's baseline on the right. It is also the honest way to
   spend a 1180px measure — left-aligning both left the right 40% of every
   screen empty. */
.section-head { margin-bottom: 52px; }
.section-head h2 { margin-top: 14px; }
.section-head p { margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.55; }

@media (min-width: 940px) {
  .section-head,
  .problem-head {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    column-gap: 64px;
    align-items: end;
  }
  .section-head .eyebrow,
  .problem-head .eyebrow { grid-column: 1; grid-row: 1; }
  .section-head h2,
  .problem-head h2 { grid-column: 1; grid-row: 2; }
  .section-head p,
  .problem-head p { grid-column: 2; grid-row: 2; margin-bottom: 8px; }
  /* The FAQ head runs down its own column instead — see the FAQ block. */
  .faq .section-head { display: block; }
}

/* ---------------------------------------------------------------- hero ---
   The one gradient surface at the top of the page: the app's own cream→peach
   content surface, completing inside roughly one screen instead of being
   stretched over six. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 72px 0 104px;
}
@media (max-width: 720px) { .hero { padding: 36px 0 64px; } }

/* The device is lit. One soft wash of the call screen's own blue
   (--grad-voice's first stop) behind the phone, so the product's surface
   reaches into the page instead of sitting on it as a rectangle. No new hue
   enters the palette — this is the sky the mock is already painted in. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline-end: -8%;
  top: 2%;
  width: min(820px, 64%);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
      rgba(159, 194, 222, 0.40) 0%,
      rgba(159, 194, 222, 0) 66%);
}
@media (max-width: 960px) {
  .hero::before { inset-inline-end: -30%; top: auto; bottom: 0; width: 130%; }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* The hero headline shares its row with the phone, so it is sized by the
   COLUMN it lives in, not by the page — at the full display size the third
   line ran under the device. */
.hero h1 { margin: 18px 0 26px; font-size: clamp(36px, 4.5vw, 64px); }

/* The peach bar under the offer. It is `--hero` — the same peach the app uses
   for the highlight card and the learner's own transcript bubble — drawn on
   the shape scale (r999) and level, not rotated: the old coral swash was a
   hand-drawn mark from a system that had one. */
.hero h1 .highlight { position: relative; display: inline-block; }
.hero h1 .highlight::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: -0.05em;
  bottom: 0.10em;
  height: 0.26em;
  border-radius: var(--radius-btn);
  background: var(--hero);
  /* Off the horizontal by a degree: a mark made by a hand, not a rule set by
     a grid. The old site drew it in coral; the colour is ours now, the
     gesture is the part that was worth keeping. */
  transform: rotate(-1.1deg);
}

/* Arabic sits lower against the Latin baseline, so the same bar that underlines
   a Latin price runs straight through the descenders of ريال. Drop it and thin
   it for RTL — it is a mark under the phrase, never a band across it. */
[dir="rtl"] .hero h1 .highlight::after { bottom: -0.02em; height: 0.20em; transform: rotate(1.1deg); }

.hero-sub {
  max-width: 44ch;
  margin-bottom: 32px;
  color: var(--text-secondary);
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.55;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 24px;
  color: var(--text-muted);
  font-size: 13px;
}
.hero-meta b { color: var(--text-primary); font-weight: 700; }
/* No separator glyphs: on a narrow column they either dangle at the end of a
   wrapped line or open the next one. The gap says the same thing. */
.hero-meta .pip { display: none; }

/* ------------------------------------------------------- the call mock ---
   A drawing of the call screen as it actually is: the voice sky, ONE status
   pill top-start carrying Dara's state and the timer, the speed and end chips
   top-end, and the dock plate the mic stands on. Every value here is the
   app's own, scaled by ~0.82 because the frame is 320px wide where a phone is
   390 (68px mic → 56, 108px dock → 88).

   It cycles through the three states the product really shows — speaking,
   listening, thinking — using the product's own captions from src/locales. */
.app-mockup { display: flex; justify-content: center; }

.app-frame {
  position: relative;
  width: 344px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 36px;
  background: var(--grad-voice);
  box-shadow: var(--shadow-floating), 0 0 0 6px #2A2A2A, 0 0 0 8px rgba(31, 26, 20, 0.08);
}
@media (max-width: 960px) { .app-frame { width: 300px; min-height: 520px; } }

/* top band — read only */
.app-topbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
}

.app-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: var(--text-secondary);
}
.app-status-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--accent-primary);
}
.app-status-icon > * { grid-area: 1 / 1; }
.app-status-caption {
  display: grid;
  min-width: 62px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
/* All three captions share one cell, so the pill is as wide as the longest
   one and never resizes mid-cycle. */
.app-status-caption > span { grid-area: 1 / 1; }
.app-status-sep { color: var(--text-muted); font-size: 12px; }
.app-status-timer {
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The product's speech line: four round-capped strokes, a travelling wave,
   1.05s, .09s apart. The one moving thing on a call screen. */
.speak-line { display: flex; align-items: center; gap: 2.5px; height: 15px; }
.speak-line span {
  width: 2.5px;
  height: 11px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transform: scaleY(var(--rest, 0.5));
}
.speak-line span:nth-child(1) { --rest: 0.42; }
.speak-line span:nth-child(2) { --rest: 0.85; }
.speak-line span:nth-child(3) { --rest: 0.55; }
.speak-line span:nth-child(4) { --rest: 0.70; }

.app-top-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }
.app-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 11px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.app-chip-end { color: var(--accent-danger); }
.app-chip svg { width: 16px; height: 16px; }

/* the lesson, on the same surface */
.app-lesson {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 62px 14px 100px;
  min-height: 0;
}
.app-task {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}
.app-card {
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.app-card img { width: 100%; height: auto; border-radius: 13px; }

/* the dock — a plate, full-bleed on the bottom edge, the lesson ends at its
   top edge instead of running under the controls */
.app-dock {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 16px 15px;
  background: var(--call-dock-bg);
  border-top: 1px solid var(--call-dock-line);
  border-start-start-radius: var(--radius-sheet);
  border-start-end-radius: var(--radius-sheet);
  box-shadow: 0 -10px 28px rgba(20, 26, 34, 0.13);
}
.app-dock-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}
.app-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-surface);
  box-shadow: var(--shadow-floating);
  color: var(--text-primary);
}
.app-mic svg { width: 20px; height: 20px; }
/* One step quieter, and said by material rather than by hiding the control. */
.app-sat {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
}
.app-sat svg { width: 18px; height: 18px; }

/* The cycle: 9s, three equal states, the caption and its glyph on the same
   clock. Motion-only — with reduced motion the pill simply holds `speaking`,
   which is the state the speech line rests in. */
.app-state { opacity: 0; }
.app-state-speaking { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .app-state { animation: app-state 9s linear infinite; }
  .app-state-speaking  { animation-delay: 0s; }
  .app-state-listening { animation-delay: 3s; }
  .app-state-thinking  { animation-delay: 6s; }
  @keyframes app-state {
    0%, 1%    { opacity: 0; }
    3%, 30%   { opacity: 1; }
    32%, 100% { opacity: 0; }
  }
  .speak-line span { animation: app-speak 1.05s ease-in-out infinite; }
  .speak-line span:nth-child(2) { animation-delay: 0.09s; }
  .speak-line span:nth-child(3) { animation-delay: 0.18s; }
  .speak-line span:nth-child(4) { animation-delay: 0.27s; }
  @keyframes app-speak {
    0%, 100% { transform: scaleY(0.3); }
    35%      { transform: scaleY(1); }
    70%      { transform: scaleY(0.55); }
  }
}

/* ------------------------------------------------------------ audience --- */
.audience { padding: 40px 0; }
.audience-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* Soft chips, the same shape as the app's: r999, 7px 14px. */
/* Objects on the field, so they read as claims rather than as a caption:
   the surface fill and the one soft shadow, like every other card here. */
.audience-inner span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}
.audience-inner svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }

/* ---------------------------------------------------------- definition --- */
.definition { padding: 56px 0 8px; }
/* A dense block of prose in two columns reads at a comfortable measure AND
   uses the width it is given — one 720px column left two thirds of the page
   empty beside it. */
.definition-inner {
  max-width: 1040px;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.7;
}
@media (min-width: 900px) {
  .definition-inner { columns: 2; column-gap: 64px; }
}
.definition-inner strong { color: var(--text-primary); font-weight: 700; }
.definition-inner a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------- problem --- */
.problem { padding: 96px 0; }
@media (max-width: 720px) { .problem { padding: 64px 0; } }
.problem-head { margin-bottom: 52px; }
.problem-head h2 { margin-top: 14px; }
.problem-head p { margin: 16px 0 0; max-width: 46ch; font-size: 19px; line-height: 1.55; }
@media (min-width: 940px) { .problem-head p { margin-top: 0; } }

/* Two cards, not a hairline grid: the system separates surfaces with the one
   soft shadow, and the second card is the app's dark card. */
.problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 720px) { .problem-grid { grid-template-columns: minmax(0, 1fr); } }
.problem-cell {
  min-width: 0;
  padding: 34px 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
}
.problem-cell h3 {
  margin: 0 0 18px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.problem-cell ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.problem-cell li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--text-secondary);
  font-size: 15.5px;
}
.problem-cell.old li::before {
  content: "\2013";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--text-muted);
}
/* The app's dark card: ink with one radial highlight, white text. */
.problem-cell.new {
  position: relative;
  background:
      radial-gradient(120% 80% at 82% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
      var(--accent-primary);
  box-shadow: var(--shadow-md);
  color: var(--on-accent);
}
.problem-cell.new h3 { color: rgba(255, 255, 255, 0.55); }
.problem-cell.new li { color: rgba(255, 255, 255, 0.78); }
.problem-cell.new li::before {
  content: "\2192";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  color: var(--hero);
}
.problem-cell.new b { color: #FFFFFF; font-weight: 700; }
.problem-cell.new .tag {
  position: absolute;
  top: 26px;
  inset-inline-end: 26px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[dir="rtl"] .problem-cell.new li::before { content: "\2190"; }

/* --------------------------------------------------------------- steps --- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); } }
.step {
  min-width: 0;
  padding: 34px 32px;
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Three steps really are a sequence, so the figures are allowed to be the
   loudest thing in the card — set in the display italic, in the accent. A
   40px grey plate said "icon", which these are not. */
.step .num {
  display: block;
  margin-bottom: 12px;
  color: var(--badge-green);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 58px;
  line-height: 1;
}
.step h3 { margin-bottom: 10px; }
.step p { margin: 0; color: var(--text-secondary); font-size: 15.5px; line-height: 1.6; }

/* ------------------------------------------------------------------ FAQ ---
   The question list is the content; the heading is a label for it. Two
   columns, the label staying put while the list scrolls past it. */
@media (min-width: 940px) {
  .faq .container {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    column-gap: 72px;
    align-items: start;
  }
  .faq .section-head { position: sticky; top: 104px; margin-bottom: 0; }
  /* A label for the list beside it, not the page's loudest line. */
  .faq .section-head h2 { font-size: clamp(28px, 2.9vw, 40px); }
  .faq .faq-list { max-width: none; }
}

/* ------------------------------------------------------- 375px hardening ---
   Measured on a 375x812 phone: paid search traffic is overwhelmingly mobile,
   so a landing that scrolls (or clips) sideways burns bought clicks. Each
   overflow is fixed where it starts — `overflow-x: hidden` only hides them. */
@media (max-width: 720px) {
  /* `nowrap` pinned each bullet's min-content past the viewport. Amounts stay
     glued by the   already in the markup, so the phrase can wrap. */
  .problem-cell.new b { white-space: normal; }
  .problem-cell { padding: 24px; }
  .app-frame { width: min(320px, 100%); }
}