/* ==========================================================================
   #s2 PROBLEM — "Stop juggling five different systems"
   Layout archetype: CENTERED CLUSTER (distinct from the s1 full-bleed hero and
   the upcoming s3 split). Text sits above a contained stage.
   Signature motion (ONE): five labelled app tiles, each a mini login + a small
   monthly-fee tag, are scattered around the stage and CONVERGE on scroll,
   collapsing into a single tidy phone (the "one connected system"). The merge
   IS the message. Transform/opacity only; full reduced-motion + no-JS fallback.
   ========================================================================== */

#s2 {
  overflow: clip; /* contain the converging tiles without scrollbars */
}

/* DESKTOP: side-by-side. Copy + payoff on the LEFT, the converge stage on the
   RIGHT (alternates against s3's device-right by carrying the TEXT on the left
   while the moving visual sits right; rhythm handled across the section run).
   MOBILE: collapses to a single centred stacked column (see breakpoint). */
#s2 .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-template-areas:
    "head  stage"
    "payoff stage";
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  gap: clamp(20px, 3vw, 40px) clamp(32px, 5vw, 72px);
}
#s2 .s2-head   { grid-area: head; align-self: end; }
#s2 .s2-payoff { grid-area: payoff; align-self: start; }
#s2 .s2-stage  { grid-area: stage; }

/* ---- Intro copy (left column) ------------------------------------------- */
#s2 .s2-head {
  text-align: left;
  max-width: 520px;
}
#s2 .s2-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s2 .s2-head .eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
/* the trailing rule reads as decoration on a centred head; drop it left-aligned */
#s2 .s2-head .eyebrow::after { content: none; }
#s2 .s2-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice);
  text-wrap: balance;
}
#s2 .s2-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s2 .s2-lead .accent { color: var(--gold-bright); font-style: italic; }
#s2 .s2-lead {
  margin: var(--sp-3) 0 0;
  max-width: 56ch;
  color: var(--parchment-dim);
  font-size: var(--fs-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- The stage: tiles converge -> one phone ----------------------------- */
#s2 .s2-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* a fixed aspect keeps the scattered tiles from shifting layout as they move */
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

/* warm pool of light beneath the convergence point */
#s2 .s2-stage::after {
  content: "";
  position: absolute; left: 50%; top: 52%;
  width: 56%; height: 56%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center,
    rgba(196,162,101,0.16) 0%, rgba(196,162,101,0.05) 40%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* ---- The five scattered app tiles --------------------------------------- */
#s2 .s2-tiles {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none; /* purely illustrative */
}

#s2 .s2-tile {
  position: absolute;
  width: clamp(150px, 19vw, 210px);
  /* scatter position set per-tile below; converge drives a translate toward
     center + scale-down + fade via --converge (0 scattered .. 1 merged). */
  left: var(--x); top: var(--y);
  /* DEFAULT (no JS / CDN blocked): --converge falls back to 1 so the tiles sit
     collapsed/dimmed and the resolved "one system" composition reads. The JS
     scrub path sets --converge:0 at start to play the convergence. */
  transform:
    translate(-50%, -50%)
    translate(calc(var(--dx) * (1 - var(--converge, 1))),
              calc(var(--dy) * (1 - var(--converge, 1))))
    rotate(calc(var(--rot) * (1 - var(--converge, 1))))
    scale(calc(1 - var(--converge, 1) * 0.42));
  opacity: calc(1 - var(--converge, 1) * 0.92);
  will-change: transform, opacity;
  /* fallback eased transition if JS scrub is unavailable */
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out);
}

/* ---- The converging tiles are REAL tools (Square POS, Shopify, Mailchimp,
   Excel, QuickBooks). Each is a small light "app card" carrying its own brand
   logo + a separate monthly bill (the pain). They read as five real products,
   not generic dark chrome, so the merge into "Your business" lands. -------- */
#s2 .s2-card {
  border-radius: 13px;
  background: #fbfaf8;
  border: 1px solid rgba(20,24,28,0.10);
  box-shadow:
    0 1px 1px rgba(0,0,0,0.04),
    0 20px 44px -24px rgba(0,0,0,0.85);
  padding: 11px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  /* a faint brand-tinted top edge per tile via --brand */
  border-top: 2px solid var(--brand, #b4512f);
}

