/* The home page: a long-form sales page. Loads after fl.css and lp.css, and
   only adds what those two do not already provide — the reading measure for
   the lead, the testimonial blocks, the price cards and the FAQ.

   The narrow reading sections are CENTRED COLUMNS of LEFT-RANGED TEXT. Those are two
   different things: ranging the text left is right for reading, but pinning the column to
   the left edge of a 1240px frame leaves half the page empty beside it and looks broken.
   Only the hero may sit left, because the picture fills the other half.

   Composition rule, and it is the whole organising idea of this file:
   CENTRED MEANS THIS ASKS FOR MONEY. The offer, the two price cards and the
   closing ask are centred. Everything that explains or proves is ranged left
   on its own measure. Centring was previously the default for every heading
   and most sections, which left the reader no way to tell the pitch from the
   argument, and read as a page nobody composed.

   Treatment is assigned by role, not applied uniformly. A border, a fill, a
   radius and a glow each mark a thing as a separate object, so they are spent
   on the one object that is meant to be lifted off the page — the offer.
     offer        raised panel, gold border, the page's only glow
     price cards  real cards, because they are two things you choose between
     voices       no card at all: quoted speech on the page ground
     guarantee    a signed promise with its seal, not a panel
   Previously all four shared one border, one 7px radius and one vertical
   gradient, which flattened them into a single undifferentiated stack. */

.home-wrap { width:min(1240px,100%); margin:0 auto; padding:0 16px }

/* --- headings: ranged left, with a short gold rule above instead of the
       centring that used to carry them. The rule gives the heading a top edge
       to sit against, so it reads as the start of a section. --- */
.turn h2, .goods h2, .press h2, .voices h2, .faq h2 {
  font-family:'Oswald',sans-serif; color:var(--gold); text-align:left;
  text-wrap:balance; font-size:clamp(23px,3.2vw,32px);
  margin:1.6em 0 .7em; line-height:1.2 }
.turn h2::before, .goods h2::before, .press h2::before, .voices h2::before,
.faq h2::before {
  content:""; display:block; width:38px; height:2px; background:var(--gold);
  margin:0 0 14px }

/* --- the touchstone: the first look. The brand line, and directly under it the
       one paragraph that answers all four of the questions a reader is asking
       before they will read anything else — what this is, what it costs, what
       they get out of it, and why they should believe it. The price and the
       way in are on this screen, not eight screens down. --- */
/* The band is full width — it sits outside .home-wrap in the markup, so it needs
   no 100vw trick and cannot make the page scroll sideways. The picture carries
   the right of the frame and the type sits in the dark of the left, which is
   what makes ranging the type left a composition rather than an unstyled
   document. The scrim is a horizontal wash so the temple stays visible. */
.touchstone {
  min-height:clamp(430px,52vw,600px); display:flex; align-items:center;
  background-image:
    linear-gradient(90deg, rgba(5,18,36,.96) 0%, rgba(5,18,36,.88) 30%,
                           rgba(5,18,36,.55) 58%, rgba(5,18,36,.18) 82%,
                           rgba(5,18,36,.34) 100%),
    url('/images/hero-dawn.jpg');
  background-size:cover; background-position:center right; background-repeat:no-repeat;
  border-bottom:1px solid var(--line) }
.ts-inner { width:min(1240px,100%); margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:46px; text-align:left }
.touchstone .eyebrow { font-family:'Oswald',sans-serif; letter-spacing:.2em;
  text-transform:uppercase; font-size:13px; color:var(--gold); margin:0 0 14px }
.touchstone h1 { margin:0; font-size:clamp(34px,4.6vw,56px); line-height:1.06;
  text-wrap:balance; max-width:24ch; color:#fff;
  text-shadow:0 2px 24px rgba(3,12,26,.75) }
.touchstone h1 em { color:var(--gold); font-style:normal }
.touchstone .deck { font-family:'Lora',Georgia,serif; font-size:clamp(17px,1.65vw,20px);
  line-height:1.6; color:var(--ink); max-width:44ch; margin:20px 0 0;
  text-shadow:0 1px 16px rgba(3,12,26,.8) }
.touchstone .deck strong { color:var(--gold); font-weight:600 }
.ts-cta { margin:26px 0 0; display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.ts-cta .btn { font-size:18px; padding:16px 34px }
.ts-alt { font-size:15px; color:var(--ink); font-family:system-ui,sans-serif;
  text-shadow:0 1px 12px rgba(3,12,26,.9) }
.ts-alt a { color:var(--gold) }

/* the credibility strip: one line across the full width, directly under the band */
.ts-trust { margin:0; padding:13px max(16px,env(safe-area-inset-left,0px));
  background:rgba(5,18,36,.72); border-bottom:1px solid var(--line);
  font-family:system-ui,sans-serif; font-size:14px; color:var(--soft);
  line-height:1.55; text-align:center }
/* 92ch clamped this to ~660px and broke a 150-character line into a centred
   orphan. It holds one line to about 1100px; below that it wraps balanced. */
.ts-trust span { display:inline-block; max-width:min(1240px,100%); text-wrap:balance }
.ts-trust em { color:var(--ink); font-style:italic }

@media (max-width:760px) {
  .touchstone { min-height:0; background-position:center center;
    background-image:
      linear-gradient(180deg, rgba(5,18,36,.80) 0%, rgba(5,18,36,.90) 55%,
                              rgba(5,18,36,.96) 100%),
      url('/images/hero-dawn.jpg') }
  .ts-inner { padding-block:38px }
  .touchstone h1 { max-width:none }
}

/* --- the lead: the problem, ranged left, because it is the argument --- */
.lead { text-align:left; padding:34px 0 10px }
.lead-copy { max-width:680px; margin:0 auto; text-align:left }
.lead-copy p { font-family:'Lora',Georgia,serif; font-size:clamp(17px,2vw,19px);
  line-height:1.8; color:#cfe0f2; margin:0 0 1.25em }
/* the first line carries the whole section, so it is set at the size of one */
.lead-copy .lead-open { font-size:clamp(23px,3vw,31px); line-height:1.25; color:#fff;
  font-family:'Oswald',sans-serif; margin:0 0 .8em; text-wrap:balance }
.lead-copy em { color:var(--ink); font-style:italic }
.lead-copy strong { color:var(--ink) }
.lead-copy .lead-turn { font-size:clamp(18px,2.2vw,21px); color:var(--ink);
  border-left:3px solid var(--gold); padding-left:18px; margin-top:1.6em }

/* --- the hero trace: the real session, drawn to scale. The figure is only
       emitted when there are real chunk averages to draw; there is no
       placeholder shape. --- */
.hero-trace { margin:30px 0 0; max-width:720px }
.hero-trace svg { display:block; width:100%; height:auto }
.hero-trace figcaption { font-family:system-ui,sans-serif; font-size:13px;
  color:var(--soft); line-height:1.55; margin:10px 0 0 }
.hero-trace .tr-line { fill:none; stroke:var(--gold); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round }
.hero-trace .tr-ref { stroke:var(--line); stroke-width:1; stroke-dasharray:4 4 }
.hero-trace .tr-axis { fill:var(--soft); font-family:system-ui,sans-serif; font-size:11px }
.hero-trace .tr-mark { fill:var(--gold) }
.hero-trace .tr-score { fill:var(--ink); font-family:'Oswald',sans-serif; font-size:19px }

/* --- the turn --- */
.turn { max-width:680px; margin:10px auto 54px }
.turn p { font-family:'Lora',Georgia,serif; font-size:17.5px; line-height:1.78;
  color:#cfe0f2; margin:0 0 1.15em }
.turn em { color:var(--ink); font-style:italic }
.turn-cta { text-align:center; margin:28px 0 0 }   /* asks for money */
.turn-cta .btn { font-size:18px; padding:16px 36px }
.turn-alt { display:block; margin-top:12px; font-size:15px; color:var(--soft);
  font-family:system-ui,sans-serif }
.turn-alt a { color:var(--gold) }

/* --- customer voices: quoted speech, set on the page ground. No panel, no
       radius, no rail — a hairline above each, and because this is a grid
       those rules meet across a row and give the block its structure. --- */
.voices { margin:0 0 54px }
.vnote { text-align:left; color:var(--soft); font-size:14.5px; max-width:620px;
  margin:0 0 10px; line-height:1.6 }
.vgrid { display:grid; column-gap:44px; row-gap:0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }
.vgrid blockquote { margin:0; padding:26px 0 24px; border:0; border-radius:0;
  background:none; border-top:1px solid var(--line); min-width:0 }
.vgrid blockquote p { font-family:'Lora',Georgia,serif; font-style:italic; font-size:16.5px;
  line-height:1.65; color:var(--ink); margin:0 0 12px }
.vgrid blockquote p::before { content:"\201C"; font-family:'Cinzel',Georgia,serif;
  color:var(--gold2); font-size:32px; line-height:0; vertical-align:-5px;
  margin-right:5px }
.vgrid cite { font-style:normal; font-family:system-ui,sans-serif; font-size:13.5px;
  color:var(--gold); display:block }
.vgrid cite .where { display:block; color:var(--soft); font-size:12.5px; margin-top:2px }

/* the professionals are a different kind of witness from a customer: a heavier
   rule, and the name set in the brand's own serif to mark the authority. */
.pros .vgrid blockquote { border-top:2px solid var(--gold2) }
.pros .vgrid cite { font-family:'Cinzel',Georgia,serif; letter-spacing:.05em;
  font-size:14px }

/* --- the goods: the twelve cards --- */
.goods { margin:0 0 54px; scroll-margin-top:20px }
.goods .sub, .press .sub { text-align:left; color:var(--soft); margin:0 0 28px;
  max-width:620px; line-height:1.6 }
.goods .dcard h3 { font-family:'Oswald',sans-serif; color:var(--gold); font-size:19px;
  margin:18px 20px 8px; line-height:1.25 }

/* --- press --- */
.press { margin:0 0 54px }

/* --- the offer: the one raised object on the page, and the only glow --- */
.offer { margin:0 0 54px; padding:34px 26px; border-radius:8px;
  border:1px solid var(--gold); text-align:center;
  background:
    radial-gradient(90% 150% at 50% -30%, rgba(240,192,64,.14), transparent 62%),
    linear-gradient(180deg,#123358,#0c2440) }
.offer h2 { font-family:'Oswald',sans-serif; color:var(--gold); text-align:center;
  text-wrap:balance; font-size:clamp(23px,3.2vw,32px); margin:0 0 .7em; line-height:1.2 }
.offer-body { max-width:760px; margin:0 auto 30px; text-align:center; color:#cfe0f2;
  font-size:16.5px; line-height:1.7 }
.prices { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  max-width:820px; margin:0 auto; align-items:start }
.price-card { text-align:center; padding:26px 22px; border-radius:7px;
  border:1px solid var(--line); background:rgba(6,22,42,.55); min-width:0 }
/* the two cards are a choice, so the recommended one is plainly dominant */
.price-card.headline-card { border-color:var(--gold); background:rgba(10,34,62,.85);
  box-shadow:0 0 0 1px rgba(240,192,64,.25) }
.pc-kicker { font-family:'Oswald',sans-serif; letter-spacing:.12em; text-transform:uppercase;
  font-size:12.5px; color:var(--gold); margin:0 0 10px }
.pc-price { font-family:'Oswald',sans-serif; font-size:clamp(38px,6vw,54px); color:var(--ink);
  line-height:1; margin:0; font-variant-numeric:tabular-nums }
.pc-was { color:var(--soft); font-size:14px; margin:8px 0 18px }
.price-card .btn { width:100%; border:0; font-size:16.5px; padding:14px 20px }
.price-card .btn.ghost { background:transparent; border:1px solid var(--gold);
  color:var(--gold) }
.pc-note { color:var(--soft); font-size:13px; margin:12px 0 0; line-height:1.5 }

/* --- faq --- */
.faq { max-width:1060px; margin:0 auto 54px }
/* A grid, not CSS columns. Columns flow the items by height, so the two sides end at
   different depths and the rules never line up; a grid puts each pair on a shared row,
   so every rule meets its neighbour and the block ends square. One column under 820px. */
.faq-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
  column-gap:52px; align-items:start }
.faq details { border-bottom:1px solid var(--line); padding:16px 2px; min-width:0 }
.faq summary { cursor:pointer; font-family:'Oswald',sans-serif; font-size:18px;
  color:var(--ink); list-style:none }
.faq summary::-webkit-details-marker { display:none }
.faq summary::before { content:"+"; color:var(--gold); margin-right:10px }
.faq details[open] summary::before { content:"\2013" }
.faq details p { font-family:'Lora',Georgia,serif; color:#cfe0f2; line-height:1.75;
  margin:12px 0 0 24px }

/* --- the guarantee: a promise with its seal beside it, not another panel --- */
.guarantee { max-width:860px; margin:0 auto 54px; text-align:left;
  border:0; border-radius:0; background:none;
  border-top:2px solid var(--gold); padding:28px 0 0;
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start }
.guarantee img { width:148px; height:auto; flex:none }
.guarantee h2 { font-family:'Oswald',sans-serif; color:var(--gold); text-align:left;
  font-size:clamp(23px,3.2vw,32px); margin:0 0 12px; line-height:1.2 }
.guarantee p { font-family:'Lora',Georgia,serif; font-size:17px; line-height:1.75;
  color:#cfe0f2; margin:0; max-width:62ch }
@media (max-width:620px) {
  .guarantee { grid-template-columns:1fr; gap:18px }
  .guarantee img { width:120px }
}

/* --- the last ask: centred, because it asks for money --- */
.last { max-width:680px; margin:0 auto 64px; text-align:center }
.last h2 { font-family:'Oswald',sans-serif; color:var(--gold); text-align:center;
  text-wrap:balance; font-size:clamp(23px,3.2vw,32px); margin:1.6em 0 .7em;
  line-height:1.2 }
.last p { font-family:'Lora',Georgia,serif; font-size:17.5px; line-height:1.78;
  color:#cfe0f2; margin:0 0 1.15em }
.last-cta { margin:26px 0 0 }
.last-cta .btn { font-size:19px; padding:17px 40px }
.last-alt { font-size:15px; color:var(--soft); font-family:system-ui,sans-serif }
.last-alt a { color:var(--gold) }