@charset "UTF-8";
/* =============================================================
   ilmbee, Landing page
   Sections 1–2 · built against DESIGN.md v0.1
   ============================================================= */

/* ───────────────────────── 1. TOKENS ───────────────────────── */
:root{
  /* Ink */
  --navy-900:#0B1229;
  --navy-800:#121A3A;
  --navy-700:#141C3D;
  --navy-500:#2C3A6B;
  --navy-300:#5C6585;
  --navy-200:#8A92AC;

  /* Gold */
  --gold-700:#A8842F;
  --gold-600:#C09640;
  --gold-500:#D6AF57;
  --gold-400:#E3C579;
  --gold-200:#F2E3BE;
  --gold-100:#FAF3E0;

  /* Cream */
  --cream-50:#FDFBF5;
  --cream-100:#F8F3E7;
  --cream-200:#EFE7D4;

  /* Type */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
  --font-ui:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-ar:"Amiri","Noto Naskh Arabic",serif;

  --fs-display:clamp(2.75rem,1.6rem + 5.2vw,5.25rem);
  --fs-h2:clamp(2rem,1.4rem + 2.6vw,3.25rem);
  --fs-lead:clamp(1.0625rem,1rem + .4vw,1.25rem);
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  /* Radius */
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  /* Elevation, navy-tinted, three-layer */
  --shadow-1:0 1px 2px rgba(20,28,61,.05), 0 4px 10px rgba(20,28,61,.06);
  --shadow-2:0 2px 4px rgba(20,28,61,.06), 0 10px 24px rgba(20,28,61,.09);
  --shadow-3:0 4px 8px rgba(20,28,61,.07), 0 20px 44px rgba(20,28,61,.12), 0 40px 80px rgba(20,28,61,.08);
  --shadow-book:4px 6px 12px rgba(11,18,41,.16), 14px 20px 36px rgba(11,18,41,.22);

  /* Motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* Layout */
  --container:1200px;
  --gutter:clamp(20px,4vw,24px);
  --header-h:76px;
}

/* ───────────────────────── 2. RESET ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
}

body{
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1.65;
  color:var(--navy-300);
  background:var(--cream-50);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:italic}

h1,h2,h3{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 96;
  color:var(--navy-700);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.022em;
  text-wrap:balance;
}

:focus-visible{
  outline:3px solid var(--gold-500);
  outline-offset:3px;
  border-radius:4px;
}

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

.u-gold{color:var(--gold-600)}
.eyebrow{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-600);
}

/* ───────────────────────── 3. HEADER ───────────────────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(253,251,245,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--cream-200);
  box-shadow:0 1px 0 rgba(20,28,61,.03),0 8px 28px -18px rgba(20,28,61,.35);
}
.site-header__inner{
  display:flex;
  align-items:center;
  gap:32px;
}

.logo{display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo__mark{width:34px;height:34px;color:var(--gold-500)}
.logo__word{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 30,"opsz" 40;
  font-weight:800;
  font-size:1.375rem;
  letter-spacing:-.02em;
  color:var(--navy-700);
}
.logo__tld{color:var(--gold-600)}

.nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.nav__link{
  position:relative;
  padding:8px 14px;
  border-radius:var(--r-sm);
  font-size:.9375rem;
  font-weight:500;
  color:var(--navy-300);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.nav__link:hover{color:var(--navy-700);background:var(--cream-100)}
.nav__link.is-active{color:var(--navy-700);font-weight:600}
.nav__link.is-active::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:2px;
  height:2px;
  border-radius:2px;
  background:var(--gold-500);
}

.site-header__actions{display:flex;align-items:center;gap:18px;flex-shrink:0}
.nav__cta{display:none} /* drawer-only; see the 1080px block */
.link-quiet{
  font-size:.9375rem;
  font-weight:600;
  color:var(--navy-300);
  transition:color .18s var(--ease);
}
.link-quiet:hover{color:var(--navy-700)}

.burger{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;border-radius:2px;background:var(--navy-700)}

/* ───────────────────────── 4. BUTTONS ───────────────────────── */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:56px;
  padding-inline:32px;
  border-radius:var(--r-md);
  font-size:1rem;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn--sm{height:44px;padding-inline:20px;font-size:.9375rem;border-radius:12px}
.btn__icon{width:16px;height:16px;transition:transform .22s var(--ease)}
.btn:hover .btn__icon{transform:translateX(3px)}

/* Primary, gold fill, navy text (7.9:1), with a physical underside */
.btn--primary{
  background:var(--gold-500);
  color:var(--navy-700);
  box-shadow:0 4px 0 var(--gold-700),var(--shadow-2);
}
.btn--primary:hover{
  background:var(--gold-400);
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--gold-700),var(--shadow-3);
}
.btn--primary:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 var(--gold-700),var(--shadow-1);
}
.btn--sm.btn--primary{box-shadow:0 3px 0 var(--gold-700),var(--shadow-1)}
.btn--sm.btn--primary:hover{box-shadow:0 5px 0 var(--gold-700),var(--shadow-2)}

/* Secondary, browse action */
.btn--ghost{
  background:transparent;
  color:var(--navy-700);
  border:1.5px solid rgba(20,28,61,.18);
}
.btn--ghost:hover{
  border-color:var(--navy-700);
  background:rgba(20,28,61,.03);
  transform:translateY(-2px);
}
.btn--ghost:active{transform:translateY(0)}

/* ───────────────────────── 5. BADGE + ASSURANCES ───────────────────────── */
.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:8px 18px 8px 14px;
  border-radius:var(--r-pill);
  background:var(--gold-200);
  border:1px solid var(--gold-400);
  color:var(--navy-700);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  white-space:nowrap;
}
.badge__dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--gold-600);
  box-shadow:0 0 0 4px rgba(214,175,87,.28);
}

.assurances{
  display:flex;
  flex-wrap:wrap;
  gap:12px 26px;
  margin-top:36px;
}
.assurances li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--navy-300);
}
.assurances svg{
  width:18px;height:18px;
  flex-shrink:0;
  padding:2px;
  border-radius:50%;
  background:var(--gold-200);
  color:var(--gold-700);
}

/* ───────────────────────── 6. HERO ───────────────────────── */
.hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(56px,7vw,96px) clamp(64px,8vw,120px);
  overflow:hidden;
}
/* The one ambient light source on the page */
.hero__glow{
  position:absolute;
  z-index:-2;
  top:-18%;right:-14%;
  width:min(1100px,92vw);
  aspect-ratio:1;
  background:
    radial-gradient(circle at 50% 50%,rgba(214,175,87,.30) 0%,rgba(214,175,87,.13) 34%,transparent 66%);
  pointer-events:none;
}
.hero__grain{
  position:absolute;
  z-index:-1;
  inset:0;
  opacity:.5;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% 78%,rgba(20,28,61,.05) 0,transparent 42%),
    radial-gradient(circle at 92% 8%,rgba(214,175,87,.13) 0,transparent 40%);
}

.hero__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(32px,5vw,64px);
}

.hero__title{
  font-size:var(--fs-display);
  margin-top:26px;
}
.hero__lead{
  font-size:var(--fs-lead);
  max-width:34em;
  margin-top:24px;
}
.hero__lead strong{color:var(--navy-700);font-weight:700}
.hero__lead em{color:var(--navy-700);font-style:italic}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

/* ── Stage ── */
.hero__visual{position:relative;display:flex;justify-content:center}
/* No `perspective` property here: it would make .stage a 3D rendering context,
   where children depth-sort by geometry and z-index stops applying, the float
   tiles would sink behind the rotated book. The book carries its own
   perspective() function instead, so the stage stays a plain stacking context. */
.stage{
  position:relative;
  width:min(100%,560px);
  aspect-ratio:1/.9;
}

/* Fanned back covers.
   Scoped to .stage so they outrank `.cover{position:relative}` below. */
.stage .cover--fan-l,
.stage .cover--fan-r{
  position:absolute;
  width:35%;
  box-shadow:var(--shadow-book);
}
.stage .cover--fan-l{left:-6%;top:16%;transform:rotate(-9deg);animation:floatL 8s var(--ease) -2s infinite alternate}
.stage .cover--fan-r{right:-6%;top:23%;transform:rotate(8deg);animation:floatR 8s var(--ease) -5s infinite alternate}

/* ── The 3D book (real preserve-3d volume) ──
   No `filter` here: grouping properties force transform-style back to flat
   and would collapse the spine. The shadow lives on the front face instead. */
.book{
  --spine:22px;
  position:absolute;
  left:50%;top:6%;
  width:46%;
  z-index:2;
  transform-style:preserve-3d;
  transform:perspective(1400px) translateX(-50%) rotateY(19deg) rotateX(3deg);
  animation:floatBook 9s var(--ease) infinite alternate;
}
/* No spine face and no back cover.
   Both were geometrically correct, but the spine's far edge and the back
   cover's left edge resolve to the SAME 3D point, and coincident surfaces
   z-fight into a thin unstable line down the cover's left edge. Recolouring
   could never fix that. At this size the ~7px spine bought nothing anyway:
   the perspective rotation plus the offset shadow already read as a solid
   object. To restore it later, re-add .book__back / .book__spine and inset
   the back cover by 1px so the two surfaces never coincide. */
.cover--hero{
  position:relative;
  width:100%;
  border-radius:var(--r-sm);
  box-shadow:10px 14px 24px rgba(11,18,41,.20),28px 40px 64px rgba(11,18,41,.24);
}
/* Cover sheen, a single directional highlight, no bevel */
.cover--hero::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 26%,transparent 52%);
  pointer-events:none;
}

/* ── Float tiles ── */
.tile{
  position:absolute;
  z-index:3; /* floats over the book, like the reference stat cards */
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:14px 20px;
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-3);
  animation:float 7s var(--ease) infinite alternate;
}
.tile strong{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 60;
  font-size:1.75rem;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--navy-700);
}
.tile span{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--navy-200);
  white-space:nowrap;
}
.tile--a{left:-7%;bottom:6%;border:1.5px solid var(--gold-400);animation-delay:-1s}
.tile--a strong{color:var(--gold-700)}
.tile--b{right:-6%;bottom:-2%;border:1.5px solid var(--navy-500);animation-delay:-3.5s}
.tile--c{right:-9%;top:-9%;border:1.5px solid #E29B6B;animation-delay:-5.5s}
.tile--c strong{color:#C4702F}

@keyframes float{
  from{transform:translateY(0)}
  to{transform:translateY(-14px)}
}
@keyframes floatBook{
  from{transform:perspective(1400px) translateX(-50%) rotateY(19deg) rotateX(3deg) translateY(0)}
  to{transform:perspective(1400px) translateX(-50%) rotateY(15deg) rotateX(2deg) translateY(-18px)}
}
@keyframes floatL{
  from{transform:rotate(-9deg) translateY(0)}
  to{transform:rotate(-10.5deg) translateY(-16px)}
}
@keyframes floatR{
  from{transform:rotate(8deg) translateY(0)}
  to{transform:rotate(9.5deg) translateY(-12px)}
}

/* ───────────────────────── 7. BOOK COVER COMPONENT ─────────────────────────
   Locked 3:4. Placeholder art is CSS-drawn and matches the real cover layout,
   so dropping in <img class="cover__photo"> later needs no CSS changes.       */
.cover{
  container-type:inline-size;
  position:relative;
  aspect-ratio:3/4;
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:var(--r-sm);
  /* Top scrim first: holds the band/mark/title legible over light cover
     colours without darkening the artwork below. */
  background:
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.07) 34%,transparent 56%),
    linear-gradient(168deg,var(--c1),var(--c2));
  box-shadow:var(--shadow-book);
  color:#fff;
  isolation:isolate;
}
.cover::before{ /* inner keyline, lifts the cover off dark backgrounds */
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  pointer-events:none;
}

.cover__band{
  position:relative;
  z-index:2;
  padding:4.2cqw 2.4cqw;
  text-align:center;
  background:rgba(0,0,0,.16);
  color:var(--gold-400);
  font-size:2.8cqw;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
}
.cover__mark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4cqw;
  margin-top:4cqw;
  font-family:var(--font-display);
  font-weight:800;
  font-size:4.6cqw;
  letter-spacing:-.02em;
  color:rgba(255,255,255,.94);
}
.cover__mark svg{width:6.4cqw;height:6.4cqw;color:var(--gold-400)}

.cover__title{
  position:relative;
  z-index:2;
  margin:5cqw 5cqw 0;
  font-family:var(--font-ui);
  font-weight:800;
  font-size:7.9cqw;
  line-height:1.1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  text-wrap:balance;
}
/* Accent line. Defaults to a pale gold; warm covers pass --t2:#fff inline,
   because gold-on-gold and gold-on-orange do not hold. */
.cover__title b{display:block;font-weight:800;font-size:1.28em;color:var(--t2,var(--gold-200))}

.cover__art{
  position:relative;
  z-index:1;
  flex:1;
  margin-top:3cqw;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.cover__art .ar{
  font-family:var(--font-ar);
  font-style:normal;
  font-size:22cqw;
  line-height:1.6;
  color:var(--a1);
  opacity:.5;
  margin-bottom:2cqw;
}

/* Light covers flip their ink and drop the scrim */
.cover--light{
  color:var(--navy-700);
  background:
    linear-gradient(180deg,rgba(20,28,61,.10) 0%,transparent 48%),
    linear-gradient(168deg,var(--c1),var(--c2));
}
.cover--light .cover__band{background:rgba(20,28,61,.10);color:var(--navy-700)}
.cover--light .cover__mark{color:var(--navy-700)}
.cover--light .cover__mark svg{color:var(--gold-700)}
.cover--light .cover__title{color:var(--navy-700)}
.cover--light .cover__title b{color:#B0651F}

/* ── Placeholder art variants ── */
.art--orbit .cover__art{
  background:
    radial-gradient(circle at 22% 14%,#fff 0 .9cqw,transparent 1.2cqw),
    radial-gradient(circle at 76% 8%,#fff 0 .7cqw,transparent 1cqw),
    radial-gradient(circle at 58% 30%,#fff 0 .6cqw,transparent .9cqw),
    radial-gradient(circle at 82% 66%,var(--a2) 0 13%,transparent 13.6%),
    radial-gradient(circle at 34% 96%,var(--a1) 0 40%,transparent 40.6%);
}
.art--tree .cover__art{
  background:
    radial-gradient(circle at 50% 40%,var(--a1) 0 34%,transparent 34.6%),
    radial-gradient(circle at 34% 56%,var(--a1) 0 20%,transparent 20.6%),
    radial-gradient(circle at 66% 56%,var(--a1) 0 20%,transparent 20.6%),
    linear-gradient(var(--a2),var(--a2)) 50% 100%/8% 40% no-repeat;
}
.art--glyph .cover__art{
  background:radial-gradient(ellipse at 50% 100%,var(--a2) 0 62%,transparent 63%);
}
.art--arch .cover__art{
  background:
    radial-gradient(circle at 50% 100%,var(--a1) 0 30%,transparent 30.6%),
    radial-gradient(circle at 22% 100%,var(--a2) 0 24%,transparent 24.6%),
    radial-gradient(circle at 78% 100%,var(--a2) 0 24%,transparent 24.6%),
    radial-gradient(circle at 50% 12%,var(--a1) 0 1.2cqw,transparent 1.6cqw);
}
.art--pages .cover__art{
  background:
    linear-gradient(var(--a1),var(--a1)) 22% 62%/48% 42% no-repeat,
    linear-gradient(var(--a2),var(--a2)) 34% 78%/48% 42% no-repeat,
    linear-gradient(var(--a1),var(--a1)) 46% 94%/48% 42% no-repeat;
}
.art--night .cover__art{
  background:
    radial-gradient(circle at 30% 22%,var(--a1) 0 9%,transparent 9.6%),
    radial-gradient(circle at 38% 20%,var(--c1) 0 8%,transparent 8.6%),
    radial-gradient(circle at 68% 14%,#fff 0 .8cqw,transparent 1.1cqw),
    radial-gradient(circle at 84% 34%,#fff 0 .6cqw,transparent .9cqw),
    radial-gradient(circle at 14% 46%,#fff 0 .6cqw,transparent .9cqw),
    radial-gradient(ellipse at 50% 106%,var(--a2) 0 56%,transparent 57%);
}
.art--hills .cover__art{
  background:
    radial-gradient(ellipse at 18% 118%,var(--a1) 0 46%,transparent 47%),
    radial-gradient(ellipse at 82% 122%,var(--a1) 0 44%,transparent 45%),
    radial-gradient(ellipse at 50% 132%,var(--a2) 0 62%,transparent 63%);
}
.art--sun .cover__art{
  background:
    radial-gradient(circle at 50% 66%,var(--a1) 0 22%,rgba(255,255,255,.14) 23% 32%,transparent 33%),
    radial-gradient(ellipse at 50% 124%,var(--a2) 0 58%,transparent 59%);
}
.art--kaaba .cover__art{
  background:
    linear-gradient(var(--a2),var(--a2)) 50% 100%/40% 44% no-repeat,
    linear-gradient(var(--a1),var(--a1)) 50% 74%/42% 5% no-repeat,
    radial-gradient(circle at 50% 16%,var(--a1) 0 1.4cqw,transparent 1.8cqw);
}

.cover--light .cover__art{opacity:.85}

/* ───────────────────────── 8. LIBRARY (dark) ───────────────────────── */
.library{
  position:relative;
  isolation:isolate;
  padding-block:0 clamp(72px,9vw,120px);
  background:var(--navy-900);
  color:rgba(255,255,255,.72);
  overflow:hidden;
}
.library__wave{
  position:absolute;
  top:-1px;left:0;
  width:100%;
  height:clamp(46px,7vw,110px);
  z-index:2;
  pointer-events:none;
}
.library__glow{
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 70% 44% at 50% 0%,rgba(214,175,87,.15),transparent 70%),
    radial-gradient(ellipse 60% 50% at 92% 78%,rgba(62,134,216,.10),transparent 68%);
}

.library__head{
  position:relative;
  z-index:3;
  text-align:center;
  padding-top:clamp(72px,10vw,132px);
}
.library__title{
  font-size:var(--fs-h2);
  color:var(--cream-50);
  margin-top:16px;
}
.library__title .u-gold{color:var(--gold-500)}
.library__lead{
  max-width:60ch;
  margin:22px auto 0;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.62);
  text-wrap:pretty;
}

/* ── Chips ── */
.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:40px;
}
.chip{
  padding:9px 18px;
  border-radius:var(--r-pill);
  border:1px solid rgba(214,175,87,.30);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.78);
  font-size:var(--fs-sm);
  font-weight:600;
  white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.chip:hover{
  background:rgba(255,255,255,.09);
  border-color:var(--gold-500);
  color:#fff;
  transform:translateY(-1px);
}
.chip.is-active{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--navy-800);
  font-weight:700;
}

/* ── Marquee shelf ── */
.marquee{
  position:relative;
  z-index:1;
  margin-top:clamp(48px,6vw,72px);
  display:flex;
  flex-direction:column;
  gap:clamp(18px,2.2vw,26px);
  /* Clips the max-content tracks itself rather than leaning on
     body{overflow-x:hidden}, the mask only fades, it does not clip. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__row{
  display:flex;
  width:max-content;
  animation:marquee var(--dur,72s) linear infinite;
}
.marquee__row--rev{animation-direction:reverse}
.marquee:hover .marquee__row,
.marquee:focus-within .marquee__row{animation-play-state:paused}

.marquee__track{
  display:flex;
  gap:clamp(14px,1.8vw,22px);
  padding-right:clamp(14px,1.8vw,22px);
}
.marquee__track .cover{
  width:clamp(132px,15vw,186px);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.marquee__track .cover:hover{
  transform:translateY(-10px) rotate(-1.2deg) scale(1.03);
  box-shadow:6px 10px 18px rgba(0,0,0,.3),20px 30px 54px rgba(0,0,0,.36);
}
@keyframes marquee{
  from{translate:0}
  to{translate:-50%}
}

/* ── Shelf footer ── */
.library__foot{
  position:relative;
  z-index:3;
  margin-top:clamp(52px,6vw,80px);
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:8px 0;
  border-radius:var(--r-lg);
  border:1px solid rgba(214,175,87,.22);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
.stats__item{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:6px;
  padding:22px 12px;
  box-shadow:1px 0 0 rgba(214,175,87,.16);
}
.stats__item:last-child{box-shadow:none}
.stats dd{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 96;
  font-size:clamp(1.75rem,3.4vw,2.5rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--gold-500);
}
.stats dt{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(255,255,255,.45);
}

.library__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  margin-top:clamp(40px,5vw,56px);
  text-align:center;
}
.library__buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.library__note{
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.48);
}

/* ───────────────────────── 9. SCROLL REVEAL ─────────────────────────
   Start states are gated behind .js so the page is never blank without it. */
.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}

/* Default start state applies to every [data-reveal]; the named variants just
   swap the transform. Keeps a bare `data-reveal` working. */
.js [data-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease-out) var(--d,0s),
             transform .7s var(--ease-out) var(--d,0s);
}
/* Travel must stay UNDER the container gutter (20–24px). A wider slide pushes
   the element past the viewport edge before it animates in, at every width,
   not just on mobile. 14px is safely inside the smallest gutter. */
.js [data-reveal="left"]{transform:translateX(14px)}
.js [data-reveal="right"]{transform:translateX(-14px)}
.js [data-reveal="scale"]{transform:scale(.96)}
/* Narrow viewports have no horizontal slack: a 26px side-slide pushes the
   element past a 20px gutter and overflows the page before it animates in.
   Below 900px every reveal enters vertically instead. */
@media (max-width:900px){
  .js [data-reveal="left"],
  .js [data-reveal="right"]{transform:translateY(22px)}
}
/* Pure trigger: the container itself never moves, it only supplies .is-in so
   its children can stagger. Without this the parent and child transforms
   compound and the entrance reads as sloppy. */
.js [data-reveal="stagger"]{opacity:1;transform:none}
.js [data-reveal].is-in{opacity:1;transform:none}

/* ── Line-mask heading reveal ──
   Each <br>-delimited line is wrapped and clipped, then slides up from
   behind its own mask. The single most legible "this was designed" cue. */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.js .ln__i{
  display:block;
  transform:translateY(112%);
  transition:transform .95s var(--ease-out) calc(var(--i,0) * 90ms);
}
.js [data-reveal].is-in .ln__i,
.js .is-in .ln__i{transform:none}

/* ── Choreographed section head ──
   Container stays put; eyebrow, heading and lead arrive in sequence.     */
.js [data-reveal="head"]{opacity:1;transform:none}
.js [data-reveal="head"] > *{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
.js [data-reveal="head"] > :nth-child(2){transition-delay:.07s}
.js [data-reveal="head"] > :nth-child(3){transition-delay:.22s}
.js [data-reveal="head"] > :nth-child(4){transition-delay:.3s}
.js [data-reveal="head"].is-in > *{opacity:1;transform:none}
/* Line-masked headings carry their own motion, don't move them twice */
.js [data-reveal="head"] > [data-lines]{opacity:1;transform:none;transition:none}

/* ── Scroll progress ── */
.progress{
  position:fixed;
  top:0;left:0;
  z-index:200;
  height:2px;
  width:100%;
  transform:scaleX(var(--p,0));
  transform-origin:left;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));
  pointer-events:none;
}

/* ── Cursor spotlight ──
   A soft gold light that tracks the pointer across a card. Fine pointers
   only: on touch there is no cursor to follow.                          */
@media (hover:hover) and (pointer:fine){
  .spot{position:relative;isolation:isolate}
  .spot::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    opacity:0;
    background:radial-gradient(340px circle at var(--px,50%) var(--py,50%),
               rgba(214,175,87,.15),transparent 62%);
    transition:opacity .35s var(--ease);
  }
  .spot:hover::after{opacity:1}
}

/* ── Magnetic buttons ──
   --mx/--my come from the pointer, --lift from the hover/active state, so
   the two compose instead of overwriting one another.                    */
.btn--primary,.btn--ghost,.btn--ghost-dark{
  transform:translate3d(var(--mx,0px),calc(var(--my,0px) + var(--lift,0px)),0);
}
.btn--primary:hover,.btn--ghost:hover,.btn--ghost-dark:hover{--lift:-2px}
.btn--primary:active,.btn--ghost:active,.btn--ghost-dark:active{--lift:2px}

/* Shared section furniture */
.section-head{max-width:660px}
.section-title{font-size:var(--fs-h2);margin-top:14px}
.section-lead{
  font-size:var(--fs-lead);
  margin-top:20px;
  max-width:56ch;
  text-wrap:pretty;
}
.section-head--dark .section-title{color:var(--cream-50)}
.section-head--dark .section-lead{color:rgba(255,255,255,.62)}

/* ───────────────────────── 10. §3 · THE PROBLEM ───────────────────────── */
.problem{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-50);
}
.diptych{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(44px,5vw,64px);
}
.panel{
  display:flex;
  flex-direction:column;
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-xl);
  min-height:clamp(360px,42vw,440px);
}
.panel__label{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.panel__tick{
  display:grid;
  place-items:center;
  width:22px;height:22px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--gold-200);
  color:var(--gold-700);
}
.panel__tick svg{width:14px;height:14px}
.panel__tick--bad{background:rgba(20,28,61,.07);color:var(--navy-200)}
.panel__foot{
  margin-top:auto;
  padding-top:24px;
  font-size:var(--fs-sm);
}
.panel__foot strong{display:block;color:var(--navy-700);font-weight:700;font-size:1rem}

/* ── Left: the pile ── */
.panel--chaos{
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  color:var(--navy-200);
}
.panel--chaos .panel__label{color:var(--navy-200)}
.pile{
  position:relative;
  flex:1;
  margin-top:22px;
  min-height:220px;
  --spread:1;
}
.pile__card{
  position:absolute;
  left:50%;top:var(--y);
  max-width:min(96%,300px);
  /* --spread lets narrow screens pull the scatter in without touching
     the per-card --x values in the markup */
  translate:calc(-50% + var(--x) * var(--spread)) 0;
  rotate:var(--r);
  max-width:min(92%,300px);
  padding:13px 18px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-1);
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--navy-200);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  filter:grayscale(1);
}

