/* ==========================================================================
   Cove Marketing Site. Coastal-modernist visual system.
   ========================================================================== */

:root {
  /* CMS-controlled tokens. The marketing layout injects an inline <style>
     that overrides these from SiteSetting.theme(...). New design-system
     tokens below derive from these so theme overrides still flow through. */
  --m-sand:        #faf6ee;
  --m-blue:        #1a9ed4;
  --m-blue-dark:   #0e7ab0;
  --m-deep:        #0b2a4a;
  --m-ink:         #0b2a4a;
  --m-ink-soft:    #5a6878;
  --m-line:        #e0d8c5;

  /* Sand range. --m-sand-50 derives from the CMS token so theme overrides
     to color_sand still apply to page backgrounds. */
  --m-sand-50:     var(--m-sand);
  --m-sand-100:    #f3ebd9;
  --m-sand-200:    #e6d8b8;
  --m-sand-700:    #8a7548;

  /* Signature accent. Used sparingly: eyebrow labels, primary-button hover,
     status indicators, occasional callouts. */
  --m-coral:       #d97757;
  --m-coral-soft:  #f4d4c5;

  /* Text scale */
  --m-ink-mute:    #8a96a4;

  /* Lines + accents */
  --m-line-strong: #c9bfa5;
  --m-white:       #ffffff;

  /* Legacy aliases (kept so older code paths and any CMS-saved theme values
     still resolve). Do not use in new code. */
  --m-bg:          var(--m-sand);
  --m-foam:        var(--m-sand-100);
  --m-tide:        var(--m-sand-200);
  --m-shore:       var(--m-line-strong);
  --m-water:       var(--m-coral);
  --m-sunrise:     var(--m-coral);

  /* Radii */
  --m-radius:      12px;
  --m-radius-sm:   8px;
  --m-radius-lg:   16px;

  /* Shadows. Architectural: minimal, hard-edged where used. */
  --m-shadow-sm:   0 1px 2px rgba(11, 42, 74, 0.06);
  --m-shadow:      0 6px 18px rgba(11, 42, 74, 0.08);
  --m-shadow-lg:   0 18px 40px rgba(11, 42, 74, 0.10);

  /* Typography */
  --m-font-display: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --m-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --m-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --m-font:         var(--m-font-body);
}

/* ==========================================================================
   BASE
   ========================================================================== */
.marketing-body {
  font-family: var(--m-font-body);
  color: var(--m-ink);
  line-height: 1.6;
  background: var(--m-sand-50);
  margin: 0;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.marketing-body h1,
.marketing-body h2,
.marketing-body h3,
.marketing-body h4 {
  font-family: var(--m-font-display);
  color: var(--m-deep);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 0.5em;
  font-weight: 700;
}

.marketing-body h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); letter-spacing: -0.03em; }
.marketing-body h2 { font-size: clamp(2rem, 3.5vw, 3rem); }
.marketing-body h3 { font-size: 1.25rem; letter-spacing: -0.01em; }
.marketing-body h4 { font-size: 1rem; }

.marketing-body p { margin: 0 0 1em; color: var(--m-ink-soft); font-size: 1.05rem; line-height: 1.6; }
.marketing-body a { color: var(--m-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.marketing-body a:hover { color: var(--m-coral); }

.container         { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 760px;  margin: 0 auto; padding: 0 24px; }

/* Eyebrow: signature small-caps mono label, used above section headings. */
.eyebrow {
  display: inline-block;
  font-family: var(--m-font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--m-coral);
  margin-bottom: 1rem;
}
.eyebrow--blue  { color: var(--m-blue); }
.eyebrow--green { color: #2a9d8f; }

.lede {
  font-size: 1.15rem;
  color: var(--m-ink-soft);
  max-width: 640px;
  line-height: 1.6;
}

/* ==========================================================================
   HORIZON DIVIDER. Thin line + small navy diamond mark.
   ========================================================================== */
.horizon-divider {
  height: 24px;
  width: 100%;
  max-width: 800px;
  margin: 80px auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.horizon-divider::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--m-line-strong);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.horizon-divider::after {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--m-deep);
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.m-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--m-nav-bg, #ffffff);
  border-bottom: 1px solid var(--m-line-strong);
}
.m-nav__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 16px 20px;
  display: flex; align-items: center; gap: 32px;
}
/* Nav link rules use .m-nav ancestor to win over inline `.marketing-body a` from the layout. */
.m-nav .m-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  color: var(--m-nav-text, var(--m-deep));
  font-family: var(--m-font-display);
  font-weight: 700; font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.m-nav__logo  { display: flex; }
.m-nav__links { display: flex; gap: 28px; margin-left: auto; }
.m-nav .m-nav__link {
  color: var(--m-nav-text, var(--m-ink));
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none;
}
.m-nav .m-nav__link:hover { color: var(--m-nav-link-hover, var(--m-blue)); text-decoration: none; }
.m-nav__cta   { display: flex; gap: 12px; align-items: center; }
.m-nav .m-nav__login {
  color: var(--m-nav-text, var(--m-ink));
  font-weight: 500; font-size: 0.95rem;
  text-decoration: none;
}
.m-nav__trial { padding: 9px 18px !important; font-size: 0.95rem !important; }
.m-nav__burger {
  display: none; background: none; border: 0;
  width: 44px; height: 44px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  cursor: pointer; padding: 0;
  position: relative; z-index: 110;
  margin-left: auto;
}
.m-nav__burger span {
  display: block; height: 2px; width: 22px;
  background: var(--m-nav-text, var(--m-deep));
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}
.m-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.m-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.m-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.m-nav__mobile {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--m-nav-bg, #ffffff);
  z-index: 100;
  padding: 96px 24px 32px;
  overflow-y: auto;
}
.m-nav__mobile:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.m-nav__mobile-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  flex: 1;
  gap: 0;
}
.m-nav .m-nav__mobile-link {
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--m-nav-text, var(--m-deep));
  text-decoration: none;
  padding: 18px 4px;
  border-bottom: 1px solid var(--m-line);
  display: block;
  letter-spacing: -0.01em;
}
.m-nav .m-nav__mobile-link:hover {
  color: var(--m-nav-link-hover, var(--m-blue));
  text-decoration: none;
}
.m-nav__mobile-link--secondary {
  font-family: var(--m-font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--m-ink-soft);
  border-bottom: 0;
  padding-top: 24px;
}
.m-nav__mobile-cta {
  margin-top: auto;
  margin-bottom: 8px;
  text-align: center;
  padding: 16px 24px;
  font-size: 1.05rem;
  align-self: stretch;
}

@media (max-width: 860px) {
  .m-nav__links, .m-nav__login { display: none; }
  .m-nav__burger { display: flex; }
}
@media (max-width: 700px) {
  .m-nav__trial { display: none; }
}

/* ==========================================================================
   BUTTONS. Architectural: rectangular-ish radius, hard hover.
   ========================================================================== */
.marketing-body .btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--m-font-body);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.marketing-body .btn:hover { text-decoration: none; transform: translateY(-1px); }

/* Primary: solid navy, sand text, no border. Hover defaults to coral; CMS-overridable. */
.marketing-body .btn-primary {
  background: var(--m-deep); color: var(--m-sand-50);
}
.marketing-body .btn-primary:hover {
  background: var(--m-button-hover-bg, var(--m-coral));
  color:      var(--m-button-hover-text, var(--m-deep));
}

/* Ghost: solid white fill, deep text, sand-toned border. Readable on any background.
   Hover defaults to sand-100; CMS-overridable. */
