/* boosterboard - shared styles for every subscriber-facing page.
   Served by Caddy at /brand/bb.css. Edit here, no workflow redeploy needed.
   2026-09-08. */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&display=swap");

:root {
  --navy:   #1F2D4A;
  --navy-2: #33436A;
  --gold:   #B5851A;
  --gold-2: #C68A1E;
  --paper:  #FCFBF8;
  --card:   #FFFFFF;
  --sunk:   #F4F1E9;
  --ink:    #1A1C22;
  --muted:  #5A5C66;
  --line:   #E5E0D4;
  --line-2: #D4CEBF;
  --good:   #2F7D5D;
  --bad:    #A23B27;
  --focus:  #C68A1E;
  /* Same purple as the calendar feed's own "mythic" 🟣 value-check verdict
     (2026-09-13) - WPN's "Premium store" badge, deliberately NOT --gold:
     Mandi mistook it for our own Gold subscription tier since both
     rendered the same warm yellow-gold. Reuses this product's own
     established "mythic" = standout/distinct vocabulary instead of
     inventing a new color. */
  --mythic: #7C4A9E;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(26,28,34,.04), 0 10px 30px -14px rgba(31,45,74,.18);
  --wordmark-a: var(--navy);
  --wordmark-b: var(--gold);
  --btn-bg: #1F2D4A;
  --btn-fg: #FFFFFF;
  --logo: url("/brand/favicon.svg");
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:   #5C74A8;
    --navy-2: #7A90C0;
    --gold:   #D9A83E;
    --gold-2: #E0B255;
    --paper:  #14161C;
    --card:   #1C1F27;
    --sunk:   #1A1D24;
    --ink:    #E9E7DF;
    --muted:  #9A98A0;
    --line:   #2E3138;
    --line-2: #3A3E47;
    --good:   #5FB588;
    --bad:    #D98168;
    --focus:  #E0B255;
    --mythic: #B57EDB;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px -16px rgba(0,0,0,.6);
    --wordmark-a: #E9E7DF;
    --wordmark-b: #D9A83E;
    --btn-bg: #D9A83E;
    --btn-fg: #17130A;
    --logo: url("/brand/favicon.svg");
  }
}
:root[data-theme="dark"] {
  --navy:   #5C74A8;
  --navy-2: #7A90C0;
  --gold:   #D9A83E;
  --gold-2: #E0B255;
  --paper:  #14161C;
  --card:   #1C1F27;
  --sunk:   #1A1D24;
  --ink:    #E9E7DF;
  --muted:  #9A98A0;
  --line:   #2E3138;
  --line-2: #3A3E47;
  --good:   #5FB588;
  --bad:    #D98168;
  --focus:  #E0B255;
  --mythic: #B57EDB;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px -16px rgba(0,0,0,.6);
  --wordmark-a: #E9E7DF;
  --wordmark-b: #D9A83E;
  --btn-bg: #D9A83E;
  --btn-fg: #17130A;
  --logo: url("/brand/favicon.svg");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--navy) 7%, transparent), transparent 60%),
    var(--paper);
  color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}
.bb-shell {
  max-width: 34rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 1.75rem) 4rem;
}
.bb-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 4vw, 2rem);
}

/* wordmark / header */
.bb-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: 1.6rem;
}
.bb-brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
}
.bb-plan-badge {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .32rem .75rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.bb-plan-badge--free {
  color: var(--muted);
  background: var(--sunk);
  border: 1px solid var(--line-2);
}
.bb-plan-badge--gold {
  color: #1c1408;
  background: var(--gold-2);
  box-shadow: 0 0 9px 1px color-mix(in srgb, var(--gold) 45%, transparent);
}
.bb-plan-badge:hover { filter: brightness(1.06); }
.bb-brand::before {
  content: "";
  width: 30px; height: 30px;
  background: var(--logo) center / contain no-repeat;
  flex: none;
}
.bb-brand span {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.28rem;
  letter-spacing: -0.02em;
  color: var(--wordmark-a);
}
.bb-brand span b { color: var(--wordmark-b); font-weight: 700; }

h1 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 5vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 .4rem;
}
h2 {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1.06rem;
  letter-spacing: -0.01em;
  margin: 1.6rem 0 .5rem;
}
.bb-lede { color: var(--muted); font-size: 1.05rem; margin: 0 0 1.5rem; text-wrap: pretty; }
p { margin: .7rem 0; }
a { color: var(--navy); text-underline-offset: 2px; }
code, .bb-mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}

