/* ============================================================
   Honest Path — the part most coaches leave out.
   Lives between "You've said some version of this" and the origin
   story. Scoped with .hp- prefix. Calm, editorial, restrained.
   ============================================================ */

.hp { background: var(--bg-2); }

/* ---- Header: calm, single column, no competing box ---- */
.hp__head {
  max-width: 880px;
  margin: 0 0 clamp(44px, 5.5vw, 72px);
}
.hp__head .eyebrow { margin-bottom: 22px; }
.hp__title {
  margin: 0 0 clamp(20px, 2vw, 28px);
  max-width: 22ch;
  text-wrap: balance;
}
.hp__title em { color: var(--accent); font-style: italic; }
.hp__intro {
  font-family: var(--f-sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
  margin: 0;
}
.hp__intro em {
  font-family: var(--f-display);
  color: var(--accent);
  font-style: italic;
  font-size: 1.08em;
}

/* ---- Horizontal journey — three stations on one track ---- */
.hp__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 52px);
  max-width: 1040px;
}
.hp__track::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 6px;
  height: 2px;
  background: var(--line);
}
.hp__step { position: relative; }
.hp__node {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--accent);
  margin-bottom: 26px;
}
.hp__mark-num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(34px, 3.4vw, 52px);
  line-height: 0.9;
  color: var(--ink);
}
.hp__mark-tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 12px 0 20px;
}
.hp__myth { margin: 0 0 16px; max-width: 34ch; }
.hp__truth { margin: 0; max-width: 34ch; }
.hp__k {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.hp__myth .hp__k { color: var(--ink-3); }
.hp__truth .hp__k { color: var(--accent); }
.hp__myth .hp__v {
  display: block;
  color: var(--ink-2);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.4;
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--accent) 78%, transparent);
  text-decoration-thickness: 1.5px;
}
.hp__truth .hp__v {
  display: block;
  color: var(--ink-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}
.hp__truth .hp__v b {
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: 1.42em;
  line-height: 1;
  color: var(--accent);
}
/* handwritten callouts bookending the pitch-vs-truth comparison */
.hp__callout {
  position: absolute;
  z-index: 4;
  display: flex;
  font-family: "Caveat", var(--f-display);
  font-size: 26px;
  line-height: 1.04;
  color: var(--accent);
  pointer-events: none;
  white-space: nowrap;
}
.hp__callout svg { width: 46px; height: 38px; flex: none; overflow: visible; }
/* "what they said" — beside the first pitch, arrow curving down-left into it */
.hp__callout--said {
  top: 80px;
  left: 53%;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  transform: rotate(-4deg);
}
.hp__callout--said svg { margin-left: 6px; }
/* "what actually happened" — just below the last truth, arrow pointing up into it */
.hp__callout--real {
  bottom: -50px;
  right: 4px;
  left: auto;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  transform: rotate(-3deg);
}
.hp__callout--real svg { margin-right: 12px; }

.hp__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: clamp(22px, 2.5vw, 30px);
  margin-top: clamp(48px, 5.5vw, 76px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--line);
}

/* foot variant: closing line on the left, cost receipt pinned to the right */
.hp__foot--cost {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 340px);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hp__foot--cost .hp__foot-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(22px, 2.5vw, 30px);
}
.hpl__receipt--cost { width: 100%; }
@media (max-width: 820px) {
  .hp__foot--cost { grid-template-columns: 1fr; }
  .hpl__receipt--cost { max-width: 380px; }
}
.hp__foot-line {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-style: italic;
  line-height: 1.22;
  color: var(--ink);
  max-width: 46ch;
  margin: 0;
  text-wrap: balance;
}
.hp__foot-line b { color: var(--accent); font-weight: 500; font-style: italic; }
.hp__foot-accent { color: var(--accent); font-style: italic; }

/* ── Landing variant: origin beat above the track (headline,
      story + whiteboard-office photo) before the preserved rows. ── */
