/* ============================================================================
   Mealovate Legendary — Molecules
   ----------------------------------------------------------------------------
   Composed units made from atoms + tokens. Everything month 1 needs to ship:
   editorial hero, recipe cards, modal, linear progress, empty state,
   avatar, breadcrumb, section shell, recipe-tier switcher, and the
   capture paste box.

   Same rules as atoms.css: html.legendary scope, token-only values.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Card base — the container every card variant builds on
   --------------------------------------------------------------------------- */
html.legendary .ds-card {
    display: flex;
    flex-direction: column;
    background: var(--surface-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition:
        transform var(--motion-base) var(--ease-spring),
        box-shadow var(--motion-base) var(--ease-spring),
        border-color var(--motion-fast) var(--ease-out);
}
html.legendary .ds-card.is-interactive {
    cursor: pointer;
}
html.legendary .ds-card.is-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent-color);
}
html.legendary .ds-card.is-interactive:active {
    transform: translateY(0) scale(0.99);
}

html.legendary .ds-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-tertiary);
}
html.legendary .ds-card__media img,
html.legendary .ds-card__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--motion-slow) var(--ease-out);
}
html.legendary .ds-card.is-interactive:hover .ds-card__media img {
    transform: scale(1.03);
}

html.legendary .ds-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}
html.legendary .ds-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
html.legendary .ds-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-color);
    margin: 0;
}
html.legendary .ds-card__subtitle {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text-secondary);
    margin: 0;
}
html.legendary .ds-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
html.legendary .ds-card__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
html.legendary .ds-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--divider-color);
    background: var(--surface-primary);
}

/* ---------------------------------------------------------------------------
   Recipe card variants
   ---------------------------------------------------------------------------
   - .ds-recipe-card                 default, used in grids
   - .ds-recipe-card.is-compact      horizontal compact card for sidebars
   - .ds-recipe-card.is-editorial    full-bleed hero-style card
   --------------------------------------------------------------------------- */
html.legendary .ds-recipe-card .ds-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}

html.legendary .ds-recipe-card .ds-card__title {
    font-size: var(--text-lg);
    /* Clamp at 2 lines so card heights stay consistent in a grid */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

html.legendary .ds-recipe-card__tier-chip {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-color);
    background: var(--surface-glass);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
}
html.legendary .ds-recipe-card__tier-chip--elevated {
    color: var(--accent-contrast);
    background: var(--accent-color);
    border-color: var(--accent-color);
}

html.legendary .ds-recipe-card.is-compact {
    flex-direction: row;
    align-items: stretch;
    border-radius: var(--radius-lg);
}
html.legendary .ds-recipe-card.is-compact .ds-card__media {
    flex: 0 0 var(--space-24);
    aspect-ratio: 1;
    border-radius: 0;
}
html.legendary .ds-recipe-card.is-compact .ds-card__body {
    flex: 1;
    padding: var(--space-4);
    gap: var(--space-2);
}
html.legendary .ds-recipe-card.is-compact .ds-card__title {
    font-size: var(--text-base);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
}

