/* Eki — shared site design system. Ink on fog, rounded type, color only inside
   the real screenshots and the single red "today" signal. Linked by index,
   privacy and support so the three pages can never drift. */

/* Open Runde (OFL, a soft rounded variant of Inter — lauridskern/open-runde),
   self-hosted: no third-party font CDN, so the marketing layer keeps the
   product's "nothing leaves your device" promise literally true. Subset to
   latin + the few symbols the copy uses (~33KB per weight instead of ~160KB).
   It leads --sans, so the site reads in Open Runde everywhere; while it loads
   (or if it fails), the chain falls back to the platform's real rounded face
   (ui-rounded / SF Pro Rounded on Apple) — near-identical, so the swap is
   invisible. Only the weights actually used are fetched. */
@font-face{ font-family:"Open Runde"; src:url("assets/fonts/open-runde-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap }
@font-face{ font-family:"Open Runde"; src:url("assets/fonts/open-runde-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap }
@font-face{ font-family:"Open Runde"; src:url("assets/fonts/open-runde-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap }
@font-face{ font-family:"Open Runde"; src:url("assets/fonts/open-runde-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap }

:root{
  color-scheme:light;
  --bg:#F4F4F2; --surface:#FFFFFF; --surface-muted:#F1F1EF;
  --ink:#0B0B0C; --ink-2:rgba(11,11,12,.62); --ink-3:rgba(11,11,12,.58);
  --hairline:rgba(0,0,0,.07);
  --ink-surface:#0E0E10; --ink-screen:#0A0A0B; --on-ink:#F3F3F1;
  --red:#F53331;
  --radius:22px;
  --sans:"Open Runde",ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --shadow-phone:0 30px 80px -24px rgba(11,11,12,.22);
  --shadow-card:0 1px 2px rgba(0,0,0,.04),0 18px 50px -28px rgba(11,11,12,.18);
}
/* Dark mode deactivated — the marketing page is light-only (color-scheme:light
   above pins it regardless of the OS setting). The app's own light/dark support
   is still shown via the phone-screenshot toggle (.seg) below. */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.55; overflow-x:hidden;
}
::selection{ background:rgba(11,11,12,.10) }
a{ color:inherit }
img{ display:block; max-width:100% }
.col{ width:min(1040px, calc(100vw - 48px)); margin:0 auto }
.reading{ width:min(648px, calc(100vw - 44px)); margin:0 auto }

/* ---------- nav (shared) ---------- */
.site-nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(1.2) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.site-nav.scrolled{ border-bottom-color:var(--hairline) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:13px 0 }
.brand{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink) }
.brand-mark{ width:30px; height:30px }
.brand-name{ font-weight:600; font-size:16.5px; letter-spacing:-.01em }
.nav-right{ display:flex; align-items:center; gap:20px }
.nav-link{ font-size:14px; font-weight:500; color:var(--ink-2); text-decoration:none }
.nav-link:hover{ color:var(--ink) }
.nav-link.active{ color:var(--ink) }

/* ---------- buttons / store badge ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer;
  text-decoration:none; font-family:var(--sans); font-weight:550; font-size:14px;
  border-radius:99px; padding:11px 20px;
  transition:transform .12s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) scale(.99) }
.btn-ink{ background:var(--ink); color:var(--bg); box-shadow:0 1px 2px rgba(0,0,0,.22), 0 8px 22px -8px rgba(0,0,0,.2) }
.btn-sm{ padding:8px 15px; font-size:13px }
.btn-quiet{ color:var(--ink-2); text-decoration:none; font-weight:500; font-size:14px; padding:11px 4px }
.btn-quiet:hover{ color:var(--ink) }
.applemark{ width:13px; height:14px }
.btn-ink .applemark path{ fill:var(--bg) }

/* Official Apple "Download on the App Store" badge — black artwork on the light
   page, white on the dark page. Per Apple's marketing guidelines the badge is
   never recolored or redrawn; only a subtle container lift on hover. */
.appstore-badge{ display:inline-flex; transition:transform .12s cubic-bezier(.22,1,.36,1) }
.appstore-badge:hover{ transform:translateY(-1px) }
.appstore-badge img{ height:48px; width:auto }
.appstore-badge .badge-on-light{ display:block }
.appstore-badge .badge-on-dark{ display:none }

/* ---------- section rhythm ---------- */
section{ padding-block:clamp(64px,9vw,108px) }
[id]{ scroll-margin-top:72px }  /* anchor jumps clear the sticky nav */
h1{ font-size:clamp(40px,6.5vw,68px); font-weight:600; letter-spacing:-.025em; line-height:1.04 }
h2{ font-size:clamp(28px,3.6vw,34px); font-weight:600; letter-spacing:-.02em; line-height:1.1 }
.lede{ font-size:18px; line-height:1.55; color:var(--ink-2); font-weight:400 }
.eyebrow{
  margin-bottom:14px; font-size:12px; line-height:1.2; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px); align-items:center; padding-top:clamp(40px,6vw,72px) }
.hero-copy{ max-width:520px }
.hero h1{ margin-bottom:20px }
.hero .lede{ margin-bottom:30px; max-width:460px }
.cta-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.hero-fine{ margin-top:18px; font-size:13px; color:var(--ink-3) }
.hero-stage{ display:flex; flex-direction:column; align-items:center; gap:18px }

/* phone */
.phone{
  width:min(380px,80vw); border-radius:clamp(44px,12vw,56px);
  background:var(--ink-surface); padding:clamp(9px,2.2vw,12px);
  box-shadow:var(--shadow-phone), inset 0 0 0 1.5px rgba(255,255,255,.06); position:relative;
}
.screen{ position:relative; overflow:hidden; border-radius:clamp(36px,10vw,46px); aspect-ratio:1206/2622; background:var(--ink-screen) }
.screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .25s ease }
.screen img.is-hidden{ opacity:0 }
/* No overlaid island — the real device screenshots already include it. */

/* light/dark segmented control */
.seg{ display:inline-flex; gap:3px; padding:4px; background:var(--surface-muted); border:1px solid var(--hairline); border-radius:99px }
.seg button{
  border:none; cursor:pointer; border-radius:99px; padding:7px 17px; font-family:var(--sans);
  font-size:13px; font-weight:550; color:var(--ink-3); background:transparent;
  display:inline-flex; align-items:center; gap:7px; transition:color .2s, background .2s, box-shadow .2s;
}
.seg button.on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.1) }
.seg svg{ width:13px; height:13px }
.toggle-cap{ font-size:13px; color:var(--ink-3) }

/* ---------- value promise ---------- */
.value-strip{ padding-block:clamp(76px,9vw,112px); border-top:1px solid var(--hairline) }
.value-intro{
  max-width:760px; margin:0 auto clamp(46px,6vw,68px); text-align:center;
}
.value-intro .eyebrow{ margin-bottom:18px }
.value-intro h2{ font-size:clamp(34px,5vw,52px); line-height:1.03 }
.value-intro > p{
  max-width:56ch; margin:20px auto 0; color:var(--ink-2); font-size:17px; line-height:1.6;
}
.value-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border-block:1px solid var(--hairline);
}
.value-card{
  min-height:230px; padding:clamp(30px,4vw,42px) clamp(24px,3.5vw,38px);
}
.value-card + .value-card{ border-left:1px solid var(--hairline) }
.value-kicker{
  color:var(--ink-3); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.value-card h3{
  max-width:13ch; margin:clamp(30px,4vw,42px) 0 12px;
  font-size:clamp(23px,2.5vw,28px); line-height:1.1; letter-spacing:-.02em;
}
.value-card > p:last-child{ max-width:30ch; color:var(--ink-2); font-size:15px; line-height:1.6 }

/* ---------- gallery: "deference" device rail ----------
   A full-bleed horizontal rail of device frames that reuse the hero .phone
   vocabulary, so the rail reads as the same family of objects. Scroll-snap,
   the bleed off the right edge as the affordance, keyboard focus, and
   drag-to-scroll for desktop mice (inline script in index.html). No fake
   notch — the captures already carry the status bar + Dynamic Island. */
.gallery-wrap{ position:relative }
.gallery-head{ width:min(1040px, calc(100vw - 48px)); margin:0 auto clamp(28px,4vw,44px) }
.gallery-head h2{ margin-bottom:8px }
.gallery-head p{ font-size:16px; color:var(--ink-2); max-width:46ch }

.rail{
  --gap:clamp(16px,2.4vw,30px);
  --card:clamp(244px, 30vw, 320px);
  width:100vw;
  margin-inline:calc(50% - 50vw);
  list-style:none;
  display:flex;
  gap:var(--gap);
  /* The first card lines up with the content column's left edge, then the rail
     bleeds off the right. On wide displays that shows several devices flowing
     to the edge — not one card marooned in empty space. */
  padding-inline:max(24px, calc(50vw - 520px));
  scroll-padding-inline:max(24px, calc(50vw - 520px));
  padding-block:6px 4px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
}
.rail::-webkit-scrollbar{ display:none }
.rail.dragging{ cursor:grabbing; user-select:none; scroll-snap-type:none }
.rail.dragging img{ pointer-events:none }
.rail:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; border-radius:8px }
/* Shared keyboard focus ring (WCAG 2.4.7) — the UA default doesn't follow the
   pill/round shapes; these do. */
a:focus-visible,button:focus-visible,summary:focus-visible,.appstore-badge:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:12px }
.btn:focus-visible,.seg button:focus-visible,.foot-social a:focus-visible{ border-radius:99px }

