/*
 * OnlyFit Design System
 * Version: 0.1.0
 *
 * Components use semantic tokens so a landing can be re-themed by overriding
 * variables on a [data-theme] wrapper without changing component markup.
 */

@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "OnlyFit Google Sans";
  src: url("../fonts/google-sans-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@layer tokens {
  :root,
  [data-theme="onlyfit"] {
    color-scheme: dark;

    /* Primitive palette */
    --of-ink-1000: #070509;
    --of-ink-950: #0f0c13;
    --of-ink-900: #15111a;
    --of-ink-800: #221e2a;
    --of-surface-700: #342e3c;
    --of-surface-600: #433d4b;
    --of-line-500: #5d5668;
    --of-white: #ffffff;
    --of-paper: #f0edf7;
    --of-gray-200: #d8dedb;
    --of-gray-400: #a7aaa9;
    --of-gray-500: #878a8b;
    --of-blue-300: #7aa8ff;
    --of-blue-400: #6493fe;
    --of-violet-400: #6861f5;
    --of-violet-500: #625df5;
    --of-violet-700: #4a35db;
    --of-violet-800: #34209c;
    --of-orange-400: #ff711a;
    --of-orange-500: #ff4b0a;
    --of-orange-600: #ff3207;
    --of-pink-500: #f01883;
    --of-magenta-500: #d437c7;
    --of-mint-400: #8effd8;
    --of-lime-400: #dfff17;
    --of-green-400: #8dff8a;
    --of-yellow-400: #ffd54a;
    --of-red-400: #ff6577;

    /* Brand gradients */
    --of-gradient-brand:
      linear-gradient(120deg, var(--of-blue-400) 0%, var(--of-violet-500) 48%, var(--of-violet-700) 100%);
    --of-gradient-brand-soft:
      linear-gradient(105deg, var(--of-blue-300) 0%, #736df6 58%, #5838e6 100%);
    --of-gradient-cta:
      linear-gradient(100deg, var(--of-orange-400) 0%, var(--of-orange-500) 52%, var(--of-orange-600) 100%);
    --of-gradient-promo:
      linear-gradient(100deg, var(--of-magenta-500) 0%, var(--of-pink-500) 48%, #ff6b35 77%, #ffa413 100%);
    --of-gradient-sync:
      linear-gradient(100deg, var(--of-lime-400) 0%, var(--of-green-400) 100%);
    --of-gradient-fade:
      linear-gradient(180deg, rgb(15 12 19 / 0%) 0%, var(--of-ink-950) 80%);

    /* Semantic colors */
    --of-color-page: var(--of-ink-950);
    --of-color-page-deep: var(--of-ink-1000);
    --of-color-surface: var(--of-surface-700);
    --of-color-surface-raised: var(--of-surface-600);
    --of-color-surface-soft: var(--of-ink-800);
    --of-color-border: var(--of-line-500);
    --of-color-border-subtle: rgb(255 255 255 / 12%);
    --of-color-text: var(--of-white);
    --of-color-text-muted: var(--of-gray-400);
    --of-color-text-subtle: var(--of-gray-500);
    --of-color-text-on-brand: var(--of-paper);
    --of-color-text-on-bright: var(--of-ink-950);
    --of-color-action: var(--of-orange-500);
    --of-color-focus: var(--of-mint-400);
    --of-color-selected: var(--of-blue-300);
    --of-color-success: var(--of-green-400);
    --of-color-warning: var(--of-yellow-400);
    --of-color-error: var(--of-red-400);
    --of-color-overlay: rgb(7 5 9 / 78%);
    --of-color-wallet: #000000;

    /* Font roles. Replace OnlyFit aliases when final font files are supplied. */
    --of-font-display:
      "OnlyFit Display", "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", Impact, sans-serif;
    --of-font-sans:
      "OnlyFit Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --of-font-tech:
      "OnlyFit Tech", "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Fluid type scale */
    --of-text-display-xl: clamp(3rem, 15vw, 7.5rem);
    --of-text-display: clamp(2.5rem, 11vw, 5.5rem);
    --of-text-title: clamp(2rem, 7.5vw, 3.75rem);
    --of-text-heading: clamp(1.5rem, 5vw, 2.25rem);
    --of-text-subheading: clamp(1.25rem, 3.5vw, 1.75rem);
    --of-text-body-lg: clamp(1.125rem, 2vw, 1.375rem);
    --of-text-body: 1rem;
    --of-text-small: 0.875rem;
    --of-text-micro: 0.75rem;

    --of-leading-display: 0.88;
    --of-leading-title: 0.96;
    --of-leading-heading: 1.08;
    --of-leading-body: 1.45;
    --of-tracking-display: -0.025em;
    --of-tracking-ui: -0.015em;
    --of-tracking-tech: 0.07em;

    /* Spacing */
    --of-space-0: 0;
    --of-space-1: 0.25rem;
    --of-space-2: 0.5rem;
    --of-space-3: 0.75rem;
    --of-space-4: 1rem;
    --of-space-5: 1.25rem;
    --of-space-6: 1.5rem;
    --of-space-8: 2rem;
    --of-space-10: 2.5rem;
    --of-space-12: 3rem;
    --of-space-16: 4rem;
    --of-space-20: 5rem;
    --of-space-24: 6rem;

    /* Shape */
    --of-radius-sm: 0.75rem;
    --of-radius-md: 1rem;
    --of-radius-lg: 1.5rem;
    --of-radius-xl: 2rem;
    --of-radius-2xl: 2.5rem;
    --of-radius-3xl: 3.5rem;
    --of-radius-pill: 999px;
    --of-border-thin: 1px;
    --of-border-strong: 2px;

    /* Elevation */
    --of-shadow-panel: 0 1.5rem 4rem rgb(7 5 9 / 40%);
    --of-shadow-object: 1.5rem 2.25rem 1.25rem rgb(42 22 144 / 34%);
    --of-shadow-action: 0 0.75rem 2rem rgb(255 75 10 / 22%);
    --of-shadow-focus: 0 0 0 0.25rem rgb(142 255 216 / 28%);
    --of-highlight-inset: inset 0 1px 0 rgb(255 255 255 / 18%);

    /* Motion */
    --of-duration-instant: 80ms;
    --of-duration-fast: 140ms;
    --of-duration-base: 220ms;
    --of-duration-slow: 420ms;
    --of-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --of-ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2);

    /* Layout */
    --of-page-gutter: clamp(1.25rem, 5vw, 2rem);
    --of-content-sm: 32rem;
    --of-content-md: 42.5rem;
    --of-content-lg: 72rem;
    --of-site-header-min-block-size: 5rem;
    --of-site-header-logo-inline-size: clamp(7.25rem, 31vw, 9.5rem);
    --of-touch-target: 3rem;
    --of-control-height: 3.5rem;
    --of-cta-height: 4rem;
  }
}

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body,
  h1,
  h2,
  h3,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  body {
    min-block-size: 100%;
  }

  img,
  picture,
  svg,
  video {
    display: block;
    max-inline-size: 100%;
  }

  img,
  video {
    block-size: auto;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }

  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  fieldset {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
}

@layer base {
  body {
    background: var(--of-color-page);
    color: var(--of-color-text);
    font-family: var(--of-font-sans);
    font-size: var(--of-text-body);
    line-height: var(--of-leading-body);
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-underline-offset: 0.18em;
  }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--of-color-focus);
    outline-offset: 3px;
    box-shadow: var(--of-shadow-focus);
  }

  ::selection {
    background: var(--of-color-focus);
    color: var(--of-color-text-on-bright);
  }

  .of-logo {
    display: block;
    inline-size: clamp(8rem, 32vw, 15rem);
    block-size: auto;
  }

  .of-display,
  .of-title,
  .of-heading {
    color: var(--of-color-text);
    font-family: var(--of-font-display);
    font-weight: 900;
    text-wrap: balance;
    text-transform: uppercase;
  }

  .of-display {
    font-size: var(--of-text-display);
    letter-spacing: var(--of-tracking-display);
    line-height: var(--of-leading-display);
  }

  .of-display--xl {
    font-size: var(--of-text-display-xl);
  }

  .of-title {
    font-size: var(--of-text-title);
    letter-spacing: var(--of-tracking-display);
    line-height: var(--of-leading-title);
  }

  .of-heading {
    font-size: var(--of-text-heading);
    letter-spacing: -0.015em;
    line-height: var(--of-leading-heading);
  }

  .of-subheading {
    font-size: var(--of-text-subheading);
    font-weight: 800;
    letter-spacing: var(--of-tracking-ui);
    line-height: 1.15;
  }

  .of-body {
    color: var(--of-color-text);
    font-size: var(--of-text-body);
    line-height: var(--of-leading-body);
  }

  .of-body--large {
    font-size: var(--of-text-body-lg);
    font-weight: 650;
  }

  .of-muted {
    color: var(--of-color-text-muted);
  }

  .of-eyebrow,
  .of-tech {
    font-family: var(--of-font-tech);
    font-size: var(--of-text-small);
    font-weight: 700;
    letter-spacing: var(--of-tracking-tech);
    line-height: 1.2;
    text-transform: uppercase;
  }

  .of-microcopy {
    color: var(--of-color-text-muted);
    font-family: var(--of-font-tech);
    font-size: var(--of-text-micro);
    letter-spacing: 0.06em;
    line-height: 1.45;
    text-transform: uppercase;
  }
}

@layer layout {
  .of-page {
    min-block-size: 100svh;
    overflow-x: clip;
    background:
      radial-gradient(circle at 90% -10%, rgb(98 93 245 / 15%), transparent 34rem),
      var(--of-color-page);
    color: var(--of-color-text);
  }

  .of-screen {
    display: flex;
    min-block-size: 100svh;
    flex-direction: column;
  }

  .of-screen--viewport {
    min-block-size: 100dvh;
  }

  .of-container {
    inline-size: min(100%, var(--of-content-lg));
    min-inline-size: 0;
    margin-inline: auto;
    padding-inline: var(--of-page-gutter);
  }

  .of-container--narrow {
    max-inline-size: var(--of-content-sm);
  }

  .of-container--quiz {
    max-inline-size: var(--of-content-md);
  }

  .of-section {
    padding-block: clamp(var(--of-space-12), 10vw, var(--of-space-24));
  }

  .of-screen-header {
    display: flex;
    min-block-size: 4.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--of-space-4);
    padding:
      max(var(--of-space-4), env(safe-area-inset-top))
      var(--of-page-gutter)
      var(--of-space-3);
  }

  .of-screen-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding-block: var(--of-space-6) var(--of-space-10);
  }

  .of-screen-footer {
    padding:
      var(--of-space-4)
      var(--of-page-gutter)
      max(var(--of-space-4), env(safe-area-inset-bottom));
  }

  .of-sticky-action {
    position: sticky;
    z-index: 10;
    bottom: 0;
    background: linear-gradient(180deg, rgb(15 12 19 / 0%), var(--of-color-page) 32%);
    padding-block-start: var(--of-space-8);
  }

  .of-stack {
    display: flex;
    flex-direction: column;
    gap: var(--of-stack-space, var(--of-space-6));
  }

  .of-cluster {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--of-cluster-space, var(--of-space-3));
  }

  .of-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--of-grid-space, var(--of-space-6));
  }

  .of-brand-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--of-gradient-brand);
    color: var(--of-color-text-on-brand);
    border-radius: var(--of-radius-3xl);
    box-shadow: var(--of-shadow-panel);
  }

  .of-brand-panel::before {
    position: absolute;
    z-index: -1;
    background: linear-gradient(
      90deg,
      rgb(15 12 19 / 30%) 0%,
      rgb(15 12 19 / 14%) 58%,
      rgb(15 12 19 / 0%) 100%
    );
    content: "";
    inset: 0;
  }

  .of-brand-panel::after {
    position: absolute;
    z-index: -1;
    inline-size: 20rem;
    block-size: 20rem;
    border-radius: 50%;
    background: rgb(50 27 158 / 24%);
    content: "";
    filter: blur(1px);
    inset: auto -8rem -10rem auto;
  }
}

