/* GeekScope: Why page only. Loads after css/system.css.
   Five reasons with unequal weight: a readout panel (people), an excerpt (assistant),
   a price band with the one pencil ring (price), a quiet chain (campaigns),
   and the LeadGeeks proof band (team). No authored scroll moment of its own. */

/* desktop-only line breaks inside headings */
@media (min-width: 1100px) { .br { display: block; white-space: nowrap; } }

/* ---------- hero: an engraved line, then the sentence in the body face ---------- */
.w-hero { padding-top: clamp(28px, 6vh, 72px); }
.w-hero-in { display: grid; gap: 52px; }
.h1-d { display: block; }
.h1-s {
  display: block; margin-top: 14px; max-width: 21em;
  font: 600 24px/1.28 var(--sans); letter-spacing: -0.018em; text-wrap: balance;
}
.h1-s .tnum { font-weight: 650; }
@media (min-width: 768px) { .h1-s { margin-top: 20px; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.22; } }
.w-hero .lede { max-width: 31em; }

/* the five reasons as a contents list: each title with its proof readout */
.w-index ul { box-shadow: 0 -2px 0 var(--ink); }
.w-index li { box-shadow: 0 1px 0 var(--rule); }
.w-index a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline;
  min-height: 56px; padding: 15px 0 14px; text-decoration: none;
}
.wi-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.008em; transition: color 0.3s var(--ease); }
.wi-r { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); white-space: nowrap; text-align: right; }
.w-index a:hover .wi-t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.wi-foot { margin-top: 12px; font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
@media (min-width: 1100px) {
  .w-hero-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .w-hero-copy { grid-column: 1 / span 8; }
  .h1-d { white-space: nowrap; }
  .w-index { grid-column: 9 / span 4; padding-bottom: 4px; }
}

/* ---------- 1. the people: copy, then a readout panel with the evidence beside it ---------- */
.r1 { padding-top: var(--sec); }
.r1-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.r1-text p { margin-top: 20px; color: var(--ink-2); max-width: 33em; }
.r1-text h2 + p { margin-top: 28px; }
.r1-figs > div { display: flex; flex-direction: column; gap: 8px; padding: 16px 0 16px; box-shadow: 0 -1px 0 var(--ink); }
.r1-figs > div:first-child { box-shadow: 0 -2px 0 var(--ink); }
.r1-figs dd {
  order: -1; margin: 0;
  font-size: clamp(40px, 12.4vw, 64px); line-height: 0.95; font-weight: 500;
  font-variation-settings: "wdth" 112; letter-spacing: -0.045em;
}
.r1-figs dt { font-size: 16px; line-height: 1.35; color: var(--ink-2); }
@media (min-width: 768px) {
  .r1-figs > div { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0 16px; }
  .r1-figs dt { text-align: right; max-width: 14em; }
}
.r1-asof { padding-top: 14px; box-shadow: 0 -1px 0 var(--ink); font-size: 15px; color: var(--ink-2); }
.r1-asof .lnk { margin-left: 10px; font-size: 16px; }
.r1-card { margin-top: 40px; }
.r1-card .lens-card { margin-top: 0; max-width: 380px; }
@media (min-width: 1100px) {
  .r1-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .r1-text { grid-column: 1 / span 5; }
  .r1-proof { grid-column: 7 / span 6; padding-top: 10px; }
  .r1-figs dd { font-size: clamp(64px, 5.6vw, 84px); }
  .r1-card { margin-top: 48px; }
}

/* ---------- 2. the assistant: a short excerpt of the conversation ---------- */
.r2 { padding-top: var(--sec); }
.r2-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.r2-text p { margin-top: 20px; color: var(--ink-2); max-width: 30em; }
.r2-text .lnk { margin-top: 14px; }
@media (min-width: 1100px) {
  .r2-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .r2-text { grid-column: 1 / span 5; }
  .r2 .log { grid-column: 7 / span 6; padding-top: 6px; }
  .r2 .turn { grid-template-columns: 150px minmax(0, 1fr); }
}

/* ---------- 3. the price: a band with the readout circled in grease pencil ---------- */
.r3 { margin-top: var(--sec); background: var(--slide); box-shadow: 0 -1px 0 var(--ink), 0 1px 0 var(--ink); }
.r3-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 64px var(--g) 72px; display: grid; gap: 36px; }
.r3-in .reg-tl, .r3-in .reg-tr { top: 28px; }
.r3-in .reg-bl, .r3-in .reg-br { bottom: 28px; }
.r3-read { padding-top: 12px; }
@media (max-width: 1099px) { .r3-read .r3-num { margin-left: 64px; } }
.r3-num {
  position: relative; display: inline-block; margin-left: 4px;
  font: 500 clamp(72px, 22vw, 96px)/0.9 var(--mono); font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums; letter-spacing: -0.05em;
}
.r3-num > span { font-variation-settings: "wdth" 112; }
.r3-ring { position: absolute; left: -19%; top: -40%; width: 138%; height: 180%; max-width: none; overflow: visible; pointer-events: none; }
.r3-per { margin-top: 36px; font: 600 21px/1.2 var(--sans); letter-spacing: -0.01em; }
.r3-spec { margin-top: 28px; max-width: 460px; }
.r3-spec div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0 12px; box-shadow: 0 -1px 0 var(--rule); }
.r3-spec div:first-child { box-shadow: 0 -1px 0 var(--ink); }
.r3-spec dt { font: 450 15px/1.4 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.r3-spec dd { margin: 0; font-size: 16px; font-weight: 600; text-align: right; }
.r3-text p { color: var(--ink-2); max-width: 32em; }
.r3-text p + p { margin-top: 18px; }
.r3-text .lnk { margin-top: 14px; }
@media (min-width: 1100px) {
  .r3-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 64px; padding: 104px var(--g) 112px; align-items: start; }
  .r3 h2 { grid-column: 1 / span 7; }
  .r3-read { grid-column: 1 / span 5; padding-top: 18px; }
  .r3-text { grid-column: 7 / span 5; }
}

