/* =====================================================
   SLB Proposal — board-ready, same Latvian identity
   Layered on top of style.css — only adds what's needed
   ===================================================== */

.page-proposal {
  background: var(--c-cream);
}

/* Compact nav (proposal variant) */
.nav-proposal { padding: 12px 0; }
.nav-proposal .nav-inner { gap: 16px; }
.lang-switch-compact {
  /* Sized down for the proposal nav — same LV/EN pattern as v1/v2 */
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .lang-switch-compact { margin-left: 0; }
}
.proposal-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  padding: 8px 16px;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  background: rgba(255,255,255,0.6);
}
.proposal-tag-dot {
  width: 6px; height: 6px;
  background: var(--c-red);
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Eyebrow + body type for proposal */
.prop-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-red);
  /* Tighten to headline: previous 24px left an awkward gap. */
  margin-bottom: 14px;
}
.prop-eyebrow .dot {
  width: 6px; height: 6px;
  background: var(--c-red);
  border-radius: 50%;
}

/* ============ HERO ============ */
.prop-hero {
  position: relative;
  padding: 160px 0 100px;
  background: var(--c-cream);
  overflow: hidden;
}
/* Emblem watermark — v1, sits behind text on the right */
.prop-hero::before {
  content: '';
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  background: url('img/cropped-slb.png') center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.prop-hero > .container { position: relative; z-index: 1; }
.prop-hero-crimson-band {
  position: absolute;
  left: 0; top: 14%;
  width: 4px;
  height: 72%;
  background: var(--c-red);
}
.prop-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  align-items: center;
}
.prop-h1 {
  font-family: var(--serif);
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--c-ink);
  margin-bottom: 28px;
  max-width: 14ch;
}
.prop-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-red);
}
.prop-hero-sub {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin-bottom: 48px;
}
.prop-hero-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--c-line);
  max-width: 720px;
}
.prop-meta-key {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 6px;
}
.prop-meta-val {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
}
.prop-hero-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.prop-hero-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  padding: 36px 32px;
  border-radius: 4px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.prop-hero-card-orn {
  width: 48px; height: 48px;
  color: var(--c-red);
  margin-bottom: 20px;
  opacity: 0.85;
}
.prop-hero-card-q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.4;
  color: var(--c-ink);
  margin-bottom: 14px;
  font-weight: 400;
}
.prop-hero-card-a {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.prop-hero-cta { width: fit-content; }

/* ============ SECTIONS (common) ============ */
.prop-section {
  padding: 100px 0;
}
.prop-section .section-title {
  font-size: clamp(34px, 4vw, 48px);
  margin-bottom: 28px;
}
.prop-section .section-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-red);
}
.prop-section-head {
  max-width: 820px;
  /* Trim orphan whitespace between section heading and content.
     64px left a noticeable band; 40px keeps the rhythm without the void. */
  margin-bottom: 40px;
}
.prop-section-sub {
  font-size: 17px;
  color: var(--c-ink-soft);
  max-width: 56ch;
  line-height: 1.55;
}
.prop-lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--c-ink);
  margin-bottom: 18px;
}

/* ============ OPPORTUNITY ============ */
.prop-opportunity {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.prop-opp-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 40px;
}
.prop-opp-text p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-ink-soft);
  margin-bottom: 18px;
}
.prop-opp-text strong { color: var(--c-ink); font-weight: 600; }
.prop-opp-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 32px;
  background: var(--c-cream);
  border-radius: 4px;
  border: 1px solid var(--c-line);
  position: sticky;
  top: 100px;
}
.prop-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prop-stat-num {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: -0.02em;
  line-height: 1;
}
.prop-stat-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ============ PACKAGES ============ */
.prop-packages {
  background: var(--c-cream);
}
.prop-pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
  align-items: stretch;
}
/* 6-pack variant: 3 columns on wide, 2 on medium, 1 on narrow */
.prop-pkg-grid-6 {
  grid-template-columns: repeat(3, 1fr);
}
.prop-pkg {
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 44px 36px 40px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
  /* Equalize card height across the 3-up grid regardless of feature-list length. */
  min-height: 640px;
}
.prop-pkg:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.prop-pkg-featured {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
  position: relative;
  overflow: hidden;
}
.prop-pkg-featured::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, rgba(158, 27, 50, 0.3), transparent 70%);
  pointer-events: none;
}
.prop-pkg-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--c-red);
  color: var(--c-paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
}
.prop-pkg-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
}
.prop-pkg-featured .prop-pkg-head { border-bottom-color: rgba(255,255,255,0.12); }
.prop-pkg-tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 8px;
}
.prop-pkg-name {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.prop-pkg-featured .prop-pkg-name { color: var(--c-paper); }
.prop-pkg-tag {
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.5;
}
.prop-pkg-featured .prop-pkg-tag { color: rgba(250, 247, 242, 0.7); }

.prop-pkg-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 28px;
}
.prop-price-from {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-right: 4px;
}
.prop-pkg-featured .prop-price-from { color: rgba(250, 247, 242, 0.6); }
.prop-price-amount {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.025em;
  line-height: 1;
}
.prop-pkg-featured .prop-price-amount { color: var(--c-paper); }
.prop-price-once {
  font-size: 11px;
  color: var(--c-ink-soft);
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.prop-pkg-featured .prop-price-once { color: rgba(250, 247, 242, 0.5); }

.prop-pkg-includes {
  font-size: 13px;
  color: var(--c-ink-soft);
  margin-bottom: 14px;
  font-style: italic;
}
.prop-pkg-featured .prop-pkg-includes { color: rgba(250, 247, 242, 0.6); }

.prop-pkg-list {
  list-style: none;
  margin-bottom: 28px;
  flex: 1;
}
.prop-pkg-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
  padding: 9px 0;
  border-bottom: 1px solid var(--c-line);
}
.prop-pkg-featured .prop-pkg-list li {
  color: rgba(250, 247, 242, 0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
.prop-check {
  color: var(--c-red);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.prop-pkg-strong {
  font-weight: 700;
  color: var(--c-ink);
}
.prop-pkg-featured .prop-pkg-strong { color: var(--c-paper); }

.prop-pkg-best {
  font-size: 13px;
  line-height: 1.55;
  padding: 16px 18px;
  background: rgba(158, 27, 50, 0.06);
  border-radius: 4px;
  border-left: 3px solid var(--c-red);
}
.prop-pkg-featured .prop-pkg-best {
  background: rgba(158, 27, 50, 0.18);
  color: var(--c-cream);
}
.prop-pkg-best strong { color: var(--c-ink); font-weight: 600; }
.prop-pkg-featured .prop-pkg-best strong { color: var(--c-paper); }

/* Comparison table */
.prop-compare {
  margin-top: 80px;
  padding: 32px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.prop-compare-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 20px;
}
.prop-compare-scroll {
  overflow-x: auto;
}
.prop-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: fixed;
}
.prop-table thead th:nth-child(1) { width: 50%; }
.prop-table thead th:nth-child(2) { width: 25%; }
.prop-table thead th:nth-child(3) { width: 25%; }
.prop-table th, .prop-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.prop-table th {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--c-ink);
  background: var(--c-cream);
}
.prop-table td { color: var(--c-ink-soft); }
.prop-table td:first-child { font-weight: 500; color: var(--c-ink); }
.prop-table th:first-child, .prop-table td:first-child {
  background: transparent;
  font-family: var(--sans);
  font-weight: 500;
}
.prop-table th.prop-table-featured {
  background: var(--c-red);
  color: var(--c-paper);
}
.prop-table tr:last-child td { border-bottom: 0; }

/* ============ FOUNDATION ============ */
.prop-foundation {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.prop-found-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;  /* equal-height rows so multi-line titles don't unbalance the grid */
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  margin-top: 56px;
}
.prop-found-item {
  background: var(--c-paper);
  padding: 36px 32px;
}
.prop-found-num {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-red);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  display: block;
}
.prop-found-item h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.prop-found-item p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* ============ PROCESS ============ */
.prop-process {
  background: var(--c-cream);
}
.prop-phase-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 56px;
}
.prop-phase {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 24px;
  border-top: 2px solid var(--c-red);
  position: relative;
}
.prop-phase-num {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 700;
  color: var(--c-red);
  line-height: 1;
  letter-spacing: -0.03em;
}
.prop-phase h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.prop-phase p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  flex: 1;
}
.prop-phase-time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-red);
  background: rgba(158, 27, 50, 0.08);
  padding: 6px 12px;
  border-radius: 100px;
  align-self: flex-start;
  margin-top: auto;
}

/* ============ WHAT THIS MEANS FOR YOU ============ */
.prop-control {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}

/* Banner — the "shift" callout */
.prop-control-banner {
  margin-top: 56px;
  padding: 4px;
  background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.prop-control-banner-inner {
  background: var(--c-paper);
  padding: 36px 40px;
  border-radius: 6px;
  position: relative;
}
.prop-control-banner-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.prop-control-banner-inner h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin-bottom: 12px;
  max-width: 28ch;
}
.prop-control-banner-inner p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  max-width: 68ch;
}

