/* ==========================================================================
   FriendLoan web origination — design system
   Mobile first. Every page is built from the components below; pages should
   not introduce their own colours, spacing or type sizes.
   ========================================================================== */

:root {
  /* surfaces */
  --ground:       #F4F5F9;
  --surface:      #FFFFFF;
  --surface-2:    #F0F2F8;
  --surface-3:    #E7EAF4;

  /* ink */
  --ink:          #14161D;
  --ink-soft:     #545A6B;
  --ink-faint:    #878EA3;
  --ink-invert:   #FFFFFF;

  /* lines */
  --rule:         #E2E5EE;
  --rule-strong:  #C9CEDD;

  /* brand + states */
  /* FriendLoan brand — playstoreApp/res/values/colors.xml */
  --brand:        #720DA8;   /* colorPrimary   */
  --brand-press:  #5B0A86;   /* pressed        */
  --brand-soft:   #F5E9FC;
  --brand-line:   #E7D1FF;   /* colorPrimaryVlight */

  /* colorAccent #42BC00, darkened for text contrast on white */
  --ok:           #2F7D0B;
  --ok-soft:      #EDF8E4;
  --ok-line:      #BEE3A2;

  --warn:         #8A5A05;
  --warn-soft:    #FBF0DC;
  --warn-line:    #E8D2A4;

  --risk:         #A8322F;
  --risk-soft:    #FAE6E5;
  --risk-line:    #EFC0BE;

  /* type */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* metrics */
  --shell:  480px;
  --radius: 12px;
  --radius-sm: 8px;
  --tap:    52px;

  --shadow-sm: 0 1px 2px rgba(20, 22, 29, .06), 0 1px 3px rgba(20, 22, 29, .04);
  --shadow-md: 0 4px 14px rgba(20, 22, 29, .08);
  --shadow-lg: 0 12px 34px rgba(20, 22, 29, .14);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0E1017;
    --surface:     #171A23;
    --surface-2:   #1E2230;
    --surface-3:   #272C3C;
    --ink:         #E8EAF1;
    --ink-soft:    #A2A9BC;
    --ink-faint:   #767D93;
    --ink-invert:  #0E1017;
    --rule:        #292E3C;
    --rule-strong: #3B4155;
    --brand:       #CE9BEC;
    --brand-press: #DEB7F5;
    --brand-soft:  #2A1738;
    --brand-line:  #4B2C63;
    --ok:          #8FD96A;
    --ok-soft:     #1B2916;
    --ok-line:     #35512A;
    --warn:        #E2B25E;
    --warn-soft:   #2B2417;
    --warn-line:   #4E4126;
    --risk:        #F1918D;
    --risk-soft:   #2D1A1A;
    --risk-line:   #573030;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 14px rgba(0,0,0,.45);
    --shadow-lg: 0 12px 34px rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
  --ground:      #0E1017;
  --surface:     #171A23;
  --surface-2:   #1E2230;
  --surface-3:   #272C3C;
  --ink:         #E8EAF1;
  --ink-soft:    #A2A9BC;
  --ink-faint:   #767D93;
  --ink-invert:  #0E1017;
  --rule:        #292E3C;
  --rule-strong: #3B4155;
  --brand:       #CE9BEC;
  --brand-press: #DEB7F5;
  --brand-soft:  #2A1738;
  --brand-line:  #4B2C63;
  --ok:          #8FD96A;
  --ok-soft:     #1B2916;
  --ok-line:     #35512A;
  --warn:        #E2B25E;
  --warn-soft:   #2B2417;
  --warn-line:   #4E4126;
  --risk:        #F1918D;
  --risk-soft:   #2D1A1A;
  --risk-line:   #573030;
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh; /* mobile: exclude the collapsing URL bar */
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ shell */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) {
  body { padding: 28px 16px 48px; }
  .shell {
    min-height: calc(100vh - 76px);
    min-height: calc(100dvh - 76px);
    border: 1px solid var(--rule);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

/* ----------------------------------------------------------------- topbar */

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 28px; height: 28px;
  flex: 0 0 auto;
  object-fit: contain;
}

/* the full stacked logo, for the first screen */
.brand-hero {
  width: 132px;
  height: auto;
  margin: 0 auto 4px;
  display: block;
}

.topbar-spacer { flex: 1; }

.iconbtn {
  width: 44px; height: 44px; /* 44px minimum touch target */
  border-radius: 9px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 14px;
}
.iconbtn:hover { background: var(--surface-3); text-decoration: none; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
}
.backlink:hover { color: var(--ink); text-decoration: none; }

/* --------------------------------------------------------------- progress */

.progress { padding: 12px 18px 14px; border-bottom: 1px solid var(--rule); background: var(--surface); }

.progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.progress-phase { font-size: 12.5px; font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
.progress-count { font-size: 11.5px; font-family: var(--mono); color: var(--ink-faint); }

.progress-track { display: flex; gap: 4px; }
.progress-seg {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--surface-3);
  overflow: hidden;
}
.progress-seg.done { background: var(--brand); }
.progress-seg.active { background: var(--brand-line); position: relative; }
.progress-seg.active::after {
  content: "";
  position: absolute;
  inset: 0 55% 0 0;
  background: var(--brand);
  border-radius: 99px;
}

/* ------------------------------------------------------------------- main */

.main {
  flex: 1;
  /* bottom padding grows on notched phones so the primary action never sits
     under the home indicator (viewport-fit=cover is declared in layout.php) */
  padding: 24px 18px calc(28px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 20px;
  animation: rise .3s ease both;
}

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

.pagehead { display: flex; flex-direction: column; gap: 7px; }
.pagehead h1 {
  font-size: 23px;
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.021em;
  text-wrap: balance;
}
.pagehead .sub { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
}

/* stacking */
.stack   { display: flex; flex-direction: column; gap: 16px; }
.stack-s { display: flex; flex-direction: column; gap: 10px; }
.stack-l { display: flex; flex-direction: column; gap: 24px; }
.row     { display: flex; gap: 10px; align-items: center; }
/* Paired form fields line up at the top. Centring them means a longer hint on
   one side shunts the other input out of alignment with it. */
.row > .field { align-self: flex-start; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.grow    { flex: 1; }

/* ------------------------------------------------------------------ forms */

.field { display: flex; flex-direction: column; gap: 6px; }

.label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

/* A label that is a sentence rather than a field name — normal weight, so it
   reads as instruction and does not compete with the headline above it. */
.label.plain { font-weight: 400; }

/* A numbered question. .label is a flex row so a field name and its "optional"
   tag can sit at opposite ends; a question carries no such tag, so space-between
   was pushing the question itself hard right, away from its own number. Back to
   normal flow: number and text in one inline run, left aligned, and the text
   wraps under itself rather than under the number — which is what .qnum below
   was drawn for. */
.label.label-q { display: block; }
.label .opt { font-weight: 400; font-size: 12px; color: var(--ink-faint); }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 13px 14px;
  font: inherit;
  font-size: 16px;               /* 16px or iOS zooms on focus */
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  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='%23878EA3' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

/* One answer box per question. The default textarea is sized for an address; a
   question that is answered with "5" does not want six empty lines under it, so
   this one starts small and grows with what is typed (see data-grow in app.js). */
.textarea-sm { min-height: 48px; resize: none; overflow: hidden; }

/* The question's place in the list, in the label rather than beside it, so the
   text wraps under itself and not under the number. */
.qnum {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: 1px;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.input:disabled, .select:disabled { background: var(--surface-2); color: var(--ink-faint); cursor: not-allowed; }
.input.mono { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.input.err, .select.err { border-color: var(--risk); }

/* file inputs need a little less vertical padding to line up with text inputs */
.input[type="file"] { padding: 11px 12px; line-height: 1.4; cursor: pointer; }
.input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}

.hint { font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.hint.err { color: var(--risk); }
.hint.ok  { color: var(--ok); }

/* prefix, e.g. +91 or ₹ */
.inputwrap { position: relative; display: flex; align-items: stretch; }
.inputwrap .prefix {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 1.5px solid var(--rule-strong);
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
  flex: 0 0 auto;
}
.inputwrap .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.inputwrap:focus-within .prefix { border-color: var(--brand); }

/* hl — the field a screen is built around, marked before it is touched rather
   than only on focus. The ring goes on the wrapper so it surrounds the prefix
   and the input as one control; on focus the input paints the same ring in the
   same colour over it, so the two do not read as two. */
.inputwrap.hl { border-radius: var(--radius-sm); box-shadow: 0 0 0 3px var(--brand-soft); }
.inputwrap.hl .prefix,
.inputwrap.hl .input { border-color: var(--brand); }

/* OTP boxes */
.otp { display: flex; gap: 8px; }
.otp input {
  flex: 1;
  min-width: 0;
  height: 56px;
  text-align: center;
  font-size: 21px;
  font-weight: 650;
  font-family: var(--mono);
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius-sm);
}
.otp input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.otp.err input { border-color: var(--risk); }

/* choice cards */
.option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.option:active { transform: scale(.99); }
.option:hover { border-color: var(--rule-strong); background: var(--surface-2); text-decoration: none; }
.option input { margin: 0; flex: 0 0 auto; accent-color: var(--brand); width: 18px; height: 18px; margin-top: 2px; }
.option .otitle { font-size: 15px; font-weight: 620; letter-spacing: -.005em; display: block; }
.option .odesc  { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin-top: 2px; display: block; }
.option .obody  { flex: 1; min-width: 0; }
.option.selected, .option:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.option .oicon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--surface-2);
  display: grid; place-items: center;
  flex: 0 0 auto;
  font-size: 17px;
}

/* A choice in a list of many, rather than a card on its own. The profiling
   questions put five or six of these under one question and several questions
   on one screen, where the full card padding turns a short list into a scroll. */
.option-tight { padding: 10px 12px; align-items: center; gap: 10px; border-radius: var(--radius-sm); }
.option-tight .otitle { font-size: 14px; font-weight: 550; }

/* The box that opens when "Others" is picked. Indented under the list it
   belongs to, so it reads as part of that answer and not as the next question. */
.other-field {
  margin-top: 2px;
  padding-left: 12px;
  border-left: 2px solid var(--brand-line);
}

/* ------------------------------------------------------- language switch */
/* Above the questions, because it changes what they say. Small and quiet: it is
   an escape hatch for the customers who need it, not the point of the screen. */
.langbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.langbar-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-soft);
}
.langbar-label .icn { color: var(--brand); }
.langswitch {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.langbtn {
  min-height: 34px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.langbtn:hover { color: var(--ink); }
/* The chosen one is disabled — there is nothing to switch to — so it has to
   stay legible rather than take the browser's greyed-out treatment. */
.langbtn.is-on,
.langbtn.is-on:disabled {
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--brand-line);
  box-shadow: 0 1px 2px rgba(16, 12, 24, .06);
  cursor: default;
  opacity: 1;
}

/* A language button standing on its own rather than inside a .langswitch pill:
   one tap that swaps the message for its translation. Without the group around
   it the bare .langbtn reads as plain text, so it carries its own outline. */
.langbtn.solo {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 13px;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}
.langbtn.solo:hover { background: var(--surface-2); color: var(--brand); }

/* checkbox row */
.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.check input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--brand); flex: 0 0 auto; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 14px 20px;
  font: inherit;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background .12s, border-color .12s, opacity .12s, transform .08s;
  text-align: center;
  width: 100%;
}
.btn:hover { text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.985); }
.btn .icn { flex: 0 0 auto; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Brand flips light in dark mode, so the label has to flip with it. */
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-press); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-primary { color: var(--ink-invert); }
}
:root[data-theme="dark"] .btn-primary { color: var(--ink-invert); }

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }

.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover:not(:disabled) { background: var(--brand-soft); }

.btn-danger { background: var(--risk); color: #fff; }

.btn-sm { min-height: 44px; padding: 8px 14px; font-size: 13.5px; width: auto; }
.btn-auto { width: auto; }

/* sticky footer action */
.actions {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card.flat { background: var(--surface-2); border-color: transparent; }
.card.tint { background: var(--brand-soft); border-color: var(--brand-line); }

.card-title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* key/value list */
.kv { display: flex; flex-direction: column; gap: 0; }
.kv-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-row dt { color: var(--ink-soft); flex: 0 0 auto; }
.kv-row dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }

/* big number, e.g. the offer */
.figure-lg {
  font-size: 38px;
  font-weight: 750;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* The amount on the prequalify result. Larger than .figure-lg because it is the
   one thing the customer came to this screen for, and it wraps across two lines
   on a narrow phone — a tighter line height keeps that from reading as two
   separate numbers. */
.figure-xl {
  font-size: 34px;
  font-weight: 760;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 400px) { .figure-xl { font-size: 29px; white-space: normal; } }

/* A pagehead that leads with a tick: the icon centres itself, and the words
   under it follow. */
.pagehead.center .tick { margin-bottom: 14px; }

.figure-md {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.figure-cap { font-size: 12.5px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- alerts */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 14px;
  line-height: 1.45;
}
.alert .aicon { flex: 0 0 auto; font-size: 15px; line-height: 1.35; }
.alert-error { background: var(--risk-soft); border-color: var(--risk-line); color: var(--risk); }
.alert-ok    { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.alert-warn  { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.alert-info  { background: var(--brand-soft);border-color: var(--brand-line);color: var(--brand); }
.alert b { font-weight: 650; }

/* ------------------------------------------------------------------ chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 620;
  border: 1px solid;
  white-space: nowrap;
}
.chip-ok    { background: var(--ok-soft);   color: var(--ok);    border-color: var(--ok-line); }
.chip-warn  { background: var(--warn-soft); color: var(--warn);  border-color: var(--warn-line); }
.chip-risk  { background: var(--risk-soft); color: var(--risk);  border-color: var(--risk-line); }
.chip-brand { background: var(--brand-soft);color: var(--brand); border-color: var(--brand-line); }
.chip-mute  { background: var(--surface-2); color: var(--ink-soft); border-color: var(--rule); }

/* --------------------------------------------------------------- listrow */

.listrow {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.listrow + .listrow { margin-top: 8px; }
.listrow .lricon {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: var(--surface-2);
  display: grid; place-items: center;
  flex: 0 0 auto;
  font-size: 15px;
}
.listrow .lrbody { flex: 1; min-width: 0; }
.listrow .lrtitle { display: block; font-size: 14.5px; font-weight: 620; letter-spacing: -.005em; }
.listrow .lrsub { display: block; font-size: 12.5px; color: var(--ink-soft); }
.listrow.ok { border-color: var(--ok-line); background: var(--ok-soft); }

/* ------------------------------------------------------------- wait state */

.spinner {
  width: 20px; height: 20px;
  border: 2.5px solid var(--brand-line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex: 0 0 auto;
}
.spinner.lg { width: 44px; height: 44px; border-width: 3.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

.waitbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 44px 20px;
  text-align: center;
}
.waitbox .wtitle { font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.waitbox .wsub { font-size: 14px; color: var(--ink-soft); max-width: 34ch; line-height: 1.5; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
  border-radius: 6px;
  height: 14px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* --------------------------------------------------------------- success */

.tick {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--ok-soft);
  border: 2px solid var(--ok-line);
  color: var(--ok);
  display: grid; place-items: center;
  font-size: 29px;
  margin: 0 auto;
  animation: pop .4s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.tick.risk { background: var(--risk-soft); border-color: var(--risk-line); color: var(--risk); }
.tick.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

/* ------------------------------------------------------------ alert dialog */

/* A message the customer has to acknowledge before the journey moves on.
   Rendered by the server when the page is in that state, so there is no script
   behind it and nothing to go wrong with the CSP — the Okay button is a plain
   submit. Fixed rather than absolute so it covers the page however far down it
   the customer had scrolled. */

.dialog-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 22, 29, .55);
  animation: scrim-in .18s ease-out both;
}
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }

.dialog {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: center;
  animation: dialog-in .22s cubic-bezier(.2, 1.2, .4, 1) both;
}
@keyframes dialog-in {
  from { transform: translateY(12px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.dialog-body { display: flex; flex-direction: column; gap: 8px; }

.dialog-body h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--ink);
}
.dialog-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* The dialog is the only thing to act on while it is up, so its button is full
   width like every other primary action rather than a small corner control. */
.dialog .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .dialog-scrim, .dialog { animation: none; }
}

/* ------------------------------------------------------------ vendor page */

.vendor {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 12px, var(--ground) 12px, var(--ground) 24px);
}
.vendor-card {
  max-width: 380px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.vendor-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: 99px;
  padding: 4px 11px;
  align-self: center;
}

/* -------------------------------------------------------- landing / welcome */

/* three compact reassurance tiles under the headline */
.benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 13px 8px 11px;
  background: var(--surface-2);
  border-radius: var(--radius);
  text-align: center;
}
.benefit .bicon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 17px;
}
.benefit .blabel {
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--ink);
}
@media (max-width: 339px) {
  .benefits { grid-template-columns: 1fr; }
  .benefit { flex-direction: row; text-align: left; padding: 10px 12px; }
}

/* quiet trust reassurance under the primary action */
.trustnote {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  background: var(--ok-soft);
  border: 1px solid var(--ok-line);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.trustnote .ticon { flex: 0 0 auto; font-size: 14px; line-height: 1.45; }
.trustnote b { font-weight: 650; color: var(--ink); }

/* ------------------------------------------------------------------ misc */

.divider { height: 1px; background: var(--rule); border: 0; margin: 4px 0; }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-faint);
  font-size: 12.5px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

.footnote { font-size: 12px; color: var(--ink-faint); line-height: 1.5; text-align: center; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ icons */

.icn { display: inline-block; vertical-align: middle; flex: 0 0 auto; }

/* icon chips pick up the brand colour so every list feels like one family */
.lricon .icn, .oicon .icn, .bicon .icn { color: var(--brand); }
.listrow.ok .lricon .icn { color: var(--ok); }
.card-title .icn { vertical-align: -3px; margin-right: 6px; color: var(--brand); }
.label .icn { vertical-align: -3.5px; margin-right: 5px; color: var(--brand); }
.eyebrow .icn { vertical-align: -2px; margin-right: 3px; }
.alert .aicon .icn { vertical-align: -3px; }
.trustnote .ticon .icn { vertical-align: -2px; color: var(--ok); }

.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: 13px; }
.center { text-align: center; }
.hidden { display: none !important; }
/* The attribute, not just the class. Its default rule is display:none with the
   weight of a single element selector, so any class that sets a display — and
   .field sets flex — silently wins and the element stays on screen. That is
   exactly what happened to the "Others" box on the profiling questions: marked
   hidden, rendered open, under every question that had a list. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- score meter */

.meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 260px;
  /* max-width on a stretch-aligned flex child pins it to the start, which reads
     as "broken and shoved left". Centre it explicitly. */
  align-self: center;
  margin-inline: auto;
}
.meter-gauge { width: 100%; height: auto; overflow: visible; }
.meter-track {
  fill: none;
  stroke: var(--surface-2);
  stroke-width: 14;
  stroke-linecap: round;
}
.meter-fill {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}
.meter-fill-ok   { stroke: var(--ok); }
.meter-fill-warn { stroke: var(--warn); }
.meter-fill-risk { stroke: var(--risk); }
.meter-number {
  font-family: var(--font);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -.02em;
  fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.meter-range { width: 100%; padding: 0 8px; font-family: var(--mono); }

/* A chip is sized by its text. As a direct child of a column flex container it
   would stretch edge to edge and stop looking like a chip at all. */
.card > .chip { align-self: flex-start; }
.meter + .chip { align-self: center; }

/* prototype banner */
.protobar {
  background: var(--warn-soft);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: 11.5px;
  font-family: var(--mono);
  letter-spacing: .04em;
  padding: 6px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.protobar a { color: var(--warn); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- loading */
/* For waits that belong to somebody else — an account aggregator fetching a
   statement, say — where we have no percentage to show and no honest estimate.
   An indeterminate bar says "still working" without pretending to know more. */
.loading-line {
  margin: 0;
  font-size: .95rem;
  color: var(--ink);
}

.loadbar {
  height: 4px;
  border-radius: 999px;
  background: var(--brand-line);
  overflow: hidden;
  max-width: 20rem;
  margin-inline: auto;
  width: 100%;
}

.loadbar > span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: inherit;
  background: var(--brand);
  animation: loadslide 1.4s ease-in-out infinite;
}

@keyframes loadslide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* A bar that never stops moving is worse than none for anyone who finds motion
   uncomfortable; the text above it already carries the meaning. */
@media (prefers-reduced-motion: reduce) {
  .loadbar > span { animation: none; width: 100%; opacity: .55; }
}


/* ---------------------------------------------------------------- the map */
/* Google Maps, loaded only on the address step. The pin is drawn over the centre
   of the map rather than placed on it: the customer drags the map under a fixed
   pin, which is what every maps app does on a phone and avoids a marker that has
   to be hit exactly. */
.map-wrap { margin: 14px 0 4px; }
.map {
  height: 300px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.map-pin {
  position: absolute;
  left: 50%; top: 50%;
  margin: -30px 0 0 -12px;
  width: 24px; height: 30px;
  pointer-events: none;
  z-index: 500;
  color: var(--brand);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.map-note { margin: 8px 2px 0; font-size: .85rem; color: var(--ink-2); }
.map-readout {
  display: block; margin: 10px 0 2px; padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--surface-2);
}
.map-readout-label {
  display: block; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
}
.map-readout-main { display: block; font-weight: 600; margin-top: 2px; }
.map-readout-sub  { display: block; font-size: .85rem; color: var(--ink-2); }
.map-readout-sub:empty { display: none; }
.map-wrap { position: relative; }

/* The suggestion list. Anchored to the field rather than the page so it tracks
   the input, and scrollable because Places will happily return more rows than
   fit above the fold on a phone. */
.suggest {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: 30; margin-top: 4px;
  max-height: 16rem; overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.field { position: relative; }
.suggest-row {
  display: block; width: 100%; text-align: left;
  padding: 10px 13px; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: inherit; cursor: pointer; font: inherit;
}
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover { background: var(--surface-2); }
.suggest-row .otitle { display: block; font-weight: 600; }
.suggest-row .odesc  { display: block; font-size: .85rem; color: var(--ink-2); margin-top: 1px; }

.option-btn {
  display: block; width: 100%; text-align: left;
  padding: 11px 13px; margin: 0;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface); color: inherit; cursor: pointer;
}
.option-btn:hover { background: var(--surface-2); }
.option-btn .otitle { display: block; font-weight: 600; }
.option-btn .odesc  { display: block; font-size: .87rem; color: var(--ink-2); margin-top: 2px; }