/* ============================================================================
   ufo-tollbooth.css — Utility Forecaster ORDER LANDING PAGE
   ----------------------------------------------------------------------------
   Design lineage: oto-ufo-3yr-upgrade-varf (Andrew, July 2026). Same palette,
   same letter architecture, same masked-panorama hero. Rewritten for an OLP
   rather than an upgrade page, and scoped to #ufo-tollbooth so nothing leaks.

   ONE DELIBERATE DIVERGENCE FROM THE SOURCE SYSTEM
   The upgrade page carries this rule:
       #uf-upgrade-page, #uf-upgrade-page * { font-family: Geist ... !important }
   ...which silently overrides its own `.display { font-family: 'Playfair
   Display' }`. The result is that its headline renders in sans even though the
   stylesheet's own comment says "Playfair Display + Geist body". Playfair loads
   and is never used.

   Here the intent is implemented instead of overridden: PLAYFAIR DISPLAY for
   display type, GEIST for body and UI. No universal !important — headings simply
   declare their own family and win on specificity, the normal way.

   FONTS: Geist and Source Serif 4 are already hosted on www2 (see the OTO's
   @font-face). Playfair Display is pulled from Google here for the mockup —
   before this ships it must be self-hosted through Andrew's font manifest, per
   the wordpress-operations rules. Do not ship a page that hotlinks Google Fonts.
   ========================================================================== */

/* Self-hosted only. Both files are in Andrew's font-manifest.json and serve from www2
   with a one-year cache. No external font CDN — the wordpress-operations rules forbid it. */
@font-face {
  font-family: "Geist Local";
  src: url("https://www2.investingdaily.com/app/uploads/fonts/geist-latin-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("https://www2.investingdaily.com/app/uploads/fonts/sourceserif4_v14_vEFI2_tTDB4M7-auWDN0ahZJW1gb8te1Xb7G.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

/* Kill the browser's default body margin (8px), which otherwise shows as a
   white gutter down the left, right and top of the page.
   `body:has(#root)` is the ONLY way to reach the real <body> from here:
   scope-css.mjs rewrites a bare `body {}` selector to `#ufo-tollbooth`, but
   passes any selector already containing the root id through unscoped
   (scope-css.mjs:88). Copied from the approved varf page, which does exactly
   this — the local preview hides the bug because build.mjs hardcodes
   <body style="margin:0"> into local-preview.html only. */
body:has(#ufo-tollbooth) {
  margin: 0;
  background: #f3eddd;
}

#ufo-tollbooth {
  --paper:        #f3eddd;
  --paper-light:  #fbf7ec;
  --ink:          #163927;
  --ink-deep:     #0d281b;
  /* 2026-08-03: was #536556, which measured 5.34:1 on --paper — AA only, and
     this audience is 55+ so the bar is AAA 7:1. Lightening the ground could not
     fix it (even pure white leaves #536556 at 6.24:1), so the text darkened.
     #3a4b3d = 7.97:1. All 24 uses of this token are text. */
  --ink-soft:     #3a4b3d;
  --brass:        #a8822f;
  --brass-light:  #d8c28a;
  --terracotta:   #a54d37;
  --rule:         rgba(22, 57, 39, .23);
  --shadow:       rgba(54, 42, 20, .18);

  --sans:    "Geist Local", "Helvetica Neue", Arial, sans-serif;
  /* SOURCE SERIF 4 IS THE DISPLAY FACE, because it is what we can actually serve —
     it is in font-manifest.json and loads from www2.
     Playfair Display is deliberately NOT listed. Listing it would render Playfair on any
     machine that happens to have it installed locally (most designers' do), so previews
     would show a face no visitor will ever see. To adopt Playfair: have Andrew add it to
     the manifest, add its @font-face above, and put it first on this line. */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* --- tokens added for this page. The inherited block above is already closed, so
   these must reopen the selector or they declare into the void and every var() falls back. --- */
#ufo-tollbooth {
  /* Deep terracotta: the accent at AAA. --terracotta (#a54d37) is 4.83:1 on paper and is
     reserved for non-text marks. Anything a reader reads uses this. 7.40:1 on --paper. */
  --terracotta-deep: #7d3626;

  /* ---- THE TYPE SCALE ----
     Six steps, and the load-bearing decision is the GAP between --t-beat (26px max) and
     --t-h2 (28px min). The previous build had eighteen distinct display sizes, with emphasis
     lines running to 34px while section headings bottomed out at 27px — so size stopped
     signalling rank, and the only way left to say "this matters" was to draw a box around it.
     That is the mechanical reason the page filled up with containers. With the gap enforced,
     a reader tells "new section" from "important line" at a glance, and the containers aren't
     needed to do it. */
  --t-hero:  clamp(36px, 5vw, 60px);
  --t-h2:    clamp(28px, 3.2vw, 40px);
  --t-beat:  clamp(21px, 2.1vw, 26px);
  --t-sub:   21px;
  --t-body:  19px;
  --t-small: 17px;

  /* One vertical interval. Every gap is a multiple of it, so a 4,000-word letter reads as one
     voice rather than a stack of modules. */
  --space:   1.6rem;
}

#ufo-tollbooth *,
#ufo-tollbooth *::before,
#ufo-tollbooth *::after { box-sizing: border-box; }

#ufo-tollbooth p { margin: 0 0 var(--space); }
#ufo-tollbooth strong { font-weight: 600; color: var(--ink-deep); }
#ufo-tollbooth em { font-style: italic; }

#ufo-tollbooth h1,
#ufo-tollbooth h2,
#ufo-tollbooth h3 {
  font-family: var(--display); font-weight: 700; color: var(--ink-deep);
  letter-spacing: -0.015em; margin: 0;
}

