/* ─────────────────────────────────────────────────────────────────────────
   Cycle (چرخه) landing — token source of truth: mobile/src/theme/colors.ts
   Owner (light) palette + HAMDEL companion palette. Do not invent new hues.
   ───────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "YekanBakhVF";
  src: url("assets/fonts/YekanBakh-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* owner — light (colors.ts) */
  --bg: #FFF8FC;
  --surface: #FFFFFF;
  --surface-muted: #F8EEF4;
  --primary: #F45B93;
  --primary-dark: #E0457E;
  --on-primary: #FFFFFF;
  --primary-container: #FCE8F1;
  --selection-border: #F5D0E0;
  --fertile: #8C6BFF;
  --mint: #27C6C1;
  --mint-light: #E5F8F7;
  --ovulation: #FDBE4A;
  --ink: #1A121F;
  --ink-soft: #5C5168;
  /* app token is #8E8499; darkened one step on the landing so small text passes AA */
  --ink-faint: #786D84;
  --line: #F0E4EC;
  --chip-bg: #FFF5FA;
  --glass: rgba(255, 255, 255, 0.62);

  /* Hamdel — cornflower + lavender (colors.ts HAMDEL). Residual pink for relationship only. */
  --hd-primary: #5B7FF2;
  --hd-deep: #25233A;
  --hd-pale: #F8FAFF;
  --hd-pale-end: #FAF8FF;
  --hd-soft: #EAF0FF;
  --hd-lavender: #F1EEFF;
  --hd-sky: #8875E8;
  --hd-secondary: #8875E8;
  --hd-line: #E8E9F4;
  --hd-ink-soft: #6F6C7D;
  --hd-muted: #A19EAE;
  --hd-warm: #F15A91;
  --hd-gradient-start: #6D82F5;
  --hd-gradient-end: #4A6BE0;
  --hd-success: #52C7A2;
  --hd-warning: #F5B84B;
  --hd-error: #EF6A7A;
  --hd-active-line: #BFCBFF;

  /* geometry (radius.ts) */
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-3xl: 30px;

  /* motion (motion.ts) */
  --t-fast: 120ms;
  --t-normal: 200ms;
  --t-slow: 320ms;
  --t-theme: 520ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* elevation (elevation.ts, tinted like the app) */
  --shadow-card: 0 12px 28px rgba(244, 91, 147, 0.12), 0 2px 8px rgba(26, 18, 31, 0.05);
  --shadow-cta: 0 8px 18px rgba(244, 91, 147, 0.30);
  --shadow-card-hd: 0 12px 28px rgba(91, 127, 242, 0.14), 0 2px 8px rgba(20, 28, 43, 0.05);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "YekanBakhVF", "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, ol { margin: 0; }

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

::selection { background: var(--primary-container); }
body.in-hamdel ::selection { background: var(--hd-soft); }

:focus-visible {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -60px;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--line);
  transition: top var(--t-normal) var(--ease);
}
.skip-link:focus { top: 12px; }

.container {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 24px;
}

section { padding-block: 96px; }
section[id] { scroll-margin-top: 84px; }

/* ── type ────────────────────────────────────────────────────────────── */
h1 {
  position: relative;
  font-size: clamp(2.05rem, 4vw + 0.6rem, 3.3rem);
  line-height: 1.42;
  font-weight: 900;
  letter-spacing: 0;
}
h1 em {
  font-style: normal;
  color: var(--primary);
}
/* brand petal mark floating past the headline's start, raised above the cap
   line (measured from the hero design). The max() guard keeps it from
   clipping on narrow desktop viewports where the container has no slack. */
.h1-bloom {
  position: absolute;
  width: 0.7em;
  height: auto;
  top: -0.38em;
  inset-inline-start: max(-1.64em, calc(-20px - max(0px, (100vw - 1160px) / 2)));
  transform: translateX(-100%);
  opacity: 0.9;
  pointer-events: none;
}

h2 {
  font-size: clamp(1.55rem, 2.4vw + 0.5rem, 2.3rem);
  line-height: 1.5;
  font-weight: 800;
}

.section-sub {
  color: var(--ink-soft);
  max-width: 620px;
  margin-top: 14px;
  font-size: 1.06rem;
}

/* ── reveal motion ───────────────────────────────────────────────────── */
html.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
html.js .flow .reveal:nth-child(2) { transition-delay: 100ms; }
html.js .flow .reveal:nth-child(3) { transition-delay: 200ms; }
/* ── buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--r-lg);
  padding: 15px 28px;
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.4;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform var(--t-fast) ease, box-shadow var(--t-normal) ease,
              background var(--t-theme) var(--ease), color var(--t-theme) var(--ease);
}
.btn:active { transform: scale(0.985); }

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-cta);
}
.btn-primary:hover { background: var(--primary-dark); }

.btn-outline {
  border: 1.5px solid var(--selection-border);
  color: var(--primary-dark);
  background: rgba(255, 255, 255, 0.65);
}
.btn-outline:hover { background: var(--primary-container); }

.btn-hamdel {
  background: var(--hd-primary);
  color: #fff;
  box-shadow: 0 8px 18px rgba(91, 127, 242, 0.30);
}
.btn-hamdel:hover { background: #4a6de0; }

.btn-sm { padding: 10px 20px; font-size: 0.95rem; border-radius: 13px; }
.btn-lg { padding: 18px 42px; font-size: 1.14rem; }

/* ── nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(240, 228, 236, 0.65);
  transition: box-shadow var(--t-normal) ease, background var(--t-theme) var(--ease);
}
.nav.scrolled { box-shadow: 0 6px 24px rgba(26, 18, 31, 0.06); }
body.in-hamdel .nav {
  background: rgba(245, 247, 255, 0.66);
  border-bottom-color: rgba(221, 229, 240, 0.7);
}
body.in-hamdel .nav .btn-primary {
  background: var(--hd-primary);
  box-shadow: 0 8px 18px rgba(91, 127, 242, 0.30);
}

.nav-inner {
  max-width: 1160px;
  margin-inline: auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-brand img { width: 74px; height: auto; }
.nav-links {
  display: flex;
  gap: 26px;
  margin-inline-start: 8px;
  margin-inline-end: auto;
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 600;
  transition: color var(--t-normal) ease;
}
.nav-links a:hover { color: var(--primary-dark); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: 148px;
  padding-bottom: 92px;
  overflow: hidden;
}
/* ambient: blobs + dot grid, like AppAmbientBackground (subtle) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(620px 480px at 16% 22%, rgba(244, 91, 147, 0.11), transparent 68%),
    radial-gradient(520px 460px at 88% 24%, rgba(140, 107, 255, 0.07), transparent 70%),
    radial-gradient(460px 380px at 86% 92%, rgba(91, 127, 242, 0.055), transparent 70%),
    radial-gradient(620px 460px at 40% 108%, rgba(39, 198, 193, 0.06), transparent 72%);
  /* dissolve toward the next section so the boundary never shows */
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 220px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 220px), transparent 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 40% 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(26, 18, 31, 0.055) 1px, transparent 1.3px);
  background-size: 30px 30px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}

/* editorial grid: copy + actions share the right column, the ring owns the
   left column across both rows, trust strip closes the composition */
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  grid-template-areas:
    "copy visual"
    "actions visual"
    "trust trust";
  column-gap: 36px;
  align-items: center;
}
.hero-copy { grid-area: copy; align-self: end; }
.hero-visual { grid-area: visual; min-width: 0; }
.hero-actions { grid-area: actions; align-self: start; margin-top: 30px; }

/* ── mode badge: چرخه من ⇄ همدل ─────────────────────────────────────── */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 6px;
  margin-bottom: 26px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(26, 18, 31, 0.05);
  transition: transform var(--t-fast) ease, box-shadow var(--t-normal) ease;
}
.mode-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26, 18, 31, 0.09); }
.mb-seg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.84rem;
  font-weight: 800;
  transition: background var(--t-normal) ease, color var(--t-normal) ease;
}
.mb-cycle { background: var(--primary-container); color: var(--primary-dark); }
.mb-hamdel { background: var(--hd-soft); color: var(--hd-deep); }
.mode-badge:hover .mb-hamdel { background: var(--hd-primary); color: #fff; }
.mb-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.mb-cycle .mb-dot { background: var(--primary); }
.mb-hamdel .mb-dot { background: var(--hd-primary); }
.mode-badge:hover .mb-hamdel .mb-dot { background: #fff; }
.mb-swap { width: 17px; height: 17px; color: var(--ink-faint); flex: none; }

.hero-sub {
  color: var(--ink-soft);
  font-size: 1.13rem;
  line-height: 2;
  max-width: 470px;
  margin-top: 18px;
}

.hero-ctas {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}
.cta-stack { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.cta-micro { font-size: 0.7rem; color: var(--ink-soft); font-weight: 700; opacity: 0.7; }

.btn-ghost-hd {
  border: 1.5px solid var(--hd-line);
  color: var(--hd-deep);
  background: rgba(255, 255, 255, 0.6);
  padding: 13px 22px;
  font-size: 1rem;
}
.btn-ghost-hd:hover { background: var(--hd-soft); border-color: var(--hd-sky); }
.btn-ghost-hd svg { width: 19px; height: 19px; flex: none; }

/* ── hero trust hint: three micro-signals, one very slim strip ───────── */
.hero-trust {
  grid-area: trust;
  list-style: none;
  margin: 60px 0 0;
  padding: 12px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: 0 2px 14px rgba(26, 18, 31, 0.04);
}
.hero-trust li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.hero-trust li + li { border-inline-start: 1px solid var(--line); }
.ht-ic {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 48%, #000 36%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 48%, #000 36%, transparent 100%);
}
.ht-ic img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.hero-trust strong { display: block; font-size: 0.85rem; font-weight: 800; line-height: 1.55; }
.hero-trust span:not(.ht-ic) { display: block; font-size: 0.72rem; color: var(--ink-soft); font-weight: 600; line-height: 1.65; }

/* ── the ring ────────────────────────────────────────────────────────── */
.hero-ring {
  position: relative;
  width: min(86vw, 478px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  /* reserves room for the next-period chip that now sits below the ring */
  margin-bottom: 28px;
}
.ring-petals {
  position: absolute;
  width: 128%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.95;
  pointer-events: none;
}
@keyframes petal-drift {
  from { transform: translate(-50%, -50.7%); }
  to { transform: translate(-50%, -49.3%); }
}
html.js .hero-ring.ring-done .ring-petals {
  animation: petal-drift 11s ease-in-out infinite alternate;
}
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

@keyframes sun-breathe {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.46; }
}
html.js .hero-ring.ring-done .ov-sun circle:first-child {
  animation: sun-breathe 3.8s ease-in-out infinite;
}

.ring-center {
  position: absolute;
  inset: 21%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
/* app parity: follicular lotus art — PhaseRing shows it at full opacity */
.ring-lotus { width: 52%; height: auto; margin-bottom: 6px; }
.ring-day { font-size: 1.5rem; font-weight: 800; line-height: 1.5; }
.ring-phase { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); margin-top: 2px; }

/* phase labels around the ring */
.ring-label {
  position: absolute;
  white-space: nowrap;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}
/* each label sits at the angular midpoint of its own window, hugging the ring */
.rl-period { left: 71.2%; top: 5.9%; transform: translate(-50%, -50%); color: var(--primary-dark); }
.rl-fertile { left: 80.5%; top: 88.2%; transform: translate(-50%, -50%); color: #1d8f8b; }
.rl-ov { left: 55.4%; top: 98.6%; transform: translate(-50%, -50%); color: #b07716; }
.rl-pms { left: 19.5%; top: 11.8%; transform: translate(-50%, -50%); color: #6a53c4; }

/* day numbers at the ring edge — app-exact: labelDays at LABEL_R, faint & small */
.ring-num {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1;
}
.rn-1 { left: 50%; top: 5.1%; }
.rn-5 { left: 85.1%; top: 22%; }
.rn-10 { left: 90.4%; top: 69.5%; }
.rn-16 { left: 40%; top: 93.7%; }
.rn-24 { left: 9.6%; top: 30.5%; }
.rn-28 { left: 40%; top: 6.3%; }

.ring-today {
  position: absolute;
  /* day ۷ at TODAY_BADGE_R (app formula: R + pipe/2 + 22) */
  left: 95.6%;
  top: 39.6%;
  transform: translate(-50%, -50%);
  /* day ۷ is between windows → app shows the soft neutral badge (#E8E4EA, ink) */
  background: #E8E4EA;
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 5px 13px;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 3px 10px rgba(26, 18, 31, 0.14);
  overflow: hidden;
}
.ring-today::before {
  content: "";
  position: absolute;
  inset: 0 0 42% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08), transparent);
}
.ring-today span { display: block; font-size: 0.62rem; font-weight: 700; position: relative; }
.ring-today strong { display: block; font-size: 0.8rem; font-weight: 800; position: relative; }

.ring-chip {
  position: absolute;
  left: -8%;
  /* below the drawn circle, but tucked into the ring box's own bottom air */
  top: calc(100% - 80px);
  max-width: 56%;
  background: var(--surface);
  border: 1px solid rgba(244, 91, 147, 0.18);
  border-radius: var(--r-lg);
  padding: 11px 15px;
  box-shadow: 0 12px 28px rgba(26, 18, 31, 0.12), 0 2px 6px rgba(26, 18, 31, 0.05);
  line-height: 1.5;
}
.ring-chip-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
  text-align: right;
}
.ring-chip-bloom {
  width: 24px;
  height: 24px;
  flex: none;
  object-fit: contain;
}
.ring-chip-eta {
  color: var(--primary);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: right;
}
.ring-chip-date {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  direction: ltr;
  color: var(--ink-faint);
  font-size: 0.7rem;
  font-weight: 600;
}
.ring-chip-cal {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--ink-faint);
}

.bloom-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-container);
  display: inline-block;
  flex: none;
}

