/* ==========================================================================
   PromptPass — Global Stylesheet
   Theme : White premium technology / SaaS
   Dir   : RTL (Persian)
   Font  : Vazirmatn
   --------------------------------------------------------------------------
   Table of contents
   01. Design tokens
   02. Reset & base
   03. Layout helpers
   04. Buttons
   05. Header & navigation
   06. Hero
   07. Section titles
   08. Cards (generic)
   09. "What is" section
   10. Pricing / packages
   11. Features
   12. AI models
   13. How it works (steps)
   14. CTA band
   15. Page header (inner pages)
   16. Article / legal content
   17. Accordion (tutorials)
   18. Code blocks
   19. Footer
   20. Service status
   21. Utilities, animations & accessibility
   22. Responsive breakpoints
   ========================================================================== */


/* ==========================================================================
   01. Design tokens
   --------------------------------------------------------------------------
   Every colour the themes need to swap lives here. The light values below are
   the originals, unchanged; section 01b re-declares only these same names for
   dark mode, so no rule further down the sheet needs a theme-specific copy.

   Two rules keep the themes honest:
   • --white is the "raised surface" token and DOES flip in dark mode.
   • --on-brand is text sitting on a brand gradient and NEVER flips —
     white-on-orange is the accessible pairing in both themes.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand — orange ------------------------------------------------------- */
  --brand-50:  #fff7ed;
  --brand-100: #ffedd5;
  --brand-200: #fed7aa;
  --brand-400: #fb923c;
  --brand-500: #f97316;  /* primary */
  --brand-600: #ea580c;  /* hover / pressed */
  --brand-700: #c2410c;
  --brand-800: #9a3412;

  /* Semantic accent aliases (brand ramp stays the source of truth) */
  --primary:       var(--brand-500);
  --primary-hover: var(--brand-600);
  /* Accent for text/icons on a page background — dark mode needs a lighter
     step to clear 4.5:1, so it is a token rather than a raw --brand-600.
     brand-600 measures only 3.41:1 on --surface, so links and inline accents
     use brand-700 (4.96:1). Brand FILLS still use 500/600 — unchanged. */
  --accent-text:   var(--brand-700);
  --accent-strong: var(--brand-800);

  /* Warm accent — decorative surfaces only (never behind white text) */
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;

  /* Brand gradient runs primary → deep so white text on top stays legible */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);
  /* Darker variant for large filled bands carrying body copy */
  --gradient-brand-band: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
  --gradient-soft:  linear-gradient(135deg, var(--brand-50) 0%, var(--brand-tint) 100%);

  /* Tint used by soft gradients and the hero/page-header glow */
  --brand-tint: #fffbeb;

  /* Neutrals ------------------------------------------------------------- */
  --white:    #ffffff;   /* raised surface — flips in dark mode */
  --on-brand: #ffffff;   /* text on brand fills — never flips */
  --bg:       #ffffff;
  --surface:  #fafaf9;
  --surface-2:#f5f5f4;

  --ink:      #111827;   /* headings */
  --text:     #374151;   /* body */
  /* #6b7280 measured 4.43:1 on --surface-2 (tags, inline code); nudged one
     step darker so secondary text passes on every light surface. */
  --muted:    #646e7c;   /* secondary — 4.74:1 on --surface-2 */
  /* Was #9ca3af, which measured 2.43:1 on --surface — below the 4.5:1 floor.
     Darkened to the smallest value that passes on every light surface. */
  --faint:    #6b7280;   /* tertiary — 4.63:1 on --surface, 4.83:1 on white */

  --line:     #e5e7eb;
  --line-soft:#f3f4f6;

  /* Requested semantic aliases — map onto the names used across the sheet */
  --surface-secondary: var(--surface-2);
  --text-muted: var(--muted);
  --border: var(--line);

  /* Translucent header backdrop (opaque-ish so blur reads cleanly) */
  --header-bg:        rgba(255, 255, 255, .82);
  --header-bg-stuck:  rgba(255, 255, 255, .94);

  /* Decorative hero blobs */
  --blob-1: #ffedd5;
  --blob-2: #fef3c7;

  /* Code sample syntax colours */
  --tok-str: #0f766e;
  --tok-num: #b45309;
  --mock-dot: #dfe3ec;

  /* Feedback ------------------------------------------------------------- */
  --success-50: #ecfdf5;
  /* #059669 measured 3.58:1 as text on --success-50; darkened to pass */
  --success-600:#047857;
  --success-border: #a7f3d0;

  /* Radii ---------------------------------------------------------------- */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill:999px;

  /* Shadows -------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-lg: 0 18px 44px rgba(16, 24, 40, .09);
  --shadow-brand: 0 12px 28px rgba(249, 115, 22, .28);
  --shadow-brand-lg: 0 20px 46px rgba(234, 88, 12, .28);
  --shadow: var(--shadow-md);          /* generic alias */
  --shadow-cta: 0 10px 26px rgba(0, 0, 0, .14);
  --shadow-cta-hover: 0 16px 32px rgba(0, 0, 0, .18);

  /* Spacing / layout ----------------------------------------------------- */
  --container: 1180px;
  --gutter: 24px;
  --section-y: 96px;
  --header-h: 75px;   /* .header-inner 74px + 1px bottom border */

  /* Motion --------------------------------------------------------------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: .18s var(--ease);
  --t-med:  .28s var(--ease);
  --t-theme: .22s var(--ease);   /* theme cross-fade */
}


/* ==========================================================================
   01b. Dark theme
   --------------------------------------------------------------------------
   Overrides variables only — no selector below section 01 is redeclared.

   Palette notes:
   • Backgrounds are warm-tinted neutrals (hue 220), never #000. Elevation
     rises bg → surface → white, matching the light theme's logic so every
     existing `background: var(--white)` card reads as "raised" unchanged.
   • The orange ramp is re-pointed, not re-hued: light steps (50/100/200)
     become deep translucent tints for backgrounds, while text/icon accents
     move UP the ramp to 400 so they clear 4.5:1 on a dark surface.
   • Shadows deepen instead of tinting, because coloured glows read as neon.
   ========================================================================== */