/* forms */
.bb-field { margin: 1.1rem 0; }
.bb-field > label,
.bb-legend {
  display: block;
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: .4rem;
}
.bb-hint { font-size: .86rem; color: var(--muted); margin: .25rem 0 .5rem; }
input[type=text], input[type=email], input[type=number], select {
  width: 100%;
  font: inherit;
  padding: .62rem .7rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  appearance: none;
}
input[type=number] { max-width: 8rem; }
select {
  max-width: 100%;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.05em, calc(100% - 13px) 1.05em;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
input:focus-visible, select:focus-visible { border-color: var(--focus); }

fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 1.1rem 0;
  padding: .8rem 1rem 1rem;
  min-width: 0;
}
fieldset legend {
  font-weight: 600;
  font-size: .95rem;
  padding: 0 .35rem;
}
.bb-opt {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .35rem 0;
  font-size: .97rem;
}
.bb-opt input { flex: none; width: auto; }

/* buttons */
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font: inherit;
  font-weight: 600;
  padding: .7rem 1.3rem;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-decoration: none;
  transition: filter .12s ease, transform .12s ease;
}
.bb-btn:hover { filter: brightness(1.06); }
.bb-btn:active { transform: translateY(1px); }
.bb-btn--full { width: 100%; margin-top: 1.4rem; }
.bb-btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.bb-btn--gold { background: var(--gold-2); color: #1c1408; }

/* status / callouts */
.bb-banner {
  border-radius: 8px;
  padding: .8rem 1rem;
  font-size: .92rem;
  margin-bottom: 1.2rem;
  border: 1px solid;
}
.bb-banner--err  { background: color-mix(in srgb, var(--bad) 10%, var(--card)); border-color: color-mix(in srgb, var(--bad) 35%, transparent); color: var(--bad); }
.bb-banner--ok   { background: color-mix(in srgb, var(--good) 10%, var(--card)); border-color: color-mix(in srgb, var(--good) 35%, transparent); color: var(--good); }
.bb-banner--warn { background: color-mix(in srgb, var(--gold) 12%, var(--card)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: color-mix(in srgb, var(--gold) 55%, var(--ink)); }
.bb-banner--warn strong { color: color-mix(in srgb, var(--gold) 70%, var(--ink)); }

.bb-note {
  background: var(--sunk);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  font-size: .92rem;
  color: var(--muted);
  margin: 1.2rem 0;
}
.bb-note--tip {
  background: color-mix(in srgb, var(--gold) 9%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.bb-note--tip a { color: color-mix(in srgb, var(--gold) 60%, var(--ink)); font-weight: 600; }

/* copy-to-clipboard field (completion page) */
.bb-copy {
  display: flex;
  gap: .4rem;
  margin: .5rem 0 1rem;
}
.bb-copy input {
  flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .82rem;
  background: var(--sunk);
}

.bb-foot {
  margin-top: 2.4rem;
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.bb-foot a { color: var(--muted); }

/* promo landing pages (shirt/CCN one-pagers, 2026-09-28) - a mocked-up calendar-app
   event card so a cold visitor sees the actual product before being asked for an email,
   plus a plain Free/Gold comparison row so "free" isn't buried in an FAQ. */
.bb-section-label {
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .7rem;
}
.bb-previews { display: grid; gap: .8rem; margin-bottom: .5rem; }
.bb-app-label { display: flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.bb-app-label svg { width: 13px; height: 13px; flex: none; }
.bb-preview-note { font-size: .8rem; color: var(--muted); margin: 0 0 1.5rem; text-align: center; }

.bb-ios-card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 13px;
  padding: .9rem .95rem;
}
.bb-ios-cal-row { display: flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--muted); margin-bottom: .55rem; }
.bb-ios-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-2); flex: none; }
.bb-ios-title { font-size: 1.03rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.25; }
.bb-ios-row { display: flex; gap: .55rem; padding: .4rem 0; border-top: 1px solid var(--line); font-size: .84rem; }
.bb-ios-row:first-of-type { border-top: none; }
.bb-ios-row svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--muted); }
.bb-ios-row .t1 { color: var(--ink); }
.bb-ios-row .t2 { color: var(--muted); font-size: .8rem; }

.bb-g-card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: 8px;
  padding: .9rem .95rem .9rem 1.05rem; position: relative; overflow: hidden;
}
.bb-g-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy); }
.bb-g-title { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; }
.bb-g-row { display: flex; gap: .5rem; padding: .28rem 0; font-size: .84rem; align-items: flex-start; }
.bb-g-row svg { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--muted); }
.bb-g-row .t1 { color: var(--ink); }
.bb-g-desc { font-size: .8rem; color: var(--muted); margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }

.bb-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-bottom: 1.5rem; }
.bb-plan { border: 1px solid var(--line-2); border-radius: 9px; padding: .8rem .85rem; }
.bb-plan .name { font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.bb-plan--gold { border-color: color-mix(in srgb, var(--gold) 45%, var(--line-2)); background: color-mix(in srgb, var(--gold) 6%, var(--card)); }
.bb-plan--gold .name { color: color-mix(in srgb, var(--gold) 65%, var(--ink)); }
.bb-plan .price { font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 1.05rem; margin-bottom: .25rem; }
.bb-plan .desc { font-size: .78rem; color: var(--muted); line-height: 1.4; }
.bb-plan .desc b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }