/* PeakLess landing — hand-designed, rendered from landing/content.json (LANDING-BILINGUAL-SSOT).
   No script, no external host. The type is the same Inter the app ships (self-hosted woff2, SIL OFL
   1.1 — landing/assets/fonts/OFL.txt), so a visitor sees the product's own lettering. Colour tokens
   at the top; every text colour below reaches 4.5:1 against its background in both themes:
   --amber is a fill only, text uses --amber-text (#8f3f0b on paper 6.0:1; #e7884b on dark 6.3:1). */
/* Fallback face declared FIRST, same family name, so the Inter faces below override it once they
   load. It is the system font scaled to Inter's advance widths (measured on the shipped copy:
   Inter = 0.91 × Segoe UI / Arial). Without it, first paint uses the wider system font, the copy
   wraps differently, and the woff2 swap re-flows the hero — CLS 0.065 at 320px. */
@font-face {
  font-family: 'PeakLess Sans';
  src: local('Segoe UI'), local('Helvetica Neue'), local('Arial');
  font-weight: 400;
  font-style: normal;
  size-adjust: 91%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PeakLess Sans';
  src: url('assets/fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PeakLess Sans';
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-0130, U+0134-0139, U+013F, U+0141-0148, U+014A-014C, U+0154-0156, U+0158-0159, U+015B-015C, U+0160-0161, U+0163, U+0165-0166, U+0168-0169, U+016B, U+016D, U+016F, U+0171-0174, U+0176-0177, U+0178, U+0179, U+017B-017C, U+017E-0180, U+0183, U+0185-0186, U+018B-018C, U+018E-0190, U+0192, U+0194-0195, U+0197-0199, U+019C, U+019E, U+019F, U+01A1-01A3, U+01A5-01A6, U+01A8-01AC, U+01AE, U+01AF, U+01B0-01B1, U+01B3-01B4, U+01B6-01B7, U+01B9-01BA, U+01C0-01C1, U+01CD-01D1, U+01D3-01D4, U+01D6-01D7, U+01D9-01DB, U+01DE-01DF, U+01E1, U+01E3-01E4, U+01E6-01E8, U+01EA-01EB, U+01ED-01EE, U+01F0-01F1, U+01F4-01F5, U+01F7-01F8, U+01FA-01FB, U+0200-0201, U+0202-0203, U+0204-0205, U+0206-0207, U+0208-0209, U+020A-020B, U+020C-020D, U+020E-020F, U+0210-0211, U+0212-0213, U+0214-0215, U+0216-0217, U+0218-0219, U+021A-021B, U+021C-021D, U+021E-021F, U+0220-0221, U+0222-0223, U+0224-0225, U+0226-0227, U+0228-0229, U+022A-022B, U+022C-022D, U+022E-022F, U+0230-0231, U+0232-0233, U+0234-0235, U+0236-0237, U+0238-0239, U+023A-023B, U+023C-023D, U+023E-023F, U+0240-0241, U+0242-0243, U+0246-0247, U+0248-0249, U+024A-024B, U+024C-024D, U+024E-024F, U+0254-0255, U+0261-0263, U+0265, U+0268, U+0269, U+026B, U+026C, U+026F, U+0270, U+0273, U+0275, U+0277, U+0279, U+027B, U+027C, U+027E, U+0283, U+0287-0288, U+0290-0291, U+0293, U+0294, U+0296, U+0297, U+0298, U+029C, U+029F, U+02A4-02A5, U+02AB-02AC, U+02B0, U+02B1, U+02B6, U+02B8-02B9, U+02BB-02BC, U+02C6-02C7, U+02D9, U+02DC, U+02EE, U+0300-0301, U+030C;
}

:root {
  --paper: #f4f5f6;
  --paper-2: #eef0f2;
  --card: #ffffff;
  --ink: #0f1216;
  --muted: #5a6470;
  --line: #d8dbe2;
  --line-soft: #e6e9ee;
  --amber: #b45309;
  --amber-text: #8f3f0b;
  --amber-soft: #f3e0cd;
  --green: #0e7350;
  --green-soft: #dce9e3;
  --accent: #14161a;
  --on-accent: #f4f5f6;
  --shadow: 0 12px 30px rgba(15, 18, 22, 0.10);
  --shadow-soft: 0 4px 12px rgba(15, 18, 22, 0.06);
  --radius: 12px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --step: clamp(1.75rem, 4vw, 3rem);
  --font: 'PeakLess Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif-num: 'PeakLess Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14161a;
    --paper-2: #101216;
    --card: #1c2026;
    --ink: #eef1f4;
    --muted: #a9b2bd;
    --line: #2b3037;
    --line-soft: #232830;
    --amber: #b45309;
    --amber-text: #e7884b;
    --amber-soft: #3a2415;
    --green: #3f9a72;
    --green-soft: #1d3027;
    --accent: #0b0d10;
    --on-accent: #eef1f4;
    --shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--font);
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber-text); outline-offset: 3px; border-radius: 4px; }
.skip {
  position: absolute; left: var(--gutter); top: 0.5rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5rem 0.8rem; min-height: 44px; font-size: 0.9rem;
}
.skip:not(:focus) { opacity: 0; }

