/* ==================================================================
   GENERATED by tools/letter/gen-delivery.py — DO NOT HAND-EDIT.
   Source of truth: work/2026-10-28-hkh-pf-system/lp-pf-v4.html (its <style> block) + shared/base.css.
   Deltas: hosted font URLs; full-bleed root wrapper appended.
   ================================================================== */

/* HKH elevate round — packaged fonts only (zero network). Both families are already
   hosted on WordPress (Font Library): Geist Local, Source Serif 4 (latin, 200–900). */
@font-face {
  font-family: "Geist Local";
  src: url("https://www2.investingdaily.com/app/uploads/fonts/geist-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: block;
}
#pf-hkh-landing * { box-sizing: border-box; }
#pf-hkh-landing,
#pf-hkh-landing { margin: 0; padding: 0; }
#pf-hkh-landing p { margin: 0 0 1.08em; }
#pf-hkh-landing img { max-width: 100%; height: auto; display: block; }
#pf-hkh-landing .term { white-space: nowrap; }
#pf-hkh-landing #measured-height { display: none; }

/* ---- page styles (from the work file's <style> block) ---- */

/* ---------- HKH on the Personal Finance design system — v3 ----------
   Rules: HKH_Promo/Graphic_Maker/DESIGN.md + its recipes. No decorative background photo:
   imagery appears only where the copy places it. IMG-000 (between the H1 and the deck)
   crosses the olive field's lower edge onto the paper — the page's one overlap. */

#pf-hkh-landing {
  --pf-paper: #f5f0e6;
  --pf-ink: #282a24;
  --pf-ink-muted: #44463d;
  --pf-brass: #8b641f;
  --pf-gold: #aa915f;
  --pf-highlight: #e4c894;
  --pf-light-ink: #ececde;
}

#pf-hkh-landing {
  background: var(--pf-paper);
  color: var(--pf-ink);
  font-family: "Geist Local", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
}

/* ---------- opening: olive dark-field depth (DS gradient + grain + vignette) ---------- */
#pf-hkh-landing .opening {
  position: relative;
  isolation: isolate;
  display: flow-root;
  overflow: hidden; /* keeps IMG-000's shadow inside the field */
  padding: 24px 44px 38px;
  text-align: center;
  color: var(--pf-light-ink);
  background:
    radial-gradient(90% 80% at 50% 30%, rgba(77, 80, 70, .35) 0%, rgba(36, 42, 38, 0) 70%),
    linear-gradient(115deg, #3c4037 0%, #2a302b 45%, #242a26 100%);
}
#pf-hkh-landing .opening::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(0deg, rgba(245, 240, 230, .018) 0 1px, rgba(245, 240, 230, 0) 1px 3px);
  pointer-events: none;
}
/* 0.65px inset frame + two gold corner accents (DS opening) */
#pf-hkh-landing .frame {
  position: absolute;
  inset: 18px 18px 18px;
  z-index: 0;
  border: .65px solid rgba(218, 190, 135, .36);
  pointer-events: none;
}
#pf-hkh-landing .frame::before,
#pf-hkh-landing .frame::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #dfc48d;
  border-style: solid;
}
#pf-hkh-landing .frame::before { top: -1px; left: -1px; border-width: 1.5px 0 0 1.5px; }
#pf-hkh-landing .frame::after { right: -1px; bottom: -1px; border-width: 0 1.5px 1.5px 0; }

/* wordmark monochrome in paper (<img> + filter: CSS masks are CORS-gated locally) */
#pf-hkh-landing .wordmark {
  position: relative;
  display: block;
  width: 170px;
  margin: 0 auto 28px;
  filter: brightness(0) invert(.955) sepia(.12);
}

/* ---------- headline complex: one vertical stack, one proportional system ----------
   pre-headline 25 : H1 58 (≈1 : 2.3; doc 17pt : 28pt); image at ~60% of the H1's longest
   line; deck bold at pre-headline scale. Rhythm: ~30px between every element, more air
   under the pre-headline so it reads apart from the H1 (Andrew 2026-10-28). */
#pf-hkh-landing .prehead {
  position: relative;
  margin: 0 auto 30px;
  font-size: 32px; /* copy v24: the doc took the pre-headline from 17pt to 24pt (vs the 28pt H1) */
  font-weight: 520;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: #fffcf4;
}
#pf-hkh-landing .prehead u {
  text-decoration-line: underline;
  text-decoration-color: #dfc48d;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

#pf-hkh-landing h1 {
  position: relative;
  margin: 0 auto;
  font-size: clamp(44px, 3.8vw, 55px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.045em;
  color: #fffcf4;
  text-wrap: balance;
}
#pf-hkh-landing h1 .l { display: block; }
#pf-hkh-landing h1 .key { color: #e6bd77; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {

  #pf-hkh-landing h1 .key {
    background: linear-gradient(120deg, #f5deae 12%, #d5b578 57%, #b1935c);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

#pf-hkh-landing .lockup {
  position: relative;
  width: min(860px, 100%);
  margin: 26px auto 0;
}
/* IMG-000 — self-framed (rounded corners in the file): no added border; a shadow that
   follows its alpha edge */
