/* ==========================================================================
   ASK A WIZARD — DESIGN SYSTEM
   Built 2026-08-28 against the LOCKED offer (04_OFFER/THE_OFFER.md).
   Spec: D:\The Wizard\03_CONTENT\BRAND_BIBLE.md

   THE LAW: UX first. Never fancy. Simple, clear, persuasive — in that order.
   THE SIGNATURE: Rubedo red marks a DECISION. Nothing else is ever red.
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Paper and ink */
  --paper:        #ffffff;
  --paper-warm:   #faf8f5;
  --ink:          #0a0a0a;
  --ink-muted:    #5a5450;
  --ink-faint:    #8a8380;
  --charcoal:     #131110;   /* warm near-black for dark sections */

  /* Rubedo — the reddening. Decisions only. */
  --rubedo:       #8b1a1a;
  --rubedo-lit:   #a81e1e;
  --rubedo-deep:  #6d1414;

  /* Structure */
  --rule:         #e4e0db;
  --rule-dark:    #2a2624;

  /* Type */
  --display: "Abril Fatface", Georgia, "Times New Roman", serif;
  --body:    Georgia, "Times New Roman", "Iowan Old Style", serif;

  /* Scale — 1.25 minor third, clamped for fluid response */
  --t-xs:   0.78rem;
  --t-sm:   0.9rem;
  --t-base: 1.0625rem;
  --t-lg:   clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --t-xl:   clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem);
  --t-2xl:  clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --t-3xl:  clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem);

  /* Space — 8px base */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;    --s8: 8rem;

  --measure: 34rem;      /* readable line length */
  --shell:   72rem;      /* page container */
  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ------------------------------------------------------------------
   LEGACY TOKEN ALIASES  ยท  2026-08-29
   The 51 rules migrated from the dead style.css reference thirteen
   variable names this sheet never defined. A rule that leans on an
   undefined variable does NOTHING, silently, so porting the rules
   without these would have looked like a fix and changed nothing.
   Each old name is mapped onto the live token, never redefined with a
   new value, so the locked 70/20/10 palette is untouched.

   ONE DELIBERATE DIVERGENCE: --font-ui was a sans-serif system stack.
   This sheet is Abril Fatface and Georgia throughout, and wizard.css is
   the newer of the two systems, so --font-ui resolves to the serif body
   rather than dragging a sans-serif back onto the page.
------------------------------------------------------------------- */
:root {
  --white:      var(--paper);
  --off-white:  var(--paper-warm);
  --light-gray: var(--rule);
  --mid-gray:   var(--ink-muted);
  --dark-gray:  #1a1a1a;
  --near-black: var(--ink);
  --red:        var(--rubedo);
  --red-hover:  var(--rubedo-lit);
  --red-glow:   rgba(139, 26, 26, 0.25);
  --font-display: var(--display);
  --font-ui:      var(--body);
  --transition:   all 0.3s ease;
  --section-padding-mobile: 40px 0;
}

/* ---------- 2. RESET ---------- */
*, *::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-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; }
p { margin: 0 0 var(--s2); }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.2em; }
a { color: inherit; }

/* Focus — never removed, always obvious */
:focus-visible {
  outline: 3px solid var(--rubedo);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. LAYOUT ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s3); }
@media (min-width: 48rem) { .shell { padding-inline: var(--s4); } }

.band { padding-block: var(--s6); }
@media (min-width: 48rem) { .band { padding-block: var(--s7); } }
.band--tight { padding-block: var(--s5); }

