@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600&display=swap');

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

:root {
  --navy: #0A0E1A;
  --navy-card: #0E1220;
  --navy-deep: #07090F;
  --blue: #418FFF;
  --blue-light: #C0D8FF;
  --blue-dim: #2A6FE0;
  --blue-faint: rgba(65, 143, 255, .07);
  --blue-glow: rgba(65, 143, 255, .15);
  --green: #10CB7A;
  --text-1: rgba(255, 255, 255, .96);
  --text-2: rgba(255, 255, 255, .78);
  --text-3: rgba(255, 255, 255, .58);
  --border: rgba(255, 255, 255, .09);
  --border-2: rgba(255, 255, 255, .16);
  --input-bg: #0A0E1A;
  --error: #FF5967;
  --warning: #FFB547;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --font: 'Inter', sans-serif;
  --mono: 'Inter', sans-serif;
  --ease: 0.15s ease;
}

html {
  font-size: 15px
}

body {
  font-family: var(--font);
  background: var(--navy);
  color: var(--text-1);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

h1,
h2,
h3,
h4,
h5,
h6,
.module-title {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: .01em
}

/* ─── background gradient blobs ─────────────────────────── */
.bg-blob-1 {
  width: 867px;
  height: 867px;
  position: fixed;
  left: 625px;
  top: -21px;
  transform: rotate(-18.7deg);
  background: rgba(59, 130, 246, .25);
  filter: blur(150px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.bg-blob-2 {
  width: 658px;
  height: 658px;
  position: fixed;
  left: -139px;
  top: 295px;
  transform: rotate(16.86deg);
  background: rgba(59, 130, 246, .50);
  filter: blur(250px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ─── topbar ─────────────────────────────────────────────── */
.topbar {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, .06);
  padding: 0 2rem;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: center;
  gap: 1rem;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.topbar>*:first-child {
  justify-self: start;
  min-width: 0
}

.topbar>*:not(:first-child):last-child {
  justify-self: end;
  min-width: 0
}

.topbar>*:not(:first-child):not(:last-child) {
  justify-self: center;
  min-width: 0
}

.topbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0
}

.topbar-logo img {
  height: 27px;
  width: auto
}

.topbar-badge {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-faint);
  border: 1px solid rgba(65, 143, 255, .22);
  border-radius: 20px;
  padding: 2px 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-family: var(--mono);
  white-space: nowrap;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  max-width: 100%
}

.topbar-partner {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-partner strong {
  color: var(--text-1);
  font-weight: 500
}

/* ─── layout ─────────────────────────────────────────────── */
.layout {
  display: block;
  min-height: calc(100vh - 60px)
}

/* ─── top stepper (replaces the old side navigation) ─────── */
.stepper-top {
  position: sticky;
  top: 60px;
  z-index: 90;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(24px) saturate(180%) brightness(1.05);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 1.15rem 1.5rem;
  transition: background .3s ease, border-color .3s ease;
}

.stepper-track {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.stepper-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: var(--r-md);
  text-align: center;
  cursor: pointer;
  transition: background var(--ease);
}

.stepper-step:hover {
  background: rgba(255, 255, 255, .025)
}

.stepper-step.active .stepper-label {
  color: var(--text-1);
  font-weight: 500
}

.stepper-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--border-2);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text-3);
  font-weight: 500;
  transition: all var(--ease);
}

.stepper-step.active .stepper-dot {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-faint);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.stepper-step.completed .stepper-dot {
  background: var(--blue);
  border-color: var(--blue);
  color: white;
  font-size: 12px;
}

.stepper-info {
  min-width: 0;
  line-height: 1.25
}

.stepper-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 400;
  transition: color var(--ease);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 130px;
}

.stepper-connector {
  flex: 0 1 32px;
  min-width: 12px;
  height: 1.5px;
  background: var(--border);
  transition: background var(--ease);
  margin: 19px 0 0;
  align-self: flex-start;
}

.stepper-connector.completed {
  background: var(--blue)
}

/* ─── header + stepper: invert text/stroke colors only while the white document scrolls beneath — background stays translucent ── */
.topbar.on-light,
.stepper-top.on-light {
  border-bottom-color: rgba(15, 23, 42, .09);
}

/* ─── stepper: inverted (dark) colors while a light document scrolls beneath it — blue accents on active/completed states stay blue ── */
.stepper-top.on-light .stepper-step:not(.active):not(.completed) .stepper-dot {
  border-color: rgba(10, 14, 26, .22);
  color: rgba(10, 14, 26, .75)
}

