/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/*! Nanopixo Marketing Website */

/* ==========================================================================
   Design Tokens / CSS Variables
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #ffff20;
  --color-primary-light: #ffffa0;
  --color-text: #111111;
  --color-text-light: #666666;
  --color-background: #ffffff;
  --color-background-dark: #111111;
  --color-accent-blue: #1a1a2e;
  --color-gray-light: #f5f5f5;
  --color-gray: #e0e0e0;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-base: 16px;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-2lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;
  --line-height-base: 1.6;
  --line-height-tight: 1.2;

  /* Spacing */
  --spacing-xxs: 0.2rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 4rem;
  --spacing-3xl: 6rem;

  /* Layout */
  --container-max-width: 1140px;
  --container-padding: 1.5rem;

  /* Effects */
  --border-radius: 8px;
  --border-radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --transition: 0.2s ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

body > main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  line-height: var(--line-height-tight);
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Wider padding for all page sections */
.pricing-intro .container,
.pricing-anchor .container,
.pricing-cards .container,
.pricing-explainer .container,
.pricing-rerenders .container,
.pricing-vs .container,
.why-credits .container,
.faq-support .container,
.pricing-finder .container,
.pricing-value .container,
.pricing-freeplan .container,
.hero .container,
.video-section .container,
.social-proof .container,
.showcase .container,
.gallery .container,
.features .container,
.big-cta .container,
.benefits .container,
.blog-highlight .container,
.help-hero .container,
.howto-banner .container,
.popular-topics .container,
.help-info-divider .container,
.support-options .container {
  padding: 0 var(--spacing-lg);
}

@media (min-width: 768px) {
  .pricing-intro .container,
  .pricing-anchor .container,
  .pricing-cards .container,
  .pricing-explainer .container,
  .pricing-rerenders .container,
  .pricing-vs .container,
  .why-credits .container,
  .faq-support .container,
  .pricing-finder .container,
  .pricing-grow .container,
  .pricing-value .container,
  .pricing-freeplan .container,
  .hero .container,
  .video-section .container,
  .social-proof .container,
  .showcase .container,
  .gallery .container,
  .features .container,
  .big-cta .container,
  .benefits .container,
  .blog-highlight .container,
  .help-hero .container,
  .howto-banner .container,
  .popular-topics .container,
  .help-info-divider .container,
  .support-options .container,
  .social-sellers .container {
    padding: 0 var(--spacing-2xl);
  }
}

@media (min-width: 1024px) {
  .pricing-intro .container,
  .pricing-anchor .container,
  .pricing-cards .container,
  .pricing-explainer .container,
  .pricing-rerenders .container,
  .pricing-vs .container,
  .why-credits .container,
  .faq-support .container,
  .pricing-finder .container,
  .pricing-grow .container,
  .pricing-value .container,
  .pricing-freeplan .container,
  .hero .container,
  .video-section .container,
  .social-proof .container,
  .showcase .container,
  .gallery .container,
  .features .container,
  .big-cta .container,
  .benefits .container,
  .blog-highlight .container,
  .help-hero .container,
  .howto-banner .container,
  .popular-topics .container,
  .help-info-divider .container,
  .support-options .container,
  .social-sellers .container {
    padding: 0 var(--spacing-3xl);
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.highlight {
  background-color: var(--color-primary);
  padding: 0 0.1em;
  border-bottom: 4px solid var(--color-text);
  font-weight: 700;
  /* multiply so a wrapped line's highlight never masks the underline/text above it */
  mix-blend-mode: multiply;
}

.underline-thick {
  border-bottom: 2px solid var(--color-text);
  padding-bottom: 2px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 200;
  background-color: var(--color-background);
  transition: all 0.3s ease;
}

.header__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  transition: height 0.3s ease;
}

/* Swap the account avatar and the "Try it for free" pill (pill before avatar).
   logo + nav keep order 0 (first); the rest of the right cluster is ordered
   explicitly so only the avatar and pill change places.
   NOTE: the nav is absolutely centered on desktop, so anything added here eats
   into the space it needs. That is why the currency switcher went to the footer
   rather than joining this row. */
.header__container .header-cta-btn { order: 1; }
.header__container .account-dropdown { order: 2; }
.header__container .lang-switcher--header { order: 3; }
.header__container .hamburger { order: 4; }

/* Scrolled/collapsed header state */
.header--scrolled .header__container {
  height: 70px;
}

/* Logo - scales down when scrolled */
.logo__img {
  height: 43px;
  width: auto;
  flex-shrink: 0;
  transition: height 0.3s ease;
}

.header--scrolled .logo__img {
  height: 27px;
}

/* Mobile adjustments for expanded header */
@media (max-width: 1023px) {
  .header__container {
    height: 60px;
    gap: var(--spacing-xs);
    min-width: 0;
  }

  .header--scrolled .header__container {
    height: 60px;
  }

  .logo__img,
  .header--scrolled .logo__img {
    height: 31px;
    max-width: min(58vw, 196px);
  }

  .logo {
    min-width: 0;
  }

  .nav {
    display: none !important;
  }

  .nav.active {
    display: flex !important;
  }

  /* On mobile the avatar and language selector move INTO the hamburger menu. */
  .lang-switcher.lang-switcher--header,
  .account-dropdown {
    display: none !important;
  }
}

/* Mobile hamburger-menu footer: login/register + a language row at the bottom. */
.nav__mobile-extra { display: none; }
@media (max-width: 1023px) {
  .nav.active { flex-direction: column; }
  .nav.active .nav__mobile-extra {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    margin-top: auto;
    padding-top: 26px;
    border-top: 1px solid var(--color-line, #ececef);
  }
  .nav__auth-link { font-weight: 700; }
  .nav__lang-row { display: flex; gap: 8px; margin-top: 4px; }
  .nav__lang-row .lang-switcher__btn {
    flex: 1;
    border: 1px solid var(--color-line, #ececef);
    background: #fff;
    border-radius: 8px;
    padding: 11px 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text);
    text-align: center;
    cursor: pointer;
  }
  .nav__lang-row .lang-switcher__btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

/* Buffer-style mobile hamburger menu: a CTA pill on top, flat links, collapsible
   <details> sections (Made for / Resources / Company / Support), then a Log in +
   CTA pill and a language row. Native <details> so it needs no JS, which also
   makes it work on the baked (blog/glossary) pages. Shown only in the drawer. */
.nav__mobile { display: none; }
@media (max-width: 1023px) {
  /* In the open drawer, the desktop link list is replaced by the structured menu. */
  .nav.active .nav__list { display: none; }
  .nav.active .nav__mobile { display: flex; flex-direction: column; width: 100%; }

  .nav__m-cta {
    display: block;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    padding: 14px 20px;
    border-radius: 999px;
    border: 2px solid transparent;
    margin: 8px 0;
  }
  .nav__m-cta--primary { background-color: var(--color-text); color: var(--color-background); }
  .nav__m-cta--outline { background-color: transparent; color: var(--color-text); border-color: var(--color-text); }
  .nav__mobile > .nav__m-cta--primary:first-child { margin: 0 0 16px; }
  .nav__m-cta--outline { margin-top: 22px; }

  .nav__m-link,
  .nav__m-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 2px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-line, #ececef);
  }
  .nav__m-sum { cursor: pointer; list-style: none; }
  .nav__m-sum::-webkit-details-marker { display: none; }
  /* Nav links (features/showcase/pricing) are lowercase brand-style in the desktop
     header, but in the mobile menu they sit next to Title-Case section headers
     (Made for / Resources / Company / Support), so capitalize the first letter here
     for a consistent mobile menu. Single words per language, so capitalize is safe. */
  .nav__m-link { text-transform: capitalize; }
  .nav__m-chev { width: 22px; height: 22px; flex: none; transition: transform 0.2s ease; }
  .nav__m-acc[open] .nav__m-chev { transform: rotate(180deg); }

  .nav__m-panel { display: flex; flex-direction: column; padding: 6px 0 14px 14px; gap: 2px; }
  .nav__m-panel a {
    padding: 10px 2px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--color-text);
    opacity: 0.85;
  }
  .nav__m-panel a:hover { opacity: 1; }

  .nav__mobile .nav__lang-row { margin-top: 18px; }
}

/* Language switcher - always visible, positioned next to hamburger on mobile */
.lang-switcher.lang-switcher--header {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
  z-index: 200;
  background-color: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Navigation - hidden on mobile by default, shown when active */
.nav {
  display: none;
}

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

.nav__link {
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  transition: opacity var(--transition);
}

.nav__link:hover {
  opacity: 0.7;
}

/* Hamburger - visible on mobile */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-right: -10px;
  flex-shrink: 0;
}

.hamburger span {
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition), opacity var(--transition);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile Navigation - when active, show as full screen overlay */
.nav.active {
  display: flex;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-background);
  padding: var(--spacing-lg);
}

.header--scrolled .nav.active {
  top: 60px;
}

@media (min-width: 1024px) {
  .nav.active {
    top: 100px;
  }

  .header--scrolled .nav.active {
    top: 70px;
  }
}

.nav.active .nav__list {
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.nav.active .nav__link {
  font-size: var(--font-size-xl);
}

/* While the menu is open, pin the header so the close (X) button can never
   scroll out of view (iOS ignores body overflow:hidden). The overlay starts
   right below the 60px mobile header and scrolls internally if it overflows. */
@media (max-width: 1023px) {
  .header:has(.nav.active) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .nav.active {
    top: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Desktop Navigation */
@media (min-width: 1024px) {
  .header__container {
    gap: var(--spacing-lg);
    position: relative;
  }

  /* Center the nav in the middle of the page width (logo left, account/CTA
     right flank it); links 20% larger. */
  .nav {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .nav__link,
  .nav.active .nav__link {
    font-size: 1.2rem;
  }

  /* Extra entries (help, how-to) live in the hamburger menu only, hide on desktop. */
  .nav__item--mob {
    display: none;
  }

  /* Nav is out of flow (absolutely centered), so push the account/CTA/lang
     cluster to the right edge instead of letting space-between spread it
     across the middle (which would collide with the centered nav). */
  .header__container .header-cta-btn {
    margin-left: auto;
  }

  .nav.active {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 0;
  }

  .nav.active .nav__list {
    flex-direction: row;
    gap: var(--spacing-md);
  }

  .hamburger {
    display: none;
  }

  .lang-switcher--header {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.logo__img--light {
  filter: brightness(0) invert(1);
}

.logo__text {
  color: var(--color-text);
}

.logo__accent {
  width: 8px;
  height: 8px;
  background-color: var(--color-primary);
  border-radius: 2px;
}

.logo--light .logo__text {
  color: var(--color-background);
}

/* Language Switcher in Header - styles for dropdown */
.lang-switcher.lang-switcher--header .lang-switcher__btn {
  padding: 6px 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  display: none;
  border-radius: 0;
  white-space: nowrap;
  transition: opacity var(--transition);
}

.lang-switcher.lang-switcher--header .lang-switcher__btn:hover {
  opacity: 0.7;
}

.lang-switcher.lang-switcher--header .lang-switcher__btn.active {
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  border-radius: 0;
  cursor: pointer;
  padding: 6px 4px;
}

/* Dropdown list - positioned below the active button */
.lang-switcher.lang-switcher--header .lang-switcher__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 4px;
  z-index: 201;
  flex-direction: column;
}

.lang-switcher.lang-switcher--header .lang-switcher__dropdown-inner {
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.lang-switcher.lang-switcher--header:hover .lang-switcher__dropdown,
.lang-switcher.lang-switcher--header.open .lang-switcher__dropdown {
  display: flex;
}

.lang-switcher.lang-switcher--header .lang-switcher__dropdown .lang-switcher__btn {
  display: block;
  background-color: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-text);
}

.lang-switcher.lang-switcher--header .lang-switcher__dropdown .lang-switcher__btn:hover {
  background-color: var(--color-gray-light);
  opacity: 1;
}

.lang-switcher.lang-switcher--header .lang-switcher__dropdown .lang-switcher__btn.active {
  display: none;
}

/* Account Dropdown in Header - positioned next to lang-switcher */
.account-dropdown {
  display: inline-flex;
  align-items: center;
  position: relative;
  margin-left: auto;
}

.account-dropdown__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: 2px solid var(--color-text);
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text);
  transition: opacity var(--transition);
}

.account-dropdown__toggle:hover {
  opacity: 0.7;
}

.account-dropdown__toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.account-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 4px;
  z-index: 201;
  flex-direction: column;
}

.account-dropdown__menu-inner {
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 4px;
}

.account-dropdown:hover .account-dropdown__menu,
.account-dropdown.open .account-dropdown__menu {
  display: flex;
}

.account-dropdown__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  border-radius: 8px;
  transition: background-color var(--transition);
}

.account-dropdown__link::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  flex-shrink: 0;
  opacity: 0.5;
}

