/* ==========================================================================
   QUAILGENT MARKETING SITE — COMPONENT LIBRARY
   Built from Figma's "Components" page (file oCpQ88t7EMRG6wCtENB3wY,
   node 18:3), atoms first. Requires tokens.css to be loaded first.
   Uses real CSS classes + a couple of data-attribute variants (not inline
   styles, not Tailwind) to match this repo's existing plain-CSS convention.
   ========================================================================== */

/* ── Scroll-reveal system ──
   Generic, reusable entrance animations driven by a data-reveal attribute
   on any element -- interactions.js adds .is-visible the first time an
   element crosses into the viewport (IntersectionObserver), this CSS
   handles the actual motion. Different data-reveal values give visibly
   different motion so a page doesn't play the same effect on every
   section. [data-reveal-group] children get an automatic stagger (JS sets
   --reveal-delay per child by index) instead of firing all at once.
   Under prefers-reduced-motion, interactions.js marks everything visible
   immediately and this file is never given a chance to hide anything. */
[data-reveal] {
  opacity: 0;
  transition: opacity 700ms ease-out, transform 700ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none !important; }
[data-reveal="fade-up"]    { transform: translateY(28px); }
[data-reveal="fade-in"]    { transform: none; }
[data-reveal="slide-left"] { transform: translateX(-48px); }
[data-reveal="slide-right"]{ transform: translateX(48px); }
[data-reveal="scale-in"]   { transform: scale(0.94); }
[data-reveal="rise-big"]   { transform: translateY(56px); }

/* ── Button (Figma node 40:70 / component 40:74) ──
   Type: Primary / Secondary / Ghost. Size: L 56px / M 48px / S 44px tall.
   State: Default / Hover / Pressed / Disabled -- hover+press are prototyped
   in Figma as a 200ms ease-out smart-animate, which is exactly this app's
   established button transition convention (see ENGINEERING_LOG.md's
   animation pass), so that's what's used here too. */

.mkt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border-radius: var(--radius-full);
  font-family: 'Parkinsans', sans-serif;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background-color 200ms ease-out, border-color 200ms ease-out,
              color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

.mkt-btn:disabled,
.mkt-btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.mkt-btn svg, .mkt-btn img { display: block; }

/* Sizes */
.mkt-btn--l { padding: var(--space-16) var(--space-32); font-size: 18px; line-height: 24px; }
.mkt-btn--m { padding: var(--space-12) var(--space-24); font-size: 16px; line-height: 24px; }
.mkt-btn--s { padding: var(--space-12) var(--space-16); font-size: 14px; line-height: 20px; }
.mkt-btn--l .mkt-btn-icon { width: 20px; height: 20px; }
.mkt-btn--m .mkt-btn-icon { width: 20px; height: 20px; }
.mkt-btn--s .mkt-btn-icon { width: 16px; height: 16px; }

/* Primary */
.mkt-btn--primary {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.mkt-btn--primary:hover:not(:disabled) {
  background-color: var(--brand-primary-hover);
  transform: translateY(-1px) scale(1.01);
}
.mkt-btn--primary:active:not(:disabled) {
  background-color: var(--brand-primary-pressed);
  transform: translateY(0) scale(1);
}
.mkt-btn--primary:disabled, .mkt-btn--primary.is-disabled {
  background-color: var(--bg-disabled);
  color: var(--text-disabled);
}

/* Secondary */
.mkt-btn--secondary {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--border-strong);
}
.mkt-btn--secondary:hover:not(:disabled) {
  background-color: var(--bg-hover);
  transform: translateY(-1px) scale(1.01);
}
.mkt-btn--secondary:active:not(:disabled) {
  background-color: var(--bg-pressed);
  transform: translateY(0) scale(1);
}
.mkt-btn--secondary:disabled, .mkt-btn--secondary.is-disabled {
  background-color: var(--bg-primary);
  border-color: var(--border-default);
  color: var(--text-disabled);
}

/* Ghost */
.mkt-btn--ghost {
  background-color: transparent;
  color: var(--text-primary);
}
.mkt-btn--ghost:hover:not(:disabled) {
  background-color: var(--bg-hover);
  transform: translateY(-1px) scale(1.01);
}
.mkt-btn--ghost:active:not(:disabled) {
  background-color: var(--bg-pressed);
  transform: translateY(0) scale(1);
}
.mkt-btn--ghost:disabled, .mkt-btn--ghost.is-disabled {
  color: var(--text-disabled);
}

@media (prefers-reduced-motion: reduce) {
  .mkt-btn { transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out; }
  .mkt-btn:hover, .mkt-btn:active { transform: none; }
}

/* ── Input / Select (Figma node 42:92, components 42:156 / 42:189) ──
   48px single-line / 128px multiline, 8px radius. Focus: 2px aqua border +
   Focus/Ring shadow (never color alone). Error: danger border + danger
   helper text. Label always above the field. */

.mkt-field-group { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; }
.mkt-field-label { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; color: var(--text-primary); }
.mkt-field-helper { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 12px; line-height: 16px; letter-spacing: 0.12px; color: var(--text-secondary); }
.mkt-field-helper.is-error { color: var(--text-danger); }

.mkt-input, .mkt-select {
  width: 100%;
  min-height: 48px;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-default);
  background-color: var(--bg-primary);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.mkt-input::placeholder { color: var(--text-tertiary); }
.mkt-input:focus, .mkt-select:focus {
  outline: none;
  border: 2px solid var(--border-focus);
  padding: 11px 15px; /* compensate for the 1px extra border so layout doesn't jump */
  box-shadow: var(--focus-ring);
}
.mkt-input.is-error, .mkt-select.is-error {
  border: 2px solid var(--border-danger);
  padding: 11px 15px;
}
.mkt-input.is-multiline { min-height: 128px; resize: vertical; }

.mkt-select {
  appearance: none;
  background-image: url('icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--space-16) center;
  background-size: 20px;
  padding-right: var(--space-32);
  cursor: pointer;
}

/* ── Checkbox (component 44:152) — real <input type=checkbox>, visually
   hidden, driving a styled 20px box via the label's ::before. 44px row
   touch target. Check-mark fades in on check (~120ms, per the animation
   spec) via a CSS transition on the pseudo-element's opacity. ── */

.mkt-checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 44px;
  cursor: pointer;
}
.mkt-checkbox-row input[type="checkbox"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0);
}
.mkt-checkbox-box {
  position: relative;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-xs);
  border: 2px solid var(--border-strong);
  background-color: var(--bg-primary);
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.mkt-checkbox-row:hover input:not(:checked):not(:disabled) ~ .mkt-checkbox-box {
  background-color: var(--bg-hover);
}
.mkt-checkbox-row input:checked ~ .mkt-checkbox-box {
  background-color: var(--bg-inverse);
  border-color: var(--bg-inverse);
}
.mkt-checkbox-row:hover input:checked:not(:disabled) ~ .mkt-checkbox-box {
  background-color: var(--bg-inverse-hover);
  border-color: var(--bg-inverse-hover);
}
.mkt-checkbox-box::after {
  content: "";
  position: absolute;
  inset: 2px;
  background-image: url('icons/check.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  filter: brightness(0) invert(1); /* ink-fill check.svg -> white, for the dark checked box */
  opacity: 0;
  transition: opacity 120ms ease-out;
}
.mkt-checkbox-row input:checked ~ .mkt-checkbox-box::after { opacity: 1; }
.mkt-checkbox-row input:disabled ~ .mkt-checkbox-box { border-color: var(--border-default); background-color: var(--bg-disabled); }
.mkt-checkbox-row input:disabled ~ .mkt-checkbox-label { color: var(--text-disabled); }
.mkt-checkbox-row:has(input:disabled) { cursor: not-allowed; }
.mkt-checkbox-label { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 16px; line-height: 26px; color: var(--text-primary); }

/* ── Billing Toggle (component 44:180) — Monthly / Annual segmented
   control. The active segment's white pill slides between positions
   (~150ms ease-in-out, per the animation spec) via a transform on the
   sliding thumb rather than repainting backgrounds. ── */

.mkt-billing-toggle {
  position: relative;
  display: inline-flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--bg-sunken);
  border-radius: var(--radius-full);
}
.mkt-billing-toggle-thumb {
  position: absolute;
  top: var(--space-4);
  bottom: var(--space-4);
  left: var(--space-4);
  border-radius: var(--radius-full);
  background-color: var(--bg-surface-raised);
  box-shadow: var(--elevation-raised);
  transition: transform 150ms ease-in-out, width 150ms ease-in-out;
  z-index: 0;
}
.mkt-billing-segment {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-8) var(--space-24);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: 'Parkinsans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 150ms ease-in-out;
}
.mkt-billing-segment[aria-pressed="true"] { color: var(--text-primary); }
/* ── Card hover (Feature / Testimonial / Case Study / Blog card grids) ──
   Lift + shadow escalation, 200ms ease-out, per the animation spec. */