@layer components {
  .of-language-switcher {
    position: relative;
    z-index: 40;
    flex: 0 0 auto;
  }

  .of-language-switcher summary {
    display: inline-flex;
    min-inline-size: 4.5rem;
    min-block-size: var(--of-touch-target);
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: var(--of-radius-pill);
    padding-inline: 0.85rem;
    background: rgb(34 30 42 / 84%);
    color: var(--of-color-text);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 850;
    letter-spacing: 0.025em;
    line-height: 1;
    list-style: none;
    transition:
      border-color var(--of-duration-fast) var(--of-ease-out),
      background-color var(--of-duration-fast) var(--of-ease-out),
      color var(--of-duration-fast) var(--of-ease-out);
    user-select: none;
  }

  .of-language-switcher summary::-webkit-details-marker {
    display: none;
  }

  .of-language-switcher summary::marker {
    content: "";
  }

  .of-language-switcher summary svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    flex: 0 0 auto;
  }

  .of-language-switcher[open] summary,
  .of-language-switcher summary:focus-visible {
    border-color: var(--of-color-focus);
    box-shadow: var(--of-shadow-focus);
    outline: none;
  }

  .of-language-switcher__menu {
    position: absolute;
    z-index: 50;
    inset-block-start: calc(100% + var(--of-space-2));
    inset-inline-end: 0;
    display: grid;
    inline-size: min(14rem, calc(100vw - 2rem));
    max-block-size: min(70svh, 30rem);
    gap: var(--of-space-1);
    overflow-y: auto;
    border: 1px solid rgb(255 255 255 / 16%);
    border-radius: var(--of-radius-lg);
    padding: var(--of-space-2);
    background: rgb(15 12 19 / 98%);
    box-shadow: var(--of-shadow-panel);
    overscroll-behavior: contain;
  }

  .of-language-switcher__menu a {
    display: flex;
    min-block-size: var(--of-touch-target);
    align-items: center;
    gap: var(--of-space-2);
    border-radius: var(--of-radius-sm);
    padding-inline: var(--of-space-3);
    color: var(--of-color-text-muted);
    font-size: 0.9rem;
    font-weight: 750;
    text-decoration: none;
  }

  .of-language-switcher__menu a > span {
    inline-size: 2.6rem;
    flex: 0 0 auto;
    font-family: var(--of-font-tech);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.05em;
  }

  .of-language-switcher bdi {
    direction: ltr;
    unicode-bidi: isolate;
  }

  .of-language-switcher__menu a > strong {
    min-inline-size: 0;
    flex: 1;
  }

  .of-language-switcher__menu a[aria-current="page"] {
    background: var(--of-gradient-brand-soft);
    color: var(--of-color-text-on-bright);
  }

  .of-button {
    display: inline-flex;
    min-block-size: var(--of-control-height);
    align-items: center;
    justify-content: center;
    gap: var(--of-space-4);
    border: var(--of-border-thin) solid transparent;
    border-radius: var(--of-radius-pill);
    padding: 0.5rem 0.75rem 0.5rem 1.75rem;
    appearance: none;
    cursor: pointer;
    font-weight: 900;
    letter-spacing: var(--of-tracking-ui);
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition:
      transform var(--of-duration-fast) var(--of-ease-out),
      filter var(--of-duration-fast) var(--of-ease-out),
      box-shadow var(--of-duration-fast) var(--of-ease-out);
    user-select: none;
  }

  .of-button--large {
    min-block-size: var(--of-cta-height);
    font-size: 1.125rem;
  }

  .of-button--primary {
    background: var(--of-gradient-cta);
    box-shadow: var(--of-shadow-action), var(--of-highlight-inset);
    color: var(--of-color-text-on-bright);
  }

  .of-button--promo {
    background: var(--of-gradient-promo);
    box-shadow: var(--of-shadow-action), var(--of-highlight-inset);
    color: var(--of-color-text-on-bright);
  }

  .of-button--secondary {
    background: var(--of-paper);
    color: var(--of-color-text-on-bright);
  }

  .of-button--ghost {
    border-color: var(--of-color-border);
    background: rgb(255 255 255 / 4%);
    color: var(--of-color-text);
  }

  .of-button--compact {
    min-block-size: var(--of-touch-target);
    padding-inline-start: var(--of-space-5);
    font-size: var(--of-text-small);
  }

  .of-button--full {
    inline-size: 100%;
  }

  .of-button__label {
    flex: 1;
    text-align: center;
  }

  .of-button__icon {
    display: inline-grid;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: var(--of-color-page);
    color: var(--of-color-text);
  }

  .of-button__icon svg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .of-button:active:not(:disabled, [aria-disabled="true"]) {
    transform: scale(0.98);
  }

  .of-button:disabled,
  .of-button[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(0.35);
    opacity: 0.52;
  }

  .of-button[aria-busy="true"] {
    cursor: progress;
  }

  .of-icon-button {
    display: inline-grid;
    inline-size: var(--of-touch-target);
    block-size: var(--of-touch-target);
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: transparent;
    color: currentColor;
    cursor: pointer;
    transition:
      background-color var(--of-duration-fast) var(--of-ease-out),
      transform var(--of-duration-fast) var(--of-ease-out);
  }

  .of-icon-button--filled {
    background: var(--of-color-surface);
  }

  .of-icon-button--light {
    background: var(--of-paper);
    color: var(--of-color-text-on-bright);
  }

  .of-icon-button svg {
    inline-size: 1.65rem;
    block-size: 1.65rem;
  }

  .of-icon-button:active:not(:disabled) {
    transform: scale(0.94);
  }

  .of-card {
    overflow: hidden;
    border: var(--of-border-thin) solid var(--of-color-border-subtle);
    border-radius: var(--of-radius-xl);
    background: var(--of-color-surface);
    box-shadow: var(--of-highlight-inset);
  }

  .of-card--raised {
    background: var(--of-color-surface-raised);
    box-shadow: var(--of-shadow-panel), var(--of-highlight-inset);
  }

  .of-card__header,
  .of-card__body,
  .of-card__footer {
    padding: var(--of-space-6);
  }

  .of-card__header + .of-card__body,
  .of-card__body + .of-card__footer {
    padding-block-start: 0;
  }

  .of-feature-card {
    display: flex;
    min-block-size: 22rem;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--of-radius-xl);
    background: var(--of-color-page-deep);
    box-shadow: var(--of-shadow-panel);
  }

  .of-feature-card__visual {
    display: flex;
    min-block-size: 10rem;
    align-items: flex-end;
    padding: var(--of-space-6);
    background: var(--of-gradient-brand);
    color: var(--of-color-text-on-bright);
  }

  .of-feature-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--of-space-6);
    justify-content: space-between;
    padding: var(--of-space-6);
  }

  .of-option-group {
    display: grid;
    gap: var(--of-space-3);
  }

  .of-option-group__legend {
    margin-block-end: var(--of-space-4);
    font-size: var(--of-text-subheading);
    font-weight: 800;
  }

  .of-option {
    position: relative;
    display: grid;
    min-block-size: 4rem;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--of-space-4);
    border: var(--of-border-strong) solid transparent;
    border-radius: var(--of-radius-lg);
    padding: var(--of-space-4) var(--of-space-4) var(--of-space-4) var(--of-space-5);
    background: var(--of-color-surface);
    box-shadow: var(--of-highlight-inset);
    cursor: pointer;
    transition:
      border-color var(--of-duration-base) var(--of-ease-out),
      background var(--of-duration-base) var(--of-ease-out),
      transform var(--of-duration-fast) var(--of-ease-out);
  }

  .of-option--media {
    min-block-size: 5.5rem;
    grid-template-columns: 4rem 1fr auto;
    padding: var(--of-space-2) var(--of-space-4) var(--of-space-2) var(--of-space-2);
  }

  .of-option__control {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .of-option__media {
    inline-size: 4rem;
    block-size: 4rem;
    overflow: hidden;
    border-radius: var(--of-radius-md);
    background: var(--of-gradient-brand);
  }

  .of-option__content {
    min-inline-size: 0;
  }

  .of-option__title {
    display: block;
    font-size: 1.125rem;
    font-weight: 850;
    letter-spacing: var(--of-tracking-ui);
    line-height: 1.15;
  }

  .of-option__description {
    display: block;
    margin-block-start: var(--of-space-1);
    color: var(--of-color-text-muted);
    font-size: var(--of-text-small);
    font-weight: 650;
    line-height: 1.3;
  }

  .of-option__indicator {
    display: inline-grid;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    place-items: center;
    border: var(--of-border-strong) solid var(--of-color-border);
    border-radius: 50%;
    background: rgb(15 12 19 / 55%);
  }

  .of-option__indicator::after {
    inline-size: 0.75rem;
    block-size: 0.42rem;
    border-block-end: 0.2rem solid currentColor;
    border-inline-start: 0.2rem solid currentColor;
    color: var(--of-color-focus);
    content: "";
    opacity: 0;
    transform: rotate(-45deg) translateY(-0.08rem);
  }

  .of-option:has(.of-option__control:checked),
  .of-option[data-state="checked"] {
    border-color: rgb(255 255 255 / 18%);
    background: var(--of-gradient-brand-soft);
    color: var(--of-color-text-on-bright);
  }

  .of-option:has(.of-option__control:focus-visible) {
    outline: 3px solid var(--of-color-focus);
    outline-offset: 3px;
    box-shadow: var(--of-shadow-focus);
  }

  .of-option:has(.of-option__control:checked) .of-option__description,
  .of-option[data-state="checked"] .of-option__description {
    color: rgb(15 12 19 / 76%);
  }

  .of-option:has(.of-option__control:checked) .of-option__indicator::after,
  .of-option[data-state="checked"] .of-option__indicator::after {
    opacity: 1;
  }

  .of-option:has(.of-option__control:disabled),
  .of-option[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(0.32);
    opacity: 0.58;
  }

  .of-field {
    display: grid;
    gap: var(--of-space-2);
  }

  .of-field__label {
    font-size: var(--of-text-small);
    font-weight: 800;
  }

  .of-field__control {
    inline-size: 100%;
    min-block-size: var(--of-control-height);
    border: var(--of-border-strong) solid var(--of-color-border);
    border-radius: var(--of-radius-md);
    padding-inline: var(--of-space-4);
    appearance: none;
    background: var(--of-color-surface-soft);
    color: var(--of-color-text);
    font-size: 1rem;
    transition:
      border-color var(--of-duration-fast) var(--of-ease-out),
      box-shadow var(--of-duration-fast) var(--of-ease-out);
  }

  .of-field__control::placeholder {
    color: var(--of-color-text-subtle);
    opacity: 1;
  }

  .of-field__control:focus {
    border-color: var(--of-color-focus);
  }

  .of-field__hint,
  .of-field__error {
    font-size: var(--of-text-small);
    line-height: 1.35;
  }

  .of-field__hint {
    color: var(--of-color-text-muted);
  }

  .of-field__error {
    color: var(--of-color-error);
  }

  .of-field__control[aria-invalid="true"],
  .of-field--error .of-field__control {
    border-color: var(--of-color-error);
  }

  .of-progress {
    display: grid;
    gap: var(--of-space-2);
  }

  .of-progress__meta {
    display: flex;
    justify-content: space-between;
    gap: var(--of-space-4);
    color: var(--of-color-text-muted);
    font-family: var(--of-font-tech);
    font-size: var(--of-text-micro);
    font-weight: 700;
    letter-spacing: var(--of-tracking-tech);
    text-transform: uppercase;
  }

  .of-progress__track {
    display: block;
    block-size: 0.5rem;
    overflow: hidden;
    border-radius: var(--of-radius-pill);
    background: var(--of-color-surface);
  }

  .of-progress__value {
    display: block;
    inline-size: var(--of-progress-value, 0%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--of-gradient-sync);
    transition: inline-size var(--of-duration-base) var(--of-ease-out);
  }

  .of-badge {
    display: inline-flex;
    min-block-size: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--of-radius-pill);
    padding: 0.35rem 0.75rem;
    background: var(--of-color-surface-raised);
    color: var(--of-color-text);
    font-family: var(--of-font-tech);
    font-size: var(--of-text-micro);
    font-weight: 800;
    letter-spacing: var(--of-tracking-tech);
    line-height: 1;
    text-transform: uppercase;
  }

  .of-badge--outline {
    border: var(--of-border-thin) solid var(--of-color-border);
    background: transparent;
    color: var(--of-color-text-muted);
  }

  .of-badge--promo {
    background: var(--of-pink-500);
    color: var(--of-color-text-on-bright);
  }

  .of-badge--success {
    background: var(--of-color-success);
    color: var(--of-color-text-on-bright);
  }

  .of-track {
    display: grid;
    min-block-size: 4rem;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--of-space-3);
    border-radius: var(--of-radius-md);
    padding: var(--of-space-2);
  }

  .of-track[data-state="playing"] {
    background: var(--of-gradient-brand-soft);
    color: var(--of-color-text-on-bright);
  }

  .of-track__art {
    display: grid;
    inline-size: 3rem;
    block-size: 3rem;
    place-items: center;
    border-radius: var(--of-radius-md);
    background:
      linear-gradient(90deg, transparent 36%, rgb(31 17 101 / 55%) 36% 44%, transparent 44% 64%, rgb(31 17 101 / 55%) 64% 72%, transparent 72%),
      var(--of-gradient-brand);
    color: var(--of-color-text-on-bright);
    font-size: 1.5rem;
  }

  .of-track__content {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--of-space-2);
  }

  .of-track__title {
    overflow: hidden;
    font-size: 1rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .of-track[data-state="idle"] {
    color: var(--of-color-text-muted);
  }

  .of-pricing-card {
    overflow: hidden;
    border-radius: var(--of-radius-2xl);
    background: var(--of-paper);
    box-shadow: var(--of-shadow-panel);
    color: var(--of-color-text-on-bright);
  }

  .of-pricing-card__hero {
    min-block-size: 10rem;
    padding: var(--of-space-8) var(--of-space-6);
    background: var(--of-gradient-promo);
  }

  .of-pricing-card__body {
    display: grid;
    gap: var(--of-space-3);
    padding: var(--of-space-6);
  }

  .of-pricing-card__price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--of-space-2);
  }

  .of-pricing-card__old-price {
    color: var(--of-pink-500);
    font-size: 1.5rem;
    font-weight: 850;
    text-decoration: line-through 0.18rem;
  }

  .of-pricing-card__price {
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 950;
    letter-spacing: -0.045em;
    line-height: 1;
  }

  .of-pricing-card__period {
    font-size: 1.125rem;
    font-weight: 700;
  }

  .of-pricing-card__billing {
    color: #504b56;
    font-size: var(--of-text-small);
    font-weight: 650;
  }

  .of-purchase-modal {
    --of-color-text: #30313d;
    --of-color-text-muted: #62636b;
    --of-color-border: #e3e3e7;
    --of-color-focus: #2d64ff;
    --of-color-error: #b42318;
    --of-shadow-focus: 0 0 0 5px rgb(45 100 255 / 15%);
    color-scheme: light;
    position: fixed;
    inline-size: min(52.5rem, calc(100% - var(--of-space-8)));
    max-block-size: calc(100dvh - var(--of-space-8));
    margin: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--of-color-text);
    font-family: var(--of-font-sans);
    font-size: var(--of-text-body);
    line-height: var(--of-leading-body);
  }

  .of-purchase-modal::backdrop {
    background: rgb(0 0 0 / 72%);
  }

  .of-purchase-modal__panel {
    position: relative;
    border-radius: clamp(1.5rem, 5vw, 2.5rem);
    padding: clamp(var(--of-space-6), 6vw, 3.5rem);
    background: #ffffff;
  }

  .of-purchase-modal__close {
    position: absolute;
    inset-block-start: var(--of-space-4);
    inset-inline-end: var(--of-space-4);
    color: #85858c;
  }

  .of-purchase-modal__close:hover:not(:disabled) {
    background: #f0f0f3;
  }

  .of-purchase-modal__header {
    display: flex;
    align-items: center;
    gap: clamp(var(--of-space-3), 3vw, 1.75rem);
    padding-inline-end: var(--of-space-8);
  }

  .of-purchase-modal__icon {
    inline-size: clamp(3.5rem, 12vw, 5rem);
    block-size: auto;
    flex: 0 0 auto;
    border-radius: var(--of-radius-lg);
  }

  .of-purchase-modal__brand {
    margin-block-end: var(--of-space-2);
    color: var(--of-color-text-muted);
    font-size: clamp(0.875rem, 2.5vw, 1.5rem);
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .of-purchase-modal__title {
    font-size: clamp(1.375rem, 5vw, 2.5rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.1;
  }

  .of-purchase-modal__price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--of-space-4);
    margin-block: var(--of-space-8) var(--of-space-3);
  }

  .of-purchase-modal__price {
    font-size: clamp(3rem, 10vw, 4rem);
    font-weight: 850;
    letter-spacing: -0.06em;
    line-height: 1;
  }

  .of-purchase-modal__period {
    color: var(--of-color-text-muted);
    font-size: clamp(1.125rem, 4vw, 1.75rem);
    font-weight: 650;
  }

  .of-purchase-modal__billing {
    color: var(--of-color-text-muted);
    font-size: clamp(1rem, 2.75vw, 1.5rem);
    line-height: 1.4;
  }

  .of-purchase-modal__billing span {
    display: inline-block;
  }

  .of-purchase-modal__payments {
    margin-block-start: var(--of-space-8);
    border-block-start: 1px solid var(--of-color-border);
    padding-block-start: var(--of-space-6);
  }

  .of-purchase-modal__label {
    margin-block-end: var(--of-space-4);
    color: var(--of-color-text-muted);
    font-size: clamp(0.875rem, 2.5vw, 1.375rem);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .of-purchase-modal__actions {
    --of-wallet-native-height: clamp(40px, 4rem, 55px);
    --of-wallet-mark-height: calc(var(--of-wallet-native-height) * 7.3 / 15);
    --of-wallet-mark-width: calc(var(--of-wallet-mark-height) * 105 / 43);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--of-space-4);
  }

  .of-purchase-modal__payment {
    inline-size: 100%;
    block-size: var(--of-wallet-native-height);
    min-block-size: var(--of-wallet-native-height);
    gap: clamp(var(--of-space-1), 1vw, var(--of-space-2));
    border-radius: clamp(0.875rem, 2.5vw, 1.25rem);
    padding: 0 clamp(var(--of-space-2), 2vw, var(--of-space-4));
    box-shadow: none;
    font-size: clamp(1.125rem, 4vw, 2rem);
    letter-spacing: -0.025em;
    text-transform: none;
  }

  .of-purchase-modal__payment svg {
    inline-size: clamp(1.5rem, 4vw, 2rem);
    block-size: clamp(1.5rem, 4vw, 2rem);
    flex: 0 0 auto;
  }

  .of-purchase-modal__wallet-option {
    position: relative;
    min-inline-size: 0;
  }

  .of-purchase-modal__wallet-option.has-wallet .of-purchase-modal__payment--wallet {
    display: none;
  }

  .of-purchase-modal__wallet {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    inline-size: 100%;
    min-inline-size: 0;
    block-size: var(--of-wallet-native-height);
    border-radius: clamp(0.875rem, 2.5vw, 1.25rem);
    background: transparent;
    visibility: hidden;
  }

  .of-purchase-modal__wallet > div {
    /* Stripe owns this wrapper's geometry. Keep its iframe overflow unclipped. */
    inline-size: 100%;
  }

  .of-purchase-modal__wallet-option.has-wallet .of-purchase-modal__wallet {
    position: relative;
    visibility: visible;
  }

  .of-purchase-modal__wallet[aria-busy="true"]::after {
    content: "Openning...";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
    color: #fff;
    background: #000;
    font-size: 1.5rem;
    font-weight: 650;
    pointer-events: none;
  }

  .of-purchase-modal__payment[aria-busy="true"]:not(.is-loading) svg,
  .of-purchase-modal__payment.is-opening svg {
    display: none;
  }

  .of-purchase-modal__payment--wallet {
    position: relative;
  }

  .of-purchase-modal__payment--wallet:disabled {
    filter: none;
    opacity: 1;
  }

  .of-purchase-modal__payment.has-wallet-mark:not(.is-opening) > span {
    display: none;
  }

  .of-purchase-modal__payment svg.of-purchase-modal__wallet-mark {
    /* Apple's plain button uses a 7.3-high mark in its 15-high viewport. */
    block-size: var(--of-wallet-mark-height);
    inline-size: auto;
    aspect-ratio: 105 / 43;
  }

  .of-purchase-modal__wallet-mark image {
    filter: var(--of-wallet-mark-filter, none);
  }

  .of-purchase-modal__spinner {
    display: none;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0.625rem;
    margin-block: auto;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border: 2px solid rgb(255 255 255 / 35%);
    border-block-start-color: #fff;
    border-radius: 50%;
    pointer-events: none;
  }

  .is-loading .of-purchase-modal__spinner {
    display: block;
    animation: of-wallet-spin 0.75s linear infinite;
  }

  .has-wallet-mark:not(.is-opening) .of-purchase-modal__spinner,
  .of-purchase-modal__payment--google:not(.is-opening) .of-purchase-modal__spinner {
    inset-inline-start: calc(50% + var(--of-wallet-mark-width) / 2 + 0.5rem);
    inset-inline-end: auto;
  }

  @keyframes of-wallet-spin {
    to { transform: rotate(360deg); }
  }

  @media (max-width: 22rem) {
    .of-purchase-modal__spinner {
      inline-size: 0.625rem;
      block-size: 0.625rem;
      inset-inline-end: 0.25rem;
    }

    .has-wallet-mark:not(.is-opening) .of-purchase-modal__spinner,
    .of-purchase-modal__payment--google:not(.is-opening) .of-purchase-modal__spinner {
      inset-inline-start: calc(50% + var(--of-wallet-mark-width) / 2 + 0.25rem);
    }

    .of-purchase-modal__payment.is-loading.is-opening > span {
      transform: translateX(-0.375rem);
    }
  }

  .of-purchase-modal__payment--apple,
  .of-purchase-modal__payment--google {
    border-color: #000000;
    background: #000000;
    color: var(--of-white);
    font-weight: 650;
  }

  .of-purchase-modal__payment--card {
    border-color: #2d64ff;
    background: #2d64ff;
    color: #ffffff;
    font-weight: 750;
  }

  .of-purchase-modal__payment--google:not(.is-opening) {
    /* Match Google's plain button artwork and its content-box geometry. */
    --of-wallet-mark-width: min(70%, calc((var(--of-wallet-native-height) - 22px) * 41 / 17));
    border: 0;
    padding: 12px 15% 10px;
    box-shadow: inset 0 0 0 1px #757575;
  }

  .of-purchase-modal__payment--google:not(.is-opening)::before {
    content: "";
    position: absolute;
    inset: 12px 15% 10px;
    background-image: url("../images/payments/google-pay-mark-white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--of-wallet-mark-filter, none);
    pointer-events: none;
  }

  .of-purchase-modal__payment--google:not(.is-opening) > svg,
  .of-purchase-modal__payment--google:not(.is-opening) > span {
    display: none;
  }

  .of-purchase-modal__wallet-option.is-unavailable .of-purchase-modal__payment--wallet,
  .of-purchase-modal__payment--wallet:disabled:not(.is-loading):not(.is-opening) {
    --of-wallet-mark-filter: grayscale(1) brightness(0) invert(0.54);
    border-color: #e3e3e7;
    background: #eeeef0;
    color: #898989;
    box-shadow: inset 0 0 0 1px #e3e3e7;
    cursor: not-allowed;
  }

  .of-purchase-modal__payment--card:not(.is-opening) {
    /* Google Pay's P is 11.693/17 of its mark; Google Sans cap height is .716em. */
    padding-inline: 0.25rem;
    font-family: "OnlyFit Google Sans", Arial, sans-serif;
    font-size: calc((var(--of-wallet-native-height) - 22px) * 11.693 / 17 / 0.716);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
  }

  .of-purchase-modal__actions:has(.of-purchase-modal__payment--apple) .of-purchase-modal__payment--card:not(.is-opening) {
    /* Match the Pay lettering's 32.028-high capital in Apple's 43-high mark. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: calc(var(--of-wallet-mark-height) * 32.028 / 43 / 0.705);
    font-weight: 500;
    letter-spacing: -0.02em;
  }

  .of-purchase-modal[aria-busy="true"] {
    cursor: progress;
  }

  .of-purchase-modal__status {
    margin-block-start: var(--of-space-4);
    color: var(--of-color-focus);
    font-size: var(--of-text-small);
    text-align: center;
  }

  .of-purchase-modal__status[role="alert"] {
    color: var(--of-color-error);
  }

  .of-purchase-modal__methods {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    margin: var(--of-space-5) 0 0;
    padding: 0;
    list-style: none;
  }

  .of-purchase-modal__method {
    display: flex;
    min-inline-size: 2.4rem;
    block-size: 1.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    border: 0.8px solid var(--of-color-border);
    border-radius: 0.3rem;
    padding-inline: 0.32rem;
    color: var(--of-color-text-muted);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 1;
  }

  .of-purchase-modal__method svg {
    inline-size: 0.8rem;
    block-size: 0.8rem;
  }

  .of-purchase-modal__method--mastercard svg {
    inline-size: 1.8rem;
    block-size: 1.2rem;
  }

  /* Payment marks retain their own brand colors across OnlyFit themes. */
  .of-purchase-modal__method--visa {
    border-color: #283475;
    background: #283475;
    color: #ffffff;
  }

  .of-purchase-modal__method--mastercard {
    border-color: #f5ebd6;
    background: #f5ebd6;
  }

  .of-purchase-modal__method--amex {
    border-color: #006fcf;
    background: #006fcf;
    color: #ffffff;
    font-size: 0.4rem;
    font-weight: 900;
    line-height: 1.05;
    text-align: center;
  }

  .of-purchase-modal__method--unionpay {
    border-color: transparent;
    background: linear-gradient(110deg, #e21836 0% 33%, #00447c 33% 66%, #007b84 66% 100%);
    color: #ffffff;
    font-size: 0.5rem;
  }

  .of-purchase-modal__security {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--of-space-2);
    margin-block-start: var(--of-space-6);
    color: var(--of-color-text-muted);
    font-size: clamp(0.875rem, 2vw, 1rem);
    text-align: center;
  }

  .of-purchase-modal__stripe {
    display: block;
    inline-size: 9.375rem;
    max-inline-size: calc(100% - var(--of-space-8));
    margin: var(--of-space-6) auto var(--of-space-2);
    border-radius: 0.375rem;
  }

  .of-purchase-modal__stripe img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  @media (min-width: 48rem) {
    .of-purchase-modal {
      inline-size: min(26.25rem, calc(100% - var(--of-space-8)));
    }

    .of-purchase-modal__panel {
      border-radius: 1.25rem;
      padding: 1.75rem;
    }

    .of-purchase-modal__close {
      inset-block-start: 0.5rem;
      inset-inline-end: 0.5rem;
    }

    .of-purchase-modal__header {
      gap: 0.875rem;
      padding-inline-end: 1rem;
    }

    .of-purchase-modal__icon {
      inline-size: 3.5rem;
    }

    .of-purchase-modal__brand {
      margin-block-end: 0.25rem;
      font-size: 0.875rem;
    }

    .of-purchase-modal__title {
      font-size: 1.25rem;
    }

    .of-purchase-modal__price-line {
      gap: 0.5rem;
      margin-block: 1rem 0.375rem;
    }

    .of-purchase-modal__price {
      font-size: 2rem;
    }

    .of-purchase-modal__period {
      font-size: 1rem;
    }

    .of-purchase-modal__billing {
      font-size: 0.875rem;
    }

    .of-purchase-modal__payments {
      margin-block-start: 1rem;
      padding-block-start: 1rem;
    }

    .of-purchase-modal__label {
      margin-block-end: 0.75rem;
      font-size: 0.8125rem;
      line-height: 1.2;
    }

    .of-purchase-modal__actions {
      --of-wallet-native-height: clamp(40px, 3rem, 55px);
      gap: 0.5rem;
    }

    .of-purchase-modal__payment {
      gap: 0.25rem;
      border-radius: 0.625rem;
      padding: 0 0.5rem;
      font-size: 1.125rem;
    }

    .of-purchase-modal__payment svg {
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }

    .of-purchase-modal__wallet {
      border-radius: 0.625rem;
    }

    .of-purchase-modal__wallet[aria-busy="true"]::after {
      font-size: 1.125rem;
    }

    .of-purchase-modal__methods {
      gap: 0.25rem;
      margin-block-start: 0.75rem;
    }

    .of-purchase-modal__method {
      min-inline-size: 1.8125rem;
      block-size: 1.25rem;
      border-radius: 0.1875rem;
      padding-inline: 0.1875rem;
      font-size: 0.45rem;
    }

    .of-purchase-modal__method--mastercard svg {
      inline-size: 1.25rem;
      block-size: 0.875rem;
    }

    .of-purchase-modal__method--amex {
      font-size: 0.3rem;
    }

    .of-purchase-modal__method--unionpay {
      font-size: 0.375rem;
    }

    .of-purchase-modal__security {
      margin-block-start: 1rem;
      font-size: 0.8125rem;
    }

    .of-purchase-modal__stripe {
      inline-size: 7.25rem;
      margin-block-start: 1rem;
    }
  }

  .of-app-cta {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--of-space-5);
    overflow: hidden;
    border: 1px solid rgb(142 255 216 / 24%);
    border-radius: var(--of-radius-2xl);
    padding: clamp(var(--of-space-8), 7vw, var(--of-space-12));
    background:
      radial-gradient(circle at 50% 0%, rgb(98 93 245 / 20%), transparent 22rem),
      linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%)),
      #17141c;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
    text-align: center;
  }

  .of-app-cta::before {
    position: absolute;
    inset: 0 12% auto;
    block-size: 1px;
    background: linear-gradient(90deg, transparent, rgb(142 255 216 / 70%), transparent);
    content: "";
  }

  .of-app-cta__eyebrow {
    color: var(--of-color-focus);
  }

  .of-app-cta__title {
    max-inline-size: 48rem;
    margin: 0;
    color: var(--of-color-text);
    font-size: clamp(1.65rem, 5vw, 2.75rem);
    font-weight: 850;
    letter-spacing: -0.04em;
    line-height: 1.08;
    text-wrap: balance;
  }

  .of-app-cta__stores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--of-space-3);
    margin: var(--of-space-2) 0 0;
    padding: 0;
    flex-wrap: wrap;
    list-style: none;
  }

  .of-app-cta__stores li {
    display: flex;
    inline-size: clamp(9.25rem, 26vw, 13rem);
    max-inline-size: 100%;
    aspect-ratio: 13 / 4;
    flex: 0 0 auto;
  }

  .of-app-cta__stores a {
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }

  .of-app-cta__stores img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .of-sync {
    display: inline-flex;
    min-block-size: 3.5rem;
    align-items: center;
    gap: var(--of-space-2);
    border: 0.35rem solid transparent;
    border-radius: var(--of-radius-pill);
    padding-inline: var(--of-space-5);
    background:
      linear-gradient(var(--of-color-page), var(--of-color-page)) padding-box,
      var(--of-gradient-sync) border-box;
    color: var(--of-gray-200);
    font-family: var(--of-font-display);
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
  }

  .of-sync__value {
    color: var(--of-color-text);
  }

  .of-sync__max {
    color: var(--of-color-text-subtle);
  }
}