.band--dark { background: var(--charcoal); color: var(--paper); }
.band--dark .eyebrow { color: #b5aca6; }
.band--dark .rule { background: var(--rule-dark); }
.band--warm { background: var(--paper-warm); }

.measure { max-width: var(--measure); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- 4. TYPE ROLES ---------- */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s2);
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* The Rubedo mark: a decision is being asked for here. */
.eyebrow::before {
  content: "";
  width: 0.5em; height: 0.5em;
  background: var(--ink-muted);
  flex: none;
}

.display  { font-size: var(--t-3xl); }
.headline { font-size: var(--t-2xl); }
.subhead  { font-size: var(--t-xl); font-family: var(--display); font-weight: 400; line-height: 1.3; }
.lead     { font-size: var(--t-lg); line-height: 1.55; color: var(--ink-muted); }
.band--dark .lead { color: #c9c2bc; }
.fine     { font-size: var(--t-sm); color: var(--ink-muted); }

/* The turn — the one phrase that carries the sentence. Used once per page. */
.turn { color: var(--rubedo); font-style: italic; }
.band--dark .turn { color: #e07b7b; }

/* ---------- 5. ACTIONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--body); font-size: var(--t-base); font-weight: 600;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 1.05rem 1.9rem; min-height: 3rem;
  border: 2px solid transparent; border-radius: 2px;
  transition: background-color 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn--apply { background: var(--rubedo); color: #fff !important; border-color: var(--rubedo); }
.btn--apply:hover { background: var(--rubedo-lit); border-color: var(--rubedo-lit); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--quiet:hover { background: var(--ink); color: var(--paper); }
.band--dark .btn--quiet { color: var(--paper); border-color: #4a443f; }
.band--dark .btn--quiet:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--wide { width: 100%; }
@media (min-width: 30rem) { .btn--wide { width: auto; } }

.actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

.textlink {
  color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color 180ms var(--ease);
}
.textlink:hover { border-color: var(--rubedo); }
.band--dark .textlink { color: var(--paper); border-color: #4a443f; }

/* ---------- 6. NAV ---------- */
.nav { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: 50; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 4.25rem; }
.nav__mark { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-family: var(--display); font-size: 1.25rem; font-weight: 400; letter-spacing: -0.01em; }
.nav__mark img { width: 30px; height: 30px; border-radius: 50%; }
.nav__links { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: var(--s3); }
.nav__links a:not(.btn) { text-decoration: none; font-size: var(--t-sm); font-weight: 500; color: var(--ink-muted); transition: color 160ms var(--ease); }
.nav__links a:not(.btn):hover, .nav__links a:not(.btn)[aria-current="page"] { color: var(--ink); }
.nav__links .btn { padding: 0.7rem 1.15rem; font-size: var(--t-sm); min-height: 2.5rem; }
@media (min-width: 56rem) { .nav__links { display: flex; } .nav__toggle { display: none; } }

.nav__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  padding: 0.65rem 0.9rem; min-height: 2.75rem; cursor: pointer; color: var(--ink);
}
.nav__drawer { display: none; border-top: 1px solid var(--rule); padding-block: var(--s2) var(--s3); }
.nav__drawer[data-open="true"] { display: block; }
@media (min-width: 56rem) { .nav__drawer { display: none !important; } }
.nav__drawer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.nav__drawer a { display: block; padding: 0.75rem 0; text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--rule); }
.nav__drawer .btn { margin-top: var(--s2); }

/* ---------- 7. HERO ---------- */
.hero { padding-block: var(--s3) var(--s4); }
@media (min-width: 48rem) { .hero { padding-block: var(--s4) var(--s5); } }
.hero__kicker {
  font-family: var(--body); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted);
  margin: 0 0 var(--s3);
}
.hero h1 { font-size: var(--t-2xl); max-width: 20ch; line-height: 1.08; }
.hero .lead { margin-top: var(--s3); max-width: var(--measure); }

