/* Theme Studio — used sections only (tree-shaken) */

/* section: cta-band */
/* ===========================================================================
   cta-band — full-width call-to-action band. Scoped · tokens only · mobile-first.
   =========================================================================== */

.cta-band {
    padding-block: var(--t-space-2xl);
}

.cta-band__inner {
    display: grid;
    gap: var(--t-space-lg);
    padding: var(--t-space-xl);
    border-radius: var(--t-radius-lg);
}

.cta-band--primary .cta-band__inner {
    background: var(--t-primary);
    color: var(--t-on-primary);
}

.cta-band--surface .cta-band__inner {
    background: var(--t-surface-alt);
    color: var(--t-text);
    box-shadow: var(--t-shadow-xs);
}

.cta-band__text {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-2xs);
}

.cta-band__title {
    margin: 0;
    font-size: var(--t-step-3);
    line-height: var(--t-line-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cta-band__body {
    margin: 0;
    max-width: 44rem;
    font-size: var(--t-step-1);
    line-height: var(--t-line-relaxed);
    text-wrap: pretty;
}

.cta-band--surface .cta-band__body {
    color: var(--t-text-secondary);
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-sm);
}

.cta-band__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--t-space-2xs);
    padding-block: 0.8em;
    padding-inline: var(--t-space-md);
    border: 1px solid transparent;
    border-radius: var(--t-radius-button);
    font-size: var(--t-step-0);
    font-weight: 600;
    line-height: 1;
    transition: transform var(--t-motion-fast) var(--t-motion-ease),
                background-color var(--t-motion-fast) var(--t-motion-ease),
                border-color var(--t-motion-fast) var(--t-motion-ease);
}

.cta-band__cta-icon {
    flex-shrink: 0;
    transition: transform var(--t-motion-fast) var(--t-motion-ease);
}

.cta-band__cta:hover .cta-band__cta-icon {
    transform: translateX(3px);
}

[dir="rtl"] .cta-band__cta-icon {
    transform: scaleX(-1);
}

[dir="rtl"] .cta-band__cta:hover .cta-band__cta-icon {
    transform: scaleX(-1) translateX(3px);
}

/* On a primary band the primary CTA inverts to a light chip; ghost keeps the
   on-primary ink. On a surface band the usual primary/ghost pair applies. */
/* On a primary band, the primary CTA is a chip in --t-on-primary (the colour
   computed to contrast the band) with --t-primary text — guaranteed ~4.8:1 in
   any palette/mode, unlike surface-raised which flips dark in dark mode. */
.cta-band--primary .cta-band__cta--primary {
    background: var(--t-on-primary);
    color: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.cta-band--primary .cta-band__cta--primary:hover {
    transform: translateY(-2px);
}

.cta-band--primary .cta-band__cta--ghost {
    color: var(--t-on-primary);
    border-color: var(--t-on-primary);
}

.cta-band--primary .cta-band__cta--ghost:hover {
    background: var(--t-primary-hover);
}

.cta-band--surface .cta-band__cta--primary {
    background: var(--t-primary);
    color: var(--t-on-primary);
    box-shadow: var(--t-shadow-sm);
}

.cta-band--surface .cta-band__cta--primary:hover {
    background: var(--t-primary-hover);
    transform: translateY(-2px);
}

.cta-band--surface .cta-band__cta--ghost {
    color: var(--t-text);
    border-color: var(--t-border-hover);
}

.cta-band--surface .cta-band__cta--ghost:hover {
    background: var(--t-surface);
    border-color: var(--t-text);
}

/* ── Centered layout ─────────────────────────────────────────────────────── */
.cta-band--centered .cta-band__inner {
    justify-items: center;
    text-align: center;
}

.cta-band--centered .cta-band__actions {
    justify-content: center;
}

/* ── Split layout (≥ 768): text left, actions right ──────────────────────── */
@media (min-width: 768px) {
    .cta-band--split .cta-band__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: var(--t-space-2xl);
    }

    .cta-band--split .cta-band__actions {
        justify-self: end;
    }
}