/* ---------- the reading spine ---------- */
#ufo-tollbooth .spine { width: min(720px, calc(100% - 44px)); margin-inline: auto; }
#ufo-tollbooth .sec { padding: calc(var(--space) * 2.6) 0; }
#ufo-tollbooth .sec-alt { background: var(--paper-light); }

#ufo-tollbooth .sec-h2 {
  font-size: var(--t-h2); line-height: 1.14;
  margin: 0 0 calc(var(--space) * 0.9); max-width: 24ch;
}
#ufo-tollbooth .sec-kicker {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 12px;
}
#ufo-tollbooth h3 { font-size: var(--t-sub); }
#ufo-tollbooth .spine > h3 { margin-top: calc(var(--space) * 1.5); }
/* A second heading inside a section — "They are building ten power plants…" lands right
   after a photo caption — had no top margin either, because .sec-h2 only sets a bottom one.
   Targeted by what precedes it, so a heading that opens a section (or follows its kicker)
   stays tight to the top where it belongs. */
#ufo-tollbooth .spine > p + h2,
#ufo-tollbooth .spine > img + h2,
#ufo-tollbooth .spine > figure + h2,
#ufo-tollbooth .spine > div + h2,
#ufo-tollbooth .spine > ul + h2 { margin-top: calc(var(--space) * 2.2); }

/* ---------- TWO emphasis devices, one meaning each ----------
   .beat  = the argument's own voice, roman
   .turn  = Robert stepping out to address the reader, italic
   The previous build had four devices doing this job across 26 instances, with no rule a
   reader could learn. .verdict and .ctalead are gone; both folded in here. */
#ufo-tollbooth .beat {
  font-family: var(--display); font-size: var(--t-beat); line-height: 1.25;
  color: var(--ink-deep); max-width: 32ch;
  margin: calc(var(--space) * 1.4) 0 var(--space);
}
#ufo-tollbooth .turn {
  font-family: var(--display); font-style: italic; font-size: var(--t-beat); line-height: 1.32;
  color: var(--terracotta-deep);
  border-top: 1px solid var(--rule);
  /* 2026-09-14: the bottom was 0, so whatever followed a .turn was jammed against it —
     the single most visible spacing fault on the page. A .turn is a pause in the argument;
     it needs air on BOTH sides. When one ends a section the extra space is absorbed by the
     section's own padding, so this is safe everywhere. */
  margin: calc(var(--space) * 1.4) 0 calc(var(--space) * 1.2); padding: var(--space) 0 0;
}
#ufo-tollbooth .sourcing {
  font-size: var(--t-small); line-height: 1.55; color: var(--ink-soft);
  margin: var(--space) 0 var(--space);
}

