/*
 * Marketing/SEO page styles (dev doc Phase 7) — layered on top of
 * app.css's design tokens (colors, radii, buttons), not a replacement
 * for it. Kept separate from app.css because these rules (hero
 * sections, feature grids, footer) only ever apply to the public
 * marketing surface, never the dashboard.
 */

.marketing-header {
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.marketing-header__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.marketing-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.marketing-logo__img {
  height: 32px;
  width: auto;
  display: block;
}

.marketing-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
}

.marketing-nav a:not(.btn) {
  color: var(--color-text-muted);
}

.marketing-nav a:not(.btn):hover {
  color: var(--color-text);
}

.marketing-nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.marketing-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
}

@media (max-width: 768px) {
  .marketing-nav-toggle {
    display: flex;
  }

  .marketing-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 8px 24px 18px;
  }

  .marketing-nav.is-open {
    display: flex;
  }

  .marketing-nav a:not(.btn) {
    padding: 12px 4px;
    border-bottom: 1px solid var(--color-border);
  }

  .marketing-nav .btn {
    margin-top: 10px;
    text-align: center;
  }
}

.hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 72px 24px 48px;
  text-align: center;
}

.hero h1 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 18px;
}

.hero p {
  font-size: 18px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 620px;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 4px auto 32px;
}

.hero__pipeline-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
}

.hero__pipeline-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* background is set per-step inline now (colored to match each
     step, same palette as .feature-card__icon below) — 2026-08-16,
     was a flat green for every step regardless of icon color. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero__pipeline-icon svg {
  width: 18px;
  height: 18px;
}

.hero__pipeline-step span {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.hero__pipeline-sep {
  color: var(--color-border);
  font-size: 16px;
  align-self: center;
}

.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}

.section--soft {
  background: var(--color-bg-soft);
}

.section h2 {
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  margin: 0 0 12px;
}

.section__subhead {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 560px;
  margin: 0 auto 36px;
}

/* Fluid, not a rigid fixed-column grid: auto-fit lets the browser
   decide how many cards fit per row at the current width (3 on a wide
   desktop, 2 on a laptop, 1 on mobile) instead of always forcing
   exactly 3 — cards reflow naturally rather than "sticking to" one
   fixed layout. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.feature-grid--2 {
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 44px 20px 36px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .hero p {
    font-size: 16px;
  }

  .hero__pipeline-sep {
    display: none;
  }

  .hero__pipeline {
    gap: 14px 18px;
  }

  .hero__pipeline-step {
    width: 64px;
  }

  .section {
    padding: 36px 20px;
  }

  .section h2 {
    font-size: 24px;
  }
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.feature-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}

.feature-card p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Small icon badge above a feature-card's title — optional (a plain
   feature-card with no .feature-card__icon still works, see the
   /examples and /senja-alternative pages), used on the home page to
   make a feature-grid scannable at a glance instead of reading every
   card's paragraph. */
.feature-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 168, 102, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.feature-card__icon svg {
  width: 22px;
  height: 22px;
}

/* Compact chip row — used for the wall-layout name list on the home
   page's "Beyond collection" diagram, a lower-ceremony alternative to
   another paragraph when the point is just "here are the options." */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tag-chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--showcase-ink, var(--color-text));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* Two-path comparison ("just a link" vs "WhatsApp Business API") on
   the /collect-testimonials-on-whatsapp page — answers "what do I
   need to bring" without a wall of paragraph text. */
.path-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 8px 0 20px;
}

@media (max-width: 860px) {
  .path-grid {
    grid-template-columns: 1fr;
  }
}

.path-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.path-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.path-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 168, 102, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.path-card__icon svg {
  width: 22px;
  height: 22px;
}

.path-card__head h3 {
  font-size: 18px;
  font-weight: 800;
  margin: 4px 0 0;
}

.path-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.path-card__badge--start {
  background: rgba(20, 168, 102, 0.12);
  color: var(--color-primary-dark);
}

