/* ==========================================================================
   Nature's Balance Pest Control - Book Now + Pay form (DRAFT v2)
   1) THEME TOKENS: every color, font, radius, spacing and shadow is a --nbpc-* custom
      property declared on .nbpc-bn just below. Default = the live form's green palette.
   2) Component rules further down only use these tokens (no hard-coded colors).

   RESTYLE: either edit the values below, or load another file AFTER this one that
   re-declares any tokens, e.g.  .nbpc-bn { --nbpc-color-primary: #123456; }
   (see theme-example-dark.css, which is scoped to [data-nbpc-theme="dark"]).
   Note: tokens must be declared on .nbpc-bn (not :root) so derived gradients follow your overrides.
   ========================================================================== */

.nbpc-bn {
  /* ---- Colors: brand ---- */
  --nbpc-color-primary-dark: #1e3022;     /* header gradient start, headings, body text */
  --nbpc-color-primary: #2d4a35;          /* buttons, selected states, labels */
  --nbpc-color-primary-light: #3d6645;    /* header gradient end */
  --nbpc-color-accent: #4a7c59;           /* borders on hover/focus, check marks, links */
  --nbpc-color-highlight: #c5e84e;        /* lime: progress fill end, badges */
  --nbpc-color-on-highlight: #1e3022;     /* text on highlight badges */
  --nbpc-color-on-primary: #ffffff;       /* text on primary-colored fills (checkmarks) */
  --nbpc-color-selected: #2d4a35;         /* selected date, selected card border, call button */
  --nbpc-color-on-selected: #ffffff;      /* text on --nbpc-color-selected */
  --nbpc-color-price: #2d4a35;            /* big monthly price */
  --nbpc-color-feature-text: #2d4a35;     /* rate-card checklist text */
  --nbpc-color-total-rule: #2d4a35;       /* line above Monthly Total */
  --nbpc-color-button-text: #ffffff;      /* text on the main (gradient) button */
  --nbpc-color-button-secondary-bg: #ffffff;
  --nbpc-color-button-secondary-text: #2d4a35;
  --nbpc-color-slot-selected-text: #ffffff; /* text on the selected time-window card */

  /* ---- Colors: surfaces ---- */
  --nbpc-color-page-bg: transparent;      /* behind the card (host page usually supplies it) */
  --nbpc-color-card-bg: #ffffff;
  --nbpc-color-tint: #f0f7ee;             /* hover / selected / notice fill */
  --nbpc-color-tint-2: #e8f3e8;           /* rate card gradient end */
  --nbpc-color-field-bg: #fafcfa;
  --nbpc-color-field-bg-focus: #ffffff;
  --nbpc-color-progress-bg: #f8faf8;      /* strip behind the progress bar */
  --nbpc-color-track: #eef2ee;            /* empty progress track */
  --nbpc-color-border: #e8ede8;
  --nbpc-color-border-tint: #c8e0c4;      /* notice / business box border */
  --nbpc-color-checkbox-border: #d0dcd0;
  --nbpc-color-divider: #e8ede8;

  /* ---- Colors: text ---- */
  --nbpc-color-text: #1e3022;
  --nbpc-color-text-soft: #5a7060;
  --nbpc-color-muted: #7a9080;
  --nbpc-color-label: #2d4a35;            /* uppercase field labels, section labels */
  --nbpc-color-check-text: var(--nbpc-color-label);   /* Terms / SMS-consent checkbox text (set a softer color in dark themes) */
  --nbpc-color-seg-label: #c0cec1;        /* inactive progress label */
  --nbpc-color-seg-label-active: #2d4a35;
  --nbpc-color-date-disabled: #d0d8d0;

  /* ---- Colors: header (on the dark gradient) ---- */
  --nbpc-color-header-text: #ffffff;
  --nbpc-color-header-muted: #a8d5a2;
  --nbpc-color-header-muted-2: #6b9e78;
  --nbpc-color-star: #c5e84e;

  /* ---- Colors: states ---- */
  --nbpc-color-error: #c0392b;
  --nbpc-color-error-bg: #fdf0ee;
  --nbpc-color-error-border: #f0c4bb;
  --nbpc-color-error-text: #8b2e1a;
  --nbpc-color-focus: #4a7c59;            /* focus ring + focused field border */
  --nbpc-color-focus-ring: rgba(74, 124, 89, 0.25);
  --nbpc-color-shadow: rgba(45, 74, 53, 0.18);   /* base tint for shadows below */
  --nbpc-color-cal-nav-bg: rgba(255, 255, 255, 0.12);

  /* ---- Gradients (derived from colors above; override any directly if you like) ---- */
  --nbpc-gradient-header: linear-gradient(135deg, var(--nbpc-color-primary-dark) 0%, var(--nbpc-color-primary) 55%, var(--nbpc-color-primary-light) 100%);
  --nbpc-gradient-button: linear-gradient(135deg, var(--nbpc-color-primary), var(--nbpc-color-accent));
  --nbpc-gradient-progress: linear-gradient(90deg, var(--nbpc-color-primary), var(--nbpc-color-highlight));
  --nbpc-gradient-rate: linear-gradient(135deg, var(--nbpc-color-tint), var(--nbpc-color-tint-2));
  --nbpc-gradient-promo: linear-gradient(135deg, var(--nbpc-color-primary-dark), var(--nbpc-color-primary));
  --nbpc-gradient-calendar-head: linear-gradient(135deg, var(--nbpc-color-primary-dark), var(--nbpc-color-primary));
  --nbpc-gradient-selected: linear-gradient(135deg, var(--nbpc-color-primary), var(--nbpc-color-accent));

  /* ---- Typography ---- */
  --nbpc-font-family: Helvetica, Arial, sans-serif;
  --nbpc-font-family-heading: var(--nbpc-font-family);
  --nbpc-fs-xs: 11px;
  --nbpc-fs-sm: 12px;
  --nbpc-fs-base: 13px;
  --nbpc-fs-md: 14px;
  --nbpc-fs-btn: 15px;
  --nbpc-fs-input: 16px;                  /* keep >= 16px: prevents iOS zoom-on-focus */
  --nbpc-fs-title: 21px;
  --nbpc-fs-conf-title: 22px;
  --nbpc-fs-header: 28px;
  --nbpc-fs-price: 36px;
  --nbpc-fw-regular: 400;
  --nbpc-fw-medium: 500;
  --nbpc-fw-semibold: 600;
  --nbpc-fw-bold: 700;
  --nbpc-fw-heavy: 800;
  --nbpc-line-height: 1.5;
  --nbpc-label-transform: uppercase;
  --nbpc-label-spacing: 0.5px;
  --nbpc-heading-spacing: -0.2px;

  /* ---- Radii ---- */
  --nbpc-radius-card: 24px;
  --nbpc-radius-card-mobile: 20px;
  --nbpc-radius-option: 16px;             /* plan cards, rate card, calendar, summary */
  --nbpc-radius-field: 12px;              /* inputs, buttons, add-on rows, time slots */
  --nbpc-radius-small: 10px;              /* calendar days */
  --nbpc-radius-checkbox: 6px;
  --nbpc-radius-pill: 99px;               /* badges, progress */

  /* ---- Spacing / sizing ---- */
  --nbpc-card-max-width: 640px;
  --nbpc-outer-pad: 20px;                 /* gutter around the card */
  --nbpc-pad-x: 32px;                     /* card inner side padding (desktop) */
  --nbpc-pad-x-mobile: 20px;              /* card inner side padding (<= 540px) */
  --nbpc-header-pad-top: 32px;
  --nbpc-header-pad-bottom: 28px;
  --nbpc-body-pad-top: 28px;
  --nbpc-body-pad-bottom: 32px;
  --nbpc-gap: 14px;
  --nbpc-gap-sm: 8px;
  --nbpc-field-gap: 16px;
  --nbpc-section-gap: 20px;
  --nbpc-border-width: 2px;
  --nbpc-input-pad-y: 12px;
  --nbpc-input-pad-x: 16px;
  --nbpc-button-pad-y: 15px;
  --nbpc-button-pad-x: 20px;
  --nbpc-tap-target: 44px;                /* minimum height of tappable rows/buttons */

  /* ---- Shadows ---- */
  --nbpc-shadow-card: 0 20px 60px var(--nbpc-color-shadow), 0 4px 16px rgba(45, 74, 53, 0.08);
  --nbpc-shadow-button: 0 4px 14px rgba(45, 74, 53, 0.3);
  --nbpc-shadow-button-hover: 0 6px 20px rgba(45, 74, 53, 0.4);
  --nbpc-shadow-option-hover: 0 4px 12px rgba(45, 74, 53, 0.1);
  --nbpc-shadow-option-selected: 0 4px 16px rgba(45, 74, 53, 0.15);
  --nbpc-shadow-slot-selected: 0 4px 12px rgba(45, 74, 53, 0.25);
  --nbpc-shadow-focus: 0 0 0 3px var(--nbpc-color-focus-ring);

  /* ---- Motion ---- */
  --nbpc-transition: 0.2s ease;
  --nbpc-step-anim: 0.3s ease;
}

/* ==========================================================================
   Component rules (use tokens only)
   ========================================================================== */
.nbpc-bn, .nbpc-bn * { box-sizing: border-box; }
.nbpc-bn {
  display: block;
  width: 100%;
  padding: var(--nbpc-outer-pad);
  background: var(--nbpc-color-page-bg);
  font-family: var(--nbpc-font-family);
  font-size: var(--nbpc-fs-base);
  line-height: var(--nbpc-line-height);
  color: var(--nbpc-color-text);
  overflow-x: hidden; overflow-x: clip;   /* clip (not hidden) keeps position:sticky working for the Next bar */
  -webkit-text-size-adjust: 100%;
}
/* :where() keeps the reset at zero specificity so component margins below always win */
.nbpc-bn :where(h2, h3, p, ul, ol, fieldset) { margin: 0; padding: 0; }
.nbpc-bn ul, .nbpc-bn ol { list-style: none; }
.nbpc-bn button, .nbpc-bn input, .nbpc-bn select { font-family: inherit; margin: 0; }
.nbpc-bn [hidden] { display: none !important; }
.nbpc-bn .nbpc-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.nbpc-card {
  background: var(--nbpc-color-card-bg);
  border-radius: var(--nbpc-radius-card);
  max-width: var(--nbpc-card-max-width);
  width: 100%;
  margin: 0 auto;
  overflow: hidden; overflow: clip;
  box-shadow: var(--nbpc-shadow-card);
}

/* ---- Header ---- */
.nbpc-header {
  background: var(--nbpc-gradient-header);
  padding: var(--nbpc-header-pad-top) var(--nbpc-pad-x) var(--nbpc-header-pad-bottom);
}
.nbpc-header-title {
  font-family: var(--nbpc-font-family-heading);
  font-size: var(--nbpc-fs-header);
  font-weight: var(--nbpc-fw-heavy);
  color: var(--nbpc-color-header-text);
  line-height: 1.2;
  letter-spacing: -0.3px;
}
.nbpc-rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.nbpc-stars { display: flex; gap: 2px; color: var(--nbpc-color-star); }
.nbpc-rating-score { font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-semibold); color: var(--nbpc-color-header-muted); }
.nbpc-rating-text { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-header-muted-2); }

/* ---- Progress ---- */
.nbpc-progress {
  background: var(--nbpc-color-progress-bg);
  border-bottom: 1px solid var(--nbpc-color-divider);
  padding: var(--nbpc-section-gap) var(--nbpc-pad-x) 16px;
}
.nbpc-seg-bar { display: grid; grid-template-columns: repeat(var(--nbpc-seg-count, 3), 1fr); gap: var(--nbpc-gap-sm); }
.nbpc-seg { display: flex; flex-direction: column; gap: 6px; }
.nbpc-seg-track { height: 5px; border-radius: var(--nbpc-radius-pill); background: var(--nbpc-color-track); overflow: hidden; }
.nbpc-seg-fill { height: 100%; width: 0; border-radius: var(--nbpc-radius-pill); background: var(--nbpc-gradient-progress); transition: width 0.5s ease; }
.nbpc-seg-label {
  font-size: 10px; font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-seg-label);
  text-transform: uppercase; letter-spacing: 1px;
}
.nbpc-seg-label.nbpc-active { color: var(--nbpc-color-seg-label-active); }

/* ---- Body / steps ---- */
.nbpc-body { padding: var(--nbpc-body-pad-top) var(--nbpc-pad-x) var(--nbpc-body-pad-bottom); }
.nbpc-step { display: none; }
.nbpc-step.nbpc-active { display: block; animation: nbpcFadeIn var(--nbpc-step-anim); }
@keyframes nbpcFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.nbpc-step-title {
  font-family: var(--nbpc-font-family-heading);
  font-size: var(--nbpc-fs-title); font-weight: var(--nbpc-fw-heavy);
  color: var(--nbpc-color-text); letter-spacing: var(--nbpc-heading-spacing);
  line-height: 1.25; margin-bottom: 5px; outline: none;
}
.nbpc-step-sub { font-size: var(--nbpc-fs-base); color: var(--nbpc-color-muted); margin-bottom: 24px; }

/* ---- Fields ---- */
.nbpc-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nbpc-gap); }
.nbpc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--nbpc-field-gap); }
.nbpc-label {
  font-size: var(--nbpc-fs-sm); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-label);
  text-transform: var(--nbpc-label-transform); letter-spacing: var(--nbpc-label-spacing);
}
.nbpc-hint { font-weight: var(--nbpc-fw-regular); text-transform: none; letter-spacing: 0; color: var(--nbpc-color-text-soft); }
.nbpc-input, .nbpc-select {
  display: block; width: 100%; min-height: var(--nbpc-tap-target);
  border: var(--nbpc-border-width) solid var(--nbpc-color-border);
  border-radius: var(--nbpc-radius-field);
  padding: var(--nbpc-input-pad-y) var(--nbpc-input-pad-x);
  font-size: var(--nbpc-fs-input); line-height: 1.3; font-family: inherit;
  color: var(--nbpc-color-text); background-color: var(--nbpc-color-field-bg);
  outline: none; transition: border-color var(--nbpc-transition), background-color var(--nbpc-transition), box-shadow var(--nbpc-transition);
  -webkit-appearance: none; appearance: none; box-shadow: none;
}
.nbpc-select {
  padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--nbpc-color-label) 50%), linear-gradient(135deg, var(--nbpc-color-label) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.nbpc-input:focus, .nbpc-select:focus {
  border-color: var(--nbpc-color-focus); background-color: var(--nbpc-color-field-bg-focus); box-shadow: var(--nbpc-shadow-focus);
}
.nbpc-error { display: none; font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-error); margin-top: 1px; }
.nbpc-has-error .nbpc-error { display: block; }
.nbpc-has-error .nbpc-input, .nbpc-has-error .nbpc-select { border-color: var(--nbpc-color-error); }

.nbpc-area-error {   /* NOT an error and not a stop: an info panel with call/text and the 'Continue anyway' button below it */
  background: var(--nbpc-color-tint); border: 1px solid var(--nbpc-color-border-tint);
  border-radius: var(--nbpc-radius-field); padding: 14px 16px; font-size: var(--nbpc-fs-base);
  color: var(--nbpc-color-text); line-height: 1.5; margin: -4px 0 var(--nbpc-field-gap);
}
.nbpc-area-error strong { display: block; margin-bottom: 4px; }
.nbpc-area-error a { color: inherit; font-weight: var(--nbpc-fw-bold); }
.nbpc-area-error .nbpc-area-text { margin: 0 0 8px; }
.nbpc-area-error .nbpc-business-actions { margin-top: 6px; justify-content: flex-start; }
.nbpc-area-error .nbpc-linkbtn { color: inherit; }
.nbpc-trust { font-size: var(--nbpc-fs-small, 13px); letter-spacing: 0.02em; color: var(--nbpc-color-text-soft); margin: -4px 0 var(--nbpc-section-gap, 14px); line-height: 1.4; }
.nbpc-apt-link { width: auto; min-height: 44px; border: 0; padding: 0 2px; margin: -6px 0 var(--nbpc-field-gap); text-align: left; text-decoration: underline; background: transparent; }

/* ---- Checkboxes (terms / sms) ---- */
.nbpc-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; cursor: pointer; min-height: 24px; }
.nbpc-check input { margin: 2px 0 0; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--nbpc-color-selected); cursor: pointer; }
.nbpc-check span { font-size: var(--nbpc-fs-base); color: var(--nbpc-color-check-text, var(--nbpc-color-label)); line-height: 1.5; }
.nbpc-check a { color: var(--nbpc-color-accent); font-weight: var(--nbpc-fw-bold); }
.nbpc-check input:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }
.nbpc-terms .nbpc-error { margin: -4px 0 12px 30px; }

/* ---- Option cards (radio) ---- */
.nbpc-opts { display: grid; gap: 12px; margin-bottom: var(--nbpc-section-gap); }
.nbpc-opts.nbpc-cols-2 { grid-template-columns: 1fr 1fr; }
.nbpc-opt { position: relative; display: block; cursor: pointer; }
.nbpc-opt-body {
  display: block; height: 100%; border: var(--nbpc-border-width) solid var(--nbpc-color-border);
  border-radius: var(--nbpc-radius-option); padding: 20px 14px; text-align: center;
  background: var(--nbpc-color-field-bg); transition: all var(--nbpc-transition);
}
.nbpc-opt-icon { display: block; margin: 0 auto 8px; width: 36px; height: 36px; color: var(--nbpc-color-accent); }
.nbpc-opt-label { display: block; font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); line-height: 1.3; }
.nbpc-opt-sub { display: block; font-size: var(--nbpc-fs-xs); color: var(--nbpc-color-muted); margin-top: 4px; line-height: 1.4; }
.nbpc-opt-badge {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--nbpc-color-highlight); color: var(--nbpc-color-on-highlight);
  font-size: 10px; font-weight: var(--nbpc-fw-bold); padding: 3px 12px; border-radius: var(--nbpc-radius-pill);
}
.nbpc-opt input:checked + .nbpc-opt-body {
  border-color: var(--nbpc-color-selected); background: var(--nbpc-color-tint); box-shadow: var(--nbpc-shadow-option-selected);
}
.nbpc-opt input:focus + .nbpc-opt-body { border-color: var(--nbpc-color-focus); box-shadow: var(--nbpc-shadow-focus); }
.nbpc-opt input:checked:focus + .nbpc-opt-body { box-shadow: var(--nbpc-shadow-option-selected), var(--nbpc-shadow-focus); }
@media (hover: hover) {
  .nbpc-opt:hover .nbpc-opt-body { border-color: var(--nbpc-color-accent); background: var(--nbpc-color-tint); box-shadow: var(--nbpc-shadow-option-hover); }
}
.nbpc-plans { grid-template-columns: 1fr 1fr; }
.nbpc-plans .nbpc-opt.nbpc-featured { grid-column: 1 / -1; width: 100%; max-width: 320px; justify-self: center; }
.nbpc-plans .nbpc-opt.nbpc-featured .nbpc-opt-body { padding-top: 26px; }
.nbpc-plans .nbpc-opt-body { padding: 16px 10px; }
.nbpc-plans .nbpc-opt.nbpc-featured .nbpc-opt-body { padding-top: 26px; }

/* ---- Business prompt ---- */
.nbpc-business {
  background: var(--nbpc-color-tint); border: 1px solid var(--nbpc-color-border-tint); border-radius: var(--nbpc-radius-field);
  padding: 18px; margin-bottom: var(--nbpc-field-gap); text-align: center;
}
.nbpc-business-title { font-size: var(--nbpc-fs-btn); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 6px; }
.nbpc-business-text { font-size: var(--nbpc-fs-base); color: var(--nbpc-color-text-soft); margin-bottom: 14px; line-height: 1.6; }
.nbpc-business-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nbpc-linkbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--nbpc-tap-target);
  font-size: var(--nbpc-fs-md); font-weight: var(--nbpc-fw-bold); padding: 11px 22px; border-radius: var(--nbpc-radius-field);
  text-decoration: none; background: var(--nbpc-color-selected); color: var(--nbpc-color-on-selected);
  border: 1.5px solid var(--nbpc-color-selected);
}
.nbpc-linkbtn.nbpc-linkbtn-alt { background: var(--nbpc-color-button-secondary-bg); color: var(--nbpc-color-button-secondary-text); border-color: var(--nbpc-color-accent); }
.nbpc-linkbtn svg { width: 14px; height: 14px; }
.nbpc-linkbtn:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }


/* ---- Add-ons + totals ---- */
.nbpc-addons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.nbpc-addon {
  display: flex; align-items: center; gap: 14px; min-height: var(--nbpc-tap-target); position: relative;
  border: var(--nbpc-border-width) solid var(--nbpc-color-border); border-radius: var(--nbpc-radius-field);
  padding: 13px 16px; background: var(--nbpc-color-field-bg); cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: all 0.15s;
}
.nbpc-addon-box {
  width: 22px; height: 22px; border-radius: var(--nbpc-radius-checkbox); border: 2px solid var(--nbpc-color-checkbox-border);
  background: var(--nbpc-color-card-bg); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.nbpc-addon-name { font-size: var(--nbpc-fs-md); font-weight: var(--nbpc-fw-medium); color: var(--nbpc-color-text); flex: 1; }
.nbpc-addon-price { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); }
.nbpc-addon input:checked ~ .nbpc-addon-box { background: var(--nbpc-color-accent); border-color: var(--nbpc-color-accent); }
.nbpc-addon input:checked ~ .nbpc-addon-box::after {
  content: ''; display: block; width: 5px; height: 9px; border: 2px solid var(--nbpc-color-on-primary); border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.nbpc-addon.nbpc-on { border-color: var(--nbpc-color-accent); background: var(--nbpc-color-tint); }
.nbpc-addon input:focus ~ .nbpc-addon-box { box-shadow: var(--nbpc-shadow-focus); border-color: var(--nbpc-color-focus); }
@media (hover: hover) { .nbpc-addon:hover { border-color: var(--nbpc-color-accent); background: var(--nbpc-color-tint); } }
.nbpc-totals { border-top: var(--nbpc-border-width) solid var(--nbpc-color-divider); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.nbpc-total-row { display: flex; justify-content: space-between; font-size: var(--nbpc-fs-base); color: var(--nbpc-color-muted); }
.nbpc-total-row.nbpc-final {
  font-size: 17px; font-weight: var(--nbpc-fw-heavy); color: var(--nbpc-color-text);
  border-top: var(--nbpc-border-width) solid var(--nbpc-color-total-rule); padding-top: 12px; margin-top: 4px;
}

.nbpc-section-label {
  font-size: var(--nbpc-fs-sm); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-label);
  text-transform: var(--nbpc-label-transform); letter-spacing: var(--nbpc-label-spacing); margin-bottom: 10px;
}
.nbpc-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }
.nbpc-slot .nbpc-opt-body { padding: 14px 8px; border-radius: var(--nbpc-radius-field); }
.nbpc-slot input:checked + .nbpc-opt-body { background: var(--nbpc-gradient-selected); border-color: var(--nbpc-color-selected); color: var(--nbpc-color-slot-selected-text); box-shadow: var(--nbpc-shadow-slot-selected); }
.nbpc-slot input:checked + .nbpc-opt-body .nbpc-opt-label { color: var(--nbpc-color-slot-selected-text); }
.nbpc-slot input:checked + .nbpc-opt-body .nbpc-opt-sub { color: var(--nbpc-color-slot-selected-text); opacity: 0.8; }
.nbpc-notice {
  background: var(--nbpc-color-tint); border: 1.5px solid var(--nbpc-color-border-tint); border-radius: var(--nbpc-radius-field);
  padding: 14px 16px; font-size: var(--nbpc-fs-base); color: var(--nbpc-color-label); line-height: 1.6; margin-bottom: var(--nbpc-section-gap);
}
.nbpc-submit-error {
  background: var(--nbpc-color-error-bg); border: 1px solid var(--nbpc-color-error-border); color: var(--nbpc-color-error-text);
  border-radius: var(--nbpc-radius-field); padding: 12px 16px; font-size: var(--nbpc-fs-base); line-height: 1.5; margin-top: 16px;
}

/* ---- Buttons ---- */
.nbpc-btns { display: flex; gap: 12px; margin-top: 28px; }
.nbpc-btn {
  min-height: var(--nbpc-tap-target); border-radius: var(--nbpc-radius-field); padding: var(--nbpc-button-pad-y) var(--nbpc-button-pad-x);
  font-size: var(--nbpc-fs-btn); font-weight: var(--nbpc-fw-bold); letter-spacing: 0.2px; cursor: pointer; transition: all var(--nbpc-transition);
  -webkit-appearance: none; appearance: none; line-height: 1.2;
}
.nbpc-btn-primary {
  flex: 1; background: var(--nbpc-gradient-button); color: var(--nbpc-color-button-text); border: 0; box-shadow: var(--nbpc-shadow-button);
}
.nbpc-btn-secondary {
  background: var(--nbpc-color-button-secondary-bg); color: var(--nbpc-color-button-secondary-text); border: var(--nbpc-border-width) solid var(--nbpc-color-border); font-weight: var(--nbpc-fw-semibold);
}
.nbpc-btn[disabled] { opacity: 0.65; cursor: default; }
.nbpc-btn:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }
@media (hover: hover) {
  .nbpc-btn-primary:not([disabled]):hover { transform: translateY(-1px); box-shadow: var(--nbpc-shadow-button-hover); }
  .nbpc-btn-secondary:hover { border-color: var(--nbpc-color-accent); background: var(--nbpc-color-tint); }
}

/* ---- Confirmation ---- */
.nbpc-confirm { text-align: center; padding: 12px 0 0; }
.nbpc-conf-icon { width: 80px; height: 80px; margin: 0 auto 20px; }
.nbpc-conf-ring { fill: none; stroke: var(--nbpc-color-border-tint); stroke-width: 4; }
.nbpc-conf-circle, .nbpc-conf-tick { fill: none; stroke: var(--nbpc-color-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.nbpc-conf-circle { stroke-dasharray: 226; stroke-dashoffset: 226; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.7s ease; }
.nbpc-conf-tick { stroke-dasharray: 50; stroke-dashoffset: 50; transition: stroke-dashoffset 0.4s ease 0.6s; }
.nbpc-go .nbpc-conf-circle, .nbpc-go .nbpc-conf-tick { stroke-dashoffset: 0; }
.nbpc-conf-title { font-family: var(--nbpc-font-family-heading); font-size: var(--nbpc-fs-conf-title); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 8px; outline: none; }
.nbpc-conf-text { font-size: var(--nbpc-fs-md); color: var(--nbpc-color-text-soft); line-height: 1.6; margin-bottom: 20px; }
.nbpc-next { text-align: left; margin-bottom: 24px; }
.nbpc-next-title { font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 12px; }
.nbpc-next-item { display: flex; align-items: flex-start; gap: 14px; position: relative; padding-bottom: 18px; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.nbpc-next-item:last-child { padding-bottom: 0; }
.nbpc-go .nbpc-next-item { opacity: 1; transform: none; }
.nbpc-next-item:nth-child(1) { transition-delay: 0.8s; } .nbpc-next-item:nth-child(2) { transition-delay: 0.95s; } .nbpc-next-item:nth-child(3) { transition-delay: 1.1s; } .nbpc-next-item:nth-child(4) { transition-delay: 1.25s; }
.nbpc-next-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; background: var(--nbpc-color-accent); position: relative; z-index: 1; }
.nbpc-next-item:nth-child(2) .nbpc-next-dot { background: var(--nbpc-color-header-muted); }
.nbpc-next-item:nth-child(3) .nbpc-next-dot { background: var(--nbpc-color-highlight); }
.nbpc-next-item:not(:last-child)::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 0; width: 2px; background: var(--nbpc-color-divider); border-radius: var(--nbpc-radius-pill); }
.nbpc-next-label { font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 2px; }
.nbpc-next-text { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); line-height: 1.5; }
.nbpc-summary { background: var(--nbpc-color-field-bg); border: var(--nbpc-border-width) solid var(--nbpc-color-border); border-radius: var(--nbpc-radius-option); padding: 14px 20px; text-align: left; opacity: 0; transition: opacity 0.5s ease 1.4s; }
.nbpc-go .nbpc-summary { opacity: 1; }
.nbpc-summary-title { font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 4px; }
.nbpc-summary-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--nbpc-color-divider); font-size: var(--nbpc-fs-base); }
.nbpc-summary-row:last-child { border-bottom: 0; }
.nbpc-summary-row span:first-child { color: var(--nbpc-color-muted); flex-shrink: 0; }
.nbpc-summary-row span:last-child { font-weight: var(--nbpc-fw-semibold); color: var(--nbpc-color-text); text-align: right; max-width: 62%; overflow-wrap: anywhere; }

