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

:root {
  /* ── Dark palette ── */
  --bg:        #09090b;
  --surface:   #111118;
  --surface-2: #16161f;
  --surface-3: #1c1c28;

  --text:      #fafafa;
  --text-2:    #e4e4e7;
  --text-3:    #a1a1aa;
  --text-4:    #71717a;

  --border:    rgba(255,255,255,.09);
  --border-lt: rgba(255,255,255,.05);

  /* ── Indigo accent ── */
  --indigo:      #7c3aed;
  --indigo-dk:   #6d28d9;
  --indigo-lt:   #a78bfa;
  --indigo-glow: rgba(109,40,217,.2);
  --indigo-dim:  rgba(124,58,237,.1);

  --green:  #10b981;
  --teal:   #0ea5e9;
  --rose:   #f43f5e;

  /* ── Backward-compat aliases ── */
  --primary:      #fafafa;
  --primary-mid:  var(--indigo);
  --accent:       var(--indigo);
  --accent-light: var(--indigo-dim);
  --text:         #fafafa;
  --muted:        #a1a1aa;
  --border-light: var(--border-lt);
  --ink:          #fafafa;
  --ink-2:        #e4e4e7;
  --ink-3:        #a1a1aa;
  --ink-4:        #71717a;
  --brand:        var(--indigo);
  --brand-dk:     var(--indigo-dk);
  --brand-lt:     var(--indigo-dim);
  --brand-xl:     rgba(124,58,237,.05);
  --teal-lt:      rgba(14,165,233,.1);

  /* ── Elevation (dark mode — shadows are subtle) ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,.6), 0 3px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.4);

  /* ── Shape ── */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif;

  /* ── Type scale ── */
  --fs-xs:      11px;   /* micro: badges, tags, section labels */
  --fs-sm:      12px;   /* caption: hints, secondary info, feature list */
  --fs-base:    14px;   /* body: descriptions, form text */
  --fs-md:      15px;   /* interface: inputs, nav default */
  --fs-sub:     17px;   /* sub-heading: card titles */
  --fs-heading: 20px;   /* heading: dialog titles, step intro */
  --fs-hero:    32px;   /* hero: main entry title */

  --fw-normal: 400;   /* body text */
  --fw-medium: 500;   /* emphasized body */
  --fw-semi:   600;   /* labels, buttons, nav */
  --fw-bold:   700;   /* headings, titles */
  --fw-black:  800;   /* hero / display only */

  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-base:    1.5;
  --lh-relaxed: 1.65;
}

html, body { height: 100%; height: 100dvh; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex; flex-direction: column;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
header {
  background: var(--bg);
  border-bottom: 1px solid var(--border-lt);
  padding: 0 20px;
  height: 48px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
header svg { opacity: .7; flex-shrink: 0; }
.header-logo { height: 40px; width: auto; display: block; }
.header-home-btn {
  display: flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.header-home-btn:hover .header-logo { opacity: 0.75; }

/* ── Entry screen ── */
.entry-screen { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.entry-hero {
  background: var(--bg);
  padding: 32px 20px 36px;
  position: relative; overflow: hidden;
}
/* Violet nebula glow top-right */
.entry-hero::before {
  content: '';
  position: absolute; top: -100px; right: -80px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(109,40,217,.22) 0%, transparent 65%);
  pointer-events: none;
}
/* Soft secondary glow bottom-left */
.entry-hero::after {
  content: '';
  position: absolute; bottom: -20px; left: 10%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(124,58,237,.09) 0%, transparent 70%);
  pointer-events: none;
}

.entry-kicker {
  display: inline-block;
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 2px; text-transform: uppercase;
  background: linear-gradient(90deg, var(--indigo-lt) 0%, var(--indigo) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 12px;
}
.entry-title {
  font-size: var(--fs-hero); font-weight: var(--fw-black); color: var(--text);
  line-height: var(--lh-tight); letter-spacing: -.6px;
  margin-bottom: 10px;
}
.entry-title-accent { color: var(--indigo-lt); }
/* The hard <br> keeps the deliberate 2-line split on narrow phones; past
   mobile width there's room for it to read as one line, and forcing the
   break there just leaves "the smart way" stranded as a short orphan line. */
@media (min-width: 600px) {
  .entry-title-break { display: none; }
}
.entry-sub {
  font-size: var(--fs-base); color: var(--text-3); line-height: var(--lh-base);
}

.entry-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
@media (min-width: 600px) {
  .entry-cta-row { margin-top: 52px; }
}

.entry-btn-primary {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  border-radius: 12px; font-size: 14.5px; cursor: pointer; border: none;
  background: var(--indigo); color: #fff;
}
.entry-btn-primary:hover { background: var(--indigo-dk); }
.entry-btn-primary strong { display: block; font-size: 14.5px; }
.entry-btn-primary small { display: block; font-size: 11.5px; font-weight: 400; opacity: .75; }

.entry-demo-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 12px; border: 1px solid var(--border);
  color: var(--text-2); font-size: 13.5px; font-weight: 600; text-decoration: none;
}
.entry-demo-btn:hover { background: var(--surface-2); }
@media (max-width: 600px) {
  .entry-cta-row { flex-direction: column; }
  .entry-btn-primary, .entry-demo-btn { width: 100%; justify-content: center; }
}

.entry-trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.entry-trust-row span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-3); }
.entry-trust-row svg { color: var(--indigo-lt); flex-shrink: 0; }
/* Mobile: side-by-side icon+text per item wrapped to two lines in the
   cramped space between the buttons and the tour -- icon above text instead
   makes each item only as wide as its own text, narrow enough for all three
   to fit on one line. Desktop has more room, so it keeps the side-by-side
   layout above. */
