/* ============================================================
   404 PAGE GENERATOR — Guides / landing pages
   Shares the golden-ratio design system from the main site so
   every guide page looks like a native part of 404pagegenerator.com.
   ============================================================ */

/* ---- self-hosted fonts ---- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}

:root{
  --phi:1.618;
  --ink:#16151A; --ink-soft:#34323C; --muted:#6E6B64;
  --bg:#FFFFFF; --paper:#F7F5F0; --paper-2:#EFEBE2; --line:#E4E0D6;
  --accent:#FF5A2D; --accent-deep:#DC3F11; --accent-tint:#FFEDE5;
  --ok:#1E9A68; --warn:#B7791F;
  --fs-caption:11px; --fs-small:14px; --fs-body:18px; --fs-lead:23px;
  --fs-h3:29px; --fs-h2:37px; --fs-h1:47px;
  --lh-body:1.618; --lh-tight:1.382;
  --sp-3xs:4px; --sp-2xs:7px; --sp-xs:11px; --sp-sm:18px;
  --sp-md:29px; --sp-lg:47px; --sp-xl:76px; --sp-2xl:123px;
  --read:680px; --maxw:990px; --header-h:76px;
  --radius-sm:10px; --radius:16px; --radius-lg:26px;
  --shadow-sm:0 1px 2px rgba(20,18,15,.05);
  --shadow:0 2px 7px rgba(20,18,15,.06),0 18px 47px rgba(20,18,15,.09);
  --font-head:'Space Grotesk','Segoe UI',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;
  --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono','Cascadia Code',Consolas,Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:var(--lh-body);font-size:var(--fs-body);-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);line-height:var(--lh-tight);letter-spacing:-.02em;font-weight:700}
a{color:var(--accent-deep)}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-md)}
.eyebrow{
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);letter-spacing:.08em;
  text-transform:uppercase;color:var(--accent-deep);
}
.skip{position:absolute;left:-999px}
.skip:focus{left:var(--sp-sm);top:var(--sp-sm);background:var(--ink);color:#fff;padding:var(--sp-xs) var(--sp-sm);border-radius:var(--radius-sm);z-index:200}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* ---- buttons ---- */
.btn{
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-small);line-height:var(--lh-tight);
  border:0;border-radius:var(--radius-sm);padding:var(--sp-xs) var(--sp-md);cursor:pointer;
  display:inline-flex;align-items:center;gap:var(--sp-2xs);justify-content:center;
  text-decoration:none;transition:transform .12s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 7px 18px rgba(255,90,45,.32)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 11px 29px rgba(255,90,45,.38)}
.btn-ghost{background:var(--bg);color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn-lg{font-size:var(--fs-body);padding:var(--sp-sm) var(--sp-lg)}

/* ---- header ---- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:var(--sp-sm)}
.brand{display:flex;align-items:center;gap:var(--sp-xs);text-decoration:none;font-family:var(--font-head);font-weight:700;color:var(--ink)}
.brand .name{font-size:var(--fs-body);letter-spacing:-.02em}
.brand .name b{color:var(--accent);animation:brand404Glow 2.4s ease-in-out infinite}
.nav{display:flex;align-items:center;gap:var(--sp-3xs)}
.nav a{
  text-decoration:none;font-family:var(--font-head);font-weight:600;font-size:var(--fs-small);
  color:var(--ink-soft);padding:var(--sp-2xs) var(--sp-xs);border-radius:var(--radius-sm);transition:background .15s,color .15s;
}
.nav a:hover{background:var(--paper);color:var(--ink)}
.nav a.nav-cta{background:var(--ink);color:#fff}
.nav a.nav-cta:hover{background:#000}
@media (max-width:680px){.nav a.nav-hide{display:none}}

/* ---- breadcrumb ---- */
.crumb{font-family:var(--font-head);font-size:var(--fs-small);font-weight:600;color:var(--muted);padding:var(--sp-md) 0 0}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent-deep)}
.crumb span{color:var(--ink)}

/* ---- article hero ---- */
.guide-hero{
  background:radial-gradient(900px 420px at 82% -20%,var(--accent-tint),transparent 60%),
  linear-gradient(180deg,var(--paper) 0%,var(--bg) 90%);
  border-bottom:1px solid var(--line);
}
.guide-hero .wrap{padding:var(--sp-sm) var(--sp-md) var(--sp-lg)}
.guide-hero h1{font-size:clamp(31px,5vw,var(--fs-h1));max-width:var(--read);margin:var(--sp-sm) 0 0}
.guide-hero .lede{font-size:clamp(18px,2.4vw,var(--fs-lead));color:var(--muted);max-width:var(--read);margin:var(--sp-sm) 0 0}
.guide-meta{display:flex;flex-wrap:wrap;gap:var(--sp-xs);margin-top:var(--sp-md);font-family:var(--font-head);font-size:var(--fs-small);font-weight:600;color:var(--muted)}
.guide-meta span{display:inline-flex;align-items:center;gap:var(--sp-3xs)}

