/* Nav, promo bar, and header shell styles live in marketing-global.css */

/* ── HERO ── */
.hero { background: linear-gradient(135deg, var(--color-hero-from) 0%, var(--color-hero-mid) 60%, var(--color-hero-to) 100%); padding: clamp(2.5rem, 6vw, 4.375rem) clamp(1rem, 5vw, 5%) clamp(2.25rem, 5vw, 3.75rem); position: relative; overflow-x: hidden; overflow-y: visible; }
.hero::after { content: ''; position: absolute; top: -40%; right: max(-10%, -80px); width: min(600px, 120vw); height: min(600px, 120vw); background: radial-gradient(circle, var(--color-hero-glow) 0%, transparent 70%); pointer-events: none; }
.hero-inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 5.5rem); align-items: center; position: relative; z-index: 2; min-width: 0; }
.hero-inner > * { min-width: 0; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  border-radius: 30px;
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-success-emphasis);
  margin-bottom: 1.2rem;
}
.hero-eyebrow svg { width: 12px; height: 12px; stroke: var(--color-success-emphasis); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hero h1 { font-size: clamp(3.4rem, 3.5vw, 3rem); font-weight: 900; color: var(--color-on-inverse); line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1rem; }
.hero-sub { color: var(--color-inverse-muted-mid); font-size: 1rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 460px; }

.hero-checks { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 0.55rem; }
.hero-checks li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--color-inverse-muted); font-size: 0.92rem; line-height: 1.45; overflow-wrap: break-word; }
.hero-checks li .chk { width: 18px; height: 18px; background: var(--color-success-icon-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.2rem; }
.hero-checks li strong { display: inline-block; color: var(--color-on-inverse); font-weight: 800; font-size: 0.95em; margin-bottom: 0.15rem; }
.hero-checks li .chk svg { width: 10px; height: 10px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.hero-cta-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.hero-cta-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.btn-primary-lg { background: var(--color-primary); color: var(--color-on-inverse); padding: 0.85rem clamp(1.25rem, 4vw, 2rem); border-radius: 8px; font-weight: 800; font-size: clamp(0.9rem, 2.5vw, 1rem); text-decoration: none; border: none; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.5rem; box-shadow: 0 4px 20px var(--color-primary-shadow); touch-action: manipulation; max-width: 100%; }
.btn-primary-lg:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 8px 28px var(--color-primary-shadow-strong); }
.btn-primary-lg svg { width: 16px; height: 16px; stroke: var(--color-on-inverse); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.hero-note { font-size: 0.78rem; color: var(--color-inverse-muted-faint); margin-top: 0.9rem; }
.hero-rating { display: flex; align-items: center; gap: 0.6rem; color: var(--color-inverse-muted-soft); font-size: 0.82rem; }
.star-row { display: flex; gap: 1px; }
.star-row svg { width: 13px; height: 13px; fill: var(--color-dot-warn); stroke: none; }

/* hero photo + floating stat cards */
.hero-visual { position: relative; justify-self: end; width: 100%; max-width: 420px; }
.hero-photo-wrap {
  position: relative;
  border-radius: clamp(1.25rem, 4vw, 2rem);
  overflow: visible;
  box-shadow: var(--shadow-hero-photo);
}
.hero-photo-frame {
  border-radius: inherit;
  overflow: hidden;
  line-height: 0;
  background: var(--color-photo-shine);
}
.hero-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 905;
  object-fit: cover;
  object-position: center 22%;
}
.hero-float-card {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "hf-icon hf-body"
    "hf-icon hf-trend";
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.16rem;
  min-width: 0;
  max-width: min(12.5rem, 42vw);
  padding: 0.5rem 0.65rem;
  background: var(--color-surface);
  border-radius: 10px;
  box-shadow: var(--shadow-md), 0 12px 28px var(--color-float-card-shadow-deep);
  border: 1px solid var(--color-float-card-border);
}
.hero-float-card .hf-icon {
  grid-area: hf-icon;
  width: 30px; height: 30px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  align-self: center;
}
.hero-float-card .hf-icon svg { width: 15px; height: 15px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hero-float-card .hf-body { grid-area: hf-body; min-width: 0; }
.hero-float-card .hf-body strong { display: block; font-size: 0.72rem; font-weight: 800; color: var(--color-heading); letter-spacing: -0.02em; line-height: 1.2; }
.hero-float-card .hf-body span { font-size: 0.62rem; color: var(--color-muted); line-height: 1.25; display: block; margin-top: 0.08rem; }
.hero-float-card .hf-trend {
  grid-area: hf-trend;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-success);
  white-space: nowrap;
  justify-self: start;
}
/* Slight overlap onto the rounded frame (~12–18px); body of each card sits outside the image */
.hero-float-card--tl {
  top: 8%;
  left: 50px;
  right: auto;
  bottom: auto;
  transform: translateX(calc(-100% + var(--hero-card-overlap, 1rem)));
}
.hero-float-card--tr {
  top: 11%;
  right: 80px;
  left: auto;
  bottom: auto;
  transform: translateX(calc(100% - var(--hero-card-overlap, 1rem)));
}
.hero-float-card--bl {
  bottom: 17%;
  left: 30px;
  right: auto;
  top: auto;
  transform: translateX(calc(-100% + var(--hero-card-overlap, 1rem)));
}
.hero-float-card--br {
  bottom: 5%;
  right: 50px;
  left: auto;
  top: auto;
  transform: translateX(calc(100% - var(--hero-card-overlap, 1rem)));
}
@media (min-width: 1001px) and (prefers-reduced-motion: no-preference) {
  .hero-float-card--tl { animation: hero-float-tl 5s ease-in-out infinite; }
  .hero-float-card--tr { animation: hero-float-tr 5s ease-in-out infinite; animation-delay: 0.6s; }
  .hero-float-card--bl { animation: hero-float-bl 5s ease-in-out infinite; animation-delay: 1.2s; }
  .hero-float-card--br { animation: hero-float-br 5s ease-in-out infinite; animation-delay: 1.8s; }
}
@keyframes hero-float-tl {
  0%, 100% { transform: translate(calc(-100% + var(--hero-card-overlap, 1rem)), 0); }
  50% { transform: translate(calc(-100% + var(--hero-card-overlap, 1rem)), -5px); }
}
@keyframes hero-float-tr {
  0%, 100% { transform: translate(calc(100% - var(--hero-card-overlap, 1rem)), 0); }
  50% { transform: translate(calc(100% - var(--hero-card-overlap, 1rem)), -5px); }
}
@keyframes hero-float-bl {
  0%, 100% { transform: translate(calc(-100% + var(--hero-card-overlap, 1rem)), 0); }
  50% { transform: translate(calc(-100% + var(--hero-card-overlap, 1rem)), -5px); }
}
@keyframes hero-float-br {
  0%, 100% { transform: translate(calc(100% - var(--hero-card-overlap, 1rem)), 0); }
  50% { transform: translate(calc(100% - var(--hero-card-overlap, 1rem)), -5px); }
}

/* ── TRUST STRIP ── */
.trust-strip { background: var(--color-surface-muted); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 5px clamp(1rem, 5vw, 5%); }
.trust-strip-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; justify-content: center; }
.trust-label { font-size: 0.78rem; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.trust-logos { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 2.5rem); flex-wrap: wrap; justify-content: center; }
.trust-logo-img {
  height: 70px;
  width: auto;
  max-width: min(200px, 46vw);
  object-fit: contain;
  object-position: center;
  display: block;
}
.trust-logo-text { font-size: 0.8rem; font-weight: 700; color: var(--color-muted-light); text-transform: uppercase; letter-spacing: 0.07em; white-space: nowrap; }

