/* Bureau Brand System — Brand Overview v2.0 (2025) */

@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Acid Grotesk";
  src: url("/fonts/FFF-AcidGrotesk-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "National 2 Condensed";
  src: url("/fonts/national-2-condensed-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Quadrant Text";
  src: url("/fonts/QuadrantText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-canary-yellow: #fffd6d;
  --color-warm-grey: #c4c3c1;
  --color-mid-grey: #647170;
  --color-steel-blue: #213741;

  --color-off-white: #f7f4e7;
  --color-bright-blue: #3171f1;
  --color-lilac: #c4c0f9;
  --color-red-orange: #ff603b;

  --color-bg: var(--color-off-white);
  --color-surface: #ffffff;
  --color-text: var(--color-steel-blue);
  --color-accent: var(--color-canary-yellow);
  --color-muted: var(--color-mid-grey);
  --color-border: rgba(33, 55, 65, 0.18);
  --color-error: var(--color-red-orange);
  --color-focus: var(--color-bright-blue);

  --font-display: "National 2 Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Acid Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Quadrant Text", "JetBrains Mono", "Courier New", monospace;

  --display-leading: 0.9;
  --display-tracking: -0.05em;

  --body-leading: 1.4;
  --body-tracking: 0.02em;

  --mono-leading: 1.3;
  --mono-tracking: 0.1em;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding-top: 56px;
  padding-right: max(24px, env(safe-area-inset-right));
  padding-bottom: max(96px, env(safe-area-inset-bottom));
  padding-left: max(24px, env(safe-area-inset-left));
}

.brand-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-steel-blue);
  margin-bottom: 32px;
}

.brand-bar .dot {
  width: 8px;
  height: 8px;
  background: var(--color-canary-yellow);
  border-radius: 50%;
  display: inline-block;
}

/* Bureau logo lockup — the real PNG asset shipped with the Delivery Details
   project, reused here. Matches the header on delivery.withbureau.com. */
.brand-logo {
  display: inline-block;
  margin-bottom: 32px;
  text-decoration: none;
}

.brand-logo img {
  display: block;
  height: 32px;
  width: auto;
}

/* Logo lockup — "b" mark + BUREAU wordmark, matches the header on
   delivery.withbureau.com. Swap the inline SVG in index.html for the
   official asset when available. */
.logo-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-steel-blue);
  margin-bottom: 32px;
}

.logo-lockup svg {
  display: block;
  height: 28px;
  width: auto;
}

.logo-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--color-steel-blue);
  line-height: 1;
}

h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 24px;
  padding-top: 2px;
  color: var(--color-steel-blue);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.8vw, 2.375rem);
  line-height: 1;
  letter-spacing: 0;
  margin: 0 0 18px;
  padding-top: 2px;
  color: var(--color-steel-blue);
}

header {
  margin-bottom: 44px;
}

.sub {
  font-family: var(--font-body);
  color: var(--color-mid-grey);
  font-size: 1.0625rem;
  line-height: 1;
  margin: 0 0 24px;
  max-width: 56ch;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 16px;
}

/* Hero treatment — used on the first card and the success card to match
   the look of delivery.withbureau.com (steel-blue border, rounded 18px). */
.hero-card {
  background: #fff;
  border: 2px solid var(--color-steel-blue);
  border-radius: 18px;
  padding: 36px;
  color: var(--color-steel-blue);
}

.progress {
  height: 6px;
  background: rgba(33, 55, 65, 0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 12px;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-canary-yellow);
  border-radius: 999px;
  transition: width 0.35s ease;
}

.step-indicator {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin: 0 0 18px;
}

.step-badge {
  display: inline-block;
  background: var(--color-red-orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.step-badge-yellow {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
}

/* Hero cards use the pill-style inputs from delivery.withbureau.com */
.hero-card label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-steel-blue);
}

.hero-card input[type="text"],
.hero-card input[type="email"],
.hero-card input[type="tel"],
.hero-card input[type="number"],
.hero-card input[type="date"],
.hero-card textarea {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  padding: 14px 18px;
  border: 1.5px solid var(--color-steel-blue);
  border-radius: 22px;
  background: var(--color-off-white);
  color: var(--color-steel-blue);
}

.hero-card textarea {
  border-radius: 18px;
  min-height: 96px;
}

.hero-card input:focus,
.hero-card textarea:focus {
  border-color: var(--color-steel-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(33, 55, 65, 0.12);
}

/* Pill button — matches the "Send verification code" / "Verify and continue"
   primary CTA on delivery.withbureau.com. */
.pill-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  padding: 14px 26px;
  display: block;
  margin: 20px auto 0;
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  border: none;
  cursor: pointer;
}

.pill-btn:hover:not(:disabled) {
  background: var(--color-steel-blue);
  color: var(--color-canary-yellow);
}

.pill-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.hidden { display: none !important; }

label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-steel-blue);
  margin-bottom: 8px;
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: var(--font-body);
  letter-spacing: var(--body-tracking);
  background: #fff;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Strip Safari's default search-input chrome (rounded pill + magnifying-glass
   icon) so the address-autocomplete search input looks identical to the
   other text fields. */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  display: none;
}

