/* PintCones — aligned to DESIGN_BOOK v1
   Brand: cone #D4602B / deep #0F1418 / cream #FAF7F2
   Type: Bricolage Grotesque (display) + Inter (body) + Geist Mono (specs only)
*/

:root {
  --brand-cone: #D4602B;
  --brand-cone-deep: #B14C1E;
  --brand-cone-soft: #F4DDCD;
  --brand-deep: #0F1418;
  --brand-cream: #FAF7F2;

  --ink-50: #F6F6F4;
  --ink-100: #ECEDEF;
  --ink-200: #D8DBDF;
  --ink-300: #A6ADB4;
  --ink-500: #5C6770;
  --ink-700: #2A323A;
  --ink-900: #0F1418;

  --success: #15803D;
  --warning: #B45309;
  --danger: #B91C1C;

  --display: "Bricolage Grotesque", "Inter Tight", "Söhne", Helvetica, Arial, sans-serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-card: 0 1px 0 rgba(15,20,24,0.04), 0 8px 20px -8px rgba(15,20,24,0.10);
  --shadow-card-hover: 0 1px 0 rgba(15,20,24,0.06), 0 16px 32px -12px rgba(15,20,24,0.18);
  --shadow-cta: 0 1px 0 rgba(15,20,24,0.18), 0 12px 24px -8px rgba(212,96,43,0.40);
  --shadow-popular: 0 0 0 1px var(--brand-cone), 0 20px 40px -16px rgba(212,96,43,0.30);
  --shadow-sticky: 0 -8px 24px -12px rgba(15,20,24,0.20);

  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Clean DTC theme — reframed as warmer home-first comparator */
[data-theme="dtc"] {
  --brand-cone: #E07A4A;
  --brand-cream: #FFFEFB;
  --ink-200: #EAE7E1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--brand-cream);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(212,96,43,0.18); color: var(--ink-900); }

/* layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.wrap-prose { max-width: 680px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap, .wrap-wide, .wrap-prose { padding: 0 32px; } }

section.section { padding: 80px 0; }
@media (min-width: 1024px) { section.section { padding: 112px 0; } }

/* ============ NAV — floating frosted-pill (Theryo-style) ============ */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 980px;
  height: 60px;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 12px 0 20px;
  border-radius: 16px;

  /* Progressive frosted glass tinted with cream */
  background: linear-gradient(
    135deg,
    rgba(255, 254, 251, 0.84) 0%,
    rgba(252, 247, 240, 0.88) 50%,
    rgba(250, 245, 236, 0.86) 100%
  );
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);

  /* Soft glow border with floating feel */
  box-shadow:
    0 0 0 1px rgba(212, 96, 43, 0.06),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.32);

  transition:
    top 0.3s var(--ease-snap),
    height 0.3s var(--ease-snap),
    border-radius 0.3s var(--ease-snap),
    background 0.3s var(--ease-snap),
    box-shadow 0.3s var(--ease-snap);
}

.nav.scrolled {
  top: 10px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(
    135deg,
    rgba(255, 254, 251, 0.92) 0%,
    rgba(252, 247, 240, 0.96) 50%,
    rgba(250, 245, 236, 0.94) 100%
  );
  backdrop-filter: blur(22px) saturate(1.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.9);
  box-shadow:
    0 0 0 1px rgba(212, 96, 43, 0.12),
    0 4px 24px -4px rgba(15, 20, 24, 0.10),
    0 -1px 12px -2px rgba(212, 96, 43, 0.10),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.5);
}

/* Subtle interior tint for depth */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 96, 43, 0.025) 100%);
  pointer-events: none;
  transition: background 0.3s var(--ease-snap);
}
.nav.scrolled::before {
  background: linear-gradient(180deg, transparent 0%, rgba(212, 96, 43, 0.05) 100%);
}

