/* Landing Page
   Ported from the design-source standalone landing-page export.
   Webfont faces live in fonts.css, which every page links first.
   The rules down to @keyframes screenGlow are copied verbatim from the
   bundle's <style> block. */

/* ===============================================================
   DESIGN SYSTEM
   One set of tokens for the whole landing page. Sections used to
   carry their own colour, padding and heading size inline, which is
   why the page read as a stack of unrelated pages. Everything below
   is the single source of truth; sections opt in with .section and
   the rhythm classes rather than inline style attributes.
   =============================================================== */
:root {
  /* ink */
  --ink:        #171B36;
  --ink-soft:   #5B5F73;
  --ink-mute:   #8B83A3;

  /* brand */
  --brand:      #5B2FE0;
  --brand-deep: #3D1B9E;
  --brand-tint: #EFE9FD;
  --teal:       #12B5A5;
  --teal-tint:  #DCF5F2;
  --rose:       #FF4D6D;
  --rose-tint:  #FDEEF3;
  --amber-tint: #FDF0E2;
  --green:      #16A34A;
  --green-tint: #EAFAF0;

  /* surfaces — the page alternates between exactly these two */
  --bg:         #FFFFFF;
  --bg-tint:    #FAF9FF;

  /* shape */
  --r:    14px;
  --r-xl: 22px;

  /* elevation */
  --sh-1: 0 10px 30px rgba(23, 49, 102, .05);
  --sh-2: 0 16px 44px rgba(23, 49, 102, .08);
  --sh-3: 0 30px 70px rgba(23, 49, 102, .14);

  /* vertical rhythm — every section uses the same one */
  --pad-y: 92px;
  --pad-x: 48px;
  --wrap:  1180px;
}

/* ---------------------------------------------------------------
   Section shell. Backgrounds alternate --bg / --bg-tint down the
   page; .section-accent is the single full-colour band, so it reads
   as the emphasis point instead of one loud stripe among many.
   --------------------------------------------------------------- */
.section {
  padding: var(--pad-y) var(--pad-x);
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.section-tint { background: var(--bg-tint); }
.section-tint + .section-tint { border-top: 1px solid var(--line-soft); }
.section-accent {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 48%, var(--teal) 100%);
  color: #fff;
}
.section-wrap { max-width: var(--wrap); margin: 0 auto; position: relative; z-index: 1; }
.section-center { text-align: center; }
.section-center .sec-lead { margin-left: auto; margin-right: auto; }