.marketing-body .btn-ghost {
  background: var(--m-white); color: var(--m-deep); border-color: var(--m-line-strong);
}
.marketing-body .btn-ghost:hover {
  background: var(--m-button-ghost-hover-bg, var(--m-sand-100));
  color:      var(--m-button-ghost-hover-text, var(--m-deep));
  border-color: var(--m-line-strong);
}

.marketing-body .btn-xl    { padding: 14px 28px; font-size: 1.02rem; }
.marketing-body .btn-block { display: block; width: 100%; text-align: center; }

/* ==========================================================================
   HERO (default mode, no image)
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding: 96px 0 120px;
  text-align: center;
  background: var(--m-sand-50);
}

/* The decorative hero contour line was removed. The rebuilt homepage hero sizes
   to its content, so a fixed line at 60% down crossed the intro text. Only the
   homepage uses the bare .hero class, so removing it is homepage scoped. */

.hero__inner { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 0 24px; }

.hero__title {
  font-family: var(--m-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 6.5vw, 5.5rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--m-deep);
  margin-bottom: 0.4em;
}

/* Scoped to .hero so `margin: 0 auto` out-specifies `.marketing-body p`
   (which sets margin-left/right: 0) and the subheadline centres on the page,
   not just within its column. Mirrors .hero .hero__cta / .hero .hero__micro. */
.hero .hero__sub {
  font-size: 1.2rem;
  color: var(--m-ink-soft);
  max-width: 640px;
  margin: 0 auto 2em;
  line-height: 1.55;
  text-wrap: balance;
}

/* Hero CTA + micro centred in both default and image modes. */
.hero .hero__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
}
.hero .hero__micro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  color: var(--m-ink-mute);
  font-size: 0.92rem;
}

/* ==========================================================================
   PREVIEW CARD. Architectural, not bubbly.
   ========================================================================== */
.hero__preview {
  margin-top: 56px;
  display: flex; justify-content: center;
  position: relative; z-index: 1;
}
.preview-card {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 24px 28px;
  max-width: 520px; width: 100%;
  text-align: left;
  box-shadow: 6px 6px 0 var(--m-sand-200);
}
.preview-card__head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.88rem; color: var(--m-ink-soft);
  margin-bottom: 16px;
}
.preview-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.preview-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--m-coral);
  box-shadow: 0 0 0 4px var(--m-coral-soft);
}
.preview-time {
  font-size: 0.85rem;
  color: var(--m-ink-mute);
  margin-left: 4px;
}
.preview-company {
  background: var(--m-deep);
  color: var(--m-sand-50);
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 4px;
}
.preview-card__title {
  margin: 6px 0 10px;
  font-size: 1.2rem;
  color: var(--m-deep);
  font-family: var(--m-font-display);
  font-weight: 600;
}
.preview-card__ai {
  font-size: 0.92rem;
  color: var(--m-ink-soft);
  margin-bottom: 16px;
  line-height: 1.5;
}
.preview-card__signals {
  font-size: 0.85rem;
  color: var(--m-ink-mute);
  margin: 0;
  border-top: 1px solid var(--m-line);
  padding-top: 12px;
}

/* Legacy tag styles kept for any pages still using them. */
.preview-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag        { font-size: 0.78rem; padding: 4px 10px; border-radius: 999px; font-weight: 500; }
.tag--blue  { background: var(--m-sand-100); color: var(--m-deep); }
.tag--green { background: var(--m-coral-soft); color: var(--m-deep); }
.tag--sand  { background: var(--m-sand-200); color: var(--m-deep); }

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */
.trusted {
  padding: 36px 0;
  background: var(--m-white);
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  text-align: center;
}
.trusted__label {
  font-family: var(--m-font-mono);
  font-size: 0.72rem;
  color: var(--m-ink-mute);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.trusted__logos {
  display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;
  color: var(--m-ink-soft); font-weight: 600; font-size: 1rem; opacity: 0.55;
  font-family: var(--m-font-display); letter-spacing: -0.01em;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
/* Section spacing scales. The marketing body class is set by the layout
   based on SiteSetting#section_spacing. Default applies if class is absent. */
:root {
  --section-py:       clamp(56px, 8vw, 96px);
  --section-py-large: clamp(72px, 10vw, 120px);
}
.marketing-body--spacing-compact {
  --section-py:       clamp(32px, 5vw, 56px);
  --section-py-large: clamp(48px, 6vw, 72px);
}
.marketing-body--spacing-default {
  --section-py:       clamp(56px, 8vw, 96px);
  --section-py-large: clamp(72px, 10vw, 120px);
}
.marketing-body--spacing-spacious {
  --section-py:       clamp(80px, 10vw, 128px);
  --section-py-large: clamp(96px, 12vw, 160px);
}

section, .section { padding: var(--section-py) 0; }

.problem,
.features,
.how,
.pricing-teaser,
.faq-home,
.contact-body,
.about-body,
.faq-full,
.pricing-grid {
  background: var(--m-sand-50);
}
.problem        { text-align: center; }
.problem .lede  { margin: 0 auto 3em; }
.problem__close { margin-top: 3em; font-size: 1.15rem; font-weight: 500; color: var(--m-deep); }

.features, .how                                                    { text-align: center; }
.features h2, .how h2, .problem h2,
.pricing-teaser h2, .faq-home h2                                   { margin-bottom: 0.4em; }
.features .eyebrow, .how .eyebrow, .problem .eyebrow,
.pricing-teaser .eyebrow, .faq-home .eyebrow                       { margin-bottom: 1rem; }

.quote     { background: var(--m-white); }
.final-cta { background: var(--m-deep); color: var(--m-sand-50); text-align: center; }
.final-cta h2 { color: var(--m-sand-50); }
.final-cta p  { color: rgba(250, 246, 238, 0.75); margin-bottom: 2em; }
.final-cta .btn-primary {
  background: var(--m-white); color: var(--m-deep);
}
.final-cta .btn-primary:hover {
  background: var(--m-button-secondary-hover-bg, var(--m-sand-100));
  color:      var(--m-button-secondary-hover-text, var(--m-deep));
}
.final-cta { padding: var(--section-py-large) 0; }
.final-cta h2 { font-size: clamp(1.85rem, 3.5vw, 2.75rem); margin-bottom: 0.5em; }

/* ==========================================================================
   GRIDS
   ========================================================================== */
.grid     { display: grid; gap: 24px; margin-top: 48px; text-align: left; }
.grid--3  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4  { grid-template-columns: repeat(4, 1fr); }

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

/* Cards: architectural, no shadow, thin border, larger radius. */
.card, .feature {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.card:hover, .feature:hover {
  border-color: var(--m-deep);
  transform: translateY(-2px);
  box-shadow: none;
}
.card--soft { background: var(--m-sand-100); border-color: var(--m-sand-200); }

.card__icon, .feature__icon {
  font-size: 1.6rem; margin-bottom: 16px;
  width: 44px; height: 44px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-sand-100);
}
.feature__icon--1 { background: var(--m-sand-100); }
.feature__icon--2 { background: var(--m-coral-soft); }
.feature__icon--3 { background: var(--m-sand-200); }
.feature__icon--4 { background: var(--m-sand-100); }
.feature__icon--5 { background: var(--m-coral-soft); }
.feature__icon--6 { background: var(--m-sand-200); }

/* Font Awesome icons inside section markers. The wrapper provides the box;
   `i` inside picks up size + colour. */
.card__icon i, .feature__icon i {
  font-size: 1.4rem;
  color: var(--m-deep);
}
.problem .card__icon i { color: var(--m-coral); }

.step__icon {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: var(--m-sand-100);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.step__icon i {
  font-size: 1.4rem;
  color: var(--m-coral);
}

.feature-block__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 10px;
  background: var(--m-sand-100);
  margin-bottom: 16px;
}
.feature-block__icon i {
  font-size: 1.5rem;
  color: var(--m-deep);
}

.card h3, .feature h3 {
  font-family: var(--m-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--m-deep);
}
.card p, .feature p { font-size: 0.96rem; line-height: 1.55; }

/* ==========================================================================
   HOW IT WORKS. Numbered markers in mono.
   ========================================================================== */
.steps {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  text-align: left;
}
.step {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 32px 28px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.step:hover { border-color: var(--m-deep); transform: translateY(-2px); }
.step__num {
  display: inline-block;
  font-family: var(--m-font-mono);
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--m-coral);
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  line-height: 1;
}
.step h3 {
  font-family: var(--m-font-display);
  font-size: 1.2rem; font-weight: 600;
  color: var(--m-deep);
  margin: 0 0 8px;
}
.step p { font-size: 0.96rem; }

/* ==========================================================================
   QUOTE / TESTIMONIAL. Big sand-coloured opening quote mark.
   ========================================================================== */
.quote { padding: var(--section-py-large) 0; }
.quote .container { position: relative; }
.quote figure {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  padding-top: 24px;
}
.quote figure::before {
  content: "\201C";
  position: absolute;
  top: -32px; left: -8px;
  font-family: var(--m-font-display);
  font-weight: 700;
  font-size: 6rem;
  line-height: 1;
  color: var(--m-sand-200);
  pointer-events: none;
}
.quote blockquote {
  font-family: var(--m-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--m-deep);
  margin: 0 0 1em;
  position: relative;
}
.quote figcaption {
  color: var(--m-ink-soft);
  font-size: 0.95rem;
  font-family: var(--m-font-body);
}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-teaser       { text-align: center; background: var(--m-sand-100); }
.pricing-teaser .lede { margin: 0 auto 2em; }

.billing-toggle {
  display: inline-flex; background: var(--m-white);
  border-radius: 999px; padding: 4px;
  border: 1px solid var(--m-line);
  margin-top: 24px;
}
.billing-toggle__btn {
  padding: 10px 20px; border: 0; background: transparent;
  border-radius: 999px; font-weight: 500; cursor: pointer; font-size: 0.95rem;
  font-family: var(--m-font-body);
  color: var(--m-ink-soft);
}
.billing-toggle__btn.is-active { background: var(--m-deep); color: var(--m-sand-50); }
.billing-toggle__save {
  background: var(--m-coral-soft); color: var(--m-deep);
  padding: 2px 8px; border-radius: 999px; font-size: 0.78rem; margin-left: 6px;
}
.billing-toggle__btn.is-active .billing-toggle__save { background: rgba(255,255,255,0.2); color: var(--m-sand-50); }

.plan {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 32px 28px;
  position: relative; text-align: left;
  display: flex; flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.plan:hover { border-color: var(--m-deep); }
.plan--featured {
  background: var(--m-sand-100);
}
.plan--featured::before {
  content: "MOST POPULAR";
  display: block;
  font-family: var(--m-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--m-deep);
  margin-bottom: 8px;
  text-transform: uppercase;
}
/* Hide the legacy span badge if it's still being rendered. */
.plan__badge { display: none; }
.plan__name {
  font-family: var(--m-font-display);
  font-size: 1.35rem; font-weight: 700;
  margin: 0 0 4px;
  color: var(--m-deep);
}
.plan__for { color: var(--m-ink-soft); font-size: 0.92rem; margin: 0 0 20px; }
.plan__price { margin: 0 0 4px; }
.plan__amount {
  font-family: var(--m-font-display);
  font-size: 2.4rem; font-weight: 700;
  color: var(--m-deep);
  letter-spacing: -0.02em;
}
.plan__period {
  font-family: var(--m-font-mono);
  font-size: 0.85rem;
  color: var(--m-ink-mute);
  letter-spacing: 0.02em;
}
.plan__seats { color: var(--m-ink-soft); margin: 0 0 20px; font-size: 0.92rem; }
.plan .btn   { margin-bottom: 22px; }
.plan__features { list-style: none; padding: 0; margin: 0; font-size: 0.95rem; }
.plan__features li {
  padding: 7px 0 7px 22px; color: var(--m-ink); position: relative;
}
.plan__features li::before {
  content: "\2192";
  position: absolute; left: 0; top: 7px;
  color: var(--m-coral);
  font-weight: 500;
}
.pricing-footnote {
  text-align: center;
  color: var(--m-ink-soft);
  font-size: 0.92rem;
  margin: 56px auto 0;
  max-width: 720px;
}

/* ==========================================================================
   FEATURE BLOCKS (features page)
   ========================================================================== */
.feature-block { padding: var(--section-py-large) 0; }
.feature-block:nth-child(even) { background: var(--m-sand-100); }
.feature-block__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.feature-block--reverse .feature-block__inner   { direction: rtl; }
.feature-block--reverse .feature-block__inner > * { direction: ltr; }
@media (max-width: 860px) {
  .feature-block__inner { grid-template-columns: 1fr; }
}
.feature-block h2          { margin-bottom: 0.5em; }
.feature-block__note       { color: var(--m-ink-soft); font-size: 0.9rem; margin-top: 16px; font-style: italic; }
.checklist                 { list-style: none; padding: 0; margin: 20px 0 0; }
.checklist li              { padding: 8px 0 8px 30px; position: relative; color: var(--m-ink); }
.checklist li::before {
  content: "\2192";
  position: absolute; left: 0; top: 8px;
  color: var(--m-coral);
  font-weight: 500;
}
.feature-block__visual {
  background: var(--m-white);
  border-radius: 12px;
  padding: 32px;
  border: 1px solid var(--m-line);
  min-height: 240px;
}
.mock-brief h4, .mock-call h4 { margin: 0 0 12px; color: var(--m-deep); font-size: 1rem; font-family: var(--m-font-display); }
.mock-line                    { font-size: 0.95rem; margin: 6px 0; color: var(--m-ink); }
.mock-line strong             { color: var(--m-deep); }
.mock-row                     { padding: 8px 0; font-size: 0.95rem; border-bottom: 1px solid var(--m-line); }
.mock-row:last-child          { border-bottom: 0; }
.mock-row--muted              { color: var(--m-ink-soft); font-size: 0.88rem; }
.mock-pipeline                { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mock-stage {
  background: var(--m-sand-100); border-radius: 6px; padding: 14px 10px;
  text-align: center; font-size: 0.85rem; color: var(--m-ink-soft);
}
.mock-stage b {
  display: block; font-size: 1.5rem; color: var(--m-deep);
  margin-top: 6px; font-family: var(--m-font-display);
}
.mock-stage--active   { background: var(--m-deep); color: rgba(250,246,238,0.75); }
.mock-stage--active b { color: var(--m-sand-50); }
.mock-dash            { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mock-metric {
  background: var(--m-sand-100); padding: 18px 12px; border-radius: 6px;
  text-align: center; font-size: 0.85rem; color: var(--m-ink-soft);
}
.mock-metric b {
  display: block; font-size: 1.6rem; color: var(--m-deep);
  margin-top: 6px; font-family: var(--m-font-display);
}

/* ==========================================================================
   FAQ. Mono numbers replace +/- markers.
   ========================================================================== */
.faq-list, .faq-full details {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  counter-increment: faq-counter;
}
.faq-list   { background: none; border: 0; padding: 0; margin: 40px 0 0; counter-reset: faq-counter; }
.faq-full   { padding-top: 0; counter-reset: faq-counter; }
.faq-list details, .faq-item {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  margin-bottom: 12px;
  counter-increment: faq-counter;
}
.faq-list details[open], .faq-item[open] { border-color: var(--m-deep); }

.faq-list summary, .faq-item summary {
  padding: 20px 24px; cursor: pointer;
  font-family: var(--m-font-display);
  font-weight: 600; color: var(--m-deep);
  list-style: none;
  display: flex; align-items: center; gap: 16px;
}
.faq-list summary::-webkit-details-marker,
.faq-item summary::-webkit-details-marker { display: none; }
.faq-list summary::before, .faq-item summary::before {
  content: counter(faq-counter, decimal-leading-zero);
  font-family: var(--m-font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--m-ink-mute);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 28px;
}
.faq-list details[open] summary, .faq-item[open] summary { color: var(--m-coral); }
.faq-list details p, .faq-item p {
  padding: 0 24px 20px 68px;
  color: var(--m-ink-soft); margin: 0;
  font-family: var(--m-font-body);
  font-weight: 400;
}
.faq-home__more { text-align: center; margin-top: 32px; font-weight: 500; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-form {
  background: var(--m-white); padding: 32px;
  border-radius: 12px; border: 1px solid var(--m-line);
  margin-bottom: 32px;
}
.field        { margin-bottom: 18px; }
.field label  { display: block; font-weight: 500; margin-bottom: 6px; color: var(--m-deep); font-size: 0.92rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--m-line);
  border-radius: 8px; font-size: 1rem; font-family: var(--m-font-body);
  background: var(--m-white); color: var(--m-ink); box-sizing: border-box;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--m-deep);
  box-shadow: 0 0 0 3px rgba(11, 42, 74, 0.10);
}
.contact-other h3 { font-size: 1.1rem; margin-bottom: 12px; font-family: var(--m-font-display); }
.contact-other p  { margin: 4px 0; font-size: 0.95rem; }
.flash            { padding: 14px 18px; border-radius: 8px; margin-bottom: 20px; font-weight: 500; }
.flash--success   { background: var(--m-coral-soft); color: var(--m-deep); border: 1px solid var(--m-coral); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-body p   { font-size: 1.1rem; margin: 0 0 1.3em; }
.about-body h2  { margin: 1.8em 0 0.6em; font-size: 1.7rem; font-family: var(--m-font-display); }

/* ==========================================================================
   PAGE HERO (features, pricing, faq, about, contact)
   ========================================================================== */
.page-hero {
  position: relative;
  padding: 96px 0 80px;
  text-align: center;
  background: var(--m-sand-50);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 60%;
  height: 1px;
  background: var(--m-line-strong);
  pointer-events: none;
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .lede      { margin: 1rem auto 0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.m-footer {
  background: var(--m-footer-bg, var(--m-deep));
  color:      var(--m-footer-text, rgba(250, 246, 238, 0.7));
  padding: 32px 0 24px;
}
/* Brand on the left, meta (legal links + made-in) on the right. Flex rather than
   a fixed 4-column grid, so the row stays balanced whether or not the CMS has
   any footer columns (today it has none, which left the brand stranded). */
.m-footer__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-start; gap: 32px;
}
.m-footer__meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px; text-align: right;
}
.m-footer__brand { max-width: 320px; }
.m-footer__logo {
  display: flex; align-items: center; gap: 10px;
  color: var(--m-sand-50);
  font-family: var(--m-font-display);
  font-weight: 700; font-size: 1.25rem;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
/* Footer paragraphs are scoped with the .m-footer ancestor (two classes) so they
   beat ".marketing-body p", which otherwise paints them in the grey body-text
   colour. That is what made the footer look washed out on the navy background. */
.m-footer .m-footer__tagline {
  font-family: var(--m-font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}
/* Footer link rules use .m-footer ancestor so they win over the inline
   `.marketing-body a { color: <theme-link> }` injected by the layout. */
.m-footer .m-footer__col h4,
.m-footer .m-footer__col-heading {
  color: var(--m-footer-heading, var(--m-coral));
  font-family: var(--m-font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.m-footer .m-footer__col a {
  display: block;
  color: var(--m-footer-link, var(--m-sand-100));
  padding: 2px 0;
  font-size: 0.94rem;
  font-family: var(--m-font-body);
  text-decoration: none;
  transition: color 0.15s ease;
}
.m-footer .m-footer__col a:hover {
  color: var(--m-footer-link-hover, var(--m-coral));
  text-decoration: none;
}
/* Bottom bar now carries the copyright only. */
.m-footer__bottom {
  max-width: 1200px; margin: 24px auto 0; padding: 20px 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; flex-wrap: wrap;
  font-size: 0.85rem; color: rgba(255, 255, 255, 0.7);
}
.m-footer .m-footer__bottom p { margin: 4px 0; color: rgba(255, 255, 255, 0.7); }
.m-footer .m-footer__made {
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Mobile: stack the brand above the meta block and left-align it. */
@media (max-width: 700px) {
  .m-footer__inner { flex-direction: column; gap: 24px; }
  .m-footer__meta  { align-items: flex-start; text-align: left; }
  .m-footer .m-footer__meta .m-footer__legal { justify-content: flex-start; }
}

/* ==========================================================================
   BLOG
   ========================================================================== */
.blog-hero {
  padding: 96px 0 56px; text-align: center;
  background: var(--m-sand-50);
  position: relative; overflow: hidden;
}
.blog-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 60%;
  height: 1px;
  background: var(--m-line-strong);
  pointer-events: none;
}
.post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; } }
.post-card {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 28px;
  transition: border-color 0.18s, transform 0.18s;
  display: block; color: inherit; text-decoration: none;
}
.post-card:hover {
  border-color: var(--m-deep);
  transform: translateY(-2px);
  text-decoration: none;
}
.post-card__meta {
  font-family: var(--m-font-mono);
  font-size: 0.75rem;
  color: var(--m-ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.post-card h3 {
  font-family: var(--m-font-display);
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--m-deep);
}
.post-card p  { margin: 0; font-size: 0.95rem; }

.post         { background: var(--m-sand-50); padding: 64px 0; }
.post__inner  { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.post__meta {
  font-family: var(--m-font-mono);
  font-size: 0.78rem;
  color: var(--m-ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.post h1            { margin-bottom: 24px; }
.post__body         { font-size: 1.1rem; line-height: 1.7; color: var(--m-ink); }
.post__body p       { margin: 0 0 1.2em; font-size: 1.1rem; }
.post__body h2      { font-size: 1.6rem; margin: 1.5em 0 0.5em; font-family: var(--m-font-display); }
.post__body h3      { font-size: 1.25rem; margin: 1.3em 0 0.4em; font-family: var(--m-font-display); }
.post__body ul,
.post__body ol      { padding-left: 24px; margin: 0 0 1.2em; }
.post__body li      { margin: 0.3em 0; }
.post__body a       { color: var(--m-deep); text-decoration: underline; }
.post__body a:hover { color: var(--m-coral); }
.post__back {
  display: inline-block; margin-bottom: 32px;
  color: var(--m-ink-soft);
  font-size: 0.92rem;
}

/* ==========================================================================
   IMAGE-MODE HERO. Image still drives bg + overlay handles contrast.
   New typography flows through naturally.
   ========================================================================== */
.hero--has-image {
  position: relative;
  padding: 120px 0 140px;
  text-align: center;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero--has-image .hero__bg-image {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--has-image .hero__inner--image {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 860px; margin: 0 auto; padding: 0 24px;
}
/* Text shadow on .hero--has-image .*-on-image is set by the marketing layout's
   inline <style>, driven by SiteSetting.hero_text_shadow_enabled? + strength. */
.hero--has-image .eyebrow--on-image {
  color: var(--m-sand-50);
  opacity: 0.95;
}
.hero--has-image .hero__title--on-image {
  color: var(--m-sand-50);
}
.hero--has-image .hero__sub--on-image {
  color: var(--m-sand-50);
  opacity: 0.95;
  max-width: 640px; margin: 0 auto 2em;
}
.hero--has-image .hero__micro--on-image {
  color: var(--m-sand-50);
  opacity: 0.85;
}
/* Configurable hero overlay: strength x tint */
.hero--has-image .hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}
.hero__overlay--tint-navy  { --ovl-rgb: 11, 42, 74;     --ovl-text: #fff; }
.hero__overlay--tint-black { --ovl-rgb: 0, 0, 0;        --ovl-text: #fff; }
.hero__overlay--tint-blue  { --ovl-rgb: 26, 158, 212;   --ovl-text: #fff; }
.hero__overlay--tint-white { --ovl-rgb: 255, 255, 255;  --ovl-text: #0b2a4a; }
.hero__overlay--subtle { background: linear-gradient(180deg, rgba(var(--ovl-rgb), 0.18) 0%, rgba(var(--ovl-rgb), 0.05) 50%, rgba(var(--ovl-rgb), 0.2) 100%); }
.hero__overlay--light  { background: linear-gradient(180deg, rgba(var(--ovl-rgb), 0.28) 0%, rgba(var(--ovl-rgb), 0.12) 50%, rgba(var(--ovl-rgb), 0.32) 100%); }
.hero__overlay--medium { background: linear-gradient(180deg, rgba(var(--ovl-rgb), 0.45) 0%, rgba(var(--ovl-rgb), 0.28) 50%, rgba(var(--ovl-rgb), 0.5) 100%); }
.hero__overlay--strong { background: linear-gradient(180deg, rgba(var(--ovl-rgb), 0.6)  0%, rgba(var(--ovl-rgb), 0.45) 50%, rgba(var(--ovl-rgb), 0.65) 100%); }

.hero--has-image:has(.hero__overlay--tint-white) .hero__title--on-image,
.hero--has-image:has(.hero__overlay--tint-white) .hero__sub--on-image,
.hero--has-image:has(.hero__overlay--tint-white) .hero__micro--on-image,
.hero--has-image:has(.hero__overlay--tint-white) .eyebrow--on-image {
  color: var(--m-deep) !important;
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
}
/* ==========================================================================
   PER-SECTION BACKGROUND OVERRIDE (CMS sections).
   When section_inverted_class fires (luminance < 0.5), force light text.
   ========================================================================== */
.marketing-section--inverted,
.marketing-section--inverted h1,
.marketing-section--inverted h2,
.marketing-section--inverted h3,
.marketing-section--inverted h4,
.marketing-section--inverted p,
.marketing-section--inverted li,
.marketing-section--inverted summary,
.marketing-section--inverted figcaption,
.marketing-section--inverted blockquote,
.marketing-section--inverted .eyebrow {
  color: var(--m-sand-50) !important;
}

/* ==========================================================================
   PER-PAGE HERO COLOUR OVERRIDES (set inline by page_hero_style helper).
   Default fallbacks reflect the new design system.
   ========================================================================== */

/* Generic page hero (features, pricing, faq, about, contact) */
.page-hero {
  background: var(--hero-bg, var(--m-sand-50));
}
.page-hero h1 {
  color: var(--hero-text, var(--m-deep));
}
.page-hero .lede,
.page-hero p {
  color: var(--hero-text, var(--m-ink-soft));
}
.page-hero .eyebrow {
  color: var(--hero-eyebrow, var(--m-coral));
}
.page-hero .btn-primary {
  background: var(--hero-cta-primary, var(--m-deep));
  color: var(--hero-cta-primary-text, var(--m-sand-50));
  border-color: var(--hero-cta-primary, var(--m-deep));
}
.page-hero .btn-ghost {
  background: var(--hero-cta-secondary, var(--m-white));
  color: var(--hero-cta-secondary-text, var(--m-deep));
  border-color: var(--hero-cta-secondary-border, var(--m-line-strong));
}

/* Home default-mode hero (no image) */
.hero:not(.hero--has-image) {
  background-color: var(--hero-bg, var(--m-sand-50));
}
.hero:not(.hero--has-image) .hero__title {
  color: var(--hero-text, var(--m-deep));
}
.hero:not(.hero--has-image) .hero__sub,
.hero:not(.hero--has-image) .hero__micro {
  color: var(--hero-text, var(--m-ink-soft));
}
.hero:not(.hero--has-image) .eyebrow {
  color: var(--hero-eyebrow, var(--m-coral));
}
.hero:not(.hero--has-image) .btn-primary {
  background: var(--hero-cta-primary, var(--m-deep));
  color: var(--hero-cta-primary-text, var(--m-sand-50));
  border-color: var(--hero-cta-primary, var(--m-deep));
}
.hero:not(.hero--has-image) .btn-ghost {
  background: var(--hero-cta-secondary, var(--m-white));
  color: var(--hero-cta-secondary-text, var(--m-deep));
  border-color: var(--hero-cta-secondary-border, var(--m-line-strong));
}

/* When a custom hero bg is set, hide the contour + watermark so the colour fills cleanly. */
.hero[style*="--hero-bg"]::before,
.hero[style*="--hero-bg"]::after {
  display: none;
}

/* Image-mode: image still provides bg + overlay handles its own contrast,
   but eyebrow / text / CTA overrides still apply. */
.hero--has-image .hero__title--on-image,
.hero--has-image .hero__sub--on-image,
.hero--has-image .hero__micro--on-image {
  color: var(--hero-text, var(--m-sand-50));
}
.hero--has-image .eyebrow--on-image {
  color: var(--hero-eyebrow, var(--m-sand-50));
}
.hero--has-image .btn-primary {
  background: var(--hero-cta-primary, var(--m-deep));
  color: var(--hero-cta-primary-text, var(--m-sand-50));
  border-color: var(--hero-cta-primary, var(--m-deep));
}
.hero--has-image .btn-ghost {
  background: var(--hero-cta-secondary, var(--m-white));
  color: var(--hero-cta-secondary-text, var(--m-deep));
  border-color: var(--hero-cta-secondary-border, var(--m-line-strong));
}

/* Inverted hero (bg luminance < 0.5): force light text + eyebrow only.
   Ghost button stays white-bg + deep text so it's readable on the dark hero
   without further overrides. Inline style still wins for explicit user choices. */
.page-hero--inverted {
  --hero-text: var(--m-sand-50);
  --hero-eyebrow: var(--m-sand-50);
}

/* ==========================================================================
   SPLIT SECTION. Two-column image + text, CMS page-builder ("split" kind).
   ========================================================================== */
.split-section {
  padding: var(--section-py) 0;
}
.split-section--sand-50 { background: var(--m-sand-50); }
.split-section--sand-100 { background: var(--m-sand-100); }
.split-section--navy-tint {
  background: rgba(11, 42, 74, 0.04);
}

.split-section__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-section__inner--image-right {
  grid-template-areas: "text image";
}
.split-section__inner--image-left {
  grid-template-areas: "image text";
}
.split-section__image { grid-area: image; }
.split-section__text { grid-area: text; }

.split-section__image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--m-line-strong);
}

.split-section__image--16\:9 img { aspect-ratio: 16 / 9; object-fit: cover; }
.split-section__image--4\:3 img { aspect-ratio: 4 / 3; object-fit: cover; }
.split-section__image--1\:1 img { aspect-ratio: 1 / 1; object-fit: cover; }

.split-section__text--center { text-align: center; }
.split-section__title {
  font-family: var(--m-font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 0.6em;
  color: var(--m-deep);
}
.split-section__body {
  color: var(--m-ink-soft);
  line-height: 1.6;
}
.split-section__caption {
  font-family: var(--m-font-mono);
  font-size: 0.85rem;
  color: var(--m-ink-mute);
  margin-top: 12px;
  text-align: center;
}

/* Mobile: stack with image on top regardless of desktop position. */
@media (max-width: 768px) {
  .split-section__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "image" "text" !important;
    gap: 32px;
  }
}

/* ─────────────────────────────────────────
   MARKETING HOMEPAGE (app/views/marketing/home.html.erb)
   Relocated here from a block previously appended to application.css so these
   rules cascade AFTER the base .card / .card h3 / .card:hover styles above and
   win on equal specificity. That is what makes the two before/after cards look
   different. All values use existing --m-* tokens. Scoped to the homepage,
   which is the only page using the bare .hero class and the #hero, #two-months,
   #benefits and #final-cta section ids.
───────────────────────────────────────── */

/* Two before/after cards: distinct backgrounds, top accents and headings. */
/* Editable section title above the two before/after cards. Centred like the
   other marketing section headings; font and colour come from .marketing-body
   h2. Scoped under #two-months so the margin beats the base
   ".marketing-body h2 { margin: 0 0 0.5em }" rule (which otherwise out-specifies
   a plain class). #two-months is homepage only. */
#two-months .two-months__title {
  text-align: center;
  margin: 0 0 2rem;
}
.two-months__grid {
  display: grid;
  gap: 24px;
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  text-align: left;
}
.two-months__card {
  border-top: 4px solid var(--m-line-strong);
}
.two-months__card--without {
  background: var(--card-without-bg, var(--m-sand-100));
  border-top-color: var(--card-without-accent, var(--m-coral));
}
/* Scoped under #two-months so this beats the layout's inline
   ".marketing-body h3 { color: ... }" rule, which has equal specificity but
   loads after marketing.css. Without the id scope the heading override (and even
   the accent fallback) never won, so the heading stayed on the theme heading
   colour. The cards live inside #two-months, which is homepage only. */
#two-months .two-months__card--without h3 {
  color: var(--card-without-heading, var(--card-without-accent, var(--m-coral)));
}
.two-months__card--without:hover {
  border-top-color: var(--card-without-accent, var(--m-coral));
}
.two-months__card--with {
  background: var(--card-with-bg, var(--m-white));
  border-top-color: var(--card-with-accent, var(--m-blue));
}
#two-months .two-months__card--with h3 {
  color: var(--card-with-heading, var(--card-with-accent, var(--m-blue)));
}
.two-months__card--with:hover {
  border-top-color: var(--card-with-accent, var(--m-blue));
}

/* Card body text colour. Falls back to the base card paragraph colour token
   (--m-ink-soft, inherited from .marketing-body p), so the default is unchanged
   until an override variable is set on #two-months. */
.two-months__card--without p {
  color: var(--card-without-text, var(--m-ink-soft));
}
.two-months__card--with p {
  color: var(--card-with-text, var(--m-ink-soft));
}

/* Optional icon before each card heading. The icon colour is independent, and
   falls back to the heading colour, then the top edge (accent), then the token,
   so by default the icon matches the heading exactly as before. The icon sits
   inside the h3, so it is targeted there. */
.two-months__card h3 i {
  margin-right: 0.5rem;
}
.two-months__card--without h3 i {
  color: var(--card-without-icon-color, var(--card-without-heading, var(--card-without-accent, var(--m-coral))));
}
.two-months__card--with h3 i {
  color: var(--card-with-icon-color, var(--card-with-heading, var(--card-with-accent, var(--m-blue))));
}

/* Closing CTA micro note under the button. */
.final-cta__note {
  margin-top: 1.25rem;
  margin-bottom: 0;
  font-size: 0.9rem;
}

/* Tighten the homepage vertical rhythm to the standard --section-py used across
   the marketing site. The hero and the navy closing block previously used the
   larger spacing, which left big empty gaps and an oversized, near-empty navy
   band. The benefits grid also carried a 48px top gap meant for a heading the
   homepage does not have. Scoped to the homepage section ids so other pages
   keep their existing spacing. */
#hero.hero {
  padding: var(--section-py) 0;
}
#final-cta.final-cta {
  padding: var(--section-py) 0;
}
#benefits .grid {
  margin-top: 0;
}

/* ==========================================================================
   HERO LAYOUTS. Per-page hero_layout: centered (default), side_by_side, stacked.
   The screenshot is the MarketingPage hero_screenshot attachment.
   ========================================================================== */
.hero--side-by-side {
  background: var(--hero-bg, var(--m-sand-50));
  padding: clamp(60px, 8vw, 100px) 0;
}
.hero__inner--side-by-side {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero__text-column {
  text-align: left;
}
.hero__text-column .hero__cta {
  justify-content: flex-start;
}
.hero__text-column .hero__micro {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.hero__image-column .hero__screenshot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--m-line-strong);
  box-shadow: 0 20px 60px rgba(11, 42, 74, 0.12);
}

.hero-screenshot-band {
  background: var(--m-sand-50);
  padding: 0 0 80px 0;
  margin-top: -40px;
}
.hero-screenshot-band__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero-screenshot-band .hero__screenshot {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--m-line-strong);
  box-shadow: 0 20px 60px rgba(11, 42, 74, 0.12);
}

/* Mobile: side-by-side stacks vertically, screenshot above text. The order flip
   puts the image column first when the grid collapses to one column (the markup
   has the text column first for a sensible no-CSS / reading order). */
@media (max-width: 900px) {
  .hero__inner--side-by-side {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero__image-column {
    order: -1;
  }
  .hero__text-column {
    text-align: center;
  }
  .hero__text-column .hero__cta {
    justify-content: center;
  }
  .hero__text-column .hero__micro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   HERO SCREENSHOT CAROUSEL. Stacked cards that rotate (hero_carousel
   Stimulus controller). Used in the side_by_side and stacked hero layouts.
   ========================================================================== */
.hero-carousel {
  position: relative;
  width: 100%;
  perspective: 1500px;
}

.hero-carousel__stack {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10; /* matches recommended screenshot proportions */
  transform-style: preserve-3d;
}

/* Each card absolute-positioned in same space */
.hero-carousel__card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--m-white);
  border: 1px solid var(--m-line-strong);
  box-shadow: 0 20px 60px rgba(11, 42, 74, 0.12);
  transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

/* Front card: full visibility, no transform */
.hero-carousel__card.is-front {
  transform: translateX(0) translateY(0) scale(1);
  opacity: 1;
  z-index: 3;
}

/* Second card: behind and slightly up/right */
.hero-carousel__card.is-second {
  transform: translateX(20px) translateY(-12px) scale(0.96);
  opacity: 0.85;
  z-index: 2;
}

/* Third card: further behind */
.hero-carousel__card.is-third {
  transform: translateX(40px) translateY(-24px) scale(0.92);
  opacity: 0.6;
  z-index: 1;
}

.hero-carousel__card.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(20px) scale(0.85) rotate(-3deg);
  z-index: 0;
  pointer-events: none;
}

/* Brief "lift before throw": the front card raises slightly before sliding off. */
.hero-carousel__card.is-leaving {
  transform: translateX(-15%) translateY(-8px) scale(1.02) rotate(-1deg);
  opacity: 0.8;
  z-index: 4;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.6, 1),
              opacity 200ms ease-out;
}

/* Image inside card */
.hero-carousel__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Caption */
.hero-carousel__caption {
  position: absolute;
  bottom: 12px;
  left: 16px;
  margin: 0;
  font-family: var(--m-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--m-deep);
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Dots */
.hero-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.hero-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--m-line-strong);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 400ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 400ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 200ms;
}

.hero-carousel__dot:hover {
  transform: scale(1.2);
}

.hero-carousel__dot.is-active {
  background: var(--m-coral);
  border-color: var(--m-coral);
}

/* Reduced motion: just show front card, no animation */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel__card {
    transition: none;
  }
  .hero-carousel__card.is-second,
  .hero-carousel__card.is-third {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE REBUILD ("Virtual Sales Coach" repositioning).
   New sections in app/views/marketing/home.html.erb. All values use existing
   --m-* tokens, and the card / grid / eyebrow / checklist styles are reused
   from above. Only the classes below are new. Appended last so the background
   utilities win over the base section-background rules on equal specificity.
   ========================================================================== */

/* Section background utilities used to alternate the homepage rhythm. */
.section-white    { background: var(--m-white); }
.section-sand-100 { background: var(--m-sand-100); }

/* Centred heading block: eyebrow + h2 + optional lede. Reused by most new
   sections. The lede selector is two classes on purpose, so it out-specifies
   ".marketing-body p { margin: 0 }" and stays centred. */
.section-intro { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-intro .lede { margin: 0 auto; }

/* Grid following a .section-intro: the intro already supplies the gap below the
   heading, so the grid drops its own top margin to avoid doubling it. */
.grid--flush { margin-top: 0; }

/* Five-up card row (Problem section). Steps down so cards never fall below a
   readable width. */
.grid--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1080px) { .grid--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .grid--5 { grid-template-columns: 1fr; } }

/* Flow row (How it works, reused for the AI cadence line). A wrapping row of
   chips joined by coral arrows. On mobile it stacks and the arrows rotate to
   point down. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 0;
}
.flow__node {
  font-family: var(--m-font-display);
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--m-deep);
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 8px;
  padding: 12px 18px;
}
.flow__node--accent {
  background: var(--m-deep);
  color: var(--m-sand-50);
  border-color: var(--m-deep);
}
.flow__arrow {
  color: var(--m-coral);
  font-family: var(--m-font-mono);
  font-size: 1.1rem;
  line-height: 1;
}
@media (max-width: 600px) {
  .flow { flex-direction: column; }
  .flow__arrow { transform: rotate(90deg); }
}

/* Coach section: emphasise the lead-in label on each checklist point, and drop
   the checklist top margin (the intro already supplies the gap). Scoped to
   .coach so the .checklist used on the features page is unaffected. */
.coach .checklist { margin-top: 0; }
.coach .checklist li strong { color: var(--m-deep); }

/* Closing CTA lede paragraph. Two-class selector so it centres over
   ".marketing-body p"; colour is inherited from ".final-cta p". */
.final-cta .final-cta__lede { max-width: 640px; margin: 0 auto 2em; }

/* ==========================================================================
   HOMEPAGE ILLUSTRATIONS. Inline SVGs, coloured only from --m-* tokens.
   Each SVG is decorative (aria-hidden) and sits in a sizing container that
   scales it to the section width. Appended, not editing existing rules.
   ========================================================================== */
.illus { margin: 0 auto; }
.illus svg { width: 100%; height: auto; display: block; }

/* Section 1: Virtual Sales Coach, "a quiet teammate". */
.illus--coach {
  max-width: 440px;
  margin: 8px auto 40px;
  filter: drop-shadow(0 10px 22px rgba(11, 42, 74, 0.07));
}

/* ==========================================================================
   HOMEPAGE, "Sales shouldn't feel like this" concern list. Centred, muted
   questions with an emphasised closing line. Two-class selectors so they beat
   ".marketing-body p / li". Appended, not editing existing rules.
   ========================================================================== */
.concerns .concern-list {
  list-style: none;
  padding: 0;
  margin: 28px auto 0;
  max-width: 560px;
  text-align: center;
}
.concerns .concern-list li {
  color: var(--m-ink-soft);
  font-size: 1.1rem;
  font-style: italic;
  padding: 8px 0;
}
.concerns .concern-close {
  text-align: center;
  margin: 28px auto 0;
  max-width: 640px;
  color: var(--m-deep);
  font-weight: 600;
  font-size: 1.2rem;
}

/* ==========================================================================
   WITHOUT / WITH comparison lists (two-months cards). Coral cross for Without,
   green tick for With. The green reuses the existing eyebrow--green value.
   ========================================================================== */
.compare-list { list-style: none; padding: 0; margin: 4px 0 0; }
.compare-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  font-size: 0.98rem;
  color: var(--m-ink);
}
.compare-list__icon { flex-shrink: 0; font-size: 0.85rem; line-height: 1.5; }
.compare-list--without .compare-list__icon { color: var(--m-coral); }
.compare-list--with .compare-list__icon    { color: #2a9d8f; }

/* ==========================================================================
   HOW IT WORKS, seven-step workflow. Soft rectangle nodes joined by thin lines
   with a navy diamond (the horizon-divider motif). Cove is the coral anchor.
   Wraps, then stacks vertically on mobile with the arrows rotated to point down.
   ========================================================================== */
.workflow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.workflow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.workflow__icon  { font-size: 1.15rem; color: var(--m-deep); }
.workflow__label { font-family: var(--m-font-display); font-weight: 600; font-size: 0.9rem; color: var(--m-deep); }
.workflow__node--cove {
  background: var(--m-coral-soft);
  border-color: var(--m-coral);
  box-shadow: 0 0 0 4px rgba(217, 119, 87, 0.14);
}
.workflow__arrow { display: flex; align-items: center; }
.workflow__arrow svg { width: 30px; height: 12px; display: block; }
@media (max-width: 700px) {
  .workflow { flex-direction: column; }
  .workflow__node { width: 100%; max-width: 240px; }
  .workflow__arrow svg { transform: rotate(90deg); }
}

/* ==========================================================================
   PRODUCT GALLERY, "See Cove in action". Screenshots 2 onward from the shared
   hero_screenshots collection. Two columns on desktop, single column on mobile.
   ========================================================================== */
.product-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.product-gallery__item img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--m-line);
  box-shadow: 0 8px 24px rgba(11, 42, 74, 0.08);
}
.product-gallery__caption {
  margin-top: 8px;
  font-family: var(--m-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--m-ink-soft);
}
@media (max-width: 800px) {
  .product-gallery { grid-template-columns: 1fr; }
}

/* ==========================================================================
   REBALANCE the Without / With comparison cards. Production sets per-card CMS
   colours (a navy Without card with white text) that pull the eye to the
   negative side and, now the bodies are icon lists, hurt contrast. Give both
   cards equal weight: white body, 1px line border, a subtle sand heading strip.
   Meaning is carried by the icons (coral cross / green tick). These rules do
   NOT read the --card-* CMS variables, so they win over the CMS override for
   these two cards. Scoped under #two-months so they beat the base id rules.
   ========================================================================== */
#two-months .two-months__card--without,
#two-months .two-months__card--with {
  background: var(--m-white);
  border: 1px solid var(--m-line);
}
#two-months .two-months__card--without:hover,
#two-months .two-months__card--with:hover {
  border-color: var(--m-deep);
}
#two-months .two-months__card--without h3,
#two-months .two-months__card--with h3 {
  color: var(--m-deep);
  background: var(--m-sand-100);
  margin: -28px -28px 18px;
  padding: 16px 28px;
  border-radius: 12px 12px 0 0;
}
#two-months .two-months__card--without h3 i { color: var(--m-coral); }
#two-months .two-months__card--with h3 i    { color: #2a9d8f; }

/* ==========================================================================
   MCP SECTION additions. AI tool wordmark badges (text only, no logos) and a
   clean framed Claude Desktop proof screenshot.
   ========================================================================== */
.ai-tool-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 32px auto 40px;
  max-width: 800px;
}
.ai-tool-badge {
  background: var(--m-sand-100);
  border: 1px solid var(--m-line);
  border-radius: 20px;
  padding: 8px 20px;
  font-family: var(--m-font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-deep);
  font-weight: 600;
}

/* Logo badges: render the Simple Icons SVGs greyscale, colouring on hover. The
   badge stretches to the row height so the ChatGPT text wordmark lines up with
   the taller logo pills. (ChatGPT stays text: OpenAI is not in Simple Icons.) */
.ai-tool-badge { display: inline-flex; align-items: center; }
.ai-tool-badge__logo {
  height: 24px;
  width: auto;
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.ai-tool-badge:hover .ai-tool-badge__logo { filter: grayscale(0); opacity: 1; }

/* Proof screenshot. The caption is scoped under .mcp-proof-shot (two classes) so
   its size and margin beat the base ".marketing-body p" rule. */
.mcp-proof-shot { max-width: 900px; margin: 40px auto 0; }
.mcp-proof-shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--m-line-strong);
  box-shadow: 0 20px 40px rgba(11, 42, 74, 0.08);
}
.mcp-proof-shot .mcp-proof-shot__caption {
  text-align: center;
  margin-top: 12px;
  font-family: var(--m-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-ink-soft);
}

/* ==========================================================================
   LEGAL PAGES (Privacy Policy, Terms of Service). Long-form static content in
   the shared marketing layout.
   ========================================================================== */
.legal-page { max-width: 800px; margin: 0 auto; padding: 80px 24px; }
.legal-page h1 { font-family: var(--m-font-display); font-size: 2.25rem; margin-bottom: 8px; color: var(--m-deep); }
.legal-page h2 { font-family: var(--m-font-display); font-size: 1.4rem; margin: 40px 0 16px; color: var(--m-deep); }
.legal-page h3 { font-size: 1.1rem; margin: 24px 0 12px; color: var(--m-deep); }
.legal-page p { margin-bottom: 16px; line-height: 1.7; color: var(--m-ink-soft); }
.legal-page ul { margin-bottom: 16px; padding-left: 24px; }
.legal-page li { margin-bottom: 8px; line-height: 1.6; color: var(--m-ink-soft); }
.legal-page strong { color: var(--m-deep); }
.legal-page a { color: var(--m-blue); text-decoration: underline; }
.legal-page .last-updated { color: var(--m-ink-soft); font-size: 0.9rem; margin-bottom: 40px; font-family: var(--m-font-mono); }
.legal-page__toc { background: var(--m-sand-50); border: 1px solid var(--m-line); border-radius: 12px; padding: 24px; margin: 32px 0; }
.legal-page__toc h2 { margin-top: 0; }

/* Footer legal links (Privacy, Terms) in the bottom bar. The .m-footer ancestor
   makes these win over the inline ".marketing-body a" injected by the layout. */
.m-footer .m-footer__legal { display: flex; gap: 18px; margin: 0; }
.m-footer .m-footer__legal a { color: rgba(255, 255, 255, 0.9); text-decoration: none; }
.m-footer .m-footer__legal a:hover { color: #ffffff; text-decoration: underline; }

/* ==========================================================================
   MCP PROOF, two-column. Explanatory text beside the Claude Desktop screenshot.
   Replaces the single-column .mcp-proof-shot use in the view (that block's CSS
   is left in place, unreferenced, in case we revert). Stacks on mobile.
   ========================================================================== */
.mcp-proof {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: center;
  max-width: 1100px;
  margin: 40px auto 0;
}
.mcp-proof__text h3 {
  font-family: var(--m-font-display);
  font-size: 1.5rem;
  color: var(--m-deep);
  margin-bottom: 12px;
}
.mcp-proof__text p { color: var(--m-ink-soft); line-height: 1.6; margin: 0; }
.mcp-proof__shot img {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--m-line-strong);
  box-shadow: 0 20px 40px rgba(11, 42, 74, 0.08);
  display: block;
}
.mcp-proof .mcp-proof__caption {
  margin-top: 12px;
  font-family: var(--m-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--m-ink-soft);
}
@media (max-width: 800px) {
  .mcp-proof { grid-template-columns: 1fr; gap: 28px; }
}

/* ==========================================================================
   SINGLE-PAGE ANCHORS. Smooth scrolling (only when the user has not asked for
   reduced motion), with room under the sticky nav so sections are not hidden.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#virtual-sales-coach, #mcp, #pricing, #faq { scroll-margin-top: 84px; }

/* ==========================================================================
   HOMEPAGE PRICING. Scoped under #pricing so it does not collide with the
   standalone /pricing page, which also uses .pricing-grid.
   ========================================================================== */
/* .pricing-grid is also listed in the shared sand-background rule higher up, which
   paints var(--m-sand-50) behind and between the cards. The CMS themes --m-sand to
   a pale blue, so that showed up as a blue block inside the section. Clear it so the
   section's own background shows through. */
#pricing .pricing-grid {
  background: transparent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
#pricing .pricing-tier {
  background: var(--m-white);
  border: 1px solid var(--m-line);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
}
#pricing .pricing-tier--featured {
  border-color: var(--m-coral);
  position: relative;
  box-shadow: 0 8px 32px rgba(217, 119, 87, 0.15);
}
#pricing .pricing-tier__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--m-coral);
  color: var(--m-white);
  padding: 4px 12px;
  border-radius: 12px;
  font-family: var(--m-font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
#pricing .pricing-tier__name { font-family: var(--m-font-display); font-size: 1.3rem; margin: 0 0 8px; color: var(--m-deep); }
#pricing .pricing-tier__desc { color: var(--m-ink-soft); font-size: 0.9rem; margin: 0 0 24px; }
#pricing .pricing-tier__price { font-family: var(--m-font-display); font-size: 2.2rem; color: var(--m-deep); margin: 0; }
#pricing .pricing-tier__sub-price { font-family: var(--m-font-mono); font-size: 0.75rem; color: var(--m-ink-soft); text-transform: uppercase; letter-spacing: 0.06em; margin: 4px 0 24px; }
#pricing .pricing-tier__features { list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1; }
#pricing .pricing-tier__features li { padding: 8px 0; color: var(--m-ink-soft); border-bottom: 1px solid var(--m-line); }
#pricing .pricing-tier__features li:last-child { border-bottom: none; }
#pricing .pricing-vat-note { text-align: center; margin: 24px auto 0; font-size: 0.85rem; color: var(--m-ink-soft); max-width: 700px; padding: 0 24px; }
@media (max-width: 900px) {
  #pricing .pricing-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ==========================================================================
   HOMEPAGE FAQ. Scoped under #faq so the .faq-item reset overrides the existing
   details-based .faq-item box styles used elsewhere. Click to expand, one open
   at a time (accordion Stimulus controller).
   ========================================================================== */
#faq .faq-grid { max-width: 800px; margin: 0 auto; padding: 0 24px; }
#faq .faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--m-line);
  border-radius: 0;
  margin: 0;
  padding: 20px 0;
  cursor: pointer;
}
#faq .faq-item__question {
  font-family: var(--m-font-display);
  font-size: 1.1rem;
  color: var(--m-deep);
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
#faq .faq-item__question::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: transform 200ms; }
#faq .faq-item.is-open .faq-item__question::after { content: "-"; transform: rotate(180deg); }
#faq .faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out, padding 300ms ease-out;
  color: var(--m-ink-soft);
  line-height: 1.7;
}
#faq .faq-item.is-open .faq-item__answer { max-height: 500px; padding-top: 12px; }