/* ==========================================================================
   #s1 HERO — full-bleed, centered. LCP = the headline (instant, no reveal).
   Signature motion: a laptop lid opens (on load, then scrubs with scroll)
   revealing the Fellside Pantry dashboard. Jack placeholder cut-out stands
   front-left. Stars drift (foundation). Transform/opacity only.
   ========================================================================== */

#s1 {
  /* Hero owns the first viewport. Override the default section padding so the
     fold is the hero, not whitespace. scroll-margin-top stays from the kit. */
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--sp-5)) var(--sp-6);
  display: flex;
  align-items: center;
  overflow: clip; /* contain the device + cut-out without scrollbars */
}

#s1 .hero {
  position: relative;
  width: 100%;
  display: grid;
  /* DESKTOP: two columns. Text + CTA on the LEFT, the laptop (with Jack's
     cut-out) on the RIGHT. Mobile collapses to one stacked column below. */
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
  align-items: center;
  justify-items: stretch;
  text-align: left;
  gap: clamp(32px, 5vw, 72px);
}

/* ---- Headline block (LCP: rendered instantly, never reveal-hidden) ------- */
#s1 .hero__head {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 560px;
}
#s1 .hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s1 .hero__eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s1 .hero__title {
  font-size: clamp(29px, 3.2vw + 12px, 54px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ice);
  text-wrap: balance;
}
#s1 .hero__title .accent {
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 500;
}
#s1 .hero__sub {
  margin: var(--sp-3) 0 0;
  max-width: 46ch;
  color: var(--parchment-dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- CTA + trust microline ---------------------------------------------- */
#s1 .hero__cta {
  margin-top: var(--sp-4);
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
#s1 .hero__cta .btn--gold {
  font-size: 13px; padding: 15px 30px;
}
#s1 .hero__trust {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--steel);
  display: inline-flex; align-items: center; gap: 9px;
}
#s1 .hero__trust::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-live);
  box-shadow: 0 0 9px rgba(59,208,122,0.85);
}

/* ---- Staged visual: laptop centered, cut-out front-left ----------------- */
#s1 .hero__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  /* fills the right column on desktop; centered when stacked on mobile */
  max-width: 640px;
  margin-inline: auto;
  /* reserve height so the lid-open does not shift the layout */
  display: grid;
  place-items: center;
}

#s1 .hero__device { width: 100%; }
#s1 .hero__device .laptop { width: min(560px, 100%); }

/* a warm pool of light under the device so the dark scene feels lit, not cold */
#s1 .hero__stage::after {
  content: "";
  position: absolute; left: 50%; bottom: -6%;
  width: 70%; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(196,162,101,0.16) 0%, rgba(196,162,101,0.05) 38%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

/* Jack placeholder cut-out — stands front-left, overlapping the laptop base */
#s1 .hero__figure {
  position: absolute;
  z-index: 3;
  left: clamp(-14px, -2vw, 12px);
  bottom: -2%;
  width: clamp(150px, 21vw, 248px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.55));
  /* settles in: handled by JS load timeline; static fallback = visible */
  transform-origin: 50% 100%;
}

/* tiny "real person" caption pinned to the cut-out, low and left so it labels
   Jack rather than covering the dashboard data */
#s1 .hero__figure-tag {
  position: absolute;
  z-index: 5;
  bottom: 4%;
  left: clamp(-8px, -1vw, 8px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--parchment-dim);
  background: rgba(8,9,12,0.78);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 13px 7px 11px;
  display: inline-flex; align-items: center; gap: 8px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
#s1 .hero__figure-tag b { color: var(--ice); font-weight: 600; }
#s1 .hero__figure-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright); box-shadow: 0 0 8px rgba(196,162,101,0.8);
}

/* scroll cue — pinned to the BOTTOM-CENTRE of the hero viewport (where a scroll
   cue belongs), with breathing room from the bottom edge. Anchored to #s1
   (which owns the full 100svh fold) rather than .hero, so it sits at the true
   foot of the fold and never floats up into the centre. Premium treatment:
   a soft gold glow + a gently shimmering travelling highlight in the line, and
   a slow pulse on the label. Transform/opacity only. */
