/* Годовщина — страховка ипотеки без переплаты. Единая стилевая база. */
:root{
  --ink:#14213D; --muted:#5C6B82; --line:#DDE3EC;
  --bg:#FFFFFF; --surface:#F4F6F9; --band:#EEF3F0; --surface-2:#EAF7F2;
  --accent:#0B7A5B; --accent-ink:#075C44; --accent-soft:#D9F0E7;
  --warn:#B4530A; --warn-soft:#FBEBDD;
  --head:"Manrope","IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",Menlo,Consolas,monospace;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.narrow{max-width:700px}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px}
.brand{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:-.01em;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand span{color:var(--accent)}
.site-nav{display:flex;gap:6px;font-size:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{text-decoration:none;color:var(--ink);background:var(--surface);padding:7px 12px;border-radius:999px;white-space:nowrap}
.site-nav a:hover{background:var(--accent-soft);color:var(--accent-ink)}

/* type */
h1,h2,h3{font-family:var(--head);line-height:1.12;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:34px;font-weight:800}
h2{font-size:26px;font-weight:800;margin-top:52px;margin-bottom:14px}
h3{font-size:19px;font-weight:700;margin-top:24px;margin-bottom:8px}
p{margin:0 0 14px;max-width:68ch}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 6px;max-width:66ch}
.lede{font-size:18px;color:var(--muted);max-width:52ch}
.eyebrow{font-family:var(--head);font-weight:700;font-size:13px;letter-spacing:.02em;color:var(--accent-ink)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{font-size:14px;color:var(--muted)}
strong{font-weight:700}

/* breadcrumbs */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink);text-decoration:underline}
.crumbs .sep{color:var(--line)}
.crumbs [aria-current]{color:var(--ink)}

/* hero */
.hero{background:var(--band);padding:36px 0 32px}
.hero .grid{display:grid;grid-template-columns:1fr 1.05fr;gap:32px;align-items:start}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.fact{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;color:var(--ink);white-space:nowrap}
.fact b{font-family:var(--head);font-weight:800;color:var(--accent-ink)}

/* calculator */
.calc{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(20,33,61,.06)}
.calc h2{margin:0 0 4px;font-size:20px}
.calc .sub{font-size:14px;color:var(--muted);margin:0 0 14px}
.calc .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc label,.calc .field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.calc input,.calc select{font:inherit;font-size:18px;font-weight:400;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;width:100%}
.calc input:hover,.calc select:hover{border-color:#B9C4D2}
.calc input[inputmode=numeric]{font-family:var(--mono);font-variant-numeric:tabular-nums}
.calc .full{grid-column:1/-1}
.calc input[type=range]{padding:0;border:0;height:28px;accent-color:var(--accent);background:transparent}
.seg{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg)}
.seg button{flex:1;font:inherit;font-size:15px;padding:11px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff}

.result{margin-top:16px;background:var(--surface-2);border-radius:12px;padding:16px 18px 18px}
.result .k{font-size:13.5px;color:var(--accent-ink);font-weight:600;margin:0}
.result .big{font-family:var(--head);font-weight:800;font-size:34px;line-height:1.05;letter-spacing:-.02em;margin:2px 0 6px;font-variant-numeric:tabular-nums}
.result .big.skip{color:var(--warn)}
.result .verdict{margin:0 0 12px;font-size:15.5px;line-height:1.4}
.rows{display:grid;gap:8px;margin:0 0 4px}
.rw{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;font-size:15px}
.rw .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.rw .track{grid-column:1/-1;height:6px;background:rgba(20,33,61,.08);border-radius:3px;overflow:hidden}
.rw .fill{height:100%;background:var(--muted);border-radius:3px;transition:width .3s}
.rw.best .fill{background:var(--accent)}
.rw.best{font-weight:600}
.rw.worst .fill{background:var(--warn)}
.cta{display:block;text-align:center;margin-top:14px;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--head);font-weight:700;font-size:17px;padding:15px 20px;border-radius:12px}
.cta:hover{background:var(--accent-ink)}
.cta.inline{display:inline-block}
.trust{margin:10px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.trust .ad{display:inline-block;border:1px solid var(--line);border-radius:4px;padding:0 5px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;margin-right:6px;color:var(--muted)}
.how{margin-top:12px;font-size:14px;color:var(--muted)}
.how summary{cursor:pointer;color:var(--accent-ink);font-weight:600;list-style:none;display:inline}
.how summary::-webkit-details-marker{display:none}
.how summary::after{content:" ›";display:inline-block;transform:rotate(90deg);margin-left:2px}
.how[open] summary::after{transform:rotate(-90deg)}
.how p{margin:8px 0 0}

/* sections */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.step{background:var(--surface);border-radius:var(--radius);padding:16px}
.step .k{font-family:var(--head);font-weight:800;font-size:13px;color:var(--accent-ink)}
.step h3{margin-top:6px}
.step p{font-size:15px;margin:0;color:var(--muted)}
.insurers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 16px;padding:0;list-style:none;margin:14px 0}
.insurers li{background:var(--surface);border-radius:8px;padding:10px 12px;font-size:15px;margin:0}
.callout{border-left:4px solid var(--accent);background:var(--surface-2);padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;margin:18px 0}
.callout p:last-child{margin-bottom:0}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:14px 0}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}

