/* RadDeals site styles — uses tokens.css. Designer can retune via CSS variables. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-underline-offset: 2px; }
a:hover { color: var(--color-primary-hover); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

.container {
  width: min(100% - (var(--page-gutter) * 2), var(--content-max));
  margin-inline: auto;
}

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: 64px;
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  width: min(100% - (var(--page-gutter) * 2), var(--content-max));
  margin-inline: auto;
}
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 32px; width: auto; }
.nav {
  display: none; gap: var(--space-5); align-items: center;
}
.nav a {
  color: var(--color-text-muted); text-decoration: none;
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
}
.nav a:hover { color: var(--color-text); }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px;
  background: var(--color-primary) !important; color: var(--color-on-primary) !important;
  border-radius: var(--radius-md); text-decoration: none !important;
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
}
.nav-cta:hover { background: var(--color-primary-hover) !important; color: var(--color-on-primary) !important; }
.menu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px;
  border: 1.5px solid var(--color-border-strong); background: var(--color-surface);
  border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer;
  color: var(--color-text);
}
.nav.open {
  display: flex; flex-direction: column; align-items: stretch;
  position: absolute; left: 0; right: 0; top: 64px;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
  padding: var(--space-4); gap: var(--space-3);
}
@media (min-width: 900px) {
  .menu-toggle { display: none; }
  .nav { display: flex; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap-min); padding: 0 24px;
  border-radius: var(--radius-md); border: 2px solid transparent;
  font: inherit; font-size: var(--text-base); font-weight: var(--font-weight-bold);
  cursor: pointer; text-decoration: none; transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary {
  background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-secondary {
  background: transparent; color: var(--color-text); border-color: var(--color-text);
}
.btn-secondary:hover { background: var(--color-surface); color: var(--color-text); }
.btn-on-dark {
  background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent);
}
.btn-on-dark:hover { background: #FFDD6E; color: var(--color-on-accent); }
@media (max-width: 599px) {
  .hero-actions .btn, .pricing-card .btn { width: 100%; }
}

/* Sections */
section { padding: var(--section-padding-y) 0; }
.band-warm { background: var(--color-surface-warm); }
.band-dark {
  background: var(--color-dark); color: var(--color-on-dark);
}
.band-dark > .container > a,
.band-dark .section-lead a,
.band-dark .mailto-fallback a { color: var(--color-accent); }
.band-dark .card a,
.band-dark .form-card a { color: var(--color-primary); }
.band-dark .form-card a:hover { color: var(--color-primary-hover); }
.band-dark a:hover { color: #FFDD6E; }
.band-dark .section-lead, .band-dark p { color: var(--color-on-dark-muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text);
}
.eyebrow.pill {
  background: var(--color-accent); color: var(--color-on-accent);
  padding: 0.35rem 0.85rem; border-radius: var(--radius-pill);
  letter-spacing: 0.04em; text-transform: none;
}
.section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-2xl); font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
}
.section-lead {
  margin: 0 0 var(--space-6);
  max-width: var(--text-max);
  color: var(--color-text-muted);
  font-size: var(--text-lg); line-height: var(--leading-body);
}

/* Hero */

