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

/* Hero ----------------------------------------------------------------- */
/* Fills the first screen, with the logo pinned at the top and everything else
   centred in what's left, so the headline, the blurb, and the App Store button
   sit mid-viewport on load rather than crowded under the header.

   min-height rather than 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 of the block. */
.hero { display:flex; flex-direction:column; min-height:100vh; min-height:100svh; }
.hero > .section-pad { flex:1; display:flex; align-items:center; }
/* A flex item shrink-wraps by default, which would collapse the grid. */
.hero > .section-pad > .hero-grid { width:100%; }

/* Its own class rather than `.hero .container`, which would also catch the
   header's container nested inside this section. */
/* The photo is the taller of the two columns and sets the row height, so
   centring the copy against it is what puts the headline and button on the
   middle of the screen. (This used to be align-items:start, which levelled the
   headline with the top of the photo; that pinned the copy high in the row.) */
.hero-grid {
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}
.hero-copy > * + * { margin-top:24px; }
.hero h1 .line-2 { display:block; }
/* The image is a cut-out with transparent edges, so it needs no radius and
   must not carry a shadow: the shadow would trace its rectangular box rather
   than the phone inside it. */
.hero-photo { width:100%; height:auto; display:block; }

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

/* How it works --------------------------------------------------------- */
/* Video on the left, the three steps stacked down the right. */
.how-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px); align-items:center;
}

/* Drop-in slot for the demo video. Replace the placeholder markup with a
   <video class="video-slot" ...> and this styling still applies. Portrait
   screen 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; background:rgba(68,67,64,.08); }
.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;
}

/* The steps sit in a card beside the video. */
.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, so both line boxes start together;
   the numeral is larger, so its cap sits a shade 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);
}
/* On the gold section the accent numeral would vanish, so flip it there. */
.theme-bright .step .num { color:var(--beige); }
.step h4 { margin-bottom:8px; }
.step .step-body { grid-column:2; }

/* Features -------------------------------------------------------------
   A 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;                    /* Firefox */
  -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; }
.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. Hidden from assistive tech is wrong here, so they stay buttons. */
.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 carry 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 headline 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 --------------------------------------------------------
   No card and no measure of its own: the text runs the full width of the
   content column, so the only inset left is the section's own 24px. */
/* Beige rather than the cream the theme would give it, so the notice sits on
   the same surface as the hero. The two are only 3% apart, so the difference
   read as an accident rather than a deliberate change of section. Overriding
   just the slot keeps theme-cream's charcoal text, which cream shares. */
.safety-section { --bg:var(--beige); }

.safety { text-align:center; font-size:.95rem; }
/* An h2, so it carries the same weight and size as "Features" and the other
   section headings rather than sitting a level below them. */
.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) {
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero .lead { margin-left:auto; margin-right:auto; }
  .hero-photo { max-width:420px; 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 */

  /* Stays centred like the desktop notice; the larger size and looser leading
     keep it readable once the paragraphs wrap to short lines. */
  .safety { font-size:1rem; line-height:1.7; }
}

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