/* ═══════════════════════════════════════════════════════════════════════════
   Krizma — marketing site
   Every colour, radius and type size below is lifted from the app itself:
   lib/theme/app_colors.dart, app_dimens.dart, app_text_styles.dart.
   The page chrome adapts to the visitor's light/dark preference; the phone
   mockups (.scr) never do — the app ships light-only, so they stay light.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter';
  src: url('/assets/Inter.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* Sindhi — AMBILE, the same face the app bundles (assets/fonts/AMBILE.ttf).
   Urdu gets Noto Nastaliq, also from the app. Both subsetted to the scripts
   actually used on this page. */
@font-face {
  font-family: 'Ambile';
  src: url('/assets/Ambile.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Nastaliq Urdu';
  src: url('/assets/NastaliqUrdu.woff2') format('woff2');
  font-display: swap;
}

/* Arabic-script runs opt in by language, so Latin text never picks these up. */
:lang(sd) { font-family: 'Ambile', 'Inter', sans-serif; }
:lang(ur) { font-family: 'Nastaliq Urdu', 'Ambile', 'Inter', sans-serif; line-height: 2.1; }

:root {
  /* ── App tokens (never themed) ───────────────────────────────────────── */
  --blue: #2563EB;          /* AppColors.primary */
  --blue-dark: #1D4ED8;     /* AppColors.primaryDark */
  --gold: #E0A828;          /* AppColors.pro */
  --red: #EF4444;           /* AppColors.alertRed */
  --green: #22C55E;         /* AppColors.online */
  --violet: #7C3AED;        /* AppColors.violetTileIcon */

  --app-text: #0F172A;
  --app-text2: #64748B;
  --app-ph: #94A3B8;
  --app-bg: #F8FAFC;
  --app-surface: #FFFFFF;
  --app-border: #E2E8F0;
  --app-border-soft: #F0F2F5;  /* AppColors.viewerDivider — inset hairlines */
  --app-tint: #F1F5FF;

  --sell-bg: #EFF4FF;  --sell-fg: #2563EB;
  --ex-bg:   #FEF6E7;  --ex-fg:   #B45309;
  --free-bg: #EAF9F0;  --free-fg: #15803D;

  /* ── Page chrome (themed) ────────────────────────────────────────────── */
  --bg: #F8FAFC;
  --bg-alt: #FFFFFF;
  --surface: #FFFFFF;
  --text: #0F172A;
  --text2: #64748B;
  --border: #E2E8F0;
  --border-soft: #EEF1F6;
  --tint: #F1F5FF;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 1px 4px rgba(15,23,42,.06);
  --shadow-lg: 0 8px 24px rgba(15,23,42,.06);
  --shadow-xl: 0 32px 64px -24px rgba(15,23,42,.28), 0 8px 24px rgba(15,23,42,.06);
  --ring: 0 0 0 3px rgba(37,99,235,.12);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 28px;
  --pad: clamp(20px, 5vw, 40px);
  --gap: clamp(24px, 4vw, 48px);
  --sec-y: clamp(72px, 10vw, 132px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1220;
    --bg-alt: #0F172A;
    --surface: #131C2E;
    --text: #E8EDF6;
    --text2: #94A3B8;
    --border: #1F2A3D;
    --border-soft: #1A2334;
    --tint: #16223A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 1px 4px rgba(0,0,0,.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,.45);
    --shadow-xl: 0 32px 64px -24px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.4);
  }
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px; line-height: 24px; font-weight: 400;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Lucide's own presentation defaults, set once here instead of on every
   symbol. #i-heart-solid opts out via fill/stroke attributes on its path
   (presentation attributes beat values inherited into the <use> shadow tree). */
.ic {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.sr-only, .skip:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; z-index: 200; top: 12px; left: 12px; width: auto; height: auto;
  clip: auto; padding: 10px 16px; background: var(--blue); color: #fff;
  border-radius: var(--r-md); font-weight: 600;
}
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); }
.wrap-narrow { max-width: 820px; }

/* ── Reveal on scroll ──────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); }
.js .reveal { transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in, .no-js .reveal { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

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

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 26px; border: 0; border-radius: var(--r-md);
  font-size: 16px; font-weight: 600; line-height: 24px; cursor: pointer;
  white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn .ic { font-size: 18px; transition: transform .22s ease; }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 4px 12px rgba(37,99,235,.15); }
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 8px 22px rgba(37,99,235,.28); }
.btn-invert { background: #fff; color: var(--blue); box-shadow: 0 8px 24px rgba(2,6,23,.18); }
.btn-invert:hover { background: #F1F5FF; }
.btn-sm { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 16.5px; }

/* ═══ NAV ═══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.nav.stuck { border-bottom-color: var(--border); }
.nav-in { display: flex; align-items: center; gap: 20px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark { width: 34px; height: auto; }
.brand-word { font-size: 21px; font-weight: 700; letter-spacing: -.4px; }

.nav-links { display: flex; gap: 4px; margin-inline-start: auto; }
.nav-links a {
  padding: 8px 14px; border-radius: 9px; font-size: 15px; font-weight: 500;
  color: var(--text2); transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--text); background: var(--tint); }

.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-count { font-size: 13.5px; color: var(--text2); white-space: nowrap; }
.nav-count b { color: var(--text); font-weight: 600; }

.nav-burger {
  display: none; width: 42px; height: 42px; margin-inline-start: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.nav-burger span { width: 17px; height: 2px; border-radius: 2px; background: var(--text); transition: transform .25s ease, opacity .2s ease; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.nav-sheet { display: none; flex-direction: column; gap: 4px; padding: 8px var(--pad) 20px; border-top: 1px solid var(--border); background: var(--bg); }
.nav-sheet a { padding: 12px 4px; font-size: 16px; font-weight: 500; color: var(--text2); }
.nav-sheet a.btn { margin-top: 8px; color: #fff; justify-content: center; }

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-sheet:not([hidden]) { display: flex; }
}

/* ═══ HERO ══════════════════════════════════════════════════════════════ */
.hero { position: relative; padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); overflow: hidden; }
.hero-glow {
  position: absolute; inset: -30% -20% auto -20%; height: 900px; pointer-events: none;
  background:
    radial-gradient(46% 42% at 22% 30%, rgba(37,99,235,.20), transparent 68%),
    radial-gradient(38% 40% at 78% 20%, rgba(124,58,237,.16), transparent 66%),
    radial-gradient(40% 36% at 62% 66%, rgba(224,168,40,.12), transparent 66%);
  filter: blur(10px);
}
@media (prefers-color-scheme: dark) {
  .hero-glow { background:
    radial-gradient(46% 42% at 22% 30%, rgba(37,99,235,.30), transparent 68%),
    radial-gradient(38% 40% at 78% 20%, rgba(124,58,237,.24), transparent 66%),
    radial-gradient(40% 36% at 62% 66%, rgba(224,168,40,.14), transparent 66%); }
}

