/* ===========================================================================
   BB2G HOUSE STYLE — "Certificate"
   Born Between 2 Generals LLC

   Taken straight off the business card: ivory stock, near-black high-contrast
   serif, antique gold engraving, a black bar with gold letterspaced caps.
   Navy is NOT a brand colour here — it only ever appears inside the flag.

   Drop-in: load this LAST, after whatever stylesheet an app already has.
       <link rel="stylesheet" href="house.css">
   It overrides the component classes the BB2G apps share, so most surfaces
   need nothing else. The bbg-* classes are new furniture you can opt into.
   =========================================================================== */

:root {
  /* stock */
  --paper:#f1ece3;          /* the card's ivory */
  --paper-2:#f7f3ec;
  --panel:#fbf9f4;

  /* ink */
  --ink:#0a0a0a;            /* the card's near-black */
  --ink-2:#3d382f;
  --ink-3:#6f6759;

  /* engraved gold */
  --gold:#a07020;
  --gold-mid:#c9a24a;
  --gold-hi:#f0d0a0;
  --gold-dk:#6f4d14;
  --metal:linear-gradient(180deg,#f0d0a0 0%,#d9b45e 30%,#a07020 64%,#7d5616 100%);
  --rule:rgba(160,112,32,.42);
  --rule-soft:rgba(160,112,32,.18);

  /* flag, used sparingly */
  --red:#a82818;
  --navy:#1b2f5e;

  --line:var(--rule-soft);
  --shadow:0 1px 1px rgba(35,26,10,.05), 0 10px 26px -16px rgba(35,26,10,.35);
  --shadow-lg:0 2px 8px rgba(35,26,10,.14), 0 34px 70px -28px rgba(35,26,10,.5);

  --serif:"Didot","Bodoni 72","Bodoni MT","Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Segoe UI",system-ui,Arial,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:#0b0a08; --paper-2:#121110; --panel:#17150f;
    --ink:#f3ede2; --ink-2:#cabfab; --ink-3:#8e8574;
    --rule:rgba(201,162,74,.45); --rule-soft:rgba(201,162,74,.2);
    --shadow:0 1px 1px rgba(0,0,0,.5), 0 12px 30px -16px rgba(0,0,0,.8);
  }
}
html[data-theme="dark"] {
  --paper:#0b0a08; --paper-2:#121110; --panel:#17150f;
  --ink:#f3ede2; --ink-2:#cabfab; --ink-3:#8e8574;
  --rule:rgba(201,162,74,.45); --rule-soft:rgba(201,162,74,.2);
}
html[data-theme="light"] {
  --paper:#f1ece3; --paper-2:#f7f3ec; --panel:#fbf9f4;
  --ink:#0a0a0a; --ink-2:#3d382f; --ink-3:#6f6759;
  --rule:rgba(160,112,32,.42); --rule-soft:rgba(160,112,32,.18);
}

/* ------------------------------------------------------------------ stock */
body {
  background:var(--paper) !important;
  color:var(--ink);
  font-family:var(--sans);
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
  position:relative;
}
body::before { display:none !important; }          /* retire the old RWB stripe */
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:var(--grain); background-size:160px 160px;
  opacity:.05; mix-blend-mode:multiply;
}
@media (prefers-color-scheme: dark) { body::after { opacity:.07; mix-blend-mode:screen; } }
html[data-theme="dark"] body::after { opacity:.07; mix-blend-mode:screen; }
body > * { position:relative; z-index:1; }

::selection { background:var(--gold-hi); color:var(--ink); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:0; }
a { color:var(--gold-dk); }
@media (prefers-color-scheme: dark) { a { color:var(--gold-mid); } }

/* ------------------------------------------------------------------- type */
h1, h2, h3, .card h2, .sec-head h2, .app-card .name, .ct-modal-head h2,
.onboard-slide h2, .ob-slide h2, .hero h1, header h1, .s3 h3 {
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  letter-spacing:-.005em;
  text-wrap:balance;
}
.hero h1, header h1 { font-weight:400; letter-spacing:.005em; line-height:1.05; }
p, li, .desc, .card p, .stx { font-variant-numeric:oldstyle-nums proportional-nums; color:var(--ink-2); }
input, select, textarea, .timer, .stat b, time { font-variant-numeric:tabular-nums; }

