/* =====================================================================
   GEPL account opening - design system, prefix "ob-".
   Same family as the selfcare KYC redesign (navy + gold, light & flat).
   NEVER use class names containing "card" or "box": accessibility-menu.js
   force-styles [class*="card"] / [class*="box"] in dark mode.
   ===================================================================== */
:root {
  --ob-navy: #0b2d55;
  --ob-navy-2: #123f73;
  --ob-navy-3: #1d5aa0;
  --ob-ink: #0f1f33;
  --ob-ink-2: #2c3e55;
  --ob-muted: #5b6b80;
  --ob-faint: #5f6e83;          /* WCAG: 4.8:1 on --ob-soft (was #8a98ab, 2.9:1) */
  --ob-edge: #7a899d;           /* outline of form controls - WCAG 1.4.11 needs 3:1 (3.56 on white) */
  --ob-line: #e6ebf1;
  --ob-line-2: #d6dee9;
  --ob-soft: #f5f7fb;
  --ob-tint: #eef3fa;
  --ob-surface: #ffffff;
  --ob-accent: #f3a712;
  --ob-accent-soft: #fff5de;
  --ob-ok: #0a7d45;             /* 4.7:1 on --ob-ok-soft (was #0f9d58, 3.1:1) */
  --ob-ok-soft: #e7f6ee;
  --ob-err: #c5221f;            /* 5.1:1 on --ob-err-soft */
  --ob-err-soft: #fdeceb;
  --ob-warn: #a15c00;
  --ob-warn-soft: #fff4e0;
  --ob-radius: 18px;
  --ob-radius-sm: 12px;
  --ob-focus: 0 0 0 4px rgba(18, 63, 115, .14);
  --ob-shadow: 0 1px 2px rgba(15, 31, 51, .04), 0 12px 32px -18px rgba(15, 31, 51, .22);
  --ob-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.ob-body {
  margin: 0; font-family: var(--ob-font); font-size: 15px; line-height: 1.55; color: var(--ob-ink);
  background: var(--ob-soft); -webkit-font-smoothing: antialiased; min-height: 100vh;
}
/* Laptops / desktops: the whole journey drawn at 80% (user decision 2026-10-01 - less scrolling).
   Phones and tablets stay at 100% so text and 44px tap targets keep their size. */
@media (min-width: 1024px) {
  html:has(> body.ob-body) { zoom: .8; background: var(--ob-soft); }
  html:has(> body.ob-body) body.ob-body { min-height: 125vh; }
}
.ob-body a { color: var(--ob-navy-2); }
.ob-body button { font-family: inherit; }
.ob-body [hidden], [class*="ob-"].ob-hide { display: none !important; }
/* skip link (WCAG 2.4.1): off-screen until it gets keyboard focus */
.ob-skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px; background: var(--ob-navy); color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none; transition: top .15s; }
.ob-skip:focus { top: 12px; outline: 3px solid var(--ob-accent); outline-offset: 2px; }
#ob-main:focus { outline: none; }
.ob-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Focus: a navy ring for keyboard focus on buttons / links / cards. Text fields are NOT ringed -
   browsers treat a clicked text field as :focus-visible too, which put a thick orange outline on
   every textbox; the field box itself shows focus (.ob-ctl:focus-within - navy border + soft glow). */
.ob-body :focus-visible { outline: 2px solid var(--ob-navy-3); outline-offset: 2px; }
.ob-body input:not([type="checkbox"]):not([type="radio"]):focus,
.ob-body textarea:focus,
.ob-body select:focus { outline: none; }

/* ---------------------------------------------------------------- header */
.ob-top {
  position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ob-line);
}
.ob-top-in { max-width: 1180px; margin: 0 auto; height: 64px; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.ob-logo img { height: 40px; display: block; }
.ob-top-mid { flex: 1; min-width: 0; display: flex; justify-content: center; }
.ob-top-right { display: flex; align-items: center; gap: 6px; }
.ob-help {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  color: var(--ob-ink-2) !important; text-decoration: none; font-size: 13px; font-weight: 500;
  background: none; border: 1px solid var(--ob-line-2); font-family: inherit; cursor: pointer;
}
.ob-help:hover { background: var(--ob-soft); }
.ob-help i { color: var(--ob-navy-2); }
.ob-acc-btn { background: none; border: 0; color: var(--ob-navy-2); padding: 8px; border-radius: 10px; cursor: pointer; font-size: 18px; }
.ob-acc-btn:hover { background: var(--ob-soft); }

/* compact progress in the header (desktop only) */
.ob-hprog { display: none; align-items: center; gap: 12px; font-size: 13px; color: var(--ob-muted); }
.ob-hprog b { color: var(--ob-ink); font-weight: 600; }
.ob-hbar { width: 160px; height: 6px; border-radius: 999px; background: var(--ob-line); overflow: hidden; }
.ob-hbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ob-navy-3), var(--ob-navy)); border-radius: inherit; transition: width .6s ease; }
@media (min-width: 1024px) { .ob-hprog { display: flex; } }

