/* FUNNEL STYLES v3 (2026-08-20) — the reference funnel's own design system,
   matched token for token from the operator's saved copy of it: palette,
   type scale, weights, container, gutters, shadows.
   (operator: "Same font, colors, placement everything.")

   WHAT IS COPIED AND WHAT IS NOT, deliberately:
   - COPIED: the design system and the section order. A palette, a typeface
     choice and a layout are the proven FORMAT, which is the thing this whole
     project replicates on purpose (see the format-vs-photograph rule).
   - NOT COPIED: a single sentence of his writing. Every word on our pages is
     written fresh for the persona by build_site. Same rule as the thumbnails.

   PALETTE MODE. `--brand-primary/-accent/-bg/-ink` are still the four names
   build_site substitutes into, so nothing silently stops working. Under
   SITE_PALETTE=house (the default now) it writes the reference values below
   and every channel looks like the reference; under SITE_PALETTE=channel it
   writes that persona's own site_palette instead. One env var, no silent
   no-op either way. */

:root {
  /* the four substitution targets - house values are the reference's own */
  --brand-primary: #7A1F0E;   /* oxblood: buttons, price, the action colour */
  --brand-accent:  #BA8C3E;   /* gold: rules, eyebrows, small marks */
  --brand-bg:      #F2EBD4;   /* paper */
  --brand-ink:     #15110B;   /* ink */

  --paper:      var(--brand-bg);
  --paper-warm: #ECE3C2;
  --paper-deep: #DCD0AA;
  --ink:        var(--brand-ink);
  --ink-soft:   #2B241A;
  --ink-mid:    #4A4131;
  --ink-mute:   #786B53;
  --rule:       #C4B58A;
  --ox:         var(--brand-primary);
  --ox-dk:      color-mix(in srgb, var(--brand-primary) 78%, #000);
  --gold:       var(--brand-accent);
  --gold-soft:  #D4B070;
  --sage:       #4A5A3D;
  --sage-dk:    #2F3B26;

  --serif: 'Fraunces', 'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --mono:  'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  --container: 1240px;
  --gutter: 32px;
  --shadow-cover: 0 30px 60px -20px rgba(21,17,11,.4), 0 10px 20px -8px rgba(21,17,11,.3), 0 1px 0 rgba(21,17,11,.18);
  --shadow-page:  0 22px 60px -10px rgba(21,17,11,.25);
}
@media (max-width: 700px) { :root { --gutter: 22px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--paper); color: var(--ink); font-family: var(--serif);
       font-size: 19px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 900px; }
.center { text-align: center; }
.dim { color: var(--ink-mute); font-size: .85rem; line-height: 1.7; }

/* ---- TYPE: his scale exactly. Big and LIGHT (500), not small and bold —
        this is the single biggest thing that made our page read as a knock-off. */
h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); font-weight: 500; line-height: 1.04;
     letter-spacing: -.03em; margin: .35rem 0 1.1rem; }
/* THE HEADLINE'S EMPHASIS IS RED AND ITALIC, not the gold underline used in
   body copy. The reference sets the closing clause of its headline in oxblood
   italic - it is the one place on the page where colour does the work of a
   raised voice, and it is what our headline was missing entirely. */
h1 .hl { color: var(--ox); font-style: italic; box-shadow: none; font-weight: 500; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); font-weight: 500; line-height: 1.06;
     letter-spacing: -.025em; margin: .3rem 0 1.1rem; }
