/* =============================================================
   AruYog Diet — Design System
   ============================================================= */

:root {
  /* Brand palette — warm terracotta + cream (AruYog Nutrition) */
  --primary: #bf5a2b;        /* terracotta */
  --primary-dark: #97431d;
  --primary-light: #f4e3d4;
  --primary-50: #fdf7f1;

  --accent: #e2892e;         /* saffron orange */
  --accent-dark: #bd6a1b;
  --accent-light: #fceeda;

  --sage: #8a9a63;           /* muted herb green (veg / fresh) */
  --sage-light: #eef1e3;

  --rose: #c9786a;
  --rose-light: #f8e8e3;

  --purple: #9a7bae;
  --purple-light: #f1ebf6;

  --amber: #cf9f3a;
  --amber-light: #f8efd6;

  --coral: #d2774f;
  --coral-light: #fbe8de;

  --teal: #5d8a80;           /* repurposed: muted green-teal */
  --teal-light: #e6efec;

  --cream: #fff6ec;          /* warm cream for alternating sections */
  --warning: #b5462c;
  --warning-bg: #fbe9e2;
  --success: #5a7d3f;
  --success-bg: #eef2e6;

  /* Neutral — warm browns */
  --text: #2c1a12;
  --text-muted: #8a7768;
  --text-light: #ab9888;
  --border: #ecdfce;
  --border-light: #f5ecdf;
  --bg: #fffaf3;
  --white: #ffffff;
  --black: #1a0f08;
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  
  /* Radius */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Shadow — warm brown cast */
  --shadow-sm: 0 1px 2px rgba(120, 72, 32, 0.05), 0 1px 3px rgba(120, 72, 32, 0.07);
  --shadow: 0 4px 12px rgba(120, 72, 32, 0.07), 0 2px 4px rgba(120, 72, 32, 0.05);
  --shadow-md: 0 8px 24px rgba(120, 72, 32, 0.09), 0 4px 8px rgba(120, 72, 32, 0.05);
  --shadow-lg: 0 16px 40px rgba(120, 72, 32, 0.12), 0 6px 12px rgba(120, 72, 32, 0.05);
  --shadow-xl: 0 24px 56px rgba(120, 72, 32, 0.16);

  /* Type — Marcellus (display serif) + Karla (body) */
  --font-sans: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  
  /* Transitions */
  --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }

a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}
a:hover { color: var(--primary-dark); }

button { font: inherit; cursor: pointer; border: none; background: none; }

input, textarea, select { font: inherit; }

/* =============================================================
   Typography
   ============================================================= */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-dark);
  letter-spacing: -0.01em;
}
/* Display headings in Marcellus (single weight, elegant) */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text);
}
h1 { font-size: 2.9rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

.serif { font-family: var(--font-serif); font-weight: 400; }

.text-muted { color: var(--text-muted); }
.text-light { color: var(--text-light); }
.text-primary { color: var(--primary); }
.text-accent { color: var(--accent); }
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* =============================================================
   Layout
   ============================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.container-narrow { max-width: 720px; }
.container-wide { max-width: 1320px; }

.section { padding: var(--space-16) 0; }
.section-sm { padding: var(--space-10) 0; }

@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.375rem; }
  .section { padding: var(--space-12) 0; }
}

/* =============================================================
   Header / nav
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 252, 248, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-light);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: -0.02em;
}
.nav-brand-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 800;
  font-size: 1rem;
}
.nav-brand-sub {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: 0.95rem;
}
.nav-links a { color: var(--text); font-weight: 500; }
.nav-links a:hover { color: var(--primary); }

@media (max-width: 700px) {
  .nav-links { display: none; }
}

/* =============================================================
   Buttons
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: var(--transition);
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 14px rgba(120, 72, 32, 0.25);
}
.btn-primary:hover {
  background: var(--primary-dark);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(120, 72, 32, 0.3);
}
.btn-accent {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 14px rgba(232, 122, 62, 0.3);
}
.btn-accent:hover {
  background: var(--accent-dark);
  color: white;
  transform: translateY(-1px);
}
.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background: var(--primary);
  color: white;
}
.btn-ghost {
  background: transparent;
  color: var(--text);
}
.btn-ghost:hover { background: var(--border-light); color: var(--primary); }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-sm { padding: 10px 18px; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* =============================================================
   Cards
   ============================================================= */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-6);
  transition: var(--transition);
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* =============================================================
   Forms
   ============================================================= */
.form-group { margin-bottom: var(--space-6); }
.form-label {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--text);
  margin-bottom: var(--space-2);
  letter-spacing: -0.01em;
}
.form-sublabel {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
  font-weight: 400;
}
.form-helper {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
}
.form-error {
  color: var(--warning);
  font-size: 0.8125rem;
  margin-top: var(--space-2);
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 1rem;
  transition: var(--transition);
  font-family: var(--font-sans);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(120, 72, 32, 0.1);
}
.form-input.invalid { border-color: var(--warning); }
.form-input.invalid:focus { box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.1); }
.form-textarea { min-height: 110px; resize: vertical; }

/* Option pills (single / multi select) */
.option-grid {
  display: grid;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .option-grid-2 { grid-template-columns: 1fr 1fr; }
}

.option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 16px 18px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  text-align: left;
  width: 100%;
}
.option:hover {
  border-color: var(--primary);
  background: var(--primary-50);
}
.option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(120, 72, 32, 0.08);
}
.option-radio {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: var(--transition);
  background: white;
  margin-top: 1px;
}
.option.selected .option-radio {
  border-color: var(--primary);
}
.option.selected .option-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--primary);
  border-radius: 50%;
}
.option-checkbox {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-radius: 6px;
  flex-shrink: 0;
  position: relative;
  transition: var(--transition);
  background: white;
  margin-top: 1px;
}
.option.selected .option-checkbox {
  border-color: var(--primary);
  background: var(--primary);
}
.option.selected .option-checkbox::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.option-content { flex: 1; line-height: 1.45; font-size: 0.9375rem; }
.option-label { font-weight: 500; color: var(--text); }
.option-sublabel { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* Checkbox standalone */
.checkbox-line {
  display: flex;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--primary-50);
  border: 1.5px solid var(--primary-light);
  align-items: flex-start;
}
.checkbox-line input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

/* =============================================================
   Progress bar
   ============================================================= */
.progress-wrapper {
  position: sticky;
  top: 70px;
  background: rgba(253, 252, 248, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: var(--space-3) 0;
  z-index: 40;
  border-bottom: 1px solid var(--border-light);
}
.progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.progress-row strong { color: var(--primary); }
.progress-bar {
  height: 6px;
  background: var(--border-light);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================
   Sections / pages specific
   ============================================================= */

/* Section header */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--primary);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.section-header::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--accent);
}

