/* ===== RateRight — shared styles ===== */
:root{
  --bg:#0f1117; --surface:#171a22; --surface2:#1e222d; --line:#2a2f3b;
  --ink:#eef0f5; --muted:#969eb0; --accent:#c8f250; --accent-ink:#11140c;
  --gold:#f3c969; --warn:#f08a6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Schibsted Grotesk",system-ui,sans-serif;line-height:1.6;
  background-image:radial-gradient(circle at 85% -10%,rgba(200,242,80,.07),transparent 45%);
}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
a{color:var(--accent);text-decoration:none}
.serif{font-family:"Instrument Serif",serif;font-weight:400}

/* header */
.site-head{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:rgba(15,17,23,.86);backdrop-filter:blur(10px)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink)}
.logo .mk{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-weight:900;font-size:17px}
.logo b{font-weight:900;font-size:20px;letter-spacing:-.02em}
.links{display:flex;flex-wrap:wrap;gap:6px}
.links a{color:var(--muted);font-size:14px;font-weight:500;padding:7px 11px;border-radius:8px}
.links a:hover{color:var(--ink);background:var(--surface)}

/* footer */
.site-foot{border-top:1px solid var(--line);margin-top:54px;padding:30px 0 60px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;font-size:14px}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.disc{font-size:12px;margin-top:14px;max-width:700px;line-height:1.5}

/* hero */
.hero{padding:54px 0 8px;max-width:740px}
.hero h1{font-family:"Instrument Serif",serif;font-size:clamp(38px,6.5vw,62px);line-height:1.02}
.hero h1 i{color:var(--accent)}
.hero p{color:var(--muted);margin-top:16px;font-size:17px;max-width:580px}

/* breadcrumb + page heads */
.crumb{font-size:13px;color:var(--muted);padding:26px 0 0}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--ink)}
.page-title{font-family:"Instrument Serif",serif;font-size:clamp(30px,5vw,46px);line-height:1.05;margin:10px 0 6px}
.page-sub{color:var(--muted);max-width:620px;margin-bottom:8px}

/* ads */
.ad{background:linear-gradient(135deg,#15181f,#1a1e27);border:1px dashed #313747;border-radius:12px;
  display:flex;align-items:center;justify-content:center;color:#5b6477;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase}
.ad.banner{height:90px;margin:24px 0}
.ad.box{height:250px;margin-bottom:18px}

/* layout with sidebar */
.layout{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start;margin-top:10px}
@media(max-width:860px){.layout{grid-template-columns:1fr}aside{display:none}}
aside .sticky{position:sticky;top:90px}

/* tool card (calculator) */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px}
.field{margin-bottom:15px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field .hint{color:var(--muted);font-weight:400}
input,select{width:100%;font-family:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;background:var(--surface2);color:var(--ink);outline:none}
input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(200,242,80,.14)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
@media(max-width:540px){.grid3{grid-template-columns:1fr 1fr}}
.btn{font-family:inherit;font-weight:700;font-size:15px;background:var(--accent);color:var(--accent-ink);
  border:none;padding:13px 26px;border-radius:10px;cursor:pointer;margin-top:8px;transition:.12s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.result{margin-top:22px;border-top:1px solid var(--line);padding-top:20px;display:none}
.result.show{display:block}
.big{font-family:"Instrument Serif",serif;font-size:52px;line-height:1;color:var(--accent)}
.big small{font-size:18px;color:var(--muted)}
.rrow{display:flex;justify-content:space-between;padding:9px 0;font-size:14px;border-bottom:1px solid var(--line)}
.rrow:last-child{border:none}.rrow span:last-child{font-weight:700}
.micro{font-size:12px;color:var(--muted);margin-top:14px;font-style:italic}

/* article / prose */
.article{margin-top:30px;max-width:720px}
.article h2{font-family:"Instrument Serif",serif;font-size:28px;line-height:1.1;margin:34px 0 10px}
.article h3{font-size:19px;margin:26px 0 8px}
.article p{color:#d6dae3;margin-bottom:14px}
.article ul,.article ol{color:#d6dae3;margin:0 0 16px 22px}
.article li{margin-bottom:7px}
.article strong{color:var(--ink)}
.article a{color:var(--accent)}
.article blockquote{border-left:3px solid var(--accent);background:var(--surface);
  padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0;color:#d6dae3}
.article table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px}
.article th,.article td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.article th{background:var(--surface);color:var(--ink)}
.article .meta{color:var(--muted);font-size:13px;margin-bottom:18px}
.cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;
  padding:12px 22px;border-radius:10px;margin:8px 0}
.cta:hover{filter:brightness(1.06)}

/* homepage tool + blog grids */
.section-h{font-family:"Instrument Serif",serif;font-size:30px;margin:48px 0 6px}
.section-sub{color:var(--muted);margin-bottom:22px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:block;color:var(--ink);transition:.15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{font-size:18px;margin-bottom:6px}
.card p{color:var(--muted);font-size:14px}
.card .tagk{display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px}
.bcard .tagk{color:var(--gold)}