/* ==========================================================================
   Sadeed — landing page
   Layout follows insp1: a soft sky gutter, one floating white sheet, huge
   quiet headings, captions that lead with a bold phrase, a full-bleed sky
   band, then alternating rows. Palette + type from SADEED_BRAIN.md.
   The hero swaps insp1's cloud for our own world: sky, grass, two owls.
   RTL: logical properties only. No physical left/right, no row-reverse.
   ========================================================================== */

/* ── font ─────────────────────────────────────────────────────────────── */
@font-face { font-family: "Handicrafts"; src: url("assets/fonts/handicrafts-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Handicrafts"; src: url("assets/fonts/handicrafts-medium.woff2")  format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Handicrafts"; src: url("assets/fonts/handicrafts-bold.woff2")    format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Handicrafts"; src: url("assets/fonts/handicrafts-black.woff2")   format("woff2"); font-weight: 900; font-display: swap; }

/* ── tokens ───────────────────────────────────────────────────────────── */
:root {
  --paper: #fff;
  --sky-1: #dceef0;
  --sky-2: #eff6f5;
  --card: #f4f7f6;
  --line: #e6ecea;

  --ink: #0e1413;
  --ink-2: #46524f;
  --ink-3: #7c8885;

  --teal: #6ba8a4;
  --teal-dark: #4a8b87;
  --teal-wash: #eff8f6;
  --gold: #d9a441;
  /* the owl's beak orange — the one warm accent, used for the flow icons */
  --orange: #e0862a;
  --orange-wash: #fdf3e7;

  --sheet-r: 28px;
  --max-w: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 9vw, 140px);

  /* Tight for display, generous for reading. On web there is no glyph
     clipping (unlike RN), so display can go below the 1.47 native floor. */
  --lh-display: 1.34;
  --lh-body: 1.8;

  --shadow-sheet: 0 1px 2px rgb(14 20 19 / 4%), 0 24px 60px -24px rgb(14 20 19 / 12%);
  --shadow-pill: 0 1px 2px rgb(14 20 19 / 6%), 0 6px 18px -8px rgb(14 20 19 / 14%);
}

/* ── reset ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: "Handicrafts", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(0.98rem, 0.93rem + 0.25vw, 1.075rem);
  line-height: var(--lh-body);
  color: var(--ink);
  /* absolute stop, not a percentage: the gutter must look the same on a short
     page and a long one. No `fixed` — it janks on scroll and iOS ignores it. */
  background: linear-gradient(180deg, var(--sky-1) 0, var(--sky-2) 760px, var(--sky-2) 100%);
  text-align: start;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Every phone mockup is hard-cropped at its source canvas edge (hero.webp is
   still 76% opaque on its last row), which reads as a sliced-off shadow.
   Dissolve the bottom instead of showing the cut. */
.shot {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 99%);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--teal-dark);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Latin runs inside Arabic text. Numerals stay Western (0-9). */
bdi { font-family: "Segoe UI", system-ui, sans-serif; font-weight: 600; }

/* ── type ─────────────────────────────────────────────────────────────── */
.display {
  font-size: clamp(2.05rem, 1.2rem + 4.1vw, 4rem);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.7rem, 1.1rem + 2.7vw, 2.85rem);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h3 {
  font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.25rem);
  font-weight: 700;
  line-height: 1.6;
}
.lede {
  font-size: clamp(1rem, 0.94rem + 0.34vw, 1.15rem);
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}
.muted { color: var(--ink-3); }

/* insp1's caption voice: a bold phrase leads, the rest stays regular */
.caption { color: var(--ink-2); }
.caption b { color: var(--ink); font-weight: 700; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--teal-dark);
}
.eyebrow::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

/* ── shell ────────────────────────────────────────────────────────────── */
.sheet {
  max-inline-size: var(--max-w);
  margin-inline: auto;
  margin-block: clamp(12px, 2vw, 26px);
  background: var(--paper);
  border-radius: var(--sheet-r);
  box-shadow: var(--shadow-sheet);
  overflow: clip;
}
.wrap { padding-inline: var(--gutter); }
.section { position: relative; padding-block: var(--section-y); }
.section-head { max-inline-size: 40rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head > * + * { margin-block-start: 16px; }

/* ── header ───────────────────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-block-size: 44px; }
/* logo is transparent art — never wrapped in a box, circle or border */
.brand img { inline-size: 38px; }
.brand span { font-weight: 900; font-size: 1.22rem; letter-spacing: -0.01em; }

.nav-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline: auto;
  padding: 5px;
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(12px);
}
.nav-pill a {
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.18s, color 0.18s;
}
.nav-pill a:hover { background: rgb(255 255 255 / 80%); color: var(--ink); }

.header-stores { display: flex; align-items: center; gap: 4px; flex: none; }
.header-stores .store-link { display: grid; place-items: center; min-block-size: 44px; padding-inline: 4px; }
.header-stores .store { block-size: 34px; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  background: rgb(255 255 255 / 72%);
  border: 1px solid rgb(255 255 255 / 90%);
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(12px);
}
.menu-toggle svg { inline-size: 16px; }

/* mobile sheet */
.menu-sheet {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-start-start-radius: 22px;
  border-start-end-radius: 22px;
  box-shadow: 0 -18px 50px -20px rgb(14 20 19 / 28%);
  transform: translateY(102%);
  /* visibility keeps the links out of the tab order while closed */
  visibility: hidden;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0.28s;
}
.menu-sheet[data-open="true"] {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}
.menu-sheet a {
  display: block;
  padding: 15px 8px;
  font-size: 1.05rem;
  font-weight: 700;
  border-block-end: 1px solid var(--line);
}
.menu-sheet a:last-child { border-block-end: 0; }
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgb(14 20 19 / 34%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
}
.menu-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.store {
  display: block;
  block-size: 48px;
  inline-size: auto;
  transition: transform 0.18s, filter 0.18s;
}
.store-link { display: block; border-radius: 10px; }
.store-link:hover .store { transform: translateY(-2px); filter: brightness(1.06); }

.stores { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stores.center { justify-content: center; }

/* gold is reserved for premium/featured only — CTAs are always teal */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 48px;
  padding-inline: 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
}
.btn-primary { background: var(--teal); color: #fff; box-shadow: var(--shadow-pill); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: var(--shadow-pill); }
.btn-ghost:hover { transform: translateY(-2px); }

/* ==========================================================================
   Hero — sky backdrop, two owls and the phones standing on grass
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block-end: 0;
}

.hero-sky {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}
/* readability veil: near-white behind the header and headline, clearing to
   open sky by the time the eye reaches the phones */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 90%) 0%,
    rgb(255 255 255 / 78%) 26%,
    rgb(255 255 255 / 34%) 50%,
    rgb(255 255 255 / 0%) 70%
  );
}

/* ── drifting clouds ──────────────────────────────────────────────────── */
.hero-clouds { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.cloud { position: absolute; opacity: 0.9; will-change: transform; }
.cloud-a { inline-size: clamp(120px, 17vw, 250px); inset-block-start: 46%; inset-inline-start: 2%; animation: drift-a 17s ease-in-out infinite; }
.cloud-b { inline-size: clamp(100px, 13vw, 200px); inset-block-start: 58%; inset-inline-end: 3%; animation: drift-b 21s ease-in-out infinite; }
.cloud-c { inline-size: clamp(80px, 10vw, 150px); inset-block-start: 38%; inset-inline-end: 22%; opacity: 0.65; animation: drift-a 26s ease-in-out infinite reverse; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(26px, -12px, 0); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-30px, -16px, 0); }
}

/* ── hero copy ────────────────────────────────────────────────────────── */
.hero-copy { padding-block: clamp(28px, 5vw, 62px) 0; }
.hero-headline { position: relative; display: inline-block; }
.hero-headline .display { max-inline-size: 17ch; margin-inline: auto; }

/* The badge is the free claim: big, tilted, stuck to the headline's top
   corner. It sits ABOVE the text box (inset-block-end: 100% minus a nudge)
   so it can never land on a word, whatever the headline wraps to. */
.free-badge {
  position: absolute;
  z-index: 2;
  inline-size: clamp(96px, 11vw, 152px);
  inset-block-end: calc(100% - clamp(20px, 2.6vw, 40px));
  inset-inline-end: clamp(-8px, 1vw, 24px);
  transform: rotate(-13deg);
  filter: drop-shadow(0 8px 18px rgb(14 20 19 / 22%));
}

.hero .lede { margin-block: 22px 0; margin-inline: auto; text-align: center; }
.hero .stores { margin-block-start: 30px; }

