/* ==========================================================================
   simstudioapp.com: the page in front of the hosted tool. Solo / Team /
   Enterprise with a billing toggle, the services as a bento grid, the
   launch film, then a one-open-at-a-time FAQ.

   Ported from the pricing-page component in the UI-Design repository. The
   bar's way into the tool and the footer are this site's own; everything
   else follows the component, so a change made there is carried here by
   hand.

   Built on the SimStudio brand guidelines v3. Every colour comes from the
   tokens in :root; no rule below carries a colour of its own. Text pairings
   are noted with their contrast ratio.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/poppins-extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@property --ui-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --ui-beam {
  syntax: "<percentage>";
  initial-value: -50%;
  inherits: false;
}

:root {
  /* ---- brand palette ---- */
  --ss-navy: #011d4a;
  --ss-blue: #0056fc;
  --ss-blue-deep: #0047d1;
  --ss-cyan: #01acfc;
  --ss-violet: #5926fc;
  --ss-orange: #f59e0b;
  --ss-surface: #f8fafc;
  --ss-white: #ffffff;

  --ss-gradient-learning: linear-gradient(135deg, var(--ss-blue) 0%, var(--ss-cyan) 100%);
  --ss-gradient-simulation: linear-gradient(135deg, var(--ss-blue) 0%, var(--ss-violet) 100%);

  /* ---- light interface palette (the page) ---- */
  --ui-bg: var(--ss-surface);
  --ui-bg2: var(--ss-white);          /* cards */
  --ui-bg3: #f1f5f9;                  /* controls on a card */
  --ui-line: #e2e8f0;                 /* dividers */
  --ui-line2: #cbd5e1;
  --ui-edge: #828d9f;                 /* a control's own boundary, 3.06:1 on bg3 */
  --ui-fg: var(--ss-navy);            /* 16.46:1 on white */
  --ui-dim: #44546f;                  /* 7.65:1 */
  --ui-faint: #5b6980;                /* 5.07:1 on bg3, the worst case */
  --ui-accent: var(--ss-blue);
  --ui-accent-2: var(--ss-blue-deep); /* accent-coloured text, 7.44:1 */
  --ui-accent-ink: var(--ss-white);   /* white on blue 5.62:1 */
  --ui-accent-tint: #ebf1ff;          /* deep blue on it 6.58:1 */
  --ui-umbra: rgba(1, 29, 74, 0.08);

  /* ---- dark palette, for the featured card (navy is the brand's dark surface) ---- */
  --ui-nav: var(--ss-navy);
  --ui-nav-fg: var(--ss-white);       /* 16.46:1 */
  --ui-nav-dim: #b4c0d6;              /* 8.98:1 */
  --ui-nav-faint: #93a2be;            /* 6.39:1 */
  --ui-nav-edge: #5c6e8b;             /* 3.18:1 */

  /* ---- shape ---- */
  --ui-r-sm: 6px;
  --ui-r-md: 10px;
  --ui-r-lg: 16px;
  --ui-r-pill: 999px;

  /* ---- motion: 160-240ms for interface feedback ---- */
  --ui-m-fast: 160ms;
  --ui-m-base: 200ms;
  --ui-m-slow: 240ms;
  --ui-m-demo: 300ms;                 /* a value you are meant to watch change */
  --ui-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ui-ease-move: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- type ---- */
  --ui-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui-display: "Poppins", "Century Gothic", "Avenir Next", Futura, system-ui, sans-serif;
  --ui-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ui-bg);
  color: var(--ui-fg);
  font: 400 16px/1.5 var(--ui-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, li, small, strong { text-wrap: pretty; }

a { color: inherit; }

::selection { background: color-mix(in srgb, var(--ss-cyan) 35%, transparent); }

.ui-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Two-tone focus ring: 2px Interaction Orange inside, 1px of the text colour
   outside, so it clears 3:1 on every surface. The transparent outline is what
   forced-colours mode keeps. */
:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--ss-orange), 0 0 0 3px var(--ui-fg);
}

/* --------------------------------------------------------------------------
   Backdrop
   -------------------------------------------------------------------------- */

.ui-bg {
  position: absolute;
  inset: 0 0 auto;
  height: 1400px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(#000 45%, transparent);
          mask-image: linear-gradient(#000 45%, transparent);
}

.ui-bg__blob {
  position: absolute;
  width: 48vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.ui-bg__blob--blue {
  top: -28vmax;
  left: -14vmax;
  background: radial-gradient(circle, var(--ss-blue), transparent 68%);
  opacity: 0.16;
  animation: ui-drift-a 32s ease-in-out infinite alternate;
}

.ui-bg__blob--cyan {
  top: -24vmax;
  right: -18vmax;
  background: radial-gradient(circle, var(--ss-cyan), transparent 68%);
  opacity: 0.2;
  animation: ui-drift-b 36s ease-in-out infinite alternate;
}

.ui-bg__blob--violet {
  top: 16vmax;
  left: 36%;
  width: 36vmax;
  background: radial-gradient(circle, var(--ss-violet), transparent 68%);
  opacity: 0.08;
  animation: ui-drift-c 40s ease-in-out infinite alternate;
}

@keyframes ui-drift-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.12); } }
@keyframes ui-drift-b { to { transform: translate3d(-10vmax, 9vmax, 0) scale(0.92); } }
@keyframes ui-drift-c { to { transform: translate3d(-8vmax, -5vmax, 0) scale(1.15); } }

/* The animated grid pattern (after Magic UI's): a 40px grid tilted by a
   12deg skew, taller than its box so the skew never shows an edge, and
   faded out from a circle of light behind the headline. site.js adds the
   squares that come and go in it. */