/* Bottom "light leak" glow */
.nav::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 20%;
  right: 20%;
  height: 6px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 96, 43, 0.10),
    rgba(212, 96, 43, 0.06),
    transparent
  );
  filter: blur(4px);
  border-radius: 100%;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-snap), background 0.3s var(--ease-snap);
}
.nav.scrolled::after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 96, 43, 0.18),
    rgba(212, 96, 43, 0.10),
    transparent
  );
}

.nav-spacer {
  height: 88px;
}

.nav-links {
  display: flex;
  gap: 2px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.nav-links a {
  color: var(--ink-500);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover {
  color: var(--ink-900);
  background: rgba(15, 20, 24, 0.05);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink-900);
  position: relative;
  z-index: 1;
}
.logo-tm { font-size: 10px; vertical-align: super; opacity: 0.7; margin-left: -2px; }

/* Compact CTA tuned for inside the pill */
.nav-cta {
  position: relative;
  z-index: 1;
  height: 40px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 12px;
  box-shadow: 0 4px 12px -4px rgba(212, 96, 43, 0.45);
  gap: 6px;
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(212, 96, 43, 0.55);
}

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav { padding: 0 10px 0 16px; }
}
@media (max-width: 520px) {
  .nav-cta svg { display: none; }
  .nav-cta { padding: 0 12px; font-size: 12px; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  border-radius: 999px;
  border: none;
  cursor: pointer; text-decoration: none;
  transition: transform 140ms, box-shadow 140ms, filter 140ms, background 140ms, color 140ms;
}
.btn-primary {
  background: var(--brand-cone); color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-primary:hover {
  transform: translateY(-1px); filter: brightness(0.96);
  box-shadow: var(--shadow-cta);
}
.btn-secondary {
  background: transparent; color: var(--ink-900);
  border: 2px solid var(--ink-900);
}
.btn-secondary:hover {
  background: var(--ink-900); color: var(--brand-cream);
}
.btn-ghost { background: transparent; color: var(--ink-700); padding: 0 16px; }
.btn-ghost:hover { color: var(--brand-cone); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }

/* dark surface buttons */
.dark-surface .btn-secondary {
  border-color: var(--brand-cream); color: var(--brand-cream);
}
.dark-surface .btn-secondary:hover {
  background: var(--brand-cream); color: var(--ink-900);
}

/* ============ TYPE ============ */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--brand-cone);
  font-weight: 500;
}
.h-display {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-900);
}
.h-section {
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
  color: var(--ink-900);
}
.h-card {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0;
  color: var(--ink-900);
}
.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-700);
  max-width: 60ch;
  text-wrap: pretty;
}
.body { font-size: 17px; line-height: 1.6; color: var(--ink-700); }
.body-sm { font-size: 15px; line-height: 1.55; color: var(--ink-500); }
.spec { font-family: var(--mono); font-size: 13px; color: var(--ink-500); }

.dark-surface .h-display,
.dark-surface .h-section,
.dark-surface .h-card { color: var(--brand-cream); }
.dark-surface .lede,
.dark-surface .body { color: rgba(250,247,242,0.85); }
.dark-surface .body-sm { color: rgba(250,247,242,0.6); }

/* ============ SECTION HEADER ============ */
.section-head { margin-bottom: 56px; max-width: 760px; }
.section-head .eyebrow { margin-bottom: 16px; display: block; }
.section-head .lede { margin-top: 20px; }

/* ============ HERO ============ */
.hero { padding: 56px 0 80px; }
@media (min-width: 1024px) { .hero { padding: 80px 0 120px; } }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 72px; }
}
.hero-bullets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 28px;
  margin-top: 36px;
  max-width: 540px;
}
.hero-bullet {
  display: flex; gap: 12px; align-items: flex-start;
}
.hero-bullet .check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone);
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
  margin-top: 2px;
}
.hero-bullet div { font-size: 15px; line-height: 1.45; color: var(--ink-700); }
.hero-bullet b { color: var(--ink-900); display: block; font-weight: 600; }

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