/* every small label on the card is letterspaced caps */
.eyebrow, .kicker, .app-card .kicker, .sec-num, .ct-menu-h, .ct-foot .gold,
.badge, .sub-h, .group-h, .plabel {
  font-family:var(--sans);
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; font-weight:700;
  color:var(--gold-dk);
}
@media (prefers-color-scheme: dark) { .eyebrow, .kicker, .sec-num, .group-h, .sub-h { color:var(--gold-mid); } }
.eyebrow { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
.eyebrow::before { content:"\2605"; font-size:.62rem; color:var(--gold); margin:0; }
.eyebrow::after {
  content:""; flex:1 1 auto; height:1px; min-width:16px;
  background:linear-gradient(90deg,var(--rule),transparent);
}

/* metallic gold text — for wordmarks and figures, never body copy */
.metal, .bbg-metal {
  background:var(--metal); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}

/* ------------------------------------------------------- house furniture */
.bbg-frame { position:relative; }
.bbg-frame::before, .bbg-frame::after {
  content:""; position:absolute; pointer-events:none;
}
.bbg-frame::before { inset:10px; border:1px solid var(--rule); }
.bbg-frame::after  { inset:16px; border:1px solid var(--rule-soft); }
.bbg-corner { position:absolute; width:26px; height:26px; border:1.5px solid var(--gold); z-index:2; }
.bbg-corner.tl { top:10px; left:10px;  border-right:0; border-bottom:0; }
.bbg-corner.tr { top:10px; right:10px; border-left:0;  border-bottom:0; }
.bbg-corner.bl { bottom:10px; left:10px;  border-right:0; border-top:0; }
.bbg-corner.br { bottom:10px; right:10px; border-left:0;  border-top:0; }

.bbg-stars { display:flex; gap:11px; justify-content:center; align-items:center; color:var(--gold); }
.bbg-stars::before, .bbg-stars::after {
  content:""; width:64px; height:1px; background:linear-gradient(90deg,transparent,var(--rule));
}
.bbg-stars::after { transform:scaleX(-1); }
.bbg-stars span { font-size:.72rem; letter-spacing:.5em; }

.bbg-starrule { display:flex; align-items:center; gap:14px; margin:22px 0; color:var(--gold); }
.bbg-starrule::before, .bbg-starrule::after {
  content:""; flex:1 1 auto; height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent);
}
.bbg-starrule span { font-size:.72rem; }

.bbg-bar {
  background:#0a0a0a; color:var(--gold-hi);
  padding:13px 18px; text-align:center;
  font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; font-weight:700;
  border-top:1px solid var(--gold); border-bottom:1px solid var(--gold);
}
.bbg-bar b { font-weight:700; color:var(--gold-hi); }
.bbg-bar .sep { color:var(--gold); opacity:.7; margin:0 12px; }

.bbg-mark { display:block; margin:0 auto; }
.bbg-tagline { font-family:var(--serif); font-style:italic; color:var(--gold-dk); }

/* ------------------------------------------------------------- headers */
header, .hero, header.site {
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255,255,255,.5), rgba(255,255,255,0) 60%),
    linear-gradient(180deg,var(--paper-2),var(--paper)) !important;
  color:var(--ink) !important;
  border-bottom:none !important;
  box-shadow:inset 0 -1px 0 var(--rule), 0 1px 0 var(--rule-soft);
  position:relative; overflow:hidden;
}
header::after, .hero::after {
  content:""; position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg,transparent,var(--rule) 12%,var(--rule) 88%,transparent);
  border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft);
  background-clip:content-box;
}
header h1, .hero h1, header.site h1 { color:var(--ink) !important; }
header p, .hero .lead, header.site .tag { color:var(--ink-2) !important; }
.hero .kick { color:var(--gold-dk) !important; }
.corner { border-color:var(--gold) !important; }

.badge {
  display:inline-block; background:transparent !important;
  border:1px solid var(--rule) !important; color:var(--gold-dk) !important;
  border-radius:0 !important; padding:6px 18px !important; box-shadow:none !important;
}
.badge::before { content:"\2605"; color:var(--gold); margin-right:10px; }
@media (prefers-color-scheme: dark) { .badge { color:var(--gold-mid) !important; } }

