/* Cold Sun design system — shared chassis for all sites in this repo.
   Only --color-accent(-hover|-dim|-border) are brand-swappable; everything
   else (neutrals, spacing, radius, breakpoints) stays identical across sites.
   See CLAUDE.md for the full token contract. */

/* 1. Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* 2. Design tokens */
:root{
  --color-black:#0d0d0d;
  --color-dark:#111111;
  --color-dark-mid:#1a1a1a;
  --color-card:#222222;
  --color-card-border:#2e2e2e;
  --color-border:#2a2a2a;
  --color-white:#FFFFFF;
  --color-off-white:#e8e8e8;
  --color-muted:#a3a3a3; /* AA-adjusted from playbook's #888 for body text on dark bg */

  --color-accent:#E8B930;
  --color-accent-hover:#d0a428;
  --color-accent-dim:rgba(232,185,48,.12);
  --color-accent-border:rgba(232,185,48,.25);

  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --fw-body:500; --fw-semibold:600; --fw-bold:700; --fw-heavy:800;
  --fs-h1:clamp(2.4rem,4.5vw,4rem);
  --fs-h2:clamp(1.8rem,3vw,2.6rem);
  --fs-h3:clamp(1.1rem,1.8vw,1.4rem);
  --fs-body:15.5px;
  --fs-small:13.5px;
  --fs-eyebrow:11px;
  --ls-eyebrow:0.14em;
  --lh-body:1.8;

  --radius-control:8px;
  --radius-card:14px;
  --radius-panel:20px;
  --radius-banner:24px;
  --radius-media:16px;
  --radius-dropdown:10px;

  --container-nav:1400px;
  --container-page:1300px;
  --container-narrow:900px;
  --container-prose:640px;
  --container-intro:720px;

  --space-section:5rem 2rem;
  --space-box:3.5rem;

  --ease-standard:ease;
  --dur-fast:0.15s;
  --dur-base:0.2s;
  --dur-nav:0.3s;

  --nav-spacer:104px;
}
@media(max-width:1023px){:root{--space-section:4rem 2rem;--nav-spacer:68px}}
@media(max-width:767px){:root{--space-section:3rem 1.25rem;--space-box:2rem 1.5rem}}
@media(max-width:379px){:root{--space-section:2.5rem 1rem}}

body{
  font-family:var(--font-body);
  font-weight:var(--fw-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--color-off-white);
  background:var(--color-dark);
  overflow-x:clip;
}
html{overflow-x:clip}

a{color:inherit;text-decoration:none}

h1,h2,h3,h4{color:var(--color-white);font-weight:var(--fw-heavy);letter-spacing:-0.02em}
h1{font-size:var(--fs-h1);line-height:1.1;letter-spacing:-0.03em;margin-bottom:1.25rem}
h2{font-size:var(--fs-h2);line-height:1.15;margin-bottom:1rem}
h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.3;letter-spacing:normal;margin-bottom:0.75rem}
h4{font-size:1rem;font-weight:var(--fw-bold);letter-spacing:normal}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

/* 3. Layout primitives */
.bg-black{background:var(--color-black)}
.bg-dark{background:var(--color-dark)}
.bg-dark-mid{background:var(--color-dark-mid)}

section{padding:var(--space-section)}
.container{max-width:var(--container-page);margin:0 auto;padding:0 2rem}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 2rem}
.container-prose{max-width:var(--container-prose)}
.container-intro{max-width:var(--container-intro);margin:0 auto;text-align:center}
@media(max-width:767px){.container,.container-narrow{padding:0 1.25rem}}
@media(max-width:1023px) and (min-width:768px){.container,.container-narrow{padding:0 2rem}}

.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-bold);
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:0.75rem;
}
.accent-line{width:48px;height:4px;background:var(--color-accent);border:none;margin:0 0 1.5rem}
.muted{color:var(--color-muted)}

/* 4. Header / nav */
.announcement{
  position:fixed;top:0;left:0;right:0;z-index:201;
  background:var(--color-black);color:var(--color-off-white);
  font-size:var(--fs-small);padding:0.55rem 2rem;text-align:center;
}
.announcement a{color:var(--color-accent)}
@media(max-width:1023px){.announcement{display:none}}

.site-header{
  position:fixed;left:0;right:0;z-index:200;
  top:2.6rem;height:68px;
  display:flex;align-items:center;
  background:rgba(13,13,13,0.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  transition:background var(--dur-nav) var(--ease-standard);
}
@media(max-width:1023px){.site-header{top:0}}

.nav-inner{
  width:100%;max-width:var(--container-nav);margin:0 auto;padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.brand{font-weight:var(--fw-heavy);font-size:1.05rem;color:var(--color-white);flex-shrink:0}
.brand span{color:var(--color-accent)}

.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links>li{position:relative}
.nav-links a{font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--color-off-white);transition:color var(--dur-fast)}
.nav-links a:hover,.nav-links a.active{color:var(--color-accent)}
@media(max-width:1023px){.nav-links,.nav-cta{display:none}}

.dropdown-panel{
  position:absolute;top:calc(100% + 12px);left:0;min-width:240px;
  background:var(--color-dark-mid);border:1px solid var(--color-card-border);
  border-radius:var(--radius-dropdown);box-shadow:0 20px 50px rgba(0,0,0,.7);
  padding:0.5rem;display:none;
}
.nav-links>li:hover .dropdown-panel,.dropdown-panel.open{display:block}
.dropdown-panel a{display:block;padding:0.6rem 0.75rem;border-radius:6px;font-size:var(--fs-small)}
.dropdown-panel a:hover{background:var(--color-accent-dim);color:var(--color-accent)}

.hamburger{display:none;flex-direction:column;gap:5px;width:22px}
.hamburger span{display:block;height:2px;background:var(--color-white);transition:transform var(--dur-base),opacity var(--dur-base)}
@media(max-width:1023px){.hamburger{display:flex}}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-spacer{height:var(--nav-spacer)}

.mobile-drawer{
  position:fixed;inset:0;z-index:199;background:rgba(13,13,13,0.98);
  display:none;overflow-y:auto;padding:6rem 1.5rem 2rem;
}
.mobile-drawer.open{display:block}
.mobile-drawer a{display:block;padding:1rem 0;border-bottom:1px solid var(--color-border);font-size:1.1rem;color:var(--color-white)}
.mobile-drawer .btn-primary{width:100%;text-align:center;margin-top:1.5rem}

/* 5. Buttons */
.btn-primary,.btn-outline,.btn-text{
  display:inline-flex;align-items:center;gap:0.4rem;
  font-size:15px;font-weight:var(--fw-bold);
  padding:0.85rem 2rem;border-radius:var(--radius-control);
  transition:background var(--dur-fast),border-color var(--dur-fast),color var(--dur-fast);
  white-space:nowrap;
}
.btn-primary{background:var(--color-accent);color:var(--color-black)}
.btn-primary:hover{background:var(--color-accent-hover)}
.btn-outline{background:transparent;color:var(--color-white);border:1.5px solid var(--color-card-border)}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-text{background:transparent;color:var(--color-accent);padding:0}
.btn-on-gold{background:var(--color-black);color:var(--color-white)}
.btn-on-gold:hover{background:var(--color-dark-mid)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}

.nav-cta{background:var(--color-accent);color:var(--color-black);font-size:var(--fs-small);font-weight:var(--fw-bold);padding:0.55rem 1.4rem;border-radius:6px}
.nav-cta:hover{background:var(--color-accent-hover)}

/* 6. Cards */
.card{
  position:relative;background:var(--color-card);border:1px solid var(--color-card-border);
  border-radius:var(--radius-card);padding:2rem;transition:border-color var(--dur-base),transform var(--dur-base);
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);border-radius:var(--radius-card) var(--radius-card) 0 0}
.card:hover{border-color:var(--color-accent);transform:translateY(-3px)}
.icon-chip{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--color-accent-dim);border:1px solid var(--color-accent-border);
  margin-bottom:1.25rem;color:var(--color-accent);
}
.icon-chip svg{width:20px;height:20px}
.card h3{margin-bottom:0.5rem}
.card p{color:var(--color-muted);font-size:var(--fs-small)}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
@media(max-width:767px){.card-grid{grid-template-columns:minmax(0,1fr)}}
@media(min-width:768px) and (max-width:1023px){.card-grid{gap:2.5rem}}
@media(min-width:1024px){.card-grid{gap:2.5rem}}

.step-badge{
  width:32px;height:32px;border-radius:50%;background:var(--color-accent);color:var(--color-black);
  display:flex;align-items:center;justify-content:center;font-weight:var(--fw-heavy);margin-bottom:1.25rem;
}

/* 7. Fact grid / stat tiles (platform pages) */
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin:1.5rem 0}
.fact-card{background:var(--color-card);border:1px solid var(--color-card-border);border-radius:var(--radius-card);padding:1.25rem}
.fact-card .fact-label{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-muted);margin-bottom:0.4rem}
.fact-card .fact-value{font-size:1.15rem;font-weight:var(--fw-bold);color:var(--color-white)}

.stat-tile{background:var(--color-accent);color:var(--color-black);border-radius:var(--radius-banner);padding:1.75rem}
.stat-tile .stat-number{font-size:2.8rem;font-weight:var(--fw-heavy);line-height:1}
.stat-tile .stat-label{font-size:var(--fs-small);margin-top:0.4rem}

/* 8. CTA card / gold panel */
.cta-block{
  position:relative;background:var(--color-accent-dim);border:1px solid var(--color-accent-border);
  border-radius:var(--radius-panel);padding:var(--space-box);margin:3rem 0;overflow:hidden;
}
.cta-block::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent)}
.cta-block h2{margin-bottom:0.75rem}
.cta-block p{color:var(--color-off-white);max-width:var(--container-prose)}

.bottom-cta{
  position:relative;max-width:800px;margin:0 auto;text-align:center;
  background:var(--color-dark-mid);border-radius:var(--radius-panel);padding:var(--space-box);overflow:hidden;
}
.bottom-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent)}
.bottom-cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(232,185,48,.07) 0%,transparent 70%);
}
.bottom-cta *{position:relative}

/* 9. Breadcrumb */
.breadcrumb{font-size:var(--fs-small);color:var(--color-muted);margin-bottom:1.5rem}
.breadcrumb a{color:var(--color-muted)}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb .sep{margin:0 0.4rem;opacity:0.5}

/* 10. Tags / pills */
.pill-row{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:1.5rem}
.tag{
  font-size:11px;font-weight:var(--fw-bold);letter-spacing:0.04em;text-transform:uppercase;
  background:var(--color-accent-dim);color:var(--color-accent);
  padding:0.35rem 0.75rem;border-radius:999px;
}

/* 11. Tables */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--color-card-border);border-radius:var(--radius-card)}
table{width:100%;border-collapse:collapse;min-width:480px}
th,td{text-align:left;padding:0.85rem 1.1rem;font-size:var(--fs-small);border-bottom:1px solid var(--color-border)}
th{background:var(--color-dark-mid);color:var(--color-white);font-weight:var(--fw-bold);text-transform:uppercase;font-size:11px;letter-spacing:0.05em}
tr:last-child td{border-bottom:none}
td{color:var(--color-off-white)}

/* 12. FAQ accordion */
.faq-shell{max-width:var(--container-narrow);margin:0 auto;background:var(--color-black);border-radius:var(--radius-panel);padding:1rem 2rem}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item:last-child{border-bottom:none}
.faq-item summary{
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.25rem 0;cursor:pointer;font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--color-white);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .faq-toggle{font-size:1.25rem;color:var(--color-muted);transition:transform var(--dur-base),color var(--dur-base);flex-shrink:0}
.faq-item[open] summary .faq-toggle{transform:rotate(45deg);color:var(--color-accent)}
.faq-item .faq-answer{padding:0 0 1.25rem;color:var(--color-muted);font-size:var(--fs-small);line-height:1.8}

/* 13. Forms */
.field{margin-bottom:1.25rem}
.field label{display:block;font-size:var(--fs-small);color:var(--color-muted);margin-bottom:0.4rem}
.field label .req{color:var(--color-accent)}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.05);border:1px solid var(--color-card-border);
  border-radius:var(--radius-control);padding:0.75rem 1rem;font-size:14px;font-family:var(--font-body);
  color:var(--color-white);transition:border-color var(--dur-base);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent)}

/* Calculator */
.calculator-panel{background:var(--color-card);border:1px solid var(--color-card-border);border-radius:var(--radius-card);padding:2rem;margin:2rem 0}
.calculator-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}
.calculator-results{position:relative;margin-top:1.5rem;background:var(--color-accent-dim);border:1px solid var(--color-accent-border);border-radius:var(--radius-card);padding:1.5rem;overflow:hidden}
.calculator-results::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent)}
.calculator-results .result-number{font-size:2.2rem;font-weight:var(--fw-heavy);color:var(--color-white)}
.calculator-results .result-caption{color:var(--color-muted);font-size:var(--fs-small);margin-top:0.4rem}
.field input[type=range]{accent-color:var(--color-accent);padding:0;background:none;border:none}

/* 14. Footer */
footer{background:var(--color-black);padding-top:2.5rem}
.footer-top{height:3px;background:var(--color-accent);opacity:0.6}
.footer-inner{max-width:var(--container-nav);margin:0 auto;padding:3rem 2rem 2rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:767px){.footer-inner{grid-template-columns:1fr 1fr;padding:2rem 1.25rem}}
.footer-brand{font-weight:var(--fw-heavy);color:var(--color-white);margin-bottom:0.75rem}
.footer-inner p{color:var(--color-muted);font-size:var(--fs-small)}
.footer-col h4{font-size:11px;text-transform:uppercase;letter-spacing:0.08em;color:var(--color-muted);margin-bottom:1rem}
.footer-col a{display:block;font-size:var(--fs-small);color:var(--color-muted);margin-bottom:0.65rem;transition:color var(--dur-fast)}
.footer-col a:hover{color:var(--color-accent)}
.footer-bottom{border-top:1px solid var(--color-border);margin-top:1rem}
.footer-bottom-inner{max-width:var(--container-nav);margin:0 auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;font-size:12px;color:var(--color-muted)}
.footer-bottom-inner a{color:var(--color-muted)}
.footer-bottom-inner a:hover{color:var(--color-accent)}
@media(max-width:767px){.footer-bottom-inner{padding:1.25rem}}

/* 15. Misc content elements */
ul.styled,ol.styled{margin:0 0 1rem 1.25rem;color:var(--color-off-white)}
ul.styled li,ol.styled li{margin-bottom:0.5rem;padding-left:0.25rem}
code{background:var(--color-card);border:1px solid var(--color-card-border);border-radius:4px;padding:0.15rem 0.4rem;font-size:0.9em}
.disclaimer{font-size:var(--fs-small);color:var(--color-muted);border-left:2px solid var(--color-accent-border);padding-left:1rem;margin:1.5rem 0}
.related-links{font-size:var(--fs-small);color:var(--color-muted);margin-top:1rem}
.related-links a{color:var(--color-accent)}

/* Hero */
.hero{position:relative;background:var(--color-black);padding:6rem 2rem 4rem;overflow:hidden}
.hero-inner{max-width:var(--container-page);margin:0 auto;text-align:center}
.hero h1{max-width:900px;margin-left:auto;margin-right:auto}
.hero p{max-width:var(--container-prose);margin:0 auto 1.5rem;color:var(--color-off-white);font-size:1.1rem}
.hero .btn-row{justify-content:center}
@media(max-width:767px){.hero{padding:2rem 1.25rem 3rem}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important}
}