.account-dropdown__link:hover {
  background-color: var(--color-gray-light);
}

@media (min-width: 1024px) {
  .account-dropdown {
    margin-left: 0;
    margin-right: calc(-1 * var(--spacing-lg) + var(--spacing-xs));
  }
}


/* ==========================================================================
   Hero Section
   ========================================================================== */

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

.hero__illustration {
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

.hero__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

.hero__svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

.hero__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 400;
  max-width: 920px;
  margin: 0 auto var(--spacing-xl);
  line-height: 1.3;
}

/* Home hero highlight styled exactly like the features.html title <mark> */
.hero__title .highlight {
  background: var(--color-primary);
  color: #111418;
  font-weight: inherit;
  padding: 0 0.12em 2px;
  border-bottom: 3px solid #111418;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  mix-blend-mode: multiply;
}

@media (min-width: 768px) {
  .hero {
    padding: var(--spacing-3xl) 0 var(--spacing-3xl);
  }

  .hero__img {
    max-width: 500px;
  }

  .hero__title {
    font-size: var(--font-size-3xl);
    max-width: 700px;
  }
}

@media (min-width: 1024px) {
  .hero__img {
    max-width: 600px;
  }

  .hero__title {
    font-size: var(--font-size-4xl);
    max-width: 800px;
  }
}

/* Hero Small Variant (for pricing page) */
.hero--small {
  padding: var(--spacing-2xl) 0;
}

.hero__title--small {
  font-size: var(--font-size-lg);
  max-width: 500px;
}

@media (min-width: 768px) {
  .hero__title--small {
    font-size: var(--font-size-xl);
    max-width: 550px;
  }
}

@media (min-width: 1024px) {
  .hero__title--small {
    font-size: var(--font-size-2xl);
    max-width: 600px;
  }
}

/* ==========================================================================
   CTA Form
   ========================================================================== */

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

.cta-form__arrow {
  display: none;
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
}

.cta-form__arrow-img {
  display: none;
  flex-shrink: 0;
  height: 28px;
  width: auto;
  align-self: center;
}

.cta-form__input {
  width: 100%;
  padding: 0.75rem var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  border: 2px solid var(--color-text);
  border-radius: 4px;
  outline: none;
  transition: box-shadow var(--transition);
}

.cta-form__input:focus {
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.cta-form__input::placeholder {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  color: var(--color-text-light);
}

.cta-form__button {
  padding: 0.75rem var(--spacing-xl);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: white;
  background-color: var(--color-text);
  border: none;
  border-radius: 4px;
  white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cta-form__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.cta-form__button:active {
  transform: translateY(0);
}

#hero-form .cta-form__button {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

#hero-form .cta-form__button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}

#hero-form .cta-form__button:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

#hero-form .cta-form__button:hover::before {
  left: 125%;
}

#hero-form .cta-form__button:active {
  transform: scale(0.98) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
  .cta-form {
    flex-direction: row;
  }

  .cta-form__arrow {
    display: block;
  }

  .cta-form__arrow-img {
    display: block;
  }

  .cta-form__input {
    flex: 1;
  }

  .cta-form__button {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Section Label
   ========================================================================== */

.section-label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.section-label__text {
  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-primary);
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.section-label__arrow {
  animation: bounce 2s infinite;
}

.section-label__arrow-img {
  width: 18px;
  height: auto;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

.section-label--inline {
  margin-bottom: var(--spacing-xl);
}

/* ==========================================================================
   Video Section
   ========================================================================== */

.video-section {
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
  text-align: center;
}

.video-block {
  position: relative;
  margin-top: 70px;
}

.video-block .section-label {
  position: absolute;
  bottom: calc(100% + 20px);
  left: 0;
  z-index: 10;
  margin-bottom: 0;
}

.video-block__placeholder {
  position: relative;
  width: calc(100% - 18px - var(--spacing-sm));
  margin-left: calc(18px + var(--spacing-sm));
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  background-color: var(--color-gray-light);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
}

.video-block__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 50px));
  padding: 0;
  background: none;
  transition: transform var(--transition);
}

.video-block__play:hover {
  transform: translate(-50%, calc(-50% - 50px)) scale(1.1);
}

/* Video Block with Vimeo Embed */
.video-block__placeholder--vimeo {
  padding-bottom: 0;
  background-color: #fff;
}

.video-block__poster {
  position: relative;
  cursor: pointer;
}

.video-block__placeholder--vimeo iframe {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  display: block;
}

.vimeo-end-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.vimeo-end-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.vimeo-end-overlay__cta {
  display: inline-block;
  font-size: 1.15rem;
  padding: 0.9rem 2.8rem;
  border-radius: 50px;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.vimeo-end-overlay__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.vimeo-end-overlay__replay {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.4rem 1rem;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.vimeo-end-overlay__replay:hover {
  color: #ffffff;
}

.vimeo-end-overlay__replay svg {
  width: 14px;
  height: 14px;
}

/* Video Block with Image Placeholder */
.video-block__placeholder--image {
  padding-bottom: 0;
  background-color: transparent;
}

.video-block__image {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  border-radius: var(--border-radius-lg);
  overflow: visible;
}

.video-block__poster:hover .video-block__play {
  transform: translate(-50%, calc(-50% - 50px)) scale(1.1);
}

.video-block__caption {
  position: absolute;
  bottom: 2px;
  right: 4px;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2lg);
  font-weight: 500;
  color: black;
  line-height: 1.6rem;
  border-radius: var(--border-radius);
  max-width: 50%;
  text-align: right;
}


@media (max-width: 980px) {
  .video-block__caption {
    line-height: 1.6rem;
    bottom: 1px;
    max-width: 60%;
    font-size: var(--font-size-2lg);
  }
}

@media (max-width: 808px) {
  .video-block__placeholder--image {
    overflow: visible;
    margin-bottom: var(--spacing-xxs);
  }

  .video-block__caption {
    line-height: 1.4rem;
    bottom: 0;
    font-size: var(--font-size-2lg);
  }
}

@media (max-width: 525px) {
  .video-block__placeholder--image {
    margin-bottom: var(--spacing-xxs);
  }

  .video-block__caption {
    line-height: 1rem;
    bottom: calc(-1 * var(--spacing-xxs));
    font-size: var(--font-size-sm);
    transform: translateY(40%);
  }
}

/* ==========================================================================
   What is it?, language-aware switch
   ========================================================================== */

#what-is-it { display: block; }

/* ==========================================================================
   How it works (3-step explainer)
   ========================================================================== */

.how-it-works {
  width: calc(100% - 18px - var(--spacing-sm));
  margin-left: calc(18px + var(--spacing-sm));
  padding: var(--spacing-xl) var(--spacing-lg);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
  text-align: center;
}

.how-it-works__title {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--color-text);
}

.how-it-works__subtitle {
  font-size: 1rem;
  color: #666;
  max-width: 640px;
  margin: 0 auto var(--spacing-xl);
  line-height: 1.5;
}

.how-it-works__steps {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 1rem;
  max-width: 1080px;
}

.how-step {
  flex: 1 1 0;
  min-width: 0;
  max-width: 320px;
  padding: 1.75rem 1.25rem 1.5rem;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-lg);
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.how-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.how-step__number {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.how-step__icon {
  width: 64px;
  height: 64px;
  margin: 0.25rem auto 1rem;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

.how-step__desc {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.how-it-works__arrow {
  list-style: none;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
}

.how-it-works__cta {
  margin-top: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.how-it-works__cta .btn--primary {
  display: inline-block;
  font-size: 1.05rem;
  padding: 0.8rem 2.25rem;
  border-radius: 50px;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s;
}

.how-it-works__cta .btn--primary:hover {
  transform: translateY(-2px);
}

.how-it-works__cta-note {
  font-size: 0.9rem;
  color: #6b6b6b;
}

/* Tablet: keep horizontal but tighten spacing */
@media (max-width: 960px) {
  .how-it-works {
    padding: var(--spacing-lg) var(--spacing-md);
  }
  .how-it-works__steps { gap: 0.5rem; }
  .how-step { padding: 1.5rem 1rem 1.25rem; }
  .how-step__desc { font-size: 0.88rem; }
}

/* Mobile: stack vertically, rotate arrows down */
@media (max-width: 720px) {
  .how-it-works {
    width: 100%;
    margin-left: 0;
  }
  .how-it-works__steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .how-step {
    max-width: 100%;
  }
  .how-it-works__arrow {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }
}

/* ==========================================================================
   Coming Soon Banner
   ========================================================================== */

.coming-soon-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .coming-soon-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
  }
}

/* ==========================================================================
   Social Proof Section
   ========================================================================== */

.social-proof {
  padding: var(--spacing-2xl) 0;
}

.social-proof__split {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 900px;
  margin: 0 auto;
}

.social-proof__block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.social-proof__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}

.social-proof__ico svg {
  width: 56px;
  height: 56px;
  stroke-width: 1.2;
  color: var(--color-text);
}

.social-proof__block p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--color-text);
  margin: 0;
}

.social-proof__block .highlight {
  background: var(--color-primary);
  color: var(--color-text);
  padding: 0 0.1em 1px;
  font-weight: 700;
}

