/* ════════════════════════════════════════════════════════════════════
   TOME TONES PAGE STYLES - tometones/tometones.css
   Scoped under body.tometones-page so this file NEVER bleeds into the
   site chrome (header / footer / dialogs are styled by style.css only).

   Macrostructure: "channel strips" - each feature section reads like a
   fader channel on a mixing desk (channel number, name, body, and the
   real app screenshot), a deliberate structural break from the Outlived
   (cinematic scenes) and the games roadmap (timeline) pages.

   Tokens are locked under .tometones-page and reference the app's own
   grimoire gold (#c5a059) on a deep forest-black ground.
   Typefaces (Tome Tones only): Syncopate for display headings +
   Space Grotesk for body/UI - both free, open-source, commercial-use.
   ════════════════════════════════════════════════════════════════════ */

/* ── Page-only display + body typefaces (Syncopate / Space Grotesk) ── */
@font-face {
  font-family: "Syncopate";
  src: url("../assets/Syncopate-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/SpaceGrotesk-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/SpaceGrotesk-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/SpaceGrotesk-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/SpaceGrotesk-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.tometones-page {
  --tt-bg:      #0a0f0b;
  --tt-bg-2:    #0e150f;
  --tt-bg-3:    #131c14;
  --tt-gold:    #c5a059;
  --tt-gold-2:  #d9b877;
  --tt-gold-dim: rgba(197, 160, 89, 0.55);
  --tt-line:    rgba(197, 160, 89, 0.18);
  --tt-line-2:  rgba(197, 160, 89, 0.32);
  --tt-text:    #f2ead9;
  --tt-text-dim: rgba(242, 234, 217, 0.64);
  --tt-text-faint: rgba(242, 234, 217, 0.4);
  --tt-ease: cubic-bezier(0.22, 1, 0.36, 1);

  background-color: var(--tt-bg);
  color: var(--tt-text);
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: clip;
}
html { overflow-x: clip; }

/* ── Page container - same 1290px geometry as the rest of the site ── */
.tometones-page .tt-container {
  width: min(1290px, 92vw);
  margin-inline: auto;
}

/* ── Ambient leaf backdrop + vignette (the app's own background) ──── */
.tometones-page .tt-root {
  position: relative;
  isolation: isolate;
}
.tometones-page .tt-leaf {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.tometones-page .tt-leaf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.34;
  filter: blur(4px) brightness(0.55) saturate(0.9);
  transform: scale(1.02);
}
.tometones-page .tt-vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 12%, rgba(10, 15, 11, 0) 0%, rgba(10, 15, 11, 0.72) 78%, rgba(10, 15, 11, 0.94) 100%),
    linear-gradient(180deg, rgba(10, 15, 11, 0.35) 0%, rgba(10, 15, 11, 0) 22%, rgba(10, 15, 11, 0) 78%, rgba(10, 15, 11, 0.85) 100%);
}

/* ── Reveal on scroll (IntersectionObserver in tometones.js) ──────── */
.tometones-page .tt-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.75s var(--tt-ease),
    transform 0.75s var(--tt-ease);
}
.tometones-page .tt-reveal.is-in {
  opacity: 1;
  transform: none;
}
.tometones-page .tt-delay-1 { transition-delay: 0.08s; }
.tometones-page .tt-delay-2 { transition-delay: 0.18s; }
.tometones-page .tt-delay-3 { transition-delay: 0.28s; }

/* ── Typography ───────────────────────────────────────────────────── */
.tometones-page .tt-eyebrow {
  display: inline-block;
  font-family: "IsamiRi Display", serif;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-gold);
  margin-bottom: 16px;
}

.tometones-page .tt-display {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #f2ead9;
  text-wrap: balance;
  margin: 14px 0 16px;
}

.tometones-page .tt-display em {
    font-style: normal;
    color: #f2ead9;
    text-shadow: none;
  }

.tometones-page .tt-body {
  font-family: "Space Grotesk", sans-serif;
  color: var(--tt-text-dim);
  font-size: clamp(1rem, 1.2vw, 1.08rem);
  line-height: 1.7;
  max-width: 58ch;
}
.tometones-page .tt-body strong { color: var(--tt-text); font-weight: 700; }

/* ── Buttons (Tome Tones obsidian / warm gold language) ── */
.tometones-page .tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid rgba(197, 160, 89, 0.45);
  background: rgba(16, 28, 20, 0.88);
  color: #f2ead9;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.25s var(--tt-ease);
}
.tometones-page .tt-btn:hover {
  transform: translateY(-2px);
  border-color: var(--tt-gold-1, #c5a059);
  background: rgba(197, 160, 89, 0.18);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 18px rgba(197, 160, 89, 0.2);
}
.tometones-page .tt-btn--primary {
  background: linear-gradient(135deg, #e4c278 0%, #c5a059 100%) !important;
  border: 1.5px solid #ffd880 !important;
  color: #0e1810 !important;
  box-shadow: 0 4px 18px rgba(197, 160, 89, 0.35) !important;
}
.tometones-page .tt-btn--primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0e1810 !important;
  box-shadow: 0 8px 28px rgba(197, 160, 89, 0.55) !important;
  transform: translateY(-2px);
}
.tometones-page .tt-btn--secondary {
  background: rgba(16, 28, 20, 0.88) !important;
  border: 1.5px solid rgba(197, 160, 89, 0.5) !important;
  color: var(--tt-gold-2, #e4c278) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.tometones-page .tt-btn--secondary:hover {
  background: rgba(197, 160, 89, 0.18) !important;
  border-color: #ffd880 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 16px rgba(197, 160, 89, 0.25) !important;
  transform: translateY(-2px);
}
.tometones-page .tt-btn--muted,
.tometones-page .tt-btn[disabled],
.tometones-page .tt-btn[aria-disabled="true"] {
  background: rgba(16, 28, 20, 0.45) !important;
  border: 1.5px solid rgba(197, 160, 89, 0.22) !important;
  color: rgba(205, 217, 209, 0.5) !important;
  opacity: 0.68 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ── 1. Hero ──────────────────────────────────────────────────────── */
.tometones-page .tt-hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(90px + var(--sat, 0px)) clamp(20px, 4vw, 60px) 70px;
  position: relative;
}
.tometones-page .tt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-bottom: 10px;
}

/* ── 2. The Mix (claim + real numbers) ────────────────────────────── */
.tometones-page .tt-section { padding: clamp(48px, 6vw, 80px) 0; }
.tometones-page .tt-claim { text-align: center; }
.tometones-page .tt-claim__inner { max-width: 780px; margin-inline: auto; }
.tometones-page .tt-claim__body {
  margin: 0 auto;
  color: var(--tt-text-dim);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
}
.tometones-page .tt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 44px);
  max-width: 900px;
  margin-inline: auto;
}
.tometones-page .tt-stat {
  border-top: 0;
  border: 1px solid var(--tt-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.02);
  padding: 18px 16px;
  text-align: left;
}
.tometones-page .tt-stat__num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  color: var(--tt-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tometones-page .tt-stat__label {
  margin-top: 8px;
  color: var(--tt-text-dim);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── 3. Channel strips ────────────────────────────────────────────── */
.tometones-page .tt-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding: clamp(32px, 4.5vw, 56px) 0;
  border-top: 1px solid var(--tt-line);
}
.tometones-page .tt-strip--flip .tt-strip__media { order: -1; }
.tometones-page .tt-strip__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-bottom: 12px;
}
.tometones-page .tt-strip__title em { font-style: normal; color: #f2ead9; }
.tometones-page .tt-strip__body { margin-bottom: 14px; }
.tometones-page .tt-strip__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tometones-page .tt-strip__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--tt-text-dim);
  font-size: 0.96rem;
  line-height: 1.5;
}
.tometones-page .tt-strip__list li::before {
  content: "";
  flex: 0 0 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tt-gold);
  opacity: 0.7;
  transform: translateY(-1px);
}
.tometones-page .tt-strip__media {
  display: flex;
  justify-content: center;
}
.tometones-page .tt-strip__shot {
  width: min(300px, 62vw);
  border: 1px solid var(--tt-line-2);
  border-radius: 12px;
  overflow: hidden;
  background: #0c110d;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s var(--tt-ease), box-shadow 0.5s var(--tt-ease);
}
.tometones-page .tt-strip__shot:hover {
  transform: translateY(-8px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--tt-gold-dim);
}
.tometones-page .tt-strip__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 4. Tiers ─────────────────────────────────────────────────────── */
.tometones-page .tt-tiers { text-align: center; }
.tometones-page .tt-tiers__head { max-width: 640px; margin-inline: auto; }
.tometones-page .tt-tiers__intro {
  color: var(--tt-text-dim);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 auto;
}
.tometones-page .tt-tier {
  text-align: left;
  border: 1px solid var(--tt-line);
  border-radius: 16px;
  padding: 26px 22px;
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(6px);
  transition: transform 0.4s var(--tt-ease), border-color 0.4s var(--tt-ease), box-shadow 0.4s var(--tt-ease);
}
.tometones-page .tt-tier:hover {
  transform: translateY(-5px);
  border-color: var(--tt-line-2);
}
.tometones-page .tt-tiers__foot {
  margin-top: 36px;
  text-align: center;
  margin-inline: auto;
  color: var(--tt-text-faint);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  max-width: 860px;
}
.tometones-page .tt-tiers__foot a { color: var(--tt-gold); text-decoration: underline; text-underline-offset: 3px; }
.tometones-page .tt-tiers__foot a:hover { color: #fff; }

/* ── 5. CTA ───────────────────────────────────────────────────────── */
.tometones-page .tt-cta {
  text-align: center;
  padding: clamp(56px, 7vw, 104px) 0;
}
.tometones-page .tt-cta__title {
  font-size: clamp(2.6rem, 7vw, 5.6rem);
}
.tometones-page .tt-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
.tometones-page .tt-cta__foot {
  margin-top: 34px;
  color: var(--tt-text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}
.tometones-page .tt-cta__foot em { font-style: normal; color: var(--tt-gold); }

/* ── Legal disclaimer ─────────────────────────────────────────────── */
.tometones-page .tt-disclaimer {
  width: 100%;
  margin: clamp(40px, 5vw, 64px) auto clamp(20px, 3vw, 36px);
  text-align: left;
}
.tometones-page .tt-disclaimer h4 {
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--tt-gold-2);
  margin-bottom: 8px;
}
.tometones-page .tt-disclaimer p {
  color: var(--tt-text-dim);
  font-size: 0.86rem;
  line-height: 1.65;
  width: 100%;
  max-width: 100%;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .tometones-page .tt-hero__badge-dot,
  .tometones-page .tt-strip__shot:hover { transform: none; }
  .tometones-page .tt-tier:hover { transform: none; }
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tometones-page .tt-stats { grid-template-columns: 1fr; max-width: 480px; gap: 22px; }
  .tometones-page .tt-stat { text-align: center; }
  .tometones-page .tt-strip { grid-template-columns: 1fr; gap: 28px; }
  .tometones-page .tt-strip--flip .tt-strip__media { order: 0; }
  .tometones-page .tt-strip__media { order: -1; }
  .tometones-page .tt-strip__shot { width: min(320px, 70vw); }
}
@media (max-width: 520px) {
  .tometones-page .tt-hero { padding-top: calc(96px + var(--sat, 0px)); }
}
/* ══════════════════════════════════════════════════════════════════
   REDESIGN ADDITIONS - hero split, sanctuary orbs, library marquee,
   3-tier pricing chips, Discord card. Appended after the base styles
   so equal-specificity overrides win (e.g. 3-col tier grid).
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero: split grid - copy left, phone right ────────────────────── */
.tometones-page .tt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.tometones-page  .tt-hero__headline {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 800;
    font-size: clamp(2.8rem, 6.8vw, 5.2rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #f2ead9;
    text-wrap: balance;
  }
.tometones-page .tt-hero__headline em {
  display: block;
  margin-top: 0.14em;
  font-style: normal;
  color: #f2ead9;
  font-weight: 800;
  line-height: 0.92;
}
.tometones-page .tt-hero__actions { justify-content: flex-start; }

/* Phone visual with live equalizer waves either side */
.tometones-page .tt-hero__phone {
  width: min(272px, 56vw);
  border-radius: 16px;
  border: 1px solid var(--tt-line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(197, 160, 89, 0.06);
}
.tometones-page .tt-hero__phone img { border-radius: 15px; }

/* ── Build Your Sanctuary - entire container gets the card + wave glint ── */
.tometones-page .tt-sanctuary {
  text-align: center;
  padding: clamp(32px, 4vw, 56px) 0;
  position: relative;
}
.tometones-page .tt-sanctuary .tt-container {
  position: relative;
  isolation: isolate;
  padding: clamp(36px, 4.5vw, 60px) clamp(20px, 3vw, 40px) clamp(40px, 5vw, 68px);
  border-radius: 36px;
  background: rgba(16, 26, 18, 0.65);
  border: 1px solid rgba(197, 160, 89, 0.16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.tometones-page .tt-sanctuary__head,
.tometones-page .tt-sanctuary__sub,
.tometones-page .tt-board {
  position: relative;
  z-index: 2;
}
.tometones-page .tt-sanctuary__head {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.0rem, 4.8vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 0.94;
  text-transform: uppercase;
  color: #f2ead9;
  text-shadow: none;
}
.tometones-page .tt-sanctuary__sub {
  margin: 14px auto 0;
  max-width: 56ch;
  color: var(--tt-text-dim);
  line-height: 1.6;
  font-size: clamp(0.98rem, 1.4vw, 1.15rem);
}
.tometones-page .tt-orb {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-decoration: none;
}
.tometones-page .tt-orb__disc {
  display: grid;
  place-items: center;
  width: clamp(92px, 12.5vw, 134px);
  aspect-ratio: 1;
  padding: 9px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 40%, rgba(197, 160, 89, 0.1));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.4s var(--tt-ease), box-shadow 0.4s var(--tt-ease), border-color 0.4s var(--tt-ease);
}
.tometones-page .tt-orb__disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  filter: contrast(1.05) saturate(0.95);
}
.tometones-page .tt-orb:hover .tt-orb__disc {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--tt-gold-dim);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--tt-gold-dim),
    0 0 44px rgba(197, 160, 89, 0.12);
}
.tometones-page .tt-orb__label {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
  transition: color 0.3s var(--tt-ease);
}
.tometones-page .tt-orb:hover .tt-orb__label { color: var(--tt-gold-2); }

/* ── Discover the Library - slow orb marquee ──────────────────────── */
.tometones-page .tt-library {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(32px, 4.5vw, 56px) 0 clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--tt-line);
  background: linear-gradient(180deg, rgba(19, 28, 20, 0), rgba(19, 28, 20, 0.55) 30%, rgba(19, 28, 20, 0.55) 100%);
  text-align: center;
}
.tometones-page .tt-marquee {
  overflow: hidden;
  /* Same geometry as the site content: min(1290px, 92vw), centred -
     matches the tt-container and Outlived's scene column exactly. */
  width: min(1290px, 92vw);
  margin: clamp(20px, 3vw, 34px) auto 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tometones-page .tt-marquee--stack {
  display: grid;
  gap: 0;
}
.tometones-page .tt-marquee__row {
  overflow: hidden;
  padding: 2px 0;
}
.tometones-page .tt-marquee__track {
  display: flex;
  width: max-content;
  animation: tt-marquee 52s linear infinite;
}
.tometones-page .tt-marquee__row:nth-child(1) .tt-marquee__track {
  animation-duration: 52s;
}
.tometones-page .tt-marquee__row:nth-child(2) .tt-marquee__track,
.tometones-page .tt-marquee__row--rev .tt-marquee__track {
  animation-direction: reverse;
  animation-duration: 58s;
}
.tometones-page .tt-marquee__row:nth-child(3) .tt-marquee__track {
  animation-duration: 48s;
}
.tometones-page .tt-marquee:hover .tt-marquee__track { animation-play-state: paused; }
@keyframes tt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tometones-page .tt-orbchip {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-right: clamp(20px, 3vw, 36px);
}
.tometones-page .tt-orbchip__name {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-text-dim);
  white-space: nowrap;
}
.tometones-page .tt-orb__disc--sm {
  width: clamp(84px, 10vw, 116px);
  padding: 6px;
}

