/* ============================================================
   SITE — Stacksmith marketing website
   Shared chrome, the scroll-driven motion system, the Services
   "See it run" demo animation, and responsive rules.
   Tokens live in tokens.css; component states in components.css.
   ============================================================ */

/* ---------- Layout helpers -------------------------------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.svc-grid { display: grid; grid-template-columns: 300px 1fr; }
.split2 { display: grid; grid-template-columns: 1fr 1fr; }
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; }

/* ---------- Header ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .bar { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.site-nav { display: flex; align-items: center; gap: 30px; }
.site-nav a { font-size: 15px; color: var(--ink-700); font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.ss-logo__mark svg { display: block; }

/* ---------- Motion system (scroll-position-driven) ---------
   CSS Scroll-linked Animations; browsers without support simply
   show everything. Keyframes copied verbatim from the handoff. */
@keyframes ssRise  { from { opacity: 0;   transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes ssPop   { from { opacity: .35; transform: scale(.84); }       to { opacity: 1; transform: scale(1); } }
@keyframes ssGrowX { from { transform: scaleX(0); }                      to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  .ss-reveal  { opacity: 0; animation: ssRise linear both; animation-timeline: view(); animation-range: entry 2% cover 22%; }
  .ss-seq     { animation: ssPop linear both; animation-timeline: view(); animation-range: cover 10% cover 35%; }
  .ss-seqline { transform-origin: left center; animation: ssGrowX linear both; animation-timeline: view(); animation-range: cover 12% cover 38%; }
}

/* ---------- "See it run" demos (Services) ------------------ */
.ssdemo-toggle .chev { transition: transform .42s cubic-bezier(.22,1,.36,1); }
.ssdemo-toggle.is-open .chev { transform: rotate(90deg); }
.ssdemo-toggle:hover { border-color: var(--line-strong) !important; }
.ssdemo-toggle:hover .chev { background: var(--forest-tint-2) !important; }

.ssdemo-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
.ssdemo-panel.is-open { max-height: 3000px; opacity: 1; }

/* flow steps ignite in sequence on open (per-step --d delay) */
.ssflow .ss-fill { height: 0; transition: height 1.9s cubic-bezier(.42,0,.25,1) .12s; }
.ssdemo-panel.is-open .ssflow .ss-fill { height: 100%; }

.ssflow .ss-step { opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1) var(--d,0ms), transform .6s cubic-bezier(.22,1,.36,1) var(--d,0ms); }
.ssdemo-panel.is-open .ssflow .ss-step { opacity: 1; transform: none; }

.ssflow .ss-dot { background: var(--paper-sunken); color: var(--ink-400); border: 1px solid var(--line);
  transition: background .55s cubic-bezier(.22,1,.36,1) var(--d,0ms), color .55s cubic-bezier(.22,1,.36,1) var(--d,0ms), border-color .55s var(--d,0ms), box-shadow .55s var(--d,0ms); }
.ssdemo-panel.is-open .ssflow .ss-step .ss-dot { background: var(--forest); color: var(--on-ink); border-color: transparent; }
.ssdemo-panel.is-open .ssflow .ss-step.is-final .ss-dot { background: var(--forest-700); }

@keyframes ssDotPulse { 0% { box-shadow: 0 0 0 0 rgba(44,110,75,.30); } 70% { box-shadow: 0 0 0 11px rgba(44,110,75,0); } 100% { box-shadow: 0 0 0 0 rgba(44,110,75,0); } }
.ssdemo-panel.is-open .ssflow .ss-step .ss-dot { animation: ssDotPulse 2.2s ease-out var(--d,0ms); }

/* ---------- Reduced motion --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ss-reveal, .ss-seq, .ss-seqline { opacity: 1 !important; transform: none !important; animation: none !important; }
  .ss-msg, .ss-greview, .ss-greview__stars span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ss-hrail__ic, .ss-hrail__conn i::after, .ss-appview { transition: none !important; }
  .ss-live__dot, .ss-badge__dot { animation: none !important; }
  .ss-typing { display: none !important; }
  .ss-float { animation: none !important; }
  .ss-ticker__track { animation: none !important; }
  .ss-ticker__viewport { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .ss-vig *, .ss-vig__pill, .ss-feed__line, .ss-feed__dot, .ss-net, .ss-net rect, .ss-net line,
  .ss-vig__calldot, .ss-vig__wave i { animation: none !important; }
  .ss-showpanel.is-active, .ssx [data-i], .ssx-browser[data-i],
  .ssx-calldot, .ssx-wave i, .ssx-rail__line i { animation: none !important; }
  .ssx-wave i { transform: scaleY(.55); }
  .ssx-rail__line i { display: none; }
  .ssx-fsrc, .ssx-fhub, .ssx-site__hero, .ssx-site__btn, .ssx-site__card,
  .ssx-review__stars .st, .ssx-rate, .ssx-meter__bar i, .ssx-meter__end,
  .ssx--bot .ssx-cb, .ssx-widget__dot { animation: none !important; }
  .ssx-shine::after, .ssx-cursor, .ssx-toast, .ssx-burst, .ssx-dots,
  .ssx-fhub::before, .ssx-callui__av i, .ssx-cir__line i { display: none !important; }
  .ssx-meter__bar i { transform: none; }
  .ssx-funnel__lines path { animation: none !important; stroke-dashoffset: 0; }
  .ssx-cir__ic::after, .ssx-meter__bar::after { animation: none !important; }
  .ssx-meter__bar::after { opacity: 1; }
  .ssx-tagx, .ssx-cloudmore { animation: none !important; translate: none !important; }
  .cb-dots { display: none !important; }
  .ss-vig__wave i { transform: scaleY(.55); }
  .ssflow .ss-step { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ssflow .ss-fill { transition: none !important; }
  .ssdemo-panel { transition: opacity .2s ease !important; }
  .ssdemo-panel.is-open .ssflow .ss-step .ss-dot { animation: none !important; }
}

/* ---------- Hero: live automation demo ---------------------
   Left: copy. Right: a phone handling an enquiry end-to-end on
   a ~11s loop, with a flow rail lighting up in sync beneath it.
   Timings live in data-t attributes (ms); js/main.js runs them. */
.ss-hero { padding: 72px 0 84px; overflow: hidden; }
.ss-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.ss-hero__h1 {
  font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold); margin: 20px 0 0; color: var(--ink); text-wrap: balance;
}
.ss-hero__h1 em { font-style: normal; color: var(--forest); }
.ss-hero__sub { font-size: 18px; line-height: 1.55; color: var(--ink-500); max-width: 470px; margin: 22px 0 30px; }
.ss-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

.ss-hero__stage { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ss-live {
  /* bare broadcast caption — deliberately no pill chrome (user dislikes pills) */
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--forest-900);
}
.ss-live__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--forest); animation: ssPulse 2.2s infinite; }
@keyframes ssPulse {
  0% { box-shadow: 0 0 0 0 rgba(44,110,75,.35); }
  70% { box-shadow: 0 0 0 8px rgba(44,110,75,0); }
  100% { box-shadow: 0 0 0 0 rgba(44,110,75,0); }
}

