/* Landing-page layout. Loads after base.css, which owns the palette, section
   themes, typography, header, footer, and reveal states. */

/* Fluid, so the gutters grow with the screen instead of stranding empty space
   either side on a large monitor. The percentage is the knob for how much air
   sits left and right — lower it for more. Percentage, not vw: unaffected by
   the scrollbar. */
:root {
  --container:clamp(1100px, 86%, 1800px);
  /* Same gutter the container leaves, but resolved against the viewport, so the
     hero copy can hold the page's left edge while the photo runs full-bleed. */
  --gutter:max(24px, calc((100vw - clamp(1100px, calc(0.86 * (100vw - 48px)), 1800px)) / 2));
}

/* Hero -----------------------------------------------------------------
   Fills the first screen, logo pinned at the top and the rest centred in what
   is left. min-height, not height: below ~760px the stacked photo and copy are
   taller than the screen and have to push the section open. svh keeps mobile
   Safari's collapsing URL bar from cropping the bottom.

   --hero-pad is the air above and below the copy; the photo ignores it and
   fills the section. position:relative anchors the photo to the section. */
.hero {
  --hero-pad:clamp(48px,6.5vh,96px);
  position:relative;
  display:flex; flex-direction:column; min-height:100vh; min-height:100svh;
}
/* base.css's clamp is sized for sections you scroll to and pushed the grid past
   the fold; the gutter moves to .hero-copy so the photo can reach the edge. */
.hero > .section-pad {
  flex:1; display:flex;
  padding:var(--hero-pad) 0;
}
/* A flex item shrink-wraps by default, which would collapse the grid. */
.hero > .section-pad > .hero-grid { width:100%; }

/* Its own class, not `.hero .container`, which would also catch the header's
   container. Full width with no gap, so the split lands on the screen's centre
   and the photo owns everything right of it; .hero-copy carries the inset the
   container would have given. */
.hero-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  max-width:none;
}
/* Rows, so the text can be centred while the badge floats in the space left
   under it: text in row 2 with equal spacers either side, badge centred in the
   lower one. The margin is doubled because centring halves it — it makes up the
   section's bottom padding, which the badge's half of the gap has and the text's
   half does not. */
.hero-copy {
  display:grid; grid-template-rows:1fr auto 1fr;
  padding-left:var(--gutter); padding-right:clamp(28px,4vw,64px);
  container-type:inline-size;
}
.hero-text { grid-row:2; }
.hero-text > * + * { margin-top:24px; }
.hero .badge { grid-row:3; align-self:center; margin-top:var(--hero-pad); }
/* Each span is one of the three hand-placed lines. */
.hero h1 span { display:block; }
/* Keeps those breaks intact: the longest line, "Blend Calculator", is 7.4x the
   font size, so it fits any column wider than 8cqw. cqw, not vw, because the
   column is what constrains it. 4rem is base.css's ceiling. */
.hero h1 { font-size:min(10.5cqw, 4rem); }
/* Out of flow so it clears the section's padding and fills the right half from
   the top of the page to the next section. cover, since the section's shape
   won't match the image's. */
.hero-photo {
  position:absolute; top:0; right:0; width:50%; height:100%;
  display:block; object-fit:cover;
}

/* Statement -------------------------------------------------------------
   Sized above the h2 scale so it reads as a statement, not a section heading. */
.statement { text-align:center; }
.statement h2 { font-size:clamp(2.4rem,5.6vw,3.6rem); }