/* Hero */
.hero {
  padding: var(--space-16) 0 var(--space-12) 0;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.1fr 1fr; gap: var(--space-16); }
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--accent-light);
  color: var(--accent-dark);
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: var(--space-5);
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  margin-bottom: var(--space-5);
}
.hero p.lead {
  font-size: 1.1875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-8);
  max-width: 540px;
}
.hero-cta {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}
.hero-trust {
  margin-top: var(--space-8);
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero-trust-item {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
}
.hero-trust-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary);
  font-family: var(--font-serif);
  line-height: 1;
}
.hero-trust-lbl { color: var(--text-muted); margin-top: 4px; }

.hero-visual {
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, var(--primary-light), var(--cream));
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--shadow-lg);
}
.hero-pdf-mock {
  background: white;
  border-radius: var(--radius);
  padding: var(--space-5);
  flex: 1;
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}
.pdf-line {
  height: 8px;
  background: var(--border-light);
  border-radius: var(--radius-sm);
}
.pdf-line.short { width: 60%; }
.pdf-line.medium { width: 80%; }
.pdf-line.long { width: 100%; }
.pdf-line.accent { background: var(--accent); height: 12px; width: 45%; }
.pdf-line.primary { background: var(--primary); height: 16px; width: 70%; }
.hero-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Niche cards */
.niches-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 700px) {
  .niches-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .niches-grid { grid-template-columns: repeat(3, 1fr); }
}
.niche-card {
  display: block;
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 2px solid var(--border-light);
  transition: var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.niche-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.niche-card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  margin-bottom: var(--space-4);
  font-size: 1.5rem;
}
.niche-card[data-color="rose"] .niche-card-icon { background: var(--rose-light); color: var(--rose); }
.niche-card[data-color="teal"] .niche-card-icon { background: var(--teal-light); color: var(--teal); }
.niche-card[data-color="coral"] .niche-card-icon { background: var(--coral-light); color: var(--coral); }
.niche-card[data-color="amber"] .niche-card-icon { background: var(--amber-light); color: var(--amber); }
.niche-card[data-color="purple"] .niche-card-icon { background: var(--purple-light); color: var(--purple); }

.niche-card h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
}
.niche-card p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
  line-height: 1.5;
}
.niche-card-highlights {
  list-style: none;
  margin-bottom: var(--space-5);
}
.niche-card-highlights li {
  font-size: 0.8125rem;
  color: var(--text);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.niche-card-highlights li::before {
  content: '✓';
  color: var(--sage);
  font-weight: 700;
  margin-top: 1px;
}
.niche-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.niche-card-price {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.niche-card-price strong { color: var(--primary); font-size: 1.125rem; }
.niche-card-arrow {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.875rem;
}
.niche-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Trust strip */
.trust-strip {
  background: var(--primary);
  color: white;
  padding: var(--space-8) 0;
  text-align: center;
}
.trust-strip-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .trust-strip-grid { grid-template-columns: repeat(4, 1fr); }
}
.trust-strip-item h4 {
  color: white;
  font-size: 2rem;
  font-family: var(--font-serif);
  font-weight: 800;
  margin-bottom: 4px;
}
.trust-strip-item p {
  font-size: 0.875rem;
  opacity: 0.85;
  margin: 0;
}

/* Steps section */
.steps {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 800px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step {
  text-align: center;
  padding: var(--space-6);
}
.step-num {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-serif);
}
.step h4 { margin-bottom: var(--space-2); }
.step p { color: var(--text-muted); font-size: 0.9375rem; }

/* Question section */
.question-page {
  min-height: 70vh;
  padding: var(--space-8) 0 var(--space-12);
}
.question-section {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow);
  margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .question-section { padding: var(--space-5); }
}
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.section-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-title { font-size: 1.5rem; margin-bottom: var(--space-1); }
.section-sub { color: var(--text-muted); margin-bottom: var(--space-6); }

/* Form actions */
.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}
.form-actions.right { justify-content: flex-end; }
@media (max-width: 480px) {
  .form-actions {
    flex-direction: column-reverse;
  }
  .form-actions .btn { width: 100%; }
}

/* Branching message */
.branching-msg {
  background: var(--amber-light);
  border-left: 4px solid var(--amber);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  margin-top: var(--space-3);
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-12) 0 var(--space-6) 0;
  margin-top: var(--space-16);
}
.footer-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1.5fr 1fr 1fr;
  margin-bottom: var(--space-8);
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.site-footer h5 {
  color: white;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-4);
}
.site-footer a { color: rgba(255, 255, 255, 0.85); display: block; padding: 4px 0; font-size: 0.9375rem; }
.site-footer a:hover { color: white; }
.footer-bottom {
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
}

/* =============================================================
   Misc / utility
   ============================================================= */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.flash {
  padding: var(--space-4);
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
  font-size: 0.9375rem;
}
.flash-success { background: var(--success-bg); color: var(--success); border-left: 4px solid var(--success); }
.flash-warning { background: var(--warning-bg); color: var(--warning); border-left: 4px solid var(--warning); }
.flash-info { background: var(--primary-light); color: var(--primary-dark); border-left: 4px solid var(--primary); }

.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, #f5f3ee 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Review page specific */
.review-section {
  background: white;
  border-radius: var(--radius);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.review-section-header h4 { margin: 0; color: var(--primary); font-size: 1.125rem; }
.review-edit {
  font-size: 0.875rem;
  color: var(--accent);
  font-weight: 600;
}
.review-item {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.9375rem;
}
.review-item:last-child { border-bottom: none; }
.review-item-label { color: var(--text-muted); font-weight: 500; }
.review-item-value { color: var(--text); font-weight: 600; }
@media (max-width: 600px) {
  .review-item { grid-template-columns: 1fr; gap: 2px; }
}

/* Pricing cards */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--space-5);
}
.pricing-grid > * {
  flex: 1 1 300px;
  max-width: 360px;
}
.pricing-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border: 2px solid var(--border-light);
  position: relative;
  transition: var(--transition);
}
.pricing-card:hover {
  border-color: var(--primary);
}
.pricing-card.featured {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-light) 0%, white 30%);
}
.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  padding: 4px 16px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pricing-name {
  font-size: 1.125rem;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.pricing-price {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary-dark);
  line-height: 1;
}
.pricing-price-sub {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.pricing-features {
  list-style: none;
  margin-bottom: var(--space-6);
}
.pricing-features li {
  font-size: 0.9375rem;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.pricing-features li::before {
  content: '✓';
  color: var(--sage);
  font-weight: 700;
  flex-shrink: 0;
}
/* Launch-offer anchor (display-only "was" price) + % off chip + highlighted wall-chart feature.
   The struck price is marketing only — the charged amount is always server-computed. */
.pricing-was {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-light);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-features li.feat-star {
  font-weight: 700;
  color: var(--primary-dark);
}
.pricing-features li.feat-star::before {
  content: '★';
  color: var(--accent);
}

/* Success page */
.success-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  box-shadow: var(--shadow);
}
.success-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-5);
  background: var(--sage-light);
  color: var(--sage);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.success-meta {
  background: var(--primary-light);
  padding: var(--space-4);
  border-radius: var(--radius);
  margin: var(--space-6) auto;
  max-width: 420px;
  font-size: 0.9375rem;
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(120, 72, 32, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 100;
  text-align: center;
  padding: var(--space-5);
}
.loading-overlay .spinner {
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-6);
  border-width: 4px;
}
.loading-overlay h3 {
  color: white;
  margin-bottom: var(--space-2);
}
.loading-overlay p {
  opacity: 0.85;
  max-width: 400px;
}