/* — ambient stage visuals: dot grid, forest glow, floating chips — */
.ss-hero { position: relative; }
.ss-hero::before { /* faint dot grid fading in from the right */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(26,25,21,.07) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(105deg, transparent 46%, #000 78%);
  mask-image: linear-gradient(105deg, transparent 46%, #000 78%);
}
.ss-hero__stage { position: relative; }
.ss-hero__stage::before { /* forest glow behind the phone */
  content: ""; position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%);
  width: 540px; height: 540px; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(44,110,75,.16), rgba(44,110,75,.05) 55%, transparent 72%);
}
.ss-float {
  position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 9px 13px;
  font-size: 12px; font-weight: var(--weight-semibold); color: var(--ink);
  animation: ssFloat 5.5s ease-in-out infinite alternate;
}
.ss-float__stars { color: #FBBC04; font-size: 12px; letter-spacing: 1px; }
.ss-float--a { top: 108px; right: 4px; }
.ss-float--b { bottom: 128px; left: 2px; color: var(--forest-900); animation-delay: 1.6s; animation-duration: 6.5s; }
.ss-float--b svg { color: var(--forest); }
@keyframes ssFloat { from { transform: translateY(0); } to { transform: translateY(-10px); } }

/* — the phone: a brand-new iPhone in ink titanium — */
.ss-phone {
  width: 300px; border-radius: 54px; padding: 11px; position: relative; z-index: 2;
  background: linear-gradient(155deg, #46443c 0%, #23211c 30%, #14130f 70%, #2e2c26 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,.14),
    inset 0 0 0 4px rgba(0,0,0,.55),
    0 44px 90px -28px rgba(26,25,21,.45),
    0 10px 26px -8px rgba(26,25,21,.28);
}
.ss-phone__sidebtn { position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(90deg,#3c3a33,#23211c); }
.ss-phone__sidebtn--vol1 { left: -2.5px; top: 120px; height: 30px; }
.ss-phone__sidebtn--vol2 { left: -2.5px; top: 158px; height: 30px; }
.ss-phone__sidebtn--power { right: -2.5px; top: 138px; height: 48px; background: linear-gradient(270deg,#3c3a33,#23211c); }
.ss-phone__screen {
  background: #FDFDFA; border-radius: 44px; height: 540px; overflow: hidden;
  display: flex; flex-direction: column; position: relative;
}
.ss-phone__screen::after { /* glass glare */
  content: ""; position: absolute; inset: 0; border-radius: 44px; pointer-events: none; z-index: 6;
  background: linear-gradient(118deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 26%);
}
.ss-phone__island {
  position: absolute; top: 13px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 92px; height: 27px; border-radius: 16px; background: #0b0b09;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 8px;
}
.ss-phone__island i { width: 9px; height: 9px; border-radius: 99px; background: radial-gradient(circle at 35% 35%, #2e3f52, #0b0b09 70%); }
.ss-phone__statusbar {
  /* the 27px content row is centred on the island's midline (top 13px
     + 27px island height), with clear air between icons and island */
  position: relative; z-index: 4; display: flex; justify-content: flex-end; align-items: center;
  height: 44px; padding: 13px 22px 4px 30px; color: var(--ink);
}
.ss-phone__time {
  font-size: 12.5px; font-weight: var(--weight-semibold);
  /* dead-centre of the corner between the screen edge and the island:
     (278px screen − 92px island) / 2 = 93px corner, on the island midline */
  position: absolute; left: 0; top: 9px; bottom: 0; width: 93px;
  display: flex; align-items: center; justify-content: center;
}
.ss-phone__sicons { display: inline-flex; align-items: center; gap: 4px; }
.ss-phone__homebar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 5;
  width: 110px; height: 4px; border-radius: 99px; background: rgba(26,25,21,.28);
}
.ss-phone__avatar {
  width: 34px; height: 34px; border-radius: 999px; background: var(--forest); color: var(--on-ink);
  font-weight: var(--weight-bold); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ss-phone__avatar--warm { background: var(--warning); }
.ss-phone__body { flex: 1; padding: 12px 14px 24px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }

/* — app views: Messages slides out, Google Reviews slides in — */
.ss-phone__views { flex: 1; position: relative; overflow: hidden; }
.ss-appview { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .65s var(--ease-out), opacity .65s var(--ease-out); }
.ss-appview--msg { transform: translateX(0); opacity: 1; }
.ss-appview--review { transform: translateX(102%); opacity: 0; }
.is-review .ss-appview--msg { transform: translateX(-26%); opacity: 0; }
.is-review .ss-appview--review { transform: translateX(0); opacity: 1; }
.ss-appview__head {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 16px 10px; border-bottom: 1px solid var(--line); background: rgba(244,241,233,.6);
}
.ss-appview__head b { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: -0.01em; }
.ss-appview__head span { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); }
.ss-appview__head--g { flex-direction: row; justify-content: flex-start; gap: 8px; align-items: center; padding-top: 10px; }
.ss-appview__head--g span { margin-left: auto; }

/* — the Google review card & the owner's auto-reply — */
.ss-greview {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 13px;
  box-shadow: var(--shadow-sm);
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.ss-greview.is-shown { opacity: 1; transform: none; }
.ss-greview__who { display: flex; align-items: center; gap: 9px; }
.ss-greview__who b { display: block; font-size: 12.5px; color: var(--ink); font-weight: var(--weight-semibold); }
.ss-greview__who span { font-size: 10.5px; color: var(--ink-400); }
.ss-greview__stars { display: flex; gap: 3px; margin: 9px 0 2px; min-height: 18px; }
.ss-greview__stars span {
  font-size: 16px; line-height: 1; color: #FBBC04; /* Google's own star colour, inside the screen only */
  opacity: 0; transform: scale(.3);
  transition: opacity .3s var(--ease-out), transform .35s cubic-bezier(.34,1.56,.64,1);
}
.ss-greview__stars span.is-shown { opacity: 1; transform: scale(1); }
.ss-greview p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-700); max-width: none; }
.ss-greply { max-width: 100%; }
.ss-greply__bubble { margin-top: 6px; background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 12px; padding: 10px 12px; }
.ss-greply__bubble b { display: block; font-size: 10px; color: var(--forest-900); font-weight: var(--weight-semibold); margin-bottom: 3px; }
.ss-greply__bubble p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink-700); }

.ss-msg { opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); max-width: 86%; }
.ss-msg.is-shown { opacity: 1; transform: none; }
.ss-msg--sys { align-self: center; width: 96%; max-width: 96%; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; }
.ss-msg__tag {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--forest-900); margin-bottom: 3px; display: flex; align-items: center; gap: 5px;
}
.ss-msg__tag::before { content: ""; width: 5px; height: 5px; border-radius: 99px; background: var(--forest); }
.ss-msg--sys b { font-size: 11.5px; color: var(--ink); font-weight: var(--weight-semibold); display: block; }
.ss-msg--sys span { font-size: 10.5px; color: var(--ink-500); }
.ss-msg--out { align-self: flex-end; background: var(--forest); color: #fff; border-radius: 16px 16px 5px 16px; padding: 10px 13px; font-size: 12px; line-height: 1.45; }
.ss-msg--in { align-self: flex-start; background: var(--paper-sunken); color: var(--ink-700); border-radius: 16px 16px 16px 5px; padding: 10px 13px; font-size: 12px; line-height: 1.45; }
.ss-msg--chip {
  align-self: center; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--forest-tint); border: 1px solid var(--forest-tint-2); color: var(--forest-900);
  border-radius: 999px; padding: 6px 12px;
}
.ss-msg--chip-solid { background: var(--forest); border-color: var(--forest); color: #fff; }

.ss-typing { align-self: flex-end; background: var(--forest-tint); border-radius: 16px 16px 5px 16px; padding: 11px 14px; display: none; gap: 4px; }
.ss-typing.is-shown { display: inline-flex; }
.ss-typing i { width: 6px; height: 6px; border-radius: 99px; background: var(--forest); animation: ssTyping 1s infinite; }
.ss-typing i:nth-child(2) { animation-delay: .15s; }
.ss-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ssTyping { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.ss-hrail { display: flex; align-items: flex-start; width: 100%; max-width: 420px; }
.ss-hrail__node { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 86px; flex: none; }
.ss-hrail__ic {
  width: 46px; height: 46px; border-radius: 13px; background: var(--paper-sunken); border: 1px solid var(--line);
  color: var(--ink-400); display: flex; align-items: center; justify-content: center;
  transition: background .45s var(--ease-out), color .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.ss-hrail__node.is-on .ss-hrail__ic { background: var(--forest); border-color: transparent; color: #fff; box-shadow: 0 6px 18px -6px rgba(44,110,75,.5); }
.ss-hrail__label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); text-align: center; line-height: 1.4; }
.ss-hrail__node.is-on .ss-hrail__label { color: var(--forest-900); }
.ss-hrail__conn { flex: 1; height: 46px; display: flex; align-items: center; padding: 0 5px; }
.ss-hrail__conn i { flex: 1; height: 2px; background: var(--line-strong); border-radius: 2px; position: relative; overflow: hidden; display: block; }
.ss-hrail__conn i::after {
  content: ""; position: absolute; inset: 0; background: var(--forest); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out);
}
.ss-hrail__conn.is-on i::after { transform: scaleX(1); }

/* ---------- Service-card vignettes (home) -------------------
   Tiny self-running product scenes: each service card opens with
   its automation working. All transform/opacity loops; every
   animation dies under prefers-reduced-motion. */
.ss-vig {
  position: relative; height: 118px; border-radius: 12px;
  background: var(--paper-sunken); border: 1px solid var(--line);
  margin-bottom: 18px; overflow: hidden; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.ss-card--interactive:hover .ss-vig { background: var(--paper-tint); }
@keyframes ssVigIn {
  0% { opacity: 0; transform: translateY(7px); }
  7% { opacity: 1; transform: none; }
  84% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; }
}
.ss-vig__pill {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  background: var(--forest-tint); color: var(--forest-900); border: 1px solid var(--forest-tint-2);
  border-radius: 999px; padding: 4px 9px;
  animation: ssVigIn 7s var(--ease-out) infinite both; animation-delay: 1.2s;
}

/* website assembling itself */
.ss-vig__chrome { display: flex; align-items: center; gap: 5px; }
.ss-vig__chrome i { width: 7px; height: 7px; border-radius: 99px; }
.ss-vig__chrome i:nth-child(1) { background: #d98a7f; }
.ss-vig__chrome i:nth-child(2) { background: #e2c983; }
.ss-vig__chrome i:nth-child(3) { background: var(--forest-300); }
.ss-vig__chrome span {
  flex: 1; margin-left: 4px; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 5px; font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-400); padding: 2px 8px;
}
.ss-vig--web .b { display: block; height: 8px; border-radius: 4px; background: var(--paper-raised); border: 1px solid var(--line); animation: ssVigIn 7s var(--ease-out) infinite both; }
.ss-vig--web .b1 { width: 64%; height: 12px; background: var(--ink); border-color: transparent; animation-delay: .2s; }
.ss-vig--web .b2 { width: 82%; animation-delay: .55s; }
.ss-vig--web .b3 { width: 48%; animation-delay: .9s; }
.ss-vig--web .btn { display: block; width: 74px; height: 16px; border-radius: 6px; background: var(--forest); animation: ssVigIn 7s var(--ease-out) infinite both; animation-delay: 1.25s; }

/* stars popping in */
.ss-vig--stars { flex-direction: row; align-items: center; justify-content: center; gap: 6px; }
.ss-vig--stars i { font-style: normal; font-size: 26px; line-height: 1; color: #FBBC04; animation: ssVigStar 6s infinite both; }
.ss-vig--stars i:nth-child(1) { animation-delay: .15s; }
.ss-vig--stars i:nth-child(2) { animation-delay: .3s; }
.ss-vig--stars i:nth-child(3) { animation-delay: .45s; }
.ss-vig--stars i:nth-child(4) { animation-delay: .6s; }
.ss-vig--stars i:nth-child(5) { animation-delay: .75s; }
.ss-vig--stars .ss-vig__pill { animation-duration: 6s; }
@keyframes ssVigStar {
  0% { opacity: 0; transform: scale(.3); }
  6% { opacity: 1; transform: scale(1.18); }
  9% { transform: scale(1); }
  84% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

/* win-back email sliding in */
.ss-vig--mail { justify-content: flex-end; }
.ss-vig__mailcard {
  background: var(--paper-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; box-shadow: var(--shadow-sm);
  animation: ssVigIn 7s var(--ease-out) infinite both; animation-delay: .7s;
}
.ss-vig__mailcard b { display: block; font-size: 12px; color: var(--ink); letter-spacing: -0.01em; }
.ss-vig__mailcard span { font-size: 10.5px; color: var(--ink-500); line-height: 1.4; display: block; margin-top: 2px; }
.ss-vig--mail .ss-vig__pill { animation-delay: .1s; }

/* chatbot answering */
.ss-vig--chat { justify-content: center; }
.cb { font-size: 10.5px; line-height: 1.4; padding: 6px 10px; border-radius: 11px; width: fit-content; max-width: 88%; }
.cb-in { background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-700); border-bottom-left-radius: 4px; animation: ssVigIn 7.5s var(--ease-out) infinite both; animation-delay: .3s; }
.cb-slot { align-self: flex-end; display: grid; }
.cb-slot > * { grid-area: 1 / 1; justify-self: end; }
.cb-dots { background: var(--forest-tint); border-bottom-right-radius: 4px; display: inline-flex; gap: 3px; padding: 9px 10px; animation: ssVigDots 7.5s infinite both; }
.cb-dots i { width: 4.5px; height: 4.5px; border-radius: 99px; background: var(--forest); animation: ssTyping 1s infinite; }
.cb-dots i:nth-child(2) { animation-delay: .15s; }
.cb-dots i:nth-child(3) { animation-delay: .3s; }
.cb-out { background: var(--forest); color: #fff; border-bottom-right-radius: 4px; animation: ssVigIn 7.5s var(--ease-out) infinite both; animation-delay: 2.1s; }
@keyframes ssVigDots { 0%, 12% { opacity: 0; } 16%, 25% { opacity: 1; } 29%, 100% { opacity: 0; } }

/* receptionist on a call */
.ss-vig--call { justify-content: space-between; }
.ss-vig__callrow { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink); }
.ss-vig__callrow b { font-weight: var(--weight-semibold); }
.ss-vig__callrow span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); }
.ss-vig__calldot { width: 8px; height: 8px; border-radius: 99px; background: var(--forest); animation: ssPulse 1.6s infinite; }
.ss-vig__wave { display: flex; align-items: center; gap: 3px; height: 32px; }
.ss-vig__wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--forest-300); transform-origin: center; animation: ssWave 1.2s ease-in-out infinite; }
.ss-vig__wave i:nth-child(1) { animation-delay: 0s; }
.ss-vig__wave i:nth-child(2) { animation-delay: .12s; }
.ss-vig__wave i:nth-child(3) { animation-delay: .24s; }
.ss-vig__wave i:nth-child(4) { animation-delay: .06s; }
.ss-vig__wave i:nth-child(5) { animation-delay: .3s; }
.ss-vig__wave i:nth-child(6) { animation-delay: .18s; }
.ss-vig__wave i:nth-child(7) { animation-delay: .36s; }
.ss-vig__wave i:nth-child(8) { animation-delay: .09s; }
.ss-vig__wave i:nth-child(9) { animation-delay: .27s; }
@keyframes ssWave { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
.ss-vig__monoline { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--forest-900); white-space: nowrap; overflow: hidden; }

/* a pulse travelling through a flow */
.ss-vig--flow { flex-direction: row; align-items: center; padding: 0 20px; }
.ss-vig--flow .n { width: 30px; height: 30px; border-radius: 9px; background: var(--paper-raised); border: 1px solid var(--line); flex: none; animation: ssNodeGlow 5s infinite; }
.ss-vig--flow .n1 { animation-delay: 0s; }
.ss-vig--flow .n2 { animation-delay: 1.6s; }
.ss-vig--flow .n3 { animation-delay: 3.2s; }
@keyframes ssNodeGlow {
  0%, 6% { border-color: var(--line); box-shadow: none; background: var(--paper-raised); }
  12%, 30% { border-color: var(--forest); box-shadow: 0 4px 14px -4px rgba(44,110,75,.5); background: var(--forest-tint); }
  42%, 100% { border-color: var(--line); background: var(--paper-raised); }
}
.ss-vig--flow .l { flex: 1; height: 2px; background: var(--line-strong); border-radius: 2px; position: relative; }
.ss-vig--flow .l i { position: absolute; top: -2.5px; left: 0; width: 7px; height: 7px; border-radius: 99px; background: var(--forest); animation: ssTravel 5s linear infinite; }
.ss-vig--flow .l1 i { animation-delay: .3s; }
.ss-vig--flow .l2 i { animation-delay: 1.9s; }
@keyframes ssTravel {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  26% { left: calc(100% - 7px); opacity: 1; }
  32%, 100% { left: calc(100% - 7px); opacity: 0; }
}

/* ---------- Services tab showcase (home) --------------------
   A tab bar of every system; picking one swaps in a full-width
   panel: explanation left, the automation running right. Panel
   animations are one-shot (ssxIn) and restart on every open. */
.ss-tabs {
  /* full-width segmented bar: the tabs share one row and their type
     and padding scale fluidly, so every tab always fits on one line */
  display: flex; flex-wrap: nowrap; gap: 4px;
  padding: 6px; background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 999px; width: 100%; margin: 44px 0 24px;
}
.ss-tabs::-webkit-scrollbar { display: none; }
.ss-tab {
  appearance: none; -webkit-appearance: none; border: none; background: transparent; cursor: pointer;
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-sans); font-size: clamp(11.5px, 1.05vw, 14px); font-weight: var(--weight-semibold);
  color: var(--ink-500); padding: 10px clamp(6px, 0.8vw, 14px); border-radius: 999px; white-space: nowrap;
  transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ss-tab:hover { color: var(--ink); }
.ss-tab[aria-selected="true"] { background: var(--ink); color: var(--on-ink); }
.ss-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* Only on small screens does the bar give up the single row and wrap
   into a soft rounded block (the mobile layout). */
@media (max-width: 840px) {
  .ss-tabs { flex-wrap: wrap; width: max-content; max-width: 100%; border-radius: 24px; }
  .ss-tab { flex: none; font-size: 13px; padding: 9px 13px; }
}

/* JS adds .ss-wait on load and removes it when the showcase scrolls
   into view, so the scene's one-shot animation plays where the user
   can actually see it (without JS, nothing pauses). */
.ss-showwrap.ss-wait .ss-showpanel,
.ss-showwrap.ss-wait .ss-showpanel * { animation-play-state: paused !important; }

.ss-showpanel { display: none; }
.ss-showpanel.is-active { display: block; animation: ssxIn .45s var(--ease-out) both; }
.ss-show {
  display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: center;
  background: var(--bg-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: 44px 48px;
}
.ss-show__copy h3 { font-size: clamp(24px, 2.6vw, 32px); font-weight: var(--weight-bold); letter-spacing: var(--tracking-snug); color: var(--ink); margin: 14px 0 10px; }
.ss-show__what { font-size: 16.5px; color: var(--ink-500); line-height: 1.6; margin: 0; }
.ss-show__steps { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-show__steps li { display: flex; gap: 12px; font-size: 15px; color: var(--ink-700); line-height: 1.5; }
.ss-show__steps li b { font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: 11px; color: var(--forest); padding-top: 3px; flex: none; }
.ss-show__outcome { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-weight: var(--weight-semibold); color: var(--forest-900); font-size: 15.5px; }

/* the visual side */
.ssx {
  border-radius: 16px; background: var(--paper-sunken); border: 1px solid var(--line);
  padding: 28px; min-height: 360px; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  position: relative; overflow: hidden;
}
@keyframes ssxIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ssx [data-i], .ssx-browser[data-i] { animation: ssxIn .55s var(--ease-out) both; }
.ssx [data-i="1"] { animation-delay: .15s; }
.ssx [data-i="2"] { animation-delay: .5s; }
.ssx [data-i="3"] { animation-delay: .95s; }
.ssx [data-i="4"] { animation-delay: 1.4s; }
.ssx [data-i="5"] { animation-delay: 1.85s; }
.ssx [data-i="6"] { animation-delay: 2.3s; }

.ssx-chip {
  align-self: center; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--forest-tint); border: 1px solid var(--forest-tint-2); color: var(--forest-900);
  border-radius: 999px; padding: 7px 14px; text-align: center;
}
.ssx-chip--solid { background: var(--forest); border-color: var(--forest); color: #fff; }

/* browser (websites) */
.ssx-browser { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); }
.ssx-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: var(--paper); }
.ssx-browser__bar i { width: 8px; height: 8px; border-radius: 99px; }
.ssx-browser__bar i:nth-child(1) { background: #d98a7f; }
.ssx-browser__bar i:nth-child(2) { background: #e2c983; }
.ssx-browser__bar i:nth-child(3) { background: var(--forest-300); }
.ssx-browser__bar span { flex: 1; margin-left: 6px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-400); padding: 3px 10px; text-align: center; }
.ssx-browser__page { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.xb { display: block; border-radius: 5px; }
.xb-head { width: 68%; height: 16px; background: var(--ink); }
.xb-line { width: 86%; height: 9px; background: var(--paper-sunken); border: 1px solid var(--line); }
.xb-line--short { width: 52%; }
.xb-btn { width: 96px; height: 20px; border-radius: 7px; background: var(--forest); margin-top: 2px; }
.ssx-form { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 10px 12px; margin-top: 4px; }
.ssx-form i { flex: 1; height: 18px; border-radius: 5px; background: var(--paper-sunken); }
.ssx-form b { flex: none; font-size: 11px; font-weight: var(--weight-semibold); color: #fff; background: var(--forest); border-radius: 7px; padding: 6px 11px; }

/* sources, sms, ping card (enquiry capture) */
.ssx-srcrow { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ssx-src { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.ssx-sms { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px 16px 16px 6px; padding: 14px 16px; box-shadow: var(--shadow-sm); max-width: 420px; }
.ssx-sms b { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.ssx-sms b span { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-400); font-weight: var(--weight-medium); }
.ssx-sms p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-700); }
.ssx-card { display: flex; gap: 12px; align-items: flex-start; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 13px; padding: 13px 15px; max-width: 420px; }
.ssx-card__ic { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--forest-tint); color: var(--forest); display: flex; align-items: center; justify-content: center; }
.ssx-card b { display: block; font-size: 13.5px; color: var(--ink); font-weight: var(--weight-semibold); }
.ssx-card span { font-size: 12.5px; color: var(--ink-500); line-height: 1.45; }

/* google review + auto-reply (reviews) */
.ssx-review { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow-sm); max-width: 420px; }
.ssx-review__who { display: flex; align-items: center; gap: 10px; }
.ssx-review__who b { display: block; font-size: 13px; color: var(--ink); font-weight: var(--weight-semibold); }
.ssx-review__who > div > span { font-size: 11px; color: var(--ink-400); }
.ssx-av { flex: none; width: 30px; height: 30px; border-radius: 999px; background: var(--warning); color: #fff; font-weight: var(--weight-bold); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.ssx-stars { margin-left: auto; color: #FBBC04; font-size: 14px; letter-spacing: 1.5px; }
.ssx-review p { margin: 9px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-700); }
.ssx-reply { max-width: 420px; }
.ssx-reply b { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--forest-900); margin-bottom: 6px; }
.ssx-reply p { margin: 0; background: var(--forest-tint); border: 1px solid var(--forest-tint-2); border-radius: 12px; padding: 11px 14px; font-size: 13px; line-height: 1.5; color: var(--ink-700); }

/* win-back email (repeat) */
.ssx-mail { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); max-width: 420px; }
.ssx-mail__head { display: flex; justify-content: space-between; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: 12px; color: var(--ink-500); }
.ssx-mail__head b { color: var(--ink); font-weight: var(--weight-semibold); }
.ssx-mail__subj { display: block; padding: 12px 15px 0; font-size: 15px; font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: -0.01em; }
.ssx-mail p { margin: 0; padding: 6px 15px 14px; font-size: 13px; line-height: 1.55; color: var(--ink-700); }

/* chat (chatbot) */
.ssx-cb { font-size: 13.5px; line-height: 1.45; padding: 10px 14px; border-radius: 14px; width: fit-content; max-width: 78%; }
.ssx-cb--in { align-self: flex-start; background: var(--paper-raised); border: 1px solid var(--line); color: var(--ink-700); border-bottom-left-radius: 5px; }
.ssx-cb--out { align-self: flex-end; background: var(--forest); color: #fff; border-bottom-right-radius: 5px; }

/* call (receptionist) */
.ssx-call { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; }
.ssx-call b { font-weight: var(--weight-semibold); }
.ssx-call span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.ssx-calldot { width: 9px; height: 9px; border-radius: 99px; background: var(--forest); animation: ssPulse 1.6s infinite; }
.ssx-wave { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 6px; }
.ssx-wave i { flex: 1; height: 100%; border-radius: 3px; background: var(--forest-300); transform-origin: center; animation: ssWave 1.15s ease-in-out infinite; }
.ssx-wave i:nth-child(3n) { animation-delay: .12s; }
.ssx-wave i:nth-child(3n+1) { animation-delay: .3s; }
.ssx-wave i:nth-child(4n) { animation-delay: .2s; }
.ssx-wave i:nth-child(5n) { animation-delay: .05s; }
.ssx-line { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-500); text-align: center; }

/* pipeline (automations) */
.ssx--pipe { gap: 22px; }
.ssx-rail { display: flex; align-items: flex-start; justify-content: center; }
.ssx-rail__node { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 78px; flex: none; }
.ssx-rail__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--forest-tint); border: 1px solid var(--forest-tint-2); color: var(--forest); display: flex; align-items: center; justify-content: center; }
.ssx-rail__label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); text-align: center; }
.ssx-rail__line { flex: 1; max-width: 70px; height: 2px; background: var(--line-strong); border-radius: 2px; position: relative; margin-top: 21px; }
.ssx-rail__line i { position: absolute; top: -2.5px; left: 0; width: 7px; height: 7px; border-radius: 99px; background: var(--forest); animation: ssTravel 4.2s linear infinite; }
.ssx-rail__line:nth-of-type(2) i { animation-delay: 1.4s; }
.ssx-rail__line:nth-of-type(3) i { animation-delay: 2.8s; }