@media (min-width: 1024px) {
    .cta-band__inner {
        padding: var(--t-space-2xl);
    }

    .cta-band--centered .cta-band__title {
        font-size: var(--t-step-4);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cta-band__cta,
    .cta-band__cta-icon {
        transition: none;
    }
}


/* section: features-grid */
/* ===========================================================================
   features-grid — icon + title + text feature grid. Scoped · tokens.
   =========================================================================== */

.features-grid {
    padding-block: var(--t-space-2xl);
}

.features-grid__head {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-2xs);
    max-inline-size: 44rem;
    margin-block-end: var(--t-space-xl);
}

.features-grid__eyebrow {
    margin: 0;
    font-family: var(--t-font-mono);
    font-size: var(--t-step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-accent-text);
}

.features-grid__title {
    margin: 0;
    font-size: var(--t-step-3);
    line-height: var(--t-line-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.features-grid__intro {
    margin: 0;
    font-size: var(--t-step-1);
    line-height: var(--t-line-relaxed);
    color: var(--t-text-secondary);
    text-wrap: pretty;
}

.features-grid__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--t-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.features-grid__item {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-2xs);
}

.features-grid--cards .features-grid__item {
    padding: var(--t-space-lg);
    background: var(--t-surface-raised);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius-md);
    box-shadow: var(--t-shadow-xs);
    transition: transform var(--t-motion-base) var(--t-motion-ease),
                box-shadow var(--t-motion-base) var(--t-motion-ease),
                border-color var(--t-motion-base) var(--t-motion-ease);
}

.features-grid--cards .features-grid__item:hover {
    transform: translateY(-3px);
    box-shadow: var(--t-shadow-md);
    border-color: var(--t-border-hover);
}

.features-grid__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 3rem;
    block-size: 3rem;
    margin-block-end: var(--t-space-2xs);
    color: var(--t-accent-text);
    background: var(--t-surface-alt);
    border-radius: var(--t-radius-md);
}

.features-grid--cards .features-grid__icon {
    background: color-mix(in srgb, var(--t-primary) 12%, var(--t-surface-alt));
}

.features-grid__item-title {
    margin: 0;
    font-size: var(--t-step-1);
    line-height: var(--t-line-tight);
    letter-spacing: -0.005em;
    color: var(--t-text);
}

.features-grid__item-text {
    margin: 0;
    font-size: var(--t-step-0);
    line-height: var(--t-line-relaxed);
    color: var(--t-text-secondary);
    text-wrap: pretty;
}

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

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

@media (prefers-reduced-motion: reduce) {
    .features-grid--cards .features-grid__item {
        transition: none;
    }

    .features-grid--cards .features-grid__item:hover {
        transform: none;
    }
}


/* section: footer-minimal */
/* ===========================================================================
   footer-minimal — one compact row. Scoped · tokens · mobile-first.
   =========================================================================== */

.footer-minimal {
    padding-block: var(--t-space-lg);
    background: var(--t-surface-alt);
    color: var(--t-text-secondary);
    border-block-start: 1px solid var(--t-border);
}

.footer-minimal__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--t-space-md);
    text-align: center;
}

.footer-minimal__brand {
    font-family: var(--t-font-heading);
    font-size: var(--t-step-1);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-text);
    white-space: nowrap;
}

.footer-minimal__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--t-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-minimal__link {
    font-size: var(--t-step-0);
    color: var(--t-text-secondary);
    transition: color var(--t-motion-fast) var(--t-motion-ease);
}

.footer-minimal__link:hover {
    color: var(--t-accent-text);
}

.footer-minimal__social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--t-space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-minimal__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--t-text-secondary);
    border: 1px solid var(--t-border-hover);
    border-radius: var(--t-radius-pill);
    transition: color var(--t-motion-fast) var(--t-motion-ease),
                border-color var(--t-motion-fast) var(--t-motion-ease),
                background-color var(--t-motion-fast) var(--t-motion-ease);
}

