@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
  --color-accent: #344C3D;
  --color-accent-dark: #26382C;
  --color-bg-sage: #E8EFE6;
  --color-bg-light: #F6F9F5;
  --color-text: #1A1A1A;
  --color-white: #FFFFFF;
  --font-heading: Georgia, 'Times New Roman', serif;
  --font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 4px 20px rgba(52, 76, 61, 0.08);
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#hands-challenge {
  font-family: var(--font-body);
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-bg-sage) 0%, var(--color-bg-light) 320px);
  line-height: 1.6;
}

/* Global anti-stretch rule. Every image keeps its true aspect ratio; nothing
   is ever squashed to fill a box. Intrinsic width/height attributes are set
   from the real files, so the ratio is reserved before load with no shift. */
#hands-challenge img {
  max-width: 100%;
  height: auto;
  display: block;
}

#hands-challenge h1,
#hands-challenge h2,
#hands-challenge h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
}

#hands-challenge p {
  margin: 0 0 var(--space-3);
  /* 24px, matching waitlist.css. 23px here was drift from an earlier pass, and
     a shared ramp is the point: the two pages are one funnel. */
  font-size: 24px;
}

#hands-challenge a {
  color: var(--color-accent);
}

#hands-challenge :focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

#hands-challenge .section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
}

#hands-challenge .section-inner.narrow {
  max-width: 680px;
}

#hands-challenge .section-inner.center {
  text-align: center;
}

#hands-challenge .tint-sage {
  background: var(--color-bg-sage);
}

#hands-challenge .tint-light {
  background: var(--color-bg-light);
}

/* Soft blended seam between the alternating tinted bands, so sections read
   as a continuous flow rather than flat stacked rectangles. One consistent
   device, used on every section. */
#hands-challenge .section {
  position: relative;
}

/* Scoped to the sage bands only. A 55% white veil over #F6F9F5 is invisible,
   so on the light bands this was a rule that fired and changed nothing. */
#hands-challenge .section.tint-sage::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Accent rule beneath every section heading. Two-tone and 72x4 rather than one
   flat 56x3 bar, so the mark echoes the filled check disc used in the lists
   instead of being pure texture. Identical to the waitlist rule, so the two
   pages stop reading as two different sites. */
#hands-challenge .section h2 {
  position: relative;
  display: inline-block;
  padding-bottom: var(--space-2);
}

#hands-challenge .section h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    var(--color-accent) 0 40px,
    rgba(52, 76, 61, 0.28) 40px 100%);
}

#hands-challenge .section-inner.center h2::after {
  left: 50%;
  transform: translateX(-50%);
}

/* In-body kicker. No pill, so the eyebrow capsule stays a hero-only signal and
   the reader can tell the top of the page from the middle of it. Ported
   unchanged from waitlist.css. */
#hands-challenge .section-kicker {
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-1);
}

/* ---------- HERO ---------- */

#hands-challenge .hero {
  padding-top: var(--space-5);
}

#hands-challenge .hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

/* (The .hero-media cap and its cutout mask lived here. This page's hero is the
   photographic variant and has no .hero-media element, so they styled nothing.
   hero-a-cutout-variant.html still uses the class and links this stylesheet, so
   it loses the 250px cap and the fade — it is reference-only per README, and the
   rules are in git if that variant is ever revived. */

#hands-challenge .hero-content {
  width: 100%;
  max-width: 560px;
  text-align: center;
}

#hands-challenge .eyebrow {
  display: inline-block;
  background: var(--color-bg-sage);
  color: var(--color-accent);
  font-family: var(--font-body);
  /* Deliberately unused on index.html by client decision — he has now rejected
     an eyebrow on that page twice, so this is not dead work waiting to be wired,
     and it must not be re-wired. Kept for the variant heroes, at the 20px floor
     with the rest of the ramp so it cannot reappear at 14px. */
  font-size: 20px;
  font-weight: 700;
  /* A pill label, so the line box is tight rather than inheriting the body's
     1.6. At the 20px floor on a phone this capsule costs 56px of first screen
     including its margin; 1.6 and a 24px margin cost 72px, and the first screen
     is the one thing on this page there is no room to spend. */
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: var(--space-1);
}