#pf-hkh-landing .hero-fig {
  width: min(460px, 100%);
  margin: 0 auto 24px;
}
#pf-hkh-landing .hero-fig img {
  width: 100%;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .42)) drop-shadow(0 4px 10px rgba(0, 0, 0, .28));
}
#pf-hkh-landing .deck {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: #fffcf4;
  text-wrap: balance;
}
#pf-hkh-landing .deck .term em { padding-right: .08em; }
#pf-hkh-landing .deck + .deck { margin-top: 20px; } /* copy v24: the deck is two paragraphs */
#pf-hkh-landing .deck .l { display: block; } /* desktop line breaks per Andrew's Word layout (copy v24) */

#pf-hkh-landing .letter {
  width: min(728px, calc(100% - 48px));
  margin: 34px auto 0;
  font-size: 22px;
  font-weight: 480;
  line-height: 1.5;
  color: var(--pf-ink-muted);
}
#pf-hkh-landing .letter p { margin: 0 0 18px; }
#pf-hkh-landing .co { color: var(--pf-brass); font-weight: 520; }

/* IMG-001 — self-framed olive quote panel, held to the text measure (Andrew 2026-10-28) */
#pf-hkh-landing .wide-fig {
  width: 100%;
  margin: 34px 0;
}
#pf-hkh-landing .wide-fig img {
  width: 100%;
  filter: drop-shadow(0 12px 22px rgba(40, 42, 32, .28)) drop-shadow(0 2px 5px rgba(40, 42, 32, .18));
}

#pf-hkh-landing h2 {
  margin: 56px 0 24px;
  text-align: center;
  font-size: clamp(32px, 2.8vw, 40px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--pf-ink);
}
#pf-hkh-landing h2 .l { display: block; }
#pf-hkh-landing h2 .key { font-style: normal; color: var(--pf-brass); }
/* keys that split across phone lines are kept whole; NOT every key — with text-wrap: balance a
   blanket nowrap rebalanced "Only One of / Them Pays You First" (copy v9) */
#pf-hkh-landing h2 .key.keep,
#pf-hkh-landing h3 .key.keep { white-space: nowrap; }
#pf-hkh-landing .nobr { white-space: nowrap; } /* a hyphenated word that must not break at its hyphen ("Time-Limited", copy v11) */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {

  #pf-hkh-landing h2 .key {
    background: linear-gradient(120deg, color-mix(in srgb, #e4c894 32%, #8b641f) 12%, #8b641f 57%, color-mix(in srgb, #8b641f 72%, #30352c));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}
#pf-hkh-landing .page-end { height: 110px; }

/* ---------- Section 1 additions (copy v4) ---------- */
#pf-hkh-landing .letter strong { font-weight: 620; color: var(--pf-ink); }

/* masthead lockup — the upsell's (work/2026-10-29-hkh-oto-3yr/oto.html), values verbatim (Andrew 2026-10-29:
   "copy the style of" oto-pf-3yr-hkh): name line a step larger, role muted, brass rule ends with the lockup */
#pf-hkh-landing .letter p.masthead {
  display: inline-block;
  margin: 0 0 30px;
  padding-bottom: 16px;
  line-height: 1.15; /* Andrew 2026-10-29: the role line "hugs the line above it closer" (upsell: 1.3 + 4px) */
  background: linear-gradient(90deg, rgba(139, 100, 31, .85), rgba(186, 153, 93, .7) 70%, rgba(186, 153, 93, 0)) left bottom / 100% 1px no-repeat;
}
#pf-hkh-landing .masthead .from { display: inline-block; margin-bottom: 0; font-size: 27px; font-weight: 600; letter-spacing: -.025em; color: var(--pf-ink); }
#pf-hkh-landing .masthead .role { font-size: 18px; font-weight: 520; letter-spacing: -.005em; color: var(--pf-ink-muted); }
#pf-hkh-landing .letter p em { font-style: italic; } /* paragraphs only: H2 key phrases stay roman */
/* self-framed charts: held to the text measure (Andrew 2026-10-28) */
#pf-hkh-landing .fig {
  width: 100%;
  margin: 34px 0;
}
#pf-hkh-landing .fig img {
  width: 100%;
  filter: drop-shadow(0 12px 22px rgba(40, 42, 32, .28)) drop-shadow(0 2px 5px rgba(40, 42, 32, .18));
}
/* missing art: DS dashed placeholder (no <img>, no token) */
#pf-hkh-landing .fig.img-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border: 1px dashed #c8c0af;
  border-radius: 5px;
  background: #ece5d7;
  color: #73531d;
  font-size: 13px;
  letter-spacing: .08em;
}
/* IMG-013: an X screenshot — an 840×704 card on a 1402×722 white canvas. Shown cropped to the card
   (a white slab on the paper would read as a hole), at embedded-tweet scale so its type lands
   near body size. The crop stays INSIDE the img box (no oversized element — verify's overflow
   check measures element boxes): a box of the card's width at the canvas's full height
   (840:722) makes `cover` scale exactly card-width-to-box; object-position puts the card's left
   edge (275px of the 562px spare) at the box edge; clip-path trims the 9px white rows top and
   bottom and rounds to the card's ~19px (native) corners; drop-shadow follows the clip. (copy v7) */
