/* ============================================
   TalkToType — Marketing Website Styles
   ============================================ */

/* --- Utility: visually-hidden but still in the accessibility tree.
   Used for SEO/screen-reader text that augments visually short H1's
   with the keyword-rich phrasing search engines key on. --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Language picker: two flags side-by-side, active one in full
   color with an accent border, inactive one desaturated and dimmed.
   Hover on inactive brings it back to full color so the user feels
   the affordance. Flag images served from flagcdn.com (consistent
   SVG, same trust tier as the simpleicons CDN we already use). --- */
.lang-picker {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-left: 4px;
}
.lang-picker__opt {
  display: inline-flex;
  padding: 4px;
  border-radius: 5px;
  border: 1.5px solid transparent;
  transition: filter 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  line-height: 0;
  text-decoration: none;
}
.lang-picker__opt img {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.lang-picker__opt:not(.lang-picker__opt--active) img {
  filter: grayscale(0.6);
  opacity: 0.55;
}
.lang-picker__opt:not(.lang-picker__opt--active):hover img {
  filter: grayscale(0);
  opacity: 1;
}
.lang-picker__opt--active {
  border-color: var(--color-accent);
}

/* --- Custom Properties --- */
:root {
  --color-accent: #E07A3A;
  --color-accent-hover: #c96a2f;
  --color-accent-light: #fdf0e8;
  --color-accent-lighter: #fef8f4;

  --color-text: #2d2a26;
  --color-text-light: #5c5650;
  --color-text-lighter: #8a837c;

  --color-bg: #ffffff;
  --color-bg-warm: #fffbf7;
  --color-bg-section: #faf7f4;
  --color-border: #ebe5df;

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  /* Fluid reading size: ~14px on small screens up to 16px on large. */
  --font-size-body: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.75rem;
  --font-size-5xl: 3.5rem;

  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-sm: 0 1px 3px rgba(45, 42, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(45, 42, 38, 0.08);
  --shadow-lg: 0 8px 30px rgba(45, 42, 38, 0.1);

  --nav-height: 72px;
  --max-width: 1200px;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-accent-hover);
}

ul {
  list-style: none;
}

/* --- Container --- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #ffffff;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.btn--outline:hover {
  background-color: var(--color-accent);
  color: #ffffff;
}

.btn--lg {
  font-size: var(--font-size-lg);
  padding: 1rem 2rem;
  border-radius: var(--radius-md);
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--nav-height);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
}

.nav__logo:hover {
  color: var(--color-text);
}

.nav__logo-icon {
  flex-shrink: 0;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
}

.nav__link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--color-accent);
}


/* Big centered CTA under the pricing table — single shared trial-start
   for all four tiers (the tier you end up on is decided in-app, not
   on the website). */
.pricing__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2xl, 2rem);
}
.pricing__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background-color: var(--color-accent);
  color: #ffffff;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md, 8px);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.pricing__cta-btn:hover {
  background-color: var(--color-accent-hover);
  color: #ffffff;
}

/* Header-CTA: zelfde knop maar compacter en lichter dan de grote download-knop */
.nav__cta-btn {
  padding: 0.34rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  gap: 0.4rem;
  border-radius: var(--radius-sm);
}
.nav__cta-btn svg {
  width: 15px;
  height: 15px;
}
/* Outline header button keeps the compact nav padding (beats the generic
   outline padding via the extra class; -2px compensates the border). */
.nav__cta-btn.pricing__cta-btn--outline {
  padding: calc(0.34rem - 2px) calc(0.7rem - 2px);
}

/* Official Microsoft Store badge in the header — shown as-is, no extra
   framing. */
.nav__store-badge {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav__store-badge img {
  height: 44px;
  width: auto;
  display: block;
}
.nav__store-badge:hover { opacity: 0.85; }

/* Outline-variant: witte knop met oranje rand en oranje tekst */
.pricing__cta-btn--outline {
  background-color: #ffffff;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
}
.pricing__cta-btn--outline:hover {
  background-color: var(--color-accent-light);
  color: var(--color-accent);
}

/* Coming-soon knop (macOS): gedempt, niet klikbaar */
.pricing__cta-btn--soon {
  background-color: #ffffff;
  color: var(--color-text-lighter);
  border: 2px solid var(--color-border);
  padding: calc(0.85rem - 2px) calc(1.75rem - 2px);
  cursor: default;
}
.pricing__cta-btn--soon:hover {
  background-color: #ffffff;
  color: var(--color-text-lighter);
}
.pricing__cta-btn--soon .soon-tag {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
  margin-left: 0.15rem;
}

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* --- Hero --- */
.hero {
  --hero-edge-w: clamp(200px, 23vw, 350px);
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-warm);
  position: relative;
  overflow: hidden;
}

.hero__edge-img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--hero-edge-w);
  object-fit: cover;
  object-position: right center;
  pointer-events: none;
  user-select: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--spacing-3xl);
  width: auto;
  max-width: 1000px;
  margin-left: calc(var(--hero-edge-w) + var(--spacing-md));
  margin-right: auto;
  text-align: left;
}

.hero__logo {
  flex-shrink: 0;
  width: clamp(150px, 17vw, 220px);
  height: auto;
  aspect-ratio: 1 / 1;
}

.hero__logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.hero__content {
  min-width: 0;
}

.hero__title {
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.hero__subtitle {
  font-size: var(--font-size-xl);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-2xl);
  max-width: 620px;
}

.hero__cta-group {
  width: fit-content;
  max-width: 100%;
}

.hero__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.hero__note {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  font-weight: 400;
  text-align: center;
}

.btn--download {
  gap: 0.5rem;
}

.btn--download svg {
  flex-shrink: 0;
}

/* --- Flows (two propositions, side by side) --- */
.flows {
  --flows-pad-top: var(--spacing-3xl);
  position: relative;
  /* Bottom padding is larger than the top because the stream (the last
     child) is pulled up 120px; the extra ~30px compensates that so the
     cream area keeps the same breathing room below the copy as above it. */
  padding: var(--flows-pad-top) 0 calc(var(--flows-pad-top) + 30px);
  background-color: var(--color-bg-section);
  /* Visible overflow so the bubble field can drift up into the section
     above. Horizontal runaway is prevented by the children themselves
     (.stream and .bubbles both clip their own content). */
  overflow: visible;
}

/* The segment is cut in two: the right half (Record any meeting) gets a
   white, lightly dotted surface, so the page reads as two distinct panels.
   The split sits at 50vw, which lines up with the gap between the columns
   because both the container and this overlay are centred. */
.flows::before {
  content: "";
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 0;
  background-color: var(--color-bg);
  background-image: radial-gradient(var(--color-border) 1.1px, transparent 1.1px);
  background-size: 18px 18px;
  pointer-events: none;
}
.flows > * {
  position: relative;
  z-index: 1;
}

.flows__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2xl);
  align-items: stretch;
}

.flow {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.flow__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-xs);
}

.flow__subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

/* Friendly legal-reminder note onder de "Record any meeting" subtitle.
   Bewust gemuted en kleiner zodat 't niet als een commerciële claim
   leest maar als de "by the way"-zin die het is. */
.flow__note {
  font-size: 13px;
  color: var(--color-text-lighter);
  line-height: 1.55;
  margin: 0 0 var(--spacing-lg);
  font-style: italic;
}

@media (max-width: 820px) {
  .flows__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-3xl);
    max-width: 560px;
    margin-inline: auto;
  }
  /* Stacked: the stream sits normally below the grid (no upward pull), so the
     extra bottom padding for that pull isn't needed. */
  .flows {
    padding-bottom: var(--spacing-xl);
  }
  /* A left/right split has no meaning once the columns stack, so drop it and
     give the Record block its own full-bleed dotted panel instead. */
  .flows::before {
    display: none;
  }
  .flow--record {
    position: relative;
    padding: var(--spacing-xl) 0;
  }
  .flow--record::before {
    content: "";
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background-color: var(--color-bg);
    background-image: radial-gradient(var(--color-border) 1.1px, transparent 1.1px);
    background-size: 18px 18px;
  }
  /* Stacked: the stream spans the full width again. The descendant selector
     keeps this winning over the base `.stream` rule that appears later. */
  .flows .stream {
    width: 100%;
    margin-top: var(--spacing-xl);
    margin-left: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
}

/* --- Integrations (Logo Wall) --- legacy — kept for old IE */
.integrations {
  padding: var(--spacing-3xl) 0;
  background-color: var(--color-bg);
}