#hands-challenge h1 {
  font-size: clamp(38px, 8vw, 60px);
  margin-bottom: var(--space-3);
  /* Stops a one-word orphan line ("me.") on narrow phones. */
  text-wrap: balance;
}

/* h2 never had a size of its own, so it rendered at the browser default 24px.
   With body copy up to 23px that left one pixel between a section heading and
   the paragraph under it: the inversion the client warned about, and the tier
   his example ("More of what people have said") belongs to. This page has only
   one heading tier below h1, so that label and "Who this is for" are the same
   rule and move together. 28px keeps the 1.15 ratio to body copy the design had
   at 24/21, rather than growing the headings on their own account. Display
   headlines (h1) are deliberately untouched. */
#hands-challenge h2 {
  font-size: 28px;
}

#hands-challenge .hero-subhead {
  font-size: 24px;
}

#hands-challenge .hero-promise {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 26px;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-4);
}

/* ---------- FORM ---------- */

#hands-challenge .signup-form {
  text-align: left;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
}

/* The error paragraph below each input is permanently in the layout and
   reserves one line, empty or not. Toggling it with `hidden` pushed the button
   102px down at the exact moment she was reaching for it, so a second tap
   landed on nothing. The 26px it reserves is taken out of this margin, so the
   resting spacing between the fields is unchanged. */
#hands-challenge .form-field {
  margin-bottom: 4px;
}

#hands-challenge label {
  display: block;
  font-weight: 600;
  font-size: 21px;
  margin-bottom: var(--space-1);
}

#hands-challenge input[type="text"],
#hands-challenge input[type="email"] {
  width: 100%;
  min-height: 60px;
  font-size: 22px;
  font-family: var(--font-body);
  padding: 0 var(--space-2);
  border: 2px solid #C9D6C4;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color 0.2s ease;
}

#hands-challenge input[type="text"]:focus,
#hands-challenge input[type="email"]:focus {
  border-color: var(--color-accent);
}

#hands-challenge .field-error {
  color: #A02020;
  font-size: 20px;
  line-height: 1.25;
  min-height: 26px;
  margin: 2px 0 0;
}

/* Two lines: the instruction, then the reassurance that used to live nowhere on
   the closing CTA at all. Ported from waitlist.css, including the flex column
   and the 72px floor, which two lines need where one needed 64px. `text-decoration`
   and the flex display also carry the closing CTA, which is now an `<a>` so it
   still works with the script stripped (see index.html). */
#hands-challenge .btn-primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 100%;
  min-height: 72px;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 12px var(--space-2);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* The anchor form of the button must not pick up the body link colour. */
#hands-challenge a.btn-primary,
#hands-challenge a.btn-primary:visited {
  color: var(--color-white);
}

#hands-challenge .btn-line1 {
  font-size: 24px;
  font-weight: 700;
}

/* Line 2 is a caption inside a label rather than body copy, so it sits at the
   ramp's caption size, which is also the 20px floor. */
#hands-challenge .btn-line2 {
  font-size: 20px;
  font-weight: 400;
  opacity: 0.9;
}

/* The same reassurance sentence and open ring the waitlist pages use under every
   CTA, so it reads as a promise rather than as fine print. */
#hands-challenge .cta-reassure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  color: var(--color-accent-dark);
  text-align: left;
  max-width: 480px;
  margin: var(--space-3) auto 0;
}

#hands-challenge .cta-reassure .ck {
  flex: 0 0 auto;
  margin-top: 3px;
}

#hands-challenge .btn-primary:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

#hands-challenge .form-note {
  text-align: center;
  font-size: 20px;
  margin: var(--space-2) 0 0;
}

/* Recoverable submission failure. Only ever shown when the request did not
   complete, and always with her typed values still in the fields. */
#hands-challenge .form-alert {
  font-size: 20px;
  line-height: 1.4;
  color: #A02020;
  background: #FDF1F1;
  border: 2px solid #E7C3C3;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: var(--space-2) 0 0;
}

/* Shown only if app.js never runs, so she is told what happened instead of
   pressing a button that reloads the page and empties both fields. */