.hpl__head { max-width: 1120px; }
.hpl__title { max-width: 28ch; }
.hpl__lead {
  display: grid;
  grid-template-columns: 1fr 0.74fr;
  gap: clamp(32px, 4.5vw, 64px);
  align-items: start;
  margin: clamp(26px, 3vw, 38px) 0 clamp(28px, 3.4vw, 40px);
}
.hpl__story { display: block; }
.hpl__story::after { content: ""; display: block; clear: both; }
.hpl__story p {
  margin: 0 0 clamp(18px, 1.8vw, 24px);
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hpl__story > p:last-child { margin-bottom: 0; }

.hpl__story b { color: var(--ink); font-weight: 600; }

/* ── Story flavor: emphasis, beats, highlights ── */

/* the turning-point beat — set apart, display italic */
.hpl__beat {
  font-family: var(--f-display) !important;
  font-style: italic;
  font-size: clamp(26px, 2.7vw, 38px) !important;
  line-height: 1.1 !important;
  color: var(--ink) !important;
  margin: clamp(4px, 0.6vw, 8px) 0 !important;
}
/* closing beat — sits on its own line, tighter top margin after the crash paragraph */
.hpl__beat--close { margin-top: clamp(2px, 0.4vw, 6px) !important; }

/* hairline divider between the origin story and the "way out" turn */
.hpl__divider {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: clamp(22px, 2.6vw, 34px) 0;
}
/* full-width split between the two lead halves */
.hpl__divider--full {
  margin: clamp(34px, 4vw, 52px) 0;
}

/* ── Draft F — Numbered chapters: big serif numerals in the gutter ── */
.hpl__chapters {
  margin: 0;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 46px);
  align-items: start;
}
.f__chap { display: contents; }
@media (min-width: 1025px) {
  .hpl__chapters > .f__chap:nth-child(3) > * { grid-row: 1; }
  .hpl__chapters > .f__chap:nth-child(4) > * { grid-row: 2; }
  .hpl__chapters > .f__chap:nth-child(5) > * { grid-row: 3; }
  .hpl__chapters > .f__chap:nth-child(6) > * { grid-row: 4; }
  .hpl__chapters > .f__chap:nth-child(7) > * { grid-row: 5; }
}
/* continuous centre spine (node to node) + grind photo spanning beats 1–3 */
.f__spine {
  grid-column: 2;
  grid-row: 1 / 4;
  justify-self: center;
  align-self: stretch;
  width: 2px;
  background: linear-gradient(var(--line-2), color-mix(in oklab, var(--line-2) 50%, transparent));
  border-radius: 2px;
}
.hpl__photo-track {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  justify-self: end;
  align-self: stretch;
  width: min(100%, 360px);
}
.hpl__photo--span {
  position: sticky;
  top: 96px;
  width: 100%;
  margin: 4px 0 0;
}

/* Two-column split: chapter story left, photo + receipt rail right */
.hpl__split {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 360px);
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
  margin-top: clamp(28px, 3.4vw, 44px);
}
/* (legacy two-column split — superseded by per-chapter asides) */
.hpl__split { display: block; }

/* Sales screenshot tucked inside The Turn chapter, with a handwritten
   "then it clicked" annotation + arrow pointing down to it. */
