/* The Wealth Finder: account pages (log in, register, verify, search, results, advisor).
   The tokens and base components below are copied from index.html so these pages look native to the homepage.
   Keep them in sync with index.html's :root, .btn, .field, .eyebrow and .pill rules. */
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans');font-weight:400 500;
  size-adjust:109.4%;ascent-override:96%;descent-override:32%;line-gap-override:9.1%}
@font-face{font-family:'Poppins Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Liberation Sans Bold');font-weight:600 700;
  size-adjust:104.8%;ascent-override:100.2%;descent-override:33.4%;line-gap-override:9.5%}
:root{
  --primary:#435DFF; --primary-hover:#1D30FF; --primary-deep:#03159D; --gradient-end:#4A63FD; --primary-press:#0B1FC9;
  --primary-50:#F0F4FF; --primary-100:#E1E8FF; --primary-200:#CFDBFF;
  --ink:#020E6A; --ink-strong:#020617; --body:#475569; --label:#0F172A; --muted:#64748B; --muted-soft:#94A3B8;
  --canvas:#FFFFFF; --surface-muted:#F5F5F5;
  --hairline:#E5E5E5; --hairline-input:#CBD5E1;
  --success:#10B981; --error:#DC2626; --error-strong:#B91C1C;
  --grad:linear-gradient(67deg,#03159D 10.59%,#4A63FD 93.98%);
  --font:'Poppins','Poppins Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.2s; --dur:.35s; --dur-slow:.6s; --dur-enter:.8s; --rise:24px;
  /* Derived (not on the homepage): WhatsApp action green. #25D366 (the homepage's WhatsApp icon colour) at the same hue
     and saturation, darkened to 26% lightness so white button text passes WCAG AA (6.1:1; #25D366 itself is 2:1). */
  --wa:#25D366; --wa-deep:#147136;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--canvas);color:var(--body);min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
button{font:inherit;color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:50;padding:10px 16px;border-radius:100px;background:var(--ink);color:#fff;font-size:14px;font-weight:500}
.skip:focus{top:16px}

/* ---------- Navigation (as the homepage) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:20;height:88px;display:flex;align-items:center;justify-content:space-between;
  padding:0 80px;animation:drop var(--dur-enter) var(--ease) both;transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),backdrop-filter var(--dur) var(--ease)}
.nav.scrolled{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(2,14,106,.06)}
.logo{display:flex;align-items:center;border-radius:8px}
.logo:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.logo img{display:block;height:48px;width:auto}
.nav-actions{display:flex;gap:12px;align-items:center}

/* ---------- Buttons (as the homepage) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:100px;white-space:nowrap;
  font:500 15px/24px var(--font);cursor:pointer;border:1px solid transparent;
  transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{background:var(--primary-deep);background-image:var(--grad);color:#fff;box-shadow:0 0 17px 3.4px rgba(74,99,253,.22)}
@media (hover:hover){.btn-primary:hover{filter:brightness(1.08)}}
.btn-primary:active{filter:brightness(.92);transform:scale(.98)}
.btn-secondary{background:var(--canvas);border-color:var(--primary-deep);color:var(--primary-deep)}
@media (hover:hover){.btn-secondary:hover{background:var(--primary-50)}}
.btn-secondary:active{background:var(--primary-100);transform:scale(.98)}
.btn-lg{height:56px;padding:0 40px;font-size:16px}
.btn-roll .roll{display:inline-grid;height:24px;overflow:hidden;line-height:24px}
.btn-roll .roll span{grid-area:1/1;transition:transform var(--dur) var(--ease)}
.btn-roll .roll span+span{transform:translateY(100%)}
@media (hover:hover){
  .btn-roll:not([aria-disabled="true"]):hover .roll span:first-child{transform:translateY(-100%)}
  .btn-roll:not([aria-disabled="true"]):hover .roll span+span{transform:none}
  .btn-roll:not([aria-disabled="true"]):hover .chev{transform:translateX(3px)}
}
.btn-roll .chev{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.btn.is-busy{pointer-events:none;filter:saturate(.85)}
.btn .spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
.btn-secondary .spin{border-color:rgba(3,21,157,.2);border-top-color:var(--primary-deep)}
/* WhatsApp actions: same shape and glow as .btn-primary, in the derived WhatsApp green */
.btn-wa{background:var(--wa-deep);color:#fff;box-shadow:0 0 17px 3.4px rgba(20,113,54,.2)}
@media (hover:hover){.btn-wa:hover{filter:brightness(1.08)}}
.btn-wa:active{filter:brightness(.92);transform:scale(.98)}
.btn .wa-ic{width:20px;height:20px;flex:none}
/* Not ready yet: still focusable and clickable (a click explains what's missing), but reads as unavailable */
.btn[aria-disabled="true"]{opacity:.45;box-shadow:none;cursor:not-allowed;filter:none;transform:none}
.btn-block{width:100%}

/* ---------- Background: the homepage hero's soft centre glow and glass ribs (static), kept off the screen edges ---------- */
.bg{position:fixed;inset:0;z-index:-1;pointer-events:none}
.bg .glow{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 36% 38% at 50% 96%, rgba(112,132,255,.35), transparent 72%),
    radial-gradient(ellipse 60% 40% at 50% 66%, rgba(207,219,255,.9), transparent 75%),
    linear-gradient(180deg,#fff 0%,#fff 30%,var(--primary-50) 100%);
  animation:fadeIn 1.2s var(--ease) both}
.bg .ribs{position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0,rgba(255,255,255,0) 56px,
    rgba(255,255,255,.34) 56px,rgba(255,255,255,.34) 58px,
    rgba(2,14,106,.09) 58px,rgba(2,14,106,.02) 100px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%),linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 40%),linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);mask-composite:intersect}
.bg .ribs-shade{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);mask-image:linear-gradient(90deg,transparent 8%,#000 30%,#000 70%,transparent 92%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 50px,rgba(255,255,255,.28) 100px);
  mix-blend-mode:soft-light}
/* Prism (flow/prism.js): WebGL glow on the log-in and sign-up steps. Drawn at 85% resolution and scaled up (it’s soft by design) */
.bg .prism{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease);
  /* Edges and the footer area fade out, so text outside the card always sits on near-white */
  -webkit-mask-image:radial-gradient(ellipse 46% 64% at 50% 50%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 46% 64% at 50% 50%,#000 45%,transparent 100%)}
.bg .prism.on{opacity:1}
.bg .fade-top{position:absolute;inset:0;background:linear-gradient(180deg,#fff 0,rgba(255,255,255,.92) 12%,rgba(255,255,255,0) 52%)}
.bg .fade-corners{position:absolute;inset:0;
  background:radial-gradient(circle at 0 100%,#fff 0,rgba(255,255,255,0) 14%),radial-gradient(circle at 100% 100%,#fff 0,rgba(255,255,255,0) 14%)}

/* ---------- Page layout ---------- */
.flow{flex:1;width:100%;padding:150px 24px 72px}
.view{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.view.wide{max-width:1040px}
.view:focus{outline:none}
/* Entrance: the homepage hero's .8s rise, staggered by --d (set per element) */
.rise{animation:rise var(--dur-enter) var(--ease) var(--d,0s) both}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.6px;color:var(--ink)}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:6px;
  background:radial-gradient(circle 3px at 3px 3px,var(--ink) 98%,transparent) no-repeat,linear-gradient(var(--ink),var(--ink)) 6px 2.5px/16px 1px no-repeat}
.eyebrow::after{transform:scaleX(-1)}
.flow h1{margin-top:16px;font-weight:600;font-size:40px;line-height:48px;letter-spacing:-.8px;color:var(--ink);text-wrap:balance}
.flow h1:focus{outline:none}
.flow .sub{margin-top:12px;max-width:460px;font-size:16px;line-height:24px;color:var(--body);text-wrap:pretty}
.flow .sub strong{color:var(--ink);font-weight:500;white-space:nowrap}

.pill{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:100px;background:var(--primary-50);
  border:1px solid var(--primary-100);font-size:14px;line-height:18px;font-weight:500;color:var(--ink)}
.chip{margin-top:20px;max-width:100%;font-weight:400;color:var(--body);text-align:left}
.chip strong{font-weight:500;color:var(--ink)}
.chip svg{width:16px;height:16px;flex:none;color:var(--primary)}

/* Card: the homepage search card */
.card{margin-top:32px;width:100%;background:rgba(255,255,255,.95);border:1px solid var(--hairline);border-radius:24px;padding:28px;
  box-shadow:0 24px 64px rgba(2,14,106,.12);text-align:left}

/* ---------- Fields (as the homepage) ---------- */
.field+.field,.alert:not([hidden])+.field,.alert:not([hidden])+.otp{margin-top:20px}
.field label,.label{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--label);margin-bottom:8px}
.field label .req{color:var(--error)}
.field label .opt{color:var(--muted-soft);font-weight:400}
.input,.field input{width:100%;height:56px;padding:12px 16px;border:1px solid var(--hairline-input);border-radius:12px;background:var(--canvas);
  font:400 16px/24px var(--font);color:var(--ink-strong);transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.field input::placeholder{color:var(--muted-soft)}
.field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,93,255,.15)}
.field input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.field .help{display:block;margin-top:6px;font-size:13px;line-height:18px;color:var(--muted)}
/* +91 phone field: one bordered box with a fixed country prefix */
.phone{display:flex;align-items:stretch;height:56px;border:1px solid var(--hairline-input);border-radius:12px;background:var(--canvas);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}
.phone:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,93,255,.15)}
.phone.invalid{border-color:var(--error);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.phone-cc{display:flex;align-items:center;padding:0 14px 0 16px;border-right:1px solid var(--hairline);font-size:16px;font-weight:500;color:var(--ink)}
.field .phone input{height:100%;border:0;border-radius:0 12px 12px 0;box-shadow:none;letter-spacing:.5px}
.field .phone input:focus,.field .phone input[aria-invalid="true"]{box-shadow:none}

/* Inline error: icon + text, never colour alone */
.err{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--error-strong);animation:fadeIn var(--dur) var(--ease) both}
.err[hidden]{display:none}
.err svg,.alert svg,.note svg{width:18px;height:18px;flex:none;margin-top:1px}
/* Form-level message (one at a time) */
.alert{display:flex;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--error);background:rgba(220,38,38,.05);
  font-size:14px;line-height:20px;color:var(--error-strong);font-weight:500;animation:fadeIn var(--dur) var(--ease) both}
