/* ================================================================
   almansoori.uk — UAE Modern Design System
   Sand neutrals · Ink type · Gulf teal · Saffron accent
   Light + dark themes · LTR + RTL
================================================================ */

/* ── Design tokens (light is default) ───────────────────────── */
:root {
  /* Sand neutrals */
  --sand-00: #FBF7F0;
  --sand-05: #F5EFE3;
  --sand-10: #EDE5D3;
  --sand-20: #DCD2BB;
  --sand-30: #B8AC8E;

  /* Ink */
  --ink-100: #0F1419;
  --ink-90:  #1A2128;
  --ink-70:  #3A434C;
  --ink-50:  #6B7480;
  --ink-30:  #9AA1AA;
  --ink-15:  #C4C9CF;

  /* Accents */
  --teal:        oklch(0.50 0.085 200);
  --teal-soft:   oklch(0.50 0.085 200 / 0.10);
  --teal-deep:   oklch(0.40 0.085 200);
  --saffron:     oklch(0.74 0.13 72);
  --saffron-soft: oklch(0.74 0.13 72 / 0.16);

  /* Semantic */
  --success: oklch(0.55 0.10 155);
  --error:   oklch(0.55 0.16 25);

  /* Hairlines */
  --grid-line: rgba(15,20,25,0.06);
  --hairline:  rgba(15,20,25,0.12);

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  /* Type */
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Surfaces (theme-swappable) */
  --bg:        var(--sand-00);
  --surface:   var(--sand-05);
  --surface-2: var(--sand-10);
  /* Canonical border = hairline. Single source of truth — the dark
     theme overrides it directly, and no alias layer reassigns it. */
  --border:    var(--hairline);
  --text:      var(--ink-100);
  --text-90:   var(--ink-90);
  --text-70:   var(--ink-70);
  --text-50:   var(--ink-50);
  --text-30:   var(--ink-30);
  --text-15:   var(--ink-15);

  /* Game card stays ink in both themes (deliberate contrast) */
  --gc-bg:     var(--ink-100);
  --gc-fg:     var(--sand-05);
}

/* ── Dark theme ─────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg:        #0B0F13;
  --surface:   #131820;
  --surface-2: #1B2129;
  --border:    rgba(245,239,227,0.10);
  --hairline:  rgba(245,239,227,0.12);
  --grid-line: rgba(245,239,227,0.06);

  --text:      #F5EFE3;
  --text-90:   #EAE3D2;
  --text-70:   #C4BEAF;
  --text-50:   #8E8878;
  --text-30:   #5C5849;
  --text-15:   rgba(245,239,227,0.15);

  /* Inks invert for borders / fills that previously used --ink-100 */
  --ink-100:   #F5EFE3;   /* primary fill flips to sand */
  --ink-90:    #EAE3D2;
  --ink-70:    #C4BEAF;
  --ink-50:    #8E8878;
  --ink-30:    #5C5849;
  --ink-15:    rgba(245,239,227,0.15);

  /* Sand neutrals invert to dark surfaces (used by some legacy classes) */
  --sand-00:   #0B0F13;
  --sand-05:   #131820;
  --sand-10:   #1B2129;
  --sand-20:   rgba(245,239,227,0.16);
  --sand-30:   #6B665A;

  /* Game card: keep darker in dark mode too */
  --gc-bg:     #060A0E;
  --gc-fg:     #F5EFE3;
}

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background 0.25s ease, color 0.25s ease;
  /* Safe-area inset for iPhone notch / home indicator */
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* Tap targets: min 44×44 on iPhone */
button, .btn, .icon-btn, .pill, .nav-link, .tool-card, .game-card,
input[type="checkbox"], input[type="radio"], a.btn-primary, a.btn-ghost {
  touch-action: manipulation;
}
/* Use overscroll-behavior to stop body bounce in PWA */
@media (display-mode: standalone) {
  body { overscroll-behavior-y: contain; }
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── RTL support ────────────────────────────────────────────── */
html[dir="rtl"] body { font-family: "Tajawal", var(--sans); }
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] .pill,
html[dir="rtl"] .t-cap,
html[dir="rtl"] .t-mono { font-family: var(--mono); }
html[dir="rtl"] .arrow,
html[dir="rtl"] .tc-arrow { transform: scaleX(-1); }

/* ── Page frame ─────────────────────────────────────────────── */
.page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px 120px;
  position: relative;
}
@media (max-width: 1100px) { .page { padding: 0 28px 80px; } }
@media (max-width: 600px)  { .page { padding: 0 18px 60px; } }

/* ── Header / nav — floating pill (rendered by nav.js) ──────── */
.site-header {
  position: sticky; top: 16px; z-index: 50;
  background: transparent;
  border: none;
  padding: 0 24px;
  padding-top: env(safe-area-inset-top);
  pointer-events: none;
}
.nav-bar {
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 12px 10px 22px;
  background: rgba(251,247,240,0.92);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  /* Clip the backdrop-filter to the rounded pill — without this, the blur
     renders to the rectangular border-box and leaves a hard-edged box
     artifact around the corners. */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  pointer-events: all;
  box-shadow: 0 2px 24px rgba(15,20,25,0.06);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
:root[data-theme="dark"] .nav-bar {
  background: rgba(11,15,19,0.92);
  box-shadow: 0 2px 24px rgba(0,0,0,0.36);
}
@media (max-width: 600px) {
  .site-header { padding: 0 14px; top: 12px; }
  .nav-bar { padding: 8px 10px 8px 18px; }
}

.nav-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; flex-shrink: 0;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand .am-mark { width: 26px; height: 26px; flex-shrink: 0; color: var(--text); }
.nav-brand .word {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.nav-brand .word .dot { color: var(--saffron); }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-link {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-70);
  padding: 7px 13px;
  border-radius: 99px;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.nav-link:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.nav-link.active { color: var(--text); background: var(--surface); }

.nav-actions { display: flex; gap: 6px; align-items: center; }
.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text-70);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.icon-btn:hover { color: var(--text); background: var(--surface); border-color: var(--text-30); }
.icon-btn:active { transform: scale(0.92); }

/* Arabic mode temporarily disabled — hide the language toggle button.
   To re-enable: remove this rule and revert the init() block in nav.js. */
.lang-toggle { display: none !important; }

/* Hamburger morph lines */
.ham-line {
  display: block; width: 14px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.2s ease;
}
.ham-top { margin-bottom: 4px; }
.menu-btn { flex-direction: column; align-items: center; justify-content: center; }
.menu-btn.open .ham-top { transform: translateY(2.75px) rotate(45deg); }
.menu-btn.open .ham-mid { transform: translateY(-2.75px) rotate(-45deg); }

/* Mobile: hide links, show hamburger */
.menu-btn { display: none; }
@media (max-width: 800px) {
  .menu-btn { display: inline-flex; }
  .nav-links { display: none; }
}

/* ── Full-screen mobile overlay ─────────────────────────────── */
/* CRITICAL: position:fixed is forced via !important. Without it, the
   overlay falls into document flow at the bottom of the page on
   browsers where position:fixed is dropped (e.g. inside transform
   parents). visibility:hidden ensures it's truly out of the layout
   when closed, while still allowing opacity transitions. */
.nav-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 49;
  background: var(--bg);
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 280ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              visibility 0s linear 280ms;
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 280ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              visibility 0s linear 0s;
}
.nav-overlay-links {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
}
.overlay-close {
  position: absolute; top: 20px; right: 20px;
  font-size: 15px; font-family: var(--mono);
}
.nav-overlay-links {
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.nav-overlay-link {
  display: block;
  font-family: var(--serif);
  font-size: clamp(38px, 10vw, 72px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-30);
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 450ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              transform 450ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              color 0.2s ease;
  transition-delay: calc(var(--i) * 65ms);
}
.nav-overlay.open .nav-overlay-link { opacity: 1; transform: translateY(0); }
.nav-overlay-link:hover { color: var(--text); text-decoration: none; }
.nav-overlay-link.active { color: var(--text); font-style: italic; }
.overlay-footer {
  position: absolute; bottom: 40px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--text-50);
  opacity: 0;
  transition: opacity 400ms ease;
  transition-delay: 400ms;
  text-align: center;
}
.nav-overlay.open .overlay-footer { opacity: 1; }
.overlay-email { color: var(--teal-deep); text-decoration: none; }
.overlay-email:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 88px;
  padding: 24px 0;
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 56px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px; flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-50);
}
@media (max-width: 1100px) { .footer-inner { padding: 0 28px; } }
@media (max-width: 600px)  { .footer-inner { padding: 0 18px; } }
.footer-inner .end {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.footer-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-links a {
  color: var(--text-50);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-links a:hover { color: var(--text); text-decoration: none; }
.footer-links .footer-email { color: var(--teal-deep); text-transform: none; letter-spacing: 0.02em; }
.footer-links .footer-email:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ── Section heading rhythm ─────────────────────────────────── */
.section { margin-top: 88px; }
@media (max-width: 600px) { .section { margin-top: 56px; } }
.section-head {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 36px;
}
@media (max-width: 1100px) { .section-head { grid-template-columns: 1fr; gap: 12px; } }
.sec-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
}
.sec-num span { color: var(--text); font-weight: 500; }
.sec-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
}
.sec-title em { font-style: italic; color: var(--teal-deep); }
.sec-desc {
  font-size: 13.5px;
  color: var(--text-70);
  line-height: 1.6;
  max-width: 46ch;
  padding-top: 8px;
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  padding-top: 28px;
  margin-bottom: 28px;
  display: flex; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--text-50); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: none; }
.breadcrumb .sep::before { content: "/"; opacity: 0.5; }
.breadcrumb .here { color: var(--text); }

/* ── Page title block ───────────────────────────────────────── */
.title-block { margin-bottom: 48px; }
.title-block h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5.5vw, 64px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 18px;
}
.title-block h1 em { font-style: italic; color: var(--teal-deep); }
.title-block h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 12px;
}
.title-block h2 em { font-style: italic; color: var(--teal-deep); }
.title-block .subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--teal-deep);
  margin-top: -6px;
  margin-bottom: 18px;
}
.title-block .lede {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
}
.title-block .desc {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-70);
  line-height: 1.6;
  max-width: 46ch;
  margin-top: 14px;
}

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  padding: 80px 0 88px;
  position: relative;
  animation: heroReveal 900ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) { .hero { padding: 60px 0 64px; } }
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  animation: heroReveal 900ms 80ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px; height: 1px;
  background: var(--saffron); flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .hero-eyebrow { animation: none; } }