.stepper-top.on-light .stepper-label {
  color: rgba(10, 14, 26, .68)
}

.stepper-top.on-light .stepper-step.active .stepper-label {
  color: rgba(10, 14, 26, .92)
}

.stepper-top.on-light .stepper-connector:not(.completed) {
  background: rgba(10, 14, 26, .16)
}

.stepper-top.on-light .stepper-step:hover {
  background: rgba(10, 14, 26, .035)
}

/* ─── main ───────────────────────────────────────────────── */
.main {
  padding: 2.5rem 2rem 3.5rem;
  max-width: 820px;
  margin: 0 auto
}

.main-help {
  margin: 2.5rem auto 0;
  background: var(--blue-faint);
  border: 1px solid rgba(65, 143, 255, .15);
  border-radius: var(--r-md);
  padding: .85rem 1rem;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.55;
  text-align: center;
}

.main-help a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500
}

.main-help a:hover {
  color: var(--blue-light)
}

.progress-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 2.5rem
}

.progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-dim), var(--blue));
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.progress-label {
  font-size: 11.5px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap
}

/* ─── module header ──────────────────────────────────────── */
.module-header {
  margin-bottom: 2rem
}

.module-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .65rem
}

.module-tag {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--blue);
  background: var(--blue-faint);
  border: 1px solid rgba(65, 143, 255, .2);
  border-radius: var(--r-sm);
  padding: 2px 8px;
  letter-spacing: .06em;
}

.module-timing {
  font-size: 12px;
  color: var(--text-3)
}

.module-title {
  font-size: 25px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -.025em;
  margin-bottom: .5rem;
  line-height: 1.2;
}

.module-desc {
  font-size: 13.5px;
  color: var(--text-2);
  max-width: 690px;
  line-height: 1.7
}

/* ─── form sections (card style) ─────────────────────────── */
.form-section {
  margin-bottom: 1.5rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
}

.section-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

/* ─── contract paper (single-box document layout) ─────────── */
.contract-paper {
  --text-1: #171B26;
  --text-2: #4A5468;
  --text-3: #828C9E;
  --border: rgba(15, 23, 42, .09);
  --border-2: rgba(15, 23, 42, .16);
  /* The dark-theme red is tuned for navy behind it and drops to ~3:1 on
     white paper — too light to read as an error message here. */
  --error: #C62A38;
  background: #FFFFFF;
  color: var(--text-1);
  border-radius: var(--r-lg);
  padding: 2.5rem 2.75rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(2, 6, 20, .06);
  box-shadow: 0 20px 48px rgba(2, 6, 20, .35);
}

.contract-paper .section-label {
  color: var(--blue-dim)
}

.contract-paper .table-input thead th {
  background: rgba(15, 23, 42, .025)
}

.contract-paper .table-input tbody tr:hover {
  background: rgba(15, 23, 42, .02)
}

.contract-paper input[type=text] {
  background: #F7F8FA;
  border: 1px solid rgba(15, 23, 42, .14)
}

.contract-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: .9rem;
  line-height: 1.3
}

.contract-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--border)
}

.contract-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none
}

.field {
  margin-bottom: 1rem
}

.field:last-child {
  margin-bottom: 0
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.field-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem
}

label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin-bottom: 5px;
  letter-spacing: .01em
}

label .required {
  color: var(--blue);
  margin-left: 3px
}

label .hint {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11.5px;
  margin-left: 4px
}

/* ─── inputs ─────────────────────────────────────────────── */
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=date],
input[type=url],
select,
textarea {
  width: 100%;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 13.5px;
  padding: .65rem .9rem;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
  appearance: none;
  -webkit-appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
  font-size: 13px
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

/* Browser autofill paints its own opaque background over the field, which
   breaks the translucent input against the navy card behind it. The huge
   transition delay is the one override Chrome honours without forcing an
   opaque colour of our own — it defers the autofill repaint indefinitely,
   so the field keeps the exact background it has when typed into. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--text-1);
  transition: background-color 600000s 0s, color 600000s 0s;
}

input:autofill,
select:autofill,
textarea:autofill {
  -webkit-text-fill-color: var(--text-1);
  caret-color: var(--text-1);
  transition: background-color 600000s 0s, color 600000s 0s;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6880' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 2rem;
  cursor: pointer;
}

select option {
  background: var(--navy-card);
  color: var(--text-1)
}

/* ─── validation ─────────────────────────────────────────────
   Replaces the browser's native validation bubble. See
   formValidation.js — it sets .has-error and data-error on the
   .field wrapper, and the message is drawn from that attribute. */
.field.has-error input:not([type=radio]):not([type=checkbox]),
.field.has-error select,
.field.has-error textarea {
  border-color: var(--error);
}

.field.has-error input:not([type=radio]):not([type=checkbox]):focus,
.field.has-error select:focus,
.field.has-error textarea:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(255, 89, 103, .16);
}