/* ---------- hero ---------- */
#ufo-tollbooth .hero {
  position: relative; overflow: hidden;
  padding: calc(var(--space) * 2.4) 0 calc(var(--space) * 1.6);
  background: linear-gradient(180deg, var(--paper-light), var(--paper) 66%);
}
#ufo-tollbooth .pano {
  position: absolute; top: 210px; left: -7%; width: 44%; height: 300px;
  object-fit: contain; opacity: .30; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 88%);
  mask-image: linear-gradient(to right, #000 0%, transparent 88%);
}
#ufo-tollbooth .pano-right {
  left: auto; right: -7%; object-position: right center;
  -webkit-mask-image: linear-gradient(to left, #000 0%, transparent 88%);
  mask-image: linear-gradient(to left, #000 0%, transparent 88%);
  transform: scaleX(-1);
}
#ufo-tollbooth .entry { position: relative; width: min(760px, calc(100% - 44px)); margin-inline: auto; text-align: center; }
#ufo-tollbooth .eyebrow {
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brass); line-height: 1.55; margin: 0 0 calc(var(--space) * 1.1);
}
#ufo-tollbooth h1 { font-size: var(--t-hero); line-height: 1.06; margin: 0 0 var(--space); }
#ufo-tollbooth h1 em { color: var(--terracotta); font-style: italic; }
#ufo-tollbooth .urgency {
  font-family: var(--display); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45;
  color: var(--terracotta-deep); max-width: 50ch; margin: 0 auto var(--space);
}
/* The free-stock promise. It's Robert's aside, not a system notice — so no box.
   The previous build wrapped it in a bordered strip that read as a cookie banner. */
#ufo-tollbooth .freebar {
  font-family: var(--display); font-size: 20px; line-height: 1.45; color: var(--ink-deep);
  max-width: 46ch; margin: 0 auto;
}

/* ---------- scorecard: a ruled document, not a card of three equal numbers ---------- */
#ufo-tollbooth .scorecard {
  background: linear-gradient(180deg, #fff, var(--paper-light));
  border: 1px solid var(--rule); border-radius: 3px;
  box-shadow: 0 18px 34px -26px var(--shadow), 0 1px 0 #fff inset;
  padding: 30px 30px 26px;
}
#ufo-tollbooth .sc-k {
  font-family: var(--sans); font-size: 14px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 22px;
}
#ufo-tollbooth .sc-grid { display: grid; grid-template-columns: 1fr 1fr 1.15fr; gap: 0; }
#ufo-tollbooth .sc-cell { padding: 0 26px; border-left: 1px solid var(--rule); }
#ufo-tollbooth .sc-cell:first-child { padding-left: 0; border-left: 0; }
#ufo-tollbooth .sc-cell:last-child { padding-right: 0; }
#ufo-tollbooth .sc-cell b {
  display: block; font-family: var(--display); font-size: 38px; line-height: 1; color: var(--ink-deep);
}
#ufo-tollbooth .sc-cell:last-child b { font-size: 46px; }
#ufo-tollbooth .sc-cell b span {
  display: block; font-family: var(--sans); font-size: 14px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: 7px; font-weight: 600;
}
#ufo-tollbooth .sc-cell p { font-size: 17px; line-height: 1.45; color: var(--ink-soft); margin: 14px 0 0; }

/* ---------- CTA ---------- */
#ufo-tollbooth .ctablock { margin: calc(var(--space) * 1.8) 0 0; text-align: center; }
#ufo-tollbooth .btn {
  display: inline-block; font-family: var(--sans); font-size: 18px; font-weight: 700;
  letter-spacing: .01em; color: #fdfaf3; background: var(--brass);
  padding: 18px 34px; border-radius: 3px; text-decoration: none;
  box-shadow: 0 14px 26px -16px rgba(54,42,20,.6);
}
#ufo-tollbooth .ctanote { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); margin: 14px auto 0; max-width: 52ch; }

