@charset "UTF-8";
/* ==========================================================================
   سُكون — Sukun marketing site
   Design language: calm Scandinavian warmth + Japanese Ma (negative space).
   Brand source of truth: assets/brand/ (brand book, gradient logo SVGs, Omnes).
   Written mobile-first. All layout uses logical properties so AR/EN mirror.
   ========================================================================== */

/* ---------- 1. Fonts ---------- */

@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-extralight.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-extralight.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-light.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-regular.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-medium.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-semibold.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-semibold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnes Arabic";
  src: url("../assets/brand/Fonts/OmnesArabic/omnes-bold.woff2") format("woff2"),
       url("../assets/brand/Fonts/OmnesArabic/omnes-bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Brand gradient stops, lifted from the logo SVGs */
  --c-pink:        #EDB7BE;
  --c-orchid:      #C78CBF;
  --c-violet:      #9887D2;
  --c-periwinkle:  #89ACEE;
  --c-mauve:       #A087BF;
  --c-mauve-deep:  #967FB3;
  --c-mauve-light: #B79ACF;
  --c-peach:       #EFB791;
  --c-ice:         #EEF5FC;
  --c-lilac:       #F9F1FF;

  --grad-brand: linear-gradient(135deg, #EDB7BE 6%, #C78CBF 34%, #9887D2 60%, #89ACEE 96%);
  --grad-soft:  linear-gradient(135deg, #F7E4E8 0%, #EFE0F2 42%, #E4E6FA 72%, #DFE9FB 100%);
  /* Button gradient — the cool half of the brand ramp, specified by the
     brand owner. NOTE: white text on these stops measures 2.3:1 to 3.5:1,
     under the 4.5:1 WCAG AA minimum for text this size. */
  --grad-btn: linear-gradient(135deg, #89ACEE 0%, #A087BF 52%, #967FB3 100%);

  /* Ink & surfaces */
  --ink:        #1C1830;
  --ink-deep:   #15122A;
  --ink-soft:   #453F63;
  --muted:      #6B6685;
  --muted-soft: #8B86A3;
  --line:       #ECE8F4;
  --line-soft:  #F3F0F9;
  --surface:    #FFFFFF;
  --ground:     #FCFBFE;

  /* Card tints + their accents (all AA against the tint) */
  --tint-ice:    #EDF4FC;   --accent-ice:    #3D6BC4;
  --tint-lilac:  #F6EFFE;   --accent-lilac:  #7B4FB0;
  --tint-blush:  #FCEEF0;   --accent-blush:  #B04A78;
  --tint-peach:  #FDF3EA;   --accent-peach:  #A0552A;
  --tint-mauve:  #F4EFF9;   --accent-mauve:  #6F5595;
  --tint-peri:   #EAF0FC;   --accent-peri:   #3D6BC4;

  /* Radii */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  /* Spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 40px;  --s-8: 56px;
  --s-9: 72px; --s-10: 96px; --s-11: 128px;

  /* Shadows — cool-tinted, never neutral grey */
  --sh-xs: 0 1px 2px rgba(28, 24, 48, .04);
  --sh-sm: 0 2px 8px rgba(28, 24, 48, .05);
  --sh-md: 0 8px 24px rgba(28, 24, 48, .07);
  --sh-lg: 0 20px 50px rgba(28, 24, 48, .10);
  --sh-xl: 0 32px 80px rgba(28, 24, 48, .14);

  /* Motion */
  --e-out:    cubic-bezier(.22, 1, .36, 1);
  --e-inout:  cubic-bezier(.65, 0, .35, 1);
  --t-fast:   .18s;
  --t-base:   .32s;
  --t-slow:   .6s;

  /* Direction multiplier: flips values that CSS logical properties can't */
  --dir: 1;

  --wrap: 1200px;
  --wrap-narrow: 760px;
}

[dir="rtl"] { --dir: -1; }

/* ---------- 3. Reset & base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: "Omnes Arabic", "Plus Jakarta Sans", system-ui, sans-serif;
}
html[lang="en"] {
  font-family: "Plus Jakarta Sans", "Omnes Arabic", system-ui, sans-serif;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.14; font-weight: 700; letter-spacing: -.015em; }
p  { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--c-violet);
  outline-offset: 3px;
  border-radius: var(--s-1);
}

::selection { background: #E3D9F6; color: var(--ink); }

/* Arabic sits a touch lower in the line box than Latin at the same size */
[lang="ar"] .u-arabic-lift { transform: translateY(-.06em); }

/* Omnes Arabic runs far heavier than Plus Jakarta Sans at the same weight,
   so Arabic headings step down. Large display sizes drop furthest — at
   that scale a lighter weight still reads as the strongest thing on the
   page, and stays calm rather than shouting. */
html[lang="ar"] .hero__title,
html[lang="ar"] .h2,
html[lang="ar"] .privacy h2,
html[lang="ar"] .cta__body h2 { font-weight: 500; }

html[lang="ar"] h3,
html[lang="ar"] .h3,
html[lang="ar"] .fcard__title,
html[lang="ar"] .step__caption h3,
html[lang="ar"] .wide__caption h3,
html[lang="ar"] .done h3,
html[lang="ar"] .chiprow__title { font-weight: 600; }

/* ---------- 4. Utilities ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--s-7); } }

.section { padding-block: 64px; }
@media (min-width: 768px) { .section { padding-block: 92px; } }

/* Anchor links must not land under the sticky nav */
section[id], [id="top"] { scroll-margin-block-start: 96px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--s-4);
  z-index: 200; background: var(--ink); color: #fff;
  padding: var(--s-3) var(--s-5); border-radius: var(--r-pill);
  transition: inset-block-start var(--t-base) var(--e-out);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* Section heading block */
.head {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--s-8);
}
.head--start { text-align: start; margin-inline: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  color: var(--muted);
  margin-block-end: var(--s-4);
}
.eyebrow::before {
  content: ""; inline-size: 22px; block-size: 3px; border-radius: 2px;
  background: var(--grad-brand);
}

.h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.9vw, 3.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); font-weight: 600; }

.lede {
  margin-block-start: var(--s-4);
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 56ch;
  text-wrap: pretty;
}
.head:not(.head--start) .lede { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-block-size: 48px;
  padding: var(--s-3) var(--s-6);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: .9688rem;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out),
              background-position var(--t-slow) var(--e-out),
              color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* The brand gradient carries the primary action.
      (see the contrast note on --grad-btn above) */
.btn--primary {
  background-image: var(--grad-btn);
  background-size: 190% 190%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 6px 18px rgba(95, 78, 158, .34);
}
.btn--primary:hover {
  background-position: 100% 50%;
  box-shadow: 0 12px 30px rgba(95, 78, 158, .46);
}