.ui-bg__grid {
  position: absolute;
  left: 0;
  top: -30%;
  width: 100%;
  height: 160%;
  overflow: visible;
  transform: skewY(12deg);
  -webkit-mask-image: radial-gradient(720px circle at 50% 38%, #000, transparent);
          mask-image: radial-gradient(720px circle at 50% 38%, #000, transparent);
}

.ui-bg__grid pattern path {
  fill: none;
  stroke: color-mix(in srgb, var(--ui-line2) 70%, transparent);
  stroke-width: 1;
}

.ui-bg__squares { overflow: visible; }

/* 0 to a tenth and back over 3s each way, then a second's rest */
.ui-bg__square {
  fill: var(--ss-blue);
  opacity: 0;
  animation: ui-square 7s linear infinite;
}

@keyframes ui-square {
  0%      { opacity: 0;   animation-timing-function: var(--ui-ease-move); }
  42.86%  { opacity: 0.1; animation-timing-function: var(--ui-ease-move); }
  85.71%  { opacity: 0; }
  100%    { opacity: 0; }
}

.ui-top,
main,
.ui-foot {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   Header: the approved primary lockup at its 180px minimum, and the way in
   -------------------------------------------------------------------------- */

.ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  max-width: 1200px;       /* 1160px of content, the plans' width, inside its padding */
  margin: 0 auto;
  padding: 28px 20px 0;
}

/* The free trial and the way into the tool, as one group. The way in is the
   primary button; the trial sits beside it as the secondary one, so the bar
   has one action that reads first rather than two that compete. */
.ui-top__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ui-top__btn {
  height: 44px;
  margin-top: 0;
}

.ui-top__logo {
  display: inline-block;
  padding: 10px;           /* clear space: at least one orange-dot diameter */
  margin: -10px;
  border-radius: var(--ui-r-md);
}

.ui-top__logo img {
  display: block;
  width: 180px;
  height: auto;
}

/* --------------------------------------------------------------------------
   Reveal on load / scroll (only when JS is running)
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms),
    transform var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.ui-pricing {
  padding: clamp(56px, 9vw, 104px) 20px 0;
}

.ui-pricing__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px 48px;
  max-width: 1160px;
  margin: 0 auto;
}

.ui-pricing__intro { min-width: 0; }

.ui-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-pill);
  background: var(--ui-bg2);
  font: 500 14px/1.35 var(--ui-font);
  color: var(--ui-dim);
  box-shadow: 0 1px 2px var(--ui-umbra);
}

.ui-eyebrow__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-gradient-learning);
}

.ui-eyebrow__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--ss-cyan);
  animation: ui-ping 2.4s var(--ui-ease-enter) infinite;
}

@keyframes ui-ping {
  from { transform: scale(0.4); opacity: 1; }
  to   { transform: scale(1.5); opacity: 0; }
}

/* Display: Poppins ExtraBold 48px / 1.05, set normally */
.ui-pricing__title {
  margin: 0;
  font: 800 clamp(32px, 5vw, 48px)/1.05 var(--ui-display);
  color: var(--ui-fg);
}

.ui-pricing__line {
  display: block;
  text-wrap: balance;
}

/* The three steps take the logo's three colours, top slab to bottom:
   Capture in Electric Blue (5.37:1 on Surface), Build in Cyan (2.4:1,
   under the guidelines' 3:1 for large text, chosen to match the mark),
   Publish in Violet (6.46:1) */
.ui-pricing__verb {
  --verb: var(--ss-blue);
  --beam-core: color-mix(in srgb, var(--ss-cyan) 30%, var(--ss-white));
  font-style: normal;
  /* A band of cyan light sits off to the left, over the brand gradient.
     It sweeps through each verb in turn, Capture, Build, Publish, and the
     whole sequence starts again every 6 seconds. */
  background:
    linear-gradient(105deg,
      transparent calc(var(--ui-beam) - 22%),
      var(--ss-cyan) calc(var(--ui-beam) - 7%),
      var(--beam-core) var(--ui-beam),
      var(--ss-cyan) calc(var(--ui-beam) + 7%),
      transparent calc(var(--ui-beam) + 22%)),
    linear-gradient(var(--verb), var(--verb));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Starts once its line has revealed: Capture, then Build, then Publish.
   All three run on the same 6s cycle, so their offsets hold every time round */
.ui-pricing__verb { --beam-delay: 520ms; }
.ui-pricing__line:nth-child(2) .ui-pricing__verb { --verb: var(--ss-cyan); --beam-delay: 980ms; }
.ui-pricing__line:nth-child(3) .ui-pricing__verb { --verb: var(--ss-violet); --beam-delay: 1440ms; }

html:not(.js) .ui-pricing__verb,
.js .ui-pricing__line.is-in .ui-pricing__verb {
  animation:
    ui-beam 6s linear var(--beam-delay) infinite both,
    ui-beam-glow 6s linear var(--beam-delay) infinite both;
}

/* Each 6s cycle: the beam crosses in the first 760ms (12.67%), then waits
   off to the right. The jump back to the left at the turn of the cycle is
   outside the letters, so it is never seen. */
@keyframes ui-beam {
  0%      { --ui-beam: -50%; animation-timing-function: var(--ui-ease-move); }
  12.67%  { --ui-beam: 150%; }
  100%    { --ui-beam: 150%; }
}

/* A soft cyan glow that swells as the beam passes through */
@keyframes ui-beam-glow {
  /* Starts and ends as a transparent cyan shadow, so the glow fades in
     cyan rather than through grey */
  0%, 12.67%, 100% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--ss-cyan) 0%, transparent)); }
  5.7% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ss-cyan) 55%, transparent)); }
}

.ui-pricing__lede {
  max-width: 520px;
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ui-dim);
}

/* --------------------------------------------------------------------------
   Billing toggle
   -------------------------------------------------------------------------- */

/* The row over the plans: what they are on the left, aligned with Solo, and
   how they are billed on the right, aligned with Enterprise, both centered on
   one line. A phone too narrow for both puts the toggle under the pill. */
.ui-pricing__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
  width: 100%;
}

.ui-billing-wrap { flex-shrink: 0; margin-left: auto; }

.ui-billing {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--ui-line2);
  border-radius: var(--ui-r-pill);
  background: var(--ui-bg2);
  box-shadow: 0 1px 2px var(--ui-umbra), 0 8px 24px -12px var(--ui-umbra);
}

.ui-billing__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-billing__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--ui-r-pill);
  font: 500 14px/1.35 var(--ui-font);
  color: var(--ui-dim);
  cursor: pointer;
  user-select: none;
  transition: color var(--ui-m-fast) var(--ui-ease-move);
}

.ui-billing__option:hover { color: var(--ui-fg); }

/* Selected: white on navy, 16.46:1 */
.ui-billing__input:checked + .ui-billing__option { color: var(--ui-nav-fg); }

