/* Home page: one screen with fanned story cards and a feature row. Builds on /styles.css (tokens, font). */

.v2 {
  --pad: clamp(1.25rem, 4vw, 3rem);
  --card-w: min(220px, 16vw, 26vh);
  --spread: 0.86;  /* how far side cards sit from the center, in card widths */
  --tilt: 6deg;
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overflow-x: clip;
}

/* Header: just the brand */
.v2-header {
  display: flex; align-items: center; gap: 1rem;
  width: min(1180px, 100% - 2 * var(--pad)); margin-inline: auto; height: clamp(3.5rem, 9vh, 5rem);
}

.v2-main {
  width: min(1180px, 100% - 2 * var(--pad)); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(1.5rem, 6vh, 4rem);
  min-height: 0;
}

/* Hero: text left, cards right */
.v2-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }

.v2 h1 {
  margin: 0;
  font-size: clamp(2.5rem, min(6.4vw, 9.5vh), 5.4rem);
  line-height: 1.02; font-weight: 850; letter-spacing: -0.03em;
}
.v2 h1 > span { display: block; white-space: nowrap; }
.v2 h1 .brand-word { color: var(--headline-accent); }
.v2-subhead { margin: clamp(0.8rem, 2.6vh, 1.4rem) 0 0; font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.25; font-weight: 700; letter-spacing: -0.015em; }
.v2-lede { margin: clamp(0.5rem, 1.4vh, 0.9rem) 0 0; max-width: 31rem; font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.v2-get { margin-top: clamp(1.1rem, 4vh, 2.2rem); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.v2-get small { color: var(--ink-3); font-size: 0.95rem; line-height: 1.4; }
.badge-link { display: inline-block; border-radius: 10px; }
.badge-link img { height: 54px; width: auto; }

/* --- Fanned story cards ------------------------------------------------------------------- */

.fan { position: relative; width: calc(var(--card-w) * (1.25 + 2 * var(--spread))); height: calc(var(--card-w) * 16 / 9 + var(--card-w) * 0.14); }

.story-card {
  --x: 0%; --r: 0deg; --y: 0px;
  position: absolute; left: 50%; bottom: 0;
  width: var(--card-w); aspect-ratio: 9 / 16;
  container-type: inline-size;
  border-radius: calc(var(--card-w) * 0.1);
  padding: calc(var(--card-w) * 0.075) calc(var(--card-w) * 0.08) calc(var(--card-w) * 0.1); /* not cqw: a card can't measure itself */
  display: flex; flex-direction: column; justify-content: space-between;
  color: #231d3a;
  transform-origin: 50% 100%;
  transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.6) inset, 0 30px 60px -28px rgb(50 25 100 / 0.45), 0 12px 24px -14px rgb(50 25 100 / 0.3);
}
.card-left   { --x: calc(var(--spread) * -100%); --r: calc(var(--tilt) * -1); --y: 0px; background: radial-gradient(70% 55% at 20% 15%, #c9f0e6, transparent 70%), radial-gradient(70% 60% at 85% 85%, #c8dcfb, transparent 70%), #dbeef6; }
.card-right  { --x: calc(var(--spread) * 100%); --r: var(--tilt); --y: 0px; background: radial-gradient(70% 55% at 80% 15%, #ffe0c8, transparent 70%), radial-gradient(70% 60% at 15% 85%, #ffd3dc, transparent 70%), #ffe6dc; }
/* The right card's inner edge sits under the center card: start its text clear of the overlap. */
.card-right { padding-left: calc(var(--card-w) * (1.14 - var(--spread))); }
.card-right .bars { margin-left: calc(var(--card-w) * (var(--spread) - 1.06)); } /* bars still span the card */
.card-center { z-index: 1; --y: calc(var(--card-w) * -0.07); background: radial-gradient(75% 55% at 25% 12%, #ddd2ff, transparent 70%), radial-gradient(70% 60% at 85% 80%, #ffd6ec, transparent 70%), #ece4ff; }

.story-card .bars { display: flex; gap: 2.5cqw; }
.story-card .bars i { flex: 1; height: 1.6cqw; min-height: 2px; border-radius: 2cqw; background: rgb(35 29 58 / 0.14); }
.story-card .bars i.on { background: rgb(35 29 58 / 0.62); }

.story-card .chip {
  display: inline-flex; align-items: center; gap: 2.5cqw; align-self: flex-start;
  padding: 2.4cqw 4.5cqw 2.4cqw 3.6cqw; border-radius: 99px;
  background: rgb(255 255 255 / 0.62); font-size: 6.4cqw; font-weight: 700; line-height: 1;
}
.story-card .chip svg { width: 7.2cqw; height: 7.2cqw; fill: currentColor; }
.card-left .chip { color: #0f6f62; }
.card-right .chip { color: #b4231b; }
.card-center .chip { color: #5a37c7; }
.story-card .card-body { display: flex; flex-direction: column; }
.story-card h2 { margin: 5.5cqw 0 0; font-size: 11.6cqw; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.story-card p { margin: 4cqw 0 0; font-size: 7cqw; line-height: 1.35; color: rgb(35 29 58 / 0.74); text-wrap: pretty; }

/* One moment on load: the stack fans out, like the app icon. */
@media (prefers-reduced-motion: no-preference) {
  .story-card { animation: fan-out 900ms cubic-bezier(.2, .85, .25, 1) 200ms both; }
  .card-center { animation-delay: 120ms; }
  @keyframes fan-out {
    from { transform: translateX(-50%) translateY(18px) rotate(0deg); opacity: 0; }
    35% { opacity: 1; }
    to { transform: translateX(calc(-50% + var(--x))) translateY(var(--y)) rotate(var(--r)); opacity: 1; }
  }
}

@media (prefers-color-scheme: dark) {
  .story-card { color: #f3f0fa; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 30px 60px -28px rgb(0 0 0 / 0.7); }
  .card-left   { background: radial-gradient(70% 55% at 20% 15%, #1f5a52, transparent 70%), radial-gradient(70% 60% at 85% 85%, #263e66, transparent 70%), #1c3640; }
  .card-right  { background: radial-gradient(70% 55% at 80% 15%, #6b3c22, transparent 70%), radial-gradient(70% 60% at 15% 85%, #6a2a3c, transparent 70%), #4a2a2a; }
  .card-center { background: radial-gradient(75% 55% at 25% 12%, #4b3794, transparent 70%), radial-gradient(70% 60% at 85% 80%, #6b2a5c, transparent 70%), #33295a; }
  .story-card .bars i { background: rgb(255 255 255 / 0.16); }
  .story-card .bars i.on { background: rgb(255 255 255 / 0.75); }
  .story-card .chip { background: rgb(0 0 0 / 0.28); }
  .card-left .chip { color: #8ce3d2; }
  .card-right .chip { color: #ffab9e; }
  .card-center .chip { color: #c9b8ff; }
  .story-card p { color: rgb(243 240 250 / 0.78); }
}

/* --- Feature row --------------------------------------------------------------------------- */

.v2-features {
  list-style: none; margin: 0; padding: clamp(1rem, 3vh, 1.6rem) 0 0;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2.25rem);
}
.v2-features li { display: flex; align-items: flex-start; gap: 0.8rem; }
.v2-features h3 { margin: 0.1rem 0 0; font-size: 1.02rem; line-height: 1.25; font-weight: 750; letter-spacing: -0.01em; }
.v2-features p { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.45; color: var(--ink-2); }
.tile { flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.tile svg { width: 19px; height: 19px; fill: currentColor; }
.tile-orange { background: #f47a00; }
.tile-purple { background: #8a5cf6; }
.tile-red { background: #ef4444; }
.tile-teal { background: #14b8a6; }

/* --- Footer -------------------------------------------------------------------------------- */

.v2-footer {
  width: min(1180px, 100% - 2 * var(--pad)); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 2rem;
  padding-block: clamp(0.8rem, 2.5vh, 1.5rem); font-size: 0.88rem; color: var(--ink-3);
}
.v2-footer nav { display: flex; gap: clamp(1rem, 2.5vw, 1.6rem); font-size: 0.95rem; }
.v2-footer nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.v2-footer nav a:hover { color: var(--accent-ink); }
.v2-footer p { margin: 0; }

/* --- Narrow windows and phones: stack everything, features become a 2x2 grid of titles -------- */

@media (max-width: 960px) {
  .v2 { --spread: 0.6; --tilt: 8deg; height: 100vh; height: 100dvh; }
  .v2-main { justify-content: flex-start; gap: clamp(1rem, 3vh, 1.75rem); padding-top: clamp(0.25rem, 2vh, 1.25rem); }
  /* The cards take whatever height is left after the text and features, and scale to it. */
  .v2-hero { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: clamp(1rem, 3vh, 1.75rem); }
  .v2 h1 { font-size: clamp(2.4rem, min(11vw, 7.5vh), 4.2rem); }
  .fan { flex: 1; min-height: 0; width: 100%; height: auto; container: fan / size; }
  .story-card { --card-w: min(150px, 34vw, 50cqh); }
  .v2-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem 1rem; padding-top: clamp(0.8rem, 2.4vh, 1.25rem); }
  .v2-features p { display: none; }
  .v2-features li { align-items: center; gap: 0.6rem; }
  .v2-features h3 { margin: 0; font-size: 0.95rem; }
  .tile { width: 30px; height: 30px; border-radius: 8px; }
  .tile svg { width: 17px; height: 17px; }
  .v2-footer { flex-direction: column; align-items: flex-start; font-size: 0.8rem; }
  .v2-footer nav { font-size: 0.9rem; }
}

@media (max-width: 960px) and (min-width: 600px) {
  .v2 { --spread: 0.86; --tilt: 6deg; }
  .story-card { --card-w: min(190px, 24vw, 50cqh); }
  .v2-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .v2-lede { display: none; }
  /* Too small to read three cards: the side ones are just color, the center one keeps chip and title. */
  .card-left .card-body, .card-right .card-body, .card-left .bars, .card-right .bars { visibility: hidden; }
  .story-card p { display: none; }
}

/* Short phones: the cards won't fit, so the description takes their place. */
@media (max-width: 600px) and (max-height: 720px) and (min-height: 600px) {
  .v2-lede { display: block; font-size: 1rem; }
}

/* Too little room left for the cards to be worth showing: leave them out. */
@container fan (max-height: 150px) {
  .story-card { display: none; }
}

/* Landscape phones and tiny windows: let it scroll. */
@media (max-height: 500px) {
  .v2 { height: auto; }
  .fan { display: none; }
}

/* Short desktop windows: tighter rhythm */
@media (min-width: 961px) and (max-height: 760px) {
  .v2-features p { font-size: 0.86rem; }
}