/* ============================================================================
   TrailConvoy home page — 2026-09 redesign
   ----------------------------------------------------------------------------
   Loaded by index.php and about-trailconvoy.php, after styles.css. Every rule
   is namespaced .hp-*
   so it cannot reach snow.php / motorcycle.php / the article pages, which
   share styles.css and still use .section / .pricing-cards / .icon-strip in
   their old form.

   The shared header (.nav) and the shared footer (.footer) are NOT touched
   here — the header lives in styles.css because it is sitewide, and the
   footer is deliberately left exactly as it was.

   Artwork: assets/home/. The desert overlays are baked onto their own ground
   colour + grain rather than shipped with an alpha channel — same pixels,
   about a fifth of the bytes. That means each overlay may only ever be placed
   on the ground it was baked for (gold -> forest, cream -> cream).
   ========================================================================== */

/* Tokens sit on :root, not on body.home — this sheet is now shared by the
   home page and Behind the Wheel. Everything is --hp-* prefixed, so there is
   nothing to collide with on a page that opts in. */
:root {
  /* How far a full-bleed element must reach past the container to touch the
     viewport edge. Collapses to the small-screen gutter below 1354px. */
  --hp-bleed: max(24px, (100vw - 1306px) / 2);
  --hp-gold: #c69645;
  /* Small orange text on cream only. The brand burnt orange (#c96528) is
     3.37:1 on cream — fine for the large display uses (the hero accent, the
     01/02/03 numerals, the founding line), short of AA for 17px labels and
     links. Measured against cream, and cream alone. */
  --hp-orange-ink: #a55020;
  --hp-gold-ink: #b48c3b;        /* the gold in the artwork itself */
  --hp-cream: #f4eedc;
  --hp-forest: #123b2a;
  --hp-sand: #e7e0cb;            /* pricing cards on cream */
  --hp-body-on-cream: #3f4a41;
  --hp-body-on-forest: #ddd9c7;
  --hp-tex-forest: url('assets/home/texture-forest.webp');
  --hp-tex-cream:  url('assets/home/texture-cream.webp');
}

/* --- Shared shells ------------------------------------------------------ */
.hp-container { width: min(1306px, 100% - 48px); margin-inline: auto; }

.hp-section { position: relative; overflow: hidden; }
.hp-section > .hp-container { position: relative; z-index: 2; }

.hp-section--forest {
  background-color: var(--hp-forest);
  background-image: var(--hp-tex-forest);
  background-size: 256px 256px;
  color: var(--hp-body-on-forest);
}
.hp-section--cream {
  background-color: var(--hp-cream);
  background-image: var(--hp-tex-cream);
  background-size: 256px 256px;
  color: var(--hp-body-on-cream);
}

/* Desert line-art anchored to the bottom of a band. Opaque and ground-matched,
   so it simply continues the section rather than sitting over it. */
.hp-desert {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  /* The art is one wide illustration, not a texture: it must scale with the
     WIDTH and keep its aspect. `cover` on a fixed-height box silently zooms
     into the foreground instead — aspect-ratio + `100% auto` is the fix. */
  aspect-ratio: 1659 / 393; height: auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
}
/* Exclusive ranges: overlapping min-width overrides make the browser fetch
   both the base and the winning variant. */
@media (max-width: 960px) {
  .hp-desert--green { background-image: url('assets/home/desert-green-overlay-960.webp'); }
  .hp-desert--cream { background-image: url('assets/home/desert-cream-overlay-960.webp'); }
}
@media (min-width: 961px) {
  .hp-desert--green { background-image: url('assets/home/desert-green-overlay.webp'); }
  .hp-desert--cream { background-image: url('assets/home/desert-cream-overlay.webp'); }
}

/* Gold hairline with diamond end-caps — the divider that opens each forest
   band in the artwork. */
.hp-rule {
  position: relative; height: 2px; background: var(--hp-gold-ink);
  margin: 0 0 34px;
}
.hp-rule::before,
.hp-rule::after {
  content: ''; position: absolute; top: 50%;
  width: 9px; height: 9px; background: var(--hp-gold-ink);
  transform: translateY(-50%) rotate(45deg);
}
.hp-rule::before { left: -4px; }
.hp-rule::after  { right: -4px; }

/* --- Type -------------------------------------------------------------- */
.hp-label {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 18px;
}
/* Label + a cross-link to the matching section, on one baseline. The link is
   desktop only — stacked, the sections already read in order. */