/* Scenarios — alternating rows */
.prop-control-scenarios {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-top: 80px;
}
.prop-scenario {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.prop-scenario-reverse {
  grid-template-columns: 1fr 1.1fr;
}
.prop-scenario-reverse .prop-scenario-vis { order: 2; }
.prop-scenario-reverse .prop-scenario-text { order: 1; }

.prop-scenario-vis {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 28px 24px;
  position: relative;
  box-shadow: var(--shadow-card);
}
.prop-scenario-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
  background: var(--c-paper);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
  border: 1px solid var(--c-line);
}
.prop-scenario-chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prop-scenario-bubble {
  padding: 12px 14px;
  border-radius: 12px;
  max-width: 92%;
  position: relative;
}
.prop-scenario-bubble p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.prop-scenario-bubble strong {
  color: var(--c-red);
  font-weight: 600;
}
.prop-scenario-bubble em {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: rgba(158, 27, 50, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  font-style: normal;
}
.prop-scenario-time {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--c-ink-soft);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.prop-scenario-from-you {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.prop-scenario-from-ai {
  background: var(--c-red);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.prop-scenario-from-ai p { color: var(--c-paper); }
.prop-scenario-from-ai strong { color: var(--c-paper); }
.prop-scenario-from-ai em {
  background: rgba(255,255,255,0.15);
  color: var(--c-paper);
}
.prop-scenario-from-ai .prop-scenario-time { color: rgba(255,255,255,0.7); }
.prop-scenario-from-other {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.prop-scenario-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.prop-scenario-text h4 {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 600;
  color: var(--c-ink);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.prop-scenario-text p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 20px;
}
.prop-scenario-gain {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  font-weight: 600;
  color: var(--c-red);
  padding: 10px 16px;
  background: rgba(158, 27, 50, 0.06);
  border-radius: 4px;
  border-left: 3px solid var(--c-red);
}

/* Payoffs grid */
.prop-control-payoffs {
  margin-top: 100px;
  padding-top: 64px;
  border-top: 1px solid var(--c-line);
}
.prop-control-payoffs h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 48px;
  max-width: 24ch;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.prop-control-payoffs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.prop-payoff {
  background: var(--c-paper);
  padding: 32px 28px;
  position: relative;
}
.prop-payoff-num {
  font-family: var(--serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--c-red);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: 14px;
}
.prop-payoff h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.prop-payoff p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

@media (max-width: 1100px) {
  .prop-scenario,
  .prop-scenario-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .prop-scenario-reverse .prop-scenario-vis { order: 1; }
  .prop-scenario-reverse .prop-scenario-text { order: 2; }
  .prop-control-payoffs-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .prop-control-payoffs-grid { grid-template-columns: 1fr; }
  .prop-control-banner-inner { padding: 28px 24px; }
  .prop-control-scenarios { gap: 56px; margin-top: 56px; }
  .prop-control-payoffs { margin-top: 64px; padding-top: 48px; }
}

/* ============ WHY ============ */
.prop-why {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.prop-why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px;
  margin-top: 48px;
}
.prop-why-item h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.prop-why-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-soft);
}
.prop-why-item code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: var(--c-cream);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--c-line);
  color: var(--c-red);
}

/* ============ BEYOND THE WEBSITE ============ */
.prop-beyond {
  background: var(--c-cream);
  position: relative;
  overflow: hidden;
}
.prop-beyond::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--c-red);
}
.prop-beyond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 56px;
}
.prop-beyond-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: relative;
  overflow: hidden;
}
.prop-beyond-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--c-red);
}
.prop-beyond-card-head {
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 24px;
}
.prop-beyond-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-paper);
  background: var(--c-red);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 16px;
}
.prop-beyond-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* WhatsApp-style mock */
.prop-beyond-vis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prop-msg {
  padding: 14px 16px;
  border-radius: 12px;
  max-width: 88%;
  position: relative;
}
.prop-msg-meta {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
  opacity: 0.7;
}
.prop-msg p {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--c-ink);
}
.prop-msg p + p { margin-top: 8px; }
.prop-msg-you {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.prop-msg-you .prop-msg-meta { color: var(--c-ink-soft); }
.prop-msg-ai {
  background: var(--c-red);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.prop-msg-ai .prop-msg-meta { color: rgba(255,255,255,0.7); }
.prop-msg-ai p { color: var(--c-paper); }
.prop-msg-ai strong { color: var(--c-paper); font-weight: 600; }
.prop-msg-actions {
  list-style: none;
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-msg-actions li {
  font-size: 13px;
  color: rgba(255,255,255,0.95);
  padding: 2px 0;
}
.prop-msg-note {
  font-style: italic;
  font-size: 13px !important;
  opacity: 0.85;
}

/* Pipeline diagram */
.prop-beyond-pipeline {
  background: var(--c-cream);
  padding: 24px;
  border-radius: 6px;
  border: 1px solid var(--c-line);
}
.prop-pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
.prop-pipe-step {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-pipe-step strong {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.prop-pipe-step em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 4px;
}
.prop-pipe-step p {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-ink-soft);
  margin-top: 4px;
}
.prop-pipe-num {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 4px;
}
.prop-pipe-stage {
  background: var(--c-ink);
  border-color: var(--c-ink);
}
.prop-pipe-stage strong { color: var(--c-paper); }
.prop-pipe-stage em { color: var(--c-red-soft); }
.prop-pipe-stage p { color: rgba(255,255,255,0.6); }
.prop-pipe-stage .prop-pipe-num { color: var(--c-paper); }
.prop-pipe-live {
  background: var(--c-red);
  border-color: var(--c-red);
}
.prop-pipe-live strong { color: var(--c-paper); }
.prop-pipe-live em { color: rgba(255,255,255,0.85); }
.prop-pipe-live p { color: rgba(255,255,255,0.85); }
.prop-pipe-live .prop-pipe-num { color: var(--c-paper); }
.prop-pipe-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-red);
  font-size: 20px;
  font-weight: 700;
}

/* Points grid (under each card) */
.prop-beyond-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 28px;
}
.prop-beyond-point h4 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-ink);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.prop-beyond-point p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

/* Callout at the end of the section */
.prop-beyond-callout {
  margin-top: 48px;
  padding: 32px 36px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-red);
  border-radius: 4px;
}
.prop-beyond-callout p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  max-width: 80ch;
}
.prop-beyond-callout strong {
  color: var(--c-red);
  font-weight: 600;
}

@media (max-width: 1100px) {
  .prop-beyond-grid { grid-template-columns: 1fr; }
  .prop-beyond-points { grid-template-columns: 1fr; }
  .prop-pipeline { grid-template-columns: 1fr; }
  .prop-pipe-arrow { transform: rotate(90deg); padding: 4px 0; }
}
.prop-faq {
  background: var(--c-cream);
}
.prop-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--c-line);
}
.prop-faq-item {
  border-bottom: 1px solid var(--c-line);
  padding: 0;
}
.prop-faq-item summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--c-ink);
  padding: 28px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.2s;
  letter-spacing: -0.01em;
}
.prop-faq-item summary::-webkit-details-marker { display: none; }
.prop-faq-item summary::after {
  content: '+';
  font-family: var(--sans);
  font-size: 28px;
  font-weight: 300;
  color: var(--c-red);
  margin-left: 24px;
  transition: transform 0.3s;
}
.prop-faq-item[open] summary::after {
  transform: rotate(45deg);
}
.prop-faq-item summary:hover { color: var(--c-red); }
.prop-faq-body {
  padding: 0 0 28px;
  max-width: 70ch;
}
.prop-faq-body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}
.prop-faq-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  background: var(--c-paper);
  padding: 2px 8px;
  border-radius: 3px;
  border: 1px solid var(--c-line);
  color: var(--c-red);
}
.prop-faq-body strong { color: var(--c-red); font-weight: 600; }