/* ── SECTIONS ── */
body > section { padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 5vw, 5%); }
.section-inner { max-width: 1160px; margin: 0 auto; min-width: 0; }
.section-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.6rem; }
h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); font-weight: 900; color: var(--color-heading); line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 0.85rem; }
.section-sub { color: var(--color-muted); font-size: 1rem; line-height: 1.7; max-width: 600px; margin-bottom: 3rem; }

/* ── HOW IT WORKS ── */
.hiw { background: var(--color-surface); }
.hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-width: 0; }
.hiw-grid > * { min-width: 0; }
.hiw-steps { display: flex; flex-direction: column; gap: 1.1rem; }
.step { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-surface); transition: box-shadow 0.2s, border-color 0.2s; }
.step:hover { box-shadow: var(--shadow-lg); border-color: var(--color-border-hover); }
.step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-inverse); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.82rem; flex-shrink: 0; }
.step-body h4 { font-weight: 800; font-size: 1.02rem; color: var(--color-heading); margin-bottom: 0.35rem; letter-spacing: -0.02em; line-height: 1.3; }
.step-body p { font-size: 0.84rem; color: var(--color-body-secondary); line-height: 1.55; max-width: 38ch; }
.step-outcome { display: block; margin-top: 0.5rem; font-size: 0.78rem; font-weight: 600; line-height: 1.35; color: color-mix(in srgb, var(--color-success-strong) 82%, var(--color-muted) 18%); }

/* mock browser */
.hiw-visual { background: linear-gradient(145deg, var(--color-mock-chrome), var(--color-mock-chrome-border)); border-radius: 16px; padding: 1.5rem; }
.hiw-visual img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--shadow-4xl); }
.mock-browser { background: var(--color-surface); border-radius: 10px; box-shadow: var(--shadow-4xl); overflow: hidden; }
.mock-bar { background: var(--color-mock-window-bar); padding: 0.55rem 0.9rem; display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--color-mock-window-border); }
.dot-r { width: 10px; height: 10px; border-radius: 50%; background: var(--color-dot-close); }
.dot-y { width: 10px; height: 10px; border-radius: 50%; background: var(--color-dot-warn); }
.dot-g { width: 10px; height: 10px; border-radius: 50%; background: var(--color-success); }
.mock-url { flex: 1; min-width: 0; background: var(--color-surface); border-radius: 4px; padding: 0.2rem 0.6rem; font-size: 0.65rem; color: var(--color-muted-light); margin-left: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-content { padding: 1.2rem; }
.mock-outlet-tag { display: inline-block; background: var(--color-mock-tag-bg); color: var(--color-mock-tag-text); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 4px; margin-bottom: 0.6rem; }
.mock-title { font-weight: 800; font-size: 0.92rem; color: var(--color-heading); line-height: 1.4; margin-bottom: 0.75rem; }
.mock-lines { display: flex; flex-direction: column; gap: 0.35rem; }
.ml { height: 7px; background: var(--color-mock-skele); border-radius: 4px; }
.ml.w100{width:100%}.ml.w80{width:80%}.ml.w60{width:60%}
.mock-pills { display: flex; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; }
.mock-pill { display: flex; align-items: center; gap: 0.3rem; background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: 30px; padding: 0.2rem 0.6rem; font-size: 0.67rem; font-weight: 700; color: var(--color-success-emphasis); }
.mock-pill svg { width: 9px; height: 9px; stroke: var(--color-success-emphasis); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── FEATURES ── */
.features { background: var(--color-surface-muted); }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 5rem); min-width: 0; }
.feature-row > * { min-width: 0; }
.feature-row:last-child { margin-bottom: 0; }
.feature-row.rev .fimg { order: -1; }