.ui-billing__input:focus-visible + .ui-billing__option {
  box-shadow: 0 0 0 2px var(--ss-orange), 0 0 0 3px var(--ui-fg);
}

.ui-billing__thumb {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  width: var(--w, 50%);
  border-radius: var(--ui-r-pill);
  background: var(--ui-nav);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ss-navy) 60%, transparent);
  transform: translateX(var(--x, 4px));
  transition:
    transform var(--ui-m-slow) var(--ui-ease-move),
    width var(--ui-m-slow) var(--ui-ease-move);
}

/* Navy on cyan, 6.51:1. Cyan is a fill here, never text. */
.ui-billing__save {
  display: inline-block;
  padding: 3px 6px;
  border-radius: var(--ui-r-sm);
  background: var(--ss-cyan);
  color: var(--ss-navy);
  font: 600 12px/1.4 var(--ui-font);
  transition: transform var(--ui-m-base) var(--ui-ease-move);
}

.ui-billing__save.is-active { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Plans grid
   -------------------------------------------------------------------------- */

.ui-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin: 64px auto 0;
  align-items: stretch;
}

.ui-plan {
  --mx: 50%;
  --my: 0%;
  --spot: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 28px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  background: var(--ui-bg2);
  box-shadow: 0 1px 2px var(--ui-umbra), 0 24px 48px -32px color-mix(in srgb, var(--ss-navy) 30%, transparent);
  isolation: isolate;
}

.js .ui-plan[data-reveal].is-in {
  transition:
    opacity var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms),
    transform var(--ui-m-base) var(--ui-ease-move),
    box-shadow var(--ui-m-base) var(--ui-ease-move);
}

/* Spotlight that follows the pointer */
.ui-plan::before,
.ui-plan::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spot);
  transition: opacity var(--ui-m-slow) var(--ui-ease-move);
}

.ui-plan::before {
  z-index: -1;
  background: radial-gradient(480px circle at var(--mx) var(--my), color-mix(in srgb, var(--ss-cyan) 8%, transparent), transparent 45%);
}

/* The border lights up near the pointer, even on neighbouring cards */
.ui-plan::after {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--ss-blue) 55%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ui-plans.is-pointing .ui-plan { --spot: 1; }

@media (hover: hover) {
  .ui-plan.is-in:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px var(--ui-umbra), 0 32px 56px -32px color-mix(in srgb, var(--ss-navy) 40%, transparent);
  }
}

/* ---- Featured: the navy card, which takes the dark palette ---- */
.ui-plan--featured {
  --ui-fg: var(--ui-nav-fg);
  --ui-dim: var(--ui-nav-dim);
  --ui-faint: var(--ui-nav-faint);
  --ui-line: rgba(255, 255, 255, 0.12);
  --ui-edge: var(--ui-nav-edge);
  --ui-accent-2: var(--ss-cyan);        /* accent text on navy is cyan, 6.51:1 */
  --ui-bg3: rgba(255, 255, 255, 0.06);
  border-color: transparent;
  color: var(--ui-fg);
  background:
    radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--ss-blue) 40%, transparent), transparent 70%),
    var(--ui-nav);
  box-shadow:
    0 1px 2px var(--ui-umbra),
    0 40px 80px -36px color-mix(in srgb, var(--ss-blue) 70%, transparent);
}

.ui-plan--featured::before {
  background: radial-gradient(480px circle at var(--mx) var(--my), color-mix(in srgb, var(--ss-cyan) 14%, transparent), transparent 45%);
}

.ui-plan--featured::after {
  background: radial-gradient(320px circle at var(--mx) var(--my), color-mix(in srgb, var(--ss-cyan) 70%, transparent), transparent 45%);
}

@media (min-width: 981px) {
  .ui-plan--featured { margin-top: -16px; }
}

.ui-plan__ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background:
    conic-gradient(from var(--ui-angle), transparent 0 55%, var(--ss-blue) 70%, var(--ss-cyan) 82%, var(--ss-violet) 92%, transparent 100%),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ui-spin 10s linear infinite;
}

@keyframes ui-spin { to { --ui-angle: 360deg; } }

/* Navy on cyan, 6.51:1 */
.ui-plan__badge {
  position: absolute;
  top: 28px;
  right: 28px;
  padding: 4px 8px;
  border-radius: var(--ui-r-sm);
  background: var(--ss-cyan);
  color: var(--ss-navy);
  font: 600 12px/1.4 var(--ui-font);
}

/* Head */
.ui-plan__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md);
  background: var(--ui-bg3);
  color: var(--ui-fg);
}

.ui-plan__icon svg,
.ui-feature__icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-plan--featured .ui-plan__icon {
  border-color: transparent;
  background: var(--ss-gradient-learning);
  color: var(--ss-white);
}

/* Section heading: Poppins 24px / 1.2 */
.ui-plan__name {
  margin: 0;
  font: 800 24px/1.2 var(--ui-display);
}

.ui-plan__tagline {
  min-height: 3em;
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-dim);
}

/* Price */
.ui-plan__price {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  height: 56px;
  margin-top: 24px;
}

.ui-plan__currency {
  margin-top: 4px;
  font: 600 20px/1 var(--ui-font);
  color: var(--ui-dim);
}

.ui-plan__amount {
  font: 800 48px/1 var(--ui-display);
  font-variant-numeric: tabular-nums;
}

.ui-plan__per {
  align-self: flex-end;
  margin: 0 0 6px 8px;
  font-size: 14px;
  color: var(--ui-dim);
}

.ui-plan__custom {
  font: 800 48px/1.05 var(--ui-display);
  padding-bottom: 0.06em;
  background: var(--ss-gradient-simulation);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ui-plan__billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

.ui-plan__saving {
  display: inline-flex;
  padding: 2px 6px;
  border-radius: var(--ui-r-sm);
  background: var(--ui-accent-tint);
  font-size: 12px;
  font-weight: 600;
  color: var(--ui-accent-2);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--ui-m-base) var(--ui-ease-enter), transform var(--ui-m-base) var(--ui-ease-enter);
}

.ui-plan--featured .ui-plan__saving { background: color-mix(in srgb, var(--ss-cyan) 16%, transparent); }

.ui-plan__saving:empty { display: none; }
.ui-plan__saving.is-on { opacity: 1; transform: none; }

