/* Shared styles for kautus.net/guides. Same tokens and fonts as the landing page (public/index.html). */
:root{
  --navy:#1B2E4A; --navy-deep:#101826; --ink:#1B2430; --ink-dim:#5B6B7F;
  --bg:#FAF8F3; --panel:#F1EDE3; --panel-border:#E4E0D4; --white:#FFFFFF;
  --gold:#D98E0B; --gold-soft:#F3D9A6; --gold-text:#8A5A06; --ok:#2F8558; --critical:#B23A2E;
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
a{color:var(--navy); text-decoration-color:var(--gold); text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
::selection{background:var(--gold-soft); color:var(--navy);}
h1,h2,h3{font-family:var(--font-display); color:var(--navy); text-wrap:balance; margin:0;}
p{margin:0;}

/* header */
.g-top{border-bottom:1px solid var(--panel-border); background:rgba(250,248,243,.92); position:sticky; top:0; z-index:10; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
.g-top-in{max-width:1160px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:24px;}
.g-brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.g-brand span{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.01em; color:var(--navy);}
.g-links{display:flex; gap:22px; margin-left:auto;}
.g-links a{color:var(--ink-dim); text-decoration:none; font-size:14px; font-weight:500;}
.g-links a:hover,.g-links a[aria-current]{color:var(--navy);}
.g-btn{display:inline-flex; align-items:center; justify-content:center; background:var(--navy); color:#fff; text-decoration:none; font-weight:600; font-size:14px; padding:10px 18px; border-radius:999px; white-space:nowrap;}
.g-btn:hover{background:var(--navy-deep);}
.g-btn.gold{background:var(--gold); color:var(--navy-deep);}
.g-btn.gold:hover{background:#c27e08;}
@media (max-width:720px){ .g-links{display:none;} .g-btn.top{margin-left:auto;} }

/* page */
.g-wrap{max-width:1160px; margin:0 auto; padding-inline:24px; padding-block:40px 80px;}
.g-crumbs{font-size:13px; color:var(--ink-dim); display:flex; gap:8px; flex-wrap:wrap;}
.g-crumbs a{color:var(--ink-dim);}
.g-eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy);}
.g-eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--gold);}

/* article */
.g-head{max-width:760px; display:flex; flex-direction:column; gap:14px; margin-top:18px;}
.g-head h1{font-size:clamp(32px,4.6vw,46px); line-height:1.08; letter-spacing:-.02em; font-weight:700;}
.g-lede{font-size:19px; color:var(--ink-dim); line-height:1.55;}
.g-byline{font-size:13.5px; color:var(--ink-dim);}
.g-byline b{color:var(--ink); font-weight:600;}
.g-layout{display:grid; grid-template-columns:minmax(0,760px) 250px; gap:56px; margin-top:36px; align-items:start;}
@media (max-width:1000px){ .g-layout{grid-template-columns:minmax(0,1fr);} }
.g-toc{position:sticky; top:84px; font-size:13.5px; display:flex; flex-direction:column; gap:8px; border-left:2px solid var(--panel-border); padding-left:16px;}
.g-toc b{font-family:var(--font-display); color:var(--navy); font-size:12px; letter-spacing:.12em; text-transform:uppercase;}
.g-toc a{color:var(--ink-dim); text-decoration:none;}
.g-toc a:hover{color:var(--navy);}
.g-toc .g-btn{margin-top:10px; align-self:flex-start; color:#fff;}
/* After .g-toc so it wins: on narrow screens the sidebar goes away (the article has its own register box). */
@media (max-width:1000px){ .g-toc{display:none;} }

.g-body{display:flex; flex-direction:column; gap:20px; min-width:0;}
.g-body h2{font-size:28px; line-height:1.2; letter-spacing:-.01em; margin-top:28px; scroll-margin-top:84px;}
.g-body h3{font-size:19px; line-height:1.3; margin-top:8px; scroll-margin-top:84px;}
.g-body ul,.g-body ol{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px;}
.g-body li::marker{color:var(--gold-text);}
.g-body strong{color:var(--navy);}
.g-body code{font-family:var(--font-mono); font-size:.9em; background:var(--panel); padding:1px 6px; border-radius:5px; color:var(--navy);}

.g-key{background:var(--white); border:1px solid var(--panel-border); border-radius:16px; padding:20px 22px; display:flex; flex-direction:column; gap:10px;}
.g-key b.t{font-family:var(--font-display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text);}
.g-note{background:var(--panel); border-radius:12px; padding:14px 18px; font-size:15.5px;}
.g-note b{color:var(--navy);}

/* numbered box-by-box list */
.g-steps{list-style:none; padding:0 !important; counter-reset:s; gap:16px !important;}
.g-steps > li{counter-increment:s; display:grid; grid-template-columns:34px minmax(0,1fr); gap:4px 14px;}
.g-steps > li::before{content:counter(s); grid-row:span 3; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; display:grid; place-items:center; margin-top:2px;}
.g-steps > li > *{grid-column:2;}
.g-steps h3{margin:0;}

/* schematic of the certificate */
.g-form{background:var(--white); border:1.5px solid var(--navy); border-radius:6px; padding:10px; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; font-size:12.5px; line-height:1.3;}
.g-form div{border:1px solid var(--panel-border); border-radius:4px; padding:8px 9px; min-height:54px; display:flex; flex-direction:column; gap:3px; color:var(--ink-dim); min-width:0;}
.g-form div b{font-family:var(--font-display); color:var(--navy); font-size:13px;}
.g-form div i{font-style:normal; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--gold); color:var(--navy-deep); font-weight:700; font-size:11.5px; font-family:var(--font-display);}
.g-form .title{grid-column:span 4; background:var(--panel);}
.g-form .s2{grid-column:span 2;} .g-form .s3{grid-column:span 3;} .g-form .s4{grid-column:span 4;} .g-form .s6{grid-column:span 6;}
.g-form .tall{min-height:120px;}
.g-form .rows2{grid-row:span 2;}
.g-cap{font-size:13.5px; color:var(--ink-dim);}
@media (max-width:560px){ .g-form{grid-template-columns:minmax(0,1fr);} .g-form > div{grid-column:auto !important;} }

/* tables */
.g-table{overflow-x:auto; border:1px solid var(--panel-border); border-radius:12px; background:var(--white);}
.g-table table{border-collapse:collapse; width:100%; font-size:15px; min-width:520px;}
.g-table th,.g-table td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--panel-border); vertical-align:top;}
.g-table th{font-family:var(--font-display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--panel);}
.g-table tr:last-child td{border-bottom:0;}
.g-table td.mono{font-family:var(--font-mono); white-space:nowrap; color:var(--navy);}