.feat-icon-wrap { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; box-shadow: 0 4px 16px var(--color-primary-shadow-soft); }
.feat-icon-wrap svg { width: 22px; height: 22px; stroke: var(--color-on-inverse); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feature-text h3 { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.feature-text p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.75; margin-bottom: 1.2rem; }
.feature-row--ai-premium .fimg-box { box-shadow: var(--shadow-2xl); border: 1px solid color-mix(in srgb, var(--color-success) 22%, var(--color-border)); }
/* Mid-page CTA after credibility */
.features-cta { text-align: center; margin-top: clamp(2.75rem, 6vw, 4.5rem); padding: clamp(2rem, 4.5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-xl); max-width: 640px; margin-left: auto; margin-right: auto; }
.features-cta h3 { font-size: clamp(1.35rem, 2.8vw, 1.85rem); font-weight: 900; color: var(--color-heading); margin-bottom: 1.35rem; letter-spacing: -0.03em; line-height: 1.2; }
.features-cta-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; }
.btn-outline-lg { background: transparent; color: var(--color-heading); padding: 0.85rem clamp(1.25rem, 4vw, 2rem); border-radius: 8px; font-weight: 800; font-size: clamp(0.9rem, 2.5vw, 1rem); text-decoration: none; border: 2px solid var(--color-border); transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; touch-action: manipulation; max-width: 100%; }
.btn-outline-lg:hover { border-color: var(--color-heading); background: var(--color-surface-muted); }
.feat-checks { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.feat-checks li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--color-body); font-weight: 500; }
.feat-checks li .fck { width: 18px; height: 18px; background: var(--color-success-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feat-checks li .fck svg { width: 10px; height: 10px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.fimg-box { border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow-feature-visual); display: flex; flex-direction: column; gap: 0.75rem; }
.fimg-card { background: var(--color-surface); border-radius: 8px; padding: 0.95rem 1.1rem; display: flex; align-items: center; gap: 0.85rem; box-shadow: var(--shadow-md); min-width: 0; }
@media (min-width: 993px) {
  .fimg-card { transition: transform 0.22s ease, box-shadow 0.22s ease; }
  .fimg-card:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow-lg);
  }
}
.fimg-icon-box { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fimg-icon-box svg { width: 18px; height: 18px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.fimg-body { min-width: 0; }
.fimg-body strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--color-heading); }
.fimg-body span { font-size: 0.74rem; color: var(--color-muted); }
.fimg-trend { margin-left: auto; font-size: 0.82rem; font-weight: 700; color: var(--color-success); white-space: nowrap; }

