/* ============================================
   TocynTicket v5 — Design System
   Flat, modern, Welsh-warm
   ============================================ */

:root {
  /* Backgrounds */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-warm: #F4E9D6;
  --surface-green-soft: #E8F5ED;
  --surface-red-soft: #FDECEE;

  /* Text */
  --text: #0E1A15;
  --text-muted: #5A6B63;
  --text-inverse: #FFFFFF;

  /* Brand */
  --green: #00AB39;
  --green-dark: #008A2E;
  --red: #E63946;
  --red-dark: #C82A37;

  /* Borders */
  --border: #ECEAE3;
  --border-strong: #D8D4C7;

  /* Shadows (subtle) */
  --shadow-sm: 0 1px 2px rgba(14, 26, 21, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 26, 21, 0.06);
  --shadow-lg: 0 12px 32px rgba(14, 26, 21, 0.08);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --container: 1440px;
  --section-pad: 120px;
  --section-pad-mobile: 80px;
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 17px;
}

/* ============ Layout ============ */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

section {
  padding: var(--section-pad) 0;
}

@media (max-width: 768px) {
  section { padding: var(--section-pad-mobile) 0; }
  body { font-size: 16px; }
}

/* ============ Typography ============ */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
}

h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 16px;
}

h3 {
  font-size: 22px;
  margin-bottom: 8px;
}

p {
  color: var(--text-muted);
  font-size: 17px;
}

.lead {
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 640px;
}

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 16px;
}

/* Brand wordmark colouring */
.tocyn { color: var(--green); }
.ticket { color: var(--red); }

a {
  color: var(--green-dark);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ============ Buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--green);
  color: white;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn-lg {
  padding: 18px 32px;
  font-size: 17px;
}

/* ============ Nav ============ */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: white;
}
.nav-logo:hover { text-decoration: none; }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
  list-style: none;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  font-size: 15px;
}
.nav-links a:hover { color: white; text-decoration: none; }

.nav-cta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: white;
}

.nav-cta .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.25);
}
.nav-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 900px) {
  .nav-links,
  .nav-cta .btn-secondary { display: none; }
  .nav-burger { display: block; }
}

.nav-mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--text);
  padding: 32px 24px;
  flex-direction: column;
  gap: 20px;
  z-index: 99;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  color: white;
  font-size: 20px;
  font-weight: 500;
}

/* ============ Hero ============ */

.hero {
  padding: 80px 0 100px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}

.hero-ctas {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.hero-trust {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
}

.hero-visual {
  position: relative;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { padding: 48px 0 64px; }
}

/* ============ Stat Strip ============ */

.stat-strip {
  background: var(--surface-warm);
  padding: 48px 0;
}

.stat-strip-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}

.stat-big {
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}

.stat-label {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .stat-strip-inner { grid-template-columns: 1fr; gap: 32px; }
  .stat-big { font-size: 44px; }
}

/* ============ Section Headers ============ */

.section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

/* ============ Step Cards ============ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-green-soft);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  color: var(--green-dark);
}

.step-number {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

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

/* ============ Feature Cards ============ */

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.feature-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.feature-card .step-icon { margin-bottom: 16px; }

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

/* ============ Pricing Comparison ============ */

.comparison-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  font-size: 15px;
}
.comparison-row:last-child { border-bottom: none; }

.comparison-row.header {
  background: var(--bg);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.comparison-row .us {
  color: var(--green-dark);
  font-weight: 600;
}

.tick { color: var(--green); font-weight: 700; }
.cross { color: var(--red); opacity: 0.7; font-weight: 700; }

@media (max-width: 768px) {
  .comparison-row { grid-template-columns: 1.2fr 1fr; font-size: 14px; }
  .comparison-row .col-them { display: none; }
  .comparison-row .col-us { display: block; }
}

/* ============ Testimonial ============ */

.testimonial {
  background: var(--surface-warm);
  border-radius: var(--radius-xl);
  padding: 64px;
  max-width: 900px;
  margin: 0 auto;
}

.testimonial blockquote {
  font-size: 26px;
  line-height: 1.4;
  color: var(--text);
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-green-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--green-dark);
  font-size: 20px;
}