.mkt-card-hoverable {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
  box-shadow: var(--elevation-raised);
}
.mkt-card-hoverable:hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-floating);
}
@media (prefers-reduced-motion: reduce) {
  .mkt-card-hoverable { transition: box-shadow 200ms ease-out; }
  .mkt-card-hoverable:hover { transform: none; }
}

/* ── Tag Chip (component 41:137) — not interactive. Tone maps to
   outcome: green=interested, gold=callback, aqua=voicemail, lilac=booked,
   pink=hot lead, red=DNC, neutral=no answer. ── */
.mkt-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-full);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-primary);
}
.mkt-tag-chip-dot { width: 6px; height: 6px; flex-shrink: 0; }
.mkt-tag-chip--green  { background-color: var(--accent-green-subtle); }
.mkt-tag-chip--gold   { background-color: var(--accent-gold-subtle); }
.mkt-tag-chip--aqua   { background-color: var(--accent-aqua-subtle); }
.mkt-tag-chip--lilac  { background-color: var(--accent-lilac-subtle); }
.mkt-tag-chip--pink   { background-color: var(--accent-pink-subtle); }
.mkt-tag-chip--red    { background-color: var(--status-danger-subtle); }
.mkt-tag-chip--neutral{ background-color: var(--bg-sunken); }

/* ── Section Heading (component 66:7562) ── */
.mkt-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--layout-stack-gap);
  max-width: var(--layout-content-max);
}
.mkt-section-heading--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.mkt-section-heading h2 { max-width: 800px; }
.mkt-section-heading p { max-width: 640px; color: var(--text-secondary); font-size: 20px; line-height: 32px; }

/* ── CTA Band (component 66:7793) — final band on every page, mint tint,
   the only place the full 5-mascot "Covey" appears together. ── */
.mkt-cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  width: 100%;
  max-width: var(--layout-content-max);
  margin: 0 auto;
  padding: var(--space-96) var(--space-64);
  background-color: var(--bg-tint-green);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  text-align: center;
}
.mkt-cta-band-covey { display: flex; align-items: flex-end; gap: var(--space-16); }
.mkt-cta-band-covey img:nth-child(1) { width: 96px; height: 96px; }
.mkt-cta-band-covey img:nth-child(2) { width: 112px; height: 112px; }
.mkt-cta-band-covey img:nth-child(3) { width: 132px; height: 132px; }
.mkt-cta-band-covey img:nth-child(4) { width: 112px; height: 112px; }
.mkt-cta-band-covey img:nth-child(5) { width: 96px; height: 96px; }
.mkt-cta-band-copy { display: flex; flex-direction: column; gap: var(--space-16); align-items: center; }
.mkt-cta-band-copy p { max-width: 640px; color: var(--text-secondary); font-size: 20px; line-height: 32px; }
.mkt-cta-band-actions { display: flex; gap: var(--space-12); align-items: center; }

@media (max-width: 600px) {
  .mkt-cta-band { padding: var(--space-48) var(--space-24); gap: var(--space-24); }
  .mkt-cta-band-covey { gap: var(--space-8); }
  .mkt-cta-band-covey img:nth-child(1) { width: 52px; height: 52px; }
  .mkt-cta-band-covey img:nth-child(2) { width: 58px; height: 58px; }
  .mkt-cta-band-covey img:nth-child(3) { width: 68px; height: 68px; }
  .mkt-cta-band-covey img:nth-child(4) { width: 58px; height: 58px; }
  .mkt-cta-band-covey img:nth-child(5) { width: 52px; height: 52px; }
  .mkt-cta-band-actions { flex-direction: column; width: 100%; }
  .mkt-cta-band-actions .mkt-btn { width: 100%; }
}

/* CTA strip: the same mint band as one slim row (copy on the left, button on the right) instead of the tall
   page-closing band. For an offer that sits above the main content, like Pricing's trial, so the plan cards
   below it stay near the top of the page. Stacks and centers on tablet and phone. These rules come after the
   band's own mobile rules on purpose, so the strip keeps its compact padding there too. */
.mkt-cta-band--strip {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-32);
  padding: var(--space-24) var(--space-32);
  text-align: left;
}
.mkt-cta-band--strip .mkt-cta-band-copy { align-items: flex-start; gap: var(--space-4); }
.mkt-cta-band--strip .mkt-cta-band-copy h2 { font-size: 28px; line-height: 36px; letter-spacing: -0.56px; }
.mkt-cta-band--strip .mkt-cta-band-copy p { max-width: 720px; font-size: 16px; line-height: 24px; }
.mkt-cta-band--strip .mkt-cta-band-actions { flex: none; }
@media (max-width: 1024px) {
  .mkt-cta-band--strip { flex-direction: column; justify-content: center; gap: var(--space-16); padding: var(--space-24); text-align: center; }
  .mkt-cta-band--strip .mkt-cta-band-copy { align-items: center; }
  .mkt-cta-band--strip .mkt-cta-band-copy h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.48px; }
}

/* ── Navigation (Desktop 46:322 / Mobile 47:404) ──
   Desktop: logo, links + Product dropdown, Log in / Get started.
   Dropdown: slide/fade cross-fade, 200ms ease-out (spec item 3).
   Mobile: bar + hamburger -> full-screen panel, same cross-fade, trapped
   focus while open (handled in interactions.js). */

.mkt-nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  text-decoration: none;
}
.mkt-nav-logo img { width: 36px; height: 36px; }
.mkt-nav-logo span {
  font-family: 'Parkinsans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.48px;
  color: var(--text-primary);
}

.mkt-nav-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-16) var(--layout-page-margin);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  z-index: 50;
}
@media (max-width: 1024px) { .mkt-nav-desktop { display: none; } }

.mkt-nav-links { display: flex; align-items: center; gap: var(--space-4); }
.mkt-nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 44px;
  padding: var(--space-8) var(--space-16);
  border: none;
  background: transparent;
  border-radius: var(--radius-full);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease-out;
}
.mkt-nav-link:hover, .mkt-nav-link[aria-expanded="true"] { background-color: var(--bg-hover); }
.mkt-nav-link-chevron { width: 16px; height: 16px; transition: transform 200ms ease-out; }
.mkt-nav-link[aria-expanded="true"] .mkt-nav-link-chevron { transform: rotate(180deg); }

.mkt-nav-actions { display: flex; align-items: center; gap: var(--space-8); }

.mkt-nav-dropdown {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  padding: var(--space-24);
  background-color: var(--bg-surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-floating);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.mkt-nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}

.mkt-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 324px;
  padding: var(--space-12);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color 200ms ease-out;
}
.mkt-menu-item:hover { background-color: var(--bg-hover); }
.mkt-menu-item img { width: 48px; height: 48px; flex-shrink: 0; }
.mkt-menu-item-copy { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.mkt-menu-item-title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 16px; line-height: 26px; color: var(--text-primary); }
.mkt-menu-item-desc { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-size: 14px; line-height: 22px; color: var(--text-secondary); }

/* Mobile bar */
.mkt-nav-mobile {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-12) var(--layout-page-margin);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
}
@media (max-width: 1024px) { .mkt-nav-mobile { display: flex; } }

.mkt-nav-mobile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: none;
  background: transparent;
  cursor: pointer;
}
.mkt-nav-mobile-btn:hover { background-color: var(--bg-hover); }
.mkt-nav-mobile-btn img { width: 24px; height: 24px; }

.mkt-mobile-menu-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms;
}
.mkt-mobile-menu-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.mkt-mobile-menu-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-12) var(--layout-page-margin);
  border-bottom: 1px solid var(--border-subtle);
}
.mkt-mobile-menu-body { padding: var(--space-16) var(--layout-page-margin) var(--space-32); display: flex; flex-direction: column; gap: var(--space-24); }
.mkt-mobile-menu-links { display: flex; flex-direction: column; }
.mkt-mobile-menu-links a {
  padding: var(--space-12);
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
}
.mkt-mobile-menu-links a:hover { background-color: var(--bg-hover); }
.mkt-mobile-menu-actions { display: flex; flex-direction: column; gap: var(--space-12); }

@media (prefers-reduced-motion: reduce) {
  .mkt-nav-dropdown, .mkt-mobile-menu-panel { transition: opacity 200ms ease-out, visibility 0s linear 200ms; }
}

/* ── Feature Card (component 48:751) — tone matches the product's mascot
   colour; hover lifts (mkt-card-hoverable) and swaps mascot to Cheer. ── */
.mkt-feature-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  flex: 1 0 0;
  min-width: 0;
  padding: var(--layout-card-padding);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.mkt-feature-card--gold  { background-color: var(--bg-tint-gold); }
