/* Source-to-Pay ERP Advisory — design system
   Derived from the Cold Sun Design Playbook: dark-mode-first, single gold
   accent, restrained motion, editorial label->headline->rule->body rhythm.
   Typography-only — no photography, no illustration, no gradients-as-decor. */

: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:#888888;

  --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:.14em;
  --lh-body:1.8;

  --space-section-desktop:5rem 2rem;
  --space-section-tablet:4rem 2rem;
  --space-section-mobile:3rem 1.25rem;
  --space-box-desktop:3.5rem;
  --space-box-mobile:2rem 1.5rem;

  --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;

  --dur-fast:.15s;
  --dur-base:.2s;
  --dur-nav:.3s;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
body{
  margin:0;
  background:var(--color-dark);
  color:var(--color-white);
  font:var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
h1,h2,h3,h4,p{margin:0}

.container{max-width:var(--container-page);margin:0 auto;padding:0 2rem}
@media(max-width:1023px){.container{padding:0 2rem}}
@media(max-width:767px){.container{padding:0}}

/* ---------- Nav ---------- */
.announcement{
  background:var(--color-black);
  padding:.55rem 2rem;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--color-muted);
  text-align:center;
  position:sticky;top:0;z-index:201;
}
.announcement strong{color:var(--color-accent);font-weight:var(--fw-semibold)}

.nav{
  position:sticky;top:2.6rem;z-index:200;
  background:rgba(13,13,13,.97);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--color-border);
  height:68px;
}
.nav-inner{
  max-width:var(--container-nav);margin:0 auto;padding:0 2rem;height:68px;
  display:flex;align-items:center;gap:2rem;
}
.logo{font-weight:var(--fw-heavy);font-size:18px;letter-spacing:-.02em;flex-shrink:0;margin-right:auto}
.logo span{color:var(--color-accent)}
.nav-links{display:flex;gap:28px;font-size:13.5px;color:var(--color-off-white);font-weight:var(--fw-semibold)}
.nav-links a{transition:color var(--dur-fast) ease}
.nav-links a:hover{color:var(--color-accent)}
.nav-cta{
  background:var(--color-accent);color:var(--color-black);
  font-size:13.5px;font-weight:var(--fw-bold);
  padding:.55rem 1.4rem;border-radius:6px;
  transition:background var(--dur-fast) ease;
}
.nav-cta:hover{background:var(--color-accent-hover)}
@media(max-width:1023px){
  .announcement{display:none}
  .nav{top:0}
  .nav-links{display:none}
}

.nav-spacer{height:104px}
@media(max-width:1023px){.nav-spacer{height:68px}}

/* ---------- Section anatomy ---------- */
.section{padding:var(--space-section-desktop)}
@media(max-width:1023px){.section{padding:var(--space-section-tablet)}}
@media(max-width:767px){.section{padding:var(--space-section-mobile)}}

.bg-black{background:var(--color-black)}
.bg-dark{background:var(--color-dark)}
.bg-dark-mid{background:var(--color-dark-mid)}

.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:.75rem;
}
h1{font-size:var(--fs-h1);font-weight:var(--fw-heavy);line-height:1.1;letter-spacing:-.03em;margin-bottom:1.25rem}
h2{font-size:var(--fs-h2);font-weight:var(--fw-heavy);line-height:1.15;letter-spacing:-.02em;margin-bottom:1rem}
h3{font-size:var(--fs-h3);font-weight:var(--fw-bold);line-height:1.3;margin-bottom:.75rem}
.accent-line{width:48px;height:4px;background:var(--color-accent);border:none;margin:1.25rem 0}
.lead,.body-copy{color:var(--color-off-white)}
.muted{color:var(--color-muted)}
p+p{margin-top:1rem}

.intro-block{max-width:var(--container-narrow);text-align:center;margin:0 auto 3rem}
.prose{max-width:var(--container-prose)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-size:15px;font-weight:var(--fw-bold);
  padding:.85rem 2rem;border-radius:var(--radius-control);
  transition:background var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease;
  cursor:pointer;border:none;
}
.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);font-weight:var(--fw-semibold)}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
.btn-ongold{background:var(--color-black);color:var(--color-white)}
.btn-ongold:hover{background:var(--color-dark-mid)}
.btn-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.link-cta{color:var(--color-accent);font-weight:var(--fw-semibold);font-size:14.5px}