.hero-stage {
  position: relative;
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--ink-200);
  box-shadow: var(--shadow-card);
  padding: 32px;
  aspect-ratio: 4/5;
  display: grid; place-items: center;
  overflow: hidden;
}
.hero-stage-tag {
  position: absolute; top: 16px; left: 16px;
  background: var(--brand-cone);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 6px 10px;
  border-radius: 999px;
  z-index: 2;
}
.hero-stage-meta {
  position: absolute; bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.1em;
}

.hero-rating {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
}
.hero-rating .stars { color: var(--brand-cone); font-size: 16px; letter-spacing: 2px; }
.hero-rating .text { font-size: 14px; color: var(--ink-700); font-weight: 500; }

/* ============ TRUST STRIP (legacy — footer only) ============ */
.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 32px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-500);
  text-transform: uppercase; letter-spacing: 0.14em;
}
.trust-row span {
  display: inline-flex; align-items: center; gap: 8px;
}
.trust-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--brand-cone);
}

/* ============ TRUST CLUSTER (hero, below CTA) ============ */
.trust-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 24px;
  max-width: 540px;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
}
.trust-badge + .trust-badge::before {
  content: "·";
  color: var(--ink-200);
  margin-right: -12px;
  font-size: 16px;
  line-height: 1;
}
.trust-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 22px; height: 22px;
}
.trust-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-500);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .trust-cluster { gap: 6px 14px; }
  .trust-label { font-size: 10px; }
}

/* ============ SOCIAL PROOF / TESTIMONIALS ============ */
.testimonials {
  padding: 56px 0;
  background: var(--ink-50);
  border-top: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
}
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }
.testimonial {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.testimonial .stars { color: var(--brand-cone); letter-spacing: 2px; font-size: 14px; }
.testimonial .quote {
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  margin: 14px 0 20px;
  text-wrap: pretty;
}
.testimonial .who {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--ink-200);
  padding-top: 16px;
}
.testimonial .avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone);
  display: grid; place-items: center;
  font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.testimonial .name { font-size: 14px; font-weight: 600; color: var(--ink-900); }
.testimonial .meta { font-size: 13px; color: var(--ink-500); }

.proof-strip {
  display: flex; justify-content: center; align-items: center; gap: 32px;
  flex-wrap: wrap;
}
.proof-strip .stat {
  text-align: center;
}
.proof-strip .stat b {
  display: block;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
}
.proof-strip .stat span {
  font-size: 13px;
  color: var(--ink-500);
}

/* ============ PROBLEM PILLARS ============ */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) { .pillars { grid-template-columns: 1fr 1fr; gap: 24px; } }

.pillar-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 36px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: box-shadow 220ms, transform 220ms;
}
.pillar-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.pillar-card .icon {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone);
  display: grid; place-items: center;
  margin-bottom: 24px;
}
.pillar-card.alt .icon {
  background: rgba(29, 78, 216, 0.08);
  color: #1D4ED8;
}
.pillar-list {
  margin: 24px 0 0; padding: 0;
  list-style: none;
}
.pillar-list li {
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 0 12px 28px;
  position: relative;
  color: var(--ink-700);
  border-top: 1px solid var(--ink-200);
}
.pillar-list li:first-child { border-top: none; padding-top: 0; }
.pillar-list li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 16px; height: 2px;
  background: var(--brand-cone);
}
.pillar-list li:first-child::before { top: 8px; }
.pillar-card.alt .pillar-list li::before { background: #1D4ED8; }

.pillar-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-500);
  padding: 5px 10px;
  background: var(--ink-100);
  border-radius: 999px;
  margin-bottom: 16px;
  align-self: flex-start;
}

