/* ─────────────────────────────────────────────────────────────────────────────
   JeebByte — one stylesheet for the whole site.

   The palette is the app's own (core-ui/tokens/ColorTokens.kt), because a site
   that looks like the product it sells is the cheapest kind of trust there is.
   Before this file, the landing page was dark and branded while the privacy,
   terms and deletion pages were plain white documents with a different font —
   which reads to a reviewer, and to a user, as three different companies.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0A0E1A; --panel:#0D1320; --card:#111827; --line:#1E2A3A;
  --accent:#00FF88; --cyan:#00B4D8; --warn:#FFD700;
  --text:#E2E8F0; --dim:#8892B0; --faint:#5C6880;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1120px;
}

*{box-sizing:border-box}

/**
 * `hidden` has to actually hide.
 *
 * The attribute only sets `display:none` from the user-agent stylesheet, so any
 * author rule with a `display` beats it. `.pair{display:grid}` did exactly that:
 * after a browser paired successfully the JS set `hidden` on the pairing panel and
 * the panel stayed on screen — code, countdown and all — sitting above the balance
 * it had just unlocked. `!important` here rather than reordering every component,
 * because the next `display:` added to a toggled element would reintroduce it.
 */
[hidden]{display:none !important}

html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* Every image carries width/height so the page never reflows while loading;
   without height:auto the browser obeys the attribute literally and a 1107px
   screenshot stays 1107px tall however narrow the CSS makes it. */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ── header ─────────────────────────────────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:20;background:rgba(10,14,26,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;gap:12px;padding-top:13px;padding-bottom:13px}
.site-head .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.site-head .brand img{border-radius:9px}
.site-head .name{font-family:var(--mono);font-weight:700;font-size:16px;letter-spacing:-.4px}
.site-head nav{margin-left:auto;display:flex;gap:20px;align-items:center}
.site-head nav a{color:var(--dim);text-decoration:none;font-size:14px}
.site-head nav a:hover{color:var(--text)}
@media(max-width:640px){.site-head nav a.hide-sm{display:none}}
/* phones: the nav drops under the brand as its own row so every link fits */
@media(max-width:520px){.site-head .wrap{flex-wrap:wrap;row-gap:8px}.site-head nav{margin-left:0;width:100%;justify-content:space-between;gap:12px}.site-head nav a{white-space:nowrap}}

/* `.site-head nav a` is the more specific selector, so the button in the header
   needs to be named through it — otherwise the CTA inherits the muted nav grey
   and renders grey-on-green, which is both ugly and barely readable. */
.cta,.site-head nav a.cta{
  display:inline-block;background:var(--accent);color:#04120A;font-weight:700;
  font-family:var(--mono);font-size:14px;text-decoration:none;
  padding:11px 18px;border-radius:11px;white-space:nowrap;
}
.cta:hover,.site-head nav a.cta:hover{filter:brightness(1.08);color:#04120A}
.cta.ghost{background:transparent;color:var(--accent);border:1px solid rgba(0,255,136,.45)}


/* The page you are on, marked in the shared nav. Without this the five pages
   share a menu but give no clue which one is open, which is most of what made
   the site feel like separate documents rather than one place. */
.site-head nav a.on{color:var(--text)}
.site-head nav a.on::after{
  content:"";display:block;height:2px;margin-top:5px;border-radius:2px;
  background:var(--accent);
}

/* ── landing: hero ──────────────────────────────────────────────────────── */
/* padding-top/bottom, never the shorthand: the hero element is also a .wrap, and
   `padding:70px 0 30px` would reset that class's 22px side padding to zero,
   putting the headline flush against the edge of a phone screen. */
.hero{padding-top:70px;padding-bottom:30px;position:relative}
.hero::before{
  content:"";position:absolute;inset:-140px 0 auto;height:520px;pointer-events:none;
  background:radial-gradient(58% 60% at 68% 32%,rgba(0,255,136,.12),transparent 70%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:38px}}
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:2.4px;color:var(--accent);
  text-transform:uppercase;margin:0 0 16px;
}
h1{font-size:clamp(31px,5vw,50px);line-height:1.1;margin:0 0 18px;letter-spacing:-1.4px;text-wrap:balance;font-weight:800}
.lede{font-size:17px;color:var(--dim);margin:0 0 26px;max-width:52ch}
.lede b{color:var(--text);font-weight:600}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-note{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:16px}