.f__sales {
  position: relative;
  margin: clamp(20px, 2.2vw, 30px) 0 0;
  max-width: 380px;
}
.f__sales img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: #fff;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.6);
}
.f__sales figcaption {
  margin-top: 11px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.f__sales-annot {
  position: absolute;
  top: -52px;
  right: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: flex-start;
  gap: 11px;
  font-family: "Caveat", var(--f-display);
  font-size: 27px;
  line-height: 1;
  color: var(--accent);
  transform: rotate(-5deg);
  pointer-events: none;
}
.f__sales-arrow {
  width: 38px;
  height: 32px;
  margin-top: 2px;
  flex: none;
  overflow: visible;
}
/* Shared handwritten annotation (photo + receipt), echoing "then it clicked" */
.f__annot {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: flex-start;
  gap: 3px;
  font-family: "Caveat", var(--f-display);
  font-size: 25px;
  line-height: 1.05;
  color: var(--accent);
  pointer-events: none;
  white-space: nowrap;
}
.f__annot-arrow { width: 36px; height: 30px; flex: none; overflow: visible; }
/* photo: note sits BELOW the picture, right-aligned, arrow curving UP into it */
.f__annot--photo {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
  margin: 9px clamp(44px, 11%, 96px) 0 auto;
  text-align: right;
  transform: rotate(-4deg);
}
.f__annot--photo .f__annot-arrow { margin-right: 16px; margin-bottom: 1px; }
/* receipt: note above it, arrow curving DOWN into the card */
.f__annot--receipt {
  top: -54px;
  right: 40px;
  align-items: flex-start;
  transform: rotate(-4deg);
}
.f__annot--receipt .f__annot-arrow { margin-top: 1px; }
@media (max-width: 900px) {
  .hpl__split { grid-template-columns: 1fr; gap: clamp(30px, 5vw, 44px); }
  .hpl__split-rail { position: static; max-width: 460px; }
}
.f__aside {
  grid-column: 1;
  justify-self: end;
  align-self: start;
  width: min(100%, 360px);
  margin: 4px 0 clamp(40px, 4.6vw, 64px);
}
.f__aside.hpl__photo img { aspect-ratio: auto; height: auto; object-fit: contain; }
figure.hpl__photo--span .hpl__photo-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  line-height: 0;
}
figure.hpl__photo--span img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border: none;
  border-radius: 0;
  transform: scale(1.42);
  transform-origin: 50% 45%;
}
.f__aside.f__sales { margin-top: clamp(52px, 4.6vw, 68px); max-width: none; }
@media (max-width: 1024px) {
  .hpl__chapters { display: block; }
  .hpl__chapters .f__chap {
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 14px;
    align-items: start;
    position: relative;
    padding-bottom: clamp(28px, 6vw, 40px);
  }
  .hpl__chapters .f__chap::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 38px;
    bottom: -6px;
    width: 2px;
    background: var(--line-2);
    border-radius: 2px;
  }
  .hpl__chapters .f__chap:last-child::before { display: none; }
  .hpl__chapters .f__node { grid-column: 1; grid-row: auto; justify-self: start; }
  .hpl__chapters .f__body { grid-column: 2; grid-row: auto; max-width: none; padding-bottom: 0; }
  .hpl__chapters .f__aside {
    grid-column: 2;
    grid-row: auto;
    justify-self: start;
    width: 100%;
    max-width: 440px;
    margin: 16px 0 0;
  }
  .hpl__chapters .f__aside.f__sales { margin-top: 60px; }
  .hpl__chapters .f__aside.hpl__receipt { margin-top: 62px; }
  .hpl__chapters .hpl__photo-track {
    display: block;
    position: static;
    grid-column: auto;
    grid-row: auto;
    justify-self: auto;
    width: 100%;
    max-width: 440px;
    margin: 0 0 4px;
  }
  .hpl__chapters .hpl__photo--span {
    position: relative;
    top: auto;
    display: block;
    grid-row: auto;
    width: 100%;
    max-width: 440px;
    margin: 0 0 22px;
  }
  .hpl__chapters .f__spine { display: none; }
}
.f__chap:last-child::before { display: none; }
.f__node {
  position: relative;
  z-index: 1;
  grid-column: 2;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: 1px;
  border-radius: 50%;
  background: #14201a;
  border: 1.5px solid color-mix(in oklab, var(--accent) 55%, transparent);
  color: var(--accent);
  box-sizing: border-box;
}
.f__node svg { width: 22px; height: 22px; display: block; }
/* turning-point beats: solid node, dark glyph, soft ring */
.f__chap--turn .f__node {
  background: var(--accent);
  border-color: var(--accent);
  color: #14201a;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--accent) 18%, transparent);
}
.f__body { min-width: 0; grid-column: 3; max-width: 34rem; padding-bottom: clamp(40px, 4.6vw, 64px); }
.f__tag {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 11px;
}
.f__chap p {
  margin: 0;
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
}
.f__chap p b { color: var(--ink); font-weight: 600; }
.f__txt {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: clamp(26px, 3.5vw, 44px);
  align-items: start;
}
.f__chap p.f__pull {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.04;
  color: var(--ink);
  margin: 5px 0 5px !important;
}
.f__chap p.f__after { margin-top: 5px; }
.f__photo { margin: 0; }
.f__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-2);
  background: #fff;
}
.f__photo figcaption {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 820px) {
  .f__chap { grid-template-columns: 38px 1fr; gap: 14px; }
  .f__chap::before { left: 18px; top: 38px; }
  .f__node { width: 38px; height: 38px; }
  .f__node svg { width: 19px; height: 19px; }
  .f__txt { grid-template-columns: 1fr; }
  .f__photo { max-width: 420px; }
}

/* ── Dark variant of the honest-path section ("decision point" field) ── */
.hp--dark {
  --ink: #f1efe4;
  --ink-2: #d8d4c6;
  --ink-3: #9aa790;
  --line: #2c3a30;
  --line-2: #3a4a3d;
  --accent: #a6c083;
  color: var(--ink);
}
.hp--dark .eyebrow { color: var(--ink-3); }
.hp--dark .hpl__divider { background: var(--line-2); }
.hp--dark .hpl__photo img { border-color: var(--line-2); }
/* keep the cream receipt + sales screenshot as bright paper against the dark */
.hp--dark .hpl__sales img { background: #fff; }

/* display-italic emphasis on the gut-punch lines */
.hpl__story .em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.18em;
  line-height: 1.3;
  color: var(--ink);
}

/* highlighter sweep on key phrases */
.hpl__story .mk {
  background: linear-gradient(transparent 58%, color-mix(in oklab, var(--accent) 34%, transparent) 58%);
  color: var(--ink);
  font-weight: 500;
  padding: 0 0.06em;
  border-radius: 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* green display-italic emphasis for a money figure */
.hpl__story .hpl__money {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: 1.3em;
  line-height: 1;
  color: var(--accent);
}

/* soft handwritten aside, e.g. "Exhausted Jay." */
.hpl__tag {
  font-family: "Caveat", var(--f-display);
  font-style: normal;
  font-size: 1.45em;
  line-height: 1;
  color: var(--accent);
  white-space: nowrap;
  margin-left: 0.45em;
}
/* inline handwritten emphasis on a gut-punch phrase (wraps freely) */
.hpl__hand {
  font-family: "Caveat", var(--f-display);
  font-style: normal;
  font-size: 1.4em;
  line-height: 1.06;
  color: var(--accent);
}

/* right column: photo then receipt, stacked */
.hpl__aside {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 32px);
}

