/* Sandglass: the family dark site, in the app's own palette.
   Structure and class vocabulary are lifted wholesale from Sconce's stylesheet
   (which took them from Bead's, which took them from Cork's, which took them
   from Baton's) so the family reads as one studio; only the palette and the
   face differ. The palette is the app's locked one (commonMain/ui/Theme.kt):
   ground #0B0D11, text #E9ECF1, muted #8E96A4, accent #E0A64B, accentBright
   #F2C071. Do not drift these from the app; this file is the site's copy.

   The face is Manrope (SIL OFL 1.1), the same file the app bundles, served
   from this origin (assets/fonts/) so the front door's same-origin CSP needs
   no font exception and nothing is fetched from a third party. The licence
   ships beside it. system-ui is the fallback while it loads, and forever on a
   browser that blocks web fonts. */
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #0B0D11;        /* the app's ground */
  --panel: #12151B;     /* surface */
  --panel2: #171B22;    /* surface2 */
  --mist: #F2C071;      /* accentBright: headings' company, links */
  --dim: #8E96A4;       /* muted */
  --faint: #5F6674;     /* faint: the ground line in the mark */
  --text: #E9ECF1;      /* text */
  --accent: #E0A64B;    /* the sand */
  --outline: #222732;   /* line */
  --good: #6FB27A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 "Manrope", 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: #FFD89A; }

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(224,166,75,.16), 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: 600px; color: var(--dim); font-size: 18px; }

/* The pillar strip: the fleet line, all six, in order. Sandglass is a local
   timer, so "Works offline" is literally true and stays (unlike Sconce, where
   casting is the product and the pillar was dropped). */
.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; }

/* ---- The film. Self-hosted <video>, served from R2 through the Worker with
   real byte ranges (iOS Safari needs a true 206); the poster is the only thing
   fetched before play. Never a YouTube iframe: the CSP has no frame-src. ---- */
.promo { margin-top: 18px; }
.promo .note { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }
/* height:auto AND aspect-ratio are both needed: with only width:100%, the
   element's height="1080" attribute still applies and the box renders far too
   tall, letterboxing the poster inside it. */
.promo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  background: #000; border-radius: 16px;
  border: 1px solid var(--outline); box-shadow: 0 18px 44px rgba(0,0,0,.55); }
.note { color: var(--dim); font-size: 13px; margin-top: 12px; }

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

/* ---- The task grid: the one diagram on the site. A handful of tiles, one of
   them lit: exactly one thing runs at a time, because that is how a day goes.
   Pure CSS; the tiles are the app's idea drawn in the app's palette, not a
   screenshot. ---- */
.taskgrid { margin-top: 18px; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tile { background: var(--panel2); border: 1px solid var(--outline); border-radius: 14px;
  padding: 16px 16px 14px; color: var(--dim); font-size: 14.5px; font-weight: 500; min-height: 84px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; }
.tile .t { color: var(--text); }
.tile .e { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tile.on { border-color: rgba(224,166,75,.55); background: linear-gradient(180deg, rgba(224,166,75,.12), rgba(224,166,75,.04)); }
.tile.on .t { color: var(--mist); }
.tile.on .e { color: var(--accent); }
.tile.own { border-style: dashed; }
.tile.own .t { color: var(--dim); }

/* ---- The gallery. Real screen capture from the app on a phone, at half the
   panel's pixels (540x960 WebP), which is the size Bead and Sconce already use.
   Four across on a desktop, two on a phone. No device frame, no mock-up. ---- */
.shots { display: grid; grid-template-columns: repeat(4, 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,.55); }
.shots figcaption { margin-top: 8px; font-size: 12.5px; color: var(--faint); }
@media (max-width: 720px) { .shots { grid-template-columns: repeat(2, 1fr); } }

/* ---- Hours mode: two cards, the knock-off time and the balance. The numbers
   are illustrative and say so in the copy. No red anywhere: a long day is a
   fact, not a fault, and the "owed" figure is the same ink as "in credit". ---- */
.tiers { margin-top: 18px; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tier { background: var(--panel2); border: 1px solid var(--outline); border-radius: 16px; padding: 20px 22px; }
.tier h3 { font-size: 15px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; margin-bottom: 8px; color: var(--accent); }
.tier p { font-size: 14.5px; color: var(--dim); }
.tier .verdict { display: block; margin-top: 10px; font-size: 13.5px; color: var(--text); }
.tier .big { display: block; font-size: 30px; font-weight: 600; color: #FFFFFF; letter-spacing: .5px; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }

.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 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; }

/* ---- Status banner. Not a link: there is no Early Access page to send anyone
   to yet, and no listing to link at. One honest line, and nothing to press. ---- */
.earlybar {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: calc(100% - 44px); max-width: 880px; margin: 10px auto 12px;
  padding: 10px 22px; text-align: center; font-size: 14px; color: var(--text);
  background: linear-gradient(90deg, rgba(224,166,75,.15), rgba(242,192,113,.07));
  border: 1px solid var(--outline); border-radius: 14px;
}
.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;
}

/* ---- Store CTA (Early Access live on Google Play, 2026-09-04): the official Google Play
   badge is the sole download CTA, fleet rule. ---- */
.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 .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; }
article.page p + p { margin-top: 10px; }

/* ---- The changelog: one bordered entry per version, newest first. Bead's and
   Sconce's shape, so the family reads as one studio. ---- */
.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: a sandglass, two bulbs at a waist, a little sand through,
   a little sand down. Hand-written SVG, no external asset. The only motion is
   the stream showing on hover (Bead's bead slides, Sconce's light brightens;
   this one runs). The repo's design/icon.svg is the canonical launcher mark and
   this one will be re-drawn from it once that lands. ---- */
.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 .stream { transition: opacity .45s ease; opacity: .55; }
  .wordmark:hover .logo-s .stream { 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; }
}

/* ---- Narrow phones: trim the status banner. It has no CTA to move down, so the
   only change is the card metrics and dropping the tag pill, which took a whole
   line of its own on a phone (2026-08-23) ---- */
@media (max-width: 560px) {
  .earlybar { border-radius: 18px; padding: 10px 14px; font-size: 13px; }
  .earlybar-tag { display: none; }
}