.testimonial-name {
  font-weight: 600;
  color: var(--text);
}

.testimonial-role {
  font-size: 14px;
  color: var(--text-muted);
}

@media (max-width: 768px) {
  .testimonial { padding: 40px 28px; }
  .testimonial blockquote { font-size: 20px; }
}

/* ============ Final CTA ============ */

.final-cta {
  background: var(--surface-green-soft);
  border-radius: var(--radius-xl);
  padding: 80px 48px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.final-cta .urgent {
  display: inline-block;
  background: var(--red);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .final-cta { padding: 48px 28px; }
}

/* ============ Footer ============ */

.footer {
  background: var(--text);
  color: var(--text-inverse);
  padding: 80px 0 32px;
  margin-top: 120px;
}

.footer a { color: rgba(255,255,255,0.7); }
.footer a:hover { color: white; text-decoration: none; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer h4 {
  color: white;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer ul { list-style: none; }
.footer li { margin-bottom: 10px; font-size: 15px; }

.footer-brand p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  margin-top: 12px;
  max-width: 320px;
}

.footer-meta {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  flex-wrap: wrap;
  gap: 12px;
}

.footer-welsh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-meta { flex-direction: column; text-align: center; }
}

/* ============ Utility ============ */

.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }
.mb-8 { margin-bottom: 32px; }
/* ============================================
   Phase 1.5 — Append to end of styles.css
   ============================================ */

/* ============ Phone Mockup Frame (new hero) ============ */

.phone-frame {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
  background: #0E1A15;
  border-radius: 40px;
  padding: 12px;
  box-shadow:
    0 1px 2px rgba(14, 26, 21, 0.06),
    0 12px 40px rgba(14, 26, 21, 0.12),
    0 40px 80px rgba(14, 26, 21, 0.08);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
}

.phone-frame:hover {
  transform: rotate(0deg) translateY(-4px);
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 22px;
  background: #0E1A15;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}

.phone-screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
  .phone-frame {
    max-width: 260px;
    transform: rotate(0deg);
  }
  .phone-frame:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 480px) {
  .phone-frame {
    max-width: 220px;
  }
}

/* ============ Testimonial Spacing Fix ============ */

/* Section wrapper variant with tighter vertical padding */
.section-tight {
  padding-top: 72px;
  padding-bottom: 72px;
}

@media (max-width: 768px) {
  .section-tight {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

/* Override default testimonial padding — was 64px, now 48px */
.testimonial {
  padding: 48px 56px;
}

@media (max-width: 768px) {
  .testimonial {
    padding: 36px 28px;
  }
}

/* ============ Welsh Flag Icon (footer) ============ */

.dragon-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 2px;
  transform: translateY(-1px);
  flex-shrink: 0;
}

/* ============ Footer Logo ============ */

.footer-logo {
  display: block;
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}
/* ============================================
   Phase 2 — Append to end of styles.css
   Pricing page components
   ============================================ */

/* ============ Page Hero (shorter than homepage hero) ============ */

.page-hero {
  padding: 80px 0 48px;
  text-align: center;
}

.page-hero h1 {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.page-hero .lead {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .page-hero { padding: 48px 0 24px; }
}

/* ============ Calculator ============ */

.calculator {
  max-width: 960px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  box-shadow: var(--shadow-sm);
}

.calc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 500;
}

.calc-label .calc-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}

.calc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  background: var(--green);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 171, 57, 0.3);
  transition: transform 0.15s;
}
.calc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.calc-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--green);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 171, 57, 0.3);
}