/* Error page */
.error-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-5);
}
.error-page h1 {
  font-size: 6rem;
  color: var(--primary);
  font-family: var(--font-serif);
  line-height: 1;
}
.error-page h2 {
  margin: var(--space-3) 0 var(--space-2);
}
.error-page p {
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* ==================================================================
   V2 PREMIUM COMPONENTS — added in design refresh
   ================================================================== */

/* ---------- Hero v2 ---------- */
.hero-v2 {
  position: relative;
  padding: 5rem 0 6rem;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf9f4 0%, #ffffff 100%);
}
.hero-bg-shape {
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.hero-v2-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero-v2-content { max-width: 580px; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.hero-eyebrow-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.25); }
}
.hero-v2-title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: var(--primary-dark);
  font-weight: 800;
  margin-bottom: 1.25rem;
}
.hero-v2-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.hero-v2-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-bottom: 2rem;
}
.hero-v2-cta {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}
.btn-text {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px dashed var(--primary-light);
  padding-bottom: 2px;
  transition: var(--transition);
}
.btn-text:hover { color: var(--primary-dark); border-bottom-color: var(--primary); }
.btn-text-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 50%;
  font-size: 0.65rem;
}
.hero-v2-trust {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.hero-v2-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-v2-trust-num {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary-dark);
  line-height: 1;
}
.hero-v2-trust-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.3;
}
.hero-v2-trust-divider {
  width: 1px;
  height: 30px;
  background: var(--border);
}

/* Hero visual — stacked PDF preview */
.hero-v2-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.hero-v2-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-v2-orb-1 {
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
  top: -40px;
  left: -40px;
  opacity: 0.9;
}
.hero-v2-orb-2 {
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%);
  bottom: -20px;
  right: -30px;
  opacity: 0.8;
}
.pdf-stack {
  position: relative;
  width: 280px;
  height: 380px;
  z-index: 2;
}
.pdf-stack-page {
  position: absolute;
  width: 240px;
  height: 340px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(120, 72, 32, 0.15), 0 4px 10px rgba(0,0,0,0.08);
  background: white;
  transition: var(--transition);
}
.pdf-stack-page img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.pdf-stack-page-1 {
  top: 0;
  left: 30px;
  z-index: 3;
  transform: rotate(2deg);
}
.pdf-stack-page-2 {
  top: 25px;
  left: 50px;
  z-index: 2;
  transform: rotate(-3deg);
  opacity: 0.95;
}
.pdf-stack-page-3 {
  top: 50px;
  left: 70px;
  z-index: 1;
  transform: rotate(5deg);
  opacity: 0.85;
}
.pdf-stack-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 3px 10px rgba(232, 122, 62, 0.35);
  z-index: 10;
}
.pdf-stack:hover .pdf-stack-page-1 { transform: rotate(0deg) translateY(-4px); }
.pdf-stack:hover .pdf-stack-page-2 { transform: rotate(-1deg) translateX(-4px); }
.pdf-stack:hover .pdf-stack-page-3 { transform: rotate(2deg) translateX(4px); }
.hero-v2-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-v2-icon-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hero-v2-icon-divider { color: var(--text-light); }

@media (max-width: 900px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-v2-visual { margin-top: 1rem; }
  .pdf-stack { transform: scale(0.9); }
  .hero-v2-trust { flex-wrap: wrap; gap: 1rem; }
  .hero-v2-trust-divider { display: none; }
}

/* ---------- Niche cards v2 ---------- */
.niches-grid-v2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.niches-grid-v2 > .niche-card-v2 {
  flex: 1 1 300px;
  max-width: 360px;
}
.niche-card-v2 {
  position: relative;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.niche-card-v2:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(120, 72, 32, 0.12);
}
.niche-badge-v2 {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent);
  color: white;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 5;
  box-shadow: 0 3px 8px rgba(232, 122, 62, 0.3);
}