/* ── Pricing & Membership - 3 tier cards with checklists ──────────── */
/* Tier metal accents - mirrors the app's SubscriptionTier colors
   (bronze #CD7F32, silver #B8C0CC, gold = grimoireGold) so each Key
   reads in its own metal: name, tag pill, checks and note highlights. */
.tometones-page .tt-tier--bronze .tt-tier__name,
.tometones-page .tt-tier--bronze .tt-tier__list li::before,
.tometones-page .tt-tier--silver .tt-tier__list li::before,
.tometones-page .tt-tier--bronze .tt-tier__note strong,

/* ── Super Chill-style three-blurb intro strip ────────────────── */
.tometones-page .tt-blurbs { padding-top: clamp(8px, 1.5vw, 20px); }
.tometones-page .tt-blurbs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  text-align: left;
}
.tometones-page .tt-blurb__head {
  font-family: var(--tt-display, "Space Grotesk", sans-serif);
  font-weight: 800;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.tometones-page .tt-blurb__body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tt-text-dim, rgba(233, 240, 226, 0.78));
}

/* ── Listener Notes - Super Chill-style short quotes ──────────── */
.tometones-page .tt-notes__head { justify-content: center; margin-bottom: clamp(28px, 4vw, 48px); }
.tometones-page .tt-notes__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.tometones-page .tt-note {
  margin: 0;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: clamp(20px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.35s var(--tt-ease, ease-out), border-color 0.35s var(--tt-ease, ease-out), background 0.35s var(--tt-ease, ease-out);
}
.tometones-page .tt-note:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 160, 89, 0.45);
  background: rgba(255, 255, 255, 0.06);
}
.tometones-page .tt-note blockquote {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  flex: 1;
}
.tometones-page .tt-note figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tt-text-dim, rgba(233, 240, 226, 0.6));
}

/* ── Responsive + motion overrides ────────────────────────────── */
@media (max-width: 900px) {
  .tometones-page .tt-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tometones-page .tt-hero__actions { justify-content: center; }
  .tometones-page .tt-hero__actions .tt-btn { white-space: normal; }
  .tometones-page .tt-blurbs__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tometones-page .tt-notes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tometones-page .tt-notes__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-marquee__row .tt-marquee__track,
  .tometones-page .tt-marquee__row--rev .tt-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
  .tometones-page .tt-orb:hover .tt-orb__disc { transform: none; }
}


/* ════════════════════════════════════════════════════════════════════
   REDESIGN V2 - organic flow. Layers float free of the box grid:
   halo-lit phones, ghost chapter numerals, sound ripples, fireflies,
   an equalizer moment, and a Key podium. Fewer borders, more light.
   ════════════════════════════════════════════════════════════════════ */

/* ── Fireflies - slow drifting embers behind everything ───────────── */
.tometones-page .tt-fireflies {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.tometones-page .tt-fireflies span {
  position: absolute;
  bottom: -3vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tt-gold-2);
  opacity: 0;
  animation: tt-firefly linear infinite;
  animation-duration: var(--dur, 26s);
  animation-delay: var(--delay, 0s);
}
@keyframes tt-firefly {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  8%   { opacity: var(--peak, 0.5); }
  50%  { transform: translate3d(var(--sway, 40px), -55vh, 0) scale(1.15); }
  92%  { opacity: var(--peak, 0.5); }
  100% { transform: translate3d(calc(var(--sway, 40px) * -0.6), -110vh, 0) scale(0.8); opacity: 0; }
}

/* ── Eyebrow hairline - centered copy floats between two gold lines ─ */
.tometones-page .tt-eyebrow--line {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  justify-content: center;
}
.tometones-page .tt-eyebrow--line::before,
.tometones-page .tt-eyebrow--line::after {
  content: "";
  height: 1px;
  flex: 1 1 0;
  max-width: 190px;
  background: linear-gradient(90deg, transparent, var(--tt-line-2));
}
.tometones-page .tt-eyebrow--line::after {
  background: linear-gradient(90deg, var(--tt-line-2), transparent);
}

/* ── Hero halo + sound ripples behind the phone ───────────────────── */
@keyframes tt-halo {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.07); }
}
.tometones-page .tt-hero__phone {
  position: relative;
  z-index: 1;
  width: min(272px, 56vw);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.22);
  background: #0c110d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(197, 160, 89, 0.08);
}
.tometones-page .tt-hero__phone img { display: block; width: 100%; height: auto; border-radius: 15px; }

