/* ══════════════════════════════════════════════════════════════
   ZIIRA LANDING KIT — the canonical stylesheet for every landing
   page under ziira.ir. One file, linked, cached across all pages.

   Tokens are lifted verbatim from the homepage (styles.css:29-83).
   Do not introduce a new accent hex here or in a page: the values
   below are the brand, and a landing page that invents its own
   violet fractures it across one click to «/».

   Components point at --live-acc / --live-deep / --live-soft with
   exactly the homepage's names, so a block copied from index.html
   into a landing page — or back — works unchanged.

   RTL is native. Logical properties only: no left/right anywhere
   in this file. See README.md §rules.
   ══════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────── */
/* Absolute paths: this file is served from /kit/, pages are not. */
@font-face {
  font-family: 'SGKara';
  src: url('/fonts/SGKara-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SGKara';
  src: url('/fonts/SGKara-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SGKara';
  src: url('/fonts/SGKara-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ─── Tokens ────────────────────────────────────────────── */
:root {
  /* Ground. Identical to styles.css — zirak's #0b0713 / #130c22
     were drift and are retired. */
  --ink-0: #05030A;
  --ink-1: #090612;
  --ink-2: #100A1D;
  --ink-3: #170F2A;

  /* Violet ramp. */
  --v-200: #DDD0FF;
  --v-300: #C4A9FF;
  --v-400: #A855F7;
  --v-500: #8B3DF5;
  --v-600: #6D28D9;
  --v-700: #4C1D95;

  /* The accent every accent-coloured element points at. Landing
     pages don't run setAccent(), so these are static here — but
     the names and values match the homepage exactly. */
  --live-acc:  #A855F7;
  --live-deep: #6D28D9;
  --live-soft: #C4A9FF;

  --tx-0: #F6F2FF;
  --tx-1: rgba(246, 242, 255, 0.70);
  --tx-2: rgba(246, 242, 255, 0.48);
  --tx-3: rgba(246, 242, 255, 0.28);

  --mat-structural:  rgba(255, 255, 255, 0.028);
  --mat-raised:      rgba(255, 255, 255, 0.052);
  --mat-interactive: rgba(255, 255, 255, 0.085);

  --line-0: rgba(255, 255, 255, 0.07);
  --line-1: rgba(255, 255, 255, 0.12);
  --line-bright: rgba(255, 255, 255, 0.18);

  --gap-xs: 0.5rem;
  --gap-s: 0.875rem;
  --gap-m: 1.5rem;
  --gap-l: 2.5rem;
  --gap-xl: 4rem;

  --r-s: 0.625rem;
  --r-m: 1rem;
  --r-l: 1.5rem;
  --r-xl: 2rem;

  /* Landing pages are copy-first, so they read narrower than the
     homepage's 78rem act layout. Layout width is a page decision,
     not a brand token — override per page if a block needs it. */
  --wrap: 72rem;
  --wrap-read: 46rem;

  /* Vertical rhythm between landing sections. */
  --sec-y: clamp(3.5rem, 9vw, 7rem);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 140ms var(--ease);
  --t-base: 260ms var(--ease);
  --t-slow: 520ms var(--ease);

  /* Height of the sticky header, for scroll-margin on anchors. */
  --top-h: 4rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip` makes no scroll container, so a stray overflow can't be
     panned to on touch the way `hidden` alone allows. `hidden` first
     as the fallback for Safari < 16. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--tx-0);
  font-family: 'SGKara', system-ui, sans-serif;
  font-weight: 400;
  font-size: 100%;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg, canvas, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--v-500); color: #fff; }

:focus-visible {
  outline: 2px solid var(--v-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anchored sections must clear the sticky header. */
:target, [id] { scroll-margin-block-start: calc(var(--top-h) + 1rem); }

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

.skip-link {
  position: fixed; inset-inline-start: 1rem; top: -100%;
  z-index: 100; padding: 0.75rem 1.25rem;
  background: var(--v-500); color: #fff; border-radius: var(--r-s);
  transition: top var(--t-base);
}
.skip-link:focus { top: 1rem; }

/* Latin brand names inside Persian sentences. Without this the
   punctuation lands on the wrong side of «Claude» and «GapGPT». */
.ltr { unicode-bidi: isolate; direction: ltr; }

/* ─── Ambient ground ────────────────────────────────────── */
/* The landing-page stand-in for the homepage particle field: two
   static radial washes, zero JS, zero bytes over the wire. */
.bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 78% -8%, rgba(109, 40, 217, 0.35), transparent 60%),
    radial-gradient(46rem 40rem at 8% 12%, rgba(168, 85, 247, 0.14), transparent 60%);
}

/* ─── Layout ────────────────────────────────────────────── */
.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}
.wrap--read { max-width: var(--wrap-read); }

.sec { position: relative; padding-block: var(--sec-y); }
.sec--line { border-top: 1px solid var(--line-0); }
.sec--center { text-align: center; }
.sec--center .lede { margin-inline: auto; }

.grid { display: grid; gap: var(--gap-s); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ─── Type ──────────────────────────────────────────────── */
/* Tracking is bound to size — negative as type grows, slightly
   positive as it shrinks — but at Persian magnitudes. The Latin
   convention (-0.025em on display) collides this script; the
   homepage settled on -0.01em and generous leading after exactly
   that mistake. See styles.css:467.                            */
.h1, .h2, .h3 {
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
}
.h1 {
  font-size: clamp(2.2rem, 5.4vw, 4rem);
  line-height: 1.3;
  letter-spacing: -0.018em;
}
.h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.4;
  letter-spacing: -0.012em;
}
.h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  letter-spacing: -0.006em;
}

/* Gradient emphasis inside a headline. Block-level so it takes its
   own line — an inline gradient clip breaks across line boxes. */
.h1 em, .h2 em {
  display: block;
  font-style: normal;
  background: linear-gradient(100deg, var(--v-200) 0%, var(--v-400) 50%, var(--v-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.h1 em.is-inline, .h2 em.is-inline {
  display: inline; background: none; color: var(--live-soft);
}

.lede {
  margin: var(--gap-m) 0 0;
  max-width: 44ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem);
  line-height: 1.9;
  letter-spacing: 0;
  color: rgba(246, 242, 255, 0.82);
}
.lede b { color: var(--tx-0); font-weight: 600; }

.body { font-size: 1rem; line-height: 1.8; color: var(--tx-1); }
.cap {
  font-size: 0.8rem; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--tx-2);
}
.note { margin: var(--gap-s) 0 0; font-size: 0.85rem; color: var(--tx-3); }

/* The «زیرا…» device — brand as the reason-word. Doubles as the
   section eyebrow on landing pages. */
.because {
  margin: 0 0 var(--gap-s);
  font-size: 0.98rem;
  color: var(--tx-2);
}
.because b {
  color: var(--live-acc);
  font-weight: 600;
  margin-inline-end: 0.15em;
}
.because--lg { font-size: 1.15rem; }

/* ─── Header ────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 50;
  padding-block: var(--gap-s);
  transition: background var(--t-slow), backdrop-filter var(--t-slow), padding var(--t-slow);
}
.top.is-stuck {
  padding-block: 0.625rem;
  background: rgba(9, 6, 18, 0.62);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}
/* Scroll edge, not a divider (plan §2.2). The homepage draws a
   hairline here; on a landing page the content scrolls under a
   fade instead. This is the one deliberate divergence. */
.top.is-stuck::after {
  content: ''; position: absolute; inset-inline: 0; top: 100%;
  height: 1.5rem; pointer-events: none;
  background: linear-gradient(to bottom, rgba(5, 3, 10, 0.5), transparent);
}
.top__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  display: flex; align-items: center; gap: var(--gap-m);
}
/* Sentinel the observer watches; costs nothing, fires no scroll
   handler. Sits directly before .top in the markup. */
.top__sentinel { position: absolute; top: 0; height: 1px; width: 100%; }

.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand__mark { height: 30px; width: 10.1px; fill: var(--live-acc); flex: none; }
.brand__name { font-weight: 600; font-size: 1.25rem; }
.brand__of { font-size: 0.78rem; color: var(--tx-2); font-weight: 400; }

.top__links {
  display: flex; gap: var(--gap-m);
  margin-inline-start: auto;
  font-size: 0.95rem; color: var(--tx-1);
}
.top__links a { position: relative; padding-block: 0.25rem; transition: color var(--t-fast); }
.top__links a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0;
  height: 1px; background: var(--live-acc);
  transform: scaleX(0); transform-origin: inline-end;
  transition: transform var(--t-base);
}
.top__links a:hover { color: var(--tx-0); }
.top__links a:hover::after { transform: scaleX(1); transform-origin: inline-start; }
/* You-are-here. The policy pages nav between each other, so the
   header has to answer "which one am I reading" without colour
   being the only signal — the underline carries it too. */
.top__links a[aria-current="page"] { color: var(--tx-0); }
.top__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: inline-start; }

.top__actions { display: flex; align-items: center; gap: var(--gap-xs); }

@media (max-width: 860px) {
  .top__links { display: none; }
  .top__actions { margin-inline-start: auto; }
}

/* ─── Buttons ───────────────────────────────────────────── */
/* Pill, gradient, white text, press-scale. zirak's .9rem radius
   and #160a25 text were drift and are retired. */
.btn {
  --btn-y: 0.6rem;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: var(--btn-y) 1.15rem;
  border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.95rem;
  line-height: 1.4; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-fast), background var(--t-base),
              border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
}
.btn--lg { --btn-y: 0.85rem; padding-inline: 1.75rem; font-size: 1.05rem; }

.btn--primary {
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset,
              0 10px 34px -12px color-mix(in srgb, var(--live-acc) 85%, transparent);
}
.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
              0 16px 44px -12px var(--live-acc);
}

.btn--quiet {
  background: var(--mat-raised);
  border-color: var(--line-1);
  color: var(--tx-0);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn--quiet:hover { background: var(--mat-interactive); border-color: var(--line-bright); }

.btn--ghost { color: var(--tx-1); }
.btn--ghost:hover { color: var(--tx-0); background: var(--mat-interactive); }

/* Feedback on press, never on release. */
.btn:active { transform: scale(0.97); transition-duration: 90ms; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btns { display: flex; flex-wrap: wrap; gap: var(--gap-xs); align-items: center; }
.sec--center .btns { justify-content: center; }

/* ─── Badge / chip ──────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--live-soft);
  border: 1px solid var(--line-1); border-radius: 999px;
  padding: 0.3rem 0.8rem; background: var(--mat-raised);
}
.badge i {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; flex: none;
  background: var(--live-acc);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--live-acc) 18%, transparent);
}

/* The credit offer pill from the homepage hero. */
.offer {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.4rem 0.5rem 0.4rem 0.9rem;
  border: 1px solid var(--line-1); border-radius: 999px;
  background: var(--mat-raised);
  font-size: 0.9rem; color: var(--tx-1);
  transition: transform var(--t-fast), background var(--t-base), border-color var(--t-base);
}
.offer:hover { border-color: var(--line-bright); background: var(--mat-interactive); }
.offer:active { transform: scale(0.98); }
.offer__badge {
  padding: 0.1rem 0.5rem; border-radius: 999px;
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  color: #fff; font-size: 0.78rem; font-weight: 600;
}
.offer__text { color: var(--tx-0); }
.offer__arrow {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: var(--tx-2); stroke-width: 1.8; stroke-linecap: round;
}

/* ─── Lists ─────────────────────────────────────────────── */
.facts {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem;
  margin: var(--gap-m) 0 0; padding: 0; list-style: none;
  font-size: 0.9rem; color: var(--tx-2);
}
.facts li { display: flex; align-items: center; gap: 0.45rem; }
.facts li::before {
  content: ''; width: 0.4rem; height: 0.4rem; flex: none;
  border-radius: 50%; background: var(--live-acc);
}

.checks { margin: var(--gap-m) 0 0; padding: 0; list-style: none; display: grid; gap: 0.6rem; }
.checks li {
  position: relative; padding-inline-start: 1.6rem;
  font-size: 0.95rem; color: var(--tx-1);
}
.checks li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 0.7rem; height: 0.38rem;
  border-inline-start: 2px solid var(--live-acc);
  border-bottom: 2px solid var(--live-acc);
  transform: rotate(-45deg);
}

/* ─── Card ──────────────────────────────────────────────── */
.card {
  position: relative;
  padding: var(--gap-m);
  border: 1px solid var(--line-0);
  border-radius: var(--r-l);
  background: rgba(9, 6, 18, 0.5);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
  transition: border-color var(--t-base), background var(--t-base);
}
/* Pointer glow. --mx/--my are written by ziira-kit.js, fine
   pointers only. */
.card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(20rem 20rem at var(--mx, 50%) var(--my, 0%),
              rgba(139, 61, 245, 0.16), transparent 70%);
  opacity: 0; transition: opacity var(--t-base);
  pointer-events: none;
}
.card:hover { border-color: var(--line-1); background: rgba(16, 10, 29, 0.6); }
.card:hover::before { opacity: 1; }
.card > * { position: relative; }

.card h3, .card .h3 { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 600; }
.card p { margin: 0; font-size: 0.95rem; color: var(--tx-1); line-height: 1.8; }
.card__icon {
  width: 26px; height: 26px; margin-bottom: var(--gap-s);
  fill: none; stroke: var(--live-soft); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.card--accent { border-color: rgba(168, 85, 247, 0.22); }

/* ─── Steps ─────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-s); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  border: 1px solid var(--line-0); border-radius: var(--r-l);
  padding: var(--gap-m); background: var(--mat-structural);
}
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-bottom: 0.9rem;
  border: 1px solid var(--line-1); border-radius: var(--r-s);
  font-size: 0.85rem; font-weight: 600; color: var(--live-soft);
}
.step h3, .step .h3 { margin: 0 0 0.35rem; font-size: 1.12rem; font-weight: 600; }
.step p { margin: 0; color: var(--tx-1); font-size: 0.95rem; }

/* ─── Trust strip ───────────────────────────────────────── */
.trust {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--gap-s); grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) { .trust { grid-template-columns: 1fr; } }
.trust li {
  padding: var(--gap-m);
  border-inline-start: 2px solid var(--live-acc);
  background: linear-gradient(to left, transparent, rgba(139, 61, 245, 0.05));
}
.trust h3, .trust .h3 { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 600; }
.trust p { margin: 0; font-size: 0.92rem; color: var(--tx-1); line-height: 1.75; }

/* ─── Callout ───────────────────────────────────────────── */
/* The honesty box. /free/ needs one above the fold saying Ziira
   is not free — this is that component. */
.callout {
  display: grid; gap: 0.35rem;
  padding: var(--gap-m);
  border: 1px solid var(--line-1); border-radius: var(--r-m);
  border-inline-start: 2px solid var(--live-acc);
  background: var(--mat-structural);
}
.callout__label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--live-soft);
}
.callout p { margin: 0; font-size: 0.95rem; color: var(--tx-1); line-height: 1.8; }

/* ─── Table ─────────────────────────────────────────────── */
/* Scrolls in its own container; the body never scrolls sideways.
   First column sticks — inset-inline-start resolves to right in
   RTL, which is the correct edge. */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--line-0); border-radius: var(--r-l);
  background: rgba(9, 6, 18, 0.5);
  -webkit-overflow-scrolling: touch;
}
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 34rem; }
.table th, .table td {
  padding: 0.85rem var(--gap-m);
  text-align: start; vertical-align: top;
  border-bottom: 1px solid var(--line-0);
}
.table thead th {
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  color: var(--tx-2); white-space: nowrap;
  background: var(--mat-structural);
}
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th {
  position: sticky; inset-inline-start: 0; z-index: 1;
  font-weight: 400; color: var(--tx-1);
  background: var(--ink-1);
}
.table td { color: var(--tx-0); }
.table .is-us { color: var(--live-soft); font-weight: 600; }
.table__stamp { margin: var(--gap-s) 0 0; font-size: 0.8rem; color: var(--tx-3); }

/* ─── Price ─────────────────────────────────────────────── */
.price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.price__amount {
  font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--v-200), var(--v-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.price__unit { font-size: 0.9rem; color: var(--tx-2); }

/* ─── Form field ────────────────────────────────────────── */
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.85rem; color: var(--tx-2); }
.field input, .field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-1); border-radius: var(--r-s);
  background: var(--mat-structural);
  font: inherit; color: var(--tx-0);
  transition: border-color var(--t-base), background var(--t-base);
}
.field input::placeholder, .field textarea::placeholder { color: var(--tx-3); }
.field input:hover, .field textarea:hover { border-color: var(--line-bright); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--live-acc);
  background: var(--mat-raised);
}

/* ─── FAQ ───────────────────────────────────────────────── */
/* Answers are plain prose in the HTML, not collapsed behind JS —
   a crawler and a reader both get them. */
.faq { margin-inline: auto; max-width: var(--wrap-read); }
.faq__item { padding-block: var(--gap-m); border-top: 1px solid var(--line-0); }
.faq__item:last-child { border-bottom: 1px solid var(--line-0); }
.faq__item h3, .faq__item .h3 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem; font-weight: 600; color: var(--tx-0);
}
.faq__item p { margin: 0; font-size: 0.98rem; color: var(--tx-1); line-height: 1.9; }

/* ─── Document ──────────────────────────────────────────── */
/* Long-form prose: /terms/, /privacy/, /refund/. These are the
   one place on this site where the job is reading a clause, not
   scanning a pitch — so the display sizes above are wrong here and
   .doc sets its own, denser scale.

   Clause numbers are drawn by the browser with `list-style-type:
   persian`, never hand-typed. Same reason as toFa(): a stray latin
   ۱ inside a numbered Persian list is glaring. A browser without
   the counter style falls back to decimal — degraded, not broken.

   Every .doc__sec carries an id so support can link one clause
   instead of "see the terms page". */
.doc { max-width: var(--wrap-read); margin-inline: auto; counter-reset: doc-sec; }

.doc__meta {
  display: flex; flex-wrap: wrap; gap: var(--gap-xs) var(--gap-m);
  margin: var(--gap-m) 0 0; padding-bottom: var(--gap-m);
  border-bottom: 1px solid var(--line-0);
  font-size: 0.85rem; color: var(--tx-2);
}
.doc__meta b { color: var(--tx-1); font-weight: 600; }

.doc__toc {
  margin: var(--gap-l) 0 0;
  padding: var(--gap-m);
  border: 1px solid var(--line-0); border-radius: var(--r-m);
  background: var(--mat-structural);
}
.doc__toc h2 {
  margin: 0 0 0.7rem; font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--tx-3); font-weight: 600;
}
/* Deliberately not `display:grid` — a grid container blockifies
   its children, and a list that loses its ::marker loses the
   clause numbers this whole component exists to show. Spacing
   comes from the adjacent-sibling margin instead. */
.doc__toc ol {
  margin: 0; padding-inline-start: 1.5rem;
  list-style: persian;
  font-size: 0.95rem;
}
.doc__toc li + li { margin-top: 0.4rem; }
.doc__toc li::marker { color: var(--tx-3); }
.doc__toc a { color: var(--tx-1); transition: color var(--t-fast); }
.doc__toc a:hover { color: var(--live-soft); }

.doc__sec {
  counter-increment: doc-sec;
  margin-top: var(--gap-xl);
  scroll-margin-top: calc(var(--top-h) + 1rem);
}
.doc__sec > h2 {
  display: flex; align-items: baseline; gap: 0.5rem;
  margin: 0 0 var(--gap-s);
  font-size: 1.32rem; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.006em; color: var(--tx-0);
}
.doc__sec > h2::before {
  content: counter(doc-sec, persian) '.';
  color: var(--live-acc); font-weight: 600;
}
.doc__sec h3 {
  margin: var(--gap-m) 0 0.4rem;
  font-size: 1.02rem; font-weight: 600; color: var(--tx-0);
}

.doc p { margin: 0 0 var(--gap-s); font-size: 1rem; line-height: 1.9; color: var(--tx-1); }
.doc p:last-child { margin-bottom: 0; }
.doc strong, .doc b { color: var(--tx-0); font-weight: 600; }

.doc ol, .doc ul {
  margin: 0 0 var(--gap-s); padding-inline-start: 1.5rem;
  color: var(--tx-1); line-height: 1.9;
}
.doc li + li { margin-top: 0.5rem; }
.doc ol { list-style: persian; }
.doc li::marker { color: var(--tx-3); }
.doc ul { list-style: none; padding-inline-start: 1.1rem; }
.doc ul > li { position: relative; padding-inline-start: 1rem; }
.doc ul > li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0.83em;
  width: 0.3rem; height: 0.3rem; border-radius: 50%;
  background: var(--live-acc);
}

/* In running prose a link has to look like one — the base
   `a{text-decoration:none}` is for navigation, not body copy. */
.doc a:not(.btn) {
  color: var(--live-soft);
  text-decoration: underline;
  text-decoration-color: rgba(196, 169, 255, 0.35);
  text-underline-offset: 0.28em;
  transition: text-decoration-color var(--t-fast);
}
.doc a:not(.btn):hover { text-decoration-color: var(--live-soft); }

/* «تعاریف» in the terms, and the labelled rows on /contact/. */
.doc dl { margin: 0; display: grid; gap: var(--gap-s); }
.doc dt { color: var(--tx-0); font-weight: 600; }
.doc dd { margin: 0.15rem 0 0; color: var(--tx-1); line-height: 1.9; }

/* ─── Closing CTA ───────────────────────────────────────── */
.cta { position: relative; text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.cta .h1, .cta .h2 { margin-inline: auto; }
.cta .lede { margin-inline: auto; margin-bottom: var(--gap-l); }
.cta .btns { justify-content: center; }

/* ─── Footer ────────────────────────────────────────────── */
.footer {
  position: relative;
  border-top: 1px solid var(--line-0);
  background: rgba(5, 3, 10, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding-block: var(--gap-xl) var(--gap-m);
}
/* Four columns since the legal + pricing pages landed; 700px was
   the right fold point for three and is too late for four. Matches
   styles.css so the two footers fold together. */
.footer__inner { display: grid; gap: var(--gap-l); grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 880px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
.footer__brand p { margin: var(--gap-s) 0 0; font-size: 0.92rem; color: var(--tx-2); max-width: 28ch; }
.footer__col { display: grid; gap: 0.5rem; align-content: start; font-size: 0.92rem; }
.footer__col h3 {
  margin: 0 0 0.25rem; font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--tx-3); font-weight: 600;
}
.footer__col a { color: var(--tx-1); transition: color var(--t-fast); }
.footer__col a:hover { color: var(--live-soft); }
.footer__col a[aria-current="page"] { color: var(--tx-0); }
.footer__base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-s);
  margin-top: var(--gap-xl); padding-top: var(--gap-m);
  border-top: 1px solid var(--line-0);
  font-size: 0.85rem; color: var(--tx-3);
}

/* ─── Reveal ────────────────────────────────────────────── */
/* Opt-in only, and only ever a fade-up. The signature interaction
   is the page's one moment; everything else stays quiet. Elements
   are visible by default so a JS failure never hides copy. */
[data-reveal] { opacity: 1; }
.js [data-reveal] {
  opacity: 0; transform: translateY(0.75rem);
  transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════
   SIGNATURE INTERACTIONS
   One per page, never more. Scaffolds live here; the behaviour
   lives in ziira-kit.js.
   ══════════════════════════════════════════════════════════ */

/* ─── Drag compare (P1 /no-account/) ────────────────────── */
.cmp {
  position: relative;
  border: 1px solid var(--line-1); border-radius: var(--r-l);
  background: var(--ink-1);
  overflow: hidden;
  touch-action: pan-y;           /* horizontal drag is ours, vertical scroll is theirs */
  user-select: none; -webkit-user-select: none;
}
.cmp__panes { position: relative; display: grid; }
.cmp__pane { grid-area: 1 / 1; padding: var(--gap-l) var(--gap-m); display: grid; gap: 0.5rem; align-content: start; }
/* --clip is written by JS as a full clip-path value, because
   clip-path inset() takes physical edges and has no logical
   form — keeping the direction maths in one place. */
.cmp__pane--b { clip-path: var(--clip, inset(0 0 0 50%)); background: var(--ink-2); }
.cmp__tag { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; }
.cmp__pane--a .cmp__tag { color: var(--tx-2); }
.cmp__pane--b .cmp__tag { color: var(--live-soft); }
.cmp__pane h3, .cmp__pane .h3 { margin: 0; font-size: 1.15rem; font-weight: 600; }
.cmp__pane ul { margin: 0.4rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; font-size: 0.92rem; color: var(--tx-1); }
.cmp__pane li { display: flex; gap: 0.5rem; align-items: flex-start; }
.cmp__pane li::before { content: '—'; color: var(--tx-3); flex: none; }
.cmp__pane--b li::before { content: '✓'; color: var(--live-acc); }

.cmp__handle {
  position: absolute; inset-block: 0;
  inset-inline-start: var(--p-pct, 50%);
  width: 2px; margin-inline-start: -1px;
  background: var(--live-acc);
  cursor: ew-resize;
  touch-action: none;
}
.cmp__knob {
  position: absolute; top: 50%; inset-inline-start: 50%;
  translate: 50% -50%;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-content: center;
  border: 1px solid var(--line-bright); border-radius: 50%;
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  color: #fff; font: inherit; cursor: grab;
  box-shadow: 0 10px 34px -12px var(--live-acc);
  transition: transform var(--t-fast);
}
.cmp__knob:active { cursor: grabbing; transform: scale(0.94); }
.cmp__knob svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__hint { margin: var(--gap-s) 0 0; font-size: 0.85rem; color: var(--tx-2); text-align: center; }

/* ─── Model spotlight (P3 /models/*) ────────────────────── */
.spot { display: grid; gap: var(--gap-m); }
.spot__tabs {
  position: relative;
  display: flex; gap: 0.25rem; padding: 0.3rem;
  border: 1px solid var(--line-1); border-radius: 999px;
  background: var(--mat-structural);
  overflow: hidden;
}
.spot__thumb {
  position: absolute; inset-block: 0.3rem;
  inset-inline-start: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--live-acc), var(--live-deep));
  pointer-events: none;
  /* translate/width are written by the spring, never transitioned */
}
.spot__opt {
  position: relative; z-index: 1;
  flex: 1; padding: 0.5rem 0.9rem;
  border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--tx-2); cursor: pointer; white-space: nowrap;
  transition: color var(--t-base);
}
.spot__opt:hover { color: var(--tx-1); }
.spot__opt[aria-selected="true"] { color: #fff; }

.spot__panel {
  padding: var(--gap-m);
  border: 1px solid var(--line-0); border-radius: var(--r-l);
  background: rgba(9, 6, 18, 0.5);
  min-height: 9rem;
}
.spot__who {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--tx-2);
}
/* One model-colour table, consumed by any element that wants a
   model's hue — the spotlight's dot, the cards on /models/, and
   whatever comes next. [data-model] only sets a variable, so it
   can never damage an element that isn't asking for it.

   These are wayfinding hues, NOT the vendors' official brand
   colours. Deliberately: /about/ says plainly that Ziira is not
   affiliated with any of these companies, and dressing a page in
   their exact palettes would quietly say the opposite. They are
   picked to stay apart from each other at 7px, and the model's
   name always sits next to the dot — colour is never the only
   signal. */
[data-model="gpt"]      { --mdot: #10A37F; }
[data-model="claude"]   { --mdot: #E8845C; }
[data-model="gemini"]   { --mdot: #5B9BF8; }
[data-model="deepseek"] { --mdot: #4C6FFF; }
[data-model="llama"]    { --mdot: #F0B429; }
[data-model="grok"]     { --mdot: #C9CDD4; }
[data-model="mistral"]  { --mdot: #E0457B; }
[data-model="qwen"]     { --mdot: #7BC96F; }

.mdot, .spot__dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--mdot, var(--live-acc));
}
.spot__body { margin: 0; font-size: 0.98rem; line-height: 1.85; color: var(--tx-1); }
.spot__body b { color: var(--v-200); font-weight: 600; }

/* ─── PWA install (P4 /install/) ────────────────────────── */
.install { display: grid; gap: var(--gap-m); }
.install__step {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem var(--gap-m);
  border: 1px solid var(--line-0); border-radius: var(--r-m);
  background: var(--mat-structural);
  font-size: 0.95rem; color: var(--tx-1);
}
.install__step b { color: var(--tx-0); font-weight: 600; }
.install__ic {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: var(--live-soft); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The share icon the iOS diagram anchors its origin to. */
.install__step--anchor { position: relative; border-color: var(--line-bright); }
.install__step--anchor::after {
  content: ''; position: absolute; inset: -3px;
  border: 1px solid var(--live-acc); border-radius: calc(var(--r-m) + 3px);
  opacity: 0.5;
  animation: kit-pulse 2.4s var(--ease) infinite;
  pointer-events: none;
}
@keyframes kit-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }

/* ══════════════════════════════════════════════════════════
   ACCESSIBILITY — three independent signals, all handled.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
  /* Not "no feedback" — a cross-fade instead of travel. */
  .js [data-reveal] { transform: none !important; }
  .install__step--anchor::after { animation: none; opacity: 0.5; }
}

@media (prefers-reduced-transparency: reduce) {
  .top.is-stuck { background: var(--ink-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .card, .btn--quiet, .tablewrap, .spot__panel, .doc__toc {
    background: var(--ink-2); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .footer { background: var(--ink-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .bg { display: none; }
}

@media (prefers-contrast: more) {
  :root {
    --tx-1: rgba(246, 242, 255, 0.9);
    --tx-2: rgba(246, 242, 255, 0.75);
    --line-0: rgba(255, 255, 255, 0.24);
    --line-1: rgba(255, 255, 255, 0.34);
  }
  .card, .step, .callout, .tablewrap, .spot__panel, .cmp, .doc__toc { background: var(--ink-1); }
  .bg { display: none; }
}

@media print {
  .top, .bg, .cmp__handle, .btns { display: none; }
  body { background: #fff; color: #000; }
  /* Policy pages get printed and filed. Keep the clause numbers,
     keep the URLs, and don't split a clause across a page. */
  .doc p, .doc li, .doc dd, .doc__meta { color: #000; }
  .doc__sec { break-inside: avoid; margin-top: 1.6rem; }
  .doc__sec > h2::before { color: #000; }
  .doc a:not(.btn) { color: #000; text-decoration-color: #000; }
  .doc ul > li::before { background: #000; }
  .doc__toc { border-color: #999; background: none; }
}