.hp-label-row { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.hp-label-row .hp-label { margin-bottom: 18px; }
.hp-jump {
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  color: var(--hp-gold); text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(198,150,69,.45); padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.hp-jump:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.hp-section--cream .hp-label { color: var(--hp-orange-ink); }
.hp-section--forest .hp-label { color: var(--hp-gold); }

.hp-h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2rem, 3.9vw, 3.5rem);      /* 56px at 1440 */
  line-height: 1.02; letter-spacing: 0.005em; text-transform: uppercase;
  margin: 0 0 20px;
}
/* Second sentence of a headline drops a size — the two-tier treatment the
   artwork uses on the Members and Officer headings. */
.hp-h2 .hp-h2__tail { display: block; font-size: 0.75em; }
.hp-section--cream .hp-h2 { color: var(--hp-forest); }
.hp-section--forest .hp-h2 { color: var(--hp-cream); }

.hp-sub {
  font-family: var(--font-body); font-size: 1.25rem; line-height: 1.42;
  margin: 0 0 4px; max-width: 46ch;
}

/* --- Hero --------------------------------------------------------------- */
.hp-hero {
  position: relative; overflow: hidden;
  background-color: var(--hp-forest);
  background-image: var(--hp-tex-forest);
  background-size: 256px 256px;
  padding: 14px 0 0;
  /* Desktop: tall enough for the tablet (whose bottom edge is 53.81% of the
     media box's WIDTH down: 75.87% of a 1431x1015 box) plus a short strip of
     desert, so the club logos sit right under it. The phones that once hung
     below the tablet are hidden on desktop; the stacked mobile hero resets
     this to 0. The desert art rides up behind the copy, by design. */
  /* The tablet is centred between the end of the chip row (Handle Waivers)
     and the window's right edge, with at least 40px either side, at most
     697px wide (its full art size). Coordinates are .hp-hero__inner's; the
     window edge is 100% + the gutter, so the scrollbar is never counted.
     --hp-chips-end is the chip row's measured width at each chip font size.
     The tablet art is 86.47% of the media box and starts 3.65% left of it. */
  --hp-inner-w: min(1306px, 100vw - 48px);
  --hp-chips-end: 542px;
  --hp-tab-w: min(697px, var(--hp-inner-w) + var(--hp-bleed) - var(--hp-chips-end) - 80px);
  --hp-media-w: calc(var(--hp-tab-w) / 0.8647);
  min-height: calc(14px + var(--hp-media-w) * 0.5381 + 48px);
}
.hp-hero__art {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  /* The comp runs this art at roughly half scale and REPEATS it across the
     width — that is where the cactus rhythm comes from, and why the band is
     ~196px rather than the full 393px of the source. Stretching one copy to
     100% width instead blows the foreground up and loses the mountains. */
  aspect-ratio: 2074 / 393; height: auto;
  /* Scaled up and pushed 34px past the bottom edge so the illustration's own
     thin, fading bottom rows are clipped and the dense foreground runs all
     the way to the band edge — otherwise it reads as a dead green gap above
     the founding-clubs rule. Art top stays at y=415. */
  background-position: center bottom -34px; background-repeat: repeat-x; background-size: 90% auto;
  pointer-events: none;
}
@media (max-width: 960px)  { .hp-hero__art { background-image: url('assets/home/desert-gold-overlay-v3-960.webp'); } }
@media (min-width: 961px) and (max-width: 1280px) { .hp-hero__art { background-image: url('assets/home/desert-gold-overlay-v3-1280.webp'); } }
@media (min-width: 1281px) { .hp-hero__art { background-image: url('assets/home/desert-gold-overlay-v3.webp'); } }

.hp-hero__inner {
  position: relative; z-index: 3;
  width: min(1306px, 100% - 48px); margin-inline: auto;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 560px) 1fr;
  grid-template-rows: auto auto;
  align-items: start; gap: 0;
  padding-bottom: 9px;
}
/* The chips are a sibling of the copy, not a child of it, so that mobile can
   drop them BELOW the device shots. On desktop they sit where they always
   did: under the copy, in column one. */
.hp-hero__copy  { grid-column: 1; grid-row: 1; padding: 0; }
.hp-chips       { grid-column: 1; grid-row: 2; }
/* Taken out of flow entirely. As a grid item the device stack sized its row
   and shoved the chips far below the free-tier line, whether it spanned one
   row or two. The hero's min-height reserves the space instead. */
.hp-hero__media {
  position: absolute; top: 0;
  left: calc((var(--hp-chips-end) + 100% + var(--hp-bleed) - var(--hp-tab-w)) / 2 + var(--hp-media-w) * 0.0365);
  width: var(--hp-media-w); margin: 0;
}