/* ── Strip typography - ghost numerals + kickers ──────────────────── */
.tometones-page .tt-strip { position: relative; }
.tometones-page .tt-strip__ghost {
  position: absolute;
  top: clamp(20px, 4vw, 44px);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(7rem, 16vw, 15rem);
  line-height: 0.8;
  color: rgba(242, 234, 217, 0.035);
  z-index: -1;
  user-select: none;
  pointer-events: none;
}
.tometones-page .tt-strip:nth-of-type(odd) .tt-strip__ghost { left: -0.04em; }
.tometones-page .tt-strip--flip .tt-strip__ghost { left: auto; right: -0.04em; }
.tometones-page .tt-strip__kicker {
  margin: 0 0 12px;
  font-family: "IsamiRi Display", serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-gold-dim);
}

/* Halo behind floating feature phones */
.tometones-page .tt-strip__media {
  position: relative;
  isolation: isolate;
}
.tometones-page .tt-strip__halo {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(440px, 82vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: -1;
  background: radial-gradient(circle, rgba(197, 160, 89, 0.14) 0%, rgba(197, 160, 89, 0.045) 40%, transparent 70%);
  animation: tt-halo 11s ease-in-out infinite;
}
.tometones-page .tt-strip__halo i {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(197, 160, 89, 0.22);
  animation: tt-orbit 26s linear infinite;
}
@keyframes tt-orbit {
  from { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1); }
}
.tometones-page .tt-strip__shot {
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #0c110d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(197, 160, 89, 0.12), 0 0 32px rgba(197, 160, 89, 0.05);
}

/* ── Equalizer moment under The Mix lede ──────────────────────────── */
.tometones-page .tt-eq {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 54px;
  margin: clamp(22px, 3vw, 36px) auto 0;
  max-width: 560px;
}
.tometones-page .tt-eq span {
  flex: 1 1 0;
  max-width: 7px;
  height: 12%;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--tt-gold-2), rgba(197, 160, 89, 0.12));
  animation: tt-eq 1.15s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes tt-eq {
  from { height: 10%; opacity: 0.55; }
  to   { height: 96%; opacity: 1; }
}

/* ── Subscriptions & Tier Section ─────────────────────────────────── */
.tometones-page .tt-tiers { text-align: left; }
.tometones-page .tt-tiers__head {
  max-width: 1120px;
  margin-inline: auto;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.tometones-page .tt-tiers__head-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 18px;
}
.tometones-page .tt-tiers__head-text h2 {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tt-gold-2);
}
.tometones-page .tt-tier-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.tometones-page .tt-tier-toggle__btn {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 7px 20px;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all 0.25s ease;
}
.tometones-page .tt-tier-toggle__btn:hover {
  color: #fff;
}
.tometones-page .tt-tier-toggle__btn.is-active {
  background: #d49a3d;
  color: #141008;
  box-shadow: 0 2px 10px rgba(212, 154, 61, 0.35);
}
.tometones-page .tt-tiers__intro {
  color: var(--tt-text-dim);
  line-height: 1.65;
  font-size: 0.95rem;
  max-width: 90ch;
  margin: 0;
}

/* ── Key Cards Grid ───────────────────────────────────────────────── */
.tometones-page .tt-key-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.5vw, 32px);
  max-width: 1120px;
  margin-inline: auto;
}
.tometones-page .tt-key {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px) clamp(22px, 2.6vw, 30px);
  border-radius: 28px;
  background: #111a13;
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s var(--tt-ease), border-color 0.35s var(--tt-ease), box-shadow 0.35s var(--tt-ease);
  text-align: left;
}
.tometones-page .tt-key:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.6);
}
.tometones-page .tt-key--bronze { --key: #d49a3d; }
.tometones-page .tt-key--silver { --key: #c0c8d4; }
.tometones-page .tt-key--gold {
  --key: var(--tt-gold-2);
  border-color: #d49a3d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 36px rgba(212, 154, 61, 0.15);
}
.tometones-page .tt-key--gold:hover {
  border-color: #f0b852;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.65), 0 0 48px rgba(212, 154, 61, 0.25);
}

/* Card Header & Badges */
.tometones-page .tt-key__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.tometones-page .tt-key__name {
  font-family: inherit;
  font-weight: 700;
  font-size: 1.5rem;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.tometones-page .tt-key__badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 8px;
}
.tometones-page .tt-key__badge--free {
  background: rgba(255, 255, 255, 0.12);
  color: #c4beaf;
}
.tometones-page .tt-key__badge--silver {
  background: #b4bcc8;
  color: #121820;
}
.tometones-page .tt-key-row[data-billing-mode="monthly"] .tt-key__badge--silver {
  background: rgba(255, 255, 255, 0.14);
  color: #8c939e;
}
.tometones-page .tt-key__badge--gold {
  background: #d49a3d;
  color: #141008;
}

/* Pricing block */
.tometones-page .tt-key__pricing {
  margin-bottom: 16px;
  min-height: 72px;
}
.tometones-page .tt-key__price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.tometones-page .tt-key__price {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 3.2vw, 3rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -0.03em;
}
.tometones-page .tt-key__price--gold {
  color: #d49a3d;
}
.tometones-page .tt-key__period {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 2px;
}
.tometones-page .tt-key__period--gold {
  color: rgba(212, 154, 61, 0.85);
}
.tometones-page .tt-key__orig {
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.38);
  margin-left: 8px;
}
.tometones-page .tt-key__billed {
  font-size: 0.84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 6px;
  min-height: 1.2em;
}
.tometones-page .tt-key__billed--empty {
  visibility: hidden;
}

/* Card Description & Divider */
.tometones-page .tt-key__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #b5bba8;
  margin: 0 0 18px;
  min-height: 44px;
}
.tometones-page .tt-key__divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 22px;
}

/* Checklist */
.tometones-page .tt-key__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1 0 auto;
}
.tometones-page .tt-key__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.94rem;
  font-weight: 600;
  color: #f1ede4;
  line-height: 1.4;
}
.tometones-page .tt-key__item-main {
  display: flex;
  align-items: center;
  gap: 11px;
}
.tometones-page .tt-key__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #d49a3d;
  font-size: 1.05rem;
}
.tometones-page .tt-key--silver .tt-key__check {
  color: #c0c8d4;
}
.tometones-page .tt-key--gold .tt-key__check {
  color: #d49a3d;
}
.tometones-page .tt-key__item--link {
  cursor: pointer;
}
.tometones-page .tt-key__item--gold {
  color: #d49a3d;
}
.tometones-page .tt-key__arrow {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
  line-height: 1;
}
.tometones-page .tt-key__item--gold .tt-key__arrow {
  color: #d49a3d;
}

/* Action Button */
.tometones-page .tt-key__action {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  padding: 14px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  margin-top: auto;
}
.tometones-page .tt-key__action--bronze {
  background: #c58a1f;
  color: #141008;
}
.tometones-page .tt-key__action--bronze:hover {
  background: #da9b28;
  box-shadow: 0 6px 20px rgba(197, 138, 31, 0.35);
  color: #141008;
}
.tometones-page .tt-key__action--silver {
  background: #b0b8c4;
  color: #141008;
}
.tometones-page .tt-key__action--silver:hover {
  background: #c8d0dc;
  box-shadow: 0 6px 20px rgba(176, 184, 196, 0.35);
  color: #141008;
}
.tometones-page .tt-key__action--gold {
  background: #d49a3d;
  color: #141008;
}
.tometones-page .tt-key__action--gold:hover {
  background: #e5aa45;
  box-shadow: 0 6px 22px rgba(212, 154, 61, 0.4);
  color: #141008;
}

/* ── CTA glow - the last moment exhales light ─────────────────────── */
.tometones-page .tt-cta {
  position: relative;
  overflow: visible;
}
.tometones-page .tt-cta__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1200px, 98vw);
  height: 100%;
  min-height: 520px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(197, 160, 89, 0.22) 0%, rgba(197, 160, 89, 0.08) 45%, transparent 75%);
  animation: tt-halo 10s ease-in-out infinite;
}
.tometones-page .tt-cta__lede {
  margin: 22px auto 0;
  text-align: center;
}

/* ── Layers drift as you scroll (GSAP ScrollTrigger sets the var) ─── */

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tometones-page .tt-key-row {
    grid-template-columns: minmax(0, 1fr);
    max-width: 440px;
    gap: 28px;
  }
  .tometones-page .tt-key,
  .tometones-page .tt-key--featured {
    width: 100%;
  }
  .tometones-page .tt-strip__ghost { font-size: clamp(5.6rem, 26vw, 9rem); opacity: 0.8; }
}
@media (max-width: 520px) {
  .tometones-page .tt-eq { gap: 3px; height: 40px; }
}

/* ── Reduced motion: stillness, not removal ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-fireflies { display: none; }
  .tometones-page .tt-hero__halo,
  .tometones-page .tt-strip__halo,
  .tometones-page .tt-strip__halo i,
  .tometones-page .tt-cta__glow { animation: none; }
  .tometones-page .tt-eq span { animation: none; height: 46%; }
}


/* ════════════════════════════════════════════════════════════════════
   REDESIGN V3 - "sticker book" (Super Chill energy, Tome Tones soul).
   Flat full-bleed colour sheets with wavy hand-drawn transitions;
   chunky outlined sticker cards with hard offset shadows; rotated
   chips; pill buttons that squish down on press. All colours stay on
   the page's forest/gold tokens - same header, footer, content.
   ════════════════════════════════════════════════════════════════════ */

/* ── Flat colour panels with wavy top/bottom transitions ──────────── */
.tometones-page .tt-panel {
  position: relative;
  margin: clamp(28px, 4vw, 56px) 0;
  padding: clamp(32px, 4.5vw, 60px) 0 clamp(36px, 5vw, 64px);
}
.tometones-page .tt-panel--green {
  margin-top: calc(-1 * clamp(50px, 7vw, 100px));
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(197, 160, 89, 0.07), transparent 60%),
    linear-gradient(180deg, #101a12 0%, #141f16 100%);
}
.tometones-page .tt-panel--deep {
  background:
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(197, 160, 89, 0.09), transparent 65%),
    linear-gradient(180deg, #0d1410 0%, #111a13 100%);
}
.tometones-page .tt-panel__wave {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(50px, 7vw, 100px);
  display: block;
  pointer-events: none;
  z-index: 3;
}
/* Animated roll - robust across all displays/resolutions:
   The <g class="tt-wave-roll"> holds THREE copies of a one-period path
   (x = 0, +1440, +2880 viewBox units), and the group translates by
   -1440 USER UNITS (not %) - SVG user units scale with the viewBox
   stretch, so the loop is pixel-exact on every width, DPR, and zoom.
   The SVG's own overflow is clipped by the element box (overflow:hidden
   on the svg), so the copies slide invisibly outside. Top waves roll
   left, bottom waves reverse (right) - two tides meeting. */
