/* Skimr site: shared styles for every page.
   Tokens, base, the sticky nav and its mobile menu, buttons, section heads,
   cards, the iPhone frame, the FAQ accordion, the integrity note, the CTA band, the footer and
   reveal-on-scroll. Committed dark theme (the app's identity). Animations live under html.anim,
   which the head script only adds when the visitor hasn't asked for reduced motion. */

:root {
  --bg: #0a0e0c;
  --surface: #111a15;
  --surface-2: #17211b;
  --surface-3: #1d2922;
  --line: #243029;
  --line-2: #314038;
  --fg: #eef3ef;
  --muted: #9baaa0;
  --dim: #74847a;
  --accent: #30d158;
  --accent-2: #7fe69b;
  --accent-ink: #04170d;
  --accent-soft: rgba(48, 209, 88, 0.12);
  --accent-line: rgba(48, 209, 88, 0.42);
  --warn: #f0b24a;
  --danger: #ff5a4f;
  --display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Inside the phone mocks: Apple's system fonts where they exist, so it reads like iOS. */
  --ios: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Hanken Grotesk", sans-serif;
  --ios-round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Hanken Grotesk", sans-serif;
  --nav-h: 64px;
  --gutter: 20px;
  --wrap: 1160px;
  --r-lg: 22px;
  --r-md: 16px;
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  color-scheme: dark;
}
@media (max-width: 899.98px) { :root { --nav-h: 58px; } }
@media (max-width: 479.98px) { :root { --gutter: 16px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Clips decorative glows at the page edge without becoming a scroll container (sticky still works). */
main { display: block; overflow-x: clip; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { flex: none; }
[id] { scroll-margin-top: calc(var(--nav-h) + 14px); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: rgba(48, 209, 88, 0.35); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nowrap { white-space: nowrap; }
html:not(.js) .js-only { display: none; }
.skip-link {
  position: absolute; left: 12px; top: 10px; z-index: 100; padding: 0.6rem 1rem; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 800; text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.band { background: linear-gradient(180deg, rgba(48, 209, 88, 0.06), transparent 60%), var(--surface-2); border-block: 1px solid var(--line); }
.eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.lede { color: var(--muted); font-size: 1.1rem; }
.section-head { max-width: 60ch; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); margin-top: 0.7rem; }
.section-head p:not(.eyebrow) { color: var(--muted); margin-top: 0.9rem; font-size: 1.05rem; }
.muted { color: var(--muted); }

/* ---------- Sticky navigation ---------- */
.site-nav {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 12, 0.82);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}
.nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: 0.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem; flex: none;
  font-family: var(--display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em;
  color: var(--fg); text-decoration: none; border-radius: 10px;
}
.brand .r { color: var(--accent); }
.glyph {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: #000; border: 1px solid var(--line); color: var(--accent);
  display: grid; place-items: center; box-shadow: 0 0 18px -6px var(--accent);
  transition: transform 0.2s ease;
}
.glyph svg { width: 22px; height: 22px; }
.brand:hover .glyph { transform: rotate(-6deg) scale(1.05); }
.nav-links { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: 2px; }
.nav-links a {
  display: block; padding: 0.45rem 0.7rem; border-radius: 999px;
  color: var(--muted); font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-links a:hover { color: var(--fg); background: rgba(255, 255, 255, 0.05); }
.nav-links a.is-active, .nav-links a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }
.nav-cta { flex: none; padding: 0.62rem 1.05rem; font-size: 0.92rem; }
.menu-toggle { display: none; }
@media (min-width: 900px) and (max-width: 1119.98px) {
  .nav-inner { gap: 0.5rem; }
  .nav-links a { padding: 0.4rem 0.5rem; font-size: 0.86rem; }
  .nav-cta { padding: 0.55rem 0.85rem; font-size: 0.86rem; }
}
@media (max-width: 899.98px) {
  .nav-inner { gap: 0.6rem; }
  .brand { margin-right: auto; }
  .nav-cta { order: 2; padding: 0.52rem 0.9rem; font-size: 0.88rem; }
  .menu-toggle {
    order: 3; display: inline-grid; place-items: center; flex: none;
    width: 42px; height: 42px; padding: 0; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--line-2); background: var(--surface); color: var(--fg);
  }
  .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .menu-toggle .bars { position: relative; }
  .menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; }
  .menu-toggle .bars::before { top: -6px; }
  .menu-toggle .bars::after { top: 6px; }
  .menu-open .menu-toggle .bars { background: transparent; }
  .menu-open .menu-toggle .bars::before { transform: translateY(6px) rotate(45deg); background: var(--fg); }
  .menu-open .menu-toggle .bars::after { transform: translateY(-6px) rotate(-45deg); background: var(--fg); }
  .nav-links {
    order: 4; position: absolute; left: 0; right: 0; top: 100%; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 0.6rem var(--gutter) 1rem;
    background: #0c120f; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.85);
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }
  .menu-open .nav-links { visibility: visible; opacity: 1; transform: none; transition: opacity 0.18s ease, transform 0.18s ease; }
  .nav-links a { padding: 0.8rem 0.9rem; font-size: 1.02rem; border-radius: 12px; }
  /* Without JavaScript the links simply show as a scrollable row under the bar. */
  html:not(.js) .nav-inner { flex-wrap: wrap; height: auto; padding-block: 0.6rem; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .nav-links {
    position: static; flex-basis: 100%; flex-direction: row; overflow-x: auto; padding: 0.3rem 0 0;
    background: none; border: 0; box-shadow: none; visibility: visible; opacity: 1; transform: none;
  }
  html:not(.js) .nav-links a { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { .nav-links, .menu-toggle .bars, .menu-toggle .bars::before, .menu-toggle .bars::after { transition: none !important; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.8rem 1.3rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 1.1em; height: 1.1em; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); color: var(--fg); background: rgba(255, 255, 255, 0.02); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-lg { padding: 0.95rem 1.5rem; font-size: 1.05rem; }
.btn-sm { padding: 0.52rem 0.95rem; font-size: 0.9rem; }
.text-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Cards and lists ---------- */
.card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.5rem; }
.icon-chip {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.icon-chip svg { width: 21px; height: 21px; }
ul.points { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
ul.points li { display: flex; gap: 0.6rem; font-size: 0.97rem; align-items: flex-start; }
ul.points li .mk { flex: none; margin-top: 1px; font-weight: 800; }

/* Page hero for the inner pages */
.page-hero { padding-block: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 4vw, 2.5rem); position: relative; }
.page-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -30% 10% auto auto; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(48, 209, 88, 0.13), transparent);
  filter: blur(20px);
}
.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-top: 0.8rem; max-width: 16ch; }
.page-hero .lede { margin-top: 1.1rem; max-width: 54ch; font-size: 1.15rem; }

/* ---------- iPhone frame (home + how it works) ----------
   --pw sets the width; --u is one twentieth of it, so the bezel scales with the phone. The screen's
   font-size sets the scale of everything drawn inside it (in em). */
.phone {
  --pw: 300px;
  --u: calc(var(--pw) / 20);
  position: relative; flex: none;
  width: var(--pw); height: calc(var(--pw) * 25 / 12);
  padding: calc(var(--u) * 0.5);
  border-radius: calc(var(--u) * 2.8);
  background: linear-gradient(150deg, #47524c 0%, #1d2521 22%, #101513 55%, #2b3530 100%);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 0.07) rgba(255, 255, 255, 0.16),
    inset 0 0 0 calc(var(--u) * 0.2) #050706,
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 calc(var(--u) * 2.4) calc(var(--u) * 4.6) calc(var(--u) * -1.4) rgba(0, 0, 0, 0.85);
}
.phone::before, .phone::after { content: ""; position: absolute; width: calc(var(--u) * 0.16); background: #2b3530; }
.phone::before { left: calc(var(--u) * -0.13); top: 17%; height: 6.5%; border-radius: 2px 0 0 2px; box-shadow: 0 calc(var(--pw) * 0.21) 0 #2b3530, 0 calc(var(--pw) * 0.36) 0 #2b3530; }
.phone::after { right: calc(var(--u) * -0.13); top: 25%; height: 11%; border-radius: 0 2px 2px 0; }
.screen {
  position: relative; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: calc(var(--u) * 2.3);
  background: #000; color: #fff;
  font-family: var(--ios); font-size: var(--u); line-height: 1.25;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.island {
  position: absolute; z-index: 30; top: calc(var(--u) * 0.62); left: 50%;
  width: calc(var(--u) * 5.9); height: calc(var(--u) * 1.72); margin-left: calc(var(--u) * -2.95);
  border-radius: 999px; background: #000;
}
.home-bar {
  position: absolute; z-index: 30; left: 50%; bottom: calc(var(--u) * 0.45);
  width: calc(var(--u) * 7); height: calc(var(--u) * 0.3); margin-left: calc(var(--u) * -3.5);
  border-radius: 999px; background: rgba(255, 255, 255, 0.78);
}
/* Wallpapers */
.wall-green {
  background:
    radial-gradient(75% 42% at 15% 10%, rgba(120, 232, 172, 0.55), transparent 70%),
    radial-gradient(65% 40% at 95% 34%, rgba(38, 140, 162, 0.55), transparent 70%),
    radial-gradient(95% 55% at 35% 80%, rgba(22, 98, 70, 0.85), transparent 72%),
    radial-gradient(70% 38% at 100% 100%, rgba(150, 222, 120, 0.32), transparent 70%),
    linear-gradient(172deg, #10402f 0%, #0b2a22 46%, #061611 100%);
}
.wall-teal {
  background:
    radial-gradient(70% 40% at 85% 8%, rgba(110, 210, 230, 0.5), transparent 70%),
    radial-gradient(70% 45% at 5% 45%, rgba(60, 180, 130, 0.45), transparent 70%),
    radial-gradient(90% 50% at 70% 90%, rgba(20, 70, 90, 0.9), transparent 72%),
    linear-gradient(172deg, #0d3442 0%, #0a2430 50%, #05131a 100%);
}
.app-dark { background: linear-gradient(180deg, #0d1411 0%, #0a0f0c 100%); }

/* ---------- FAQ accordion ---------- */
.faq-list { display: grid; gap: 0.7rem; }
.faq-list details {
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 0 1.15rem;
  transition: border-color 0.15s ease;
}
.faq-list details[open] { border-color: var(--accent-line); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-weight: 700; font-size: 1.02rem; border-radius: 8px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; color: var(--accent); font-weight: 800; font-size: 1.4rem; line-height: 1;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .answer { color: var(--muted); padding-bottom: 1.15rem; max-width: 70ch; }
.faq-list .answer p + p, .faq-list .answer p + ul, .faq-list .answer ul + p { margin-top: 0.65rem; }
.faq-list .answer ul { padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.faq-list .answer strong { color: var(--fg); }
@media (prefers-reduced-motion: reduce) { .faq-list summary::after { transition: none; } }

/* ---------- Integrity note ---------- */
.integrity {
  border: 1px solid rgba(240, 178, 74, 0.38); border-radius: 18px; padding: 1.5rem;
  background: linear-gradient(0deg, rgba(240, 178, 74, 0.06), rgba(240, 178, 74, 0.06)), var(--surface);
  display: flex; gap: 1rem; align-items: flex-start;
}
.integrity .ic { flex: none; color: var(--warn); margin-top: 2px; }
.integrity h2, .integrity h3 { font-size: 1.15rem; }
.integrity p { color: var(--muted); font-size: 0.97rem; margin-top: 0.5rem; max-width: 64ch; }

/* ---------- Final call to action ---------- */
.cta-band {
  position: relative; text-align: center; border-top: 1px solid var(--line);
  background: radial-gradient(55% 90% at 50% 0%, rgba(48, 209, 88, 0.16), transparent 70%), var(--surface-2);
}
.cta-inner { display: grid; justify-items: center; gap: 1.2rem; }
.cta-band .glyph { width: 56px; height: 56px; border-radius: 16px; }
.cta-band .glyph svg { width: 36px; height: 36px; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 18ch; }
.cta-note { color: var(--muted); font-size: 0.88rem; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface-2); }
.foot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; padding-block: 2.8rem; }
.foot-tag { color: var(--muted); font-size: 0.9rem; margin-top: 0.75rem; max-width: 34ch; }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem 1.4rem; }
.foot-links a { color: var(--muted); font-size: 0.93rem; text-decoration: none; }
.foot-links a:hover { color: var(--fg); }
.foot small { display: block; color: var(--muted); font-size: 0.84rem; }
.foot .foot-mail { margin-top: 1.1rem; }
.foot .foot-copy { margin-top: 0.35rem; }
@media (max-width: 699.98px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Reveal on scroll (only with motion allowed and JavaScript on) ---------- */
html.anim [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease);
  transition-delay: calc(var(--d, 0) * 70ms);
}
html.anim [data-reveal].in { opacity: 1; transform: none; }