/* ==========================================================================
   Thryv Studio: site behaviour and motion layer.
   base.css carries the page layout. This file adds everything that moves,
   the rebuilt components (menu, FAQ, form states) and the section visuals.

   Motion rules used throughout
   - transform and opacity only; individual transform properties (translate,
     scale, rotate) so loops and reveals never overwrite layout transforms
   - hidden states only apply under html.js, so the page is fully readable
     without JavaScript and for crawlers
   - every loop pauses off-screen (.is-off) and everything respects
     prefers-reduced-motion
   ========================================================================== */

:root {
  --ts-ink: #111;
  --ts-muted: #6b6560;
  --ts-surface: #f4f2f1;
  --ts-purple: #8a43e1;
  --ts-magenta: #d511fd;
  --ts-violet: #b02be8;
  --ts-orange: #ff8a5b;
  --ts-grad: linear-gradient(135deg, #ff8a5b 0%, #d511fd 55%, #8a43e1 100%);
  --ts-ease: cubic-bezier(.23, 1, .32, 1);
  --ts-ease-io: cubic-bezier(.44, 0, .56, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#problem, #solution, #how-it-works, #services, #testimonials, #testimonials-1, #faq, #contact, #comparison { scroll-margin-top: 96px; }
:focus-visible { outline: 2px solid var(--ts-purple); outline-offset: 3px; border-radius: 6px; }

/* --- Entrance (hero): the export's own curves and delays ----------------- */
@keyframes ts-rise { from { opacity: .001; translate: 0 var(--ey, 80px); scale: var(--es, .9); } }
@keyframes ts-slide { from { opacity: .001; translate: var(--ex, 0) 0; } }
.js [data-enter="rise"] { animation: ts-rise var(--ed, 2s) var(--ee, cubic-bezier(.16, 1, .3, 1)) var(--el, 0s) both; }
.js [data-enter="slide"] { animation: ts-slide var(--ed, 2s) var(--ee, var(--ts-ease)) var(--el, 0s) both; }

/* --- Reveal on scroll ----------------------------------------------------- */
.js [data-reveal] {
  transition-property: opacity, scale, translate, rotate, transform;
  transition-duration: var(--rd, .9s);
  transition-timing-function: var(--re, var(--ts-ease));
  transition-delay: var(--rl, 0s);
}
.js [data-reveal="zoom"]:not(.in) { opacity: 0; transform: perspective(1200px) scale(.8); }
.js [data-reveal="up"]:not(.in) { opacity: 0; translate: 0 24px; }

/* --- Render the lower sections only as they come near --------------------
   content-visibility lets the browser skip style, layout and paint for the
   sections below the first screens until they approach the viewport. On a
   throttled phone this moved the first paint from about 5s to about 2s.
   Each size is the section's measured content height at that breakpoint;
   "auto" swaps in the real height once a section has rendered. site.js
   re-checks in-page jumps in case an estimate was off. */
#problem, #solution, #testimonials, #comparison, #how-it-works,
#services, #testimonials-1, #faq, #contact, .t-rul9zi-container { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
@media (max-width: 809.98px) {
  #problem { contain-intrinsic-size: auto 1550px; }
  #solution { contain-intrinsic-size: auto 1780px; }
  #testimonials { contain-intrinsic-size: auto 735px; }
  #comparison { contain-intrinsic-size: auto 1240px; }
  #how-it-works { contain-intrinsic-size: auto 2890px; }
  #services { contain-intrinsic-size: auto 2150px; }
  #testimonials-1 { contain-intrinsic-size: auto 2575px; }
  #faq { contain-intrinsic-size: auto 1230px; }
  #contact { contain-intrinsic-size: auto 1250px; }
  .t-rul9zi-container { contain-intrinsic-size: auto 750px; }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  #problem { contain-intrinsic-size: auto 1165px; }
  #solution { contain-intrinsic-size: auto 1115px; }
  #testimonials { contain-intrinsic-size: auto 705px; }
  #comparison { contain-intrinsic-size: auto 1290px; }
  #how-it-works { contain-intrinsic-size: auto 1990px; }
  #services { contain-intrinsic-size: auto 1835px; }
  #testimonials-1 { contain-intrinsic-size: auto 1700px; }
  #faq { contain-intrinsic-size: auto 1230px; }
  #contact { contain-intrinsic-size: auto 1070px; }
  .t-rul9zi-container { contain-intrinsic-size: auto 670px; }
}
@media (min-width: 1200px) {
  #problem { contain-intrinsic-size: auto 595px; }
  #solution { contain-intrinsic-size: auto 915px; }
  #testimonials { contain-intrinsic-size: auto 625px; }
  #comparison { contain-intrinsic-size: auto 655px; }
  #how-it-works { contain-intrinsic-size: auto 1995px; }
  #services { contain-intrinsic-size: auto 1840px; }
  #testimonials-1 { contain-intrinsic-size: auto 1025px; }
  #faq { contain-intrinsic-size: auto 1245px; }
  #contact { contain-intrinsic-size: auto 630px; }
  .t-rul9zi-container { contain-intrinsic-size: auto 512px; }
}

/* --- Processor figure: scroll-linked poses ----------------------------------
   Where scroll-driven animations are supported, the SEO chip and the AI
   socket run on the compositor, off the main thread. Progress is the same
   as the original effect: 0 when the piece's top reaches the bottom of the
   screen, 1 when its bottom does. Other browsers use the JS spring in
   site.js; reduced motion shows the landed pose. */
@keyframes ts-land {
  from { transform: perspective(500px) translateY(-300px) scale(1.3) rotateX(9deg); }
  to { transform: perspective(500px) translateY(0) scale(1) rotateX(0deg); }
}
@keyframes ts-drop {
  from { transform: perspective(500px) translateY(-80px) scale(1) rotateX(28deg); }
  to { transform: perspective(500px) translateY(0) scale(1) rotateX(0deg); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll="land"], [data-scroll="drop"] {
      animation: ts-land linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    [data-scroll="drop"] { animation-name: ts-drop; }
  }
}

/* --- Processor chip label: "SEO" in the hero, "Agentic SEO" once landed -- */
#main p.ts-seo { display: grid; place-items: center; }
.ts-seo > span { grid-area: 1 / 1; transition: opacity .32s ease, filter .32s ease, scale .45s cubic-bezier(.34, 1.3, .64, 1); }
.ts-seo-b { opacity: 0; filter: blur(6px); scale: .9; }
.is-agentic .ts-seo-a { opacity: 0; filter: blur(6px); scale: 1.08; }
.is-agentic .ts-seo-b { opacity: 1; filter: blur(0); scale: 1; }

/* --- Circuit board behind the processor ------------------------------------
   Vector geometry (tools/circuit_board.py) in place of the export's raster
   drawing, centred on the processor at a fixed scale (one board unit =
   0.852px), so the chip and board keep their proportions on every screen.
   The figure clips everything to the section.
   .ts-art is the board as designed: grey lines fading out from the centre.
   .ts-lit (the lit lines) and .ts-fx (the signals) are canvases drawn by
   visuals.js, placed and sized there around the processor. Thin strokes
   in the brand gradient, no glow. */
.t-heo43w.ts-board-host { inset: 0; opacity: 1; -webkit-mask: none; mask: none; will-change: auto; }
.ts-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; overflow: hidden; pointer-events: none; contain: strict;
  -webkit-mask: radial-gradient(491px 477px at 50% 50.0629%, #000 0%, #0000 100%);
  mask: radial-gradient(491px 477px at 50% 50.0629%, #000 0%, #0000 100%);
}
/* Board units to CSS px: origin on the processor centre, 1 unit = 0.852px */
.ts-plane { transform-box: view-box; transform: translate(50%, 50.0629%) scale(.852); }
.ts-art path { fill: none; stroke: #5d5d5d; stroke-opacity: .3; stroke-width: 2.4; }
.ts-lit, .ts-fx {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; contain: strict;
  opacity: 0; transition: opacity .45s ease;
  -webkit-mask: radial-gradient(570px 463px at 50% 50%, #000 15%, #0000 100%);
  mask: radial-gradient(570px 463px at 50% 50%, #000 15%, #0000 100%);
}
.ts-board-host.is-on .ts-lit, .ts-board-host.is-on .ts-fx { opacity: 1; transition-duration: .15s; }

/* --- Loops (the export's loop effects, as CSS) --------------------------- */
@keyframes ts-tilt-n { to { rotate: -1deg; } }
@keyframes ts-tilt-p { to { rotate: 1deg; } }
@keyframes ts-scroll { to { translate: 0 -172px; } }
.lp-tilt-n { animation: ts-tilt-n 1s linear infinite alternate; }
.lp-tilt-p { animation: ts-tilt-p 1s linear infinite alternate; }
.lp-scroll { animation: ts-scroll 4s linear infinite; }
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* --- Tickers --------------------------------------------------------------- */
[data-ticker] ul { will-change: transform; }
.js [data-ticker].is-ready ul { animation: ts-marquee var(--tk-dur, 30s) linear infinite; }
.js [data-ticker="tags"].is-ready ul { animation-name: ts-marquee-y; }
[data-ticker]:hover ul { animation-play-state: paused; }
@keyframes ts-marquee { to { transform: translateX(calc(-1 * var(--tk-shift, 50%))); } }
@keyframes ts-marquee-y { to { transform: translateY(calc(-1 * var(--tk-shift, 50%))); } }
[data-ticker="logos"] section {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}

/* --- "Wave goodbye to": vertical slideshow ------------------------------- */
[data-slideshow] ul { transition: transform .7s var(--ts-ease); }

/* --- Smooth scrolling (smooth.js with Lenis; its recommended base styles) -- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* --- Navigation ------------------------------------------------------------ */
.t-snjhtu-container nav { background-color: rgba(255, 255, 255, 0); transition: background-color .45s var(--ts-ease), padding .5s var(--ts-ease); }
.t-snjhtu-container .t-xul700 {
  background-color: rgba(255, 255, 255, 0); border-radius: 0; box-shadow: 0 4px 8px rgba(0, 0, 0, 0);
  transition: max-width .6s var(--ts-ease), padding .6s var(--ts-ease), background-color .45s var(--ts-ease),
    box-shadow .45s var(--ts-ease), border-radius .45s var(--ts-ease);
}
/* Scrolled past the top of the hero: the export's own "White" states.
   Desktop floats a white bar (12px corners, soft shadow, 1050px wide);
   tablet and phone turn the whole nav strip white. */
@media (min-width: 1200px) {
  html.is-scrolled .t-snjhtu-container .t-xul700 {
    max-width: 1050px; padding: 10px 20px; border-radius: 12px;
    background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .05);
  }
}
@media (max-width: 1199.98px) {
  html.is-scrolled .t-snjhtu-container nav { background-color: #fff; }
}

/* Comparison heading: "Thryv Studio" now has its space, which needs a
   little more than the original 700px to stay on one line. */
@media (min-width: 1200px) {
  #main .t-1t2wvd6 { max-width: 780px; }
  #main .t-1t2wvd6 > .t-1947ddx { width: 100%; }
}
.ts-menu-btn { all: unset; display: contents; cursor: pointer; }
.ts-menu-btn:focus-visible > * { outline: 2px solid var(--ts-purple); outline-offset: 4px; border-radius: 8px; }

.ts-menu {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: 88px 24px 32px; background: rgba(244, 242, 241, .96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ts-ease), visibility 0s linear .35s;
}
.ts-menu.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ts-ease); }
.ts-menu a {
  display: block; padding: 14px 4px; border-bottom: 1px solid rgba(17, 17, 17, .08);
  font: 600 26px/1.2 "Inter Display", Inter, system-ui, sans-serif; letter-spacing: -.02em;
  color: var(--ts-ink); text-decoration: none;
  translate: 0 12px; opacity: 0; transition: translate .5s var(--ts-ease), opacity .5s var(--ts-ease);
}
.ts-menu.is-open a { translate: 0 0; opacity: 1; }
.ts-menu.is-open a:nth-child(2) { transition-delay: .04s; }
.ts-menu.is-open a:nth-child(3) { transition-delay: .08s; }
.ts-menu.is-open a:nth-child(4) { transition-delay: .12s; }
.ts-menu.is-open a:nth-child(5) { transition-delay: .16s; }
.ts-menu.is-open a:nth-child(6) { transition-delay: .2s; }
.ts-menu .ts-menu-cta {
  margin-top: 28px; border: 0; border-radius: 999px; padding: 16px 22px; text-align: center;
  background: var(--ts-ink); color: #fff; font-size: 17px; font-family: Inter, system-ui, sans-serif;
}
.ts-menu-close {
  position: absolute; top: 22px; right: 18px; width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .08); cursor: pointer;
}
.ts-menu-close::before, .ts-menu-close::after {
  content: ""; position: absolute; left: 13px; right: 13px; top: 21px; height: 2px; border-radius: 2px; background: var(--ts-ink);
}
.ts-menu-close::before { rotate: 45deg; }
.ts-menu-close::after { rotate: -45deg; }
html.menu-open { overflow: hidden; }

/* --- Hero secondary call to action ------------------------------------------ */
.ts-sub-cta {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 8px 4px;
  font: 500 15px/1.2 Inter, system-ui, sans-serif; color: var(--ts-ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--ts-ease), color .3s;
}
.ts-sub-cta:hover { background-size: 100% 1px; color: var(--ts-purple); }
.ts-sub-cta span { transition: translate .35s var(--ts-ease); }
.ts-sub-cta:hover span { translate: 3px 0; }
.js .ts-sub-cta { animation: ts-rise 2s cubic-bezier(.16, 1, .3, 1) .45s both; --ey: 40px; --es: 1; }
/* Beside "Book a Call" rather than under it, so the hero keeps its original
   height and the SEO chip peeks in exactly where it did before. */
@media (min-width: 810px) {
  #main .t-1va8el2 { flex-flow: row wrap; justify-content: center; column-gap: 22px; }
  #main .t-1va8el2 > .t-19vi7jn-container { flex: none; }
  .ts-sub-cta { margin-top: 0; }
}

/* Screen-reader-only text */
.ts-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Hero: "Be the brand [assistant] recommends." ------------------------- */
/* Every name shares one grid cell, so the chip is as wide as the longest name
   and nothing around it moves while site.js swaps them. */
.ts-hero-engines { display: flex; justify-content: center; width: 100%; }
.ts-engines-line {
  margin: 0; font: 500 clamp(19px, 2.1vw, 26px)/1.5 "Inter Display", Inter, system-ui, sans-serif;
  letter-spacing: -.02em; color: var(--ts-ink); text-align: center;
}
/* The chip sits on the line's baseline (an inline grid takes its first name's
   baseline), so the words either side line up with the name inside it. */
.ts-rot {
  display: inline-grid; vertical-align: baseline; margin: 0 .1em; padding: .06em .5em .1em;
  border-radius: 999px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .08), 0 4px 12px -6px rgba(17, 17, 17, .14);
}
.ts-rot-item {
  grid-area: 1 / 1; display: inline-block; white-space: nowrap; text-align: center;
  opacity: 0; translate: 0 80%;
  transition: opacity .4s var(--ts-ease), translate .7s var(--ts-ease);
}
.ts-rot-item.is-on { opacity: 1; translate: 0 0; }
.ts-rot-item.is-out { opacity: 0; translate: 0 -80%; }
/* Each assistant's own logo and colours; the name stays in the page's ink. */
.ts-rot-logo { display: inline-block; width: .86em; height: .86em; margin-right: .3em; vertical-align: -.12em; color: #000; }
.ts-rot-item b { font-weight: 600; color: var(--ts-ink); }

/* --- Problem icons: the site's own Phosphor shapes, brand-graded ---------- */
.t-1r9mq2x-container, .t-oy2mmp-container, .t-xzpln7-container, .t-101txwg-container { isolation: isolate; }
.t-1r9mq2x-container::before, .t-oy2mmp-container::before, .t-xzpln7-container::before, .t-101txwg-container::before {
  content: ""; position: absolute; left: 0; top: -9px; width: 48px; height: 48px; border-radius: 999px; z-index: -1;
  background: var(--pv-tint); box-shadow: inset 0 0 0 1px var(--pv-ring);
  transition: scale .5s var(--ts-ease), box-shadow .5s var(--ts-ease);
}
.t-1r9mq2x-container svg, .t-oy2mmp-container svg, .t-xzpln7-container svg, .t-101txwg-container svg { transform: translateX(9px) scale(.8); transform-origin: center; }
.t-1r9mq2x-container { --pv-hue: #ff8a5b; --pv-tint: rgba(255, 138, 91, .10); --pv-ring: rgba(255, 138, 91, .20); }
.t-oy2mmp-container { --pv-hue: #d511fd; --pv-tint: rgba(213, 17, 253, .08); --pv-ring: rgba(213, 17, 253, .18); }
.t-xzpln7-container { --pv-hue: #b02be8; --pv-tint: rgba(176, 43, 232, .09); --pv-ring: rgba(176, 43, 232, .18); }
.t-101txwg-container { --pv-hue: #8a43e1; --pv-tint: rgba(138, 67, 225, .10); --pv-ring: rgba(138, 67, 225, .20); }
.t-1r9mq2x-container svg path, .t-oy2mmp-container svg path, .t-xzpln7-container svg path, .t-101txwg-container svg path { fill: var(--pv-hue) !important; }

/* ==========================================================================
   Solution cards
   ========================================================================== */
.sv-grid {
  --ink: #111; --muted: #7a726b; --hair: #eae5e1; --stage: #f8f6f4;
  --purple: #8a43e1; --magenta: #d511fd; --orange: #ff8a5b; --ease: cubic-bezier(.23, 1, .32, 1);
  --accent: #8a43e1;                        /* one accent for every card's icon and subtitle */
  display: grid; grid-template-rows: 230px 366px; gap: 28px; width: 100%;
  font-family: Geist, Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
}
.sv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; min-height: 0; }
/* White cards with a hairline edge and a soft neutral shadow, the same on every card. */
.sv-card {
  --shell: 0px; --r-out: 20px; position: relative; min-height: 0; padding: var(--shell); border-radius: var(--r-out);
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .07), 0 1px 2px rgba(17, 17, 17, .04), 0 24px 48px -36px rgba(17, 17, 17, .28);
  transition: box-shadow 500ms cubic-bezier(.32, .72, 0, 1), opacity .8s cubic-bezier(.32, .72, 0, 1), translate .8s cubic-bezier(.32, .72, 0, 1);
  transition-delay: 0s, var(--d, 0ms), var(--d, 0ms);
}
.js .sv-card:not(.in) { opacity: 0; translate: 0 18px; }
@media (hover: hover) and (pointer: fine) {
  .sv-card:hover { box-shadow: 0 0 0 1px rgba(17, 17, 17, .1), 0 1px 2px rgba(17, 17, 17, .04), 0 32px 60px -36px rgba(17, 17, 17, .34); }
}
.sv-inner { height: 100%; min-height: 0; border-radius: calc(var(--r-out) - var(--shell)); background: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); padding: 10px; display: flex; flex-direction: column; overflow: hidden; }
.sv-card.is-hero .sv-inner { flex-direction: row; gap: 10px; }
.sv-stage { position: relative; flex: 1 1 auto; min-height: 104px; border-radius: 9px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; isolation: isolate; }
.sv-fig { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center center; contain: size layout style; }
.sv-copy { padding: 16px 16px 10px; }
.sv-copy-hero { flex: 0 0 40%; padding: 18px 14px 18px 22px; display: flex; flex-direction: column; justify-content: center; }
.sv-head { display: flex; align-items: center; gap: 12px; }
.sv-ico { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: var(--accent); background: rgba(138, 67, 225, .08); box-shadow: inset 0 0 0 1px rgba(138, 67, 225, .16); }
.sv-ico svg { width: 16px; height: 16px; }
.is-hero .sv-ico { width: 46px; height: 46px; }
.is-hero .sv-ico svg { width: 24px; height: 24px; }
.sv-title { margin: 0; font-size: 16.5px; font-weight: 600; letter-spacing: -.018em; color: var(--ink); line-height: 1.25; }
.is-hero .sv-title { font-size: 22px; }
.sv-lead { margin: 8px 0 0; font-size: 12.8px; font-weight: 500; line-height: 1.4; color: var(--accent); }
.is-hero .sv-lead { margin-top: 4px; font-size: 14px; }
.sv-body { margin: 6px 0 0; font-size: 12.4px; line-height: 1.58; color: #6b6560; letter-spacing: -.002em; }
.is-hero .sv-body { margin-top: 14px; font-size: 13.2px; max-width: 460px; }

.s1-tile { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; will-change: transform, opacity; }
.s1-face { position: absolute; inset: 0; z-index: 1; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 8px 16px -10px rgba(17, 17, 17, .30); display: grid; place-items: center; }
.s1-face svg { width: 18px; height: 18px; fill: var(--ink); }
.s1-glow { position: absolute; inset: -20px; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--purple) 28%, transparent), transparent); opacity: 0; }
.s1-read { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.s1-label { font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.s1-num { display: flex; justify-content: center; align-items: flex-start; margin-top: 6px; font-size: 30px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.s1-digit { position: relative; width: .6em; height: 1em; overflow: hidden; }
.s1-strip { position: absolute; left: 0; top: 0; width: 100%; display: flex; flex-direction: column; transition: transform 1.6s var(--ease); }
.s1-strip span { display: block; height: 1em; line-height: 1em; text-align: center; }
.s1-plus { font-size: .62em; line-height: 1.1; margin-left: 1px; color: var(--purple); }
.s1-plat { position: relative; height: 14px; margin-top: 7px; font-size: 11px; color: var(--muted); }
.s1-plat span { position: absolute; left: 50%; top: 0; white-space: nowrap; opacity: 0; transform: translate(-50%, 4px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.s1-plat span.on { opacity: 1; transform: translate(-50%, 0); }
.s1-plat b { font-weight: 600; color: var(--ink); }

/* 2 - agent run + strategist sign-off */
.s2 { width: 300px; height: 150px; }
.s2-log { position: absolute; left: 12px; right: 12px; top: 7px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 12px 24px -18px rgba(17, 17, 17, .30); }
.s2-head { display: flex; align-items: center; gap: 6px; height: 27px; padding: 0 8px 0 9px; border-bottom: 1px solid var(--hair); font-size: 9.4px; line-height: 1; }
.s2-head b { font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.s2-badge { flex: none; width: 16px; height: 16px; border-radius: 5px; display: grid; place-items: center; background: linear-gradient(135deg, var(--orange), var(--magenta) 55%, var(--purple)); }
.s2-badge svg { width: 10px; height: 10px; fill: #fff; }
.s2-sub { color: var(--muted); font-size: 8.2px; }
.s2-time { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 7px 0 6px; border-radius: 999px; background: var(--stage); box-shadow: inset 0 0 0 1px var(--hair); font-size: 8.6px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.s2-time svg { width: 9px; height: 9px; fill: none; stroke: var(--purple); stroke-width: 2.2; stroke-linecap: round; }
.s2-sec { display: inline-block; min-width: 1.15em; text-align: right; }
.s2-steps { position: relative; padding: 6px 9px 8px; }
.s2-trace { position: absolute; left: 15px; top: 15.5px; width: 1px; height: 38px; background: var(--hair); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease), opacity .3s var(--ease); }
.s2-trace.is-fill { background: linear-gradient(var(--magenta), var(--purple)); }
.s2-step { position: relative; display: flex; align-items: center; gap: 8px; height: 19px; font-size: 9px; color: var(--ink); opacity: 0; transform: translateY(3px); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.s2-step.is-run, .s2-step.is-done { opacity: 1; transform: none; }
.s2-st { position: relative; z-index: 1; flex: none; width: 12px; height: 12px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); transition: background-color .3s var(--ease), box-shadow .3s var(--ease); }
.s2-st svg { grid-area: 1 / 1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s2-st .spin { width: 10px; height: 10px; stroke: var(--purple); stroke-width: 2.8; opacity: 0; }
.s2-step.is-run .spin { opacity: 1; animation: s2-spin .7s linear infinite; }
@keyframes s2-spin { to { transform: rotate(360deg); } }
.s2-st .ok { width: 7px; height: 7px; stroke: #fff; stroke-width: 3.6; opacity: 0; transform: scale(.4); transition: opacity .25s var(--ease), transform .45s var(--ease); }
.s2-step.is-done .s2-st { background: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.s2-step.is-done .ok { opacity: 1; transform: none; }
/* "working" text: a soft highlight slides across the label while the step runs */
.s2-tx { position: relative; min-width: 0; overflow: hidden; white-space: nowrap; color: var(--muted); transition: color .3s var(--ease); }
.s2-step.is-done .s2-tx { color: var(--ink); }
.s2-tx::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)); opacity: 0; transform: translateX(-100%); }
.s2-step.is-run .s2-tx::after { opacity: 1; animation: s2-shine .85s linear infinite; }
@keyframes s2-shine { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
.s2-review { position: absolute; left: 20px; right: 46px; top: 96px; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 9px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--hair), 0 18px 30px -16px rgba(17, 17, 17, .34); opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .4s var(--ease), transform .6s var(--ease); }
.s2.is-review .s2-review { opacity: 1; transform: none; }
.s2-av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--purple) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 22%, transparent); }
.s2-av svg { width: 12px; height: 12px; fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; }
.s2-rv { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.1; }
.s2-rv b { font-size: 9px; font-weight: 600; color: var(--ink); }
.s2-rv small { font-size: 7.8px; color: var(--muted); }
.s2 .sw { display: grid; }
.s2 .sw > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.s2 .sw .b { opacity: 0; transform: translateY(3px); }
.s2.is-approved .sw .a { opacity: 0; transform: translateY(-3px); }
.s2.is-approved .sw .b { opacity: 1; transform: none; }
.s2-btn { margin-left: auto; flex: none; height: 20px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 8.4px; font-weight: 600; transition: background-color .35s var(--ease), transform .15s var(--ease); }
.s2-btn .b { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.s2-btn svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.s2-btn.is-down { transform: scale(.93); }
.s2.is-approved .s2-btn { background: #16a34a; }
.s2.is-out .s2-step { opacity: 0; transform: translateY(-3px); }
.s2.is-out .s2-trace { opacity: 0; }
.s2.is-out .s2-review { opacity: 0; transform: translateY(6px) scale(.98); }
/* collaborator cursor: the strategist's hand on the Approve button */
.s2-cursor { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; transform: translate(312px, 144px); transition: transform .65s cubic-bezier(.45, 0, .2, 1), opacity .3s var(--ease); pointer-events: none; }
.s2-cursor.is-on { opacity: 1; }
.s2-cursor svg { display: block; width: 14px; height: 14px; fill: var(--purple); stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; transform-origin: 2.5px 2.5px; transition: transform .14s var(--ease); }
.s2-cursor.is-down svg { transform: scale(.8); }
.s2-cursor span { position: absolute; left: 11px; top: 13px; padding: 2px 5px 3px; border-radius: 3px 7px 7px 7px; background: var(--purple); color: #fff; font-size: 7.4px; font-weight: 600; line-height: 1; white-space: nowrap; }

/* 3 - the same searches by traffic, then by revenue */
.s3 { width: 300px; height: 150px; }
.s3-head { position: absolute; left: 12px; right: 12px; top: 9px; height: 22px; display: flex; align-items: center; justify-content: space-between; }
.s3-seg { position: relative; display: flex; padding: 2px; border-radius: 999px; background: #efebe7; box-shadow: inset 0 0 0 1px var(--hair); }
.s3-knob { position: absolute; left: 2px; top: 2px; width: 50px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .10), 0 0 0 1px rgba(17, 17, 17, .04); transition: transform .5s var(--ease); }
.s3-opt { position: relative; width: 50px; height: 18px; display: grid; place-items: center; font-size: 8.4px; font-weight: 600; color: var(--muted); transition: color .35s var(--ease); }
.s3-opt.t { color: var(--ink); }
.s3.is-rev .s3-knob { transform: translateX(50px); }
.s3.is-rev .s3-opt.t { color: var(--muted); }
.s3.is-rev .s3-opt.r { color: var(--ink); }
.s3-total { display: grid; justify-items: end; font-size: 11.5px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.s3-total > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.s3-total small { margin-left: 3px; font-size: 7.8px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.s3-total i { font-style: normal; color: #b3aaa3; }
.s3-total .r { opacity: 0; transform: translateY(4px); }
.s3.is-rev .s3-total .t { opacity: 0; transform: translateY(-4px); }
.s3.is-rev .s3-total .r { opacity: 1; transform: none; }
.s3-rows { position: absolute; left: 12px; right: 12px; top: 39px; height: 103px; }
.s3-row { position: absolute; left: 0; right: 0; top: 0; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 9px; color: var(--ink); transform: translateY(calc(var(--t) * 27px)); transition: transform .7s var(--ease), opacity .5s var(--ease); }
.s3.is-rev .s3-row { transform: translateY(calc(var(--r) * 27px)); transition-delay: .3s, 0s; }
.s3.is-rev .s3-row:not(.buy) { opacity: .5; }
.s3-bar { position: absolute; inset: 0; z-index: -1; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.s3-bar i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.s3-bar .g { background: #eee9e5; }
.s3-bar .p { background: linear-gradient(90deg, rgba(255, 138, 91, .16), rgba(213, 17, 253, .15) 55%, rgba(138, 67, 225, .20)); }
.s3.is-on .s3-bar .g { transform: scaleX(var(--vw)); }
.s3.is-rev .s3-bar .g { transform: scaleX(0); }
.s3.is-rev .s3-bar .p { transform: scaleX(var(--rw)); }
.s3-row > svg { flex: none; width: 9px; height: 9px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; }
.s3-q { white-space: nowrap; }
.s3-tag { flex: none; padding: 2px 5px; border-radius: 999px; font-size: 7px; font-weight: 600; line-height: 1; color: var(--purple); background: color-mix(in srgb, var(--purple) 11%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 18%, transparent); opacity: 0; transform: scale(.85); transition: opacity .35s var(--ease), transform .45s var(--ease); }
.s3.is-rev .s3-tag { opacity: 1; transform: none; transition-delay: .8s; }
.s3-val { margin-left: auto; display: grid; justify-items: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.s3-val > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .4s var(--ease), transform .5s var(--ease); }
.s3-val .t { color: var(--muted); }
.s3-val .r { opacity: 0; transform: translateY(3px); color: var(--muted); }
.s3-row.buy .s3-val .r { color: var(--purple); }
.s3.is-rev .s3-val .t { opacity: 0; transform: translateY(-3px); }
.s3.is-rev .s3-val .r { opacity: 1; transform: none; }

.s4 { width: 250px; height: 150px; }
.s4-head { position: absolute; left: 0; right: 0; top: 0; height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.s4-live { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--ink); }
.s4-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.s4-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: #22c55e; opacity: .35; animation: s4-ping 1.8s var(--ease) infinite; }
@keyframes s4-ping { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
.s4-tag { font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.s4-list { position: absolute; left: 0; right: 0; top: 29px; bottom: 0; overflow: hidden; }
.s4-row { position: absolute; left: 10px; right: 10px; top: 0; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 6px; border-radius: 7px; font-size: 10px; color: var(--ink); transition: transform .7s var(--ease), opacity .7s var(--ease), background-color .9s var(--ease); }
.s4-row.fresh { background: color-mix(in srgb, var(--purple) 7%, #fff); }
.s4-row .ok { flex: none; width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; background: color-mix(in srgb, var(--purple) 12%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--purple) 22%, transparent); }
.s4-row .ok svg { width: 8px; height: 8px; fill: none; stroke: var(--purple); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.s4-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s4-row .m { flex: none; font-size: 8.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Phones: stack the cards with the figure on top; natural heights. */
@media (max-width: 809.98px) {
  .sv-grid { grid-template-rows: none; grid-auto-rows: auto; gap: 20px; }
  .sv-row { display: contents; }
  .sv-card.is-hero .sv-inner { flex-direction: column; gap: 0; }
  .sv-stage { flex: 0 0 auto; height: 176px; }
  .is-hero .sv-stage { order: -1; height: 204px; }
  .sv-copy, .sv-copy-hero { flex: none; padding: 16px 14px 8px; }
}
/* Narrow tablets: three columns would shrink the figures, use two. */
@media (min-width: 810px) and (max-width: 979.98px) {
  .sv-grid { grid-template-rows: auto; }
  .sv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-row .sv-card { height: 366px; }
  .sv-row .sv-card:last-child { grid-column: 1 / -1; }
  .sv-card.is-hero { height: 250px; }
}

/* ==========================================================================
   Step 03 "Accelerated Execution"
   ========================================================================== */
.t-mxv7w-container { display: flex; align-items: center; justify-content: center; overflow: visible; }
.tv-exec { position: relative; flex: none; width: 427px; height: 398px; transform: scale(var(--tv-scale, 1)); transform-origin: center center; font-family: Inter, system-ui, -apple-system, sans-serif; }
.tv-pill { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 7px 14px; border: 1px solid #e4e0dd; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 20px -14px rgba(17, 17, 17, .25); white-space: nowrap; font-size: 11.5px; font-weight: 500; color: #111; letter-spacing: -.01em; }
.tv-pill small { display: flex; align-items: center; justify-content: center; min-height: 12px; font-size: 9px; font-weight: 400; line-height: 1; color: #8a8279; letter-spacing: .01em; }
.tv-source { top: 6px; left: 50%; transform: translateX(-50%); }
.tv-out { bottom: 20px; }
.tv-out-a { left: 8px; }
.tv-out-b { right: 8px; }
.tv-core { position: absolute; top: 50%; left: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; }
.tv-core-glow { position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(213, 17, 253, .14), rgba(138, 67, 225, 0) 70%); animation: tv-breathe 4.2s ease-in-out infinite; }
.tv-core-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(138, 67, 225, .5); animation: tv-spin 16s linear infinite; }
.tv-core-ring.inner { inset: 13px; border-color: rgba(213, 17, 253, .42); animation-duration: 11s; animation-direction: reverse; }
.tv-core-disc { position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; background: linear-gradient(145deg, #d511fd, #8a43e1); box-shadow: 0 6px 18px -6px rgba(138, 67, 225, .65); color: #fff; text-align: center; }
.tv-core-disc b { font-size: 11.5px; font-weight: 600; line-height: 1; letter-spacing: .03em; }
.tv-core-disc span { margin-top: 1px; font-size: 7px; font-weight: 500; line-height: 1; opacity: .86; letter-spacing: .09em; }
@keyframes tv-spin { to { transform: rotate(360deg); } }
@keyframes tv-breathe { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.14); opacity: .9; } }
.tv-orbit { position: absolute; inset: 0; }
.tv-chip { position: absolute; top: 0; left: 0; padding: 5px 11px; border: 1px solid #e8e4e1; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 500; color: #5d564f; white-space: nowrap; box-shadow: 0 1px 2px rgba(17, 17, 17, .03); offset-path: path("M 59,196 a 154,76 0 1,1 308,0 a 154,76 0 1,1 -308,0"); offset-rotate: 0deg; animation: tv-orbit-run 30s linear infinite, tv-orbit-fade 30s ease-in-out infinite; animation-delay: var(--d), var(--d); }
@keyframes tv-orbit-run { to { offset-distance: 100%; } }
@keyframes tv-orbit-fade { 0%, 100% { opacity: 1; } 46% { opacity: .45; } 54% { opacity: .45; } }
.tv-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tv-rail { stroke: #e4e0dd; stroke-width: 1.25; fill: none; }
.tv-pulse { stroke-width: 2; fill: none; stroke-linecap: round; stroke-dasharray: 22 240; animation: tv-pulse-run 2.4s cubic-bezier(.4, 0, .3, 1) infinite; }
.tv-pulse.p2, .tv-pulse.p3 { animation-delay: .5s; }
@keyframes tv-pulse-run { from { stroke-dashoffset: 262; } to { stroke-dashoffset: 0; } }
.tv-cycle { position: relative; display: block; width: 152px; height: 12px; }
.tv-cycle span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; line-height: 1; opacity: 0; animation: tv-cycle 12s ease-in-out infinite; }
@keyframes tv-cycle { 0%, 42% { opacity: 1; } 50%, 100% { opacity: 0; } }
.tv-foot { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: .14em; color: #9b938a; }
/* Narrow slots (phones): fewer, larger labels so the scaled figure stays
   readable instead of shrinking 10px text to 7px. */
.tv-exec.is-compact .tv-opt { display: none; }
.tv-exec.is-compact .tv-chip { font-size: 13px; padding: 6px 13px; }
.tv-exec.is-compact .tv-pill { font-size: 14.5px; padding: 8px 16px; }
.tv-exec.is-compact .tv-pill small { font-size: 12px; min-height: 15px; }
.tv-exec.is-compact .tv-cycle { width: 190px; height: 15px; }
.tv-exec.is-compact .tv-foot { font-size: 11.5px; }
.tv-exec.is-compact .tv-core { scale: 1.15; }

/* ==========================================================================
   Step visuals rebuilt from the export's own states
   ========================================================================== */
/* Steps 01 and 02: our own product scenes (TSFigures.audit / roadmap) on the
   design's own stage, which keeps its tint and circuit texture. Each scene is
   a 360x336 figure scaled to fit its slot at every width. */
[data-scene] > .sv-fig { z-index: 1; }
.a1, .r2 { width: 360px; height: 336px; font-family: Inter, system-ui, sans-serif; color: #111; }
.a1.is-out .ts-fade, .r2.is-out .ts-fade, .r2.is-out .r2-card { opacity: 0; }

/* Step 01: an agent's magnifier scans the page; each finding flies into the report */
.a1-win { position: absolute; left: 18px; top: 10px; width: 324px; height: 196px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e9e3de, 0 18px 36px -24px rgba(17, 17, 17, .30); }
.a1-chrome { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 8px; background: #faf8f6; border-bottom: 1px solid #f0ebe7; }
.a1-dots { display: flex; gap: 4px; }
.a1-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e3ddd8; }
.a1-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 14px; padding: 0 14px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #ebe5e0; }
.a1-url svg { width: 7px; height: 7px; fill: none; stroke: #9a928b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a1-url i { display: block; height: 4px; border-radius: 2px; background: #e6dfd9; }
.a1-url i:nth-of-type(1) { width: 48px; }
.a1-url i:nth-of-type(2) { width: 12px; }
.a1-page { position: absolute; left: 0; top: 23px; width: 324px; height: 173px; }
/* the site being audited: any brand's homepage, no product or industry */
.a1-logo { position: absolute; border-radius: 50%; background: linear-gradient(135deg, var(--ts-orange), var(--ts-magenta) 55%, var(--ts-purple)); }
.a1-word { position: absolute; border-radius: 2px; background: #2a2522; }
.a1-nav { position: absolute; font-size: 6.5px; font-weight: 500; line-height: 1; color: #5d564f; white-space: nowrap; }
.a1-nav span { margin-left: 9px; }
.a1-signup { position: absolute; display: grid; place-items: center; border-radius: 6px; background: #111; font-size: 6px; font-weight: 600; color: #fff; white-space: nowrap; }
.a1-pill { position: absolute; border-radius: 999px; background: rgba(138, 67, 225, .10); }
.a1-pill::before { content: ""; position: absolute; left: 3px; top: 2.5px; width: 3px; height: 3px; border-radius: 50%; background: var(--ts-purple); }
.a1-pill i { position: absolute; left: 9px; right: 5px; top: 3px; height: 2px; border-radius: 1px; background: rgba(138, 67, 225, .45); }
.a1-line { position: absolute; border-radius: 3px; }
.a1-h1 { background: #221e1b; }
.a1-h1.is-grad { background: linear-gradient(90deg, var(--ts-orange), var(--ts-magenta) 55%, var(--ts-purple)); }
.a1-sub { border-radius: 2px; background: #e4ddd7; }
.a1-cta { position: absolute; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 7px; background: #111; font-size: 6px; font-weight: 600; color: #fff; white-space: nowrap; }
.a1-cta svg { width: 7px; height: 7px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.a1-ghost { position: absolute; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 7px; box-shadow: inset 0 0 0 1px #d9d2cc; font-size: 6px; font-weight: 600; color: #3d3833; white-space: nowrap; }
.a1-hero { position: absolute; overflow: hidden; border-radius: 8px; background: radial-gradient(circle at 80% 22%, rgba(255, 255, 255, .55) 0 10px, transparent 11px), linear-gradient(135deg, #ffe2d3, #f6d2fb 55%, #e3d6fc); }
.a1-hcard { position: absolute; left: 14px; top: 13px; width: 72px; height: 46px; border-radius: 6px; background: #fff; box-shadow: 0 8px 18px -10px rgba(138, 67, 225, .45); }
.a1-hcard .t { position: absolute; left: 7px; top: 7px; width: 28px; height: 3px; border-radius: 2px; background: #3d3833; }
.a1-hcard .bars { position: absolute; left: 7px; right: 7px; bottom: 7px; height: 22px; display: flex; align-items: flex-end; gap: 4px; }
.a1-hcard .bars i { flex: 1; border-radius: 1.5px; background: linear-gradient(180deg, var(--ts-magenta), var(--ts-purple)); opacity: .85; }
.a1-hchip { position: absolute; right: 10px; top: 42px; display: flex; align-items: center; gap: 4px; height: 15px; padding: 0 6px; border-radius: 999px; background: #fff; box-shadow: 0 6px 14px -8px rgba(17, 17, 17, .3); }
.a1-hchip svg { width: 8px; height: 8px; fill: none; stroke: #16a34a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.a1-hchip i { width: 18px; height: 3px; border-radius: 2px; background: #cfe9d8; }
.a1-card { position: absolute; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px #ece6e1; }
.a1-cico { position: absolute; left: 7px; top: 7px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(135deg, #fbeee6, #f1e6fb); }
.a1-cico svg { width: 9px; height: 9px; fill: none; stroke: var(--ts-purple); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.a1-ct { position: absolute; left: 7px; top: 28px; width: 48px; height: 3px; border-radius: 2px; background: #2a2522; }
.a1-cl { position: absolute; left: 7px; top: 34px; width: 72px; height: 2px; border-radius: 1px; background: #e4ddd7; }
.a1-cl.is-short { top: 38px; width: 50px; }
.a1-faq { position: absolute; display: flex; align-items: center; gap: 7px; padding: 0 6px; border-radius: 6px; background: #faf8f6; box-shadow: inset 0 0 0 1px #efe9e4; font-size: 6px; }
.a1-faq b { font-weight: 700; color: var(--ts-purple); }
.a1-faq i { width: 120px; height: 3px; border-radius: 2px; background: #ddd6d0; }
.a1-faq svg { margin-left: auto; width: 7px; height: 7px; fill: none; stroke: #8a8279; stroke-width: 2.4; stroke-linecap: round; }
/* Pins, selection boxes, callouts and report rows fade in and out all
   loop. Kept on their own layers for good, so none of them makes the
   text-heavy page or report repaint when it starts or stops animating. */
.a1-pin, .a1-hi, .a1-call, .a1-row { will-change: opacity, transform; }
/* the inspector's selection box on the element being examined */
.a1-hi { position: absolute; border-radius: 4px; background: rgba(138, 67, 225, .07); box-shadow: inset 0 0 0 1px rgba(138, 67, 225, .75); opacity: 0; transition: opacity .25s var(--eo); }
.a1-hi.on { opacity: 1; }
/* issue pins: drop with a spring and send out one ripple */
.a1-pins { position: absolute; inset: 0; }
.a1-pin {
  --c: #ef4444; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; display: grid; place-items: center;
  font-size: 8px; font-weight: 700; line-height: 1; color: #fff; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px var(--c);
  opacity: 0; transform: scale(.7); transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.a1-pin.is-warn { --c: #f59e0b; }
.a1-pin.on { opacity: 1; transform: none; }
.a1-pin::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; }
.a1-pin.on::after { animation: a1-ripple .9s var(--eo) .05s 1; }
@keyframes a1-ripple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
/* the magnifier: a glass window onto the page's hidden layer, zoomed in */
.a1-lens { position: absolute; left: 0; top: 0; z-index: 4; width: 80px; height: 80px; opacity: 0; transition: transform var(--sp-move-d) var(--sp-move), opacity .3s var(--eo); }
.a1.is-lens .a1-lens { opacity: 1; }
.a1-glass {
  position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: #120e1c;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px rgba(138, 67, 225, .9), 0 0 0 9px rgba(138, 67, 225, .10), 0 18px 34px -12px rgba(17, 17, 17, .55);
}
.a1-glass::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .20), transparent 46%), radial-gradient(circle at 50% 50%, transparent 58%, rgba(0, 0, 0, .35)); }
.a1-glass::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; z-index: 2; width: 36%; background: linear-gradient(90deg, rgba(190, 160, 255, 0), rgba(190, 160, 255, .20), rgba(190, 160, 255, 0)); transform: translateX(-130%) skewX(-14deg); }
.a1.is-lens .a1-glass::after { animation: a1-glint 1.8s var(--eio) infinite; }
@keyframes a1-glint { to { transform: translateX(330%) skewX(-14deg); } }
.a1-xray {
  position: absolute; left: 0; top: 0; width: 324px; height: 173px; transform-origin: 0 0; transition: transform var(--sp-move-d) var(--sp-move);
  background-color: #120e1c; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 12px 12px;
}
.a1-x { position: absolute; border: 1px dashed rgba(214, 190, 255, .72); border-radius: 3px; }
.a1-code { position: absolute; padding: 1px 2px; border-radius: 2px; background: #120e1c; font: 600 6.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #efe6ff; white-space: nowrap; }
.a1-code.is-tag { color: #c4a7ff; }
.a1-code.is-mut { color: #8d7fa8; }
.a1-code.is-warn { color: #fbbf24; }
.a1-code.is-bad { color: #f87171; }
.a1-handle { position: absolute; left: 67px; top: 64px; width: 26px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ts-magenta), var(--ts-purple)); transform: rotate(45deg); transform-origin: 0 50%; box-shadow: 0 4px 10px -4px rgba(138, 67, 225, .6); }
/* callouts pop beside their pin, then fly down into the report */
.a1-calls { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.a1-call {
  --c: #ef4444; position: absolute; display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 8px 0 6px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px #ebe5e0, 0 10px 20px -10px rgba(17, 17, 17, .35); font-size: 8.5px; font-weight: 600; color: #2a2522; white-space: nowrap;
  opacity: 0; transform: scale(.92); transform-origin: 0 50%; transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.a1-call.is-warn { --c: #f59e0b; }
.a1-call::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.a1-call.on { opacity: 1; transform: none; }
/* the report fills in as the scan runs, then resolves */
.a1-report { position: absolute; left: 18px; top: 214px; width: 324px; height: 112px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e9e3de, 0 18px 36px -24px rgba(17, 17, 17, .30); }
.a1-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 11px; border-bottom: 1px solid #f1ece8; }
.a1-head > b { font-size: 9.5px; font-weight: 600; }
.a1-status { display: grid; font-size: 8.5px; font-weight: 600; }
.a1-status > span { grid-area: 1 / 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; transition: opacity .3s var(--eo), transform .45s var(--eo); }
.a1-status .a { color: var(--ts-purple); }
.a1-status .b { color: #16a34a; opacity: 0; transform: translateY(4px); }
.a1-status .b svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a1.is-done .a1-status .a { opacity: 0; transform: translateY(-4px); }
.a1.is-done .a1-status .b { opacity: 1; transform: none; }
.a1-live { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px rgba(138, 67, 225, .18); }
.a1-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.a1-prog i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--eo); }
.a1-body { display: flex; gap: 10px; padding: 11px 11px 0; }
.a1-score { flex: none; display: flex; align-items: center; gap: 10px; width: 136px; }
.a1-ring { position: relative; flex: none; width: 44px; height: 44px; }
.a1-ring svg { display: block; width: 44px; height: 44px; transform: rotate(-90deg); }
.a1-ring circle { fill: none; stroke-width: 3.4; }
.a1-ring .t { stroke: #efeae6; }
.a1-ring .v { stroke: #f59e0b; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--eo); }
.a1.is-done .a1-ring .v { stroke-dashoffset: 42; }
.a1-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a1-stats { display: grid; gap: 7px; }
.a1-stats small { display: block; margin-bottom: 3px; font-size: 7.5px; color: #a39b94; }
/* AI probe: each assistant is asked (spinner), then answers red or green */
.a1-ais { display: flex; align-items: center; gap: 5px; }
.a1-ai { position: relative; width: 12px; height: 12px; display: grid; place-items: center; }
.a1-ai svg { display: block; width: 10px; height: 10px; fill: #cfc7c0; }      /* instant: the answer dot carries the motion */
.a1-ai::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--ts-purple); opacity: 0; transition: opacity .2s var(--eo); }
.a1-ai.is-asking::before { opacity: 1; animation: a1-spin .7s linear infinite; }
@keyframes a1-spin { to { transform: rotate(360deg); } }
.a1-ai.is-asking svg { fill: #8a8279; }
.a1-ai i { position: absolute; right: -3px; bottom: -3px; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff; opacity: 0; transform: scale(.6); transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop); }
.a1-ai.is-no i { background: #ef4444; opacity: 1; transform: none; }
.a1-ai.is-yes i { background: #22c55e; opacity: 1; transform: none; }
.a1-ai.is-yes svg { fill: #111; }
.a1-ratio { margin-left: 2px; font-style: normal; font-size: 8.5px; font-weight: 700; color: #111; opacity: 0; transform: translateX(-3px); transition: opacity .3s var(--eo) .2s, transform .45s var(--eo) .2s; }
.a1.is-done .a1-ratio { opacity: 1; transform: none; }
.a1-opp { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.a1-list { flex: 1; min-width: 0; display: grid; align-content: start; gap: 5px; }
.a1-row { display: flex; align-items: center; gap: 6px; font-size: 8.8px; line-height: 13px; color: #3d3833; white-space: nowrap; opacity: 0; transition: opacity .18s var(--eo); }
.a1-row.on { opacity: 1; }
.a1-num { flex: none; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; font-size: 7.5px; font-weight: 700; color: #fff; background: #ef4444; }
.a1-num.is-warn { background: #f59e0b; }

/* Step 02: competitors reverse-engineered into a two-lane roadmap */
.r2-lbl { position: absolute; left: 14px; top: 4px; font-size: 8.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a39b94; }
.r2-comps { position: absolute; left: 12px; right: 12px; top: 20px; height: 80px; display: flex; gap: 12px; }
.r2-comp {
  position: relative; flex: 1; min-width: 0; overflow: hidden; padding: 9px 10px 0; border-radius: 10px; background: #fff;
  box-shadow: 0 0 0 1px #e9e3de, 0 14px 28px -22px rgba(17, 17, 17, .30); opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--eo), transform .55s var(--eo);
}
.r2-comp + .r2-comp { transition-delay: 90ms; }
.r2.is-in .r2-comp { opacity: 1; transform: none; }
.r2-ch { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.r2-fav { flex: none; width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; font-size: 7.5px; font-weight: 700; color: #8a8279; background: #f2eeea; }
.r2-ch b { font-size: 9px; font-weight: 600; white-space: nowrap; }
.r2-m { display: flex; align-items: center; justify-content: space-between; height: 16px; border-top: 1px solid #f4f0ed; font-size: 8.5px; color: #8a8279; }
.r2-m b { font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
.r2-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(90deg, rgba(213, 17, 253, 0), rgba(213, 17, 253, .10), rgba(213, 17, 253, 0)); opacity: 0; transform: translateX(-100%); }
.r2.is-scan .r2-sheen { opacity: 1; animation: r2-sheen 1.1s var(--eio) infinite; }
@keyframes r2-sheen { to { transform: translateX(200%); } }
.r2-link { position: absolute; left: 0; right: 0; top: 104px; height: 26px; display: flex; align-items: center; justify-content: center; }
.r2-link::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, var(--ts-orange), var(--ts-purple)); transform: scaleY(0); transform-origin: top; transition: transform .5s var(--eo); }
.r2.is-linked .r2-link::before { transform: none; }
.r2-gaps {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 9px 0 7px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1px rgba(138, 67, 225, .28), 0 6px 14px -8px rgba(138, 67, 225, .5); font-size: 8.5px; font-weight: 600; color: var(--ts-purple);
  opacity: 0; transform: scale(.92); transition: opacity .2s var(--eo) .15s, transform var(--sp-pop-d) var(--sp-pop) .15s;
}
.r2-gaps svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.r2.is-linked .r2-gaps { opacity: 1; transform: none; }
.r2-map { position: absolute; left: 12px; right: 12px; top: 134px; bottom: 8px; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #e9e3de, 0 18px 36px -24px rgba(17, 17, 17, .30); }
.r2-mh { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 11px; border-bottom: 1px solid #f1ece8; }
.r2-mh > b { font-size: 9.5px; font-weight: 600; }
.r2-count { font-size: 8.5px; color: #8a8279; }
.r2-count b { font-weight: 700; color: #111; font-variant-numeric: tabular-nums; }
.r2-lanes { display: flex; gap: 8px; padding: 8px; }
.r2-lane { flex: 1; min-width: 0; display: grid; align-content: start; gap: 6px; }
.r2-lh { display: flex; align-items: center; gap: 5px; height: 16px; font-size: 8.5px; }
.r2-lh b { font-weight: 600; }
.r2-lh svg { width: 10px; height: 10px; }
.r2-lh svg.fill { fill: #111; }
.r2-lh svg.line { fill: none; stroke: var(--ts-purple); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r2-ok { margin-left: auto; width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; background: #16a34a; opacity: 0; transform: scale(.7); transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop); }
.r2-ok svg { width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.r2.is-done .r2-ok { opacity: 1; transform: none; }
.r2-slot { position: relative; height: 38px; border: 1px dashed #e4ddd7; border-radius: 7px; }
.r2-card {
  position: absolute; inset: -1px; display: flex; align-items: center; padding: 0 8px 0 13px; border-radius: 7px; background: #fff;
  box-shadow: 0 0 0 1px #ebe5e0, 0 8px 16px -12px rgba(17, 17, 17, .35); font-size: 8.8px; line-height: 1.3; color: #2a2522;
  opacity: 0; transform: translateY(-8px) scale(.97); transition: opacity .25s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.r2-card::before { content: ""; position: absolute; left: 5px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; }
.is-g .r2-card::before { background: linear-gradient(180deg, var(--ts-orange), #f7b594); }
.is-a .r2-card::before { background: linear-gradient(180deg, var(--ts-magenta), var(--ts-purple)); }
.r2-card.on { opacity: 1; transform: none; }

/* Step 04: "after" and "before" take turns, as in the original. The bars
   grow or shrink to the design's own "before" widths (its t-v-1fq5vlf
   variant), the pills ride their ends with new figures and the badge rolls
   between its two labels (visuals.js). */
[data-step="revenue"] .t-1n45hv5, [data-step="revenue"] .t-1olfjo5, [data-step="revenue"] .t-6on9a9 { transition: width .8s var(--ts-ease); }
/* A bar never gets narrower than its own label: on phones the short bars cut
   "Efficiency +200%" and "Wasted spend ↓" (the label sits at the bar's right
   end and the bar clips anything wider). It still grows and shrinks above that. */
[data-step="revenue"] .t-1n45hv5, [data-step="revenue"] .t-1olfjo5, [data-step="revenue"] .t-6on9a9 { min-width: max-content; }
[data-step="revenue"] .t-71s3hn { transition: transform .6s var(--ts-ease); }
[data-step="revenue"] .t-1s1z5f5 { transition: background-color .6s var(--ts-ease); }
/* one transform, as in the original: centred first, then turned to point down */
[data-step="revenue"].is-before .t-71s3hn { transform: translateX(-50%) rotate(92deg) !important; }
[data-step="revenue"].is-before .t-1s1z5f5 { background-color: rgb(246, 241, 252) !important; }


/* ==========================================================================
   Counters, comparison, services
   ========================================================================== */
[data-count] { font-variant-numeric: tabular-nums; }

[data-compare] [data-row] { transition: opacity .6s var(--ts-ease), filter .6s var(--ts-ease), translate .6s var(--ts-ease); }
[data-compare] [data-row] p { text-wrap: pretty; }          /* no lone word on a row's last line */
.js [data-compare]:not(.is-done) .t-1k55duy [data-row]:not(.is-on) { opacity: .95; }
.t-1k55duy [data-row].is-on { opacity: .5; filter: grayscale(1); }
.js [data-compare] .t-1b3yjy2 [data-row]:not(.is-on) { opacity: .35; translate: 12px 0; }

/* Launch Plan card: no lone word on the last line of a point when it wraps */
.t-7ih4hz .t-1iu7uva > p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Services cards: product panels (desktop, 1200px and up), drawn and run by
   TSFigures.serp / answer / launch. Below 1200px the cards are full of text,
   so the panels stay hidden (and are never built).
   -------------------------------------------------------------------------- */
/* motion tokens shared by the Services panels and the Step 01/02 scenes */
.ts-panel, .a1, .r2 {
  --eo: cubic-bezier(.23, 1, .32, 1);          /* arrivals: strong ease-out */
  --eio: cubic-bezier(.77, 0, .175, 1);        /* travel on screen: ease-in-out */
  /* springs sampled from Motion's spring model: visualDuration .55s, bounce .18 */
  --sp-move: linear(0, 0.036, 0.12, 0.228, 0.347, 0.464, 0.571, 0.666, 0.746, 0.813, 0.868, 0.91, 0.942, 0.966, 0.983, 0.995, 1.003, 1.007, 1.01, 1.011, 1.011, 1.01, 1.009, 1.007, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1);
  --sp-move-d: 957ms;
  /* visualDuration .4s, bounce .3 */
  --sp-pop: linear(0, 0.063, 0.21, 0.384, 0.558, 0.708, 0.83, 0.919, 0.981, 1.018, 1.038, 1.045, 1.044, 1.038, 1.03, 1.022, 1.015, 1.009, 1.005, 1.002, 1, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
  --sp-pop-d: 833ms;
  --grad: linear-gradient(90deg, var(--ts-orange), var(--ts-magenta) 55%, var(--ts-purple));
}
.ts-panel { display: none; }
@media (min-width: 1200px) {
  .ts-panel {
    display: block; position: absolute; top: 132px; right: 20px; z-index: 2; width: 272px; height: 288px;
    padding: 28px 10px 10px; border-radius: 18px; background: #f8f6f4; box-shadow: inset 0 0 0 1px #eae5e1;
    font-family: Inter, system-ui, sans-serif; color: #111; pointer-events: none; user-select: none;
    contain: layout paint style;
  }
}
.ts-panel-label { position: absolute; left: 14px; top: 10px; font-size: 9px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #a39b94; }
/* outer radius 18 = inner 8 + inset 10 */
.ts-win { position: relative; height: 100%; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #ebe5e0, 0 18px 36px -24px rgba(17, 17, 17, .32); }
/* a state applied with every transition off, so resets never animate */
.is-snap, .is-snap *, .is-snap *::before, .is-snap *::after { transition: none !important; }
.ts-fade { transition: opacity .3s var(--eo); }
.ts-panel.is-out .ts-fade { opacity: 0; transition-duration: .25s; }

/* SEO: yourbrand.com climbs from #9 to #1 once the fixes ship */
.p1-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; border-bottom: 1px solid #f1ece8; font-size: 10px; color: #111; }
.p1-bar .g { flex: none; width: 11px; height: 11px; fill: #111; }
.p1-bar .q { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p1-bar .s { flex: none; width: 11px; height: 11px; fill: none; stroke: #9a928b; stroke-width: 2.2; stroke-linecap: round; }
.p1-list { position: absolute; left: 0; right: 0; top: 42px; height: 160px; }
.p1-row {
  position: absolute; left: 8px; right: 8px; top: 0; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-radius: 8px;
  transition: transform var(--sp-move-d) var(--sp-move), box-shadow .45s var(--eo), background-color .45s var(--eo);
}
.p1-row.is-you { z-index: 1; }
.p1-row.is-lift { background: #fff; box-shadow: 0 0 0 1px #ece6e1, 0 16px 30px -14px rgba(17, 17, 17, .28); }
.p1-row.is-top { background: #fff; box-shadow: 0 0 0 1px rgba(138, 67, 225, .30), 0 12px 24px -16px rgba(138, 67, 225, .55); }
.p1-rank { flex: none; width: 12px; height: 12px; overflow: hidden; font-size: 10px; line-height: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; color: #b3aca5; transition: color .4s var(--eo); }
.p1-strip { display: block; transition: transform .8s var(--eio); }
.p1-strip span { display: block; height: 12px; }
.p1-row.is-top .p1-rank { color: var(--ts-purple); }
.p1-fav { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 8.5px; font-weight: 600; color: #8a8279; background: #f2eeea; }
.is-you .p1-fav { color: #fff; background: linear-gradient(135deg, var(--ts-orange), var(--ts-magenta) 55%, var(--ts-purple)); }
.p1-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.p1-txt b { font-size: 10px; line-height: 1; font-weight: 500; color: #5d564f; white-space: nowrap; }
.is-you .p1-txt b { font-weight: 600; color: #111; }
.p1-txt i { display: block; height: 4px; border-radius: 2px; background: #eee9e5; }
.is-you .p1-txt i { background: linear-gradient(90deg, rgba(255, 138, 91, .40), rgba(213, 17, 253, .30), rgba(138, 67, 225, .40)); }
.p1-delta {
  flex: none; display: inline-flex; align-items: center; gap: 2px; height: 16px; padding: 0 6px 0 4px; border-radius: 999px;
  font-size: 9px; font-weight: 600; font-variant-numeric: tabular-nums; color: #15803d; background: #ecfdf3; box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .28);
  opacity: 0; transform: scale(.9); transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.p1-delta svg { width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.p1-row.is-won .p1-delta { opacity: 1; transform: none; }
.p1-work { position: absolute; left: 11px; right: 11px; bottom: 11px; display: flex; align-items: center; gap: 5px; }
.p1-lbl { margin-right: auto; font-size: 8.5px; color: #a39b94; }
.p1-chip {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 4px; border-radius: 999px; font-size: 8.5px; font-weight: 500;
  color: #8a8279; background: #fff; box-shadow: inset 0 0 0 1px #e8e2dd; transition: color .3s var(--eo), box-shadow .3s var(--eo);
}
.p1-chip i { width: 11px; height: 11px; border-radius: 50%; display: grid; place-items: center; background: #efeae6; transition: background-color .3s var(--eo); }
.p1-chip svg { width: 7px; height: 7px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.6); transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop); }
.p1-chip.on { color: #111; box-shadow: inset 0 0 0 1px rgba(138, 67, 225, .32); }
.p1-chip.on i { background: var(--ts-purple); }
.p1-chip.on svg { opacity: 1; transform: none; }

/* AEO: an AI assistant thinks, then names YourBrand and cites the site */
.p2-head { display: flex; align-items: center; height: 30px; padding: 0 11px; border-bottom: 1px solid #f1ece8; }
.p2-plat { position: relative; display: block; width: 100%; height: 14px; overflow: hidden; }
.p2-pi {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; line-height: 14px; color: #111;
  opacity: 0; transform: translateY(100%); transition: transform .5s var(--eio), opacity .35s var(--eo);
}
.p2-pi svg { width: 11px; height: 11px; fill: #111; }
.p2-pi.is-cur { opacity: 1; transform: none; }
.p2-pi.is-prev { opacity: 0; transform: translateY(-100%); }
.p2-chat { position: absolute; left: 0; right: 0; top: 31px; bottom: 36px; }
.p2-q {
  position: absolute; top: 12px; right: 11px; max-width: 170px; padding: 7px 10px; border-radius: 12px 12px 4px 12px; background: #f3efeb;
  font-size: 9.5px; line-height: 1.4; color: #3d3833; opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .3s var(--eo), transform .5s var(--eo);
}
.is-asked .p2-q { opacity: 1; transform: none; }
.p2-a { position: absolute; left: 11px; right: 11px; top: 64px; display: flex; gap: 8px; }
.p2-av { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: #f3efeb; box-shadow: inset 0 0 0 1px #ebe5e0; }
.p2-am { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .35s var(--eo); }
.p2-am.is-cur { opacity: 1; }
.p2-am svg { width: 11px; height: 11px; fill: #111; }
.p2-body { position: relative; flex: 1; min-width: 0; padding-top: 3px; }
.p2-think { position: absolute; left: 0; right: 0; top: 5px; display: grid; gap: 6px; opacity: 0; transition: opacity .2s var(--eo); }
.p2-think i { position: relative; display: block; height: 6px; border-radius: 3px; overflow: hidden; background: #efeae6; }
.p2-think i:nth-child(1) { width: 92%; }
.p2-think i:nth-child(2) { width: 74%; }
.p2-think i:nth-child(3) { width: 56%; }
.p2-think i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0)); transform: translateX(-100%); }
.is-thinking .p2-think { opacity: 1; }
.is-thinking .p2-think i::after { animation: p2-shim 1.1s linear infinite; }
@keyframes p2-shim { to { transform: translateX(100%); } }
.p2-text { margin: 0; font-size: 10px; line-height: 1.55; color: #5d564f; }
.p2-text span { display: inline-block; opacity: 0; transform: translateY(4px); transition: opacity .25s var(--eo), transform .45s var(--eo); }
.is-said .p2-text span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 32ms); }
.p2-text b { position: relative; font-weight: 600; color: #111; }
.p2-text b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--eo); }
.is-marked .p2-text b::after { transform: none; }
.p2-cite {
  display: inline-flex; align-items: center; gap: 4px; height: 18px; margin-top: 9px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 8.5px; font-weight: 600;
  color: var(--ts-purple); background: rgba(138, 67, 225, .08); box-shadow: inset 0 0 0 1px rgba(138, 67, 225, .20);
  opacity: 0; transform: translateY(4px) scale(.94); transform-origin: 0 50%; transition: opacity .2s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.p2-cite svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.is-cited .p2-cite { opacity: 1; transform: none; }
.p2-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #f1ece8; }
.p2-lbl { font-size: 8.5px; color: #a39b94; }
.p2-marks { position: relative; display: flex; gap: 4px; }
.p2-fm { position: relative; z-index: 1; width: 18px; height: 18px; display: grid; place-items: center; }
.p2-fm svg { width: 10px; height: 10px; fill: #bdb5ae; transition: fill .35s var(--eo); }
.p2-fm.is-cur svg { fill: #111; }
.p2-knob { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #e6dfd9, 0 4px 10px -6px rgba(17, 17, 17, .35); transition: transform var(--sp-move-d) var(--sp-move); }

/* Launch Plan: the site builds, scores top marks, goes live, then SEO/AEO/GEO */
.p3-chrome { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 9px; background: #faf8f6; border-bottom: 1px solid #f0ebe7; }
.p3-dots { display: flex; gap: 4px; }
.p3-dots i { width: 6px; height: 6px; border-radius: 50%; background: #e3ddd8; }
.p3-url { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 16px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #ebe5e0; font-size: 8.5px; color: #5d564f; }
.p3-url svg { width: 8px; height: 8px; fill: none; stroke: #9a928b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.p3-status { display: grid; min-width: 44px; font-size: 8.5px; font-weight: 600; }
.p3-status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; white-space: nowrap; transition: opacity .3s var(--eo), transform .45s var(--eo); }
.p3-status .a { color: #a39b94; }
.p3-status .b { color: #111; opacity: 0; transform: translateY(4px); }
.is-live .p3-status .a { opacity: 0; transform: translateY(-4px); }
.is-live .p3-status .b { opacity: 1; transform: none; }
.p3-dot { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.p3-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #22c55e; opacity: 0; }
.is-live .p3-dot::after { animation: p3-ping 1s var(--eo) .15s 1; }
@keyframes p3-ping { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
.p3-page { position: absolute; left: 0; right: 0; top: 27px; height: 124px; }
.p3-b { position: absolute; border-radius: 3px; background: #eee9e5; opacity: 0; transform: translateY(6px) scale(.97); transition: opacity .3s var(--eo), transform .5s var(--eo); }
.is-built .p3-b { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms); }
.p3-logo { border-radius: 50%; background: linear-gradient(135deg, var(--ts-orange), var(--ts-magenta) 55%, var(--ts-purple)); }
.p3-name { background: #2a2522; }
.p3-link { background: #ddd6d0; }
.p3-btn { border-radius: 5px; background: var(--grad); }
.p3-h1 { background: #221e1b; }
.p3-h1.is-grad { background: var(--grad); }
.p3-sub { background: #e7e1dc; }
.p3-cta { border-radius: 6px; background: #111; }
.p3-img { border-radius: 7px; background: radial-gradient(circle at 72% 36%, rgba(255, 255, 255, .75) 0 9px, transparent 10px), linear-gradient(135deg, #ffe2d3, #f6d2fb 55%, #e3d6fc); }
.p3-card {
  border-radius: 6px; background-color: #fff; box-shadow: inset 0 0 0 1px #ece6e1;
  background-image: radial-gradient(circle at 10px 9px, #dcc9f8 3px, transparent 3.5px), linear-gradient(#e6e0db, #e6e0db), linear-gradient(#efeae6, #efeae6);
  background-repeat: no-repeat; background-size: auto, 40px 3px, 28px 3px; background-position: 0 0, 7px 15px, 7px 20px;
}
.p3-scores { position: absolute; left: 11px; right: 11px; top: 160px; display: flex; gap: 16px; }
.p3-score { display: inline-flex; align-items: center; gap: 7px; font-size: 8.5px; color: #8a8279; }
.p3-ring { position: relative; width: 30px; height: 30px; }
.p3-ring svg { display: block; width: 30px; height: 30px; transform: rotate(-90deg); }
.p3-ring circle { fill: none; stroke-width: 3; }
.p3-ring .t { stroke: #efeae6; }
.p3-ring .v { stroke: #22c55e; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.1s var(--eo); }
.is-scored .p3-ring .v { stroke-dashoffset: calc(100 - var(--v)); }
.p3-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #111; font-variant-numeric: tabular-nums; }
.p3-next { position: absolute; left: 11px; right: 11px; bottom: 11px; display: flex; align-items: center; gap: 6px; }
.p3-lbl { font-size: 8.5px; color: #a39b94; }
.p3-line { position: relative; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: #eee9e5; }
.p3-line::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--eo); }
.is-next .p3-line::after { transform: none; }
.p3-svc {
  display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; font-size: 8.5px; font-weight: 600;
  color: #a39b94; background: #fff; box-shadow: inset 0 0 0 1px #e8e2dd; opacity: .7; transform: scale(.94);
  transition: color .3s var(--eo), box-shadow .3s var(--eo), opacity .3s var(--eo), transform var(--sp-pop-d) var(--sp-pop);
}
.p3-svc.on { color: var(--ts-purple); box-shadow: inset 0 0 0 1px rgba(138, 67, 225, .35), 0 6px 14px -8px rgba(138, 67, 225, .55); opacity: 1; transform: none; }

/* How It Works progress line (desktop): fills as the steps scroll past. */
.ts-steps-rail { position: absolute; z-index: 3; width: 2px; pointer-events: none; }
.ts-steps-rail::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: rgba(17, 17, 17, .08); }
.ts-steps-rail i { position: absolute; inset: 0; border-radius: 2px; background: linear-gradient(180deg, #ff8a5b, #d511fd 55%, #8a43e1); transform-origin: top; transform: scaleY(var(--p, 0)); }
.ts-steps-rail b {
  position: absolute; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #f4f2f1; box-shadow: inset 0 0 0 2px rgba(17, 17, 17, .14); transition: box-shadow .4s var(--ts-ease), background-color .4s var(--ts-ease), scale .4s var(--ts-ease);
}
.ts-steps-rail b.on { background: #fff; box-shadow: inset 0 0 0 3px var(--ts-magenta), 0 0 0 4px rgba(213, 17, 253, .12); scale: 1.1; }
@media (max-width: 1199.98px) { .ts-steps-rail { display: none; } }

/* ==========================================================================
   FAQ, form, testimonials, other pages
   ========================================================================== */
.ts-faq { width: 100%; max-width: 1050px; margin: 0 auto; display: flex; flex-direction: column; }
.ts-faq-item { border-bottom: 1px solid rgba(17, 17, 17, .08); }
.ts-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 40px 0 40px 4px; cursor: pointer; }
.ts-faq-item summary::-webkit-details-marker { display: none; }
.ts-faq-q { margin: 0; font: 600 20px/30px "Inter Display", Inter, system-ui, sans-serif; color: #1e1e1e; letter-spacing: -.01em; }
.ts-faq-icon { position: relative; flex: none; width: 24px; height: 24px; }
.ts-faq-icon::before, .ts-faq-icon::after { content: ""; position: absolute; left: 3px; right: 3px; top: 11px; height: 2px; border-radius: 10px; background: #111; transition: rotate .45s var(--ts-ease), opacity .3s; }
.ts-faq-icon::after { rotate: 90deg; }
/* Open state: .is-open, set by site.js the moment you click, so the icon, the
   spacing and the answer's height move together; [open] covers no-JS. */
html:not(.js) .ts-faq-item[open] .ts-faq-icon::after, .ts-faq-item.is-open .ts-faq-icon::after { rotate: 0deg; opacity: 0; }
.ts-faq-a { overflow: hidden; }
.ts-faq-item summary { transition: padding .45s var(--ts-ease); }
html:not(.js) .ts-faq-item[open] summary, .ts-faq-item.is-open summary { padding-bottom: 20px; }
.ts-faq-a p { margin: 0; padding: 0 44px 40px 4px; font: 500 17px/23.8px "Inter Display", Inter, system-ui, sans-serif; color: #4c4c4c; }
@media (max-width: 809.98px) {
  .ts-faq-item summary { padding: 24px 0 24px 2px; }
  .ts-faq-q { font-size: 17px; line-height: 25px; }
  html:not(.js) .ts-faq-item[open] summary, .ts-faq-item.is-open summary { padding-bottom: 12px; }
  .ts-faq-a p { padding: 0 8px 24px 2px; font-size: 15px; line-height: 22px; }
}

.ts-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.ts-form-status { grid-column: 1 / -1; margin: 6px 0 0; font: 500 14px/1.4 Inter, system-ui, sans-serif; color: #5d564f; }
.ts-form-status:empty { display: none; }
.ts-form-status.is-ok { color: #15803d; }
.ts-form-status.is-err { color: #b42318; }
form[data-form].is-sending button[type="submit"] { opacity: .7; pointer-events: none; }
form[data-form] [aria-invalid="true"] { box-shadow: 0 0 0 1.5px #d92d20 !important; }

.ts-mono {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: inherit;
  background: var(--ts-grad); color: #fff; font: 600 16px/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
}

.ts-doc { position: relative; z-index: 1; padding: 150px 20px 80px; }
.ts-doc-inner { max-width: 760px; margin: 0 auto; font: 400 16.5px/1.7 Inter, system-ui, sans-serif; color: #3b3632; }
.ts-doc-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ts-purple); }
.ts-doc h1 { margin: 0 0 8px; font: 600 clamp(34px, 5vw, 52px)/1.1 "Inter Display", Inter, system-ui, sans-serif; letter-spacing: -.03em; color: var(--ts-ink); }
.ts-doc h2 { margin: 42px 0 10px; font: 600 22px/1.3 "Inter Display", Inter, system-ui, sans-serif; letter-spacing: -.01em; color: var(--ts-ink); }
.ts-doc-meta { margin: 0 0 32px; font-size: 14px; color: #8a8279; }
.ts-doc ul { padding-left: 20px; }
.ts-doc li { margin: 8px 0; }
.ts-doc a { color: var(--ts-purple); }
.ts-404 { min-height: 70vh; display: flex; align-items: center; }
.ts-404-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }
.ts-btn { display: inline-block; padding: 14px 22px; border-radius: 999px; background: var(--ts-ink); color: #fff !important; text-decoration: none; font-weight: 500; }
.ts-link { color: var(--ts-ink) !important; font-weight: 500; }

/* ==========================================================================
   Cursor
   ========================================================================== */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.ts-cursor-dot, .ts-cursor-ring { position: fixed; top: 0; left: 0; z-index: 2147483000; border-radius: 50%; pointer-events: none; will-change: transform; }
.ts-cursor-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #8a43e1; transition: background-color 250ms var(--ts-ease); }
.ts-cursor-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid rgba(138, 67, 225, .55); transition-property: width, height, margin, background-color, border-color, opacity; transition-duration: 250ms; transition-timing-function: var(--ts-ease); }
html.cursor-hover .ts-cursor-ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-color: rgba(138, 67, 225, .08); }
html.cursor-down .ts-cursor-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
html.cursor-invert .ts-cursor-dot { background: #f4f2f1; }
html.cursor-invert .ts-cursor-ring { border-color: rgba(244, 242, 241, .7); }
html.cursor-invert.cursor-hover .ts-cursor-ring { background-color: rgba(244, 242, 241, .12); }
html.cursor-gone .ts-cursor-dot, html.cursor-gone .ts-cursor-ring { opacity: 0; }

/* ==========================================================================
   Sections added to the design: "Were you in the answer?" and the phone bar
   for the free check
   ========================================================================== */
.ts-tag {
  display: inline-flex; align-items: center; margin: 0 0 18px; padding: 6px 13px; border-radius: 999px;
  background: #fff; box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 6px 14px -10px rgba(17, 17, 17, .35);
  font: 500 13px/1.2 Inter, system-ui, sans-serif; color: var(--ts-ink);
}
.ts-home-h2 {
  margin: 0; font: 600 clamp(32px, 4vw, 48px)/1.08 "Inter Display", Inter, system-ui, sans-serif;
  letter-spacing: -.035em; color: var(--ts-ink); text-wrap: balance;
}
.ts-home-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 8px; background: var(--ts-ink); color: #fff; text-decoration: none; white-space: nowrap;
  font: 600 15.5px/1 Inter, system-ui, sans-serif; letter-spacing: -.01em;
  transition: background-color .2s var(--ts-ease), scale .15s var(--ts-ease);
}
.ts-home-b:hover { background: #2a2622; }
.ts-home-b:active { scale: .98; }
.ts-home-b svg { width: 18px; height: 18px; }
.ts-home-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  font: 500 15px/1.2 Inter, system-ui, sans-serif; color: var(--ts-ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size .45s var(--ts-ease), color .3s;
}
.ts-home-link:hover { background-size: 100% 1px; color: var(--ts-purple); }

/* --- "Were you in the answer?" ------------------------------------------- */
.ts-ask { position: relative; width: 100%; padding: 110px 0 120px; content-visibility: auto; contain-intrinsic-size: auto 760px; }
.ts-ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 64px; align-items: center; }
.ts-ask-sub { max-width: 52ch; margin: 20px 0 0; font: 400 17px/1.6 Inter, system-ui, sans-serif; color: #57514c; text-wrap: pretty; }
.ts-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 30px; }
.ts-ask-label { margin: 34px 0 12px; font: 600 12px/1 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-muted); }
.ts-ask-engines { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ts-ask-engines li {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .07);
  font: 500 13.5px/1 Inter, system-ui, sans-serif; color: var(--ts-ink);
}
.ts-ask-engines svg { width: 15px; height: 15px; fill: var(--ts-ink); }

.ts-ask-chat {
  position: relative; border-radius: 22px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, .06), 0 40px 80px -48px rgba(88, 40, 140, .55), 0 12px 24px -18px rgba(17, 17, 17, .25);
  font: 400 15px/1.5 Inter, system-ui, sans-serif; color: var(--ts-ink);
}
.ts-ask-chat::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 70%; height: 90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(213, 17, 253, .10), transparent); pointer-events: none;
}
.ts-ask-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #efebe8; }
.ts-ask-app { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; }
.ts-ask-app svg { width: 18px; height: 18px; fill: var(--ts-ink); }
.ts-ask-mode { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: #f4f1ff; color: #5b3fd0; font: 500 12.5px/1 Inter, system-ui, sans-serif; }
.ts-ask-mode svg { width: 14px; height: 14px; }
.ts-ask-body { position: relative; padding: 22px 22px 18px; }
.ts-ask-q {
  width: fit-content; max-width: 82%; margin: 0 0 18px auto; padding: 11px 15px; border-radius: 18px 18px 4px 18px;
  background: #f2efec; font-size: 14.5px;
}
.ts-ask-a { position: relative; min-height: 200px; }
.ts-ask-dots { position: absolute; top: 4px; left: 0; display: inline-flex; gap: 5px; opacity: 0; }
.ts-ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: #c9c2bc; }
.ts-ask-intro { margin: 0 0 12px; font-size: 14.5px; color: #3b3632; }
.ts-ask-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ts-ask-list li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: #faf8f6; box-shadow: inset 0 0 0 1px #f0ebe7; font-size: 14px; color: #3b3632;
}
.ts-ask-list b { font-weight: 600; color: var(--ts-ink); }
.ts-ask-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ts-ink); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; }
.ts-ask-list sup { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: #efeaff; color: #5b3fd0; font: 600 11px/1 Inter, system-ui, sans-serif; }
.ts-ask-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12.5px; color: var(--ts-muted); }
.ts-ask-src i { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 5px; background: #efeaff; color: #5b3fd0; font: 600 10px/1 Inter, system-ui, sans-serif; }
.ts-ask-src i:first-child { margin-left: 0; }
.ts-ask-miss {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 14px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(135deg, #fff1ea, #fbe9fb); box-shadow: inset 0 0 0 1px #f7d3c3; font-size: 14px; color: #3b3632;
}
.ts-ask-miss svg { width: 20px; height: 20px; flex: none; color: #e0561f; }
.ts-ask-miss > span:not(.ts-ask-why) { flex: 1; min-width: 0; }
.ts-ask-miss b { margin-right: 6px; color: var(--ts-ink); }
.ts-ask-why { flex: none; padding: 7px 11px; border-radius: 8px; background: var(--ts-ink); color: #fff; font: 600 12.5px/1 Inter, system-ui, sans-serif; }

/* The answer plays once, when the card comes into view (site.js adds .is-live). */
.js .ts-ask-chat:not(.is-live) .ts-ask-q, .js .ts-ask-chat:not(.is-live) .ts-ask-intro,
.js .ts-ask-chat:not(.is-live) .ts-ask-list li, .js .ts-ask-chat:not(.is-live) .ts-ask-src,
.js .ts-ask-chat:not(.is-live) .ts-ask-miss { opacity: 0; }
.ts-ask-chat.is-live .ts-ask-q { animation: ts-ask-in .5s var(--ts-ease) both; }
.ts-ask-chat.is-live .ts-ask-dots { animation: ts-ask-dots 1.1s ease .5s both; }
.ts-ask-chat.is-live .ts-ask-dots i { animation: ts-ask-blink .9s ease-in-out infinite; }
.ts-ask-chat.is-live .ts-ask-dots i:nth-child(2) { animation-delay: .15s; }
.ts-ask-chat.is-live .ts-ask-dots i:nth-child(3) { animation-delay: .3s; }
.ts-ask-chat.is-live .ts-ask-intro { animation: ts-ask-in .5s var(--ts-ease) 1.6s both; }
.ts-ask-chat.is-live .ts-ask-list li { animation: ts-ask-in .55s var(--ts-ease) calc(1.9s + var(--i) * .28s) both; }
.ts-ask-chat.is-live .ts-ask-src { animation: ts-ask-in .5s var(--ts-ease) 2.9s both; }
.ts-ask-chat.is-live .ts-ask-miss { animation: ts-ask-miss .8s var(--ts-ease) 3.5s both; }
@keyframes ts-ask-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes ts-ask-dots { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ts-ask-blink { 0%, 100% { translate: 0 0; opacity: .5; } 50% { translate: 0 -3px; opacity: 1; } }
@keyframes ts-ask-miss { 0% { opacity: 0; translate: 0 14px; scale: .97; } 60% { opacity: 1; translate: 0 -2px; scale: 1.01; } 100% { opacity: 1; translate: 0 0; scale: 1; } }

@media (max-width: 1199.98px) {
  .ts-ask-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .ts-ask-copy { max-width: 640px; }
  .ts-ask-chat { max-width: 640px; }
}
@media (max-width: 809.98px) {
  .ts-ask { padding: 72px 0 80px; contain-intrinsic-size: auto 1150px; }
  .ts-ask-sub { font-size: 16px; }
  .ts-ask-body { padding: 18px 16px 14px; }
  .ts-ask-list li { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 9px 10px; font-size: 13.5px; }
  .ts-ask-miss { flex-wrap: wrap; margin: 0 10px 10px; }
}

/* --- Phone bar for the free check (chrome.js adds it) ------------------------ */
.ts-cta-bar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; align-items: center; gap: 10px;
  padding: 10px 10px 10px 16px; border-radius: 16px; background: rgba(17, 17, 17, .94); color: #fff;
  box-shadow: 0 18px 40px -16px rgba(17, 17, 17, .6); translate: 0 140%;
  transition: translate .45s var(--ts-ease);
  font: 500 14px/1.3 Inter, system-ui, sans-serif;
}
.ts-cta-bar.is-in { translate: 0 0; }
.ts-cta-bar p { flex: 1; min-width: 0; margin: 0; }
.ts-cta-bar p small { display: block; color: #bdb5ae; font-size: 12.5px; font-weight: 400; }
.ts-cta-bar a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px;
  background: #fff; color: var(--ts-ink); text-decoration: none; font-weight: 600;
}
.ts-cta-bar button {
  flex: none; display: grid; place-items: center; width: 36px; height: 44px; margin-left: -4px; padding: 0;
  border: 0; background: none; color: #bdb5ae; cursor: pointer; font-size: 22px; line-height: 1;
}
.ts-cta-bar button:focus-visible, .ts-cta-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 809.98px) {
  .ts-cta-bar { display: flex; }
  html.has-cta-bar .ts-wa { translate: 0 -76px; }
  .ts-wa { transition: translate .45s var(--ts-ease), transform .2s, box-shadow .2s, opacity .2s; }
}
html.menu-open .ts-cta-bar { translate: 0 140%; }

/* ==========================================================================
   Reduced motion: keep every state readable, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .ts-ask-chat * { animation: none !important; opacity: 1 !important; }
  .js .ts-ask-dots { display: none; }
  .ts-rot-item { transition: none !important; }
  .ts-cta-bar { transition: none !important; }
  .js [data-enter], .js .ts-sub-cta { animation: none !important; }
  .js [data-reveal], .js .sv-grid .sv-card { transition: none !important; opacity: 1 !important; transform: none !important; scale: 1 !important; translate: 0 0 !important; }
  .lp, [data-ticker] ul, .tv-chip, .tv-core-ring, .tv-core-glow, .tv-pulse, .tv-cycle span,
  .s2-step .spin, .s2-tx::after, .s4-dot::after, [data-step] * { animation: none !important; }
  .tv-chip { offset-distance: var(--park); opacity: 1; }
  .tv-cycle span:first-child { opacity: 1; }
  .tv-pulse { stroke-dasharray: none; opacity: .4; }
  .ts-lit, .ts-fx { transition: none !important; }
  .s1-strip, .s4-row, .s2 *, .s3 *, [data-slideshow] ul { transition: none !important; }
  .ts-panel *, .ts-panel *::before, .ts-panel *::after, .a1 *, .a1 *::before, .a1 *::after,
  .r2 *, .r2 *::before, .r2 *::after { transition: none !important; animation: none !important; }
  .js [data-compare] [data-row] { opacity: 1 !important; translate: 0 0 !important; }
}