/* ---------------------------------------------------------------- mobile progress */
.ob-mprog { background: #fff; border-bottom: 1px solid var(--ob-line); }
.ob-mprog summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13px;
}
.ob-mprog summary::-webkit-details-marker { display: none; }
.ob-mprog-txt { flex: 1; min-width: 0; }
.ob-mprog-txt b { display: block; font-size: 14px; color: var(--ob-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-mprog-txt span { color: var(--ob-muted); }
.ob-mprog .ob-chev { transition: transform .2s; color: var(--ob-muted); }
.ob-mprog[open] .ob-chev { transform: rotate(180deg); }
.ob-segs { display: flex; gap: 3px; padding: 0 16px 10px; }
.ob-segs span { flex: 1; height: 4px; border-radius: 999px; background: var(--ob-line); }
.ob-segs span.is-done { background: var(--ob-ok); }
.ob-segs span.is-current { background: var(--ob-navy); }
.ob-mprog-list { padding: 4px 12px 12px; border-top: 1px solid var(--ob-line); }
@media (min-width: 1024px) { .ob-mprog { display: none; } }
/* Below 1024px the sticky progress strip above already says "Step 5 of 11 - Bank account", so the
   page's own "STEP 5 - BANK & PROFILE" label would repeat it: hidden there (desktop keeps it). */
@media (max-width: 1023.98px) {
  .ob-has-sticky .ob-eyebrow { display: none; }
  .ob-has-sticky .ob-eyebrow + .ob-h1 { margin-top: 2px; }
}

/* ---------------------------------------------------------------- shell */
.ob-shell { max-width: 1180px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 28px; }
@media (min-width: 1024px) { .ob-shell { grid-template-columns: 296px minmax(0, 1fr); padding-top: 24px; } }
.ob-rail { display: none; }
@media (min-width: 1024px) {
  .ob-rail { display: block; position: sticky; top: 88px; align-self: start; }
}
.ob-rail-in { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-radius); padding: 22px 20px; }
.ob-hello { font-size: 13px; color: var(--ob-muted); }
.ob-hello b { display: block; font-size: 17px; color: var(--ob-ink); font-weight: 600; margin-top: 2px; }
.ob-ringrow { display: flex; align-items: center; gap: 14px; margin: 18px 0 8px; padding: 14px; border-radius: 14px; background: var(--ob-soft); }
.ob-ring { width: 58px; height: 58px; position: relative; flex: none; }
.ob-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ob-ring .t { stroke: var(--ob-line-2); }
.ob-ring .b { stroke: var(--ob-accent); stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.ob-ring em { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 700; color: var(--ob-ink); }
.ob-ringrow p { margin: 0; font-size: 13px; color: var(--ob-muted); }
.ob-ringrow p b { display: block; color: var(--ob-ink); font-size: 15px; }

.ob-phase { margin-top: 14px; }
.ob-phase h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ob-faint); font-weight: 600; }
.ob-step {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 8px; margin: 0 -8px; border-radius: 10px;
  font-size: 14px; color: var(--ob-muted); text-decoration: none !important; border: 0; background: none; width: calc(100% + 16px); text-align: left;
}
.ob-step .ob-sdot {
  width: 24px; height: 24px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--ob-line-2); background: #fff; color: var(--ob-faint);
}
.ob-step.is-done { color: var(--ob-ink-2); }
.ob-step.is-done .ob-sdot { background: var(--ob-ok-soft); border-color: #bfe6cf; color: var(--ob-ok); }
.ob-step.is-current { background: var(--ob-tint); color: var(--ob-navy); font-weight: 600; }
.ob-step.is-current .ob-sdot { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; box-shadow: 0 0 0 4px rgba(243, 167, 18, .28); }
button.ob-step, a.ob-step { cursor: pointer; }
button.ob-step:hover, a.ob-step:hover { background: var(--ob-soft); }
button.ob-step:hover .ob-sedit { opacity: 1; }
.ob-sedit { margin-left: auto; font-size: 12px; color: var(--ob-navy-2); opacity: 0; transition: opacity .15s; }
@media (hover: none) { .ob-sedit { opacity: 1; } }
/* e-Sign: the two forms in signing order (views/preview/esign.php) */
.ob-forms { display: grid; gap: 12px; margin-top: 20px; }
@media (min-width: 720px) { .ob-forms { grid-template-columns: 1fr 1fr; } }
.ob-formcard { border: 1px solid var(--ob-line-2); border-radius: 14px; padding: 16px; background: var(--ob-soft); display: grid; gap: 14px; }
.ob-formcard.is-signed { background: var(--ob-ok-soft); border-color: #bfe6cf; }
.ob-formcard-h { display: flex; align-items: flex-start; gap: 10px; }
.ob-formcard-h > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ob-formcard-h b { font-size: 15px; }
.ob-formcard-h span:not(.ob-ico):not(.ob-tag) { font-size: 12px; color: var(--ob-muted); }
.ob-formcard-h .ob-tag { flex-shrink: 0; white-space: nowrap; }
.ob-formcard-a { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ob-formcard-st { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ob-muted); }
.ob-formcard-st.ok { color: var(--ob-ok); font-weight: 600; }
/* payment page: GEPL Direct plan choice (both plans, one selected) */
.ob-plans[data-choose] .ob-plan { cursor: pointer; }
.ob-plans[data-choose] .ob-plan:not(.is-on) { opacity: .8; }
.ob-plans[data-choose] .ob-plan:focus-visible { outline: 2px solid var(--ob-navy-3); outline-offset: 2px; }
/* type of account (views/preview/account.php) */
.ob-acc-types, .ob-acc-plans { display: grid; gap: 12px; }
@media (min-width: 720px) { .ob-acc-types, .ob-acc-plans { grid-template-columns: 1fr 1fr; } }
.ob-acc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; width: 100%; padding: 18px 18px 16px 18px; border: 1.5px solid var(--ob-edge); border-radius: 16px; background: #fff; font: inherit; color: var(--ob-ink); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.ob-acc-card:hover:not(:disabled) { border-color: var(--ob-navy-3); }
.ob-acc-card:focus-visible { outline: 2px solid var(--ob-navy-3); outline-offset: 2px; }
.ob-acc-card[aria-checked="true"] { border-color: var(--ob-navy); background: var(--ob-tint); box-shadow: 0 0 0 3px rgba(18, 63, 115, .12); }
.ob-acc-card:disabled { cursor: default; opacity: .75; }
.ob-acc-radio { position: absolute; top: 16px; right: 16px; width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--ob-edge); background: #fff; }
.ob-acc-card[aria-checked="true"] .ob-acc-radio { border-color: var(--ob-navy); box-shadow: inset 0 0 0 4px #fff; background: var(--ob-navy); }
.ob-acc-top { display: flex; align-items: center; gap: 10px; min-height: 34px; padding-right: 28px; }
.ob-acc-name { font-size: 17px; }
.ob-acc-kind { display: block; font-size: 12px; font-weight: 600; color: var(--ob-navy-2); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ob-acc-na > span { flex: 1; min-width: 0; }
.ob-acc-sub { font-size: 13px; color: var(--ob-muted); }
.ob-acc-pts { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--ob-ink-2); }
.ob-acc-pts li { display: flex; gap: 8px; align-items: flex-start; line-height: 1.45; }
.ob-acc-pts li > span { flex: 1; min-width: 0; }            /* one text block per point (not one flex item per word) */
.ob-acc-card, .ob-acc-card * { white-space: normal; }
.ob-acc-na { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ob-muted); }
.ob-acc-pts i { color: var(--ob-navy-2); margin-top: 3px; width: 14px; text-align: center; }
.ob-acc-price { font-size: 22px; font-weight: 700; color: var(--ob-navy); margin-top: 4px; }
.ob-acc-price small { font-size: 12px; font-weight: 500; color: var(--ob-muted); }
.ob-acc-note { margin: 0 0 14px; font-size: 14px; color: var(--ob-ink-2); }
.ob-acc-compare { margin-top: 16px; border: 1px solid var(--ob-line); border-radius: 14px; overflow: hidden; font-size: 13px; }
.ob-acc-compare [role="row"] { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; border-top: 1px solid var(--ob-line); }
.ob-acc-compare [role="row"]:first-child { border-top: 0; }
.ob-acc-compare [role="row"] > span { padding: 10px 12px; }
.ob-acc-compare .h { background: var(--ob-soft); font-weight: 600; }
.ob-acc-compare [role="rowheader"] { color: var(--ob-muted); font-weight: 500; }
.ob-acc-compare .is-on { background: var(--ob-tint); color: var(--ob-navy); font-weight: 600; }
@media (max-width: 479.98px) { .ob-acc-compare [role="row"] { grid-template-columns: 1fr 1fr; } .ob-acc-compare [role="rowheader"], .ob-acc-compare .h > span:first-child { grid-column: 1 / -1; padding-bottom: 0; } .ob-acc-compare .h > span:first-child { display: none; }
  /* denser rows on phones (the table was ~630px): same content, less padding */
  .ob-acc-compare [role="row"] > span { padding: 7px 10px; line-height: 1.4; }
  .ob-acc-compare [role="rowheader"] { padding-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } }
.ob-acc-checks { display: grid; gap: 10px; }
.ob-acc-sum { padding-top: 14px; padding-bottom: 14px; }
/* picker - friendly single-choice dropdown (ob-core.js OB.picker; profile step) */
.ob-pick-row { display: grid; gap: 0 14px; }
@media (min-width: 900px) { .ob-pick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ob-picker { position: relative; }
.ob-picker-btn { width: 100%; min-height: 58px; padding: 8px 12px; gap: 12px; text-align: left; font: inherit; cursor: pointer; background: #fff; }
.ob-picker-btn:hover { border-color: var(--ob-navy-3); }
.ob-picker-btn.is-err { border-color: var(--ob-err); }
.ob-picker.is-open .ob-picker-btn { border-color: var(--ob-navy-2); box-shadow: var(--ob-focus); }
.ob-picker-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ob-tint); color: var(--ob-navy-2); font-size: 15px; transition: background .15s, color .15s; }
.ob-picker.is-picked .ob-picker-btn .ob-picker-ico { background: var(--ob-navy); color: #fff; }
.ob-picker-cur { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ob-picker-cur b { font-size: 15px; font-weight: 600; color: var(--ob-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ob-picker-cur small { font-size: 12px; color: var(--ob-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* three across the explanation would be cut off mid-word ("Winnings, awards or lot...") - the label says it */
@media (min-width: 900px) { .ob-pick-row .ob-picker-cur small { display: none; } }
.ob-picker-txt small { font-size: 12px; color: var(--ob-muted); line-height: 1.35; }
.ob-picker-ph { font-size: 14px; color: var(--ob-faint); }
.ob-picker-chev { flex: none; font-size: 12px; color: var(--ob-muted); transition: transform .2s; }
.ob-picker.is-open .ob-picker-chev { transform: rotate(180deg); }
/* every option visible at once - no scroll box inside the page (ob-core.js scrolls the page to fit it) */
.ob-picker-pop { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); max-height: calc(100vh - 110px); overflow-y: auto; padding: 4px; background: #fff; border: 1px solid var(--ob-line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(15, 31, 51, .35); animation: ob-pick-in .14s ease-out; }
.ob-picker.is-up .ob-picker-pop { top: auto; bottom: calc(100% + 6px); }
/* wider than a narrow column so descriptions stay readable; the last column opens to the left */
@media (min-width: 768px) {
  .ob-picker-pop { right: auto; width: max(100%, 340px); max-width: min(380px, calc(100vw - 32px)); }
  .ob-pick-row > .ob-field:last-child .ob-picker-pop { left: auto; right: 0; }
}
@keyframes ob-pick-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ob-picker-pop:focus { outline: none; }
.ob-picker-sheet-h { display: none; }
.ob-picker-opt { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.ob-picker-pop:not(.is-sheet) .ob-picker-opt .ob-picker-ico { width: 32px; height: 32px; font-size: 14px; }
.ob-picker-opt:hover, .ob-picker-opt.is-active { background: var(--ob-soft); }
.ob-picker-opt.is-active { box-shadow: inset 0 0 0 2px var(--ob-navy-3); }
.ob-picker-opt[aria-selected="true"] { background: var(--ob-tint); }
@media (hover: none) { .ob-picker-opt:hover { background: none; } .ob-picker-opt[aria-selected="true"]:hover { background: var(--ob-tint); } }
.ob-picker-opt[aria-selected="true"] .ob-picker-ico { background: var(--ob-navy); color: #fff; }
.ob-picker-txt { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.ob-picker-txt b { font-size: 14px; font-weight: 600; color: var(--ob-ink); }
.ob-picker-tick { flex: none; color: var(--ob-navy); opacity: 0; font-size: 13px; }
.ob-picker-opt[aria-selected="true"] .ob-picker-tick { opacity: 1; }
/* phones: a bottom sheet with big touch targets */
.ob-picker-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(11, 23, 40, .45); animation: ob-fade .15s ease-out; }
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }
.ob-picker-pop.is-sheet { position: fixed; z-index: 89; left: 0; right: 0; top: auto; bottom: 0; max-height: 78vh; border-radius: 20px 20px 0 0; padding: 0 10px calc(12px + env(safe-area-inset-bottom)); animation: ob-pick-up .2s ease-out; }
@keyframes ob-pick-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-picker-pop.is-sheet .ob-picker-sheet-h { display: flex; position: sticky; top: 0; z-index: 1; align-items: center; justify-content: space-between; padding: 14px 6px 10px; background: #fff; border-bottom: 1px solid var(--ob-line); margin-bottom: 6px; font-size: 16px; }
.ob-picker-pop.is-sheet .ob-picker-opt { padding: 12px 10px; }
.ob-picker-pop.is-sheet { width: auto; max-width: none; right: 0; }
@media (prefers-reduced-motion: reduce) { .ob-picker-pop, .ob-picker-backdrop { animation: none; } }
/* nominee summary (views/preview/nominee.php) */
.ob-nomsum-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-btn-ghost.ob-danger { color: var(--ob-err); border-color: #f3c9c6; }
.ob-btn-ghost.ob-danger:hover { background: var(--ob-err-soft); }
.ob-nomcards { display: grid; gap: 12px; }
.ob-nomcard { border: 1px solid var(--ob-line); border-radius: 14px; background: var(--ob-soft); overflow: hidden; }
.ob-nomcard-h { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-bottom: 1px solid var(--ob-line); }
.ob-nomcard-h > div:not(.ob-nomcard-share) { flex: 1; min-width: 0; display: grid; }
.ob-nomcard-h b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-nomcard-h span { font-size: 12px; color: var(--ob-muted); }
.ob-nomcard-no { flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ob-navy-2), var(--ob-navy)); }
.ob-nomcard-share { text-align: right; flex-shrink: 0; display: grid; }
.ob-nomcard-share b { font-size: 18px; color: var(--ob-navy); }
.ob-nomcard-d { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px; font-size: 13px; color: var(--ob-ink-2); }
.ob-nomcard-d i { color: var(--ob-navy-2); margin-right: 6px; }
.ob-nomcard-bar { height: 4px; background: #e1e7ef; }
.ob-nomcard-bar span { display: block; height: 4px; background: var(--ob-accent); }
.ob-nomout > p { margin: 0; font-size: 14px; color: var(--ob-ink-2); }
.ob-nomkept { margin-top: 14px; border: 1px solid var(--ob-line); border-radius: 12px; background: var(--ob-soft); padding: 12px 14px; }
.ob-nomkept-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.ob-nomkept ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.ob-nomkept li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-top: 1px solid var(--ob-line); }
.ob-nomkept li:first-child { border-top: 0; }
.ob-nomkept em { color: var(--ob-muted); font-style: normal; }
.ob-nomkept > p { margin: 8px 0 0; font-size: 12px; color: var(--ob-muted); }
/* nominee "Same as mine": address locked to the applicant's */
.ob-ctl input[readonly], .ob-ctl select.ob-locked { background: var(--ob-soft); color: var(--ob-ink-2); }
.ob-ctl select.ob-locked { pointer-events: none; }
/* revisiting a completed step (Ob_revisit): where the application really is */
.ob-step.is-resume { color: var(--ob-navy); font-weight: 600; }
.ob-step.is-resume .ob-sdot { border-color: var(--ob-accent); color: var(--ob-navy); background: var(--ob-accent-soft); }
.ob-step.is-resume .ob-sedit { opacity: 1; font-weight: 600; }
.ob-revisit { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; background: var(--ob-accent-soft); border: 1px solid #f3d38a; font-size: 13px; color: var(--ob-ink); }
.ob-revisit > i { color: #b7791f; font-size: 16px; }
.ob-revisit > div { flex: 1 1 260px; min-width: 0; }
.ob-revisit .ob-btn { margin-left: auto; }
@media (max-width: 479.98px) { .ob-revisit .ob-btn { width: 100%; justify-content: center; } }
.ob-trust { margin-top: 16px; display: grid; gap: 8px; font-size: 12px; color: var(--ob-muted); }
.ob-trust div { display: flex; gap: 10px; align-items: flex-start; }
.ob-trust i { color: var(--ob-ok); margin-top: 2px; }

/* ---------------------------------------------------------------- main */
.ob-main { min-width: 0; }
.ob-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ob-navy-2); background: var(--ob-tint); padding: 5px 10px; border-radius: 999px;
}
.ob-eyebrow .ob-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ob-accent); }
/* 2026-09-30 spacing pass: the page intro (eyebrow, heading, lead, tips) used ~75 % of a 1366x633
   first screen before the form started; tighter rhythm, same look. */
.ob-h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; margin: 10px 0 4px; color: var(--ob-ink); }
@media (min-width: 768px) { .ob-h1 { font-size: 28px; } }
.ob-lead { margin: 0 0 16px; color: var(--ob-muted); font-size: 15px; max-width: 760px; }
/* Phones: tighter vertical rhythm so each step needs less scrolling */
@media (max-width: 767.98px) {
  .ob-shell { padding-top: 14px; gap: 18px; }
  .ob-h1 { font-size: 22px; margin: 8px 0 4px; }
  .ob-lead { font-size: 14px; margin-bottom: 14px; }
  .ob-body .ob-panel { padding: 16px; }   /* qualified: the base .ob-panel rule comes later in the file */
  .ob-panel + .ob-panel { margin-top: 12px; }
  .ob-panel-h { margin-bottom: 12px; }
  .ob-tipcard { margin-bottom: 14px; padding: 10px 14px; }
  .ob-tipcard:not([open]) { padding-bottom: 10px; }
}
/* Small phones (320-374px): nothing may force a horizontal scroll */
@media (max-width: 374.98px) {
  .ob-top-in { padding: 0 10px; gap: 8px; }
  /* room for the Sign out icon next to Help / accessibility on 320-374px screens */
  .ob-top-right { gap: 4px; }
  .ob-top-right .ob-help { padding: 7px 9px; }
  .ob-logo img { height: 34px; }
}
@media (max-width: 339.98px) {
  .ob-logo img { height: 30px; }
  .ob-shell { padding-left: 10px; padding-right: 10px; }
  .ob-body .ob-panel { padding: 14px; }
  .ob-h1 { font-size: 20px; }
  /* long labels ("Continue to DigiLocker", "e-Sign application form (1 of 2)") wrap instead of overflowing */
  .ob-btn { white-space: normal; text-align: center; line-height: 1.25; padding: 10px 16px; font-size: 15px; }
}
.ob-btn, .ob-btn-ghost { max-width: 100%; }
/* grid / flex children with buttons inside must be allowed to shrink below their content width */
.ob-acc-types > *, .ob-acc-plans > *, .ob-forms > *, .ob-nomcards > * { min-width: 0; }
.ob-acc-card { overflow-wrap: anywhere; }

/* Phones: less scrolling on the longest steps */
@media (max-width: 767.98px) {
  /* plan & payment: the comparison table right below says what differs - the per-plan
     bullet lists are repetition on a small screen */
  .ob-plans[data-choose] .ob-plan ul { display: none; }
  /* an option that isn't available (e.g. BOI for trading-only): name + reason only */
  .ob-acc-card:disabled .ob-acc-pts, .ob-acc-card:disabled .ob-acc-sub { display: none; }
  /* profile answers: denser chips (qualified - this block comes before the base .ob-chip rule) */
  .ob-body .ob-chips { gap: 6px; }
  .ob-body .ob-chips .ob-chip { min-height: 36px; padding: 0 11px; font-size: 13px; }
  .ob-body .ob-field { margin-bottom: 0; }
}
/* nominee editor: short fields two to a row from 360px (names / email / address lines stay full width) */
@media (min-width: 360px) and (max-width: 639.98px) {
  .ob-nom .ob-grid.ob-g2, .ob-nom .ob-grid.ob-g3 { grid-template-columns: 1fr 1fr; }
  .ob-nom .ob-grid .ob-span2,
  .ob-nom .ob-field:has([data-k="addr1"]), .ob-nom .ob-field:has([data-k="addr2"]),
  .ob-nom .ob-field:has([data-k="guardian_name"]) { grid-column: 1 / -1; }
}
.ob-panel { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-radius); padding: 20px; }
@media (min-width: 768px) { .ob-panel { padding: 24px; } }
.ob-panel + .ob-panel { margin-top: 14px; }
.ob-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ob-panel-h h2 { margin: 0; font-size: 17px; font-weight: 600; }
.ob-panel-h p { margin: 2px 0 0; font-size: 13px; color: var(--ob-muted); }
.ob-sub { font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--ob-muted); font-weight: 600; margin: 18px 0 10px; }
.ob-sub:first-child { margin-top: 0; }
.ob-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .ob-g2 { grid-template-columns: 1fr 1fr; } .ob-g3 { grid-template-columns: 1fr 1fr 1fr; } }
.ob-span2 { grid-column: 1 / -1; }
.ob-grid > *, .ob-tiles > * { min-width: 0; }   /* long <select> options must not widen the grid */
.ob-ctl select { width: 100%; text-overflow: ellipsis; }
/* fill-mode 'backwards', not 'both': a transform animation that keeps filling after it ends makes the element
   the containing block of position:fixed children, so the phone action bar (.ob-sticky) stuck to the panel
   and covered its last lines (e-Sign note, 2026-10-07) instead of sitting at the bottom of the screen */
.ob-rise { animation: ob-rise .45s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes ob-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ob-rise { animation: none; } * { transition-duration: 0s !important; } }

/* ---------------------------------------------------------------- form controls */
.ob-field label.ob-lbl, .ob-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ob-ink-2); margin-bottom: 6px; }
.ob-lbl small { font-weight: 400; color: var(--ob-muted); }
.ob-ctl {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; background: #fff;
  border: 1.5px solid var(--ob-edge); border-radius: var(--ob-radius-sm); transition: border-color .15s, box-shadow .15s, background .15s;
}
.ob-ctl:focus-within { border-color: var(--ob-navy-2); box-shadow: var(--ob-focus); }
.ob-ctl > i { color: var(--ob-faint); width: 16px; text-align: center; }
.ob-ctl .ob-pre { color: var(--ob-muted); font-weight: 500; padding-right: 10px; border-right: 1px solid var(--ob-line); }
.ob-ctl input, .ob-ctl select, .ob-ctl textarea {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ob-ink);
}
.ob-ctl textarea { height: auto; padding: 12px 0; resize: vertical; }
.ob-ctl select { cursor: pointer; appearance: none; -webkit-appearance: none; }
.ob-ctl.ob-sel::after { content: "\f078"; font: var(--fa-font-solid, 900 12px "Font Awesome 6 Free"); font-size: 12px; color: var(--ob-faint); }
.ob-ctl input::placeholder, .ob-ctl textarea::placeholder { color: #66758a; }   /* 4.7:1 */
.ob-ctl input[readonly] { color: var(--ob-ink-2); }
.ob-ctl.is-ro { background: var(--ob-soft); }
.ob-ctl.is-err { border-color: var(--ob-err); background: #fffafa; }
.ob-ctl.is-ok { border-color: #9dd8b8; }
.ob-ctl .ob-tick { color: var(--ob-ok); display: none; }
.ob-ctl.is-ok .ob-tick { display: inline; }
.ob-upper input { text-transform: uppercase; letter-spacing: .08em; }
.ob-hint { margin-top: 6px; font-size: 12px; color: var(--ob-muted); }
.ob-ferr { margin-top: 6px; font-size: 12px; color: var(--ob-err); font-weight: 500; display: flex; gap: 6px; }
.ob-ferr:empty { display: none; }
.ob-body input[type=number]::-webkit-outer-spin-button, .ob-body input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ob-body input[type=number] { -moz-appearance: textfield; }

/* prefilled marker */
.ob-pf {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ob-ok);
  background: var(--ob-ok-soft); padding: 3px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}

/* OTP */
.ob-otp { display: flex; gap: 8px; }
.ob-otp input {
  width: 100%; max-width: 52px; height: 56px; text-align: center; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1.5px solid var(--ob-edge); border-radius: 12px; outline: 0; background: #fff; color: var(--ob-ink); transition: border-color .15s, box-shadow .15s;
}
.ob-otp input:focus { border-color: var(--ob-navy-2); box-shadow: var(--ob-focus); }
.ob-otp.is-err input { border-color: var(--ob-err); animation: ob-shake .35s; }
.ob-otp.is-ok input { border-color: var(--ob-ok); background: var(--ob-ok-soft); }
@keyframes ob-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.ob-otp-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--ob-muted); flex-wrap: wrap; }
.ob-linkbtn { background: none; border: 0; padding: 0; color: var(--ob-navy-2); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ob-linkbtn:disabled { color: var(--ob-faint); cursor: default; text-decoration: none; }

/* choice chips (radio-like groups) */
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1.5px solid var(--ob-edge); background: #fff; font-size: 14px; font-weight: 500; color: var(--ob-ink-2); transition: all .15s;
}
.ob-chip:hover { border-color: var(--ob-navy-3); }
.ob-chip.is-on, .ob-chip[aria-checked="true"] { background: var(--ob-navy); border-color: var(--ob-navy); color: #fff; }
.ob-chip.is-on::before, .ob-chip[aria-checked="true"]::before { content: "\f00c"; font: 900 11px "Font Awesome 6 Free"; }

/* switch */
.ob-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; font-weight: 500; }
.ob-switch input { position: absolute; opacity: 0; }
.ob-switch .ob-track { width: 44px; height: 26px; border-radius: 999px; background: var(--ob-line-2); position: relative; transition: background .2s; flex: none; }
.ob-switch .ob-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.ob-switch input:checked + .ob-track { background: var(--ob-navy); }
.ob-switch input:checked + .ob-track::after { transform: translateX(18px); }
.ob-switch input:focus-visible + .ob-track { box-shadow: var(--ob-focus); }

