/* ---------------------------------------------------------------------------
   THE ATJ IDENTITY - PREVIEW, OFF BY DEFAULT (?v=2).
   ---------------------------------------------------------------------------
   Gustav, 2026-08-13: "our own identity like ofyes has its and we have ours,
   like a professional team made a website for me." Then, on the first cut:
   "include the checkmarks on each group... more proper cause now looks cheap"
   and "clean but not too clean... no glass effects or transitions, clean and
   simple and well thought out, top tier but still simple."

   THE IDENTITY: warm paper ground, ink for everything that acts, one grey
   ramp, hairline boxes at a small radius (no pills), an oversized tightly-set
   display voice, and MONOSPACE for every number and micro-label - a trading
   desk's typography, which is the one identity this product can claim that
   ofye's template cannot.

     ground   #FAFAF8  warm paper, not clinical white
     ink      #111110  text and actions
     rule     #E4E2DC  every hairline
     mono     the existing --font-mono stack, for data and labels

   NO EFFECTS, on instruction: no glass, no gradients-as-decoration, no
   entrance transitions. The quality budget goes to spacing, alignment and
   type. The deck panel stays dark - it is the page's single exhibit, and its
   green PnL numbers are the only colour on the page.

   This file now covers EVERY page (checkout included - "do full bro"): the
   accent remap plus the paper ground carries most of it, and the per-page
   sections below finish the rest. Links keep the flag via u() in render.js.

   Still a preview: loaded only with ?v=2 / data-alt. Adopted -> fold in.
   Rejected -> delete this file, the flag, u(), and V2 in checkout.js.
   --------------------------------------------------------------------------- */

/* html[data-alt], not [data-alt]: render.js injects an inline <style> that
   re-declares the theme's --accent on :root AFTER the stylesheets, so a bare
   attribute selector (equal specificity, earlier source) loses to it. The
   type selector adds the point that wins. */
/* 2026-08-15, later: "make these ... much cleaner like the checkout we just
   did ... if it should match the checkout". It does. One system across the
   site, the checkout's: white ground, #202020 ink, neutral hairlines at
   rgba(0,0,0,.12-.15), radius 8, no shadows, no glows, no inverted panels,
   Inter for numbers. The warm paper/ink/rule of the 08-13 identity and its
   mono numerals are retired below; the mono lives on only where a buyer
   transcribes (address, amount). */
html[data-alt] {
  /* WARM PASS 2026-08-16. Pure white read as cold beside ofye's cream (his
     words); the ground is now a warm off-white and cards stay white, so
     they lift a little. ONE accent, --go, a deep green tied to the profit
     green in the deck panel: ticks, badge, eyebrows, small details. Buttons
     stay ink so it does not become a template. */
  --paper: #fafaf7;
  --go: #0f7a4a;
  --go-soft: #e9f4ee;
  --ink2: #202020;
  --rule: #e3e3e3;
  /* ROUNDER, 2026-08-16 (his ask: "buttons more round, and the pnl window,
     so all core buttons and frames are more round" - ofye's cards sit at
     ~1.5rem, its buttons ~0.75rem). Buttons/inputs 0.75rem, cards 1rem,
     the deck panel 1.25rem. The checkout keeps Whop's 8px - it is its own
     tunnel and was measured. */
  --r-id: 0.75rem;
  --r-card: 1rem;
  /* Remap the base sheet's accent family to ink so every hard-wired red -
     FAQ chevrons, tier ticks, link hovers, focus tints - follows the identity
     without chasing each rule individually. */
  --accent: #202020;
  --accent-hover: #000000;
  --accent-soft: #f5f5f5;
  --accent-line: #d4d4d4;
}

/* --- Type scale: the checkout's calm, site-wide ---------------------------
   2026-08-15, his "top level clean is the goal for the full landing". What
   was still loud was the TYPE: 800-weight display headings at -0.035em next
   to a checkout that is all 600s. Whop's headings are 600, the Rabbit Hole's
   title is 400. So: h1 700 at a smaller cap, h2 600, no heading heavier than
   700 anywhere, buttons 500, and everything else already at the checkout's
   sizes. */
