:root {
  --ink: #182033;
  --muted: #667085;
  --paper: #ffffff;
  --white: #ffffff;
  --navy: #123b72;
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --border: #dededb;
  --danger: #a42d2d;
  --success: #17663a;
  --shadow: 0 18px 48px rgba(23, 34, 56, 0.1);
  --selected-primary: #c79245;
  --selected-secondary: #172238;
  --selected-page: #fbfaf7;
  --completion-start: #123b72;
  --completion-end: #2563eb;
  --completion-shadow: rgba(37, 99, 235, 0.24);
  --completion-link: #1d4ed8;
  --completed-card-background: #f2f7ff;
  --completed-card-border: rgba(37, 99, 235, 0.35);
  --completed-icon-background: #eaf1ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Anthropic Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  line-height: 1.55;
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font: inherit;
}

.builder-header {
  width: min(900px, calc(100% - 40px));
  margin-inline: auto;
}

main {
  width: min(900px, calc(100% - 40px));
  margin-inline: auto;
}

.home-screen {
  display: grid;
  gap: 24px;
  padding: 16px 0 42px;
}

.home-screen[hidden],
.home-panel[hidden] {
  display: none;
}

/* The create/modify wizard is a full modal: a dim, blurred backdrop with
   a single centered panel that owns its own scrolling. This keeps the
   long page behind it locked and out of the way, instead of the wizard
   competing with the rest of the page for scroll position (which was the
   root cause of the step-to-step "shake"). */
#builder-workspace.wizard-modal {
  position: fixed;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  inset: 0;
  padding: 28px;
  background: rgb(15 23 42 / 52%);
  backdrop-filter: blur(4px);
}

#builder-workspace.wizard-modal[hidden] {
  display: none;
}

.wizard-modal-panel {
  display: flex;
  flex-direction: column;
  width: min(900px, 100%);
  /* A fixed height (not max-height) so every step gets the same panel
     size - using as much of the viewport as comfortably fits - and each
     step's own content scrolls inside that constant frame instead of the
     whole panel growing or shrinking to fit whatever step is showing. */
  height: calc(100vh - 56px);
  padding: 8px 24px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
  -webkit-overflow-scrolling: touch;
}

/* Locked while the wizard modal is open, so the page behind it can't
   scroll along with (or instead of) the panel. */
body.wizard-modal-open {
  overflow: hidden;
}

.home-options {
  display: grid;
  gap: 22px;
  padding: 26px;
  background: #f4f7fc;
  border: 1px solid #dce5f3;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(23, 34, 56, 0.09);
}

.home-welcome {
  padding: 0 2px;
}

.home-welcome h2 {
  margin: 0 0 6px;
  color: var(--navy);
  font-size: 22px;
}

.home-welcome p:last-child {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}

.home-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.created-website-result {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  color: var(--white);
  background: linear-gradient(
    135deg,
    var(--completion-start),
    var(--completion-end)
  );
  border-radius: 18px;
  box-shadow: 0 18px 42px var(--completion-shadow);
}

.created-website-result[hidden] {
  display: none;
}

.created-website-result h3,
.created-website-result p {
  margin: 0;
  color: var(--white);
}

.created-website-result h3 {
  margin-bottom: 5px;
  font-size: 23px;
}

.created-website-result .eyebrow {
  margin-bottom: 4px;
  opacity: 0.78;
}

.created-website-result a {
  flex: 0 0 auto;
  padding: 11px 15px;
  color: var(--completion-link);
  font-weight: 700;
  text-decoration: none;
  background: var(--white);
  border-radius: 10px;
}

.created-website-result a[hidden] {
  display: none;
}