/* Rolling digits */
.ui-roll {
  display: inline-flex;
  white-space: nowrap;
}

.ui-roll__col {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.ui-roll__size {
  display: inline-block;
  visibility: hidden;
  transition: width var(--ui-m-demo) var(--ui-ease-move);
}

.ui-roll__strip {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(0, calc(var(--d, 0) * -10%), 0);
  transition: transform var(--ui-m-demo) var(--ui-ease-move);
  transition-delay: var(--stagger, 0ms);
}

.ui-roll__strip > span {
  display: block;
  height: 1em;
  line-height: 1;
}

.ui-roll__sep { display: inline-block; }

.ui-roll__col.is-entering { animation: ui-col-in var(--ui-m-demo) var(--ui-ease-enter) both; }

@keyframes ui-col-in {
  from { opacity: 0; max-width: 0; }
  to   { opacity: 1; max-width: 0.7em; }
}

.ui-roll.no-anim .ui-roll__strip { transition: none; }

/* Seats */
.ui-plan__seats {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding: 16px;
  min-height: 104px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md);
  background: var(--ui-bg3);
}

/* One row, never two: site.js folds figures into the +N pill until it fits */
.ui-seats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-height: 24px;
}

/* A seat is a small person: head and shoulders drawn in white over a fill */
.ui-seats__dot {
  --seat: var(--ss-navy);
  --seat-ink: var(--ss-white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  white-space: nowrap;
  background:
    radial-gradient(circle at 50% 38%, var(--seat-ink) 0 3.5px, transparent 4px),
    radial-gradient(circle at 50% 118%, var(--seat-ink) 0 8px, transparent 8.5px),
    var(--seat);
}

.ui-plan--featured .ui-seats__dot {
  background:
    radial-gradient(circle at 50% 38%, var(--seat-ink) 0 3.5px, transparent 4px),
    radial-gradient(circle at 50% 118%, var(--seat-ink) 0 8px, transparent 8.5px),
    var(--ss-gradient-learning);
  box-shadow: 0 0 0 2px var(--ui-nav);
}

/* Added seats: navy figure on cyan */
.ui-plan--featured .ui-seats__dot.is-extra {
  --seat-ink: var(--ss-navy);
  background:
    radial-gradient(circle at 50% 38%, var(--seat-ink) 0 3.5px, transparent 4px),
    radial-gradient(circle at 50% 118%, var(--seat-ink) 0 8px, transparent 8.5px),
    var(--ss-cyan);
}

.ui-seats__dot.is-pop { animation: ui-pop var(--ui-m-slow) var(--ui-ease-enter) both; }

@keyframes ui-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.ui-plan--featured .ui-seats__dot.is-more {
  width: auto;
  padding: 0 8px;
  border-radius: var(--ui-r-pill);
  background: var(--ss-cyan);
  color: var(--ss-navy);
  font: 600 12px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
}

.ui-infinity {
  width: 52px;
  height: 24px;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.ui-infinity__base { stroke: var(--ui-line2); }

.ui-infinity__trace {
  stroke: var(--ss-blue);
  stroke-dasharray: 22 78;
  animation: ui-trace 3.6s linear infinite;
}

@keyframes ui-trace { to { stroke-dashoffset: -100; } }

.ui-plan__seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ui-plan__seat-label {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
}

.ui-plan__seat-label strong { font-weight: 600; }

.ui-plan__seat-label small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

/* Seat stepper */
.ui-stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.ui-stepper__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ui-edge);
  border-radius: var(--ui-r-md);
  background: transparent;
  color: var(--ui-fg);
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--ui-m-fast) var(--ui-ease-move), opacity var(--ui-m-fast) var(--ui-ease-move);
}

.ui-stepper__btn:hover { background: rgba(255, 255, 255, 0.1); }
.ui-stepper__btn:active { transform: scale(0.94); }
.ui-stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.ui-stepper__btn svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.ui-stepper__value {
  min-width: 32px;
  text-align: center;
  font: 600 14px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
}

/* Buttons: 10px corners */
.ui-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  margin-top: 20px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--ui-r-md);
  font: 600 14px/1 var(--ui-font);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition:
    background var(--ui-m-fast) var(--ui-ease-move),
    border-color var(--ui-m-fast) var(--ui-ease-move),
    color var(--ui-m-fast) var(--ui-ease-move);
}

.ui-btn:active { transform: scale(0.98); }

.ui-btn__arrow {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ui-m-base) var(--ui-ease-move);
}

.ui-btn:hover .ui-btn__arrow { transform: translateX(3px); }

/* Secondary: transparent, a 3:1 edge, text in the foreground colour */
.ui-btn--glass,
.ui-btn--outline {
  border-color: var(--ui-edge);
  background: transparent;
  color: var(--ui-fg);
}

.ui-btn--glass:hover,
.ui-btn--outline:hover { background: var(--ui-bg3); }

/* Primary: Electric Blue with white text (5.62:1), Deep Blue on hover (7.44:1) */
.ui-btn--primary {
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
}

.ui-btn--primary:hover { background: var(--ss-blue-deep); }

.ui-btn__shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-110%);
}

.ui-btn--primary:hover .ui-btn__shine {
  transform: translateX(110%);
  transition: transform 600ms var(--ui-ease-move);
}

/* Features */
.ui-plan__includes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 12px;
  font: 600 12px/1.4 var(--ui-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;    /* a short structural label */
  color: var(--ui-faint);
}

.ui-plan__includes::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ui-line);
}

.ui-plan__features {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-feature {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
}

.ui-feature__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--ui-r-md);
  background: var(--ui-bg3);
  color: var(--ui-accent-2);
}

.ui-feature strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}

.ui-feature small {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

/* AI add-on: violet is the brand's colour for advanced features */
.ui-addon {
  position: relative;
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--ui-r-md);
  border: 1px dashed var(--ui-line2);
  background: var(--ui-bg2);
  transition: border-color var(--ui-m-base) var(--ui-ease-move), background var(--ui-m-base) var(--ui-ease-move);
}

.ui-addon.is-on {
  border-style: solid;
  border-color: var(--ss-violet);
  background: color-mix(in srgb, var(--ss-violet) 5%, var(--ui-bg2));
}

.ui-addon__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-addon__spark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ui-r-sm);
  background: var(--ss-violet);
}

