/* ══════════════════════════════════════════════════════════════════════════════════════
   SOCIAL CHEAT CODES - landing prototype. Cards only since 2026-10-02.

   Written against the `site/` half of .impeccable.md. The five principles, applied:

   1. THE PAGE IS A LIT STAGE. Mostly lit rooms (cream paper), with exactly ONE unlit room -
      the pricing block - because that is the moment that has to stop the thumb. The rhythm
      of light is the layout; it is not decoration.
   2. ONE LIGHT SOURCE, PAGE-WIDE. Every raised surface casts the SAME hard, un-blurred
      shadow in the SAME direction (--cast). There is one lamp in the building, so there is
      never a soft drop shadow and never a second shadow angle.
   3. ONE RED, AND IT MEANS "ACT". Buttons, the sample flag, the price. Nothing decorative
      is red. Red text on paper uses --red-deep, which passes AA at body size; the bright one
      does not.
   4. SHOW THE THING. The artefact styles (.artefact, .hero-shot) exist so a real card and a
      real book page are the largest objects on the page.
   5. NEVER INVENT PROOF. There is no testimonial, rating, counter or countdown component in
      this file, deliberately - so none can be dropped in without writing CSS for it.

   Mobile-first: every rule is the phone layout. The two media queries only widen it. The
   reader is one-thumbed, at night, ninety seconds after a reel.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root {
  /* Neutrals are tinted toward the brand's warm paper, never pure white or black. */
  /* GREIGE (owner, 2026-10-03, after three rounds): grey with a beige breath, like old paper.
     #e6e0da / #dad3cb. Pink was tried and rejected as wrong for the niche. Only the PAGE is
     greige; --card stays the cards' own cream, so cards, slips and the buy panel sit ON it. */
  --paper:    oklch(0.91 0.01 70);
  --paper-2:  oklch(0.87 0.014 70);
  --card:     oklch(0.982 0.006 84);
  --ink:      oklch(0.19 0.012 62);
  --ink-dim:  oklch(0.46 0.014 62);
  --ink-faint:oklch(0.72 0.012 62);
  /* The unlit room. Same warm hue, taken to near-black - not a neutral grey. */
  --stage:    oklch(0.175 0.015 62);
  --stage-2:  oklch(0.245 0.016 62);
  --stage-txt:oklch(0.955 0.008 84);
  --stage-dim:oklch(0.74 0.012 84);
  /* The toonnoir red. --red fills; --red-deep carries red TEXT on paper. */
  --red:      oklch(0.552 0.212 27);
  --red-deep: oklch(0.468 0.183 27);
  --red-lit:  oklch(0.70 0.185 27);   /* red text on the unlit room */
  /* The guarantee's green: "safe". Used ONLY by the refund stamp. --ok passes AA on --ok-tint. */
  --ok:       oklch(0.47 0.12 152);
  --ok-tint:  oklch(0.95 0.035 152);

  /* The hard shadow and the button's text colour are tokens so a theme can change them. */
  --shadow:  oklch(0.19 0.012 62);
  --on-act:  oklch(0.99 0 0);
  --cast:    5px 6px 0 var(--shadow);
  --cast-lg: 8px 10px 0 var(--shadow);

  --hand: "Shantell Sans", "Comic Sans MS", cursive;
  --body: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* 4pt scale, semantic names. */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;

  /* A 5-step scale at ~1.3, fluid on headings only. */
  --t-hero: clamp(2.5rem, 1.5rem + 4.6vw, 4.4rem);
  --t-h2:   clamp(1.75rem, 1.28rem + 2.1vw, 2.7rem);
  --t-h3:   1.15rem;
  --t-lede: clamp(1.08rem, 1.02rem + 0.4vw, 1.3rem);

  --edge: clamp(18px, 5.5vw, 56px);
  --hold: 1040px;
  /* ONE left edge for the whole page. Centring each child with margin-inline:auto broke the
     moment a child set its own `margin` shorthand (.picks, .rows, .deck, .spec, .artefact),
     which pulled that block back to the band's padding while its heading stayed centred -
     the heading and the cards under it started 64px apart on desktop. Padding the band
     instead means no child can opt out of the edge. */
  --gutter: max(var(--edge), calc((100% - var(--hold)) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--hand); font-weight: 800; margin: 0; line-height: 1.04; text-wrap: balance; }
