:root {
  --paper: #fffaf0;
  --ink: #0e1c2d;
  --ink-soft: #25394b;
  --muted: #5f6870;
  --line: #b9b2a7;
  --coral: #f15b4f;
  --coral-dark: #c53e34;
  --teal: #08a9aa;
  --yellow: #f2cb45;
  --white: #fffef9;
  --max: 1240px;
  --section: clamp(76px, 9vw, 132px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 17px/1.58 "DM Sans", Arial, sans-serif; text-rendering: optimizeLegibility; }
img { max-width: 100%; }
a { color: inherit; }
p { text-wrap: pretty; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Bricolage Grotesque", "Arial Narrow", sans-serif; line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
h1 { max-width: 780px; margin-bottom: 20px; font-size: clamp(50px, 5.4vw, 78px); }
h2 { margin-bottom: 28px; font-size: clamp(42px, 5.2vw, 76px); }
h3 { font-size: clamp(25px, 2.4vw, 38px); }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }

.site-header { position: sticky; z-index: 100; top: 0; min-height: 82px; padding: 13px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 24px; color: var(--white); background: var(--ink); border-bottom: 2px solid var(--teal); }
.site-header > * { min-width: 0; }
.brand { display: inline-flex; align-items: center; }
.brand img { display: block; width: auto; height: 56px; }
.site-header > .button { justify-self: end; }

.button { display: inline-flex; min-height: 50px; padding: 13px 21px; align-items: center; justify-content: center; color: var(--ink); background: var(--coral); border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); font-weight: 800; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.button:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); background: #ff6b60; }
.button-small { min-height: 42px; padding: 9px 15px; box-shadow: none; border-color: var(--coral); }
.button-dark { color: var(--white); background: var(--ink); box-shadow: 5px 5px 0 var(--coral); }
.text-link { font-weight: 800; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.button-row { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }

.paper-field { background-color: var(--paper); background-image: radial-gradient(rgba(14,28,45,.08) .7px, transparent .7px); background-size: 14px 14px; }
.navy-section { color: var(--white); background: var(--ink); }
.eyebrow, .section-kicker, .price-type, .offer-for { margin-bottom: 17px; color: var(--coral-dark); font-size: 12px; line-height: 1.25; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-light { color: var(--yellow); }
.section-heading { max-width: 920px; }
.section-heading > p:last-child { max-width: 740px; color: var(--muted); font-size: 19px; }
.navy-section .section-heading > p:last-child { color: #c9d0d4; }

.hero { min-height: calc(100vh - 82px); padding: clamp(28px, 4vw, 56px) max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(350px, .9fr); align-items: center; gap: clamp(45px, 7vw, 105px); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.hero-body { max-width: 760px; margin-bottom: 24px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.36; }
.microcopy { max-width: 700px; margin-top: 25px; color: var(--muted); font-size: 14px; }
.visual-aid { position: relative; min-width: 0; transform: translate3d(0, var(--parallax-y, 0px), 0); transition: transform .35s ease, filter .35s ease; }
.visual-aid img { display: block; width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.navy-section .visual-aid img, .price-card-featured .visual-aid img { mix-blend-mode: normal; }
.visual-aid:hover { transform: translate3d(0, calc(var(--parallax-y, 0px) - 5px), 0) rotate(.35deg); filter: saturate(1.08); }
.hero-visual img { max-height: 610px; }

.motion-ready [data-reveal] { opacity: .96; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.outcome-artifacts { position: relative; padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); overflow: hidden; }
.outcome-artifacts-heading { max-width: 800px; }
.outcome-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 46px; }
.outcome-art-grid article { min-width: 0; transition: transform .25s ease; }
.outcome-art-grid article:hover { transform: translateY(-5px); }
.graph-visual img { aspect-ratio: 16 / 10; object-fit: contain; }
.outcome-art-grid h3 { margin: 20px 0 8px; font-size: clamp(25px, 2.4vw, 36px); }
.outcome-art-grid p { color: var(--muted); }

.problem-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); }
.problem-section .section-kicker { color: var(--teal); }
.problem-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(50px, 8vw, 130px); }
.problem-grid h2 { margin: 0; }
.large-copy { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; }
.symptom-list { margin: 36px 0; border-top: 1px solid #52606b; }
.symptom-list span { display: block; padding: 13px 0; border-bottom: 1px solid #52606b; font-size: 18px; }
.pull-line { margin: 0; color: var(--yellow); font: 700 26px/1.2 "Bricolage Grotesque", sans-serif; }

.success-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(48px, 8vw, 120px); }
.success-copy > p:not(.eyebrow, .success-line) { max-width: 720px; font-size: 20px; }
.success-line { margin: 28px 0 0; font: 700 30px/1.15 "Bricolage Grotesque", sans-serif; }

.plan-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 48px 0 36px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.plan-grid article { padding: 30px 28px 32px 0; }
.plan-grid article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.plan-grid span { color: var(--coral-dark); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.plan-grid h3 { margin: 20px 0 13px; }
.plan-grid p { color: var(--muted); font-size: 15px; }

.examples-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); }
.offer-explorer { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: clamp(38px, 6vw, 88px); margin-top: 54px; }
.offer-tabs { display: flex; flex-direction: column; align-self: start; border-top: 1px solid #52606b; }
.offer-tabs button { min-height: 68px; padding: 15px 42px 15px 0; color: #bfc9d2; background: transparent; border: 0; border-bottom: 1px solid #52606b; font: 700 17px/1.25 "DM Sans", sans-serif; text-align: left; cursor: pointer; position: relative; }
.offer-tabs button::after { content: "→"; position: absolute; right: 5px; color: transparent; }
.offer-tabs button:hover { color: var(--white); padding-left: 7px; }
.offer-tabs button[aria-selected="true"] { color: var(--yellow); }
.offer-tabs button[aria-selected="true"]::after { color: var(--yellow); }
.offer-panels { min-width: 0; }
.offer-panels article { min-height: 440px; padding: clamp(28px, 4vw, 54px); color: var(--ink); background: var(--paper); }
.offer-panels article[hidden] { display: none; }
.offer-panels h3 { max-width: 760px; margin-bottom: 24px; font-size: clamp(42px, 5vw, 68px); }
.offer-panels > article > p:not(.offer-for) { max-width: 760px; font-size: 20px; }
.offer-for { color: var(--coral-dark); }
.offer-boundary { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--ink); line-height: 1.7; }
.offer-detail-link { display: inline-block; margin-top: 22px; color: var(--yellow); }

.pricing-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 52px; }
.price-card { padding: 18px 32px 34px; background: var(--white); border: 2px solid var(--ink); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }
.price-card:hover { transform: translateY(-5px); box-shadow: 0 12px 0 rgba(14,28,45,.11); }
.price-card-featured { color: var(--white); background: var(--ink); }
.utility-visual { margin: 0 -12px 28px; }
.utility-visual img { aspect-ratio: 16 / 7; object-fit: contain; }
.price-type { color: var(--teal); }
.price-card h3 { margin-bottom: 10px; }
.price { margin: 0 0 22px; font: 700 clamp(48px, 5vw, 74px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.06em; }
.price-intro { min-height: 84px; font-size: 19px; }
.price-benefits { margin: 6px 0 32px; padding: 0; list-style: none; }
.price-benefits li { padding: 13px 0 13px 25px; border-top: 1px solid var(--line); position: relative; }
.price-benefits li::before { content: "•"; position: absolute; left: 4px; color: var(--coral); }
.price-card-featured .price-benefits li { border-color: #52606b; }
.price-card > .button { margin-top: auto; }

.proof-method { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(55px, 8vw, 120px); align-items: end; }
.proof-method h2 { margin: 0; }
.proof-method-copy { max-width: 720px; }
.proof-method-copy > p:first-child { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.4; }

.trust-section { padding: var(--section) max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(55px, 8vw, 120px); align-items: center; }
.trust-section { padding-bottom: clamp(34px, 4vw, 58px); }
.trust-section h2 { margin: 0; }
.trust-copy { padding: 30px; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.trust-copy p { font-size: 19px; }
.trust-copy p:last-child { margin: 0; font-weight: 800; }

.contact-section { padding: var(--section) max(24px, calc((100vw - 1000px) / 2)); text-align: center; }
.contact-section { padding-top: clamp(42px, 5vw, 70px); border-top: 1px solid var(--line); }
.contact-section > p:not(.eyebrow, .closing-line) { max-width: 760px; margin: 0 auto 28px; font-size: 20px; }
.contact-section .button { width: auto; }
.closing-line { margin: 32px 0 0; font: 700 24px/1.2 "Bricolage Grotesque", sans-serif; }

/* Opt-in shape study: ?shape=blobs */
.shape-blobs .offer-panels article { border-radius: 78px 34px 92px 48px / 44px 88px 38px 74px; overflow: hidden; }
.shape-blobs .price-card { border-radius: 42px 96px 48px 78px / 76px 44px 92px 52px; padding: 34px 48px 52px; }
.shape-blobs .price-card-featured { border-radius: 92px 46px 78px 38px / 48px 86px 44px 90px; }
.shape-blobs .trust-copy { border-radius: 112px 30px 130px 42px / 34px 118px 40px 106px; padding: 48px 58px; }

footer { min-height: 120px; padding: 28px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 210px 1fr; align-items: center; gap: 35px; color: #c9d0d4; background: #08111d; border-top: 1px solid #344455; font-size: 13px; }
footer img { width: 210px; }
footer p { margin: 0; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .hero, .success-section, .problem-grid, .proof-method, .trust-section { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .hero-visual { max-width: 720px; }
  .plan-grid, .pricing-grid { grid-template-columns: 1fr; }
  .plan-grid { border-bottom: 0; }
  .plan-grid article, .plan-grid article + article { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .price-intro { min-height: 0; }
  footer { grid-template-columns: 180px 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .site-header { min-height: 68px; padding: 10px 12px; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; }
  .brand img { height: 46px; }
  .site-header .button-small { width: auto; min-width: 0; max-width: 142px; min-height: 44px; padding: 7px 9px; font-size: 11px; line-height: 1.15; box-shadow: none; }
  .hero, .problem-section, .success-section, .plan-section, .examples-section, .pricing-section, .proof-method, .trust-section, .contact-section { padding-left: 20px; padding-right: 20px; }
  .hero { padding-top: 56px; padding-bottom: 72px; gap: 45px; }
  h1 { font-size: clamp(48px, 15vw, 68px); }
  h2 { font-size: clamp(38px, 11vw, 56px); }
  .hero-body { font-size: 20px; }
  .button-row { align-items: flex-start; flex-direction: column; }
  .button { width: 100%; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .offer-explorer { grid-template-columns: 1fr; gap: 28px; }
  .offer-tabs { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; }
  .offer-tabs button { min-width: 225px; padding: 14px 34px 14px 3px; scroll-snap-align: start; }
  .offer-panels article { min-height: 0; padding: 28px 22px; }
  .offer-panels h3 { font-size: 42px; }
  .price-card { padding: 14px 20px 28px; }
  .outcome-art-grid { grid-template-columns: 1fr; gap: 34px; }
  .graph-visual { max-width: 480px; }

  .shape-blobs .offer-panels article { border-radius: 48px 24px 58px 28px / 26px 52px 24px 48px; }
  .shape-blobs .price-card, .shape-blobs .price-card-featured { border-radius: 34px 58px 38px 48px / 48px 30px 56px 32px; padding: 26px 24px 34px; }
  .shape-blobs .trust-copy { border-radius: 72px 18px 86px 24px / 22px 74px 28px 68px; padding: 40px 32px; }

  footer { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .site-header { padding-left: 10px; padding-right: 10px; gap: 6px; }
  .brand img { height: 40px; }
  .site-header .button-small { max-width: 126px; padding-left: 7px; padding-right: 7px; }
  .price { font-size: 38px; letter-spacing: -.05em; }
  footer p { overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { --parallax-y: 0px !important; }
}