/* First-Time Buyer Roadmap page (extends site.css) */
.rm-hero{padding:64px 0 76px}
.rm-hero .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.rm-hero h1{font-size:clamp(36px,4.4vw,60px);max-width:13.5em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.byline{font-size:13.5px;color:rgba(255,255,255,.7);margin:0}
.byline .reviewed{color:var(--powder-300);font-weight:600}
.rm-card{background:rgba(255,255,255,.97);color:var(--ink);border-radius:var(--r-lg);padding:26px 26px 20px;box-shadow:var(--shadow-lg)}
.rm-card-top{display:flex;align-items:center;gap:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.rm-card-top b{display:block;font-family:var(--serif);font-weight:500;font-size:22px;color:var(--navy-800)}
.rm-sum{font-size:13.5px;color:var(--muted)}
.rm-mini{list-style:none;margin:12px 0 10px;padding:0;columns:1}
.rm-mini li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#33445c;padding:4px 0}
.rm-mini .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--powder-400);flex-shrink:0;transition:background .3s,border-color .3s}
.rm-mini li.part .dot{background:linear-gradient(90deg,var(--powder-400) 50%,transparent 50%)}
.rm-mini li.done .dot{background:var(--navy-800);border-color:var(--navy-800)}
.rm-mini li.done{color:var(--navy-800);font-weight:600}
.rm-note{font-size:12px;color:var(--muted);margin:6px 0 0}

/* progress ring */
.ring{position:relative;display:inline-grid;place-items:center;width:var(--size);height:var(--size);flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:3.4}
.ring .trk{stroke:var(--powder-200)}
.ring .bar{stroke:var(--navy-800);stroke-linecap:round;transition:stroke-dasharray .6s var(--ease)}
.ring .pct{position:absolute;font-weight:800;color:var(--navy-800);font-size:calc(var(--size) * .24)}
.ring-lg .pct{font-family:var(--serif);font-weight:500;font-size:28px}

