/**
 * Treppy V4 Design System
 * Extracted from Claude design prototype — Chivo typeface, full token set.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Chivo (loaded via Google Fonts CDN in header.php)
   Weights: 400 regular | 500 medium | 600 semibold | 700 bold | 800 extrabold
   Plus Bold Italic for accent usage.
   Font link: <link href="https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,700&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   CUSTOM PROPERTIES — Design Tokens
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Font Family ────────────────────────────────────────────────────── */
  --font-family-base: "Chivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: var(--font-family-base);

  /* ─── Color: Base Scale ──────────────────────────────────────────────── */
  --ink: #0b2b46;
  --ink-2: #1a2732;
  --ink-soft: #0f476b;
  --blue: #147bd1;
  --blue-deep: #0f5fa3;
  --amber: #f4781e;
  --amber-deep: #d9650d;
  --skyblue: #87cffd;
  --on-ink: #e7f0fa;
  --on-ink-soft: #9fb8ce;
  --tint: #f4f8fc;
  --white: #ffffff;
  --green: #1a9e5c;
  --red: #d93025;

  /* ─── Color: Semantic Aliases ────────────────────────────────────────── */
  --text-heading: var(--ink);
  --text-body-color: var(--ink-soft);
  --text-accent: var(--blue);
  --text-on-dark: var(--on-ink);
  --text-on-dark-muted: var(--on-ink-soft);
  --text-hero-accent: var(--skyblue);
  --surface-base: var(--white);
  --surface-card: var(--white);
  --surface-tint: var(--tint);
  --surface-dark: var(--ink);
  --surface-dark-alt: var(--ink-2);
  --action-primary: var(--amber);
  --action-primary-hover: var(--amber-deep);
  --action-link: var(--blue);
  --action-link-hover: var(--blue-deep);

  /* ─── Color: Badge / Pill Fills ──────────────────────────────────────── */
  --pill-info-bg: rgba(20, 123, 209, 0.12);
  --pill-info-border: rgba(20, 123, 209, 0.4);
  --pill-info-text: var(--blue);
  --pill-success-bg: rgba(26, 158, 92, 0.12);
  --pill-success-text: var(--green);

  /* ─── Typography: Size Scale ─────────────────────────────────────────── */
  --text-hero: 66px;
  --text-h1: 44px;
  --text-h2: 32px;
  --text-card-h: 23px;
  --text-lead: 20px;
  --text-body: 15px;
  --text-button: 15px;
  --text-eyebrow: 14px;
  --text-card-eyebrow: 11px;
  --text-caption: 11px;
  --text-badge: 9.5px;

  /* ─── Typography: Weights ────────────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ─── Typography: Line Heights ───────────────────────────────────────── */
  --leading-hero: 1.18;
  --leading-h1: 1.05;
  --leading-h2: 1.1;
  --leading-lead: 1.5;
  --leading-body: 1.55;

  /* ─── Typography: Letter Spacing ─────────────────────────────────────── */
  --tracking-hero: -0.01em;
  --tracking-h1: -0.02em;
  --tracking-h2: -0.02em;
  --tracking-eyebrow: 0.08em;
  --tracking-card-eyebrow: 0.16em;
  --tracking-badge-ribbon: 1.68px;
  --tracking-badge-pill: 0.855px;

  /* ─── Spacing Scale ──────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 13px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 22px;
  --space-9: 24px;
  --space-10: 28px;
  --space-11: 32px;
  --space-12: 44px;
  --space-13: 54px;
  --space-14: 56px;
  --space-15: 64px;
  --space-16: 92px;
  --space-17: 120px;

  /* ─── Border Radius ──────────────────────────────────────────────────── */
  --radius-sm: 2.5px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ─── Component Spacing ──────────────────────────────────────────────── */
  --button-pad-y: 13px;
  --button-pad-x: 22px;
  --card-pad: 30px 28px 32px;
  --section-pad-y: var(--space-17);
  --container-max: 1160px;

  /* ─── Elevation / Shadows ────────────────────────────────────────────── */
  --shadow-cta: 0px 6px 18px -6px rgba(244, 120, 30, 0.5);
  --shadow-hover: 0 8px 20px rgba(11, 43, 70, 0.1);

  /* ─── Borders / Hairlines ────────────────────────────────────────────── */
  --border-hero: rgba(231, 240, 250, 0.14);
  --border-card: rgba(11, 43, 70, 0.11);
  --border-swatch: rgba(0, 0, 0, 0.08);
  --divider: rgba(11, 43, 70, 0.08);
  --hairline-card: 1px solid var(--border-card);
  --hairline-dark: 1px solid var(--border-hero);

  /* ─── Motion / Transitions ───────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --transition-interactive:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);

  /* ─── Overlays ───────────────────────────────────────────────────────── */
  --overlay-scrim: rgba(0, 0, 0, 0.35);
  --hover-tint-ink: rgba(11, 43, 70, 0.05);
  --hover-tint-light: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

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

