/*
 * NestAbode mortgage calculator suite — shared UI.
 * One stylesheet, linked by every calculator page (payment.html, ltt.html, …)
 * so the brand stays consistent and never drifts between calculators.
 *
 * NestAbode v2 "warm editorial" palette — exact brand tokens.
 */
:root{
  --ink:#0F1A3D;          /* Midnight Navy */
  --ink-soft:#5b6280;
  --paper:#F4F1EA;        /* Cotton */
  --card:#FBF9F3;
  --linen:#E0D2B8;        /* Linen */
  --line:#e3dac6;
  --line-2:#ece4d4;
  --brass:#C26A38;        /* Hearth Brass */
  --brass-soft:#D4A878;   /* Soft Brass */
  --shadow:0 1px 2px rgba(15,26,61,.04), 0 12px 32px -18px rgba(15,26,61,.22);
  --r:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 80% at 50% -10%, #faf7f0 0%, var(--paper) 55%);
}
.wrap{max-width:980px; margin:0 auto; padding:clamp(20px,5vw,56px) clamp(16px,4vw,28px) 72px}

/* ---- masthead ---------------------------------------------------------- */
.eyebrow{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); font-weight:600;
  display:flex; align-items:center; gap:12px; margin:0 0 14px}
.eyebrow::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--brass-soft),transparent)}
h1{font-family:"Cormorant Garamond",serif; font-weight:500; font-style:italic;
  font-size:clamp(34px,7vw,58px); line-height:1.02; letter-spacing:-.01em; margin:0 0 12px}
.lede{font-size:clamp(16px,2.4vw,18px); color:var(--ink-soft); max-width:54ch; margin:0 0 6px}

/* ---- layout ------------------------------------------------------------ */
.grid{display:grid; grid-template-columns:1fr; gap:22px; margin-top:34px}
@media(min-width:860px){ .grid{grid-template-columns:1.02fr 1fr; align-items:start} }

.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
.panel-pad{padding:clamp(20px,3.4vw,28px)}
.panel h2{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:24px; margin:0 0 4px}
.panel .sub{font-size:13.5px; color:var(--ink-soft); margin:0 0 20px}

/* ---- form -------------------------------------------------------------- */
.field{margin-bottom:18px}
.field > label{display:block; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--ink); margin-bottom:7px}
.control{position:relative}
.control .pre{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-weight:500; pointer-events:none}
.control .post{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-soft); font-weight:500; pointer-events:none}
.control input, select{
  width:100%; font:inherit; font-weight:600; color:var(--ink);
  background:#fff; border:1px solid var(--linen); border-radius:10px;
  padding:13px 14px; appearance:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s}
.control:has(.pre) input{padding-left:30px}
.control:has(.post) input{padding-right:32px}
select{padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352597a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center}
input:focus, select:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(168,121,78,.14)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:520px){ .row2{grid-template-columns:1fr} }

.seg{display:inline-flex; width:100%; background:#f2ece1; border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px}
.seg label{flex:1; cursor:pointer; position:relative}
.seg input{position:absolute; opacity:0; pointer-events:none}
.seg span{display:block; text-align:center; padding:8px 16px; border-radius:7px; font-size:13.5px; font-weight:600; color:var(--ink-soft); transition:.15s; white-space:nowrap}
.seg input:checked + span{background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(20,33,61,.12)}

/* a calm inline checkbox row (e.g. first-time buyer) */
.check{display:flex; align-items:flex-start; gap:11px; padding:13px 14px; background:#fff;
  border:1px solid var(--linen); border-radius:10px; cursor:pointer; transition:border-color .15s}
.check:hover{border-color:var(--brass-soft)}
.check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--brass); flex:0 0 auto; cursor:pointer}
.check .ct{font-size:13.5px; font-weight:600; color:var(--ink)}
.check .cs{display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:2px}