[data-alt] .h1 { font-weight: 700; letter-spacing: -0.03em; }
[data-alt] .h2 { font-weight: 600; letter-spacing: -0.025em; font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.375rem); line-height: 1.12; }
[data-alt] .h3 { font-weight: 600; letter-spacing: -0.01em; }
[data-alt] .btn { font-weight: 500; letter-spacing: normal; }
[data-alt] .btn-lg { padding: 0.9375rem 1.5rem; font-size: 0.9375rem; }
[data-alt] .btn-sm { padding: 0.625rem 1rem; font-size: 0.875rem; }
[data-alt] .nav-links a { font-size: 0.9375rem; font-weight: 400; color: #646464; }
[data-alt] .nav-links a:hover { background: transparent; color: var(--ink2); }
[data-alt] .lede { font-size: 1.0625rem; line-height: 1.6; }
[data-alt] .footer, [data-alt] .footer a { font-size: 0.875rem; }
[data-alt] .footer-legal { font-size: 0.8125rem; }

/* --- Ground and voice ---------------------------------------------------- */

[data-alt] body { background: var(--paper); color: var(--ink2); }
[data-alt] .hero-wrap::before { background: var(--paper); }

/* Buttons: ink, small radius, no pills. The pill was the reference's shape. */
[data-alt] .btn { border-radius: var(--r-id); }
[data-alt] .btn-primary { background: var(--ink2); color: var(--paper); }
[data-alt] .btn-primary:hover,
[data-alt] .btn-primary:active { background: #000000; }
[data-alt] .btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink2); }
[data-alt] .btn-ghost:hover { border-color: #cfcfcf; background: #f5f5f5; }
[data-alt] .btn-outline { background: transparent; border: 1px solid var(--rule); box-shadow: none; color: var(--ink2); }

/* --- Nav ----------------------------------------------------------------- */

[data-alt] .nav {
  background: rgba(250, 250, 248, 0.92);
  border-bottom: 1px solid var(--rule);
}
/* Touch devices: the base sheet already drops the blur there (it wobbled
   under position:sticky on iOS), and without the blur a 92% bar reads as
   see-through while content scrolls under it (his 2026-08-16 report). Solid
   paper on touch. */
@media (hover: none) and (pointer: coarse) {
  [data-alt] .nav { background: var(--paper); }
}
[data-alt] .nav-links a[aria-current='page'] { color: var(--ink2); }

/* The promo bar: ink here too, the code in mono. */
[data-alt] .promo-bar { background: var(--ink2); }
[data-alt] .promo-bar strong { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* --- Hero: the split - copy left, a small deck panel right ----------------
   2026-08-15, later: "the pnl window should be a lot smaller as well as on
   right side at the top like ofye's". So the base sheet's split returns (it
   never left styles.css - this identity had centred it and dropped the deck
   underneath at 44rem). Text left, panel right and capped at 26rem, both
   vertically centred; on a phone the panel stacks under the copy. */

[data-alt] .hero {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
  padding-block: 4rem 3rem;
}
@media (min-width: 1024px) {
  [data-alt] .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 4rem;
    padding-block: 5rem 4rem;
    /* The base's min-height:100vh stays: the stats strip belongs below the
       fold on desktop (his 08-08 rule). */
  }
  /* PROPOSED 2026-08-16: the hero content sits near the top of the first
     screen instead of floating in its vertical middle - the empty band
     above the headline was the one thing on the first screen that read as
     unfinished. min-height stays, so the stats still start below the fold. */
  [data-alt] .hero-wrap { justify-content: flex-start; }
}
[data-alt] .hero .eyebrow { display: none; }

/* Sized for the ofye-register headline (2026-08-15, twelve words), not the
   three-word person-led one this identity shipped with: at 5.75rem/12ch that
   line broke into FIVE rows and filled the fold with type. 3.75rem on 22ch
   is three rows at 1440, two at 1920 - big, and still a headline rather than
   a wall. */
[data-alt] .hero .h1 {
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.125rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  max-width: 17ch;
  text-wrap: balance;
}
[data-alt] .hero .lede {
  margin: 1.5rem 0 0 !important;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #646464;
  max-width: 44ch !important;
}
[data-alt] .hero-actions { margin-top: 2rem; justify-content: flex-start; }
[data-alt] .hero-tertiary { align-items: flex-start; display: flex; flex-direction: column; margin-top: 0.875rem; }
[data-alt] .hero-actions .btn-ghost svg { width: 1rem; height: 1rem; color: #229ed9; }
/* Phones: the two hero buttons stack full-width (Whop's phone layout) instead
   of wrapping into two ragged rows. */
@media (max-width: 560px) {
  [data-alt] .hero-actions { flex-direction: column; align-items: stretch; }
  [data-alt] .hero-actions .btn { width: 100%; justify-content: center; }
}

/* The deck panel: small, top-right, flat near-black - no navy, no glow, no
   shadow, radius 8 like everything else now. */
/* The deck panel - THE OLD ONE, CLEANED (his call, 2026-08-15 late: "old one
   but cleaner updated"): the dark panel with the deck - neighbours peeking
   either side, blurred back for depth, sliding as it advances - which is the
   motion he liked ("like an item in a game"). Cleaned = flat near-black
   instead of navy + glow, radius 8, no drop shadow, the asset-name selector
   instead of anonymous dots, the reference's "Shared from Telegram" caption.
   The white-card version lived for two hours; he asked for this back. */
[data-alt] .hero > .showcase {
  width: 100%;
  max-width: 28rem;
  justify-self: end;
  margin-top: 0;
  padding: 1.25rem;
  border: 0;
  border-radius: 1.25rem;
  box-shadow: none;
  background: linear-gradient(180deg, #171717 0%, #0d0d0d 100%);
  color: #fff;
}
@media (max-width: 1023px) {
  [data-alt] .hero > .showcase { justify-self: center; max-width: 28rem; }
}
[data-alt] .showcase-head { display: flex; padding: 0 0 1rem; }
[data-alt] .stack { animation: none; }
[data-alt] .stack img { border-radius: 0.375rem; box-shadow: none; }
/* Neighbours back: base opacity .22 + blur + the side offsets. */
[data-alt] .showcase-foot {
  margin-top: 0.75rem;
  padding: 0.75rem 0.25rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
[data-alt] .showcase-source { color: rgba(255, 255, 255, 0.62); font-weight: 400; font-size: 0.8125rem; }
[data-alt] .showcase-source svg { color: rgba(255, 255, 255, 0.62); }
/* The selector on dark: asset names, active white on a translucent pill. */
[data-alt] .rotator { padding-bottom: 0; }
[data-alt] .rot-dots {
  position: static;
  transform: none;
  margin: 0.625rem auto 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  width: fit-content;
}
[data-alt] .rot-tabs { gap: 0.125rem; flex-wrap: wrap; justify-content: center; }
[data-alt] .rot-tabs button {
  width: auto;
  height: 1.625rem;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  font-family: inherit;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.15s ease, background-color 0.15s ease;
}
/* Phones: one swipeable row instead of seven labels and a lone eighth on a
   second line (seen at 390px). Scrollbar hidden; the cut-off last label is
   the affordance. */
@media (max-width: 480px) {
  [data-alt] .rot-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  [data-alt] .rot-tabs::-webkit-scrollbar { display: none; }
  [data-alt] .rot-tabs button { flex: none; padding: 0 0.4375rem; }
}
[data-alt] .rot-tabs button::before { display: none; }
[data-alt] .rot-tabs button:hover { color: #fff; }
[data-alt] .rot-tabs button.active { color: #fff; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 1023px) {
  [data-alt] .hero > .showcase { justify-self: center; max-width: 28rem; }
}
/* In a 26rem panel the blurred side-neighbours of the deck poke past the
   card and read as rendering faults ("+1" fragments off the edge), so only
   the active card shows here; the crossfade between cards stays. The float
   loop is off too - a small panel that bobs is the one moving thing on a page
   whose motion policy is "hover changes tone, not position". */
[data-alt] .stack { animation: none; }
/* Neighbours VISIBLE again (his "old one but cleaner"): the base's .22
   opacity + blur + side offsets stand - the deck's depth is the point of the
   old panel. Only the float loop stays off. */

/* --- Stats: a mono data ticker framed by two rules ------------------------ */

/* On a white rounded card (his 2026-08-16 ask, "like ofye's"), the same
   card language as the tiers and the inside section. */
[data-alt] .stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 4.5rem;
  row-gap: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: none;
  padding: 2rem 1.5rem;
}
/* Stacked, number over label, at the checkout's price proportions - "the
   stats text are too small" (Gustav, 2026-08-15) about the inline ticker. */
[data-alt] .stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  border: 0 !important;
  /* The base draws the cell dividers as inset box-shadows, not borders -
     which is why border:0 left a hairline standing next to each number
     (Gustav: "weird vertical line next to the numbers"). */
  box-shadow: none !important;
  padding: 0;
  text-align: center;
  min-width: 9rem;
}
[data-alt] .stat .v {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
}
/* Phones: a 2x2 grid (his 2026-08-16 ask), not four rows - the flex wrap
   put one stat per row once two 9rem cells plus the 4.5rem gap outgrew 390px. */
@media (max-width: 779px) {
  [data-alt] .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 1.75rem;
    justify-items: center;
  }
  [data-alt] .stat { min-width: 0; }
}
/* The strip's entrance slowed with the count (base is .85s). */
/* The strip's fade-and-rise, slowed again (his "make the fade slower", 2026-08-16). */
[data-alt] .stats-run { animation-duration: 2.4s; }
[data-alt] .stat .l {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #646464;
  margin-top: 0;
}

/* --- Phone menu ------------------------------------------------------------
   Hamburger <-> X, HyperDiscipline's HamburgerIcon exactly: DUR 400ms,
   EASE cubic-bezier(.4,0,.2,1), whole glyph rotates 90deg while bar 1
   goes translateY(4px) rotate(45deg), bar 3 translateY(-4px) rotate(-45deg),
   bar 2 fades in half the time. transform-box: fill-box so each bar turns
   about its own centre. Sheet: full-screen, solid, links centred. */
[data-alt] .nav-burger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--ink2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 879px) {
  [data-alt] .nav-burger { display: inline-flex; }
}
[data-alt] .nav-burger svg {
  transform-origin: center;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-alt] .nav-burger svg path {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-alt] .nav-burger[aria-expanded='true'] svg { transform: rotate(90deg); }
[data-alt] .nav-burger[aria-expanded='true'] .b1 { transform: translateY(4px) rotate(45deg); }
[data-alt] .nav-burger[aria-expanded='true'] .b2 { opacity: 0; }
[data-alt] .nav-burger[aria-expanded='true'] .b3 { transform: translateY(-4px) rotate(-45deg); }
[data-alt] .mobile-menu {
  position: fixed;
  inset: 0;
  top: var(--nav-h, 4.5rem);
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-alt] .mobile-menu[hidden] { display: none; }
[data-alt] .mobile-menu.is-open { opacity: 1; }
[data-alt] .mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-bottom: 4rem;
}
[data-alt] .mobile-menu-links a {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink2);
  text-decoration: none;
}
[data-alt] .mobile-menu-links .mobile-menu-login { color: #646464; }
html[data-alt].menu-open, html.menu-open body { overflow: hidden; }

/* --- Section heads: centred, mono eyebrow -------------------------------- */

[data-alt] .section-head,
[data-alt] .section-head.split {
  display: block;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 3rem;
}
[data-alt] .section-head .eyebrow {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Quiet grey (his 2026-08-16 read: green on every label "feels a bit
     cheap"); the accent stays on the ticks and the badge only. */
  color: #646464;
  background: none;
  border: 0;
  padding: 0;
}
[data-alt] .section-head .h2 { letter-spacing: -0.035em; }
[data-alt] .section-head .lede { margin: 1rem auto 0; max-width: 46ch; }

/* --- Tiers: three columns, the featured one is INK ------------------------
   The first cut ran a single 26.5rem stack; on a 1440 screen that was one
   skinny column adrift in paper - his verdict was "cheap". Three equal
   columns fill the width and read as a priced product family; the identity
   lives in the cards' anatomy, not in the grid being unusual. */

[data-alt] .tier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  max-width: 28rem;
  margin-inline: auto;
}
@media (min-width: 980px) {
  [data-alt] .tier-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

[data-alt] .tier {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: none;
  transform: none;
  padding: 1.5rem 1.25rem 1.25rem;
  color: var(--ink2);
}
[data-alt] .tier-head {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
[data-alt] .tier-head .tier-label { white-space: nowrap; }

/* The chosen tier is the checkout's SELECTED treatment - a 2px near-black
   edge on a white card and a solid badge - not an inverted black block. The
   inverted card was the one big black slab on a page he wants black-and-
   white SIMPLE, and it is what the reference's featured tier is not. */
[data-alt] .tier.featured {
  background: #fff;
  border-color: var(--ink2);
  box-shadow: 0 0 0 1px var(--ink2);
  color: var(--ink2);
}
[data-alt] .tier.featured .tier-badge {
  background: var(--go);
  border-color: var(--go);
  color: #fff;
}

[data-alt] .tier-label {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: #646464;
}
[data-alt] .tier-badge {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--ink2);
  letter-spacing: normal;
  text-transform: none;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
}
[data-alt] .tier-name { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }
[data-alt] .tier-blurb { font-size: 0.875rem; line-height: 1.5; color: #646464; }
/* The price in the checkout's own type: Inter 36/600 tabular, "one-time" as
   a plain subdued word beside it. */
[data-alt] .tier-price .amt {
  font-family: inherit;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink2);
}
[data-alt] .tier-price .per {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #646464;
}
[data-alt] .tier .btn-primary {
  border-radius: var(--r-id);
  min-height: 2.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: var(--ink2);
  color: #fff;
}
[data-alt] .tier .btn-primary:hover { background: #000; }
[data-alt] .tier-legal { font-size: 0.75rem; color: #838383; }
[data-alt] .tier-legal a { color: #646464; }

/* Includes: the ticks are BACK on his instruction ("include the checkmarks
   on each group"), in ink not red - the base rule colours them var(--accent),
   which the remap already turned ink. A hairline above the list separates
   price from contents, which is the detail that makes the card read designed
   rather than stacked. */
[data-alt] .tier-includes {
  /* No rule between price and list (his 2026-08-16 ask); the gap does it. */
  border-top: 0;
  margin-top: 1.375rem;
  padding-top: 0;
  font-size: 0.875rem;
  color: var(--ink2);
}
[data-alt] .tier-includes li { gap: 0.625rem; }
/* Plain drawn checks (Lucide), 16px, ink - not the filled accent discs. */
[data-alt] .tier-includes svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  margin-top: 0.125rem;
  color: var(--go);
}
/* Inside-the-group cards: white on the paper, hairline, radius 8. */
[data-alt] .inside .section-head { margin-bottom: 2rem; }
[data-alt] .inside-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto;
}
@media (max-width: 879px) { [data-alt] .inside-grid { grid-template-columns: 1fr; max-width: 32rem; } }
[data-alt] .inside-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-card);
  padding: 1.375rem 1.375rem 1.5rem;
}
[data-alt] .inside-card h3 { font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 0.5rem; }
[data-alt] .inside-card p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #646464; }
/* First-person line under the hero, when set. */
[data-alt] .hero-founder { margin: 1.5rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink2); max-width: 30rem; }
[data-alt] .hero-founder span { color: #646464; }
[data-alt] .hero-founder span { margin-left: 0.5em; }
/* About page labels take the same accent. */
[data-alt] .about-eyebrow, [data-alt] .about-label { color: #646464; font-weight: 500; }

/* --- FAQ: rules on paper, rabbithole's shape ------------------------------
   Gustav 2026-08-15: 0xrabbithole.com is "that black and white simple we
   want ... some effect like clean transitions when click faq". Measured off
   their page: a 400px list of hairline rows (#f0f0f0), question 13px/500,
   16px of padding, a "+" at the right that becomes "−" and darkens, and the
   answer easing open on max-height over 0.4s cubic-bezier(0.16,1,0.3,1).
   Ours keeps their SHAPE and MOTION at this site's type floor (their 12-13px
   is below it): a 40rem list, 15px/500 questions, 14px answers, hairlines,
   the +/− drawn as two bars so the vertical one can rotate away, and the
   easing done in public/faq.js on the answer's real height. */

[data-alt] .faq { max-width: 40rem; margin-inline: auto; gap: 0; }
[data-alt] .faq details {
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: none;
}
[data-alt] .faq details:first-of-type { border-top: 1px solid var(--rule); }
[data-alt] .faq details:hover, [data-alt] .faq details[open] { border-color: var(--rule); }
/* faq.js animates the answer itself; the Chromium-only ::details-content
   height animation in styles.css would run a second one underneath it, so
   the transition goes - ONLY the transition. The slot's heights (0 closed,
   auto open) stay the base's. PROBE GOTCHA: a closed item's .answer still
   reports its old getBoundingClientRect height (the slot is content-
   visibility:hidden, so the box is skipped, not zeroed) - checkVisibility()
   or a screenshot is the honest check, not the rect. */
[data-alt] .faq details::details-content { transition: none; }
[data-alt] .faq summary {
  position: relative;
  padding: 1.125rem 2rem 1.125rem 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink2);
  line-height: 1.4;
}
/* The + : two 1.5px bars, 11px, sitting at the right edge. Open = the
   vertical bar rotates onto the horizontal one and the pair darkens - the
   reference's "+" to "−", animated instead of swapped. */
[data-alt] .faq summary::before,
[data-alt] .faq summary::after {
  content: '';
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 11px;
  height: 1.5px;
  margin-top: -0.75px;
  background: #a3a3a3;
  border: 0;
  transform: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}
/* The + SPINS into an x on open (2026-08-15, his ask: "a spin or something
   smooth"): both bars turn 135deg together about the same centre, so it
   reads as one glyph rotating, on the answer's own easing. The earlier
   "vertical bar folds onto the horizontal one" read as a glitch to him.
   Both open transforms are stated explicitly - the base sheet rotates its
   chevron -135deg on open at (0,2,2) and would otherwise win. */
[data-alt] .faq summary::before { transform: rotate(90deg); }
[data-alt] .faq summary::after { transform: rotate(0deg); }
[data-alt] .faq details[open] summary::before { transform: rotate(225deg); background: var(--ink2); }
[data-alt] .faq details[open] summary::after { transform: rotate(135deg); background: var(--ink2); }
[data-alt] .faq summary:hover::before,
[data-alt] .faq summary:hover::after { background: var(--ink2); }
[data-alt] .faq .answer {
  padding: 0 2rem 1.25rem 0;
  max-width: 60ch;
  font-size: 0.875rem;
  line-height: 1.7;
  color: #646464;
}
/* The head: the reference's tiny tracked QUESTIONS label. Still the h2. */
[data-alt] .faq-head { margin-bottom: 1.5rem; }
[data-alt] .faq-title {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #646464;
  line-height: 1;
}

/* --- CTA band and footer -------------------------------------------------- */

[data-alt] .cta-band { background: var(--ink2); border-radius: var(--r-card); }
[data-alt] .cta-btn { background: var(--paper); color: var(--ink2); }

[data-alt] .footer { background: transparent; border-top: 1px solid var(--rule); }
/* Neutral greys everywhere the base sheet still paints slate-blue text: the
   section ledes, the line under the Telegram button, the footer. One grey
   family, the checkout's. */
[data-alt] .lede,
[data-alt] .section-head .lede,
[data-alt] .hero-tertiary .small,
[data-alt] .footer,
[data-alt] .footer .small,
[data-alt] .footer .muted,
[data-alt] .footer-legal { color: #646464; }
[data-alt] .footer-links a { color: #646464; }
[data-alt] .footer-links a:hover { color: var(--ink2); }
[data-alt] .section-head .h2 { text-wrap: balance; }
/* The one line about a live code, under the tier intro: same lede type, ink,
   a touch of weight - it is the only place the landing says the deal now. */
[data-alt] .tiers-promo { margin-top: 0.75rem !important; color: var(--ink2); font-weight: 500; }
[data-alt] .footer-links a:hover { color: var(--ink2); }

/* --- Checkout ------------------------------------------------------------
   The Shopify anatomy stays exactly as it is - it is conventions, not ofye.
   Identity here = paper ground, warm hairlines, ink actions (via the accent
   remap), small radii on inputs, mono money. */

[data-alt] .co-nav { background: var(--paper); border-bottom: 1px solid var(--rule); }
[data-alt] .input { border-radius: var(--r-id); }
[data-alt] .input:not([aria-invalid='true']) { border-color: #d4d4d4; }
@media (min-width: 940px) {
  [data-alt] .co-side { border-left-color: var(--rule); }
}
/* Money and order references are data; data is mono on this identity. */
[data-alt] .sum-line .price,
[data-alt] .sum-total,
[data-alt] .summary-head-total,
[data-alt] .pay-total,
[data-alt] .pay-done-ref {
  font-family: var(--font-mono);
  letter-spacing: 0;
}

/* --- Login / account ------------------------------------------------------ */

/* Same ground and greys as every other page (2026-08-16): the base sheet
   sat the login on the old cool slate-50 wash with slate-500 helper text. */
[data-alt] .auth-wrap {
  background: #fff;
}
[data-alt] .auth-card {
  background: #fff;
  border-color: var(--rule);
  border-radius: var(--r-card);
  box-shadow: none;
}
[data-alt] .auth-card .hint,
[data-alt] .auth-below {
  color: #646464;
}
[data-alt] .auth-below a {
  color: var(--ink2);
}
[data-alt] .acct-order {
  background: #fff;
  border-color: var(--rule);
  box-shadow: none;
}

/* --- Legal / about / members ---------------------------------------------
   Mostly type on paper already. The warm rule replaces the cool slate
   hairline on the pieces a reader actually sees framed. */

[data-alt] .legal-masthead,
[data-alt] .masthead { border-color: var(--rule); }
/* The two other dark panels (members board, the how-it-works band) take the
   same flat near-black as the hero deck: no navy, no accent glow, radius 8,
   no shadow. The members board's structure is untouched - only its paint. */
[data-alt] .lock-panel,
[data-alt] .band {
  background: linear-gradient(180deg, #171717 0%, #0d0d0d 100%);
  box-shadow: none;
  border-radius: var(--r-card);
}
/* About + Members in the same language (his ask, 2026-08-15): the prose
   column centred like the FAQ's (the base flush-left rule was written for a
   page whose other blocks were left-aligned; here everything else centres),
   neutral greys and hairlines instead of the base slate-blue, and the
   members board's green ENFORCED chip made neutral - one status colour on
   a black-and-white site was the last accent left. */
[data-alt] .checkout.flush { margin-inline: auto; }
[data-alt] .checkout.flush + .cta-band { margin-inline: auto; max-width: 40rem; }

/* --- About: ofye's shape (2026-08-16), our facts ----------------------------
   Eyebrow + h1 + one paragraph; one wide white card of short lines; three
   cards each with an eyebrow and one sentence; a dark rounded block with an
   h2, a line and the levels button. The what-it-is-not / custody lists went
   to where they belong (Terms, llms.txt) - his call: "that info is for terms
   not about page". */
[data-alt] .about2 { max-width: 44rem; margin: 0 auto; padding: 3.5rem 0 4rem; }
[data-alt] .about2-eyebrow { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #646464; margin: 0 0 1rem; }
[data-alt] .about2 h1 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; margin: 0; text-wrap: balance; }
[data-alt] .about2-lede { margin: 1.125rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: #646464; max-width: 60ch; }
[data-alt] .about2-card { margin-top: 2rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: var(--r-card); padding: 1.5rem 1.5rem 1.625rem; }
[data-alt] .about2-card .about2-eyebrow { margin-bottom: 0.875rem; }
[data-alt] .about2-card p { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--ink2); }
[data-alt] .about2-card p + p { margin-top: 0.75rem; }
[data-alt] .about2-card p.about2-eyebrow { color: #646464; }
[data-alt] .about2-card p.about2-eyebrow + p { margin-top: 0; }
[data-alt] .about2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
@media (max-width: 879px) { [data-alt] .about2-grid { grid-template-columns: 1fr; } }
[data-alt] .about2-grid .about2-card { margin-top: 0; }
[data-alt] .about2-dark { margin-top: 1rem; background: var(--ink2); color: #fff; border-radius: var(--r-card); padding: 1.75rem 1.5rem 1.625rem; }
[data-alt] .about2-dark .about2-eyebrow { color: rgba(255, 255, 255, 0.72); }
[data-alt] .about2-dark h2 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
[data-alt] .about2-dark p { margin: 0.875rem 0 0; font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
[data-alt] .about2-dark .btn { margin-top: 1.375rem; background: #fff; color: var(--ink2); border-color: #fff; }
[data-alt] .about2-dark .btn:hover { background: #f2f2f2; }

/* --- About (previous shape, kept for /members which shares .about-group) --- */
[data-alt] .about { padding-top: 3.5rem; }
[data-alt] .about-eyebrow {
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #646464;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 1rem;
}
[data-alt] .about-title {
  font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
[data-alt] .about-lede { margin-top: 1.125rem !important; font-size: 1.0625rem; line-height: 1.6; color: #646464; max-width: 60ch; }
[data-alt] .about-label {
  margin: 2.75rem 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #646464;
}
[data-alt] .about-note { margin: 0 0 0.75rem; font-size: 0.875rem; line-height: 1.55; color: #646464; }
[data-alt] .about-note a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; }
[data-alt] .about-contact { margin-top: 2.5rem; }
[data-alt] .about-group {
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-card);
  background: #fff;
  overflow: hidden;
}
[data-alt] .about-row {
  padding: 1rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
}
[data-alt] .about-row:first-child { border-top: 0; }
[data-alt] .about-row h3 { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 0.25rem; color: var(--ink2); }
[data-alt] .about-row p { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #646464; }
[data-alt] .about-row-plain p { color: var(--ink2); }
/* Who runs it: key/value rows, the checkout's details-list shape. */
[data-alt] .about-facts { display: block; margin: 0; }
[data-alt] .about-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.9375rem;
}
[data-alt] .about-fact:first-child { border-top: 0; }
[data-alt] .about-fact dt { margin: 0; color: #646464; white-space: nowrap; }
[data-alt] .about-fact dd { margin: 0; color: var(--ink2); font-weight: 500; text-align: right; overflow-wrap: anywhere; }
[data-alt] .about-fact dd a { color: var(--ink2); text-decoration: underline; text-underline-offset: 2px; }
[data-alt] .about-fact-sub { color: #646464; font-weight: 400; }
/* What it is not: a plain list, not a fourth box. */
[data-alt] .about-list { margin: 0; padding: 0 0 0 1.125rem; list-style: disc; color: var(--ink2); font-size: 0.9375rem; line-height: 1.6; }
[data-alt] .about-list li + li { margin-top: 0.5rem; }
[data-alt] .about-row-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.375rem;
  color: var(--ink2);
  text-decoration: none;
  transition: background-color 0.12s ease;
}
[data-alt] .about-row-link:hover { background: #fafafa; }
[data-alt] .about-row-name { font-size: 0.9375rem; font-weight: 600; }
[data-alt] .about-row-value { margin-left: auto; font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
[data-alt] .about-row-sub { font-weight: 400; color: #646464; font-size: 0.8125rem; }
[data-alt] .about-row-link svg { width: 0.75rem; height: 0.75rem; color: #8f8f8f; flex: none; }

/* --- Members: the board as a white group card -------------------------------
   Same structure (the hard rule on this page: never regress the layout he
   picked), repainted as the checkout's payment group: white, hairline,
   radius 8, icon tiles on #f5f5f5, outlined neutral chips. */
[data-alt] .lock-panel {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--r-card);
  box-shadow: none;
  color: var(--ink2);
  padding: 0;
}
[data-alt] .lock-panel-head { padding: 1.125rem 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.12); }
[data-alt] .lock-panel-label { color: #646464; font-family: inherit; font-size: 0.75rem; letter-spacing: 0.08em; }
[data-alt] .lock-panel-title { color: var(--ink2); font-size: 1rem; font-weight: 600; letter-spacing: -0.005em; }
[data-alt] .lock-panel-badge { background: #f5f5f5; color: var(--ink2); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none; }
[data-alt] .lock-rows { padding: 0 1.25rem; }
[data-alt] .lock-row { border-bottom-color: rgba(0, 0, 0, 0.12); padding-block: 1rem; }
[data-alt] .lock-row:last-child { padding-bottom: 1.125rem; }
[data-alt] .lock-row-icon { background: #f5f5f5; color: var(--ink2); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: none; }
[data-alt] .lock-row-body h3 { color: var(--ink2); font-weight: 600; }
[data-alt] .lock-row-body p { color: #646464; }
[data-alt] .lock-row-status {
  color: #646464;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  border-radius: 0.375rem;
  letter-spacing: 0.06em;
  font-weight: 600;
}
[data-alt] .lock-row-status.is-on {
  color: #fff;
  background: var(--ink2);
  box-shadow: none;
}
[data-alt] .lock-copy .h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.12; }
[data-alt] .build-item { border-top-color: rgba(0, 0, 0, 0.12); }
[data-alt] .build-item p,
[data-alt] .pillar p,
[data-alt] .fact-row dt,
[data-alt] .plain-list li,
[data-alt] .muted,
[data-alt] .small.muted { color: #646464; }
[data-alt] .fact-row { border-color: rgba(0, 0, 0, 0.12); }
[data-alt] .fact-row dd { color: var(--ink2); }
[data-alt] .plain-list li::marker,
[data-alt] .plain-list li::before { color: #a3a3a3; }
[data-alt] .divider { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.12); }
/* (chip rules for the old dark board removed - the board is a white card
   now; see the Members block further down.) */