/* =============================================================================
   shero.css - the STATIC screenshot hero shared by all three pages.

   One hero system: a copy column (eyebrow, headline, lede, actions, trust) and
   a phone cluster of three real app screenshots, one in front and two behind it.
   No canvas, no timeline, no JS: the composition is pure CSS transforms.

   Every colour comes from the app.css tokens, so both themes work with one
   small override block at the end. Scoped under .shero.
   ========================================================================== */

.shero {
  /* dark is the token default; the light block at the end of this file overrides */
  --sh-eyebrow: #7fd0ff;
  --sh-grid: rgba(122, 152, 214, 0.07);
  --sh-wash-a: rgba(92, 193, 246, 0.34);
  --sh-wash-b: rgba(123, 98, 232, 0.28);
  --sh-wash-c: rgba(243, 26, 145, 0.22);
  --sh-shadow-front: 0 42px 70px rgba(4, 8, 20, 0.62);
  --sh-shadow-back: 0 26px 48px rgba(4, 8, 20, 0.5);

  /* cluster geometry, overridden per breakpoint */
  --pc-front: 46%;   /* front phone width, share of the cluster box */
  --pc-back: 37%;    /* the two phones behind it */
  --pc-off: 62%;     /* how far each back phone sits out, share of its own width */
  --pc-lift: 14%;    /* how far the back phones ride above centre */

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 54px);
  padding: clamp(34px, 4.4vw, 66px) 0 clamp(30px, 3.6vw, 48px);
  isolation: isolate;
  overflow: hidden;
}

.shero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(36px, 4.6vw, 76px);
}

/* ambient wash + faint map grid behind the hero */
.sh-atmos { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.sh-bloom { position: absolute; border-radius: 999px; filter: blur(12px); }
.sh-bloom.is-blue { top: -220px; right: 3%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(92, 193, 246, 0.2), transparent 68%); }
.sh-bloom.is-pink { right: 26%; bottom: -340px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(243, 26, 145, 0.14), transparent 70%); }
.sh-grid {
  position: absolute; inset: 0; opacity: 0.6;
  background-image:
    linear-gradient(90deg, var(--sh-grid) 1px, transparent 1px),
    linear-gradient(var(--sh-grid) 1px, transparent 1px);
  background-size: 112px 112px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 66%, transparent 100%);
}

/* ---------------------------------------------------------------- copy ----- */
.sh-copy {
  position: relative; z-index: 5; max-width: 660px;
  animation: sh-rise 700ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}

.sh-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 24px;
  color: var(--sh-eyebrow); font-size: 12px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase;
}
/* Old pulsing eyebrow dot removed 2026-08-06 (signal-system-v2): the hero eyebrow
   now uses the static .i3s-notch (N1). See 3rdi-signal-system-v2.css. */