/* ── the stage: owls + phones standing on the grass ───────────────────── */
.hero-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 1vw, 24px);
  margin-block-start: clamp(30px, 4vw, 52px);
  padding-inline: var(--gutter);
}
.hero-phones { position: relative; z-index: 2; inline-size: min(56%, 620px); flex: none; }
.hero-stage .owl { flex: none; position: relative; }

/* Each owl overlaps the phone cluster from the side it faces. Under RTL the
   right-hand owl is the FIRST flex child, so the side facing the phones is
   its inline-END; for the left-hand owl it is the inline-START. Getting these
   backwards pushes the owls away from the cluster instead of into it. */

/* owl-right stands IN the grass, in front of everything — bigger, and pushed
   far enough down that the blades swallow its feet */
.owl-right {
  z-index: 3;
  inline-size: clamp(84px, 15.5vw, 218px);
  margin-inline-end: clamp(-58px, -4.5vw, -18px);
  margin-block-end: -7%;
  transform: rotate(4deg);
  transform-origin: 50% 100%;
}
/* owl-left is airborne: small, tucked behind the screens and lifted clear of
   the grass so it reads as flying out from behind them. It stays a flex item
   and is lifted with translate — absolute positioning here is not worth it,
   since inset-inline-* on an absolute child resolves unpredictably under RTL
   (it landed at x=-364, right outside the clipped sheet). */
.owl-left {
  z-index: 1;
  inline-size: clamp(56px, 7.2vw, 104px);
  margin-inline-start: clamp(-84px, -6vw, -28px);
  margin-block-end: 0;
  transform: translateY(clamp(-215px, -15vw, -70px)) rotate(-14deg);
}

/* ── the ground: one grass strip tiled at three depths ───────────────────
   Percentages, not pixels: block margins and padding resolve against the
   parent's inline size — the same axis that drives each layer's height — so
   the overlap holds at every width. (No margin-inline-start/translate
   centering hack: under RTL the start margin pushes left and throws the
   layer clean out of the sheet.) */
.hero-ground {
  position: relative;
  z-index: 3;
  margin-block-start: -7.6%;
  /* the belt runs deeper than the blades so .page-body can ride over its
     lower half — that is what removes the hard cut-off line */
  padding-block-end: 3.5%;
}
/* Each depth uses a DIFFERENT strip, stretched to full width in one piece.
   Tiling one strip with repeat-x made the repeat obvious and cheap-looking. */
.grass {
  inline-size: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
/* far layer sits back: hazier, cooler, less saturated */
.grass-far {
  padding-block-start: 8.6%;
  background-image: url("assets/img/grass-far.webp");
  opacity: 0.55;
  filter: saturate(0.6) brightness(1.06) blur(2px);
}
.grass-mid {
  padding-block-start: 11.6%;
  margin-block-start: -6.4%;
  background-image: url("assets/img/grass-mid.webp");
  opacity: 0.85;
  filter: saturate(0.85);
}
.grass-near {
  padding-block-start: 13.75%;
  margin-block-start: -8%;
  background-image: url("assets/img/grass-near.webp");
}

/* ── the page rides over the grass belt: that overlap is the depth handoff.
      The hero is NOT sticky — pinning it taller than the viewport would park
      the grass permanently behind this panel, and the grass is the hinge the
      whole transition turns on. ─────────────────────────────────────────── */
.page-body {
  position: relative;
  z-index: 4;
  background: var(--paper);
  border-start-start-radius: clamp(22px, 3vw, 38px);
  border-start-end-radius: clamp(22px, 3vw, 38px);
  margin-block-start: clamp(-70px, -4.5vw, -34px);
  box-shadow: 0 -22px 44px -16px rgb(14 20 19 / 20%);
}

/* Scroll-driven parallax: each grass layer travels a different distance as
   the belt crosses the viewport, so the ground opens into depth on the way
   through. Progressive enhancement — without support the layered, overlapped
   belt still reads correctly, so nothing is lost.

   Only the far and mid layers travel. The near layer is the ground plane the
   owls and phones stand on — move it and their feet visibly detach. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grass-far, .grass-mid {
      animation: linear both;
      animation-timeline: view();
      animation-range: entry 100% exit 100%;
    }
    .grass-far { animation-name: parallax-far; }
    .grass-mid { animation-name: parallax-mid; }
  }
}
@keyframes parallax-far { to { transform: translateY(-30px) scale(1.03); } }
@keyframes parallax-mid { to { transform: translateY(-14px); } }

/* ── problem ──────────────────────────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3.5vw, 44px);
  margin-block-start: clamp(44px, 5vw, 64px);
}
.problem-item > * + * { margin-block-start: 12px; }
.problem-item h3 { padding-block-end: 12px; border-block-end: 1px solid var(--line); }

/* ── the flow: five scattered tools consolidating into one platform ───── */
.flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
  margin-block-start: clamp(52px, 6vw, 78px);
}
/* The rail the steps sit on, drawn from the reading edge inward on reveal.
   Absolutely positioned, not a grid item: as a grid item it claimed its own
   column instead of spanning, and shoved the steps out of place. */
.flow::before {
  content: "";
  position: absolute;
  inset-block-start: 33px;
  inset-inline: 17%;
  block-size: 2px;
  background: linear-gradient(to left, var(--orange), rgb(224 134 42 / 18%));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.flow.in::before { transform: scaleX(1); }

.flow-step { position: relative; text-align: center; }
.flow-icon {
  display: grid;
  place-items: center;
  inline-size: 68px;
  block-size: 68px;
  margin-inline: auto;
  border-radius: 22px;
  background: var(--orange-wash);
  color: var(--orange);
  box-shadow: 0 0 0 8px var(--paper);
}
.flow-icon svg { inline-size: 30px; }
.flow-step h3 { margin-block-start: 18px; }
.flow-swap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  font-size: 0.92rem;
  color: var(--ink-3);
}
.flow-swap s { text-decoration-thickness: 1px; }
.flow-swap b { color: var(--orange); font-weight: 700; }

/* staggered entry, driven by the same observer as .reveal */
.flow-step { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.flow.in .flow-step { opacity: 1; transform: none; }
.flow.in .flow-step:nth-child(2) { transition-delay: 0.14s; }
.flow.in .flow-step:nth-child(3) { transition-delay: 0.28s; }

.check {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: grid;
  place-items: center;
}
.check svg { inline-size: 11px; }

/* ── features — screens on open ground, never boxed in cards ──────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(44px, 6vw, 82px) clamp(28px, 4vw, 56px);
  margin-block-start: clamp(48px, 6vw, 72px);
}
.feature { display: flex; flex-direction: column; text-align: center; }
/* the four mockups are letterboxed to one canvas at bake time, so equal
   widths here already give every caption the same starting line */
.feature-art { position: relative; margin-block-end: 22px; }
/* the same soft bloom that lifts the hero phones — replaces the card */
.feature-art::before {
  content: "";
  position: absolute;
  inset-block: 18% 4%;
  inset-inline: 4%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 60%, rgb(107 168 164 / 15%) 0%, rgb(220 238 240 / 26%) 45%, transparent 72%);
  filter: blur(26px);
}
.feature-art img { position: relative; z-index: 1; inline-size: 100%; }
.feature h3 { margin-block-end: 8px; }
/* a flex column stretches its children — keep the tag pill-sized */
.feature .tag { align-self: center; }
.feature .caption { max-inline-size: 42ch; margin-inline: auto; font-size: 0.97rem; }

.tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgb(217 164 65 / 14%);
  color: #a97b25;
  margin-block-end: 10px;
}