@media (max-width: 599px) {
  .entry-trust-row { flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .entry-trust-row span { flex-direction: column; gap: 4px; text-align: center; flex: 1; min-width: 0; }
  .entry-trust-row span svg { width: 17px; height: 17px; }
}

.entry-embed-demo { margin-top: 20px; }
.entry-embed-demo-label {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 8px;
}
.entry-embed-demo-frame {
  width: 100%; height: 320px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); background: #000;
}
.entry-embed-demo-frame iframe { width: 100%; height: 100%; border: none; }

/* Desktop: hero text beside the live demo panel, matching the reference
   two-column layout -- mobile stays stacked (demo full-width below the text,
   the default flex-direction). */
@media (min-width: 600px) {
  .entry-hero-wrap { display: flex; align-items: center; gap: 36px; }
  .entry-hero-text { flex: 1 1 480px; min-width: 0; }
  .entry-embed-demo { flex: 0 0 380px; margin-top: 0; }
  .entry-embed-demo-frame { height: 300px; }
}

.entry-body { padding: 0 16px 40px; display: flex; flex-direction: column; gap: 20px; }
.entry-section { display: flex; flex-direction: column; gap: 0; }
.entry-section-label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-4); margin-bottom: 10px; padding-left: 2px;
  display: flex; align-items: center; gap: 8px;
}
.entry-section-label::before {
  content: ''; flex: 0 0 20px; height: 1px; background: var(--border);
}
.entry-section-label::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.entry-cards { display: flex; flex-direction: column; gap: 12px; }
.entry-card--wide { width: 100%; max-width: 420px; align-self: center; }

/* Side-by-side duo layout on wider screens */
@media (min-width: 440px) {
  .entry-cards--duo { flex-direction: row; }
  .entry-cards--duo .entry-card { flex: 1; }
}

/* Horizontal compact card */
.entry-card--horiz { padding: 14px 16px; }
.ec-horiz-inner { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ec-horiz-text { flex: 1; }
.ec-horiz-text .ec-title { margin-bottom: 2px; font-size: 15px; }
.ec-horiz-text .ec-desc  { margin-bottom: 0; }
.ec-action--horiz { border-top: 1px solid var(--border); padding-top: 10px; }

/* ── Entry card ── */
.entry-card {
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.entry-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,58,237,.35);
  box-shadow: 0 0 20px rgba(109,40,217,.12), 0 8px 24px rgba(0,0,0,.4);
}
.entry-card:active { transform: translateY(-1px); transition-duration: .08s; }

