/* Free tools and guides (/tools/, /guides/). Loaded after primr.css on those pages only. */
.res-hero{padding:64px 24px 44px}
.res-hero h1.hero-h{font-size:clamp(36px,5.4vw,60px);max-width:20ch;margin-left:auto;margin-right:auto}
.res-hero .sub{max-width:60ch}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--mute);margin:28px 0 0}
.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{opacity:.6}

/* hubs */
.res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.res-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;transition:border-color .15s,transform .15s}
a.res-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.res-card .res-cat{font-size:12px;font-weight:700;color:var(--acc)}
.res-card h3{font-weight:500;font-size:19px;letter-spacing:-.02em}
.res-card p{margin:0;color:var(--ink2);font-size:14.5px;flex:1}
.res-card .go{font-size:13px;color:var(--mute);font-weight:600}
.res-card.locked{background:transparent;border-style:dashed}
.res-group{margin-top:40px}
.res-group>h2{font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--mute);margin:0 0 14px;text-transform:uppercase}

/* guide article */
.article{max-width:720px;margin:0 auto}
.article .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--mute);margin:18px 0 0}
.article h1{font-weight:500;font-size:clamp(32px,4.6vw,48px);line-height:1.08;letter-spacing:-.04em;margin-top:10px}
.article .lede{font-size:18px;color:var(--ink2);margin:16px 0 0}
.prose{margin-top:34px;font-size:16.5px;line-height:1.7;color:var(--ink2)}
.prose h2{color:var(--ink);font-weight:500;font-size:24px;letter-spacing:-.03em;margin:40px 0 12px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin:0 0 10px;padding-left:4px}
.prose b{color:var(--ink);font-weight:700}
.prose a{color:var(--acc2);text-underline-offset:3px}
.cta-box{margin-top:44px;border:1px solid var(--line2);border-radius:18px;padding:26px;background:linear-gradient(180deg,#10152A,rgba(10,13,22,.6))}
.cta-box h2{font-weight:500;font-size:22px;letter-spacing:-.03em}
.cta-box p{color:var(--ink2);margin:10px 0 18px}
.cta-box .ctas{justify-content:flex-start;margin:0}
.related{margin-top:40px}
.related h2{font-family:var(--body);font-size:13px;font-weight:700;color:var(--mute);margin:0 0 12px;letter-spacing:0}
.related .res-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* tools */
.tool-wrap{margin-top:8px}
.tool-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.tool-head h1{font-weight:500;font-size:clamp(32px,4.6vw,48px);letter-spacing:-.04em;line-height:1.08}
.tool-head p{color:var(--ink2);margin:10px 0 0;max-width:62ch}
.tool-head .spacer{flex:1}
.linkish{background:none;border:0;padding:0;color:var(--mute);font-size:13.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--ink)}
.tool-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.panel h3{font-weight:500;font-size:18px;letter-spacing:-.02em;margin:0 0 12px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.tool label,.tool .flabel{display:block;font-size:13px;font-weight:600;color:var(--ink2);margin:0 0 6px}
.tool .full-row{margin-top:14px}
.tool .opt{color:var(--mute);font-weight:500}
.tool input:not([type=range]):not([type=checkbox]),.tool select,.tool textarea{width:100%;background:#0B0F1A;border:1px solid var(--line2);border-radius:8px;padding:10px 12px;font-size:15px}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:none;border-color:var(--acc)}
.tool textarea{resize:vertical;line-height:1.5}
.tool input[type=range]{width:100%;accent-color:var(--acc)}
.tool .offer-name{font-family:var(--display);font-size:17px!important;font-weight:600;margin-bottom:14px;background:transparent!important;border-color:transparent!important;padding:4px 0!important}
.tool .offer-name:hover,.tool .offer-name:focus{border-bottom-color:var(--line2)!important}
.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chipset label{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:13px;margin:0;cursor:pointer;color:var(--ink2)}
.chipset label:has(input:checked){border-color:var(--acc);background:#10152A;color:var(--ink)}
.chipset input{accent-color:var(--acc);margin:0}
.out textarea{min-height:200px;font-size:14.5px;background:#090C15!important}
.out-row{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:13px;color:var(--mute)}
.out-row .spacer{flex:1}
.tool-preview h3{margin-top:0}
.tool-preview h3+.out{margin-bottom:18px}
.hint{font-size:13px;color:var(--mute);margin:12px 0 0}
.verdict{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:var(--ok-bg);color:var(--ok);font-weight:600}
.verdict:empty{display:none}
.rtable{width:100%;border-collapse:collapse;margin-top:16px;font-size:14.5px}
.rtable th,.rtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.rtable th{font-size:12.5px;color:var(--mute);font-weight:700}
.rtable .r{text-align:right;font-variant-numeric:tabular-nums}
.rtable tr.strong td{color:var(--ink);font-weight:700}
.rtable td{color:var(--ink2)}
.big-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.big-nums div{border:1px solid var(--line);border-radius:12px;padding:12px}
.big-nums small{display:block;font-size:12px;color:var(--mute)}
.big-nums b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.funnel{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.funnel div{display:grid;grid-template-columns:1fr auto;gap:2px 12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.funnel span{color:var(--ink2);font-size:14px}
.funnel b{font-family:var(--display);font-size:18px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.funnel small{grid-column:1/-1;color:var(--mute);font-size:12.5px}
.seg2{display:inline-flex;border:1px solid var(--line2);border-radius:10px;padding:3px;gap:3px;margin-bottom:10px}
.seg2 button{background:none;border:0;border-radius:7px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--mute)}
.seg2 button[aria-pressed=true]{background:#1A2036;color:var(--ink)}
.private-note{display:flex;gap:8px;align-items:center;margin-top:18px;font-size:13px;color:var(--mute)}
.qbank details{border:1px solid var(--line);border-radius:12px;background:var(--card);margin-bottom:8px}
.qbank summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between}
.qbank summary::-webkit-details-marker{display:none}
.qbank summary::after{content:"+";color:var(--mute)}
.qbank details[open] summary::after{content:"–"}
.qbank ul{margin:0;padding:0 16px 14px 34px;color:var(--ink2)}
.qbank li{margin-bottom:8px}
.objs{display:flex;flex-direction:column;gap:10px}
.objs div{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--card)}
.objs b{display:block;color:var(--ink)}
.objs .why{font-size:13px;color:var(--mute);margin:4px 0 8px}
.objs p{margin:0;color:var(--ink2);font-size:14.5px}
.tool-about{max-width:720px;margin:56px auto 0}
.tool-about h2{font-weight:500;font-size:24px;letter-spacing:-.03em;margin:0 0 12px}
.tool-about p,.tool-about li{color:var(--ink2);font-size:15.5px}
.tool-about ul{padding-left:22px}
.tool-about a{color:var(--acc2)}
@media (max-width:860px){
  .res-grid,.related .res-grid{grid-template-columns:minmax(0,1fr)}
  .tool-split{grid-template-columns:minmax(0,1fr)}
  .big-nums{grid-template-columns:minmax(0,1fr)}
  .res-hero{padding:48px 16px 34px}
}
@media (max-width:520px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.sm-h{font-weight:500;font-size:18px;letter-spacing:-.02em;margin:0 0 12px}
.private-note svg{width:16px;height:16px;flex:none}
.tool-about a.btn,.tool-about a.res-card{color:var(--ink)}
.tool-about .related h2{font-family:var(--body);font-size:13px;font-weight:700;color:var(--mute);letter-spacing:0;margin:0 0 12px}