/* =========================================
   ELIGIBILITY CHECKER
   Page-level styles for /tools/eligibility-checker (tools/eligibility-checker/index.html).
   Loads after: tailwind, site, launch, consumer-bar.
   Uses the shared tool-page frame from launch.css (.page-hero.emi-focus-hero, .calculator-focus-shell, .tool-card,
   .tool-grid, .result-card) so it matches /tools/emi-calculator.
   Sections: Hero · Form · Thank-you state · What to expect · Explainer · About Rinn
   ========================================= */
.checker-page{--c-navy:#17283e;--c-forest:#0f5c45;--c-line:#dbe6e3;--c-ink:#2b3f55;--c-muted:#53677b;--c-error:#9a3029;--c-ease:cubic-bezier(.22,1,.36,1)}

/* ---------- Hero ---------- */
.checker-page .prose .checker-privacy{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--c-ink);font-size:16px;font-weight:500}
.checker-privacy svg{width:24px;height:24px;fill:#d3ece6;stroke:var(--c-forest);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- Form ---------- */
.checker-main{min-width:0}
.checker-form{display:flex;flex-direction:column;gap:22px}
.checker-form[hidden],.checker-success[hidden]{display:none}
.checker-field label:not(.checker-consent){display:block;margin-bottom:8px;color:var(--c-navy);font-size:15px;font-weight:700;line-height:1.4}

.checker-input{display:flex;align-items:center;min-height:58px;background:#fff;border:1.5px solid #c9d8d4;border-radius:12px;transition:border-color .2s,box-shadow .2s}
.checker-input:hover{border-color:#6dbdb1}
.checker-input:focus-within{border-color:var(--c-forest);outline:3px solid #2563eb;outline-offset:2px}
.checker-prefix{align-self:stretch;display:grid;place-items:center;padding-inline:16px;border-right:1px solid var(--c-line);color:var(--c-muted);font-size:17px;font-weight:600}
.checker-input input{flex:1;min-width:0;height:100%;min-height:55px;padding:0 16px;border:0;background:transparent;color:var(--c-navy);font:inherit;font-size:17px;outline:0;letter-spacing:.01em}
.checker-input input::placeholder{color:#6b7d86;opacity:1;text-overflow:ellipsis}
.checker-input.is-invalid{border-color:var(--c-error)}

.checker-consent{display:flex;align-items:flex-start;gap:14px;color:var(--c-ink);font-size:15px;line-height:1.6;cursor:pointer}
.checker-consent input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--c-forest);cursor:pointer}
.checker-consent input:focus-visible{outline:3px solid #2563eb;outline-offset:3px}
.checker-consent a{color:var(--c-forest);text-decoration:none;text-underline-offset:3px}

.checker-error{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;color:var(--c-error);font-size:14px;font-weight:600;line-height:1.45}
.checker-error[hidden]{display:none}
.checker-error svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.checker-submit{width:100%;min-height:58px;padding-block:15px;border-radius:12px;font-size:17px;letter-spacing:.005em;box-shadow:0 16px 26px -18px rgba(15,92,69,.85)}
.checker-submit:disabled{cursor:progress;opacity:.8}
.checker-submit .icon{width:21px;height:21px}
.checker-free{margin:-6px 0 0;color:var(--c-muted);font-size:14px;text-align:center}

/* ---------- Thank-you state ---------- */
.checker-success{display:flex;flex-direction:column;align-items:flex-start;padding-block:6px;animation:checker-rise .5s var(--c-ease) both}
.checker-success:focus-visible{outline:3px solid #2563eb;outline-offset:6px;border-radius:12px}
.checker-success__icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:20px;border-radius:50%;background:#d9eee9;color:var(--c-forest)}
.checker-success__icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.checker-success h2{margin:0;color:var(--c-navy);font-size:clamp(28px,3.4vw,36px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.checker-success p{margin:10px 0 0;color:var(--c-muted);font-size:17px;line-height:1.55}
.checker-success .checker-success__lead{color:var(--c-navy);font-size:19px;font-weight:600}
.checker-success .checker-submit{margin-top:28px}

/* ---------- What to expect ---------- */
/* Right-hand column, in the slot the EMI calculator uses for its result card. */
.checker-aside h3{margin:0 0 14px;color:var(--c-navy);font-size:16px;font-weight:700}
.checker-points{margin:0;padding:0;list-style:none}
.checker-points li{position:relative;padding:12px 0 12px 30px;border-top:1px solid #cfe2d9;color:var(--c-ink);font-size:15px;line-height:1.5}
.checker-points li:first-child{border-top:0;padding-top:0}
.checker-points li:before{content:'';position:absolute;left:2px;top:17px;width:14px;height:8px;border-left:2px solid var(--c-forest);border-bottom:2px solid var(--c-forest);transform:rotate(-45deg)}
.checker-points li:first-child:before{top:5px}
.checker-aside .text-link{display:inline-flex;align-items:center;min-height:44px;margin-top:10px;font-size:14px;font-weight:600}

/* ---------- Explainer ---------- */
/* Same width and rhythm as the EMI guide on /tools/emi-calculator. */
.checker-explainer{padding-block:clamp(40px,5vw,72px) 0}
.checker-explainer>.shell,.checker-facts>.shell{max-width:1120px}
.checker-explainer__body{max-width:820px}
.checker-explainer__body h2{margin-top:0}
.checker-explainer__body a{color:var(--c-forest);font-weight:600}

/* ---------- About Rinn ---------- */
.checker-facts{padding-block:28px 72px}
.checker-facts .shell>*{max-width:820px}
.checker-facts p{margin:0;color:var(--c-muted);font-size:14px;line-height:1.65}
.checker-facts .review-line{margin-top:10px;font-size:12px}

@keyframes checker-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(max-width:639px){
  .checker-prefix{padding-inline:13px}
  .checker-input input{padding-inline:14px;font-size:16px}
  .checker-input input::placeholder{font-size:14px}
  .checker-facts{padding-bottom:52px}
}
@media(prefers-reduced-motion:reduce){
  .checker-success{animation:none}
  .checker-input{transition:none}
}