body {
  background: var(--surface-tint);
  font-family: var(--font-family-base);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--action-link);
  text-decoration: none;
  transition: var(--transition-interactive);
}
a:hover {
  color: var(--action-link-hover);
  text-decoration: underline;
}

img {
  display: block;
  max-width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */

input,
select,
textarea {
  font-family: var(--font-family-base);
  font-size: 15px;
  color: var(--ink);
}

.v4-input,
.v4-select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: 15px;
  color: var(--ink);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.v4-input:focus,
.v4-select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 123, 209, 0.08);
}
.v4-input::placeholder {
  color: #9bb2c6;
}
.v4-input.is-error,
.v4-select.is-error {
  border-color: var(--red);
}

.v4-label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.v4-field-error {
  font-size: 13px;
  color: var(--red);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--button-pad-y) var(--button-pad-x);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-family-base);
  font-size: var(--text-button);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-interactive);
  text-decoration: none;
  line-height: 1;
}

.v4-btn--primary {
  background: var(--action-primary);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.v4-btn--primary:hover {
  background: var(--action-primary-hover);
  text-decoration: none;
  color: var(--white);
}

.v4-btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.v4-btn--outline:hover {
  background: var(--hover-tint-ink);
  text-decoration: none;
}

.v4-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 16px;
}
.v4-btn--ghost:hover {
  color: var(--ink);
  text-decoration: none;
}

.v4-btn--link {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 600;
  padding: 0;
  cursor: pointer;
}
.v4-btn--link:hover {
  color: var(--blue-deep);
}

.v4-btn .arrow::after {
  content: " \2192";
}

/* ═══════════════════════════════════════════════════════════════════════════
   PILLS / BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: var(--radius-md);
  font-size: var(--text-card-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-card-eyebrow);
  text-transform: uppercase;
}

.v4-pill--info {
  background: var(--pill-info-bg);
  color: var(--pill-info-text);
}

.v4-pill--success {
  background: var(--pill-success-bg);
  color: var(--pill-success-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EYEBROW / STEP LABELS
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-eyebrow {
  font-size: var(--text-card-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-card-eyebrow);
  text-transform: uppercase;
  color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-tooltip-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(11, 43, 70, 0.25);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: help;
  vertical-align: middle;
  margin-top: -2px;
}

.v4-tooltip {
  display: none;
  position: absolute;
  bottom: 24px;
  left: -10px;
  z-index: 20;
  width: 230px;
  max-width: 230px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--ink);
  color: var(--on-ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--shadow-hover);
  pointer-events: none;
}

/* Viewport-aware placement (set by JS). Vertical: up (default) / down. */
.v4-tooltip.v4-tooltip--down {
  bottom: auto;
  top: 24px;
}
.v4-tooltip.v4-tooltip--up {
  top: auto;
  bottom: 24px;
}

