/* ==========================================================================
   Orangina — hand-written theme stylesheet.

   Bold, single-accent orange system: one saturated orange carries every
   button, eyebrow, checkmark and full-bleed band; near-black is the only
   other strong colour, reserved for the footer and "dark" section variants.

   No build step, no framework: every value is a custom property so the
   dashboard can override the palette and the container width inline in the
   document head. Layout uses logical properties throughout, so the whole
   theme mirrors itself under dir="rtl".

   1.  Tokens
   2.  Base + accessibility
   3.  Layout primitives
   4.  Buttons
   5.  Header + navigation
   6.  Hero
   7.  Content blocks
   8.  Forms
   9.  Blog + article
   10. Footer
   11. Motion, RTL, responsive, print
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
    /* Palette — the layout re-declares primary/secondary from theme settings.
       Orangina is a one-accent system: --color-primary (orange) IS the brand
       colour — buttons, eyebrows, checkmarks, links and the full-bleed "dark"
       section bands all key off it. --color-secondary (near-black) exists
       only for the footer and text-on-dark contrast, not as a second hue. */
    --color-primary: #FF7A1E;
    --color-secondary: #0B0B10;
    --color-text-strong: #12100E;
    --color-text: #6B6560;
    --color-light: #FAF6F2;
    --color-white: #ffffff;
    --color-border: #ece5de;
    --color-border-hard: #ddd4ca;
    --color-overlay: #1a140e66;
    --color-neutral-fade: #9f9f9f4d;
    --color-dark: #17130f;
    --color-danger: #c62828;
    --color-success: #1b7a45;

    /* Derived tints. The static value is the fallback for engines without
       color-mix(); the second declaration wins everywhere else. */
    --color-primary-soft: rgba(255, 122, 30, 0.08);
    --color-primary-soft: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --color-primary-tint: rgba(255, 122, 30, 0.14);
    --color-primary-tint: color-mix(in srgb, var(--color-primary) 14%, transparent);
    --color-primary-strong: #d9600d;
    --color-primary-strong: color-mix(in srgb, var(--color-primary) 84%, #000);
    --color-secondary-soft: rgba(11, 11, 16, 0.06);
    --color-secondary-soft: color-mix(in srgb, var(--color-secondary) 6%, transparent);

    /* Warm orange-to-amber, not orange-to-black — reserved for small icon
       badges, so a "dark" section (which is already solid orange) never
       stacks a second gradient on top of itself. */
    --gradient-accent: linear-gradient(130deg, var(--color-primary) 0%, #FFB25E 100%);

    /* Shape, depth, motion */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-button: 25px;
    --radius-pill: 999px;
    --shadow: 0 40px 60px 0 rgb(0 0 0 / 5%);
    --shadow-soft: 0 18px 40px -24px rgb(0 0 0 / 22%);
    --shadow-header: 0 6px 24px -12px rgb(0 0 0 / 18%);
    --transition: all 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --transition-image: all 0.7s cubic-bezier(0.2, 1, 0.22, 1);

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
    --font-arabic: "Noto Sans Arabic", -apple-system, "Segoe UI", sans-serif;
    --font-body: var(--font-sans);

    --weight-heading: 700;
    --weight-subheading: 600;
    --weight-accent: 500;
    --weight-body: 400;

    --font-size-default: 14px;
    --font-size-paragraph: 16px;
    --font-size-menu: 16px;
    --line-height: 1.6;
    --line-height-paragraph: 1.75;
    --line-height-heading: 1.2;
    --line-height-display: 1.12;
    --letter-spacing: -0.027em;
    --letter-spacing-small: 0.04em;

    --size-h1: clamp(2.25rem, 1.35rem + 3.6vw, 3.75rem);
    --size-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --size-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
    --size-lead: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);

    /* Rhythm */
    --container: 1240px;
    --container-gutter: 20px;
    --section-spacing: 100px;
    --section-spacing-tight: 70px;
    --grid-gap: 30px;
    --column-gap: 20px;
    --content-spacing: 1.5em;
    --header-height: 70px;
    --component-height: 50px;
    --button-padding-inline: 25px;
    --logo-height: 32px;
}

html.is-arabic {
    --font-body: var(--font-arabic);
    --letter-spacing: 0;
}

/* 2. Base + accessibility ================================================ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-height) + 20px);
}

body {
    margin: 0;
    background-color: var(--color-white);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-paragraph);
    font-weight: var(--weight-body);
    line-height: var(--line-height-paragraph);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
}

body.is-nav-open {
    overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    color: var(--color-text-strong);
    font-weight: var(--weight-heading);
    letter-spacing: var(--letter-spacing);
    line-height: var(--line-height-heading);
}

/* Display type sits tighter than the copy around it. */
.hero__title,
.page-header__title,
.article__title {
    line-height: var(--line-height-display);
}

/* Small headings need the extra air back. */
.feature-card__title,
.step__title,
.plan__name,
.member__name,
.post-card__title,
.site-footer__title {
    line-height: 1.35;
}

p {
    margin: 0 0 1em;
}

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

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover,
a:focus-visible {
    color: var(--color-primary-strong);
}

img,
svg,
video,
iframe {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

button {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 16px;
    z-index: 100;
    padding: 12px 20px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-weight: var(--weight-accent);
    transition: var(--transition);
}

.skip-link:focus {
    inset-block-start: 16px;
    color: var(--color-white);
}

/* 3. Layout primitives =================================================== */

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

.container--content {
    max-width: min(var(--container), 920px);
}

.container--narrow {
    max-width: min(var(--container), 760px);
}

.section {
    padding-block: var(--section-spacing);
}

.section--tight {
    padding-block: var(--section-spacing-tight);
}

.section--flush-end {
    padding-block-end: 0;
}

.section--tint {
    background-color: var(--color-light);
}

.section--dark {
    background-color: var(--color-dark);
    color: rgba(255, 255, 255, 0.72);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-white);
}

.section__head {
    max-width: 720px;
    margin-inline: auto;
    margin-block-end: 50px;
    text-align: center;
}

.section__title {
    margin-block-end: 0.4em;
    font-size: var(--size-h2);
}

.section__lead {
    margin: 0;
    font-size: var(--size-lead);
    line-height: var(--line-height-paragraph);
}

.eyebrow {
    display: inline-block;
    margin: 0 0 14px;
    padding: 6px 14px;
    background: var(--color-primary-soft);
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
    letter-spacing: var(--letter-spacing-small);
    line-height: 1.4;
    text-transform: uppercase;
}