#s1 .hero__scrollcue {
  position: absolute;
  z-index: 4;
  left: 50%; bottom: clamp(18px, 3.2vh, 38px);
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--steel);
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  text-shadow: 0 0 12px rgba(196,162,101,0.18);
  animation: s1-cue-breathe 3.6s var(--ease-io) infinite;
}
/* the travelling-light "rail" the cue glides down */
#s1 .hero__scrollcue i {
  position: relative;
  width: 1.5px; height: 30px;
  border-radius: 2px;
  /* base rail: faint gold fading to nothing, with a soft outer glow */
  background: linear-gradient(to bottom,
    rgba(196,162,101,0.55), rgba(196,162,101,0.06) 70%, transparent);
  box-shadow: 0 0 10px 1px rgba(196,162,101,0.28);
  overflow: hidden;
}
/* a bright shimmer that slides down the rail, like a bead of light */
#s1 .hero__scrollcue i::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 3px; height: 11px;
  margin-left: -1.5px;
  border-radius: 3px;
  background: linear-gradient(to bottom,
    transparent, var(--gold-bright), rgba(255,255,255,0.9), var(--gold-bright), transparent);
  box-shadow: 0 0 8px 2px rgba(196,162,101,0.7);
  animation: s1-cue-travel 2.4s var(--ease-io) infinite;
  will-change: transform, opacity;
}
/* label breathes (opacity only) so the whole cue feels alive but restrained */
@keyframes s1-cue-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}
/* the bead of light glides from top to bottom of the rail, then fades */
@keyframes s1-cue-travel {
  0%   { transform: translateY(-12px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* ---- Fellside Pantry dashboard screen content tweaks (scoped) -----------
   The hero screen is its OWN light business brand (.mb mb--fellside): warm oat
   + honey. The kit's .screen-ui/.card/.bars/.chart classes default to the dark
   chrome tokens, so everything below re-points them at the brand's --mb-* vars
   so the screen reads as a light product UI, never Beaufort-dark. The count-up
   and path-draw JS (textContent / inline style) are untouched. ------------- */
#s1 .screen-ui { gap: 9px; }
/* the .mb base fills the screen + light bg/text; just tidy the inner padding */
#s1 .screen-ui.mb { padding: clamp(11px, 2.6cqw, 18px); gap: 9px; }

#s1 .fp-head { display: flex; align-items: center; gap: 8px; }
#s1 .fp-head .fp-brand {
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.2px;
}
#s1 .fp-head .fp-date {
  font-family: var(--mb-font-num); font-size: 9px; color: var(--mb-text-soft);
  letter-spacing: 1px; text-transform: uppercase;
}
#s1 .fp-weather {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mb-font-num); font-size: 9.5px; color: var(--mb-text-soft);
}
#s1 .fp-weather svg { width: 14px; height: 14px; }
/* weather glyph strokes -> brand tokens (were dark gold/cyan) */
#s1 .fp-weather svg circle { stroke: var(--mb-accent); }
#s1 .fp-weather svg path { stroke: var(--mb-accent-2); }

/* "Live" pill -> brand accent on a soft tint, not the dark green-live */
#s1 .screen-ui.mb .screen-ui__pill {
  color: var(--mb-accent);
  border-color: color-mix(in srgb, var(--mb-accent) 40%, transparent);
  background: var(--mb-surface-2);
}
#s1 .screen-ui.mb .screen-ui__pill::before {
  background: var(--mb-accent); box-shadow: none;
}
#s1 .screen-ui.mb .screen-ui__title { color: var(--mb-text-soft); }

/* KPI cards -> light surface */
#s1 .screen-ui.mb .card {
  background: var(--mb-surface);
  border-color: var(--mb-line);
  box-shadow: var(--mb-shadow);
}
#s1 .screen-ui.mb .card__label { color: var(--mb-text-soft); }
#s1 .screen-ui.mb .card__value { color: var(--mb-text); font-family: var(--mb-font-num); }
#s1 .screen-ui.mb .card__value .unit { color: var(--mb-text-soft); }
#s1 .screen-ui.mb .card__delta.up { color: var(--mb-accent-2); }
#s1 .screen-ui.mb .card__delta { color: var(--mb-text-soft); }
/* busiest-day value override (was inline gold-bright) */
#s1 .screen-ui.mb .fp-col--side .card__value[style] { color: var(--mb-accent) !important; }

#s1 .fp-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9px; min-height: 0; }
#s1 .fp-col { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

#s1 .fp-trend .screen-ui__title { margin-bottom: 6px; }
#s1 .fp-trend .chart svg { height: auto; }
/* chart line + area + busiest-day dot -> brand tokens (were dark cyan/gold) */
#s1 .screen-ui.mb .chart [data-draw] { stroke: var(--mb-accent); }
#s1 .screen-ui.mb .chart .chart__area { fill: color-mix(in srgb, var(--mb-accent) 14%, transparent); }
#s1 .screen-ui.mb .fp-busiest { fill: var(--mb-accent); }
#s1 .screen-ui.mb .fp-busiest-ring {
  fill: none; stroke: var(--mb-accent); stroke-width: 1.4; opacity: 0.5;
}

#s1 .fp-sellers { gap: 7px; }
/* top-seller bars -> brand accent fill on a soft tint track */
#s1 .screen-ui.mb .bar__name { color: var(--mb-text-soft); }
#s1 .screen-ui.mb .bar__num { color: var(--mb-text); font-family: var(--mb-font-num); }
#s1 .screen-ui.mb .bar__track { background: var(--mb-surface-2); }
#s1 .screen-ui.mb .bar__fill {
  background: linear-gradient(90deg, color-mix(in srgb, var(--mb-accent) 70%, #fff), var(--mb-accent));
}

#s1 .fp-alerts { display: flex; flex-direction: column; gap: 7px; }
#s1 .fp-alert {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mb-font-num); font-size: 9.5px; color: var(--mb-text-soft);
  border: 1px solid var(--mb-line); border-radius: 8px; padding: 8px 10px;
  background: var(--mb-surface-2);
}
#s1 .fp-alert .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
#s1 .screen-ui.mb .fp-alert .dot--amber { background: var(--mb-accent); box-shadow: none; }
#s1 .screen-ui.mb .fp-alert .dot--cyan { background: var(--mb-accent-2); box-shadow: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  /* MOBILE: stack (text then visual), recentre everything. */
  #s1 { min-height: auto; padding-block: calc(var(--header-h) + var(--sp-4)) var(--sp-7); }
  #s1 .hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: clamp(22px, 4vh, 40px);
  }
  #s1 .hero__head { max-width: min(900px, 92vw); }
  #s1 .hero__sub { margin-inline: auto; }
  #s1 .hero__cta { align-items: center; }
  #s1 .hero__stage { max-width: 540px; }
  #s1 .hero__device .laptop { width: min(440px, 92vw); }
  #s1 .hero__figure { width: clamp(112px, 30vw, 150px); left: -8px; bottom: -1%; }
  #s1 .hero__figure-tag { left: clamp(-6px, -1vw, 6px); bottom: 6%; font-size: 9px; padding: 6px 10px; }
  #s1 .hero__scrollcue { display: none; }
}

/* Small screens: the laptop's 16:10 frame is only ~190px tall at phone widths,
   so show a focused, compact subset (3 KPIs + a slim trend chart with the
   busiest-day highlight). The full rich dashboard returns in the §4 centrepiece. */
@media (max-width: 600px) {
  #s1 .screen-ui { gap: 6px; padding: 9px 10px; }
  #s1 .fp-head { gap: 6px; }
  #s1 .fp-head .fp-brand { font-size: 11px; }
  #s1 .fp-head .fp-date, #s1 .fp-weather { display: none; }

  #s1 .dash-grid { gap: 6px; }
  #s1 .card { padding: 8px 9px; gap: 2px; }
  #s1 .card__value { font-size: clamp(15px, 8cqw, 19px); }
  #s1 .card__label { font-size: 8px; letter-spacing: 0.8px; }
  #s1 .card__delta { font-size: 8.5px; }

  #s1 .fp-body { grid-template-columns: 1fr; gap: 6px; }
  #s1 .fp-col--side { display: none; }
  #s1 .fp-sellers { display: none; }   /* keep the chart, drop the bars to fit */
  #s1 .fp-trend .screen-ui__title { margin-bottom: 2px; font-size: 9px; }
  #s1 .fp-trend .chart svg { max-height: 56px; }

  #s1 .hero__figure { left: -10px; }
  #s1 .hero__figure-tag { display: none; } /* too cramped beside a small frame */
}

/* ---- Reduced motion: lid open + figure settled, no scroll-coupled motion - */
@media (prefers-reduced-motion: reduce) {
  /* static, no pulse / shimmer — keep the soft glow + rail, drop all motion */
  #s1 .hero__scrollcue { animation: none; opacity: 1; }
  #s1 .hero__scrollcue i::after { animation: none; opacity: 1; transform: none; top: 6px; }
  #s1 .hero__figure { transform: none !important; opacity: 1 !important; }
}