/* Horizontal: align tooltip to the left edge (default) or right edge of trigger. */
.v4-tooltip.v4-tooltip--align-left {
  left: -10px;
  right: auto;
}
.v4-tooltip.v4-tooltip--align-right {
  left: auto;
  right: -10px;
}

.v4-tooltip-trigger:hover .v4-tooltip,
.v4-tooltip-trigger.is-active .v4-tooltip {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WEBSITE FIELD — fixed https:// prefix
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-website-input {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.v4-website-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: var(--tint);
  border: 1px solid var(--border-input, rgba(11, 43, 70, 0.18));
  border-right: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  color: var(--ink-soft);
  font-size: 15px;
  white-space: nowrap;
  user-select: none;
}

.v4-website-input__field {
  flex: 1;
  min-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PASSWORD FIELD — show/hide toggle
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-password-wrap {
  position: relative;
  display: block;
}

.v4-input--password {
  padding-right: 42px;
}

.v4-input-hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.v4-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  cursor: pointer;
  opacity: 0.55;
  /* eye icon (password hidden) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b2b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.v4-password-toggle:hover {
  opacity: 0.85;
}

.v4-password-toggle.is-visible {
  /* eye-off icon (password shown) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b2b46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIGNUP LAYOUT — Card Shell
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-signup-shell {
  display: flex;
  flex-direction: row;
  max-width: var(--container-max);
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 730px;
}

.v4-signup-wrapper {
  flex: 1;
  padding: 28px 32px 92px;
}

/* ─── Sidebar (Rail) ───────────────────────────────────────────────────── */

.v4-sidebar {
  width: 296px;
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 36px 28px 32px;
  background: radial-gradient(120% 140% at 0% 0%, #154562, #0b2b46);
}

.v4-sidebar__brand {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--white);
}

.v4-sidebar__tagline {
  margin: 8px 0 32px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-ink-soft);
  max-width: 210px;
}

.v4-sidebar__steps {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v4-step {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 9px 0;
}

.v4-step__dot {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.v4-step__dot--done {
  background: var(--skyblue);
  color: var(--ink);
}
.v4-step__dot--active {
  background: var(--amber);
  color: var(--ink);
}
.v4-step__dot--pending {
  background: transparent;
  color: var(--on-ink-soft);
  box-shadow: inset 0 0 0 1px rgba(231, 240, 250, 0.24);
}

.v4-step__label {
  font-size: 15px;
}
.v4-step__label--done {
  color: var(--on-ink);
  font-weight: 400;
}
.v4-step__label--active {
  color: var(--white);
  font-weight: 600;
}
.v4-step__label--pending {
  color: var(--on-ink-soft);
  font-weight: 400;
}

/* Sidebar benefits list */
.v4-sidebar__benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 28px;
  border-top: 1px solid rgba(231, 240, 250, 0.14);
}

.v4-sidebar__benefit {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--on-ink-soft);
}

.v4-sidebar__benefit::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 2.5px;
  background: var(--skyblue);
  flex: none;
}

/* ─── Main Content Area ────────────────────────────────────────────────── */

.v4-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.v4-main__content {
  flex: 1;
  padding: 54px 44px 44px;
}