.hpl__photo { margin: 0; }
.hpl__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
}
.hpl__photo figcaption {
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 820px) {
  .hpl__lead { grid-template-columns: 1fr; gap: 26px; }
  .hpl__photo { max-width: 460px; }
}

/* ── Receipt: itemized "what it cost" card ── */
.hpl__receipt {
  position: relative;
  background: var(--cream, #fbf7ec);
  border-radius: 3px;
  padding: 24px 24px 26px;
  box-shadow: 0 22px 44px -18px rgba(20, 18, 14, 0.45);
  color: #2a2622;
}
.hpl__receipt::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -9px;
  height: 9px;
  background:
    linear-gradient(135deg, var(--cream, #fbf7ec) 25%, transparent 25%) 0 0/14px 14px repeat-x,
    linear-gradient(-135deg, var(--cream, #fbf7ec) 25%, transparent 25%) 0 0/14px 14px repeat-x;
}
.hpl__rhead {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8377;
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px dashed #c9c1ac;
}
.hpl__litem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 13px;
  padding: 7px 0;
  color: #4a463d;
}
.hpl__litem b { font-weight: 600; color: #2a2622; }
.hpl__litem--note { justify-content: flex-start; gap: 9px; }
.hpl__litem--note::before {
  content: "+";
  color: var(--accent);
  font-weight: 600;
}
.hpl__litem:not(.hpl__litem--note) + .hpl__litem--note {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px dashed #c9c1ac;
}
.hpl__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 13px;
  border-top: 1px dashed #c9c1ac;
  font-family: var(--f-mono);
  font-size: 13px;
  color: #2a2622;
}
.hpl__amt {
  font-family: var(--f-display);
  font-size: 26px;
  color: var(--accent);
}
.hpl__stamp {
  margin-top: 14px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8377;
  text-align: center;
}

/* First-sales screenshot — the proof the turn was real */
.hpl__sales { margin: 0; }
/* Inline variant: dropped into the story column between paragraphs */
.hpl__sales--inline {
  max-width: 440px;
  margin: clamp(6px, 1vw, 12px) 0 clamp(20px, 2vw, 26px);
}
.hpl__sales img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 40px -22px rgba(20, 18, 14, 0.4);
}
.hpl__sales figcaption {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hpl__sales-tag {
  font-family: "Caveat", var(--f-display);
  font-weight: 500;
  font-style: normal;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}
@media (max-width: 820px) {
  .hpl__aside { max-width: 460px; }
  .hpl__receipt { max-width: 420px; }
  .hpl__sales { max-width: 420px; }
}

@media (max-width: 760px) {
  .hp__title { max-width: none; }
  .hp__callout {
    position: static;
    grid-column: 2;
    margin: 4px 0;
    white-space: normal;
    font-size: 22px;
    transform: rotate(-3deg);
    transform-origin: left center;
  }
  .hp__callout--said { top: auto; left: auto; }
  .hp__callout--real { bottom: auto; right: auto; align-items: flex-start; }
  .hp__track {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hp__track::before { display: none; }
  .hp__step {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 18px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
  }
  .hp__step:first-child { border-top: 0; }
  .hp__node { margin-bottom: 0; grid-row: 1 / span 6; }
  .hp__step > *:not(.hp__node) { grid-column: 2; }
  .hp__myth, .hp__truth { max-width: none; }
  .hp__foot-line { max-width: none; }
}

/* ---- Promise vs reality — pinned index cards ---- */
.pinwall {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px);
  margin-top: clamp(44px, 5vw, 68px);
  max-width: 1040px;
}
.pincard {
  position: relative;
  /* paper card, so it pops on the green "promise" band (draft 16) */
  background: #fdfbf4;
  color: #2a2622;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px 28px 30px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 16px 34px rgba(0,0,0,.12);
  background-image: repeating-linear-gradient(transparent 0 33px, #e6e2d3 33px 34px);
  background-position: 0 70px;
}
.pincard .pincard__num { color: #2a2622; }
.pincard .pincard__claim { color: #8a8377; }
.pincard:nth-child(1) { transform: rotate(-1.4deg); }
.pincard:nth-child(3) { transform: rotate(1.4deg); }
.pincard__pin {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 3px 7px rgba(0,0,0,.32);
}
.pincard__pin::after {
  content: "";
  position: absolute;
  top: 3px; left: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.pincard__k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pincard__claim {
  margin: 11px 0 0;
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.28;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent);
  text-decoration-thickness: 1.5px;
}
.pincard__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(32px, 2.9vw, 42px);
  line-height: 0.9;
  color: var(--ink);
  margin-top: 22px;
}
.pincard__tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 9px;
}
.pincard__real {
  margin: 12px 0 0;
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: clamp(24px, 2.1vw, 29px);
  line-height: 1.16;
  color: var(--accent);
}
@media (max-width: 760px) {
  .pinwall { grid-template-columns: 1fr; }
  .pincard,
  .pincard:nth-child(1),
  .pincard:nth-child(3) { transform: none; }
}

/* ============================================================
   THE COST — standalone "cost of the dream" receipt section.
   Lives immediately after the origin story. One cream receipt,
   centered, torn zigzag edges, monospace labels, dotted leaders.
   ============================================================ */
.hp__head--cost {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.hp__head--cost .eyebrow { justify-content: flex-start; margin-bottom: 22px; }
#honest .cr__headline {
  font-style: italic;
  max-width: none;
  margin: 0;
  text-align: left;
  text-wrap: pretty;
  font-size: clamp(30px, 3.3vw, 46px);
  line-height: 1.08;
}

/* cost-of-the-dream block, merged into the origin section as one continuous
   field — spaced from the three columns above it */
.cr__merged { margin-top: clamp(64px, 8vw, 120px); }

.cr-stage {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 68px);
}
.cr {
  position: relative;
  width: min(100%, 680px);
  background: #fdfbf6;
  color: #2a2622;
  padding: clamp(32px, 4vw, 46px) clamp(28px, 4vw, 46px);
  box-shadow: 0 2px 4px rgba(20, 18, 14, 0.06), 0 28px 62px -22px rgba(20, 18, 14, 0.5);
}
/* torn zigzag edges, top + bottom */
.cr::before, .cr::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background:
    linear-gradient(135deg, #fdfbf6 25%, transparent 25%) 0 0/14px 14px repeat-x,
    linear-gradient(-135deg, #fdfbf6 25%, transparent 25%) 0 0/14px 14px repeat-x;
}
.cr::before { top: -9px; transform: scaleY(-1); }
.cr::after { bottom: -9px; }

.cr__head {
  text-align: center;
  border-bottom: 2px dashed #cdc4ad;
  padding-bottom: 18px;
}
.cr__head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1;
  color: #2a2622;
}
.cr__head span {
  display: block;
  margin-top: 11px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9a8f78;
}

.cr__item {
  padding: clamp(15px, 1.9vw, 20px) 0;
  border-bottom: 1px dashed #ddd4bf;
}
.cr__line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cr__pitch {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.2;
  color: #6a6253;
}
.cr__dots {
  flex: 1;
  border-bottom: 1.5px dotted #c4ba9f;
  transform: translateY(-4px);
}
.cr__price {
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #9a8f78;
  text-decoration: line-through;
  text-decoration-color: #bf4f2e;
  text-decoration-thickness: 1.5px;
}
.cr__truth {
  margin: 9px 0 0;
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 27px);
  line-height: 1.12;
  color: var(--accent);
}

.cr__sacrifice { padding-top: clamp(15px, 1.9vw, 20px); }
.cr__srow {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.5;
  color: #4a463d;
}
.cr__srow::before {
  content: "+";
  color: var(--accent);
  font-weight: 600;
}

.cr__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-top: clamp(16px, 1.9vw, 22px);
  border-top: 2px dashed #cdc4ad;
}
.cr__total-lbl {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2a2622;
}
.cr__amt {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(36px, 3.6vw, 46px);
  line-height: 0.9;
  color: #2a2622;
}
.cr__stamp {
  margin-top: clamp(14px, 1.7vw, 18px);
  text-align: center;
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: clamp(20px, 2vw, 24px);
  color: #bf4f2e;
  transform: rotate(-1.5deg);
}

/* Sober ledger rows — monospace label left, value right, dotted leader.
   No green: neutral warm inks only, so it reads like a plain invoice. */
.cr__rows { padding-top: clamp(6px, 1vw, 12px); }
.cr__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: clamp(9px, 1.15vw, 12px) 0;
  border-bottom: 1px dashed #ddd4bf;
}
.cr__row:last-child { border-bottom: 0; }
.cr__label {
  flex: none;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #4a463d;
}
.cr__val {
  flex: none;
  max-width: 58%;
  font-family: var(--f-mono);
  font-size: 13px;
  color: #2a2622;
  text-align: right;
}
.cr__note { color: #9a8f78; }

/* the two money lines carry the weight — bolder/darker than the time-based
   items above, so the eye lands on what the reader actually lost */
.cr__row--money .cr__label { color: #1c1913; font-weight: 700; }
.cr__row--money .cr__val { color: #1c1913; font-weight: 700; }

/* handoff into the method — upright body, aligned to the bottom of the left
   column so it sits level with the receipt's bottom edge, left-anchored */
.cr__handoff {
  align-self: end;
  padding-top: clamp(38px, 5vw, 64px);
  max-width: 46ch;
}
.cr__handoff p {
  margin: 0;
  text-align: left;
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.cr__handoff em {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.1em;
  color: var(--accent);
}

/* Promise + receipt side by side */
.cr__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "left  stage"
    "handoff stage";
  gap: clamp(40px, 5vw, 90px);
  align-items: stretch;
  margin-top: clamp(28px, 3vw, 44px);
}
.cr__left { grid-area: left; }
.cr__split .cr-stage { grid-area: stage; }
.cr__handoff { grid-area: handoff; }
.cr__split .cr-stage {
  margin-top: 0;
  position: relative;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}
.cr__split .cr-stage .cr__cue {
  margin: 0 0 clamp(12px, 1.4vw, 18px);
  text-align: right;
  align-self: stretch;
}
.cr__left { display: flex; flex-direction: column; }
.cr__left .cr__promise { margin-top: clamp(6px, 1.4vw, 16px); }
.cr__anno {
  position: absolute;
  top: 46%;
  right: calc(100% + clamp(20px, 3vw, 56px));
  width: max(220px, 20vw);
  max-width: 300px;
  text-align: right;
  /* darker, redder rust so on the dark-green field it reads the same as the
     #bf4f2e stamp does on the cream receipt (dark bg pushes rust brighter/oranger) */
  color: #a83f22;
}
.cr__anno-arrow {
  display: block;
  width: clamp(104px, 10vw, 136px);
  height: auto;
  margin: 10px 0 0 auto;
  opacity: 0.92;
}
.cr__anno-amt {
  display: block;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.02;
  transform: rotate(-2deg);
}
.cr__anno-sub {
  display: block;
  margin-top: 2px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
  transform: rotate(-2deg);
}
@media (max-width: 860px) {
  .cr__anno {
    position: static;
    width: auto;
    align-self: center;
    text-align: center;
    margin-top: clamp(20px, 5vw, 32px);
  }
  .cr__anno-arrow { margin: 6px auto 0; }
}

/* Half 1 — the promise, struck through. Muted greyed serif italic, no boxes. */
.cr__promise {
  max-width: 640px;
  margin: 0;
  text-align: left;
}
.cr__promise-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: clamp(16px, 2vw, 22px);
}
.cr__promise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 13px);
}
.cr__promise-list li {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.28;
  color: #8b9382;
  text-decoration: line-through;
  text-decoration-color: rgba(139, 147, 130, 0.55);
  text-decoration-thickness: 1.5px;
}