.path-card__badge--optional {
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

.path-card > p {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

.path-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
}

.path-flow__arrow {
  color: var(--color-text-faint);
  font-size: 13px;
}

.path-note {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* v16 (2026-09-26): switched from a fixed 4-column grid to a centered,
   wrapping flex row. The old repeat(4, 1fr) grid only looked balanced
   with exactly 4 cards — as soon as a plan is hidden via the per-plan
   visibility toggle (Superadmin -> Plans, see add_plan_visibility_toggle.sql)
   and 2 or 3 cards render instead, the grid still reserved 4 (or 2)
   fixed-width tracks and the cards ended up stranded on the left with
   empty space on the right, not centered on the page. flex + wrap +
   justify-content:center centers whatever number of cards are actually
   visible (1 through 5) without a separate --two/--three modifier class
   per count. Cards are wider and the whole row sits in a narrower,
   centered max-width so the section reads as a deliberate, prominent
   centerpiece rather than a full-bleed table. */
.pricing-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
}

.pricing-grid .price-card {
  flex: 1 1 260px;
  max-width: 300px;
}

@media (max-width: 640px) {
  .pricing-grid .price-card {
    flex: 1 1 100%;
    max-width: 360px;
  }
}

/* .pricing-grid--two: retired in v16 — the flex-based .pricing-grid
   above now centers and sizes any number of visible cards on its own
   (see the comment above .pricing-grid), so pricing.php no longer
   applies this modifier class. Not deleted outright in case an older
   cached page still references it, but no current markup uses it. */
.pricing-grid--two {
  max-width: 760px;
  margin: 0 auto;
}

.price-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.price-card--highlight {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card);
}

.price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}

.price-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.price-card__price {
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 4px;
}

.price-card__price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-faint);
}

.price-card__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  font-size: 14px;
  color: var(--color-text-muted);
  flex: 1;
}

.price-card__list li {
  position: relative;
  padding: 5px 0 5px 24px;
}

.price-card__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(20, 168, 102, 0.12);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
}

/* Small pill-shaped eyebrow chip used above a few hero headings
   (home, pricing) — light primary-tinted background, small icon +
   label. Not scoped to .showcase since it also appears on the
   regular (non-cream) hero sections. */
.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(20, 168, 102, 0.1);
  color: var(--color-primary-dark);
  border: 1px solid rgba(20, 168, 102, 0.2);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
}

.pill-badge svg {
  width: 14px;
  height: 14px;
}

.faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: 18px 0;
}

.faq-item summary {
  font-weight: 700;
  cursor: pointer;
  font-size: 15px;
}

.faq-item p {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 720px) {
  .examples-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .examples-grid {
    grid-template-columns: 1fr;
  }
}

.examples-grid a {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.examples-grid a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.example-card__avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.example-card__body {
  flex: 1;
  min-width: 0;
}

.example-card__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}

.example-card__category {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 2px;
}

.example-card__arrow {
  flex-shrink: 0;
  color: var(--color-text-faint);
  transition: transform 0.15s ease, color 0.15s ease;
}

.examples-grid a:hover .example-card__arrow {
  transform: translateX(3px);
  color: var(--color-primary);
}

/* No fixed height here — the embed.js snippet inside (see
   marketing_demo_wall_embed_html()) sizes its own iframe via a
   postMessage handshake with the wall page, so the demo always shows
   the whole wall at full height, never a half-cut box with an inner
   scrollbar. overflow:hidden stays only for the rounded corners; it
   has nothing to clip once the iframe is sized to match. */
.wall-demo-embed {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.wall-demo-embed iframe {
  width: 100%;
  border: 0;
  display: block;
}

.wall-demo-placeholder {
  padding: 60px 24px;
  text-align: center;
  color: var(--color-text-faint);
  font-size: 14px;
}

/* v8 -> v9 (2026-08-24): the demo wall previously only ever showed
   .wall-demo-placeholder's "coming soon" text (no real, already-
   published RatingWall wall exists yet to point MARKETING_DEMO_WALL_SLUG
   at — see marketing_demo_wall_embed_html()'s docblock in
   app/modules/marketing.php). This wraps a static, hand-written example
   wall (marketing_demo_wall_example_html()) instead, so visitors see
   what a real Wall of Love looks like — clearly labeled as an example,
   never presented as real customers, since none exist yet.

   v9 -> v10 (2026-08-26): replaced the .wall-demo-example-label /
   .wall-cards--grid treatment above with the .wde-* rules below —
   design produced in Claude Design (brief: ratingwall-claude-design-
   brief.md) and wired in as-is. Colored-initial avatars here are a
   deliberate simplification for this marketing-only demo section, not
   a change to the real product's illustrated-avatar system used on
   actual live walls.

   v12 -> v13 (2026-09-09, "make sure our homepage shows what we are
   offering... people should understand what they are getting and how
   the wall will look on their site"): added .wde-browser-bar (fake
   browser chrome framing the grid, so it reads as "this is what
   embedding looks like on YOUR site" rather than a loose card grid),
   .wde-card-top/.wde-chip (named "Voice reply"/"Video reply" badges,
   not just an icon), .wde-cta (a closing line back to signup), and
   hover elevation on .wde-card + a richer .wde-media--video treatment.
   home.php's showcase__subtitle copy was also corrected — it used to
   say "built from real testimonials", which stopped being true once
   this section became a static mock-up (see marketing_demo_wall_
   embed_html()'s docblock in app/modules/marketing.php). */
.wall-demo-embed--example .wde-browser-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border);
}