#pf-hkh-landing .fig.tweet {
  width: min(540px, 100%);
  margin: 28px auto;
  filter: drop-shadow(0 10px 14px rgba(40, 42, 32, .16)) drop-shadow(0 1px 2px rgba(40, 42, 32, .14));
}
#pf-hkh-landing .fig.tweet img {
  width: 100%;
  aspect-ratio: 840 / 722;
  object-fit: cover;
  object-position: 48.932% 0; /* 275 / (1402 - 840) */
  clip-path: inset(1.2465% 0 round 12px); /* 9 / 722 */
  filter: none;
}
/* heads set to the doc's own line breaks (Andrew 2026-10-29, heads 9 and 10). At 40px their lines
   (~800px) outrun the 728px measure, so on wide screens the head steps 56px past it on each side and
   each doc line stays whole; narrower screens wrap naturally (balanced) instead of leaving orphans */
@media (min-width: 900px) {

  #pf-hkh-landing .letter h2.long { margin-left: -56px; margin-right: -56px; }
  #pf-hkh-landing .letter h2.long .l { white-space: nowrap; }

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

  #pf-hkh-landing h2.long .l { display: inline; }
  #pf-hkh-landing h2.long { text-wrap: balance; }

}

/* ---------- Section 11 (copy v13): the offer ---------- */
/* the doc's 16pt centred bold heads: one level below the H2s */
#pf-hkh-landing h3 {
  clear: both;
  margin: 46px 0 20px;
  text-align: center;
  font-size: clamp(24px, 1.95vw, 28px);
  font-weight: 560;
  line-height: 1.16;
  letter-spacing: -.028em;
  color: var(--pf-ink);
  text-wrap: balance;
}
#pf-hkh-landing h3 .l { display: block; }
#pf-hkh-landing h3 .key { font-style: normal; color: var(--pf-brass); } /* like the H2 keys: roman, brass */
#pf-hkh-landing .letter h2 { clear: both; }
/* the 16pt line under the 22pt report title */
#pf-hkh-landing h2 .l.sub {
  margin-top: 10px;
  font-size: .62em;
  font-weight: 450;
  letter-spacing: -.02em;
  color: var(--pf-ink-muted);
}
/* the report title is a hero headline (Andrew 2026-10-29): the opening H1's scale and tracking,
   its 16pt line as a deck-sized second line; extra air above so it opens the offer */
#pf-hkh-landing .letter h2.hero {
  margin: 76px 0 30px;
  font-size: clamp(44px, 3.8vw, 55px); /* = the opening H1 */
  line-height: 1.05;
  letter-spacing: -.045em;
}
#pf-hkh-landing .letter h2.hero .l.sub + .l.sub { margin-top: 0; } /* a two-line subtitle (Sections 13, 14) */
#pf-hkh-landing .letter h2.hero .l.sub {
  margin-top: 14px;
  font-size: .5em;
  font-weight: 480;
  line-height: 1.25;
  letter-spacing: -.02em;
}
/* a hero subtitle that is its own doc paragraph (Section 14): sized and spaced to match .l.sub
   (.5em of the hero size, 14px under the title) */
#pf-hkh-landing .letter p.hero-sub {
  margin: -16px 0 30px;
  text-align: center;
  font-size: clamp(22px, 1.9vw, 27.5px);
  font-weight: 480;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--pf-ink-muted);
  text-wrap: balance;
}
#pf-hkh-landing .letter p.hero-sub .l { display: block; }
/* IMG-024: the report on a tablet — a portrait product shot, centred */
#pf-hkh-landing .fig.report { width: min(420px, 100%); margin: 30px auto 38px; }
#pf-hkh-landing .fig.report img { filter: drop-shadow(0 18px 26px rgba(40, 42, 32, .3)) drop-shadow(0 3px 7px rgba(40, 42, 32, .2)); }
/* IMG-025 / IMG-039: Andrew 2026-10-29 — "build the copy around them… they dont just have to be solo on
   a horizontal lne". Floated right with the copy wrapping; on wide screens they hang into the right
   margin (the page's open gutter) so the column beside them stays a readable width */
#pf-hkh-landing .fig.wrap { float: right; clear: right; margin: 6px 0 16px 30px; }
#pf-hkh-landing .fig.wrap img { filter: drop-shadow(0 14px 20px rgba(40, 42, 32, .26)) drop-shadow(0 2px 5px rgba(40, 42, 32, .16)); }
#pf-hkh-landing .fig.hang { width: 46%; }
/* IMG-039: the phone + alert card sit in the middle 1684px of a 3200px transparent canvas → cropped to
   them inside the img box (object-fit; no oversized element) */