.ui-addon__spark svg {
  width: 14px;
  height: 14px;
  fill: var(--ss-white);
}

.ui-addon__tag {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ui-faint);
}

.ui-addon__title {
  margin: 12px 0 2px;
  font-size: 14px;
  font-weight: 600;
}

.ui-addon__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

/* Links write in --ui-accent-2, as the FAQ's does */
.ui-addon__more {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
}

.ui-addon__more a {
  border-radius: var(--ui-r-sm);
  color: var(--ui-accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Switch: blue when on; off, the track's own edge clears 3:1 */
.ui-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.ui-switch__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ui-switch__track {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: var(--ui-r-pill);
  border: 1px solid var(--ui-edge);
  background: var(--ui-bg3);
  transition: background var(--ui-m-fast) var(--ui-ease-move), border-color var(--ui-m-fast) var(--ui-ease-move);
}

.ui-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ui-dim);
  transition: transform var(--ui-m-base) var(--ui-ease-move), background var(--ui-m-fast) var(--ui-ease-move);
}

.ui-switch__input:checked + .ui-switch__track {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

.ui-switch__input:checked + .ui-switch__track .ui-switch__thumb {
  transform: translateX(16px);
  background: var(--ss-white);
}

.ui-switch__input:focus-visible + .ui-switch__track {
  box-shadow: 0 0 0 2px var(--ss-orange), 0 0 0 3px var(--ui-fg);
}

.ui-pricing__note {
  max-width: 1160px;
  margin: 24px auto 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

/* --------------------------------------------------------------------------
   Between sections: a hairline that fades out at both ends
   -------------------------------------------------------------------------- */

.ui-rule {
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  max-width: 1160px;
  height: 1px;
  margin: clamp(56px, 8vw, 96px) auto;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--ui-line2) 20%, var(--ui-line2) 80%, transparent);
}

/* --------------------------------------------------------------------------
   Services: a bento grid after Magic UI's
   Three columns, the cards spanning one, two, two, one, so each row pairs a
   narrow card with a wide one. Each card is a picture over its copy. The
   picture takes whatever height the row has spare, so the buttons in a row
   share a bottom edge. Unlike Magic UI's, the button is always there: a
   phone has no hover to reveal it with.
   -------------------------------------------------------------------------- */

.ui-services {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.ui-services__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Page heading: Poppins 32px / 1.15, as the FAQ's */
.ui-services__title {
  margin: 20px 0 0;
  font: 800 32px/1.15 var(--ui-display);
}

.ui-services__title em {
  font-style: normal;
  background: var(--ss-gradient-simulation);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ui-services__lede {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ui-dim);
}

.ui-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1160px;
  margin: 48px auto 0;
}

.ui-service {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  background: var(--ui-bg2);
  box-shadow: 0 1px 2px var(--ui-umbra), 0 24px 48px -32px color-mix(in srgb, var(--ss-navy) 30%, transparent);
  isolation: isolate;
}

.ui-service--wide { grid-column: span 2; }

.js .ui-service[data-reveal].is-in {
  transition:
    opacity var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms),
    transform var(--ui-m-base) var(--ui-ease-move),
    box-shadow var(--ui-m-base) var(--ui-ease-move);
}

@media (hover: hover) {
  .ui-service.is-in:hover {
    transform: translateY(-4px);
    box-shadow: 0 1px 2px var(--ui-umbra), 0 32px 56px -32px color-mix(in srgb, var(--ss-navy) 40%, transparent);
  }
  .ui-service:hover .ui-service__visual > * { transform: scale(1.03); }
}

/* The picture: a wash of the accent tint over the page's ground. It is
   there to set the scene, not to be read, so it sits back: its colour
   muted, and a fog of the card's own white over it that thickens towards
   the copy and melts into it, with no line between them. Pointing at the
   card, or tabbing to its button, lifts the fog part of the way. */
.ui-service__visual {
  --fog: 1;
  position: relative;
  flex: 1 0 224px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--ui-accent-tint), transparent 70%),
    var(--ui-bg);
}

.ui-service__visual > * {
  filter: saturate(calc(1 - 0.25 * var(--fog)));
  transition:
    transform var(--ui-m-slow) var(--ui-ease-move),
    filter var(--ui-m-slow) var(--ui-ease-move);
}

.ui-service__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    color-mix(in srgb, var(--ui-bg2) 30%, transparent),
    color-mix(in srgb, var(--ui-bg2) 40%, transparent) 55%,
    color-mix(in srgb, var(--ui-bg2) 62%, transparent) 88%,
    var(--ui-bg2));
  opacity: var(--fog);
  transition: opacity var(--ui-m-slow) var(--ui-ease-move);
}

.ui-service:focus-within .ui-service__visual { --fog: 0.45; }

@media (hover: hover) {
  .ui-service:hover .ui-service__visual { --fog: 0.45; }
}

.ui-service__body {
  display: flex;
  flex-direction: column;
  padding: 24px 28px 28px;
}

/* Where the card sits in the content's journey: a short structural label */
.ui-service__step {
  font: 600 12px/1.4 var(--ui-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ui-faint);
}

/* The name beside its icon. "Process documentation" needs about 300px of
   card for that, which is why the bento gives way to two by two below
   1180px and the phone sizes step down below 400px. */
.ui-service__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

.ui-service__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--ui-r-md);
  background: var(--ss-gradient-learning);
  color: var(--ss-white);
}

.ui-service__icon svg,
.ui-service__proof svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-service__name {
  margin: 0;
  font: 800 20px/1.2 var(--ui-display);
}

/* The problem it answers comes first, in the foreground colour */
.ui-service__problem {
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.ui-service__points {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

/* four points across a wide card read as two short columns */
.ui-service__points--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

.ui-service__points li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-dim);
}

.ui-service__points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ss-gradient-learning);
}

.ui-service__proof {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px;
  border-radius: var(--ui-r-md);
  background: var(--ui-bg3);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-dim);
}

.ui-service__proof svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--ui-accent-2);
}

.ui-service__cta {
  align-self: flex-start;
  margin-top: 24px;
}

/* ---- 1. Documents going by: Magic UI's marquee, one set and its copy ---- */
.ui-docs {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.ui-docs__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: ui-marquee 32s linear infinite;
}