/* ── steps ────────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: clamp(12px, 2vw, 28px);
  margin-block-start: clamp(48px, 6vw, 72px);
}
.step { text-align: center; }
.step > * + * { margin-block-start: 12px; }
.step-n {
  display: grid;
  place-items: center;
  inline-size: 42px;
  block-size: 42px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
}
.step-link { block-size: 100%; display: grid; place-items: center; padding-block-start: 22px; }
.step-link img { inline-size: 124px; opacity: 0.55; }

/* ── sky band ─────────────────────────────────────────────────────────── */
.band {
  position: relative;
  margin-inline: var(--gutter);
  margin-block-end: var(--section-y);
  border-radius: 24px;
  overflow: clip;
  isolation: isolate;
  text-align: center;
  padding: clamp(52px, 8vw, 104px) clamp(22px, 5vw, 68px);
}
.band-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(255 255 255 / 18%) 0%, rgb(255 255 255 / 55%) 100%);
}
.band h2 { max-inline-size: 22ch; margin-inline: auto; }
.band .lede { margin-block: 18px 0; margin-inline: auto; color: var(--ink-2); }
.band-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-block-start: 28px;
}
.band-points li {
  padding: 9px 18px;
  border-radius: 999px;
  background: rgb(255 255 255 / 82%);
  border: 1px solid rgb(255 255 255 / 90%);
  font-size: 0.92rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
/* the CTA must not read as a fourth proof-pill — give it weight and distance */
.band .btn {
  margin-block-start: 40px;
  min-block-size: 54px;
  padding-inline: 34px;
  font-size: 1.05rem;
  box-shadow: 0 2px 4px rgb(14 20 19 / 8%), 0 14px 34px -12px rgb(14 20 19 / 30%);
}

/* ── showcase rows — arrow points from the copy to the screen ─────────── */
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 68px);
}
.row-art { position: relative; }
.row-art::before {
  content: "";
  position: absolute;
  inset-block: 16% 2%;
  inset-inline: 2%;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 60%, rgb(107 168 164 / 16%) 0%, rgb(220 238 240 / 28%) 45%, transparent 72%);
  filter: blur(30px);
}
.row-art img { position: relative; z-index: 1; margin-inline: auto; }
.row-copy { position: relative; }
.row-copy > * + * { margin-block-start: 16px; }
.row.alt .row-art { order: 2; }

/* hand-drawn pointer sitting between the copy and the screen it explains */
.row-arrow {
  position: absolute;
  z-index: 2;
  inline-size: clamp(90px, 9vw, 148px);
  opacity: 0.5;
  inset-block-end: -14%;
  inset-inline-start: -6%;
  /* both arrows are mirrored so each head turns toward the screen it explains;
     row 1's screen sits up and to the side, so its arrow also sweeps upward */
  transform: scaleX(-1) rotate(20deg);
}
.row.alt .row-arrow { inset-inline-start: auto; inset-inline-end: -6%; transform: none; }

.checklist { display: grid; gap: 12px; margin-block-start: 22px; }
.checklist li { display: flex; align-items: start; gap: 11px; color: var(--ink-2); }
.checklist .check { margin-block-start: 5px; }

/* ── faint hand-drawn decoration, never an icon ───────────────────────── */
.doodles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
}
.doodles img {
  position: absolute;
  inline-size: clamp(72px, 8vw, 118px);
  padding: clamp(8px, 1vw, 13px);
  opacity: 0.22;
  border: 1px solid rgb(107 168 164 / 12%);
  border-radius: 24px;
  background:
    radial-gradient(circle at 32% 24%, rgb(255 255 255 / 88%), transparent 42%),
    linear-gradient(145deg, rgb(239 248 246 / 76%), rgb(255 250 239 / 66%));
  box-shadow: 0 18px 34px -28px rgb(14 20 19 / 40%);
  filter: sepia(0.12) saturate(0.72);
  mix-blend-mode: multiply;
  translate: 0 0;
  animation: sketch-drift 8s ease-in-out infinite alternate;
}
.doodles img:nth-child(even) {
  animation-delay: -3.2s;
  animation-duration: 9.5s;
}
.doodles img:nth-child(3n) {
  animation-delay: -5.4s;
  animation-duration: 10.5s;
}
.studio-doodles img {
  inline-size: clamp(82px, 9vw, 128px);
  opacity: 0.26;
}
@keyframes sketch-drift {
  to { translate: 0 -8px; }
}
.section > .wrap, .section > * { position: relative; z-index: 1; }
.section > .doodles { position: absolute; z-index: 0; }

/* ── faq ──────────────────────────────────────────────────────────────── */
.faq { max-inline-size: 46rem; margin-inline: auto; margin-block-start: clamp(38px, 5vw, 54px); }
.faq details { border-block-end: 1px solid var(--line); padding-block: 6px; }
.faq summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-block: 18px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  inline-size: 11px;
  block-size: 11px;
  margin-inline-start: auto;
  flex: none;
  border-inline-end: 2px solid var(--ink-3);
  border-block-end: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 0.22s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--ink-2); padding-block-end: 20px; max-inline-size: 60ch; }

/* ── final cta ────────────────────────────────────────────────────────── */
.cta { text-align: center; background: var(--teal-wash); padding-block: clamp(64px, 8vw, 108px); }
.cta img.cta-owl { inline-size: clamp(96px, 12vw, 148px); margin-inline: auto; margin-block-end: 22px; }
.cta .lede { margin-inline: auto; margin-block-start: 16px; }
.cta .stores { margin-block-start: 32px; }
.cta .fineprint { margin-block-start: 18px; font-size: 0.88rem; }

/* ── footer ───────────────────────────────────────────────────────────── */
.footer { padding-block: clamp(44px, 5vw, 64px); border-block-start: 1px solid var(--line); }
.footer-top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: start; }
.footer-contact { display: grid; gap: 2px; }
.footer-contact a, .footer-contact span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-block-size: 44px;
  color: var(--ink-2);
}
.footer-contact a:hover { color: var(--teal-dark); }
.footer-contact svg { inline-size: 17px; flex: none; color: var(--teal-dark); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 0.94rem; }
.footer-links a { display: flex; align-items: center; min-block-size: 44px; color: var(--ink-2); }
.footer-links a:hover { color: var(--teal-dark); }
.footer-base {
  margin-block-start: 34px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--ink-3);
}

/* ── legal document (terms.html) ──────────────────────────────────────── */
.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink-2);
  background: rgb(255 255 255 / 72%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pill);
  backdrop-filter: blur(12px);
}
.doc-back:hover { color: var(--ink); }
.doc-back svg { inline-size: 15px; flex: none; }

.doc { max-inline-size: 44rem; margin-inline: auto; padding-block: clamp(28px, 5vw, 56px) clamp(48px, 7vw, 88px); }
.doc-head { padding-block-end: clamp(28px, 4vw, 44px); border-block-end: 1px solid var(--line); }
.doc-head h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.7rem); font-weight: 900; line-height: var(--lh-display); letter-spacing: -0.012em; }
.doc-head .lede { margin-block-start: 14px; }
.doc-date {
  display: inline-block;
  margin-block-start: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-wash);
  color: var(--teal-dark);
  font-size: 0.86rem;
  font-weight: 700;
}

.doc-section { padding-block-start: clamp(32px, 4vw, 46px); }
/* block, not flex: these headings mix Arabic text with LTR <bdi> runs, and a
   flex container would turn each run into its own item and break the spacing */