/* sticky stage navigator */
.stage-nav{position:sticky;top:78px;z-index:40;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.stage-nav .wrap{display:flex;align-items:center;gap:16px;height:64px}
.chips-nav{display:flex;gap:8px;list-style:none;margin:0;padding:4px 2px;overflow-x:auto;scrollbar-width:none;flex:1;scroll-snap-type:x proximity}
.chips-nav::-webkit-scrollbar{display:none}
.chips-nav li{flex-shrink:0;scroll-snap-align:start}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--navy-800);text-decoration:none;border:1px solid var(--line);background:#fff;padding:6px 12px 6px 6px;border-radius:999px;white-space:nowrap;transition:background .2s,border-color .2s,color .2s}
.chip .cn{width:22px;height:22px;border-radius:50%;background:var(--powder-100);display:grid;place-items:center;font-size:11.5px;font-weight:800}
.chip:hover{border-color:var(--powder-400);background:var(--powder-100)}
.chip.part .cn{background:var(--powder-400)}
.chip.done{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.chip.done .cn{background:var(--powder-400);color:var(--navy-800)}
.chip.active{box-shadow:0 0 0 2px var(--powder-400)}

/* roadmap */
.rm-section{padding-top:80px}
.rm-head{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:30px}
.rm-tools{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.tool{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:13.5px;font-weight:700;color:var(--navy-800);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none;transition:background .2s,border-color .2s}
.tool svg{width:16px;height:16px}
.tool:hover{background:var(--powder-100);border-color:var(--powder-400)}
.tool-reset{color:#8a2d2d}
.tool-reset.confirm{background:#8a2d2d;color:#fff;border-color:#8a2d2d}
.stages{display:flex;flex-direction:column;gap:14px;counter-reset:st}
.stage{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;scroll-margin-top:160px;transition:box-shadow .35s var(--ease),border-color .35s}
.stage:hover{box-shadow:var(--shadow-md)}
.stage.open{border-color:var(--powder-400);box-shadow:var(--shadow-md)}
.stage-h{margin:0}
.stage-toggle{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;padding:20px 24px;background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:inherit;border-radius:var(--r-lg)}
.stage-num{position:relative;width:48px;height:48px;border-radius:14px;background:var(--powder-100);display:grid;place-items:center;font-family:var(--serif);font-size:19px;color:var(--navy-800);transition:background .3s}
.stage-num .ok{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .3s}
.stage-num .ok svg{width:22px;height:22px;color:#fff}
.stage.done .stage-num{background:var(--navy-800)}
.stage.done .stage-num .n{opacity:0}
.stage.done .stage-num .ok{opacity:1}
.stage-title{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.9vw,24px);color:var(--navy-800);line-height:1.2}
.eyebrow-sm{display:block;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.stage-count{font-size:13px;font-weight:800;color:var(--navy-800);background:var(--powder-100);border-radius:999px;padding:5px 11px;white-space:nowrap}
.stage.done .stage-count{background:var(--navy-800);color:#fff}
.chev{width:22px;height:22px;color:var(--navy-700);transition:transform .35s var(--ease)}
.stage-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.stage-panel{padding:4px 24px 26px;animation:panelIn .45s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.stage-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;padding-top:6px;border-top:1px solid var(--line)}
.stage-explain{padding-top:16px}
.stage-explain p{margin:0 0 14px;color:#2c3c52;font-size:16px;line-height:1.65}
.stage-links{display:flex;flex-wrap:wrap;gap:14px}
.tasks{border:0;margin:16px 0 0;padding:20px 20px 12px;background:var(--powder-100);border-radius:var(--r-md);min-width:0}
.tasks legend{float:left;width:100%;font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-600);margin-bottom:10px;padding:0}
.tasks ul{list-style:none;margin:0;padding:0;clear:both}
.task{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;cursor:pointer;border-top:1px solid rgba(19,43,82,.08);font-size:15px;line-height:1.45;color:#22324a}
.tasks li:first-child .task{border-top:0}
.task input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.task .box{flex:0 0 22px;height:22px;border-radius:7px;border:2px solid var(--navy-700);background:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s;margin-top:1px}
.task .box svg{width:14px;height:14px;color:#fff;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s var(--ease)}
.task input:checked + .box{background:var(--navy-800);border-color:var(--navy-800)}
.task input:checked + .box svg{opacity:1;transform:none}
.task input:checked ~ .txt{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(81,98,122,.5)}
.task input:focus-visible + .box{outline:3px solid var(--powder-500);outline-offset:2px}
.task:hover .box{transform:scale(1.06)}
.mt-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.mt{border-radius:var(--r-md);padding:18px 20px;border:1px solid var(--line)}
.mt h4{margin:0 0 10px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.mt ul{margin:0;padding-left:18px}
.mt li{font-size:14.5px;line-height:1.5;color:#33445c;margin-bottom:7px}
.mistakes{background:#fff8f6;border-color:#f3dcd6}.mistakes h4{color:#8a2d2d}
.tips{background:#f4fbf7;border-color:#d4eadc}.tips h4{color:#1f6b45}

/* example */
.ex-section{background:linear-gradient(180deg,var(--powder-100),#fff)}
.ex-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;margin-top:34px;align-items:start}
.ex-persona{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;position:relative}
.tag-hyp{position:absolute;top:18px;right:18px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:#fff4dc;color:#7a5200;border:1px solid #f1dca8;padding:4px 9px;border-radius:999px}
.ex-persona h3{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--navy-800);margin:0 0 16px}
.ex-persona dl{margin:0}
.ex-persona dl div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid var(--line);font-size:14.5px}
.ex-persona dt{color:var(--muted)}
.ex-persona dd{margin:0;text-align:right;font-weight:700;color:var(--navy-800)}
.ex-persona dd small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.calc{margin:16px 0 0;background:var(--powder-100);border-radius:var(--r-sm);padding:14px 16px;font-size:14px;color:#22324a}
.ex-table{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:8px 8px 22px;box-shadow:var(--shadow-md)}
.tbl-scroll{overflow-x:auto}
.ex-table table{width:100%;border-collapse:collapse;font-size:14.5px}
.ex-table th,.ex-table td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);vertical-align:top}
.ex-table thead th{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:800}
.ex-table thead th:nth-child(2){color:#8a2d2d}.ex-table thead th:nth-child(3){color:#1f6b45}
.ex-table th[scope=row]{text-align:left;font-weight:600;color:#22324a}
.ex-table th small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.ex-table td{font-variant-numeric:tabular-nums;font-weight:600;color:var(--navy-800);white-space:nowrap}
.ex-table tr.total th,.ex-table tr.total td{font-size:17px;font-weight:800;background:var(--powder-100);border-bottom:0}
.ex-table tr.total td:nth-child(2){color:#8a2d2d}.ex-table tr.total td:nth-child(3){color:#1f6b45}
.ex-table tr.pct th,.ex-table tr.pct td{font-size:13.5px;color:var(--muted)}
.gap{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 14px 0}
.gap div{background:var(--navy-800);color:#fff;border-radius:var(--r-md);padding:16px 18px}
.gap b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.1}
.gap span{font-size:13px;color:var(--powder-300)}
.ex-table .fine{margin:16px 14px 0}
.takeaway{margin-top:26px;border-left:4px solid var(--powder-400);padding:6px 0 6px 22px;max-width:52em}
.takeaway h3{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--navy-800);margin:0 0 6px}
.takeaway p{margin:0;color:#33445c}

/* taxes */
.tax-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;margin-top:30px;align-items:start}
.tax-copy h3{font-family:var(--serif);font-weight:500;font-size:22px;color:var(--navy-800);margin:26px 0 8px}
.tax-copy h3:first-child{margin-top:0}
.tax-copy p{color:#2c3c52;margin:0 0 12px}
.deadlines{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 10px}
.dl{border:1px solid var(--line);border-radius:var(--r-md);padding:18px;background:#fff}
.dl .when{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--navy-800);color:#fff;padding:4px 9px;border-radius:999px;margin-bottom:10px}
.dl b{display:block;color:var(--navy-800);margin-bottom:6px;line-height:1.3}
.dl p{font-size:14px;color:var(--muted);margin:0}
.estimator{position:sticky;top:160px;background:var(--navy-800);color:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-lg)}
.estimator h3{font-family:var(--serif);font-weight:500;font-size:24px;margin:0 0 4px}
.est-sub{color:var(--powder-300);font-size:14px;margin:0 0 18px}
.est-form{display:flex;flex-direction:column}
.est-form label{font-size:13px;font-weight:700;margin:12px 0 6px;color:#fff}
.est-form small{font-size:12px;color:rgba(255,255,255,.62);margin-top:6px;line-height:1.4}
.inp{display:flex;align-items:center;background:#fff;border-radius:12px;padding:0 14px;color:var(--navy-800);font-weight:700;border:2px solid transparent;transition:border-color .2s}
.inp:focus-within{border-color:var(--powder-400)}
.inp input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:17px;padding:12px 8px;color:var(--navy-800)}
.inp span{color:var(--muted);font-size:14px}
.est-form .chk{display:flex;align-items:center;gap:10px;margin-top:16px;font-weight:600;cursor:pointer}
.est-form .chk input{width:18px;height:18px;accent-color:var(--powder-400)}
.est-out{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0 16px}
.est-out div{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px}
.est-out span{display:block;font-size:12px;color:var(--powder-300)}
.est-out b{font-size:20px;font-variant-numeric:tabular-nums}
.est-out .big{background:var(--powder-400);color:var(--navy-800);border-color:var(--powder-400)}
.est-out .big span{color:var(--navy-700)}
.est-out .big b{font-family:var(--serif);font-size:28px;font-weight:500}
.est-out .diff[hidden]{display:none}
.est-note{font-size:12.5px;color:rgba(255,255,255,.75);margin:0;line-height:1.5}
.est-note a{color:#fff}

/* down payment */
.dp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.dp{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 22px;background:#fff;transition:transform .35s var(--ease),box-shadow .35s}
.dp:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.dp .amt{display:block;font-family:var(--serif);font-size:46px;line-height:1;color:var(--navy-800);margin-bottom:6px}
.dp h3{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-600);margin:0 0 12px}
.dp p{font-size:14.5px;color:#33445c;margin:0;line-height:1.55}
.dp a{color:var(--navy-700);font-weight:600}

/* faq */
.faq-section{background:var(--powder-100)}
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq-wrap > div:first-child{position:sticky;top:170px}
.faqs{display:flex;flex-direction:column;gap:10px}
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);transition:box-shadow .3s}
.faq[open]{box-shadow:var(--shadow-md);border-color:var(--powder-400)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:700;color:var(--navy-800);font-size:16px;border-radius:var(--r-md)}
.faq summary::-webkit-details-marker{display:none}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq-a{padding:0 22px 18px}
.faq-a p{margin:0;color:#33445c;font-size:15.5px;line-height:1.65}

/* sources */
.h3x{font-family:var(--serif);font-weight:500;font-size:28px;color:var(--navy-800);margin:0 0 16px}
.sources{columns:2;column-gap:40px;padding-left:20px;margin:0 0 28px}
.sources li{break-inside:avoid;font-size:14px;margin-bottom:8px;color:var(--muted)}
.sources a{color:var(--navy-700)}
.disclaimer-box{border:1px solid var(--line);border-left:5px solid var(--navy-800);border-radius:var(--r-md);padding:20px 24px;background:#fff}
.disclaimer-box p{margin:0;font-size:13.5px;color:#33445c;line-height:1.6}
.learn-section{padding-bottom:20px}

/* responsive */
@media (max-width:1100px){.dp-grid{grid-template-columns:1fr 1fr}.rm-head{grid-template-columns:1fr}.rm-tools{justify-content:flex-start}}
@media (max-width:960px){
  .rm-hero .wrap,.ex-grid,.tax-grid,.faq-wrap,.stage-grid{grid-template-columns:1fr;gap:28px}
  .stage-nav{top:70px}
  .estimator,.faq-wrap > div:first-child{position:static}
  .stage-grid{gap:0}
}
@media (max-width:600px){
  .rm-hero{padding:40px 0 48px}
  .rm-hero h1{font-size:36px}
  .hero-actions .btn{width:100%}
  .rm-card{padding:20px}
  .rm-mini{display:none}
  .stage-nav .wrap{height:58px;gap:10px;padding-right:0}
  .stage-nav .ring-sm{--size:36px!important}
  .rm-tools .tool{padding:8px 12px;font-size:13px}
  .stage-toggle{grid-template-columns:auto 1fr auto;gap:12px;padding:16px}
  .stage-toggle .chev{display:none}
  .stage-num{width:40px;height:40px;border-radius:12px;font-size:16px}
  .stage-panel{padding:2px 16px 18px}
  .stage-count{font-size:12px;padding:4px 9px}
  .tasks{padding:16px 14px 8px}
  .mt-grid,.deadlines,.gap,.dp-grid{grid-template-columns:1fr}
  .ex-persona{padding:22px}
  .ex-table th,.ex-table td{padding:10px 8px;font-size:13.5px}
  .ex-table thead th{font-size:10px;letter-spacing:.06em}
  .estimator{padding:22px}
  .sources{columns:1}
  .cta .h2{font-size:32px}
}

/* print: just the checklist */
@media print{
  .site-header,.stage-nav,.rm-hero .hero-actions,.rm-card,.rm-tools,.ex-section,.tax-section,.dp-section,.faq-section,.learn-section,.cta,.site-footer .foot-grid,.skip,.stage-explain,.mt-grid,.chev,.sources-section .sources{display:none!important}
  body{font-size:11pt}
  .page-hero{background:none!important;color:#000;padding:0 0 10px}
  .page-hero::after{display:none}
  .page-hero h1{color:#132b52;font-size:24pt}
  .page-hero .lede,.crumbs,.eyebrow{display:none}
  .byline{color:#333}
  .rm-section{padding:0}
  .rm-head .lead{display:none}
  .stage{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc;margin-bottom:6px}
  .stage-panel[hidden]{display:block!important}
  .stage-panel{animation:none;padding:0 14px 8px}
  .stage-grid{display:block;border:0}
  .tasks{background:none;padding:0;margin:0}
  .tasks legend{display:none}
  .stage-toggle{padding:8px 14px}
  .reveal{opacity:1!important;transform:none!important}
  .site-footer{background:none;color:#333;padding:10px 0}
  .site-footer *{color:#333!important}
  .legal{padding-top:0}
  .eho svg path,.eho svg rect{stroke:#333;fill:#333}
}
@media (max-width:600px){.tag-hyp{position:static;display:inline-block;margin-bottom:12px}}
.dpa-note{margin-top:22px;background:var(--powder-100);border:1px solid var(--powder-300);border-radius:var(--r-md);padding:18px 22px}
.dpa-note p{margin:0;font-size:15px;color:#33445c;line-height:1.6}
.dpa-note strong{color:var(--navy-800)}
.dpa-note a{color:var(--navy-700);font-weight:700}