.field.has-error>label {
  color: var(--error);
}

.field.has-error[data-error]::after {
  content: attr(data-error);
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--error);
}

/* same treatment for the plain Yes/No toggle and the "select one" radio-card
   group, which aren't wrapped in a .field */
.po-yn.has-error,
.radio-cards.has-error {
  outline: 1px solid var(--error);
  outline-offset: 6px;
  border-radius: var(--r-md);
}

.po-yn.has-error[data-error]::after,
.radio-cards.has-error[data-error]::after {
  content: attr(data-error);
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--error);
}

/* Sits next to the submit button: the field-level messages say what to fix,
   this says why nothing was submitted. */
.form-error-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: 12.5px;
  color: var(--error);
  text-align: center;
}

/* ─── pill toggle: Yes/No-style choice, lighter weight than .radio-cards
   (no radio dot) — for secondary questions that don't need a full card ── */
.pill-toggle {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.pill-toggle button {
  min-width: 74px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border-2);
  color: var(--text-2);
  padding: .5rem 1rem;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--ease);
}

.pill-toggle button:hover {
  color: var(--text-1)
}

.pill-toggle button.active {
  background: var(--blue-faint);
  border-color: var(--blue);
  color: var(--blue);
}

/* lucide "calendar" icon, same stroke color as the select chevron above */
input[type=date]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C6880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 18px;
  height: 18px;
  opacity: 1;
  cursor: pointer;
}

/* ─── date field + custom calendar panel ─────────────────── */
.date-field {
  position: relative
}

.date-field input[type=date] {
  padding-right: 2.4rem
}

/* `.custom` is set by DateField only when it renders its own panel, so
   the native popup trigger is hidden exactly when ours replaces it.
   Driving both from one flag (instead of a matching media query here)
   makes it impossible to end up with neither trigger showing. */
.date-field.custom input[type=date]::-webkit-calendar-picker-indicator {
  display: none
}

.date-trigger {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  background: none;
  border: none;
  padding: 2px;
  color: #5C6880;
  cursor: pointer;
  transition: color var(--ease);
}

.date-trigger:hover {
  color: var(--blue)
}

/* Portalled to <body> and positioned against the viewport (top/left are set
   inline by DateField), so it clears every stacking context on the page —
   .form-section, .topbar and .stepper-top all create their own. */
.date-panel {
  position: fixed;
  z-index: 1200;
  width: 268px;
  padding: .85rem;
  /* same white wash the containers use, over a translucent navy so the
     blur behind it still reads */
  background:
    linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)),
    rgba(14, 18, 32, .72);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .55), 0 0 0 1px rgba(65, 143, 255, .06);
  animation: datePanelIn .16s ease;
}

@keyframes datePanelIn {
  from {
    opacity: 0;
    transform: translateY(-4px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.date-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}

.date-panel-month {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}

.date-panel-nav {
  display: flex;
  gap: 2px
}

.date-panel-nav button {
  display: flex;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  padding: 3px;
  cursor: pointer;
  transition: all var(--ease);
}

.date-panel-nav button:hover {
  color: var(--blue);
  background: var(--blue-faint);
  border-color: var(--blue);
}

.date-panel-week,
.date-panel-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.date-panel-week {
  margin-bottom: 4px
}

.date-panel-week span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  padding: 2px 0;
}

.date-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--text-1);
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.date-day:hover {
  background: var(--blue-faint);
  color: var(--blue);
}

.date-day.outside {
  color: var(--text-3);
  opacity: .55;
}

.date-day.today {
  border-color: var(--border-2);
  color: var(--blue-light);
}

.date-day.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}

.date-panel-foot {
  display: flex;
  justify-content: space-between;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--border);
}