/* tile head: the brand logo mark + the product name + window dots */
#s2 .s2-card__head { display: flex; align-items: center; gap: 8px; }
#s2 .s2-brandmark {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  color: var(--brand, #b4512f);
  background: var(--brand-tint, rgba(180,81,47,0.12));
}
#s2 .s2-brandmark svg { width: 16px; height: 16px; }
/* Excel mark reads as a filled white-on-green tile (the recognisable look) */
#s2 .s2-brandmark--excel svg { width: 18px; height: 18px; }
#s2 .s2-card__name {
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  color: #23211e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#s2 .s2-card__dots { margin-left: auto; display: flex; gap: 4px; }
#s2 .s2-card__dots i { width: 5px; height: 5px; border-radius: 50%; background: #d9d4cc; display: block; }

/* one-line "what it is" under the brand */
#s2 .s2-card__kind {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.1px;
  color: #8a8278;
  margin-top: -2px;
}

/* a slim faux login / file row so it reads as a separate account to manage */
#s2 .s2-login { display: flex; flex-direction: column; gap: 5px; margin-top: 1px; }
#s2 .s2-field {
  height: 17px; border-radius: 5px;
  background: #f1ece6;
  border: 1px solid rgba(20,24,28,0.07);
  display: flex; align-items: center; padding: 0 7px;
  font-size: 8px; letter-spacing: 0.2px; color: #6b6358;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#s2 .s2-field--pw { letter-spacing: 1.6px; color: #a59a8d; }
#s2 .s2-signin {
  margin-top: 1px;
  height: 18px; border-radius: 5px;
  background: var(--brand, #b4512f); color: #fff;
  display: grid; place-items: center;
  font-size: 8.5px; font-weight: 600; letter-spacing: 0.4px;
}

/* the separate monthly-fee tag — the heart of the "five bills" pain */
#s2 .s2-fee {
  align-self: flex-start; margin-top: 1px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.2px;
  color: #8a3a22;
  background: rgba(224,106,106,0.10);
  border: 1px solid rgba(224,106,106,0.30);
  border-radius: 999px; padding: 3px 9px;
  display: inline-flex; align-items: center; gap: 5px;
  font-variant-numeric: tabular-nums;
}
#s2 .s2-fee::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #d8523f;
}

/* ---- Per-tool brand colours (recognisable) ----------------------------- */
#s2 .s2-card--square     { --brand:#1a1a1a; --brand-tint:rgba(0,0,0,0.07); }
#s2 .s2-card--shopify    { --brand:#5e8e3e; --brand-tint:rgba(94,142,62,0.14); }
#s2 .s2-card--mailchimp  { --brand:#ca9b14; --brand-tint:rgba(255,224,79,0.30); }
#s2 .s2-card--excel      { --brand:#1d7a44; --brand-tint:rgba(29,122,68,0.12); }
#s2 .s2-card--quickbooks { --brand:#2ca01c; --brand-tint:rgba(44,160,28,0.12); }
/* Excel's mark is a solid green rounded tile with a white X */
#s2 .s2-card--excel .s2-brandmark { background: transparent; }
#s2 .s2-card--excel .s2-brandmark svg rect { fill: #1d7a44; }
/* Mailchimp Freddie reads on a soft amber chip */
#s2 .s2-card--mailchimp .s2-brandmark { color:#7a5c00; }

/* ---- The merged phone (emerges as the tiles collapse) ------------------- */
#s2 .s2-merged {
  position: relative;
  z-index: 3;
  /* emerge: scale + fade in as --converge -> 1.
     DEFAULT (no JS / CDN blocked): fully resolved (converge falls back to 1)
     so the merged phone is always visible. Only the JS scrub path sets
     --converge:0 to start the collapse animation. */
  transform: scale(calc(0.86 + var(--converge, 1) * 0.14));
  opacity: var(--converge, 1);
  transition: transform .9s var(--ease-out), opacity .9s var(--ease-out);
  will-change: transform, opacity;
}
#s2 .s2-merged .tablet { width: min(420px, 78vw); }

/* a single soft "snap" ring that pulses out once at full merge (decorative) */
#s2 .s2-snap {
  position: absolute; left: 50%; top: 50%;
  width: 220px; height: 220px; margin: -110px 0 0 -110px;
  border-radius: 50%;
  border: 1px solid rgba(196,162,101,0.5);
  z-index: 1; pointer-events: none;
  opacity: 0; transform: scale(0.4);
}
#s2 .s2-snap.is-snapped {
  animation: s2-snap 0.9s var(--ease-out) forwards;
}
@keyframes s2-snap {
  0%   { opacity: 0.7; transform: scale(0.4); }
  100% { opacity: 0;   transform: scale(1.5); }
}