.doc-section h2 {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0;
}
.doc-n {
  display: inline-grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  margin-inline-end: 12px;
  vertical-align: 2px;
  border-radius: 9px;
  background: var(--teal);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
}
.doc-section > p { margin-block-start: 16px; color: var(--ink-2); }
.doc-section a { color: var(--teal-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.doc-list { display: grid; gap: 14px; margin-block-start: 18px; }
.doc-list li { padding: 16px 20px; border-radius: 14px; background: var(--card); color: var(--ink-2); }
.doc-list strong { color: var(--ink); font-weight: 700; }

/* plain bullets, not cards: the legal text lists single words ("الاسم",
   "المخزون") and one padded card per word reads as noise */
.doc-section h3 { margin-block-start: 28px; font-size: 1rem; font-weight: 700; line-height: 1.6; }
.doc-bullets { margin-block-start: 14px; padding-inline-start: 1.15em; list-style: disc; color: var(--ink-2); }
.doc-bullets li { margin-block-start: 8px; line-height: 1.75; }
.doc-bullets li::marker { color: var(--teal); }
.doc-sign { margin-block-start: 22px; color: var(--ink); font-weight: 700; }

.doc-foot-links { justify-content: center; margin-block-end: 4px; }

/* ── reveal ───────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }

/* screens slide in from the side they sit on, so the motion reads as the
   phone arriving into frame rather than the whole block nudging upward */
.slide-in { opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.slide-in.from-start { transform: translateX(56px); }
.slide-in.from-end { transform: translateX(-56px); }
.slide-in.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .slide-in, .flow-step { opacity: 1; transform: none; transition: none; }
  .flow::before { transform: scaleX(1); transition: none; }
  .menu-sheet { transition: none; }
  .cloud { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .step-link { display: none; }
  .hero-phones { inline-size: min(60%, 540px); }
}

@media (max-width: 860px) {
  .problem-grid { grid-template-columns: 1fr; gap: 28px; }
  .row, .row.alt { grid-template-columns: 1fr; }
  .row.alt .row-art { order: 0; }
  .row-arrow { display: none; }
}

@media (max-width: 720px) {
  :root { --sheet-r: 22px; }

  .nav-pill, .header-stores { display: none; }
  .menu-toggle { display: inline-flex; margin-inline-start: auto; }

  .feature-grid { grid-template-columns: 1fr; }

  /* Stacked: the rail turns vertical and draws downward, so the section still
     animates here instead of going static. Icons drop to 46px — 68px was
     oversized against a single column of text. */
  .flow { grid-template-columns: 1fr; gap: 26px; }
  /* the rail runs down the icon column (rightmost in RTL, hence inline-start) */
  .flow::before {
    inset-block: 26px 26px;
    inset-inline: auto;
    inset-inline-start: 22px;
    inline-size: 2px;
    block-size: auto;
    background: linear-gradient(to bottom, var(--orange), rgb(224 134 42 / 18%));
    transform: scaleY(0);
    transform-origin: center top;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  }
  .flow.in::before { transform: scaleY(1); }

  .flow-step {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 2px 16px;
    align-items: center;
    text-align: start;
  }
  .flow-icon {
    grid-row: span 2;
    inline-size: 46px;
    block-size: 46px;
    border-radius: 15px;
    margin-inline: 0;
    box-shadow: 0 0 0 6px var(--paper);
  }
  .flow-icon svg { inline-size: 21px; }
  .flow-step h3 { margin-block-start: 0; align-self: end; }
  .flow-swap { margin-block-start: 0; align-self: start; }

  .steps { grid-template-columns: 1fr; gap: 32px; }
  .step { text-align: start; display: grid; grid-template-columns: 42px 1fr; gap: 4px 16px; }
  .step-n { grid-row: span 2; }
  .step > * + * { margin-block-start: 0; }

  /* Mobile hero order: badge → headline → lede → stores → stage (brief).
     The headline runs nearly edge to edge here, so there is no outer corner
     to hang the badge on — it becomes a normal centred element above it. */
  .hero-copy { padding-block-start: 22px; }
  .hero-headline { display: block; }
  .free-badge {
    position: static;
    inline-size: 92px;
    margin-inline: auto;
    margin-block-end: 12px;
    transform: rotate(-8deg);
  }
  .hero .stores { gap: 10px; }
  .hero .store { block-size: 44px; }
  .hero-stage { padding-inline: 8px; gap: 0; align-items: flex-end; }
  .hero-phones { inline-size: 64%; }
  .cloud-c { display: none; }

  .band { margin-inline: 14px; }
  .footer-top { flex-direction: column; gap: 26px; }
}

@media (max-width: 400px) {
  .stores { flex-direction: column; align-items: stretch; }
  .stores .store-link { display: grid; place-items: center; }
}
/* ── Hero scene v2: centred ensemble + camera-through-grass transition ── */
.hero-copy { padding-block: clamp(28px, 5vw, 62px) 0; }
.hero .stores {
  margin-block-start: 26px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(8px, 1.2vw, 12px);
}
.hero .store-link { display: block; min-inline-size: 0; }
.hero .store { block-size: clamp(38px, 4vw, 48px); }

.hero-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: end center;
  margin-block-start: clamp(24px, 3.5vw, 44px);
  padding-inline: var(--gutter);
}
.hero-ensemble {
  position: relative;
  inline-size: min(58%, 610px, 60svh);
  margin-inline: auto;
}
.hero-phones {
  position: relative;
  z-index: 2;
  inline-size: 100%;
}

/* Literal visual sides: physical left/right are intentional here. */
.hero-stage .owl {
  position: absolute;
  block-size: auto;
  margin: 0;
}
.owl-left {
  z-index: 3;
  inline-size: clamp(74px, 25%, 150px);
  left: -18%;
  bottom: 6%;
  transform: rotate(-2deg);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 16px 18px rgb(14 20 19 / 15%));
}
.owl-right {
  z-index: 1;
  inline-size: clamp(54px, 18%, 106px);
  right: -7%;
  bottom: 56%;
  transform: rotate(9deg);
  transform-origin: 50% 70%;
  filter: drop-shadow(0 12px 16px rgb(14 20 19 / 12%));
  animation: owl-flight 4.8s ease-in-out infinite;
}
@keyframes owl-flight {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: 0 -7px; rotate: -2deg; }
}

.hero-ground {
  position: relative;
  z-index: 4;
  block-size: clamp(104px, 16vw, 188px);
  margin-block-start: clamp(-92px, -7.8vw, -48px);
  padding-block-end: 0;
  perspective: 900px;
  transform-style: preserve-3d;
  pointer-events: none;
}
.grass {
  position: absolute;
  inset-inline: -4%;
  inset-block-end: 0;
  inline-size: 108%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 100%;
  transform-origin: 50% 100%;
  backface-visibility: hidden;
}
.grass-far {
  z-index: 1;
  block-size: 68%;
  inset-block-end: 35%;
  opacity: 0.48;
  filter: saturate(0.56) brightness(1.08) blur(1.5px);
}
.grass-mid {
  z-index: 2;
  block-size: 84%;
  inset-block-end: 13%;
  opacity: 0.78;
  filter: saturate(0.72) brightness(1.02);
}
.grass-near {
  z-index: 3;
  background-image: url("assets/img/grass-mid.webp");
  background-position: 38% bottom;
  filter: saturate(0.76) brightness(0.9) contrast(1.04);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0 82%, transparent 100%);
}
.grass-close {
  z-index: 4;
  inset-inline: -12%;
  inline-size: 124%;
  block-size: 112%;
  background-image: url("assets/img/grass-near.webp");
  opacity: 0;
  filter: saturate(0.52) brightness(0.68) contrast(1.08) blur(1px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22% 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22% 86%, transparent 100%);
}

.page-body {
  z-index: 8;
  margin-block-start: clamp(-58px, -4vw, -30px);
}

/* Positive Y offsets counter normal page travel. Scaling from the bottom then
   makes the blades pass the camera instead of sliding away as a flat strip. */
.scroll-effects .hero-copy {
  opacity: clamp(0, calc(1 - var(--hero-scroll, 0) * 1.65), 1);
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -44px), 0);
}
.scroll-effects .hero-stage {
  opacity: clamp(0, calc(1 - var(--hero-scroll, 0) * 1.16), 1);
  transform: translate3d(0, calc(var(--hero-scroll, 0) * -6svh), 0)
    scale(calc(1 - var(--hero-scroll, 0) * 0.045));
}
.scroll-effects .hero-copy,
.scroll-effects .hero-stage,
.scroll-effects .grass { will-change: transform, opacity; }
.scroll-effects .grass-far {
  animation: none;
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 14svh), -50px)
    scale(calc(1 + var(--hero-scroll, 0) * 0.24));
}
.scroll-effects .grass-mid {
  animation: none;
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 32svh), 20px)
    scale(calc(1 + var(--hero-scroll, 0) * 0.82));
}
.scroll-effects .grass-near {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 55svh), 80px)
    scale(calc(1 + var(--hero-scroll, 0) * 2.35))
    rotateX(calc(var(--hero-scroll, 0) * -5deg));
}
.scroll-effects .grass-close {
  opacity: var(--grass-close-alpha, 0);
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 58svh), 150px)
    scale(calc(0.92 + var(--hero-scroll, 0) * 3.3))
    rotateX(calc(var(--hero-scroll, 0) * -7deg));
}
.scroll-effects .page-body {
  clip-path: inset(var(--page-cover, 0%) 0 0 0 round clamp(22px, 3vw, 38px) clamp(22px, 3vw, 38px) 0 0);
}

@media (max-width: 1024px) {
  .hero-ensemble { inline-size: min(61%, 540px, 60svh); }
}
@media (max-width: 720px) {
  .hero-copy { padding-block-start: 22px; }
  .hero .stores { gap: 8px; }
  .hero .store { block-size: clamp(36px, 10.5vw, 44px); }
  .hero-stage { padding-inline: 8px; }
  .hero-ensemble { inline-size: min(66%, 390px); }
  .owl-left { left: -16%; inline-size: 24%; }
  .owl-right { right: -5%; bottom: 58%; inline-size: 17%; }
  .hero-ground {
    block-size: clamp(90px, 25vw, 132px);
    margin-block-start: clamp(-64px, -16vw, -42px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .owl-right { animation: none !important; }
}

/* Keep the close-up opaque at its lower edge so depth planes never reveal a
   white seam while they separate during the camera pass. */
.grass-close {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22% 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22% 100%);
}


/* The ground sits between the hero and page in the document, so only the
   blades can pass over the white section while the sky stays behind it. */
.hero-ground { z-index: 9; }
.scroll-effects .hero-ground { opacity: var(--ground-alpha, 1); }
.scroll-effects .grass-near {
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 43svh), 80px)
    scale(calc(1 + var(--hero-scroll, 0) * 2.35))
    rotateX(calc(var(--hero-scroll, 0) * -5deg));
}
.scroll-effects .grass-close {
  opacity: var(--grass-close-alpha, 0);
  transform: translate3d(0, calc(var(--hero-scroll, 0) * 46svh), 150px)
    scale(calc(0.92 + var(--hero-scroll, 0) * 3.3))
    rotateX(calc(var(--hero-scroll, 0) * -7deg));
}
.scroll-effects .page-body { clip-path: none; }