.date-panel-foot button {
  background: none;
  border: none;
  padding: 2px 4px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background var(--ease);
}

.date-panel-foot button:hover {
  background: var(--blue-faint)
}

textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.6
}

/* ─── checkbox / radio ───────────────────────────────────── */
.check-group {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: .25rem
}

.check-group.inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem 1.5rem
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-md);
  padding: .6rem .75rem;
}

.check-item input {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin-top: 2px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0
}

.check-label {
  font-size: 13.5px;
  color: var(--text-1);
  line-height: 1.4
}

.check-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px
}

/* ─── radio cards ────────────────────────────────────────── */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: .65rem;
  margin-top: .25rem
}

.radio-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r-lg);
  padding: .9rem 1rem;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.radio-card:hover {
  border-color: var(--border-2);
  background: rgba(255, 255, 255, .02)
}

.radio-card.selected {
  border-color: var(--blue);
  background: var(--blue-faint);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.radio-card input[type=radio] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  margin-top: 2px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0
}

.radio-card-label {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  line-height: 1.3
}

.radio-card-sub {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 3px
}

.po-badge-recommended {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 9px;
  border: 1px solid rgba(65, 143, 255, .35);
  border-radius: 999px;
  background: #fff;
  color: var(--blue-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
}

/* ─── prefix / suffix inputs ─────────────────────────────── */
.input-prefix-group {
  display: flex;
  align-items: center
}

.input-prefix {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--r-md) 0 0 var(--r-md);
  padding: .65rem .75rem;
  font-size: 13px;
  color: var(--text-3);
  font-family: var(--mono);
  white-space: nowrap;
}

.input-prefix-group input {
  border-radius: 0 var(--r-md) var(--r-md) 0;
  border-left: none
}

.input-suffix-group {
  display: flex;
  align-items: center
}

.input-suffix {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: .65rem .75rem;
  font-size: 13px;
  color: var(--text-3);
  white-space: nowrap;
}

.input-suffix-group input {
  border-radius: var(--r-md) 0 0 var(--r-md);
  border-right: none
}

/* ─── table ──────────────────────────────────────────────── */
.table-wrapper {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%
}

.table-input {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}

.table-input thead th {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .02);
}

.table-input tbody tr {
  border-bottom: 1px solid var(--border)
}

.table-input tbody tr:last-child {
  border-bottom: none
}

.table-input tbody tr:hover {
  background: rgba(255, 255, 255, .015)
}

.table-input tbody td {
  padding: .5rem .75rem;
  vertical-align: middle;
  color: var(--text-1)
}

.table-input tbody td.muted {
  color: var(--text-3);
  font-size: 12px
}

.table-input input[type=number],
.table-input input[type=text] {
  padding: .4rem .65rem;
  font-size: 13px
}

/* ─── info / note boxes ──────────────────────────────────── */
.info-box {
  background: var(--blue-faint);
  border: 1px solid rgba(65, 143, 255, .18);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.info-box-icon {
  color: var(--blue);
  font-size: 15px;
  margin-top: 2px;
  flex-shrink: 0
}

.note-box {
  background: rgba(255, 181, 71, .05);
  border: 1px solid rgba(255, 181, 71, .18);
  border-radius: var(--r-md);
  padding: .85rem 1.1rem;
  font-size: 12.5px;
  color: #A87B35;
  line-height: 1.6;
  margin-top: .75rem;
  margin-bottom: 1rem;
}

/* ─── repeater ───────────────────────────────────────────── */
.repeater-entry {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: .75rem;
}

.repeater-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem
}

.repeater-entry-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: .06em;
  text-transform: uppercase
}

.repeater-remove {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
  font-size: 11.5px;
  padding: 3px 10px;
  cursor: pointer;
  font-family: var(--font);
  transition: border-color var(--ease), color var(--ease);
}

.repeater-remove:hover {
  border-color: var(--error);
  color: var(--error)
}

.repeater-add {
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: 13px;
  padding: .75rem 1rem;
  width: 100%;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color var(--ease), color var(--ease), background var(--ease);
}

.repeater-add:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-faint)
}

/* ─── tags ───────────────────────────────────────────────── */
.tag-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .5rem .75rem;
  min-height: 44px;
  cursor: text;
  transition: border-color var(--ease), box-shadow var(--ease);
}