/* ========================================================================
   THE MERGED SCREEN — MAKER & CO dashboard (light brand, .mb .mb--maker)
   The five tools collapse into this one warm, clean retail dashboard. All
   colours come from the mb-* brand vars; figures use the brand num font.
   ======================================================================== */
#s2 .s2-os {
  /* override the kit's .mb defaults for this compact tablet screen */
  padding: clamp(10px, 3cqw, 22px);
  gap: clamp(6px, 1.9cqw, 15px);
  justify-content: flex-start;
}

/* header: "Your business" wordmark + a calm "all synced" status */
#s2 .s2-os__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#s2 .s2-os__logo { font-size: clamp(15px, 4.6cqw, 22px); }
#s2 .s2-os__live {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: clamp(8.5px, 2.4cqw, 11px); font-weight: 600;
  color: var(--mb-accent);
  background: var(--mb-surface-2);
  border-radius: 999px; padding: 4px 10px;
}
#s2 .s2-os__live-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #2ca01c; box-shadow: 0 0 0 3px rgba(44,160,28,0.16);
}

/* hero: big sales figure + a sparkline that draws in */
#s2 .s2-os__hero {
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  gap: clamp(10px, 3cqw, 20px);
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--mb-radius);
  box-shadow: var(--mb-shadow);
  padding: clamp(10px, 2.7cqw, 18px);
}
#s2 .s2-os__kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#s2 .s2-os__kpi-label {
  font-size: clamp(8.5px, 2.4cqw, 11px); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--mb-text-soft);
}
#s2 .s2-os__kpi-value {
  font-family: var(--mb-font-num); font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 8.4cqw, 42px); font-weight: 600; line-height: 1;
  color: var(--mb-text); letter-spacing: -0.02em;
}
#s2 .s2-os__kpi-delta {
  font-size: clamp(8.5px, 2.4cqw, 11px); font-weight: 600;
  color: #2ca01c;
}
#s2 .s2-os__spark {
  align-self: stretch; min-width: 0;
  display: flex; align-items: flex-end;
}
#s2 .s2-os__spark.chart svg { width: 100%; height: clamp(34px, 9cqw, 56px); display: block; overflow: visible; }
/* path-draw using the kit's [data-draw] contract (main.js sets --len).
   Override the global .chart [data-draw] cyan stroke with the brand accent. */
#s2 .s2-os__spark-line {
  stroke: var(--mb-accent);
  stroke-width: 2.2;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
#s2 .s2-os__spark-line.is-drawn { stroke-dashoffset: 0; }
#s2 .s2-os__spark-area { opacity: 0; transition: opacity 0.9s var(--ease-out) 0.3s; }
#s2 .s2-os__spark-area.is-drawn { opacity: 1; }

/* unified channels: the five tools, now one stock + one row of chips */
#s2 .s2-os__channels {
  display: flex; flex-direction: column; gap: clamp(5px, 1.5cqw, 10px);
}
#s2 .s2-os__channels-label {
  font-size: clamp(8.5px, 2.4cqw, 11px); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--mb-text-soft);
}
#s2 .s2-os__chips {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.6cqw, 9px);
}
#s2 .s2-os__chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: calc(var(--mb-radius) - 2px);
  padding: clamp(5px, 1.5cqw, 11px) 4px;
  font-size: clamp(8px, 2.2cqw, 10.5px); font-weight: 600;
  color: var(--mb-text);
}
#s2 .s2-os__chip-ic {
  width: clamp(18px, 5.4cqw, 28px); height: clamp(18px, 5.4cqw, 28px);
  border-radius: 8px; display: grid; place-items: center;
}
#s2 .s2-os__chip-ic svg { width: 62%; height: 62%; }
#s2 .s2-os__chip-ic--square     { color:#1a1a1a; background:rgba(0,0,0,0.06); }
#s2 .s2-os__chip-ic--shopify    { color:#5e8e3e; background:rgba(94,142,62,0.14); }
#s2 .s2-os__chip-ic--mailchimp  { color:#7a5c00; background:rgba(255,224,79,0.30); }
#s2 .s2-os__chip-ic--quickbooks { color:#2ca01c; background:rgba(44,160,28,0.12); }

/* the payoff line: five subs collapse into one fee (brand accent) */
#s2 .s2-os__bill {
  margin-top: auto;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  border-radius: var(--mb-radius); padding: clamp(8px, 2.2cqw, 14px) clamp(10px, 2.7cqw, 16px);
  background: var(--mb-accent);
  color: var(--mb-on-accent);
  box-shadow: var(--mb-shadow);
}
#s2 .s2-os__bill-lbl {
  font-size: clamp(8.5px, 2.4cqw, 11px); font-weight: 500;
  color: var(--mb-on-accent); opacity: 0.82;
}
#s2 .s2-os__bill-val {
  font-family: var(--mb-font-num);
  font-size: clamp(11px, 3.2cqw, 15px); font-weight: 600;
  letter-spacing: -0.01em; color: var(--mb-on-accent);
  text-align: right;
}

