/* The home page only (html.home), on top of site.css. Same look as the app's redesign: a palm photo under a navy
   tint at the top, a white sheet sliding up over it, big confident type and soft shadows. Other pages don't load this. */

.home {
  --navy: #0E1B3D;
  --navy-2: #1B2A55;
  --bg-2: #F2F4F8;
  --sheet-r: 28px;
  --card-r: 20px;
  --blue: #1D5BD6;   --blue-soft: #E4ECFC;
  --green-2: #0B7A4F; --green-soft: #E3F4EB;
  --orange-2: #B0420F; --orange-soft: #FDECE2;
  --gold: #8A5A00;   --gold-soft: #FCF0CC;
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 18px 40px rgba(16, 24, 40, .14);
}
.home body { background: var(--navy); }
.home ::selection { background: var(--navy); color: #fff; }

/* ---------- Header: see-through on the photo, white once scrolled ---------- */
.home .site-header {
  position: fixed; left: 0; right: 0;
  background: transparent;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.home .site-header:not(.is-scrolled) .wordmark,
.home .site-header:not(.is-scrolled) .nav-link,
.home .site-header:not(.is-scrolled) .menu-btn { color: #fff; }
.home .site-header:not(.is-scrolled) .nav-link:hover { color: #fff; }
.home .site-header:not(.is-scrolled) .btn--primary { background: #fff; border-color: #fff; color: var(--navy); }
.home .site-header:not(.is-scrolled) .btn--secondary { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); color: #fff; }
.home .site-header:not(.is-scrolled) :focus-visible { outline-color: #fff; }
.home .site-header.is-scrolled,
.home .site-header:has(.menu-btn[aria-expanded="true"]) {
  background: rgba(255,255,255,.96);
  border-bottom-color: var(--rule);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .06);
}
.home .site-header:has(.menu-btn[aria-expanded="true"]) { background: #fff; }
.home .site-header:has(.menu-btn[aria-expanded="true"]) .wordmark,
.home .site-header:has(.menu-btn[aria-expanded="true"]) .menu-btn { color: var(--ink); }
/* The logo picture: white over the photo, its own colors once the header turns white. */
.home .site-header:not(.is-scrolled):not(:has(.menu-btn[aria-expanded="true"])) .wordmark__logo { filter: brightness(0) invert(1); }
/* The invite bar sits above the fixed header; push the header under it. */
.home:has(#invite-bar:not([hidden])) .site-header { position: sticky; }
.home:has(#invite-bar:not([hidden])) .h-hero { margin-top: calc(-1 * var(--header-h)); }

/* ---------- Shared type ---------- */
.h-kicker { font: 600 13px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.h-h2 { font: 700 clamp(30px, 22px + 2.2vw, 46px)/1.12 var(--font-head); letter-spacing: -0.02em; color: var(--navy); }
.h-h3 { font: 700 clamp(24px, 20px + 1.1vw, 32px)/1.18 var(--font-head); letter-spacing: -0.015em; color: var(--navy); }
.h-lead { font-size: clamp(17px, 16px + .3vw, 19px); line-height: 1.6; color: var(--text); }
.h-body { font-size: 17px; line-height: 1.65; color: var(--text); }

.h-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border-radius: 999px;
  font: 600 14px/1 var(--font-body);
}
.h-chip .icon { width: 17px; height: 17px; }
.h-chip--blue { background: var(--blue-soft); color: var(--blue); }
.h-chip--green { background: var(--green-soft); color: var(--green-2); }
.h-chip--orange { background: var(--orange-soft); color: var(--orange-2); }
.h-chip--navy { background: #E3E7F2; color: var(--navy); }
.h-chip--gold { background: var(--gold-soft); color: var(--gold); }

/* Buttons on navy */
.h-btn-light { background: #fff; border-color: #fff; color: var(--navy); border-radius: 14px; }
.h-btn-light:hover { background: #EEF1F6; border-color: #EEF1F6; }
.h-btn-light:active { background: #DDE2EC; border-color: #DDE2EC; }
.h-btn-light:focus-visible { outline-color: #fff; }
.h-btn-glass { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; border-radius: 14px; }
.h-btn-glass:hover { background: rgba(255,255,255,.2); }
.h-btn-glass:focus-visible { outline-color: #fff; }
.home .btn--secondary, .home .btn--primary { border-radius: 14px; }

/* ---------- Hero ---------- */
.h-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding: calc(var(--header-h) + 40px) 0 calc(var(--sheet-r) + 72px);
  overflow: hidden;
}
.h-hero__photo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,27,61,.78) 0%, rgba(14,27,61,.58) 38%, rgba(14,27,61,.88) 100%),
    url("/assets/home/hero-palms.jpg") center 30% / cover no-repeat;
}
.h-hero__grid { display: grid; gap: 48px; }
.h-hero__text { min-width: 0; }
.h-founder {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 4px 14px 4px 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff; text-decoration: none;
  font: 500 14px/1.35 var(--font-body);
}
.h-founder:hover { background: rgba(255,255,255,.2); }
.h-founder:focus-visible { outline-color: #fff; }
.h-founder strong { font-weight: 700; }
.h-founder .icon { width: 16px; height: 16px; }
.h-founder__tag { flex: none; padding: 6px 10px; border-radius: 999px; background: #fff; color: var(--navy); font-weight: 700; font-size: 13px; line-height: 1; }
@media (max-width: 639.98px) { .h-founder .founder-line__long { display: none; } }
/* Phones: the spot count gets its own line with no separator, so a wrapped line never starts with "·". */
@media (max-width: 639.98px) {
  .h-founder .founder-line__sep { display: none; }
  .h-founder .founder-line__count { display: block; }
}
.h-hero__title {
  margin-top: 24px;
  font: 800 clamp(40px, 26px + 4.4vw, 76px)/1.02 var(--font-head);
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 13ch;
}
.h-hero__lead { margin-top: 22px; max-width: 34em; font-size: clamp(17px, 16px + .4vw, 20px); line-height: 1.6; color: rgba(255,255,255,.88); }
.h-hero__actions { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.h-hero__fine { margin-top: 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: rgba(255,255,255,.85); }
.h-hero__fine li { display: flex; align-items: center; gap: 8px; }
.h-hero__fine .icon { width: 16px; height: 16px; color: #7EE2B0; }
.h-hero__media { display: flex; justify-content: center; }
.h-phones .phone__bezel { background: #050A1C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 40px 80px -20px rgba(0,0,0,.55); }
.h-phones .phone--back { opacity: .92; }
@media (min-width: 640px) {
  .h-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .h-hero__fine { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
}
@media (max-width: 639.98px) { .h-hero__actions .btn { width: 100%; } }
@media (min-width: 960px) {
  .h-hero { padding-top: calc(var(--header-h) + 64px); padding-bottom: calc(var(--sheet-r) + 96px); }
  .h-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 40px; }
  .h-hero__media { justify-content: flex-end; }
}

/* ---------- The white sheet ---------- */
.h-sheet {
  position: relative;
  margin-top: calc(-1 * var(--sheet-r) - 24px);
  background: #fff;
  border-radius: var(--sheet-r) var(--sheet-r) 0 0;
  box-shadow: 0 -12px 40px rgba(6, 12, 32, .25);
}
.h-glance { padding: 40px 0 8px; }
.h-facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.h-facts li { background: var(--bg-2); border-radius: var(--card-r); padding: 20px; font-size: 15px; line-height: 1.45; color: var(--text); }
.h-facts__num { font: 800 clamp(30px, 24px + 1.4vw, 40px)/1 var(--font-head); color: var(--navy); letter-spacing: -0.02em; margin-bottom: 8px; }
@media (min-width: 960px) { .h-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .h-facts li { padding: 24px; } }
.h-games { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.h-games ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.h-games li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); font: 600 15px/1.2 var(--font-head); color: var(--navy); }

/* ---------- Sections ---------- */
.h-section { padding-block: clamp(64px, 44px + 5vw, 112px); }
.h-section--tint { background: var(--bg-2); }
.h-head { max-width: 760px; margin-bottom: clamp(40px, 28px + 3vw, 72px); }
.h-head .h-h2 { margin-top: 12px; }
.h-head .h-lead { margin-top: 16px; }
.h-head--center { margin-inline: auto; text-align: center; }

/* ---------- Sticky scroll: the phone stays put while the steps scroll past ---------- */
.h-story { position: relative; }
.h-step { min-width: 0; }
.h-step + .h-step { margin-top: 72px; }
.h-step .h-h3 { margin-top: 18px; }
.h-step .h-body { margin-top: 14px; max-width: 36em; }
.h-points { list-style: none; padding: 0; margin-top: 24px; display: grid; }
.h-points li { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.5; color: var(--text); }
.h-points li:last-child { border-bottom: 1px solid var(--rule); }
.h-points strong { color: var(--navy); font-weight: 600; }

/* A tinted stage holding a phone. Phones only: on a computer the pinned stage takes over. */
.h-stage {
  display: flex; justify-content: center; align-items: center;
  margin-top: 28px;
  padding: 36px 20px;
  border-radius: var(--card-r);
  overflow: hidden;
}
.h-stage--blue { background: linear-gradient(160deg, #E9F0FE 0%, #D5E2FB 100%); }
.h-stage--green { background: linear-gradient(160deg, #E7F5EE 0%, #CDEBDD 100%); }
.h-stage--navy { background: linear-gradient(160deg, #1B2A55 0%, #0E1B3D 100%); }
.h-stage--orange { background: linear-gradient(160deg, #FFF3EA 0%, #FBDDC9 100%); }
.h-stage .phone__bezel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 30px 60px -24px rgba(14,27,61,.5); }

/* The worked trade example */
.h-math { margin: 24px 0 0; max-width: 360px; background: var(--bg-2); border-radius: 16px; padding: 18px 18px 12px; }
.h-math dl { margin-top: 10px; }
.h-math__row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--rule); }
.h-math__row:first-child { border-top: 0; }
.h-math__row dd { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }
.h-math__row--total { font-weight: 700; color: var(--navy); }
.h-math__row--total dd { color: var(--orange-2); font-size: 16px; }

.h-story__pin { display: none; }

@media (min-width: 960px) {
  .h-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 72px; }
  .h-step__media { display: none; }
  /* Each step gets most of a window of scrolling, so one idea is on screen at a time. */
  .h-step { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; padding-block: 48px; }
  .h-step + .h-step { margin-top: 0; }
  .has-story .h-step { opacity: .25; transition: opacity .45s var(--ease); }
  .has-story .h-step.is-active { opacity: 1; }
  .h-story__pin { display: block; }
  .h-story__stage {
    position: sticky;
    top: calc(var(--header-h) + 5vh);
    height: calc(90vh - var(--header-h));
    min-height: 560px;
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    background: #E3ECFD;
    transition: background-color .6s var(--ease);
  }
  .h-story__stage[data-stage="1"] { background: #DDF1E7; }
  .h-story__stage[data-stage="2"] { background: #16244C; }
  .h-story__stage[data-stage="3"] { background: #FDE9DC; }
  .h-story__glow {
    position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255,255,255,.75), rgba(255,255,255,0));
    transition: opacity .6s var(--ease);
  }
  .h-story__stage[data-stage="2"] .h-story__glow { opacity: .12; }
  .h-story__phone { --w: min(300px, (90vh - var(--header-h) - 120px) * .46); position: relative; }
  .h-story__phone .phone__bezel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 40px 80px -28px rgba(14,27,61,.55); }
  .h-story__screens { position: relative; }
  .h-story__screens .phone__screen { display: block; opacity: 0; transform: scale(1.03); transition: opacity .5s var(--ease), transform .6s var(--ease); }
  .h-story__screens .phone__screen + .phone__screen { position: absolute; inset: 0; }
  .h-story__screens .phone__screen.is-on { opacity: 1; transform: none; }
  .h-story__dots { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  .h-story__dots li { width: 8px; height: 8px; border-radius: 4px; background: rgba(14,27,61,.22); transition: background-color .3s, height .3s; }
  .h-story__dots li.is-on { height: 24px; background: var(--navy); }
  .h-story__stage[data-stage="2"] .h-story__dots li { background: rgba(255,255,255,.3); }
  .h-story__stage[data-stage="2"] .h-story__dots li.is-on { background: #fff; }
}

/* Sections rise in gently as they come into view. home.js adds .has-motion; without it nothing is hidden. */
.has-motion .h-rise { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.has-motion .h-rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .has-motion .h-rise { opacity: 1; transform: none; transition: none; }
  .h-step, .h-story__screens .phone__screen, .h-story__stage { transition: none !important; }
}

/* Icon squares (the computer section's tiles) */
.h-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: #E3E7F2; color: var(--navy); }
.h-ico .icon { width: 22px; height: 22px; }

/* ---------- Also in the app: three spotlights, each with a picture drawn in HTML from real card art ---------- */
.h-spots { display: grid; gap: clamp(56px, 40px + 4vw, 104px); }
.h-spot { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
.h-spot__text { min-width: 0; display: flex; flex-direction: column; }
.h-spot__text .h-chip { align-self: flex-start; }
.h-spot__text .h-h3 { margin-top: 16px; }
.h-spot__text .h-body { margin-top: 14px; }
.h-spot__art {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; aspect-ratio: 5 / 4; min-width: 0;
  box-shadow: var(--shadow-lift);
}
@media (min-width: 960px) {
  .h-spot { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 64px; }
  .h-spot--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .h-spot--flip .h-spot__art { order: -1; }
}
@media (max-width: 639.98px) { .h-spot__art { aspect-ratio: 1 / 1; border-radius: 24px; } }
.h-spot__art img { display: block; width: 100%; height: auto; border-radius: 4.5% / 3.3%; }

/* Record your pack opening: the real screen, a recording from the app, playing in a phone on a navy plate. */
.h-spot__phone { aspect-ratio: auto; display: flex; justify-content: center; align-items: center; padding: 40px 24px; }
.phone--spot { --w: min(250px, 64vw); }
@media (min-width: 960px) { .phone--spot { --w: 270px; } }
.h-spot__phone .phone__bezel { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 40px 80px -24px rgba(0,0,0,.6); }
video.phone__screen { aspect-ratio: 600 / 1304; background: #0B1022; }

/* Case check: a row of cards in a case, one outlined gold with the Wanted banner. */
.v-case { background: linear-gradient(160deg, #3B2A1E 0%, #22170F 100%); padding: 6% 7% 0; }
.v-case::before { content: ""; position: absolute; inset: 3.5% 4% auto; height: 62%; z-index: -1; border-radius: 12px; background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); }
.v-case__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 3%; }
.v-case__slot { position: relative; padding: 3px; border-radius: 7px; border: 2px solid rgba(255,255,255,.55); }
.v-case__slot img { border-radius: 4px; }
.v-case__slot.is-hit { border-color: #F5B82E; box-shadow: 0 0 0 4px rgba(245,184,46,.35), 0 0 32px rgba(245,184,46,.55); transform: translateY(-4px); }
.v-case__tag { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); width: min(86%, 340px); display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.v-case__star { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--gold-soft); color: #C98A00; font-size: 18px; }
.v-case__k { font: 600 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.v-case__t { font: 600 15px/1.3 var(--font-head); color: var(--navy); }
.v-case__b { font-size: 13px; line-height: 1.4; color: var(--text-muted); }

/* Team: an approval request card over the team list, on a soft blue panel. */
.v-team { background: linear-gradient(160deg, #E4ECFC 0%, #C9D9FA 100%); display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 7%; }
.v-team__ask, .v-team__list { background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft); }
.v-team__ask { padding: 16px; }
.v-team__k { font: 600 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.v-team__who { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.v-team__who > div { flex: 1; min-width: 0; }
.v-team__av { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--orange-soft); color: var(--orange-2); font: 700 13px/1 var(--font-body); }
.v-team__av--b { background: var(--green-soft); color: var(--green-2); }
.v-team__n { font: 600 15px/1.3 var(--font-head); color: var(--navy); }
.v-team__n span { margin-left: 4px; font: 500 12px/1 var(--font-body); color: var(--text-muted); }
.v-team__d { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.v-team__amt { font: 700 18px/1 var(--font-head); color: var(--navy); }
.v-team__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.v-team__btns span { display: grid; place-items: center; min-height: 36px; border-radius: 10px; background: var(--bg-2); color: var(--navy); font: 600 13px/1 var(--font-body); }
.v-team__btns .v-team__ok { background: var(--navy); color: #fff; }
.v-team__list { padding: 6px 16px; }
.v-team__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.v-team__row + .v-team__row { border-top: 1px solid var(--rule); }
.v-team__row p { flex: 1; font: 600 14px/1.3 var(--font-body); color: var(--navy); }
.v-team__role { padding: 4px 10px; border-radius: 999px; background: var(--green-soft); color: var(--green-2); font: 600 12px/1.3 var(--font-body); }
.v-team__role--h { background: #E3E7F2; color: var(--navy); }

/* More in the app: a colour-coded list, no boxes. */
.h-feats__title { margin-top: clamp(64px, 48px + 4vw, 112px); }
.h-feats { list-style: none; padding: 0; margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; }
.h-feats li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--rule-strong); }
.h-feats h4 { font: 600 17px/1.3 var(--font-head); color: var(--navy); }
.h-feats p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.h-feats__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; }
.h-feats__ico .icon { width: 22px; height: 22px; }
.h-feats__ico--green { background: var(--green-soft); color: var(--green-2); }
.h-feats__ico--gold { background: var(--gold-soft); color: var(--gold); }
.h-feats__ico--navy { background: #E3E7F2; color: var(--navy); }
.h-feats__ico--blue { background: var(--blue-soft); color: var(--blue); }
.h-feats__ico--orange { background: var(--orange-soft); color: var(--orange-2); }
@media (min-width: 640px) { .h-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .h-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Coming next */
.h-next {
  margin-top: 40px;
  background: var(--navy);
  color: #fff;
  border-radius: var(--card-r);
  padding: 28px 24px;
  display: grid; gap: 20px;
}
.h-next__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.h-next .h-h3 { color: #fff; }
.h-next__list { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.82); }
.h-next__list strong { color: #fff; font-weight: 600; }
@media (min-width: 960px) {
  .h-next { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); padding: 40px; gap: 40px; }
  .h-next__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
}

/* Steps */
.h-steps { list-style: none; padding: 0; display: grid; gap: 16px; }
.h-steps > li { background: var(--bg-2); border-radius: var(--card-r); padding: 26px; }
.h-steps h3 { margin-top: 16px; font: 600 20px/1.3 var(--font-head); color: var(--navy); }
.h-steps p:not(.h-steps__num) { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--text); }
.h-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--navy); color: #fff;
  font: 700 17px/1 var(--font-head);
  flex: none;
}
@media (min-width: 960px) { .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .h-steps > li { padding: 32px; } }

/* Pricing: the plans (plans.js builds these from the server's plans; the HTML has the built-in ones).
   Four cards, cheapest first; the plan the free trial gives is the navy one. At 4 columns the cards share their rows
   (subgrid), so prices, buttons and lists line up across them. */
.h-checks { list-style: none; padding: 0; margin-top: 16px; display: grid; }
.h-checks li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.45; color: var(--text); }
.h-checks li:first-child { border-top: 0; }
.h-checks .icon { width: 20px; height: 20px; margin-top: 1px; color: var(--green-2); }
.h-plans { display: grid; gap: 16px; max-width: 1200px; margin-inline: auto; }
.h-plan {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  min-width: 0;
  background: #fff;
  color: var(--text);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
}
.h-plan--featured { background: linear-gradient(165deg, #1B2A55 0%, #0E1B3D 100%); color: #fff; box-shadow: var(--shadow-lift); }
.h-plan--featured :focus-visible { outline-color: #fff; }
.h-plan__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; align-content: start; }
.h-plan__name { font: 700 22px/1.2 var(--font-head); letter-spacing: -0.01em; color: var(--navy); }
.h-plan--featured .h-plan__name { color: #fff; }
.h-plan__tag { padding: 6px 10px; border-radius: 999px; background: #7EE2B0; color: var(--navy); font: 700 12px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.h-plan__tagline { flex-basis: 100%; font-size: 15px; line-height: 1.45; color: var(--text-muted); }
.h-plan--featured .h-plan__tagline { color: rgba(255,255,255,.78); }
.h-plan__price { margin-top: 20px; }
.h-plan__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.h-plan__num { font: 800 clamp(40px, 34px + 1.2vw, 48px)/1 var(--font-head); letter-spacing: -0.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.h-plan--featured .h-plan__num { color: #fff; }
.h-plan__unit { font-size: 16px; color: var(--text-muted); }
.h-plan--featured .h-plan__unit { color: rgba(255,255,255,.75); }
.h-plan__founder { margin-top: 10px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.85); }
.h-plan:not(.h-plan--featured) .h-plan__founder { color: var(--text); }
.h-plan__founder strong { font-weight: 700; color: inherit; }
.h-plan__cta { margin-top: 20px; }
.h-plan__cta .btn--primary { border-radius: 14px; }
.h-plan__fine { margin-top: 10px; font-size: 13px; line-height: 1.45; text-align: center; color: var(--text-muted); }
.h-plan--featured .h-plan__fine { color: rgba(255,255,255,.75); }
.h-plan__intro { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule); font: 600 14px/1.35 var(--font-body); color: var(--navy); }
.h-plan--featured .h-plan__intro { border-top-color: rgba(255,255,255,.16); color: #fff; }
.h-plan .h-checks { margin-top: 6px; align-content: start; }
.h-plan .h-checks li { padding: 9px 0; font-size: 15px; }
.h-plan .h-checks .icon { width: 18px; height: 18px; margin-top: 2px; }
.h-checks--on-ink li { color: rgba(255,255,255,.92); border-top-color: rgba(255,255,255,.12); }
.h-checks--on-ink .icon { color: #7EE2B0; }
@media (min-width: 720px) { .h-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .h-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
  .h-plan { padding: 32px 24px; }
}
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1200px) {
    .h-plans { grid-template-rows: repeat(5, auto); }
    .h-plan { grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* Founder pricing, under the plans: one navy band with the spot meter. */
.h-founders {
  max-width: 1200px; margin: 16px auto 0;
  display: grid; gap: 16px; align-items: center;
  padding: 22px 24px; border-radius: 20px;
  background: var(--navy); color: #fff;
}
.h-founders__title { font: 600 17px/1.4 var(--font-head); }
.h-founders__sub { margin-top: 4px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.78); }
.h-founders__sub strong { color: #fff; font-weight: 700; }
.h-founders .meter { margin: 0; }
.h-founders .meter > span { background: rgba(255,255,255,.2); }
.h-founders .meter > span.is-claimed { background: #7EE2B0; }
@media (max-width: 639.98px) {
  .h-founders .meter { background: rgba(255,255,255,.2) linear-gradient(to right, #7EE2B0 var(--claimed, 0%), transparent 0) no-repeat; }
}
.h-founders--closed { display: block; background: #fff; color: var(--text); font-size: 15px; text-align: center; box-shadow: var(--shadow-soft); }
@media (min-width: 960px) {
  .h-founders { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; padding: 24px 32px; }
}

/* Compare plans: a table in its own scroll box on phones (the label column stays put), so the page never scrolls
   sideways. The trial plan's column is tinted. */
.h-compare { max-width: 1200px; margin: 40px auto 0; background: #fff; border-radius: 24px; padding: 24px 0 8px; box-shadow: var(--shadow-soft); }
.h-compare__title { padding-inline: 20px; font: 700 22px/1.2 var(--font-head); letter-spacing: -0.01em; color: var(--navy); }
.h-compare__note { margin-top: 4px; padding-inline: 20px; font-size: 14px; color: var(--text-muted); }
.h-compare__scroll { position: relative; margin-top: 12px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.h-compare__scroll:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.h-compare__table { width: 100%; min-width: 600px; border-collapse: separate; border-spacing: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
.h-compare__table th, .h-compare__table td { padding: 12px 10px; border-top: 1px solid var(--rule); text-align: center; vertical-align: middle; line-height: 1.35; }
.h-compare__table thead th { border-top: 0; padding-top: 4px; padding-bottom: 14px; vertical-align: bottom; }
.h-compare__table tbody th { text-align: left; font-weight: 500; color: var(--text); }
.h-compare__table th:first-child {
  position: sticky; left: 0; z-index: 1;
  width: 34%; min-width: 150px; padding-left: 20px;
  background: #fff;
  box-shadow: 1px 0 0 var(--rule);
}
.h-compare__table td { color: var(--text); }
.h-compare__table .is-featured { background: var(--bg-2); }
.h-compare__table thead .is-featured { border-radius: 12px 12px 0 0; }
.h-compare__plan { display: block; font: 700 15px/1.25 var(--font-head); color: var(--navy); }
.h-compare__price { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.h-compare__yes { display: block; width: 20px; height: 20px; margin-inline: auto; color: var(--green-2); }
.h-compare__no { color: var(--text-subtle); }
@media (min-width: 960px) {
  .h-compare { padding: 32px 0 12px; }
  .h-compare__title, .h-compare__note { padding-inline: 32px; }
  .h-compare__table { font-size: 15px; }
  .h-compare__table th:first-child { padding-left: 32px; box-shadow: none; }
  .h-compare__table th, .h-compare__table td { padding: 13px 14px; }
}
/* Phones: the box runs edge to edge with small type and tight cells, so all four plans fit at 390px and up (narrower
   screens scroll inside the box, the label column staying put). The price loses "a month" (said under the title). */
@media (max-width: 639.98px) {
  .h-compare { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding-top: 20px; }
  .h-compare__title, .h-compare__note { padding-inline: 16px; }
  .h-compare__table { min-width: 380px; font-size: 13px; }
  .h-compare__table th, .h-compare__table td { padding: 10px 3px; }
  .h-compare__table th:first-child { width: 27%; min-width: 96px; padding-left: 16px; padding-right: 6px; }
  .h-compare__plan { font-size: 13px; }
  .h-compare__price { font-size: 12px; }
  .h-compare__per { display: none; }
  .h-compare__yes { width: 18px; height: 18px; }
}
@media (forced-colors: active) { .h-compare__table th:first-child { box-shadow: none; border-right: 1px solid CanvasText; } }

.h-notes { max-width: 1200px; margin: 24px auto 0; display: grid; gap: 12px; }
.h-notes p { background: #fff; border-radius: 16px; padding: 16px 20px; font-size: 15px; line-height: 1.55; color: var(--text); }
.h-notes strong { color: var(--navy); }
@media (min-width: 960px) { .h-notes { grid-template-columns: 1fr 1fr; } }
.h-reassure { list-style: none; padding: 0; margin: 28px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; font-size: 14px; color: var(--text-muted); }
.h-reassure li { display: flex; align-items: center; gap: 8px; }
.h-reassure .icon { width: 18px; height: 18px; color: var(--navy); }

/* Referrals */
.h-ref { display: grid; gap: 32px; align-items: start; }
.h-ref__text .h-h2 { margin-top: 18px; }
.h-ref__text .h-body { margin-top: 14px; }
.h-ref__text .btn { margin-top: 24px; }
.h-ref__steps { list-style: none; padding: 0; display: grid; gap: 12px; }
.h-ref__steps li { display: flex; gap: 16px; align-items: flex-start; background: var(--bg-2); border-radius: var(--card-r); padding: 20px; }
.h-ref__steps h3 { font: 600 18px/1.3 var(--font-head); color: var(--navy); }
.h-ref__steps p:not(.h-steps__num) { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text); }
@media (min-width: 960px) { .h-ref { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; } }

/* FAQ: site.css layout, softer surfaces */
.home #faq .faq-item { background: #fff; border-radius: 16px; margin-bottom: 8px; padding-inline: 18px; border: 0; }
.home #faq .faq-item summary { border: 0; }
.home #faq .faq-group__title { margin-bottom: 12px; }
.home #faq .faq__head .h-h2 { margin-top: 12px; }
.home #faq .faq__head .h-body { margin-top: 12px; }

/* Closing band: a show-floor photo under navy */
.h-cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; padding-block: clamp(80px, 60px + 5vw, 128px); }
.h-cta__photo {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,27,61,.86) 0%, rgba(14,27,61,.8) 100%),
    url("/assets/home/show-floor.jpg") center / cover no-repeat;
}
.h-cta__inner { display: flex; flex-direction: column; align-items: center; }
.h-cta__title { margin-top: 16px; font: 800 clamp(36px, 26px + 3vw, 60px)/1.05 var(--font-head); letter-spacing: -0.03em; color: #fff; }
.h-cta__lead { margin-top: 16px; font-size: 18px; color: rgba(255,255,255,.85); }
.h-cta .btn { margin-top: 32px; min-width: min(300px, 100%); }
.h-cta__alt { margin-top: 18px; font-size: 15px; color: rgba(255,255,255,.8); }
.h-cta__alt .link { position: relative; }
.h-cta__spots { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.7); }
.h-cta__spots strong { color: #fff; }

/* The sheet ends at the footer, which stays white. */
.home .site-footer { background: #fff; border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: reduce) { .home .site-header { transition: none; } }
.h-step .h-chip, .h-ref__text .h-chip { align-self: flex-start; }

/* ---------- "There's more" cues ---------- */
/* The last step doesn't need a full window of scroll: less white after it, so the next section peeks in. */
@media (min-width: 960px) {
  .h-step:last-child { min-height: 70vh; }
  .h-section--story { padding-bottom: 40px; }
}
.h-more {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; margin: 48px auto 0;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px;
  background: var(--navy); color: #fff;
  font: 600 16px/1 var(--font-body); text-decoration: none;
  box-shadow: var(--shadow-soft);
}
.h-more:hover { background: var(--navy-2); }
.h-more .icon { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .h-more .icon, .h-cue .icon { animation: h-nudge 1.8s var(--ease) infinite; } }
@keyframes h-nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }

/* A round arrow at the bottom of the photo: the page keeps going. */
.h-cue {
  position: absolute; left: 50%; bottom: calc(var(--sheet-r) + 36px); transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.h-cue:hover { background: rgba(255,255,255,.24); }
.h-cue:focus-visible { outline-color: #fff; }
.h-cue .icon { width: 20px; height: 20px; }
@media (max-width: 959.98px) { .h-cue { display: none; } }

/* ---------- Phone + computer (live sync) ---------- */
.h-sync-sec { background: linear-gradient(180deg, #fff 0%, var(--bg-2) 100%); }
.h-sync { display: grid; gap: 48px; align-items: center; }
.h-sync__text .h-h2 { margin-top: 18px; }
.h-sync__text .h-body { margin-top: 14px; max-width: 34em; }
.h-sync__text .h-chip { align-self: flex-start; }
@media (min-width: 1024px) { .h-sync { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; } }

.h-sync__art { position: relative; padding: 0 9% 12% 0; }

/* The laptop: a dark lid with the dashboard inside, and a thin base. */
.h-laptop { position: relative; }
.h-laptop__lid { background: #0B1330; border-radius: 16px 16px 6px 6px; padding: 2.2% 2.2% 3%; box-shadow: 0 40px 80px -30px rgba(14,27,61,.45); }
.h-laptop__screen { position: relative; aspect-ratio: 16 / 10.4; border-radius: 6px; overflow: hidden; background: #E6E9F0; container-type: inline-size; }
.h-laptop__base { height: 14px; margin: 0 -6%; background: linear-gradient(180deg, #C9CEDA 0%, #AEB4C3 100%); border-radius: 0 0 18px 18px; position: relative; }
.h-laptop__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 5px; transform: translateX(-50%); background: #9AA1B2; border-radius: 0 0 6px 6px; }

/* The dashboard inside: every size is a share of the screen width (cqw), so it scales like a picture. */
.d-app { display: flex; height: 100%; font-family: var(--font-body); color: #0E1530; }
.d-side { width: 19cqw; background: #fff; padding: 2.6cqw 1.8cqw; border-right: 1px solid #E4E7EE; }
.d-logo { font: 700 2cqw/1.05 var(--font-head); color: var(--navy); margin-bottom: 2.6cqw; }
.d-nav { display: flex; align-items: center; gap: 1cqw; font-size: 1.45cqw; font-weight: 600; color: #4B5368; padding: .9cqw 1cqw; border-radius: .9cqw; margin-bottom: .3cqw; }
.d-nav.is-on { background: #EEF1F6; color: var(--navy); }
.d-ico { width: 1.5cqw; height: 1.5cqw; border-radius: .4cqw; border: .22cqw solid currentColor; opacity: .7; }
.d-main { flex: 1; min-width: 0; padding: 2.4cqw 2.6cqw; display: flex; flex-direction: column; gap: 1.8cqw; }
.d-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 2cqw; }
.d-kick { font-size: 1.15cqw; font-weight: 700; letter-spacing: .1cqw; text-transform: uppercase; color: var(--green-2); }
.d-title { font: 700 3cqw/1.1 var(--font-head); color: var(--navy); margin-top: .4cqw; }
.d-synced { display: flex; align-items: center; gap: .8cqw; font-size: 1.25cqw; font-weight: 600; color: #4B5368; background: #fff; border-radius: 99cqw; padding: .7cqw 1.4cqw; transition: background-color .4s, color .4s; }
.d-synced span { width: 1cqw; height: 1cqw; border-radius: 50%; background: #17895A; }
.d-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.d-tile { background: #fff; border-radius: 1.4cqw; padding: 1.5cqw 1.7cqw; }
.d-tile--green { background: #E3F4EB; }
.d-tile__k { font-size: 1.15cqw; font-weight: 700; letter-spacing: .08cqw; text-transform: uppercase; color: #4B5368; }
.d-tile__v { font: 700 2.9cqw/1.15 var(--font-head); color: var(--navy); margin-top: .5cqw; font-variant-numeric: tabular-nums; }
.d-tile--green .d-tile__v { color: var(--green-2); }
.d-card { background: #fff; border-radius: 1.4cqw; padding: 1.6cqw 1.8cqw .6cqw; flex: 1; overflow: hidden; }
.d-card__h { font: 700 1.8cqw/1 var(--font-head); color: var(--navy); margin-bottom: 1cqw; }
.d-row { display: flex; align-items: center; gap: 1.4cqw; padding: 1.05cqw 0; border-top: 1px solid #E4E7EE; }
.d-card__h + .d-row { border-top: 0; }
.d-dot { width: 3cqw; height: 3cqw; border-radius: 50%; flex: none; }
.d-dot--trade { background: #EEE8FB; box-shadow: inset 0 0 0 .9cqw #EEE8FB, inset 0 0 0 3cqw #6A3EC2; }
.d-dot--sale { background: #FDECE2; box-shadow: inset 0 0 0 .9cqw #FDECE2, inset 0 0 0 3cqw #E0612B; }
.d-dot--buy { background: #E4ECFC; box-shadow: inset 0 0 0 .9cqw #E4ECFC, inset 0 0 0 3cqw #2F6BEA; }
.d-row__main { flex: 1; min-width: 0; }
.d-row__t { font-size: 1.5cqw; font-weight: 700; }
.d-row__s { font-size: 1.15cqw; color: #626A7F; margin-top: .2cqw; }
.d-row__amt { text-align: right; }
.d-pos { font: 700 1.6cqw/1.2 var(--font-head); color: var(--green-2); }
.d-neg { font: 700 1.6cqw/1.2 var(--font-head); color: var(--orange-2); }

/* The phone in front of the laptop, bottom right. */
.h-sync__phone { position: absolute; right: 0; bottom: 0; width: 27%; }
.h-sync__phone .phone { --w: 100%; width: 100%; }
.h-sync__phone .phone__bezel { width: 100%; padding: 3.5%; border-radius: 15% / 7%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -20px rgba(14,27,61,.55); }
.h-sync__phone .phone__bezel::after { display: none; }
.h-sync__phone .phone__screen { border-radius: 12% / 5.5%; }
.h-sync__screen { position: relative; }
/* The finger tap on Complete trade */
.h-tap { position: absolute; left: 73%; top: 84.5%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(.2); background: rgba(255,255,255,.55); box-shadow: 0 0 0 3px rgba(255,255,255,.7); opacity: 0; pointer-events: none; }
.h-toast { position: absolute; left: 50%; top: 7%; transform: translate(-50%, -8px); display: flex; align-items: center; gap: 5px; white-space: nowrap; padding: 6px 11px; border-radius: 999px; background: #0C6E47; color: #fff; font: 600 clamp(9px, .75vw, 12px)/1 var(--font-body); box-shadow: 0 8px 20px rgba(0,0,0,.25); opacity: 0; }
.h-toast .icon { width: 1.1em; height: 1.1em; }

/* The signal flying from the phone to the laptop */
.h-signal { position: absolute; left: 80%; top: 70%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #3DD68C; box-shadow: 0 0 0 6px rgba(61,214,140,.25), 0 0 24px 6px rgba(61,214,140,.55); opacity: 0; pointer-events: none; }
.h-sync__badge { position: absolute; left: 4%; bottom: 2%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--navy); font: 600 14px/1 var(--font-body); box-shadow: var(--shadow-lift); }
.h-sync__badge .icon { width: 16px; height: 16px; color: var(--green-2); }
@media (max-width: 639.98px) { .h-sync__badge { position: static; margin-top: 20px; } .h-sync__art { padding-right: 12%; } .h-sync__phone { width: 32%; bottom: 52px; } }

/* ---- The loop (home.js sets data-phase; without it the finished state shows) ---- */
[data-phase] .d-row--new { max-height: 0; padding-block: 0; opacity: 0; border-top-color: transparent; overflow: hidden; }
[data-phase="done"] .d-row--new { max-height: 8cqw; padding-block: 1.05cqw; opacity: 1; background: #E3F4EB; margin-inline: -1cqw; padding-inline: 1cqw; border-radius: 1cqw; transition: max-height .5s var(--ease), padding .5s var(--ease), opacity .4s var(--ease) .1s; }
[data-phase="done"] .d-row--new + .d-row { border-top-color: transparent; }
[data-phase] .d-synced { opacity: 0; }
[data-phase="done"] .d-synced { opacity: 1; background: #E3F4EB; color: #0B7A4F; transition: opacity .3s; }
[data-phase="tap"] .h-tap { animation: h-tap .6s var(--ease) forwards; }
@keyframes h-tap { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); } }
[data-phase="send"] .h-toast, [data-phase="done"] .h-toast { opacity: 1; transform: translate(-50%, 0); transition: opacity .3s, transform .3s var(--ease); }
[data-phase="send"] .h-signal { animation: h-fly .9s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes h-fly {
  0% { left: 86%; top: 80%; opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1); }
  55% { left: 74%; top: 36%; }
  100% { left: 58%; top: 42%; opacity: 0; transform: scale(.5); }
}
[data-phase] .h-sync__badge { opacity: .35; transition: opacity .4s; }
[data-phase="done"] .h-sync__badge { opacity: 1; }

/* What you do on the computer */
.h-desk__title { margin-top: clamp(56px, 40px + 3vw, 88px); }
.h-desk { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; }
.h-desk li { background: #fff; border-radius: var(--card-r); padding: 22px; box-shadow: var(--shadow-soft); }
.h-desk h4 { margin-top: 14px; font: 600 18px/1.3 var(--font-head); color: var(--navy); }
.h-desk p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.h-sync__text .h-body + .h-body { margin-top: 12px; }
.h-sync__text strong { color: var(--navy); font-weight: 600; }
@media (min-width: 640px) { .h-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .h-desk { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The phone overlaps only the laptop's frame, never the dashboard's numbers. */
.h-sync__art { padding: 0 21% 8% 0; }
.h-sync__phone { width: 24.5%; bottom: -2%; }
@media (max-width: 639.98px) { .h-sync__art { padding-right: 21%; } .h-sync__phone { width: 28%; bottom: 52px; } }
@media (max-width: 639.98px) { .h-sync__art { padding-right: 25%; } .h-sync__phone { width: 26%; bottom: 44px; } }

/* ---------- Hero: laptop (web app Inventory) with the phone in front on the right ---------- */
.h-hero__devices { width: 100%; }
.h-hero__devices .h-laptop__lid { box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 50px 90px -30px rgba(0,0,0,.6); }
.h-hero__devices .h-laptop__base { background: linear-gradient(180deg, #D5DAE5 0%, #9EA5B6 100%); }
.h-hero__devices .h-sync__phone .phone__bezel { background: #050A1C; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 70px -20px rgba(0,0,0,.6); }
@media (min-width: 960px) {
  .h-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 48px; }
  .h-hero__title { font-size: clamp(44px, 20px + 3.6vw, 72px); }
  .h-hero__media { justify-content: flex-end; margin-right: -2%; }
}
@media (max-width: 959.98px) { .h-hero__devices { max-width: 620px; margin-inline: auto; } }

/* Dashboard bits used by the Inventory screen */
.d-kick--muted { color: #626A7F; }
.d-tile--navy { background: var(--navy); }
.d-tile--navy .d-tile__k { color: rgba(255,255,255,.75); }
.d-tile--navy .d-tile__v { color: #fff; }
.d-tile__up { display: inline-block; margin-top: .6cqw; padding: .35cqw .9cqw; border-radius: 99cqw; background: #17895A; color: #fff; font-size: 1.1cqw; font-weight: 700; }
.d-art { width: 3.2cqw; height: auto; border-radius: .35cqw; flex: none; box-shadow: 0 .2cqw .6cqw rgba(14,27,61,.2); }
.d-chip { flex: none; font-size: 1.05cqw; font-weight: 700; color: #4B5368; background: #EEF1F6; border-radius: 99cqw; padding: .35cqw .9cqw; }
.d-chip--gold { background: #FCF0CC; color: #8A5A00; }
.d-val { font: 700 1.55cqw/1.2 var(--font-head); color: var(--navy); font-variant-numeric: tabular-nums; }
.d-pos--sm { font-size: 1.2cqw; margin-top: .2cqw; }
.h-hero__devices .d-row { padding: .8cqw 0; }
.h-hero__devices .d-card { padding-top: 1cqw; }
.h-math__row--in dd { color: var(--green-2); }
/* Tighter spacing between the features: the next one comes up before the current one scrolls away. */
@media (min-width: 960px) {
  .h-step { min-height: 62vh; padding-block: 24px; }
  .h-step:last-child { min-height: 56vh; }
}
.h-math__row--sub dt { color: var(--text-muted); }
/* A little more room between the features, and a slower, softer change of the phone's screen. */
@media (min-width: 960px) {
  .h-step { min-height: 72vh; padding-block: 32px; }
  .h-step:last-child { min-height: 60vh; }
  .h-story__screens .phone__screen { transform: scale(1.015); transition: opacity 1s cubic-bezier(.45, 0, .25, 1), transform 1.2s cubic-bezier(.45, 0, .25, 1); }
  .h-story__stage, .h-story__glow { transition-duration: 1.1s; transition-timing-function: cubic-bezier(.45, 0, .25, 1); }
  .has-story .h-step { transition: opacity .8s cubic-bezier(.45, 0, .25, 1); }
  .h-story__dots li { transition: background-color .6s, height .6s; }
}
/* The phone stays pinned until the last feature's text sits in the middle of the window: the last step is as tall as
   the pinned stage, so the two let go together. "More in the app" floats at the bottom of the window from the moment
   the last feature comes up (home.js adds .is-shown), then settles into place, so people still see there's more. */
@media (min-width: 960px) {
  .h-step:last-child { min-height: calc(92vh - var(--header-h)); }
  .has-story .h-more { position: sticky; bottom: 24px; z-index: 5; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .has-story .h-more.is-shown { opacity: 1; transform: none; pointer-events: auto; }
}
@media (min-width: 960px) { .h-step:last-child { min-height: calc(100vh - var(--header-h)); } }

/* ---------- Scanner animation: a scan line sweeps the card, then the Wanted list alert slides down ---------- */
.h-scanfx { position: absolute; inset: calc(var(--w, 240px) * .035); border-radius: calc(var(--w, 240px) * .115); overflow: hidden; pointer-events: none; container-type: inline-size; }
.h-story__screens .h-scanfx { inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.h-story__stage[data-stage="1"] .h-scanfx { opacity: 1; }
.h-scanfx__line { position: absolute; left: 14%; right: 14%; top: 22%; height: 3px; border-radius: 3px; background: #3DD68C; box-shadow: 0 0 14px 4px rgba(61,214,140,.55); opacity: 0; }
.h-alert { position: absolute; left: 4%; right: 4%; top: 7%; display: flex; gap: 3.5cqw; align-items: center; padding: 3.5cqw 4cqw; background: #fff; border: .6cqw solid #E9B949; border-radius: 4.5cqw; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.35); transform: translateY(-140%); opacity: 0; }
.h-alert__ico { flex: none; width: 11cqw; height: 11cqw; border-radius: 3cqw; background: #FCF0CC; color: #B07A00; display: flex; align-items: center; justify-content: center; font-size: 6cqw; }
.h-alert__k { font: 700 3.2cqw/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: #8A5A00; }
.h-alert__t { font: 700 4.6cqw/1.25 var(--font-head); color: var(--navy); margin-top: .5cqw; }
.h-alert__b { font-size: 3.3cqw; line-height: 1.35; color: #4B5368; margin-top: .4cqw; }
@media (prefers-reduced-motion: no-preference) {
  .h-step__media .h-scanfx__line, .h-story__stage[data-stage="1"] .h-scanfx__line { animation: h-sweep 6s var(--ease) infinite; }
  .h-step__media .h-alert, .h-story__stage[data-stage="1"] .h-alert { animation: h-alert 6s cubic-bezier(.2,.9,.3,1.1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .h-alert { transform: none; opacity: 1; } }
@keyframes h-sweep {
  0%, 6% { top: 22%; opacity: 0; }
  10% { opacity: 1; }
  30% { top: 62%; opacity: 1; }
  34%, 100% { top: 62%; opacity: 0; }
}
@keyframes h-alert {
  0%, 36% { transform: translateY(-140%); opacity: 0; }
  44% { transform: translateY(0); opacity: 1; }
  88% { transform: translateY(0); opacity: 1; }
  96%, 100% { transform: translateY(-140%); opacity: 0; }
}
@media (min-width: 960px) { .h-story__screens .phone__screen ~ .phone__screen { position: absolute; inset: 0; } }