.ui-docs__set {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the track is two copies and the gap between them, so half of it plus
   half a gap brings the second copy to where the first began */
@keyframes ui-marquee { to { transform: translateX(calc(-50% - 6px)); } }

.ui-service:hover .ui-docs__track { animation-play-state: paused; }

.ui-doc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 144px;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md);
  background: var(--ui-bg2);
  box-shadow: 0 1px 2px var(--ui-umbra), 0 12px 24px -16px color-mix(in srgb, var(--ss-navy) 30%, transparent);
}

.ui-doc:nth-child(even) { transform: translateY(16px); }
.ui-doc:nth-child(odd) { transform: translateY(-8px); }

.ui-doc__kind {
  font: 600 12px/1.3 var(--ui-font);
  color: var(--ui-accent-2);
}

.ui-doc__title {
  font: 600 14px/1.3 var(--ui-font);
  color: var(--ui-fg);
}

.ui-doc__line {
  height: 6px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-bg3);
}

.ui-doc__line--short { width: 60%; }

/* ---- 2. Conversions arriving: Magic UI's animated list ----
   site.js moves the oldest item to the top every few seconds and slides
   the rest down; without it, or with reduced motion, the list holds. */
.ui-feed {
  position: absolute;
  top: 20px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(480px, calc(100% - 40px));
  margin: 0 auto;
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
          mask-image: linear-gradient(#000 50%, transparent);
}

.ui-feed__item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-md);
  background: var(--ui-bg2);
  box-shadow: 0 1px 2px var(--ui-umbra), 0 12px 24px -18px color-mix(in srgb, var(--ss-navy) 30%, transparent);
}

.ui-feed__item.is-entering { animation: ui-feed-in var(--ui-m-demo) var(--ui-ease-enter) both; }

@keyframes ui-feed-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.ui-feed__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--ui-r-sm);
  background: var(--ss-blue);
  color: var(--ss-white);
}

.ui-feed__icon--guide { background: var(--ss-cyan); color: var(--ss-navy); }
.ui-feed__icon--sim { background: var(--ss-navy); }
.ui-feed__icon--deck { background: var(--ss-violet); }

.ui-feed__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-feed__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ui-feed__title,
.ui-feed__meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ui-feed__title {
  font: 600 14px/1.35 var(--ui-font);
  color: var(--ui-fg);
}

.ui-feed__meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-faint);
}

.ui-feed__tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--ui-r-pill);
  background: var(--ui-accent-tint);
  font: 600 12px/1.4 var(--ui-font);
  color: var(--ui-accent-2);
}

/* ---- 3. Everything into one hub, then out: Magic UI's animated beams ----
   The routes are always drawn. Light runs along each one in the hero beam's
   cyan, crossing quickly and then waiting, the way the beam through the
   headline does: in from the content, then out to the people. */
/* drawn compact, so it is still legible across a phone, and held to 520px
   on a desktop so a tall row does not blow it up */
.ui-beams {
  position: absolute;
  top: 16px;
  right: 0;
  left: 0;
  width: min(520px, calc(100% - 24px));
  height: calc(100% - 32px);
  margin: 0 auto;
  overflow: visible;
}

.ui-beams__stop-a { stop-color: var(--ss-blue); }
.ui-beams__stop-b { stop-color: var(--ss-cyan); }
.ui-beams__stop-c { stop-color: var(--ss-violet); }

.ui-beams__path {
  fill: none;
  stroke: var(--ui-line2);
  stroke-width: 2;
}

/* one dash, and a gap longer than the route, so only one is ever on it */
.ui-beams__flow {
  fill: none;
  stroke: url(#ui-beams-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 22 200;
  stroke-dashoffset: 22;
  animation: ui-flow 4.8s linear var(--flow-delay, 0ms) infinite both;
}

@keyframes ui-flow {
  0%   { stroke-dashoffset: 22; animation-timing-function: var(--ui-ease-move); }
  25%  { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

.ui-beams__node > circle {
  fill: var(--ui-bg2);
  stroke: var(--ui-line);
  stroke-width: 1;
  filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--ss-navy) 14%, transparent));
}

.ui-beams__node svg,
.ui-beams__hub svg {
  overflow: visible;
  fill: none;
  stroke: var(--ui-fg);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-beams__hub > circle {
  fill: var(--ui-nav);
  filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--ss-blue) 45%, transparent));
}

.ui-beams__hub svg { stroke: var(--ui-nav-fg); }

.ui-beams__label {
  font: 600 12px var(--ui-font);
  fill: var(--ui-dim);
}

/* ---- 4. The agent answering: a chat that plays itself every 10s ----
   The typing dots and the reply share one slot, so the reply lands where
   the dots were. The resting frame is the finished answer. */
.ui-chat {
  position: absolute;
  top: 16px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(300px, calc(100% - 40px));
  margin: 0 auto;
  padding: 12px;
  border: 1px solid var(--ui-line);
  border-bottom: 0;
  border-radius: var(--ui-r-lg) var(--ui-r-lg) 0 0;
  background: var(--ui-bg2);
  box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--ss-navy) 35%, transparent);
}

.ui-chat__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ui-line);
  font: 600 12px/1.4 var(--ui-font);
}

/* the add-on's violet spark: the same agent */
.ui-chat__face {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--ui-r-sm);
  background: var(--ss-violet);
}

.ui-chat__face svg {
  width: 14px;
  height: 14px;
  fill: var(--ss-white);
}

.ui-chat__msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: var(--ui-r-lg);
  font-size: 12px;
  line-height: 1.4;
}

/* white on blue 5.62:1 */
.ui-chat__msg--ask {
  align-self: flex-end;
  border-bottom-right-radius: var(--ui-r-sm);
  background: var(--ui-accent);
  color: var(--ui-accent-ink);
  animation: ui-chat-ask 10s linear infinite both;
}

.ui-chat__turn {
  display: grid;
  justify-items: start;
}

.ui-chat__turn > * { grid-area: 1 / 1; }

.ui-chat__msg--reply {
  border-bottom-left-radius: var(--ui-r-sm);
  background: var(--ui-bg3);
  color: var(--ui-fg);
  animation: ui-chat-reply 10s linear infinite both;
}