.mkt-feature-card--pink  { background-color: var(--bg-tint-pink); }
.mkt-feature-card--lilac { background-color: var(--bg-tint-lilac); }
.mkt-feature-card--green { background-color: var(--bg-tint-green); }
.mkt-feature-card--aqua  { background-color: var(--bg-tint-aqua); }
.mkt-feature-card img.mkt-feature-card-mascot { width: 72px; height: 72px; transition: opacity 200ms ease-out; }
.mkt-feature-card-mascot-cheer { display: none; }
.mkt-feature-card:hover .mkt-feature-card-mascot-smile { display: none; }
.mkt-feature-card:hover .mkt-feature-card-mascot-cheer { display: block; }
.mkt-feature-card h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-feature-card p { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.mkt-feature-card-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-full);
  font-family: 'Parkinsans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  text-decoration: none;
  align-self: flex-start;
  transition: background-color 200ms ease-out;
}
.mkt-feature-card-link:hover { background-color: rgba(15, 42, 36, 0.06); }

/* ── Stat Block (component 52:1156) ── */
.mkt-stat-block { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 0 0; min-width: 0; }
.mkt-stat-block-accent { width: 40px; height: 4px; border-radius: var(--radius-full); background-color: var(--accent-green); }
.mkt-stat-block-accent--gold  { background-color: var(--accent-gold); }
.mkt-stat-block-accent--aqua  { background-color: var(--accent-aqua); }
.mkt-stat-block-accent--pink  { background-color: var(--accent-pink); }
.mkt-stat-block-accent--lilac { background-color: var(--accent-lilac); }
/* Home page "numbers" section: each stat sits in a tinted card (same radius,
   border and padding as the feature cards), tone matching its accent bar. */
.mkt-home-page .mkt-stat-block {
  align-items: center;
  text-align: center;
  padding: var(--layout-card-padding);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-tint-green);
}
.mkt-home-page .mkt-stat-block { gap: var(--space-12); }
.mkt-home-page .mkt-stat-block p { margin: 0; }
.mkt-home-page .mkt-stat-block:nth-child(2) { background-color: var(--bg-tint-gold); }
.mkt-home-page .mkt-stat-block:nth-child(3) { background-color: var(--bg-tint-aqua); }
.mkt-stat-block-number { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -1.12px; color: var(--text-primary); }
.mkt-stat-block-label { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.mkt-stat-block-source { font-size: 12px; line-height: 16px; letter-spacing: 0.12px; color: var(--text-tertiary); }

@media (max-width: 600px) {
  .mkt-stat-block-number { font-size: 40px; line-height: 44px; letter-spacing: -1.5px; }
}

/* Stat cards row at the bottom of the testimonials section:
   Equal height/length across all three stat boxes (align-items: stretch),
   generous horizontal gap between them, plus top margin so they have
   breathing room below the testimonials wall above them. */
.mkt-stat-blocks-row {
  align-items: stretch;
  gap: var(--space-32);
  margin-top: var(--space-40, 40px);
}

.mkt-stat-blocks-row .mkt-stat-block {
  height: 100%;
  justify-content: flex-start;
}

.mkt-stat-blocks-row .mkt-stat-block-source {
  margin-top: auto;
}

@media (min-width: 1025px) {
  .mkt-home-page .mkt-stat-blocks-row {
    align-items: stretch;
    gap: var(--space-48);
    margin-top: var(--space-48);
  }
}

@media (max-width: 1024px) {
  .mkt-stat-blocks-row {
    gap: var(--space-24);
    margin-top: var(--space-32);
  }
}

/* ── Numbered step (How It Works section) ── */
.mkt-step { display: flex; flex-direction: column; gap: var(--layout-stack-gap); flex: 1 0 0; min-width: 0; }
.mkt-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background-color: var(--accent-green-subtle);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-green);
}
.mkt-step h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-step p { font-size: 16px; line-height: 26px; color: var(--text-secondary); }

/* ── Hero (product pages) ── */
.mkt-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
  max-width: var(--layout-content-max);
  margin: 0 auto;
  padding: var(--space-128) var(--layout-page-margin) var(--space-96);
  text-align: center;
}
.mkt-hero img.mkt-hero-mascot { width: 140px; height: 140px; }
.mkt-hero h1 { max-width: 100%; }

/* Base size for the subhead paragraph pattern used under every page's H1 --
   plain <p class="mkt-hero-subhead"> tags have no font-size of their own
   otherwise and silently fall back to the browser default (16px) instead
   of the Figma Body L scale (20px/32px) every hero actually uses. More
   specific rules below (e.g. .mkt-404's intentionally smaller subhead)
   still win via specificity. */
.mkt-hero-subhead { font-size: 20px; line-height: 32px; }

.mkt-hero .mkt-hero-subhead { max-width: 640px; color: var(--text-secondary); }
.mkt-hero-actions { display: flex; gap: var(--space-16); }
@media (max-width: 600px) {
  .mkt-hero { padding: var(--space-64) var(--layout-page-margin); gap: var(--space-24); }
  .mkt-hero img.mkt-hero-mascot { width: 96px; height: 96px; }
  .mkt-hero-actions { flex-direction: column; width: 100%; }
  .mkt-hero-actions .mkt-btn { width: 100%; }
}

.mkt-row-3 { display: flex; gap: var(--space-32); align-items: flex-start; width: 100%; }
.mkt-row-3.mkt-gap-24 { gap: var(--space-24); }
@media (max-width: 1024px) { .mkt-row-3 { flex-direction: column; } }

/* ── Simplified product screen mockup (Detailed UI Mockup section) ── */
.mkt-screen-frame {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-surface-raised);
  box-shadow: var(--elevation-floating);
  overflow: hidden;
  text-align: left; /* section wrappers may set text-align: center on an ancestor */
}
.mkt-screen-frame-bar { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border-subtle); }
.mkt-screen-frame-dot { width: 10px; height: 10px; border-radius: 50%; background-color: var(--border-default); }
.mkt-screen-frame-body { padding: var(--space-32); }

/* Real screenshots of the app (captured from the app itself, with demo data) in place of hand-built mock-ups; see
   templates/marketing/_screens.html. The image fills the frame edge to edge. */
.mkt-screen-frame-body--shot { padding: 0; line-height: 0; }
.mkt-screen-shot { display: block; width: 100%; height: auto; }
/* The small previews in the benefit cards show a close-up crop, cut off at the card's 300px preview height.
   (Two classes, so this wins over .mkt-benefit-card-preview's own fixed height further down the file.) */
.mkt-benefit-card-preview.mkt-benefit-card-preview--shot { height: auto; max-height: 300px; padding: 0; gap: 0; }

/* ── Footer (component 67:7978) ── */
.mkt-footer {
  border-top: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
  padding: var(--space-64) var(--layout-page-margin) var(--space-32);
}
.mkt-footer-top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-48);
  max-width: var(--layout-content-max);
  margin: 0 auto;
}
.mkt-footer-brand { display: flex; flex-direction: column; gap: var(--space-16); width: 360px; }
.mkt-footer-brand p { color: var(--text-secondary); font-size: 14px; line-height: 22px; }
.mkt-footer-brand p.mkt-footer-brand-line { color: var(--text-primary); font-weight: 600; }
.mkt-footer-columns { display: flex; gap: var(--space-48); }
.mkt-footer-column { display: flex; flex-direction: column; gap: var(--space-4); width: 168px; }
.mkt-footer-column-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-4); }
.mkt-footer-link {
  padding: var(--space-4) 0;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 200ms ease-out;
}
.mkt-footer-link:hover { color: var(--text-primary); text-decoration: underline; }
.mkt-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  max-width: var(--layout-content-max);
  margin: var(--space-48) auto 0;
  padding-top: var(--space-24);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  letter-spacing: 0.12px;
  color: var(--text-secondary);
}

@media (max-width: 1024px) {
  .mkt-footer-top { flex-direction: column; }
  .mkt-footer-brand { width: 100%; }
  .mkt-footer-columns { width: 100%; }
  .mkt-footer-column { flex: 1 0 0; min-width: 0; }
}
@media (max-width: 600px) {
  .mkt-footer-columns { flex-wrap: wrap; gap: var(--space-16) var(--space-16); }
  .mkt-footer-column { flex: 0 0 auto; width: 167px; }
  .mkt-footer-link { padding: var(--space-12) 0; }
  .mkt-footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
}

/* ── Section scaffolding — reused by every marketing page's own content
   (Hero/CTA/Footer already have their own wrappers above). Pair
   `.mkt-section` (vertical rhythm) with `.mkt-container` (centred,
   page-margin gutters) on the same element, then `.mkt-section-stack`
   on the direct child for the flex-column + block-gap layout Figma
   uses inside every section. ── */
.mkt-section-stack { display: flex; flex-direction: column; gap: var(--layout-block-gap); width: 100%; }
.mkt-section-stack--center { align-items: center; text-align: center; }
.mkt-section--mint { background-color: var(--bg-tint-green); }

/* ── Simplified "product screenshot" mock content used inside
   .mkt-screen-frame on product page "Detailed UI Mockup" sections.
   Deliberately not a pixel clone of the full app dashboard (sidebar,
   top bar, insights columns) -- just enough of a recognizable call/
   chat surface to sell the feature, built from real Figma copy. ── */
.mkt-mock-call { display: flex; flex-direction: column; gap: var(--space-24); }
.mkt-mock-call-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding-bottom: var(--space-24); border-bottom: 1px solid var(--border-subtle); }
.mkt-mock-call-name { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 16px; line-height: 22px; color: var(--text-primary); }
.mkt-mock-call-meta { font-size: 13px; line-height: 18px; color: var(--text-secondary); }
.mkt-mock-transcript { display: flex; flex-direction: column; gap: var(--space-16); }
.mkt-mock-bubble { display: flex; flex-direction: column; gap: var(--space-8); max-width: 480px; padding: var(--space-16); border-radius: var(--radius-md); }
.mkt-mock-bubble--agent { background-color: var(--accent-green-subtle); align-self: flex-start; }
.mkt-mock-bubble--prospect { background-color: var(--bg-surface-raised); border: 1px solid var(--border-subtle); align-self: flex-end; }
.mkt-mock-bubble-meta { display: flex; align-items: center; gap: var(--space-8); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 12px; color: var(--text-primary); }
.mkt-mock-bubble-avatar { width: 20px; height: 20px; }
.mkt-mock-bubble p:not(.mkt-mock-bubble-meta) { font-size: 15px; line-height: 24px; color: var(--text-primary); }
.mkt-mock-citation { display: inline-flex; align-items: center; gap: var(--space-4); align-self: flex-start; padding: var(--space-4) var(--space-8); border-radius: var(--radius-full); background-color: var(--bg-surface-raised); border: 1px solid var(--accent-lilac); font-size: 12px; color: var(--text-secondary); }
.mkt-mock-citation img { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .mkt-mock-bubble { max-width: 100%; }
}

/* ── Simplified "queue" mock content (Power Dialer Detailed UI Mockup) ── */
.mkt-mock-kpi-row { display: flex; gap: var(--space-16); width: 100%; }
.mkt-mock-kpi { flex: 1 0 0; min-width: 0; padding: var(--space-16); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background-color: var(--bg-surface-raised); }
.mkt-mock-kpi-label { font-size: 12px; line-height: 16px; letter-spacing: 0.12px; color: var(--text-secondary); }
.mkt-mock-kpi-value { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 28px; line-height: 32px; letter-spacing: -0.28px; color: var(--text-primary); margin-top: var(--space-4); }
.mkt-mock-queue { display: flex; flex-direction: column; }
.mkt-mock-queue-row { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-12) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.mkt-mock-queue-row:last-child { border-bottom: none; }
.mkt-mock-queue-row--connected { background-color: var(--bg-tint-green); border-radius: var(--radius-sm); }
.mkt-mock-queue-name { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; line-height: 22px; color: var(--text-primary); }
.mkt-mock-queue-meta { flex: 1 0 0; min-width: 0; font-size: 12px; line-height: 16px; letter-spacing: 0.12px; color: var(--text-secondary); }
@media (max-width: 600px) {
  .mkt-mock-kpi-row { flex-wrap: wrap; }
  .mkt-mock-kpi { flex: 1 1 40%; }
}

/* ── Simplified "kanban" mock content (Pipeline & CRM Detailed UI Mockup) ── */
.mkt-mock-kanban { display: flex; gap: var(--space-16); width: 100%; align-items: flex-start; }
.mkt-mock-kanban-col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-12); border-radius: var(--radius-md); background-color: var(--bg-surface); }
.mkt-mock-kanban-col-title { display: flex; align-items: center; justify-content: space-between; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 13px; color: var(--text-primary); padding: 0 var(--space-4); }
.mkt-mock-kanban-col-title span { color: var(--text-tertiary); font-weight: 400; }
.mkt-mock-kanban-card { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-12); border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background-color: var(--bg-surface-raised); }
.mkt-mock-kanban-card-name { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-mock-kanban-card-meta { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 600px) {
  .mkt-mock-kanban { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   HOME PAGE — sections that only appear on "/" (hero decor, showcase
   tabs, benefit cards, logo strip, alternating feature rows,
   testimonials wall, case study carousel).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Home Hero — bigger display type + floating cloud/mascot decor ── */
.mkt-home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  max-width: var(--layout-content-max);
  margin: 0 auto;
  /* Kept compact so the Get started / Contact us buttons land in the first
     screenful on a typical laptop viewport instead of below the fold. */
  padding: var(--space-32) var(--layout-page-margin) var(--space-48);
  text-align: center;
  overflow: hidden;
}
/* The product-showcase block right under the hero: the default 128px section
   padding + 64px block gap left a big empty band between the hero note, the
   tabs and the preview card, so both are tightened here. */
.mkt-home-hero { padding-bottom: var(--space-24); }
/* Home page, desktop only: every section stacks 128px bottom + 128px top
   padding (256px of empty space between sections) and a 64px gap under each
   section heading. Overriding the two layout tokens on the page wrapper
   tightens all of them at once; tablet/mobile already use smaller token values. */
@media (min-width: 1025px) {
  .mkt-home-page { --layout-section-padding-y: 40px; --layout-block-gap: 20px; }
  /* heading -> subtext (default stack gap is 24px) */
  .mkt-home-page .mkt-section-heading { gap: var(--space-8); }
  .mkt-home-page .mkt-section-heading p { font-size: 18px; line-height: 28px; }
}
/* Case-study carousel ("The numbers behind the calls"):
   Generous top padding after the testimonials surface section so they clearly read
   as two distinct sections, and 0 bottom padding before the closing CTA band. */
.mkt-home-page [data-carousel],
.mkt-section--carousel {
  padding-top: var(--space-64);
  padding-bottom: 0;
}

@media (min-width: 1025px) {
  .mkt-home-page [data-carousel],
  .mkt-home-page .mkt-section--carousel {
    padding-top: var(--space-96);
  }
}

@media (max-width: 640px) {
  .mkt-home-page [data-carousel],
  .mkt-home-page .mkt-section--carousel {
    padding-top: var(--space-48);
  }
}

.mkt-home-page .mkt-section--cta { padding-top: var(--space-24); }
/* Showcase intro: gives the interactive product screen mockup room to breathe
   above and establishes a clear, generous section break before the "Three jobs"
   benefits section so they read as two distinct, independent sections. */
.mkt-section--showcase-intro {
  padding-top: var(--space-32);
  padding-bottom: var(--space-64);
}
.mkt-section--showcase-intro > .mkt-section-stack { gap: var(--space-32); }

/* Benefits section ("Three jobs your reps stop doing by hand") */
.mkt-section--benefits,
.mkt-section--showcase-intro + .mkt-section {
  padding-top: var(--space-48);
}

@media (min-width: 1025px) {
  .mkt-home-page .mkt-section--showcase-intro {
    padding-bottom: var(--space-96);
  }
  .mkt-home-page .mkt-section--benefits,
  .mkt-home-page .mkt-section--showcase-intro + .mkt-section {
    padding-top: var(--space-64);
  }
}

/* A page's title/subtitle block followed directly by its main content (e.g.
   Pricing): the default 128px padding on both sides stacked into a ~256px
   empty band, so the intro drops its bottom padding and the next section
   its top padding down to a normal gap. */
.mkt-section--page-intro { padding-top: var(--space-48); padding-bottom: 0; }
.mkt-section--page-intro .mkt-section-heading { gap: var(--space-8); }
.mkt-section--page-intro .mkt-section-heading p { max-width: 760px; font-size: 18px; line-height: 28px; }
.mkt-section--after-intro { padding-top: var(--space-24); }
/* A band between the intro and the content (Pricing's trial offer): it sits right under the intro, and the gap to the
   content below is that content's own top padding. */
.mkt-section--flush-bottom { padding-bottom: 0; }
.mkt-home-hero h1 { font-size: 52px; line-height: 58px; letter-spacing: -1.04px; }
.mkt-home-hero h1 span { display: block; }
.mkt-home-hero .mkt-hero-subhead { max-width: 680px; font-size: 18px; line-height: 28px; color: var(--text-secondary); }
.mkt-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}
.mkt-rating-badge-stars { display: flex; }
.mkt-rating-badge-stars img { width: 16px; height: 16px; }
/* The decorative mascots below are position:absolute; per CSS paint order,
   an absolutely-positioned element paints above static in-flow content
   regardless of z-index (z-index only orders elements that are themselves
   positioned) -- so without this, they sit on TOP of the hero's text no
   matter how low their own z-index is. Lifting the real content into its
   own stacking context above them is the fix, not raising the decos'
   z-index further (they should stay behind). */
.mkt-home-hero > * { position: relative; z-index: 1; }
.mkt-hero-deco { position: absolute; z-index: 0; pointer-events: none; }
/* Speech bubbles: the SVG is just the shape, the copy lives in a <span>
   laid over the bubble body (the tail takes up the bottom ~15-20%). Left
   bubble's tail tip lands just above Pip's head; right bubble is flipped so
   its tail points at Echo, with a gap between them. */
.mkt-hero-deco--cloud-left,
.mkt-hero-deco--cloud-right { width: 140px; }
.mkt-hero-deco--cloud-left img,
.mkt-hero-deco--cloud-right img { display: block; width: 100%; height: auto; }
.mkt-hero-deco--cloud-left span,
.mkt-hero-deco--cloud-right span {
  position: absolute;
  left: 10%; right: 10%;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 400; font-size: 12px; line-height: 16px;
  color: var(--text-primary);
}
.mkt-hero-deco--cloud-left span { top: 10%; height: 62%; }
.mkt-hero-deco--cloud-right span { top: 10%; height: 62%; }
/* Left bubble is sized to its two-line copy (shape scales with width), with
   the tail tip landing just above Pip's head. */
.mkt-hero-deco--cloud-left { width: 105px; left: calc(50% - 481px); top: 81px; }
.mkt-hero-deco--cloud-left span { left: 6%; right: 6%; top: 8%; height: 73%; }
/* Right bubble sits directly above Echo (tail tip ~25px in from the bubble's
   left edge, so the bubble starts just left of Echo's center line). */
.mkt-hero-deco--cloud-right { right: 32px; top: 5px; }
/* The headline's widest line ("Books the meeting.") is ~688px wide and
   centered, so Pip/Cal are anchored off the hero's center line (344px =
   half the line, plus a 12px gap) to hug the text at any viewport width.
   Below 1200px there's no room beside the headline (or for the bubbles
   next to the rating badge), so all decos hide. */
.mkt-hero-deco--pip { left: calc(50% - 356px - 12px - 148px); top: 160px; width: 148px; }
.mkt-hero-deco--echo { right: 80px; top: 110px; width: 140px; }
.mkt-hero-deco--cal { left: calc(50% + 400px); top: 400px; width: 84px; }
@media (max-width: 1200px) {
  .mkt-hero-deco { display: none; }
}
@media (max-width: 600px) {
  .mkt-home-hero { padding: var(--space-64) var(--layout-page-margin); gap: var(--space-16); }
  .mkt-home-hero h1 { font-size: 34px; line-height: 40px; letter-spacing: -0.68px; }
  .mkt-home-hero h1 span:first-child { white-space: nowrap; }
}

/* ── Mascot idle float ──
   A gentle, organic bob applied everywhere a character mascot appears
   decoratively: hero decos, the CTA band covey, benefit card icons, and
   case-study/blog card thumbnails. Deliberately NOT applied to the cloud
   decos (they're background shapes, not characters) or to mascots used
   inside product mockups (those are static UI, not idle illustration).
   Per-instance delays desync a group so they don't bob in lockstep.
   Off entirely under prefers-reduced-motion, matching interactions.js's
   convention for every other animation on this site. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes mkt-mascot-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-2deg); }
  }
  .mkt-hero-deco--pip,
  .mkt-hero-deco--echo,
  .mkt-hero-deco--cal,
  .mkt-cta-band-covey img,
  .mkt-benefit-card-copy img,
  .mkt-case-study-visual img.mkt-case-study-mascot,
  .mkt-blog-card-thumb img.mkt-blog-card-mascot {
    animation: mkt-mascot-float 4s ease-in-out infinite;
  }
  .mkt-hero-deco--echo { animation-delay: -1.3s; }
  .mkt-hero-deco--cal { animation-delay: -2.6s; }
  .mkt-cta-band-covey img:nth-child(2) { animation-delay: -0.8s; }
  .mkt-cta-band-covey img:nth-child(3) { animation-delay: -1.6s; }
  .mkt-cta-band-covey img:nth-child(4) { animation-delay: -2.4s; }
  .mkt-cta-band-covey img:nth-child(5) { animation-delay: -3.2s; }
  .mkt-case-study-visual img.mkt-case-study-mascot { animation-duration: 5s; }
  .mkt-blog-card-thumb img.mkt-blog-card-mascot { animation-duration: 4.5s; }
}
/* ── Surface section (Home "Heard on the sales floor" testimonials) ── */
.mkt-section--surface {
  background-color: var(--bg-surface);
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

@media (min-width: 1025px) {
  .mkt-home-page .mkt-section--surface {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
}

@media (max-width: 640px) {
  .mkt-section--surface {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }
}

/* ── Product Showcase tabs (cross-fade via interactions.js) ── */
.mkt-showcase-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
  margin-bottom: var(--space-32);
}
.mkt-showcase-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-subtle);
  background-color: transparent;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color 200ms ease-out, border-color 200ms ease-out, color 200ms ease-out;
}
.mkt-showcase-tab img { width: 24px; height: 24px; }
.mkt-showcase-tab[aria-selected="true"] {
  background-color: var(--bg-surface-raised);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--elevation-raised);
}
.mkt-showcase-panel { transition: opacity 200ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .mkt-showcase-panel { transition: none; }
}

/* ── Benefit Card (Home "Three jobs" row) ── */
.mkt-benefit-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  flex: 1 0 0;
  min-width: 0;
  padding: var(--layout-card-padding) var(--space-24) 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  align-self: stretch;
}
.mkt-benefit-card--green { background-color: var(--bg-tint-green); }
.mkt-benefit-card--gold  { background-color: var(--bg-tint-gold); }
.mkt-benefit-card--lilac { background-color: var(--bg-tint-lilac); }
.mkt-benefit-card-copy { display: flex; flex-direction: column; gap: var(--space-12); padding: 0 var(--space-8); }
.mkt-benefit-card-copy img { width: 64px; height: 64px; }
.mkt-benefit-card-copy h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-benefit-card-copy p { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.mkt-benefit-card-preview {
  height: 300px;
  padding: var(--space-16);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background-color: var(--bg-surface-raised);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.mkt-benefit-card-preview-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.mkt-benefit-card-preview-header p { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 12px; color: var(--text-primary); }
.mkt-mock-cal-event { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; padding: var(--space-8); border-radius: var(--radius-sm); background-color: var(--bg-sunken); }
.mkt-mock-cal-event--booked { background-color: var(--accent-lilac-subtle); border-left: 3px solid var(--accent-lilac-strong, #7050de); }
.mkt-mock-cal-event-label { display: flex; align-items: center; gap: var(--space-4); font-size: 11px; font-weight: 500; color: var(--text-primary); }
.mkt-mock-cal-event-label img { width: 16px; height: 16px; }
.mkt-mock-cal-event-title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 12px; color: var(--text-primary); }
.mkt-mock-cal-event-time { font-size: 11px; color: var(--text-secondary); }
@media (max-width: 1024px) {
  .mkt-benefit-card { flex: 1 1 100%; }
}

/* ── Logo Strip ── */
.mkt-logo-strip {
  background-color: var(--bg-surface);
  padding: var(--space-48) var(--layout-page-margin);
}
.mkt-logo-strip-inner { display: flex; flex-direction: column; gap: var(--space-32); align-items: center; max-width: var(--layout-content-max); margin: 0 auto; }
.mkt-logo-strip-caption { font-size: 16px; color: var(--text-secondary); text-align: center; }
.mkt-logo-strip-logos { display: flex; flex-wrap: wrap; gap: var(--space-24) var(--space-48); align-items: center; justify-content: center; }
.mkt-logo-item { display: flex; align-items: center; gap: var(--space-8); }
.mkt-logo-item img { width: 28px; height: 28px; }
.mkt-logo-item span { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.12px; color: var(--text-secondary); }
.mkt-logo-item.mkt-logo-item--text span { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 700; font-size: 18px; }

/* The section right after the logo strip ("One suite, from first dial to booked meeting")
   needs generous top padding so it clearly reads as a distinct, fresh section below the endorsement band,
   and generous bottom padding after the dashboard screenshot mockup before the testimonials section. */
.mkt-section--suite,
.mkt-logo-strip + .mkt-section {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

@media (min-width: 1025px) {
  .mkt-home-page .mkt-logo-strip {
    padding: var(--space-64) var(--layout-page-margin);
  }
  .mkt-home-page .mkt-section--suite,
  .mkt-home-page .mkt-logo-strip + .mkt-section {
    padding-top: var(--space-96);
    padding-bottom: var(--space-96);
  }
}

@media (max-width: 640px) {
  .mkt-logo-strip {
    padding: var(--space-32) var(--layout-page-margin);
  }
  .mkt-section--suite,
  .mkt-logo-strip + .mkt-section {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48);
  }
}

/* ── Feature Row (Home "One suite" alternating rows) ── */
.mkt-feature-row { display: flex; align-items: center; gap: var(--space-64); width: 100%; }
.mkt-feature-row--reverse { flex-direction: row-reverse; }
.mkt-feature-row-copy { display: flex; flex-direction: column; gap: var(--layout-stack-gap); flex: 0 0 488px; }
.mkt-feature-row-copy h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: -1px; color: var(--text-primary); }
.mkt-feature-row-copy p { font-size: 20px; line-height: 32px; color: var(--text-secondary); max-width: 560px; }
.mkt-feature-row-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.mkt-feature-row-chip { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-feature-row-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.mkt-feature-row-chip--green { background-color: var(--accent-green-subtle); }
.mkt-feature-row-chip--gold { background-color: var(--accent-gold-subtle); }
.mkt-feature-row-chip--pink { background-color: var(--accent-pink-subtle); }
.mkt-feature-row-chip--green .mkt-feature-row-chip-dot { background-color: var(--accent-green); }
.mkt-feature-row-chip--gold .mkt-feature-row-chip-dot { background-color: var(--accent-gold); }
.mkt-feature-row-chip--pink .mkt-feature-row-chip-dot { background-color: var(--accent-pink); }
.mkt-feature-row-image { flex: 1 0 0; min-width: 0; }
@media (max-width: 1024px) {
  .mkt-feature-row, .mkt-feature-row--reverse { flex-direction: column; gap: var(--space-32); }
  .mkt-feature-row-copy { flex: 1 1 auto; width: 100%; }
}

/* ── Testimonials wall ── */
.mkt-testimonials-wall { display: flex; gap: var(--layout-gutter); align-items: flex-start; width: 100%; }
.mkt-testimonials-col { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; gap: var(--layout-gutter); }
.mkt-testimonial-card { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background-color: var(--bg-surface-raised); }
.mkt-testimonial-card--featured { padding: var(--space-48); border-radius: var(--radius-xl); border: none; background-color: var(--bg-tint-gold); }
.mkt-testimonial-card img.mkt-testimonial-quote { width: 28px; height: 28px; }
.mkt-testimonial-card--featured img.mkt-testimonial-quote { width: 40px; height: 40px; }
.mkt-testimonial-card p.mkt-testimonial-body { font-size: 16px; line-height: 26px; color: var(--text-primary); }
.mkt-testimonial-card--featured p.mkt-testimonial-body { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; }
.mkt-testimonial-author { display: flex; align-items: center; gap: var(--space-12); width: 100%; }
.mkt-testimonial-author-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-testimonial-card--featured .mkt-testimonial-author-avatar { width: 56px; height: 56px; font-size: 18px; font-weight: 700; }
.mkt-testimonial-author-text p:first-child { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-testimonial-author-text p:last-child { font-size: 14px; color: var(--text-secondary); }
@media (max-width: 1024px) {
  .mkt-testimonials-wall { flex-direction: column; }
}

/* ── Case Study Carousel ── */
.mkt-carousel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); width: 100%; }
.mkt-carousel-controls { display: flex; gap: var(--space-8); flex-shrink: 0; }
.mkt-carousel-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-strong);
  background-color: var(--bg-primary);
  cursor: pointer;
  transition: background-color 200ms ease-out, opacity 200ms ease-out;
}
.mkt-carousel-arrow:hover:not(:disabled) { background-color: var(--bg-hover); }
.mkt-carousel-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.mkt-carousel-arrow img { width: 24px; height: 24px; }
.mkt-carousel-track {
  display: flex;
  gap: var(--layout-gutter);
  width: 100%;
  overflow-x: auto;
  padding-bottom: var(--space-48);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mkt-carousel-track::-webkit-scrollbar { display: none; }
.mkt-case-study-card {
  scroll-snap-align: start;
  flex: 0 0 560px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface-raised);
  color: inherit;
  text-decoration: none;
}
.mkt-case-study-visual { display: flex; align-items: flex-end; justify-content: space-between; padding: var(--space-24); border-radius: var(--radius-md); }
.mkt-case-study-visual--green { background-color: var(--bg-tint-green); }
.mkt-case-study-visual--gold { background-color: var(--bg-tint-gold); }
.mkt-case-study-visual--aqua { background-color: var(--bg-tint-aqua); }
.mkt-case-study-visual--lilac { background-color: var(--bg-tint-lilac); }
.mkt-case-study-visual--pink { background-color: var(--bg-tint-pink); }
.mkt-case-study-visual img.mkt-case-study-mascot { width: 112px; height: 112px; }
.mkt-case-study-metric { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -1.12px; color: var(--text-primary); }
.mkt-case-study-metric-label { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-case-study-body { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16); }
.mkt-case-study-body h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-case-study-chips { display: flex; gap: var(--space-8); }
.mkt-case-study-chip { padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); background-color: var(--bg-sunken); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
@media (max-width: 600px) {
  .mkt-case-study-card { flex: 0 0 85vw; }
}