/* ---------- Showcase scenes v2 ------------------------------
   Richer per-panel choreography: spring pops, glint sweeps, a
   cursor that clicks, converging channels, star bursts, and two
   dark "system" panels. One-shot; replays on every tab open. */
@keyframes ssxPop { 0% { opacity: 0; transform: scale(.7); } 65% { opacity: 1; transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ssxShineSweep { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(420%) skewX(-18deg); } }
.ssx [data-i="7"] { animation-delay: 2.75s; }
.ssx [data-i="8"] { animation-delay: 3.2s; }
.ssx-shine { position: relative; overflow: hidden; }
.ssx-shine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%; left: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: ssxShineSweep .9s ease-out 1.8s 1 both;
}

/* dark system panels */
.ssx--dark {
  background: var(--ink); border-color: transparent;
  background-image: radial-gradient(rgba(244,241,233,.06) 1px, transparent 1.5px);
  background-size: 22px 22px;
}
.ssx-chip--onink { background: rgba(127,191,155,.12); border-color: rgba(127,191,155,.3); color: var(--mint-on-ink); }
.ssx-card--onink { background: rgba(251,250,246,.06); border-color: var(--on-ink-faint); }
.ssx-card--onink b { color: var(--on-ink); }
.ssx-card--onink span:not(.ssx-card__ic) { color: var(--on-ink-muted); }
.ssx-card--onink .ssx-card__ic { background: rgba(127,191,155,.16); color: var(--mint-on-ink); }
.ssx-cap { margin: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.55; text-align: center; color: var(--on-ink-muted); }
.ssx-cap--ai { color: var(--mint-on-ink); }