/* iOS Safari renders the value of <input type="date"> centered inside its
   native control. Strip the appearance and force the visible value to the
   left so the date sits flush with the other text inputs (which all
   left-align by default). */
input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-warm-grey);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: 0 0 0 3px rgba(49, 113, 241, 0.18);
}

textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--font-body);
}

button {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: var(--mono-tracking);
  line-height: var(--mono-leading);
  text-transform: uppercase;
  padding: 14px 22px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s, color 0.15s;
  margin-top: 16px;
}

button:hover:not(:disabled) {
  background: var(--color-steel-blue);
  color: var(--color-canary-yellow);
}

button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

button.link {
  background: transparent;
  color: var(--color-mid-grey);
  padding: 12px 4px;
  min-height: 44px;
  margin-top: 12px;
  text-transform: none;
  letter-spacing: var(--body-tracking);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
}

button.link:hover:not(:disabled) {
  background: transparent;
  color: var(--color-steel-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hint {
  font-family: var(--font-body);
  color: var(--color-mid-grey);
  font-size: 0.875rem;
  margin: 12px 0 0;
}

.field { margin-bottom: 26px; }

.field-question {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--color-steel-blue);
  margin-bottom: 12px;
}

.field .helper-text {
  margin: -2px 0 10px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: var(--body-tracking);
  color: var(--color-mid-grey);
  line-height: 1.45;
  max-width: 60ch;
}

.required-mark { color: var(--color-red-orange); margin-left: 4px; }

/* ── Customer address + Places REST autocomplete ──────────────────
   The address field is just a textarea (no fancy wrapper input). JS
   listens for typing, hits the Places API directly, and renders our
   own dropdown beneath the textarea via .address-suggestions. iOS's
   contact-autofill chips only fire on <input> classifications, so a
   textarea avoids them entirely. */
.address-wrap { position: relative; }

/* The textarea-wrap is inserted by JS so the suggestions dropdown can
   absolutely position beneath the textarea without overflowing other
   form fields. */
.address-textarea-wrap {
  position: relative;
}

.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: -1px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: 0 8px 24px rgba(33, 55, 65, 0.12);
  max-height: 360px;
  overflow-y: auto;
  z-index: 1000;
}

.address-suggestions.hidden { display: none; }

.address-suggestion {
  padding: 12px 14px;
  cursor: pointer;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-steel-blue);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}

.address-suggestion:first-child { border-top: none; }

.address-suggestion:hover,
.address-suggestion.is-highlighted {
  background: rgba(255, 253, 109, 0.4);
}

.address-suggestion-main {
  font-weight: 500;
  color: var(--color-steel-blue);
}

.address-suggestion-main strong {
  font-weight: 700;
}

.address-suggestion-secondary {
  font-size: 0.8125rem;
  color: var(--color-mid-grey);
}

/* ── Checklist group ───────────────────────────────────────────── */
/* Compact "Select all" toggle above the checklist. */
.select-all-btn {
  display: inline-flex;
  align-items: center;
  margin-bottom: 14px;
  background: var(--color-surface);
  color: var(--color-steel-blue);
  border: 1.5px solid var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}

.select-all-btn:hover {
  background: var(--color-off-white);
}

.checklist {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 18px;
  background: #fff;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 0;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--body-tracking);
  line-height: 1.4;
  text-transform: none;
  color: var(--color-steel-blue);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
}

.checkbox-row:last-child { border-bottom: none; }

.checkbox-row input[type="checkbox"] {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-top: 0;
  accent-color: var(--color-canary-yellow);
  cursor: pointer;
}

/* Single-row checkbox (e.g., marketing agreement) sits on its own */
.field-checkbox .checkbox-row {
  border-bottom: none;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: rgba(255, 253, 109, 0.18);
}

/* ── File upload ───────────────────────────────────────────────── */
.file-drop {
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.file-drop:hover,
.file-drop.is-drag {
  border-color: var(--color-steel-blue);
  background: #fff;
}

.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-drop-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-steel-blue);
}

.file-drop-sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-mid-grey);
  margin-top: 4px;
}

/* Hidden by default (desktop): the "Tap to take a photo" drop area already
   opens a file picker on desktop, so this button is redundant there. It's
   revealed only on touch devices (see the media query below), where the drop
   area opens the camera and users need a separate way to pick from the
   gallery. */
.file-lib-btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  background: var(--color-surface);
  color: var(--color-steel-blue);
  border: 1.5px solid var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
}

.file-lib-btn:hover {
  background: var(--color-off-white);
}

/* Touch devices (phones/tablets): no hover + coarse pointer. Show the
   "Upload images" library button here. */
@media (hover: none) and (pointer: coarse) {
  .file-lib-btn {
    display: inline-flex;
  }
}

.file-lib-btn input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.file-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.file-preview-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  aspect-ratio: 1 / 1;
}