.created-website-pending {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.created-website-pending[hidden] {
  display: none;
}

.ring-progress {
  transform: rotate(-90deg);
}

.ring-progress-track {
  fill: none;
  stroke: rgb(255 255 255 / 30%);
  stroke-width: 4;
}

.ring-progress-fill {
  fill: none;
  stroke: var(--white);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
}

.home-action-card.website-created {
  background: var(--completed-card-background);
  border-color: var(--completed-card-border);
}

.home-action-card {
  display: grid;
  gap: 14px;
  align-content: space-between;
  min-height: 190px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(23, 34, 56, 0.07);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.home-action-card:hover {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 18px 42px rgba(23, 34, 56, 0.12);
  transform: translateY(-3px);
}

.home-action-card h3,
.home-action-card p {
  margin: 0;
}

.home-action-card h3 {
  margin-bottom: 6px;
  color: var(--navy);
  font-size: 22px;
}

.home-action-card p {
  font-size: 14px;
}

.home-action-card button,
.home-panel-action {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 14px;
  color: var(--white);
  font-weight: 700;
  background: var(--navy);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.home-action-primary {
  background: linear-gradient(155deg, #ffffff, #f2f7ff);
  border-color: rgba(37, 99, 235, 0.35);
}

.home-action-card:nth-child(2) {
  background: linear-gradient(155deg, #ffffff, #f7f9fc);
  border-color: #d6deea;
}

.home-action-card:nth-child(3) {
  background: linear-gradient(155deg, #ffffff, #fff8f7);
  border-color: #eedbd8;
}

.home-action-muted {
  background: #fafafa;
}

.home-action-card button:disabled {
  color: var(--muted);
  background: #eceef2;
  cursor: not-allowed;
}

.home-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.home-panel-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
}

.home-panel-heading h3,
.home-panel-heading p {
  margin: 0;
}

.panel-close {
  display: grid;
  width: 34px;
  height: 34px;
  color: var(--navy);
  font-size: 22px;
  background: #eef2f8;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.home-panel-action {
  width: auto;
  justify-self: start;
}

.delete-website-action {
  background: var(--danger);
}

.home-panel-status {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.home-panel-status.success {
  color: var(--success);
}

.home-panel-status.error {
  color: var(--danger);
}

.trial-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

#trial-reminder-note a {
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.operation-loader {
  position: fixed;
  z-index: 1200;
  display: grid;
  inset: 0;
  padding: 20px;
  background: rgb(15 23 42 / 46%);
  backdrop-filter: blur(3px);
  place-items: center;
}

.operation-loader[hidden] {
  display: none;
}

.operation-loader-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: min(280px, 100%);
  padding: 18px 22px;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgb(15 23 42 / 20%);
}

.operation-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #dbe4f0;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: operation-spin 0.75s linear infinite;
}

.operation-in-progress {
  overflow: hidden;
}

.otp-dialog {
  position: fixed;
  z-index: 1100;
  display: grid;
  inset: 0;
  padding: 20px;
  background: rgb(15 23 42 / 52%);
  backdrop-filter: blur(4px);
  place-items: center;
}

.otp-dialog[hidden] {
  display: none;
}

.otp-dialog-card {
  display: grid;
  gap: 16px;
  width: min(100%, 430px);
  padding: 24px;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(15 23 42 / 28%);
}

.otp-dialog-card p,
.otp-dialog-card h2 {
  margin: 0;
}

.otp-dialog-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
}

.otp-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.otp-dialog-actions .home-panel-action {
  justify-self: auto;
}

.otp-submitting {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.otp-submitting::before {
  width: 15px;
  height: 15px;
  content: "";
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: operation-spin 0.75s linear infinite;
}

.otp-resend-button {
  padding: 10px 14px;
  color: var(--navy);
  font-weight: 700;
  background: #eef2f8;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.otp-dialog-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}



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

.modify-only-message {
  display: block;
  margin-top: 7px;
  color: var(--muted);
}

.contact-primary-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}

.contact-primary-fields > label {
  display: grid;
  gap: 8px;
}

.contact-field-label {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
}

.contact-primary-fields input {
  min-height: 46px;
}

#contact-email:read-only {
  color: var(--muted);
  background: #f1f3f6;
  cursor: not-allowed;
}

.contact-us-panel {
  background: linear-gradient(145deg, #ffffff, #f8faff);
}

.builder-home-button {
  padding: 4px 9px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  background: #eef2f8;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.builder-header {
  padding: 14px 22px 22px;
  margin-top: 14px;
  background:
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.28), transparent 34%),
    linear-gradient(135deg, var(--navy), var(--accent));
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(18, 59, 114, 0.18);
}

.builder-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.builder-brand {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.gudispace-logo-mark {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  color: var(--accent);
  font-family: Arial, sans-serif;
  font-size: 23px;
  font-weight: 900;
  background: var(--white);
  border-radius: 13px 13px 13px 5px;
  box-shadow: 0 8px 20px rgba(10, 35, 78, 0.2);
  place-items: center;
}

.gudispace-logo-mark::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 10px;
  height: 10px;
  background: #8dc5ff;
  border: 2px solid var(--navy);
  border-radius: 50%;
  content: "";
}

.gudispace-logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.gudispace-logo-mark:has(img:not([hidden]))::after {
  display: none;
}

.builder-brand-name {
  font-size: 22px;
  letter-spacing: -0.4px;
}

.builder-navigation {
  display: flex;
  gap: 4px;
  align-items: center;
}

.builder-navigation > a {
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
}

.builder-navigation > a:hover,
.builder-navigation > a.active {
  color: var(--white);
  background: rgba(255, 255, 255, 0.16);
}

.builder-menu-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  display: none;
  width: 42px;
  height: 40px;
  padding: 9px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transform: translateY(-50%);
}

.builder-menu-toggle span {
  display: block;
  height: 2px;
  margin: 4px 0;
  background: var(--white);
  border-radius: 4px;
}

.builder-intro,
.content-page-intro {
  padding-top: 20px;
  margin-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.builder-header .eyebrow,
.builder-header h1,
.builder-header p {
  color: var(--white);
}

.builder-header .eyebrow {
  opacity: 0.8;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

h1,
h2 {
  margin-top: 0;
  font-family: "Anthropic Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  line-height: 1.15;
  letter-spacing: -1.2px;
}

h1 {
  margin-bottom: 4px;
  color: var(--accent-dark);
  font-size: clamp(25px, 2.7vw, 34px);
  white-space: nowrap;
}

h2 {
  margin-bottom: 4px;
  font-size: 22px;
}

p {
  color: var(--muted);
}

.builder-header p:last-child,
.section-heading p {
  margin: 0;
}

.builder-intro > p:not(.eyebrow) {
  margin: 0 0 5px;
}

.device-note {
  justify-self: start;
  flex: 0 0 auto;
  padding: 4px 9px;
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}

.content-page {
  display: grid;
  gap: 26px;
  padding: 26px 0 48px;
}

.content-page-intro h1 {
  white-space: normal;
}

.content-page-intro > p:last-child {
  max-width: 650px;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
}

.landing-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.information-tile,
.example-tile,
.pricing-tile,
.resource-tile {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 220px;
  padding: 24px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(155deg, #ffffff, #f4f7fc);
  border: 1px solid #dce5f3;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(23, 34, 56, 0.07);
}

.information-tile strong,
.example-tile > span {
  justify-self: start;
  padding: 5px 9px;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 800;
  background: #eaf1ff;
  border-radius: 99px;
}

.information-tile h2,
.example-tile h2,
.pricing-tile h2,
.resource-tile h2 {
  margin: 0;
  color: var(--navy);
  font-size: 21px;
}

.information-tile p,
.example-tile p,
.pricing-tile p,
.resource-tile p {
  margin: 0;
}

.example-tile:nth-child(2) {
  background: linear-gradient(155deg, #ffffff, #f7f9fc);
}

.example-tile:nth-child(3) {
  background: linear-gradient(155deg, #ffffff, #fff8f7);
}

.example-tile b {
  align-self: end;
  color: var(--accent-dark);
}

.pricing-tile .pricing-value {
  color: var(--accent-dark);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.pricing-tile ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  margin: 2px 0 8px;
  color: var(--muted);
}

.pricing-tile > a {
  align-self: end;
  justify-self: start;
  padding: 10px 14px;
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  background: var(--navy);
  border-radius: 9px;
}

.empty-page-state {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  text-align: center;
  background: #f4f7fc;
  border: 1px dashed #c9d6e8;
  border-radius: 16px;
}

.faq-list {
  display: grid;
  gap: 12px;
}

.faq-list details {
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid #dce5f3;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(23, 34, 56, 0.06);
}

.faq-list summary {
  color: var(--navy);
  font-weight: 800;
  cursor: pointer;
}

.faq-list p {
  margin: 12px 0 0;
}

.resource-tile {
  transition:
    border-color 180ms ease,
    transform 180ms ease;
}

.resource-tile:hover {
  border-color: rgba(37, 99, 235, 0.45);
  transform: translateY(-3px);
}

.resource-tile > span {
  align-self: end;
  color: var(--accent-dark);
  font-weight: 800;
}

.page-primary-action {
  justify-self: start;
  padding: 11px 16px;
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  background: var(--navy);
  border-radius: 10px;
}

.hero-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  text-align: center;
  border-top: none;
}

.hero-logo-mark {
  width: 68px;
  height: 68px;
  margin-bottom: 14px;
  font-size: 30px;
}

.hero-brand-name {
  margin-bottom: 6px;
  font-size: clamp(28px, 4.2vw, 44px);
  white-space: normal;
}

.hero-tagline {
  margin: 0;
  font-size: 15px;
  opacity: 0.9;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.hero-actions .page-primary-action {
  background: var(--white);
  color: var(--navy);
}

.marketing-section {
  padding: 34px 4px;
}

.section-divider {
  width: 2px;
  height: 44px;
  margin: 6px auto;
  background: linear-gradient(to bottom, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

.what-is-gudispace {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.what-is-gudispace h2 {
  margin-bottom: 10px;
}

.what-is-gudispace p {
  white-space: pre-line;
}

.why-us > h2 {
  margin-bottom: 10px;
  text-align: center;
}

.why-us-list {
  display: grid;
  gap: 16px;
  max-width: 640px;
  margin: 0 auto;
}

.why-us-row {
  display: flex;
  gap: 14px;
  /* flex-start (not center) - each row now carries a heading plus a
     description underneath, so the checkmark should sit level with the
     first line of text rather than centered against the whole block. */
  align-items: flex-start;
  text-align: left;
}

.why-us-row strong {
  flex: 0 0 auto;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  margin-top: 2px;
  color: var(--white);
  font-size: 14px;
  text-align: center;
  background: var(--accent);
  border-radius: 50%;
  place-items: center;
}

.why-us-text {
  display: grid;
  gap: 4px;
}

.why-us-row p {
  margin: 0;
}

.why-us-heading {
  font-weight: 700;
}

.why-us-description {
  color: var(--muted);
  font-size: 15px;
}

form {
  display: grid;
  gap: 22px;
  padding-bottom: 32px;
}

.wizard-progress {
  display: grid;
  position: sticky;
  top: 0;
  z-index: 20;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* Pinned to the top of the viewport on purpose: relying on
     scrollIntoView() to land exactly at this bar's position was
     inconsistent - a short step (e.g. Gallery) doesn't have enough
     content below to scroll this far, so the page would stop short and
     leave stuff above still showing, while a long step could scroll past
     it entirely. Sticky guarantees it's always the first thing visible
     regardless of how tall the current step's content is. */
}

.wizard-progress-top {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.wizard-step-label {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
  padding: 4px 2px;
  text-align: left;
}

#wizard-step-count {
  flex: 0 0 auto;
  color: var(--accent-dark);
  font-size: 13px;
  font-weight: 700;
}

#wizard-step-title {
  overflow: hidden;
  font-family: "Anthropic Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Previous/Next, duplicated up here next to the step name so you don't
   have to scroll down to the bottom nav to move between steps. */
.wizard-top-nav-button {
  display: grid;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  color: var(--navy);
  font-size: 17px;
  font-weight: 700;
  background: #eef2f8;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.wizard-top-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.wizard-top-nav-button[hidden] {
  display: none;
}

.wizard-progress-track {
  height: 3px;
  overflow: hidden;
  background: #e8e6e1;
  border-radius: 99px;
}

.wizard-progress-track span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
  border-radius: inherit;
  transition: width 220ms ease;
}

.wizard-step-links {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 6px 0 2px;
  /* The real scrollbar is hidden here in favor of the always-visible fake
     one below (.wizard-step-links-track) - relying on the native bar
     turned out to be inconsistent across browsers: some (notably Safari
     on a trackpad) keep it as an overlay that only appears while
     actively scrolling no matter what CSS asks for, regardless of
     overflow/scrollbar-width/::-webkit-scrollbar settings. */
  scrollbar-width: none;
}

.wizard-step-links::-webkit-scrollbar {
  display: none;
}

.wizard-step-links[hidden] {
  display: none;
}

/* Always-rendered, hand-drawn scroll indicator for the step strip above -
   a thin track with a thumb sized/positioned to match real scroll
   progress (kept in sync from JS). Never hidden by the OS's overlay-
   scrollbar behavior the way a real scrollbar can be. */
.wizard-step-links-track {
  position: relative;
  height: 5px;
  margin-bottom: 4px;
  overflow: hidden;
  /* Light track, clearly-darker thumb - the previous version used
     var(--border) for both, which are close enough to white that the
     thumb was hard to make out against the track at a glance. */
  background: #e5e2db;
  border-radius: 999px;
}

.wizard-step-links-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 24px;
  background: var(--muted);
  border-radius: inherit;
  cursor: grab;
}

.wizard-step-links-track {
  cursor: pointer;
}

/* Nothing to scroll (or not yet measured) - no point showing a track. */
.wizard-step-links-track[hidden] {
  display: none;
}

.wizard-step-links button {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}

.wizard-step-links button:hover,
.wizard-step-links button.active {
  color: #ffffff;
  background: var(--navy);
  border-color: var(--navy);
}

.form-card.wizard-hidden {
  display: none;
}

.wizard-navigation {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
}

.wizard-navigation button {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  padding: 12px 18px;
  color: var(--navy);
  font-weight: 700;
  background: var(--white);
  border: 1px solid #b8bbc2;
  border-radius: 10px;
  cursor: pointer;
}

.wizard-navigation #next-page {
  margin-left: auto;
  color: var(--white);
  background: var(--navy);
  border-color: var(--navy);
}

.wizard-navigation button:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.wizard-navigation button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.wizard-navigation button[hidden] {
  display: none;
}

.server-warning {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  margin-bottom: 22px;
  color: #7d261f;
  background: #fff0ed;
  border: 1px solid #efbbb4;
  border-radius: 12px;
}

.server-warning[hidden] {
  display: none;
}

.server-warning span {
  font-size: 14px;
}

.server-warning code {
  padding: 2px 5px;
  background: rgba(125, 38, 31, 0.08);
  border-radius: 4px;
}

.server-status {
  padding: 10px 14px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.server-status[hidden] {
  display: none;
}

.server-status.connected {
  color: var(--success);
  background: #edf8f1;
  border-color: #b8ddc5;
}

.server-status.disconnected {
  color: var(--danger);
  background: #fff0ed;
  border-color: #efbbb4;
}

.builder-prompt {
  margin: 10px 0 6px;
  color: var(--accent-dark);
  font-size: 18px;
  font-weight: 700;
}

/* Title + close (×) row, pinned at the very top of the wizard modal via
   the sticky .wizard-progress it lives inside - always visible above the
   step name/progress bar, never something you have to scroll past to
   find the close button. */
.wizard-modal-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
}

.wizard-modal-header .builder-prompt {
  margin: 0;
}

.form-card {
  padding: 30px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 5px 20px rgba(23, 34, 56, 0.04);
  /* Leaves room for the now-sticky .wizard-progress bar so
     scrollIntoView() doesn't tuck this step's heading behind it. */
  scroll-margin-top: 110px;
}

.form-card:focus-within {
  border-color: rgba(199, 146, 69, 0.65);
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  margin-bottom: 25px;
}

.section-heading > span {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  color: var(--accent-dark);
  font-weight: 700;
  background: #f4ecdf;
  border-radius: 50%;
  place-items: center;
}

.section-heading.compact {
  margin-bottom: 20px;
}

.section-heading p {
  font-size: 14px;
}

.template-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  margin: 0 0 24px;
  border: 0;
}

.bottom-template-picker {
  margin-bottom: 22px;
}

.design-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.design-mode-option {
  position: relative;
  display: block;
  padding: 14px 16px;
  background: #f8f8f6;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.design-mode-option:has(input:checked) {
  background: #fffaf1;
  border-color: var(--accent);
}

.design-mode-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.design-mode-option strong {
  display: block;
  font-size: 15px;
}

.design-mode-option small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.mood-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.mood-option {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 14px;
  background: #f8f8f6;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.mood-option:has(input:checked) {
  background: #fffaf1;
  border-color: var(--accent);
}

.mood-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.mood-name {
  font-weight: 700;
  font-size: 14px;
}

.mood-option small {
  color: var(--muted);
  font-size: 12px;
}

.palette-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.palette-option {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #f8f8f6;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.palette-option:has(input:checked) {
  background: #fffaf1;
  border-color: var(--accent);
}

.palette-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.palette-swatches {
  display: flex;
  overflow: hidden;
  border-radius: 8px;
}

.palette-swatch {
  flex: 1;
  height: 32px;
}

.palette-name {
  font-size: 13px;
  font-weight: 600;
}

.palette-tone {
  justify-self: start;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

.palette-tone-dark {
  color: #f5f5f5;
  background: #1a1a1a;
}

.palette-tone-light {
  color: #3a3a3a;
  background: #e8e6e0;
}

.design-controls {
  padding: 20px;
  margin-bottom: 24px;
  background: #f8f8f6;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.design-controls-heading {
  display: flex;
  gap: 25px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 18px;
}

.design-controls-heading h3,
.design-controls-heading p {
  margin: 0;
}

.design-controls-heading h3 {
  font-family: "Anthropic Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-size: 18px;
}

.design-controls-heading > p {
  color: var(--muted);
  font-size: 13px;
}

.design-color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.label-with-info {
  position: relative;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.field-info {
  display: inline-grid;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  background: #eef0f4;
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: help;
  place-items: center;
}

.field-info[aria-expanded="true"] {
  color: #ffffff;
  background: var(--navy);
}

.info-popover {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: min(290px, calc(100vw - 40px));
  padding: 10px 12px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--navy);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(23, 34, 56, 0.22);
}

.info-popover-wide {
  max-width: min(380px, calc(100vw - 40px));
}

.info-popover[hidden] {
  display: none;
}

.info-popover ol {
  padding-left: 18px;
  margin: 0;
}

.info-popover a {
  color: #ffffff;
}

.template-picker legend {
  padding: 0;
  margin-bottom: 9px;
  font-size: 14px;
  font-weight: 700;
}

.template-picker label {
  position: relative;
  display: grid;
  gap: 3px;
  padding: 10px;
  background: #f8f8f6;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}

.template-picker label:has(input:checked) {
  background: #fffaf1;
  border-color: var(--accent);
}

.template-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.compact-option-picker {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 12px 0 0;
  border: 0;
}

.compact-option-picker legend {
  width: 100%;
  margin-bottom: 7px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
}

.compact-option-picker label {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 112px;
  padding: 9px;
  text-align: center;
  background: var(--white);
  border: 2px solid #d8dee8;
  border-radius: 10px;
  cursor: pointer;
}

.compact-option-picker label:has(input:checked) {
  background: #f3f7ff;
  border-color: var(--accent);
}

.compact-option-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.compact-option-picker strong {
  color: var(--navy);
  font-size: 12px;
}

.template-preview {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 5px;
  height: 86px;
  padding: 9px;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 8px;
}

.template-preview i {
  display: block;
  border-radius: 3px;
}

.template-preview i:first-child {
  grid-row: 1 / 3;
}

.logo-left-preview,
.logo-right-preview,
.centered-preview {
  background: var(--selected-secondary);
}

.logo-left-preview i,
.logo-right-preview i,
.centered-preview i {
  background: var(--selected-primary);
}

.logo-left-preview i:first-child,
.logo-right-preview i:first-child,
.centered-preview i:first-child {
  background: var(--selected-page);
}

.logo-left-preview {
  grid-template-columns: 0.75fr 1.25fr;
}

.logo-left-preview i:first-child {
  grid-column: 1;
}

.logo-left-preview i:nth-child(2),
.logo-left-preview i:nth-child(3) {
  grid-column: 2;
}

.logo-right-preview {
  grid-template-columns: 1.25fr 0.75fr;
}

.logo-right-preview i:first-child {
  grid-column: 2;
}

.logo-right-preview i:nth-child(2),
.logo-right-preview i:nth-child(3) {
  grid-column: 1;
}

.centered-preview {
  grid-template-columns: 1fr;
  justify-items: center;
}

.centered-preview i:first-child {
  grid-row: auto;
  width: 35%;
}

.centered-preview i:nth-child(2),
.centered-preview i:nth-child(3) {
  width: 80%;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.full-width {
  grid-column: 1 / -1;
}

label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.field-label-line {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
}

.field-label-line small {
  text-align: right;
}

.integration-note {
  padding: 16px 18px;
  margin-bottom: 20px;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.integration-note p {
  margin: 4px 0 0;
  font-size: 14px;
}

.integration-note a,
label small a {
  color: var(--accent-dark);
}

input,
textarea {
  width: 100%;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #cfd1d6;
  border-radius: 10px;
  outline: none;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(199, 146, 69, 0.15);
}

input[type="color"] {
  min-height: 48px;
  padding: 5px;
}

input[type="file"] {
  padding: 10px;
  font-weight: 400;
}

.logo-field {
  display: grid;
  gap: 8px;
}

.logo-upload-row,
.image-upload-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.logo-file-button,
.image-file-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 10px 16px;
  color: var(--navy);
  font-weight: 700;
  background: var(--white);
  border: 1px solid #b8bbc2;
  border-radius: 9px;
  cursor: pointer;
}

.logo-file-button:hover,
.image-file-button:hover {
  border-color: var(--accent);
}

.logo-file-input,
.image-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.logo-preview,
.image-preview {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
}

.gallery-previews .image-preview {
  cursor: grab;
}

.gallery-previews .image-preview:active {
  cursor: grabbing;
}

.dragging {
  opacity: 0.45;
}

.logo-preview[hidden],
.image-preview[hidden] {
  display: none;
}

.logo-preview img,
.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.logo-preview button,
.image-preview button {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  background: var(--danger);
  border: 2px solid var(--white);
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.gallery-image-field,
.service-image-field {
  display: grid;
  gap: 8px;
}

.field-label-inline {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}

.gallery-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.section-validation-error {
  margin: 0;
  color: var(--danger);
  font-size: 14px;
  font-weight: 700;
}

.section-validation-error[hidden] {
  display: none;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

small {
  color: var(--muted);
  font-weight: 400;
}

.section-toggles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.section-toggles label {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}

.section-toggles input {
  width: auto;
  accent-color: var(--accent);
}

.quick-action-toggles {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.quick-action-toggles label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 13px;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}

.quick-action-toggles input {
  width: auto;
  accent-color: var(--accent);
}

.page-color-controls {
  display: grid;
  gap: 12px;
  padding: 15px;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.background-image-control {
  margin-top: 14px;
  padding: 15px;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 11px;
}

.page-background-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.page-background-color {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-background-color input {
  width: 52px;
  min-height: 36px;
}

.clear-image-button {
  justify-self: start;
  padding: 7px 10px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  background: #fff1ef;
  border: 1px solid #efc4be;
  border-radius: 7px;
  cursor: pointer;
}

.clear-image-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.service-section-heading {
  margin-bottom: 18px;
}

.page-color-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
}

.page-color-toggle input {
  width: auto;
  accent-color: var(--accent);
}

.page-color-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.page-color-options.disabled {
  opacity: 0.5;
}

.page-opacity-control {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.page-opacity-control input {
  padding: 0;
}

.page-opacity-control output {
  min-width: 42px;
  color: var(--muted);
  text-align: right;
}

.page-opacity-help {
  grid-column: 1 / -1;
}

.service-layout-picker {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0 0 18px;
  border: 0;
}

.service-layout-picker legend {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}

.service-layout-picker label {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 13px;
  background: #f6f6f4;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}

.service-layout-picker input {
  width: auto;
  accent-color: var(--accent);
}

.service-editor-list {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.service-editor,
.review-editor {
  padding: 18px;
  background: #fafaf8;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.service-editor-header {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.service-editor-header > strong {
  margin-right: auto;
}

.drag-handle,
.move-item-up,
.move-item-down,
.collapse-editor-button {
  padding: 5px 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  background: #eef2f8;
  border: 1px solid #d5ddea;
  border-radius: 7px;
  cursor: pointer;
}

.drag-handle {
  cursor: grab;
}

.drag-handle:active {
  cursor: grabbing;
}

.move-item-up:disabled,
.move-item-down:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.editor-header-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.service-editor.editor-collapsed .service-editor-fields,
.review-editor.editor-collapsed .review-editor-fields {
  display: none;
}

.service-editor.editor-collapsed .service-editor-header,
.review-editor.editor-collapsed .service-editor-header {
  margin-bottom: 0;
}

.service-editor-header strong {
  font-family: "Anthropic Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
}

.remove-service-button,
.remove-review-button {
  padding: 6px 9px;
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
  background: #fff1ef;
  border: 1px solid #efc4be;
  border-radius: 7px;
  cursor: pointer;
}

.remove-review-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.service-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.published-reviews {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.review-editor-list {
  display: grid;
  gap: 16px;
}

.review-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.review-text-field {
  grid-column: 1 / -1;
}

.page-color-options {
  grid-template-columns: 1fr;
}

.page-opacity-control {
  grid-column: auto;
}

.service-description-field {
  grid-column: 1 / -1;
}

.service-description-field textarea {
  min-height: 85px;
}

.add-service-button {
  width: 100%;
  padding: 11px 14px;
  color: var(--accent-dark);
  font-weight: 700;
  background: #fffaf1;
  border: 1px dashed var(--accent);
  border-radius: 9px;
  cursor: pointer;
}

.add-service-button:hover {
  background: #f9edda;
}

.configurable-section[hidden] {
  display: none;
}

.generate-row {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.generate-button,
.preview-button {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  color: var(--white);
  font-weight: 700;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.preview-button {
  color: var(--navy);
  background: var(--white);
  border: 1px solid #b8bbc2;
}

.generate-button:hover {
  background: var(--accent-dark);
  transform: translateY(-2px);
}

.preview-button:hover {
  color: var(--accent-dark);
  border-color: var(--accent);
  transform: translateY(-2px);
}

.generate-button:disabled,
.preview-button:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none;
}

#status {
  margin: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}

#status.success {
  color: var(--success);
}

#status.error {
  color: var(--danger);
}

.preview-section {
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.final-generation {
  display: inline-flex;
}

.final-generation[hidden] {
  display: none;
}

.preview-action-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.final-generation button {
  padding: 11px 16px;
  color: var(--white);
  font-weight: 700;
  background: var(--navy);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}

.final-generation button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

#data-delivery-status {
  width: 100%;
  margin: 0 0 16px;
  padding: 0;
  font-size: 14px;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

#data-delivery-status:empty {
  display: none;
}

#data-delivery-status.error {
  padding: 11px 13px;
  background: #fff4f3;
  border: 1px solid #efc6c1;
  border-radius: 9px;
}

#data-delivery-status.success {
  display: grid;
  gap: 10px;
  color: var(--success);
}

#data-delivery-status.success a {
  justify-self: start;
  padding: 10px 14px;
  color: #ffffff;
  text-decoration: none;
  background: var(--blue);
  border-radius: 9px;
}

#data-delivery-status.success span {
  color: var(--muted);
  font-size: 14px;
}

#data-delivery-status.success a:hover {
  color: var(--blue);
  font-weight: 700;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--blue);
}

#data-delivery-status.error {
  color: var(--danger);
}

.preview-section[hidden] {
  display: none;
}

.preview-heading {
  display: flex;
  gap: 30px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 22px;
}

.preview-toolbar {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.preview-heading h2 {
  margin-bottom: 3px;
}

.preview-heading p {
  margin: 0;
}

.preview-devices {
  display: flex;
  padding: 4px;
  background: #efefec;
  border-radius: 9px;
}

.preview-devices button {
  padding: 7px 11px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.preview-devices button.active {
  color: var(--navy);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(23, 34, 56, 0.1);
}

.preview-frame-shell {
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
  background: #d9d9d6;
  border: 1px solid #c8c9c7;
  border-radius: 12px;
  transition: width 220ms ease;
}

.preview-frame-shell[hidden] {
  display: none;
}

.preview-placeholder {
  display: grid;
  min-height: 260px;
  color: var(--muted);
  text-align: center;
  background:
    linear-gradient(135deg, rgba(199, 146, 69, 0.08), transparent),
    #f3f3f0;
  border: 1px dashed #b8bab7;
  border-radius: 12px;
  place-items: center;
}

.preview-placeholder[hidden] {
  display: none;
}

.preview-frame-shell.mobile {
  width: min(390px, 100%);
}

.preview-frame-shell iframe {
  display: block;
  width: 100%;
  height: 780px;
  background: var(--white);
  border: 0;
}

@media (max-width: 700px) {
  body {
    padding-bottom: 16px;
  }

  .home-options {
    padding: 18px;
  }

  .builder-header,
  main {
    width: min(100% - 32px, 900px);
  }

  .builder-header {
    padding: 12px;
    margin-top: 16px;
    border-radius: 16px;
  }

  .builder-menu-toggle {
    display: block;
  }

  .builder-navigation {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    width: min(280px, calc(100vw - 64px));
    padding: 10px;
    background: var(--white);
    border: 1px solid #dce5f3;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(23, 34, 56, 0.22);
  }

  .builder-navigation.open {
    display: grid;
  }

  .builder-navigation > a {
    color: var(--navy);
  }

  .builder-navigation > a:hover,
  .builder-navigation > a.active {
    color: var(--navy);
    background: #edf4ff;
  }

  .builder-intro,
  .content-page-intro {
    padding-top: 16px;
    margin-top: 10px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions a {
    text-align: center;
  }

  .home-actions {
    grid-template-columns: 1fr;
  }

  .home-action-card {
    min-height: 0;
  }

  .created-website-result {
    align-items: stretch;
    flex-direction: column;
  }

  .created-website-result a {
    text-align: center;
  }

  .home-welcome,
  .home-panel {
    padding: 20px;
    border-radius: 16px;
  }

  .gudispace-logo-mark {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  .builder-brand-name {
    font-size: 18px;
  }

  .gudispace-logo-mark {
    width: 42px;
    height: 42px;
  }

  .compact-option-picker {
    display: grid;
    grid-template-columns: 1fr;
  }

  .compact-option-picker label {
    grid-template-columns: 70px 1fr;
    align-items: center;
    min-width: 0;
    text-align: left;
  }

  .landing-card-grid {
    grid-template-columns: 1fr;
  }

  .information-tile,
  .example-tile,
  .pricing-tile,
  .resource-tile {
    min-height: 0;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  h1 {
    white-space: normal;
  }

  .device-note {
    justify-self: start;
  }

  .form-card {
    padding: 22px 18px;
    border-radius: 15px;
  }

  .field-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .contact-primary-fields {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .template-picker {
    grid-template-columns: 1fr;
  }

  .design-controls-heading {
    display: grid;
    gap: 5px;
  }

  .design-color-grid {
    grid-template-columns: 1fr;
  }

  .service-editor-fields {
    grid-template-columns: 1fr;
  }

  .review-editor-fields {
    grid-template-columns: 1fr;
  }

  .review-text-field {
    grid-column: auto;
  }

  .field-label-line {
    align-items: start;
    flex-direction: column;
  }

  .field-label-line small {
    text-align: left;
  }

  .service-description-field {
    grid-column: auto;
  }

  .template-preview {
    height: 72px;
  }

  .full-width {
    grid-column: auto;
  }

  .section-toggles {
    grid-template-columns: repeat(2, 1fr);
  }

  .generate-row {
    display: grid;
  }

  .preview-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .preview-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .generate-button,
  .preview-button {
    width: 100%;
  }

  .preview-action-group {
    align-items: stretch;
    flex-direction: column;
  }

  .wizard-navigation button {
    min-width: 0;
    flex: 1;
  }

  .wizard-navigation {
    width: 100%;
  }

  .preview-section {
    padding: 18px 10px;
    border-radius: 15px;
  }

  .preview-devices {
    align-self: start;
  }

  .preview-frame-shell iframe {
    height: 680px;
  }

  /* On phones the centered panel has no real room to "float" - let it
     take over the whole viewport instead, edge to edge. */
  #builder-workspace.wizard-modal {
    padding: 0;
  }

  .wizard-modal-panel {
    width: 100%;
    height: 100vh;
    padding: 10px 14px 0;
    border-radius: 0;
  }
}

@media (max-width: 390px) {
  .section-toggles {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}