/* section 06-setup — template "Setup" section (framer-1q0xyi2), values copied from the template CSS and measured live.
   desktop >= 1200: 3 cards · tablet 810–1199.98: 2 cards · phone < 810: 1 card. Card gap 8, cards → tape gap 64.
   Card = template component W7Efo (framer-1slqsu5), UI panel = component 7wkDC (framer-1cxds6k), tape = component 0xS6l (ticker). */

.stp .stp__sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* title block (framer-nkb4p8): full width, max 480 */
.stp .stp__title { position: relative; width: 100%; max-width: 480px; }
.stp .stp__title h2 { white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }

/* container (framer-1wy8ame): column, centred, gap 64 */
.stp .stp__container { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 64px; width: 100%; }

/* cards grid (framer-1q9x9ft): 3 × minmax(50px, 1fr), gap 8 */
.stp .stp__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stp .stp__cell { position: relative; display: flex; flex-direction: column; min-width: 0; width: 100%; }

/* card (framer-1slqsu5 "Default"): #0f151b, radius 32, 0.8px border #ffffff0d inside (data-border="soft"),
   column centred, padding-bottom 10, clipped */
.stp .stp__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  flex: 1 0 auto;
  width: 100%;
  padding: 0 0 10px;
  border-radius: var(--r-32);
  background-color: var(--surface);
  overflow: hidden;
  cursor: default;
}

/* image area (framer-31rqvz): 276 tall; the template's background image is a fully transparent PNG (not reproduced) */
.stp .stp__image { position: relative; flex: none; width: 100%; height: 276px; }

/* hover plate (framer-3mkwwi "Overlay", desktop variant only).
   rest: 335 × 251 at right -9 / bottom -16, opacity 0 · hover: 340 × 251 at right 0 / bottom -5, opacity 1.
   Framer animates the layout change as a FLIP transform (origin centre) with a spring; measured on the live template:
   ζ 0.80, ω 22.6 rad/s (stiffness ≈ 510, damping ≈ 36, 1.5 % overshoot, settles at ~0.39 s) → sampled below as linear();
   opacity follows 20 ms later as a 0.22 s ease tween. Same curves on leave. Laid out at the hover geometry,
   the rest state is the inverse transform: translate(+11.5, +11) scaleX(335 / 340). */
.stp .stp__plate {
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 340px;
  height: 251px;
  background: linear-gradient(189deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 100%);
  border-top-left-radius: 16px;
  opacity: 0;
  transform: translate(11.5px, 11px) scaleX(0.985294);
  transform-origin: 50% 50%;
  pointer-events: none;
  transition:
    transform 0.4s linear(0, 0.0226, 0.0801, 0.1594, 0.2505, 0.346, 0.4404, 0.53, 0.6125, 0.6865, 0.7514, 0.8073, 0.8544, 0.8934, 0.9252, 0.9505, 0.9702, 0.9852, 0.9963, 1.0042, 1.0095, 1.0128, 1.0146, 1.0152, 1.0149, 1.0141, 1.013, 1.0116, 1.0102, 1.0087, 1.0073, 1.0061, 1.0049, 1.0039, 1.0031, 1.0023, 1.0017, 1.0012, 1.0008, 1.0005, 1),
    opacity 0.22s cubic-bezier(0.25, 0.1, 0.25, 1) 0.02s;
}
.stp .stp__card:hover .stp__plate { opacity: 1; transform: none; }

/* UI slot (framer-us5x69-container): 236 tall, bottom 0, left 24, right 0 (runs into the card's clipped right edge) */
.stp .stp__ui { position: absolute; left: 24px; right: 0; bottom: 0; height: 236px; }

/* UI panel (framer-1cxds6k): 182° white 17 % → 0 gradient, top-left radius 8, padding 20, gap 16, clipped */
.stp .stp__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: hidden;
  background: linear-gradient(182deg, rgba(255, 255, 255, 0.17) 0%, rgba(255, 255, 255, 0) 100%);
  border-top-left-radius: 8px;
}
.stp .stp__panel p { margin: 0; }

