/* The Guest Man — Setup Assistant design tokens (matches theguestman.com.au) */
:root {
  --brand: #00A9E3;
  --brand-dark: #008cc0;
  --gold: #FFD700;
  --gold-deep: #C7A739;
  --gold-line: rgba(199, 167, 57, 0.42);
  --gold-line-soft: rgba(255, 215, 0, 0.2);
  --gold-line-mid: rgba(199, 167, 57, 0.28);
  --ink: #102E4A;
  --paper: #ffffff;
  --muted: #6b7280;
  --border: #e5e7eb;
  --soft: #f6f9fc;
  --shadow: 0 14px 34px rgba(11, 28, 42, .10);
  --shadow-sm: 0 4px 16px rgba(11, 28, 42, .06);
  --radius: 1.5rem;
  --radius-sm: 14px;
  --green-bg: #ecfdf5;
  --green-border: #6ee7b7;
  --blue-bg: #eff6ff;
  --blue-border: #93c5fd;
  --yellow-bg: #fffbeb;
  --yellow-border: #fcd34d;
  --grey-bg: #f6f9fc;
  --grey-border: #e5e7eb;
  --purple-bg: #f5f3ff;
  --purple-border: #c4b5fd;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--soft) 100%);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

.header-brand {
  font-family: Anton, sans-serif;
  letter-spacing: .04em;
  color: var(--brand);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-block;
}

.header-tagline {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: .2rem;
}

/* Sticky header — mirrors site topbar */
.progress-wrap {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--gold-line-mid);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(11, 28, 42, .04), inset 0 -1px 0 rgba(255, 215, 0, 0.12);
}

.progress-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: .85rem 1.25rem 1rem;
}

.progress-steps {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: .45rem;
}

.progress-steps span { color: #9ca3af; }
.progress-steps span.done { color: var(--brand); }
.progress-steps span.current {
  color: var(--ink);
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid var(--gold-line-soft);
  padding: .1rem .4rem;
  border-radius: 999px;
}

.progress-steps span.current.milestone-crumb {
  font-size: 12px;
  padding: .22rem .6rem;
  background: rgba(255, 215, 0, 0.18);
  border: 1px solid var(--gold-line-mid);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.save-hint {
  font-size: .7rem;
  color: var(--muted);
  margin: .15rem 0 .5rem;
  font-weight: 600;
}

.progress-track {
  height: 6px;
  background: #e8eef3;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--gold-line-soft);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand), #33c4f0);
  transition: width .45s ease;
  border-radius: 99px;
}

.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 5rem;
}

.milestone-header { margin-bottom: 1.35rem; }

.milestone-header h1 {
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  font-weight: 800;
  margin: 0 0 .35rem;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ink);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  font-size: .8rem;
  color: var(--muted);
  font-weight: 600;
}

.badge-time {
  background: var(--ink);
  color: #fff;
  padding: .25rem .65rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .72rem;
}

.badge-hero {
  background: rgba(255, 215, 0, 0.14);
  color: var(--ink);
  padding: .25rem .65rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--gold-line-mid);
}

.section-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: .35rem .75rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(255, 215, 0, .15);
  border: 1px solid rgba(255, 215, 0, .35);
  margin-bottom: .5rem;
}

/* Content blocks */
.block {
  border-radius: var(--radius-sm);
  padding: .9rem 1.05rem;
  margin-bottom: .7rem;
  font-size: .9rem;
}

.block-airbnb {
  background: var(--grey-bg);
  border: 1px solid var(--grey-border);
}

.block-airbnb strong {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .3rem;
  font-weight: 800;
}

.block-do strong {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand);
  margin-bottom: .3rem;
  font-weight: 800;
}

.block-insight { background: var(--blue-bg); border: 1px solid var(--blue-border); }
.block-mistake { background: var(--yellow-bg); border: 1px solid var(--yellow-border); }
.block-later {
  background: #fff;
  border: 1px dashed #d1d5db;
  color: var(--muted);
  font-size: .82rem;
  text-align: center;
  font-weight: 600;
}

.block-output {
  background: var(--purple-bg);
  border: 1px solid var(--purple-border);
  transition: opacity .3s, max-height .35s ease;
  overflow: hidden;
}

.block-output.collapsed { opacity: .55; max-height: 3.5rem; padding: .5rem 1rem; }

.block-output .label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6d28d9;
  margin-bottom: .35rem;
}

.block-transition {
  background: #fff;
  border: 1px solid var(--gold-line-mid);
  border-left: 3px solid var(--gold-deep);
  padding: .75rem 1rem;
  font-size: .88rem;
  font-weight: 700;
  margin: .75rem 0 .65rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-sm);
}

.guide-legend {
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(0, 169, 227, .28);
  background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
  box-shadow: 0 6px 22px rgba(0, 169, 227, .1);
}