/* ---------- Hero (typography-only, editorial) ---------- */
.hero{padding:6rem 2rem 5rem;max-width:var(--container-page);margin:0 auto}
.hero .breadcrumb{font-size:12px;color:var(--color-muted);margin-bottom:1.5rem;display:inline-block}
.hero .breadcrumb:hover{color:var(--color-accent)}
.hero h1{max-width:900px}
.hero h1 em{color:var(--color-accent);font-style:normal}
.hero .lead{font-size:18px;max-width:var(--container-prose);line-height:1.7}
@media(max-width:767px){.hero{padding-top:3.5rem}}

.kicker-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:1.5rem}
.keyword-chip{
  display:inline-block;border:1px solid var(--color-card-border);
  padding:.35rem .75rem;border-radius:20px;font-size:12px;color:var(--color-muted);
}

/* ---------- Grid / cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
@media(max-width:767px){.grid{grid-template-columns:minmax(0,1fr)}}

.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) ease,transform var(--dur-base) ease;
}
.card::before{
  content:'';position:absolute;top:0;left:1.25rem;right:1.25rem;height:3px;
  background:var(--color-accent);border-radius:0 0 3px 3px;
}
.card:hover{border-color:var(--color-accent);transform:translateY(-3px)}
.card h3{margin-top:.5rem}
.card p{color:var(--color-muted);font-size:14px}

.icon-chip{
  width:44px;height:44px;border-radius:50%;
  background:var(--color-accent-dim);border:1px solid var(--color-accent-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--color-accent);font-weight:var(--fw-bold);font-size:16px;margin-bottom:1rem;
}

/* ---------- Two-column split ---------- */
.split{display:grid;grid-template-columns:3fr 2fr;gap:4rem;align-items:start}
.split.even{grid-template-columns:1fr 1fr}
@media(max-width:1023px){.split{grid-template-columns:1fr 1fr;gap:2.5rem}}
@media(max-width:767px){.split{grid-template-columns:minmax(0,1fr);gap:2rem}}

/* ---------- CTA card ---------- */
.cta-card{
  background:rgba(232,185,48,.06);border:1px solid var(--color-accent-border);
  border-radius:var(--radius-banner);padding:var(--space-box-desktop);position:relative;
}
.cta-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);border-radius:var(--radius-banner) var(--radius-banner) 0 0}
@media(max-width:767px){.cta-card{padding:var(--space-box-mobile)}}

/* ---------- Gold banner ---------- */
.gold-banner{
  background:var(--color-accent);color:var(--color-black);
  border-radius:var(--radius-banner);padding:var(--space-box-desktop);
}
.gold-banner h2{color:var(--color-black)}
.gold-banner p{color:rgba(13,13,13,.75)}
@media(max-width:767px){.gold-banner{padding:var(--space-box-mobile)}}

/* ---------- Stat tiles ---------- */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.stat-tile{
  background:var(--color-accent);color:var(--color-black);
  border-radius:var(--radius-banner);padding:2rem;
}
.stat-tile .num{font-size:3rem;font-weight:var(--fw-heavy);line-height:1;letter-spacing:-.02em;margin-bottom:.5rem}
.stat-tile p{color:rgba(13,13,13,.75);font-size:14px}
.stat-tile.offset{margin-top:2rem}
.stat-tile.full{grid-column:1/-1}
@media(max-width:767px){.stats-grid{grid-template-columns:1fr}.stat-tile.offset{margin-top:0}}

/* ---------- USP tiles ---------- */
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.usp-tile{border-radius:var(--radius-card);padding:1.5rem}
.usp-tile.tint{background:rgba(232,185,48,.08);border:1px solid var(--color-accent-border)}
.usp-tile.neutral{background:var(--color-black);border:1px solid var(--color-border)}
.usp-tile h4{font-size:14px;font-weight:var(--fw-bold);margin-bottom:.4rem}
.usp-tile p{color:var(--color-muted);font-size:13px}