html.js .ring-today,
html.js .ring-chip {
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
html.js .hero-ring.ring-done .ring-today,
html.js .hero-ring.ring-done .ring-chip { opacity: 1; }
html.js .ov-sun { opacity: 0; transition: opacity 0.6s var(--ease); }
html.js .hero-ring.ring-done .ov-sun { opacity: 1; }

/* phase labels appear after the ring resolves, in cycle order */
html.js .ring-label, html.js .ring-num { opacity: 0; transition: opacity 0.5s var(--ease); }
html.js .hero-ring.ring-done .ring-label,
html.js .hero-ring.ring-done .ring-num { opacity: 1; }
html.js .hero-ring.ring-done .rl-fertile { transition-delay: 0.14s; }
html.js .hero-ring.ring-done .rl-ov { transition-delay: 0.26s; }
html.js .hero-ring.ring-done .rl-pms { transition-delay: 0.38s; }

/* hero entrance rhythm: copy → visual → actions → trust */
html.js .hero-visual.reveal { transition-delay: 90ms; }
html.js .hero-actions.reveal { transition-delay: 160ms; }
html.js .hero-trust.reveal { transition-delay: 240ms; }

/* ── یک تجربه، دو نگاه ───────────────────────────────────────────────── */
.duo {
  position: relative;
  padding: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1024 / 576;
  container-type: inline-size;
}
/* dissolve into --bg — under phones/overlay so only the photo is washed */
.duo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--bg) 0%,
    rgba(255, 248, 252, 0.35) 8%,
    transparent 18%,
    transparent 70%,
    rgba(255, 248, 252, 0.78) 90%,
    var(--bg) 100%
  );
}

.duo-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0.39;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 10%,
    #000 18%,
    #000 72%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.55) 10%,
    #000 18%,
    #000 72%,
    transparent 100%
  );
}

.duo-phones {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.duo::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 18%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 248, 252, 0.35) 45%,
    var(--bg) 100%
  );
}
.duo-slot {
  --duo-headroom: 1.95cqi;
  position: absolute;
  top: calc(100% * 143 / 576 - 100% * 321 / 576 * 0.05 - var(--duo-headroom));
  height: calc(100% * 321 / 576 * 1.1 + var(--duo-headroom));
  width: calc(100% * 321 * 853 / (1024 * 1844) * 1.1);
  container-type: inline-size;
  overflow: hidden;
  pointer-events: auto;
}
.duo-slot-hd { left: calc(100% * 201 / 1024); transform: translateX(-50%); }
.duo-slot-cycle { left: calc(100% * 813.5 / 1024); transform: translateX(-50%); }
.duo-slot .fy-device {
  position: absolute;
  top: var(--duo-headroom);
  left: 50%;
  box-sizing: border-box;
  width: 336px;
  margin-left: -168px;
  height: calc((100% - var(--duo-headroom)) * 336px / 100cqi);
  transform: translateY(0) scale(calc(100cqi / 336px));
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: transform var(--t-slow) var(--ease);
  /* strong floor fade — last of the phone gone, nicks the Today's Message card */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 80%,
    rgba(0, 0, 0, 0.28) 86%,
    rgba(0, 0, 0, 0.06) 91%,
    transparent 95%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 80%,
    rgba(0, 0, 0, 0.28) 86%,
    rgba(0, 0, 0, 0.06) 91%,
    transparent 95%,
    transparent 100%
  );
}
.duo-slot:hover .fy-device {
  transform: translateY(-5px) scale(calc(100cqi / 336px));
}
.duo-slot .fy-tabbar { display: none; }
.duo-slot-hd .duo-device {
  background: linear-gradient(180deg, #F7F9FF, #EFF4FF);
  overflow: hidden;
}
.cycle-ui {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.cycle-ui .hero-ring {
  width: 88%;
  margin: 2px auto 8px;
}
.cycle-ui .ring-label { display: none; }
.cycle-ui .ring-petals { width: 100%; opacity: 0.78; }
.cycle-ui .ring-lotus { width: 46%; margin-bottom: 2px; }
.cycle-ui .ring-day { font-size: 15px; line-height: 1.2; }
.cycle-ui .ring-phase { font-size: 9px; margin-top: 0; }
/* PhaseRing in-ring CTA — white pill + Pencil, LTR so the label doesn’t clip */
.cycle-ui:has(.ring-cta) .ring-lotus { width: 40%; margin-bottom: 0; }
.cycle-ui .ring-cta {
  direction: ltr;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--selection-border);
  box-shadow: 0 5px 12px rgba(244, 91, 147, 0.2);
  white-space: nowrap;
}
.cycle-ui .ring-cta span {
  color: var(--primary);
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
}
.cycle-ui .ring-cta svg {
  width: 11px;
  height: 11px;
  margin-left: 5px;
  color: var(--primary);
}
.cycle-ui .ring-num { font-size: 9px; }
.cycle-ui .ring-today {
  padding: 3px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(26, 18, 31, 0.12);
}
.cycle-ui .ring-today span { font-size: 7px; }
.cycle-ui .ring-today strong { font-size: 9px; }
.cycle-ui .ring-chip {
  left: calc(2% - 20px);
  top: calc(100% - 54px);
  max-width: 48%;
  padding: 6px 8px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(26, 18, 31, 0.1);
  transform: scale(var(--fy-chip-base, 0.8));
  transform-origin: top left;
}
.cycle-ui .ring-chip-head { font-size: 8px; gap: 2px; }
.cycle-ui .ring-chip-bloom { width: 14px; height: 14px; }
.cycle-ui .ring-chip-eta { font-size: 10px; }
.cycle-ui .ring-chip-date { font-size: 8px; gap: 3px; }
.cycle-ui .ring-chip-cal { width: 9px; height: 9px; }
.cycle-ui .dcs-legend {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row-reverse;
  align-items: center;
  align-self: center;
  width: max-content;
  max-width: 100%;
  gap: 10px;
  margin: -8px auto 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 2px 8px rgba(26, 18, 31, 0.06);
  transition: opacity var(--fy-spot, 640ms) var(--ease), transform var(--fy-spot, 640ms) var(--ease),
              box-shadow var(--fy-spot, 640ms) var(--ease);
}
.cycle-ui .dcs-legend span {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}
.cycle-ui .dcs-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
  flex: none;
}
.cycle-ui .dcs-legend .lg-pd { background: var(--primary); }
.cycle-ui .dcs-legend .lg-ft { background: var(--mint); }
.cycle-ui .dcs-legend .lg-ov { background: #FDBE4A; }
.cycle-ui .dcs-legend .lg-pms { background: var(--fertile); }

/* TodayMessageCard — LTR chrome + RTL copy, same as the app component */
.cycle-ui .tmc {
  direction: ltr;
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: calc(100% - 8px);
  margin: 1px auto 8px;
  border-radius: 22px;
  overflow: hidden;
  background: #FFFBFC;
  box-shadow: 0 8px 18px rgba(26, 18, 31, 0.14);
}
.cycle-ui .tmc-wash {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 62%;
  pointer-events: none;
  background: linear-gradient(
    73deg,
    rgba(252, 232, 240, 0.95) 0%,
    rgba(252, 232, 240, 0.4) 42%,
    rgba(255, 252, 253, 0) 100%
  );
}
.cycle-ui .tmc-head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  padding: 4px 14px 0;
}
.cycle-ui .tmc-badge {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(244, 242, 245);
  color: var(--ink-soft);
}
.cycle-ui .tmc-badge span {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.cycle-ui .tmc-badge-ic {
  display: block;
  flex: none;
}
.cycle-ui .tmc-spark {
  position: relative;
  width: 64px;
  height: 56px;
  margin-left: -6px;
  margin-top: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.cycle-ui .tmc-glow {
  position: absolute;
  pointer-events: none;
}
.cycle-ui .tmc-spark img {
  position: relative;
  width: 48px;
  height: 48px;
  object-fit: cover;
}
.cycle-ui .tmc-body {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  min-height: 136px;
  margin-top: -8px;
  padding: 2px 14px 0 124px;
}
.cycle-ui .tmc-illu {
  position: absolute;
  left: 2px;
  top: 4px;
  width: 148px;
  height: 140px;
  object-fit: contain;
  z-index: 0;
  pointer-events: none;
}
.cycle-ui .tmc-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  width: 200px;
}
.cycle-ui .tmc-headline {
  width: 100%;
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  color: var(--ink);
  text-align: right;
  direction: rtl;
}
.cycle-ui .tmc-text {
  width: 100%;
  margin: 0;
  font-size: 9px;
  font-weight: 400;
  line-height: 15px;
  color: var(--ink-soft);
  text-align: right;
  direction: rtl;
  white-space: pre-line;
}

.duo-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7% 2.34% 4.9%;
  pointer-events: none;
}

.duo-head,
.duo-caption,
.duo-cue {
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
}

.duo-head {
  text-align: center;
  max-width: min(52cqi, 720px);
  margin-inline: auto;
}
.duo-head h2 {
  font-size: clamp(1.2rem, 2.9cqi, 3.05rem);
}
.duo-head h2 em {
  font-style: normal;
  background: linear-gradient(to left, var(--primary), var(--hd-secondary), var(--hd-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.duo-head .section-sub {
  margin-inline: auto;
  max-width: 48cqi;
  font-size: clamp(0.82rem, 1.33cqi, 1.22rem);
}

/* five cutouts from the sixth frame: heart + lock/shield + wires, no black mat */
.duo-link-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(-0.98%);
}
.duo-link-art img {
  position: absolute;
  display: block;
  height: auto;
}
.duo-heart {
  left: 50%;
  top: 50%;
  width: 10.5%;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0.6;
}
.duo-badge {
  top: 50%;
  width: 2.7%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0.8;
}
.duo-badge-cycle { left: 63.5%; }
.duo-badge-hd { left: 36.5%; }
.duo-caption {
  position: absolute;
  top: calc(50% + 2.25cqi);
  width: min(22cqi, 24%);
  transform: translateX(calc(-50% - 0.98cqi));
  margin: 0;
  text-align: center;
  z-index: 3;
}
.duo-caption-hd { left: 36.5%; }
.duo-caption-cycle { left: 63.5%; }
.duo-caption strong {
  display: block;
  font-size: clamp(0.58rem, 0.98cqi, 0.95rem);
  font-weight: 800;
  line-height: 1.45;
  margin-bottom: 0.32em;
}
.duo-caption-hd strong { color: var(--hd-primary); }
.duo-caption-cycle strong { color: var(--primary); }
.duo-caption span {
  display: block;
  font-size: clamp(0.5rem, 0.83cqi, 0.8rem);
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.55;
}
.duo-wire {
  top: 36%;
  width: 12.64%;
  z-index: 1;
  opacity: 0.7;
}
.duo-wire-cycle {
  left: calc(61.75% - 8.32cqi);
  transform: rotate(-31.5deg) scaleX(-1) scaleY(-1);
}
.duo-wire-hd {
  left: calc(46.32% - 12.59cqi);
  transform: rotate(31.5deg) scaleX(-1) scaleY(-1);
}

/* ── phones ── */
.duo-phone { margin: 0; position: relative; }
.duo-cycle { transform: translateY(12px); }
.duo-hamdel { transform: translateY(-8px); }
.duo-phone figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
}
.duo-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  padding: 6px 15px;
  font-size: 0.86rem;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(26, 18, 31, 0.06);
}
.duo-tag .mb-dot { width: 7px; height: 7px; }
.duo-tag-cycle { background: var(--primary-container); color: var(--primary-dark); }
.duo-tag-cycle .mb-dot { background: var(--primary); }
.duo-tag-hd { background: var(--hd-soft); color: var(--hd-deep); }
.duo-tag-hd .mb-dot { background: var(--hd-primary); }
.duo-cap { font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); }

.duo-device {
  position: relative;
  width: 274px;
  border: 6px solid #261D2F;
  border-radius: 38px;
  background: linear-gradient(180deg, #FFF8FC, #FDF1F7);
  box-shadow: 0 26px 54px rgba(26, 18, 31, 0.17), 0 4px 12px rgba(26, 18, 31, 0.07);
  padding: 8px 12px 14px;
  overflow: hidden;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) ease;
}
.duo-device.cycle-ui { overflow: visible; }
.duo-phone:hover .duo-device { transform: translateY(-5px); }
.duo-hamdel .duo-device {
  width: 252px;
  background: linear-gradient(180deg, #F7F9FF, #EFF4FF);
}
/* per-side ambient glow under each device */
.duo-phone::after {
  content: "";
  position: absolute;
  inset: auto 8% -26px 8%;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 91, 147, 0.2), transparent);
  filter: blur(6px);
  z-index: -1;
}
.duo-hamdel::after { background: radial-gradient(closest-side, rgba(91, 127, 242, 0.22), transparent); }