.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(60px, 12vw, 148px);
  letter-spacing: -0.032em;
  line-height: 0.91;
  color: var(--text);
  margin-bottom: 48px;
  max-width: 13ch;
  text-wrap: balance;
  animation: heroReveal 900ms 120ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
.hero h1 em { font-style: italic; color: var(--teal-deep); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .hero h1 { animation: none; } }

.hero .lede {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-50);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  animation: heroReveal 900ms 200ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
.hero .lede-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--saffron); flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) { .hero .lede { animation: none; } }

/* Saffron divider */
.saffron-divider {
  height: 1px; width: 100%;
  background: linear-gradient(to right, var(--saffron) 0%, transparent 72%);
  margin: 0;
}

/* ── Tool card ──────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 1100px) { .tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .tools-grid { grid-template-columns: 1fr; } }

.tool-card {
  display: block;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 26px 26px 22px;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.tool-card:hover { text-decoration: none; }
.tool-card .tc-num {
  position: absolute; top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--text-30);
}
html[dir="ltr"] .tool-card .tc-num { right: 24px; }
html[dir="rtl"] .tool-card .tc-num { left: 24px; }
.tool-card .tc-glyph {
  width: 44px; height: 44px;
  min-width: 44px;
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
  background: var(--surface);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
  transition: all 0.25s ease;
}
.tool-card .tc-glyph svg {
  width: 22px; height: 22px;
  display: block;
  color: inherit;
}
.tool-card .tc-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 6px;
  color: var(--text);
}
.tool-card .tc-desc {
  font-size: 13px;
  color: var(--text-70);
  line-height: 1.5;
  margin-bottom: 18px;
}
.tool-card .tc-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.tool-card .tc-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-50);
}
.tool-card .tc-arrow {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text-50);
  transition: transform 0.25s ease, color 0.25s ease;
}
.tool-card:hover {
  border-color: var(--text);
  box-shadow: 6px 6px 0 var(--text);
  transform: translate(-3px, -3px);
}
html[dir="rtl"] .tool-card:hover {
  box-shadow: -6px 6px 0 var(--text);
  transform: translate(3px, -3px);
}
.tool-card:hover .tc-glyph {
  background: var(--teal);
  color: var(--sand-00);
  border-color: var(--teal);
}
.tool-card:hover .tc-arrow { color: var(--text); transform: translateX(4px); }
html[dir="rtl"] .tool-card:hover .tc-arrow { transform: translateX(-4px) scaleX(-1); }
.tool-card:active {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--text);
}
html[dir="rtl"] .tool-card:active { transform: translate(1px, -1px); box-shadow: -2px 2px 0 var(--text); }
@media (prefers-reduced-motion: reduce) {
  .tool-card, .tool-card:hover, .tool-card .tc-arrow, .tool-card:hover .tc-arrow { transition: none; transform: none; box-shadow: none; }
  .tool-card:hover { border-color: var(--text); }
  .tool-card:active { transform: none; box-shadow: none; }
}

/* ── Game card (ink-dark, larger) ───────────────────────────── */
.games-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .games-grid { grid-template-columns: 1fr; } }
.games-grid.large {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .games-grid.large { grid-template-columns: 1fr; } }

.game-card {
  display: block;
  border: 1px solid var(--hairline);
  background: var(--gc-bg);
  color: var(--gc-fg);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s ease;
}
.game-card:hover { text-decoration: none; }
.game-card:hover {
  border-color: var(--text);
  box-shadow: 6px 6px 0 var(--text);
  transform: translate(-3px, -3px);
}
html[dir="rtl"] .game-card:hover {
  box-shadow: -6px 6px 0 var(--text);
  transform: translate(3px, -3px);
}
.game-card:active {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--text);
}
html[dir="rtl"] .game-card:active { transform: translate(1px, -1px); box-shadow: -2px 2px 0 var(--text); }
.game-card .gc-art {
  aspect-ratio: 16 / 10;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(0.45 0.085 200 / 0.5) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-90) 0%, var(--gc-bg) 100%);
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.game-card .gc-art .glyph {
  font-size: 80px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.game-card.large .gc-art .glyph { font-size: 120px; }
.game-card .gc-body {
  padding: 18px 20px 20px;
  display: flex; justify-content: space-between; align-items: center;
}
.game-card .gc-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--gc-fg);
}
.game-card .gc-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-30);
}
.game-card .gc-play {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
  white-space: nowrap;
}

/* ── AI prompt strip ────────────────────────────────────────── */
.ai-strip {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--teal);
  color: #FBF7F0;
  padding: 20px 32px;
  margin-top: 88px;
  text-decoration: none;
  border: 1px solid var(--teal);
  transition: background 0.25s ease;
}
.ai-strip:hover { background: var(--teal-deep); border-color: var(--teal-deep); text-decoration: none; }
.ai-strip .copy {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.5vw, 24px);
  letter-spacing: -0.015em;
  color: #FBF7F0;
}
.ai-strip .arrow {
  font-family: var(--mono);
  font-size: 18px;
  color: #FBF7F0;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  padding: 13px 22px;
  border: 1px solid var(--text);
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
  transition: all 0.2s ease;
  text-decoration: none;
  border-radius: 0;
}
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #FBF7F0; text-decoration: none; }
.btn .arrow { font-family: var(--mono); font-size: 13px; }
.btn.ghost { background: transparent; color: var(--text); }
.btn.ghost:hover { background: var(--text); color: var(--bg); }
.btn.sm { padding: 9px 16px; font-size: 12.5px; }
.btn.icon-only { padding: 13px 14px; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Pills ──────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text-70);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.pill:hover { color: var(--text); border-color: var(--text); }
.pill.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.pill.dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); display: inline-block;
}
.pill.saffron.dot::before { background: var(--saffron); }
.pill.success.dot::before { background: var(--success); }
.pill.error.dot::before   { background: var(--error); }

/* ── Form elements ──────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-group label,
.field-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 8px;
}
.input, .select, .textarea, .select-field,
input[type="text"], input[type="number"], input[type="email"], input[type="search"],
input[type="password"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: 0;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus,
.input:focus, .select:focus, .textarea:focus, .select-field:focus {
  border-color: var(--text);
  background: var(--surface);
}
select, .select, .select-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7480' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
html[dir="rtl"] select { background-position: left 14px center; padding-right: 14px; padding-left: 38px; }
textarea { font-family: var(--sans); resize: vertical; min-height: 96px; line-height: 1.6; }
.checkbox-label, label.checkbox-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-size: 13.5px;
  color: var(--text-70); cursor: pointer;
  text-transform: none; letter-spacing: 0;
  margin-bottom: 0;
}
input[type="range"] {
  width: 100%; -webkit-appearance: none; appearance: none;
  background: transparent;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--text-30);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  background: var(--text); border: 1px solid var(--text);
  border-radius: 50%; margin-top: -7px;
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--text-30); }
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; background: var(--text); border: 1px solid var(--text); border-radius: 50%;
}

/* ── Drop zone (tool input) ─────────────────────────────────── */
.drop-zone {
  border: 1px dashed var(--text-50);
  background: var(--surface);
  padding: 56px 28px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.drop-zone:hover, .drop-zone.drag-over {
  background: var(--surface-2);
  border-color: var(--text);
}
.drop-zone input[type=file] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.dz-icon { font-size: 32px; margin-bottom: 10px; }
.dz-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 4px;
}
.dz-title em { font-style: normal; color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.dz-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-50);
}

/* ── Tool canvas (2-col layout for tool pages) ──────────────── */
.tool-canvas {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  min-height: 480px;
  margin-bottom: 56px;
}
@media (max-width: 900px) { .tool-canvas { grid-template-columns: 1fr; } }
.tool-canvas .main,
.tool-canvas .side {
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 28px;
  display: flex; flex-direction: column; gap: 18px;
}
.tool-canvas .side { gap: 16px; }
.canvas-section { display: flex; flex-direction: column; gap: 12px; }
.canvas-section .canvas-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
}
.canvas-section + .canvas-section { padding-top: 16px; border-top: 1px solid var(--hairline); }

/* ── Single-column tool widget (legacy) ─────────────────────── */
.tool-widget {
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 32px;
  margin-bottom: 56px;
}
.tool-widget.wide { padding: 32px; }
@media (max-width: 600px) { .tool-widget, .tool-widget.wide { padding: 22px; } }

/* ── Result / stat cards ────────────────────────────────────── */
.result-card,
.stat-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 24px;
  margin-top: 24px;
}
.stat-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13.5px; border-bottom: 1px dashed var(--hairline); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .lbl { color: var(--text-70); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.stat-row .val { color: var(--text); font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ── Tabs ───────────────────────────────────────────────────── */
.tk-tabs {
  display: flex; gap: 0;
  border: 1px solid var(--hairline);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tk-tab {
  padding: 12px 18px;
  border: 0;
  background: transparent;
  color: var(--text-70);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  border-right: 1px solid var(--hairline);
  flex: 1 0 auto;
}
.tk-tab:last-child { border-right: 0; }
.tk-tab:hover { background: var(--surface); color: var(--text); }
.tk-tab.active { background: var(--text); color: var(--bg); }
@media (max-width: 600px) { .tk-tab { font-size: 10px; padding: 10px 12px; } }
.tk-panel { display: none; }
.tk-panel.active { display: block; animation: tkFade 0.18s ease; }
@keyframes tkFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tk-panel.active { animation: none; } }

/* ── Btn group ──────────────────────────────────────────────── */
.btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Privacy note ───────────────────────────────────────────── */
.privacy-note {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-50);
  text-align: center;
  margin-top: 28px;
}

/* ── Static-page (about/contact/privacy) ────────────────────── */
.static-page {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56px;
}
.static-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 12px;
}
.static-page .page-date {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 36px;
}
.static-page h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 48px; margin-bottom: 14px;
  color: var(--text);
}
.static-page h2 em { font-style: italic; color: var(--teal-deep); }
.static-page p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-70);
  margin-bottom: 16px;
}
.static-page ul, .static-page ol { padding-left: 24px; margin-bottom: 16px; color: var(--text-70); line-height: 1.7; }
html[dir="rtl"] .static-page ul, html[dir="rtl"] .static-page ol { padding-left: 0; padding-right: 24px; }
.static-page li { margin-bottom: 8px; font-size: 15px; }
.static-page strong, .static-page b { color: var(--text); font-weight: 600; }
.static-page a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ── Tool page · related row ────────────────────────────────── */
.related {
  margin-top: 88px;
  padding-top: 32px;
  border-top: 1px solid var(--hairline);
}
.related h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 24px;
  font-weight: 500;
}