h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.015em; }
em { font-style: italic; color: var(--ox); }
.eyebrow, .secnum, .stack-h, .tb-note, .tb-cta, .price-note {
  font-family: var(--mono); font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { color: var(--ink-mute); }
.secnum  { color: var(--gold); margin-bottom: .7rem; }
.lede { font-size: 1.22rem; color: var(--ink-mid); max-width: 62ch; margin-bottom: 1.8rem; }
.lede.narrow-l { max-width: 70ch; }

/* ---- buttons ---- */
/* his buttons are MONO, UPPERCASE and LETTERSPACED with a trailing arrow -
   ours were serif sentence-case, which is most of why the page read softer */
.btn { display: inline-flex; align-items: center; gap: .6rem;
       font-family: var(--mono); font-weight: 500; font-size: .8rem;
       letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
       border: 1px solid transparent; border-radius: 2px; padding: 18px 30px;
       transition: transform .12s ease, background .12s ease, box-shadow .12s ease; }
.btn::after { content: '→'; transition: transform .12s ease; }
.btn:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--ox); border-color: var(--ox); color: var(--paper); }
.btn-primary:hover { background: var(--ox-dk); border-color: var(--ox-dk);
                     transform: translateY(-1px);
                     box-shadow: 0 8px 18px -6px rgba(122,31,14,.5); }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-big { display: flex; width: 100%; justify-content: center;
           padding: 20px 34px; font-size: .84rem; }

/* ---- top bar ---- */
/* THE TIMER SCROLLED AWAY because only the top bar was sticky and the launch
   bar sat above it as an ordinary block. One sticky WRAPPER holds both, so
   they stay together and nothing has to measure the bar's height. */
.sticky-top { position: sticky; top: 0; z-index: 50; }
.topbar { display: flex; align-items: center;
          gap: 1.2rem; padding: .6rem var(--gutter);
          background: color-mix(in srgb, var(--paper) 92%, transparent);
          backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.tb-name { font-weight: 600; letter-spacing: -.01em; }
.tb-note { color: var(--ink-mute); flex: 1; overflow: hidden;
           white-space: nowrap; text-overflow: ellipsis; }
.tb-nav { flex: 1; display: flex; gap: 1.6rem; justify-content: center;
          font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
          text-transform: uppercase; }
.tb-nav a { color: var(--ink-mid); text-decoration: none; }
.tb-nav a:hover { color: var(--ox); }
.tb-cta { color: var(--paper); background: var(--ox); text-decoration: none;
          padding: .5rem 1rem; border-radius: 4px; }

/* ---- LAUNCH BAR: a REAL deadline or nothing. build_site emits this block
        only when a launch window is set and still in the future; the script
        removes it the moment the clock runs out, so the page can never show a
        deadline that has passed — and never invents one that does not exist. */
.launch { background: var(--ink); color: var(--paper-warm); text-align: center;
          padding: .6rem var(--gutter); font-family: var(--mono);
          font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.launch b { color: var(--gold-soft); font-variant-numeric: tabular-nums; }

/* ---- hero ---- */
.hero { padding: 5.5rem 0 4.5rem; background: linear-gradient(180deg, var(--paper-warm), var(--paper)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
.sub { font-size: 1.25rem; color: var(--ink-mid); max-width: 54ch; margin-bottom: 1.9rem; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.hero-stats { display: flex; gap: 2.6rem; border-top: 1px solid var(--rule);
              padding-top: 1.4rem; margin-bottom: 1.3rem; }
.hero-stats b { display: block; font-size: 1.7rem; font-weight: 500; letter-spacing: -.02em; }
.hero-stats span { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--ink-mute); }
.kicker { font-style: italic; color: var(--ink-mid); }
.hero-book img { width: min(380px, 100%); margin: 0 auto; border-radius: 3px;
                 box-shadow: var(--shadow-cover); }
.hero-book figcaption { text-align: center; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 1.1rem; }

/* ---- sections ---- */
.sec { padding: 5.5rem 0; }
.sec.alt { background: var(--paper-deep); }

/* ---- the math ---- */
.math-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.8rem; }
.math-col { padding: 1.5rem 1.6rem; border-radius: 6px; }
.math-col h3 { margin-bottom: .5rem; }
.math-col.before { background: var(--paper-deep); border: 1px solid var(--rule); }
.math-col.after { background: color-mix(in srgb, var(--sage) 12%, var(--paper));
                  border: 1px solid color-mix(in srgb, var(--sage) 40%, var(--rule)); }
.math-wrap table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; }
.math-wrap th { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-mute); text-align: right;
  padding: .55rem .85rem; border-bottom: 2px solid var(--ink); }
.math-wrap th:first-child { text-align: left; }
.math-wrap td { padding: .7rem .85rem; border-bottom: 1px solid var(--rule);
                text-align: right; font-size: .98rem; color: var(--ink-mid); }
.math-wrap td:first-child { text-align: left; color: var(--ink); }
/* COLOUR CARRIES THE ARGUMENT, not decoration. The whole math section exists
   to make one comparison land, so the two sides must be readable as loss and
   gain at a glance - before the reader has read a single row. Oxblood is
   already the page's "this costs you" colour and sage its "this is settled"
   colour, so the table simply reuses them rather than introducing new hues. */
.math-wrap td:nth-child(2) { color: var(--ox); }
.math-wrap td.after { color: var(--sage-dk); font-weight: 600;
                      background: color-mix(in srgb, var(--sage) 8%, transparent); }
.math-wrap th:last-child { color: var(--sage-dk); }
.math-wrap th:nth-child(2) { color: var(--ox); }
.math-col.before { border-left: 3px solid color-mix(in srgb, var(--ox) 55%, var(--rule)); }
.math-col.after  { border-left: 3px solid var(--sage); }
/* ONE phrase per field may be emphasised (see _emph). A warm underline, never a
   highlighter block - a block of colour behind text reads as an advert, an
   underline reads as someone stressing a word while speaking. */
.hl { font-weight: 600; color: var(--ink);
      box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--gold) 34%, transparent); }