.dp-island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 13px;
  border-radius: 999px;
  background: #261D2F;
}
.dp-status {
  direction: ltr;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  padding: 2px 4px 0;
  font-size: 9.5px;
  font-weight: 700;
}
.dp-status svg { width: 30px; height: 9px; opacity: 0.8; }

.dp-appbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 4px 0;
}
.dp-brand { font-size: 15px; font-weight: 900; color: var(--primary); }
.dp-brand-hd { color: var(--hd-deep); }
.dp-date { font-size: 8.5px; font-weight: 600; color: var(--ink-faint); }

/* week strip (MiniWeekStrip) */
.dp-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 13px;
  padding: 4px;
  margin-top: 10px;
}
.dwc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 8px;
  padding: 4px 0 3px;
  border: 1px solid transparent;
}
.dwc i { font-style: normal; font-size: 7px; font-weight: 600; color: var(--ink-faint); line-height: 1.2; }
.dwc b { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); line-height: 1.3; }
.dwc.on { background: #F0FBFA; }
.dwc.on i, .dwc.on b { color: #1d8f8b; }
.dwc.pd { background: #FDEFF5; }
.dwc.pd i, .dwc.pd b { color: #C2477F; }
/* app parity: unmarked selected/today stays neutral — not period pink */
.dwc.sel { border-color: rgba(168, 152, 172, 0.45); background: #E8E4EA; }
.dwc.sel b { font-weight: 800; }

/* mini phase ring (PhaseRing) */
.dp-ring {
  position: relative;
  width: 168px;
  aspect-ratio: 1;
  margin: 12px auto 4px;
}
.dp-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dpr-center {
  position: absolute;
  inset: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.dpr-center img { width: 44px; height: auto; opacity: 0.85; margin-bottom: 1px; }
.dpr-center b { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.5; }
.dpr-center i { font-style: normal; font-size: 8.5px; font-weight: 600; color: var(--ink-faint); }
.dpr-cta {
  margin-top: 5px;
  background: var(--primary-container);
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 8.5px;
  font-weight: 800;
}

/* «پیام امروز» card (TodayMessageCard) */
.dp-msg {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 9px 12px 10px;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(244, 91, 147, 0.08);
}
.dp-msg-k { display: block; font-size: 8px; font-weight: 800; color: var(--primary); }
.dp-msg strong { display: block; font-size: 11px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.dp-msg-b { display: block; font-size: 9px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; line-height: 1.7; }

/* hamdel phone internals */
.dp-pair {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--hd-line);
  border-radius: 13px;
  padding: 7px 10px;
  margin-top: 11px;
}
.pair-avatars { position: relative; display: inline-flex; align-items: center; flex: none; }
.pair-ava {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  border: 1.8px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.pair-ava svg { width: 13px; height: 13px; }
.pa-rose { background: linear-gradient(140deg, #F45B93, #F58Fb6); z-index: 1; }
.pa-blue { background: linear-gradient(140deg, var(--hd-gradient-start), var(--hd-gradient-end)); margin-inline-start: -7px; }
.pair-heart {
  position: absolute;
  inset-inline-start: 50%;
  bottom: -4px;
  transform: translateX(50%);
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(26, 18, 31, 0.18);
}
.pair-heart svg { width: 8px; height: 8px; }
.pair-meta { display: flex; flex-direction: column; line-height: 1.5; }
.pair-meta strong { font-size: 10.5px; font-weight: 800; color: var(--hd-deep); }
.pair-meta i { font-style: normal; font-size: 8.5px; font-weight: 600; color: var(--hd-ink-soft); }

.dp-sec {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--hd-deep);
  margin-top: 12px;
}
.dps-ic {
  width: 17px;
  height: 17px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hd-line);
  color: var(--hd-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dps-ic svg { width: 10px; height: 10px; }

/* «حال همدلت» — solid companion card (HamdelMoodCard) */
.dp-mood {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--hd-gradient-start), var(--hd-gradient-end));
  border-radius: 15px;
  padding: 11px 12px;
  margin-top: 7px;
  box-shadow: 0 8px 18px rgba(91, 127, 242, 0.32);
}
.dpm-ic {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dpm-ic svg { width: 16px; height: 16px; }
.dpm-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dpm-txt strong { font-size: 11px; font-weight: 800; color: #fff; line-height: 1.6; }
.dpm-txt span { font-size: 9px; font-weight: 600; color: rgba(255, 255, 255, 0.88); }

/* «برنامه‌های امروز» card (ProgramCard) */
.dp-prog {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--hd-line);
  border-radius: 15px;
  padding: 10px 12px;
  margin-top: 7px;
  box-shadow: 0 4px 14px rgba(91, 127, 242, 0.1);
}
.dpp-ic {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--hd-soft);
  border: 1px solid var(--hd-line);
  color: var(--hd-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dpp-ic svg { width: 16px; height: 16px; }
.dpp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dpp-txt strong { font-size: 10.5px; font-weight: 800; color: var(--ink); }
.dpp-txt span { font-size: 9.5px; font-weight: 700; color: var(--hd-primary); }
.dpp-txt i { font-style: normal; font-size: 8px; font-weight: 700; color: var(--hd-ink-soft); margin-top: 1px; }

/* ── the controlled link ── */
.duo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 10px;
  min-width: 0;
}
.duo-flow { position: relative; width: 100%; }
.duo-wires { display: block; width: 100%; height: auto; }

.duo-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 218px));
  gap: 12px;
  margin-top: 10px;
}
.duo-chip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 10px 13px;
  box-shadow: 0 4px 16px rgba(26, 18, 31, 0.06);
}
.duo-chip-cycle { transform: translateY(-5px); }
.duo-chip-hd { transform: translateY(5px); border-color: var(--hd-line); }
.dc-ic {
  width: 27px;
  height: 27px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}
.dc-ic svg { width: 15px; height: 15px; }
.duo-chip-cycle .dc-ic { background: var(--primary-container); color: var(--primary-dark); }
.duo-chip-hd .dc-ic { background: var(--hd-soft); color: var(--hd-primary); }
.duo-chip strong { display: block; font-size: 0.84rem; font-weight: 800; line-height: 1.6; }
.duo-chip span { display: block; font-size: 0.74rem; color: var(--ink-soft); font-weight: 600; line-height: 1.7; }

.duo-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px dashed var(--selection-border);
  border-radius: 999px;
  padding: 9px 20px;
  color: var(--ink-soft);
}
.duo-pill svg { width: 17px; height: 17px; color: var(--mint); flex: none; }
.duo-pill strong { font-size: 0.88rem; font-weight: 800; color: var(--ink); }
.duo-pill span { font-size: 0.8rem; font-weight: 600; }

.duo-cue {
  display: flex;
  width: fit-content;
  margin: auto auto 140px;
  align-items: center;
  gap: 0.5em;
  color: var(--ink-soft);
  font-size: clamp(0.75rem, 1.19cqi, 1.12rem);
  font-weight: 700;
  text-decoration: none;
  padding: 0.4em 0.65em;
  pointer-events: auto;
}
.duo-cue svg { width: 1.15em; height: 1.15em; color: var(--primary); }
.duo-cue:hover { color: var(--primary-dark); }
@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
html.js .duo-cue svg { animation: cue-nudge 2.2s ease-in-out infinite; }

@media (max-width: 1080px) {
  .duo-device { width: 248px; }
  .duo-hamdel .duo-device { width: 232px; }
  .dp-ring { width: 150px; }
  .duo-chips { grid-template-columns: 1fr; gap: 9px; max-width: 240px; }
  .duo-chip-cycle, .duo-chip-hd { transform: none; }
}

@media (max-width: 900px) {
  .duo-overlay { padding-top: 4cqi; }
  .duo-heart {
    width: 9.35%;
    top: 50%;
  }
  .duo-badge { width: 1.45%; }
  .duo-caption {
    width: min(30cqi, 17.8%);
    top: calc(50% + 4cqi);
  }
  .duo-wire { width: 8.8%; top: 38%; }
  .duo-device, .duo-hamdel .duo-device { width: min(78vw, 280px); }
  .dp-ring { width: 168px; }
  .duo-link { position: relative; }
  .duo-link::before, .duo-link::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 26px;
    border-inline-start: 2.4px dashed rgba(244, 91, 147, 0.45);
  }
  .duo-link::before { top: -32px; }
  .duo-link::after { bottom: -32px; border-inline-start-color: rgba(91, 127, 242, 0.5); }
  .duo-chips { grid-template-columns: 1fr 1fr; max-width: 460px; gap: 10px; margin-top: 16px; }
}

@media (max-width: 520px) {
  .duo-chips { grid-template-columns: 1fr; max-width: 300px; }
  .duo-pill { text-align: center; padding: 9px 16px; }
  .duo-pill span { width: 100%; }
}

/* ── برای خودت — product experience showcase ────────────────────────── */
.for-you {
  --fy-spot: 640ms;
  --fy-focus-y: -2px;
  --fy-focus-scale: 1.03;
  --fy-focus: translateY(var(--fy-focus-y)) scale(var(--fy-focus-scale));
  --fy-chip-base: 0.8;
  --fy-focus-chip: translateY(var(--fy-focus-y)) scale(calc(var(--fy-chip-base) * var(--fy-focus-scale)));
  --fy-focus-glow: 0 10px 24px rgba(244, 91, 147, 0.22);
  --fy-focus-glow-hd: 0 10px 24px rgba(91, 127, 242, 0.26);
  --fy-lead: 1080ms;
  --fy-swap-out: 1387ms;
  --fy-swap-in: 2080ms;
  --fy-swap-ease: cubic-bezier(0.45, 0, 0.55, 1);
  position: relative;
  padding-top: 56px;
  overflow: hidden;
}
/* mode air: a soft rose center that hands over to companion blue in همدل mode */
.for-you::before,
.for-you::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.7s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 130px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 130px), transparent 100%);
}
.for-you::before {
  background: radial-gradient(780px 560px at 50% 42%, rgba(244, 91, 147, 0.06), transparent 70%);
}
.for-you::after {
  background: radial-gradient(780px 560px at 50% 42%, rgba(91, 127, 242, 0.075), transparent 70%);
  opacity: 0;
}
.for-you.fy-hd::before { opacity: 0; }
.for-you.fy-hd::after { opacity: 1; }
.for-you .container { position: relative; }

.fy-head {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  transition: max-width var(--fy-swap-in) var(--fy-swap-ease);
}
.fy-head .section-sub {
  margin-inline: auto;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(0.84rem, 1.15vw + 0.55rem, 1.06rem);
}
.for-you.fy-hd .fy-head { max-width: min(100%, 1040px); }
/* copy uses the same fade clock as the panels (mockup + cards) */
html.js .for-you [data-fy-h2],
html.js .for-you [data-fy-sub],
html.js .for-you [data-fy-cue] {
  transition: opacity var(--fy-swap-in) var(--fy-swap-ease);
}
html.js .for-you.fy-swap [data-fy-h2],
html.js .for-you.fy-swap [data-fy-sub],
html.js .for-you.fy-swap [data-fy-cue] {
  opacity: 0;
  transition-duration: var(--fy-swap-out);
}
html.js .for-you.fy-swap-cut [data-fy-h2],
html.js .for-you.fy-swap-cut [data-fy-sub],
html.js .for-you.fy-swap-cut [data-fy-cue] {
  transition: none;
  opacity: 0;
}

/* ── mode switch — the mini demo control ── */
.fy-switch {
  display: flex;
  width: fit-content;
  margin: 30px auto 0;
  gap: 4px;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  box-shadow: 0 6px 18px rgba(26, 18, 31, 0.06);
  scroll-margin-top: 96px;
}
.fy-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  padding: 3px 22px;
  cursor: pointer;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease),
              border-color var(--t-slow) var(--ease);
}
.fy-tab svg { width: 17px; height: 17px; flex: none; }
/* cradle Hamdel mark — 2× tab glyph so the PNG reads at the same weight */
.fy-tab-ic-hd {
  width: 38px;
  height: 38px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("assets/hamdel-header-icon.webp") center / contain no-repeat;
  mask: url("assets/hamdel-header-icon.webp") center / contain no-repeat;
}
.fy-tab-hd:not(.is-on) .fy-tab-ic-hd { opacity: 0.9; }
.fy-tab:not(.is-on):hover { color: var(--ink-soft); background: var(--chip-bg); }
.fy-tab-hd:not(.is-on):hover {
  color: var(--hd-primary);
  background: var(--hd-soft);
  border-color: var(--hd-line);
}
.fy-tab-khodet.is-on {
  background: var(--primary-container);
  border-color: var(--selection-border);
  color: var(--primary-dark);
}
.fy-tab-hd.is-on {
  background: var(--hd-soft);
  border-color: var(--hd-line);
  color: var(--hd-deep);
}

/* ── stage: the two experience panels stack and crossfade ── */
.fy-stage { display: grid; margin-top: 40px; }
.fy-panel {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: opacity var(--fy-swap-out) var(--fy-swap-ease),
              visibility 0s var(--fy-swap-out);
  pointer-events: none;
}
.fy-panel.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity var(--fy-swap-in) var(--fy-swap-ease),
              visibility 0s;
  pointer-events: auto;
}

.fy-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 46px;
  align-items: stretch;
}
.fy-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
}
.fy-col-lead { align-items: flex-end; }
.fy-col-tail { align-items: flex-start; }
.fy-col:has(> .fy-note:only-child) { justify-content: center; }