.spacer--sm { height: 30px; }
.spacer--md { height: 60px; }
.spacer--lg { height: 90px; }
.spacer--xl { height: 130px; }

.empty-state {
    padding: 60px 30px;
    border: 1px dashed var(--color-border-hard);
    border-radius: var(--radius);
    text-align: center;
}

.empty-state__title {
    margin-block-end: 0.4em;
    font-size: var(--size-h3);
}

.empty-state__text {
    margin: 0;
}

.alert {
    margin: 0 0 24px;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-paragraph);
}

.alert--success {
    background: rgba(27, 122, 69, 0.1);
    color: var(--color-success);
}

.alert--error {
    background: rgba(198, 40, 40, 0.08);
    color: var(--color-danger);
}

.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}

/* 4. Buttons ============================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--component-height);
    padding: 12px var(--button-padding-inline);
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-text-strong);
    font-size: var(--font-size-menu);
    font-weight: var(--weight-accent);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
}

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

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-primary-strong);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn--outline {
    border-color: var(--color-border-hard);
    color: var(--color-text-strong);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn--ghost {
    background: var(--color-white);
    border-color: var(--color-border);
    color: var(--color-text-strong);
    box-shadow: var(--shadow-soft);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

.btn--white:hover,
.btn--white:focus-visible {
    background: var(--color-light);
    color: var(--color-primary-strong);
}

.btn--ghost-light {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--color-white);
}

.btn--ghost-light:hover,
.btn--ghost-light:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
}

.btn--lg {
    min-height: 54px;
    padding-inline: 32px;
}

.btn--block {
    display: flex;
    width: 100%;
}

/* 5. Header + navigation ================================================= */

.site-header {
    position: relative;
    z-index: 50;
    background: var(--color-white);
    border-block-end: 1px solid var(--color-border);
    transition: var(--transition);
}

.site-header--sticky {
    position: sticky;
    inset-block-start: 0;
}

.site-header.is-scrolled {
    border-block-end-color: transparent;
    box-shadow: var(--shadow-header);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--column-gap);
    min-height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-strong);
    font-size: 1.125rem;
    font-weight: var(--weight-heading);
    letter-spacing: var(--letter-spacing);
    margin-inline-end: auto;
}

.brand:hover,
.brand:focus-visible {
    color: var(--color-text-strong);
}

.brand__logo {
    height: var(--logo-height);
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.brand__mark {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gradient-accent);
    flex: none;
}

.site-nav {
    display: block;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
    font-size: var(--font-size-menu);
    font-weight: var(--weight-accent);
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__item.is-current > .nav__link,
.nav__item.is-active-trail > .nav__link {
    color: var(--color-primary);
}

.nav__icon {
    line-height: 1;
}

.nav__chevron {
    transition: var(--transition);
}

.nav__submenu {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: 20;
    min-width: 220px;
    padding: 10px;
    margin: 0;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: var(--transition);
}

.nav__item:hover > .nav__submenu,
.nav__item:focus-within > .nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav__submenu .nav__link {
    width: 100%;
    min-height: 40px;
}

.nav__submenu .nav__submenu {
    inset-block-start: -10px;
    inset-inline-start: 100%;
}

.nav__item:hover > .nav__link .nav__chevron {
    transform: rotate(180deg);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang {
    position: relative;
}

.lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

.lang__toggle:hover {
    color: var(--color-primary);
}

.lang__code {
    letter-spacing: var(--letter-spacing-small);
}

.lang[open] .lang__chevron {
    transform: rotate(180deg);
}

.lang__menu {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    z-index: 30;
    min-width: 180px;
    padding: 8px;
    list-style: none;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.lang__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
    font-size: var(--font-size-default);
}

.lang__link:hover,
.lang__link:focus-visible {
    background: var(--color-light);
    color: var(--color-primary);
}

.lang__link.is-current {
    color: var(--color-primary);
    font-weight: var(--weight-subheading);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--color-text-strong);
    transition: var(--transition);
}

.nav-toggle__bars {
    position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
}

.nav-toggle__bars::before {
    inset-block-start: -6px;
}

.nav-toggle__bars::after {
    inset-block-start: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    inset-block-start: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    inset-block-start: 0;
    transform: rotate(-45deg);
}

.mobile-nav {
    display: none;
    border-block-start: 1px solid var(--color-border);
    background: var(--color-white);
    /* A fixed sheet filling everything below the header, rather than a panel
       that only grows as tall as its content allows. As an in-flow dropdown it
       was capped by max-height and the language list sat below the fold behind
       a scrollbar — present, but not obviously there.
       dvh, not vh: on mobile browsers vh is the tallest viewport (toolbars
       hidden), so the bottom of a 100vh sheet hides under the browser chrome.
       The vh line stays first as the fallback for engines without dvh. */
    position: fixed;
    inset-inline: 0;
    inset-block-start: var(--header-height);
    inset-block-end: 0;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    /* Keep momentum scrolling from chaining to the page behind the sheet. */
    overscroll-behavior: contain;
}

.mobile-nav__inner {
    padding-block: 20px 30px;
}

.mobile-nav__list {
    list-style: none;
    margin-block-end: 20px;
}

.mobile-nav__list .nav__link {
    width: 100%;
    min-height: 48px;
    padding-inline: 0;
    border-block-end: 1px solid var(--color-border);
    border-radius: 0;
}

.mobile-nav__list .nav__submenu {
    position: static;
    min-width: 0;
    padding: 0;
    margin-inline-start: 16px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Collapsed branches are genuinely removed from the flow via [hidden], not
   just faded — the point is to shorten the list, and a visually-hidden row
   still takes space and is still reachable by a screen reader. */
.mobile-nav__list .nav__submenu[hidden] {
    display: none;
}

/* The parent row becomes link + disclosure button side by side. */
.mobile-nav__list .nav__item--has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.mobile-nav__list .nav__item--has-children > .nav__submenu {
    grid-column: 1 / -1;
}

.nav__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px square: the chevron sits next to a link, so it needs to be an
       unambiguous tap target of its own rather than a sliver of the row. */
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    cursor: pointer;
    transition: var(--transition);
}

.nav__disclosure:hover,
.nav__disclosure:focus-visible {
    color: var(--color-primary);
}

.nav__disclosure .nav__chevron {
    transition: transform var(--transition);
}

.nav__disclosure[aria-expanded="true"] .nav__chevron {
    transform: rotate(180deg);
}

.mobile-nav__list .nav__chevron {
    margin-inline-start: auto;
}

.mobile-nav__actions {
    display: grid;
    gap: 16px;
    justify-items: stretch;
}

/* Mobile language picker — a flat, always-visible list rather than the
   desktop dropdown. See partials/language-switcher.blade.php: an
   absolutely-positioned panel is clipped by this sheet's own overflow, which
   is what pushed the languages off-screen. Everything here stays in flow. */
.mobile-lang {
    padding-block-start: 4px;
}

.mobile-lang__label {
    display: block;
    margin-block-end: 10px;
    color: var(--color-text);
    font-size: var(--font-size-default);
    font-weight: var(--weight-subheading);
    letter-spacing: var(--letter-spacing-small);
    text-transform: uppercase;
}

.mobile-lang__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-lang__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* 48px: comfortably past the 44px minimum tap target. */
    min-height: 48px;
    padding-inline: 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: var(--font-size-paragraph);
    font-weight: var(--weight-accent);
    text-align: start;
    transition: var(--transition);
}