/* ============ CTA ============ */
.prop-cta {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
}
.prop-cta-card {
  background: var(--c-red);
  color: var(--c-paper);
  border-radius: 6px;
  padding: 80px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.prop-cta-card::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,0.08), transparent 70%);
}
.prop-cta-card .section-eyebrow { color: var(--c-cream); opacity: 0.85; }
.prop-cta-card .section-title { color: var(--c-paper); max-width: 20ch; }
.prop-cta-card .section-title em {
  color: var(--c-cream);
  font-style: italic;
  font-weight: 400;
}
.prop-cta-card p {
  font-size: 16px;
  color: var(--c-cream);
  opacity: 0.9;
  line-height: 1.6;
}
.prop-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prop-cta-actions .btn-primary {
  background: var(--c-paper);
  color: var(--c-red);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.prop-cta-actions .btn-primary:hover {
  background: var(--c-cream);
  color: var(--c-red-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.prop-cta-actions .btn-ghost {
  border-color: rgba(255,255,255,0.4);
  color: var(--c-paper);
}
.prop-cta-actions .btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--c-paper);
}

/* ============ FOOTER ============ */
.prop-footer {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 56px 0 32px;
}
.prop-footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.prop-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.prop-footer-brand img {
  width: 48px; height: 48px;
  object-fit: contain;
  /* emblem keeps its colors against the dark footer */
  border-radius: 50%;
  background: var(--c-paper);
  padding: 2px;
}
.prop-footer-brand div {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.prop-footer-brand strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-paper);
}
.prop-footer-brand span {
  font-size: 11px;
  color: var(--c-red-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prop-footer-meta {
  text-align: right;
}
.prop-footer-meta p {
  font-size: 13px;
  color: var(--c-cream);
  opacity: 0.7;
  margin: 0;
}
.prop-footer-fine {
  margin-top: 4px !important;
  font-size: 11px !important;
  opacity: 0.5 !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
  .prop-pkg-grid { grid-template-columns: 1fr; }
  .prop-pkg-grid-6 { grid-template-columns: 1fr; }
  .prop-found-grid { grid-template-columns: repeat(2, 1fr); }
  .prop-phase-list { grid-template-columns: repeat(2, 1fr); }
  .prop-why-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  /* Tighten the proposal nav: the "PROPOSAL · Prepared for the SLB Board"
     tag is the cramming culprit at narrow widths (363px). Hide it; the
     proposal context is already obvious from the page itself. Replace it
     with a hamburger so users can still navigate to sections + the home site. */
  .nav-proposal { padding: 8px 0; }
  .nav-proposal .nav-inner { gap: 8px; padding: 0 16px; }
  .nav-proposal .nav-brand-text { display: none; }
  .proposal-tag { display: none; }
  .nav-proposal-burger { display: inline-flex; }
  .lang-switch-compact { padding: 3px; }
  .lang-switch-compact .lang-opt { padding: 5px 9px; font-size: 11px; }
}

/* Hamburger button — same component as the home page, scoped to proposal nav */
.nav-proposal-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 12px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-proposal-burger:hover { background: var(--c-cream); }
.nav-proposal-burger:active { background: var(--c-line); }
.nav-proposal-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-proposal-burger.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-proposal-burger.is-open span:nth-child(2) { opacity: 0; }
.nav-proposal-burger.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Overlay drawer for the proposal nav */
.nav-proposal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.nav-proposal-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.nav-proposal-overlay-bg {
  position: absolute;
  inset: 0;
  background: rgba(35, 22, 12, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.nav-proposal-overlay-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100vw, 360px);
  background: var(--c-paper);
  border-left: 1px solid var(--c-line);
  padding: 80px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow-y: auto;
}
.nav-proposal-overlay.is-open .nav-proposal-overlay-inner {
  transform: translateX(0);
}
.nav-proposal-overlay-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  font-size: 24px;
  cursor: pointer;
  color: var(--c-ink);
  border-radius: 8px;
}
.nav-proposal-overlay-close:hover { background: var(--c-cream); }
.nav-proposal-overlay-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
.nav-proposal-overlay-links a {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--c-ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}
.nav-proposal-overlay-links a:hover,
.nav-proposal-overlay-links a:active {
  color: var(--c-red);
}
.nav-proposal-overlay-links a.overlay-back {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-weight: 700;
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 14px;
  margin-bottom: 6px;
}
.nav-proposal-overlay-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding-top: 4px;
}
.nav-proposal-overlay-controls .lang-switch {
  margin: 0;
  padding: 3px;
}
.nav-proposal-overlay-controls .lang-opt {
  padding: 6px 10px;
  font-size: 11.5px;
}

@media (max-width: 768px) {
  .prop-hero { padding: 140px 0 60px; }
  .prop-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .prop-opp-grid { grid-template-columns: 1fr; gap: 48px; }
  .prop-opp-stats { position: static; }
  .prop-section { padding: 70px 0; }
  .prop-cta-card { padding: 48px 32px; grid-template-columns: 1fr; }
  .prop-cta-actions { flex-direction: column; }
  .prop-hero-meta { grid-template-columns: 1fr; gap: 16px; }
  .prop-found-grid { grid-template-columns: 1fr; }
  .prop-phase-list { grid-template-columns: 1fr; gap: 24px; }
  .prop-footer-inner { grid-template-columns: 1fr; text-align: center; }
  .prop-footer-brand { justify-content: center; }
  .prop-footer-meta { text-align: center; }
  .proposal-tag { font-size: 10px; padding: 6px 12px; }
  /* Mobile hero typography */
  .prop-h1 { font-size: 36px; line-height: 1.05; }
  .prop-hero-sub { font-size: 16px; }
  .prop-hero-side { max-width: 480px; }
}
/* Cross-link to AI deep-dive from the Beyond section */
.prop-beyond-deeplink {
  margin-top: 48px;
  padding: 32px 36px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.prop-beyond-deeplink p {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0;
  flex: 1;
  min-width: 240px;
  letter-spacing: -0.01em;
}

/* Secondary button style (sits next to primary) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-red);
  background: var(--c-paper);
  border: 1.5px solid var(--c-red);
  padding: 12px 24px;
  border-radius: 100px;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--c-red);
  color: var(--c-paper);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .prop-beyond-deeplink {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =====================================================
   VERSION SWITCHER (slb / slb2 / proposal)
   ===================================================== */
.version-switch {
  display: inline-flex;
  align-items: center;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
  margin-left: 16px;
}
.version-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  text-decoration: none;
  border-radius: 100px;
  transition: all 0.2s;
  cursor: pointer;
  background: none;
  border: none;
}
.version-opt:hover {
  color: var(--c-ink);
  background: var(--c-cream);
}
.version-opt.active {
  background: var(--c-ink);
  color: var(--c-paper);
}
.version-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-amber);
  display: inline-block;
}
.version-opt.active .version-dot {
  background: var(--c-paper);
  box-shadow: 0 0 0 2px var(--c-amber);
}
.version-opt[data-version="v1"] .version-dot { background: var(--c-ink-soft); }
.version-opt[data-version="v2"] .version-dot { background: var(--c-red); }
.version-opt[data-version="proposal"] .version-dot { background: var(--c-amber); }

@media (max-width: 768px) {
  .version-switch { margin-left: 0; padding: 3px; }
  .version-opt { padding: 4px 8px; font-size: 11px; }
}


/* =====================================================
   TECHNOLOGY & DYNAMIC FRONT PAGE
   ===================================================== */
.prop-tech {
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.prop-tech-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 48px;
  align-items: start;
}
.prop-tech-col {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 40px 36px;
}
.prop-tech-h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.prop-tech-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--c-line);
}
.prop-tech-lead strong {
  color: var(--c-ink);
  font-weight: 600;
}

.prop-tech-benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prop-tech-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.prop-tech-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.prop-tech-benefit h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.prop-tech-benefit p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.prop-tech-flow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.prop-tech-flow-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  border-left: 4px solid var(--c-ink-soft);
}
.prop-tech-flow-step-elevated {
  border-left-color: var(--c-red);
  background: linear-gradient(to right, rgba(164, 52, 58, 0.04), var(--c-cream) 30%);
}
.prop-tech-flow-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  flex-shrink: 0;
}
.prop-tech-flow-step-elevated .prop-tech-flow-num {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-paper);
}
.prop-tech-flow-step h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
}
.prop-tech-flow-step p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-soft);
}
.prop-tech-flow-arrow {
  text-align: center;
  color: var(--c-ink-soft);
  font-size: 18px;
  margin: -4px 0;
}

.prop-tech-roles {
  padding: 20px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  margin-bottom: 20px;
}
.prop-tech-roles-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.prop-tech-roles ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prop-tech-roles li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-ink-soft);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.prop-tech-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 1px;
}
.prop-tech-role-view { background: var(--c-cream); color: var(--c-ink-soft); border: 1px solid var(--c-line); }
.prop-tech-role-edit { background: rgba(212, 160, 23, 0.12); color: #8B6B0F; border: 1px solid var(--c-amber); }
.prop-tech-role-pub { background: var(--c-red); color: var(--c-paper); }

.prop-tech-cta {
  padding: 20px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
}
.prop-tech-cta strong {
  color: var(--c-amber);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .prop-tech-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .prop-tech-col { padding: 28px 22px; }
  .prop-tech-h3 { font-size: 22px; }
}
/* =====================================================
   COMMERCIAL SUMMARY
   ===================================================== */
.prop-commercial {
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.prop-commercial-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.prop-commercial-item {
  padding: 22px 20px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 4px;
}
.prop-commercial-item h4 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 8px;
}
.prop-commercial-item p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}

.prop-commercial-total {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 6px;
}
.prop-commercial-total > p {
  font-size: 14px;
  margin-bottom: 16px;
}
.prop-commercial-total strong {
  color: var(--c-amber);
}
.prop-commercial-totals {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.prop-commercial-totals li {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.prop-commercial-totals li:last-child { border-bottom: none; }
.prop-commercial-fnote {
  font-size: 12px;
  font-style: italic;
  opacity: 0.7;
  margin-top: 12px;
}

/* =====================================================
   GOVERNANCE & CULTURAL COMMITMENTS
   ===================================================== */
.prop-governance {
  background: var(--c-cream);
}
.prop-gov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.prop-gov-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-red);
  border-radius: 4px;
  padding: 28px 26px;
}
.prop-gov-card h3 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.prop-gov-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
}
.prop-gov-card p:last-child {
  margin-bottom: 0;
}

