/* ============================================================
   Dang! Platform v1.0 — Shared platform-design.css
   ------------------------------------------------------------
   Brief: CC-DESIGN-PLATFORM-WEB-001-v1.2
   Inherits: dang-design-system/colors_and_type.css (tokens
   redeclared inline so previews load standalone).
   Adds: marketing-surface tokens (warmer copper, paper tints)
   and platform-level component atoms used across all surfaces.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=DM+Mono:wght@400;500&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ── Design-system core (from colors_and_type.css) ── */
  --dang-bg:#F7F5F2;
  --dang-card:#FFFFFF;
  --dang-text:#17191B;
  --dang-text-2:#5F6468;
  --dang-text-3:#6F6A64;
  --dang-text-4:#B0ACA8;
  --dang-border:#DDD7CF;
  --dang-border-2:#E4E0DA;
  --dang-disabled:#D4CEC8;
  --dang-accent:#7A5842;
  --dang-accent-press:#654836;
  --dang-accent-surface:#EFE7E0;
  --dang-accent-ghost:#FBF5F0;
  --dang-obsidian:#111315;
  --dang-cream:#F4F0E8;
  --dang-copper-light:#C4946E;
  --dang-high:#B83030;
  --dang-high-bg:#FDEAEA;
  --dang-med:#A56A1F;
  --dang-med-bg:#FEF3E6;
  --dang-clear:#4F6B57;
  --dang-clear-accent:#4A8A50;
  --dang-clear-bg:#EDF5EF;
  --dang-low-text:#3A7A3A;
  --dang-low-bg:#F0FAF0;
  --dang-radius-sm:4px;
  --dang-radius-md:8px;
  --dang-radius-lg:10px;
  --dang-radius-xl:12px;
  --dang-radius-2xl:14px;
  --dang-radius-3xl:16px;
  --dang-radius-sheet:20px;
  --dang-radius-pill:22px;
  --dang-border-hairline:0.5px;
  --dang-border-thin:1px;
  --dang-border-med:1.5px;
  --dang-border-accent:2px;
  --dang-border-risk:3px;
  --dang-w-regular:400;
  --dang-w-semibold:600;
  --dang-w-bold:700;
  --dang-w-black:900;
  --dang-lh-tight:1.25;
  --dang-lh-snug:1.40;
  --dang-lh-normal:1.47;
  --dang-lh-loose:1.60;
  --dang-ease-out:cubic-bezier(.33,1,.68,1);
  --dang-ease-standard:cubic-bezier(.4,0,.2,1);
  --dang-dur-fast:100ms;
  --dang-dur-normal:250ms;
  --dang-dur-slow:500ms;
  --dang-hit-target:44px;

  /* ── Marketing / platform-surface tokens
     (inherited from .preview-v6 scope in canonical index.html lines 700-732
     — the warmer copper used on conversion-critical surfaces) ── */
  --bg:#F7F5F2;
  --bg-2:#F2EEE8;
  --paper:#FBF9F5;
  --paper-2:#F4EFE7;
  --card:#FFFFFF;

  --t1:#17191B;
  --t2:#5F6468;
  --t3:#6F6A64;
  --t4:#B0ACA8;
  --t5:#C8C4BE;

  --rule:#E4E0DA;
  --rule-2:#DDD7CF;

  --primary:#7A5842;
  --primary-press:#654836;
  --primary-surface:#EFE7E0;
  --primary-ghost:#FBF5F0;

  --copper:#B26A3A;          /* warmer copper for marketing CTAs (matches /pricing-style surfaces) */
  --copper-press:#8B4F2A;
  --copper-light:#C4946E;    /* lighter copper for dark-bg / italic-emphasis accents */
  --copper-glow:rgba(178,106,58,.32);

  --high:#B83030;  --high-bg:#FDEAEA;
  --med:#A56A1F;   --med-bg:#FEF3E6;
  --low:#5F6468;   --low-bg:#EFEDE8;
  --clear:#4F6B57; --clear-bg:#EDF5EF; --clear-accent:#4A8A50;

  --obsidian:#111315;
  --cream:#F4F0E8;

  --r:12px;
  --rl:16px;
  --rxl:20px;
  --rsheet:24px;

  /* ── Fonts ──
     PRIMARY (inherited from existing design system):
       --f / --fd  DM Sans — display + body (300–900, opsz 9–40)
       --fm        DM Mono — eyebrows, prices, citations, metadata
       --jb        JetBrains Mono — code-heavy / technical accents

     PLATFORM EDITORIAL ACCENT — sanctioned in Round 1A revision pass:
       --fs        Georgia italic — used via the .ital helper class

       APPROVED USES:
         · Emphasis word(s) inside display headlines        (.display-1/2/3)
         · Key-noun callouts inside short body copy         (e.g., "for the
           contract on your desk", "saved 6 months")
         · The two "voice" lines on each plan story
           (the bracketed archetype quote)

       DO NOT USE FOR:
         · General body paragraphs
         · UI labels, micro-copy, mono accents, captions
         · Anything functional (button text, form labels)

       This is a deliberate, documented expansion beyond the original
       DM Sans / DM Mono / JetBrains Mono inheritance from the brand
       identity spec. It was already in use in the existing landing
       page's `.ital` pattern (see index.html .pv-h1 .ital and the
       hero copy); Round 1A locks it as platform editorial accent.

       Usage cap: aim for ≤2 Georgia-italic emphases per visible
       section. Beyond that, it stops being editorial and starts being
       visual noise. */
  --f: 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fd:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fm:'DM Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --jb:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs:ui-serif,Georgia,'Times New Roman',serif;

  /* ── Shadows (used sparingly) ── */
  --shadow-1:0 1px 2px rgba(23,25,27,.04),0 4px 16px -8px rgba(23,25,27,.06);
  --shadow-2:0 1px 3px rgba(23,25,27,.05),0 12px 32px -12px rgba(23,25,27,.08),0 24px 64px -32px rgba(23,25,27,.06);
  --shadow-modal:0 1px 3px rgba(23,25,27,.06),0 24px 80px -24px rgba(23,25,27,.20),0 48px 120px -48px rgba(23,25,27,.18);

  --ease-out:cubic-bezier(.33,1,.68,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* ────────────────────────────────────────────────────────────
   Page reset + base
   ──────────────────────────────────────────────────────────── */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--f);
  background:var(--bg);
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:'ss01' on,'ss02' on;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
img,svg{display:block;max-width:100%}
button{background:none;border:none;cursor:pointer;font:inherit;color:inherit;padding:0}
a{color:inherit;text-decoration:none}
ul{list-style:none}
::selection{background:var(--primary-surface);color:var(--primary)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Paper grain — applied to body via class so previews can opt out per-section */
.paper-grain::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ────────────────────────────────────────────────────────────
   Layout primitives
   ──────────────────────────────────────────────────────────── */

.wrap{max-width:1100px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.wrap-narrow{max-width:880px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.wrap-wide{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
@media(max-width:680px){
  .wrap,.wrap-narrow,.wrap-wide{padding:0 22px}
}

main{position:relative;z-index:1}

/* Section rule — top hairline with mono section number + label */
.section-rule{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:18px;
  padding:22px 0;
  border-top:.5px solid var(--rule);
}
.section-rule .num{
  font-family:var(--fm);
  font-size:11px;
  font-weight:500;
  color:var(--copper);
  letter-spacing:2px;
  text-transform:uppercase;
}
.section-rule .title{
  font-family:var(--fm);
  font-size:11px;
  font-weight:500;
  color:var(--t1);
  letter-spacing:1.6px;
  text-transform:uppercase;
}
.section-rule .aside{
  font-family:var(--fm);
  font-size:11px;
  font-weight:400;
  color:var(--t3);
  letter-spacing:1.4px;
  text-transform:uppercase;
  text-align:right;
}
@media(max-width:680px){
  .section-rule{grid-template-columns:auto 1fr;gap:12px}
  .section-rule .aside{display:none}
}

/* ────────────────────────────────────────────────────────────
   Typography atoms
   ──────────────────────────────────────────────────────────── */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--fm);
  font-size:11px;
  font-weight:500;
  color:var(--copper);
  letter-spacing:1.8px;
  text-transform:uppercase;
  line-height:1.4;
}
.eyebrow .dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 0 3px var(--primary-surface);
  position:relative;
}
.eyebrow .dot.pulse::after{
  content:'';
  position:absolute;inset:-3px;
  border-radius:50%;
  border:1.5px solid var(--copper);
  opacity:0;
  animation:pulse 2.4s var(--ease-out) infinite;
}
@keyframes pulse{0%{opacity:.5;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}

/* Eyebrow severity tints — only in severity contexts */
.eyebrow--neutral{color:var(--t3)}
.eyebrow--neutral .dot{background:var(--t3);box-shadow:0 0 0 3px var(--rule)}

/* Display headlines */
.display-1{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(56px,9vw,120px);
  line-height:.92;
  letter-spacing:-.045em;
  color:var(--t1);
  text-wrap:balance;
  margin:0;
}
.display-2{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(40px,6vw,72px);
  line-height:.98;
  letter-spacing:-.035em;
  color:var(--t1);
  text-wrap:balance;
  margin:0;
}
.display-3{
  font-family:var(--fd);
  font-weight:800;
  font-size:clamp(28px,3.4vw,40px);
  line-height:1.04;
  letter-spacing:-.03em;
  color:var(--t1);
  text-wrap:balance;
  margin:0;
}
.display-4{
  font-family:var(--fd);
  font-weight:700;
  font-size:clamp(22px,2.4vw,28px);
  line-height:1.18;
  letter-spacing:-.02em;
  color:var(--t1);
  text-wrap:balance;
  margin:0;
}

/* Editorial accent treatments */
.stop{color:var(--copper)}        /* the trailing copper period */
.ital{
  font-family:var(--fs);
  font-style:italic;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--t1);
}

/* Lede — the supporting paragraph under a display headline */
.lede{
  font-family:var(--f);
  font-size:clamp(16px,1.3vw,19px);
  color:var(--t2);
  line-height:1.55;
  text-wrap:pretty;
  font-weight:400;
  letter-spacing:-.05px;
}

/* Body */
.body{
  font-family:var(--f);
  font-size:17px;
  line-height:1.55;
  color:var(--t1);
  letter-spacing:-.05px;
}
.body-2{
  font-size:15px;
  line-height:1.55;
  color:var(--t2);
}
.body-mute{color:var(--t2)}
.body-caption{font-size:13px;color:var(--t3);line-height:1.5}

/* Mono micro-label (alternative to eyebrow when it's an inline label, not a section header) */
.mono-mini{
  font-family:var(--fm);
  font-size:10.5px;
  font-weight:500;
  color:var(--t3);
  letter-spacing:1.6px;
  text-transform:uppercase;
  line-height:1.4;
}

/* ────────────────────────────────────────────────────────────
   Wordmark
   ──────────────────────────────────────────────────────────── */

.dang-wordmark{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--fd);
  font-weight:900;
  color:var(--t1);
  letter-spacing:-1.5px;
  line-height:1;
}
.dang-wordmark__bang{
  display:inline-block;
  transform:rotate(-15deg);
  transform-origin:bottom left;
  color:var(--copper);
  margin-left:3px;
  letter-spacing:0;
}
.dang-wordmark--xl{font-size:48px;letter-spacing:-2px}
.dang-wordmark--lg{font-size:34px;letter-spacing:-1.8px}
.dang-wordmark--md{font-size:24px;letter-spacing:-1.5px}
.dang-wordmark--sm{font-size:18px;letter-spacing:-1px}
.dang-wordmark--reversed{color:var(--cream)}
.dang-wordmark--reversed .dang-wordmark__bang{color:var(--copper-light,#C4946E)}

/* ────────────────────────────────────────────────────────────
   Navigation (top bar, masthead)
   ──────────────────────────────────────────────────────────── */

.masthead{
  position:sticky;top:0;z-index:50;
  background:rgba(247,245,242,.85);
  backdrop-filter:saturate(1.1) blur(12px);
  -webkit-backdrop-filter:saturate(1.1) blur(12px);
  border-bottom:.5px solid transparent;
  transition:border-color .25s var(--ease-out);
}
.masthead.scrolled{border-bottom-color:var(--rule)}
.masthead-i{
  max-width:1100px;margin:0 auto;
  padding:18px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.mast-r{display:flex;align-items:center;gap:24px;list-style:none}
.mast-r > a{
  font-size:14px;
  color:var(--t2);
  font-weight:500;
  letter-spacing:-.05px;
  transition:color .15s;
}
.mast-r > a:hover{color:var(--t1)}
.mast-r a.current{color:var(--t1);font-weight:600}
.mast-r a.cta{
  background:var(--t1);
  color:#FFFFFC;
  padding:10px 18px 10px 22px;
  border-radius:999px;
  font-weight:600;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .15s,transform .15s;
}
.mast-r a.cta:hover{background:#0E0F12;transform:translateY(-1px)}
.mast-r a.cta .arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:var(--copper);
  font-size:11px;line-height:1;
}
.mast-r a.cta .arrow::after{content:'→';color:#FFFFFC;font-weight:600}

@media(max-width:760px){
  .masthead-i{padding:16px 22px;gap:16px}
  .mast-r{gap:0}
  .mast-r > a:not(.cta){display:none}
}

/* ────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────── */

/* Primary — copper gradient pill, large */
.btn{
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(180deg,var(--copper) 0%,var(--copper-press) 100%);
  color:#FFFFFC;
  padding:16px 28px 16px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:16px;
  letter-spacing:-.1px;
  transition:transform .15s,box-shadow .2s var(--ease-out),filter .15s;
  box-shadow:0 1px 2px rgba(139,79,42,.18),0 12px 28px -8px var(--copper-glow);
  font-family:var(--f);
  min-height:52px;
  justify-content:center;
  border:none;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(139,79,42,.2),0 16px 32px -8px var(--copper-glow);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

.btn--sm{padding:11px 18px 11px 22px;font-size:14px;gap:10px;min-height:auto}
.btn--md{padding:13px 22px 13px 26px;font-size:15px;gap:12px;min-height:48px}

.btn .price{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--fm);
  font-size:14px;
  font-weight:600;
  background:rgba(255,255,255,.18);
  padding:5px 11px;
  border-radius:999px;
  letter-spacing:.1px;
}
.btn--sm .price{font-size:12.5px;padding:3px 9px}
.btn .arrow{font-size:15px;font-weight:700;line-height:1}

/* Obsidian button — dark variant */
.btn-obs{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--obsidian);
  color:#FFFFFC;
  padding:16px 28px 16px 30px;
  border-radius:999px;
  font-weight:600;
  font-size:16px;
  letter-spacing:-.1px;
  transition:transform .15s,background .2s;
  box-shadow:0 6px 18px -8px rgba(23,25,27,0.3);
  font-family:var(--f);
  min-height:52px;
  justify-content:center;
  border:none;
  cursor:pointer;
}
.btn-obs:hover{background:#0B0D0F;transform:translateY(-1px)}
.btn-obs:focus-visible{outline:2px solid var(--obsidian);outline-offset:3px}

/* Ghost button — outline, secondary */
.btn-g{
  display:inline-flex;align-items:center;gap:10px;
  background:transparent;
  color:var(--t1);
  border:1px solid var(--rule-2);
  padding:13px 24px;
  border-radius:999px;
  font-weight:500;
  font-size:14px;
  font-family:var(--f);
  min-height:48px;
  justify-content:center;
  transition:background .15s,border-color .15s,transform .15s;
  cursor:pointer;
}
.btn-g:hover{background:rgba(122,88,66,.05);border-color:var(--copper);transform:translateY(-1px)}
.btn-g:focus-visible{outline:2px solid var(--copper);outline-offset:3px}

/* Quiet link button — used for tertiary actions */
.btn-quiet{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f);
  font-size:14px;
  font-weight:500;
  color:var(--t2);
  padding:8px 12px;
  border-radius:8px;
  transition:background .15s,color .15s;
  cursor:pointer;
  background:none;
  border:none;
}
.btn-quiet:hover{background:var(--paper);color:var(--t1)}

/* Inline copper text-link */
.tlink{
  color:var(--primary);
  font-weight:500;
  border-bottom:1px solid transparent;
  transition:border-color .15s,color .15s;
}
.tlink:hover{color:var(--primary-press);border-bottom-color:var(--primary)}

/* ────────────────────────────────────────────────────────────
   Surfaces / cards
   ──────────────────────────────────────────────────────────── */

.surface{
  background:var(--card);
  border:.5px solid var(--rule);
  border-radius:var(--rl);
  box-shadow:none;
  padding:24px;
}
.surface--paper{background:var(--paper)}
.surface--lift{box-shadow:var(--shadow-2)}

/* Pill chip — neutral metadata */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--paper);
  border:.5px solid var(--rule-2);
  border-radius:999px;
  padding:5px 12px;
  font-family:var(--fm);
  font-size:12px;
  color:var(--t1);
  font-weight:500;
  letter-spacing:.1px;
}

.chip--mute{
  background:transparent;
  color:var(--t3);
  border:.5px solid var(--rule-2);
}
.chip--copper{
  background:var(--primary-surface);
  border-color:transparent;
  color:var(--primary-press);
}

/* Severity chips — keep severity colors sandboxed */
.chip.sev-high{background:var(--high-bg);color:var(--high);border-color:transparent;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;font-size:10px;padding:4px 8px;border-radius:4px}
.chip.sev-med{background:var(--med-bg);color:var(--med);border-color:transparent;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;font-size:10px;padding:4px 8px;border-radius:4px}
.chip.sev-low{background:var(--low-bg);color:var(--low);border-color:transparent;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;font-size:10px;padding:4px 8px;border-radius:4px}
.chip.sev-clear{background:var(--clear-bg);color:var(--clear);border-color:transparent;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;font-size:10px;padding:4px 8px;border-radius:4px}

/* Mono price chip — used inline in body and in CTAs */
.price-chip{
  display:inline-flex;align-items:baseline;gap:2px;
  font-family:var(--fm);
  font-size:13px;
  font-weight:600;
  color:var(--t1);
  background:var(--paper);
  border:.5px solid var(--rule-2);
  padding:4px 10px;
  border-radius:999px;
  letter-spacing:.1px;
}

/* ────────────────────────────────────────────────────────────
   Form inputs (lean — magic-link, email-only patterns)
   ──────────────────────────────────────────────────────────── */

.input{
  width:100%;
  padding:14px 18px;
  border:.5px solid var(--rule-2);
  border-radius:var(--r);
  font-family:var(--f);
  font-size:16px;
  background:var(--card);
  color:var(--t1);
  transition:border-color .2s, box-shadow .2s;
  min-height:52px;
}
.input:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 4px var(--copper-glow)}
.input::placeholder{color:var(--t4)}