/* ---------- tables: the 13F quarters, and the Southern ledger ---------- */
#ufo-tollbooth .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space) 0; }
#ufo-tollbooth .tbl { width: 100%; border-collapse: collapse; font-size: 17px; }
#ufo-tollbooth .tbl th {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); text-align: center;
  padding: 0 10px 12px; border-bottom: 2px solid var(--ink-deep);
}
#ufo-tollbooth .tbl th.lab { text-align: left; }
#ufo-tollbooth .tbl td { padding: 15px 10px; text-align: center; border-bottom: 1px solid var(--rule); }
#ufo-tollbooth .tbl td.lab { text-align: left; font-weight: 600; color: var(--ink-deep); }
#ufo-tollbooth .tbl td.us { background: rgba(168,130,47,.10); font-weight: 600; color: var(--ink-deep); }
#ufo-tollbooth .tbl .no { color: var(--ink-deep); font-weight: 600; font-style: italic; }

/* ---------- reveal + ledger: ONE artifact, not a box then a table ---------- */
#ufo-tollbooth .revealbox {
  position: relative; margin: calc(var(--space) * 1.6) 0 0; padding: 42px 28px 36px;
  text-align: center; background: var(--ink-deep); border-radius: 3px 3px 0 0;
  box-shadow: 0 22px 44px -30px rgba(13,40,27,.75);
}
#ufo-tollbooth .revealbox::after {
  content: ""; position: absolute; inset: 14px;
  border: 1px solid rgba(216,194,138,.34); pointer-events: none;
}
#ufo-tollbooth .rv-k {
  font-family: var(--sans); font-size: 13.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-light); margin: 0 0 14px;
}
#ufo-tollbooth .rv-n {
  font-family: var(--display); font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08;
  font-weight: 700; color: #f3eddd; margin: 0;
}
#ufo-tollbooth .rv-n span {
  display: block; width: max-content; margin: 16px auto 0; padding-top: 16px;
  font-size: 30px; letter-spacing: .05em; color: var(--brass-light);
  border-top: 1px solid rgba(216,194,138,.32);
}
#ufo-tollbooth .rv-s { font-size: 17px; color: #d6cfba; margin: 18px 0 0; }
#ufo-tollbooth .ledger {
  margin: 0 0 var(--space); border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 3px 3px; overflow: hidden; background: var(--paper-light);
}
#ufo-tollbooth .lr {
  display: flex; justify-content: space-between; gap: 20px; align-items: baseline;
  padding: 15px 24px; border-bottom: 1px solid var(--rule);
}
#ufo-tollbooth .lr:last-child { border-bottom: 0; }
#ufo-tollbooth .lr.hi { background: rgba(168,130,47,.10); }
#ufo-tollbooth .lk { font-size: 18px; color: var(--ink-soft); }
#ufo-tollbooth .lv { font-size: 22px; font-family: var(--display); color: var(--ink-deep); text-align: right; }
#ufo-tollbooth .lv b { font-family: var(--display); font-size: 22px; }

/* ---------- three-up grid: ONE treatment, used for every parallel-items job ---------- */
#ufo-tollbooth .forces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: var(--space) 0; }
#ufo-tollbooth .force { border-top: 3px solid var(--brass); padding: 18px 0 0; }
#ufo-tollbooth .force .n {
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: var(--brass); margin: 0 0 8px;
}
#ufo-tollbooth .force h3 { margin: 0 0 10px; line-height: 1.2; }
#ufo-tollbooth .force p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* ---------- the deliverable rows: the page's best module, reused ---------- */
#ufo-tollbooth .prow {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: baseline;
  padding: 17px 0; border-bottom: 1px solid var(--rule);
}
#ufo-tollbooth .prow .pc { font-family: var(--display); font-size: 20px; color: var(--ink-deep); margin: 0 0 5px; }
#ufo-tollbooth .prow .pt { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
#ufo-tollbooth .prow .pm { text-align: right; font-family: var(--sans); font-size: 15px; color: var(--ink-soft); }
#ufo-tollbooth .prow .pm b { display: block; font-family: var(--display); font-size: 20px; color: var(--ink-deep); }