/* ── Blog Card (index + related posts) ── */
.mkt-blog-grid { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.mkt-blog-grid-row { display: flex; gap: var(--space-24); width: 100%; }
.mkt-blog-card {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-12);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 200ms ease-out;
}
.mkt-blog-card:hover { transform: translateY(-3px); }
.mkt-blog-card-thumb { position: relative; display: flex; align-items: center; justify-content: center; height: 216px; border-radius: var(--radius-md); overflow: hidden; }
.mkt-blog-card-thumb--green { background-color: var(--bg-tint-green); }
.mkt-blog-card-thumb--gold { background-color: var(--bg-tint-gold); }
.mkt-blog-card-thumb--aqua { background-color: var(--bg-tint-aqua); }
.mkt-blog-card-thumb--pink { background-color: var(--bg-tint-pink); }
.mkt-blog-card-thumb--lilac { background-color: var(--bg-tint-lilac); }
.mkt-blog-card-thumb img.mkt-blog-card-cloud { position: absolute; top: 24px; right: 28px; width: 120px; height: auto; }
.mkt-blog-card-thumb img.mkt-blog-card-mascot { position: relative; width: 136px; height: 136px; }
.mkt-blog-card-body { display: flex; flex-direction: column; gap: var(--space-12); padding: 0 var(--space-4) var(--space-8); }
.mkt-blog-card-body h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-blog-card-body p { font-size: 14px; line-height: 22px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mkt-blog-card-meta { display: flex; align-items: center; gap: var(--space-8); }
.mkt-blog-card-meta-avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 12px; color: var(--text-primary); }
.mkt-blog-card-meta span.mkt-blog-card-author { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-blog-card-meta span.mkt-blog-card-read-time { font-size: 12px; letter-spacing: 0.12px; color: var(--text-tertiary); }
@media (max-width: 1024px) {
  .mkt-blog-grid-row { flex-direction: column; }
}

/* ── Case Study Detail ── */
.mkt-case-eyebrow { display: inline-flex; padding: 6px 12px; border-radius: var(--radius-full); background-color: var(--accent-green-subtle); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.5px; color: var(--accent-green); }
.mkt-case-metric-band { display: flex; align-items: center; justify-content: center; gap: var(--space-24); width: 100%; padding: var(--space-48) var(--layout-page-margin); background-color: var(--bg-tint-green); }
.mkt-case-metric-band-number { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -1.12px; color: var(--accent-green); }
.mkt-case-metric-band-label { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: -0.36px; color: var(--text-primary); }
.mkt-case-metric-band img { width: 96px; height: 96px; }
@media (max-width: 600px) {
  .mkt-case-metric-band { flex-direction: column; gap: var(--space-16); text-align: center; }
  .mkt-case-metric-band-number { font-size: 40px; line-height: 44px; }
  .mkt-case-metric-band-label { font-size: 24px; line-height: 32px; }
}

/* Case Studies index -- same card, arranged in a grid instead of a carousel */
.mkt-case-study-grid { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; }
.mkt-case-study-grid-row { display: flex; gap: var(--space-24); width: 100%; }
.mkt-case-study-grid .mkt-case-study-card { flex: 1 1 0; min-width: 0; width: auto; }
/* "Read the story" button on case-study cards: green outline instead of the
   default dark secondary border. */
.mkt-case-study-card .mkt-btn--secondary { border-color: var(--brand-primary); background-color: var(--bg-tint-green); }
.mkt-case-study-card .mkt-btn--secondary:hover:not(:disabled) { background-color: var(--accent-green-subtle); }
@media (max-width: 1024px) {
  .mkt-case-study-grid-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   PRICING PAGE
   ══════════════════════════════════════════════════════════════════════ */

/* ── Pricing Card ── */
.mkt-pricing-card {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-24);
  padding: var(--space-32);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--bg-surface-raised);
}
/* The 2nd border ring is an inset shadow, not a thicker border, so the
   highlight can move between cards without shifting any content by 1px. */
.mkt-pricing-card { transition: background-color 200ms ease-out, border-color 200ms ease-out, box-shadow 200ms ease-out; cursor: pointer; }
.mkt-pricing-card--highlight { background-color: var(--bg-tint-green); border-color: var(--border-brand, var(--brand-primary)); box-shadow: inset 0 0 0 1px var(--border-brand, var(--brand-primary)); }
/* The four plan cards share one set of grid rows (subgrid), so the title,
   description, price, note, button, divider and feature list of every card
   line up on the same horizontal planes regardless of how long each card's
   copy is or whether it carries a badge. */
