/* Rate Monitor by Secure Finance — design system (LoanX family) */
:root{
  --ink-900:#07090F; --ink-850:#0A0E18; --ink-800:#0E1320; --ink-700:#151B2A;
  --line:rgba(255,255,255,0.08); --line-2:rgba(255,255,255,0.045);
  --text-hi:#F2F5FA; --text-mid:#9BA6B8; --text-lo:#7C88A1;
  --brand:#0FD9C0; --accent-rm:#19C8A6; --proof:#F2B544; --accent:#3B6EF6;
  --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink-900);color:var(--text-hi);font-family:var(--body);font-weight:300;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
section{position:relative}
.eyebrow{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-lo)}
.eyebrow.brand{color:var(--accent-rm)}
h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.06;letter-spacing:-0.025em;margin:1.1rem 0 0}
h1 .em{color:var(--text-lo)}
h2{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-0.02em;line-height:1.12}
h3{font-family:var(--display);font-weight:500;font-size:1.08rem;letter-spacing:-0.01em}
h2 + .lede,.lede{color:var(--text-mid);max-width:62ch;margin-top:0.9rem;font-size:clamp(1rem,1.4vw,1.1rem)}
.amber{color:var(--proof)}
.teal{color:var(--accent-rm)}
.mono{font-family:var(--mono)}
p{margin:0}

/* NAV */
nav.top{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);background:rgba(7,9,15,0.74);border-bottom:1px solid var(--line-2)}
.navin{max-width:var(--maxw);margin:0 auto;padding:0.75rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;flex-direction:column;text-decoration:none;line-height:1.15}
.logo .l1{font-family:var(--display);font-weight:600;font-size:1.14rem;letter-spacing:-0.01em;color:var(--text-hi)}
.logo .l1 .dot{color:var(--accent-rm)}
.logo .l2{font-family:var(--mono);font-size:0.56rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-lo)}
.navlinks{display:flex;gap:1.4rem;align-items:center}
.navlinks a{color:var(--text-mid);text-decoration:none;font-size:0.87rem;font-weight:400;transition:color .15s}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--text-hi)}
.navlinks .cta{border:1px solid rgba(25,200,166,0.45);color:var(--accent-rm);padding:0.45rem 0.95rem;border-radius:7px}
.navlinks .cta:hover{background:rgba(25,200,166,0.08);color:var(--accent-rm)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:7px;color:var(--text-hi);padding:0.4rem 0.65rem;font-size:1rem;cursor:pointer}
@media(max-width:960px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--ink-850);border-bottom:1px solid var(--line);padding:1rem clamp(1.25rem,4vw,2.5rem);gap:0.9rem}
  .menu-btn{display:block}
}

/* BUTTONS */
.btn{font-family:var(--body);font-size:0.94rem;font-weight:500;padding:0.78rem 1.3rem;border-radius:8px;border:0;
  text-decoration:none;cursor:pointer;transition:all .15s;display:inline-block}
.btn.primary{background:var(--accent-rm);color:#04221E}
.btn.primary:hover{background:#2DE7D1;transform:translateY(-1px)}
.btn.ghost{border:1px solid var(--line);color:var(--text-hi);background:transparent}
.btn.ghost:hover{border-color:rgba(255,255,255,0.28)}
.btn.big{padding:0.95rem 1.7rem;font-size:1rem}
.ctas{display:flex;gap:0.8rem;margin-top:2rem;flex-wrap:wrap}

/* HERO */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,4vw,3rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:2.5rem}}
.sub{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--text-mid);max-width:50ch;margin-top:1.4rem}
.sub b{color:var(--text-hi);font-weight:500}
.trustline{margin-top:1.5rem;font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em;color:var(--text-lo);line-height:1.7}
.proofrail{display:flex;gap:1.6rem;margin-top:2.3rem;flex-wrap:wrap;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.pf{display:flex;flex-direction:column;gap:3px}
.pf .n{font-family:var(--mono);font-size:1.14rem;font-weight:500;color:var(--proof);line-height:1}
.pf .l{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-lo);line-height:1.5}

/* SECTIONS */
.band{padding:clamp(3rem,7vw,5.5rem) 0;border-top:1px solid var(--line-2)}
.sec-head{max-width:64ch}
.sec-head.center{margin:0 auto;text-align:center}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.cards.two{grid-template-columns:1fr 1fr}
@media(max-width:860px){.cards,.cards.two{grid-template-columns:1fr}}
.card{border:1px solid var(--line);border-radius:10px;background:var(--ink-800);padding:1.4rem;transition:border-color .15s,transform .15s}
.card:hover{border-color:rgba(25,200,166,0.3);transform:translateY(-2px)}
.card h3{margin-bottom:0.5rem}
.card p{font-size:0.9rem;color:var(--text-mid)}
.card .ic{font-size:1.3rem;margin-bottom:0.8rem;display:block;color:var(--accent-rm)}