.guide-legend-title {
  margin: 0 0 .5rem;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.guide-legend-list {
  margin: 0 0 .55rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .85rem;
}

.guide-legend-list li {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}

.guide-legend-foot {
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
}

.milestone-flow-progress {
  margin: 0 0 .75rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-align: right;
}

.milestone-flow .milestone-step.setup-step {
  margin-bottom: 1rem;
}

.milestone-flow .milestone-step.is-hidden {
  display: none;
}

.milestone-flow .milestone-step.is-collapsed .step-body {
  display: none;
}

.milestone-flow .milestone-step.is-collapsed {
  padding: .65rem 1rem;
}

.milestone-flow .milestone-step.is-collapsed .setup-step-head {
  margin-bottom: 0;
}

.milestone-flow .milestone-step .setup-step-head {
  margin-bottom: .65rem;
}

.milestone-flow .milestone-step h3,
.milestone-flow .milestone-step .setup-step-title {
  margin-top: 0;
}

.block-example {
  background: #fff;
  border: 1px solid var(--grey-border);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .82rem;
  color: #4b5563;
}

.block-example strong {
  color: var(--ink);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Dark hero panel — start page + promos */
.hero-panel,
.referral-hero {
  position: relative;
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  margin-bottom: 1rem;
  color: #fff;
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 215, 0, 0.12);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 169, 227, .22) 0%, transparent 52%),
    radial-gradient(ellipse at 0% 100%, rgba(255, 215, 0, .1) 0%, transparent 48%),
    linear-gradient(135deg, rgba(16, 46, 74, .98) 0%, rgba(11, 28, 42, .96) 55%, rgba(0, 108, 192, .85) 100%);
}

.hero-panel::before,
.referral-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 Q35 20 30 35 Q25 20 30 5' fill='%23fff'/%3E%3C/svg%3E");
}

.hero-panel > *,
.referral-hero > * { position: relative; z-index: 1; }

.hero-panel h2,
.referral-hero h2 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hero-panel .sub,
.referral-hero .lead {
  font-size: .92rem;
  opacity: .92;
  line-height: 1.55;
  margin: 0 0 1rem;
}

.hero-panel .tagline,
.referral-hero .step-label {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  font-weight: 800;
  margin-bottom: .4rem;
}

.offer-list {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
  font-size: .88rem;
  line-height: 1.55;
}

.offer-list li { margin: .35rem 0; }
.offer-list strong { color: var(--gold); }

.btn-referral,
.btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.15rem 1.35rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  border: 2px solid #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  margin: .85rem 0 .35rem;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .28),
    0 0 0 4px rgba(255, 215, 0, .35);
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  animation: cta-pulse 2.4s ease-in-out infinite;
}

@keyframes cta-pulse {
  0%, 100% {
    box-shadow:
      0 16px 36px rgba(0, 0, 0, .28),
      0 0 0 4px rgba(255, 215, 0, .3);
  }
  50% {
    box-shadow:
      0 18px 40px rgba(0, 0, 0, .32),
      0 0 0 10px rgba(255, 215, 0, .45);
    transform: translateY(-1px);
  }
}

.btn-referral:hover,
.btn-primary:hover {
  background: #f2cc00;
  transform: translateY(-2px);
  animation: none;
}

.cta-caption {
  margin: 0 0 .85rem;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
}

.cta-caption::before {
  content: '↓ ';
  color: var(--gold);
}

.btn-gold {
  display: inline-block;
  padding: .75rem 1.1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  font-size: .9rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(11, 28, 42, .12);
  transition: transform .2s ease, background-color .2s ease;
}

.btn-gold:hover {
  background: #f2cc00;
  transform: translateY(-1px);
}

.disclosure {
  font-size: .72rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.45;
  margin: .75rem 0 0;
}

.disclosure a { color: var(--gold); }

.scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-top: .75rem;
}

@media (max-width: 600px) { .scope-grid { grid-template-columns: 1fr; } }

.scope-box {
  background: rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: .75rem;
  font-size: .8rem;
  border: 1px solid rgba(255, 255, 255, .1);
}

.scope-box h4 {
  margin: 0 0 .4rem;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
  font-weight: 800;
}

.scope-box ul { margin: 0; padding-left: 1rem; }
.scope-box li { margin: .2rem 0; }

.faq-details { margin-top: .75rem; }

.faq-details summary {
  font-size: .78rem;
  color: var(--gold);
  cursor: pointer;
  font-weight: 800;
}

.faq-details .faq-body {
  font-size: .78rem;
  color: rgba(255, 255, 255, .82);
  margin-top: .5rem;
  line-height: 1.45;
}

.step-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: startstep;
}

.step-list li {
  counter-increment: startstep;
  position: relative;
  padding-left: 2.25rem;
  margin: .9rem 0;
  font-size: .9rem;
  line-height: 1.55;
}

.step-list li::before {
  content: counter(startstep);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(255, 215, 0, .35);
}

.step-list strong { display: block; margin-bottom: .2rem; font-weight: 800; }

.chip-on-dark {
  margin-top: .65rem;
  background: rgba(255, 255, 255, .1) !important;
  border: 2px dashed rgba(255, 215, 0, .85) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2) !important;
}

.chip-on-dark::before {
  border-color: var(--gold) !important;
  background: transparent !important;
}

.chip-on-dark:hover {
  background: rgba(255, 215, 0, .15) !important;
  border-color: var(--gold) !important;
}

.chip-on-dark.done {
  background: rgba(16, 185, 129, .22) !important;
  border: 2px solid rgba(110, 231, 183, .65) !important;
  border-style: solid !important;
  color: #d1fae5 !important;
}