/* ---------- 4. search to sent email: the quiet one ---------- */
.r4 { padding-top: var(--sec); }
.r4-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.r4-text p { margin-top: 20px; color: var(--ink-2); max-width: 31em; }
.r4-text .lnk { margin-top: 14px; }
.r4-or { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font: 450 16px/1.4 var(--mono); font-variation-settings: "wdth" 87; letter-spacing: -0.01em; }
.r4-or .label { margin-right: 2px; }
@media (min-width: 1100px) {
  .r4-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .r4-text { grid-column: 1 / span 5; }
  .r4-ex { grid-column: 7 / span 6; padding-bottom: 14px; }
}

/* ---------- 5. the team: LeadGeeks' proof on a band ---------- */
.r5 { margin-top: var(--sec); background: var(--slide); }
.r5-in { max-width: var(--max); margin: 0 auto; padding: 72px var(--g) 80px; }
.r5-head { display: grid; gap: 22px; }
.r5-body p { color: var(--ink-2); max-width: 32em; }
.r5-body p + p { margin-top: 16px; }
.r5-body .lnk { margin-top: 12px; }
.r5-quote { margin: 64px 0 0; }
.r5-quote blockquote { margin: 0; }
.r5-quote blockquote p {
  font: 600 clamp(25px, 6.6vw, 30px)/1.24 var(--sans); letter-spacing: -0.022em;
  max-width: 21em; text-indent: -0.42em; text-wrap: pretty;
}
.r5-quote figcaption { margin-top: 22px; font-size: 16px; color: var(--ink-2); }
.r5-quote figcaption strong { color: var(--ink); font-weight: 650; }
.r5-foot { margin-top: 64px; display: grid; gap: 52px; padding-top: 28px; box-shadow: 0 -1px 0 var(--ink); }
.r5-pct {
  font: 500 clamp(68px, 21vw, 96px)/0.9 var(--mono); font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums; letter-spacing: -0.05em;
}
.r5-what { margin-top: 18px; font-size: 18px; line-height: 1.45; max-width: 17em; }
.r5-src { margin-top: 10px; font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.r5-names-l { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
/* the client names, set as a still list in the body face: no logos, no strip */
.r5-names ul { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 6px; }
.r5-names li { font: 650 24px/1.3 var(--sans); letter-spacing: -0.02em; white-space: nowrap; }
.r5-names li:not(:last-child)::after { content: "/"; margin: 0 0.42em 0 0.38em; font-weight: 400; color: var(--ink-2); opacity: 0.55; }
@media (min-width: 768px) {
  .r5-quote blockquote p { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.2; }
  .r5-names li { font-size: clamp(28px, 2.4vw, 34px); }
}
@media (min-width: 1100px) {
  .r5-in { padding: 112px var(--g) 120px; }
  .r5-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .r5-head h2 { grid-column: 1 / span 6; }
  .r5-body { grid-column: 8 / span 5; }
  .r5-quote { margin-top: 104px; }
  .r5-quote blockquote p { max-width: 19.5em; }
  .r5-foot { margin-top: 96px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: 36px; }
  .r5-result { grid-column: 1 / span 4; }
  .r5-names { grid-column: 6 / span 7; }
}
@media (min-width: 1600px) { .r5-in, .r3-in { max-width: var(--max); } }

/* ---------- closing ---------- */
.w-close { padding: var(--sec) 0 calc(var(--sec) * 0.72); }
.w-close-in { display: grid; gap: 24px; }
.w-close-side p { color: var(--ink-2); max-width: 32em; }
@media (min-width: 1100px) {
  .w-close-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; }
  .w-close h2 { grid-column: 1 / span 6; }
  .w-close-side { grid-column: 7 / span 6; }
}

/* CSP-safe positions from the approved mockup. */
.why-position-1 { --i:0; }