/* ═══ AMARAH — Landing Page Styles ═══ */
/* All design tokens live in global.css */

body {
  background: var(--ivory);
  color: var(--text);
}

/* ── Reveal animations ── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.reveal {
  transform: translateY(30px);
}

.reveal-left {
  transform: translateX(-40px);
}

.reveal-right {
  transform: translateX(40px);
}

.reveal-scale {
  transform: scale(.93);
}

.reveal.vis,
.reveal-left.vis,
.reveal-right.vis,
.reveal-scale.vis {
  opacity: 1;
  transform: none;
}

[data-delay="1"] {
  transition-delay: .08s;
}

[data-delay="2"] {
  transition-delay: .16s;
}

[data-delay="3"] {
  transition-delay: .24s;
}

[data-delay="4"] {
  transition-delay: .32s;
}

[data-delay="5"] {
  transition-delay: .40s;
}

[data-delay="6"] {
  transition-delay: .48s;
}

/* ══════════════════════════
   NAV (landing variant)
   — always dark text + dark logo (light hero)
   — frosted cream bg once scrolled
══════════════════════════ */
#mainNav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 68px;
  background: transparent;
  transition: background .35s ease, box-shadow .35s ease;
}

#mainNav.scrolled {
  background: rgba(255, 253, 252, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--line), 0 4px 24px rgba(93, 27, 52, .07);
}

.nav-logo {
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-links li a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-dark);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  transition: color .2s, background .2s;
}

.nav-links li a:hover {
  color: var(--rose);
  background: rgba(146, 26, 64, .06);
}

.nav-btn-outline {
  border: 1.5px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
  color: var(--text-dark) !important;
  transition: border-color .2s, color .2s, background .2s !important;
}

.nav-btn-outline:hover {
  border-color: var(--rose) !important;
  color: var(--rose) !important;
  background: transparent !important;
}

.nav-cta {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep)) !important;
  color: #fff !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 20px !important;
  font-weight: 700 !important;
  font-size: .875rem !important;
  box-shadow: 0 6px 18px rgba(110, 20, 50, .28) !important;
  transition: background .2s ease-out, box-shadow .2s ease-out, transform .15s ease-out !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  min-height: 36px !important;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: linear-gradient(135deg, #7d1737, #5f102b) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(110, 20, 50, .34) !important;
}

.nav-cta:active {
  transform: scale(.97);
}

.mobile-menu {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dark);
  padding: 6px;
  border-radius: 8px;
  transition: background .2s;
}

.mobile-menu:hover {
  background: rgba(146, 26, 64, .08);
}

.mobile-menu:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* ══════════════════════════
   HERO
══════════════════════════ */
.landing-shell {
  width: 100%;
}

.hero-shell {
  min-height: 100dvh;
  background:
    radial-gradient(ellipse at 10% 30%, rgba(146, 26, 64, .10) 0%, transparent 45%),
    radial-gradient(ellipse at 88% 10%, rgba(231, 200, 207, .55) 0%, transparent 38%),
    radial-gradient(ellipse at 60% 90%, rgba(180, 68, 98, .08) 0%, transparent 40%),
    linear-gradient(150deg, var(--ivory) 0%, var(--rose-mist) 45%, var(--sand) 100%);
  display: flex;
  align-items: center;
  padding: 100px 40px 60px;
  overflow: hidden;
  position: relative;
}

.hero-grid {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* Hero copy */
.hero-copy {
  color: var(--text-dark);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 24px;
}

.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-light), var(--rose-soft));
  flex-shrink: 0;
  animation: blink 2.2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .55;
    transform: scale(.75);
  }
}

.hero-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-dark);
  margin-bottom: 20px;
  letter-spacing: -.02em;
}

.hero-title em {
  font-style: italic;
  color: var(--rose);
}

.hero-strike {
  position: relative;
  display: inline-block;
  color: var(--text-dark);
}