/* ---- Honeypot ---- */
.nbpc-hp { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---- Small screens (<= 540px): same behavior as the live form ---- */
@media (max-width: 540px) {
  .nbpc-header, .nbpc-progress, .nbpc-body { padding-left: var(--nbpc-pad-x-mobile); padding-right: var(--nbpc-pad-x-mobile); }
  .nbpc-row { grid-template-columns: 1fr; gap: 0; }
    .nbpc-card { border-radius: var(--nbpc-radius-card-mobile); }
  .nbpc-header-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .nbpc-bn *, .nbpc-bn *::before, .nbpc-bn *::after { animation: none !important; transition: none !important; }
  .nbpc-next-item, .nbpc-summary { opacity: 1; transform: none; }
  .nbpc-conf-circle, .nbpc-conf-tick { stroke-dashoffset: 0; }
}

/* ==========================================================================
   v2 additions: property-type chips, price box, date chips, pay step, mock badge
   ========================================================================== */
.nbpc-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--nbpc-section-gap); }
.nbpc-type .nbpc-opt-body { padding: 11px 8px; border-radius: var(--nbpc-radius-field); }
.nbpc-type .nbpc-opt-label { font-size: var(--nbpc-fs-md); }
.nbpc-plans .nbpc-opt-icon { width: 28px; height: 28px; margin-bottom: 4px; }
.nbpc-plans .nbpc-opt-body { padding: 12px 10px; }
.nbpc-plans .nbpc-opt.nbpc-featured .nbpc-opt-body { padding-top: 16px; }
.nbpc-opts { margin-bottom: 14px; }

.nbpc-pricebox {
  background: var(--nbpc-color-tint); border: 1px solid var(--nbpc-color-border-tint); border-radius: var(--nbpc-radius-option);
  padding: 12px 16px; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px;
}
.nbpc-pb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--nbpc-fs-md); color: var(--nbpc-color-text-soft); }
.nbpc-pb-val { font-weight: var(--nbpc-fw-heavy); color: var(--nbpc-color-price); font-size: 20px; }
.nbpc-pb-due { font-size: 20px; }
.nbpc-pb-small { font-size: var(--nbpc-fs-base); }
.nbpc-pb-small span:last-child { color: var(--nbpc-color-text); font-weight: var(--nbpc-fw-semibold); text-align: right; }
.nbpc-pb-promo { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-text-soft); }
.nbpc-promo-badge { background: var(--nbpc-color-highlight); color: var(--nbpc-color-on-highlight); font-size: 10px; font-weight: var(--nbpc-fw-bold); padding: 3px 9px; border-radius: var(--nbpc-radius-pill); }
.nbpc-fine { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); line-height: 1.5; margin: 12px 0 0; }
.nbpc-row { gap: var(--nbpc-gap); }

/* date chips */
.nbpc-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.nbpc-chip .nbpc-opt-body { padding: 9px 4px; border-radius: var(--nbpc-radius-field); }
.nbpc-chip .nbpc-opt-label { font-size: var(--nbpc-fs-sm); text-transform: uppercase; letter-spacing: 0.5px; color: var(--nbpc-color-muted); }
.nbpc-chip .nbpc-opt-sub { font-size: var(--nbpc-fs-md); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-top: 1px; }
.nbpc-chip input:checked + .nbpc-opt-body { background: var(--nbpc-color-selected); border-color: var(--nbpc-color-selected); }
.nbpc-chip input:checked + .nbpc-opt-body .nbpc-opt-label, .nbpc-chip input:checked + .nbpc-opt-body .nbpc-opt-sub { color: var(--nbpc-color-on-selected); }
.nbpc-more { display: block; width: 100%; min-height: var(--nbpc-tap-target); background: transparent; border: 1px dashed var(--nbpc-color-border-tint); border-radius: var(--nbpc-radius-field); color: var(--nbpc-color-label); font-size: var(--nbpc-fs-base); font-weight: var(--nbpc-fw-bold); cursor: pointer; margin-bottom: 16px; }
.nbpc-more:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }
.nbpc-section-label { margin-top: 4px; }
.nbpc-slots { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.nbpc-slot .nbpc-opt-body { padding: 10px 4px; }
.nbpc-slot .nbpc-opt-sub { margin-top: 1px; }

/* pay step */
.nbpc-pay { display: block; }
.nbpc-paysum { margin-bottom: 4px; }

.nbpc-pay-title { font-size: var(--nbpc-fs-sm); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-label); text-transform: var(--nbpc-label-transform); letter-spacing: var(--nbpc-label-spacing); margin-bottom: 8px; }
.nbpc-wallets { margin-bottom: 4px; }
.nbpc-wallets.nbpc-pending { height: 0; overflow: hidden; margin: 0; }   /* mounted but collapsed until Stripe reports a wallet */
.nbpc-ece { min-height: 0; }
/* Square (provider 'square'): wallet slots + card container. The Apple Pay button is Apple's own CSS button (Safari/WebKit only; only created when the SDK reports Apple Pay). */
.nbpc-sq-slot { margin-bottom: 8px; }
.nbpc-sq-gpay { min-height: 48px; }
.nbpc-sq-apple { -webkit-appearance: -apple-pay-button; appearance: -apple-pay-button; -apple-pay-button-type: book; -apple-pay-button-style: black; width: 100%; height: 48px; cursor: pointer; border-radius: var(--nbpc-radius-pill, 999px); }
.nbpc-sq-card { min-height: 90px; }
.nbpc-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0; font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); text-transform: var(--nbpc-label-transform); letter-spacing: var(--nbpc-label-spacing); }
.nbpc-divider::before, .nbpc-divider::after { content: ''; flex: 1; height: 1px; background: var(--nbpc-color-divider); }
.nbpc-pe { min-height: 120px; margin-bottom: 12px; }
.nbpc-skel { height: 44px; border-radius: var(--nbpc-radius-field); background: var(--nbpc-color-track); margin-bottom: 10px; animation: nbpcPulse 1.2s ease-in-out infinite; }
@keyframes nbpcPulse { 50% { opacity: 0.5; } }
.nbpc-cancel { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-text-soft); line-height: 1.5; margin: 4px 0 12px; }
.nbpc-pay-error { background: var(--nbpc-color-error-bg); border: 1px solid var(--nbpc-color-error-border); color: var(--nbpc-color-error-text); border-radius: var(--nbpc-radius-field); padding: 12px 14px; font-size: var(--nbpc-fs-base); line-height: 1.5; margin-bottom: 12px; }
.nbpc-btn-block { display: block; width: 100%; }
.nbpc-paybtn { min-height: 52px; font-size: 17px; }
.nbpc-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--nbpc-fs-xs); color: var(--nbpc-color-muted); text-align: center; margin: 10px 0 0; }
.nbpc-lock { width: 12px; height: 12px; flex-shrink: 0; }
.nbpc-iab { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); text-align: center; margin: 10px 0 0; }
.nbpc-iab-link { color: var(--nbpc-color-label); font-weight: var(--nbpc-fw-semibold); }
.nbpc-iab-hint { display: block; margin-top: 4px; }
.nbpc-btns-solo { margin-top: 16px; }
.nbpc-btns-solo .nbpc-btn-secondary { width: 100%; }