.wall-demo-embed--example .wde-browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}

.wall-demo-embed--example .wde-browser-dot:nth-child(1) { background: #ED6A5E; }
.wall-demo-embed--example .wde-browser-dot:nth-child(2) { background: #F4BF4F; }
.wall-demo-embed--example .wde-browser-dot:nth-child(3) { background: #61C454; }

.wall-demo-embed--example .wde-browser-url {
  margin-left: 8px;
  font-size: 12px;
  color: var(--color-text-faint);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 10px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wall-demo-embed--example .wde-label {
  font-size: 13px;
  color: var(--color-text-faint);
  margin: 0;
  padding: 18px 24px 4px;
  text-align: center;
}

.wall-demo-embed--example .wde-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 12px 20px 24px;
}

.wall-demo-embed--example .wde-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 16px 16px 16px 4px;
  padding: 24px;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(22, 34, 28, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wall-demo-embed--example .wde-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -16px rgba(22, 34, 28, 0.22);
}

.wall-demo-embed--example .wde-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}

.wall-demo-embed--example .wde-stars {
  display: flex;
  gap: 2px;
}

.wall-demo-embed--example .wde-star {
  color: var(--color-star);
  font-size: 16px;
}

.wall-demo-embed--example .wde-star--empty {
  color: var(--color-border);
}

.wall-demo-embed--example .wde-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  background: rgba(20, 168, 102, 0.12);
  color: var(--color-primary-dark);
}

.wall-demo-embed--example .wde-text {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* .wde-media (added 2026-09-09): the voice/video mock-up sitting above
   .wde-text on cards whose type isn't 'text' — see
   marketing_demo_wall_example_html()'s $mediaHtml. Deliberately styled
   close to the real product's .wall-card__voice / .wall-card__video
   (app.v12.css) rather than invented from scratch, so a visitor who
   later logs into their own dashboard recognizes the pattern, but built
   from the same green/neutral palette as the rest of this .wde-* demo
   card rather than reusing those classes directly (this section has
   always been its own self-contained mock-up, not literally sharing
   markup with a real wall — see the v9->v10 comment above). */
.wall-demo-embed--example .wde-media {
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
  display: flex;
  align-items: center;
}

.wall-demo-embed--example .wde-media--voice {
  background: rgba(20, 168, 102, 0.08);
  padding: 10px 14px;
  gap: 10px;
}

.wall-demo-embed--example .wde-media--video {
  height: 120px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 55%), linear-gradient(135deg, #14A866 0%, #0E8A54 100%);
  justify-content: center;
  overflow: hidden;
}

.wall-demo-embed--example .wde-media--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.wall-demo-embed--example .wde-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wall-demo-embed--example .wde-play svg {
  margin-left: 2px; /* optical centering of the play triangle */
}

.wall-demo-embed--example .wde-media--video .wde-play {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-primary);
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.wall-demo-embed--example .wde-waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 22px;
}

.wall-demo-embed--example .wde-waveform span {
  width: 3px;
  min-height: 3px;
  border-radius: 2px;
  background: var(--color-primary);
  opacity: 0.5;
}

.wall-demo-embed--example .wde-duration {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.wall-demo-embed--example .wde-duration--video {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 11px;
}

.wall-demo-embed--example .wde-translate {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  margin-top: 8px;
  width: fit-content;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.wall-demo-embed--example .wde-translate:hover {
  color: var(--color-primary-dark, #0E8A54);
}

.wall-demo-embed--example .wde-spacer {
  flex: 1;
}

.wall-demo-embed--example .wde-author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.wall-demo-embed--example .wde-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wall-demo-embed--example .wde-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.wall-demo-embed--example .wde-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-soft);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.wall-demo-embed--example .wde-cta:hover {
  background: rgba(20, 168, 102, 0.08);
}

.wall-demo-embed--example .wde-cta span[aria-hidden] {
  transition: transform 0.15s ease;
}

.wall-demo-embed--example .wde-cta:hover span[aria-hidden] {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .wall-demo-embed--example .wde-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wall-demo-embed--example .wde-grid {
    grid-template-columns: 1fr;
  }

  .wall-demo-embed--example .wde-browser-url {
    display: none;
  }
}

/* .wde-theme-strip (added 2026-09-09): the "matches your brand" swatch
   row under the demo Wall of Love — see marketing_wall_theme_swatches_
   html() in app/modules/marketing.php for why this exists (theming was
   a real, already-built feature that was never shown or named on the
   marketing site). Sits inside .wall-of-love-showcase, so it inherits
   that section's cream background and --showcase-ink token. Each
   .wde-swatch carries its own --swatch-* custom properties inline
   (per-swatch background/card/accent/text/radius/font), set from PHP —
   this block only defines how those variables get used. */
.wall-of-love-showcase .wde-theme-strip {
  max-width: 1000px;
  margin: 28px auto 0;
  text-align: center;
}

.wde-theme-strip__label {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}

.wde-swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wde-swatch {
  background: var(--swatch-bg);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 20px -14px rgba(0, 0, 0, 0.35);
}

.wde-swatch__frame {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.wde-swatch-card {
  background: var(--swatch-card);
  border-radius: var(--swatch-radius);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--swatch-font);
}

.wde-swatch-card__stars {
  color: var(--swatch-accent);
  font-size: 11px;
  letter-spacing: 1px;
}

.wde-swatch-card__line {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--swatch-text);
  opacity: 0.18;
  width: 100%;
}

.wde-swatch-card__line--short {
  width: 60%;
}

.wde-swatch__name {
  font-size: 12px;
  font-weight: 700;
  color: var(--showcase-ink);
}

@media (max-width: 700px) {
  .wde-swatch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* .layout-showcase (added 2026-09-09): skeleton-frame previews of all
   9 wall layouts, replacing the plain .tag-row text-chip list that
   used to sit under "Beyond collection" — see marketing_wall_layout_
   previews_html() / marketing_wall_layout_icon_svg() in
   app/modules/marketing.php. Sits inside .showcase.beyond-collection,
   so it also inherits --showcase-ink; unlike .wde-theme-strip its
   cards use the site-wide --color-surface/--color-border tokens (not
   per-item custom properties), since every card shares the same look
   here — only the SVG skeleton inside differs. */
.layout-showcase {
  max-width: 1100px;
  margin: 32px auto 0;
  text-align: center;
}

.layout-showcase__label {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 22px;
}

/* flex, not grid (fixed 2026-09-09 — auto-fit grid with a 9-item,
   non-round-number set left the 9th card (Loop) stranded alone in
   column 1 of its own row, with the grid's other columns sitting empty
   next to it instead of centering — same class of bug the
   .integrate-grid comment above describes for its 8-logo case, fixed
   the same way there by dropping auto-fit for something explicit).
   flex-wrap + justify-content:center centers whatever's left on the
   final line automatically, for any item count — 9 today, still
   correct if a 10th layout is ever added. */
.layout-swatch-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.layout-swatch {
  flex: 0 0 150px;
  max-width: 150px;
  box-sizing: border-box;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.layout-swatch:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -16px rgba(22, 34, 28, 0.3);
  border-color: var(--color-primary);
}

.layout-swatch__frame {
  position: relative;
  color: var(--color-primary);
  background: rgba(20, 168, 102, 0.06);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.layout-swatch__badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.layout-swatch__label {
  font-size: 13px;
  font-weight: 800;
  color: var(--showcase-ink);
  margin-bottom: 4px;
}

.layout-swatch__desc {
  font-size: 12px;
  color: var(--color-text-faint);
  line-height: 1.4;
  margin: 0;
}

@media (max-width: 640px) {
  .layout-swatch {
    flex-basis: 100px;
    max-width: 100px;
  }

  .layout-swatch__desc {
    display: none;
  }
}

@media (max-width: 380px) {
  .layout-swatch {
    flex-basis: calc(50% - 8px);
    max-width: calc(50% - 8px);
  }
}

/* ---------------------------------------------------------------
   Warm-cream showcase sections (how-it-works diagram, Wall of Love
   framing) — a deliberately different, richer treatment than the
   rest of the (cooler-toned) marketing site, reserved for these two
   "hero moment" sections rather than applied globally. Scoped with
   its own local custom properties instead of overriding :root so it
   can't leak into the dashboard/superadmin shells that share
   app.css's tokens. Headlines use --font-sans (self-hosted Plus
   Jakarta Sans, see app.css) at extra-bold weight rather than a
   separate serif — one font family site-wide.
   --------------------------------------------------------------- */

.showcase {
  --showcase-cream: #FBF3E3;
  --showcase-cream-soft: #F3E8D2;
  --showcase-ink: #16221C;

  background: var(--showcase-cream);
  padding: 64px 24px;
}

.showcase__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 14px;
}

.showcase__eyebrow svg {
  width: 16px;
  height: 16px;
}

.showcase__title {
  font-family: var(--font-sans);
  font-size: 34px;
  font-weight: 800;
  text-align: center;
  color: var(--showcase-ink);
  margin: 0 0 12px;
  line-height: 1.2;
}

.showcase__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 16px;
  margin: 0 auto 48px;
  max-width: 480px;
}

/* How it works — 4-step diagram */

.how-it-works__steps {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}

.how-it-works__step {
  flex: 1;
  max-width: 220px;
  text-align: center;
  position: relative;
}

.how-it-works__badge-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
}

.how-it-works__badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(20, 168, 102, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.how-it-works__badge svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

/* Star-rating icon is wider/shorter than the square icon badges above
   (5 stars in a row) — its own class so it doesn't inherit the 40x40
   square sizing and get squished. */
.how-it-works__badge svg.rating-stars {
  width: 60px;
  height: 12px;
}

.how-it-works__number {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--showcase-cream);
}

.how-it-works__arrow {
  align-self: center;
  margin-top: 38px;
  flex: 0 0 auto;
  color: var(--color-primary);
  opacity: 0.6;
}

.how-it-works__step-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 800;
  color: var(--showcase-ink);
  margin: 0 0 6px;
}