/* ---------- lists ---------- */
#ufo-tollbooth .items { margin: var(--space) 0; padding: 0; list-style: none; }
#ufo-tollbooth .items li {
  font-size: 17.5px; line-height: 1.55; color: var(--ink-soft);
  padding: 0 0 12px 26px; position: relative;
}
#ufo-tollbooth .items li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 9px;
  background: var(--brass); border-radius: 1px;
}

/* ---------- section artwork ---------- */
#ufo-tollbooth .secimg {
  display: block; width: 100%; height: auto; margin: 0 0 10px; border-radius: 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 100%);
}
#ufo-tollbooth .cap { font-size: var(--t-small); line-height: 1.5; color: var(--ink-soft); margin: 0 0 var(--space); }
#ufo-tollbooth .chart { display: block; width: 100%; height: auto; margin: var(--space) 0 10px; border: 1px solid var(--rule); border-radius: 2px; }

/* ---------- report covers: LIGHT. The covers are the design; a dark bed swallows them ---------- */
#ufo-tollbooth .reports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: var(--space) 0 0; }
#ufo-tollbooth .rep p.no { font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin: 14px 0 5px; }
#ufo-tollbooth .rep h3 { font-size: 18px; line-height: 1.25; }
#ufo-tollbooth .rep-cover {
  display: block; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 0 14px 26px -12px rgba(54,42,20,.34), 0 0 0 1px rgba(168,130,47,.28);
}

/* ---------- pricing ---------- */
#ufo-tollbooth .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: var(--space) 0; }
#ufo-tollbooth .plan { border: 1px solid var(--rule); border-radius: 3px; padding: 26px 24px; background: #fff; }
#ufo-tollbooth .plan.best { border: 2px solid var(--brass); position: relative; box-shadow: 0 16px 30px -24px var(--shadow); }
#ufo-tollbooth .plan .flag {
  position: absolute; top: -13px; left: 24px; background: var(--brass); color: #fdfaf3;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 2px;
}
#ufo-tollbooth .plan .term { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
#ufo-tollbooth .plan .price { font-family: var(--display); font-size: 46px; line-height: 1; color: var(--ink-deep); }
#ufo-tollbooth .plan .per { font-size: 16px; color: var(--ink-soft); margin: 10px 0 0; }
#ufo-tollbooth #order-mount { margin: var(--space) 0; }
#ufo-tollbooth .mountnote { display: none; }

/* ---------- guarantee: a promise, not a coupon. No dashed border. ---------- */
#ufo-tollbooth .guarantee { border-top: 2px solid var(--brass); padding: var(--space) 0 0; margin: calc(var(--space) * 1.4) 0 0; }
#ufo-tollbooth .guarantee h3 { font-family: var(--display); font-size: var(--t-beat); margin: 0 0 12px; }
#ufo-tollbooth .guarantee p { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- FAQ ---------- */
#ufo-tollbooth .fq { padding: 20px 0; border-bottom: 1px solid var(--rule); }
#ufo-tollbooth .fq:last-child { border-bottom: 0; }
#ufo-tollbooth .fq h3 { margin: 0 0 8px; }
#ufo-tollbooth .fq p { font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ---------- testimonial ---------- */
#ufo-tollbooth .q { margin: var(--space) 0; padding: 0 0 0 22px; border-left: 2px solid var(--brass); }
#ufo-tollbooth .q blockquote { font-family: var(--display); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--ink-deep); margin: 0 0 10px; }
#ufo-tollbooth .q figcaption { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }

/* ---------- sign-off ---------- */
#ufo-tollbooth .sign .sig { font-family: var(--display); font-size: 28px; color: var(--ink-deep); margin: calc(var(--space) * 1.2) 0 4px; }
#ufo-tollbooth .sign .role { font-family: var(--sans); font-size: 15px; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 var(--space); }
#ufo-tollbooth .portrait { width: 108px; height: 108px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--rule); margin: 0 0 var(--space); }
#ufo-tollbooth .ps { font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); border-top: 1px solid var(--rule); padding: var(--space) 0 0; margin: calc(var(--space) * 1.4) 0 0; }