/* Illustration area — gradient header */
.niche-card-v2-art {
  height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.niche-card-v2-art[data-color="rose"] {
  background: linear-gradient(135deg, #fde9e3 0%, #f5d6cb 100%);
}
.niche-card-v2-art[data-color="teal"] {
  background: linear-gradient(135deg, #d4ebeb 0%, #b9dede 100%);
}
.niche-card-v2-art[data-color="coral"] {
  background: linear-gradient(135deg, #fdeada 0%, #fad7b3 100%);
}
.niche-card-v2-art[data-color="sage"] {
  background: linear-gradient(135deg, #dceadb 0%, #c4dfc2 100%);
}
.niche-card-v2-art[data-color="amber"] {
  background: linear-gradient(135deg, #dceadb 0%, #c4dfc2 100%);
}
.niche-card-v2-art[data-color="purple"], .niche-card-v2-art[data-color="lavender"] {
  background: linear-gradient(135deg, #e8def5 0%, #d6c5ea 100%);
}
.niche-illust {
  width: 100%;
  height: 100%;
  display: block;
}

.niche-card-v2-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.niche-card-v2-title {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.4rem;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.niche-card-v2-sub {
  color: var(--text-muted);
  font-size: 0.9375rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.niche-card-v2-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.niche-card-v2-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}
.niche-card-v2-highlights li svg {
  color: var(--sage);
  flex-shrink: 0;
  margin-top: 3px;
}
.niche-card-v2-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.niche-card-v2-price {
  display: flex;
  flex-direction: column;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.niche-card-v2-price-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-light);
}
.niche-card-v2-price strong {
  color: var(--primary-dark);
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-serif);
}
.niche-card-v2-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9375rem;
  transition: var(--transition);
}
.niche-card-v2:hover .niche-card-v2-arrow { gap: 10px; color: var(--accent); }

/* ---------- Sample PDF section ---------- */
.sample-section { padding-top: 5rem; padding-bottom: 5rem; }
.sample-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.sample-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  transition: var(--transition);
  border: 1px solid transparent;
}
.sample-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.06), 0 20px 40px rgba(120, 72, 32, 0.12);
  border-color: var(--primary-light);
}
.sample-card-image {
  position: relative;
  background: linear-gradient(180deg, #f5f1e8 0%, #fbf9f4 100%);
  padding: 1.25rem 1.25rem 0;
  overflow: hidden;
}
.sample-card-image img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: top center;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
  display: block;
}
.sample-card-meta {
  padding: 1.25rem 1.5rem 1.5rem;
}
.sample-card-page {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 6px;
}
.sample-card-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 0.4rem;
  letter-spacing: -0.3px;
}
.sample-card-desc {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---------- How it works v2 ---------- */
.steps-v2 {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.step-v2 {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: var(--transition);
}
.step-v2:hover {
  transform: translateY(-4px);
  border-color: var(--primary-light);
  box-shadow: 0 12px 32px rgba(120, 72, 32, 0.08);
}
.step-v2-num {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1px;
}
.step-v2-icon {
  width: 64px;
  height: 64px;
  margin: 0.5rem auto 1.25rem;
}
.step-v2-icon svg { width: 100%; height: 100%; }
.step-v2 h4 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--primary-dark);
  margin-bottom: 0.5rem;
}
.step-v2 p {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0;
}
.step-v2-arrow {
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-v2-arrow svg { width: 100%; height: 24px; opacity: 0.5; }
@media (max-width: 900px) {
  .steps-v2 { grid-template-columns: 1fr; gap: 1.5rem; }
  .step-v2-arrow { display: none; }
}

/* ---------- Trust strip v2 ---------- */
.trust-strip-v2 {
  background: var(--primary-dark);
  color: white;
  padding: 4rem 0;
}
.trust-strip-v2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}
.trust-strip-v2-item {
  text-align: left;
  padding-left: 1rem;
  border-left: 2px solid rgba(255,255,255,0.15);
}
.trust-strip-v2-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 1rem;
}
.trust-strip-v2-icon svg { width: 100%; height: 100%; }
.trust-strip-v2-item h4 {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  color: white;
  margin-bottom: 0.5rem;
}
.trust-strip-v2-item p {
  color: rgba(255,255,255,0.75);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0;
}

/* ---------- Closing CTA ---------- */
.closing-cta {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
  padding: 3.5rem 2rem;
  border-radius: 20px;
  text-align: center;
  border: 1px solid var(--border);
}
.closing-cta h2 {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  color: var(--primary-dark);
  margin-bottom: 0.75rem;
}
.closing-cta p {
  color: var(--text-muted);
  font-size: 1.0625rem;
}


/* ============ PRICING TAGLINE ============ */
.pricing-tagline {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0.25rem 0 0.5rem;
  min-height: 1.2em;
}

/* ============ "WHY DIFFERENT" COMPARISON ============ */
.compare-wrap {
  max-width: 960px;
  margin: 0 auto;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.compare-table thead th {
  text-align: left; padding: 1rem 1.1rem; font-weight: 700;
  color: var(--text-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--cream); border-bottom: 1px solid var(--border);
}
.compare-table td {
  padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--border-light);
  color: var(--text-muted); vertical-align: top;
}
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table .compare-feature { font-weight: 700; color: var(--text); font-family: var(--font-sans); }
.compare-table th.compare-us { background: var(--primary); color: #fff; border-top-right-radius: var(--radius); }
.compare-table td.compare-us { background: var(--primary-50); color: var(--primary-dark); font-weight: 600; border-left: 2px solid var(--primary-light); }

/* ============ CATEGORY HEADINGS (plan grouping) ============ */
.niche-cat-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 1120px;
  margin: 3rem auto 1.5rem;
}
.niche-cat-row:first-of-type { margin-top: 0; }
.niche-cat-line { flex: 1; height: 1px; background: var(--border); }
.niche-cat-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--primary-dark);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin: 0;
}

/* ==================================================================
   C5 — PREMIUM EVOLUTION DESIGN SYSTEM (2026-07 redesign)
   ================================================================== */

/* global fixes */
[x-cloak]{display:none!important}
.pricing-price{font-weight:400}
.nav-brand{font-weight:400}
.serif-num{font-family:var(--font-serif);font-weight:400}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* section headers */
.sec-eyebrow{display:flex;align-items:center;gap:12px;color:var(--primary);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.sec-eyebrow::before{content:'';width:26px;height:2px;background:var(--accent)}
.sec-eyebrow.center{justify-content:center}
.sec-eyebrow.center::after{content:'';width:26px;height:2px;background:var(--accent)}
h2.big{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.14;letter-spacing:-.005em;color:var(--text)}
.sec-sub{color:var(--text-muted);font-size:1.0625rem;margin-top:12px;max-width:600px}
.center .sec-sub{margin-left:auto;margin-right:auto}

/* ---------- nav c5 ---------- */
.nav-c5{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand-c5{display:flex;align-items:center;gap:11px}
.brand-c5 .mark{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:19px;box-shadow:0 4px 12px rgba(151,67,29,.28)}
.brand-c5 .nm{font-family:var(--font-serif);font-size:1.35rem;color:var(--primary-dark);line-height:1.1;display:block}
.brand-c5 .sb{font-size:.62rem;letter-spacing:.26em;color:var(--text-muted);font-weight:700;text-transform:uppercase;display:block}
.brand-c5 .brand-ic{width:42px;height:42px;display:block;flex:0 0 auto}
.site-header .brand-c5 .brand-ic{width:41px;height:41px}
@media(max-width:760px){.site-header .brand-c5 .brand-ic{width:38px;height:38px}}
.nav-links-c5{display:flex;gap:28px;align-items:center;font-size:.95rem;font-weight:600}
.nav-links-c5 a:not(.btn){color:var(--text)}
.nav-links-c5 a:not(.btn):hover{color:var(--primary)}
.btn-pill{border-radius:100px!important}
.burger{display:none;flex-direction:column;gap:5px;padding:8px;background:none;border:none;cursor:pointer}
.burger span{width:24px;height:2.5px;background:var(--text);border-radius:2px}
.m-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:90;padding:24px;flex-direction:column;overflow-y:auto}
.m-menu.open{display:flex}
.m-menu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}
.m-menu a.lnk{font-family:var(--font-serif);font-size:1.7rem;padding:15px 0;border-bottom:1px solid var(--border-light);color:var(--text)}
.m-menu .btn{margin-top:26px}
.m-close{font-size:1.9rem;color:var(--text-muted);padding:4px 12px;background:none;border:none;cursor:pointer}
@media(max-width:860px){.nav-links-c5{display:none}.burger{display:flex}}