.social-proof__arrow-h {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-proof__arrow-h svg {
  width: 40px;
  height: 40px;
  color: var(--color-text);
  opacity: 0.25;
}

@media (max-width: 700px) {
  .social-proof__split {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .social-proof__arrow-h svg {
    transform: rotate(90deg);
  }
}

/* legacy, hidden but kept for A/B analytics */
.social-proof__text { display: none; }
.social-proof__arrow { display: none; }

/* ==========================================================================
   Social Proof & Gallery Wrapper
   ========================================================================== */

.social-gallery-wrapper {
  position: relative;
}

/* Full-width social-icons watermark, fixed (parallax) and faded in around the
   middle of the problem container, scrolling away again just above "Follow us". */
.social-gallery-wrapper::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  margin-left: -50vw;            /* center a 100vw box WITHOUT transform (transform breaks fixed bg) */
  width: 100vw;
  height: calc(100% + 20px);
  background-image: url('../img/icons-bg.jpg');
  background-size: 100vw auto;   /* true size fitted to the window width, not zoomed/cropped */
  background-position: center top;
  background-repeat: repeat;
  background-attachment: fixed;  /* parallax: stays put while the content scrolls over it */
  /* fade the pattern in around the middle of the problem container */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 340px, #000 760px);
          mask-image: linear-gradient(to bottom, transparent 0, transparent 340px, #000 760px);
  z-index: -1;
}

/* ==========================================================================
   Showcase Section
   ========================================================================== */

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

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

.showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.showcase__item {
  display: flex;
  flex-direction: column;
}

.showcase__item--landscape {
  grid-column: span 2;
}

/* ── Showcase device-family mockup (Mac / iPad / iPhones playing showcase videos) ── */
.showcase__devices { margin: 84px 0 24px; display: flex; justify-content: center; }
.showcase__devices--link { text-decoration: none; color: inherit; cursor: pointer; transition: transform .25s ease, filter .25s ease; }
.showcase__devices--link:hover { transform: translateY(-4px); filter: drop-shadow(0 18px 34px rgba(17,20,24,.16)); }
.showcase__devices--link:focus-visible { outline: 3px solid var(--brand-pink, #fe2c55); outline-offset: 8px; border-radius: 14px; }
.dm-stage { position: relative; width: 100%; max-width: 780px; aspect-ratio: 16 / 8; }
.dm { position: absolute; }
.dm-vid { display: block; width: 100%; height: 100%; object-fit: cover; background: #0a0a12; }
.dm-mac { left: 15%; bottom: 5%; width: 70%; z-index: 2; }
.dm-mac-screen { background: #0b0b0d; border: 2px solid #2a2a2e; border-radius: 14px 14px 6px 6px; padding: 9px 9px 0; box-shadow: 0 26px 54px rgba(17, 20, 24, .28); }
.dm-mac-bezel { border-radius: 5px; overflow: hidden; aspect-ratio: 16 / 9; }
.dm-mac-base { position: relative; height: 15px; margin: 0 -7%; background: linear-gradient(#d3d6da, #a7abb1); border-radius: 0 0 13px 13px; }
.dm-mac-base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 6px; background: #9598a0; border-radius: 0 0 8px 8px; }
.dm-ipad { right: -1%; bottom: 5%; width: 30%; z-index: 4; transform: rotate(5deg); }
.dm-ipad-screen { background: #0b0b0d; border: 2px solid #2a2a2e; border-radius: 20px; padding: 8px; box-shadow: 0 18px 40px rgba(17, 20, 24, .24); }
.dm-ipad-screen .dm-vid { border-radius: 10px; aspect-ratio: 3 / 4; }
.dm-iphone { z-index: 3; }
.dm-iphone-screen { position: relative; background: #0b0b0d; border: 2px solid #2a2a2e; border-radius: 24px; padding: 5px; box-shadow: 0 16px 36px rgba(17, 20, 24, .26); }
.dm-iphone-screen .dm-vid { border-radius: 18px; aspect-ratio: 9 / 19; }
.dm-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 32%; height: 9px; background: #0b0b0d; border-radius: 0 0 8px 8px; z-index: 2; }
.dm-iphone--a { left: 1%; bottom: 5%; width: 15%; transform: rotate(-6deg); }
/* Mobile: the stage is ~half desktop width, so halve the device frame radii,
   borders, padding and shadows, otherwise the phones look like fat pills. */
@media (max-width: 560px) {
  .showcase__devices { margin: 54px 0 12px; }
  .dm-mac-screen { border-radius: 8px 8px 4px 4px; border-width: 1.5px; padding: 5px 5px 0; box-shadow: 0 14px 28px rgba(17, 20, 24, .26); }
  .dm-mac-bezel { border-radius: 3px; }
  .dm-mac-base { height: 8px; border-radius: 0 0 7px 7px; }
  .dm-ipad-screen { border-radius: 11px; border-width: 1.5px; padding: 5px; box-shadow: 0 10px 22px rgba(17, 20, 24, .22); }
  .dm-ipad-screen .dm-vid { border-radius: 6px; }
  .dm-iphone-screen { border-radius: 13px; border-width: 1.5px; padding: 3px; box-shadow: 0 9px 20px rgba(17, 20, 24, .24); }
  .dm-iphone-screen .dm-vid { border-radius: 10px; }
  .dm-notch { top: 6px; height: 5px; }
}

.showcase__video-container {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--color-gray-light);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.showcase__video-container:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-md);
}

/* Portrait videos - 9:16 aspect ratio */
.showcase__item--portrait .showcase__video-container {
  aspect-ratio: 9 / 16;
}

/* Landscape videos - 16:9 aspect ratio */
.showcase__item--landscape .showcase__video-container {
  aspect-ratio: 16 / 9;
}

.showcase__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: transform var(--transition), opacity var(--transition);
}

.showcase__play:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.showcase__play svg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* Hide play button when video is playing */
.showcase__video-container.is-playing .showcase__play {
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Video Modal - Plays videos at proper size (max 1080x1920 portrait, 1920x1080 landscape)
   ========================================================================== */

.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.video-modal.is-active {
  display: flex;
}

.video-modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  cursor: pointer;
}

.video-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 95vw;
  max-height: 95vh;
}

.video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.video-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.video-modal__video {
  display: block;
  border-radius: var(--border-radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.showcase-post-close-cta {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 9998;
  width: min(420px, calc(100vw - 32px));
  padding: var(--spacing-lg);
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(17, 20, 24, 0.20);
  font-family: var(--font-family);
  color: var(--color-text);
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px) scale(0.95);
  transition: opacity 0.25s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.showcase-post-close-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.showcase-post-close-cta__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-gray-light);
  color: var(--color-text);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: background-color var(--transition);
}

.showcase-post-close-cta__dismiss:hover {
  background-color: var(--color-gray);
}

/* Yellow lip on the card's top edge, like the pricing "one-time purchase" lip */
.showcase-post-close-cta__eyebrow {
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
  margin: 0;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 700;
  padding: 0.35rem 1rem;
  white-space: nowrap;
}

.showcase-post-close-cta__title {
  margin: 0 2rem 0.5rem 0;
  color: var(--color-text);
  font-size: var(--font-size-xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: var(--line-height-tight);
}

.showcase-post-close-cta__body {
  margin: 0 0 var(--spacing-lg) 0;
  color: var(--color-text-light);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.showcase-post-close-cta__button {
  display: inline-block;
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background-color: var(--color-text);
  color: var(--color-background);
  font-size: 1.05rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.showcase-post-close-cta__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.showcase-post-close-cta__button:active {
  transform: translateY(0);
}

/* Portrait videos - max 1080x1920 */
.video-modal--portrait .video-modal__video {
  max-width: min(1080px, 95vw);
  max-height: min(1920px, 95vh);
  width: auto;
  height: auto;
}

/* Landscape videos - max 1920x1080 */
.video-modal--landscape .video-modal__video {
  max-width: min(1920px, 95vw);
  max-height: min(1080px, 95vh);
  width: auto;
  height: auto;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .video-modal__content {
    max-width: 100vw;
    max-height: 100vh;
    padding: 60px 10px 20px;
  }

  .video-modal__close {
    position: fixed;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    font-size: 28px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index: 10;
    transform: none;
  }

  .video-modal--portrait .video-modal__video {
    max-width: 90vw;
    max-height: 80vh;
  }

  .video-modal--landscape .video-modal__video {
    max-width: 95vw;
    max-height: 50vh;
  }

  .showcase-post-close-cta {
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
  }
}

.showcase__desc {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text);
  text-align: center;
  line-height: 1.4;
}

/* Showcase Description */
.showcase__description {
  margin: var(--spacing-2xl) auto var(--spacing-2xl);
  text-align: center;
  max-width: 720px;
  background: #ffffff;
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

@media (max-width: 767px) {
  .showcase__description {
    padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
    margin-bottom: var(--spacing-xl);
  }
}

.showcase__description-highlight {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  line-height: 1.4;
}

.showcase__description-text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.7;
  opacity: 0.85;
  margin: 0;
}

.showcase__description-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 460px;
  text-align: left;
  display: inline-block;
}

.showcase__description-list li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.75rem;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text);
  opacity: 0.85;
}

.showcase__description-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

.showcase__description-list strong {
  font-weight: 600;
  opacity: 1;
}

.showcase__description-share {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.6;
  opacity: 0.85;
  margin: var(--spacing-xl) 0 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.showcase__description-share strong {
  font-weight: 600;
  opacity: 1;
}

/* Full-showcase CTA, sits directly under the section label. The whole card is the link.
   Same white-card-on-white-page treatment as .showcase__description further down the
   section, so the two read as one family; the yellow pill carries the emphasis. */
.showcase__view-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  margin: var(--spacing-xl) 0 var(--spacing-2xl);
  padding: 32px 28px;
  background-color: var(--color-background);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.showcase__view-all:hover,
.showcase__view-all:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.showcase__view-all-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.showcase__view-all-eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
}

.showcase__view-all-sub {
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-light);
  line-height: 1.5;
}

.showcase__view-all-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  background: var(--color-primary);
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  transition: transform 0.15s ease;
}

.showcase__view-all:hover .showcase__view-all-link {
  transform: translateX(3px);
}

@media (min-width: 768px) {
  .showcase__view-all {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    text-align: left;
    padding: 36px 44px;
    margin: var(--spacing-xl) 0 var(--spacing-3xl);
  }

  .showcase__view-all-eyebrow {
    font-size: 28px;
  }

  .showcase__view-all-sub {
    font-size: 16px;
  }

  .showcase__view-all-link {
    font-size: var(--font-size-xl);
  }
}

@media (min-width: 768px) {
  .showcase__description-highlight {
    font-size: var(--font-size-2xl);
  }

  .showcase__description-text,
  .showcase__description-list li,
  .showcase__description-share {
    font-size: var(--font-size-lg);
  }
}

/* Mobile: portraits side by side, landscapes full width */
@media (max-width: 767px) {
  .showcase__grid {
    gap: var(--spacing-md);
  }

  .showcase__title {
    font-size: var(--font-size-xl);
  }

  .showcase__play svg {
    width: 40px;
    height: 40px;
  }
}

/* Tablet: same 2-col layout, landscapes full width */
@media (min-width: 768px) and (max-width: 1023px) {
  .showcase__title {
    font-size: var(--font-size-2xl);
  }
}

/* Desktop: cap the grid width so portraits don't get oversized */
@media (min-width: 1024px) {
  .showcase__grid {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  .showcase__title {
    font-size: var(--font-size-3xl);
  }
}

/* ==========================================================================
   Follow Us Strip
   ========================================================================== */

.follow-us {
  padding: var(--spacing-2xl) 0;
  text-align: center;
}

.follow-us__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0 0 var(--spacing-md);
  color: var(--color-text);
}

.follow-us__links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
}

.follow-us__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-gray-light);
  color: var(--color-text);
  transition: transform var(--transition), background-color var(--transition), color var(--transition);
}

.follow-us__link:hover {
  transform: translateY(-2px);
  background-color: var(--color-text);
  color: var(--color-background);
}

/* ==========================================================================
   Blog Highlight (latest articles): 1 featured + up to 3 cards
   ========================================================================== */
.blog-highlight { padding: var(--spacing-2xl) 0; }
.blog-highlight__label { margin-bottom: var(--spacing-xl); }
.blog-highlight__grid { display: flex; flex-direction: column; gap: 28px; }

.bh-featured,
.bh-card { text-decoration: none; color: inherit; background: var(--color-background); border: 1px solid #e7e7ea; border-radius: 20px; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.bh-featured:hover,
.bh-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0, 0, 0, .10); }
.bh-media { display: block; background: var(--color-gray-light); }
.bh-cat { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--color-text-light); }
.bh-title { margin: 0; }

.bh-featured { display: grid; grid-template-columns: 1.3fr 1fr; align-items: stretch; }
.bh-featured .bh-media { height: 100%; }
.bh-featured .bh-media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.bh-featured .bh-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 40px 44px; }
.bh-featured .bh-title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }

.blog-highlight__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.bh-card { border-radius: 16px; display: flex; flex-direction: column; }
.bh-card .bh-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.bh-card .bh-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 22px; }
.bh-card .bh-title { font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }

@media (max-width: 900px) {
  .bh-featured { grid-template-columns: 1fr; }
  .bh-featured .bh-media img { min-height: 0; aspect-ratio: 16 / 9; }
  .bh-featured .bh-body { padding: 26px 24px; }
  .blog-highlight__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blog-highlight__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Features Section
   ========================================================================== */

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

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.feature {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  text-align: left;
}

.feature--label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Mobile: reverse order (arrow first) and point down */
.feature--label .section-label--horizontal {
  flex-direction: row-reverse;
}

.feature--label .section-label__arrow--horizontal {
  transform: rotate(90deg);
  animation: bounce-vertical-down 2s infinite;
}

@keyframes bounce-vertical-down {
  0%, 100% { transform: rotate(90deg) translateX(0); }
  50% { transform: rotate(90deg) translateX(4px); }
}

.section-label--horizontal {
  flex-direction: row;
  gap: var(--spacing-sm);
}

.section-label--horizontal .section-label__text {
  font-size: 1.75rem;
  padding: var(--spacing-sm) var(--spacing-lg);
}

.section-label--horizontal .section-label__arrow--horizontal {
  animation: bounce-horizontal 2s infinite;
}

@keyframes bounce-horizontal {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.feature__icon {
  flex-shrink: 0;
  width: 160px;
}

.feature__icon svg {
  margin: 0;
}

.feature__img {
  width: 160px;
  height: auto;
}

.feature__img--short {
  max-height: 120px;
  width: auto;
}

.feature__content {
  flex: 1;
  max-width: 200px;
}

.feature__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.feature__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .features__grid {
    grid-template-columns: repeat(2, auto);
    gap: var(--spacing-xl) var(--spacing-md);
    justify-content: center;
  }

  .feature--label {
    justify-content: flex-start;
  }

  /* Reset to horizontal arrow on right for desktop */
  .feature--label .section-label--horizontal {
    flex-direction: row;
  }

  .feature--label .section-label__arrow--horizontal {
    transform: none;
    animation: bounce-horizontal 2s infinite;
  }

  .feature__icon svg {
    margin: 0;
  }
}

/* Mobile: shrink the horizontal yellow section lips (e.g. "What does it do?",
   "Why use it?") to match the other smaller mobile lips. */
@media (max-width: 600px) {
  /* left-align this lip (arrow first) like all the other section lips */
  .feature--label {
    justify-content: flex-start;
  }
  .section-label--horizontal .section-label__text {
    font-size: 1.25rem;
    padding: 0.32em 0.9em;
  }
  .section-label--horizontal .section-label__arrow--horizontal {
    width: 20px;
    height: 20px;
  }
  /* arrow must point DOWN on mobile (the base bounce-horizontal animation,
     defined later in the file, was overriding the rotation) */
  .feature--label .section-label__arrow--horizontal {
    transform: rotate(90deg);
    animation: bounce-vertical-down 2s infinite;
  }
}

@media (min-width: 1024px) {
  .features__grid {
    grid-template-columns: repeat(2, auto);
  }
}

/* ==========================================================================
   Big CTA & Benefits Wrapper
   ========================================================================== */

.cta-benefits-wrapper {
  position: relative;
  overflow: hidden;
}

.cta-benefits-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background-image: url('../img/bg_img_be_the_first.webp');
  background-size: cover;
  background-position: left center;
  z-index: 0;
  display: none;
}

@media (min-width: 768px) {
  .cta-benefits-bg {
    display: block;
  }
}

@media (min-width: 1024px) {
  .cta-benefits-bg {
    width: 150px;
  }
}

/* ==========================================================================
   Big CTA Section
   ========================================================================== */

.big-cta {
  position: relative;
  padding: var(--spacing-3xl) 0;
  z-index: 1;
}

.big-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.big-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.big-cta__background {
  position: relative;
  width: 100%;
  background-image: url('../img/be-thefirst-en.jpg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Maintain aspect ratio - adjust this based on actual image dimensions */
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

/* Mobile background image */
@media (max-width: 767px) {
  .big-cta__background {
    background-image: url('../img/be-thefirst-mobile-en.jpg');
    aspect-ratio: 4 / 3;
  }
}

.big-cta__form {
  position: absolute;
  bottom: 30%;
  right: 10%;
  margin: 0;
  flex-direction: row;
  align-items: center;
}

/* Desktop form - shown on larger screens, hidden on mobile */
.big-cta__form--desktop {
  display: none;
}

/* Mobile form - shown on mobile, hidden on desktop */
.big-cta__form--mobile {
  position: relative;
  bottom: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  margin-top: var(--spacing-lg);
}

.big-cta__form .cta-form__input {
  padding: 0.5rem var(--spacing-md);
}

.big-cta__form .cta-form__button {
  padding: 0.5rem var(--spacing-lg);
}

/* Responsive adjustments for the form positioning */
@media (max-width: 767px) {
  .big-cta__form--desktop {
    display: none;
  }

  .big-cta__form--mobile {
    display: flex;
  }

  .big-cta__form .cta-form__arrow-img {
    display: none;
  }
}

@media (min-width: 768px) {
  .big-cta__form--desktop {
    display: flex;
    max-width: 400px;
  }

  .big-cta__form--mobile {
    display: none;
  }
}

@media (min-width: 1024px) {
  .big-cta__form--desktop {
    max-width: 450px;
  }
}

/* ==========================================================================
   Benefits Section
   ========================================================================== */

.benefits {
  position: relative;
  padding: var(--spacing-3xl) 0;
  z-index: 1;
}

.benefits__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
}

.benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  text-align: left;
}

.benefit--label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  order: -1; /* Move label to top on mobile */
}

/* On mobile: rotate arrow to point down */
.benefit--label .section-label__arrow--left {
  transform: rotate(-90deg);
  animation: bounce-vertical 2s infinite;
}

@keyframes bounce-vertical {
  0%, 100% { transform: rotate(-90deg) translateX(0); }
  50% { transform: rotate(-90deg) translateX(-4px); }
}

.section-label--reverse {
  flex-direction: row-reverse;
}

.section-label__arrow--left {
  animation: bounce-horizontal-left 2s infinite;
}

@keyframes bounce-horizontal-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

.benefit__icon {
  flex-shrink: 0;
  width: 160px;
}

.benefit__img {
  width: 160px;
  height: auto;
}

.benefit__content {
  flex: 1;
  max-width: 200px;
}

.benefit__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.benefit__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .benefits__grid {
    grid-template-columns: repeat(2, auto);
    gap: var(--spacing-xl) var(--spacing-md);
    justify-content: center;
    padding-right: 120px; /* Account for background image on right */
  }

  .benefit--label {
    justify-content: flex-end;
    order: 0; /* Reset order for desktop */
  }

  /* Reset arrow to horizontal on desktop */
  .benefit--label .section-label__arrow--left {
    transform: none;
    animation: bounce-horizontal-left 2s infinite;
  }
}

/* Mobile: left-align the "Why use it?" lip like all the other section lips
   (placed after the base/desktop rules so it wins the source-order cascade). */
@media (max-width: 600px) {
  .benefit--label {
    justify-content: flex-start;
  }
}

@media (min-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(2, auto);
    padding-right: 170px; /* Larger padding for larger background image */
  }
}

@media (min-width: 1200px) {
  .benefits__grid {
    padding-right: 0; /* Reset on large screens - enough space */
  }
}

/* ==========================================================================
   Final CTA Section
   ========================================================================== */

.final-cta {
  padding: var(--spacing-3xl) 0;
  text-align: center;
}

.final-cta__title {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .final-cta__title {
    font-size: var(--font-size-2xl);
  }
}

/* ==========================================================================
   Newsletter Section
   ========================================================================== */

.newsletter {
  background-color: var(--color-gray-light);
  padding: var(--spacing-2xl) 0;
}

.newsletter .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.newsletter__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
  position: relative;
}

/* Hand-drawn "sign up!" nudge with a curved arrow pointing at the newsletter
   title. Sits just left of the (centered) title; green and bold. Localized via
   the newsletter.title i18n string, so it appears on every page that shows the
   newsletter box. Decorative, so hidden on narrow screens. */
.newsletter__nudge {
  position: absolute;
  right: calc(100% - 28px);
  bottom: 36px;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  color: #3f7a1f;
  pointer-events: none;
  white-space: nowrap;
}
.newsletter__nudge-text {
  font-family: 'Bradley Hand', 'Snell Roundhand', 'Segoe Script', 'Ink Free', 'Brush Script MT', cursive;
  font-weight: 700;
  font-size: 30px;
  line-height: 0.95;
  -webkit-text-stroke: 0.6px currentColor;
  transform: rotate(-7deg);
  margin-bottom: 8px;
}
.newsletter__nudge-arrow { flex: none; width: 52px; height: auto; margin-bottom: -2px; }
@media (max-width: 820px) { .newsletter__nudge { display: none; } }

.newsletter__subtitle {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  justify-content: center;
  width: 100%;
  max-width: 700px;
}

.newsletter__input {
  flex: 1;
  min-width: 180px;
  padding: 0.75rem var(--spacing-sm);
  border: 2px solid var(--color-text);
  border-radius: 8px;
  font-size: var(--font-size-md);
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition);
}

.newsletter__input:focus {
  border-color: var(--color-text-light);
}

.newsletter__input::placeholder {
  color: var(--color-text-light);
  opacity: 0.6;
}

.newsletter__button {
  padding: 20px 42px;
  background-color: var(--color-text);
  color: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  font-size: 21px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.newsletter__button:hover {
  background-color: transparent;
  color: var(--color-text);
}

.newsletter__responses {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  min-height: 1.2em;
}
.newsletter__responses.is-success { color: #1a7f37; }
.newsletter__responses.is-error { color: #b42318; }

.newsletter__responses .response {
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

/* Honeypot: kept in the DOM for bots, hidden from people. */
.newsletter__hp {
  position: absolute !important;
  left: -5000px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__input {
    min-width: 0;
    width: 100%;
  }

  .newsletter__button {
    width: 100%;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background-color: var(--color-background-dark);
  padding: var(--spacing-2xl) 0;
  color: var(--color-background);
}

.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.footer__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.footer__icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.footer__copyright {
  font-size: var(--font-size-sm);
  opacity: 0.7;
  margin: 0;
}

.footer__legal-link {
  font-size: var(--font-size-sm);
  opacity: 0.7;
  color: inherit;
  text-decoration: underline;
  margin-left: var(--spacing-sm);
}

.footer__legal-link:hover {
  opacity: 1;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  font-size: 0.75rem;
  opacity: 0.6;
  width: 100%;
  flex-basis: 100%;
}

.footer__legal-links a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition);
}

.footer__legal-links a:hover {
  opacity: 1;
}

.footer__legal-links span {
  opacity: 0.4;
}

/* The footer CTA (title + form) lays out directly inside the bottom-main grid
   so the title can span full width above the small logo + input row. */
.footer__cta {
  display: contents;
}

.footer__cta-title {
  grid-column: 1 / -1;
  grid-row: 1;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin: 0;
  color: var(--color-background);
}

.cta-form--footer {
  margin: 0;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
}

.cta-form--footer .cta-form__input {
  background-color: var(--color-background);
}

.cta-form--footer .cta-form__arrow {
  color: var(--color-background);
}

.cta-form--footer .cta-form__arrow-img {
  filter: invert(1);
}

.cta-form--footer .cta-form__button {
  border-radius: 16px;
  padding: var(--spacing-xs) var(--spacing-md);
  border: 2px solid var(--color-background);
  flex: none;
}

.cta-form--footer .cta-form__input {
  flex: 0 1 200px;
  width: auto;
  min-width: 0;
}

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

.footer__nav {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 1.75rem 2rem;
}

@media (min-width: 560px) {
  .footer__nav {
    grid-template-columns: repeat(2, 1fr);
  }
}

.footer__nav-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.footer__nav-title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.6;
  margin: 0 0 0.25rem 0;
}

.footer__link {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  opacity: 0.9;
  transition: opacity var(--transition);
}

.footer__link:hover {
  opacity: 1;
}

.footer__logo {
  width: 48px;
  height: 48px;
  border-radius: 0;
  flex: none;
  grid-column: 1;
  grid-row: 2;
}

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-2xl);
}

