/*
 * 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"] {
  /*
   * Colour is the shared brand scale in style/token/color.css — the same scale routes/pricing/index.css
   * reads through its `--pc-*` names. Both pages used to declare it in full, and the two copies had
   * drifted apart in the dark; nothing below carries a value of its own any more.
   */
  --e-bg: var(--surface);
  --e-surface: var(--brand-surface);
  --e-surface-2: var(--brand-surface-2);
  --e-ink: var(--brand-ink);
  --e-text: var(--brand-text);
  --e-soft: var(--brand-soft);
  --e-line: var(--brand-line);
  --e-line-strong: var(--brand-line-strong);
  --e-accent: var(--brand-accent);
  --e-accent-soft: var(--tone-surfaces);
  --e-brand: var(--brand-deep);
  --e-brand-hover: var(--brand-deep-hover);
  --e-on-brand: var(--brand-on-deep);
  --e-success: var(--brand-success);
  --e-success-bg: var(--brand-success-bg);
  --e-held: var(--brand-held);
  --e-held-bg: var(--brand-held-bg);
  --e-focus: var(--brand-focus);
  --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-size: 1rem;
  color: var(--e-text);
  background: var(--e-bg);
  line-height: 1.6;
  overflow-x: clip;
}

:root[data-theme="dark"] [data-page="enterprise"] {
  /* Only the art differs in the dark: the shadows, the glows, the tones and the scene tokens. */
  --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"] {
  /* The site column (site-layout.css), so the page's edges are the bar's. */
  [data-component="container"] {
    box-sizing: content-box;
    max-width: var(--site-column);
    margin: 0 auto;
    padding: 0 var(--site-gutter);
  }

  :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,
  [role="tabpanel"]:focus-visible {
    outline: 2px solid var(--e-focus);
    outline-offset: 3px;
  }

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

    h2 {
      font-size: var(--title-section-size);
      line-height: 1.15;
      letter-spacing: var(--title-tracking);
      font-weight: var(--title-weight);
      max-width: 24ch;
    }
  }

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

  /* --- 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: var(--title-hero-size);
      line-height: 1.08;
      letter-spacing: var(--title-tracking);
      font-weight: var(--title-weight);
      max-width: 15ch;
    }

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

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

    [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;

    /* A row that scrolls on a phone runs out to the screen's edge, so the tab that does not fit is
       cut by the edge of the screen, not by a hard line 16px short of it. */
    @media (max-width: 60rem) {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding-bottom: 6px;
      scrollbar-width: none;
      margin-inline: calc(-1 * var(--site-gutter));
      padding-inline: var(--site-gutter);
      scroll-padding-inline: var(--site-gutter);
    }

    [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-variant-numeric: tabular-nums;
      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);
      /* Grows from the side the text starts on; `transform-origin` has no logical keyword. */
      transform-origin: left center;

      :root[dir="rtl"] & {
        transform-origin: right 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;
    }
  }

  /*
   * The caption is the only text the panel has: every scene inside it is decorative SVG. Above 60rem
   * the same sentence is already printed inside the selected tab, so the caption is taken off screen
   * rather than out of the document — a panel with nothing left in it is an empty panel for a screen
   * reader, which is what a tab lands on.
   */
  [data-slot="stage-caption"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    text-align: center;
    color: var(--e-soft);

    @media (max-width: 60rem) {
      position: static;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0 8px 6px;
      overflow: visible;
      clip-path: none;
      white-space: normal;
    }
  }

  /* --- 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"] {
    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"] {
    flex: none;
    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;
    }
  }

  /* Each side as tall as its own content: stretched to the summary, the seat picker was left with a
     large empty area under its row of seats. */
  [data-slot="calculator"] {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
    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="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-sans);
      font-variant-numeric: tabular-nums;
      text-align: center;
    }
  }

  [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));
    }

    /* An RTL range input mirrors itself, so the filled part has to grow from the other side. */
    :root[dir="rtl"] &::-webkit-slider-runnable-track {
      background: linear-gradient(270deg, var(--e-accent) var(--fill), var(--e-line) var(--fill));
    }

    :root[dir="rtl"] &::-moz-range-track {
      background: linear-gradient(270deg, 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-sans);
      font-variant-numeric: tabular-nums;
      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-sans);
    font-variant-numeric: tabular-nums;
    color: var(--e-accent);
    padding-inline-start: 4px;
  }

  [data-slot="summary"] {
    gap: 14px;
    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);
  }

  /* The amount drops under its label when both do not fit, instead of squeezing the label into a
     column with one word left on each line. */
  [data-slot="line"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 2px 16px;

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

    dd {
      margin: 0;
      font-variant-numeric: tabular-nums;
      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-sans);
    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;
    /* The summary is a flex column now, so the badge hugs the start with `align-self`. */
    align-self: flex-start;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--e-success-bg);
    color: var(--e-success);
    font-weight: 650;
    font-size: 0.95rem;
    text-wrap: balance;

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

  [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: 600 0.8125rem/1 var(--font-sans);
  }

  [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 ------------------------------------------------------------------------------------- */

  /* The list, its rows and its heading are component/faq.css; only the section's room is here. */
  [data-component="faq"] {
    padding: 56px 0;
  }

  [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);
    /*
     * An inked banner paints its own ground, so it declares its own ink — the surface contract in
     * style/token/color.css. Everything inside then writes `var(--ink)` and is correct here without
     * knowing it is on a gradient, and without a second set of values for the dark theme: the
     * gradient is dark in both, so its ink is fixed rather than themed. Ratios against the lightest
     * stop of the gradient, which is the worst case.
     */
    --ink: #ffffff; /*  5.1:1 */
    --ink-body: #f4f2ff; /*  4.8:1 */
    --ink-muted: rgb(244 242 255 / 0.88); /*  4.5:1 */
    --line: rgb(255 255 255 / 0.32);
    --line-strong: rgb(255 255 255 / 0.5); /*  3.1:1 */
    color: var(--ink-body);

    h2 {
      color: var(--ink);
      font-size: var(--title-section-size);
      line-height: 1.15;
      letter-spacing: var(--title-tracking);
      font-weight: var(--title-weight);
    }

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

    [data-slot="actions"] {
      justify-content: center;
      margin-top: 6px;
    }


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

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

  [data-scene] {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    font-family: var(--font-sans);

    * {
      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;
  }
}