.hero-grid {
  display: grid; gap: var(--space-6); align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-7); }
}
.hero h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl); font-weight: var(--font-weight-bold);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  max-width: 16ch;
}
.hero-lead {
  margin: 0 0 var(--space-5);
  max-width: var(--text-max);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.price-line {
  margin: 0;
  font-size: var(--text-sm); font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.trust-note {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm); color: var(--color-text-muted);
  max-width: var(--text-max);
}


/* Lists */
.x-list, .check-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--space-3);
  max-width: var(--text-max);
}
.x-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3);
  align-items: start;
}
.check-list li {
  /* Do NOT use display:grid here: ::before + <strong> + text become 3 grid
     items and the trailing text lands in the 24px column (one word/line). */
  position: relative;
  display: block;
  padding-left: 36px;
  overflow-wrap: break-word;
  max-width: 100%;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 2px;
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: #E6F2EA; color: var(--color-success);
}
.icon-x, .icon-check {
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; margin-top: 2px;
}
.icon-x { background: #FBEAE8; color: var(--color-danger); }
.icon-check { background: #E6F2EA; color: var(--color-success); }
.x-list strong { display: block; margin-bottom: 0.15rem; }
.check-list strong { font-weight: var(--font-weight-bold); }
.x-list p, .check-list p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.two-col {
  display: grid; gap: var(--space-6); align-items: center;
}
@media (min-width: 900px) {
  .two-col { grid-template-columns: 1.2fr 1fr; }
}

/* Steps */
.steps {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}
.step-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.step-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-surface-warm);
  display: grid; place-items: center; margin-bottom: var(--space-4);
  font-weight: 700; color: var(--color-primary);
}
.step-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.step-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug);
}
.step-card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Pricing */
.pricing-wrap { display: flex; justify-content: center; }
.pricing-card {
  width: min(100%, 560px);
  background: var(--color-surface);
  border: 2px solid var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.pricing-card .badge {
  display: inline-block;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  background: var(--color-surface-warm); color: var(--color-text);
  padding: 0.25rem 0.55rem; border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.price {
  margin: 0 0 var(--space-2);
  font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
}
.price small {
  display: block; margin-top: var(--space-2);
  font-size: var(--text-base); font-weight: 400; color: var(--color-text-muted);
  letter-spacing: 0;
}
.pricing-card ul {
  margin: var(--space-5) 0; padding-left: 1.15rem;
  color: var(--color-text-muted);
}
.guarantee {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-warm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--color-border);
}
.faq summary {
  cursor: pointer; list-style: none;
  min-height: var(--tap-min);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-snug);
  padding: var(--space-3) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--color-primary); font-weight: 700; font-size: 1.25rem;
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0 0 var(--space-4);
  color: var(--color-text-muted); max-width: var(--text-max);
}

/* Form */
.contact-grid {
  display: grid; gap: var(--space-6);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; }
}
.form-card {
  background: var(--color-surface); color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}