/* ---------- 8. STEPS (a real sequence, so it is numbered) ---------- */
.steps { list-style: none; margin: var(--s4) 0 0; padding: 0; display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s2); padding-block: var(--s3); border-top: 1px solid var(--rule); }
.band--dark .step { border-color: var(--rule-dark); }
.step:last-child { border-bottom: 1px solid var(--rule); }
.band--dark .step:last-child { border-color: var(--rule-dark); }
.step__n { font-family: var(--display); font-size: var(--t-xl); color: var(--ink); line-height: 1; padding-top: 0.1em; }
.band--dark .step__n { color: #e8e2dc; }
.step h3 { font-size: var(--t-lg); margin-bottom: 0.35rem; }
.step p { margin: 0; color: var(--ink-muted); }
.band--dark .step p { color: #c9c2bc; }

/* ---------- 9. PROOF ---------- */
.proof-grid { display: grid; gap: var(--s3); margin-top: var(--s4); }
@media (min-width: 44rem) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s4); } }
@media (min-width: 68rem) { .proof-grid { grid-template-columns: repeat(3, 1fr); } }

.proof {
  border-top: 2px solid var(--ink);
  padding-top: var(--s2);
  display: flex; flex-direction: column;
}
.band--dark .proof { border-color: #4a443f; }
.proof blockquote { margin: 0 0 var(--s2); font-family: var(--display); font-size: var(--t-lg); line-height: 1.4; }
.proof__who { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.04em; margin: auto 0 0; }
.proof__watch { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; margin-top: 0.5rem; display: inline-block; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.proof__watch:hover { color: var(--rubedo); border-color: var(--rubedo); }
.band--dark .proof__watch { color: #b5aca6; border-color: #4a443f; }

/* ---------- 10. SPLIT ---------- */
.split { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; gap: var(--s6); } }
.split--portrait img { border-radius: 2px; }

/* ---------- 11. CLOSING CALL ---------- */
.call { text-align: left; }
.call h2 { font-size: var(--t-2xl); max-width: 20ch; }
.call .lead { margin-top: var(--s3); }

/* ---------- 12. FOOTER ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: var(--s5); font-size: var(--t-sm); color: var(--ink-muted); }
.foot__rows { display: grid; gap: var(--s3); }
@media (min-width: 44rem) { .foot__rows { grid-template-columns: 1fr auto; align-items: center; } }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- 13. FORM ---------- */
.field { display: grid; gap: 0.4rem; margin-bottom: var(--s3); }
.field label { font-size: var(--t-sm); font-weight: 600; }
.field .hint { font-size: var(--t-xs); color: var(--ink-muted); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: var(--t-base); color: var(--ink);
  background: var(--paper);
  border: 1px solid #c9c4bf; border-radius: 2px;
  padding: 0.85rem 0.9rem; min-height: 3rem; width: 100%;
  transition: border-color 160ms var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: var(--ink-muted); }
.field--error input, .field--error textarea { border-color: var(--rubedo); border-width: 2px; }
.field__error { font-size: var(--t-sm); color: var(--rubedo); font-weight: 600; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); }
legend { font-size: var(--t-sm); font-weight: 600; padding: 0; margin-bottom: 0.4rem; }
.choice { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; }
.choice input { width: auto; min-height: auto; margin-top: 0.35rem; }

/* ---------- 14. MOTION — one gesture, respected ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 340ms var(--ease), transform 340ms var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- 15. UTILITY ---------- */
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem; z-index: 100; text-decoration: none;
}
.skip:focus { left: var(--s3); top: var(--s2); }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stack > * + * { margin-top: var(--s3); }


/* ==================================================================
   MOVED HERE 2026-08-29 FROM style.css, WHICH NOTHING LOADS.

   ⛔ EVERY PAGE LINKS `css/wizard.css`. `css/style.css` IS 30KB OF DEAD
   CSS THAT NO PAGE HAS LOADED. The Wall of Proof rules were appended to
   the dead file, so the single strongest persuasion element on the site,
   39 testimonial cards, was rendering as a naked vertical stack of divs.

   That is most of why the site read as a broken template.

   HOW IT WAS MISSED: I was asked whether the build regenerates style.css
   and I answered that it does not, which was TRUE and USELESS. Safe from
   the builder is not the same as reaching the browser. I checked the
   build script and never checked which file the page links.
================================================================== */
.wall-grid {
  column-count: 3;
  column-gap: 20px;
}
@media (max-width: 900px) { .wall-grid { column-count: 2; } }
@media (max-width: 600px) { .wall-grid { column-count: 1; } }

.wall-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}
.wall-card__user {
  font-weight: 700;
  font-size: .86rem;
  letter-spacing: .01em;
  margin-bottom: 5px;
  word-break: break-word;
}
.wall-card__text {
  margin: 0;
  border: 0;
  padding: 0;
  font-size: .97rem;
  line-height: 1.5;
  font-style: normal;
  quotes: none;
}
.wall-card__text::before, .wall-card__text::after { content: none; }
.wall-card--creator {
  background: #faf7f7;
  border-color: #e3d5d5;
  margin-left: 18px;
}
.wall-card__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #8B1A1A;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ------------------------------------------------------------------
   RESPONSIVE EMBED  ยท  added 2026-08-29 by Operations
   The homepage testimonial iframe carries hard-coded width="560". Its
   wrapper is .proof-video, which had no rules; .video-embed did, so the
   responsive treatment existed and this element simply was not wearing it.
   At 390px the page scrolled SIDEWAYS on a phone. Caught by rendering the
   page in Chrome at 390 wide, not by reading the CSS.
   The aspect-ratio box also reserves the space before the embed loads, so
   nothing below it jumps.
------------------------------------------------------------------- */
.proof-video iframe,
.proof-video video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
}

/* ---- HERO: two columns so the page is not half empty ---- */
.hero__grid { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: var(--s5); align-items: center; }
}
.hero__copy > * + * { margin-top: var(--s3); }
.hero__art { margin: 0; }
.hero__art figcaption { margin-top: 0.75rem; font-size: var(--t-sm); color: var(--ink-muted); line-height: 1.5; }
.hero__art figcaption strong { color: var(--ink); font-weight: 600; }

