/* ==========================================================================
   ReMemo — marketing site
   Design system lifted from the app itself (src/constants/theme.ts):
   the MD3 palette, Poppins for headings, Volkhov for body copy.
   ========================================================================== */

:root {
  /* Ink */
  --ink: #113A5D;          /* onPrimaryContainer — headings */
  --ink-strong: #1D1B1A;   /* onSurface */
  --body: #4C4549;         /* onSurfaceVariant */
  --body-soft: #6B6469;

  /* Brand */
  --primary: #3D6186;
  --primary-dark: #2F4E6E;
  --primary-soft: #81A4CD;
  --sky: #D1E4FF;
  --sky-pale: #EAF3FC;
  --yellow: #F3DE8A;
  --yellow-ink: #6D5E17;

  /* Surfaces */
  --white: #FFFFFF;
  --cream: #FFF8F6;
  --warm: #FDF6F1;
  --line: #E7DFDB;

  /* Shape */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  --container: 1180px;
  --nav-h: 76px;

  /* Handset frames. One colour and one width for every screenshot on the
     site, so the hero phone, the tilted pair and the rails all read as the
     same device. The width is fluid because a fixed 7px bezel around a 300px
     shot on a desktop becomes a 7px bezel around a 168px shot on a phone,
     which is nearly twice as heavy for the same picture. */
  --frame: #C7CFD9;
  --frame-line: #AEB9C6;
  --frame-w: clamp(3px, 0.55vw, 7px);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: 'Volkhov', Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--primary); }

h1, h2, h3, h4, .font-display {
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(17, 58, 93, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  font-family: 'Poppins', sans-serif;
  font-size: 0.94rem;
  color: var(--body);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__links a:hover { background: rgba(129, 164, 205, 0.16); color: var(--ink); }
.nav__links a[aria-current='page'] { background: var(--sky); color: var(--ink); }

.nav__toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(17, 58, 93, 0.14);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1.8px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle span { top: 50%; margin-top: -0.9px; }
.nav__toggle span::before { content: ''; top: -6px; left: 50%; }
.nav__toggle span::after { content: ''; top: 6px; left: 50%; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 30px;
  border-radius: var(--r-pill);
  font-family: 'Poppins', sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--primary);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(61, 97, 134, 0.24);
}
.btn--primary:hover { background: var(--primary-dark); box-shadow: 0 10px 24px rgba(61, 97, 134, 0.3); }

.btn--ghost {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary-soft);
}
.btn--ghost:hover { background: rgba(129, 164, 205, 0.14); }

.btn--sm { padding: 9px 22px; font-size: 0.9rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { position: relative; padding: 110px 0; overflow: hidden; }
.section--warm { background: var(--warm); }
.section--cream { background: var(--cream); }
.section--sky { background: linear-gradient(160deg, #F7FBFF 0%, var(--sky-pale) 100%); }
.section--tight { padding: 84px 0; }

.eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-soft);
  margin-bottom: 14px;
}

.lead { font-size: 1.12rem; }

/* The blue pull-line the design uses to land each section's point. */
.accent-line {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--primary);
  line-height: 1.5;
  margin-top: 26px;
}

/* Paired artwork where the phone gets a different picture from the desktop. */
.only-wide { display: block; }
.only-phone { display: none; }

.measure { max-width: 640px; }
.measure-narrow { max-width: 540px; }
.center { text-align: center; margin-inline: auto; }

/* Sparkle watermark, as in the reference design */
.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(129, 164, 205, 0.22) 1.4px, transparent 1.6px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 40%, #000 100%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, transparent 40%, #000 100%);
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Decorative line art
   -------------------------------------------------------------------------- */
/* Copy always sits above the decoration. Without this the drawings paint over
   headings in the sections whose content is not itself a positioned .split. */
.section > .container,
.cta > .container,
.page-head > .container,
.hero > .container { position: relative; z-index: 2; }

.doodle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
  filter: brightness(0) saturate(100%);
}
.doodle--soft { opacity: 0.28; }