.hp-hero__h1 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2.9rem, 6.74vw, 6.06rem);   /* 97px at 1440 — set to match
                                                  the artwork's headline WIDTH;
                                                  Barlow Condensed is a touch
                                                  wider per cap than the face
                                                  the comp was drawn in. */
  line-height: 0.84; letter-spacing: 0.002em; text-transform: uppercase;
  color: var(--hp-cream); margin: 0 0 14px;
}
.hp-hero__h1 span { display: block; color: var(--orange); }

.hp-hero__sub {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.4375rem); line-height: 1.32;
  color: var(--hp-cream); margin: 0 0 18px;
}
.hp-hero__cta { display: inline-flex; }
.hp-hero .btn--lg { padding: 13px 47px; font-size: 19px; border-radius: 6px; }
.hp-hero__note {
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.4;
  color: rgba(244,238,220,.85); margin: 14px 0 0;
}

/* Phones and tablets get the /truck page's player instead of the device
   screenshots (see the 980px block). Hidden on desktop. */
.hp-mvideo { display: none; }
.hp-mvideo__frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  background: #0c271e; border-radius: 8px; overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.4);
}
.hp-mvideo__frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #0c271e; }
.hp-mvideo__ctl {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  max-width: 460px; margin: 12px auto 0;
}
.hp-mvbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 6px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--orange); color: var(--white);
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}
.hp-mvbtn:hover { background: var(--orange-hover); }
.hp-mvbtn:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
.hp-mvbtn svg { width: 16px; height: 16px; flex: none; }
.hp-mvicon--on,
.hp-mvbtn[aria-pressed="true"] .hp-mvicon--off { display: none; }
.hp-mvbtn[aria-pressed="true"] .hp-mvicon--on { display: block; }
@media (max-width: 380px) { .hp-mvbtn { font-size: 13px; letter-spacing: 0.02em; gap: 4px; } .hp-mvbtn svg { width: 14px; height: 14px; } }

/* Four capability chips, cream like the copy, with gold pipes between them. */
.hp-chips {
  list-style: none; margin: 26px 0 0; padding: 0;
  /* Stay on one line and run past the copy column into the device area rather
     than wrapping — the phones sit higher, so there is nothing to collide with. */
  display: flex; align-items: stretch; flex-wrap: nowrap; width: max-content; gap: 0;
}
.hp-chips li {
  display: flex; align-items: center; gap: 12px;
  padding: 2px 20px; border-left: 1px solid rgba(198,150,69,.55);
}
.hp-chips li:first-child { border-left: 0; padding-left: 0; }
.hp-chips svg { width: 30px; height: 30px; flex: none; color: var(--hp-cream); }
.hp-chips span {
  font-family: var(--font-heading); font-weight: 700; font-size: 16px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--hp-cream);
  line-height: 1.15; max-width: 8ch;
}

/* The device stack runs toward the right edge of the viewport, as in the
   artwork. It is LAYERED, not one flattened group image: the tablet plus two
   phones, each placed as a percentage of the media box, so the composition
   stays proportional at every width and the phones can be resized, moved or
   re-stacked from these three custom properties alone.
   Percentages were derived from the supplied group artwork's own geometry. */
.hp-hero__media { aspect-ratio: 1431 / 1015; }
.hp-hero__media img { position: absolute; display: block; height: auto; }
.hp-hero__tablet { left: -3.65%; top: -5.37%; width: 86.47%; z-index: 1; }

/* The hero video sits exactly over the tablet art's screen: the screen is
   x 115-1165, y 104-749 of the 1280x853 tablet, mapped into media-box units
   (the tablet is 81.24% of the box height). The file is plain 16:9 footage;
   object-fit: cover trims about 4% off each side to fill the ~1.63 screen,
   and the full-window view shows the whole frame. Desktop only; shown once playing. */