/* ---- VIDEO CARDS + WALL ---- */
.vcard__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.14); }
.vcard__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vwall { display: grid; gap: var(--s4); margin-top: var(--s4); }
@media (min-width: 40rem) { .vwall { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .vwall { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.vcard { margin: 0; }
.vcard figcaption { margin-top: 0.7rem; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-muted); }
.vcard figcaption strong { display: block; margin-top: 0.3rem; color: var(--ink); font-weight: 600; }

/* pull-quote sits on the shell, not on its own centre line */
.proof--hero { max-width: 46rem; margin: 0; }

/* hero action row, added 2026-08-29. The events page had no way to contact him
   until 3,287px down and about.html none until 2,011px on a phone. Measured in
   Chrome, not guessed. */
.hero-actions { margin-top: 1.4rem; display: flex; flex-wrap: wrap;
                align-items: center; gap: 0.9rem 1.4rem; }
.hero-tel { font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ================================================================
   COMPONENTS RESTORED FROM css/style.css (the design that worked).
   Ported onto wizard.css tokens rather than reinvented. The page had
   these and the rewrite dropped them, which is why it read as a
   template: cards, testimonial grid, eyebrows, dividers, red close.
   ================================================================ */
.section-eyebrow { font-family: var(--body); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .14em; color: var(--rubedo); margin: 0 0 .5rem; }
.divider { width: 50px; height: 3px; background: var(--rubedo); margin: 1.25rem auto; }
.divider--left { margin-left: 0; }
.section-header { text-align: center; max-width: 46rem; margin: 0 auto var(--s4); }
.section-header--left { text-align: left; margin-inline: 0; }
.container-narrow { max-width: 48rem; margin: 0 auto; }

.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 44rem) { .card-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 64rem) { .card-grid { grid-template-columns: repeat(3,1fr); } }
.card { padding: 2rem 1.75rem; background: #fff; border-radius: 6px; border: 1px solid var(--rule); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.08); border-color: rgba(139,26,26,.14); }
.card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(139,26,26,.06); color: var(--rubedo); border-radius: 6px; margin-bottom: 1.15rem; font-family: var(--body); font-weight: 700; }
.card h3 { margin: 0 0 .8rem; font-size: 1.2rem; }
.card p { margin: 0; color: var(--ink-muted); line-height: 1.75; }

.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem,1fr)); gap: 1.25rem; }
.testimonial-card { padding: 1.75rem; background: #fff; border-radius: 6px; border: 1px solid var(--rule); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.testimonial-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.testimonial-card p { font-style: italic; font-size: 1.05rem; line-height: 1.7; margin: 0 0 .85rem; }
.testimonial-card__name { font-family: var(--body); font-weight: 700; font-size: .9rem; color: var(--ink); }
.testimonial-card__detail { font-family: var(--body); font-size: .82rem; color: var(--ink-muted); }

.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: #000; box-shadow: 0 4px 24px rgba(0,0,0,.10); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed--tall { aspect-ratio: 16/10; }

.band--red { background: var(--rubedo); color: #fff; }
.band--red h2, .band--red p { color: #fff; }
.band--red .section-eyebrow { color: rgba(255,255,255,.75); }
.band--red .divider { background: rgba(255,255,255,.6); }
.band--red .btn { background: #fff; color: var(--rubedo); border-color: #fff; }
.band--red .btn:hover { background: #f4efe9; border-color: #f4efe9; }

/* ==================================================================
   ART  ยท  2026-08-29, Department 6 (Operations)

   The site carried ZERO images. Tyler owns 232 catalogued alchemical
   works and is a mentalist whose brand is visual, and every page was a
   serif headline on white. That is most of why it read as a template.

   NO NEW BRAND RULES ARE INVENTED HERE. 70/20/10 white, black, burgundy
   #8B1A1A is already locked; so is "no owl on pure alchemical art"; so is
   the artist-to-mood map in source-library-catalog.md.

   TWO TREATMENTS ONLY, so seven pages read as one designed object rather
   than seven documents that happen to share a folder.
================================================================== */

/* --- the full-width band ------------------------------------------ */
.art-band {
  position: relative;
  overflow: hidden;
  height: clamp(220px, 30vw, 400px);
  background: #14100f;
}
.art-band__img { display: block; width: 100%; height: 100%; }
.art-band__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* the burgundy is the 10 percent in 70/20/10. It sits ON the art so the
     painting reads as part of the brand rather than a stock photo dropped in. */
  filter: grayscale(24%) contrast(106%);
  opacity: 0.82;
}
.art-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(139,26,26,0.34), rgba(20,16,15,0.14) 55%, rgba(139,26,26,0.28));
}

/* --- a painting beside a page heading ----------------------------- */
.page-hero--art > .container {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.page-hero__art { margin: 0; }
.page-hero__pic { display: block; }
.page-hero__pic img {
  display: block;
  width: 100%; height: auto;
  max-height: 380px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 3px;
  /* a thin burgundy rule instead of a heavy frame: the art is the object,
     the brand is the edge. */
  border-bottom: 3px solid #8B1A1A;
  box-shadow: 0 10px 34px rgba(20,16,15,0.16);
}

/* --- contact: one quiet medallion, centred ------------------------ */
.page-hero--centred-art .page-hero__medallion { margin: 0 auto 22px; max-width: 132px; }
.page-hero--centred-art .page-hero__medallion img {
  width: 100%; height: auto; border-radius: 50%;
  filter: grayscale(100%) contrast(112%); opacity: 0.72;
  border: 2px solid #8B1A1A;
}

/* --- one column on a narrow screen -------------------------------- */
@media (max-width: 820px) {
  .page-hero--art > .container { grid-template-columns: 1fr; }
  .page-hero__art { order: -1; }
  .page-hero__pic img { max-height: 220px; }
}

/* ---- VERTICAL RHYTHM FIX ----
   Hero bottom padding + the next band's top padding were stacking into a
   ~200px void. Collapse the seam and let the hero sit tight to what follows. */
.hero { padding-block: var(--s3) var(--s3); }
@media (min-width: 48rem) { .hero { padding-block: var(--s4) var(--s4); } }
.hero + .band, .hero + .art-band { padding-top: var(--s4); }
.hero__grid { align-items: center; }
.hero__art { align-self: center; }

/* ---- THE OFFER, AS AN ACTUAL BLOCK ----
   Four facts rendered as loose paragraph lines read as filler. Boxed, centred
   under its own centred heading, with the facts as a real definition list. */
.offer-card {
  max-width: 40rem; margin: 0 auto; padding: 2rem 2.25rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.offer-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.25rem; }
.offer-card dt { font-family: var(--body); font-weight: 700; color: var(--ink); white-space: nowrap; }
.offer-card dd { margin: 0; color: var(--ink-muted); }
.offer-card__after { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--ink-muted); line-height: 1.7; }
@media (max-width: 34rem) {
  .offer-card { padding: 1.5rem 1.25rem; }
  .offer-card dl { grid-template-columns: 1fr; gap: .15rem; }
  .offer-card dd { margin-bottom: .6rem; }
}

/* ---- CTA ALIGNMENT ----
   .actions is a flex row with no justify-content, so it defaulted to
   flex-start. In a section whose heading is centred and whose card is
   centred, the button sat hard left and lined up with nothing. */
.actions { justify-content: flex-start; }
.band .actions,
.band--dark .actions,
.band--warm .actions,
.band--red .actions { justify-content: center; }
.hero .actions { justify-content: flex-start; }


/* ==================================================================
   MIGRATED 2026-08-29 FROM style.css, WHICH NO PAGE LOADS.

   The Wall of Proof was not the only casualty. TWENTY FOUR classes used
   in the built pages had a rule ONLY in the dead file, so they rendered
   with no styling at all: every button variant, the credibility strip
   (18 Years / Certified Hypnotist / 400K+), the red call-to-action
   sections, the quote blocks and the reveal animations.

   The credibility strip in particular was rendering as a bare vertical
   list of words. It is the single most concentrated piece of social
   proof and authority on the site.

   Ported verbatim. Nothing here is redesigned.
================================================================== */
.text-center { text-align: center; }

.text-red { color: var(--red); }

.text-muted { color: var(--mid-gray); }

.section--off-white {
  background: var(--off-white);
}

.section--red {
  background: var(--red);
  color: var(--white);
}

.section--red .countdown__number {
  color: var(--white);
}

.section--red .countdown__label {
  color: rgba(255,255,255,0.7);
}

.btn--primary {
  background: var(--red);
  color: var(--white);
}

.btn--primary:hover {
  background: var(--red-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--red-glow);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 3px 12px rgba(139, 26, 26, 0.2);
}

.btn--primary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.4);
}

