/* ═══════════════════════════════════════════════════════════════════════
   LAINAPILOTTI — DESIGN REFRESH v2 skin  (2026-07-07)
   Direction: modern fintech clean (mockup-approved by Allan).
   Loads AFTER style.css and progressively overrides the 2023 rules.
   Rollback = dequeue this one file. Logo untouched (brand asset).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --lp-blue:#0061FE; --lp-blue-deep:#0047C2; --lp-blue-soft:#E8F0FF;
  --lp-ink:#101828; --lp-slate:#51607A; --lp-slate-2:#8492AB;
  --lp-ground:#F7F8FB; --lp-tint:#EEF3FF; --lp-line:#E4E9F2;
  --lp-green:#00A578; --lp-green-soft:#E3F6EF;
  --lp-card-shadow:0 1px 2px rgba(16,24,40,.06),0 16px 44px -14px rgba(0,71,194,.18);
  --lp-r-card:20px; --lp-r-ctl:14px;
}

body{background:var(--lp-ground);color:var(--lp-ink)}

/* ─────────────────────────── NAV ─────────────────────────── */
.header{background:rgba(255,255,255,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--lp-line);box-shadow:none}
.header-navigation-list .menu-item a{font-size:14.5px;font-weight:550;color:var(--lp-slate)}
.header-navigation-list .menu-item a:hover{color:var(--lp-ink)}
/* :link/:visited included — legacy sets color:#fff via those states (old blue pill
   with a white phone icon); on the white v2 pill that rendered as an empty capsule. */
.header-contact,.header-contact:link,.header-contact:visited,.header-contact:active{background:#fff;background-image:none;border:1.5px solid var(--lp-line);border-radius:999px;color:var(--lp-ink);font-weight:650;font-size:14px;padding:9px 18px;height:auto;box-shadow:none}
.header-contact:hover{border-color:var(--lp-blue);color:var(--lp-blue);background:#fff;background-image:none}

/* ─────────────────────────── HERO ───────────────────────────
   Not a flat color (Allan): layered radial washes + two soft orbs
   + a faint oversized brand-triangle plane. Decor sits behind content. */
.hero-calculator{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1000px 460px at 88% -12%, rgba(0,97,254,.10), transparent 62%),
    radial-gradient(720px 420px at -8% 108%, rgba(0,165,120,.07), transparent 60%),
    linear-gradient(180deg,#FBFCFE 0%, var(--lp-ground) 100%);
  padding-top:56px;padding-bottom:64px;
}
.hero-calculator::before{ /* soft blue orb */
  content:'';position:absolute;width:520px;height:520px;border-radius:50%;
  right:-140px;top:-200px;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,97,254,.14), transparent 70%);
  filter:blur(6px);
}
.hero-calculator::after{ /* faint brand-plane triangle, nods to the logo motif */
  content:'';position:absolute;pointer-events:none;
  width:640px;height:640px;left:-190px;bottom:-330px;
  background:linear-gradient(135deg, rgba(0,97,254,.06), rgba(0,97,254,0) 65%);
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
  transform:rotate(8deg);
}
.hero-calculator .container{position:relative;z-index:1}
.hero-calculator-title{font-size:47px;line-height:1.06;font-weight:800;letter-spacing:-.032em;text-wrap:balance;color:var(--lp-ink)}
.hero-calculator-title span{color:var(--lp-blue)}
.hero-calculator-text{font-size:17.5px;line-height:1.55;color:var(--lp-slate);max-width:46ch;margin-top:14px}

/* benefit list → 2-col grid with crisp SVG checks (no theme check image) */
.hero-calculator-list{display:grid;grid-template-columns:1fr 1fr;gap:13px 22px;max-width:560px;margin-top:24px;padding:0}
.hero-calculator-list li{
  display:flex;gap:11px;align-items:flex-start;
  font-size:15px;font-weight:550;color:var(--lp-ink);line-height:1.4;
  background:none;padding:0;margin:0;list-style:none;
}
.hero-calculator-list li::before{
  content:'';flex:0 0 19px;height:19px;margin-top:1px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="%23E3F6EF"/><path d="m7.5 12.2 3 3 6-6.4" stroke="%2300A578" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}

/* ───────────────── CREDIBILITY STRIP (one element) ───────────────── */
.lp-cred{
  display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--lp-line);border-radius:999px;
  padding:9px 18px;font-size:13px;color:var(--lp-slate);
  box-shadow:0 1px 2px rgba(16,24,40,.05);margin-bottom:22px;
}
.lp-cred .live{display:inline-flex;align-items:center;gap:7px;color:var(--lp-green);font-weight:650}
.lp-cred .lp-dot{width:8px;height:8px;border-radius:50%;background:var(--lp-green);position:relative;flex:0 0 auto}
.lp-cred .lp-dot::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--lp-green);animation:lp-ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes lp-ping{0%{transform:scale(1);opacity:.6}80%,100%{transform:scale(2.4);opacity:0}}
@media (prefers-reduced-motion:reduce){.lp-cred .lp-dot::after{animation:none}}
.lp-cred .lp-sep{width:1px;height:14px;background:var(--lp-line)}
.lp-cred .stars{display:inline-flex;align-items:center;gap:7px;font-weight:650;color:var(--lp-ink)}
.lp-cred .stars svg{display:block}
.lp-cred[hidden]{display:none}
/* retire the old standalone pieces wherever they still render */
.hero-activity, .hero-calculator .tp-badge{display:none !important}