.hp-hero__screen {
  position: absolute; z-index: 1; display: none;
  left: calc(4.118% - 1px); top: calc(4.533% - 1px);   /* 1px under the bezel all round */
  width: calc(70.93% + 2px); height: calc(61.43% + 2px);
  background: #0c271e; border-radius: 0.35%; overflow: hidden;
  opacity: 0; transition: opacity .5s ease;
}
.hp-hero__screen.is-playing { opacity: 1; }
.hp-hero__screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Full window: the same element goes fixed over the whole viewport (not the
   browser's own fullscreen mode). The hero's inner box is a stacking context
   at z-index 3 under the sticky nav (100), so it is lifted while open, and the
   page stops scrolling underneath. Black surround, controls in the corner. */
body.hp-video-open { overflow: hidden; }
body.hp-video-open .hp-hero__inner { z-index: 1000; }
.hp-hero__screen.is-expanded {
  position: fixed; inset: 0; left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 0; background: #000; z-index: 1000;
}
.hp-hero__screen.is-expanded video { object-fit: contain; }
.hp-hero__screen.is-expanded .hp-hero__vctl {
  /* the contained 16:9 frame's size, so the buttons hug the video's corner, not the window's */
  --fw: min(100vw, 100vh * 16 / 9); --fh: min(100vh, 100vw * 9 / 16);
  --vb: 46px;
  right: calc((100vw - var(--fw)) / 2 + 20px); bottom: calc((100vh - var(--fh)) / 2 + 20px);
}
.hp-hero__vicon--shrink,
.hp-hero__vbtn[aria-pressed="true"] .hp-hero__vicon--grow { display: none; }
.hp-hero__vbtn[aria-pressed="true"] .hp-hero__vicon--shrink { display: block; }

/* Start over + sound + full window, always visible, tucked into the video's
   bottom-right corner. Sized off the screen's height so they stay in
   proportion at every desktop width. */
.hp-hero__screen { container-type: size; }
.hp-hero__vctl {
  --vb: clamp(24px, 7cqh, 34px);
  position: absolute; right: calc(var(--vb) * 0.35); bottom: calc(var(--vb) * 0.35); z-index: 2;
  display: flex; gap: calc(var(--vb) / 4);
}
.hp-hero__vbtn {
  width: var(--vb); height: var(--vb); padding: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--white); background: var(--orange); border: 0;   /* brand orange, like .btn--primary */
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  transition: background .15s ease;
}
.hp-hero__vbtn svg { width: 52%; height: 52%; }
.hp-hero__vbtn:hover { background: var(--orange-hover); }
.hp-hero__vbtn:focus-visible { outline: 2px solid var(--hp-gold); outline-offset: 2px; }
/* Hover / focus tip. It reads the button's aria-label, which home.js keeps
   current ("Turn sound off", "Exit full window"), so tip and label never drift.
   The last tip right-aligns so it cannot run off the window's edge. */
.hp-hero__vbtn { position: relative; }
.hp-hero__vbtn::after {
  content: attr(aria-label);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--hp-cream); background: rgba(8, 26, 20, .94);
  padding: 7px 10px; border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .15s ease, transform .15s ease;
}
.hp-hero__vbtn:last-child::after { left: auto; right: 0; transform: translateY(4px); }
.hp-hero__vbtn:hover::after,
.hp-hero__vbtn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.hp-hero__vbtn:last-child:hover::after,
.hp-hero__vbtn:last-child:focus-visible::after { transform: none; }
.hp-hero__vicon--on,
.hp-hero__vbtn[aria-pressed="true"] .hp-hero__vicon--off { display: none; }
.hp-hero__vbtn[aria-pressed="true"] .hp-hero__vicon--on { display: block; }

/* Desktop: the video plays uncovered, so the two phones step aside there.
   The stacked mobile hero keeps its tablet-and-phones screenshot group. */
@media (min-width: 981px) {
  /* The shorter hero puts the gold desert art behind the copy; a soft forest
     halo keeps the gold chips and the small free-tier line readable on it. */
  .hp-hero__sub, .hp-hero__note, .hp-chips span {
    text-shadow: 0 0 4px var(--hp-forest), 0 0 10px var(--hp-forest), 0 0 18px var(--hp-forest);
  }
  .hp-chips span {
    text-shadow: 0 0 2px var(--hp-forest), 0 0 3px var(--hp-forest), 0 0 6px var(--hp-forest),
                 0 0 12px var(--hp-forest), 0 0 20px var(--hp-forest);
  }
  .hp-chips svg { filter: drop-shadow(0 0 3px var(--hp-forest)) drop-shadow(0 0 8px var(--hp-forest)); }
  .hp-hero__screen { display: block; }
  .hp-hero__media .hp-hero__phone { display: none; }
}

.hp-hero__phone {
  width: var(--phone-w); left: var(--phone-x); top: var(--phone-y);
  transform: rotate(-2.9deg);
  filter: drop-shadow(0 16px 26px rgba(0,0,0,.42));
}
/* The club phone sits in FRONT of the map phone. */
.hp-hero__phone--map  { --phone-w: 20%;   --phone-x: 51.5%; --phone-y: 32.1%; z-index: 2; }
.hp-hero__phone--club { --phone-w: 19.9%; --phone-x: 63%;   --phone-y: 20.8%; z-index: 3; }