@media (prefers-reduced-motion: no-preference) {
  .tometones-page .tt-panel__wave .tt-wave-roll {
    animation: tt-wave-roll 18s linear infinite;
  }
  .tometones-page .tt-panel__wave--bottom .tt-wave-roll {
    animation-direction: reverse;
  }
}
.tometones-page .tt-panel__wave {
  overflow: hidden;
}
@keyframes tt-wave-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-1440px); } /* one period in user units */
}
.tometones-page .tt-panel__wave--top { top: calc(clamp(50px, 7vw, 100px) * -0.98); }
.tometones-page .tt-panel__wave--bottom { bottom: calc(clamp(50px, 7vw, 100px) * -0.98); }
.tometones-page .tt-panel--green .tt-panel__wave--top,
.tometones-page .tt-panel--deep .tt-panel__wave--top { fill: #101a12; }
.tometones-page .tt-panel--green .tt-panel__wave--bottom,
.tometomes-page .tt-panel--green .tt-panel__wave--bottom { fill: #141f16; }
.tometones-page .tt-panel--deep .tt-panel__wave--bottom { fill: #111a13; }

/* ── Sticker card primitive - flat fill, thick outline, hard shadow ── */

/* ── Buttons: source hero pair - flat white / solid black pills ──── */
.tometones-page .tt-hero .tt-btn {
  border-width: 2px;
  border-radius: 999px;
  box-shadow: none;
  transform: none;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 13px 22px;
}

/* ── Hero header accents - left as-is (no sticker chrome on this hero) */
.tometones-page .tt-hero__headline { text-shadow: none; }
.tometones-page .tt-hero__headline em { text-shadow: none; }
.tometones-page .tt-hero__phone {
  border: 1.5px solid var(--tt-line-2);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(197, 160, 89, 0.06);
}

/* ── Sanctuary orbs become sticker buttons ─────────────────────────── */
.tometones-page .tt-orb__disc {
  border: 3px solid var(--tt-line-2);
  box-shadow:
    6px 7px 0 rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  background: #131c14;
}
.tometones-page .tt-orb:nth-child(1) .tt-orb__disc { transform: rotate(-2deg); }
.tometones-page .tt-orb:nth-child(2) .tt-orb__disc { transform: rotate(1.5deg); }
.tometones-page .tt-orb:nth-child(3) .tt-orb__disc { transform: rotate(-1.2deg); }
.tometones-page .tt-orb:hover .tt-orb__disc {
  transform: translateY(-6px) rotate(0.5deg) scale(1.04);
  border-color: var(--tt-gold);
  box-shadow:
    8px 10px 0 rgba(0, 0, 0, 0.5),
    0 0 44px rgba(197, 160, 89, 0.14);
}
.tometones-page .tt-orb__label {
  padding: 5px 14px;
  border: 2px solid var(--tt-line);
  border-radius: 999px;
  background: #101a12;
  transform: rotate(-1deg);
  transition: border-color 0.3s var(--tt-ease), color 0.3s var(--tt-ease), transform 0.3s var(--tt-ease);
}
.tometones-page .tt-orb:hover .tt-orb__label {
  border-color: var(--tt-gold-dim);
  color: var(--tt-gold-2);
  transform: rotate(0.8deg);
}

/* ── Library marquee chips: outlined pill stickers ─────────────────── */
.tometones-page .tt-orbchip {
  padding: 10px 18px 12px;
  border: 2.5px solid var(--tt-line);
  border-radius: 24px;
  background: #101a12;
  box-shadow: 4px 5px 0 rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s var(--tt-ease), transform 0.3s var(--tt-ease);
}
.tometones-page .tt-orbchip:hover { border-color: var(--tt-gold-dim); transform: translateY(-3px) rotate(-1deg); }
.tometones-page .tt-orbchip:nth-child(even) { transform: rotate(0.8deg); }
.tometones-page .tt-orbchip:nth-child(odd) { transform: rotate(-0.7deg); }
.tometones-page .tt-orbchip:hover { transform: translateY(-4px) rotate(0deg); }

/* ── The Mix: stat blocks as tilted number stickers ────────────────── */
.tometones-page .tt-stat {
  border-top: 0;
  border: 1.5px solid var(--tt-line);
  border-radius: 16px;
  background: #101a12;
  box-shadow: none;
  padding: 20px 18px;
  text-align: center;
  transform: none;
}
.tometones-page .tt-claim__inner .tt-eq { margin-top: 26px; }

/* ── Channel strips: copy + phone become one sticker scene each ────── */
.tometones-page .tt-strip { border-top: 0; padding: clamp(32px, 4.5vw, 56px) 0; }
.tometones-page .tt-strip__kicker {
  display: inline-block;
  padding: 5px 14px;
  border: 2px solid var(--tt-gold-dim);
  border-radius: 999px;
  background: rgba(197, 160, 89, 0.08);
  transform: rotate(-1.4deg);
  font-family: "IsamiRi Display", serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tt-gold-2);
}
.tometones-page .tt-strip__title { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5); }
.tometones-page .tt-strip__title em { text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55); }
.tometones-page .tt-strip__list li { color: var(--tt-text); }
.tometones-page .tt-strip__list li::before {
  width: auto;
  height: auto;
  border-radius: 4px;
  background: transparent;
  color: var(--tt-gold);
  content: "\2713";
  font-weight: 700;
  opacity: 1;
  transform: none;
}
.tometones-page .tt-strip__list li {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--tt-line);
  border-radius: 10px;
  padding: 9px 14px;
  transform: none;
}
.tometones-page .tt-strip__shot {
  border: 1.5px solid var(--tt-line-2);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.40), 0 0 40px rgba(197, 160, 89, 0.06);
}
.tometones-page .tt-strip__shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50), 0 0 50px rgba(197, 160, 89, 0.10);
}



/* ── Disclaimer: simple outlined sticker ───────────────────────────── */
.tometones-page .tt-disclaimer__card {
  border: 2.5px solid var(--tt-line-2);
  border-left-width: 2.5px;
  border-left-color: var(--tt-gold-dim);
  border-radius: 20px;
  background: #101a12;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, 0.35);
}

