/*
 * AicippY for Teams — the enterprise page.
 *
 * Light is the default; dark is `html[data-theme="dark"]`, the site's one theme switch (see
 * component/site-layout.css). Every colour is a token below, and the scenes draw with the --scene-*
 * tokens, so both themes hold without a second set of art.
 *
 * Motion: each animated scene element rests in its finished state, and keyframes only move it away
 * from that and back. Reduced motion switches every animation on the page off, which leaves complete
 * still pictures. Scenes off screen are paused (data-idle, set by the scene's observer).
 */

[data-page="enterprise"] {
  --e-bg: #fbfbfe;
  --e-surface: #ffffff;
  --e-surface-2: #f4f5fb;
  --e-ink: #0f1a4d;
  --e-text: #3a4268;
  --e-soft: #596184;
  --e-line: #e1e4f0;
  --e-line-strong: #c9cee4;
  --e-accent: #5b3df5;
  --e-accent-soft: #efeaff;
  --e-brand: #16256b;
  --e-brand-hover: #22348a;
  --e-on-brand: #ffffff;
  --e-success: #0c7a3d;
  --e-success-bg: #e6f6ec;
  --e-held: #8a5200;
  --e-held-bg: #fff3dc;
  --e-focus: #5b3df5;
  --e-shadow: 0 1px 2px rgb(15 26 77 / 0.05), 0 12px 32px rgb(15 26 77 / 0.08);
  --e-shadow-strong: 0 2px 4px rgb(15 26 77 / 0.06), 0 28px 64px rgb(91 61 245 / 0.18);
  --e-hero-glow: radial-gradient(60% 60% at 70% 30%, rgb(91 61 245 / 0.1), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, rgb(16 185 129 / 0.1), transparent 70%);
  --e-held-fill: linear-gradient(135deg, #fff7e6 0%, #fdf0ff 55%, #eef6ff 100%);
  --e-cta-fill: linear-gradient(120deg, #16256b 0%, #3b0b6e 55%, #5b3df5 100%);
  --e-radius: 22px;

  --tone-roles: #fff4dc;
  --tone-together: #e8f0ff;
  --tone-memory: #fde9f1;
  --tone-seats: #e4f7ee;
  --tone-visibility: #eef0ff;
  --tone-quality: #e2f7f4;
  --tone-safe: #fff0e5;
  --tone-surfaces: #f1ecff;

  --scene-surface: #ffffff;
  --scene-surface-2: #f2f3fa;
  --scene-line: #e3e6f2;
  --scene-line-strong: #c7cce3;
  --scene-ink: #16256b;
  --scene-muted: #737a9e;
  --scene-soft: #dde1f0;
  --scene-pill: rgb(255 255 255 / 0.94);
  --scene-blob-a: rgb(16 185 129 / 0.16);
  --scene-blob-b: rgb(242 193 78 / 0.22);
  --scene-blob-c: rgb(91 61 245 / 0.14);

  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  color: var(--e-text);
  background: var(--e-bg);
  line-height: 1.6;
  overflow-x: clip;
}

:root[data-theme="dark"] [data-page="enterprise"] {
  --e-bg: #0b0a16;
  --e-surface: #13122a;
  --e-surface-2: #1a1935;
  --e-ink: #eef0ff;
  --e-text: #c3c8e6;
  --e-soft: #a2a8cc;
  --e-line: #262b4a;
  --e-line-strong: #363d66;
  --e-accent: #9b86ff;
  --e-accent-soft: #221c48;
  --e-brand: #eef0ff;
  --e-brand-hover: #ffffff;
  --e-on-brand: #0f1a4d;
  --e-success: #5fe096;
  --e-success-bg: #0f2b1d;
  --e-held: #ffc769;
  --e-held-bg: #2d2210;
  --e-focus: #9b86ff;
  --e-shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.35);
  --e-shadow-strong: 0 2px 4px rgb(0 0 0 / 0.4), 0 28px 64px rgb(155 134 255 / 0.2);
  --e-hero-glow: radial-gradient(60% 60% at 70% 30%, rgb(155 134 255 / 0.16), transparent 70%),
    radial-gradient(50% 50% at 20% 80%, rgb(52 211 153 / 0.1), transparent 70%);
  --e-held-fill: linear-gradient(135deg, #2a2010 0%, #2a1638 55%, #122038 100%);
  --e-cta-fill: linear-gradient(120deg, #1b1650 0%, #3b0b6e 55%, #5b3df5 100%);

  --tone-roles: #2b2212;
  --tone-together: #141f3a;
  --tone-memory: #2e1624;
  --tone-seats: #10281d;
  --tone-visibility: #1b1c3d;
  --tone-quality: #0f2a28;
  --tone-safe: #2d1c10;
  --tone-surfaces: #211a3f;

  --scene-surface: #17162f;
  --scene-surface-2: #201e3e;
  --scene-line: #2d2b52;
  --scene-line-strong: #423f73;
  --scene-ink: #eef0ff;
  --scene-muted: #9da3c9;
  --scene-soft: #363461;
  --scene-pill: rgb(23 22 47 / 0.94);
  --scene-blob-a: rgb(52 211 153 / 0.14);
  --scene-blob-b: rgb(242 193 78 / 0.12);
  --scene-blob-c: rgb(155 134 255 / 0.2);
}

[data-page="enterprise"] {
  /* A 1200px column with a 32px gutter; 24px on tablets, 16px on phones. */
  [data-component="container"] {
    box-sizing: content-box;
    max-width: 75rem;
    margin: 0 auto;
    padding: 0 32px;

    @media (max-width: 60rem) {
      padding: 0 24px;
    }

    @media (max-width: 40rem) {
      padding: 0 16px;
    }
  }

  :is([data-component^="ent-"], [data-component="faq"]) {
    scroll-margin-top: calc(var(--site-header-h, 64px) + 16px);
  }

  :is(h1, h2, h3) {
    color: var(--e-ink);
    margin: 0;
    text-wrap: balance;
  }

  p {
    margin: 0;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  [role="tab"]:focus-visible {
    outline: 2px solid var(--e-focus);
    outline-offset: 3px;
  }

  [data-slot="eyebrow"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--e-accent);
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--e-accent-soft);
  }

  [data-slot="section-head"] {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 14px;
    margin-bottom: 40px;

    h2 {
      font-size: 2.25rem;
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 700;
      max-width: 24ch;

      @media (max-width: 60rem) {
        font-size: 2rem;
      }

      @media (max-width: 40rem) {
        font-size: 1.75rem;
      }
    }
  }

  [data-slot="section-lead"] {
    max-width: 56ch;
    font-size: 1.0625rem;
    color: var(--e-soft);
  }

  :is([data-slot="primary"], [data-slot="secondary"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition:
      background 0.18s ease,
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }

  [data-slot="primary"] {
    background: var(--e-brand);
    color: var(--e-on-brand);
    box-shadow: var(--e-shadow);

    &:hover {
      background: var(--e-brand-hover);
      transform: translateY(-1px);
    }
  }

  [data-slot="secondary"] {
    color: var(--e-ink);
    border: 1.5px solid var(--e-line-strong);
    background: var(--e-surface);

    &:hover {
      border-color: var(--e-accent);
      transform: translateY(-1px);
    }
  }

  /* --- hero ------------------------------------------------------------------------------------ */

  [data-component="ent-hero"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 56px;
    padding: 64px 0 56px;

    @media (max-width: 75rem) {
      gap: 40px;
    }

    @media (max-width: 60rem) {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 44px 0 40px;
    }

    [data-slot="copy"] {
      display: grid;
      gap: 22px;
      justify-items: start;
    }

    h1 {
      font-size: 3.5rem;
      line-height: 1.08;
      letter-spacing: -0.03em;
      font-weight: 700;
      max-width: 15ch;

      @media (max-width: 75rem) {
        font-size: 3rem;
      }

      @media (max-width: 60rem) {
        font-size: 2.5rem;
      }

      @media (max-width: 40rem) {
        font-size: 2.125rem;
      }
    }

    [data-slot="lead"] {
      font-size: 1.125rem;
      max-width: 48ch;

      @media (max-width: 40rem) {
        font-size: 1.0625rem;
      }
    }

    [data-slot="actions"] {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    [data-slot="facts"] {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      padding: 0;
      margin: 0;
      list-style: none;
      font-size: 0.92rem;
      color: var(--e-soft);

      li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      li::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--e-success);
        box-shadow: 0 0 0 3px var(--e-success-bg);
      }
    }

    [data-slot="art"] {
      width: 100%;
      max-width: 600px;
      justify-self: end;

      @media (max-width: 60rem) {
        justify-self: center;
      }

      box-sizing: border-box;
      border-radius: 32px;
      background: var(--e-hero-glow), var(--e-surface);
      border: 1px solid var(--e-line);
      box-shadow: var(--e-shadow-strong);
      padding: 12px;
      overflow: hidden;
    }
  }

  /* --- strengths ------------------------------------------------------------------------------- */

  [data-component="ent-strengths"] {
    padding: 72px 0;

    @media (max-width: 40rem) {
      padding: 48px 0;
    }
  }

  [data-slot="stage-wrap"] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr);
    gap: 28px;
    align-items: stretch;

    @media (max-width: 60rem) {
      grid-template-columns: 1fr;
      gap: 18px;
    }
  }

  [data-slot="tabs"] {
    display: grid;
    gap: 8px;
    align-content: start;

    @media (max-width: 60rem) {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 6px;
      scrollbar-width: none;
    }

    [role="tab"] {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      text-align: start;
      padding: 16px 18px;
      border-radius: 16px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--e-text);
      font: inherit;
      cursor: pointer;
      overflow: hidden;
      transition:
        background 0.2s ease,
        border-color 0.2s ease;

      &:hover {
        background: var(--e-surface-2);
      }

      &[data-active="true"] {
        background: var(--e-surface);
        border-color: var(--e-line);
        box-shadow: var(--e-shadow);
      }

      @media (max-width: 60rem) {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 10px 14px;
        border-color: var(--e-line);
      }
    }

    [data-slot="tab-index"] {
      font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--e-soft);
      padding-top: 3px;

      [data-active="true"] > & {
        color: var(--e-accent);
      }
    }

    [data-slot="tab-text"] {
      display: grid;
      gap: 6px;
    }

    [data-slot="tab-title"] {
      font-weight: 650;
      color: var(--e-ink);
      font-size: 1.02rem;

      @media (max-width: 60rem) {
        white-space: nowrap;
        font-size: 0.95rem;
      }
    }

    [data-slot="tab-body"] {
      display: none;
      font-size: 0.95rem;
      color: var(--e-soft);

      [data-active="true"] & {
        display: block;
      }

      @media (max-width: 60rem) {
        display: none !important;
      }
    }

    [data-slot="tab-progress"] {
      position: absolute;
      inset: auto 18px 0 18px;
      height: 2px;
      border-radius: 2px;
      background: var(--e-accent);
      transform: scaleX(0);
      transform-origin: left center;

      [data-running="true"] > & {
        animation: ent-progress linear forwards;
      }
    }
  }

  [data-slot="stage"] {
    display: grid;
    align-content: center;
    gap: 12px;
    border-radius: 28px;
    border: 1px solid var(--e-line);
    background: var(--e-hero-glow), var(--e-surface);
    box-shadow: var(--e-shadow);
    padding: 20px;
    min-height: 360px;

    svg {
      max-width: 640px;
      margin: 0 auto;
      animation: ent-fade 0.45s ease both;
    }

    @media (max-width: 40rem) {
      padding: 12px;
      min-height: 0;
    }
  }

  [data-slot="stage-caption"] {
    display: none;
    text-align: center;
    color: var(--e-soft);
    padding: 0 8px 6px;

    @media (max-width: 60rem) {
      display: block;
    }
  }

  /* --- value cards ----------------------------------------------------------------------------- */

  [data-component="ent-value"] {
    padding: 40px 0 72px;
  }

  [data-slot="cards"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;

    @media (max-width: 68rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (max-width: 36rem) {
      grid-template-columns: 1fr;
    }
  }

  [data-slot="card"] {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 14px 14px 22px;
    border-radius: var(--e-radius);
    background: var(--e-surface);
    border: 1px solid var(--e-line);
    box-shadow: var(--e-shadow);
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: var(--e-shadow-strong);
    }

    h3 {
      font-size: 1.08rem;
      font-weight: 650;
      padding: 6px 8px 0;
    }

    p {
      font-size: 0.95rem;
      color: var(--e-soft);
      padding: 0 8px;
    }
  }

  [data-slot="card-art"] {
    border-radius: 16px;
    padding: 6px;
    aspect-ratio: 240 / 150;
    background: var(--tone-roles);

    [data-kind="together"] > & {
      background: var(--tone-together);
    }
    [data-kind="memory"] > & {
      background: var(--tone-memory);
    }
    [data-kind="seats"] > & {
      background: var(--tone-seats);
    }
    [data-kind="visibility"] > & {
      background: var(--tone-visibility);
    }
    [data-kind="quality"] > & {
      background: var(--tone-quality);
    }
    [data-kind="safe"] > & {
      background: var(--tone-safe);
    }
    [data-kind="surfaces"] > & {
      background: var(--tone-surfaces);
    }
  }

  /* --- team plan calculator -------------------------------------------------------------------- */

  [data-component="ent-plan"] {
    padding: 72px 0;

    @media (max-width: 40rem) {
      padding: 48px 0;
    }
  }

  [data-slot="calculator"] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    border-radius: 30px;
    background: var(--e-surface-2);
    border: 1px solid var(--e-line);

    @media (max-width: 60rem) {
      grid-template-columns: 1fr;
      padding: 16px;
      gap: 16px;
    }

    &[aria-busy="true"],
    &[data-state="error"] {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      padding: 40px 24px;
    }
  }

  [data-slot="skeleton"] {
    width: min(100%, 520px);
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--e-surface) 0%, var(--e-line) 50%, var(--e-surface) 100%);
    background-size: 200% 100%;
    animation: ent-shimmer 1.4s linear infinite;

    &[data-size="tall"] {
      height: 160px;
    }
  }

  [data-slot="status"] {
    color: var(--e-soft);
  }

  [data-slot="retry"] {
    min-height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    border: 1.5px solid var(--e-line-strong);
    background: var(--e-surface);
    color: var(--e-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  [data-slot="controls"] {
    display: grid;
    gap: 22px;
    align-content: start;
    padding: 20px;
    border-radius: 22px;
    background: var(--e-surface);
    border: 1px solid var(--e-line);
  }

  [data-slot="tiers"] {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;

    legend {
      padding: 0;
      margin-bottom: 10px;
      font-weight: 600;
      color: var(--e-ink);
    }
  }

  [data-slot="segmented"] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 6px;
    padding: 5px;
    border-radius: 14px;
    background: var(--e-surface-2);
    border: 1px solid var(--e-line);

    label {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      border-radius: 10px;
      font-weight: 600;
      color: var(--e-soft);
      cursor: pointer;
      transition:
        background 0.18s ease,
        color 0.18s ease;

      &[data-active="true"] {
        background: var(--e-brand);
        color: var(--e-on-brand);
        box-shadow: var(--e-shadow);
      }

      &:has(input:focus-visible) {
        outline: 2px solid var(--e-focus);
        outline-offset: 2px;
      }
    }

    input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
  }

  [data-slot="seats"] {
    display: grid;
    gap: 14px;
  }

  [data-slot="seats-head"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;

    label {
      font-weight: 600;
      color: var(--e-ink);
    }
  }

  [data-slot="hint"] {
    font-size: 0.88rem;
    color: var(--e-soft);
  }

  [data-slot="stepper"] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    gap: 8px;

    button {
      display: grid;
      place-items: center;
      height: 56px;
      border-radius: 14px;
      border: 1.5px solid var(--e-line-strong);
      background: var(--e-surface);
      color: var(--e-ink);
      cursor: pointer;

      &:hover:not(:disabled) {
        border-color: var(--e-accent);
      }

      &:disabled {
        opacity: 0.4;
        cursor: not-allowed;
      }

      svg {
        width: 22px;
        height: 22px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
      }
    }

    input {
      height: 56px;
      min-width: 0;
      border-radius: 14px;
      border: 1.5px solid var(--e-line-strong);
      background: var(--e-surface);
      color: var(--e-ink);
      font: 700 1.6rem/1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
      text-align: center;
      appearance: textfield;
      -moz-appearance: textfield;

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }

  [data-slot="slider"] {
    --fill: 0%;
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    cursor: pointer;

    &::-webkit-slider-runnable-track {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--e-accent) var(--fill), var(--e-line) var(--fill));
    }

    &::-moz-range-track {
      height: 8px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--e-accent) var(--fill), var(--e-line) var(--fill));
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 24px;
      height: 24px;
      margin-top: -8px;
      border-radius: 50%;
      background: var(--e-surface);
      border: 3px solid var(--e-accent);
      box-shadow: var(--e-shadow);
    }

    &::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--e-surface);
      border: 3px solid var(--e-accent);
    }
  }

  [data-slot="presets"] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    button {
      min-height: 36px;
      min-width: 52px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--e-line-strong);
      background: var(--e-surface);
      color: var(--e-text);
      font: 600 0.9rem/1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
      cursor: pointer;

      &[data-active="true"] {
        background: var(--e-accent-soft);
        border-color: var(--e-accent);
        color: var(--e-accent);
      }
    }
  }

  [data-slot="crowd"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 14px;
    border-radius: 16px;
    background: var(--e-surface-2);
  }

  [data-slot="seat"] {
    --hue: calc(150 + var(--i) * 22);
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 40% 40%;
    background: hsl(var(--hue) 70% 55%);
    animation: ent-seat-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3) both;

    &[data-lead="true"] {
      background: #f2c14e;
      box-shadow: 0 0 0 2px var(--e-surface), 0 0 0 4px #f2c14e;
    }
  }

  [data-slot="crowd-more"] {
    font: 700 0.85rem/1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    color: var(--e-accent);
    padding-inline-start: 4px;
  }

  [data-slot="summary"] {
    display: grid;
    gap: 14px;
    align-content: start;
    padding: 24px;
    border-radius: 22px;
    background: var(--e-surface);
    border: 1px solid var(--e-line);
    box-shadow: var(--e-shadow-strong);
  }

  [data-slot="plan-name"] {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--e-ink);
  }

  [data-slot="lines"] {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--e-line-strong);
  }

  [data-slot="line"] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;

    dt {
      color: var(--e-soft);
      font-size: 0.95rem;
    }

    dd {
      margin: 0;
      font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
      font-weight: 600;
      color: var(--e-ink);
      white-space: nowrap;
    }

    &[data-tone="saving"] :is(dt, dd) {
      color: var(--e-success);
    }
  }

  [data-slot="struck"] {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    opacity: 0.75;
  }

  [data-slot="total"] {
    display: grid;
    gap: 4px;
  }

  [data-slot="total-label"] {
    font-weight: 600;
    color: var(--e-ink);
  }

  [data-slot="total-amount"] {
    font: 700 2.25rem / 1.1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    color: var(--e-ink);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;

    @media (max-width: 40rem) {
      font-size: 2rem;
    }
  }

  [data-slot="total-note"],
  [data-slot="approx"],
  [data-slot="per-seat"] {
    font-size: 0.9rem;
    color: var(--e-soft);
  }

  [data-slot="saving-badge"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-self: start;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--e-success-bg);
    color: var(--e-success);
    font-weight: 650;
    font-size: 0.95rem;

    svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }
  }

  [data-slot="buy"] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    margin-top: 6px;
    padding: 0 20px;
    border: 0;
    border-radius: 16px;
    background: var(--e-brand);
    color: var(--e-on-brand);
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    cursor: pointer;
    transition:
      background 0.18s ease,
      transform 0.18s ease;

    &:hover {
      background: var(--e-brand-hover);
      transform: translateY(-1px);
    }

    &[aria-disabled="true"] {
      background: var(--e-held-bg);
      color: var(--e-held);
      border: 1.5px dashed currentColor;
      cursor: not-allowed;
      transform: none;
    }
  }

  [data-slot="held"] {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
    padding: 40px 24px;
    border-radius: 24px;
    background: var(--e-held-fill);
    border: 1px solid var(--e-line);
    overflow: hidden;
    isolation: isolate;

    h3 {
      font-size: 1.75rem;
      line-height: 1.2;
      letter-spacing: -0.02em;
      font-weight: 700;

      @media (max-width: 40rem) {
        font-size: 1.5rem;
      }
    }

    @media (max-width: 40rem) {
      padding: 32px 18px;
    }
  }

  [data-slot="held-glow"] {
    position: absolute;
    inset: -40%;
    z-index: -1;
    background: conic-gradient(from 0deg, rgb(242 193 78 / 0.22), rgb(155 134 255 / 0.2), rgb(16 185 129 / 0.16), rgb(242 193 78 / 0.22));
    filter: blur(40px);
    animation: ent-spin 24s linear infinite;
  }

  [data-slot="held-badge"] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--e-held-bg);
    color: var(--e-held);
    font: 700 0.78rem/1 var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  [data-slot="held-dot"] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: ent-beacon 2s ease-out infinite;
  }

  [data-slot="slogans"] {
    display: grid;
    min-height: 2.2em;

    > * {
      grid-area: 1 / 1;
    }
  }

  [data-slot="slogan"] {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    color: var(--e-accent);
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;

    &[data-active="true"] {
      opacity: 1;
      transform: none;
    }
  }

  [data-slot="held-body"] {
    max-width: 60ch;
    color: var(--e-text);
  }

  [data-slot="held-link"] {
    color: var(--e-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--e-accent);
  }

  /* --- faq ------------------------------------------------------------------------------------- */

  [data-component="faq"] {
    max-width: 52rem;
    margin: 0 auto;
    padding: 56px 0;

    [data-slot="section-title"] h2 {
      font-size: 2rem;
      line-height: 1.2;
      letter-spacing: -0.02em;

      @media (max-width: 40rem) {
        font-size: 1.75rem;
      }

      text-align: center;
      margin-bottom: 28px;
    }

    ul {
      display: grid;
      gap: 10px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    li {
      border-radius: 16px;
      background: var(--e-surface);
      border: 1px solid var(--e-line);
    }

    [data-slot="faq-question"] {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      width: 100%;
      padding: 18px 20px;
      border: 0;
      background: none;
      color: var(--e-ink);
      font: inherit;
      font-weight: 600;
      font-size: 1.02rem;
      text-align: start;
      cursor: pointer;
      border-radius: 16px;

      svg {
        flex-shrink: 0;
        color: var(--e-accent);
      }

      [data-slot="faq-icon-minus"] {
        display: none;
      }

      &[data-expanded],
      [data-expanded] > & {
        [data-slot="faq-icon-plus"] {
          display: none;
        }
        [data-slot="faq-icon-minus"] {
          display: block;
        }
      }
    }

    [data-slot="faq-link"] {
      color: var(--e-accent);
      font-weight: 600;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    [data-slot="faq-question-text"] {
      flex: 1;
      padding-top: 1px;
    }

    [data-slot="faq-answer"] {
      padding: 0 20px 20px 58px;
      color: var(--e-soft);

      @media (max-width: 40rem) {
        padding-inline-start: 20px;
      }
    }
  }

  /* --- closing call to action ------------------------------------------------------------------ */

  [data-component="ent-cta"] {
    display: grid;
    justify-items: center;
    gap: 18px;
    text-align: center;
    margin: 24px 0 80px;
    padding: 64px 24px;
    border-radius: 32px;
    background: var(--e-cta-fill);
    color: #e9e6ff;

    h2 {
      color: #ffffff;
      font-size: 2.5rem;
      line-height: 1.15;
      letter-spacing: -0.02em;
      font-weight: 700;

      @media (max-width: 60rem) {
        font-size: 2.125rem;
      }

      @media (max-width: 40rem) {
        font-size: 1.875rem;
      }
    }

    p {
      max-width: 52ch;
      font-size: 1.0625rem;
    }

    [data-slot="actions"] {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 6px;
    }

    [data-slot="primary"] {
      background: #ffffff;
      color: #16256b;

      &:hover {
        background: #f1efff;
      }
    }

    [data-slot="secondary"] {
      background: transparent;
      color: #ffffff;
      border-color: rgb(255 255 255 / 0.5);

      &:hover {
        border-color: #ffffff;
      }
    }

    a:focus-visible {
      outline-color: #ffffff;
    }

    @media (max-width: 40rem) {
      padding: 44px 18px;
      margin-bottom: 56px;
    }
  }

  /* --- scenes ---------------------------------------------------------------------------------- */

  [data-scene] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: "IBM Plex Sans", system-ui, sans-serif;

    * {
      transform-box: fill-box;
      transform-origin: center;
    }

    &[data-idle] * {
      animation-play-state: paused !important;
    }
  }

  .s-bob {
    animation: ent-bob 3.6s ease-in-out infinite;
  }
  .s-blink {
    animation: ent-blink 4.6s linear infinite;
  }
  .s-blip {
    animation: ent-blip 2.4s ease-in-out infinite;
  }
  .s-drift {
    animation: ent-drift 16s ease-in-out infinite alternate;
  }
  .s-flow {
    stroke-dashoffset: 0;
    animation: ent-flow 3.2s linear infinite;
  }
  .s-breathe {
    animation: ent-breathe 4s ease-in-out infinite;
  }
  .s-spin {
    animation: ent-spin 60s linear infinite;
  }
  .s-spin-rev {
    animation: ent-spin 40s linear infinite reverse;
  }
  .s-shuffle {
    animation: ent-shuffle 4.5s ease-in-out infinite;
  }
  .s-pop {
    animation: ent-pop 7s ease-in-out infinite;
  }
  .s-turn {
    animation: ent-turn 10s ease-in-out infinite;
  }
  .s-dot {
    animation: ent-dot 1s ease-in-out infinite;
  }
  .s-type,
  .s-type-a,
  .s-type-b,
  .s-line-grow,
  .s-lane,
  .s-lane-a,
  .s-lane-b,
  .s-slide-fill {
    transform-origin: left center;
  }
  .s-type {
    animation: ent-type 6s ease-in-out infinite;
  }
  .s-ripple {
    opacity: 0;
    animation: ent-ripple 6s ease-out infinite;
  }
  .s-toast {
    animation: ent-toast 6s ease-in-out infinite;
  }
  .s-hero-cursor {
    transform: translate(285px, 450px);
    animation: ent-hero-cursor 6s ease-in-out infinite;
  }
  .s-stamp {
    animation: ent-stamp 6s ease-in-out infinite;
  }
  .s-rise {
    transform-origin: center bottom;
    animation: ent-rise 7s ease-in-out infinite;
  }
  .s-draw {
    stroke-dashoffset: 0;
    animation: ent-draw 7s ease-in-out infinite;
  }
  .s-type-a {
    animation: ent-type-a 8s ease-in-out infinite;
  }
  .s-type-b {
    animation: ent-type-b 8s ease-in-out infinite;
  }
  .s-click {
    opacity: 0;
    animation: ent-click 8s ease-out infinite;
  }
  .s-toast-b {
    animation: ent-toast-b 8s ease-in-out infinite;
  }
  .s-preview-cursor {
    transform: translate(240px, 219px);
    animation: ent-preview-cursor 8s ease-in-out infinite;
  }
  .s-halo {
    opacity: 0;
    animation: ent-halo 9s ease-in-out infinite;
  }
  .s-replan {
    stroke-dashoffset: 0;
    animation: ent-replan 9s ease-in-out infinite;
  }
  .s-lane-a {
    transform: scaleX(0.55);
    animation: ent-lane-a 9s ease-in-out infinite;
  }
  .s-lane-b {
    animation: ent-lane-b 9s ease-in-out infinite;
  }
  .s-paused {
    opacity: 0;
    animation: ent-paused 9s ease-in-out infinite;
  }
  .s-interject {
    animation: ent-interject 9s ease-in-out infinite;
  }
  .s-trail {
    stroke-dashoffset: 0;
    animation: ent-trail 8s ease-in-out infinite;
  }
  .s-lit {
    animation: ent-lit 8s ease-in-out infinite;
  }
  .s-parcel {
    opacity: 0;
    transform: translate(490px, 118px);
    animation: ent-parcel 8s ease-in-out infinite;
  }
  .s-launch {
    animation: ent-launch 8s ease-in infinite;
  }
  .s-flame {
    transform-origin: center top;
    animation: ent-flame 0.3s ease-in-out infinite alternate;
  }
  .s-confetti {
    opacity: 0;
    animation: ent-confetti 8s ease-out infinite;
  }
  .s-chip {
    animation: ent-chip 5s ease-in-out infinite;
  }
  .s-line-grow {
    animation: ent-line-grow 6s ease-in-out infinite;
  }
  .s-file {
    animation: ent-file 6s ease-in-out infinite;
  }
  .s-bump {
    animation: ent-bump 6s ease-in-out infinite;
  }
  .s-seat {
    animation: ent-seat 6s ease-in-out infinite;
  }
  .s-slide-fill {
    animation: ent-slide-fill 6s ease-in-out infinite;
  }
  .s-slide {
    transform: translateX(168px);
    animation: ent-slide 6s ease-in-out infinite;
  }
  .s-lane {
    animation: ent-lane 5s ease-in-out infinite;
  }
  .s-tick {
    animation: ent-tick 5s ease-in-out infinite;
  }
  .s-drop {
    transform: translateY(12px);
    animation: ent-drop 6s ease-in-out infinite;
  }
  .s-once-rise {
    transform-origin: center bottom;
    animation: ent-once-rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  }
  .s-once-pop {
    animation: ent-once-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  }
  .s-once-draw {
    stroke-dashoffset: 0;
    animation: ent-once-draw 1.2s ease-out both;
  }
  .s-caret {
    animation: ent-caret 1s steps(1) infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page="enterprise"] *,
  [data-page="enterprise"] *::before,
  [data-page="enterprise"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- keyframes ------------------------------------------------------------------------------- */

@keyframes ent-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes ent-progress {
  to {
    transform: scaleX(1);
  }
}
@keyframes ent-shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes ent-seat-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}
@keyframes ent-beacon {
  0% {
    box-shadow: 0 0 0 0 currentColor;
  }
  100% {
    box-shadow: 0 0 0 8px transparent;
  }
}
@keyframes ent-bob {
  50% {
    transform: translateY(-4px);
  }
}
@keyframes ent-blink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
@keyframes ent-blip {
  50% {
    opacity: 0.35;
  }
}
@keyframes ent-drift {
  to {
    transform: translate(18px, -14px);
  }
}
@keyframes ent-flow {
  to {
    stroke-dashoffset: -100;
  }
}
@keyframes ent-breathe {
  50% {
    transform: scale(1.06);
    opacity: 0.85;
  }
}
@keyframes ent-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ent-shuffle {
  50% {
    transform: translateY(-3px);
  }
}
@keyframes ent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  8% {
    opacity: 1;
    transform: scale(1.05);
  }
  12%,
  55% {
    opacity: 1;
    transform: scale(1);
  }
  63%,
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes ent-turn {
  0% {
    opacity: 0.25;
    transform: scale(0.92);
  }
  4% {
    opacity: 1;
    transform: scale(1.05);
  }
  8%,
  20% {
    opacity: 1;
    transform: scale(1);
  }
  26%,
  100% {
    opacity: 0.25;
    transform: scale(0.92);
  }
}
@keyframes ent-dot {
  50% {
    transform: translateY(-3px);
    opacity: 0.5;
  }
}
@keyframes ent-type {
  0%,
  20% {
    transform: scaleX(0);
  }
  45%,
  92% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes ent-ripple {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    opacity: 1;
    transform: scale(0.6);
  }
  76%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes ent-toast {
  0%,
  60% {
    opacity: 0;
    transform: scale(0.5);
  }
  64% {
    opacity: 1;
    transform: scale(1.12);
  }
  68%,
  92% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ent-hero-cursor {
  0%,
  100% {
    transform: translate(440px, 470px);
  }
  18%,
  45% {
    transform: translate(300px, 428px);
  }
  55%,
  58% {
    transform: translate(285px, 450px) scale(1);
  }
  60% {
    transform: translate(285px, 450px) scale(0.88);
  }
  63%,
  80% {
    transform: translate(285px, 450px) scale(1);
  }
}
@keyframes ent-stamp {
  0%,
  40% {
    opacity: 0;
    transform: scale(0.3);
  }
  46% {
    opacity: 1;
    transform: scale(1.15);
  }
  52%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ent-rise {
  0%,
  4% {
    transform: scaleY(0.05);
  }
  20%,
  88% {
    transform: scaleY(1);
  }
  97%,
  100% {
    transform: scaleY(0.05);
  }
}
@keyframes ent-draw {
  0%,
  10% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  45%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: 100;
    opacity: 0;
  }
}
@keyframes ent-type-a {
  0%,
  14% {
    transform: scaleX(0);
  }
  35%,
  94% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes ent-type-b {
  0%,
  44% {
    transform: scaleX(0);
  }
  60%,
  94% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}
@keyframes ent-click {
  0%,
  67% {
    opacity: 0;
    transform: scale(0.4);
  }
  69% {
    opacity: 1;
    transform: scale(0.7);
  }
  82%,
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}
@keyframes ent-toast-b {
  0%,
  70% {
    opacity: 0;
    transform: translateY(10px);
  }
  75%,
  94% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ent-preview-cursor {
  0%,
  100% {
    transform: translate(440px, 290px);
  }
  12%,
  35% {
    transform: translate(300px, 125px);
  }
  43%,
  60% {
    transform: translate(280px, 170px);
  }
  66% {
    transform: translate(240px, 219px) scale(1);
  }
  68% {
    transform: translate(240px, 219px) scale(0.88);
  }
  71%,
  85% {
    transform: translate(240px, 219px) scale(1);
  }
}
@keyframes ent-halo {
  0%,
  42% {
    opacity: 0;
    transform: scale(0.8);
  }
  48% {
    opacity: 1;
    transform: scale(1);
  }
  56% {
    opacity: 0.6;
    transform: scale(1.12);
  }
  62%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes ent-replan {
  0%,
  50% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  62%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ent-lane-a {
  0% {
    transform: scaleX(0);
  }
  35%,
  100% {
    transform: scaleX(0.55);
  }
}
@keyframes ent-lane-b {
  0%,
  62% {
    opacity: 0;
    transform: scaleX(0.55);
  }
  63% {
    opacity: 1;
    transform: scaleX(0.55);
  }
  95%,
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}
@keyframes ent-paused {
  0%,
  37% {
    opacity: 0;
    transform: scale(0.5);
  }
  40%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  63%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes ent-interject {
  0%,
  28% {
    opacity: 0;
    transform: translateY(-14px);
  }
  34%,
  66% {
    opacity: 1;
    transform: none;
  }
  72%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-trail {
  0% {
    stroke-dashoffset: 100;
    opacity: 1;
  }
  56%,
  90% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes ent-lit {
  0% {
    opacity: 0;
  }
  5%,
  70% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-parcel {
  0% {
    opacity: 1;
    transform: translate(70px, 262px);
  }
  14% {
    transform: translate(175px, 228px);
  }
  28% {
    transform: translate(280px, 194px);
  }
  42% {
    transform: translate(385px, 160px);
  }
  56%,
  60% {
    opacity: 1;
    transform: translate(490px, 118px);
  }
  64%,
  100% {
    opacity: 0;
    transform: translate(490px, 118px);
  }
}
@keyframes ent-launch {
  0%,
  60% {
    opacity: 0;
    transform: none;
  }
  64%,
  70% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 1;
    transform: translateY(-70px);
  }
  100% {
    opacity: 0;
    transform: translateY(-90px);
  }
}
@keyframes ent-flame {
  to {
    transform: scaleY(1.4);
  }
}
@keyframes ent-confetti {
  0%,
  66% {
    opacity: 0;
    transform: translate(0, 0) scale(0.5);
  }
  70% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1);
  }
}
@keyframes ent-chip {
  0%,
  10% {
    opacity: 0;
  }
  20%,
  85% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}
@keyframes ent-line-grow {
  0%,
  5% {
    transform: scaleX(0);
  }
  25%,
  88% {
    transform: scaleX(1);
  }
  96%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ent-file {
  0% {
    opacity: 0;
    transform: translateY(-70px);
  }
  15% {
    opacity: 1;
  }
  25%,
  85% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: none;
  }
}
@keyframes ent-bump {
  0%,
  5% {
    opacity: 0;
    transform: scale(0.4);
  }
  12% {
    opacity: 1;
    transform: scale(1.2);
  }
  18%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ent-seat {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  8% {
    opacity: 1;
    transform: scale(1.1);
  }
  12%,
  80% {
    opacity: 1;
    transform: scale(1);
  }
  90%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ent-slide-fill {
  0% {
    transform: scaleX(0.02);
  }
  55%,
  80% {
    transform: scaleX(1);
  }
  90%,
  100% {
    transform: scaleX(0.02);
  }
}
@keyframes ent-slide {
  0% {
    transform: translateX(0);
  }
  55%,
  80% {
    transform: translateX(168px);
  }
  90%,
  100% {
    transform: translateX(0);
  }
}
@keyframes ent-lane {
  0% {
    transform: scaleX(0);
  }
  45%,
  85% {
    transform: scaleX(1);
  }
  95%,
  100% {
    transform: scaleX(0);
  }
}
@keyframes ent-tick {
  0%,
  45% {
    opacity: 0;
    transform: scale(0.4);
  }
  52% {
    opacity: 1;
    transform: scale(1.15);
  }
  58%,
  85% {
    opacity: 1;
    transform: scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@keyframes ent-drop {
  0% {
    opacity: 0;
    transform: translateY(-26px);
  }
  20% {
    opacity: 1;
  }
  35%,
  85% {
    opacity: 1;
    transform: translateY(12px);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}
@keyframes ent-once-rise {
  from {
    transform: scaleY(0.05);
  }
}
@keyframes ent-once-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes ent-once-draw {
  from {
    stroke-dashoffset: 100;
  }
}
@keyframes ent-caret {
  50% {
    opacity: 0;
  }
}