/* ---------- footer ---------- */
#ufo-tollbooth .olp-foot { background: var(--ink-deep); color: #cfc8b4; padding: calc(var(--space) * 2) 0; }
#ufo-tollbooth .brand-small { font-family: var(--display); font-size: 21px; color: #f3eddd; }
#ufo-tollbooth .tagline { font-size: 15px; color: #b8b1a0; margin: 6px 0 var(--space); }
#ufo-tollbooth .foot-legal { font-size: 14px; line-height: 1.6; color: #b8b1a0; margin: 0 0 14px; }
#ufo-tollbooth .foot-legal strong { color: #d8c28a; }
#ufo-tollbooth .foot-links { margin: var(--space) 0 12px; }
#ufo-tollbooth .foot-links a { color: #d8c28a; font-size: 14px; margin-right: 16px; text-decoration: none; }
#ufo-tollbooth .foot-copy { font-size: 14px; color: #b8b1a0; margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {

  #ufo-tollbooth .sc-grid { grid-template-columns: 1fr; gap: 22px; }
  #ufo-tollbooth .sc-cell { padding: 0; border-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }
  #ufo-tollbooth .sc-cell:first-child { border-top: 0; padding-top: 0; }
  #ufo-tollbooth .forces,
#ufo-tollbooth .plans { grid-template-columns: 1fr; }
  #ufo-tollbooth .reports { grid-template-columns: repeat(2, 1fr); }
  #ufo-tollbooth .pano,
#ufo-tollbooth .pano-right { display: none; }

}
@media (max-width: 620px) {

  #ufo-tollbooth .btn { white-space: normal; max-width: 100%; line-height: 1.3; padding: 16px 18px; }
  #ufo-tollbooth .lr { flex-direction: column; gap: 4px; }
  #ufo-tollbooth .lv { text-align: left; }
  #ufo-tollbooth .prow { grid-template-columns: 1fr; }
  #ufo-tollbooth .prow .pm { text-align: left; }
  #ufo-tollbooth .prow .pm b { display: inline; margin-right: 6px; }
  #ufo-tollbooth .reports { grid-template-columns: 1fr; }
  #ufo-tollbooth .revealbox { padding: 30px 20px; }
  #ufo-tollbooth .scorecard { padding: 22px 20px; }

}

/* ---------- author card ----------
   Affiliate traffic arrives on somebody else's trust and the page has about three seconds to
   hand that off to a person. The previous build carried a masthead eyebrow and showed Robert's
   face once, at 89% scroll — on mobile that is roughly 30,000px down. */
#ufo-tollbooth .authorcard {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 0 0 calc(var(--space) * 1.4); text-align: left;
}
#ufo-tollbooth .authorpic {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: 0 0 76px;
  box-shadow: 0 0 0 1px var(--rule), 0 8px 18px -12px var(--shadow);
}
#ufo-tollbooth .authorname {
  font-family: var(--display); font-size: 21px; line-height: 1.1;
  color: var(--ink-deep); margin: 0 0 4px;
}
#ufo-tollbooth .authorrole {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.45;
  color: var(--ink-soft); margin: 0;
}
/* The affiliate handoff line — quieter than the free-pick promise it follows. */
#ufo-tollbooth .vouch {
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
  max-width: 52ch; margin: var(--space) auto 0;
}
@media (max-width: 620px) {

  #ufo-tollbooth .authorcard { gap: 13px; }
  #ufo-tollbooth .authorpic { width: 62px; height: 62px; flex-basis: 62px; }
  #ufo-tollbooth .authorname { font-size: 19px; }
  #ufo-tollbooth .authorrole { font-size: 13.5px; }

}

/* ---------- the 60 Minutes still ----------
   A television screengrab, presented as one. The source asset is 300x168 and is never scaled up:
   softness in a still reads as authentic, softness in an upscaled still reads as sloppy.
   Floats beside the credentials copy on desktop, stacks above it on phones. */
#ufo-tollbooth .still {
  float: right; width: 300px; max-width: 44%; margin: 4px 0 var(--space) calc(var(--space) * 1.2);
}
#ufo-tollbooth .still img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 0 0 0 1px var(--rule), 0 14px 26px -16px var(--shadow);
}
#ufo-tollbooth .still figcaption {
  font-family: var(--sans); font-size: 14px; line-height: 1.4;
  color: var(--ink-soft); margin-top: 9px;
}
@media (max-width: 620px) {

  #ufo-tollbooth .still {
    float: none; width: 100%; max-width: 300px;
    margin: 0 auto var(--space); }
  #ufo-tollbooth .still figcaption { text-align: center; }

}

