/* SafeCascade marketing site – shared styles.
   Hoisted verbatim from the Claude Design source components, which all carried
   an identical <style> block. Keep in sync across every page.

   The :root block below is COMPILED FROM brand.tokens.json. Do not add a custom
   property here without adding the matching token there, or the next brand change
   will drop it and its colour will vanish from the site. */

:root {
  --brand: #e37e56;
  --brand-hover: #c9663f;
  --brand-light: #f0906b;
  --brand-deep: #9c4526;
  --brand-tint: #fdece3;
  --brand-tint-2: #f6d5c5;
  --brand-bright: #f0906b;
  --brand-bright-hover: #f4a588;
  --brand-on-dark: #f0906b;
  --brand-on-dark-2: #f8c7b4;
  --teal: #3b615f;
  --teal-2: #2f4f4d;
  --teal-3: #47716f;
  --teal-deep: #264543;
  --teal-line: #4e7573;
  --teal-line-2: #5f8886;
  --mist: #eff5f3;
  --mist-2: #cfe0dd;
  --mist-muted: #a3c0bd;
  --mist-faint: #84a3a0;
  --mist-bright: #f4f9f7;
  --logo-tile: #1c2f2a;
  --logo-tile-line: #2a3e38;
  --logo-bar: #d4efe9;
  --nav-line: #22352f;
  --nav-link: #b7d3cc;
  --nav-cta-hover: #d9714a;
  --glow-a: 240, 144, 107;
  --glow-b: 227, 126, 86;
  --nav-bg: 22, 35, 30;
  --primary: var(--brand);
  --surface: var(--teal);
  --text: var(--mist);
  --accent: var(--brand-bright);
}


* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

.sc-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

@keyframes scfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes scpulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes scflow { to { stroke-dashoffset: -18; } }

.sc-linkrow a { color: inherit; text-decoration: none; }
.sc-cta:hover { background: var(--brand-hover) !important; }
.sc-cta-bright:hover { background: var(--brand-bright-hover) !important; }
.sc-ghost:hover { background: #efece6 !important; }
.sc-navlink:hover { color: #ffffff !important; }
.sc-navcta:hover { background: var(--nav-cta-hover) !important; }
.sc-viewcard:hover { transform: translateY(-4px); box-shadow: 0 14px 38px rgba(16, 40, 44, .12) !important; }
.sc-viewcard { transition: transform .25s ease, box-shadow .25s ease; }
.sc-dcta:hover { background: var(--brand-bright-hover) !important; }

@media (max-width: 900px) {
  .sc-hero-grid { grid-template-columns: 1fr !important; }
  .sc-two { grid-template-columns: 1fr !important; }
  .sc-three { grid-template-columns: 1fr !important; }
  .sc-views { grid-template-columns: 1fr !important; }
  .sc-navlinks { display: none !important; }
  .sc-shot-float { display: none !important; }
  .sc-h1 { font-size: 44px !important; }
  .sc-metrics { grid-template-columns: 1fr 1fr !important; }
  .sc-tiers { grid-template-columns: 1fr !important; }
}