/* STEPS */
.steps{display:flex;flex-direction:column;gap:0.2rem;margin-top:1.8rem}
.step{display:flex;gap:1rem;padding:0.85rem 0;border-bottom:1px solid var(--line-2);align-items:baseline}
.step:last-child{border-bottom:0}
.step .si{font-family:var(--mono);font-size:0.7rem;color:var(--accent-rm);min-width:24px}
.step .st{font-family:var(--display);font-size:1rem;font-weight:500;color:var(--text-hi)}
.step .sd{font-size:0.88rem;color:var(--text-mid);margin-top:2px}

/* PATHWAYS */
.paths{display:grid;grid-template-columns:1.1fr 1fr;gap:1.2rem;margin-top:2.4rem}
@media(max-width:860px){.paths{grid-template-columns:1fr}}
.path{border:1px solid var(--line);border-radius:12px;background:var(--ink-800);padding:1.7rem;display:flex;flex-direction:column}
.path.primary{border-color:rgba(25,200,166,0.4);background:linear-gradient(180deg,rgba(25,200,166,0.06),var(--ink-800) 55%)}
.path .tag{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-rm);margin-bottom:0.8rem}
.path h3{font-size:1.25rem}
.path p{font-size:0.92rem;color:var(--text-mid);margin-top:0.7rem;flex:0}
.path ul{list-style:none;margin:1rem 0;flex:1}
.path ul li{font-size:0.88rem;color:var(--text-mid);padding:0.35rem 0 0.35rem 1.4rem;position:relative}
.path ul li::before{content:"✓";position:absolute;left:0;color:var(--accent-rm);font-size:0.8rem}
.path .btn{align-self:flex-start;margin-top:0.5rem}

/* TRUST / OPEN BANKING */
.trustbox{border:1px solid rgba(25,200,166,0.35);border-radius:12px;background:var(--ink-800);padding:1.7rem;margin-top:2rem}
.trustbox .tk{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-rm)}
.trustpoints{display:grid;grid-template-columns:1fr 1fr;gap:0.7rem 1.4rem;margin-top:1.2rem}
@media(max-width:640px){.trustpoints{grid-template-columns:1fr}}
.tp{display:flex;gap:0.7rem;align-items:baseline;font-size:0.9rem;color:var(--text-mid)}
.tp::before{content:"●";color:var(--accent-rm);font-size:0.55rem;flex:none}

/* STATS BAR */
.statsbar{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;border:1px solid var(--line);border-radius:10px;background:var(--ink-850);padding:1.3rem 1.5rem;justify-content:space-between}
.statsbar .pf .n{color:var(--proof)}

/* FAQ */
.faq{margin-top:2.2rem;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{cursor:pointer;padding:1.05rem 2rem 1.05rem 0;font-family:var(--display);font-weight:500;font-size:1rem;color:var(--text-hi);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--accent-rm);font-size:1.2rem;font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq .fa{padding:0 0 1.2rem;font-size:0.92rem;color:var(--text-mid);max-width:72ch}

/* FORMS */
form.rm{margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:680px){form.rm{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:0.35rem}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-lo)}
.field label .req{color:var(--accent-rm)}
.field input,.field select,.field textarea{background:var(--ink-800);border:1px solid var(--line);border-radius:8px;color:var(--text-hi);
  font-family:var(--body);font-size:0.95rem;font-weight:300;padding:0.72rem 0.9rem;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(25,200,166,0.55)}
.field input[type=file]{padding:0.55rem 0.9rem;font-size:0.85rem;color:var(--text-mid)}
.field .hint{font-size:0.76rem;color:var(--text-lo)}
.formnote{grid-column:1/-1;font-size:0.8rem;color:var(--text-lo);line-height:1.6}
fieldset{border:0;grid-column:1/-1;margin-top:0.8rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:680px){fieldset{grid-template-columns:1fr}}
fieldset legend{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-rm);margin-bottom:0.9rem;padding-top:0.5rem}