.g-flags{list-style:none; padding:0 !important;}
.g-flags li{display:grid; grid-template-columns:22px minmax(0,1fr); gap:10px;}
.g-flags li::before{content:"!"; width:20px; height:20px; border-radius:50%; background:rgba(178,58,46,.12); color:var(--critical); font-weight:800; font-size:12px; display:grid; place-items:center; margin-top:4px;}

/* call to action */
.g-cta{background:var(--navy-deep); color:#E7ECF5; border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:12px; margin-top:16px;}
.g-cta h2{color:#fff; margin:0; font-size:24px;}
.g-cta p{color:#B9C4D6; font-size:16px;}
.g-cta .g-btn{align-self:flex-start; margin-top:4px;}

.g-faq{display:flex; flex-direction:column; gap:10px;}
.g-faq details{background:var(--white); border:1px solid var(--panel-border); border-radius:12px; padding:14px 18px;}
.g-faq summary{cursor:pointer; font-weight:600; color:var(--navy);}
.g-faq details p{margin-top:8px;}
.g-fine{font-size:13.5px; color:var(--ink-dim); border-top:1px solid var(--panel-border); padding-top:16px;}

/* guides index */
.g-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; margin-top:32px;}
.g-card{background:var(--white); border:1px solid var(--panel-border); border-radius:16px; padding:22px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:var(--ink);}
.g-card:hover{border-color:var(--gold);}
.g-card h2{font-size:21px; line-height:1.25;}
.g-card p{font-size:15px; color:var(--ink-dim);}
.g-card span{font-size:13px; color:var(--gold-text); font-weight:600;}

/* footer */
.g-foot{border-top:1px solid var(--panel-border);}
.g-foot-in{max-width:1160px; margin:0 auto; padding:28px 24px 40px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--ink-dim);}
.g-foot-in a{color:inherit;}