.file-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.file-preview-item .file-name {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(33, 55, 65, 0.78);
  color: #fff;
  font-size: 0.6875rem;
  padding: 4px 6px;
  letter-spacing: var(--body-tracking);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-preview-item .remove-file {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: var(--color-red-orange);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.125rem;
  letter-spacing: 0;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
}

.file-preview-item .remove-file:hover { background: var(--color-steel-blue); color: #fff; }

.file-preview-item.is-converting {
  background: var(--color-off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
}

.file-preview-item.is-converting .file-name {
  background: transparent;
  color: var(--color-mid-grey);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  text-align: center;
  position: static;
  padding: 0;
}

.convert-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(33, 55, 65, 0.18);
  border-top-color: var(--color-steel-blue);
  animation: spin 0.9s linear infinite;
  position: absolute;
  top: calc(50% - 22px);
  left: calc(50% - 14px);
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Signature pad ─────────────────────────────────────────────── */
.signature-wrap {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  position: relative;
  overflow: hidden;
}

.signature-wrap canvas {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;
  background: #fff;
}

.signature-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid var(--color-border);
  background: var(--color-off-white);
}

.signature-hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-mid-grey);
}

.signature-actions button.link {
  margin: 0;
  padding: 10px 4px;
  min-height: 44px;
}

/* ── Section headings within the long form ────────────────────── */
.section-heading {
  margin: 36px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}

.section-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.section-heading h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: var(--display-leading);
  letter-spacing: 0;
  margin: 0 0 8px;
  color: var(--color-steel-blue);
}

.section-heading p {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-mid-grey);
  margin: 0;
  max-width: 56ch;
}

/* ── Done step ─────────────────────────────────────────────────── */
.done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.done-actions button { margin-top: 0; }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-steel-blue);
  border: 1.5px solid var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 14px 24px;
  min-height: 44px;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-steel-blue);
  color: var(--color-surface);
}

.btn-primary-pill {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 12px 22px;
}

.btn-primary-pill:hover:not(:disabled) {
  background: var(--color-steel-blue);
  color: var(--color-canary-yellow);
}

#details-form button[type="submit"] {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: 999px;
  padding: 14px 28px;
  display: block;
  margin: 28px auto 0;
}

/* ── Progress / error states ──────────────────────────────────── */
.error {
  background: var(--color-red-orange);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: var(--body-tracking);
  margin-top: 16px;
}

.notice {
  background: var(--color-canary-yellow);
  color: var(--color-steel-blue);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: var(--body-tracking);
  margin-top: 16px;
}

.upload-progress {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin-top: 8px;
}

/* ── Reference image (helper photos shown next to file fields) ── */
.ref-image {
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
  padding: 8px;
  display: inline-block;
}

.ref-image img {
  max-width: 220px;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.ref-image figcaption {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--color-mid-grey);
  margin-top: 6px;
}

/* ── Mobile polish ─────────────────────────────────────────────────
   Tighter padding, taller signature, stacked done actions, and the
   key win — a sticky primary CTA pinned to the bottom of the viewport
   so installers never have to thumb-scroll to advance a step. */
@media (max-width: 640px) {
  main {
    padding-top: 28px;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(132px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  header { margin-bottom: 28px; }

  .card { padding: 20px; }
  .hero-card { padding: 22px; border-radius: 14px; }

  .step-badge { margin-bottom: 18px; }

  /* Give the signature pad real room to draw on a phone. */
  .signature-wrap canvas { height: 260px; }

  /* Stack the post-submit buttons full-width, easier to tap one-handed. */
  .done-actions { flex-direction: column; }
  .done-actions button,
  .done-actions a { width: 100%; text-align: center; }

  /* ── Sticky primary CTA ─────────────────────────────────────────
     Pin each step's submit button to the bottom of the viewport so it
     stays within thumb reach as the user scrolls through long content
     (e.g. step 2's checklist or step 3's photo grid). Stays inside the
     form so native submit still fires. The pill picks up a soft drop
     shadow so it reads cleanly over scrolling content above. */
  #step-info .pill-btn,
  #step-checklist .pill-btn,
  #step-photos .pill-btn,
  #step-signoff .pill-btn {
    position: sticky;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 5;
    width: 100%;
    margin: 24px 0 0;
    padding: 16px 22px;
    box-shadow: 0 10px 24px rgba(33, 55, 65, 0.22);
  }

  /* Back link sits below the sticky button but stays inline. */
  button.link[data-back] {
    width: 100%;
    text-align: center;
  }

  /* ── Custom Places-API dropdown — mobile polish ─────────────────
     The dropdown is appended inside the address-textarea-wrap and
     positioned beneath the textarea. Bigger rows + above-CTA z-index
     keep it tappable and visible on a phone. */
  .address-suggestions {
    z-index: 1000; /* above the sticky pill-btn at z-index 5 */
    max-height: 280px;
  }

  .address-suggestion {
    padding: 14px 16px;
    font-size: 0.9375rem;
    min-height: 48px;
    white-space: normal;
  }

  .address-suggestion:hover,
  .address-suggestion.is-highlighted {
    background: rgba(255, 253, 109, 0.6);
  }

  .address-helper {
    line-height: 1.45;
    max-width: 100%;
    text-align: center;
  }
}