/* ---------- Process / numbered cards ---------- */
.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);font-size:14px;margin-bottom:1rem;
}

/* ---------- Tables (decision frameworks, ROI, compliance matrix) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--color-card-border);border-radius:var(--radius-card);margin:1.5rem 0}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--color-border)}
th{background:var(--color-dark-mid);color:var(--color-muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:var(--fw-bold)}
td{color:var(--color-off-white)}
tr:last-child td{border-bottom:none}
td strong,th strong{color:var(--color-white)}

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

/* ---------- Note / callout ---------- */
.note{border-left:3px solid var(--color-accent);background:rgba(232,185,48,.05);padding:1.25rem 1.5rem;border-radius:0 var(--radius-control) var(--radius-control) 0;margin:1.5rem 0}
.note p{color:var(--color-off-white);font-size:14.5px}
.note strong{color:var(--color-accent)}

/* ---------- Article body ---------- */
.article-body{max-width:820px;margin:0 auto}
.article-body h2{margin-top:3rem}
.article-body h3{margin-top:2rem}
.article-body p{color:var(--color-off-white)}
.article-body ul{margin:1rem 0;padding-left:0}
.article-body li{color:var(--color-off-white);padding-left:1.4rem;position:relative;margin-bottom:.6rem}
.article-body li::before{content:'';position:absolute;left:0;top:.6rem;width:6px;height:6px;background:var(--color-accent);border-radius:50%}

/* ---------- Bottom CTA ---------- */
.bottom-cta{
  max-width:720px;margin:0 auto;text-align:center;
  background:var(--color-black);border:1px solid var(--color-card-border);
  border-radius:var(--radius-banner);padding:var(--space-box-desktop);position:relative;
}
.bottom-cta::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);border-radius:var(--radius-banner) var(--radius-banner) 0 0}
.bottom-cta .btn-row{justify-content:center}
@media(max-width:767px){.bottom-cta{padding:var(--space-box-mobile)}}

/* ---------- Forms ---------- */
.form-card{background:var(--color-black);border:1px solid var(--color-card-border);border-radius:var(--radius-panel);padding:var(--space-box-desktop)}
.field{display:grid;gap:.4rem;margin-bottom:1.25rem}
.field label{font-size:13px;color:var(--color-muted);font-weight:var(--fw-semibold)}
.field label .req{color:var(--color-accent)}
.field input,.field select,.field textarea{
  width:100%;padding:.75rem 1rem;background:rgba(255,255,255,.05);
  border:1px solid var(--color-card-border);border-radius:var(--radius-control);
  color:var(--color-white);font:14px var(--font-body);
  transition:border-color var(--dur-base) ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--color-accent)}
.field textarea{resize:vertical}
.hp{position:absolute;left:-9999px;opacity:0}
@media(max-width:767px){.form-card{padding:var(--space-box-mobile)}}

/* ---------- Footer ---------- */
.footer{background:var(--color-black);position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-accent);opacity:.6}
.footer-inner{max-width:var(--container-nav);margin:0 auto;padding:4rem 2rem 2rem;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.footer-brand p{color:var(--color-muted);font-size:14px;margin-top:1rem;max-width:280px}
.footer-col h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted);margin-bottom:1rem}
.footer-col a{display:block;color:var(--color-off-white);font-size:13.5px;margin-bottom:.6rem;transition:color var(--dur-fast) ease}
.footer-col a:hover{color:var(--color-accent)}
.footer-bottom{
  max-width:var(--container-nav);margin:0 auto;padding:1.5rem 2rem 2rem;
  border-top:1px solid var(--color-border);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;color:var(--color-muted);font-size:12.5px;
}
.footer-bottom a{color:var(--color-muted)}
.footer-bottom a:hover{color:var(--color-accent)}
@media(max-width:767px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

/* ---------- Focus ring (accessibility gap closed) ---------- */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.001ms!important}
}