.v4-main__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 44px;
  border-top: 1px solid var(--divider);
  background: var(--white);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SELECTION CARDS (Radio / Checkbox style)
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 28px 15px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-card);
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  transition: var(--transition-interactive);
}
.v4-choice:hover {
  background: var(--hover-tint-ink);
}
.v4-choice.is-selected {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.v4-choice__dot {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgba(11, 43, 70, 0.25);
}
.v4-choice.is-selected .v4-choice__dot {
  box-shadow: inset 0 0 0 5px var(--blue);
}

/* Card-style checkbox (license, carriers) */
.v4-card-choice {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  cursor: pointer;
  transition: var(--transition-interactive);
}
.v4-card-choice:hover {
  background: var(--hover-tint-ink);
}
.v4-card-choice.is-selected {
  box-shadow: inset 0 0 0 2px var(--blue);
}

.v4-card-choice__dot {
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--radius-md);
  border: 1px solid rgba(11, 43, 70, 0.25);
}
.v4-card-choice.is-selected .v4-card-choice__dot {
  box-shadow: inset 0 0 0 5px var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OTP INPUT
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-otp-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.v4-otp-input {
  width: 56px;
  height: 64px;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  padding: 0;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.v4-otp-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(20, 123, 209, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMMISSION CARD (Dark gradient)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Commission banner (finish page — new UI) */
.v4-commission-banner {
  position: relative;
  overflow: hidden;
  padding: 30px 34px;
  border-radius: var(--radius-lg);
  border-left: 6px solid var(--amber);
  background: radial-gradient(130% 160% at 0% 0%, #154562, #0b2b46);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.v4-commission-banner__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--skyblue);
}

.v4-commission-banner__rate-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  margin-top: 6px;
}

.v4-commission-banner__upto {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-ink-soft);
  padding-bottom: 12px;
}

.v4-commission-banner__rate {
  font-size: 96px;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--white);
}

.v4-commission-banner__divider {
  display: block;
  width: 90px;
  height: 3px;
  margin: 18px auto 14px;
  background: var(--amber);
  border-radius: 2px;
}

.v4-commission-banner__note {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
}

/* Per-company commission breakdown (invited agents) */
.v4-commission-banner__breakdown {
  margin: 14px auto 4px;
  max-width: 560px;
  text-align: left;
}

.v4-commission-banner__co-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.v4-commission-banner__co-row:last-child {
  border-bottom: none;
}

.v4-commission-banner__co-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.v4-commission-banner__co-rates {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  text-align: right;
}

/* "Approved" corner ribbon */
.v4-commission-banner__ribbon {
  position: absolute;
  top: 30px;
  right: -40px;
  transform: rotate(45deg);
  width: 170px;
  padding: 6px 0;
  text-align: center;
  background: var(--amber);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 480px) {
  .v4-commission-banner__rate {
    font-size: 54px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILE UPLOAD ZONE
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-upload-zone {
  margin-top: 20px;
  padding: 20px 22px;
  border: 1px dashed rgba(11, 43, 70, 0.25);
  border-radius: var(--radius-lg);
  background: var(--tint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GRID UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-grid {
  display: grid;
  gap: 20px;
}

.v4-grid--2col {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* Fixed 2-column grid — keeps the first field in the left column even when the
   second cell is empty/hidden (so the dropdown doesn't stretch full width). */
.v4-grid--fixed2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
  .v4-grid--fixed2 {
    grid-template-columns: 1fr;
  }
}

.v4-grid--3col {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .v4-signup-shell {
    flex-direction: column;
  }
  .v4-sidebar {
    display: none;
  }
  .v4-main__content {
    padding: 28px 24px 32px;
  }
  .v4-main__footer {
    padding: 20px 24px;
  }
  .v4-signup-wrapper {
    padding: 16px 16px 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT CLASSES (replacing inline styles)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Step indicator row */
.v4-step-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* Page headings */
.v4-page-title {
  margin: 0;
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  font-weight: 700;
  /*max-width: 600px;*/
}

.v4-page-title--sm {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}

.v4-page-subtitle {
  margin: 14px 0 32px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Form sections */
.v4-form-section {
  max-width: 720px;
}

.v4-form-section--mt {
  margin-top: 20px;
}

.v4-form-section--border {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
}

/* Carrier card layout */
.v4-carrier-card {
  padding: 18px 20px;
  align-items: flex-start;
}

.v4-carrier-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v4-carrier-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.v4-carrier-card__underwriter {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.v4-carrier-card__logo {
  flex: none;
  max-width: 100px;
}

.v4-carrier-card__toggle {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-top: 4px;
  text-decoration: none;
  cursor: pointer;
}
.v4-carrier-card__toggle:hover {
  text-decoration: underline;
}

.v4-carrier-card__plans {
  display: none;
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--tint);
  border: 1px solid rgba(11, 43, 70, 0.08);
}
.v4-carrier-card__plans.is-open {
  display: block;
}

.v4-carrier-card__plans-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.v4-carrier-card__plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px 12px;
}

.v4-carrier-card__plan-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  padding: 7px 12px;
  background: var(--white);
  border: 1px solid rgba(11, 43, 70, 0.1);
  border-radius: 8px;
}

.v4-carrier-card__plan-check {
  flex: none;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(26, 158, 92, 0.12);
  color: var(--green);
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}

/* Agreement section */
.v4-agreement {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
  max-width: 720px;
}

.v4-agreement__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.v4-agreement__checkbox {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  accent-color: var(--blue);
}

.v4-agreement__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.v4-agreement__text a {
  color: var(--blue);
}

/* Gate question sections */
.v4-gate-questions {
  display: grid;
  gap: 32px;
  margin-top: 32px;
  max-width: 680px;
}

.v4-gate-question__title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.v4-gate-question__desc {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  /*max-width: 460px;*/
}

.v4-gate-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.v4-gate-license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.v4-gate-hint {
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 520px;
}

/* Alert / message boxes */
.v4-alert {
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 24px;
}

.v4-alert--error {
  background: rgba(217, 50, 13, 0.08);
  color: var(--red);
}

.v4-alert--success {
  background: var(--pill-success-bg);
  color: var(--green);
  line-height: 1.5;
}

/* Business requirements info box */
.v4-requirements-box {
  margin-top: 16px;
  max-width: 720px;
  padding: 18px 22px;
  background: var(--tint);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
}

.v4-requirements-box--license {
  margin-top: 20px;
  padding: 20px 24px;
}

.v4-requirements-box__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 14px;
}

.v4-requirements-box__row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--divider);
}

.v4-requirements-box__company {
  font-size: 14px;
  font-weight: 700;
  width: 180px;
  flex: none;
}

.v4-requirements-box__desc {
  font-size: 14px;
  color: var(--ink-soft);
}

/* OTP section */
.v4-otp-section__resend {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.v4-otp-section__note {
  font-size: 14px;
  color: var(--ink-soft);
}

.v4-otp-section__help {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 440px;
}

/* Done page cards */
.v4-done-cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 680px;
}

.v4-done-card {
  flex: 1;
  min-width: 200px;
  padding: var(--card-pad);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
}

.v4-done-card__title {
  margin: 10px 0 0;
  font-size: var(--text-card-h);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.v4-done-card__desc {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Sidebar review section */
.v4-sidebar__review {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(231, 240, 250, 0.14);
}

.v4-sidebar__review-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--skyblue);
  margin-bottom: 12px;
}

.v4-sidebar__review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--on-ink-soft);
  line-height: 1.45;
}

.v4-sidebar__review-name {
  color: var(--on-ink);
  font-weight: 600;
}

.v4-sidebar__review-biz {
  color: var(--on-ink);
  font-weight: 600;
  margin-top: 6px;
}

/* Affiliate outcome */
.v4-outcome__details {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--divider);
  max-width: 520px;
}

.v4-outcome__details-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.v4-outcome__details-grid {
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Auth pages (login / forgot) */
.v4-auth-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 420px;
}

.v4-auth-title {
  margin: 0 0 8px;
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  font-weight: 700;
}

.v4-auth-subtitle {
  margin: 0 0 32px;
  font-size: 15px;
  color: var(--ink-soft);
}

.v4-auth-form {
  display: grid;
  gap: 20px;
}

.v4-auth-footer {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}

.v4-auth-password-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.v4-auth-password-row a {
  font-size: 13px;
  font-weight: 500;
}

/* Responsive overrides */
@media (max-width: 768px) {
  .v4-page-title {
    font-size: 28px;
  }
  .v4-page-title--sm {
    font-size: 24px;
  }
  .v4-gate-license-grid {
    grid-template-columns: 1fr;
  }
  .v4-carrier-card__plans-grid {
    grid-template-columns: 1fr;
  }
  .v4-done-cards {
    flex-direction: column;
  }
  .v4-requirements-box__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .v4-requirements-box__company {
    width: auto;
  }
  .v4-carrier-card__logo {
    max-width: 70px;
  }
}

/* Additional utility classes to eliminate remaining inline styles */
.v4-mt-32 {
  margin-top: 32px;
}
.v4-mt-28 {
  margin-top: 28px;
}
.v4-mt-24 {
  margin-top: 24px;
}
.v4-mt-20 {
  margin-top: 20px;
}
.v4-mt-16 {
  margin-top: 16px;
}
.v4-mt-8 {
  margin-top: 8px;
}
.v4-mb-20 {
  margin-bottom: 20px;
}
.v4-mb-8 {
  margin-bottom: 8px;
}

.v4-page-subtitle--wide {
  max-width: 920px;
}
.v4-label--narrow {
  max-width: 320px;
}
.plan-name-sub {
  vertical-align: super;
}

.v4-btn--full {
  width: 100%;
  justify-content: center;
}
.v4-btn--full-mt {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}

.v4-carriers-grid {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

/* Tooltip label flex pattern */
.v4-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.v4-label-row--baseline {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.v4-label-optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.v4-mt-4 {
  margin-top: 4px;
}
.v4-accent-blue {
  font-style: italic;
  font-weight: 700;
  color: var(--blue);
}

/* License choice card labels */
.v4-license-code {
  font-size: 15px;
  font-weight: 600;
  width: 56px;
}
.v4-license-desc {
  font-size: 14px;
  color: var(--ink-soft);
}
.v4-license-none {
  font-size: 14px;
  font-weight: 600;
}
.v4-bg-tint {
  background: var(--tint);
}

/* Auth shell variants */
.v4-signup-shell--auth {
  min-height: 560px;
}
.v4-signup-shell--short {
  min-height: 480px;
}
.v4-sidebar__tagline--narrow {
  max-width: 220px;
}

/* Contract type radio within carrier cards */
.v4-contract-type {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.v4-contract-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
}

.v4-contract-radio input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
  margin: 0;
  cursor: pointer;
}

.v4-contract-radio__label {
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 480px) {
  .v4-contract-type {
    flex-direction: column;
    gap: 8px;
  }
}

/* Static carrier card (no click/hover/selection) */
.v4-carrier-card-static {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--white);
}

/* Carrier card v2 (finish page — new UI) */
.v4-carrier-card2 {
  padding: 20px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--white);
}