.prop-gov-ai {
  margin-top: 32px;
  padding: 28px 32px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.prop-gov-ai h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 14px;
}
.prop-gov-ai p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
}
.prop-gov-ai ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.prop-gov-ai ul li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  padding: 4px 0 4px 20px;
  position: relative;
}
.prop-gov-ai ul li::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--c-red);
  font-weight: 700;
}

/* =====================================================
   PLAIN-LANGUAGE TECH LIST (replaces Why Next.js)
   ===================================================== */
.prop-tech-plain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.prop-tech-plain-list li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-ink-soft);
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px solid var(--c-line);
}
.prop-tech-plain-list li:last-child { border-bottom: none; }
.prop-tech-plain-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--c-red);
  font-weight: 700;
  font-size: 16px;
}
.prop-tech-appendix-link {
  font-size: 13px;
  font-style: italic;
  color: var(--c-red);
  margin-bottom: 0;
}
.prop-tech-appendix-link a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prop-hero-sub-note {
  font-size: 13.5px;
  font-style: italic;
  color: var(--c-ink-soft);
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid var(--c-amber);
}
.prop-footnote-ref {
  color: var(--c-amber);
  font-size: 0.7em;
  cursor: help;
  margin-left: 2px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1100px) {
  .prop-commercial-grid { grid-template-columns: repeat(2, 1fr); }
  .prop-gov-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .prop-commercial-grid { grid-template-columns: 1fr; }
  .prop-commercial-item, .prop-gov-card, .prop-gov-ai, .prop-commercial-total { padding: 20px 18px; }
}

/* =====================================================
   ANIMATIONS — board-ready, not bouncy
   Reveal on scroll, staggered cards, badge pulse, table
   row reveals, count-up stats. prefers-reduced-motion safe.
   ===================================================== */

/* Section reveal — gentle fade + lift */
.ai-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--ai-stagger-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--ai-stagger-delay, 0ms);
}
.ai-fade-up.ai-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stat count-up — number itself fades in via parent */
.ai-stat-num { font-variant-numeric: tabular-nums; }

/* Featured tier card — subtle ambient glow */
.prop-pkg-featured {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}
.prop-pkg-featured.ai-in {
  animation: ai-featured-glow 2.4s ease-in-out 0.6s 1;
}
@keyframes ai-featured-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 27, 50, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(158, 27, 50, 0.18); }
}

/* Badge pulse — calmer than the proposal-tag dot */
.prop-pkg-badge { position: absolute; }
.prop-pkg-badge.ai-in {
  animation: ai-badge-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both,
             ai-badge-pulse 3.6s ease-in-out 1s infinite;
}
@keyframes ai-badge-in {
  from { opacity: 0; transform: scale(0.85) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes ai-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(158, 27, 50, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(158, 27, 50, 0); }
}

/* Comparison table rows — staggered slide-in.
   IMPORTANT: The base state must be VISIBLE so users with JS disabled
   or in environments where IntersectionObserver is broken still see
   the data. A `.pre-reveal` class is added by JS only when the
   animation system is confirmed to work, and removed once it fires. */
.prop-table tbody tr {
  transition: opacity 0.5s ease var(--ai-row-delay, 0ms),
              transform 0.5s ease var(--ai-row-delay, 0ms);
}
.prop-table tbody tr.pre-reveal {
  opacity: 0;
  transform: translateX(-8px);
}
.prop-table tbody tr.ai-in {
  opacity: 1;
  transform: translateX(0);
}

/* Comparison note line (above the table) */
.prop-compare-note {
  font-size: 13.5px;
  color: var(--c-ink-soft);
  margin: -8px 0 24px;
  padding: 10px 14px;
  background: var(--c-paper);
  border-left: 2px solid var(--c-red);
  border-radius: 2px;
}

/* Add-on column header — visually distinct from base tiers */
.prop-table th.prop-table-addon {
  background: var(--c-cream);
  color: var(--c-red);
  font-style: italic;
  font-weight: 500;
}

/* Bullet list reveal — stagger each item */
.prop-pkg-list li {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.45s ease var(--ai-bullet-delay, 0ms),
              transform 0.45s ease var(--ai-bullet-delay, 0ms);
}
.prop-pkg-list li.ai-in {
  opacity: 1;
  transform: translateX(0);
}

/* FAQ chevron already rotates; add a soft open animation */
.prop-faq-item[open] {
  animation: ai-faq-open 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes ai-faq-open {
  from { background: rgba(158, 27, 50, 0.04); }
  to   { background: transparent; }
}

/* prefers-reduced-motion: kill every animation/transition */
@media (prefers-reduced-motion: reduce) {
  .ai-fade-up,
  .prop-table tbody tr,
  .prop-pkg-list li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .prop-pkg-featured.ai-in,
  .prop-pkg-badge.ai-in { animation: none !important; }
  .prop-pkg-badge { opacity: 1 !important; transform: none !important; }
  .prop-faq-item[open] { animation: none !important; }
}/* =====================================================
   PROPOSAL v2 — Two Paths + Add-ons + Venue Hire Demo
   Appended to proposal.css. Existing section/typography
   styles (prop-section, prop-found-grid, prop-phase-list,
   prop-faq-list, prop-cta-card, prop-footer, etc.) reused.
   ===================================================== */

/* =====================================================
   HERO — two-paragraph punchy lead + paths-mini card
   ===================================================== */
.prop-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.prop-lead-strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--c-ink);
  margin-bottom: 18px;
  max-width: 56ch;
  letter-spacing: -0.01em;
}
.prop-lead-strong strong {
  color: var(--c-red);
  font-weight: 700;
}
.prop-lead-soft {
  font-size: 17px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 56ch;
  margin-bottom: 32px;
}

.prop-hero-paths-mini {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
}
.prop-hero-paths-mini-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--c-line);
}
.prop-hero-paths-mini-row:last-child { border-bottom: 0; }
.prop-hero-paths-mini-row-b {
  background: rgba(158, 27, 50, 0.04);
  margin: 6px -22px -20px;
  padding: 14px 22px;
  border-bottom: 0;
  border-radius: 0 0 5px 5px;
}
.prop-hero-paths-mini-num {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 14px; font-weight: 700;
  color: var(--c-paper);
  background: var(--c-ink);
  border-radius: 50%;
}
.prop-hero-paths-mini-row-b .prop-hero-paths-mini-num {
  background: var(--c-red);
}
.prop-hero-paths-mini-label {
  font-size: 14px; font-weight: 600;
  color: var(--c-ink);
}
.prop-hero-paths-mini-from {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--c-red);
  font-weight: 600;
  white-space: nowrap;
}
.prop-hero-paths-mini-from .prop-price-currency {
  font-size: 0.65em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.35em;
  margin-right: 1px;
  font-feature-settings: normal;
}

/* =====================================================
   TWO PATHS — Path A vs Path B
   ===================================================== */
.prop-paths { background: var(--c-cream); }
.prop-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 24px;
  margin-top: 56px;
  align-items: stretch;
}
.prop-path {
  position: relative;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 48px 40px 44px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.prop-path:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.prop-path-featured {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
  position: relative;
  overflow: hidden;
}
.prop-path-featured::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle at top right, rgba(158, 27, 50, 0.32), transparent 70%);
  pointer-events: none;
}
.prop-path-badge {
  position: absolute;
  top: 18px; right: 18px;
  background: var(--c-red);
  color: var(--c-paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  z-index: 2;
}
.prop-path-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--c-line);
  position: relative;
  z-index: 1;
}
.prop-path-featured .prop-path-head { border-bottom-color: rgba(255,255,255,0.12); }
.prop-path-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 10px;
}
.prop-path-featured .prop-path-tag { color: var(--c-amber); }
.prop-path-name {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-bottom: 12px;
}
.prop-path-name em {
  font-style: italic;
  font-weight: 400;
  color: var(--c-red);
}
.prop-path-featured .prop-path-name { color: var(--c-paper); }
.prop-path-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink-soft);
}
.prop-path-featured .prop-path-tagline { color: rgba(250, 247, 242, 0.78); }

