/* ============================================
   WinTranscribe — 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;
  --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);
}

/* Microsoft Store CTA in the header — custom dark button modelled on
   the Apple "Download on the App Store" / Google "Get it on Google Play"
   pattern. Small "Get it from" lead-in over a bigger "Microsoft Store"
   line, with the 4-colour Windows logo on the left. Recognisable as a
   store link without leaning on Microsoft's stock white/black SVG. */
.nav__store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.4rem 0.95rem 0.4rem 0.85rem;
  background: #1a1a1f;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.nav__store-badge:hover {
  background: #2a2a30;
  color: #ffffff;
}
.nav__store-badge:active {
  transform: scale(0.98);
}
.nav__store-badge svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}
.nav__store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}
.nav__store-badge-sub {
  font-size: 0.7rem;
  opacity: 0.75;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.nav__store-badge-main {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* 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;
}

.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 {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-warm);
}

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

.hero__logo {
  flex-shrink: 0;
  width: 220px;
  height: 220px;
}

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

.hero__content {
  min-width: 0;
}

.hero__title {
  font-size: var(--font-size-5xl);
  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__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;
}

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

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

/* --- Flows (two propositions with streaming logos) --- */
.flows {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
}

.flow {
  max-width: 960px;
  margin: 0 auto;
}

.flow + .flow {
  margin-top: var(--spacing-3xl);
}

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

.flow__subtitle {
  text-align: center;
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-xl);
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* 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. Adres de
   verantwoordelijkheid-laag richting de user zonder de hele propositie
   te ondergraven. */
.flow__note {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-lighter);
  line-height: 1.55;
  max-width: 580px;
  margin: calc(var(--spacing-xl) * -1 + var(--spacing-sm)) auto var(--spacing-xl);
  font-style: italic;
}

/* --- 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);
}

/* --- Marquee (endless logo carousel) --- */
.marquee {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow: hidden;
  /* Full-bleed: break out of parent container to viewport width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* fade edges */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

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

.marquee__track {
  display: flex;
  gap: var(--spacing-xs);
  flex-shrink: 0;
  width: max-content;
  padding: 4px 0;
  will-change: transform;
}

.marquee__track--left {
  animation: marqueeLeft 60s linear infinite;
}

.marquee__track--right {
  animation: marqueeRight 60s linear infinite;
}

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

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

/* Pause on hover for readability */
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .marquee__row {
    overflow-x: auto;
  }
}

.logo-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  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;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.logo-chip:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-light);
}

.logo-chip img {
  display: block;
  flex-shrink: 0;
}

.logo-chip--any {
  border-style: dashed;
  color: var(--color-text-lighter);
  font-style: italic;
}

/* --- 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-lg);
  color: var(--color-text-light);
  line-height: 1.6;
}

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

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

.problem__heading {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--spacing-lg);
}

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

.problem__block--solution .problem__heading {
  color: var(--color-accent);
}

/* --- Features (Editorial Layout) --- */
.features {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-bg-section);
}

.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);
  line-height: 1.7;
}

/* --- 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: 900px;
  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);
}
.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;
}

/* --- Privacy --- */
.privacy {
  padding: var(--spacing-4xl) 0;
  background-color: var(--color-accent-lighter);
}

.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-warm);
  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);
}

.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);
}

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

/* Tablet (960px and below) */
@media (max-width: 960px) {
  .problem__inner {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }

  .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;
  }

  .logo-chip {
    padding: 6px 12px;
    font-size: 12px;
  }

  .logo-chip img {
    width: 16px;
    height: 16px;
  }

  .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) */
@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__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--spacing-xl);
  }

  .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);
  }
}