/* ===========================================================================
   IFCalculator — unified stylesheet (v51 "Civic Grid" + premium refinements)
   =========================================================================== */
:root{
  --bg:#ebedf0; --card:#ffffff; --ink:#16181d; --ink-2:#3c424d; --muted:#6a7180;
  --faint:#9aa1ad; --line:#dcdfe5; --line-2:#e6e8ed;
  --accent:#1f47b3; --accent-deep:#163585; --accent-tint:#eef1f9; --accent-line:#b9c4e0;
  --maxw:1160px; --font:"Schibsted Grotesk",system-ui,sans-serif;
  --sh-sm:0 1px 1px rgba(22,24,29,.03),0 1px 2px rgba(22,24,29,.05);
  --sh-md:0 1px 1px rgba(22,24,29,.04),0 2px 4px rgba(22,24,29,.04),0 18px 40px -28px rgba(22,24,29,.42);
  /* aliases consumed by the shared calc engine CSS (engine vars.css/calculator.css
     load BEFORE this file, so these ifcalc values win and theme the widget) */
  --white:#ffffff; --bg-2:#f2f4f7; --ink-3:#9aa1ad; --line-soft:#e6e8ed;
  --sans:"Schibsted Grotesk",system-ui,sans-serif; --serif-italic:"Schibsted Grotesk",Georgia,serif;
  --cat-color:#1f47b3; --cat-color-soft:#eef1f9; --header-h:60px; --max-w:1160px;
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden}
body{font-family:var(--font);background-color:var(--bg);color:var(--ink);line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.has-grid{
  background-image:linear-gradient(rgba(22,24,29,.020) 1px,transparent 1px),linear-gradient(90deg,rgba(22,24,29,.020) 1px,transparent 1px);
  background-size:34px 34px}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}

/* -------------------- header -------------------- */
header.site{position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(247,249,251,.86) 100%);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(22,24,29,.04),0 8px 24px -18px rgba(22,24,29,.26);
  transition:box-shadow .25s ease,background .25s ease,border-color .25s ease}
header.site.scrolled{background:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(245,247,250,.92) 100%);
  border-bottom-color:var(--line-2);box-shadow:0 1px 0 rgba(22,24,29,.05),0 14px 30px -18px rgba(22,24,29,.36)}
.nav{display:flex;align-items:center;gap:24px;height:60px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand .mark{width:26px;height:26px;display:block;flex:none;box-shadow:0 1px 2px rgba(22,24,29,.18)}
.brand .word{font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink)}
.brand .word b{color:var(--ink);font-weight:800}
.nav-mid{display:flex;align-items:center;gap:2px;margin-left:10px}
.nav-mid a{position:relative;color:var(--ink-2);font-weight:500;font-size:.88rem;padding:9px 13px;letter-spacing:-.005em;transition:color .15s}
.nav-mid a::after{content:"";position:absolute;left:13px;right:13px;bottom:6px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.nav-mid a:hover,.nav-mid a[aria-current]{color:var(--accent)}
.nav-mid a:hover::after,.nav-mid a[aria-current]::after{transform:scaleX(1)}
.hsearch{margin-left:auto;position:relative;width:300px}
.hsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--faint);transition:color .15s;pointer-events:none}
.hsearch input{width:100%;height:38px;padding:0 14px 0 38px;border:1px solid var(--line);background:#fff;font:500 .88rem var(--font);color:var(--ink);letter-spacing:-.005em;box-shadow:inset 0 1px 2px rgba(22,24,29,.03);transition:border-color .15s,box-shadow .15s}
.hsearch input::placeholder{color:var(--faint)}
.hsearch input:hover{border-color:var(--accent-line)}
.hsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,71,179,.10)}
.hsearch:focus-within svg{color:var(--accent)}
@media(max-width:860px){.nav-mid{display:none}.hsearch{width:auto;flex:1}}

/* -------------------- autocomplete -------------------- */
.ac{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh-md);max-height:60vh;overflow:auto}
.bigsearch .ac{top:calc(100% + 8px)}
.ac-item{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line-2);cursor:pointer}
.ac-item:last-child{border-bottom:0}
.ac-item.on{background:var(--accent-tint)}
.ac-item .ac-n{font-weight:600;font-size:.9rem;color:var(--ink)}
.ac-item.on .ac-n{color:var(--accent)}
.ac-item .ac-c{font-size:.74rem;color:var(--muted);white-space:nowrap}