/* ── Utility ───────────────────────────────────────────────── */
.t-mono { font-family: var(--mono); }
.t-serif { font-family: var(--serif); }
.t-italic { font-style: italic; }
.t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-family: var(--mono); }
.t-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-50); }
.t-saffron { color: var(--saffron); }
.t-teal { color: var(--teal-deep); }
.text-center { text-align: center; }
.muted { color: var(--text-50); }
.hidden { display: none !important; }
.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;
}

/* ════════════════════════════════════════════════════════════════
   FX LAYER — scroll progress, spotlight, glow orb, marquee, ripple,
   cursor follower, page entrance. Driven by fx.js.
══════════════════════════════════════════════════════════════════ */

/* ── Page entrance (pure CSS, JS-independent) ──────────────── */
body {
  animation: bodyIn 520ms 40ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
}
@keyframes bodyIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { body { animation: none; } }

/* ── Scroll progress bar ────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: linear-gradient(to right, var(--saffron), var(--teal));
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ── Cursor follower (desktop only, set by JS) ──────────────── */
.fx-cursor {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--text);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.2s var(--ease-out-expo), height 0.2s var(--ease-out-expo), margin 0.2s var(--ease-out-expo), opacity 0.2s ease;
  will-change: transform;
}
.fx-cursor.grow { width: 36px; height: 36px; margin: -18px 0 0 -18px; opacity: 0.85; }
@media (max-width: 800px), (hover: none) { .fx-cursor { display: none; } }

/* ── Hero glow orb (mouse-following) ───────────────────────── */
.hero { isolation: isolate; }
.hero-orb {
  position: absolute;
  top: 0; left: 0;
  /* Box is intentionally larger than the visible glow: the blur() filter
     clips to the element's border-box, so the transparent ring around the
     gradient core gives the 40px blur room to bleed without a hard edge. */
  width: 680px; height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--teal) 0%, transparent 38%);
  opacity: 0.18;
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
  will-change: transform;
}
:root[data-theme="dark"] .hero-orb { opacity: 0.30; }
@media (max-width: 800px), (hover: none) { .hero-orb { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero-orb { display: none; } }

/* ── Tool card spotlight (cursor-following gradient) ────────── */
.tool-card { position: relative; overflow: hidden; transform-style: preserve-3d; will-change: transform; }
.tool-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--teal-soft), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 0;
}
.tool-card:hover::before { opacity: 1; }
.tool-card > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .tool-card::before { display: none; } }

/* ── Game card spotlight ───────────────────────────────────── */
.game-card { transform-style: preserve-3d; will-change: transform; }
.game-card .gc-art::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), oklch(0.55 0.10 200 / 0.4), transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.game-card:hover .gc-art::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .game-card .gc-art::after { display: none; } }

/* ── Click ripple ──────────────────────────────────────────── */
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  transform: scale(0);
  animation: fxRipple 600ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) forwards;
  pointer-events: none;
  z-index: 2;
}
@keyframes fxRipple {
  to { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .fx-ripple { display: none; } }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  padding: 22px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-row { display: flex; gap: 0; }
.marquee-track {
  display: inline-flex;
  gap: 56px;
  animation: marquee 36s linear infinite;
  flex-shrink: 0;
  padding-right: 56px;
}
.marquee-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-30);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 56px;
}
.marquee-track span::after {
  content: '✦';
  color: var(--saffron);
  font-size: 0.5em;
  font-style: normal;
}
.marquee-track span:hover { color: var(--text); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ── Saffron divider animation ─────────────────────────────── */
.saffron-divider {
  animation: divDraw 1.4s 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)) both;
  transform-origin: left center;
}
@keyframes divDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
html[dir="rtl"] .saffron-divider { transform-origin: right center; }
@media (prefers-reduced-motion: reduce) { .saffron-divider { animation: none; } }

/* ── Eyebrow dot pulse ─────────────────────────────────────── */
.hero-eyebrow::after {
  content: '';
  width: 5px; height: 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
  animation: dotPulse 2.2s ease-in-out infinite;
}
html[dir="rtl"] .hero-eyebrow::after { margin-left: 0; margin-right: 6px; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) { .hero-eyebrow::after { animation: none; } }

/* ── Counter style ─────────────────────────────────────────── */
.stat-counter {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  min-width: 2ch;
}

/* ── Tool card icon hover micro-interaction ────────────────── */
.tool-card .tc-glyph {
  transition: background 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              color 0.3s ease,
              border-color 0.3s ease,
              transform 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.tool-card:hover .tc-glyph {
  transform: rotate(-4deg) scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .tool-card:hover .tc-glyph { transform: none; }
}

/* ── Sound toggle button (in nav) ──────────────────────────── */
.sound-toggle { position: relative; font-size: 9px; }
.sound-toggle .sound-on,
.sound-toggle .sound-off {
  position: absolute;
  top: 50%; left: 50%;
  width: 1em; height: 1em;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.sound-toggle .sound-off { color: var(--text-50); opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sound-toggle .sound-on  { color: var(--saffron); opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.sound-toggle[data-on="true"]  .sound-off { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
.sound-toggle[data-on="true"]  .sound-on  { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: dotPulse 2s ease-in-out infinite; }

/* ── Logo dot pulse ────────────────────────────────────────── */
.nav-brand .word .dot { display: inline-block; transition: transform 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)); }
.nav-brand:hover .word .dot { transform: scale(1.6) translateY(-2px); }

/* ── Magnetic helper ────────────────────────────────────────── */
.magnetic { display: inline-block; }
.magnetic-inner { display: inline-block; transition: transform 0.4s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)); }

/* ── Hero noise overlay (subtle film grain) ─────────────────── */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .hero::before { mix-blend-mode: screen; opacity: 0.04; }

/* ── Scroll reveal (kept) ───────────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              transform 700ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.sr.in { opacity: 1; transform: translateY(0); }
.sr-d1 { transition-delay: 80ms; }
.sr-d2 { transition-delay: 160ms; }
.sr-d3 { transition-delay: 240ms; }
.sr-d4 { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  .sr { opacity: 1; transform: none; transition: none; }
}

/* ── Bento grid (homepage featured) ────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
.bento-wide { grid-column: span 2; }
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-wide { grid-column: span 1; }
}
@media (max-width: 600px) {
  .bento-grid { grid-template-columns: 1fr; }
}

/* ── Section header row ─────────────────────────────────────── */
.section-row {
  display: flex; align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.section-row h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.section-row h2 em { font-style: italic; color: var(--teal-deep); }
.section-row .see-all {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.section-row .see-all:hover { color: var(--text); text-decoration: none; }

/* Reveal animation (legacy class) */
.reveal {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════
   STUDIO PAGE — bespoke website service
══════════════════════════════════════════════════════════════════ */

.studio-hero {
  padding: 32px 0 56px;
  position: relative;
  max-width: 880px;
}
.studio-h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 8.5vw, 108px);
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--text);
  margin: 18px 0 28px;
  max-width: 14ch;
  text-wrap: balance;
}
.studio-h1 em { font-style: italic; color: var(--teal-deep); font-weight: 400; }
.studio-lede {
  font-family: var(--sans);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--text-70);
  max-width: 60ch;
  margin-bottom: 36px;
}
.studio-lede strong { color: var(--text); font-weight: 500; }
.studio-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; }
.studio-trustline {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.studio-trustline strong { color: var(--text); font-weight: 500; }
.studio-trustline .dot-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--saffron); display: inline-block;
}

.studio-section { margin-top: 88px; }
@media (max-width: 600px) { .studio-section { margin-top: 60px; } }

/* Included grid */
.included-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 900px) { .included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .included-grid { grid-template-columns: 1fr; } }
.inc-card {
  padding: 26px 26px 24px;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.inc-num {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--text-30);
  margin-bottom: 18px;
}
.inc-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; letter-spacing: -0.015em;
  color: var(--text); margin-bottom: 6px;
}
.inc-desc { font-size: 13px; color: var(--text-70); line-height: 1.55; }

/* Builder */
.builder-intro {
  font-family: var(--sans);
  font-size: 14px; color: var(--text-70);
  line-height: 1.6; max-width: 60ch;
  margin-bottom: 36px;
}
.total-pill {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: 8px 16px; border: 1px solid var(--text);
  background: var(--text); color: var(--bg);
  font-family: var(--mono); line-height: 1;
  transition: background 0.2s ease;
}
.total-pill .t-cap { color: var(--bg); opacity: 0.6; font-size: 9.5px; margin-bottom: 4px; }
.total-pill .total-amount { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }

.addon-group { margin-bottom: 28px; }
.addon-group-label {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px dashed var(--hairline);
}
.agl-num {
  font-family: var(--mono); font-size: 11px;
  color: var(--saffron); font-weight: 500;
  letter-spacing: 0.06em;
}
.agl-name {
  font-family: var(--serif); font-style: italic;
  font-size: 18px; color: var(--text);
}