/* app hero emblem sits in a ruled roundel */
.hero-art, .medallion { position:relative; }
.hero-art::before, .medallion::before { border-color:var(--rule) !important; }
.hero-art::after, .medallion::after { border-color:var(--rule-soft) !important; }
.hero-art svg [stroke="#fff"], .hero-art svg [stroke="#ffffff"] { stroke:var(--ink); }
.hero-art svg [stroke="#9db8d6"] { stroke:var(--gold-mid); }
.hero-art svg [fill="#c5a046"] { fill:var(--gold); }

/* --------------------------------------------------------------- plates */
.card, .app-card, .s3, .why div, .vid, .proc, details.proc,
.onboard-card, .ob-card, .ct-menu, .ct-modal-card, .sheet-card {
  background:var(--panel) !important;
  border:1px solid var(--rule-soft) !important;
  border-radius:0 !important;
  box-shadow:var(--shadow) !important;
}
.card::before, .s3::before, .why div::before, .app-card::before { display:none; }
.app-card:hover, .vid:hover { border-color:var(--gold) !important; box-shadow:var(--shadow-lg) !important; }
.app-card .strip { height:2px !important; background:var(--metal) !important; }
.app-card .glyph {
  background:transparent !important; border:1px solid var(--rule) !important;
  border-radius:0 !important; color:var(--gold-dk) !important; box-shadow:none !important;
}
@media (prefers-color-scheme: dark) { .app-card .glyph { color:var(--gold-mid) !important; } }
.card h3 { color:var(--gold-dk) !important; font-family:var(--serif); }
@media (prefers-color-scheme: dark) { .card h3 { color:var(--gold-mid) !important; } }

.sec-head { border-bottom:none !important; position:relative; padding-bottom:13px; }
.sec-head::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--rule); opacity:.5;
}