/* Section headings ----------------------------------------------------- */
.section-head { text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.section-head p { margin-top:14px; }

/* How it works --------------------------------------------------------- */
.how-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
/* No video: one centred column, narrow enough that the steps don't run to full
   measure. The track shrinks below 720px on its own, so phones are covered. */
.how-grid.no-video { grid-template-columns:minmax(0,720px); justify-content:center; }

/* Drop-in slot for the demo video: swap the placeholder markup for a
   <video class="video-slot" ...> and this still applies. Portrait recording?
   Change aspect-ratio to 9/16. */
.video-slot {
  width:100%; aspect-ratio:16/9;
  background:rgba(68,67,64,.08);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
video.video-slot { object-fit:cover; }
.video-slot .play {
  width:64px; height:64px; border-radius:50%;
  background:rgba(68,67,64,.16);
  display:flex; align-items:center; justify-content:center;
}
.video-slot .play::after {
  content:""; margin-left:4px;
  border-left:18px solid rgba(68,67,64,.45);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
}

.how-text {
  background:var(--cream); border-radius:var(--radius);
  padding:clamp(28px,4vw,44px);
  display:flex; flex-direction:column;
}
.steps { display:flex; flex-direction:column; gap:clamp(26px,3vw,38px); }
.step { display:grid; grid-template-columns:auto 1fr; column-gap:20px; align-items:start; }
/* Same line-height as the h4 beside it; the numeral is larger, so its cap sits
   lower and the negative margin takes that back. Tops then read as level. */
.step .num {
  font-family:var(--heading-font); font-size:2.2rem; line-height:1.2;
  margin-top:-.134em;
  color:var(--gold);
}
/* The gold numeral would vanish on the gold section. */
.theme-bright .step .num { color:var(--beige); }
.step h4 { margin-bottom:8px; }
.step .step-body { grid-column:2; }

/* Features -------------------------------------------------------------
   Scroll-snap carousel: native swipe on touch, arrows on desktop. The cards
   are bare, so the screenshots sit straight on the section colour. */
.carousel { position:relative; }
.car-track {
  display:flex; gap:26px;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.car-track::-webkit-scrollbar { display:none; }

.feature {
  flex:0 0 calc((100% - 2 * 26px) / 3);    /* three across on desktop */
  scroll-snap-align:start; text-align:center;
}
.feature h4 { margin-bottom:8px; }
.feature p { font-size:.98rem; }
/* 360px is exactly half the 725px-wide source files, so they render at a clean
   2x. Raising it upscales them. */
.feature img {
  width:100%; max-width:360px; height:auto; display:block;
  margin:0 auto 22px;
}
/* Arrows sit outside the track where there's room, and tuck in when there
   isn't. They stay real buttons, so keyboard and screen readers get them. */
.car-btn {
  position:absolute; top:38%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:0; padding:0; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-fg);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .15s ease;
}
/* An SVG chevron centres exactly; the ‹ › glyphs have uneven side bearings. */
.car-btn svg { display:block; }
.car-btn:disabled { opacity:.3; cursor:default; }
.car-btn.prev { left:-22px; }
.car-btn.next { right:-22px; }
@media (max-width:1220px) {
  .car-btn.prev { left:4px; }
  .car-btn.next { right:4px; }
}

/* Closing call to action ----------------------------------------------- */
.closing { text-align:center; }
/* Gold rather than the theme's beige, for punch on the charcoal. */
.closing h2 { color:var(--gold); }
.closing .badge { margin-top:32px; }
.closing p { margin-top:18px; }

/* Safety notice --------------------------------------------------------
   Beige rather than theme-cream's cream, so the notice sits on the same
   surface as the hero: the two are only 3% apart, so the difference read as an
   accident. Overriding just --bg keeps the theme's charcoal text. */
.safety-section { --bg:var(--beige); }

.safety { text-align:center; font-size:.95rem; }
/* An h2, so it matches "Features" and the other section headings. */
.safety h2 { margin-bottom:20px; }
.safety p + p { margin-top:.85em; }
.safety a { font-weight:600; }

/* Responsive ----------------------------------------------------------- */
@media (max-width:960px) {
  .feature { flex:0 0 calc((100% - 26px) / 2); }   /* two across */
}
@media (max-width:760px) {
  /* Stacked, so the logo centres over the column instead of holding the edge. */
  .hero .site-header .container { justify-content:center; }
  /* The gap below the logo is the section's --hero-pad, so match it above and
     the logo sits evenly between the top of the screen and the photo. */
  .hero .site-header { padding-top:calc(var(--hero-pad) + var(--safe-t)); }
  .hero-grid { grid-template-columns:1fr; gap:clamp(32px,5vw,72px); text-align:center; }
  /* Stacked: no spare height to float the badge in, so it follows the text. */
  .hero-copy { display:block; padding:0 24px; }
  .hero-copy .badge { margin-top:24px; }
  .hero .lead { margin-left:auto; margin-right:auto; }
  /* Back into the flow, above the copy. */
  .hero-photo {
    position:static; width:100%; max-width:420px; height:auto;
    margin:0 auto; order:-1;
  }
  .how-grid { grid-template-columns:1fr; }
  .video-slot { max-width:520px; margin:0 auto; }
}
@media (max-width:600px) {
  .feature { flex:0 0 100%; }                      /* one at a time */
  /* Looser leading, now that the paragraphs wrap to short lines. */
  .safety { font-size:1rem; line-height:1.7; }
}

@media (prefers-reduced-motion:reduce) {
  .car-track { scroll-behavior:auto; }
}