/* ---- article body ---- */
.article{max-width:var(--read);margin:0 auto;padding:var(--sp-lg) var(--sp-md) var(--sp-xl)}
.article h2{font-size:clamp(26px,3.6vw,var(--fs-h2));margin:var(--sp-xl) 0 var(--sp-sm);scroll-margin-top:calc(var(--header-h) + var(--sp-sm))}
.article h2:first-child{margin-top:0}
.article h3{font-size:var(--fs-h3);margin:var(--sp-lg) 0 var(--sp-xs)}
.article p{margin:var(--sp-sm) 0;color:var(--ink-soft)}
.article ul,.article ol{margin:var(--sp-sm) 0;padding-left:var(--sp-md)}
.article li{margin:var(--sp-2xs) 0;color:var(--ink-soft)}
.article a{font-weight:500}
.article strong{color:var(--ink);font-weight:600}
.article hr{border:0;border-top:1px solid var(--line);margin:var(--sp-lg) 0}

/* ---- quick-answer box (front-loaded for AI + featured snippets) ---- */
.answer{
  background:var(--ink);color:#EDEAE2;border-radius:var(--radius-lg);
  padding:var(--sp-md) var(--sp-lg);margin:var(--sp-md) 0 var(--sp-lg);box-shadow:var(--shadow);
}
.answer .eyebrow{color:var(--accent);display:flex;align-items:center;gap:var(--sp-2xs)}
.answer p{color:#EDEAE2;margin:var(--sp-2xs) 0 0;font-size:var(--fs-lead);line-height:var(--lh-body)}
.answer p+p{margin-top:var(--sp-xs);font-size:var(--fs-body);color:#C7C3B9}
.answer strong{color:#fff;font-weight:600}
.answer code{background:#2E2C36;color:#FFB59B}
.answer a{color:#fff;font-weight:600}

/* ---- numbered steps ---- */
.step{
  position:relative;padding-left:calc(var(--sp-lg) + var(--sp-2xs));margin:var(--sp-md) 0;
}
.step .num{
  position:absolute;left:0;top:2px;width:var(--sp-lg);height:var(--sp-lg);
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-tint);color:var(--accent-deep);border-radius:50%;
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-lead);
}
.step h3{margin-top:var(--sp-2xs)}

/* ---- code ---- */
code{
  font-family:var(--mono);font-size:.86em;background:var(--paper-2);
  color:var(--accent-deep);padding:.12em .38em;border-radius:6px;
}
pre{
  background:#1B1A21;color:#E8E6E0;border-radius:var(--radius);
  padding:var(--sp-sm) var(--sp-md);margin:var(--sp-sm) 0;overflow-x:auto;
  font-family:var(--mono);font-size:var(--fs-small);line-height:1.62;
  border:1px solid #2A2832;
}
pre code{background:none;color:inherit;padding:0;font-size:inherit;border-radius:0}
.code-label{
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-caption);
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  margin:var(--sp-sm) 0 calc(var(--sp-2xs) * -1 + 2px);
}

/* ---- callouts ---- */
.callout{
  border-radius:var(--radius);padding:var(--sp-sm) var(--sp-md);margin:var(--sp-md) 0;
  border:1px solid var(--line);background:var(--paper);
}
.callout p{margin:0;color:var(--ink-soft);font-size:var(--fs-small)}
.callout p+p{margin-top:var(--sp-2xs)}
.callout strong{color:var(--ink)}
.callout.tip{border-color:#BFE3D2;background:#EEF8F3}
.callout.tip .tag{color:var(--ok)}
.callout.warn{border-color:#EBD7A6;background:#FBF4E2}
.callout.warn .tag{color:var(--warn)}
.callout .tag{
  font-family:var(--font-head);font-weight:700;font-size:var(--fs-caption);
  letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:var(--sp-3xs);
}

/* ---- inline CTA panel ---- */
.cta-panel{
  background:linear-gradient(165deg,var(--paper) 0%,var(--accent-tint) 130%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-lg);margin:var(--sp-xl) 0;text-align:center;
}
.cta-panel h2{margin:0 0 var(--sp-2xs)!important;font-size:var(--fs-h3)!important}
.cta-panel p{margin:0 auto var(--sp-md);max-width:46ch;color:var(--ink-soft)}
.cta-panel .sub{font-size:var(--fs-small);color:var(--muted);margin-top:var(--sp-sm);margin-bottom:0}

/* ---- FAQ ---- */
.faq details{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);
  margin:var(--sp-xs) 0;padding:0 var(--sp-md);transition:border-color .15s;
}
.faq details[open]{border-color:#CFC8B8}
.faq summary{
  font-family:var(--font-head);font-weight:600;font-size:var(--fs-body);cursor:pointer;
  padding:var(--sp-sm) 0;list-style:none;display:flex;justify-content:space-between;gap:var(--sp-sm);align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--fs-h3);color:var(--accent-deep);line-height:1;flex:none}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:0 0 var(--sp-sm);color:var(--ink-soft);font-size:var(--fs-small)}

/* ---- related guides grid ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-sm);margin:var(--sp-md) 0}
.card{
  display:block;text-decoration:none;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-md);
  transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#CFC8B8}
.card .k{font-family:var(--font-head);font-weight:700;font-size:var(--fs-lead);margin-bottom:var(--sp-3xs);letter-spacing:-.02em}
.card .d{font-size:var(--fs-small);color:var(--muted);line-height:var(--lh-body)}
.card .go{font-family:var(--font-head);font-weight:600;font-size:var(--fs-small);color:var(--accent-deep);margin-top:var(--sp-xs)}

/* ---- footer ---- */
.site-footer{background:#0F0E12;color:#9C988E;padding:var(--sp-lg) 0;margin-top:var(--sp-xl)}
.foot-top{display:flex;flex-wrap:wrap;gap:var(--sp-md);justify-content:space-between;align-items:flex-start}
.foot-brand{font-family:var(--font-head);font-weight:700;color:#fff;font-size:var(--fs-body)}
.foot-brand b{color:var(--accent);animation:brand404Glow 2.4s ease-in-out infinite}
@keyframes brand404Glow{
  0%,100%{color:var(--accent);text-shadow:0 0 0 rgba(255,90,45,0)}
  50%{color:#FF6E33;text-shadow:0 0 22px rgba(255,90,45,1),0 0 40px rgba(255,90,45,.6),0 0 9px rgba(255,90,45,.95)}
}
@media (prefers-reduced-motion:reduce){.brand .name b,.foot-brand b{animation:none}}
.foot-links{display:flex;flex-wrap:wrap;gap:var(--sp-2xs) var(--sp-md)}
.foot-links a{color:#C7C3B9;text-decoration:none;font-size:var(--fs-small)}
.foot-links a:hover{color:#fff}
.foot-rule{border:0;border-top:1px solid #26242B;margin:var(--sp-md) 0 var(--sp-sm)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:var(--sp-xs);justify-content:space-between;font-size:var(--fs-small)}
.foot-bottom a{color:var(--accent);text-decoration:none}
.foot-bottom a:hover{text-decoration:underline}

@media (max-width:560px){
  :root{--sp-xl:54px}
  .guide-hero .wrap{padding-bottom:var(--sp-md)}
  .cta-panel{padding:var(--sp-md)}
}

/* ============================================================
   THEME MODES — dark / matrix (theme.js toggles html[data-theme]).
   theme.js redefines the core design tokens, so token-based
   colours flip automatically. These rules patch the few guide
   elements whose colours are hardcoded or use a token that
   inverts (e.g. .answer uses var(--ink) as a background).
   ============================================================ */
html[data-theme="dark"] .site-header{background:rgba(18,18,23,.9)}
html[data-theme="dark"] .nav a.nav-cta:not([data-flashlight-trigger]){background:#2E2E3A}
html[data-theme="dark"] .answer{background:#121217}
html[data-theme="dark"] .callout.tip{background:rgba(63,191,133,.1);border-color:rgba(63,191,133,.32)}
html[data-theme="dark"] .callout.warn{background:rgba(217,164,65,.1);border-color:rgba(217,164,65,.32)}
html[data-theme="dark"] .skip:focus{background:#2A2A34}

html[data-theme="matrix"] .site-header{background:rgba(0,0,0,.92)}
html[data-theme="matrix"] .nav a.nav-cta:not([data-flashlight-trigger]){background:#0A2A12;color:#00FF66}
html[data-theme="matrix"] .answer{background:#000}
html[data-theme="matrix"] .callout.tip{background:#06180D;border-color:rgba(0,255,102,.3)}
html[data-theme="matrix"] .callout.warn{background:#161208;border-color:rgba(159,232,46,.3)}
html[data-theme="matrix"] pre{background:#000;border-color:rgba(0,255,102,.22)}
html[data-theme="matrix"] .skip:focus{background:#0A2A12}