/* Chart / decorative icon tints — tokens only */
.hf-icon.chart-blue { background: var(--color-chart-blue-bg); }
.hf-icon.chart-blue svg { stroke: var(--color-chart-blue); }
.hf-icon.chart-green { background: var(--color-success-bg); }
.hf-icon.chart-green svg { stroke: var(--color-success); }
.hf-icon.chart-amber { background: var(--color-chart-amber-bg); }
.hf-icon.chart-amber svg { stroke: var(--color-chart-amber); }
.hf-icon.chart-purple { background: var(--color-chart-purple-bg); }
.hf-icon.chart-purple svg { stroke: var(--color-chart-purple); }
.fimg-icon-box.chart-blue { background: var(--color-chart-blue-bg); }
.fimg-icon-box.chart-blue svg { stroke: var(--color-chart-blue); }
.fimg-icon-box.chart-green { background: var(--color-success-bg); }
.fimg-icon-box.chart-green svg { stroke: var(--color-success); }
.fimg-icon-box.chart-amber { background: var(--color-chart-amber-bg); }
.fimg-icon-box.chart-amber svg { stroke: var(--color-chart-amber); }
.fimg-icon-box.chart-purple { background: var(--color-chart-purple-bg); }
.fimg-icon-box.chart-purple svg { stroke: var(--color-chart-purple); }
.fimg-icon-box.chart-yellow { background: var(--color-chart-yellow-bg); }
.fimg-icon-box.chart-yellow svg { stroke: var(--color-chart-yellow); }
.fimg-box--grad-blue { background: linear-gradient(145deg, var(--color-chart-grad-blue-a), var(--color-chart-grad-blue-b)); }
.fimg-box--grad-green { background: linear-gradient(145deg, var(--color-chart-grad-green-a), var(--color-chart-grad-green-b)); }
.fimg-box--grad-yellow { background: linear-gradient(145deg, var(--color-chart-grad-yellow-a), var(--color-chart-grad-yellow-b)); }
.oc-icon-wrap.oc-blue { background: var(--color-chart-blue-bg); }
.oc-icon-wrap.oc-blue svg { stroke: var(--color-chart-blue-deep); }
.oc-icon-wrap.oc-purple { background: var(--color-chart-purple-bg); }
.oc-icon-wrap.oc-purple svg { stroke: var(--color-chart-purple); }
.oc-icon-wrap.oc-amber { background: var(--color-chart-amber-bg); }
.oc-icon-wrap.oc-amber svg { stroke: var(--color-chart-amber); }
.logo-pill--stroke-success svg { stroke: var(--color-success); }
.logo-pill--stroke-blue svg { stroke: var(--color-chart-blue); }
.logo-pill--stroke-amber svg { stroke: var(--color-chart-amber); }
.logo-pill--stroke-violet svg { stroke: var(--color-chart-violet); }
.logo-pill--stroke-sky svg { stroke: var(--color-chart-sky); }
.text-primary { color: var(--color-primary); }
.link-primary { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.link-primary:hover { text-decoration: underline; }

/* "As Seen In" card */
.as-seen-card { background: var(--color-surface); border-radius: 10px; padding: 1.2rem 1.4rem; box-shadow: var(--shadow-md); }
.as-seen-kicker { font-size: 0.88rem; font-weight: 600; color: var(--color-body-secondary); line-height: 1.45; margin-bottom: 0.65rem; max-width: 26ch; }
.as-seen-label { font-size: 0.68rem; font-weight: 700; color: var(--color-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; }
.as-seen-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.as-seen-row:last-child { margin-bottom: 0; }
.as-seen-pill { font-size: 0.78rem; font-weight: 700; color: var(--color-heading); background: var(--color-surface-subtle); border-radius: 5px; padding: 0.3rem 0.75rem; }
.as-seen-tick { width: 18px; height: 18px; background: var(--color-success-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.as-seen-tick svg { width: 10px; height: 10px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── PRICING ── */
.pricing { background: var(--color-surface); }
.pricing-header { text-align: center; margin-bottom: 3rem; }
.pricing-rec { max-width: 36rem; margin: 0 auto 1.25rem; text-align: center; font-size: 0.9rem; font-weight: 500; color: var(--color-muted); line-height: 1.5; }
.pricing-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; max-width: 900px; margin: 0 auto 2rem; }
.plan { border: 2px solid var(--color-border); border-radius: 16px; padding: 2rem; position: relative; transition: box-shadow 0.2s; background: var(--color-surface); display: flex; flex-direction: column; }
.plan:hover { box-shadow: var(--shadow-5xl); }
.plan.popular { border-width: 3px; border-color: var(--color-primary); box-shadow: 0 12px 52px var(--color-primary-shadow-popular), 0 8px 32px color-mix(in srgb, var(--color-primary) 22%, transparent), var(--shadow-4xl); }
.plan.popular:hover { box-shadow: 0 14px 56px var(--color-primary-shadow-popular), 0 10px 36px color-mix(in srgb, var(--color-primary) 25%, transparent), var(--shadow-4xl); }
.plan.popular .plan-price .amt { font-weight: 800; }
.plan.popular .plan-btn.prim { box-shadow: 0 6px 22px var(--color-primary-shadow-strong), 0 3px 10px var(--color-primary-shadow-medium); }
.plan.popular .plan-btn.prim:hover { box-shadow: 0 8px 28px var(--color-primary-shadow-strong), 0 4px 14px var(--color-primary-shadow-medium); }
.popular-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3; background: var(--color-primary); color: var(--color-on-inverse); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 1rem; border-radius: 30px; white-space: nowrap; display: flex; align-items: center; gap: 0.35rem; box-shadow: 0 4px 14px var(--color-primary-shadow-medium); }
.popular-badge svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.plan-name { font-size: 1.4rem; font-weight: 800; color: var(--color-heading); margin-bottom: 0.2rem; }
.plan-tagline { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 1.5rem; }
.plan-price { margin-bottom: 1.5rem; }
.plan-price .cur { font-size: 1rem; font-weight: 700; color: var(--color-muted); vertical-align: super; }
.plan-price .amt { font-size: clamp(2.25rem, 8vw, 3rem); font-weight: 900; color: var(--color-heading); line-height: 1; letter-spacing: -0.04em; }
.plan-price .amt.free { color: var(--color-success); }
.plan-price .once { display: block; font-size: 0.78rem; color: var(--color-muted); margin-top: 0.25rem; }
.plan-btn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem; border-radius: 8px; font-weight: 800; font-size: 0.95rem; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s; margin-top: auto; touch-action: manipulation; }
.plan-btn svg { width: 15px; height: 15px; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-btn.prim { background: var(--color-primary); color: var(--color-on-inverse); box-shadow: 0 4px 14px var(--color-primary-shadow-medium); }
.plan-btn.prim svg { stroke: var(--color-on-inverse); }
.plan-btn.prim:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.plan-btn.sec { background: transparent; color: var(--color-heading); border: 2px solid var(--color-border); }
.plan-btn.sec svg { stroke: var(--color-heading); }
.plan-btn.sec:hover { border-color: var(--color-heading); }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 25px; }
.plan-feats li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.86rem; color: var(--color-body); line-height: 1.4; }
.plan-feats li .ptick { width: 17px; height: 17px; background: var(--color-success-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plan-feats li .ptick svg { width: 9px; height: 9px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-feats li .pcross { width: 17px; height: 17px; background: var(--color-surface-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.plan-feats li .pcross svg { width: 9px; height: 9px; stroke: var(--color-border-hover); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-feats li.dim { color: var(--color-muted); }
.plan-div { border: none; border-top: 1px solid var(--color-border); margin: 1rem 0; }
.plan-req { margin-top: 1rem; font-size: 0.8rem; font-weight: 700; line-height: 1.45; color: var(--color-heading); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.65rem 0.75rem; }
.plan-guarantee { margin: 0rem 0.3rem 1.5rem; font-size: 0.79rem; font-weight: 700; color: var(--color-success-strong); line-height: 1.35; }

/* upsell */
.upsell-card { max-width: 900px; margin: 0 auto; background: linear-gradient(135deg, var(--color-promo-bg-from), var(--color-promo-bg-to)); border: 2px solid var(--color-promo-border); border-radius: 16px; padding: 1.5rem 2rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.upsell-icon-box { width: 52px; height: 52px; background: var(--color-promo-icon-bg); border: 1px solid var(--color-promo-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.upsell-icon-box svg { width: 26px; height: 26px; stroke: var(--color-promo-accent); fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.upsell-left { display: flex; align-items: center; gap: 1rem; flex: 1; }
.upsell-copy { max-width: 500px; }
.upsell-copy h4 { font-size: 1rem; font-weight: 800; color: var(--color-heading); margin-bottom: 0.3rem; }
.upsell-copy p { font-size: 0.84rem; color: var(--color-muted); line-height: 1.55; }
.upsell-list { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.9rem; }
.upsell-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: var(--color-body); line-height: 1.4; }
.upsell-list li .ptick { width: 16px; height: 16px; background: var(--color-success-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.upsell-list li .ptick svg { width: 9px; height: 9px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.upsell-clarity { margin-top: 0.85rem; font-size: 0.78rem; font-weight: 700; line-height: 1.45; color: var(--color-heading); background: var(--color-promo-icon-bg); border: 1px solid var(--color-promo-border); border-radius: 8px; padding: 0.6rem 0.7rem; }
.upsell-right { text-align: right; flex-shrink: 0; }
.upsell-pill { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; font-size: 0.8rem; font-weight: 700; color: white; background: var(--color-primary); border: 1px solid var(--color-promo-border); border-radius: 4px; padding: 0.15rem 0.45rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.upsell-pill strong { font-weight: 800; }
.upsell-old-price { font-size: 1.4rem; color: var(--color-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-top: 0.28rem; }
.upsell-amt { font-size: 2rem; font-weight: 900; color: var(--color-primary); line-height: 1.1; letter-spacing: -0.03em; }
.upsell-note { font-size: 0.75rem; color: var(--color-muted); }

/* ── GUARANTEE ── */
.guarantee { background: var(--color-heading); border-top: 1px solid var(--color-footer-divider); border-bottom: 1px solid var(--color-footer-divider); }
.guarantee-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.guarantee-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 0.7rem; color: var(--color-primary); }
.guarantee-icon svg { width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.guarantee h3 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); font-weight: 900; color: var(--color-on-inverse); letter-spacing: -0.02em; margin-bottom: 0.85rem; }
.guarantee p { font-size: 0.92rem; color: var(--color-inverse-muted-mid); line-height: 1.72; margin: 0 auto 0.75rem; max-width: 68ch; }
.guarantee .g-note { color: var(--color-on-inverse-subtle); max-width: 72ch; margin-bottom: 0.95rem; }

/* ── OUTLETS ── */
.outlets { background: var(--color-surface-muted); }
.outlets-header { text-align: center; margin-bottom: 3rem; }
.outlet-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.outlet-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.75rem 1.5rem; text-align: center; transition: all 0.2s; }
.outlet-card:hover { box-shadow: var(--shadow-3xl); transform: translateY(-3px); border-color: var(--color-primary); }
.oc-icon-wrap { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.oc-icon-wrap svg { width: 26px; height: 26px; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.outlet-card h4 { font-size: 1rem; font-weight: 800; color: var(--color-heading); margin-bottom: 0.4rem; }
.outlet-card p { font-size: 0.82rem; color: var(--color-muted); line-height: 1.6; margin-bottom: 1rem; }
.oc-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--color-success-bg); border: 1px solid var(--color-success-border); border-radius: 30px; padding: 0.25rem 0.75rem; font-size: 0.7rem; font-weight: 700; color: var(--color-success-strong); }
.oc-badge svg { width: 10px; height: 10px; stroke: var(--color-success-strong); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ── COMPARE ── */
.compare { background: var(--color-surface); }
.compare-header { text-align: center; margin-bottom: 3rem; }
.compare-wrap { max-width: 900px; margin: 0 auto; min-width: 0; }
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  margin-inline: clamp(-0.5rem, -1vw, 0); padding-bottom: 0.25rem;
}
.table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
table.ctable { width: 100%; min-width: 36rem; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-xl); }
.ctable thead th { background: var(--color-heading); color: var(--color-on-inverse); padding: 1rem; font-size: 0.85rem; font-weight: 700; text-align: center; }
.ctable thead th:first-child { text-align: left; background: var(--color-heading-table); }
.ctable thead th.hl { background: var(--color-primary); }
.ctable tbody tr { border-bottom: 1px solid var(--color-border); transition: background 0.15s; }
.ctable tbody tr:hover { background: var(--color-surface-muted); }
.ctable tbody td { padding: 0.8rem 1rem; font-size: 0.85rem; color: var(--color-body); text-align: center; vertical-align: middle; }
.ctable tbody td:first-child { text-align: left; font-weight: 500; color: var(--color-heading); }
.ctable tbody tr:nth-child(even) { background: var(--color-surface-subtle-2); }
.ctable tbody tr:nth-child(even):hover { background: var(--color-surface-subtle); }
.tg-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--color-success-bg); border-radius: 50%; }
.tg-wrap svg { width: 11px; height: 11px; stroke: var(--color-success); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tx-wrap { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background: var(--color-surface-muted); border-radius: 50%; }
.tx-wrap svg { width: 11px; height: 11px; stroke: var(--color-border-hover); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.thead-row td { background: var(--color-surface-subtle) !important; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted) !important; padding: 0.55rem 1rem !important; }
.compare-secondary-link {
  display: none;
  margin-top: 0.42rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.compare-secondary-link:hover { color: var(--color-primary); }
.compare-mobile-cta {
  display: none;
  margin-top: 0.6rem;
}

/* ── TESTIMONIALS ── */
.testimonials { background: var(--color-surface-muted); }
.testi-header { text-align: center; margin-bottom: 3rem; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
.testi-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.85rem; transition: box-shadow 0.2s; }
.testi-card:hover { box-shadow: var(--shadow-lg); }
.testi-stars { display: flex; gap: 2px; }
.testi-stars svg { width: 14px; height: 14px; fill: var(--color-dot-warn); stroke: none; }
.testi-quote { font-size: 0.88rem; color: var(--color-body-secondary); line-height: 1.7; flex: 1; overflow-wrap: break-word; }
.testi-author { display: flex; align-items: center; gap: 0.65rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.tav { width: 36px; height: 36px; border-radius: 50%; background: var(--color-heading); color: var(--color-on-inverse); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.tname { font-size: 0.85rem; font-weight: 700; color: var(--color-heading); }
.trole { font-size: 0.75rem; color: var(--color-muted); }
.rating-bar { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 3rem; flex-wrap: wrap; }
.rating-item { text-align: center; }
.rating-item .testi-stars--centered { justify-content: center; margin: 0.25rem 0; }
.bnum { font-size: 2.5rem; font-weight: 900; color: var(--color-heading); line-height: 1; }
.blabel { font-size: 0.78rem; color: var(--color-muted); }
.rdiv { width: 1px; height: 50px; background: var(--color-border); }

/* ── TRUST PILLS ── */
.logos-strip { background: var(--color-surface); padding: clamp(2.5rem, 6vw, 3.125rem) clamp(1rem, 5vw, 5%); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); overflow: hidden; }
.logos-strip-inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.logos-strip h3 { font-size: clamp(1.25rem, 2.8vw, 1.8rem); font-weight: 900; color: var(--color-heading); margin-bottom: 0.65rem; letter-spacing: -0.02em; text-transform: none; }
.logos-strip .logos-sub { color: var(--color-muted); font-size: 0.92rem; line-height: 1.65; margin: 0 auto 1.25rem; max-width: 60ch; }
.logo-marquee { overflow: hidden; width: 100%; position: relative; mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }
.logo-marquee + .logo-marquee { margin-top: 0.85rem; }
.logo-track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  animation: logo-marquee-scroll var(--logo-marquee-duration, 90s) linear infinite;
}
.logo-track:not(.is-ready) { animation: none; }
.logo-marquee--reverse .logo-track { animation-direction: reverse; }
.logo-marquee--reverse .logo-track.is-ready { animation-delay: calc(var(--logo-marquee-duration, 90s) / -2); }
.logo-row { display: inline-flex; align-items: center; gap: 0.8rem; width: max-content; flex-shrink: 0; }
.logo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  min-width: 132px;
  min-height: 52px;
  max-width: 170px;
}
.logo-pill img {
  width: 100%;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale();
  opacity: 0.8;
}
@keyframes logo-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--logo-row-width, 0px))); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none !important; } }

/* ── FAQ ── */
.faq { background: var(--color-surface-muted); }
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-header { text-align: center; margin-bottom: 3rem; }
.faq-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.5rem; }
details.fi { border-bottom: 1px solid var(--color-border); }
details.fi summary { padding: 1rem 0; font-size: 0.9rem; font-weight: 600; color: var(--color-heading); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; user-select: none; }
details.fi summary .faq-icon { width: 22px; height: 22px; background: var(--color-surface-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s; }
details.fi summary .faq-icon svg { width: 11px; height: 11px; stroke: var(--color-muted); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
details.fi[open] summary .faq-icon { background: var(--color-primary); }
details.fi[open] summary .faq-icon svg { stroke: var(--color-on-inverse); transform: rotate(45deg); }
.fa { padding: 0 0 1rem; font-size: 0.86rem; color: var(--color-muted); line-height: 1.7; }

/* ── BLOG ── */
.blog { background: var(--color-surface); }
.blog-header { text-align: center; margin-bottom: 2.2rem; }
.blog-slider {
  --blog-cards-per-view: 3;
  position: relative;
  padding: 0 clamp(2rem, 4vw, 2.8rem) 2.1rem;
}
.blog-slider-viewport { overflow: hidden; }
.blog-grid {
  display: flex;
  gap: 1rem;
  min-width: 100%;
  will-change: transform;
  transition: transform 0.55s ease;
  transform: translate3d(0, 0, 0);
}
.blog-grid.is-no-anim {
  transition: none !important;
}
.blog-card {
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--blog-cards-per-view) - 1) * 1rem) / var(--blog-cards-per-view));
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}
.blog-card > * { position: relative; z-index: 2; }
.blog-card .card-stretch {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgb(15 23 42 / 0.14);
}
.blog-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-subtle);
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.28s ease;
}
.blog-card:hover .blog-card-media img,
.blog-card:focus-within .blog-card-media img { transform: scale(1.02); }
.blog-card-body {
  padding: 1rem 1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}