.addon {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  transition: padding 0.2s ease;
}
.addon:last-child { border-bottom: none; }
.addon input[type=checkbox] {
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--teal-deep);
  cursor: pointer;
  flex-shrink: 0;
}
.addon input[type=checkbox]:disabled { opacity: 0.55; cursor: not-allowed; }
.addon-body { flex: 1; min-width: 0; }
.addon-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 17px; color: var(--text);
  margin-bottom: 4px; letter-spacing: -0.01em;
}
.addon-desc {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.55;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.addon-multi { color: var(--text-50); font-family: var(--mono); }
.addon-qty {
  width: 56px; padding: 4px 8px;
  border: 1px solid var(--hairline);
  background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 13px;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
.addon-qty:disabled { opacity: 0.4; }
.addon-price {
  font-family: var(--mono);
  font-size: 14px; font-weight: 500;
  color: var(--text); white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.addon-unit { font-size: 10.5px; color: var(--text-50); font-weight: 400; }
.addon:hover .addon-name { color: var(--teal-deep); }
.addon input[type=checkbox]:checked ~ .addon-body .addon-name { color: var(--teal-deep); }

/* Foundation locked card — redesigned, no broken pseudo */
.addon-foundation {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: flex-start;
  background: linear-gradient(135deg, var(--saffron-soft) 0%, var(--surface) 60%, var(--surface) 100%);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--saffron);
  padding: 30px 26px 26px;
  margin-bottom: 20px;
  cursor: default;
  overflow: visible;
}
.foundation-badge {
  position: absolute;
  top: -11px;
  left: 22px;
  background: var(--saffron);
  color: #1a1408;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  box-shadow: 0 2px 8px oklch(0.74 0.13 72 / 0.25);
}
.foundation-badge::before {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
}
.addon-foundation .addon-body { padding-top: 2px; }
.addon-foundation .addon-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.15;
}
.addon-foundation .addon-desc {
  font-size: 13.5px;
  color: var(--text-70);
  line-height: 1.6;
  max-width: 56ch;
}
.addon-foundation .addon-price {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: flex-start;
}

/* Summary */
.builder-summary {
  margin-top: 40px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
}
.summary-row:last-child { border-bottom: none; }
.summary-row .t-cap { color: var(--text-70); font-size: 11px; }
.summary-row .summary-val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 16px; color: var(--text); font-weight: 500;
}
.summary-row-total .t-cap { color: var(--text); }
.summary-row-total .summary-val {
  font-family: var(--serif); font-style: italic;
  font-size: 28px; font-weight: 500;
  color: var(--text);
}

/* Form */
.form-intro {
  font-family: var(--sans); font-size: 14px;
  color: var(--text-70); line-height: 1.6;
  max-width: 64ch; margin-bottom: 36px;
}
.studio-form { display: flex; flex-direction: column; gap: 20px; }
.studio-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) { .studio-form .form-row { grid-template-columns: 1fr; } }
.studio-form label { display: flex; align-items: center; gap: 8px; }
.studio-form label .req {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; color: var(--saffron);
  padding: 2px 6px;
  border: 1px solid var(--saffron); border-radius: 99px;
  text-transform: none;
}

/* Chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: var(--bg); color: var(--text-70);
  border-radius: 99px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.chip:hover { color: var(--text); border-color: var(--text-30); }
.chip.selected {
  background: var(--text); color: var(--bg);
  border-color: var(--text);
}

.form-cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
}
.form-fine {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-50);
  margin-top: 12px; line-height: 1.6;
}
.form-fine a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }

/* Process */
.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
}
@media (max-width: 900px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  padding: 32px 28px 28px;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  position: relative;
}
.process-step .step-num {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--saffron);
  margin-bottom: 18px;
}
.process-step h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 12px;
}
.process-step p {
  font-size: 14px; color: var(--text-70); line-height: 1.6;
}

/* FAQ */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--hairline);
  padding: 18px 0;
}
.faq-item summary {
  font-family: var(--serif); font-weight: 500;
  font-size: 20px; letter-spacing: -0.01em;
  color: var(--text);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  list-style: none;
  padding-right: 32px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-family: var(--mono); font-weight: 400;
  font-size: 22px; color: var(--saffron);
  position: absolute; right: 0; top: -2px;
  transition: transform 0.3s var(--ease-out-expo);
}
.faq-item[open] summary::after { content: '×'; transform: rotate(0deg); color: var(--text); }
.faq-item summary:hover { color: var(--teal-deep); }
.faq-item p {
  font-family: var(--sans); font-size: 14.5px;
  color: var(--text-70); line-height: 1.7;
  max-width: 64ch; padding-top: 12px;
}

/* Final CTA */
.studio-final-cta {
  margin-top: 96px;
  padding: 56px 0;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.studio-final-cta h2 {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin-bottom: 14px;
}
.studio-final-cta h2 em { font-style: italic; color: var(--teal-deep); font-weight: 400; }
.studio-final-cta p {
  font-family: var(--sans); font-size: 15px;
  color: var(--text-70); line-height: 1.6;
  margin-bottom: 28px; max-width: 50ch; margin-left: auto; margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════
   STUDIO POPUP — non-invasive, homepage only
══════════════════════════════════════════════════════════════════ */
.studio-popup {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 320px; max-width: calc(100vw - 36px);
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 22px 22px 20px;
  z-index: 55;
  transform: translateY(140%);
  opacity: 0;
  transition: transform 600ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              opacity 400ms ease;
  pointer-events: none;
  box-shadow: 0 12px 48px rgba(15,20,25,0.10);
  border-radius: 2px;
}
.studio-popup.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}
:root[data-theme="dark"] .studio-popup {
  box-shadow: 0 12px 48px rgba(0,0,0,0.45);
}
.studio-popup .popup-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px; color: var(--text-50);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.studio-popup .popup-close:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--hairline);
}
.popup-eyebrow {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-50);
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.popup-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--saffron);
  display: inline-block;
  animation: dotPulse 2s ease-in-out infinite;
}
.studio-popup h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 22px; letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 4px;
}
.studio-popup h3 em { font-style: italic; color: var(--teal-deep); }
.studio-popup p {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.55;
  margin-bottom: 14px;
}
.studio-popup .popup-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  padding: 9px 14px;
  background: var(--text); color: var(--bg);
  border: 1px solid var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
}
.studio-popup .popup-cta:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #FBF7F0;
  text-decoration: none;
}
.studio-popup .popup-cta:active { transform: scale(0.97); }
.studio-popup .popup-fine {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.10em; color: var(--text-30);
  margin-top: 10px; margin-bottom: 0;
}
@media (max-width: 600px) {
  .studio-popup { right: 14px; left: 14px; bottom: 14px; width: auto; }
}

/* ════════════════════════════════════════════════════════════════
   PROMO POPUP — single-use 20% off offer (studio only)
══════════════════════════════════════════════════════════════════ */
.promo-popup {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--teal-deep);
  padding: 24px 24px 22px;
  z-index: 55;
  transform: translateY(160%) scale(0.96);
  opacity: 0;
  transition: transform 0.55s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.4s ease;
  pointer-events: none;
  box-shadow: 0 16px 56px rgba(15,20,25,0.12);
  border-radius: 2px;
}
.promo-popup.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
:root[data-theme="dark"] .promo-popup {
  box-shadow: 0 16px 56px rgba(0,0,0,0.55);
}
@media (max-width: 600px) {
  .promo-popup { right: 14px; left: 14px; bottom: 14px; width: auto; }
}

.promo-popup::before {
  /* subtle teal halo on top-left for visual interest */
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 60px; height: 60px;
  background: radial-gradient(circle at top left, var(--teal-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.promo-popup > * { position: relative; z-index: 1; }

.promo-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px; color: var(--text-50);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.promo-close:hover {
  color: var(--text); background: var(--surface); border-color: var(--hairline);
}

.promo-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 12px;
}
.promo-popup h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 6px;
}
.promo-popup h3 em {
  font-style: italic;
  color: var(--teal-deep);
}
.promo-popup p {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.55;
  margin-bottom: 16px;
}

.promo-cta {
  display: inline-flex; align-items: center; gap: 8px;
  width: 100%;
  font-family: var(--sans); font-weight: 500; font-size: 13px;
  letter-spacing: -0.005em;
  padding: 11px 16px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  justify-content: center;
}
.promo-cta:hover {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #FBF7F0;
}
.promo-cta:active { transform: scale(0.98); }
.promo-cta-apply {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #FBF7F0;
}
.promo-cta-apply:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

/* Stage 2 — revealed code */
.promo-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 12px;
}
.promo-code {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--teal-deep);
  background: var(--bg);
  border: 1.5px dashed var(--teal-deep);
  padding: 12px 18px;
  user-select: all;
}
.promo-copy {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.promo-copy:hover { border-color: var(--text-30); background: var(--surface); }
.promo-copy:active { transform: scale(0.96); }
.promo-copy .copy-default,
.promo-copy .copy-done {
  display: inline-block;
  transition: transform 0.25s var(--ease-out-expo), opacity 0.2s ease;
}
.promo-copy .copy-done {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--success);
  opacity: 0;
  transform: translateY(8px);
}
.promo-copy.copied .copy-default { opacity: 0; transform: translateY(-8px); }
.promo-copy.copied .copy-done    { opacity: 1; transform: translateY(0); }
.promo-fine {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--text-50);
  margin-bottom: 14px !important;
  text-transform: uppercase;
}

/* Success state for the discount-msg when GET20 applies */
.discount-msg-success {
  color: var(--success);
}
.discount-msg-success strong {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  color: var(--success);
  font-weight: 600;
}

/* Discount line in modal totals — saffron tint when active */
.ot-discount .ot-val {
  color: var(--saffron) !important;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   PRESET PACKAGES + STICKY ESTIMATE BAR
══════════════════════════════════════════════════════════════════ */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 900px) { .preset-grid { grid-template-columns: 1fr; } }
.preset-card {
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: all 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
  overflow: hidden;
}
.preset-card:hover {
  border-color: var(--text);
  transform: translateY(-3px);
  box-shadow: 4px 4px 0 var(--text);
}
.preset-card:active { transform: translateY(-1px); box-shadow: 2px 2px 0 var(--text); }
.preset-card.preset-active {
  border-color: var(--teal-deep);
  background: var(--teal-soft);
}
.preset-card.preset-active::after {
  content: '✓';
  position: absolute;
  top: 16px; right: 16px;
  width: 22px; height: 22px;
  background: var(--teal-deep);
  color: #FBF7F0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.preset-popular {
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 70%);
  border-color: var(--text-30);
}
.preset-popular::before {
  content: 'Most chosen';
  position: absolute;
  top: -1px; right: 16px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  font-weight: 600;
  padding: 4px 10px;
  text-transform: uppercase;
  line-height: 1;
}
.preset-tag {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--saffron); margin-bottom: 16px;
  font-weight: 500;
}
.preset-popular .preset-tag { color: var(--teal-deep); }
.preset-title {
  font-family: var(--serif); font-weight: 500;
  font-size: 26px; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 6px;
  line-height: 1.1;
}
.preset-price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 22px; font-weight: 500;
  color: var(--teal-deep);
  margin-bottom: 18px;
}
.preset-list {
  list-style: none; padding: 0; margin: 0 0 22px;
  width: 100%;
}
.preset-list li {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.5;
  padding: 6px 0 6px 18px;
  position: relative;
  border-bottom: 1px dashed var(--hairline);
}
.preset-list li:last-child { border-bottom: none; }
.preset-list li::before {
  content: '+'; position: absolute;
  left: 0; top: 6px;
  color: var(--saffron);
  font-family: var(--mono);
  font-weight: 600;
}
.preset-cta {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  margin-top: auto;
  transition: transform 0.25s ease;
}
.preset-card:hover .preset-cta { transform: translateX(4px); }