/* ---------- edits from Jared's read-through, 2026-08-25 ---------- */

/* .beat was capped at 32ch, which left a ragged column against full-width body copy.
   It reads better running the full measure. */
#ufo-tollbooth .beat { max-width: none; }

/* Testimonial quotes were reading light: --ink-deep is 13.45:1, but italic serif at 20px
   renders visually lighter than its contrast ratio suggests, and the house rule adds a point
   of size to compensate for italic. Weight and size up; colour unchanged. */
#ufo-tollbooth .q blockquote { font-size: 21px; font-weight: 500; }

/* ============================================================================
   ADDED 2026-09-14 — the ready-for-traffic pass.
   Three jobs: the report covers gain a caption, the plan cards gain a feature
   list, and the order form gets a box plus the scoped overrides that stop this
   stylesheet leaking into it.
   ========================================================================== */

#ufo-tollbooth { --brass-tint: rgba(168,130,47,.22); }

/* ---------- the five reports: cover left, copy right, one row each ----------
   Ported from the Dividend Map page, which uses this at the moment of sale. A
   four-up grid was tried first and left the fifth report either orphaned in a
   row of its own or (with a span) rendered twice the size of the other four. */
#ufo-tollbooth .offer-stack { margin: var(--space) 0 0; border-top: 1px solid var(--rule); }
#ufo-tollbooth .offer {
  display: grid; grid-template-columns: 190px 1fr; gap: 32px;
  align-items: start; padding: 26px 0; border-bottom: 1px solid var(--rule);
}
#ufo-tollbooth .offer-cover {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: 2px;
  box-shadow: 0 14px 26px -12px rgba(54,42,20,.34), 0 0 0 1px rgba(168,130,47,.28);
}
#ufo-tollbooth .offer-no {
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass); margin: 0 0 6px;
}
#ufo-tollbooth .offer-val { font-weight: 400; letter-spacing: .1em; color: var(--ink-soft); }
#ufo-tollbooth .offer-val::before { content: "\00b7 "; color: var(--rule); }
#ufo-tollbooth .offer-body h3 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }
#ufo-tollbooth .offer-body p { font-size: 17px; line-height: 1.5; color: var(--ink-soft); margin: 0; }
@media (max-width: 560px) {

  #ufo-tollbooth .offer { grid-template-columns: 120px 1fr; gap: 20px; }
  #ufo-tollbooth .offer-body h3 { font-size: 19px; }

}

/* ---------- plan feature lists ---------- */
#ufo-tollbooth .plan ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: 16.5px; line-height: 1.5; }
#ufo-tollbooth .plan li { padding: 6px 0 6px 24px; position: relative; color: var(--ink-soft); }
#ufo-tollbooth .plan li::before { content: "\2713"; position: absolute; left: 0; color: var(--brass); font-weight: 700; }
#ufo-tollbooth .plan li.off::before { content: "\2715"; color: var(--terracotta-deep); font-weight: 400; }
#ufo-tollbooth .plan li strong { color: var(--ink-deep); }

/* ---------- the order box ----------
   ⚠️ NAMED order-details ON PURPOSE. The form loads as <form id="order-form">;
   a second element with that id broke the checkout script on the Dividend Map
   page (KNOWN-ISSUES.md). Never reuse an id the form injects. */
#ufo-tollbooth .orderbox {
  margin: calc(var(--space) * 1.4) 0 0; padding: 26px 24px;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff;
}
#ufo-tollbooth .orderbox h3 { font-family: var(--display); font-size: 23px; margin: 0 0 4px; }
#ufo-tollbooth .orderbox .sub { font-size: 16px; color: var(--ink-soft); margin: 0 0 16px; }

/* The renewal disclosure. It is the last thing read before a card number is
   typed, so it never goes below body-adjacent size. */
#ufo-tollbooth .renewal {
  margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule);
  font-size: 16px; line-height: 1.55; color: var(--ink-soft);
}
#ufo-tollbooth .renewal strong { color: var(--ink-deep); }

