/* /growth: LANDING grammar (one message, one CTA, no nav; the shell's header-landing and footer-landing carry that),
   family structure (cyan to violet), signature HELIOSTAT. Layout is this page's own (D18, fix round 1): the message sits
   low on the left like a horizon, the light comes down from the upper left onto the mirror, the beam is set to a
   bearing on the arc; below, a graduated rule opens the conversation, three bearings name what it covers, and the form
   is ruled straight onto the ground (no card). */

/* ---- hero ---- */
.gw-hero { position: relative; overflow-x: clip; isolation: isolate; }
.gw-hero::before {
  /* the family's light, faint, where the beam lands: no grid, no table */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 72% 30%, rgba(127, 214, 242, .15), transparent 100%),
    radial-gradient(26% 30% at 88% 44%, rgba(180, 156, 248, .12), transparent 100%);
}
.gw-hero-in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 3vw, 56px);
  min-height: min(824px, calc(100vh - 76px));
  padding-block: clamp(40px, 6vh, 80px) clamp(48px, 8vh, 96px);
}
.gw-copy { align-self: end; position: relative; z-index: 2; max-width: 540px; }
.gw-copy .eyebrow { margin: 0 0 22px; }
.gw-hero h1 {
  font: 400 clamp(52px, 6.1vw, 92px)/.98 var(--serif); letter-spacing: -.015em;
  margin: 0 0 30px; color: var(--ink);
}
.gw-lede { font-size: 19px; line-height: 1.62; color: var(--ink-2); margin: 0; max-width: 30em; }
.gw-instrument { margin: 0; align-self: center; pointer-events: none; }
.gw-instrument svg { display: block; width: 100%; height: auto; }

/* ---- the instrument (geometry lives in heliostat.js) ---- */
.hs-arc { fill: none; stroke: rgba(29, 33, 38, .34); stroke-width: 1.1; }
.hs-arc2 { fill: none; stroke: rgba(29, 33, 38, .12); stroke-width: 1; }
.hs-tick { stroke: rgba(29, 33, 38, .3); stroke-width: 1; stroke-linecap: round; }
.hs-major { stroke: rgba(29, 33, 38, .5); stroke-width: 1.3; }
.hs-stop { fill: url(#hs-bead); stroke: rgba(29, 33, 38, .28); stroke-width: .9; transition: fill .4s, stroke .4s; }
.hs-stop[data-lit] { fill: #1D2126; stroke: #1D2126; }
.hs-band { fill: none; stroke: rgba(154, 180, 246, .2); stroke-width: 34; stroke-linecap: round; }
.hs-ray { fill: none; stroke: rgba(79, 195, 232, .55); stroke-width: 1.2; }
.hs-halo { fill: none; stroke: rgba(127, 214, 242, .16); stroke-width: 12; stroke-linecap: round; }
.hs-c, .hs-v { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.hs-c { stroke: #4FC3E8; }
.hs-v { stroke: #9C7CF4; opacity: .9; }
.hs-post { fill: rgba(29, 33, 38, .62); }
.hs-foot { fill: #1D2126; opacity: .8; }
.hs-plate { filter: drop-shadow(0 10px 16px rgba(50, 64, 110, .2)); }
.hs-rim { stroke-width: 1.4; }
.hs-face { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; opacity: .9; }
.hs-hub { fill: #FBFBFD; stroke: #1D2126; stroke-width: 1.6; }

/* ---- the conversation ---- */
.gw-talk { position: relative; padding: 0 0 clamp(72px, 10vh, 120px); }
.gw-rule {
  /* a graduated rule across the page, the arc's scale laid flat: minor ticks every 12 px, a major every 60 px */
  height: 16px; margin-bottom: clamp(48px, 7vh, 84px);
  border-top: 1px solid rgba(29, 33, 38, .22);
  background:
    repeating-linear-gradient(90deg, rgba(29, 33, 38, .4) 0 1px, transparent 1px 60px) top left / 100% 14px no-repeat,
    repeating-linear-gradient(90deg, rgba(29, 33, 38, .22) 0 1px, transparent 1px 12px) top left / 100% 7px no-repeat;
}
.gw-talk-head { margin-bottom: 34px; }
.gw-talk h2 { font: 400 clamp(40px, 4.6vw, 68px)/1.02 var(--serif); letter-spacing: -.01em; margin: 0 0 16px; max-width: 16em; }
.gw-talk-intro { margin: 0; color: var(--ink-2); font-size: 17px; }
.gw-topics {
  list-style: none; margin: 0 0 clamp(48px, 7vh, 72px); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px);
}
.gw-topics li {
  position: relative; padding: 52px 0 0; border-top: 1px solid var(--line);
  font-size: 17px; line-height: 1.5; color: var(--ink);
}
.gw-bearing {
  /* a small needle at the bearing each line names, pivoting on a dot: the instrument's idea, not its drawing */
  position: absolute; left: 4px; top: 32px; width: 24px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  transform-origin: 0 50%; transform: rotate(var(--b));
}
.gw-bearing::before {
  content: ""; position: absolute; left: -3px; top: -2.25px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink);
}

/* the form, ruled onto the ground: no card, no glass sheet */
.gw-form { position: relative; }
.gw-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px clamp(20px, 3vw, 48px); }
.gw-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gw-wide, .gw-choice { grid-column: 1 / -1; }
.gw-field label, .gw-choice legend { font: 600 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.gw-field input, .gw-field select, .gw-field textarea {
  font: 400 18px/1.4 var(--sans); color: var(--ink);
  min-height: 48px; padding: 10px 2px; border: 0; border-radius: 0;
  background: transparent; border-bottom: 1.5px solid rgba(29, 33, 38, .42);
  transition: border-color .25s var(--ease);
}
.gw-field select { padding-right: 30px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 7px) 55%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.gw-field textarea { min-height: 96px; resize: vertical; }
.gw-field input:focus, .gw-field select:focus, .gw-field textarea:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1.5px 0 var(--ink); }
.gw-field input:focus-visible, .gw-field select:focus-visible, .gw-field textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.gw-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.gw-choice legend { padding: 0; margin: 0 0 14px; }
.gw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.gw-chip { position: relative; display: inline-flex; }
.gw-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gw-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  font: 500 15px/1.2 var(--sans); color: var(--ink);
  background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(29, 33, 38, .22);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.gw-chip input:checked + span { background: var(--ink); color: #FBFAF7; box-shadow: none; }
.gw-chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.gw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 36px; }
.gw-actions .btn { min-height: 52px; padding: 0 28px; }
.gw-actions .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.gw-msg { margin: 0; font: 600 15px/1.4 var(--sans); color: var(--ink); min-height: 1.4em; }
.gw-noscript { margin: 16px 0 0; font-size: 15px; color: var(--ink); }
.gw-fine { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.gw-fine p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.gw-fine a { color: var(--ink); text-underline-offset: 3px; }

/* ---- narrower desktops ---- */
@media (max-width: 1100px) and (min-width: 761px) {
  /* the message first, the instrument under it at the right: two columns leave the mirror too small here */
  .gw-hero-in { grid-template-columns: 1fr; min-height: 0; gap: 0; padding-block: 48px 40px; }
  .gw-copy { align-self: start; max-width: 600px; }
  .gw-instrument { justify-self: end; width: min(100%, 660px); margin-top: -24px; }
  .gw-fields { grid-template-columns: 1fr 1fr; }
  .gw-fields .gw-field:nth-child(3) { grid-column: 1 / -1; }
}
/* very short desktop windows: keep the message and the instrument inside the first screen */
@media (min-width: 761px) and (max-height: 760px) {
  .gw-hero h1 { font-size: clamp(48px, 5.2vw, 76px); }
}

/* ---- phone ---- */
@media (max-width: 760px) {
  .gw-hero-in { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding-block: 36px 24px; }
  .gw-copy { align-self: start; }
  .gw-hero h1 { font-size: clamp(44px, 12.4vw, 56px); margin-bottom: 22px; }
  .gw-lede { font-size: 17.5px; }
  .gw-instrument { width: calc(100% + 32px); margin: 8px -16px 0; }
  .gw-rule { margin-bottom: 40px; }
  .gw-talk-head { margin-bottom: 26px; }
  .gw-topics { grid-template-columns: 1fr; gap: 0; }
  .gw-topics li { padding: 22px 0 22px 52px; }
  .gw-bearing { top: 36px; left: 10px; }
  .gw-fields { grid-template-columns: 1fr; gap: 24px; }
  .gw-actions .btn { width: 100%; }
}