.btn--outline:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
}

.btn--outline-dark {
  background: transparent;
  color: var(--near-black);
  border: 2px solid var(--near-black);
}

.btn--outline-dark:hover {
  background: var(--near-black);
  color: var(--white);
}

.btn--large {
  padding: 20px 48px;
  font-size: 1rem;
}

.btn--small {
  padding: 12px 28px;
  font-size: 0.85rem;
}

/* --- QUOTE BLOCKS --- */
.quote-block {
  position: relative;
  padding: 28px 32px;
  margin-bottom: 20px;
  background: var(--off-white);
  border-left: 3px solid var(--red);
  border-radius: 0 6px 6px 0;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--dark-gray);
}

.section--dark .quote-block {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.85);
}

.quote-block__source {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--red);
}

/* --- NUMBERS STRIP --- */
.numbers-strip {
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  padding: 36px 0;
}

.numbers-strip__item { text-align: center; }

.numbers-strip__number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 6px;
}

.numbers-strip__label {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
}

.section--dark .numbers-strip__label { color: rgba(255,255,255,0.6); }

.section--dark .numbers-strip__number { color: var(--white); }

/* --- ABOUT PAGE --- */
.about-am {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}

.about-am__col h3 { margin-bottom: 16px; font-size: 1.15rem; }