/* Sticky bottom estimate bar */
.estimate-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 45;
  background: rgba(251,247,240,0.96);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform 0.5s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
  pointer-events: none;
  padding: env(safe-area-inset-bottom) 0 0;
}
:root[data-theme="dark"] .estimate-bar { background: rgba(11,15,19,0.92); }
.estimate-bar.show { transform: translateY(0); pointer-events: all; }
.eb-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
@media (max-width: 1100px) { .eb-inner { padding: 14px 28px; } }
@media (max-width: 600px)  { .eb-inner { padding: 12px 18px; gap: 12px; } }
.eb-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eb-label {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-50);
}
.eb-numbers {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.eb-deposit {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; font-weight: 500;
  color: var(--teal-deep);
  letter-spacing: -0.01em;
}
.eb-sep { color: var(--text-30); }
.eb-total {
  font-size: 12px;
  color: var(--text-70);
  font-weight: 500;
}
.eb-cta {
  white-space: nowrap;
  font-size: 13px !important;
  padding: 11px 18px !important;
}
@media (max-width: 600px) {
  .eb-deposit { font-size: 18px; }
  .eb-total { display: none; }
  .eb-cta { padding: 10px 14px !important; font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .estimate-bar { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   CHECKOUT MODAL
══════════════════════════════════════════════════════════════════ */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.checkout-modal.open {
  opacity: 1;
  pointer-events: all;
}
.checkout-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 25, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:root[data-theme="dark"] .checkout-backdrop { background: rgba(0,0,0,0.72); }
.checkout-panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 44px 40px 32px;
  box-shadow: 0 32px 96px rgba(0,0,0,0.28);
  transform: translateY(28px) scale(0.97);
  transition: transform 0.44s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
  border-radius: 4px;
}
.checkout-modal.open .checkout-panel {
  transform: translateY(0) scale(1);
}
@media (max-width: 640px) {
  .checkout-panel {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    padding: 28px 22px 22px;
    border-radius: 0;
    border: none;
  }
}
.checkout-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--text-70);
  font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}
.checkout-close:hover { color: var(--text); border-color: var(--text-30); background: var(--surface); }
.checkout-close:active { transform: scale(0.92); }

.checkout-back {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--text-50);
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.2s ease;
}
.checkout-back:hover { color: var(--text); }

.checkout-header { margin-bottom: 28px; }
.checkout-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 14px;
}
.checkout-header h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 10px;
}
.checkout-header h2 em { font-style: italic; color: var(--teal-deep); }
.checkout-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text-70);
  line-height: 1.6;
  max-width: 54ch;
}

.checkout-section {
  padding: 20px 0;
  border-top: 1px solid var(--hairline);
}
.checkout-section:first-of-type { border-top: none; padding-top: 0; }
.cs-label {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.cs-optional {
  font-size: 9.5px; color: var(--text-30);
  letter-spacing: 0.12em; text-transform: none;
}

/* Order list */
.order-list { list-style: none; padding: 0; margin: 0; }
.order-item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hairline);
}
.order-item:last-child { border-bottom: none; padding-bottom: 14px; }
.oi-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 15.5px; color: var(--text);
  letter-spacing: -0.01em;
}
.oi-detail {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--text-50);
  margin-top: 2px;
}
.oi-price {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.order-totals {
  margin-top: 14px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--hairline);
}
.ot-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 0;
}
.ot-row + .ot-row { border-top: 1px dashed var(--hairline); padding-top: 8px; margin-top: 2px; }
.ot-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.10em; color: var(--text-70);
}
.ot-val {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--text);
}
.ot-discount .ot-val { color: var(--saffron); }
.ot-due {
  padding-top: 12px !important;
  margin-top: 4px;
  border-top: 2px solid var(--text) !important;
}
.ot-due .ot-label { color: var(--text); font-weight: 600; }
.ot-due .ot-val {
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  color: var(--teal-deep);
}
.ot-balance .ot-label, .ot-balance .ot-val {
  color: var(--text-50);
  font-size: 10.5px;
}
.ot-balance .ot-val { font-size: 11.5px; }

/* Discount */
.discount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.discount-row input {
  font-family: var(--mono);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  border-radius: 0;
  font-size: 13px;
}
.discount-row input:focus {
  outline: none;
  border-color: var(--text);
  background: var(--surface);
}
.btn-discount {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 18px !important;
  font-weight: 500;
}
.discount-msg {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  min-height: 1.2em;
}
.discount-msg-error { color: var(--error); }
.discount-msg-warn  { color: var(--saffron); }
.discount-msg-error strong, .discount-msg-warn strong {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.10em; font-weight: 600;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.shake { animation: shake 0.4s ease; }

/* Payment methods */
.pm-row { display: flex; flex-direction: column; gap: 10px; }
.pm-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.pm-option:hover:not(.pm-disabled) {
  border-color: var(--text);
  background: var(--surface);
}
.pm-option input[type=radio] {
  width: 18px; height: 18px;
  accent-color: var(--teal-deep);
  cursor: pointer;
}
.pm-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pm-name {
  font-family: var(--serif); font-weight: 500;
  font-size: 17px;
  color: var(--text);
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 10px;
}
.pm-desc {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-50);
  margin-top: 4px;
}
.pm-badge {
  font-family: var(--mono); font-size: 8.5px;
  letter-spacing: 0.14em; font-weight: 600;
  text-transform: uppercase;
  color: var(--saffron);
  border: 1px solid var(--saffron);
  padding: 2px 7px;
  border-radius: 99px;
}
.pm-tag {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-50);
  white-space: nowrap;
}
.pm-tag-soon { color: var(--saffron); }
.pm-option.pm-selected { border-color: var(--text); background: var(--surface); }

/* Legal checks */
.legal-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px dashed var(--hairline);
}
.legal-check:last-child { border-bottom: none; }
.legal-check input[type=checkbox] {
  width: 16px; height: 16px;
  margin-top: 3px;
  accent-color: var(--teal-deep);
  cursor: pointer;
}
.legal-check span {
  font-family: var(--sans); font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-70);
}
.legal-check span strong {
  color: var(--text); font-weight: 600;
}
.legal-check span a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-check:hover span { color: var(--text); }

/* Pay button */
.btn-pay {
  margin-top: 22px;
  width: 100%;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
  padding: 16px 22px !important;
  font-family: var(--sans); font-size: 14px; font-weight: 600 !important;
  letter-spacing: -0.005em;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: all 0.25s var(--ease-out-expo);
}
.btn-pay:hover:not(:disabled) {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #FBF7F0;
}
.btn-pay:active:not(:disabled) { transform: scale(0.99); }
.btn-pay:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--text-30);
  border-color: var(--text-30);
  color: var(--bg);
}
.btn-pay-amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* Ziina-themed Pay button */
.btn-pay-ziina {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.btn-pay-lock {
  font-size: 13px;
  line-height: 1;
  opacity: 0.75;
}
.btn-pay-label {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-align: left;
}
.btn-pay-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-block;
}
.btn-pay-ziina:not(:disabled) {
  background: linear-gradient(180deg, var(--text) 0%, var(--ink-90, #1A2128) 100%);
}
.btn-pay-ziina:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--teal-deep) 0%, oklch(0.32 0.07 200) 100%);
}
.btn-pay-ziina:active:not(:disabled) { transform: scale(0.99); }
.btn-pay-ziina .btn-pay-amount {
  padding: 4px 9px;
  background: rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 13.5px;
}

.btn-checkout-cta {
  display: inline-flex !important;
  align-items: center;
  gap: 16px;
}
.btn-checkout-cta .cta-amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  padding: 3px 8px;
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
}

.checkout-fine {
  margin-top: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-50);
  line-height: 1.7;
}
.checkout-fine strong { color: var(--text); font-weight: 600; }
.checkout-fine a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }

/* Stripe mount — legacy Checkout Session iframe */
.stripe-mount {
  min-height: 420px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 4px;
  margin: 14px 0;
}
.stripe-mount > div { width: 100%; }

/* ════════════════════════════════════════════════════════════════
   ZIINA — branded payment method card + handoff
══════════════════════════════════════════════════════════════════ */

/* Ziina-themed payment-method card */
.pm-ziina {
  background: linear-gradient(135deg, var(--bg) 0%, var(--surface) 100%);
  position: relative;
}
.pm-ziina::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 1px solid transparent;
  pointer-events: none;
  background: linear-gradient(135deg, oklch(0.74 0.13 72 / 0.06), transparent 30%);
}
.pm-ziina > * { position: relative; z-index: 1; }

/* Ziina wordmark + brand glyph */
.pm-brand {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.025em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pm-brand-ziina {
  color: var(--teal-deep);
}
.pm-brand-glyph {
  display: inline-block;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--teal-deep);
  position: relative;
  flex-shrink: 0;
}
.pm-brand-glyph::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%);
}
.pm-brand-tabby {
  color: var(--text-50);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.pm-tag-live {
  position: relative;
  padding-left: 14px !important;
  color: var(--success) !important;
}
.pm-tag-live::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  transform: translateY(-50%);
  box-shadow: 0 0 6px var(--success);
  animation: dotPulse 2s ease-in-out infinite;
}

/* Accepted payment method marks */
.pm-icons-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.pm-mark {
  display: inline-flex;
  align-items: center; justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-70);
  white-space: nowrap;
}
.pm-mark[data-mark="visa"]     { color: #1a1f71; }
.pm-mark[data-mark="amex"]     { color: #006fcf; }
.pm-mark[data-mark="mc"] {
  padding: 0 8px; gap: 0;
}
.pm-mark .mc-c {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.pm-mark .mc-c-r { background: #eb001b; }
.pm-mark .mc-c-y { background: #f79e1b; margin-left: -5px; mix-blend-mode: multiply; }
.pm-mark-text { letter-spacing: 0.04em; text-transform: none; font-weight: 600; font-size: 10px; }
.pm-mark[data-mark="bank"] { color: var(--saffron); }
:root[data-theme="dark"] .pm-mark[data-mark="visa"] { color: #8b95d4; }
:root[data-theme="dark"] .pm-mark[data-mark="amex"] { color: #5da8e6; }

/* SVG-based marks (Apple Pay, Google Pay) */
.pm-mark-svg {
  padding: 0 6px;
  color: var(--text);
}
.pm-mark-svg svg {
  height: 14px;
  width: auto;
  display: block;
  fill: currentColor;
}
.pm-mark-svg svg text { fill: currentColor; }
.pm-mark-svg[data-mark="applepay"] svg path { fill: currentColor; }
.pm-mark-svg[data-mark="googlepay"] {
  background: var(--bg);
}

/* ── Ziina handoff (Stage 2) ──────────────────────────────── */
.ziina-handoff {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 24px;
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
  border: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.ziina-handoff::before {
  content: '';
  position: absolute;
  inset: -50% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 0%, oklch(0.50 0.085 200 / 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.ziina-handoff > * { position: relative; z-index: 1; }

/* Animated dot trail */
.ziina-pulse {
  display: flex; gap: 8px;
}
.ziina-pulse-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal-deep);
  animation: ziinaDot 1.4s ease-in-out infinite;
}
.ziina-pulse-dot:nth-child(2) { animation-delay: 0.2s; background: var(--saffron); }
.ziina-pulse-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes ziinaDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ziina-pulse-dot { animation: none; opacity: 0.7; }
}

.ziina-handoff-brand {
  display: flex; align-items: center; gap: 14px;
}
.ziina-wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--teal-deep);
  line-height: 1;
  position: relative;
}
.ziina-wordmark::before {
  content: '';
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--teal-deep);
  margin-right: 6px;
  vertical-align: -5px;
  position: relative;
}
.ziina-wordmark::after {
  content: '';
  position: absolute;
  left: 9px; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bg);
}
.ziina-licensed {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron);
  padding: 4px 9px;
  border: 1px solid var(--saffron);
  border-radius: 99px;
  white-space: nowrap;
}

.ziina-trust {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 44ch;
}
.ziina-trust li {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text-70);
  line-height: 1.5;
  display: flex; align-items: flex-start; gap: 8px;
}
.ziina-trust li em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  background: var(--surface);
  padding: 1px 6px;
}
.zt-tick {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
}

.ziina-hint {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-50);
  line-height: 1.6;
  text-align: center;
}
.ziina-hint a {
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ziina-hint a:hover { color: var(--text); }

/* Legacy Stripe loading kept for backward compat */

/* Stripe Elements (Express Checkout + Payment Element) — legacy */
.elements-section { margin: 0; }
.elements-mount {
  min-height: 56px;
  padding: 0;
  position: relative;
}
.express-mount { margin-bottom: 6px; }
.elements-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-50);
  text-align: center;
}
.elements-divider::before,
.elements-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.elements-divider span { white-space: nowrap; }
#stripeStatus {
  min-height: 1.2em;
  text-align: center;
}
#stripeStatus:not(:empty) {
  color: var(--saffron);
}
.stripe-loading {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 80px 0;
}
.stripe-loading .dot {
  width: 8px; height: 8px;
  background: var(--saffron);
  border-radius: 50%;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.stripe-loading .dot:nth-child(2) { animation-delay: 0.15s; background: var(--teal); }
.stripe-loading .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.stripe-error {
  background: oklch(0.95 0.03 25);
  border: 1px solid oklch(0.55 0.16 25 / 0.3);
  padding: 22px 24px;
  margin: 14px 0;
}
.stripe-error h4 {
  font-family: var(--serif); font-weight: 500;
  font-size: 18px; color: var(--error);
  margin-bottom: 10px;
}
.stripe-error p {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.6;
  margin-bottom: 14px;
}
:root[data-theme="dark"] .stripe-error {
  background: oklch(0.22 0.04 25);
  border-color: oklch(0.55 0.16 25 / 0.4);
}

/* Success stage */
.success-mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: oklch(0.55 0.10 155 / 0.15);
  color: var(--success);
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  margin-bottom: 18px;
  animation: bounceIn 0.6s var(--ease-out-expo);
}
@keyframes bounceIn {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.next-steps {
  padding: 0 0 0 22px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-70);
}
.next-steps li { padding: 4px 0; }
.next-steps strong { color: var(--text); }

/* ── Theme transition ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body, .tool-card, .game-card, .btn, .pill, .icon-btn, .nav-link {
    transition: none !important;
  }
}

/* ── Print ──────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .ai-strip { display: none; }
  body { background: white; color: black; }
}

/* ────────────────────────────────────────────────────────────────
   Legacy-compatibility aliases
   Lets the existing tool/game page markup (.tool-page, .container,
   .tool-widget, .tool-header, --card, --primary, etc.) render in
   the new design language without rewriting each page's inline CSS.
   The miles calculators define their own :root tokens inline, which
   override these — they keep their bespoke themes.
──────────────────────────────────────────────────────────────── */
:root {
  /* Layout aliases */
  --card:         var(--bg);
  --card-hover:   var(--surface);
  /* --border is defined canonically in the token block above —
     not re-aliased here, to avoid a silent override footgun. */
  --border-bright: var(--text);
  --primary:      var(--teal-deep);
  --primary-soft: var(--teal-soft);
  --accent:       var(--teal-deep);
  --accent-2:     var(--saffron);
  --accent-soft:  var(--saffron-soft);
  --text-muted:   var(--text-70);
  --text-dim:     var(--text-50);
  --font:         var(--sans);
  --font-mono:    var(--mono);
  --radius:       var(--r-md);
  --radius-sm:    var(--r-sm);
  --radius-lg:    var(--r-lg);
  --r-pill:       999px;
  --transition:   all 0.2s ease;
  --glass-1:      var(--surface);
  --glass-2:      var(--surface-2);
  --glass-3:      var(--surface-2);
  --stroke-1:     var(--hairline);
  --stroke-2:     var(--border);
  --stroke-3:     var(--text-30);
  --shadow-glass: 6px 6px 0 var(--text);
  --spec-edge:    inset 0 0 0 1px var(--hairline);
  --gap:          18px;

  /* Sand-30 needs a fallback for legacy gc-meta etc. (already defined) */
  /* Saffron alias used by some legacy flows */
  --saffron-bright: var(--saffron);

  /* Brand colour for dark game art (legacy classes used --accent-soft) */
  --primary-bg: var(--surface);

  /* Easing */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-expo: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-out-quart:   cubic-bezier(0.25, 1, 0.5, 1);
}

/* Legacy layout: .tool-page wraps content like .page */
.tool-page {
  max-width: 1320px;
  margin: 0 auto;
  padding: 56px 56px 120px;
  position: relative;
}
@media (max-width: 1100px) { .tool-page { padding: 32px 28px 80px; } }
@media (max-width: 600px)  { .tool-page { padding: 24px 18px 60px; } }
.tool-page > .container { display: block; max-width: none; padding: 0; margin: 0; }

/* Legacy tool header */
.tool-header { margin-bottom: 36px; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.tool-header h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 14px;
}
.tool-header h1 em { font-style: italic; color: var(--teal-deep); }
.tool-header p {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-70);
  line-height: 1.6;
  max-width: 50ch;
}

/* Legacy tool widget */
.tool-widget {
  background: var(--bg);
  border: 1px solid var(--hairline);
  padding: 32px;
  margin-bottom: 28px;
}
.tool-widget.wide { padding: 32px; }
@media (max-width: 600px) { .tool-widget, .tool-widget.wide { padding: 22px; } }

/* Legacy breadcrumb (when used inside .tool-page rather than .page) */
.tool-page .breadcrumb {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 28px;
  padding-top: 0;
  display: flex; gap: 8px; align-items: center;
}
.tool-page .breadcrumb a { color: var(--text-50); text-decoration: none; }
.tool-page .breadcrumb a:hover { color: var(--text); text-decoration: none; }
.tool-page .breadcrumb span:not(.here) {
  color: var(--text-30);
  font-size: 11px;
}

/* Legacy buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  padding: 13px 22px;
  border: 1px solid var(--text);
  cursor: pointer;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #FBF7F0; text-decoration: none; }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  padding: 13px 22px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  border-radius: 0;
  transition: all 0.2s ease;
}
.btn-ghost:hover { background: var(--text); color: var(--bg); text-decoration: none; }

/* Legacy form-group / form-row */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-50); margin-bottom: 8px; }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--text);
}

/* Legacy game-card-big (used by game pages historically) */
.game-card-big {
  display: block;
  border: 1px solid var(--hairline);
  background: var(--gc-bg);
  color: var(--gc-fg);
  text-decoration: none;
  transition: all 0.25s ease;
  overflow: hidden;
}
.game-card-big:hover {
  border-color: var(--text);
  box-shadow: 6px 6px 0 var(--text);
  transform: translate(-3px, -3px);
}
.game-card-big .game-preview {
  aspect-ratio: 16/10;
  display: flex; align-items: center; justify-content: center;
  font-size: 90px;
  background:
    radial-gradient(ellipse at 50% 100%, oklch(0.45 0.085 200 / 0.5) 0%, transparent 60%),
    linear-gradient(180deg, var(--ink-90) 0%, var(--gc-bg) 100%);
}
.game-card-big .game-info { padding: 22px 24px; }
.game-card-big .game-info h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.015em; color: var(--gc-fg); margin-bottom: 6px; }
.game-card-big .game-info p { font-size: 13px; color: var(--sand-30); line-height: 1.55; margin-bottom: 14px; }
.game-card-big .game-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.game-card-big .game-tag {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--sand-30);
}
.game-card-big .play-big-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
}