.hero-strike::after {
  content: "";
  position: absolute;
  left: -.06em;
  right: -.04em;
  top: 54%;
  height: .12em;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  box-shadow: 0 1px 10px rgba(146, 26, 64, .16);
  transform: rotate(-2.2deg);
}

.hero-sub {
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--text);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

/* ── CTA buttons — pill gradient (old layout style) ── */
.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  padding: 14px 30px;
  border-radius: var(--radius-pill);
  transition: opacity .2s ease-out, transform .15s ease-out, box-shadow .2s ease-out;
  box-shadow: 0 8px 28px rgba(110, 20, 50, .45);
  touch-action: manipulation;
  cursor: pointer;
}

.btn-primary:hover {
  opacity: .88;
  box-shadow: 0 12px 36px rgba(110, 20, 50, .55);
}

.btn-primary:active {
  transform: scale(.97);
}

.btn-secondary {
  display: inline-block;
  color: var(--text-dark);
  font-weight: 600;
  font-size: .9375rem;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: rgba(255, 255, 255, .7);
  transition: border-color .2s ease-out, background .2s ease-out, color .2s ease-out;
  touch-action: manipulation;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: var(--rose);
  background: #fff;
  color: var(--rose);
}

.btn-secondary:active {
  transform: scale(.97);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.meta-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  backdrop-filter: blur(8px);
}

.meta-chip strong {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--text-dark);
}

.meta-chip span {
  font-size: .75rem;
  color: var(--text);
}

/* Hero stage */
.hero-stage {
  position: relative;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
}

.glow-one {
  width: 400px;
  height: 400px;
  top: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(231, 200, 207, .7), transparent 70%);
}

.glow-two {
  width: 280px;
  height: 280px;
  bottom: -40px;
  left: -20px;
  background: radial-gradient(circle, rgba(146, 26, 64, .12), transparent 70%);
}

.hero-bubble {
  position: absolute;
  z-index: 10;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px 14px;
  font-size: .78rem;
  color: var(--text);
  max-width: 235px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.45;
  box-shadow: 0 8px 28px rgba(93, 27, 52, .10);
}

.bubble-top {
  top: 10px;
  left: -20px;
}

.bubble-bottom {
  bottom: 40px;
  right: -10px;
}

.bubble-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff;
  margin-top: 1px;
}

.bubble-icon svg {
  display: block;
}

.device-frame {
  position: relative;
  z-index: 5;
  background: linear-gradient(145deg, var(--rose-deep) 0%, #7B1736 50%, var(--rose) 100%);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: 0 40px 100px rgba(93, 27, 52, .25), 0 8px 32px rgba(0, 0, 0, .15);
}

.device-topbar {
  display: flex;
  gap: 5px;
  padding: 0 4px 10px;
}

.device-topbar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
}

.device-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}

.device-card-main {
  position: relative;
}

.device-card-label {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
}

.device-portrait {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center top;
  display: block;
  transform: scale(1.3);
}

.device-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(20, 8, 16, .92), transparent);
  padding: 22px 16px 16px;
  color: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.device-overlay-title {
  font-size: .85rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.device-overlay p {
  font-size: .72rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.4;
}

.score-pill {
  flex-shrink: 0;
  background: radial-gradient(circle at top left, rgba(187, 78, 115, .22), transparent 34%),
    linear-gradient(180deg, #fffaf7, #fff3ee);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.score-pill span {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text);
}

.score-pill small {
  font-size: .8rem;
  color: var(--text);
  white-space: nowrap;
}

.device-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.mini-panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 14px;
  padding: 12px;
}

.mini-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mini-title {
  font-size: .9rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.mini-tag {
  font-size: .7rem;
  font-weight: 700;
  color: white;
  background: rgb(46 139 85);
  padding: 2px 7px;
  border-radius: 5px;
}

.check-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.check-list div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .8rem;
  color: rgba(255, 255, 255, .78);
}

.check-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

.stat-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.stat-rows div {
  display: flex;
  justify-content: space-between;
  font-size: .8rem;
}

.stat-rows span {
  color: rgba(255, 255, 255, .58);
}

.stat-rows strong {
  color: #fff;
  font-weight: 700;
}

/* ══════════════════════════
   PROOF STRIP
══════════════════════════ */
.proof-strip {
  background:
    radial-gradient(circle at top left, rgba(187, 78, 115, .22), transparent 34%),
    linear-gradient(180deg, #fffaf7, #fff3ee);
  padding: 78px 40px;
  border-top: 1px solid rgba(146, 26, 64, .08);
  border-bottom: 1px solid rgba(146, 26, 64, .08);
}

.proof-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.proof-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(146, 26, 64, .08);
  border: 1px solid rgba(146, 26, 64, .12);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--rose);
  margin-bottom: 18px;
}