#hands-challenge .form-fallback {
  font-size: 20px;
  line-height: 1.4;
  color: #5A4A2A;
  background: #FBF4E4;
  border: 2px solid #E4D6B0;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: var(--space-2) 0 0;
}

/* The button is enabled by app.js. Make "not ready yet" visible rather than
   letting a live-looking button do nothing. */
#hands-challenge .btn-primary:disabled:not(.is-loading) {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Available to assistive technology, invisible on screen. Carries the summary
   of the screenshot wall, which is images of text. */
#hands-challenge .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#hands-challenge .signup-success {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  text-align: center;
}

#hands-challenge .signup-success h2 {
  margin-bottom: var(--space-2);
}

#hands-challenge .signup-success p {
  margin-bottom: 0;
}

/* Proof within a screen of the form. Same frame grammar as .proof-card so it is
   not a new component, and capped narrow so it stays a footnote to the form
   rather than competing with it. */
#hands-challenge .hero-proof {
  max-width: 420px;
  margin: var(--space-3) auto 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(52, 76, 61, 0.12);
  padding: var(--space-1);
}

#hands-challenge .hero-proof img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

#hands-challenge .hero-proof figcaption {
  font-size: 20px;
  color: var(--color-accent-dark);
  text-align: center;
  padding: var(--space-1) 4px 4px;
}

/* ---------- WHO THIS IS FOR ---------- */

#hands-challenge .who-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The per-row hairlines are gone: a rule under every row is what makes a
   checklist read as a table. The disc is the only row marker now, at 24px to
   match waitlist.css. */
#hands-challenge .who-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: 24px;
  padding: var(--space-2) 0;
}

#hands-challenge .who-list li:first-child {
  padding-top: 0;
}

/* 4px, not 0: the disc is 24px against a 23px row at line-height 1.6, so with no
   nudge it sits optically high against the first line of text. */
#hands-challenge .who-check {
  flex: 0 0 auto;
  margin-top: 4px;
}

#hands-challenge .who-callout {
  font-weight: 700;
  font-size: 26px;
  color: var(--color-accent-dark);
  margin-top: var(--space-4);
  margin-bottom: 0;
}

/* ---------- WHAT HAPPENS NEXT ---------- */

#hands-challenge .next-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

#hands-challenge .next-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-4);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#hands-challenge .next-item:hover {
  box-shadow: 0 8px 28px rgba(52, 76, 61, 0.14);
  transform: translateY(-2px);
}

#hands-challenge .next-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: var(--space-2);
}

#hands-challenge .next-item p:last-child {
  margin-bottom: 0;
}

/* ---------- WHO ROBBIE IS ---------- */

#hands-challenge .about-grid {
  display: flex;
  flex-direction: column;
}

/* Now a <figure>, so the browser's default figure margins are zeroed and the
   caption is stacked under the frame rather than set beside it. */
#hands-challenge .about-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 var(--space-4);
}

/* Framed, never stretched: the frame is a padded white card with a sage ring,
   and the photo sits inside it at its own ratio. */
#hands-challenge .portrait-frame {
  width: 100%;
  max-width: 320px;
  background: var(--color-white);
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 3px solid var(--color-bg-sage);
}

#hands-challenge .portrait-frame img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* One card instead of four bare paragraphs: same copy, framed, with the
   credential stated under the portrait. */
#hands-challenge .about-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(52, 76, 61, 0.12);
  padding: var(--space-4);
}

/* figcaption appeared in no rule at all before this. The credential is the
   licence and the city, and deliberately no tenure. */
#hands-challenge .credential-line {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-accent);
  text-align: center;
  margin-top: var(--space-2);
}

#hands-challenge .about-text p:last-child {
  margin-bottom: 0;
}

/* ---------- PROOF CARDS ---------- */

/* The card IS the frame. The screenshot inside keeps its own ratio and gets
   its own inner rounding, so the source's background colour (some are dark,
   some light) reads as a framed object rather than a stray rectangle. */
/* The frame hugs the image. A card never stretches to fill a row, because a
   wide screenshot in a tall box leaves dead space and reads as imbalance.
   Cards sit at the top of their grid cell and take the height of their own
   content. */