.v4-carrier-card2__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.v4-carrier-card2__logo img {
  max-height: 26px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
}

.v4-carrier-card2__logo-placeholder {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.v4-carrier-card2__question {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* Pill-style contract options */
.v4-contract-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.v4-contract-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.v4-contract-pill input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.v4-contract-pill__dot {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 999px;
  border: 2px solid rgba(11, 43, 70, 0.3);
  position: relative;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.v4-contract-pill__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.v4-contract-pill.is-selected {
  border-color: var(--blue);
  background: rgba(20, 123, 209, 0.06);
}

.v4-contract-pill.is-selected .v4-contract-pill__dot {
  border-color: var(--blue);
}

.v4-contract-pill.is-selected .v4-contract-pill__dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--blue);
}

.v4-carrier-card2__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.v4-carrier-card2__help {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.v4-carrier-card2__plans-link {
  flex: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.v4-carrier-card2__plans-link:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .v4-contract-pills {
    flex-direction: column;
    align-items: stretch;
  }
  .v4-carrier-card2__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LICENSE REQUIREMENTS CARD (Step 2 — entity-type driven)
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-license-req-card {
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px solid rgba(11, 43, 70, 0.11);
  border-radius: 14px;
  background: var(--tint);
  max-width: 720px;
}

.v4-license-req-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.v4-license-req-card__intro {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.v4-license-req-card__intro .v4-entity-highlight {
  font-weight: 600;
  color: var(--ink);
  background: var(--pill-info-bg);
  padding: 2px 7px;
  border-radius: 8px;
}

.v4-license-req-card__divider {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 43, 70, 0.08);
}

.v4-license-req-card__path-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.v4-license-req-card__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v4-license-req-card__items li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
}

.v4-license-req-card__items li .v4-req-glyph {
  flex: none;
  width: 14px;
  margin-top: 1px;
  font-size: 14px;
  font-weight: 700;
}

.v4-license-req-card__items li.v4-req-item--upload {
  color: var(--ink);
  font-weight: 600;
}

.v4-license-req-card__items li.v4-req-item--upload .v4-req-glyph {
  color: var(--blue);
}

.v4-license-req-card__items li.v4-req-item--info {
  color: var(--ink-soft);
  font-weight: 400;
}

.v4-license-req-card__items li.v4-req-item--info .v4-req-glyph {
  color: var(--ink-soft);
}

.v4-license-req-upload-note {
  margin-top: 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 720px;
}

.v4-text--blue {
  color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AFFILIATE PROFILE — OFFER CARDS & UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

.v4-form-grid {
  display: grid;
  gap: 28px;
  max-width: 720px;
}

.v4-form-section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 13px;
}

.v4-offer-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.v4-card-choice--offer {
  align-items: flex-start;
  padding: 18px 20px;
}

.v4-card-choice__dot--round {
  margin-top: 3px;
  border-radius: 999px;
}

.v4-card-choice__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v4-card-choice__title {
  font-size: 20px;
  font-weight: 600;
}

.v4-card-choice__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.v4-website-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
}

.v4-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}