/* Static hero handoff: no scroll scaling, no camera-cover layer. */
.hero-ground {
  z-index: 4;
  overflow: hidden;
  opacity: 1 !important;
}
.hero-ground::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 5;
  block-size: 24%;
  background: linear-gradient(to bottom, transparent, var(--paper));
}
.grass {
  animation: none !important;
  transform: none !important;
  will-change: auto !important;
}
.grass-close { display: none; }
.page-body {
  z-index: 5;
  margin-block-start: -1px;
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  box-shadow: none;
}


/* Polished handoff: the white page cuts into the fixed grass as one surface. */
.hero-ground::after { block-size: 16%; }
.page-body {
  margin-block-start: -26px;
  border-start-start-radius: clamp(24px, 3vw, 34px);
  border-start-end-radius: clamp(24px, 3vw, 34px);
  box-shadow: 0 -14px 34px -26px rgb(14 20 19 / 42%);
}
.page-body::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  inline-size: 96px;
  block-size: 3px;
  translate: 50% 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgb(107 168 164 / 54%), transparent);
}
.page-body > .section:first-child {
  padding-block-start: clamp(56px, 7vw, 88px);
}

/* Order journey: a drawn RTL rail and three staggered, tactile steps. */
#how {
  overflow: clip;
  background:
    radial-gradient(circle at 50% 42%, rgb(107 168 164 / 10%), transparent 42%),
    linear-gradient(180deg, #fff, #f8fbfa 52%, #fff);
}
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-block-start: clamp(58px, 7vw, 82px);
  padding-block-start: 32px;
}
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  inset-block-start: 31px;
  inset-inline: 16.666%;
  z-index: 0;
  block-size: 2px;
  border-radius: 999px;
}
.steps::before { background: rgb(107 168 164 / 18%); }
.steps::after {
  background: linear-gradient(to left, var(--teal-dark), var(--teal), rgb(107 168 164 / 35%));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
.steps.in::after { transform: scaleX(1); }
.step-link { display: none; }

.steps .step {
  position: relative;
  z-index: 1;
  min-block-size: 218px;
  padding: 48px clamp(18px, 2.3vw, 28px) 28px;
  text-align: center;
  background: linear-gradient(150deg, #fff 0%, #fbfdfc 62%, #f2f8f6 100%);
  border: 1px solid rgb(107 168 164 / 16%);
  border-radius: 20px;
  box-shadow: 0 16px 38px -28px rgb(14 20 19 / 38%);
  opacity: 0;
  transform: translateY(26px) scale(0.97);
  transition:
    opacity 0.58s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.22s,
    box-shadow 0.22s;
}
.steps .step::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgb(107 168 164 / 8%), transparent 36%);
  pointer-events: none;
}
.steps.in .step { opacity: 1; transform: none; }
.steps.in .step:nth-of-type(1) { transition-delay: 0.14s; }
.steps.in .step:nth-of-type(2) { transition-delay: 0.34s; }
.steps.in .step:nth-of-type(3) { transition-delay: 0.54s; }
.steps.in .step:hover {
  transform: translateY(-6px);
  border-color: rgb(107 168 164 / 32%);
  box-shadow: 0 22px 44px -28px rgb(14 20 19 / 46%);
}

.steps .step-n {
  position: relative;
  z-index: 2;
  inline-size: 58px;
  block-size: 58px;
  margin: -77px auto 18px;
  color: #fff;
  background: linear-gradient(145deg, var(--teal), var(--teal-dark));
  border: 6px solid #fff;
  box-shadow: 0 8px 20px -10px rgb(74 139 135 / 70%);
  font-size: 1.1rem;
}
.steps .step-n::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgb(107 168 164 / 34%);
  border-radius: 50%;
  opacity: 0;
}
.steps.in .step-n::after { animation: step-ring 0.9s ease-out both; }
.steps.in .step:nth-of-type(2) .step-n::after { animation-delay: 0.2s; }
.steps.in .step:nth-of-type(3) .step-n::after { animation-delay: 0.4s; }
@keyframes step-ring {
  0% { opacity: 0.8; transform: scale(0.75); }
  100% { opacity: 0; transform: scale(1.5); }
}

.steps .step > * + * { margin-block-start: 0; }
.steps .step h3 {
  position: relative;
  margin-block-start: 4px;
  font-size: clamp(1.08rem, 0.98rem + 0.5vw, 1.28rem);
}
.steps .step p {
  position: relative;
  margin-block-start: 10px;
  color: var(--ink-3);
  line-height: 1.85;
}