/* --fy-lift is the hover/spot raise; folded into every transform so the
   reveal rules (higher specificity) never cancel the hover motion */
.fy-note, .fy-statement {
  transform: translateY(var(--fy-lift, 0px));
}
html.js .fy-grid .reveal { transform: translateY(22px); }
html.js .fy-grid .reveal.is-in {
  transform: translateY(var(--fy-lift, 0px));
}

/* ── contextual notes (annotations, not feature cards) ── */
.fy-note {
  position: relative;
  width: min(100%, 300px);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  box-shadow: 0 10px 26px rgba(26, 18, 31, 0.07);
  transition: transform var(--fy-spot) var(--ease), box-shadow var(--fy-spot) ease,
              border-color var(--fy-spot) ease;
}
.fy-note:hover, .fy-note:focus-visible, .fy-note.is-spot {
  --fy-lift: -3px;
  border-color: var(--selection-border);
  box-shadow: var(--shadow-card);
}
.fy-note-hd:hover, .fy-note-hd:focus-visible, .fy-note-hd.is-spot {
  border-color: var(--hd-line);
  box-shadow: var(--shadow-card-hd);
}
.fy-note-head { display: flex; align-items: center; gap: 10px; }
.fy-ic {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: var(--primary-container);
  color: var(--primary-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fy-ic svg { width: 18px; height: 18px; }
.fy-ic-art {
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  transform: translateX(10px);
}
.fy-ic-art img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.fy-note-hd .fy-ic { background: var(--hd-soft); color: var(--hd-primary); }
.fy-note h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.5; }
.fy-panel-khodet .fy-note h3 {
  font-size: 0.94rem;
  font-weight: 700;
  transform: translateX(14px);
}
.fy-panel-khodet .fy-note > p {
  font-size: 0.78rem;
  margin-inline-start: calc(30px + 10px - 14px);
  margin-top: 7px;
}
.fy-note > p {
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.9;
  margin-top: 10px;
}

/* mini scope pills inside «اشتراک انتخابی» */
.fy-scopes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.fy-sc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 3.5px 11px;
  line-height: 1.5;
}
.fy-sc svg { width: 11px; height: 11px; }
.fy-sc.on { background: var(--hd-soft); border: 1px solid var(--hd-line); color: var(--hd-deep); }
.fy-sc.off { background: var(--surface); border: 1px dashed var(--line); color: var(--ink-faint); }

@media (min-width: 1081px) {
  html.js .fy-grid.fy-aimed .fy-note {
    position: relative;
    z-index: 5;
    isolation: isolate;
    background: var(--surface);
  }
  /* no transform / z-index on the phone — either one traps mockup cards under the lead */
  html.js .fy-grid.fy-aimed .fy-phone,
  html.js .fy-grid .fy-phone.reveal,
  html.js .fy-grid .fy-phone.reveal.is-in {
    z-index: auto;
    transform: none;
  }
  .fy-n1 { margin-top: 120px; }
  .fy-n2 { margin-bottom: 160px; }
  .fy-n3 { margin-top: 160px; }
  .fy-n4 { margin-bottom: 100px; }

  .fy-note::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: -44px;
    width: 40px;
    border-top: 1.5px dotted rgba(244, 91, 147, 0.36);
    transition: border-color var(--fy-spot) var(--ease);
  }
  .fy-note::before {
    content: "";
    position: absolute;
    top: calc(50% - 3.6px);
    inset-inline-end: -51px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0.7;
    transition: opacity var(--fy-spot) var(--ease);
  }
  .fy-col-tail .fy-note::after { inset-inline-end: auto; inset-inline-start: -44px; }
  .fy-col-tail .fy-note::before { inset-inline-end: auto; inset-inline-start: -51px; }
  .fy-note:hover::after, .fy-note.is-spot::after { border-color: rgba(244, 91, 147, 0.64); }
  .fy-note:hover::before, .fy-note.is-spot::before { opacity: 1; }
  .fy-note-hd::after { border-top-color: rgba(91, 127, 242, 0.36); }
  .fy-note-hd::before { background: var(--hd-primary); }
  .fy-note-hd:hover::after, .fy-note-hd.is-spot::after { border-color: rgba(91, 127, 242, 0.68); }
  html.js .fy-grid.fy-aimed .fy-note::before,
  html.js .fy-grid.fy-aimed .fy-note::after { content: none; }

  .fy-rays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: visible;
  }
  .fy-ray {
    position: absolute;
    height: 0;
    border-top: 1.5px dotted rgba(244, 91, 147, 0.36);
    transform-origin: 0 50%;
    transition: width var(--fy-lead) cubic-bezier(0.16, 1, 0.3, 1),
                border-color var(--fy-lead) ease;
  }
  .fy-ray::after {
    content: "";
    position: absolute;
    right: -5px;
    top: -5.3px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primary);
    opacity: 0;
    transition: opacity var(--fy-spot) var(--ease);
  }
  .fy-ray.is-on { border-top-color: rgba(244, 91, 147, 0.64); }
  .fy-ray.is-on::after { opacity: 0.85; }
  .fy-ray-hd { border-top-color: rgba(91, 127, 242, 0.36); }
  .fy-ray-hd::after { background: var(--hd-primary); }
  .fy-ray-hd.is-on { border-top-color: rgba(91, 127, 242, 0.68); }
}

/* ── bottom statement — the quiet promise ── */
.fy-statement {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 300px);
  background: linear-gradient(135deg, #FDEFF6, var(--primary-container));
  border: 1.5px solid var(--selection-border);
  border-radius: var(--r-xl);
  padding: 15px 17px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 1.9;
}
.fy-statement strong { color: var(--ink); font-weight: 800; }
.fy-heart {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--surface);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(244, 91, 147, 0.18);
}
.fy-heart svg { width: 19px; height: 19px; }
.fy-statement-hd {
  background: linear-gradient(135deg, var(--hd-pale), var(--hd-soft));
  border-color: var(--hd-line);
}
.fy-statement-hd .fy-heart { color: var(--hd-warm); box-shadow: 0 4px 12px rgba(241, 90, 145, 0.2); }

/* ── the showcase phone (bigger sibling of the duo devices) ── */
.fy-phone { margin: 0; position: relative; z-index: 1; align-self: start; }
.fy-phone::after {
  content: "";
  position: absolute;
  inset: auto 9% -28px 9%;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 91, 147, 0.2), transparent);
  filter: blur(6px);
  z-index: -1;
}
.fy-panel-hamdel .fy-phone::after {
  background: radial-gradient(closest-side, rgba(91, 127, 242, 0.22), transparent);
}
.fy-device {
  width: min(88vw, 336px);
  border-radius: 44px;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.fy-device-hd {
  background: linear-gradient(180deg, var(--hd-pale), var(--hd-pale-end));
}
.fy-device-hd .fy-tabbar {
  margin-top: auto;
}
.fy-device .dp-status { font-size: 10.5px; padding-top: 4px; }
.fy-device .dp-appbar { padding-top: 14px; }
.fy-device .dp-brand { font-size: 17px; }
.fy-device .dp-date { font-size: 10px; }
.fy-device .dp-week { margin-top: 12px; gap: 4px; padding: 5px; }
.fy-device .dwc { padding: 5px 0 4px; }
.fy-device .dwc i { font-size: 8px; }
.fy-device .dwc b { font-size: 12.5px; }
.fy-device .dp-ring { width: 192px; margin: 14px auto 6px; }
.fy-device .dpr-center img { width: 56px; }
.fy-device .dpr-center b { font-size: 18px; }
.fy-device .dpr-center i { font-size: 10px; }
.fy-device .dpr-cta { font-size: 10px; padding: 4px 13px; margin-top: 6px; }

.fy-device .predict-chip {
  margin-top: 12px;
  border-radius: 16px;
  border-color: rgba(244, 91, 147, 0.22);
  background: #FFF9FC;
  box-shadow: 0 6px 16px rgba(244, 91, 147, 0.1);
  padding: 10px 14px;
}

.fy-log {
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 9px 13px 11px;
}
.fy-log-k {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.fy-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fy-device .chip { font-size: 10px; padding: 3.5px 10px; border-radius: 10px; border-width: 1px; }

.fy-report {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #FAF7FD;
  border: 1px solid rgba(140, 107, 255, 0.22);
  border-radius: 16px;
  padding: 9px 12px;
}
.fyr-ic {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--surface);
  border: 1px solid rgba(140, 107, 255, 0.25);
  color: #6a53c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.fyr-ic svg { width: 14px; height: 14px; }
.fyr-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fyr-txt strong { font-size: 11px; font-weight: 800; color: var(--ink); }
.fyr-txt span { font-size: 9px; font-weight: 600; color: var(--ink-soft); }
.fyr-chev { width: 13px; height: 13px; color: var(--ink-faint); margin-inline-start: auto; flex: none; }

/* in-phone tab bar — real tabs: تقویم / چرخه (cradle) / همدل */
.fy-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  margin: 14px -14px -16px;
  padding: 8px 20px 11px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}
.fy-tb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ink-faint);
  line-height: 1.4;
}
.fy-tb svg { width: 17px; height: 17px; }
.fy-tb-fab { color: var(--primary-dark); font-weight: 800; margin-top: -20px; }
.fy-fab {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--selection-border);
  box-shadow: 0 6px 14px rgba(244, 91, 147, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.fy-fab img { width: 24px; height: auto; }
.fy-tabbar-hd { border-top-color: var(--hd-line); align-items: center; padding-block: 9px 11px; }
.fy-tabbar-hd .fy-tb.on { color: var(--hd-primary); font-weight: 800; }

/* hamdel device internals scale up to showcase size */
.fy-device-hd .dp-pair { margin-top: 12px; padding: 8px 12px; }
.fy-device-hd .pair-ava { width: 29px; height: 29px; }
.fy-device-hd .pair-ava svg { width: 15px; height: 15px; }
.fy-device-hd .pair-meta strong { font-size: 12px; }
.fy-device-hd .pair-meta i { font-size: 9.5px; }
.fy-device-hd .dp-sec { font-size: 12px; margin-top: 13px; }
.fy-device-hd .dps-ic { width: 20px; height: 20px; }
.fy-device-hd .dps-ic svg { width: 12px; height: 12px; }
.fy-device-hd .dp-mood { padding: 12px 13px; margin-top: 8px; }
.fy-device-hd .dpm-ic { width: 34px; height: 34px; }
.fy-device-hd .dpm-txt strong { font-size: 12.5px; }
.fy-device-hd .dpm-txt span { font-size: 10px; }
.fy-device-hd .dp-prog { padding: 11px 13px; margin-top: 8px; }
.fy-device-hd .dpp-ic { width: 34px; height: 34px; }
.fy-device-hd .dpp-txt strong { font-size: 12px; }
.fy-device-hd .dpp-txt span { font-size: 10.5px; }
.fy-device-hd .dpp-txt i { font-size: 9px; }

.fy-tip {
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--hd-line);
  border-radius: 15px;
  padding: 10px 13px;
  box-shadow: 0 4px 14px rgba(91, 127, 242, 0.08);
}
.fy-tip strong { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink); }
.fy-tip > span { display: block; font-size: 9.5px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; line-height: 1.7; }
.fy-tip i {
  font-style: normal;
  display: inline-block;
  margin-top: 6px;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--hd-primary);
  background: var(--hd-soft);
  border-radius: 999px;
  padding: 2px 9px;
}

.fy-share {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--hd-pale);
  border: 1.5px dashed var(--hd-line);
  border-radius: 13px;
  padding: 8px 11px;
}
.fy-share > svg { width: 14px; height: 14px; color: var(--hd-primary); flex: none; }
.fy-share-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fy-share-txt strong { font-size: 10px; font-weight: 800; color: var(--hd-deep); }
.fy-share-txt span { font-size: 8.5px; font-weight: 600; color: var(--hd-ink-soft); line-height: 1.6; }

/* ── contextual spotlight: hovering a note focuses its zone in the UI ── */
.fy-device > * { transition: opacity var(--fy-spot) var(--ease); }
.fy-zone {
  border-radius: 16px;
  transition: opacity var(--fy-spot) var(--ease), transform var(--fy-spot) var(--ease),
              box-shadow var(--fy-spot) var(--ease);
}
.hero-ring > *,
.ring-center > * {
  transition: opacity var(--fy-spot) var(--ease), transform var(--fy-spot) var(--ease),
              box-shadow var(--fy-spot) var(--ease);
}
/* one clock for every mockup piece — beats html.js 0.5s chip/label transitions */
html.js .for-you .hero-ring,
html.js .for-you .hero-ring > *,
html.js .for-you .ring-center > *,
html.js .for-you .fy-device > *,
html.js .for-you .fy-zone,
html.js .for-you .dcs-legend,
html.js .for-you .tmc,
html.js .for-you .ring-cta,
html.js .for-you .ring-chip,
html.js .for-you .ring-today,
html.js .for-you .ring-num,
html.js .for-you .ring-label,
html.js .for-you .ov-sun {
  transition:
    opacity var(--fy-spot) var(--ease),
    transform var(--fy-spot) var(--ease),
    box-shadow var(--fy-spot) var(--ease);
}
html.js .for-you .hero-ring.ring-done .ring-label,
html.js .for-you .hero-ring.ring-done .ring-num,
html.js .for-you .hero-ring.ring-done .rl-fertile,
html.js .for-you .hero-ring.ring-done .rl-ov,
html.js .for-you .hero-ring.ring-done .rl-pms {
  transition-delay: 0s;
}
html.js .for-you .ring-petals {
  transition: opacity var(--fy-spot) var(--ease);
}
.fy-panel[data-spot="mood"] .fy-device > :not([data-zone="mood"]),
.fy-panel[data-spot="hint"] .fy-device > :not([data-zone="hint"]),
.fy-panel[data-spot="share"] .fy-device > :not([data-zone="share"]) { opacity: 0.38; }
.fy-panel[data-spot="mood"] [data-zone="mood"],
.fy-panel[data-spot="hint"] [data-zone="hint"],
.fy-panel[data-spot="share"] [data-zone="share"] {
  position: relative;
  z-index: 4;
  transform: var(--fy-focus);
  box-shadow: var(--fy-focus-glow-hd);
}

