/* ============================================================
   Joyo — joyo.my
   Design system mirrors the App Store screenshot builder:
   ink #151038, sub #544E7A, per-section pastel field + accent.
   ============================================================ */

@font-face {
  font-family: 'Figtree';
  src: url('/assets/figtree.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched stand-in shown while Figtree loads, so the swap does not reflow the page.
   Overrides measured against Arial/Liberation Sans in Chrome: Figtree's a-z advance is
   0.50962em vs Arial's 0.48954em (ratio 104.10%); Figtree ascent/descent are 950/250 per
   1000upm, divided by that ratio. Without this the hero copy changed height on swap and
   pushed the stacked phone shot down — a measured 0.265 CLS on mobile. */
@font-face {
  font-family: 'Figtree Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans'), local('Roboto');
  size-adjust: 104.10%;
  ascent-override: 91.26%;
  descent-override: 24.02%;
  line-gap-override: 0%;
}

:root {
  --ink: #151038;
  --sub: #544E7A;
  --line: rgba(21, 16, 56, .10);

  /* per-section pastel field / accent pairs */
  --hero-field: #EFEAFF;  --hero-accent: #4F35E8;  --hero-ink: #4F35E8;
  --note-field: #FFE7DF;  --note-accent: #F4694A;  --note-ink: #B83C18;
  --track-field: #DFEBFF; --track-accent: #2F6FEA; --track-ink: #1F55BE;
  --sci-field: #FFF1C8;   --sci-accent: #E0A100;   --sci-ink: #8A6200;
  --aff-field: #E7E0FF;   --aff-accent: #7A4BE0;   --aff-ink: #7A4BE0;
  --close-field: #DCF2E7; --close-accent: #12946C; --close-ink: #0B6B4E;

  --radius-card: 32px;
  --radius-pill: 999px;
  --shell: 1180px;
  --pad: clamp(20px, 5vw, 48px);

  --font: 'Figtree', 'Figtree Fallback', ui-sans-serif, system-ui, -apple-system,
          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  font-size: clamp(1.02rem, .55vw + .88rem, 1.16rem);
  line-height: 1.62;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;              /* belt-and-braces: no sideways scroll at 375px */
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 0 0 12px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

:where(a, button):focus-visible {
  outline: 3px solid var(--hero-accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------------- wordmark ---------------- */

.wordmark {
  font-weight: 800;
  letter-spacing: -.05em;
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
  display: inline-block;
}
.wordmark i { font-style: normal; color: var(--hero-accent); }

/* ---------------- site header ---------------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
}
.site-head .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 68px;
}
.head-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  text-decoration: none; font-weight: 700; font-size: .95rem;
  padding: 11px 20px; border-radius: var(--radius-pill);
  transition: transform .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.head-cta:hover { background: var(--hero-accent); transform: translateY(-1px); }

/* ---------------- App Store badge ---------------- */

.badge {
  display: inline-block; line-height: 0;
  border-radius: 10px;
  transition: transform .18s ease, filter .18s ease;
  flex: none;
}
/* Both axes are pinned, never `width: auto`. Apple's badge is 119.66407x40, so at 56px tall
   it is 167.53px wide — half a pixel wider than the 167x56 attribute ratio. Letting the
   intrinsic size decide made the hero CTA flex line re-wrap the moment the SVG arrived,
   which pushed the phone shot down: a measured 0.103-0.265 CLS under throttling. */
.badge img { height: 56px; width: 167.53px; }
.badge:hover { transform: translateY(-2px); filter: brightness(1.08); }
@media (max-width: 420px) { .badge img { height: 50px; width: 149.58px; } }

/* ---------------- eyebrow chip ---------------- */

.eyebrow {
  display: inline-block;
  font-size: .8rem; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .74);
  color: var(--section-ink, var(--hero-ink));
  margin-bottom: 22px;
}

/* ---------------- hero ---------------- */

.hero {
  --section-accent: var(--hero-accent); --section-ink: var(--hero-ink);
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(79, 53, 232, .10), transparent 62%),
    linear-gradient(180deg, var(--hero-field) 0%, #F7F4FF 100%);
  padding: clamp(44px, 7vw, 84px) 0 clamp(20px, 4vw, 40px);
  overflow: hidden;
}
.hero .shell {
  display: grid; gap: clamp(30px, 5vw, 60px);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 4.3rem);
  margin-bottom: 20px;
}
.hero-lede {
  color: var(--sub);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  max-width: 34ch;
  margin-bottom: 32px;
}
.hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero-note { color: var(--sub); font-size: .95rem; max-width: 30ch; }
@media (min-width: 620px) {
  .hero-cta { flex-direction: row; align-items: center; }
  .hero-note { max-width: 22ch; }
}

.shot {
  border-radius: var(--radius-card);
  box-shadow:
    0 2px 6px rgba(21, 16, 56, .05),
    0 18px 40px -12px rgba(21, 16, 56, .18),
    0 44px 90px -30px rgba(21, 16, 56, .22);
  overflow: hidden;
  background: var(--section-field, #fff);
}
.shot img { width: 100%; }

.hero-shot { max-width: 400px; margin-inline: auto; }

@media (min-width: 900px) {
  .hero .shell { grid-template-columns: 1.05fr .95fr; }
  .hero-shot { max-width: 430px; margin-inline: 0 auto; }
}

/* ---------------- feature sections ---------------- */

.feature { padding: clamp(56px, 8vw, 104px) 0; }
.feature .shell {
  display: grid; gap: clamp(30px, 5vw, 66px);
  grid-template-columns: 1fr; align-items: center;
}
.feature h2 {
  font-size: clamp(2.05rem, 4.6vw, 3.15rem);
  margin-bottom: 20px;
}
.feature p + p { margin-top: 18px; }
.feature .body { color: var(--sub); max-width: 46ch; }
.feature .shot { max-width: 380px; margin-inline: auto; }

@media (min-width: 900px) {
  .feature .shell { grid-template-columns: 1fr 1fr; }
  .feature .shot { max-width: 400px; }
  /* alternate: even-numbered features put the device on the left */
  .feature.flip .copy { order: 2; }
  .feature.flip .shot { order: 1; }
}

.f-note   { --section-accent: var(--note-accent); --section-ink: var(--note-ink);  --section-field: var(--note-field);  background: #FFF3EF; }
.f-track  { --section-accent: var(--track-accent); --section-ink: var(--track-ink); --section-field: var(--track-field); background: #EFF5FF; }
.f-sci    { --section-accent: var(--sci-accent); --section-ink: var(--sci-ink);   --section-field: var(--sci-field);   background: #FFF8E3; }
.f-aff    { --section-accent: var(--aff-accent); --section-ink: var(--aff-ink);   --section-field: var(--aff-field);   background: #F3EFFF; }
.f-streak { --section-accent: var(--close-accent); --section-ink: var(--close-ink); --section-field: var(--close-field); background: #EDF8F3; }

/* the "it's a game, not a measurement" clarifier */
.clarify {
  margin-top: 26px;
  padding: 18px 22px;
  border-left: 4px solid var(--section-accent);
  background: rgba(255, 255, 255, .72);
  border-radius: 0 16px 16px 0;
  color: var(--ink);
  font-weight: 600;
  max-width: 46ch;
}

/* small point list under a feature */
.points {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; gap: 12px; max-width: 46ch;
}
.points li {
  position: relative; padding-left: 30px; color: var(--sub);
}
.points li::before {
  content: ''; position: absolute; left: 0; top: .58em;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--section-accent); opacity: .85;
}

/* ---------------- ADHD band ---------------- */

.adhd {
  --section-accent: var(--hero-accent);
  background: var(--ink); color: #fff;
  padding: clamp(60px, 8vw, 110px) 0;
}
.adhd .eyebrow { background: rgba(255, 255, 255, .12); color: #C7B9FF; }
.adhd h2 { font-size: clamp(2.05rem, 4.4vw, 3rem); margin-bottom: 22px; max-width: 20ch; }
.adhd p { color: rgba(255, 255, 255, .76); max-width: 62ch; }
.adhd p + p { margin-top: 18px; }
.adhd .inner { display: grid; gap: clamp(24px, 4vw, 54px); }
@media (min-width: 900px) { .adhd .inner { grid-template-columns: .85fr 1.15fr; align-items: start; } }

/* ---------------- testimonial ---------------- */

.quote {
  background: #fff;
  padding: clamp(56px, 8vw, 104px) 0;
  text-align: center;
}
.quote blockquote {
  margin: 0 auto; max-width: 20ch;
  font-size: clamp(1.7rem, 3.9vw, 2.7rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.16;
  text-wrap: balance;
}
.quote .mark {
  display: block; font-size: 2.6rem; line-height: 1;
  margin-bottom: 18px;
}
.quote cite {
  display: block; margin-top: 26px;
  font-style: normal; font-weight: 600; color: var(--sub); font-size: .98rem;
}

/* ---------------- closing CTA ---------------- */

.closer {
  --section-accent: var(--close-accent); --section-ink: var(--close-ink);
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(18, 148, 108, .12), transparent 60%),
    linear-gradient(180deg, #EDF8F3 0%, var(--close-field) 100%);
  padding: clamp(64px, 9vw, 118px) 0;
  text-align: center;
}
.closer h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 22px; }
.closer p { color: var(--sub); max-width: 50ch; margin-inline: auto; }
.closer .badge { margin-top: 36px; }

/* ---------------- footer ---------------- */

.site-foot {
  background: var(--ink); color: rgba(255, 255, 255, .68);
  padding: clamp(48px, 6vw, 76px) 0 40px;
  font-size: .96rem;
}
.site-foot .wordmark { color: #fff; }
.site-foot .wordmark i { color: #A48BFF; }
.foot-top {
  display: grid; gap: 32px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
}
@media (min-width: 760px) {
  .foot-top { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.foot-tag { margin-top: 14px; max-width: 34ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.foot-links a { color: #fff; text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
.foot-bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between;
  font-size: .9rem; color: rgba(255, 255, 255, .5);
}

/* ---------------- legal pages ---------------- */

.legal {
  padding: clamp(44px, 6vw, 76px) 0 clamp(60px, 8vw, 96px);
  background: linear-gradient(180deg, #F7F4FF 0%, #fff 340px);
}
.legal .shell { max-width: 780px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 14px; }
.legal .updated { color: var(--sub); font-size: .95rem; margin-bottom: 40px; }
.legal .doc { font-size: 1rem; line-height: 1.75; color: #241D50; }
.legal .doc p { margin: 0 0 20px; }
.legal .doc h2 {
  font-size: 1.2rem; letter-spacing: -.01em; line-height: 1.35;
  margin: 40px 0 16px; color: var(--ink);
}
.legal .doc h2:first-child { margin-top: 0; }
.legal .doc h3 {
  font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.45;
  margin: 30px 0 12px; color: var(--ink);
}
.legal .back {
  display: inline-block; margin-bottom: 26px;
  color: var(--hero-accent); font-weight: 700; text-decoration: none;
}
.legal .back:hover { text-decoration: underline; }
.legal .note {
  background: #F7F4FF; border: 1px solid rgba(79, 53, 232, .18);
  border-radius: 16px; padding: 18px 22px; margin-bottom: 36px;
  color: var(--sub); font-size: .95rem;
}