/* ───────────────────── CALCULATOR CARD v2 ───────────────────── */
.calculator{background:transparent;box-shadow:none}
.calculator-head{
  background:#fff;border-radius:var(--lp-r-card) var(--lp-r-card) 0 0;
  padding:26px 30px 0;color:var(--lp-ink);
  font-size:21px;font-weight:750;letter-spacing:-.015em;text-align:left;border:0;
}
.calculator-head::before{
  content:'Lainalaskuri';display:block;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lp-blue);margin-bottom:5px;
}
.calculator-body{
  background:#fff;border-radius:0 0 var(--lp-r-card) var(--lp-r-card);
  box-shadow:var(--lp-card-shadow);padding:22px 30px 24px;
}
.calculator{border-radius:var(--lp-r-card);box-shadow:var(--lp-card-shadow)}
.calculator .calculator-body{box-shadow:none}

/* sliders */
.calculator-body-slider-title{margin-bottom:12px}
.calculator-body-slider-title span{font-size:14px;color:var(--lp-slate);font-weight:550}
.calculator-body-slider-title .calculator-body-slider-title-amount{font-size:19px;font-weight:750;letter-spacing:-.01em;color:var(--lp-ink)}
.calculator-body-slider-range input[type="range"]{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;outline:none;display:block;margin:8px 0 0;
  background:linear-gradient(90deg,var(--lp-blue) calc((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000)) * 100%),#E7EBF3 calc((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000)) * 100%));
}
.calculator-body-slider-range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:2px solid var(--lp-blue);box-shadow:0 2px 8px rgba(0,97,254,.35);cursor:pointer;
}
.calculator-body-slider-range input[type="range"]::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:#fff;border:2px solid var(--lp-blue);
  box-shadow:0 2px 8px rgba(0,97,254,.35);cursor:pointer;
}
.calculator-body-slider-range input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(0,97,254,.22)}
.calculator-body-slider-range-start,.calculator-body-slider-range-end{font-size:12px;color:var(--lp-slate-2)}

/* monthly payment = focal panel */
.calculator-body-estimated{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--lp-tint);border-radius:16px;padding:16px 20px;margin:6px 0 4px;border:0;
}
.calculator-body-estimated span:first-child{font-size:14px;color:var(--lp-slate);font-weight:550}
.calculator-body-estimated-amount{font-size:32px !important;font-weight:800 !important;letter-spacing:-.025em;color:var(--lp-ink) !important;font-variant-numeric:tabular-nums}