/* CALCULATORS */
.calcgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.4rem);margin-top:2.2rem;align-items:start}
@media(max-width:860px){.calcgrid{grid-template-columns:1fr}}
.calcpanel{border:1px solid var(--line);border-radius:12px;background:var(--ink-800);padding:1.6rem;display:flex;flex-direction:column;gap:1rem}
.calcpanel .field input,.calcpanel .field select{background:var(--ink-700)}
.result{border:1px solid rgba(25,200,166,0.35);border-radius:12px;background:linear-gradient(180deg,rgba(25,200,166,0.07),var(--ink-800) 60%);padding:1.6rem}
.result .rk{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--accent-rm)}
.result .big{font-family:var(--mono);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:500;color:var(--proof);margin-top:0.6rem;line-height:1.1}
.result .rline{display:flex;justify-content:space-between;gap:1rem;padding:0.55rem 0;border-bottom:1px solid var(--line-2);font-size:0.9rem;color:var(--text-mid)}
.result .rline b{color:var(--text-hi);font-weight:500;font-family:var(--mono)}
.result .verdict{margin-top:1rem;font-size:0.95rem;color:var(--text-hi)}
.disclaim{margin-top:1.6rem;font-size:0.74rem;color:var(--text-lo);line-height:1.65;max-width:80ch}

/* ARTICLES */
.article{max-width:760px;margin:0 auto;padding:clamp(2.5rem,6vw,4rem) 0}
.article h1{font-size:clamp(1.9rem,4vw,2.7rem)}
.article .meta{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-lo);margin-top:1rem}
.article .answer{margin-top:1.6rem;padding:1.2rem 1.4rem;border-left:2px solid var(--accent-rm);background:var(--ink-850);border-radius:0 10px 10px 0;color:var(--text-hi);font-size:1.02rem}
.article h2{font-size:1.45rem;margin-top:2.6rem}
.article h3{margin-top:1.8rem;font-size:1.1rem}
.article p{margin-top:1rem;color:var(--text-mid);font-size:0.98rem}
.article ul,.article ol{margin:1rem 0 0 1.3rem;color:var(--text-mid);font-size:0.98rem}
.article li{margin-top:0.4rem}
.article strong,.article b{color:var(--text-hi);font-weight:500}
.article a{color:var(--accent-rm)}
.article table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:0.9rem}
.article th,.article td{text-align:left;padding:0.6rem 0.8rem;border:1px solid var(--line);color:var(--text-mid)}
.article th{color:var(--text-hi);font-family:var(--mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em}
.artcta{margin-top:2.6rem;border:1px solid rgba(25,200,166,0.35);border-radius:12px;background:var(--ink-800);padding:1.5rem;text-align:center}
.artcta p{color:var(--text-mid)}
.crumbs{font-family:var(--mono);font-size:0.66rem;letter-spacing:0.06em;color:var(--text-lo);padding-top:1.6rem}
.crumbs a{color:var(--text-lo);text-decoration:none}
.crumbs a:hover{color:var(--text-mid)}

/* ARTICLE / CALC LISTS */
.artgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.4rem}
@media(max-width:760px){.artgrid{grid-template-columns:1fr}}
.artcard{border:1px solid var(--line);border-radius:10px;background:var(--ink-800);padding:1.4rem;text-decoration:none;display:block;transition:border-color .15s,transform .15s}
.artcard:hover{border-color:rgba(25,200,166,0.3);transform:translateY(-2px)}
.artcard .ak{font-family:var(--mono);font-size:0.6rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-lo)}
.artcard h3{color:var(--text-hi);margin-top:0.5rem;font-size:1.05rem}
.artcard p{font-size:0.87rem;color:var(--text-mid);margin-top:0.5rem}
.artcard .more{font-size:0.85rem;color:var(--accent-rm);margin-top:0.9rem;display:inline-block}

/* CLOSE CTA */
.close{padding:clamp(3.5rem,8vw,6rem) 0;text-align:center;border-top:1px solid var(--line-2)}
.close h2{max-width:24ch;margin:0 auto}
.close p{color:var(--text-mid);max-width:58ch;margin:1rem auto 0}
.close .ctas{justify-content:center}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem}
.footgrid{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fcol h4{font-family:var(--mono);font-size:0.62rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-lo);margin-bottom:0.8rem}
.fcol a{display:block;color:var(--text-mid);text-decoration:none;font-size:0.86rem;margin-bottom:0.45rem}
.fcol a:hover{color:var(--text-hi)}
.fcol p{font-size:0.82rem;color:var(--text-mid)}
.sflogo{height:40px;width:auto;display:block;margin-top:0.8rem}
.credbar{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.credbar span{font-family:var(--mono);font-size:0.64rem;letter-spacing:0.06em;color:var(--text-lo)}
.credbar b{color:var(--text-mid);font-weight:500}
.footnote{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line-2);font-size:0.72rem;color:var(--text-lo);line-height:1.7}
.footnote a{color:var(--text-lo)}

/* UTILITIES */
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-rm);color:#04221E;padding:0.6rem 1rem;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card:hover,.artcard:hover,.btn.primary:hover{transform:none}}