/* Cochonnet — shared brand tokens & typography (used by /guide and any sub-pages) */
:root {
  --coral: #FF6663;
  --salmon: #FE7D69;
  --cream: #FAF1E6;
  --cream-2: #F4E6D2;
  --ink: #1A0F0A;
  --ink-70: rgba(26, 15, 10, 0.7);
  --ink-50: rgba(26, 15, 10, 0.5);
  --ink-30: rgba(26, 15, 10, 0.3);
  --ink-10: rgba(26, 15, 10, 0.1);
  --ink-05: rgba(26, 15, 10, 0.05);
  --olive: #5A6B3F;
}

html { background: var(--cream); }
body {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "ss02";
}

.font-display {
  font-family: "Caprasimo", "Georgia", serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}

.display-xl { font-size: clamp(3.25rem, 11vw, 8.5rem); line-height: 0.92; }
.display-lg { font-size: clamp(2.5rem, 6.5vw, 5rem); line-height: 0.95; }
.display-md { font-size: clamp(1.875rem, 3.5vw, 3.25rem); line-height: 1.02; }
.display-sm { font-size: clamp(1.5rem, 2.5vw, 2.25rem); line-height: 1.1; }

.eyebrow {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.text-coral { color: var(--coral); }
.text-cream { color: var(--cream); }
.text-ink { color: var(--ink); }
.text-ink-70 { color: var(--ink-70); }
.text-ink-50 { color: var(--ink-50); }
.text-ink-30 { color: var(--ink-30); }
.bg-coral { background-color: var(--coral); }
.bg-salmon { background-color: var(--salmon); }
.bg-cream { background-color: var(--cream); }
.bg-cream-2 { background-color: var(--cream-2); }
.bg-ink { background-color: var(--ink); }
.border-ink-10 { border-color: var(--ink-10); }
.border-coral-30 { border-color: rgba(255, 102, 99, 0.3); }
.bg-coral-05 { background-color: rgba(255, 102, 99, 0.05); }
.bg-coral-10 { background-color: rgba(255, 102, 99, 0.1); }

.grain { position: relative; isolation: isolate; }
.grain::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
}

.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.link-underline:hover { background-size: 0 1px; background-position: 100% 100%; }

.phone-shadow {
  box-shadow:
    0 30px 60px -20px rgba(26, 15, 10, 0.45),
    0 18px 36px -18px rgba(26, 15, 10, 0.3);
}

::selection { background: var(--coral); color: var(--cream); }

/* Numbered section badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: rgba(255, 102, 99, 0.12);
  color: var(--coral);
  font-family: "Caprasimo", "Georgia", serif;
  font-size: 1rem;
  font-weight: 400;
}

/* Guide card */
.guide-card {
  position: relative;
  display: block;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--ink-10);
  border-radius: 1.5rem;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.25s, box-shadow 0.35s;
}
.guide-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 102, 99, 0.4);
  box-shadow: 0 18px 40px -22px rgba(26, 15, 10, 0.25);
}
.guide-card .arrow {
  position: absolute; top: 1.5rem; right: 1.5rem;
  color: var(--ink-30); transition: color 0.25s, transform 0.3s;
}
.guide-card:hover .arrow { color: var(--coral); transform: translateX(3px); }
.guide-card .icon-wrap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 0.875rem;
  background: rgba(255, 102, 99, 0.1); color: var(--coral); margin-bottom: 0.875rem;
}

/* Sidebar nav */
.guide-side a {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.625rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--ink-70);
  transition: background-color 0.2s, color 0.2s;
}
.guide-side a:hover { background: var(--ink-05); color: var(--ink); }
.guide-side a.active { background: rgba(255, 102, 99, 0.1); color: var(--coral); }

/* Tip callout */
.callout {
  display: flex; gap: 0.875rem;
  padding: 1rem 1.125rem;
  background: rgba(255, 102, 99, 0.06);
  border: 1px solid rgba(255, 102, 99, 0.18);
  border-radius: 0.875rem;
  color: var(--ink-70);
  font-size: 0.95rem; line-height: 1.55;
}
.callout svg { color: var(--coral); flex-shrink: 0; margin-top: 0.125rem; }

/* Premium pill */
.pill-premium {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  background: var(--coral); color: var(--cream);
  border-radius: 9999px;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Feature table */
.feature-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.feature-table thead th {
  text-align: left; padding: 0.75rem 1rem;
  background: var(--cream-2);
  font-weight: 600; color: var(--ink-70);
  font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.feature-table tbody td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--ink-10);
  vertical-align: top;
  color: var(--ink-70);
}
.feature-table tbody td:first-child {
  color: var(--coral); font-weight: 600; white-space: nowrap;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }