/* Steady — shared site stylesheet.
   Single source of truth for index.html and privacy.html.
   Tokens mirror the app's design system (Theme.swift / FormMetrics). */

:root{
  /* ── Color (light-only, monochrome) ── */
  /* Warm off-white paper (not flat grey) against pure-white cards — gives the
     page a calm, physical feel without introducing any hue/accent. */
  --canvas:#F5F4F2; --surface:#FFFFFF; --ink:#0A0A0B; --paper:#FFFFFF;
  --secondary:#67676E;
  --stroke:rgba(10,10,11,0.09); --tick:rgba(10,10,11,0.20); --fill:rgba(10,10,11,0.05);
  /* Soft, layered card depth — makes surfaces read as material, not outlines. */
  --shadow-card:0 1px 2px rgba(10,10,11,.04),0 12px 32px -14px rgba(10,10,11,.14);
  --shadow-card-hover:0 2px 4px rgba(10,10,11,.05),0 20px 44px -16px rgba(10,10,11,.20);

  /* ── Radius (mirrors FormMetrics) ── */
  --r-card:22px; --r-cluster:16px; --r-control:14px; --r-icon:10px; --r-atom:5px;

  /* ── Spacing ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:44px; --sp-12:64px; --sp-16:96px;

  /* ── Accent — warm amber/brass (the app-icon colour, the wood/pendulum of a
     real metronome). Used only on "living" touches: highlighter, pulse, card
     underlines, the "Free" pillar word, focus. Everything else stays monochrome.
     Text uses --accent-ink (5.7:1 on canvas); bright --accent is for non-text. */
  --accent:#C1802E; --accent-ink:#8A5416;
  --accent-hl:rgba(193,128,46,0.34); --accent-soft:rgba(193,128,46,0.12);

  /* ── Type ──
     Inter Tight = display (headlines, labels). Inter = body/reading text. */
  --font:"Inter Tight",-apple-system,BlinkMacSystemFont,"system-ui",sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"system-ui",sans-serif;
  --fs-eyebrow:12px; --fs-meta:13px; --fs-caption:14px; --fs-list:15px;
  --fs-body:17px; --fs-h3:20px; --fs-lead:19px; --fs-h2:clamp(30px,4vw,40px);
  --fs-h1:clamp(42px,6.4vw,68px); --fs-h1-sm:clamp(34px,6vw,48px);
}
/* Site is intentionally light-only — the calm off-white canvas is part of the
   brand. We opt out of the OS dark scheme so the page reads the same everywhere. */
:root{ color-scheme: light; }

/* ── Base ── */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;line-height:1.5}
/* Display font on headlines + short labels; body copy stays Inter (set on body). */
h1,h2,.logo,.eyebrow,.stat b,.appstore .t b,.card h3,.freeband b,.card.tldr b{font-family:var(--font)}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-6)}
body.narrow .wrap{max-width:760px;padding-bottom:var(--sp-12)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-atom)}
[data-lang="en"] .uk{display:none!important}
[data-lang="uk"] .en{display:none!important}

/* ── Header (sticky, frosted) ── */
header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp-4) 0;margin:0 calc(-1*var(--sp-6));padding-left:var(--sp-6);padding-right:var(--sp-6);
  background:color-mix(in srgb,var(--canvas) 78%,transparent);backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease}
header.stuck{border-bottom-color:var(--stroke)}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;letter-spacing:-0.01em;text-decoration:none}
.logo .mark{width:38px;height:38px;border-radius:var(--r-icon);object-fit:cover;display:block;border:1px solid var(--stroke)}
.nav{display:flex;align-items:center;gap:var(--sp-6)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-2);color:var(--secondary);text-decoration:none;font-weight:600;font-size:var(--fs-caption)}
.nav a:hover{color:var(--accent-ink)}
.langbtn{display:inline-flex;align-items:center;min-height:44px;border:1.5px solid var(--stroke);background:var(--surface);color:var(--ink);border-radius:var(--r-control);padding:0 var(--sp-4);font:700 var(--fs-caption) var(--font);cursor:pointer;transition:border-color .15s ease}
.langbtn:hover{border-color:var(--ink)}
@media(max-width:640px){ .nav a{display:none} }

/* ── Hero ── */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-12);align-items:center;padding:var(--sp-10) 0 var(--sp-16)}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.22em;color:var(--accent-ink);text-transform:uppercase}
/* Living pulse in the hero eyebrow — a metronome tick at 120 BPM (0.5s). */
.eyebrow.pulse{display:inline-flex;align-items:center;gap:9px}
.eyebrow.pulse::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 0 0 var(--accent-hl);animation:tickPulse 1s ease-in-out infinite}
@keyframes tickPulse{0%{transform:scale(.7);opacity:.5;box-shadow:0 0 0 0 var(--accent-hl)}50%{transform:scale(1);opacity:1;box-shadow:0 0 0 5px rgba(0,200,179,0)}100%{transform:scale(.7);opacity:.5;box-shadow:0 0 0 0 rgba(0,200,179,0)}}
@media (prefers-reduced-motion: reduce){ .eyebrow.pulse::before{animation:none;opacity:1} }
h1{font-size:var(--fs-h1);font-weight:800;letter-spacing:-0.045em;line-height:1.0;margin:14px 0 var(--sp-5)}
/* Ukrainian is a longer string — slightly smaller + tighter so it doesn't tower */
[data-lang="uk"] .hero h1{font-size:clamp(36px,5.4vw,58px);line-height:0.98;letter-spacing:-0.035em}
.sub{font-size:var(--fs-body);color:var(--secondary);max-width:30em;margin:0 0 var(--sp-8);line-height:1.55}
/* Highlighter-marker swipe behind a key word — the one place ink meets accent. */
.hl{background:linear-gradient(transparent 58%,var(--accent-hl) 0);padding:0 .06em;border-radius:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* App Store badge */
.appstore{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 22px;border-radius:15px;transition:transform .15s ease,opacity .15s ease}
.appstore:hover{transform:translateY(-1px);opacity:.92}
.appstore svg{width:26px;height:26px;fill:var(--paper)}
.appstore .t{line-height:1.1}
.appstore .t small{display:block;font-size:11px;opacity:.75;font-weight:500}
.appstore .t b{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.cta-note{font-size:var(--fs-meta);color:var(--secondary);margin:var(--sp-3) 0 0}
.cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Stat row */
.stats{display:flex;margin-top:var(--sp-10)}
.stat{padding-right:var(--sp-8);margin-right:var(--sp-8);border-right:1.5px solid var(--stroke)}
.stat:last-child{border:none;margin:0;padding:0}
.stat b{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-0.025em;line-height:1.05}
/* Accent word uses the darker accent-ink so it passes WCAG (bright teal on the
   off-white canvas is only ~1.9:1). Bright --accent stays for non-text touches. */
.stat b.accent{color:var(--accent-ink)}
[data-lang="uk"] .stat b{font-size:clamp(17px,2vw,22px)}
.stat span{display:block;margin-top:5px;font-size:var(--fs-meta);font-weight:600;letter-spacing:.03em;color:var(--secondary)}
@media(max-width:520px){
  .stats{margin-top:var(--sp-8)}
  .stat{padding-right:var(--sp-3);margin-right:var(--sp-3)}
  .stat span{font-size:11.5px}
  .stat b{font-size:19px}
  [data-lang="uk"] .stat b{font-size:15px}
  [data-lang="uk"] .stat span{font-size:11px}
}

/* ── Phone mockup — a real App screenshot (app-tempo.png) inside a device frame.
   The frame is the bezel; the screenshot clips to the rounded .screen. ── */
.phone{width:300px;justify-self:center;background:#0A0A0B;border-radius:52px;padding:12px;
  box-shadow:0 44px 90px -26px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05)}
/* Real app screenshot fills the device frame edge-to-edge. */
.screen{display:block;width:100%;height:auto;border-radius:40px}

@media(max-width:860px){
  .hero{grid-template-columns:1fr;gap:var(--sp-10);padding-bottom:var(--sp-12)}
  .phone{order:2;width:270px}
}

/* ── Tick-rule divider — echoes the app's tempo ruler (center axis + ticks,
   every 5th taller). Used in place of a plain hairline between sections. ── */
.tickrule{position:relative;height:18px;margin:0 auto;max-width:1120px}
.tickrule::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-.5px);background:var(--stroke)}
.tickrule::after{content:"";position:absolute;left:0;right:0;top:50%;height:14px;transform:translateY(-7px);
  background:
    repeating-linear-gradient(90deg,var(--tick) 0 1.5px,transparent 1.5px 55px),
    repeating-linear-gradient(90deg,var(--stroke) 0 1.5px,transparent 1.5px 11px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  /* short ticks 8px tall, tall ticks (first layer) full 14px */
  -webkit-mask-composite:source-over}
/* clip the short-tick layer to 8px height using a wrapper trick */
.tickrule::after{background-size:auto 14px,auto 8px;background-position:center center,center bottom;background-repeat:repeat-x}

/* ── Sections ── */
section{padding:var(--sp-12) 0}
h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-0.03em;margin:0 0 var(--sp-1)}
.lead{color:var(--secondary);margin:0 0 var(--sp-8);font-size:var(--fs-body)}