@media (max-width: 720px) {
  .page-body { margin-block-start: -18px; }
  .page-body > .section:first-child { padding-block-start: 52px; }

  .steps {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-block-start: 48px;
    padding-block-start: 0;
  }
  .steps::before,
  .steps::after {
    inset-block: 28px;
    inset-inline: auto;
    inset-inline-start: 45px;
    inline-size: 2px;
    block-size: auto;
  }
  .steps::after {
    transform: scaleY(0);
    transform-origin: center top;
  }
  .steps.in::after { transform: scaleY(1); }

  .steps .step {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px 16px;
    min-block-size: 0;
    padding: 18px;
    text-align: start;
    border-radius: 18px;
    transform: translateY(20px) scale(0.985);
  }
  .steps .step-n {
    grid-row: 1 / span 2;
    inline-size: 54px;
    block-size: 54px;
    margin: 0;
    border-width: 5px;
  }
  .steps .step h3 {
    grid-column: 2;
    align-self: end;
    margin-block-start: 0;
  }
  .steps .step p {
    grid-column: 2;
    align-self: start;
    margin-block-start: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps::after { transform: none !important; transition: none; }
  .steps .step { opacity: 1; transform: none; transition: none; }
  .steps .step-n::after { animation: none !important; }
}

/* Author navigation styles must never override the native hidden contract. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Six 9:16 cards: four visible on desktop, two on tablet, one on mobile. */
.studio-showcase {
  overflow: clip;
  background:
    radial-gradient(circle at 10% 38%, rgb(217 164 65 / 8%), transparent 24%),
    radial-gradient(circle at 90% 62%, rgb(107 168 164 / 10%), transparent 28%),
    #fff;
}
.studio-carousel {
  --studio-gap: clamp(12px, 1.5vw, 18px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 18px 14px;
  margin-block-start: clamp(48px, 6vw, 72px);
  direction: rtl;
}
.studio-viewport {
  grid-column: 2;
  grid-row: 1;
  min-inline-size: 0;
  overflow: hidden;
  padding-block: 8px;
  border-radius: 20px;
  touch-action: pan-y;
  cursor: grab;
}
.studio-viewport:active { cursor: grabbing; }
.studio-track {
  display: flex;
  gap: var(--studio-gap);
  direction: rtl;
  transition: transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.studio-card {
  position: relative;
  flex: 0 0 calc(25% - 14px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(18px, 2vw, 24px) clamp(14px, 1.5vw, 19px);
  border: 1px solid rgb(14 20 19 / 7%);
  border-radius: clamp(16px, 2vw, 22px);
  background:
    linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(255 253 247 / 62%)),
    var(--teal-wash);
  box-shadow:
    0 1px 2px rgb(14 20 19 / 5%),
    0 18px 34px -25px rgb(14 20 19 / 34%);
}
.studio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.52;
  background:
    linear-gradient(118deg, transparent 16%, rgb(107 168 164 / 9%) 16.4% 16.8%, transparent 17.2% 64%, rgb(107 168 164 / 8%) 64.4% 64.8%, transparent 65.2%),
    radial-gradient(circle at 18% 74%, rgb(217 164 65 / 16%) 0 4px, transparent 5px),
    radial-gradient(circle at 82% 24%, rgb(107 168 164 / 18%) 0 5px, transparent 6px);
}
.studio-card:nth-child(even) {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(241 248 247 / 68%)),
    #fbfaf5;
}
.studio-card h3 {
  position: relative;
  z-index: 2;
  font-size: clamp(1rem, 1.25vw, 1.28rem);
  line-height: 1.28;
  text-align: center;
}
.studio-card h3 span {
  display: block;
  margin-block-start: 3px;
  color: var(--teal-dark);
  font-weight: 500;
}
.studio-card:nth-child(3n + 2) h3 span { color: #b48025; }

.studio-card-art {
  position: absolute;
  inset: 29% 10px 10px;
}
.studio-result-frame,
.studio-before-frame {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 74%);
  background:
    radial-gradient(circle at 62% 24%, rgb(255 255 255 / 96%), transparent 24%),
    linear-gradient(155deg, #dbeceb, #9fc8c4);
  box-shadow: 0 18px 30px -19px rgb(14 20 19 / 42%);
}
.studio-result-frame {
  inset-block: auto 2%;
  inset-inline: auto 4%;
  inline-size: 88%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  transform: rotate(-1.5deg);
}
.studio-before-frame {
  inset-inline-start: 0;
  inset-block-end: 9%;
  inline-size: 44%;
  aspect-ratio: 4 / 5;
  z-index: 2;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 35% 30%, rgb(255 255 255 / 86%), transparent 25%),
    linear-gradient(145deg, #eee8dc, #d8c8ae);
  transform: rotate(7deg);
}
.studio-card:nth-child(even) .studio-result-frame { transform: rotate(1.5deg); }
.studio-card:nth-child(3n) .studio-before-frame {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: rotate(-7deg);
}
.studio-frame-label {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-start: 10px;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 84%);
  color: var(--ink-2);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  backdrop-filter: blur(8px);
}
.studio-image-mark {
  position: relative;
  inline-size: clamp(44px, 5vw, 66px);
  block-size: clamp(38px, 4vw, 54px);
  border: 2px solid rgb(74 139 135 / 36%);
  border-radius: 10px;
}
.studio-image-mark::before {
  content: "";
  position: absolute;
  inset-block-start: 8px;
  inset-inline-end: 9px;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: rgb(217 164 65 / 72%);
}
.studio-image-mark::after {
  content: "";
  position: absolute;
  inset-inline: 7px;
  inset-block-end: 7px;
  block-size: 45%;
  background: rgb(74 139 135 / 30%);
  clip-path: polygon(0 100%, 32% 28%, 51% 62%, 70% 12%, 100% 100%);
}
.studio-before-frame .studio-image-mark {
  inline-size: 34px;
  block-size: 30px;
  border-color: rgb(14 20 19 / 20%);
}
.studio-sparkle {
  position: absolute;
  inset-block-start: 3%;
  inset-inline-end: 1%;
  z-index: 3;
  color: var(--gold);
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  filter: drop-shadow(0 4px 7px rgb(217 164 65 / 24%));
}

.studio-arrow {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid rgb(14 20 19 / 14%);
  border-radius: 50%;
  background: rgb(255 255 255 / 94%);
  box-shadow: var(--shadow-pill);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.studio-arrow:hover {
  transform: scale(1.06);
  border-color: rgb(74 139 135 / 42%);
  background: var(--teal-wash);
}
.studio-arrow:active { transform: scale(0.96); }
.studio-arrow svg {
  inline-size: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-prev { grid-column: 1; grid-row: 1; }
.studio-next { grid-column: 3; grid-row: 1; }

.studio-pagination {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-block-size: 24px;
}
.studio-dot {
  inline-size: 8px;
  block-size: 8px;
  padding: 0;
  border-radius: 999px;
  background: rgb(74 82 79 / 20%);
  transition: inline-size 0.28s ease, background 0.28s ease, transform 0.28s ease;
}
.studio-dot[aria-current="true"] {
  inline-size: 28px;
  background: var(--teal-dark);
}
.studio-dot:hover { transform: scale(1.18); }

.steps .step-n {
  inline-size: 82px;
  block-size: 82px;
  margin: -90px auto 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  box-shadow: none;
}
.steps .step-n img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 10px rgb(122 89 27 / 18%));
}
.steps .step-n::after { display: none; }

@media (max-width: 1024px) {
  .studio-carousel { grid-template-columns: 46px minmax(0, 1fr) 46px; }
  .studio-card { flex-basis: calc(50% - 7px); }
}
@media (max-width: 720px) {
  .studio-showcase .wrap { padding-inline: clamp(16px, 5vw, 24px); }
  .studio-carousel {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 10px 8px;
    margin-block-start: 40px;
  }
  .studio-viewport {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-inline: calc(var(--gutter) * -0.15);
    border-radius: 16px;
  }
  .studio-card {
    flex-basis: min(80vw, 286px);
    min-inline-size: 0;
    padding: 20px 16px;
    border-radius: 18px;
  }
  .studio-card h3 { font-size: 1.08rem; }
  .studio-prev { grid-column: 1; grid-row: 2; }
  .studio-next { grid-column: 3; grid-row: 2; }
  .studio-pagination { grid-column: 2; grid-row: 2; }
  .studio-arrow { inline-size: 40px; block-size: 40px; }

  .steps::before,
  .steps::after { inset-inline-start: 52px; }
  .steps .step { grid-template-columns: 68px minmax(0, 1fr); }
  .steps .step-n {
    inline-size: 68px;
    block-size: 68px;
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .studio-track,
  .studio-dot,
  .studio-arrow { transition: none; }
}
.studio-result-frame img,
.studio-before-frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.studio-result-frame.studio-single-frame {
  inset-inline: 6%;
  inline-size: auto;
  transform: none !important;
}

.studio-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    linear-gradient(45deg, transparent 47.5%, rgb(107 168 164 / 11%) 48% 49%, transparent 49.5%) 0 0 / 34px 34px,
    linear-gradient(-45deg, transparent 47.5%, rgb(217 164 65 / 10%) 48% 49%, transparent 49.5%) 0 0 / 34px 34px,
    radial-gradient(circle at 50% 50%, transparent 0 8px, rgb(74 139 135 / 9%) 8.5px 9.5px, transparent 10px) 0 0 / 34px 34px,
    linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 72%) 72%, rgb(255 255 255 / 92%));
  -webkit-mask-image: linear-gradient(to bottom, #000 0 60%, transparent 98%);
  mask-image: linear-gradient(to bottom, #000 0 60%, transparent 98%);
}
.studio-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgb(217 164 65 / 16%);
  border-radius: calc(clamp(16px, 2vw, 22px) - 6px);
  box-shadow: inset 0 0 0 1px rgb(107 168 164 / 5%);
}

@media (max-width: 720px) {
  .doodles img {
    inline-size: 64px;
    padding: 7px;
    opacity: 0.13;
    border-radius: 18px;
  }
  .doodles img:nth-child(n + 3) { display: none; }
  .studio-doodles img { inline-size: 68px; opacity: 0.15; }
}

/* Hero refresh: expressive brand title and a stronger product focal point */
.hero-headline .display {
  max-inline-size: 20ch;
}

.hero-title-gradient {
  display: inline;
  color: transparent;
  background-image: linear-gradient(
    104deg,
    #071412 0%,
    #071412 28%,
    var(--teal-dark) 47%,
    #163c39 57%,
    #071412 76%,
    #071412 100%
  );
  background-size: 220% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-title-ramp 7s ease-in-out infinite alternate;
}

.hero-brand-word {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding-block-end: 0.08em;
}

.hero-brand-stroke {
  position: absolute;
  inset-inline-start: -8%;
  inset-block-end: -0.18em;
  inline-size: 116%;
  block-size: 0.42em;
  max-inline-size: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgb(224 134 42 / 18%));
}

.hero-brand-stroke path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation:
    hero-line-draw 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards,
    hero-line-glow 4.8s ease-in-out 1.8s infinite;
}

@keyframes hero-title-ramp {
  to { background-position: 0% 50%; }
}

@keyframes hero-line-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes hero-line-glow {
  0%, 100% { opacity: 0.92; }
  50% { opacity: 1; filter: drop-shadow(0 2px 3px rgb(224 134 42 / 34%)); }
}

.hero .stores {
  margin-block-start: 20px;
  gap: clamp(7px, 1vw, 10px);
}

.hero .store {
  block-size: clamp(31px, 3.25vw, 39px);
}

.hero-stage {
  margin-block-start: clamp(18px, 2.4vw, 30px);
}

.hero-ensemble {
  inline-size: min(70%, 720px, 74svh);
}