.footer-minimal__social-link:hover {
    color: var(--t-on-primary);
    background: var(--t-primary);
    border-color: var(--t-primary);
}

.footer-minimal__copyright {
    margin: 0;
    font-size: var(--t-step--1);
    color: var(--t-text-muted);
}

@media (min-width: 768px) {
    .footer-minimal--split .footer-minimal__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        text-align: start;
    }

    .footer-minimal--split .footer-minimal__links {
        justify-content: flex-start;
    }

    .footer-minimal--split .footer-minimal__copyright {
        flex-basis: 100%;
        padding-block-start: var(--t-space-md);
        border-block-start: 1px solid var(--t-border);
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-minimal__link,
    .footer-minimal__social-link {
        transition: none;
    }
}


/* section: header-overlay */
/* ===========================================================================
   header-overlay — transparent over a full-bleed hero, solid on scroll.
   Scoped · tokens · mobile-first. Transparent state = --t-on-media text (AA over
   the hero scrim, floor .72); stuck state = normal tokens on --t-surface.
   =========================================================================== */

.header-overlay {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    background: transparent;
    transition: background-color var(--t-motion-base) var(--t-motion-ease);
}

.header-overlay--sticky {
    position: fixed;
}

.header-overlay--sticky.is-stuck {
    background: var(--t-surface);
    border-block-end: 1px solid var(--t-border);
    box-shadow: var(--t-shadow-sm);
}

.header-overlay__bar {
    display: flex;
    align-items: center;
    gap: var(--t-space-md);
    min-block-size: var(--t-header-height);
    padding-block: var(--t-space-2xs);
}

.header-overlay--centered .header-overlay__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

.header-overlay__side {
    display: flex;
    align-items: center;
    gap: var(--t-space-2xs);
}

.header-overlay__side--end {
    justify-content: flex-end;
}

.header-overlay__brand {
    flex: 0 0 auto;
    justify-self: center;
    font-family: var(--t-font-heading);
    font-size: var(--t-step-1);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--t-on-media);
    white-space: nowrap;
}