.btn--ghost {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
.btn--ghost:hover { border-color: #DCD5EC; box-shadow: var(--sh-sm); }

/* Solid white, because the waitlist panel is itself the brand gradient —
   a gradient button on a gradient ground would not read as the action. */
.btn--solid {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(60, 45, 95, .22);
}
.btn--solid:hover {
  background: #fff;
  box-shadow: 0 14px 32px rgba(60, 45, 95, .3);
}

.btn__icon { flex: none; transition: transform var(--t-base) var(--e-out); }
.btn:hover .btn__icon { transform: translateX(calc(var(--dir) * 3px)); }

/* Small pill chip */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .875rem; font-weight: 500;
  color: var(--ink-soft);
  box-shadow: var(--sh-xs);
}

/* Fine grain, keeps flat pastel areas from looking plasticky */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 5. Header / nav ---------- */

/* Floats over the hero rather than sitting in a band of its own, so the
   hero's aura runs all the way to the top of the page. */
.header {
  position: fixed;
  inset-block-start: var(--s-3);
  inset-inline: 0;
  z-index: 100;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) { .header { inset-block-start: var(--s-4); } }

.nav {
  display: flex; align-items: center; gap: var(--s-4);
  max-width: 1080px;
  margin-inline: auto;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2);
  padding-inline-start: var(--s-4);
  /* Frosted glass: translucent enough that the hero aura reads through it,
     with a bright inner edge for the lit-rim look. */
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(26px) saturate(185%);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  /* One faint hairline. A 1px border plus two inset highlights stacked into
     a heavy ring, which showed badly against the darker sections. */
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--r-pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 8px 30px rgba(50, 38, 90, .10);
  transition: box-shadow var(--t-base) var(--e-out),
              background-color var(--t-base) var(--e-out);
}
.header.is-stuck .nav {
  background: rgba(255, 255, 255, .66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 10px 34px rgba(50, 38, 90, .16);
}

.brand { display: inline-flex; align-items: center; flex: none; }
/* Sized by height so the lockup's own proportions are never altered.
   It runs taller than a bare mark would, because the wordmark stacks two
   lines and needs the height to stay legible. */
.brand__logo {
  block-size: 38px;
  inline-size: auto;
  flex: none;
}
@media (min-width: 620px) { .brand__logo { block-size: 46px; } }

.nav__links {
  display: none;
  align-items: center; gap: var(--s-2);
  margin-inline: auto;
}
@media (min-width: 940px) { .nav__links { display: flex; } }

.nav__link {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: .9375rem; font-weight: 500;
  color: var(--ink-soft);
  transition: background-color var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.nav__link:hover { background: var(--line-soft); color: var(--ink); }

.nav__end { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }
@media (min-width: 940px) { .nav__end { margin-inline-start: 0; } }

/* Language toggle */
.lang {
  display: inline-flex; align-items: center;
  background: var(--line-soft);
  border-radius: var(--r-pill);
  flex: none;
}
.lang__btn {
  min-inline-size: 44px; min-block-size: 44px;
  padding-inline: var(--s-3);
  border-radius: var(--r-pill);
  font-size: .8125rem; font-weight: 600;
  color: var(--muted);
  transition: background-color var(--t-fast) var(--e-out),
              color var(--t-fast) var(--e-out),
              box-shadow var(--t-fast) var(--e-out);
}
.lang__btn[aria-pressed="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-xs);
}

.nav__cta { display: none; }
@media (min-width: 620px) {
  .nav__cta { display: inline-flex; min-block-size: 42px; padding-inline: var(--s-5); font-size: .9062rem; }
}

/* Mobile menu */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 42px; block-size: 42px;
  border-radius: var(--r-pill);
  background: var(--line-soft);
  flex: none;
}
@media (min-width: 940px) { .burger { display: none; } }
.burger__bars { position: relative; inline-size: 17px; block-size: 11px; }
.burger__bars span {
  position: absolute; inset-inline: 0; block-size: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) linear;
}
.burger__bars span:nth-child(1) { inset-block-start: 0; }
.burger__bars span:nth-child(2) { inset-block-end: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0;
  z-index: 99;
  background: rgba(252, 251, 254, .97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column;
  justify-content: center;
  padding: var(--s-8) var(--s-6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-base) var(--e-out), visibility var(--t-base);
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__link {
  padding-block: var(--s-4);
  font-size: 1.5rem; font-weight: 600;
  border-block-end: 1px solid var(--line);
}
.sheet__cta { margin-block-start: var(--s-7); }

/* ---------- 6. Hero ---------- */

.hero {
  position: relative;
  /* clears the fixed nav, which no longer takes up layout space */
  padding-block-start: 124px;
  padding-block-end: var(--s-9);
  overflow: hidden;
  isolation: isolate;
  border-end-start-radius: var(--r-xl);
  border-end-end-radius: var(--r-xl);
}
@media (min-width: 768px) {
  .hero {
    padding-block-start: 148px;
    border-end-start-radius: 56px;
    border-end-end-radius: 56px;
  }
}

/* Brand mesh: a saturated wash of the four logo-gradient stops pooled in
   the lower half, with a white veil over the top so the headline still
   sits on near-white. */
.hero__aura {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 48% at 10% 96%,  rgba(237, 183, 190, .95), transparent 66%),
    radial-gradient(58% 46% at 90% 90%,  rgba(137, 172, 238, .95), transparent 66%),
    radial-gradient(72% 44% at 48% 112%, rgba(199, 140, 191, .9),  transparent 68%),
    radial-gradient(52% 40% at 72% 66%,  rgba(152, 135, 210, .7),  transparent 68%),
    radial-gradient(46% 36% at 22% 62%,  rgba(183, 154, 207, .55), transparent 70%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAFE 40%, #F3EFFA 100%);
}
/* the veil */
.hero__aura i {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #FFFFFF 28%,
    rgba(255, 255, 255, .86) 41%,
    rgba(255, 255, 255, .42) 56%,
    rgba(255, 255, 255, 0) 75%);
}

.hero__inner { position: relative; text-align: center; }

.hero__eyebrow { margin-block-end: var(--s-5); }

.hero__title {
  font-size: clamp(2.4rem, 1.25rem + 4.9vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.06;
  max-width: 15ch;
  margin-inline: auto;
  text-wrap: balance;
}
.hero__title .line { display: block; }

.hero__sub {
  margin-block-start: var(--s-5);
  margin-inline: auto;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  text-wrap: pretty;
}

.hero__actions {
  margin-block-start: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  justify-content: center;
}

/* Hero stage: phone + orbiting mascot + floating chips */
.stage {
  position: relative;
  margin-block-start: var(--s-8);
  margin-inline: auto;
  max-width: 1000px;
  display: grid;
  place-items: center;
}
@media (min-width: 768px) { .stage { margin-block-start: var(--s-9); } }

.stage__core {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
}

.stage__phone {
  position: relative;
  z-index: 5;
  inline-size: min(280px, 74vw);
}
@media (min-width: 768px) { .stage__phone { inline-size: 320px; } }

/* Floating info chips around the phone */
/* Kept deliberately plain: a rotation, a backdrop-filter or a permanent
   will-change each force the label into a rasterised layer, and the text
   comes back soft. Solid white on an upright box stays crisp. */
.stage__chip {
  position: absolute;
  z-index: 6;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid rgba(236, 232, 244, .9);
  border-radius: var(--r-md);
  box-shadow: 0 12px 30px rgba(50, 38, 90, .13);
  white-space: nowrap;
}
.stage__chip b { display: block; font-size: .9062rem; font-weight: 600; line-height: 1.35; }
.stage__chip span { display: block; font-size: .8125rem; color: var(--ink-soft); line-height: 1.35; }
.stage__chip svg { flex: none; inline-size: 22px; block-size: 22px; }

/* Chips hide on the smallest screens where they would collide with the phone */
.stage__chip { display: none; }
@media (min-width: 620px) { .stage__chip { display: flex; } }

.stage__chip--a { inset-block-start: 8%;   inset-inline-start: 0;  }
.stage__chip--b { inset-block-start: 33%;  inset-inline-start: 5%; }
.stage__chip--c { inset-block-start: 13%;  inset-inline-end: 0;    }
.stage__chip--d { inset-block-start: 38%;  inset-inline-end: 4%;   }

/* Float driven by CSS, so the compositor runs it. It animates `translate`
   rather than `transform`, leaving `transform` free for GSAP's entrance
   tween — the two compose instead of fighting. */
@media (prefers-reduced-motion: no-preference) {
  .stage__chip { animation: chip-float 4s ease-in-out infinite alternate; }
  .stage__chip--a { animation-duration: 4.2s; animation-delay: -.4s; }
  .stage__chip--b { animation-duration: 5s;   animation-delay: -1.9s; }
  .stage__chip--c { animation-duration: 4.6s; animation-delay: -1.1s; }
  .stage__chip--d { animation-duration: 5.4s; animation-delay: -2.6s; }
}
@keyframes chip-float {
  from { translate: 0 -7px; }
  to   { translate: 0 7px; }
}


/* ---------- 7. Phone component ---------- */

/* The 393x852 ratio belongs to the screen, not the outer shell — otherwise
   the bezel eats 14px and the screenshot sits short of the frame.
   Radii are in cqw so the corner stays proportional at every phone size,
   and the screenshots are pre-squared so this is the only rounding.
   An element cannot query itself, so the wrapper is the query container
   for the frame and the frame is the container for the screen. */
.stage__phone, .fcard__mock, .step__phone, .cta__phone { container-type: inline-size; }

.phone {
  position: relative;
  container-type: inline-size;
  inline-size: 100%;
  padding: 7px;
  background: linear-gradient(160deg, #2A2545, #15122A 55%, #201B3A);
  border-radius: 15.1cqw;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .12) inset,
    0 26px 60px rgba(38, 28, 78, .3),
    0 6px 18px rgba(38, 28, 78, .18);
}
.phone__screen {
  position: relative;
  aspect-ratio: 393 / 852;
  border-radius: 13.5cqw;
  overflow: hidden;
  background: #DDE4F5;
}
.phone__shot {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.phone__island {
  position: absolute;
  inset-block-start: 2.1%;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 30%; block-size: 3%;
  min-block-size: 12px;
  background: #0B0913;
  border-radius: var(--r-pill);
  z-index: 3;
}


/* Arrows point along the reading direction */
[dir="rtl"] .icon-flip { transform: scaleX(-1); }
/* On an SVG child the transform origin is the canvas corner, not the shape,
   so the flip would throw it off-canvas — anchor it to its own box. */
[dir="rtl"] path.icon-flip,
[dir="rtl"] g.icon-flip { transform-box: fill-box; transform-origin: center; }
[dir="rtl"] .btn:hover .btn__icon { transform: scaleX(-1) translateX(3px); }

/* Glass reflection sweep across the glass */
.phone__glare {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    calc(var(--dir) * 118deg),
    rgba(255, 255, 255, .16) 0%,
    rgba(255, 255, 255, .05) 24%,
    rgba(255, 255, 255, 0) 46%
  );
}

/* ---------- 8. Feature grid ---------- */

.features__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .features__grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
}

.fcard {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex; flex-direction: column;
  isolation: isolate;
}

.fcard--ice   { background: var(--tint-ice);   color: var(--accent-ice); }
.fcard--lilac { background: var(--tint-lilac); color: var(--accent-lilac); }
.fcard--blush { background: var(--tint-blush); color: var(--accent-blush); }
.fcard--peach { background: var(--tint-peach); color: var(--accent-peach); }

.fcard__head { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s-3); }
.fcard__icon { inline-size: 28px; block-size: 28px; flex: none; }
.fcard__title {
  font-size: clamp(1.4rem, 1.15rem + .9vw, 1.85rem);
  font-weight: 700; letter-spacing: -.02em;
  color: currentColor;
  text-wrap: balance;
}