.how-it-works__step-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.how-it-works__note {
  max-width: 520px;
  margin: 40px auto 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-card);
}

.how-it-works__note svg {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.how-it-works__note strong {
  display: block;
  font-size: 13px;
  color: var(--showcase-ink);
}

.how-it-works__note span {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

@media (max-width: 860px) {
  /* A single vertical column of 4 full steps makes this section run
     the length of the page on a phone — a compact 2x2 grid instead,
     with the connecting arrows dropped (they only read correctly in
     a single left-to-right line). */
  .how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 12px;
    max-width: 420px;
  }

  .how-it-works__arrow {
    display: none;
  }

  .how-it-works__step {
    max-width: none;
  }

  .how-it-works__badge-wrap {
    width: 76px;
    height: 76px;
  }

  .how-it-works__badge {
    width: 76px;
    height: 76px;
  }

  .how-it-works__badge svg {
    width: 32px;
    height: 32px;
  }

  .how-it-works__badge svg.rating-stars {
    width: 48px;
    height: 10px;
  }
}

@media (max-width: 380px) {
  .how-it-works__steps {
    grid-template-columns: 1fr;
    max-width: 220px;
    margin: 0 auto;
  }
}

/* Gradient mockup cards + an overlapping numbered badge — used for
   both step diagrams on the home page (.how-it-works and
   .beyond-collection), each with its own card count and color
   palette set inline per section so the shared classes here just
   handle layout/shape. Fluid auto-fit grid (not a fixed column
   count) so 4-card and 5-card sections both reflow naturally instead
   of needing separate layout rules. */

.process-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  text-align: left;
}

