/* Home page sections under the hero (Roy, Oct 2). */

/* The page stops dead at the Scale Your Business button, no rubber-band bounce
   past the top or bottom on phones (Roy, Oct 3: "it's stuck. I like this") */
html, body { overscroll-behavior-y: none; }

/* ---- Pain band, ported from cornellgroupllc.com ----
   Same headline, icons and card copy as Cornell's charcoal band, rebuilt for
   our black page: white outline cards, the headline is the dropdown's font
   (SF Pro Display / Inter at 600) in caps, and "inconsistent lead flow" sits
   on a solid brand-blue marker (not the gradient, Roy) that sweeps in when the
   section scrolls into view. */
.pain { padding: 128px 16px 112px; }
.pain-inner {
  max-width: 1280px;
  margin: 0 auto;
  container-type: inline-size;
}

/* Two pinned lines. In SF Pro Display both lines measure the same (1242px at
   100px, Inter 1340px), so sizing off the wider Inter keeps both lines on one
   row each on any screen: 100cqi / 13.4, capped at 72px on desktop. */
.pain-h2 {
  margin: 0 0 60px;
  font-family: var(--font-display);
  font-size: min(72px, 100cqi / 13.4);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}
.pain-l { display: block; white-space: nowrap; }
.pain-mark {
  padding: 0.02em 0.16em 0.04em;
  border-radius: 0.12em;
  background: linear-gradient(var(--ff-3), var(--ff-3)) 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 0.9s var(--sheet-ease) 0.3s;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* White outline boxes with white words and icons (Roy, Oct 2: "white outline
   boxes, and then white font and white icon"), Cornell's look on our black */
.pain-card {
  padding: 54px 34px 58px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 22px;
  background: transparent;
  color: #fff;
  text-align: center;
}
/* white line art on transparency, as drawn */
.pain-icon {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
}
.pain-card h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.pain-card p {
  max-width: 36ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* Scroll-in: the cards rise one after another and the marker sweeps across.
   site JS adds .is-armed only when it can also add .is-in, so with no JS
   everything simply shows. */
.pain.is-armed .pain-mark { background-size: 0% 100%; }
.pain.is-armed .pain-card { opacity: 0; transform: translateY(28px); }
.pain.is-in .pain-mark { background-size: 100% 100%; }
.pain.is-in .pain-card {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--sheet-ease), transform 0.9s var(--sheet-ease);
}
.pain.is-in .pain-card:nth-child(2) { transition-delay: 0.12s; }
.pain.is-in .pain-card:nth-child(3) { transition-delay: 0.24s; }

@media (min-width: 1200px) {
  .pain { padding: 150px 32px 130px; }
}

/* One column once three would get cramped */
@media (max-width: 900px) {
  .pain-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 14px; }
}

@media (max-width: 767px) {
  .pain { padding: 80px 16px 72px; }
  .pain-h2 { margin-bottom: 36px; line-height: 1.16; }
  .pain-card { padding: 42px 24px 46px; border-radius: 20px; }
  .pain-icon { width: 84px; height: 84px; margin-bottom: 18px; }
  .pain-card h3 { font-size: 21px; }
  .pain-card p { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .pain.is-armed .pain-card { transform: none; }
  .pain-mark, .pain.is-in .pain-card { transition: opacity 0.4s ease; }
}

/* ---- How we do it (Roy, Oct 2) ----
   Cornell's growth banner, green info card and outline pair, redesigned from
   scratch. The banner is three white lines that rise in one after another.
   Then the ad plays in a rounded rectangle that holds still on desktop while
   the three steps light up one by one down a blue rail. Then two photo cards. */
.how { padding: 24px 16px 16px; } /* the page ends at the card (Roy, Oct 3) */
.how-inner { max-width: 1280px; margin: 0 auto; container-type: inline-size; }

/* Desktop: two lines in the dropdown's font, caps (Roy, Oct 3):
     MORE LEADS. BIGGER JOBS.
     YEAR-ROUND GROWTH.
   brightening 34% / 62% / 100% so the payoff lands last. The longer line, the
   top one, is 1353px in Inter at 100px (1260px in SF Pro), so 100cqi / 13.6
   keeps it on one row, capped at 116px. On phones it splits into three equal
   width lines (below). */
.how-banner {
  margin: 0 0 120px;
  font-family: var(--font-display);
  font-size: min(116px, 100cqi / 13.6);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-align: center;
}
.how-row { display: block; white-space: nowrap; }
.how-line { display: inline-block; color: #fff; }
.how-row:first-child .how-line:first-child { color: rgba(255, 255, 255, 0.34); }
.how-row:first-child .how-line:last-child { color: rgba(255, 255, 255, 0.62); }
.how-banner.is-armed .how-line { opacity: 0; transform: translateY(0.35em); }
.how-banner.is-in .how-line {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--sheet-ease), transform 0.9s var(--sheet-ease);
}
.how-banner.is-in .how-row:first-child .how-line:last-child { transition-delay: 0.14s; }
.how-banner.is-in .how-row:last-child .how-line { transition-delay: 0.28s; }

/* The white card (Roy, Oct 3: "just make that section white"): the ad runs
   flush down the card's left side on desktop and flush across its top on
   phones ("connect to the borders"), with the headline and steps on white
   next to / under it. The ad is a plain rectangle, no phone frame. */
.how-grid {
  display: grid;
  grid-template-columns: min(400px, 38%) minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  color: #0b0b0c;
}
/* desktop: the ad fills its column top to bottom, whatever height the words
   need (an aspect-ratio here would widen the column into the text) */
.how-stage { position: relative; min-height: 640px; background: #0b0b0c; }
.how-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.how-copy {
  align-self: center;
  padding: clamp(40px, 5.5vw, 80px) clamp(32px, 5vw, 76px);
  container-type: inline-size;
}

.how-h {
  margin: 0 0 52px;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.1vw, 44px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #0b0b0c;
  text-wrap: balance;
}
.how-accent { color: var(--ff-3); }

/* The rail: a faint line down the numbers, and a blue one that fills to the
   step you're on (site JS sets --fill) */
.how-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.how-steps::before,
.how-steps::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 26px;
  width: 2px;
  border-radius: 2px;
}
.how-steps::before { bottom: 26px; background: rgba(0, 0, 0, 0.1); }
.how-steps::after {
  height: max(0px, calc(var(--fill, 1000px) - 26px));
  max-height: calc(100% - 52px);
  background: linear-gradient(180deg, var(--ff-1), var(--ff-3) 60%, var(--ff-5));
  transition: height 0.45s var(--sheet-ease);
}
.how-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 48px;
}
.how-step:last-child { padding-bottom: 0; }
.how-n {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #0b0b0c;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, color 0.4s ease;
}
.how-step h4 {
  margin: 11px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 25px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #0b0b0c;
}
.how-step p { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.6; color: #55575c; }
.how-steps.is-armed .how-step > div { opacity: 0.3; transition: opacity 0.5s ease; }
.how-steps.is-armed .how-step.is-on > div { opacity: 1; }
.how-steps.is-armed .how-step.is-on .how-n { background: var(--ff-3); box-shadow: inset 0 0 0 1px var(--ff-3); color: #fff; }

/* The big call to action that ends the white card (Roy, Oct 3: "a huge, big
   button", then "have the button be a gradient, and then just the font white
   on it"). The brand bar's moving blue gradient, white words, into the Get
   Started funnel. (First version: black with gradient words.) */
.how-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 560px;
  height: 78px;
  margin-top: 52px;
  border-radius: 16px;
  background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
  background-size: 200% 100%;
  animation: bar-flow 6s linear infinite;
  color: #fff;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(23, 31, 199, 0.25);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.how-cta span::after { content: "\2192"; margin-left: 12px; }
.how-cta:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(23, 31, 199, 0.32); }
.how-cta:active { transform: none; }
.how-cta:focus-visible { outline: 3px solid var(--ff-4); outline-offset: 4px; }

@media (min-width: 1200px) {
  .how { padding: 40px 32px 32px; }
}

/* Phone on top, steps under it, cards stacked */
@media (max-width: 900px) {
  .how-banner { margin-bottom: 72px; }
  /* Ad flush across the top of the white card, words under it */
  .how-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; border-radius: 24px; }
  .how-stage { min-height: 0; aspect-ratio: 9 / 16; }
  .how-copy { padding: 34px 26px 42px; }
  .how-h { margin-bottom: 40px; }
}

@media (max-width: 767px) {
  .how { padding: 8px 16px 0; } /* the edge-to-edge card is the last thing on the page */
  /* Phone (Roy, Oct 3): three lines, each as wide as YEAR-ROUND GROWTH. so
     they stack as one block, keeping the same 34% / 62% / 100% brightening
     ("that gradient... bring it back all the way"). Inter at 100px: MORE LEADS.
     657px, BIGGER JOBS. 668px, YEAR-ROUND GROWTH. 1159px; each size fills 98%
     of the column (SF Pro runs a touch narrower, so it never overflows). */
  .how-banner { line-height: 0.98; }
  .how-row { display: contents; }
  .how-line { display: block; }
  .how-row:first-child .how-line:first-child { font-size: calc(98cqi / 6.57); }
  .how-row:first-child .how-line:last-child { font-size: calc(98cqi / 6.68); }
  .how-row:last-child .how-line { font-size: calc(98cqi / 11.59); }
  /* Scroll-lit (Roy, Oct 3): site JS sets each line's --a, a wave from dark
     to white and back to the 34% / 62% / 100% gradient it rests on. */
  .how-banner.is-scroll-lit .how-line,
  .how-banner.is-scroll-lit .how-row:first-child .how-line:first-child,
  .how-banner.is-scroll-lit .how-row:first-child .how-line:last-child {
    color: rgba(255, 255, 255, var(--a, 1));
  }
  /* Edge to edge with square corners on phones (Roy, Oct 3: "connect end to
     end, sharp edges"): the ad and the white panel under it run the full
     width of the screen, out past the page's 16px side margins */
  .how-grid { max-width: none; margin: 0 -16px; border-radius: 0; }
  .how-copy { padding: 34px 20px 40px; }
  /* Phone headline, the way Apple sets a feature tile (Roy, Oct 3: "How would
     Apple put this here?"): one size, left edge shared with the steps under
     it, and two tones in one sentence. The setup is Apple's soft gray, the
     payoff ("qualified leads that close the same day.") is near black, with
     "qualified leads" kept in our blue. 30px, then +10% (33px, "fill up this
     space"), then +20% (39.6px, "close that little gap on the right"; at 40px
     "response" fell to a line of its own). The fitted five-line lockup and the
     centered version were both tried first. */
  .how-h { margin-bottom: 40px; font-size: 39.6px; line-height: 1.1; letter-spacing: -0.025em; text-align: left; text-wrap: pretty; }
  .how-hl:nth-child(-n+3) { color: #86868b; }
  .how-hl:nth-child(n+4) { color: #0b0b0c; }
  .how-hl .how-accent { color: var(--ff-3); }

  /* The reading sweep (site JS wraps each word in .w and moves .is-hot /
     .is-done as you scroll). Before the band arrives every word is gray. */
  .how-h.is-reading .w { color: #a1a1a6; transition: color 0.28s ease; }
  .how-h.is-reading .w.is-hot { color: #0b0b0c; }
  .how-h.is-reading .w[data-group="setup"].is-done { color: #86868b; }
  .how-h.is-reading .w[data-group="accent"].is-hot { color: #a1a1a6; }
  .how-h.is-reading .w[data-group="payoff"].is-done { color: #0b0b0c; }
  .how-h.is-reading .how-accent.is-done {
    background-image: linear-gradient(90deg, var(--ff-1) 0%, var(--ff-3) 25%, var(--ff-5) 50%, var(--ff-3) 75%, var(--ff-1) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: bar-flow 6s linear infinite;
  }
  .how-h.is-reading .how-accent.is-done .w { color: transparent; }
  .how-steps::before, .how-steps::after { left: 21px; top: 22px; }
  .how-steps::before { bottom: 22px; }
  .how-steps::after { height: max(0px, calc(var(--fill, 1000px) - 22px)); max-height: calc(100% - 44px); }
  .how-step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding-bottom: 38px; }
  .how-n { width: 44px; height: 44px; font-size: 15px; }
  /* Step titles on phones (Roy, Oct 3: "these headlines don't fit well"):
     set breaks at natural phrases (span.sl), 2 or 3 lines each, sized so the
     longest line ("We audit your marketing", 1063px at 100px) fills the text
     column: 96cqi / 10.63, about 25px on a 375 phone, up from 20px.
       We audit your marketing / and find the flaws.
       We design a 90-day / game plan tailored / to your company.
       We add 25% / to your revenue.
       Then we scale you / past 7 figures. */
  .how-step > div { container-type: inline-size; }
  .how-step h4 { margin-top: 7px; font-size: calc(96cqi / 10.63); line-height: 1.14; letter-spacing: -0.02em; }
  .how-step .sl { display: block; white-space: nowrap; }
  .how-step p { font-size: 16px; }
  .how-cta { max-width: none; height: 74px; margin-top: 44px; font-size: 23px; }
}

/* Pain cards on phones and tablets (Roy, Oct 3): each one sits dark gray and a
   touch smaller until it reaches the middle of the screen, then turns white
   and steps forward. Site JS adds .is-lighting and moves .is-lit. */
@media (max-width: 900px) {
  .pain.is-armed .pain-card { opacity: 1; transform: none; }
  .pain.is-lighting .pain-card {
    transition: color 0.45s ease, border-color 0.45s ease, transform 0.6s var(--sheet-ease);
  }
  .pain.is-lighting .pain-card p,
  .pain.is-lighting .pain-icon { transition: color 0.45s ease, opacity 0.45s ease; }
  .pain.is-lighting .pain-card:not(.is-lit) { color: #5c5c5f; border-color: rgba(255, 255, 255, 0.12); transform: scale(0.96); }
  .pain.is-lighting .pain-card:not(.is-lit) p { color: #46464a; }
  .pain.is-lighting .pain-card:not(.is-lit) .pain-icon { opacity: 0.3; }
  .pain.is-lighting .pain-card.is-lit { border-color: rgba(255, 255, 255, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .how-banner.is-armed .how-line { transform: none; }
  .how-banner.is-in .how-line { transition: opacity 0.4s ease; }
  .how-steps::after { transition: none; }
  .how-cta { animation: none; }
}