.calc-range {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.calc-headline {
  background: var(--surface-green-soft);
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  margin-bottom: 32px;
}

.calc-savings-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.calc-savings-amount {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.calc-savings-sub {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-muted);
}

/* Disclaimer shown when ticket price is below £5 (edge case honesty) */
.calc-disclaimer {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #FFF9E6;
  border: 1px solid #F0DF9F;
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: #6B5410;
}

.calc-disclaimer svg {
  color: #B8860B;
  flex-shrink: 0;
  margin-top: 2px;
}

.calc-disclaimer[hidden] {
  display: none;
}

.calc-table {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.calc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 20px 24px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.15s;
}

.calc-row:last-child { border-bottom: none; }

.calc-row-us {
  background: var(--surface-green-soft);
  font-weight: 600;
}

.calc-row-us .calc-total {
  color: var(--green-dark);
  font-weight: 800;
}

.calc-platform {
  font-size: 16px;
  color: var(--text);
}

.calc-formula {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

/* Breakdown for the TocynTicket row — shows Platform + Stripe inline */
.calc-breakdown {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.calc-breakdown-sep {
  margin: 0 8px;
  color: var(--text-muted);
  opacity: 0.5;
}

.calc-total {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.calc-charity {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding: 20px 24px;
  background: var(--surface-red-soft);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 16px;
}

.calc-charity svg {
  color: var(--red);
  flex-shrink: 0;
}

.calc-footnote {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 24px;
  line-height: 1.5;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .calculator { padding: 28px 20px; border-radius: var(--radius-lg); }
  .calc-inputs { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .calc-label .calc-value { font-size: 24px; }
  .calc-savings-amount { font-size: 48px; }
  .calc-headline { padding: 24px 16px; }
  .calc-row { padding: 16px 18px; }
  .calc-total { font-size: 18px; }
  .calc-platform { font-size: 15px; }
  .calc-formula { font-size: 12px; }
}

/* ============ Full Comparison Table ============ */

.full-comparison {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.full-comparison-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  padding: 18px 24px;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.full-comparison-row:last-child { border-bottom: none; }

.full-comparison-header {
  background: var(--bg);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.full-comparison-us {
  background: var(--surface-green-soft);
}

.full-comparison-us .us { font-weight: 600; color: var(--green-dark); }

.full-comparison .platform-name {
  font-weight: 500;
  color: var(--text);
}

@media (max-width: 900px) {
  .full-comparison-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 16px 18px;
  }
  .full-comparison-row > div {
    font-size: 13px;
  }
  .full-comparison-header {
    display: none;
  }
  .full-comparison-row > div:first-child {
    grid-column: 1 / -1;
    font-size: 15px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .full-comparison-us > div:first-child {
    border-bottom-color: rgba(0, 171, 57, 0.2);
  }
  /* Label each cell with its column name on mobile */
  .full-comparison-row > div:nth-child(2)::before { content: 'Fee: '; color: var(--text-muted); font-weight: 400; }
  .full-comparison-row > div:nth-child(3)::before { content: 'Monthly: '; color: var(--text-muted); font-weight: 400; }
  .full-comparison-row > div:nth-child(4)::before { content: 'Contract: '; color: var(--text-muted); font-weight: 400; }
  .full-comparison-row > div:nth-child(5)::before { content: 'Charity: '; color: var(--text-muted); font-weight: 400; }
  .full-comparison-row > div:nth-child(6)::before { content: 'Payout: '; color: var(--text-muted); font-weight: 400; }
}

/* ============ Charity Impact Grid ============ */

.charity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

.charity-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}

.charity-number {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--red);
  line-height: 1;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.charity-label {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 768px) {
  .charity-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .charity-card { padding: 24px 16px; }
  .charity-number { font-size: 32px; }
}

/* ============ Early Adopter Module ============ */

.early-adopter {
  max-width: 760px;
  margin: 0 auto;
  background: var(--text);
  color: white;
  border-radius: var(--radius-xl);
  padding: 64px 48px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.early-adopter h2 {
  color: white;
  margin-bottom: 0;
}

.early-adopter .lead {
  color: rgba(255, 255, 255, 0.75);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.early-adopter-badge {
  display: inline-block;
  background: var(--red);
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.spots-remaining {
  display: inline-block;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.spots-number {
  font-size: 32px;
  font-weight: 800;
  color: var(--green);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .early-adopter { padding: 40px 24px; }
  .spots-remaining { font-size: 14px; padding: 12px 20px; }
  .spots-number { font-size: 26px; }
}

/* ============ FAQ ============ */

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}

.faq-item[open] {
  border-color: var(--border-strong);
  background: white;
}

.faq-item summary {
  padding: 20px 24px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 48px;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform 0.2s;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: '−';
}

.faq-item .faq-body {
  padding: 0 24px 24px 24px;
}

.faq-item .faq-body p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .faq-item summary { padding: 16px 20px; padding-right: 40px; font-size: 15px; }
  .faq-item summary::after { right: 16px; }
  .faq-item .faq-body { padding: 0 20px 20px 20px; }
}

/* ============ Phase G1 — Global Width Fix ============ */

/* Narrow container for prose-heavy sections (used in about/contact) */
.container-narrow {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 64px);
}

/* Keep hero text column focused — stops H1 stretching too wide on desktop */
.hero-grid > div:first-child {
  max-width: 560px;
}

/* On very wide screens, give the hero grid more breathing room */
@media (min-width: 1200px) {
  .hero-grid {
    gap: 96px;
  }
}
/* ============================================
   Phase G2 — Themed Heroes + Animations
   Append to end of styles.css
   ============================================ */

/* ============ THEMED HERO SYSTEM ============
   How this works:
   - .themed-hero is a wrapper that replaces the top of the page
   - Modifier classes (.themed-hero-green, .themed-hero-cream) set the palette
   - The diagonal slash is an SVG at the bottom edge
   - Nav becomes transparent over themed heroes, solid on scroll
   ============================================ */

.themed-hero {
  position: relative;
  padding-top: 120px;
  padding-bottom: 160px;
  overflow: hidden;
  isolation: isolate;
}

.themed-hero .container {
  position: relative;
  z-index: 2;
}

/* The diagonal slash at the bottom — SVG for crisp edges */
.themed-hero-slash {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;  /* -1 avoids a hairline gap on some browsers */
  width: 100%;
  height: 80px;
  z-index: 1;
  pointer-events: none;
}

.themed-hero-slash svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- GREEN THEME (homepage) ---- */
.themed-hero-green {
  background: var(--green);
  color: white;
}

.themed-hero-green h1,
.themed-hero-green h2,
.themed-hero-green h3 {
  color: white;
}

.themed-hero-green .lead,
.themed-hero-green .hero-trust,
.themed-hero-green p {
  color: rgba(255, 255, 255, 0.88);
}

.themed-hero-green .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

/* Primary CTA on green — invert to white bg, green text */
.themed-hero-green .btn-primary {
  background: white;
  color: var(--green-dark);
}
.themed-hero-green .btn-primary:hover {
  background: #F4FDF7;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Secondary CTA on green — outlined white */
.themed-hero-green .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.35);
}
.themed-hero-green .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Phone frame shadow adjustment on green — darker shadow reads better */
.themed-hero-green .phone-frame {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.18),
    0 48px 96px rgba(0, 0, 0, 0.12);
}

/* ---- CREAM THEME (pricing) ---- */
.themed-hero-cream {
  background: var(--surface-warm);
  color: var(--text);
}
/* Inherits default text/heading colours — no overrides needed */



/* ============ ANIMATIONS ============ */

/* Scroll fade-up: elements start invisible/down, animate in on intersection */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delay variants for adjacent fade-ups */
.fade-up.delay-1 { transition-delay: 0.08s; }
.fade-up.delay-2 { transition-delay: 0.16s; }
.fade-up.delay-3 { transition-delay: 0.24s; }
.fade-up.delay-4 { transition-delay: 0.32s; }

/* Mouse parallax on the phone mockup — wrapper translates with mouse */
.parallax-target {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fade-up {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .parallax-target {
    transform: none !important;
    transition: none;
  }
  .phone-frame,
  .phone-frame:hover {
    transform: rotate(0deg) !important;
    transition: none;
  }
}

/* ============ THEMED PADDING ADJUSTMENTS ============ */

/* The themed-hero takes the place of the original .hero section.
   Because it has bigger bottom padding (for the slash) we don't need
   the section padding that follows. Helper class to remove it: */
.section-after-themed-hero {
  padding-top: 48px;
}

@media (max-width: 768px) {
  .themed-hero {
    padding-top: 80px;
    padding-bottom: 120px;
  }
  .themed-hero-slash {
    height: 48px;
  }
  .section-after-themed-hero {
    padding-top: 32px;
  }
}


/* ============================================
   Phase 3 — For Promoters + For Venues
   Append to end of styles.css
   ============================================ */


/* ============ NEW THEMES ============ */

/* Forest green — For Promoters */
.themed-hero-forest {
  background: #0A4D2A;
  color: white;
}
.themed-hero-forest h1,
.themed-hero-forest h2,
.themed-hero-forest h3 {
  color: white;
}
.themed-hero-forest .lead,
.themed-hero-forest .hero-trust,
.themed-hero-forest p {
  color: rgba(255, 255, 255, 0.85);
}
.themed-hero-forest .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.themed-hero-forest .btn-primary {
  background: white;
  color: #0A4D2A;
}
.themed-hero-forest .btn-primary:hover {
  background: #F4FDF7;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.themed-hero-forest .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}
.themed-hero-forest .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}

/* Deep navy-green — For Venues */
.themed-hero-navy {
  background: #0E2E2E;
  color: white;
}
.themed-hero-navy h1,
.themed-hero-navy h2,
.themed-hero-navy h3 {
  color: white;
}
.themed-hero-navy .lead,
.themed-hero-navy .hero-trust,
.themed-hero-navy p {
  color: rgba(255, 255, 255, 0.85);
}
.themed-hero-navy .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}
.themed-hero-navy .btn-primary {
  background: var(--green);
  color: white;
}
.themed-hero-navy .btn-primary:hover {
  background: #00C542;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.themed-hero-navy .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.4);
}
.themed-hero-navy .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: white;
}


/* ============ PROMISE GRID (three big numbers) ============ */

.promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.promise-item {
  text-align: center;
}

.promise-number {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--green);
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}

.promise-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.promise-item p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .promise-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .promise-number {
    font-size: 56px;
  }
}


/* ============ BENEFITS GRID (feature cards) ============ */

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.benefit-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.benefit-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.benefit-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--surface-green-soft);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.benefit-card h3 {
  font-size: 19px;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.benefit-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .benefits-grid {
    grid-template-columns: 1fr;
  }
  .benefit-card {
    padding: 24px;
  }
}


/* ============ MONEY SHOT (illustrative calculation) ============ */

.money-shot {
  max-width: 1080px;
  margin: 0 auto;
}

.money-shot-inner {
  background: var(--text);
  color: white;
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  box-shadow: var(--shadow-lg);
}

.money-shot-inner h2 {
  color: white;
  letter-spacing: -0.02em;
}

.money-shot-inner .lead {
  color: rgba(255, 255, 255, 0.75);
  max-width: none;
}

.money-shot-inner .eyebrow {
  color: var(--green);
}

.money-shot-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.money-shot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.money-shot-row:last-child { border-bottom: none; }

.money-shot-row-savings {
  background: rgba(0, 171, 57, 0.12);
  border-top: 1px solid rgba(0, 171, 57, 0.35);
}

.money-shot-platform {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.money-shot-detail {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.money-shot-amount {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.money-shot-amount-us {
  color: var(--green);
}

.money-shot-footnote {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 32px;
  line-height: 1.6;
}

.money-shot-inner .btn-secondary {
  background: transparent;
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  padding: 14px 28px;
  font-size: 16px;
  margin-top: 32px;
}
.money-shot-inner .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: white;
}

@media (max-width: 768px) {
  .money-shot-inner { padding: 32px 24px; border-radius: var(--radius-lg); }
  .money-shot-row { padding: 16px 18px; gap: 12px; flex-direction: column; align-items: flex-start; }
  .money-shot-amount { font-size: 22px; align-self: flex-end; }
}


/* ============ VENUE BEFORE/AFTER (side by side) ============ */

.venue-before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.before-card,
.after-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
}

.before-card {
  border-color: #F0DF9F;
  background: #FFFDF5;
}

.after-card {
  border-color: rgba(0, 171, 57, 0.25);
  background: var(--surface-green-soft);
}

.before-after-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}

.before-card .before-after-label {
  color: #B8860B;
}

.after-card .before-after-label {
  color: var(--green-dark);
}

.problem-list,
.solution-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.problem-list li,
.solution-list li {
  font-size: 15px;
  line-height: 1.5;
  padding: 10px 0 10px 28px;
  position: relative;
  color: var(--text);
}

.problem-list li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: 10px;
  color: #B8860B;
  font-weight: 700;
}