html.legendary .ds-recipe-card.is-editorial {
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
}
html.legendary .ds-recipe-card.is-editorial .ds-card__media {
    aspect-ratio: 16 / 10;
}
html.legendary .ds-recipe-card.is-editorial .ds-card__title {
    font-size: var(--text-2xl);
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ---------------------------------------------------------------------------
   Hero — full-bleed cinematic editorial hero
   ---------------------------------------------------------------------------
   This is the new Tonight's Pick surface. Full-bleed image with a warm
   overlay gradient, Playfair serif title, two-line rationale, and ONE
   decisive CTA. The "alternatives" rail sits just below, outside the
   .ds-hero element so it can be optional.
   --------------------------------------------------------------------------- */
html.legendary .ds-hero {
    position: relative;
    width: 100%;
    min-height: 72vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    color: #F7F4EE;
    isolation: isolate;
}
html.legendary .ds-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
html.legendary .ds-hero__media img,
html.legendary .ds-hero__media picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html.legendary .ds-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg,
            rgba(14, 13, 11, 0.0) 0%,
            rgba(14, 13, 11, 0.2) 40%,
            rgba(14, 13, 11, 0.78) 90%,
            rgba(14, 13, 11, 0.88) 100%
        ),
        linear-gradient(90deg,
            rgba(14, 13, 11, 0.62) 0%,
            rgba(14, 13, 11, 0.0) 60%
        );
    pointer-events: none;
}
html.legendary .ds-hero__grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image: var(--grain-overlay-url);
    background-size: 240px 240px;
    opacity: 0.6;
    mix-blend-mode: overlay;
    pointer-events: none;
}
html.legendary .ds-hero__content {
    position: relative;
    z-index: 3;
    max-width: var(--width-max);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-width: min(var(--width-max), 100%);
}
html.legendary .ds-hero__inner {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
html.legendary .ds-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--terracotta-200);
}
html.legendary .ds-hero__eyebrow::before {
    content: "";
    display: inline-block;
    width: var(--space-8);
    height: 2px;
    background: var(--terracotta-400);
    border-radius: 2px;
}
html.legendary .ds-hero__title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 6vw + 1rem, var(--text-5xl));
    font-weight: var(--weight-black);
    line-height: 0.98;
    letter-spacing: var(--tracking-tight);
    color: #F7F4EE;
    text-wrap: balance;
    margin: 0;
}
html.legendary .ds-hero__rationale {
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: rgba(247, 244, 238, 0.88);
    max-width: 36rem;
    text-wrap: pretty;
    margin: 0;
}
html.legendary .ds-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
html.legendary .ds-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
    font-size: var(--text-xs);
    color: rgba(247, 244, 238, 0.72);
    border-top: 1px solid rgba(247, 244, 238, 0.16);
}
html.legendary .ds-hero__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

/* Button inside hero — force high-contrast look against the scrim */
html.legendary .ds-hero .ds-button--primary {
    background: var(--terracotta-500);
    border-color: var(--terracotta-500);
    color: #FFFFFF;
}
html.legendary .ds-hero .ds-button--primary:hover {
    background: var(--terracotta-400);
    border-color: var(--terracotta-400);
    box-shadow: 0 12px 32px rgba(196, 93, 62, 0.44);
}
html.legendary .ds-hero .ds-button--ghost {
    background: rgba(247, 244, 238, 0.08);
    color: #F7F4EE;
    border-color: rgba(247, 244, 238, 0.28);
}
html.legendary .ds-hero .ds-button--ghost:hover {
    background: rgba(247, 244, 238, 0.16);
    border-color: rgba(247, 244, 238, 0.48);
    color: #FFFFFF;
}

@media (min-width: 768px) {
    html.legendary .ds-hero {
        min-height: 82vh;
    }
    html.legendary .ds-hero__content {
        padding: var(--space-24) var(--space-12) var(--space-16);
    }
}
@media (min-width: 1024px) {
    html.legendary .ds-hero {
        min-height: 88vh;
    }
}

/* ---------------------------------------------------------------------------
   Section — consistent page section container with heading + body
   --------------------------------------------------------------------------- */
html.legendary .ds-section {
    display: block;
    padding: var(--space-16) var(--space-6);
    max-width: var(--width-max);
    margin: 0 auto;
}
@media (min-width: 768px) {
    html.legendary .ds-section {
        padding: var(--space-20) var(--space-12);
    }
}
html.legendary .ds-section__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-10);
    max-width: var(--width-prose);
}
html.legendary .ds-section__head.is-center {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
html.legendary .ds-section__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--text-brand);
}
html.legendary .ds-section__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-color);
    text-wrap: balance;
    margin: 0;
}
html.legendary .ds-section__lead {
    font-size: var(--text-md);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    max-width: var(--width-prose);
    margin: 0;
}

/* ---------------------------------------------------------------------------
   Modal
   ---------------------------------------------------------------------------
   Minimal, centered, with backdrop + grain. Focus management and ESC
   handling live in JS; this is purely the visual shell.
   --------------------------------------------------------------------------- */
html.legendary .ds-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease-out);
}
html.legendary .ds-modal.is-open {
    pointer-events: auto;
    opacity: 1;
}
html.legendary .ds-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--backdrop);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}
html.legendary .ds-modal__dialog {
    position: relative;
    background: var(--surface-elevated);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 32rem;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(var(--space-2)) scale(0.98);
    transition: transform var(--motion-base) var(--ease-spring);
}
html.legendary .ds-modal.is-open .ds-modal__dialog {
    transform: translateY(0) scale(1);
}
html.legendary .ds-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-6) var(--space-4);
}
html.legendary .ds-modal__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--text-color);
    margin: 0;
}
html.legendary .ds-modal__body {
    padding: 0 var(--space-6) var(--space-6);
    overflow-y: auto;
}
html.legendary .ds-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--divider-color);
    background: var(--surface-primary);
}

/* ---------------------------------------------------------------------------
   Linear progress bar
   ---------------------------------------------------------------------------
   Used by Capture (downloading / transcribing / analyzing / generating).
   Two modes: determinate (style="--ds-progress: 0.42") and indeterminate.
   --------------------------------------------------------------------------- */
html.legendary .ds-progress {
    width: 100%;
    height: var(--space-2);
    background: var(--surface-tertiary);
    border-radius: var(--radius-pill);
    overflow: hidden;
    position: relative;
}
html.legendary .ds-progress__bar {
    height: 100%;
    width: calc(var(--ds-progress, 0) * 100%);
    background: linear-gradient(
        90deg,
        var(--terracotta-500),
        var(--terracotta-300)
    );
    border-radius: inherit;
    transition: width var(--motion-slow) var(--ease-out);
}
html.legendary .ds-progress.is-indeterminate .ds-progress__bar {
    width: 40%;
    animation: ds-progress-slide 1.2s var(--ease-in-out) infinite;
}
@keyframes ds-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

/* Stage list for multi-step Capture progress */
html.legendary .ds-progress-stages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-4);
}
html.legendary .ds-progress-stages__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
}
html.legendary .ds-progress-stages__item.is-active {
    color: var(--text-color);
}
html.legendary .ds-progress-stages__item.is-complete {
    color: var(--text-muted);
}
html.legendary .ds-progress-stages__dot {
    flex: 0 0 auto;
    width: var(--space-4);
    height: var(--space-4);
    border-radius: var(--radius-pill);
    border: 2px solid var(--border-strong);
    background: transparent;
    transition: var(--transition-colors);
}
html.legendary .ds-progress-stages__item.is-active .ds-progress-stages__dot {
    border-color: var(--accent-color);
    background: var(--accent-color);
    box-shadow: var(--glow-accent);
}
html.legendary .ds-progress-stages__item.is-complete .ds-progress-stages__dot {
    border-color: var(--color-success);
    background: var(--color-success);
}

/* ---------------------------------------------------------------------------
   Empty state
   --------------------------------------------------------------------------- */
html.legendary .ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-6);
    text-align: center;
    max-width: 32rem;
    margin: 0 auto;
    color: var(--text-secondary);
}
html.legendary .ds-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-16);
    height: var(--space-16);
    border-radius: var(--radius-pill);
    background: var(--accent-muted);
    color: var(--text-brand);
    font-size: var(--text-2xl);
}
html.legendary .ds-empty__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    margin: 0;
}
html.legendary .ds-empty__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin: 0;
}
html.legendary .ds-empty__actions {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

/* ---------------------------------------------------------------------------
   Avatar
   --------------------------------------------------------------------------- */
html.legendary .ds-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-pill);
    background: var(--accent-muted);
    color: var(--text-brand);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    overflow: hidden;
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
}
html.legendary .ds-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
html.legendary .ds-avatar--sm { width: var(--space-7); height: var(--space-7); font-size: var(--text-xs); }
html.legendary .ds-avatar--lg { width: var(--space-12); height: var(--space-12); font-size: var(--text-base); }
html.legendary .ds-avatar--xl { width: var(--space-16); height: var(--space-16); font-size: var(--text-lg); }

html.legendary .ds-avatar-stack {
    display: inline-flex;
    align-items: center;
}
html.legendary .ds-avatar-stack .ds-avatar {
    margin-left: calc(-1 * var(--space-2));
    border: 2px solid var(--surface-primary);
}
html.legendary .ds-avatar-stack .ds-avatar:first-child {
    margin-left: 0;
}