/* checkbox line */
.ob-tick-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ob-muted); cursor: pointer; }
.ob-tick-line input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--ob-navy); flex: none; }

/* ---------------------------------------------------------------- buttons */
.ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 14px;
  border: 0; background: var(--ob-navy); color: #fff !important; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none !important;
  transition: background .15s, transform .1s, opacity .15s; white-space: nowrap;
}
.ob-btn:hover { background: var(--ob-navy-2); }
.ob-btn:active { transform: translateY(1px); }
.ob-btn:disabled, .ob-btn.is-busy { opacity: .6; cursor: not-allowed; }
.ob-btn.is-busy { cursor: progress; }
.ob-btn.ob-ok { background: var(--ob-ok); }
.ob-btn-block { width: 100%; }
.ob-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 12px; cursor: pointer;
  background: #fff; border: 1.5px solid var(--ob-line-2); color: var(--ob-ink-2) !important; font-size: 14px; font-weight: 600; text-decoration: none !important;
}
.ob-btn-ghost:hover { border-color: var(--ob-navy-3); color: var(--ob-navy) !important; }
.ob-btn-ghost:disabled { opacity: .55; cursor: not-allowed; }
.ob-btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.ob-spin { width: 18px; height: 18px; border-radius: 999px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: ob-rot .7s linear infinite; flex: none; }
.ob-spin.dark { border-color: rgba(18, 63, 115, .2); border-top-color: var(--ob-navy-2); }
@keyframes ob-rot { to { transform: rotate(360deg); } }