.prop-path-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.prop-price-from {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-right: 4px;
  align-self: baseline;
}
.prop-path-featured .prop-price-from { color: rgba(250, 247, 242, 0.6); }
.prop-price-amount {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.prop-price-currency {
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.42em;
  color: var(--c-ink-soft);
  margin-right: 2px;
  font-feature-settings: normal;
}
.prop-path-featured .prop-price-amount { color: var(--c-paper); }

/* Monthly price = primary headline (large serif) */
.prop-price-monthly {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.015em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.prop-path-featured .prop-price-monthly { color: var(--c-paper); }
.prop-price-monthly .prop-price-currency {
  font-size: 0.55em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.42em;
  color: var(--c-ink-soft);
  margin-right: 4px;
}
.prop-path-featured .prop-price-monthly .prop-price-currency { color: rgba(250, 247, 242, 0.55); }
.prop-price-monthly-suffix {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  text-transform: lowercase;
  margin-left: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
  vertical-align: 0.32em;
}
.prop-path-featured .prop-price-monthly-suffix { color: rgba(250, 247, 242, 0.65); }

/* One-time price = secondary, smaller text below the monthly headline */
.prop-price-once {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-basis: 100%;             /* drop to a new line */
  margin-left: 0;
  margin-top: -4px;
}
.prop-path-featured .prop-price-once { color: rgba(250, 247, 242, 0.75); }

.prop-price-or { display: none; }  /* legacy "vai" divider — no longer needed */

.prop-path-includes {
  font-size: 13px;
  color: var(--c-ink-soft);
  margin-bottom: 14px;
  font-style: italic;
}
.prop-path-featured .prop-path-includes { color: rgba(250, 247, 242, 0.6); }

.prop-path-list {
  list-style: none;
  margin-bottom: 28px;
  flex: 1;
  position: relative; z-index: 1;
}
.prop-path-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink);
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
}
.prop-path-featured .prop-path-list li {
  color: rgba(250, 247, 242, 0.9);
  border-bottom-color: rgba(255,255,255,0.08);
}
.prop-path-list li:last-child { border-bottom: 0; }
.prop-path-list strong {
  color: var(--c-ink);
  font-weight: 700;
}
.prop-path-featured .prop-path-list strong { color: var(--c-paper); }
.prop-path-list a {
  color: var(--c-red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prop-path-when {
  font-size: 13px;
  line-height: 1.55;
  padding: 16px 18px;
  background: rgba(158, 27, 50, 0.06);
  border-radius: 4px;
  border-left: 3px solid var(--c-red);
  position: relative; z-index: 1;
}
.prop-path-featured .prop-path-when {
  background: rgba(158, 27, 50, 0.18);
  color: var(--c-cream);
}
.prop-path-when strong { color: var(--c-ink); font-weight: 600; }
.prop-path-featured .prop-path-when strong { color: var(--c-paper); }

/* Comparison table for paths */
.prop-paths-compare-accordion {
  display: block;
  margin-top: 80px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.25s;
}
.prop-paths-compare-accordion[open] { box-shadow: 0 12px 32px rgba(0,0,0,0.05); }
.prop-paths-compare-accordion > .prop-addons-summary { padding: 24px 32px; }
.prop-paths-compare-accordion .prop-paths-compare-eyebrow { margin: 0 0 6px; }

.prop-paths-compare {
  border-top: 1px solid var(--c-line);
  padding: 28px 32px 32px;
  background: var(--c-paper);
}
.prop-paths-compare-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 20px;
}
.prop-paths-compare-scroll {
  overflow-x: auto;
}
.prop-table .prop-table-sub {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 4px;
}
.prop-table th.prop-table-featured .prop-table-sub { color: rgba(255,255,255,0.85); }

/* =====================================================
   ADD-ONS CATALOGUE
   ===================================================== */
.prop-addons { background: var(--c-paper); border-top: 1px solid var(--c-line); }

/* Accordion shell */
.prop-addons-accordion {
  display: block;
  margin-top: 40px;
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-paper);
  overflow: hidden;
  transition: box-shadow 0.25s;
}
.prop-addons-accordion[open] { box-shadow: 0 12px 32px rgba(0,0,0,0.05); }

/* Summary (clickable header) */
.prop-addons-summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 36px;
  user-select: none;
}
.prop-addons-summary::-webkit-details-marker { display: none; }
.prop-addons-summary::marker { content: ''; }
.prop-addons-summary:hover { background: var(--c-cream); }
.prop-addons-summary-text { min-width: 0; }
.prop-addons-summary-text .section-eyebrow { margin: 0 0 6px; }
.prop-addons-summary-text .section-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.prop-addons-summary-text .prop-section-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0 0 10px;
}
.prop-addons-summary-hint {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-red);
  margin: 0;
}
.prop-addons-summary-icon {
  font-size: 22px;
  color: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-cream);
  transition: transform 0.25s, background 0.2s;
  flex-shrink: 0;
}
.prop-addons-accordion[open] .prop-addons-summary-icon {
  transform: rotate(180deg);
  background: var(--c-amber);
  border-color: var(--c-amber);
}

/* Inside the accordion: the grid sits below the summary, padded */
.prop-addons-accordion .prop-addons-grid {
  border: 0;
  border-top: 1px solid var(--c-line);
  border-radius: 0;
  margin: 0;
}

.prop-addons-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;  /* equal-height rows so cards line up visually */
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  margin-top: 56px;
}
.prop-addon {
  background: var(--c-paper);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.25s;
}
.prop-addon:hover { background: var(--c-cream); }
.prop-addon-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.prop-addon-name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.prop-addon-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  flex: 1;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.prop-addon-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.prop-addon-from {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.prop-addon-from .prop-price-currency {
  font-size: 0.7em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-right: 2px;
  vertical-align: 0.32em;
}
.prop-addon-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: 4px 10px;
  background: var(--c-cream);
  border-radius: 100px;
}
.prop-addon-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-red);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.prop-addon-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.prop-addon-featured {
  background: linear-gradient(180deg, var(--c-paper) 0%, #fff7ec 100%);
  box-shadow: inset 0 0 0 1px var(--c-amber), 0 1px 0 var(--c-amber);
  position: relative;
}
.prop-addon-featured::before {
  content: "★ " attr(data-badge-lv);
  display: none;
}
.prop-addon-featured .prop-addon-icon {
  background: var(--c-amber);
  border-color: var(--c-amber);
}
.prop-addon-note {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px dashed var(--c-line);
  padding: 3px 8px;
  border-radius: 100px;
  margin-top: 6px;
  text-transform: none;
}
.prop-addon-meta { flex-wrap: wrap; }

/* =====================================================
   PATH VALUE PILL — "Path B includes ~$X" / "Path A grows"
   ===================================================== */
.prop-path-value-pill {
  flex-basis: 100%;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--c-amber);
  color: var(--c-ink);
  width: fit-content;
}
.prop-path-value-pill::before {
  content: "★";
  font-size: 13px;
  line-height: 1;
}
.prop-path-value-pill-light {
  background: transparent;
  color: var(--c-paper);
  border: 1px solid rgba(250, 247, 242, 0.4);
}
.prop-path-value-pill-light::before { content: "↗"; }

/* Bundle hint paragraph between the price and the bullet list */
.prop-path-bundle {
  background: rgba(247, 170, 73, 0.10);
  border-left: 3px solid var(--c-amber);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-paper);
  margin: 0 0 18px;
  position: relative; z-index: 1;
}
.prop-path-bundle strong { color: var(--c-amber); font-weight: 700; }

/* =====================================================
   PATH PRICE — monthly split + accordion
   ===================================================== */
.prop-path-price { flex-wrap: wrap; row-gap: 6px; }
.prop-price-or {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 6px;
}
.prop-path-featured .prop-price-or { color: rgba(250, 247, 242, 0.55); }
/* .prop-price-monthly + .prop-price-monthly-suffix are now defined in the
   path-card section above (large serif, primary visual weight). */

/* =====================================================
   COST CALCULATOR
   ===================================================== */
.prop-calc { background: var(--c-cream); border-top: 1px solid var(--c-line); }
.prop-calc-widget {
  margin-top: 48px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  padding: 36px 40px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
  position: relative;
}
.prop-calc-panel { display: none; }
.prop-calc-panel.is-active { display: block; animation: prop-calc-fade 0.32s ease; }
@keyframes prop-calc-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.prop-calc-step-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-red); margin: 0 0 4px;
}
.prop-calc-step-title {
  font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--c-ink);
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.prop-calc-step-help { font-size: 14px; color: var(--c-ink-soft); margin: 0 0 24px; line-height: 1.55; }