.form-card h3 { margin: 0 0 var(--space-4); color: var(--color-text); font-size: var(--text-xl); }
.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) {
  .form-grid.two { grid-template-columns: 1fr 1fr; }
}
label {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
}
.req { color: var(--color-danger); }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea {
  width: 100%; min-height: var(--tap-min);
  font: inherit; font-size: 16px;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff; color: var(--color-text);
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(14, 107, 59, 0.25);
}
.hint { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3);
  align-items: start; font-size: var(--text-sm); color: var(--color-text-muted);
}
.consent input { margin-top: 0.3rem; width: 18px; height: 18px; }
.hp {
  position: absolute !important; left: -9999px !important;
  height: 0 !important; width: 0 !important; overflow: hidden !important;
  opacity: 0 !important; pointer-events: none !important; display: none !important;
}
.form-status {
  display: none; margin-top: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm);
}
.form-status.show { display: block; }
.form-status.ok { background: #E6F2EA; color: var(--color-success); }
.form-status.err { background: #FBEAE8; color: var(--color-danger); }

/* Footer */
.site-footer {
  background: var(--color-dark); color: var(--color-on-dark-muted);
  padding: var(--space-7) 0 var(--space-8);
  border-top: 1px solid #3A3631;
  font-size: var(--text-xs);
}
.footer-brand { margin-bottom: var(--space-4); }
.footer-brand img { height: 28px; width: auto; color: var(--color-on-dark); }
.footer-links {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: var(--space-4) 0;
}
.footer-links a { color: var(--color-on-dark); text-decoration: none; font-weight: 700; }
.footer-links a:hover { color: var(--color-accent); }
.footer-legal { margin: var(--space-4) 0 0; max-width: 48rem; line-height: 1.7; }

/* Prose pages */
.prose { max-width: 44rem; padding: var(--space-7) 0 var(--space-8); }
.prose h1 {
  font-size: var(--text-3xl); font-weight: 700;
  letter-spacing: var(--tracking-tight); line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}
.prose h2 {
  font-size: var(--text-xl); font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
}
.prose p, .prose li { color: var(--color-text-muted); }
.prose ul { padding-left: 1.2rem; }

.footer-brand img {
  /* wordmark-mono.svg uses currentColor; as <img> it paints black — invert to on-dark */
  filter: brightness(0) invert(0.97);
}

/* Sample reply cards */
.review-pair { display: grid; gap: var(--space-5); }
@media (min-width: 700px) { .review-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.review-card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}
.review-card:hover, .review-card:focus-within { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.noreply-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.owner-reply {
  margin-top: var(--space-4);
  background: var(--color-surface-warm);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4);
  font-size: var(--text-sm);
}
.owner-reply strong { display: block; font-size: var(--text-xs); color: var(--color-success); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em; }

/* Card / button hover polish */
.card { transition: box-shadow var(--transition), transform var(--transition); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn { transition: background var(--transition), transform var(--transition), box-shadow var(--transition); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

.mailto-fallback {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-on-dark-muted);
}
.mailto-fallback a {
  color: var(--color-on-dark);
  font-weight: var(--font-weight-bold);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  word-break: break-all;
}

.price-card {
  max-width: 32rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.price-card h3 { margin: 0 0 var(--space-3); font-size: var(--text-xl); }
.price-big {
  margin: 0;
  font-size: var(--text-3xl, 2rem);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.price-big span { font-size: var(--text-base); font-weight: var(--font-weight-regular); color: var(--color-text-muted); }
.price-then { margin: var(--space-2) 0 var(--space-5); color: var(--color-text-muted); }


.card-grid {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 700px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.opt { font-weight: var(--font-weight-regular); color: var(--color-text-muted); }

/* ================================================================
   DEV-2 — bolder type, photo hero, phone mock, sliders, reveal fix
   Type scale lives here (tokens.css is unchanged). When Vishwa's D-4
   bolder scale lands, update only these five variables.
   ================================================================ */
:root {
  --fs-h1: clamp(2.5rem, 1.55rem + 3.9vw, 4.5rem);      /* 40 → 72px */
  --fs-h2: clamp(2rem, 1.45rem + 2.25vw, 3.25rem);      /* 32 → 52px */
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);  /* 20 → 26px */
  --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.4375rem); /* 18 → 23px */
  --fs-body: clamp(1.0625rem, 1.01rem + 0.2vw, 1.1875rem); /* 17 → 19px */
  --reveal-dur: 350ms;
}
body { font-size: var(--fs-body); }
.hero h1, .section-title { text-wrap: balance; }
.section-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: var(--space-4); max-width: 22ch; }
.section-lead { font-size: var(--fs-lead); }
.eyebrow { color: var(--color-primary); }
.band-dark .eyebrow { color: var(--color-accent); }
.card h3, .why-list h3, .price-card h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.card p { font-size: var(--text-base); }
.x-list strong, .check-list strong { font-size: var(--text-lg); }
.x-list p { font-size: var(--text-base); }
.check-list li { font-size: var(--text-lg); line-height: 1.5; }
.faq summary { font-size: var(--fs-h3); }
.prose h1 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
.btn { min-height: 52px; padding: 0 26px; font-size: var(--text-lg); }

/* —— Hero —— */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--color-on-dark);
  background: var(--color-dark);
  padding: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
}
.hero-bg, .hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero-bg { z-index: -2; }
.hero-bg img { object-fit: cover; object-position: center 40%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,26,23,.86) 0%, rgba(28,26,23,.80) 55%, rgba(28,26,23,.90) 100%);
}
@media (min-width: 900px) {
  .hero::before { background: linear-gradient(90deg, rgba(28,26,23,.93) 0%, rgba(28,26,23,.84) 50%, rgba(28,26,23,.62) 100%); }
}
.hero-grid { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: var(--space-7); }
}
.hero h1 {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-h1); font-weight: 700;
  line-height: 1.02; letter-spacing: -0.035em;
  max-width: 13ch; color: #fff;
}
.hero-lead { margin: 0 0 var(--space-6); max-width: 34rem; color: var(--color-on-dark); font-size: var(--fs-lead); line-height: 1.5; }
.hero .price-line { color: #fff; font-size: var(--text-lg); margin-top: var(--space-2); }
.hero .trust-note { color: var(--color-on-dark-muted); font-size: var(--text-base); }
.hero .btn-primary { box-shadow: 0 8px 24px rgba(14,107,59,.35); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,251,243,.75); }
.btn-ghost:hover { background: rgba(255,251,243,.1); color: #fff; border-color: #fff; }
.hero .btn:focus-visible { box-shadow: 0 0 0 3px var(--color-dark), 0 0 0 6px var(--color-accent); }

/* —— Phone mock (CSS only; fictional, generic map-style listing) —— */
.phone-wrap { position: relative; margin: 0 auto; width: min(100%, 320px); }
.phone {
  position: relative; width: 100%; aspect-ratio: 9 / 18.5;
  border-radius: 44px; padding: 11px;
  background: linear-gradient(145deg, #3a3631, #12110f);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(255,255,255,.08);
}
.phone::before { /* notch */
  content: ""; position: absolute; top: 18px; left: 50%; width: 84px; height: 22px;
  transform: translateX(-50%); background: #0d0c0b; border-radius: 999px; z-index: 3;
}
.phone__screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 34px; background: var(--color-bg); color: var(--color-text);
  font-size: 12px; line-height: 1.35;
}
.phone__screen p { margin: 0; }
.ph-bar { display: flex; justify-content: space-between; padding: 10px 22px 0; font-size: 11px; font-weight: 700; height: 30px; }
.ph-dots { width: 34px; height: 8px; border-radius: 4px; background: #1C1A17; opacity: .8; align-self: center; }
.ph-map {
  position: relative; height: 110px; margin-top: -30px; padding-top: 30px;
  background:
    linear-gradient(115deg, transparent 46%, #fff 46%, #fff 52%, transparent 52%),
    linear-gradient(20deg, transparent 60%, #fff 60%, #fff 64%, transparent 64%),
    linear-gradient(90deg, transparent 30%, #F0E7D2 30%, #F0E7D2 31%, transparent 31%),
    radial-gradient(circle at 80% 30%, #CFE5D3 0 22px, transparent 23px),
    #E9E2D0;
}
.ph-search {
  position: absolute; left: 12px; right: 12px; top: 36px;
  background: #fff; border-radius: 999px; padding: 7px 12px;
  font-size: 11px; color: var(--color-text-muted); box-shadow: var(--shadow-sm);
}
.ph-pin {
  position: absolute; left: 52%; top: 72px; width: 18px; height: 18px;
  background: var(--color-primary); border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: var(--shadow-sm);
}
.ph-sheet {
  position: relative; margin-top: -14px; background: #fff;
  border-radius: 18px 18px 0 0; padding: 14px 14px 0; height: calc(100% - 96px);
  box-shadow: 0 -4px 14px rgba(28,26,23,.08);
}
.ph-name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.ph-meta { color: var(--color-text-muted); font-size: 11.5px; margin-top: 2px !important; }
.ph-meta b { color: var(--color-text); }
.ph-stars { color: var(--color-star); letter-spacing: 1px; }
.ph-fic {
  display: inline-block; margin-top: 6px !important; padding: 2px 8px; border-radius: 999px;
  background: var(--color-surface-warm); color: var(--color-text); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.ph-tabs { display: flex; gap: 14px; margin: 10px 0 8px; border-bottom: 1px solid var(--color-border); font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.ph-tabs span { padding-bottom: 6px; }
.ph-tabs .on { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.ph-list { display: grid; gap: 8px; transition: transform .45s cubic-bezier(.2,.7,.2,1), clip-path .45s cubic-bezier(.2,.7,.2,1); }
.ph-sheet { overflow: hidden; }
.rv { padding: 8px 0 8px; border-bottom: 1px solid #F1EBDD; }
.rv__h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.rv__av { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #E7DFCE; font-size: 10px; font-weight: 700; }
.rv__new { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--color-primary); background: #E6F4EC; padding: 1px 6px; border-radius: 999px; }
.st { display: flex; gap: 1px; margin: 3px 0 2px !important; font-size: 12px; }
.st i { position: relative; font-style: normal; color: #D9D2C3; }
.st i.f::after { content: "★"; position: absolute; left: 0; top: 0; color: var(--color-star); transform-origin: 50% 55%; }
.rv__t { font-size: 11.5px; }
.rp {
  margin-top: 5px !important; padding: 5px 8px; border-radius: 0 8px 8px 0;
  background: var(--color-surface-warm); border-left: 2.5px solid var(--color-accent); font-size: 11px;
  transform-origin: 0 0;
}
.rp b { display: block; font-size: 9.5px; color: var(--color-success); text-transform: uppercase; letter-spacing: .04em; }

/* Animated state (JS adds .is-anim when motion is allowed). Only opacity/transform animate. */
.phone.is-anim .rv { opacity: 0; transform: translateY(14px); transition: opacity .35s ease-out, transform .35s ease-out; }
.phone.is-anim .rv.show { opacity: 1; transform: none; }
.phone.is-anim .rv .st i.f::after { transform: scale(0); }
.phone.is-anim .rv.show .st i.f::after { animation: starIn .28s cubic-bezier(.3,1.6,.5,1) forwards; }
.phone.is-anim .rv.show .st i:nth-child(1)::after { animation-delay: .25s; }
.phone.is-anim .rv.show .st i:nth-child(2)::after { animation-delay: .37s; }
.phone.is-anim .rv.show .st i:nth-child(3)::after { animation-delay: .49s; }
.phone.is-anim .rv.show .st i:nth-child(4)::after { animation-delay: .61s; }
.phone.is-anim .rv.show .st i:nth-child(5)::after { animation-delay: .73s; }
@keyframes starIn { from { transform: scale(0); } to { transform: scale(1); } }
.phone.is-anim .rp { opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s ease-out, transform .3s ease-out; }
.phone.is-anim .rv.replied .rp { opacity: 1; transform: none; }
.phone.is-anim .rv__new { opacity: 1; transition: opacity .3s; }
.phone.is-anim .rv.replied .rv__new { opacity: 0; }
.phone.is-anim.is-reset .rv { transition-duration: .25s; }

.stat-chip {
  position: absolute; left: -28px; bottom: 64px;
  display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center;
  background: #fff; color: var(--color-text); border-radius: 16px; padding: 10px 14px 10px 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.stat-chip__tag {
  grid-column: 1 / -1; justify-self: start; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-on-accent); padding: 2px 7px; border-radius: 999px;
}
.stat-chip__num { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--color-primary); font-variant-numeric: tabular-nums; min-width: 2ch; }
.stat-chip__lbl { font-size: 12px; line-height: 1.25; font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 420px) { .stat-chip { left: -6px; } }
.phone-wrap figcaption { margin-top: var(--space-4); text-align: center; font-size: var(--text-xs); color: var(--color-on-dark-muted); }

/* —— Why Hyderabad strip —— */
.why { padding-top: var(--space-8); }
@media (max-width: 480px) { .hero .eyebrow.pill { font-size: 12.5px; letter-spacing: 0.01em; } }
.why-list { list-style: none; margin: var(--space-6) 0 var(--space-7); padding: 0; display: grid; gap: var(--space-5); }
@media (min-width: 800px) { .why-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why-list li { display: flex; gap: var(--space-4); align-items: flex-start; padding-top: var(--space-4); border-top: 3px solid var(--color-text); }
.why-ico { flex: none; font-size: var(--text-sm); font-weight: 700; color: var(--color-on-accent); background: var(--color-accent); border-radius: 999px; padding: 4px 10px; margin-top: 3px; }
.why-list h3 { margin: 0 0 var(--space-1); }
.why-list p { margin: 0; color: var(--color-text-muted); }
.photo-row { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .photo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.photo-row li { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: #E7DFCE; }
.photo-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-row span {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(28,26,23,.85); color: #fff; font-weight: 700; font-size: var(--text-sm);
}

/* —— Split sections with photo —— */
.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: var(--space-8); } }
.split-photo { width: 100%; max-width: 440px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; box-shadow: var(--shadow-lg); justify-self: center; background: #E7DFCE; }
@media (max-width: 899px) { .split-photo { aspect-ratio: 4 / 3; max-width: 100%; } }

/* —— Steps with images —— */
.card.step { padding: 0; overflow: hidden; }
.card.step img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: var(--color-surface-warm); border-bottom: 1.5px solid var(--color-border); }
.step__body { padding: var(--space-5); }
.step__n { margin: 0 0 var(--space-1) !important; font-size: var(--text-sm) !important; font-weight: 700; color: var(--color-primary) !important; text-transform: uppercase; letter-spacing: .06em; }

/* —— Comparison slider —— */
.compare {
  --pos: 50%;
  position: relative; display: grid; max-width: 720px; margin-inline: auto;
  border-radius: var(--radius-lg); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  box-shadow: var(--shadow-md); background: var(--color-surface);
}
.compare__layer { grid-area: 1 / 1; width: 100%; height: 100%; margin: 0; }
picture.compare__layer { display: block; }
picture.compare__layer img { width: 100%; height: auto; -webkit-user-drag: none; pointer-events: none; }
.compare--img { max-width: 760px; }
@media (max-width: 599px) { .compare--img { max-width: 360px; } }
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare--review .review-card { border-radius: 0; box-shadow: none; border: 0; padding: var(--space-6) var(--space-6) var(--space-6); }
.compare--review .review-card:hover { transform: none; box-shadow: none; }
.compare--review .compare__before { background: #FBF7EF; }
.compare--review .compare__after { background: #fff; }
.compare--review .review-card { position: relative; padding-top: calc(var(--space-6) + 34px); }
.compare--review .ba-tag { position: absolute; top: var(--space-5); }
.compare--review .compare__before .ba-tag { left: var(--space-6); }
.compare--review .compare__after .ba-tag { right: var(--space-6); }
.review-text { font-size: var(--fs-lead); font-weight: 700; line-height: 1.35; margin: var(--space-3) 0 0; max-width: 30ch; }
.ba-tag { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 999px; }
.compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px;
  background: var(--color-text); pointer-events: none; z-index: 2;
}
.compare__handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: 18px; letter-spacing: -1px;
  box-shadow: 0 6px 18px rgba(28,26,23,.3); border: 3px solid #fff;
}
.compare__range {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; pointer-events: none; z-index: 3;
}
.compare.is-focus .compare__handle span { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--color-focus); }
.compare.is-drag .compare__handle span { transform: translate(-50%, -50%) scale(1.08); }
.drag-hint { margin-bottom: var(--space-5); }
/* No JS: show both states stacked, no slider */
.no-js .compare { display: grid; gap: 2px; cursor: auto; background: var(--color-border); }
.no-js .compare__layer { grid-area: auto; }
.no-js .compare__before { clip-path: none; order: -1; }
.no-js .compare__handle, .no-js .compare__range, .no-js .drag-hint { display: none; }

.example-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-on-accent); padding: 3px 10px; border-radius: 999px;
}
.note-example { margin: var(--space-5) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.mock-stars { margin: 0; color: var(--color-star); font-size: 18px; letter-spacing: 2px; }
.tag-before { background: #FCE8E6; color: var(--color-danger); }
.tag-after { background: #E6F4EC; color: var(--color-success); }

/* —— Contact + audit preview —— */
.contact-grid { display: grid; gap: var(--space-7); align-items: start; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.audit-preview { margin: 0 0 var(--space-5); max-width: 340px; }
.audit-preview img { width: 100%; border-radius: 14px; box-shadow: 0 24px 50px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
.audit-preview figcaption { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-on-dark-muted); }

/* —— Scroll reveal (fixed) ——
   Visible by default. Only hidden when <html class="js">, and only until the
   section enters the viewport. Fast, small translate, ends at opacity:1, no filter. */
.js .reveal {
  opacity: 0; transform: translate3d(0, 12px, 0);
  transition: opacity var(--reveal-dur) cubic-bezier(.2,.7,.2,1), transform var(--reveal-dur) cubic-bezier(.2,.7,.2,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* —— WhatsApp sticky button (only created by JS when enabled) —— */
.wa-fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border-radius: 999px; background: #0E6B3B; color: #fff !important; text-decoration: none; font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}
.wa-fab:focus-visible { box-shadow: var(--focus-ring); }
@media (min-width: 900px) { .wa-fab { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .phone .rv, .phone .rp, .phone .st i.f::after { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .card, .review-card, .btn, .compare__handle span { transition: none !important; transform: none; }
  .card:hover, .btn:hover { transform: none; }
}
@media print { .js .reveal { opacity: 1; transform: none; } }

/* Pricing: centred card */
#pricing .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
#pricing .section-title { margin-inline: auto; }
#pricing .price-card { width: min(100%, 34rem); text-align: left; margin-top: var(--space-4); }
#pricing .price-card .btn { width: 100%; margin-top: var(--space-5); }
/* Form card sits on the dark band: keep its text dark on white */
.band-dark .form-card p, .band-dark .form-card .hint { color: var(--color-text-muted); }
.band-dark .form-card .form-status.ok { color: var(--color-success); }
.band-dark .form-card .form-status.err { color: var(--color-danger); }
.why-ico { min-width: 44px; text-align: center; }
@media (max-width: 599px) {
  .photo-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 74%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); -webkit-overflow-scrolling: touch; }
  .photo-row li { scroll-snap-align: start; }
}
.nowrap { white-space: nowrap; }
.form-card .consent { margin: var(--space-5) 0; }
.form-card button[type="submit"] { width: 100%; }
.form-card .hint { margin-top: var(--space-2); }
#problem .x-list li { align-items: center; margin-bottom: var(--space-4); }
#problem .x-list strong { font-size: var(--fs-lead); line-height: 1.35; }
@media (max-width: 599px) {
  .audit-preview { max-width: 270px; margin-inline: auto; }
  .audit-preview figcaption { text-align: center; }
}
/* Legal pages: inline header nav stays on one line on small phones */
.site-header .nav--inline a { white-space: nowrap; }
@media (max-width: 420px) {
  .site-header .nav--inline { gap: var(--space-4); }
  .site-header .nav--inline a { font-size: 0.9375rem; }
}

/* ==========================================================================
   DEV-2b: D-4 v2 integration (type scale, Fraunces, motion tokens, phone)
   Values copied from v2 type-scale.css / motion.css. tokens.css untouched.
   ========================================================================== */
:root {
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --fs-h1: clamp(2.5rem, 1.664rem + 3.4286vw, 4.75rem);   /* 40 → 76px */
  --fs-h2: clamp(2rem, 1.443rem + 2.2857vw, 3.5rem);      /* 32 → 56px */
  --fs-h3: clamp(1.25rem, 1.064rem + .7619vw, 1.75rem);   /* 20 → 28px */
  --fs-lead: clamp(1.125rem, 1.032rem + .381vw, 1.375rem);/* 18 → 22px */
  --fs-body: clamp(1rem, .954rem + .1905vw, 1.125rem);    /* 16 → 18px */
  --fs-price: clamp(3rem, 2.257rem + 3.048vw, 5rem);      /* 48 → 80px */
  --fs-eyebrow: clamp(.8125rem, .79rem + .095vw, .875rem);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-reveal: cubic-bezier(.2, .7, .2, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --stagger-step: 80ms;
}
/* Display serif: H1, H2 and the price only */
.hero h1 {
  font: 600 var(--fs-h1)/1.02 var(--font-display);
  letter-spacing: -0.02em; text-wrap: balance; max-width: 14ch;
}
.section-title, .prose h1 {
  font-family: var(--font-display); font-weight: 600;
  line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance;
}
.section-title { font-size: var(--fs-h2); max-width: 18ch; }
#contact .section-title { max-width: 14ch; }
.eyebrow:not(.pill) { font-size: var(--fs-eyebrow); }
.price-big {
  font: 600 var(--fs-price)/1 var(--font-display);
  letter-spacing: -0.03em; font-variant-numeric: lining-nums;
}
.price-big span { font-family: var(--font-sans); letter-spacing: 0; vertical-align: middle; }

/* Reveal: our fix (visible without JS; ends at opacity 1, no filter) using the v2 easing token.
   Stagger children (v2 motion.css), only when motion is allowed. */
.js .reveal { transition-timing-function: var(--ease-reveal); }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal [data-stagger] > * {
    opacity: 0; transform: translate3d(0, 12px, 0);
    transition: opacity var(--reveal-dur) var(--ease-reveal), transform var(--reveal-dur) var(--ease-reveal);
  }
  .js .reveal.is-in [data-stagger] > * { opacity: 1; transform: none; }
  .js .reveal.is-in [data-stagger] > :nth-child(2) { transition-delay: var(--stagger-step); }
  .js .reveal.is-in [data-stagger] > :nth-child(3) { transition-delay: calc(var(--stagger-step) * 2); }
  .js .reveal.is-in [data-stagger] > :nth-child(4) { transition-delay: calc(var(--stagger-step) * 3); }
  /* Step art waits until its section is on screen, then plays once (rings, pops); the loupe keeps drifting. */
  .js .reveal:not(.is-in) .step__art * { animation-play-state: paused !important; }
}
@media print { .js .reveal [data-stagger] > * { opacity: 1 !important; transform: none !important; } }

/* Step illustrations (inline animated SVG; static under reduced motion via the SVG's own media query) */
.card.step .step__art { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; background: #FFF4D6; border-bottom: 1.5px solid var(--color-border); }

/* Phone mock: v2 styling reference (bezel, cream screen, Example pill, Fraunces name, review cards) */
.phone { border-radius: 52px; background: linear-gradient(150deg, #2A2722, #3A362F 45%, #1C1A17); }
.phone__screen { border-radius: 41px; background: #FFFBF3; }
.phone::before { width: 92px; height: 26px; top: 17px; }
.ph-search::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1.6px solid currentColor; border-radius: 50%; vertical-align: -1px; }
.ph-sheet { border-radius: 22px 22px 0 0; }
.ph-ex {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: #1C1A17; color: #FFFBF3; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.ph-name { margin-top: 6px !important; font: 600 21px/1.1 var(--font-display); letter-spacing: -0.015em; color: #1C1A17; }
.ph-meta { font-size: 11px; }
.ph-open { font-size: 11px; color: var(--color-text-muted); margin-top: 1px !important; }
.ph-open b { color: var(--color-success); }
.ph-tabs { margin-top: 8px; }
.ph-list { gap: 7px; }
.rv { padding: 8px 9px; border: 1px solid #E7DFCE; border-radius: 12px; background: #FFFBF3; }
.rp { background: #FFF4D6; border-left: 4px solid #FFD241; }

/* Feed viewport: clips the scrolling review list below the tabs (replaces the clip-path, which could drift from the
   compositor-driven transform for a frame). */
.ph-sheet { display: flex; flex-direction: column; }
.ph-feed { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.ph-list { transition: transform .45s var(--ease-reveal); }
.ph-ex { align-self: flex-start; }

/* Step art animations (moved out of the inline SVG <style> blocks for CSP; selectors are s1-/s2-/s3- scoped) */
@media (prefers-reduced-motion: no-preference){
.s1-mag{animation:s1mag 4.8s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes s1mag{0%{transform:translate(0,0)}100%{transform:translate(-190px,-40px)}}
.s1-ring{stroke-dasharray:36 200;animation:s1ring 1.2s cubic-bezier(.2,.8,.2,1) .3s both}
@keyframes s1ring{from{stroke-dasharray:0 200}}
.s1-x{transform-box:fill-box;transform-origin:center;animation:s1pop .35s cubic-bezier(.34,1.56,.64,1) both}
.s1-x:nth-of-type(1){animation-delay:.9s}.s1-x:nth-of-type(2){animation-delay:1.05s}.s1-x:nth-of-type(3){animation-delay:1.2s}
@keyframes s1pop{from{transform:scale(0)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion: no-preference){
.s2-l{transform-box:fill-box;transform-origin:left center;animation:s2line .45s cubic-bezier(.2,.8,.2,1) both}
.s2-l:nth-of-type(1){animation-delay:.5s}.s2-l:nth-of-type(2){animation-delay:.75s}.s2-l:nth-of-type(3){animation-delay:1s}
@keyframes s2line{from{transform:scaleX(0)}}
.s2-stamp{transform-box:fill-box;transform-origin:center;animation:s2stamp .5s cubic-bezier(.34,1.56,.64,1) 1.5s both}
@keyframes s2stamp{from{opacity:0;transform:scale(1.4) rotate(-14deg)}to{opacity:1;transform:scale(1) rotate(-6deg)}}
.s2-chip{animation:s2chip .5s cubic-bezier(.2,.8,.2,1) both}.s2-chip[data-n="2"]{animation-delay:.2s}.s2-chip[data-n="3"]{animation-delay:.4s}
@keyframes s2chip{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion: no-preference){
.s3-b{transform-box:fill-box;transform-origin:left center;animation:s3bar .9s cubic-bezier(.2,.8,.2,1) both}
.s3-r[data-n="1"] .s3-b{animation-delay:.3s}.s3-r[data-n="2"] .s3-b{animation-delay:.45s}.s3-r[data-n="3"] .s3-b{animation-delay:.6s}
@keyframes s3bar{from{transform:scaleX(0)}}
.s3-cal{transform-box:fill-box;transform-origin:center;animation:s3cal .6s cubic-bezier(.34,1.56,.64,1) 1.3s both}
@keyframes s3cal{from{opacity:0;transform:translateY(16px) scale(.92)}to{opacity:1;transform:none}}
}

/* Former inline style attributes (CSP: no unsafe-inline) */
.nav.nav--inline { display: flex; }
.eyebrow.eyebrow--accent { color: var(--color-accent); }
.hint.hint--gap { margin-top: var(--space-3); }

/* —— Guide / landing pages (DEV-3) —— */
.breadcrumb { margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.breadcrumb ol, .prose .breadcrumb ol { list-style: none; margin: 0; padding: 0; }
.breadcrumb li { display: inline; color: var(--color-text-muted); }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); color: var(--color-border-strong); }
.prose h3 { font-size: var(--text-lg); font-weight: 700; margin: var(--space-5) 0 var(--space-2); color: var(--color-text); }
.prose ol { padding-left: 1.4rem; }
.prose li { margin-bottom: var(--space-2); }
.prose li strong, .prose p strong { color: var(--color-text); }
.example-box {
  margin: var(--space-4) 0 var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--color-surface-warm); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent); border-radius: 12px;
}
.example-box p { margin: 0 0 var(--space-3); color: var(--color-text); }
.example-box p:last-child { margin-bottom: 0; }
.example-box__label { font-size: var(--text-xs); color: var(--color-text-muted) !important; }
.cta-box {
  margin: var(--space-6) 0; padding: var(--space-5); text-align: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px;
}
.cta-box p { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.cta-box p:last-child { margin-bottom: 0; }
.see-also, .more-link { font-weight: 700; }
.related { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.related h2 { margin-top: 0; }
.guides { padding: var(--space-7) 0; }
.guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); max-width: 44rem; }
.guide-list a { font-weight: 700; font-size: var(--text-lg); }