.alert[hidden],.note[hidden]{display:none}
.alert:focus{outline:2px solid var(--error);outline-offset:2px}
.alert a,.alert button{color:inherit;text-decoration:underline;text-underline-offset:2px;font-weight:600;background:none;border:0;cursor:pointer;padding:0}
.alert p+p{margin-top:4px}
.note{display:flex;gap:10px;padding:14px 16px;border-radius:12px;border:1px solid var(--primary-100);background:var(--primary-50);
  font-size:14px;line-height:20px;color:var(--ink);animation:fadeIn var(--dur) var(--ease) both}
.note a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.note svg{color:var(--primary)}

/* Consent: 24px box, whole label tappable */
.field label.check,.check{display:grid;margin-bottom:0;font-weight:400;grid-template-columns:24px 1fr;gap:12px;align-items:start;cursor:pointer;font-size:14px;line-height:22px;color:var(--body)}
.check input{width:24px;height:24px;margin:0;accent-color:var(--primary-deep);cursor:pointer}
.check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.check a{color:var(--primary-deep);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.check.invalid input{outline:2px solid var(--error);outline-offset:2px}

.actions{margin-top:24px}
.field+.actions,.check+.actions{margin-top:28px}
.divider{height:1px;margin:28px 0 24px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--primary-200) 50%,rgba(255,255,255,0) 100%)}
.alt{text-align:center}
.alt>p{font-size:15px;line-height:22px;color:var(--body);margin-bottom:12px}
.textlink{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;
  font:500 15px/22px var(--font);color:var(--primary-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-radius:6px}
.textlink:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (hover:hover){.textlink:hover{color:var(--primary-hover)}}
.alt-line{margin-top:20px;text-align:center;font-size:15px;line-height:22px;color:var(--body)}

/* Two-step indicator: Your details → Verify */
.steps{display:flex;align-items:center;gap:10px;list-style:none;font-size:13px;line-height:18px;font-weight:500;color:var(--muted)}
.steps li{display:flex;align-items:center;gap:8px}
.steps .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--hairline-input);background:var(--canvas);transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.steps [aria-current="step"]{color:var(--ink)}
.steps [aria-current="step"] .dot{border-color:var(--primary-deep);background:var(--primary-deep);box-shadow:0 0 0 4px var(--primary-100)}
.steps .done .dot{border-color:var(--primary-deep);background:var(--primary-deep)}
.steps .arrow{width:16px;height:16px;color:var(--muted-soft)}
.steps+.eyebrow{margin-top:18px}