.solution-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 10px;
  color: var(--green);
  font-weight: 700;
}

@media (max-width: 900px) {
  .venue-before-after {
    grid-template-columns: 1fr;
  }
}


/* ============ VENUE MODES (three cards with larger icons) ============ */

.venue-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.venue-mode-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  min-height: 320px;
  display: flex;
  flex-direction: column;
}

.venue-mode-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.venue-mode-icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-md);
  background: var(--surface-green-soft);
  color: var(--green-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.venue-mode-icon svg {
  width: 36px;
  height: 36px;
}

.venue-mode-card h3 {
  font-size: 24px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.venue-mode-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .venue-modes {
    grid-template-columns: 1fr;
  }
}
/* ============================================
   Phase 4 — Features page
   Append to end of styles.css
   ============================================ */


/* ============ NEW THEME: charcoal-green ============ */

.themed-hero-charcoal {
  background: #102922;
  color: white;
}
.themed-hero-charcoal h1,
.themed-hero-charcoal h2,
.themed-hero-charcoal h3 {
  color: white;
}
.themed-hero-charcoal .lead,
.themed-hero-charcoal .hero-trust,
.themed-hero-charcoal p {
  color: rgba(255, 255, 255, 0.85);
}
.themed-hero-charcoal .eyebrow {
  color: rgba(255, 255, 255, 0.85);
}


/* ============ BROWSER MOCKUP FRAME ============
   Wraps a screenshot in a subtle macOS-style window chrome
   Used for desktop feature screenshots */

.browser-frame {
  background: #ECEAE3;
  border-radius: var(--radius-lg);
  padding: 0;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.08),
    0 24px 64px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
}

