/* App page: FORGE, the training app — paper and white surfaces, the app's solid pink (--lime is the pink), real screens in phone frames. */

/* The kit's Ride-gradient "active" states use the app's solid pink on this page. */
[data-page="app"] .rail__line > i { background: linear-gradient(90deg, var(--lime-ink), var(--lime)); }
@media (max-width: 899px) { [data-page="app"] .rail__line > i { background: linear-gradient(180deg, var(--lime-ink), var(--lime)); } }
[data-page="app"] .rail__step.is-on .rail__dot { background: var(--lime); border-color: var(--lime); color: #fff; box-shadow: 0 0 0 7px rgba(255, 46, 120, .25); }
[data-page="app"] .feat:hover { border-color: color-mix(in srgb, var(--lime-ink) 45%, transparent); }
[data-page="app"] .s-ink .note { border-color: var(--lime); }
[data-page="app"] .s-ink .feat:hover { border-color: rgba(255, 46, 120, .4); }

/* ── Hero ─────────────────────────────────────────── */
.app-hero .topo { opacity: .08; }
@media (min-width: 1000px) { .app-hero .phero__grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); align-items: center; } }
.app-hero__copy { gap: 26px; }
.app-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 0; width: 100%; max-width: 640px; border-top: 1px solid var(--line); }
.app-hero__facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 16px 0 0; }
.app-hero__facts > div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.app-hero__facts dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); line-height: 1.35; }
.app-hero__facts dd { margin: 0; font-size: clamp(30px, 2.6vw, 42px); }
.app-hero__visual { position: relative; display: grid; place-items: center; min-height: 640px; }
.app-hero__front { width: min(300px, 70vw); z-index: 2; }
.app-hero__back { position: absolute; left: 50%; top: 50%; width: 230px; transform: translate(-112%, -44%) rotate(-9deg); opacity: .96; z-index: 1; }
.app-float-1 { right: 0; top: 14%; }
.app-float-2 { left: 2%; bottom: 12%; animation-delay: -3s; }
@media (max-width: 999px) {
  .app-hero__visual { min-height: 0; padding: 10px 0 20px; }
  .app-hero__back { transform: translate(-96%, -46%) rotate(-9deg); width: min(200px, 46vw); }
}
@media (max-width: 600px) {
  .app-hero__facts { grid-template-columns: 1fr 1fr; }
  .app-hero__facts > div { padding: 16px 12px 14px 0; }
  .app-hero__facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .app-hero__facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .app-hero__front { width: min(250px, 64vw); }
  .app-hero__back { display: none; }
  .app-hero__visual .phone-float { font-size: 12.5px; padding: 9px 12px 9px 9px; gap: 9px; }
  .app-hero__visual .phone-float i { width: 32px; height: 32px; font-size: 13px; }
  .app-float-1 { top: 8%; right: 0; }
  .app-float-2 { bottom: 8%; left: 0; }
}

/* ── Daily loop ───────────────────────────────────── */
.app-ui { justify-self: start; font-family: var(--mono); font-size: 12px; line-height: 1.45; padding: 9px 13px; border-radius: 12px; border: 1px dashed var(--line); background: var(--paper); color: var(--mute); }
.app-ui b { color: var(--lime-ink); font-weight: 500; }

/* ── Story floats ─────────────────────────────────── */
.app-sfloat-1 { left: 0; top: 20%; }
.app-sfloat-2 { right: 0; bottom: 20%; animation-delay: -3s; }

