/* Sconce — the family dark site, in the app's own palette.
   Structure and class vocabulary are lifted wholesale from Bead's stylesheet
   (which took them from Cork's, which took them from Baton's) so the family
   reads as one studio; only the palette differs. Bead's ground is near-black
   with an electric-blue accent; Sconce's is the same darkness with the warm
   amber of a wall light, because the app's whole job is to put a warm picture
   on a wall in a dim room. Do not drift these from the app once the app has a
   locked palette object — this file is the site's copy of it. */
:root {
  --bg: #08090C;        /* page field, a touch deeper than the app ground */
  --panel: #121319;     /* surface */
  --panel2: #171820;    /* surface2 */
  --mist: #F0B65C;      /* accentBright — headings' company, links */
  --dim: #96907F;       /* muted */
  --faint: #6A6558;     /* faint */
  --text: #ECE7DE;      /* warm off-white, not paper white */
  --accent: #E8A33D;    /* the sconce's own light */
  --outline: #262620;   /* 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 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: #ffd394; }

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(232,163,61,.17), 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: #FAF5EC; }
.hero p.sub { margin: 16px auto 0; max-width: 580px; color: var(--dim); font-size: 18px; }

/* The pillar strip. "Works offline" is deliberately absent on this site: casting
   is not an offline feature — the TV loads the receiver page from us over the
   internet — and a pillar that needs a carve-out next to it every time it appears
   is not a pillar. Owner decision 17, 2026-08-16. */
.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: #FAF5EC; 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 two tiers: the one diagram on the site, and the app's central honesty.
   A photo show is prefetched onto the TV and survives a locked phone; a video is
   streamed from the phone and does not. Two cards, never one blended claim. ---- */
.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; }
.tier.photos h3 { color: var(--accent); }
.tier.videos h3 { color: var(--dim); }
.tier p { font-size: 14.5px; color: var(--dim); }
.tier .verdict { display: block; margin-top: 10px; font-size: 13.5px; color: var(--text); }

.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: #FAF5EC; 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); }

/* ---- 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;
  padding: 10px 22px; text-align: center; font-size: 14px; color: var(--text);
  background: linear-gradient(90deg, rgba(232,163,61,.15), rgba(240,182,92,.07));
  border-top: 1px solid var(--outline); border-bottom: 1px solid var(--outline);
}
.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;
}

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

article.page { padding: 40px 0 20px; }
article.page h1 { font-size: 26px; margin-bottom: 6px; color: #FAF5EC; }
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; }

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 wall sconce — the bracket, the bowl, and the cone of
   warm light washing up the wall. Hand-written SVG, no external asset, and the
   only motion is the light coming up a little on hover (Bead's bead slides,
   Baton's arm swings; this one brightens). ---- */
.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 .glow { transition: opacity .45s ease; opacity: .78; }
  .wordmark:hover .logo-s .glow { 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; }
}