.browser-frame-chrome {
  background: #ECEAE3;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.browser-frame-dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.browser-frame-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}
.browser-frame-dots span:nth-child(1) { background: #FF5F56; }
.browser-frame-dots span:nth-child(2) { background: #FFBD2E; }
.browser-frame-dots span:nth-child(3) { background: #27C93F; }

.browser-frame-url {
  flex: 1;
  margin-left: 20px;
  background: white;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-frame-img {
  display: block;
  width: 100%;
  height: auto;
  background: white;
}

/* Placeholder state — shown when screenshot isn't ready yet */
.browser-frame-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: repeating-linear-gradient(
    45deg,
    #F7F5EE,
    #F7F5EE 10px,
    #FAFAF7 10px,
    #FAFAF7 20px
  );
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 32px;
  text-align: center;
}

.browser-frame-placeholder::before {
  content: "Screenshot incoming";
  display: block;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* ============ FEATURE SHOWCASE ============
   Alternating left/right layout for each feature */

.feature-category {
  margin: 96px auto 0;
  max-width: 1240px;
}

.feature-category:first-of-type {
  margin-top: 0;
}

.feature-category-header {
  text-align: center;
  margin-bottom: 64px;
}

.feature-category-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  padding: 6px 14px;
  background: var(--surface-green-soft);
  border-radius: 999px;
  margin-bottom: 16px;
}

.feature-category-title {
  font-size: clamp(28px, 3.5vw, 36px);
  letter-spacing: -0.02em;
  color: var(--text);
}

/* Individual feature row */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.feature-row:last-child {
  margin-bottom: 0;
}

/* Alternating layout — every even row reverses the column order */
.feature-row.flip .feature-row-text {
  order: 2;
}
.feature-row.flip .feature-row-visual {
  order: 1;
}

.feature-row-text {
  max-width: 480px;
}

.feature-row-text .eyebrow {
  color: var(--green-dark);
  margin-bottom: 12px;
}

.feature-row-text h3 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  line-height: 1.2;
}

.feature-row-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 16px;
}

.feature-row-text p:last-child {
  margin-bottom: 0;
}

/* Small bulleted list inside a feature row */
.feature-row-text ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
.feature-row-text ul li {
  font-size: 15px;
  line-height: 1.6;
  padding: 4px 0 4px 24px;
  position: relative;
  color: var(--text);
}
.feature-row-text ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--green);
  font-weight: 700;
}

.feature-row-visual {
  position: relative;
}


/* Phone-sized frame (for the scanner screenshot) */
.phone-frame-compact {
  max-width: 300px;
  margin: 0 auto;
  background: #0E1A15;
  border-radius: 32px;
  padding: 10px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 16px 48px rgba(0, 0, 0, 0.15),
    0 48px 96px rgba(0, 0, 0, 0.08);
}

.phone-frame-compact-screen {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
}

.phone-frame-compact-screen img,
.phone-frame-compact-screen .browser-frame-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phone-frame-compact-screen .browser-frame-placeholder {
  min-height: 100%;
  border-radius: 24px;
}


/* Responsive behaviour */
@media (max-width: 900px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 64px;
  }

  /* On mobile, always show text first, visual second, regardless of .flip */
  .feature-row.flip .feature-row-text { order: 1; }
  .feature-row.flip .feature-row-visual { order: 2; }

  .feature-category {
    margin-top: 64px;
  }

  .feature-category-header {
    margin-bottom: 48px;
  }

  .browser-frame-url { display: none; }
}
/* ============================================
   Phase 4.3 — Full-width feature row variant
   Append to end of styles.css (after Phase 4 block)
   ============================================ */

/* Full-width feature layout — for screenshots with dense detail where
   the zigzag 50-50 split shrinks content to unreadable size.
   Text sits on top (centred, narrow for readability), full-width
   screenshot below underneath. */

