/* Discover page. Loaded only by /discover, so the start page stays as it is. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { overflow-x: clip; }
.navlinks a:not(.btn) { text-decoration: none; }
.navlinks a:not(.btn):hover { color: var(--text); }

/* Colours per pillar (taken from the app) */
.green, .pillar.green { --acc: #5dd87f; }
.purple, .pillar.purple { --acc: #a78bfa; }
.gold, .pillar.gold { --acc: #e8c35d; }
.warm, .pillar.warm { --acc: #c2a57b; }

/* Hero */
.d-hero { padding: 84px 0 56px; text-align: center; }
.d-hero .eyebrow { color: #c2a57b; }
.d-hero h1 { max-width: 11ch; margin: 0 auto 24px; font-size: clamp(46px, 8.5vw, 96px); line-height: .98; letter-spacing: -.04em; }
.d-hero .intro { max-width: 620px; margin: 0 auto 44px; }
.formula { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.formula a { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .25s, transform .25s; }
.formula a:hover { border-color: var(--acc); transform: translateY(-2px); }
.formula svg { width: 20px; height: 20px; color: var(--acc); }
.formula .op { color: var(--muted); font-size: 24px; line-height: 1; }
.formula a.score { border-color: #3a3326; background: linear-gradient(120deg, rgba(194, 165, 123, .22), rgba(194, 165, 123, .06)); }

/* Sticky pillar navigation */
.pnav { position: sticky; top: 0; z-index: 30; border-block: 1px solid var(--line); background: rgba(11, 11, 14, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pnav .wrap { display: flex; justify-content: center; gap: 6px; padding: 10px 0; overflow-x: auto; scrollbar-width: none; }
.pnav .wrap::-webkit-scrollbar { display: none; }
.pnav a { flex: none; padding: 8px 15px; border-radius: 999px; font-size: 14px; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.pnav a:hover { color: var(--text); }
.pnav a.on { background: var(--text); color: #101013; font-weight: 600; }

/* Pillar sections */
.pillar { --acc: #c2a57b; position: relative; padding: 120px 0; scroll-margin-top: 54px; border-top: 1px solid var(--line); }
.pillar::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(46% 42% at 76% 50%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 72%); }
.pillar.flip::before { background: radial-gradient(46% 42% at 24% 50%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 72%); }
.pillar .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 72px; align-items: center; width: min(1340px, 100% - 48px); }
.pillar.flip .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.pillar.flip .copy { order: 2; }
.num { margin-bottom: 14px; font-size: clamp(84px, 11vw, 150px); font-weight: 700; line-height: .9; letter-spacing: -.04em; color: transparent; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 90%, transparent) 0%, color-mix(in srgb, var(--acc) 6%, transparent) 92%); -webkit-background-clip: text; background-clip: text; }
.num.eq { background: none; color: var(--acc); opacity: .9; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .16em; color: var(--acc); }
.copy h2 { margin: 12px 0 18px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.04; letter-spacing: -.03em; }
.copy .lead2 { color: #c9c9d2; font-size: 18px; line-height: 1.65; }
.legend { margin-top: 32px; }
.legend ul { margin: 0; padding: 0; list-style: none; }
.legend h4 { margin: 20px 0 6px 14px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--muted); }
.legend li { display: flex; gap: 14px; margin: 0; padding: 12px 14px; border: 1px solid transparent; border-radius: 14px; transition: background .2s, border-color .2s; cursor: default; }
.legend li:hover, .legend li.on, .legend li:focus-visible { border-color: var(--line); background: rgba(255, 255, 255, .035); outline: none; }
.legend b { display: block; margin-bottom: 2px; color: var(--text); font-size: 16px; }
.legend .d { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.badge { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--acc); color: #101013; font-size: 13px; font-weight: 700; }

/* Full-size phones with numbered callouts */
.stage { display: flex; justify-content: center; align-items: flex-start; gap: 28px; }
.stage .phone + .phone { margin-top: 72px; }
.phone { --w: 380px; position: relative; flex: 0 1 var(--w); width: var(--w); min-width: 0; aspect-ratio: 1206 / 2622; padding: calc(var(--w) * .028); border-radius: calc(var(--w) * .165); background: linear-gradient(155deg, #34343d 0%, #121216 38%, #1d1d23 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 100px -35px rgba(0, 0, 0, .9), 0 0 100px -35px var(--acc); }
.shot { position: relative; width: 100%; height: 100%; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--w) * .14); background: #0b0b0e; }
.w-300 { --w: 300px; }
.w-360 { --w: 360px; }

.pin { position: absolute; z-index: 3; left: var(--x); top: var(--y); display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--acc); color: #101013; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .55), 0 0 0 3px rgba(11, 11, 14, .6); transition: transform .25s, opacity .25s; }
.pin::after { content: ""; position: absolute; inset: -6px; border: 1.5px solid var(--acc); border-radius: 50%; opacity: 0; animation: ping 2.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.55); opacity: 0; } }
.stage.hovering .pin { opacity: .3; }
.stage.hovering .pin.on { opacity: 1; transform: scale(1.3); }

/* Pin positions, as a percentage of each screenshot */
.p-h1 { --x: 90%; --y: 22%; } .p-h2 { --x: 5%; --y: 39.5%; } .p-h3 { --x: 44%; --y: 53.5%; }
.p-g1 { --x: 79%; --y: 22%; } .p-g2 { --x: 62%; --y: 45%; } .p-g3 { --x: 74%; --y: 37.5%; }
.p-s1 { --x: 46%; --y: 40.5%; } .p-s2 { --x: 50%; --y: 48.5%; } .p-s3 { --x: 92%; --y: 58.5%; }
.p-y1 { --x: 40%; --y: 32.4%; } .p-y2 { --x: 52%; --y: 37.6%; } .p-y3 { --x: 54%; --y: 58%; }
.p-j1 { --x: 92%; --y: 19.5%; } .p-j2 { --x: 47%; --y: 27.2%; } .p-j3 { --x: 92%; --y: 36.5%; }
.p-m1 { --x: 36%; --y: 23%; } .p-m2 { --x: 50%; --y: 35.8%; }
.p-o1 { --x: 60%; --y: 40%; } .p-o2 { --x: 87%; --y: 36.5%; } .p-o3 { --x: 64%; --y: 47.5%; }
.p-i1 { --x: 45%; --y: 21.5%; } .p-i2 { --x: 52%; --y: 40%; } .p-i3 { --x: 92%; --y: 73.5%; }

/* More screens */
.more { scroll-margin-top: 54px; padding: 110px 0 100px; border-top: 1px solid var(--line); text-align: center; }
.more h2 { margin-bottom: 10px; font-size: clamp(32px, 4.4vw, 50px); letter-spacing: -.03em; }
.more .sub { max-width: 560px; margin: 0 auto 64px; }
.trio { display: flex; justify-content: center; align-items: flex-start; gap: 44px; }
.trio figure { margin: 0; flex: 0 1 300px; min-width: 0; }
.trio .phone { --w: 300px; width: 100%; }
.trio figcaption { margin-top: 28px; }
.trio figcaption b { display: block; font-size: 19px; }
.trio figcaption span { color: var(--muted); font-size: 15px; }

/* Closing */
.d-cta { padding: 96px 0 32px; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(60% 90% at 50% 0%, rgba(194, 165, 123, .14), transparent 72%); }
.d-cta h2 { margin-bottom: 8px; }
.d-cta .signup { margin-inline: auto; }
.d-cta .fine { max-width: 520px; margin-inline: auto; text-align: left; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 40px; }
.chip { padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .02); color: var(--muted); font-size: 13px; }
.chip b { color: var(--text); font-weight: 600; }

/* Fade in as sections come into view (only when scripting is available) */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .pillar { padding: 80px 0; }
  .pillar .wrap, .pillar.flip .wrap { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .pillar.flip .copy { order: 0; }
  /* small screens: heading, then the screens, then the numbered list */
  .pillar .wrap, .pillar.flip .wrap { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
  .copy { display: contents; }
  .stage { order: 1; margin: 40px 0 8px; justify-content: center; }
  .legend { order: 2; margin-top: 24px; }
  .pillar::before, .pillar.flip::before { background: radial-gradient(60% 30% at 50% 62%, color-mix(in srgb, var(--acc) 15%, transparent), transparent 72%); }
  .phone { --w: 300px; }
  .trio { flex-wrap: wrap; gap: 56px 24px; }
  .trio figure { flex-basis: 260px; }
}
@media (max-width: 560px) {
  .d-hero { padding-top: 56px; }
  .stage { gap: 12px; }
  .stage .phone + .phone { margin-top: 40px; }
  .pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
  .pnav .wrap { justify-content: flex-start; }
  .formula a { padding: 11px 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pin::after { animation: none; }
}