.integrations__title {
  text-align: center;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.integrations__subtitle {
  text-align: center;
  font-size: var(--font-size-base);
  color: var(--color-text-lighter);
  margin-bottom: var(--spacing-2xl);
}

.integrations__wall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: 960px;
  margin: 0 auto;
}

.integrations__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* --- Left flow: app logos drift up BEHIND the copy ---
   "Dictate into anything" = your words rising into every app. The bubble
   field is a full-height background layer; the heading + text sit on top
   of it (z-index). Bubbles rise by animating `top` as a percentage of the
   column, so they traverse the whole height however tall the column gets. */
.flow--bubbles {
  position: relative;
}
.flow--bubbles > :not(.bubbles) {
  position: relative;
  z-index: 1;
}

/* The bubble field reaches up past the heading, out of the section and a
   little into the section above it; a top gradient mask makes the bubbles
   dissolve as they drift up there. */
.bubbles {
  position: absolute;
  left: 0;
  right: 56%;
  top: -90px;
  bottom: -50px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Bubbles sit against the left edge of the screen, dissolve toward the
     copy on the right, and fade into the white sections above and below. */
  -webkit-mask-image:
    linear-gradient(to right, #000 30%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 30%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.bubble {
  position: absolute;
  top: 110%;
  left: var(--x);
  display: grid;
  place-items: center;
  width: var(--size, 56px);
  height: var(--size, 56px);
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  animation: bubble-rise var(--dur, 15s) linear var(--delay, 0s) infinite;
  will-change: top, transform, opacity;
}
.bubble img {
  width: 52%;
  height: 52%;
  display: block;
}

@keyframes bubble-rise {
  0%   { top: 110%; transform: translateX(0) scale(0.82); opacity: 0; }
  14%  { opacity: 0.6; }
  50%  { transform: translateX(var(--sway, 16px)) scale(1); }
  86%  { opacity: 0.6; }
  100% { top: -20%; transform: translateX(0) scale(1.06); opacity: 0; }
}

/* Record text column is top-aligned so its heading lines up with Dictate. */

/* --- Record stream: one single row, in the dotted right half only ---
   "Record any meeting" = sources flowing past. The band sits in the right
   half (over the dotted panel), so the chips only appear from the midline
   onward and flow toward the right edge. Transparent, hairline divider on
   top, faded in at the midline and out at the right edge. */
.stream {
  position: relative;
  width: 50%;
  /* Pull the band up into the empty space under the (shorter) Dictate copy
     so it sits beside the text rather than dangling at the bottom. */
  margin-top: -120px;
  margin-left: 50%;
  padding-top: var(--spacing-lg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 92%, transparent);
}

.stream__row {
  display: flex;
  overflow: hidden;
}

.stream__track {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  width: max-content;
  padding: 2px 0;
  animation: stream-left var(--dur, 40s) linear infinite;
  will-change: transform;
}
.stream__track--rev {
  animation-name: stream-right;
}

@keyframes stream-left {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--spacing-xs) / 2)); }
}
@keyframes stream-right {
  from { transform: translateX(calc(-50% - var(--spacing-xs) / 2)); }
  to   { transform: translateX(0); }
}

.stream:hover .stream__track {
  animation-play-state: paused;
}

.stream__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-light);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.stream__chip img {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}
.stream__chip--any {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-lighter);
  font-style: italic;
}

/* Calm, static fallback when motion is not wanted: drop the decorative
   bubble field, collapse its reserved height, and freeze the stream. */
@media (prefers-reduced-motion: reduce) {
  .flow--bubbles {
    min-height: 0;
  }
  .bubbles {
    display: none;
  }
  .stream__track {
    animation: none;
  }
}

/* --- Section Header --- */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--spacing-3xl);
}

.section-header__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-md);
}

.section-header__subtitle {
  font-size: var(--font-size-body);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Problem / Solution --- */
.problem {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-4xl) 0;
}

/* Centered narrative column. The keyboard image is a small, faded
   decoration stuck to the right edge of the screen, behind the text. */
.problem__inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  text-align: left;
}

/* Keep the prose on the left half so the large edge photo never sits
   underneath it. */
.problem__text {
  max-width: 600px;
}