.tag-input-wrap:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow)
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--blue-faint);
  border: 1px solid rgba(65, 143, 255, .22);
  border-radius: 99px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--blue);
}

.tag-pill button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--blue-dim);
  font-size: 13px;
  line-height: 1;
  padding: 0
}

.tag-pill button:hover {
  color: var(--error)
}

.tag-input-inner {
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  min-width: 120px;
  flex: 1;
  padding: 0;
}

.tag-input-inner::placeholder {
  color: var(--text-3)
}

/* ─── upload ─────────────────────────────────────────────── */
.upload-area {
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-md);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}

.upload-area:hover {
  border-color: var(--blue);
  background: var(--blue-faint)
}

.upload-icon {
  font-size: 26px;
  color: var(--text-3);
  margin-bottom: .5rem
}

.upload-text {
  font-size: 13px;
  color: var(--text-2)
}

.upload-text span {
  color: var(--blue)
}

.upload-hint {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 4px
}

.upload-file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.upload-file-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: .45rem .7rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
}

.upload-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--text-1);
}

.upload-file-remove {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--ease), border-color var(--ease);
}

.upload-file-remove:hover {
  color: var(--error);
  border-color: var(--error);
}

/* ─── stripe block ───────────────────────────────────────── */
.stripe-block {
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  margin-top: .75rem;
}

.stripe-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: .75rem
}

.stripe-logo-mark {
  width: 34px;
  height: 22px;
  background: #635BFF;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  letter-spacing: -.03em;
  font-family: var(--mono);
}

.stripe-logo-text {
  font-size: 13px;
  color: var(--text-2)
}

/* ─── buttons ────────────────────────────────────────────── */
.btn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 2.5rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--r-md);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  padding: .65rem 1.4rem;
  transition: all var(--ease);
  border: none;
  letter-spacing: -.01em;
}

.btn-primary {
  background: var(--blue);
  color: white
}

.btn-primary:hover {
  background: #5A9FFF;
  box-shadow: 0 4px 20px rgba(65, 143, 255, .28);
  transform: translateY(-1px);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-2)
}

.btn-ghost:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, .04)
}

.btn-save {
  background: transparent;
  color: var(--blue);
  border: 1px solid rgba(65, 143, 255, .22)
}

.btn-save:hover {
  background: var(--blue-faint)
}

/* ─── toast ──────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--navy-card);
  border: 1px solid rgba(65, 143, 255, .28);
  border-radius: var(--r-md);
  padding: .9rem 1.25rem;
  font-size: 13.5px;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(65, 143, 255, .1);
}

.toast.show {
  opacity: 1;
  transform: translateY(0)
}

.toast-icon {
  color: var(--blue);
  font-size: 16px
}

/* ─── utils ──────────────────────────────────────────────── */
.mt-1 {
  margin-top: .5rem
}

.mt-2 {
  margin-top: 1rem
}

.mt-3 {
  margin-top: 1.5rem
}

.text-muted {
  color: var(--text-3);
  font-size: 12.5px
}

/* ─── lucide svg inline helpers ─────────────────────────── */
.upload-text svg {
  display: inline;
  vertical-align: middle;
  margin-right: 5px
}

.info-box-icon {
  color: var(--blue);
  margin-top: 2px;
  flex-shrink: 0
}

.toast-icon {
  color: var(--blue);
  flex-shrink: 0
}

/* ─── scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .07);
  border-radius: 99px
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .13)
}

/* ─── responsive ─────────────────────────────────────────── */
@media(max-width:900px) {
  .main {
    padding: 1.5rem 1rem 2.5rem
  }

  .field-row,
  .field-row-3 {
    grid-template-columns: 1fr
  }

  /* When these grids collapse to one column, each .field's own
     margin-bottom would stack on top of the grid gap, doubling the
     space between fields (and leaving ~0 before the row's last
     field, whose margin is reset by .field:last-child). The grid
     gap alone should drive spacing here, matching standalone fields. */
  .field-row .field,
  .field-row-3 .field {
    margin-bottom: 0
  }

  /* The row container itself carries no spacing of its own (it relied
     on its last .field's margin, which is now 0 above), so the next
     block would butt right up against it. Give it the same 1rem
     rhythm as a standalone .field, reset on the last row in a section
     to match .field:last-child. */
  .field-row,
  .field-row-3 {
    margin-bottom: 1rem
  }

  .field-row:last-child,
  .field-row-3:last-child {
    margin-bottom: 0
  }

  .stepper-top {
    padding: .85rem 1rem
  }

  .stepper-label {
    display: none
  }

  .stepper-step {
    gap: 0;
    padding: 2px
  }

  .stepper-connector {
    margin-top: 14px;
    min-width: 8px
  }

  .stepper-dot {
    width: 26px;
    height: 26px
  }

  .topbar {
    padding: 0 1rem;
    gap: .75rem
  }

  .topbar-partner {
    font-size: 12px
  }
}

