/* =====================================================================
   /data/ pages: prime rate, mortgage rates and the index.
   Same language as the HELOC state guides (ruled plates, ink rules, one
   reading column). Every rule is scoped to .dp. Site tokens come from site.css.
   ===================================================================== */

.dp{
    --dp-copy:#4A6178;            /* reading text, 6.4:1 on white */
    --dp-s1:#1974B3;              /* chart: prime, 30-year (site accent) */
    --dp-s2:#dd5f22;              /* chart: 15-year (validated pair with s1: CVD dE 21, 3:1 on white) */
    --dp-gap:clamp(36px,5vw,56px);
    color:var(--ink);
}
.dp ::selection{background:#cfe3f4;color:var(--ink-deep)}
.dp a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.dp dd{margin:0}
.dp dd,.dp dt,.dp li,.dp p,.dp figcaption,.dp td,.dp th{text-wrap:pretty}
.dp h1,.dp h2,.dp h3{text-wrap:balance}
.dp-vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================================================================ hero */
.dp-hero{padding:0 0 clamp(8px,2vw,20px)}
.dp-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px}
.dp-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;font-size:.875rem;color:var(--muted)}
.dp-crumbs li{display:inline-flex;align-items:center}
.dp-crumbs li + li::before{content:"/" / "";margin:0 9px;color:var(--faint)}
.dp-crumbs a{color:var(--muted);text-decoration:none;display:inline-block;padding:12px 0}
.dp-crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.dp-crumbs [aria-current]{color:var(--ink);font-weight:600}
.dp-updated{font-size:.875rem;color:var(--muted)}
.dp h1{
    margin-top:6px;max-width:24ch;
    font-size:clamp(1.85rem,4.4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink);
}
.dp-h1__sub{display:block;margin-top:.3em;font-size:.56em;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--ink-soft)}
.dp-lede{margin-top:16px;max-width:60ch;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.66;color:var(--dp-copy)}

@media (min-width:1000px){
    .dp-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,5vw,72px);align-items:end}
    .dp-hero__grid .dp-plate{margin-top:0}
}

/* ------------------------------------------- plate: the ruled number grid */
.dp-plate{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);margin-top:28px}
.dp-plate__cell{display:flex;flex-direction:column;padding:16px 16px 18px 0;border-bottom:1px solid var(--line);min-width:0}
.dp-plate__cell:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
.dp-plate dt{order:2;margin-top:4px;font-size:.9rem;line-height:1.45;color:var(--muted)}
.dp-plate dd{order:1;font-size:clamp(2rem,5vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ink)}
.dp-plate dd.dp-plate__cmp{order:3;margin-top:10px;font-size:.9rem;font-weight:600;letter-spacing:0;line-height:1.45;color:var(--ink-soft)}
.dp-plate dd.dp-plate__cmp + .dp-plate__cmp{margin-top:2px}
@media (max-width:420px){
    .dp-plate__cell{padding:12px 12px 14px 0}
    .dp-plate__cell:nth-child(2n){padding-left:12px}
    .dp-plate dt{font-size:.875rem;line-height:1.38}
    .dp-plate dd{font-size:1.85rem}
    .dp-plate dd.dp-plate__cmp{font-size:.84rem}
}

/* ======================================================= body + aside */
.dp-body{display:grid;padding-bottom:var(--dp-gap)}
@media (min-width:1024px){
    .dp-body{grid-template-columns:minmax(0,720px) minmax(0,260px);column-gap:clamp(48px,6vw,88px);align-items:start}
    .dp-aside{position:sticky;top:96px;padding-top:var(--dp-gap)}
}
.dp-col{min-width:0;max-width:720px}