/* owner loop: status → log → predict → insight. Legend is chrome, not a spot. */
.fy-panel-khodet[data-spot] .fy-device > .dp-island,
.fy-panel-khodet[data-spot] .fy-device > .dp-status,
.fy-panel-khodet[data-spot] .fy-device > .dp-appbar,
.fy-panel-khodet[data-spot] .fy-device > .dp-week { opacity: 0.38; }
html.js .fy-panel-khodet[data-spot="status"] .tmc,
html.js .fy-panel-khodet[data-spot="status"] .ring-cta { opacity: 0.38; }
html.js .fy-panel-khodet[data-spot="status"] .hero-ring .ring-chip {
  opacity: 0.38;
  box-shadow: none;
  transform: scale(var(--fy-chip-base, 0.8));
}
html.js .fy-panel-khodet[data-spot="log"] .tmc,
html.js .fy-panel-khodet[data-spot="log"] .dcs-legend,
html.js .fy-panel-khodet[data-spot="log"] .ring-petals,
html.js .fy-panel-khodet[data-spot="log"] .ring-svg,
html.js .fy-panel-khodet[data-spot="log"] .ring-num,
html.js .fy-panel-khodet[data-spot="log"] .ring-today,
html.js .fy-panel-khodet[data-spot="log"] .ring-lotus,
html.js .fy-panel-khodet[data-spot="log"] .ring-day,
html.js .fy-panel-khodet[data-spot="log"] .ring-phase,
html.js .fy-panel-khodet[data-spot="log"] .ring-chip { opacity: 0.38; }
html.js .fy-panel-khodet[data-spot="predict"] .tmc,
html.js .fy-panel-khodet[data-spot="predict"] .dcs-legend,
html.js .fy-panel-khodet[data-spot="predict"] .ring-petals,
html.js .fy-panel-khodet[data-spot="predict"] .ring-svg,
html.js .fy-panel-khodet[data-spot="predict"] .ring-num,
html.js .fy-panel-khodet[data-spot="predict"] .ring-today,
html.js .fy-panel-khodet[data-spot="predict"] .ring-lotus,
html.js .fy-panel-khodet[data-spot="predict"] .ring-day,
html.js .fy-panel-khodet[data-spot="predict"] .ring-phase,
html.js .fy-panel-khodet[data-spot="predict"] .ring-cta { opacity: 0.38; }
.fy-panel-khodet[data-spot="insight"] .hero-ring,
.fy-panel-khodet[data-spot="insight"] .dcs-legend { opacity: 0.38; }
.fy-panel-khodet[data-spot="status"] .rn-10 {
  z-index: 5;
  color: var(--ink-soft);
}
.fy-panel-khodet[data-spot="status"] .hero-ring,
.fy-panel-khodet[data-spot="status"] .dcs-legend,
.fy-panel-khodet[data-spot="log"] .ring-cta,
.fy-panel-khodet[data-spot="insight"] .tmc {
  position: relative;
  z-index: 4;
}
.fy-panel-khodet[data-spot="status"] .hero-ring > :not(.ring-chip),
.fy-panel-khodet[data-spot="status"] .dcs-legend,
.fy-panel-khodet[data-spot="log"] .ring-cta,
.fy-panel-khodet[data-spot="insight"] .tmc {
  transform: var(--fy-focus);
}
.fy-panel-khodet[data-spot="predict"] .ring-chip {
  z-index: 4;
  transform: var(--fy-focus-chip);
}
.fy-panel-khodet[data-spot="status"] .dcs-legend,
.fy-panel-khodet[data-spot="log"] .ring-cta,
.fy-panel-khodet[data-spot="predict"] .ring-chip,
.fy-panel-khodet[data-spot="insight"] .tmc {
  box-shadow: var(--fy-focus-glow);
}

/* ── foot: honesty + continuation cue ── */
.fy-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 46px;
}
.fy-foot .honesty-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  opacity: 0.35;
}
html.js .fy-foot .honesty-pill.reveal,
html.js .fy-foot .honesty-pill.reveal.is-in {
  opacity: 0.35;
}
.fy-honesty-ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-faint);
}
.fy-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--hd-primary);
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  padding: 6px 10px;
}
.fy-cue:hover { color: var(--hd-deep); }
.fy-cue svg { width: 17px; height: 17px; }
.fy-cue .fy-cue-down { display: none; }
.for-you.fy-hd .fy-cue .fy-cue-go { display: none; }
.for-you.fy-hd .fy-cue .fy-cue-down { display: block; }
@keyframes cue-slide {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3px); }
}
html.js .fy-cue .fy-cue-go { animation: cue-slide 2.2s ease-in-out infinite; }
html.js .fy-cue .fy-cue-down { animation: cue-nudge 2.2s ease-in-out infinite; }

/* entrance rhythm: header → switch → UI forms → markers appear one by one */
html.js .fy-switch.reveal { transition-delay: 60ms; }
html.js .fy-phone.reveal { transition-delay: 90ms; }
html.js .fy-n1.reveal,
html.js .fy-n2.reveal,
html.js .fy-n3.reveal,
html.js .fy-n4.reveal { transition-delay: 360ms; }
html.js .fy-statement.reveal { transition-delay: 660ms; }

@media (max-width: 1080px) {
  /* recompose: product first, then the annotations read as a story */
  .fy-grid { display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .fy-col { display: contents; }
  .fy-phone { order: -1; margin-bottom: 14px; }
  .fy-note, .fy-statement { width: min(100%, 440px); }
  .fy-rays { display: none; }
  html.js .fy-n1.reveal,
  html.js .fy-n2.reveal,
  html.js .fy-n3.reveal,
  html.js .fy-n4.reveal { transition-delay: 300ms; }
  html.js .fy-statement.reveal { transition-delay: 420ms; }
}

@media (max-width: 720px) {
  .fy-head .section-sub { white-space: normal; }
}
@media (max-width: 520px) {
  .fy-switch { width: min(100%, 340px); }
  .fy-tab { flex: 1; justify-content: center; padding-inline: 10px; }
  .fy-foot { margin-top: 38px; }
  .fy-foot .honesty-pill { font-size: 0.78rem; }
}

.predict-chip {
  background: var(--surface);
  border: 1px solid rgba(244, 91, 147, 0.16);
  border-radius: 12px;
  padding: 10px 16px;
  box-shadow: 0 3px 12px rgba(26, 18, 31, 0.08);
  line-height: 1.5;
}
.predict-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 700;
}
.predict-band { color: var(--primary); font-size: 1.06rem; font-weight: 800; }
.predict-note { color: var(--ink-faint); font-size: 0.72rem; font-weight: 600; }

.log-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chip {
  border-radius: var(--r-lg);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 13px;
  line-height: 1.5;
}
.chip-on {
  background: var(--primary-container);
  border-color: var(--selection-border);
  color: var(--primary-dark);
  font-weight: 700;
}

.honesty-pill {
  display: table;
  margin: 40px auto 0;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 0.86rem;
  font-weight: 600;
}

/* ── همدل (signature) ────────────────────────────────────────────────── */
.hamdel {
  position: relative;
  --sh-swap: 2080ms;
  --sh-swap-ease: cubic-bezier(0.45, 0, 0.55, 1);
  background: linear-gradient(180deg, var(--bg) 0px, var(--hd-pale) 340px,
              var(--hd-pale) calc(100% - 220px), var(--bg) 100%);
}
.hamdel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 86% 10%, rgba(91, 127, 242, 0.08), transparent 68%),
    radial-gradient(520px 480px at 8% 62%, rgba(141, 130, 216, 0.07), transparent 70%),
    radial-gradient(480px 420px at 70% 100%, rgba(121, 184, 245, 0.07), transparent 72%);
  /* ease the tints in from برای خودت and out toward صادقانه — no visible seam */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 160px), transparent 100%);
}
.hamdel .container { position: relative; }
.hamdel .container > .sh-title,
.hamdel .container > .section-sub {
  text-align: center;
}
.hamdel .container > .section-sub { margin-inline: auto; }

/* headline: dual-mode emphasis (همدلت = blue, تو = pink) */
.sh-title em { font-style: normal; }
.sh-em-hd { color: var(--hd-primary); }
.sh-em-you { color: var(--primary); }

/* ── the sharing flow: three surfaces, one connected composition ── */
.sh-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.06fr) auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
  margin-top: 50px;
}

.sh-card {
  position: relative;
  border-radius: var(--r-2xl);
  padding: 20px 20px 22px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
/* pink → lavender → blue: the flow reads as a color journey */
.sh-you {
  background: linear-gradient(180deg, #fffdfe, #fff6fa);
  border-color: rgba(244, 91, 147, 0.22);
  box-shadow: 0 14px 34px rgba(244, 91, 147, 0.09), 0 2px 8px rgba(26, 18, 31, 0.04);
}
.sh-pick {
  background: linear-gradient(180deg, #fefdff, #faf8ff);
  border-color: rgba(141, 130, 216, 0.36);
  box-shadow: 0 18px 40px rgba(141, 130, 216, 0.15), 0 2px 8px rgba(26, 18, 31, 0.05);
  margin-top: -14px; /* the decision sits a notch above the flow — controlled asymmetry */
}
.sh-sees {
  background: linear-gradient(180deg, #fafcff, #f1f5ff);
  border-color: var(--hd-line);
  box-shadow: var(--shadow-card-hd);
  margin-top: 10px;
}

.sh-num {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
}
.sh-you .sh-num { background: var(--primary-container); color: var(--primary-dark); }
.sh-pick .sh-num { background: #efebff; color: #6a53c4; }
.sh-sees .sh-num { background: var(--hd-soft); color: var(--hd-deep); }

.sh-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-inline-end: 32px;
}
.sh-ic {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sh-ic svg { width: 19px; height: 19px; }
.sh-you .sh-ic { background: var(--primary-container); color: var(--primary); }
.sh-pick .sh-ic { background: #efebff; color: #6a53c4; }
.sh-sees .sh-ic { background: var(--hd-soft); color: var(--hd-primary); }
.sh-ic-hd-mark {
  width: 42.9px;
  height: 42.9px;
  background: currentColor;
  -webkit-mask: url("assets/hamdel-header-icon.webp") center / contain no-repeat;
  mask: url("assets/hamdel-header-icon.webp") center / contain no-repeat;
}
.sh-head h3 { font-size: 1.02rem; font-weight: 800; line-height: 1.5; }
.sh-head p { font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); margin-top: 1px; }
.sh-you .sh-head p {
  font-size: 0.62rem;
  line-height: 1.4;
  white-space: nowrap;
}

/* card ۱ — four compact private-data rows, no locks */
.sh-rows {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sh-rows li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 10px;
}
.sh-row-ic {
  width: 28.8px;
  height: 28.8px;
  object-fit: contain;
  flex: none;
  opacity: 0.8;
}
.sh-row-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sh-row-tx strong {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.sh-row-tx em {
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.45;
}

/* card ۲ — real consent scopes from the app */
.sh-scopes { margin-top: 6px; }
.sh-always {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  border: 1.5px dashed rgba(141, 130, 216, 0.42);
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--r-md);
  padding: 9px 12px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.sh-always svg { width: 15px; height: 15px; color: #6a53c4; flex: none; }
.sh-always strong {
  margin-inline-start: auto;
  font-size: 0.62rem;
  font-weight: 800;
  color: #6a53c4;
  background: #efebff;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

/* card ۳ — companion view, mirrors the toggles live */
.sh-plist {
  margin-top: 14px;
  display: grid;
}
.sh-plist-rows,
.sh-pempty {
  grid-area: 1 / 1;
  transition: opacity var(--sh-swap) var(--sh-swap-ease);
}
.sh-plist-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.sh-plist.is-empty .sh-plist-rows,
.sh-plist:not(.is-empty) .sh-pempty,
#scope-phase:not(:checked) ~ #scope-prediction:not(:checked) ~ #scope-hint:not(:checked) ~ .container .sh-plist-rows {
  opacity: 0;
  pointer-events: none;
}
#scope-phase:not(:checked) ~ #scope-prediction:not(:checked) ~ #scope-hint:not(:checked) ~ .container .sh-pempty,
.sh-plist.is-empty .sh-pempty {
  opacity: 1;
  pointer-events: auto;
}
.sh-prow {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--hd-line);
  border-radius: var(--r-lg);
  padding: 10px 13px;
  transition: border-color var(--sh-swap) var(--sh-swap-ease),
              background var(--sh-swap) var(--sh-swap-ease);
}
.sh-plabel {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--hd-deep);
  margin-bottom: 2px;
}
.sh-ptext {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--hd-deep);
  line-height: 1.7;
  transition: opacity var(--sh-swap) var(--sh-swap-ease);
}
.sh-ptext.is-off { color: var(--hd-ink-soft); }
.sh-ptext.sh-swap { opacity: 0; }
.sh-ptext.sh-swap-cut { transition: none; opacity: 0; }
.sh-prow.off,
#scope-phase:not(:checked) ~ .container [data-scope-view="phase"],
#scope-prediction:not(:checked) ~ .container [data-scope-view="prediction"],
#scope-hint:not(:checked) ~ .container [data-scope-view="hint"] {
  background: transparent;
  border: 1.5px dashed var(--hd-line);
}
.sh-pempty {
  align-self: center;
  text-align: center;
  color: var(--hd-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 2;
  padding-block: 22px;
  opacity: 0;
  pointer-events: none;
}

/* dashed connectors — flow direction is rightـtoـleft (RTL forward) */
.sh-link { position: relative; width: 44px; align-self: center; }
.sh-link svg { display: block; width: 100%; height: auto; }
.sh-link-a { color: rgba(244, 91, 147, 0.5); }
.sh-link-b { color: rgba(91, 127, 242, 0.55); }
.sh-dot {
  position: absolute;
  top: 50%;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--hd-primary);
  box-shadow: 0 0 0 4px rgba(91, 127, 242, 0.16);
  opacity: 0;
  transform: translate(0, -50%);
  pointer-events: none;
}
.sh-dot.go { animation: sh-travel 0.75s var(--ease); }
@keyframes sh-travel {
  0% { opacity: 0; transform: translate(0, -50%); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-34px, -50%); }
}

/* trust: heading + three privacy cards */
.sh-trust { text-align: center; margin-top: 176px; }
.sh-trust-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: clamp(1.2rem, 1.4vw + 0.7rem, 1.55rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.5;
}
.sh-trust-ic {
  width: 52px;
  height: 36px;
  object-fit: contain;
  flex: none;
  opacity: 0.85;
}
.sh-trust-sub { margin-top: 8px; color: var(--ink-soft); font-size: 1rem; font-weight: 500; }

.sh-chips {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: none;
}
.sh-chips li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--hd-line);
  border-radius: var(--r-xl);
  padding: 18px 18px 16px;
  box-shadow: 0 8px 22px rgba(26, 18, 31, 0.04);
}
.sh-chips li > div { min-width: 0; flex: 1; }
.sh-chip-ic {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex: none;
  opacity: 0.85;
}
.sh-chips strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 40px;
  white-space: nowrap;
}
.sh-chips span {
  display: block;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-top: 0;
  white-space: nowrap;
}