[data-theme="dark"] {
  color-scheme: dark;

  /* Tinted surface fills replacing the light brand steps.
     Kept semi-transparent so they sit on any elevation without banding. */
  --brand-50:  rgba(249, 115, 22, .11);
  --brand-100: rgba(249, 115, 22, .19);
  --brand-200: rgba(249, 115, 22, .34);

  /* Fills stay vivid — they carry white text and must hold contrast */
  --brand-400: #fb923c;
  --brand-500: #f97316;
  --brand-600: #ea580c;
  /* 700/800 are gradient END stops; darkening them further would crush the
     CTA band, so they only step back slightly. */
  --brand-700: #d4500b;
  --brand-800: #b03e08;

  /* Accents on dark backgrounds move up the ramp for legibility:
     #fdba74 on --surface = 7.4:1, #fb923c on --surface = 5.6:1 */
  --accent-text:   #fdba74;
  --accent-strong: #fed7aa;

  --brand-tint: rgba(251, 191, 36, .10);

  /* Neutrals — elevation ladder */
  --bg:       #0d1117;   /* page */
  --surface:  #151b23;   /* alternating section bands */
  --surface-2:#1c232c;   /* inset wells, inline code */
  --white:    #161d26;   /* raised cards — the "white" of dark mode */
  --on-brand: #ffffff;   /* unchanged: white on orange stays correct */

  --ink:      #f0f3f6;   /* headings   — 15.8:1 on --bg */
  --text:     #c6cdd6;   /* body       — 10.6:1 on --bg */
  --muted:    #99a3b0;   /* secondary  —  6.2:1 on --bg */
  --faint:    #8b95a2;   /* tertiary   —  5.6:1 on raised cards */

  --line:     #262e39;
  --line-soft:#1e252e;

  --header-bg:       rgba(13, 17, 23, .78);
  --header-bg-stuck: rgba(13, 17, 23, .92);

  /* Decorative glows: dialled right down so they read as ambient light */
  --blob-1: rgba(249, 115, 22, .16);
  --blob-2: rgba(245, 158, 11, .12);

  /* Syntax colours lifted to clear contrast on the dark code surface */
  --tok-str: #5eead4;
  --tok-num: #fcd34d;
  --mock-dot: #303a46;

  --success-50:  rgba(5, 150, 105, .15);
  --success-600: #34d399;
  --success-border: rgba(52, 211, 153, .45);

  /* Depth via darker, larger shadows rather than colour */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .38);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .42);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
  --shadow-brand: 0 12px 28px rgba(0, 0, 0, .45);
  --shadow-brand-lg: 0 18px 40px rgba(0, 0, 0, .55);
  --shadow-cta: 0 10px 26px rgba(0, 0, 0, .45);
  --shadow-cta-hover: 0 16px 32px rgba(0, 0, 0, .55);
}




/* ==========================================================================
   02. Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* sticky header offset for anchor links */
}

body {
  margin: 0;
  font-family: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Prevent background scroll while the mobile menu is open.
   `position: fixed` is what actually holds on iOS, where overflow alone is
   ignored; script.js stashes and restores the scroll offset via `top`. */
body.is-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.05rem); font-weight: 800; line-height: 1.5; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem); font-weight: 800; }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.32rem); }
h4 { font-size: 1.05rem; }

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

a {
  color: var(--accent-text);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--accent-strong); }

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

ul, ol { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 40px 0;
}

::selection {
  background: var(--brand-100);
  color: var(--accent-strong);
}

/* Numbers, code and technical strings stay LTR inside an RTL document */
code, kbd, pre, samp,
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

code, kbd, samp {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .88em;
}

:not(pre) > code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .12em .42em;
  color: var(--accent-strong);
  display: inline-block;
}


/* ==========================================================================
   03. Layout helpers
   ========================================================================== */

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

.container--narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: 72px; }
.section--surface { background: var(--surface); }

.section--split {
  background: linear-gradient(180deg, var(--white) 0%, var(--surface) 100%);
}


/* ==========================================================================
   04. Buttons
   ========================================================================== */

.btn {
  --btn-py: 13px;
  --btn-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t-med),
              background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast);
}

.btn:active { transform: translateY(1px); }

.btn svg { width: 18px; height: 18px; flex: none; }

/* Primary --------------------------------------------------------------- */
.btn--primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: var(--gradient-brand);
  color: var(--on-brand);
  box-shadow: var(--shadow-brand);
}
/* Light sheen that fades in on hover — keeps the gradient premium
   without swapping the background colour underneath it. */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 55%);
  opacity: 0;
  transition: opacity var(--t-med);
}
.btn--primary:hover {
  color: var(--on-brand);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand-lg);
}
.btn--primary:hover::after { opacity: 1; }