#pf-hkh-landing .fig.alert { width: 300px; }
#pf-hkh-landing .fig.alert img { aspect-ratio: 1684 / 2160; object-fit: cover; object-position: 50% 0; }
/* IMG-029: the second report, beside the copy (Andrew 2026-10-29: "two column layout") — floated LEFT,
   so the page's wraps alternate sides */
#pf-hkh-landing .fig.wrap.left { float: left; clear: left; margin: 6px 32px 16px 0; }
#pf-hkh-landing .fig.report-side { width: 280px; }
#pf-hkh-landing .fig.report-side img { filter: drop-shadow(0 16px 22px rgba(40, 42, 32, .3)) drop-shadow(0 3px 6px rgba(40, 42, 32, .2)); }
@media (min-width: 1100px) {

  #pf-hkh-landing .fig.wrap.left.report-side { width: 320px; margin-left: -110px; } /* must outrank .fig.wrap.left's margin shorthand */
  #pf-hkh-landing .fig.wrap.right.report-side { width: 320px; margin-right: -110px; }
  #pf-hkh-landing .fig.hang { width: 470px; margin-right: -170px; }
  #pf-hkh-landing .fig.alert { width: 340px; margin-right: -110px; }

}

/* sidebar testimonial (Andrew 2026-10-29: "stylize it right… put it in dark mode"): a small olive
   Level-2 panel — the opening's gradient, vignette and grain, 5px radius, brushed top edge, the 8px-inset
   gold keyline with two corner accents — floated right with the copy wrapping, hanging into the open
   margin on wide screens like the other wrap-around pieces */
#pf-hkh-landing .testimonial {
  position: relative;
  isolation: isolate;
  float: right;
  clear: right;
  width: 330px;
  margin: 6px 0 18px 32px;
  padding: 30px 30px 26px;
  border-radius: 5px;
  color: #fffcf4;
  background:
    radial-gradient(110% 90% at 30% 20%, rgba(77, 80, 70, .4) 0%, rgba(36, 42, 38, 0) 70%),
    linear-gradient(115deg, #3c4037 0%, #2a302b 45%, #242a26 100%);
  box-shadow: inset 0 1px 0 rgba(234, 218, 180, .22), 0 14px 24px -12px rgba(40, 42, 32, .4), 0 2px 5px rgba(40, 42, 32, .18);
}
#pf-hkh-landing .testimonial::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(245, 240, 230, .02) 0 1px, rgba(245, 240, 230, 0) 1px 3px);
  pointer-events: none;
}
#pf-hkh-landing .testimonial .frame { inset: 8px; }
#pf-hkh-landing .testimonial .frame::before,
#pf-hkh-landing .testimonial .frame::after { width: 16px; height: 16px; }
#pf-hkh-landing .testimonial blockquote { position: relative; margin: 0; }
#pf-hkh-landing .testimonial blockquote p {
  margin: 0;
  font-size: 21px;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: -.015em;
  padding-left: .42em;
  text-indent: -.42em; /* hang the opening quote mark: text lines align, the mark sits in the padding */
  text-wrap: pretty;
}
#pf-hkh-landing .testimonial .by {
  position: relative;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: .65px solid rgba(218, 190, 135, .36);
  font-size: 15px;
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: .005em;
  color: #e4c894;
}
@media (min-width: 1100px) {

  #pf-hkh-landing .testimonial { margin-right: -110px; }

}

/* ---------- Section 15 (copy v18): the order ---------- */
/* IMG-032: the whole offer — wider than the measure on wide screens */
#pf-hkh-landing .fig.bundle { clear: both; margin: 34px 0 36px; }
#pf-hkh-landing .fig.bundle img { filter: drop-shadow(0 18px 26px rgba(40, 42, 32, .3)) drop-shadow(0 3px 7px rgba(40, 42, 32, .18)); }
/* .fig's width: 100% would turn the negative margins into a 90px shift left (Andrew: "could be centered");
   widen by the overhang instead */
@media (min-width: 1100px) {
 #pf-hkh-landing .fig.bundle { width: calc(100% + 180px); margin-left: -90px; margin-right: -90px; } 
}

/* buttons (Andrew 2026-10-29): styled now, no link until the order form exists. The DS gold finish
   (the H1 key's gradient) on a 5px radius, olive ink, brushed top edge, a soft lift */
#pf-hkh-landing .letter p.cta { clear: both; margin: 38px 0 44px; text-align: center; }
#pf-hkh-landing .cta .btn {
  display: inline-block;
  max-width: 100%;
  padding: 21px 38px 20px;
  border-radius: 5px;
  font-size: 22px;
  font-weight: 640;
  line-height: 1.25;
  letter-spacing: -.012em;
  color: #242a26;
  background: linear-gradient(120deg, #f5deae 0%, #dcbd80 48%, #b9995f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 236, .65), inset 0 0 0 1px rgba(139, 100, 31, .35), 0 10px 20px -8px rgba(40, 42, 32, .45), 0 2px 4px rgba(40, 42, 32, .18);
  text-wrap: balance;
}