/* contextual continuation band — slim, not a hero CTA */
.sh-band {
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 255, 255, 0.72);
  border: 1.5px solid var(--hd-line);
  border-radius: var(--r-2xl);
  padding: 16px 22px;
  margin: 38px auto 0;
  max-width: 720px;
  box-shadow: 0 10px 30px rgba(91, 127, 242, 0.08);
}
.sh-band-art { width: 54px; flex: none; display: inline-flex; }
.sh-band-art svg { width: 100%; height: auto; }
.sh-band-txt { flex: 1; min-width: 0; }
.sh-band-txt strong { display: block; font-size: 1rem; font-weight: 800; color: var(--hd-deep); }
.sh-band-txt span { display: block; font-size: 0.82rem; font-weight: 600; color: var(--hd-ink-soft); margin-top: 2px; }
.sh-band .btn { padding: 12px 22px; font-size: 0.94rem; flex: none; }
.sh-band .btn svg { width: 15px; height: 15px; }

/* entrance rhythm: you → choose → companion, then the trust layer */
html.js .sh-link-a.reveal { transition-delay: 80ms; }
html.js .sh-pick.reveal { transition-delay: 150ms; }
html.js .sh-link-b.reveal { transition-delay: 230ms; }
html.js .sh-sees.reveal { transition-delay: 300ms; }
html.js .sh-chips.reveal { transition-delay: 120ms; }

.scope-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 2px;
}
.scope-row + .scope-row { border-top: 1px solid var(--line); }
.scope-row img { width: 42px; height: 42px; flex: none; }
.scope-meta { flex: 1; min-width: 0; }
.scope-meta label { font-weight: 800; font-size: 0.82rem; cursor: pointer; display: block; }
.scope-meta p {
  color: var(--ink-faint);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1px;
  white-space: nowrap;
}

.sh-scope-io {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* AppSwitch replica (36×20 → 40×22 web) */
.switch { position: relative; flex: none; display: inline-flex; cursor: pointer; }
.switch input {
  position: absolute;
  inset: -6px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.switch .track {
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-muted);
  border: 1px solid var(--line);
  transition: background var(--t-normal) ease, border-color var(--t-normal) ease;
  position: relative;
  display: block;
  pointer-events: none;
}
.switch .thumb {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1.5px 4px rgba(26, 18, 31, 0.22);
  transform: translate(0, -50%);
  transition: transform var(--t-normal) var(--spring);
  display: block;
}
.switch input:checked ~ .track { background: var(--primary); border-color: var(--primary); }
.switch input:checked ~ .track .thumb { transform: translate(19px, -50%); }
.switch input:focus-visible ~ .track,
#scope-phase:focus-visible ~ .container label.switch[for="scope-phase"] .track,
#scope-prediction:focus-visible ~ .container label.switch[for="scope-prediction"] .track,
#scope-hint:focus-visible ~ .container label.switch[for="scope-hint"] .track {
  outline: 2.5px solid var(--primary);
  outline-offset: 3px;
}
#scope-phase:checked ~ .container label.switch[for="scope-phase"] .track,
#scope-prediction:checked ~ .container label.switch[for="scope-prediction"] .track,
#scope-hint:checked ~ .container label.switch[for="scope-hint"] .track {
  background: var(--primary);
  border-color: var(--primary);
}
#scope-phase:checked ~ .container label.switch[for="scope-phase"] .thumb,
#scope-prediction:checked ~ .container label.switch[for="scope-prediction"] .thumb,
#scope-hint:checked ~ .container label.switch[for="scope-hint"] .thumb {
  transform: translate(19px, -50%);
}

/* ── شروع — the final conversion moment ─────────────────────────────── */
.start { padding-bottom: 110px; }
.start-head { text-align: center; }
.start-head h2 { text-align: center; }
.start-head h2 em { font-style: normal; color: var(--primary); }
.start-head .section-sub {
  margin-inline: auto;
  text-align: center;
  max-width: 36em;
}

/* three light steps: reassurance («starting is easy»), not education */
.flow {
  list-style: none;
  padding: 0;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1040px;
}
.flow-step { position: relative; text-align: center; padding-inline: 10px; }
.flow-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 28px;
  /* RTL: leave this badge, run toward the next step */
  inset-inline-start: calc(50% + 39px);
  inset-inline-end: calc(-50% + 39px);
  border-top: 2px dashed rgba(244, 91, 147, 0.32);
}
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25px;
  /* solid pink origin, then dashes — same as the mockup */
  inset-inline-start: calc(50% + 36px);
  inset-inline-end: auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 2px var(--bg);
}
.fs-badge {
  position: relative;
  width: 57px;
  height: 57px;
  margin-inline: auto;
  border-radius: 999px;
  background: var(--surface);
  border: 1.5px solid var(--selection-border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(244, 91, 147, 0.1);
}
.fs-badge svg { width: 24px; height: 24px; }
.fs-badge b {
  position: absolute;
  top: -5px;
  inset-inline-end: auto;
  inset-inline-start: -7px;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2.5px var(--bg);
}
.flow-step h3 {
  margin-top: 13px;
  font-size: 0.99rem;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}
.flow-step p {
  margin: 4px auto 0;
  max-width: none;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.9;
  text-align: center;
  white-space: nowrap;
}

/* the conversion panel: one calm surface, one action */
.convert {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  margin-top: 48px;
  background:
    radial-gradient(520px 300px at 12% 110%, rgba(244, 91, 147, 0.1), transparent 70%),
    linear-gradient(150deg, #fffdfe, #fdf0f6);
  border: 1.5px solid rgba(244, 91, 147, 0.16);
  border-radius: var(--r-3xl);
  padding: 18px 56px 8px;
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(244, 91, 147, 0.11), 0 3px 12px rgba(26, 18, 31, 0.04);
}
/* the flower field — full art, anchored left; its right edge fades into the panel */
.convert::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-14.5% + 170px);
  height: 80%;
  aspect-ratio: 996 / 585;
  transform: translateY(calc(-50% + 10px));
  background: url("assets/convert-bg.webp") center / cover no-repeat;
  -webkit-mask-image:
    radial-gradient(ellipse 96% 80% at 56% 50%, #000 42%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 90%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 96% 80% at 56% 50%, #000 42%, transparent 80%),
    linear-gradient(to right, transparent 0%, #000 8%, #000 90%, #000 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
/* copy + device always paint above the bloom (mobile `order:-1` reorders painting too) */
.cv-copy { position: relative; z-index: 1; text-align: center; transform: translateY(-10px); }
.cv-copy h3 { font-size: clamp(1.35rem, 1.6vw + 0.6rem, 1.7rem); font-weight: 900; }
.cv-cta { margin-top: 22px; padding: 16px 40px; font-size: 1.1rem; font-weight: 400; }
.cv-cta svg { width: 18px; height: 18px; }
.cv-trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 13px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.7;
}
.cv-trial em { font-style: normal; color: var(--primary); font-weight: 600; }
.cv-trial svg { width: 16px; height: 16px; color: var(--primary); flex: none; }
.cv-hamdel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 28px;
  padding-top: 24px;
}
.cv-hamdel::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: 16%;
  height: 1px;
  background: linear-gradient(
    to left,
    transparent,
    var(--ink-faint) 22%,
    var(--ink-faint) 78%,
    transparent
  );
  opacity: 0.12;
}
.cv-hamdel span { color: var(--ink); font-size: 0.9rem; font-weight: 800; }
.cv-hamdel a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--hd-primary);
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transform: translateX(-10px);
}
.cv-hamdel a svg { width: 14px; height: 14px; }
.cv-hamdel a:hover { color: #4a6de0; }

/* owner cycle mock — same device as duo / برای‌خودت */
.cv-media { position: relative; z-index: 1; height: 370px; min-width: 0; overflow: hidden; }
.cv-media::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 23%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(253, 240, 246, 0.3) 16%,
    #fdf0f6 52%,
    #fdf0f6 100%
  );
  pointer-events: none;
  z-index: 3;
}
.cv-owner {
  position: absolute;
  left: calc(8% + 40px);
  top: 28px;
  width: 252px;
  transform: scale(0.8);
  transform-origin: top left;
}
.cv-owner .fy-device { width: 100%; }
.cv-owner .dwc b { font-size: 10.5px; }
.cv-owner .ring-day { font-size: 11px; line-height: 1.15; }
.cv-owner .ring-phase { font-size: 7.5px; }
.cv-owner .cycle-ui:has(.ring-cta) .ring-lotus { width: 34%; }
.cv-owner .ring-cta { margin-top: 6px; padding: 4px 8px; }
.cv-owner .ring-cta span { font-size: 8px; line-height: 11px; }
.cv-owner .ring-cta svg { width: 9px; height: 9px; margin-left: 3px; }
.cv-owner .cycle-ui .ring-chip {
  left: calc(-18% + 20px);
  top: calc(100% - 42px);
  transform: scale(0.56);
  transform-origin: top left;
}
.cv-owner .cycle-ui .dcs-legend {
  transform: scale(0.75);
  transform-origin: center top;
}
.cv-owner .tmc {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 42%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 42%);
}

/* ── legal pages (شرایط و قوانین / حریم خصوصی) ──────────────────────── */
.legal {
  padding: 136px 0 72px; /* clears the fixed nav */
  background: radial-gradient(640px 260px at 80% -60px, rgba(244, 91, 147, 0.07), transparent 70%);
}
.legal-head { max-width: 760px; margin-inline: auto; }
.legal-head h1 { font-size: clamp(1.72rem, 3.2vw, 2.16rem); font-weight: 800; color: var(--ink); }
.legal-meta {
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 2;
}
.legal-meta a { color: var(--primary-dark); font-weight: 600; text-decoration: none; }
.legal-meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.legal-toc {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.legal-toc a {
  padding: 9px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.legal-toc a:hover {
  color: var(--primary-dark);
  border-color: rgba(244, 91, 147, 0.4);
  background: var(--chip-bg);
}
.legal-body {
  max-width: 760px;
  margin: 14px auto 0;
}
.legal-body h2 {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  font-size: 1.14rem;
  font-weight: 800;
  color: var(--ink);
  scroll-margin-top: 110px; /* anchor jumps clear the fixed nav */
}
.legal-body h2::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(244, 91, 147, 0.45);
}
.legal-body p {
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 2.15;
}
.legal-body p strong { color: var(--ink); font-weight: 700; }
.legal-body ul {
  margin: 12px 0 0;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal-body li {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 2.1;
}
.legal-body li::marker { color: var(--primary); }
.legal-cross {
  margin-top: 20px !important;
  padding: 13px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 0.8rem !important;
}
.legal-cross a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.legal-cross a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .legal { padding-top: 116px; }
}

/* ── terms.html premium reading layout (privacy stays on .legal) ─────── */
.pg-terms {
  --ld-nav-h: 72px;
  --ld-hero-h: 140px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--hd-pale) 100%);
}
.ld {
  padding-top: var(--ld-nav-h);
  padding-bottom: 72px;
}

