/* Bead — the family dark site, in the app's own locked palette.
   Structure and class vocabulary are lifted wholesale from Cork's stylesheet
   (which took them from Baton's) so the family reads as one studio; only the
   palette differs. The colours are BeadPalette from commonMain/ui/Theme.kt —
   the locked object verifyGating checks — plus the Electric accent pack, i.e.
   the face anyone who opens Bead actually sees. Do not drift these from the app.
   Red is deliberately absent: nothing here is ever late. */
:root {
  --bg: #07090d;        /* a touch deeper than the app ground, for the page field */
  --panel: #12151C;     /* BeadPalette.surface */
  --panel2: #171B24;    /* BeadPalette.surface2 */
  --mist: #6F9DFF;      /* Electric accentBright — headings' company, links */
  --dim: #8B93A3;       /* BeadPalette.muted */
  --faint: #5C6373;     /* BeadPalette.faint */
  --text: #E8ECF2;      /* BeadPalette.text */
  --accent: #3D7BFF;    /* Electric accent */
  --outline: #242A36;   /* BeadPalette.line */
  --amber: #D9A441;     /* the Waiting lane. Nowhere else, ever. */
  --good: #4FB87A;      /* the done bead */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 880px; margin: 0 auto; padding: 0 22px; }
a { color: var(--mist); text-decoration: none; }
a:hover { color: #a9c3ff; }

header.site {
  padding: 26px 0 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { font-size: 20px; font-weight: 600; letter-spacing: 7px; color: var(--text); }
nav a { margin-left: 20px; font-size: 14px; color: var(--dim); }
nav a:hover { color: var(--mist); }

.hero { padding: 66px 0 40px; text-align: center;
  background: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(61,123,255,.18), transparent); }
.hero .eyebrow { color: var(--dim); font-size: 15px; letter-spacing: .2px; }
.hero h1 { margin-top: 12px; font-size: clamp(28px, 5vw, 42px); font-weight: 600; line-height: 1.25; color: #f2f5fa; }
.hero p.sub { margin: 16px auto 0; max-width: 560px; color: var(--dim); font-size: 18px; }
.badges { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.badge { border: 1px solid var(--outline); background: var(--panel2); color: var(--dim);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; }

section { padding: 44px 0; }
h2 { font-size: 22px; font-weight: 600; color: #f2f5fa; margin-bottom: 14px; }
p.lead { color: var(--dim); max-width: 640px; }
p.lead + p.lead { margin-top: 12px; }

.privacy-strip { background: var(--panel); border: 1px solid var(--outline); border-radius: 16px;
  padding: 24px 26px; margin-top: 10px; }
.privacy-strip strong { color: var(--mist); }
.privacy-strip p { color: var(--text); font-size: 15px; }
.privacy-strip .fine { color: var(--dim); font-size: 13px; margin-top: 10px; }

/* ---- Lanes: the one diagram on the site. A dot per lane, in the app's own
   lane colours — Today electric, Waiting muted amber (never red), Soon and
   Later progressively quieter, which is the whole visual argument. ---- */
.lanes { margin-top: 18px; display: grid; gap: 10px; }
.lane { display: flex; gap: 14px; align-items: baseline;
  background: var(--panel2); border: 1px solid var(--outline); border-radius: 14px; padding: 16px 18px; }
.lane .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.lane .dot.today { background: var(--accent); }
.lane .dot.waiting { background: var(--amber); }
.lane .dot.soon { background: var(--faint); }
.lane .dot.later { background: var(--outline); }
.lane h3 { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; min-width: 78px; }
.lane .today-l { color: var(--accent); }
.lane .waiting-l { color: var(--amber); }
.lane .quiet-l { color: var(--faint); }
.lane p { font-size: 14.5px; color: var(--dim); margin: 0; }
@media (max-width: 560px) { .lane { flex-wrap: wrap; } .lane p { flex-basis: 100%; } }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; }
.feature { background: var(--panel2); border: 1px solid var(--outline); border-radius: 14px; padding: 18px; }
.feature h3 { font-size: 15px; color: #f2f5fa; margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--dim); }

/* ---- The not-list. No ticks, no crosses — nothing here is a scoreboard. ---- */
.nots { list-style: none; margin-top: 16px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px 22px; }
.nots li { color: var(--dim); font-size: 14.5px; padding-left: 18px; position: relative; }
.nots li::before { content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 1px; background: var(--outline); }

/* Screenshots. One column of phone frames, centred — Bead has exactly one
   screen, and a four-across grid of near-identical dark frames would be a lie
   about how much app there is. */
.shots { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 20px; justify-content: center; }
.shots figure { max-width: 300px; }
.shots img { width: 100%; height: auto; display: block; border-radius: 22px;
  border: 1px solid var(--outline); box-shadow: 0 18px 44px rgba(0,0,0,.6); }
.shots figcaption { margin-top: 10px; font-size: 12.5px; color: var(--faint); text-align: center; }

/* ---- Early-access banner ---- */
.earlybar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 22px; text-align: center; font-size: 14px; color: var(--text);
  background: linear-gradient(90deg, rgba(61,123,255,.16), rgba(111,157,255,.07));
  border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
}
.earlybar:hover { background: linear-gradient(90deg, rgba(61,123,255,.26), rgba(111,157,255,.12)); color: var(--text); }
.earlybar-tag {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mist);
  border: 1px solid var(--outline); background: var(--panel2); border-radius: 999px; padding: 2px 10px;
}
.earlybar-cta { font-weight: 600; color: var(--mist); white-space: nowrap; }
.earlybar:hover .earlybar-cta { color: #a9c3ff; }
.earlybar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Status note (no store badge anywhere on this site yet: the fleet rule is
   that the official Google Play badge is the sole download CTA and only where a
   listing exists. Bead's does not exist yet, so there is no CTA at all.) ---- */
.soon-note { color: var(--dim); font-size: 14px; margin-top: 14px; }
.legal-note { color: var(--faint); font-size: 12px; line-height: 1.5; }

/* ---- Cross-promo tiles ---- */
.xpromo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.xpromo .tile { display: block; background: var(--panel2); border: 1px solid var(--outline); border-radius: 14px; padding: 16px 18px; }
.xpromo .tile:hover { border-color: #33415a; }
.xpromo .tile h3 { font-size: 15px; color: #f2f5fa; margin-bottom: 4px; }
.xpromo .tile p { font-size: 13.5px; color: var(--dim); margin: 0; }

article.page { padding: 40px 0 20px; }
article.page h1 { font-size: 26px; margin-bottom: 6px; color: #f2f5fa; }
article.page .updated { color: var(--dim); font-size: 13px; margin-bottom: 24px; }
article.page h2 { font-size: 18px; margin: 26px 0 8px; }
article.page p, article.page li { color: var(--text); font-size: 15px; }
article.page ul { padding-left: 22px; margin: 8px 0; }
article.page .card { background: var(--panel2); border: 1px solid var(--outline);
  border-radius: 14px; padding: 18px 20px; margin: 14px 0; }
article.page .fine { color: var(--dim); font-size: 13px; }

.log-entry { border-left: 2px solid var(--outline); padding: 4px 0 4px 18px; margin: 18px 0; }
.log-entry h2 { margin: 0 0 6px; }
.log-entry .date { color: var(--dim); font-size: 13px; }

footer.site { border-top: 1px solid var(--outline); margin-top: 40px; padding: 26px 0 40px;
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; color: var(--dim); font-size: 13px; }
footer.site a { color: var(--dim); margin-right: 16px; }
footer.site div:last-child a { margin-right: 0; }
footer.site a:hover { color: var(--mist); }

/* ---- Hidden-until-hover visitor counter (page views, no cookies/IDs) ---- */
.viewcount {
  position: fixed; right: 12px; bottom: 10px; z-index: 60;
  font-size: 11px; letter-spacing: 0.02em; color: var(--faint);
  padding: 4px 8px; border-radius: 8px;
  opacity: 0; transition: opacity 0.3s ease;
  pointer-events: auto; user-select: none; cursor: default;
}
.viewcount:hover, .viewcount:focus, .viewcount:active { opacity: 0.85; }
.viewcount:empty { display: none; }

/* ---- Nav logo mark: the Strand icon, same geometry as the launcher vector
   (androidMain/res/drawable/ic_launcher_foreground.xml), scaled to a 64 box.
   Brume's mark animates its slider thumbs on hover and Baton's arm swings; here
   the done bead slides across the thread — the app's whole gesture in 400ms. ---- */
.wordmark, .wordmark a { display: inline-flex; align-items: center; gap: 10px; }
.logo-b { width: 34px; height: 34px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .logo-b .done { transition: transform .4s cubic-bezier(.2,.7,.3,1); }
  .wordmark:hover .logo-b .done { transform: translateX(6px); }
}

/* ---- Small screens: stack the header (wordmark on top, links below) ---- */
@media (max-width: 720px) {
  header.site { flex-direction: column; gap: 12px; padding-bottom: 14px; }
  header.site nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px; }
  nav a { margin-left: 0; }
}