.footer__bottom-main {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-sm);
}

.footer__legal {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer__legal .footer__legal-links {
  margin-top: 0;
}

.footer__legal-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

@media (min-width: 1000px) {
  .footer__nav {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
  }

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    gap: var(--spacing-lg);
  }

  .footer__bottom .footer__social {
    flex-basis: auto;
    margin-top: 0;
  }

  .footer__legal {
    align-items: flex-end;
    text-align: right;
  }
}

/* Mobile footer CTA: the desktop grid + row-form don't translate to a narrow
   column. Stack logo, title and form vertically, and reset the input's
   flex-basis (which becomes HEIGHT in the column-direction form, blowing the
   input up to 200px tall). */
@media (max-width: 767px) {
  .footer__bottom {
    margin-top: var(--spacing-xl);
  }
  .footer__bottom-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }
  .footer__logo {
    order: -1;
  }
  .cta-form--footer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    align-items: stretch;
  }
  .cta-form--footer .cta-form__input {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* ==========================================================================
   Language Switcher
   ========================================================================== */

.lang-switcher {
  display: flex;
  gap: 2px;
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 50px;
  padding: 4px;
  box-shadow: var(--shadow-md);
  z-index: 50;
}

.lang-switcher__btn {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-light);
  border-radius: 50px;
  transition: all var(--transition);
}

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

.lang-switcher__btn.active {
  background-color: var(--color-primary);
  color: var(--color-text);
}

/* ==========================================================================
   Pricing Page
   ========================================================================== */

/* Pricing Intro */
.pricing-intro {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
  color: var(--color-text);
}

.pricing-intro__title {
  font-family: var(--font-family);
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
}

/* Keep each highlighted phrase (e.g. "social content") on a single line. */
.pricing-intro__title .highlight {
  white-space: nowrap;
}

.pricing-intro__text {
  font-family: 'Roboto', sans-serif;
  font-size: calc(var(--font-size-base) * 1.15);
  font-weight: 500;
  line-height: 1.7;
  max-width: 400px;
}

@media (min-width: 768px) {
  .pricing-intro__text {
    font-size: calc(var(--font-size-lg) * 1.15);
  }
}

/* Hero 2-column layout */
.pricing-intro__layout {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Staggered media collage, shared by the home "why use it" row and the pricing
   hero aside: carousel (back) + landscape video (middle) + reel (front). */
.pq-media-collage { position: relative; flex: none; width: 450px; max-width: 100%; aspect-ratio: 3/2; }
.pq-mini { position: absolute; display: block; border-radius: 12px; overflow: hidden; border: 3px solid #fff;
  box-shadow: 0 12px 32px rgba(17,20,24,.2); background: #0a0a12; }
.pq-mini img, .pq-mini video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pq-mini--carousel { left: 2.2%; top: 4%; width: 38%; height: 57%; transform: rotate(-7deg); z-index: 1; }
.pq-mini--video { left: 14%; top: 33.4%; width: 72%; height: 64%; transform: rotate(5deg); z-index: 0; }
.pq-mini--reel { left: 66.6%; top: 6%; width: 30%; height: 86%; transform: rotate(2deg); z-index: 3; }
.pq-fbmini { position: relative; width: 100%; height: 100%; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.pq-fbmini-strip { flex: 1; min-height: 0; display: flex; gap: 4px; background: #000; }
.pq-fbmini-strip .c { flex: 0 0 65%; background-size: cover; background-position: center; }
.pq-fbmini-arrow { position: absolute; right: 6px; top: 32%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #1c1e21; font-size: 13px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pq-fbmini-dots { position: absolute; left: 50%; bottom: 37%; transform: translateX(-50%); display: flex; gap: 3px; }
.pq-fbmini-dots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.55); }
.pq-fbmini-dots i.on { background: #fff; }
.pq-fbmini-bar { flex: none; height: 34%; padding: 0 8px; display: flex; flex-direction: column; justify-content: center; gap: 4px; background: #fff; }
.pq-fbmini-bar .t { font-size: 8px; font-weight: 800; color: #1c1e21; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.pq-fbmini-bar .b { align-self: flex-start; font-size: 7px; font-weight: 700; color: #65676b; background: #e4e6eb; padding: 2px 7px; border-radius: 5px; }

/* Free-plan spotlight card, shared by the home end-of-section CTA and the
   pricing page (between the comparison and the FAQ). */
.pricing-freeplan { padding: var(--spacing-xl) 0; }
.pq-spot { --ink: #111418; --muted: #6b7280; --line: #ececef; --yellow: #ffff20;
  display: flex; align-items: stretch; max-width: 1140px; margin: 0 auto; background: #fff; border: 1px solid var(--line);
  border-radius: 26px; overflow: hidden; position: relative; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.pq-spot:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(17,20,24,.13); }
.pq-spot-img { flex: none; width: 60%; aspect-ratio: 1920/1082; object-fit: contain; display: block; background: #070710; }
.pq-spot-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 50px; }
.pq-spot-chip { position: absolute; top: 20px; left: 20px; z-index: 2; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); background: var(--yellow); padding: 5px 11px; border-radius: 999px; }
.pq-spot-title { display: block; font-size: 27px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; line-height: 1.25; margin-bottom: 12px; }
.pq-spot-desc { display: block; font-size: 16px; color: var(--muted); line-height: 1.55; margin-bottom: 20px; }
.pq-spot-more { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; color: var(--ink); }
.pq-spot-more svg { width: 16px; height: 16px; transition: transform .15s ease; }
.pq-spot:hover .pq-spot-more svg { transform: translateX(4px); }
@media (max-width: 760px) {
  .pq-spot { flex-direction: column; }
  .pq-spot-img { width: 100%; aspect-ratio: 16/9; }
  .pq-spot-body { padding: 30px 32px 34px; }
}
@media (max-width: 560px) {
  .pq-spot-body { padding: 24px 22px 28px; }
  .pq-spot-title { font-size: 22px; }
}

.pricing-intro__main {
  flex: 1;
  min-width: 0;
}

.pricing-intro__aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

@media (min-width: 1024px) {
  .pricing-intro__layout {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3xl);
  }

  .pricing-intro__aside {
    max-width: 432px;
  }
}

.pricing-intro__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-sm);
}

.pricing-intro__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: 'Roboto', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  border-radius: 999px;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.pricing-intro__btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ── Plan finder ─────────────────────────────────────────────────────────── */
/* No-commitment reassurance block (pause / cancel / upgrade anytime) */
.pricing-flex__box {
  margin: var(--spacing-xl) 0 0;
  text-align: center;
  background: #f0faf3;
  border: 1px solid #c6e7d1;
  border-radius: 18px;
  padding: var(--spacing-xl) var(--spacing-lg);
}
.pricing-flex__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--spacing-sm);
  border-radius: 999px;
  background: #22c55e;
  color: #fff;
}
.pricing-flex__icon svg { width: 26px; height: 26px; }
.pricing-flex__title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 var(--spacing-sm);
}
.pricing-flex__text {
  max-width: 620px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-size: 1.169rem;
  line-height: 1.6;
  color: #444444;
}
.pricing-flex__text strong { color: var(--color-text); font-weight: 800; }

.pricing-finder { padding: 4px 0 var(--spacing-2xl); }
.pf-box {
  background: #f4f4f6;
  border-radius: 26px;
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.pf-q {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--color-text);
}
.pf-num {
  display: inline-block;
  width: 2.3em;
  text-align: center;
  font: inherit;
  font-weight: 900;
  color: var(--color-text);
  background: #fff;
  border: 2px solid #e3e3e7;
  border-radius: 10px;
  padding: 1px 4px;
  margin: 0 2px;
}
.pf-slider { display: inline-flex; align-items: center; vertical-align: middle; width: 190px; max-width: 46vw; margin-left: 10px; }
.pf-slider input[type="range"] { width: 100%; accent-color: #000; cursor: pointer; }
.pf-result { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pf-rec {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.pf-plan { font-size: 30px; font-weight: 900; letter-spacing: -0.02em; color: var(--color-text); line-height: 1.1; }
.pf-plan-at { font-size: 16px; font-weight: 600; color: #6b7280; margin: 0 8px; }
.pf-plan-per { font-size: 16px; font-weight: 600; color: #6b7280; margin-left: 2px; }
.pf-note { font-size: 15px; color: #6b7280; }
.pf-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.pf-cta:hover { transform: translateY(-2px); opacity: 0.92; }
.pf-cta svg { width: 18px; height: 18px; }

/* Highlight the plan card the finder recommends, only while the finder is
   actively driving the choice (grid has --rec), so nothing stands out by default. */
.pricing-cards__grid--rec .pricing-card-wrapper--recommended .pricing-card {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* When the finder drives the choice: only the recommended plan stands out.
   The others dim, and Gold's static "featured" highlight is dropped so it no
   longer competes with the recommendation. */
.pricing-card-wrapper { transition: opacity 0.2s ease; }
.pricing-cards__grid--rec .pricing-card-wrapper:not(.pricing-card-wrapper--recommended) {
  opacity: 0.9;
}
.pricing-cards__grid--rec .pricing-card--featured {
  border: 1px solid var(--color-gray);
  box-shadow: var(--shadow-sm);
}

/* Monthly / yearly billing toggle above the plan cards */
.pricing-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 auto 40px;
}
.pt-switch {
  display: inline-flex;
  background: #eeeef0;
  border-radius: 999px;
  padding: 4px;
}
.pt-opt {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #6b7280;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pt-opt.is-active { background: #000; color: #fff; }
.pt-note { margin: 0; max-width: 560px; text-align: center; font-size: 16.8px; color: #1f2937; }

/* Hand-drawn "Save!" annotation pointing at the Yearly toggle. */
.pt-switch-wrap { position: relative; display: inline-flex; }
.pt-save {
  position: absolute;
  left: calc(100% - 18px);
  bottom: calc(100% - 14px);
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
  color: #3f7a1f;
}
.pt-save__arrow { width: 30px; height: 30px; flex: none; transform: rotate(18deg); }
.pt-save__txt {
  font-family: 'Bradley Hand', 'Snell Roundhand', 'Segoe Script', 'Ink Free', 'Brush Script MT', cursive;
  font-weight: 700;
  font-size: 28px;
  line-height: 0.95;
  color: #3f7a1f;
  -webkit-text-stroke: 0.6px currentColor;
  transform: rotate(-7deg);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .pt-save { left: calc(100% - 30px); bottom: calc(100% - 8px); }
  .pt-save__arrow { width: 24px; height: 24px; }
  .pt-save__txt { font-size: 17px; }
}

.pricing-intro__reassurance {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  color: #6b6b6b;
  margin: 0;
}

/* Human reassurance line (now lives inside hero aside) */
.pricing-human__line {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: 500;
}

.pricing-human__mobile-break {
  display: block;
}

.pricing-human__avatars {
  display: inline-flex;
}

.pricing-human__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: var(--color-gray);
  border: 2px solid var(--color-background);
  margin-left: -8px;
  display: inline-block;
  background-size: cover;
  background-position: center;
}

.pricing-human__avatar:first-child {
  margin-left: 0;
}

.pricing-human__dot {
  display: inline-block;
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0d9e6c;
  box-shadow: 0 0 0 3px rgba(13, 158, 108, 0.15);
}

/* Pricing Anchor */
.pricing-anchor {
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.pricing-anchor .section-label {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .pricing-intro {
    padding: var(--spacing-2xl) 0 var(--spacing-xl);
  }

  .pricing-intro__text {
    max-width: none;
  }

  .pricing-intro__aside {
    width: 100%;
  }

  .pricing-intro__cta {
    width: min(100%, 24rem);
    align-items: stretch;
  }

  .pricing-intro__btn {
    width: 100%;
    padding: 1rem 1.5rem;
    text-align: center;
  }

  .pricing-human__line {
    display: flex;
    width: min(100%, 24rem);
    align-items: center;
    flex-wrap: nowrap;
  }

  .pricing-human__line > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
}

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

.pricing-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (max-width: 899px) {
  .pricing-cards__grid {
    display: flex;
    flex-direction: column;
  }

  .pricing-card-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
  }
}

@media (min-width: 900px) {
  .pricing-cards__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

@media (min-width: 1200px) {
  .pricing-cards__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }
}

.pricing-card-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  position: relative;
  min-width: 0;
}

.pricing-card-wrapper--featured {
  padding-top: 0;
}

.pricing-card__popular-label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 0.35rem 1rem;
  white-space: nowrap;
  z-index: 1;
  border-radius: 0;
}

@media (max-width: 1199px) {
  .pricing-card__popular-label {
    max-width: calc(100% - 1.5rem);
    white-space: normal;
    line-height: 1.1;
    text-align: center;
  }

  .pricing-card__popular-label--value {
    max-width: min(10.5rem, calc(100% - 1.5rem));
  }
}

@media (min-width: 1200px) {
  .pricing-card-wrapper {
    max-width: none;
    margin: 0;
  }
}

.pricing-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 18px;
  padding: var(--spacing-lg);
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: var(--shadow-sm);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.pricing-card--featured {
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  box-shadow: var(--shadow-md);
}

/* The dark "chosen" border follows the pointer: hovering any plan card gives it
   the dark border, and Gold's default dark border steps back while a different
   card is hovered, so two cards never look chosen at the same time. */
.pricing-cards__grid--plans:not(.pricing-cards__grid--rec) .pricing-card:hover {
  border-color: var(--color-text);
  border-width: 2px;
}
.pricing-cards__grid--plans:not(.pricing-cards__grid--rec):has(.pricing-card-wrapper:not(.pricing-card-wrapper--featured):hover) .pricing-card--featured {
  border-color: var(--color-gray);
  border-width: 1px;
}

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

.pricing-card__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-3xl);
  font-weight: 700;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.pricing-card__amount {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
}

.pricing-card__vat {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.pricing-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.pricing-card__highlight {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-lg);
}

.pricing-card__highlight .highlight {
  border-bottom: none;
}

.pricing-card__credits {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-weight: bold;
}

.pricing-card__credits .highlight {
  background-color: transparent;
  border-bottom: none;
  padding: 0;
  background-image: url('../img/underline_yellow.png');
  background-repeat: no-repeat;
  background-position: bottom 0 center;
  background-size: 100% auto;
  padding-bottom: 10px;
  font-weight: 700;
  color: var(--color-text);
}

.pricing-card__bonus {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-light);
}

.pricing-card__bonus .highlight {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  background-color: transparent;
  border-bottom: none;
  padding: 0;
  background-image: url('../img/underline_yellow.png');
  background-repeat: no-repeat;
  background-position: bottom 0 center;
  background-size: 100% auto;
  padding-bottom: 6px;
}

.pricing-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: 500;
  margin-bottom: var(--spacing-lg);
}

.pricing-card__footer {
  display: none;
}

.pricing-card__btn {
  width: 100%;
  padding: 10px var(--spacing-lg);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pricing-cards__action {
  text-align: center;
  margin-top: var(--spacing-md);
}

.pricing-cards__action-btn {
  display: inline-block;
  margin: 0 auto;
  padding: 1rem 2.5rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 50px;
  background-color: var(--color-text);
  color: var(--color-background);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-cards__action-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Trust strip under the plan cards (buy-supporting reassurances) */
.pricing-trust {
  list-style: none;
  margin: 30px auto 0;
  padding: 0;
  max-width: 940px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
}
.pricing-trust li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Roboto', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #374151;
}
.pricing-trust svg {
  width: 19px;
  height: 19px;
  color: var(--color-text);
  stroke-width: 1.9;
  flex: none;
}

.pricing-cards__note {
  margin: var(--spacing-md) auto 0;
  max-width: 640px;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #6b6b6b;
}

/* Final CTA (pricing page) */
.pricing-final-cta {
  text-align: center;
}

.pricing-final-cta__btn {
  display: inline-block;
  margin-top: var(--spacing-lg);
  padding: 0.9rem 2.5rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50px;
  background-color: var(--color-primary);
  color: var(--color-text);
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-final-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pricing-final-cta__note {
  margin-top: var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  color: #6b6b6b;
}

/* Why Credits Section */
.why-credits {
  padding: var(--spacing-xl) 0;
}

.why-credits .section-label {
  margin-bottom: var(--spacing-md);
}

.why-credits__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
  max-width: 800px;
}

.why-credits__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  max-width: 800px;
  margin-bottom: var(--spacing-xl);
  color: var(--color-text);
}

.why-credits__list {
  list-style: none;
  max-width: 800px;
}

.why-credits__item {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
}

.why-credits__item strong {
  font-weight: 500;
  border-bottom: 3px solid var(--color-text);
}

@media (min-width: 768px) {
  .why-credits__title {
    font-size: var(--font-size-2xl);
  }
  .why-credits__text {
    font-size: var(--font-size-lg);
  }
  .why-credits__item {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-sm);
  }
}

/* Free re-renders reassurance banner */
.pricing-rerenders {
  padding: var(--spacing-md) 0 var(--spacing-lg);
}

.pricing-rerenders__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  background-color: #ecfdf5;
  border-left: 4px solid #0d9e6c;
  padding: var(--spacing-lg);
}

@media (min-width: 768px) {
  .pricing-rerenders__card {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
  }
}

.pricing-rerenders__icon {
  flex-shrink: 0;
  color: #0d9e6c;
}

.pricing-rerenders__text {
  flex: 1;
}

.pricing-rerenders__title {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: #065f46;
  margin-bottom: var(--spacing-xs);
}

.pricing-rerenders__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  color: #047857;
  line-height: 1.5;
  margin: 0;
}

/* Pricing card simplified body */
.pricing-card__videos {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--spacing-xs);
  color: var(--color-text);
}

.pricing-card__videos-count {
  background-image: url('../img/underline_yellow.png');
  background-repeat: no-repeat;
  background-position: center calc(100% - 3px);
  background-size: 100% auto;
  padding-bottom: 10px;
}

.pricing-card__videos-prefix {
  font-size: var(--font-size-base);
  font-weight: 500;
  vertical-align: middle;
  margin-right: 0.01em;
}

.pricing-card__per-video {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-light);
  margin-top: 0.2rem;
  margin-bottom: var(--spacing-md);
}

.pricing-card__per-video-prefix {
  font-size: var(--font-size-sm);
}

@media (max-width: 1199px) {
  .pricing-card-wrapper {
    max-width: none;
    margin: 0;
  }
}

@media (max-width: 767px) {

  .pricing-card {
    padding: var(--spacing-md);
  }

  .pricing-card__title {
    font-size: var(--font-size-2xl);
  }

  .pricing-card__videos {
    font-size: clamp(1.8rem, 8vw, var(--font-size-2xl));
  }

  .pricing-card__popular-label {
    font-size: var(--font-size-xs);
    padding: 0.3rem 0.75rem;
  }

  .pricing-card__popular-label--value {
    max-width: min(9.5rem, calc(100% - 1.5rem));
  }

  .pricing-card__footnote {
    line-height: 1.4;
  }
}

.pricing-intro__layout > *,
.pricing-rerenders__card > *,
.pricing-cards__grid > *,
.pricing-vs__grid > *,
.faq-support__grid > * {
  min-width: 0;
}

.pricing-human__line,
.pricing-rerenders__desc,
.pricing-cards__note,
.pricing-card__desc,
.pricing-card__footnote,
.why-credits__text,
.faq-support__text {
  overflow-wrap: anywhere;
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--spacing-md) 0;
}

.pricing-card__features li {
  position: relative;
  padding-left: 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.4;
  margin-bottom: 0.4rem;
  color: var(--color-text);
}

.pricing-card__features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 14px;
  height: 10px;
  border-left: 2px solid #0d9e6c;
  border-bottom: 2px solid #0d9e6c;
  transform: rotate(-45deg);
}

.pricing-card__features li strong {
  font-weight: 700;
}

.nowrap { white-space: nowrap; }

/* Keep plan+badge, price, per-video and video-count cells on one line (Social may wrap). */
.pricetable tbody td:nth-child(-n+4),
.pricetable thead th:nth-child(-n+4) {
  white-space: nowrap;
}

/* Small period badge next to a plan name in the pricing comparison table. */
.pt-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #6b7280;
  background: #f1f1f3;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Hover/focus tooltip explaining each included USP (keeps buyers on the page). */
.pricing-card__features li.pricing-card__feature--tip { cursor: help; outline: none; }
.pricing-card__features li.pricing-card__feature--tip .pcf-text {
  border-bottom: 1px dotted #b9bcc4;
}
.pcard-tip {
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 50;
  width: 250px;
  max-width: 78vw;
  background: #111418;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
}
.pcard-tip strong { color: #fff; font-weight: 700; }
.pcard-tip::after {
  content: '';
  position: absolute;
  left: 22px;
  top: 100%;
  border: 7px solid transparent;
  border-top-color: #111418;
}
.pricing-card__features li.pricing-card__feature--tip:hover .pcard-tip,
.pricing-card__features li.pricing-card__feature--tip:focus .pcard-tip,
.pricing-card__features li.pricing-card__feature--tip:focus-within .pcard-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 600px) {
  .pcard-tip { width: 220px; }
}

.pricing-card__cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.85rem 1.5rem;
  margin-top: auto;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pricing-card__cta--featured {
  background-color: var(--color-text);
  color: var(--color-background);
}

.pricing-card__footnote {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xs);
  color: #6b6b6b;
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-gray);
  font-weight: 400;
}

/* Subscription card: quota, properties, per-video, extra */
.pricing-card__quota {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: var(--spacing-xs);
}

.pricing-card__quota-videos {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.1;
}

.pricing-card__quota-period {
  font-size: var(--font-size-md);
  color: var(--color-text-light);
  font-weight: 500;
}

.pricing-card__properties {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: 0.15rem;
  margin-bottom: var(--spacing-sm);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-xs);
}

.pricing-card__per-video {
  position: relative;
  width: fit-content;
  font-family: 'Roboto', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-top: 0.45rem;
  padding-bottom: 4px;
}

/* hand-drawn scribble under the per-video price (double thickness vs the calculator) */
.pv-scribble {
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -10px;
  height: 20px;
  pointer-events: none;
}
.pv-scribble svg { display: block; width: 100%; height: 100%; overflow: visible; }
.pv-scribble path {
  fill: none;
  stroke: #3aa047;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-card__extra {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

/* Value props trio (pricing page) */
.pricing-value {
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.pricing-value__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .pricing-value__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
  }
}

.pricing-value__item {
  border-top: 3px solid var(--color-primary);
  padding-top: var(--spacing-sm);
}

.pricing-value__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-xs);
}

.pricing-value__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-light);
}

/* Single video (no subscription) block */
.pricing-single {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding: var(--spacing-lg);
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.pricing-single:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-text);
}

.pricing-single__lip {
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: var(--font-size-sm);
  padding: 0.35rem 1rem;
  white-space: nowrap;
  z-index: 1;
}

.pricing-single__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
}

@media (min-width: 768px) {
  .pricing-single__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.pricing-single__title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 30px;
}

.pricing-single__sub {
  font-size: 0.7em;
}

.pricing-single__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-light);
  max-width: 640px;
}

.pricing-single__features {
  margin-bottom: 0;
}

.pricing-single__cta {
  flex-shrink: 0;
  display: inline-block;
  white-space: nowrap;
  padding: 0.85rem 1.75rem;
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: 2px solid var(--color-text);
  border-radius: 50px;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}

.pricing-single__cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Comparison: Traditional vs Nanopixo */
.pricing-vs {
  padding: var(--spacing-2xl) 0;
  background-color: #fafafa;
}

.pricing-vs__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.pricing-vs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 900px) {
  .pricing-vs__title {
    font-size: var(--font-size-2xl);
  }
  .pricing-vs__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
  }
}

.pricing-vs__col {
  background-color: var(--color-background);
  border: 1px solid var(--color-gray);
  border-radius: 18px;
  padding: var(--spacing-lg);
}

.pricing-vs__col--nanopixo {
  border: 2px solid var(--color-text);
}

.pricing-vs__col-title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.pricing-vs__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pricing-vs__list li {
  position: relative;
  padding-left: 1.75rem;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.4;
  margin-bottom: var(--spacing-sm);
  color: var(--color-text);
}

.pricing-vs__list--negative li::before {
  content: '\00d7';
  position: absolute;
  left: 0;
  top: -0.05em;
  font-size: 1.4em;
  font-weight: 700;
  color: #c0392b;
  line-height: 1;
}

.pricing-vs__list--positive li::before {
  content: '';
  position: absolute;
  left: 0.1rem;
  top: 0.4em;
  width: 14px;
  height: 10px;
  border-left: 2px solid #0d9e6c;
  border-bottom: 2px solid #0d9e6c;
  transform: rotate(-45deg);
}

/* ==========================================================================
   Social Media Manager Page
   ========================================================================== */

/* Social Intro */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--spacing-xl) 0 0;
  transition: opacity var(--transition);
}

.back-link:hover {
  opacity: 0.6;
}

.social-intro {
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.social-intro__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.social-intro__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  max-width: 550px;
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .social-intro__title {
    font-size: var(--font-size-3xl);
  }

  .social-intro__text {
    font-size: var(--font-size-lg);
  }
}

/* Social Anchor */
.social-anchor {
  padding: var(--spacing-lg) 0 var(--spacing-md);
}

.social-anchor .section-label {
  margin-bottom: 0;
}

/* Why agencies use it (seller-attraction) */
.social-sellers {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-gray-light);
}

.social-sellers__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
  margin-top: var(--spacing-md);
  max-width: 720px;
}

.social-sellers__body {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  max-width: 720px;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

@media (min-width: 768px) {
  .social-sellers__title {
    font-size: var(--font-size-2xl);
  }

  .social-sellers__body {
    font-size: var(--font-size-lg);
  }
}

/* Social Platforms */
.social-platforms {
  padding: var(--spacing-xl) 0 var(--spacing-2xl);
}

.social-platforms__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-left: calc(24px + var(--spacing-sm));
}

@media (min-width: 768px) {
  .social-platforms__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
  }
}

@media (min-width: 1024px) {
  .social-platforms__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.social-platform {
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  padding: var(--spacing-lg);
  border-radius: 0;
  transition: transform var(--transition), box-shadow var(--transition);
}

.social-platform:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.social-platform__icon {
  margin-bottom: var(--spacing-md);
}

.social-platform__icon svg {
  width: 48px;
  height: 48px;
}

.social-platform__content {
  flex: 1;
}

.social-platform__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.social-platform__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: var(--spacing-md);
}

.social-platform__status {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.25rem 0.75rem;
  align-self: flex-start;
}

.social-platform__status--available {
  background-color: var(--color-primary);
  color: var(--color-text);
}

.social-platform__status--coming {
  background-color: var(--color-gray-light);
  color: var(--color-text-light);
}

.social-platform--muted {
  opacity: 0.6;
}

/* How It Works */
.social-how-it-works {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-background);
}

.social-how-it-works .section-label {
  margin-bottom: var(--spacing-xl);
}

.social-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-left: calc(24px + var(--spacing-sm));
}

@media (min-width: 768px) {
  .social-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .social-steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.social-step {
  text-align: left;
}

.social-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-primary);
  color: var(--color-text);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.social-step__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.social-step__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* Social Features */
.social-features {
  padding: var(--spacing-2xl) 0;
}

.social-features__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xl);
  margin-left: calc(24px + var(--spacing-sm));
}

@media (min-width: 768px) {
  .social-features__title {
    font-size: var(--font-size-2xl);
  }
}

.social-features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-left: calc(24px + var(--spacing-sm));
}

@media (min-width: 768px) {
  .social-features__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .social-features__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.social-feature {
  display: flex;
  gap: var(--spacing-md);
}

.social-feature__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.social-feature__img {
  width: 72px;
  height: auto;
}

.social-feature__content {
  flex: 1;
}

.social-feature__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.social-feature__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* Social Proof Page Variant */
.social-proof--page {
  padding: var(--spacing-2xl) 0;
  background-color: var(--color-background);
}

/* Social CTA */
.social-cta {
  padding: var(--spacing-2xl) 0;
  text-align: center;
  background-color: #f5f5f5;
}

.social-cta__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

@media (min-width: 768px) {
  .social-cta__title {
    font-size: var(--font-size-2xl);
  }
}

.social-cta__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
}

.social-cta__btn {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-xl);
  text-decoration: none;
  transition: background-color var(--transition), transform var(--transition);
}

.social-cta__btn:hover {
  background-color: #e6e600;
  transform: translateY(-2px);
}

/* Benefits Social Variant */
.benefits--social {
  background-color: var(--color-background);
}


/* FAQ & Support Section */
.faq-support {
  padding: var(--spacing-3xl) 0;
}

.faq-support__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 960px) {
  .faq-support__grid {
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-3xl);
  }
}

.faq-support__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.faq-support__human {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.faq-support__avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #ffd866 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.faq-support__avatar-initial {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.faq-support__avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #0d9e6c;
  border: 2px solid var(--color-background);
}

.faq-support__human-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.faq-support__human-name {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition);
  align-self: flex-start;
}

a.faq-support__human-name:hover {
  border-bottom-color: var(--color-text);
}

.faq-support__human-role {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.faq-support__title {

  padding: var(--spacing-xs) var(--spacing-md);
  background-color: var(--color-primary);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.faq-support__text {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  font-weight: 700;
}

.faq-support__btn {
  padding: var(--spacing-xs) var(--spacing-2xl);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.faq-support__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Accordion */
.accordion {
  margin-bottom: var(--spacing-xl);
}

.accordion__item {
  border-bottom: none;
}

.accordion__header {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-xs) 0;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 500;
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
  transition: color var(--transition);
  background: transparent;
  border: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

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

.accordion__icon {
  font-size: var(--font-size-xl);
  font-weight: 700;
  transition: transform var(--transition);
}

.accordion__icon::before {
  content: '+';
}

.accordion__item--open .accordion__icon::before {
  content: '−';
}

.accordion__item--open .accordion__icon {
  transform: none;
}

.accordion__content {
  display: none;
  padding-bottom: var(--spacing-xs);
  padding-left: var(--spacing-lg);
}

.accordion__item--open .accordion__content {
  display: block;
}

.accordion__content p {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.7;
}

/* Make inline links inside FAQ answers visibly clickable.
   The global `a { color: inherit; text-decoration: none }` reset would
   otherwise hide them inside the muted FAQ body copy. */
.accordion__content a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 500;
  transition: background-color var(--transition);
}

.accordion__content a:hover {
  background-color: var(--color-primary);
}

.faq-support__more-btn {
  padding: var(--spacing-xs) var(--spacing-xl);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.faq-support__more-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Active nav link */
.nav__link--active {
  opacity: 1;
  font-weight: 700;
}

/* ==========================================================================
   Help Page
   ========================================================================== */

/* Help Hero / Search Section */
.help-hero {
  padding: var(--spacing-3xl) 0 var(--spacing-2xl);
}

.help-hero__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.help-hero__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  max-width: 400px;
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
  .help-hero__title {
    font-size: var(--font-size-3xl);
  }

  .help-hero__text {
    font-size: var(--font-size-lg);
  }
}

@media (min-width: 1024px) {
  .help-hero__title {
    font-size: var(--font-size-3xl);
  }
}

/* How-to Guides Banner */
.howto-banner {
  padding: 0 0 var(--spacing-xl);
}

.howto-banner__card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) var(--spacing-xl);
  background-color: var(--color-gray-light);
  border-left: 6px solid var(--color-primary);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.howto-banner__card:hover {
  background-color: #f0f0f0;
  transform: translateX(2px);
}

.howto-banner__text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.howto-banner__eyebrow {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.howto-banner__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.howto-banner__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-light);
  margin: 0;
  max-width: 640px;
}

.howto-banner__cta {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  align-self: flex-start;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}

@media (min-width: 768px) {
  .howto-banner__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
  }

  .howto-banner__title {
    font-size: var(--font-size-2xl);
  }

  .howto-banner__cta {
    flex-shrink: 0;
    align-self: center;
  }
}

/* Help Search */
.help-search {
  max-width: 600px;
  margin: 0 auto;
}

.help-search__label {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
  padding-right: var(--spacing-sm);
}

.help-search__input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.help-search__input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.help-search__arrow-img {
  display: none;
  flex-shrink: 0;
  height: 28px;
  width: auto;
  padding-right: var(--spacing-sm);
}

@media (min-width: 768px) {
  .help-search__label {
    margin-bottom: 0;
  }

  .help-search__input-wrapper {
    flex-direction: row;
    align-items: center;
  }

  .help-search__arrow-img {
    display: block;
  }
}

.help-search__input-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex: 1;
}

.help-search__input {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  outline: none;
  transition: border-color var(--transition);
}

.help-search__input:focus {
  border-color: var(--color-primary);
}

.help-search__input::placeholder {
  color: var(--color-text-light);
}

.help-search__button {
  padding: var(--spacing-xs) var(--spacing-lg);
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-background);
  background-color: var(--color-text);
  border: none;
  border-radius: 16px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.help-search__button:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Search status & no results */
.help-search__status {
  margin-top: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.help-search__status-text {
  font-size: 0.95rem;
  color: var(--color-text);
  opacity: 0.7;
}

.help-search__clear {
  background: none;
  border: none;
  font-family: 'Roboto', sans-serif;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.help-search__no-results {
  margin-top: var(--spacing-xl);
  text-align: center;
}

.help-search__no-results-text {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
}

.help-search__no-results-contact {
  font-size: 0.95rem;
  opacity: 0.7;
  margin-bottom: var(--spacing-md);
}

.help-search__no-results-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.help-search__no-results-email a {
  color: var(--color-text);
  text-decoration: underline;
  font-weight: 500;
}

/* Popular Topics Section */
.popular-topics {
  padding: var(--spacing-lg) 0;
}

.popular-topics .section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
  flex-direction: row;
}

.popular-topics .section-label .section-label__arrow {
  order: -1;
}

.popular-topics .accordion {
  max-width: 700px;
  margin-bottom: var(--spacing-md);
  margin-left: calc(24px + var(--spacing-sm));
}

.popular-topics .btn {
  display: block;
  max-width: 200px;
  margin-left: calc(24px + var(--spacing-sm));
}

/* Help Accordion Variant - icon on left */
.accordion--help .accordion__header {
  flex-direction: row;
  justify-content: flex-start;
}

.accordion--help .accordion__icon {
  order: -1;
  margin-right: var(--spacing-sm);
}

/* Info Divider Section */
.help-info-divider {
  padding: var(--spacing-lg) 0;
  text-align: center;
}

.help-info-divider__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  color: var(--color-text-light);
  max-width: 700px;
  margin: 0 auto;
}

/* Support Options Section */
.support-options {
  padding: var(--spacing-lg) 0 var(--spacing-3xl);
}

.support-options__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .support-options__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .support-options__grid--three {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
  }
}

/* Support Card */
.support-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--spacing-xl);
  background-color: var(--color-gray-light);
  border-radius: 0;
}

.support-card__icon {
  width: 128px;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  color: var(--color-text);
}

.support-card__icon svg,
.support-card__icon img {
  width: 96px;
  height: 96px;
}

.support-card__icon--medium {
  width: 192px;
  height: 192px;
}

.support-card__icon--medium svg,
.support-card__icon--medium img {
  width: 144px;
  height: 144px;
}

.support-card__icon--large {
  width: min(320px, 100%);
  aspect-ratio: 1;
  height: auto;
}

.support-card__icon--large svg,
.support-card__icon--large img {
  width: 75%;
  height: auto;
  max-width: 240px;
}

.support-card__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-lg);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

.support-card__desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-lg);
  line-height: 1.6;
  max-width: 180px;
  text-align: left;
}

.support-card .btn {
  margin-top: auto;
}

/* General Button Styles */
.btn {
  display: inline-block;
  padding: 10px var(--spacing-lg);
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.btn--primary {
  color: var(--color-background);
  background-color: var(--color-text);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Contact / Support Form Page
   ========================================================================== */

/* Support Intro */
.support-intro {
  padding: var(--spacing-3xl) 0 var(--spacing-md);
}

.support-intro .container {
  max-width: calc(500px + var(--container-padding) * 2);
}

.support-intro__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
}

.support-intro__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .support-intro__title {
    font-size: var(--font-size-2xl);
  }

  .support-intro__text {
    font-size: var(--font-size-lg);
  }
}

.support-intro__email {
  color: var(--color-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Team Card */
.team-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--spacing-md);
}

.team-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card__role {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
}

.team-card__focus {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.team-card__bio {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-light);
  text-align: left;
  margin-bottom: var(--spacing-md);
}

.team-card__email {
  margin-top: auto;
  font-size: var(--font-size-sm);
}

.team-card__linkedin {
  display: inline-flex;
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
  transition: color var(--transition);
}

.team-card__linkedin:hover {
  color: #0A66C2;
}

.team-card__website {
  display: inline-flex;
  color: var(--color-text-light);
  margin-top: var(--spacing-sm);
  margin-left: var(--spacing-xs);
  transition: color var(--transition);
}

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

/* Team page, Nanopixo-style typography (matches blog/features) + wider layout */
.support-intro--team .container { max-width: calc(820px + var(--container-padding) * 2); }
.support-intro--team .support-intro__title {
  font-family: var(--font-family);
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(32px, 4.8vw, 48px);
  line-height: 1.08;
}
.support-intro--team .support-intro__text {
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.65;
  color: var(--color-text-light);
}
@media (min-width: 768px) {
  .support-intro--team .support-intro__text { font-size: 19px; }
  .support-intro--team .support-intro__title { font-size: clamp(36px, 4.8vw, 48px); }
}

/* Cards as wide as the features content, rounded, on-brand text weights */
.support-options__grid--three:has(.team-card) { max-width: var(--container-max-width); }
.team-card { border-radius: 18px; padding: var(--spacing-2xl) var(--spacing-xl); }
.team-card .support-card__title {
  font-family: var(--font-family);
  font-weight: 800;
  letter-spacing: -.01em;
  font-size: 23px;
  margin-bottom: 4px;
}
.team-card__role {
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.team-card__focus {
  font-family: var(--font-family);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--color-text);
  min-height: 2.8em;
}
.team-card__bio {
  font-family: var(--font-family);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-light);
  text-align: left;
}

/* Social/website icons side by side */
.team-card__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: var(--spacing-sm);
}
.team-card__links .team-card__linkedin,
.team-card__links .team-card__website {
  margin: 0;
}

/* Support Form Section */
.support-form-section {
  padding: var(--spacing-xl) 0 var(--spacing-3xl);
}

.support-form-section .container {
  max-width: calc(500px + var(--container-padding) * 2);
}

.support-form {
  width: 100%;
}

/* Form Group */
.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group--submit {
  margin-top: var(--spacing-lg);
  display: flex;
  justify-content: flex-end;
}

/* Honeypot - anti-spam hidden field */
input[name="_gotcha"] {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Form Label */
.form-label {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--spacing-xs);
}

/* Form Select */
.form-select {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23111' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md) center;
  padding-right: calc(var(--spacing-md) * 2 + 12px);
}

.form-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 32, 0.3);
}

/* Form Input */
.form-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 4px;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 32, 0.3);
}

.form-input::placeholder {
  color: var(--color-text-light);
}

.form-input:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
}

.form-input--error {
  border-color: #dc3545 !important;
}

/* Form Error Messages */
.form-error {
  display: none;
  font-size: var(--font-size-small);
  color: #dc3545;
  margin-top: var(--spacing-xs);
}

.form-input:invalid:not(:placeholder-shown) + .form-error,
.form-group.has-error .form-error {
  display: block;
}

/* Form Textarea */
.form-textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  resize: vertical;
  min-height: 150px;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 255, 32, 0.3);
}

.form-textarea::placeholder {
  color: var(--color-text-light);
}

/* File Upload */
.file-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.file-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.file-upload__button {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-background);
  border: 2px solid var(--color-text);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.file-upload__button:hover {
  background-color: var(--color-gray-light);
}

.file-upload__info {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* Large Button */
.btn--large {
  padding: var(--spacing-xs) var(--spacing-xl);
  font-size: var(--font-size-base);
}

/* Form Success Message */
.form-success {
  text-align: center;
  padding: var(--spacing-3xl) 0;
}

.form-success__icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--color-background);
  background-color: var(--color-text);
  border-radius: 50%;
}

.form-success__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  margin-bottom: var(--spacing-md);
}

.form-success__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-xl);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================== */
/* Features Page                              */
/* ========================================== */

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

.features-hero__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--spacing-lg);
}

.features-hero__text {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.7;
  max-width: 550px;
  color: var(--color-text-light);
}

@media (min-width: 768px) {
  .features-hero__title {
    font-size: var(--font-size-3xl);
  }

  .features-hero__text {
    font-size: var(--font-size-lg);
  }
}

/* Features Top Grid - 6 prominent cards */
.features-top {
  padding: var(--spacing-lg) 0;
}

.features-top__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
  .features-top__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-top__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Feature Card - Top variant */
.feature-card--top {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-lg);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.feature-card--top:hover {
  border-color: var(--color-primary, #ffff20);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.feature-card__icon {
  width: 120px;
  height: 120px;
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-card__img {
  width: 120px;
  height: auto;
}

.feature-card__title {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-base);
  font-weight: 700;
  margin-bottom: var(--spacing-xs);
}

.feature-card__desc {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
  flex: 1;
}

.feature-card__link {
  font-family: 'Roboto', sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-top: var(--spacing-md);
  color: inherit;
}

/* Features More Grid - smaller cards */
.features-more {
  padding: var(--spacing-lg) 0 var(--spacing-2xl);
}

.features-more__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

@media (min-width: 768px) {
  .features-more__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-more__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature-card--small {
  padding: var(--spacing-md);
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
  border-radius: 8px;
}

/* Coming soon variant */
.feature-card--coming {
  position: relative;
  opacity: 0.7;
}

.feature-card--coming:hover {
  opacity: 1;
}

.feature-card__badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  font-family: 'Roboto', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--color-primary, #ffff20);
  color: var(--color-text, #000);
}

.header-cta-btn {
  margin-left: 1rem;
  margin-right: 0.5rem;
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
}

@media (max-width: 1023px) {
  .header-cta-btn {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .pricing-intro .container,
  .pricing-anchor .container,
  .pricing-cards .container,
  .pricing-rerenders .container,
  .pricing-vs .container,
  .why-credits .container,
  .faq-support .container,
  .pricing-finder .container,
  .pricing-grow .container,
  .pricing-value .container,
  .pricing-freeplan .container,
  .newsletter .container,
  .footer .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}

@media (max-width: 360px) {
  .header__container {
    gap: 0.125rem;
  }

  .logo__img,
  .header--scrolled .logo__img {
    max-width: min(38vw, 112px);
  }
}

/* Footer social icon row (LinkedIn, Facebook, Instagram, YouTube)
   Sits inside .footer__brand which is flex+wrap, so force full-width
   to break onto its own line below the Privacy / Terms row. */
.footer__social {
  flex-basis: 100%;
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  align-items: center;
}

.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: inherit;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

.footer__social-link:hover {
  background-color: var(--color-primary);
  color: var(--color-text);
  transform: translateY(-1px);
}

.footer__social-link svg {
  width: 20px;
  height: 20px;
  display: block;
}


/* ---------------------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------------------- */

/* Skip to content: hidden until it takes keyboard focus (WCAG 2.4.1). */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 12px 20px;
  background-color: var(--color-text);
  color: var(--color-background);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* Honour the OS "reduce motion" setting: no marquees, no autoplaying loops,
   no scroll-triggered transitions. Videos keep their poster frame. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Autoplaying video is paused in JS (see js/app.js) so the poster frame
     stays visible; hiding the element here would leave an empty box. */
}

/* ==========================================================================
   Currency picker  (markup comes from js/currency.js)
   ==========================================================================
   One dropdown, two placements, because the currency list keeps growing and a
   flat row of options would widen the line it sits in every time one is added:
     .cur-select--inline  pricing.html, right of "Choose a plan that fits you"
     .cur-select--footer  under the legal links, on every page (dark, opens up)
   The options are filled from js/prices.js, so a new currency just appears. */

.cur-select {
  position: relative;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
}

.cur-select__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1.2;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.cur-select__caret {
  width: 12px;
  height: 12px;
  flex: none;
  transition: transform var(--transition);
}

.cur-select.is-open .cur-select__caret { transform: rotate(180deg); }

.cur-select__menu {
  position: absolute;
  z-index: 30;
  min-width: 100%;
  margin: 0.35rem 0 0;
  padding: 0.25rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.cur-select__menu[hidden] { display: none; }

.cur-select__opt {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 7px;
  padding: 0.4rem 0.6rem;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.2;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background var(--transition);
}

.cur-select__opt-sym {
  /* Fixed so the codes line up under each other. Wide enough for the longest
     symbol in js/prices.js (CA$); a one-character symbol just sits left in it. */
  width: 2.1em;
  flex: none;
  font-weight: 700;
}

.cur-select__opt-code { font-weight: 700; }
.cur-select__opt.active { font-weight: 700; }
.cur-select__opt-name { opacity: 0.6; }

/* Light placement: a quiet bordered pill on the page background. */
.cur-select--inline .cur-select__trigger {
  border-color: #d1d5db;
  color: var(--color-text);
}

.cur-select--inline .cur-select__trigger:hover { border-color: #9ca3af; }

.cur-select--inline .cur-select__menu {
  right: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.12);
  color: var(--color-text);
}

.cur-select--inline .cur-select__opt:hover { background: #f3f4f6; }
.cur-select--inline .cur-select__opt.active { background: #f3f4f6; }

/* Footer placement: light text on the dark footer, and the menu opens upwards
   because there is no room below it at the bottom of the page. */
.cur-select--footer .cur-select__trigger {
  padding-left: 0;
  font-weight: 400;
  opacity: 0.75;
}

.cur-select--footer .cur-select__trigger:hover,
.cur-select--footer.is-open .cur-select__trigger { opacity: 1; }

.cur-select--footer .cur-select__menu {
  left: 0;
  bottom: 100%;
  margin: 0 0 0.35rem;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  color: var(--color-background);
}

.cur-select--footer .cur-select__opt:hover { background: rgba(255, 255, 255, 0.1); }
.cur-select--footer .cur-select__opt.active { background: rgba(255, 255, 255, 0.1); }

.footer__currency { margin-top: 0.25rem; }

/* The "Choose a plan that fits you" row on pricing.html: label left, currency
   dropdown pushed to the right edge of the container. */
.pricing-anchor__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.pricing-anchor__currency {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pricing-anchor__currency-label {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}