/* Featured violet card */
.entry-card--dark {
  background: linear-gradient(145deg, #120828 0%, #1e0a3c 100%);
  border: 1.5px solid rgba(109,40,217,.45);
  box-shadow: 0 0 28px rgba(109,40,217,.18), inset 0 1px 0 rgba(167,139,250,.15);
}
.entry-card--dark:hover {
  transform: translateY(-3px);
  border-color: rgba(167,139,250,.6);
  box-shadow: 0 0 36px rgba(109,40,217,.26), 0 8px 24px rgba(0,0,0,.45);
}

/* Icon container */
.ec-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 14px;
}
.ec-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.ec-icon--amber  { background: rgba(234,88,12,.12);  color: #fb923c; }
.ec-icon--glass  { background: rgba(124,58,237,.18); color: var(--indigo-lt); }
.ec-icon--violet { background: rgba(124,58,237,.12); color: var(--indigo-lt); }
.ec-icon--teal   { background: rgba(20,184,166,.12); color: #2dd4bf; }

/* Label chips */
.ec-badge {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .8px; text-transform: uppercase;
  background: rgba(16,185,129,.15); color: #34d399;
  border: 1px solid rgba(16,185,129,.25);
  padding: 4px 10px; border-radius: 20px; flex-shrink: 0;
}
.ec-tag {
  font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: .5px;
  color: var(--indigo-lt); padding-top: 6px; flex-shrink: 0;
}

/* Card text */
.ec-title {
  font-size: var(--fs-sub); font-weight: var(--fw-bold); color: var(--text);
  margin-bottom: 3px; letter-spacing: -.2px;
}
.ec-desc {
  font-size: var(--fs-sm); color: var(--text-3); margin-bottom: 12px; line-height: var(--lh-base);
}
.entry-card--dark .ec-desc { color: rgba(167,139,250,.55); }

/* Feature list */
.ec-features {
  list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.ec-features li {
  font-size: var(--fs-sm); color: var(--text-3);
  padding-left: 20px; position: relative; line-height: var(--lh-base);
}
.ec-features li::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--indigo-dk);
}
.entry-card--dark .ec-features li { color: rgba(167,139,250,.6); }
.entry-card--dark .ec-features li::before { background: var(--indigo-lt); }

/* Action row */
.ec-action {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-lt);
  font-size: 14px; font-weight: 700; color: var(--text-3);
}
.entry-card--dark .ec-action {
  border-top-color: rgba(124,58,237,.2);
  color: var(--indigo-lt);
}
.ec-arrow {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: var(--indigo-dim); color: var(--indigo-lt);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.entry-card:hover .ec-arrow { transform: translateX(3px); background: rgba(124,58,237,.18); }
.entry-card--dark .ec-arrow { background: rgba(124,58,237,.2); color: var(--indigo-lt); }

/* ── Wizard nav ──
   Body is a fixed-height (100dvh) flex column with overflow:hidden -- only
   .step-body.scrollable actually scrolls -- so pinning this to the bottom is
   just a flex `order` swap (steps-wrap defaults to order:0, DOM position
   puts it before this in source but after header) rather than needing
   position:sticky/fixed, which would fight that layout instead of using it. */
.wizard-nav {
  background: var(--bg);
  border-top: 1px solid var(--border-lt);
  padding: 0 14px;
  height: 52px;
  display: flex; align-items: center;
  flex-shrink: 0;
  order: 2;
}
/* Bar itself (background/border) stays full-width -- only the buttons
   inside get constrained, so they line up under the form instead of a
   full-width bar feeling disconnected from a narrower centered form. */
.wizard-nav-inner { display: flex; align-items: center; gap: 8px; width: 100%; }
@media (min-width: 600px) {
  .wizard-nav-inner { max-width: 580px; margin: 0 auto; }
}

.nav-back {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-3);
  cursor: pointer; flex-shrink: 0;
  transition: all .18s;
  -webkit-tap-highlight-color: transparent;
}
.nav-back:hover { border-color: var(--border); color: var(--text-2); background: var(--surface); }

.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.nav-preview-btn {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-4);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .18s;
  -webkit-tap-highlight-color: transparent;
}
.nav-preview-btn:hover { border-color: var(--teal); color: var(--teal); }

.nav-next {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 22px; border-radius: var(--radius-sm);
  border: none;
  background: var(--indigo); color: #fff;
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  min-height: 34px;
  box-shadow: 0 2px 12px rgba(109,40,217,.4);
  transition: background .18s, box-shadow .18s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.nav-next:hover { background: var(--indigo-dk); box-shadow: 0 4px 16px rgba(109,40,217,.5); }
.nav-next:active { transform: scale(.97); }

/* Numbered step track */
.wsteps { flex: 1; display: flex; align-items: center; justify-content: center; }
.wstep {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-4);
  border: 1.5px solid var(--border);
  transition: background .25s, color .25s, box-shadow .25s, border-color .25s;
}
.wstep.active {
  background: var(--indigo); color: #fff; border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(109,40,217,.25);
}
.wstep.done {
  background: var(--green); color: #fff; border-color: var(--green);
}
.wstep-line {
  flex: 1; height: 2px; background: var(--border); max-width: 32px;
  transition: background .25s;
}
.wstep.done + .wstep-line { background: var(--green); }

/* ── nav-btn backward compat ── */
.nav-btn {
  display: inline-flex; align-items: center;
  padding: 7px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent; color: var(--text-2);
  font-size: var(--fs-base); font-weight: var(--fw-semi);
  cursor: pointer; white-space: nowrap; min-height: 34px;
  transition: all .18s; -webkit-tap-highlight-color: transparent;
}
.nav-btn:hover { border-color: rgba(255,255,255,.2); color: var(--text); background: var(--surface); }
.nav-btn.primary {
  background: var(--indigo); color: #fff; border-color: transparent;
  box-shadow: 0 2px 12px rgba(109,40,217,.4);
}
.nav-btn.primary:hover { background: var(--indigo-dk); box-shadow: 0 4px 16px rgba(109,40,217,.5); }
.nav-btn.preview-btn { padding: 7px 10px; }