/**
 * The flower beside "Redefining healthy productivity".
 *
 * Placed on the *end* side rather than a fixed physical one, so it mirrors
 * with the text: right in English, left in Arabic. Pinned with a plain
 * `right` it stayed on the right in Arabic, where the reader arrives from
 * the other side and it sat in the way rather than out of it.
 */
.doodle--idea {
  top: 12%;
  inset-inline-end: 6%;
  width: 230px;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--rot, 0deg)); }
}
.doodle--float { animation: float-slow 9s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 84px 0 96px;
  background: linear-gradient(135deg, #FCFEFF 0%, #F1F7FE 46%, var(--sky) 100%);
  overflow: hidden;
}

/**
 * The warm light that follows the pointer across the hero.
 *
 * Painted behind everything the hero draws (the drawings and the phone both
 * sit over it, as in the reference), and only ever in this one section. The
 * position comes from two custom properties the script updates; easing them
 * rather than snapping is what gives the light its slight lag.
 */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(
    300px circle at var(--glow-x, 50%) var(--glow-y, 40%),
    rgba(243, 222, 138, 0.92) 0%,
    rgba(243, 222, 138, 0.55) 32%,
    rgba(243, 222, 138, 0) 68%
  );
}
.hero:hover .hero__glow { opacity: 1; }

/* Above the glow, below the copy. */
.hero .doodle { z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero h1 { margin-bottom: 12px; }

.hero__sub {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--primary);
  margin: 0 0 28px;
  font-weight: 400;
}

.hero__copy { max-width: 460px; font-size: 1.02rem; }

/* Phone that morphs between the app's two visual styles — the motion the
   reference video opens with. */
/* A drawn handset rather than a photographed mockup: the screenshots inside
   carry their own status bar, and a real frame would fight it. */
.phone {
  width: min(304px, 82%);
  margin-inline: auto;
  padding: clamp(4px, 0.72vw, 9px);
  border-radius: clamp(26px, 2.9vw, 40px);
  background: var(--frame);
  /* A pale bezel on a pale hero loses its edge, which the dark one never
     needed. The hairline gives it back without going back to near-black. */
  outline: 1px solid var(--frame-line);
  outline-offset: -1px;
  /* Two shadows: a wide soft one for the lift, a tight dark one right under
     the handset so the edge reads. A single diffuse shadow was so faint on the
     pale hero that the phone looked pasted on. */
  box-shadow:
    0 42px 70px -14px rgba(17, 58, 93, 0.5),
    0 14px 26px -6px rgba(17, 58, 93, 0.3);
}
/**
 * The screen carries the aspect, not the frame.
 *
 * Putting 9/20 on the frame leaves the inner box a different ratio once the
 * bezel is subtracted, and `cover` then eats the status bar off the top of the
 * screenshot. Sized here, the screen is exactly the phone's own 1080x2400 and
 * nothing is cropped.
 */
.phone__screen {
  position: relative;
  aspect-ratio: 9 / 20;
  border-radius: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
}
.phone img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone__a { animation: style-a 6s ease-in-out infinite; }
.phone__b { animation: style-b 6s ease-in-out infinite; }