/* divider cue between the two halves */
.cr__cue {
  text-align: left;
  margin: clamp(24px, 3vw, 38px) 0 0;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent);
  opacity: 0.82;
}

@media (max-width: 860px) {
  .cr__split {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "left" "stage" "handoff";
    gap: clamp(34px, 6vw, 52px);
  }
  .cr__handoff { align-self: start; max-width: none; text-align: center; }
  .cr__handoff p { text-align: center; }
  .cr__split .cr-stage { justify-content: center; }
  .cr__promise { max-width: none; text-align: center; }
  .cr__promise-list { align-items: center; }
  .cr__cue { text-align: center; }
}

/* closing line — centered to balance the centered receipt */
.hp__foot--cost-close {
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.hp__foot--cost-close .hp__foot-line {
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   WAY OUT — tight four-beat origin section (landing, cold traffic).
   Replaces the heavy centre-spine timeline. Light, flowing beats
   with small monospace caps labels — no rail, no icon nodes.
   Scoped with .wo- prefix; lives in the dark .hp--dark band.
   ============================================================ */
.wo__head { max-width: 880px; }
.wo__title { max-width: 20ch; }
.wo__title em {
  font-family: var(--f-display);
  font-style: italic;
  color: var(--accent);
}

.wo__beats {
  max-width: 660px;
  margin: 0;
}
.wo__beat {
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--line-2);
}
.wo__beat:first-child {
  padding-top: 0;
  border-top: 0;
}
.wo__beat:last-child {
  padding-bottom: 0;
}
.wo__label {
  /* inherits .f__tag (mono caps); nudge to accent for a touch of life */
  color: var(--accent);
  margin-bottom: 14px;
}
.wo__beat p {
  margin: 0 0 clamp(14px, 1.4vw, 18px);
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.2vw, 18.5px);
  line-height: 1.72;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 56ch;
}
.wo__beat p:last-child { margin-bottom: 0; }
.wo__beat p b { color: var(--ink); font-weight: 600; }