/* ============ HOW IT WORKS ============ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.step-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 32px;
  box-shadow: var(--shadow-card);
  position: relative;
}
.step-num {
  width: 48px; height: 48px;
  border-radius: 999px;
  background: var(--brand-cone);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
.step-card .figure {
  margin-top: 24px;
  background: var(--ink-50);
  border-radius: 14px;
  padding: 20px;
  display: grid; place-items: center;
  color: var(--ink-700);
  min-height: 200px;
}
.step-card .figcap {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 12px;
  text-align: center;
}

.outcomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 28px;
}
@media (min-width: 768px) { .outcomes { grid-template-columns: 1fr 1fr; } }
.outcome {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex; align-items: center; gap: 16px;
}
.outcome .icon {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ============ DUAL TRACK (HOME first, BARS below) ============ */
.dual-band {
  padding: 0;
}
.dual-home {
  background: var(--brand-cream);
  padding: 80px 0;
}
.dual-bars {
  background: var(--brand-deep);
  color: var(--brand-cream);
  padding: 80px 0;
}
@media (min-width: 1024px) {
  .dual-home, .dual-bars { padding: 112px 0; }
}

.dual-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 1024px) { .dual-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 32px;
}
.benefit {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow-card);
}
.dual-bars .benefit {
  background: rgba(250,247,242,0.04);
  border-color: rgba(250,247,242,0.15);
  box-shadow: none;
}
.benefit .ico {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
.dual-bars .benefit .ico {
  background: rgba(250,247,242,0.10);
}
.benefit b {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 4px;
}
.dual-bars .benefit b { color: var(--brand-cream); }
.benefit p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-500);
}
.dual-bars .benefit p { color: rgba(250,247,242,0.65); }

.dual-image {
  background: var(--ink-50);
  border-radius: 24px;
  border: 1px solid var(--ink-200);
  aspect-ratio: 5/4;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-500);
}
.dual-bars .dual-image {
  background: rgba(250,247,242,0.04);
  border-color: rgba(250,247,242,0.15);
  color: rgba(250,247,242,0.5);
}
.dual-image-tag {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: rgba(255,255,255,0.92);
  color: var(--ink-700);
  padding: 6px 10px;
  border-radius: 999px;
}
.dual-bars .dual-image-tag {
  background: rgba(15,20,24,0.6);
  color: var(--brand-cream);
}

/* ============ COMPARE ============ */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) { .compare { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.compare-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.compare-card.highlight {
  border: 2px solid var(--brand-cone);
  box-shadow: var(--shadow-popular);
  transform: translateY(-4px);
}
.compare-card .label {
  font-family: var(--mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-500);
  margin-bottom: 12px;
}
.compare-card.highlight .label { color: var(--brand-cone); font-weight: 600; }
.compare-card ul {
  margin: 16px 0 0; padding: 0; list-style: none;
}
.compare-card li {
  font-size: 15px; line-height: 1.5;
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--ink-700);
}
.compare-card li::before {
  content: "—"; position: absolute; left: 0; top: 10px; color: var(--ink-300);
}
.compare-card.highlight li::before {
  content: "✓"; color: var(--brand-cone); font-weight: 600;
}

/* ============ STORY ============ */
.story-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px;
  align-items: start;
}
@media (min-width: 1024px) { .story-grid { grid-template-columns: 1fr 1.4fr; gap: 64px; } }
.story-pull {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 500;
  color: var(--ink-900);
  border-left: 3px solid var(--brand-cone);
  padding: 4px 0 4px 24px;
  margin: 28px 0;
  text-wrap: pretty;
}
.story-image {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 24px;
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--ink-500);
}
.story-image-tag {
  position: absolute; top: 16px; left: 16px;
  font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--ink-700);
}
.expand-btn {
  background: none; border: none; padding: 0;
  font-size: 15px; font-weight: 500;
  color: var(--brand-cone);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--brand-cone-soft);
}
.expand-btn:hover { text-decoration-color: var(--brand-cone); }