/* the first button's frame (Andrew 2026-10-29: "how the downsell agent put the box around the upsell button…
   Just for the first button") — the downsell's .accept verbatim: a 1px gold line at the box's edge, gold corner
   accents, no fill; padding balanced top and bottom (no decline line here) */
#pf-hkh-landing .accept { position: relative; clear: both; margin: 38px 0 46px; padding: 36px 32px; }
#pf-hkh-landing .accept .frame { inset: 0; border: 1px solid rgba(170, 145, 95, .55); }
#pf-hkh-landing .accept .frame::before,
#pf-hkh-landing .accept .frame::after { width: 22px; height: 22px; border-color: #aa915f; }
#pf-hkh-landing .letter .accept p.cta { position: relative; margin: 0; }

/* the guarantee (Andrew 2026-10-29: "some kind of on brand highlighted box", all its text inside):
   a DS Level-1 specimen panel — warm inset tone, no float — with the 0.65px brass keyline 9px in, two
   gold corner accents, and the divider's ringed node set on its top edge */
#pf-hkh-landing section.guarantee {
  position: relative;
  clear: both;
  margin: 50px 0 40px;
  padding: 40px 46px 26px;
  border-radius: 5px;
  background: linear-gradient(180deg, #efe7d5 0%, #e9dfca 100%);
  box-shadow: inset 0 0 0 1px rgba(141, 124, 88, .2);
}
#pf-hkh-landing section.guarantee .frame { inset: 9px; border-color: rgba(139, 100, 31, .42); }
#pf-hkh-landing section.guarantee .frame::before,
#pf-hkh-landing section.guarantee .frame::after { width: 20px; height: 20px; border-color: #aa915f; }
#pf-hkh-landing section.guarantee .node {
  position: absolute;
  left: 50%;
  top: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #e7dfcc;
  border: 1px solid #8b641f;
  box-shadow: 0 0 0 4px #f5f0e6;
}
#pf-hkh-landing section.guarantee h3 { margin: 0 0 18px; }
#pf-hkh-landing section.guarantee p { position: relative; }
#pf-hkh-landing section.guarantee p:last-child { margin-bottom: 0; }

/* ---------- Section 16 (copy v20): the close ---------- */
/* the doc's bullets (Andrew 2026-10-29: "bullet points like the doc... stylized to the theme"): no icons
   or checkboxes (DS) — each item hangs on a small specimen node ringed in brass, the divider's and
   the guarantee's mark, with a fine brass hairline between items */
#pf-hkh-landing .letter ul.ticks { list-style: none; margin: 6px 0 24px; padding: 0; }
#pf-hkh-landing .letter ul.ticks li {
  position: relative;
  margin: 0;
  padding: 14px 0 14px 38px;
  border-top: .65px solid rgba(139, 100, 31, .26);
}
#pf-hkh-landing .letter ul.ticks li:last-child { border-bottom: .65px solid rgba(139, 100, 31, .26); }
#pf-hkh-landing .letter ul.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: calc(14px + .75em - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e7dfcc;
  border: 1px solid #8b641f;
  box-shadow: inset 0 0 0 2.5px #e7dfcc, inset 0 0 0 5px #b1935c;
}

#pf-hkh-landing .letter p.sig { margin-top: 4px; line-height: 1.4; }
#pf-hkh-landing .letter p.sig strong { font-size: 1.05em; }
/* the order form (Andrew 2026-10-29): [cig_order_form] renders here on WordPress (client-side JS).
   A paper sheet in the guarantee's vocabulary — brass keyline 9px in, gold corner accents — so the
   plugin's white form fields sit on a calm, legible ground. The plugin's own promotion box stays
   visible (unlike plp-pfpw-launch, which hid it behind its own offer plate): here it is the only place
   the price shows. */
#pf-hkh-landing .checkout {
  position: relative;
  clear: both;
  margin: 48px 0 10px;
  padding: 34px 38px 30px;
  border-radius: 5px;
  background: #fbf8f1;
  box-shadow: inset 0 0 0 1px rgba(141, 124, 88, .24), 0 18px 34px -24px rgba(40, 42, 32, .4);
  scroll-margin-top: 24px;
}
#pf-hkh-landing .checkout .frame { inset: 9px; border-color: rgba(139, 100, 31, .34); }
#pf-hkh-landing .checkout .frame::before,
#pf-hkh-landing .checkout .frame::after { width: 20px; height: 20px; border-color: #aa915f; }
#pf-hkh-landing .checkout .form-embed { position: relative; min-height: 120px; }
/* Andrew 2026-10-29: "hide these elements first" — the plugin's promotion box (price + bonus list) and its
   auto-renew notice (#deliveryinfo). Hidden, not removed: the checked promotion radio stays in the DOM so
   the order submits as before (plp-pfpw-launch hides #promotions the same way). Hiding the auto-renew
   disclosure was flagged to Andrew as a compliance risk; his call: "Hide both". */