.feature-row-full {
  display: block;
  margin-bottom: 96px;
}

.feature-row-full:last-child {
  margin-bottom: 0;
}

.feature-row-full .feature-row-text {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

/* Centre the bullet list as well when in full-width mode */
.feature-row-full .feature-row-text ul {
  display: inline-block;
  text-align: left;
  margin-top: 24px;
}

/* The visual container expands to full width of its parent */
.feature-row-full .feature-row-visual {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Browser frame inside full-width stays responsive */
.feature-row-full .browser-frame {
  width: 100%;
}

@media (max-width: 768px) {
  .feature-row-full {
    margin-bottom: 64px;
  }
  .feature-row-full .feature-row-text {
    margin-bottom: 32px;
  }
}
/* ============================================
   Phase 5 — About + Contact pages
   Append to end of styles.css
   ============================================ */


/* ============ ABOUT PAGE — IMAGE GRID ============ */

.about-image-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.about-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-warm);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06);
}

.about-image-founder {
  aspect-ratio: 1 / 1;
}

.about-image-landscape {
  aspect-ratio: 16 / 10;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #F7F5EE,
    #F7F5EE 12px,
    #EDEAE0 12px,
    #EDEAE0 24px
  );
  color: var(--text-muted);
  text-align: center;
  padding: 32px;
}