/* the payoff microline under the stage */
#s2 .s2-payoff {
  margin-top: var(--sp-3);
  text-align: left;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--steel);
  display: inline-flex; align-items: center; gap: 12px;
}
#s2 .s2-payoff b { color: var(--gold-bright); font-weight: 600; }
#s2 .s2-payoff i {
  width: 34px; height: 1px; background: var(--hairline); display: inline-block;
}

/* ---- Tile scatter coordinates (desktop) --------------------------------- */
/* x/y are the resting positions; dx/dy push them outward so converge=0 is the
   spread-out state and converge=1 pulls them to centre. */
#s2 .s2-tile--1 { --x: 18%; --y: 26%;  --dx: -22px; --dy: -30px; --rot: -7deg; --glyph: rgba(168,200,224,0.18); }
#s2 .s2-tile--2 { --x: 82%; --y: 22%;  --dx:  26px; --dy: -34px; --rot:  6deg; --glyph: rgba(196,162,101,0.22); }
#s2 .s2-tile--3 { --x: 12%; --y: 72%;  --dx: -30px; --dy:  30px; --rot:  5deg; --glyph: rgba(59,208,122,0.20); }
#s2 .s2-tile--4 { --x: 88%; --y: 70%;  --dx:  32px; --dy:  28px; --rot: -6deg; --glyph: rgba(224,106,106,0.20); }
#s2 .s2-tile--5 { --x: 50%; --y: 90%;  --dx:   0px; --dy:  40px; --rot:  3deg; --glyph: rgba(168,200,224,0.16); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  /* MOBILE: stack to one centred column (copy, stage, payoff). */
  #s2 .wrap {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "stage" "payoff";
    grid-template-rows: auto auto auto;
    justify-items: center;
    gap: clamp(28px, 5vw, 48px);
  }
  #s2 .s2-head { text-align: center; max-width: 760px; }
  #s2 .s2-head .eyebrow { justify-content: center; }
  #s2 .s2-head .eyebrow::after {
    content: ""; width: 26px; height: 1px;
    background: linear-gradient(90deg, var(--gold-soft), transparent);
  }
  #s2 .s2-lead { margin-inline: auto; }
  #s2 .s2-payoff { text-align: center; margin-top: 0; }
  #s2 .s2-stage { aspect-ratio: 4 / 5; max-width: 460px; margin: 0 auto; }
  #s2 .s2-tile { width: clamp(118px, 38vw, 156px); }
  #s2 .s2-card { padding: 10px; gap: 7px; }
  #s2 .s2-merged .tablet { width: min(420px, 94vw); }
  /* container queries (cqw) handle the in-screen scaling; nothing brand-specific
     to override here, the dashboard reflows down cleanly via the kit vars. */

  /* tighter scatter so five tiles fit a portrait stage without clipping */
  #s2 .s2-tile--1 { --x: 27%; --y: 17%; --dx: -14px; --dy: -20px; }
  #s2 .s2-tile--2 { --x: 73%; --y: 23%; --dx:  16px; --dy: -22px; }
  #s2 .s2-tile--3 { --x: 21%; --y: 58%; --dx: -18px; --dy:  18px; }
  #s2 .s2-tile--4 { --x: 79%; --y: 64%; --dx:  18px; --dy:  16px; }
  #s2 .s2-tile--5 { --x: 50%; --y: 88%; --dx:   0px; --dy:  24px; }
}

@media (max-width: 480px) {
  #s2 .s2-tile { width: clamp(104px, 42vw, 132px); }
  #s2 .s2-fee { font-size: 8px; padding: 2px 7px; }
  #s2 .s2-card__name { font-size: 9px; }
}

/* ---- Reduced motion: NO converge scrub. Show the resolved end-state:
   the merged phone is fully present; tiles sit calmly spread behind it at low
   opacity so the "many -> one" idea still reads as a static composition. ---- */
@media (prefers-reduced-motion: reduce) {
  #s2 .s2-tile {
    transition: none !important;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot))
      scale(0.9) !important;
    opacity: 0.28 !important;
  }
  #s2 .s2-merged {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  #s2 .s2-snap { display: none; }
}