/* ============================================================
   SHARED OFFER SECTIONS — used identically on both
   Newborn Foundation Protocol pages.
   Depends on styles.css (tokens) + coaching.css (.panel, .onething)
   ============================================================ */

/* ---- the three components ---------------------------------- */
.pillars { max-width: 980px; margin: 0 auto; display: grid; gap: 20px; }
.pillar {
  position: relative; padding: 36px clamp(26px,3.4vw,42px) 34px;
  display: grid; grid-template-columns: 58px 1fr; gap: 22px; align-items: start;
}
.pillar .pic {
  width: 58px; height: 58px; border-radius: 17px; flex: 0 0 auto;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-bd);
  display: flex; align-items: center; justify-content: center;
}
.pillar .pic svg { width: 28px; height: 28px; stroke: var(--sage-strong); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pillar .role { font-size: 11.5px; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 600; color: var(--accent-strong); margin-bottom: 9px; }
/* --accent-strong flips per page theme; the lowtide value is too light here */
html[data-accent="lowtide"] .pillar .role { color: var(--blue-deep); }
.pillar h3 { font-size: clamp(24px,2.5vw,30px); margin-bottom: 12px; }
.pillar h3 .sm { font-family: var(--sans); font-size: 15px; font-weight: 400; font-style: italic; color: var(--ink-soft); letter-spacing: 0; }
.pillar p { color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
.pillar p + p { margin-top: 12px; }
.pillar p b { color: var(--ink); font-weight: 600; }
.pillar .kicker-line {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--bronzer);
}

/* the coaching pillar — this is the offer */
.pillar.hero { border-color: var(--sage-tint-bd); box-shadow: var(--shadow); }
.pillar.hero .pic { background: var(--sage-strong); border-color: transparent; }
.pillar.hero .pic svg { stroke: #fbfcfb; }
.pillar.hero h3 { font-size: clamp(27px,3vw,36px); }
.pillar.hero p { font-size: 17px; }
.pillar .tag {
  position: absolute; top: -12px; left: clamp(26px,3.4vw,42px);
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  color: #fbfcfb; background: var(--sage-strong);
  padding: 7px 15px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.pillar-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pillar-pair .pillar { grid-template-columns: 52px 1fr; gap: 18px; padding: 32px clamp(24px,2.6vw,34px) 32px; }
.pillar-pair .pillar .pic { width: 52px; height: 52px; border-radius: 15px; }
.pillar-pair .pillar h3 { font-size: clamp(22px,2.2vw,26px); }
.pillar-pair .pillar p { font-size: 15.5px; }
@media (max-width: 820px) {
  .pillar-pair { grid-template-columns: 1fr; }
  .pillar, .pillar-pair .pillar { grid-template-columns: 1fr; gap: 16px; }
}

/* legibility overrides, scoped here so the already-live Blueprint page is untouched */
.ba-now .ba-kicker { color: var(--ink-soft); }
.footer-cta .subtext { color: var(--ink-soft); }
/* --sage-deep is a light-mid sage that cannot carry cream text; --sage-strong
   matches the investment panel this one visually rhymes with */
.onething .panel { background: var(--sage-strong); }

/* honor the upright-emphasis span in the offer statement (beats the blanket
   italic on .statement b, which is the same specificity but declared earlier) */
.onething .panel .statement span[style] b { font-style: normal; }

/* ---- what's inside ----------------------------------------- */
.inside-wrap { max-width: 940px; margin: 0 auto; }
.inside-card { padding: clamp(32px,4.4vw,52px) clamp(26px,4.4vw,52px); }
.inside-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 15px 34px; }
.inside-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; color: var(--ink); line-height: 1.52; }
.inside-list li .ck {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-bd); position: relative;
}
.inside-list li .ck::after {
  content:""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px;
  border: solid var(--sage-strong); border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.inside-list li b { font-weight: 600; }
/* value flag on a bundled item */
.inside-list li b .val {
  display: inline-block; margin-left: 8px; vertical-align: 1px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  color: var(--bronzer-2); background: #ece2d2; border: 1px solid #d3c2a8;
  padding: 3px 9px; border-radius: 999px;
}
.inside-list li .sub { display: block; color: var(--ink-soft); font-size: 14px; margin-top: 2px; }
.inside-list li.wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .inside-list { grid-template-columns: 1fr; } }