/* mock mode (local testing only) */
.nbpc-mockbadge { background: #b00020; color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 6px 12px; letter-spacing: 0.3px; }

/* links in free text (call line, not-configured notice, area notice) */
.nbpc-callline { color: var(--nbpc-color-text-soft); font-size: var(--nbpc-fs-base); text-align: center; margin: 18px 0 0; }
.nbpc-callline a, .nbpc-business-text a { color: var(--nbpc-color-label); font-weight: var(--nbpc-fw-bold); }
.nbpc-explain { text-align: left; font-size: var(--nbpc-fs-sm); margin: 8px 0 14px; }

/* ---------- Oct 11 additions: booking choice, earliest-available box, in-page Terms/Privacy dialog ---------- */
.nbpc-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: var(--nbpc-section-gap); }
.nbpc-choice .nbpc-opt-body { padding: 14px 8px; border-radius: var(--nbpc-radius-field); min-height: 64px; display: flex; flex-direction: column; justify-content: center; }
.nbpc-choice .nbpc-opt-label { font-size: var(--nbpc-fs-md); }
.nbpc-choice .nbpc-opt-sub { margin-top: 3px; }
.nbpc-choice input:checked + .nbpc-opt-body { background: var(--nbpc-gradient-selected); border-color: var(--nbpc-color-selected); }
.nbpc-choice input:checked + .nbpc-opt-body .nbpc-opt-label,
.nbpc-choice input:checked + .nbpc-opt-body .nbpc-opt-sub { color: var(--nbpc-color-slot-selected-text); }
.nbpc-choice input:checked + .nbpc-opt-body .nbpc-opt-sub { opacity: 0.85; }
.nbpc-asap { border: 2px solid var(--nbpc-color-accent); background: var(--nbpc-color-tint); border-radius: var(--nbpc-radius-field); padding: 14px; margin: 4px 0 16px; text-align: center; }
.nbpc-asap-label { font-size: var(--nbpc-fs-sm); text-transform: uppercase; letter-spacing: 0.6px; color: var(--nbpc-color-muted); font-weight: var(--nbpc-fw-bold); }
.nbpc-asap-val { font-size: var(--nbpc-fs-lg, 18px); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin: 4px 0 12px; line-height: 1.35; }
.nbpc-asap .nbpc-more { margin-bottom: 4px; }
.nbpc-asap .nbpc-fine { text-align: center; margin-top: 8px; }
.nbpc-asap[hidden], .nbpc-later[hidden] { display: none; }
.nbpc-linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--nbpc-color-label); font-weight: var(--nbpc-fw-bold); text-decoration: underline; cursor: pointer; }
.nbpc-linklike:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; border-radius: 3px; }
.nbpc-newbtn { margin-top: 16px; }
.nbpc-dlg-back { position: fixed; z-index: 2147483000; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: flex-end; justify-content: center; }
.nbpc-dlg { background: var(--nbpc-color-card-bg); color: var(--nbpc-color-text); width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3); outline: none; }
@media (min-width: 640px) { .nbpc-dlg-back { align-items: center; } .nbpc-dlg { border-radius: 16px; } }
.nbpc-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--nbpc-color-border-tint); }
.nbpc-dlg-title { margin: 0; font-size: var(--nbpc-fs-lg, 18px); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); }
.nbpc-dlg-x { min-width: 44px; min-height: 44px; background: transparent; border: 0; font-size: 28px; line-height: 1; color: var(--nbpc-color-text); cursor: pointer; border-radius: 8px; }
.nbpc-dlg-x:focus-visible { outline: 3px solid var(--nbpc-color-focus); }
.nbpc-dlg-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; font-size: var(--nbpc-fs-base); line-height: 1.55; flex: 1 1 auto; }
.nbpc-dlg-body p { margin: 0 0 12px; }
.nbpc-dlg-frame { width: 100%; height: 60vh; border: 0; background: #fff; }
.nbpc-dlg-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--nbpc-color-border-tint); }
.nbpc-dlg-foot .nbpc-btn { width: 100%; }


/* ---------- Oct 11 (Landing Page requests): compact step 1, sticky Next bar, retry/disabled states ---------- */
/* three plans in ONE row at every width */
.nbpc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nbpc-plans .nbpc-opt.nbpc-featured { grid-column: auto; width: auto; max-width: none; justify-self: stretch; }
.nbpc-plans .nbpc-opt-body { padding: 10px 4px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nbpc-plans .nbpc-opt.nbpc-featured .nbpc-opt-body { padding-top: 10px; }
.nbpc-plans .nbpc-opt-icon { width: 24px; height: 24px; margin: 0 auto 4px; }
.nbpc-plans .nbpc-opt-label { font-size: var(--nbpc-fs-sm); line-height: 1.2; }
.nbpc-plans .nbpc-opt-sub { font-size: 11px; line-height: 1.25; margin-top: 2px; }
/* Business is a small link, not a card */
.nbpc-bizline { font-size: var(--nbpc-fs-sm); color: var(--nbpc-color-muted); margin: -4px 0 12px; }
.nbpc-bizlink { background: none; border: 0; padding: 4px 0; font: inherit; font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-label); text-decoration: underline; cursor: pointer; min-height: 32px; }
.nbpc-bizlink:focus-visible, .nbpc-biz-back:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; border-radius: 4px; }
.nbpc-biz-back { margin-top: 12px; margin-bottom: 0; }
.nbpc-retry { display: block; margin-top: 10px; width: 100%; }
.nbpc-pay-error a, .nbpc-submit-error a { color: inherit; font-weight: var(--nbpc-fw-bold); text-decoration: underline; }
.nbpc-paybtn[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.4); box-shadow: none; }
.nbpc-input, .nbpc-select { scroll-margin: 90px 0 150px; }