.about-image-placeholder span {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.about-image-placeholder small {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .about-image-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .about-image-founder {
    max-width: 300px;
    margin: 0 auto;
  }
}


/* ============ ABOUT PAGE — PROSE ============ */

.about-prose h2 {
  font-size: clamp(32px, 4vw, 44px);
  letter-spacing: -0.02em;
  margin-bottom: 32px;
}

.about-prose p {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 24px;
}

.about-prose p:last-child {
  margin-bottom: 0;
}

.about-prose strong {
  color: var(--text);
  font-weight: 600;
}

.about-prose .eyebrow {
  margin-bottom: 12px;
  display: block;
}

.about-prose .about-signoff {
  margin-top: 40px;
  font-style: italic;
  color: var(--text-muted);
  font-size: 17px;
}

.about-prose .about-signoff span {
  display: block;
  font-style: normal;
  font-size: 14px;
  margin-top: 4px;
  color: var(--text-muted);
}

.about-principles {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
}

.about-principles li {
  padding: 16px 0 16px 28px;
  position: relative;
  font-size: 17px;
  line-height: 1.55;
  border-top: 1px solid var(--border);
}

.about-principles li:first-child {
  border-top: none;
}

.about-principles li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 16px;
  color: var(--green);
  font-weight: 700;
  font-size: 18px;
}


/* ============ ABOUT PAGE — VALUES GRID ============ */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1240px;
  margin: 0 auto;
}

.value-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
}

.value-number {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

.value-card h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.25;
}

.value-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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


/* ============ CONTACT PAGE — FORM CARD ============ */

.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 171, 57, 0.12);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
  font-family: inherit;
  line-height: 1.5;
}

.form-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 44px;
  appearance: none;
  -webkit-appearance: none;
}

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 12px;
}

.form-submit .btn {
  min-width: 220px;
}

.form-note {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

.form-note a {
  color: var(--green-dark);
  font-weight: 500;
}


/* ============ CONTACT FORM — SUCCESS STATE ============ */

.form-success {
  text-align: center;
  padding: 24px 0;
}

.form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--surface-green-soft);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.form-success h3 {
  font-size: 28px;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.form-success p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto;
}

.form-success a {
  color: var(--green-dark);
  font-weight: 500;
}


/* ============ CONTACT PAGE — EXPECTATIONS GRID ============ */

.contact-expect-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
}

.contact-expect-item {
  text-align: center;
  padding: 32px 24px;
}

.contact-expect-number {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green-dark);
  background: var(--surface-green-soft);
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
}

.contact-expect-item h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.25;
}

.contact-expect-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}


/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
  .contact-card {
    padding: 32px 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-expect-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .contact-expect-item {
    padding: 24px 16px;
  }
}

/* ============================================
   Phase 6.1 — Nav logo wordmark fix
   ============================================ */

.nav-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.nav-logo .tocyn,
.nav-logo .ticket {
  display: inline-block;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
}

.nav-logo .tocyn {
  color: var(--green);
}

.nav-logo .ticket {
  color: var(--red);
}

/* ============================================
   Phase 6.3 — Nav logo alignment (proper fix)
   ============================================ */

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 800;
}

.nav-logo .tocyn,
.nav-logo .ticket {
  display: inline-block;
  line-height: 1;
  letter-spacing: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
  font-weight: 800;
  font-size: inherit;
  font-family: inherit;
}

.nav-logo .tocyn {
  color: var(--green);
}

.nav-logo .ticket {
  color: var(--red);
}

.footer-welsh .dragon-icon {
  vertical-align: -3px;
}

/* ============================================
   Phase 6.4 — Footer brand column polish
   ============================================ */

.footer-logo {
  height: 56px;
  width: auto;
  margin-bottom: 20px;
  display: block;
}

.footer-brand p {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.6;
}

.footer-brand .dragon-icon {
  display: none;
}