/* RLT v13 — page design system for tool/content pages (v12 homepage family).
   Scoped to body:has(.r13-body) / .r13-*; loaded only on non-home routes. Presentation only:
   no display:none on tool elements, no changes to JS-toggled state classes. */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..900&family=Geist+Mono:wght@400;500&display=swap');

:root{--r13-ink:#0b0908;--r13-ink2:#17120f;--r13-paper:#f4efe6;--r13-card:#fffdf8;--r13-line:rgba(21,17,14,.12);--r13-text:#1b1611;--r13-mute:#5f574c;--r13-hot:#d9431e;--r13-hot2:#b8361a;--r13-soft:rgba(217,67,30,.09);--r13-f:'Schibsted Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;--r13-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
html.dark{--r13-paper:#0f0c0a;--r13-card:#17120f;--r13-line:rgba(255,255,255,.1);--r13-text:#efe9dd;--r13-mute:#a69e90;--r13-soft:rgba(217,67,30,.16)}

/* page canvas */
body:has(.r13-body){background:var(--r13-paper)!important;color:var(--r13-text);font-family:var(--r13-f)}
body:has(.r13-body)::before,body:has(.r13-body)::after{display:none!important}
body:has(.r13-body) main.container{max-width:1240px}

/* dark header, same treatment as the v12 home */
body:has(.r13-body) header.glass-card.fixed{background:rgba(11,9,8,.86)!important;backdrop-filter:blur(14px) saturate(1.2);border-color:rgba(255,255,255,.08)!important;box-shadow:none!important}
body:has(.r13-body) header.fixed a,body:has(.r13-body) header.fixed button,body:has(.r13-body) header.fixed .nav-link{color:#e9e2d4!important}
body:has(.r13-body) header.fixed .text-primary{color:#fff!important}
body:has(.r13-body) header.fixed .absolute{background:#17120f!important;border-color:rgba(255,255,255,.1)!important}
body:has(.r13-body) header.fixed .absolute a:hover{background:#241c17!important}
body:has(.r13-body) .mobile-menu{background:#0b0908!important}
body:has(.r13-body) .mobile-menu a{color:#e9e2d4!important}

/* ---------- hero band (full-bleed ink, like the v12 hero) ---------- */
.r13-hero{position:relative;margin:-2rem calc(50% - 50vw) 0;width:100vw;background:radial-gradient(120% 140% at 85% 20%,#2a1810 0%,#120d0a 45%,#0b0908 100%);color:#efe9dd;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.r13-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(217,67,30,.6),transparent)}
.r13-hero-in{max-width:1240px;margin:0 auto;padding:28px 20px 22px}
.r13-crumbs{font:500 12px var(--r13-mono);letter-spacing:.02em;color:#9a9284;display:flex;gap:8px;flex-wrap:wrap}
.r13-crumbs a{color:#c9c0b0;text-decoration:none}.r13-crumbs a:hover{color:#fff}
.r13-hero-grid{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;margin-top:14px}
.r13-h1slot h1{font:800 clamp(30px,7.4vw,58px)/1.02 var(--r13-f)!important;letter-spacing:-.035em;color:#fff!important;margin:0!important;text-wrap:balance}
.r13-hook{font:500 15px var(--r13-mono);color:#ffb39c;margin:12px 0 0}
.r13-disc{display:inline-block;margin:16px 0 0;font:500 13px/1.4 var(--r13-f);color:#fff;background:var(--r13-hot);padding:6px 10px;border-radius:6px}
.r13-disc b{font-weight:700}
.r13-art{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform:perspective(900px) rotateY(-6deg) rotateX(2deg)}
.r13-art img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;display:block}
.r13-rail{list-style:none;margin:20px 0 0;padding:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.r13-rail li{flex:none;font:600 12.5px var(--r13-f);color:#8d8578;padding:6px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.08);white-space:nowrap}
.r13-rail li span{font:500 10.5px var(--r13-mono);margin-right:6px;color:#6f675c}
.r13-rail li.on{color:#fff;background:rgba(217,67,30,.18);border-color:rgba(217,67,30,.55)}
.r13-rail li.on span{color:#ffb39c}
@media (min-width:860px){
 .r13-hero-in{padding:40px 32px 28px}
 .r13-hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px}
 .r13-art{aspect-ratio:4/3;max-height:300px;justify-self:end;width:100%}
}
@media (max-width:859px){.r13-art{max-height:190px}}

/* ---------- body: page content on paper ---------- */
.r13-body{padding-top:28px;font-size:16px;line-height:1.55}
body:has(.r13-body) .r13-body .page-view,body:has(.r13-body) .r13-body>.container{padding-left:0;padding-right:0}
body:has(.r13-body) .r13-body h2{font-family:var(--r13-f);letter-spacing:-.02em;color:var(--r13-text)}
body:has(.r13-body) .r13-body h3,body:has(.r13-body) .r13-body h4{font-family:var(--r13-f);letter-spacing:-.01em}
body:has(.r13-body) .r13-body .text-gray-900,body:has(.r13-body) .r13-body .dark\:text-white{color:var(--r13-text)}
body:has(.r13-body) .r13-body .text-gray-800,body:has(.r13-body) .r13-body .text-gray-700{color:color-mix(in srgb,var(--r13-text) 88%,transparent)}
body:has(.r13-body) .r13-body .text-gray-600,body:has(.r13-body) .r13-body .text-gray-500{color:var(--r13-mute)}
html.dark body:has(.r13-body) .r13-body .dark\:text-gray-300,html.dark body:has(.r13-body) .r13-body .dark\:text-gray-200{color:#d9d1c3}
html.dark body:has(.r13-body) .r13-body .dark\:text-gray-400{color:var(--r13-mute)}
/* the page lead paragraph that sat under the moved h1 */
body:has(.r13-body) .r13-body>.page-view>.mb-8:first-child>p.text-lg,body:has(.r13-body) .r13-body>.page-view>.mb-6:first-child>p,body:has(.r13-body) .r13-body>.page-header>.lead{font-size:17px;color:var(--r13-mute);max-width:72ch}

/* cards / panels */
body:has(.r13-body) .r13-body .glass-card,body:has(.r13-body) .r13-body .card,body:has(.r13-body) .r13-body .bento-card{background:var(--r13-card)!important;border:1px solid var(--r13-line)!important;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -28px rgba(30,20,10,.35)!important;border-radius:18px!important;backdrop-filter:none!important}
html.dark body:has(.r13-body) .r13-body .glass-card,html.dark body:has(.r13-body) .r13-body .card{box-shadow:0 18px 40px -28px rgba(0,0,0,.8)!important}
body:has(.r13-body) .r13-body .card-header{background:transparent!important;border-bottom:1px solid var(--r13-line)!important;padding:16px 20px}
body:has(.r13-body) .r13-body .card-header h2,body:has(.r13-body) .r13-body .card-header h3{font-size:18px;font-weight:750}
body:has(.r13-body) .r13-body .card-body{padding:18px 20px}
body:has(.r13-body) .r13-body .bg-white,body:has(.r13-body) .r13-body .bg-gray-50{background:color-mix(in srgb,var(--r13-card) 70%,var(--r13-paper))!important}
html.dark body:has(.r13-body) .r13-body .dark\:bg-gray-800,html.dark body:has(.r13-body) .r13-body .dark\:bg-gray-900{background:#1f1813!important}
/* tinted info boxes keep their meaning but lose the candy look */
body:has(.r13-body) .r13-body .bg-blue-50{background:rgba(70,110,160,.08)!important}
body:has(.r13-body) .r13-body .bg-green-50{background:rgba(60,130,90,.08)!important}
body:has(.r13-body) .r13-body .bg-yellow-50,body:has(.r13-body) .r13-body .bg-amber-50{background:rgba(190,140,30,.1)!important}
body:has(.r13-body) .r13-body .bg-red-50{background:rgba(190,50,30,.08)!important}
body:has(.r13-body) .r13-body .border-blue-200,body:has(.r13-body) .r13-body .border-green-200,body:has(.r13-body) .r13-body .border-yellow-200,body:has(.r13-body) .r13-body .border-gray-200{border-color:var(--r13-line)!important}

/* section labels */
body:has(.r13-body) .r13-body h2.text-xl,body:has(.r13-body) .r13-body h2.text-2xl,body:has(.r13-body) .r13-body .glass-card>h2{font-weight:750}

/* ---------- forms: readable, touch-sized ---------- */
body:has(.r13-body) .r13-body label{color:color-mix(in srgb,var(--r13-text) 85%,transparent)}
body:has(.r13-body) .r13-body .input-field,body:has(.r13-body) .r13-body select,body:has(.r13-body) .r13-body input[type=text],body:has(.r13-body) .r13-body input[type=number],body:has(.r13-body) .r13-body input[type=email],body:has(.r13-body) .r13-body input[type=date],body:has(.r13-body) .r13-body textarea{font:500 16px/1.3 var(--r13-f)!important;min-height:46px;padding:10px 12px;border-radius:12px!important;border:1px solid color-mix(in srgb,var(--r13-text) 22%,transparent)!important;background:var(--r13-card)!important;color:var(--r13-text)!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s}
body:has(.r13-body) .r13-body textarea{min-height:90px}
body:has(.r13-body) .r13-body .input-field:focus,body:has(.r13-body) .r13-body select:focus,body:has(.r13-body) .r13-body input:focus,body:has(.r13-body) .r13-body textarea:focus{outline:none!important;border-color:var(--r13-hot)!important;box-shadow:0 0 0 3px rgba(217,67,30,.18)!important}
body:has(.r13-body) .r13-body input[type=range]{accent-color:var(--r13-hot);min-height:28px}
body:has(.r13-body) .r13-body input[type=checkbox],body:has(.r13-body) .r13-body input[type=radio]{accent-color:var(--r13-hot);width:18px;height:18px}
body:has(.r13-body) .r13-body input[type=number]{font-family:var(--r13-mono)!important}

/* buttons */
body:has(.r13-body) .r13-body .btn{font:650 15px var(--r13-f)!important;min-height:46px;border-radius:12px!important;padding:10px 18px;letter-spacing:0;transition:transform .12s,background .15s,box-shadow .15s}
body:has(.r13-body) .r13-body .btn-primary,body:has(.r13-body) .r13-body button[type=submit]:not(.tab-btn):not(.calculator-tab){background:var(--r13-hot)!important;border-color:var(--r13-hot)!important;color:#fff!important;box-shadow:0 10px 24px -12px rgba(217,67,30,.8)!important}
body:has(.r13-body) .r13-body .btn-primary:hover,body:has(.r13-body) .r13-body button[type=submit]:not(.tab-btn):not(.calculator-tab):hover{background:var(--r13-hot2)!important;transform:translateY(-1px)}
body:has(.r13-body) .r13-body .btn-secondary,body:has(.r13-body) .r13-body .btn-outline{background:transparent!important;border:1px solid color-mix(in srgb,var(--r13-text) 25%,transparent)!important;color:var(--r13-text)!important}
body:has(.r13-body) .r13-body .btn:focus-visible,body:has(.r13-body) .r13-body button:focus-visible,body:has(.r13-body) .r13-body a:focus-visible{outline:2px solid var(--r13-hot);outline-offset:2px}

/* tabs (tab-btn / calculator-tab / rlt-tab-btn) as a segmented control */
body:has(.r13-body) .r13-body button.tab-btn,body:has(.r13-body) .r13-body button.calculator-tab,body:has(.r13-body) .r13-body button.rlt-tab-btn{font:600 14.5px var(--r13-f)!important;min-height:42px;border-radius:99px!important;border:1px solid var(--r13-line)!important;background:var(--r13-card)!important;color:var(--r13-text)!important;padding:8px 14px!important;box-shadow:none!important}
body:has(.r13-body) .r13-body button.tab-btn.active,body:has(.r13-body) .r13-body button.calculator-tab.active,body:has(.r13-body) .r13-body button.rlt-tab-btn.active{background:var(--r13-ink)!important;color:#fff!important;border-color:var(--r13-ink)!important}
html.dark body:has(.r13-body) .r13-body button.tab-btn.active,html.dark body:has(.r13-body) .r13-body button.calculator-tab.active,html.dark body:has(.r13-body) .r13-body button.rlt-tab-btn.active{background:var(--r13-hot)!important;border-color:var(--r13-hot)!important}

/* results */
body:has(.r13-body) .r13-body .result-item{border-radius:14px;border:1px solid var(--r13-line);background:color-mix(in srgb,var(--r13-card) 60%,var(--r13-paper))}
body:has(.r13-body) .r13-body .result-value{font-family:var(--r13-mono)!important;font-weight:500;letter-spacing:-.02em;color:var(--r13-text)}
body:has(.r13-body) .r13-body .result-label{font:500 12px var(--r13-mono);text-transform:none;letter-spacing:.01em;color:var(--r13-mute)}
body:has(.r13-body) .r13-body .font-mono{font-family:var(--r13-mono)!important}

/* tables */
.r13-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
body:has(.r13-body) .r13-body table{border-collapse:collapse;font-size:14.5px}
body:has(.r13-body) .r13-body thead,body:has(.r13-body) .r13-body thead tr{background:transparent!important}
body:has(.r13-body) .r13-body th{font:600 12px var(--r13-mono);letter-spacing:.02em;text-align:left;color:var(--r13-mute);background:transparent!important;border-bottom:1px solid color-mix(in srgb,var(--r13-text) 25%,transparent)!important;padding:10px 12px}
body:has(.r13-body) .r13-body td{border-bottom:1px solid var(--r13-line)!important;padding:10px 12px;vertical-align:top}
body:has(.r13-body) .r13-body tr:hover td{background:var(--r13-soft)}

/* links + accent utilities */
body:has(.r13-body) .r13-body a:not(.btn){color:var(--r13-hot2);text-underline-offset:3px}
html.dark body:has(.r13-body) .r13-body a:not(.btn){color:#ff9a7d}
body:has(.r13-body) .r13-body .text-blue-600,body:has(.r13-body) .r13-body .text-primary{color:var(--r13-hot2)!important}
html.dark body:has(.r13-body) .r13-body .dark\:text-blue-400{color:#ff9a7d!important}
body:has(.r13-body) .r13-body .rlt-mini{color:var(--r13-mute)}
body:has(.r13-body) .r13-body .page-header{margin-bottom:18px}
body:has(.r13-body) .r13-body .page-header .lead{font-size:17px}

/* charts sit on cards */
body:has(.r13-body) .r13-body canvas{max-width:100%}

/* prev/next */
.r13-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:36px 0 8px}
.r13-pn a{display:block;padding:16px 18px;border-radius:16px;background:var(--r13-ink);color:#efe9dd!important;text-decoration:none;border:1px solid rgba(255,255,255,.06);transition:transform .15s,border-color .15s}
.r13-pn a:hover{transform:translateY(-2px);border-color:rgba(217,67,30,.6)}
.r13-pn .next{text-align:right;grid-column:2}
.r13-pn small{display:block;font:500 11.5px var(--r13-mono);color:#ffb39c}
.r13-pn b{font:700 16px/1.25 var(--r13-f)}

/* footer */
body:has(.r13-body) footer.glass-card{background:#0b0908!important;color:#9a9284;border-color:rgba(255,255,255,.06)!important}
body:has(.r13-body) footer.glass-card a,body:has(.r13-body) footer.glass-card p,body:has(.r13-body) footer.glass-card span{color:#cfc7b8!important}
body:has(.r13-body) .r13-body footer.footer{background:transparent!important;color:var(--r13-mute)!important;border-top:1px solid var(--r13-line)}
body:has(.r13-body) .r13-body footer.footer *{color:var(--r13-mute)!important}

/* mobile-first adjustments */
@media (max-width:640px){
 body:has(.r13-body) main.container{padding-left:14px!important;padding-right:14px!important}
 body:has(.r13-body) .r13-body .glass-card.p-8,body:has(.r13-body) .r13-body .glass-card.p-6{padding:18px!important}
 body:has(.r13-body) .r13-body .text-4xl{font-size:28px}
 .r13-pn b{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.r13-art{transform:none}.r13-pn a,body:has(.r13-body) .r13-body .btn{transition:none}}

/* ---------- page-specific skins (self-styled legacy pages) ---------- */
/* response tool: drop the purple gradient app frame, keep its components */
body:has(.r13-body) .r13-body .response-tool-page{background:transparent!important;font-family:var(--r13-f)!important;min-height:0!important;color:var(--r13-text)}
body:has(.r13-body) .r13-body .response-tool-page>.container,body:has(.r13-body) .r13-body .adt-page>.container{padding:0!important;max-width:none!important;background:transparent!important}
body:has(.r13-body) .r13-body .response-tool-page .header,body:has(.r13-body) .r13-body .adt-page .header{background:var(--r13-ink)!important;color:#efe9dd!important;border-radius:16px!important;box-shadow:none!important;border:1px solid rgba(255,255,255,.06);padding:14px 18px!important;margin-bottom:18px}
body:has(.r13-body) .r13-body .response-tool-page .header *,body:has(.r13-body) .r13-body .adt-page .header *{color:#efe9dd!important}
body:has(.r13-body) .r13-body .response-tool-page .header .subtitle,body:has(.r13-body) .r13-body .adt-page .header .subtitle{color:#ffb39c!important;font-family:var(--r13-mono)!important;font-size:14px!important;opacity:1!important}
body:has(.r13-body) .r13-body .adt-page .header .badge{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:#efe9dd!important}
body:has(.r13-body) .r13-body .response-tool-page .info-box,body:has(.r13-body) .r13-body .response-tool-page .version{background:rgba(255,255,255,.08)!important;color:#efe9dd!important}
body:has(.r13-body) .r13-body .adt-page,body:has(.r13-body) .r13-body .response-tool-page{background:transparent!important}
body:has(.r13-body) .r13-body .adt-page .calculate-btn,body:has(.r13-body) .r13-body .response-tool-page .calculate-btn,body:has(.r13-body) .r13-body .pc-calculate-btn{background:var(--r13-hot)!important;color:#fff!important;border:0!important;border-radius:12px!important;min-height:46px;font:650 15px var(--r13-f)!important}
body:has(.r13-body) .r13-body .adt-page .card,body:has(.r13-body) .r13-body .response-tool-page .card,body:has(.r13-body) .r13-body .response-tool-page .panel,body:has(.r13-body) .r13-body .adt-page .panel{background:var(--r13-card)!important;border:1px solid var(--r13-line)!important;border-radius:18px!important;box-shadow:0 18px 40px -28px rgba(30,20,10,.35)!important}
/* references: chrome accent only (category colours unchanged) */
body:has(.r13-body) .r13-body .monogram{font-family:var(--r13-mono)!important}
/* ADT + response tool ship light-only component styles: keep them on light surfaces even in dark mode */
html.dark body:has(.r13-body) .r13-body .adt-page,html.dark body:has(.r13-body) .r13-body .response-tool-page{--r13-card:#fffdf8;--r13-text:#1b1611;--r13-mute:#5f574c;--r13-line:rgba(21,17,14,.12);--r13-soft:rgba(217,67,30,.09);color:#1b1611}
/* mobile overflow fixes for legacy grids (grid items default to min-width:auto) */
body:has(.r13-body) .r13-body :is(.main-grid,.grid-2-cols,.grid,.content-grid)>*{min-width:0}
body:has(.r13-body) .r13-body :is(.adt-page,.response-tool-page) :is(.card,.left-panel,.right-panel){max-width:100%}
@media (max-width:640px){body:has(.r13-body) .r13-body .grid-2-cols{grid-template-columns:minmax(0,1fr)!important}body:has(.r13-body) .r13-body pre,body:has(.r13-body) .r13-body code{white-space:pre-wrap;word-break:break-word}}
@media (max-width:640px){body:has(.r13-body) .r13-body :is(.tabs,.tab-buttons,.calculator-tabs,.tab-nav,.nav-tabs){flex-wrap:wrap!important;max-width:100%}}
/* hero starts exactly under the fixed header at every width (mobile-fixes.css shrinks main padding to 10px) */
body:has(.r13-body) main.container{padding-top:var(--header-height,70px)!important}
body:has(.r13-body) .r13-hero{margin-top:0}

/* Marcus QA gate patch: prevent full-bleed hero/step rail from creating document-level horizontal scrollbars. */
html:has(.r13-body), body:has(.r13-body){overflow-x:clip;}