/* ---- nav ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; font-weight: 800; text-decoration: none; }
.brand__mark { display: inline-flex; color: var(--amber-text); }
.brand__word { font-size: 1.1rem; letter-spacing: -0.01em; }
.nav__links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: center; font-size: 0.93rem; }
.nav__links a { color: var(--muted); text-decoration: none; padding: 0.4rem 0.6rem; min-height: 44px; display: inline-flex; align-items: center; border-radius: 8px; }
.nav__links a:hover { color: var(--ink); background: var(--paper-2); }
.lang-switch { border: 1px solid var(--line); border-radius: 999px; padding: 0.45rem 0.8rem; min-height: 44px; }

/* ---- hero ---- */
.hero { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(1.25rem, 3vw, 2.25rem); }
.hero__rule { display: flex; gap: 4px; height: 6px; border-radius: 4px; overflow: hidden; margin-bottom: 1.5rem; }
.hero__rule span { height: 100%; }
.hero__rule .v { background: var(--green-soft); }
.hero__rule .p { background: var(--amber); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.eyebrow { color: var(--amber-text); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.8rem; }
.hero__title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.12; margin-bottom: 0.9rem; }
.hero__sub { color: var(--muted); max-width: 48ch; margin-bottom: 0.6rem; font-size: 1.02rem; }
/* what the app is not: a small, plainly worded limit under the promise */
.hero__note { color: var(--muted); font-size: 0.9rem; max-width: 46ch; margin-bottom: 1.2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.2rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border-radius: 999px; padding: 0.62rem 1.15rem; font-weight: 700; font-size: 0.94rem;
  border: 1px solid var(--line); text-decoration: none; min-height: 44px;
}
.pill--soon { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pill--play { background: var(--amber-text); color: #fff; border-color: var(--amber-text); }
.pill--ghost { background: var(--card); color: var(--ink); }
.trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.55rem 1.1rem; font-size: 0.9rem; color: var(--muted); }
.trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.trust svg { width: 18px; height: 18px; color: var(--green); }

.hero__shot { display: grid; gap: 0.85rem; }
.hero__shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.hero__caption { font-size: 0.88rem; color: var(--muted); }
.band { display: flex; height: 16px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.band__seg { display: block; height: 100%; }
.band__seg--peak { background: var(--amber); }
.band__seg--valley { background: var(--green-soft); }
.band__legend { font-size: 0.85rem; color: var(--muted); }

/* ---- sections ---- */
.section { padding: var(--step) 0; border-top: 1px solid var(--line); }
.lede { color: var(--muted); max-width: 62ch; margin: 0.5rem 0 1.4rem; }

/* ---- how it works ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.step { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1.1rem 1.2rem; }
.step__n { display: inline-block; font-size: 0.8rem; font-weight: 700; color: var(--amber-text); background: var(--amber-soft); border-radius: 6px; padding: 0.22rem 0.55rem; margin-bottom: 0.65rem; }
.step p { color: var(--muted); font-size: 0.95rem; margin-top: 0.4rem; }

/* ---- features ---- */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1.05rem 1.15rem; }
.card__i { width: 22px; height: 22px; color: var(--amber-text); display: block; margin-bottom: 0.6rem; }
.card p { color: var(--muted); font-size: 0.94rem; margin-top: 0.4rem; }

/* ---- screenshots ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; align-items: start; }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-soft); }
.shot--phone img { max-width: 320px; }
.shot figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 0.55rem; }
@media (min-width: 720px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .shot { justify-self: center; max-width: 460px; }
  .shot--wide { grid-column: 1 / -1; max-width: none; }
  .shot--phone img { max-width: 320px; }
}

/* ---- faq ---- */
.qa { margin: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.qa__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 1rem 1.1rem; }
.qa dt { font-weight: 700; }
.qa dd { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.95rem; }

/* ---- closing cta ---- */
.cta { border-top: 1px solid var(--line); background: var(--paper-2); padding: var(--step) 0; }
.cta__in { display: grid; gap: 0.9rem; }
.cta__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cta p { color: var(--muted); max-width: 62ch; }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding: 1.35rem 0 1.6rem; font-size: 0.9rem; color: var(--muted); }
.foot__in { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; }
.foot__brand { display: inline-flex; gap: 0.45rem; align-items: center; min-height: 44px; text-decoration: none; font-weight: 700; color: var(--ink); }
.foot__copy { flex: 1 1 220px; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
.foot__links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

@media (max-width: 720px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__shot { order: 2; }
  .steps, .grid, .qa { grid-template-columns: 1fr; }
  .nav__links { font-size: 0.9rem; gap: 0.25rem 0.75rem; }
}
@media (max-width: 380px) {
  .trust { gap: 0.4rem 0.8rem; }
  .gallery { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}