/* ── Right: the grid that assembles ── */
.panel--order{
  position:relative;
  overflow:hidden;
  background:var(--navy-800);
  border:1px solid var(--navy-500);
  color:rgba(255,255,255,.6);
}
.panel--order::before{ /* single ambient wash, matches the hero's light */
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 70% 60% at 50% 12%,rgba(214,175,87,.16),transparent 70%);
  pointer-events:none;
}
.panel--order > *{position:relative}
.panel--order .panel__label{color:var(--gold-400)}
.panel--order .panel__foot strong{color:var(--cream-50)}

.grid100{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:clamp(4px,.75vw,8px);
  margin:26px auto 0;
  width:min(100%,320px);
}
.grid100 i{
  aspect-ratio:1;
  border-radius:3px;
  background:var(--gold-500);
  opacity:.52;
}
/* Every tenth cell reads as a row marker so the 10×10 is legible */
.grid100 i:nth-child(10n+1){background:var(--gold-400);opacity:.85}

.js .grid100 i{
  transform:scale(0);
  transition:transform .5s var(--ease) calc(var(--i) * 11ms),
             opacity .5s linear calc(var(--i) * 11ms);
  opacity:0;
}
.js [data-reveal].is-in .grid100 i{transform:scale(1);opacity:.52}
.js [data-reveal].is-in .grid100 i:nth-child(10n+1){opacity:.85}

/* ───────────────────────── 11. §4 · HOW IT WORKS ───────────────────────── */
.how{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-100);
  border-block:1px solid var(--cream-200);
}
.how .section-head{margin-inline:auto;text-align:center}

.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto auto; /* num · demo · title · body */
  gap:clamp(24px,3.4vw,48px);
  margin-top:clamp(56px,6vw,84px);
}
.steps__line{
  position:absolute;
  top:21px;
  left:14%;right:14%;
  width:72%;
  height:12px;
  overflow:visible;
}
/* Dash pattern draws left→right when the row lands */
.js .steps__line path{
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.6s var(--ease-out) .25s;
}
.js .steps.is-in .steps__line path{stroke-dashoffset:0}

/* Subgrid keeps the four rows aligned across all three columns regardless of
   how tall each mockup is. Browsers without it fall back to auto rows. */
.step{
  position:relative;
  display:grid;
  grid-row:span 4;
  grid-template-rows:subgrid;
  row-gap:0;
  justify-items:center;
  align-content:start;
  text-align:center;
}
.js .steps [data-reveal],
.js .steps.is-in .step{opacity:1}
.js .steps .step{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .65s var(--ease-out) var(--d),transform .65s var(--ease-out) var(--d);
}
.js .steps.is-in .step{opacity:1;transform:none}

.step__num{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--navy-700);
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 40;
  font-size:1.25rem;
  font-weight:800;
  box-shadow:0 3px 0 var(--gold-700),var(--shadow-1);
}
.step__title{font-size:1.375rem;margin-top:26px}
.step__body{margin-top:12px;font-size:.9375rem;max-width:36ch}

/* ── Miniature UI mockups ── */
.step__demo{
  display:flex;
  width:100%;
  margin-top:30px;
  perspective:900px;
}
.ui-card{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:20px 20px 18px;
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-2);
  text-align:left;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.step:hover .ui-card{transform:translateY(-6px) rotateX(6deg);box-shadow:var(--shadow-3)}
.ui-card__title{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.ui-card__note{margin-top:auto;padding-top:14px;font-size:var(--fs-xs);color:var(--navy-200)}
.ui-card__note b{color:var(--navy-700)}
.ui-card__note--center{text-align:center;margin-top:16px}

.ui-ages{display:flex;gap:6px;margin-top:12px}
.ui-ages span{
  flex:1;
  padding:9px 0;
  border-radius:10px;
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  font-size:var(--fs-xs);
  font-weight:700;
  text-align:center;
  color:var(--navy-300);
}
.ui-ages .is-on{
  background:var(--navy-700);
  border-color:var(--navy-700);
  color:var(--gold-400);
}

.ui-card--read{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ui-mini{
  width:46px;
  aspect-ratio:3/4;
  border-radius:5px;
  background:linear-gradient(168deg,var(--c1),var(--c2));
  box-shadow:2px 3px 7px rgba(11,18,41,.20);
}
.ui-card--read .ui-mini:nth-child(2){transform:translateY(-6px) scale(1.09);z-index:1}
.ui-card--read .ui-card__note{flex:0 0 100%}

.ui-bars{display:flex;align-items:flex-end;gap:6px;height:64px;margin-top:14px}
.ui-bars i{
  flex:1;
  height:var(--h);
  border-radius:4px 4px 2px 2px;
  background:var(--gold-400);
  transform-origin:bottom;
}
.ui-bars i:last-child{background:var(--gold-600)}
.js .ui-bars i{transform:scaleY(0);transition:transform .6s var(--ease) calc(.5s + var(--i,0)*0ms)}
.js .steps.is-in .ui-bars i{transform:scaleY(1)}
.js .ui-bars i:nth-child(1){transition-delay:.50s}
.js .ui-bars i:nth-child(2){transition-delay:.56s}
.js .ui-bars i:nth-child(3){transition-delay:.62s}
.js .ui-bars i:nth-child(4){transition-delay:.68s}
.js .ui-bars i:nth-child(5){transition-delay:.74s}
.js .ui-bars i:nth-child(6){transition-delay:.80s}
.js .ui-bars i:nth-child(7){transition-delay:.86s}

/* ───────────────────────── 12. §5 · INSIDE A BOOK ───────────────────────── */
.inside{
  position:relative;
  isolation:isolate;
  padding-block:clamp(80px,10vw,140px);
  background:var(--navy-900);
  color:rgba(255,255,255,.72);
  border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0;
  border-top:1px solid var(--gold-700);
  overflow:hidden;
}
.inside::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse 60% 46% at 50% 42%,rgba(214,175,87,.15),transparent 68%);
  pointer-events:none;
}
.inside .section-head{margin-inline:auto;text-align:center}

/* ── The opening spread ── */
/* The wrap is deliberately wider than the spread: the side margins are where
   the callouts live, so they annotate the page instead of covering it. */
.spread-wrap{
  position:relative;
  width:min(100%,1060px);
  margin:clamp(56px,7vw,88px) auto 0;
}
.spread{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  width:min(100%,700px);
  margin-inline:auto;
  aspect-ratio:16/9.8;
  perspective:2400px;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.5));
}
.spread__page{
  position:relative;
  padding:clamp(18px,3.2vw,40px);
  background:linear-gradient(180deg,#FFFDF8,#F6F0E2);
  transition:transform 1.1s var(--ease-out) .1s;
}
.spread__page--l{
  border-radius:var(--r-md) 4px 4px var(--r-md);
  transform-origin:right center;
  box-shadow:inset -22px 0 30px -22px rgba(20,28,61,.45);
}
.spread__page--r{
  border-radius:4px var(--r-md) var(--r-md) 4px;
  transform-origin:left center;
  box-shadow:inset 22px 0 30px -22px rgba(20,28,61,.45);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
/* Closed → open. The book turns toward the reader as it lands. */
.js [data-reveal] .spread__page--l{transform:rotateY(42deg)}
.js [data-reveal] .spread__page--r{transform:rotateY(-42deg)}
.js [data-reveal].is-in .spread__page--l{transform:rotateY(7deg)}
.js [data-reveal].is-in .spread__page--r{transform:rotateY(-7deg)}

.spread__gutter{
  position:absolute;
  top:2%;bottom:2%;left:50%;
  width:20px;
  translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(20,28,61,.22),transparent);
  pointer-events:none;
}
.spread__art{
  display:block;
  width:100%;height:100%;
  border-radius:10px;
  background:
    radial-gradient(circle at 66% 30%,#F6C64B 0 13%,rgba(246,198,75,.22) 13.5% 20%,transparent 21%),
    radial-gradient(ellipse at 22% 116%,#8FBF6A 0 46%,transparent 47%),
    radial-gradient(ellipse at 82% 122%,#6FA854 0 42%,transparent 43%),
    linear-gradient(180deg,#CFE6F5,#EAF4FA);
}
.spread__text{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 55,"opsz" 72;
  font-size:clamp(1.125rem,3.1vw,2rem);
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--navy-700);
  text-wrap:balance;
}
.spread__text b{color:var(--gold-700);font-weight:800}
/* Reading levels: only the selected one is in the box. Default is 6–7 so the
   text is never empty if the attribute is missing. */
.lv{display:none}
.lv[data-lv="6-7"]{display:inline}
[data-current-level] .lv{display:none}
[data-current-level="4-5"]   .lv[data-lv="4-5"],
[data-current-level="6-7"]   .lv[data-lv="6-7"],
[data-current-level="8-9"]   .lv[data-lv="8-9"],
[data-current-level="10-11"] .lv[data-lv="10-11"]{display:inline}

/* Reader chrome has to survive 360px: title first, levels on their own row.
   Touch targets go to 44px, which is also where the level chips become easy
   to hit while a child is holding the device. */
@media (max-width:620px){
  .reader__chrome{flex-direction:column;align-items:flex-start;gap:10px}
  .reader__level{flex-wrap:wrap;width:100%}
  .reader__level button{flex:1;min-width:56px;min-height:44px}
}
@media (pointer:coarse){
  .reader__level button{min-height:44px}
  .chip{min-height:44px}
  .footer__col a{min-height:40px;display:flex;align-items:center}
  .qa summary{padding-block:26px}
  .logo{min-height:44px}
  .link-quiet{min-height:44px;display:inline-flex;align-items:center}
}
.spread__source{
  margin-top:clamp(12px,2vw,22px);
  font-size:clamp(.625rem,1.3vw,.8125rem);
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.spread__folio{
  position:absolute;
  bottom:clamp(10px,1.8vw,20px);
  left:clamp(18px,3.2vw,40px);
  font-size:clamp(.625rem,1.2vw,.75rem);
  font-weight:700;
  color:var(--navy-200);
}
.spread__folio--r{left:auto;right:clamp(18px,3.2vw,40px)}

/* ── Callouts ── */
.callouts{position:absolute;inset:0;pointer-events:none}
.callout{
  position:absolute;
  padding:8px 14px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(214,175,87,.42);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--gold-200);
  white-space:nowrap;
}
.callout::before{ /* leader line back to the page */
  content:"";
  position:absolute;
  top:50%;
  width:clamp(16px,2.4vw,34px);
  height:1px;
  background:linear-gradient(90deg,rgba(214,175,87,.7),rgba(214,175,87,0));
}
.callout--1{top:6%;   left:0}
.callout--2{top:40%;  left:0}
.callout--3{bottom:38%;right:0}
.callout--4{bottom:5%; right:3%}
.callout--1::before.callout--2::before{left:100%}
.callout--3::before.callout--4::before{right:100%;background:linear-gradient(270deg,rgba(214,175,87,.7),rgba(214,175,87,0))}

.js .callout{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease-out) var(--d),transform .55s var(--ease-out) var(--d);
}
.js [data-reveal].is-in .callout{opacity:1;transform:none}

/* ── Spec strip ── */
.specs{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  width:min(100%,860px);
  margin:clamp(44px,5vw,64px) auto 0;
  padding:6px 0;
  border-radius:var(--r-lg);
  border:1px solid rgba(214,175,87,.22);
  background:rgba(255,255,255,.03);
}
.specs > div{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  gap:6px;
  padding:20px 12px;
  box-shadow:1px 0 0 rgba(214,175,87,.16);
}
.specs > div:last-child{box-shadow:none}
.specs dd{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 60;
  font-size:clamp(1rem,2vw,1.375rem);
  font-weight:700;
  line-height:1.15;
  text-align:center;
  color:var(--cream-50);
}
.specs dt{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

/* ───────────────────────── 13. PLACEHOLDER MARKS ─────────────────────────
   Deliberately loud. Copy that has not been written yet must never be able to
   ship by accident, especially testimonials and prices. Delete .todo when the
   real content lands; the rule can then be removed entirely.               */
.todo{
  background:rgba(214,175,87,.16);
  border:1px dashed var(--gold-600);
  border-radius:5px;
  padding:1px 7px;
  color:var(--gold-700);
  font-style:normal;
  font-weight:600;
}
.section--dark .todo,
.pricing .todo{
  background:rgba(214,175,87,.14);
  border-color:var(--gold-500);
  color:var(--gold-300,#EBD199);
}
.section-head--center{margin-inline:auto;text-align:center}

/* ───────────────────────── 14. §6 · AUTHENTICITY ───────────────────────── */
.auth{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-50);
}
.auth-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
  margin-top:clamp(44px,5vw,64px);
}

.standards{display:flex;flex-direction:column}
.standard{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:4px 22px;
  padding:26px 0;
  border-top:1px solid var(--cream-200);
}
.standard:last-child{border-bottom:1px solid var(--cream-200)}
.standard__n{
  grid-row:span 2;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 60;
  font-size:1.5rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--gold-500);
  padding-top:2px;
}
.standard__t{font-size:1.1875rem}
.standard__b{font-size:.9375rem;max-width:48ch}

/* ── The provenance receipt ── */
.prov{
  position:sticky;
  top:calc(var(--header-h) + 28px);
  padding:clamp(24px,3vw,34px);
  border-radius:var(--r-xl);
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-2);
}
.prov__eyebrow{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.prov__block{
  margin-top:18px;
  padding:20px 22px;
  border-radius:var(--r-md);
  background:#fff;
  border:1px solid var(--cream-200);
}
.prov__block--src{
  margin-top:0;
  background:var(--navy-800);
  border-color:var(--navy-500);
  text-align:center;
}
.prov__label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.prov__block--src .prov__label{color:var(--gold-400)}
.prov__sentence{
  margin-top:10px;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 55,"opsz" 48;
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--navy-700);
}
.prov__link{
  display:block;
  width:2px;
  height:56px;
  margin:0 auto;
  overflow:visible;
}
.js .prov__link path{
  stroke-dashoffset:70;
  transition:stroke-dashoffset .9s var(--ease-out) .35s;
}
.js [data-reveal].is-in .prov__link path{stroke-dashoffset:0}

.prov__ar{
  margin-top:14px;
  font-family:var(--font-ar);
  font-size:1.75rem;
  line-height:2;
  color:var(--gold-400);
}
.prov__tr{margin-top:6px;font-size:.9375rem;color:rgba(255,255,255,.74)}
.prov__ref{
  margin-top:12px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.prov__by{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--navy-300);
}

/* ───────────────────────── 15. §7 · PARENT PROOF ───────────────────────── */
.proof{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-100);
  border-block:1px solid var(--cream-200);
}
/* ── Testimonial ticker ──
   Continuous, slow, pausable. Slower than the book marquee because these
   have to be read, not just seen.                                      */
.ticker{
  margin-top:clamp(40px,5vw,64px);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker__row{
  display:flex;
  width:max-content;
  animation:marquee var(--dur,86s) linear infinite;
  will-change:transform;
}
/* Scroll-velocity lean, written by JS as --skew.
   The loop animates the `translate` property, not `transform`, precisely so
   `transform` stays free for this, the two compose instead of clashing. */
.ticker__row,.marquee__row{
  transform:skewX(var(--skew,0deg));
  transition:transform .5s var(--ease-out);
}
.ticker:hover .ticker__row,
.ticker:focus-within .ticker__row{animation-play-state:paused}
.ticker__track{
  display:flex;
  align-items:stretch;
  gap:clamp(14px,1.8vw,22px);
  padding:6px clamp(14px,1.8vw,22px) 6px 0;
}
.ticker .quote{
  width:clamp(272px,26vw,360px);
  flex:0 0 auto;
}

.quote{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(24px,2.6vw,32px);
  border-radius:var(--r-xl);
  background:#fff;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--gold-400)}
.quote__mark{
  font-family:var(--font-display);
  font-size:3.5rem;
  font-weight:900;
  line-height:.6;
  color:var(--gold-400);
}
.quote blockquote{
  margin-top:18px;
  font-size:1.0625rem;
  line-height:1.55;
  color:var(--navy-700);
}
.quote figcaption{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:auto;
  padding-top:24px;
  font-size:var(--fs-sm);
}
.quote figcaption strong{color:var(--navy-700);font-weight:700}
.quote figcaption span{color:var(--navy-200);font-size:var(--fs-xs)}


/* ───────────────────────── 16. §8 · PRICING ───────────────────────── */
.pricing{
  position:relative;
  isolation:isolate;
  padding-block:clamp(80px,10vw,140px);
  background:var(--navy-900);
  color:rgba(255,255,255,.72);
  border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0;
  border-top:1px solid var(--gold-700);
  overflow:hidden;
}
.pricing::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse 64% 44% at 50% 6%,rgba(214,175,87,.16),transparent 70%);
  pointer-events:none;
}

.plans{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);
  width:min(100%,880px);
  margin:clamp(48px,5vw,68px) auto 0;
  /* Stretch, not start, equal card heights land both CTAs on the same line */
}
.plan{
  display:flex;
  flex-direction:column;
  padding:clamp(28px,3vw,38px);
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}
.plan--best{
  position:relative;
  background:rgba(214,175,87,.07);
  border:1.5px solid var(--gold-500);
  box-shadow:0 24px 60px -24px rgba(214,175,87,.42);
}
.plan__ribbon{
  position:absolute;
  top:0;left:50%;
  translate:-50% -50%;
  padding:6px 16px;
  border-radius:var(--r-pill);
  background:var(--gold-500);
  color:var(--navy-800);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.plan__name{
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-400);
}
.plan__price{
  display:flex;
  align-items:baseline;
  gap:3px;
  margin-top:14px;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 96;
  font-size:clamp(2.75rem,5vw,3.75rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--cream-50);
}
.plan__cur{font-size:.45em;font-weight:700;translate:0 -.55em}
.plan__per{
  font-family:var(--font-ui);
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:0;
  color:rgba(255,255,255,.5);
  margin-left:4px;
}
.plan__sub{margin-top:10px;font-size:var(--fs-sm);color:rgba(255,255,255,.55)}
.plan__sub s{color:rgba(255,255,255,.34)}

.plan__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:26px 0 30px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.9375rem;
}
.plan__list li{display:flex;align-items:flex-start;gap:11px}
.plan__list b{color:var(--cream-50);font-weight:700}
.plan__list svg{
  width:19px;height:19px;
  flex-shrink:0;
  margin-top:2px;
  padding:2.5px;
  border-radius:50%;
  background:rgba(214,175,87,.18);
  color:var(--gold-400);
}
.plan .btn{margin-top:auto;width:100%}

.btn--ghost-dark{
  background:rgba(255,255,255,.06);
  color:var(--cream-50);
  border:1.5px solid rgba(214,175,87,.4);
}
.btn--ghost-dark:hover{
  background:rgba(255,255,255,.1);
  border-color:var(--gold-500);
  transform:translateY(-2px);
}
.btn--ghost-dark:active{transform:translateY(0)}

.guarantee{
  display:flex;
  align-items:center;
  gap:12px;
  width:min(100%,720px);
  margin:clamp(32px,4vw,44px) auto 0;
  padding:18px 24px;
  border-radius:var(--r-lg);
  border:1px dashed rgba(214,175,87,.34);
  font-size:var(--fs-sm);
  color:rgba(255,255,255,.62);
  text-wrap:pretty;
}
.guarantee .panel__tick{background:rgba(214,175,87,.18);color:var(--gold-400)}

/* ───────────────────────── 17. §9 · FAQ ───────────────────────── */
.faq{
  position:relative;
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-50);
  border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0;
  margin-top:-1px;
}
.faq__inner{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.faq .section-head{position:sticky;top:calc(var(--header-h) + 28px)}

.faq__list{display:flex;flex-direction:column}
.qa{border-top:1px solid var(--cream-200)}
.qa:last-child{border-bottom:1px solid var(--cream-200)}
.qa summary{
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 0;
  list-style:none;
  cursor:pointer;
  font-size:1.0625rem;
  font-weight:700;
  color:var(--navy-700);
  transition:color .18s var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-700)}
.qa summary::after{ /* plus → minus */
  content:"";
  width:15px;height:15px;
  flex-shrink:0;
  margin-left:auto;
  background:
    linear-gradient(var(--gold-600),var(--gold-600)) 50% 50%/100% 2.2px no-repeat,
    linear-gradient(var(--gold-600),var(--gold-600)) 50% 50%/2.2px 100% no-repeat;
  transition:rotate .3s var(--ease),opacity .3s var(--ease);
}
.qa[open] summary::after{rotate:135deg}
.qa__body{padding:0 46px 26px 0;font-size:.9375rem;max-width:60ch}
.qa[open] .qa__body{animation:qaIn .38s var(--ease-out)}
@keyframes qaIn{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}

/* ───────────────────────── 18. §10 · FINAL CTA ───────────────────────── */
.final{
  padding-block:clamp(24px,4vw,56px) clamp(80px,10vw,130px);
  background:var(--cream-50);
}
.final__inner{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:1000px;
  padding:clamp(48px,7vw,88px) clamp(24px,5vw,64px) clamp(84px,9vw,116px);
  border-radius:clamp(28px,3.4vw,44px);
  background:var(--navy-800);
  border:1px solid var(--navy-500);
  box-shadow:var(--shadow-3);
  text-align:center;
}
.final__inner::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse 60% 52% at 50% 0%,rgba(214,175,87,.22),transparent 68%);
  pointer-events:none;
}
.final__title{
  font-size:var(--fs-h2);
  color:var(--cream-50);
  margin-top:16px;
}
.final__lead{
  max-width:52ch;
  margin:20px auto 0;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.62);
  text-wrap:pretty;
}
.final__cta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  margin-top:36px;
}
.final__note{
  margin-top:22px;
  font-size:var(--fs-xs);
  letter-spacing:.04em;
  color:rgba(255,255,255,.4);
}

/* A shelf of spines along the bottom edge, the 100, one last time */
.final__spines{
  position:absolute;
  bottom:0;left:0;right:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(5px,.9vw,10px);
  height:44px;
  padding-inline:24px;
  pointer-events:none;
}
.final__spines i{
  width:clamp(12px,2vw,26px);
  height:100%;
  border-radius:4px 4px 0 0;
  background:var(--c);
  opacity:.9;
  transform-origin:bottom;
}
.final__spines i:nth-child(2n){height:76%}
.final__spines i:nth-child(3n){height:88%}
.final__spines i:nth-child(5n){height:64%}
.final__spines i:nth-child(7n){height:94%}
/* Stagger comes from the inline --i, so adding spines needs no new CSS */
.js .final__spines i{
  transform:scaleY(0);
  transition:transform .5s var(--ease) calc(.3s + var(--i,0) * 26ms);
}
.js [data-reveal].is-in .final__spines i{transform:scaleY(1)}

/* ───────────────────────── 19. FOOTER ───────────────────────── */
.site-footer{
  padding-block:clamp(56px,7vw,84px) 32px;
  background:var(--navy-900);
  color:rgba(255,255,255,.55);
  font-size:var(--fs-sm);
}
.footer__top{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr);
  gap:clamp(36px,5vw,64px);
  padding-bottom:clamp(40px,5vw,56px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo--dark .logo__word{color:var(--cream-50)}
.logo--dark .logo__tld{color:var(--gold-500)}
.footer__tag{margin-top:18px;max-width:34ch;color:rgba(255,255,255,.45)}

.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
}
.footer__col{display:flex;flex-direction:column;gap:12px}
.footer__col h2{
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold-400);
  margin-bottom:4px;
}
.footer__col a{
  color:rgba(255,255,255,.55);
  width:fit-content;
  transition:color .18s var(--ease);
}
.footer__col a:hover{color:var(--cream-50)}

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:26px;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.34);
}
.footer__dua{
  font-family:var(--font-ar);
  font-size:1.125rem;
  line-height:2;
  color:var(--gold-500);
}

/* ───────────────────────── 20. BOOK READER (shared) ─────────────────────────
   Used inline on the home page and full-screen on read.html. The spread
   markup is identical to §5's, so one component styles both.            */
.preview{
  padding-block:clamp(80px,10vw,130px);
  background:var(--cream-100);
  border-block:1px solid var(--cream-200);
}

.reader{
  width:min(100%,940px);
  margin:clamp(40px,5vw,60px) auto 0;
  border-radius:var(--r-xl);
}
.reader:focus-visible{outline:3px solid var(--gold-500);outline-offset:6px}

.reader--inline{
  padding:clamp(16px,2vw,24px);
  background:var(--navy-900);
  border:1px solid var(--navy-500);
  box-shadow:var(--shadow-3);
}

.reader__chrome{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 6px 16px;
}
.reader__title{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--cream-50);
}
.reader__title b{font-weight:500;color:rgba(255,255,255,.4)}

.reader__level{display:flex;align-items:center;gap:5px}
.reader__levellabel{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin-right:4px;
}
.reader__level button{
  padding:6px 11px;
  border-radius:var(--r-pill);
  border:1px solid rgba(214,175,87,.3);
  font-size:var(--fs-xs);
  font-weight:700;
  color:rgba(255,255,255,.62);
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.reader__level button:hover{border-color:var(--gold-500);color:#fff}
.reader__level button.is-on{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--navy-800);
}

.reader__frame{
  overflow:hidden;
  border-radius:var(--r-md);
}
.reader__track{
  display:flex;
  transform:translate3d(calc(var(--n,0) * -100%),0,0);
  transition:transform .55s var(--ease-out);
}
.reader__page{
  flex:0 0 100%;
  min-width:0;
  opacity:.25;
  transition:opacity .45s var(--ease-out);
}
.reader__page.is-current{opacity:1}

/* Reader spreads sit open and still, no scroll-driven rotation */
.spread--flat{
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.36));
  width:100%;
  aspect-ratio:16/9.4;
}
.spread--flat .spread__page{transition:none}
.spread--flat .spread__page--l{transform:rotateY(4deg)}
.spread--flat .spread__page--r{transform:rotateY(-4deg)}
.js [data-reveal] .spread--flat .spread__page--l,
.js [data-reveal].is-in .spread--flat .spread__page--l{transform:rotateY(4deg)}
.js [data-reveal] .spread--flat .spread__page--r,
.js [data-reveal].is-in .spread--flat .spread__page--r{transform:rotateY(-4deg)}

/* Sample-spread artwork */
.spread__art.sart--dawn{background:
  radial-gradient(circle at 50% 74%,#F6C64B 0 15%,rgba(246,198,75,.2) 16% 24%,transparent 25%),
  radial-gradient(ellipse at 50% 128%,#C98B4E 0 54%,transparent 55%),
  linear-gradient(180deg,#F5D9A8,#FBEEDA)}
.spread__art.sart--sky{background:
  radial-gradient(circle at 26% 30%,#fff 0 13%,transparent 14%),
  radial-gradient(circle at 40% 26%,#fff 0 9%,transparent 10%),
  radial-gradient(circle at 72% 44%,#fff 0 11%,transparent 12%),
  linear-gradient(180deg,#8FC4EA,#DCEEF9)}
.spread__art.sart--land{background:
  radial-gradient(ellipse at 20% 122%,#7FB05C 0 48%,transparent 49%),
  radial-gradient(ellipse at 78% 128%,#5E8F44 0 46%,transparent 47%),
  linear-gradient(180deg,#CFE6F5,#EAF4FA)}
.spread__art.sart--sea{background:
  radial-gradient(ellipse at 50% 132%,#2E8FA8 0 62%,transparent 63%),
  radial-gradient(ellipse at 22% 118%,#48AFC4 0 40%,transparent 41%),
  linear-gradient(180deg,#BFE3EE,#E8F5F8)}
.spread__art.sart--child{background:
  radial-gradient(circle at 50% 62%,#E8B98C 0 17%,transparent 18%),
  radial-gradient(ellipse at 50% 126%,#4E7FCB 0 46%,transparent 47%),
  linear-gradient(180deg,#F3E4CF,#FBF3E6)}
.spread__art.sart--stars{background:
  radial-gradient(circle at 24% 26%,#FFE9A8 0 3%,transparent 4%),
  radial-gradient(circle at 62% 18%,#FFE9A8 0 2.4%,transparent 3%),
  radial-gradient(circle at 78% 52%,#FFE9A8 0 2%,transparent 2.6%),
  radial-gradient(circle at 40% 62%,#FFE9A8 0 2.4%,transparent 3%),
  radial-gradient(circle at 14% 70%,#FFE9A8 0 1.8%,transparent 2.4%),
  linear-gradient(180deg,#1E2A55,#3B4E88)}

.reader__bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding-top:18px;
}
.reader__nav{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(214,175,87,.34);
  color:var(--gold-400);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             opacity .18s var(--ease),transform .18s var(--ease);
}
.reader__nav svg{width:16px;height:16px}
.reader__nav[data-reader-prev] svg{transform:rotate(180deg)}
.reader__nav:hover:not(:disabled){background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-800)}
.reader__nav:active:not(:disabled){transform:scale(.93)}
.reader__nav:disabled{opacity:.28;cursor:not-allowed}

.reader__dots{display:flex;align-items:center;gap:2px}
/* The visible dot is 8px but the hit area is a full 44px square, drawn by a
   transparent ::before. Small targets are the commonest touch failure. */
.reader__dot{
  position:relative;
  width:8px;height:8px;
  margin-inline:3px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
  transition:background-color .22s var(--ease),width .22s var(--ease);
}
.reader__dot::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:44px;height:44px;
  translate:-50% -50%;
}
.reader__dot:hover{background:rgba(255,255,255,.5)}
.reader__dot.is-on{width:24px;border-radius:var(--r-pill);background:var(--gold-500)}

.reader__hint{
  margin-top:14px;
  text-align:center;
  font-size:var(--fs-xs);
  color:rgba(255,255,255,.34);
}

.preview__cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  margin-top:clamp(32px,4vw,44px);
}
.preview__note{font-size:var(--fs-sm);color:var(--navy-200)}

/* ───────────────────────── 20b. FULL-SCREEN READER (read.html) ───────────────────────── */
body.reading{
  background:var(--navy-900);
  overflow:hidden;
}
.rdr{
  display:grid;
  grid-template-rows:auto 1fr auto;
  height:100svh;
  padding:clamp(12px,2vw,20px);
  gap:clamp(10px,1.6vw,18px);
}
.rdr:focus-visible{outline:none}

.rdr__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.rdr__back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px 9px 12px;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-sm);
  font-weight:600;
  color:rgba(255,255,255,.72);
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.rdr__back svg{width:14px;height:14px;transform:rotate(180deg)}
.rdr__back:hover{background:rgba(255,255,255,.12);color:#fff}

.rdr__meta{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.rdr__mark{width:26px;height:26px;flex-shrink:0;color:var(--gold-500)}
.rdr__book{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 40;
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:-.02em;
  color:var(--cream-50);
  white-space:nowrap;
}
.rdr__no{
  font-size:var(--fs-xs);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.35);
  white-space:nowrap;
}

.rdr__stage{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(8px,1.6vw,22px);
  min-height:0;
}
.rdr__frame{
  width:min(100%,1180px);
  margin-inline:auto;
}
.rdr__frame .reader__page{display:flex;align-items:center;justify-content:center}
.rdr__frame .spread--flat{
  width:100%;
  filter:drop-shadow(0 30px 54px rgba(0,0,0,.5));
}

.rdr__edge{
  display:grid;
  place-items:center;
  width:clamp(40px,4vw,54px);
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(214,175,87,.3);
  color:var(--gold-400);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             opacity .18s var(--ease),transform .18s var(--ease);
}
.rdr__edge svg{width:17px;height:17px}
.rdr__edge--l svg{transform:rotate(180deg)}
.rdr__edge:hover:not(:disabled){background:var(--gold-500);border-color:var(--gold-500);color:var(--navy-800)}
.rdr__edge:active:not(:disabled){transform:scale(.92)}
.rdr__edge:disabled{opacity:.2;cursor:not-allowed}

.rdr__bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.rdr__count{font-size:var(--fs-xs);color:rgba(255,255,255,.32)}

/* End card */
.rdr__end{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  width:min(100%,620px);
  margin-inline:auto;
  padding:clamp(28px,4vw,52px);
  border-radius:var(--r-xl);
  background:var(--navy-800);
  border:1px solid var(--navy-500);
  text-align:center;
}
.rdr__endmark{width:46px;height:46px;margin-bottom:20px;color:var(--gold-500)}
.rdr__endtitle{
  font-size:clamp(1.75rem,4vw,2.75rem);
  margin-top:14px;
  color:var(--cream-50);
}
.rdr__endlead{
  margin-top:16px;
  max-width:44ch;
  color:rgba(255,255,255,.6);
  text-wrap:pretty;
}
.rdr__endcta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}

@media (max-width:720px){
  .rdr__no,.rdr__back span{display:none}
  .rdr__back{min-height:44px;min-width:44px;padding:0;justify-content:center}
  .rdr__levels{order:3;width:100%;justify-content:center}
  .rdr__stage{grid-template-columns:1fr}
  .rdr__edge{display:none}
  .rdr__endcta .btn{width:100%}
}

/* A two-page spread letterboxes badly on a phone: 366px wide gives a 215px
   tall book in a 669px stage. Stack the pages instead, art over text, which
   is how a phone actually wants to read. */
@media (max-width:620px){
  .spread--flat{
    grid-template-columns:1fr;
    grid-template-rows:1.05fr .95fr;
    aspect-ratio:3/3.5;
  }
  .spread--flat .spread__page--l,
  .js [data-reveal] .spread--flat .spread__page--l,
  .js [data-reveal].is-in .spread--flat .spread__page--l{
    transform:none;
    border-radius:var(--r-md) var(--r-md) 4px 4px;
    box-shadow:inset 0 -20px 26px -20px rgba(20,28,61,.4);
  }
  .spread--flat .spread__page--r,
  .js [data-reveal] .spread--flat .spread__page--r,
  .js [data-reveal].is-in .spread--flat .spread__page--r{
    transform:none;
    border-radius:4px 4px var(--r-md) var(--r-md);
    box-shadow:inset 0 20px 26px -20px rgba(20,28,61,.4);
  }
  .spread--flat .spread__gutter{
    top:52.5%;bottom:auto;left:4%;right:4%;   /* the 1.05fr / .95fr row seam */
    width:auto;height:14px;
    translate:0 -50%;
    background:linear-gradient(180deg,transparent,rgba(20,28,61,.16),transparent);
  }
  .spread--flat .spread__folio--r{left:auto;right:clamp(18px,3.2vw,40px)}
}

/* ───────────────────────── 21. COMPARISON TABLE ───────────────────────── */
.compare{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-50);
}
.ctable-wrap{
  width:min(100%,940px);
  margin:clamp(44px,5vw,64px) auto 0;
  overflow-x:auto;
  border-radius:var(--r-xl);
  border:1px solid var(--cream-200);
  background:#fff;
  box-shadow:var(--shadow-1);
}
.ctable{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.9375rem;
}
.ctable th,.ctable td{padding:16px 14px;text-align:center}
.ctable thead th{
  padding-block:20px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--navy-200);
  border-bottom:1px solid var(--cream-200);
}
.ctable tbody th{
  text-align:left;
  font-weight:600;
  color:var(--navy-700);
  padding-left:24px;
  min-width:240px;
}
.ctable tbody tr{border-bottom:1px solid var(--cream-200)}
.ctable tbody tr:last-child{border-bottom:0}
.ctable tbody tr:last-child td{font-size:var(--fs-sm);color:var(--navy-200)}
.ctable tbody tr:last-child b{color:var(--gold-700);font-weight:800}

/* The ilmbee column is tinted top-to-bottom so the eye tracks it */
.ctable__us{
  position:relative;
  background:rgba(214,175,87,.09);
  box-shadow:inset 1px 0 0 var(--gold-400),inset -1px 0 0 var(--gold-400);
}
.ctable thead .ctable__us{
  color:var(--gold-700);
  font-size:var(--fs-sm);
  letter-spacing:.04em;
  box-shadow:inset 1px 1px 0 var(--gold-400),inset -1px 0 0 var(--gold-400);
}
.ctable tbody tr:last-child .ctable__us{
  box-shadow:inset 1px 0 0 var(--gold-400),inset -1px -1px 0 var(--gold-400);
}

/* Marks are real SVG glyphs, not CSS gradient tricks, a hand-built tick
   never quite reads as a tick. */
.mk{
  display:inline-grid;
  place-items:center;
  width:24px;height:24px;
  border-radius:50%;
  vertical-align:middle;
}
.mk svg{width:14px;height:14px}
.mk--yes{background:var(--gold-500);color:#fff}
/* navy-300, not navy-200: against the cream disc the lighter tone measured
   2.79:1, so the ✕ was washing out to near-invisible next to the solid gold
   tick. The ring is tinted from the same navy so the disc still reads as a
   disc on white table cells AND on the cream legend strip. */
.mk--no{
  background:var(--cream-100);
  color:var(--navy-300);
  box-shadow:inset 0 0 0 1px rgba(92,101,133,.22);
}
.mk--mid{background:var(--cream-200)}
.mk--mid::after{
  content:"";
  width:10px;height:2px;
  border-radius:2px;
  background:var(--navy-300);
}

.js .ctable tbody tr{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease-out) var(--d),transform .5s var(--ease-out) var(--d);
}
.js .ctable-wrap.is-in tbody tr{opacity:1;transform:none}

/* navy-200 at this 12px size measured 2.99:1 on the cream ground — under the
   4.5:1 AA floor for body text, and it showed: the key read as grey noise
   under a table it is supposed to explain. */
.ctable__key{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 24px;
  margin-top:22px;
  font-size:var(--fs-xs);
  color:var(--navy-300);
}
.ctable__key span{display:inline-flex;align-items:center;gap:8px}

/* ───────────────────────── 22. GIFT ───────────────────────── */
.gift{
  padding-block:clamp(80px,10vw,130px);
  background:var(--cream-50);
}
.gift__inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(36px,5vw,72px);
  align-items:center;
}
.gift .section-lead{margin-top:20px}
.gift__list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:26px;
  font-size:.9375rem;
}
.gift__list li{display:flex;align-items:flex-start;gap:11px}
.gift__list svg{
  width:19px;height:19px;
  flex-shrink:0;margin-top:2px;padding:2.5px;
  border-radius:50%;
  background:var(--gold-200);
  color:var(--gold-700);
}
.gift__cta{margin-top:32px}

/* ── The card ── */
.gift__visual{display:flex;justify-content:center;perspective:1200px}
.giftcard{
  position:relative;
  width:min(100%,380px);
  aspect-ratio:3/3.5;
  border-radius:var(--r-xl);
  background:linear-gradient(158deg,var(--navy-700),var(--navy-900));
  box-shadow:14px 22px 44px rgba(11,18,41,.3),4px 6px 14px rgba(11,18,41,.2);
  overflow:hidden;
  transform:rotate(-3deg);
  transition:transform .5s var(--ease);
}
.gift__visual:hover .giftcard{transform:rotate(-1deg) translateY(-8px)}
/* Ribbon, two bands crossing, knot on top */
.giftcard__ribbon{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent calc(50% - 17px),var(--gold-500) calc(50% - 17px) calc(50% + 17px),transparent calc(50% + 17px)),
    linear-gradient(180deg,transparent calc(38% - 17px),var(--gold-500) calc(38% - 17px) calc(38% + 17px),transparent calc(38% + 17px));
  opacity:.9;
}
.giftcard__knot{
  position:absolute;
  top:38%;left:50%;
  width:46px;height:46px;
  translate:-50% -50%;
  border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 0 6px rgba(214,175,87,.24);
}
.giftcard__inner{
  position:absolute;
  inset:auto 0 0;
  padding:26px 26px 30px;
  text-align:center;
}
.giftcard__mark{width:38px;height:38px;margin:0 auto 14px;color:var(--gold-500)}
.giftcard__label{
  font-size:var(--fs-xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.giftcard__title{
  margin-top:8px;
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 72;
  font-size:2.25rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1;
  color:var(--cream-50);
}
.giftcard__sub{margin-top:10px;font-size:var(--fs-sm);color:rgba(255,255,255,.55)}
.giftcard__code{
  margin-top:18px;
  padding-top:16px;
  border-top:1px dashed rgba(214,175,87,.34);
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.18em;
  color:var(--gold-400);
}

/* ═════════════════════════════════════════════════════════════════
   INTERIOR PAGES, about.html · contact.html
   ═════════════════════════════════════════════════════════════════ */

/* ───────────────────────── 20. PAGE HERO ───────────────────────── */
.page-hero{
  position:relative;
  isolation:isolate;
  padding-block:clamp(56px,8vw,104px) clamp(48px,6vw,80px);
  background:var(--cream-50);
  overflow:hidden;
}
.page-hero--tight{padding-bottom:clamp(32px,4vw,52px)}
.page-hero .hero__glow{top:-32%;right:-10%;width:min(880px,90vw)}
.page-hero__inner{max-width:760px}
.page-hero__title{
  font-size:clamp(2.5rem,1.6rem + 4.4vw,4.5rem);
  margin-top:18px;
}
.page-hero__lead{
  font-size:var(--fs-lead);
  margin-top:22px;
  max-width:56ch;
  text-wrap:pretty;
}

.link-gold{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--gold-700);
  font-weight:700;
  border-bottom:1.5px solid rgba(214,175,87,.5);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.link-gold svg{width:14px;height:14px;transition:transform .22s var(--ease)}
.link-gold:hover{color:var(--gold-600);border-color:var(--gold-500)}
.link-gold:hover svg{transform:translateX(3px)}

/* ───────────────────────── 21. ABOUT · ORIGIN ───────────────────────── */
.origin{
  padding-block:clamp(56px,7vw,96px);
  background:var(--cream-50);
}
.origin__inner{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
  padding-top:clamp(40px,5vw,64px);
  border-top:1px solid var(--cream-200);
}
.origin__body{margin-top:20px;font-size:1.0625rem;max-width:56ch}

.origin__quote{
  padding:clamp(26px,3vw,36px);
  border-radius:var(--r-xl);
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  border-left:4px solid var(--gold-500);
}
.origin__quote blockquote{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 55,"opsz" 60;
  font-size:clamp(1.125rem,2vw,1.5rem);
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.02em;
  color:var(--navy-700);
}
.origin__quote figcaption{
  margin-top:18px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--navy-200);
}

/* ───────────────────────── 21b. ABOUT · PROCESS TIMELINE ───────────────────────── */
.process{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-100);
  border-block:1px solid var(--cream-200);
}
.proc{
  position:relative;
  width:min(100%,760px);
  margin:clamp(48px,5vw,72px) auto 0;
  padding-left:clamp(52px,7vw,76px);
}
/* Rail sits behind the dots and fills top-to-bottom as the list lands */
.proc__rail{
  position:absolute;
  top:12px;bottom:12px;
  left:clamp(20px,2.8vw,30px);
  width:2px;
  background:var(--cream-200);
  border-radius:2px;
  overflow:hidden;
}
.proc__rail i{
  display:block;
  width:100%;height:100%;
  background:linear-gradient(180deg,var(--gold-500),var(--gold-400));
  transform-origin:top;
}
.js .proc__rail i{transform:scaleY(0);transition:transform 1.5s var(--ease-out) .2s}
.js .proc.is-in .proc__rail i{transform:scaleY(1)}

.proc__step{position:relative;padding-bottom:clamp(28px,3.4vw,40px)}
.proc__step:last-child{padding-bottom:0}
.proc__dot{
  position:absolute;
  top:0;
  left:calc(-1 * clamp(52px,7vw,76px) + clamp(20px,2.8vw,30px) - 17px);
  display:grid;
  place-items:center;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--navy-800);
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 36;
  font-size:1rem;
  font-weight:800;
  box-shadow:0 0 0 5px var(--cream-100),0 3px 0 var(--gold-700);
}
.proc__card{
  padding:22px 26px;
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--cream-200);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.proc__step:hover .proc__card{transform:translateX(5px);box-shadow:var(--shadow-2)}
.proc__stage{
  font-size:var(--fs-xs);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-700);
}
.proc__title{font-size:1.1875rem;margin-top:7px}
.proc__body{margin-top:10px;font-size:.9375rem;max-width:54ch}

.js .proc .proc__step{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease-out) var(--d),transform .6s var(--ease-out) var(--d);
}
.js .proc.is-in .proc__step{opacity:1;transform:none}

/* ───────────────────────── 21c. ABOUT · BY THE NUMBERS ───────────────────────── */
.numbers{
  position:relative;
  isolation:isolate;
  padding-block:clamp(80px,10vw,130px) clamp(56px,7vw,88px);
  background:var(--navy-900);
  color:rgba(255,255,255,.7);
  border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0;
  border-top:1px solid var(--gold-700);
  overflow:hidden;
}
.numbers::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(ellipse 64% 46% at 50% 4%,rgba(214,175,87,.17),transparent 70%);
  pointer-events:none;
}
.figures{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.4vw,28px);
  width:min(100%,940px);
  margin:clamp(44px,5vw,64px) auto 0;
}
.figure{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:28px 14px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(214,175,87,.2);
}
.figure dd{
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 45,"opsz" 96;
  font-size:clamp(2.25rem,4.4vw,3.25rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.04em;
  color:var(--gold-500);
  font-variant-numeric:tabular-nums;
}
.figure dt{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  text-align:center;
  color:rgba(255,255,255,.45);
}
.figures__note{
  width:min(100%,60ch);
  margin:clamp(32px,4vw,44px) auto 0;
  text-align:center;
  font-size:var(--fs-lead);
  color:rgba(255,255,255,.58);
  text-wrap:pretty;
}

/* ───────────────────────── 22. ABOUT · COMMITMENTS ───────────────────────── */
.commit{
  padding-block:clamp(80px,10vw,140px);
  background:var(--cream-50);
}
.commit__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
  margin-top:clamp(48px,5vw,72px);
}
.commit__col{
  padding:clamp(26px,3vw,38px);
  border-radius:var(--r-xl);
  background:#fff;
  border:1px solid var(--cream-200);
}
.commit__col--always{
  border-color:var(--gold-400);
  box-shadow:0 18px 44px -26px rgba(168,132,47,.55);
}
.commit__head{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-ui);
  font-size:var(--fs-sm);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.commit__col--always .commit__head{color:var(--gold-700)}

.commit__list{
  display:flex;
  flex-direction:column;
  margin-top:8px;
}
.commit__list li{
  padding:16px 0;
  border-bottom:1px solid var(--cream-200);
  font-size:1rem;
  line-height:1.5;
}
.commit__list li:last-child{border-bottom:0;padding-bottom:0}
.commit__col--always .commit__list li{color:var(--navy-700);font-weight:500}

.js .commit__grid .commit__col{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-out) var(--d),transform .6s var(--ease-out) var(--d);
}
.js .commit__grid.is-in .commit__col{opacity:1;transform:none}

/* ───────────────────────── 23. ABOUT · TEAM ───────────────────────── */
/* Continues the navy block opened by .numbers, no second rounded edge */
.team{
  position:relative;
  isolation:isolate;
  padding-block:clamp(48px,6vw,80px) clamp(80px,10vw,130px);
  background:var(--navy-900);
  color:rgba(255,255,255,.7);
  overflow:hidden;
}
.team__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px);
  width:min(100%,900px);
  margin:clamp(48px,5vw,72px) auto 0;
}
.member{text-align:center}
.member__photo{
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  margin-bottom:18px;
  border-radius:var(--r-lg);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(214,175,87,.28);
  color:var(--gold-500);
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.member__photo svg{width:56%;height:56%}
.member__photo--sheikh{
  background:rgba(214,175,87,.09);
  border-color:rgba(214,175,87,.45);
}
.member:hover .member__photo{transform:translateY(-5px);border-color:var(--gold-500)}
.member__name{font-size:1.0625rem;color:var(--cream-50);text-wrap:balance}
.member__cred{
  margin-top:5px;
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.member__role{margin-top:5px;font-size:var(--fs-sm);color:rgba(255,255,255,.45)}

.js .team__grid .member{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-out) var(--d),transform .6s var(--ease-out) var(--d);
}
.js .team__grid.is-in .member{opacity:1;transform:none}

.team__note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 14px;
  margin-top:clamp(40px,5vw,56px);
  font-size:var(--fs-sm);
  text-align:center;
}
.team__note .link-gold{color:var(--gold-400);border-color:rgba(214,175,87,.45)}
.team__note .link-gold:hover{color:var(--gold-300,#EBD199)}

/* ───────────────────────── 24. CONTACT ───────────────────────── */
.contact{padding-block:clamp(40px,5vw,64px) clamp(80px,10vw,130px);background:var(--cream-50)}
.contact__inner{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}

.routes{display:flex;flex-direction:column;gap:14px}
.route{
  display:block;
  padding:26px 28px;
  border-radius:var(--r-lg);
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.route:hover{
  transform:translateY(-4px);
  border-color:var(--gold-400);
  box-shadow:var(--shadow-2);
}
.route__name{font-size:1.125rem}
.route__body{margin-top:8px;font-size:var(--fs-sm);max-width:40ch}
.route__addr{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--gold-700);
}
.route__addr svg{width:14px;height:14px;transition:transform .22s var(--ease)}
.route:hover .route__addr svg{transform:translateX(3px)}

.js .routes .route{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s var(--ease-out) var(--d),transform .55s var(--ease-out) var(--d),
             box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.js .routes.is-in .route{opacity:1;transform:none}

.form-note{margin-bottom:14px;font-size:var(--fs-sm)}
.form{
  padding:clamp(26px,3vw,38px);
  border-radius:var(--r-xl);
  background:#fff;
  border:1px solid var(--cream-200);
  box-shadow:var(--shadow-2);
}
.form__title{font-size:1.375rem;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--navy-200);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:12px;
  background:var(--cream-50);
  border:1.5px solid var(--cream-200);
  font:inherit;
  font-size:1rem;
  color:var(--navy-700);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy-200) 50%),
                   linear-gradient(135deg,var(--navy-200) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
  padding-right:44px;
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold-400)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--gold-500);
  background:#fff;
  outline:none;
  box-shadow:0 0 0 3px rgba(214,175,87,.22);
}
.form .btn{width:100%;margin-top:6px}
.form__foot{margin-top:16px;font-size:var(--fs-xs);color:var(--navy-200);text-align:center}

.prefaq{
  padding-block:clamp(56px,7vw,88px);
  background:var(--cream-100);
  border-top:1px solid var(--cream-200);
}
.prefaq__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.prefaq .section-lead{margin-top:14px}

/* ───────────────────────── 25. LONG-FORM PROSE ─────────────────────────
   Shared by article.html and the four legal pages. Measure is capped at
   68ch, past that, eyes lose the line on the return sweep.            */
.prose{font-size:1.0625rem;line-height:1.72;max-width:68ch}
.prose > * + *{margin-top:1.15em}
.prose h2{
  font-size:clamp(1.5rem,2.4vw,1.875rem);
  margin-top:2.2em;
  scroll-margin-top:calc(var(--header-h) + 24px);
}
.prose h3{font-size:1.1875rem;margin-top:1.8em}
.prose h2 + p,.prose h3 + p{margin-top:.7em}
.prose strong{color:var(--navy-700);font-weight:700}
.prose a{
  color:var(--gold-700);
  font-weight:600;
  border-bottom:1.5px solid rgba(214,175,87,.45);
  transition:border-color .18s var(--ease);
}
.prose a:hover{border-color:var(--gold-500)}
.prose ul,.prose ol{display:flex;flex-direction:column;gap:.6em;padding-left:1.5em}
.prose li{position:relative}
.prose ul li::before{
  content:"";
  position:absolute;
  left:-1.1em;top:.62em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-500);
}
.prose ol{counter-reset:n;list-style:none;padding-left:1.9em}
.prose ol li{counter-increment:n}
.prose ol li::before{
  content:counter(n);
  position:absolute;
  left:-1.9em;top:.05em;
  font-family:var(--font-display);
  font-weight:800;
  font-size:.95em;
  color:var(--gold-600);
}
.prose blockquote{
  margin-block:1.8em;
  padding:4px 0 4px 26px;
  border-left:3px solid var(--gold-500);
  font-family:var(--font-display);
  font-variation-settings:"SOFT" 55,"opsz" 48;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.4;
  letter-spacing:-.015em;
  color:var(--navy-700);
}
.prose hr{
  margin-block:2.4em;
  border:0;
  border-top:1px solid var(--cream-200);
}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem}
.prose th,.prose td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--cream-200)}
.prose th{font-weight:700;color:var(--navy-700)}

/* ───────────────────────── 25b. ALL 100 BOOKS (books.html) ─────────────────────
   Each card renders the CSS placeholder cover, with a real <img> layered on
   top. Drop a file into assets/covers/series-01/ and it takes over; if the
   file is missing, site.js removes the broken <img> and the placeholder
   simply shows through. No build step, no markup change.               */
.books{padding-block:clamp(32px,4vw,52px) clamp(80px,10vw,130px);background:var(--cream-50)}

.books__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px;
}
.search{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 280px;
  max-width:420px;
  padding:12px 18px;
  border-radius:var(--r-pill);
  background:#fff;
  border:1.5px solid var(--cream-200);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.search:focus-within{border-color:var(--gold-500);box-shadow:0 0 0 3px rgba(214,175,87,.22)}
.search svg{width:17px;height:17px;flex-shrink:0;color:var(--navy-200)}
.search input{
  flex:1;
  min-width:0;
  border:0;
  outline:none;
  background:none;
  font:inherit;
  font-size:1rem;
  color:var(--navy-700);
}
.books__count{font-size:var(--fs-sm);color:var(--navy-200);white-space:nowrap}
.books__count b{color:var(--navy-700);font-weight:700}

.chips--light .chip{
  border-color:var(--cream-200);
  background:#fff;
  color:var(--navy-300);
}
.chips--light .chip:hover{border-color:var(--gold-500);color:var(--navy-700)}
.chips--light .chip.is-active{
  background:var(--navy-700);
  border-color:var(--navy-700);
  color:var(--gold-400);
}

.bookgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,15vw,190px),1fr));
  gap:clamp(18px,2.4vw,32px);
  margin-top:clamp(32px,4vw,48px);
}
.bk{display:flex;flex-direction:column;gap:12px}
.bk[hidden]{display:none}
.bk__frame{
  position:relative;
  display:block;
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:var(--shadow-book);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.bk:hover .bk__frame{transform:translateY(-8px) rotate(-1deg);box-shadow:var(--shadow-3)}
.bk__frame .cover{box-shadow:none;border-radius:0}
.bk__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.bk__meta{font-size:var(--fs-sm);font-weight:600;color:var(--navy-700);line-height:1.35}
.bk__meta b{color:var(--gold-700);font-weight:800;margin-right:3px}
.bk__theme{
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--navy-200);
  margin-top:-6px;
}
.books__empty{
  margin-top:48px;
  text-align:center;
  font-size:var(--fs-lead);
  color:var(--navy-200);
}

/* ───────────────────────── 26. BLOG INDEX ───────────────────────── */
.blog{padding-block:clamp(40px,5vw,64px) clamp(80px,10vw,130px);background:var(--cream-50)}

.post-lead{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,3.4vw,48px);
  align-items:center;
  padding:clamp(24px,3vw,36px);
  border-radius:var(--r-xl);
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.post-lead:hover{transform:translateY(-4px);border-color:var(--gold-400);box-shadow:var(--shadow-2)}
.post-lead__art{
  aspect-ratio:16/10;
  border-radius:var(--r-lg);
  background:
    radial-gradient(circle at 70% 28%,#F6C64B 0 12%,rgba(246,198,75,.2) 13% 19%,transparent 20%),
    radial-gradient(ellipse at 22% 118%,#8FBF6A 0 44%,transparent 45%),
    radial-gradient(ellipse at 80% 124%,#6FA854 0 40%,transparent 41%),
    linear-gradient(180deg,#CFE6F5,#EAF4FA);
}
.post-lead__title{font-size:clamp(1.5rem,2.8vw,2.25rem);margin-top:14px}
.post-lead__ex{margin-top:14px;font-size:1.0625rem;max-width:48ch}

.posts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.4vw,28px);
  margin-top:clamp(32px,4vw,44px);
}
.post{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2.4vw,28px);
  border-radius:var(--r-xl);
  background:#fff;
  border:1px solid var(--cream-200);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.post:hover{transform:translateY(-5px);border-color:var(--gold-400);box-shadow:var(--shadow-2)}
.post__title{font-size:1.1875rem;margin-top:12px;text-wrap:balance}
.post__ex{margin-top:10px;font-size:.9375rem}
.post__foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:22px;
  font-size:var(--fs-xs);
  color:var(--navy-200);
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:var(--r-pill);
  background:var(--gold-200);
  border:1px solid var(--gold-400);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--gold-700);
  white-space:nowrap;
}
.tag--draft{background:var(--cream-100);border-color:var(--cream-200);color:var(--navy-200)}

.js .posts .post,
.js .post-lead{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s var(--ease-out) var(--d),transform .6s var(--ease-out) var(--d),
             box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.js .posts.is-in .post,
.js .post-lead.is-in{opacity:1;transform:none}

/* ───────────────────────── 27. ARTICLE + LEGAL ───────────────────────── */
.doc{padding-block:clamp(32px,4vw,52px) clamp(80px,10vw,130px);background:var(--cream-50)}
.doc__inner{
  display:grid;
  grid-template-columns:minmax(0,220px) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
}
.doc__inner--wide{grid-template-columns:minmax(0,1fr);max-width:72ch;margin-inline:auto}

.toc{position:sticky;top:calc(var(--header-h) + 28px)}
.toc h2{
  font-family:var(--font-ui);
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--navy-200);
  margin-bottom:14px;
}
.toc a{
  display:block;
  padding:7px 0 7px 14px;
  border-left:2px solid var(--cream-200);
  font-size:var(--fs-sm);
  color:var(--navy-300);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.toc a:hover{color:var(--navy-700);border-color:var(--gold-500)}

.doc__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin-top:20px;
  font-size:var(--fs-sm);
  color:var(--navy-200);
}
.doc__updated{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:var(--r-pill);
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--navy-300);
}

/* Inline "the book that covers this" callout */
.bookref{
  display:flex;
  align-items:center;
  gap:20px;
  margin-block:2em;
  padding:20px 24px;
  border-radius:var(--r-lg);
  background:var(--navy-800);
  color:rgba(255,255,255,.62);
}
.bookref__cover{
  width:62px;
  flex-shrink:0;
  aspect-ratio:3/4;
  border-radius:5px;
  background:linear-gradient(168deg,var(--c1,#3B5FDD),var(--c2,#16277A));
  box-shadow:3px 5px 12px rgba(0,0,0,.32);
}
.bookref__k{
  font-size:var(--fs-xs);
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--gold-400);
}
.bookref__t{font-size:1.0625rem;margin-top:5px;color:var(--cream-50)}
.bookref__b{margin-top:6px;font-size:var(--fs-sm)}
.bookref a{color:var(--gold-400);border-bottom-color:rgba(214,175,87,.45)}

.author{
  display:flex;
  align-items:center;
  gap:18px;
  margin-top:clamp(40px,5vw,56px);
  padding-top:clamp(28px,3vw,36px);
  border-top:1px solid var(--cream-200);
}
.author__photo{
  display:grid;
  place-items:center;
  width:62px;height:62px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--cream-100);
  border:1px solid var(--cream-200);
  color:var(--gold-600);
}
.author__photo svg{width:60%;height:60%}
.author__name{font-size:1.0625rem}
.author__role{margin-top:3px;font-size:var(--fs-sm);color:var(--navy-200)}

/* ───────────────────────── 27b. PORTAL (library.html, gift.html) ───────────────────────── */
.portal{padding-block:clamp(30px,4vw,50px) clamp(80px,10vw,130px);background:var(--cream-50)}
.portal__inner{max-width:920px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}

.portal-card{
  background:#fff;border:1px solid var(--cream-200);border-radius:20px;
  padding:clamp(20px,3vw,34px);box-shadow:var(--shadow-1);
}
.portal-card__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.portal-card__head h2{font-family:var(--font-display);font-size:1.25rem;color:var(--navy-900)}

.portal-tabs{display:flex;gap:6px;background:var(--cream-100);border-radius:14px;padding:5px;margin-bottom:20px}
.portal-tabs button{
  flex:1;padding:10px 14px;border-radius:10px;border:none;background:transparent;
  font-family:var(--font-ui);font-weight:600;font-size:.9rem;color:var(--navy-500);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.portal-tabs button.is-active{background:#fff;color:var(--navy-900);box-shadow:var(--shadow-1)}

.portal-note{font-size:.875rem;color:var(--navy-300);margin-top:10px}
.portal-note.is-ok{color:#3a7d4f}
.portal-note.is-bad{color:#b5442e}

.portal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.portal-book{
  display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;
  background:var(--cream-50);border:1px solid var(--cream-200);text-decoration:none;color:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.portal-book:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
.portal-book strong{font-family:var(--font-display);font-size:1.02rem;color:var(--navy-900)}
.portal-book span{font-size:.8rem;color:var(--navy-300)}

.portal-child{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-radius:14px;background:var(--cream-50);border:1px solid var(--cream-200);
}
.portal-child + .portal-child{margin-top:8px}
.portal-child__name{font-weight:600;color:var(--navy-900)}
.portal-child__age{font-size:.8rem;color:var(--navy-300)}

.portal-table{width:100%;border-collapse:collapse;font-size:.9rem}
.portal-table th{text-align:left;color:var(--navy-300);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--cream-200)}
.portal-table td{padding:10px;border-bottom:1px solid var(--cream-100)}
.portal-table tr:last-child td{border-bottom:none}

.portal-empty{padding:26px 10px;text-align:center;color:var(--navy-300);font-size:.9rem}

/* Gift opening animation (gift.html) */
.gift-box{
  position:relative;width:220px;height:220px;margin-inline:auto;perspective:900px;cursor:pointer;
}
.gift-box__base{
  position:absolute;inset:40px 0 0;border-radius:14px;
  background:linear-gradient(160deg,var(--gold-600),var(--gold-400));box-shadow:var(--shadow-2);
}
.gift-box__lid{
  position:absolute;top:26px;left:-6px;right:-6px;height:46px;border-radius:10px;
  background:linear-gradient(160deg,var(--navy-700),var(--navy-900));box-shadow:var(--shadow-1);
  transform-origin:top center;transition:transform .7s cubic-bezier(.34,1.56,.64,1);
}
.gift-box__ribbon{position:absolute;left:50%;top:0;bottom:0;width:22px;margin-left:-11px;background:var(--cream-100);opacity:.85}
.gift-box.is-open .gift-box__lid{transform:rotateX(115deg) translateY(-10px)}
.gift-reveal{opacity:0;transform:translateY(10px);transition:opacity .5s ease .3s,transform .5s ease .3s}
.gift-box.is-open ~ .gift-reveal{opacity:1;transform:none}

/* ───────────────────────── 28. RESPONSIVE ───────────────────────── */
@media (max-width:1080px){
  .burger{display:flex;margin-left:-10px}
  .site-header__inner{justify-content:space-between;gap:12px}
  .site-header__actions{margin-left:auto;gap:12px}

  /* Sign-in and the CTA live inside the drawer at this width */
  .nav__cta{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    margin-top:28px;
  }
  .nav__cta .link-quiet{
    display:grid;
    place-items:center;
    min-height:48px;
    text-align:center;
  }
  .nav__cta .btn{width:100%}

  /* Nav becomes a full-height drawer under the header.
     NOT position:fixed — .site-header carries a backdrop-filter, which makes
     it the containing block for fixed descendants, so a fixed drawer would
     size itself against the 68px header instead of the viewport. Absolute
     against the (sticky, therefore positioned) header plus an explicit
     height gives the correct full-screen panel. */
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    height:calc(100vh - var(--header-h));
    height:calc(100svh - var(--header-h));
    z-index:90;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:12px var(--gutter) 48px;
    background:var(--cream-50);
    border-top:1px solid var(--cream-200);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__link{
    padding:18px 4px;
    border-radius:0;
    border-bottom:1px solid var(--cream-200);
    font-size:1.125rem;
  }
  .nav__link:hover{background:transparent}
  .nav__link.is-active::after{display:none}
  .nav__link.is-active{color:var(--gold-700)}
  body.is-locked{overflow:hidden}

  .burger span{transition:translate .26s var(--ease),rotate .26s var(--ease),opacity .18s linear}
  .burger[aria-expanded="true"] span:nth-child(1){translate:0 7px;rotate:45deg}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){translate:0 -7px;rotate:-45deg}
}

@media (max-width:900px){
  :root{--header-h:68px}
  .hero__inner{grid-template-columns:1fr;gap:56px}
  .hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero__lead{margin-inline:auto}
  .hero__cta,.assurances{justify-content:center}
  .stage{width:min(100%,490px)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats__item:nth-child(2){box-shadow:none}
  .stats__item:nth-child(-n+2){box-shadow:1px 1px 0 rgba(214,175,87,.16)}
  .stats__item:nth-child(2){box-shadow:0 1px 0 rgba(214,175,87,.16)}

  /* §3, stack the argument instead of splitting it */
  .diptych{grid-template-columns:1fr}
  .panel{min-height:0}
  .pile{--spread:.4}

  /* §4, the connector only reads across a row */
  .steps{grid-template-columns:1fr;gap:48px;max-width:460px;margin-inline:auto}
  .steps__line{display:none}
  .step__body{max-width:44ch}

  .specs{grid-template-columns:repeat(2,1fr)}
  .specs > div:nth-child(2){box-shadow:none}

  /* §6, the receipt drops under the standards, stops sticking */
  .auth-grid{grid-template-columns:1fr}
  .prov{position:static}

  /* §7, quotes stack, nothing stays raised */
  .quotes{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .quote--raised{margin-top:0}
  .js .quotes.is-in .quote--raised{transform:none}

  /* §8 */
  .plans{grid-template-columns:1fr;max-width:460px}
  .plan--best{order:-1}

  /* §9, the head stops sticking once it sits above the list */
  .faq__inner{grid-template-columns:1fr}
  .faq .section-head{position:static}
  .qa__body{padding-right:0}

  /* Footer */
  .footer__top{grid-template-columns:1fr;gap:40px}

  /* Interior pages */
  .origin__inner{grid-template-columns:1fr;gap:36px}
  .commit__grid{grid-template-columns:1fr}
  .team__grid{grid-template-columns:repeat(2,1fr);max-width:460px}
  .figures{grid-template-columns:repeat(2,1fr)}
  .contact__inner{grid-template-columns:1fr}
  .prefaq__inner{flex-direction:column;align-items:flex-start}

  /* Home extras */
  .gift__inner{grid-template-columns:1fr;gap:44px}
  .gift__visual{order:-1}

  /* Blog + documents */
  .post-lead{grid-template-columns:1fr}
  .posts{grid-template-columns:repeat(2,1fr)}
  .doc__inner{grid-template-columns:1fr}
  .toc{
    position:static;
    padding:20px 22px;
    border-radius:var(--r-lg);
    background:var(--cream-100);
    border:1px solid var(--cream-200);
  }
}

/* Below this the side margins can no longer hold a callout without covering
   the page, so they become a legible list underneath instead. */
@media (max-width:1100px){
  .spread{width:100%}
  .callouts{
    position:static;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin-top:26px;
  }
  .callout{position:static;white-space:normal}
  .callout::before{display:none}
}

/* Below this the header cannot fit logo + CTA + burger. The CTA is already
   duplicated in the drawer, and the hero CTA sits just below the fold, so
   dropping it here costs nothing and stops the burger being pushed off-screen. */
@media (max-width:820px){
  .site-header__actions{display:none}
  .logo__mark{width:30px;height:30px}
  .logo__word{font-size:1.25rem}
}

@media (max-width:640px){
  .hero{padding-block:36px 84px}
  .hero__title{font-size:clamp(2.5rem,10vw,3.25rem)}
  /* Scoped to the page CTAs, the header's .btn--sm must stay compact */
  .hero__cta .btn,.library__cta .btn{width:100%;height:54px}
  .library__buttons{width:100%;max-width:340px;flex-direction:column}
  .hero__cta{width:100%;max-width:340px}
  /* Keep the fanned covers inside the gutter, and shrink the stack so the
     centre book stops cropping their titles */
  .book{width:42%}
  .stage .cover--fan-l,
.stage .cover--fan-r{width:33%}
  .stage .cover--fan-l{left:0}
  .stage .cover--fan-r{right:0}
  .tile{padding:11px 15px;border-radius:18px}
  .tile strong{font-size:1.375rem}
  .tile--a{left:-2%}
  .tile--b{right:-2%}
  .tile--c{right:2%}
  .assurances{gap:10px 18px;margin-top:28px}
  .final__cta .btn,.plan .btn{width:100%;height:54px}
  .final__cta{width:100%;max-width:340px;margin-inline:auto}
  .footer__cols{grid-template-columns:repeat(2,1fr);gap:28px}
  .posts{grid-template-columns:1fr}
  .bookref{flex-direction:column;align-items:flex-start;gap:14px}
  .guarantee{align-items:flex-start}
  .quote__mark{font-size:2.75rem}
  .marquee{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  }
  .library__cta .btn{max-width:340px}
}

/* ───────────────────────── 10. REDUCED MOTION ───────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .marquee__row{animation:none;width:auto}
  .marquee{overflow-x:auto;scrollbar-width:thin}
  .marquee__row > [aria-hidden="true"]{display:none} /* drop the loop clone */

  /* Reveals resolve to their end state, JS also adds .is-in immediately */
  .js [data-reveal],
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .grid100 i{transform:none;opacity:.52}
  .js .grid100 i:nth-child(10n+1){opacity:.85}
  .js .steps .step{opacity:1;transform:none}
  .js .ui-bars i{transform:none}
  .js .callout{opacity:1;transform:none}
  .js .steps__line path,
  .js .prov__link path{stroke-dashoffset:0}
  .js .quotes .quote,
  .js .commit__grid .commit__col,
  .js .team__grid .member,
  .js .proc .proc__step,
  .js .ctable tbody tr,
  .js .routes .route{opacity:1;transform:none}
  .js .final__spines i{transform:none}
  .js .proc__rail i{transform:none}
  .reader__track{transition:none}
  .qa[open] .qa__body{animation:none}
  .js [data-reveal] .spread__page--l,
.js [data-reveal].is-in .spread__page--l{transform:rotateY(7deg)}
  .js [data-reveal] .spread__page--r,
.js [data-reveal].is-in .spread__page--r{transform:rotateY(-7deg)}
}

/* ══════════════ HERO · 3D OPEN BOOK ══════════════
   An open book seen three-quarters from above-left, the way a real one sits
   when someone is reading it — not a flat mockup. The pages carry actual
   artwork from Book 01, curved near the spine by strips that hero3d() builds
   at runtime, and a leaf turns on a slow loop.                          */
.hero3d{
  position:relative;
  max-width:100%;
  width:100%;
  display:flex; align-items:center; justify-content:center;
  /* Long focal length: a short one exaggerates the near corner and the book
     stops reading as a book. */
  perspective:2400px;
  perspective-origin:50% 42%;
}
.hero3d__book{
  position:relative;
  display:flex;
  transform-style:preserve-3d;
  /* The angle: tipped back and swung to the left, so the far page recedes and
     the near one leans toward the reader. */
  --splay:17deg;          /* read by hero3d() so the leaf lines up exactly */
  transform:rotateX(9deg) rotateY(-13deg);
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.hero3d:hover .hero3d__book{transform:rotateX(5deg) rotateY(-7deg)}

.hero3d__side{
  position:relative;
  width:clamp(130px, 20vw, 236px);
  transform-style:preserve-3d;
  backface-visibility:hidden;
  background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.10);
}
/* Each page splays away from the spine, which is what makes it an *open*
   book rather than two rectangles touching. */
.hero3d__side--l{transform-origin:right center; transform:rotateY(var(--splay)); border-radius:3px 0 0 3px}
.hero3d__side--r{transform-origin:left center;  transform:rotateY(calc(-1 * var(--splay))); border-radius:0 3px 3px 0}
.hero3d__img{display:block; width:100%; height:auto; border-radius:inherit; position:relative; z-index:2}

/* ── Cover state ──
   The loop opens on the cover so the first thing anyone sees is the product.
   Nothing moves or fades to get there: the book stays exactly where it is and
   the left leaf simply shows no artwork, which is what the inside of a front
   cover looks like anyway. An earlier version slid the whole book sideways and
   faded the left page in on its own timer — the book appeared to drift in from
   the right and pages arrived out of step with the turn. */
/* Hiding only the artwork left the page itself behind — a blank white sheet
   standing next to the cover, which is not what a shut book looks like. The
   whole left leaf goes, edge and all. `visibility` rather than `display` so it
   keeps its space and nothing in the layout shifts when it comes back. */
.hero3d.is-closed .hero3d__side--l{visibility:hidden}
.hero3d.is-closed .hero3d__gutter{opacity:0}

/* ── Paper thickness ──
   A book is mostly edges. A single tinted strip read as one thick card, so
   the fore-edge is now ruled with repeating hairlines — the eye reads those
   as individual leaves — and a few real sheets sit stacked behind each page
   so the block has depth rather than just a painted-on side. */
.hero3d__side::after{
  content:""; position:absolute; top:3px; bottom:3px; width:14px;
  background:
    repeating-linear-gradient(90deg,
      rgba(146,131,99,.42) 0 1px,
      #fcf9f0 1px 3px),
    linear-gradient(90deg, #e6dcc5, #fdfbf5 40%, #ddd1b4);
  box-shadow:0 8px 18px rgba(11,18,41,.20);
}
.hero3d__side--l::after{left:-13px; border-radius:2px 0 0 2px}
.hero3d__side--r::after{right:-13px; border-radius:0 2px 2px 0}



/* The bound centre. Without this the two pages read as a seam, not a spine. */
.hero3d__gutter{
  position:absolute; top:0; bottom:0; left:50%; width:58px;
  transform:translateX(-50%) translateZ(1px);
  pointer-events:none; z-index:6;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.20) 38%, rgba(0,0,0,.34) 50%, rgba(0,0,0,.20) 62%, rgba(0,0,0,0) 100%);
}

/* Ground shadow, offset the same way the book leans. */
.hero3d__shadow{
  position:absolute; left:50%; bottom:-6%; z-index:-1;
  width:78%; height:34px;
  transform:translateX(-52%) rotateX(72deg) scaleX(1.04);
  background:radial-gradient(ellipse at center, rgba(11,18,41,.42), rgba(11,18,41,0) 72%);
  filter:blur(9px);
  pointer-events:none;
}

/* The turning leaf — strips injected by hero3d(). */
/* ── The turning leaf ──
   One sheet, two faces, rotating about the spine. An earlier version split it
   into twelve strips to fake a paper curl; each strip advanced in Z, so the
   curling sheet intersected the flat pages underneath and the turn tore and
   flickered. A hero does not need a simulated curl — it needs to read cleanly
   at a glance — so this is a single plane with lighting doing the work. */
.hero3d__leaf{
  position:absolute; top:0; right:0; height:100%;
  width:clamp(130px, 20vw, 236px);
  transform-style:preserve-3d;
  transform-origin:left center;      /* the spine */
  pointer-events:none; z-index:8;
  will-change:transform;
}
.hero3d__face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  overflow:hidden; background:#fff;
  border-radius:0 3px 3px 0;
  /* Ramped from JS via --lift so it does not pop in while the sheet is
     still lying flat on the page it is covering. */
  box-shadow:0 0 calc(20px * var(--leaf-lift, 0)) rgba(11,18,41,calc(.22 * var(--leaf-lift, 0)));
}
/* Pre-flipped, so the arriving page reads the right way round rather than
   mirrored once the sheet passes vertical. */
.hero3d__face--back{transform:rotateY(180deg); border-radius:3px 0 0 3px}
.hero3d__face img{display:block; width:100%; height:100%; object-fit:cover}
/* Light across the sheet: darkest at the spine as it lifts, fading out flat. */
.hero3d__lit{position:absolute; inset:0; pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .hero3d__book{transition:none}
  .hero3d__leaf{display:none}
}
/* ── Responsive ──
   The book is sized from the space it actually has, not the viewport: the
   hero column is roughly half the page on desktop and full width on a phone,
   so a plain vw clamp made it far too small in one case and too wide in the
   other. */
@media (max-width:1024px){
  .hero3d__side, .hero3d__leaf{width:clamp(120px, 26vw, 210px)}
  /* Not enough width here for the book and three floating cards without
     one landing on the artwork. The cards repeat copy already on the
     page, so they give way to the product. */
  .stage .tile{display:none}
}
@media (max-width:760px){
  /* Straighten up on phones: at small widths the 3/4 angle costs more legible
     artwork than the depth is worth. */
  .hero3d__book{--splay:11deg;
    transform:rotateX(6deg) rotateY(-8deg)}
  .hero3d:hover .hero3d__book{
    transform:rotateX(6deg) rotateY(-8deg)}
  .hero3d__side, .hero3d__leaf{width:clamp(118px, 34vw, 168px)}
  .hero3d__side::after{width:9px}
  .hero3d__side--l::after{left:-9px}
  .hero3d__side--r::after{right:-9px}
  .hero3d{perspective:1400px}
}
@media (max-width:400px){
  .hero3d__side, .hero3d__leaf{width:clamp(104px, 38vw, 136px)}
  .hero3d__book{--splay:8deg}
}
/* Landscape phones are short, not narrow — cap by height so the book does not
   push the headline and the buttons off the fold. */
@media (max-height:560px) and (orientation:landscape){
  .hero3d__side, .hero3d__leaf{width:clamp(96px, 16vw, 150px)}
}