/* skip-to-content: off-screen until keyboard focus, then drops in above the nav */
.skip{
  position:fixed; top:0; left:16px; z-index:100; transform:translateY(-120%);
  background:var(--ink); color:var(--bg); padding:10px 18px;
  border-radius:0 0 12px 12px; font-size:14px; font-weight:500;
  text-decoration:none; transition:transform .2s;
}
.skip:focus-visible{ transform:none; outline:2px solid var(--bg); outline-offset:2px }

.rail-item{ flex:0 0 var(--card); scroll-snap-align:start; scroll-snap-stop:always; margin:0 }
.rail-figure{ margin:0; display:flex; flex-direction:column; align-items:center }

.rail-phone{
  width:100%;
  border-radius:clamp(40px,9.5vw,52px);
  background:var(--ink-surface);
  padding:clamp(8px,2vw,11px);
  box-shadow:var(--shadow-phone), inset 0 0 0 1.5px rgba(255,255,255,.06);
  position:relative;
  transform:none;
  opacity:1;
}
.rail-screen{
  position:relative; overflow:hidden;
  border-radius:clamp(32px,8vw,42px);
  aspect-ratio:1206/2622;
  background:var(--ink-screen);
}
.rail-screen img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Web caption: a clear title + a line on how the feature works, below the phone.
   Caption-below keeps every phone's top edge aligned whatever the copy length,
   and reads like a feature explainer rather than a store-listing headline. */
