/* Marketing Page Styles */
/* Brand Color Palette (from frontend/src/index.css):
 *   Primary: #0093b0 (teal blue - logo color)
 *   Primary Dark: #005f77
 *   Secondary: #84c6ab (mint green)
 *   Secondary Dark: #5fb08a
 *   Neutrals: #000000, #444444, #7a7a7a, #85919b
 */

/* ===== TYPOGRAPHY SYSTEM ===== */
/* Melior carries body copy (Charter behind it, purely as the script-coverage
 * fallback); Univers carries headings, buttons, and UI chrome;
 * Berkeley Mono carries code. */

/* Base Typography */
body {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Code is Berkeley Mono everywhere — the face the platform app itself runs on.
 * Without this, a <pre> or <code> inherits the body serif and renders code as
 * serif prose. Any page-level code block styling (background, padding, colors)
 * must leave font-family alone and inherit from here. */
pre,
code,
kbd,
samp {
    font-family: 'Berkeley Mono', 'IBM Plex Sans Thai', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Font Weight Classes */
.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }

/* Font Size Classes - Responsive Typography Scale */
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-5xl {
    font-size: 3rem;
    line-height: 1;
}
.text-6xl {
    font-size: 3.75rem;
    line-height: 1;
}

/* Responsive Typography */
@media (min-width: 640px) {
    .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .sm\:text-5xl { font-size: 3rem; line-height: 1; }
    .sm\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 768px) {
    .md\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .md\:text-5xl { font-size: 3rem; line-height: 1; }
    .md\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

@media (min-width: 1024px) {
    .lg\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .lg\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:text-5xl { font-size: 3rem; line-height: 1; }
    .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* Heading Styles with Univers Font */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin-bottom: 0.5em;
}

/* UI chrome in Univers. Bootstrap maps form controls to `font-family: inherit`
 * and leaves .btn/.nav-link unset, so both would otherwise inherit the body serif. */
.navbar,
.nav-link,
.dropdown-item,
.btn,
.badge,
.form-label,
button,
input,
select,
textarea,
optgroup {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}
h2 {
    font-size: 1.875rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}
h3 {
    font-size: 1.5rem;
    font-weight: 600;
}
h4 {
    font-size: 1.25rem;
    font-weight: 600;
}
h5 {
    font-size: 1.125rem;
    font-weight: 500;
}
h6 {
    font-size: 1rem;
    font-weight: 500;
}

/* Responsive Headings */
@media (min-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.875rem; }
}

@media (min-width: 1024px) {
    h1 { font-size: 3.75rem; }
    h2 { font-size: 3rem; }
    h3 { font-size: 2.25rem; }
}

/* Text Utilities */
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

.tracking-tighter { letter-spacing: -0.05em; }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0em; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }

/* ===== END TYPOGRAPHY SYSTEM ===== */

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #0093b0 0%, #005f77 100%);
    color: white;
    padding: 80px 0;
    text-align: center;
}

.hero-title {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.hero-subtitle {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.6;
}

.hero-cta {
    display: inline-block;
    background: linear-gradient(135deg, #84c6ab 0%, #5fb08a 100%);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(132, 198, 171, 0.3);
}

.hero-cta:hover {
    background: linear-gradient(135deg, #5fb08a 0%, #4a9470 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(132, 198, 171, 0.4);
    color: white;
    text-decoration: none;
}

/* Features Section */
.features-section {
    background: #f8f9fa;
    position: relative;
}

.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 147, 176, 0.02) 0%, rgba(132, 198, 171, 0.02) 100%);
    pointer-events: none;
}

/* Section Header */
.section-title {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.section-subtitle {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    color: #7a7a7a;
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Feature Cards */
.feature-card {
    background: white;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #0093b0 0%, #84c6ab 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Feature Images */
.feature-image-container {
    margin-bottom: 2rem;
    position: relative;
}

.feature-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.feature-card:hover .feature-image {
    transform: scale(1.05);
}

/* Feature Icon Wrapper (for icon-based features) */
.feature-icon-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0093b0 0%, #005f77 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    transition: transform 0.3s ease;
    box-shadow: 0 8px 25px rgba(0, 147, 176, 0.3);
}

.feature-card:hover .feature-icon-wrapper {
    transform: translateY(-5px) scale(1.05);
}

.feature-icon {
    font-size: 2.5rem;
    color: white;
}

/* Feature Content */
.feature-content {
    position: relative;
    z-index: 1;
}

.feature-title {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    color: #000000;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.feature-description {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    color: #7a7a7a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .features-section {
        padding: 3rem 0;
    }

    .feature-card {
        padding: 2rem 1.5rem;
        margin-bottom: 1.5rem;
    }

    .feature-image,
    .feature-icon-wrapper {
        width: 100px;
        height: 100px;
    }

    .feature-icon {
        font-size: 2rem;
    }

    .feature-title {
        font-size: 1.25rem;
    }

    .feature-description {
        font-size: 0.95rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .feature-card {
        padding: 1.5rem 1rem;
    }

    .feature-image,
    .feature-icon-wrapper {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }

    .feature-icon {
        font-size: 1.75rem;
    }
}

/* Demo Section */
.demo-section {
    padding: 80px 0;
    background: white;
}

.demo-form {
    background: #f8f9fa;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #444444;
    margin-bottom: 8px;
    display: block;
}

.form-control {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 400;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #0093b0;
    box-shadow: 0 0 0 3px rgba(0, 147, 176, 0.1);
}

.btn-primary {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: linear-gradient(135deg, #0093b0 0%, #005f77 100%);
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #007a94 0%, #004a5e 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 147, 176, 0.3);
}

/* Testimonials */
.testimonials-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0093b0 0%, #005f77 100%);
    color: white;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
}

.testimonial-text {
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
    font-weight: 400;
}

.testimonial-author {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600;
}

/* Pricing Section */
.pricing-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.pricing-card {
    background: white;
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.pricing-card.featured {
    border: 3px solid #0093b0;
    transform: scale(1.05);
}

.pricing-card.featured:hover {
    transform: scale(1.05) translateY(-5px);
}

.pricing-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #84c6ab 0%, #5fb08a 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-title {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000000;
    letter-spacing: -0.025em;
}

.pricing-price {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #0093b0;
    margin-bottom: 20px;
    letter-spacing: -0.025em;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.pricing-features li {
    padding: 8px 0;
    color: #444444;
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
}

.pricing-features li:before {
    content: "✓";
    color: #84c6ab;
    font-weight: bold;
    margin-right: 10px;
}

/* Newsletter Signup */
.newsletter-section {
    padding: 60px 0;
    background: #444444;
    color: white;
    text-align: center;
}

.newsletter-form {
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    gap: 15px;
}

.newsletter-input {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-family: 'Melior', 'Charter', 'IBM Plex Sans Thai', Georgia, 'Times New Roman', serif;
}

.newsletter-btn {
    background: linear-gradient(135deg, #84c6ab 0%, #5fb08a 100%);
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.newsletter-btn:hover {
    background: linear-gradient(135deg, #5fb08a 0%, #4a9470 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(132, 198, 171, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
        line-height: 1.1;
        letter-spacing: -0.025em;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .pricing-card.featured {
        transform: none;
    }
}

@media (min-width: 769px) {
    .hero-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4rem;
    }
}

/* Animation Classes */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Language switcher (marketing/templates/marketing/includes/language_switcher.html).
 *
 * One flag, collapsed. The earlier version put "EN | ไทย" inline in the navbar,
 * where two extra words sat at the same weight as the nav links and pulled the
 * eye away from them. As an icon it stays findable without competing.
 *
 * Flags come from an SVG sprite (includes/flag_sprite.html) rather than the
 * regional-indicator emoji, which Windows renders as the letters "US"/"TH".
 *
 * The menu is a Bootstrap dropdown -- 5.3's bundle is already loaded on both
 * base templates, so this adds no script and inherits its focus handling,
 * Escape-to-close and outside-click behaviour rather than reimplementing them.
 *
 * Univers, not the body serif: this is UI chrome. "ไทย" renders from IBM Plex
 * Sans Thai via unicode-range even on an English page, which is the point --
 * each language names itself in its own script.
 */
.flag-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.lang-switcher {
    display: inline-flex;
    align-items: center;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle[aria-expanded="true"] {
    background-color: rgba(0, 172, 193, 0.08);
    border-color: rgba(0, 172, 193, 0.25);
}

.lang-switcher__toggle:focus-visible {
    outline: 2px solid #00ACC1;
    outline-offset: 1px;
}

/* 4:3 rather than the flags' own 2:1 would distort them; the sprite viewBox is
   2:1 and this keeps it. */
.lang-switcher__flag {
    width: 20px;
    height: 10px;
    border-radius: 1px;
    /* A white flag on a white surface needs an edge to read as an object. */
    box-shadow: 0 0 0 1px rgba(45, 55, 72, 0.18);
    flex: none;
}

.lang-switcher__caret {
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid #718096;
}

/* The footer instance opens upward, so the caret has to agree with it. */
.dropup .lang-switcher__caret {
    border-top: 0;
    border-bottom: 4px solid #718096;
}

.lang-switcher__menu {
    min-width: 9rem;
    padding: 0.25rem;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(45, 55, 72, 0.12);
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8125rem;
}

.lang-switcher__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 4px;
    color: #4A5568;
}

.lang-switcher__option:hover,
.lang-switcher__option:focus-visible {
    background-color: rgba(0, 172, 193, 0.08);
    color: #00ACC1;
}

/* The current language stays selectable and is marked by weight, not by a
   disabled look -- graying it would read as "unavailable" rather than
   "you are here". */
.lang-switcher__option--active {
    color: #2D3748;
    font-weight: 600;
}


/* ===== TRUSTED-BY LOGO STRIP ===== */
/* Shared by the homepage and the pricing page through
   marketing/includes/trusted_strip.html. Two themes, because the row has to
   sit on the dark band under the homepage hero AND on the white surface
   between the pricing plan cards and the comparison table. */

.trusted-strip {
    padding: 22px 0;
}

/* Ten logos do not fit on one line, and left to the container width the wrap
   lands about 8/2 -- a full row and two stragglers. The cap forces the break
   after the fifth, which splits the set into rows of 674px and 677px. It is a
   max-width, not a width, so narrower viewports still reflow to three rows and
   more on their own. Keep it in step with the logo widths: adding a logo, or
   resizing one, moves where the break falls. */
.trusted-strip__row {
    column-gap: 2.5rem;
    row-gap: 1.75rem;
    max-width: 720px;
    margin-inline: auto;
}

/* Its own line above the logos. It used to sit inline in the row, which cost
   the row a logo's worth of width and made a wrap land in the middle of the
   set rather than between the label and the logos. */
.trusted-strip__label {
    font-family: 'Univers', 'IBM Plex Sans Thai', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    font-weight: 700;
    display: block;
    text-align: center;
    margin-bottom: 14px;
}

.trusted-strip__logo {
    height: var(--logo-h, 26px);
    width: auto;
}

/* Sizing comes from the TrustedLogo row, as custom properties, because no two
   source files are the same lockup: each ships its own transparent padding, so
   a single height would render half the set undersized and the other half
   oversized. Each logo is sized by its *visible* mark instead, and the number
   that achieves that is per-file data, not a rule. */

/* For a logo whose ink is a band stranded on an oversized canvas. Sized by
   height, the empty canvas rather than the logo decides how tall the row is,
   so the box is explicit and the canvas is cropped away. */
.trusted-strip__logo--cover {
    width: var(--logo-w);
    height: var(--logo-h);
    object-fit: cover;
}

/* Crops an export artifact -- a baked-in border frame -- off every edge. A
   percentage, so it stays correct at whatever size the logo renders. */
.trusted-strip__logo--inset {
    clip-path: inset(var(--logo-inset));
}

/* --- Rolling variant (homepage) --- */

/* Full-bleed rather than inside .container, so logos leave the viewport instead
   of stopping at a gutter, with the ends faded so they arrive and leave rather
   than pop. */
.trusted-strip__marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}

.trusted-strip__track {
    display: flex;
    width: max-content;
    animation: trusted-strip-roll 40s linear infinite;
}

.trusted-strip__set {
    display: flex;
    align-items: center;
}

/* The spacing has to be margin on each logo rather than a gap on the flex
   container. Two identical sets then measure exactly half the track each, so
   translating by -50% lands the second copy precisely where the first started
   and the loop has no seam. A container gap would leave one extra gap in the
   track and the row would jump every 40s. */
.trusted-strip--scroll .trusted-strip__logo {
    margin-right: 2.5rem;
}

@keyframes trusted-strip-roll {
    to { transform: translateX(-50%); }
}

/* Reading a logo is worth more than the motion, so pointing at the row stops
   it. */
.trusted-strip__marquee:hover .trusted-strip__track,
.trusted-strip__marquee:focus-within .trusted-strip__track {
    animation-play-state: paused;
}

/* Falls back to the same wrapped rows the pricing page uses. The duplicate set
   only exists to feed the loop, so it goes away with the animation rather than
   showing every customer twice. */
@media (prefers-reduced-motion: reduce) {
    .trusted-strip__marquee {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .trusted-strip__track {
        animation: none;
        width: auto;
    }

    .trusted-strip__set[aria-hidden="true"] {
        display: none;
    }

    .trusted-strip__set {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 1.75rem;
        max-width: 720px;
        margin-inline: auto;
    }
}

/* --- Dark theme (homepage, under the hero) --- */

/* A touch more room than the inline label needed, now that the row is two
   lines in this theme too. */
.trusted-strip--dark {
    background: #101826;
    padding: 30px 0;
}

.trusted-strip--dark .trusted-strip__label {
    color: #9fb0c8;
}

.trusted-strip--dark .trusted-strip__logo {
    opacity: 0.85;
}

/* brightness(0) flattens every color in the source to black, invert(1) then
   lifts it to white: one white silhouette regardless of what the file ships
   with. Which logos need it is a per-file judgement stored on the row -- most
   do, but the ones that already ship light (SONAR, Aldar) and the one opaque
   file (BBC) do not. A plain invert(1) is wrong here: it would turn Texas
   Health's blue orange. Alpha is untouched, so the canvas stays transparent. */
.trusted-strip--dark .trusted-strip__logo--dark-white {
    filter: brightness(0) invert(1);
}

/* --- Light theme (pricing, between the plan cards and the comparison table) --- */

/* A tinted band with hairlines, not bare logos on the page background. On white
   the row has nothing to hold it and reads as a preamble to the next section's
   heading instead of as its own piece of proof. */
.trusted-strip--light {
    padding: 40px 0;
    background: #F1F3F6;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
}

/* Full basis breaks the label onto its own line above the logos. The dark strip
   keeps it inline, where the band edge already frames the row. */
.trusted-strip--light .trusted-strip__label {
    color: #4A5568;
}

/* The shared opacity mutes the row so it supports the prices above it instead
   of competing with them. */
.trusted-strip--light .trusted-strip__logo {
    opacity: 0.78;
}

/* Mirror image of the dark theme: flatten each logo to a single black
   silhouette. */
.trusted-strip--light .trusted-strip__logo--light-black {
    filter: brightness(0);
}

/* .comparison-section deliberately carries no top padding -- it used to sit
   directly under the plan cards, whose py-5 supplied the gap. With the band
   between them there is nothing left, so its heading crowds the band's bottom
   edge. Restored only where the band actually precedes it; the FAQ that
   follows the band on the developer tab already has its own 80px. */
.trusted-strip--light + .comparison-section {
    padding-top: 72px;
}

/* For an opaque file -- one with no transparency, such as BBC's white boxes
   with black letters -- brightness(0) renders a solid black rectangle. An
   invert gives a dark shape consistent with the flattened logos beside it. */
.trusted-strip--light .trusted-strip__logo--light-invert {
    filter: invert(1);
}