.ld-hero {
  position: sticky;
  top: var(--ld-nav-h);
  z-index: 40;
  padding: 10px 0 12px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid rgba(240, 228, 236, 0.85);
  box-shadow: 0 8px 18px rgba(26, 18, 31, 0.04);
}
.ld-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(420px 220px at 12% 18%, rgba(244, 91, 147, 0.12), transparent 70%),
    radial-gradient(380px 220px at 88% 22%, rgba(140, 107, 255, 0.1), transparent 72%);
}
.ld-hero h1 {
  position: relative;
  font-size: clamp(1.36rem, 2.4vw, 1.72rem);
  font-weight: 700;
  color: var(--ink);
}
.ld-updated {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.ld-updated svg {
  width: 15px;
  height: 15px;
  color: var(--primary);
}

.ld-shell {
  display: grid;
  grid-template-columns: minmax(0, 780px) 248px;
  grid-template-areas: "main rail";
  gap: 28px;
  align-items: start;
  justify-content: center;
  max-width: 1220px;
  margin-top: 16px;
}
.ld-rail {
  position: sticky;
  top: calc(var(--ld-nav-h) + var(--ld-hero-h) + 12px);
  grid-area: rail;
}
.ld-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 14px 14px;
  box-shadow: 0 8px 22px rgba(26, 18, 31, 0.035);
}
.ld-toc h2 {
  margin: 0;
  padding: 0 10px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink);
}
.ld-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.ld-toc ol::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  inset-inline-end: 15px;
  width: 2px;
  background: var(--line);
  border-radius: 99px;
  pointer-events: none;
}
.ld-toc a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  padding-inline-end: 28px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  transition: background 180ms ease, color 180ms ease;
}
.ld-toc a::after {
  content: "";
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 999px;
  background: var(--line);
  box-shadow: 0 0 0 3px var(--surface);
  z-index: 1;
}
.ld-toc-ic {
  display: flex;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-faint);
}
.ld-toc-ic svg { width: 18px; height: 18px; }
.ld-toc a:hover { background: var(--chip-bg); color: var(--ink); }
.ld-toc a.is-active {
  background: var(--chip-bg);
  color: var(--primary);
  font-weight: 700;
}
.ld-toc a.is-active .ld-toc-ic { color: var(--primary); }
.ld-toc a.is-active::after {
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--chip-bg);
}

.ld-help {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--selection-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.ld-help:hover { border-color: rgba(244, 91, 147, 0.45); transform: translateY(-1px); }
.ld-help-row { display: contents; }
.ld-help-ic { width: 22px; height: 22px; opacity: 0.85; }
.ld-help strong { font-size: 0.8rem; font-weight: 800; color: var(--ink); }
.ld-help-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  grid-column: 2;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary-dark);
}
.ld-help-cta svg { width: 13px; height: 13px; }

.ld-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; grid-area: main; }
.ld-loading,
.ld-error {
  margin: 0;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 2;
  text-align: center;
}
.ld-error { color: var(--ink); }
.ld-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 36px 32px;
  box-shadow: 0 8px 22px rgba(26, 18, 31, 0.035);
}
.ld-sec {
  scroll-margin-top: calc(var(--ld-nav-h) + var(--ld-hero-h) + 12px);
  padding-block: 0;
}
.ld-card > .ld-sec:first-child {
  margin-top: 0;
  padding-top: 0;
}
.ld-sec:not(:last-child) {
  padding-bottom: 7px;
}
.ld-sec + .ld-sec {
  margin-top: 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.ld-sec h2 {
  margin: 0;
  padding: 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.ld-sec h2::after {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(244, 91, 147, 0.45);
}
.ld-sec p {
  margin-top: 16px;
  margin-bottom: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 2;
}
.ld-sec p:first-of-type { margin-top: 16px; }
.ld-sec p strong { color: var(--ink); font-weight: 700; }
.ld-sec ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ld-sec > :last-child { margin-bottom: 0; }
.ld-sec li {
  position: relative;
  padding-inline-start: 18px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 2;
}
.ld-sec li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
}

.ld-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--chip-bg);
  border: 1px solid var(--selection-border);
  border-radius: 8px;
}
.ld-callout svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--primary); }
.ld-callout p { margin: 0; font-size: 0.82rem; color: var(--ink); line-height: 2; font-weight: 600; }

.ld-cross {
  margin-top: 18px;
  padding: 13px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.78rem !important;
}
.ld-cross a { color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.ld-cross a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .ld-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 780px;
  }
  .ld-rail { position: static; display: contents; grid-area: auto; }
  .ld-toc { order: -1; padding: 14px 12px; }
  .ld-toc h2 { display: none; }
  .ld-toc ol {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .ld-toc ol::before { display: none; }
  .ld-toc ol::-webkit-scrollbar { display: none; }
  .ld-toc a {
    flex: none;
    white-space: nowrap;
    padding: 8px 12px;
    border-bottom: 2px solid transparent;
    border-radius: 999px;
  }
  .ld-toc a::after { display: none; }
  .ld-toc a.is-active { border-bottom-color: var(--primary); }
  .ld-help { order: 2; margin-top: 0; }
  .ld-main { order: 1; grid-area: auto; }
}
@media (max-width: 640px) {
  .ld-hero { padding: 8px 0 10px; }
  .ld-hero h1 { font-size: 1.28rem; }
  .ld-card { padding: 20px 20px 22px; border-radius: 9px; }
  .ld-sec p,
  .ld-sec li { font-size: 0.76rem; line-height: 1.95; }
  .ld-sec h2 { font-size: 1.02rem; }
  .ld { padding-bottom: 48px; }
}

/* ── contact page (تماس با ما) ───────────────────────────────────────── */
.ct {
  position: relative;
  overflow: hidden;
  padding: 128px 0 56px;
}
.ct-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 280px at 12% 8%, rgba(244, 91, 147, 0.1), transparent 70%),
    radial-gradient(460px 260px at 92% 6%, rgba(140, 107, 255, 0.08), transparent 72%);
}
.ct-petal {
  position: absolute;
  width: min(38vw, 320px);
  height: auto;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.ct-petal-start { top: 64px; inset-inline-start: -6%; }
.ct-petal-end {
  top: 96px;
  inset-inline-end: -8%;
  transform: scaleX(-1);
}
.ct > .container {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

.ct-head { max-width: 560px; margin-inline: auto; text-align: center; padding-bottom: 48px; }
.ct-head h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.35;
}
.ct-head h1::after {
  content: "";
  display: block;
  width: calc(100% - 20px);
  height: 3px;
  margin: 22px auto 0;
  border-radius: 999px;
  background: rgba(244, 91, 147, 0.45);
}
.ct-sub {
  margin-top: 24px;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 2;
}

.ct-cards {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ct-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 152px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: 0 10px 28px rgba(26, 18, 31, 0.045);
  color: inherit;
  text-decoration: none;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease);
}
a.ct-card { cursor: pointer; }
a.ct-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(26, 18, 31, 0.07);
  border-color: var(--selection-border);
}
a.ct-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}
.ct-card-hd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ct-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--primary);
}
.ct-ic svg { width: 22px; height: 22px; }
.ct-card h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}
.ct-val {
  display: block;
  margin-top: 14px;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
}
a.ct-card .ct-val { color: var(--primary-dark); }
.ct-card p {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.95;
}

.ct-route,
.ct-social { padding-block: 0; }
.ct-route {
  margin-top: 64px;
  padding: 22px 18px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 22px;
  text-align: start;
}
.ct-route h2 {
  margin: 0 8px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}
.ct-route h2::after {
  content: "";
  display: block;
  width: calc(100% - 20px);
  height: 3px;
  margin: 20px auto 0;
  border-radius: 999px;
  background: rgba(244, 91, 147, 0.45);
}
.ct-route ul {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ct-route a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}
.ct-route a:hover {
  border-color: var(--selection-border);
  background: var(--chip-bg);
}
.ct-route a:hover .ct-route-tx strong { font-weight: 800; }
.ct-route a:hover .ct-route-ic { color: var(--primary); }
.ct-route a:hover .ct-route-ar { color: var(--primary-dark); transform: translateX(-3px); }
.ct-route a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ct-route-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--selection-border);
  color: var(--primary);
}
.ct-route-ic svg { width: 20px; height: 20px; }
.ct-route-tx { flex: 1; min-width: 0; }
.ct-route-tx strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.ct-route-tx small {
  display: block;
  margin-top: 3px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  line-height: 1.9;
}
.ct-route-ar {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--ink-faint);
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}

.ct-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 80px;
  margin-top: 40px;
  padding: 16px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: 0 8px 22px rgba(26, 18, 31, 0.035);
}
.ct-social h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--ink);
}
.ct-social ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 10px; }
.ct-social ul a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--primary);
  transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease);
}
.ct-social ul a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.ct-social ul a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.ct-social ul svg { width: 18px; height: 18px; }