.v4-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

.v4-mb-8 {
  margin-bottom: 8px;
}
.v4-ml-4 {
  margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   WELCOME KIT (Done page)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Agent portal guide banner (done page) */
.v4-guide-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 32px;
  padding: 22px 26px;
  max-width: 720px;
  border-radius: var(--radius-lg);
  border-left: 6px solid var(--amber);
  background: radial-gradient(130% 160% at 0% 0%, #154562, #0b2b46);
  text-decoration: none;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

.v4-guide-banner:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-hover);
}

.v4-guide-banner__icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.v4-guide-banner__icon img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.v4-guide-banner__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.v4-guide-banner__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--skyblue);
}

.v4-guide-banner__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}

.v4-guide-banner__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--on-ink-soft);
}

.v4-guide-banner__cta {
  flex: none;
  align-self: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.v4-guide-banner:hover .v4-guide-banner__cta {
  background: var(--skyblue);
  color: var(--ink);
}

@media (max-width: 600px) {
  .v4-guide-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .v4-guide-banner__cta {
    align-self: stretch;
    text-align: center;
  }
}

.v4-welcome-kit {
  margin-top: 32px;
  padding: 24px 28px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--white);
  max-width: 720px;
}

.v4-welcome-kit__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}

.v4-welcome-kit__desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

.v4-welcome-kit__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v4-welcome-kit__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: var(--transition-interactive);
}

.v4-welcome-kit__item:hover {
  background: var(--tint);
  text-decoration: none;
  color: var(--ink);
}

.v4-welcome-kit__item-title {
  font-size: 14px;
  font-weight: 600;
  flex: 1;
}

.v4-welcome-kit__item-desc {
  font-size: 13px;
  color: var(--ink-soft);
  display: none;
}

.v4-welcome-kit__item-arrow {
  flex: none;
  font-size: 16px;
  color: var(--blue);
  font-weight: 600;
}