.prop-calc-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
.prop-calc-path {
  position: relative;
  display: block;
  background: var(--c-paper);
  border-color: var(--c-line);
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  padding: 24px;
  cursor: pointer;
}
.prop-calc-path input { position: absolute; opacity: 0; pointer-events: none; }
.prop-calc-path:hover { border-color: var(--c-ink-soft); }
.prop-calc-path.is-checked {
  border-color: var(--c-red);
  box-shadow: 0 0 0 4px rgba(158, 27, 50, 0.10);
}
.prop-calc-path-featured {
  background: linear-gradient(180deg, #2a1d10 0%, #1a0f06 100%);
  border-color: #2a1d10;
  color: var(--c-paper);
}
.prop-calc-path-featured:hover { border-color: var(--c-amber); }
.prop-calc-path-featured.is-checked {
  border-color: var(--c-amber);
  box-shadow: 0 0 0 4px rgba(247, 170, 73, 0.18);
}
.prop-calc-path-badge {
  position: absolute;
  top: -10px; right: 16px;
  background: var(--c-amber);
  color: var(--c-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
}
.prop-calc-path-body { display: flex; flex-direction: column; gap: 8px; }
.prop-calc-path-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.prop-calc-path-name {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
}
.prop-calc-path-featured .prop-calc-path-name { color: var(--c-paper); }
.prop-calc-path-price {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  margin-left: auto;
  white-space: nowrap;
}
.prop-calc-path-featured .prop-calc-path-price { color: var(--c-amber); }
.prop-calc-path-price .prop-price-currency {
  font-family: var(--sans);
  font-size: 0.55em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.42em;
  color: inherit;
  margin-right: 3px;
}
.prop-calc-path-price-suffix {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  margin-left: 4px;
}
.prop-calc-path-featured .prop-calc-path-price-suffix { color: rgba(250, 247, 242, 0.65); }
.prop-calc-path-price-once {
  font-size: 12px;
  font-weight: 500;
  color: var(--c-ink-soft);
  letter-spacing: 0.02em;
  flex-basis: 100%;
  text-align: right;
  margin-top: 2px;
}
.prop-calc-path-featured .prop-calc-path-price-once { color: rgba(250, 247, 242, 0.7); }
.prop-calc-path-desc { font-size: 13.5px; line-height: 1.55; color: var(--c-ink-soft); margin: 0; }
.prop-calc-path-featured .prop-calc-path-desc { color: rgba(250, 247, 242, 0.78); }
.prop-calc-pick {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red);
  opacity: 0;
  transition: opacity 0.2s;
}
.prop-calc-path-featured .prop-calc-pick { color: var(--c-amber); }
.prop-calc-path.is-checked .prop-calc-pick { opacity: 1; }

.prop-calc-addons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.prop-calc-addon {
  display: block;
  background: var(--c-paper);
  border-color: var(--c-line);
  border-width: 2px;
  border-style: solid;
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
}
.prop-calc-addon input { position: absolute; opacity: 0; pointer-events: none; }
.prop-calc-addon:hover { border-color: var(--c-ink-soft); }
.prop-calc-addon.is-checked {
  border-color: var(--c-red);
  background: #fff7ec;
}
.prop-calc-addon:focus-within { border-color: var(--c-ink-soft); }

/* Bundled-in-Path-B state (auto-applied when Path B is selected) */
.prop-calc-addon.is-bundled {
  border-color: var(--c-amber);
  background: #fffaf0;
  cursor: default;
}
.prop-calc-addon.is-bundled .prop-calc-addon-price {
  color: var(--c-ink-soft);
  text-decoration: line-through;
  opacity: 0.55;
}
.prop-calc-addon.is-bundled .prop-calc-addon-name {
  color: var(--c-ink);
}
.prop-calc-addon.is-bundled:hover { border-color: var(--c-amber); }
.prop-calc-addon.is-bundled:focus-within { border-color: var(--c-amber); }

/* Bundled indicator: small inline pill in the addon name row.
   Hidden by default — only revealed when the parent card is `.is-bundled`
   (i.e. Path B is selected and this addon is included). */
.prop-calc-addon-bundled-badge-inline {
  display: none;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-amber);
  background: var(--c-paper);
  padding: 2px 6px;
  border-radius: 100px;
  border: 1px solid var(--c-amber);
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.prop-calc-addon.is-bundled .prop-calc-addon-bundled-badge-inline {
  display: inline-block;
}
.prop-calc-addon-body { display: grid; grid-template-columns: 32px 1fr auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.prop-calc-addon-icon { font-size: 20px; line-height: 1; grid-row: 1 / span 2; align-self: center; }
.prop-calc-addon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prop-calc-addon-name { display: block; font-weight: 700; color: var(--c-ink); font-size: 14px; line-height: 1.25; }
.prop-calc-addon-desc { display: block; font-size: 11.5px; color: var(--c-ink-soft); line-height: 1.4; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; }
.prop-calc-addon-price {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-red);
  white-space: nowrap;
  grid-row: 1 / span 2;
  align-self: center;
}
.prop-calc-addon-price .prop-price-currency {
  font-size: 0.7em;
  vertical-align: 0.32em;
  margin-right: 1px;
}

.prop-calc-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
  flex-wrap: wrap;
}

/* Reset ("Start over") moved into the step-3 eyebrow as a small inline link
   — see `.prop-calc-reset-inline` below. The old button-style reset is kept
   here as a fallback in case a stale markup still references it. */
.prop-calc-reset {
  font-size: 12.5px;
  padding: 8px 14px;
  letter-spacing: 0.02em;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px dashed var(--c-line);
  border-radius: 100px;
  margin-left: auto;
}
.prop-calc-reset:hover {
  color: var(--c-red);
  border-color: var(--c-red);
  background: rgba(164, 52, 58, 0.04);
}
.prop-calc-reset:active { transform: scale(0.98); }

.prop-calc-summary {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  padding: 24px 28px;
  margin-bottom: 24px;
}
.prop-calc-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: 14px;
  color: var(--c-ink);
}
.prop-calc-summary-row:last-child { border-bottom: 0; }
.prop-calc-summary-base { font-weight: 700; border-bottom-style: solid; }
.prop-calc-summary-label { font-family: var(--serif); }
.prop-calc-summary-amount { font-family: var(--serif); color: var(--c-red); }
.prop-calc-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 16px;
  border-top: 2px solid var(--c-ink);
}
.prop-calc-summary-total-label {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prop-calc-summary-total-amount {
  font-family: var(--serif);
  font-size: 36px;
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: -0.01em;
}
.prop-calc-summary-monthly {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--c-line);
}
.prop-calc-summary-monthly-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 10px;
}
.prop-calc-summary-monthly-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.prop-calc-summary-monthly-rows > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
}
.prop-calc-summary-monthly-rows > div span {
  font-size: 11px;
  color: var(--c-ink-soft);
  letter-spacing: 0.04em;
}
.prop-calc-summary-monthly-rows > div strong {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-ink);
}
.prop-calc-summary-monthly-rows > div.is-recommended {
  background: #fff7ec;
  border-color: var(--c-amber);
}
.prop-calc-summary-monthly-rows > div.is-recommended strong { color: var(--c-red); }
.prop-calc-summary-fineprint {
  font-size: 11.5px;
  color: var(--c-ink-soft);
  margin: 14px 0 0;
  line-height: 1.5;
}

.prop-calc-confirm {
  margin-top: 24px;
  padding: 28px 28px 24px;
  background: linear-gradient(180deg, #ecf6ec 0%, #f5fbf5 100%);
  border: 1px solid #b8d8b8;
  border-radius: 10px;
  font-size: 14px;
  color: #1f4d1f;
  line-height: 1.55;
  text-align: center;
}
.prop-calc-confirm[hidden] { display: none; }
.prop-calc-confirm-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--c-paper);
  border: 2px solid #2a6b2a;
  color: #2a6b2a;
  font-size: 28px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: prop-copied-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes prop-copied-pop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.prop-calc-confirm-headline {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.prop-calc-confirm-body {
  font-size: 14px;
  line-height: 1.55;
  color: #1f4d1f;
  margin: 0 0 18px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.prop-calc-confirm-email {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--c-paper);
  border: 2px solid var(--c-ink);
  border-radius: 100px;
  color: var(--c-ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  transition: background 0.15s, transform 0.15s, border-color 0.15s;
  box-shadow: 0 2px 0 rgba(0,0,0,0.08);
}
.prop-calc-confirm-email:hover {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.prop-calc-confirm-email:active { transform: translateY(0); box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.prop-calc-confirm-email-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.prop-calc-confirm-email-text {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  font-weight: 600;
}
.prop-calc-confirm-email-hint {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-amber);
  padding-left: 10px;
  border-left: 1px solid var(--c-line);
}
.prop-calc-confirm-email:hover .prop-calc-confirm-email-hint {
  color: var(--c-paper);
  border-left-color: rgba(255,255,255,0.25);
}
.prop-calc-confirm-fineprint {
  font-size: 12px;
  color: #4d6b4d;
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}

/* "Copied" state on the Reserve CTA */
.prop-calc-cta.is-copied,
.prop-calc-cta:disabled {
  background: #2a6b2a;
  border-color: #2a6b2a;
  color: var(--c-paper);
  opacity: 1;
  cursor: default;
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}
.prop-calc-cta.is-copied::before {
  content: '✓';
  display: inline-block;
  margin-right: 8px;
  font-weight: 700;
}

/* Payment plan picker (3-column picker on step 3) */
.prop-calc-payment-plan {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
}
.prop-calc-payment-plan[hidden] { display: none; }
.prop-calc-payment-plan-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin: 0 0 12px;
  text-align: center;
}
.prop-calc-payment-plan-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prop-calc-plan-opt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 14px 8px;
  background: var(--c-paper);
  border: 2px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-align: center;
}
.prop-calc-plan-opt:hover {
  border-color: var(--c-ink-soft);
  background: #fafaf6;
}
.prop-calc-plan-opt:active { transform: scale(0.98); }
.prop-calc-plan-opt.is-selected {
  border-color: var(--c-amber);
  background: #fffaf0;
  box-shadow: 0 0 0 3px rgba(200,147,42,0.15);
}
.prop-calc-plan-opt.is-recommended {
  position: relative;
}
.prop-calc-plan-opt.is-recommended::before {
  content: '★';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: var(--c-amber);
  color: var(--c-paper);
  width: 18px; height: 18px;
  border-radius: 50%;  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
}
/* Lump-sum option: a green "SAVE" ribbon to highlight the discount */
.prop-calc-plan-opt.is-savings {
  position: relative;
  border-color: #2a6b2a;
}
.prop-calc-plan-opt.is-savings:hover { border-color: #2a6b2a; }
.prop-calc-plan-opt.is-savings::before {
  content: '−10%';
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%);
  background: #2a6b2a;
  color: var(--c-paper);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 100px;
  white-space: nowrap;
}
.prop-calc-plan-opt.is-savings .prop-plan-amt { color: #2a6b2a; }
.prop-calc-plan-opt.is-savings.is-selected { background: #f0faf0; border-color: #2a6b2a; }
.prop-plan-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-ink);
  letter-spacing: -0.01em;
}
.prop-plan-amt {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--c-red);
}
.prop-calc-plan-opt.is-selected .prop-plan-amt { color: var(--c-red); }