.blog-card h3 {
  font-size: 1rem;
  line-height: 1.35;
  color: var(--color-heading);
  letter-spacing: -0.01em;
}
.blog-card h3 a {
  color: inherit;
  text-decoration: none;
}
.blog-card h3 a:hover { text-decoration: underline; }
.blog-card p {
  font-size: 0.84rem;
  color: var(--color-muted);
  line-height: 1.65;
}
.blog-read {
  margin-top: auto;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}
.blog-read:hover { text-decoration: underline; }
.blog-nav {
  position: absolute;
  top: calc(50% - 1.05rem);
  transform: translateY(-50%);
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgb(255 255 255 / 0.92);
  color: var(--color-heading);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.blog-nav:hover { background: var(--color-surface); }
.blog-nav--prev { left: 0; }
.blog-nav--next { right: 0; }
.blog-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.95rem;
}
.blog-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(100 116 139 / 0.33);
  opacity: 0.7;
  cursor: pointer;
  transition: background-color 0.12s linear, transform 0.12s linear, opacity 0.12s linear;
}
.blog-dot:hover { background: rgb(100 116 139 / 0.55); }
.blog-dot.is-active {
  background: var(--color-primary);
  opacity: 1;
  transform: scale(1.25);
}

/* ── USE CASES ── */
.use-cases {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  padding: clamp(2.4rem, 7vw, 3.9rem) clamp(1rem, 5vw, 5%);
}
.use-cases-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}
.use-cases .section-tag {
  background: var(--color-primary);
  color: var(--color-on-inverse);
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 6px;
  padding: 2px 8px;
}
.use-cases h2 {
  color: var(--color-on-inverse);
  margin-bottom: 0.65rem;
}
.use-cases-sub {
  color: var(--color-inverse-muted-mid);
  max-width: 62ch;
  margin: 0 auto 1.35rem;
  line-height: 1.7;
}
.use-cases-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.62rem;
  justify-content: center;
}
.use-cases-list li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.24);
  background: rgb(255 255 255 / 0.14);
  color: var(--color-on-inverse);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.use-cases-list li:hover {
  transform: translateY(-1px);
  background: rgb(255 255 255 / 0.22);
  border-color: rgb(255 255 255 / 0.36);
}