.proof-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.22;
  margin-bottom: 14px;
}

.proof-card {
  position: relative;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(146, 26, 64, .1);
  box-shadow: 0 24px 54px rgba(87, 33, 52, .08);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.proof-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 42%);
  pointer-events: none;
}

.proof-card>* {
  position: relative;
  z-index: 1;
}

.proof-card p {
  font-size: .96rem;
  color: rgba(64, 48, 56, .78);
  line-height: 1.72;
}

.proof-card-intro {
  padding: 34px;
  background:
    radial-gradient(circle at top right, rgba(146, 26, 64, .14), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(255, 248, 245, .92));
}

.proof-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(146, 26, 64, .07);
  color: var(--rose);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.proof-chip svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.proof-metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}

.proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 1rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(146, 26, 64, .14), rgba(177, 45, 89, .07));
  color: var(--rose);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.proof-icon svg {
  width: 27px;
  height: 27px;
}

.proof-label {
  display: block;
  margin-bottom: 14px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(89, 60, 72, .64);
}

.proof-number {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3rem;
  font-weight: 700;
  color: var(--rose);
  line-height: .95;
  margin-bottom: 16px;
}

/* ══════════════════════════
   SHARED SECTION HEADS
══════════════════════════ */
.section-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-kicker {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--rose);
  margin-bottom: 14px;
}

.section-kicker-light {
  color: rgba(255, 255, 255, .65);
}

.section-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 3.2rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.015em;
}

.section-head p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.65;
}

/* ══════════════════════════
   COMPARE SECTION (Problem vs Amarah) — LIGHT
   — replaces old content-section #1
══════════════════════════ */
.compare-section {
  padding: 96px 40px;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--rose-mist) 45%, var(--sand) 100%);
}

.compare-intro {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.compare-intro .section-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--rose);
}

.compare-intro h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 3.2rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.015em;
}

.compare-intro p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.65;
}

.compare-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.compare-col {
  border-radius: var(--radius-xl);
  padding: 36px;
  border: 1px solid var(--line);
}

.compare-col-old {
  background: #fff;
  border-color: var(--line);
}

.compare-col-new {
  background: linear-gradient(145deg, var(--rose-deep) 0%, #7B1736 50%, var(--rose) 100%);
  border-color: transparent;
  color: #fff;
}

.compare-header {
  margin-bottom: 22px;
}

.compare-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.compare-badge-old {
  background: rgba(200, 40, 60, .10);
  color: #B02030;
  border: 1px solid rgba(200, 40, 60, .22);
}

.compare-badge-old svg {
  stroke: #B02030;
}

.compare-badge-new {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
}

.compare-image {
  width: 100%;
  aspect-ratio: 2/1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 22px;
  opacity: .9;
}

.compare-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
}

.compare-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
  width: 20px;
  height: 20px;
}

.compare-col-old .compare-list li svg {
  stroke: #C01E36;
}

.compare-list-good li {
  color: rgba(255, 255, 255, .88);
}

.compare-list-good li svg {
  stroke: var(--rose-soft);
  width: 20px;
  height: 20px;
}

.compare-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.compare-stat {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

.compare-stat strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1;
  margin-bottom: 4px;
}

.compare-stat span {
  font-size: .7rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.3;
}

.compare-cta {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  color: var(--rose-deep);
  font-weight: 700;
  font-size: .9375rem;
  padding: 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  transition: background .2s ease-out, transform .15s ease-out, box-shadow .2s ease-out;
  margin-top: 8px;
  touch-action: manipulation;
  cursor: pointer;
  min-height: 48px;
}

.compare-cta:hover {
  background: var(--sand);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
}

.compare-cta:active {
  transform: scale(.97);
}

/* ══════════════════════════
   PROCESS SECTION — LIGHT
══════════════════════════ */
.process-section {
  padding: 96px 40px;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--rose-mist) 50%, var(--sand) 100%);
}

.process-section .section-head h2 {
  color: var(--text-dark);
}

.process-section .section-kicker {
  color: var(--rose);
}

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

.process-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  transition: transform .25s, box-shadow .25s;
}

.process-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 44px rgba(93, 27, 52, .10);
}

.process-step {
  display: block;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
  width: 70px;
  height: 70px;
  display: grid;
  align-items: center;
  align-content: center;
  padding: 16px 20px 16px;
  background-color: #F8EAEE;
  border-radius: 18px;
}

.process-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--rose-mist), #f0e0e8);
  border: 1px solid rgba(146, 26, 64, .12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rose);
  margin-bottom: 16px;
}

.process-icon svg {
  display: block;
}

.process-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.35;
}

.process-card p {
  font-size: .875rem;
  color: var(--text);
  line-height: 1.65;
}

/* ══════════════════════════
   DIFFERENCE SECTION — DARK
══════════════════════════ */
.difference-section {
  padding: 96px 40px;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
}

.difference-section .section-head h2 {
  color: #fff;
}

.difference-section .section-kicker {
  color: var(--rose-soft);
}

.difference-section .section-head p {
  color: rgba(255, 255, 255, .68);
}

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

.difference-card {
  background: rgba(255, 255, 255, .10);
  border-radius: var(--radius-lg);
  padding: 32px 26px;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s, transform .25s;
}

.difference-card:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-3px);
}

.difference-icon {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 18px;
}

.difference-icon svg {
  display: block;
  width: 25px;
  height: 25px;
}

.difference-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.35;
}

.difference-card p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.65;
}

/* ══════════════════════════
   SHOWCASE SECTION — DARK
══════════════════════════ */
.showcase-section {
  padding: 96px 40px;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
}

.showcase-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.showcase-copy .section-kicker {
  display: block;
  text-align: left;
  margin-bottom: 14px;
  color: var(--rose-soft);
}

.showcase-copy h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.6rem, 2.8vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 18px;
  letter-spacing: -.015em;
}

.showcase-copy>p {
  font-size: 1rem;
  color: rgba(255, 255, 255, .76);
  line-height: 1.72;
  margin-bottom: 14px;
  max-width: 520px;
}

.showcase-mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0 24px;
}

.mini-insight {
  background: rgba(255, 255, 255, .07);
  border-radius: var(--radius-md);
  padding: 3px 20px 20px;
  border: 1px solid rgba(255, 255, 255, .10);
  text-align: center;
}

.mini-insight strong {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
}

.mini-insight span {
  font-size: .9rem;
  color: rgba(255, 255, 255, .58);
}

.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.showcase-tags span {
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(231, 200, 207, .12);
  color: var(--rose-soft);
  border: 1px solid rgba(231, 200, 207, .18);
}

.showcase-board {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.showcase-score {
  background: linear-gradient(150deg, #f5f1f1 0%, var(--rose-mist) 50%, var(--sand) 100%);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  gap: 24px;
  align-items: center;
}

.score-ring {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2.5px solid rgb(147 34 68);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .05);
}

.score-ring strong {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}

.score-ring span {
  font-size: .9rem;
  text-align: center;
  line-height: 1.3;
}

.score-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-detail div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .9rem;
}

.score-detail span {
  /* color: rgba(255, 255, 255, .6); */
}

.score-detail strong {
  /* color: var(--rose-soft); */
  font-weight: 700;
}

.match-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.match-card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.match-card-copy {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(20, 8, 16, .92), transparent);
  padding: 32px 24px 24px;
  color: #fff;
}

.match-card-copy h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.match-card-copy p {
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
}

/* ══════════════════════════
   PRICING SECTION — LIGHT
══════════════════════════ */
.pricing-section {
  padding: 96px 40px;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--beige-light) 50%, var(--sand) 100%);
}

.pricing-section .section-head h2 {
  color: var(--text-dark);
}

.pricing-section .section-head p {
  color: var(--text);
}

.pricing-section .section-kicker {
  color: var(--rose);
}

.pricing-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}

.pricing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 40px;
  position: relative;
  transition: transform .25s, box-shadow .25s;
  color: var(--text);
}

.pricing-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(93, 27, 52, .10);
}

.pricing-card-featured {
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
  border-color: rgba(231, 200, 207, .2);
  transform: translateY(-6px);
  box-shadow: 0 32px 80px rgba(110, 20, 50, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.pricing-card-featured:hover {
  transform: translateY(-9px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .22);
}

.featured-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-header {
  margin-bottom: 16px;
}

.pricing-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--rose);
  margin-bottom: 8px;
}

.pricing-card-featured .pricing-name {
  color: var(--rose-soft);
}

.pricing-amount {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}

.pricing-card-featured .pricing-amount {
  color: #fff;
}

.pricing-amount span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  margin-left: 2px;
}

.pricing-card-featured .pricing-amount span {
  color: rgba(255, 255, 255, .5);
}

.pricing-copy {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.pricing-card-featured .pricing-copy {
  color: rgba(255, 255, 255, .65);
}

.pricing-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}

.pricing-list li {
  font-size: .875rem;
  color: var(--text);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}

.pricing-card-featured .pricing-list li {
  color: rgba(255, 255, 255, .78);
}

.pricing-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose-light), var(--rose-soft));
}

.price-button {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-pill);
  font-size: .9375rem;
  font-weight: 700;
  transition: opacity .2s ease-out, transform .15s ease-out, box-shadow .2s ease-out;
  touch-action: manipulation;
  cursor: pointer;
  min-height: 48px;
}

.price-button:active {
  transform: scale(.97);
}

.price-button-outline {
  border: 1.5px solid var(--line);
  color: var(--text-dark);
  background: transparent;
}

.price-button-outline:hover {
  border-color: var(--rose);
  color: var(--rose);
  background: rgba(146, 26, 64, .04);
  text-decoration: none;
}

.price-button-fill {
  background: white;
  color: var(--rose-deep);
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(245, 237, 232, .25);
}

.price-button-fill:hover {
  opacity: .92;
  box-shadow: 0 10px 32px rgba(245, 237, 232, .3);
  text-decoration: none;
}

/* ══════════════════════════
   CANADA SECTION (Privacy / Built in Canada)
   — icon + illustration layout — DARK
══════════════════════════ */
.canada-section {
  padding: 96px 40px;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
  position: relative;
  overflow: hidden;
}

.canada-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(255, 255, 255, .06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(0, 0, 0, .18) 0%, transparent 50%);
  pointer-events: none;
}

.canada-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.canada-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}

.canada-head .section-kicker {
  display: block;
  color: var(--rose-soft);
  margin-bottom: 14px;
}

.canada-head h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -.015em;
}

.canada-head p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, .70);
  line-height: 1.65;
}

.canada-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.canada-card {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s, transform .25s;
}

.canada-card:hover {
  background: rgba(255, 255, 255, .15);
  transform: translateY(-3px);
}

.canada-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #fff;
}

.canada-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.35;
}

.canada-card p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .70);
  line-height: 1.65;
}

/* Wide card spanning full width */
.canada-card-wide {
  grid-column: 1 / -1;
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 36px;
  background: rgba(0, 0, 0, .18);
  border-color: rgba(255, 255, 255, .12);
}

.canada-wide-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.canada-wide-body {
  flex: 1;
  min-width: 0;
}

