/* =========================================================================
   PALETTE REVEAL — Figma-style refresh
   Soft pastels, generous whitespace, big rounded cards, beauty-editorial.
   Keeps original brand tokens (paper / plum / coral / gold / jade / lilac).
   ========================================================================= */

:root {
  /* Original brand tokens — preserved */
  --ink: #11100f;
  --muted: #4a4540;
  --paper: #fbf6ee;
  --veil: #f3eee5;
  --plum: #4b183e;
  --coral: #e86f5b;
  --gold: #c8a45d;
  --jade: #2f766b;
  --lilac: #b8a5d3;
  --line: rgba(36, 27, 33, 0.10);
  --line-2: rgba(36, 27, 33, 0.18);

  /* New: pastel surface tints (Figma-flavored) */
  --tint-blush: #fdeae0;       /* coral pastel */
  --tint-butter: #fbf0d6;      /* gold pastel */
  --tint-mint: #e1f1ec;        /* jade pastel */
  --tint-lilac: #ece1f3;       /* lilac pastel */
  --tint-rose: #f7dcd2;
  --tint-cream: #fbf6ee;

  /* Typography */
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Radii — generous, Figma-style */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 18px -10px rgba(60, 35, 12, 0.18);
  --shadow-md: 0 18px 40px -20px rgba(75, 24, 62, 0.20);
  --shadow-lg: 0 30px 70px -30px rgba(75, 24, 62, 0.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { width: min(1240px, calc(100% - 3rem)); margin: 0 auto; }

/* ── header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  /* 3-column grid keeps the centre nav-pill ALIGNED TO PAGE CENTRE
     regardless of how wide the logo or the right-side group are.
     space-between flex was making the nav drift right because the logo
     is much wider than the right group. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1240px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 1.1rem 0;
}
.site-header > .brand { justify-self: start; }
.site-header > .top-nav-pill { justify-self: center; }
.site-header > .nav-right { justify-self: end; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand-mark {
  width: 44px; height: 26px; flex-shrink: 0;
}
.brand-text {
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem;
  letter-spacing: .02em; color: var(--ink);
}
.brand-text small {
  display: block; font-size: .58rem; letter-spacing: .42em;
  color: #7a5b16; font-weight: 600; text-transform: uppercase; margin-top: 1px;
}

.top-nav-pill {
  display: flex; align-items: center; gap: .2rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .35rem;
  box-shadow: var(--shadow-sm);
}
.top-nav-pill a {
  padding: .55rem .95rem;
  border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 500; color: #2a2522;
  transition: background .15s ease, color .15s ease;
}
.top-nav-pill a:hover { background: var(--tint-cream); color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: .6rem; }
.nav-signin {
  font-size: .88rem; font-weight: 500; color: var(--ink);
  padding: .55rem .9rem; border-radius: var(--r-pill);
}
.nav-signin:hover { background: rgba(0,0,0,.04); }
.nav-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--ink); color: #fff;
  padding: .65rem 1.15rem; border-radius: var(--r-pill);
  font-size: .88rem; font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px -8px rgba(17,16,15,.5);
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(17,16,15,.55); }
.nav-cta::after {
  content: "→"; transition: transform .2s ease;
}
.nav-cta:hover::after { transform: translateX(2px); }

@media (max-width: 880px) {
  .top-nav-pill { display: none; }
}

/* ── Mobile hamburger button + slide-in drawer ─────────────────────────── */
/* page-shell.js injects a hamburger button and a drawer alongside the desktop
   nav. They're hidden on desktop and revealed on ≤880px so mobile users can
   reach every section the desktop pill exposes (Home / Tools / Premium /
   Guides / About) plus the language switcher and sign-in. */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  color: var(--ink);
  margin-left: 4px;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 8, 0.55);
  z-index: 9999;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mobile-drawer.is-open { display: block; opacity: 1; }
.mobile-drawer-inner {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(380px, 92vw);
  background: var(--paper);
  padding: 1.25rem 1.5rem 2rem;
  box-shadow: -8px 0 32px rgba(20, 12, 8, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-drawer.is-open .mobile-drawer-inner { transform: translateX(0); }
.mobile-drawer-close {
  align-self: flex-end;
  background: transparent;
  border: 0;
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 10px;
  margin: 0 -6px 0 0;
  cursor: pointer;
  color: var(--ink);
}
.mobile-nav { display: flex; flex-direction: column; gap: 0; }
.mobile-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 14px 4px;
  font-family: var(--serif);
  font-size: 1.1rem;
  border-bottom: 1px solid var(--line);
  display: block;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a[aria-current="page"] { color: var(--plum); font-weight: 600; }
.mobile-lang-switch {
  display: flex;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mobile-lang-switch .lang-btn {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
.mobile-lang-switch .lang-btn.is-active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.mobile-signin {
  display: block;
  padding: 14px 4px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
}
.mobile-cta {
  display: block;
  background: var(--ink);
  color: var(--paper);
  padding: 14px 20px;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  font-weight: 600;
  margin-top: auto;
}
body.menu-open { overflow: hidden; }

@media (max-width: 880px) {
  .nav-toggle { display: flex; }
  /* The desktop right-side group still renders, but on phones we collapse
     the secondary actions because they're duplicated inside the drawer. */
  .site-header > .nav-right .lang-switch,
  .site-header > .nav-right .nav-signin {
    display: none;
  }
}
@media (max-width: 520px) {
  /* On narrow phones, also drop the inline CTA so the header is just
     [brand] [hamburger]. The drawer still has the Reveal button. */
  .site-header > .nav-right .nav-cta { display: none; }
}

/* ── chips & eyebrows ──────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  padding: .42rem .8rem;
  border-radius: var(--r-pill);
  background: #fff; border: 1px solid var(--line);
  color: var(--ink);
}
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--coral);
}
.chip.coral { background: var(--tint-blush); border-color: rgba(232,111,91,.3); color: #a13a28; }
.chip.gold  { background: var(--tint-butter); border-color: rgba(200,164,93,.4); color: #7a5b16; }
.chip.mint  { background: var(--tint-mint);  border-color: rgba(47,118,107,.25); color: #1f5e54; }
.chip.lilac { background: var(--tint-lilac); border-color: rgba(184,165,211,.5); color: #5b3f7a; }
.chip.plum  { background: rgba(75,24,62,.08); border-color: rgba(75,24,62,.18); color: var(--plum); }

.eyebrow {
  font-family: var(--sans);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 .9rem;
}

/* ── headings ──────────────────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: 1.02; font-weight: 400; }
h2 { font-size: clamp(2.0rem, 3.6vw, 3.2rem); line-height: 1.04; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.55rem); line-height: 1.2; font-weight: 500; }
h4 { font-family: var(--sans); font-weight: 600; margin: 0; font-size: .95rem; letter-spacing: .01em; }

.lede { color: var(--muted); font-size: 1.08rem; line-height: 1.55; max-width: 38ch; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: .92rem; font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.button.primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(17,16,15,.5);
}
.button.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(17,16,15,.55); }
.button.secondary {
  background: #fff; color: var(--ink);
  border-color: var(--line-2);
}
.button.secondary:hover { background: var(--tint-cream); }
.button.gold {
  background: linear-gradient(135deg, #d8b46e 0%, #b8893f 100%);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(122, 91, 22, .5);
}
.button.gold:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(122, 91, 22, .6); }
.button.coral {
  background: var(--coral); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(232,111,91,.6);
}
.button.coral:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(232,111,91,.7); }
.button.full { width: 100%; }
.button .arrow { transition: transform .2s ease; }
.button:hover .arrow { transform: translateX(3px); }

/* ── HERO ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 3.5rem 0 5rem;
  text-align: center;
  overflow: hidden;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero-video-veil {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Lighter veil so the video remains clearly visible. We only fade
     toward cream at the bottom (so the next section transitions cleanly)
     and at the very edges (for headline legibility). The middle of the
     video stays nearly fully visible. */
  background:
    /* Per user feedback: previous veil was too light, headline copy unreadable
       over the video. Bumped each stop +0.10 (≈ 25% baseline opacity that
       worked perfectly before). */
    radial-gradient(ellipse at 50% 35%, rgba(251,246,238,0) 0%, rgba(251,246,238,0.20) 45%, rgba(251,246,238,0.40) 78%, rgba(251,246,238,0.72) 100%),
    linear-gradient(180deg, rgba(251,246,238,0) 0%, rgba(251,246,238,0.05) 55%, rgba(251,246,238,0.65) 100%);
}
.hero-blob-1, .hero-blob-2, .hero-blob-3 {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45;
  z-index: 0; pointer-events: none;
  mix-blend-mode: multiply;
}
.hero-blob-1 { width: 480px; height: 480px; top: -100px; left: -120px; background: var(--tint-blush); }
.hero-blob-2 { width: 420px; height: 420px; top: 60px; right: -120px; background: var(--tint-lilac); }
.hero-blob-3 { width: 360px; height: 360px; bottom: -80px; left: 35%; background: var(--tint-butter); opacity: .4; }

.hero-inner { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }

.hero .chip { margin: 0 auto 1.75rem; }

.hero-rotator {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 auto;
  max-width: 14ch;
  min-height: 2.6em; /* prevent CLS */
  text-wrap: balance;
}
.hero-rotator .word { display: inline-block; white-space: nowrap; }
.hero-rotator .char {
  display: inline-block;
  opacity: 0;
  animation: prCharIn forwards cubic-bezier(.2,.8,.2,1);
}
@keyframes prCharIn {
  from { opacity: 0; transform: translateY(.18em); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-rotator em {
  font-style: italic;
  background: linear-gradient(110deg, var(--coral) 0%, var(--plum) 60%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-text {
  margin: 1.6rem auto 0;
  max-width: 52ch;
  font-size: 1.12rem; line-height: 1.55;
  /* User feedback: muted gray was unreadable over the hero video.
     Switched to ink (near-black) and bumped weight a touch. */
  color: var(--ink);
  font-weight: 500;
}
.hero-actions {
  display: inline-flex; gap: .7rem; margin: 2rem auto 1.4rem;
  flex-wrap: wrap; justify-content: center;
}
.hero-trust {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .85rem; color: var(--ink);
  font-weight: 500;
  margin-top: .8rem;
}
.avatar-stack {
  display: inline-flex; align-items: center;
}
.avatar-stack span {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--paper);
  margin-left: -8px; display: block;
}
.avatar-stack span:nth-child(1) { background: linear-gradient(135deg,#f0cdb5,#7b432e); margin-left: 0; }
.avatar-stack span:nth-child(2) { background: linear-gradient(135deg,#e6b591,#3f241d); }
.avatar-stack span:nth-child(3) { background: linear-gradient(135deg,#c66a45,#2b1713); }
.avatar-stack span:nth-child(4) { background: linear-gradient(135deg,#d4a179,#5a342a); }
.stars { color: var(--coral); letter-spacing: .12em; }

/* hero canvas — animated palette demo */
.hero-canvas {
  position: relative; z-index: 1;
  margin: 3rem auto 0;
  max-width: 920px;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  padding: 1rem;
}
.hero-canvas-frame {
  width: 100%; height: 100%;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--tint-blush) 0%, var(--tint-lilac) 100%);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 1rem;
  padding: 1.2rem;
  overflow: hidden;
}
.hero-portrait {
  background: var(--tint-cream);
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.6);
}
.hero-portrait::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 38%, #f4d4be 0%, #d6a98c 35%, #8c5a44 70%, #4a2a1f 100%);
}
.hero-portrait-mask {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255,255,255,.35) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 75%, rgba(0,0,0,.2) 0%, transparent 60%);
}
.hero-sample-dot {
  position: absolute;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  opacity: 0;
  animation: prDot 8s ease-in-out infinite;
}
.hero-sample-dot.d1 { top: 18%; left: 48%; background: #c89a7a; animation-delay: .5s; }
.hero-sample-dot.d2 { top: 42%; left: 32%; background: #b88466; animation-delay: 1.5s; }
.hero-sample-dot.d3 { top: 64%; left: 56%; background: #a87055; animation-delay: 2.5s; }
@keyframes prDot {
  0%, 5% { opacity: 0; transform: scale(.4); }
  10%, 70% { opacity: 1; transform: scale(1); }
  85%, 100% { opacity: 0; transform: scale(1.2); }
}

.hero-result-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 12px 30px -16px rgba(75,24,62,.25);
  border: 1px solid rgba(255,255,255,.8);
}
.hero-result-eyebrow {
  font-size: .65rem; letter-spacing: .28em; text-transform: uppercase;
  color: #7a5b16; font-weight: 700;
}
.hero-result-name {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
  line-height: 1; margin: -.15rem 0 .1rem;
}
.hero-result-trait { font-size: .82rem; color: var(--muted); font-style: italic; margin: 0; }
.hero-palette-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-top: .3rem;
}
.hero-palette-grid span {
  aspect-ratio: 1;
  border-radius: 6px;
  opacity: 0;
  animation: prSwatchIn .5s cubic-bezier(.2,.8,.2,1) forwards;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
@keyframes prSwatchIn {
  from { opacity: 0; transform: scale(.6) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.hero-result-meta {
  display: flex; gap: .9rem; font-size: .72rem;
  margin-top: .2rem; color: var(--muted);
}
.hero-result-meta strong { display: block; color: var(--ink); font-size: .85rem; font-weight: 600; }

@media (max-width: 720px) {
  .hero-canvas-frame { grid-template-columns: 1fr; }
  .hero-portrait { aspect-ratio: 4/3; }
}

/* ── section base ──────────────────────────────────────────────────────── */
section {
  padding: 5rem 0;
  position: relative;
}
.section-head {
  max-width: 720px; margin: 0 auto 3rem;
  text-align: center;
}
.section-head .lede { margin: 1.2rem auto 0; }

/* ── BAND: How it works (4 steps) ──────────────────────────────────────── */
.band-explain {
  background: linear-gradient(180deg, var(--paper) 0%, var(--veil) 100%);
}
.explain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.explain-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.explain-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.explain-card.t-blush  { background: linear-gradient(160deg, #fff 0%, var(--tint-blush) 130%); }
.explain-card.t-mint   { background: linear-gradient(160deg, #fff 0%, var(--tint-mint) 130%); }
.explain-card.t-butter { background: linear-gradient(160deg, #fff 0%, var(--tint-butter) 130%); }
.explain-card.t-lilac  { background: linear-gradient(160deg, #fff 0%, var(--tint-lilac) 130%); }
.explain-num {
  font-family: var(--serif);
  font-size: 2.2rem; font-weight: 400; color: var(--ink);
  display: block; margin-bottom: .8rem;
  font-feature-settings: "lnum";
}
.explain-card h3 { font-size: 1.05rem; font-weight: 600; font-family: var(--sans); margin-bottom: .4rem; }
.explain-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 0; }

@media (max-width: 880px) { .explain-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .explain-grid { grid-template-columns: 1fr; } }

/* ── BAND: Tools (with tabs) ───────────────────────────────────────────── */
.band-tools { background: var(--paper); }
.tabs {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: .35rem;
  box-shadow: var(--shadow-sm);
  margin: 0 auto 2.2rem;
}
.tab-btn {
  border: 0; background: transparent;
  padding: .55rem 1.15rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  font-size: .9rem; font-weight: 600;
  color: #5a5550;
  transition: background .2s ease, color .2s ease;
}
.tab-btn[aria-selected="true"] {
  background: var(--ink); color: #fff;
}

.tools-board {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.2rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  align-items: center;
}
.tools-board[hidden] { display: none; }

.tools-board-copy { padding: .5rem .5rem; }
.tools-board-copy h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: .9rem;
}
.tools-board-copy p { color: var(--muted); margin: 0 0 1.5rem; font-size: 1rem; line-height: 1.55; }
.tools-board-bullets { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .55rem; }
.tools-board-bullets li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .92rem; color: #2a2522;
}
.tools-board-bullets li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tint-mint);
  flex-shrink: 0;
  background-image:
    linear-gradient(45deg, transparent 38%, var(--jade) 38%, var(--jade) 50%, transparent 50%),
    linear-gradient(-45deg, transparent 50%, var(--jade) 50%, var(--jade) 60%, transparent 60%);
  background-size: 50% 50%, 50% 50%;
  background-position: 30% 60%, 50% 60%;
  background-repeat: no-repeat;
  margin-top: 2px;
}

.tools-board-mock {
  border-radius: var(--r-lg);
  padding: 1.5rem;
  min-height: 380px;
  position: relative;
  overflow: hidden;
}
.tools-board-mock.m-blush { background: linear-gradient(150deg, var(--tint-blush) 0%, #fff 100%); }
.tools-board-mock.m-mint  { background: linear-gradient(150deg, var(--tint-mint)  0%, #fff 100%); }
.tools-board-mock.m-lilac { background: linear-gradient(150deg, var(--tint-lilac) 0%, #fff 100%); }

/* mock 1 — palette test */
.mock-portrait {
  width: 100%; aspect-ratio: 4/5;
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 38%, #f4d4be 0%, #d6a98c 35%, #8c5a44 70%, #4a2a1f 100%);
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(75,24,62,.3);
}
.mock-portrait .dot {
  position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
.mock-portrait .dot.d1 { top: 22%; left: 50%; background: #c89a7a; }
.mock-portrait .dot.d2 { top: 44%; left: 34%; background: #b88466; }
.mock-portrait .dot.d3 { top: 62%; left: 58%; background: #a87055; }
.mock-result-pill {
  position: absolute; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  display: flex; align-items: center; gap: .8rem;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.3);
}
.mock-result-pill .swatches {
  display: flex; gap: 3px;
}
.mock-result-pill .swatches span {
  width: 14px; height: 22px; border-radius: 4px;
}
.mock-result-pill .name {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 500;
}
.mock-result-pill .sub { font-size: .72rem; color: var(--muted); }

/* mock 2 — wrist veins */
.mock-wrist {
  width: 100%; aspect-ratio: 4/5;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #f0d8c4 0%, #d6b095 60%, #b88a6a 100%);
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(47,118,107,.3);
}
.mock-wrist svg { position: absolute; inset: 0; }
.mock-wrist-tag {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,.95);
  border-radius: var(--r-pill);
  padding: .35rem .8rem;
  font-size: .75rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: .35rem;
}
.mock-wrist-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--jade);
}

/* mock 3 — outfit match */
.mock-outfit {
  width: 100%; aspect-ratio: 4/5;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, #fff 0%, var(--tint-lilac) 100%);
  padding: 1rem;
  display: grid; grid-template-rows: 1fr auto; gap: .8rem;
  box-shadow: 0 18px 40px -20px rgba(184,165,211,.5);
}
.mock-outfit-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
}
.mock-outfit-img {
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, #d4a179, #5a342a);
}
.mock-outfit-img.b { background: linear-gradient(135deg, #b88aa8, #5b3f7a); }
.mock-outfit-score {
  background: #fff;
  border-radius: var(--r-md);
  padding: .8rem 1rem;
  display: flex; align-items: center; justify-content: space-between;
}
.mock-outfit-score b {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500;
  color: var(--jade);
}

@media (max-width: 880px) {
  .tools-board { grid-template-columns: 1fr; padding: 1.5rem; }
  .tools-board-mock { min-height: 320px; }
}

/* ── BAND: Premium products ───────────────────────────────────────────── */
.band-premium {
  background: linear-gradient(180deg, var(--paper) 0%, var(--tint-butter) 100%);
}
.premium-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.2rem;
}
.premium-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.6rem;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.premium-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.premium-card.feature {
  grid-row: 1 / span 2;
  background: linear-gradient(160deg, #fff 0%, var(--tint-butter) 120%);
  border: 1.5px solid rgba(200,164,93,.4);
  padding: 2rem;
}
.premium-tag {
  position: absolute; top: 1.2rem; right: 1.2rem;
  background: var(--ink); color: #fff;
  font-size: .65rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: var(--r-pill);
}
.premium-card .eyebrow { color: #7a5b16; margin-bottom: .4rem; }
.premium-card h3 {
  font-family: var(--serif); font-weight: 500; font-size: 1.45rem;
  letter-spacing: -0.02em; line-height: 1.1;
}
.premium-card.feature h3 { font-size: 1.85rem; }
.premium-card p { color: var(--muted); font-size: .92rem; line-height: 1.55; margin: 0; flex: 1; }
.premium-price {
  font-family: var(--serif); display: flex; align-items: baseline; gap: .55rem;
  margin: .2rem 0 0;
}
.premium-price .now { font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.premium-price .was {
  font-size: .92rem; color: #a09786; text-decoration: line-through;
  font-weight: 400;
}
.premium-price small { font-size: .7rem; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; font-family: var(--sans); }
.premium-mock {
  margin: -.4rem -.4rem .4rem;
  border-radius: var(--r-md);
  padding: 1.2rem;
  min-height: 160px;
  position: relative;
  overflow: hidden;
}
.premium-mock.feature {
  min-height: 240px;
  background: radial-gradient(120% 80% at 30% 20%, var(--tint-butter) 0%, transparent 60%),
              linear-gradient(160deg, #fdf6e6 0%, #f0d9a8 100%);
  display: flex; align-items: center; justify-content: center;
}
.premium-mock.pdf-mock {
  background: linear-gradient(160deg, var(--tint-blush) 0%, #fff 100%);
  display: flex; align-items: center; justify-content: center;
}
.premium-mock.gift-mock {
  background: linear-gradient(160deg, var(--tint-lilac) 0%, #fff 100%);
  display: flex; align-items: center; justify-content: center;
}

/* mini passport */
.mini-passport {
  width: 130px; aspect-ratio: .7;
  background: linear-gradient(135deg, #7d4928 0%, #5a3018 100%);
  border-radius: 6px;
  padding: 1rem .8rem;
  display: flex; flex-direction: column; align-items: center;
  position: relative;
  box-shadow: 0 18px 40px -10px rgba(60,38,12,.5),
              inset 0 0 0 1px rgba(0,0,0,.3);
  transform: rotate(-3deg);
}
.mini-passport::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(251,233,201,.3);
  border-radius: 3px;
}
.mini-passport-arches {
  display: flex; gap: 2px; margin-top: 1rem;
}
.mini-passport-arches span {
  width: 9px; height: 9px; border-radius: 50% 50% 0 0;
}
.mini-passport-arches span:nth-child(1) { background: #FFD700; }
.mini-passport-arches span:nth-child(2) { background: #4682B4; }
.mini-passport-arches span:nth-child(3) { background: #FFA500; }
.mini-passport-arches span:nth-child(4) { background: #DDA0DD; }
.mini-passport-brand {
  margin-top: .5rem;
  font-family: var(--serif);
  font-size: .82rem; color: #fbe9c9;
  font-weight: 600; letter-spacing: .04em;
  text-align: center;
}
.mini-passport-sub {
  font-size: .42rem; letter-spacing: .35em;
  color: rgba(251,233,201,.7); margin-top: .15rem;
  text-transform: uppercase;
}
.mini-passport-name {
  margin-top: auto;
  font-family: var(--serif); font-style: italic;
  color: #fbe9c9; font-size: .68rem;
  opacity: .85; text-align: center;
}
.mini-card-insert {
  position: absolute; bottom: -20px; right: -16px;
  width: 84px; aspect-ratio: 1.6;
  background: var(--paper);
  border-radius: 6px;
  transform: rotate(8deg);
  padding: .4rem;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.3);
}
.mini-card-insert .label {
  font-family: var(--serif); font-size: .42rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: #7a5b16; font-weight: 600;
}
.mini-card-insert .grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; margin-top: 3px;
}
.mini-card-insert .grid span { aspect-ratio: 1; border-radius: 1px; }

/* mini PDF */
.mini-pdf {
  width: 110px; aspect-ratio: .77;
  background: #fff;
  border-radius: 4px;
  padding: .7rem .55rem;
  box-shadow: 0 14px 30px -10px rgba(75,24,62,.25);
  position: relative;
  transform: rotate(-2deg);
}
.mini-pdf::after {
  content: ""; position: absolute; right: -8px; bottom: -10px;
  width: 110px; aspect-ratio: .77;
  background: var(--tint-blush);
  border-radius: 4px;
  z-index: -1;
  transform: rotate(5deg);
}
.mini-pdf-h {
  font-family: var(--serif); font-size: .56rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--plum); font-weight: 700;
}
.mini-pdf-title {
  font-family: var(--serif); font-size: .9rem;
  font-weight: 500; line-height: .95; margin-top: .25rem;
  color: var(--ink);
}
.mini-pdf-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: .4rem;
}
.mini-pdf-grid span { aspect-ratio: 1; border-radius: 2px; }

@media (max-width: 980px) {
  .premium-grid { grid-template-columns: 1fr; }
  .premium-card.feature { grid-row: auto; }
}

/* ── BAND: Guides ──────────────────────────────────────────────────────── */
.band-guides { background: var(--paper); }
.guide-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.guide-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.6rem 1.4rem 1.4rem;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease;
  text-align: left;
}
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.guide-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  margin-bottom: 1rem;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
}
.guide-icon.b { background: var(--tint-blush); color: #a13a28; }
.guide-icon.g { background: var(--tint-butter); color: #7a5b16; }
.guide-icon.l { background: var(--tint-lilac); color: #5b3f7a; }
.guide-icon.m { background: var(--tint-mint); color: #1f5e54; }
.guide-card h3 { font-family: var(--sans); font-size: 1.0rem; font-weight: 600; margin-bottom: .35rem; }
.guide-card p { font-size: .88rem; color: var(--muted); line-height: 1.5; margin: 0; }
.guide-card a {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .8rem; font-size: .82rem; font-weight: 600;
  color: var(--ink);
}
.guide-card a::after { content: "→"; transition: transform .2s ease; }
.guide-card a:hover::after { transform: translateX(2px); }

@media (max-width: 880px) { .guide-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .guide-grid { grid-template-columns: 1fr; } }

/* ── BAND: Privacy / policy ───────────────────────────────────────────── */
.band-privacy {
  background: linear-gradient(180deg, var(--paper) 0%, var(--tint-mint) 100%);
}
.privacy-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 2.5rem;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--shadow-md);
}
.privacy-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .8rem; }
.privacy-card p { color: var(--muted); font-size: 1rem; line-height: 1.55; margin: 0; }
.privacy-pill-row {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: flex-end;
}

@media (max-width: 880px) {
  .privacy-card { grid-template-columns: 1fr; padding: 1.6rem; }
  .privacy-pill-row { justify-content: flex-start; }
}

/* ── footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--paper);
  color: var(--ink);
  padding: 4rem 0 2rem;
  position: relative;
  border-top: 1px solid var(--line);
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 0%, var(--tint-blush) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, var(--tint-butter) 0%, transparent 55%);
  opacity: .5;
}
.footer-inner {
  position: relative;
  width: min(1240px, calc(100% - 3rem));
  margin: 0 auto;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; flex-direction: column; gap: 1rem; max-width: 300px; }
.footer-brand p { color: var(--muted); font-size: .88rem; line-height: 1.55; margin: 0; }
.footer-col h4 { color: var(--plum); font-family: var(--serif); font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1rem; font-weight: 500; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-col ul a { font-size: .92rem; color: var(--ink); opacity: .85; transition: opacity .2s, color .2s; }
.footer-col ul a:hover { color: var(--plum); opacity: 1; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.5rem;
  font-size: .82rem; color: var(--muted);
}

@media (max-width: 880px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* ── tool page (palette-test) ──────────────────────────────────────────── */
.tool-hero {
  padding: 3rem 0 2rem;
  text-align: center;
  position: relative;
}
.tool-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
.tool-hero p { margin: 1rem auto 0; max-width: 56ch; color: var(--muted); }

.tool-board {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 1.5rem;
  margin-bottom: 5rem;
}
.tool-card {
  background: #fff;
  border-radius: var(--r-xl);
  padding: 1.8rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.tool-card h2 { font-size: 1.4rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; margin-bottom: 1rem; }

.upload-zone {
  background: linear-gradient(160deg, var(--tint-blush) 0%, var(--tint-butter) 100%);
  border-radius: var(--r-lg);
  padding: 3rem 1.5rem;
  text-align: center;
  border: 2px dashed rgba(232,111,91,.3);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.upload-zone:hover {
  border-color: rgba(232,111,91,.6);
}
.upload-zone-icon {
  width: 56px; height: 56px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 1rem;
  display: grid; place-items: center;
  box-shadow: 0 10px 24px -12px rgba(232,111,91,.4);
  font-size: 1.6rem;
}
.upload-zone h3 { font-size: 1.15rem; font-family: var(--sans); font-weight: 600; margin-bottom: .35rem; }
.upload-zone p { color: var(--muted); font-size: .88rem; margin: 0 0 1rem; }

.steps {
  display: grid; gap: .75rem;
  background: var(--tint-cream);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
}
.steps li { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; color: #2a2522; }
.steps li b { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: #fff; color: var(--plum); font-size: .75rem; font-weight: 700;
  border: 1px solid rgba(75,24,62,.15);
}
.steps ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }

.identity-hero {
  text-align: center;
  background: linear-gradient(160deg, var(--tint-butter) 0%, #fff 100%);
  border-radius: var(--r-lg);
  padding: 1.6rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(200,164,93,.25);
}
.identity-eyebrow {
  font-size: .68rem; letter-spacing: .3em; text-transform: uppercase;
  color: #7a5b16; font-weight: 700; margin-bottom: .5rem;
}
.identity-name {
  font-family: var(--serif); font-size: 1.9rem; font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); margin: 0 0 .4rem;
}
.identity-trait { font-style: italic; color: var(--muted); margin: 0; font-size: .92rem; }

.metrics-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin: 1.2rem 0;
}
.metric {
  background: var(--tint-cream);
  border-radius: var(--r-sm);
  padding: .7rem .9rem;
  border: 1px solid var(--line);
}
.metric span { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.metric strong { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin-top: .2rem; }

.palette-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px;
  margin: 1rem 0;
}
.palette-row span {
  aspect-ratio: 1; border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

.advice-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
  margin: 1.2rem 0;
}
.advice {
  background: var(--tint-cream);
  border-radius: var(--r-md);
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
}
.advice h4 { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); margin-bottom: .55rem; }
.advice ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.advice li { font-size: .85rem; color: #2a2522; display: flex; gap: .5rem; align-items: center; }
.advice li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: currentColor; opacity: .6; }
.advice.glow { background: var(--tint-mint); border-color: rgba(47,118,107,.18); }
.advice.glow h4 { color: var(--jade); }
.advice.avoid { background: var(--tint-blush); border-color: rgba(232,111,91,.18); }
.advice.avoid h4 { color: #a13a28; }

@media (max-width: 880px) { .tool-board { grid-template-columns: 1fr; } }

/* ── passport page ──────────────────────────────────────────────────── */
.passport-hero {
  padding: 4rem 0 2rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
}
.passport-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); margin-bottom: 1rem; }
.passport-hero .lede { font-size: 1.1rem; max-width: 42ch; }
.passport-mock-hero {
  background: linear-gradient(135deg, var(--tint-butter) 0%, #f0d9a8 100%);
  border-radius: var(--r-xl);
  padding: 3rem 2rem;
  display: flex; align-items: center; justify-content: center;
  min-height: 480px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.passport-mock-hero::before {
  content: ""; position: absolute;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,180,110,.4) 0%, transparent 70%);
  top: -40px; right: -40px;
}
.big-passport {
  width: 240px; aspect-ratio: .7;
  background: linear-gradient(135deg, #7d4928 0%, #5a3018 100%);
  border-radius: 10px;
  padding: 1.5rem 1.2rem;
  display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 1;
  box-shadow: 0 30px 60px -20px rgba(60,38,12,.6),
              inset 0 0 0 1px rgba(0,0,0,.3);
  transform: rotate(-4deg);
}
.big-passport::before {
  content: ""; position: absolute; inset: 10px;
  border: 1.5px solid rgba(251,233,201,.35);
  border-radius: 5px;
}
.big-passport-arches { display: flex; gap: 4px; margin-top: 1.5rem; }
.big-passport-arches span { width: 18px; height: 18px; border-radius: 50% 50% 0 0; }
.big-passport-arches span:nth-child(1) { background: #FFD700; }
.big-passport-arches span:nth-child(2) { background: #4682B4; }
.big-passport-arches span:nth-child(3) { background: #FFA500; }
.big-passport-arches span:nth-child(4) { background: #DDA0DD; }
.big-passport-brand { font-family: var(--serif); font-size: 1.5rem; color: #fbe9c9; font-weight: 600; margin-top: 1rem; }
.big-passport-sub { font-size: .56rem; letter-spacing: .4em; color: rgba(251,233,201,.7); text-transform: uppercase; margin-top: .25rem; }
.big-passport-name { margin-top: auto; font-family: var(--serif); font-style: italic; color: #fbe9c9; font-size: 1rem; opacity: .9; }
.big-card-insert {
  position: absolute; bottom: 50px; right: -10px; z-index: 2;
  width: 160px; aspect-ratio: 1.6;
  background: var(--paper);
  border-radius: 8px;
  padding: .7rem .8rem;
  transform: rotate(10deg);
  box-shadow: 0 18px 36px -10px rgba(0,0,0,.35);
}
.big-card-insert .label { font-family: var(--serif); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: #7a5b16; font-weight: 600; }
.big-card-insert .name { font-family: var(--serif); font-size: .78rem; font-weight: 500; margin-top: .1rem; color: var(--ink); }
.big-card-insert .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: .4rem; }
.big-card-insert .grid span { aspect-ratio: 1; border-radius: 2px; }

@media (max-width: 880px) {
  .passport-hero { grid-template-columns: 1fr; }
}

.passport-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin: 3rem 0;
}
.feature-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 1.6rem;
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .6rem;
}
.feature-card h4 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; }
.feature-card p { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0; }

@media (max-width: 720px) { .passport-features { grid-template-columns: 1fr; } }

.passport-buy {
  background: linear-gradient(160deg, #fff 0%, var(--tint-butter) 120%);
  border-radius: var(--r-xl);
  padding: 2.5rem;
  border: 1.5px solid rgba(200,164,93,.4);
  text-align: center;
  margin: 3rem 0 5rem;
  box-shadow: var(--shadow-md);
}
.passport-buy .price {
  font-family: var(--serif); font-size: 3rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ink);
}
.passport-buy .price .was { font-size: 1.4rem; color: #a09786; text-decoration: line-through; font-weight: 400; margin-right: .5rem; }
.passport-buy p { color: var(--muted); margin: .8rem 0 1.5rem; font-size: 1rem; }

/* ── shared subpage shell ─────────────────────────────────────────────── */
.lang-switch {
  display: inline-flex;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  border: 0; background: transparent;
  padding: .35rem .7rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  color: var(--muted); cursor: pointer;
  border-radius: var(--r-pill);
  transition: all .2s;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active {
  background: var(--plum); color: #fff;
}

.subhero {
  position: relative;
  padding: 5rem 0 3rem;
  overflow: hidden;
  --subhero-tint-opacity: 0.6;
}
.subhero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 20% 0%, var(--tint-blush) 0%, transparent 55%),
              radial-gradient(ellipse at 90% 30%, var(--tint-lilac) 0%, transparent 50%),
              radial-gradient(ellipse at 50% 90%, var(--tint-butter) 0%, transparent 55%);
  opacity: var(--subhero-tint-opacity);
}
.subhero .shell { position: relative; z-index: 1; }
.subhero-eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum); margin-bottom: 1rem;
}
.subhero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  letter-spacing: -0.025em; line-height: 1.04; margin: 0 0 1.2rem;
  text-wrap: balance; max-width: 18ch;
}
.subhero h1 em {
  font-style: italic;
  background: linear-gradient(110deg, var(--coral), var(--plum) 60%, var(--gold));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.subhero .lede {
  font-size: 1.15rem; line-height: 1.55; color: var(--muted);
  max-width: 56ch; margin: 0 0 2rem;
}
.subhero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center;
}
@media (max-width: 880px) {
  .subhero-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.section-block { padding: 4rem 0; }
.section-block.alt { background: linear-gradient(180deg, transparent, var(--veil)); }

.tool-card {
  background: #fff; border-radius: var(--r-xl);
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem;
}
.tool-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--tint-cream);
  border: 1px solid var(--line);
}
.tool-step .num {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--plum); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: .95rem; flex-shrink: 0;
}
.tool-step h4 { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; margin: 0 0 .25rem; }
.tool-step p { color: var(--muted); font-size: .88rem; line-height: 1.5; margin: 0; }

.upload-zone {
  border: 2px dashed rgba(75,24,62,.25);
  border-radius: var(--r-lg);
  padding: 3rem 1.5rem; text-align: center;
  background: linear-gradient(135deg, var(--tint-blush) 0%, #fff 60%);
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
}
.upload-zone .icon {
  width: 64px; height: 64px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); font-size: 1.6rem;
  font-family: var(--serif); color: var(--plum);
}
.upload-zone h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; margin: 0; }
.upload-zone p { color: var(--muted); font-size: .9rem; margin: 0; max-width: 38ch; }

.faq-item {
  padding: 1.4rem 1.6rem;
  border-radius: var(--r-md);
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: .75rem;
}
.faq-item summary {
  cursor: pointer; font-family: var(--serif); font-size: 1.15rem;
  font-weight: 500; letter-spacing: -0.01em; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--plum); font-weight: 300;
  transition: transform .25s;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--muted); margin: 1rem 0 0; line-height: 1.6; }

/* ── reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------- Subpage centering overrides ---------------- */
/* Many ported subpages use the OLD design's <main class="static-main"> with
   left-aligned hero copy. Center them so the page reads cleanly under the
   new top nav pill. */
.static-main { max-width: 880px; margin: 0 auto; padding: 4rem 1.5rem 3rem; text-align: center; }
.static-main .static-article { text-align: left; }
.static-main h1, .static-main > h1, .auth-shell h1 { text-align: center; }
.auth-shell { max-width: 440px; margin: 0 auto; padding: 4rem 1.5rem 3rem; }

/* Tool / palette-test subhero: center the eyebrow + h1 + lede paragraph
   that sits above the upload zone. The functional tool grid below stays
   unchanged. The old styles.css clamps h1 to max-width:8.5ch which makes
   it appear left-aligned (the box is narrow even though text-align:center
   centers WITHIN the box). Force margin auto + remove the cap so the
   actual H1 wraps to readable width and centers within the section-head. */
.section-head { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.section-head h1, .section-head h2 {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
}
/* Inside tool subheros, lede paragraph should also center horizontally. */
.section-head p, .section-head .eyebrow {
  margin-left: auto;
  margin-right: auto;
}

/* Article-style page centering: passport, gift, upgrade, and any other
   page that uses <main><article class="static-article">. The article had
   max-width but no margin:auto — content was hugging the left edge. */
main > article.static-article,
main > .static-article {
  margin: 0 auto !important;
  padding: 4rem 1.5rem 3rem;
}
main > article.static-article > .eyebrow,
main > article.static-article > h1,
main > article.static-article > .lede,
main > .static-article > .eyebrow,
main > .static-article > h1,
main > .static-article > .lede {
  text-align: center !important;
}
/* The legacy styles.css sets `.static-article h1 { max-width: 18ch }` to keep
   headlines on a tight 2-3-line ladder. Without auto margins the constrained
   block sticks to the left edge — text-align:center then centers TEXT inside
   a left-anchored 18ch box, which on /articles/ and /about/ shows the H1
   visibly offset while the eyebrow + lede above/below are centered. Auto
   margins center the block itself; the slightly wider cap keeps long titles
   ("Frequently asked questions") from wrapping into too many lines. */
main > article.static-article > h1,
main > .static-article > h1 {
  max-width: 22ch !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* The .lede paragraph (subtitle below H1) on /upgrade/, /gift/, /passport/
   should center horizontally and stay readable-width within the 760px
   article box. !important needed to beat .static-article p { text-align: left }
   from the legacy stylesheet on Italian/Spanish translations where i18n
   replaces text content but inline left-align persists. */
main > article.static-article > .lede,
main > .static-article > .lede {
  max-width: 60ch;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Centered intro paragraphs (the first p directly under h1) */
main > article.static-article > p:first-of-type {
  text-align: center !important;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ── Dashboard centering safety-net ───────────────────────────────────────
   The v2 port stripped the .static-main / .dashboard-main classes from
   <main> on dashboard/account pages, so dashboard sections were hugging
   the left edge of the viewport. Restore the centered max-width box and
   darken the muted greeting so it's actually readable. */
main.static-main,
main.dashboard-main,
body.dashboard-page > main {
  width: min(1080px, calc(100% - 3rem)) !important;
  margin: 2.5rem auto 4rem !important;
  display: grid;
  gap: 2rem;
}
.dashboard-greeting {
  color: var(--ink) !important;
  font-weight: 500;
}
.dashboard-section-title {
  /* eyebrow above each section — keep the small-caps look but bump
     contrast so it doesn't disappear into the cream paper. */
  color: #5a3e0e !important;
}
/* Quick-answer + grids inside the article keep their default text-align */
main > article.static-article > .quick-answer,
main > article.static-article > .passport-wrap,
main > article.static-article > .passport-form,
main > article.static-article > div,
main > article.static-article > section { text-align: left; }