/* The screenshots are real, so the frame stays out of their way. */
.phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.phone{
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:0 26px 60px rgba(0,0,0,.55);
  width:100%;max-width:232px;
}
.phone.back{margin-top:34px;opacity:.72;transform:scale(.94)}
@media(max-width:520px){.phone.back{display:none}}

/* ── landing: stats, sections, cards ────────────────────────────────────── */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:46px;
}
.stat{background:var(--panel);padding:20px 18px}
.stat b{display:block;font-family:var(--mono);font-size:25px;color:var(--accent);letter-spacing:-1px}
.stat span{font-size:13px;color:var(--dim)}

section{padding:66px 0;border-top:1px solid var(--line)}
h2{font-size:clamp(23px,3vw,31px);margin:0 0 14px;letter-spacing:-.8px;text-wrap:balance}
.sub{color:var(--dim);margin:0 0 34px;max-width:60ch;font-size:16px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:24px}
.card h3{margin:0 0 9px;font-size:17px;font-family:var(--mono);letter-spacing:-.3px}
.card p{margin:0;color:var(--dim);font-size:14.5px}
.card .k{font-family:var(--mono);font-size:10px;letter-spacing:1.6px;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:11px}

figure{margin:0}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;align-items:start}
.shot img{border:1px solid var(--line);border-radius:15px;background:var(--card);width:100%}
.shot figcaption{font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-top:11px;text-align:center}

.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}
ul.plain{margin:0;padding-left:19px;color:var(--dim);font-size:15px}
ul.plain li{margin-bottom:11px}
ul.plain b{color:var(--text);font-weight:600}
code{font-family:var(--mono);font-size:.9em;color:var(--cyan)}

.note{
  background:rgba(0,180,216,.07);border:1px solid rgba(0,180,216,.28);
  border-radius:13px;padding:19px 21px;color:var(--dim);font-size:14.5px;margin-top:26px;
}
.note b{color:var(--text)}

/* ── legal / document pages ─────────────────────────────────────────────── */
.doc{max-width:760px;margin:0 auto;padding:52px 22px 84px}
.doc h1{font-size:clamp(26px,4vw,36px);margin:0 0 6px;letter-spacing:-1px}
.doc h2{
  font-size:19px;margin:38px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);letter-spacing:-.3px;
}
.doc h3{font-size:16px;margin:26px 0 8px;font-family:var(--mono);letter-spacing:-.2px}
.doc p,.doc li{color:var(--dim);font-size:15.5px}
.doc strong,.doc b{color:var(--text)}
.doc .muted{color:var(--faint);font-size:13.5px;font-family:var(--mono)}
.doc ul,.doc ol{padding-left:20px}
.doc li{margin-bottom:9px}
.doc code{background:rgba(0,180,216,.1);padding:2px 6px;border-radius:5px}
.doc a{text-decoration:underline;text-underline-offset:3px}
.doc .box{
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:19px 21px;margin:24px 0;color:var(--dim);font-size:15px;
}
.doc table{border-collapse:collapse;width:100%;margin:16px 0;font-size:14.5px}
.doc th,.doc td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;color:var(--dim)}
.doc th{background:var(--panel);color:var(--text);font-family:var(--mono);font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
/* Tables are the one thing on a legal page that cannot be made narrow enough
   for a phone, so they scroll inside themselves rather than the page. */
.doc .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── footer ─────────────────────────────────────────────────────────────── */
.site-foot{border-top:1px solid var(--line);padding:42px 0 66px;color:var(--faint);font-size:14px}
.site-foot .row{display:flex;gap:26px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.site-foot a{color:var(--dim);text-decoration:none}
.site-foot a:hover{color:var(--text)}
.site-foot p{margin:0}