/* ── Eyebrow chips (The Mix / Open the Tome) become little tags ────── */
.tometones-page .tt-eyebrow--line span,
.tometones-page .tt-eyebrow:not(.tt-eyebrow--line) {
  padding: 5px 14px;
  border: 2px solid var(--tt-gold-dim);
  border-radius: 999px;
  background: #101a12;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

/* ── Softer ambient layers so the stickers carry the design ────────── */
.tometones-page .tt-strip__halo { opacity: 0.55; }

/* ── Responsive: keep tilts subtle on small screens ────────────────── */
@media (max-width: 520px) {
  .tometones-page .tt-orb:nth-child(1) .tt-orb__disc,
  .tometones-page .tt-orb:nth-child(2) .tt-orb__disc,
  .tometones-page .tt-orb:nth-child(3) .tt-orb__disc { transform: rotate(-1deg); }
  .tometones-page .tt-stat { transform: rotate(-0.4deg); }
  .tometones-page .tt-stat:nth-child(2) { transform: rotate(0.5deg); }
}

/* ── Reduced motion: no tilt/press movement ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-btn:hover,
  .tometones-page .tt-btn:active,
  .tometones-page .tt-btn--primary:hover,
  .tometones-page .tt-btn--primary:active,
  .tometones-page .tt-orb:hover .tt-orb__disc,
  .tometones-page .tt-orbchip:hover,
  .tometones-page .tt-strip__shot:hover,
  .tometones-page .tt-key:hover { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   V4 LIVEN-UP - Super Chill energy. A messy montage board for the 18
   sanctuary categories, gold highlighter marks behind key words, and
   hand-drawn doodle line-art scattered over the flat panels.
   ════════════════════════════════════════════════════════════════════ */

/* ── Highlighter mark - gold marker behind a key word ─────────────── */
.tometones-page .tt-mark {
  position: relative;
  display: inline-block;
  padding: 0 0.12em;
  z-index: 0;
  color: #fff8e1;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.55),
    0 0 22px rgba(197, 160, 89, 0.35);
}
.tometones-page .tt-mark::before {
  content: "";
  position: absolute;
  inset: 12% -0.06em 6%;
  z-index: -1;
  border-radius: 0.22em 0.3em 0.18em 0.32em;
  background: linear-gradient(100deg, rgba(197, 160, 89, 0.5), rgba(197, 160, 89, 0.32) 55%, rgba(232, 197, 120, 0.4));
  transform: rotate(-1.2deg) scaleY(0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.35),
    0 1px 0 rgba(0, 0, 0, 0.35);
}
.tometones-page .tt-sanctuary__head .tt-mark {
  padding: 0.02em 0.18em;
}
.tometones-page .tt-mark:nth-child(even)::before,
.tometones-page em.tt-mark::before {
  transform: rotate(0.8deg) scaleY(0.9);
}

/* ── Sanctuary chaotic web - freeform scatter, no bounding box ────── */
.tometones-page .tt-board {
  position: relative;
  width: min(1290px, 92vw);
  margin: clamp(20px, 3.4vw, 44px) auto 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
/* Desktop: true freeform scatter - every orb pinned at its own spot, rows abandoned */
@media (min-width: 901px) {
  .tometones-page .tt-board { height: clamp(680px, 58vw, 820px); }
  .tometones-page .tt-board .tt-orb { position: absolute; margin: 0; }
  .tometones-page .tt-board .tt-orb:nth-child(1)  { left: 3%;  top: 6%;  }
  .tometones-page .tt-board .tt-orb:nth-child(2)  { left: 18%; top: 0%;  }
  .tometones-page .tt-board .tt-orb:nth-child(3)  { left: 36%; top: 9%;  }
  .tometones-page .tt-board .tt-orb:nth-child(4)  { left: 54%; top: 1%;  }
  .tometones-page .tt-board .tt-orb:nth-child(5)  { left: 72%; top: 9%;  }
  .tometones-page .tt-board .tt-orb:nth-child(6)  { left: 87%; top: 2%;  }
  .tometones-page .tt-board .tt-orb:nth-child(7)  { left: 6%;  top: 31%; }
  .tometones-page .tt-board .tt-orb:nth-child(8)  { left: 25%; top: 25%; }
  .tometones-page .tt-board .tt-orb:nth-child(9)  { left: 45%; top: 32%; }
  .tometones-page .tt-board .tt-orb:nth-child(10) { left: 64%; top: 25%; }
  .tometones-page .tt-board .tt-orb:nth-child(11) { left: 83%; top: 32%; }
  .tometones-page .tt-board .tt-orb:nth-child(12) { left: 4%;  top: 55%; }
  .tometones-page .tt-board .tt-orb:nth-child(13) { left: 22%; top: 49%; }
  .tometones-page .tt-board .tt-orb:nth-child(14) { left: 42%; top: 56%; }
  .tometones-page .tt-board .tt-orb:nth-child(15) { left: 62%; top: 49%; }
  .tometones-page .tt-board .tt-orb:nth-child(16) { left: 81%; top: 56%; }
  .tometones-page .tt-board .tt-orb:nth-child(17) { left: 32%; top: 72%; }
  .tometones-page .tt-board .tt-orb:nth-child(18) { left: 68%; top: 70%; }
}
/* Mobile / tablet: centred wrap, still tilted */
@media (max-width: 900px) {
  .tometones-page .tt-board {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: clamp(16px, 3.4vw, 28px);
  }
}
/* Every orb tilts its own way - chaotic, never grid-aligned */
.tometones-page .tt-board .tt-orb { transform: rotate(var(--rot, 0deg)); z-index: 1; }
.tometones-page .tt-board .tt-orb:nth-child(1)  { --rot: -5deg; }
.tometones-page .tt-board .tt-orb:nth-child(2)  { --rot: 4deg; }
.tometones-page .tt-board .tt-orb:nth-child(3)  { --rot: -4deg; }
.tometones-page .tt-board .tt-orb:nth-child(4)  { --rot: 5.5deg; }
.tometones-page .tt-board .tt-orb:nth-child(5)  { --rot: -3.5deg; }
.tometones-page .tt-board .tt-orb:nth-child(6)  { --rot: 3deg; }
.tometones-page .tt-board .tt-orb:nth-child(7)  { --rot: 6deg; }
.tometones-page .tt-board .tt-orb:nth-child(8)  { --rot: -5deg; }
.tometones-page .tt-board .tt-orb:nth-child(9)  { --rot: 4.5deg; }
.tometones-page .tt-board .tt-orb:nth-child(10) { --rot: -3deg; }
.tometones-page .tt-board .tt-orb:nth-child(11) { --rot: 5deg; }
.tometones-page .tt-board .tt-orb:nth-child(12) { --rot: -4.5deg; }
.tometones-page .tt-board .tt-orb:nth-child(13) { --rot: 3.5deg; }
.tometones-page .tt-board .tt-orb:nth-child(14) { --rot: -6deg; }
.tometones-page .tt-board .tt-orb:nth-child(15) { --rot: 4deg; }
.tometones-page .tt-board .tt-orb:nth-child(16) { --rot: -3.2deg; }
.tometones-page .tt-board .tt-orb:nth-child(17) { --rot: 5.2deg; }
.tometones-page .tt-board .tt-orb:nth-child(18) { --rot: -4.2deg; }
/* Varied disc sizes for the web feel */
.tometones-page .tt-board .tt-orb:nth-child(3n) .tt-orb__disc { width: clamp(104px, 13vw, 144px); }
.tometones-page .tt-board .tt-orb:nth-child(4n) .tt-orb__disc { width: clamp(112px, 14vw, 156px); }
.tometones-page .tt-board .tt-orb--brand .tt-orb__disc { width: clamp(120px, 15vw, 168px); }
.tometones-page .tt-board .tt-orb__label {
  font-size: 0.72rem;
  padding: 4px 12px;
  background: rgba(13, 20, 14, 0.9);
}
.tometones-page .tt-board .tt-orb:hover { z-index: 4; }
.tometones-page .tt-board .tt-orb:hover .tt-orb__disc {
  transform: translateY(-6px) rotate(0deg) scale(1.05);
  z-index: 3;
}

/* ── Wave drift: the whole web breathes on a slow passing wave ──────
   Each orb bobs up/down (and drifts slightly sideways) on its own
   phase. Delays are keyed to each orb's horizontal position, so the
   wave visibly sweeps left → right across the board. Negative delays
   mean the wave is already mid-motion when the section scrolls in. */
@media (prefers-reduced-motion: no-preference) {
  .tometones-page .tt-board .tt-orb {
    animation: tt-wave-drift var(--wavedur, 9s) ease-in-out var(--wavedelay, 0s) infinite alternate;
  }
  @keyframes tt-wave-drift {
    from { transform: rotate(var(--rot, 0deg)) translate(0, 16px); }
    to   { transform: rotate(var(--rot, 0deg)) translate(var(--wavedx, 9px), -20px); }
  }
}
/* Sideways drift alternates so neighbours don't move in lockstep */
.tometones-page .tt-board .tt-orb:nth-child(odd)  { --wavedx: 18px; }
.tometones-page .tt-board .tt-orb:nth-child(even) { --wavedx: -15px; }
/* Slow sideways current: the whole web gently sways across the screen
   on a long cycle (desktop only - mobile boards sit edge-to-edge). */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .tometones-page .tt-board {
    animation: tt-board-current 26s ease-in-out infinite alternate;
  }
  @keyframes tt-board-current {
    from { transform: translateX(-14px); }
    to   { transform: translateX(14px); }
  }
}
/* Golden glint: sweeps across the whole sanctuary container card */
@media (prefers-reduced-motion: no-preference) {
  .tometones-page .tt-sanctuary .tt-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 36px;
    background: linear-gradient(105deg,
      transparent 28%,
      rgba(197, 160, 89, 0.12) 42%,
      rgba(240, 214, 150, 0.28) 50%,
      rgba(197, 160, 89, 0.12) 58%,
      transparent 72%);
    background-size: 260% 100%;
    mix-blend-mode: screen;
    animation: tt-glint-sweep 9s ease-in-out infinite alternate;
  }
  @keyframes tt-glint-sweep {
    from { background-position: 120% 0; }
    to   { background-position: -20% 0; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-sanctuary .tt-container::after { content: none; }
}
/* Per-orb phase: delay tracks horizontal position (left → right sweep),
   duration varies a touch so nothing ever syncs up perfectly. */
.tometones-page .tt-board .tt-orb:nth-child(1)  { --wavedelay: -0.1s; --wavedur: 9s;   }
.tometones-page .tt-board .tt-orb:nth-child(2)  { --wavedelay: -1.0s; --wavedur: 8.6s; }
.tometones-page .tt-board .tt-orb:nth-child(3)  { --wavedelay: -1.9s; --wavedur: 9.4s; }
.tometones-page .tt-board .tt-orb:nth-child(4)  { --wavedelay: -3.0s; --wavedur: 8.8s; }
.tometones-page .tt-board .tt-orb:nth-child(5)  { --wavedelay: -4.0s; --wavedur: 9.2s; }
.tometones-page .tt-board .tt-orb:nth-child(6)  { --wavedelay: -4.8s; --wavedur: 8.5s; }
.tometones-page .tt-board .tt-orb:nth-child(7)  { --wavedelay: -0.4s; --wavedur: 9.6s; }
.tometones-page .tt-board .tt-orb:nth-child(8)  { --wavedelay: -1.5s; --wavedur: 8.7s; }
.tometones-page .tt-board .tt-orb:nth-child(9)  { --wavedelay: -2.5s; --wavedur: 9.1s; }
.tometones-page .tt-board .tt-orb:nth-child(10) { --wavedelay: -3.6s; --wavedur: 8.9s; }
.tometones-page .tt-board .tt-orb:nth-child(11) { --wavedelay: -4.6s; --wavedur: 9.3s; }
.tometones-page .tt-board .tt-orb:nth-child(12) { --wavedelay: -0.2s; --wavedur: 8.4s; }
.tometones-page .tt-board .tt-orb:nth-child(13) { --wavedelay: -1.3s; --wavedur: 9.5s; }
.tometones-page .tt-board .tt-orb:nth-child(14) { --wavedelay: -2.3s; --wavedur: 8.6s; }
.tometones-page .tt-board .tt-orb:nth-child(15) { --wavedelay: -3.4s; --wavedur: 9.2s; }
.tometones-page .tt-board .tt-orb:nth-child(16) { --wavedelay: -4.4s; --wavedur: 8.8s; }
.tometones-page .tt-board .tt-orb:nth-child(17) { --wavedelay: -1.8s; --wavedur: 9.7s; }
.tometones-page .tt-board .tt-orb:nth-child(18) { --wavedelay: -3.9s; --wavedur: 9.0s; }

/* ── Hand-drawn doodles - gold line art on the flat panels ────────── */
.tometones-page .tt-doodle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  stroke: var(--tt-gold-2);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  animation: tt-doodle-drift 9s ease-in-out infinite alternate;
}
.tometones-page .tt-doodle path,
.tometones-page .tt-doodle circle { stroke: inherit; fill: none; }
.tometones-page .tt-doodle circle { fill: var(--tt-gold-2); }
/* Panel doodle placements */
.tometones-page .tt-panel--green .tt-doodle--star1  { top: 5%;   left: 4%;   width: 34px; }
.tometones-page .tt-panel--green .tt-doodle--squig  { top: 12%;  right: 5%;  width: 92px; animation-delay: -2s; }
.tometones-page .tt-panel--green .tt-doodle--loop   { top: 26%;  left: 2.5%; width: 40px; animation-delay: -4s; }
.tometones-page .tt-panel--green .tt-doodle--arrow  { top: 52%;  right: 3%;  width: 64px; animation-delay: -1s; transform: rotate(14deg); }
.tometones-page .tt-panel--green .tt-doodle--note   { top: 74%;  left: 5%;   width: 28px; animation-delay: -3s; }
.tometones-page .tt-panel--green .tt-doodle--spark  { top: 86%;  right: 7%;  width: 24px; animation-delay: -5s; }
.tometones-page .tt-panel--deep .tt-doodle--star2   { top: 8%;   right: 5%;  width: 30px; animation-delay: -2.5s; }
.tometones-page .tt-panel--deep .tt-doodle--squig2  { top: 16%;  left: 4%;   width: 84px; animation-delay: -1.5s; }
.tometones-page .tt-panel--deep .tt-doodle--note2   { bottom: 12%; right: 6%; width: 26px; animation-delay: -4s; }
.tometones-page .tt-panel--deep .tt-doodle--arrow2  { bottom: 22%; left: 3%;  width: 58px; animation-delay: -3s; transform: rotate(-12deg); }
@keyframes tt-doodle-drift {
  from { transform: translateY(0) rotate(-1.2deg); }
  to   { transform: translateY(-6px) rotate(1.6deg); }
}

/* ── Responsive: montage tightens, doodles shrink on small screens ── */
@media (max-width: 900px) {
  .tometones-page .tt-panel--green .tt-doodle--squig,
  .tometones-page .tt-panel--deep .tt-doodle--squig2 { width: 56px; }
  .tometones-page .tt-panel--green .tt-doodle--arrow,
  .tometones-page .tt-panel--deep .tt-doodle--arrow2 { width: 42px; }
}
@media (max-width: 520px) {
  .tometones-page .tt-doodle { opacity: 0.34; }
  .tometones-page .tt-panel--green .tt-doodle--loop,
  .tometones-page .tt-panel--green .tt-doodle--note,
  .tometones-page .tt-panel--deep .tt-doodle--note2 { display: none; }
}

/* ── Reduced motion: still stickers, still marks, no drift ────────── */
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-doodle { animation: none; }
  .tometones-page .tt-mark::before { transform: rotate(-1.2deg) scaleY(0.92); }
}