#hands-challenge .proof-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-1);
  border: 1px solid rgba(52, 76, 61, 0.12);
  align-self: start;
  margin: 0;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

#hands-challenge .proof-card:hover {
  box-shadow: 0 8px 28px rgba(52, 76, 61, 0.14);
  transform: translateY(-2px);
}

#hands-challenge .proof-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

#hands-challenge .tester-grid,
#hands-challenge .proof-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: start;
}

/* ---------- EXPANDABLE PROOF ---------- */

/* A very tall screenshot next to a short one is unbalanced whatever you do
   with the frame. Instead the tall one is clipped to roughly the height of
   its neighbour and opens on demand, so the row reads even at rest. */
#hands-challenge .proof-clip {
  position: relative;
  max-height: 300px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  transition: max-height 0.35s ease;
}

/* Driven by the checkbox rather than a JS-toggled class, so the disclosure
   still works when GoHighLevel strips the script. See the comment on the
   markup in index.html for why this is not a <details>. */
#hands-challenge .proof-toggle:checked ~ .proof-clip {
  max-height: 3000px;
}

#hands-challenge .proof-clip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-white));
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#hands-challenge .proof-toggle:checked ~ .proof-clip::after {
  opacity: 0;
}

/* Deliberately quiet. This is an escape hatch for the curious, not a call to
   action. The page's one job is the form, so the toggle stays available and
   keyboard-reachable while inviting nobody to stop scrolling for it: no bar,
   no bold, no full-width target, muted colour. */
#hands-challenge .proof-expand {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-top: 2px;
  background: none;
  border: none;
  color: rgba(52, 76, 61, 0.62);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
}

#hands-challenge .proof-expand:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

#hands-challenge .proof-expand .chev svg {
  width: 13px;
  height: 13px;
}

#hands-challenge .proof-expand .chev {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  transition: transform 0.25s ease;
}

#hands-challenge .proof-toggle:checked ~ .proof-expand .chev {
  transform: rotate(180deg);
}

/* The label swaps its own text. app.js used to rewrite innerHTML on click,
   which meant the label was correct only while the script was alive. */
#hands-challenge .proof-expand__less {
  display: none;
}

#hands-challenge .proof-toggle:checked ~ .proof-expand .proof-expand__more {
  display: none;
}

#hands-challenge .proof-toggle:checked ~ .proof-expand .proof-expand__less {
  display: inline;
}

/* The focus ring has to be drawn on the label, because the input it belongs to
   is clipped to 1px and invisible. Without this the control is reachable by
   keyboard and gives no sign that it is focused. */
#hands-challenge .proof-toggle:focus-visible ~ .proof-expand {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- CTA SECTION ---------- */

#hands-challenge .cta-panel {
  background: var(--color-bg-sage);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
}

#hands-challenge .cta-panel h2 {
  margin-bottom: var(--space-2);
}

#hands-challenge .cta-support {
  font-size: 24px;
  margin-bottom: var(--space-4);
}

#hands-challenge .cta-section .btn-primary {
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- VOLUME GRID ---------- */

/* Masonry via CSS columns: screenshots keep their natural aspect ratio so no
   text is ever cropped mid-sentence, while still packing densely. The job of
   this block is perceived volume, not reading. */
/* True masonry via CSS multi-column: each column packs independently, so a tall
   screenshot never forces dead space in its neighbours, and the browser balances
   the columns so they finish at roughly the same depth. The DOM is pre-chunked
   per column (see index.html) so column-major fill still lands the strongest
   testimonials at the top and bottom of every column. */
#hands-challenge .volume-grid {
  display: block;
  columns: 2;
  column-gap: var(--space-2);
  orphans: 1;
  widows: 1;
}

/* Same frame language as the featured cards, just smaller: thin white border,
   soft rounding, gentle shadow. Never cropped, never stretched. */
#hands-challenge .volume-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  background: var(--color-white);
  border: 5px solid var(--color-white);
  margin: 0 0 var(--space-2);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* ---------- FOOTER ---------- */

#hands-challenge .site-footer {
  background: var(--color-accent-dark);
  color: var(--color-white);
}