/* Portrait frame against the right screen edge, vertically centred. The HEIGHT
   is fixed (her face stays the same size) while the WIDTH follows the viewport.
   So as space shrinks the box narrows and cover + object-position left crops
   MORE off the RIGHT (the back of her head), instead of the whole photo scaling
   down. Hides only on phone widths. Soft fade dissolves the left edge. */
.problem__media {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  height: min(68vh, 540px);
  width: clamp(230px, 26vw, 380px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%);
  mask-image: linear-gradient(to right, transparent 0%, #000 12%);
}

.problem__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  display: block;
}

@media (max-width: 700px) {
  .problem__media {
    display: none;
  }
}

/* Large screens: centre the text column so it no longer sits stranded against
   the left edge while the photo hugs the right. */
@media (min-width: 1200px) {
  .problem__text {
    margin-left: auto;
    margin-right: auto;
  }
}

.problem__img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(120px, 13vw, 165px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  /* Dissolve into the white background: narrow fade on the left, plus a
     soft fade at the top and bottom edges. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 30%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 30%),
    linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}

.problem__inner p {
  color: var(--color-text-light);
  font-size: var(--font-size-body);
  line-height: 1.7;
  margin-bottom: var(--spacing-md);
}

.problem__inner .problem__lead {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

/* The single accent beat — modest, not a hero. */
.problem__shout {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  margin: var(--spacing-sm) 0 var(--spacing-lg);
}

.problem__inner .problem__close {
  color: var(--color-text);
  font-weight: 600;
}

/* Drop the decorative image on small screens to keep the text clean. */
@media (max-width: 640px) {
  .problem__img {
    display: none;
  }
}

/* --- Features (Editorial Layout) --- */
.features {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
  /* The edge screenshots bleed a few px past the viewport; clip so that
     never becomes a horizontal scrollbar. */
  overflow-x: clip;
}

.features__list {
  max-width: 820px;
  margin: 0 auto;
}

/* Compact TL;DR grid — komt boven de lange-vorm feature-blokken.
   Skimmer ziet alle 6 features in 5 seconden, lezer scrollt daarna
   door naar de uitgewerkte beschrijvingen. 3-koloms desktop,
   2-koloms tablet, 1-koloms mobile (default flex). */
.features-tldr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-lg);
  max-width: 900px;
  margin: 0 auto var(--spacing-3xl);
}
.features-tldr__card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
}
.features-tldr__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 6px;
  line-height: 1.3;
}
.features-tldr__text {
  font-size: 13.5px;
  color: var(--color-text-light);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 900px) {
  .features-tldr {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .features-tldr {
    grid-template-columns: 1fr;
  }
}

.feature {
  padding: var(--spacing-2xl) 0;
  border-bottom: 1px solid var(--color-border);
}

.feature:last-child {
  border-bottom: none;
}

.feature__header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.feature__number {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0.2;
  line-height: 1;
  flex-shrink: 0;
  min-width: 56px;
  text-align: right;
}

.feature__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.3;
}

.feature__text {
  padding-left: calc(56px + var(--spacing-lg));
  color: var(--color-text-light);
  font-size: var(--font-size-body);
  line-height: 1.7;
}

/* Screenshots pinned to a screen edge next to a feature. Default is the
   left edge (with a fade toward the copy on the right). */
.feature--upgrade,
.feature-pair {
  position: relative;
}
.feature__img {
  position: absolute;
  left: calc(50% - 50vw);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(220px, 21vw, 310px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent 100%);
          mask-image: linear-gradient(to right, #000 74%, transparent 100%);
}
/* Right-edge variant (fades toward the copy on the left). */
.feature__img--right {
  left: auto;
  right: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(to left, #000 74%, transparent 100%);
          mask-image: linear-gradient(to left, #000 74%, transparent 100%);
}
@media (max-width: 1080px) {
  .feature__img {
    display: none;
  }
}

/* --- Comparison Table --- */
.comparison {
  padding: var(--spacing-4xl) 0;
}

.comparison__inner {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: var(--spacing-3xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.comparison__main {
  min-width: 0;
}

.comparison__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}

.comparison__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.comparison__table-wrap {
  max-width: none;
  margin: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 960px) {
  .comparison__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .comparison__media {
    max-width: 360px;
    margin: 0 auto;
    aspect-ratio: 16/10;
  }
}

.comparison__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.comparison__table th,
.comparison__table td {
  padding: var(--spacing-md) var(--spacing-lg);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.comparison__table thead th {
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding-bottom: var(--spacing-lg);
  vertical-align: bottom;
}

.comparison__table thead th span {
  font-weight: 400;
  color: var(--color-text-lighter);
  display: block;
  font-size: 12px;
}

.comparison__col--them {
  color: var(--color-text-lighter);
}

.comparison__col--us {
  color: var(--color-accent);
  font-weight: 600;
}

.comparison__label {
  font-weight: 600;
  color: var(--color-text);
}

/* --- Language Switch --- */
.lang-switch {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
}

.lang-switch__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

.lang-switch__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-lg);
}

.lang-switch__text {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
  line-height: 1.7;
}

.lang-switch__text:last-child {
  margin-bottom: 0;
}

.lang-switch__visual {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.lang-bubble {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 380px;
}

.lang-bubble--nl {
  background-color: var(--color-accent-light);
  border: 1px solid var(--color-accent);
}

.lang-bubble--en {
  background-color: #eef4ff;
  border: 1px solid #a8c4f0;
}

.lang-bubble__flag {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background-color: var(--color-bg);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

.lang-bubble__text {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.lang-bubble__switch {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-bubble__switch kbd,
.small-feature__text kbd {
  display: inline-block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-accent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* --- Small Features --- */
.small-features {
  padding: var(--spacing-4xl) 0;
}

.small-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
}

.small-feature {
  text-align: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

.small-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent-light);
  margin-bottom: var(--spacing-md);
}

.small-feature__icon svg {
  display: block;
}

.small-feature__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.small-feature__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Pricing Tip --- */
.pricing-card__tip {
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.5;
}

/* --- How it Works --- */
.how-it-works {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
}

.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
}

.step {
  flex: 1;
  text-align: center;
  padding: 0 var(--spacing-lg);
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

.step__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.step__text {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.step__text kbd {
  display: inline-block;
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'Segoe UI', -apple-system, sans-serif;
  font-weight: 600;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  vertical-align: 1px;
}

.step__connector {
  width: 60px;
  height: 2px;
  background-color: var(--color-border);
  flex-shrink: 0;
  margin-top: 28px;
}

.steps__note {
  text-align: center;
  max-width: 620px;
  margin: var(--spacing-2xl) auto 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-bg-warm);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent);
}

.steps__note strong {
  color: var(--color-text-light);
}

/* --- Use Cases --- */
.use-cases {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg);
}

.use-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
}

.use-case {
  padding: var(--spacing-xl);
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.use-case__title {
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--color-accent);
}

.use-case__text {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

/* --- Pricing --- */
.pricing {
  padding: var(--spacing-4xl) 0;
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xl);
  max-width: 1100px;
  margin: 0 auto;
}

/* Two-card layout used now that pricing is split per channel
   (BYOK on this site, subscription on the Microsoft Store). */
.pricing__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}

/* Microsoft Store badge — keep close to Microsoft's own brand
   guidelines (don't recolour the SVG, don't add busy shadows). Light
   rounding + subtle hover-lift to signal it's clickable. */
.ms-store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: var(--spacing-md);
  background: transparent;
  border-radius: var(--radius-md);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.ms-store-badge:hover {
  transform: translateY(-1px);
  background-color: var(--color-bg-alt, rgba(0, 0, 0, 0.03));
}
.ms-store-badge img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Final-CTA Store badge variant — bigger + more prominent than the
   pricing-card badge. Centred standalone (no longer a flex row since
   the section dropped the direct-download alternative). */
.ms-store-badge--cta {
  margin: var(--spacing-lg) auto var(--spacing-md);
  padding: 0;
  display: block;
  width: max-content;
}
.ms-store-badge--cta:hover {
  background-color: transparent;
}

.pricing-card {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card--featured {
  border-color: var(--color-accent);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}

.pricing-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-accent);
  color: #ffffff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.pricing-card__header {
  margin-bottom: var(--spacing-lg);
}

.pricing-card__name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.pricing-card__desc {
  color: var(--color-text-lighter);
  font-size: var(--font-size-sm);
}

.pricing-card__price {
  margin-bottom: var(--spacing-xl);
}

.pricing-card__amount {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
}

.pricing-card__period {
  font-size: var(--font-size-base);
  color: var(--color-text-lighter);
  margin-left: 0.25rem;
}

.pricing-card__features {
  flex-grow: 1;
  margin-bottom: var(--spacing-xl);
}

.pricing-card__features li {
  padding: 0.4rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23E07A3A'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1-6.5 6.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* --- Pricing comparison matrix ---
   Mirrors the in-app ActivationPage table so visitors see the same
   layout before download as inside the app. Real <table> so cells
   align on a grid; horizontal-scrolls on narrow screens via the
   wrapper's overflow-x. */
.compare-wrap {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  overflow-x: auto;
  padding-top: 18px;
}
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border, #e7e2dc);
  border-radius: 12px;
  min-width: 720px;
}
.compare thead tr:first-child th:first-child { border-top-left-radius: 12px; }
.compare thead tr:first-child th:last-child  { border-top-right-radius: 12px; }
.compare tfoot tr:last-child td:first-child  { border-bottom-left-radius: 12px; }
.compare tfoot tr:last-child td:last-child   { border-bottom-right-radius: 12px; }

.compare th,
.compare td {
  padding: 12px 14px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border, #e7e2dc);
  font-size: 14px;
}
.compare tfoot td { border-bottom: none; }

.compare-feature-head {
  text-align: left !important;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-lighter);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--color-bg-section);
  width: 32%;
}