/* ══════════════════════════════════════════════════════════════════════
   V4 - SUPER CHILL CHAPTERS: bold header on the background, big frame
   card holding smaller cards. Bento board + stats story carousel.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Chapter headers: huge, left-aligned on the page background ───── */
.tometones-page .tt-world__head {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f2ead9;
  text-shadow: none;
  margin: 0 0 clamp(20px, 3vw, 32px);
  text-align: left;
}/* ── The World: 1:1 superchill "The world of Super Chill" (m-grid / c-grid-cards) ──
   Source values (rem = 10px): white frame radius 2.4rem, padding 3.2rem (desktop)
   / 2.4rem 1.8rem (mobile), shadow 0 4px 16px rgba(0,0,0,.12).
   Grid areas desktop: "card1 card1 card2 card2" / "card1 card1 card3 card4",
   4 cols, gaps 2.4rem. Cards radius 2.4rem, padding 3.2rem.
   card1 pink gradient rgba(255,105,196,.05)->#ff69c4, image aspect 1/1 (mb 4rem);
   card2 orange gradient rgba(255,165,60,.5)->#ffa53c, content 50% + image 39% aspect 3/2;
   card3 blue gradient rgba(106,204,255,.5)->#6accff, padding 0, square animal video;
   card4 lime gradient rgba(218,253,25,.5)->#dafd19, centered text 2.4rem + black pill
   button (FatFrank 1.6rem, radius 1.6rem, padding 1.4/2.4rem, hover #555).
   Heading-lg: clamp(3rem,...,4.8rem) / 8rem desktop, line-height .9, uppercase. */
.tometones-page .tt-world { padding: clamp(48px, 9vw, 120px) 0; }
.tometones-page .tt-world__head {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 6.5vw, 5.4rem);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #f2ead9;
  text-shadow: none;
  margin: 0 0 clamp(18px, 3.2vw, 32px);
  text-align: left;
}
.tometones-page .tt-world__frame {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 18px;
  padding: 24px 18px;
  background: #ffffff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: none;
}
.tometones-page .tt-wcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100px;
  border-radius: 24px;
  border: 0;
  box-shadow: none;
  overflow: hidden;
  padding: 32px;
  transition: transform 0.30s var(--tt-ease), box-shadow 0.30s var(--tt-ease);
  text-decoration: none;
}
.tometones-page a.tt-wcard:hover,
.tometones-page .tt-wcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.10);
}
.tometones-page .tt-wcard__heading {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: none;
  color: #000000;
  margin: 0 0 24px;
}
.tometones-page .tt-wcard__text {
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.78);
}
.tometones-page .tt-wcard__text strong { font-weight: 800; color: #000000; }

/* card-1: big pink, image square on top (mb 4rem) then heading + text */
.tometones-page .tt-wcard--1 { background: linear-gradient(180deg, rgba(242, 166, 216, 0.05), #f2a6d8); }
.tometones-page .tt-wcard--1 .tt-wcard__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.42);
}
.tometones-page .tt-wcard--1 .tt-wcard__image img {
  width: 62%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  animation: tt-float 10s ease-in-out infinite;
}

/* card-2: orange split - content 50% left, image 39% right (aspect 3/2) */
.tometones-page .tt-wcard--2 {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(180deg, rgba(255, 165, 60, 0.5), #ffa53c), #fff;
}
.tometones-page .tt-wcard--2 .tt-wcard__content { width: 50%; }
.tometones-page .tt-wcard__image--wide {
  width: 39%;
  aspect-ratio: 3 / 2;
  border-radius: 16px;
  overflow: hidden;
}
.tometones-page .tt-wcard__image--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* card-3: blue - just the square "animal" visual, no padding */
.tometones-page .tt-wcard--3 {
  padding: 0;
  align-items: center;
  background: linear-gradient(180deg, rgba(106, 204, 255, 0.5), #6accff), #fff;
}
.tometones-page .tt-wcard__image--animal {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.tometones-page .tt-wcard__image--animal img {
  width: 58%;
  height: auto;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  animation: tt-float 11s ease-in-out infinite;
}

/* card-4: lime - centered large text + black pill button (source .c-button--black) */
.tometones-page .tt-wcard--4 {
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, rgba(212, 255, 0, 0.5), #d4ff00), #fff;
}
.tometones-page .tt-wcard__text--large {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.4;
  color: #000000;
  margin: 0;
}
.tometones-page .tt-wcard__btn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 24px 12px;
  background: #000000;
  color: #ffffff;
  border: 0;
  border-radius: 16px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}
.tometones-page .tt-wcard__btn:hover { background: #555555; color: #ffffff; }
.tometones-page .tt-wcard__btn:active { background: #000000; }

/* Desktop: source grid areas - card1 spans 2x2, card2 top right (2 cols),
   card3 + card4 bottom right */
@media (min-width: 992px) {
  .tometones-page .tt-world__frame {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "card1 card1 card2 card2"
      "card1 card1 card3 card4";
    grid-auto-rows: minmax(100px, auto);
    gap: 24px;
    padding: 32px;
    border-radius: 24px;
  }
  .tometones-page .tt-wcard--1 { grid-area: card1; }
  .tometones-page .tt-wcard--2 { grid-area: card2; }
  .tometones-page .tt-wcard--3 { grid-area: card3; }
}
@media (max-width: 520px) {

  .tometones-page .tt-world__frame { padding: 16px 14px; gap: 14px; border-radius: 16px; }

  .tometones-page .tt-wcard { padding: 22px; border-radius: 18px; }

  .tometones-page .tt-wcard--2 { flex-direction: column-reverse; align-items: stretch; }

  .tometones-page .tt-wcard--2 .tt-wcard__content { width: 100%; }

  .tometones-page .tt-wcard__image--wide { width: 100%; }

  .tometones-page .tt-statcard__media { padding: 20px 20px 22px; }

  .tometones-page .tt-statcard__copy { padding: 0 20px 48px; }

  .tometones-page .tt-statcard__btn { width: 52px; height: 52px; }

  .tometones-page .tt-statcard__btn svg { width: 26px; height: 26px; }

}/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .tometones-page .tt-wcard--1 .tt-wcard__image img,

  .tometones-page .tt-wcard__image--animal img { animation: none; }

  .tometones-page .tt-statcard.is-entering,

  .tometones-page .tt-statcard.is-leaving-next,

  .tometones-page .tt-statcard.is-leaving-prev { animation: none; }

  .tometones-page .tt-wcard:hover,

  .tometones-page .tt-statcard__btn:hover { transform: none; }

}


/* ════════════════════════════════════════════════════════════════════
   V6 HERO - 1:1 superchill m-home-hero (values from their theme CSS).
   Overrides the legacy hero blocks above (same specificity, later wins).
   Source: full-bleed gradient bg masked to fade at 75%; heading
   clamp(5rem, min(7.64vw, 11.22vh), 11rem) lh .9 uppercase with lime
   <mark> highlighters; buttons row gap 24px margin-top 50px, radius
   1.6rem, white(border 2px black, hover #f5fd91) + black(hover #555);
   phone 34rem wide, 3D tilt rotate(15deg) rotateY(-15deg); bear 37.5rem
   in front; black doodle line-art scattered. Layout: heading col 3/15,
   phone col 15/20 (rem = 10px).
   ════════════════════════════════════════════════════════════════════ */
.tometones-page .tt-hero {
  position: relative;
  min-height: 100svh;
  display: block;
  padding: calc(140px + var(--sat, 0px)) 0 clamp(70px, 10vh, 130px);
  overflow: visible;
}
/* Gradient backdrop - deep obsidian forest with golden ambient warmth */
.tometones-page .tt-hero__bg {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 60% at 50% 12%, rgba(197, 160, 89, 0.16) 0%, rgba(197, 160, 89, 0.03) 45%, transparent 75%),
    radial-gradient(ellipse 85% 70% at 15% 25%, rgba(20, 42, 28, 0.75) 0%, transparent 60%),
    radial-gradient(ellipse 85% 70% at 85% 30%, rgba(16, 36, 24, 0.7) 0%, transparent 60%),
    linear-gradient(180deg,
      rgba(10, 15, 11, 0.5) 0%,
      rgba(13, 22, 15, 0.8) 45%,
      rgba(16, 26, 18, 0.95) 85%,
      #101a12 100%);
}
/* Gold hand-drawn doodles */
.tometones-page .tt-hero__doodle {
  position: absolute;
  z-index: 0;
  stroke: var(--tt-gold-2, #d9b877);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.65;
  filter: drop-shadow(0 0 8px rgba(197, 160, 89, 0.3));
  pointer-events: none;
}
.tometones-page .tt-hero__doodle--squig { top: 6%;  left: 2%;   width: clamp(70px, 9vw, 150px); transform: rotate(-8deg); }
.tometones-page .tt-hero__doodle--curl  { top: clamp(100px, 13vh, 140px); left: 45%; width: clamp(56px, 6vw, 110px); transform: rotate(10deg); }
.tometones-page .tt-hero__doodle--loop  { top: 5%;  right: 3%;  width: clamp(70px, 8vw, 140px); transform: rotate(24deg); }
.tometones-page .tt-hero__doodle--arrow { bottom: 30%; left: 44%; width: clamp(60px, 7vw, 120px); transform: rotate(-6deg); }
@media (max-width: 991.98px) {
  .tometones-page .tt-hero__doodle--loop,
  .tometones-page .tt-hero__doodle--arrow { display: none; }
}
/* Grid */
.tometones-page .tt-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
  position: relative;
  z-index: 1;
  width: min(1290px, 92vw);
  margin-inline: auto;
}
.tometones-page .tt-hero__logo {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  display: block;
  width: clamp(380px, 46vw, 680px);
  max-width: 92vw;
  height: auto;
  margin: 0 auto clamp(-40px, -4.5vw, -18px);
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.65));
}
.tometones-page .tt-hero__inner {
  grid-column: 1 / 8;
  grid-row: 2;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(6px, 1.2vh, 16px);
  position: relative;
  z-index: 10;
}
.tometones-page .tt-hero__headline {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 4.2vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: #f2ead9;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  text-wrap: balance;
  margin: 0;
}
.tometones-page .tt-hero__headline em { font-style: normal; }
/* Warm gold highlighter block */
.tometones-page .tt-hero__mark {
  background: none;
  color: #fff8e1;
  display: inline-flex;
  position: relative;
  z-index: 1;
  padding: 0 0.08em;
  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.55),
    0 0 22px rgba(197, 160, 89, 0.35);
}
.tometones-page .tt-hero__mark::before {
  content: "";
  position: absolute;
  inset: 0.06em -0.04em 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(197, 160, 89, 0.6), rgba(197, 160, 89, 0.38) 55%, rgba(232, 197, 120, 0.45));
  border-radius: 0.08em 0.14em 0.1em 0.16em;
  transform: rotate(-0.6deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 214, 0.35),
    0 2px 12px rgba(197, 160, 89, 0.3);
}
/* Buttons row: compact vertical rhythm */
.tometones-page .tt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  column-gap: 20px;
  row-gap: 14px;
  margin-top: clamp(24px, 3vh, 36px);
  margin-bottom: 0;
  justify-content: flex-start;
}
.tometones-page .tt-hero__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tometones-page .tt-hero__doodle-doodle {
  position: absolute;
  pointer-events: none;
  stroke: var(--tt-gold-2, #d9b877);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0.65;
  filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.25));
}
.tometones-page .tt-hero__doodle-doodle--curl {
  width: clamp(90px, 11vw, 170px);
  left: calc(-50% - 4rem);
  top: -2.2rem;
  transform: rotate(-12deg);
}
.tometones-page .tt-hero__doodle-doodle--arrow {
  width: clamp(80px, 10vw, 160px);
  right: calc(-100% - 1.5rem);
  top: calc(-100% - 0.5rem);
  transform: rotate(170deg) scaleY(-1);
}
@media (max-width: 991.98px) {
  .tometones-page .tt-hero__doodle-doodle { display: none; }
}
/* Phone carousel: source col 15/20 row 1, height 100vh capped 950px,
   bottom-aligned (padding-bottom 4rem) */