#hands-challenge .site-footer .section-inner {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* The scope-of-practice line is the one piece of small print this audience
   most needs to read, so it sits at the same size as the body copy. It was
   17px here while waitlist.css already had it at 20px; 17px is below this
   project's own accessibility floor, so it was a defect and not a style
   choice. It tracks body copy, so it moved 20px -> 22px with the rest of the
   ramp rather than being raised on its own. */
#hands-challenge .disclaimer {
  font-size: 22px;
  opacity: 0.95;
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Legal boilerplate rather than body copy, so it sits one step down the ramp,
   and that step now lands exactly on the 20px floor and can go no lower. */
#hands-challenge .copyright,
#hands-challenge .privacy {
  font-size: 20px;
  margin-bottom: var(--space-1);
}

/* The copyright line now carries the credential, the way the waitlist footer
   does, so it is a statement rather than boilerplate. It was at opacity 0.85,
   which is the one thing you do not do to the line stating the licence. */
#hands-challenge .copyright {
  font-weight: 600;
}

#hands-challenge .privacy {
  opacity: 0.85;
}

#hands-challenge .privacy {
  margin-bottom: 0;
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 860px) {
  #hands-challenge h1 {
    font-size: clamp(48px, 5vw, 60px);
  }

  #hands-challenge .hero-inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: var(--space-6);
    padding-top: var(--space-4);
  }

  #hands-challenge .hero-content {
    flex: 1;
    text-align: left;
    max-width: none;
  }

  #hands-challenge .next-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  #hands-challenge .about-grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  #hands-challenge .about-text {
    flex: 1;
  }

  #hands-challenge .about-media {
    flex: 0 0 380px;
    margin-bottom: 0;
  }

  #hands-challenge .portrait-frame {
    max-width: 380px;
  }

  #hands-challenge .tester-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #hands-challenge .proof-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  #hands-challenge .volume-grid {
    columns: 3;
  }
}

@media (min-width: 640px) and (max-width: 859px) {
  #hands-challenge .volume-grid {
    columns: 3;
  }
}

/* ---------- DESKTOP ALIGNMENT ---------- */
/* .narrow sections were centering their own 680px box, so their headings sat
   at x=404 while every 1100px section started at x=194. That reads as a ragged
   left edge while scrolling. Keep the 680px measure for prose (readability),
   but hang it off the same 1100px container so all headings share one edge.
   .center sections (the closing CTA) are deliberately exempt. */
@media (min-width: 860px) {
  #hands-challenge .section-inner.narrow:not(.center) {
    max-width: 1100px;
  }

  #hands-challenge .section-inner.narrow:not(.center) > * {
    max-width: 680px;
  }
}


/* ===== merged from hero-b.css: photographic hero is now the default ===== */
#hands-challenge .hero-b {
  position: relative;
  padding-top: 0;
  background-image: url('assets/img/robbie-looking-right.webp');
  /* A portrait-orientation photo used as a cover background on a 390px phone
     crops to a cheek. Sizing to width and anchoring to the top keeps the head
     and raised hand in frame; the wash below covers the remainder. */
  background-size: 118% auto;
  background-position: 58% -20px;
  background-repeat: no-repeat;
  background-color: #24382B;
  overflow: hidden;
}

/* The wash. A single accent-tinted veil turns a murky photo into a branded
   field, and dissolves into the page colour at the bottom so there is no
   hard seam into the next section. */
#hands-challenge .hero-b::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(24, 38, 29, 0.42) 0%,
      rgba(26, 41, 31, 0.62) 30%,
      rgba(30, 46, 35, 0.88) 52%,
      rgba(36, 56, 43, 0.97) 72%,
      var(--color-bg-sage) 100%
    );
  pointer-events: none;
}

#hands-challenge .hero-b .hero-inner {
  position: relative;
  z-index: 1;
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

#hands-challenge .hero-b .hero-content {
  text-align: center;
  max-width: 620px;
}

/* Copy inverts to sit on the wash. */
#hands-challenge .hero-b h1 {
  color: #FFFFFF;
}

/* Second tone in the headline: same family, italic, lighter sage. One
   typeface, two voices. This is jodifit's "Hot & Healthy / Webinar" move. */