/* ---------------------------------------------------------------------------
   Breadcrumb
   --------------------------------------------------------------------------- */
html.legendary .ds-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
    list-style: none;
    padding: 0;
    margin: 0;
}
html.legendary .ds-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
html.legendary .ds-breadcrumb li + li::before {
    content: "/";
    color: var(--text-muted);
    opacity: 0.6;
}
html.legendary .ds-breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition-colors);
}
html.legendary .ds-breadcrumb a:hover {
    color: var(--text-brand);
}
html.legendary .ds-breadcrumb [aria-current="page"] {
    color: var(--text-color);
    font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------------------
   Tier switcher — the Standard / Upgraded / Elevated segmented control
   ---------------------------------------------------------------------------
   This is the defining visible UX of the 3-tier system. Segmented pill
   control with spring-eased active-indicator sliding. Used on recipe
   detail and in the homepage elevation showcase.
   --------------------------------------------------------------------------- */
html.legendary .ds-tier-switch {
    display: inline-flex;
    padding: var(--space-1);
    background: var(--surface-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
    gap: var(--space-1);
    position: relative;
}
html.legendary .ds-tier-switch__option {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out);
    text-decoration: none;
}
html.legendary .ds-tier-switch__option:hover {
    color: var(--text-secondary);
}
html.legendary .ds-tier-switch__option.is-active {
    color: var(--accent-contrast);
    background: var(--accent-color);
    box-shadow: var(--shadow-sm);
}
html.legendary .ds-tier-switch__option[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}
html.legendary .ds-tier-switch__option--locked {
    padding-right: var(--space-4);
}
html.legendary .ds-tier-switch__option--locked::after {
    content: "🔒";
    font-size: var(--text-xs);
    opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Capture paste box — the Capture landing page's hero input
   --------------------------------------------------------------------------- */
html.legendary .ds-capture-box {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: var(--surface-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    transition: var(--transition-colors);
    max-width: 36rem;
    width: 100%;
}
html.legendary .ds-capture-box:focus-within {
    border-color: var(--accent-color);
    box-shadow: var(--glow-accent);
}
html.legendary .ds-capture-box__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: var(--text-base);
    padding: var(--space-3) var(--space-4);
    outline: none;
    min-width: 0;
}
html.legendary .ds-capture-box__input::placeholder {
    color: var(--text-muted);
}
html.legendary .ds-capture-box .ds-button {
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
   Card grid — simple responsive grid for recipe card lists
   --------------------------------------------------------------------------- */
html.legendary .ds-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--space-5);
}
@media (min-width: 768px) {
    html.legendary .ds-card-grid {
        gap: var(--space-6);
    }
}

/* ---------------------------------------------------------------------------
   How it works — editorial 3-step row (legendary homepage)
   --------------------------------------------------------------------------- */
html.legendary .ds-how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
html.legendary .ds-how-it-works__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-6);
    background: var(--surface-secondary);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    transition: border-color var(--motion-base) var(--ease-out),
                transform var(--motion-base) var(--ease-spring);
}
html.legendary .ds-how-it-works__step::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--terracotta-600), var(--terracotta-300));
    opacity: 0.6;
    transition: opacity var(--motion-base) var(--ease-out);
}
html.legendary .ds-how-it-works__step:hover {
    border-color: var(--accent-muted);
    transform: translateY(-2px);
}
html.legendary .ds-how-it-works__step:hover::before {
    opacity: 1;
}
html.legendary .ds-how-it-works__num {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    color: var(--accent-muted);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    user-select: none;
}
html.legendary .ds-how-it-works__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--text-color);
    margin: 0;
}
html.legendary .ds-how-it-works__desc {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    flex: 1;
    margin: 0;
}
@media (max-width: 1023px) {
    html.legendary .ds-how-it-works__steps {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
    html.legendary .ds-how-it-works__step:hover {
        transform: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html.legendary .ds-how-it-works__step {
        transition: border-color var(--motion-fast) var(--ease-out);
    }
    html.legendary .ds-how-it-works__step:hover {
        transform: none;
    }
}