.mkt-pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-24); row-gap: 0; align-items: stretch; width: 100%; }
.mkt-pricing-grid > .mkt-pricing-card { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: var(--space-20, 20px); flex: none; }
.mkt-pricing-grid .mkt-pricing-card-price { align-self: end; }
.mkt-pricing-card-price-amount--text { font-size: 40px; }
.mkt-pricing-card-price-period { white-space: nowrap; }
@media (max-width: 1024px) {
  .mkt-pricing-grid { grid-template-columns: 1fr; row-gap: var(--space-24); }
  .mkt-pricing-grid > .mkt-pricing-card { display: flex; flex-direction: column; grid-row: auto; gap: var(--space-24); }
}
.mkt-pricing-card-header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.mkt-pricing-card h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-pricing-card-badge { display: inline-flex; align-items: center; padding: var(--space-4) var(--space-12); border-radius: var(--radius-full); background-color: var(--brand-primary); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-on-brand); white-space: nowrap; }
.mkt-pricing-card-desc { font-size: 14px; line-height: 22px; color: var(--text-secondary); }
.mkt-pricing-card-price { display: flex; align-items: baseline; gap: var(--space-8); }
.mkt-pricing-card-price-amount { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 56px; line-height: 60px; letter-spacing: -1.12px; color: var(--text-primary); }
.mkt-pricing-card-price-period { font-size: 14px; color: var(--text-secondary); }
.mkt-pricing-card-note { font-size: 12px; letter-spacing: 0.12px; color: var(--text-tertiary); }
.mkt-pricing-card-divider { height: 1px; background-color: var(--bg-sunken); border: none; margin: 0; }
.mkt-pricing-card--highlight .mkt-pricing-card-divider { background-color: var(--accent-green-subtle); }
.mkt-pricing-card-features { display: flex; flex-direction: column; gap: var(--space-12); }
.mkt-pricing-card-features-title { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-pricing-card-feature { display: flex; align-items: center; gap: var(--space-12); }
.mkt-pricing-card-feature img { width: 20px; height: 20px; flex-shrink: 0; }
.mkt-pricing-card-feature p { flex: 1 0 0; min-width: 0; font-size: 14px; line-height: 22px; color: var(--text-primary); }
@media (max-width: 1024px) {
  .mkt-pricing-card { flex: 1 1 100%; }
}

/* ── Comparison Table ── */
/* Plans -> "Compare plans" heading: the plan cards section's bottom padding
   plus this section's top padding left a ~256px gap, so both are cut. */
.mkt-section--compare { padding-top: 80px; }
/* FAQ -> closing CTA band on Pricing: 128px + 128px of section padding left a
   ~256px empty band; each side is cut to 48px. */
.mkt-section--tight-bottom { padding-bottom: var(--space-48); }
.mkt-section--tight-top { padding-top: var(--space-48); }
/* The table itself is transparent with a green outline; only the row under
   the pointer takes the lightest green tint. */
.mkt-comparison-table { display: flex; flex-direction: column; width: 100%; border: 1px solid var(--brand-primary); border-radius: var(--radius-lg); overflow: hidden; }
.mkt-comparison-row { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-24); border-bottom: 1px solid var(--border-subtle); transition: background-color 200ms ease-out; }
.mkt-comparison-row:last-child { border-bottom: none; }
.mkt-comparison-row:not(.mkt-comparison-row--header):not(.mkt-comparison-row--group):hover { background-color: var(--bg-tint-green); }
.mkt-comparison-row--header { padding: var(--space-24); }
.mkt-comparison-row--group { background-color: var(--bg-surface); border-bottom: none; border-radius: 0; padding: var(--space-16) var(--space-24); }
.mkt-comparison-feature { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.mkt-comparison-feature-name { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-primary); }
.mkt-comparison-feature-helper { font-size: 12px; letter-spacing: 0.12px; color: var(--text-tertiary); }
.mkt-comparison-row--header .mkt-comparison-feature-name { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.12px; }
.mkt-comparison-row--group .mkt-comparison-feature-name { font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 16px; }
.mkt-comparison-plan { flex-shrink: 0; width: 200px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; }
.mkt-comparison-plan-name { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-comparison-plan-price { font-size: 12px; letter-spacing: 0.12px; color: var(--text-secondary); }
.mkt-comparison-cell { flex-shrink: 0; width: 200px; display: flex; align-items: center; justify-content: center; }
.mkt-comparison-cell img { width: 20px; height: 20px; }
.mkt-comparison-cell span { font-size: 14px; color: var(--text-primary); }
@media (max-width: 1024px) {
  .mkt-comparison-table { overflow-x: auto; }
  .mkt-comparison-row, .mkt-comparison-row--header, .mkt-comparison-row--group { width: max-content; min-width: 100%; }
  .mkt-comparison-feature { width: 300px; flex: 0 0 300px; }
}

/* ── FAQ Item ── */
.mkt-faq-item { border-bottom: 1px solid var(--border-subtle); }
.mkt-faq-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-16) 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.mkt-faq-trigger h3 { flex: 1 0 0; min-width: 0; font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-faq-icon-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background-color: var(--bg-surface); }
.mkt-faq-icon { width: 20px; height: 20px; transition: transform 200ms ease-out; }
.mkt-faq-panel { transition: height 200ms ease-out; }
.mkt-faq-panel p { padding-bottom: var(--space-16); font-size: 16px; line-height: 26px; color: var(--text-secondary); }
@media (prefers-reduced-motion: reduce) {
  .mkt-faq-panel, .mkt-faq-icon { transition: none; }
}
@media (max-width: 600px) {
  .mkt-faq-trigger h3 { font-size: 20px; line-height: 28px; }
}

/* ══════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════ */
.mkt-simple-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); padding: var(--space-96) var(--layout-page-margin) var(--space-64); text-align: center; }
.mkt-simple-hero p.mkt-hero-subhead { max-width: 640px; color: var(--text-secondary); }
.mkt-prose { display: flex; flex-direction: column; gap: var(--layout-stack-gap); max-width: 760px; }
.mkt-prose p { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
.mkt-prose h2 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 36px; line-height: 44px; letter-spacing: -0.36px; color: var(--text-primary); }
.mkt-mission-band { display: flex; align-items: center; gap: var(--space-48); background-color: var(--bg-tint-green); padding: var(--layout-section-padding-y) var(--layout-page-margin); }
.mkt-mission-band img { width: 140px; height: 140px; flex-shrink: 0; }
.mkt-mission-band-text { display: flex; flex-direction: column; gap: var(--space-16); }
.mkt-team-grid { display: flex; gap: var(--space-24); width: 100%; }
.mkt-team-member { display: flex; flex: 1 0 0; min-width: 0; flex-direction: column; align-items: center; gap: var(--space-12); }
.mkt-team-member-avatar { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background-color: var(--accent-green); font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 20px; color: var(--text-primary); }
.mkt-team-member h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.12px; color: var(--text-primary); text-align: center; }
.mkt-team-member p { font-size: 14px; color: var(--text-secondary); text-align: center; }
.mkt-value-card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24); border-radius: var(--radius-md); background-color: var(--bg-surface); text-align: left; }
.mkt-value-card h3 { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 24px; letter-spacing: -0.12px; color: var(--text-primary); }
.mkt-value-card p { font-size: 16px; line-height: 26px; color: var(--text-secondary); }
@media (max-width: 1024px) {
  .mkt-mission-band { flex-direction: column; text-align: center; gap: var(--space-24); }
  .mkt-team-grid, .mkt-values-row { flex-wrap: wrap; }
  .mkt-team-member { flex: 1 1 40%; }
  .mkt-value-card { flex: 1 1 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════════════════ */
.mkt-form-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-48);
  border-radius: var(--radius-xl);
  background-color: var(--bg-surface);
  box-shadow: var(--elevation-raised);
}
.mkt-form-row { display: flex; gap: var(--space-16); width: 100%; }
.mkt-form-row .mkt-field-group { flex: 1 0 0; min-width: 0; }
@media (max-width: 600px) {
  .mkt-form-card { padding: var(--space-24); }
  .mkt-form-row { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════════════
   AUTH (Log in / Sign up / Reset password) — the card, under the site's top
   navigation (see .mkt-auth-page below), no footer
   ══════════════════════════════════════════════════════════════════════ */
.mkt-auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-32);
  background-color: var(--bg-tint-green);
}
.mkt-auth-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  align-items: center;
  width: 100%;
  max-width: 440px;
  padding: var(--space-48);
  border-radius: var(--radius-xl);
  background-color: var(--bg-primary);
  box-shadow: var(--elevation-floating);
}
.mkt-auth-card h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.72px; text-align: center; color: var(--text-primary); }

/* The sign-in screens carry the site's top navigation (the same links as the marketing pages, plus a "Back to home"
   button), so they are never a dead end. The header sits on top; the mint area fills the rest of the viewport and
   centers the card in it. The heading drops to 40px so "Welcome back" fits on one line and the card, now under a
   header, stays about as tall as before on a laptop screen. */