#hands-challenge .hero-b h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: #BFD6C0;
}

#hands-challenge .hero-b .hero-subhead {
  color: rgba(255, 255, 255, 0.92);
}

#hands-challenge .hero-b .hero-promise {
  color: #DCE8DC;
}

#hands-challenge .hero-b .eyebrow {
  background: rgba(255, 255, 255, 0.14);
  color: #E4EFE4;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* The form floats over the photograph rather than living in its own band. */
#hands-challenge .hero-b .signup-form {
  box-shadow: 0 18px 50px rgba(10, 20, 14, 0.38);
}

@media (min-width: 860px) {
  /* A portrait source scaled to fill a landscape viewport becomes a giant head
     fragment. On wide screens the photo is instead fitted to the hero's height
     and anchored right, with the copy occupying the left. */
  #hands-challenge .hero-b {
    background-size: auto 112%;
    /* Pulled left so his raised hand and fingers stay in frame rather than
       running off the right edge. The hand is the subject of the page. */
    background-position: right 90px top -30px;
  }

  /* The wash runs horizontally here: opaque behind the copy on the left,
     clearing toward the right so the photograph is actually visible. */
  #hands-challenge .hero-b::after {
    background:
      linear-gradient(
        100deg,
        rgba(24, 38, 29, 0.97) 0%,
        rgba(26, 41, 31, 0.94) 42%,
        rgba(28, 44, 33, 0.72) 62%,
        rgba(30, 47, 35, 0.42) 82%,
        rgba(32, 50, 38, 0.30) 100%
      ),
      linear-gradient(
        180deg,
        rgba(24, 38, 29, 0) 72%,
        var(--color-bg-sage) 100%
      );
  }

  #hands-challenge .hero-b .hero-inner {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    /* padding-top/bottom were var(--space-7) here and both were overridden by
       the laptop block near the end of this file, so they styled nothing.
       min-height is likewise overridden to 0 there; left in place because it is
       the declaration that block deliberately cancels. */
    min-height: 640px;
  }

  #hands-challenge .hero-b .hero-content {
    text-align: left;
    max-width: 560px;
    margin-right: auto;
  }

  #hands-challenge .hero-b h1 em {
    display: inline;
  }
}

/* ---------- FORM LOADING STATE ---------- */

#hands-challenge .btn-primary.is-loading {
  /* Hold the resting colour so the button does not read as "off" while busy. */
  background: var(--color-accent);
  cursor: wait;
  display: flex;
  /* The resting button is a flex COLUMN for its two label lines. Without this
     the spinner stacks above "Sending..." instead of sitting beside it. */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#hands-challenge .btn-primary.is-loading .btn-line2 {
  display: none;
}

#hands-challenge .btn-primary:disabled {
  opacity: 1;
}

#hands-challenge .btn-primary.is-loading:hover {
  transform: none;
}

#hands-challenge .spinner {
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: hc-spin 0.7s linear infinite;
  flex: 0 0 auto;
}

@keyframes hc-spin {
  to { transform: rotate(360deg); }
}

/* Some of this audience will have reduced motion switched on. Pulse instead
   of spin so the busy state is still legible without movement. */
@media (prefers-reduced-motion: reduce) {
  #hands-challenge .spinner {
    animation: hc-pulse 1.2s ease-in-out infinite;
  }
  @keyframes hc-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
  }
}

/* (A 32px desktop top-padding override sat here, from the pass that was trimming
   the hero to clear the fold. It was already dead code, overridden by the laptop
   block further down, and it contradicted it. Removed with that pass.) */