/* ============ PRICING ============ */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 640px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .price-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.price-card {
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  position: relative;
  display: flex; flex-direction: column;
  transition: box-shadow 220ms, transform 220ms, border-color 140ms;
}
.price-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.price-card.selected {
  border: 2px solid var(--ink-900);
  padding: 27px;
}
.price-card.popular {
  border: 2px solid var(--brand-cone);
  box-shadow: var(--shadow-popular);
  padding: 27px;
}
@media (min-width: 1024px) {
  .price-card.popular { transform: translateY(-8px); }
  .price-card.popular:hover { transform: translateY(-10px); }
}
.popular-ribbon {
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--brand-cone);
  color: #fff;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.price-card .name {
  font-family: var(--display);
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.price-card .units-count {
  font-size: 14px;
  color: var(--ink-500);
  margin-bottom: 20px;
  line-height: 1.4;
}
.price-card .price {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  line-height: 1;
}
.price-card .per-unit {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-500);
  margin-top: 8px;
}
.price-card .pill {
  display: inline-block;
  margin-top: 8px;
  background: var(--brand-cone-soft);
  color: var(--brand-cone-deep);
  font-size: 12px; font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
}

.shipping-note {
  margin: 20px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--ink-500);
  font-family: var(--sans);
}

.cart-bar {
  margin-top: 20px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}
@media (min-width: 768px) {
  .cart-bar { grid-template-columns: 1fr auto; gap: 24px; }
}
.cart-summary .label {
  font-size: 13px; color: var(--ink-500);
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.12em;
}
.cart-summary .total {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.cart-summary .total .strike {
  text-decoration: line-through;
  color: var(--ink-300);
  font-size: 0.65em;
  margin-right: 10px;
}
.cart-summary .save-pill {
  display: inline-block;
  background: var(--success);
  color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ============ FIT CHECK ============ */
.fit-check {
  margin-top: 40px;
  background: #fff;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 768px) { .fit-check { grid-template-columns: 200px 1fr; gap: 32px; } }
.fit-check .badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--warning); color: #fff;
  font-size: 12px; font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.fit-check h3 { margin: 0 0 8px; }

/* ============ FAQ ============ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--ink-200);
}
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 0;
  cursor: pointer; user-select: none;
  gap: 24px;
}
.faq-text {
  font-family: var(--display);
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.faq-toggle {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-700);
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  transition: transform 220ms, background 140ms, color 140ms;
}
.faq-item.open .faq-toggle {
  background: var(--brand-cone);
  color: #fff;
  transform: rotate(45deg);
}
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 300ms var(--ease-soft), padding 300ms var(--ease-soft);
  font-size: 16px; line-height: 1.6;
  color: var(--ink-700);
}
.faq-item.open .faq-a {
  max-height: 400px;
  padding: 0 0 24px;
}

/* ============ BULK FORM ============ */
.bulk-section {
  background: var(--brand-deep);
  color: var(--brand-cream);
}
.bulk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) { .bulk-grid { grid-template-columns: 1fr 1.2fr; gap: 64px; } }

.bulk-form {
  background: #fff;
  border-radius: 24px;
  padding: 32px;
  color: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field-grid .full { grid-column: 1 / -1; }

label.field {
  display: block;
}
label.field > span {
  display: block;
  font-size: 13px; font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 6px;
}
label.field > span em {
  color: var(--danger); font-style: normal; font-weight: 500;
}
.input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--ink-200);
  border-radius: 12px;
  font-family: var(--sans); font-size: 15px;
  background: #fff;
  color: var(--ink-900);
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.input:focus {
  border-color: var(--brand-cone);
  box-shadow: 0 0 0 3px rgba(212,96,43,0.15);
}
textarea.input { height: auto; padding: 12px 16px; resize: vertical; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%235C6770' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; }

/* ============ FOOTER ============ */
.foot {
  background: var(--ink-900);
  color: var(--brand-cream);
  padding: 80px 0 32px;
}
.foot a { color: var(--brand-cream); text-decoration: none; opacity: 0.8; }
.foot a:hover { color: var(--brand-cone); opacity: 1; }
.foot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 768px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; } }

.foot h5 {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(250,247,242,0.6);
  font-weight: 500;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 10px; font-size: 15px; }

