/* Selected editorial screens, measured on the 1682px reference canvas. */
:root { --section-unit: min(.0594530321vw, 1px); --sage-ink: #356b54; }
.site-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.site-end .site-icon { width: 16px; height: 16px; }
#top { --eu: var(--section-unit); display: block; min-height: 0; height: calc(740 * var(--eu)); padding: 0; background: #fdfcf9; }
#top::before { background: radial-gradient(ellipse at 48% 47%,#fffefd88,transparent 70%); }
#top .site-header { top: calc(20 * var(--eu)); width: calc(1518 * var(--eu)); min-height: calc(51 * var(--eu)); }
#top .brand { gap: calc(13 * var(--eu)); font-size: calc(25 * var(--eu)); letter-spacing: -.035em; font-weight: 600; }
#top .brand-mark { width: calc(36 * var(--eu)); height: calc(36 * var(--eu)); }
#top .primary-nav { gap: calc(49 * var(--eu)); }
#top .primary-nav a, #top .sign-in { color: #747d83; font-size: calc(16 * var(--eu)); }
#top .header-actions { gap: calc(39 * var(--eu)); }
#top .button { min-height: calc(52 * var(--eu)); padding: 0 calc(28 * var(--eu)); gap: calc(18 * var(--eu)); font-size: calc(16 * var(--eu)); }
#top .header-actions .button { min-height: calc(51 * var(--eu)); }
#top .hero-inner { position: absolute; inset: 0; width: min(100%,1682px); height: 100%; min-height: 0; display: block; margin: 0 auto; transform: none; }
#top .hero-copy { position: absolute; top: calc(257 * var(--eu)); left: 50%; width: calc(1000 * var(--eu)); max-width: none; margin: 0; transform: translateX(-50%); text-align: center; }
#top .hero-copy .eyebrow { margin: 0 0 calc(31 * var(--eu)); color: #7f8890; font-size: calc(13 * var(--eu)); font-weight: 600; letter-spacing: .24em; }
#top h1 { font-size: calc(74 * var(--eu)); font-weight: 600; line-height: 1.03; letter-spacing: -.055em; }
#top h1 span { color: #929394; font-weight: 500; }
#top .hero-intro { max-width: calc(540 * var(--eu)); margin: calc(26 * var(--eu)) auto calc(30 * var(--eu)); color: #858c92; font-size: calc(21 * var(--eu)); line-height: 1.4; letter-spacing: -.025em; }
#top .hero-actions { gap: calc(16 * var(--eu)); }
#top .button-dark { background: linear-gradient(135deg,#192827,#10201e); }
#top .button-outline { border-color: #929a9e; background: #fffefa88; }
#top .hero-radar { top: calc(440 * var(--eu)); right: calc(38 * var(--eu)); bottom: auto; width: calc(398 * var(--eu)); transform: translateY(-50%); opacity: .92; }
#top .radar-rings::after { inset: 13%; }
#top .radar-rings b { width: calc(32 * var(--eu)); background: #537c66; box-shadow: none; animation: none; }
#top .hero-radar::before { content: none; }
#top .radar-cross-x { background: linear-gradient(90deg,#789589 0 17%,transparent 17% 23%,#c0cdc333 23% 40%,transparent 40% 60%,#c0cdc333 60% 77%,transparent 77% 83%,#789589 83%); }
#top .radar-cross-y { background: linear-gradient(0deg,#789589 0 17%,transparent 17% 23%,#c0cdc333 23% 40%,transparent 40% 60%,#c0cdc333 60% 77%,transparent 77% 83%,#789589 83%); }
#top .radar-dot-a { top: 10%; left: 15%; }
#top .radar-dot-b { top: -4%; right: 10%; }
#top .radar-dot-c { right: 17%; bottom: -3%; }
#top .radar-square-a { top: 2%; right: 18%; }
#top .radar-square-b { bottom: -19%; left: 65%; }

#engine { --eu: var(--section-unit); position: relative; min-height: 0; height: calc(941 * var(--eu)); width: min(100%,1682px); margin: auto; padding: 0; background: #fdfcf9; }
#engine .section-kicker { position: absolute; top: calc(53 * var(--eu)); left: calc(47 * var(--eu)); gap: calc(20 * var(--eu)); font-size: calc(13 * var(--eu)); letter-spacing: .28em; }
#engine .engine-heading { position: absolute; top: calc(91 * var(--eu)); left: calc(85 * var(--eu)); max-width: none; margin: 0; }
#engine .engine-heading h2 { font-size: calc(76 * var(--eu)); line-height: 1.02; font-weight: 500; letter-spacing: -.055em; }
#engine .engine-heading h2 span { color: #737477; }
#engine .engine-heading p { width: calc(610 * var(--eu)); max-width: none; margin: calc(18 * var(--eu)) 0 0; font-size: calc(24 * var(--eu)); line-height: 1.34; color: #7c818a; letter-spacing: -.02em; }
#engine .engine-map { position: absolute; top: calc(324 * var(--eu)); left: 0; width: 100%; height: calc(490 * var(--eu)); margin: 0; }
#engine .engine-diagram { width: 100%; height: 100%; overflow: visible; font-family: var(--body); }
#engine .engine-margin-note { top: calc(90 * var(--eu)); right: calc(65 * var(--eu)); font-size: calc(11 * var(--eu)); gap: calc(6 * var(--eu)); }
#engine .engine-footer { position: absolute; top: auto; bottom: calc(43 * var(--eu)); left: calc(47 * var(--eu)); right: calc(65 * var(--eu)); margin: 0; font-size: calc(11 * var(--eu)); letter-spacing: .28em; }
#engine .wordmark-spaced { font-size: calc(17 * var(--eu)); }
#engine::before, #engine::after { content: ""; position: absolute; z-index: 0; width: calc(530 * var(--eu)); height: calc(220 * var(--eu)); pointer-events: none; background: radial-gradient(circle,#a4b1a399 .55px,transparent .9px); background-size: calc(13 * var(--eu)) calc(16 * var(--eu)); mask-image: linear-gradient(90deg,transparent,#0008,transparent); opacity: .45; }
#engine::before { right: calc(70 * var(--eu)); top: calc(8 * var(--eu)); transform: rotate(-58deg); }
#engine::after { left: calc(-43 * var(--eu)); bottom: calc(-45 * var(--eu)); transform: rotate(20deg); }

#definition { --eu: calc(var(--section-unit) * .82); --definition-offset: max(0px,calc((100% - 1682 * var(--eu))/2)); position: relative; display: block; width: min(100%,1682px); height: calc(941 * var(--eu)); min-height: 0; margin: auto; padding: 0; overflow: hidden; background: #fdfcf9; }
#definition .definition-left { position: absolute; top: calc(287 * var(--eu)); left: calc(178 * var(--eu) + var(--definition-offset)); width: fit-content; max-width: calc(555 * var(--eu)); margin: 0; padding: 0; }
#definition .definition-left .eyebrow { color: #2e6b53; font-size: calc(14 * var(--eu)); letter-spacing: .3em; }
#definition .definition-left .green-label i { width: calc(103 * var(--eu)); }
#definition .definition-left h2 { margin: calc(24 * var(--eu)) 0 0; font-size: calc(69 * var(--eu)); font-weight: 500; line-height: .95; letter-spacing: -.055em; }
#definition .definition-left h2 em { font-weight: 500; color: #356b54; }
#definition .word-cloud { display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--eu)); font-size: calc(23 * var(--eu)); line-height: 1.4; letter-spacing: -.025em; color: #d7d8d3; text-align: center; }
#definition .word-cloud-top { top: calc(-221 * var(--eu)); left: calc(65 * var(--eu)); right: calc(92 * var(--eu)); }
#definition .word-cloud-bottom { top: calc(350 * var(--eu)); left: calc(70 * var(--eu)); right: calc(82 * var(--eu)); }
#definition .word-cloud-bottom span:last-child { opacity: .5; }
#definition .definition-divider { position: absolute; top: calc(177 * var(--eu)); left: calc(834 * var(--eu) + var(--definition-offset)); width: 1px; height: calc(680 * var(--eu)); margin: 0; background: #a0a3a7; }
#definition .definition-right { position: absolute; top: calc(194 * var(--eu)); left: calc(910 * var(--eu) + var(--definition-offset)); width: calc(710 * var(--eu)); margin: 0; padding: 0; }
#definition .definition-right .eyebrow { margin: 0 0 calc(24 * var(--eu)); font-size: calc(16 * var(--eu)); letter-spacing: .3em; color: #808391; }
#definition .definition-right h3 { margin: 0; font-size: calc(112 * var(--eu)); font-weight: 700; line-height: .885; letter-spacing: -.065em; }
#definition .definition-right h3 em { color: #356b54; font-weight: 700; }
#definition .definition-right h3 span { margin-top: calc(11 * var(--eu)); font-size: calc(63 * var(--eu)); font-weight: 400; line-height: 1.08; letter-spacing: -.06em; white-space: nowrap; }
#definition .definition-right .copy-rule { width: calc(74 * var(--eu)); height: calc(4 * var(--eu)); margin: calc(45 * var(--eu)) 0 calc(28 * var(--eu)); }
#definition .definition-right > p:not(.eyebrow) { margin: 0; color: #81838f; font-size: calc(31 * var(--eu)); line-height: 1.23; letter-spacing: -.045em; }
#definition .definition-right > p strong { color: #3b765e; }
#definition .definition-right > small { margin-top: calc(63 * var(--eu)); font-size: calc(15 * var(--eu)); font-weight: 500; letter-spacing: .29em; }

#principle { --eu: calc(var(--section-unit) * .82); height: calc(941 * var(--eu)); min-height: 0; padding: 0; background: radial-gradient(ellipse at 55% 50%,#0a0d0a,#050605 65%); }
#principle .eyebrow { display: flex; align-items: center; gap: calc(29 * var(--eu)); margin: calc(-5 * var(--eu)) 0 0; color: #e6e8e2; font-size: calc(21 * var(--eu)); font-weight: 400; letter-spacing: .18em; }
#principle .eyebrow i { width: calc(93 * var(--eu)); height: 1px; background: #e6e8e2; }
#principle h2 { margin: calc(39 * var(--eu)) 0 calc(55 * var(--eu)); font-size: calc(147 * var(--eu)); font-weight: 700; letter-spacing: -.052em; line-height: .755; }
#principle h2 span { color: #7da382; }

#opportunity-example { --eu: var(--section-unit); --proof-muted:#66666e; width: min(100%,1682px); min-height: 0; margin: auto; padding: 24px clamp(24px,3.15vw,53px) 26px; scroll-margin-top: 86px; background: #faf9f6; }
/* The account proof shares the site's sans-serif voice. Keep its comparison
   composition, photographs and illustration details independent of type. */
#opportunity-example :is(.opportunity-heading h2,.opportunity-heading aside,.account-main h3,.account-facts b,.account-detail-grid b,.account-quote,.hand-note) { font-family:var(--body); }
#opportunity-example :is(.account-quote,.hand-note) { font-style:normal; }
#opportunity-example .opportunity-heading { width: 100%; max-width: none; min-height: 0; height:auto; display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,.58fr) minmax(0,.35fr); gap: 32px; margin: 0 0 16px; }
#opportunity-example .opportunity-heading .eyebrow { margin-left: 0; font-size: 11px; letter-spacing: .24em; }
#opportunity-example .opportunity-heading h2 { margin: 8px 0 11px; font-family:var(--display); font-size: clamp(34px,2.6vw,42px); line-height: 1.08; font-weight: 600; letter-spacing: -.04em; }
#opportunity-example .opportunity-heading > div > p:last-child { max-width: 740px; margin: 0; color: var(--proof-muted); font-size: 15px; line-height: 1.4; letter-spacing:-.02em; }
#opportunity-example .opportunity-heading aside { margin-top: 22px; padding: 6px 0 6px 22px; }
#opportunity-example .opportunity-heading aside strong { font-size: 16px; font-weight: 600; letter-spacing:-.02em; }
#opportunity-example .opportunity-heading aside p { margin: 8px 0 0; font-size: 13px; line-height: 1.45; letter-spacing:-.01em; color:var(--proof-muted); }
#opportunity-example .hand-note { align-self: start; margin-top: 40px; font-size: 13px; letter-spacing: -.01em; line-height: 1.45; color:var(--proof-muted); transform:none; }
#opportunity-example .hand-note svg { width: calc(90 * var(--eu)); height: calc(70 * var(--eu)); margin: calc(7 * var(--eu)) 0 0 calc(16 * var(--eu)); fill: none; stroke: #95918b; stroke-width: 1; }
#opportunity-example .comparison-grid { max-width: none; grid-template-columns: minmax(0,1.95fr) minmax(0,1fr); align-items: stretch; gap: 24px; }
#opportunity-example .comparison-grid:has(details[open]) { align-items: start; }
#opportunity-example .account-card { min-height: 0; height:auto; padding: 16px; border-radius: 10px; background: #fffffff0; }
#opportunity-example .account-high { grid-template-columns: minmax(0,1.03fr) minmax(0,1.58fr); column-gap: 22px; grid-template-rows: 34px auto auto minmax(0,1fr) auto; }
#opportunity-example .account-high > .account-evidence { grid-area: details; grid-row: 2 / span 3; align-self: start; min-width: 0; }
#opportunity-example .account-head { height: 26px; margin: 0; gap: 12px; }
#opportunity-example .priority { gap: calc(6 * var(--eu)); padding: calc(5 * var(--eu)) calc(11 * var(--eu)); border-radius: 20px; font-size: calc(11 * var(--eu)); letter-spacing: .07em; }
#opportunity-example .priority i { width: calc(8 * var(--eu)); height: calc(8 * var(--eu)); }
#opportunity-example .alignment { display: inline-flex; align-items: center; gap: calc(6 * var(--eu)); font-size: calc(10 * var(--eu)); letter-spacing: .12em; }
#opportunity-example .alignment .site-icon { width: calc(17 * var(--eu)); height: calc(17 * var(--eu)); }
#opportunity-example .account-main { display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: start; gap: 12px; margin: 6px 0 0; }
#opportunity-example .roof-photo { width: 76px; height: 112px; border-radius: 6px; }
#opportunity-example .roof-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
#opportunity-example .account-main h3 { margin: 0; font-size: clamp(21px,1.55vw,25px); line-height: 1.12; font-weight: 600; letter-spacing: -.035em; white-space: normal; }
#opportunity-example .account-main p { margin: 4px 0 7px; color:var(--proof-muted); font-size: 12px; line-height: 1.4; letter-spacing:-.01em; }
#opportunity-example .account-main span { color:var(--proof-muted); font-size: 13px; line-height: 1.42; letter-spacing:-.01em; }
#opportunity-example .account-facts { display: grid; grid-template-columns: .9fr 1fr 1.06fr; align-self: start; margin-top: 12px; padding: 10px 0 12px; border-top: 1px solid #e7e4df; border-bottom: 1px solid #e7e4df; }
#opportunity-example .account-facts > div { padding: 0 12px; }
#opportunity-example .account-facts > div:first-child { padding-left: 0; }
#opportunity-example .account-facts b { font-size: 15px; line-height: 1.25; font-weight: 600; letter-spacing:-.02em; }
#opportunity-example .account-facts span { margin-top: 2px; color:var(--proof-muted); font-size: 11px; letter-spacing:-.01em; }
#opportunity-example .account-detail-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,auto); gap: 8px; margin: 0 0 12px; }
#opportunity-example .account-evidence .account-detail-grid { grid-template-rows: auto; margin: 0; }
#opportunity-example .account-evidence-more { margin-top: 10px; border-top: 1px solid #e5e9e3; }
#opportunity-example .account-evidence-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 5px 2px; color: #315e48; cursor: pointer; font-size: 12px; font-weight: 600; letter-spacing: .01em; list-style: none; }
#opportunity-example .account-evidence-more summary::-webkit-details-marker { display: none; }
#opportunity-example .account-evidence-more summary::after { content: "+"; font-size: 18px; font-weight: 400; line-height: 1; }
#opportunity-example .account-evidence-more[open] summary::after { content: "−"; }
#opportunity-example .account-evidence-more summary:hover { color: #113f2b; }
#opportunity-example .account-evidence-more summary:focus-visible { outline: 2px solid #356b54; outline-offset: 3px; border-radius: 3px; }
#opportunity-example .account-evidence-more .account-detail-grid { grid-template-rows: repeat(2,auto); margin: 5px 0 2px; }
#opportunity-example .account-detail-grid > div { min-height: 0; min-width: 0; padding: 9px; border: 1px solid #eeede9; border-radius: 7px; background: linear-gradient(125deg,#fff,#fafaf8); }
#opportunity-example .account-detail-grid b { display: flex; align-items: center; gap: 6px; min-height: 26px; color:var(--ink); font-size: 11px; line-height: 1.25; font-weight: 600; letter-spacing:-.01em; white-space: normal; }
#opportunity-example .detail-icon { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #dcece1; color: #2c5847; }
#opportunity-example .detail-icon .site-icon { width: 14px; height: 14px; }
#opportunity-example .account-detail-grid p { margin: 6px 0 0; color:var(--proof-muted); font-size: 11.5px; line-height: 1.35; letter-spacing:-.01em; }
#opportunity-example .account-detail-grid .stronger { border-color: #bfd4c3; background: #edf3ed; }
#opportunity-example .account-detail-grid .stronger p { color: #375545; }
#opportunity-example .account-quote { align-self: center; margin: 12px 0 16px; padding: 0; border: 0; font-size: 16px; line-height: 1.35; letter-spacing:-.02em; font-weight:500; color:var(--ink); }
#opportunity-example .account-quote small { display: block; margin-top: calc(13 * var(--eu)); color: #84807e; font-size: calc(11 * var(--eu)); letter-spacing: .26em; }
#opportunity-example .assessment { display: grid; grid-template-columns: minmax(0,1fr) repeat(3,minmax(64px,78px)); align-items: center; gap: 0; margin: 0; padding: 12px 2px 1px; border: 0; border-top: 1px solid #dfe4dd; border-radius: 0; background: transparent; font-size: 11px; }
#opportunity-example .assessment > div { min-width: 0; padding-right: 16px; }
#opportunity-example .assessment small { color: #858987; font-size: 9px; letter-spacing: .16em; }
#opportunity-example .assessment > div > b { display: block; margin: 4px 0 3px; color: var(--ink); font-family: var(--body); font-size: 15px; font-weight: 600; letter-spacing:-.02em; }
#opportunity-example .assessment > div > span { display: block; max-width: 570px; color:var(--proof-muted); font-size: 12px; line-height: 1.4; }
#opportunity-example .assessment-signal { display: grid; align-content: center; gap: 3px; min-height: 34px; padding-left: 12px; border-left: 1px solid #e3e6e1; color: #818782; }
#opportunity-example .assessment-signal > span { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
#opportunity-example .assessment-signal b { color: #315e49; font-size: 13px; font-weight: 600; line-height: 1.1; }
#opportunity-example .account-low .account-main { grid-template-columns: 82px minmax(0,1fr); gap: 12px; margin-top: 12px; }
#opportunity-example .account-low .roof-photo { width: 82px; height: 100px; }
#opportunity-example .account-low .account-main h3 { margin-top: 0; font-size: clamp(21px,1.55vw,25px); }
#opportunity-example .account-low .account-main span { font-size: 13px; }
#opportunity-example .account-low .account-facts { margin-top: 12px; padding: 10px 0 12px; }
#opportunity-example .account-low .account-detail-grid { height:auto; grid-template-rows: auto; gap: 7px; margin-bottom: 0; }
#opportunity-example .account-low .account-evidence-more .account-detail-grid { grid-template-rows: repeat(2,auto); }
#opportunity-example .account-low .account-detail-grid > div { padding: 8px; }
#opportunity-example .account-low .account-detail-grid b { gap: 5px; font-size: 10px; }
#opportunity-example .account-low .detail-icon { width: 20px; height: 20px; flex-basis: 20px; color: #555; background: #efefec; }
#opportunity-example .account-low .account-detail-grid p { margin-top: 6px; font-size: 11px; line-height: 1.35; }

/* All acquisition cards share the quiet rule/text/source treatment. */
#paid-acquisition .plain-takeaway { width:auto; max-width:100%; min-height:0; gap:20px; margin-top:38px; padding:0; border-radius:0; background:none; color:#1b2525; font-size:20px; font-weight:400; line-height:1.3; }
#paid-acquisition .plain-takeaway i { width:42px; height:4px; flex:0 0 42px; border-radius:4px; background:#315e49; }
#paid-acquisition .paid-frame .source-note { position:static; display:block; inset:auto; margin:29px 0 0; color:#879093; font-size:12px; line-height:1.3; white-space:normal; }
@media (max-width:760px) {
  #paid-acquisition .plain-takeaway { margin-top:23px; font-size:16px; }
  #paid-acquisition .plain-takeaway i { width:33px; flex-basis:33px; }
  #paid-acquisition .paid-frame .source-note { margin-top:13px; font-size:10px; }
}
/* Acquisition reference canvases are 1942 × 809; keep their shared rhythm. */
@media (min-width: 1101px) {
  #opportunity-example .opportunity-heading h2 br { display: none; }
  :is(#paid-acquisition,#outbound,#referrals,#blind-spot) { --pu: min(.0514933059vw,1px); display: grid; min-height: 0; height: calc(809 * var(--pu)); place-items: center; padding: 0 calc(51 * var(--pu)); background: #fbfaf7; }
  :is(#paid-acquisition,#outbound,#referrals) .problem-frame, #blind-spot .blindspot-frame { display: block; position: relative; width: calc(1840 * var(--pu)); max-width: 100%; height: calc(722 * var(--pu)); min-height: 0; padding: calc(57 * var(--pu)); border-radius: calc(26 * var(--pu)); transform: none; background: linear-gradient(115deg,#fdfcf9,#fcfbf8); }
  :is(#paid-acquisition,#outbound,#referrals) .problem-copy { width: calc(700 * var(--pu)); max-width: none; }
  :is(#paid-acquisition,#outbound,#referrals) .eyebrow, #blind-spot .eyebrow { font-size: calc(14 * var(--pu)); letter-spacing: .25em; gap: calc(18 * var(--pu)); }
  :is(#paid-acquisition,#outbound,#referrals) .eyebrow i, #blind-spot .eyebrow i { width: calc(13 * var(--pu)); height: calc(13 * var(--pu)); flex-basis: calc(13 * var(--pu)); }
  :is(#paid-acquisition,#outbound,#referrals) .problem-copy h2 { margin: calc(32 * var(--pu)) 0 calc(26 * var(--pu)); font-size: calc(72 * var(--pu)); line-height: 1.045; font-weight: 500; letter-spacing: -.06em; }
  :is(#paid-acquisition,#referrals) .big-stat { margin: calc(23 * var(--pu)) 0 0; font-size: calc(78 * var(--pu)); line-height: 1; color: #084e35; }
  :is(#paid-acquisition,#referrals) .stat-label { width: calc(650 * var(--pu)); max-width: 100%; margin: 0; font-size: calc(24 * var(--pu)); line-height: 1.28; }
  :is(#paid-acquisition,#outbound,#referrals) .copy-rule { width: calc(54 * var(--pu)); margin: calc(29 * var(--pu)) 0 calc(24 * var(--pu)); }
  :is(#paid-acquisition,#outbound,#referrals) .problem-body { width: calc(640 * var(--pu)); max-width: none; margin: 0; font-size: calc(24 * var(--pu)); line-height: 1.3; letter-spacing: -.023em; }
  :is(#paid-acquisition,#outbound,#referrals) .plain-takeaway { min-height: 0; gap: calc(23 * var(--pu)); margin: calc(50 * var(--pu)) 0 0; padding: 0; color: #18252a; font-size: calc(25 * var(--pu)); line-height: 1.3; background: none; }
  :is(#paid-acquisition,#outbound,#referrals) .plain-takeaway i { width: calc(46 * var(--pu)); height: calc(4 * var(--pu)); flex-basis: calc(46 * var(--pu)); }
  :is(#outbound,#referrals) .source-note, #paid-acquisition .paid-frame .source-note { display: block; margin-top: calc(31 * var(--pu)); font-size: calc(15 * var(--pu)); }
  #paid-acquisition .paid-flow { position: absolute; top: 18.10585%; left: 42.28261%; width: 57.06522%; height: auto; margin: 0; transform: none; overflow: visible; }
  #paid-acquisition .stat-context { font-size: calc(20 * var(--pu)); margin: calc(7 * var(--pu)) 0 0; }
  #outbound .problem-copy { width: calc(780 * var(--pu)); }
  #outbound .problem-copy h2 { margin-bottom: 0; }
  #outbound .problem-copy h2 .outbound-secondary { font-size: calc(60 * var(--pu)); margin-top: calc(3 * var(--pu)); line-height: 1.08; white-space: nowrap; }
  #outbound .rate-pair { display: flex; align-items: flex-end; gap: calc(30 * var(--pu)); margin-top: calc(35 * var(--pu)); }
  #outbound .rate-pair > div:first-child { width: calc(385 * var(--pu)); flex: 0 0 auto; }
  #outbound .rate-pair strong { font-size: calc(80 * var(--pu)); line-height: 1; }
  #outbound .rate-pair > div:last-child strong { font-size: calc(44 * var(--pu)); }
  #outbound .rate-pair span { font-size: calc(23 * var(--pu)); line-height: 1.3; white-space: nowrap; }
  #outbound .rate-pair > i { height: calc(68 * var(--pu)); margin-bottom: calc(2 * var(--pu)); }
  #outbound .access-board { position: absolute; top: 5.5401662%; left: 44.51086957%; width: 55.10869565%; height: auto; margin: 0; transform: none; }
  #referrals .problem-copy { width: calc(610 * var(--pu)); }
  #referrals .problem-copy h2 { font-size: calc(84 * var(--pu)); margin: calc(28 * var(--pu)) 0 0; }
  #referrals h2 .referrals-secondary { margin-top: calc(7 * var(--pu)); font-size: calc(82 * var(--pu)); line-height: 1.02; }
  #referrals .big-stat { margin-top: calc(15 * var(--pu)); }
  #referrals .stat-label { width: calc(430 * var(--pu)); }
  #referrals .problem-body { width: calc(590 * var(--pu)); }
  #referrals .network-field { position: absolute; top: 6.51%; left: 36.02%; width: 62.5%; margin: 0; }
  #referrals .reference-break, #blind-spot .reference-break { display: inline; }
  #blind-spot .blindspot-frame { width: calc(1828 * var(--pu)); height: calc(712 * var(--pu)); padding: calc(60 * var(--pu)); }
  #blind-spot .blindspot-copy { position: relative; width: calc(780 * var(--pu)); max-width: none; height: 100%; }
  #blind-spot .blindspot-copy h2 { margin: calc(55 * var(--pu)) 0 calc(33 * var(--pu)); font-size: calc(78 * var(--pu)); line-height: 1.04; letter-spacing: -.06em; }
  #blind-spot h2 .blindspot-secondary { font-size: calc(68 * var(--pu)); line-height: 1.12; white-space: nowrap; }
  #blind-spot .blindspot-copy > p:not(.eyebrow) { max-width: calc(660 * var(--pu)); margin: 0; font-size: calc(25 * var(--pu)); line-height: 1.36; }
  #blind-spot .blindspot-takeaway { position: absolute; bottom: calc(42 * var(--pu)); margin: 0; gap: calc(23 * var(--pu)); font-size: calc(25 * var(--pu)); line-height: 1.24; }
  #blind-spot .blindspot-takeaway i { width: calc(54 * var(--pu)); height: calc(4 * var(--pu)); flex-basis: calc(54 * var(--pu)); }
  #blind-spot .blindspot-diagram { position: absolute; top: 9.27%; left: 47.65%; width: 47.59%; margin: 0; }
  #blind-spot .diagram-link { position: absolute; right: calc(50 * var(--pu)); bottom: calc(43 * var(--pu)); margin: 0; font-size: calc(16 * var(--pu)); }
}
@media (max-width: 1100px) {
  #top { --eu: 1px; min-height: 760px; height: 100svh; max-height: 1000px; padding: 0 24px; }
  #top .site-header { top: 20px; width: calc(100% - 40px); grid-template-columns: auto 1fr auto; }
  #top .brand { font-size: 24px; }
  #top .primary-nav { gap: 24px; }
  #top .header-actions { gap: 18px; }
  #top .hero-copy { top: 29%; width: min(90%,760px); }
  #top h1 { font-size: clamp(42px,6.2vw,68px); }
  #top .hero-intro { font-size: 19px; max-width: 540px; }
  #top .hero-radar { width: 310px; top: 68%; right: -80px; opacity: .25; }
  #engine { --eu: 1px; height: auto; min-height: 780px; padding: 45px 28px; }
  #engine .section-kicker, #engine .engine-heading, #engine .engine-map, #engine .engine-footer { position: relative; inset: auto; }
  #engine .engine-heading { margin-top: 24px; }
  #engine .engine-heading h2 { font-size: clamp(42px,6vw,68px); }
  #engine .engine-heading p { width: min(100%,600px); font-size: 20px; }
  #engine .engine-map { width: calc(100% + 56px); height: auto; margin: 45px -28px 55px; overflow-x: auto; padding-bottom: 8px; }
  #engine .engine-diagram { min-width: 1120px; height: auto; }
  #engine .engine-margin-note { display: none; }
  #engine .engine-footer { font-size: 10px; }
  #definition { --eu: 1px; height: auto; display: grid; grid-template-columns: 1fr; padding: 28px; }
  #definition .definition-left, #definition .definition-divider, #definition .definition-right { position: relative; inset: auto; width: 100%; height: auto; }
  #definition .definition-left { padding: 20px 0 40px; }
  #definition .definition-left h2 { font-size: clamp(54px,7vw,69px); }
  #definition .word-cloud { display: none; }
  #definition .definition-divider { height: 1px; margin: 5px 0 40px; }
  #definition .definition-right { padding: 0; margin-bottom: 50px; }
  #definition .definition-right h3 { font-size: clamp(56px,11.5vw,100px); }
  #definition .definition-right h3 span { font-size: .48em; white-space: normal; }
  #definition .definition-right > p:not(.eyebrow) { font-size: 26px; }
  #principle { --eu: 1px; height: auto; min-height: 650px; padding: 70px 20px; }
  #principle .eyebrow { font-size: 15px; gap: 20px; }
  #principle .eyebrow i { width: 50px; }
  #principle h2 { font-size: clamp(58px,10vw,110px); line-height: .85; }
  #opportunity-example { --eu: 1px; padding: 36px 24px; }
  #opportunity-example .opportunity-heading { height: auto; grid-template-columns: 1fr; gap: 16px; }
  #opportunity-example .opportunity-heading h2 { font-size: clamp(38px,5vw,52px); }
  #opportunity-example .opportunity-heading > div > p:last-child { font-size: 18px; }
  #opportunity-example .opportunity-heading aside { margin: 12px 18px; padding: 8px 0 8px 20px; }
  #opportunity-example .hand-note { display: none; }
  #opportunity-example .comparison-grid { grid-template-columns: 1fr; }
  #opportunity-example .account-card { height: auto; padding: 20px; }
  #opportunity-example .account-high { display: flex; flex-direction: column; gap: 20px; }
  #opportunity-example .account-head { width: 100%; height: auto; }
  #opportunity-example .account-main { grid-template-columns: 96px 1fr; width: 100%; margin: 0; }
  #opportunity-example .account-main h3 { font-size: 29px; white-space: normal; }
  #opportunity-example .account-main span { font-size: 14px; }
  #opportunity-example .account-facts { width: 100%; margin: 0; padding-bottom: 18px; }
  #opportunity-example .account-detail-grid { width: 100%; grid-template-rows: none; margin: 0; }
  #opportunity-example .account-detail-grid > div { min-height: 0; }
  #opportunity-example .account-detail-grid b { font-size: 13px; white-space: normal; }
  #opportunity-example .account-detail-grid p { font-size: 13px; }
  #opportunity-example .account-quote { align-self: stretch; }
  #opportunity-example .assessment { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); row-gap: 12px; }
  #opportunity-example .assessment > div { grid-column: 1 / -1; padding: 0 0 3px; }
  #opportunity-example .account-low .account-main { margin: 20px 0; }
  #opportunity-example .account-low .account-detail-grid { height: auto; margin-top: 20px; }
  #opportunity-example .account-low .account-detail-grid p { font-size: 13px; }
}
@media (max-width: 760px) {
  #top { min-height: 750px; }
  #top .site-header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
  #top .brand-mark { width: 30px; height: 30px; }
  #top .brand { gap: 8px; font-size: 22px; }
  #top .menu-toggle { display: flex; width: 42px; height: 42px; margin-left: auto; }
  #top .header-actions { display: none; }
  #top .primary-nav { position: absolute; top: 54px; left: 0; right: 0; display: none; padding: 22px; background: #fffefa; border: 1px solid #d7ddd6; border-radius: 12px; }
  #top .primary-nav.is-open { display: flex; }
  #top .hero-copy { top: 28%; width: calc(100% - 38px); }
  #top h1 { font-size: clamp(38px,8vw,56px); }
  #top .hero-copy .eyebrow { font-size: 10px; }
  #top .hero-intro { font-size: 17px; }
  #top .hero-actions { gap: 9px; }
  #top .hero-actions .button { padding: 0 17px; font-size: 14px; min-height: 46px; }
  #top .hero-radar { top: 83%; right: -75px; opacity: .27; }
  #engine .engine-map { margin-bottom: 45px; }
  #definition .definition-right h3 { font-size: clamp(44px,11vw,80px); }
  #definition .definition-right > small { font-size: 11px; margin-top: 35px; }
  #principle .eyebrow { font-size: 10px; gap: 16px; }
  #principle .eyebrow i { width: 30px; }
  #principle { min-height: 480px; }
  #principle h2 { font-size: clamp(42px,10.5vw,70px); }
  #opportunity-example { padding: 30px 12px; }
  #opportunity-example .opportunity-heading { margin-inline: 0; }
  #opportunity-example .opportunity-heading h2 { font-size: clamp(32px,8vw,40px); }
  #opportunity-example .opportunity-heading > div > p:last-child { font-size: 16px; }
  #opportunity-example .account-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #opportunity-example .account-main h3, #opportunity-example .account-low .account-main h3 { font-size: clamp(21px,6vw,25px); }
  #opportunity-example .account-main, #opportunity-example .account-low .account-main { grid-template-columns: 80px minmax(0,1fr); gap: 12px; }
  #opportunity-example .roof-photo, #opportunity-example .account-low .roof-photo { width: 80px; height: 116px; }
  #opportunity-example .account-facts b { font-size: 15px; }
  #opportunity-example .account-facts > div { padding: 0 10px; }
  #opportunity-example .account-card { padding: 17px; }
  #opportunity-example .alignment { font-size: 8px; letter-spacing: .04em; }
  #opportunity-example .priority { font-size: 9px; }
  #opportunity-example .account-low .account-detail-grid b { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { #top *, #engine *, #definition *, #principle * { animation: none !important; } }

:is(#referrals,#paid-acquisition) .source-note a { color:inherit; text-decoration:underline; text-decoration-color:#829187; text-underline-offset:3px; }
:is(#referrals,#paid-acquisition) .source-note a:hover { color:#20583f; text-decoration-color:currentColor; }
:is(#referrals,#paid-acquisition) .source-note a:focus-visible { outline:2px solid #356b54; outline-offset:3px; }

/* The illustration uses the full chapter height, matching the other models. */
#paid-acquisition .paid-coded-scene { aspect-ratio:1230 / 760; height:auto; }
#paid-acquisition .paid-market-scene { display:block; width:100%; height:auto; }
@media (min-width:1101px) {
  #paid-acquisition .paid-flow { top:4%; left:42%; width:57%; height:auto; margin:0; }
}
@media (min-width:761px) and (max-width:1100px) {
  #paid-acquisition .paid-frame { height:auto; min-height:0; }
  #paid-acquisition .paid-flow { position:relative; inset:auto; width:100%; height:auto; margin:30px 0 0; }
}
#paid-acquisition .paid-coded-scene:focus-visible { outline:2px solid #356b54; outline-offset:5px; border-radius:12px; }
@media (max-width:760px) {
  #paid-acquisition .paid-flow { height:auto; min-height:0; margin:24px 0 0; overflow:visible; transform:none; }
  #paid-acquisition .paid-coded-scene { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:0 0 10px; scrollbar-width:thin; scrollbar-color:#a3b39e #f0f1ea; }
  #paid-acquisition .paid-market-scene { width:700px; max-width:none; }
  #paid-acquisition .scene-caption-mobile { display:block; margin:10px 0 0; color:#63706b; font-size:11px; line-height:1.5; }
}
@media (max-width:760px) {
  #paid-acquisition .paid-frame { min-width:0; }
  #paid-acquisition .paid-flow { width:100%; min-width:0; max-width:100%; }
  #paid-acquisition .paid-coded-scene { width:100%; min-width:0; }
}
@media (max-width:760px) {
  #paid-acquisition .paid-coded-scene { aspect-ratio:auto; height:auto; }
}