/* ────────────────────────────────────────────────────────────
   Banners — state notifications inside surfaces
   ──────────────────────────────────────────────────────────── */

.banner{
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 18px;
  border-radius:var(--r);
  border:.5px solid var(--rule-2);
  background:var(--paper);
  font-size:14px;
  line-height:1.5;
  color:var(--t1);
}
.banner-ico{
  flex-shrink:0;
  width:22px;height:22px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary-surface);
  color:var(--primary);
  font-family:var(--fd);font-weight:700;font-size:13px;
  line-height:1;
}
.banner-body{flex:1;min-width:0}
.banner-title{font-weight:600;color:var(--t1);font-size:14px;letter-spacing:-.05px;margin-bottom:2px}
.banner-text{font-size:13.5px;color:var(--t2);line-height:1.5}
.banner-actions{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}

.banner--high{background:var(--high-bg);border-color:transparent}
.banner--high .banner-ico{background:rgba(184,48,48,.16);color:var(--high)}
.banner--high .banner-title{color:#7A2424}

.banner--med{background:var(--med-bg);border-color:transparent}
.banner--med .banner-ico{background:rgba(165,106,31,.16);color:var(--med)}
.banner--med .banner-title{color:#6B440F}

.banner--clear{background:var(--clear-bg);border-color:transparent}
.banner--clear .banner-ico{background:rgba(74,138,80,.16);color:var(--clear-accent)}
.banner--clear .banner-title{color:#34503A}

/* ────────────────────────────────────────────────────────────
   Trust strip — small icon-row used as page footers and
   reassurance on long surfaces.
   ──────────────────────────────────────────────────────────── */

.trust-strip{
  display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;
  font-family:var(--fm);
  font-size:11px;
  color:var(--t3);
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.trust-strip span{display:inline-flex;align-items:center;gap:7px}
.trust-strip .sep{width:3px;height:3px;border-radius:50%;background:var(--rule-2)}
.trust-strip .ck{width:11px;height:11px;color:var(--clear-accent)}

/* ────────────────────────────────────────────────────────────
   Obsidian break — full-bleed dark interlude
   ──────────────────────────────────────────────────────────── */

.obsidian-break{
  background:var(--obsidian);
  color:var(--cream);
  position:relative;
  z-index:1;
  padding:96px 0;
  margin:64px 0;
}
.obsidian-break .eyebrow{color:var(--copper-light,#C4946E)}
.obsidian-break .eyebrow .dot{background:var(--copper-light,#C4946E);box-shadow:0 0 0 3px rgba(196,148,110,.14)}
.obsidian-break .display-2,.obsidian-break .display-3{color:var(--cream)}
.obsidian-break .lede{color:rgba(244,240,232,.78)}
.obsidian-break .ital{color:var(--cream)}
.obsidian-break .stop{color:var(--copper-light,#C4946E)}
.obsidian-break .mono-mini{color:rgba(244,240,232,.6)}
.obsidian-break hr{border:0;border-top:.5px solid rgba(244,240,232,.18)}

/* ────────────────────────────────────────────────────────────
   Footer (shared)
   ──────────────────────────────────────────────────────────── */

.platform-footer{
  background:var(--bg);
  border-top:.5px solid var(--rule);
  padding:48px 0 56px;
  margin-top:120px;
  position:relative;z-index:1;
}
.platform-footer-i{
  display:flex;align-items:flex-start;justify-content:space-between;gap:48px;
  flex-wrap:wrap;
}
.platform-footer-disc{
  margin-top:32px;padding-top:24px;
  border-top:.5px solid var(--rule);
  font-size:12px;
  color:var(--t3);
  line-height:1.6;
  letter-spacing:.1px;
  max-width:760px;
}
.platform-footer-links{
  display:flex;gap:24px;flex-wrap:wrap;font-size:13px;
}
.platform-footer-links a{color:var(--t2);transition:color .15s}
.platform-footer-links a:hover{color:var(--t1)}

/* ────────────────────────────────────────────────────────────
   Bang glyph watermark — the giant background "!" used on
   hero sections of report-context surfaces.
   ──────────────────────────────────────────────────────────── */

.bang-watermark{
  position:absolute;
  font-family:var(--fd);
  font-weight:900;
  font-size:clamp(240px,28vw,360px);
  line-height:1;
  color:rgba(178,106,58,.10);
  transform:rotate(-15deg);
  pointer-events:none;
  user-select:none;
  z-index:0;
}

/* ────────────────────────────────────────────────────────────
   Focus rings (branded — overrides browser default)
   ──────────────────────────────────────────────────────────── */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--copper);
  outline-offset:2px;
  border-radius:6px;
}

/* ────────────────────────────────────────────────────────────
   Utility
   ──────────────────────────────────────────────────────────── */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hidden{display:none!important}
.center{text-align:center}
.mono{font-family:var(--fm)}
.serif{font-family:var(--fs);font-style:italic}
.t1{color:var(--t1)}
.t2{color:var(--t2)}
.t3{color:var(--t3)}
.copper{color:var(--copper)}
.copper-d{color:var(--primary)}     /* darker copper, body-text-safe */

/* Visible state markers (preview-only — used to label state variants on each surface
   for Mircea's review. Hidden from production via class toggle.) */
.state-marker{
  display:inline-flex;align-items:center;gap:8px;
  position:absolute;top:14px;left:14px;
  font-family:var(--fm);
  font-size:10px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  background:#1B1D1F;
  color:#FFFFFC;
  padding:5px 10px 5px 8px;
  border-radius:999px;
  z-index:30;
  box-shadow:0 4px 12px -4px rgba(23,25,27,.4);
}
.state-marker::before{
  content:'';
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--copper-light,#C4946E);
}
.state-marker--clear::before{background:var(--clear-accent)}
.state-marker--high::before{background:var(--high)}
.state-marker--med::before{background:var(--med)}
.state-marker--mute::before{background:var(--t4)}

/* Preview-only header strip — used at the top of each multi-state surface
   to introduce what's shown below */
.preview-strip{
  background:var(--paper);
  border-bottom:.5px solid var(--rule);
  padding:14px 0;
  font-family:var(--fm);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--t3);
  position:relative;z-index:5;
}
.preview-strip-i{
  max-width:1100px;margin:0 auto;
  padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.preview-strip strong{color:var(--t1);font-weight:600}

/* Stage divider — used between states in a multi-state file */
.stage-divider{
  margin:96px 0 0;
  padding:24px 0;
  border-top:1px dashed var(--rule-2);
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-family:var(--fm);
  font-size:11px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--t3);
}
.stage-divider strong{color:var(--t1);font-weight:600;font-size:13px;letter-spacing:.5px;text-transform:none;font-family:var(--fd);}
.stage-divider em{font-style:normal;color:var(--t2);text-transform:none;font-family:var(--f);letter-spacing:-.05px}