/* Secondary (outline) ---------------------------------------------------- */
.btn--ghost {
  background: var(--white);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn--ghost:hover {
  color: var(--accent-strong);
  border-color: var(--brand-200);
  background: var(--brand-50);
  transform: translateY(-2px);
}

/* Soft (tinted) ---------------------------------------------------------- */
.btn--soft {
  background: var(--brand-50);
  color: var(--accent-strong);
  border-color: var(--brand-100);
}
.btn--soft:hover {
  background: var(--brand-100);
  color: var(--accent-strong);
}

/* Sizes ------------------------------------------------------------------ */
.btn--sm { --btn-py: 9px; --btn-px: 18px; font-size: .88rem; }
.btn--lg { --btn-py: 15px; --btn-px: 34px; font-size: 1.03rem; }
.btn--block { display: flex; width: 100%; }


/* ==========================================================================
   05. Header & navigation
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med), box-shadow var(--t-med),
              background-color var(--t-med);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--header-bg-stuck);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}

/* Logo ------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.24rem;
  color: var(--ink);
  letter-spacing: -.02em;
  flex: none;
}
.logo:hover { color: var(--ink); }

.logo__mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background-image: var(--gradient-brand);
  color: var(--on-brand);
  display: grid;
  place-items: center;
  font-size: .95rem;
  font-weight: 800;
  box-shadow: var(--shadow-brand);
  flex: none;
}

.logo__text .accent {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Nav -------------------------------------------------------------------- */
.main-nav { margin-inline-start: auto; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-list li { margin: 0; }

.nav-list a {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: .96rem;
  font-weight: 500;
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-list a:hover {
  color: var(--accent-strong);
  background: var(--brand-50);
}

.nav-list a.is-active {
  color: var(--accent-strong);
  font-weight: 600;
  background: var(--brand-50);
}

/* The in-menu CTA is only used on mobile, where the header CTA is hidden */
.nav-list .nav-cta { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* Burger ----------------------------------------------------------------- */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  cursor: pointer;
  place-items: center;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
.nav-toggle:hover { background: var(--surface); }

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: background-color var(--t-fast);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-med), top var(--t-fast);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }


/* ==========================================================================
   06. Hero
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 96px 104px;
  background: radial-gradient(1100px 520px at 82% -8%, var(--brand-50) 0%, transparent 62%),
              radial-gradient(900px 460px at 8% 4%, var(--brand-tint) 0%, transparent 60%),
              var(--white);
}

/* Decorative soft blobs */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.hero__blob--1 {
  width: 380px; height: 380px;
  inset-block-start: -120px;
  inset-inline-start: -110px;
  background: var(--blob-1);
}
.hero__blob--2 {
  width: 320px; height: 320px;
  inset-block-end: -140px;
  inset-inline-end: 6%;
  background: var(--blob-2);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 56px;
}

.hero__title { margin-bottom: 20px; }

.hero__title .accent {
  background-image: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 30px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

/* Eyebrow badge ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  margin-bottom: 22px;
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--accent-strong);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.6;
}

.badge__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-600);
  flex: none;
}

/* Trust row -------------------------------------------------------------- */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: .9rem;
}
.hero__meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.hero__meta svg { width: 17px; height: 17px; color: var(--accent-text); flex: none; }

/* Hero visual (terminal mock) -------------------------------------------- */
.hero__visual { position: relative; }

.mock {
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.mock__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mock-dot); flex: none; }
.mock__title {
  margin-inline-start: auto;
  font-size: .78rem;
  color: var(--faint);
  letter-spacing: .02em;
}

.mock__body {
  padding: 20px 22px;
  margin: 0;
  background: var(--white);
  font-size: .82rem;
  line-height: 2.1;
  overflow-x: auto;
}

.tok-key  { color: var(--accent-strong); }
.tok-str  { color: var(--tok-str); }
.tok-com  { color: var(--faint); }
.tok-fn   { color: var(--accent-text); }
.tok-num  { color: var(--tok-num); }

/* Floating stat chip */
.mock__chip {
  position: absolute;
  z-index: 2;
  inset-block-end: -22px;
  inset-inline-start: -18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-md);
}
.mock__chip-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--success-50);
  color: var(--success-600);
  flex: none;
}
.mock__chip-icon svg { width: 19px; height: 19px; }
.mock__chip-label { display: block; font-size: .76rem; color: var(--muted); line-height: 1.5; }
.mock__chip-value { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); line-height: 1.5; }


/* ==========================================================================
   07. Section titles
   ========================================================================== */

.section-head {
  max-width: 660px;
  margin: 0 auto 52px;
  text-align: center;
}
.section-head--start {
  margin-inline: 0;
  text-align: start;
}

.section-head__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--accent-strong);
  font-size: .81rem;
  font-weight: 600;
}

.section-head h2 { margin-bottom: 14px; }

.section-head p {
  color: var(--muted);
  font-size: 1.02rem;
  margin: 0;
}


/* ==========================================================================
   08. Cards (generic)
   ========================================================================== */

.grid {
  display: grid;
  gap: 24px;
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: var(--shadow-md);
}

.card h3 { margin-bottom: 8px; }

.card p {
  color: var(--muted);
  font-size: .95rem;
  margin: 0;
}

.card__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--gradient-soft);
  color: var(--accent-text);
  border: 1px solid var(--brand-100);
}
.card__icon svg { width: 23px; height: 23px; }


/* ==========================================================================
   09. "What is PromptPass" section
   ========================================================================== */

.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--text);
}
.check-list li:last-child { margin-bottom: 0; }

.check-list__icon {
  width: 24px;
  height: 24px;
  margin-top: 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--accent-text);
  flex: none;
}
.check-list__icon svg { width: 14px; height: 14px; }

.check-list strong {
  display: block;
  margin-bottom: 2px;
  font-size: 1rem;
}
.check-list span { color: var(--muted); font-size: .93rem; }

/* Small audience tiles */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 42px;
}

.audience {
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.audience:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.audience__icon {
  width: 42px; height: 42px;
  margin: 0 auto 12px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gradient-soft);
  color: var(--accent-text);
  border: 1px solid var(--brand-100);
}
.audience__icon svg { width: 21px; height: 21px; }

.audience h4 { margin: 0 0 4px; font-size: .99rem; }
.audience p { font-size: .87rem; color: var(--muted); margin: 0; }


/* ==========================================================================
   10. Pricing / packages
   ========================================================================== */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

/* The plans carry two stacked offsets: the scroll-reveal slide (--reveal-y,
   driven by .reveal/.is-visible) and their own lift (--lift). Composing them
   in one transform keeps both effects alive — a bare `transform` on either
   side would silently cancel the other. The descendant selector is what wins
   the cascade against the generic .reveal rule. */
.pricing-grid .plan {
  --lift: 0px;
  transform: translateY(calc(var(--reveal-y, 0px) + var(--lift)));
  transition: transform var(--t-med), box-shadow var(--t-med),
              border-color var(--t-med), opacity .6s var(--ease);
}