.process-card__art {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px;
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.process-card__badge {
  position: absolute;
  left: 18px;
  bottom: -16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--showcase-cream, #FBF3E3);
  box-shadow: 0 10px 22px -8px rgba(20, 168, 102, 0.55);
}

.process-card__title {
  font-size: 18px;
  font-weight: 800;
  color: var(--showcase-ink, var(--color-text));
  margin: 0 0 8px;
}

.process-card__desc {
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* Mini mockup panels inside each gradient card — plain HTML/CSS, not
   screenshots, so they never go stale as the real product UI changes. */

.process-mock {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px;
  width: 100%;
  max-width: 190px;
}

.process-mock--collect {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  box-shadow: none;
  max-width: 100%;
}

.process-mock__chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-mock__chip svg {
  width: 16px;
  height: 16px;
}

.process-mock--collect .process-mock__panel {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px 12px;
  flex: 1;
}

.process-mock__stars {
  display: block;
  margin-bottom: 6px;
}

.process-mock__bar {
  height: 6px;
  border-radius: 4px;
  background: var(--color-border);
  margin-top: 6px;
}

.process-mock__row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.process-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.process-mock__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.process-mock__waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  margin-bottom: 10px;
}

.process-mock__waveform span {
  width: 3px;
  border-radius: 2px;
  background: #6B7FD7;
  display: block;
}

.process-mock__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.process-mock__tag {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-primary-bg);
  border-radius: var(--radius-pill);
  padding: 3px 8px;
  white-space: nowrap;
}