/* -- websites: a real mini-site assembling itself -- */
.ssx--site { padding: 22px; }
.ssx-browser--big { box-shadow: var(--shadow-lg); }
.ssx-site { display: flex; flex-direction: column; }
.ssx-site__nav { display: flex; align-items: center; gap: 10px; background: var(--ink); padding: 9px 12px; }
.ssx-site__logo { display: inline-flex; align-items: center; gap: 6px; color: var(--on-ink); font-size: 10.5px; font-weight: var(--weight-semibold); letter-spacing: -0.01em; white-space: nowrap; }
.ssx-site__logo i { width: 8px; height: 8px; border-radius: 3px; background: var(--forest-300); }
.ssx-site__links { display: inline-flex; gap: 7px; margin-left: auto; }
.ssx-site__links i { width: 22px; height: 5px; border-radius: 3px; background: rgba(244,241,233,.28); }
.ssx-site__navcta { font-size: 8.5px; font-weight: var(--weight-semibold); color: #fff; background: var(--forest); border-radius: 6px; padding: 5px 9px; white-space: nowrap; }
.ssx-site__hero {
  padding: 22px 18px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: linear-gradient(115deg, var(--forest-900), var(--forest) 48%, var(--forest-300));
  background-size: 180% 180%; animation: ssxGrad 9s ease-in-out infinite alternate;
}
@keyframes ssxGrad { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.ssx-site__hero b { font-size: clamp(15px, 1.6vw, 19px); font-weight: var(--weight-bold); letter-spacing: -0.025em; color: #FBFAF6; line-height: 1.15; }
.ssx-site__hero > span { font-size: 10px; color: rgba(244,241,233,.75); }
.ssx-site__btn { font-style: normal; font-size: 10px; font-weight: var(--weight-semibold); color: var(--forest-900); background: #FBFAF6; border-radius: 999px; padding: 7px 13px; margin-top: 8px; box-shadow: var(--shadow-sm); animation: ssxPress .35s ease 3.35s 1; }
@keyframes ssxPress { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); filter: brightness(.92); } }
.ssx-site__cards { display: flex; gap: 8px; padding: 12px; background: var(--paper-raised); }
.ssx-site__card { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 9px 9px 11px; display: flex; flex-direction: column; gap: 5px; animation-name: ssxPop !important; }
.ssx-site__card:nth-child(1) { animation-delay: 1.7s !important; }
.ssx-site__card:nth-child(2) { animation-delay: 1.85s !important; }
.ssx-site__card:nth-child(3) { animation-delay: 2s !important; }
.ssx-site__card i { width: 14px; height: 14px; border-radius: 5px; background: var(--forest-tint); }
.ssx-site__card u { text-decoration: none; display: block; height: 5px; border-radius: 3px; background: var(--paper-sunken); width: 90%; }
.ssx-site__card u.u2 { width: 60%; }
.ssx-cursor { position: absolute; bottom: 16px; right: 20px; z-index: 3; opacity: 0; filter: drop-shadow(0 2px 4px rgba(26,25,21,.3)); animation: ssxCursor 1.4s var(--ease-out) 2.2s both; }
@keyframes ssxCursor {
  0% { transform: translate(0, 0); opacity: 0; }
  18% { opacity: 1; }
  40% { transform: translate(-150px, -80px); }
  68% { transform: translate(-370px, -220px); opacity: 1; }
  78% { transform: translate(-370px, -220px) scale(.8); }
  100% { transform: translate(-370px, -220px) scale(1); opacity: 1; }
}
.ssx-toast {
  position: absolute; bottom: 14px; left: 50%; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  background: var(--forest); color: #fff; border-radius: 999px; padding: 8px 15px; box-shadow: var(--shadow-md);
  animation-name: ssxToast !important;
}
.ssx--site [data-i="8"] { animation-delay: 3.7s; }
@keyframes ssxToast { 0% { opacity: 0; transform: translate(-50%, 14px); } 100% { opacity: 1; transform: translate(-50%, 0); } }

/* -- enquiry capture: channels converge into one system -- */
.ssx-funnel { position: relative; width: 340px; max-width: 100%; height: 118px; margin: 0 auto; }
.ssx-fsrc {
  position: absolute; top: 0; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-700); background: var(--paper-raised); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 11px; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.ssx-fsrc svg { color: var(--forest); }
.ssx-fsrc--1 { left: 0; animation: ssxAbsorbL 1.5s var(--ease-in-out) .35s both; }
.ssx-fsrc--2 { left: 50%; transform: translateX(-50%); animation: ssxAbsorbC 1.5s var(--ease-in-out) .5s both; }
.ssx-fsrc--3 { right: 0; animation: ssxAbsorbR 1.5s var(--ease-in-out) .65s both; }
@keyframes ssxAbsorbL { 0% { opacity: 0; transform: translate(0, -8px); } 25% { opacity: 1; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(118px, 58px) scale(.45); } }
@keyframes ssxAbsorbC { 0% { opacity: 0; transform: translate(-50%, -8px); } 25% { opacity: 1; transform: translate(-50%, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 58px) scale(.45); } }
@keyframes ssxAbsorbR { 0% { opacity: 0; transform: translate(0, -8px); } 25% { opacity: 1; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-118px, 58px) scale(.45); } }
.ssx-fhub {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 16px; background: var(--forest); color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -8px rgba(44,110,75,.55);
  animation: ssxPop .5s var(--ease-out) 1.55s both;
}
.ssx-fhub::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px; border: 2px solid var(--forest);
  animation: ssxSonar 2.2s ease-out 2.1s infinite;
}
@keyframes ssxSonar { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
.ssx--enq [data-i="3"] { animation-delay: 1.9s; }
.ssx--enq [data-i="4"] { animation-delay: 2.5s; }
.ssx--enq [data-i="5"] { animation-delay: 3s; }
.ssx--enq .ssx-shine::after { animation-delay: 2.7s; }

/* -- reviews: Google card, star pops, burst, live rating -- */
.ssx-review--big { position: relative; padding: 16px 18px; }
.ssx-gbadge {
  position: absolute; top: -10px; right: 14px; width: 30px; height: 30px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
}
.ssx-rate {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--forest-900); background: var(--forest-tint); border: 1px solid var(--forest-tint-2);
  border-radius: 999px; padding: 4px 9px;
  animation: ssxPop .45s var(--ease-out) 2.3s both;
}
.ssx-review__stars { position: relative; display: flex; gap: 3px; margin: 10px 0 2px; min-height: 20px; }
.ssx-review__stars .st { font-size: 17px; line-height: 1; color: #FBBC04; animation: ssxStar .5s cubic-bezier(.34,1.56,.64,1) both; }
.ssx-review__stars .st:nth-child(1) { animation-delay: 1.1s; }
.ssx-review__stars .st:nth-child(2) { animation-delay: 1.25s; }
.ssx-review__stars .st:nth-child(3) { animation-delay: 1.4s; }
.ssx-review__stars .st:nth-child(4) { animation-delay: 1.55s; }
.ssx-review__stars .st:nth-child(5) { animation-delay: 1.7s; }
@keyframes ssxStar { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.25) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
.ssx-burst { position: absolute; left: 96px; top: 8px; width: 0; height: 0; }
.ssx-burst i { position: absolute; width: 5px; height: 5px; border-radius: 99px; background: #FBBC04; opacity: 0; animation: ssxBurst .7s ease-out 1.95s both; }
.ssx-burst i:nth-child(2) { background: var(--forest-300); --bx: 18px; --by: -12px; }
.ssx-burst i:nth-child(1) { --bx: -16px; --by: -14px; }
.ssx-burst i:nth-child(3) { background: var(--forest); --bx: 22px; --by: 6px; }
.ssx-burst i:nth-child(4) { --bx: -20px; --by: 8px; }
.ssx-burst i:nth-child(5) { background: var(--forest-300); --bx: 4px; --by: -20px; }
.ssx-burst i:nth-child(6) { --bx: -2px; --by: 16px; }
@keyframes ssxBurst { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--bx, 12px), var(--by, -12px)) scale(.4); } }
.ssx--rev [data-i="3"] { animation-delay: 2.7s; }
.ssx--rev .ssx-shine::after { animation-delay: 1.2s; }

