/* WO-042 Cruxford site v4: shared styles for privacy, terms, thanks and 404. Home page styles are inline. WO-074: brand-v1.1 logo and depth tokens. */
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/montserrat-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/montserrat-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/montserrat-latin-900-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2")}
/* Brand tokens, verbatim from the pack (hq #74 CEO comment) */
:root {
  --cf-navy: #0B1B2B;   /* default shell */
  --cf-slate: #1E2A36;  /* cards, secondary surfaces */
  --cf-gold: #D4AF37;   /* CTAs and accents only */
  --cf-steel: #6B7280;  /* borders and icons only (see contrast) */
  --cf-ivory: #F8F5EF;  /* text on dark, light panels */
  --cf-ink: #07111B;    /* text on gold */
  --cf-font-heading: "Montserrat", "Arial Black", sans-serif; /* 700/800/900 */
  --cf-font-body: "Inter", Arial, sans-serif;
  --cf-radius-sm: 6px; --cf-radius-md: 12px; --cf-radius-lg: 18px;
  --cf-shadow-card: 0 12px 32px rgba(0,0,0,.22);
  --cf-border: rgba(248,245,239,.14);
  /* WO-074 depth tokens (hq #104): steel and gold gradients from the brand-v1.1 wordmark, layered shadows, mark geometry */
  --cf-gold-grad: linear-gradient(180deg, #F3DC8A 0%, #D4AF37 52%, #B8952F 100%);
  --cf-gold-grad-hover: linear-gradient(180deg, #F8E7A8 0%, #DEBC4B 52%, #C4A035 100%);
  --cf-gold-grad-pressed: linear-gradient(180deg, #B08C2C 0%, #C9A535 55%, #D9B848 100%);
  --cf-gold-metal: linear-gradient(180deg, #F6E3A0 0%, #E4C45C 36%, #D4AF37 60%, #B08C2C 100%);
  --cf-gold-deep: #9C7B25;
  --cf-steel-grad: linear-gradient(135deg, #FFFFFF 0%, #AEB6BF 50%, #697582 100%);
  --cf-steel-text: linear-gradient(180deg, #FFFFFF 0%, #D9DEE3 45%, #AEB6BF 100%);
  --cf-ink-grad: linear-gradient(180deg, #33475C 0%, #0B1B2B 100%);
  --cf-btn-dark: linear-gradient(180deg, #1F3448 0%, #0B1B2B 100%);
  --cf-btn-dark-hover: linear-gradient(180deg, #27405A 0%, #10253A 100%);
  --cf-glow: radial-gradient(ellipse 52% 46% at 26% 44%, rgba(212,175,55,.13) 0%, rgba(212,175,55,.04) 45%, rgba(212,175,55,0) 72%);
  --cf-glow-steel: radial-gradient(ellipse 60% 70% at 88% 12%, rgba(174,182,191,.16) 0%, rgba(174,182,191,0) 70%);
  --cf-glow-edge: radial-gradient(ellipse 46% 26% at 50% 100%, rgba(212,175,55,.16) 0%, rgba(212,175,55,0) 72%);
  --cf-gold-edge: linear-gradient(90deg, rgba(212,175,55,0) 0%, rgba(212,175,55,.85) 50%, rgba(212,175,55,0) 100%);
  --cf-steel-edge: linear-gradient(90deg, rgba(174,182,191,0) 0%, rgba(174,182,191,.45) 50%, rgba(174,182,191,0) 100%);
  --cf-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='78' viewBox='0 0 45 78'%3E%3Cpath d='M22.5 0V13L45 26V52L22.5 65V78M22.5 65L0 52V26L22.5 13' fill='none' stroke='%23F8F5EF' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E");
  --cf-grid: linear-gradient(rgba(248,245,239,.035) 1px, rgba(248,245,239,0) 1px), linear-gradient(90deg, rgba(248,245,239,.035) 1px, rgba(248,245,239,0) 1px);
  --cf-bg-header: linear-gradient(180deg, #102538 0%, #0B1B2B 100%);
  --cf-bg-hero: linear-gradient(180deg, #0F2336 0%, #0B1B2B 58%, #091828 100%);
  --cf-bg-navy: linear-gradient(180deg, #0B1B2B 0%, #0F2337 100%);
  --cf-bg-navy-up: linear-gradient(180deg, #0F2337 0%, #0B1B2B 100%);
  --cf-bg-slate: linear-gradient(180deg, #243344 0%, #1E2A36 50%, #18232E 100%);
  --cf-bg-ivory: linear-gradient(180deg, #FCFAF6 0%, #F8F5EF 45%, #EFE8DB 100%);
  --cf-edge-slate: #18232E;
  --cf-edge-ivory: #EFE8DB;
  --cf-edge-navy: #0B1B2B;
  --cf-card: linear-gradient(180deg, #263647 0%, #1E2A36 55%, #1A2531 100%);
  --cf-card-navy: linear-gradient(180deg, #15304A 0%, #0D2033 55%, #0B1B2B 100%);
  --cf-card-light: linear-gradient(180deg, #FFFFFF 0%, #FCFAF6 100%);
  --cf-card-form: linear-gradient(180deg, #FFFFFF 0%, #F8F5EF 34%, #F1EBDF 100%);
  --cf-border-steel: rgba(107,114,128,.6);
  --cf-border-steel-light: rgba(107,114,128,.35);
  --cf-highlight: inset 0 1px 0 rgba(248,245,239,.12);
  --cf-highlight-strong: inset 0 1px 0 rgba(255,255,255,.55);
  --cf-shadow-raised: 0 1px 2px rgba(0,0,0,.24), 0 8px 18px rgba(0,0,0,.22), 0 22px 44px rgba(0,0,0,.18);
  --cf-shadow-lift: 0 2px 4px rgba(0,0,0,.26), 0 14px 28px rgba(0,0,0,.26), 0 34px 66px rgba(0,0,0,.24);
  --cf-shadow-float: 0 2px 6px rgba(0,0,0,.3), 0 24px 48px rgba(0,0,0,.36), 0 56px 110px rgba(0,0,0,.32);
  --cf-shadow-light: 0 1px 2px rgba(11,27,43,.08), 0 10px 24px rgba(11,27,43,.10), 0 28px 56px rgba(11,27,43,.10);
  --cf-shadow-light-lift: 0 2px 4px rgba(11,27,43,.10), 0 16px 32px rgba(11,27,43,.14), 0 36px 72px rgba(11,27,43,.14);
  --cf-shadow-gold: 0 1px 0 rgba(0,0,0,.25), 0 6px 16px rgba(212,175,55,.22), 0 2px 4px rgba(0,0,0,.28);
  --cf-shadow-gold-hover: 0 1px 0 rgba(0,0,0,.25), 0 10px 24px rgba(212,175,55,.32), 0 3px 6px rgba(0,0,0,.3);
  --cf-ring-gold: 0 0 0 1px rgba(212,175,55,.35);
  --cf-glass: linear-gradient(180deg, rgba(248,245,239,.08) 0%, rgba(248,245,239,.01) 100%);
  --cf-glass-hover: linear-gradient(180deg, rgba(248,245,239,.12) 0%, rgba(248,245,239,.03) 100%);
  --cf-glow-right: radial-gradient(ellipse 40% 60% at 80% 50%, rgba(212,175,55,.08) 0%, rgba(212,175,55,0) 70%);
  --cf-glow-left: radial-gradient(ellipse 50% 90% at 15% 50%, rgba(212,175,55,.10) 0%, rgba(212,175,55,0) 70%);
  --cf-border-steel-hover: rgba(174,182,191,.7);
  --cf-highlight-steel: inset 0 1px 0 rgba(174,182,191,.28);
  --cf-text-emboss: 0 1px 0 rgba(255,255,255,.25);
  --cf-mask-hero: radial-gradient(ellipse 75% 85% at 72% 40%, #000 0%, rgba(0,0,0,.55) 45%, transparent 80%);
  --cf-mask-right: linear-gradient(90deg, transparent 30%, #000 100%);
}
:root{--cf-muted:#AEB6BF}
body{margin:0;background:var(--cf-glow-steel),var(--cf-bg-hero);background-attachment:fixed;color:var(--cf-ivory);font-family:var(--cf-font-body);font-size:16px;line-height:1.6}
a{color:var(--cf-gold)}a:hover{color:#F6D978}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.hdr{position:sticky;top:0;z-index:20;background:var(--cf-bg-header);border-bottom:1px solid var(--cf-border);box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--cf-gold-edge);opacity:.45}
.hdr .wrap{padding-top:12px;padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--cf-ivory);white-space:nowrap}
.brand:hover{color:var(--cf-ivory)}
.brand img{display:block;height:52px;width:143px;object-fit:cover;object-position:left center}
.cf-btn{background:var(--cf-gold);color:var(--cf-ink);border:1px solid var(--cf-gold);border-radius:var(--cf-radius-sm);font-family:var(--cf-font-heading);font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;font-size:13px;padding:12px 18px;white-space:nowrap}
.cf-btn{background:var(--cf-gold-grad);border-color:var(--cf-gold-deep);box-shadow:var(--cf-highlight-strong),var(--cf-shadow-gold);text-shadow:var(--cf-text-emboss)}
.cf-btn:hover{background:var(--cf-gold-grad-hover);color:var(--cf-ink);box-shadow:var(--cf-highlight-strong),var(--cf-shadow-gold-hover)}
.cf-btn:active{background:var(--cf-gold-grad-pressed);box-shadow:inset 0 2px 4px rgba(0,0,0,.25);transform:translateY(1px)}
.cf-btn:focus-visible{outline:3px solid var(--cf-gold);outline-offset:2px}
.page{padding:clamp(36px,7vw,72px) 0 clamp(48px,8vw,84px)}
.page .wrap{max-width:760px}
h1{font-family:var(--cf-font-heading);font-weight:800;letter-spacing:-.025em;font-size:clamp(32px,6.4vw,48px);line-height:1.05;margin:0 0 18px}
h2{font-family:var(--cf-font-heading);font-weight:700;font-size:20px;margin:32px 0 8px}
p{margin:0 0 14px;color:var(--cf-muted)}
.todo{background:var(--cf-card);box-shadow:var(--cf-highlight),var(--cf-shadow-raised);border:1px solid var(--cf-border);border-left:4px solid var(--cf-gold);border-radius:var(--cf-radius-sm);padding:14px 16px;color:var(--cf-ivory)}
.ftr{position:relative;background:var(--cf-navy);border-top:1px solid var(--cf-border)}
.ftr::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--cf-gold-edge);opacity:.6}
.ftr .wrap{padding-top:28px;padding-bottom:36px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px;font-size:14px;color:var(--cf-muted)}
.ftr p{margin:0;font-size:14px}
.ftr a{color:var(--cf-muted)}
@media (max-width:480px){.hdr .cf-btn{font-size:12px;padding:10px 12px}.brand img{height:46px;width:126px}}
@media (prefers-reduced-motion: no-preference){.cf-btn{transition:transform .15s ease,box-shadow .15s ease}.cf-btn:hover{transform:translateY(-1px)}}