.tometones-page .tt-hero__carousel {
  grid-column: 8 / 13;
  grid-row: 2;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: auto;
  max-height: 850px;
  padding-bottom: 2rem;
}
.tometones-page .tt-hero__stage {
  position: relative;
  display: grid;
}
.tometones-page .tt-hero__stage > * { grid-area: 1 / 1; place-self: center; }
/* Phone: 3D tilt like c-home-phone__inner rotate(15deg) rotateY(-15deg) */
.tometones-page .tt-hero__phone {
  position: relative;
  z-index: 2;
  width: clamp(250px, 30vw, 340px);
  margin: 0;
  border: 0;
  border-radius: 36px;
  overflow: hidden;
  background: #0c110d;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35), 0 12px 30px rgba(0, 0, 0, 0.25);
  transform: perspective(960px) rotateX(2deg) rotate(11deg) rotateY(-11deg);
  transform-origin: 0 70%;
  animation: tt-phone-bob 9s ease-in-out infinite;
}
.tometones-page .tt-hero__phone img { display: block; width: 100%; height: auto; }
@keyframes tt-phone-bob {
  0%, 100% { transform: perspective(960px) rotateX(2deg) rotate(11deg) rotateY(-11deg) translateY(0); }
  50%      { transform: perspective(960px) rotateX(2deg) rotate(11deg) rotateY(-11deg) translateY(-14px); }
}
/* Mascot illustration: source m-home-hero__illustration col 10/18 row 1,
   height 100vh max 950px, flex-end aligned, sits IN FRONT of the phone
   column (z 1 vs carousel z 0), translateY(13%) into the frame */
.tometones-page .tt-hero__illustration {
  grid-column: 6 / 11;
  grid-row: 2;
  z-index: 1;
  align-self: end;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: auto;
  max-height: 850px;
  transform: translateY(13%);
  pointer-events: none;
}
.tometones-page .tt-hero__illustration img {
  width: clamp(180px, 24vw, 375px);
  height: auto;
  border-radius: 50%;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
  animation: tt-float 10s ease-in-out infinite;
}
@media (max-width: 991.98px) {
  .tometones-page .tt-hero { padding-top: calc(110px + var(--sat, 0px)); }
  .tometones-page .tt-hero__grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tometones-page .tt-hero__inner { align-items: center; }
  .tometones-page .tt-hero__headline { font-size: clamp(2.9rem, 13.16vw, 5.2rem); text-align: center; }
  .tometones-page .tt-hero__headline .tt-hero__mark { display: inline; }
  .tometones-page .tt-hero__mark::before { transform: rotate(-1deg); }
  .tometones-page .tt-hero__actions { flex-direction: column; margin-top: 32px; }
  .tometones-page .tt-hero__carousel { height: auto; max-height: none; padding-bottom: 0; margin-top: 34px; width: 100%; }
  .tometones-page .tt-hero__stage { min-height: 0; width: 100%; }
  .tometones-page .tt-hero__phone { width: min(272px, 62vw); transform: none; animation: none; }
  .tometones-page .tt-hero__illustration { height: auto; max-height: none; transform: none; width: 130px; margin: -46px -46% 0 auto; }
  .tometones-page .tt-hero__doodle--squig { top: 3%; left: 3%; }
  .tometones-page .tt-hero__doodle--curl { top: 2.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .tometones-page .tt-hero__phone,
  .tometones-page .tt-hero__illustration img { animation: none; }
}

@media (max-width: 991.98px) {
  .tometones-page .tt-hero__headline {
    font-size: clamp(2.0rem, 7.5vw, 2.9rem);
    line-height: 1.08;
  }
  .tometones-page .tt-hero__mark { display: inline; padding: 0 0.08em; }
  .tometones-page .tt-hero__mark::before { inset: 0.08em -0.02em 0; }
  .tometones-page .tt-hero__doodle--squig { top: 88px; }
  .tometones-page .tt-hero__doodle--curl { top: clamp(90px, 11vh, 110px); }
  .tometones-page .tt-hero__illustration {
    width: 118px;
    margin: -54px 6% 0 auto;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TOME TONES - 2026-09-28 professionalism pass
   Hooks for the real app artwork now shipped from Projects/Tome Tones:
   the gold 3D wordmark (ttweb_logo.png), the 18 parchment category
   medallions (assets/icons/category/) and the 104 per-sound icons
   (assets/icons/sound/). The medallions are SQUARE 256px art with a
   torn-parchment disc drawn inside, so they must render contain +
   unrounded - object-fit:cover and a 50% clip would decapitate them.
   ════════════════════════════════════════════════════════════════════ */

/* ── Hero wordmark - centered full-width banner above the columns ─── */
.tometones-page .tt-hero__logo {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  display: block;
  width: clamp(380px, 46vw, 680px);
  max-width: 92vw;
  height: auto;
  margin: 0 auto clamp(-40px, -4.5vw, -18px);
  filter: drop-shadow(0 14px 36px rgba(0, 0, 0, 0.65));
}
@media (max-width: 991.98px) {
  .tometones-page .tt-hero__logo {
    width: min(340px, 85vw);
    margin: 0 auto clamp(-16px, -2vw, -8px);
  }
}

/* ── Parchment medallions: full art, no circular crop ─────────────── */
.tometones-page .tt-board .tt-orb__disc {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  overflow: visible;
}
.tometones-page .tt-board .tt-orb__disc img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 0 16px rgba(197, 160, 89, 0.16));
  transition: transform 0.4s var(--tt-ease), filter 0.4s var(--tt-ease);
}
.tometones-page .tt-board .tt-orb:hover .tt-orb__disc img {
  filter: drop-shadow(0 0 26px rgba(197, 160, 89, 0.42));
}
.tometones-page .tt-board .tt-orb:hover .tt-orb__disc {
  transform: translateY(-6px) scale(1.03);
  border-color: transparent;
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.55);
}
.tometones-page .tt-board .tt-orb__label {
  color: #e8dfc9;
  font-weight: 600;
  letter-spacing: 0.2em;
}

/* ── Library chips: per-sound engravings render whole, same as the board */
.tometones-page .tt-orbchip .tt-orb__disc {
  padding: 0;
  background: none;
  border: 0;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.42);
  overflow: visible;
}
.tometones-page .tt-orbchip .tt-orb__disc img {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 0 14px rgba(197, 160, 89, 0.14));
  transition: transform 0.4s var(--tt-ease), filter 0.4s var(--tt-ease);
}
.tometones-page .tt-orbchip:hover .tt-orb__disc img {
  filter: drop-shadow(0 0 24px rgba(197, 160, 89, 0.4));
  transform: translateY(-5px) scale(1.03);
}
.tometones-page .tt-orbchip__name { color: #ddd4bf; }

/* ── World cards use the same parchment art ───────────────────────── */
.tometones-page .tt-wcard__image img { object-fit: contain; }

/* ── Hero mascot: the medallion is square art, so cap it or it swamps
      the phone column (it used to be a small 3D orb in a tight frame). */
.tometones-page .tt-hero__illustration img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.tometones-page .tt-hero__illustration {
  width: clamp(96px, 9vw, 132px);
}
@media (max-width: 991.98px) {
  .tometones-page .tt-hero__illustration { width: 104px; }
}

/* ── Key podium: the featured card must never leave the viewport ──── */
.tometones-page .tt-key-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2.4vw, 36px);
  max-width: 1120px;
  margin-inline: auto;
}
.tometones-page .tt-key { width: 100%; }
.tometones-page .tt-key--featured { width: 100%; }
@media (max-width: 991.98px) {
  .tometones-page .tt-key-row {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
  }
  .tometones-page .tt-key--bronze,
  .tometones-page .tt-key--silver { margin-top: 0; }
}