/* ── The five tabs: a lineup of real screens ───────── */
.app-lineup { display: grid; gap: clamp(26px, 4vh, 40px); margin-top: clamp(50px, 8vh, 90px); padding-top: clamp(30px, 5vh, 48px); border-top: 1px solid var(--line); }
.app-lineup__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 30px; }
.app-lineup__head p { font-size: 15px; }
.app-lineup__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 2.2vw, 34px); align-items: end; }
.app-lineup__item { margin: 0; display: grid; gap: 18px; justify-items: center; text-align: center; }
.app-lineup__item:nth-child(2), .app-lineup__item:nth-child(4) { margin-bottom: 34px; }
.app-lineup__item:nth-child(3) { margin-bottom: 68px; }
.app-lineup__item .phone { width: 100%; max-width: 250px; border-radius: 38px; padding: 7px; box-shadow: 0 50px 70px -40px rgba(7, 9, 11, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.app-lineup__item .phone__screen { border-radius: 31px; }
.app-lineup__item figcaption { display: grid; gap: 6px; justify-items: center; }
.app-lineup__item figcaption b { font-size: 17px; letter-spacing: -.02em; padding: 3px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.app-lineup__item figcaption span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.app-lineup__item--ride figcaption b { background: var(--ride); border-color: transparent; color: #fff; }
@media (max-width: 899px) {
  .app-lineup__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 34px; gap: 16px; }
  .app-lineup__row::-webkit-scrollbar { display: none; }
  .app-lineup__item { flex: 0 0 min(46vw, 230px); scroll-snap-align: center; }
  .app-lineup__item:nth-child(n) { margin-bottom: 0; }
  .app-lineup__item .phone { border-radius: 30px; padding: 6px; }
  .app-lineup__item .phone__screen { border-radius: 25px; }
}

/* ── Why it adapts ────────────────────────────────── */
.app-adapt::before { content: ""; position: absolute; left: -10%; top: 30%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(255, 46, 120, .09), transparent); pointer-events: none; }
.app-adapt__grid { display: grid; gap: 56px; }
@media (min-width: 1000px) { .app-adapt__grid { grid-template-columns: minmax(0, 470px) minmax(0, 1fr); gap: clamp(50px, 6vw, 96px); align-items: center; } }
.app-adapt__phones { position: relative; display: grid; place-items: center; padding: 30px 0 40px; }
.app-adapt__front { width: min(300px, 62vw); z-index: 2; transform: translateX(15%); }
.app-adapt__back { position: absolute; left: 0; top: 50%; width: min(228px, 46vw); transform: translateY(-44%) rotate(-7deg); z-index: 1; opacity: .9; }
.app-adapt__tag { position: absolute; z-index: 3; padding: 9px 14px; border-radius: 999px; background: #fff; color: var(--on-paper); font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .6); white-space: nowrap; }
.app-adapt__tag--a { right: 0; top: 16%; background: var(--lime); color: #fff; }
.app-adapt__tag--b { left: 2%; bottom: 12%; }
.app-adapt__col { display: grid; gap: 18px; }
.app-panel { display: grid; gap: 18px; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r); border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.app-verdicts { display: grid; gap: 12px; }
@media (min-width: 700px) { .app-verdicts { grid-template-columns: repeat(3, 1fr); } }
.app-verdict { position: relative; display: grid; gap: 8px; align-content: start; padding: 18px 18px 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .04); overflow: hidden; }
.app-verdict::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--c); }
.app-verdict b { font-size: 22px; letter-spacing: -.03em; color: var(--c); font-variation-settings: "wdth" 86; }
.app-verdict span { color: var(--mute); font-size: 14.5px; line-height: 1.5; }
.app-verdict--go { --c: var(--lime); } .app-verdict--mid { --c: var(--gold); } .app-verdict--low { --c: var(--orange); }
/* ── Tabs deep dive ───────────────────────────────── */
.app-tabs .tabs { margin-bottom: clamp(36px, 6vh, 64px); }
.app-tab { display: grid; gap: 44px; }
@media (min-width: 1000px) { .app-tab { grid-template-columns: 520px minmax(0, 1fr); gap: clamp(50px, 6vw, 96px); align-items: start; } }
.app-tab__phones { display: flex; justify-content: center; gap: 18px; padding-bottom: 60px; }
.app-tab__phones .phone:nth-child(2) { transform: translateY(60px); }
.app-tab__phones--one { padding-bottom: 0; }
@media (max-width: 600px) {
  .app-tab__phones { gap: 12px; padding-bottom: 36px; }
  .app-tab__phones .phone--sm { width: 43vw; border-radius: 30px; padding: 6px; }
  .app-tab__phones .phone--sm .phone__screen { border-radius: 25px; }
  .app-tab__phones .phone:nth-child(2) { transform: translateY(36px); }
  .app-tab__phones--one .phone--sm { width: 58vw; }
}
.app-tab__body { display: grid; gap: 24px; align-content: start; }
.app-tab__body > p.mute { font-size: 17px; max-width: 60ch; }
.app-facts { margin: 0; display: grid; border-bottom: 1px solid var(--line); }
.app-facts > div { display: grid; gap: 6px 24px; padding: 16px 0; border-top: 1px solid var(--line); }
@media (min-width: 600px) { .app-facts > div { grid-template-columns: 130px minmax(0, 1fr); } }
.app-facts dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-ink); padding-top: 3px; }
.app-facts dd { margin: 0; color: var(--mute); font-size: 15.5px; }
.app-xprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; color: var(--mute); font-size: 15px; }
.app-xprow span:not(.chip) + .chip { margin-left: 10px; }
.app-sports { display: grid; gap: 0 28px; }
@media (min-width: 600px) { .app-sports { grid-template-columns: 1fr 1fr; } }
.app-sports > div { padding: 14px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.app-sports h4 { font-size: 15.5px; letter-spacing: -.01em; }
.app-sports p { color: var(--mute); font-size: 14.5px; }
/* ── Real life: a bento of real screens ───────────── */
.app-thumb--pink { background: linear-gradient(155deg, #ff5f9b, #d4145c 72%); }
.app-thumb--paper { background: var(--paper-2); }
.app-thumb--duo { display: flex; justify-content: center; align-items: flex-start; gap: 12px; }
.app-thumb--duo img { width: 40%; }
.app-bento { display: grid; gap: 18px; }
@media (min-width: 700px) { .app-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-bento__wide, .app-bento .app-quests { grid-column: 1 / -1; } }
@media (min-width: 1000px) { .app-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .app-bento__wide { grid-column: span 2; } }
.app-bento__wide { grid-template-columns: minmax(0, 1fr); }
.app-bento__txt { display: grid; gap: 16px; align-content: center; justify-items: start; }
.app-bento__txt p { max-width: 46ch; }
.app-bento__shot { order: -1; }
@media (min-width: 700px) {
  .app-bento__wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 3vw, 44px); }
  .app-bento__shot { order: 0; aspect-ratio: auto; min-height: 340px; margin: -6px; }
  .app-bento__shot img { width: min(250px, 56%); }
}
.app-toggles { display: flex; gap: 10px; margin-top: 4px; }
.app-toggles span { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.app-toggles i { font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; padding: 5px 11px; border-radius: 999px; color: var(--faint); }
.app-toggles i.on { background: var(--on-paper); color: var(--paper); }
.app-bento .app-quests { position: relative; isolation: isolate; display: grid; gap: 30px; padding: clamp(28px, 3.6vw, 56px) clamp(28px, 3.6vw, 56px) 0; background: var(--ink); color: var(--on-ink); border-color: transparent; --line: var(--ink-line); --mute: var(--on-ink-2); --faint: var(--on-ink-3); }
.app-quests::before { content: ""; position: absolute; right: -10%; bottom: -40%; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(255, 46, 120, .3), transparent); z-index: -1; pointer-events: none; }
@media (min-width: 900px) { .app-bento .app-quests { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; } }
.app-quests__txt { display: grid; gap: 18px; align-content: center; justify-items: start; padding-bottom: clamp(28px, 3.6vw, 56px); }
.app-quests__txt p { color: var(--mute); max-width: 48ch; }
.app-quests__phones { display: flex; justify-content: center; align-items: flex-start; gap: 18px; height: clamp(300px, 34vw, 420px); overflow: hidden; padding-top: 6px; }
.app-quests__phones .phone { width: min(230px, 40vw); }
.app-quests__phones .phone:first-child { margin-top: 56px; }

/* ── Social ───────────────────────────────────────── */
.app-social__grid { align-items: center; }
.app-social__phones { position: relative; display: grid; place-items: center; padding: 20px 0 50px; }
.app-social__front { width: min(320px, 66vw); z-index: 2; transform: translateX(-13%); }
.app-social__back { position: absolute; right: 0; top: 50%; width: min(236px, 48vw); transform: translateY(-44%) rotate(7deg); opacity: .85; }
.app-social__chip { position: absolute; left: 2%; bottom: 16%; z-index: 3; }
.app-social::before { content: ""; position: absolute; right: -10%; top: 10%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(255, 46, 120, .09), transparent); pointer-events: none; }
.app-rules { list-style: none; margin: 0; padding: 0; display: grid; border-bottom: 1px solid var(--line); }
.app-rules li { padding: 24px 0; border-top: 1px solid var(--line); }
.app-rules li > div { display: grid; gap: 8px; }
.app-rules h3::before { content: ""; display: inline-block; vertical-align: middle; width: 20px; height: 3px; margin: -4px 14px 0 0; background: var(--lime); transform: skewX(var(--skew)); }
.app-rules p { color: var(--mute); font-size: 15.5px; }

/* ── XP ladder on white + XP values ───────────────── */
.app-xp .ladder__t { background: var(--paper); }
.app-xp .ladder__t img { filter: drop-shadow(0 14px 18px rgba(7, 9, 11, .22)); }
.app-xpgrid { display: grid; gap: 18px; margin-top: clamp(40px, 7vh, 72px); }
.app-xpgrid dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border-top: 1px solid var(--line); }
.app-xpgrid dl > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 18px 14px 6px 0; }
.app-xpgrid dt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); line-height: 1.35; }
.app-xpgrid dd { margin: 0; font-size: clamp(34px, 3vw, 48px); color: var(--lime-ink); }
.app-xpgrid dd::after { content: " XP"; font-size: .36em; letter-spacing: 0; color: var(--faint); }

/* ── Availability: a pink panel of phones + the list ── */
.app-where { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1000px) { .app-where { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(50px, 6vw, 100px); } }
.app-where__phones { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 22px); height: clamp(420px, 60vh, 580px); padding-top: clamp(36px, 6vh, 60px); border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(155deg, #ff5f9b, #d4145c 72%); }
.app-where__phones .phone { width: min(240px, 38vw); }
.app-where__phones .phone:first-child { margin-top: 60px; }
.app-where__list { display: grid; border-top: 1px solid var(--line); }
.app-where__row { display: grid; gap: 10px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.app-where__name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.app-where__name .h-2 { font-size: clamp(30px, 3vw, 46px); }
.app-where__row p { color: var(--mute); max-width: 52ch; }
.app-where__actions { margin-top: 30px; }

/* ── The other product: FORGE Ride (ink) ──────────── */
.app-bridge { align-items: center; }
.app-bridge__art { position: relative; padding: 0 clamp(36px, 5vw, 80px) 80px 0; }
.app-bridge__screen { margin: 0; }
.app-bridge__phone { position: absolute; right: 0; bottom: 0; z-index: 2; width: min(170px, 34vw); }
/* ── Closing band (app pink) ──────────────────────── */
.app-band .band__word { color: rgba(11, 18, 14, .07); }
.app-band .btn--line { border-color: rgba(11, 18, 14, .35); }
.app-band .eyebrow { color: var(--on-paper); }
.app-band .eyebrow::before { background: var(--on-paper); }