@layer utilities {
  .of-visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }

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

  .of-width-full {
    inline-size: 100%;
  }

  .of-push-end {
    margin-block-start: auto;
  }
}

@media (min-width: 48rem) {
  :root,
  [data-theme="onlyfit"] {
    --of-page-gutter: clamp(2rem, 5vw, 4rem);
  }

  .of-screen-body {
    padding-block: var(--of-space-10) var(--of-space-16);
  }

  .of-sticky-action {
    position: static;
    background: transparent;
    padding-block-start: var(--of-space-4);
  }
}

@media (hover: hover) and (pointer: fine) {
  .of-language-switcher summary:hover {
    border-color: rgb(142 255 216 / 48%);
    background: rgb(142 255 216 / 8%);
  }

  .of-language-switcher__menu a:hover {
    background: var(--of-gradient-brand-soft);
    color: var(--of-color-text-on-bright);
  }

  .of-button:hover:not(:disabled, [aria-disabled="true"]) {
    filter: brightness(1.08) saturate(1.04);
    transform: translateY(-2px);
  }

  .of-icon-button:hover:not(:disabled) {
    background-color: rgb(255 255 255 / 12%);
  }

  .of-option:hover:not(:has(.of-option__control:disabled), [aria-disabled="true"]) {
    border-color: rgb(142 255 216 / 50%);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .of-button,
  .of-card,
  .of-option,
  .of-field__control,
  .of-app-cta,
  .of-language-switcher summary,
  .of-language-switcher__menu {
    border: 1px solid CanvasText;
  }

  .of-progress__value {
    background: Highlight;
  }
}