/* voice-break — green handwriting on its own line (display:block forced
   by the page-level #honest rule; sized to read at that rhythm) */
/* IDs (#root #honest) needed to outrank the landing density pass
   `#root .container p { font-size:17px !important }` in the page <style>. */
#root #honest .wo__voice {
  font-family: "Caveat", var(--f-display) !important;
  font-style: normal;
  font-size: clamp(23px, 2.1vw, 28px) !important;
  line-height: 1.18 !important;
  color: var(--accent) !important;
  margin: 4px 0 0 !important;
  max-width: 40ch;
}

/* beat 4 handoff — display-italic bridge into the cost receipt below */
#root #honest .wo__beat--catch .wo__handoff {
  font-family: var(--f-display) !important;
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 30px) !important;
  line-height: 1.18 !important;
  color: var(--ink);
  max-width: 30ch;
  margin-top: clamp(8px, 1vw, 12px);
}

/* framed check — small, paper-cream, slight tilt; handwritten caption */
.wo__check {
  width: min(100%, 340px);
  margin: clamp(20px, 2.4vw, 30px) 0 clamp(22px, 2.6vw, 32px);
  transform: rotate(-1.6deg);
}
.wo__check-frame {
  display: block;
  background: #fdfbf6;
  padding: 12px 12px 0;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(20, 18, 14, 0.18), 0 22px 46px -20px rgba(20, 18, 14, 0.6);
  line-height: 0;
}
.wo__check-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.wo__check-cap {
  margin: 12px 8px 0;
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.16;
  color: var(--accent);
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .wo__check { width: 100%; max-width: 360px; }
}