/* small phones and in-app browsers: tighter step 1, Next stays reachable */
@media (max-width: 600px), (max-height: 700px) {
  .nbpc-btns.nbpc-sticky { position: sticky; bottom: var(--nbpc-kb, 0px); z-index: 5; margin: 14px calc(var(--nbpc-pad-x) * -1) 0; padding: 10px var(--nbpc-pad-x) calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--nbpc-color-card-bg); box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.07); }
  .nbpc-body { padding-bottom: 0; }
  .nbpc-btns.nbpc-sticky .nbpc-btn { min-height: 48px; }
  /* the Pay button rides in the same thumb zone: it sticks to the bottom (above the keyboard via --nbpc-kb) while the payment form scrolls under it.
     The opaque bar behind it is a box-shadow halo (card color; side and bottom lobes widen it to the card edges), so no wrapper element is needed. Disabled = grey fill, NOT opacity (opacity would make the bar see-through). */
  .nbpc-paybtn { position: sticky; bottom: calc(10px + var(--nbpc-kb, 0px) + env(safe-area-inset-bottom, 0px)); z-index: 5; margin-top: 12px;
    box-shadow: 0 0 0 10px var(--nbpc-color-card-bg), -30px 0 0 10px var(--nbpc-color-card-bg), 30px 0 0 10px var(--nbpc-color-card-bg), 0 34px 0 10px var(--nbpc-color-card-bg); }
  .nbpc-paybtn[disabled] { opacity: 1; filter: none; background: var(--nbpc-color-track); color: var(--nbpc-color-muted); border: 1px solid var(--nbpc-color-border); }
}
@media (max-height: 700px) {
  .nbpc-bn { --nbpc-body-pad-top: 14px; --nbpc-body-pad-bottom: 0px; --nbpc-field-gap: 10px; --nbpc-section-gap: 10px; }
  .nbpc-bn { padding-top: 0; padding-bottom: 0; }
  .nbpc-step-title { font-size: 20px; margin-bottom: 8px; }
  .nbpc-step-sub { display: none; }
  .nbpc-section-label { margin: 0 0 6px; }
  .nbpc-choice .nbpc-opt-body { padding: 8px 6px; min-height: 52px; }
  .nbpc-plans .nbpc-opt-sub { display: none; }
  .nbpc-plans .nbpc-opt-icon { width: 20px; height: 20px; margin-bottom: 2px; }
  .nbpc-plans .nbpc-opt-body { padding: 8px 4px; }
  .nbpc-pricebox { padding: 10px 12px; }
  .nbpc-pb-row { padding: 2px 0; }
  .nbpc-progress, .nbpc-seg-bar { margin-bottom: 0; }
  .nbpc-bizline { margin-bottom: 8px; }
  .nbpc-field { margin-bottom: 10px; gap: 4px; }
  .nbpc-input, .nbpc-select { min-height: 44px; }
  .nbpc-mockbadge { padding: 4px 8px; font-size: 11px; }
}
.nbpc-pb-val { white-space: nowrap; }
.nbpc-pb-row { flex-wrap: wrap; }
@media (max-height: 700px) { .nbpc-pb-val, .nbpc-pb-due { font-size: 17px; } }
.nbpc-rc { margin: 18px 0 0; padding: 16px; border: 1px solid var(--nbpc-color-border); border-radius: var(--nbpc-radius-field); background: var(--nbpc-color-card-bg); }
.nbpc-rc-title { display: block; font-size: var(--nbpc-fs-md, 16px); font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); margin-bottom: 2px; text-transform: none; letter-spacing: 0; }
.nbpc-rc-sub { margin: 0 0 10px; }
.nbpc-rc-row { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.nbpc-rc-row .nbpc-input { width: 100%; min-height: var(--nbpc-tap-target, 52px); font-size: 16px; }
.nbpc-rc-btn { width: 100%; min-height: 52px; }
.nbpc-rc-skip { width: 100%; min-height: 48px; margin: 8px 0 0; border: 0; text-decoration: underline; }
.nbpc-rc-msg { margin-top: 6px; }
.nbpc-rc-msg a { color: inherit; font-weight: var(--nbpc-fw-bold); text-decoration: underline; }

/* ---------- Round 9 polish: ONE calm system for step 1 and the surfaces around it ----------
   Type scale (tokens, set by the theme; these are the fallbacks): 12 caption . 14 small/labels/tiles . 16 body/input/button . 18 lead.
   Rules: tiles and panels have ONE treatment (hairline or soft fill, never both, never dashed); quiet actions are underlined text links; accent = --nbpc-color-selected only. */
.nbpc-bn { --nbpc-type-xs: 12px; --nbpc-type-sm: 14px; --nbpc-type-md: 16px; --nbpc-type-lg: 18px; --nbpc-tile-gap: 10px; --nbpc-tile-min: 76px; --nbpc-tile-radius: var(--nbpc-radius-option, 14px); }
.nbpc-bn .nbic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; border: 0; background: var(--nbpc-color-tint); color: var(--nbpc-color-selected); transition: background-color .15s; }
.nbpc-bn .nbic svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nbpc-bn .nbic .nbic-fill { fill: currentColor; stroke: none; }
/* the 12-pest picker: uniform 3-column grid, equal tiles, one hairline, selected = accent line + soft tint + check */
.nbpc-pests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nbpc-tile-gap); margin: 0 0 12px; }
.nbpc-pest { position: relative; display: block; margin: 0; padding: 0; min-width: 0; cursor: pointer; }
.nbpc-pest[hidden] { display: none !important; }
.nbpc-pest-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; width: 100%; height: 100%; min-height: var(--nbpc-tile-min); padding: 10px 6px; border: 1px solid var(--nbpc-color-border); border-radius: var(--nbpc-tile-radius); background: var(--nbpc-color-card-bg); text-align: center; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.nbpc-pest-label { display: block; font-size: var(--nbpc-type-sm); font-weight: var(--nbpc-fw-medium); line-height: 1.2; color: var(--nbpc-color-text); text-wrap: balance; overflow-wrap: break-word; }
.nbpc-pest-check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: var(--nbpc-color-selected); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; pointer-events: none; }
.nbpc-pest-check::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--nbpc-color-on-selected); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.nbpc-pest.nbpc-on .nbpc-pest-check, .nbpc-pest input:checked ~ .nbpc-pest-check { opacity: 1; transform: none; }
.nbpc-pest input:checked + .nbpc-pest-body { border-color: var(--nbpc-color-selected); background: var(--nbpc-gradient-selected, var(--nbpc-color-tint)); box-shadow: 0 0 0 1px var(--nbpc-color-selected) inset; }
.nbpc-pest input:checked + .nbpc-pest-body .nbic { background: var(--nbpc-color-card-bg); }
.nbpc-pest input:focus-visible + .nbpc-pest-body, .nbpc-pest-more:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }
@media (hover: hover) { .nbpc-pest:hover .nbpc-pest-body { border-color: var(--nbpc-color-selected); } }
/* 'More pests': a quiet full-width tile in the same hairline and radius (it is a toggle, not a pest) */
.nbpc-pest-more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; min-height: 48px; width: 100%; padding: 0 12px; margin: 0; border: 1px solid var(--nbpc-color-border); border-radius: var(--nbpc-tile-radius); background: transparent; color: var(--nbpc-color-text-soft); font: inherit; font-size: var(--nbpc-type-sm); font-weight: var(--nbpc-fw-medium); cursor: pointer; }
.nbpc-pest-more::after { content: ""; width: 7px; height: 7px; margin-left: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nbpc-pest-more[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.nbpc-pest-more-count { color: var(--nbpc-color-selected); }
@media (hover: hover) { .nbpc-pest-more:hover { border-color: var(--nbpc-color-selected); } }
/* 'Your plan: X . covers ... . Change plan': one calm row, no fill, no border */
.nbpc-planrec { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 var(--nbpc-section-gap, 14px); padding: 0; font-size: var(--nbpc-type-sm); line-height: 1.4; color: var(--nbpc-color-text-soft); }
.nbpc-planrec[hidden] { display: none; }
.nbpc-planrec-txt { min-width: 0; }
.nbpc-planrec-name { font-weight: var(--nbpc-fw-bold); color: var(--nbpc-color-text); }
.nbpc-planrec-covers { color: var(--nbpc-color-muted); }
.nbpc-planrec-btn { flex: none; min-height: 48px; margin: -6px -4px; padding: 0 4px; border: 0; background: transparent; color: var(--nbpc-color-selected); font: inherit; font-size: var(--nbpc-type-sm); font-weight: var(--nbpc-fw-bold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.nbpc-planrec-btn:focus-visible, .nbpc-latelink:focus-visible, .nbpc-more:focus-visible, .nbpc-apt-link:focus-visible { outline: 3px solid var(--nbpc-color-focus); outline-offset: 2px; }
.nbpc-plans[hidden] { display: none !important; }
.nbpc-hint { font-weight: var(--nbpc-fw-medium); color: var(--nbpc-color-muted); }
/* ZIP -> city, pay-later, notice: small, quiet */
.nbpc-zipcity { margin: -6px 0 10px; font-size: var(--nbpc-type-sm); font-weight: var(--nbpc-fw-medium); color: var(--nbpc-color-selected); }
.nbpc-zipcity[hidden] { display: none; }
.nbpc-notice { margin: 10px 0 0; text-align: center; }
.nbpc-latelink { display: block; width: 100%; min-height: 48px; margin: 4px 0 0; border: 0; background: transparent; color: var(--nbpc-color-text-soft); font: inherit; font-size: var(--nbpc-type-sm); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* ---- calm surfaces: ONE panel treatment (soft fill, no border), quiet links instead of dashed boxes ---- */
.nbpc-trust { font-size: var(--nbpc-type-xs); letter-spacing: .02em; color: var(--nbpc-color-muted); margin: -2px 0 var(--nbpc-section-gap, 14px); line-height: 1.4; }
.nbpc-bizline { font-size: var(--nbpc-type-xs); color: var(--nbpc-color-muted); margin: -4px 0 var(--nbpc-section-gap, 14px); }
.nbpc-bizlink { font-size: var(--nbpc-type-xs); }
.nbpc-more { border: 0; border-radius: 0; background: transparent; min-height: 48px; width: auto; margin: 0 auto 8px; padding: 0 8px; font-size: var(--nbpc-type-sm); text-decoration: underline; text-underline-offset: 3px; color: var(--nbpc-color-selected); }
.nbpc-asap { border: 0; background: var(--nbpc-color-tint); border-radius: var(--nbpc-radius-card); padding: 16px 14px 8px; }
.nbpc-asap .nbpc-more { display: block; margin: 0 auto; }
.nbpc-asap-label { font-size: var(--nbpc-type-xs); letter-spacing: .06em; font-weight: var(--nbpc-fw-medium); }
.nbpc-asap-val { font-weight: var(--nbpc-fw-medium); margin: 4px 0 4px; }
.nbpc-area-error, .nbpc-business, .nbpc-paysum, .nbpc-pricebox, .nbpc-notice { border: 0; }
.nbpc-area-error { background: var(--nbpc-color-tint); }
.nbpc-apt-link { min-height: 48px; margin: -8px 0 4px; color: var(--nbpc-color-selected); font-size: var(--nbpc-type-sm); text-underline-offset: 3px; }
.nbpc-rc { border: 0; background: var(--nbpc-color-tint); border-radius: var(--nbpc-radius-card); }
/* Back = quiet secondary; Next/Pay = the one primary. (Hover colours only where hover exists: on touch they stuck after a tap and showed a second green.) */
.nbpc-bn .nbpc-btns .nbpc-btn.nbpc-btn-secondary { flex: 0 0 auto; min-width: 72px; padding-left: 8px; padding-right: 8px; border-color: transparent; background: transparent; color: var(--nbpc-color-text-soft); }   /* (.nbpc-btn.nbpc-btn-secondary: wins over a host page's own .flow-mount .nbpc-btn-secondary) */
.nbpc-bn .nbpc-btns { gap: 8px; }
.nbpc-bn .nbpc-btns .nbpc-btn.nbpc-btn-primary { flex: 1 1 auto; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
.nbpc-bn .nbpc-btns-solo .nbpc-btn.nbpc-btn-secondary { width: 100%; border-color: var(--nbpc-color-border); }
/* panels: no border, even when a host page restyles them with .flow-mount rules (higher specificity on purpose) */
.nbpc-bn .nbpc-card .nbpc-pricebox.nbpc-pricebox, .nbpc-bn .nbpc-card .nbpc-notice.nbpc-notice, .nbpc-bn .nbpc-card .nbpc-business.nbpc-business, .nbpc-bn .nbpc-card .nbpc-area-error.nbpc-area-error { border-width: 0; }
/* Round 10: pest icons = solid single-colour silhouettes from game-icons.net (CC BY 3.0, see ICON-CREDITS.md), 512 grid, fill currentColor = accent; no circle behind them */
.nbpc-bn { --nbpc-color-icon-tint: var(--nb-green-tint-strong, #D4E4D9); --nbpc-icon-size: 50px; --nbpc-tile-min: 104px; }
.nbpc-bn .nbpc-pest .nbic { width: var(--nbpc-icon-size); height: var(--nbpc-icon-size); margin: 0 auto; background: none; border: 0; border-radius: 0; color: var(--nbpc-color-selected); }
.nbpc-bn .nbpc-pest .nbic svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: none; }
.nbpc-bn .nbpc-pest input:checked + .nbpc-pest-body .nbic { background: none; }
/* Round 11: our own originals (boxelder, stink bug, silverfish, earwig) carry their own stroke attributes; light detail lines use the tint token */
.nbpc-bn .nbpc-pest .nbic svg .tl { stroke: var(--nbpc-color-icon-tint); }
.nbpc-bn .nbpc-pest .nbic svg .s { fill: currentColor; }
.nbpc-pest-body { gap: 4px; padding: 10px 4px 8px; }
@media (max-height: 700px) { .nbpc-bn { --nbpc-icon-size: 46px; --nbpc-tile-min: 98px; --nbpc-tile-gap: 8px; } .nbpc-pest-body { padding: 8px 3px 6px; gap: 3px; } }
@media (max-height: 640px) { .nbpc-bn { --nbpc-tile-min: 90px; } }
@media (min-width: 700px) { .nbpc-bn { --nbpc-icon-size: 50px; --nbpc-tile-min: 108px; } .nbpc-pest-body { gap: 6px; } }
.nbpc-bn .nbpc-sepnote { margin: 8px 0 0; padding: 10px 12px; border-radius: var(--nbpc-radius-field, 14px); background: var(--nbpc-color-tint); color: var(--nbpc-color-text); font-size: var(--nbpc-type-sm); line-height: 1.4; }
.nbpc-bn .nbpc-sepnote[hidden] { display: none; }