/* PowerStation Natin — shared styles for content & legal pages */
:root{
  --bg:#F7F8F7; --surface:#ffffff;
  --ink:#16181C; --ink-soft:#4B5259; --ink-faint:#8A9098;
  --line:#E7EAEC;
  --green:#16A34A; --green-soft:#E9F8EF;
  --blue:#2563EB; --blue-soft:#EAF0FE;
  --orange:#F97316; --orange-soft:#FEF1E7;
  --red:#DC2626; --red-soft:#FDECEC;
  --radius-lg:20px; --radius-md:14px;
  --shadow-sm:0 1px 2px rgba(16,24,32,.04), 0 1px 1px rgba(16,24,32,.03);
  --shadow-md:0 8px 24px rgba(16,24,32,.06), 0 2px 6px rgba(16,24,32,.04);
  --font-display:'Manrope','Inter',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1013; --surface:#181B1F;
    --ink:#F2F3F5; --ink-soft:#B7BEC6; --ink-faint:#767D85;
    --line:#2A2E33;
    --green-soft:#122B1D; --blue-soft:#131E33; --orange-soft:#2E2013; --red-soft:#301616;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 8px 24px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-.015em; line-height:1.2; margin:0;}
a{color:var(--blue); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
img{max-width:100%; height:auto;}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:1080px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand-mark{
  width:28px; height:28px; border-radius:8px; flex-shrink:0;
  background:linear-gradient(155deg,var(--green),#0E7C39);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px;
}
.site-nav{display:flex; gap:2px; flex-wrap:wrap;}
.site-nav a{
  color:var(--ink-soft); font-weight:600; font-size:14px;
  padding:8px 13px; border-radius:999px;
}
.site-nav a:hover{color:var(--ink); background:var(--surface); text-decoration:none;}
.site-nav a[aria-current=page]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm);}
.nav-cta{
  background:var(--green)!important; color:#fff!important;
  box-shadow:0 4px 12px rgba(22,163,74,.25);
}
@media(max-width:700px){
  .header-inner{flex-wrap:wrap;}
  .site-nav{width:100%; overflow-x:auto; padding-bottom:2px;}
  .site-nav a{white-space:nowrap; font-size:13px; padding:7px 11px;}
}

/* ---------- layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 20px;}
.article-wrap{max-width:740px; margin:0 auto; padding:0 20px;}
.page-head{padding:52px 0 28px; border-bottom:1px solid var(--line); margin-bottom:34px;}
.page-head .kicker{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; color:var(--green); background:var(--green-soft);
  padding:5px 11px; border-radius:999px; margin-bottom:16px;
}
.page-head h1{font-size:38px; font-weight:800;}
.page-head .standfirst{margin-top:14px; font-size:18px; color:var(--ink-soft); line-height:1.55;}
.page-head .byline{margin-top:18px; font-size:13px; color:var(--ink-faint); font-weight:600;}
@media(max-width:600px){.page-head h1{font-size:29px;} .page-head{padding:34px 0 22px;}}

/* ---------- prose ---------- */
.prose{padding-bottom:20px;}
.prose > * + *{margin-top:20px;}
.prose h2{font-size:24px; font-weight:800; margin-top:44px; padding-top:4px;}
.prose h3{font-size:18px; font-weight:700; margin-top:32px;}
.prose p{margin:0; color:var(--ink-soft);}
.prose strong{color:var(--ink); font-weight:700;}
.prose ul,.prose ol{margin:0; padding-left:22px; color:var(--ink-soft);}
.prose li + li{margin-top:9px;}
.prose a{font-weight:600;}
.prose code{
  font-family:var(--font-mono); font-size:14px; background:var(--blue-soft);
  color:var(--ink); padding:2px 6px; border-radius:6px; font-weight:600;
}
.prose blockquote{
  margin:0; padding:16px 20px; border-left:3px solid var(--green);
  background:var(--green-soft); border-radius:0 var(--radius-md) var(--radius-md) 0;
  color:var(--ink); font-size:15px;
}
.prose table{
  width:100%; border-collapse:collapse; font-size:14.5px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden;
}
.prose th{
  text-align:left; font-family:var(--font-display); font-size:12.5px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);
  padding:12px 14px; border-bottom:1px solid var(--line);
}
.prose td{padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-soft);}
.prose tbody tr:last-child td{border-bottom:none;}
.prose td:last-child, .prose th:last-child{text-align:right; font-family:var(--font-mono); font-weight:600;}
.prose th:last-child{font-family:var(--font-display);}
.table-scroll{overflow-x:auto;}

