/* Landing and funnel pages (sections/_frames/landing.html, store build 2026-10-23).
   Light only, phone first, one column of argument. Tokens only, from css/site.css.
   The blocks are sections/lp-*; the Buttons and Text blocks are styled in site.css. */
body.lp{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:18px; line-height:1.6 }
.lp a{ color:var(--accent-ink) }
.lp img{ max-width:100%; height:auto }
.lp h1, .lp h2, .lp h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.01em; text-wrap:balance; color:var(--ink) }
.lp :focus-visible{ outline:2px solid var(--accent-hi); outline-offset:2px }

.lp-sec{ padding:56px 16px }
.lp-sec--tint{ background:var(--bg-2) }
.lp-in{ max-width:var(--w-text); margin:0 auto }
.lp-sec h1{ font-size:clamp(34px,7vw,52px); line-height:1.1; margin:0 0 16px }
.lp-sec h2{ font-size:clamp(28px,5.6vw,40px); line-height:1.15; margin:0 0 18px }
.lp-sec p{ margin:0 0 16px; color:var(--ink-2) }
.lp-eyebrow{ display:block; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:10px }
.lp-lede{ font-size:20px; line-height:1.55 }
.lp-note{ font-size:15px; color:var(--muted); margin-top:12px }
.lp-cta{ white-space:normal; text-align:center; max-width:100% }

/* hero: words first on a phone, image beside them on a wide screen */
.lp-hero{ padding-top:40px }
.lp-hero__grid{ max-width:var(--w-wide); display:grid; gap:32px; align-items:center }
.lp-hero__img{ display:block; margin:0 auto; max-height:520px; width:auto }
@media (min-width:921px){ .lp-hero__grid{ grid-template-columns:1.2fr 1fr } }

/* step counter */
.lp-progress{ padding:16px 16px 0 }
.lp-progress__label{ margin:0 0 8px; font-size:14px; font-weight:600; color:var(--ink-2) }
.lp-progress__track{ height:8px; border-radius:var(--r-pill); background:var(--line); overflow:hidden }
.lp-progress__track i{ display:block; height:100%; width:0; background:var(--accent-hi); border-radius:inherit; transition:width .4s }

/* value stack */
.lp-stack{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow) }
.lp-stack__shot{ display:block; margin:0 auto 20px; border-radius:var(--r-sm) }
.lp-stack__items{ list-style:none; margin:0 0 16px; padding:0 }
.lp-stack__items li{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line) }
.lp-stack__items img{ width:56px; height:56px; object-fit:contain; flex:none }
.lp-stack__name{ flex:1; min-width:0 }
.lp-stack__value{ font-weight:600; color:var(--ink-2); white-space:nowrap }
.lp-stack__total, .lp-stack__price, .lp-price{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin:8px 0 }
.lp-stack__total s{ color:var(--muted) }
.lp-stack__price strong, .lp-price strong{ font:600 32px/1.1 var(--serif); color:var(--ink) }
.lp-price s{ color:var(--muted) }
.lp-bump{ display:flex; align-items:center; gap:12px; margin:16px 0; padding:14px; border:2px dashed var(--accent); border-radius:var(--r-sm); background:var(--bg); cursor:pointer }
.lp-bump img{ width:48px; height:48px; object-fit:contain; flex:none }
.lp-bump input{ width:24px; height:24px; flex:none; accent-color:var(--accent-ink) }
.lp-stack .lp-cta{ display:flex; width:100%; margin-top:8px }

/* upsell, downsell, last chance */
.lp-offer__img{ display:block; margin:0 auto 20px; max-height:420px; width:auto }
.lp-offer .lp-cta, .lp-basket .lp-cta{ display:flex; width:100%; margin:8px 0 4px }
.lp-no{ display:block; width:100%; min-height:var(--tap); margin:4px 0 0; background:none; border:0; color:var(--ink-2); font:500 16px/1.4 var(--sans); text-decoration:underline; cursor:pointer }
.lp-error{ color:var(--ink); font-weight:600 }
.lp-fallback{ margin-top:16px; padding:16px; border:1px solid var(--line-strong); border-radius:var(--r-sm) }
.lp-basket__list{ list-style:none; margin:0 0 12px; padding:0 }
.lp-basket__list li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line) }

/* thank you */
.lp-thanks__order{ font-size:16px }
.lp-thanks h2{ font-size:24px; margin-top:28px }
.lp-thanks__files{ padding-left:20px; margin:0 0 20px }

/* shop: one row per product (layout only until the brand spec) */
.lp-shop{ list-style:none; margin:0; padding:0 }
.lp-shop li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line) }
.lp-shop img{ width:56px; height:56px; object-fit:contain; flex:none }
.lp-shop__name{ flex:1; min-width:0 }
.lp-shop__price{ font-weight:600; white-space:nowrap }

/* quotes, guarantee, questions */
.lp-quotes{ display:grid; gap:16px }
.lp-quotes figure{ margin:0; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card) }
.lp-quotes blockquote{ margin:0 0 10px; font:italic 20px/1.45 var(--serif); color:var(--ink) }
.lp-quotes figcaption{ font-size:15px; color:var(--muted) }
.lp-guarantee{ border-left:4px solid var(--accent-hi); padding-left:20px }
.lp-faq details{ border-bottom:1px solid var(--line); padding:4px 0 }
.lp-faq summary{ cursor:pointer; min-height:var(--tap); display:flex; align-items:center; font-weight:600 }
.lp-faq p{ margin:4px 0 14px }
.lp-amazon{ text-align:center }
.lp-amazon .amz-disclosure{ font-size:12px; color:var(--muted); margin-top:16px }

.lp-foot{ border-top:1px solid var(--line); padding:28px 16px 36px; font-size:15px; color:var(--muted) }
.lp-foot .lp-in{ display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between }
.lp-foot nav{ display:flex; flex-wrap:wrap; gap:4px 18px }
.lp-foot a{ color:var(--ink-2); text-decoration:none; min-height:var(--tap); display:inline-flex; align-items:center }

@media (max-width:640px){
  .lp-sec{ padding:40px 16px }
  .lp-stack{ padding:16px }
}

/* Brand layer (art direction #621, approved 2026-10-29): light pages, navy text, gold only
   on navy or as a fill behind navy text or at 24px and up, no red. EB Garamond headings,
   Inter body 18px, even-width digits for prices. */
:root{ --lp-navy:#0a1828; --lp-navy-2:#060f1a; --lp-gold:#c9a250; --lp-band:#f0f5fa; --lp-soft:#6a8faa }
body.lp{ background:#fff; color:var(--lp-navy); font-size:18px }
.lp h1, .lp h2, .lp h3{ font-family:'EB Garamond',var(--serif); color:var(--lp-navy) }
.lp h1{ font-size:44px } .lp h2{ font-size:36px }
.lp-sec p, .lp-note, .lp-lede{ color:var(--lp-navy) }
.lp-sec--tint{ background:var(--lp-band) }
.lp-note, .lp-foot, .lp-foot a, .lp-quotes figcaption, .lp-stack__value{ color:var(--lp-navy); opacity:.78 }
.lp a{ color:var(--lp-navy) }
.lp-price strong, .lp-stack__price strong, .lp-stack__value, .lp-shop__price, .lp-basket__list li{ font-variant-numeric:tabular-nums }

/* buttons: gold fill, navy text, 2px navy border; hover navy fill, gold text */
.lp .btn--primary, .lp .btn--primary:hover{ background:var(--lp-gold); color:var(--lp-navy); border:2px solid var(--lp-navy); box-shadow:none; filter:none }
.lp .btn--primary:hover, .lp .btn--primary:focus-visible{ background:var(--lp-navy); color:var(--lp-gold) }
.lp .btn--ghost{ border:2px solid var(--lp-navy); color:var(--lp-navy) }
.lp-no{ color:var(--lp-navy); font-size:18px; min-height:48px }

/* the value stack: a navy price band with the price large in gold */
.lp-stack{ background:#fff; border:1px solid var(--lp-navy); box-shadow:none; padding:0; overflow:hidden }
.lp-stack__shot, .lp-stack__items, .lp-stack__total, .lp-bump, .lp-note{ margin-left:24px; margin-right:24px }
.lp-stack__shot{ margin-top:24px }
.lp-stack__items li{ border-bottom:1px solid var(--lp-band); min-height:56px }
.lp-stack__name{ font-size:20px }
.lp-stack__total{ font-weight:700; color:var(--lp-navy) }
.lp-stack__total s{ color:var(--lp-navy); opacity:.6 }
.lp-stack__price{ margin:16px 0 0; padding:20px 24px; background:linear-gradient(var(--lp-navy),var(--lp-navy-2)); color:#fff }
.lp-stack__price span{ color:#fff; font-size:16px; font-weight:700 }
.lp-stack__price strong{ color:var(--lp-gold); font-size:44px }
.lp-pay{ margin:0 24px 24px }
.lp-pay label{ display:block; margin:16px 0 0; font-weight:700; color:var(--lp-navy) }
.lp-pay input{ display:block; width:100%; box-sizing:border-box; margin-top:8px; min-height:48px; padding:12px 14px; border:1px solid var(--lp-navy); border-radius:12px; font:16px/1.4 var(--sans); color:var(--ink); background:#fff }
.lp-pay .lp-cta{ width:100%; margin:16px 0 0 }
.lp-stack .lp-cta{ width:calc(100% - 48px); margin:16px 24px 24px }

/* "Free" pill: gold fill with navy text */
.lp-stack__value em, .lp-pill{ font-style:normal; background:var(--lp-gold); color:var(--lp-navy); border-radius:999px; padding:2px 10px; font-weight:700 }

/* progress: one segment per step, done navy, current navy with a gold tip, to come pale */
.lp-progress__track{ display:flex; gap:4px; background:none; height:10px; overflow:visible }
.lp-progress__track i{ display:none }
.lp-progress__track b{ flex:1; border-radius:5px; border:1px solid var(--lp-navy); background:var(--lp-band) }
.lp-progress__track b.is-done{ background:var(--lp-navy) }
.lp-progress__track b.is-now{ background:linear-gradient(90deg,var(--lp-navy) 80%,var(--lp-gold) 80%) }
.lp-progress__label{ color:var(--lp-navy); font-size:16px }

/* the add-on box: navy border, large checkbox, whole box clickable */
.lp-bump{ border:2px solid var(--lp-navy); border-style:solid; background:#fff; padding:16px }
.lp-bump input{ width:28px; height:28px; accent-color:var(--lp-navy) }

/* phone: 16px side margins, 56px thumbnails, the pay button sticks to the bottom */
@media (max-width:640px){
  .lp-sec, .lp-progress{ padding-left:16px; padding-right:16px }
  .lp h1{ font-size:32px } .lp h2{ font-size:28px }
  .lp-stack__shot, .lp-stack__items, .lp-stack__total, .lp-bump, .lp-note, .lp-pay{ margin-left:16px; margin-right:16px }
  .lp-stack__items li{ flex-wrap:wrap }
  .lp-stack .lp-cta{ position:sticky; bottom:0; z-index:5; width:calc(100% - 32px); margin:16px 16px 0; box-shadow:0 -8px 16px #fff }
}
/* product tiles with no picture yet: a navy tile, never a broken image */
.lp-stack__items img[src=""], .lp-shop img[src=""]{ visibility:hidden }

/* step pages: page words, the downloads list, the final-offer basket, small print */
.lp-body{ font-size:18px; line-height:1.6 }
.lp-body p, .lp-body ul{ margin:0 0 16px }
.lp-body ul{ padding-left:22px } .lp-body li{ margin:0 0 8px }
.lp-body h3{ font-size:24px; margin:24px 0 8px }
.lp-small{ font-size:16px; opacity:.78; margin-top:16px }
.lp-small p{ margin:0 0 8px }
.lp-yes-note{ text-align:center; margin:8px 0 4px }
.lp-pill{ display:inline-block; margin-bottom:8px }
.lp-start{ border:2px solid var(--lp-navy); border-radius:var(--r-card); padding:16px 20px; margin:0 0 16px }

/* the downloads list the checkout fills in: the main one first and large, the rest smaller */
.lp-thanks__files{ display:grid; gap:8px; margin:0 0 20px }
.store-file{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--lp-navy); border-radius:var(--r-sm); background:#fff; min-height:56px; font-size:18px }
.store-file--primary{ padding:20px; font-size:24px; background:var(--lp-band); border-width:2px }
.store-file-btn{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border-radius:999px; background:var(--lp-gold); color:var(--lp-navy); border:2px solid var(--lp-navy); font-weight:700; text-decoration:none; white-space:nowrap }
.store-file--primary .store-file-btn{ min-height:56px; padding:0 28px; font-size:20px }
.store-file-btn:hover, .store-file-btn:focus-visible{ background:var(--lp-navy); color:var(--lp-gold) }
.lp-thanks__help{ margin:24px 0 }
.lp-thanks__print{ margin-top:32px; padding-top:16px; border-top:1px solid var(--lp-band); font-size:16px }
.lp-thanks__print .btn{ min-height:48px }
.lp-thanks__print .amz-disclosure{ font-size:12px; opacity:.7 }

/* final offer: one row per item, a big tick box, the whole row clickable */
.lp-basket__list{ display:grid; gap:8px; margin:0 0 12px }
.store-basket-row, .lp-basket__list label{ display:flex; align-items:center; gap:14px; min-height:64px; padding:12px 16px; border:2px solid var(--lp-navy); border-radius:var(--r-sm); background:#fff; cursor:pointer; font-variant-numeric:tabular-nums }
.lp-basket__list input[type=checkbox]{ width:28px; height:28px; flex:none; accent-color:var(--lp-navy) }
@media (max-width:640px){ .store-file{ flex-wrap:wrap } .store-file--primary{ font-size:20px } }

/* the live value stack: the Toolkit as a group, its parts indented */
.lp-stack__group{ display:block; padding:12px 0 4px; font-weight:700; font-size:20px; border-bottom:0 }
.lp-stack__part{ padding-left:20px; min-height:48px }
.lp-bump--box{ position:relative; margin-top:28px }
.lp-bump__tab{ position:absolute; top:-14px; left:16px; background:var(--lp-navy); color:#fff; padding:2px 12px; border-radius:6px; font-size:14px; font-weight:700 }
.lp-bump__words{ display:flex; flex-direction:column; flex:1; min-width:0 }
.lp-bump__price{ white-space:nowrap }