/* ============================================================
   Briefed — shared design system
   Brand Book v2.0, August 2026
   Single source of truth for tokens and shared components.
   Page-specific rules stay in each page's own <style> block.
   Bump the ?v= number in every <link> when this file changes.
   ============================================================ */

:root {
  /* ── Surfaces ──────────────────────────────────────
     Paper Cream is the brand surface. The warm chrome
     neutrals (#F2F0EC, #F9F8F6, #FFFDF8) belong to the app,
     not to this site, so only --card borrows one.          */
  --bg:        #F2EFE6;   /* Paper Cream */
  --bg2:       #EAE7DC;   /* alternating band */
  --card:      #FFFDF8;
  --border:    #DDD8CF;   /* Seam */

  /* ── Ink ──────────────────────────────────────────── */
  --tx:        #1C1C17;   /* Vault Ink */
  --tx2:       #55554B;
  --tx3:       #8A8A7E;

  /* ── Teal ─────────────────────────────────────────────
     #4ABFBC is the ONLY teal fill: buttons, pills, selected
     rows, the wordmark dot. Flat, never a gradient.
     The 5BD6CC -> 37B5A9 gradient is the icon tile only and
     is deliberately absent from this stylesheet.           */
  --teal:       #4ABFBC;
  --teal-dk:    #2A8F86;  /* Teal 700 */
  --teal-lt:    #E8F6F5;
  --teal-300:   #8FE6DE;
  --teal-label: #06322F;  /* labels and icons sitting on teal */
  --focus:      #257E7A;  /* 2px focus ring only, never a fill */
  --link-hover: #17605D;  /* link hover only */

  /* ── Dark ground ──────────────────────────────────── */
  --dark:      #0B1A17;   /* Deep Vault */
  --dark2:     #11221E;
  --dark3:     #172B26;
  --dark-tx:   #F2EFE6;
  --dark-tx2:  #93A8A3;
  --dark-tx3:  #6A807B;
  --dark-bdr:  #24403A;

  /* ── Radius ───────────────────────────────────────────
     999px is valid on single-line boxes only. Anything that
     can wrap to a second line takes --r-input.             */
  --r:        6px;
  --r-input:  16px;
  --r-pill:   999px;

  /* ── Type ─────────────────────────────────────────────
     System sans for the wordmark and headlines, so Briefed
     looks like whatever OS it is on. Figtree for reading.
     JetBrains Mono for counts, keys, labels, timestamps.
     There is no serif in the brand.                        */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: 'Figtree', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--tx);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* Focus ring: 2px, #257E7A, never a fill */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ── HEADLINES ─────────────────────────────────────────
   Flush left and tight, in the same face as the wordmark. */
h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--tx);
  line-height: 1.1;
}
h1 { font-weight: 800; letter-spacing: -.035em; }
h2 { font-weight: 800; letter-spacing: -.025em; }
h3 { font-weight: 700; letter-spacing: -.015em; }

/* ── WORDMARK ──────────────────────────────────────────
   The dot is part of the mark, not punctuation. Rounded
   square, #4ABFBC, never black, never a text period.
   Briefed Pro drops the dot; the PRO pill takes its place. */
.wordmark {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -.045em;
  color: var(--tx);
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
}
.wordmark .wm-dot {
  display: inline-block;
  width: .26em; height: .26em;
  border-radius: .075em;
  background: var(--teal);
  margin-left: .09em;
  flex-shrink: 0;
}
.wordmark.on-dark { color: var(--dark-tx); }

/* ── LABELS ────────────────────────────────────────────
   Mono 500, +22% tracking, caps. Counts, keys, eyebrows.  */
.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal-dk);
  margin-bottom: 14px;
}
.label-dark { color: var(--teal); }
.label-muted { color: var(--tx3); }

/* ── NAV ───────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(242,239,230,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px;
}
.nav-logo { font-size: 17px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  font-size: 13.5px; font-weight: 600; color: var(--tx2);
  white-space: nowrap; transition: color .15s;
}
.nav-links a:hover { color: var(--link-hover); }
.nav-actions { display: flex; gap: 10px; align-items: center; }

/* ── BUTTONS ───────────────────────────────────────────
   Single-line boxes, so the pill radius is valid here.    */