#pf-hkh-landing .checkout .form-embed #promotions { display: none; }
#pf-hkh-landing .letter .checkout .form-embed p { margin: 0 0 10px; }
/* the order terms under the form (Andrew 2026-10-29: "size 12px font") */
#pf-hkh-landing .letter p.order-terms {
  position: relative;
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: 0;
  color: #5d5f55;
}
#pf-hkh-landing .letter p.order-terms a { color: inherit; text-decoration: underline; text-decoration-color: rgba(139, 100, 31, .55); text-underline-offset: 2px; }
#pf-hkh-landing .letter p.order-terms a:hover { color: var(--pf-brass); }
/* offer panel (Andrew 2026-10-29: "a section like this" — plp-pfpw-launch's checkout card in PF dress) */
#pf-hkh-landing .checkout-logo {
  position: relative;
  display: block;
  width: 200px;
  margin: 10px auto 26px;
  filter: brightness(0) invert(.14) sepia(.18); /* the PF wordmark in ink (Andrew: "make it dark") */
}
#pf-hkh-landing .letter p.checkout-eyebrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pf-brass);
}
#pf-hkh-landing .letter p.checkout-eyebrow::before,
#pf-hkh-landing .letter p.checkout-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(186, 153, 93, 0), rgba(186, 153, 93, .7));
}
#pf-hkh-landing .letter p.checkout-eyebrow::after { background: linear-gradient(90deg, rgba(186, 153, 93, .7), rgba(186, 153, 93, 0)); }
#pf-hkh-landing .offer-plate {
  position: relative;
  margin: 0 0 34px;
  padding: 26px 30px 24px;
  border-radius: 5px;
  background: linear-gradient(180deg, #f1ead9 0%, #ebe2cd 100%);
  box-shadow: inset 0 0 0 1px rgba(141, 124, 88, .28);
}
#pf-hkh-landing .letter .offer-plate p { margin: 0; }
#pf-hkh-landing .letter .offer-plate .product { font-size: 25px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; color: var(--pf-ink); }
#pf-hkh-landing .letter .offer-plate .price { margin: 12px 0 6px; line-height: 1; color: var(--pf-ink); }
#pf-hkh-landing .letter .offer-plate .price .was {
  margin-right: 14px;
  font-size: 30px;
  font-weight: 480;
  color: #6c6c5f;
  text-decoration: line-through;
  text-decoration-color: #8b641f;
  text-decoration-thickness: 2px;
}
#pf-hkh-landing .letter .offer-plate .price .now { font-size: 58px; font-weight: 640; letter-spacing: -.035em; }
#pf-hkh-landing .letter .offer-plate .terms { font-size: 15px; font-weight: 640; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-brass); } /* the plugin's paragraphs: Bootstrap spacing, not the letter's 18px */
/* the plugin's JS sets style="display: block" on #deliveryinfo after load — an inline style beats any
   ordinary rule, so this one needs !important (checked live 2026-10-29) */
#pf-hkh-landing .checkout .form-embed #deliveryinfo { display: none !important; }
#pf-hkh-landing .cta a.btn { text-decoration: none; cursor: pointer; }
#pf-hkh-landing .cta a.btn:hover { filter: brightness(1.04); }
#pf-hkh-landing .cta a.btn:focus-visible { outline: 2px solid #8b641f; outline-offset: 3px; }
/* order form placeholder (Andrew 2026-10-29: "Leave a placeholder for the order form for now"): the
   DS dashed placeholder, form-sized, carrying only the doc's "ORDER FORM" */
#pf-hkh-landing .order-slot {
  clear: both;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 460px;
  margin: 46px 0 10px;
  border: 1px dashed #c8c0af;
  border-radius: 5px;
  background: #ece5d7;
}
#pf-hkh-landing .letter .order-slot p {
  margin: 0;
  font-size: 14px;
  font-weight: 560;
  letter-spacing: .16em;
  color: #73531d;
}

/* the doc sets some heads as two heading-size paragraphs (copy v9): two H2s, set tight so they
   read as one two-line head (24px bottom + -24px top collapse to 0) */
#pf-hkh-landing h2 + h2 { margin-top: -24px; }

/* IMG-017 / 018: raw photographs. Andrew 2026-10-29: "add some themed borders… or else they're just
   photos". Mounted on a DS olive plate, so they join the charts' family instead of floating on
   the paper as hard rectangles: Level-2 olive field (gradient + vignette + 1px/3px grain), 5px
   outer radius, brushed top edge, an 8px-inset 0.65px gold keyline with two gold corner accents
   (the opening's .frame), the photo graded warm-neutral toward olive/sepia, and its edges
   dissolving into the olive through an inset scrim. */