.hero-in {
  position: relative; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
}
@media (max-width: 980px) { .hero-in { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px;
  padding: 7px 16px 7px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  font-size: 13.5px; font-weight: 600; color: var(--text2); letter-spacing: .01em;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.16); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,.16); } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,.05); } }

.hero h1 {
  font-size: clamp(42px, 7.2vw, 76px); line-height: 1.02; letter-spacing: -.035em;
  margin-bottom: 22px; text-wrap: balance;
}
.grad {
  background: linear-gradient(96deg, var(--blue) 8%, var(--violet) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-block;
}
.lede { max-width: 34em; font-size: clamp(16.5px, 1.9vw, 19.5px); line-height: 1.62; color: var(--text2); }
.lede strong { color: var(--text); font-weight: 600; }

.hero-form { margin: 30px 0 22px; max-width: 520px; }
.field-row { display: flex; gap: 10px; }
.field-row input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 16px; box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field-row input::placeholder { color: var(--app-ph); }
.field-row input:focus { outline: none; border-color: var(--blue); box-shadow: var(--ring), var(--shadow-sm); }
.field-row input[aria-invalid="true"] { border-color: var(--red); }
@media (max-width: 520px) { .field-row { flex-direction: column; } .field-row .btn { width: 100%; } }

.form-msg { min-height: 20px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--text2); }
.form-msg.ok { color: var(--free-fg); font-weight: 600; }
.form-msg.err { color: var(--red); font-weight: 600; }

.proof { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.proof-faces { display: flex; }
.proof-faces span {
  width: 34px; height: 34px; margin-inline-end: -10px; border-radius: 50%;
  border: 2.5px solid var(--bg); background: var(--c); color: #fff;
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; letter-spacing: .2px;
}
.proof p { font-size: 14px; line-height: 20px; color: var(--text2); }
.proof b { color: var(--text); font-weight: 700; }

/* ── Hero phone + floating chiplets ────────────────────────────────────── */
.hero-phone { display: flex; justify-content: center; }
.float { position: relative; animation: bob 8s ease-in-out infinite; }
.float.slow { animation-duration: 11s; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.chiplet {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px; background: var(--app-surface);
  border: 1px solid var(--app-border); box-shadow: 0 12px 28px rgba(15,23,42,.14);
  font-size: 13px; font-weight: 600; color: var(--app-text); white-space: nowrap;
}
.chiplet .ic { font-size: 15px; color: var(--blue); }
/* Parked over the device's rounded corners — the least information-dense part
   of the mockup, so the badges never sit on top of real UI. */
.chiplet-a { top: 4%; left: -56px; animation: bob 7s ease-in-out infinite reverse; }
.chiplet-b { bottom: 18%; right: -58px; animation: bob 9s ease-in-out .6s infinite; }
.chiplet-b .ic { color: var(--ex-fg); }
@media (max-width: 1080px) { .chiplet-a { left: -26px; } .chiplet-b { right: -26px; } }
@media (max-width: 420px) { .chiplet { display: none; } }

/* ═══ PHONE SHELL ═══════════════════════════════════════════════════════ */
.phone {
  position: relative; width: 320px; padding: 11px; border-radius: 46px;
  background: linear-gradient(158deg, #2A3547, #0B1220 55%, #1B2436);
  box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,.09);
}
.phone::before { /* side button */
  content: ''; position: absolute; right: -2px; top: 132px; width: 2.5px; height: 58px;
  border-radius: 2px; background: #3A465C;
}
.phone-sm { width: 268px; padding: 9px; border-radius: 40px; }
.phone-screen {
  position: relative; overflow: hidden; border-radius: 36px;
  height: 640px; background: var(--app-bg);
  display: flex; flex-direction: column;
}
.phone-sm .phone-screen { border-radius: 32px; height: 620px; }
.phone-screen::after { /* notch island */
  content: ''; position: absolute; z-index: 6; top: 9px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 22px; border-radius: 999px; background: #0B1220;
}
.phone-sm .phone-screen::after { width: 70px; height: 19px; top: 8px; }

/* ═══ APP SCREENS — rebuilt from the Flutter widgets ════════════════════
   Sizes match lib/theme/app_dimens.dart; type matches app_text_styles.dart.
   ═══════════════════════════════════════════════════════════════════════ */
.scr {
  font-size: 14px; line-height: 20px; color: var(--app-text);
  -webkit-user-select: none; user-select: none;
}
.scr .ic { stroke-width: 2; }

.scr-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px 6px; font-size: 12.5px; font-weight: 600; color: var(--app-text);
}
.scr-status .sig { display: inline-flex; align-items: flex-end; gap: 2px; }
.scr-status .sig i { width: 3px; border-radius: 1px; background: var(--app-text); }
.scr-status .sig i:nth-child(1) { height: 5px; } .scr-status .sig i:nth-child(2) { height: 8px; } .scr-status .sig i:nth-child(3) { height: 11px; }
.scr-status .sig b { width: 18px; height: 9px; margin-left: 4px; border: 1.2px solid var(--app-text); border-radius: 2.5px; position: relative; }
.scr-status .sig b::after { content: ''; position: absolute; inset: 1.5px; width: 9px; background: var(--app-text); border-radius: 1px; }

/* Home: search row (h48) + filter button (48) */
.scr-searchrow { display: flex; gap: 8px; padding: 8px 15px 0; }
.scr-search {
  flex: 1; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 13px;
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.06); font-size: 12.5px; color: var(--app-ph);
  overflow: hidden;
}
.scr-search span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-search .ic { font-size: 15px; color: var(--app-ph); }
.scr-filterbtn {
  position: relative; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.06); color: var(--app-text);
}
.scr-filterbtn .ic { font-size: 17px; }
.scr-filterbtn .badge { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); border: 1.5px solid #fff; }