.mobile-lang__link:hover,
.mobile-lang__link:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.mobile-lang__link.is-current {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.mobile-lang__code {
    flex: none;
    opacity: 0.65;
    font-size: var(--font-size-default);
    font-variant-numeric: tabular-nums;
}

/* 6. Hero ================================================================ */

.hero {
    position: relative;
    padding-block: clamp(60px, 7vw, 110px) var(--section-spacing);
    overflow: hidden;
}

/* "dark" here means the full-bleed brand-colour band (the reference site's
   "Synchronisation" section) — Orangina has one strong colour, and this is
   it, not a near-black variant. */
.hero--dark {
    background: var(--color-primary);
}

.hero--dark .hero__title {
    color: var(--color-white);
}

.hero--dark .hero__lead,
.hero--dark .hero__trust-list {
    color: rgba(255, 255, 255, 0.85);
}

.hero--dark .eyebrow {
    color: var(--color-white);
    opacity: 0.85;
}

/* A primary button is invisible on its own colour — swap it to white. */
.hero--dark .btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.hero--dark .btn--ghost {
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-white);
}

.hero--gradient {
    background: linear-gradient(180deg, var(--color-light) 0%, var(--color-white) 100%);
}

.hero__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.hero__blob {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.55;
}

.hero__blob--one {
    inset-block-start: -140px;
    inset-inline-start: -120px;
    width: 460px;
    height: 460px;
    background: var(--color-primary-tint);
}

.hero__blob--two {
    inset-block-start: -60px;
    inset-inline-end: -160px;
    width: 420px;
    height: 420px;
    background: var(--color-secondary-soft);
}

.hero__blob--three {
    inset-block-end: -220px;
    inset-inline-start: 30%;
    width: 520px;
    height: 380px;
    background: var(--color-primary-soft);
}

.hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: var(--grid-gap);
    align-items: center;
}

.hero--center .hero__inner {
    justify-items: center;
    text-align: center;
}

.hero--center .hero__content {
    max-width: 760px;
}

.hero--center .hero__actions,
.hero--center .hero__trust {
    justify-content: center;
}

.hero--center .hero__media {
    width: 100%;
    max-width: 980px;
    margin-block-start: 20px;
}

.hero--split .hero__inner {
    grid-template-columns: minmax(0, 1fr);
}

.hero__title {
    margin-block-end: 0.35em;
    font-size: var(--size-h1);
}

.hero__lead {
    max-width: 620px;
    margin-block-end: 32px;
    font-size: var(--size-lead);
}

.hero--center .hero__lead {
    margin-inline: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-block-end: 32px;
}

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.avatars {
    display: inline-flex;
    align-items: center;
    flex: none;
}

.avatars__item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid var(--color-white);
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

.avatars__item + .avatars__item {
    margin-inline-start: -14px;
}

.avatars__item--a { background: var(--color-primary); }
.avatars__item--b { background: var(--color-secondary); }
.avatars__item--c { background: var(--gradient-accent); }
.avatars__item--d { background: var(--color-text-strong); }

.hero__trust-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    list-style: none;
    font-size: var(--font-size-default);
    line-height: 1.5;
}

.hero__trust-list li {
    position: relative;
    padding-inline-start: 18px;
}

.hero__trust-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradient-accent);
}

.hero__media {
    position: relative;
    margin: 0;
}

.hero__media img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transition: var(--transition-image);
}

/* 7. Content blocks ====================================================== */

/* Logo strip */
.logo-strip__heading {
    margin-block-end: 30px;
    text-align: center;
    font-size: var(--font-size-default);
    letter-spacing: var(--letter-spacing-small);
    text-transform: uppercase;
}

.logo-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px 50px;
    list-style: none;
}

.logo-strip__item img {
    max-height: 40px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.65;
    transition: var(--transition);
}

.logo-strip__item:hover img {
    filter: none;
    opacity: 1;
}

/* Features grid */
.features__grid {
    display: grid;
    gap: var(--grid-gap);
    list-style: none;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.feature-card {
    padding: 34px 30px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: var(--transition);
}

.feature-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.feature-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-block-end: 22px;
    border-radius: var(--radius);
    background: var(--gradient-accent);
    color: var(--color-white);
}

.feature-card__title {
    margin-block-end: 0.5em;
    font-size: var(--size-h3);
}

.feature-card__text {
    margin: 0;
}

/* Feature split — the full-bleed orange band, same reasoning as .hero--dark. */
.split--dark {
    background: var(--color-primary);
}

.split--dark .eyebrow {
    color: var(--color-white);
    opacity: 0.85;
}

.split--dark .split__title {
    color: var(--color-white);
}

.split--dark .split__text,
.split--dark .bullets {
    color: rgba(255, 255, 255, 0.85);
}

.split--dark .bullets__mark {
    color: var(--color-white);
}

.split--dark .btn--primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.split--gradient {
    background: linear-gradient(180deg, var(--color-light) 0%, var(--color-white) 100%);
}

.split__inner {
    display: grid;
    gap: var(--grid-gap);
    align-items: center;
}

.split__title {
    font-size: var(--size-h2);
}

.split__text {
    font-size: var(--size-lead);
}

.split__actions {
    margin: 30px 0 0;
}