.ui-chat__typing {
  display: inline-flex;
  gap: 4px;
  padding: 12px;
  border-radius: var(--ui-r-lg);
  border-bottom-left-radius: var(--ui-r-sm);
  background: var(--ui-bg3);
  opacity: 0;
  animation: ui-chat-typing 10s linear infinite both;
}

.ui-chat__typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ui-faint);
  animation: ui-typing 1s ease-in-out infinite;
}

.ui-chat__typing span:nth-child(2) { animation-delay: 150ms; }
.ui-chat__typing span:nth-child(3) { animation-delay: 300ms; }

.ui-chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  animation: ui-chat-chips 10s linear infinite both;
}

.ui-chat__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 8px;
  border: 1px solid var(--ui-line2);
  border-radius: var(--ui-r-pill);
  background: var(--ui-bg2);
  font: 600 12px/1.3 var(--ui-font);
  color: var(--ui-fg);
}

.ui-chat__chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the way into the simulation: white on navy, 16.46:1 */
.ui-chat__chip--go {
  border-color: var(--ui-nav);
  background: var(--ui-nav);
  color: var(--ui-nav-fg);
}

.ui-chat__chip--go svg { fill: currentColor; }

@keyframes ui-chat-ask {
  0%       { opacity: 0; transform: translateY(6px); }
  4%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes ui-chat-typing {
  0%, 10%   { opacity: 0; }
  13%, 26%  { opacity: 1; }
  29%, 100% { opacity: 0; }
}

@keyframes ui-chat-reply {
  0%, 28%   { opacity: 0; transform: translateY(6px); }
  32%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes ui-chat-chips {
  0%, 38%   { opacity: 0; transform: translateY(6px); }
  42%, 88%  { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}

@keyframes ui-typing {
  0%, 100% { opacity: 0.4; transform: none; }
  50%      { opacity: 1; transform: translateY(-3px); }
}

/* --------------------------------------------------------------------------
   The launch film
   -------------------------------------------------------------------------- */

.ui-film {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* The thumbnail: the film's closing card, dimmed a little on hover, with a
   frosted play button that swells under the pointer. Magic UI's Hero Video
   Dialog, in the brand's blue rather than a theme primary. */
.ui-film__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  background: var(--ui-nav);
  box-shadow: 0 24px 48px -24px var(--ui-umbra), 0 2px 6px var(--ui-umbra);
  cursor: pointer;
}

.ui-film__poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: filter var(--ui-m-base) var(--ui-ease-enter);
}

.ui-film__thumb:hover .ui-film__poster { filter: brightness(0.8); }

.ui-film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

/* outer ring: a frosted disc of the accent */
.ui-film__play::before {
  content: "";
  position: absolute;
  width: clamp(72px, 12vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ss-blue) 18%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

/* inner button: the accent, deepening downward, scaling up on hover */
.ui-film__play-core {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(52px, 8.5vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(color-mix(in srgb, var(--ss-blue) 40%, transparent), var(--ss-blue));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ss-navy) 35%, transparent);
  transform: scale(1);
  transition: transform var(--ui-m-slow) var(--ui-ease-move);
}

.ui-film__thumb:hover .ui-film__play-core { transform: scale(1.2); }

.ui-film__play-core svg {
  width: 40%;
  height: 40%;
  margin-left: 6%;            /* a play triangle's weight sits left of its box */
  fill: var(--ss-white);
  transition: transform var(--ui-m-slow) var(--ui-ease-move);
}

.ui-film__thumb:hover .ui-film__play-core svg { transform: scale(1.1); }

/* The dialog: a blurred navy backdrop, the film framed in white, the close
   button floating above its top-right corner. It grows from the center. */
.ui-film__dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.ui-film__dialog[open] {
  display: grid;
  place-items: center;
}

.ui-film__dialog::backdrop {
  background: color-mix(in srgb, var(--ss-navy) 55%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.ui-film__stage {
  position: relative;
  width: min(100%, 896px, calc((100vh - 160px) * 16 / 9));
}

.ui-film__screen {
  overflow: hidden;
  isolation: isolate;
  border: 2px solid var(--ss-white);
  border-radius: var(--ui-r-lg);
  background: var(--ui-nav);
}

.ui-film__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--ui-nav);
}

.ui-film__close {
  position: absolute;
  top: -56px;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ss-navy) 60%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-white) 30%, transparent);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  color: var(--ss-white);
  cursor: pointer;
  transition: background var(--ui-m-fast) var(--ui-ease-move);
}

.ui-film__close:hover { background: var(--ss-navy); }

.ui-film__close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* from-center: the stage grows out of the middle of the screen, a touch
   past its size and back, and the backdrop fades in with it. Closing runs
   it the other way. */
.ui-film__dialog[open] .ui-film__stage {
  animation: ui-film-in 360ms cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
.ui-film__dialog[open]::backdrop { animation: ui-film-fade var(--ui-m-slow) var(--ui-ease-enter) both; }

.ui-film__dialog.is-closing .ui-film__stage {
  animation: ui-film-out var(--ui-m-base) var(--ui-ease-move) both;
}
.ui-film__dialog.is-closing::backdrop { animation: ui-film-fade var(--ui-m-base) var(--ui-ease-move) reverse both; }

@keyframes ui-film-in {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes ui-film-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.5); }
}
@keyframes ui-film-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.ui-faq {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px clamp(80px, 10vw, 120px);   /* the rule above sets the gap */
}

/* Page heading: Poppins 32px / 1.15 */
.ui-faq__title {
  margin: 0 0 40px;
  text-align: center;
  font: 800 32px/1.15 var(--ui-display);
}

.ui-faq__title em {
  font-style: normal;
  background: var(--ss-gradient-simulation);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.ui-faq__list {
  display: grid;
  gap: 12px;
}

.ui-faq__item {
  position: relative;
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r-lg);
  background: var(--ui-bg2);
  transition: border-color var(--ui-m-fast) var(--ui-ease-move), box-shadow var(--ui-m-base) var(--ui-ease-move);
}

.js .ui-faq__item[data-reveal].is-in {
  transition:
    opacity var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms),
    transform var(--ui-m-slow) var(--ui-ease-enter) var(--delay, 0ms),
    border-color var(--ui-m-fast) var(--ui-ease-move),
    box-shadow var(--ui-m-base) var(--ui-ease-move);
}

.ui-faq__item:hover { border-color: var(--ui-line2); }