.process-mock__title-bar {
  font-size: 11px;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 8px;
}

.process-mock__list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
}

.process-mock__list-row .process-mock__bar {
  margin-top: 0;
  flex: 1;
}

.process-mock--publish {
  text-align: center;
}

.process-mock__avatars {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.process-mock__avatars span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -8px;
  display: inline-block;
  overflow: hidden;
}

.process-mock__avatars span:first-child {
  margin-left: 0;
}

/* 2026-08-16: these 4 were flat solid-color dots — now the same
   AI-illustrated human-face avatars used in the dashboard's avatar
   picker (2 male, 2 female, was 3-and-1 before), so the "Publish" step
   mockup shows real-looking faces instead of color blobs. */
.process-mock__avatars span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process-mock--publish .process-mock__stars {
  margin: 0 auto 8px;
}

.process-mock--publish .process-mock__chip-row {
  justify-content: center;
}

/* Mockup pieces used by the "Beyond collection" gradient cards. */

.process-mock__badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.process-mock__round-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-mock__round-icon svg {
  width: 13px;
  height: 13px;
}

.process-mock--quote {
  text-align: left;
}

.process-mock__quote-mark {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 0.6;
  display: block;
  margin-bottom: 4px;
}

.process-mock--swatches {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 10px;
  width: 76px;
}

.process-mock--swatches span {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: block;
}

.process-mock--chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 12px;
  height: 64px;
  width: 130px;
}

.process-mock--chart span {
  flex: 1;
  border-radius: 3px 3px 0 0;
  display: block;
}

@media (max-width: 900px) {
  .process-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .process-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* "Integrate with any platform" — plain logo grid; RatingWall's embed
   is one <script> tag (public/assets/js/embed.js), so it genuinely
   works unmodified on every platform listed here, not just the ones
   with a dedicated "app store" integration. */

/* Fixed 4 columns, not auto-fit: there are exactly 8 platform cards
   below, and auto-fit's "fit as many 170px+ tracks as possible" math
   was landing on 5 per row at common desktop widths — an uneven 5+3
   split. 4 columns makes a clean, even 4-and-4 instead. */
.integrate-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.integrate-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--integrate-accent, var(--color-border));
  border-radius: var(--radius-lg);
  padding: 22px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: transform 0.15s ease;
}

.integrate-card:hover {
  transform: translateY(-3px);
}

.integrate-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.integrate-card__icon svg {
  width: 100%;
  height: 100%;
}