.btn-nav-ghost, .btn-nav-gold {
  height: 34px; border-radius: var(--r-pill);
  font-size: 13px; font-family: var(--body);
  cursor: pointer; white-space: nowrap;
  transition: all .15s;
}
.btn-nav-ghost {
  padding: 0 14px; background: none;
  border: 1px solid var(--border); font-weight: 600; color: var(--tx2);
}
.btn-nav-ghost:hover { border-color: var(--tx2); color: var(--tx); }
.btn-nav-gold {
  padding: 0 16px; background: var(--teal); border: none;
  font-weight: 700; color: var(--teal-label);
}
.btn-nav-gold:hover { background: var(--teal-dk); color: #fff; }

.btn-cta {
  display: inline-block; background: var(--teal); color: var(--teal-label);
  font-family: var(--body); font-size: 14.5px; font-weight: 700;
  padding: 11px 22px; border-radius: var(--r-pill);
  border: none; cursor: pointer; transition: background .15s, color .15s;
}
.btn-cta:hover { background: var(--teal-dk); color: #fff; text-decoration: none; }

.btn-submit {
  background: var(--teal); color: var(--teal-label); border: none;
  font-family: var(--body); font-size: 14.5px; font-weight: 700;
  white-space: nowrap; padding: 13px 22px;
  border-radius: var(--r-pill); cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-submit:hover { background: var(--teal-dk); color: #fff; }

/* ── FORMS ─────────────────────────────────────────────
   Inputs can wrap, so they take --r-input, not the pill.  */
label {
  display: block; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx2); margin-bottom: 7px;
}
input, select, textarea {
  width: 100%; font-family: var(--body); font-size: 15.5px;
  color: var(--tx); background: var(--card);
  border: 1px solid var(--border); border-radius: var(--r-input);
  padding: 12px 14px; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
textarea { resize: vertical; min-height: 130px; }

/* Honeypot: hidden from people, catches bots that fill every field */
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ── CARDS AND PANELS ──────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: 24px 28px;
}
.panel-dark {
  background: var(--dark); color: var(--dark-tx);
  border-radius: var(--r-input); padding: 28px 30px;
}
.panel-dark p { color: var(--dark-tx2); }
.panel-dark strong { color: var(--dark-tx); }

/* ── FOOTER ────────────────────────────────────────── */
.footer {
  background: var(--dark2);
  border-top: 1px solid var(--dark-bdr);
  padding: 40px 24px;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px; text-align: center;
}
.footer-logo { font-size: 18px; }
.footer-links {
  display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: center;
}
.footer-links a {
  font-size: 13px; color: var(--dark-tx2);
  white-space: nowrap; transition: color .12s;
}
.footer-links a:hover { color: var(--dark-tx); }
.footer-copy {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; color: var(--dark-tx3);
}

/* Light footer used by the sub-pages */
.footer-light {
  border-top: 1px solid var(--border); padding: 24px;
  text-align: center; font-size: 13px; color: var(--tx3);
}
.footer-light a { color: var(--tx3); }
.footer-light a:hover { color: var(--link-hover); }

/* ── SHARED LAYOUT ─────────────────────────────────── */
.container    { max-width: 1000px; margin: 0 auto; }
.container-sm { max-width: 680px;  margin: 0 auto; }
.container-lg { max-width: 1100px; margin: 0 auto; }

.prose a { color: var(--teal-dk); }
.prose a:hover { color: var(--link-hover); text-decoration: underline; }

/* ── SUB-PAGES ─────────────────────────────────────────
   Blog, privacy, contact, prompt pass. The homepage keeps
   its own layout rules in its own <style> block.         */
.page { max-width: 680px; margin: 0 auto; padding: 64px 24px 96px; }
.page-narrow { max-width: 560px; }
.page h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 10px; }
.page h2 { font-size: 20px; margin: 40px 0 10px; }
.page .sub { font-size: 15.5px; color: var(--tx2); margin-bottom: 40px; max-width: 52ch; }
.page p  { color: var(--tx2); margin-bottom: 14px; }
.page ul { color: var(--tx2); padding-left: 20px; margin-bottom: 14px; }
.page ul li { margin-bottom: 6px; }
.page a  { color: var(--teal-dk); }
.page a:hover { color: var(--link-hover); text-decoration: underline; }
.page code { font-family: var(--mono); font-size: 13px; }
.page strong { color: var(--tx); }

.meta {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 48px;
}
.back-link {
  display: inline-block; font-family: var(--mono);
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--tx3); margin-bottom: 32px;
}
.back-link:hover { color: var(--link-hover); text-decoration: none; }
.divider-rule { border: none; border-top: 1px solid var(--border); margin: 40px 0; }
.form-note { font-size: 12.5px; color: var(--tx3); margin-top: 12px; }
.success-box { display: none; }
.success-box.show { display: block; }
.success-box h2 { color: var(--dark-tx); font-size: 19px; margin: 0 0 8px; }
.success-box p  { color: var(--dark-tx2); font-size: 14.5px; margin: 0; }