@media (max-width: 640px) {
  .ct { padding: 112px 0 40px; }
  .ct > .container { padding-inline: 18px; }
  .ct-head { padding-bottom: 32px; }
  .ct-head h1 { font-size: 1.8rem; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct-card { min-height: 128px; padding: 18px 20px; }
  .ct-route { margin-top: 48px; padding: 18px 12px 12px; }
  .ct-social {
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    margin-top: 32px;
    padding: 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  a.ct-card:hover { transform: none; }
}

/* ── report page (گزارش مشکل) ────────────────────────────────────────── */
.rp {
  padding: 136px 0 72px;
  background: radial-gradient(640px 260px at 20% -60px, rgba(244, 91, 147, 0.07), transparent 70%);
}
.rp-head { max-width: 640px; margin-inline: auto; text-align: center; }
.rp-head h1 { font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 900; color: var(--ink); }
.rp-sub { margin-top: 12px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); line-height: 2; }
.rp-grid {
  max-width: 640px;
  margin: 30px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rp-card {
  margin: 0;
  padding: 26px 26px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: 0 16px 40px rgba(26, 18, 31, 0.06);
}

/* category chips */
.rp-cats { margin: 0; padding: 0; border: 0; }
.rp-cats legend { padding: 0; font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.rp-chiprow {
  margin-top: 12px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rp-chiprow::-webkit-scrollbar { display: none; }
.rp-chip { position: relative; flex: 1 1 0; min-width: 0; }
.rp-chip input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.rp-chip span {
  display: block;
  padding: 7px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.rp-chip input:checked + span {
  background: var(--primary-container);
  border-color: rgba(244, 91, 147, 0.45);
  color: var(--primary-dark);
}
.rp-chip input:focus-visible + span {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* fields */
.rp-field { margin-top: 22px; }
.rp-field label { display: block; font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.rp-field label em { font-style: normal; font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); }
.rp-field textarea,
.rp-field input {
  width: 100%;
  margin-top: 9px;
  padding: 13px 15px;
  background: #fffdfe;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  font: inherit;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.9;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rp-field textarea { resize: vertical; min-height: 150px; }
.rp-field textarea:focus,
.rp-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(244, 91, 147, 0.14);
}
.rp-field textarea::placeholder,
.rp-field input::placeholder {
  color: var(--ink-faint);
  font-size: 0.8rem;
}
.rp-field .is-invalid { border-color: #d14343; }
.rp-meta-row {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.rp-error { font-size: 0.8rem; font-weight: 700; color: #d14343; }
.rp-count { margin-inline-start: auto; font-size: 0.78rem; font-weight: 600; color: var(--ink-faint); }

/* honeypot — parked far off-screen, still focusable-by-bots */
.rp-hp {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rp-actions {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rp-submit {
  min-width: 150px;
  font-family: inherit;
  font-weight: 800;
}
.rp-send-ic {
  width: 17px;
  height: 17px;
  flex: none;
  transform: scaleX(-1);
}
.rp-submit[disabled] { opacity: 0.6; pointer-events: none; }
.rp-status { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.rp-status.is-err { color: #d14343; }

/* success panel */
.rp-done {
  padding: 36px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  box-shadow: 0 16px 40px rgba(26, 18, 31, 0.06);
  text-align: center;
  outline: none;
}
.rp-done-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--primary-container);
  color: var(--primary-dark);
}
.rp-done-ic svg { width: 26px; height: 26px; }
.rp-done h2 { margin-top: 16px; font-size: 1.3rem; font-weight: 900; color: var(--ink); }
.rp-done p { margin-top: 10px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); line-height: 2.1; }
.rp-code code {
  direction: ltr;
  display: inline-block;
  margin-inline-start: 6px;
  padding: 7px 12px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.rp-done-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* in-app alternative note */
.rp-note {
  padding: 14px 18px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  line-height: 2;
}
.rp-note p { margin: 0; }
.rp-note p + p { margin-top: 2px; }
@media (max-width: 640px) {
  .rp { padding-top: 116px; }
  .rp-card { padding: 20px 18px 24px; }
  .rp-chip span { padding: 6px 7px; font-size: 0.64rem; }
}

/* ── download page (دریافت اپ) ───────────────────────────────────────── */
.dl-hero {
  position: relative;
  padding: 138px 0 6px; /* clears the fixed nav, same as the landing hero */
  text-align: center;
  background: radial-gradient(640px 280px at 24% -40px, rgba(244, 91, 147, 0.09), transparent 70%);
}
.dl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.dl-eyebrow img { width: 17px; height: auto; }
.dl-hero h1 {
  margin-top: 20px;
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.5;
}
.dl-sub {
  margin: 12px auto 0;
  max-width: 520px;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 2;
}
.dl-lotus {
  position: absolute;
  top: 96px;
  inset-inline-start: 7%;
  width: 148px;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 10px 22px rgba(244, 91, 147, 0.16));
}

/* get: interaction (right) + real product (left) */
.dl-get { padding: 40px 0 10px; }
.dl-get-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 64px;
  align-items: center;
}
.dl-panel h2 { font-size: 1.4rem; font-weight: 900; color: var(--ink); }
.dl-panel-sub { margin-top: 8px; color: var(--ink-soft); font-size: 0.95rem; }
.dl-seg {
  margin-top: 22px;
  display: flex;
  max-width: 340px;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(26, 18, 31, 0.04);
}
.dl-seg-btn {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 11px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.dl-seg-btn.is-on {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: var(--on-primary);
  box-shadow: 0 6px 16px rgba(244, 91, 147, 0.3);
}
.dl-hint { margin-top: 12px; font-size: 0.82rem; font-weight: 600; color: var(--ink-faint); }
.dl-pane { margin-top: 18px; }
.dl-pane-in { animation: dl-in 320ms var(--ease); }
@keyframes dl-in {
  from { opacity: 0; transform: translateY(8px); }
}

.dl-os {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink);
}
.dl-os svg { width: 19px; height: 19px; color: #6BAB5C; }

.dl-store {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.dl-store:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 91, 147, 0.35);
  box-shadow: 0 10px 26px rgba(26, 18, 31, 0.07);
}
.dl-store-ic {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dl-store-ic svg { width: 24px; height: 24px; }
.dl-ic-bazaar { background: #EAF6E4; color: #57A44B; }
.dl-ic-myket { background: #E7F2FE; color: #3A9AF0; }
.dl-store-tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dl-store-tx i { font-style: normal; font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); }
.dl-store-tx b { font-size: 1.05rem; font-weight: 900; color: var(--ink); }
.dl-store-ar { width: 15px; height: 15px; color: var(--ink-faint); transition: transform 180ms var(--ease), color 180ms var(--ease); }
.dl-store:hover .dl-store-ar { transform: translateX(-3px); color: var(--primary-dark); }

.dl-ios {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  padding: 11px 14px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.dl-ios svg { width: 16px; height: 16px; color: #6B6572; flex: none; }
.dl-ios-web {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 800;
  color: var(--primary-dark);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dl-web {
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  text-align: center;
  box-shadow: 0 2px 14px rgba(26, 18, 31, 0.04);
}
.dl-web-ic {
  width: 54px;
  height: 54px;
  margin-inline: auto;
  border-radius: 999px;
  background: #FDEFF5;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-web-ic svg { width: 25px; height: 25px; }
.dl-web h3 { margin-top: 12px; font-size: 1.15rem; font-weight: 900; color: var(--ink); }
.dl-web p { margin-top: 6px; color: var(--ink-soft); font-size: 0.92rem; }
.dl-web-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; }
.dl-web-cta svg { width: 16px; height: 16px; }
.dl-web .dl-web-note { margin-top: 12px; color: var(--ink-faint); font-size: 0.8rem; }

.dl-media { position: relative; display: flex; justify-content: center; }
.dl-media::before {
  content: "";
  position: absolute;
  inset: 6% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 91, 147, 0.13), transparent);
}

/* quick access + reassurance */
.dl-quick { padding: 30px 0 6px; }
.dl-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.55fr;
  gap: 14px;
  align-items: stretch;
}
.dl-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 800;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
}
.dl-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(244, 91, 147, 0.35);
  box-shadow: 0 8px 20px rgba(26, 18, 31, 0.06);
}
.dl-chip-ic {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #FDEFF5;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.dl-chip-ic svg { width: 17px; height: 17px; }
.dl-safe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF5FA, #FDEFF5);
  border: 1px solid rgba(244, 91, 147, 0.18);
  border-radius: var(--r-xl);
}
.dl-safe strong { display: block; font-size: 0.9rem; font-weight: 800; color: var(--ink); }
.dl-safe div span { display: block; margin-top: 2px; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); line-height: 1.8; }

/* why */
.dl-why { padding: 44px 0 6px; }
.dl-why h2, .dl-install h2, .dl-faq h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ink);
}
.dl-why-list {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dl-why-list li {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
}
.dl-why-ic {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #FDEFF5;
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-why-ic svg { width: 21px; height: 21px; }
.dl-why-list h3 { margin-top: 13px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.dl-why-list p { margin-top: 6px; font-size: 0.87rem; color: var(--ink-soft); line-height: 1.95; }

/* install */
.dl-install { padding: 46px 0 0; }
.dl-install-note {
  margin-top: 28px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-faint);
}

/* faq */
.dl-faq { padding: 48px 0 64px; }
.dl-faq-list {
  max-width: 680px;
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.dl-faq-list details {
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
}
.dl-faq-list summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--ink);
}
.dl-faq-list summary::-webkit-details-marker { display: none; }
.dl-faq-list summary svg { width: 15px; height: 15px; color: var(--ink-faint); flex: none; transition: transform 200ms var(--ease); }
.dl-faq-list details[open] summary svg { transform: rotate(180deg); }
.dl-faq-list details p { padding-bottom: 16px; font-size: 0.9rem; color: var(--ink-soft); line-height: 2; }

@media (max-width: 1024px) {
  .dl-get-grid { grid-template-columns: 1fr; gap: 44px; }
  .dl-media { order: -1; }
  .dl-panel { max-width: 560px; margin-inline: auto; width: 100%; }
  .dl-lotus { width: 108px; inset-inline-end: 3%; opacity: 0.6; }
  .dl-quick-grid { grid-template-columns: 1fr 1fr; }
  .dl-safe { grid-column: 1 / -1; }
  .dl-why-list { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 640px) {
  .dl-hero { padding-top: 118px; }
  .dl-lotus { display: none; }
  .dl-quick-grid { grid-template-columns: 1fr; }
  .dl-seg { max-width: none; }
}

/* ── footer — full-bleed surface, same treatment as the top of the page ── */
.footer {
  margin-top: 26px;
  border-top: 1px solid rgba(240, 228, 236, 0.8);
  background: linear-gradient(176deg, #fffdfe, #fdf1f7);
  padding-top: 28px;
}
.footer > .container { padding-inline: 14px; }
.ft-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.95fr;
  gap: 40px;
  padding-bottom: 36px;
}

/* brand — visually dominant, right side in RTL */
.ft-brand { max-width: 300px; }
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ft-logo .ft-wordmark { display: block; width: 86px; height: auto; }
.ft-col-ic {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex: none;
  opacity: 0.8;
}
.ft-desc {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 2;
}
.ft-app {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-size: 0.86rem;
  font-weight: 700;
}
.ft-app-ic { width: 18.7px; height: 18.7px; }
.ft-app-ar { width: 13px; height: 13px; transition: transform var(--t-fast, 120ms) ease; }
.ft-app:hover .ft-app-ar { transform: translateX(-3px); }
.ft-social {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
.ft-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fdeff5;
  color: var(--primary);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.ft-social a svg { width: 19px; height: 19px; }
.ft-social a:hover {
  background: var(--primary);
  color: var(--on-primary);
  transform: translateY(-2px);
}

/* nav columns */
.ft-col h3,
.ft-trust h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
}
.ft-col h3 > span,
.ft-trust h3 > span { min-width: 0; }
.ft-col h3 > span::after,
.ft-trust h3 > span::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  margin-top: 9px;
  border-radius: 999px;
  background: rgba(244, 91, 147, 0.45);
}
.ft-col ul {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.ft-col a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 160ms ease;
}
.ft-col a svg {
  width: 13px;
  height: 13px;
  order: -1;
  color: rgba(244, 91, 147, 0.45);
  transition: transform 160ms ease, color 160ms ease;
}
.ft-col a:hover { color: var(--primary-dark); }
.ft-col a:hover svg { color: var(--primary); transform: translateX(3px); }

/* official trust — compact, isolated; placeholder until the real eNAMAD badge lands */
.ft-trust > img {
  display: block;
  margin-top: 16px;
  width: 156px;
  height: auto;
  transform: translate(10px, -16px);
}

/* utility row */
.ft-bottom {
  border-top: 1px solid rgba(240, 228, 236, 0.8);
  padding: 10px 0 0;
  text-align: center;
}
.ft-bottom p {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.9;
}

@media (max-width: 980px) {
  .footer { padding-top: 20px; }
  .ft-grid { grid-template-columns: repeat(3, 1fr); gap: 34px 24px; }
  .ft-brand { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 640px) {
  .footer { padding-top: 14px; }
  .footer > .container { padding-inline: 10px; }
  .ft-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; padding-bottom: 28px; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-bottom { padding: 8px 0 0; }
}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* sharing flow stacks: cards keep the ۱→۲→۳ order, connectors turn vertical */
  .sh-stage { grid-template-columns: 1fr; row-gap: 10px; justify-items: center; margin-top: 44px; }
  .sh-card { width: min(100%, 470px); }
  .sh-pick, .sh-sees { margin-top: 0; }
  .sh-link { width: auto; height: 30px; }
  .sh-link svg { display: none; }
  .sh-link::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 2px;
    bottom: 2px;
    border-inline-start: 2.4px dashed currentColor;
    opacity: 0.75;
  }
  .sh-dot { display: none; }
}

@media (max-width: 900px) {
  section { padding-block: 72px; }
  .hero { padding-top: 122px; padding-bottom: 64px; }
  /* mobile priority: headline → ring → CTA → trust */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "actions" "trust";
    gap: 0;
  }
  .hero-copy { text-align: center; }
  /* centered headline: keep the petal beside the first line's start */
  .h1-bloom { inset-inline-start: calc(50% - 6.9em); top: -0.5em; }
  .hero-visual { margin-top: 40px; }
  .hero-actions { margin-top: 36px; display: flex; justify-content: center; }
  .hero-sub { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-trust { margin-top: 44px; gap: 10px; padding: 12px 14px; }
  /* conversion panel recomposes: product visual first, then the ask */
  .convert { grid-template-columns: 1fr; padding: 4px 26px 0; text-align: center; gap: 6px; }
  .cv-media {
    order: -1;
    height: 390px;
    margin-bottom: 8px;
  }
  .cv-owner {
    left: calc(50% + 40px);
    width: min(78vw, 280px);
    transform: translateX(-50%) scale(0.8);
    transform-origin: top center;
  }
  .convert::before { left: 50%; top: 50%; height: 50%; transform: translate(calc(-54% + 170px), calc(-50% + 10px)); }
  .cv-cta { width: 100%; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .sh-chips { grid-template-columns: 1fr; max-width: 420px; }
  .sh-chips li { border-radius: var(--r-lg); }
  .sh-band { flex-direction: column; text-align: center; gap: 12px; padding: 22px 20px; }
  .sh-band-txt strong { font-size: 0.98rem; }
  .sh-band .btn { width: 100%; justify-content: center; }
  .hero-visual .hero-ring { width: min(88vw, 380px); margin-bottom: 58px; }
  .hero-visual .ring-chip { left: 0; top: calc(100% - 38px); }
  /* keep «تخمک‌گذاری» clear of the chip on narrow screens */
  .rl-ov { left: 60%; top: 97.5%; }
  .ring-num { font-size: 0.68rem; }
  .ring-day { font-size: 1.28rem; }
  .ring-lotus { width: 56%; margin-bottom: 4px; }
  /* small screens: keep only the top/bottom anchors so labels never clip */
  .rl-fertile, .rl-pms { display: none; }
  /* trust hint stacks into three slim rows */
  .hero-trust { grid-template-columns: 1fr; gap: 0; padding: 6px 16px; }
  .hero-trust li { justify-content: flex-start; padding-block: 9px; }
  .hero-trust li + li { border-inline-start: none; border-top: 1px solid var(--line); }
  /* onboarding flow turns vertical: badge rail + copy */
  .flow { grid-template-columns: 1fr; gap: 20px; max-width: 340px; }
  .flow-step {
    display: grid;
    grid-template-columns: 57px 1fr;
    column-gap: 14px;
    text-align: start;
    padding-inline: 0;
  }
  .fs-badge { margin-inline: 0; grid-row: 1 / span 2; align-self: start; }
  .flow-step h3 { grid-column: 2; margin-top: 3px; text-align: start; }
  .flow-step p { grid-column: 2; margin: 3px 0 0; max-width: none; text-align: start; }
  .flow-step:not(:last-child)::before {
    top: auto;
    bottom: -16px;
    left: 28px;
    right: auto;
    width: 0;
    height: 12px;
    border-top: none;
    border-inline-start: 2px dashed rgba(244, 91, 147, 0.32);
  }
  .flow-step:not(:last-child)::after { display: none; }
  .container { padding-inline: 20px; }
}

/* deterministic screenshots / tests: ?noanim kills every transition */
html.no-anim { scroll-behavior: auto; }
html.no-anim *, html.no-anim *::before, html.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation-duration: 0.01ms !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  html.js .ring-today, html.js .ring-chip, html.js .ov-sun,
  html.js .ring-label, html.js .ring-num { opacity: 1; }
}