@keyframes style-a {
  0%, 36% { opacity: 1; }
  50%, 86% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes style-b {
  0%, 36% { opacity: 0; }
  50%, 86% { opacity: 1; }
  100% { opacity: 0; }
}
/* --------------------------------------------------------------------------
   Split blocks (text + artwork)
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.split--art-first .split__art { order: -1; }
.split__art img { margin-inline: auto; }

.phone-pair {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
}
.phone-pair img {
  width: 58%;
  border-radius: clamp(16px, 1.9vw, 26px);
  box-shadow: 0 22px 48px rgba(17, 58, 93, 0.2);
  border: var(--frame-w) solid var(--frame);
}
.phone-pair img:first-child {
  transform: rotate(-8deg) translateX(18%);
  width: 50%;
  z-index: 1;
}
.phone-pair img:last-child { transform: rotate(-2deg); z-index: 2; }

.screen-shot {
  border-radius: clamp(14px, 1.6vw, 22px);
  box-shadow: 0 20px 44px rgba(17, 58, 93, 0.18);
  border: var(--frame-w) solid var(--frame);
  width: min(300px, 100%);
}

.shot-row {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.shot-row .screen-shot { width: min(240px, 44vw); }

/**
 * A rail of screenshots that drifts sideways.
 *
 * On a wide screen the three fit side by side and simply sit there; the
 * duplicate set is hidden and nothing moves. Narrow, they would stack into a
 * tall column, so the rail slides instead and the duplicates make the loop
 * seamless (translating exactly half the track lands the copy where the
 * original started).
 */
.rail { position: relative; z-index: 2; }
.rail__track {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
}
.rail__track .dup { display: none; }
.rail__track img { width: min(240px, 44vw); flex: none; }

/**
 * A rail that drifts at every width, not only on phones.
 *
 * The plain .rail stops moving once the set fits side by side. This one keeps
 * going, which is what lets it carry more screenshots than a row has room
 * for. Selectors are two-deep on purpose: that outranks both the base rules
 * and the phone block, so one declaration covers every width.
 */
.rail--marquee {
  overflow: hidden;
  /**
   * The rail is laid out left-to-right whatever the page direction is.
   *
   * This has to sit on the rail, not on the track inside it: `direction`
   * governs how a box lays out its children, and the track is a max-content
   * box overflowing its parent, so it is the PARENT that decides which edge it
   * is pinned to. Under rtl the track hung off the right edge and overflowed
   * leftwards while the animation still translated it further left, so the
   * right-hand side emptied out a little more every second and the loop looked
   * like it had stopped. Measured: the uncovered edge grew to 1578px by the
   * end of one cycle. Screenshots have no reading order to mirror, so pinning
   * the whole rail to LTR is both the fix and the intended behaviour.
   */
  direction: ltr;
  /* Both edges dissolve into the section instead of being sliced off by the
     container. 50px of fade on each side, in the mask rather than an overlaid
     gradient, so it works over whatever colour the section happens to be. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 50px, #000 calc(100% - 50px), transparent 100%);
}
.rail--marquee .rail__track {
  width: max-content;
  justify-content: flex-start;
  /* Slower than the phone rail: the track is twice as long, and the same
     duration would have it sprinting. */
  animation: rail-drift 64s linear infinite;
  /**
   * Spacing by margin, not by `gap`, and this is what makes the loop seamless.
   *
   * With `gap`, a track of 2N items is 2N images plus 2N-1 gaps, so half of it
   * is N images plus N-and-a-half gaps - half a gap short of where the copy
   * begins. Every cycle jumped sideways by ~11px. A trailing margin on each
   * image makes the track exactly 2N equal cells, and -50% lands the duplicate
   * precisely where the original started.
   */
  gap: 0;
}
.rail--marquee .rail__track img { margin-inline-end: 22px; }
/**
 * No inline padding on the marquee track.
 *
 * The phone rule adds 20px either side, which is 40px the duplicate set does
 * not account for - measured, the loop jumped 20px every cycle on a phone
 * while sitting perfectly seamless on desktop. The mask fades the edges now,
 * so the padding was only ever protecting against the hard cut it replaced.
 */
.rail--marquee .rail__track { padding-inline: 0; }
.rail--marquee .rail__track .dup { display: block; }

@keyframes rail-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Feature list (features page)
   -------------------------------------------------------------------------- */
.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  align-items: center;
  padding: 82px 0;
  position: relative;
  z-index: 2;
}
.feature + .feature { border-top: 1px solid var(--line); }
.feature--flip .feature__art { order: -1; }

.feature__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--sky);
  color: var(--ink);
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.feature__art {
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature__art .doodle-inline {
  width: min(320px, 78%);
  opacity: 0.85;
  filter: brightness(0) saturate(100%);
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
  margin-top: 44px;
  position: relative;
  z-index: 2;
}
/* Four cards would otherwise break three-and-one, which reads as a mistake. */
@media (min-width: 780px) {
  .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 30px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 58, 93, 0.1); }
.card h3 { margin-bottom: 10px; }
.card__icon { font-size: 1.9rem; line-height: 1; margin-bottom: 16px; }

/* "Coming soon to Google Play", under a Download button that cannot lead
   anywhere yet. */
.note {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--body-soft);
  margin-top: 16px;
}
.note strong { color: var(--primary); font-weight: 500; }

/* The app's six UI languages, in their own scripts. */
.langs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 34px;
  position: relative;
  z-index: 2;
}
.lang {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 11px 22px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--line);
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: var(--ink);
  white-space: nowrap;
}
.lang span {
  font-family: 'Volkhov', Georgia, serif;
  font-size: 0.82rem;
  color: var(--body-soft);
}

.chip {
  /* Pushed to the bottom so the badges line up across cards of different
     text lengths, which is otherwise the first thing the eye catches. */
  align-self: flex-start;
  margin-top: auto;
  padding-top: 5px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--yellow-ink);
  font-family: 'Poppins', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Prose (about, contact)
   -------------------------------------------------------------------------- */
.prose { max-width: 720px; margin-inline: auto; position: relative; z-index: 2; }
.prose p { font-size: 1.05rem; }
.prose p.pull {
  font-family: 'Poppins', sans-serif;
  color: var(--primary);
  font-size: 1.22rem;
  line-height: 1.5;
  margin: 32px 0;
}

.page-head {
  padding: 76px 0 54px;
  background: linear-gradient(150deg, #FCFEFF 0%, var(--sky-pale) 100%);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-head p { max-width: 620px; margin-inline: auto; }

/**
 * The hero's warm light, on every other page's opening section.
 *
 * Same gradient and same size as .hero__glow, but it roams on its own instead
 * of following the pointer: there is no hero art here for a cursor to play
 * against, and a light that only appears on hover would never be seen on a
 * phone at all. The hero itself is untouched.
 */
.page-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.page-glow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 600px;
  height: 600px;
  margin: -300px 0 0 -300px;
  background: radial-gradient(
    circle,
    rgba(243, 222, 138, 0.92) 0%,
    rgba(243, 222, 138, 0.55) 32%,
    rgba(243, 222, 138, 0) 68%
  );
  animation: glow-roam 34s ease-in-out infinite;
}

/* Four corners of a slow loop, eased so it never travels at a constant speed
   and never quite retraces the same path on the way back. */
@keyframes glow-roam {
  0%, 100% { transform: translate(-58%, -30%); }
  27%      { transform: translate(46%, -14%); }
  52%      { transform: translate(62%, 26%); }
  78%      { transform: translate(-24%, 34%); }
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cta {
  text-align: center;
  padding: 116px 0;
  background: linear-gradient(150deg, var(--sky-pale) 0%, var(--sky) 100%);
  position: relative;
  overflow: hidden;
}
.cta h2 { max-width: 640px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding: 56px 0 40px;
  font-size: 0.95rem;
}
.footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: space-between;
  align-items: flex-start;
}
.footer .brand { color: var(--white); }
.footer__tag { font-family: 'Poppins', sans-serif; margin-top: 10px; color: rgba(255,255,255,0.6); }
.footer__links { display: flex; gap: 26px; flex-wrap: wrap; font-family: 'Poppins', sans-serif; }
.footer__bottom {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid,
  .split,
  .feature { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .split--art-first .split__art,
  .feature--flip .feature__art { order: 0; }

  .hero { padding: 56px 0 72px; }
  .section { padding: 76px 0; }
  .feature { padding: 56px 0; }
  .measure, .measure-narrow, .hero__copy { max-width: none; }

  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 14px 20px 22px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(17, 58, 93, 0.08);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: 12px 16px; }
  .nav__cta { display: none; }
  .nav__links .nav__cta-mobile { display: block; }

  /* Kept on phones, at about half size: the drawings are most of the
     personality, and dropping them left whole sections looking like plain
     text. Anything that would land on the copy is opted out with
     .doodle--desktop instead. */
  .only-wide { display: none; }
  .only-phone { display: block; }

  /**
   * Decoration gets a band of its own at the bottom of the section.
   *
   * Pinning to a corner was not enough: copy reaches the corners too, and the
   * drawings ended up sitting on the words. Any section carrying one is given
   * room below its content, and the drawings sit in that empty band, first on
   * the left and second on the right so two never stack.
   */
  .hero:has(> .doodle),
  .section:has(> .doodle),
  .page-head:has(> .doodle),
  .cta:has(> .doodle) { padding-bottom: 148px; }

  .doodle {
    width: 96px !important;
    opacity: 0.32;
    top: auto !important;
    bottom: 26px !important;
    left: auto !important;
    right: 22px !important;
  }
  .doodle:first-of-type { left: 22px !important; right: auto !important; }
  .doodle:nth-of-type(2) { left: auto !important; right: 22px !important; }
  .doodle--desktop { display: none; }
}

@media (min-width: 901px) {
  .nav__links .nav__cta-mobile { display: none; }
}

@media (max-width: 900px) {
  /* Both styles stay visible, just smaller: showing one of two defeats the
     point of the section. */
  .phone-pair img { width: 46%; }
  .phone-pair img:first-child { width: 40%; }

  .rail { overflow: hidden; margin-inline: -20px; }
  .rail__track {
    width: max-content;
    justify-content: flex-start;
    animation: rail-drift 34s linear infinite;
    padding-inline: 20px;
  }
  .rail__track .dup { display: block; }
  .rail__track img { width: 190px; }

  .feature__art .doodle-inline { width: min(148px, 42%); }
}

@media (max-width: 900px) {
  /* On a phone the generic rule puts the first drawing in a section on the
     left. This one belongs on the end side instead, matching where it sits
     on a wide screen. */
  .doodle.doodle--idea { left: auto !important; right: 22px !important; }
  [dir='rtl'] .doodle.doodle--idea { right: auto !important; left: 22px !important; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .container, .nav__inner { padding-inline: 20px; }
  .section { padding: 60px 0; }
  .cta { padding: 84px 0; }
  .phone-pair img { width: 48%; }
  .phone-pair img:first-child { width: 42%; }
  .rail__track img { width: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .doodle--float,
  .phone__a, .phone__b { animation: none; }
  .phone__b { opacity: 0; }
  .rail__track,
  .rail--marquee .rail__track { animation: none; }
  .page-glow::before { animation: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Language switcher
   -------------------------------------------------------------------------- */
.lang-switch { position: relative; flex: none; }

.lang-switch__button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(17, 58, 93, 0.16);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--body);
  font-family: 'Poppins', sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-switch__button:hover { background: rgba(129, 164, 205, 0.16); color: var(--ink); }

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 172px;
  padding: 7px;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 38px rgba(17, 58, 93, 0.16);
  display: none;
  z-index: 120;
}
.lang-switch.is-open .lang-switch__menu { display: block; }

.lang-switch__menu button {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  text-align: start;
  font-family: 'Poppins', sans-serif;
  font-size: 0.94rem;
  color: var(--body);
  cursor: pointer;
}
.lang-switch__menu button:hover { background: rgba(129, 164, 205, 0.16); color: var(--ink); }
.lang-switch__menu button[aria-current='true'] { background: var(--sky); color: var(--ink); }

/* --------------------------------------------------------------------------
   Right to left (Arabic)

   Only the handful of places that hard-code a side need saying again: the
   layout itself is written with logical properties, so most of it mirrors on
   its own.
   -------------------------------------------------------------------------- */
[dir='rtl'] .phone-pair img:first-child { transform: rotate(8deg) translateX(-18%); }
[dir='rtl'] .phone-pair img:last-child { transform: rotate(2deg); }
[dir='rtl'] .doodle { transform: scaleX(-1); }
[dir='rtl'] .doodle--float { animation: none; }
/* The rail deliberately drifts the same way in Arabic as in English. Mirroring
   it made the two layouts feel like different pages, and unlike text there is
   no reading order in a row of screenshots to mirror. */

@media (max-width: 900px) {
  .lang-switch { margin-inline-start: auto; }
  .lang-switch__menu { inset-inline-end: 0; }
}

/* --------------------------------------------------------------------------
   Legal pages (privacy, terms)

   Long documents whose text comes from the app's own locale files, so the
   website and the app say the same thing in every language.
   -------------------------------------------------------------------------- */
.legal h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-top: 2em;
}
.legal h2:first-child { margin-top: 0; }
.legal h3 {
  font-size: 1.02rem;
  margin-top: 1.6em;
  color: var(--primary);
}
.legal p { font-size: 1rem; }
.legal div[data-i18n] > p:last-child { margin-bottom: 0; }
.legal ul {
  margin: 0 0 1.1em;
  padding-inline-start: 1.25em;
}
.legal li { font-size: 1rem; margin-bottom: 0.4em; }
.legal li:last-child { margin-bottom: 0; }

/* The published date, under the page title. */
.page-head .meta {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: var(--body-soft);
  margin-top: 14px;
}
.page-head .note { max-width: 640px; margin-inline: auto; }

/* The translation notice is empty on the English pages. */
.page-head .note:empty { display: none; }

/* --------------------------------------------------------------------------
   Social links

   Icon buttons rather than a text list: two of them, both instantly
   recognisable by their mark, and a row of words would compete with the
   footer navigation right beside it.
   -------------------------------------------------------------------------- */
.socials {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}
.social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.88);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.social svg { width: 19px; height: 19px; display: block; }
.social:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-2px);
  /* The footer underlines links on hover; on an icon that draws a line under
     the circle rather than marking anything. */
  text-decoration: none;
}
.footer a.social:hover { text-decoration: none; }

/* --------------------------------------------------------------------------
   Blog

   An index of cards and the article pages themselves. The articles are long
   reads, so the column is narrower than the rest of the site and the type is
   a touch larger.
   -------------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 46px;
  position: relative;
  z-index: 2;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 58, 93, 0.1); }

.post-card__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  background: var(--sky-pale);
  border-bottom: 1px solid var(--line);
}
.post-card__art img {
  width: 128px;
  opacity: 0.55;
  filter: brightness(0) saturate(100%);
}
.post-card__body { padding: 26px 28px 30px; }
.post-card h3 { margin-bottom: 8px; }
.post-card p { font-size: 0.98rem; margin-bottom: 0; }
.post-card .eyebrow { margin-bottom: 10px; }

/* The article itself ---------------------------------------------------- */
.article {
  max-width: 720px;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.article h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-top: 1.9em;
}
.article h3 {
  font-size: clamp(1.12rem, 1.8vw, 1.3rem);
  margin-top: 1.7em;
  color: var(--primary);
}
.article ul { padding-inline-start: 1.2em; margin: 0 0 1.1em; }
.article li { margin-bottom: 0.45em; }
.article ol { padding-inline-start: 1.3em; margin: 0 0 1.1em; }
.article em { color: var(--ink); font-style: italic; }