/* tools */
.tool{background:var(--surface);border-left-color:var(--ink)}
.remind{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin:10px 0 6px}
.remind label{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:600}
.remind input{font:inherit;font-size:16px;font-weight:400;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg)}
.remind .cta{margin-top:0;padding:12px 18px;font-size:15px;border:0;cursor:pointer}
#annuity{margin-top:20px}

/* offers table */
.offers{margin:16px 0 8px;background:var(--surface-2);border-radius:12px;padding:16px 18px}
.offers .k{font-size:13.5px;color:var(--accent-ink);font-weight:600;margin:0 0 6px}
.offers .tblwrap{background:var(--bg);margin:10px 0}
.offers tr.best td{font-weight:700}
.offers a.buy{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:7px 12px;border-radius:8px;white-space:nowrap}
.offers a.buy:hover{background:var(--accent-ink)}

/* partner form */
.pform{margin-top:18px}
.pform input[type=date]{font-family:var(--body)}
.pform .cta{width:100%;border:0;cursor:pointer}
#wl-open{margin-top:0}

/* on-site widget */
.oformit{padding-top:28px}
.oformit h2{margin-top:0}
.widget-frame{margin:14px 0 10px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.widget-frame iframe{display:block}

/* photos */
.photo{margin:22px 0 26px}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}
.photo figcaption{font-size:13px;color:var(--muted);margin-top:8px}

/* figures */
.fig{margin:18px 0 22px;max-width:720px}
.fig img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line)}
.fig figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{font-family:var(--head);font-weight:700;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted);font-size:16px}

/* related */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.related a{display:block;background:var(--surface);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--ink);font-family:var(--head);font-weight:700;font-size:16px}
.related a small{display:block;font-family:var(--body);font-weight:400;color:var(--muted);font-size:14px;margin-top:4px}

/* cookie notice */
.cookie-note{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;max-width:640px;margin:0 auto;background:var(--ink);color:#fff;padding:12px 14px;border-radius:12px;font-size:14px;line-height:1.4;box-shadow:0 10px 30px rgba(20,33,61,.25)}
.cookie-note a{color:#fff}
.cookie-note button{font:inherit;font-weight:700;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;white-space:nowrap}

/* footer */
.site-foot{margin-top:64px;border-top:1px solid var(--line);padding:24px 0 40px;font-size:14px;color:var(--muted)}
.site-foot p{max-width:none}

@media (max-width:760px){
  h1{font-size:27px}
  h2{font-size:22px;margin-top:40px}
  .hero{padding:16px 0 24px}
  .hero .grid{grid-template-columns:1fr;gap:18px}
  .hero .grid > form{order:-1}
  .hero .eyebrow{display:none}
  .lede{font-size:16px}
  .calc{padding:16px}
  .calc .row{grid-template-columns:1fr 1fr}
  .result .big{font-size:30px}
  .steps,.related,.insurers{grid-template-columns:1fr}
}
@media (max-width:420px){
  .calc .row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.rw .fill{transition:none}}