.compare-tier-head {
  position: relative;
  background: var(--color-bg-section);
  padding-top: 22px !important;
}
.compare-tier-head--complete {
  background: rgba(224, 122, 58, 0.05);
}
.compare-tier-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}
.compare-tier-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.3px;
  margin-top: 2px;
}
.compare-tier-period {
  font-size: 11px;
  color: var(--color-text-lighter);
  margin-top: 2px;
}

/* Tier-tagline onder period — gebruikt op de License-kolom om uit te
   leggen wat 't anders maakt ("Bring your own AI key. Pay once.").
   Header-cellen krijgen vertical-align:top zodat de andere kolommen
   niet visueel laag-uitlijnen ten opzichte van de License-kolom met
   extra regel. */
.compare-tier-head {
  vertical-align: top;
}
.compare-tier-tagline {
  font-size: 11px;
  color: var(--color-accent);
  margin-top: 8px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  max-width: 140px;
  margin-left: auto;
  margin-right: auto;
}

/* "Most complete" badge — floating pill bovenop de Pro-kolom. */
.compare-badges {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  white-space: nowrap;
}
.compare-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.compare-badge--complete {
  background: var(--color-accent);
  color: #fff;
}

/* Body cells */
.compare-feature-cell {
  text-align: left !important;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
  background: var(--color-bg-section);
}

/* Keep the feature column pinned while the matrix scrolls sideways on
   narrow screens, so each value keeps its label. */
.compare-feature-head,
.compare-feature-cell {
  position: sticky;
  left: 0;
  z-index: 1;
}
.compare-check {
  /* Green check — universally reads as "yes" and works on both
     warm-tinted and white backgrounds. */
  color: #16a34a;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
.compare-dash {
  color: var(--color-border, #d8d2cb);
  font-weight: 700;
  font-size: 15px;
}
.compare-value {
  color: var(--color-text);
  font-size: 13px;
}
.compare-value--sub {
  display: block;
  color: var(--color-text-lighter);
  font-size: 11px;
  margin-top: 2px;
}

/* CTA row in tfoot. */
.compare-cta-cell {
  padding: 16px 12px !important;
}
.compare-cta-cell--complete {
  background: rgba(224, 122, 58, 0.05);
}
.compare-btn {
  display: inline-block;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--color-text);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.compare-btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
}
.compare-btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.compare-btn--accent:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}
.compare-btn--ghost {
  background: transparent;
  border-color: var(--color-border, #d8d2cb);
  color: var(--color-text-light);
}
.compare-btn--ghost:hover {
  background: var(--color-bg-section);
  color: var(--color-text);
}

.compare-footnote {
  max-width: 720px;
  margin: var(--spacing-lg) auto 0;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-lighter);
  line-height: 1.5;
}

/* --- Mobile pricing: one card per plan (instead of a scrolling table) --- */
.plans-m {
  display: none;
}