.chip-tray {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fffef8 0%, #fff 100%);
  border: 1px solid var(--gold-line-mid);
  box-shadow: inset 0 1px 0 rgba(255, 215, 0, 0.15);
}

.chip-tray-title {
  margin: 0 0 .75rem;
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-dark);
}

.chip-tray-title::before {
  content: '👇 ';
}

.chip-tray-done {
  color: #065f46 !important;
}

.chip-tray-done::before {
  content: '✓ ';
}

.chip.chip-highlight {
  animation: chip-nudge 1.2s ease 2;
}

@keyframes chip-nudge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, .55); }
  50% { box-shadow: 0 0 0 8px rgba(255, 215, 0, .2); }
}

/* Form / generator */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .8;
  margin-bottom: .25rem;
}

.field select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-radius: 10px;
  padding: .5rem .6rem;
  font-size: .9rem;
}

.field select option { color: var(--ink); }

.btn-generate {
  width: 100%;
  margin-top: 1rem;
  padding: .95rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 169, 227, .28);
  transition: transform .15s, background-color .15s;
}

.btn-generate:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.btn-generate:disabled { opacity: .7; cursor: wait; transform: none; }

.gen-overlay {
  display: none;
  margin-top: 1rem;
  padding: .85rem;
  background: rgba(0, 0, 0, .2);
  border-radius: 10px;
  font-size: .85rem;
}

.gen-overlay.active { display: block; }
.gen-step { opacity: .4; margin: .25rem 0; transition: opacity .2s; }
.gen-step.active { opacity: 1; font-weight: 700; }
.gen-step.done { opacity: .7; }
.gen-step.done::before { content: '✓ '; color: var(--gold); }

/* Cards */
.card,
.soft-card {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  margin-bottom: .85rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gold-line-mid);
}

.card h3,
.soft-card h3 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.chips {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: .55rem;
  margin: .75rem 0;
}

.chip {
  font-size: .95rem;
  font-weight: 800;
  padding: .95rem 1.05rem;
  border-radius: 12px;
  border: 1px solid var(--gold-line-mid);
  background: linear-gradient(180deg, #ffffff 0%, #fffef8 100%);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  box-shadow: 0 4px 14px rgba(11, 28, 42, .05);
  line-height: 1.35;
}

.chip::before {
  content: '';
  width: 1.35rem;
  height: 1.35rem;
  border: 1.5px solid var(--gold-line);
  border-radius: 6px;
  flex-shrink: 0;
  background: #fff;
  transition: background .15s, border-color .15s;
}

.chip:hover {
  border-color: var(--gold-line);
  background: #fffdf5;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(199, 167, 57, .12);
}

.chip.done {
  background: var(--green-bg);
  border-color: #10b981;
  color: #065f46;
  box-shadow: 0 4px 14px rgba(16, 185, 129, .15);
}

.chip.done::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 900;
  background: #fff;
  border-color: #10b981;
  color: #065f46;
}

/* Large completion CTAs — milestone pages (property, publish, etc.) */
.main:not(.start-flow) .card > .chip:not(.readonly),
.main:not(.start-flow) .acc-body > .chip:not(.readonly),
.chip-complete,
.step-complete-cta {
  justify-content: center;
  text-align: center;
  padding: 1.15rem 1.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
  border: 2px solid #00A9E3;
  background: linear-gradient(180deg, #ffffff 0%, #eef9fd 100%);
  box-shadow: 0 8px 28px rgba(0, 169, 227, .22);
  gap: 0;
  margin-top: 1.15rem;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .2s ease, padding .35s ease;
}

.main:not(.start-flow) .card > .chip:not(.readonly)::before,
.main:not(.start-flow) .acc-body > .chip:not(.readonly)::before,
.chip-complete::before,
.step-complete-cta::before {
  display: none;
}

.main:not(.start-flow) .card > .chip:not(.readonly):hover,
.main:not(.start-flow) .acc-body > .chip:not(.readonly):hover,
.chip-complete:hover,
.step-complete-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 169, 227, .28);
  border-color: var(--brand-dark);
  background: #e8f7fc;
}

.main:not(.start-flow) .card > .chip:not(.readonly).done,
.main:not(.start-flow) .acc-body > .chip:not(.readonly).done,
.chip-complete.done,
.step-complete-cta.done {
  padding: .9rem 1.15rem;
  font-size: .95rem;
  background: var(--green-bg);
  border-color: #10b981;
  color: #065f46;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .18);
  transform: none;
}

.main:not(.start-flow) .step-action {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--gold-line-mid);
}

.main:not(.start-flow) .step-action .chip {
  margin-top: 0;
}

.main:not(.start-flow) .step-action-prompt {
  margin: 0 0 .5rem;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: var(--brand-dark);
}

.chip.readonly {
  cursor: default;
  pointer-events: none;
  width: auto;
  display: inline-flex;
  padding: .4rem .7rem;
  font-size: .75rem;
  border-radius: 999px;
  border: 1px solid var(--green-border);
  box-shadow: none;
}

.chip.readonly::before {
  display: none;
}

.chip.readonly.done::before {
  content: '✓ ';
  display: inline;
}

.answer-box {
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .9rem;
}

.char-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .5rem;
}