.canada-wide-body h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.canada-wide-body p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .70);
  line-height: 1.6;
  margin-bottom: 16px;
}

.canada-community-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.canada-community-chips span {
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .18);
}

/* ══════════════════════════
   JOURNAL SECTION — LIGHT
══════════════════════════ */
.journal-section {
  padding: 96px 40px;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--rose-mist) 50%, var(--sand) 100%);
}

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

.journal-card {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
  transition: transform .25s, box-shadow .25s;
}

.journal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 52px rgba(93, 27, 52, .12);
}

.journal-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

.journal-copy {
  padding: 24px;
}

.journal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.journal-meta span {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rose);
  background: var(--rose-mist);
  padding: 3px 9px;
  border-radius: 5px;
}

.journal-meta small {
  font-size: .78rem;
  color: var(--text);
}

.journal-copy h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 10px;
}

.journal-copy p {
  font-size: .875rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
}

.journal-copy strong {
  font-size: .82rem;
  font-weight: 700;
  color: var(--rose);
}

/* ══════════════════════════
   FAQ SECTION — DARK
══════════════════════════ */
.faq-section {
  padding: 96px 40px;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
}

.faq-section .section-head h2 {
  color: #fff;
}

.faq-section .section-kicker {
  color: var(--rose-soft);
}

.faq-section .section-head p {
  color: rgba(255, 255, 255, .68);
}

.faq-grid {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-item {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  transition: background .2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.faq-item[open] {
  background: rgba(255, 255, 255, .12);
}

.faq-item summary {
  padding: 20px 24px;
  font-size: .9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 50px;
  transition: color .2s;
  user-select: none;
}

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

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 300;
  color: rgba(255, 255, 255, .6);
  transition: transform .25s;
}

.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq-item summary:hover {
  color: #fff;
}

.faq-item p {
  padding: 0 24px 20px;
  font-size: .9rem;
  color: rgba(255, 255, 255, .68);
  line-height: 1.72;
}

/* ══════════════════════════
   CTA STRIP (compact conversion sections)
══════════════════════════ */
.cta-strip {
  max-width: 1124px;
  padding: 64px;
  margin: 78px auto;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
  border-radius: var(--radius-xl);
}

.cta-strip-light {
  background: linear-gradient(150deg, #f5f1f1 0%, var(--rose-mist) 50%, var(--sand) 100%);
}

.cta-strip-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

.cta-strip-copy {
  flex: 1;
  min-width: 0;
  max-width: 710px;
}

.cta-strip-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1rem;
  letter-spacing: -.015em;
}

.cta-strip-light .cta-strip-title {
  color: var(--text-dark);
}

.cta-strip-copy p {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .72);
  line-height: 1.55;
}

.cta-strip-light .cta-strip-copy p {
  color: var(--text);
}

.cta-strip-action {
  flex-shrink: 0;
}

/* ══════════════════════════
   FINAL CTA — LIGHT
══════════════════════════ */
.final-cta {
  padding: 96px 40px;
  background: linear-gradient(150deg, var(--ivory) 0%, var(--beige-light) 50%, var(--sand) 100%);
}

.final-cta-card {
  margin: 0 auto;
  text-align: center;
  max-width: 1124px;
  padding: 64px;
  margin: 78px auto;
  background: linear-gradient(180deg, rgba(146, 26, 64, .97), rgba(110, 20, 50, .97));
  border-radius: var(--radius-xl);
}

.final-cta-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 700;
  color: white !important;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.final-cta-card p {
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .65);
  line-height: 1.7;
  max-width: 804px;
  margin: auto auto 36px;
}

.final-cta a.btn-primary {
  background: white;
  color: var(--rose) !important;
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(245, 237, 232, .25);
}

.btn-light {
  display: inline-block;
  background: #fff;
  color: var(--rose-deep);
  font-weight: 800;
  font-size: 1rem;
  padding: 15px 40px;
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
  transition: background .2s ease-out, transform .15s ease-out, box-shadow .2s ease-out;
  touch-action: manipulation;
  cursor: pointer;
}