.plan-m {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  padding: var(--spacing-lg);
}
.plan-m--complete {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}
.plan-m__badge {
  position: absolute;
  top: -11px;
  left: var(--spacing-lg);
  background: var(--color-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.plan-m__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-sm);
}
.plan-m__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
}
.plan-m__price {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
}
.plan-m__price small {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-lighter);
}
.plan-m__tagline {
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-lighter);
}
.plan-m__list {
  list-style: none;
  margin-top: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-m__list li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}
.plan-m__list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #16a34a;
  font-weight: 700;
}
.plan-m__inherit {
  font-weight: 600;
  color: var(--color-text-light);
}
.plan-m__inherit::before {
  content: none !important;
}

@media (max-width: 640px) {
  .compare-wrap {
    display: none;
  }
  .plans-m {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 420px;
    margin: 0 auto;
  }
}
.privacy {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg);
}

.privacy__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2xl);
  max-width: 800px;
  margin: 0 auto;
}

.privacy__icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.privacy__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.privacy__content p {
  color: var(--color-text-light);
  margin-bottom: var(--spacing-md);
}

.privacy__content p:last-child {
  margin-bottom: 0;
}

/* --- FAQ --- */
.faq {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
}

.faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--spacing-3xl);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.faq__main {
  min-width: 0;
}

.faq__list {
  max-width: none;
  margin: 0;
}

.section-header--left {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  margin-bottom: var(--spacing-xl);
}

.faq__side {
  position: sticky;
  top: calc(var(--nav-height) + var(--spacing-lg));
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.faq__side img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
}

.faq__side-caption {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  padding: 0 var(--spacing-sm);
}

@media (max-width: 960px) {
  .faq__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .faq__side {
    position: static;
    max-width: 420px;
    margin: 0 auto;
    order: -1;
  }

  .section-header--left {
    text-align: center;
  }
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__item:first-child {
  border-top: 1px solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg) 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text);
  list-style: none;
  transition: color 0.2s ease;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '+';
  font-size: var(--font-size-2xl);
  font-weight: 400;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-left: var(--spacing-md);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__question::after {
  content: '-';
}

.faq__question:hover {
  color: var(--color-accent);
}

.faq__answer {
  padding-bottom: var(--spacing-lg);
}

.faq__answer p {
  color: var(--color-text-light);
  line-height: 1.7;
}

/* --- Final CTA --- */
.final-cta {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg);
  text-align: center;
}

.final-cta__inner {
  max-width: 600px;
  margin: 0 auto;
}

.final-cta__title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

.final-cta__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-2xl);
}

.final-cta__note {
  margin-top: var(--spacing-lg);
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
}

/* --- Verify / Trust block --- */
.verify {
  max-width: 560px;
  margin: var(--spacing-2xl) auto 0;
  padding: var(--spacing-lg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: left;
}

.verify__badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
}

.verify__shield {
  flex-shrink: 0;
}

.verify__badge strong {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: 700;
}

.verify__badge span {
  display: block;
  font-size: 13px;
  color: var(--color-text-lighter);
  margin-top: 2px;
}

.verify__details {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--color-border);
}

.verify__details summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent);
  cursor: pointer;
  list-style: none;
}

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

.verify__details summary::before {
  content: '\25B8';
  display: inline-block;
  transition: transform 0.2s ease;
  margin-right: 4px;
}

.verify__details[open] summary::before {
  transform: rotate(90deg);
}

.verify__body {
  padding-top: var(--spacing-sm);
}

.verify__body p {
  font-size: 13px;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xs);
  line-height: 1.5;
}

.verify__hash {
  display: block;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 11px;
  color: var(--color-text);
  background: var(--color-bg-section);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  word-break: break-all;
  margin: var(--spacing-xs) 0;
  user-select: all;
}

.verify__how code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  font-size: 11px;
  background: var(--color-bg-section);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

.verify__chrome-note {
  font-size: 13px;
  color: var(--color-text-light);
  padding-top: var(--spacing-md);
  line-height: 1.6;
  margin: 0;
}

.verify__chrome-note strong {
  color: var(--color-text);
}

/* --- Footer --- */
.footer {
  padding: var(--spacing-2xl) 0;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-section);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
  text-align: center;
}

.footer__logo {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text);
}

.footer__tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
  margin-top: 0.25rem;
}

.footer__links {
  display: flex;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
  justify-content: center;
}

.footer__links a {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--color-accent);
}

.footer__about {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: 4px;
}

.footer__copy {
  font-size: var(--font-size-sm);
  color: var(--color-text-lighter);
}