/* ============================================================================
   ORDER FORM — ported from the Dividend Map page, 2026-09-14.
   The shortcode injects the form INSIDE #ufo-tollbooth, so it inherits our
   scoped rules; its own Bootstrap CSS (fenced under .cigobjects, 0-2-0) loses to
   ours (1-x-0) inside the form. Four rules collided on the Map page and are
   neutralised here BEFORE the form goes in rather than after: .panel painted the
   plan card ink so the form's black offer text vanished, .btn kept Bootstrap's
   green border, .guarantee drew a box around an empty element, and our paragraph
   spacing overrode the form's.
   Every rule is #ufo-tollbooth #inline-order-form (2-x-0) — it can only ever
   reach the form, and nothing here touches the shared order-system stylesheet
   that other pages also load.
   ========================================================================== */
#ufo-tollbooth #inline-order-form .panel {
  margin: 0 0 22px; padding: 22px 24px 18px;
  background: var(--paper-light); color: var(--ink);
  border: 2px solid var(--rule); border-radius: 3px; box-shadow: none;
}
#ufo-tollbooth #inline-order-form .panel.promotion.selected {
  border-color: var(--brass); background: var(--paper-light); box-shadow: 0 0 0 3px var(--brass-tint);
}
#ufo-tollbooth #inline-order-form .panel-body { padding: 0; }
#ufo-tollbooth #inline-order-form p { margin: 0 0 10px; }
#ufo-tollbooth #inline-order-form .guarantee {
  margin: 16px 0 10px; padding: 0; border: 0; border-radius: 0; background: none;
}
/* the form ships this disclosure at 11px — under our 14px floor, on a page whose
   audience is 55+ */
#ufo-tollbooth #inline-order-form .delivery-info {
  font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 14px 25px;
}
#ufo-tollbooth #inline-order-form .premiums,
#ufo-tollbooth #inline-order-form .list-premiums li { font-size: 16px; line-height: 1.5; color: var(--ink); }
#ufo-tollbooth #inline-order-form .list-premiums li { margin: 0 0 8px; }
/* 16px inputs: legible at 55+, and below 16px iOS zooms the page on focus */
#ufo-tollbooth #inline-order-form .form-control { font-size: 16px; height: 40px; }
#ufo-tollbooth #inline-order-form .btn {
  display: block; width: 100%; white-space: normal;
  font-size: 17px; padding: 16px 20px; border: 1px solid var(--brass);
  background: var(--brass); color: #fdfaf3;
}
#ufo-tollbooth #inline-order-form .btn:hover,
#ufo-tollbooth #inline-order-form .btn:active {
  background: var(--ink-deep); border-color: var(--ink-deep); color: #fdfaf3;
}
#ufo-tollbooth #inline-order-form .btn:focus-visible { outline: 3px solid var(--ink-deep); outline-offset: 2px; }

/* ---------- 2026-10-02: hero cut to the headline (Jared) ----------
   The author card, the "It is one of the essential-service companies…" paragraph and the
   free-name promise used to stack under the h1 and push the letter below the fold. They now
   open the first section instead, so they read as the letter's opening, not as hero furniture. */
#ufo-tollbooth .hero { padding-bottom: calc(var(--space) * 1.2); }
#ufo-tollbooth .hero h1 { margin-bottom: 0; }
#ufo-tollbooth .spine > .authorcard { justify-content: flex-start; margin: 0 0 var(--space); }
#ufo-tollbooth .spine > .urgency,
#ufo-tollbooth .spine > .freebar { max-width: none; margin: 0 0 var(--space); text-align: left; }
#ufo-tollbooth .spine > .freebar { margin-bottom: calc(var(--space) * 1.6); }
/* 2026-10-02: the why-now line under the headline (Jared). The $11,230 headline is proof of the
   past; this tells a cold reader why it matters today. */
#ufo-tollbooth .hero .subhead {
  font-family: var(--sans); font-weight: 700; font-size: clamp(20px, 2vw, 24px); line-height: 1.4;
  color: var(--ink-deep); max-width: 40ch; margin: calc(var(--space) * 1.1) auto 0;
}