/* shared UI type */
.stp .stp__ptitle { position: relative; flex: none; width: 100%; font-family: var(--f-body); font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.02em; color: #fff; white-space: pre-wrap; overflow-wrap: break-word; }
.stp .stp__ico { position: relative; flex: none; display: block; width: 16px; height: 16px; opacity: 0.6; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: hidden; }

/* ---- card 1 · list (framer-1w3g7lc "Source data") */
.stp .stp__src { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; padding: 0 24px 0 0; }
.stp .stp__list { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 7.22959px; width: 100%; }
.stp .stp__item { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; padding: 8px 10px; background-color: rgba(255, 255, 255, 0.06); border-radius: 6px; }
.stp .stp__item--z { z-index: 1; }
/* progress overlay (framer-1ermt5h / 1ft7gy5 / 3b7yqk): 30 / 55 / 80 %, white 4 %, above the text like the template */
.stp .stp__bar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 1; background-color: rgba(255, 255, 255, 0.04); border-radius: 6px 0 0 6px; }
.stp .stp__itext { position: relative; flex: none; width: 235px; font-family: var(--f-brand); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-90); white-space: pre-wrap; overflow-wrap: break-word; }
.stp .stp__status { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 6px; }
.stp .stp__ring10 { position: relative; flex: none; display: block; width: 10px; height: 10px; overflow: hidden; }
.stp .stp__stext { position: relative; flex: none; font-family: var(--f-body); font-weight: 400; font-size: 11px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-60); white-space: pre; }

/* ---- card 2 · rows (framer-1cu4k3 "Create workflow") */
.stp .stp__flow { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; }
.stp .stp__ftitle { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 6px; width: 100%; }
.stp .stp__ftitle .stp__ptitle { flex: 1 0 0; width: 1px; }
.stp .stp__rows { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 100%; }
.stp .stp__row { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 12px; width: 100%; }
.stp .stp__row--top { align-items: flex-start; }
.stp .stp__rlabel { position: relative; flex: none; width: 76px; font-family: var(--f-brand); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-60); white-space: pre-wrap; overflow-wrap: break-word; }
.stp .stp__chips { position: relative; flex: none; display: flex; flex-direction: row; align-items: flex-start; gap: 4px; }
/* chip (framer-132mta9): 24 tall, padding .25 6 1.25 4, gap 6, radius 4, 1px dashed white 10 % drawn inside */
.stp .stp__chip { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 6px; height: 24px; padding: 0.25px 6px 1.25px 4px; border-radius: 4px; }
.stp .stp__chip::after { content: ""; position: absolute; inset: 0; border: 1px dashed rgba(255, 255, 255, 0.1); border-radius: inherit; pointer-events: none; }
/* avatar (framer-31hbc4): 16 round — the company mark on a light disc (the template shows a grey photo here) */
.stp .stp__avatar { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 8px; overflow: hidden; background-color: rgba(255, 255, 255, 0.6); }
.stp .stp__avatar-glyph { display: block; width: 10px; height: 10px; background-color: var(--ink); -webkit-mask: url("/img/logos/anthropic.svg") center / contain no-repeat; mask: url("/img/logos/anthropic.svg") center / contain no-repeat; }
.stp .stp__ctext { position: relative; flex: none; font-family: var(--f-brand); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-90); white-space: pre; }
.stp .stp__line { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.stp .stp__lines { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 217px; }
.stp .stp__lines .stp__line { width: 100%; }
.stp .stp__ring18 { position: relative; flex: none; display: block; width: 18px; height: 18px; overflow: hidden; }
.stp .stp__llabel { position: relative; flex: none; font-family: var(--f-body); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-60); white-space: pre; }
.stp .stp__ltitle { position: relative; flex: none; font-family: var(--f-brand); font-weight: 500; font-size: 12px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-90); white-space: pre; }