.btn-light:hover {
  background: var(--sand);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
}

.btn-light:active {
  transform: scale(.97);
}

/* ══════════════════════════
   FOOTER (landing variant)
══════════════════════════ */
footer {
  background: linear-gradient(180deg, #1A0510 0%, #0E020A 100%);
  padding: 64px 40px 32px;
}

.footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.footer-brand p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .48);
  line-height: 1.7;
  max-width: 280px;
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul li a {
  font-size: .875rem;
  color: rgba(255, 255, 255, .6);
  transition: color .2s;
}

.footer-col ul li a:hover {
  color: #fff;
}

.footer-bottom {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.footer-bottom span {
  font-size: .78rem;
  color: rgba(255, 255, 255, .32);
}

/* ══════════════════════════
   ACCESSIBILITY
══════════════════════════ */
:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════
   RESPONSIVE — 1024px
══════════════════════════ */
@media (max-width: 1024px) {
  .hero-shell {
    padding: 88px 32px 56px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .hero-stage {
    max-width: 540px;
    margin: 0 auto;
  }

  .proof-grid {
    grid-template-columns: 1fr 1fr;
  }

  .proof-card-intro {
    grid-column: 1 / -1;
  }

  .compare-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .process-grid {
    grid-template-columns: 1fr 1fr;
  }

  .difference-grid {
    grid-template-columns: 1fr 1fr;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .canada-grid {
    grid-template-columns: 1fr 1fr;
  }

  .canada-card-wide {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

/* ══════════════════════════
   RESPONSIVE — 768px
══════════════════════════ */
@media (max-width: 768px) {
  #mainNav {
    padding: 0 20px;
    height: 60px;
  }

  .nav-links {
    display: none;
    position: fixed;
    inset: 60px 0 0 0;
    background: rgba(25, 8, 18, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 4px;
    z-index: 99;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li a {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 1rem;
    color: rgba(255, 255, 255, .88) !important;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .nav-links li a:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
  }

  .nav-cta {
    margin-top: 8px;
    text-align: center !important;
  }

  .mobile-menu {
    display: block;
  }

  .hero-shell {
    padding: 80px 20px 48px;
  }

  .hero-grid {
    gap: 36px;
  }

  .hero-title {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    text-align: center;
  }

  .bubble-top,
  .bubble-bottom {
    display: none;
  }

  .proof-strip {
    padding: 56px 20px;
  }

  .proof-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .proof-card,
  .proof-card-intro {
    padding: 24px;
    border-radius: 24px;
  }

  .proof-chip-row {
    gap: 10px;
  }

  .proof-chip {
    width: 100%;
    justify-content: center;
  }

  .cta-strip {
    padding: 48px 20px;
  }

  .cta-strip-inner {
    flex-direction: column;
    gap: 28px;
    text-align: center;
  }

  .cta-strip-action {
    width: 100%;
  }

  .cta-strip-action a {
    display: block;
    text-align: center;
  }

  .compare-section,
  .process-section,
  .difference-section,
  .showcase-section,
  .pricing-section,
  .canada-section,
  .journal-section,
  .faq-section {
    padding: 64px 20px;
  }

  .compare-grid {
    grid-template-columns: 1fr;
  }

  .compare-col {
    padding: 28px 24px;
  }

  .compare-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .process-grid {
    grid-template-columns: 1fr;
  }

  .difference-grid {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card-featured {
    transform: none;
    order: -1;
  }

  .canada-grid {
    grid-template-columns: 1fr;
  }

  .canada-card-wide {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .journal-grid {
    grid-template-columns: 1fr;
  }

  .device-stack {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  footer {
    padding: 48px 20px 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .final-cta {
    padding: 64px 20px;
  }
}

/* ══════════════════════════
   RESPONSIVE — 480px
══════════════════════════ */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .hero-meta {
    gap: 8px;
  }

  .meta-chip {
    padding: 8px 12px;
  }

  .showcase-mini-grid {
    grid-template-columns: 1fr;
  }

  .compare-stats-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}