/* Legacy quick-launch / search / news (now unused but kept safe) */
.spec-edge { box-shadow: var(--spec-edge); }


/* ════════════════════════════════════════════════════════════════
   TIP JAR — buy me a coffee
══════════════════════════════════════════════════════════════════ */
.tip-popup {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 340px; max-width: calc(100vw - 36px);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--saffron);
  padding: 22px 22px 18px;
  z-index: 56;
  transform: translateY(160%) scale(0.97);
  opacity: 0;
  transition: transform 0.55s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.4s ease;
  pointer-events: none;
  box-shadow: 0 16px 56px rgba(15,20,25,0.12);
  border-radius: 2px;
}
.tip-popup.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}
:root[data-theme="dark"] .tip-popup { box-shadow: 0 16px 56px rgba(0,0,0,0.55); }
@media (max-width: 600px) {
  .tip-popup { right: 14px; left: 14px; bottom: 14px; width: auto; }
}
.tip-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px; color: var(--text-50);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.tip-close:hover { color: var(--text); background: var(--surface); border-color: var(--hairline); }
.tip-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-50);
  margin-bottom: 10px;
}
.tip-coffee { font-size: 13px; filter: saturate(1.2); }
.tip-h3 {
  font-family: var(--serif); font-weight: 500;
  font-size: 24px; letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 8px;
}
.tip-h3 em { font-style: italic; color: var(--saffron); }
.tip-body {
  font-family: var(--sans); font-size: 13px;
  color: var(--text-70); line-height: 1.55;
  margin: 0 0 14px;
}
.tip-amounts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.tip-amount {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tip-amount:hover { border-color: var(--text); background: var(--surface); }
.tip-amount:active { transform: scale(0.97); }
.tip-amount:disabled { opacity: 0.4; cursor: not-allowed; }
.tip-custom-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: stretch;
  margin: 8px 0 12px;
}
.tip-custom-prefix {
  display: inline-flex; align-items: center;
  padding: 0 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-50);
  border: 1px solid var(--hairline);
  background: var(--surface);
}
.tip-custom-input {
  font-family: var(--mono); font-size: 13px;
  padding: 9px 10px;
  border: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--text);
  outline: none;
  border-radius: 0;
  width: 100%;
  -moz-appearance: textfield;
}
.tip-custom-input::-webkit-outer-spin-button,
.tip-custom-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tip-custom-input:focus { border-color: var(--text); }
.tip-custom-pay {
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  padding: 0 14px;
  border: 1px solid var(--text);
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tip-custom-pay:hover:not(:disabled) { background: var(--saffron); border-color: var(--saffron); color: #1a1408; }
.tip-custom-pay:active:not(:disabled) { transform: scale(0.97); }
.tip-custom-pay:disabled { opacity: 0.4; cursor: not-allowed; background: var(--text-30); border-color: var(--text-30); color: var(--bg); }
.tip-error {
  font-family: var(--sans); font-size: 12px;
  color: var(--error);
  line-height: 1.5;
  margin: 6px 0 0;
  padding: 8px 10px;
  background: oklch(0.95 0.03 25);
  border: 1px solid oklch(0.55 0.16 25 / 0.3);
}
:root[data-theme="dark"] .tip-error { background: oklch(0.22 0.04 25); }
.tip-loading {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--text-50);
  margin: 8px 0 0;
  padding: 6px 0;
}
.tip-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--saffron);
  animation: tipLoadingDot 1.2s ease-in-out infinite;
}
.tip-loading-dot:nth-child(2) { animation-delay: 0.15s; background: var(--teal-deep); }
.tip-loading-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 8px; }
@keyframes tipLoadingDot {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}
.tip-mute {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--text-30);
  cursor: pointer;
  margin-top: 8px;
  padding: 4px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.tip-mute:hover { color: var(--text-50); }
.tip-toast {
  position: fixed;
  top: 24px; left: 50%;
  transform: translate(-50%, -120%) scale(0.95);
  opacity: 0;
  z-index: 110;
  padding: 12px 18px;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--success, #22c55e);
  box-shadow: 0 12px 32px rgba(15,20,25,0.12);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 13.5px;
  color: var(--text);
  max-width: 90vw;
  transition: transform 0.55s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1)),
              opacity 0.4s ease;
}
.tip-toast.show { transform: translate(-50%, 0) scale(1); opacity: 1; }
.tip-toast-fail { border-top-color: var(--error, #ef4444); }
.tip-toast-icon { font-size: 18px; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .tip-popup, .tip-toast, .tip-loading-dot { transition: none; animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   iOS / iPhone — Mobile-first polish pass
   Addresses: input zoom, touch targets, hover sticking, safe-area
   insets, dvh, overscroll, pill-row scroll, breadcrumb overflow,
   button stacking, tip jar placement, and sticky nav behaviour.
════════════════════════════════════════════════════════════════ */

/* ── 1. Prevent iOS auto-zoom on input focus ─────────────────────
   Any focusable input with font-size < 16px causes iOS Safari to
   zoom the viewport. Force 16px globally — the visual difference
   vs. 15px is imperceptible but the UX difference is massive.     */
input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  font-size: 16px;
}
/* Tip-jar custom input was 13px — also fix */
.tip-custom-input { font-size: 16px; }

/* ── 2. Touch targets — Apple HIG: 44 × 44 pt minimum ───────────
   Use pointer: coarse to target touch screens without affecting
   mouse users (who benefit from compact controls).                 */
@media (pointer: coarse) {
  .icon-btn            { width: 44px; height: 44px; }
  .btn,
  .btn-primary,
  .btn-ghost           { min-height: 44px; }
  .pill                { min-height: 36px; padding: 8px 14px; }
  .tip-close           { width: 40px; height: 40px; top: 6px; right: 6px; }
  .tip-amount          { min-height: 44px; }
  .tip-custom-pay      { min-height: 44px; padding: 0 16px; }
  .tip-mute            { min-height: 36px; padding: 8px 0; }
  .overlay-close       { width: 44px; height: 44px; font-size: 17px; }
  .opt-check           { min-height: 40px; }
  input[type="checkbox"],
  input[type="radio"]  { width: 20px; height: 20px; }
}

/* ── 3. Disable hover-transform sticking on touch screens ────────
   On iOS, :hover fires on first tap and STAYS — tool cards appear
   shifted by 3px and show a shadow until the user taps elsewhere.
   Disable all translate/shadow hover effects on touch devices, and
   replace with clean :active press feedback instead.               */
@media (hover: none) {
  /* Tool cards */
  .tool-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--hairline) !important;
  }
  .tool-card:hover .tc-glyph {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--hairline) !important;
    transform: none !important;
  }
  .tool-card:hover .tc-arrow {
    transform: none !important;
    color: var(--text-50) !important;
  }
  .tool-card:hover::before { opacity: 0 !important; }

  /* Game cards */
  .game-card:hover,
  .game-card-big:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--hairline) !important;
  }
  .game-card:hover .gc-art::after { opacity: 0 !important; }

  /* Nav brand dot */
  .nav-brand:hover .word .dot { transform: none; }

  /* AI strip */
  .ai-strip:hover { background: var(--teal); }

  /* Buttons */
  .btn:hover,
  .btn-primary:hover,
  .btn-ghost:hover { background: var(--text); border-color: var(--text); color: var(--bg); }

  /* Press / active states for genuine tactile feedback */
  .tool-card:active {
    background: var(--surface);
    opacity: 0.85;
    transition: opacity 0.06s ease, background 0.06s ease;
  }
  .game-card:active,
  .game-card-big:active {
    opacity: 0.80;
    transition: opacity 0.06s ease;
  }
  .btn:active,
  .btn-primary:active,
  .btn-ghost:active {
    opacity: 0.70;
    transform: scale(0.98);
    transition: opacity 0.06s ease, transform 0.06s ease;
  }
  .pill:active { opacity: 0.70; }
  .icon-btn:active { opacity: 0.65; transform: scale(0.92); }
  .nav-overlay-link:active { opacity: 0.60; }
  .tip-amount:active { transform: scale(0.96); }
}

/* ── 4. Safe-area insets (notch, Dynamic Island, home bar) ───────

   a) Overlay close button must clear the notch / Dynamic Island.
   b) Nav overlay needs top padding so links don't sit behind it.
   c) Tip popup must float above the home indicator.
   d) Footer needs bottom padding so text isn't behind the home bar.
   e) Page containers get bottom padding for home indicator.        */

/* a. Overlay close */
.overlay-close {
  top:   max(20px, calc(env(safe-area-inset-top)   + 12px));
  right: max(20px, calc(env(safe-area-inset-right) + 12px));
}
/* b. Nav overlay content insets */
.nav-overlay {
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}
/* Overlay footer text above home indicator */
.overlay-footer {
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px));
}

/* c. Tip popup above home indicator */
.tip-popup {
  bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
}
@media (max-width: 600px) {
  .tip-popup {
    bottom: max(16px, calc(16px + env(safe-area-inset-bottom)));
    left:   max(14px, env(safe-area-inset-left));
    right:  max(14px, env(safe-area-inset-right));
    width: auto;
  }
}

/* Tip toast at top: clear Dynamic Island */
.tip-toast {
  top: max(24px, calc(env(safe-area-inset-top) + 10px));
}

/* d. Site footer */
.site-footer {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

/* e. Page containers */
.page {
  padding-bottom: max(120px, calc(80px + env(safe-area-inset-bottom)));
}
@media (max-width: 600px) {
  .page { padding-bottom: max(60px, calc(40px + env(safe-area-inset-bottom))); }
}
.tool-page {
  padding-bottom: max(120px, calc(80px + env(safe-area-inset-bottom)));
}
@media (max-width: 600px) {
  .tool-page { padding-bottom: max(60px, calc(40px + env(safe-area-inset-bottom))); }
}

/* ── 5. Dynamic viewport height ──────────────────────────────────
   100vh on iOS Safari = full height INCLUDING the browser toolbar.
   100dvh (dynamic) = visible viewport only. Always use dvh where
   min-height: 100vh was used so nothing is clipped under the bar.  */
body {
  min-height: 100svh; /* small viewport: excludes dynamic bars */
  min-height: 100dvh; /* dynamic viewport: live updates as bars hide */
}

/* ── 6. Overscroll bounce control ────────────────────────────────
   iOS rubber-band bounce on every scroll can feel unsteady.
   Previously only active in PWA/standalone mode — now global.      */
body { overscroll-behavior-y: contain; }

/* ── 7. Pill filter row — horizontal scroll on mobile ────────────
   Wrapping pills to multiple rows looks cluttered on small screens.
   Horizontal scroll with faded edges is far cleaner.               */
@media (max-width: 600px) {
  .pill-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    gap: 6px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Fade left/right edges to signal scrollability */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0px,
      #000 14px,
      #000 calc(100% - 14px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      transparent 0px,
      #000 14px,
      #000 calc(100% - 14px),
      transparent 100%
    );
  }
  .pill-row::-webkit-scrollbar { display: none; }
}