/* one heading treatment, used by every section */
.sec-eyebrow {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section h2 {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.section-accent h2 { color: #fff; }
.section-accent .sec-eyebrow { color: rgba(255, 255, 255, .72); }
.sec-lead {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 52px;
  max-width: 720px;
}
.section-accent .sec-lead { color: rgba(255, 255, 255, .84); }

/* one card treatment */
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }

/* ---------------------------------------------------------------
   [data-reveal] previously drove a scroll-triggered fade/rise via
   reveal.js. Disabled: every section renders in its final state on
   load, with no entrance animation and no dependency on scroll
   position or JS.
   --------------------------------------------------------------- */
[data-reveal] { opacity: 1; translate: 0 0; scale: 1; }

@media (max-width: 1000px) {
  :root { --pad-y: 64px; --pad-x: 24px; }
  .section h2 { font-size: 28px; }
  .sec-lead { font-size: 15.5px; margin-bottom: 38px; }
}

body{margin:0;background:#ffffff;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Poppins',system-ui,sans-serif;margin:0}
a{color:#5B2FE0;text-decoration:none}
a:hover{color:#FF4D6D}
/* every in-page CTA points at #pricing — glide there instead of jumping.
   Overrides base.css's scroll-padding-top: 0 here, not removed, because
   base.css's 86px still applies otherwise. This page doesn't need it:
   every anchor target is a .section, and its own var(--pad-y) top padding
   (92px desktop) already clears the 62px sticky header by itself, landing
   the heading ~30px below it. Stacking base.css's 86px on top of that
   double-counted the header clearance and left a much bigger gap. */
html { scroll-behavior: smooth; scroll-padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.btn{transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-2px)}
::selection{background:#f4c9db}
@keyframes flowDash{to{stroke-dashoffset:-24}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(91,47,224,0.35)}70%{box-shadow:0 0 0 10px rgba(91,47,224,0)}100%{box-shadow:0 0 0 0 rgba(91,47,224,0)}}
@keyframes charBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes qFloat{0%{transform:translateY(6px) scale(.7);opacity:0}25%{opacity:1}100%{transform:translateY(-30px) scale(1.05);opacity:0}}
@keyframes screenGlow{0%,100%{opacity:.9}50%{opacity:.6}}


/* ---------------------------------------------------------------
   Carousel frames — the plugin's screens, drawn in markup.

   The captures in images/screens/ were taken on a fresh install, so
   they show the chrome with none of the product: "Loading…", zeros
   and em dashes in every cell. These stand-ins are the same screens
   with real numbers on them, and they stay sharp at any size.

   One design, 1400px wide — the width the originals were captured
   at — scaled to whatever the frame is by container query units:
   1 design px = 100/1400 = .0714cqw.
   --------------------------------------------------------------- */
.shot {
  position: absolute;
  inset: 0;
  display: flex;
  overflow: hidden;
  container-type: inline-size;
  background: #eceef7;
  font-family: 'Inter', system-ui, sans-serif;
  color: #171B36;
  text-align: left;
  line-height: 1.35;
}

/* --- the wp-admin sidebar ---------------------------------------- */
.sh-side {
  width: 13.1cqw;
  flex: none;
  background: #fff;
  border-right: 1px solid #eceaf4;
  padding: 1.1cqw .6cqw;
}
.sh-brand { display: flex; align-items: center; gap: .6cqw; padding: .3cqw .5cqw 1.2cqw; }
.sh-brand-mark {
  width: 2cqw; height: 2cqw; border-radius: 50%; flex: none;
  background: #171B36; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.sh-brand-mark svg { width: 1.1cqw; height: 1.1cqw; }
.sh-brand b { font-family: 'Poppins', sans-serif; font-size: max(12px, 1cqw); letter-spacing: -.01em; }
.sh-nav { display: flex; flex-direction: column; gap: .12cqw; }
.sh-nav span {
  display: flex; align-items: center; gap: .7cqw;
  padding: .6cqw .7cqw; border-radius: .5cqw;
  font-size: max(12px, .92cqw); font-weight: 500; color: #4a4f66;
}
.sh-nav .is-on { background: #f1edfd; color: #5B2FE0; font-weight: 600; }
.sh-nav svg {
  width: 1.05cqw; height: 1.05cqw; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- page body ---------------------------------------------------- */
.sh-main { flex: 1; min-width: 0; padding: 1.4cqw 1.7cqw; display: flex; flex-direction: column; gap: 1cqw; }
.sh-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1cqw; flex: none; }
.sh-title { display: flex; align-items: center; gap: .6cqw; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, 2cqw); letter-spacing: -.02em; }
.sh-title::before { content: ''; width: .28cqw; height: 1.8cqw; border-radius: .2cqw; background: #5B2FE0; flex: none; }
.sh-sub { font-size: max(12px, .9cqw); color: #8b90a6; margin: .3cqw 0 0 .88cqw; }
.sh-btn {
  display: inline-flex; align-items: center; gap: .45cqw;
  padding: .7cqw 1.2cqw; border-radius: .55cqw;
  font-size: max(12px, .92cqw); font-weight: 600; white-space: nowrap;
  color: #fff; background: linear-gradient(135deg, #7C4DFF, #5B2FE0);
}
.sh-btn-rose { background: #fff; color: #e5395f; border: 1px solid #f6d4dd; }

/* --- the four counters -------------------------------------------- */
.sh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9cqw; flex: none; }
.sh-stat { background: #fff; border-radius: .8cqw; padding: .85cqw 1cqw; position: relative; overflow: hidden; }
.sh-stat::after {
  content: ''; position: absolute; top: -1.3cqw; right: -1.3cqw;
  width: 3.2cqw; height: 3.2cqw; border-radius: 50%;
  background: var(--glow, #f2eefe);
}
.sh-stat-top { display: flex; align-items: center; gap: .55cqw; position: relative; z-index: 1; }
.sh-chip {
  width: 1.75cqw; height: 1.75cqw; border-radius: .45cqw; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: max(12px, .9cqw); font-weight: 700;
  background: var(--chip-bg, #f1edfd); color: var(--chip-fg, #5B2FE0);
}
.sh-stat-label { font-size: max(12px, .88cqw); color: #5f6479; font-weight: 500; }
.sh-stat-n { display: flex; align-items: baseline; gap: .4cqw; margin-top: .6cqw; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, 1.6cqw); }
.sh-stat-n em { font-style: normal; font-size: max(12px, .82cqw); font-weight: 400; color: #9aa0b4; }

/* --- search + filter row ------------------------------------------ */
.sh-bar { background: #fff; border-radius: .8cqw; padding: .8cqw .95cqw; display: flex; align-items: center; gap: .7cqw; flex: none; }
.sh-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5cqw; border: 1px solid #eceaf4; border-radius: .5cqw; padding: .58cqw .75cqw; font-size: max(12px, .9cqw); color: #a4a9bd; }
.sh-search svg { width: .95cqw; height: .95cqw; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-pill {
  display: inline-flex; align-items: center; gap: .38cqw;
  border: 1px solid #eceaf4; border-radius: 999px;
  padding: .48cqw .8cqw; font-size: max(12px, .85cqw); font-weight: 600; color: #4a4f66; white-space: nowrap;
}
.sh-pill i { width: .45cqw; height: .45cqw; border-radius: 50%; background: currentColor; flex: none; }
.sh-pill em { font-style: normal; color: #a4a9bd; }
.sh-pill.is-on { background: #5B2FE0; border-color: #5B2FE0; color: #fff; }
.sh-pill.is-on em { color: rgba(255, 255, 255, .7); }
.sh-select { display: inline-flex; align-items: center; gap: .5cqw; border: 1px solid #eceaf4; border-radius: .5cqw; padding: .58cqw .8cqw; font-size: max(12px, .88cqw); font-weight: 600; color: #4a4f66; white-space: nowrap; }

/* --- the table ----------------------------------------------------- */
.sh-table { background: #fff; border-radius: .8cqw; overflow: hidden; flex: 1; min-height: 0; }
.sh-tr { display: grid; align-items: center; gap: .9cqw; padding: .78cqw 1cqw; font-size: max(12px, .9cqw); }
.sh-tr + .sh-tr { border-top: 1px solid #f4f2fa; }
.sh-th { background: #fbfaff; font-size: max(12px, .7cqw); letter-spacing: .09em; text-transform: uppercase; color: #a4a9bd; font-weight: 700; }
.sh-t-flows .sh-tr { grid-template-columns: 2.4fr .9fr .9fr 1fr .5fr .9fr; }
.sh-t-logs .sh-tr { grid-template-columns: .55fr .9fr 2.2fr .9fr .9fr 1.3fr; }
.sh-strong { font-weight: 600; }
.sh-mute { color: #9aa0b4; }
.sh-tag { display: inline-flex; align-items: center; gap: .32cqw; border-radius: 999px; padding: .3cqw .65cqw; font-size: max(12px, .78cqw); font-weight: 700; }
.sh-tag i { width: .42cqw; height: .42cqw; border-radius: 50%; background: currentColor; flex: none; }
.sh-tag-ok { background: #eafaf0; color: #1a9e50; }
.sh-tag-warn { background: #fef3e2; color: #c9791b; }
.sh-tag-bad { background: #fdeced; color: #d63a4a; }
.sh-tag-draft { background: #f1f1f6; color: #7b8095; }
.sh-act { display: flex; align-items: center; gap: .38cqw; }
.sh-act span { border: 1px solid #eceaf4; border-radius: .38cqw; padding: .32cqw .58cqw; font-size: max(12px, .76cqw); font-weight: 600; color: #5f6479; }
.sh-foot { background: #fbfaff; padding: .75cqw 1cqw; font-size: max(12px, .82cqw); color: #9aa0b4; }

/* --- the flow editor ----------------------------------------------- */
.shot-editor { flex-direction: column; background: #f6f5fb; }
.sh-topbar { flex: none; background: #fff; border-bottom: 1px solid #eceaf4; display: flex; align-items: center; gap: .9cqw; padding: .85cqw 1.2cqw; }
.sh-back { display: inline-flex; align-items: center; gap: .45cqw; border: 1px solid #eceaf4; border-radius: .5cqw; padding: .52cqw .85cqw; font-size: max(12px, .9cqw); font-weight: 600; color: #4a4f66; }
.sh-flowtitle { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, 1.2cqw); border-bottom: 1px solid #eceaf4; padding-bottom: .3cqw; min-width: 15cqw; }
.sh-spacer { flex: 1; }
.sh-toggle { display: inline-flex; align-items: center; gap: .55cqw; border: 1px solid #eceaf4; border-radius: 999px; padding: .4cqw .45cqw .4cqw .9cqw; font-size: max(12px, .92cqw); font-weight: 700; color: #8b90a6; }
.sh-toggle i { width: 2.3cqw; height: 1.25cqw; border-radius: 999px; background: #dcd8e8; position: relative; flex: none; }
.sh-toggle i::after { content: ''; position: absolute; top: .14cqw; left: .14cqw; width: .97cqw; height: .97cqw; border-radius: 50%; background: #fff; }
.sh-toggle.is-on { color: #171B36; }
.sh-toggle.is-on i { background: #7C4DFF; }
.sh-toggle.is-on i::after { left: auto; right: .14cqw; }

.sh-canvas {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  padding-top: .9cqw;
  background-image: radial-gradient(#dcd9ea .09cqw, transparent .09cqw);
  background-size: 1.15cqw 1.15cqw;
}
.sh-status { display: inline-flex; align-items: center; gap: .4cqw; font-size: max(12px, .9cqw); font-weight: 500; margin-bottom: .9cqw; }
.sh-status-ok { color: #1a9e50; }
.sh-status-todo { color: #c9791b; }
.sh-step {
  position: relative; width: 23cqw;
  background: #fff; border: 1px solid #eceaf4; border-radius: .95cqw;
  box-shadow: 0 .45cqw 1.4cqw rgba(23, 49, 102, .06);
  padding: .85cqw 1cqw; display: flex; gap: .8cqw;
}
.sh-step.is-todo { border-style: dashed; border-color: #d9d5e8; box-shadow: none; background: #fcfcfe; }
.sh-step-ico { width: 2.5cqw; height: 2.5cqw; border-radius: .65cqw; flex: none; display: flex; align-items: center; justify-content: center; background: #f4f1fd; }
.sh-step-ico img { width: 1.45cqw; height: 1.45cqw; object-fit: contain; }
.sh-step-ico.is-empty { background: #f3f2f7; color: #b6bac9; font-size: max(12px, 1.1cqw); font-weight: 700; }
/* the card body is spans, so they need telling to stack */
.sh-step > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sh-kind, .sh-step-name, .sh-step-sub, .sh-step-mod { display: block; }
.sh-kind { font-size: max(12px, .7cqw); letter-spacing: .1em; text-transform: uppercase; color: #a4a9bd; font-weight: 700; }
.sh-step-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, 1.05cqw); margin-top: .18cqw; }
.sh-step.is-todo .sh-step-name { color: #a4a9bd; }
.sh-step-sub { font-size: max(12px, .82cqw); color: #8b90a6; margin-top: .22cqw; }
.sh-step-mod { font-size: max(12px, .78cqw); color: #b0b5c7; font-style: italic; margin-top: .12cqw; }
.sh-dot { position: absolute; top: .8cqw; right: .85cqw; width: .55cqw; height: .55cqw; border-radius: 50%; background: #dcd8e8; }
.sh-dot.is-ok { background: #22c55e; }
.sh-join { width: 1px; height: .85cqw; background: #dcd8e8; }
.sh-plus { width: 1.45cqw; height: 1.45cqw; border-radius: 50%; border: 1px solid #dcd8e8; background: #fff; display: flex; align-items: center; justify-content: center; font-size: max(12px, .85cqw); color: #a4a9bd; }
.sh-add { width: 23cqw; border: 1px dashed #cfcbe0; border-radius: .75cqw; padding: .8cqw; text-align: center; font-size: max(12px, .92cqw); font-weight: 600; color: #8b90a6; }
.sh-step-ico svg { width: 1.3cqw; height: 1.3cqw; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-step-ico.is-cond { background: #fef3e2; color: #c9791b; }

/* a condition step forking into two branches, drawn left-to-right —
   same yes/no idea as the hero flow demo, laid out sideways because a
   vertical stack of four steps does not fit this mockup's short canvas */
.sh-canvas-h { flex-direction: row; justify-content: center; padding-top: 0; position: relative; }
.sh-canvas-h .sh-status { position: absolute; top: .9cqw; left: 1.2cqw; margin-bottom: 0; }
.sh-flow { display: flex; align-items: center; gap: 1cqw; }
.sh-hjoin { width: 1.5cqw; height: 1px; background: #dcd8e8; flex: none; position: relative; }
.sh-hjoin::after { content: ''; position: absolute; right: -1px; top: 50%; width: 0; height: 0; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 5px solid #dcd8e8; transform: translateY(-50%); }
.sh-hbranch { display: flex; flex-direction: column; gap: 1.8cqw; border-left: 1px solid #dcd8e8; padding-left: 1cqw; position: relative; }
.sh-hbranch::before { content: ''; position: absolute; left: -.24cqw; top: 50%; width: .48cqw; height: .48cqw; border-radius: 50%; background: #dcd8e8; transform: translate(-50%, -50%); }
.sh-hbranch-row { display: flex; align-items: center; gap: 1.3cqw; }
.sh-branch-tag { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.8cqw; font-size: max(12px, .78cqw); font-weight: 800; letter-spacing: .04em; padding: .18cqw 0; border-radius: 999px; }
.sh-branch-yes { background: #dcf7ee; color: #16A34A; }
.sh-branch-no { background: #e7f3ff; color: #1668c9; }

.slide-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: rgba(23, 27, 54, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
}

/* The dot itself stays a small pill, but the button around it is a full
   tap target — landing.js resizes/recolours .slide-dot-pip, never the
   button, so the hit area never shrinks with it. 46px, not 44, because
   this row sits inside the [data-reveal="zoom"] dashboard showcase, whose
   pre-reveal `scale: .965` (see the scroll-reveal rules above) shrinks
   everything inside it — #slide-prev/#slide-next use the same 46px for
   the same reason. */
.slide-dot {
  flex: none;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.slide-dot-pip {
  display: block;
  height: 9px;
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  transition: width .4s ease, background .4s ease;
}

/* ---------------------------------------------------------------
   Hero flow demo.

   A flow being built and then run: a pointer picks the trigger app,
   a condition splits the flow, and two orders take the two different
   branches. flow-demo.js drives it by toggling the classes below —
   everything visual is a CSS transition, so the timeline lives in one
   file and this one stays declarative.
   --------------------------------------------------------------- */
.demo, .demo * { box-sizing: border-box; }

.demo {
  position: relative;
  width: 100%;
  max-width: 1040px;
  height: 330px;
  margin: 22px auto 0;
  text-align: left;
}

/* --- rails ------------------------------------------------------ */
.demo-rails { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.rail {
  fill: none;
  stroke: #c3b2ef;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .2s ease, stroke .3s ease, stroke-dashoffset .42s ease-out;
}
.rail { opacity: 1; }

/* the branch actually carrying this run lights up solid */
.demo.live-yes #rail-yes { stroke: #16A34A; stroke-width: 2.6; marker-end: url(#arrowYes); }
.demo.live-no #rail-no { stroke: #1668c9; stroke-width: 2.6; marker-end: url(#arrowNo); }

.junction {
  fill: #5B2FE0;
  opacity: 0;
  transition: opacity .3s ease;
}
.junction { opacity: 1; }

.packet {
  fill: #5B2FE0;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(91, 47, 224, .5));
}
.demo.packet-on .packet { opacity: 1; }

.rail-tag {
  position: absolute;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.rail-tag { opacity: 1; transform: none; }
.rail-tag-yes { left: 66%; top: 6%;  background: #dcf7ee; color: #16A34A; }
.rail-tag-no { left: 66%; top: 67%; background: #e7f3ff; color: #1668c9; }

/* --- cards ------------------------------------------------------ */
.demo-card {
  position: absolute;
  background: #fff;
  border: 1.5px solid #ece7fb;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(91, 47, 224, .09);
  padding: 16px 18px;
  transition: opacity .4s ease, transform .4s ease, border-color .3s ease, box-shadow .3s ease;
}
.demo-card.is-live {
  border-color: var(--brand);
  box-shadow: 0 18px 42px rgba(91, 47, 224, .22);
  transform: translateY(calc(-50% - 4px));
}
.demo-card.is-done { border-color: #cfe9d8; }

/* a branch card lights in its branch colour, not the app's — a live Zoho
   step glowing red would read as a failure */
.demo.live-yes .card-yes.is-live {
  border-color: #16A34A;
  box-shadow: 0 18px 42px rgba(22, 163, 74, .20);
}
.demo.live-yes .card-yes.is-live::after {
  background: #16A34A;
  box-shadow: 0 0 0 5px rgba(22, 163, 74, .16);
}
.demo.live-no .card-no.is-live {
  border-color: #1668c9;
  box-shadow: 0 18px 42px rgba(22, 104, 201, .20);
}
.demo.live-no .card-no.is-live::after {
  background: #1668c9;
  box-shadow: 0 0 0 5px rgba(22, 104, 201, .16);
}

.card-trigger { left: 0;     top: 50%; width: 22.7%; }
.card-cond    { left: 35.6%; top: 50%; width: 27.3%; }
/* the branch pair sits wider apart than a even split would give: each
   one carries a status note above it on `bottom: 100%`, and at 25/75
   the note on the lower card landed against the upper card's edge */
.card-yes     { left: 75.5%; top: 20%; width: 24.5%; }
.card-no      { left: 75.5%; top: 80%; width: 24.5%; }
.demo-card { transform: translateY(-50%); }

.demo-kind {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #a49dbe;
}
.demo-head { display: flex; align-items: center; gap: 11px; margin-top: 9px; }

.demo-tile {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1edfd;
  color: #b3a6d8;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 13px;
  transition: background .3s ease, color .3s ease;
}
.demo-tile svg { width: 18px; height: 18px; }
.demo-card.is-filled .demo-tile,
.demo-tile-mono { background: var(--brand); color: #fff; }

.demo-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; color: #171B36; line-height: 1.25; }
.demo-sub { font-size: 12px; color: #767a8c; margin-top: 8px; line-height: 1.45; }

/* each card's own status light */
.demo-card::after {
  content: '';
  position: absolute;
  top: 15px;
  right: 15px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e4dff5;
  transition: background .3s ease, box-shadow .3s ease;
}
.demo-card.is-live::after { background: var(--brand); box-shadow: 0 0 0 5px rgba(91, 47, 224, .14); }
.demo-card.is-done::after { background: #22c55e; }

.demo-opt-more { color: #a49dbe; font-weight: 600; cursor: default; }
.demo-dot-more {
  background: #f1edfd;
  color: #9b8ad0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* --- per-card notes ---------------------------------------------- */
/* each step says what just happened to it, right where it happened */
.demo-note {
  position: absolute;
  left: 18px;
  bottom: 100%;
  margin-bottom: 10px;
  white-space: nowrap;
  background: #f4f0fd;
  color: #5B2FE0;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.32, 1.35, .5, 1);
  pointer-events: none;
}
.demo-note.is-on { opacity: 1; transform: translateY(0); }
.demo-note.tone-yes { background: #dcf7ee; color: #16A34A; }
.demo-note.tone-no { background: #e7f3ff; color: #1668c9; }

/* --- narrow screens: the demo is a desktop-only illustration ------
   The absolute layout (cards positioned by percentage, an SVG connecting
   them) only ever worked at desktop widths. Below 900px it has to fall
   back to a stacked layout that this component was never designed for, so
   rather than keep reshaping it per breakpoint, it's hidden outright —
   it's already aria-hidden (decorative), and the copy above it stands on
   its own. */
@media (max-width: 900px) {
  .demo { display: none; }
  /* Same reasoning as .demo above: the fake wp-admin screenshot (.shot)
     is sized in cqw against a wide aspect-ratio box built for desktop.
     Below 900px its container shrinks well past the point the text and
     icons inside can follow — labels overlap instead of scaling down. */
  .dashboard-shot { display: none; }
  /* Three columns of prose in a fixed-width table read poorly this
     narrow — long words in the third column break mid-word rather than
     wrap cleanly. The heading and lead above it still make the point in
     plain text, so the table itself is dropped rather than reworked into
     a mobile-only layout. */
  .cmp-wrap { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .packet { display: none; }
}

/* ---------------------------------------------------------------
   AI agents section — copy on the left, the real plugin screen on
   the right. Sits between the hero and How it works.
   --------------------------------------------------------------- */
.ai {
  background: var(--bg-tint);
  padding: var(--pad-y) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.ai::before {
  content: '';
  position: absolute;
  top: -160px;
  right: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 47, 224, .09), rgba(91, 47, 224, 0) 70%);
  pointer-events: none;
}

.ai-wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
  gap: 56px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  text-align: left;
}

.ai-eyebrow {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 12.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ai-copy h2 { font-size: 38px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; margin-bottom: 16px; }
.ai-lead { color: var(--ink-soft); font-size: 17px; line-height: 1.65; margin: 0 0 36px; }

/* what the AI actually does */
.ai-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 30px; }
.ai-points li { display: flex; align-items: flex-start; gap: 14px; }
.ai-points b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  color: #171B36;
  margin-bottom: 5px;
}
.ai-points span { font-size: 14px; color: #5B5F73; line-height: 1.6; }

.ai-ico {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.ai-ico-map { background: #efe9fd; color: #5B2FE0; }
.ai-ico-test { background: #dcf5f2; color: #12B5A5; }

/* the panel — a plain-language stand-in for the AI Agents screen */
.ai-shot { margin: 0; }
.ai-panel {
  background: #fff;
  border: 1px solid #ece7fb;
  border-radius: 18px;
  box-shadow: var(--sh-3);
  padding: 26px 28px 28px;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid #f1eefa;
}
.ai-panel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #12B5A5;
  flex: none;
}
.ai-panel-head b { font-family: 'Poppins', sans-serif; font-size: 16px; color: #171B36; }
.ai-panel-where { margin-left: auto; font-size: 12px; color: #9992ad; }

.ai-step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ai-step-n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: #efe9fd;
  color: #5B2FE0;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-step-t { font-family: 'Poppins', sans-serif; font-size: 14.5px; color: #171B36; }

.ai-picks { display: flex; gap: 10px; margin: 0 0 24px 32px; }
.ai-pick {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: 1.5px solid #ece7fb;
  border-radius: 14px;
  padding: 14px 8px 12px;
  background: #fff;
}
.ai-pick-logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: color-mix(in srgb, var(--brand) 14%, #fff);
  color: var(--brand);
}
.ai-pick b { display: block; font-family: 'Poppins', sans-serif; font-size: 13.5px; color: #171B36; }
.ai-pick-tag {
  display: inline-block;
  margin-top: 7px;
  font-size: 12px;
  color: #9992ad;
  background: #f6f4fc;
  border-radius: 999px;
  padding: 3px 10px;
}
.ai-pick.is-on { border-color: #5B2FE0; box-shadow: 0 10px 24px rgba(91, 47, 224, .12); }
.ai-pick.is-on .ai-pick-tag { background: #dcf5f2; color: #0e8d81; font-weight: 600; }

.ai-field { display: flex; align-items: center; gap: 12px; margin: 0 0 10px 32px; }
.ai-field-label { width: 66px; flex: none; font-size: 13px; color: #767a8c; }
.ai-field-box {
  flex: 1;
  min-width: 0;
  border: 1.5px solid #ece7fb;
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 13.5px;
  color: #4a4f66;
  background: #fbfaff;
  letter-spacing: .5px;
}
.ai-field-box em { font-style: normal; float: right; color: #b3aec4; }
.ai-field + .ai-step { margin-top: 24px; }

.ai-btns { display: flex; gap: 10px; margin-left: 32px; }
.ai-btn {
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 18px;
  border: 1.5px solid #ece7fb;
  color: #5B5F73;
}
.ai-btn.is-primary { background: #5B2FE0; border-color: #5B2FE0; color: #fff; }

@media (max-width: 980px) {
  .ai { padding: 64px 24px; }
  .ai-wrap { grid-template-columns: 1fr; gap: 36px; }
  .ai-copy h2 { font-size: 28px; }
}

@media (max-width: 560px) {
  .ai-panel { padding: 20px 18px 22px; }
  .ai-picks { flex-direction: column; }
  .ai-pick { display: flex; align-items: center; gap: 11px; text-align: left; padding: 11px 13px; }
  .ai-pick-logo { margin: 0; }
  .ai-pick-tag { margin: 0 0 0 auto; }
  .ai-picks, .ai-field, .ai-btns { margin-left: 0; }
  .ai-field { flex-direction: column; align-items: stretch; gap: 5px; }
  .ai-field-label { width: auto; }
  .ai-btns { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------
   Hero trust badges.

   The flow demo is capped at 1100px, which leaves a wide empty margin
   either side on large screens. These four round badges fill it with
   the reasons a free WordPress.org user would pay. They only appear
   once there is genuinely room for them — below 1500px the margin is
   too narrow and they would crowd the diagram, so they're hidden.
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   HOW IT WORKS — five steps, each card a plain-language stand-in
   for the screen you actually use in the plugin.
   --------------------------------------------------------------- */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: left;
}
.hiw-step { display: flex; flex-direction: column; }
.hiw-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.hiw-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: none;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--step, #5B2FE0);
}
.hiw-head b { font-family: 'Poppins', sans-serif; font-size: 14px; color: #171B36; }
.hiw-desc { font-size: 12.5px; color: #5B5F73; line-height: 1.55; margin: 0 0 14px; }

/* the mini screen — fixed box so all four match regardless of how much
   text sits above them or how many rows are inside each screen */
.hiw-card {
  width: 100%;
  height: 182px;
  margin-top: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
  padding: 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
}
.hiw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f0edf8;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 12px;
  color: #3d4157;
  background: #fff;
}
.hiw-row.is-on { border-color: #c9b8f5; background: #f7f4ff; font-weight: 600; color: #2f2360; }
.hiw-row b { font-weight: 600; }
.hiw-end { margin-left: auto; font-size: 12px; color: #9992ad; }
.hiw-search {
  border: 1px solid #ddd3f7;
  border-radius: 9px;
  padding: 7px 9px;
  font-size: 12px;
  color: #a49fb5;
  background: #fbfaff;
}
.hiw-map { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3d4157; }
.hiw-map span { flex: 1; min-width: 0; border: 1px solid #f0edf8; border-radius: 8px; padding: 6px 8px; background: #fdfcff; }
.hiw-map i { font-style: normal; color: #b3aec4; flex: none; }
.hiw-tag {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--tag-bg, #efe9fd);
  color: var(--tag-fg, #5B2FE0);
}
.hiw-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: #171B36; }
.hiw-toggle em { font-style: normal; width: 30px; height: 17px; border-radius: 20px; background: #5B2FE0; position: relative; flex: none; }
.hiw-toggle em::after { content: ''; position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.hiw-toggle .hiw-end { color: #5B2FE0; font-weight: 700; }
.hiw-rule { height: 1px; background: #f0edf8; margin: 1px 0; }

@media (max-width: 1100px) {
  .hiw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 640px; }
}
@media (max-width: 560px) {
  .hiw-steps { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   LONG-FORM SECTIONS — integrations, use cases, features,
   comparison and FAQ. Added for search coverage: every one of
   these names a supported plugin, step or question in plain text.
   --------------------------------------------------------------- */

/* integrations */
.int-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 32px; align-items: start; }
.int-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 30px;
  box-shadow: var(--sh-1);
}
.int-box h3 { font-size: 17px; font-weight: 700; margin: 0 0 4px; }
.int-box p { font-size: 13.5px; color: #767a8c; line-height: 1.6; margin: 0 0 18px; }
.int-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.int-list li {
  font-size: 13px;
  color: #3d4157;
  background: #faf9ff;
  border: 1px solid #f0edf8;
  border-radius: 9px;
  padding: 7px 12px;
}
.int-app { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid #f3f1f9; }
.int-app:first-of-type { border-top: 0; padding-top: 4px; }
.int-app b { display: block; font-family: 'Poppins', sans-serif; font-size: 14.5px; color: #171B36; margin-bottom: 3px; }
.int-app span { font-size: 12.5px; color: #767a8c; line-height: 1.55; }
.int-more { display: inline-block; margin-top: 22px; font-size: 14.5px; font-weight: 600; color: #5B2FE0; }

/* use cases */
.uc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.uc {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.uc:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.uc-path { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #5B2FE0; margin-bottom: 10px; }
.uc h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.uc p { font-size: 13.5px; color: #5B5F73; line-height: 1.65; margin: 0; }

/* feature grid */
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; text-align: left; }
.feat {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px 22px;
  box-shadow: var(--sh-1);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feat:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.feat-ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #efe9fd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 13px;
}
.feat h3 { font-size: 15px; font-weight: 700; margin: 0 0 7px; }
.feat p { font-size: 13px; color: #5B5F73; line-height: 1.6; margin: 0; }

/* comparison */
.cmp { width: 100%; border-collapse: collapse; background: var(--bg); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.cmp th, .cmp td { padding: 16px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid #f3f1f9; }
.cmp thead th { background: #faf9ff; font-family: 'Poppins', sans-serif; font-size: 14px; color: #171B36; }
.cmp tbody th { font-weight: 600; color: #171B36; width: 30%; }
.cmp td { color: #5B5F73; }
.cmp .is-us { color: #171B36; font-weight: 600; background: #fcfbff; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.cmp-wrap { overflow-x: auto; }

/* FAQ */
.faq { max-width: 880px; margin: 0 auto; }
.faq details {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.faq details[open] { box-shadow: var(--sh-2); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 22px;
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: #171B36;
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: #5B2FE0;
}
.faq details[open] summary::after { content: '\2013'; }
.faq details[open] summary { color: #5B2FE0; }
.faq-a { padding: 0 22px 20px; font-size: 14.5px; color: #5B5F73; line-height: 1.7; }
.faq-a p { margin: 0 0 10px; }
.faq-a p:last-child { margin-bottom: 0; }

@media (max-width: 1000px) {
  .int-cols { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .uc-grid, .feat-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------
   The hero keeps the same --pad-y rhythm as every section below it,
   so the gap under the sticky bar matches every other section break
   on the page. It used to be pinned to one screenful and centred in
   it, which meant a tall window paid for the lock with a hundred-odd
   pixels of dead space between the bar and the headline. Sized by
   its contents instead, it still fills a laptop screen — and on
   anything taller the next section shows through, which is the
   scroll cue the lock was trying to avoid needing.

   Everything inside is width-based for the same reason: with the
   height no longer fixed, sizing the headline and the diagram in vh
   only made the hero change shape as the window did.
   --------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  padding: var(--pad-y) var(--pad-x);
  text-align: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
/* !important only to beat the inline styles the headline carries */
.hero h1 {
  font-size: clamp(30px, 3.2vw, 46px) !important;
  margin: 0 auto 28px !important;
}
.hero .demo {
  height: clamp(275px, 24vw, 320px);
  margin-top: 28px;
}

/* the way on to the full integrations list */
.hero-more {
  align-self: center;
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 24px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand);
  box-shadow: var(--sh-1);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hero-more:hover {
  color: var(--brand);
  border-color: #C9B8F5;
  box-shadow: var(--sh-2);
}

/* short laptops: the diagram is the first thing that gives ground */
@media (max-height: 720px) {
  .hero .demo-sub { display: none; }
  .hero-more { padding: 10px 20px; font-size: 13.5px; }
}
/* the hero takes the same --pad-y as everything else here (64px), so
   only the headline needs saying */
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(26px, 7vw, 34px) !important; }
}

/* --- the two addresses in the support band ------------------------ */
/* Split by what the mail is about, so a licence question does not land
   in the support queue and a broken flow does not land in sales. */
.mailto-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.mailto {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mailto:hover { border-color: #C9B8F5; box-shadow: var(--sh-1); transform: translateY(-2px); }
.mailto-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: var(--brand-tint);
}
.mailto-ico.is-sales { background: var(--teal-tint); }
.mailto b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.mailto:hover b { color: var(--brand); }
.mailto > span:last-child > span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 4px;
}

@media (max-width: 900px) {
  .mailto-row { grid-template-columns: 1fr; }
}

/* the support band closes the page on the same white as the sections above it */
/* The art was pinned at 340x300 while the copy beside it kept growing,
   so it ended up small and stranded with a band of empty space above and
   below it. Both columns flex now, capped so the pair fills the same
   ~1180px the rest of the page runs to. The SVG has a viewBox, so it
   just scales; aspect-ratio keeps its proportions while it does. */
#support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.support-art {
  flex: 1 1 420px;
  max-width: 500px;
  aspect-ratio: 340 / 300;
}
.support-copy { flex: 1 1 460px; max-width: 580px; }

@media (max-width: 900px) {
  .support-art { flex-basis: 100%; max-width: 420px; }
  .support-copy { flex-basis: 100%; }
}

/* a single soft brand glow, used by the sections that had bespoke
   decorative blobs before. Purely decorative, never interactive. */
.section-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.section-glow::before,
.section-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.section-glow::before {
  top: -180px;
  right: -160px;
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(91, 47, 224, .07), rgba(91, 47, 224, 0) 70%);
}
.section-glow::after {
  bottom: -200px;
  left: -140px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(18, 181, 165, .07), rgba(18, 181, 165, 0) 70%);
}

/* ---------------------------------------------------------------
   Pricing.

   The three tiers differ by one thing only — how many sites the
   licence covers — so the feature list is not repeated in each card.
   It sits once underneath, which keeps the cards to the decision
   being made (how many sites?) and the list to what Pro actually is.

   The cards are flex columns with the button on margin-top:auto, so
   a longer description in one tier cannot leave its button sitting
   lower than its neighbours'.
   --------------------------------------------------------------- */
.billing-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-tint);
  color: var(--brand);
  border: 1px solid #e0d5fa;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 44px;
}

.plans {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto 40px;
}
.plan {
  display: flex;
  flex-direction: column;
  width: 360px;
  flex: 0 1 360px;
  max-width: 380px;
  box-sizing: border-box;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  border-radius: var(--r-xl);
}
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  background: var(--amber);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.plan-badge-alt { background: var(--ink); }
.plan-ico {
  width: 52px;
  height: 52px;
  border-radius: 15px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand), #9B7BF2);
  box-shadow: 0 8px 18px rgba(91, 47, 224, .28);
}
.plan-ico svg { width: 26px; height: 26px; }
.plan-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--brand); }
.plan-covers { font-size: 13px; color: var(--ink-mute); margin: 4px 0 14px; }
.plan-price { border-top: 1px solid var(--line-soft); padding-top: 16px; }
.plan-price b { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: 42px; letter-spacing: -.02em; }
.plan-price i { font-style: normal; font-size: 14px; color: var(--ink-soft); }
.plan-per { font-size: 12.5px; color: var(--ink-mute); margin-top: 7px; }
.plan-per em { font-style: normal; font-weight: 700; color: var(--green); }
.plan-desc { font-size: 13px; line-height: 1.5; color: var(--ink-soft); margin: 16px 0 24px; }
.plan-cta {
  margin-top: auto;
  display: block;
  padding: 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-light), var(--brand-deep));
  box-shadow: 0 10px 22px rgba(91, 47, 224, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plan-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(91, 47, 224, .4);
}

/* --- what every tier gets ----------------------------------------- */
.pro-incl {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 38px 36px;
  text-align: left;
}
.pro-incl-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding-bottom: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}
.pro-incl-head b { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; }
.pro-incl-head span {
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 999px;
}
.pro-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
}
.pro-item { display: flex; align-items: flex-start; gap: 12px; }
.pro-tick {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-tick svg { width: 14px; height: 14px; }
.pro-item b { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14.5px; }
.pro-item > span > span { display: block; font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin-top: 3px; }

@media (max-width: 860px) {
  .pro-incl { padding: 26px 22px 28px; }
  .pro-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* the recommended plan: same geometry as its neighbours, lifted by
   colour and elevation rather than by a different shape */
.plan-featured {
  border-color: var(--brand);
  box-shadow: 0 22px 48px rgba(91, 47, 224, .18);
  z-index: 1;
}
@media (min-width: 861px) {
  .plan-featured { transform: scale(1.045); }
}

/* on a tinted section the card border does the separating, so soften
   the shadow rather than stacking two greys on each other */
.section-tint .uc,
.section-tint .feat,
.section-tint .int-box,
.section-tint .faq details { box-shadow: 0 6px 20px rgba(23, 49, 102, .04); }

/* ---------------------------------------------------------------
   App icons. The real plugin/app artwork, copied from the plugin's
   admin/images folder into images/icons/. Every holder is a neutral
   chip so each brand's own colours read correctly, and every icon is
   object-fit: contain so the non-square ones (WSForm, Google Sheets)
   are letterboxed rather than squashed.
   --------------------------------------------------------------- */
.app-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* hero flow demo */
.demo-tile-img { background: #fff; border: 1px solid var(--line); padding: 5px; box-sizing: border-box; }
.demo-card.is-filled .demo-tile-img { background: #fff; }

/* how-it-works mini screens */
.hiw-dot {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  flex: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 2px;
  box-sizing: border-box;
  display: flex;
}

/* integrations: the three destination rows */
.int-app-ico {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  flex: none;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px;
  box-sizing: border-box;
  display: flex;
}

/* integrations: the 20 trigger chips */
.int-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.int-list .app-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ===============================================================
   CONNECT RAILS — what goes in, what comes out
   Docked to the left and right edges of the screen. The tab runs the
   supported apps' logos down the edge, one after another; the left one
   scrolls slowly because twenty logos do not fit a screen, the right
   one is short enough to sit still.

   Where the pointer can hover, hovering a tab opens the whole list
   beside it, naming what the logos are. There is no
   intermediate step and nothing to click before you can read it.
   The tab is itself a link to the integrations page, which is what a
   tap does where there is no hover to give.

   Below 1100px there is no edge room, so the same markup becomes a
   pair of open cards under the call to action.
   =============================================================== */
.hero-rails {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px auto 0;
  position: relative;
  z-index: 2;
}

.conn { position: relative; }

.conn-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: 16px 12px;
  text-decoration: none;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.conn:focus-within .conn-tab { border-color: #C9B8F5; box-shadow: var(--sh-2); }
.conn-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.conn-cap {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  white-space: nowrap;
}

/* the logos, running downward */
.conn-marquee {
  display: block;
  overflow: hidden;
  height: clamp(160px, 26vh, 300px);
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.conn-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: connScroll 46s linear infinite;
}
.conn-logo {
  width: 34px;
  height: 34px;
  flex: none;
  box-sizing: border-box;
  display: flex;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  box-shadow: var(--sh-1);
}
/* the track holds the list twice, so -50% lands exactly on a repeat */
@keyframes connScroll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.conn:focus-within .conn-track { animation-play-state: paused; }
/* three logos sit still; twenty have to move */
.conn-right .conn-track { animation-duration: 30s; }

/* --- the list, on hover only ------------------------------------- */
.conn-fly {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  padding: 20px 22px;
  width: 440px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease, translate .22s ease;
  z-index: 3;
}
.conn-left  .conn-fly { left: calc(100% + 12px); translate: -8px -50%; }
.conn-right .conn-fly { right: calc(100% + 12px); translate: 8px -50%; }
.conn:focus-within .conn-fly { opacity: 1; visibility: visible; translate: 0 -50%; }

/* The flyout is a hover affordance and nothing else. On a pointer that
   cannot hover, a tap on the tab must not leave a stuck-open panel over
   the hero — the tab is a link to the integrations page, and that is the
   whole interaction there. Keyboard focus still opens it everywhere. */
@media (hover: hover) {
  .conn:hover .conn-tab { border-color: #C9B8F5; box-shadow: var(--sh-2); }
  .conn:hover .conn-track { animation-play-state: paused; }
  .conn:hover .conn-fly { opacity: 1; visibility: visible; translate: 0 -50%; }
}

.conn-fly b {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}
.conn-fly ul {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px;
}
.conn-right .conn-fly ul { grid-template-columns: minmax(0, 1fr); }
.conn-fly li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
}
.conn-fico {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  padding: 3px;
  box-sizing: border-box;
  display: flex;
}
.conn-go {
  display: block;
  border-top: 1px solid var(--line-soft);
  padding: 12px 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--brand);
}
.conn-go:hover { color: var(--accent); }

/* --- docked to the hero's edges ----------------------------------- */
/* Absolute, not fixed: the rails belong to the hero and leave with it.
   Fixed rails kept riding the viewport into the section below, which
   read as a pair of stuck widgets rather than part of the hero. */
@media (min-width: 1100px) {
  .hero-rails {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    translate: 0 -50%;
    margin: 0;
    justify-content: space-between;
    pointer-events: none;
    z-index: 40;
  }
  .conn { pointer-events: auto; }
  .conn-left  .conn-tab { border-left: 0;  border-radius: 0 var(--r-lg) var(--r-lg) 0; }
  .conn-right .conn-tab { border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); }

  /* At this width the flyout is wide enough to sit on top of the flow demo
     (the demo starts too close to the rail for the two to ever clear each
     other horizontally). Dimming the demo while a flyout is open reads as
     an intentional popover; without it, the demo's own cards and connector
     line show through around the flyout's edges and it reads as broken. */
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 30%, transparent);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
    pointer-events: none;
    z-index: 10;
  }
}

@media (min-width: 1100px) and (hover: hover) {
  .hero:has(.conn-left:hover, .conn-right:hover)::after { opacity: 1; visibility: visible; }
}

@media (min-width: 1100px) {
  .hero:has(.conn-left:focus-within, .conn-right:focus-within)::after { opacity: 1; visibility: visible; }
}

/* --- no edge to dock to: hide the rails entirely -------------------
   Below 1100px there's no room to dock the flyout on hover the way
   desktop does. This used to fall back to showing both lists open and
   in-flow above the hero title, but re-flowing the whole hero mid-resize
   read as a popup appearing out of nowhere. Simpler and calmer: the rails
   just aren't there below 1100px — "View all integrations" (rendered
   separately, see home.js) covers the same destination. */
@media (max-width: 1099px) {
  .hero-rails { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .conn-track { animation: none; }
  .conn-fly { transition: opacity .01s; }
}