h1 { font-size: var(--t-hero); text-transform: uppercase; letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 700; }
p  { margin: 0 0 0.85em; }
img { max-width: 100%; height: auto; display: block; }
a  { color: var(--red-deep); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Body copy never runs past a comfortable measure, whatever the container does. */
.lede, .band > p, .note { max-width: 68ch; }

/* ── the DRAFT flag. An unapproved value must never look finished - so it is always marked -
   but a pencil note, not a red badge: solid red flags were fighting the headline and the
   button for the one red on the page (owner, 2026-10-03: "noise"). The dark PROTOTYPE bar is
   the loud guard against publishing by accident. ── */
.draft {
  display: inline-block;
  font: 700 0.6rem/1 var(--body);
  letter-spacing: 0.09em; text-transform: uppercase;
  border: 1.5px dashed var(--ink-faint); color: var(--ink-dim);
  padding: 2px 5px; border-radius: 3px;
  vertical-align: middle; white-space: nowrap; margin-left: 0.35em;
}
sup.draft { top: 0; position: relative; }

/* ────────────────────────────────────────────────────────────────────────────── hero */
/* ONE SCREEN (owner, 2026-10-02): headline, the seven cards, the button - all inside a
   375x812 phone with no scroll. Every height below was cut to make that true; adding a line
   to the hero means taking one out. */
.hero {
  padding: clamp(20px, 5vw, 64px) var(--gutter) clamp(24px, 5vw, 64px);
  display: grid; gap: var(--space-md);
}
/* Heroic weight: Shantell tops out at 800, so a stroke of its own colour drawn UNDER the fill
   (paint-order) thickens every letter without blurring it - closer to the heavy marker
   lettering on the cards' own titles. */
.hero h1 {
  font-size: clamp(2.75rem, 1.6rem + 5.2vw, 5.4rem); line-height: 0.95; letter-spacing: -0.015em;
  -webkit-text-stroke: 0.045em currentColor; paint-order: stroke fill;
}
.hero h1 em { font-style: normal; color: var(--red-deep); display: block; }   /* the move, as on the cards */

/* Brand mark (owner, 2026-10-03: a brain, not the "P" tile): the hand-drawn brain cut from
   the Mindset card's own art (img/brain.png), so the logo is drawn by the same pen as the
   product. + the name in the hand that draws the figures. */
.mark {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--space-sm);
  font: 800 1.05rem/1 var(--hand); letter-spacing: 0.01em;
}
.mark-icon { width: 36px; height: auto; }

/* Paper grain over the whole page: fixed and pointer-events:none so it never repaints on
   scroll. Multiply keeps it in the paper, not on top of the ink. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lede { font-size: var(--t-lede); color: var(--ink-dim); margin: 0.35em 0 0; }
/* The headline group is centred: it is the poster, everything else hangs under it. */
.hero-copy { text-align: center; }
.hero .lede {
  color: var(--ink); margin: 0.45em auto 0; max-width: 30ch;
  font: 800 clamp(1.4rem, 1.2rem + 1vw, 1.9rem)/1.2 var(--hand);
  text-wrap: balance;   /* never "life." alone on a line */
}
/* The guarantee seal (owner, 2026-10-03: "green, something positive, more trustworthy").
   Green appears NOWHERE else on the page - it means "safe", the way red means "act". Double
   rule like a stamp, a check, set straight. */
.seal { margin: 14px 0 0; }   /* holds the stamp + (prototype only) its DRAFT flag outside it */
.stamp {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; white-space: nowrap;
  color: var(--ok); background: var(--ok-tint);
  border: 2.5px solid var(--ok); outline: 1.5px solid var(--ok); outline-offset: 3px;
  font: 800 0.72rem/1.2 var(--body); letter-spacing: 0.05em; text-transform: uppercase;
}
.stamp::before {
  content: "\2713"; display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  background: var(--ok); color: var(--on-act); border-radius: 50%;
  font: 900 0.8rem/1 var(--body); letter-spacing: 0;
}
.seal .draft { margin-left: 0.6em; }
.nowrap { white-space: nowrap; }   /* "7-day" must never split at its hyphen */
.hero-buy { display: grid; gap: 8px; max-width: 460px; }
.hero-buy .btn { text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────── buttons */
.btn {
  display: inline-block;
  min-height: 52px; padding: 14px 26px;
  background: var(--red); color: var(--on-act);
  font: 800 1.05rem/1.55 var(--body);
  text-decoration: none;
  border: 2.5px solid var(--ink);
  box-shadow: var(--cast);
}
.btn.big { font-size: 1.3rem; min-height: 64px; padding: 16px 32px; }
/* Label | price, one lettering. The cream tilted price tag was tried and read as odd (owner,
   2026-10-03): the price now sits in the button's own white hand, after a thin divider. */
.btn:has(.btn-price) { display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.btn-label { font: 800 1.12em/1.1 var(--hand); letter-spacing: 0.01em; }
.btn-price {
  font: 800 1.12em/1.1 var(--hand); color: var(--on-act);
  padding-left: 14px; border-left: 2px solid oklch(0.99 0 0 / 0.55);
}
.btn.big { padding: 14px 12px; white-space: nowrap; }
.btn.big .btn-label { font-size: 1em; }
.buybar .btn-label { font-size: 1em; }
.buybar .btn-price { font-size: 1em; padding-left: 10px; }
.btn:hover, .btn:focus-visible { background: var(--red-deep); }
.btn:active { transform: translate(3px, 4px); box-shadow: none; }
.btn[aria-disabled="true"] { cursor: default; }   /* prototype only: looks real, goes nowhere yet */
.fineprint { font-size: 0.86rem; color: var(--ink-dim); margin: 0; }
.note { font-size: 0.9rem; color: var(--ink-dim); }

/* ───────────────────────────────────────────────────────────────────────────── bands */
.band { padding: clamp(36px, 9vw, 88px) var(--gutter); border-top: 2.5px solid var(--ink); }
.band.alt { background: var(--paper-2); }
.band > h2 { margin-bottom: 0.45em; }
.band > .lede { margin-bottom: 1.3em; }

/* ── the cards: a slow conveyor of all seven, that a hand can also move ─────────────
   (owner, 2026-10-03: conveyor, then "let me scroll it myself too, keep the hover pause").
   The belt is a real horizontal scroller; page.js drives its scrollLeft (~6s a card), pauses
   it on hover / finger / mouse drag, resumes ~2.5s after a hand lets go, and wraps by one
   set's width so the loop never shows a seam (the seven are rendered twice). Reduced motion:
   page.js never auto-scrolls; it is a plain swipe row with the duplicate set hidden. */
.belt {
  margin: 0 calc(-1 * var(--gutter)); overflow-x: auto; scrollbar-width: none;
  padding: 10px 0 18px var(--gutter);   /* room for the hard shadow; the left inset lives HERE */
  cursor: grab; touch-action: pan-x pan-y;
}
.belt::-webkit-scrollbar { display: none; }
.belt.dragging { cursor: grabbing; }
.belt img { -webkit-user-drag: none; user-select: none; }
.deck {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 16px; width: max-content;
}
.deck li { flex: none; width: min(78vw, 340px); }
@media (prefers-reduced-motion: reduce) {
  .belt { scroll-snap-type: x mandatory; cursor: auto; }
  .deck li { scroll-snap-align: start; }
  .deck .dup { display: none; }
}
/* Set straight (owner, 2026-10-03: the tilted panels read as messy). Hover lifts the card. */
.peek {
  position: relative; margin: 0; overflow: hidden;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--cast);
  transition: translate .4s cubic-bezier(.16, 1, .3, 1);
}
.peek:hover { translate: 0 -6px; }
/* The sample image ends in a blurred rule 2 (the bottom ~19% of the file). The caption
   pulls up over ONLY that strip, carrying the card's paper colour up as a fade, so rule 1
   stays sharp and the card reads as continuing below. Then the count of what is left. */
.peek img { display: block; }
.peek figcaption {
  position: relative; margin-top: -18%; padding: 13% 0 12px; text-align: center;
  background: linear-gradient(to bottom, transparent, var(--card) 55%);
  font: 800 1.05rem/1 var(--hand); color: var(--ink);
}

/* ── why it is worth it: the value equation, slips of paper taped down ─────────────── */
.worth h2 { margin-bottom: calc(var(--space-lg) + 8px); }
.worth h2 em { font-style: normal; color: var(--red-deep); }   /* "use" is the act */
/* A strip of masking tape: the one sketchbook detail, so the slip reads as paper pinned to
   the page rather than a UI card. Translucent, so the ink under it still shows. */
.tape {
  position: relative;
}
.tape::before {
  content: ""; position: absolute; top: -13px; left: 50%; z-index: 1;
  width: 88px; height: 24px; translate: -50% 0; rotate: -3deg;
  background: oklch(0.9 0.035 84 / 0.78); border: 1px solid oklch(0.8 0.03 84 / 0.6);
}
.gains {
  list-style: none; margin: 0; padding: clamp(8px, 2vw, 16px) clamp(20px, 5vw, 32px);
  max-width: 600px;
  background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--cast);
}
/* Phone: picture above the words (a side column would squeeze the text to ~160px).
   ≥620px: picture left, words right - the layout of a row on the cards themselves. */
