/* ==========================================================================
   Alpha Publication — design system v3 "Paper & Ink"
   Editorial monochrome: near-black ink on paper grey, one grotesque family
   (Inter Tight), hairline borders, flat surfaces, oversized display type.

   v2 adds: splash screen, dark cinematic hero, marquee, stats band,
   3D tilt cards, typewriter, scroll reveals (Motion), page heroes,
   community band, CTA band, rich footer, split auth, error scenes.
   Every v1 class is preserved — dashboard.css / admin.css build on
   these tokens and component classes.
   ========================================================================== */

/* Palette and type: awwwards-school editorial monochrome. One near-black ink
   (#222) on warm paper grey (#f8f8f8), hairline borders, flat surfaces,
   a single grotesque family (Inter Tight) for both display and UI voices.

   Every token name from the previous (navy) system is kept — a lot of
   component rules and inline styles in the views reference them — they are
   simply re-pointed at the monochrome palette. The `--gold*` family now
   carries the light-grey highlight used on dark surfaces; true amber
   survives only in the warning semantics below. */
:root {
  --bg: #f8f8f8;
  --surface: #f1f1f1;
  --surface-2: #e9e9e9;
  --border: #e5e5e5;
  --border-2: #d4d4d4;

  --ink: #222222;
  --ink-2: #3a3a3a;
  --ink-deep: #101010;
  --text: #222222;
  --muted: #6f6f6f;
  --faint: #8f8f8f;

  --accent: #222222;
  --accent-dark: #101010;
  --accent-soft: #4d4d4d;
  --accent-light: #ededed;
  --accent-border: #d4d4d4;
  --accent-glow: rgba(34, 34, 34, 0.22);

  --green: #1a7a45;
  --green-light: #edf7f0;
  --green-border: #b4dcc3;

  --red: #a8323b;
  --red-light: #fbeff0;
  --red-border: #e5b3b7;

  /* Highlight family used on dark surfaces (splash, footer, badges). */
  --gold: #222222;
  --gold-2: #bfbfbf;
  --gold-3: #e8e8e8;
  --gold-light: #efefef;
  --gold-border: #dcdcdc;

  /* True amber — warning semantics only. */
  --amber: #8a6318;
  --amber-light: #fbf3e3;
  --amber-border: #e2c893;

  --paper: #f8f8f8;

  --grad-gold: linear-gradient(118deg, #f2f2f2 0%, #dcdcdc 42%, #bfbfbf 78%, #9a9a9a 100%);
  --grad-gold-deep: linear-gradient(118deg, #6e6e6e 0%, #2e2e2e 55%, #1a1a1a 100%);
  --grad-gold-soft: linear-gradient(135deg, #f1f1f1, #e4e4e4);
  --grad-ink: linear-gradient(150deg, #262626 0%, #1a1a1a 58%, #111111 100%);
  --grad-page: linear-gradient(180deg, #f8f8f8 0%, #f8f8f8 100%);

  --radius-sm: 8px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04);
  --shadow: 0 2px 10px rgba(20, 20, 20, 0.05);
  --shadow-md: 0 10px 28px rgba(20, 20, 20, 0.08);
  --shadow-lg: 0 22px 50px -20px rgba(16, 16, 16, 0.28);
  --shadow-gold: 0 10px 26px -12px rgba(34, 34, 34, 0.30);

  --font: 'Inter Tight', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --serif: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --hand: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;

  --ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --container: 1200px;

  /* Motion scale — every transition picks one of these, nothing ad-hoc. */
  --t-nav: 170ms;
  --t-btn: 170ms;
  --t-card: 210ms;
  --t-drawer: 250ms;
}

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

html { scroll-behavior: smooth; max-width: 100%; overflow-x: hidden; }

/* Safety net only — the actual overflow sources (flex/grid items refusing to
   shrink) are fixed at the source in dashboard.css/admin.css. This just
   guarantees no layout bug anywhere can force the page itself to scroll
   sideways. */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: var(--font); cursor: pointer; }
input, select, textarea { font-family: var(--font); font-size: 15px; min-width: 0; }
img, svg, video, canvas { max-width: 100%; }
img { display: block; }
ul { list-style: none; }

::selection { background: rgba(34, 34, 34, 0.14); color: var(--ink); }

/* Slim branded scrollbar (progressive enhancement) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; border: 2.5px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-2); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) { .container { padding: 0 32px; } }
@media (min-width: 1280px) { .container { padding: 0 40px; } }

/* ── Typography ───────────────────────────────────────────────── */
/* One grotesque voice (Inter Tight). Display sits at 600 — never bolder:
   the editorial look comes from scale and space, not weight. Emphasis inside
   a heading stays the same colour; the monochrome identity has no colour
   emphasis mechanism. */
h1, h2, h3, h4, h5 { font-family: var(--serif); color: var(--ink); line-height: 1.12; font-weight: 600; letter-spacing: -0.02em; }

h1 em, h2 em, h3 em, .heading em {
  font-style: normal; font-family: inherit; color: inherit; font-weight: inherit;
}

/* Small plain label above a section heading — quiet, sentence-size, no
   tracking tricks. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font);
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink); margin-bottom: 12px;
}
.eyebrow.on-dark { color: rgba(255, 255, 255, 0.72); }

.section-head { max-width: 660px; margin-bottom: 36px; }
.section-head h2 { font-size: clamp(1.7rem, 3.6vw, 2.45rem); margin-bottom: 12px; line-height: 1.14; }
.section-head p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.centered .eyebrow { justify-content: center; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }

.hand-note { font-family: var(--hand); font-size: 1.2rem; color: var(--muted); line-height: 1.35; }

/* Former gradient-text helper — monochrome identity renders it as plain ink. */
.text-gold { color: var(--ink); }

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius-sm); font-weight: 500; font-size: 14px;
  border: 1px solid transparent; white-space: nowrap;
  transition: box-shadow 0.18s var(--ease), background 0.18s, color 0.18s, border-color 0.18s;
}
.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-accent { background: var(--ink); color: #fff; }
.btn-accent:hover { background: #000; }
/* Retired flashy variant — kept as an alias of the primary so any view
   still using it renders consistently. */
.btn-gold { background: var(--ink); color: #fff; }
.btn-gold:hover { background: #000; }
.btn-outline { background: transparent; border-color: var(--border-2); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); background: #fff; }
.btn-ghost { background: transparent; color: var(--muted); font-weight: 500; padding: 10px 14px; }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-danger { background: #fff; color: var(--red); border-color: var(--red-border); }
.btn-danger:hover { background: var(--red-light); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

/* Outline variant for dark surfaces */
.btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.5); }

/* ── Forms ────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 700; color: var(--ink); }
.field .hint { font-size: 12px; color: var(--faint); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; box-sizing: border-box;
  padding: 11px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border);
  background: #fff; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px var(--accent-light);
}
.field input.has-error, .field select.has-error { border-color: var(--red); }
.field .error-msg { font-size: 12.5px; color: var(--red); font-weight: 600; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 4px 16px; width: 100%; min-width: 0; }
.form-row > * { min-width: 0; }
@media (min-width: 640px) { .form-row.cols-2 { grid-template-columns: 1fr 1fr; } }

/* 16px input text on touch widths prevents mobile browsers auto-zooming the
   page when a field is focused (which itself causes sideways panning). */
@media (max-width: 767px) {
  .field input, .field select, .field textarea { font-size: 16px; }
}
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.checkbox-row input { margin-top: 3px; }
.checkbox-row a { color: var(--accent-dark); font-weight: 600; }

.error-summary {
  background: var(--red-light); border: 1.5px solid var(--red-border); color: #7a232b;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 18px; font-size: 13.5px;
}
.error-summary strong { display: block; margin-bottom: 4px; }

/* ── Alerts / flash ───────────────────────────────────────────── */
.flash-stack { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 3000; width: 100%; max-width: 420px; padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
.flash {
  padding: 12px 16px; border-radius: var(--radius); font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-md); animation: flashIn 0.25s var(--ease);
}
.flash-success { background: var(--green-light); border: 1.5px solid var(--green-border); color: #0e5c2c; }
.flash-error { background: var(--red-light); border: 1.5px solid var(--red-border); color: #7a232b; }
.flash-info { background: var(--accent-light); border: 1.5px solid var(--accent-border); color: var(--accent-dark); }
@keyframes flashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Navbar ───────────────────────────────────────────────────── */
#navbar {
  position: sticky; top: 0; z-index: 900;
  background: rgba(248, 248, 248, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.25s var(--ease), background 0.25s var(--ease);
}
#navbar.nav-scrolled { box-shadow: 0 8px 24px -18px rgba(20, 20, 20, 0.30); background: rgba(248, 248, 248, 0.96); }
.nav-inner { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.nav-logo { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav-logo-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden;
}
.nav-logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.nav-brand { min-width: 0; }
.nav-brand strong { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-brand span { display: block; font-size: 10.5px; color: var(--faint); font-weight: 400; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) { .nav-brand span { display: none; } }
.nav-links { display: none; align-items: center; gap: 2px; }
.nav-link { position: relative; padding: 9px 13px; border-radius: 8px; font-size: 14px; font-weight: 400; color: var(--muted); transition: color 0.2s; }
.nav-link::after { display: none; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--ink); font-weight: 500; }
.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.notif-bell { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0; }
.notif-bell:hover { color: var(--ink); background: var(--surface-2); }
.notif-dot { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 20px; background: var(--red); color: #fff; font-size: 9.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.hamburger { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.hamburger span { width: 17px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.2s var(--ease), opacity 0.2s; }

@media (min-width: 900px) {
  .nav-links { display: flex; }
  .hamburger { display: none; }
}

/* Mobile drawer — fixed overlay panel; when closed it is translated fully
   off-canvas and takes no part in document layout. */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 950; background: rgba(16, 16, 16, 0.55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease);
}
.drawer-overlay.show { opacity: 1; visibility: visible; }
.mob-drawer {
  position: fixed; top: 0; right: 0; width: 300px; max-width: 84vw; height: 100vh; height: 100dvh;
  background: #fff; z-index: 960; box-shadow: -8px 0 32px rgba(16, 16, 16, 0.22);
  transform: translateX(105%); visibility: hidden;
  transition: transform 0.28s var(--ease-out), visibility 0.28s var(--ease-out);
  overflow-y: auto; display: flex; flex-direction: column;
}
.mob-drawer.open { transform: translateX(0); visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer-head { flex-shrink: 0; height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--border); }
.drawer-close { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; }
.drawer-links { padding: 14px; display: flex; flex-direction: column; gap: 2px; }
.drawer-section { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--faint); padding: 14px 14px 6px; }
.drawer-section:first-child { padding-top: 2px; }
.drawer-link { padding: 12px 14px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600; color: var(--muted); }
.drawer-link.active, .drawer-link:hover { background: var(--accent-light); color: var(--accent-dark); }
.drawer-cta { padding: 12px 14px 20px; margin-top: auto; }

@media (min-width: 900px) { .mob-drawer { display: none !important; } }

/* ── Splash screen ────────────────────────────────────────────── */
/* Server-rendered but hidden until boot.js adds html.js + html.splash-show.
   No-JS users therefore never see it. A pure-CSS failsafe hides it after
   ~5.6s even if motion-ui.js never runs; main.js also force-releases it. */
.splash { display: none; }
html.js.splash-show .splash {
  display: flex; position: fixed; inset: 0; z-index: 4000;
  align-items: center; justify-content: center;
  background:
    radial-gradient(58% 48% at 50% 32%, rgba(255, 255, 255, 0.08) 0%, rgba(16, 16, 16, 0) 70%),
    radial-gradient(44% 38% at 80% 78%, rgba(255, 255, 255, 0.05) 0%, rgba(16, 16, 16, 0) 75%),
    linear-gradient(165deg, #262626 0%, #161616 58%, #0f0f0f 100%);
  overflow: hidden;
}
html.js.splash-show:not(.splash-done) body { overflow: hidden; }
html.splash-done .splash { display: none !important; }

/* Failsafe: fade the splash away on its own if scripts died mid-boot. */
html.js.splash-show .splash:not(.splash-live) { animation: splashFailsafe 0.5s ease 5.6s forwards; }
@keyframes splashFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.splash::before {
  content: ''; position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation: grainShift 9s steps(6) infinite;
  pointer-events: none;
}
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-2%, 2%); }
  40% { transform: translate(2%, -1%); } 60% { transform: translate(-1%, -2%); } 80% { transform: translate(1%, 2%); }
}

.sp-orb { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.sp-orb-a { width: 380px; height: 380px; left: -120px; top: -100px; background: rgba(255, 255, 255, 0.10); animation: orbFloat 11s ease-in-out infinite; }
.sp-orb-b { width: 300px; height: 300px; right: -80px; bottom: -60px; background: rgba(255, 255, 255, 0.06); animation: orbFloat 13s ease-in-out infinite reverse; }

/* Drifting light motes — layered box-shadow starfield */
.sp-dust, .sp-dust::before, .sp-dust::after { position: absolute; width: 3px; height: 3px; border-radius: 50%; }
.sp-dust {
  left: 20%; top: 30%; background: rgba(224, 224, 224, 0.8);
  box-shadow: 24vw 8vh 0 -0.5px rgba(224, 224, 224, 0.7), 48vw -6vh 0 0 rgba(224, 224, 224, 0.4),
    61vw 22vh 0 -1px rgba(224, 224, 224, 0.75), 12vw 38vh 0 -1px rgba(224, 224, 224, 0.5),
    36vw 30vh 0 0 rgba(224, 224, 224, 0.35), 55vw 42vh 0 -0.5px rgba(224, 224, 224, 0.6),
    -8vw 18vh 0 -0.5px rgba(224, 224, 224, 0.55), 30vw -12vh 0 -1px rgba(224, 224, 224, 0.45);
  animation: dustDrift 16s linear infinite;
}
.sp-dust::before {
  content: ''; left: 10vw; top: 12vh; background: rgba(255, 255, 255, 0.55);
  box-shadow: 18vw 26vh 0 0 rgba(255, 255, 255, 0.36), 40vw 4vh 0 -1px rgba(255, 255, 255, 0.45), 5vw -8vh 0 -1px rgba(255, 255, 255, 0.3);
  animation: dustDrift 22s linear infinite reverse;
}
@keyframes dustDrift {
  from { transform: translateY(0); opacity: 1; }
  50% { opacity: 0.55; }
  to { transform: translateY(-6vh); opacity: 1; }
}
@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -24px) scale(1.08); }
}

.splash-inner { position: relative; text-align: center; padding: 24px; max-width: 92vw; }

/* 3D open book */
.sp-scene { perspective: 1100px; width: 240px; height: 224px; margin: 0 auto 4px; position: relative; }
.sp-book { position: absolute; left: 50%; top: 66%; width: 200px; height: 132px; transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-26deg); transform-style: preserve-3d; }
.sp-book-half {
  position: absolute; top: 0; width: 100px; height: 132px;
  background: linear-gradient(135deg, #2e2e2e 0%, #1c1c1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.sp-book-half.left { left: 0; border-radius: 10px 2px 2px 10px; transform-origin: right center; transform: rotateY(9deg); box-shadow: -14px 18px 34px rgba(0, 0, 0, 0.45); }
.sp-book-half.right { right: 0; border-radius: 2px 10px 10px 2px; transform-origin: left center; transform: rotateY(-9deg); box-shadow: 14px 18px 34px rgba(0, 0, 0, 0.45); }
.sp-book-half::after { content: ''; position: absolute; inset: 7px; border-radius: inherit; background: linear-gradient(135deg, #ffffff 0%, #ececec 100%); }
.sp-book-half.left::after { box-shadow: inset -14px 0 22px -12px rgba(20, 20, 20, 0.4); }
.sp-book-half.right::after { box-shadow: inset 14px 0 22px -12px rgba(20, 20, 20, 0.4); }

/* Ruled lines on the open pages */
.sp-book-half i {
  position: absolute; inset: 16px 18px; z-index: 2;
  background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(34, 34, 34, 0.14) 11px 12px);
}
.sp-book-half.left i { transform: skewY(-2deg); }
.sp-book-half.right i { transform: skewY(2deg); }

/* Flipping pages */
.sp-page {
  position: absolute; left: 50%; top: 5px; width: 92px; height: 122px; z-index: 3;
  background: linear-gradient(100deg, #ffffff 70%, #e6e6e6 100%);
  border-radius: 2px 8px 8px 2px;
  transform-origin: left center;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.28);
  animation: pageFlip 2.6s var(--ease) infinite;
}
.sp-page.p2 { animation-delay: 0.42s; }
.sp-page.p3 { animation-delay: 0.84s; }
@keyframes pageFlip {
  0% { transform: rotateY(0deg); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: rotateY(-168deg); opacity: 1; }
  62%, 100% { transform: rotateY(-176deg); opacity: 0; }
}
.sp-book-shadow { position: absolute; left: 50%; top: 96%; width: 220px; height: 44px; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(2, 8, 14, 0.55), transparent 70%); filter: blur(6px); }

/* Nib mark floating above the book — stroke-draws itself in once
   motion-ui.js stamps .splash-live (pure CSS, cannot silently fail) */
.sp-nib { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); width: 70px; height: 70px; z-index: 6; filter: drop-shadow(0 10px 24px rgba(255, 255, 255, 0.25)); animation: nibBob 3.4s ease-in-out infinite; }
.sp-nib path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.splash-live .sp-nib path { animation: nibDraw 1.05s var(--ease-out) forwards; }
.splash-live .sp-nib path:nth-of-type(2) { animation-delay: 0.5s; }
.splash-live .sp-nib path:nth-of-type(3) { animation-delay: 0.72s; }
.splash-live .sp-nib path:nth-of-type(4) { animation-delay: 0.94s; }
@keyframes nibDraw { to { stroke-dashoffset: 0; } }
@keyframes nibBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-9px); } }

