/* Colugo — one stylesheet for every page.
 *
 * It used to be a <style> block per page, which is exactly how the two drifted: the privacy
 * page ended up with a narrower container, a smaller masthead, a different line height, a
 * different footer offset, and no [data-theme="dark"] block at all. Shared tokens and shared
 * chrome mean the header and footer land in the same place whichever page you are on. */

:root {
  --gold: #F2B705;
  --ink: #1A1508;
  --ivory: #FFFBF0;

  --bg: var(--ivory);
  --fg: var(--ink);
  --muted: #6B6253;
  --card: #FFFFFF;
  --line: #E8DFC8;
  /* The muted chip from the mockups: a soft fill of the ink colour, no border. */
  --chip-bg: rgba(26, 21, 8, 0.07);
  --chip-fg: #3D3628;
}

/* Flat media query rather than CSS nesting: this file has no build step and no fallback, so a
   browser that misses nesting would lose dark mode entirely. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14110A;
    --fg: #FFFBF0;
    --muted: #B3AA98;
    --card: #1E1A11;
    --line: #322B1B;
    --chip-bg: rgba(255, 251, 240, 0.09);
    --chip-fg: #C7BEAC;
  }
}
:root[data-theme="dark"] {
  --bg: #14110A;
  --fg: #FFFBF0;
  --muted: #B3AA98;
  --card: #1E1A11;
  --line: #322B1B;
  --chip-bg: rgba(255, 251, 240, 0.09);
  --chip-fg: #C7BEAC;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 900px; margin: 0 auto; padding: 0 16px; }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- masthead ---------------------------------------------------------- */
header { padding: 28px 0 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mark {
  width: 40px; height: 35px; flex: none;
  background: var(--fg);
  -webkit-mask: url(/logo.png) no-repeat center / contain;
  mask: url(/logo.png) no-repeat center / contain;
}
.brand span { font-size: 21px; font-weight: 600; letter-spacing: 4px; }

.rule { width: 76px; height: 5px; background: var(--gold); border-radius: 3px; margin: 26px 0 0; }

/* ---- home: hero -------------------------------------------------------- */
.hero { padding: 64px 0 56px; }
.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, 8vw, 66px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.5px;
}
.hero p {
  margin: 0;
  max-width: 34em;
  font-size: clamp(17px, 2.4vw, 21px);
  color: var(--muted);
}

/* ---- home: app card ---------------------------------------------------- */
.app {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .app { grid-template-columns: 96px 1fr; align-items: start; }
}
.app-icon {
  width: 96px; height: 96px; border-radius: 22px;
  background: var(--gold);
  display: grid; place-items: center;
}
/* The scanner mark, not the glider: the glider is the Colugo family mark and lives in the
   masthead, while Colugo Scan's own launcher icon is the scanner. Portrait aspect (267x304),
   so height leads and width follows, otherwise it renders squashed. */
.app-icon i {
  width: 45px; height: 51px; display: block;
  background: var(--ink);
  -webkit-mask: url(/scan-icon.png) no-repeat center / contain;
  mask: url(/scan-icon.png) no-repeat center / contain;
}
.app h2 { margin: 0 0 6px; font-size: 27px; font-weight: 600; }
.app > div > p { margin: 0 0 18px; color: var(--muted); }

ul.feats { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
@media (min-width: 560px) { ul.feats { grid-template-columns: 1fr 1fr; } }
ul.feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
ul.feats li::before {
  content: ""; flex: none; width: 8px; height: 8px; margin-top: 9px;
  border-radius: 50%; background: var(--gold);
}

/* A status label, and it has been wrong twice: first a solid gold pill that read as the page's
   primary call to action, then an outlined badge with a leading dot sitting in the feature
   grid's left column, indistinguishable from a ninth bullet. Now its own full-width row below a
   rule, shaped like the muted chip in the mockups, with no dot to echo a list marker. */
.status {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 4px 0 0;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: 15px;
  font-weight: 500;
}
.app-rule {
  grid-column: 1 / -1;
  height: 1px;
  margin: 26px 0 0;
  background: var(--line);
  border: 0;
}

/* ---- prose pages (privacy) --------------------------------------------- */
/* Narrower than .wrap on purpose: the container stays 900px so the masthead and footer sit
   exactly where they do on the home page, while the text itself keeps a readable measure. */
.prose { max-width: 68ch; line-height: 1.62; }
.prose h1 { margin: 52px 0 6px; font-size: clamp(32px, 6vw, 46px); font-weight: 600; line-height: 1.12; }
.prose h2 { margin: 40px 0 10px; font-size: 22px; font-weight: 600; }
.prose p, .prose li { font-size: 16.5px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose strong { font-weight: 600; }
.updated { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.prose .rule { margin: 22px 0 40px; }
.note {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; margin: 0 0 14px;
}
.note p:last-child { margin-bottom: 0; }

/* ---- footer ------------------------------------------------------------ */
footer {
  margin-top: 64px; padding: 26px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
}
footer .dot { opacity: 0.5; }

/* ---- links ------------------------------------------------------------- */
/* Option C: at rest a gold underline, so a link is visible before anyone hovers it; on hover
   the band grows upward into a full highlight.
 *
 * The colour flip is not decoration. Ivory text on #F2B705 measures 1.82:1 and is unreadable,
 * while ink on gold is 10:1 -- so as the gold covers the glyphs the text has to become ink.
 * The 60ms delay on the colour lets the fill get underway first, which stops the text going
 * dark while the background behind it is still mostly page.
 *
 * The masthead is deliberately excluded: it is a logo lockup, not a link in running text. */
.prose a,
footer a {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
  padding: 2px 4px;
  margin: 0 -4px;
  border-radius: 3px;
  transition: background-size 340ms cubic-bezier(.22, .61, .36, 1), color 240ms ease 60ms;
}
.prose a:hover, .prose a:focus-visible,
footer a:hover, footer a:focus-visible {
  background-size: 100% 100%;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .prose a, footer a { transition: none; }
}