.callout{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--blue);
  border-radius:0 var(--radius-md) var(--radius-md) 0; padding:18px 20px;
}
.callout h4{font-size:14px; font-weight:800; margin-bottom:7px;}
.callout p{font-size:14.5px; margin:0; color:var(--ink-soft);}
.callout.safety{border-left-color:var(--red); background:var(--red-soft);}
.callout.tip{border-left-color:var(--green);}

.tool-inline{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:20px 22px; box-shadow:var(--shadow-sm);
}
.tool-inline div{flex:1; min-width:200px;}
.tool-inline h4{font-size:15.5px; font-weight:800; margin-bottom:4px;}
.tool-inline p{font-size:13.5px; color:var(--ink-faint); margin:0;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:14.5px;
  border:none; border-radius:12px; padding:13px 22px; cursor:pointer;
}
.btn:hover{text-decoration:none; opacity:.92;}
.btn-primary{background:var(--green); color:#fff; box-shadow:0 6px 16px rgba(22,163,74,.25);}
.btn-secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
.btn-sm{padding:10px 16px; font-size:13.5px; border-radius:10px;}

/* ---------- guide cards ---------- */
.card-grid{display:grid; grid-template-columns:1fr; gap:16px;}
@media(min-width:700px){.card-grid{grid-template-columns:1fr 1fr;}}
.guide-card{
  display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm);
  color:var(--ink); transition:transform .15s ease, border-color .15s ease;
}
.guide-card:hover{transform:translateY(-2px); border-color:var(--ink-faint); text-decoration:none;}
.guide-card .tag{
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:var(--green); background:var(--green-soft); padding:4px 9px; border-radius:999px;
}
.guide-card h3{font-size:17px; font-weight:800; margin:14px 0 8px;}
.guide-card p{font-size:14px; color:var(--ink-soft); margin:0;}
.guide-card .meta{margin-top:14px; font-size:12px; color:var(--ink-faint); font-weight:600;}

/* ---------- forms ---------- */
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:13px; font-weight:700; margin-bottom:7px;}
.form-row input, .form-row textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--line);
  background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:15px;
}
.form-row textarea{min-height:130px; resize:vertical;}
.form-row input:focus, .form-row textarea:focus{border-color:var(--blue); outline:none;}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm);
}

/* ---------- ad slots ---------- */
.ad-slot{
  margin:38px auto; max-width:740px; min-height:90px;
  display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--line); border-radius:var(--radius-md);
  color:var(--ink-faint); font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.ad-slot[data-filled=true]{border:none; min-height:0;}
.ad-label{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:center; margin-bottom:6px; font-weight:700;}

/* ---------- footer ---------- */
.site-footer{
  margin-top:70px; border-top:1px solid var(--line);
  background:var(--surface); padding:44px 0 40px;
}
.footer-grid{
  max-width:1080px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr; gap:30px;
}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;}}
.footer-grid h4{
  font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:14px;
}
.footer-grid ul{list-style:none; margin:0; padding:0;}
.footer-grid li + li{margin-top:10px;}
.footer-grid a{color:var(--ink-soft); font-size:14px; font-weight:500;}
.footer-grid a:hover{color:var(--ink);}
.footer-about p{font-size:14px; color:var(--ink-soft); margin:12px 0 0; max-width:340px;}
.footer-legal{
  max-width:1080px; margin:34px auto 0; padding:22px 20px 0; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--ink-faint); line-height:1.6;
}

/* ---------- cookie consent ---------- */
.consent{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:100;
  max-width:620px; margin:0 auto; display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:20px 22px;
}
.consent.show{display:block;}
.consent p{margin:0 0 14px; font-size:13.5px; color:var(--ink-soft); line-height:1.55;}
.consent .row{display:flex; gap:10px; flex-wrap:wrap;}
.consent .row .btn{flex:1; min-width:130px;}