.dp-aside{min-width:0}
.dp-about{border-top:2px solid var(--ink)}
.dp .dp-about h2{padding:14px 0 4px;font-size:1rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.dp-about dl > div{padding:12px 0;border-bottom:1px solid var(--line)}
.dp-about dt{font-size:.84rem;font-weight:600;color:var(--muted)}
.dp-about dd{margin-top:2px;font-size:.95rem;line-height:1.5;color:var(--ink)}
.dp-about dd a{color:var(--accent);text-underline-offset:3px}
.dp-about p{margin-top:12px;font-size:.84rem;line-height:1.55;color:var(--muted)}
@media (max-width:1023px){.dp-aside{margin-top:var(--dp-gap);order:3}}

/* sections */
.dp-sec{padding-top:var(--dp-gap)}
.dp-sec + .dp-sec{margin-top:var(--dp-gap);border-top:1px solid var(--line)}
.dp .dp-sec h2{max-width:26ch;font-size:clamp(1.5rem,3.1vw,1.95rem);font-weight:800;letter-spacing:-.025em;line-height:1.16;color:var(--ink)}
.dp-sec > p,.dp-chart figcaption p,.dp-faq p{max-width:34em;font-size:1.0625rem;line-height:1.7;color:var(--dp-copy)}
.dp-sec > p{margin-top:16px}
.dp .dp-small{font-size:.92rem;line-height:1.6;color:var(--muted)}
.dp .dp-source{font-size:.875rem;line-height:1.55;color:var(--muted)}
.dp-source a{color:var(--muted);text-underline-offset:3px}
.dp-source a:hover{color:var(--ink)}

.dp-link{display:inline-block;padding:10px 0;line-height:1.5;font-weight:600;color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.dp-link svg{display:inline-block;width:17px;height:17px;margin-left:6px;vertical-align:-3px}
.dp-link:hover{text-decoration-thickness:2px}
.dp-links{list-style:none;display:flex;flex-wrap:wrap;column-gap:28px;margin-top:10px}

/* --------------------------------------------------------------- chart */
.dp-chart{margin:24px 0 0}
.dp-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:10px;font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.dp-legend li{display:inline-flex;align-items:center;gap:8px}
.dp-key{display:inline-block;width:16px;height:2px;border-radius:2px;flex:0 0 auto}
.dp-key--prime,.dp-key--m30{background:var(--dp-s1)}
.dp-key--m15{background:var(--dp-s2)}
.dp-chart__plot{position:relative;border-radius:6px;touch-action:pan-y}
.dp-chart__plot:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.dp-chart__svg{display:block;width:100%;height:auto;overflow:visible}
.dp-chart__svg--wide{display:none}
@media (min-width:600px){
    .dp-chart__svg--narrow{display:none}
    .dp-chart__svg--wide{display:block}
}
.dp-chart text{font-family:inherit}
.dp-grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}
.dp-grid--base{stroke:var(--faint)}
.dp-xtick{stroke:var(--faint);stroke-width:1;shape-rendering:crispEdges}
.dp-tick{fill:var(--muted);font-variant-numeric:tabular-nums}
.dp-val{fill:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.dp-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.dp-line.dp-s--prime,.dp-line.dp-s--m30{stroke:var(--dp-s1)}
.dp-line.dp-s--m15{stroke:var(--dp-s2)}
.dp-area{fill:var(--dp-s1);opacity:.1;stroke:none}
.dp-dot,.dp-hdot{stroke:#fff;stroke-width:2}
.dp-dot.dp-s--prime,.dp-dot.dp-s--m30,.dp-hdot.dp-s--prime,.dp-hdot.dp-s--m30{fill:var(--dp-s1)}
.dp-dot.dp-s--m15,.dp-hdot.dp-s--m15{fill:var(--dp-s2)}
.dp-hover{opacity:0;pointer-events:none}
.dp-hover.is-on{opacity:1}
.dp-cross{stroke:var(--ink-soft);stroke-width:1;shape-rendering:crispEdges}
.dp-hit{fill:transparent}
.dp-tip{
    position:absolute;z-index:2;min-width:150px;pointer-events:none;
    padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;
    box-shadow:0 6px 16px -8px rgba(50,70,95,.22);
}
.dp-tip__d{font-size:.8rem;font-weight:600;color:var(--muted)}
.dp-tip__r{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:.875rem;color:var(--ink-soft);white-space:nowrap}
.dp-tip__r strong{font-size:1rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.dp-chart figcaption{margin-top:16px}
.dp-chart figcaption .dp-source{margin-top:10px}
.dp-hint{margin-top:6px;font-size:.84rem;color:var(--muted)}
@media (hover:none){.dp-hint--hover{display:none}}

.dp-data{margin-top:14px}
.dp-data summary{
    display:inline-flex;align-items:center;min-height:44px;cursor:pointer;
    font-size:.95rem;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;
}
.dp-data summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.dp-data .dp-scroll{max-height:420px;overflow-y:auto;margin-top:8px;border-bottom:1px solid var(--line)}
.dp-data .dp-table{margin-top:0}
.dp-data thead th{position:sticky;top:0;background:#fff}

/* --------------------------------------------------------------- tables */
.dp-tablewrap{margin-top:24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dp-table{width:100%;border-collapse:collapse;font-size:.98rem;font-variant-numeric:tabular-nums;margin-top:24px}
.dp-tablewrap .dp-table{margin-top:0}
.dp-table caption{text-align:left;padding-bottom:10px;font-size:1rem;font-weight:700;color:var(--ink)}
.dp-table th,.dp-table td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);text-align:right;color:var(--ink-soft);white-space:nowrap;vertical-align:baseline}
.dp-table th:last-child,.dp-table td:last-child{padding-right:0}
.dp-table thead th{font-size:.875rem;font-weight:700;color:var(--ink);border-bottom:2px solid var(--ink);line-height:1.35}
.dp-table th:first-child,.dp-table td:first-child{text-align:left}
.dp-table tbody th{font-weight:600;color:var(--ink)}
.dp-table td strong{font-weight:700;color:var(--ink)}
.dp-table .dp-wrap{white-space:normal;text-align:left}
.dp-table tbody tr:first-child th,.dp-table tbody tr:first-child td{color:var(--ink)}
@media (max-width:479px){
    .dp-table{font-size:.875rem}
    .dp-table th,.dp-table td{padding-right:8px}
    .dp-table thead th{font-size:.8125rem}
}

/* ---------------------------------------------------- formula + ledger */
.dp .dp-formula{
    margin-top:26px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;max-width:none;
    padding:16px 0;border-block:1px solid var(--line);
    font-size:1.0625rem;line-height:1.5;color:var(--ink);
}
.dp-formula__grp{white-space:nowrap;display:inline-flex;align-items:baseline;gap:10px}
.dp-formula__term{font-weight:700;color:var(--ink)}
.dp-formula__term--result{color:var(--accent)}
.dp-formula__op{font-size:1.25rem;font-weight:500;color:var(--muted);line-height:1}

.dp-ledger{margin:28px 0 0;border-top:2px solid var(--ink);max-width:560px}
.dp .dp-ledger__cap{padding:12px 0 6px;font-size:1rem;font-weight:700;color:var(--ink)}
.dp-ledger__row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}
.dp-ledger__row dt{font-size:1rem;color:var(--ink-soft);line-height:1.45}
.dp-ledger__row dt span{display:block;font-size:.875rem;color:var(--muted)}
.dp-ledger__row dd{flex:0 0 auto;font-size:1.0625rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.dp-ledger__row--total{border-top:3px double var(--ink);border-bottom:none;margin-top:-1px;padding-top:16px}
.dp-ledger__row--total dt{font-weight:800;color:var(--ink)}
.dp-ledger__row--total dd{font-size:clamp(1.35rem,3vw,1.6rem);font-weight:800;letter-spacing:-.02em}
.dp-ledger + .dp-small{margin-top:12px}

/* ----------------------------------------------------------------- FAQ */
.dp-faq{margin-top:26px;border-top:2px solid var(--ink)}
.dp-faq__item{padding:20px 0 22px;border-bottom:1px solid var(--line)}
.dp-faq__item:last-child{border-bottom:none}
.dp .dp-faq h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink);max-width:48ch}
.dp-faq p{margin-top:6px}

/* ------------------------------------------------------------- sources */
.dp-sources{padding:clamp(36px,5vw,52px) 0 clamp(44px,6vw,64px);max-width:720px}
.dp .dp-sources h2{font-size:1.05rem;font-weight:800;color:var(--ink)}
.dp-sources ul{margin:12px 0 0 18px;display:flex;flex-direction:column;gap:6px}
.dp-sources li{font-size:.875rem;line-height:1.55;color:var(--muted)}
.dp-sources li a{color:var(--muted);text-underline-offset:3px}
.dp-sources p{margin-top:16px;font-size:.875rem;line-height:1.6;color:var(--muted);max-width:60ch}

/* ------------------------------------------------------- /data/ index */
.dp-index{list-style:none;margin-top:clamp(24px,4vw,36px);border-top:2px solid var(--ink);max-width:820px}
.dp-row{
    display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:center;
    padding:20px 0 22px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.dp-row > span{grid-column:1}
.dp-row__name{font-size:clamp(1.3rem,2.6vw,1.6rem);font-weight:800;letter-spacing:-.022em;line-height:1.2;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease)}
.dp-row__line{max-width:56ch;margin-top:6px;font-size:1rem;line-height:1.55;color:var(--dp-copy)}
.dp-row__now{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:.95rem;color:var(--ink-soft)}
.dp-row__now strong{font-size:1.2rem;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin-right:6px}
.dp-row__date{margin-top:6px;font-size:.84rem;color:var(--muted)}
.dp-row svg{grid-column:2;grid-row:1 / span 4;width:20px;height:20px;color:var(--accent)}
.dp-row:hover .dp-row__name{color:var(--accent);text-decoration-color:currentColor}
.dp .dp-row:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.dp-note{margin-top:28px;max-width:60ch;font-size:.95rem;line-height:1.65;color:var(--dp-copy)}

@media (prefers-reduced-motion:reduce){.dp *{transition:none!important}}
@media (forced-colors:active){
    .dp-line{stroke:CanvasText}
    .dp-line.dp-s--m15{stroke:LinkText}
}
.dp-note a{color:var(--accent);text-underline-offset:4px}
.dp .dp-small,.dp .dp-source,.dp-hint,.dp-sources li,.dp-about p{max-width:58ch}

/* =====================================================================
   /data/heloc-approval-rates/ (study page, 2026-10-22). Additive only.
   ===================================================================== */
/* findings: ruled sentences, the lead clause in ink */
.dp-find{list-style:none;margin-top:22px;border-top:2px solid var(--ink);max-width:40em}
.dp-find li{padding:16px 0 17px;border-bottom:1px solid var(--line);font-size:1.0625rem;line-height:1.65;color:var(--dp-copy)}
.dp-find strong{font-weight:700;color:var(--ink)}
.dp-find + .dp-small{margin-top:14px}
.dp .dp-small a{color:var(--accent);text-underline-offset:3px}

/* horizontal bar charts (inline SVG) */
.dp-bars .dp-bar__m{fill:var(--dp-s1)}
.dp-bars .dp-bar__l{fill:var(--ink-soft);font-size:13px}
.dp-bars .dp-val{font-size:13px;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.dp-bars .dp-bar:hover .dp-bar__m{fill:var(--ink)}
.dp-table--states th,.dp-table--states td{padding-top:9px;padding-bottom:9px}
.dp-bars .dp-bar:hover .dp-bar__l{fill:var(--ink);font-weight:600}
.dp-val__bg{fill:#fff}
.dp-ref{stroke:var(--ink);stroke-width:1;shape-rendering:crispEdges}
.dp-ref__l{fill:var(--ink);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
@media (min-width:600px){
    .dp-bars .dp-bar__l,.dp-bars .dp-val{font-size:13px}
}

/* state table: sort links in the headings */
.dp-tablewrap--states{margin-top:28px}
.dp-table--har thead th{white-space:normal;vertical-align:bottom}
.dp-sort{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-decoration-thickness:1px;text-underline-offset:4px}
.dp-sort:hover{text-decoration-color:currentColor}
.dp-sort.is-on{color:var(--accent);text-decoration-color:currentColor}
.dp-sort svg{width:14px;height:14px;flex:0 0 auto}
.dp-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.dp-table--har tbody th a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
.dp-table--har tbody tr.dp-tr--us th,.dp-table--har tbody tr.dp-tr--us td{font-weight:700;color:var(--ink);background:var(--accent-tint)}
.dp-table--har tbody tr.dp-tr--us th{padding-left:8px}
.dp-table--har tr.dp-tr--total th,.dp-table--har tr.dp-tr--total td{border-top:3px double var(--ink);border-bottom:none;font-weight:800;color:var(--ink)}
.dp-table--states tbody tr:not(.dp-tr--us):hover th,.dp-table--states tbody tr:not(.dp-tr--us):hover td{background:#f8fafc}
.dp-tablewrap--har + .dp-small{margin-top:12px}
@media (max-width:479px){
    .dp-table--states th,.dp-table--states td{padding-right:6px}
    .dp-table--states thead th{font-size:.75rem}
    .dp-table--states{font-size:.8125rem}
}

/* methodology */
.dp .dp-h3{margin-top:clamp(28px,4vw,40px);font-size:1.2rem;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.dp-defs{margin-top:12px;border-top:2px solid var(--ink)}
.dp-defs > div{display:grid;gap:2px 24px;padding:12px 0 13px;border-bottom:1px solid var(--line)}
@media (min-width:640px){.dp-defs > div{grid-template-columns:150px minmax(0,1fr)}}
.dp-defs dt{font-size:.95rem;font-weight:700;color:var(--ink)}
.dp-defs dd{font-size:.98rem;line-height:1.6;color:var(--dp-copy)}
.dp-queries{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:14px}
.dp-queries span{display:block;font-size:.92rem;font-weight:600;color:var(--ink-soft)}
.dp-queries code{display:block;margin-top:4px;padding:10px 12px;border-radius:6px;background:#f5f7fa;font:500 .8125rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);overflow-wrap:anywhere}
.dp-bullets{margin:12px 0 0 20px;display:flex;flex-direction:column;gap:8px;max-width:40em}
.dp-bullets li{font-size:1rem;line-height:1.6;color:var(--dp-copy)}
.dp-h3 + .dp-small{margin-top:8px}

/* suggested citation */
.dp .dp-cite{margin-top:18px;max-width:40em;padding:16px 0;border-block:1px solid var(--line);font-size:1rem;line-height:1.65;color:var(--ink);overflow-wrap:anywhere;user-select:all}