/* Purchase form (name + email) — polished card layout.
   Header → grid → footer with [Back | Reserve] anchored right. */
.prop-calc-form {
  margin-top: 24px;
  padding: 28px 32px 24px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.prop-calc-form[hidden] { display: none; }
.prop-calc-form-header { margin-bottom: 18px; }
.prop-calc-form-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.prop-calc-form-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--c-ink-soft);
  margin: 0;
  max-width: 56ch;
}
.prop-calc-form-intro strong { color: var(--c-red); }
.prop-calc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 14px;
}
.prop-calc-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.prop-calc-form-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.prop-calc-form-field input {
  font-family: inherit;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  color: var(--c-ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-calc-form-field input:focus {
  border-color: var(--c-ink);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.prop-calc-form-field input.prop-calc-form-invalid {
  border-color: var(--c-red);
  background: #fff5f5;
  animation: prop-form-shake 0.35s ease-in-out;
}
@keyframes prop-form-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Form footer: sits at the bottom of the form card.
   Back button left, Reserve button right with a subtle arrow that slides on hover. */
.prop-calc-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--c-line);
}
.prop-calc-prev-block {
  padding: 11px 18px;
  font-size: 13px;
  color: var(--c-ink-soft);
}
.prop-calc-prev-block:hover { color: var(--c-ink); }
.prop-calc-cta-block {
  position: relative;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  justify-content: center;
}
.prop-calc-cta-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
  font-weight: 400;
}
.prop-calc-cta-block:hover .prop-calc-cta-arrow { transform: translateX(3px); }
.prop-calc-cta-block:disabled, .prop-calc-cta-block.is-copied {
  background: #2a6b2a;
  border-color: #2a6b2a;
  color: var(--c-paper);
  opacity: 1;
  cursor: default;
  box-shadow: 0 2px 0 rgba(0,0,0,0.1);
}
.prop-calc-cta.is-submitted { background: #2a6b2a; }

/* Inline reset link — sits in the step eyebrow at top-right of step 3.
   Subtle, so it doesn't compete with the form's primary CTA below. */
.prop-calc-reset-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.prop-calc-reset-inline:hover {
  color: var(--c-red);
  border-color: var(--c-red);
  background: rgba(164, 52, 58, 0.04);
}
.prop-calc-step-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prop-calc-live {
  position: sticky;
  bottom: 16px;
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 100px;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  z-index: 10;
}
.prop-calc-live[hidden] { display: none; }
.prop-calc-live-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 242, 0.65);
}
.prop-calc-live-amount {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-amber);
}
.prop-calc-live-step {
  margin-left: auto;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.6);
}

@media (max-width: 760px) {
  .prop-calc-widget { padding: 24px 18px 28px; }
  .prop-calc-paths { grid-template-columns: 1fr; }
  .prop-calc-addons { grid-template-columns: 1fr; }
  .prop-calc-summary-monthly-rows { grid-template-columns: 1fr; }
  .prop-addons-summary { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px; }
  .prop-addons-summary-text .section-title { font-size: 21px; }
  .prop-addons-summary-icon { width: 36px; height: 36px; font-size: 18px; }
  .prop-calc-form-grid { grid-template-columns: 1fr; }
  .prop-calc-payment-plan-options { grid-template-columns: 1fr; }
  .prop-paths-compare-accordion > .prop-addons-summary { padding: 20px 20px; }
  .prop-paths-compare { padding: 20px 20px 24px; }
  .prop-calc-confirm-email { flex-wrap: wrap; }
  .prop-calc-confirm-email-hint { padding-left: 0; border-left: 0; padding-top: 4px; width: 100%; text-align: center; }
}

/* =====================================================
   VENUE HIRE DEMO — interactive 4-step booking
   ===================================================== */
.prop-venue-demo {
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
}
.venue-demo {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 36px;
  margin-top: 56px;
  position: relative;
}
.venue-demo::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--c-red);
  border-radius: 6px 0 0 6px;
}
.venue-demo-note {
  margin-top: 28px;
  font-size: 13.5px;
  color: var(--c-ink-soft);
  text-align: center;
  font-style: italic;
}
.venue-demo-note a { color: var(--c-red); text-decoration: underline; text-underline-offset: 3px; }
.venue-demo-note a + a { margin-left: 16px; }

/* Step rail */
.venue-demo-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
  margin: 0 0 36px;
  border-bottom: 1px solid var(--c-line);
  position: relative;
}
.venue-demo-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink-soft);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, border-color 0.2s;
  background: transparent;
  border-left: 0; border-right: 0; border-top: 0;
  text-align: left;
}
.venue-demo-step.is-active {
  color: var(--c-red);
  border-bottom-color: var(--c-red);
}
.venue-demo-step.is-done {
  color: var(--c-ink);
}
.venue-demo-step-num {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-size: 14px; font-weight: 700;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  flex-shrink: 0;
}
.venue-demo-step.is-active .venue-demo-step-num {
  background: var(--c-red); color: var(--c-paper); border-color: var(--c-red);
}
.venue-demo-step.is-done .venue-demo-step-num {
  background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink);
}

/* Panels */
.venue-demo-panel {
  display: none;
  animation: vd-fade-in 0.3s ease;
}
.venue-demo-panel.is-active { display: block; }
@keyframes vd-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* STEP 1 — rooms */
.venue-rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.venue-room-card {
  text-align: left;
  background: var(--c-cream);
  border: 1.5px solid var(--c-line);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}