.email-form {
  display: flex;
  background: rgba(250,247,242,0.08);
  border: 1px solid rgba(250,247,242,0.2);
  border-radius: 999px;
  overflow: hidden;
  max-width: 360px;
}
.email-form input {
  flex: 1; height: 44px; padding: 0 18px;
  background: transparent; border: none; color: var(--brand-cream);
  font-family: var(--sans); font-size: 14px; outline: none;
}
.email-form input::placeholder { color: rgba(250,247,242,0.4); }
.email-form button {
  height: 44px; padding: 0 18px;
  background: var(--brand-cone);
  color: #fff; border: none;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background 140ms;
}
.email-form button:hover { background: var(--brand-cone-deep); }

.foot-bottom {
  border-top: 1px solid rgba(250,247,242,0.15);
  margin-top: 56px;
  padding-top: 24px;
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  font-size: 13px;
  color: rgba(250,247,242,0.5);
}

/* ============ STICKY BUY BAR ============ */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(15, 20, 24, 0.96);
  backdrop-filter: blur(12px);
  color: var(--brand-cream);
  z-index: 35;
  box-shadow: var(--shadow-sticky);
  transform: translateY(100%);
  transition: transform 320ms var(--ease-snap);
}
.buybar.show { transform: translateY(0); }
.buybar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.buybar-meta { display: flex; align-items: center; gap: 14px; min-width: 0; }
.buybar-thumb {
  width: 44px; height: 44px;
  background: var(--brand-cream);
  border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: var(--ink-900);
}
.buybar-title { font-weight: 600; font-size: 15px; }
.buybar-sub { font-size: 13px; color: rgba(250,247,242,0.7); }
@media (max-width: 720px) {
  .buybar-inner { padding: 10px 16px; }
  .buybar-thumb { display: none; }
  .buybar-sub { display: none; }
}

/* ============ TOAST ============ */
.toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: var(--ink-900);
  color: var(--brand-cream);
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-cta);
  z-index: 50;
  animation: pop 320ms var(--ease-snap);
}
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ============ HELPERS ============ */
.center { text-align: center; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--ink-100);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-700);
  font-weight: 500;
}
.tag-cone { background: var(--brand-cone-soft); color: var(--brand-cone-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ W2 — Brand commitment additions ============ */

/* 1. Hairline cone-orange divider between neutral sections */
.section-divider-cone {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-cone) 20%, var(--brand-cone) 80%, transparent);
  opacity: 0.25;
  border: none;
  margin: 0;
}

/* 2. Cone-row decorative seam */
.cone-row-seam {
  display: flex;
  justify-content: center;
  padding: 12px 0;
  overflow: hidden;
  background: inherit;
}

/* 3. Cone-forward CTA band accent */
.dual-bars {
  border-top: 2px solid rgba(212, 96, 43, 0.35);
}

/* 4. Step number — cone silhouette replaces disc */
.step-num {
  /* Reset the disc styles; cone SVG is injected inline */
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin-bottom: 20px;
}

/* 5. Cone bullet in hero bullets */
.hero-bullet .check {
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  margin-top: 1px;
}

/* 6. Pillar-list cone bullet */
.pillar-list li.has-cone-bullet {
  padding-left: 24px;
}
.pillar-list li.has-cone-bullet::before {
  display: none;
}
.pillar-list li .cone-bullet {
  position: absolute;
  left: 0;
  top: 12px;
  display: inline-block;
  line-height: 0;
}
.pillar-list li:first-child .cone-bullet {
  top: 2px;
}

/* 7. Cross-section figures upgraded to framed art objects */
.figure--art {
  margin-top: 28px;
  background: var(--brand-cream);
  border: 2px solid var(--ink-200);
  border-radius: 16px;
  padding: 32px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: var(--ink-700);
  min-height: 240px;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: box-shadow 220ms, border-color 220ms;
}
.figure--art:hover {
  border-color: var(--brand-cone);
  box-shadow: var(--shadow-card-hover);
}
.figure--art svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}
.figure--art .figcap--art {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid var(--ink-200);
  width: 100%;
}
@media (min-width: 768px) {
  .figure--art {
    min-height: 280px;
    padding: 40px 36px 28px;
  }
  .figure--art svg {
    max-width: 380px;
  }
}