.pricing-grid .plan:hover {
  --lift: -6px;
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

/* Highlighted plan ------------------------------------------------------- */
.plan--featured {
  z-index: 1;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-brand);
  background:
    radial-gradient(120% 60% at 50% 0%, var(--brand-50) 0%, transparent 60%),
    var(--white);
}
.pricing-grid .plan--featured:hover { box-shadow: var(--shadow-brand-lg); }

/* Gradient border — only drawn where mask compositing is supported,
   otherwise the plain --brand-500 border above remains the fallback. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .plan--featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-brand);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
  }
}

/* Lift the featured plan out of the row, but only while the three plans
   actually sit side by side (they stack below 960px — see section 21). */
@media (min-width: 961px) {
  .pricing-grid .plan--featured { --lift: -12px; }
  .pricing-grid .plan--featured:hover { --lift: -18px; }
}

.plan__tag {
  position: absolute;
  top: -15px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background-image: var(--gradient-brand);
  color: var(--on-brand);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--shadow-brand);
}

.plan__name {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.plan__desc {
  font-size: .88rem;
  line-height: 1.85;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 3.7em; /* two lines — keeps the price rows aligned across cards */
}

.plan__price {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.plan__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--faint);
}
.plan__figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan__amount {
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.03em;
}
.plan__currency { font-size: .95rem; font-weight: 600; color: var(--muted); }

.plan--featured .plan__amount { color: var(--accent-text); }

.plan__features {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}
.plan__features li {
  position: relative;
  padding-inline-start: 30px;
  margin-bottom: 12px;
  font-size: .93rem;
  color: var(--text);
}
/* Outline check icon in a soft brand disc */
.plan__features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 11px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea580c' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.plan--featured .plan__features li::before {
  background-color: var(--brand-100);
  box-shadow: inset 0 0 0 1px var(--brand-200);
}

.pricing-note {
  margin-top: 40px;
  padding: 18px 22px;
  border: 1px dashed var(--brand-200);
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}


/* ==========================================================================
   11. Features
   ========================================================================== */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}


/* ==========================================================================
   12. AI models
   ========================================================================== */

.model-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.model {
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
}
.model:hover {
  transform: translateY(-4px);
  border-color: var(--brand-100);
  box-shadow: var(--shadow-md);
}

.model__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.model__avatar {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gradient-soft);
  border: 1px solid var(--brand-100);
  color: var(--accent-strong);
  font-weight: 800;
  font-size: .9rem;
  flex: none;
}

.model__name {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  direction: ltr;
  text-align: start;
}
.model__type { display: block; font-size: .82rem; color: var(--muted); line-height: 1.5; }

.model p { font-size: .92rem; color: var(--muted); margin: 0 0 16px; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.tag {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .79rem;
  font-weight: 500;
}

.disclaimer {
  margin-top: 32px;
  text-align: center;
  font-size: .87rem;
  color: var(--faint);
}


/* ==========================================================================
   13. How it works (steps)
   ========================================================================== */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Connector line between steps (RTL: drawn to the left) */
.step::after {
  content: "";
  position: absolute;
  top: 54px;
  inset-inline-end: 100%;
  width: 22px;
  height: 1px;
  border-top: 2px dashed var(--line);
}
.step:first-child::after { display: none; }

.step__num {
  width: 44px; height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  background-image: var(--gradient-brand);
  color: var(--on-brand);
  font-weight: 800;
  font-size: 1.02rem;
  box-shadow: var(--shadow-brand);
}

.step h3 { margin-bottom: 8px; font-size: 1.05rem; }
.step p { font-size: .92rem; color: var(--muted); margin: 0; }


/* ==========================================================================
   14. CTA band
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  padding: 62px 48px;
  border-radius: var(--r-2xl);
  background-image: var(--gradient-brand-band);
  color: var(--on-brand);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}
.cta::before { width: 300px; height: 300px; top: -140px; inset-inline-start: -80px; }
.cta::after  { width: 240px; height: 240px; bottom: -130px; inset-inline-end: -60px; }

.cta__inner { position: relative; z-index: 1; }

.cta h2 { color: var(--on-brand); margin-bottom: 12px; }

.cta p {
  color: rgba(255, 255, 255, .88);
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.02rem;
}

/* The CTA is an orange band in BOTH themes, so its interior is deliberately
   theme-independent: a genuinely white pill with deep-orange text. Using
   --white/--accent-strong here would flip with the theme and destroy contrast
   against the orange behind it. */
.cta .btn--light {
  background: #ffffff;
  color: #c2410c;
  box-shadow: var(--shadow-cta);
}
.cta .btn--light:hover {
  background: #ffffff;
  color: #9a3412;
  transform: translateY(-2px);
  box-shadow: var(--shadow-cta-hover);
}

.cta .btn--outline-light {
  background: transparent;
  color: var(--on-brand);
  border-color: rgba(255, 255, 255, .45);
}
.cta .btn--outline-light:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .7);
  color: var(--on-brand);
}

.cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}


/* ==========================================================================
   15. Page header (inner pages)
   ========================================================================== */

.page-header {
  position: relative;
  overflow: hidden;
  padding-block: 72px 64px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(900px 420px at 78% -20%, var(--brand-50) 0%, transparent 60%),
              radial-gradient(700px 380px at 10% 0%, var(--brand-tint) 0%, transparent 62%),
              var(--white);
  text-align: center;
}

.page-header h1 { margin-bottom: 14px; }

.page-header p {
  max-width: 620px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.03rem;
}

/* Breadcrumb ------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: .86rem;
  color: var(--faint);
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: var(--faint); }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--accent-text); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }


/* ==========================================================================
   16. Article / legal content
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 46px;
  align-items: start;
}

/* Sticky table of contents */
.toc {
  position: sticky;
  top: 100px;
  padding: 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.toc h2 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 14px;
  color: var(--ink);
}
.toc ul { margin: 0; padding: 0; list-style: none; }
.toc li { margin-bottom: 3px; }
.toc a {
  display: block;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: .9rem;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.toc a:hover { background: var(--white); color: var(--accent-strong); }
.toc a.is-active {
  background: var(--white);
  color: var(--accent-strong);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Article body ----------------------------------------------------------- */
.article > section {
  padding: 32px 34px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  scroll-margin-top: 100px;
}
.article > section:last-child { margin-bottom: 0; }

.article h2 {
  font-size: 1.28rem;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

.article h3 { font-size: 1.06rem; margin-top: 26px; }
.article h3:first-of-type { margin-top: 0; }

.article p,
.article li { color: var(--text); font-size: .97rem; }

.article ul { padding-inline-start: 1.3em; }
.article ul li::marker { color: var(--brand-500); }

.article .muted { color: var(--muted); font-size: .9rem; }

/* Callout ---------------------------------------------------------------- */
.callout {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  margin: 22px 0;
  border: 1px solid var(--brand-100);
  border-inline-start: 3px solid var(--brand-500);
  border-radius: var(--r-md);
  background: var(--brand-50);
}
.callout:last-child { margin-bottom: 0; }
.callout__icon { color: var(--accent-text); flex: none; margin-top: 4px; }
.callout__icon svg { width: 20px; height: 20px; }
.callout p { margin: 0; font-size: .93rem; color: var(--text); }
.callout strong { display: block; margin-bottom: 2px; }

/* Definition rows -------------------------------------------------------- */
.def-list { margin: 0; }
.def-list dt {
  font-weight: 700;
  color: var(--ink);
  margin-top: 18px;
}
.def-list dt:first-child { margin-top: 0; }
.def-list dd {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Meta line (last updated) ----------------------------------------------- */
.doc-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .84rem;
}
.doc-meta svg { width: 16px; height: 16px; flex: none; }


/* ==========================================================================
   17. Accordion (tutorials)
   ========================================================================== */

.accordion { display: grid; gap: 14px; }

/* FAQ variant — same component, narrower measure so questions read as a list */
.accordion--faq {
  max-width: 860px;
  margin-inline: auto;
}

.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.acc-item.is-open {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

.acc-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.acc-trigger:hover { background: var(--surface); }

.acc-trigger__icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gradient-soft);
  border: 1px solid var(--brand-100);
  color: var(--accent-text);
  flex: none;
}
.acc-trigger__icon svg { width: 21px; height: 21px; }

.acc-trigger__text { flex: 1 1 auto; min-width: 0; }
.acc-trigger__sub {
  display: block;
  font-size: .85rem;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}

.acc-trigger__chev {
  flex: none;
  width: 20px; height: 20px;
  color: var(--faint);
  transition: transform var(--t-med), color var(--t-fast);
}
.acc-item.is-open .acc-trigger__chev {
  transform: rotate(180deg);
  color: var(--accent-text);
}

.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-med);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }

.acc-panel__inner {
  overflow: hidden;
  min-height: 0;
}

.acc-body {
  padding: 4px 24px 26px;
  border-top: 1px solid var(--line-soft);
  margin-top: 0;
}
.acc-body > *:first-child { margin-top: 18px; }
.acc-body p, .acc-body li { font-size: .95rem; }
.acc-body h4 { margin-top: 26px; }

/* Ordered steps inside a tutorial */
.steps-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tstep;
}
.steps-list > li {
  position: relative;
  padding-inline-start: 42px;
  padding-bottom: 22px;
  margin: 0;
}
.steps-list > li::before {
  counter-increment: tstep;
  content: counter(tstep);
  position: absolute;
  inset-inline-start: 0;
  top: 4px;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--accent-strong);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
}
.steps-list > li::after {
  content: "";
  position: absolute;
  inset-inline-start: 13px;
  top: 36px;
  bottom: 4px;
  width: 1px;
  background: var(--line);
}
.steps-list > li:last-child { padding-bottom: 0; }
.steps-list > li:last-child::after { display: none; }

.steps-list h4 { margin: 0 0 4px; font-size: 1rem; }
.steps-list p { margin: 0 0 10px; color: var(--muted); }


/* ==========================================================================
   18. Code blocks
   ========================================================================== */

.code-block {
  position: relative;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.code-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.code-block__lang {
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.copy-btn:hover { color: var(--accent-strong); border-color: var(--brand-200); background: var(--brand-50); }
.copy-btn svg { width: 14px; height: 14px; }
.copy-btn.is-copied { color: var(--success-600); border-color: var(--success-border); background: var(--success-50); }

.code-block pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--white);
  font-size: .84rem;
  line-height: 1.95;
  color: var(--text);
}
.code-block code { background: none; border: 0; padding: 0; color: inherit; display: block; }


/* ==========================================================================
   19. Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 62px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  padding-bottom: 46px;
}

.footer-brand .logo { margin-bottom: 14px; }

.footer-brand p {
  color: var(--muted);
  font-size: .93rem;
  max-width: 320px;
  margin-bottom: 18px;
}

.footer-col h3 {
  font-size: .95rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--ink);
}

.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  color: var(--muted);
  font-size: .93rem;
  transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.footer-col a:hover { color: var(--accent-text); }

.social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.social:hover {
  color: var(--accent-strong);
  border-color: var(--brand-200);
  transform: translateY(-2px);
}
.social svg { width: 18px; height: 18px; color: var(--accent-text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: .87rem;
}

.footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-bottom__links li { margin: 0; }
.footer-bottom__links a { color: var(--faint); }
.footer-bottom__links a:hover { color: var(--accent-text); }


/* ==========================================================================
   20. Service status
   ========================================================================== */

.status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.status__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.status__title {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
}

.status__state {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.6;
}

/* Live indicator — solid dot with a slowly expanding ring */
.status__pulse {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--success-600);
}
.status__pulse::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--success-600);
  opacity: .3;
}

.status__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.status__item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: .88rem;
  line-height: 1.6;
}

.status__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-600);
  box-shadow: 0 0 0 3px var(--success-50);
}