.char-bar { flex: 1; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; }
.char-bar-fill { height: 100%; border-radius: 99px; transition: width .3s, background .3s; width: 0%; }
.char-bar-fill.ok { background: #10b981; }
.char-bar-fill.warn { background: #f59e0b; }
.char-bar-fill.over { background: #ef4444; }
.char-label { font-size: .72rem; font-weight: 700; color: var(--muted); white-space: nowrap; }

.btn-copy {
  margin-top: .5rem;
  padding: .5rem .9rem;
  border-radius: 10px;
  border: none;
  background: var(--brand-dark);
  color: #fff;
  font-weight: 800;
  font-size: .8rem;
  cursor: pointer;
  transition: background-color .15s;
}

.btn-copy:hover { background: var(--ink); }
.btn-copy.copied { background: #065f46; }
.copy-hint { font-size: .78rem; color: var(--brand-dark); font-weight: 700; margin-top: .35rem; min-height: 1.2em; }

/* Footer nav */
.nav-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--gold-line-mid);
  padding: .85rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 40;
  box-shadow: 0 -4px 20px rgba(11, 28, 42, .06), inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.btn-next {
  padding: .8rem 1.4rem;
  border-radius: var(--radius-sm);
  border: none;
  background: #cbd5e1;
  color: #fff;
  font-weight: 800;
  font-size: .92rem;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
  box-shadow: none;
  transition: transform .2s, background-color .2s, box-shadow .2s;
}

.btn-next.enabled {
  background: var(--brand);
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0, 169, 227, .35);
  border: 1px solid var(--gold-line-soft);
}

.btn-next.enabled:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
}

.nav-link {
  font-size: .8rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-decoration: none;
}

.nav-link:hover { text-decoration: underline; }

/* Celebration / completion */
.celebrate {
  display: block;
  text-align: center;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #f7fee8 100%);
  border: 1px solid var(--gold-line-mid);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  animation: pop .4s ease;
  box-shadow: var(--shadow-sm);
}

.celebrate.is-hidden { display: none; }

.celebrate.show { display: block; }
.celebrate strong { color: #065f46; font-size: 1rem; }

.done-banner {
  display: none;
  text-align: center;
  padding: 1.35rem 1.25rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #f7fee8 100%);
  border: 1px solid var(--gold-line-mid);
  border-radius: var(--radius);
  margin-top: 1rem;
  box-shadow: var(--shadow-sm);
}

.done-banner.show { display: block; animation: pop .4s ease; }
.done-banner h2 { margin: 0 0 .35rem; color: #065f46; font-size: 1.2rem; font-weight: 800; }
.done-banner p { margin: 0; font-size: .92rem; color: #047857; font-weight: 600; }

.review-card {
  display: none;
  margin-top: 1.25rem;
  padding: 1.35rem 1.4rem;
  border-radius: var(--radius);
  color: #fff;
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 215, 0, 0.1);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(0, 169, 227, .22) 0%, transparent 52%),
    linear-gradient(135deg, rgba(16, 46, 74, .98) 0%, rgba(11, 28, 42, .96) 100%);
}

.review-card.show { display: block; }
.review-card h3 { margin: 0 0 .5rem; font-size: 1.05rem; color: #fff; font-weight: 800; }
.review-card p { margin: 0 0 .75rem; font-size: .88rem; opacity: .92; line-height: 1.5; }
.review-card ul { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .85rem; opacity: .92; }
.review-card li { margin: .25rem 0; }
.review-note { font-size: .72rem; opacity: .72; margin: .75rem 0 0; line-height: 1.4; }

.cta-row {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-top: 1.25rem;
}

.cta-row a {
  font-size: .88rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-decoration: none;
  padding: .15rem 0;
}

.cta-row a:hover { text-decoration: underline; color: var(--brand); }

.check-group { margin-bottom: 1rem; }

.check-group h4 {
  margin: 0 0 .5rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
}

.check-group ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .88rem;
  color: #374151;
  font-weight: 500;
}

.check-group li { margin: .3rem 0; }

@keyframes pop {
  0% { transform: scale(.97); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.hidden { display: none !important; }

.screenshot-slot {
  margin: .65rem 0;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--grey-border);
  background: var(--grey-bg);
  padding: .55rem;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.screenshot-slot img { max-width: 100%; border-radius: 10px; display: block; margin: 0 auto; }

/* Accordions */
.why-card {
  border: 1px solid var(--blue-border);
  border-radius: var(--radius-sm);
  background: #fff;
  margin-bottom: .65rem;
  overflow: hidden;
}

.why-card summary {
  padding: .75rem 1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: .85rem;
  color: var(--brand-dark);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.why-card summary::after { content: '›'; font-size: 1.1rem; transition: transform .2s; }
.why-card[open] summary::after { transform: rotate(90deg); }
.why-card summary::-webkit-details-marker { display: none; }
.why-card .why-body { padding: 0 1rem .85rem; font-size: .85rem; color: #4b5563; }

.accordion {
  margin-bottom: .65rem;
  border: 1px solid var(--gold-line-mid);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.accordion summary {
  padding: .9rem 1.1rem;
  cursor: pointer;
  font-weight: 800;
  font-size: .95rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafbfc;
}

.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; font-size: 1.2rem; color: var(--brand); font-weight: 400; }
.accordion[open] summary::after { content: '−'; }
.accordion[open] summary { border-bottom: 1px solid var(--border); }
.accordion .acc-body { padding: .9rem 1.1rem 1.1rem; }

.btn-skip {
  font-size: .75rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  margin-top: .5rem;
  font-weight: 700;
}

.page-footnote {
  margin-top: 1.25rem;
  font-size: .8rem;
  color: #9ca3af;
  font-weight: 600;
}

.reframe-box {
  background: var(--blue-bg);
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.reframe-box h2 {
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  color: var(--brand-dark);
  font-weight: 800;
}

.reframe-box p { margin: 0; font-size: .9rem; color: #1e3a5f; font-weight: 600; }

.step-hint {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
}

/* Start page — guided step flow */
.start-orient {
  margin-bottom: .85rem;
}

.start-orient-title {
  margin: 0 0 .65rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}

.start-orient-lead {
  margin: 0 0 .75rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}

.start-orient-subhead {
  margin: 0 0 .4rem;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.start-orient-body {
  margin: 0 0 .75rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
}

.start-orient-foot {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.start-checklist {
  margin: 0 0 .5rem;
  padding: 0;
  list-style: none;
}

.start-checklist li {
  position: relative;
  padding-left: 1.25rem;
  margin: .35rem 0;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.45;
}

.start-checklist li::before {
  content: '·';
  position: absolute;
  left: .35rem;
  color: var(--brand);
  font-weight: 900;
}

.start-checklist-gold li::before {
  content: '✓';
  left: 0;
  color: var(--gold-deep);
  font-size: .82rem;
}

.start-link {
  background: linear-gradient(180deg, #f8fcff 0%, #fff 100%);
  border-left: 3px solid var(--brand);
}

.start-orient-reassure {
  margin: .85rem 0 0;
  padding: .75rem .85rem;
  border-radius: 10px;
  background: var(--green-bg);
  border: 1px solid var(--green-border);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.5;
  color: #065f46;
}

.start-orient-disclosure {
  margin: .65rem 0 0;
  font-size: .72rem;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
}

.start-orient-disclosure a {
  color: var(--brand-dark);
}

.start-steps-label {
  margin: 1.15rem 0 .65rem;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}

/* Start page — less bottom chrome */
.start-flow {
  padding-bottom: 1.5rem;
}

.start-intro-brief {
  margin: 0 0 .85rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.start-flow-progress {
  margin: -.35rem 0 .35rem;
  font-size: .78rem;
  font-weight: 800;
  color: var(--brand-dark);
  text-align: right;
}

.start-flow-hint {
  margin: 0 0 .75rem;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}

.start-flow-hint[hidden] { display: none; }

.step-complete-summary.step-undo-btn {
  display: none;
  width: 100%;
  margin: 0;
  padding: .5rem .65rem;
  border: 1px solid rgba(16, 185, 129, .35);
  border-radius: 8px;
  background: rgba(16, 185, 129, .12);
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.setup-step-primary .step-undo-btn {
  color: #d1fae5;
  background: rgba(16, 185, 129, .18);
  border-color: rgba(110, 231, 183, .4);
}

.setup-step:not(.setup-step-primary) .step-undo-btn {
  color: #065f46;
}

.step-undo-btn:hover {
  background: rgba(16, 185, 129, .22);
  border-color: rgba(16, 185, 129, .5);
}

.step-undo-label {
  float: right;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.setup-step-primary .step-undo-label {
  color: var(--gold);
}

.setup-step.is-collapsed .step-undo-btn {
  display: block;
}

.start-warmth-after {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gold-line-mid);
}

.start-steps-label {
  margin: 0 0 .15rem;
}

.nav-footer--dormant,
.nav-footer[hidden] {
  display: none !important;
}

.celebrate .btn-next-inline {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.start-warmth {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: .25rem;
}

.start-warmth .start-orient {
  margin-bottom: 0;
}

.start-warmth .start-orient-title {
  font-size: .98rem;
  margin-bottom: .5rem;
}

.start-warmth .start-orient-lead,
.start-warmth .start-orient-body {
  font-size: .88rem;
  margin-bottom: .55rem;
}

.start-warmth .start-orient-foot {
  margin-top: .5rem;
  padding-top: .55rem;
  font-size: .82rem;
}

.start-operator {
  margin: 0;
}

.how-list-tight li {
  margin: .4rem 0;
  font-size: .88rem;
}

.start-link .start-checklist {
  margin-bottom: .5rem;
}

.start-link .start-orient-reassure {
  margin-top: .65rem;
  font-size: .82rem;
  padding: .65rem .8rem;
}

.start-orient-compact {
  margin-bottom: .65rem;
  padding: 1rem 1.15rem;
}

.start-orient-compact .start-orient-lead {
  margin: 0;
}

.start-orient-more {
  margin-top: .65rem;
}

.start-orient-more summary {
  font-size: .84rem;
  font-weight: 800;
  color: var(--brand-dark);
  cursor: pointer;
  list-style: none;
}

.start-orient-more summary::-webkit-details-marker { display: none; }

.start-orient-more-body {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}

.start-orient-more-body .how-list { margin-top: .5rem; }

/* Completion checkpoints — start page */
.step-action {
  margin: 1rem 0 .35rem;
}

.step-trust {
  margin: 1rem 0 0;
  padding: .8rem .95rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: .84rem;
  line-height: 1.55;
  font-weight: 600;
  color: rgba(255, 255, 255, .88);
}

.step-trust strong {
  color: #fff;
  font-weight: 700;
}

.step-action-prompt {
  margin: 0 0 .45rem;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: rgba(255, 255, 255, .7);
}

.setup-step:not(.setup-step-primary) .step-action-prompt {
  color: var(--muted);
}

.start-flow .chip-complete,
.start-flow .step-complete-cta {
  justify-content: center;
  text-align: center;
  padding: 1.15rem 1.35rem;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
  border: 2px solid var(--brand);
  background: linear-gradient(180deg, #ffffff 0%, #eef9fd 100%);
  box-shadow: 0 8px 28px rgba(0, 169, 227, .2);
  gap: 0;
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, transform .2s ease, padding .35s ease;
}

.start-flow .chip-complete::before,
.start-flow .step-complete-cta::before { display: none; }

.start-flow .chip-complete:hover,
.start-flow .step-complete-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0, 169, 227, .28);
  border-color: var(--brand-dark);
  background: #e8f7fc;
}

.start-flow .chip-complete.done,
.start-flow .step-complete-cta.done {
  padding: .85rem 1.1rem;
  font-size: .92rem;
  background: var(--green-bg);
  border-color: #10b981;
  color: #065f46;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .15);
  transform: none;
}

.start-flow .chip-complete.chip-on-dark,
.start-flow .step-complete-cta.chip-on-dark {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .06) 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .15);
}

.start-flow .chip-complete.chip-on-dark:hover,
.start-flow .step-complete-cta.chip-on-dark:hover {
  background: rgba(255, 215, 0, .18);
  border-color: var(--gold);
  color: #fff;
}

.start-flow .chip-complete.chip-on-dark.done,
.start-flow .step-complete-cta.chip-on-dark.done {
  background: rgba(16, 185, 129, .22);
  border-color: rgba(110, 231, 183, .65);
  color: #d1fae5;
}

.step-detail {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--gold-line-mid);
}

.step-extra { margin-top: .65rem; }

.step-complete-summary {
  display: none;
  margin: 0;
  padding: .15rem 0 0;
  font-size: .88rem;
  font-weight: 800;
  color: #d1fae5;
  line-height: 1.35;
}

.setup-step:not(.setup-step-primary) .step-complete-summary {
  color: #065f46;
}

.setup-step.is-collapsed {
  padding: .65rem 1rem;
  opacity: .88;
  transform: scale(.992);
}

.setup-step.is-collapsed.is-complete {
  opacity: .82;
}

.setup-step.is-collapsed .step-body { display: none; }

.setup-step.is-collapsed .step-undo-btn {
  display: block;
}

.setup-step.is-collapsed .step-complete-summary:not(.step-undo-btn) {
  display: block;
}

.setup-step.is-collapsed .setup-step-head {
  margin-bottom: .25rem;
}

.setup-step.is-collapsed .setup-step-num {
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
}

/* Step card state system — active / complete / locked */
.start-flow .setup-step {
  margin-bottom: 1rem;
  transition:
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    padding .35s ease,
    opacity .35s ease,
    transform .35s ease,
    outline-color .35s ease;
}

.step-status-badge {
  flex-shrink: 0;
  margin-left: auto;
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .35s ease, color .35s ease, border-color .35s ease, transform .35s ease;
}

.setup-step.is-active .step-status-badge {
  background: rgba(0, 169, 227, .14);
  border: 1px solid rgba(0, 169, 227, .45);
  color: #0077a8;
}

.setup-step-primary.is-active .step-status-badge {
  background: rgba(0, 169, 227, .22);
  border-color: rgba(110, 231, 183, .35);
  color: #b8ecff;
}

.setup-step.is-complete .step-status-badge {
  background: rgba(16, 185, 129, .14);
  border: 1px solid rgba(16, 185, 129, .4);
  color: #047857;
}

.setup-step-primary.is-complete .step-status-badge {
  background: rgba(16, 185, 129, .2);
  border-color: rgba(110, 231, 183, .45);
  color: #a7f3d0;
}

.setup-step.is-locked .step-status-badge {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #9ca3af;
}

.setup-step.is-active {
  animation: step-focus .55s ease;
}

.setup-step-primary.is-active {
  border-color: #00A9E3 !important;
  outline-color: rgba(0, 169, 227, .28);
  box-shadow:
    0 0 0 3px rgba(0, 169, 227, .32),
    0 0 36px rgba(0, 169, 227, .22),
    var(--shadow);
}

.setup-step:not(.setup-step-primary).is-active.is-revealed {
  border-color: #00A9E3;
  box-shadow:
    0 0 0 3px rgba(0, 169, 227, .22),
    0 12px 36px rgba(0, 169, 227, .12);
  transform: translateY(-2px);
}

.setup-step:not(.setup-step-primary).is-complete:not(.is-active) {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #6ee7b7;
  border-left-width: 4px;
  border-left-color: #10b981;
  box-shadow: var(--shadow-sm);
  opacity: .9;
}

.setup-step:not(.setup-step-primary).is-locked:not(.is-hidden) {
  opacity: .58;
  border-color: #e5e7eb;
  background: #f9fafb;
  box-shadow: none;
  filter: grayscale(.08);
}

.setup-step.just-completed {
  animation: step-complete-pop .38s ease;
}

.setup-step.just-completed .step-status-badge {
  animation: badge-check-pop .38s ease;
}

@keyframes step-complete-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  45% { transform: scale(1.008); box-shadow: 0 0 0 6px rgba(16, 185, 129, .18); }
  100% { transform: scale(1); }
}

@keyframes badge-check-pop {
  0% { transform: scale(.92); opacity: .6; }
  60% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes step-focus {
  0% { box-shadow: 0 0 0 0 rgba(0, 169, 227, 0); }
  40% { box-shadow: 0 0 0 6px rgba(0, 169, 227, .18); }
  100% { box-shadow: inherit; }
}

.setup-step.is-revealed {
  animation: step-reveal .45s ease;
}

/* Footer — de-emphasised until ready */
.nav-footer--waiting {
  opacity: .5;
  box-shadow: none;
  border-top-color: var(--border);
  background: rgba(255, 255, 255, .88);
}

.nav-footer--waiting .btn-next {
  background: #e2e8f0;
  color: #94a3b8;
  font-size: .78rem;
  padding: .55rem .9rem;
  box-shadow: none;
}

.nav-footer--waiting .nav-link,
.nav-footer--waiting .nav-progress {
  opacity: .65;
}

.nav-footer--ready {
  opacity: 1;
  animation: footer-ready .4s ease;
  box-shadow: 0 -8px 28px rgba(0, 169, 227, .12), inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.nav-footer--ready .btn-next.enabled {
  animation: footer-cta-pop .45s ease;
}

@keyframes footer-ready {
  from { opacity: .5; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes footer-cta-pop {
  0% { transform: scale(.96); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.start-intro {
  margin: 0 0 1.15rem;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.setup-step.is-hidden { display: none; }

.setup-step.is-revealed {
  animation: step-reveal .4s ease;
}

@keyframes step-reveal {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.setup-step:not(.setup-step-primary) {
  background: #fff;
  border: 1px solid var(--gold-line-mid);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem 1.15rem;
  box-shadow: var(--shadow-sm);
}

.setup-step-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: .7rem;
  flex-wrap: wrap;
}

.setup-step-num {
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: Anton, sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .02em;
}

.setup-step:not(.setup-step-primary) .setup-step-num {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--gold-line);
}

.setup-step-primary .setup-step-num {
  background: var(--gold);
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}

.setup-step-labels {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.setup-step-kicker {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
}

.setup-step-primary .setup-step-kicker { color: var(--gold); }

.setup-step:not(.setup-step-primary) .setup-step-kicker { color: var(--brand-dark); }

.setup-step-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(255, 215, 0, .2);
  border: 1px solid rgba(255, 215, 0, .45);
  color: var(--gold);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.setup-step-title {
  margin: 0 0 .6rem;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.setup-step-primary .setup-step-title {
  font-size: 1.38rem;
  color: #fff;
}

.setup-step-lead {
  margin: 0 0 .5rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.step-micro-done {
  margin: 0 0 .65rem;
  padding: .45rem .75rem;
  border-radius: 8px;
  background: rgba(16, 185, 129, .12);
  border: 1px solid rgba(16, 185, 129, .35);
  color: #065f46;
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.35;
}

.step-micro-done[hidden] { display: none; }

.setup-step-primary .step-micro-done {
  background: rgba(16, 185, 129, .2);
  border-color: rgba(110, 231, 183, .45);
  color: #d1fae5;
}

.setup-step-primary.is-complete {
  border-color: #6ee7b7 !important;
  background: linear-gradient(135deg, rgba(16, 46, 74, .97) 0%, rgba(6, 95, 70, .42) 100%);
  outline-color: rgba(16, 185, 129, .2);
  box-shadow:
    var(--shadow),
    0 0 0 2px rgba(16, 185, 129, .28),
    inset 0 0 0 1px rgba(110, 231, 183, .12);
  opacity: .94;
}

.setup-step-primary.is-complete.is-collapsed {
  padding: .75rem 1.2rem;
  opacity: .82;
}

.start-more {
  margin-top: .25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gold-line-mid);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.start-more.is-hidden { display: none; }

.start-more summary {
  font-size: .88rem;
  font-weight: 800;
  color: var(--brand-dark);
  cursor: pointer;
  list-style: none;
}

.start-more summary::-webkit-details-marker { display: none; }

.start-more-body {
  margin-top: .85rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}

.start-more-body .flow-steps { margin: .75rem 0; }

/* Start gateway — Step 1 checkpoint */
.start-gateway {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1.5rem 1.45rem 1.35rem;
  border: 2px solid #00A9E3;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 215, 0, .35),
    inset 0 1px 0 rgba(255, 215, 0, .14);
  outline: 3px solid rgba(0, 169, 227, .16);
  outline-offset: 2px;
}

.start-gateway h2,
.start-gateway .setup-step-title {
  font-size: 1.38rem;
  margin-top: 0;
}

.gateway-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .65rem;
}

.gateway-step {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gateway-required {
  display: inline-flex;
  align-items: center;
  padding: .28rem .65rem;
  border-radius: 999px;
  background: rgba(0, 169, 227, .22);
  border: 1px solid rgba(0, 169, 227, .45);
  color: #d9f3fc;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.gateway-intro { margin-bottom: .85rem !important; }

.gateway-important {
  background: rgba(255, 215, 0, .14);
  border: 1px solid rgba(255, 215, 0, .45);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: .75rem .9rem;
  font-size: .86rem;
  line-height: 1.5;
  margin-bottom: .9rem;
  font-weight: 600;
}

.gateway-important strong {
  color: var(--gold);
  font-weight: 900;
}

.gateway-why-label {
  margin: 0 0 .4rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .75);
}

.gateway-benefits {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.gateway-benefits li {
  position: relative;
  padding-left: 1.35rem;
  margin: .4rem 0;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
}

.gateway-benefits li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 900;
}

.gateway-benefits strong { color: var(--gold); }

.gateway-review {
  background: rgba(255, 215, 0, .1);
  border: 1px solid rgba(255, 215, 0, .38);
  border-radius: 12px;
  padding: .9rem 1rem;
  margin-bottom: 1rem;
}

.gateway-review-lead {
  margin: 0 0 .35rem;
  font-size: .92rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1.4;
}

.gateway-review-detail {
  margin: 0;
  font-size: .84rem;
  line-height: 1.5;
  opacity: .9;
  font-weight: 600;
}

.gateway-review-detail strong { color: #fff; }

.gateway-zion {
  margin: .5rem 0 .85rem;
  font-size: .8rem;
  line-height: 1.45;
  opacity: .82;
  font-weight: 600;
}

.gateway-free {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .78rem;
  line-height: 1.45;
  opacity: .78;
  font-weight: 600;
}

.chip-tray-gateway {
  margin-top: 0;
  border-color: rgba(255, 215, 0, .35);
}

/* Start page — orientation */
.orient-operator {
  background: var(--blue-bg);
  border: 1px solid var(--gold-line-mid);
  border-left: 3px solid var(--gold-deep);
  border-radius: var(--radius-sm);
  padding: .9rem 1.05rem;
  margin-bottom: .85rem;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}

.orient-reassure {
  background: #fff;
  border: 1px solid var(--gold-line-soft);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  font-size: .86rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
}

.orient-card h3 {
  margin: 0 0 .75rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.how-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-list li {
  position: relative;
  padding-left: 1.65rem;
  margin: .55rem 0;
  font-size: .9rem;
  line-height: 1.5;
  font-weight: 600;
}

.how-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 800;
}

.how-list .how-foot {
  margin: .75rem 0 0;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  color: var(--muted);
  font-weight: 700;
  list-style: none;
  padding-left: 0;
}

.how-list .how-foot::before { content: none; }

.flow-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flow-steps li {
  position: relative;
  padding: .55rem .75rem .55rem 2.5rem;
  background: #fffef8;
  border: 1px solid var(--gold-line-mid);
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
}

.flow-steps li::before {
  content: counter(flow);
  counter-increment: flow;
  position: absolute;
  left: .65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.35rem;
  text-align: center;
}

.flow-steps { counter-reset: flow; }

.flow-steps li + li { margin-top: .35rem; }

.flow-steps li::after {
  content: '↓';
  display: block;
  text-align: center;
  color: var(--brand);
  font-size: .85rem;
  font-weight: 800;
  margin: .35rem 0 -.15rem;
  padding-left: 1.75rem;
}

.flow-steps li:last-child::after { display: none; }

.split-diagram {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  overflow: hidden;
  margin: .75rem 0 1rem;
  font-size: .82rem;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 215, 0, 0.08);
}

.split-diagram span {
  padding: .85rem .5rem;
  display: block;
}

.split-diagram .pane-airbnb {
  background: linear-gradient(180deg, #e0f4fc 0%, #cceefb 100%);
  color: var(--brand-dark);
  border-right: 1px solid var(--gold-line-mid);
}

.split-diagram .pane-guide {
  background: linear-gradient(180deg, #fff9dc 0%, #fff3b0 100%);
  color: #7a5d00;
}

.split-tips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}

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

.split-tip {
  background: var(--grey-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .75rem;
  font-size: .82rem;
  line-height: 1.45;
}

.split-tip strong {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--brand-dark);
  margin-bottom: .35rem;
}

.copy-demo {
  background: var(--purple-bg);
  border: 1px solid var(--purple-border);
  border-left: 3px solid var(--gold-deep);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  margin: .75rem 0;
  font-size: .85rem;
  color: #4c1d95;
}

.copy-demo .label {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6d28d9;
  margin-bottom: .35rem;
}

.copy-demo .sample {
  font-weight: 700;
  margin-bottom: .5rem;
}

.copy-demo .hint {
  font-size: .78rem;
  font-weight: 600;
  opacity: .9;
}

.not-auto {
  font-size: .84rem;
  color: var(--muted);
  font-weight: 600;
  margin: .5rem 0 0;
  padding: .65rem .75rem;
  background: var(--grey-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.nav-progress {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 700;
}