/* ============================================================
   WAY OUT v2 — scrapbook scatter (landing). Three taped artifacts
   narrate pain -> grind -> win above the written beats. Lives in
   the dark .hp--dark band. Scoped .wo2-.
   ============================================================ */
/* All three artifacts in one horizontal row (cascading down for a scrapbook
   feel), with the written beats below. No fixed heights anywhere. */
/* Pain hero on the left; on the right, the grind + amazon screenshots in a
   row with the escalating-headline draft beneath them. */
.wo2 { margin: clamp(24px, 3vw, 44px) 0 0; }
.wo2__top {
  display: grid;
  grid-template-columns: minmax(300px, 420px) 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  margin-bottom: clamp(34px, 4vw, 56px);
}
.wo2__item { display: block; }
.wo2__left { display: flex; flex-direction: column; }
.wo2__left .wo2__draft { margin-top: clamp(34px, 4vw, 62px); }
.wo2__right { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; }
.wo2__right .wo2__draft { margin-top: clamp(34px, 4vw, 60px); }
.wo2__shots {
  display: flex;
  flex-direction: row;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: flex-start;
  justify-content: center;
}
/* two shots side by side; each shot's handwritten arrow note sits below it */
.wo2__shotrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
}
.wo2__shotrow .wo2__item { width: 100%; }
.wo2__note {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1px;
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.06;
  color: var(--accent);
  transform: rotate(-2deg);
}
.wo2__arrow {
  width: clamp(30px, 2.4vw, 42px);
  height: auto;
  flex: 0 0 auto;
  opacity: 0.92;
}
/* stacked vertically now — no horizontal stagger */
.wo2__item--check  { margin-top: 0; }
.wo2__item--amazon { margin-top: 0; }

/* pain photo — zoom in on Jay so he fills ~half the frame, not the whole room.
   Scale the image inside a clipping wrapper so the polaroid box stays put. */
.wo2__zoom {
  display: block;
  overflow: hidden;
  border-radius: 1px;
}
.wo2__zoom img {
  transform: scale(1.5);
  transform-origin: 40% 70%;
}

/* escalating-headline draft, pushed to the bottom of the right column so it
   bottom-aligns with the tall pain photo on the left */
.wo2__shots { margin-bottom: clamp(22px, 3vw, 40px); }
.wo2__draft { margin-top: auto; text-align: left; }
#root #honest .wo2__draft p {
  margin: 0 0 clamp(2px, 0.5vw, 6px) !important;
  font-family: var(--f-display) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
#root #honest .wo2__draft .wo2__draft-l1 { font-size: clamp(17px, 1.4vw, 21px) !important; color: var(--ink-3); }
#root #honest .wo2__draft .wo2__draft-l2 { font-size: clamp(20px, 2vw, 28px) !important; color: var(--ink); }
#root #honest .wo2__draft .wo2__draft-l3 { font-size: clamp(22px, 2.2vw, 31px) !important; color: var(--ink); }
#root #honest .wo2__draft .wo2__draft-l4 { font-size: clamp(24px, 2.4vw, 34px) !important; margin-top: clamp(2px, 0.4vw, 6px) !important; white-space: nowrap; }
.wo2__draft-l4 em { font-style: italic; color: var(--accent); }
.wo2__draft-foot {
  margin-top: clamp(16px, 2vw, 26px);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.wo2__draft-foot span { color: var(--accent); margin: 0 3px; }

/* mono label sits upright above each item */
.wo2__tag {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 13px 8px;
}

/* polaroid frame — cream paper, the only thing that tilts */
.wo2__pol {
  position: relative;
  display: block;
  background: #f6f3ea;
  padding: 13px 13px 0;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25), 0 20px 44px -16px rgba(0,0,0,0.7);
}
.wo2__pol img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1px;
}
.wo2__item--pain   .wo2__pol { transform: rotate(-2.2deg); }
.wo2__item--check  .wo2__pol { transform: rotate(2deg); }
.wo2__item--amazon .wo2__pol { transform: rotate(-2.4deg); }