/* ── FINAL CTA ── */
.final-cta { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 5vw, 5%); text-align: center; }
.final-cta h2 { color: var(--color-on-inverse); font-size: clamp(1.8rem,3vw,2.8rem); margin-bottom: 0.75rem; }
.final-cta p { color: var(--color-inverse-muted-mid); font-size: 1rem; margin-bottom: 2rem; }
.final-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-white { background: var(--color-surface); color: var(--color-primary); padding: 0.9rem clamp(1.25rem, 4vw, 2.2rem); border-radius: 8px; font-weight: 800; font-size: clamp(0.9rem, 2.5vw, 1rem); text-decoration: none; transition: all 0.2s; box-shadow: var(--shadow-btn-white); display: inline-flex; align-items: center; gap: 0.5rem; touch-action: manipulation; justify-content: center; text-align: center; max-width: 100%; }
.btn-white svg { width: 15px; height: 15px; stroke: var(--color-primary); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-2xl); }
.btn-ghost { background: transparent; color: var(--color-on-inverse); padding: 0.9rem clamp(1.25rem, 4vw, 2rem); border-radius: 8px; font-weight: 700; font-size: clamp(0.9rem, 2.5vw, 1rem); text-decoration: none; border: 2px solid var(--color-inverse-border-soft); transition: all 0.2s; display: inline-block; touch-action: manipulation; text-align: center; max-width: 100%; }
.btn-ghost:hover { border-color: var(--color-on-inverse); background: var(--color-inverse-hover-bg); }
.final-note { color: var(--color-on-inverse-subtle); font-size: 0.8rem; margin-top: 1.2rem; }
.final-avatars { display: flex; justify-content: center; align-items: center; margin-top: 1rem; }
.fav { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--color-on-inverse); overflow: hidden; flex-shrink: 0; margin-left: -8px; }
.fav:first-child { margin-left: 0; }
.fav img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── FOOTER ── */
footer { background: var(--color-heading); padding: 3rem clamp(1rem, 5vw, 5%) calc(1.5rem + env(safe-area-inset-bottom, 0px)); overflow-x: hidden; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2.5rem; max-width: 1160px; margin: 0 auto 2.5rem; }
.footer-brand .flogo { font-size: 1.2rem; font-weight: 800; color: var(--color-on-inverse); display: flex; align-items: center; gap: 0.4rem; }
.footer-brand .flogo span { color: var(--color-primary); }
.footer-brand .flogo-icon { height: 24px; aspect-ratio: 134 / 77; flex-shrink: 0; display: block; }
.footer-brand .flogo-icon img { width: 100%; height: 100%; object-fit: contain; object-position: left center; display: block; }
.footer-brand p { font-size: 0.82rem; color: var(--color-footer-text); line-height: 1.7; margin-top: 0.75rem; max-width: 280px; }
.footer-col h5 { font-size: 0.78rem; font-weight: 700; color: var(--color-on-inverse); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-col a { display: block; font-size: 0.82rem; color: var(--color-footer-link); text-decoration: none; margin-bottom: 0.55rem; transition: color 0.2s; }
.footer-col a:hover { color: var(--color-footer-link-hover); }
.footer-bottom { border-top: 1px solid var(--color-footer-divider); padding-top: 1.5rem; max-width: 1160px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.77rem; color: var(--color-footer-note); }
.footer-local-signal {
  flex: 1 1 100%;
  text-align: center;
  color: var(--color-footer-link);
}

/* Mobile sticky CTA (below hero) */
.sticky-cta-bar { display: none; }
@media (max-width: 767px) {
  .hero h1 { font-size: 2.2rem; }
  .compare-wrap { max-width: 100%; }
  .table-scroll {
    overflow: visible;
    margin-inline: 0;
    padding-bottom: 0;
  }
  table.ctable {
    min-width: 0;
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    box-shadow: var(--shadow-xl);
    background: var(--color-surface);
  }
  .ctable thead th {
    padding: 0.55rem 0.4rem;
    font-size: 0.63rem;
    line-height: 1.25;
    white-space: normal;
  }
  .ctable tbody td {
    padding: 0.52rem 0.35rem;
    font-size: 0.68rem;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ctable tbody td:first-child {
    text-align: left;
    font-weight: 600;
    color: var(--color-heading);
  }
  .ctable th:first-child,
  .ctable td:first-child { width: 48%; }
  .ctable th:nth-child(2),
  .ctable th:nth-child(3),
  .ctable td:nth-child(2),
  .ctable td:nth-child(3) { width: 26%; }
  .ctable tbody tr:last-child { display: none; }
  .compare-mobile-cta { display: block; }
  .compare-mobile-cta .plan-btn {
    width: 100%;
    margin: 0;
    justify-content: center;
    padding: 0.55rem 0.5rem;
    font-size: 0.76rem;
    gap: 0.3rem;
  }
  .compare-mobile-cta .compare-secondary-link {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin-top: 0.45rem;
  }
  .sticky-cta-bar:not([hidden]) {
    display: none !important;
  }
  body.sticky-cta-active { padding-bottom: 0 !important; }
}
@media (min-width: 768px) {
  .sticky-cta-bar { display: none !important; }
}
.sticky-cta-bar__text { font-size: 0.88rem; font-weight: 700; color: var(--color-heading); line-height: 1.25; flex: 1; min-width: 0; }
.sticky-cta-bar__btn {
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-on-inverse);
  padding: 0.65rem 1.15rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 14px var(--color-primary-shadow-medium);
  transition: background 0.2s, transform 0.15s;
  touch-action: manipulation;
}
.sticky-cta-bar__btn:hover { background: var(--color-primary-hover); }
.sticky-cta-bar__btn:active { transform: translateY(1px); }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .hero-inner,.hiw-grid,.feature-row,.footer-top { grid-template-columns: 1fr; }
  .hero-visual { justify-self: center; max-width: min(380px, 100%); margin-top: 0.5rem; }
  /* Stack stat cards above / below photo; slight edge overlap only (keeps face visible) */
  .hero-photo-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    justify-items: stretch;
    column-gap: 0.35rem;
    row-gap: 0;
    padding: 0 0.15rem;
  }
  .hero-photo-frame {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    z-index: 1;
  }
  .hero-float-card--tl,
  .hero-float-card--tr,
  .hero-float-card--bl,
  .hero-float-card--br {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
  .hero-float-card--tl {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin-bottom: clamp(-11px, -2vw, -7px);
    margin-right: 0.12rem;
    transform: translate(-15px, -2px);
    z-index: 3;
  }
  .hero-float-card--tr {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin-bottom: clamp(-9px, -1.5vw, -5px);
    margin-left: 0.08rem;
    transform: translate(16px, 10px);
    z-index: 3;
  }
  .hero-float-card--bl {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: clamp(-10px, -1.7vw, -6px);
    margin-right: 0.06rem;
    transform: translate(-15px, 0px);
    z-index: 3;
  }
  .hero-float-card--br {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin-top: clamp(-12px, -2.1vw, -7px);
    margin-left: 0.14rem;
    transform: translate(12px, -8px);
    z-index: 3;
  }
  .hero-float-card {
    max-width: 100%;
    padding: 0.45rem 0.55rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "hf-icon hf-title"
      "hf-icon hf-desc"
      "hf-icon hf-trend";
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.2rem;
  }
  .hero-float-card .hf-icon { grid-area: hf-icon; align-self: center; }
  .hero-float-card .hf-body { display: contents; }
  .hero-float-card .hf-body strong {
    grid-area: hf-title;
    align-self: center;
    margin: 0;
  }
  .hero-float-card .hf-body span {
    grid-area: hf-desc;
    margin-top: 0;
  }
  .hero-float-card .hf-trend {
    grid-area: hf-trend;
    justify-self: start;
    white-space: nowrap;
  }
  .hero { --hero-card-overlap: clamp(0.5rem, 3vw, 0.85rem); }
  .feature-row.rev .fimg { order: 0; }
  .feature-row.rev.feature-row--ai-premium .feature-text { order: 0; }
  .feature-row.rev.feature-row--ai-premium .fimg { order: 1; }
  .outlet-grid,.testi-grid,.faq-cols { grid-template-columns: 1fr; }
  .pricing-cards { grid-template-columns: 1fr; max-width: 480px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .feature-text h3 { font-size: clamp(1.25rem, 4vw, 1.5rem); }
  .hiw-visual { padding: 1rem; }
}
@media (max-width: 640px) {
  .hello-offer-inner {
    min-height: 56px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-right: 2.4rem;
    gap: 0.65rem;
  }
  .hello-offer-main { gap: 0.5rem; }
  .hello-offer-text { font-size: 0.9rem; }
  .hello-offer-btn { padding: 0.42rem 0.72rem; }
  .footer-top { grid-template-columns: 1fr; }
  .rdiv { display: none; }
  .upsell-card { flex-direction: column; align-items: flex-start; text-align: left; }
  .upsell-left { align-items: flex-start; width: 100%; }
  .upsell-right { text-align: left; width: 100%; }
  .upsell-icon-box { display: none; }
  .rating-bar { gap: 1.25rem; }
  .bnum { font-size: clamp(1.85rem, 6vw, 2.5rem); }
  .trust-strip-inner { flex-direction: column; gap: 0.75rem; text-align: center; }
  .trust-label { white-space: normal; }
  .hero-cta-row { flex-direction: column; align-items: flex-start; }
  .hero-rating { align-items: flex-start; }
  details.fi summary { font-size: 0.85rem; padding-right: 0.25rem; }
  .plan { padding: 1.5rem 1.25rem; }
  .upsell-card { padding: 1.25rem 1.25rem; }
  .blog-slider { --blog-cards-per-view: 1; padding-inline: 2.3rem; padding-bottom: 1.9rem; }
  .blog-grid { gap: 0.8rem; }
  .blog-nav { width: 2rem; height: 2rem; font-size: 1rem; }
}
@media (max-width: 992px) {
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: 30px;
    padding: 0.3rem 0.85rem;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-success-emphasis);
    margin-bottom: 1.2rem;
  }
  .nav-links a:focus-visible { outline: none; box-shadow: inset 3px 0 0 var(--color-primary); }
}