/* Feature cards — 2×2 balanced */
.grid{display:grid;grid-template-columns:1fr;gap:var(--sp-4)}
@media(min-width:720px){ .grid{grid-template-columns:1fr 1fr} }
.card{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-card);padding:var(--sp-8);
  box-shadow:var(--shadow-card);transition:transform .18s ease,box-shadow .18s ease}
.grid .card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.card .badge{width:56px;height:56px;border-radius:var(--r-cluster);background:var(--fill);display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-5)}
.card .badge svg{width:26px;height:26px;color:var(--ink)}
.card h3{margin:0 0 var(--sp-4);font-size:var(--fs-h3);font-weight:800;letter-spacing:-0.02em;
  display:inline-block;padding-bottom:9px;position:relative}
.card h3::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:2px;background:var(--accent)}
ul.feats{list-style:none;margin:0;padding:0}
/* No bullets — clean lines; the accent lives on the card titles instead. */
ul.feats li{margin:10px 0;font-size:var(--fs-list);color:var(--secondary)}

/* The free promise is the loudest truth — an ink slab with an amber kicker. */
.freeband{position:relative;overflow:hidden;border:none;border-radius:var(--r-card);background:var(--ink);color:var(--paper);padding:var(--sp-12) var(--sp-10)}
.freeband .eyebrow{color:var(--accent);margin-bottom:var(--sp-4)}
.freeband b{display:block;font-size:clamp(26px,3.6vw,40px);font-weight:800;letter-spacing:-0.03em;line-height:1.05;max-width:15em}
.freeband p{color:var(--paper);opacity:.6;margin:var(--sp-4) 0 0;max-width:40em;font-size:var(--fs-list)}
.fb-chips{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sp-6) 0 0}
.fb-chips span{font-size:var(--fs-caption);font-weight:600;color:var(--paper);background:rgba(255,255,255,0.08);padding:9px 16px;border-radius:999px}
.fb-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--sp-6);color:var(--accent);font-weight:700;font-size:var(--fs-caption);text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:3px;width:max-content}
.fb-link:hover{opacity:.85}
.fb-bars{position:absolute;right:var(--sp-10);bottom:var(--sp-10);width:110px;height:82px;fill:rgba(255,255,255,0.06)}
@media(max-width:640px){ .fb-bars{display:none} }
.support-card{max-width:520px}
.mail-link{text-decoration:none;letter-spacing:-0.01em}
.mail-link:hover{color:var(--accent-ink)!important}
/* Support: heading left, contact card right (stacks on mobile). */
@media(min-width:720px){
  #support{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
  #support .support-head{margin:0}
  #support .support-head .lead{margin-bottom:0}
  #support .support-card{max-width:none;justify-self:end;width:100%}
}

/* Closing */
.closing{text-align:center;padding-top:var(--sp-8)}
.closing .lead{max-width:34em;margin:0 auto var(--sp-6)}
.closing .appstore{margin:0 auto}

/* ── Privacy page ── */
.updated{color:var(--secondary);font-size:var(--fs-caption);margin:0 0 var(--sp-6)}
body.narrow h1{font-size:var(--fs-h1-sm);letter-spacing:-0.03em}
.eyebrow.spaced{margin-top:var(--sp-6)}
.card.doc{padding:var(--sp-6) var(--sp-6) var(--sp-2);margin-bottom:var(--sp-3)}
.card.doc h2{font-size:var(--fs-lead);font-weight:700;margin:0 0 var(--sp-2);letter-spacing:-0.01em}
.card.doc p{margin:0 0 18px;font-size:var(--fs-body);color:var(--ink)}
.card.tldr{background:var(--ink);color:var(--paper);border:none;text-align:center;padding:var(--sp-6)}
.card.tldr b{font-size:var(--fs-lead);font-weight:800}
.card.tldr p{margin:6px 0 0;opacity:.75;font-size:var(--fs-list);color:var(--paper)}

/* ── Footer ── */
footer{border-top:1.5px solid var(--stroke);margin-top:var(--sp-8);padding:var(--sp-8) 0 var(--sp-10);color:var(--secondary);font-size:var(--fs-caption)}
body.narrow footer{border-top:none;padding-top:var(--sp-6)}
footer .links{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:var(--sp-3)}
footer a{color:var(--ink);text-decoration:none;font-weight:600}
footer a:hover{text-decoration:underline}