.chips{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}
.chip{font:inherit; font-size:12.5px; font-weight:600; color:#6f5a3f; cursor:pointer;
  background:#efe6d6; border:1px solid var(--linen); border-radius:999px; padding:5px 12px; transition:.12s}
.chip:hover{border-color:var(--brass); color:var(--brass)}
.hint{font-size:12px; color:var(--ink-soft); margin-top:7px; line-height:1.4}

/* ---- result ------------------------------------------------------------ */
.result{position:sticky; top:18px}
.headline{padding:clamp(22px,4vw,30px); text-align:center; border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fffefb, #fbf7f0)}
.headline .cap{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:600; margin-bottom:8px}
.amount{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(46px,11vw,68px); line-height:.95; letter-spacing:-.015em}
.amount .cents{font-size:.46em; vertical-align:.18em; color:var(--ink-soft)}
.freq{font-size:14px; color:var(--ink-soft); margin-top:6px}

dl.lines{margin:0; padding:clamp(18px,3vw,24px)}
.line{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:11px 0; border-bottom:1px dashed var(--line-2)}
.line:last-child{border-bottom:0}
.line dt{color:var(--ink-soft); font-size:14px}
.line dd{margin:0; font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.line.total dt{color:var(--ink); font-weight:600}
.line.total dd{font-size:18px}
.line.credit dd{color:var(--brass)}
.section-cap{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); font-weight:700;
  padding:18px 0 4px; border-top:1px solid var(--line-2); margin-top:6px}
.section-cap:first-child{border-top:0; margin-top:0; padding-top:4px}

.callout{margin:0 clamp(18px,3vw,24px) clamp(18px,3vw,24px); border-radius:11px; padding:14px 16px; font-size:13.5px; line-height:1.5}
.callout.accel{background:#f3ecde; border:1px solid var(--linen); border-left:3px solid var(--brass); color:#7a4422}
.callout.insured{background:#f4eee2; border:1px solid var(--linen); color:var(--ink)}
.callout.conventional{background:#efece4; border:1px solid var(--line); color:var(--ink-soft)}
.callout.warn{background:#f6ead6; border:1px solid var(--brass-soft); color:#8f4f24}
.callout.err{background:#f3e6da; border:1px solid var(--brass-soft); color:#9a3d20}
.callout strong{font-weight:700}
.callout.accel b{font-variant-numeric:tabular-nums; color:var(--brass)}

/* ---- cta + disclaimer -------------------------------------------------- */
.cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  margin-top:26px; padding:22px clamp(18px,3vw,26px); background:var(--ink); color:#f7f4ee; border-radius:var(--r)}
.cta p{margin:0; font-family:"Cormorant Garamond",serif; font-style:italic; font-size:21px; line-height:1.2; max-width:34ch}
.cta a{flex:0 0 auto; background:#f7f4ee; color:var(--ink); text-decoration:none; font-weight:600; font-size:14.5px;
  padding:13px 22px; border-radius:10px; transition:.15s; white-space:nowrap}
.cta a:hover{background:#fff; transform:translateY(-1px)}

.fine{margin-top:22px; font-size:12px; color:var(--ink-soft); line-height:1.6; max-width:70ch}
.fine b{color:var(--ink); font-weight:600}
.asof{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft);
  background:#f1ebe0; border:1px solid var(--line); border-radius:999px; padding:5px 12px; margin-top:14px}
.asof::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass)}
[hidden]{display:none !important}

/* ---- hub index (calculators landing) ---------------------------------- */
.hub{display:grid; grid-template-columns:1fr; gap:18px; margin-top:36px}
@media(min-width:680px){ .hub{grid-template-columns:1fr 1fr} }
.tool{display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); padding:clamp(20px,3vw,26px); transition:transform .15s, border-color .15s, box-shadow .15s}
.tool:hover{transform:translateY(-2px); border-color:var(--brass-soft); box-shadow:0 1px 2px rgba(15,26,61,.05), 0 18px 40px -20px rgba(15,26,61,.3)}
.tool .ic{width:38px; height:38px; border-radius:10px; background:#f1e7d6; border:1px solid var(--linen);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px}
.tool .ic svg{width:20px; height:20px}
.tool h2{font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:23px; margin:0 0 5px}
.tool p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.5}
.tool .go{display:inline-flex; align-items:center; gap:6px; margin-top:13px; font-size:13px; font-weight:600; color:var(--brass)}
.tool .go::after{content:"→"; transition:transform .15s}
.tool:hover .go::after{transform:translateX(3px)}