.wo2__tape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 88px;
  height: 26px;
  background: color-mix(in oklab, var(--accent) 30%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 42%, transparent);
}
.wo2__cap {
  display: block;
  font-family: "Caveat", var(--f-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.14;
  color: #2a3a2a;
  text-align: center;
  padding: 11px 6px 13px;
  text-wrap: balance;
}

/* timeline title */
.wo2__tl-head { max-width: 880px; margin: 0 auto clamp(28px, 3.4vw, 44px); }
.wo2__tl-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 18ch;
  text-wrap: balance;
  margin: 0;
}
.wo2__tl-title em { font-style: italic; color: var(--accent); }

/* written beats — image-1 columns: parallel beats separated by faint green
   rules, each with a mono caps label, upright body, and a green handwritten
   voice-break; a centered handoff line closes it. Three sections. */
.wo2__cols {
  max-width: none;
  margin: 0;
}
.wo2__meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.9vw, 12px);
  margin-bottom: clamp(30px, 3.4vw, 48px);
}
.wo2__seg {
  height: clamp(58px, 5vw, 78px);
  border-radius: 7px;
  display: flex;
  align-items: center;
  padding: 0 clamp(18px, 1.6vw, 26px);
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.wo2__seg:nth-child(1) { background: color-mix(in oklab, var(--accent) 15%, #1b241d); color: var(--ink-2); }
.wo2__seg:nth-child(2) { background: color-mix(in oklab, var(--accent) 42%, #1b241d); color: var(--ink); }
.wo2__seg:nth-child(3) { background: var(--accent); color: #14201a; }
.wo2__cols-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 0.9vw, 12px);
}
.wo2__col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(18px, 1.6vw, 26px);
}
.wo2__col + .wo2__col {
  padding-left: clamp(18px, 1.6vw, 26px);
  border-left: 0;
}
.wo2__col .wo2__blabel {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 clamp(18px, 2vw, 26px);
}
#root #honest .wo2__col p {
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.6 !important;
  color: var(--ink-2) !important;
  margin: 0 0 clamp(16px, 1.8vw, 22px) !important;
  max-width: none;
  text-wrap: pretty;
}
#root #honest .wo2__col .wo2__voice {
  font-family: "Caveat", var(--f-display) !important;
  font-size: clamp(23px, 2vw, 27px) !important;
  line-height: 1.18 !important;
  color: var(--accent) !important;
  margin: 0 0 clamp(10px, 1.2vw, 16px) !important;
  padding-top: 0;
}
.wo2__cols-foot {
  text-align: center;
  margin-top: clamp(38px, 4.4vw, 60px);
}
#root #honest .wo2__cols-foot p {
  font-size: clamp(16px, 1.35vw, 19px) !important;
  line-height: 1.55 !important;
  color: var(--ink-2) !important;
  margin: 0 !important;
  max-width: none;
}
#root #honest .wo2__cols-foot p b { color: var(--ink); font-weight: 600; }

@media (max-width: 820px) {
  .wo2__meter { grid-template-columns: 1fr; gap: 6px; }
  .wo2__seg { height: 52px; }
  .wo2__cols-grid { grid-template-columns: 1fr; gap: 0; }
  .wo2__col { padding: clamp(24px, 5vw, 32px) 0; }
  .wo2__col + .wo2__col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid color-mix(in oklab, var(--accent) 32%, transparent);
  }
  #root #honest .wo2__col .wo2__voice { margin-top: clamp(8px, 2vw, 14px) !important; }
}

@media (max-width: 760px) {
  .wo2__top {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: clamp(30px, 6vw, 44px);
  }
  .wo2__left { width: 100%; max-width: 360px; }
  .wo2__right { width: 100%; max-width: 520px; }
  .wo2__shots {
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 6vw, 40px);
  }
  .wo2__item,
  .wo2__item--check,
  .wo2__item--amazon { width: 100%; max-width: 360px; margin-top: 0; }
  .wo2__shotrow { width: 100%; max-width: 360px; }
  .wo2__note { max-width: 360px; }
  .wo2__draft { margin-top: clamp(28px, 6vw, 40px); }
  .wo2__prose { max-width: none; }
  .wo2__item--pain   .wo2__pol,
  .wo2__item--check  .wo2__pol,
  .wo2__item--amazon .wo2__pol { transform: rotate(-1.5deg); }
}