/* ── 8. Breadcrumb — prevent overflow on long paths ──────────────
   "Home / Tools / AI Tools / PDF → Markdown" is too wide for 375px.
   Scroll horizontally and fade the right edge.                      */
@media (max-width: 600px) {
  .breadcrumb,
  .tool-page .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(to right, #000 75%, transparent 100%);
            mask-image: linear-gradient(to right, #000 75%, transparent 100%);
  }
  .breadcrumb::-webkit-scrollbar,
  .tool-page .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ── 9. Tab bars — hide scrollbar, keep scroll ───────────────────  */
@media (max-width: 600px) {
  .tk-tabs { scrollbar-width: none; }
  .tk-tabs::-webkit-scrollbar { display: none; }
}

/* ── 10. Button groups stack on very small screens ───────────────
   Multi-button rows on 320–390px iPhones look cramped. Stack them.  */
@media (max-width: 480px) {
  .btn-group {
    flex-direction: column;
  }
  .btn-group .btn,
  .btn-group .btn-primary,
  .btn-group .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ── 11. Tool widget — tighter inner padding on small screens ──── */
@media (max-width: 480px) {
  .tool-widget,
  .tool-widget.wide { padding: 16px; }
  .drop-zone        { padding: 36px 16px; }
}

/* ── 12. Tip jar amounts — 4-column grid on mobile ───────────────
   2×2 grid feels wide; 4 in a row is more compact on mobile.       */
@media (max-width: 600px) {
  .tip-amounts {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  .tip-amount { font-size: 12px; padding: 10px 4px; }
  .tip-h3     { font-size: 20px; }
}

/* ── 13. Prevent text selection on tap-interactive elements ───── */
.tool-card,
.game-card,
.game-card-big,
.pill,
.icon-btn,
.nav-overlay-link,
.tip-amount {
  -webkit-user-select: none;
  user-select: none;
}

/* ── 14. touch-action: manipulation on all interactive elements ──
   Disables double-tap-to-zoom on links and buttons (Safari fires
   a 300ms delay otherwise if manipulation is not set).             */
a,
button,
[role="button"],
.tool-card,
.game-card,
.pill,
.btn,
.btn-primary,
.btn-ghost,
input,
select,
textarea,
label {
  touch-action: manipulation;
}

/* ── 15. Sticky nav — promote to GPU layer on iOS ────────────────
   iOS Safari occasionally flickers position:sticky during scroll.
   Promoting to a composited layer (via translateZ) prevents this.  */
.site-header {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* ── 16. Footer layout — stack on mobile ────────────────────────── */
@media (max-width: 480px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-links { gap: 10px; }
}

/* ── 17. Nav overlay link scale — keep readable on SE / mini ────── */
@media (max-width: 380px) {
  .nav-overlay-link {
    font-size: clamp(30px, 9vw, 52px);
  }
}

/* ── 18. Input / select border-radius on iOS ──────────────────────
   iOS adds rounded corners to inputs if border-radius isn't set.
   Ensure they respect our sharp-edge design system.                */
input,
select,
textarea {
  -webkit-border-radius: 0;
  border-radius: inherit;
}

/* ── 19. Scroll-snap for horizontal pill row ─────────────────────
   Optional: snap each pill into view as you scroll.                */
@media (max-width: 600px) {
  .pill-row { scroll-snap-type: x proximity; }
  .pill-row .pill { scroll-snap-align: start; }
}

/* ── 20. Safe-area-aware site-header ─────────────────────────────
   On landscape iPhone the site-header already adds safe-area-inset-top.
   In landscape, also add left/right insets to the nav-bar itself.  */
@media (orientation: landscape) and (max-height: 500px) {
  .site-header {
    padding-left:  max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  /* Compact nav bar in landscape so it takes less vertical room */
  .nav-bar { padding: 7px 10px 7px 16px; }
  .nav-brand .am-mark { width: 22px; height: 22px; }
  .nav-brand .word { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════
   VISUAL POLISH LAYER
   A bolder pass over the shared design language — hero treatments,
   card depth, editorial article styling. Sand / ink / teal / saffron
   only; nothing here touches the bespoke product-branded pages.
══════════════════════════════════════════════════════════════════ */

/* ── Hero — layered gradient mesh ───────────────────────────── */
.hero,
.studio-hero {
  background:
    radial-gradient(56% 46% at 88% 2%,  var(--teal-soft)    0%, transparent 72%),
    radial-gradient(48% 42% at 0% 96%,  var(--saffron-soft) 0%, transparent 74%);
  /* Clip so the arc motif bleeds off the edge rather than
     producing horizontal page scroll. */
  overflow: clip;
}
.studio-hero { isolation: isolate; }
.studio-hero .hero-art { top: -48px; }
html[dir="ltr"] .studio-hero .hero-art { right: -120px; }
html[dir="rtl"] .studio-hero .hero-art { left: -120px; }

/* ── Hero / studio arc motif (code-side editorial imagery) ──── */
.hero-art {
  position: absolute;
  top: -56px;
  width: min(640px, 78vw);
  height: auto;
  z-index: -1;
  pointer-events: none;
  animation: heroArtFloat 19s ease-in-out infinite alternate;
}
html[dir="ltr"] .hero-art { right: -86px; }
html[dir="rtl"] .hero-art { left: -86px; transform: scaleX(-1); }
.hero-art .ring { fill: none; stroke: var(--text); stroke-width: 1; }
.hero-art .ring:nth-child(1) { opacity: 0.52; }
.hero-art .ring:nth-child(2) { opacity: 0.40; }
.hero-art .ring:nth-child(3) { opacity: 0.30; }
.hero-art .ring:nth-child(4) { opacity: 0.21; }
.hero-art .ring:nth-child(5) { opacity: 0.13; }
.hero-art .ring-accent { fill: none; stroke: var(--saffron); stroke-width: 1.4; opacity: 0.85; }
.hero-art .ring-dot { fill: var(--saffron); }
:root[data-theme="dark"] .hero-art .ring { stroke-width: 1.1; }
@keyframes heroArtFloat {
  from { transform: translate(0, 0); }
  to   { transform: translate(-14px, 12px); }
}
html[dir="rtl"] .hero-art { animation-name: heroArtFloatRtl; }
@keyframes heroArtFloatRtl {
  from { transform: scaleX(-1) translate(0, 0); }
  to   { transform: scaleX(-1) translate(-14px, 12px); }
}
@media (max-width: 700px) {
  .hero-art { width: 420px; top: -70px; }
  html[dir="ltr"] .hero-art { right: -150px; }
  html[dir="rtl"] .hero-art { left: -150px; }
  .hero-art .ring:nth-child(1) { opacity: 0.34; }
  .hero-art .ring:nth-child(2) { opacity: 0.26; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
}

/* ── Tool card — saffron hover accent + glyph depth ─────────── */
.tool-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.34s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
  z-index: 2;
}
html[dir="rtl"] .tool-card::after { transform-origin: right center; }
.tool-card:hover::after { transform: scaleX(1); }
.tool-card .tc-glyph {
  background: linear-gradient(152deg, var(--surface) 0%, var(--surface-2) 100%);
  box-shadow: 0 1px 2px rgba(15,20,25,0.04);
}
:root[data-theme="dark"] .tool-card .tc-glyph {
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
@media (prefers-reduced-motion: reduce) {
  .tool-card::after { transition: none; }
}

/* ── Bento — let the wide featured card breathe ─────────────── */
.bento-wide .tc-glyph { width: 52px; height: 52px; min-width: 52px; }
.bento-wide .tc-glyph svg { width: 26px; height: 26px; }
.bento-wide .tc-name { font-size: 25px; }

/* ── Section row — "see all" becomes a confident pill link ──── */
.section-row a.see-all {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.section-row a.see-all:hover {
  color: var(--text);
  border-color: var(--text);
  background: var(--surface);
}

/* ── AI strip — gradient + circular arrow ───────────────────── */
.ai-strip {
  background: linear-gradient(116deg, var(--teal-deep) 0%, var(--teal) 52%, var(--teal-deep) 100%);
  position: relative;
  overflow: hidden;
}
.ai-strip::before {
  content: '';
  position: absolute;
  top: -60%; right: -4%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(251,247,240,0.16) 0%, transparent 66%);
  pointer-events: none;
}
.ai-strip .arrow {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(251,247,240,0.45);
  border-radius: 50%;
  transition: background 0.25s ease, transform 0.3s var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}
.ai-strip:hover .arrow {
  background: rgba(251,247,240,0.16);
  transform: translateX(4px);
}
html[dir="rtl"] .ai-strip:hover .arrow { transform: translateX(-4px) scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
  .ai-strip .arrow, .ai-strip:hover .arrow { transition: none; transform: none; }
}

/* ── Editorial article treatment (about + guide articles) ───── */
.static-page .page-date + p::first-letter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  margin: 8px 12px 0 0;
  color: var(--teal-deep);
}
html[dir="rtl"] .static-page .page-date + p::first-letter {
  float: right;
  margin: 8px 0 0 12px;
}
.static-page h2 {
  position: relative;
  padding-top: 20px;
}
.static-page h2::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 2px;
  background: var(--saffron);
}
html[dir="rtl"] .static-page h2::before { left: auto; right: 0; }

/* ── Footer — anchor it with a quiet wordmark scale ─────────── */
.site-footer { position: relative; }
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 64px; height: 2px;
  background: var(--saffron);
}