/* -------------------- breadcrumb sub-bar -------------------- */
.crumbs{position:relative;left:50%;margin-left:-50vw;width:100vw;background:var(--card);border-bottom:1px solid var(--line)}
.crumbs .wrap{padding-top:12px;padding-bottom:12px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.795rem;color:var(--muted);font-weight:500;letter-spacing:-.005em}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs a{color:var(--muted);text-underline-offset:3px;text-decoration-color:var(--accent-line);transition:color .15s}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
.crumbs .sep{display:inline-block;width:5px;height:5px;border-top:1.4px solid var(--faint);border-right:1.4px solid var(--faint);transform:rotate(45deg);font-size:0}
.crumbs [aria-current]{color:var(--ink);font-weight:600}

/* -------------------- buttons -------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;font-weight:600;font-size:.9rem;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-deep)}
.btn-ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* -------------------- shared section heads -------------------- */
.section{padding:54px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font-weight:700;font-size:clamp(1.45rem,2.5vw,1.85rem);letter-spacing:-.02em}
.sec-head .meta{color:var(--muted);font-size:.86rem}
.eyebrow-s{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kicker .sq{width:8px;height:8px;background:var(--accent);display:block;box-shadow:0 0 0 3px rgba(31,71,179,.10)}

/* ============================ HOMEPAGE ============================ */
.hero{padding:46px 0 50px}
.hero-head{margin-bottom:22px;max-width:62ch}
.hero-head h1{font-weight:700;font-size:clamp(1.85rem,3.4vw,2.6rem);line-height:1.06;letter-spacing:-.03em;margin-top:14px}
.hero-grid{display:grid;grid-template-columns:1.32fr .88fr;gap:34px;align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:26px}}

.chiprow{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:8px}
@media(max-width:560px){.chiprow{grid-template-columns:repeat(3,1fr)}}
.chip{display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);padding:11px 12px;cursor:pointer;text-align:left;font-family:var(--font);transition:background .16s,border-color .16s,color .16s}
.chip:hover{background:var(--accent-tint);border-color:#c8cfdf}
.chip .no{font-weight:700;font-size:.74rem;color:var(--faint);transition:color .16s}
.chip .lb{font-weight:600;font-size:.82rem;color:var(--ink-2);line-height:1.15;transition:color .16s}
.chip .sq{width:9px;height:9px;background:var(--accent);display:none;margin-left:auto;flex:none}
.chip[aria-selected="true"]{background:var(--accent-tint);border-color:#b9c4e0}
.chip[aria-selected="true"] .no{color:var(--accent)}
.chip[aria-selected="true"] .lb{color:var(--ink)}
.chip[aria-selected="true"] .sq{display:block}

.calc{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-md)}
.calc-body{padding:24px}
.calc-pane{display:none}
.calc-pane.active{display:block;animation:fade .26s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.calc-pane h2{font-weight:700;font-size:1.18rem;letter-spacing:-.015em}
.calc-pane .lede{color:var(--muted);font-size:.84rem;margin-top:3px;margin-bottom:20px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields.one{grid-template-columns:1fr}
@media(max-width:480px){.fields{grid-template-columns:1fr}}
.field label{display:block;font-size:.74rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field select{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);background:#fbfcfd;font:500 1rem var(--font);color:var(--ink);font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 2px rgba(22,24,29,.03);transition:border-color .15s,box-shadow .15s,background .15s}
/* no native number spinners (cleaner, calmer inputs) */
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%236a7180'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.field input:hover,.field select:hover{border-color:var(--accent-line)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(31,71,179,.10)}
.field.hidden{display:none}
.field-help{font-size:.72rem;color:var(--faint);margin-top:5px}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border:1px solid var(--line);height:44px;background:#fbfcfd;box-shadow:inset 0 1px 2px rgba(22,24,29,.03)}
.seg button{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.seg button{border:0;background:transparent;cursor:pointer;font:600 .9rem var(--font);color:var(--muted);transition:color .15s,background .15s}
.seg button+button{border-left:1px solid var(--line)}
.seg button:hover{color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--accent-tint);color:var(--accent);font-weight:700}

.r-main{font-weight:700;color:var(--accent);letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
.result{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.r-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);font-weight:600}
.result .r-main{font-size:2.2rem;margin-top:7px}
.r-sub{font-size:.84rem;color:var(--ink-2);margin-top:8px}
.r-aside{text-align:right}
.r-aside .ra-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
.r-aside .ra-v{font-weight:700;font-size:1.25rem;margin-top:5px;font-variant-numeric:tabular-nums}
.dual{display:grid;grid-template-columns:1fr 1fr;margin-top:22px;border-top:1px solid var(--line)}
.dual .d{padding:16px 18px 4px}
.dual .d+.d{border-left:1px solid var(--line)}
.dual .d .r-main{font-size:1.85rem}

.hero-copy{padding-top:4px}
.hero-copy .lead{font-size:1.02rem;color:var(--ink-2);max-width:42ch}
.hero-copy .note{margin-top:18px;border-left:2px solid var(--accent);padding-left:14px;font-size:.9rem;color:var(--muted);max-width:40ch}
.hero-facts{margin-top:24px;border-top:1px solid var(--line)}
.hero-facts div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)}
.hero-facts dt{font-size:.86rem;color:var(--muted)}
.hero-facts dd{font-size:.86rem;font-weight:600;color:var(--ink)}
.hero-cta{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

/* search band */
.search-sec{position:relative;left:50%;margin-left:-50vw;width:100vw;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.search-inner{max-width:780px;margin:0 auto;text-align:center;padding:56px 24px}
.search-inner h2{font-weight:700;font-size:clamp(1.5rem,2.8vw,1.95rem);letter-spacing:-.02em}
.search-inner .lead{color:var(--muted);margin-top:8px;font-size:.98rem}
.bigsearch{display:flex;margin-top:26px;border:1px solid var(--accent);background:#fff;position:relative}
.bigsearch .ic{display:grid;place-items:center;padding-left:18px;color:var(--muted)}
.bigsearch input{flex:1;height:56px;padding:0 14px;border:0;background:transparent;font:500 1.04rem var(--font);color:var(--ink)}
.bigsearch input:focus{outline:none}
.bigsearch button{height:56px;padding:0 26px;background:var(--accent);color:#fff;border:0;font:700 .92rem var(--font);cursor:pointer}
.bigsearch button:hover{background:var(--accent-deep)}
.bigsearch .ac{text-align:left}
.pop-links{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:8px 16px;font-size:.9rem}
.pop-links .k{color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.pop-links a{color:var(--ink-2);font-weight:500;border-bottom:1px solid transparent;padding-bottom:1px}
.pop-links a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* categories grid */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}
.cat{background:var(--card);border:1px solid var(--line);padding:20px 20px 18px;display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s}
.cat:hover{border-color:#c8cfdf;box-shadow:var(--sh-md)}
.cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cat-top h3{font-weight:700;font-size:1.04rem;letter-spacing:-.01em}
.cat-top .count{font-size:.74rem;color:var(--muted);font-weight:600;white-space:nowrap}
.cat .desc{color:var(--muted);font-size:.83rem;margin:9px 0 14px;line-height:1.45}
.cat-list{display:flex;flex-direction:column;border-top:1px solid var(--line-2)}
.cat-list a{font-size:.86rem;color:var(--ink-2);padding:6px 0;border-bottom:1px solid var(--line-2);transition:color .14s,padding .14s}
.cat-list a:hover{color:var(--accent);padding-left:5px}
.cat-more{margin-top:14px;font-weight:600;font-size:.82rem;color:var(--accent)}
.cat-more:hover{color:var(--accent-deep)}

/* stats strip */
.stats{position:relative;left:50%;margin-left:-50vw;width:100vw;background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats-grid{max-width:var(--maxw);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:640px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
.stats .s{padding:28px 22px;border-left:1px solid var(--line-2)}
.stats .s:first-child{border-left:0}
@media(max-width:640px){.stats .s:nth-child(odd){border-left:0}.stats .s:nth-child(n+3){border-top:1px solid var(--line-2)}}
.stats .s b{display:block;font-weight:700;font-size:1.5rem;letter-spacing:-.015em}
.stats .s span{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}

/* ============================ CALCULATOR PAGE ============================ */
.hero-section{padding:0 0 44px}
.page-head{padding:26px 0 18px}
.page-head h1{font-weight:700;font-size:clamp(1.45rem,2.5vw,1.95rem);line-height:1.12;letter-spacing:-.025em;margin-top:14px;color:var(--ink)}
.page-head h1 .h1-t::after{content:"";display:inline-block;width:.62em;height:3px;background:var(--accent);margin-left:.26em;vertical-align:.26em}
.page-head h1 .h1-sub{display:block;font-size:.42em;font-weight:600;letter-spacing:-.005em;color:var(--muted);margin-top:13px}
.page-head .blurb{color:var(--ink-2);font-size:clamp(.9rem,1vw,.98rem);line-height:1.55;margin-top:13px;max-width:66ch}
.page-head .head-rule{height:1px;background:linear-gradient(90deg,var(--line) 0%,var(--line) 65%,transparent 100%);margin-top:22px}

/* subtle "how to use" strip — sits just above the calculator so the guidance is
   noticed without pushing it far down the page; transparent on the grey bg */
.calc-howto{margin:16px 0 2px}
.calc-howto .ch-k{display:block;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin-bottom:9px}
.calc-howto ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 16px;counter-reset:ch}
.calc-howto li{counter-increment:ch;display:flex;align-items:baseline;gap:9px;font-size:.875rem;line-height:1.45;color:var(--ink-2);flex:1 1 250px;max-width:48ch}
.calc-howto li::before{content:counter(ch);flex:none;width:17px;height:17px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);font-size:.66rem;font-weight:700;transform:translateY(2px)}
@media(max-width:640px){.calc-howto li{flex-basis:100%}}

.calc-grid{display:grid;grid-template-columns:1.32fr .88fr;gap:36px;align-items:start;margin-top:22px}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr;gap:24px}}

.banner{padding:22px 26px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fcfdfe 0%,#f2f5fa 100%)}
@media(max-width:760px){.banner{padding:20px 22px}}
.b-fig .r-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:700}
.b-row{display:flex;align-items:baseline;gap:16px;margin-top:10px;flex-wrap:wrap}
.banner .r-main{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.r-cat{display:inline-block;font-weight:700;font-size:.92rem;color:var(--accent);letter-spacing:.005em;background:var(--accent-tint);padding:7px 14px;border:1px solid var(--accent-line)}
.r-note{font-size:.875rem;line-height:1.5;color:var(--ink-2);margin-top:13px;max-width:52ch}
.b-scale{min-width:0;margin-top:20px}
.scale-track{position:relative;display:flex;border:1px solid var(--line);background:#fff;box-shadow:inset 0 1px 2px rgba(22,24,29,.04)}
.seg-cell{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px 6px;font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.02em;border-left:1px solid var(--line-2);transition:background .18s,color .18s}
.seg-cell:first-child{border-left:0}
.seg-cell[data-on="true"]{background:var(--accent-tint);color:var(--accent);font-weight:700}
.scale-tick{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--accent);transform:translateX(-1px);transition:left .28s cubic-bezier(.4,0,.2,1),opacity .18s;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.scale-tick::before{content:"";position:absolute;top:-4px;left:-3px;width:8px;height:8px;background:var(--accent)}
.scale-tick::after{content:"";position:absolute;bottom:-4px;left:-3px;width:8px;height:8px;background:var(--accent)}
.scale-cap{display:flex;justify-content:space-between;margin-top:11px;font-size:.68rem;letter-spacing:.02em;color:var(--faint)}
.calc-controls{padding:22px 26px;background:var(--card)}
@media(max-width:760px){.calc-controls{padding:20px 22px}}
.fields-fw{display:flex;flex-wrap:wrap;gap:18px}
.fields-fw .field{flex:1 1 150px;min-width:140px}
.fields-fw .field.sex{flex:1 1 220px;min-width:190px}
@media(max-width:480px){.fields-fw .field,.fields-fw .field.sex{flex:1 1 100%}}
.calc-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px;padding:16px 26px;border-top:1px solid var(--line);background:#fbfcfd}
@media(max-width:760px){.calc-foot{padding:16px 22px}}
.r-foot{font-size:.74rem;color:var(--faint);max-width:34ch;line-height:1.45}
.helpful{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.helpful .hk{font-size:.82rem;color:var(--muted);font-weight:500}
.helpful .hbtns{display:inline-flex;gap:8px}
.helpful .hbtns button{background:#fff;border:1px solid var(--line);cursor:pointer;font:600 .8rem var(--font);color:var(--ink-2);padding:7px 18px;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.helpful .hbtns button:hover{border-color:var(--accent-line);color:var(--accent);box-shadow:0 1px 2px rgba(22,24,29,.05)}
.helpful .hbtns button[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent)}
.helpful .h-msg{font-size:.8rem;color:var(--muted)}
/* bespoke widget extras (premium-banner style) */
.wx-result{background:linear-gradient(180deg,#fcfdfe 0%,#eef2fb 100%);border-top:1px solid var(--accent-line);padding:24px 28px}
@media(max-width:760px){.wx-result{padding:20px 22px}}
.wx-result .r-main{font-size:clamp(2.3rem,4.2vw,3.1rem)}
.wx-result .r-note{font-size:.92rem;margin-top:10px}
.r-mini{font-weight:700;font-size:1.2rem;margin-top:5px;font-variant-numeric:tabular-nums;color:var(--ink)}
.try-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.try-chips .k{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.try-chips button{border:1px solid var(--line);background:#fff;font:600 .8rem var(--font);color:var(--ink-2);padding:7px 12px;cursor:pointer;transition:.15s}
.try-chips button:hover{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent)}

/* compact how-to aside (bg-less, like homepage copy) */
.howto-aside{background:transparent;padding:4px 0 4px 18px;position:relative}
.howto-aside::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;background:var(--accent)}
.howto-aside .eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.howto-aside h2{font-weight:700;font-size:1.06rem;letter-spacing:-.02em;color:var(--ink)}
.howto-aside .ha-sub{font-size:.8rem;color:var(--muted);margin-top:4px;line-height:1.45}
.steps-compact{counter-reset:step;display:flex;flex-direction:column;gap:13px;margin-top:18px}
.steps-compact li{display:flex;gap:12px;align-items:flex-start}
.steps-compact li::before{counter-increment:step;content:counter(step);font-weight:700;font-size:.72rem;color:var(--accent);background:var(--accent-tint);border:1px solid var(--accent-line);width:24px;height:24px;display:grid;place-items:center;flex:none;margin-top:1px}
.steps-compact li p{font-size:.82rem;line-height:1.45;color:var(--ink-2)}
.steps-compact strong{color:var(--ink);font-weight:600}
.howto-tip{margin-top:18px;border-top:1px solid var(--line-2);padding-top:14px;font-size:.78rem;line-height:1.5;color:var(--muted)}
.howto-tip b{color:var(--ink-2);font-weight:600}

/* stacked modules */
.stack{padding:16px 0 8px}
.module{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:30px;margin-top:20px}
@media(max-width:760px){.module{padding:24px}}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.module h2{font-weight:700;font-size:1.3rem;letter-spacing:-.025em;color:var(--ink)}
.module h2+.m-intro{color:var(--muted);font-size:.92rem;margin-top:6px;line-height:1.5}
.steps{counter-reset:step;display:flex;flex-direction:column;gap:14px;margin-top:18px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps li::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-weight:700;font-size:.78rem;color:var(--accent);background:var(--accent-tint);border:1px solid var(--accent-line);width:30px;height:30px;display:grid;place-items:center;flex:none}
.steps li p{font-size:.92rem;color:var(--ink-2);padding-top:5px}
.steps strong{color:var(--ink);font-weight:600}
.formula{margin-top:20px}
.formula+.formula{margin-top:22px}
.formula .ftag{display:inline-block;font-size:.7rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;background:var(--accent-tint);border:1px solid var(--accent-line);padding:3px 9px}
.formula .fbox{margin-top:10px;background:linear-gradient(180deg,#fafbfe 0%,#eef1f9 100%);color:var(--ink);border:1px solid #cdd6ec;padding:22px 20px;overflow-x:auto;box-shadow:inset 0 1px 2px rgba(31,71,179,.05)}
.formula .fbox .katex{font-size:1.06rem;color:var(--ink)}
.formula .fbox .katex-display{margin:0}
.formula .gloss{font-size:.85rem;line-height:1.5;color:var(--muted);margin-top:10px}
.tbl-wrap{margin-top:20px;overflow-x:auto;border:1px solid var(--line)}
table.ref{width:100%;border-collapse:collapse;font-size:.88rem;min-width:420px}
table.ref th,table.ref td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line-2)}
table.ref thead th{font-size:.69rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700;background:#fbfcfd;border-bottom:1px solid var(--line)}
table.ref td:first-child{font-weight:600;color:var(--ink)}
table.ref td:not(:first-child){font-variant-numeric:tabular-nums;color:var(--ink-2)}
table.ref tr:last-child td{border-bottom:0}
table.ref tr[data-on="true"]{background:var(--accent-tint);box-shadow:inset 3px 0 0 var(--accent)}
table.ref tr[data-on="true"] td:first-child{color:var(--accent)}
.tbl-note{font-size:.76rem;color:var(--faint);margin-top:11px}
.faq details{border-bottom:1px solid var(--line-2);padding:16px 0}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;font-weight:600;font-size:.97rem;color:var(--ink);list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary .pm{color:var(--accent);font-weight:700;font-size:1.15rem;flex:none;transition:transform .2s ease;line-height:1}
.faq details[open] summary .pm{transform:rotate(45deg)}
.faq p{font-size:.9rem;line-height:1.6;color:var(--ink-2);margin-top:11px;max-width:64ch}
/* combined how-to + FAQ module (two columns, one left one right) */
.module.duo{padding:0}
.duo-grid{display:grid;grid-template-columns:1fr 1fr}
.duo-grid.one{grid-template-columns:1fr}
.duo-col{padding:28px 30px}
.duo-grid:not(.one) .duo-col + .duo-col{border-left:1px solid var(--line-2)}
.duo-col h2{font-size:1.12rem}
@media(max-width:760px){.duo-grid{grid-template-columns:1fr}.duo-grid:not(.one) .duo-col + .duo-col{border-left:0;border-top:1px solid var(--line-2)}.duo-col{padding:24px}}
.related{margin-top:20px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:26px 30px}
.related .eyebrow{margin-bottom:14px}
.rel-links{display:flex;flex-wrap:wrap;gap:9px 10px}
.rel-links a{font-size:.86rem;color:var(--ink-2);border:1px solid var(--line);padding:9px 16px;letter-spacing:-.005em;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}
.rel-links a:hover{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent);box-shadow:0 1px 2px rgba(22,24,29,.05)}

/* generic (not-yet-built) tool placeholder */
.calc-generic{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-md);padding:30px}
.calc-generic .cg-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.calc-generic .cg-rows{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media(max-width:560px){.calc-generic .cg-rows{grid-template-columns:1fr}}
.calc-generic .cg-out{margin-top:22px;border-top:1px solid var(--line);padding-top:18px;display:flex;align-items:baseline;gap:14px}
.calc-generic .cg-out b{font-weight:700;font-size:2rem;color:var(--accent);letter-spacing:-.02em}
.calc-generic .cg-note{font-size:.8rem;color:var(--faint);margin-top:14px}

/* ============================ CATEGORY PAGE ============================ */
.list-head{padding:30px 0 6px}
.list-head h1{font-weight:700;font-size:clamp(1.8rem,3.2vw,2.5rem);letter-spacing:-.03em;margin-top:12px}
.list-head .blurb{color:var(--ink-2);font-size:1.02rem;margin-top:12px;max-width:62ch}
.calc-index{margin:26px 0 10px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.calc-index a{display:flex;align-items:center;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line-2);transition:background .14s}
.calc-index a:last-child{border-bottom:0}
.calc-index a:hover{background:var(--accent-tint)}
.calc-index .ci-main{min-width:0}
.calc-index .ci-name{font-weight:600;font-size:1rem;color:var(--ink)}
.calc-index a:hover .ci-name{color:var(--accent)}
.calc-index .ci-desc{font-size:.85rem;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calc-index .ci-go{margin-left:auto;color:var(--faint);font-weight:700;flex:none;transition:color .14s,transform .14s}
.calc-index a:hover .ci-go{color:var(--accent);transform:translateX(2px)}
.cat-grid-2{margin-top:30px}
.other-cats{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px}
.other-cats a{font-size:.85rem;color:var(--ink-2);border:1px solid var(--line);background:var(--card);padding:8px 14px;transition:.15s}
.other-cats a:hover{border-color:var(--accent-line);color:var(--accent);background:var(--accent-tint)}

/* ============================ RANKING PAGE ============================ */
.rank{margin:26px 0 10px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm)}
.rank a{display:flex;align-items:center;gap:18px;padding:15px 20px;border-bottom:1px solid var(--line-2);transition:background .14s}
.rank a:last-child{border-bottom:0}
.rank a:hover{background:var(--accent-tint)}
.rank .rk{font-weight:800;font-size:.95rem;color:var(--accent);width:30px;flex:none;text-align:right}
.rank .rk-main{min-width:0}
.rank .rk-name{font-weight:600;font-size:1rem;color:var(--ink)}
.rank a:hover .rk-name{color:var(--accent)}
.rank .rk-cat{font-size:.8rem;color:var(--muted);margin-top:2px}
.rank .rk-bar{margin-left:auto;flex:none;width:120px;height:8px;background:var(--line-2);position:relative}
.rank .rk-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);opacity:.85}
@media(max-width:620px){.rank .rk-bar{display:none}}

/* ============================ LEGAL / PROSE ============================ */
.legal{max-width:760px;margin:0 auto;padding:38px 0 20px}
.legal h1{font-weight:700;font-size:clamp(1.8rem,3.2vw,2.4rem);letter-spacing:-.03em}
.legal .upd{color:var(--faint);font-size:.82rem;margin-top:10px}
.legal h2{font-weight:700;font-size:1.2rem;letter-spacing:-.02em;margin-top:30px;color:var(--ink)}
.legal p{color:var(--ink-2);font-size:.97rem;line-height:1.65;margin-top:12px}
.legal ul.bul{margin:12px 0 0;padding:0}
.legal ul.bul li{position:relative;padding-left:18px;color:var(--ink-2);font-size:.97rem;line-height:1.6;margin-top:8px}
.legal ul.bul li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;background:var(--accent)}
.legal a.inl{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
@media(max-width:560px){.legal .contact-grid{grid-template-columns:1fr}}
.legal .cbox{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:20px}
.legal .cbox h3{font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
.legal .cbox p{margin-top:8px;font-size:.95rem}

/* ============================ 404 ============================ */
.nf{max-width:620px;margin:0 auto;padding:80px 0;text-align:center}
.nf b{display:block;font-weight:800;font-size:4rem;color:var(--accent);letter-spacing:-.04em}
.nf h1{font-weight:700;font-size:1.6rem;letter-spacing:-.02em;margin-top:8px}
.nf p{color:var(--muted);margin-top:12px}
.nf .btn{margin-top:24px}

/* ============================ FOOTER ============================ */
footer.site{background:var(--card);border-top:1px solid var(--line);margin-top:48px}
.foot{display:grid;grid-template-columns:1.8fr repeat(3,1fr);gap:32px;padding:52px 0 38px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot .about .brand{gap:12px}
.foot .about .brand .mark{width:42px;height:42px;box-shadow:0 1px 2px rgba(22,24,29,.18)}
.foot .about .brand .word{font-size:1.5rem}
.foot .about p{color:var(--muted);font-size:.88rem;line-height:1.55;margin-top:15px;max-width:36ch}
.foot h4{font-size:.71rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:15px}
.foot li{margin-bottom:10px}
.foot a{font-size:.88rem;color:var(--ink-2);transition:color .15s}
.foot a:hover{color:var(--accent)}
.foot-bottom{border-top:1px solid var(--line);padding:18px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}


/* ===================== list / search / ranking polish ===================== */
/* category/search/ranking chips — own classes so the homepage hero .chip is untouched */
.catrow{display:flex;flex-wrap:wrap;gap:8px;}
.catrow.chiprow-cats,.catrow.rank-filter{margin:22px 0 4px;}
.catchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font-size:13.5px;font-weight:600;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);cursor:pointer;
  text-decoration:none;font-family:var(--font);transition:border-color .14s,color .14s,background .14s;}
.catchip:hover{border-color:var(--accent-line);color:var(--accent);}
.catchip.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.catchip .catchip-n{font-size:11.5px;font-weight:700;color:var(--faint);}
.catchip:hover .catchip-n{color:var(--accent);}
.catchip.on .catchip-n{color:rgba(255,255,255,.75);}

.sec-head-filter{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.listfilter{display:inline-flex;align-items:center;gap:8px;padding:0 12px;height:40px;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--faint);min-width:240px;}
.listfilter input{border:0;outline:0;background:transparent;font:inherit;color:var(--ink);width:100%;height:100%;}
.listfilter:focus-within{border-color:var(--accent);color:var(--accent);}
.filter-empty{margin:14px 2px;color:var(--muted);font-size:14px;}

.pop-wrap{margin-top:8px;}
.pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.pop-card{display:flex;flex-direction:column;gap:5px;padding:16px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-sm);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s;}
.pop-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--accent-line);}
.pop-card .pc-rank{font-size:12px;font-weight:700;color:var(--accent);}
.pop-card .pc-name{font-size:15px;font-weight:700;color:var(--ink);line-height:1.25;}
.pop-card .pc-desc{font-size:13px;color:var(--muted);line-height:1.45;}

.calc-index a .ci-cat{flex:0 0 auto;align-self:center;font-size:11.5px;font-weight:600;color:var(--accent);
  background:var(--accent-tint);border:1px solid var(--accent-line);padding:3px 9px;margin-left:auto;white-space:nowrap;}
.calc-index a .ci-cat + .ci-go{margin-left:14px;}
.calc-index a .ci-name mark{background:#fff2b0;color:inherit;padding:0 1px;border-radius:1px;}

.bigsearch-pg{display:flex;align-items:center;gap:10px;margin-top:18px;max-width:620px;padding:0 6px 0 16px;height:54px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-md);color:var(--faint);}
.bigsearch-pg input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);height:100%;}
.bigsearch-pg .btn{height:40px;}
.search-empty{margin:24px 2px;padding:26px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);}
.search-empty .se-title{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 6px;}
.search-empty .se-sub{font-size:14px;color:var(--muted);margin:0;}

.rank a .rk-uses{flex:0 0 auto;align-self:center;font-size:13px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:14px;}
.rank a .rk-uses small{font-weight:500;color:var(--faint);font-size:11px;margin-left:1px;}
.rk-medal{color:#fff !important;}
.rk-1{background:linear-gradient(135deg,#d4a418,#b8860b) !important;}
.rk-2{background:linear-gradient(135deg,#9aa3ad,#727a85) !important;}
.rk-3{background:linear-gradient(135deg,#c08a4a,#9a6a32) !important;}

@media (max-width:680px){
  .pop-grid{grid-template-columns:1fr;}
  .sec-head-filter{align-items:stretch;}
  .listfilter{min-width:0;width:100%;}
  .rank a .rk-uses{display:none;}
}

/* ===================== hero info panel + category tiles ===================== */
.hero-info{margin-top:18px;background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:16px 18px;}
.hero-info .hi-top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.hero-info .hi-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.hero-info .hi-name{font-size:16px;font-weight:700;color:var(--ink);}
.hero-info .hi-what{margin:8px 0 12px;font-size:14px;line-height:1.5;color:var(--muted);}
.hero-info .hi-formula{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line-2);padding-top:12px;}
.hero-info .hi-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);flex:0 0 auto;}
.hero-info .hi-formula code{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:13px;color:var(--ink-2);
  background:var(--accent-tint);border:1px solid var(--accent-line);padding:4px 9px;overflow:auto;white-space:nowrap;}

/* category tiles (no descriptions) */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:6px;}
.tile{display:flex;align-items:center;gap:10px;padding:14px 15px;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-sm);text-decoration:none;transition:transform .14s,box-shadow .14s,border-color .14s;}
.tile:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--accent-line);}
.tile .t-name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.tile .t-go{margin-left:auto;color:var(--faint);font-weight:700;transition:color .14s,transform .14s;}
.tile:hover .t-go{color:var(--accent);transform:translateX(2px);}
.tile-pop{border-left:3px solid var(--accent);}
.tile-pop .t-name::after{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);margin-left:7px;vertical-align:middle;}

/* standalone module heading (no eyebrow above) */
.m-h2{margin:0 0 14px;}
.duo-col .m-h2{margin:0 0 12px;}

@media (max-width:560px){ .tile-grid{grid-template-columns:1fr 1fr;} }

/* hero formula legend (what each symbol means) */
.hero-info .hi-legend{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted);}

/* "How it's calculated" — formula + legend on calculator pages */
.formula-box{background:var(--card);border:1px solid var(--line);box-shadow:var(--sh-sm);padding:18px 20px;}
.formula-box .formula-eq{display:block;font-family:ui-monospace,"Cascadia Code",Consolas,monospace;font-size:16px;
  font-weight:600;color:var(--ink);line-height:1.5;letter-spacing:.01em;word-break:break-word;}
.formula-box .formula-leg{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line-2);
  font-size:13px;line-height:1.6;color:var(--muted);}