.fcard__text {
  position: relative; z-index: 2;
  margin-block-start: var(--s-5);
  font-size: 1.0312rem;
  line-height: 1.55;
  color: currentColor;
  opacity: .92;
  text-wrap: pretty;
}

/* Phone sits bottom-end, cropped by the card edge */
.fcard__mock {
  margin-block-start: var(--s-6);
  align-self: center;
  inline-size: min(210px, 66%);
  translate: 0 9%;
}

/* From tablet up the card becomes a two-part composition:
   copy pinned to the start column, phone overflowing the end corner. */
@media (min-width: 560px) {
  .fcard { min-block-size: 380px; padding: var(--s-6); }
  .fcard__head { max-inline-size: 56%; }
  .fcard__text { margin-block-start: auto; max-inline-size: 25ch; }
  .fcard__mock {
    position: absolute;
    inset-block-start: 52px;
    inset-inline-end: -10px;
    inline-size: 188px;
    margin: 0;
    translate: none;
    z-index: 1;
  }
}
@media (min-width: 1060px) {
  .fcard { min-block-size: 400px; padding: var(--s-7); }
  .fcard__mock { inline-size: 200px; inset-block-start: 56px; }
}

/* The overhang falls on the left in RTL, which is where the eye lands
   first — there it reads as a crop rather than a deliberate bleed, so
   the phone sits fully inside the card instead. */
@media (min-width: 560px) {
  [dir="rtl"] .fcard__mock { inset-inline-end: 8px; }
}

.fcard__badge {
  position: absolute;
  inset-block-start: var(--s-5); inset-inline-end: var(--s-5);
  z-index: 4;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600;
  color: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--sh-xs);
}

/* Two wide cards below the 2x2 */
.wides {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-block-start: var(--s-4);
}
@media (min-width: 860px) { .wides { grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-block-start: var(--s-5); } }

.wide__art {
  position: relative;
  block-size: 250px;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid; place-items: center;
  isolation: isolate;
}
.wide__art--light { background: #F4F2F9; }
.wide__art--dark  { background: var(--ink-deep); }

.wide__caption { margin-block-start: var(--s-5); }
.wide__caption h3 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.015em; }
.wide__caption p  { margin-block-start: var(--s-2); color: var(--muted); max-width: 46ch; }

/* Reminder icon cluster */
.cluster { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); align-items: center; }
.cluster i {
  display: grid; place-items: center;
  inline-size: 52px; block-size: 52px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--sh-md);
}
.cluster i:nth-child(odd) { translate: 0 -14px; }
.cluster i svg { inline-size: 24px; block-size: 24px; }