/* ---------- One-time code ---------- */
.otp{border:0;min-width:0}
.otp-boxes{display:grid;grid-template-columns:repeat(6,minmax(0,56px));justify-content:center;gap:10px}
.otp-boxes input{width:100%;height:64px;padding:0;text-align:center;border:1px solid var(--hairline-input);border-radius:12px;background:var(--canvas);
  font:600 24px/1 var(--font);color:var(--ink);caret-color:var(--primary);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.otp-boxes input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(67,93,255,.15)}
.otp-boxes input.filled{border-color:var(--primary-200);background:var(--primary-50)}
.otp.invalid input{border-color:var(--error);background:var(--canvas)}
.otp.invalid .otp-boxes{animation:shake .4s var(--ease)}
.otp input:disabled{background:var(--surface-muted);color:var(--muted)}
.otp .err{justify-content:center}
.resend{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:15px;line-height:22px;color:var(--body)}
.resend .wait{display:inline-block;line-height:44px;font-variant-numeric:tabular-nums}
.verify-note{margin-top:20px}

/* ---------- S1 search form ---------- */
.view.mid{max-width:880px}
.sec{border:0;min-width:0}
.sec legend{padding:0;margin-bottom:20px}
.sec h2{font-size:20px;line-height:30px;font-weight:600;color:var(--ink)}
.search-card .divider{margin:28px 0}
.sec legend{float:left;width:100%}   /* a floated legend sits in the flow like a normal heading */
.sec legend+*{clear:both}
.sec .sec-intro{margin:-8px 0 20px;font-size:15px;line-height:23px;color:var(--body)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.grid2 .field+.field{margin-top:0}
.select{position:relative}
.select input{padding-right:40px}
.select svg{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.search-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.microcopy{font-size:14px;line-height:20px;color:var(--muted)}
.search-card .alert{margin-bottom:24px}
/* Daily searches: five dots inside the chip */
.quota-slot{min-height:38px;margin-top:20px;display:flex;justify-content:center}
.quota-slot .chip{margin-top:0}
.qdots{display:inline-flex;gap:4px}
.qdots i{width:8px;height:8px;border-radius:50%;background:var(--primary-200)}
.qdots i.on{background:var(--primary-deep)}
.quota.out{background:rgba(220,38,38,.05);border-color:var(--error);color:var(--error-strong)}
.quota.out strong,.quota.out span{color:var(--error-strong)}
.quota.out .qdots i{background:rgba(220,38,38,.25)}


/* ---------- S2 results + S3 result card ---------- */
.rc-list{width:100%;max-width:760px;margin:28px auto 0;display:flex;flex-direction:column;gap:20px}
.results-again{margin-top:28px}
/* The card is two pieces, body and stub, joined at a perforation with a half-notch each side; the drop shadow follows the notches */
.rc{width:100%;text-align:left;filter:drop-shadow(0 12px 24px rgba(2,14,106,.06)) drop-shadow(0 1px 2px rgba(2,14,106,.04))}
.rc-body,.rc-stub{position:relative;background:var(--canvas);
  -webkit-mask:radial-gradient(circle 14px at 0 var(--ny),transparent 13.5px,#000 14px),radial-gradient(circle 14px at 100% var(--ny),transparent 13.5px,#000 14px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 14px at 0 var(--ny),transparent 13.5px,#000 14px),radial-gradient(circle 14px at 100% var(--ny),transparent 13.5px,#000 14px);
  mask-composite:intersect}
.rc-body{--ny:100%;border-radius:20px 20px 0 0;padding:24px 24px 20px}
.rc-stub{--ny:0%;border-radius:0 0 20px 20px;padding:16px 24px 20px}
/* Perforation: a dashed line between the two notches */
.rc-stub .perf{position:absolute;top:-1px;left:20px;right:20px;border-top:2px dashed var(--primary-200)}
.rc-stub .btn{position:relative;z-index:1}

.rc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rc-who{min-width:0}
.rc-kicker{font-size:12px;line-height:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--primary-deep)}
.rc-name{margin-top:6px;font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.4px;color:var(--ink);overflow-wrap:anywhere}
.rc-rel{margin-top:2px;font-size:15px;line-height:22px;color:var(--body)}
.rc-level{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;line-height:18px;font-weight:600;color:var(--ink)}
.rc-ring{width:52px;height:52px}
.rc-ring circle{fill:none;stroke:var(--primary-100);stroke-width:7;stroke-linecap:round}
.rc-ring circle.on{stroke:var(--primary)}
.rc-facts{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;padding:14px 18px;border-radius:14px;background:var(--primary-50)}
.rc-label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--body)}
.rc-label-plain{text-transform:none;letter-spacing:0;font-size:13px}
.rc-value{margin-top:4px;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.rc-loc{margin-top:4px;font-size:16px;line-height:24px;font-weight:500;color:var(--ink);letter-spacing:.3px;overflow-wrap:anywhere}
.rc-desc{margin-top:16px;font-size:15px;line-height:23px;color:var(--body)}
.rc-why{margin-top:18px;font-size:15px;line-height:24px;font-weight:600;color:var(--ink)}
.tiles{margin-top:10px;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--hairline);border-radius:12px;background:var(--canvas)}
.tile-ic{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:600;line-height:1}
.tile.is-matched .tile-ic{background:var(--primary-deep);color:#fff}
.tile.is-unchecked .tile-ic{background:var(--canvas);color:var(--ink);border:1.5px dashed var(--primary-200)}
.tile-txt{display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:19px;color:var(--body);min-width:0}
.tile-txt strong{font-weight:600;color:var(--ink)}
.rc-ask[aria-disabled="true"]{opacity:1;background:var(--surface-muted);background-image:none;color:var(--body);border-color:var(--hairline);box-shadow:none;cursor:default;filter:none;transform:none}

.results-count{margin-top:20px}
.ask-err{margin-top:12px}

/* ---------- S4 request confirmation (native <dialog>) ---------- */
.twf-dialog{width:min(600px,calc(100% - 24px));max-height:calc(100% - 24px);margin:auto;padding:0;border:2px solid var(--primary-deep);border-radius:24px;
  background:var(--canvas);color:var(--body);box-shadow:0 24px 64px rgba(2,14,106,.18);overflow:auto;overscroll-behavior:contain}
.twf-dialog[open]{animation:dlgIn .28s var(--ease) both}
.twf-dialog::backdrop{background:rgba(2,14,106,.32);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeOnly .28s var(--ease) both}
.twf-dialog.closing{animation:dlgOut .2s var(--ease) both}
.twf-dialog.closing::backdrop{animation:fadeOnly .2s var(--ease) reverse both}
.dlg-in{position:relative;padding:36px 36px 32px}
.dlg-x{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:1px solid var(--hairline);background:var(--canvas);
  display:grid;place-items:center;cursor:pointer;color:var(--ink);transition:background-color var(--dur-fast) var(--ease)}
.dlg-x svg{width:18px;height:18px}
.dlg-x:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media (hover:hover){.dlg-x:hover{background:var(--primary-50)}}
.dlg-in h2{padding-right:56px;font-size:26px;line-height:34px;font-weight:600;letter-spacing:-.4px;color:var(--ink);text-wrap:balance}
.dlg-in h2:focus{outline:none}
.dlg-lead{margin-top:12px;font-size:16px;line-height:26px;color:var(--body)}
.dlg-lead strong{color:var(--ink);font-weight:500;white-space:nowrap}
.dlg-sec{margin-top:24px;padding-top:24px;border-top:1px solid var(--hairline)}
.dlg-sec h3{font-size:17px;line-height:26px;font-weight:600;color:var(--ink)}
.dlg-sec>p{margin-top:4px;font-size:15px;line-height:23px;color:var(--body)}
.ref-row{margin-top:14px;display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.ref-box{flex:1 1 220px;display:flex;align-items:center;min-height:56px;padding:0 18px;border:1.5px dashed var(--primary-200);border-radius:12px;background:var(--primary-50);
  font:600 20px/1 var(--font);letter-spacing:1.5px;color:var(--ink);font-variant-numeric:tabular-nums;user-select:all;-webkit-user-select:all}
.ref-row .btn{flex:0 0 auto}
.dlg-list{margin-top:14px;list-style:none;display:flex;flex-direction:column;gap:10px}
.dlg-list li{position:relative;padding-left:22px;font-size:15px;line-height:23px;color:var(--body)}
.dlg-list li::before{content:"";position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
html.dlg-open{overflow:hidden}
@keyframes dlgIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes dlgOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97)}}
@keyframes fadeOnly{from{opacity:0}to{opacity:1}}