.scr-chips { display: flex; gap: 8px; padding: 12px 15px 4px; overflow: hidden; }
.scr-chips .chip {
  height: 30px; padding: 0 13px; display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface);
  font-size: 12.5px; font-weight: 500; color: #475569;
}
.scr-chips .chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.scr-feed { flex: 1; overflow: hidden; padding: 12px 15px 0; display: flex; flex-direction: column; gap: 14px; }
.scr-feed::after { content: ''; position: absolute; left: 0; right: 0; bottom: 62px; height: 56px; background: linear-gradient(transparent, var(--app-bg)); pointer-events: none; }

/* BookPostCard — padding 16, radius 16, 1px #E2E8F0, shadow 0 1px 2px */
.pcard {
  padding: 13px; background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--r-lg); box-shadow: 0 1px 2px rgba(15,23,42,.06); flex: none;
}
.pc-head { display: flex; align-items: center; gap: 9px; }
.ava {
  width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--c, var(--blue));
  color: #fff; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
}
.ava.sm { width: 30px; height: 30px; font-size: 11px; }
.ava.xl { width: 72px; height: 72px; font-size: 24px; margin: 0 auto; }
.pc-id { flex: 1; min-width: 0; }
.pc-name { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; line-height: 18px; }
/* NB: named `crownbadge`, not `pro` — `.pro` is the Krizma Pro *section*. */
.verif, .crownbadge {
  width: 14px; height: 14px; flex: none; border-radius: 50%; background: var(--blue);
  color: #fff; display: grid; place-items: center;
}
.verif .ic { font-size: 9px; stroke-width: 3.4; }
.crownbadge { background: var(--gold); } .crownbadge .ic { font-size: 9px; }
.pc-meta { display: flex; align-items: center; gap: 3px; margin-top: 1px; font-size: 11px; line-height: 15px; color: var(--app-text2); }
.pc-meta .ic { font-size: 11px; }
.pc-time { font-size: 10.5px; color: var(--app-ph); flex: none; }

.pc-body { display: flex; gap: 12px; margin-top: 11px; }
.pc-info { flex: 1; min-width: 0; }
.pc-info h3 { font-size: 13.5px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; }
.pc-info p { margin-top: 2px; font-size: 11.5px; line-height: 16px; color: var(--app-text2); }
.pc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pc-chips.ctr { justify-content: center; }

/* Listing chips — 10% tints straight from AppColors */
.lc { height: 21px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.lc-sell { background: var(--sell-bg); color: var(--sell-fg); }
.lc-ex   { background: var(--ex-bg);   color: var(--ex-fg); }
.lc-free { background: var(--free-bg); color: var(--free-fg); }

.ochip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; height: 22px; padding: 0 9px;
  border: 1px solid var(--app-border); border-radius: 999px; background: var(--app-surface);
  font-size: 10.5px; font-weight: 600; color: #475569; white-space: nowrap;
}
.ochip .ic { font-size: 11px; color: var(--app-text2); }
.ochip em { font-style: normal; font-weight: 400; color: var(--app-ph); }

/* Book covers — CSS art standing in for the catalogue's real jackets */
/* Real catalogue covers (media/books). The app draws them with BoxFit.cover
   inside a 3:4 box — object-fit: cover on a 3/4 aspect box is the same crop. */
.cover {
  /* display:block matters — .cover is a <span>, and outside a flex/grid
     parent (the detail screen) an inline box ignores width and aspect-ratio. */
  display: block;
  position: relative; width: 92px; flex: none; border-radius: var(--r-sm);
  overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.18);
  aspect-ratio: 3 / 4; background: var(--app-border);
}
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.big { width: 88px; margin: 0 auto 12px; }
.cover.xs { width: 30px; border-radius: 4px; box-shadow: none; }

.pc-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--app-border); }
.pc-foot .grow { flex: 1; }
.act { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.act .ic { font-size: 13px; }
.like { color: var(--app-text2); border: 1px solid var(--app-border); }
/* Saved state uses the solid Material heart, exactly as _LikeButton does. */
.like.on { color: var(--red); border-color: #FEE2E2; background: #FEF2F2; }
.ghost { color: var(--app-text2); border: 1px solid var(--app-border); }
.msg { background: var(--app-tint); color: var(--blue); }

/* Bottom nav — h64, 5 slots with the centre FAB */
.scr-nav {
  position: relative; z-index: 4; display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; height: 62px; padding-bottom: 4px;
  background: var(--app-surface); border-top: 1px solid var(--app-border);
}
.scr-nav > span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 500; color: var(--app-ph); }
.scr-nav > span .ic { font-size: 19px; }
.scr-nav > span.on { color: var(--blue); font-weight: 600; }
.scr-nav .fab {
  width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(37,99,235,.4);
}
.scr-nav .fab .ic { font-size: 21px; stroke-width: 2.6; }

/* ── Sub-screen bar ────────────────────────────────────────────────────── */
.scr-bar {
  display: flex; align-items: center; gap: 9px; padding: 46px 15px 12px;
  background: var(--app-surface); border-bottom: 1px solid var(--app-border);
  font-size: 14px; font-weight: 600;
}
.scr-bar > span:nth-child(2):not(.ava) { flex: 1; }
.scr-bar .bk { width: 26px; height: 26px; display: grid; place-items: center; color: var(--app-text2); font-size: 17px; flex: none; }
.scr-bar .bk .ic { font-size: 16px; }
.scr-bar .bk.sm-link { width: auto; font-size: 10.5px; font-weight: 600; color: var(--blue); }
.scr-bar.convo { padding-inline: 12px; }
.cv-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cv-id b { font-size: 13px; line-height: 17px; }
.cv-id em { font-style: normal; font-size: 10.5px; line-height: 14px; color: var(--green); font-weight: 500; }
.cv-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--app-tint); color: var(--blue); flex: none; }
.cv-ic .ic { font-size: 15px; }