.rail-cap{
  order:1;
  margin-top:clamp(18px,2.4vw,26px);
  max-width:34ch;
  display:flex; flex-direction:column; gap:7px;
  text-align:center;
}
.rail-head{
  font-size:clamp(17px,1.9vw,20px); font-weight:600; letter-spacing:-.01em;
  line-height:1.2; color:var(--ink); text-wrap:balance;
}
.rail-sub{
  font-size:15px; line-height:1.5; color:var(--ink-2); text-wrap:pretty;
}

@media (prefers-reduced-motion: reduce){
  .rail{ scroll-behavior:auto }
}

/* ---------- feature grid ---------- */
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:34px 28px }
.feature .ico{ width:30px; height:30px; color:var(--ink); margin-bottom:14px }
.feature .ico svg{ width:30px; height:30px }  /* Hugeicons — static, no animation */
.feature h3{ font-size:18px; font-weight:600; letter-spacing:-.01em; margin-bottom:6px; text-wrap:balance }
.feature p{ font-size:15px; color:var(--ink-2); line-height:1.5 }

.section-intro{ max-width:690px; margin-bottom:34px }
.section-intro h2{ margin-bottom:12px }
.section-intro > p:last-child{ color:var(--ink-2); font-size:17px; line-height:1.6 }

/* ---------- home FAQ ---------- */
.faq-wrap{ padding-top:20px }
.faq-shell{
  padding:clamp(24px,4vw,44px); border:1px solid var(--hairline);
  border-radius:calc(var(--radius) + 4px); background:var(--surface);
}
.faq-shell .section-intro{ margin-bottom:8px }
.faq-shell .faq{ margin-top:0 }

/* ---------- privacy strip ---------- */
.privacy-strip{ text-align:center }
.privacy-strip h2{ margin-bottom:14px }
.privacy-strip p{ max-width:560px; margin:0 auto; font-size:18px; color:var(--ink-2); line-height:1.55 }
.privacy-strip a.inline{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink-3); padding-bottom:1px; white-space:nowrap }
.privacy-strip a.inline:hover{ border-bottom-color:var(--ink) }

/* ---------- closing ---------- */
.closing{ text-align:center }
.closing h2{ margin-bottom:24px }
.closing .cta-row{ justify-content:center }
.closing .hero-fine{ text-align:center }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--hairline); padding-block:34px; margin-top:clamp(40px,7vw,80px) }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap }
.foot-left{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600 }
.foot-left img{ width:24px; height:24px; border-radius:6px }
.foot-fine{ font-weight:400; color:var(--ink-3); font-size:13px }
.foot-links{ display:flex; gap:8px; font-size:14px; color:var(--ink-2) }
.foot-links a{ text-decoration:none } .foot-links a:hover{ color:var(--ink) }
.foot-social{ display:flex; gap:12px }
.foot-social a{ width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface); display:grid; place-items:center; color:var(--ink-2); transition:color .2s, transform .2s }
.foot-social a:hover{ color:var(--ink); transform:translateY(-1px) }
.foot-social svg{ width:14px; height:14px }