/* ---- card 3 · tag grid (framer-w60upy "Automate operations") */
.stp .stp__ops { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; overflow: clip; }
.stp .stp__otitle { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; }
.stp .stp__otitle .stp__ptitle { width: auto; white-space: pre; }
.stp .stp__count { position: relative; flex: none; font-family: var(--f-body); font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-60); white-space: pre; }
.stp .stp__tags { position: relative; flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.stp .stp__trow { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; gap: 8px; width: 100%; }
/* tag (framer-1v6comh): flex 1, padding 8 10, white 5 %, radius 5.86; Host Grotesk 11/18 500, -0.12px, centred */
.stp .stp__tag { position: relative; flex: 1 0 0; width: 1px; padding: 8px 10px; background-color: rgba(255, 255, 255, 0.05); border-radius: 5.86px; font-family: var(--f-brand); font-weight: 500; font-size: 11px; line-height: 18px; letter-spacing: -0.12px; color: #fff; text-align: center; white-space: pre; overflow: visible; }

/* ---- card text row (framer-1uy6ao2): padding 20 24, gap 8; title = H3 preset; step = 42 ring, 2px white 4 % inside */
.stp .stp__text { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; padding: 20px 24px; }
.stp .stp__name { position: relative; flex: 1 0 0; width: 1px; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; }
.stp .stp__step { position: relative; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; width: 42px; height: 42px; border-radius: 999px; }
.stp .stp__step::after { content: ""; position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.04); border-radius: inherit; pointer-events: none; }
.stp .stp__step span { position: relative; flex: none; font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; color: var(--t-60); white-space: pre; }

/* ---- tape (framer-1gzgox3 "Logos"): column centred, gap 20, max 830, clipped */
.stp .stp__tape { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; max-width: 830px; overflow: hidden; }
.stp .stp__kicker { position: relative; flex: none; white-space: pre; }
/* ticker (framer-1774jci): full width, radius 10, clipped — no edge fade on the template */
.stp .stp__ticker { width: 100%; border-radius: 10px; }
.stp .stp__track { margin: 0; padding: 0; list-style: none; }
/* tile (framer-kvmizj "Logo"): #0f151b, radius 12, padding 14, 32 px mark → 60 tall; 10 px spacing (margin, so the loop seam is exact) */
.stp .stp__tile {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  height: 60px;
  margin-right: 10px;
  padding: 14px 18px 14px 14px;
  border-radius: 12px;
  background-color: var(--surface);
  overflow: hidden;
}
.stp .stp__tile:not(:has(.stp__logo)) { padding-left: 18px; }
/* marks: Simple Icons (CC0) in /img/logos, painted near-white like the template's PNG marks (≈ #f8f8f8, glyph ≈ 24 of 32 px) */
.stp .stp__logo { flex: none; display: block; width: 32px; height: 32px; background-color: #f8f8f8; -webkit-mask: var(--logo) center / 24px 24px no-repeat; mask: var(--logo) center / 24px 24px no-repeat; }
.stp .stp__logo--anthropic { --logo: url("/img/logos/anthropic.svg"); }
.stp .stp__logo--tether { --logo: url("/img/logos/tether.svg"); }
.stp .stp__logo--discord { --logo: url("/img/logos/discord.svg"); }
.stp .stp__logo--blueorigin { --logo: url("/img/logos/blueorigin.svg"); -webkit-mask-size: 32px 32px; mask-size: 32px 32px; }
.stp .stp__logo--atoms { --logo: url("/img/logos/atoms.svg"); -webkit-mask-size: 20px 20px; mask-size: 20px 20px; }
.stp .stp__tname { flex: none; font-family: var(--f-display); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--t-90); white-space: pre; }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1199.98px) {
  .stp .stp__cards { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .stp .stp__name, .stp .stp__step span { font-size: 24px; }
  .stp .stp__plate { display: none; } /* the tablet / phone variants have no hover plate */
}

/* ----------------------------------------------------------------- phone */
@media (max-width: 809.98px) {
  .stp .stp__cards { grid-template-columns: repeat(1, minmax(50px, 1fr)); }
  .stp .stp__chip--3 { visibility: hidden; } /* past the panel clip on phone (the template shows only a 0.5 px sliver) */
}

@media (prefers-reduced-motion: reduce) {
  .stp .stp__plate { transition: none; }
}