/* ── Book detail ───────────────────────────────────────────────────────── */
/* The scrollable panes below are clipped on purpose — the mask makes that
   read as "there's more down there" rather than as a broken screenshot. */
.detail, .prof {
  flex: 1; overflow: hidden; padding: 14px 18px; text-align: center; background: var(--app-surface);
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
.detail { padding-bottom: 0; }
.detail h3 { font-size: 16px; line-height: 21px; letter-spacing: -.02em; }
.detail .by { margin-top: 3px; font-size: 12px; color: var(--app-text2); }
.detail .pc-chips { margin-top: 10px; }
.price { margin: 13px 0; padding: 11px; border-radius: var(--r-md); background: var(--app-tint); }
.price span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .09em; color: var(--app-text2); }
.price b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--blue); }
.price em { font-style: normal; margin-left: 5px; font-size: 11px; color: var(--app-text2); }
.drow { display: flex; justify-content: space-between; padding: 9px 2px; border-top: 1px solid var(--app-border-soft); font-size: 11.5px; color: var(--app-text2); }
.drow b { font-weight: 600; color: var(--app-text); }
.dbtn {
  height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: var(--r-md); background: var(--blue); color: #fff;
  font-size: 13.5px; font-weight: 600; box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.dbtn .ic { font-size: 15px; }
/* Detail screen pins its CTA, so the scrolling spec list can never bury it. */
.detail-cta { flex: none; padding: 10px 18px 18px; background: var(--app-surface); border-top: 1px solid var(--app-border-soft); }
.detail-cta .dbtn { display: flex; }

/* ── Conversation ──────────────────────────────────────────────────────── */
.ctx { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--app-tint); border-bottom: 1px solid #DBE6FE; }
.ctx b { display: block; font-size: 11.5px; line-height: 15px; }
.ctx em { font-style: normal; font-size: 10px; color: var(--app-text2); }
.thread { flex: 1; overflow: hidden; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.day { align-self: center; margin-bottom: 4px; padding: 3px 11px; border-radius: 999px; background: #E9EEF5; font-size: 9.5px; font-weight: 600; color: var(--app-text2); }
.mb {
  position: relative; max-width: 78%; padding: 8px 11px; font-size: 12px; line-height: 17px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.mb.in { align-self: flex-start; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 14px 14px 14px 4px; }
.mb.out { align-self: flex-end; background: var(--blue); color: #fff; border-radius: 14px 14px 4px 14px; padding-right: 30px; }
/* Read receipt — LucideIcons.check_check, as message_bubble.dart uses. */
.mb .tick { position: absolute; right: 8px; bottom: 5px; display: flex; font-size: 12px; opacity: .85; }
.mb.typing { display: inline-flex; gap: 4px; padding: 12px; }
.mb.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--app-ph); animation: blink 1.3s ease-in-out infinite; }
.mb.typing i:nth-child(2) { animation-delay: .18s; } .mb.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.composer { display: flex; align-items: center; gap: 8px; padding: 10px 12px 16px; background: var(--app-surface); border-top: 1px solid var(--app-border); }
.cm-in { flex: 1; height: 34px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: var(--app-bg); border: 1px solid var(--app-border); font-size: 12px; color: var(--app-ph); }
.cm-ic { color: var(--app-text2); display: grid; place-items: center; }
.cm-ic .ic { font-size: 17px; }

/* ── Profile ─────────────────────────────────────────────────────────────
   profile_screen.dart + widgets/profile/*. Stats are Listed / Likes given /
   Likes received (profile_screen.dart:420) — not ratings; the action row is
   Message · Audio · Video · Report · Block (profile_action_button.dart:46+).
   ─────────────────────────────────────────────────────────────────────── */
.prof-bar { display: flex; align-items: center; padding: 26px 0 2px; }  /* SafeArea inset */
.prof-bar .grow { flex: 1; }
.pill {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--app-surface); border: 1px solid var(--app-border);
  box-shadow: 0 1px 2px rgba(15,23,42,.06); color: var(--app-text);
}
.pill .ic { font-size: 15px; }

.prof-hero { display: flex; flex-direction: column; align-items: center; }
.pfp {
  position: relative; width: 70px; height: 70px; border-radius: 50%;
  background: var(--c, var(--blue)); color: #fff; display: grid; place-items: center;
  font-size: 24px; font-weight: 600;
}
.pfp-badge {
  position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px;
  border-radius: 50%; background: var(--blue); color: #fff;
  display: grid; place-items: center; border: 3px solid var(--app-surface);
}
.pfp-badge .ic { font-size: 9px; stroke-width: 3.2; }
.prof h3 { margin-top: 9px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.prof-loc { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--app-text2); }
.prof-loc .ic { font-size: 11px; }

/* ProfileStatsCard: radius 16, 1px border, shadow 1, 12v padding, dividers */
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px;
  padding: 9px 0; border-radius: var(--r-lg); background: var(--app-surface);
  border: 1px solid var(--app-border); box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.stats span { display: flex; flex-direction: column; align-items: center; }
.stats span + span { border-left: 1px solid var(--app-border); }
.stats b { font-size: 14.5px; font-weight: 700; line-height: 19px; }
.stats em { font-style: normal; margin-top: 1px; font-size: 8.5px; font-weight: 500; color: var(--app-text2); }

/* ProfileActionRow: h62 buttons, 22px icon over an 11px label */
.pact { display: flex; gap: 5px; margin-top: 11px; }
.pa {
  position: relative; flex: 1; min-width: 0; height: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--r-md); background: var(--app-surface); border: 1px solid var(--app-border);
  /* line-height:1 is load-bearing — body sets a flat 24px, which gave this 8px
     label a 24px line box and pushed the icon flush against the top border. */
  font-size: 8px; line-height: 1; font-weight: 500; color: var(--blue);
}
.pa .ic { font-size: 16px; }
.pa.muted { color: var(--app-text2); }
.pa.danger { color: var(--red); }

/* ProfileSectionTitle: 16/22 w600, 22 above / 10 below */
.prof h4 { margin: 14px 0 7px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--app-text); text-align: left; }
.prof h4.with-link { display: flex; align-items: center; justify-content: space-between; }
.prof h4.with-link em { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--blue); }
.prof-about { font-size: 11px; line-height: 16px; text-align: left; }
/* ProfileChip: padding 14/7, pill, white + 1px border, 13/18 w500 */
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.tagrow span { padding: 4px 11px; border-radius: 999px; background: var(--app-surface); border: 1px solid var(--app-border); font-size: 10px; font-weight: 500; color: var(--app-text); }
/* Profile listings tabs — scaled to this screen, which runs ~30% smaller
   type than the home feed the .chip base size was drawn for. */