.publisher-line { font-size: .85rem; color: var(--ink-mute); margin-top: .8rem; }
.publisher-line strong { color: var(--ink); }
.publisher-mark { font-family: var(--mono); font-size: .8rem; letter-spacing: .24em;
                  text-transform: uppercase; color: var(--ink); margin-bottom: .9rem; }
.math-net { font-size: 1.2rem; padding: 1rem 1.3rem; border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 16%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--rule)); }

/* ---- contents grid (markup emitted by build_site) ---- */
.contents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                 gap: 1.1rem; margin: 2rem 0; }
.contents-grid .ch { background: var(--paper); border: 1px solid var(--rule);
                     border-radius: 6px; padding: 1.3rem 1.4rem; }
.sec.alt .contents-grid .ch { background: var(--paper-warm); }
.contents-grid .ch b { display: block; font-size: 1.15rem; font-weight: 600;
                       letter-spacing: -.015em; line-height: 1.28; margin-bottom: .3rem; }
.contents-grid .ch .pp { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em;
                          text-transform: uppercase; color: var(--gold); }
.contents-grid .ch p { font-size: .95rem; color: var(--ink-mid); margin-top: .5rem; }
.sec-cta, .faq-cta { margin-top: 2rem; }

/* ---- author ---- */
.about-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3.5rem; align-items: center; }
.about-photo img { border-radius: 6px; box-shadow: var(--shadow-page); }
.bio { color: var(--ink-mid); white-space: pre-line; }

/* ---- the offer stack ---- */
.offer { background: var(--paper-deep); }
.offer-grid { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr;
              gap: 72px; align-items: start; }
/* a paper MAT around the cover, not a border - the cover sits on a page that
   is itself lifted off the background. This is what makes his offer read as a
   physical object rather than a product tile. */
.cover-frame { width: 100%; max-width: 480px; margin: 0 auto; padding: 14px;
               background: var(--paper); box-shadow: var(--shadow-page); }
.cover-frame img { width: 100%; }
.offer-card { background: transparent; border: 0; border-radius: 0;
              padding: 0; box-shadow: none; }
.offer-title { font-size: 1.9rem; font-weight: 600; letter-spacing: -.022em; margin: .3rem 0 .9rem; }
.price-line { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
              padding: 18px 0; border-top: 1px solid var(--rule);
              border-bottom: 1px solid var(--rule); margin-bottom: 26px; }
.price-now { font-family: var(--serif); font-size: 3.2rem; font-weight: 500;
             font-style: italic; color: var(--ox); line-height: 1; letter-spacing: -.02em; }
.price-was { font-family: var(--mono); font-size: .94rem; color: var(--ink-mute);
             text-decoration: line-through; }
.price-note { color: var(--ox); letter-spacing: .24em; }
.offer-tag { font-family: var(--mono); font-size: .74rem; letter-spacing: .24em;
             text-transform: uppercase; color: var(--ox); font-weight: 500;
             margin-bottom: 18px; display: block; }
.offer-lede { font-size: 1.12rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 22px; }
.payback { font-size: 1.08rem; color: var(--ink); font-style: italic;
           background: color-mix(in srgb, var(--sage) 12%, var(--paper));
           border-left: 3px solid var(--sage); padding: .9rem 1.1rem;
           border-radius: 0 6px 6px 0; margin-bottom: 1.6rem; }
/* an empty slot must leave NO furniture behind - an old page built before
   these tokens existed fills them with "" */
.payback:empty, .offer-tag:empty { display: none; }
.stack-h { color: var(--ox); letter-spacing: .24em; margin-bottom: .7rem; }
.addon-row { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline;
             padding: .9rem 0; border-bottom: 1px solid var(--rule); }
.addon-row strong { font-size: 1.1rem; font-weight: 600; display: block; }
.bonus-tag { display: inline-block; font-family: var(--mono); font-size: .6rem;
             font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
             color: var(--paper); background: var(--gold);
             padding: .18rem .5rem; border-radius: 2px; margin-bottom: .4rem; }
.addon-row p { font-size: .95rem; color: var(--ink-mid); margin-top: .2rem; }
.addon-price { font-family: var(--mono); font-size: .95rem; color: var(--ink-mute); white-space: nowrap; }
.stack-total { display: flex; justify-content: space-between; font-weight: 600;
               padding: 1.1rem 0 .4rem; font-size: 1.08rem; }
.pay-today { display: flex; justify-content: space-between; align-items: baseline;
             background: color-mix(in srgb, var(--gold) 15%, var(--paper));
             border: 1px solid color-mix(in srgb, var(--gold) 42%, var(--rule));
             border-radius: 6px; padding: 1rem 1.3rem; margin: 1.1rem 0 1.7rem; }
.pay-today span { font-style: italic; font-size: 1.2rem; color: var(--ink); }
/* THE TWO FIGURES ARE SEPARATE ELEMENTS (operator, 2026-08-24: "$57$37" with
   no gap, both in the same oxblood - "should be a different font color and
   spacing"). The old markup leaned on flex gap between an element and a bare
   text node, and on the struck price inheriting a muted colour it never got.
   Each figure now carries its own colour and its own margin, so neither
   depends on inheritance or on anonymous flex items. */
.pay-today b.pay-figure { font-family: var(--mono); font-size: 1.6rem;
                          display: inline-block; white-space: nowrap; }
.pay-today .pay-was { color: color-mix(in srgb, var(--ink-mute) 88%, var(--paper));
                      font-size: 1.06rem; font-weight: 400; margin-right: .62rem;
                      text-decoration: line-through;
                      text-decoration-thickness: .07em;
                      text-decoration-color: color-mix(in srgb, var(--ink-mute) 70%, transparent); }
.pay-today .pay-was:empty { display: none; margin-right: 0; }
.pay-today .pay-now { color: var(--ox); font-weight: 600; letter-spacing: -.01em; }
.delivery, .guarantee { font-size: .95rem; color: var(--ink-mid); margin-top: .9rem; }