/* --- Founding clubs band ------------------------------------------------ */
.hp-clubs { padding: 8px 0 34px; }
.hp-clubs__head {
  display: flex; align-items: center; gap: 22px;
  margin: 0 0 16px;
}
.hp-clubs__rule { flex: 1; height: 2px; background: var(--hp-gold-ink); position: relative; }
.hp-clubs__rule::after {
  content: ''; position: absolute; top: 50%; width: 9px; height: 9px;
  background: var(--hp-gold-ink); transform: translateY(-50%) rotate(45deg);
}
.hp-clubs__rule--l::after { left: -4px; }
.hp-clubs__rule--r::after { right: -4px; }
.hp-clubs__label {
  font-family: var(--font-heading); font-weight: 700; font-size: 17px;
  letter-spacing: 0.085em; text-transform: uppercase; color: var(--hp-gold);
  margin: 0; text-align: center;
}

.hp-clubs__logos {
  margin-top: 26px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px, 4.2vw, 60px); flex-wrap: wrap;
}
/* Sized to the artwork's own optical widths, not to a shared height — the
   three marks have very different proportions and transparent padding. */
.hp-clubs__logos img { display: block; height: auto; }
.hp-clubs__logo--raptors img     { width: 199px; }
.hp-clubs__logo--michigan img    { width: 229px; }
.hp-clubs__logo--mountaineers img{ width: 112px; }
.hp-clubs__logo--northaz img     { width: 199px; }
/* Four marks fit one row above ~920px. Below that, a real two-column grid —
   a flex line-break element gets its own zero-height line, which charges TWO
   row gaps and leaves a canyon between the rows. */
@media (max-width: 919px) {
  .hp-clubs__logos {
    display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; align-items: center;
    gap: 30px clamp(28px, 5vw, 60px);
  }
}

/* --- The Problem -------------------------------------------------------- */
.hp-problem { padding: 68px 0 76px; }
.hp-problem .hp-h2 { max-width: 700px; margin-bottom: 32px; }
.hp-problems {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 30px;
  list-style: none; margin: 0; padding: 0;
}
.hp-problem__num {
  font-family: var(--font-heading); font-weight: 800; font-size: 52px;
  color: var(--orange); line-height: 1; margin: 0 0 18px;
}
.hp-problem__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--hp-forest);
  margin: 0 0 12px;
}
.hp-problems p {
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.48;
  color: var(--hp-body-on-cream); margin: 0;
}
.hp-problem__closer {
  text-align: center; margin: 40px 0 0;
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.45;
  color: var(--hp-body-on-cream);
}
.hp-problem__closer strong { color: var(--hp-forest); font-weight: 700; }

/* --- Members / Officers ------------------------------------------------- */
.hp-pitch { padding: 40px 0 72px; }
.hp-pitch__top {
  display: grid; grid-template-columns: minmax(0, 46%) 1fr;
  gap: 40px; align-items: start; margin: 0 0 36px;
}
/* The heading measure is set per section: Members has to break after
   "who", the Officer tail has to stay on one line. */
.hp-pitch--members  .hp-h2 { max-width: 420px; }
.hp-pitch--officers .hp-h2 { max-width: 560px; }
.hp-pitch__media img { display: block; width: 100%; height: auto; }
.hp-pitch--officers .hp-pitch__top { grid-template-columns: minmax(0, 44%) 1fr; }
/* The admin tablet is drawn smaller than the member group in the comp. */
.hp-pitch--officers .hp-pitch__media { justify-self: center; }
.hp-pitch--officers .hp-pitch__media img { max-width: 520px; }

.hp-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 30px;
  list-style: none; margin: 0; padding: 0;
}
.hp-feature__rule {
  display: block; width: 30px; height: 3px; background: var(--hp-gold-ink);
  margin: 0 0 10px;
}
.hp-feature h3 {
  font-family: var(--font-heading); font-weight: 700; font-size: 24px;
  letter-spacing: 0.035em; text-transform: uppercase; margin: 0 0 7px;
}
.hp-feature p {
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.45; margin: 0;
}
.hp-section--forest .hp-feature h3 { color: var(--hp-cream); }
.hp-section--forest .hp-feature p  { color: var(--hp-body-on-forest); }
.hp-section--cream  .hp-feature h3 { color: var(--hp-forest); }
.hp-section--cream  .hp-feature p  { color: var(--hp-body-on-cream); }

.hp-pitch__closer {
  /* Wide enough for this sentence to sit on one line at desktop — 74ch left
     "admin." orphaned on a second line. Still wraps normally when the
     container is narrower. */
  margin: 36px 0 0; max-width: 780px;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.5;
}
.hp-section--forest .hp-pitch__closer { color: var(--hp-body-on-forest); }
.hp-section--cream  .hp-pitch__closer { color: var(--hp-body-on-cream); }