.gains li {
  padding: 18px 0; color: var(--ink-dim); line-height: 1.45;
  display: grid; gap: 10px; align-items: center;
}
.gains li p { margin: 0; }
/* The card's own illustration, at a size where its faces and props read. */
/* multiply: the card's own paper colour drops out against the slip, so no pale box shows. */
.g-ico { display: block; height: 68px; width: auto; max-width: 100%; mix-blend-mode: multiply; }
@media (min-width: 620px) {
  .gains li { grid-template-columns: 130px 1fr; gap: 20px; }
  .g-ico { height: auto; width: 130px; }
}
.gains li + li { border-top: 2px dashed var(--ink-faint); }
.gains strong {
  display: block; margin-bottom: 4px; color: var(--ink);
  font: 800 clamp(1.25rem, 1.1rem + 0.8vw, 1.6rem)/1.15 var(--hand);
}

/* ── questions: a plain list, not boxes - it is the last stop, not a feature ─────────── */
details { border-top: 1.5px solid var(--ink-faint); max-width: 640px; }
details:last-of-type { border-bottom: 1.5px solid var(--ink-faint); }
summary {
  font-weight: 600; cursor: pointer; padding: 12px 0; min-height: 48px;
  display: flex; align-items: center; gap: 0.5em; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; color: var(--ink-dim); font-weight: 700; font-size: 1.2rem; }
details[open] summary::after { content: "–"; }
details > p { padding: 0 0 14px; margin: 0; color: var(--ink-dim); }

/* ── the slide-up buy panel: the only buy button below the first screen ─────────────
   Phone: a full-width strip. Desktop: a floating slip, centred, with the page's hard shadow.
   [card thumb] [what + green refund] [button] - the product, the reassurance, the act. */