@media (max-width: 1024px) {
  .hero-ensemble { inline-size: min(72%, 640px, 72svh); }
}

@media (max-width: 720px) {
  .hero-headline .display { max-inline-size: 17ch; }
  .hero .stores { margin-block-start: 18px; gap: 7px; }
  .hero .store { block-size: clamp(29px, 8.5vw, 34px); }
  .hero-stage { margin-block-start: 18px; }
  .hero-ensemble { inline-size: min(82%, 440px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title-gradient,
  .hero-brand-stroke path { animation: none !important; }
  .hero-title-gradient { background-position: 50% 50%; }
  .hero-brand-stroke path { stroke-dashoffset: 0; }
}

/* Desktop: keep the header badges only and give the product more visual weight. */
@media (min-width: 721px) {
  .hero-copy > .stores { display: none; }
  .hero-stage { margin-block-start: clamp(10px, 1.2vw, 16px); }
  .hero-ensemble { inline-size: min(78%, 820px, 84svh); }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .hero-ensemble { inline-size: min(78%, 700px, 80svh); }
}


/* Unified frosted-glass navigation */
.header {
  position: relative;
  isolation: isolate;
  inline-size: min(100%, 780px);
  min-block-size: 72px;
  margin-inline: auto;
  margin-block-start: 16px;
  padding: 9px 11px;
  gap: 10px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    rgb(255 255 255 / 56%),
    rgb(224 242 244 / 38%)
  );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 78%),
    inset 0 -1px 0 rgb(107 168 164 / 10%),
    0 16px 38px -24px rgb(14 20 19 / 38%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}

.header::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(
    112deg,
    rgb(255 255 255 / 34%) 0%,
    transparent 32%,
    transparent 64%,
    rgb(255 255 255 / 18%) 100%
  );
  pointer-events: none;
}

.header > * {
  position: relative;
  z-index: 1;
}

.header .brand {
  min-block-size: 50px;
  padding-inline: 9px;
  gap: 8px;
}

.header .brand img { inline-size: 34px; }
.header .brand span { font-size: 1.14rem; }

.header .nav-pill {
  margin-inline: auto;
  padding: 0;
  gap: 2px;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header .nav-pill a {
  padding: 10px 14px;
  color: var(--ink);
  font-weight: 700;
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.header .nav-pill a:hover {
  color: var(--teal-dark);
  background: rgb(255 255 255 / 42%);
  transform: translateY(-1px);
}

.header-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: none;
  min-block-size: 52px;
  padding-inline: 22px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #182536, #0d1828);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 14%),
    0 10px 22px -14px rgb(13 24 40 / 82%);
  font-size: 0.96rem;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.header-download svg {
  inline-size: 18px;
  flex: none;
}

.header-download:hover {
  transform: translateY(-2px);
  background: linear-gradient(145deg, #22344a, #111e31);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 16%),
    0 14px 26px -14px rgb(13 24 40 / 92%);
}

@media (max-width: 720px) {
  .header {
    inline-size: 100%;
    min-block-size: 60px;
    margin-block-start: 12px;
    padding: 7px 9px;
    border-color: rgb(255 255 255 / 66%);
    background: linear-gradient(
      135deg,
      rgb(255 255 255 / 58%),
      rgb(224 242 244 / 40%)
    );
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 74%),
      0 12px 28px -22px rgb(14 20 19 / 42%);
  }

  .header .brand {
    min-block-size: 44px;
    padding-inline: 7px;
  }

  .header .brand img { inline-size: 33px; }
  .header .brand span { font-size: 1.08rem; }

  .header .nav-pill,
  .header-download { display: none; }

  .header .menu-toggle {
    min-block-size: 44px;
    margin-inline-start: auto;
    padding: 9px 14px;
    border-color: rgb(255 255 255 / 62%);
    background: rgb(255 255 255 / 48%);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .nav-pill a,
  .header-download { transition: none; }
}


/* Glass depth pass: refraction, specular highlights and a luminous edge. */
.header {
  overflow: clip;
  border-color: rgb(255 255 255 / 90%);
  background:
    radial-gradient(120% 180% at 2% -80%, rgb(255 255 255 / 88%) 0 28%, transparent 54%),
    radial-gradient(110% 160% at 102% 170%, rgb(107 168 164 / 24%) 0, transparent 58%),
    linear-gradient(
      112deg,
      rgb(255 255 255 / 62%) 0%,
      rgb(230 245 247 / 36%) 44%,
      rgb(255 255 255 / 52%) 100%
    );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 100%),
    inset 0 -1px 0 rgb(74 139 135 / 18%),
    inset 18px 0 32px -30px rgb(255 255 255 / 92%),
    inset -18px 0 32px -30px rgb(74 139 135 / 36%),
    0 2px 5px rgb(14 20 19 / 8%),
    0 20px 46px -26px rgb(14 20 19 / 42%);
  -webkit-backdrop-filter: blur(30px) saturate(175%) contrast(108%) brightness(1.06);
  backdrop-filter: blur(30px) saturate(175%) contrast(108%) brightness(1.06);
}

.header::before {
  inset: 1px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 54%) 0%, transparent 42%),
    linear-gradient(118deg, rgb(255 255 255 / 48%) 0%, transparent 24% 72%, rgb(255 255 255 / 20%) 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 72%),
    inset 0 -10px 22px -22px rgb(74 139 135 / 50%);
  opacity: 0.78;
}

.header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70px 18px at 9% 18%, rgb(255 255 255 / 42%), transparent 72%),
    radial-gradient(ellipse 110px 22px at 42% 4%, rgb(255 255 255 / 30%), transparent 74%),
    radial-gradient(ellipse 90px 20px at 82% 12%, rgb(255 255 255 / 28%), transparent 72%),
    repeating-linear-gradient(
      112deg,
      rgb(255 255 255 / 9%) 0 1px,
      transparent 1px 9px
    );
  opacity: 0.62;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 72%) 48%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 72%) 48%, transparent 100%);
}

@media (max-width: 720px) {
  .header {
    border-color: rgb(255 255 255 / 88%);
    background:
      radial-gradient(140% 190% at 0% -80%, rgb(255 255 255 / 84%) 0 30%, transparent 56%),
      linear-gradient(118deg, rgb(255 255 255 / 62%), rgb(225 243 245 / 40%) 58%, rgb(255 255 255 / 50%));
    box-shadow:
      inset 0 1px 0 #fff,
      inset 0 -1px 0 rgb(74 139 135 / 16%),
      0 2px 5px rgb(14 20 19 / 7%),
      0 16px 34px -24px rgb(14 20 19 / 42%);
    -webkit-backdrop-filter: blur(24px) saturate(170%) contrast(106%) brightness(1.06);
    backdrop-filter: blur(24px) saturate(170%) contrast(106%) brightness(1.06);
  }
}

/* Seat the standing owl into the grass instead of leaving it visually afloat. */
.owl-left {
  bottom: clamp(2px, 1.2%, 9px);
}