/* -- repeat: the 90-day meter fills, the email lands -- */
.ssx-meter { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-500); }
.ssx-meter__bar { flex: 1; height: 6px; border-radius: 99px; background: var(--paper-raised); border: 1px solid var(--line); overflow: hidden; }
.ssx-meter__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--forest-300), var(--forest)); transform: scaleX(0); transform-origin: left; animation: ssxFill 1.3s var(--ease-in-out) .5s both; }
@keyframes ssxFill { to { transform: scaleX(1); } }
.ssx-meter__end { color: var(--forest-900); font-weight: var(--weight-bold); animation: ssxPop .4s var(--ease-out) 1.8s both; }
.ssx--rep .ssx-mail { animation-name: ssxMailIn; }
@keyframes ssxMailIn { 0% { opacity: 0; transform: translateY(22px) rotate(-1.5deg); } 100% { opacity: 1; transform: none; } }
.ssx--rep [data-i="2"] { animation-delay: 2s; }
.ssx--rep [data-i="3"] { animation-delay: 3s; }
.ssx--rep .ssx-shine::after { animation-delay: 2.9s; }
.ssx-mail__btn { display: inline-block; margin: 0 15px 14px; font-size: 11px; font-weight: var(--weight-semibold); color: #fff; background: var(--forest); border-radius: 8px; padding: 7px 13px; }
.ssx-mail p { padding-bottom: 10px; }

/* -- chatbot: a real chat widget -- */
.ssx-widget { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); }
.ssx-widget__head { display: flex; align-items: center; gap: 8px; padding: 11px 15px; background: var(--ink); }
.ssx-widget__head b { font-size: 12px; color: var(--on-ink); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.ssx-widget__head span:last-child { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mint-on-ink); }
.ssx-widget__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--forest-300); animation: ssPulse 2s infinite; }
.ssx-widget__body { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.ssx-slot { display: grid; }
.ssx-slot > * { grid-area: 1 / 1; justify-self: end; }
.ssx-dots { display: inline-flex; gap: 4px; background: var(--paper-sunken); border-radius: 13px 13px 5px 13px; padding: 10px 12px; opacity: 0; }
.ssx-dots i { width: 5px; height: 5px; border-radius: 99px; background: var(--ink-400); animation: ssTyping 1s infinite; }
.ssx-dots i:nth-child(2) { animation-delay: .15s; }
.ssx-dots i:nth-child(3) { animation-delay: .3s; }
.ssx-dots--1 { animation: ssxDotsWin 1s linear .9s both; }
.ssx-dots--2 { animation: ssxDotsWin .9s linear 2.75s both; }
@keyframes ssxDotsWin { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.ssx--bot .ssx-cb { animation-name: ssxPop; }
.ssx--bot [data-i="3"] { animation-delay: 1.95s; }
.ssx--bot [data-i="4"] { animation-delay: 2.5s; }
.ssx--bot [data-i="5"] { animation-delay: 3.7s; }
.ssx--bot [data-i="6"] { animation-delay: 4.3s; }

/* -- receptionist: dark call screen with sonar avatar -- */
.ssx--callscreen { gap: 16px; }
.ssx-callui { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 6px; }
.ssx-callui b { font-size: 15px; font-weight: var(--weight-semibold); color: var(--on-ink); letter-spacing: -0.01em; margin-top: 10px; }
.ssx-callui__sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); }
.ssx-callui__av {
  position: relative; width: 58px; height: 58px; border-radius: 999px;
  background: rgba(127,191,155,.14); color: var(--mint-on-ink);
  display: flex; align-items: center; justify-content: center;
}
.ssx-callui__av i { position: absolute; inset: 0; border-radius: 999px; border: 1.5px solid rgba(127,191,155,.5); animation: ssxSonar 2.4s ease-out .8s infinite; }
.ssx-callui__av i.r2 { animation-delay: 2s; }
.ssx-wave--mint { padding: 0 24px; }
.ssx-wave--mint i { background: rgba(127,191,155,.75); }
.ssx--callscreen [data-i="3"] { animation-delay: 1.3s; }
.ssx--callscreen [data-i="4"] { animation-delay: 2.1s; }
.ssx--callscreen [data-i="5"] { animation-delay: 2.9s; }