#pf-hkh-landing .fig.photo {
  position: relative;
  isolation: isolate;
  padding: 18px;
  border-radius: 5px;
  background:
    radial-gradient(90% 80% at 50% 30%, rgba(77, 80, 70, .35) 0%, rgba(36, 42, 38, 0) 70%),
    linear-gradient(115deg, #3c4037 0%, #2a302b 45%, #242a26 100%);
  box-shadow: inset 0 1px 0 rgba(234, 218, 180, .22), 0 12px 22px -10px rgba(40, 42, 32, .32), 0 2px 5px rgba(40, 42, 32, .18);
}
#pf-hkh-landing .fig.photo::after { /* DS grain over plate and photo alike */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(245, 240, 230, .022) 0 1px, rgba(245, 240, 230, 0) 1px 3px);
  pointer-events: none;
}
#pf-hkh-landing .fig.photo .frame {
  inset: 8px;
  z-index: 3;
}
#pf-hkh-landing .fig.photo .frame::before,
#pf-hkh-landing .fig.photo .frame::after { width: 16px; height: 16px; }
#pf-hkh-landing .photo-in {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
}
#pf-hkh-landing .photo-in::after { /* edges dissolve into the olive field */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 38px 8px rgba(36, 42, 38, .72), inset 0 0 0 1px rgba(36, 42, 38, .55);
  pointer-events: none;
}
#pf-hkh-landing .fig.photo img {
  display: block;
  width: 100%;
  filter: saturate(.78) sepia(.16) contrast(1.05) brightness(.95);
}
/* IMG-020: a cream-ground diagram with no frame of its own. Andrew 2026-10-29: "IMG-20 will need a
   boarder." Not the olive photo plate (it isn't a photo; the plate's grade would muddy it) — it
   is mounted the way IMG-015/016 frame themselves, values sampled from IMG-015 at display scale:
   a paper panel in the art's own ground (#f3f0e6, so the edge is seamless), a light keyline
   (#e1d7c3) ~11px in, two gold (#aa915f) corner accents, small outer radius, the charts' shadow. */
#pf-hkh-landing .fig.panel {
  position: relative;
  padding: 24px;
  border-radius: 4px;
  background: #f3f0e6;
  filter: drop-shadow(0 12px 22px rgba(40, 42, 32, .28)) drop-shadow(0 2px 5px rgba(40, 42, 32, .18));
}
#pf-hkh-landing .fig.panel img { position: relative; filter: none; }
#pf-hkh-landing .fig.panel .frame {
  inset: 11px;
  border-color: #e1d7c3;
}
#pf-hkh-landing .fig.panel .frame::before,
#pf-hkh-landing .fig.panel .frame::after { width: 18px; height: 18px; border-color: #aa915f; }
/* divider above Jim's introduction: DS hairline in the brass family, fading at both ends,
   with a small specimen node that echoes the portrait's circle (Andrew 2026-10-28) */
#pf-hkh-landing .divider {
  position: relative;
  height: 13px;
  margin: 48px 0 40px;
}
#pf-hkh-landing .divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: linear-gradient(90deg, rgba(186, 153, 93, 0), rgba(186, 153, 93, .75) 22%, rgba(139, 100, 31, .85) 50%, rgba(186, 153, 93, .75) 78%, rgba(186, 153, 93, 0));
}
#pf-hkh-landing .divider span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 50%;
  background: #e7dfcc;
  border: 1px solid #8b641f;
  box-shadow: 0 0 0 4px #f5f0e6;
}
/* IMG-003: Jim's introduction with the portrait right (Andrew 2026-10-28); the text wraps
   around it and returns to the full measure once it ends. Top aligned to the bold first line, a DS specimen circle behind
   head and shoulders with the jacket breaking out below it (the block's one overlap). */
#pf-hkh-landing .about {
  display: flow-root;
  margin: 8px 0 18px;
}
#pf-hkh-landing .about p:last-child { margin-bottom: 0; }
#pf-hkh-landing .portrait {
  position: relative;
  isolation: isolate;
  float: right;
  width: 330px;
  margin: 0 0 10px 28px;
  padding-top: 6px;
}
#pf-hkh-landing .portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 6px;
  width: 86%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #e7dfcc;
  box-shadow: inset 0 0 0 1px rgba(141, 124, 88, .14);
}
/* the sketch sits IN FRONT of the circle (multiply would tint the shirt only where the circle
   is — a seam across the chest); a light sepia warms its white toward the paper */
#pf-hkh-landing .portrait img { position: relative; width: 100%; filter: sepia(.16) saturate(.9); }