/* A drawing between sections, at the width of the column so it never fights
   the text for the margin the way an absolutely placed doodle would. */
.article__art {
  display: flex;
  justify-content: center;
  margin: 42px 0;
}
.article__art img {
  width: min(260px, 66%);
  /* 0.5 was the decorative weight used for the doodles in the page margins.
     These sit in the reading column and are meant to be looked at, and at that
     weight a single-line drawing reads as a smudge. */
  opacity: 0.72;
  filter: brightness(0) saturate(100%);
}
.article__art--row { gap: 26px; flex-wrap: wrap; }
.article__art--row img { width: min(150px, 36%); }

/**
 * The four stretch diagrams are not line art like the characters are.
 *
 * They are black drawings on a soft WHITE backing - a third of every one of
 * those files is low-alpha white haze, invisible on a white artboard and the
 * whole point of the export. `brightness(0)` turns that haze black, and the
 * exercise disappears inside a grey cloud. Measured: 27-36% solid, 31-35%
 * haze, against 3% and 1% for a real line drawing. So they are shown as drawn.
 */
.article__art--diagram img {
  filter: none;
  opacity: 0.92;
  width: min(210px, 44%);
}

/* The closing "how ReMemo helps" block, marked off from the article body. */
.article__cta {
  margin-top: 52px;
  padding: 34px 32px;
  border-radius: var(--r-lg);
  background: var(--warm);
  border: 1px solid var(--line);
}
.article__cta h2 { margin-top: 0; }

.post-nav {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

@media (max-width: 560px) {
  .article__cta { padding: 26px 22px; }
  .post-card__art { height: 158px; }
  .post-card__art img { width: 104px; }
}