/* ---------- Account menu (logged in) ---------- */
.acct{position:relative}
.acct-btn{gap:10px;padding:0 18px 0 8px}
.acct-btn .av{width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:600}
.acct-btn .caret{width:14px;height:14px;transition:transform var(--dur) var(--ease)}
.acct-btn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:8px;list-style:none;background:var(--canvas);border:1px solid var(--hairline);
  border-radius:16px;box-shadow:0 24px 64px rgba(2,14,106,.12);transform-origin:top right;animation:menuIn var(--dur) var(--ease) both}
.acct-menu[hidden]{display:none}
.acct-menu a,.acct-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:0 14px;border:0;border-radius:10px;background:none;
  font:500 15px/22px var(--font);color:var(--ink);cursor:pointer;text-align:left}
.acct-menu svg{width:18px;height:18px;color:var(--primary)}
.acct-menu a:focus-visible,.acct-menu button:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
@media (hover:hover){.acct-menu a:hover,.acct-menu button:hover{background:var(--primary-50)}}

/* ---------- Footer line ---------- */
.foot{padding:24px;text-align:center;font-size:13px;line-height:20px;color:var(--muted)}
.foot a{color:var(--primary-deep);font-weight:500}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:.001;transform:translateY(var(--rise))}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:.001;transform:translateY(-15px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:.001;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- Responsive (the homepage's breakpoints) ---------- */
@media (max-width:980px){
  .nav{padding:0 24px;height:72px}
  .flow{padding-top:128px}
}
@media (max-width:640px){
  .logo img{height:36px}
  .nav-actions .btn{height:40px;padding:0 18px;font-size:14px}
  .nav-actions .acct-btn{padding:0 14px 0 6px}
  .acct-btn .av{width:28px;height:28px;font-size:12px}
}
@media (max-width:760px){
  .flow{padding:104px 16px 40px}
  .flow h1{font-size:26px;line-height:34px;letter-spacing:-.52px}
  .flow .sub{font-size:15px;line-height:23px}
  .card{margin-top:24px;padding:20px;border-radius:20px}
  .pill{font-size:13px;padding:8px 16px}
  .otp-boxes{gap:8px}
  .otp-boxes input{height:58px;font-size:22px}
  .card .btn-lg{padding:0 20px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .search-actions{flex-direction:column;align-items:stretch;gap:10px;text-align:center}
  .search-actions .btn{width:100%}
  .search-card .divider{margin:24px 0}
  .rc-list{margin-top:20px;gap:16px}
  .rc-body{padding:20px 18px 18px}
  .rc-stub{padding:14px 18px 18px}
  .rc-name{font-size:21px;line-height:28px}
  .rc-ring{width:44px;height:44px}
  .rc-facts{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px}
  .rc-value{font-size:26px;line-height:32px}
  .tiles{grid-template-columns:minmax(0,1fr);gap:8px}
  .tile{padding:10px 12px;align-items:center}
  .results-again .btn{width:100%}
  .results-again{width:100%}
  .dlg-in{padding:28px 20px 24px}
  .dlg-x{top:12px;right:12px}
  .dlg-in h2{font-size:22px;line-height:30px;padding-right:52px}
  .ref-row .btn{width:100%}
  .actions.sticky{margin:16px -20px 0;padding:12px 20px}
}
/* Phones, while typing: keep the main action in view above the on-screen keyboard (offset set from visualViewport in flow.js) */
@media (max-width:760px) and (pointer:coarse){
  form:focus-within .actions.sticky{position:sticky;bottom:var(--kb,0px);z-index:2;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 14px)}
}
@media (max-width:360px){
  .acct-btn .num{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}