/* Pattern-recall board for the cognitive games card */
.tiles {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  inline-size: 196px;
}
.tiles::before {
  content: "";
  position: absolute; inset: -55%;
  background: radial-gradient(circle, rgba(160, 135, 191, .45), rgba(137, 172, 238, .16) 45%, transparent 70%);
  filter: blur(26px);
}
.tiles span {
  position: relative;
  aspect-ratio: 1;
  border-radius: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
}
.tiles .is-on {
  background: var(--grad-btn);
  border-color: rgba(255, 255, 255, .3);
  box-shadow: 0 0 20px rgba(160, 135, 191, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: tile-pulse 3.6s var(--e-inout) infinite;
}
.tiles .is-on:nth-of-type(5)  { animation-delay: .45s; }
.tiles .is-on:nth-of-type(7)  { animation-delay: .9s; }
.tiles .is-on:nth-of-type(12) { animation-delay: 1.35s; }
.tiles .is-on:nth-of-type(14) { animation-delay: 1.8s; }

@keyframes tile-pulse {
  0%, 62%, 100% { opacity: .55; transform: scale(1); }
  18%, 30%      { opacity: 1;   transform: scale(1.07); }
}

/* ---------- 9. Steps (Sukun Map) ---------- */

.steps {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.step__art {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  block-size: 400px;
  isolation: isolate;
}
@media (min-width: 800px) { .step__art { block-size: 430px; } }
.step__art--1 { background: linear-gradient(165deg, #F3ECFB, #E7E2F8); }
.step__art--2 { background: linear-gradient(165deg, #E9F0FC, #DFE7FA); }
.step__art--3 { background: linear-gradient(165deg, #ECF4FC, #E2EEF8); }

.step__num {
  position: absolute;
  inset-block-start: var(--s-5); inset-inline-start: var(--s-5);
  z-index: 4;
  font-size: 1.75rem; font-weight: 700;
  color: var(--ink);
  opacity: .28;
  line-height: 1;
}

/* left/translateX rather than logical inset: centring must not mirror */
.step__phone {
  position: absolute;
  inset-block-start: 74px;
  left: 50%;
  transform: translateX(-50%);
  inline-size: 176px;
  z-index: 2;
}
@media (min-width: 800px) { .step__phone { inline-size: 186px; inset-block-start: 78px; } }

.step__float {
  position: absolute;
  z-index: 3;
  inset-block-start: 96px;
  inset-inline-end: var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--sh-md);
  font-size: .8125rem; font-weight: 600;
  white-space: nowrap;
}

.step__caption { margin-block-start: var(--s-5); }
.step__caption h3 { font-size: 1.25rem; font-weight: 700; }
.step__caption p { margin-block-start: var(--s-2); color: var(--muted); font-size: .9688rem; }

.chiprow {
  margin-block-start: var(--s-8);
  text-align: center;
}
.chiprow__title { font-size: 1.125rem; font-weight: 600; margin-block-end: var(--s-5); }
.chiprow__list { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ---------- 10. Testimonials ---------- */

/* Two rows drifting in opposite directions, edges faded out.
   The track is forced to LTR so the duplicate-and-translate loop behaves
   identically in both languages; each card is handed its direction back. */
.section--voices .wrap { margin-block-end: var(--s-8); }

.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-2);
  /* LTR on the container, not just the track: an overflowing child anchors
     to its parent's inline-start, so under RTL the track would hang off the
     left and the row would run dry. */
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee + .marquee { margin-block-start: var(--s-4); }

.marquee__track {
  display: flex;
  inline-size: max-content;
  will-change: transform;
}
html[lang="ar"] .marquee__track > * { direction: rtl; }

.marquee--a .marquee__track { animation: marquee-a 68s linear infinite; }
.marquee--b .marquee__track { animation: marquee-b 76s linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

/* Exactly half the track is one full pass, because every card carries the
   same trailing margin — a flex `gap` would leave a half-gap seam. */
@keyframes marquee-a { from { transform: translateX(0);     } to { transform: translateX(-50%); } }
@keyframes marquee-b { from { transform: translateX(-50%);  } to { transform: translateX(0);    } }

/* Soft filled card, no border and no shadow — the tint alone lifts it off
   the page ground, which keeps a long row of them calm. */
.quote {
  flex: none;
  inline-size: 320px;
  margin-right: var(--s-4);
  background: #F4F2F8;
  border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex; flex-direction: column;
}
@media (min-width: 768px) { .quote { inline-size: 372px; } }

.quote__stars { display: flex; gap: 5px; margin-block-end: var(--s-5); }
.quote__stars i {
  inline-size: 15px; block-size: 15px;
  background: #D9A441;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.46l-5.9 3.1 1.12-6.57L2.45 9.34l6.6-.96Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.12 6.57L12 17.46l-5.9 3.1 1.12-6.57L2.45 9.34l6.6-.96Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.quote__text { font-size: .9688rem; line-height: 1.6; color: var(--ink-soft); text-wrap: pretty; }
.quote__who {
  margin-block-start: var(--s-5);
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: .8125rem; color: var(--muted);
}
.quote__name { font-weight: 500; }
.quote__role::before { content: "·"; margin-inline-end: var(--s-2); color: var(--muted-soft); }

/* ---------- 11. Why-we-built-it note ---------- */

.founder {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) { .founder { grid-template-columns: .85fr 1fr; gap: var(--s-9); } }

.founder__art {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  aspect-ratio: 4 / 5;
}
/* Anchored to the bottom so a tall image loses its sky, not its subject */
.founder__art img {
  inline-size: 100%; block-size: 100%;
  object-fit: cover;
  object-position: bottom center;
}

.founder__body p { color: var(--ink-soft); font-size: 1.0625rem; text-wrap: pretty; }
.founder__body p + p { margin-block-start: var(--s-4); }
.founder__by {
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
  display: flex; align-items: center; gap: var(--s-3);
}
.founder__by img { inline-size: 38px; block-size: 38px; border-radius: 11px; }
.founder__by b { display: block; font-size: .9375rem; font-weight: 600; }
.founder__by span { display: block; font-size: .8125rem; color: var(--muted); }

/* ---------- 13. Privacy block ---------- */

.privacy {
  position: relative;
  background: var(--ink-deep);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-5);
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .privacy { padding: var(--s-10) var(--s-8); } }

.privacy__orb {
  position: relative;
  inline-size: 96px; block-size: 96px;
  margin-inline: auto;
  margin-block-end: var(--s-6);
}
.privacy__orb img { inline-size: 100%; }
.privacy__orb::before {
  content: ""; position: absolute; inset: -85%;
  background: radial-gradient(circle, rgba(199, 140, 191, .55), rgba(137, 172, 238, .2) 45%, transparent 68%);
  filter: blur(20px);
  z-index: -1;
}

.privacy h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.85rem);
  letter-spacing: -.02em;
  max-width: 18ch; margin-inline: auto;
  text-wrap: balance;
}
.privacy p {
  margin-block-start: var(--s-4);
  margin-inline: auto;
  max-width: 48ch;
  color: rgba(255, 255, 255, .68);
  text-wrap: pretty;
}
.privacy__list {
  margin-block-start: var(--s-7);
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  justify-content: center;
}
.privacy__list li {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: .9375rem; font-weight: 500;
  color: rgba(255, 255, 255, .92);
}
.privacy__list svg { inline-size: 18px; block-size: 18px; color: rgba(255,255,255,.6); flex: none; }

/* ---------- 14. FAQ ---------- */

.faq { display: grid; gap: var(--s-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .faq { grid-template-columns: .8fr 1.2fr; gap: var(--s-9); } }
.faq .head { margin-block-end: 0; }

.faq__list { display: flex; flex-direction: column; gap: var(--s-3); }

.qa {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--e-out), box-shadow var(--t-base) var(--e-out);
}
.qa.is-open { border-color: #DFD8EF; box-shadow: var(--sh-sm); }

.qa__q {
  inline-size: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5);
  text-align: start;
  font-size: 1rem; font-weight: 500;
  min-block-size: 60px;
}
.qa__sign { position: relative; inline-size: 16px; block-size: 16px; flex: none; }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute;
  background: var(--ink-soft);
  border-radius: 2px;
  transition: transform var(--t-base) var(--e-out), opacity var(--t-fast) linear;
}
.qa__sign::before { inset-block-start: 7px; inset-inline: 0; block-size: 2px; }
.qa__sign::after  { inset-inline-start: 7px; inset-block: 0; inline-size: 2px; }
.qa.is-open .qa__sign::after { transform: rotate(90deg); opacity: 0; }

.qa__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--e-out);
}
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--muted);
  font-size: .9688rem;
  text-wrap: pretty;
}

/* ---------- 15. Waitlist CTA ---------- */

/* The waitlist panel carries the full brand gradient, so everything inside
   it flips from white-on-dark to ink-on-light. White would sit at 1.7:1
   against the pink end of this ramp; ink holds 5.5:1 to 10:1 across it. */
.cta {
  position: relative;
  background: linear-gradient(135deg, #89ACEE 0%, #9887D2 38%, #C78CBF 70%, #EDB7BE 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-5) 0;
}
@media (min-width: 900px) {
  .cta {
    grid-template-columns: 1.05fr .95fr;
    align-items: end;
    gap: var(--s-7);
    padding: var(--s-10) var(--s-9) 0;
  }
}

.cta__glow {
  position: absolute;
  inline-size: 76%; aspect-ratio: 1;
  inset-block-end: -34%; inset-inline-end: -16%;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), transparent 64%);
  filter: blur(70px);
  z-index: 0;
}