/* --- Testimonials ------------------------------------------------------- */
.hp-voices { padding: 40px 0 64px; }
/* Long single-line heading — the comp drops it a size so it fits. */
.hp-voices .hp-h2 { font-size: clamp(1.75rem, 2.65vw, 2.375rem); margin-bottom: 40px; }

.hp-voices__stage { position: relative; }
/* No JS (or reduced motion): every slide renders stacked, two per row. */
.hp-voices__track {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 64px;
}
.hp-voice { display: block; margin: 0; }
.hp-voice__logo { display: none; }
.hp-voice blockquote { margin: 0; }
/* The comp sets the quotes in the body sans, not the serif — only the club
   names in the founding band are serif. */
.hp-voice p {
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.5;
  color: var(--hp-cream); margin: 0 0 20px;
}
.hp-voice cite {
  font-family: var(--font-body); font-style: normal; font-size: 1.0625rem;
  color: var(--hp-gold);
}

/* With JS the track shows ONE quote at a time, at every width. Every slide is
   parked in the same grid cell, so the block is as tall as the longest quote
   and never jumps height as it rotates. */
.hp-voices__track.is-rotating {
  grid-template-columns: 1fr; grid-template-rows: auto;
}
.hp-voices__track.is-rotating .hp-voice {
  grid-row: 1; grid-column: 1;
  opacity: 0; visibility: hidden; transition: opacity .6s var(--ease);
}
.hp-voices__track.is-rotating .hp-voice.is-active { opacity: 1; visibility: visible; }

.hp-voices__nav {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 28px 0 0;
}
.hp-voices__arrow {
  background: none; border: 1px solid rgba(198,150,69,.5); border-radius: 50%;
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--hp-gold); cursor: pointer; transition: all var(--transition); padding: 0;
}
.hp-voices__arrow:hover { background: rgba(198,150,69,.14); border-color: var(--hp-gold); }
.hp-voices__arrow svg { width: 16px; height: 16px; }
.hp-voices__dots { display: flex; gap: 9px; }
.hp-voices__dot {
  width: 8px; height: 8px; border-radius: 50%; padding: 0; border: 0; cursor: pointer;
  background: rgba(198,150,69,.34); transition: background var(--transition);
}
.hp-voices__dot.is-active { background: var(--hp-gold); }

/* --- Pricing ------------------------------------------------------------ */
.hp-pricing { padding: 68px 0 76px; }
.hp-pricing__head { margin: 0 0 26px; }
.hp-pricing__checkup { margin: 10px 0 0; font-size: 1.0625rem; }
.hp-pricing__checkup a { color: var(--hp-orange-ink); font-weight: 600; }
.hp-pricing__refer {
  width: fit-content; max-width: 100%; margin: 22px auto 0; padding: 14px 26px;
  text-align: center; font-size: 1.0625rem; line-height: 1.5;
  background: rgba(31, 42, 34, .05); border: 1px solid rgba(31, 42, 34, .1); border-radius: 10px;
}
.hp-pricing__refer a { color: var(--hp-orange-ink); font-weight: 600; }

.hp-founding {
  text-align: center; margin: 0 0 30px;
  font-family: var(--font-heading); font-weight: 700; font-size: 21px;
  letter-spacing: 0.045em; text-transform: uppercase; color: var(--orange);
}

.hp-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.hp-plans--single { grid-template-columns: minmax(0, 420px); justify-content: center; }
.hp-plan {
  display: flex; flex-direction: column;
  background: var(--hp-sand); border-radius: 6px;
  border-top: 3px solid var(--hp-gold-ink);
  padding: 30px 30px 34px;
}
.hp-plan--popular { background: var(--hp-forest); }
.hp-plan h3 {
  font-family: var(--font-heading); font-weight: 800; font-size: 33px;
  letter-spacing: 0.015em; text-transform: uppercase; color: var(--hp-forest);
  margin: 0 0 14px; line-height: 1;
}
.hp-plan--popular h3 { color: var(--hp-cream); }
.hp-plan__range {
  font-family: var(--font-body); font-size: 1.0625rem; color: var(--hp-body-on-cream);
  margin: 0 0 12px;
}
.hp-plan--popular .hp-plan__range { color: var(--hp-body-on-forest); }

.hp-plan__price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.hp-plan__price strong {
  font-family: var(--font-heading); font-weight: 800; font-size: 55px; line-height: .9;
  color: var(--hp-forest); letter-spacing: 0.005em;
}
.hp-plan--popular .hp-plan__price strong { color: var(--hp-cream); }
.hp-plan__suffix { font-family: var(--font-body); font-size: 1.0625rem; color: var(--hp-body-on-cream); }
.hp-plan--popular .hp-plan__suffix { color: var(--hp-body-on-forest); }
.hp-plan__was {
  font-family: var(--font-body); font-size: 1rem; text-decoration: line-through;
  color: #5d6659;
}
.hp-plan--popular .hp-plan__was { color: rgba(221,217,199,.65); }

.hp-plan__lines { margin: 0 0 22px; }
.hp-plan__lines p {
  font-family: var(--font-body); font-size: 1rem; line-height: 1.48;
  color: var(--hp-body-on-cream); margin: 0;
}
.hp-plan--popular .hp-plan__lines p { color: var(--hp-body-on-forest); }
.hp-plan__desc { margin: 0 0 20px; font-size: 1rem; line-height: 1.45; color: var(--hp-body-on-cream); }
.hp-plan--popular .hp-plan__desc { color: var(--hp-body-on-forest); }
.hp-plan .btn { margin-top: auto; justify-content: center; border-radius: 4px; padding: 15px 20px; font-size: 15px; }

.hp-terms {
  list-style: none; margin: 34px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0; font-family: var(--font-body); font-size: 1.0625rem;
  color: var(--hp-body-on-cream);
}
.hp-terms li { padding: 2px 14px; position: relative; }
.hp-terms li + li::before {
  content: '\00b7'; position: absolute; left: -2px; color: #8d9489;
}
/* Forces the eight terms onto two balanced rows instead of seven-plus-an-orphan.
   The break carries no separator, and neither does the item that follows it. */
.hp-terms__break { flex-basis: 100%; height: 0; padding: 0 !important; }
.hp-terms__break::before,
.hp-terms__break + li::before { content: none !important; }
.hp-pricing__footnote {
  margin: 22px auto 0; max-width: 72ch; text-align: center;
  font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5;
  color: #5f6a61;
}

/* --- Closing CTA band --------------------------------------------------- */
.hp-cta {
  position: relative; overflow: hidden; text-align: center;
  background-color: var(--hp-forest);
  background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat;
  padding: 56px 0 60px;
}
/* The panorama is opaque and busy. In the comp the copy sits on its dark sky;
   this band is taller (the live free-tier copy runs three lines), so a scrim
   keeps the headline off the bright foreground line-art. */
.hp-cta::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18,59,42,.52) 0%, rgba(18,59,42,.38) 55%, rgba(18,59,42,.10) 100%);
}
.hp-cta > .hp-container { position: relative; z-index: 2; }
@media (max-width: 960px)  { .hp-cta { background-image: url('assets/home/desert-panorama-960.webp'); } }
@media (min-width: 961px) and (max-width: 1280px) { .hp-cta { background-image: url('assets/home/desert-panorama-1280.webp'); } }
@media (min-width: 1281px) { .hp-cta { background-image: url('assets/home/desert-panorama.webp'); } }
.hp-cta__h2 {
  font-family: var(--font-heading); font-weight: 800;
  font-size: clamp(2rem, 3.3vw, 2.95rem); line-height: 1;
  letter-spacing: 0.01em; text-transform: uppercase;
  color: var(--hp-cream); margin: 0 0 14px;
}
.hp-cta__sub {
  font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.42;
  color: var(--hp-cream); margin: 0 auto 22px; max-width: 62ch;
}
.hp-cta .btn { border-radius: 6px; padding: 16px 34px; font-size: 17px; }

/* --- Reveal: OFF -------------------------------------------------------
   No scroll-in fade on this page. The content is simply there. The .reveal
   classes stay on the markup (scripts.js still observes them harmlessly and
   snow/motorcycle still use the effect) but they paint immediately here. */
.home .reveal, .home .reveal.visible,
.btw .reveal, .btw .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ===========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1180px) {
  .hp-hero__inner { grid-template-columns: minmax(0, 50%) 1fr; }
  /* Size the BOX, never the devices — each child is a percentage of it. */
  .hp-hero { --hp-chips-end: 472px; }
  .hp-chips span { font-size: 14px; }
  .hp-chips li { padding: 2px 14px; }
}

@media (max-width: 980px) {
  /* Hero stacks: copy first, device group beneath it and full width. */
  .hp-hero { padding-top: 34px; min-height: 0; }
  .hp-hero__inner { grid-template-columns: 1fr; padding-bottom: 16px; }
  /* Stacked: copy, then the device shots, then the chips. */
  .hp-hero__copy  { grid-column: 1; grid-row: 1; padding-bottom: 26px; }
  .hp-hero__media { grid-column: 1; grid-row: 2; }
  .hp-chips       { grid-column: 1; grid-row: 3; }
  .hp-hero__sub { max-width: none; }
  /* relative, NOT static: the three devices inside are absolutely positioned
     against this box. Making it static hands them to .hp-hero__inner and they
     paint from the top of the hero, over the headline. */
  .hp-hero__media {
    position: relative; left: auto; right: auto; top: auto; justify-self: center;
    margin-right: 0; width: 92%; max-width: 640px;
  }
  /* The devices fill only the top of the media box; pull the next row up over
     that dead space instead of leaving a gap under the screenshots. Above
     ~732px the media is pinned by its 640px max-width, so the dead space is a
     fixed ~92px there; below that it scales with the box. */
  .hp-hero__media { margin-bottom: -92px; }
  /* The video replaces the screenshots here: same grid row, media hidden. */
  .hp-hero__media { display: none; }
  .hp-mvideo { display: block; grid-column: 1; grid-row: 2; width: 100%; max-width: 640px; justify-self: center; }
  /* Phones ride up to sit nearly level with the tablet. */
  .hp-hero__phone--map  { --phone-y: 22%; }
  .hp-hero__phone--club { --phone-y: 18%; }
  .hp-chips { margin-top: 26px; }
  /* aspect-ratio keeps the art proportional here too — no height override. */

  .hp-pitch__top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 46px; }
  .hp-pitch--officers .hp-pitch__top { grid-template-columns: 1fr; }
  .hp-pitch__media { order: 2; max-width: 640px; }
  .hp-jump { display: none; }
  .hp-features { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; }
  .hp-problems { grid-template-columns: repeat(2, 1fr); }
  .hp-plans { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  /* No-JS fallback stacks; the carousel itself already shows one at a time. */
  .hp-voices__track { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hp-container,
  .hp-hero__inner { width: min(1306px, 100% - 36px); }
  .hp-problem  { padding: 52px 0 62px; }
  .hp-pitch    { padding: 34px 0 62px; }
  .hp-voices   { padding: 34px 0 56px; }
  .hp-pricing  { padding: 52px 0 60px; }
  .hp-clubs    { padding: 14px 0 28px; }

  /* Phones: headline sits close under the header bar. */
  .hp-hero { padding-top: 10px; }
  .hp-hero__h1 { margin-bottom: 16px; }
  .hp-hero__sub { margin-bottom: 20px; }
  .hp-hero .btn--lg { padding: 15px 26px; font-size: 17px; width: 100%; justify-content: center; }
  .hp-hero__cta { display: block; }
  .hp-hero__media { margin-bottom: -13%; }
  /* Phones: headline on ONE line, then straight into the screenshots. The
     CTA button and the free-tier note are hidden here (owner call 2026-09-24);
     /start is still one tap away in the nav. */
  .hp-hero__h1 { font-size: 9vw; white-space: nowrap; }
  .hp-hero__sub { margin-bottom: 0; }
  .hp-hero__copy { padding-bottom: 18px; }
  .hp-hero__h1 span { display: inline; }
  .hp-hero__cta, .hp-hero__note { display: none; }
  /* Two rows of two, centred under the device shots. */
  .hp-chips {
    display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; align-items: start;
    gap: 20px 30px; width: auto; margin: 24px auto 10px;
  }
  .hp-chips li { border-left: 0; padding: 0; }
  .hp-chips span { max-width: none; }

  .hp-problems { grid-template-columns: 1fr; gap: 28px; }
  .hp-problem .hp-h2 { margin-bottom: 30px; }
  .hp-problem__closer { margin-top: 38px; text-align: left; }
  .hp-features { grid-template-columns: 1fr; gap: 26px; }

  .hp-clubs__head { gap: 12px; }
  .hp-clubs__label { font-size: 14px; }
  .hp-clubs__logos { gap: 30px; }
  .hp-clubs__logo--raptors img      { width: 132px; }
  .hp-clubs__logo--michigan img     { width: 152px; }
  .hp-clubs__logo--mountaineers img { width: 74px; }
  .hp-clubs__logo--northaz img      { width: 132px; }

  .hp-plan { padding: 24px 24px 28px; }
  .hp-plan__price strong { font-size: 46px; }
  /* Two columns, four rows — the middot run is unreadable at phone width. */
  .hp-terms {
    display: grid; grid-template-columns: repeat(2, auto);
    justify-content: center; align-items: start;
    gap: 10px 26px; font-size: 1rem;
  }
  .hp-terms li { padding: 0; text-align: center; }
  .hp-terms li + li::before { content: none; }
  .hp-terms__break { display: none; }
  .hp-pricing__footnote { text-align: left; }
  .hp-cta { padding: 40px 0 44px; }
  .hp-cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
  .hp-chips { gap: 18px 20px; }
  .hp-chips span { font-size: 15px; }
}