.status__label { color: var(--muted); }
.status__value { font-weight: 600; color: var(--success-600); }

@media (prefers-reduced-motion: no-preference) {
  .status__pulse::after { animation: status-ping 2.6s var(--ease) infinite; }
}

@keyframes status-ping {
  0%       { transform: scale(.8); opacity: .4; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}


/* ==========================================================================
   21. Utilities, animations & accessibility
   ========================================================================== */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* Screen-reader only */
.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 */
.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -60px;
  transform: translateX(50%);
  z-index: 200;
  padding: 10px 22px;
  border-radius: 0 0 var(--r-md) var(--r-md);
  /* Fixed, not tokenised: this always carries white text, so it needs a
     step dark enough for 4.5:1 in BOTH themes (#c2410c = 5.18:1). */
  background: #c2410c;
  color: #ffffff;
  font-size: .9rem;
  font-weight: 600;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; color: #ffffff; }

/* Visible focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scroll reveal */
.reveal {
  --reveal-y: 22px;
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  --reveal-y: 0px;
  opacity: 1;
}

/* Back-to-top button */
.to-top {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  z-index: 90;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--accent-text);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--accent-strong); border-color: var(--brand-200); }
.to-top svg { width: 20px; height: 20px; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   22. Responsive breakpoints
   ========================================================================== */

/* ---- ≤ 1080px ---------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --section-y: 80px; }

  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3)::after { display: none; }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .doc { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
}

/* ---- ≤ 960px ----------------------------------------------------------- */
@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .hero__subtitle { max-width: none; }
  .hero__visual { max-width: 560px; }

  .about-split { grid-template-columns: 1fr; gap: 38px; }

  /* Three plans stay side by side down to this width, then stack —
     a 2-column step would leave the third plan orphaned on its own row. */
  .pricing-grid { grid-template-columns: 1fr; }

  .grid--3,
  .grid--4,
  .feature-grid,
  .model-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Collapse the sticky ToC into a normal block above the article */
  .doc { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .toc li { margin: 0; }
}

/* ---- ≤ 860px : mobile navigation --------------------------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  .header-actions .btn { display: none; }

  .main-nav {
    /* .site-header carries a backdrop-filter, which makes it the containing
       block for FIXED descendants — so `position: fixed` collapsed this panel
       to the header's own height (63px) instead of filling the screen.
       Anchoring it to the header with `absolute` is equivalent visually and
       behaves the same whether or not backdrop-filter is supported. */
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h)); /* tracks collapsing mobile chrome */
    z-index: 99;
    padding: 22px var(--gutter) 40px;
    background: var(--white);
    border-top: 1px solid var(--line);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med);
  }

  .main-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .nav-list a {
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 1.02rem;
  }

  .nav-list .nav-cta {
    display: block;
    margin-top: 14px;
  }

  /* Restore the button look, which the generic .nav-list a rules would flatten */
  .nav-list .nav-cta .btn,
  .nav-list .nav-cta .btn:hover {
    display: flex;
    width: 100%;
    padding: 13px 26px;
    background-image: var(--gradient-brand);
    background-color: transparent;
    color: var(--on-brand);
    font-weight: 600;
  }
}

/* ---- ≤ 720px ----------------------------------------------------------- */
@media (max-width: 720px) {
  :root { --section-y: 66px; --gutter: 18px; }

  body { font-size: 15.5px; line-height: 1.95; }

  .hero { padding-block: 62px 76px; }

  .hero__actions .btn { flex: 1 1 100%; }

  .grid--2,
  .grid--3,
  .grid--4,
  .feature-grid,
  .model-grid,
  .pricing-grid,
  .steps,
  .audience-grid { grid-template-columns: 1fr; }

  .step::after { display: none; }

  .section-head { margin-bottom: 38px; }

  .card, .plan, .model, .step { padding: 26px 22px; }

  .status { padding: 22px 20px; gap: 16px; }
  .status__list { width: 100%; }
  .status__item { flex: 1 1 auto; justify-content: center; }

  .cta { padding: 46px 24px; border-radius: var(--r-xl); }
  .cta__actions .btn { flex: 1 1 100%; }

  .article > section { padding: 26px 22px; }

  .acc-trigger { padding: 16px 18px; gap: 12px; font-size: .97rem; }
  .acc-body { padding: 4px 18px 22px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom__links { justify-content: center; }

  .mock__chip {
    inset-inline-start: 50%;
    transform: translateX(50%);
    inset-block-end: -26px;
  }

  .to-top { inset-block-end: 18px; inset-inline-start: 18px; }
}

/* ---- ≤ 420px ----------------------------------------------------------- */
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
  .logo { font-size: 1.12rem; }
  .plan__amount { font-size: 1.9rem; }
}


/* ==========================================================================
   23. Contact channels
   --------------------------------------------------------------------------
   One component, three placements: the footer band, the contact page and the
   support / billing pages. Built from the existing tokens only.
   ========================================================================== */

/* Latin strings (emails) inside an RTL document: isolate the run so the
   shrink-wrapped box still sits on the RTL start edge. */
.mail {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-word;
}

.channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.channel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.channel:hover {
  transform: translateY(-3px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}

/* Support is the channel most users need — give it the brand edge */
.channel--support {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--white) 62%);
}

.channel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--accent-text);
}
.channel--support .channel__icon { background: var(--white); }
.channel__icon svg { width: 20px; height: 20px; }

.channel__label {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--muted);
}

.channel__mail {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
  transition: color var(--t-fast);
}
.channel__mail:hover { color: var(--accent-text); }

.channel__desc {
  font-size: .87rem;
  line-height: 1.85;
  color: var(--muted);
}

.channel__eta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  font-size: .8rem;
  color: var(--faint);
}
.channel__eta svg { width: 14px; height: 14px; flex: none; }