.bullets {
    display: grid;
    gap: 14px;
    margin-block-start: 26px;
    list-style: none;
}

.bullets__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: var(--line-height);
}

.bullets__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    margin-block-start: 2px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.split__media {
    position: relative;
    margin: 0;
}

.split__media img {
    width: 100%;
    border-radius: var(--radius);
    transition: var(--transition-image);
}

.split__glow {
    position: absolute;
    inset-block-start: -40px;
    inset-inline-end: -40px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--color-primary-tint);
    filter: blur(60px);
    z-index: -1;
}

/* Stats */
.stats__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 0;
}

.stat {
    padding: 30px 24px;
    background: var(--color-light);
    border-radius: var(--radius);
    text-align: center;
}

.stat__body {
    margin: 0;
    display: grid;
    gap: 8px;
}

.stat__value {
    color: var(--color-text-strong);
    font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
    font-weight: var(--weight-heading);
    letter-spacing: var(--letter-spacing);
    line-height: 1.1;
}

.stat__suffix {
    color: var(--color-primary);
}

.stat__label {
    font-size: var(--font-size-default);
}

/* Steps */
.steps__list {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    list-style: none;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 32px 28px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.step__number {
    display: inline-block;
    margin-block-end: 16px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 1.75rem;
    font-weight: var(--weight-heading);
    letter-spacing: var(--letter-spacing);
}

.step__title {
    margin-block-end: 0.4em;
    font-size: var(--size-h3);
}

.step__text {
    margin: 0;
}

/* Pricing */
.pricing__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: stretch;
    list-style: none;
    max-width: 1100px;
    margin-inline: auto;
}

.pricing__grid--1 {
    max-width: 460px;
}

.pricing__grid--2 {
    max-width: 820px;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 38px 32px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: var(--transition);
}

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

.plan--featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

.plan__badge {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-start: 32px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-secondary);
    color: var(--color-white);
    font-size: 12px;
    font-weight: var(--weight-subheading);
    letter-spacing: var(--letter-spacing-small);
    text-transform: uppercase;
}

.plan__name {
    margin-block-end: 0.3em;
    font-size: var(--size-h3);
}

.plan__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin-block-end: 14px;
    color: var(--color-text-strong);
}

.plan__currency {
    font-size: 1.125rem;
    font-weight: var(--weight-subheading);
}

.plan__amount {
    font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem);
    font-weight: var(--weight-heading);
    letter-spacing: var(--letter-spacing);
    line-height: 1.1;
}

.plan__period {
    color: var(--color-text);
    font-size: var(--font-size-default);
    font-weight: var(--weight-body);
}

.plan__description {
    margin-block-end: 22px;
}

.plan__features {
    display: grid;
    gap: 12px;
    margin-block-end: 30px;
    list-style: none;
    font-size: var(--font-size-default);
    line-height: var(--line-height);
}

.plan__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.plan__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.plan__cta {
    margin-block-start: auto;
}

/* FAQ */
.faq__list {
    display: grid;
    gap: 14px;
}

.faq__item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.faq__item[open] {
    border-color: transparent;
    box-shadow: var(--shadow);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 60px;
    padding: 18px 24px;
    color: var(--color-text-strong);
    font-size: var(--font-size-menu);
    font-weight: var(--weight-subheading);
    line-height: var(--line-height);
    cursor: pointer;
    list-style: none;
}

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

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

.faq__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-light);
    color: var(--color-primary);
    transition: var(--transition);
}

.faq__item[open] .faq__icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: rotate(45deg);
}

.faq__answer {
    padding: 0 24px 22px;
}

.faq__answer p {
    margin: 0;
}

/* Testimonials */
.testimonials__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    list-style: none;
}

.testimonial {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 30px;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.testimonial__rating {
    display: flex;
    gap: 2px;
    margin: 0;
    color: var(--color-border-hard);
}

.testimonial__rating .is-on {
    color: var(--color-secondary);
}

.testimonial__quote {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--size-lead);
    font-weight: var(--weight-body);
    line-height: var(--line-height-paragraph);
}

.testimonial__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-start: auto;
}

.testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: var(--color-white);
    font-weight: var(--weight-subheading);
    overflow: hidden;
}

.testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial__identity {
    display: grid;
    gap: 2px;
}

.testimonial__name {
    color: var(--color-text-strong);
    font-weight: var(--weight-subheading);
}

.testimonial__role {
    font-size: var(--font-size-default);
}

/* CTA banner */
.cta__band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--grid-gap);
    padding: clamp(36px, 5vw, 60px);
    border-radius: var(--radius);
}

.cta__band--solid {
    background: var(--gradient-accent);
    color: rgba(255, 255, 255, 0.86);
}

.cta__band--solid .cta__title {
    color: var(--color-white);
}

.cta__band--dark {
    background: var(--color-dark);
    color: rgba(255, 255, 255, 0.72);
}

.cta__band--dark .cta__title {
    color: var(--color-white);
}

.cta__band--soft {
    background: var(--color-light);
}

.cta__copy {
    max-width: 620px;
}

.cta__title {
    margin-block-end: 0.35em;
    font-size: var(--size-h2);
}

.cta__text {
    margin: 0;
    font-size: var(--size-lead);
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* CTA banner — optional background image, gradient, and side image */
.cta__band--bgimage { position: relative; overflow: hidden; color: rgba(255, 255, 255, 0.92); }
.cta__band--bgimage .cta__title { color: var(--color-white); }
.cta__backdrop { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.cta__backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 13, 19, 0.35), rgba(11, 13, 19, 0.72));
}
.cta__band--bgimage > * { position: relative; z-index: 1; }

.cta__band--split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.cta__band--image-start { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cta__band--image-start .cta__media { order: -1; }
.cta__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 26rem;
    object-fit: cover;
    border-radius: calc(var(--radius) - 6px);
}
@media (max-width: 900px) {
    .cta__band--split,
    .cta__band--image-start { grid-template-columns: 1fr; }
    .cta__band--image-start .cta__media { order: 0; }
}

.cta__band--grad-primary { background: linear-gradient(135deg, #1e3a8a, #2563eb) !important; }
.cta__band--grad-sunset { background: linear-gradient(135deg, #7c2d12, #e11d48 55%, #f59e0b) !important; }
.cta__band--grad-ocean { background: linear-gradient(135deg, #0c4a6e, #0369a1 55%, #22d3ee) !important; }

/* Comparison table */
.comparison__table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    background: var(--color-white);
    font-size: var(--font-size-default);
    text-align: start;
}

.comparison__table th,
.comparison__table td {
    padding: 16px 20px;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
    vertical-align: middle;
}

.comparison__table thead th {
    background: var(--color-light);
    color: var(--color-text-strong);
    font-weight: var(--weight-subheading);
    white-space: nowrap;
}

.comparison__table thead th:first-child {
    border-start-start-radius: var(--radius);
}

.comparison__table thead th:last-child {
    border-start-end-radius: var(--radius);
}

.comparison__table tbody th {
    color: var(--color-text-strong);
    font-weight: var(--weight-accent);
}

.comparison__table .is-highlight {
    background: var(--color-primary-soft);
}

.comparison__yes,
.comparison__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.comparison__yes {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.comparison__no {
    background: var(--color-light);
    color: var(--color-border-hard);
}

/* Gallery */
.gallery__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    list-style: none;
}

.gallery__item figure {
    margin: 0;
}

.gallery__item img {
    width: 100%;
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: var(--transition-image);
}

.gallery__item:hover img {
    transform: translateY(-4px);
}

.gallery__item figcaption {
    margin-block-start: 12px;
    font-size: var(--font-size-default);
}

/* Video */
.video__frame {
    position: relative;
    margin: 0;
}

.video__frame iframe,
.video__player,
.video__facade {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    background: var(--color-dark);
}

.video__facade {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.video__facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.video__facade:hover .video__play {
    transform: translate(-50%, -50%) scale(1.06);
}

.video__caption {
    margin-block-start: 14px;
    font-size: var(--font-size-default);
    text-align: center;
}

/* Team */
.team__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    list-style: none;
}

.member {
    padding: 30px 26px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
}

.member__photo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    margin-block-end: 18px;
    border-radius: 50%;
    background: var(--gradient-accent);
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: var(--weight-heading);
    overflow: hidden;
}

.member__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member__name {
    margin-block-end: 0.25em;
    font-size: var(--size-h3);
}

.member__role {
    margin-block-end: 0.75em;
    color: var(--color-primary);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
}

.member__bio {
    margin: 0;
    font-size: var(--font-size-default);
}

/* Contact */
.contact__layout {
    display: grid;
    gap: var(--grid-gap);
    align-items: start;
}

.contact__intro .section__title,
.contact__intro .section__lead {
    text-align: start;
}

.contact__details {
    display: grid;
    gap: 18px;
    margin-block-start: 30px;
    list-style: none;
}

.contact__detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact__detail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.contact__detail-body {
    display: grid;
    gap: 2px;
}

.contact__detail-label {
    font-size: var(--font-size-default);
    letter-spacing: var(--letter-spacing-small);
    text-transform: uppercase;
}

.contact__detail-value {
    color: var(--color-text-strong);
    font-weight: var(--weight-accent);
}

a.contact__detail-value:hover {
    color: var(--color-primary);
}

.contact__panel {
    padding: clamp(24px, 4vw, 40px);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* Rich text / prose */
.prose {
    color: var(--color-text);
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height-paragraph);
}

.prose > * + * {
    margin-block-start: var(--content-spacing);
}

.prose h2 {
    font-size: var(--size-h2);
}

.prose h3 {
    font-size: var(--size-h3);
}

.prose ul,
.prose ol {
    padding-inline-start: 1.4em;
}

.prose li + li {
    margin-block-start: 0.5em;
}

.prose img {
    border-radius: var(--radius);
}

.prose blockquote {
    margin: 0;
    padding-inline-start: 24px;
    border-inline-start: 3px solid var(--color-primary);
    color: var(--color-text-strong);
    font-size: var(--size-lead);
}

.prose code {
    padding: 2px 6px;
    background: var(--color-light);
    border-radius: 4px;
    font-size: 0.9em;
}

.prose pre {
    padding: 20px;
    background: var(--color-light);
    border-radius: var(--radius);
    overflow-x: auto;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
}

.prose th,
.prose td {
    padding: 12px 16px;
    border-block-end: 1px solid var(--color-border);
    text-align: start;
}

.prose--empty {
    color: var(--color-text);
}

.custom-html :where(img, iframe, video) {
    max-width: 100%;
}

/* 8. Forms =============================================================== */

.form {
    display: grid;
    gap: 18px;
}

.form__row {
    display: grid;
    gap: 18px;
}

.form__field {
    display: grid;
    gap: 8px;
}

.form__label {
    color: var(--color-text-strong);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
}

.form__required {
    margin-inline-start: 3px;
    color: var(--color-secondary);
}

.form__control {
    width: 100%;
    min-height: var(--component-height);
    padding: 12px 16px;
    border: 1px solid var(--color-border-hard);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-family: inherit;
    font-size: var(--font-size-paragraph);
    line-height: var(--line-height);
    transition: var(--transition);
}

.form__control::placeholder {
    color: var(--color-text);
    opacity: 0.7;
}

.form__control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.form__control--textarea {
    min-height: 140px;
    resize: vertical;
}

.form__control.is-invalid {
    border-color: var(--color-danger);
}

.form__error {
    margin: 0;
    color: var(--color-danger);
    font-size: var(--font-size-default);
}

.form__honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* 9. Blog + article ====================================================== */

.page-header {
    text-align: center;
}

.page--blog-post .page-header,
.article__header {
    text-align: start;
}

.page-header__title {
    margin-block-end: 0.35em;
    font-size: var(--size-h1);
}

.page-header__lead {
    max-width: 680px;
    margin-inline: auto;
    margin-block-end: 0;
    font-size: var(--size-lead);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
}

.chip:hover,
.chip:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.chip.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.post-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.post-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
}

.post-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow);
    transform: translateY(-4px);
}

.post-card__link {
    display: block;
    color: inherit;
    height: 100%;
}

.post-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-light);
    overflow: hidden;
}

.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-image);
}

.post-card:hover .post-card__media img {
    transform: scale(1.03);
}

.post-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--gradient-accent);
    opacity: 0.14;
}

.post-card__badge {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-start: 14px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-white);
    color: var(--color-text-strong);
    font-size: 12px;
    font-weight: var(--weight-accent);
}

.post-card__body {
    padding: 26px 24px 30px;
}

.post-card__meta {
    margin-block-end: 10px;
    font-size: var(--font-size-default);
    letter-spacing: var(--letter-spacing-small);
    text-transform: uppercase;
}

.post-card__title {
    margin-block-end: 0.5em;
    font-size: var(--size-h3);
}

.post-card__excerpt {
    margin-block-end: 1em;
    font-size: var(--font-size-default);
}

.post-card__more {
    color: var(--color-primary);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
}

.post-grid--featured {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.post-card--featured .post-card__media {
    aspect-ratio: 3 / 2;
}

/* A lone featured post reads better side by side than as one huge image. */
@media (min-width: 768px) {
    .post-grid--featured .post-card--featured:only-child .post-card__link {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .post-grid--featured .post-card--featured:only-child .post-card__media {
        aspect-ratio: 16 / 10;
        height: 100%;
    }

    .post-grid--featured .post-card--featured:only-child .post-card__body {
        align-self: center;
        padding: 34px 36px;
    }

    .post-grid--featured .post-card--featured:only-child .post-card__title {
        font-size: var(--size-h2);
        line-height: var(--line-height-heading);
    }
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-block-start: 50px;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-strong);
    font-size: var(--font-size-default);
    font-weight: var(--weight-accent);
}

.pagination__link:hover,
.pagination__link:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.pagination__link.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-end: 20px;
    font-size: var(--font-size-default);
}

.breadcrumb a {
    color: var(--color-text);
}

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

.article__title {
    font-size: var(--size-h1);
}

.article__lead {
    max-width: 680px;
    font-size: var(--size-lead);
}

.article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: var(--font-size-default);
}

.article__cover {
    margin: 0 0 10px;
}

.article__cover img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* 10. Footer ============================================================= */

/* Orangina's footer is always dark — the one place --color-dark (near-black,
   not the brand orange) is used at full-section scale. */
.site-footer {
    background: var(--color-dark);
    padding-block-start: var(--section-spacing-tight);
    color: rgba(255, 255, 255, 0.68);
}

.site-footer .brand__text {
    color: var(--color-white);
}

.site-footer .brand__mark {
    background: var(--color-primary);
}

.site-footer__grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    padding-block-end: 50px;
}

.site-footer__grid--single {
    grid-template-columns: minmax(0, 1fr);
}

.site-footer__col--about {
    max-width: 360px;
}

.brand--footer {
    margin-block-end: 18px;
}

.site-footer__about {
    margin: 0;
    font-size: var(--font-size-default);
    line-height: var(--line-height-paragraph);
}

.site-footer__title {
    margin-block-end: 18px;
    color: var(--color-white);
    font-size: var(--font-size-menu);
    font-weight: var(--weight-subheading);
    letter-spacing: 0;
}

.site-footer__list {
    display: grid;
    gap: 10px;
    list-style: none;
}

.site-footer__list .nav__link,
.site-footer__list a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.68);
    font-size: var(--font-size-default);
    font-weight: var(--weight-body);
}

.site-footer__list .nav__link:hover,
.site-footer__list a:hover,
.site-footer__list .nav__link:focus-visible,
.site-footer__list a:focus-visible {
    color: var(--color-primary);
}

.site-footer__list .nav__submenu {
    position: static;
    min-width: 0;
    padding: 0;
    margin-block-start: 10px;
    margin-inline-start: 14px;
    display: grid;
    gap: 10px;
    background: none;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.site-footer__list--details li {
    font-size: var(--font-size-default);
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 22px;
    list-style: none;
}

.socials__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--color-white);
}

.socials__link:hover,
.socials__link:focus-visible {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.site-footer__bar {
    border-block-start: 1px solid rgba(255, 255, 255, 0.12);
    margin-block-start: 8px;
}

.site-footer__bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-block: 24px;
}

.site-footer__copyright {
    margin: 0;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--font-size-default);
}

/* 11. Motion, RTL, responsive, print ===================================== */

.reveal {
    opacity: 1;
}

html.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.2, 1, 0.22, 1), transform 0.6s cubic-bezier(0.2, 1, 0.22, 1);
    will-change: opacity, transform;
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Failsafe: the head script sets this when theme.js never reported in, so a
   missing or broken script can never leave content invisible. */
html.reveal-failsafe .reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* RTL mirroring — most of the layout flips through logical properties; these
   are the pieces that need an explicit hand. */
[dir="rtl"] .nav__chevron,
[dir="rtl"] .lang__chevron {
    transform: none;
}

[dir="rtl"] .nav__submenu .nav__submenu {
    inset-inline-start: auto;
    inset-inline-end: 100%;
}

[dir="rtl"] .step__number,
[dir="rtl"] .stat__value,
[dir="rtl"] .plan__amount {
    unicode-bidi: plaintext;
}

[dir="rtl"] .video__play {
    transform: translate(50%, -50%);
}

[dir="rtl"] .video__facade:hover .video__play {
    transform: translate(50%, -50%) scale(1.06);
}

[dir="rtl"] .breadcrumb,
[dir="rtl"] .article__meta {
    flex-direction: row;
}

/* Tablet and up */
@media (min-width: 768px) {
    :root {
        --container-gutter: 30px;
    }

    .form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero--split .hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: 50px;
    }

    .split__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 60px;
    }

    /* The image column is second in the DOM: pull it in front for
       "image on the start side". Under RTL the grid flow already mirrors,
       so this rule keeps working without a physical override. */
    .split--image-left .split__media {
        order: -1;
    }

    .contact__layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 50px;
    }

    .features__grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .features__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .features__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery__grid--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__grid {
        grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .features__grid--4,
    .gallery__grid--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .pricing__grid--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Phones and small tablets */
@media (max-width: 1023px) {
    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-header__cta,
    .site-header__actions .lang {
        display: none;
    }

    .mobile-nav {
        display: none;
    }

    .site-header.is-nav-open .mobile-nav,
    html.no-js .mobile-nav {
        display: block;
    }

    html.no-js .nav-toggle {
        display: none;
    }

    /* Without JavaScript nothing can expand a collapsed branch, so show the
       whole tree and drop the button that would do nothing. The sheet also
       stops being fixed — with no way to close it, it must sit in the flow
       instead of covering the page. */
    html.no-js .mobile-nav {
        position: static;
        height: auto;
    }

    html.no-js .mobile-nav__list .nav__submenu[hidden] {
        display: block;
    }

    html.no-js .nav__disclosure {
        display: none;
    }
}

/* Masonry grid =========================================================== */

.masonry__grid {
    display: grid;
    gap: var(--masonry-gap, var(--grid-gap));
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.masonry__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.masonry__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.masonry__grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.masonry__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: var(--color-white);
    color: var(--color-text-strong);
    transition: var(--transition);
}

.masonry__card--outlined {
    background: transparent;
    border-color: var(--color-border-hard);
}

.masonry__card--solid,
.section--dark .masonry__card {
    background: var(--color-secondary);
    color: rgba(255, 255, 255, 0.86);
}

.masonry__card--solid .masonry__title,
.section--dark .masonry__card .masonry__title {
    color: #fff;
}

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

.masonry__media {
    position: relative;
    margin: -32px -32px 24px;
}

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

.masonry__card--image .masonry__media {
    margin: 0;
}

.masonry__card--image .masonry__media img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.masonry__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-block-end: 22px;
    border-radius: var(--radius);
    background: var(--gradient-accent);
    color: var(--color-white);
}

.masonry__title {
    margin-block-end: 0.5em;
    font-size: var(--size-h3);
}

.masonry__text {
    margin-block-end: 0;
}

.masonry__actions {
    margin-block-start: 1.4em;
}

.masonry__card--align-center {
    text-align: center;
}

.masonry__card--align-center .masonry__icon {
    margin-inline: auto;
}

.masonry__card--align-center .masonry__actions {
    text-align: center;
}

.masonry__card--align-end {
    text-align: end;
}

.masonry__btn--glow {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 12px 30px -8px rgb(255 107 0 / 60%);
}

.masonry__btn--glow:hover {
    background: var(--color-primary-strong);
    color: var(--color-white);
    box-shadow: 0 16px 36px -8px rgb(255 107 0 / 70%);
}

.masonry__btn--solid {
    background: var(--color-secondary);
    color: var(--color-white);
}

.masonry__btn--solid:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.masonry__btn--outline {
    border-color: var(--color-border-hard);
    color: var(--color-text-strong);
}

.masonry__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.section--dark .masonry__card {
    border-color: rgb(255 255 255 / 12%);
    background: #0c0c0c;
}

.section--dark .masonry__card--outlined {
    background: rgb(255 255 255 / 5%);
}

.section--dark .masonry__card .masonry__text {
    color: rgba(255, 255, 255, 0.72);
}

.section--dark .masonry__btn--outline {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.section--dark .masonry__btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

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

@media (max-width: 920px) {
    .masonry__grid,
    .masonry__grid--2,
    .masonry__grid--3,
    .masonry__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .masonry__grid,
    .masonry__grid--2,
    .masonry__grid--3,
    .masonry__grid--4 {
        grid-template-columns: 1fr;
    }

    .masonry__card {
        padding: 24px;
    }

    .masonry__media {
        margin: -24px -24px 20px;
    }
}

@media (max-width: 766px) {
    .masonry__card--image .masonry__media img {
        position: static;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 766px) {
    :root {
        --section-spacing: 50px;
        --section-spacing-tight: 40px;
        --grid-gap: 20px;
    }

    .section__head {
        margin-block-end: 34px;
    }

    .hero {
        padding-block: 40px 50px;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .cta__band {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta__actions {
        width: 100%;
    }

    .cta__actions .btn {
        width: 100%;
    }

    .spacer--sm { height: 20px; }
    .spacer--md { height: 36px; }
    .spacer--lg { height: 56px; }
    .spacer--xl { height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .site-header,
    .site-footer,
    .nav-toggle,
    .mobile-nav,
    .skip-link {
        display: none !important;
    }

    body {
        color: #000;
    }

    .section {
        padding-block: 20px;
    }
}

/* Bento grid =========================================================== */

.bento--bg,
.bento--bg-solid {
    padding-block: var(--section-spacing, 88px);
}

/* Section background variants (section_bg_type). */
.bento--bg-primary {
    background-color: var(--color-primary);
}

.bento--bg-primary .section__title,
.bento--bg-primary .section__lead,
.bento--bg-primary .bento__title,
.bento--bg-primary .bento__text {
    color: var(--color-white);
}

.bento--bg-secondary {
    background-color: var(--color-text-strong);
    color: var(--color-white);
}

.bento--bg-secondary .section__title,
.bento--bg-secondary .section__lead,
.bento--bg-secondary .bento__title,
.bento--bg-secondary .bento__text {
    color: var(--color-white);
}

.bento--bg-secondary .bento__zone {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 14%);
}

.bento--bg-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--bento-section-bg, var(--color-text-strong)));
    color: var(--color-white);
}

.bento--bg-gradient .section__title,
.bento--bg-gradient .section__lead,
.bento--bg-gradient .bento__title,
.bento--bg-gradient .bento__text {
    color: var(--color-white);
}

/* Staggered mosaic: two columns, each its own row-template grid so the
   splits differ — left 2fr/1fr, right 1fr/2fr (B and C half of A and D). */
.bento__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap, var(--grid-gap));
}

.bento__col {
    display: grid;
    gap: var(--bento-gap, var(--grid-gap));
    min-width: 0;
}

.bento__col--left { grid-template-rows: 2fr 1fr; }
.bento__col--right { grid-template-rows: 1fr 2fr; }

.bento__zone {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: var(--color-white);
    color: var(--color-text-strong);
}

.bento__media {
    position: relative;
    margin: 0;
    height: 100%;
}

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

.bento__zone--a .bento__media img,
.bento__zone--d .bento__media img {
    position: absolute;
    inset: 0;
    height: 100%;
}

.bento__feature {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 32px;
}

.bento__zone--align-center { text-align: center; }
.bento__zone--align-center .bento__feature { align-items: center; }
.bento__zone--align-end { text-align: end; }
.bento__zone--align-end .bento__feature { align-items: flex-end; }

.bento__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-block-end: 22px;
    border-radius: var(--radius);
    background: var(--gradient-accent);
    color: var(--color-white);
}

.bento__zone--align-center .bento__icon { margin-inline: auto; }

.bento__icon svg {
    width: 26px;
    height: 26px;
}

.bento__title {
    margin-block-end: 0.5em;
    font-size: var(--size-h3);
}

.bento__zone--size-sm .bento__title { font-size: var(--size-h4); }
.bento__zone--size-md .bento__title { font-size: 1.35rem; }
.bento__zone--size-lg .bento__title { font-size: var(--size-h3); }
.bento__zone--size-xl .bento__title { font-size: var(--size-h2); }

.bento__text ul,
.bento__text ol {
    margin: 0.5em 0;
    padding-inline-start: 1.3em;
    text-align: start;
}

.bento__text {
    margin-block-end: 0;
}

.bento__pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bento-gap, var(--grid-gap));
    height: 100%;
    padding: var(--bento-gap, var(--grid-gap));
}

.bento__item {
    overflow: hidden;
    border-radius: 18px;
}

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

.bento__item--cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bento__cta--glow {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 12px 30px -8px rgb(255 107 0 / 60%);
}

.bento__cta--glow:hover {
    background: var(--color-primary-strong);
    color: var(--color-white);
}

@media (max-width: 640px) {
    .bento__grid {
        grid-template-columns: 1fr;
    }

    .bento__col--left,
    .bento__col--right {
        grid-template-rows: none;
    }

    .bento__zone {
        min-height: 180px;
    }
}

@media (max-width: 480px) {
    .bento__pair {
        grid-template-columns: 1fr;
    }

    .bento__feature {
        padding: 24px;
    }
}

/* ==========================================================================
   Downloads table
   --------------------------------------------------------------------------
   Rows come from the Downloads resource, so this block sizes itself to
   whatever is published rather than to a fixed column count.

   Version, size and date use tabular numerals so a column of sizes lines up
   on the decimal.

   Under 640px the table becomes a stack of cards. Each cell keeps its column
   name through the data-label attribute, so a bare "24.1 MB" never appears
   without the word Size in front of it.

   container--wide is defined here because the masonry and bento blocks emit
   it too and nothing had declared it — a wide container was silently the
   default width.
   ========================================================================== */

.container--wide { max-width: none; }

.downloads__scroll { overflow-x: auto; }
.downloads__scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

.downloads__table {
    width: 100%;
    border-collapse: collapse;
}

.downloads__table th,
.downloads__table td {
    padding: 16px 18px;
    text-align: start;
    vertical-align: top;
    border-block-end: 1px solid var(--color-border);
}

.downloads__table thead th {
    color: var(--color-text);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: var(--letter-spacing-small, .04em);
    text-transform: uppercase;
    white-space: nowrap;
}

.downloads__name {
    display: block;
    color: var(--color-text-strong);
    font-weight: 600;
}

.downloads__desc {
    display: block;
    margin-block-start: 4px;
    max-width: 52ch;
    color: var(--color-text);
    font-size: .92rem;
    line-height: 1.55;
}

.downloads__meta {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.downloads__tag,
.downloads__ext {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-light);
    font-size: .75rem;
    white-space: nowrap;
}

.downloads__ext { margin-inline-start: 6px; letter-spacing: .04em; }

.downloads__action { text-align: end; }
.downloads__button { white-space: nowrap; }

.downloads__empty {
    padding: clamp(28px, 5vw, 48px);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    background: var(--color-light);
    color: var(--color-text);
    text-align: center;
}

/* Style variants. */
.downloads--bordered .downloads__table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
}

.downloads--striped tbody tr:nth-child(even) { background: var(--color-light); }

.downloads--cards .downloads__table { border-collapse: separate; border-spacing: 0 10px; }
.downloads--cards thead th { border-block-end: 0; }
.downloads--cards tbody tr { box-shadow: var(--shadow); }
.downloads--cards tbody td {
    background: var(--color-white);
    border-block: 1px solid var(--color-border);
}
.downloads--cards tbody td:first-child {
    border-inline-start: 1px solid var(--color-border);
    border-start-start-radius: var(--radius);
    border-end-start-radius: var(--radius);
}
.downloads--cards tbody td:last-child {
    border-inline-end: 1px solid var(--color-border);
    border-start-end-radius: var(--radius);
    border-end-end-radius: var(--radius);
}

/* The `background` select: light is the section default, so only the two
   inverted treatments need to restate their surfaces. */
.downloads--dark {
    background: var(--color-text-strong);
    color: var(--color-white);
}
.downloads--dark .section__title,
.downloads--dark .downloads__name { color: var(--color-white); }
.downloads--dark .downloads__table th,
.downloads--dark .downloads__table td { border-block-end-color: rgb(255 255 255 / 14%); }
.downloads--dark .downloads__tag,
.downloads--dark .downloads__ext,
.downloads--dark .downloads__empty {
    background: rgb(255 255 255 / 6%);
    border-color: rgb(255 255 255 / 18%);
    color: var(--color-white);
}
.downloads--dark .downloads--striped tbody tr:nth-child(even),
.downloads--dark.downloads--striped tbody tr:nth-child(even) { background: rgb(255 255 255 / 5%); }

.downloads--gradient {
    background: linear-gradient(130deg, var(--color-primary) 20%, var(--color-secondary) 100%);
    color: var(--color-white);
}
.downloads--gradient .section__title,
.downloads--gradient .section__lead,
.downloads--gradient .eyebrow,
.downloads--gradient .downloads__name,
.downloads--gradient .downloads__desc,
.downloads--gradient .downloads__meta { color: var(--color-white); }
.downloads--gradient .downloads__table th,
.downloads--gradient .downloads__table td { border-block-end-color: rgb(255 255 255 / 22%); }
.downloads--gradient .downloads__tag,
.downloads--gradient .downloads__ext,
.downloads--gradient .downloads__empty {
    background: rgb(255 255 255 / 12%);
    border-color: rgb(255 255 255 / 28%);
    color: var(--color-white);
}
.downloads--gradient .downloads__scroll:focus-visible { outline-color: var(--color-white); }

@media (max-width: 640px) {
    .downloads__table,
    .downloads__table tbody,
    .downloads__table tr,
    .downloads__table td { display: block; width: 100%; }

    .downloads__table thead { display: none; }

    .downloads__table tr {
        margin-block-end: 14px;
        padding: 10px 4px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-white);
    }

    .downloads__table td { padding: 6px 16px; border-block-end: 0; }

    .downloads__table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-block-end: 2px;
        font-size: .7rem;
        letter-spacing: var(--letter-spacing-small, .04em);
        text-transform: uppercase;
        color: var(--color-text);
    }

    /* The name cell leads the card; its own label would be noise. */
    .downloads__table td:first-child::before { content: none; }

    .downloads--dark .downloads__table tr,
    .downloads--gradient .downloads__table tr { background: rgb(255 255 255 / 8%); }

    .downloads__action { text-align: start; padding-block-start: 10px; }
    .downloads__button { width: 100%; justify-content: center; }
}