@media(max-width:640px) {
  .topbar-badge {
    display: none
  }

  .topbar-partner {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-align: right
  }

  /* 16px is the threshold below which iOS Safari auto-zooms the
     page on focus — anything smaller and the browser stays zoomed
     in after the field blurs, since that's a viewport-level zoom,
     not a per-input one. */
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=number],
  input[type=date],
  input[type=url],
  select,
  textarea {
    font-size: 16px
  }
}

@media(max-width:520px) {
  .stepper-dot {
    width: 24px;
    height: 24px;
    font-size: 10.5px
  }

  .stepper-connector {
    min-width: 4px
  }
}

/* ─── celebration screen: staggered reveal after the intro video ── */
@keyframes celebrationRise {
  from {
    opacity: 0;
    transform: translateY(28px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.celebration-item {
  opacity: 0;
  will-change: opacity, transform
}

.celebration-content.revealed .celebration-item {
  animation: celebrationRise .75s cubic-bezier(.22, 1, .36, 1) both;
}

@media(prefers-reduced-motion:reduce) {
  .celebration-content.revealed .celebration-item {
    animation-duration: .01ms
  }
}

/* ─── celebration screen: responsive layout ─────────────────── */
.celebration-screen {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 40px;
}

.celebration-main {
  width: 100%;
  max-width: 720px;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 3;
}

.celebration-heading {
  font-size: 28px;
  font-family: Outfit, 'Inter', sans-serif;
  line-height: 1.15;
  letter-spacing: .56px;
  color: #fff;
  text-align: center;
  align-self: stretch;
}

.celebration-subheading {
  font-size: 18px;
  font-family: Outfit, 'Inter', sans-serif;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .36px;
  color: #fff;
  text-align: center;
  align-self: stretch;
}

/* steps: horizontal on desktop, stacked rows on mobile */
.celebration-steps {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.celebration-step {
  flex: 0 1 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 14px;
}

/* Fixed (not flex:1) so it stays visible instead of collapsing to 0 width
   when four-plus steps no longer fit the row at their natural size. */
.celebration-step-connector {
  flex: 0 0 28px;
  margin-top: 27px;
  height: 2px;
  background: rgba(255, 255, 255, .18);
}

.celebration-step-icon {
  width: 46px;
  height: 46px;
  border-radius: 100px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, .15);
  outline: 1px rgba(255, 255, 255, .08) solid;
  outline-offset: -1px;
}

.celebration-step-icon svg {
  width: 22px;
  height: 22px;
}

.celebration-step.is-active .celebration-step-icon {
  background: rgba(65, 143, 255, .4);
  outline-color: rgba(65, 143, 255, .49);
}

/* steps that haven't happened yet read as dimmed */
.celebration-step:not(.is-active) {
  opacity: .58;
}

.celebration-step-text {
  text-align: center;
}

.celebration-step-title {
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: .2px;
  margin-bottom: 4px;
  line-height: 1.3;
}

.celebration-step-desc {
  color: rgba(255, 255, 255, .65);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 1.4;
}

.celebration-footer {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 11px;
  position: relative;
  z-index: 3;
}

@media(max-width:640px) {
  .celebration-screen {
    padding: 24px 20px;
    gap: 28px;
  }

  .celebration-main {
    gap: 28px;
  }

  /* steps become a vertical timeline: icon on the left, text on the right,
     with the connectors running between the icons like on desktop */
  .celebration-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .celebration-step {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
  }

  /* vertical segment, centred on the 38px icon column */
  .celebration-step-connector {
    flex: none;
    width: 2px;
    height: 18px;
    margin: 6px 0 6px 18px;
  }

  .celebration-step-icon {
    width: 38px;
    height: 38px;
  }

  .celebration-step-icon svg {
    width: 19px;
    height: 19px;
  }

  .celebration-step-text {
    text-align: left;
    min-width: 0;
  }
}