/* -- automations: a live circuit -- */
.ssx--circuit { gap: 20px; padding-bottom: 66px; }
.ssx-cir { display: flex; align-items: flex-start; justify-content: center; }
.ssx-cir__node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 76px; flex: none; }
.ssx-cir__ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(127,191,155,.1); border: 1px solid rgba(127,191,155,.35); color: var(--mint-on-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 18px -4px rgba(127,191,155,.35);
}
.ssx-cir__label { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); text-align: center; }
.ssx-cir__line { flex: 1; max-width: 64px; height: 2px; background: rgba(244,241,233,.16); border-radius: 2px; position: relative; margin-top: 21px; }
.ssx-cir__line i { position: absolute; top: -2.5px; left: 0; width: 7px; height: 7px; border-radius: 99px; background: var(--mint-on-ink); box-shadow: 0 0 10px rgba(127,191,155,.9); animation: ssTravel 4.2s linear infinite; }
.ssx-cir__line:nth-of-type(2) i { animation-delay: 1.4s; }
.ssx-cir__line:nth-of-type(3) i { animation-delay: 2.8s; }
.ssx-cir__drop { position: absolute; top: 68px; left: 50%; width: 2px; height: 18px; background: rgba(244,241,233,.16); }
.ssx-cir__mini {
  position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-ink-muted); border: 1px solid rgba(244,241,233,.18); border-radius: 999px;
  padding: 5px 10px; white-space: nowrap; background: rgba(244,241,233,.04);
}
.ssx-cir__node--branch .ssx-cir__label { margin-bottom: 0; }

/* ---------- Showcase scenes v3: material polish -------------
   Light panels get a soft top-lit gradient; dark panels get a
   bloom. Cards share one layered-shadow language. Product
   details (receipts, input bar, call controls, drawn connector
   lines, node LEDs) do the "professional" work. */