/* refinancing radios → segmented control (same markup, new skin) */
.radio-text{font-size:14px;color:var(--lp-slate);font-weight:550;line-height:1.35}
.radio{display:inline-flex;background:#EEF1F7;border-radius:12px;padding:3px;border:0;gap:0}
.radio-button{
  border:0;background:transparent;border-radius:10px;padding:9px 26px;min-height:0;
  font-size:14.5px;font-weight:650;color:var(--lp-slate);cursor:pointer;box-shadow:none;
}
.radio-button::before,.radio-button::after{display:none !important} /* kill old circle indicator */
.radio-button.active{background:#fff;color:var(--lp-ink);box-shadow:0 1px 4px rgba(16,24,40,.14);border:0}

/* CTA */
.calculator-body-button{
  width:100%;border:0;border-radius:var(--lp-r-ctl);background:var(--lp-blue);color:#fff;
  font-size:17.5px;font-weight:700;padding:17px;letter-spacing:-.005em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .1s;box-shadow:none;text-transform:none;
}
.calculator-body-button:hover{background:var(--lp-blue-deep)}
.calculator-body-button:active{transform:scale(.985)}
.calculator-body-button:focus-visible{outline:3px solid rgba(0,97,254,.35);outline-offset:2px}
.calculator-body-button-arrow{font-size:19px;line-height:1}

/* micro-trust + example + axo */
.calculator-body-list{display:flex;justify-content:center;gap:8px;margin:13px 0 0;padding:0;flex-wrap:wrap}
.calculator-body-list li{font-size:12.5px;color:var(--lp-slate);font-weight:550;list-style:none;background:none;padding:0}
.calculator-body-list li + li::before{content:'·';margin-right:8px;color:var(--lp-slate-2)}
.calculator-body-list li span{font-size:inherit;color:inherit}
.calculator-body-note{
  font-size:11.5px;line-height:1.55;color:var(--lp-slate-2);
  margin-top:15px;padding-top:14px;border-top:1px solid var(--lp-line);text-align:left;
}

/* ───────────── unfold: summary chip + step-2 fields ───────────── */
.calc-summary{
  display:none;width:100%;align-items:center;justify-content:space-between;gap:12px;
  background:var(--lp-tint);border:1px solid #DCE7FF;border-radius:12px;
  padding:12px 16px;margin-bottom:20px;cursor:pointer;text-align:left;
}
.is-step2 .calc-summary:not([hidden]),.is-step3 .calc-summary:not([hidden]){display:flex}
.calc-summary-text{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--lp-ink)}
.calc-summary-edit{
  display:inline-flex;align-items:center;gap:6px;color:var(--lp-blue);font-size:13px;font-weight:650;flex:0 0 auto;
}
.calc-summary-edit::before{
  content:'';width:13px;height:13px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230061FE" stroke-width="2.2"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z" stroke-linejoin="round"/></svg>') center/contain no-repeat;
}
.form-field{position:relative;margin-bottom:14px}
.form-field input{
  width:100%;border:1.5px solid var(--lp-line);border-radius:12px;
  padding:22px 16px 9px;font-size:16px;background:#fff;color:var(--lp-ink);box-shadow:none;height:auto;
}
.form-field input:focus{outline:none;border-color:var(--lp-blue);box-shadow:0 0 0 4px rgba(0,97,254,.12)}
.form-field .placeholder{
  position:absolute;left:17px;top:7px;font-size:11.5px;font-weight:650;letter-spacing:.03em;
  color:var(--lp-slate-2);text-transform:uppercase;transform:none;transition:none;pointer-events:none;
}
.form-field input.input-error{border-color:#E7511E}
.form-field-error{font-size:12.5px;color:#C2410C;margin-top:6px}
.checkbox-label.agreement{font-size:12.5px;color:var(--lp-slate);line-height:1.5}
.checkbox-label.agreement input[type="checkbox"]{width:17px;height:17px;accent-color:var(--lp-blue)}
.calculator-back-link{color:var(--lp-slate);font-size:13.5px}
.calculator-back-link:hover{color:var(--lp-blue)}
.calculator-body-sent-error{background:#FDEEE9;color:#A73812;border-radius:12px;padding:12px 16px;font-size:13.5px}

/* loading state */
.calculator-loading-header{font-size:17px;font-weight:750;letter-spacing:-.01em;color:var(--lp-ink)}
.calculator-loading-sub{font-size:13px;color:var(--lp-slate)}
.calculator-loading-steps{max-width:270px;margin:0 auto}
.calc-loading-step{font-size:14.5px;color:var(--lp-slate-2);font-weight:550;padding:8px 0 8px 34px}
.calc-loading-step::before{width:22px;height:22px;border-width:2px;border-color:var(--lp-line)}
.calc-loading-step.is-active{color:var(--lp-ink)}
.calc-loading-step.is-active::before{border-color:var(--lp-blue);border-top-color:transparent}
.calc-loading-step.is-done{color:var(--lp-ink)}
.calc-loading-step.is-done::before{border-color:var(--lp-green);background-color:var(--lp-green)}

/* ───────────────────── trust row (SVG, styled) ───────────────────── */
.trust-row{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:16px;padding:0 6px}
.trust-row li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--lp-slate);font-weight:550;list-style:none}
.trust-row svg{flex:0 0 auto;color:var(--lp-blue)}
.trust-row-ico{display:none} /* retire emoji spans if any remain */

/* ─────────────────────── STICKY MOBILE CTA v2 ─────────────────────── */
.sticky-cta.is-ready{
  background:var(--lp-blue);border-radius:14px;padding:15px 20px;
  justify-content:space-between;box-shadow:0 10px 30px -6px rgba(0,71,194,.5);
  font-size:16px;font-weight:750;
}
.sticky-cta-monthly{font-size:13px;font-weight:600;opacity:.92}
.sticky-cta-monthly[hidden]{display:none}
.sticky-cta-arrow{display:none}

/* ─────────────────────────── SECTIONS ─────────────────────────── */
/* how-it-works: numbered cards (the steps ARE a sequence) */
.information{background:#fff;padding-top:56px;padding-bottom:40px}
.information-title{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--lp-ink);text-wrap:balance}
.information-feature{
  background:var(--lp-ground);border:1px solid var(--lp-line);border-radius:16px;
  padding:22px;box-shadow:none;counter-increment:lp-step;
}
.information .row.stretch{counter-reset:lp-step}
.information-feature img{display:none}
.information-feature::before{
  content:counter(lp-step);display:grid;place-items:center;
  width:34px;height:34px;border-radius:10px;background:var(--lp-blue);color:#fff;
  font-size:15px;font-weight:750;margin-bottom:13px;
}
.information-feature h4{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--lp-ink);margin-bottom:7px}
.information-feature{font-size:13.5px;color:var(--lp-slate);line-height:1.55}

/* partner logos: continuous marquee (template provides duplicated track) */
.lp-marq{position:relative;overflow:hidden;padding:22px 0;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);background:#fff}
.lp-marq::before,.lp-marq::after{content:'';position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.lp-marq::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.lp-marq::after{right:0;background:linear-gradient(-90deg,#fff,transparent)}
.lp-marq-track{display:flex;gap:52px;align-items:center;width:max-content;animation:lp-scroll 34s linear infinite}
@keyframes lp-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lp-marq-track{animation:none}}
.lp-marq-track .information-partners-logo{flex:0 0 auto}
.lp-marq-track .information-partners-logo img{height:26px;width:auto;filter:grayscale(1);opacity:.55}

/* FAQ restyle */
.faq{background:var(--lp-ground)}
.faq-title{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--lp-ink)}
.faq-accordion-item{
  border:1px solid var(--lp-line);border-radius:14px;padding:18px 20px;margin-bottom:10px;
  background:#fff;box-shadow:none;
}
.faq-accordion-item.active{border-color:#CBDCFF;background:var(--lp-tint)}
.faq-accordion-item-question{
  font-size:15.5px;font-weight:650;letter-spacing:-.005em;color:var(--lp-ink);
  display:flex;justify-content:space-between;align-items:center;padding:0;background:none;
}
.faq-accordion-item-question::after{
  content:'+';display:grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:#fff;border:1px solid var(--lp-line);color:var(--lp-blue);
  font-weight:700;font-size:16px;flex:0 0 auto;margin-left:14px;
}
.faq-accordion-item.active .faq-accordion-item-question::after,
.faq-accordion-item-question.active::after{content:'−';background:var(--lp-blue);color:#fff;border-color:var(--lp-blue)}
.faq-accordion-item-answer{font-size:14px;color:var(--lp-slate);line-height:1.6;max-width:68ch;padding-top:10px}

/* CTA band */
.cta-box{
  background:linear-gradient(135deg,var(--lp-blue) 0%,#2B7FFF 100%);
  border-radius:20px;box-shadow:0 20px 50px -18px rgba(0,71,194,.45);
}
.cta-box-title{font-size:24px;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.cta-box-button{
  background:#fff;color:var(--lp-blue);border-radius:13px;padding:15px 30px;
  font-size:16px;font-weight:750;box-shadow:none;
}
.cta-box-button:hover{background:var(--lp-blue-soft)}

/* footer */
.footer{background:var(--lp-ink);color:#AAB4C8}
.footer-text{font-size:13.5px;line-height:1.6;color:#AAB4C8}
.footer-title{color:#fff;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:650}
.footer-list li a{color:#AAB4C8;font-size:13.5px}
.footer-list li a:hover{color:#fff}
.footer .tp-badge{margin-top:14px}
.footer .tp-badge-text{color:#fff;opacity:.9}
.footer .tp-badge-text strong{color:#fff}

/* description/content sections: quiet modernization */
.description-title,.content h3{font-size:26px;font-weight:800;letter-spacing:-.025em;color:var(--lp-ink)}
.description-text,.content p{color:var(--lp-slate);line-height:1.65}
.description-image img,.content-image{border-radius:18px}

/* ─────────────────────────── MOBILE ─────────────────────────── */
@media (max-width:767px){
  .hero-calculator{padding-top:24px;padding-bottom:110px}
  .hero-calculator::before{width:340px;height:340px;right:-120px;top:-160px}
  .hero-calculator-title{font-size:29px;margin-top:20px}
  .hero-calculator-text{font-size:15px}
  .hero-calculator-list{grid-template-columns:1fr;gap:10px}
  .lp-cred{gap:10px;padding:8px 14px;font-size:12px;margin-bottom:6px}
  .lp-cred .live{display:none} /* compact strip on phones: stars + banks */
  .calculator-head{padding:22px 18px 0;font-size:19px}
  .calculator-body{padding:16px 18px 18px}
  .calculator-body-estimated{padding:13px 16px}
  .calculator-body-estimated-amount{font-size:26px !important}
  .calculator-body-button{min-height:54px;font-size:16.5px}
  .trust-row{grid-template-columns:1fr;gap:7px}
  .sticky-cta.is-ready{left:12px;right:12px;bottom:12px}
  .footer{padding-bottom:96px}
}

/* ═══════════ POLISH PASS (2026-07-07, Allan QA round) ═══════════ */

/* Marquee: SVG logos have no intrinsic width → give each a fixed box; kill legacy margins */
.lp-marq-track .information-partners-logo{margin:0;flex:0 0 auto}
.lp-marq-track .information-partners-logo img{width:110px;height:28px;object-fit:contain;object-position:center;filter:grayscale(1);opacity:.55;display:block}

/* Credibility strip: keep to ONE line on desktop */
.lp-cred{gap:12px;padding:8px 16px;font-size:12.5px;white-space:nowrap}
.lp-cred .stars{gap:6px}
@media (max-width:1200px){.lp-cred{white-space:normal}}

/* FAQ: remove the legacy plus/minus background icon (skin draws its own ::after box) */
.faq-accordion-item-question,
.faq-accordion-item-question.active{background-image:none !important;padding:0}
.faq-accordion-item-answer{padding-bottom:0}

/* Segmented-control row: label left-aligned + vertically centered with the switch */
.calculator-body .radio-text{text-align:left}
.calculator-body .row.middle{align-items:center}

/* Step-2 floating labels: win the specificity war against the 2023 form CSS */
.calculator-body .form-field{position:relative;margin-bottom:14px}
.calculator-body .form-field input{
  width:100%;border:1.5px solid var(--lp-line);border-radius:12px;
  padding:22px 16px 9px !important;font-size:16px !important;background:#fff;color:var(--lp-ink);
  height:auto !important;line-height:1.3;
}
.calculator-body .form-field .placeholder{
  position:absolute;left:17px;top:7px !important;
  font-size:11.5px !important;font-weight:650;letter-spacing:.03em;
  color:var(--lp-slate-2);text-transform:uppercase;transform:none !important;
  transition:none;pointer-events:none;margin:0;
}
.calculator-body .form-field input:focus{border-color:var(--lp-blue);box-shadow:0 0 0 4px rgba(0,97,254,.12)}

/* Consent checkbox: align the legacy absolute input with the new type scale */
.checkbox-label.agreement{padding-left:28px;position:relative}
.checkbox-label.agreement input[type="checkbox"]{position:absolute;left:0;top:2px;width:17px;height:17px}

/* Micro-trust separators: ensure no legacy bullets/backgrounds sneak back */
.calculator-body-list li{background:none;padding-left:0}

/* Description/content "read more" buttons → v2 pill */
.xbutton{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;
  border:1.5px solid var(--lp-line);background:#fff;color:var(--lp-ink);
  font-size:14.5px;font-weight:650;padding:11px 22px;box-shadow:none;text-transform:none;
}
.xbutton:hover{border-color:var(--lp-blue);color:var(--lp-blue)}
.xbutton.color{background:var(--lp-blue);border-color:var(--lp-blue);color:#fff}
.xbutton.color:hover{background:var(--lp-blue-deep);color:#fff}

/* Section rhythm: consistent vertical spacing across the page */
.information,.description,.faq,.content,.cta{padding-top:56px;padding-bottom:56px}
.information-title,.faq-title,.description-title{margin-bottom:26px}

/* FAQ card: answer typography inside open item */
.faq-accordion-item-answer{color:var(--lp-slate)}

/* Footer link + text rhythm */
.footer-list li{margin-bottom:8px}

/* Mobile refinements from the QA pass */
@media (max-width:767px){
  .lp-cred{white-space:normal;justify-content:center;width:100%}
  .lp-marq-track .information-partners-logo img{width:92px;height:24px}
  .calculator-body .row.middle{align-items:flex-start}
  .cta-box{padding:28px 22px}
}

/* ═══════════ ALIGNMENT PASS: card footer badge + trust row (Allan QA #2) ═══════════ */

/* Partner badge: fully inside the card, comfortable clearance, quiet type */
.lp-axo{display:flex;justify-content:center;margin-top:16px;padding-top:2px}
.lp-axo span{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--lp-slate-2);font-weight:600}
.lp-axo b{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#FFC844;color:#3A2E00;border-radius:6px;padding:4px 9px 3px;font-size:12px;font-weight:800;letter-spacing:.02em;line-height:1;font-style:normal}
.lp-axo b i{font-style:normal;font-size:5.5px;letter-spacing:.34em;font-weight:800;margin-top:1.5px}

/* Trust row: rigid icon column + first-line alignment so multi-line items don't drift */
.trust-row{margin-top:18px;gap:11px 18px;padding:0 8px}
.trust-row li{
  display:grid;grid-template-columns:17px 1fr;gap:0 10px;
  align-items:start;font-size:13px;line-height:1.35;
}
.trust-row li svg{width:16px;height:16px;margin-top:1px}

/* ═══════════ QA ROUND 3 (Allan screenshots: sliders, marquee, beige, cta, footer) ═══════════ */

/* SLIDERS — kill the legacy navy runnable-track that painted over the blue fill,
   and go axolaina-size on thumbs (32px, easy to grab on mobile) */
.calculator-body-slider-range input[type="range"]::-webkit-slider-runnable-track{
  -webkit-appearance:none;background:transparent !important;border:none;height:6px;width:100%;
}
.calculator-body-slider-range input[type="range"]::-moz-range-track{
  background:transparent !important;border:none;height:6px;
}
.calculator-body-slider-range input[type="range"]::-webkit-slider-thumb{
  width:32px;height:32px;margin-top:-13px;border-width:2.5px;
}
.calculator-body-slider-range input[type="range"]::-moz-range-thumb{width:32px;height:32px;border-width:2.5px}
.calculator-body-slider-range input[type="range"]{height:6px;padding:13px 0;background-clip:content-box}
/* breathing room between the two sliders and around the block */
.calculator-body .calculator-body-slider{margin:2px 0 10px}
.calculator-body form[data-pk-step="1"] .row{margin-bottom:14px}

/* MARQUEE — roomier band, bigger boxes, no grayscale wash (light logos stay visible) */
.lp-marq{padding:34px 0}
.lp-marq-track{gap:56px}
.lp-marq-track .information-partners-logo img{
  width:130px;height:30px;filter:none;opacity:.85;
}

/* KILL the legacy beige bands sitewide */
.content{background-color:#fff}
.cta{background:var(--lp-ground)}
.description{background-color:#fff}

/* DESCRIPTION section: balanced two-column rhythm */
.description .description-title{margin-bottom:18px}
.description .description-text{margin-bottom:22px}
.description-image img{width:100%;height:auto;box-shadow:0 14px 40px -16px rgba(16,24,40,.18)}

/* CONTENT section: center-column article rhythm */
.content h3{margin-bottom:16px}
.content p{margin-bottom:18px;max-width:72ch;margin-left:auto;margin-right:auto}
.content-image{margin:26px auto;display:block;box-shadow:0 14px 40px -16px rgba(16,24,40,.18)}

/* CTA BAND — composed inner layout */
.cta-box{padding:44px 48px;text-align:center}
.cta-box-title{margin-bottom:10px}
.cta-box-text{font-size:15px;opacity:.92;max-width:52ch;margin:0 auto 24px}
.cta-box .cta-box-button{display:inline-flex;align-items:center;gap:8px}

/* FOOTER — original logo asset rendered white on the ink background */
.footer-logo{filter:brightness(0) invert(1);opacity:.95}
.footer{padding-top:48px}
.footer .row{row-gap:24px}

@media (max-width:767px){
  .lp-marq{padding:24px 0}
  .lp-marq-track{gap:36px}
  .lp-marq-track .information-partners-logo img{width:104px;height:26px}
  .cta-box{padding:30px 22px}
  .calculator-body-slider-range input[type="range"]::-webkit-slider-thumb{width:34px;height:34px;margin-top:-14px}
  .calculator-body-slider-range input[type="range"]::-moz-range-thumb{width:34px;height:34px}
}

/* ═══════════ DILIGENT SWEEP (2026-07-07, supersedes earlier slider rules) ═══════════ */

/* Kill the huge legacy decorative backdrop behind the calculator (1242×1132 svg).
   NOTE: .calculator-BODY::after (the small axo.png badge straddling the card edge)
   is the ORIGINAL partner mark and stays — Allan: "use the bottom one only". */
.calculator::after{display:none !important}
/* our duplicate text badge is removed from the template; hide any cached remnants */
.lp-axo{display:none !important}

/* SLIDER v3 — robust rendering. Global border-box made the padded 6px input collapse
   (invisible track). New approach: 32px-tall input, gradient painted as a centered
   6px strip; native track transparent at full height; 32px thumb needs no offset. */
.calculator-body-slider-range input[type="range"]{
  height:32px !important;padding:0 !important;margin:2px 0 0;
  background:
    linear-gradient(90deg,
      var(--lp-blue) calc((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000)) * 100%),
      #E7EBF3 calc((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000)) * 100%))
    center / 100% 6px no-repeat !important;
  background-clip:border-box !important;border-radius:99px;
}
.calculator-body-slider-range input[type="range"]::-webkit-slider-runnable-track{
  -webkit-appearance:none;height:32px;background:transparent !important;border:none;
}
.calculator-body-slider-range input[type="range"]::-webkit-slider-thumb{
  width:32px;height:32px;margin-top:0;
}
.calculator-body-slider-range input[type="range"]::-moz-range-track{height:32px;background:transparent !important;border:none}
.calculator-body-slider-range input[type="range"]::-moz-range-thumb{width:32px;height:32px}

/* Trust row must clear the straddling axo badge (hangs ~30px below the card) */
.trust-row{margin-top:46px}

/* Footer fallback columns get list styling */
.footer-list li a{transition:color .15s}

@media (max-width:767px){
  .trust-row{margin-top:44px}
  /* 38px thumb for mobile grabbing (Allan) — input/track grow to 40px so the
     thumb stays centered, and the pulse ring scales with it */
  .calculator-body-slider-range input[type="range"]{height:40px !important}
  .calculator-body-slider-range input[type="range"]::-webkit-slider-runnable-track{height:40px}
  .calculator-body-slider-range input[type="range"]::-webkit-slider-thumb{width:38px;height:38px;margin-top:1px}
  .calculator-body-slider-range input[type="range"]::-moz-range-thumb{width:38px;height:38px}
  .calculator-body-slider-range::after{width:38px;height:38px;left:calc((100% - 38px) * ((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000))) + 19px)}
}

/* ═══════════ CHECKBOXES v2 (2026-07-07, supersedes the 17px rules above) ═══════════
   Legacy drew the checkmark from two animated bars sized for its 22px box; on the
   restyled card that renders as a dated pale square with an overflowing check.
   Modern box: 22px, 7px radius, blue fill + SVG check when ticked. */
.form label.checkbox-label.agreement{padding-left:34px;font-size:13px;color:var(--lp-slate);line-height:1.55;margin-top:14px}
.checkbox-label.agreement input[type="checkbox"]{
  position:absolute;left:0;top:0;width:22px;height:22px;margin:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  background:#fff;border:1.5px solid #D5DCE8;border-radius:7px;
  transition:background-color .15s,border-color .15s,box-shadow .15s;
}
.checkbox-label.agreement input[type="checkbox"]:hover{border-color:var(--lp-blue)}
.checkbox-label.agreement input[type="checkbox"]:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,97,254,.18)}
.checkbox-label.agreement input[type="checkbox"]:checked{
  background:var(--lp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5 10-11'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color:var(--lp-blue);
}
/* legacy check bars off — the SVG above is the checkmark now */
.checkbox-label.agreement input[type="checkbox"]::before,
.checkbox-label.agreement input[type="checkbox"]::after{display:none !important;content:none !important}
.checkbox-label.agreement input[type="checkbox"].checkbox-error{border-color:#E5484D}

/* Terms row is a REQUIRED checkbox again (Allan 2026-07-07) — same look as the
   marketing row; legacy set cursor:default when it was plain text */
.form label.checkbox-label.agreement.calculator-terms-text{cursor:pointer}

/* ═══════════ DURATION STEPPER DUO (2026-07-07, axolaina space-saver) ═══════════
   Monthly-payment pill + laina-aika − / + stepper share one row; replaces the
   second slider block and the separate estimated row. */
.calc-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 12px}
.calc-duo-title{display:block;text-align:center;font-size:13.5px;font-weight:600;color:var(--lp-slate);margin-bottom:8px}
.calc-duo-pill{background:var(--lp-ground);border-radius:99px;height:56px;display:flex;align-items:center;justify-content:center}
.calc-duo-monthly{font-size:19px;font-weight:800;color:var(--lp-ink);font-variant-numeric:tabular-nums}
.calc-duo-stepper{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;justify-content:stretch;gap:2px;padding:0 9px}
.calc-duo-value{text-align:center;font-size:15.5px;font-weight:800;color:var(--lp-ink);white-space:nowrap}
.calc-step-btn{width:38px;height:38px;border-radius:50%;border:1.5px solid #C9D2E0;background:#fff;color:var(--lp-ink);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .15s,color .15s}
.calc-step-btn:hover{border-color:var(--lp-blue);color:var(--lp-blue)}
.calc-step-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,97,254,.18)}
.calc-step-btn:disabled{opacity:.35;cursor:default;border-color:#C9D2E0;color:var(--lp-ink)}
.calc-duo input[data-pk-duration]{display:none !important}
@media (max-width:480px){
  .calc-duo{gap:9px}
  .calc-duo-pill{height:52px}
  .calc-duo-monthly{font-size:17px}
  .calc-duo-value{font-size:14px}
  .calc-step-btn{width:36px;height:36px}
}

/* ═══════════ AMOUNT-THUMB PULSE (2026-07-07) ═══════════
   WebKit won't animate ::-webkit-slider-thumb, so the pulse is a ring on the
   wrapper's ::after, positioned by the same --val/--min/--max vars as the fill
   (mirrored onto the wrapper by syncRangeCss). Stops after first interaction
   (.lp-touched) and under prefers-reduced-motion. */
.calculator-body-slider-range::after{
  content:"";position:absolute;top:50%;
  left:calc((100% - 32px) * ((var(--val,40000) - var(--min,2000)) / (var(--max,70000) - var(--min,2000))) + 16px);
  width:32px;height:32px;border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  animation:lp-thumb-pulse 2.2s ease-out infinite;
}
@keyframes lp-thumb-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,97,254,.32)}
  65%{box-shadow:0 0 0 13px rgba(0,97,254,0)}
  100%{box-shadow:0 0 0 0 rgba(0,97,254,0)}
}
.calculator-body-slider-range.lp-touched::after,
.calculator-body-slider-range:active::after{animation:none}
@media (prefers-reduced-motion: reduce){
  .calculator-body-slider-range::after{animation:none}
}

/* ═══════════ SEGMENTED CONTROL v2 (2026-07-07) ═══════════
   Fixed heights at every breakpoint so the active pill can never outgrow the
   track (a legacy line-height:42px + a mobile min-height once combined to 60px
   inside a 48px track). Geometry is self-contained: track = pill + 2×3px. */
.calculator-body .radio{display:inline-flex;align-items:center;flex-flow:row nowrap;justify-content:flex-start;height:48px;padding:3px;gap:0;background:#EEF1F6;border:0;border-radius:12px}
.calculator-body .radio-button{display:flex;align-items:center;justify-content:center;height:42px;min-height:0;line-height:1;padding:0 26px;margin:0;border:0;border-radius:10px;font-size:14.5px}
@media (max-width:767px){
  .calculator-body .radio{display:flex;width:100%;height:52px}
  .calculator-body .radio-button{flex:1;height:46px;padding:0;font-size:15px;line-height:1}
}

/* ═══════════ CRED-STRIP MOBILE POLISH (2026-07-07) ═══════════
   When the pill wraps to two lines the divider has no job — hide it (it used
   to dangle after "arvostelua"). Segments stay intact and centered. */
@media (max-width:767px){
  .lp-cred{flex-wrap:wrap;row-gap:5px;column-gap:10px}
  .lp-cred > .lp-sep{display:none}
  .lp-cred .stars{white-space:nowrap}
}

/* ═══════════ CONSENT BOXES v3 — topbanker pattern (2026-07-07) ═══════════
   Each consent row is an outlined, tinted card: box border in brand blue,
   26px checkbox inside, ink text. Supersedes the bare-row look above. */
.form label.checkbox-label.agreement{
  display:block;padding:14px 16px 14px 56px;margin-top:12px;
  background:#F6F9FF;border:1.5px solid rgba(0,97,254,.38);border-radius:14px;
  font-size:13px;line-height:1.55;color:var(--lp-ink);
  transition:border-color .15s,background-color .15s;
}
.form label.checkbox-label.agreement:hover{border-color:rgba(0,97,254,.7)}
.checkbox-label.agreement input[type="checkbox"]{
  left:16px;top:14px;width:26px;height:26px;border-radius:8px;
  border:2px solid rgba(0,97,254,.5);
}
.checkbox-label.agreement input[type="checkbox"]:checked{background-size:16px}
/* invalid terms: redden the whole card, not just the box */
.form label.checkbox-label.agreement:has(input.checkbox-error){border-color:#E5484D;background:#FFF8F8}

/* stepper icons: block display kills the baseline offset text glyphs had */
.calc-step-btn svg{display:block}

/* ═══════════ CONTACT BUTTON ICONS (2026-07-07) ═══════════
   The skin's background shorthands wiped the legacy icon images (email-white/
   phone.svg) but the legacy 50px icon padding survived → off-center text and
   iconless pills. Icons return as masked ::before elements painted with
   currentColor, so every state (white-on-blue, ink, blue hover) is automatic. */
.xbutton.email,.xbutton.phone{background-image:none !important;padding:11px 22px}
.xbutton.email::before,.xbutton.phone::before,.header-contact::before{
  content:"";width:17px;height:17px;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--lp-icon) center/contain no-repeat;
  mask:var(--lp-icon) center/contain no-repeat;
}
.xbutton.email::before{--lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='m3 7.5 9 5.8 9-5.8'/%3E%3C/svg%3E")}
.xbutton.phone::before,.header-contact::before{--lp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")}
.header-contact{gap:8px}

/* ═══════════ COOKIEYES REVISIT + LOADING CLEANUP (2026-07-07) ═══════════ */

/* The floating revisit icon overlaid the mobile sticky CTA; consent can be
   reopened via the footer "Evästeasetukset" link (.cky-banner-element). */
.cky-btn-revisit-wrapper{display:none !important}

/* Loading state (step 3): only the progress story — hide the card heading,
   social-proof chips and lainaesimerkki so the panel isn't cluttered. */
.calculator:has([data-pk-calc].is-step3) .calculator-head{display:none}
[data-pk-calc].is-step3 .calculator-body-list,
[data-pk-calc].is-step3 .calculator-body-note{display:none}
[data-pk-calc].is-step3 .calculator-loading{padding:26px 4px 30px}
.calculator-loading-header{font-size:20px;font-weight:750;color:var(--lp-ink);letter-spacing:-.01em}
.calculator-loading-sub{margin-top:8px;font-size:13.5px;color:var(--lp-slate)}
.calculator-loading-steps{margin:22px auto 0;max-width:320px;text-align:left}
.calc-loading-fallback{margin-top:22px}

/* Loading-panel scroll anchor: card top clears the fixed 80px header */
.calculator{scroll-margin-top:96px}

/* ---- A11y: restore visible keyboard focus (audit 2026-08-10) -------------
   The compiled style.css resets a:focus / input:focus / button:focus to
   outline:none. Restore a clear indicator for KEYBOARD focus only
   (:focus-visible), so mouse users see no change. Loads after style.css →
   wins the cascade. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="radio"]:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid rgba(0,97,254,.45) !important;
  outline-offset:2px;
}

/* Hamburger is now a real <button> — strip UA button chrome ONLY. The theme's
   own rules keep controlling display (hidden on desktop, shown on mobile). */
button.header-hamburger{
  background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;
}

/* ── MOBILE above-the-fold declutter (Allan QA 2026-08-10) ──────────────
   Match the axolaina.fi / old-production pattern: compact H1 → slim trust
   line → CALCULATOR visible above the fold; subhead + checkmarks move BELOW
   the calculator. Uses display:contents on the text column so its children
   become orderable siblings of the calculator column. */
@media (max-width:767px){
  .hero-calculator .row.space-between{display:flex;flex-direction:column}
  .hero-calculator .row.space-between > .col-lg-7{display:contents}

  .hero-calculator-title{order:1;margin-top:4px;font-size:30px}

  /* Slim, card-less trust line: stars + rating only (bank count is in the
     subhead below the calc; separator + bank span hidden on phones). */
  .lp-cred{order:2;background:transparent;border:0;box-shadow:none;
    padding:4px 0 0;margin-bottom:0;font-size:12px}
  .lp-cred .lp-sep{display:none}
  .lp-cred > span:last-child{display:none}

  .hero-calculator .row.space-between > .col-lg-5{order:3;margin-top:16px}

  .hero-calculator-text{order:4;margin-top:26px}
  .hero-calculator-list{order:5}

  .hero-calculator{padding-top:14px}
}