/* Row of "featured on" directory badges — wraps and stays centred as more
   are added. Heights are normalised so mismatched badge sizes line up. */
.footer__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}
.footer__badge {
  display: inline-flex;
  transition: opacity 0.15s ease;
}
.footer__badge:hover {
  opacity: 0.85;
}
.footer__badge img {
  height: 52px;
  width: auto;
  display: block;
  border-radius: 10px;
}

/* ============================================
   Responsive — Desktop First
   ============================================ */

/* Tablet (960px and below) */
@media (max-width: 960px) {
  .use-cases__grid {
    grid-template-columns: 1fr 1fr;
  }

  .steps {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xl);
  }

  .step__connector {
    width: 2px;
    height: 40px;
    margin-top: 0;
  }

  .step {
    max-width: 360px;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .lang-switch__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    text-align: center;
  }

  .small-features__grid {
    grid-template-columns: 1fr 1fr;
  }

  .comparison__table {
    font-size: 13px;
  }

  .comparison__table th,
  .comparison__table td {
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* Mobile (640px and below) */
/* Below widescreen the full-bleed hero image crowds the logo + copy, so
   drop it and re-center the two-column layout. The image is a widescreen
   flourish only. */
@media (max-width: 1024px) {
  .hero__edge-img {
    display: none;
  }
  .hero__inner {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 640px) {
  :root {
    --font-size-5xl: 2.25rem;
    --font-size-4xl: 2rem;
    --font-size-3xl: 1.5rem;
    --font-size-2xl: 1.25rem;
    --spacing-4xl: 3.5rem;
  }

  .nav__links {
    display: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background-color: var(--color-bg);
    flex-direction: column;
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }

  .nav__links--open {
    display: flex;
  }

  .nav__link--cta {
    text-align: center;
  }

  .nav__toggle {
    display: flex;
  }

  .hero {
    padding: var(--spacing-3xl) 0;
  }

  .hero__edge-img {
    display: none;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-xl);
    margin-left: auto;
    margin-right: auto;
  }

  .hero__logo {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .hero__subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .hero__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 320px;
  }

  .feature__number {
    font-size: var(--font-size-2xl);
    min-width: 36px;
  }

  .feature__text {
    padding-left: calc(36px + var(--spacing-lg));
  }

  .use-cases__grid {
    grid-template-columns: 1fr;
  }

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

  .small-features__grid {
    grid-template-columns: 1fr;
  }

  .lang-switch__inner {
    text-align: center;
  }

  .lang-bubble {
    max-width: 100%;
  }

  .privacy__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer__links {
    gap: var(--spacing-md);
  }
}

/* Small mobile (374px and below) */
@media (max-width: 374px) {
  .container {
    padding: 0 var(--spacing-md);
  }
}
/* Cookie consent banner (Google Ads / Consent Mode v2) */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 540px;
  margin: 0 auto;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.14);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-light);
}
.cookie-banner__text { margin: 0; }
.cookie-banner__text a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; gap: 8px; justify-content: flex-end; }
.cookie-banner__btn {
  padding: 0.42rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
}
.cookie-banner__btn--accept { background: var(--color-accent); color: #ffffff; }
.cookie-banner__btn--accept:hover { background: var(--color-accent-hover, #c96a2f); }
.cookie-banner__btn--decline { background: transparent; color: var(--color-text-light); border-color: var(--color-border); }
.cookie-banner__btn--decline:hover { color: var(--color-text); }
@media (min-width: 560px) {
  .cookie-banner { flex-direction: row; align-items: center; }
  .cookie-banner__text { flex: 1; }
  .cookie-banner__actions { flex-shrink: 0; }
}

/* Two-line download buttons: main label + spec sub-line (hero + final CTA) */
.cta-stack { gap: 0.6rem; }
.cta-stack__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.18;
  text-align: left;
}
.cta-stack__main { font-size: 1rem; font-weight: 700; line-height: 1.1; }
.cta-stack__sub {
  font-size: 0.68rem;
  font-weight: 400;
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.12rem;
}

/* Final-CTA: the two download buttons side by side, centered (mirrors the hero) */
.final-cta__actions {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: var(--spacing-lg);
}
@media (max-width: 640px) {
  .final-cta__actions { flex-direction: column; align-items: center; }
}