/* 8. Patent stamp badge */
.patent-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  opacity: 0.82;
  transition: opacity 180ms;
}
.patent-stamp:hover {
  opacity: 1;
}

/* 9. Ensure cone-row seam inherits correct backgrounds at boundaries */
.cone-row-seam.on-cream { background: var(--brand-cream); }
.cone-row-seam.on-white  { background: #fff; }
.cone-row-seam.on-ink50  { background: var(--ink-50); }

/* ============================================================================
   RESPONSIVE FIXES (mobile/tablet audit, 2026-05-01)
   ========================================================================= */

/* Reserve space at the bottom of the page so the sticky buy bar never sits on
   top of the footer's legal/copyright row. Buy bar is ~68px on mobile, 72px on
   desktop. Padding is on body (not html) to avoid conflicting with sticky nav. */
body { padding-bottom: 88px; }
@media (max-width: 720px) { body { padding-bottom: 76px; } }

/* Tablet (768–959px) horizontal-overflow fix.
   Root cause: `.steps` used `repeat(3, 1fr)` which is shorthand for
   `repeat(3, minmax(auto, 1fr))` — cells refuse to shrink below their content's
   intrinsic min-width. The `.figure--art` SVGs (~280px wide) push every step
   card past the available column width, and the whole row overflows the page.
   Fix:
     - allow grid cells to shrink to 0 with minmax(0, 1fr)
     - drop to 2 columns in the awkward 700–959px band
     - keep all child SVG art constrained to 100% of its container
*/
.steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) and (max-width: 959px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}
.step-card { min-width: 0; }
.step-card .figure { padding: 16px; }
.step-card .figure svg,
.figure--art svg { max-width: 100%; height: auto; }

/* Pricing grid: same `minmax(0, 1fr)` safety so featured 5-pack card never
   forces the row past the viewport at the 640–1023px tier. */
@media (min-width: 640px) {
  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.price-card { min-width: 0; }

/* Hero rating row: at narrow widths, allow the stars and text to wrap onto
   their own lines instead of producing the awkward "stars + 4.9 ·" / "owners
   alike" two-line break. */
@media (max-width: 480px) {
  .hero-rating { flex-wrap: wrap; row-gap: 4px; }
  .hero-rating .text { font-size: 13px; line-height: 1.4; }
}

/* Floating pill nav covers the very top of the dark footer when scrolled to
   the bottom. Bump the footer's top padding on mobile so the brand intro
   paragraph clears the floating nav at all scroll positions. */
@media (max-width: 720px) {
  .foot { padding-top: 96px; }
}

/* Mobile pricing card popular ribbon — make sure it doesn't get clipped by
   `overflow: hidden` ancestors on the price-grid at narrow viewports. */
.price-card.popular { overflow: visible; }

/* ============================================================================
   COMPASS FAB — sister of the Bug Catcher, links back to the reviewer hub.
   Lives only on /home/* pages (mirrors proven-focus's hide-on-hub pattern).
   ========================================================================= */
#compass-fab {
  position: fixed;
  right: 24px;
  bottom: 96px; /* sit above Bug Catcher's own FAB at bottom: 24px */
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: var(--brand-cream);
  color: var(--ink-700);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 12px 28px -10px rgba(15, 25, 35, 0.45),
    0 2px 6px -2px rgba(15, 25, 35, 0.30);
  z-index: 199;
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease;
}
#compass-fab:hover {
  transform: translateY(-2px);
  border-color: var(--brand-cone);
  color: var(--brand-cone);
}
@media (max-width: 480px) {
  #compass-fab { right: 16px; bottom: 88px; width: 48px; height: 48px; }
}