body.mkt-auth-page { min-height: 100vh; display: flex; flex-direction: column; background-color: var(--bg-tint-green); }
.mkt-auth-page .mkt-auth-shell { flex: 1 0 auto; min-height: 0; padding-top: var(--space-24); padding-bottom: var(--space-24); }
.mkt-auth-page .mkt-auth-card h1 { font-size: 40px; line-height: 48px; }
.mkt-nav-mobile-actions { display: flex; align-items: center; gap: var(--space-4); }
.mkt-auth-card > form { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; }
.mkt-auth-google-btn { display: flex; align-items: center; justify-content: center; gap: var(--space-12); width: 100%; }
.mkt-auth-google-btn img { width: 18px; height: 18px; }
.mkt-auth-divider { display: flex; align-items: center; gap: var(--space-12); width: 100%; color: var(--text-tertiary); font-size: 12px; letter-spacing: 0.12px; }
.mkt-auth-divider::before, .mkt-auth-divider::after { content: ""; flex: 1 0 0; height: 1px; background-color: var(--border-subtle); }
.mkt-auth-tabs { display: flex; gap: var(--space-4); width: 100%; padding: var(--space-4); border-radius: var(--radius-full); background-color: var(--bg-sunken); }
.mkt-auth-tab { flex: 1 0 0; min-height: 44px; border: none; border-radius: var(--radius-full); background: transparent; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: background-color 200ms ease-out, color 200ms ease-out; }
.mkt-auth-tab.active { background-color: var(--bg-surface-raised); color: var(--text-primary); box-shadow: var(--elevation-raised); }
.mkt-auth-error, .mkt-auth-success { width: 100%; padding: var(--space-12) var(--space-16); border-radius: var(--radius-sm); font-size: 14px; line-height: 22px; }
.mkt-auth-error { background-color: var(--status-danger-subtle); color: var(--text-danger, var(--status-danger)); }
.mkt-auth-success { background-color: var(--accent-green-subtle); color: var(--text-primary); }
.mkt-auth-link-row { display: flex; gap: 6px; justify-content: center; font-size: 14px; }
.mkt-auth-link-row span:first-child { color: var(--text-secondary); }
.mkt-auth-link-row button { border: none; background: transparent; padding: 0; font-family: 'Atkinson Hyperlegible Next', sans-serif; font-weight: 600; font-size: 14px; color: var(--text-link, var(--accent-green)); cursor: pointer; }
@media (max-width: 600px) {
  .mkt-auth-card { padding: var(--space-32) var(--space-24); }
}

.mkt-plan-picker { display: flex; flex-direction: column; gap: var(--space-12); width: 100%; }
.mkt-plan-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-16);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}
.mkt-plan-picker-item:hover { border-color: var(--accent-green); }
.mkt-plan-picker-item.selected { border-color: var(--accent-green); background-color: var(--bg-tint-green); }
.mkt-plan-picker-item-name { font-weight: 700; font-size: 15px; color: var(--text-primary); }
.mkt-plan-picker-item-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.mkt-plan-picker-item-price { font-weight: 700; font-size: 15px; color: var(--text-primary); white-space: nowrap; }
.mkt-plan-picker-item-price span { display: block; font-weight: 400; font-size: 11px; color: var(--text-tertiary); }

.mkt-auth-iban-block {
  width: 100%;
  background-color: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-16);
  font-size: 13px;
  line-height: 20px;
  color: var(--text-secondary);
}

.upload-dropzone {
  width: 100%;
  border: 1.5px dashed var(--border-default);
  border-radius: var(--radius-lg);
  background-color: var(--bg-sunken);
  padding: var(--space-20) var(--space-16);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease-out, background-color 150ms ease-out;
}

.upload-dropzone:hover, .upload-dropzone.dragover {
  border-color: var(--accent-green);
  background-color: var(--bg-tint-green);
}

.upload-dropzone-empty img { width: 26px; height: 26px; opacity: 0.6; }
.upload-dropzone-empty p { margin: 8px 0 0; font-size: 13px; color: var(--text-secondary); }
.upload-dropzone-hint { font-size: 12px; color: var(--text-tertiary) !important; margin-top: 2px !important; }

.upload-dropzone-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.upload-dropzone-preview img#signup-dropzone-img { max-width: 100%; max-height: 140px; border-radius: var(--radius-md); object-fit: contain; }

.upload-dropzone-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  max-width: 100%;
}

.upload-dropzone-file img { width: 16px; height: 16px; flex-shrink: 0; }
.upload-dropzone-file span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.upload-dropzone-remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--status-danger, #c0392b);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}

.upload-dropzone-remove img { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════════════════════════════ */
.mkt-404 { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); padding: var(--space-96) var(--layout-page-margin); text-align: center; }
.mkt-404 img { width: 160px; height: 160px; }
.mkt-404-code { font-family: 'Parkinsans', sans-serif; font-weight: 700; font-size: 72px; line-height: 80px; letter-spacing: -1.44px; color: var(--accent-green); }
.mkt-404 p.mkt-hero-subhead { max-width: 480px; font-size: 16px; line-height: 26px; }

.mkt-save-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-full);
  background-color: var(--brand-accent);
  color: var(--text-primary);
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}

/* ══════════════════════════════════════════════════════════════════════
   CONTACT PAGE — Clean Split Layout (Foundations / Tokens)
   ══════════════════════════════════════════════════════════════════════ */
.mkt-contact-hero-wrap {
  padding: var(--space-48) 0 var(--space-96);
}

.mkt-contact-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-64);
  align-items: start;
}

.mkt-contact-info-col {
  display: flex;
  flex-direction: column;
}

.mkt-contact-heading {
  font-family: 'Parkinsans', sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.88px;
  color: var(--text-primary);
  margin-bottom: var(--space-16);
}

.mkt-contact-subhead {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-secondary);
  margin-bottom: var(--space-32);
}

.mkt-contact-reach-box {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  box-shadow: var(--elevation-raised);
}

.mkt-contact-reach-title {
  font-family: 'Parkinsans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* WhatsApp Primary Button in Reach Box */
.mkt-contact-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-20);
  background-color: #25D366;
  border: 1px solid #20BA5A;
  border-radius: var(--radius-full);
  color: #FFFFFF !important;
  text-decoration: none;
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
  transition: transform 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out;
  cursor: pointer;
  width: 100%;
}

.mkt-contact-wa-btn:hover {
  background-color: #20BA5A;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35);
  color: #FFFFFF !important;
}

.mkt-contact-wa-icon {
  width: 22px;
  height: 22px;
  display: block;
}

.mkt-contact-wa-text {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.mkt-contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
}

.mkt-contact-method-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
}

.mkt-contact-method-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.mkt-contact-method-val {
  color: var(--text-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease-out;
}

.mkt-contact-method-val:hover {
  color: var(--brand-primary);
  text-decoration: underline;
}

.mkt-contact-mascot-note {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-top: var(--space-24);
  padding: var(--space-12) var(--space-16);
  background-color: var(--bg-tint-green);
  border-radius: var(--radius-lg);
}

.mkt-contact-mascot-note p {
  font-size: 13px;
  line-height: 18px;
  color: var(--text-secondary);
  margin: 0;
}

/* Form header inside the card */
.mkt-form-header {
  margin-bottom: var(--space-8);
}

.mkt-form-title {
  font-family: 'Parkinsans', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.mkt-form-desc {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .mkt-contact-split {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .mkt-contact-heading {
    font-size: 32px;
    line-height: 40px;
  }
}

/* Footer contact inline styling */
.mkt-footer-brand-contact {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-secondary);
}

.mkt-footer-brand-contact a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.mkt-footer-brand-contact a:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.mkt-footer-wa-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-top: 2px;
  transition: color 150ms ease-out;
}

.mkt-footer-wa-link:hover {
  color: #25D366;
}

.mkt-footer-wa-link img {
  display: block;
}


/* Pricing cards: keep every card's contents inside the card (the Enterprise price used to poke out), and wrap the grid sensibly. */
.mkt-pricing-grid > .mkt-pricing-card { grid-template-columns: minmax(0, 1fr); }
.mkt-pricing-grid > .mkt-pricing-card > * { min-width: 0; }
.mkt-pricing-card-price, .mkt-pricing-card-header-row { flex-wrap: wrap; }
.mkt-pricing-card-price-amount.mkt-pricing-card-price-amount--text { font-size: 40px; line-height: 60px; letter-spacing: -0.8px; }
.mkt-pricing-card-price-period { white-space: normal; }
@media (max-width: 1024px) { .mkt-pricing-grid .mkt-pricing-card-price { align-self: auto; } }
@media (min-width: 1025px) and (max-width: 1239px) { .mkt-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }

/* Contact and pilot forms: left-aligned labels, even spacing between fields, room above the submit button. */
form[data-enquiry-form] { display: flex; flex-direction: column; gap: var(--space-20, 20px); text-align: left; width: 100%; }
form[data-enquiry-form] .mkt-field-label, form[data-enquiry-form] .mkt-field-helper { text-align: left; }
form[data-enquiry-form] .mkt-form-row { flex-wrap: wrap; }
form[data-enquiry-form] .mkt-form-row .mkt-field-group { flex: 1 1 0; min-width: min(100%, 200px); }
form[data-enquiry-form] button[type="submit"] { margin-top: var(--space-8); }
form[data-enquiry-form] [data-form-status] { padding: 12px 14px; border-radius: 12px; background: rgba(48, 203, 128, 0.12); }
form[data-enquiry-form] [data-form-status][hidden] { display: none; }