/* ---------- HERO TOP SPACE (phones) ---------- */
/* This block used to be called FIRST-SCREEN FIT and squeezed the hero until the
   submit button cleared the fold: 24px of top padding, a 34px headline, 1.12
   line-height, 8px stacking gaps. That version was rejected on sight, twice, as
   ugly and cramped, so fitting the button above the fold is no longer the
   constraint. Falling below the fold is now explicitly allowed: the promise line
   may scroll out of view, and the button may be clipped so long as most of it is
   still on screen and still obviously a button.

   So the squeeze is reversed and the space it took is given back at the TOP,
   where the complaint was. Nothing here gets smaller than it was: the
   line-heights relax, the form card gets its full padding back, and the type
   ramp above is a step larger than before. The headline keeps the size it has
   now — the client asked for the display headlines specifically to be left
   alone, so only its line-height and margin are relaxed.

   The GHL interaction: GoHighLevel stacks 40px of section + row + column padding
   above the first pasted block, and `.c-custom-code #hands-challenge.hc-first`
   at the bottom of this file cancels exactly that with `margin-top: -40px`. The
   two annul each other, so the padding-top below is the real top space in BOTH
   places and local measurements now carry to production. That is why this space
   is added here and not by relaxing the -40px pull: leaving GHL's own padding in
   place would give this space on the live page only, and the local page would
   still look wrong to the client reviewing it. */
@media (max-width: 859px) {
  /* 40px. 64px was tried first and left only a fifth of the button on screen at
     390x844; 48px plus the eyebrow and the taller two-line button spent the same
     budget again. 40px is still 1.7x the 24px the rejected version allowed, and
     every pixel recovered below this line comes out of margins and card padding,
     never out of a type size or a line-height. */
  #hands-challenge .hero-b .hero-inner {
    padding-top: 40px;
    padding-bottom: var(--space-5);
  }

  /* Size is the pre-existing one: the client asked for the display headline to
     stay where it is. Only the line-height and the margin are relaxed here,
     which is spacing, not scale. */
  #hands-challenge h1 {
    font-size: clamp(34px, 7.6vw, 52px);
    line-height: 1.16;
    margin-bottom: var(--space-2);
  }

  #hands-challenge .hero-subhead {
    line-height: 1.5;
    margin-bottom: var(--space-2);
  }

  #hands-challenge .hero-promise {
    line-height: 1.4;
    margin-bottom: var(--space-3);
  }

  #hands-challenge .signup-form {
    padding: var(--space-3);
  }

  #hands-challenge label {
    line-height: 1.3;
    margin-bottom: 6px;
  }
}

/* Short handsets: iPhone SE class at 375x667 and the 360x640 Androids that are
   still common in this age group. 64px of top space on a 640px screen is a
   larger share of the first screen than it is on a 844px one, so this tier
   takes the top padding down a step and touches nothing else. It is a spacing
   dial, not a return to compressing the hero: the headline, line-heights, form
   padding and type sizes are all inherited from above unchanged. On these two
   sizes the button lands below the fold and is reached by scrolling. */
@media (max-width: 859px) and (max-height: 730px) {
  #hands-challenge .hero-b .hero-inner {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

/* Laptops. Same reversal as the phone block above: this tier had been trimmed to
   24px of top padding to buy fold clearance, which read as the headline being
   pinned to the browser chrome. Top space restored and the headline allowed back
   up; the bottom stays generous. */
@media (min-width: 860px) {
  /* Unchanged size, for the same reason as on phones. */
  #hands-challenge h1 {
    font-size: clamp(44px, 4.4vw, 52px);
  }

  #hands-challenge .hero-b .hero-inner {
    padding-top: var(--space-6);
    padding-bottom: var(--space-5);
    min-height: 0;
  }

  #hands-challenge .hero-b .hero-subhead {
    line-height: 1.45;
    margin-bottom: var(--space-2);
  }

  #hands-challenge .hero-b .hero-promise {
    line-height: 1.35;
    margin-bottom: var(--space-3);
  }
}

/* A 13in laptop window is about 760px of viewport once the browser's own chrome
   is counted. This tier used to shrink the headline and drop the top padding to
   16px there; both are gone, for the same reason as on phones. All that is left
   is one step off the top padding, matching the short-handset tier. */
@media (min-width: 860px) and (max-height: 820px) {
  #hands-challenge h1 {
    font-size: clamp(40px, 4vw, 46px);
  }

  #hands-challenge .hero-b .hero-inner {
    padding-top: var(--space-3);
  }

  /* Card padding, same lever as the phone tier and for the same reason: it is
     spacing, so it does not change how big anything looks. */
  #hands-challenge .signup-form {
    padding: var(--space-3);
  }
}

/* Wide screens have horizontal room the copy column was not using: the hero
   content was capped at 560px, so the subhead and the promise line each wrapped
   to three lines and pushed the button 814px down at 1440x760. Letting the
   column run to 700px on screens this wide reflows them to two lines and lifts
   the button 70px, which buys back the fold clearance the deleted headline
   shrink used to buy — without making a single thing smaller. 700px at 24px is
   about 60 characters, still inside a comfortable measure, and it stays well
   inside the opaque end of the horizontal wash so the copy keeps its contrast
   against the photograph. */
@media (min-width: 1200px) {
  #hands-challenge .hero-b .hero-content {
    max-width: 700px;
  }
}

/* ---------- GHL FULL-BLEED BREAKOUT ---------- */
/* GHL wraps each Custom HTML element in its own padded, max-width container,
   which boxed the hero in with a visible inset instead of running edge to edge.
   This is the standard breakout: span the viewport regardless of the parent's
   width, without introducing horizontal scroll. Harmless outside GHL because
   the local page's wrapper is already full width. */
#hands-challenge,
.hc {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: hidden;
}

/* GHL also stacks 40px of vertical chrome above the first block: 20px of
   section padding, 10px of row padding and 10px of column padding. That is
   40px of empty dark green above the headline, and it was 40px of the reason
   the submit button sat below the fold. Pull the first block back up through
   it. Inert everywhere else: .c-custom-code only exists inside GHL, and only
   the first pasted block carries .hc-first (see build-ghl.py). */
.c-custom-code #hands-challenge.hc-first {
  margin-top: -40px;
}

/* ---------- FAQ ---------- */

/* Identical to the waitlist block, so the two pages keep reading as one funnel.
   Native <details>/<summary>, no JavaScript: with the script stripped by GHL,
   blocked, or still loading, every answer is still reachable, and the control is
   keyboard and screen-reader native with no aria state to get wrong. That is the
   same call the disabled submit button and the anchor-not-button CTA already
   make on this page.
   It is nested inside the CTA section rather than added as a new top-level
   section: build-ghl.py assigns top-level blocks to paste targets by index and
   aborts on any block SPLIT_GROUPS does not cover, so a new <section> here would
   push the footer out of range and fail the split build. */
#hands-challenge .cta-section .faq-inner {
  padding-bottom: 0;
}

#hands-challenge .faq-list {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 0 var(--space-3);
}

#hands-challenge .faq-item + .faq-item {
  border-top: 1px solid rgba(52, 76, 61, 0.16);
}

/* The default disclosure triangle is a few grey pixels wide. At 65+ that is not
   a control, so it is removed in both dialects and replaced by the same chevron
   .proof-expand already uses, drawn at 24px. Not the check disc: that mark means
   "this is a fact", and a question is not a fact.
   Full-width 56px row, which clears the 44px minimum with room for an unsteady
   tap. .proof-expand is deliberately narrow and quiet because it competes with
   the form; these rows sit under the last CTA's heading and should be
   impossible to miss. */
#hands-challenge .faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-3) 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-accent-dark);
  cursor: pointer;
  list-style: none;
}

#hands-challenge .faq-q::-webkit-details-marker {
  display: none;
}

#hands-challenge .faq-q:hover {
  color: var(--color-accent);
}

/* The tappable thing is the row, so the ring hugs the row and not the card the
   row sits inside. Colour and width come from the shared :focus-visible rule. */
#hands-challenge .faq-q:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}

#hands-challenge .faq-chev {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--color-accent);
  transition: transform 0.2s ease;
}

#hands-challenge .faq-chev svg {
  width: 24px;
  height: 24px;
}

#hands-challenge details[open] > .faq-q .faq-chev {
  transform: rotate(180deg);
}

#hands-challenge .faq-a {
  padding-bottom: var(--space-3);
}

/* 24px, which is the locked body size, stated rather than inherited because this
   page's paragraphs are still 23px. */
#hands-challenge .faq-a p {
  font-size: 24px;
  margin-bottom: var(--space-2);
}

#hands-challenge .faq-a p:last-child {
  margin-bottom: 0;
}