/* Open: a navy edge, like the reference */
.ui-faq__item.is-open {
  border-color: var(--ui-fg);
  box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--ss-navy) 45%, transparent);
}

.ui-faq__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ss-gradient-simulation);
  transform: scaleY(0);
  transition: transform var(--ui-m-slow) var(--ui-ease-move);
}

.ui-faq__item.is-open::before { transform: scaleY(1); }

.ui-faq__q {
  margin: 0;
  font: inherit;
}

.ui-faq__trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 20px 20px 24px;
  border: 0;
  border-radius: var(--ui-r-lg);
  background: none;
  color: inherit;
  font: 500 18px/1.35 var(--ui-font);
  text-align: left;
  cursor: pointer;
}

.ui-faq__index {
  flex-shrink: 0;
  width: 24px;
  font: 600 12px/1 var(--ui-font);
  font-variant-numeric: tabular-nums;
  color: var(--ui-faint);
  transition: color var(--ui-m-fast) var(--ui-ease-move);
}

.ui-faq__item.is-open .ui-faq__index { color: var(--ui-accent-2); }

.ui-faq__text { flex: 1; }

.ui-faq__chev {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--ui-edge);
  transition:
    background var(--ui-m-fast) var(--ui-ease-move),
    border-color var(--ui-m-fast) var(--ui-ease-move),
    color var(--ui-m-fast) var(--ui-ease-move),
    transform var(--ui-m-base) var(--ui-ease-move);
}

.ui-faq__chev svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-faq__trigger:hover .ui-faq__chev { background: var(--ui-bg3); }

.ui-faq__item.is-open .ui-faq__chev {
  transform: rotate(180deg);
  background: var(--ui-nav);
  border-color: var(--ui-nav);
  color: var(--ui-nav-fg);
}

.ui-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ui-m-slow) var(--ui-ease-move);
}

.ui-faq__item.is-open .ui-faq__panel { grid-template-rows: 1fr; }

.ui-faq__inner {
  min-height: 0;
  overflow: hidden;
}

.ui-faq__inner p {
  max-width: 680px;
  margin: 0;
  padding: 0 68px 24px 64px;
  color: var(--ui-dim);
  font-size: 16px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity var(--ui-m-base) var(--ui-ease-enter);
}

.ui-faq__item.is-open .ui-faq__inner p {
  opacity: 1;
  transition-delay: 80ms;
}

.ui-faq__more {
  margin: 32px 0 0;
  text-align: center;
  color: var(--ui-dim);
  font-size: 16px;
}

/* Links write in --ui-accent-2: deep blue on light, 7.11:1 on Surface */
.ui-faq__more a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
  border-radius: var(--ui-r-sm);
  color: var(--ui-accent-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ui-faq__more svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--ui-m-base) var(--ui-ease-move);
}

.ui-faq__more a:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Footer: the version the tool carries, and the address that answers
   -------------------------------------------------------------------------- */

.ui-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  width: calc(100% - 40px);   /* the rule above it spans the content, not the gutters */
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 0 32px;
  border-top: 1px solid var(--ui-line);
  color: var(--ui-faint);
  font-size: 14px;
  line-height: 1.4;
}

.ui-foot__sym {
  display: block;
  width: 16px;
  height: auto;
}

.ui-foot__grow { flex: 1; }

/* Links write in --ui-accent-2, as the FAQ's does */
.ui-foot a {
  border-radius: var(--ui-r-sm);
  color: var(--ui-accent-2);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Between the bento and one column, two by two: a narrow bento card here
   is too narrow for its name to sit beside its icon */
@media (max-width: 1179px) {
  .ui-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-service--wide { grid-column: auto; }
  .ui-service__points--two { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1080px) {
  .ui-plan { padding: 28px 22px 22px; }
  .ui-service__body { padding: 24px 22px 24px; }
}

@media (max-width: 980px) {
  .ui-pricing__head {
    flex-direction: column;
    align-items: flex-start;
    max-width: 480px;
  }
  .ui-plans {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-top: 40px;
  }
  .ui-pricing__note { max-width: 480px; }
  .ui-bento {
    grid-template-columns: minmax(0, 1fr);
    max-width: 480px;
    margin-top: 40px;
  }
  .ui-service--wide { grid-column: auto; }
  .ui-service__points--two { grid-template-columns: minmax(0, 1fr); }
  .ui-top { max-width: 520px; }
  .ui-foot { max-width: 480px; }
  .ui-plan__tagline { min-height: 0; }
}

/* On a phone the way in stays beside the lockup rather than dropping under
   it: the lockup keeps its 180px minimum, so the button gives up its arrow. */
/* On a phone the lockup takes the first row at its 180px minimum and the two
   buttons share the second, half each: the trial without its "Start a", the
   way in without its arrow. */
@media (max-width: 560px) {
  .ui-top { gap: 16px; }
  .ui-top__acts { flex-basis: 100%; flex-wrap: nowrap; }
  .ui-top__btn { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 12px; }
  .ui-top__btn { white-space: nowrap; }
  .ui-top__wide { display: none; }
  .ui-top__open .ui-btn__arrow { display: none; }
}

@media (max-width: 640px) {
  .ui-faq__trigger { gap: 12px; padding: 18px 16px; font-size: 16px; }
  .ui-faq__index { display: none; }
  .ui-faq__inner p { padding: 0 16px 20px; }
  .ui-faq__title { font-size: 24px; line-height: 1.2; }
  .ui-services__title { font-size: 24px; line-height: 1.2; }
}

/* A small phone: a smaller icon and name keep them on one row down to
   360px. Under that the name goes under the icon rather than leaving a
   word on its own. */
@media (max-width: 400px) {
  .ui-service__body { padding: 22px 20px 24px; }
  .ui-service__head { gap: 10px; }
  .ui-service__icon { width: 36px; height: 36px; }
  .ui-service__name { font-size: 18px; }
}

@media (max-width: 359px) {
  .ui-service__head { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: transitions off, not shortened
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after,
  ::backdrop {
    animation: none !important;
    transition: none !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .ui-infinity__trace { stroke-dasharray: none; }
  /* the services' pictures hold their resting frame: the documents in a
     row, the newest conversions, every route lit, the answer given */
  .ui-beams__flow { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0.55; }
}

@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}