/* ---------- reading pages (privacy / support) ---------- */
.doc{ padding-block:clamp(40px,6vw,64px) 0 }
.doc-head{ margin-bottom:34px }
.doc-head h1{ font-size:clamp(30px,4vw,40px); letter-spacing:-.025em }
.doc-head .date{ margin-top:8px; font-size:14px; color:var(--ink-3) }
.doc h2{ font-size:19px; margin:30px 0 8px }
.doc p, .doc li{ font-size:16px; line-height:1.7; color:var(--ink-2) }
.doc ul{ margin:8px 0 8px 22px }
.doc a:not(.btn){ color:var(--ink); text-decoration:underline; text-underline-offset:2px }
.doc .lede{ font-size:18px; color:var(--ink-2); margin-bottom:8px }

/* support */
.faq{ margin-top:8px; border-top:1px solid var(--hairline); interpolate-size: allow-keywords }
.faq details{ border-bottom:1px solid var(--hairline) }
.faq summary{ list-style:none; cursor:pointer; padding:18px 0; font-size:17px; font-weight:600; display:flex; align-items:center; gap:12px }
.faq summary::-webkit-details-marker{ display:none }
.faq .chev{ margin-left:auto; color:var(--ink-3); transition:transform .25s ease }
.faq details[open] .chev{ transform:rotate(90deg) }
.faq details p{ padding:0 0 20px; font-size:16px }
/* Smooth accordion: animate the content box height + fade. iOS 26 / macOS 26
   Safari and recent Chromium support ::details-content + interpolate-size;
   anywhere else the rules are ignored and the panel toggles instantly. */
.faq details::details-content{
  height:0;
  overflow:clip;
  opacity:0;
  transition: height .28s ease, opacity .28s ease, content-visibility .28s allow-discrete;
}
.faq details[open]::details-content{ height:auto; opacity:1 }
@media (prefers-reduced-motion: reduce){
  .faq details::details-content{ transition:none }
  .faq .chev{ transition:none }
}
.contact-card{ margin-top:36px; padding:26px; border:1px solid var(--hairline); background:var(--surface); border-radius:var(--radius); text-align:center }
.contact-card .version{ margin-top:14px; font-size:13px; color:var(--ink-3) }

/* ---------- motion ----------
   Reveal is opt-IN via the .js class the script adds, so with JS off (or a
   thrown script) the content renders at full opacity instead of a blank fold.
   Opacity and transform share the same expo-out curve so the settle reads as
   one motion, and sibling groups get a light stagger via transition-delay. */
.js .reveal{ opacity:0; transform:translateY(12px); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1) }
.js .reveal.in{ opacity:1; transform:none }
.hero-stage.reveal{ transition-delay:.12s }
.value-grid .reveal:nth-child(2){ transition-delay:.08s }
.value-grid .reveal:nth-child(3){ transition-delay:.16s }
.features .reveal:nth-child(4n+2){ transition-delay:.06s }
.features .reveal:nth-child(4n+3){ transition-delay:.12s }
.features .reveal:nth-child(4n+4){ transition-delay:.18s }
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; transition-delay:.01ms !important }
  .js .reveal{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero{ grid-template-columns:1fr; gap:36px; text-align:center }
  .hero-copy{ max-width:none; margin:0 auto } .hero .lede{ margin-inline:auto }
  .cta-row{ justify-content:center } .hero-fine{ text-align:center }
  .value-grid{ grid-template-columns:1fr }
  .value-card{ min-height:0 }
  .value-card + .value-card{ border-left:0; border-top:1px solid var(--hairline) }
  .value-card h3{ max-width:none; margin-top:26px }
  .value-card > p:last-child{ max-width:48ch }
  .features{ grid-template-columns:repeat(2,1fr); gap:30px 22px }
}
@media (max-width:640px){
  .rail{ --card:min(300px,80vw) }
  .foot-inner{ flex-direction:column; align-items:flex-start; gap:14px }
}
@media (max-width:560px){
  /* Brand + Download only — the text links collided with the wordmark on
     narrow phones, and both pages live in the footer anyway. */
  .nav-link{ display:none }
  .nav-right{ gap:12px }
}