/* ==========================================================================
   HOMEPAGE — TOP SECTION
   Reconstructed from the supplied reference implementation. Values here are
   taken from that file (colours, borders, shadows, type, rotations, sizes),
   not re-derived by eye. Scoped to the homepage so the rest of the site is
   untouched.
   ========================================================================== */

body[data-page="home"]{
  /* --- extracted tokens -------------------------------------------------
     These re-declared the brand literals and so shadowed the shared token
     layer. They now point at it, with the approved values as fallbacks so
     the page is pixel-identical when no token config is present. */
  --sm-green:var(--brand-green, #75FB8A);
  --sm-yellow:var(--accent-yellow, #FFEB52);
  --sm-ink:#000;
  --sm-panel:#fff;
  --sm-shell:#f4f2ec;
  --sm-bd:2px;
  --sm-sh-sm:2px 3px 0 var(--sm-ink);
  --sm-sh:3px 4px 0 var(--sm-ink);
  --sm-sh-md:4px 5px 0 var(--sm-ink);
  --sm-sh-lg:6px 8px 0 var(--sm-ink);
  /* Config first, this build's own face as the fallback. The fallback is the
     approved value verbatim, so a surface with no config renders exactly as
     it did before typography became editable. */
  --sm-ui:var(--vp-font-body,'Be Vietnam Pro', system-ui, sans-serif);
  --sm-display:var(--vp-font-display,'Epilogue', system-ui, sans-serif);

  background:var(--sm-green);
  background-image:none;
  color:var(--sm-ink);
  font-family:var(--sm-ui);
}
body[data-page="home"] ::selection{ background:var(--sm-yellow); color:var(--sm-ink); }

/* --------------------------------- hero ---------------------------------- */
.sm-hero{ background:var(--sm-green); padding:32px 0 32px; border-bottom:var(--sm-bd) solid var(--sm-ink); }
.sm-hero-top{ max-width:790px; margin:0 auto; padding:0 16px; text-align:center; }
.sm-hero h1{
  margin:0 0 .625rem;
  font:italic 900 clamp(1.75rem, 0.9038461538rem + 4.23076923vw, 3.125rem)/1.1 var(--sm-display);
  letter-spacing:-.01em; text-transform:none; text-wrap:balance;
}
.sm-hero-sub{
  margin:0 auto; max-width:80%;
  font:italic 400 clamp(1rem, 0.8846153846rem + .57692308vw, 1.1875rem)/1.45 var(--sm-ui);
}
.sm-hero-sub b{ font-weight:700; }
.sm-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:36px 0 0;
  font:italic 700 clamp(15px,1.35vw,19px)/1.6 var(--sm-ui);
}
.sm-strip span{ background:var(--sm-yellow); box-shadow:8px 0 0 var(--sm-yellow), -8px 0 0 var(--sm-yellow); padding:2px 0; }

/* ---------------------------- platform cards ------------------------------ */
.sm-cards-wrap{ max-width:1180px; margin:36px auto 0; padding:0 16px; }
.sm-cards{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:24px; padding-bottom:80px;
}
.sm-card{
  position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:0;
  width:144px; max-width:100%; padding:14px 14px 16px; cursor:pointer;
  border:1.76px solid var(--sm-ink); border-radius:2.07688rem;
  font-family:var(--sm-ui); will-change:transform;
  background:var(--sm-green); box-shadow:var(--sm-sh-md);
  transform:rotate(3.33deg); transition:all .2s linear;
}
.sm-card:nth-child(2){ transform:rotate(-2.4deg); }
.sm-card:nth-child(3){ transform:rotate(2.1deg); }
.sm-card:hover{ transform:rotate(0deg) scale(1.1); box-shadow:0 0 0 var(--sm-ink); background:#fff; }
.sm-card[aria-selected="true"]{
  background:#fff; box-shadow:0 0 0 var(--sm-ink);
  transform:rotate(0deg) scale(1.1);
  transition:.4s cubic-bezier(.19,1,.22,1.25);
}
.sm-card-ico{
  display:block; width:110px; max-width:100%; aspect-ratio:1.3; margin:0 auto;
  border:1.8px solid var(--sm-ink); border-radius:1.3125rem; overflow:hidden; position:relative;
  display:grid; place-items:center;
}
.sm-card-ico > svg:not(.sm-art){ width:46%; height:auto; }
.sm-card-nm{ margin-top:14px; font:italic 900 clamp(17px,1.6vw,20px)/1.2 var(--sm-ui); }
.sm-card-from{
  margin-top:10px; font:italic 800 12px/1 var(--sm-ui);
  background:var(--sm-yellow); border:var(--sm-bd) solid var(--sm-ink);
  border-radius:6px; padding:4px 7px;
}
.sm-card-arrow{
  position:absolute; left:50%; bottom:0; display:flex; align-items:center; justify-content:center;
  width:28.8px; height:28.8px; background:var(--sm-ink); border-radius:9999px;
  z-index:-1; transform:translate(-50%) scale(.5); opacity:0;
  transition:transform .2s linear, opacity .2s linear;
}
.sm-card[aria-selected="true"] .sm-card-arrow{
  z-index:0; transform:translate(-50%,2.5rem) scale(1); opacity:1;
}

/* ------------------------ trust + station cluster ------------------------- */
.sm-mid{ max-width:900px; margin:16px auto 0; padding:0 16px; }
.sm-mid-grid{ display:grid; grid-template-columns:auto auto; justify-content:center; gap:32px; align-items:center; }
.sm-right{ display:flex; flex-direction:column; align-items:center; gap:0; }

/* ------------------------------ payment row ------------------------------- */
.sm-pay{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center;
  padding:10px 14px; background:#fff; border:var(--sm-bd) solid var(--sm-ink);
  border-radius:12px; box-shadow:var(--sm-sh);
}
.sm-pay-lbl{ font:italic 800 11.5px/1 var(--sm-ui); text-transform:uppercase; letter-spacing:.04em; opacity:.6; }
.sm-pay-marks{ display:flex; align-items:center; gap:12px; }

/* -------------------------------- rating ---------------------------------- */
.sm-rating{ margin-top:32px; text-align:center; }
.sm-rating-top{ display:flex; align-items:center; justify-content:center; gap:8px; }
.sm-score{ font:italic 800 clamp(28px,2.6vw,36px)/1.15 var(--sm-ui); }
.sm-rating-sub{ margin-top:8px; font:italic 700 17px/1.4 var(--sm-ui); }

/* -------------------------------- responsive ------------------------------- */
@media (max-width:860px){
  .sm-mid-grid{ grid-template-columns:1fr; justify-items:center; gap:22px; }
  .sm-trust{ order:2; margin:0; }
  .sm-right{ order:1; }
  .sm-cards{ gap:16px; padding-bottom:64px; }
}
@media (max-width:560px){
  .sm-card{ width:118px; padding:12px 10px 14px; }
  .sm-card-ico{ width:88px; }
  .sm-hero-sub{ max-width:100%; }}
@media (prefers-reduced-motion: reduce){
  .sm-card, .sm-card[aria-selected="true"]{ transition:none; }}

/* Panel colours follow the reference artwork. The illustrations themselves
   are local SVG objects (see PLATFORM_ART) and fill the panel, so the card
   geometry above is untouched. */
.sm-card-ico[data-pf="twitch"]{ background:#A970FF; }
.sm-card-ico[data-pf="youtube"]{ background:#FFEB52; }
.sm-card-ico[data-pf="kick"]{ background:#7BEE6B; }
.sm-card-ico .sm-art{ width:100%; height:100%; display:block; }