.sp-name {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 6vw, 2.8rem); color: #ffffff;
  letter-spacing: -0.01em; min-height: 1.2em; margin-top: 18px; text-transform: uppercase;
}
.sp-name .tw-caret { background: #e8e8e8; }
.sp-tag { font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-top: 10px; font-weight: 500; min-height: 1.4em; }
.sp-progress { width: min(240px, 60vw); height: 2px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; margin: 26px auto 0; overflow: hidden; }
.sp-progress i { display: block; width: 40%; height: 100%; background: var(--grad-gold); border-radius: 2px; animation: spLoad 2.4s var(--ease-out) infinite; }
@keyframes spLoad { 0% { transform: translateX(-110%); } 60% { transform: translateX(160%); } 100% { transform: translateX(260%); } }

.sp-skip {
  position: absolute; right: 22px; bottom: max(20px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 20px;
  font-size: 12px; font-weight: 600; padding: 8px 16px; letter-spacing: 0.4px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.sp-skip:hover { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.42); }

/* ── Scroll-reveal system (Motion drives the real animation) ──── */
/* boot.js adds .m-ready pre-paint; motion-ui.js adds .m-live once Motion is
   confirmed. If motion-ui never runs, the failsafe fades content in anyway. */
html.m-ready [data-reveal], html.m-ready [data-hero-seq] { opacity: 0; }
html.m-ready.m-live [data-reveal], html.m-ready.m-live [data-hero-seq] { animation: none; }
html.m-ready:not(.m-live) [data-reveal], html.m-ready:not(.m-live) [data-hero-seq] { animation: revealFailsafe 0.5s ease 2.6s forwards; }
@keyframes revealFailsafe { to { opacity: 1; } }

/* Typewriter caret */
.tw-caret {
  display: inline-block; width: 3px; height: 0.95em; margin-left: 3px;
  background: currentColor; vertical-align: -0.08em; border-radius: 1px;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* 3D tilt cards (JS sets --rx / --ry / --mx / --my) */
.tilt-3d { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.tilt-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 65%);
  opacity: 0; transition: opacity 0.25s;
}
.tilt-3d:hover .tilt-shine { opacity: 1; }

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer {
  position: relative; overflow: hidden;
  background: #141414;
  color: rgba(255, 255, 255, 0.55); padding: 64px 0 28px; margin-top: 80px;
}
.footer-wm { display: none; }
.footer-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 34px; margin-bottom: 40px; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer-grid { grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr; } }
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo-mark { width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex-shrink: 0; }
.footer-brand-name { color: #fff; font-weight: 600; font-size: 16px; }
.footer-desc { font-size: 13.5px; line-height: 1.7; max-width: 320px; }
.footer-tagline { font-family: var(--serif); font-weight: 400; color: rgba(255, 255, 255, 0.38); font-size: 13px; margin-top: 12px; }
.footer-col h4 { color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0.2px; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; padding: 5px 0; color: rgba(255, 255, 255, 0.72); transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-addr { display: flex; gap: 10px; font-size: 13px; line-height: 1.7; margin-bottom: 12px; }
.footer-addr svg { flex-shrink: 0; margin-top: 4px; color: rgba(255, 255, 255, 0.4); }
.footer-addr a { color: rgba(255, 255, 255, 0.85); font-weight: 500; font-size: 12.5px; }
.footer-addr a:hover { text-decoration: underline; }
.footer-meta-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 3px 0; }
.footer-meta-row svg { color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.footer-bottom { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.10); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.35); }
.footer-bottom a:hover { color: #fff; }

/* ── Page header (inner pages, formal) ────────────────────────── */
.page-hero {
  position: relative; color: var(--ink);
  background: var(--bg);
  padding: 52px 0 44px;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 { color: var(--ink); font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 12px; }
.page-hero p { color: var(--muted); font-size: 15px; max-width: 640px; line-height: 1.65; }
.page-hero .ph-nib { display: none; }

/* Breadcrumbs */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12px; color: var(--faint); margin-bottom: 12px; font-weight: 600; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs .sep { opacity: 0.45; }
.crumbs .cur { color: var(--muted); }

/* ── Utility topbar (official chrome) ─────────────────────────── */
.topbar { background: #141414; color: rgba(255, 255, 255, 0.62); font-size: 12px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; padding: 7px 0; flex-wrap: wrap; }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.topbar-item svg { color: rgba(255, 255, 255, 0.45); flex-shrink: 0; }
.topbar a { color: #fff; font-weight: 500; }
.topbar a:hover { text-decoration: underline; }
@media (max-width: 720px) { .topbar-office { display: none; } }

/* ── Home hero (editorial masthead — oversized display type) ──── */
.hero {
  position: relative; color: var(--ink);
  background: var(--bg);
  padding: 56px 0 60px;
  border-bottom: 1px solid var(--border);
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: 48px; } }
.hero-h1 {
  font-size: clamp(2.5rem, 6vw, 4.4rem); line-height: 1.0; margin-bottom: 20px;
  color: var(--ink); text-transform: uppercase; letter-spacing: -0.015em;
}
.hero-desc { color: var(--muted); font-size: 15.5px; max-width: 520px; margin-bottom: 20px; line-height: 1.7; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.hero-office { font-size: 12px; color: var(--faint); line-height: 1.7; border-top: 1px solid var(--border); padding-top: 14px; max-width: 520px; }
.hero-office strong { color: var(--muted); font-weight: 700; }

.hero-scribble { display: none; }

.advance-banner {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--accent-light); border: 1px solid var(--accent-border);
  margin-bottom: 24px; max-width: 480px;
}
.ab-icon { width: 42px; height: 42px; border-radius: 11px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ab-title { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.ab-desc { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

/* Notice treatment — a marked band, not a glowing promo. */
.advance-banner {
  background: var(--accent-light); border: 1px solid var(--accent-border); border-left: 3px solid var(--accent);
  border-radius: var(--radius); box-shadow: none;
}

.guide-steps { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.guide-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; transition: border-color 0.2s; }
.guide-step:hover { border-color: var(--border-2); }
.guide-step .gs-n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--gold-3); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guide-step strong { font-size: 13px; }
.guide-step span { display: block; font-size: 11.5px; color: var(--faint); }

/* Welcome-back banner — light variant, scoped to the public home hero.
   (The dashboard has its own dark .welcome-banner in dashboard.css.) */
.hero .welcome-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius-lg);
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.hero .wb-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.hero .wb-sub { font-size: 12px; color: var(--faint); }

/* Plan-overview panel — formal document card, no glass, no tilt. */
.hero-card {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hc-head { padding: 18px 20px 16px; background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); }
.hc-head-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hc-badge { margin-left: auto; padding: 3px 10px; border-radius: 3px; background: var(--ink); color: var(--gold-3); font-size: 9.5px; font-weight: 700; letter-spacing: 1px; }
.hc-earn-lbl { font-size: 10.5px; color: var(--faint); margin-bottom: 4px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; }
.hc-earn-num { font-family: var(--serif); font-weight: 600; font-size: 1.9rem; color: var(--ink); }
.hc-body { padding: 14px 16px 16px; }
.hc-plan-row {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 14px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: #fff; margin-bottom: 8px;
  transition: border-color 0.2s, background 0.2s;
}
.hc-plan-row:hover { border-color: var(--border-2); background: var(--paper); }
.hc-plan-row:last-child { margin-bottom: 0; }
.hc-plan-name { font-weight: 700; font-size: 13px; color: var(--ink); }
.hc-plan-meta { font-size: 11px; color: var(--faint); }
.hc-plan-earn { font-family: var(--serif); font-weight: 600; font-size: 16.5px; color: var(--ink); }
.hc-foot-note { margin-top: 12px; font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 6px; }
.hc-foot-note svg { color: var(--gold); flex-shrink: 0; }

.hero-pen { display: none; }

/* ── Trust chips / marquee ────────────────────────────────────── */
.trust-bar { padding: 16px 0; border-bottom: 1px solid var(--border); background: var(--bg); overflow: hidden; }
.trust-scroll { display: flex; gap: 10px; overflow-x: auto; flex-wrap: nowrap; }
@media (min-width: 900px) { .trust-scroll { flex-wrap: wrap; justify-content: center; } }
.trust-chip { display: flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; border: 1px solid var(--border); background: #fff; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.trust-chip svg { color: var(--accent); }

.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 12px; padding-right: 12px; flex-shrink: 0; min-width: max-content; animation: marqueeScroll 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ── Key-facts strip (static, formal) ─────────────────────────── */
.stats-band { position: relative; background: var(--bg); border-bottom: 1px solid var(--border); padding: 0; }
.stats-grid { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-cell { text-align: left; position: relative; padding: 24px 22px; border-right: 1px solid var(--border); }
.stat-cell:last-child { border-right: none; }
@media (max-width: 859px) {
  .stat-cell:nth-child(2n) { border-right: none; }
  .stat-cell:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.stat-num { font-family: var(--serif); font-weight: 600; font-size: 1.85rem; color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; }
.stat-lbl { font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 5px; font-weight: 400; }

/* ── Features (formal information cards) ──────────────────────── */
.features-sec { padding: 52px 0; }
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .feat-grid { grid-template-columns: repeat(3, 1fr); } }
.feat-card {
  position: relative; display: flex; gap: 14px; padding: 20px; border-radius: var(--radius);
  border: 1px solid var(--border); background: #fff;
  transition: border-color 0.2s;
}
.feat-card:hover { border-color: var(--border-2); }
.feat-icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.feat-icon svg { color: var(--accent-dark); }
.feat-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.feat-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ── Plan cards ───────────────────────────────────────────────── */
.plans-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 780px) { .plans-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card {
  position: relative; border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; padding: 26px 22px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.plan-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.plan-card.featured { border-color: var(--ink); border-width: 1.5px; }
.pop-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 0 0 6px 6px; background: var(--ink); color: var(--gold-3); font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; z-index: 2; }
.pc-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.pc-icon svg { color: var(--accent-dark); }
.plan-name { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.plan-tag { font-size: 12px; color: var(--faint); margin-bottom: 18px; }
.plan-earn { display: flex; align-items: baseline; gap: 3px; }
.plan-earn .sym { font-size: 15px; color: var(--muted); }
.plan-earn .num { font-family: var(--serif); font-weight: 600; font-size: 2.2rem; line-height: 1; }
.plan-earn-note { font-size: 11.5px; color: var(--faint); margin: 4px 0 12px; }
.advance-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: var(--grad-gold-soft); border: 1px solid var(--gold-border); font-size: 11.5px; font-weight: 700; color: var(--accent-dark); margin-bottom: 8px; }
.plan-divider { height: 1px; background: var(--border); margin: 16px 0; }
.plan-specs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.plan-spec { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.plan-spec .dot { width: 19px; height: 19px; border-radius: 6px; background: var(--green-light); border: 1px solid var(--green-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.plan-spec .dot svg { color: var(--green); width: 12px; height: 12px; }
.plan-spec strong { color: var(--ink); }
.plan-fee-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); margin-bottom: 12px; }
.plan-fee-row .lbl { font-size: 12px; color: var(--muted); }
.plan-fee-row .amt { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }
.plan-refund-note { font-size: 11.5px; color: var(--green); font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 5px; }
.plan-card .btn { margin-top: auto; }

.refund-alert { display: flex; gap: 14px; padding: 18px; border-radius: var(--radius-lg); background: var(--green-light); border: 1.5px solid var(--green-border); margin-top: 8px; }
.ra-icon { width: 36px; height: 36px; border-radius: 10px; background: rgba(21, 128, 61, 0.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ra-icon svg { color: var(--green); }
.ra-title { font-weight: 700; font-size: 13.5px; color: #0e4a24; margin-bottom: 3px; }
.ra-desc { font-size: 12.5px; color: #14622f; line-height: 1.6; }

.guarantee-note { font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.6; }

/* Plan comparison strip */
.compare-wrap { margin-top: 40px; border: 1.5px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th, .compare-table td { padding: 13px 18px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--border); }
.compare-table thead th { background: var(--surface-2); color: var(--ink); font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; }
.compare-table thead th:first-child { border-radius: 0; }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover td { background: var(--gold-light); }
.compare-table td strong { font-family: var(--serif); font-size: 15.5px; font-weight: 700; }
.compare-table .cmp-plan { font-weight: 600; color: var(--ink); }

/* ── How it works ─────────────────────────────────────────────── */
.hiw-steps { display: flex; flex-direction: column; gap: 18px; position: relative; padding-left: 4px; }
.hiw-steps::before { content: ''; position: absolute; left: 27px; top: 26px; bottom: 26px; width: 1.5px; background: var(--border-2); border-radius: 2px; }
.hiw-step { display: flex; gap: 16px; position: relative; }
.step-circle {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; background: var(--ink);
  border: none; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 600; font-size: 1.1rem; color: var(--gold-3);
  position: relative; z-index: 2;
}
.step-card { flex: 1; padding: 15px 18px; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; transition: border-color 0.2s; }
.hiw-step:hover .step-card { border-color: var(--border-2); }
.step-title { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
.step-desc { font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ── Cards / contact / FAQ ────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
@media (min-width: 700px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-card {
  position: relative; border-radius: var(--radius-xl); border: 1.5px solid var(--border); background: #fff;
  padding: 26px; box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s, border-color 0.3s;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-border); }
.cc-icon { width: 48px; height: 48px; border-radius: 10px; background: var(--ink); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.cc-icon svg { color: #fff; }
.cc-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.cc-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }

/* Registered-office / address card (formal) */
.addr-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: #fff; color: var(--ink); padding: 26px;
  border: 1px solid var(--border-2); border-top: 3px solid var(--ink); box-shadow: var(--shadow-sm);
}
.addr-card .cc-icon { background: var(--surface); border: 1px solid var(--border); box-shadow: none; }
.addr-card .cc-icon svg { color: var(--accent-dark); }
.addr-card .cc-title { color: var(--ink); }
.addr-lines { font-size: 14px; line-height: 1.9; color: var(--muted); margin-bottom: 16px; }
.addr-lines strong { color: var(--ink); font-weight: 700; }
.addr-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.addr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--muted); }
.addr-chip svg { color: var(--gold); }

.faq-wrap { max-width: 760px; }
.faq-item { border-radius: var(--radius); border: 1.5px solid var(--border); background: #fff; margin-bottom: 8px; overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s; }
.faq-item.open { border-color: var(--gold-border); box-shadow: var(--shadow-sm); }
.faq-q { padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 14px; }
.faq-chev { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.25s var(--ease), background 0.25s; }
.faq-item.open .faq-chev { transform: rotate(180deg); background: var(--gold-light); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.faq-item.open .faq-a { max-height: 300px; }
.faq-a p { padding: 0 18px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.75; }

/* ── Hero book composition (3D cover stack + floating fact plates) ── */
.hero-visual { position: relative; display: flex; justify-content: center; align-items: center; padding: 8px 0; perspective: 1100px; }

/* Pointer-tracked 3D tilt — motion-ui.js drives .tilt-3d on fine pointers
   only. The base transition damps both the follow and the release. */
.book-stage {
  position: relative; width: 100%; max-width: 430px; aspect-ratio: 1 / 1.02;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
@media (max-width: 479px) { .book-stage { max-width: 320px; } }

/* Ruled-paper geometry plate behind the covers */
.book-stage::before {
  content: ''; position: absolute; inset: 6% 4% 10% 4%;
  border: 1px solid var(--border); border-radius: 4px; background: #fff;
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, var(--border) 25px 26px);
  opacity: 0.5;
  transform: rotate(-3deg);
}

.book-cover {
  position: absolute; border-radius: 3px 7px 7px 3px; overflow: hidden;
  background: var(--ink-2);
  box-shadow: var(--shadow-lg);
  transition: transform 420ms var(--ease);
  will-change: transform;
}
/* The drift lives on the artwork, not the cover — the covers keep their
   rotation transforms, which the hover state depends on. */
.book-cover img { width: 100%; height: 100%; object-fit: cover; animation: bookDrift 7.5s ease-in-out infinite; }
.book-cover.b1 img { animation-delay: 0s; }
.book-cover.b2 img { animation-delay: 1.4s; }
.book-cover.b3 img { animation-delay: 2.6s; }
@keyframes bookDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Spine highlight — reads as a real bound edge, not a flat rectangle */
.book-cover::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 9px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.06) 60%, rgba(255, 255, 255, 0.14));
}

.book-cover.b1 { width: 54%; aspect-ratio: 2 / 3; left: 4%; top: 16%; transform: rotate(-7deg); z-index: 2; }
.book-cover.b2 { width: 58%; aspect-ratio: 2 / 3; right: 2%; top: 4%; transform: rotate(4deg); z-index: 3; }
.book-cover.b3 { width: 44%; aspect-ratio: 2 / 3; left: 22%; bottom: 0; transform: rotate(-2deg); z-index: 4; }

.book-stage:hover .book-cover.b1 { transform: rotate(-8.5deg) translateY(-5px); }
.book-stage:hover .book-cover.b2 { transform: rotate(5.5deg) translateY(-7px); }
.book-stage:hover .book-cover.b3 { transform: rotate(-1deg) translateY(-4px); }

/* Floating fact plates anchored to the composition */
.book-plate {
  position: absolute; z-index: 6; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 15px; box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 11px;
  animation: plateDrift 6.5s ease-in-out infinite;
}
.book-plate .bp-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-light); color: var(--accent-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.book-plate .bp-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); line-height: 1.4; }
.book-plate .bp-value { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
@keyframes plateDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.book-plate.top-left { top: 1%; left: -3%; animation-delay: 0.6s; }
.book-plate.bottom-right { bottom: 3%; right: -4%; animation-delay: 2.2s; }
@media (max-width: 599px) {
  .book-plate { padding: 9px 11px; gap: 9px; }
  .book-plate .bp-icon { width: 28px; height: 28px; }
  .book-plate .bp-value { font-size: 1.1rem; }
  .book-plate.top-left { left: -4px; }
  .book-plate.bottom-right { right: -4px; }
}

/* ── Publications shelf (flat editorial cards, rollover zoom) ─── */
/* The old 3D-book markup is kept (spine/pages spans are simply hidden) but
   the presentation is now a flat card grid: rounded cover image that zooms
   slightly on hover, with a left-aligned title row underneath. */
.pub-shelf { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; align-items: start; }
@media (min-width: 860px) { .pub-shelf { grid-template-columns: repeat(4, 1fr); } }
.pub-item { text-align: left; min-width: 0; }
.book-3d-wrap { position: relative; display: block; padding: 0 0 16px; }
.book-3d-wrap::after { display: none; }
.book-3d {
  position: relative; width: 100%; aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
}
.book-3d img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.pub-item:hover .book-3d img { transform: scale(1.045); }
.book-3d .book-spine, .book-3d .book-pages { display: none; }
.pub-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.pub-tag { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.pub-note { text-align: left; margin-top: 22px; font-size: 12.5px; color: var(--faint); border-top: 1px solid var(--border); padding-top: 14px; }
.pub-note .hand-note { font-size: 1rem; display: inline-block; }

/* ── Official channels panel (formal) ─────────────────────────── */
.community-band { position: relative; border-radius: var(--radius); background: #fff; color: var(--ink); padding: 30px 28px; border: 1px solid var(--border-2); border-top: 3px solid var(--ink); box-shadow: var(--shadow-sm); }
.community-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; }
@media (min-width: 880px) { .community-grid { grid-template-columns: 1.2fr 0.8fr; } }
.community-band h3 { color: var(--ink); font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 8px; }
.community-band p { color: var(--muted); font-size: 13.5px; max-width: 500px; line-height: 1.7; }
.community-points { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.community-point { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.community-point svg { color: var(--accent-dark); flex-shrink: 0; }
.community-cta { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }

/* ── Closing information band (formal) ────────────────────────── */
.cta-band { position: relative; background: #fff; color: var(--ink); border-top: 1px solid var(--border); padding: 56px 0; margin-top: 56px; text-align: center; }
.cta-inner { position: relative; max-width: 620px; margin: 0 auto; padding: 0 20px; }
.cta-band .eyebrow { justify-content: center; }
.cta-band h2 { color: var(--ink); font-size: clamp(1.9rem, 4.4vw, 2.9rem); line-height: 1.08; margin-bottom: 14px; }
.cta-band p { color: var(--muted); font-size: 14px; margin-bottom: 22px; line-height: 1.75; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cta-nib { display: none; }

/* ── Terms / static docs ──────────────────────────────────────── */
.doc { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 30px; box-shadow: var(--shadow-sm); max-width: 820px; }
.doc h2 { font-size: 1.1rem; margin: 26px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin-bottom: 8px; }
.doc ul { padding-left: 20px; }
.doc li { list-style: disc; }
.doc strong { color: var(--ink); }
.doc a { color: var(--accent-dark); font-weight: 600; }

/* ── Auth screens ─────────────────────────────────────────────── */
.auth-wrap { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; background: linear-gradient(175deg, var(--paper) 0%, var(--surface) 60%); }
.auth-box { width: 100%; max-width: 420px; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 3px; background: var(--surface); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 16px; }
.auth-h1 { font-size: 1.7rem; margin-bottom: 8px; }
.auth-desc { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; line-height: 1.7; }
.auth-card { background: #fff; border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 26px 24px; box-shadow: var(--shadow-md); }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
.auth-switch a { color: var(--accent-dark); font-weight: 700; }
.auth-secure { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 16px; font-size: 11.5px; color: var(--faint); }

/* Split auth layout (v2) — brand panel + form side by side */
.auth-split {
  width: 100%; max-width: 1020px; display: grid; grid-template-columns: 1fr;
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  background: #fff;
}
@media (min-width: 920px) { .auth-split { grid-template-columns: 0.9fr 1.1fr; } }
.auth-side {
  position: relative; background: var(--surface); color: var(--ink);
  padding: 42px 36px; display: none; flex-direction: column; border-right: 1px solid var(--border);
}
@media (min-width: 920px) { .auth-side { display: flex; } }
.auth-side-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; position: relative; }
.auth-side h2 { position: relative; color: var(--ink); font-size: 1.55rem; line-height: 1.3; margin-bottom: 14px; }
.auth-side p { position: relative; font-size: 13.5px; color: var(--muted); line-height: 1.8; }
.auth-points { position: relative; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.auth-point { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.auth-point svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }
.auth-side-foot { position: relative; margin-top: auto; padding-top: 30px; font-size: 11.5px; color: var(--faint); line-height: 1.7; }
.auth-form-side { padding: 36px 28px; }
@media (min-width: 920px) { .auth-form-side { padding: 42px 44px; } }
.auth-split .auth-card { border: none; box-shadow: none; padding: 0; border-radius: 0; }

/* ── Error scenes ─────────────────────────────────────────────── */
.err-scene { position: relative; overflow: hidden; min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; text-align: center; padding: 60px 20px; background: linear-gradient(175deg, var(--paper) 0%, var(--surface) 100%); }
.err-inner { position: relative; z-index: 2; max-width: 480px; }
.err-code { font-family: var(--serif); font-weight: 600; font-size: clamp(4rem, 12vw, 6.5rem); line-height: 1; color: var(--ink); }
.err-title { font-size: 1.45rem; margin: 14px 0 10px; }
.err-desc { color: var(--muted); font-size: 14px; margin-bottom: 26px; line-height: 1.7; }
.err-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.err-nib { display: none; }
.err-scene .orb { display: none; }

/* ── Badges / status pills ────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.2px; }
.badge-neutral { background: var(--surface-2); color: var(--muted); }
.badge-info { background: var(--accent-light); color: var(--accent-dark); }
.badge-success { background: var(--green-light); color: #0e5c2c; }
.badge-warning { background: var(--amber-light); color: #6b4a0d; border: 1px solid var(--amber-border); }
.badge-danger { background: var(--red-light); color: #7a232b; }

/* ── Utility ──────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 5000; }
.skip-link:focus { left: 0; }

.section-pad { padding: 52px 0; }
.section-pad-sm { padding: 40px 0; }

/* ── Craft pass — consistent micro-interactions sitewide ──────── */
/* Balanced multi-line headings (progressive enhancement). */
h1, h2, h3, .section-head p, .page-hero p { text-wrap: balance; }

/* Every interactive card answers the cursor the same way: a small lift on
   the shared card duration. The property LIST must be declared here too —
   several of these cards' earlier shorthands only transition border-color,
   which would make the transform lift snap instead of ease. */
.feat-card, .plan-card, .contact-card, .lp-plan, .step-card, .guide-step, .hc-plan-row {
  transition-property: transform, border-color, box-shadow, background-color;
  transition-duration: var(--t-card);
  transition-timing-function: var(--ease);
}
.feat-card:hover, .contact-card:hover { transform: translateY(-3px); }
/* No lift for .plan-card: those are pointer-tilted (.tilt-3d owns their
   transform) and already answer hover via border + shadow. */

/* Inline text links share one underline behaviour. */
.doc a, .guarantee-note a, .auth-switch a, .checkbox-row a, .footer-addr a {
  text-underline-offset: 3px;
  transition: color var(--t-btn) var(--ease);
}
.doc a:hover, .guarantee-note a:hover, .auth-switch a:hover { text-decoration: underline; }

/* Trust chips acknowledge hover without shouting. */
.trust-chip { transition: border-color var(--t-btn) var(--ease), color var(--t-btn) var(--ease); }
.trust-chip:hover { border-color: var(--accent-border); color: var(--ink); }

/* Compare-table rows glide instead of snapping. */
.compare-table tbody td { transition: background var(--t-nav) var(--ease); }

/* Buttons settle with the same press everywhere. */
.btn { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  html.m-ready [data-reveal], html.m-ready [data-hero-seq] { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  html.js.splash-show .splash { display: none !important; }
  html.js.splash-show:not(.splash-done) body { overflow: auto; }
}

:focus-visible { outline: 2.5px solid var(--accent-dark); outline-offset: 2px; }