/* ── Step layout ── */
.steps-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.step-panel { display: none; flex-direction: column; flex: 1; overflow: hidden; }
.step-panel.active { display: flex; }
.step-body.scrollable { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.step-body.scrollable::-webkit-scrollbar { display: none; }
.step-intro { padding: 20px 20px 12px; }
.step-intro h2 {
  font-size: var(--fs-heading); font-weight: var(--fw-bold); color: var(--text);
  margin-bottom: 4px; letter-spacing: -.3px;
}
.step-intro p { font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-base); }

/* ── Confirm bar ── */
.confirm-bar {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); color: var(--text);
  border: 1px solid rgba(239,68,68,.35);
  padding: 10px 14px 10px 18px; border-radius: 16px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; opacity: 0;
  transition: all .28s; pointer-events: none;
  z-index: 401; white-space: nowrap;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.confirm-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.confirm-bar-btns { display: flex; gap: 8px; }
.confirm-bar-cancel {
  padding: 6px 13px; border-radius: 8px;
  border: 1px solid var(--border); background: none;
  color: var(--text-3); font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}
.confirm-bar-ok {
  padding: 6px 13px; border-radius: 8px; border: none;
  background: #ef4444; color: white; font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; -webkit-tap-highlight-color: transparent;
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 22px; border-radius: 22px;
  font-size: 14px; font-weight: 500; opacity: 0;
  transition: all .28s; pointer-events: none;
  z-index: 10000; white-space: normal; word-wrap: break-word; max-width: 90vw; text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Map Picker Overlay ── */
.map-picker-overlay {
  /* top:48px (not inset:0) so the main <header>'s PropertyWalk logo stays
     visible above this, same as .my-showcases-screen (Profile/Subscriptions/
     My Listings/Analytics) -- inset:0 was covering it entirely. */
  position: fixed; top: 48px; left: 0; right: 0; bottom: 0; z-index: 2000;
  display: flex; flex-direction: column;
  background: var(--bg);
}
/* Title band at the top, matching .step-intro elsewhere in the wizard --
   was just a small centered hint line before, which didn't read as a real
   page header. */
.map-picker-intro {
  padding: 18px 16px 12px; flex-shrink: 0;
  background: var(--bg); border-bottom: 1px solid var(--border-lt);
}
.map-picker-intro h2 {
  font-size: var(--fs-heading); font-weight: var(--fw-bold); color: var(--text);
  margin: 0 0 4px; letter-spacing: -.3px;
}
.map-picker-intro p {
  font-size: var(--fs-sm); color: var(--text-3); line-height: var(--lh-base); margin: 0;
}
/* Pinned to the bottom (order:1, after #mapPickerMap's default order:0) for
   consistency with .wizard-nav/.mss-topbar elsewhere. */
.map-picker-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; flex-shrink: 0;
  background: var(--bg); border-top: 1px solid var(--border-lt);
  order: 1;
}
.map-picker-cancel {
  display: flex; align-items: center; gap: 4px;
  background: none; border: none; color: var(--text-3);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px;
  flex-shrink: 0; white-space: nowrap;
}
.map-picker-search-wrap {
  flex: 1; position: relative; display: flex; align-items: center;
}
.map-picker-search-wrap svg {
  position: absolute; left: 10px; color: var(--text-4); pointer-events: none;
}
#mapPickerSearch {
  width: 100%; padding: 7px 10px 7px 30px !important;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font-size: 13px;
}
.map-picker-confirm {
  padding: 7px 14px; border-radius: 8px; border: none;
  background: var(--indigo); color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0;
  transition: opacity .18s;
}
.map-picker-confirm:disabled { opacity: .4; cursor: default; }
.map-picker-confirm:not(:disabled):hover { opacity: .88; }
#mapPickerMap { flex: 1; }

/* ── Desktop ── */
@media (min-width: 600px) {
  .dialog-backdrop { align-items: center; }
  .dialog { border-radius: 22px; max-width: 440px; }
  .step-body.scrollable { max-width: 580px; margin: 0 auto; width: 100%; }

  /* 3-column layout: each section becomes a column, no scrolling needed */
  .entry-body { max-width: 960px; margin: 0 auto; flex-direction: row; align-items: stretch; gap: 16px; padding: 0 24px 40px; }
  .entry-section { flex: 1; display: flex; flex-direction: column; gap: 0; }
  .entry-section-label::before { flex: 0 0 0px; }
  .entry-cards { flex: 1; display: flex; flex-direction: column; }
  .entry-cards .entry-card { flex: 1; }

  /* .entry-hero-wrap now puts the demo panel in a two-column layout beside
     the hero text (sized via flex-basis, see that rule above) instead of a
     centered full-width block below it -- .entry-body's own 960px column
     stays as the width reference for the cards section further down. */
  .entry-hero-wrap { max-width: 960px; margin: 0 auto; }
}