/* Copy-to-clipboard pill shown beside an address ------------------------- */
.copy-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.copy-mail:hover { color: var(--accent-strong); border-color: var(--brand-200); }
.copy-mail.is-copied {
  color: var(--success-600);
  border-color: var(--success-600);
  background: var(--success-50);
}
.copy-mail svg { width: 13px; height: 13px; flex: none; }


/* ==========================================================================
   24. Contact card (full width — contact / support / billing pages)
   ========================================================================== */

.contact-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 8px 20px;
  padding: 30px 32px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}
.contact-card:last-child { margin-bottom: 0; }

.contact-card--support { border-color: var(--brand-200); }

.contact-card__icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--accent-text);
}
.contact-card__icon svg { width: 26px; height: 26px; }

.contact-card__head h3 { margin: 0 0 8px; }

.contact-card__address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.contact-card__address a {
  display: inline-block;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--accent-text);
  word-break: break-word;
}
.contact-card__address a:hover { color: var(--accent-strong); }

.contact-card__body { grid-column: 2; }

.contact-card__body > p {
  margin-bottom: 12px;
  font-size: .95rem;
  color: var(--muted);
}

.contact-card ul {
  margin: 0 0 14px;
  padding-inline-start: 1.25em;
  font-size: .93rem;
}
.contact-card ul li { margin-bottom: .3em; color: var(--text); }
.contact-card ul li::marker { color: var(--brand-500); }

.contact-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: .84rem;
  color: var(--faint);
}
.contact-card__note svg { width: 15px; height: 15px; flex: none; }


/* ==========================================================================
   25. Trust bar
   ========================================================================== */

.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-xs);
}

.trust-item__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--accent-text);
}
.trust-item__icon svg { width: 18px; height: 18px; }

.trust-item strong {
  display: block;
  font-size: .95rem;
  line-height: 1.6;
}
.trust-item span {
  display: block;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--muted);
}


/* ==========================================================================
   26. Help topics (support hub routing grid)
   ========================================================================== */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.topic {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.topic:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

.topic__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border-radius: var(--r-sm);
  background: var(--brand-50);
  color: var(--accent-text);
}
.topic__icon svg { width: 21px; height: 21px; }

.topic h3 { margin-bottom: 8px; font-size: 1.06rem; }

.topic p {
  margin-bottom: 16px;
  font-size: .91rem;
  color: var(--muted);
}

.topic__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .9rem;
  font-weight: 600;
}
/* Chevron follows the reading direction */
.topic__link svg { width: 15px; height: 15px; flex: none; transform: scaleX(-1); }


/* ==========================================================================
   27. Footer contact band
   ========================================================================== */

.footer-contact {
  padding-bottom: 40px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}

.footer-contact__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 20px;
  margin-bottom: 20px;
}

.footer-contact__head h2 {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 700;
}

.footer-contact__head p {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}


/* ==========================================================================
   28. Responsive — sections 23–27
   ========================================================================== */