.integrate-card span {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.integrate-section__note {
  text-align: center;
  color: var(--color-text-faint);
  font-size: 13px;
  margin: 24px auto 0;
}

@media (max-width: 720px) {
  .integrate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wall of Love showcase frame — wraps the existing .wall-demo-embed
   iframe (marketing_demo_wall_embed_html()) in the warm-cream
   treatment; the cards *inside* the iframe are the embedded wall's
   own styling, not controlled from here (see /w/embed/{slug}). */

.wall-of-love-showcase .wall-demo-embed {
  max-width: 1000px;
  margin: 0 auto;
  border-color: var(--color-primary);
  box-shadow: 0 20px 60px -30px rgba(20, 168, 102, 0.35);
}

@media (max-width: 640px) {
  .showcase {
    padding: 44px 20px;
  }

  .showcase__title {
    font-size: 26px;
  }

  .showcase__subtitle {
    margin-bottom: 32px;
  }
}

.marketing-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: 40px;
}

.marketing-footer__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 48px 24px 28px;
}

.marketing-footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

.marketing-footer__brand-desc {
  font-size: 12px;
  color: var(--color-text-faint);
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 220px;
}

.marketing-footer__heading {
  font-size: 12px;
  font-weight: 800;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.marketing-footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.marketing-footer__col a {
  font-size: 13px;
  color: var(--color-text-faint);
}

.marketing-footer__col a:hover {
  color: var(--color-text);
}

.marketing-footer__bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-faint);
}

.marketing-footer__links {
  display: flex;
  gap: 18px;
}

.marketing-footer__links a {
  color: var(--color-text-faint);
}

@media (max-width: 900px) {
  .marketing-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 28px 20px;
  }
}

@media (max-width: 640px) {
  .marketing-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
}

/* ---------------------------------------------------------------
   Legal / static content pages (Privacy, Terms, About, Contact) —
   narrower reading column than the marketing .section default
   (1100px), left-aligned rather than centered since this is prose,
   not a pitch. Reuses .section's spacing/soft-background variants
   rather than introducing a second content-width system.
   --------------------------------------------------------------- */

.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.legal-content h1 {
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 8px;
  line-height: 1.2;
}

.legal-content__updated {
  font-size: 13px;
  color: var(--color-text-faint);
  margin: 0 0 40px;
}

.legal-content h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 36px 0 12px;
}

.legal-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  padding-left: 22px;
}

.legal-content li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.legal-content a {
  color: var(--color-primary);
  font-weight: 600;
}

.legal-content strong {
  color: var(--color-text);
}

.contact-card {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px 72px;
}

.contact-card__box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-top: 32px;
}

.contact-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  gap: 16px;
  flex-wrap: wrap;
}

.contact-card__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-card__label {
  font-size: 13px;
  color: var(--color-text-faint);
  font-weight: 600;
}

.contact-card__value {
  font-size: 15px;
  font-weight: 700;
}

.contact-card__value a {
  color: var(--color-text);
}

/* ---------------------------------------------------------------
   Pricing page: plan feature-comparison table (2026-08-19), styled
   after famewall.io/pricing's row-per-feature matrix. Reuses the
   same tokens as .price-card rather than introducing new colors.
   The price-cell spans inside <th> carry the same
   data-price-monthly/data-price-yearly attributes pricing.v1.js
   already toggles site-wide, so this table's header prices stay in
   sync with the Monthly/Yearly toggle above the plan cards for free
   — no JS changes needed here.
   --------------------------------------------------------------- */
.compare-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface);
}

.compare-table th,
.compare-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
}

.compare-table th:first-child,
.compare-table td:first-child {
  text-align: left;
  color: var(--color-text);
  font-weight: 600;
  min-width: 220px;
}

.compare-table thead th {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text);
  background: var(--color-bg-soft);
  vertical-align: top;
  padding-top: 16px;
}

.compare-table thead th.is-highlight {
  color: var(--color-primary-dark);
  background: rgba(20, 168, 102, 0.08);
}

.compare-table .price-cell {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-text);
  margin-top: 4px;
}

.compare-table .price-cell span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.compare-table tbody tr:hover {
  background: var(--color-bg-soft);
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-yes,
.compare-no {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.compare-yes {
  background: rgba(20, 168, 102, 0.12);
  color: var(--color-primary);
}

.compare-no {
  background: var(--color-bg-soft);
  color: var(--color-text-faint);
}

.compare-table tfoot td {
  border-bottom: none;
  padding-top: 18px;
}

@media (max-width: 640px) {
  .compare-table th,
  .compare-table td {
    padding: 12px 10px;
    font-size: 12px;
  }

  .compare-table th:first-child,
  .compare-table td:first-child {
    min-width: 160px;
  }
}