/* action bar: fixed bottom on phones, inline on desktop */
.ob-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.ob-actions .ob-back { color: var(--ob-muted) !important; font-size: 14px; font-weight: 500; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; background: none; border: 0; cursor: pointer; padding: 8px 4px; }
.ob-actions .ob-back:hover { color: var(--ob-navy) !important; }
.ob-actions .ob-grow { flex: 1; }
@media (max-width: 767.98px) {
  .ob-actions.ob-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; margin: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--ob-line); box-shadow: 0 -12px 30px -20px rgba(15, 31, 51, .35);
  }
  .ob-actions.ob-sticky .ob-btn { flex: 1; }
  .ob-has-sticky { padding-bottom: 110px; }
}

/* ---------------------------------------------------------------- alerts, rows, badges */
.ob-alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.ob-alert i { margin-top: 3px; }
.ob-alert b { font-weight: 600; }
.ob-alert.info { background: var(--ob-tint); color: var(--ob-navy); }
.ob-alert.ok { background: var(--ob-ok-soft); color: #0b6b3c; }
.ob-alert.warn { background: var(--ob-warn-soft); color: var(--ob-warn); }
.ob-alert.err { background: var(--ob-err-soft); color: #a3231b; }
.ob-alert a { color: inherit; font-weight: 600; }
.ob-msg:empty { display: none; }
.ob-msg { margin-top: 14px; }

.ob-rows { border: 1px solid var(--ob-line); border-radius: 14px; overflow: hidden; }
.ob-rowi { display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-size: 14px; }
.ob-rowi + .ob-rowi { border-top: 1px solid var(--ob-line); }
.ob-rowi .k { color: var(--ob-muted); flex: 1; min-width: 0; }
.ob-rowi .v { font-weight: 600; color: var(--ob-ink); text-align: right; word-break: break-word; }
/* address row: label on top, the address left-aligned on its own lines (care of / street / place) */
.ob-aadhaar-photo { width: 64px; height: 80px; object-fit: cover; border-radius: 10px; border: 1px solid var(--ob-line); background: var(--ob-soft); flex: none; }
.ob-rowi.ob-rowi-addr { flex-direction: column; align-items: stretch; gap: 4px; }
/* every address line (care of / street / place) in the same style as the other values - the care-of
   line must not look like part of the grey "Permanent address" label */
.ob-rowi .ob-addr { font-style: normal; text-align: left; display: flex; flex-direction: column; gap: 2px; font-weight: 600; color: var(--ob-ink); line-height: 1.5; }
.ob-mono { font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.ob-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ob-tag.ok { background: var(--ob-ok-soft); color: var(--ob-ok); }
.ob-tag.err { background: var(--ob-err-soft); color: var(--ob-err); }
.ob-tag.wait { background: var(--ob-tint); color: var(--ob-navy-2); }
.ob-tag.warn { background: var(--ob-warn-soft); color: var(--ob-warn); }

/* ---------------------------------------------------------------- selectable tiles */
.ob-tiles { display: grid; gap: 12px; }
@media (min-width: 640px) { .ob-tiles.two { grid-template-columns: 1fr 1fr; } }
.ob-tile {
  position: relative; display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; padding: 16px; border-radius: 16px;
  border: 1.5px solid var(--ob-edge); background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; font: inherit; color: inherit;
}
.ob-tile:hover { border-color: var(--ob-navy-3); }
.ob-tile.is-on, .ob-tile[aria-checked="true"] { border-color: var(--ob-navy); box-shadow: var(--ob-focus); background: #fbfdff; }
.ob-tile .ob-radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--ob-edge); flex: none; margin-top: 2px; position: relative; }
.ob-tile.is-on .ob-radio, .ob-tile[aria-checked="true"] .ob-radio { border-color: var(--ob-navy); }
.ob-tile.is-on .ob-radio::after, .ob-tile[aria-checked="true"] .ob-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ob-navy); }
.ob-tile h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ob-tile p { margin: 2px 0 0; font-size: 13px; color: var(--ob-muted); }
.ob-ico {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--ob-tint); color: var(--ob-navy-2); font-size: 17px;
}
.ob-ico.ok { background: var(--ob-ok-soft); color: var(--ob-ok); }
.ob-ico.gold { background: var(--ob-accent-soft); color: #9a6200; }

/* ---------------------------------------------------------------- upload */
.ob-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 26px 18px; cursor: pointer;
  border: 2px dashed var(--ob-edge); border-radius: 16px; background: #fbfcfe; transition: border-color .15s, background .15s;
}
.ob-drop:hover, .ob-drop.is-over { border-color: var(--ob-navy-2); background: #f5f8fd; }
.ob-drop.is-busy { opacity: .65; pointer-events: none; cursor: progress; }
.ob-drop b { font-size: 15px; color: var(--ob-ink); }
.ob-drop span { font-size: 12px; color: var(--ob-muted); }
.ob-drop .ob-ico { width: 48px; height: 48px; font-size: 19px; }
.ob-drop-sm { padding: 16px; gap: 4px; margin-top: 12px; }
.ob-drop-sm b { font-size: 14px; }
/* a visually hidden file input placed before its drop zone: keyboard focus shows on the zone */
.ob-file:focus-visible + .ob-drop, .ob-file:focus + .ob-drop { outline: 3px solid var(--ob-navy-2); outline-offset: 3px; border-color: var(--ob-navy-2); }
/* supporting bank document - a one-line row that opens */
.ob-supdoc { margin-top: 18px; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; }
.ob-supdoc-h { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: none; border: 0; border-radius: 14px; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ob-supdoc-h .ob-ico { width: 38px; height: 38px; font-size: 16px; }
.ob-supdoc-h .t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.ob-supdoc-h .t b { font-weight: 600; color: var(--ob-ink); }
.ob-supdoc-h .t > span { font-size: 12px; color: var(--ob-muted); }
.ob-supdoc-chev { color: var(--ob-muted); transition: transform .2s; }
.ob-supdoc-h[aria-expanded="true"] .ob-supdoc-chev { transform: rotate(180deg); }
.ob-supdoc-b { padding: 0 14px 14px; }
.ob-opt { font-weight: 500; color: var(--ob-muted); font-size: .9em; }
/* "Keep current document" bar (OB.keepBar) - top of an uploader opened by Replace (selfcare pattern) */
.ob-keep { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 12px; padding: 9px 10px 9px 14px; border-radius: 12px; background: var(--ob-tint); color: var(--ob-navy-2); font-size: 13px; font-weight: 500; text-align: left; }
.ob-keep-t { display: inline-flex; align-items: center; gap: 8px; }
.ob-keep-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ob-edge); color: var(--ob-navy); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ob-keep-btn:hover { border-color: var(--ob-navy-2); background: #f7faff; }
.ob-keep-slot:not(:empty) { padding: 16px 22px 0; }   /* selfie: the bar sits under the card header */
/* document verification result (OB.docChecks) - same layout as selfcare /preview/kra CML */
.ob-dc { margin-top: 16px; }
.ob-dc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; }
.ob-dc-sum p { flex: 1 1 220px; margin: 0; }
.ob-dc-sum.bad { background: var(--ob-err-soft); border: 1px solid #f3c6c2; color: #a3231b; }
.ob-dc-sum.ok { background: var(--ob-ok-soft); border: 1px solid #bfe6cf; color: #0b6b3c; }
.ob-dc-list { list-style: none; margin: 10px 0 0; padding: 0 16px; border: 1px solid var(--ob-line); border-radius: 14px; background: #fbfcfe; }
.ob-dc-list li { padding: 12px 0; }
.ob-dc-list li + li { border-top: 1px solid var(--ob-line); }
.ob-dc-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; color: var(--ob-ink); }
.ob-dc-pill { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.ob-dc-pill.ok { background: var(--ob-ok-soft); color: var(--ob-ok); }
.ob-dc-pill.bad { background: var(--ob-err-soft); color: var(--ob-err); }
.ob-dc-list dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 13px; }
.ob-dc-list dt { color: var(--ob-muted); }
.ob-dc-list dd { margin: 0; color: var(--ob-ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ob-dc-hint { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--ob-warn-soft); color: var(--ob-warn); font-size: 13px; line-height: 1.5; }
.ob-onfile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid #cfe9da; background: #f6fbf8; }
.ob-onfile .t { flex: 1; min-width: 0; font-size: 14px; }
.ob-onfile .t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-onfile .t span { font-size: 12px; color: var(--ob-muted); }

/* ---------------------------------------------------------------- skeleton, toast, dialog */
.ob-skel { position: relative; overflow: hidden; background: #eef2f7; border-radius: 12px; }
.ob-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); animation: ob-shim 1.2s infinite; }
@keyframes ob-shim { to { transform: translateX(100%); } }

.ob-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 90; pointer-events: none;
  background: var(--ob-ink); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 14px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45);
  transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px);
}
.ob-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 767.98px) { .ob-toast { bottom: 100px; } }