.about-am__col ul { list-style: none; padding: 0; }

.about-am__col ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

.about-am__col ul li:last-child { border-bottom: none; }

.section--dark .about-am__col ul li { border-color: rgba(255,255,255,0.08); }

/* --- ANIMATION UTILITIES --- */
.fade-up {
  opacity: 1;
  transform: translateY(0);
}

.fade-up.will-animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-up.will-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger > .fade-up.will-animate:nth-child(1) { transition-delay: 0s; }

.stagger > .fade-up.will-animate:nth-child(2) { transition-delay: 0.12s; }

.stagger > .fade-up.will-animate:nth-child(3) { transition-delay: 0.2s; }

.stagger > .fade-up.will-animate:nth-child(4) { transition-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .fade-up.will-animate {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .section { padding: var(--section-padding-mobile); }
  .card-grid { grid-template-columns: 1fr; }
  .numbers-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0; }
  .numbers-strip__number { font-size: 1.8rem; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .inline-form { flex-direction: column; }
  .inline-form input { min-width: 100%; }
  .quote-block { padding: 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__bottom { flex-direction: column; gap: 14px; text-align: center; }
  .countdown__number { font-size: 1.5rem; }
  .about-am { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card { padding: 20px; }
  .steps { max-width: 100%; }
  .step { gap: 14px; }
  .step__number { width: 44px; height: 44px; font-size: 1.05rem; }
  .step__content h3 { font-size: 1.2rem; }
  .step__content p { font-size: 1rem; }
  .popup__content { padding: 36px 24px; width: 94%; margin: 16px; }
  .popup__content h2 { font-size: 1.35rem; }
  .section-header { margin-bottom: 32px; }
  .video-embed { border-radius: 4px; }
  .guarantee-box { padding: 24px; }
  .bonus-box { padding: 20px; }

  .proof-grid { grid-template-columns: 1fr; gap: 12px; }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .page-hero { padding: 110px 0 40px; }
  .hero { padding: 110px 0 60px; }
  .hero__content { max-width: 100%; }
  .lead { font-size: 1.05rem; }
  p { font-size: 1rem; }
  .container { padding: 0 16px; }
  .container-narrow { padding: 0 16px; }
  .btn--large { padding: 16px 32px; font-size: 0.95rem; }
}

/* Final CTA section boost */
.final-cta {
  padding: 80px 0 !important;
}

.final-cta h2 {
  font-size: 2.4rem;
  line-height: 1.3;
  margin-bottom: 20px;
}

.final-cta .section-eyebrow {
  font-size: 1rem;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}

.final-cta .lead {
  font-size: 1.35rem;
}

@media (max-width: 768px) {
  .final-cta { padding: 60px 0 !important; }
  .final-cta h2 { font-size: 1.8rem; }
}

/* Instagram DM CTA */
.dm-cta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.dm-cta a {
  color: var(--white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: var(--transition);
}

.dm-cta a:hover {
  color: var(--red);
}

@media (max-width: 480px) {
  h1 { font-size: 1.7rem; }
  .numbers-strip__number { font-size: 1.5rem; }
  .countdown__block { min-width: 50px; }
  .countdown__number { font-size: 1.3rem; }
  .popup__trust { flex-direction: column; gap: 6px; }
}

/* --- Off-White Warmth --- */
.section--off-white {
  background: #F8F6F3;
}


/* the art hero must not eat the container's own gutters. Seen in a screenshot
   at 1280 wide: text at x=0 and the painting bleeding off the right edge. */
.page-hero--art > .container {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.page-hero--art .container-narrow { max-width: none; margin: 0; }

/* ---- DENSITY. Appended last so it wins over the style.css migration. ----
   Every band carried --s7 (96px) top AND bottom, so each block floated alone
   in white and the page read as empty. Tightened to --s5 (48px), which is the
   spacing the swipe's high earners actually use between sections. */
.band { padding-block: var(--s5); }
@media (min-width: 48rem) { .band { padding-block: var(--s5); } }
.hero { padding-block: var(--s3) var(--s3); }
@media (min-width: 48rem) { .hero { padding-block: var(--s3) var(--s4); } }
.hero + .band { padding-top: var(--s4); }
.section-header { margin-bottom: var(--s3); }
.card-grid { gap: 1.25rem; }
.testimonial-grid { gap: 1rem; }

/* page-cro: trust signals belong NEXT TO the CTA, not in a distant section. */
.cta-proof { margin: .85rem 0 0; text-align: center; font-size: var(--t-sm); color: var(--ink-muted); font-style: italic; }
.cta-proof span { display: inline-block; margin-left: .4rem; font-style: normal; font-weight: 600; color: var(--ink); }
.cta-proof span::before { content: "\2014\00a0"; color: var(--ink-muted); font-weight: 400; }
.hero .cta-proof { text-align: left; }

/* ---- HOMEPAGE IS A LANDING PAGE ----
   Measured: a landing page WITH a nav menu converts 10-15% worse than the same
   page without one. Homepage only. The logo, the Apply button and the whole
   footer stay, and the body copy already links /proof and /about at the exact
   moments a reader wants them. about/proof/contact keep their nav, because a
   reader who arrives there deep-linked needs a way out. */
body.page-home .nav__links > li:not(:last-child) { display: none; }
body.page-home .nav__toggle { display: none; }
body.page-home .nav__links { display: flex; }

/* the wall of proof, on the homepage */
.wall { margin: 0 0 var(--s4); }
.wall img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); }
.wall figcaption { margin-top: .75rem; text-align: center; font-size: var(--t-sm); color: var(--ink-muted); }

/* ---- THE OFFER CARD WAS A NARROW ISLAND IN A WIDE VIEWPORT ----
   40rem of card centred in a 72rem shell inside a 1900px window meant the
   content used ~40% of the screen, the definition list wrapped mid-phrase
   ("a good fit for each / other"), and ~90px of dead space sat above the
   heading. Appended last so it wins. */
.offer-card { max-width: 58rem; padding: 2.25rem 2.75rem; }
.offer-card dl { grid-template-columns: 14rem 1fr; gap: .9rem 2rem; align-items: start; }
.offer-card dt { font-size: 1.05rem; }
.offer-card dd { font-size: 1.05rem; line-height: 1.6; }
.offer-card__after { margin-top: 1.75rem; padding-top: 1.4rem; }
@media (max-width: 46rem) {
  .offer-card { max-width: 100%; padding: 1.5rem 1.25rem; }
  .offer-card dl { grid-template-columns: 1fr; gap: .2rem; }
  .offer-card dd { margin-bottom: .8rem; }
}
/* close the gap between a band's top edge and its own heading */
.band > .section-header:first-child,
.band > .shell > .section-header:first-child { margin-top: 0; }
.section-header { margin-bottom: var(--s3); }
.section-header h2 { margin-top: 0; }
.band { padding-block: var(--s4); }
@media (min-width: 48rem) { .band { padding-block: var(--s5); } }


/* THE FIRST MENTAL IMAGE. Williams: "the first vivid idea presented in an ad."
   It sits under the deck and above the button, so it is the last thing read
   before the decision to click. Quieter than the lead on purpose: it is a
   picture, not an argument, and an argument set in bold reads as a claim. */
.fmi { font-family: var(--display); font-size: var(--t-lg); line-height: 1.45;
       color: var(--ink-muted); max-width: 34ch; margin: var(--s3) 0 0; }