@media (max-width: 760px) {

  #pf-hkh-landing .masthead .from { font-size: 24px; }
  #pf-hkh-landing .masthead .role { font-size: 16px; }
  #pf-hkh-landing .lockup { margin-top: 26px; }
  #pf-hkh-landing .hero-fig { margin-bottom: 22px; }
  #pf-hkh-landing .opening { padding: 30px 18px 58px; }
  #pf-hkh-landing .frame { inset: 10px; }
  #pf-hkh-landing .wordmark { width: 156px; margin-bottom: 44px; }
  #pf-hkh-landing .prehead { font-size: 24px; margin-bottom: 22px; }
  #pf-hkh-landing h1 { font-size: clamp(32px, 8.8vw, 40px); line-height: 1.06; }
  #pf-hkh-landing h1 .l,
#pf-hkh-landing h2 .l,
#pf-hkh-landing .deck .l { display: inline; }
  #pf-hkh-landing h2 { text-wrap: balance; }
  #pf-hkh-landing .deck { font-size: 22px; }
  #pf-hkh-landing .letter { font-size: 20px; margin-top: 40px; }
  #pf-hkh-landing h2 { font-size: clamp(27px, 7.4vw, 32px); margin: 42px 0 18px; }
  #pf-hkh-landing .page-end { height: 56px; }
  #pf-hkh-landing .portrait { float: none; width: 280px; margin: 0 auto 18px; }
  #pf-hkh-landing .divider { margin: 36px 0 30px; }
  #pf-hkh-landing .fig.photo { padding: 11px; }
  #pf-hkh-landing .fig.wrap { float: none; margin: 30px auto; }
  #pf-hkh-landing .testimonial { float: none; width: auto; margin: 30px 0; padding: 26px 24px 22px; }
  #pf-hkh-landing .testimonial .frame { inset: 6px; }
  #pf-hkh-landing .testimonial blockquote p { font-size: 20px; }
  #pf-hkh-landing .fig.hang { width: 100%; }
  #pf-hkh-landing .fig.alert { width: min(280px, 80%); }
  #pf-hkh-landing .fig.wrap.left { float: none; margin: 30px auto; }
  #pf-hkh-landing section.guarantee { padding: 34px 22px 20px; margin: 40px 0 32px; }
  #pf-hkh-landing section.guarantee .frame { inset: 6px; }
  #pf-hkh-landing .cta .btn { font-size: 19px; padding: 18px 22px 17px; display: block; }
  #pf-hkh-landing .letter p.cta { margin: 30px 0 36px; }
  #pf-hkh-landing .accept { margin: 30px 0 38px; padding: 24px 14px; }
  #pf-hkh-landing .accept .frame::before,
#pf-hkh-landing .accept .frame::after { width: 16px; height: 16px; }
  #pf-hkh-landing .order-slot { min-height: 360px; margin-top: 36px; }
  #pf-hkh-landing .checkout { padding: 24px 16px 20px; margin-top: 36px; }
  #pf-hkh-landing .checkout .frame { inset: 5px; }
  #pf-hkh-landing .checkout-logo { width: 170px; }
  #pf-hkh-landing .letter p.checkout-eyebrow { font-size: 12.5px; gap: 12px; letter-spacing: .16em; }
  #pf-hkh-landing .offer-plate { padding: 20px 18px 18px; }
  #pf-hkh-landing .letter .offer-plate .product { font-size: 20px; }
  #pf-hkh-landing .letter .offer-plate .price .now { font-size: 46px; }
  #pf-hkh-landing .letter .offer-plate .price .was { font-size: 24px; }
  #pf-hkh-landing .fig.report-side { width: min(300px, 80%); }
  #pf-hkh-landing h3 { font-size: 23px; margin: 38px 0 16px; }
  #pf-hkh-landing h3 .l { display: inline; }
  #pf-hkh-landing .fig.report { width: min(320px, 86%); }
  #pf-hkh-landing .letter h2.hero { font-size: clamp(34px, 9.4vw, 40px); margin: 52px 0 22px; }
  #pf-hkh-landing .letter h2.hero .l { display: block; }
  #pf-hkh-landing .letter h2.hero .l.sub { font-size: .55em; }
  #pf-hkh-landing .letter p.hero-sub { font-size: clamp(18.7px, 5.17vw, 22px); margin: -10px 0 22px; }
  #pf-hkh-landing .fig.panel { padding: 14px; }
  #pf-hkh-landing .fig.panel .frame { inset: 6px; }
  #pf-hkh-landing .fig.panel .frame::before,
#pf-hkh-landing .fig.panel .frame::after { width: 12px; height: 12px; }
  #pf-hkh-landing .fig.photo .frame { inset: 5px; }
  #pf-hkh-landing .fig.photo .frame::before,
#pf-hkh-landing .fig.photo .frame::after { width: 12px; height: 12px; }
  #pf-hkh-landing .photo-in::after { box-shadow: inset 0 0 22px 4px rgba(36, 42, 38, .7), inset 0 0 0 1px rgba(36, 42, 38, .55); }

}

/* ==================================================================
   Root wrapper — page sits directly in <body> (rootBleed: "body"), so it
   fills body's width; no 100vw (which counts a visible scrollbar).
   ================================================================== */

body:has(#pf-hkh-landing) {
  margin: 0;
}

#pf-hkh-landing {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 320px;
  overflow: hidden;
}