.ssx {
  background: linear-gradient(180deg, #F8F5EE 0%, #EDE8DD 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px rgba(255,255,255,.2);
  border-color: #DDD7C7;
}
.ssx--dark {
  background-color: var(--ink);
  background-image:
    radial-gradient(rgba(244,241,233,.05) 1px, transparent 1.5px),
    radial-gradient(130% 110% at 50% 0%, #2b2923 0%, #1A1915 52%, #121110 100%);
  background-size: 22px 22px, 100% 100%;
  box-shadow: inset 0 1px 0 rgba(244,241,233,.07);
  border-color: transparent;
}
.ssx-sms, .ssx-card:not(.ssx-card--onink), .ssx-review, .ssx-mail, .ssx-widget, .ssx-browser {
  border-color: #E4DECF;
  box-shadow: 0 1px 2px rgba(26,25,21,.05), 0 14px 30px -14px rgba(26,25,21,.2);
}
.ss-show { box-shadow: 0 2px 6px -2px rgba(26,25,21,.06), 0 24px 56px -24px rgba(26,25,21,.18); }
.ss-tabs { box-shadow: var(--shadow-sm); }
.ss-tab[aria-selected="true"] { background: linear-gradient(180deg, #26241f, var(--ink)); box-shadow: 0 4px 12px -4px rgba(26,25,21,.4); }

/* delivery receipt under SMS bubbles */
.ssx-sms { position: relative; }
.ssx-sms::after {
  content: "Delivered"; display: block; margin-top: 9px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-300);
}

/* websites: hero light, trust row, organic cards */
.ssx-site__hero { position: relative; overflow: hidden; }
.ssx-site__hero::after {
  content: ""; position: absolute; top: -46px; right: -30px; width: 150px; height: 150px;
  border-radius: 999px; background: radial-gradient(closest-side, rgba(251,250,246,.16), transparent 70%);
  pointer-events: none;
}
.ssx-site__trust { font-size: 8.5px; color: rgba(244,241,233,.8); letter-spacing: .02em; margin-top: 7px; }
.ssx-site__trust b { color: #FBBC04; font-weight: 400; letter-spacing: 1px; margin-right: 2px; }
.ssx-site__card { box-shadow: 0 1px 2px rgba(26,25,21,.04), 0 8px 18px -10px rgba(26,25,21,.14); }
.ssx-site__card:nth-child(1) u { width: 94%; }
.ssx-site__card:nth-child(2) u { width: 78%; }
.ssx-site__card:nth-child(3) u { width: 86%; }
.ssx-site__card:nth-child(2) u.u2 { width: 52%; }
.ssx-site__card:nth-child(3) u.u2 { width: 68%; }

/* enquiry: connector lines draw before the chips converge */
.ssx-funnel__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ssx-funnel__lines path {
  fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 170; stroke-dashoffset: 170;
  animation: ssxDraw .8s var(--ease-in-out) .45s both;
}
.ssx-funnel__lines path:nth-child(2) { animation-delay: .6s; }
.ssx-funnel__lines path:nth-child(3) { animation-delay: .75s; }
@keyframes ssxDraw { to { stroke-dashoffset: 0; } }
.ssx-fhub { background: linear-gradient(160deg, var(--forest) 0%, var(--forest-700) 100%); }

/* reviews: owner-reply indent + public receipt */
.ssx-reply p { border-left: 3px solid var(--forest-300); border-radius: 6px 12px 12px 6px; }
.ssx-reply::after {
  content: "Posted publicly to Google"; display: block; margin-top: 7px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-300);
}

/* repeat: leading dot on the meter */
.ssx-meter__bar { position: relative; }
.ssx-meter__bar::after {
  content: ""; position: absolute; top: 50%; right: -2px; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 99px; background: var(--forest); box-shadow: 0 0 0 3px rgba(44,110,75,.18);
  opacity: 0; animation: ssxPop .4s var(--ease-out) 1.8s both;
}

/* chatbot: input bar */
.ssx-widget__input {
  display: flex; align-items: center; gap: 10px; margin: 0 14px 14px;
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 14px;
  background: var(--paper);
}
.ssx-widget__input span { flex: 1; font-size: 11px; color: var(--ink-400); }
.ssx-widget__input i {
  width: 26px; height: 26px; border-radius: 999px; background: var(--forest); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* receptionist: caller/AI caption labels + call controls */
.ssx-cap::before {
  content: "Caller"; display: inline-block; margin-right: 8px; vertical-align: 1px;
  font-size: 7.5px; letter-spacing: .14em; color: var(--on-ink-muted);
  border: 1px solid rgba(244,241,233,.22); border-radius: 999px; padding: 2px 7px;
}
.ssx-cap--ai::before { content: "AI"; color: var(--mint-on-ink); border-color: rgba(127,191,155,.4); }
.ssx-callui__ctl { display: flex; justify-content: center; gap: 14px; }
.ssx-callui__ctl i {
  width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(244,241,233,.08); border: 1px solid rgba(244,241,233,.14); color: var(--on-ink-muted);
}
.ssx-callui__ctl i.end { background: #AE3A2B; border-color: transparent; color: #fff; transform: rotate(135deg); }
.ssx--callscreen [data-i="6"] { animation-delay: 3.4s; }

/* automations: node faces + status LEDs */
.ssx-cir__ic {
  position: relative;
  background: linear-gradient(170deg, rgba(127,191,155,.16), rgba(127,191,155,.05));
}
.ssx-cir__ic::after {
  content: ""; position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 99px;
  background: var(--mint-on-ink); animation: ssxLed 4.2s linear infinite;
}
.ssx-cir__node:nth-of-type(2) .ssx-cir__ic::after { animation-delay: 1.4s; }
.ssx-cir__node:nth-of-type(3) .ssx-cir__ic::after { animation-delay: 2.8s; }
.ssx-cir__node:nth-of-type(4) .ssx-cir__ic::after { animation-delay: 4s; }
@keyframes ssxLed { 0%, 6% { opacity: 1; box-shadow: 0 0 8px rgba(127,191,155,.9); } 12%, 100% { opacity: .25; box-shadow: none; } }

/* ---------- Showcase scenes v4 ------------------------------
   MacBook websites scene (client-brand navy/amber — no green),
   re-centred ink/amber enquiry hub, ambient colour washes on
   the light panels, and the "explore all automations" cloud. */

/* the MacBook — a real photo (Unsplash), with the site rendered
   into the measured screen area. Screen rect measured from the
   image: glass at 9.77% / 11.49% / 55.0% / 51.2%, overlay pushed
   ~0.4% into the black bezel so no wallpaper peeks out. */
.ssx--site { padding: 24px 20px; }
.ssx-macphoto {
  position: relative; width: 100%; max-width: 520px; margin: 0 auto;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 6px -2px rgba(26,25,21,.12), 0 26px 50px -20px rgba(26,25,21,.35);
}
.ssx-macphoto__img { display: block; width: 100%; height: auto; }
.ssx-macphoto__screen {
  position: absolute; left: 9.4%; top: 11%; width: 55.75%; height: 52.2%;
  overflow: hidden; background: #0B0B0D; border-radius: 2px;
}
/* Fixed 440x290 design canvas (same 1.517 aspect as the measured
   glass), scale-fitted to the screen box by js/main.js. */
.ob-frame {
  width: 440px; height: 290px; transform-origin: top left;
  display: flex; flex-direction: column; background: #fff;
}
.ob-frame .ob-hero { flex: 1; min-height: 0; }

/* the finished client hero page: navy + amber, deliberately not our palette */
.ob-nav { display: flex; align-items: center; gap: 10px; padding: 9px 13px; background: #fff; border-bottom: 1px solid #ECE9E2; }
.ob-nav__logo { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: var(--weight-bold); color: #17324E; letter-spacing: -0.01em; white-space: nowrap; }
.ob-nav__logo i { width: 9px; height: 9px; border-radius: 3px; background: #E8A33D; }
.ob-nav__links { display: inline-flex; gap: 10px; margin-left: auto; }
.ob-nav__links u { text-decoration: none; font-size: 8.5px; color: #6B7683; }
.ob-nav__cta { font-size: 8.5px; font-weight: var(--weight-semibold); background: #17324E; color: #fff; padding: 5px 10px; border-radius: 6px; white-space: nowrap; }
.ob-hero {
  display: flex; gap: 14px; align-items: center; padding: 22px 16px 20px;
  background:
    radial-gradient(95% 150% at 100% 0%, rgba(64,120,178,.5) 0%, transparent 55%),
    linear-gradient(115deg, #12283F 0%, #1B3D60 55%, #24507C 100%);
}
.ob-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.ob-hero__eyebrow { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .18em; text-transform: uppercase; color: #E8A33D; }
.ob-hero__copy > b { font-size: clamp(16px, 1.8vw, 20px); font-weight: var(--weight-black); letter-spacing: -0.03em; color: #F9F8F5; line-height: 1.08; }
.ob-hero__sub { font-size: 9.5px; line-height: 1.5; color: rgba(247,246,243,.72); max-width: 220px; }
.ob-hero__btns { display: inline-flex; gap: 7px; margin-top: 7px; }
.ob-btn { font-style: normal; font-size: 9px; font-weight: var(--weight-semibold); border-radius: 999px; padding: 7px 13px; margin: 0 !important; }
.ob-btn--amber { background: #E8A33D; color: #16283C; box-shadow: 0 4px 12px -4px rgba(232,163,61,.55); }
.ob-btn--ghost { border: 1px solid rgba(249,248,245,.4); color: #F9F8F5; }
.ob-hero__trust { font-size: 8px; color: rgba(247,246,243,.78); margin-top: 6px; }
.ob-hero__trust b { color: #F5C664; font-weight: 400; letter-spacing: 1px; margin-right: 3px; }
.ob-hero__art {
  flex: none; width: 88px; height: 108px; border-radius: 12px;
  background:
    radial-gradient(70% 60% at 30% 100%, rgba(232,163,61,.35), transparent 65%),
    linear-gradient(160deg, #2E5B8A, #16324E);
  display: flex; align-items: center; justify-content: center; color: rgba(249,248,245,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.ob-strip { display: flex; gap: 16px; justify-content: center; align-items: center; padding: 10px; background: #F7F6F3; }
.ob-strip u { width: 46px; height: 6px; border-radius: 3px; background: #DCD8CE; }

/* enquiry: ink/amber hub, dead-centre, colour-coded channels */
.ssx--enq {
  background-image:
    radial-gradient(55% 48% at 6% 0%, rgba(59,111,181,.11), transparent 62%),
    radial-gradient(50% 44% at 96% 94%, rgba(232,163,61,.13), transparent 62%),
    linear-gradient(180deg, #F8F5EE 0%, #EDE8DD 100%);
}
.ssx-fhub {
  left: calc(50% - 26px); transform: none;
  background: linear-gradient(160deg, #2e2c27 0%, #131210 100%); color: #E8A33D;
  box-shadow: 0 12px 28px -8px rgba(19,18,16,.55);
}
.ssx-fhub::before { border-color: #E8A33D; opacity: .8; }
.ssx-fsrc--1 svg { color: #3B6FB5; }
.ssx-fsrc--2 svg { color: #AE3A2B; }
@keyframes ssxAbsorbL { 0% { opacity: 0; transform: translate(0, -8px); } 25% { opacity: 1; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(122px, 56px) scale(.45); } }
@keyframes ssxAbsorbR { 0% { opacity: 0; transform: translate(0, -8px); } 25% { opacity: 1; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(-122px, 56px) scale(.45); } }

/* reviews & repeat: warm ambient washes */
.ssx--rev {
  background-image:
    radial-gradient(56% 48% at 94% 4%, rgba(251,188,4,.14), transparent 60%),
    radial-gradient(48% 42% at 4% 96%, rgba(174,90,120,.09), transparent 60%),
    linear-gradient(180deg, #F8F5EE 0%, #EDE8DD 100%);
}
.ssx-gbadge { width: 34px; height: 34px; }
.ssx-review__stars .st { font-size: 19px; }
.ssx--rep {
  background-image:
    radial-gradient(58% 50% at 92% 6%, rgba(176,122,30,.14), transparent 62%),
    radial-gradient(46% 40% at 4% 92%, rgba(174,58,43,.09), transparent 62%),
    linear-gradient(180deg, #F8F5EE 0%, #EDE8DD 100%);
}
.ssx--rep .ssx-meter__bar i { background: linear-gradient(90deg, #E8A33D, #B07A1E); }
.ssx--rep .ssx-meter__bar::after { background: #B07A1E; box-shadow: 0 0 0 3px rgba(176,122,30,.2); }
.ssx--rep .ssx-meter__end { color: #8a5f14; }
.ssx-mail__btn { background: #B07A1E; }

/* explore-all-automations cloud */
.ssx--cloud { gap: 20px; justify-content: center; }
.ssx-cloudwrap { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-content: center; max-width: 370px; margin: 0 auto; }
.ssx-tagx {
  font-size: 12.5px; font-weight: var(--weight-semibold); letter-spacing: -0.01em;
  color: var(--on-ink); background: rgba(244,241,233,.07);
  border: 1px solid rgba(244,241,233,.16); border-radius: 999px; padding: 8px 15px;
  translate: 0 0;
}
.ssx-tagx:nth-child(3n)   { border-color: rgba(127,191,155,.4); }
.ssx-tagx:nth-child(3n+1) { border-color: rgba(232,163,61,.38); }
.ssx-tagx:nth-child(3n+2) { border-color: rgba(120,160,210,.38); }
@keyframes ssxTagDrift { from { translate: 0 0; } to { translate: 0 -5px; } }
.ssx-tagx:nth-child(odd)  { animation: ssxPop .5s var(--ease-out) both, ssxTagDrift 4.5s ease-in-out infinite alternate; }
.ssx-tagx:nth-child(even) { animation: ssxPop .5s var(--ease-out) both, ssxTagDrift 5.5s ease-in-out infinite alternate; }
.ssx-tagx:nth-child(1) { animation-delay: .15s, 1.6s; }
.ssx-tagx:nth-child(2) { animation-delay: .27s, 2.1s; }
.ssx-tagx:nth-child(3) { animation-delay: .39s, 1.8s; }
.ssx-tagx:nth-child(4) { animation-delay: .51s, 2.4s; }
.ssx-tagx:nth-child(5) { animation-delay: .63s, 1.5s; }
.ssx-tagx:nth-child(6) { animation-delay: .75s, 2.7s; }
.ssx-tagx:nth-child(7) { animation-delay: .87s, 2s; }
.ssx-tagx:nth-child(8) { animation-delay: .99s, 2.9s; }
.ssx-tagx:nth-child(9) { animation-delay: 1.11s, 1.7s; }
.ssx-cloudmore { animation: ssxIn .55s var(--ease-out) 1.5s both; }

/* ---------- Live activity feed (proof section) -------------- */
.ss-feed {
  margin-left: auto; min-width: 264px; max-width: 310px;
  background: rgba(244,241,233,.05); border: 1px solid var(--on-ink-faint);
  border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 11px; align-self: flex-start;
}
.ss-feed__head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mint-on-ink);
}
.ss-feed__dot { width: 7px; height: 7px; border-radius: 99px; background: var(--mint-on-ink); animation: ssPulse 2.2s infinite; }
.ss-feed__line { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--on-ink-muted); animation: ssFeedIn 9s infinite both; }
.ss-feed__line:nth-of-type(1) { animation-delay: .4s; }
.ss-feed__line:nth-of-type(2) { animation-delay: 1.2s; }
.ss-feed__line:nth-of-type(3) { animation-delay: 2s; }
.ss-feed__line:nth-of-type(4) { animation-delay: 2.8s; }
.ss-feed__stars { color: #FBBC04; font-size: 10px; letter-spacing: 1px; }
@keyframes ssFeedIn {
  0% { opacity: 0; transform: translateY(6px); }
  6% { opacity: 1; transform: none; }
  86% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* ---------- CTA network: the system, softly alive ---------- */
.ss-net { animation: ssDrift 16s ease-in-out infinite alternate; }
.ss-net rect { animation: ssNetPulse 6s ease-in-out infinite; }
.ss-net rect:nth-of-type(2n) { animation-delay: 1.5s; }
.ss-net rect:nth-of-type(3n) { animation-delay: 3s; }
.ss-net line { animation: ssNetPulse 6s ease-in-out infinite; animation-delay: .75s; }
@keyframes ssNetPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes ssDrift { to { transform: translate(-14px, 8px) scale(1.03); } }

/* flat footnote (replaces the pill under enquiry capture) */
.ssx-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-500); padding-top: 14px; border-top: 1px dashed var(--line-strong);
}
.ssx-note svg { color: #B07A1E; flex: none; }

/* ---------- Trust ticker (conveyor-belt marquee) ------------ */
.ss-ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0 34px; overflow: hidden; }
.ss-ticker__label {
  display: block; text-align: center; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 20px;
}
.ss-ticker__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ss-ticker__track { display: flex; width: max-content; animation: ssTicker 32s linear infinite; }
.ss-ticker__group { display: flex; align-items: center; gap: 42px; padding-right: 42px; }
.ss-ticker__item {
  font-size: clamp(24px, 3vw, 38px); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-snug); color: var(--ink-500); white-space: nowrap;
}
.ss-ticker__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--forest); opacity: .5; }
@keyframes ssTicker { to { transform: translateX(-50%); } }

/* ---------- Footer legal links ------------------------------ */
.ss-legal { color: inherit; text-decoration: none; }
.ss-legal:hover { color: var(--ink); text-decoration: underline; }
.ss-legal:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 4px; }

/* ---------- Responsive ------------------------------------- */
@media (max-width: 1100px) {
  .ss-float { display: none; }
}
@media (max-width: 960px) {
  .ss-hero { padding: 48px 0 64px; }
  .ss-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .ss-hero__sub { max-width: 560px; }
  .ss-ticker__group { gap: 28px; padding-right: 28px; }
  .ss-feed { margin-left: 0; }
  .ss-show { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; }
  .ssx { min-height: 300px; padding: 22px 18px; }
  .ss-tabs { border-radius: 20px; }
  .ssx-cursor, .ssx-toast { display: none; }
  .ssx--circuit { padding-bottom: 72px; }
  .ssx-cir__line { max-width: 34px; }
  .grid3 { grid-template-columns: 1fr !important; }
  .svc-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  .split2, .faq-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 700px) {
  .container { padding: 0 22px; }
  .site-header .bar { gap: 12px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 13.5px; }
  .form-2col { grid-template-columns: 1fr !important; }
}