/* -------------------------------------------------------------- controls */
.btn, .cta, .ct-open-app, .app-card .open, .ct-btn, .watch, .call-btn, .fab {
  border-radius:0 !important; letter-spacing:.12em; text-transform:uppercase;
  font-size:.72rem; font-weight:700; font-family:var(--sans);
}
.btn, .app-card .open, .ct-open-app, .cta:not(.gold) {
  background:#0a0a0a !important; background-image:none !important;
  border:1px solid #0a0a0a !important; color:var(--gold-hi) !important;
  box-shadow:none !important;
}
.btn:hover, .app-card .open:hover, .ct-open-app:hover, .cta:not(.gold):hover {
  background:#1c1a15 !important; border-color:var(--gold) !important;
}
.btn.amber, .btn.gold, .cta.gold, .ct-btn.ct-gold {
  background:var(--metal) !important; border:1px solid var(--gold-dk) !important;
  color:#231a08 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.45) !important;
}
.btn.amber:hover, .btn.gold:hover, .cta.gold:hover, .ct-btn.ct-gold:hover { filter:brightness(1.06); }
.btn.ghost, .btn.secondary, .watch {
  background:transparent !important; background-image:none !important;
  border:1px solid var(--rule) !important; color:var(--ink-2) !important; box-shadow:none !important;
}
.btn.ghost:hover, .watch:hover { border-color:var(--gold) !important; color:var(--ink) !important; }
.btn.red, .btn.danger, .call-btn, .fab {
  background:var(--red) !important; background-image:none !important;
  border:1px solid #7d1a10 !important; color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.call-btn { font-size:1rem; letter-spacing:.14em; padding:17px !important; }

nav.tabs { background:linear-gradient(var(--paper) 74%, transparent) !important; }
nav.tabs button {
  background:transparent !important; border:1px solid var(--rule-soft) !important;
  border-radius:0 !important; color:var(--ink-2) !important;
  letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; font-weight:700;
  box-shadow:none !important;
}
nav.tabs button:hover { border-color:var(--gold) !important; }
nav.tabs button.active {
  background:#0a0a0a !important; border-color:#0a0a0a !important; color:var(--gold-hi) !important;
}

input:not([type]), input[type=text], input[type=tel], input[type=date], input[type=number],
input[type=search], input[type=email], input[type=url], input[type=time], input[type=password],
select, textarea {
  background:var(--paper-2) !important; color:var(--ink) !important;
  border:1px solid var(--rule-soft) !important; border-radius:0 !important;
  box-shadow:inset 0 1px 2px rgba(35,26,10,.06) !important;
  font-family:var(--sans);
}
input:focus, textarea:focus, select:focus { border-color:var(--gold) !important; }
input::placeholder, textarea::placeholder { color:var(--ink-3); opacity:.8; }
label, label.fl { color:var(--ink-2); }

.step .n, .proto-num, .step-n, .s3 .n, .ct-steps .s b, .box {
  background:#0a0a0a !important; background-image:none !important;
  color:var(--gold-hi) !important; border-radius:0 !important;
  box-shadow:none !important; font-family:var(--serif); font-variant-numeric:lining-nums;
}
.step, .rowitem, .inc-step, .roll, .contact-line { border-bottom-color:var(--rule-soft) !important; }
/* NB: kept off generic names like .tag — apps use that for taglines */
.pill, .chip { border-radius:0 !important; letter-spacing:.1em; text-transform:uppercase; font-size:.62rem; }
.note-box { border-left:2px solid var(--gold) !important; background:var(--paper-2) !important; border-radius:0 !important; }
.disclaimer { background:var(--paper-2) !important; border:1px solid var(--rule-soft) !important; border-radius:0 !important; }
.alert-band { border-radius:0 !important; }
hr, .rule { border:0; height:1px; background:linear-gradient(90deg,transparent,var(--rule),transparent); }

/* ------------------------------------------------------------ suite bar */
.ct-bar {
  background:#0a0a0a !important; color:var(--gold-hi) !important;
  border-bottom:1px solid var(--gold) !important; box-shadow:none !important;
}
.ct-bar .ct-home { color:var(--gold-hi) !important; letter-spacing:.22em; font-size:.66rem; }
.ct-bar .ct-home .ct-sub { color:var(--gold) !important; }
.ct-btn {
  background:transparent !important; border:1px solid rgba(201,162,74,.45) !important;
  color:var(--gold-hi) !important;
}
.ct-btn:hover { background:rgba(201,162,74,.14) !important; border-color:var(--gold) !important; }
.ct-menu a { color:var(--ink); border-radius:0; }
.ct-menu a.on { background:#0a0a0a; color:var(--gold-hi); }
.ct-menu a .g { background:transparent; border:1px solid var(--rule-soft); border-radius:0; color:var(--gold-dk); }
.ct-modal-head { background:#0a0a0a !important; border-bottom:1px solid var(--gold) !important; }
.ct-modal-head h2 { color:var(--gold-hi) !important; }
.ct-modal-card { border-top:2px solid var(--gold) !important; }
.sheet-head { background:#0a0a0a !important; border-bottom:1px solid var(--gold) !important; }
.sheet-head h2 { color:var(--gold-hi) !important; }

/* ---------------------------------------------------------------- footer */
.ct-foot, footer.site {
  background:var(--paper-2) !important; border-top:1px solid var(--rule) !important;
  color:var(--ink-2);
}
.ct-foot .gold, footer.site .gold { color:var(--gold-dk) !important; }
.ct-foot a, footer.site a { color:var(--ink-2); }

/* first-run tiles */
.ob-icon {
  background:transparent !important; border:1px solid var(--rule) !important;
  border-radius:0 !important;
}
.ob-icon svg [stroke="#e3c97e"] { stroke:var(--gold-dk); }
@media (prefers-color-scheme: dark) { .ob-icon svg [stroke="#e3c97e"] { stroke:var(--gold-mid); } }
.onboard-dots span.on, .ob-dots span.on { background:var(--gold) !important; }
.onboard-card, .ob-card { border-top:2px solid var(--gold) !important; }

/* guarded was authored dark — give it the black-and-gold cousin */
html[data-app="guarded"] { --paper:#0b0a08; --panel:#17150f; --ink:#f3ede2; --ink-2:#cabfab; --ink-3:#8e8574; }
html[data-app="guarded"] body { background:#0b0a08 !important; color:#f3ede2; }
html[data-app="guarded"] .card, html[data-app="guarded"] .panel { background:#17150f !important; }
html[data-app="guarded"] header { background:linear-gradient(180deg,#151310,#0b0a08) !important; }
html[data-app="guarded"] header h1 { color:#f3ede2 !important; }
html[data-app="guarded"] nav.tabs { background:linear-gradient(#0b0a08 74%, transparent) !important; }
html[data-app="guarded"] nav.tabs button.active { background:var(--metal) !important; color:#231a08 !important; }

@media print {
  body::after { display:none !important; }
  .card, .app-card, .s3 { box-shadow:none !important; border:1px solid #999 !important; }
  .bbg-bar { background:#000 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration:.001ms !important; transition-duration:.001ms !important; } }