.header-overlay--centered .header-overlay__brand {
    font-size: var(--t-step-2);
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.header-overlay__nav,
.header-overlay__navrow {
    display: none;
}

.header-overlay__menu {
    display: flex;
    align-items: center;
    gap: var(--t-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-overlay__menu--row {
    justify-content: center;
    padding-block: var(--t-space-xs);
}

.header-overlay__link {
    position: relative;
    padding-block: var(--t-space-3xs);
    font-size: var(--t-step-0);
    font-weight: 500;
    color: var(--t-on-media-dim);
    transition: color var(--t-motion-fast) var(--t-motion-ease);
}

.header-overlay__link:hover,
.header-overlay__link.is-active {
    color: var(--t-on-media);
}

.header-overlay__link.is-active::after {
    content: "";
    position: absolute;
    inset-block-end: -2px;
    inset-inline: 0;
    block-size: 2px;
    background: var(--t-on-media);
    border-radius: var(--t-radius-pill);
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.header-overlay__actions {
    display: flex;
    align-items: center;
    gap: var(--t-space-2xs);
    margin-inline-start: auto;
}

.header-overlay__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--t-on-media);
    background: transparent;
    border: 0;
    border-radius: var(--t-radius-sm);
    transition: background-color var(--t-motion-fast) var(--t-motion-ease);
}

.header-overlay__icon-btn:hover {
    background: color-mix(in srgb, var(--t-on-media) 16%, transparent);
}

.header-overlay__moon {
    display: none;
}

[data-theme="dark"] .header-overlay__sun {
    display: none;
}

[data-theme="dark"] .header-overlay__moon {
    display: inline-block;
}

.header-overlay__cta {
    display: none;
    align-items: center;
    padding-block: 0.55em;
    padding-inline: var(--t-space-md);
    font-size: var(--t-step-0);
    font-weight: 600;
    white-space: nowrap;
    color: var(--t-on-primary);
    background: var(--t-primary);
    border-radius: var(--t-radius-button);
    box-shadow: var(--t-shadow-sm);
    transition: background-color var(--t-motion-fast) var(--t-motion-ease),
                transform var(--t-motion-fast) var(--t-motion-ease);
}

.header-overlay__cta:hover {
    background: var(--t-primary-hover);
    transform: translateY(-1px);
}

.header-overlay__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    color: var(--t-on-media);
    background: transparent;
    border: 0;
    border-radius: var(--t-radius-sm);
}

/* ── Stuck state: swap on-media text for normal tokens ───────────────────── */
.header-overlay--sticky.is-stuck .header-overlay__brand {
    color: var(--t-text);
}

.header-overlay--sticky.is-stuck .header-overlay__link {
    color: var(--t-text-secondary);
}

.header-overlay--sticky.is-stuck .header-overlay__link:hover,
.header-overlay--sticky.is-stuck .header-overlay__link.is-active {
    color: var(--t-text);
}

.header-overlay--sticky.is-stuck .header-overlay__link.is-active::after {
    background: var(--t-primary);
}

.header-overlay--sticky.is-stuck .header-overlay__icon-btn,
.header-overlay--sticky.is-stuck .header-overlay__burger {
    color: var(--t-text-secondary);
}

.header-overlay--sticky.is-stuck .header-overlay__icon-btn:hover,
.header-overlay--sticky.is-stuck .header-overlay__burger:hover {
    color: var(--t-text);
    background: var(--t-surface-alt);
}

/* ── Drawer (always a solid panel; normal tokens) ────────────────────────── */
.header-overlay__drawer {
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    gap: var(--t-space-md);
    padding: var(--t-space-lg);
    background: var(--t-surface);
}

.header-overlay__drawer:not([hidden]) {
    display: flex;
}

.header-overlay__drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-overlay__drawer-brand {
    font-family: var(--t-font-heading);
    font-size: var(--t-step-1);
    font-weight: 700;
    color: var(--t-text);
}

.header-overlay__icon-btn--solid {
    color: var(--t-text-secondary);
}

.header-overlay__icon-btn--solid:hover {
    color: var(--t-text);
    background: var(--t-surface-alt);
}

.header-overlay__drawer-nav ul {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-overlay__drawer .header-overlay__link {
    color: var(--t-text-secondary);
    font-family: var(--t-font-heading);
    font-size: var(--t-step-2);
}

.header-overlay__drawer .header-overlay__link:hover,
.header-overlay__drawer .header-overlay__link.is-active {
    color: var(--t-text);
}

.header-overlay__cta--block {
    display: inline-flex;
    justify-content: center;
    margin-block-start: auto;
}

@media (min-width: 520px) {
    .header-overlay__cta {
        display: inline-flex;
    }
}

@media (min-width: 900px) {
    .header-overlay__burger,
    .header-overlay__drawer {
        display: none;
    }

    .header-overlay--logo-left .header-overlay__nav {
        display: block;
        flex: 1 1 auto;
    }

    .header-overlay--logo-left .header-overlay__menu {
        justify-content: flex-end;
    }

    .header-overlay--centered .header-overlay__navrow {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-overlay,
    .header-overlay__link,
    .header-overlay__icon-btn,
    .header-overlay__cta {
        transition: none;
    }
}


/* section: hero-cover */
/* ===========================================================================
   hero-cover — full-bleed cover with image/video + scrim. Scoped · tokens.
   The scrim guarantees AA for --t-on-media text over any photo, both modes.
   =========================================================================== */

.hero-cover {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: clip;
    padding-block: var(--t-space-3xl);
    min-block-size: clamp(26rem, 68vh, 44rem);
}

.hero-cover--full {
    min-block-size: 100vh;
    min-block-size: 100svh;
}

.hero-cover--center {
    justify-content: center;
}

.hero-cover--start {
    align-items: flex-end;
}

/* ── media + scrim layers ─────────────────────────────────────────────────── */
.hero-cover__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-cover__media-el {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    filter: var(--t-image-filter);
}

.hero-cover__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Flat floor = --t-scrim-strong so the WORST case (bright/white photo, text
       anywhere incl. the vertically-centred variant) stays AA: white-on-scrim
       ≥ 7.5:1 and --t-on-media-dim ≥ 5.7:1. The gradient only deepens the bottom. */
    background:
        linear-gradient(to top, var(--t-scrim-strong), var(--t-scrim) 55%, transparent),
        var(--t-scrim-strong);
}

/* ── content ──────────────────────────────────────────────────────────────── */
.hero-cover__inner {
    position: relative;
    z-index: 2;
    inline-size: 100%;
}

.hero-cover__content {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-md);
    max-inline-size: 44rem;
    color: var(--t-on-media);
}

.hero-cover--center .hero-cover__content {
    text-align: center;
    align-items: center;
    margin-inline: auto;
}

.hero-cover__eyebrow {
    margin: 0;
    font-family: var(--t-font-mono);
    font-size: var(--t-step--1);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--t-on-media-dim);
}

.hero-cover__title {
    margin: 0;
    font-size: var(--t-step-4);
    line-height: var(--t-line-tight);
    letter-spacing: -0.015em;
    color: var(--t-on-media);
    text-wrap: balance;
}

.hero-cover__lead {
    margin: 0;
    max-inline-size: 40rem;
    font-size: var(--t-step-1);
    line-height: var(--t-line-relaxed);
    color: var(--t-on-media-dim);
    text-wrap: pretty;
}

.hero-cover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--t-space-sm);
    margin-block-start: var(--t-space-2xs);
}

.hero-cover--center .hero-cover__actions {
    justify-content: center;
}

.hero-cover__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--t-space-2xs);
    padding-block: 0.85em;
    padding-inline: var(--t-space-lg);
    border: 1px solid transparent;
    border-radius: var(--t-radius-button);
    font-size: var(--t-step-0);
    font-weight: 600;
    line-height: 1;
    transition: transform var(--t-motion-fast) var(--t-motion-ease),
                background-color var(--t-motion-fast) var(--t-motion-ease);
}

.hero-cover__cta--primary {
    background: var(--t-primary);
    color: var(--t-on-primary);
    box-shadow: var(--t-shadow-md);
}

.hero-cover__cta--primary:hover {
    background: var(--t-primary-hover);
    transform: translateY(-2px);
}

.hero-cover__cta--ghost {
    color: var(--t-on-media);
    border-color: var(--t-on-media);
}

.hero-cover__cta--ghost:hover {
    background: color-mix(in srgb, var(--t-on-media) 16%, transparent);
}

.hero-cover__cta-icon {
    flex-shrink: 0;
    transition: transform var(--t-motion-fast) var(--t-motion-ease);
}

.hero-cover__cta--primary:hover .hero-cover__cta-icon {
    transform: translateX(3px);
}

[dir="rtl"] .hero-cover__cta-icon {
    transform: scaleX(-1);
}

/* ── video play/pause toggle ──────────────────────────────────────────────── */
.hero-cover__vtoggle {
    position: absolute;
    inset-block-end: var(--t-space-md);
    inset-inline-end: var(--t-space-md);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid var(--t-on-media);
    border-radius: var(--t-radius-pill);
    background: var(--t-scrim-strong);
    color: var(--t-on-media);
    cursor: pointer;
    transition: transform var(--t-motion-fast) var(--t-motion-ease);
}

.hero-cover__vtoggle:hover {
    transform: scale(1.06);
}

.hero-cover__vicon--pause {
    display: none;
}

.hero-cover__vtoggle[data-playing="true"] .hero-cover__vicon--play {
    display: none;
}

.hero-cover__vtoggle[data-playing="true"] .hero-cover__vicon--pause {
    display: block;
}

/* ── no-media fallback: token gradient + normal ink text ──────────────────── */
.hero-cover--no-media {
    background: linear-gradient(160deg, var(--t-surface), var(--t-surface-alt));
}

.hero-cover--no-media .hero-cover__content,
.hero-cover--no-media .hero-cover__title {
    color: var(--t-text);
}

.hero-cover--no-media .hero-cover__eyebrow {
    color: var(--t-accent-text);
}

.hero-cover--no-media .hero-cover__lead {
    color: var(--t-text-secondary);
}

.hero-cover--no-media .hero-cover__cta--ghost {
    color: var(--t-text);
    border-color: var(--t-border-hover);
}

.hero-cover--no-media .hero-cover__cta--ghost:hover {
    background: var(--t-surface-alt);
}

@media (min-width: 768px) {
    .hero-cover__title {
        font-size: var(--t-step-5);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-cover__cta,
    .hero-cover__cta-icon,
    .hero-cover__vtoggle {
        transition: none;
    }
}


/* section: video-feature */
/* ===========================================================================
   video-feature — featured video/image panel + copy. Scoped · tokens.
   =========================================================================== */

.video-feature {
    padding-block: var(--t-space-2xl);
    overflow: clip;
}

.video-feature__grid {
    display: grid;
    gap: var(--t-space-xl);
    align-items: center;
}

.video-feature__text {
    display: flex;
    flex-direction: column;
    gap: var(--t-space-md);
    max-inline-size: 40rem;
}

.video-feature__eyebrow {
    margin: 0;
    font-family: var(--t-font-mono);
    font-size: var(--t-step--1);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-accent-text);
}

.video-feature__title {
    margin: 0;
    font-size: var(--t-step-3);
    line-height: var(--t-line-tight);
    letter-spacing: -0.015em;
    color: var(--t-text);
    text-wrap: balance;
}

.video-feature__body {
    margin: 0;
    font-size: var(--t-step-1);
    line-height: var(--t-line-relaxed);
    color: var(--t-text-secondary);
    text-wrap: pretty;
}

.video-feature__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--t-space-2xs);
    align-self: flex-start;
    margin-block-start: var(--t-space-2xs);
    padding-block: 0.7em;
    padding-inline: var(--t-space-lg);
    border-radius: var(--t-radius-button);
    background: var(--t-primary);
    color: var(--t-on-primary);
    font-size: var(--t-step-0);
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--t-shadow-sm);
    transition: background-color var(--t-motion-fast) var(--t-motion-ease),
                transform var(--t-motion-fast) var(--t-motion-ease);
}

.video-feature__cta:hover {
    background: var(--t-primary-hover);
    transform: translateY(-2px);
}

.video-feature__cta-icon {
    flex-shrink: 0;
}

[dir="rtl"] .video-feature__cta-icon {
    transform: scaleX(-1);
}

/* ── Media panel ─────────────────────────────────────────────────────────── */
.video-feature__media {
    position: relative;
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    background: var(--t-surface-alt);
    box-shadow: var(--t-shadow-md);
}

.video-feature__media-el {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: var(--t-image-filter);
}

.video-feature__vtoggle {
    position: absolute;
    inset-block-end: var(--t-space-sm);
    inset-inline-end: var(--t-space-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    padding: 0;
    border: 1px solid var(--t-on-media);
    border-radius: var(--t-radius-pill);
    background: var(--t-scrim-strong);
    color: var(--t-on-media);
    cursor: pointer;
    transition: transform var(--t-motion-fast) var(--t-motion-ease);
}

.video-feature__vtoggle:hover {
    transform: scale(1.06);
}

.video-feature__vicon--pause {
    display: none;
}

.video-feature__vtoggle[data-playing="true"] .video-feature__vicon--play {
    display: none;
}

.video-feature__vtoggle[data-playing="true"] .video-feature__vicon--pause {
    display: block;
}

/* ── Layouts ─────────────────────────────────────────────────────────────── */
.video-feature--media-top .video-feature__text {
    max-inline-size: 46rem;
    margin-inline: auto;
    text-align: center;
    align-items: center;
    margin-block-end: var(--t-space-lg);
}

@media (min-width: 1024px) {
    .video-feature--media-right .video-feature__grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--t-space-2xl);
    }

    .video-feature--media-top .video-feature__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-feature__cta,
    .video-feature__vtoggle {
        transition: none;
    }
}