/* ── Chapters / Sound Packs & Curated Collections Reel ────────────── */
.tometones-page .tt-notes {
  position: relative;
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(64px, 8vw, 100px);
  overflow: hidden;
}
.tometones-page .tt-notes__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(24px, 3.5vw, 38px);
  padding: 0 16px;
}
.tometones-page .tt-notes__head {
  margin: 0 auto clamp(10px, 1.5vw, 16px);
  text-align: center;
}
.tometones-page .tt-notes__lead {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(0.95rem, 1.35vw, 1.12rem);
  line-height: 1.6;
  color: #cdd9d1;
  margin: 0 auto;
  text-align: center;
}
.tometones-page .tt-notes__lead strong {
  color: var(--tt-gold-2, #e4c278);
  font-weight: 700;
}
.tometones-page .tt-notes__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(24px, 3vw, 36px);
  margin-bottom: 0;
}
.tometones-page .tt-notes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(197, 160, 89, 0.45);
  background: rgba(16, 26, 18, 0.9);
  color: var(--tt-gold-1, #c5a059);
  cursor: pointer;
  transition: all 0.25s var(--tt-ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  padding: 0;
}
.tometones-page .tt-notes__arrow:hover {
  background: var(--tt-gold-1, #c5a059);
  color: #0e1a12;
  border-color: var(--tt-gold-1, #c5a059);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.4);
}
.tometones-page .tt-notes__arrow:active {
  transform: translateY(0);
}
.tometones-page .tt-notes__track-container {
  position: relative;
  width: 100%;
  overflow: visible;
}
.tometones-page .tt-notes__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 22px);
  overflow-x: auto;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 20px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.tometones-page .tt-notes__track::-webkit-scrollbar {
  display: none;
}
.tometones-page .tt-notes__track.is-dragging {
  cursor: grabbing;
}
.tometones-page .tt-notes__track .tt-note {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  flex: 0 0 clamp(270px, 26vw, 340px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(18px, 2vw, 24px);
  border: 1.5px solid var(--tt-line);
  border-radius: 18px;
  background: rgba(14, 24, 16, 0.94);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: border-color 0.3s var(--tt-ease), box-shadow 0.3s var(--tt-ease);
  position: relative;
  margin: 0;
}
.tometones-page .tt-notes__track .tt-note:hover {
  border-color: rgba(197, 160, 89, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(197, 160, 89, 0.08);
}
.tometones-page .tt-note__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: var(--tt-gold-2, #d49a3d);
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tometones-page .tt-note blockquote {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  letter-spacing: -0.01em;
  text-transform: none;
  flex: 0 0 auto;
  padding: 0 0 12px 0;
  border: 0;
  border-bottom: 1px solid var(--tt-line, rgba(255, 255, 255, 0.1));
  margin: 0 0 4px 0;
}
.tometones-page .tt-note figcaption {
  font-family: "Space Grotesk", system-ui, -apple-system, sans-serif;
  color: rgba(220, 230, 222, 0.75);
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.84rem;
  margin-top: 8px;
}



/* ── Channel Deck / Field Dispatches (Rethemed Tome Tones Slider) ── */
.tometones-page .tt-statdeck {
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(64px, 9vw, 110px);
  overflow: visible;
}
.tometones-page .tt-statdeck__inner {
  max-width: 1290px;
  margin: 0 auto;
  position: relative;
}
.tometones-page .tt-statstage {
  position: relative;
  overflow: visible;
  display: block;
  margin-top: clamp(20px, 3vw, 36px);
}
.tometones-page .tt-statviewport {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(16, 28, 20, 0.96) 0%, rgba(10, 18, 13, 0.98) 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(197, 160, 89, 0.08);
  min-height: 600px;
}
@media (min-width: 992px) {
  .tometones-page .tt-statviewport {
    border-radius: 28px;
  }
}

.tometones-page .tt-statcard {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  overflow: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(32px, 4vw, 56px);
  gap: clamp(28px, 4vw, 60px);
  background: transparent;
  border: 0;
  color: #ffffff;
}

/* ── Content-visibility for offscreen sections ────────────────────── */
.tometones-page #sanctuary,
.tometones-page #library,
.tometones-page #packs,
.tometones-page #channels,
.tometones-page #tiers,
.tometones-page #cta,
.tometones-page #faq {
  content-visibility: auto;
  contain-intrinsic-size: 1px 700px;
}
@media (min-width: 992px) {
  .tometones-page .tt-statcard {
    grid-template-columns: repeat(16, minmax(0, 1fr));
  }
  .tometones-page .tt-statcard__media {
    grid-column: 1 / 9;
    padding: 0;
  }
  .tometones-page .tt-statcard__copy {
    grid-column: 9 / 17;
    padding-left: clamp(8px, 1.5vw, 24px);
    padding-right: clamp(10px, 2vw, 40px);
  }
}
@media (max-width: 991.98px) {
  .tometones-page .tt-statcard {
    grid-template-columns: minmax(0, 1fr);
    position: relative;
    inset: auto;
    padding: 24px 20px 84px;
    gap: 24px;
  }
  .tometones-page .tt-statcard__media,
  .tometones-page .tt-statcard__copy {
    grid-column: 1 / -1;
  }
  .tometones-page .tt-statviewport {
    min-height: auto;
  }
}
.tometones-page .tt-statcard[hidden] {
  display: none !important;
}

/* Slide animations matching the roadmap-slider physics */
.tometones-page .tt-statcard.is-entering {
  animation: tt-stat-in 0.45s ease-out both;
}
@keyframes tt-stat-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.tometones-page .tt-statcard.is-leaving-next {
  animation: tt-stat-out-next 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  z-index: 1;
}
.tometones-page .tt-statcard.is-leaving-prev {
  animation: tt-stat-out-prev 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  z-index: 1;
}
.tometones-page .tt-statcard.is-entering.tt-statcard--from-next {
  animation: tt-stat-in-next 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  z-index: 2;
}
.tometones-page .tt-statcard.is-entering.tt-statcard--from-prev {
  animation: tt-stat-in-prev 0.9s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  z-index: 2;
}
@keyframes tt-stat-in-next {
  from { transform: translateX(calc(100% + 32px)); }
  to { transform: translateX(0); }
}
@keyframes tt-stat-in-prev {
  from { transform: translateX(calc(-100% - 32px)); }
  to { transform: translateX(0); }
}
@keyframes tt-stat-out-next {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - 32px)); }
}
@keyframes tt-stat-out-prev {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100% + 32px)); }
}

.tometones-page .tt-statcard__media {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid rgba(197, 160, 89, 0.28);
  background: rgba(6, 14, 8, 0.65);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(197, 160, 89, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 560px;
  width: 100%;
}
.tometones-page .tt-statcard__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  border-radius: 16px;
}

.tometones-page .tt-statcard__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tometones-page .tt-statcard__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  background: rgba(197, 160, 89, 0.16) !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  color: var(--tt-gold-2, #e4c278) !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  margin-bottom: 12px;
}
.tometones-page .tt-statcard__chip::before,
.tometones-page .tt-statcard__chip::after {
  display: none !important;
  content: none !important;
}
.tometones-page .tt-statcard__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 8px 0 16px;
}
.tometones-page .tt-statcard__title em {
  font-style: normal;
  color: var(--tt-gold-1, #c5a059);
}
.tometones-page .tt-statcard__body {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(220, 230, 222, 0.85);
  max-width: 50ch;
  margin: 0 0 18px 0;
}
.tometones-page .tt-statcard__list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 50ch;
}
.tometones-page .tt-statcard__list li {
  position: relative;
  padding: 10px 14px 10px 34px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  line-height: 1.45;
  color: rgba(240, 245, 242, 0.92);
}
.tometones-page .tt-statcard__list li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 10px;
  color: var(--tt-gold-1, #c5a059);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}
.tometones-page .tt-statcard__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tt-gold-1, #c5a059);
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(197, 160, 89, 0.12);
  border: 1.5px solid rgba(197, 160, 89, 0.4);
  transition: all 0.25s ease;
}
.tometones-page .tt-statcard__link span {
  display: inline-block;
  transition: transform 0.3s ease;
}
.tometones-page .tt-statcard__link:hover {
  background: var(--tt-gold-1, #c5a059);
  color: #0e1a12;
  border-color: var(--tt-gold-1, #c5a059);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.35);
}
.tometones-page .tt-statcard__link:hover span {
  transform: translateX(6px);
}

.tometones-page .tt-statstage__nav {
  position: absolute;
  right: 28px;
  bottom: 28px;
  display: flex;
  flex-direction: row;
  gap: 12px;
  z-index: 5;
}
@media (max-width: 991.98px) {
  .tometones-page .tt-statstage__nav {
    right: 20px;
    bottom: 20px;
  }
}
.tometones-page .tt-statcard__btn {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1.5px solid rgba(197, 160, 89, 0.5);
  background: var(--tt-gold-1, #c5a059);
  color: #0e1a12;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.tometones-page .tt-statcard__btn svg {
  width: 22px;
  height: 22px;
}
.tometones-page .tt-statcard__btn:hover {
  background: #ffd056;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197, 160, 89, 0.45);
}
.tometones-page .tt-statcard__btn:active {
  transform: translateY(0);
}

/* ── Discord Banner (Forest / Gold Tome Tones theme) ───────────────── */
.tometones-page .discord-banner__card {
  background:
    linear-gradient(120deg, rgba(88, 101, 242, 0.28), rgba(28, 56, 36, 0.45) 55%, rgba(197, 160, 89, 0.08)),
    rgba(14, 26, 18, 0.85);
  border: 1px solid rgba(197, 160, 89, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.tometones-page .discord-banner__card:hover {
  border-color: rgba(197, 160, 89, 0.7);
  box-shadow: 0 18px 50px rgba(88, 101, 242, 0.2), 0 0 30px rgba(197, 160, 89, 0.2);
}
.tometones-page .discord-banner__icon {
  background: rgba(88, 101, 242, 0.2);
  border-color: rgba(197, 160, 89, 0.4);
  color: var(--tt-gold-2, #e4c278);
}
.tometones-page .discord-banner__title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.tometones-page .discord-banner__sub {
  color: #d0ded4;
}
.tometones-page .discord-banner__cta {
  background: var(--tt-gold-1, #c5a059);
  color: #0e1a12;
  font-weight: 700;
}
.tometones-page .discord-banner__card:hover .discord-banner__cta,
.tometones-page .discord-banner__card:focus-visible .discord-banner__cta {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(197, 160, 89, 0.45);
}