.ob-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(11, 23, 40, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ob-dialog-in { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 30px 60px -24px rgba(11, 23, 40, .5); animation: ob-pop .28s cubic-bezier(.2, .8, .2, 1) both; }
.ob-dialog-in.wide { width: min(720px, 100%); }
@keyframes ob-pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.ob-dialog h3 { margin: 12px 0 6px; font-size: 19px; }
.ob-dialog p { margin: 0; color: var(--ob-muted); font-size: 14px; }
.ob-dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

/* progress steps inside a panel (e.g. bank verification, e-sign) */
/* Step / check flows: a HORIZONTAL tracker (less scrolling than a vertical list) - dots in a row
   joined by a line, short labels under them. Descriptions show on wider screens; on phones only
   the current step's. Used on Aadhaar, bank verification, e-Sign and thank-you. */
.ob-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.ob-flow-i { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 0 6px; min-width: 0; }
.ob-flow-i::before { content: ""; position: absolute; top: 13px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 2px; background: var(--ob-line); }
.ob-flow-i:first-child::before { display: none; }
.ob-flow-i .ob-sdot { width: 28px; height: 28px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--ob-line-2); background: #fff; color: var(--ob-faint); z-index: 1; }
.ob-flow-i.is-done .ob-sdot { background: var(--ob-ok); border-color: var(--ob-ok); color: #fff; }
.ob-flow-i.is-done::before, .ob-flow-i.is-current::before { background: #bfe6cf; }
.ob-flow-i.is-current .ob-sdot { border-color: var(--ob-navy); color: var(--ob-navy); box-shadow: 0 0 0 4px rgba(243, 167, 18, .25); }
.ob-flow-i > div { min-width: 0; }
.ob-flow-i h4, .ob-flow-i .ob-flow-t { margin: 0; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--ob-ink-2); }
.ob-flow-i.is-current h4, .ob-flow-i.is-current .ob-flow-t { color: var(--ob-navy); }
.ob-flow-i p { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--ob-muted); }
@media (max-width: 599.98px) {
  .ob-flow-i { padding: 0 2px; }
  .ob-flow-i h4, .ob-flow-i .ob-flow-t { font-size: 11.5px; }
  .ob-flow-i p { display: none; }
  .ob-flow-i.is-current p { display: block; font-size: 11px; }
}
/* PAN verification checks: side by side instead of stacked rows (2 x 2 on phones) */
.ob-checks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; border: 0; border-radius: 0; overflow: visible; }
.ob-checks .ob-rowi { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; }
.ob-checks .ob-rowi + .ob-rowi { border-top: 1px solid var(--ob-line); }
.ob-checks .ob-rowi .k { font-size: 12px; line-height: 1.3; }
@media (max-width: 719.98px) { .ob-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- start page */
.ob-start { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; grid-template-areas: "hero" "panel" "more"; }
.ob-start .ob-hero { grid-area: hero; }
.ob-start .ob-startpanel { grid-area: panel; }
.ob-start .ob-hero-more { grid-area: more; }
@media (min-width: 1024px) {
  .ob-start { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "hero panel" "more panel"; gap: 0 48px; padding-top: 56px; }
}
@media (max-width: 1023.98px) { .ob-hero > p { margin-bottom: 0; font-size: 15px; } }
.ob-hero h1 { font-size: 30px; line-height: 1.12; letter-spacing: -.025em; margin: 14px 0 12px; font-weight: 800; }
@media (min-width: 768px) { .ob-hero h1 { font-size: 46px; } }
.ob-hero h1 span { background: linear-gradient(90deg, var(--ob-navy-3), var(--ob-navy)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-hero > p { font-size: 17px; color: var(--ob-muted); margin: 0 0 22px; max-width: 520px; }
.ob-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.ob-kpi { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--ob-line); font-size: 13px; color: var(--ob-muted); }
.ob-kpi b { display: block; font-size: 15px; color: var(--ob-ink); }
.ob-kpi i { color: var(--ob-accent); font-size: 18px; }
.ob-need { background: #fff; border: 1px solid var(--ob-line); border-radius: var(--ob-radius); padding: 18px 20px; }
.ob-need h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.ob-need ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .ob-need ul { grid-template-columns: 1fr 1fr; } }
.ob-need li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ob-ink-2); }
.ob-need li i { color: var(--ob-navy-2); width: 18px; margin-top: 3px; text-align: center; }
.ob-need li small { display: block; color: var(--ob-muted); }
.ob-startpanel { background: #fff; border: 1px solid var(--ob-line); border-radius: 24px; padding: 24px; box-shadow: var(--ob-shadow); }
@media (min-width: 768px) { .ob-startpanel { padding: 32px; } }
@media (min-width: 1024px) { .ob-startpanel { position: sticky; top: 96px; } }
.ob-startpanel h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.01em; }
.ob-startpanel > p { margin: 0 0 20px; color: var(--ob-muted); font-size: 14px; }
.ob-mini { display: flex; gap: 6px; margin-bottom: 18px; }
.ob-mini span { flex: 1; height: 4px; border-radius: 999px; background: var(--ob-line); }
.ob-mini span.is-on { background: var(--ob-navy); }
.ob-verified { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--ob-ok-soft); color: #0b6b3c; font-size: 14px; margin-bottom: 16px; }
.ob-verified button { margin-left: auto; }
.ob-found { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, #f3f8ff, #fffaf0); border: 1px solid var(--ob-line); margin-bottom: 16px; font-size: 13px; color: var(--ob-muted); }
.ob-found b { color: var(--ob-ink); display: block; font-size: 14px; }
.ob-sep { display: flex; align-items: center; gap: 12px; color: var(--ob-faint); font-size: 12px; margin: 18px 0; }
.ob-sep::before, .ob-sep::after { content: ""; flex: 1; height: 1px; background: var(--ob-line); }
.ob-legal { font-size: 12px; color: var(--ob-muted); margin-top: 14px; }

/* signature pad */
.ob-pad { position: relative; border: 2px dashed var(--ob-edge); border-radius: 16px; background: #fff; overflow: hidden; touch-action: none; }
.ob-pad canvas { display: block; width: 100%; height: 220px; cursor: crosshair; }
.ob-pad .ob-pad-line { position: absolute; left: 24px; right: 24px; bottom: 54px; border-bottom: 1px dashed var(--ob-line-2); pointer-events: none; }
.ob-pad .ob-pad-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #b3bfce; font-size: 15px; pointer-events: none; }
.ob-tabs { display: inline-flex; padding: 4px; background: var(--ob-soft); border-radius: 12px; gap: 4px; margin-bottom: 16px; }
.ob-tabs button { border: 0; background: none; padding: 9px 16px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ob-muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.ob-tabs button[aria-selected="true"] { background: #fff; color: var(--ob-navy); box-shadow: 0 1px 3px rgba(15, 31, 51, .12); }

/* selfie */
.ob-face { width: 168px; height: 168px; border-radius: 999px; margin: 0 auto; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #f3f7fd, #e5ecf6); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--ob-line-2); overflow: hidden; }
.ob-face img { width: 100%; height: 100%; object-fit: cover; }
.ob-face i { font-size: 64px; color: #b8c6d8; }
.ob-face.is-ok { box-shadow: 0 0 0 3px var(--ob-ok); }
.ob-tips { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .ob-tips { grid-template-columns: 1fr 1fr; } }
.ob-tips li { display: flex; gap: 10px; font-size: 13px; color: var(--ob-ink-2); align-items: flex-start; }
.ob-tips li i { color: var(--ob-navy-2); margin-top: 3px; width: 16px; text-align: center; }

/* per-step help (views/preview/_help.php): tips card under each step's intro + Help panel */
.ob-tipcard { position: relative; margin: -2px 0 16px; background: var(--ob-tint); border: 1px solid #d5e2f3; border-left: 4px solid var(--ob-navy-3); border-radius: 14px; padding: 10px 16px 12px; }
.ob-tipcard summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; font-size: 14px; font-weight: 600; color: var(--ob-navy); }
.ob-tipcard summary::-webkit-details-marker { display: none; }
.ob-tipcard summary > span { display: inline-flex; align-items: center; gap: 8px; }
.ob-tipcard summary > span i { color: var(--ob-accent); font-size: 16px; }
.ob-tipcard .ob-chev { font-size: 11px; color: var(--ob-muted); transition: transform .2s; }
.ob-tipcard[open] .ob-chev { transform: rotate(180deg); }
.ob-tipcard summary:focus-visible, .ob-faq summary:focus-visible { outline: 2px solid var(--ob-navy-3); outline-offset: 2px; border-radius: 6px; }
.ob-tipcard .ob-tips { margin-top: 8px; gap: 8px 16px; }
.ob-tipcard .ob-tips li { color: var(--ob-ink); }
.ob-tipcard-help { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; }
/* example signature in the signature tips (as selfcare /preview/kra/sign): a dashed card in the grid */
.ob-tipcard .ob-tips li.ob-tip-sample { flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 12px; border: 1.5px dashed var(--ob-edge); border-radius: 12px; background: #fbfcfe; }
.ob-tip-sample svg { max-width: 100%; height: auto; }
.ob-tip-sample span { font-size: 11.5px; color: var(--ob-muted); }
/* from tablet width: tips side by side (usually one row of three) and "Get help" in the title row,
   so the card is two short rows instead of four */
@media (min-width: 768px) {
  .ob-tipcard .ob-tips { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .ob-tipcard-help { position: absolute; top: 12px; right: 40px; margin: 0; font-size: 13px; }
  .ob-tipcard summary { padding-right: 190px; }   /* keep the title clear of the help link */
}
.ob-tips a, .ob-faq a { color: var(--ob-navy-3); }

.ob-hdrawer { position: fixed; inset: 0; z-index: 85; display: flex; justify-content: flex-end; background: rgba(11, 23, 40, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ob-hdrawer[hidden] { display: none; }
.ob-hdrawer-in { width: min(440px, 100%); height: 100%; background: #fff; display: flex; flex-direction: column; box-shadow: -12px 0 40px -20px rgba(15, 31, 51, .45); animation: ob-hd-in .22s ease-out; }
@keyframes ob-hd-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ob-hdrawer-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 20px 20px 12px; border-bottom: 1px solid var(--ob-line); }
.ob-hdrawer-h h3 { margin: 0; font-size: 18px; }
.ob-hdrawer-h p { margin: 2px 0 0; font-size: 13px; color: var(--ob-muted); }
.ob-hdrawer-b { flex: 1; overflow: auto; padding: 4px 20px 16px; -webkit-overflow-scrolling: touch; }
.ob-hdrawer-b .ob-sub { margin-top: 18px; }
.ob-hdrawer .ob-support { padding: 14px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ob-line); background: var(--ob-soft); }
@media (max-width: 767.98px) {
  .ob-hdrawer { align-items: flex-end; }
  .ob-hdrawer-in { width: 100%; height: auto; max-height: 88vh; border-radius: 20px 20px 0 0; animation-name: ob-hd-up; }
  @keyframes ob-hd-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
}
.ob-faq details { border-top: 1px solid var(--ob-line-2); }
.ob-faq details:last-child { border-bottom: 1px solid var(--ob-line-2); }
.ob-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 2px; font-size: 14px; font-weight: 500; color: var(--ob-ink); }
.ob-faq summary::-webkit-details-marker { display: none; }
.ob-faq summary i { font-size: 11px; color: var(--ob-muted); transition: transform .2s; flex-shrink: 0; }
.ob-faq details[open] summary i { transform: rotate(180deg); }
.ob-faq details p { margin: 0 0 12px; padding: 0 2px; font-size: 13px; line-height: 1.55; color: var(--ob-ink-2); }
.ob-support { display: grid; gap: 10px; }
.ob-support-t { display: grid; gap: 2px; font-size: 14px; }
.ob-support-t span { font-size: 12px; color: var(--ob-muted); }
.ob-support-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-support-a a { justify-content: center; text-decoration: none; }
.ob-support-a .ob-btn-ghost { background: #fff; }
.ob-alert .ob-err-help { margin-left: 6px; white-space: nowrap; }
/* Help panel: email support draft */
.ob-mail { margin-top: 6px; padding: 14px; border: 1px solid var(--ob-line-2); border-radius: 14px; background: var(--ob-soft); }
.ob-mail .ob-sub { margin-top: 0; }
.ob-mail-note { margin: 0; font-size: 12px; color: var(--ob-muted); }
.ob-mail-topics { margin-top: 10px; gap: 6px; }
.ob-mail-topics .ob-chip { font-size: 12px; min-height: 32px; text-align: left; white-space: normal; }
.ob-mail-topics .ob-chip.is-on { background: var(--ob-tint); border-color: var(--ob-navy); color: var(--ob-navy); }
.ob-mail textarea { width: 100%; min-height: 90px; resize: vertical; }
.ob-mail-to { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.ob-mail-to .ob-btn-ghost { justify-content: center; background: #fff; }
@media (prefers-reduced-motion: reduce) { .ob-faq summary i, .ob-tipcard .ob-chev { transition: none; } .ob-hdrawer-in { animation: none; } }

/* plans */
.ob-plan { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.ob-plan .ob-price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ob-ink); }
.ob-plan .ob-price small { font-size: 13px; font-weight: 500; color: var(--ob-muted); margin-left: 4px; }
.ob-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; color: var(--ob-ink-2); }
.ob-plan li { display: flex; gap: 8px; }
.ob-plan li i { color: var(--ob-ok); margin-top: 3px; }
.ob-plan .ob-ribbon { position: absolute; top: 14px; right: 14px; }

/* nominee */
.ob-nom { border: 1px solid var(--ob-line); border-radius: 16px; padding: 16px; }
@media (max-width: 767.98px) { .ob-nom { padding: 12px; } }   /* inside a card that already has padding */
.ob-nom + .ob-nom { margin-top: 12px; }
.ob-nom-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ob-nom-h h3 { margin: 0; font-size: 15px; flex: 1; }
.ob-sharebar { height: 8px; border-radius: 999px; background: var(--ob-line); overflow: hidden; margin-top: 8px; }
.ob-sharebar span { display: block; height: 100%; background: var(--ob-navy-3); transition: width .3s; border-radius: inherit; }
.ob-sharebar.is-ok span { background: var(--ob-ok); }
.ob-sharebar.is-over span { background: var(--ob-err); }

/* thank you */
.ob-done-hero { text-align: center; padding: 12px 0 8px; }
.ob-appno { font-size: 13px; color: var(--ob-muted); margin: 0; }
.ob-appno b { color: var(--ob-ink); }
/* Thank-you page, compact (ob-ty-*): two cards that fit one screen.
   Card 1 = submitted message + one-row rating (side by side from 900px); card 2 = signed forms + next steps. */
.ob-panel.ob-ty-top, .ob-panel.ob-ty-info { padding: 16px 18px; }
@media (min-width: 768px) { .ob-panel.ob-ty-top, .ob-panel.ob-ty-info { padding: 20px 24px; } }
.ob-panel.ob-ty-top + .ob-panel.ob-ty-info { margin-top: 12px; }
.ob-ty-top { display: grid; gap: 12px; }
@media (min-width: 900px) { .ob-ty-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } }
.ob-ty-hero { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ob-ty-burst { width: 48px; height: 48px; flex: none; border-radius: 999px; display: grid; place-items: center; background: var(--ob-ok-soft); color: var(--ob-ok); font-size: 21px; box-shadow: 0 0 0 6px rgba(10, 125, 69, .08); animation: ob-pop .5s cubic-bezier(.2, .8, .2, 1) both; }
.ob-ty-msg { min-width: 0; }
.ob-ty-h1 { margin: 0; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; color: var(--ob-ink); }
@media (min-width: 768px) { .ob-ty-h1 { font-size: 23px; } }
.ob-ty-msg p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ob-muted); }
.ob-ty-msg .ob-appno { font-size: 12.5px; }
/* rating: label + five stars on one row */
.ob-rate { padding-top: 12px; border-top: 1px dashed var(--ob-line-2); min-width: 0; }
@media (min-width: 900px) { .ob-rate { padding: 0 0 0 24px; border-top: 0; border-left: 1px dashed var(--ob-line-2); } }
.ob-rate-line { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; }
.ob-rate-q { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--ob-ink); }
.ob-rate-sub { margin: 1px 0 0; font-size: 12px; color: var(--ob-muted); }
.ob-rate-word { font-weight: 600; color: var(--ob-navy); }
.ob-stars { display: inline-flex; gap: 5px; }
.ob-star { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--ob-edge); background: #fff; color: var(--ob-edge); font-size: 18px; display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, color .12s ease, border-color .12s ease; }
.ob-star:hover, .ob-star.is-hover { color: #b97700; border-color: #b97700; }
.ob-star.is-on { color: #b97700; border-color: #b97700; background: #fff8e8; }   /* 3.5:1 */
.ob-star:active { transform: scale(.94); }
.ob-rate-more { margin-top: 10px; }
.ob-rate-row { display: flex; gap: 8px; align-items: stretch; }
.ob-rate-row .ob-ctl { flex: 1; min-width: 0; min-height: 42px; }
.ob-rate-row .ob-btn { min-height: 42px; }
.ob-rate-done { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ob-ok); }
.ob-rate-done:empty { display: none; }
@media (max-width: 359.98px) { .ob-star { width: 36px; height: 36px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .ob-star { transition: none; } .ob-ty-burst { animation: none; } }
/* card 2 */
.ob-ty-sec + .ob-ty-sec { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ob-line); }
.ob-ty-h2 { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ob-ink); }
.ob-ty-h2 span { font-size: 12.5px; font-weight: 400; color: var(--ob-muted); }
.ob-ty-forms { display: grid; gap: 8px; }
@media (min-width: 600px) { .ob-ty-forms { grid-template-columns: 1fr 1fr; } }
.ob-ty-form { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border: 1px solid var(--ob-line-2); border-radius: 12px; background: var(--ob-soft); min-width: 0; }
.ob-ty-form.is-signed { background: var(--ob-ok-soft); border-color: #bfe6cf; }
.ob-ty-form .ob-ico { width: 34px; height: 34px; font-size: 15px; flex: none; }
.ob-ty-form .t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ob-ty-form .t b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-ty-form .t > span { font-size: 12px; color: var(--ob-muted); }
.ob-ty-form.is-signed .t > span { color: var(--ob-ok); font-weight: 600; }
.ob-ty-form .ob-btn-sm { flex: none; }
.ob-ty-foot { margin: 12px 0 0; text-align: right; font-size: 13px; }
.ob-ty-foot a { font-weight: 500; }
@media (max-width: 379.98px) { .ob-hide-xs { display: none; } }
/* phones: question + stars stay on ONE row, the two forms one above the other, no subtitles */
@media (max-width: 479.98px) {
  .ob-rate-line { flex-wrap: nowrap; }
  .ob-rate-txt { flex: 1; min-width: 0; }
  .ob-rate-q { font-size: 14px; line-height: 1.25; }
  .ob-stars { gap: 4px; flex: none; }
  .ob-star { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
  .ob-ty-h2 span { display: none; }
  .ob-ty-forms { grid-template-columns: 1fr; gap: 10px; }
  .ob-ty-form { padding: 10px 10px 10px 12px; gap: 10px; }
  .ob-ty-form .t b { white-space: normal; font-size: 14px; line-height: 1.25; }
  .ob-ty-form .ob-btn-sm { padding: 0 14px; min-height: 40px; }
  .ob-ty-sec + .ob-ty-sec { margin-top: 12px; padding-top: 12px; }
  .ob-ty-info .ob-flow-i.is-current p { display: none; }   /* repeats the first card's message */
  .ob-ty-foot { margin-top: 8px; }
}
@media (max-width: 339.98px) { .ob-star { width: 30px; height: 30px; font-size: 13px; } .ob-stars { gap: 3px; } }
.ob-burst { width: 84px; height: 84px; border-radius: 999px; margin: 0 auto 10px; display: grid; place-items: center; background: var(--ob-ok-soft); color: var(--ob-ok); font-size: 36px; box-shadow: 0 0 0 10px rgba(15, 157, 88, .08); animation: ob-pop .5s cubic-bezier(.2, .8, .2, 1) both; }

/* joint prototype */
.ob-proto { background: repeating-linear-gradient(135deg, #fff8e6 0 12px, #fff3d6 12px 24px); border: 1px solid #f3d38a; color: #7a4b00; border-radius: 12px; padding: 10px 14px; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.ob-holder { display: grid; gap: 10px; }
.ob-hsteps { display: flex; gap: 6px; flex-wrap: wrap; }
.ob-hsteps span { font-size: 11px; font-weight: 600; padding: 4px 8px; border-radius: 999px; background: var(--ob-soft); color: var(--ob-muted); }
.ob-hsteps span.is-done { background: var(--ob-ok-soft); color: var(--ob-ok); }
.ob-hsteps span.is-now { background: var(--ob-tint); color: var(--ob-navy); }

@media (max-width: 639.98px) { .ob-hide-sm { display: none; } }
.ob-terms { font-size: 13px; color: var(--ob-ink-2); max-height: 55vh; overflow: auto; padding-right: 6px; }
.ob-terms h4 { font-size: 14px; margin: 16px 0 6px; color: var(--ob-ink); }
.ob-terms ol, .ob-terms ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

/* footer */
.ob-foot { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; font-size: 12px; color: var(--ob-faint); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }
.ob-foot a { color: var(--ob-muted); text-decoration: none; }