.buybar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px var(--edge) calc(10px + env(safe-area-inset-bottom));
  background: var(--card); border-top: 2.5px solid var(--ink);
  box-shadow: 0 -6px 0 oklch(0.19 0.012 62 / 0.08);
  translate: 0 calc(100% + 24px); transition: translate .4s cubic-bezier(.16, 1, .3, 1);
}
.buybar[hidden] { display: none; }
.buybar.up { translate: 0 0; }
.bb-thumb {
  flex: none; width: 50px; height: auto;
  border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--shadow);
}
.bb-text { margin: 0; flex: 1; min-width: 0; display: grid; gap: 3px; }
.bb-text strong { font: 800 1.05rem/1.1 var(--hand); color: var(--ink); text-wrap: balance; }   /* phone: "7 cards, / 56 moves" */
/* The guarantee in the stamp's green with the same check: same promise, same sign. */
.bb-ok {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 0.74rem/1.2 var(--body); letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ok); white-space: nowrap;
}
.bb-ok::before {
  content: "\2713"; display: grid; place-items: center; width: 15px; height: 15px; flex: none;
  background: var(--ok); color: var(--on-act); border-radius: 50%; font: 900 0.6rem/1 var(--body);
}
.buybar .btn { flex: none; padding: 10px 12px; font-size: 1rem; box-shadow: 3px 3px 0 var(--shadow); white-space: nowrap; gap: 7px; }
body:has(.buybar.up) { padding-bottom: 84px; }
@media (min-width: 620px) {
  .buybar {
    inset: auto auto 18px 50%; width: min(560px, calc(100% - 32px));
    padding: 12px 14px; border: 2.5px solid var(--ink); box-shadow: var(--cast);
    translate: -50% calc(100% + 40px);
  }
  .buybar.up { translate: -50% 0; }
  .bb-thumb { width: 72px; }
}
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }

/* ── footer ────────────────────────────────────────────────────────────────────────── */
footer {
  border-top: 2.5px solid var(--ink);
  padding: var(--space-lg) var(--edge) var(--space-xl);
  font-size: 0.85rem; color: var(--ink-dim); text-align: center;
}
footer .mark { margin: 0; color: var(--ink); }
footer .legal { display: flex; gap: var(--space-md); justify-content: center; margin-bottom: var(--space-md); }
footer .legal a { display: inline-block; padding: 12px 4px; }
details > p a { display: inline-block; padding: 11px 2px; }

/* ─────────────────────────────────────────────────────────────────────────── ≥620px */

/* ─────────────────────────────────────────────────────────────────────────── ≥900px */
@media (min-width: 900px) {
  :root { --cast: 7px 8px 0 var(--shadow); --cast-lg: 12px 14px 0 var(--shadow); }
  /* Words + button on the left, the row of whole cards on the right, both in one viewport. */
  .hero {
    grid-template-columns: minmax(380px, 500px) minmax(0, 1fr); grid-template-rows: auto 1fr;
    column-gap: var(--space-2xl); row-gap: var(--space-lg); align-items: start;
  }
  .hero-copy { grid-column: 1; margin-top: var(--space-xl); }
  .hero h1 { font-size: clamp(3.2rem, 2rem + 1.8vw, 3.9rem); }   /* "CHEAT CODES." on one line: two lines total */
  .hero-buy { grid-column: 1; grid-row: 2; }
  /* The belt runs in the right column, out to the screen's right edge. */
  .belt { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0 calc(-1 * var(--gutter)) 0 0; padding-left: 0; }

  /* Value section: the one slip becomes four, each taped down at its own slight angle - the
     same "real paper on a table" language as the cards in the hero. */
  .gains {
    max-width: 920px; padding: 0; background: none; border: 0; box-shadow: none; rotate: 0deg;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px;
  }
  .gains::before { display: none; }   /* the tape moves onto each slip */
  .gains li, .gains li + li {
    position: relative; padding: 26px 26px 24px;
    background: var(--card); border: 2.5px solid var(--ink); box-shadow: var(--cast);
  }
  .gains li::before {
    content: ""; position: absolute; top: -13px; left: 50%;
    width: 80px; height: 22px; translate: -50% 0; rotate: 2deg;
    background: oklch(0.9 0.035 84 / 0.78); border: 1px solid oklch(0.8 0.03 84 / 0.6);
  }
}

/* ── legal pages (terms / privacy / refund) ────────────────────────────────────────── */
.doc { max-width: 68ch; margin-inline: auto; }
.doc h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); margin-bottom: 0.3em; }
.doc h2 { font-size: 1.35rem; margin: 2em 0 0.5em; }
.doc .updated { font-size: 0.85rem; color: var(--ink-dim); margin-bottom: 2em; }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: 0.5em; }
.doc .back { display: inline-block; margin-top: var(--space-xl); font-weight: 600; }