/* ---- faq ---- */
#faq details { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; }
#faq summary { font-weight: 600; font-size: 1.15rem; letter-spacing: -.015em;
               cursor: pointer; list-style: none; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: '+'; float: right; font-family: var(--mono); color: var(--gold); }
#faq details[open] summary::after { content: '\2013'; }
#faq details p { padding-top: .7rem; color: var(--ink-mid); }

/* ---- close + footer ---- */
.close { background: var(--ink); color: var(--paper); }
.close h2 { color: var(--paper); font-size: clamp(2.6rem, 5vw, 4.4rem); max-width: 18ch;
            margin: 0 auto 1.2rem; }
.close .lede { color: color-mix(in srgb, var(--paper) 72%, var(--ink));
               margin-left: auto; margin-right: auto; }
.close .btn-big { width: auto; }
/* THE HIGHLIGHT WENT INVISIBLE ON THE INVERTED BAND (operator, 2026-08-24:
   "Give tomorrow [less to carry]" - the emphasised half unreadable). `.hl`
   sets color:var(--ink) for the light page, and this section paints --ink as
   its BACKGROUND, so the emphasised words were dark-on-dark. Repaint them for
   the inverted context and lift the underline so it still reads as emphasis. */
.close .hl, .close h2 .hl { color: var(--paper);
      box-shadow: inset 0 -.45em 0 color-mix(in srgb, var(--gold) 55%, transparent); }
.close em { color: color-mix(in srgb, var(--gold) 70%, var(--paper)); }
/* THE FOOTER SHARES THE CLOSING BAND'S DARK GROUND (operator, 2026-08-24:
   "bottom of the footer, text blurred out"). It sits directly under .close
   with no background of its own, so it inherited the dark band while its
   muted legal line kept the light-page colour - measured 3.61:1, under the
   4.5:1 a body text needs to be read. Both lines now take their colour from
   the paper, which is correct on either polarity. */
footer { padding: 3rem 0 4rem; border-top: 1px solid var(--rule);
         background: var(--ink); color: var(--paper); }
footer .dim { color: color-mix(in srgb, var(--paper) 74%, var(--ink)); }
footer .publisher-mark { color: color-mix(in srgb, var(--paper) 90%, var(--ink)); }

/* ---- exit modal ---- */
dialog#exit-modal { margin: auto; border: 1px solid var(--rule); border-radius: 8px;
                    background: var(--paper); color: var(--ink); width: min(32rem, calc(100vw - 2rem));
                    max-width: none; padding: 2.2rem 2.4rem; text-align: center; }
dialog#exit-modal::backdrop { background: rgba(21,17,11,.6); }
dialog#exit-modal h2 { font-size: 1.9rem; margin-bottom: .9rem; }
dialog#exit-modal p { color: var(--ink-mid); margin: 0 0 1.5rem; }
.modal-cover { width: 120px; aspect-ratio: 3/4; margin: 0 auto 22px;
              box-shadow: var(--shadow-cover); }
.modal-cover img { width: 100%; height: 100%; object-fit: cover; }
.modal-price { display: flex; align-items: baseline; justify-content: center; gap: 14px;
               padding: 14px 0; border-top: 1px solid var(--rule);
               border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
.modal-price .price-now { font-size: 2.6rem; }
.modal-clock { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em;
               text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.modal-clock b { color: var(--ox); font-variant-numeric: tabular-nums; }
.modal-clock[hidden], .modal-price:empty { display: none; }
.modal-x { display: block; margin: 16px auto 0; background: none; border: none;
           font-family: var(--mono); font-size: .72rem; letter-spacing: .18em;
           text-transform: uppercase; color: var(--ink-mute); cursor: pointer;
           text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero-grid, .about-grid, .math-cols { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero-book { order: -1; }
  .hero-book img { width: min(240px, 68%); }
  .hero-stats { gap: 1.6rem; flex-wrap: wrap; }
  .offer-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .cover-frame { max-width: 300px; }
  .tb-note, .tb-nav { display: none; }
}