/* Slate: the family dark site, in the app's own palette.
   Structure and class vocabulary are lifted wholesale from Sandglass's stylesheet
   (which took them 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 Chalk skin (commonMain/skins/Skins.kt): backdrop #22262B, display
   #ECEFF1, preview #8B949C, accent #9FC1DB, digitBg #2C3138, fnBg #282E35,
   fnText #A9B4BD, equalsBg #5F87A8. Do not drift these from the app; this file
   is the site's copy.

   No web font: the app itself sets no custom face for Chalk (FontFamily.Default),
   so the site stands on system-ui and fetches nothing from anywhere. */
:root {
  --bg: #22262B;        /* the app's backdrop */
  --panel: #282E35;     /* fnBg: surface */
  --panel2: #2C3138;    /* digitBg: surface2 */
  --mist: #C4DCEE;      /* bright chalk blue: headings' company, links */
  --dim: #A9B4BD;       /* fnText: muted */
  --faint: #8B949C;     /* preview */
  --text: #ECEFF1;      /* display */
  --accent: #9FC1DB;    /* the chalk blue */
  --outline: #3A4149;   /* line, the board's 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: #E3F0FA; }

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(159,193,219,.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 five tools Slate 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).
   Three across on a desktop, two on a phone. No device frame, no mock-up. ---- */
.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 slate board with two chalk strokes, the same mark the
   studio hub carries for Slate. Hand-written SVG, no external asset. The only
   motion is the chalk 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 .chalk { transition: opacity .45s ease; opacity: .8; }
  .wordmark:hover .logo-s .chalk { 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; }
}