.venue-room-card:hover {
  border-color: var(--c-red);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.venue-room-card.is-selected {
  border-color: var(--c-red);
  box-shadow: 0 0 0 3px rgba(158, 27, 50, 0.15);
}
.venue-room-img {
  height: 110px;
  background: linear-gradient(135deg, #5C1F1F, #8B2C2C);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.venue-room-img-liela   { background: linear-gradient(135deg, #5C1F1F, #8B2C2C); }
.venue-room-img-balt    { background: linear-gradient(135deg, #2A5C5C, #3F8585); }
.venue-room-img-martins { background: linear-gradient(135deg, #7A1F2B, #A4343A); }
.venue-room-img-sapulces{ background: linear-gradient(135deg, #4A3C5C, #6B5878); }
.venue-room-img-kafejnica{ background: linear-gradient(135deg, #8B5C2F, #B8824A); }
/* Subtle room icon — distinguishes from a "missing image" placeholder.
   Each room colour already has a unique gradient; the icon adds character. */
.venue-room-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.18), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,0,0,0.18), transparent 50%);
  z-index: 0;
}
.venue-room-img::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.venue-room-img-liela::after  { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V8l7-5 7 5v13'/><path d='M9 21v-6h6v6'/><path d='M9 12h.01'/><path d='M15 12h.01'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V8l7-5 7 5v13'/><path d='M9 21v-6h6v6'/><path d='M9 12h.01'/><path d='M15 12h.01'/></svg>"); }
.venue-room-img-balt::after   { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V12a6 6 0 0 1 12 0v10'/><path d='M6 12V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8'/><path d='M10 6h4'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 22V12a6 6 0 0 1 12 0v10'/><path d='M6 12V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8'/><path d='M10 6h4'/></svg>"); }
.venue-room-img-martins::after{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V10l7-5 7 5v11'/><path d='M9 21v-5h6v5'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V10l7-5 7 5v11'/><path d='M9 21v-5h6v5'/></svg>"); }
.venue-room-img-sapulces::after{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }
.venue-room-img-kafejnica::after{ -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><path d='M6 1v3'/><path d='M10 1v3'/><path d='M14 1v3'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8h1a4 4 0 0 1 0 8h-1'/><path d='M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z'/><path d='M6 1v3'/><path d='M10 1v3'/><path d='M14 1v3'/></svg>"); }
.venue-room-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.venue-room-body h4 {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.venue-room-meta {
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
}
.venue-room-features {
  list-style: none;
  font-size: 12.5px;
  color: var(--c-ink-soft);
  margin-bottom: 14px;
  flex: 1;
}
.venue-room-features li { padding: 3px 0; }
.venue-room-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--c-line);
}
.venue-room-price-from {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  letter-spacing: 0.1em;
  margin-right: 2px;
}
.venue-room-price-amt {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-red);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.venue-room-price-amt .prop-price-currency {
  font-size: 0.6em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.4em;
  margin-right: 2px;
  font-feature-settings: normal;
}
.venue-room-price-unit {
  font-size: 11px;
  color: var(--c-ink-soft);
  margin-left: 2px;
}

/* STEP 2 — calendar + time */
.venue-cal-wrap { display: flex; flex-direction: column; gap: 24px; }
.venue-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--c-line);
}
.venue-cal-header h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  letter-spacing: -0.015em;
}
.venue-cal-nav {
  width: 36px; height: 36px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  color: var(--c-ink);
  transition: border-color 0.2s, background 0.2s;
}
.venue-cal-nav:hover {
  border-color: var(--c-red);
  color: var(--c-red);
}
.venue-cal-legend {
  display: flex;
  gap: 24px;
  font-size: 12px;
  color: var(--c-ink-soft);
}
.venue-cal-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}
.venue-cal-dot-open { background: var(--c-cream); border: 1px solid var(--c-line); }
.venue-cal-dot-booked { background: rgba(158, 27, 50, 0.5); border: 1px solid var(--c-red); }
.venue-cal-dot-selected { background: var(--c-red); border: 1px solid var(--c-red); }

.venue-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.venue-cal-dow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding: 8px 0;
  text-align: center;
}
.venue-cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-ink);
  padding: 6px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  position: relative;
}
.venue-cal-day:hover:not(:disabled):not(.is-selected) {
  border-color: var(--c-red);
  background: var(--c-paper);
}
.venue-cal-day:disabled,
.venue-cal-day.is-past {
  color: var(--c-ink-soft);
  opacity: 0.45;
  cursor: not-allowed;
}
.venue-cal-day.is-other-month {
  opacity: 0.3;
}
.venue-cal-day.is-booked {
  background: rgba(158, 27, 50, 0.18);
  border-color: rgba(158, 27, 50, 0.4);
  color: var(--c-ink-soft);
  cursor: not-allowed;
}
.venue-cal-day.is-booked::before {
  content: '●';
  font-size: 8px;
  color: var(--c-red);
  position: absolute;
  top: 4px; right: 6px;
}
.venue-cal-day.is-selected {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-paper);
  font-weight: 700;
}
.venue-cal-day .venue-cal-day-num { line-height: 1; }

.venue-time-pick-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 10px;
}
.venue-time-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.venue-time-opt {
  padding: 10px 8px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.venue-time-opt:hover:not(:disabled) {
  border-color: var(--c-red);
}
.venue-time-opt.is-selected {
  background: var(--c-red);
  border-color: var(--c-red);
  color: var(--c-paper);
}
.venue-time-opt:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.venue-time-opt-wide {
  font-size: 13px;
}

/* STEP 3 — form */
.venue-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 28px;
}
.venue-form-field { display: flex; flex-direction: column; gap: 6px; }
.venue-form-field-full { grid-column: span 2; }
.venue-form-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.venue-form-field input,
.venue-form-field select,
.venue-form-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--c-ink);
  background: var(--c-cream);
  transition: border-color 0.2s, background 0.2s;
}
.venue-form-field input:focus,
.venue-form-field select:focus,
.venue-form-field textarea:focus {
  outline: none;
  border-color: var(--c-red);
  background: var(--c-paper);
}
.venue-form-field textarea { resize: vertical; min-height: 76px; }

.venue-summary {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-red);
  border-radius: 6px;
  padding: 20px 24px;
}
.venue-summary-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 12px;
}
.venue-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--c-ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line);
}
.venue-summary-row:last-child { border-bottom: 0; }
.venue-summary-row span:first-child { color: var(--c-ink-soft); }
.venue-summary-total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--c-red);
  border-bottom: 0;
  font-weight: 700;
}
.venue-summary-total span:last-child {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--c-red);
}

/* STEP 4 — deposit */
.venue-pay-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
}
.venue-pay-h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
}
.venue-pay-lead {
  font-size: 14px;
  color: var(--c-ink-soft);
  line-height: 1.55;
  margin-bottom: 24px;
}
.venue-pay-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 14px;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.venue-pay-row-amt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}
.venue-pay-row-amt .prop-price-currency {
  font-size: 0.6em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 0.4em;
  margin-right: 1px;
  font-feature-settings: normal;
}
.venue-pay-total {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 2px solid var(--c-red);
  border-bottom: 0;
  font-weight: 700;
  font-size: 16px;
}
.venue-pay-total .venue-pay-row-amt {
  color: var(--c-red);
  font-size: 20px;
}
.venue-pay-methods { margin-top: 28px; }
.venue-pay-methods-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: 10px;
}
.venue-pay-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.venue-pay-method {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.venue-pay-method:hover { border-color: var(--c-red); }
.venue-pay-method.is-active {
  border-color: var(--c-red);
  background: rgba(158, 27, 50, 0.05);
}
.venue-pay-method input { display: none; }
.venue-pay-btn {
  margin-top: 24px;
  width: 100%;
}
.venue-pay-fine {
  margin-top: 12px;
  font-size: 11px;
  color: var(--c-ink-soft);
  text-align: center;
  font-style: italic;
}
.venue-pay-summary {
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 24px;
}
.venue-pay-summary-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-red);
  margin-bottom: 14px;
}
.venue-pay-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-ink);
  padding: 6px 0;
  border-bottom: 1px solid var(--c-line);
}
.venue-pay-summary-row:last-of-type { border-bottom: 0; }
.venue-pay-summary-row span:first-child { color: var(--c-ink-soft); }

.venue-pay-confirm {
  margin-top: 20px;
  padding: 20px;
  background: rgba(60, 110, 60, 0.08);
  border: 1px solid rgba(60, 110, 60, 0.3);
  border-radius: 6px;
  text-align: center;
}
.venue-pay-confirm-icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  color: white;
  background: rgba(60, 110, 60, 1);
  border-radius: 50%;
}
.venue-pay-confirm-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: 6px;
}
.venue-pay-confirm-sub {
  font-size: 12.5px;
  color: var(--c-ink-soft);
  line-height: 1.5;
}

/* Demo footer (prev/next buttons) */
.venue-demo-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--c-line);
}
.venue-demo-foot .btn { margin: 0; }
.venue-demo-foot .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* =====================================================
   RESPONSIVE — mobile-first adjustments
   ===================================================== */
@media (max-width: 1100px) {
  .prop-paths-grid { grid-template-columns: 1fr; }
  .prop-addons-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-rooms-grid { grid-template-columns: repeat(2, 1fr); }
  .venue-pay-grid { grid-template-columns: 1fr; }
  .venue-form-grid { grid-template-columns: 1fr; }
  .venue-form-field-full { grid-column: span 1; }
  .venue-time-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .prop-lead-strong { font-size: 19px; }
  .prop-lead-soft { font-size: 15.5px; }
  .prop-hero-cta-row { flex-direction: column; align-items: stretch; }
  .prop-hero-cta-row .btn { width: 100%; text-align: center; }
  .prop-path { padding: 36px 28px 32px; }
  .prop-path-name { font-size: 24px; }
  .prop-price-amount { font-size: 36px; }
  .venue-demo { padding: 24px 20px; }
  .venue-demo-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .venue-demo-step {
    padding: 10px 12px;
    font-size: 11px;
  }
  .venue-demo-step-num { width: 24px; height: 24px; font-size: 12px; }
  .venue-demo-step-name { line-height: 1.2; }
  .venue-rooms-grid { grid-template-columns: 1fr; }
  .venue-cal-legend { flex-wrap: wrap; gap: 14px; font-size: 11px; }
  .venue-time-grid { grid-template-columns: repeat(3, 1fr); }
  .venue-demo-foot { flex-wrap: wrap; }
  .venue-demo-foot .btn { flex: 1; min-width: 0; }
  .venue-pay-method-grid { grid-template-columns: 1fr; }
  .prop-addons-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .prop-hero-cta-row .btn { font-size: 13px; padding: 12px 16px; }
  .venue-demo { padding: 18px 14px; }
  .venue-demo-steps { grid-template-columns: 1fr; }
  .venue-cal-grid { gap: 4px; }
  .venue-cal-day { font-size: 12px; }
  .venue-time-grid { grid-template-columns: repeat(2, 1fr); }
  .prop-path { padding: 28px 20px; }
  .prop-path-name { font-size: 21px; }
  .venue-room-body { padding: 14px 16px 16px; }
}