/* ── partner invitation band ─────────────────────────────────────────── */
.partner-band {
  min-block-size: clamp(430px, 48vw, 610px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  padding-block: clamp(64px, 8vw, 112px);
}
.partner-band .band-partner-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.partner-band .band-gift,
.partner-band .band-money {
  position: absolute;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgb(14 20 19 / 18%));
  will-change: transform;
}
.partner-band .band-gift {
  inline-size: clamp(100px, 14vw, 196px);
  inset-block-start: 7%;
  inset-inline-start: 4%;
  transform: rotate(-10deg);
  animation: partner-gift-float 6s ease-in-out infinite;
}
.partner-band .band-money {
  inline-size: clamp(120px, 17vw, 238px);
  inset-block-end: 2%;
  inset-inline-end: 4%;
  transform: rotate(8deg);
  animation: partner-money-float 7s ease-in-out -1.2s infinite;
}
.partner-band .partner-eyebrow,
.partner-band h2,
.partner-band .lede,
.partner-band .partner-points,
.partner-band .partner-cta {
  position: relative;
  z-index: 2;
}
.partner-band .partner-eyebrow {
  margin-block-end: 12px;
  color: var(--teal-dark);
  font-weight: 800;
}
.partner-band h2 {
  max-inline-size: 18ch;
  text-wrap: balance;
}
.partner-band .lede {
  max-inline-size: 58ch;
  line-height: 1.95;
}
.partner-band .partner-points {
  max-inline-size: 54rem;
  margin-block-start: 30px;
}
.partner-band .partner-points li {
  color: var(--ink);
  background: rgb(255 255 255 / 86%);
  border-color: rgb(255 255 255 / 92%);
  box-shadow: 0 7px 20px rgb(14 20 19 / 7%);
}
.partner-band .partner-points li::before {
  content: "✦";
  margin-inline-end: 7px;
  color: var(--orange);
}
.partner-band .partner-cta {
  margin-block-start: 34px;
  background: var(--orange);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 50%);
  box-shadow: 0 8px 18px rgb(224 134 42 / 24%), 0 16px 32px -14px rgb(14 20 19 / 30%);
}
.partner-band .partner-cta:hover {
  background: #c96e1f;
  transform: translateY(-3px);
}
.partner-band .partner-cta span {
  display: inline-block;
  margin-inline-start: 7px;
  transition: transform 0.2s ease;
}
.partner-band .partner-cta:hover span {
  transform: translateX(-4px);
}
@keyframes partner-gift-float {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-8px); }
}
@keyframes partner-money-float {
  0%, 100% { transform: rotate(8deg) translateY(0); }
  50% { transform: rotate(5deg) translateY(-10px); }
}
@media (max-width: 720px) {
  .partner-band {
    min-block-size: 540px;
    padding-inline: 20px;
  }
  .partner-band .band-gift {
    inline-size: 104px;
    inset-block-start: 4%;
    inset-inline-start: -3%;
    opacity: 0.86;
  }
  .partner-band .band-money {
    inline-size: 126px;
    inset-block-end: 1%;
    inset-inline-end: -5%;
    opacity: 0.84;
  }
  .partner-band h2 {
    max-inline-size: 14ch;
  }
  .partner-band .lede {
    max-inline-size: 34ch;
  }
  .partner-band .partner-points {
    gap: 8px;
    max-inline-size: 23rem;
  }
  .partner-band .partner-points li {
    padding: 8px 13px;
    font-size: 0.84rem;
  }
  .partner-band .partner-cta {
    margin-block-start: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .partner-band .band-gift,
  .partner-band .band-money {
    animation: none;
  }
}
/* Keep the CTA clear of the reward owl and use hand-drawn proof marks. */
.partner-band .partner-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.partner-band .partner-points li::before {
  content: "";
  inline-size: 22px;
  block-size: 20px;
  flex: 0 0 22px;
  margin-inline-end: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2024'%3E%3Cpath%20d%3D'M3%2012.8c2.1%201.2%204.4%203.7%206.1%206%204.5-7.8%208.5-12.3%2015.7-16.3'%20fill%3D'none'%20stroke%3D'%23e0862a'%20stroke-width%3D'3.1'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%2F%3E%3Cpath%20d%3D'M4.2%2011.1c1.7%201.3%203.2%203%204.5%204.7'%20fill%3D'none'%20stroke%3D'%23e0862a'%20stroke-width%3D'1.2'%20stroke-linecap%3D'round'%20opacity%3D'.5'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transform: rotate(-4deg);
}
@media (max-width: 720px) {
  .partner-band {
    min-block-size: 660px;
    align-content: start;
    padding-block: 58px 30px;
  }
  .partner-band .band-money {
    inline-size: 118px;
    inset-block-end: 2%;
    inset-inline-end: -7%;
    opacity: 0.9;
  }
  .partner-band .partner-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: min(100%, 23rem);
  }
  .partner-band .partner-points li {
    justify-content: center;
    gap: 6px;
    padding-inline: 8px;
    font-size: 0.78rem;
    white-space: nowrap;
  }
  .partner-band .partner-points li::before {
    inline-size: 18px;
    block-size: 18px;
    flex-basis: 18px;
  }
  .partner-band .partner-cta {
    justify-self: start;
    margin-block-start: 26px;
    margin-inline-start: 20px;
  }
}
/* Mobile hero placement and the refined glass partner CTA. */
.partner-band .band-gift-secondary {
  position: absolute;
  z-index: 0;
  inline-size: clamp(96px, 13vw, 178px);
  inset-block-end: 3%;
  inset-inline-end: 4%;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgb(14 20 19 / 16%));
  transform: rotate(10deg);
  animation: partner-money-float 7s ease-in-out -1.2s infinite;
}
.partner-band .partner-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  inline-size: min(100%, 330px);
  min-block-size: 58px;
  padding: 8px 18px;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 82%), transparent 38%),
    linear-gradient(118deg, rgb(255 255 255 / 68%), rgb(225 243 245 / 44%) 58%, rgb(255 255 255 / 56%));
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(74 139 135 / 16%),
    0 14px 30px -18px rgb(14 20 19 / 42%);
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
}
.partner-band .partner-cta:hover {
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 92%), transparent 40%),
    linear-gradient(118deg, rgb(255 255 255 / 76%), rgb(213 240 241 / 54%) 58%, rgb(255 255 255 / 66%));
  color: var(--ink);
  transform: translateY(-2px);
}
.partner-band .partner-cta span {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  margin-inline-start: 0;
  border: 1px solid rgb(255 255 255 / 88%);
  border-radius: 50%;
  background: rgb(255 255 255 / 66%);
  color: var(--teal-dark);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgb(14 20 19 / 9%);
}
@media (max-width: 720px) {
  .hero-stage .owl-left {
    left: 3%;
    inline-size: 25%;
  }
  .partner-band {
    min-block-size: 620px;
  }
  .partner-band .band-gift-secondary {
    inline-size: 92px;
    inset-block-end: 2%;
    inset-inline-end: 2%;
    opacity: 0.9;
  }
  .partner-band .partner-cta {
    justify-self: center;
    inline-size: min(100%, 305px);
    margin-block-start: 26px;
    margin-inline-start: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .partner-band .band-gift-secondary {
    animation: none;
  }
}
/* Partner card hierarchy: more air, stronger copy contrast, quieter ornaments. */
.partner-band .band-partner-art::before {
  content: "";
  position: absolute;
  inset: 11% 8% 22%;
  border-radius: 44%;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / 72%) 0 38%, rgb(255 255 255 / 38%) 58%, transparent 78%);
  filter: blur(12px);
}
.partner-band .partner-eyebrow {
  margin-block-end: 18px;
  padding: 7px 13px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: rgb(47 118 113 / 84%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 18px -12px rgb(14 20 19 / 45%);
}
.partner-band .partner-eyebrow::before {
  background: #f4b15d;
}
.partner-band h2 {
  color: #102e2b;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  line-height: 1.34;
  text-shadow: 0 1px 0 rgb(255 255 255 / 70%);
}
.partner-band .lede {
  max-inline-size: 50ch;
  margin-block-start: 24px;
  color: #29423f;
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 600;
  line-height: 2;
  text-shadow: 0 1px 0 rgb(255 255 255 / 75%);
}
.partner-band .partner-points {
  margin-block-start: 38px;
}
.partner-band .partner-points li {
  border-color: rgb(74 139 135 / 16%);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 10px 24px -18px rgb(14 20 19 / 42%);
}
.partner-band .partner-cta {
  margin-block-start: 38px;
  border-color: rgb(255 255 255 / 78%);
  background:
    radial-gradient(circle at 18% 0%, rgb(255 255 255 / 72%), transparent 40%),
    linear-gradient(118deg, rgb(78 151 146 / 38%), rgb(229 246 247 / 64%) 56%, rgb(255 255 255 / 62%));
  color: #12312f;
  font-weight: 850;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 88%),
    inset 0 -1px 0 rgb(47 118 113 / 20%),
    0 18px 34px -22px rgb(14 20 19 / 55%);
}
.partner-band .partner-cta span {
  background: rgb(255 255 255 / 82%);
  color: #2f7671;
}
@media (max-width: 720px) {
  .partner-band {
    min-block-size: 680px;
    padding-block: 68px 36px;
  }
  .partner-band .band-gift {
    inline-size: 82px;
    inset-block-start: 2%;
    inset-inline-start: -1%;
    opacity: 0.84;
  }
  .partner-band .band-gift-secondary {
    inline-size: 74px;
    inset-block-end: 2.5%;
    inset-inline-end: 1%;
    opacity: 0.78;
  }
  .partner-band .partner-eyebrow {
    margin-block-end: 16px;
    padding: 6px 11px;
    font-size: 0.76rem;
  }
  .partner-band h2 {
    max-inline-size: 13ch;
    font-size: 1.82rem;
    line-height: 1.4;
  }
  .partner-band .lede {
    max-inline-size: 30ch;
    margin-block-start: 22px;
    font-size: 0.94rem;
    line-height: 2.05;
  }
  .partner-band .partner-points {
    margin-block-start: 34px;
  }
  .partner-band .partner-cta {
    margin-block-start: 34px;
  }
}