@media (max-width: 1024px) {
  .trust-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The navigation gained two entries (پشتیبانی، تماس با ما). Between the
   mobile breakpoint and the wide layout the bar would otherwise wrap, so
   tighten the item spacing across that band only. */
@media (min-width: 861px) and (max-width: 1120px) {
  .nav-list { gap: 0; }
  .nav-list a { padding: 9px 9px; font-size: .89rem; }
  .header-actions .btn { --btn-px: 15px; font-size: .84rem; }
}

@media (max-width: 860px) {
  .channels,
  .topic-grid { grid-template-columns: 1fr; }

  .contact-card {
    grid-template-columns: 1fr;
    padding: 26px 22px;
  }
  .contact-card__icon { grid-row: auto; margin-bottom: 6px; }
  .contact-card__body { grid-column: 1; }

  .footer-contact { padding-bottom: 32px; margin-bottom: 34px; }
}

@media (max-width: 520px) {
  .trust-bar { grid-template-columns: 1fr; }
  .contact-card__address a { font-size: 1rem; }
}


/* ==========================================================================
   29. Mobile polish (320px – 768px)
   --------------------------------------------------------------------------
   Additive only — no existing rule is redefined except through these
   narrower media queries. Desktop and tablet output is unchanged.
   ========================================================================== */

/* ---- Mobile navigation ------------------------------------------------- */
@media (max-width: 860px) {
  .main-nav {
    /* Keep flick-scrolling inside the panel instead of chaining to the
       page behind it, and respect the home-indicator inset. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-block-end: calc(40px + env(safe-area-inset-bottom));
  }

  /* 42px → 44px: the WCAG 2.5.5 target minimum.
     .theme-toggle gets the same bump in section 30, where its base rule is
     defined — placing it here would lose on source order. */
  .nav-toggle { width: 44px; height: 44px; }
}


/* ---- ≤ 768px ----------------------------------------------------------- */
@media (max-width: 768px) {
  /* The hero's `1fr` column resolves to minmax(auto, 1fr), so the code
     preview's 326px min-content forced the track wider than the container
     and .hero's overflow:hidden silently clipped ~22px off every child.
     min-width:0 lets the track shrink; .mock__body already scrolls. */
  .hero__content,
  .hero__visual { min-width: 0; }

  /* Centred with only inset-inline-start:50%, the chip's shrink-to-fit width
     was capped at half the container, wrapping its label onto 3–4 lines. */
  .mock__chip {
    width: max-content;
    max-width: calc(100% - 24px);
  }

  /* Inner-page headers kept their full 72/64 desktop rhythm on phones */
  .page-header { padding-block: 48px 42px; }

  /* Two status pills shared one row and clipped their values */
  .status__item { flex: 1 1 100%; }

  /* h2 + caption were pushed to opposite edges mid-wrap; stack them */
  .footer-contact__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  /* ~31px pills were below the WCAG 2.5.8 touch minimum */
  .copy-mail,
  .copy-btn { padding: 9px 14px; }

  /* Footer legal links sat on ~17px tap rows once wrapped */
  .footer-bottom__links { gap: 2px 18px; }
  .footer-bottom__links a { display: block; padding-block: 7px; }

  /* Clear the home indicator on gesture-nav phones */
  .to-top { inset-block-end: calc(18px + env(safe-area-inset-bottom)); }
}


/* ---- ≤ 480px ----------------------------------------------------------- */
@media (max-width: 480px) {
  /* .btn is white-space: nowrap, so long Persian labels — and the full
     address used as a button label on the privacy page — overflowed the
     viewport. Allow wrapping; `anywhere` also breaks the address, which
     has no spaces to wrap at. */
  .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .btn--lg { --btn-px: 20px; font-size: .97rem; }

  /* Sibling buttons in article prose stack instead of overflowing */
  .article .btn { width: 100%; }

  /* Fewer horizontal-scroll pixels in the hero code sample */
  .mock__body { padding: 16px; font-size: .74rem; }

  /* Long model names ("Claude Opus 5 (1M Token)") need the full row */
  .model__head { gap: 12px; }
}


/* ---- ≤ 420px ----------------------------------------------------------- */
@media (max-width: 420px) {
  /* Reclaim ~54px of row width for the accordion question text */
  .acc-trigger { gap: 12px; padding: 15px 16px; }
  .acc-trigger__icon { width: 36px; height: 36px; border-radius: 10px; }
  .acc-trigger__icon svg { width: 18px; height: 18px; }
  .acc-body { padding-inline: 16px; }

  .cta { padding: 40px 20px; }
}


/* ---- ≤ 380px (iPhone SE / small Android) -------------------------------- */
@media (max-width: 380px) {
  :root { --gutter: 16px; }

  /* Card padding was eating a third of a 320px viewport */
  .channel        { padding: 20px 18px; }
  .contact-card   { padding: 22px 18px; }
  .topic          { padding: 22px 20px; }
  .trust-item     { padding: 16px; }
  .card, .plan, .model, .step { padding: 24px 18px; }
  .article > section { padding: 24px 18px; }

  /* Breadcrumb and eyebrows stay on one line */
  .breadcrumb { font-size: .82rem; }
}


/* ==========================================================================
   30. Theme transition + theme toggle
   ========================================================================== */

/* Cross-fade only the four colour properties, on the elements that actually
   carry a themed colour. A universal `transition: all` would fight the
   existing transform/opacity animations and cost paint time on every hover. */
body,
.site-header,
.section--surface,
.card, .plan, .model, .step, .topic, .channel, .contact-card, .trust-item,
.status, .status__item, .acc-item, .acc-trigger, .code-block, .code-block pre,
.code-block__head, .callout, .toc, .toc a, .article > section, .mock,
.mock__bar, .mock__body, .mock__chip, .badge, .tag, .social, .btn--ghost,
.copy-btn, .copy-mail, .nav-toggle, .theme-toggle, .site-footer, .doc-meta,
:not(pre) > code, .main-nav, .page-header, .hero {
  transition:
    background-color var(--t-theme),
    border-color var(--t-theme),
    color var(--t-theme),
    box-shadow var(--t-theme);
}

/* Colour-only cross-fade must not cancel the motion these already animate. */
.btn--ghost, .social, .copy-btn, .copy-mail, .nav-toggle, .theme-toggle {
  transition:
    background-color var(--t-theme),
    border-color var(--t-theme),
    color var(--t-theme),
    box-shadow var(--t-theme),
    transform var(--t-fast);
}

/* While the theme is switching, suppress transitions on everything else so
   the change lands as one clean fade instead of dozens of staggered ones. */
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color var(--t-theme),
              border-color var(--t-theme),
              color var(--t-theme),
              box-shadow var(--t-theme) !important;
}


/* Toggle button — mirrors .nav-toggle's geometry so the header bar keeps
   its exact height and rhythm. */
.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--muted);
  cursor: pointer;
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--brand-200);
  background: var(--brand-50);
}

/* Both icons occupy the same grid cell, so swapping them shifts nothing. */
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 19px;
  height: 19px;
  transition: opacity var(--t-med), transform var(--t-med);
}

/* Light theme shows the moon (the action: "switch to dark") */
.theme-toggle__sun  { opacity: 0; transform: rotate(-70deg) scale(.55); }
.theme-toggle__moon { opacity: 1; transform: none; }

[data-theme="dark"] .theme-toggle__sun  { opacity: 1; transform: none; }
[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(70deg) scale(.55); }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
}

/* Matches the .nav-toggle bump to the WCAG 2.5.5 minimum touch target.
   Declared here rather than in the ≤860px block so it wins on source order. */
@media (max-width: 860px) {
  .theme-toggle { width: 44px; height: 44px; }
}


/* ==========================================================================
   31. Dark-theme component corrections
   --------------------------------------------------------------------------
   The variable swap covers almost everything. These few rules exist because
   a value was structurally light-specific rather than merely a colour.
   ========================================================================== */

/* Card surfaces read as *raised* in light mode via a shadow. On dark
   backgrounds shadows are nearly invisible, so elevation comes from the
   border instead — this is why --line is a step lighter than --surface. */
[data-theme="dark"] .mock__bar,
[data-theme="dark"] .code-block__head {
  background: var(--surface-2);
}

/* The syntax sample sits on a slightly inset well so code reads as code */
[data-theme="dark"] .mock__body,
[data-theme="dark"] .code-block pre {
  background: #11161d;
}

/* Featured plan keeps its brand ring, but the glow becomes a flat border
   so it does not look like a neon halo. */
[data-theme="dark"] .plan--featured {
  border-color: var(--brand-400);
}

/* The sheen on primary buttons is calibrated for light backgrounds */
[data-theme="dark"] .btn--primary::after { opacity: 0; }
[data-theme="dark"] .btn--primary:hover::after { opacity: .55; }

/* Decorative hero blobs are already dim; blur them further so no hard
   edge shows against the darker page. */
[data-theme="dark"] .hero__blob { filter: blur(90px); opacity: .75; }

/* Scrollbars follow the theme (Firefox + Chromium) */
[data-theme="dark"] { scrollbar-color: var(--line) var(--bg); }