/**
 * Full UI for this app (copy of project bond-app-shared.css). Upload next to index.html.
 */
    *, *::before, *::after { box-sizing: border-box; }
    :root {
      /* Tokens from bondconnect.ca Elementor Global Colors (see site kit) */
      --brand: #2974a3;
      --brand-deep: #315c82;
      --brand-hover: #246892;
      --brand-soft: #e3eef5;
      --brand-softer: #f0f7fb;
      --brand-tint: rgba(41, 116, 163, 0.14);
      --brand-glow: rgba(41, 116, 163, 0.22);
      --green: #00b406;
      --green-bright: #00c507;
      --green-soft: #d4f5d6;
      --green-softer: #ecfdf0;
      --green-border: #9ae6a8;
      --bg: #f8f8f8;
      --surface: #fff;
      --text: #4d4d4d;
      --text-secondary: #54595f;
      --text-muted: #6b6b6b;
      --border: #d8e4ec;
      --font-heading: "Poppins", system-ui, sans-serif;
      --font-body: "Montserrat", system-ui, sans-serif;
      --font-button: "Roboto", system-ui, sans-serif;
      --btn-radius: 3px;
      --btn-py: 13px;
      --btn-px: 28px;
      --input-min-height: 48px;
      --shadow: 0 4px 24px rgba(41, 116, 163, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
      --radius-lg: 16px;
      --radius: 10px;
      --ease: 0.35s ease;
      /* Page flair (behind .app): override per app in <style> on :root if you need a different file */
      --bond-bg-flair-image: url("img/bg-1.png");
      --bond-bg-flair-opacity: 0.32;
      /* Horizontal: centered on viewport, then shifted right (tune per product) */
      --bond-bg-flair-offset-x: 300px;
      --bond-bg-flair-offset-x-mobile: 100px;
      --bond-bg-flair-debug-border: 0;
      /* Support footer — edit here (sync bond-app-shared.css / per-app copies) to update all bond apps */
      --bond-support-section-title: "Have questions?";
      --bond-support-phone: "1-855-205-3005";
      --bond-support-phone-tel: "18552053005";
      --bond-support-email: "admin@bondconnect.ca";
      --bond-contact-url: "https://www.bondconnect.ca/contact/";
      --bond-contact-label: "Contact us";
      --bond-trust-heading: "Secure connection (SSL)";
      --bond-trust-body: "This page uses HTTPS. Your information is encrypted in transit and handled securely while we process your application.";
      --bond-office-address: "#170 - 422 Richards Street, Vancouver, BC V6B 2Z4";
      /* Legal copy above support footer — edit in one place (sync per-app CSS) */
      --bond-legal-disclaimer: "By submitting the information above, I/we hereby declare that the answers and declarations made, whether in my own hand or not, are true and that I/we warrant that no material fact has been withheld or misstated and agree that this application will form part of the issued bond and will form the basis of any contracts with Underwriters. I/we understand that the Underwriters may declare any bond issued void in the event of any false statement, misrepresentation, omission or concealment whether made intentionally, innocently or accidentally.";
      --bond-terms-url: "https://www.bondconnect.ca/terms-of-use/";
      --bond-privacy-url: "https://www.bondconnect.ca/privacy-policy/";
      --bond-terms-label: "Terms of Use";
      --bond-privacy-label: "Privacy Policy";
    }
    html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
    body {
      margin: 0;
      min-height: 100vh;
      min-height: 100dvh;
      font-family: var(--font-body);
      font-size: 17px;
      line-height: 1.55;
      color: var(--text);
      background: #fff;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      position: relative;
    }
    /* Decorative image: vertically centred; horizontally viewport-centre + offset to the right */
    body::after {
      content: "";
      position: fixed;
      pointer-events: none;
      z-index: 0;
      width: min(92vmin, 480px);
      height: min(92vmin, 480px);
      left: 50%;
      top: 50%;
      right: auto;
      transform: translate(calc(-50% + var(--bond-bg-flair-offset-x)), -50%);
      background: var(--bond-bg-flair-image) no-repeat center / contain;
      opacity: var(--bond-bg-flair-opacity);
      outline: calc(2px * var(--bond-bg-flair-debug-border, 0)) dashed #dc2626;
      outline-offset: 0;
    }
    @media (max-width: 640px) {
      body::after {
        width: min(75vmin, 360px);
        height: min(75vmin, 360px);
        opacity: 0.26;
        transform: translate(calc(-50% + var(--bond-bg-flair-offset-x-mobile)), -50%);
      }
    }
    @media print {
      body::after { display: none; }
    }
    .app {
      position: relative;
      z-index: 1;
      max-width: 720px; margin: 0 auto;
      padding:
        1.5rem
        max(1rem, env(safe-area-inset-right, 0px))
        max(2.5rem, env(safe-area-inset-bottom, 0px))
        max(1rem, env(safe-area-inset-left, 0px));
    }
    /* White application card + gray “Have questions?” as one rounded shell */
    .bond-app-panel {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(41, 116, 163, 0.12);
    }
    .bond-app-panel .card {
      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
      border: none;
      box-shadow: none;
    }
    .bond-app-panel .bond-support-footer {
      margin-top: 0;
      border-radius: 0 0 var(--radius-lg) var(--radius-lg);
      border: none;
      box-shadow: none;
      border-top: 1px solid var(--border);
    }
    /* Ontario sample PDF strip sits above footer; avoid double line when strip is visible */
    .bond-sample-wording-strip:not([hidden]) + .bond-support-footer {
      border-top: none;
    }
    /* Declaration + terms (below the combined app + support panel) */
    .bond-legal-notice {
      margin: 1.5rem auto 1.25rem;
      padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
      max-width: 40rem;
      text-align: center;
    }
    .bond-legal-notice__text {
      margin: 0;
      font-size: 0.72rem;
      line-height: 1.55;
      color: #c8c8c8;
      letter-spacing: 0.01em;
    }
    .bond-legal-notice__links {
      margin: 0.85rem 0 0;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem 0.65rem;
      flex-wrap: wrap;
    }
    .bond-legal-notice__link {
      color: #b8b8b8;
      text-decoration: underline;
      text-underline-offset: 2px;
      font-weight: 500;
      transition: color var(--ease);
    }
    .bond-legal-notice__link:hover {
      color: var(--brand);
    }
    .bond-legal-notice__link:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      border-radius: 2px;
    }
    .bond-legal-notice__sep {
      color: #d8d8d8;
      user-select: none;
      font-weight: 300;
    }
    @media (min-width: 480px) {
      .bond-legal-notice__text {
        font-size: 0.75rem;
      }
    }
    /* Secondary strip — help, email, contact, trust (often inside .bond-app-panel) */
    .bond-support-footer {
      margin-top: 0;
      padding: 0;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #f8f8f8;
      border: 1px solid rgba(41, 116, 163, 0.12);
      box-shadow: var(--shadow);
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    .bond-support-footer__head {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      padding: 1.15rem 1.35rem 1.2rem;
      background: #f8f8f8;
      border-bottom: 1px solid var(--border);
    }
    .bond-support-footer__head-accent {
      width: 2px;
      min-height: 1.375rem;
      border-radius: 1px;
      flex-shrink: 0;
      background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
      box-shadow: 0 1px 3px rgba(41, 116, 163, 0.25);
    }
    .bond-support-footer__head-text {
      flex: 1;
      min-width: 0;
      padding-top: 0.05rem;
    }
    .bond-support-footer__title {
      margin: 0;
      font-family: var(--font-heading);
      font-size: 1.12rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: 1.25;
    }
    .bond-support-footer__links {
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;
      justify-content: center;
      gap: 0.65rem 1rem;
      margin: 0;
      margin-bottom: 1.1rem;
      padding: 1.1rem 1.35rem 1.1rem;
    }
    .bond-support-footer__link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.45rem 0.85rem;
      border-radius: var(--radius);
      text-decoration: none;
      color: var(--brand);
      font-weight: 600;
      font-family: var(--font-body);
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(41, 116, 163, 0.16);
      transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
    }
    .bond-support-footer__link:hover {
      background: #fff;
      border-color: var(--brand);
      color: var(--brand-deep);
      box-shadow: 0 2px 10px rgba(41, 116, 163, 0.12);
    }
    .bond-support-footer__link:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
    }
    .bond-support-footer__icon {
      flex-shrink: 0;
      color: var(--brand);
      opacity: 0.92;
    }
    .bond-support-footer__link-text {
      font-variant-numeric: tabular-nums;
    }
    .bond-support-footer__contact .bond-support-footer__icon {
      width: 18px;
      height: 18px;
    }
    .bond-support-footer__trust {
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      padding: 0 1.35rem 1.25rem;
      padding-left: calc(1.35rem + 0.75rem);
    }
    .bond-support-footer__trust-badge {
      flex-shrink: 0;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg, var(--green-softer), var(--green-soft));
      border: 1px solid var(--green-border);
      color: #0a5c12;
    }
    .bond-support-footer__trust-badge svg {
      width: 1.25rem;
      height: 1.25rem;
    }
    .bond-support-footer__trust-copy {
      flex: 1;
      min-width: 0;
    }
    .bond-support-footer__trust-title {
      margin: 0 0 0.35rem;
      font-family: var(--font-heading);
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .bond-support-footer__trust-body {
      margin: 0;
      font-size: 0.8rem;
      line-height: 1.5;
      color: var(--text-muted);
    }
    .bond-office-address {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 0.4rem;
      margin: 1rem 0 0;
      padding: 0 max(1rem, env(safe-area-inset-right, 0px)) 0 max(1rem, env(safe-area-inset-left, 0px));
      font-size: 0.8rem;
      line-height: 1.45;
      color: #b8b8b8;
      text-align: center;
    }
    .bond-office-address__pin {
      flex-shrink: 0;
      margin-top: 0.12em;
      color: #c8c8c8;
    }
    .bond-office-address__text {
      max-width: 26rem;
    }
    @media (max-width: 520px) {
      .bond-support-footer__links {
        flex-direction: column;
        align-items: stretch;
      }
      .bond-support-footer__link {
        justify-content: center;
      }
    }
    .card {
      background: var(--surface);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow);
      border: 1px solid rgba(41, 116, 163, 0.12);
      overflow: hidden;
    }
    .card-header {
      padding: 1.25rem 1.5rem 1rem;
      border-bottom: 1px solid var(--border);
      background: #f8f8f8;
    }
    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 0.75rem;
    }
    .app-title {
      flex: 1;
      min-width: 0;
      font-family: var(--font-heading);
      font-weight: 600;
      font-size: 1.15rem;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: 1.3;
      margin: 0;
    }
    .brand-logo {
      height: 32px;
      width: auto;
      max-width: min(180px, 42vw);
      object-fit: contain;
      flex-shrink: 0;
      display: block;
    }
    .progress-wrap { margin-top: 0.25rem; }
    .progress-label {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 0.5rem;
    }
    .progress-label strong { color: var(--brand); font-weight: 600; }
    .progress-track {
      height: 7px; background: var(--brand-soft); border-radius: 999px; overflow: hidden;
      border: 1px solid rgba(41, 116, 163, 0.12);
    }
    .progress-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--brand) 0%, #3b8ab8 100%);
      border-radius: 999px; transition: width var(--ease);
      box-shadow: 0 0 12px rgba(41, 116, 163, 0.35);
    }
    .stepper {
      display: flex; justify-content: space-between; gap: 0.2rem; margin-top: 0.85rem;
      padding-top: 0.85rem; border-top: 1px solid var(--border); flex-wrap: nowrap;
    }
    .stepper-item { flex: 1; text-align: center; min-width: 0; }
    .stepper-dot {
      width: 26px; height: 26px; margin: 0 auto 0.3rem; border-radius: 50%;
      border: 2px solid #c5d9e6; font-size: 0.7rem; font-weight: 600;
      display: flex; align-items: center; justify-content: center; color: var(--text-muted);
      background: #fff;
    }
    .stepper-item.done .stepper-dot {
      border-color: var(--brand); background: var(--brand); color: #fff;
      box-shadow: 0 2px 6px var(--brand-glow);
    }
    .stepper-item.current .stepper-dot {
      border-color: var(--brand); color: var(--brand);
      background: var(--brand-softer);
      box-shadow: 0 0 0 3px var(--brand-tint);
    }
    .stepper-label { font-size: 0.62rem; color: var(--text-muted); line-height: 1.15; }
    @media (min-width: 480px) { .stepper-label { font-size: 0.6875rem; } }
    .stepper-item.current .stepper-label { color: var(--brand); font-weight: 600; }
    .stepper-item.stepper-nav { cursor: pointer; }
    .stepper-item.stepper-nav:not(.stepper-locked):hover .stepper-dot {
      border-color: var(--brand);
      background: var(--brand-softer);
    }
    /* Completed steps: checkmark must read as brand blue on light hover fill (override .done #fff) */
    .stepper-item.stepper-nav.done:not(.stepper-locked):hover .stepper-dot {
      border-color: var(--brand);
      background: var(--brand-softer);
      box-shadow: 0 0 0 1px rgba(41, 116, 163, 0.12);
      color: var(--brand) !important;
      -webkit-text-fill-color: var(--brand);
    }
    .stepper-item.stepper-locked {
      cursor: not-allowed;
      opacity: 0.45;
    }

    .card-header.is-contact .progress-wrap,
    .card-header.is-contact .stepper,
    .card-header.is-complete .progress-wrap,
    .card-header.is-complete .stepper { display: none; }

    .complete-panel { text-align: center; padding: 0.25rem 0 0.5rem; }
    .complete-icon {
      width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
      background: var(--green-soft); border: 2px solid var(--green-border);
      color: var(--green); font-size: 1.75rem; font-weight: 700; line-height: 52px;
    }
    .complete-panel.complete-panel--error .complete-icon {
      background: #fdeaea; border-color: #f5c2c0; color: #c62828; font-size: 1.5rem; line-height: 50px;
    }
    .complete-panel #completeTitle { margin-bottom: 0.5rem; }
    .complete-email-notice {
      text-align: left; margin: 1.25rem 0 1rem; padding: 1rem 1.125rem;
      background: var(--brand-softer); border: 1px solid var(--border); border-radius: var(--radius);
      font-size: 0.9375rem; line-height: 1.5; color: var(--text-secondary);
    }
    .complete-email-notice strong { color: var(--brand); }
    .complete-bond-confirm {
      margin: 1.25rem 0 1rem;
      padding: 1rem 1.125rem;
      text-align: left;
      background: #fff;
      border: 2px solid var(--brand);
      border-radius: var(--radius);
      box-shadow: 0 2px 12px rgba(41, 116, 163, 0.12);
    }
    .complete-bond-confirm-label {
      font-size: 0.6875rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 0.35rem;
    }
    .complete-bond-confirm-value {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--brand-deep);
      line-height: 1.35;
    }
    .complete-regulatory {
      text-align: left;
      margin: 0 0 1rem;
      padding: 0.875rem 1rem;
      font-size: 0.9375rem;
      line-height: 1.55;
      color: var(--text-secondary);
      background: var(--brand-softer);
      border-radius: var(--radius);
      border: 1px solid rgba(41, 116, 163, 0.2);
    }
    .card-body.app-complete-mode .nav-actions { display: none; }

    .complete-beta-note {
      margin: 1rem 0 0;
      padding: 0.65rem 0.75rem;
      font-size: 0.75rem;
      line-height: 1.45;
      color: var(--text-muted);
      text-align: center;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      background: #fafafa;
    }
    .complete-beta-note strong { color: var(--text-secondary); font-weight: 600; }

    .card-body { padding: 1.5rem; }
    .screen { display: none; animation: fadeIn var(--ease); }
    .screen.active { display: block; }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .card-body h2 {
      font-family: var(--font-heading);
      font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; margin: 0 0 0.5rem; line-height: 1.25;
      color: var(--text);
    }
    .lead { color: var(--text-muted); font-size: 0.9375rem; margin: 0 0 1.25rem; }
    /* Ontario: strip above “Have questions?” — left aligns with footer head (accent bar starts here) */
    .bond-sample-wording-strip {
      margin: 0;
      /* Match .bond-support-footer__head padding-left (same left edge as blue accent line) */
      padding: calc(0.55rem + 10px) 1.35rem max(0px, calc(0.6rem - 10px)) 1.35rem;
      border-top: 1px solid var(--border);
      background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 45%, #f8f8f8 100%);
      text-align: left;
    }
    .bond-sample-wording-strip[hidden] {
      display: none !important;
    }
    .bond-sample-wording-strip__link {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.5rem;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      letter-spacing: 0.01em;
      transition: color 0.2s ease;
      max-width: 100%;
    }
    .bond-sample-wording-strip__link:hover {
      color: var(--brand);
    }
    .bond-sample-wording-strip__link:focus-visible {
      outline: 2px solid var(--brand);
      outline-offset: 2px;
      border-radius: var(--btn-radius);
    }
    .bond-sample-wording-strip__icon {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      display: block;
      object-fit: contain;
    }
    .bond-sample-wording-strip__text {
      border-bottom: 1px solid transparent;
    }
    .bond-sample-wording-strip__link:hover .bond-sample-wording-strip__text {
      border-bottom-color: rgba(41, 116, 163, 0.35);
    }
    .hint {
      font-size: 0.8125rem; color: var(--text-muted); margin: 0.35rem 0 0;
      line-height: 1.45;
    }
    .callout {
      background: linear-gradient(135deg, var(--brand-softer) 0%, #fff 100%);
      border: 1px solid rgba(41, 116, 163, 0.2); border-left: 4px solid var(--brand);
      border-radius: var(--radius);
      padding: 1rem 1.125rem; font-size: 0.875rem; color: var(--text); margin-bottom: 1.25rem; line-height: 1.45;
    }
    .callout strong { color: var(--brand); }

    .choice-grid { display: grid; gap: 0.65rem; }
    @media (min-width: 480px) { .choice-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
    .choice-btn {
      display: block; width: 100%; text-align: left; padding: 1rem 1.125rem;
      border: 2px solid var(--border); border-radius: var(--radius); background: #fff;
      font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; color: var(--text);
      cursor: pointer; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .choice-btn:hover { border-color: rgba(41, 116, 163, 0.45); background: var(--brand-softer); }
    .choice-btn.selected {
      border-color: var(--brand); background: var(--brand-softer);
      box-shadow: 0 0 0 3px var(--brand-tint);
    }
    .choice-btn .choice-hint {
      display: block;
      font-size: 0.75rem;
      font-weight: 400;
      color: var(--text-muted);
      margin-top: 0.25rem;
      line-height: 1.3;
    }
    .choice-btn .choice-hint + .sub { margin-top: 0.2rem; }
    .choice-btn .sub { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); margin-top: 0.25rem; }
    .choice-btn--online .sub { color: var(--green); font-weight: 600; }

    .term-grid { display: grid; gap: 1rem; }
    @media (min-width: 540px) { .term-grid { grid-template-columns: 1fr 1fr; } }
    .term-card {
      border: 2px solid var(--border); border-radius: 12px; padding: 1.25rem;
      background: #fff; cursor: pointer; text-align: left;
      font-family: var(--font-button); font-weight: 500;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .term-card:hover { border-color: rgba(41, 116, 163, 0.45); }
    .term-card.selected {
      border-color: var(--brand); background: var(--brand-softer);
      box-shadow: 0 6px 24px var(--brand-glow);
    }
    .term-card-savings {
      background: linear-gradient(160deg, var(--green-softer) 0%, #fff 55%);
      border-color: var(--green-border);
    }
    .term-card-savings:hover { border-color: var(--green-bright); }
    .term-card-savings.selected {
      border-color: var(--green); background: linear-gradient(160deg, #d1fae5 0%, var(--brand-softer) 100%);
      box-shadow: 0 6px 24px rgba(15, 118, 110, 0.18);
    }
    .term-card .amt { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; color: var(--brand); }
    .term-card-savings .amt { color: var(--green); }
    .term-card .meta { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.35rem; }
    .term-card .badge {
      display: inline-block; margin-top: 0.65rem; padding: 0.3rem 0.55rem; border-radius: 6px;
      font-size: 0.75rem; font-weight: 600; background: var(--green-soft); color: var(--green);
      border: 1px solid var(--green-border);
    }
    .term-card .badge.muted { background: var(--brand-soft); color: var(--brand); border-color: rgba(41, 116, 163, 0.2); }

    .form-grid { display: grid; gap: 1.125rem; }
    @media (min-width: 520px) {
      .form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
    }
    /* Extra space before shareholder/partner lists after legal business name (corp & partnership) */
    .form-group[data-field="namesList"] {
      margin-top: 0.875rem;
    }
    label { display: block; font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.4rem; }
    .label-hint { font-weight: 400; color: var(--text-muted); }
    .req-star { color: #dc2626; font-weight: 700; margin-left: 0.2em; }
    input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select {
      width: 100%; min-height: var(--input-min-height); padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit;
      border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text);
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }
    /* Native date picker (mobile Chrome, Safari 15.4+): tint header / selection to brand blue instead of system teal */
    input[type="date"] {
      accent-color: var(--brand);
      color-scheme: light;
    }
    textarea {
      width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit;
      border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text);
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    /* Full-area calendar open (Chromium/Safari): invisible picker spans entire field */
    .date-field {
      position: relative;
      display: block;
      width: 100%;
    }
    .date-field input[type="date"] {
      position: relative;
      padding-right: 2.75rem;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }
    .date-field input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      cursor: pointer;
      opacity: 0;
    }
    .date-field::after {
      content: "";
      position: absolute;
      right: 0.9rem;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      pointer-events: none;
      opacity: 0.65;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%232974a3' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='4' width='16' height='15' rx='2'/%3E%3Cpath d='M3 9h16M8 2v4M14 2v4'/%3E%3C/svg%3E")
        center / contain no-repeat;
    }
    input:focus, select:focus, textarea:focus {
      outline: none; border-color: var(--brand); background: var(--surface);
      box-shadow: 0 0 0 3px var(--brand-tint);
    }
    textarea { min-height: 88px; resize: vertical; }

    .radio-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .radio-list.radio-list--yesno {
      flex-direction: row;
      gap: 0.65rem;
    }
    .radio-list.radio-list--yesno .radio-row {
      flex: 1 1 0;
      min-width: 0;
      justify-content: center;
      align-items: center;
      padding: 0.875rem 0.75rem;
    }
    .radio-list.radio-list--yesno .radio-row input { margin-top: 0; }
    .radio-row {
      display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.125rem;
      border: 2px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }
    .radio-row:hover { border-color: rgba(41, 116, 163, 0.4); background: var(--brand-softer); }
    .radio-row input { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--brand); flex-shrink: 0; }
    .radio-row .rq { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
    .radio-row.selected { border-color: var(--brand); background: var(--brand-softer); }

    .dyn-list { display: flex; flex-direction: column; gap: 0.65rem; }
    .dyn-row { display: flex; gap: 0.5rem; align-items: flex-start; }
    .dyn-row input { flex: 1; }
    .btn-icon {
      flex-shrink: 0; width: 44px; height: 48px; border: 1px solid var(--border); border-radius: var(--radius);
      background: var(--surface); cursor: pointer; font-size: 1.25rem; line-height: 1; color: var(--brand);
    }
    .btn-icon:hover { background: var(--brand-softer); color: var(--brand-hover); }
    .btn-text {
      margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; background: none; border: none; cursor: pointer;
      color: var(--brand); text-decoration: underline; font-family: inherit; padding: 0;
    }
    .btn-text:hover { color: var(--brand-hover); }

    .sig-wrap {
      border: 2px dashed rgba(41, 116, 163, 0.35); border-radius: var(--radius); background: var(--brand-softer);
      overflow: hidden; touch-action: none;
    }
    .sig-wrap canvas { display: block; width: 100%; height: 180px; cursor: crosshair; touch-action: none; }
    .sig-actions { display: flex; justify-content: flex-end; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); background: var(--surface); }
    .sig-actions button {
      font-size: 0.8125rem; font-weight: 600; font-family: inherit; background: none; border: none;
      cursor: pointer; color: var(--brand); text-decoration: underline;
    }
    .sig-actions button:hover { color: var(--brand-hover); }

    .review-hero {
      border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.25rem;
      background: var(--surface);
      margin-bottom: 1.25rem;
      box-shadow: var(--shadow);
    }
    .review-hero-inner {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    }
    .review-hero-text { flex: 1; min-width: 0; }
    .review-hero-icon {
      flex-shrink: 0; color: var(--brand); opacity: 0.22;
      margin-top: 0.15rem;
    }
    .review-hero-icon svg { display: block; width: 44px; height: 44px; }
    @media (min-width: 480px) {
      .review-hero-icon svg { width: 52px; height: 52px; }
    }
    .review-hero .badge-line { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); }
    .review-hero .title { font-size: 1.2rem; font-weight: 700; margin: 0.35rem 0 0; letter-spacing: -0.02em; color: var(--text); }
    .review-hero .price { font-size: 0.9375rem; color: var(--text-muted); margin-top: 0.35rem; }
    .review-block {
      border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.125rem; margin-bottom: 1rem;
      background: linear-gradient(180deg, #fff 0%, var(--brand-softer) 100%);
    }
    .review-block h3 {
      margin: 0 0 0.65rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand);
    }
    .review-row {
      display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    .review-row:last-child { border-bottom: none; }
    @media (min-width: 480px) {
      .review-row { grid-template-columns: minmax(130px, 36%) 1fr; align-items: start; }
    }
    .review-k { color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; }
    .review-v { word-break: break-word; }
    .review-sig {
      margin-top: 0.75rem; padding: 0.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    }
    .review-sig img { max-width: 100%; height: auto; max-height: 100px; display: block; }

    .field-error { font-size: 0.75rem; color: #b91c1c; margin-top: 0.35rem; display: none; }
    .has-error input, .has-error select, .has-error textarea { border-color: #fca5a5; background: #fef2f2; }
    .has-error .field-error { display: block; }

    .nav-actions {
      display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center;
      margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
      min-height: 48px;
      padding: var(--btn-py) var(--btn-px);
      font-size: 15px;
      font-weight: 500;
      font-family: var(--font-button);
      border-radius: var(--btn-radius);
      border: none;
      cursor: pointer;
      line-height: 1.2;
      letter-spacing: 0.01em;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s, opacity 0.12s, border-color 0.12s;
    }
    .btn:active { transform: scale(0.98); }
    .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
    .btn-primary {
      background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
      color: #fff;
      box-shadow: 0 2px 8px rgba(41, 116, 163, 0.28);
    }
    .btn-primary:hover:not(:disabled) {
      background: linear-gradient(180deg, var(--brand-hover) 0%, var(--brand) 100%);
      box-shadow: 0 4px 14px rgba(41, 116, 163, 0.38);
    }
    .btn-secondary {
      background: #2974a3;
      color: #fff;
      border: 2px solid #2974a3;
      box-shadow: 0 2px 8px rgba(41, 116, 163, 0.28);
    }
    .btn-secondary:hover:not(:disabled) {
      background: #315c82;
      border-color: #315c82;
      color: #fff;
      box-shadow: 0 4px 14px rgba(41, 116, 163, 0.38);
    }
    .btn-ghost { background: transparent; color: var(--brand); }
    .btn-ghost:hover:not(:disabled) { color: var(--brand-hover); background: var(--brand-tint); }
    .nav-spacer { flex: 1; }

    .pay-test-wrap {
      display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.85rem;
    }
    @media (min-width: 480px) {
      .pay-test-wrap { flex-direction: row; flex-wrap: wrap; }
    }
    .pay-test {
      flex: 1;
      min-width: 0;
      touch-action: manipulation;
      font-family: var(--font-button);
      font-weight: 600;
      font-size: 0.9375rem;
      min-height: 48px;
      padding: 0.85rem 1rem;
      border-radius: var(--radius);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    }
    .pay-test--fail {
      border: 2px solid #c5d9e6; background: #fff; color: var(--text);
    }
    .pay-test--fail:hover { border-color: rgba(41, 116, 163, 0.45); background: var(--brand-softer); }
    .pay-test--ok {
      border: 2px solid var(--brand); background: var(--brand); color: #fff;
      box-shadow: 0 2px 6px var(--brand-glow);
    }
    .pay-test--ok:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
    .pay-test:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .pay-test-result {
      margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: var(--radius);
      font-size: 0.9375rem; line-height: 1.45;
    }
    .pay-test-result--ok {
      background: var(--brand-softer); border: 1px solid rgba(41, 116, 163, 0.25); color: var(--text);
    }
    .pay-test-result--fail {
      background: #fef2f2; border: 1px solid #fecaca; color: #7f1d1d;
    }
    .pay-test-result strong { display: block; margin-bottom: 0.35rem; font-size: 1rem; }
    .pay-test-result-hint { margin: 0; font-size: 0.8125rem; color: var(--text-muted); }
    .pay-test-result--fail .pay-test-result-hint { color: #991b1b; }

    .link-inline {
      font-size: 0.8125rem; color: var(--text-muted); text-align: center; margin-top: 1.25rem; line-height: 1.5;
    }
    .link-inline button {
      background: none; border: none; color: var(--brand); font-weight: 600; cursor: pointer;
      text-decoration: underline; font-family: inherit; padding: 0; font-size: inherit;
    }
    .link-inline button:hover { color: var(--brand-hover); }

    .section-title {
      font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
      color: var(--brand); margin: 1.25rem 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
    }
    .section-title:first-child { margin-top: 0; }

    .checkbox-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; }
    .checkbox-row input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; accent-color: var(--brand); }

    /* Mobile / narrow: stepper scrolls so labels stay readable; larger tap row */
    @media (max-width: 640px) {
      .stepper {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        flex-wrap: nowrap;
        gap: 0.35rem;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 0.25rem 0.5rem 0.5rem;
        scrollbar-width: thin;
      }
      .stepper-item {
        flex: 0 0 auto;
        min-width: 3.25rem;
        padding: 0.35rem 0.15rem 0.5rem;
      }
      .stepper-dot { width: 28px; height: 28px; }
      .app-title { font-size: 1.05rem; }
      .brand-logo {
        height: calc(32px * 0.8);
        max-width: min(calc(180px * 0.8), calc(42vw * 0.8));
      }
      .sig-wrap canvas { height: 135px; }
    }
    @media (max-width: 360px) {
      .app-title { font-size: 0.98rem; }
    }
    .choice-btn, .btn, .term-card, .stepper-item.stepper-nav:not(.stepper-locked) {
      touch-action: manipulation;
    }
    input[type="number"] { width: 100%; min-height: var(--input-min-height); padding: 0.75rem 1rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
    input[type="number"]:focus {
      outline: none; border-color: var(--brand); background: var(--surface);
      box-shadow: 0 0 0 3px var(--brand-tint);
    }