/* ---------- hero c5 ---------- */
.hero-c5{position:relative;padding:72px 0 40px;overflow:hidden}
.hero-c5::before{content:'';position:absolute;top:-220px;right:-180px;width:640px;height:640px;background:radial-gradient(circle,var(--primary-light) 0%,transparent 68%);opacity:.65;pointer-events:none}
.hero-c5::after{content:'';position:absolute;bottom:-160px;left:-160px;width:420px;height:420px;background:radial-gradient(circle,var(--accent-light) 0%,transparent 70%);opacity:.7;pointer-events:none}
.hero-c5-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;position:relative;z-index:2}
.eyebrow-c5{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;background:#fff;border:1px solid var(--border);border-radius:100px;font-size:.8125rem;font-weight:700;color:var(--text-muted);box-shadow:var(--shadow-sm);margin-bottom:26px}
.eyebrow-c5 .dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:pulseC5 2.2s ease-in-out infinite}
@keyframes pulseC5{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(1.3)}}
.hero-c5 h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2.6rem,5.2vw,4.25rem);line-height:1.05;letter-spacing:-.01em;color:var(--text)}
.hero-c5 h1 .ac{color:var(--primary);font-style:italic}
.hero-c5 .lead{font-size:1.125rem;color:var(--text-muted);margin:24px 0 32px;max-width:500px}
.hero-c5 .lead b{color:var(--text)}
.cta-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:26px;align-items:center;margin-top:40px;padding-top:26px;border-top:1px solid var(--border);flex-wrap:wrap}
.hs{display:flex;flex-direction:column;gap:2px}
.hs b{font-family:var(--font-serif);font-weight:400;font-size:1.875rem;color:var(--primary);line-height:1}
.hs span{font-size:.78rem;color:var(--text-muted);line-height:1.35}
.hs-div{width:1px;height:34px;background:var(--border)}
@media(max-width:560px){.hs-div{display:none}.hero-stats{gap:20px}}
.visual-c5{position:relative;display:flex;justify-content:center;align-items:center;min-height:520px}
.v-orb{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#f7e0c8 0%,transparent 66%);top:6%;left:50%;transform:translateX(-50%);pointer-events:none}
.stack-c5{position:relative;width:300px;height:430px}
.stack-c5 .pg{position:absolute;width:265px;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(120,72,32,.2),0 6px 16px rgba(120,72,32,.1);background:#fff;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.stack-c5 .p1{top:0;left:36px;z-index:3;transform:rotate(2deg)}
.stack-c5 .p2{top:30px;left:6px;z-index:2;transform:rotate(-4deg);opacity:.96}
.stack-c5 .p3{top:62px;left:70px;z-index:1;transform:rotate(6.5deg);opacity:.88}
.visual-c5:hover .p1{transform:rotate(0) translateY(-8px)}
.visual-c5:hover .p2{transform:rotate(-2deg) translateX(-5px)}
.visual-c5:hover .p3{transform:rotate(4deg) translateX(5px)}
.badge-sample{position:absolute;top:14px;right:14px;z-index:5;background:var(--accent);color:#fff;padding:5px 13px;border-radius:100px;font-size:.6875rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 4px 12px rgba(226,137,46,.4)}
.chip-c5{position:absolute;z-index:6;background:#fff;border:1px solid var(--border);border-radius:100px;padding:9px 18px;font-size:.84rem;font-weight:700;color:var(--primary-dark);box-shadow:var(--shadow);animation:floatC5 5s ease-in-out infinite}
.chip-c5.c1{top:6%;left:-4%;animation-delay:0s}
.chip-c5.c2{top:38%;right:-7%;animation-delay:1.3s}
.chip-c5.c3{bottom:10%;left:-1%;animation-delay:2.4s}
@keyframes floatC5{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.deliver-tag{position:absolute;z-index:6;bottom:22%;right:-10%;background:#fff;border:1px solid var(--border);border-radius:16px;padding:13px 18px;box-shadow:var(--shadow-lg);display:flex;gap:12px;align-items:center;animation:floatC5 6s ease-in-out infinite;animation-delay:.8s}
.deliver-tag .wa{width:38px;height:38px;border-radius:50%;background:#e7f8ec;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.deliver-tag b{display:block;font-size:.875rem;line-height:1.2}
.deliver-tag small{font-size:.72rem;color:var(--text-muted)}
@media(max-width:920px){.hero-c5-grid{grid-template-columns:1fr}.visual-c5{min-height:480px;margin-top:8px}.chip-c5.c1{left:0}.chip-c5.c2{right:0}.chip-c5.c3{left:2%}.deliver-tag{right:0}}

/* ---------- niche cards c5 ---------- */
.n-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.n-grid>.n-card{flex:1 1 300px;max-width:356px}
/* Mobile: each category becomes a horizontal swipe slider (like the sample-pages gallery)
   so a tall stack of cards becomes one neat, swipeable row with the next card peeking. */
@media(max-width:760px){
  .n-grid{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:14px;padding-bottom:6px;scroll-padding-left:2px}
  .n-grid::-webkit-scrollbar{display:none}
  .n-grid>.n-card{flex:0 0 82%;max-width:82%;scroll-snap-align:start}
}
.n-swipe-hint{display:none}
@media(max-width:760px){.n-swipe-hint{display:block;text-align:center;font-size:.78rem;color:var(--text-light);margin:0 0 22px}}
.n-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:var(--transition-slow);color:inherit}
.n-card:hover{transform:translateY(-6px);border-color:var(--primary);box-shadow:0 20px 44px rgba(120,72,32,.13);color:inherit}
.n-pop{position:absolute;top:14px;right:14px;background:var(--accent);color:#fff;padding:4px 12px;border-radius:100px;font-size:.6875rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;z-index:5;box-shadow:0 3px 9px rgba(226,137,46,.35)}
.n-art{position:relative;height:168px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.niche-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.n-art svg{width:100%;height:100%}
.n-art[data-c="rose"]{background:linear-gradient(135deg,#fde9e3,#f5d6cb)}
.n-art[data-c="teal"]{background:linear-gradient(135deg,#d4ebeb,#b9dede)}
.n-art[data-c="coral"]{background:linear-gradient(135deg,#fdeada,#fad7b3)}
.n-art[data-c="sage"]{background:linear-gradient(135deg,#dceadb,#c4dfc2)}
.n-art[data-c="amber"]{background:linear-gradient(135deg,#fbeed3,#f4ddab)}
.n-art[data-c="purple"],.n-art[data-c="lavender"]{background:linear-gradient(135deg,#e8def5,#d6c5ea)}
.n-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.n-body h3{font-family:var(--font-serif);font-weight:400;font-size:1.34rem;color:var(--primary-dark);line-height:1.2;margin-bottom:6px}
.n-sub{color:var(--text-muted);font-size:.9rem;margin-bottom:16px;line-height:1.5}
.n-hl{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:8px;flex:1}
.n-hl li{display:flex;gap:9px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--text)}
.n-hl li svg{color:var(--sage);flex-shrink:0;margin-top:3.5px}
.n-foot{display:flex;justify-content:space-between;align-items:center;padding-top:15px;border-top:1px solid var(--border);margin-top:auto}
.n-price{display:flex;flex-direction:column;font-size:.8125rem;color:var(--text-muted)}
.n-price .lb{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);font-weight:700}
.n-price strong{color:var(--primary-dark);font-size:1.19rem;font-family:var(--font-serif);font-weight:400}
.n-go{display:inline-flex;align-items:center;gap:7px;color:var(--primary);font-weight:800;font-size:.9rem;transition:var(--transition)}
.n-card:hover .n-go{gap:11px;color:var(--accent)}
/* Browse cards no longer show a price — keep the Start affordance neatly to the right */
.n-foot--cta{justify-content:flex-end}

/* ---------- what you receive ---------- */
.receive-panel{background:linear-gradient(135deg,#fdeedd 0%,#f9e2c8 55%,#f6d9b8 100%);border-radius:28px;padding:64px 58px;display:grid;grid-template-columns:.82fr 1.18fr;gap:58px;align-items:center;position:relative;overflow:hidden}
.receive-panel::before{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.5),transparent 70%);top:-120px;right:-80px}
.cover-mock{position:relative;width:min(290px,100%);margin:0 auto}
.cover-mock .back{position:absolute;inset:14px -14px -14px 14px;background:#fff;border-radius:14px;opacity:.55;transform:rotate(3deg)}
.cover-mock .front{position:relative;background:linear-gradient(160deg,var(--accent) 0%,var(--primary) 78%);border-radius:14px;padding:34px 30px;color:#fff;aspect-ratio:3/4.15;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(120,72,32,.28)}
.cover-mock .brand-ln{font-size:.6875rem;letter-spacing:.3em;text-transform:uppercase;opacity:.9}
.cover-mock .rule{width:34px;height:2px;background:rgba(255,255,255,.7);margin:12px 0}
.cover-mock h3{font-family:var(--font-serif);font-weight:400;font-size:1.94rem;line-height:1.18;margin-top:auto;color:#fff}
.cover-mock .ft{font-size:.78rem;opacity:.85;margin-top:14px}
.pg-list{display:grid;grid-template-columns:1fr 1fr;gap:22px 30px}
.pg-item{display:flex;gap:14px;align-items:flex-start}
.pg-ic{flex-shrink:0;width:46px;height:46px;border-radius:14px;background:#fff;border:1px solid rgba(191,90,43,.22);box-shadow:0 4px 12px rgba(120,72,32,.1);display:flex;align-items:center;justify-content:center;color:var(--primary)}
.pg-ic svg{width:22px;height:22px}
.pg-item h4{font-size:1.03rem;font-weight:800;margin-bottom:3px;color:var(--text)}
.pg-item p{font-size:.86rem;color:#6d5847;line-height:1.55;margin:0}
@media(max-width:960px){.receive-panel{grid-template-columns:1fr;padding:46px 30px;gap:44px}.pg-list{grid-template-columns:1fr}}

/* ---------- preview gallery ---------- */
.gallery{display:flex;gap:20px;overflow-x:auto;padding:34px 4px 18px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.g-card{flex:0 0 240px;scroll-snap-align:start;background:#fff;border:1px solid var(--border-light);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition-slow)}
.g-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.g-card img{height:300px;width:100%;object-fit:cover;object-position:top}
.g-card .cap{padding:13px 16px;font-size:.8125rem;font-weight:700;color:var(--text)}
.g-card .cap small{display:block;color:var(--text-muted);font-weight:600;font-size:.72rem}
.g-hint{text-align:center;font-size:.78rem;color:var(--text-light);margin-top:6px}

/* ---------- data / facts ---------- */
.data-sec{background:var(--cream);border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.data-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;margin-top:50px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tile{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:26px 26px 22px;box-shadow:var(--shadow-sm)}
.tile b{font-family:var(--font-serif);font-weight:400;font-size:2.625rem;color:var(--primary);line-height:1;display:block}
.tile b sup{font-size:1.25rem;color:var(--accent)}
.tile span{font-size:.84rem;color:var(--text-muted);display:block;margin-top:7px;line-height:1.45}
.tile .src{font-size:.6875rem;color:var(--text-light);margin-top:9px;display:block;letter-spacing:.03em}
@media(max-width:960px){.data-grid{grid-template-columns:1fr}}
@media(max-width:520px){.tiles{gap:12px}.tile{padding:20px 18px}.tile b{font-size:2rem}}
.donut-card{background:#fff;border:1px solid var(--border-light);border-radius:28px;padding:38px;box-shadow:var(--shadow)}
.donut-card h3{font-family:var(--font-serif);font-weight:400;font-size:1.44rem;margin-bottom:4px;color:var(--text)}
.donut-card .ds{font-size:.84rem;color:var(--text-muted);margin-bottom:26px}
.donut-flex{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.donut-wrap{position:relative;width:190px;height:190px;flex-shrink:0;margin:0 auto}
.donut-wrap svg{transform:rotate(-90deg)}
.donut-c{fill:none;stroke-width:26;stroke-linecap:butt}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-center b{font-family:var(--font-serif);font-weight:400;font-size:1.875rem;line-height:1;color:var(--text)}
.donut-center span{font-size:.72rem;color:var(--text-muted);margin-top:3px}
.legend{flex:1;min-width:200px;display:flex;flex-direction:column;gap:14px}
.lg-row{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px dashed var(--border-light)}
.lg-row:last-child{border-bottom:none;padding-bottom:0}
.lg-dot{width:13px;height:13px;border-radius:4px;flex-shrink:0}
.lg-row .lb{font-size:.9rem;font-weight:700;flex:1;color:var(--text)}
.lg-row .vl{font-size:.875rem;color:var(--text-muted);font-weight:600}
.donut-note{font-size:.72rem;color:var(--text-light);margin-top:20px}

/* ---------- steps c5 ---------- */
.steps-c5{display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px;margin-top:52px;position:relative}
.steps-c5::before{content:'';position:absolute;top:33px;left:15%;right:15%;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 9px,transparent 9px 18px)}
.step-c5{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:44px 28px 32px;text-align:center;position:relative;transition:var(--transition-slow);box-shadow:var(--shadow-sm)}
.step-c5:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary-light)}
.step-c5 .sn{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-family:var(--font-serif);font-size:1.19rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(151,67,29,.32);border:3px solid var(--bg)}
.step-c5 h3{font-family:var(--font-serif);font-weight:400;font-size:1.34rem;color:var(--primary-dark);margin-bottom:9px}
.step-c5 p{font-size:.9rem;color:var(--text-muted)}
.step-c5 .tm{display:inline-flex;align-items:center;gap:7px;margin-top:16px;background:var(--accent-light);color:var(--accent-dark);font-size:.78rem;font-weight:800;padding:6px 15px;border-radius:100px}
@media(max-width:860px){.steps-c5{grid-template-columns:1fr;gap:44px}.steps-c5::before{display:none}}

/* ---------- trust strip c5 ---------- */
.trust-c5{background:var(--primary-dark);color:#fff;padding:64px 0;position:relative;overflow:hidden}
.trust-c5::after{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.045);bottom:-210px;left:-100px}
.trust-c5-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:34px;position:relative;z-index:2}
.trust-c5-item{padding-left:18px;border-left:2px solid rgba(255,255,255,.18)}
.trust-c5-item .ic{width:38px;height:38px;margin-bottom:14px;display:block}
.trust-c5-item .ic svg{width:100%;height:100%}
.trust-c5-item h4{font-family:var(--font-serif);font-weight:400;font-size:1.22rem;color:#fff;margin-bottom:7px}
.trust-c5-item p{color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.55;margin:0}

/* ---------- premium showcase ---------- */
.prem{background:linear-gradient(150deg,#3a2313 0%,#4d2c15 55%,#5c3417 100%);border-radius:28px;padding:64px 58px;color:#f7ede0;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;position:relative;overflow:hidden}
.prem::before{content:'';position:absolute;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(226,137,46,.22),transparent 70%);top:-160px;right:-120px}
.prem-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(226,137,46,.18);border:1px solid rgba(226,137,46,.5);color:#f2b56b;font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 16px;border-radius:100px;margin-bottom:22px}
.prem h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.75rem,3.6vw,2.625rem);color:#fff;line-height:1.15}
.prem h2 em{font-style:italic;color:#f2b56b}
.prem .pl{color:rgba(247,237,224,.78);font-size:1rem;margin:18px 0 26px;max-width:460px}
.prem-feats{list-style:none;display:flex;flex-direction:column;gap:13px;margin:0 0 32px;padding:0}
.prem-feats li{display:flex;gap:13px;align-items:flex-start;font-size:.94rem}
.prem-feats .fi{flex-shrink:0;width:26px;height:26px;border-radius:8px;background:rgba(226,137,46,.2);display:flex;align-items:center;justify-content:center;font-size:.8125rem;margin-top:1px}
.prem-feats b{color:#fff}
.prem-feats span.d{color:rgba(247,237,224,.7);display:block;font-size:.84rem}
.prem .btn-accent{box-shadow:0 8px 22px rgba(0,0,0,.3)}
.wa-mock{background:#e5ddd5;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.35);max-width:360px;margin:0 auto;position:relative;z-index:2}
.wa-top{background:#075e54;color:#fff;padding:14px 16px;display:flex;gap:11px;align-items:center;font-size:.875rem;font-weight:700}
.wa-top .dp{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:.94rem;flex-shrink:0}
.wa-top small{display:block;font-size:.66rem;font-weight:500;opacity:.8}
.wa-chat{padding:16px 14px 20px;display:flex;flex-direction:column;gap:10px;min-height:300px}
.wmsg{max-width:88%;background:#fff;border-radius:12px;padding:10px 13px;font-size:.8125rem;color:#2b2b2b;box-shadow:0 1px 1px rgba(0,0,0,.09);line-height:1.5}
.wmsg.me{align-self:flex-end;background:#dcf8c6}
.wmsg .tick{display:block;text-align:right;font-size:.6rem;color:#9aa0a6;margin-top:3px}
@media(max-width:960px){.prem{grid-template-columns:1fr;padding:46px 28px}}

/* ---------- languages band ---------- */
.lang-band{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);color:#fff;padding:66px 0;position:relative;overflow:hidden}
.lang-band::before{content:'';position:absolute;width:480px;height:480px;border-radius:50%;background:rgba(255,255,255,.05);top:-240px;right:-120px}
.lang-band h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.625rem,3.4vw,2.5rem);color:#fff}
.lang-band h2 em{font-style:italic;color:#f7c988}
.lang-band .sec-sub{color:rgba(255,255,255,.8)}
.lang-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.l-chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:10px 22px;font-size:.94rem;font-weight:600;transition:var(--transition)}
.l-chip:hover{background:rgba(255,255,255,.2);transform:translateY(-2px)}
.l-chip .nt{font-size:.8125rem;opacity:.8;margin-left:8px}

/* ---------- stories ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px}
.story{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:30px;box-shadow:var(--shadow-sm);position:relative;transition:var(--transition-slow)}
.story:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.story .qt{font-family:var(--font-serif);font-size:3.25rem;color:var(--primary-light);line-height:.6;margin-bottom:16px}
.story p{font-size:.94rem;line-height:1.7;color:var(--text)}
.story .who{display:flex;align-items:center;gap:13px;margin-top:22px;padding-top:18px;border-top:1px solid var(--border-light)}
.story .av{width:44px;height:44px;border-radius:50%;color:#fff;font-weight:800;font-size:.94rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.story .who b{font-size:.9rem;display:block;color:var(--text)}
.story .who small{font-size:.78rem;color:var(--text-muted)}
.story .plan-tag{display:inline-block;margin-top:4px;background:var(--primary-50);color:var(--primary);font-size:.6875rem;font-weight:800;padding:2px 10px;border-radius:100px}
.stories-note{text-align:center;font-size:.75rem;color:var(--text-light);margin-top:24px}
@media(max-width:900px){.stories{grid-template-columns:1fr;max-width:470px;margin-left:auto;margin-right:auto}}

/* ---------- faq c5 ---------- */
.faq-c5{max-width:740px;margin:48px auto 0}
.faq-c5 details{background:#fff;border:1px solid var(--border-light);border-radius:12px;padding:22px 26px;margin-bottom:13px;box-shadow:var(--shadow-sm);transition:var(--transition)}
.faq-c5 details[open]{border-color:var(--primary-light)}
.faq-c5 summary{font-weight:700;font-size:1.03rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--text)}
.faq-c5 summary::-webkit-details-marker{display:none}
.faq-c5 summary::after{content:'+';font-family:var(--font-serif);font-size:1.5rem;color:var(--primary)}
.faq-c5 details[open] summary::after{content:'−'}
.faq-c5 details p{margin-top:13px;color:var(--text-muted);font-size:.94rem}

/* ---------- track timeline ---------- */
.tl-track{display:flex;align-items:flex-start;margin:26px 0 8px;position:relative}
.tl-node{flex:1;text-align:center;position:relative}
.tl-node::before{content:'';position:absolute;top:15px;left:-50%;width:100%;height:3px;background:var(--border);z-index:1}
.tl-node:first-child::before{display:none}
.tl-node.done::before{background:var(--sage)}
.tl-node .nd{width:32px;height:32px;border-radius:50%;background:#fff;border:3px solid var(--border);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:800;color:var(--text-light);position:relative;z-index:2;transition:var(--transition)}
.tl-node.done .nd{background:var(--sage);border-color:var(--sage);color:#fff}
.tl-node.active .nd{border-color:var(--accent);color:var(--accent-dark);box-shadow:0 0 0 5px var(--accent-light);animation:tlPulse 1.8s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-light)}50%{box-shadow:0 0 0 8px rgba(252,238,218,.5)}}
.tl-node .lb{font-size:.72rem;font-weight:700;color:var(--text-muted);line-height:1.3;padding:0 4px}
.tl-node.done .lb,.tl-node.active .lb{color:var(--text)}
.tl-live{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-muted);margin-top:14px}
.tl-live .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);animation:pulseC5 1.6s ease-in-out infinite}

/* focus visibility (accessibility) */
.option:focus-visible,.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.form-input:focus-visible,.form-textarea:focus-visible{outline:none}

/* ---------- language switcher (premium) ---------- */
.lang-switch{position:relative;display:inline-block}
.lang-switch summary{list-style:none;display:inline-flex;align-items:center;gap:7px;height:38px;cursor:pointer;font-size:.875rem;font-weight:700;color:var(--text);padding:0 14px;border:1px solid var(--border);border-radius:100px;background:#fff;transition:var(--transition);white-space:nowrap;box-shadow:var(--shadow-sm);user-select:none;line-height:1}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary::marker{display:none;content:''}
.lang-switch summary .globe{color:var(--primary);flex-shrink:0}
.lang-switch summary .cur{line-height:1}
.lang-switch summary .chev{color:var(--text-muted);transition:transform .25s ease;flex-shrink:0}
.lang-switch summary:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(151,67,29,.14)}
.lang-switch[open] summary{border-color:var(--primary);color:var(--primary-dark)}
.lang-switch[open] summary .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:#fff;border:1px solid var(--border-light);border-radius:18px;box-shadow:0 20px 50px rgba(120,72,32,.18),0 4px 12px rgba(120,72,32,.08);padding:8px;min-width:216px;max-height:400px;overflow-y:auto;z-index:90;animation:lmIn .18s ease}
@keyframes lmIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.lm-head{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-light);padding:8px 14px 6px}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border-radius:11px;font-size:.92rem;color:var(--text);white-space:nowrap;transition:background .15s ease}
.lang-menu a:hover{background:var(--primary-50);color:var(--primary-dark)}
.lang-menu .lm-native{font-weight:700}
.lang-menu .lm-en{font-size:.7rem;color:var(--text-light);font-weight:600;letter-spacing:.02em}
.lang-menu a.active{background:var(--primary-light)}
.lang-menu a.active .lm-native{color:var(--primary-dark)}
.lang-menu a.active .lm-en{display:none}
.lang-menu a.active::after{content:'✓';color:var(--primary);font-weight:800;font-size:.9rem}
.nav-links-c5{flex-wrap:nowrap}
@media (max-width:1020px){.lang-switch summary .cur{display:none}.lang-switch summary{padding:0 11px;gap:5px}}
.m-lang{margin-top:26px;border-top:1px solid var(--border-light);padding-top:20px}
.m-lang-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:12px}
.m-lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.m-lang-grid a{padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-size:.95rem;font-weight:600;color:var(--text);text-align:center}
.m-lang-grid a.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark)}

/* Indic script fallback stack — applied everywhere so translated text renders */
body{font-family:var(--font-sans),'Noto Sans Devanagari','Noto Sans Bengali','Noto Sans Tamil','Noto Sans Telugu','Noto Sans Gujarati','Noto Sans Kannada','Noto Sans Malayalam','Noto Sans Gurmukhi','Noto Sans Oriya','Noto Sans'}

/* ---------- footer social ---------- */
.footer-social{display:flex;gap:12px;margin-top:14px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);padding:0;transition:var(--transition)}
.footer-social a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}

/* ---------- sticky mobile cta ---------- */
.m-cta{position:fixed;bottom:0;left:0;right:0;background:rgba(255,250,243,.96);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:11px 18px;display:none;z-index:70;box-shadow:0 -10px 30px rgba(120,72,32,.1)}
.m-cta .in{display:flex;align-items:center;justify-content:space-between;gap:14px}
.m-cta .pr{font-size:.75rem;color:var(--text-muted)}
.m-cta .pr b{display:block;font-size:1rem;color:var(--text)}
@media(max-width:760px){.m-cta{display:block}.site-footer{padding-bottom:110px}}

/* ---------- coupon (checkout) ---------- */
.coupon-box{max-width:460px;margin:0 auto var(--space-8);background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-5) var(--space-4);box-shadow:var(--shadow-sm)}
.coupon-label{display:block;font-weight:700;font-size:.9375rem;color:var(--text);margin-bottom:var(--space-3)}
.coupon-row{display:flex;gap:var(--space-2)}
.coupon-input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);color:var(--text);letter-spacing:.06em;text-transform:uppercase}
.coupon-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(191,90,43,.12)}
.coupon-input:disabled{background:var(--success-bg);border-color:var(--success);color:var(--success);font-weight:700}
.coupon-btn{white-space:nowrap;flex:0 0 auto}
.coupon-msg{margin:var(--space-3) 0 0;font-size:.875rem;line-height:1.5}
.coupon-msg.is-ok{color:var(--success)}
.coupon-msg.is-error{color:var(--warning)}
.price-strike{font-family:var(--font-sans);font-size:1.15rem;font-weight:600;color:var(--text-light);text-decoration:line-through;margin-left:8px;vertical-align:middle}
.pricing-save{display:inline-block;margin-top:6px;font-size:.8125rem;font-weight:700;color:var(--success);background:var(--success-bg);border-radius:var(--radius-full);padding:3px 12px}