.shero h1.sh-title {
  max-width: 13ch; margin: 0; color: var(--text);
  font-family: var(--sans);
  font-size: clamp(56px, 6.2vw, 96px); font-weight: 620;
  letter-spacing: -0.066em; line-height: 0.94; text-wrap: balance;
}
.sh-title .grad {
  background: linear-gradient(104deg, #5cc1f6 0%, #4979ef 46%, #f31a91 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  /* The tight line-height makes the gradient paint box shorter than the glyphs,
     which clipped descenders and the period on WebKit. Cloning the box
     decoration and padding the block axis extends the paint box per line without
     changing line spacing. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding-block: 0.32em;
  /* The tight negative letter-spacing lets the last glyph's ink spill past its
     advance box, so background-clip:text clipped the right edge of line-ending
     glyphs (the "t" in "it", the period in "home."). Pad the inline-end of each
     cloned line fragment to extend the paint box; it sits at the line break so
     it adds no visible gap. */
  padding-inline-end: 0.18em;
}

.sh-desc {
  max-width: 40rem; margin: 29px 0 0; color: var(--dim);
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.58; letter-spacing: -0.01em;
}

.sh-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.sh-store, .sh-ghost {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; border-radius: 999px;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.sh-store {
  gap: 11px; min-width: 190px; padding: 7px 24px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: linear-gradient(108deg, #5cc1f6, #4979ef 54%, #f31a91);
  /* Fill the gradient to the true border box so the rounded caps do not clip it. */
  background-origin: border-box;
  box-shadow: 0 15px 34px rgba(60, 110, 210, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #fff;
}
.sh-store:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(60, 110, 210, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
/* Same gradient pill without the store lockup, for pages whose primary action
   is not the App Store. */
.sh-store--plain { min-width: 0; padding: 0 30px; font-size: 15px; font-weight: 650; }
.sh-store svg { width: 25px; height: 25px; flex: 0 0 auto; }
/* line-height 1.05 visually sheared the "App Store" descenders on some phones
   (client, 2026-08-07) and the 9px lead line was near-illegible; both breathe. */
.sh-store span { display: flex; flex-direction: column; align-items: flex-start; font-size: 17px; font-weight: 650; line-height: 1.14; }
.sh-store small { margin-bottom: 1px; font-size: 10px; font-weight: 550; letter-spacing: 0.02em; line-height: 1.2; }

.sh-ghost {
  gap: 10px; padding: 0 24px;
  border: 1px solid var(--line-hi); background: var(--panel);
  box-shadow: 0 12px 28px rgba(10, 15, 30, 0.14);
  color: var(--text); font-size: 15px; font-weight: 650;
}
.sh-ghost:hover { transform: translateY(-3px); border-color: var(--sky); }


/* ------------------------------------------------------- the phone cluster -- */
.sh-stage {
  position: relative; z-index: 4;
  display: grid; place-items: center;
  animation: sh-cluster-in 900ms 90ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
}
/* The App Store wash: one soft blue to violet to pink field the phones sit on. */
.sh-stage-glow {
  position: absolute; z-index: 0; inset: 4% -6% 6%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side at 38% 34%, var(--sh-wash-a), transparent 72%),
    radial-gradient(closest-side at 68% 52%, var(--sh-wash-b), transparent 70%),
    radial-gradient(closest-side at 52% 82%, var(--sh-wash-c), transparent 72%);
  filter: blur(16px);
  pointer-events: none;
}

.pcluster {
  position: relative; z-index: 1;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1.08;
}
/* All three share one grid cell; only transforms separate them, so the cluster
   never reflows and no phone can push the page wide. */
.pshot {
  grid-area: 1 / 1;
  display: block;
  height: auto;
  align-self: center;
  justify-self: center;
  transition: transform 420ms cubic-bezier(0.2, 0.82, 0.2, 1);
}
.pshot--front {
  z-index: 3;
  width: var(--pc-front);
  transform: rotate(-3deg);
  filter: drop-shadow(var(--sh-shadow-front));
}
.pshot--left, .pshot--right {
  width: var(--pc-back);
  filter: drop-shadow(var(--sh-shadow-back));
}
.pshot--left  { z-index: 1; transform: translate(calc(var(--pc-off) * -1), calc(var(--pc-lift) * -1)) rotate(-12deg); }
.pshot--right { z-index: 2; transform: translate(var(--pc-off), calc(var(--pc-lift) * -0.72)) rotate(11deg); }

@media (hover: hover) {
  .pcluster:hover .pshot--front { transform: rotate(-3deg) translateY(-10px); }
  .pcluster:hover .pshot--left  { transform: translate(calc(var(--pc-off) * -1.04), calc(var(--pc-lift) * -1.1)) rotate(-13deg); }
  .pcluster:hover .pshot--right { transform: translate(calc(var(--pc-off) * 1.04), calc(var(--pc-lift) * -0.82)) rotate(12deg); }
}

/* Capability rail removed 2026-08-06: replaced by the elevated glass feature
   rail (public/assets/css/feature-rail.css, .ti-feature-rail-wrap) that now sits
   between the hero and the "Safety made social." section. */

/* ------------------------------------------------------------- keyframes --- */
@keyframes sh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sh-cluster-in { from { opacity: 0; transform: translateY(22px) scale(0.985); } to { opacity: 1; transform: none; } }
 80%, 100% { opacity: 0; transform: scale(1.4); } }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1120px) {
  .shero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: 40px; }
  .shero h1.sh-title { font-size: clamp(52px, 6.9vw, 78px); }
}

@media (max-width: 900px) {
  /* Stacked and copy first, the same pattern the site uses on every hero. */
  .shero { gap: 40px; padding-top: 40px; }
  .shero-in { display: flex; flex-direction: column; gap: 42px; }
  .sh-copy { max-width: 720px; text-align: center; align-self: center; }
  .sh-eyebrow, .sh-actions { justify-content: center; }
  .shero h1.sh-title { max-width: 720px; margin-inline: auto; font-size: clamp(54px, 10.6vw, 84px); }
  .sh-desc { margin-inline: auto; }
  .sh-stage { align-self: center; width: min(92%, 560px); }
  .sh-grid { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 100%); }
}

@media (max-width: 620px) {
  .sh-eyebrow { margin-bottom: 19px; font-size: 10px; letter-spacing: 0.13em; }
  .shero h1.sh-title { font-size: clamp(46px, 13.4vw, 70px); line-height: 0.96; }
  .sh-desc { margin-top: 22px; font-size: 16px; line-height: 1.55; }
  .sh-actions { flex-direction: column; align-items: stretch; }
  .sh-store, .sh-ghost { width: 100%; }
  .sh-stage { width: 100%; }
  .shero {
    /* A bigger front phone and a tighter spread: at handset width the cluster
       has to read as one object, not three small ones. */
    --pc-front: 52%;
    --pc-back: 40%;
    --pc-off: 54%;
    --pc-lift: 13%;
  }
  .pcluster { aspect-ratio: 1 / 1.16; }
}

@media (max-width: 390px) {
  .shero h1.sh-title { font-size: 45px; }
}

@media (prefers-reduced-motion: reduce) {
  .shero *, .shero *::before, .shero *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ light theme -- */
html[data-theme="light"] .shero {
  --sh-eyebrow: #2f77d6;
  --sh-grid: rgba(112, 144, 198, 0.08);
  --sh-wash-a: rgba(92, 193, 246, 0.3);
  --sh-wash-b: rgba(123, 98, 232, 0.18);
  --sh-wash-c: rgba(243, 26, 145, 0.16);
  --sh-shadow-front: 0 40px 64px rgba(30, 48, 96, 0.26);
  --sh-shadow-back: 0 24px 44px rgba(30, 48, 96, 0.2);
}
html[data-theme="light"] .sh-ghost { box-shadow: var(--soft-shadow); }

/* Large monitors: the hero rides the wider column (see app.css note). */
@media (min-width: 1720px) {
  .shero h1.sh-title { font-size: clamp(56px, 6.2vw, 106px); }
  .sh-desc { max-width: 44rem; font-size: clamp(17px, 1.35vw, 22px); }
}