.cta__body { position: relative; z-index: 1; color: var(--ink); padding-block-end: var(--s-9); }
.cta__body h2 {
  font-size: clamp(1.85rem, 1.15rem + 2.7vw, 3rem);
  letter-spacing: -.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.cta__body > p {
  margin-block-start: var(--s-4);
  color: #3A3556;
  max-width: 44ch;
  text-wrap: pretty;
}

.cta__art {
  position: relative;
  display: grid; place-items: end center;
  min-block-size: 300px;
}
.cta__phone { inline-size: min(248px, 66%); translate: 0 8%; z-index: 2; }
.cta__mascot {
  position: absolute;
  inset-block-end: -2%;
  inset-inline-start: 0;
  inline-size: 104px;
  z-index: 3;
  filter: drop-shadow(0 16px 30px rgba(60, 45, 95, .34));
}
@media (max-width: 899px) { .cta__mascot { inline-size: 84px; } }

/* Form */
.form { margin-block-start: var(--s-6); max-width: 420px; }
.form__row { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.form__row + .form__row { margin-block-start: var(--s-3); }
/* .form__row sets display, so it beats the UA rule for [hidden] on its own. */
.form__row[hidden] { display: none; }
/* Appears only when "another country" is picked, so it slides in rather than
   making the rest of the form jump. */
.form__row--other { animation: otherIn .28s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes otherIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .form__row--other { animation: none; } }

.field { display: block; }
.field__label {
  display: block;
  font-size: .8125rem; font-weight: 600;
  color: #3A3556;
  margin-block-end: var(--s-2);
}
.field__req { color: #A03356; }

.field__input {
  inline-size: 100%;
  min-block-size: 50px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 1rem;
  transition: border-color var(--t-fast) var(--e-out), background-color var(--t-fast) var(--e-out);
}
.field__input::placeholder { color: #6B6685; }
.field__input:hover { background: rgba(255, 255, 255, .93); }
.field__input:focus {
  outline: none;
  border-color: var(--ink);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(28, 24, 48, .18);
}
.field__input[aria-invalid="true"] { border-color: #A03356; }

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231C1830' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  padding-inline-end: var(--s-8);
}
[dir="rtl"] select.field__input { background-position: left var(--s-4) center; padding-inline-end: var(--s-4); padding-inline-start: var(--s-8); }
select.field__input option { color: var(--ink); background: #fff; }

.field__error {
  display: none;
  margin-block-start: var(--s-2);
  font-size: .8125rem; font-weight: 500;
  color: #8E2547;
}
.field.is-invalid .field__error { display: block; }

.form__submit { margin-block-start: var(--s-5); inline-size: 100%; }
@media (min-width: 480px) { .form__submit { inline-size: auto; min-inline-size: 200px; } }
.form__submit[data-busy="true"] { opacity: .72; pointer-events: none; }

.form__note {
  margin-block-start: var(--s-4);
  font-size: .8125rem;
  color: #4A4468;
}

.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.form__status {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  display: none;
}
.form__status.is-shown { display: block; }
.form__status--ok {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(47, 107, 24, .3);
  color: #2F6B18;
}
.form__status--err {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(142, 37, 71, .3);
  color: #8E2547;
}

/* Success panel replaces the form */
.form--done .form__fields,
.form--done .form__submit,
.form--done .form__note { display: none; }

.done {
  display: none;
  color: var(--ink);
  margin-block-start: var(--s-6);
}
.form--done + .done { display: block; }
.done__mark {
  inline-size: 46px; block-size: 46px;
  border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  margin-block-end: var(--s-4);
}
.done h3 { font-size: 1.375rem; font-weight: 700; }
.done p { margin-block-start: var(--s-2); color: #3A3556; max-width: 38ch; }

/* ---------- 16. Footer ---------- */

.footer {
  background: var(--ink-deep);
  color: rgba(255, 255, 255, .74);
  padding-block: var(--s-9) var(--s-6);
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
}
.footer__grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer__brand { display: flex; align-items: center; }
/* Same lockup as the header, sized by height so its proportions hold */
.footer__logo { block-size: 46px; inline-size: auto; }
.footer__tag { margin-block-start: var(--s-4); font-size: .9375rem; max-width: 34ch; color: rgba(255,255,255,.6); }

.footer__title {
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  color: rgba(255, 255, 255, .45);
  margin-block-end: var(--s-4);
}
.footer__links { display: flex; flex-direction: column; gap: var(--s-1); }
.footer__links a {
  display: inline-flex; align-items: center;
  min-block-size: 40px;
  font-size: .9375rem;
  transition: color var(--t-fast) var(--e-out);
  inline-size: fit-content;
}
.footer__links a:hover { color: #fff; }

.footer__bottom {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .45);
}

/* ---------- 17. Scroll reveal ---------- */

[data-reveal] { opacity: 0; }

/* ---------- 19. Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .btn:hover { transform: none; }
  /* the quote rows stop moving and become manually scrollable instead */
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee {
    overflow-x: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}

/* ---------- 21. Your day with Sukun ---------- */

.day { background: linear-gradient(180deg, #FCFBFE 0%, #F6F2FB 45%, #FCFBFE 100%); }
.section.day { padding-block-start: 0; }



/* personalisation band */
.adapt {
  margin-block-start: var(--s-8);
  padding: var(--s-8) var(--s-6);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: center;
}
@media (min-width: 768px) { .adapt { padding: var(--s-9) var(--s-8); } }

.adapt__title { font-size: clamp(1.35rem, 1rem + 1.4vw, 1.85rem); font-weight: 700; }
html[lang="ar"] .adapt__title { font-weight: 600; }
.adapt__sub { margin-block-start: var(--s-2); color: var(--muted); }

.adapt__pairs {
  margin-block: var(--s-7);
  display: grid; gap: var(--s-3);
  max-width: 720px; margin-inline: auto;
}
.adapt__pairs li {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--line-soft);
  font-size: .9375rem; color: var(--ink-soft);
}
@media (min-width: 620px) {
  .adapt__pairs li { grid-template-columns: 1fr auto 1fr; gap: var(--s-4); }
  .adapt__pairs li > span:first-child { text-align: end; }
  .adapt__pairs li > span:last-child  { text-align: start; }
}
/* the divider is a dot, so it never needs mirroring */
.adapt__vs {
  inline-size: 6px; block-size: 6px; border-radius: 50%;
  background: var(--c-mauve-light);
  justify-self: center;
}

.adapt__close {
  max-width: 46ch; margin-inline: auto;
  font-size: 1.0312rem; font-weight: 500; color: var(--ink);
  text-wrap: pretty;
}

/* closing signature under the waitlist form */
.cta__sign {
  margin-block-start: var(--s-5);
  font-size: 1.0312rem; font-weight: 600;
  color: var(--ink);
}

/* ---------- 22. Breathing card: night sky + crystal ---------- */

/* Background lifted from the legacy breathing screen: the night photo over
   the same radial that sat behind it. The photo is an element rather than a
   background so it can be mirrored — the moon sits top-right, which is
   exactly where the Arabic title lands. */
/* The surround is the photo's own colour ramp, sampled band by band, so the
   image's vignetted edges dissolve into it instead of ending on a seam. */
.fcard--night {
  background:
    radial-gradient(70% 55% at 50% 88%, rgba(13, 102, 134, .45), transparent 72%),
    linear-gradient(180deg, #01182B 0%, #05263B 28%, #013150 54%, #02486B 82%, #0C6280 100%);
  border-color: rgba(255, 255, 255, .1);
}

/* Height-driven, so the 393x434 source renders at roughly native scale.
   Stretching it to cover the card meant a 1.7x upscale and soft clouds. */
.fcard__sky {
  position: absolute;
  inset-block: 0;
  z-index: 0;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
  left: 50%;
  transform: translateX(-50%);
  /* The fade is baked into night.webp's alpha, so there is no rectangle to
     hide and no mask or blend mode needed here. */
}
/* mirrored so the moon moves clear of the Arabic title */
[dir="rtl"] .fcard__sky { transform: translateX(-50%) scaleX(-1); }
.fcard--night .fcard__title { color: #EAF2FF; }
.fcard--night .fcard__icon  { color: #9FD0FF; }
.fcard--night .fcard__text  { color: rgba(226, 238, 255, .8); }

/* The crystal replaces the phone, so it uses the mock slot's corner */
.orb {
  position: absolute;
  z-index: 1;
  inset-block-start: 54%;
  inset-inline-end: 12%;
  translate: 0 -50%;
  inline-size: 78px; aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
@media (min-width: 560px)  { .orb { inline-size: 88px; } }
@media (min-width: 1060px) { .orb { inline-size: 100px; } }

.orb__ball {
  position: relative; z-index: 2;
  inline-size: 100%; block-size: auto;
  filter: drop-shadow(0 18px 40px rgba(120, 190, 255, .38));
}

/* soft bloom behind the glass */
.orb__halo {
  position: absolute; inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(159, 208, 255, .5), rgba(93, 150, 220, .16) 45%, transparent 70%);
  filter: blur(24px);
}

/* The breath rhythm now reads through the bloom rather than a drawn ring */
@media (prefers-reduced-motion: no-preference) {
  .orb__halo { animation: orb-breathe 11s ease-in-out infinite; }
  .orb__ball { animation: orb-drift 7s ease-in-out infinite alternate; }
}
@keyframes orb-breathe {
  0%, 100% { transform: scale(1);    opacity: .75; }
  36%      { transform: scale(1.18); opacity: 1; }
  64%      { transform: scale(1.18); opacity: 1; }
}
@keyframes orb-drift {
  from { translate: 0 -6px; }
  to   { translate: 0 6px; }
}

/* ---------- 23. Mood check-in card ---------- */

/* Colours and faces come from the app design files:
   Low #FF5E3E · Flat #FF965D · Okay #FFD06B · Good #6EB5F0 · Great #8BC588 */
.mood {
  --i: 2;
  --c: #FFD06B;
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-end: var(--s-5);
  translate: 0 -50%;
  inline-size: 208px;
  /* Padding has to clear half the widest outer label, since those now
     centre on the track ends and reach into it. */
  padding: var(--s-5) var(--s-5) var(--s-4);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 44px rgba(60, 45, 95, .16), 0 2px 6px rgba(60, 45, 95, .06);
  color: #17171C;
  direction: inherit;
}
@media (min-width: 560px)  { .mood { inline-size: 224px; } }
@media (min-width: 1060px) { .mood { inline-size: 254px; padding: var(--s-5); } }

.mood[data-mood="0"] { --c: #FF5E3E; }
.mood[data-mood="1"] { --c: #FF965D; }
.mood[data-mood="2"] { --c: #FFD06B; }
.mood[data-mood="3"] { --c: #6EB5F0; }
.mood[data-mood="4"] { --c: #8BC588; }

.mood__top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .75rem; font-weight: 600;
  color: #17171C;
}
.mood__step { color: #A8A8B3; font-weight: 500; }
.mood__step b { color: #17171C; font-weight: 700; }

.mood__q {
  margin-block-start: var(--s-3);
  font-size: 1.0625rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
}
html[lang="ar"] .mood__q { font-weight: 600; }

/* The active face, tinted to the mood, centred on the card */
.mood__face {
  display: block;
  inline-size: 44px; block-size: 44px;
  margin: var(--s-5) auto 0;
  color: var(--c);
  transition: color var(--t-base) var(--e-out);
}
.mood__face svg { inline-size: 100%; block-size: 100%; }
/* each expression is switched on per mood, so one SVG serves all five */
.mood__face .eye-closed,
.mood__face .mouth-open { display: none; }
.mood[data-mood="0"] .mouth { d: path("M15 29c2-2.6 12-2.6 14 0"); }
.mood[data-mood="1"] .mouth { d: path("M15.5 28h13"); }
.mood[data-mood="3"] .eye { display: none; }
.mood[data-mood="3"] .eye-closed { display: block; }
.mood[data-mood="4"] .mouth { display: none; }
.mood[data-mood="4"] .mouth-open { display: block; }

/* Slider: a real range input sits transparent on top, so keyboard and
   screen-reader support come for free while the visuals stay custom. */
.mood__slider {
  position: relative;
  block-size: 26px;
  margin-block-start: var(--s-5);
  display: flex; align-items: center;
}
.mood__track, .mood__fill {
  position: absolute; inset-inline: 0;
  block-size: 14px; border-radius: var(--r-pill);
}
.mood__track { background: #EFEFF3; }
.mood__fill {
  background: var(--c);
  inline-size: calc(var(--i) / 4 * 100%);
  inset-inline-end: auto; inset-inline-start: 0;
  transition: inline-size var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.mood__thumb {
  position: absolute;
  inset-inline-start: calc(var(--i) / 4 * 100%);
  /* inset-inline-start puts the leading edge on the stop, so pull back half
     a width to sit on it. That is -50% in LTR and +50% in RTL. */
  translate: calc(var(--dir) * -50%) 0;
  inline-size: 42px; block-size: 26px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 2.5px solid var(--c);
  display: grid; place-items: center;
  color: #17171C;
  transition: inset-inline-start var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.mood__thumb svg { inline-size: 18px; block-size: 11px; }

.mood__input {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  margin: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.mood__input:focus-visible ~ .mood__thumb {
  outline: 3px solid var(--c-violet);
  outline-offset: 3px;
}

/* Each label sits on the same stop as the thumb — 0, 25, 50, 75, 100% — so
   the two always line up. A 5-column grid would centre them at 10/30/50/
   70/90% instead, which is the gap that showed. */
.mood__labels {
  position: relative;
  block-size: 1.1em;
  margin-block-start: var(--s-3);
  font-size: .625rem; letter-spacing: -.01em;
  color: #8A8A96;
  white-space: nowrap;
}
/* Arabic needs the extra size — its letterforms carry far less of their
   meaning in the outline than Latin does at the same pixel height. */
html[lang="ar"] .mood__labels { font-size: .75rem; letter-spacing: 0; }
.mood__labels li {
  position: absolute;
  inset-block-start: 0;
  transition: color var(--t-fast) var(--e-out);
}
/* All five are centred on their stop, so the spacing between them is equal.
   Edge-aligning the outer two looked tidier but squeezed the end gaps to
   38-42px against 51.5px in the middle. The outer labels now reach a little
   past the track into the card's padding, which is what that padding is for. */
.mood__labels li { inset-inline-start: calc(var(--stop) * 25%); translate: calc(var(--dir) * -50%) 0; }
.mood__labels li:nth-child(1) { --stop: 0; }
.mood__labels li:nth-child(2) { --stop: 1; }
.mood__labels li:nth-child(3) { --stop: 2; }
.mood__labels li:nth-child(4) { --stop: 3; }
.mood__labels li:nth-child(5) { --stop: 4; }
.mood[data-mood="0"] .mood__labels li:nth-child(1),
.mood[data-mood="1"] .mood__labels li:nth-child(2),
.mood[data-mood="2"] .mood__labels li:nth-child(3),
.mood[data-mood="3"] .mood__labels li:nth-child(4),
.mood[data-mood="4"] .mood__labels li:nth-child(5) { color: #17171C; font-weight: 700; }

.mood__cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-block-start: var(--s-5);
  min-block-size: 36px;
  border-radius: var(--r-pill);
  background: #9968EE;
  color: #fff;
  font-size: .8125rem; font-weight: 600;
}
.mood__cta svg { inline-size: 14px; block-size: 14px; flex: none; }

/* Keep the card's own copy clear of the check-in panel */
.fcard--peach .fcard__head,
.fcard--peach .fcard__text { max-inline-size: 46%; }
@media (max-width: 559px) {
  .mood { position: static; translate: none; inline-size: 100%; margin-block-start: var(--s-5); }
  .fcard--peach .fcard__head,
  .fcard--peach .fcard__text { max-inline-size: none; }
}


/* ---------- 24. Your day: scroll-driven ---------- */

/* CSS only lays this out. GSAP owns every moving value, and ScrollTrigger
   does the pinning — CSS `position: sticky` proved unreliable here.
   Without JS the panels simply stack, each painting its own time of day. */
.daysx { margin-block-start: 0; }

.daysx__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  isolation: isolate;
}

.daysx__sky, .daysx__stars, .daysx__arc {
  position: absolute; inset: 0;
  pointer-events: none;
}

/* Three skies stacked and cross-faded, rather than one gradient whose
   colours get interpolated — opacity is far safer to animate. */
.daysx__sky { z-index: 0; }
.daysx__sky--dawn  { background: linear-gradient(180deg, #FCE7D4 0%, #F7C9A6 100%); }
.daysx__sky--noon  { background: linear-gradient(180deg, #E6F1FE 0%, #AECBF3 100%); opacity: 0; }
.daysx__sky--night { background: linear-gradient(180deg, #241E45 0%, #0E1026 100%); opacity: 0; }

.daysx__stars {
  z-index: 1; opacity: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 28% 34%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 44% 12%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 61% 28%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 76% 16%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 88% 32%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 20% 48%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 68% 46%, #fff, transparent);
}

/* The arc mirrors in Arabic so the sun rises on the side you read from.
   The sun is a circle, so flipping the container is invisible on it. */
.daysx__arc { z-index: 1; }
[dir="rtl"] .daysx__arc { transform: scaleX(-1); }
.daysx__sun {
  position: absolute;
  inline-size: 88px; block-size: 88px;
  border-radius: 50%;
  left: 12%; top: 74%;
  margin: -44px 0 0 -44px;
  background: #FFC98A;
  box-shadow: 0 0 60px 20px rgba(255, 186, 118, .5);
}

.daysx__inner { position: relative; z-index: 2; }
.daysx__rail { display: none; }

/* --- panels --- */
.dpanel { padding-block: var(--s-9); max-inline-size: 34rem; }
.dpanel__time {
  display: inline-block; align-self: start;
  font-size: .8125rem; font-weight: 600; letter-spacing: .06em;
  padding: 6px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  margin-block-end: var(--s-5);
}
.dpanel__lede {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -.015em;
  text-wrap: pretty;
}
html[lang="ar"] .dpanel__lede { font-weight: 500; }
.dpanel__list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block: var(--s-6); }
.dpanel__list li {
  font-size: .875rem;
  padding: 8px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--chip-bg);
  border: 1px solid var(--chip-line);
}
.dpanel__close { font-size: 1.0312rem; font-weight: 600; opacity: .9; text-wrap: pretty; }

/* Each panel carries its own palette, so nothing has to be interpolated */
.dpanel--morning { color: #3A2A1E; --chip-bg: rgba(255,255,255,.62); --chip-line: rgba(255,255,255,.5); }
.dpanel--midday  { color: #16305A; --chip-bg: rgba(255,255,255,.62); --chip-line: rgba(255,255,255,.5); }
.dpanel--night   { color: #EAF0FF; --chip-bg: rgba(255,255,255,.10); --chip-line: rgba(255,255,255,.18); }

/* Stacked fallback: no JS, reduced motion, or a narrow screen */
.daysx:not(.is-live) .dpanel { padding-inline: var(--s-6); border-radius: var(--r-lg); }
.daysx:not(.is-live) .dpanel + .dpanel { margin-block-start: var(--s-4); }
.daysx:not(.is-live) .dpanel--morning { background: linear-gradient(180deg, #FCE7D4, #F7C9A6); }
.daysx:not(.is-live) .dpanel--midday  { background: linear-gradient(180deg, #E6F1FE, #AECBF3); }
.daysx:not(.is-live) .dpanel--night   { background: linear-gradient(180deg, #241E45, #0E1026); }
.daysx:not(.is-live) .daysx__sky,
.daysx:not(.is-live) .daysx__stars,
.daysx:not(.is-live) .daysx__arc { display: none; }

/* --- live: ScrollTrigger pins the stage and scrubs the timeline --- */
/* lvh, not svh. Both are fixed values that ignore the address bar moving,
   which is what the pin needs — but svh is the height with the bars showing,
   so on iOS the sky stopped short of the screen once they retracted. lvh is
   the height with them hidden, which is the state you are in while
   scrolling, so the stage covers. */
.daysx.is-live .daysx__scroll { block-size: 340vh; block-size: 340lvh; }
.daysx.is-live .daysx__stage {
  block-size: 100vh;
  block-size: 100lvh;
  border-radius: 0;
  display: grid; align-items: center;
}
.daysx.is-live .daysx__panels { position: relative; min-block-size: 66vh; }
.daysx.is-live .dpanel {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 100%;
  padding-block: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0;
}
.daysx.is-live .dpanel:first-child { opacity: 1; }

.daysx.is-live .daysx__rail {
  display: grid; gap: var(--s-3);
  position: absolute;
  inset-block-start: 50%; translate: 0 -50%;
  inset-inline-end: 0;
}
/* The rail sits outside the panels, so currentColor gives it the section's
   ink and it disappears against the night sky. It follows the day instead. */
.daysx.is-live .daysx__rail li {
  inline-size: 3px; block-size: 34px;
  border-radius: var(--r-pill);
  background: #241E45;
  opacity: .22;
  transition: opacity var(--t-base) var(--e-out), background-color var(--t-base) var(--e-out);
}
.daysx.is-live .daysx__stage.is-night .daysx__rail li { background: #EAF0FF; }
.daysx.is-live .daysx__rail li.is-on { opacity: .85; }

/* --- the day section on a phone ---
   Not a cut-down version: the sky still fills the screen and the day still
   turns as you scroll. What changes is the composition — the sun rides
   high and small, the copy sits low and centred, and the progress rail
   lies flat under it where a thumb is not covering it. */
@media (max-width: 767px) {
  .daysx { margin-block-start: var(--s-6); }

  .daysx.is-live .daysx__scroll { block-size: 300vh; block-size: 300lvh; }
  .daysx.is-live .daysx__stage { align-items: end; }

  .daysx.is-live .daysx__panels { min-block-size: 0; }
  .daysx.is-live .dpanel {
    position: absolute;
    inset-block: auto 0;
    inline-size: 100%;
    display: block;
    padding-block-end: var(--s-10);
  }

  .daysx__sun { inline-size: 58px; block-size: 58px; margin: -29px 0 0 -29px; }

  .dpanel { max-inline-size: none; }
  .dpanel__time { margin-block-end: var(--s-4); }
  .dpanel__lede { font-size: 1.375rem; line-height: 1.4; }
  .dpanel__list { margin-block: var(--s-5); gap: 6px; }
  .dpanel__list li { font-size: .8125rem; padding: 7px var(--s-3); }
  .dpanel__close { font-size: .9688rem; }

  /* rail turns horizontal and sits at the foot of the stage */
  .daysx.is-live .daysx__rail {
    grid-auto-flow: column;
    inset-block: auto var(--s-7);
    inset-inline: 0;
    translate: none;
    justify-content: center;
    gap: var(--s-2);
  }
  .daysx.is-live .daysx__rail li { inline-size: 26px; block-size: 3px; }

  /* a floor of shade so the copy always has something to sit on */
  .daysx.is-live .daysx__stage::after {
    content: "";
    position: absolute; inset-inline: 0; inset-block-end: 0;
    block-size: 62%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .34) 55%, rgba(255, 255, 255, .5));
  }
  .daysx.is-live .daysx__stage.is-night::after {
    background: linear-gradient(180deg, transparent, rgba(6, 8, 24, .38) 55%, rgba(6, 8, 24, .55));
  }
}

/* ---------- 25. Habits card: garden scene ---------- */

.scene {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 62%;
  z-index: 0;
  pointer-events: none;
}
@media (min-width: 560px)  { .scene { inline-size: 60%; } }
@media (min-width: 1060px) { .scene { inline-size: 60%; } }

/* The garden is a hard-edged rectangle, so its leading edge is faded into
   the card tint. The other three bleed off the card and are clipped. */
.scene__ground {
  position: absolute;
  inset-block-end: -12%;
  inset-inline-end: -12%;
  inline-size: 138%;
  block-size: auto;
  -webkit-mask-image: linear-gradient(to left, #000 58%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(to left, #000 58%, transparent 100%),
              linear-gradient(180deg, transparent 0%, #000 26%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
[dir="rtl"] .scene__ground {
  -webkit-mask-image: linear-gradient(to right, #000 58%, transparent 100%),
                      linear-gradient(180deg, transparent 0%, #000 26%);
  mask-image: linear-gradient(to right, #000 58%, transparent 100%),
              linear-gradient(180deg, transparent 0%, #000 26%);
}

/* Stands on the sand, a little in from the card's edge */
.scene__char {
  position: absolute;
  inset-block-end: 16%;
  inset-inline-end: 20%;
  inline-size: 50%;
  block-size: auto;
  /* tight and low, so it reads as standing on the sand rather than hovering */
  filter: drop-shadow(0 6px 8px rgba(92, 62, 96, .32));
}

/* keep the copy clear of the scene */
.fcard--blush .fcard__head,
.fcard--blush .fcard__text { position: relative; z-index: 2; max-inline-size: 44%; }
@media (max-width: 559px) {
  .scene { inline-size: 100%; position: relative; block-size: 210px; margin-block-start: var(--s-5); }
  .fcard--blush .fcard__head,
  .fcard--blush .fcard__text { max-inline-size: none; }
}

/* The sky opens and closes the way the hero does — a big rounded corner
   curving away from the page, not a straight cut. The lead is dawn coloured
   and the tail night coloured, because the day always starts and ends there,
   so neither needs animating. */
.daysx__tail { display: block; }
/* Carries the heading and opens the sky, so the section starts on colour */
.daysx__intro {
  /* Tight on purpose: this replaces the heading block that used to sit on
     the page above, so the section must not get taller for the move. */
  padding-block: var(--s-7) var(--s-6);
  background: linear-gradient(180deg, #FDF0E4 0%, #FCE7D4 100%);
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
}
.daysx__intro .head { margin-block-end: 0; }
.daysx__intro .eyebrow { color: #8A6A52; }
.daysx__intro .lede { color: #5E4535; }
.daysx__tail {
  block-size: 40px;
  background: #0E1026;
  border-end-start-radius: var(--r-xl);
  border-end-end-radius: var(--r-xl);
}
@media (min-width: 768px) {
  .daysx__tail { block-size: 56px; border-end-start-radius: 56px; border-end-end-radius: 56px; }
  .daysx__intro { border-start-start-radius: 56px; border-start-end-radius: 56px; }
}
/* Stacked fallback paints its own backgrounds, so the ramps would not line up */
.daysx:not(.is-live) .daysx__tail { display: none; }
.daysx:not(.is-live) .daysx__intro { border-end-start-radius: var(--r-xl); border-end-end-radius: var(--r-xl); }

/* ---------- 26. How it works: the Sukun map ---------- */

/* Step two is "see your map", so the map is the middle column and the other
   two steps flank it, rather than three phone mockups in a row. */
.how {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .how { grid-template-columns: 1fr 1.15fr 1fr; gap: var(--s-7); }
}

.hstep { position: relative; }
/* Number and title share a line, so the badge reads as a marker on the
   heading rather than a separate element stacked above it. */
.hstep__head {
  display: flex; align-items: center; gap: var(--s-3);
  margin-block-end: var(--s-3);
}
.hstep__num {
  display: grid; place-items: center;
  inline-size: 30px; block-size: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  font-size: .8125rem; font-weight: 700;
}
.hstep__title { font-size: 1.25rem; font-weight: 700; letter-spacing: -.015em; }
html[lang="ar"] .hstep__title { font-weight: 600; }
.hstep__text {
  margin-block-start: var(--s-3);
  color: var(--ink-soft); font-size: .9688rem; line-height: 1.6;
  text-wrap: pretty;
}
.hstep__chip {
  display: inline-block;
  margin-block-start: var(--s-4);
  font-size: .8125rem; font-weight: 600;
  padding: 7px var(--s-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-xs);
}
@media (min-width: 900px) {
  /* the badge follows the text's own edge on each side */
  .hstep--a { text-align: end; }
  .hstep--a .hstep__head { flex-direction: row-reverse; justify-content: flex-start; }
  .hstep--b { text-align: start; }
}

/* --- the map --- */
.hmap { text-align: center; }
/* No disc behind it — the chart sits straight on the page, so the shapes
   read as data rather than as an illustration on a badge. */
.hmap__disc {
  position: relative;
  inline-size: min(380px, 100%);
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid; place-items: center;
}
.hmap__svg { inline-size: 100%; block-size: 100%; overflow: visible; }

.hmap__grid { color: #DFD9EE; stroke-width: 1; }
.hmap__dots { color: #B7AEDA; }
.hmap__labels {
  color: var(--ink-soft);
  font-size: 13px; font-weight: 600;
  font-family: inherit;
}

/* Day 0 sits under today, filled with the brand gradient. Today is drawn
   over it in translucent blue, so the baseline still reads through and the
   growth between the two shapes is the thing you notice. */
.hmap__base { fill: url(#sukunBase); stroke: rgba(255, 255, 255, .5); stroke-width: 1.5; }
.hmap__now  { fill: rgba(137, 172, 238, .34); stroke: #5B8FE0; stroke-width: 2; }

.hmap__legend {
  display: flex; justify-content: center; gap: var(--s-5);
  margin-block-start: var(--s-4);
  font-size: .8125rem; color: var(--muted);
}
.hmap__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.hmap__key i { inline-size: 12px; block-size: 12px; border-radius: 4px; }
.hmap__key--base i { background: var(--grad-brand); }
.hmap__key--now i  { background: rgba(137, 172, 238, .6); border: 1px solid #5B8FE0; }

/* The middle column runs taller than the side ones, so its caption is pulled
   in tight against the map rather than left hanging below it. */
.hmap__head { justify-content: center; margin-block-start: var(--s-4); }
.hmap .hstep__title { margin-block-start: 0; }
.hmap .hstep__text { max-inline-size: 34ch; margin-inline: auto; margin-block-start: var(--s-2); }

/* The breathing card's only visual is the orb, and that is absolutely
   positioned, so it adds no height. Every other card is held open by its
   own content; this one needs telling, or it collapses to a strip. */
@media (max-width: 559px) {
  .fcard--night { min-block-size: 330px; }
  /* below the copy, not behind it */
  .orb { inline-size: 116px; inset-block-start: auto; inset-block-end: 8%; translate: none; inset-inline-end: 12%; }
}

/* On a phone the map stacks, so its caption reads first like the other two
   steps do, rather than arriving after the chart it describes. */
@media (max-width: 899px) {
  .hmap { display: flex; flex-direction: column; }
  .hmap__head { order: -2; margin-block-start: 0; }
  .hmap .hstep__text { order: -1; margin-block-end: var(--s-5); }
  .hmap__disc { order: 0; }
  .hmap__legend { order: 1; }
}

/* ---------- 27. Audio journeys: pond and player arc ---------- */

/* Same treatment as the breathing card: a photographic sky sits behind, its
   edges already feathered in the asset, so it has no rectangle to hide. */
.fcard--lilac { background: linear-gradient(180deg, #E8F2FC 0%, #DCEAF8 55%, #EAE3F6 100%); }
/* Overrides the night card's height-driven sizing: this sky has to cover the
   whole card, otherwise the tall source renders as a narrow band down the
   middle with the card's own gradient either side of it. */
.fcard__sky--water {
  inline-size: 100%;
  block-size: 100%;
  left: 0;
  transform: none;
  object-fit: cover;
  object-position: center 34%;
  opacity: .95;
}
[dir="rtl"] .fcard__sky--water { transform: scaleX(-1); }

.player {
  position: absolute;
  z-index: 1;
  inset-block-end: -4%;
  inset-inline-end: -6%;
  inline-size: 66%;
  aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
}
@media (min-width: 560px)  { .player { inline-size: 60%; } }
@media (min-width: 1060px) { .player { inline-size: 58%; } }

/* The arc is the played portion of the track, so it reads as a player */
.player__arc {
  position: absolute;
  inline-size: 82%;
  inset-block-start: 42%;
  translate: 0 -50%;
  opacity: .9;
}
/* the arc opens to one side, so it mirrors with the reading direction */
[dir="rtl"] .player__arc { transform: scaleX(-1); }

/* Bleeds off the card's bottom and outer edge; the top and inner edge are
   feathered in the asset, so the pond has no visible border anywhere. */
.player__pond {
  position: absolute;
  inset-block-end: 0;
  inline-size: 118%;
}

/* The copy sits over a photograph, so it gets a scrim rather than relying on
   whatever the image happens to do behind it. Without this it measured
   exactly 4.5:1 — on the line, with no margin for a brighter frame. */
.fcard--lilac::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to var(--scrim-dir, left),
    rgba(255, 255, 255, .93) 0%, rgba(255, 255, 255, .8) 36%, transparent 66%);
}
[dir="rtl"] .fcard--lilac { --scrim-dir: right; }

.fcard--lilac .fcard__head,
.fcard--lilac .fcard__text { position: relative; z-index: 2; max-inline-size: 46%; }
/* A shade deeper than the shared lilac accent: this card's ground is a photo,
   and the flat tint only cleared 3.9:1 over its darker passages. */
.fcard--lilac .fcard__title,
.fcard--lilac .fcard__icon,
.fcard--lilac .fcard__text { color: #6B3F9E; }
@media (max-width: 559px) {
  /* Stacked here, so the copy runs the full width and a side scrim does
     nothing for it — the shade comes down from the top instead. */
  .fcard--lilac,
  [dir="rtl"] .fcard--lilac { --scrim-dir: bottom; }
  .fcard--lilac { min-block-size: 380px; }
  .fcard--lilac .fcard__head,
  .fcard--lilac .fcard__text { max-inline-size: none; }
  .player { inline-size: 82%; inset-inline-end: 9%; }
}

/* ---------- 28. Copy legibility over the card scenes ---------- */

/* Measured with the copy hidden, so these are the real grounds rather than
   anti-aliased glyph edges. Three cards failed AA before this block. */

/* On desktop the pond and copy never overlap, so the scene sits above the
   scrim and keeps its full colour. Only on mobile, where the copy runs over
   it, does the scrim have to come out on top. */
.player { z-index: 2; }
.fcard--lilac .fcard__head,
.fcard--lilac .fcard__text { z-index: 3; }
@media (max-width: 559px) { .player { z-index: 0; } }

/* Night: the moon drifts behind the copy on a phone, taking it to 1.65:1 */
.fcard--night::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 14, 30, .74) 0%, rgba(2, 14, 30, .42) 42%, transparent 72%);
}
@media (min-width: 560px) {
  .fcard--night::before {
    background: linear-gradient(to var(--scrim-dir, left),
      rgba(2, 14, 30, .68) 0%, rgba(2, 14, 30, .34) 44%, transparent 70%);
  }
  [dir="rtl"] .fcard--night { --scrim-dir: right; }
}

/* Habits: sat at 4.40:1 against the garden on every width */
.fcard--blush .fcard__title,
.fcard--blush .fcard__icon,
.fcard--blush .fcard__text { color: #9C3D68; }

/* Sits on the rock in the pond. The rock's top surface reads at roughly 36%
   up from the pond's base, so that is where the feet land. */
.player__char {
  position: absolute;
  inset-block-end: 25.5%;
  inline-size: 23%;
  block-size: auto;
  z-index: 1;
  filter: drop-shadow(0 8px 10px rgba(70, 90, 130, .3));
}
@media (max-width: 559px) { .player__char { inline-size: 22%; } }