/* Bevel: the family dark site, in the app's own palette.
   Structure and class vocabulary are lifted wholesale from Slate's stylesheet
   (which took them from Sandglass's, from Sconce's, from Bead's, from Cork's,
   from Baton's) so the family reads as one studio; only the palette differs.
   The palette is the app's locked Graphite skin (commonMain/skins/Skins.kt):
   backdrop #1A1D21, surface #23272D, surfaceHi #2D323A, text #ECEFF1,
   textDim #8B949C, accent #6FB2E6, good #5FD08A, grid #3A4048. Do not drift
   these from the app; this file is the site's copy.

   No web font: the app's Graphite skin sets no custom face (FontFamily.Default),
   so the site stands on system-ui and fetches nothing from anywhere. */
:root {
  --bg: #1A1D21;        /* the app's backdrop */
  --panel: #23272D;     /* surface */
  --panel2: #2D323A;    /* surfaceHi */
  --mist: #A7D0F0;      /* bright accent blue: headings' company, links */
  --dim: #8B949C;       /* textDim */
  --faint: #6B747D;     /* a step below textDim */
  --text: #ECEFF1;      /* text */
  --accent: #6FB2E6;    /* the instrument blue */
  --good: #5FD08A;      /* the bubble green */
  --outline: #3A4048;   /* grid, the instrument frame */
}
* { 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: #D5EAFB; }

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(111,178,230,.14), 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: #FFFFFF; }
.hero p.sub { margin: 16px auto 0; max-width: 620px; color: var(--dim); font-size: 18px; }

/* The pillar strip: three pillars and nothing else, in this order (Copy Claims
   Rule v3): No ads, No accounts, No subscriptions. */
.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: #FFFFFF; margin-bottom: 14px; }
p.lead { color: var(--dim); max-width: 660px; }
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 p + p { margin-top: 10px; }
.privacy-strip .fine { color: var(--dim); font-size: 13px; margin-top: 10px; }

.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: #FFFFFF; margin-bottom: 6px; }
.feature p { font-size: 14px; color: var(--dim); }

/* The Pro chip: a quiet marker on the tools Bevel Pro unlocks. */
.pro { display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 1px 8px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 600;
  color: var(--accent); border: 1px solid var(--outline); border-radius: 999px;
  background: var(--panel); }

/* ---- The gallery. Real screen capture from the app on a phone, at half the
   panel's pixels (540x960 WebP), the fleet size (Bead, Sconce, Sandglass,
   Slate). Three across on a desktop, two on a phone. No device frame. ---- */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.shots figure { min-width: 0; }
.shots img { width: 100%; height: auto; display: block; border-radius: 16px;
  border: 1px solid var(--outline); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.shots figcaption { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
@media (max-width: 720px) { .shots { grid-template-columns: repeat(2, 1fr); } }

/* ---- 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); }
p.fine { color: var(--dim); font-size: 13px; margin-top: 16px; max-width: 720px; }
p.fine strong { color: var(--text); font-weight: 500; }

/* ---- Download. The official Google Play badge is the sole CTA (fleet rule),
   linking the listing directly. ---- */
.download-box { background: var(--panel); border: 1px solid var(--outline); border-radius: 16px;
  padding: 26px; margin-top: 14px; }
.store-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 0; }
.play-badge { display: block; height: 80px; width: auto; margin: 4px 0; }
.soon-note { color: var(--dim); font-size: 14px; margin-top: 14px; }
.legal-note { color: var(--faint); font-size: 12px; line-height: 1.5; }

article.page { padding: 40px 0 20px; }
article.page h1 { font-size: 26px; margin-bottom: 6px; color: #FFFFFF; }
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 ul li { margin-bottom: 4px; }
article.page .fine { color: var(--dim); font-size: 13px; }
article.page p + p { margin-top: 10px; }

/* ---- The changelog: one bordered entry per version, newest first. The
   family's shape. ---- */
.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); }

/* ---- Nav logo mark: the torpedo level vial with its bubble on centre, the
   same mark the studio hub's Bevel card carries. Hand-written SVG, no external
   asset. The only motion is the bubble brightening on hover. ---- */
.wordmark, .wordmark a { display: inline-flex; align-items: center; gap: 10px; }
.logo-s { width: 34px; height: 34px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .logo-s .bubble { transition: opacity .45s ease; opacity: .8; }
  .wordmark:hover .logo-s .bubble { opacity: 1; }
}

/* ---- 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; }
}