.scr-chips.flush { padding: 0 0 9px; }
.scr-chips.flush .chip { height: 23px; padding: 0 9px; font-size: 9.5px; }
.minigrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.minigrid .cover { width: 100%; border-radius: var(--r-md); }

/* ── Alerts ──────────────────────────────────────────────────────────────
   alerts_screen.dart + widgets/alerts/alert_row.dart. Rows are cards, not
   list items: 14v/16h padding, radius 12, 10 apart. Unread = #F1F5FF on a
   #DBE6FE border with a trailing 8px blue dot; read = white + shadow 1.
   Lead is one avatar, a 3-up cluster, or a rounded icon tile.
   ─────────────────────────────────────────────────────────────────────── */
.alerts {
  flex: 1; overflow: hidden; padding: 0 15px; background: var(--app-bg);
  -webkit-mask-image: linear-gradient(#000 90%, transparent);
  mask-image: linear-gradient(#000 90%, transparent);
}
/* Top inset stands in for the app's SafeArea — without it the title runs
   under the notch. alerts_screen.dart pads 20/12/20/8 below that inset. */
.al-head { display: flex; align-items: flex-end; padding: 44px 0 6px; }
.al-head h3 { flex: 1; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.al-head em { font-style: normal; padding-bottom: 4px; font-size: 10px; font-weight: 500; color: var(--blue); }
.grp { display: block; padding: 11px 0 6px; font-size: 9px; font-weight: 600; letter-spacing: .04em; color: var(--app-text2); }

.al {
  display: flex; align-items: center; gap: 9px; margin-bottom: 8px;
  padding: 10px 11px; border-radius: var(--r-md);
  background: var(--app-surface); border: 1px solid var(--app-border);
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.al.unread { background: var(--app-tint); border-color: #DBE6FE; box-shadow: none; }

.al-lead {
  position: relative; width: 33px; height: 33px; flex: none; border-radius: 50%;
  background: var(--c, var(--blue)); color: #fff; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 600;
}
.al-lead.blurred { filter: blur(1.4px); }   /* frosted until Pro */
.al-lead.stack { background: none; }
.al-lead.stack i {
  position: absolute; left: calc(var(--x) * .75); top: calc(var(--y) * .75);
  width: 21px; height: 21px; border-radius: 50%; background: var(--c);
  border: 2px solid var(--app-surface); color: #fff;
  display: grid; place-items: center; font-size: 7.5px; font-style: normal; font-weight: 600;
}
.al.unread .al-lead.stack i { border-color: var(--app-tint); }
.al-lead.tile { border-radius: 10px; background: var(--app-tint); color: var(--blue); }
.al.unread .al-lead.tile { background: var(--app-surface); }
.al-lead.tile .ic { font-size: 17px; }

.al-msg { flex: 1; min-width: 0; font-size: 10.5px; line-height: 15px; color: var(--app-text); }
.al-msg b { font-weight: 600; }
.al-msg em { display: block; margin-top: 2px; font-style: normal; font-size: 9px; color: var(--app-text2); }
.al-thumb { width: 26px; flex: none; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.06); }
.al-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-chev { font-size: 14px; color: var(--app-ph); flex: none; }
.al-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--blue); }

/* ── Krizma Pro paywall ──────────────────────────────────────────────────
   krizma_pro_screen.dart. Header: #E7EFFE→#FFF gradient, 28px bottom radius,
   a blue→indigo crown tile and an X close pill. Benefits are full-bleed rows
   with a hairline inset to 73px. Plans are radio rows inside one card.
   ─────────────────────────────────────────────────────────────────────── */
.propane {
  position: relative; padding: 44px 20px 18px; text-align: center;
  background: linear-gradient(#E7EFFE, var(--app-surface));
  border-radius: 0 0 24px 24px;
}
.propane .pill.close { position: absolute; top: 40px; left: 14px; }
.propane .crown {
  width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center;
  border-radius: 15px; background: linear-gradient(135deg, var(--blue), #4F46E5);
  color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28);
}
.propane .crown .ic { font-size: 23px; }
.propane h3 { font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.propane p { margin-top: 4px; font-size: 11px; color: var(--app-text2); }

.prolist { padding: 2px 0 0; background: var(--app-surface); }
.pl { position: relative; display: flex; gap: 11px; align-items: center; padding: 7px 18px; }
.pl + .pl::before { content: ''; position: absolute; left: 59px; right: 0; top: 0; height: 1px; background: var(--app-border-soft); }
.pl > i { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; }
.pl > i .ic { font-size: 16px; }
.pl .t-blue   { background: var(--app-tint); color: var(--blue); }
.pl .t-amber  { background: var(--ex-bg);    color: var(--ex-fg); }
.pl .t-pink   { background: #FEE7EF;         color: var(--red); }
.pl .t-violet { background: #EDE9FE;         color: var(--violet); }
.pl b { display: block; font-size: 11px; line-height: 14px; font-weight: 600; }
.pl em { font-style: normal; font-size: 9.5px; color: var(--app-ph); }

.plan-h { padding: 12px 20px 6px; font-size: 8.5px; font-weight: 600; letter-spacing: .05em; color: var(--app-ph); background: var(--app-surface); }
.plans { margin: 0 16px; border: 1px solid var(--app-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.06); background: var(--app-surface); }
.plan { display: flex; align-items: center; gap: 9px; padding: 8px 11px; background: var(--app-surface); }
.plan + .plan { border-top: 1px solid var(--app-border); }
.plan.sel { background: var(--langSel, #F3F7FF); }
.radio { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid #CBD5E1; }
.radio.on { border: 4.5px solid var(--blue); }
.pn { flex: 1; min-width: 0; }
.pn b { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; }
.pn em, .pp em { display: block; font-style: normal; font-size: 9px; color: var(--app-text2); }
.pp { text-align: right; flex: none; }
.pp b { font-size: 12px; font-weight: 700; }
.inpill { padding: 1px 5px; border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.inpill.save { background: var(--free-bg); color: var(--free-fg); }
.inpill.best { background: var(--sell-bg); color: var(--sell-fg); }

.pro-foot { margin-top: auto; padding: 11px 16px 14px; background: var(--app-surface); text-align: center; }
.pro-foot .dbtn { width: 100%; }
.pro-foot em { display: block; margin-top: 7px; font-style: normal; font-size: 8px; line-height: 11px; color: var(--app-ph); }
.pro-foot .restore { display: block; margin-top: 6px; font-size: 9.5px; font-weight: 500; color: var(--blue); }

/* ═══ MODES STRIP ═══════════════════════════════════════════════════════ */
.strip { padding: 0 0 clamp(24px, 4vw, 40px); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 820px) { .strip-in { grid-template-columns: repeat(2, 1fr); } }
.mode {
  display: flex; flex-direction: column; gap: 3px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.mode b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.mode > span:last-child { font-size: 13.5px; line-height: 19px; color: var(--text2); }
.mi { width: 38px; height: 38px; margin-bottom: 9px; border-radius: 11px; display: grid; place-items: center; }
.mi .ic { font-size: 19px; }
.mi-sell { background: var(--sell-bg); color: var(--sell-fg); }
.mi-ex   { background: var(--ex-bg);   color: var(--ex-fg); }
.mi-free { background: var(--free-bg); color: var(--free-fg); }
.mi-buy  { background: #F3F0FF; color: var(--violet); }

/* ═══ SECTIONS ══════════════════════════════════════════════════════════ */
.sec { padding: var(--sec-y) 0; }
.sec-alt { background: var(--bg-alt); border-block: 1px solid var(--border); }
.sec-head { max-width: 660px; margin: 0 0 clamp(32px, 5vw, 56px); }
.kicker {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue);
}
.kicker.gold { color: var(--gold); } .kicker .ic { font-size: 15px; }
.sec h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; text-wrap: balance; }
.sub { margin-top: 16px; font-size: clamp(15.5px, 1.6vw, 18px); line-height: 1.62; color: var(--text2); }

/* ── Feature grid ──────────────────────────────────────────────────────── */
.grid-f { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-f .span2 { grid-column: span 2; }
@media (max-width: 980px) { .grid-f { grid-template-columns: repeat(2, 1fr); } .grid-f .span2 { grid-column: span 2; } }
@media (max-width: 620px) { .grid-f { grid-template-columns: 1fr; } .grid-f .span2 { grid-column: span 1; } }

.fcard {
  position: relative; overflow: hidden; padding: 26px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--blue) 35%, var(--border)); }
.fcard h3 { font-size: 19px; letter-spacing: -.02em; }
.fcard p { margin-top: 9px; font-size: 14.5px; line-height: 22px; color: var(--text2); }
.fi { width: 42px; height: 42px; margin-bottom: 16px; border-radius: 12px; display: grid; place-items: center; background: var(--tint); color: var(--blue); }
.fi .ic { font-size: 21px; }
.fcard.span2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: 24px; align-items: center; }
@media (max-width: 620px) { .fcard.span2 { grid-template-columns: 1fr; } }

/* Radar art */
.fc-art { display: grid; place-items: center; gap: 14px; }
.radar { position: relative; width: 100%; aspect-ratio: 1; max-width: 210px; display: grid; place-items: center; }
.radar .ring { position: absolute; border: 1px solid var(--border); border-radius: 50%; }
.radar .r1 { width: 34%; height: 34%; } .radar .r2 { width: 67%; height: 67%; } .radar .r3 { width: 100%; height: 100%; }
.radar .r2 { background: radial-gradient(circle, rgba(37,99,235,.09), transparent 70%); }
.radar .me { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(37,99,235,.18); }
.radar .blip { position: absolute; width: 10px; height: 10px; border-radius: 3px; animation: bob 5s ease-in-out infinite; }
.radar .b1 { top: 26%; left: 30%; background: var(--sell-fg); }
.radar .b2 { top: 38%; right: 20%; background: var(--ex-fg); animation-delay: .5s; }
.radar .b3 { bottom: 22%; left: 22%; background: var(--free-fg); animation-delay: 1s; }
.radar .b4 { bottom: 30%; right: 30%; background: var(--violet); animation-delay: 1.5s; }
.radius-ctl { width: 100%; max-width: 210px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 12px; color: var(--text2); }
.radius-ctl b { font-size: 12px; font-weight: 700; color: var(--text); }
.radius-ctl .track { grid-column: 1 / -1; position: relative; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--border); }
.radius-ctl .fill { position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: 2px; background: var(--blue); }
.radius-ctl .knob { position: absolute; top: 50%; left: 45%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; border: 3px solid var(--blue); box-shadow: var(--shadow-sm); }

.mini-list { margin-top: 18px; display: grid; gap: 7px; }
.mini-list span { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 14px; font-weight: 600; }
.mini-list em { margin-inline-start: auto; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--text2); }
.mc { width: 20px; height: 26px; border-radius: 3px; flex: none; }
.mc.a { background: linear-gradient(150deg,#1E3A8A,#60A5FA); }
.mc.b { background: linear-gradient(150deg,#7C2D12,#F59E0B); }
.mc.c { background: linear-gradient(150deg,#14532D,#4ADE80); }

.mini-chat { margin-top: 18px; display: flex; flex-direction: column; gap: 7px; }
.mini-chat .mb { max-width: 88%; font-size: 12.5px; }
.mini-chat .mb.in { background: var(--bg); border-color: var(--border); color: var(--text); }

.langs { display: grid; gap: 9px; width: 100%; }
.lang-card { display: flex; flex-direction: column; gap: 2px; padding: 12px 15px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.lang-card b { font-size: 14px; } .lang-card em { font-style: normal; font-size: 13px; color: var(--text2); }
.lang-card.rtl { direction: rtl; text-align: right; }

/* ── Steps ─────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; padding: 28px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.step-n {
  width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: 0 4px 12px rgba(37,99,235,.28);
}
.step h3 { font-size: 19px; letter-spacing: -.02em; }
.step p { margin-top: 9px; font-size: 14.5px; line-height: 22px; color: var(--text2); }
.step-art { margin-top: auto; padding-top: 22px; }
.mock-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); display: grid; gap: 10px; }
.mock-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.mock-lbl { width: 52px; flex: none; color: var(--text2); }
.mock-val { font-weight: 600; }
.mock-pills { display: flex; gap: 5px; }
.mock-pills .lc { opacity: .38; }
.mock-pills .lc.on { opacity: 1; }
.mock-btn { height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--blue); color: #fff; font-size: 13px; font-weight: 600; }
.mock-alert { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 17px; color: var(--text2); }
.mock-alert b { color: var(--text); font-weight: 600; }
.mock-chat { gap: 7px; }
.mock-chat .mb { max-width: 90%; font-size: 12.5px; }
.mock-chat .mb.in { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ── Gallery rail ──────────────────────────────────────────────────────── */
.gallery { overflow: hidden; }
.rail {
  display: flex; gap: clamp(20px, 3vw, 34px); padding-bottom: 20px;
  /* proximity, not mandatory: a mouse drag that stops between two phones
     should stay put rather than being yanked to the nearest one. */
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);

  /* Edge fade: the rail scrolls sideways and a 6px scrollbar is the only hint
     of it, so content dissolves at whichever edge still has phones behind it.
     main.js sets the two widths from the scroll position, which means each
     side ramps in as you move away from that end instead of snapping on, and
     stays at 0 when there is nothing more that way.

     A mask rather than overlaid gradients: this section's background is
     themed and gradient-backed, so a solid-colour overlay would have to match
     it in both colour schemes. Fading the content itself is right over
     anything. */
  --fade-l: 0px;
  --fade-r: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
          mask-image: linear-gradient(to right, transparent, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent);
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* Drag-to-scroll (main.js). Cursor only on pointer devices — a touch device
   scrolls the rail natively and never sees a grab cursor. */
@media (hover: hover) and (pointer: fine) {
  .rail { cursor: grab; }
  .rail.grabbing { cursor: grabbing; user-select: none; }
  .rail.grabbing .phone { pointer-events: none; }
}
/* No text-align here — it used to centre everything inside the phones, which
   silently centred the alert tiles and the chat bubbles. Screens that really
   are centred (book detail, profile hero) set it themselves. */
.shot { margin: 0; flex: none; scroll-snap-align: center; }
.shot figcaption { margin-top: 20px; font-size: 13.5px; line-height: 19px; color: var(--text2); max-width: 268px; text-align: center; }

/* ═══ PRO ═══════════════════════════════════════════════════════════════ */
.pro { position: relative; overflow: hidden; background: #0B1220; color: #E8EDF6; border-block: 1px solid #1F2A3D; }
.pro-glow {
  position: absolute; inset: -20% -10% auto auto; width: 900px; height: 900px; pointer-events: none;
  background: radial-gradient(38% 38% at 70% 30%, rgba(224,168,40,.18), transparent 70%),
              radial-gradient(40% 40% at 30% 60%, rgba(37,99,235,.24), transparent 70%);
}
.pro-in { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr); gap: var(--gap); align-items: center; }
@media (max-width: 980px) { .pro-in { grid-template-columns: 1fr; } }
.pro h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.03em; }
.pro .sub { color: #94A3B8; max-width: 30em; }
.perks { display: grid; gap: 10px; margin-top: 32px; }
.perks li {
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: 1px 14px;
  align-items: center; padding: 15px 18px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  transition: background .25s ease, border-color .25s ease;
}
.perks li:hover { background: rgba(255,255,255,.075); border-color: rgba(224,168,40,.35); }
.perks li i { grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(224,168,40,.14); color: var(--gold); }
.perks li i .ic { font-size: 21px; }
.perks li b { font-size: 15.5px; font-weight: 600; }
.perks li span { font-size: 13.5px; color: #94A3B8; }
.pro-note { margin-top: 24px; display: inline-block; padding: 11px 18px; border-radius: 999px; background: rgba(224,168,40,.12); border: 1px solid rgba(224,168,40,.3); color: #F4CE6A; font-size: 14px; font-weight: 600; }
.pro-phone { display: flex; justify-content: center; }

/* ═══ WAITLIST ══════════════════════════════════════════════════════════ */
.join-card {
  display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 4.5vw, 56px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) { .join-card { grid-template-columns: 1fr; } }
.join-copy h2 { font-size: clamp(28px, 3.6vw, 40px); }
.join-ticks { margin-top: 26px; display: grid; gap: 11px; }
.join-ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 21px; color: var(--text2); }
.join-ticks .ic { font-size: 18px; margin-top: 2px; color: var(--free-fg); stroke-width: 2.6; flex: none; }

.join-form { display: grid; gap: 18px; align-content: start; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.fw { display: grid; gap: 7px; }
.fw label { font-size: 13px; font-weight: 600; }
.fw label em { font-style: normal; font-weight: 400; color: var(--app-ph); }
.fw input, .selwrap select {
  width: 100%; height: 48px; padding: 0 14px; background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--r-md); font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.fw input::placeholder { color: var(--app-ph); }
.fw input:focus, .selwrap select:focus { outline: none; background: var(--surface); border-color: var(--blue); box-shadow: var(--ring); }
.fw input[aria-invalid="true"] { border-color: var(--red); }
.selwrap { position: relative; display: block; }
.selwrap select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.selwrap .ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text2); pointer-events: none; }

.segs { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 620px) { .segs { grid-template-columns: 1fr; } }
.segs legend { padding: 0 0 10px; font-size: 13px; font-weight: 600; }
.segs label { position: relative; display: block; cursor: pointer; }
.segs input { position: absolute; opacity: 0; width: 0; height: 0; }
.segs span {
  display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 13px 14px;
  border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--bg);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.segs b { font-size: 14px; font-weight: 600; }
.segs em { font-style: normal; font-size: 12px; line-height: 16px; color: var(--text2); }
.segs label:hover span { border-color: var(--app-ph); }
.segs input:checked + span { border-color: var(--blue); background: var(--tint); box-shadow: var(--ring); }
.segs input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.join-form .btn { width: 100%; }
.fine { font-size: 12.5px; line-height: 18px; color: var(--text2); }
.fine a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }

.join-form.done .fgrid, .join-form.done .segs, .join-form.done .btn, .join-form.done .fine { display: none; }
.join-form .done-card { display: none; }
.join-form.done .done-card {
  display: grid; gap: 8px; justify-items: center; text-align: center; padding: 34px 24px;
  border: 1px solid var(--border); border-radius: var(--r-xl); background: var(--bg);
}
.done-card .tickmark { width: 54px; height: 54px; border-radius: 50%; background: var(--free-bg); color: var(--free-fg); display: grid; place-items: center; margin-bottom: 6px; }
.done-card .tickmark .ic { font-size: 27px; stroke-width: 2.6; }
.done-card h3 { font-size: 21px; }
.done-card p { font-size: 14.5px; line-height: 21px; color: var(--text2); max-width: 32em; }
.done-card .pos { margin-top: 4px; padding: 7px 16px; border-radius: 999px; background: var(--tint); color: var(--blue); font-size: 14px; font-weight: 700; }

/* ═══ FAQ ═══════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 19px 22px; cursor: pointer; list-style: none;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { font-size: 20px; color: var(--text2); flex: none; transition: transform .25s ease; }
.faq details[open] summary .ic { transform: rotate(180deg); color: var(--blue); }
.faq details[open] { border-color: color-mix(in srgb, var(--blue) 32%, var(--border)); }
.faq p { padding: 0 22px 21px; font-size: 15px; line-height: 24px; color: var(--text2); max-width: 68ch; }

/* ═══ BAND ══════════════════════════════════════════════════════════════ */
.band { padding: clamp(48px, 6vw, 76px) 0; background: linear-gradient(115deg, var(--blue-dark), var(--blue) 55%, #4F46E5); color: #fff; }
.band-in { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.band h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.03em; }
.band p { margin-top: 9px; font-size: 16px; color: rgba(255,255,255,.85); }
.band b { color: #fff; font-weight: 700; }

/* ═══ FOOTER ════════════════════════════════════════════════════════════ */
.foot { padding: clamp(40px, 5vw, 64px) 0; background: var(--bg-alt); border-top: 1px solid var(--border); }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 24px 32px; align-items: start; }
@media (max-width: 700px) { .foot-in { grid-template-columns: 1fr; } }
.foot-brand p { margin-top: 10px; font-size: 14px; color: var(--text2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { font-size: 14px; color: var(--text2); transition: color .18s ease; }
.foot-links a:hover { color: var(--blue); }
.foot-copy { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text2); }

/* ── Legal pages (privacy.html / terms.html) ─────────────────────────────
   Generated by tools/gen-legal-pages.py from legal/*.json — the same files
   the app downloads, so the two surfaces can't drift apart.
   ─────────────────────────────────────────────────────────────────────── */
.legal { padding: clamp(40px, 7vw, 76px) var(--pad) clamp(56px, 8vw, 96px); }
.legal h1 { font-size: clamp(32px, 5vw, 46px); letter-spacing: -.03em; line-height: 1.08; }
.legal-meta { margin-top: 12px; font-size: 14px; color: var(--text2); }
.legal-intro {
  margin-top: 24px; padding: 20px 22px; border-radius: var(--r-lg);
  background: var(--tint); border: 1px solid var(--border);
  font-size: 16.5px; line-height: 26px;
}
.legal-sec { margin-top: 34px; }
.legal-sec h2 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 19px; font-weight: 600; letter-spacing: -.01em;
}
.legal-num {
  flex: none; min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--tint); color: var(--blue);
  font-size: 12.5px; font-weight: 700; align-self: center;
}
.legal-sec p { margin-top: 9px; padding-inline-start: 38px; font-size: 16px; line-height: 26px; color: var(--text2); }
.legal-foot {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 14px; line-height: 22px; color: var(--text2);
}
@media (max-width: 560px) {
  .legal-sec p { padding-inline-start: 0; }
}