/* ---- optional add-on --------------------------------------- */
.addon {
  max-width: 940px; margin: 30px auto 0;  background: var(--cream-2); border: 1px dashed var(--sand-deep); border-radius: var(--radius);
  padding: 30px clamp(26px,3.4vw,38px);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.addon .plus { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--bronzer); flex: 0 0 auto; }
.addon .ad-body { flex: 1 1 320px; }
.addon .ad-t { font-size: 11.5px; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 600; color: var(--bronzer-2); margin-bottom: 7px; }
.addon h4 { font-size: 22px; margin-bottom: 7px; }
.addon p { font-size: 15px; color: var(--ink-soft); line-height: 1.55; }
.addon .ad-price { font-family: var(--serif); font-size: 34px; color: var(--bronzer-2); flex: 0 0 auto; line-height: 1; }
.addon .ad-price small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronzer-2); margin-top: 8px; font-weight: 600; }

/* ---- investment -------------------------------------------- */
.invest-panel {
  position: relative; overflow: hidden;
  background: var(--sage-strong); color: #fbfcfb;
  border-radius: var(--radius-lg); padding: clamp(38px,5vw,58px) clamp(26px,4vw,54px);
  max-width: 940px; margin: 0 auto; text-align: center;
}
.invest-panel .sec-photo { mix-blend-mode: screen; opacity: 0.13; }
.invest-panel .sec-photo::after { display: none; }
.invest-panel > * { position: relative; z-index: 1; }
.invest-panel .eyebrow { color: #f3f0e8; margin-bottom: 14px; }
.invest-panel h2 { color: #fbfcfb; margin-bottom: 10px; }
.invest-panel .sub { color: #f3f0e8; font-size: 16px; max-width: 520px; margin: 0 auto; line-height: 1.6; }
.pay-two {
  margin: 36px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 26px;
  align-items: stretch; max-width: 700px;
}
.pay-opt { background: rgba(0,0,0,0.14); border: 1px solid rgba(251,252,251,0.34); border-radius: var(--radius); padding: 30px 24px; display: flex; flex-direction: column; justify-content: center; }
.pay-opt .amt { font-family: var(--serif); font-size: clamp(40px,5vw,54px); line-height: 1; color: #fbfcfb; }
.pay-opt .amt sup { font-size: 0.44em; top: -0.68em; position: relative; font-weight: 500; }
.pay-opt .lbl { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: #f3f0e8; margin-top: 12px; }
.pay-or { font-family: var(--serif); font-style: italic; font-size: 19px; color: #f3f0e8; align-self: center; }
.invest-cta { margin-top: 32px; display: flex; justify-content: center; }
.invest-cta .btn-primary { background: #fbfcfb; color: var(--sage-strong); box-shadow: 0 16px 34px -18px rgba(0,0,0,0.5); }
.invest-cta .btn-primary:hover { background: #fff; color: var(--sage-strong); }
@media (max-width: 620px) { .pay-two { grid-template-columns: 1fr; gap: 14px; } }

/* pain-list marker: separates the thoughts without posing them as questions */
.familiar-list li .mk {
  flex: 0 0 auto; width: 27px; height: 27px; border-radius: 50%; margin-top: 1px;
  background: var(--accent-tint); border: 1px solid var(--accent-tint-bd);
  display: flex; align-items: center; justify-content: center;
}
.familiar-list li .mk::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-strong); }

/* the bio is the one section that should read as a pause, so it gets a real
   ground change (warm cream against the page's cool sky) rather than a wash
   that disappears at 11% */
#kristen.has-photo {
  background: var(--cream-2);
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
}
#kristen.has-photo .sec-photo { opacity: 0.18; }
/* the warmer ground costs a little contrast; darken the body copy to clear 4.5:1 */
#kristen.has-photo .copy .lead { color: #5f655f; }

/* ---- pull-out emphasis in text-heavy paragraphs ------------- */
.pop { color: var(--sage-strong); font-weight: 600; }
.blue-fill .pop, .invest-panel .pop { color: #fbfcfb; }

/* .site-footer's padding shorthand zeroes the .wrap gutter it asks for
   (same specificity, declared later), so text hits the viewport edge below 1120px */
.site-footer { padding-left: 24px; padding-right: 24px; }

/* nav labels are short phrases; never break them mid-phrase */
.nav-links a { white-space: nowrap; }

/* ---- hero tag row ------------------------------------------ */
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-tags span {
  font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600;
  color: var(--ink); background: var(--accent-tint);
  border: 1px solid var(--accent-tint-bd); padding: 7px 14px; border-radius: 999px;
}
/* follow the hero copy's alignment: the cover hero is centered at every width,
   the editorial split only centers once it collapses. */
.hero-cover .hero-tags { justify-content: center; }
@media (max-width: 940px) {
  .hero--editorial .hero-tags { justify-content: center; }
  .hero--editorial .hero-sub { margin-inline: auto; }
}

/* ---- outcome cards (day-one confidence, etc.) --------------- */
.outcome-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 960px; margin: 0 auto; }
.outcome-card { padding: 32px 30px 34px; }
.outcome-card .oc-t { font-family: var(--serif); font-size: 24px; color: var(--sage-strong); margin-bottom: 10px; }
.outcome-card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.58; }
@media (max-width: 760px) { .outcome-grid { grid-template-columns: 1fr; max-width: 480px; } }

/* ---- the guarantee, as a strip under the price -------------- */
.guar-strip {
  max-width: 940px; margin: 18px auto 0;
  background: var(--card); border: 1px solid var(--sage-tint-bd); border-radius: var(--radius);
  padding: 26px clamp(26px,3.4vw,38px);
  display: flex; align-items: flex-start; gap: 22px;
}
.guar-strip .gs-ic {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  background: var(--sage-tint); border: 1px solid var(--sage-tint-bd);
  display: flex; align-items: center; justify-content: center;
}
.guar-strip .gs-ic svg { width: 26px; height: 26px; stroke: var(--sage-strong); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.guar-strip .gs-t { font-size: 11.5px; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 600; color: var(--sage-strong); margin-bottom: 7px; }
.guar-strip p { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.guar-strip p b { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .guar-strip { flex-direction: column; gap: 16px; } }

/* reassurance line under the closing CTA */
.footer-cta .guar-note {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sage-strong); font-weight: 600; margin-top: 2px;
}
.footer-cta .guar-note .gn-ic { display: inline-flex; }
.footer-cta .guar-note svg { width: 15px; height: 15px; stroke: var(--sage-strong); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the guarantee ----------------------------------------- */
.guarantee {
  max-width: 820px; margin: 0 auto; position: relative;
  padding: clamp(36px,4.4vw,50px) clamp(28px,4vw,54px) clamp(34px,4vw,46px);
  text-align: center;
}
.guarantee .seal {
  width: 74px; height: 74px; margin: 0 auto 20px; border-radius: 50%;
  background: #ece2d2; border: 1px solid #d3c2a8;
  display: flex; align-items: center; justify-content: center;
}
.guarantee .seal svg { width: 34px; height: 34px; stroke: var(--bronzer-2); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.guarantee .g-t { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; color: var(--bronzer); margin-bottom: 12px; }
.guarantee h3 { font-size: clamp(25px,2.8vw,32px); margin-bottom: 16px; }
.guarantee p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.62; max-width: 620px; margin: 0 auto; }
.guarantee p b { color: var(--ink); font-weight: 600; }
.guarantee .g-sig { margin-top: 22px; font-family: var(--script); font-size: 34px; color: var(--bronzer); line-height: 1; }