/* 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, .sh-step-ico svg { 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; }

/* a direct trigger-to-action pair, drawn left-to-right — laid out sideways
   because a vertical stack 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%); }

/* --- app catalog: the "choose a trigger / destination" search screen,
   filling the whole slide edge to edge rather than floating as a modal --- */
.shot-catalog { flex-direction: column; background: #fff; padding: 2.6cqw 2.8cqw; gap: 1.3cqw; }
.sh-picker-head { flex: none; display: flex; align-items: center; gap: 1cqw; }
.sh-picker-search {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .6cqw;
  border: 1.5px solid #e7e3f6; border-radius: 999px;
  padding: .82cqw 1.3cqw; font-size: max(12px, .98cqw); color: #a4a9bd;
}
.sh-picker-search svg { width: 1.05cqw; height: 1.05cqw; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.sh-picker-close { width: 2cqw; height: 2cqw; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #c3c7d6; font-size: max(12px, 1.15cqw); }
.sh-picker-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: .65cqw; }
.sh-picker-tile {
  display: flex; align-items: center; gap: .55cqw;
  border: 1px solid #eceaf4; border-radius: .65cqw;
  padding: .55cqw .7cqw;
  font-size: max(12px, .84cqw); font-weight: 600; color: #171B36;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.sh-picker-tile:hover { border-color: #C9B8F5; box-shadow: 0 .5cqw 1.2cqw rgba(91, 47, 224, .12); transform: translateY(-2px); }
.sh-picker-ico { width: 1.8cqw; height: 1.8cqw; border-radius: .48cqw; flex: none; display: flex; align-items: center; justify-content: center; background: #f4f1fd; }
.sh-picker-ico img, .sh-picker-ico svg { width: 1.1cqw; height: 1.1cqw; object-fit: contain; }
.sh-picker-tile-more { justify-content: center; color: #8b90a6; border-style: dashed; background: #fbfaff; }

/* --- field mapping: the "map once, done" full-page screen ------------ */
.shot-mapping { flex-direction: column; justify-content: center; background: #fff; padding: 1.6cqw 2cqw; gap: 1.1cqw; }
.sh-map-head { flex: none; display: flex; align-items: center; justify-content: center; gap: 1.1cqw; }
.sh-map-source { display: flex; align-items: center; gap: .6cqw; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, 1.05cqw); color: #171B36; background: #f6f5fb; border-radius: .7cqw; padding: .6cqw 1.1cqw; }
.sh-map-app-ico { width: 1.7cqw; height: 1.7cqw; border-radius: .5cqw; background: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.sh-map-app-ico img, .sh-map-app-ico svg { width: 1.15cqw; height: 1.15cqw; object-fit: contain; }
.sh-map-headarrow { color: #a4a9bd; font-size: max(12px, 1.2cqw); }
.sh-map-rows { display: flex; flex-direction: column; gap: .6cqw; max-width: 46cqw; width: 100%; margin: 0 auto; }
.sh-map-row { display: flex; align-items: center; gap: .9cqw; }
.sh-map-chip { flex: 1; min-width: 0; background: #fbfaff; border: 1px solid #eceaf4; border-radius: .6cqw; padding: .62cqw 1cqw; font-size: max(12px, .92cqw); font-weight: 600; color: #4a4f66; }
.sh-map-chip.is-dest { background: #f1edfd; border-color: #e0d6fb; color: #5B2FE0; }
.sh-map-arrow { flex: none; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #f4f1fd; color: #5B2FE0; display: flex; align-items: center; justify-content: center; font-size: max(12px, .85cqw); }
.sh-map-tag { align-self: center; display: inline-flex; align-items: center; gap: .4cqw; background: #eafaf0; color: #1a9e50; font-weight: 700; font-size: max(12px, .85cqw); padding: .4cqw .95cqw; border-radius: 999px; }

/* --- plugin settings shell: tabs instead of a sidebar --------------- */
.shot-settings { flex-direction: column; background: #f6f5fb; }
.sh-tabs { flex: none; background: #fff; border-bottom: 1px solid #eceaf4; display: flex; align-items: center; gap: .3cqw; padding: 0 1.3cqw; }
.sh-tab { padding: 1.05cqw 1.2cqw; font-size: max(12px, .95cqw); font-weight: 700; color: #8b90a6; border-bottom: .18cqw solid transparent; }
.sh-tab.is-on { color: #5B2FE0; border-color: #5B2FE0; }
.sh-tabs-brand { margin-left: auto; display: flex; align-items: center; gap: .5cqw; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: max(12px, .95cqw); color: #171B36; }
.sh-t-plugin-logs .sh-tr { grid-template-columns: .45fr 1.3fr .9fr 1.6fr .9fr 1fr; }
.sh-t-plugin-logs .sh-strong { display: flex; align-items: center; gap: .5cqw; }
.sh-t-plugin-logs .sh-strong img, .sh-t-plugin-logs .sh-strong svg { width: 1.05cqw; height: 1.05cqw; flex: none; }

.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 connection demo.

   One trigger, one destination, one direct connection — no condition,
   no branch. connection-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. Reworked from Flow's flow-demo,
   which animated a WooCommerce -> condition -> two-branch flow; this
   product has no branching, so that's a two-card straight line instead.
   --------------------------------------------------------------- */
.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 one rail there is lights up solid while the packet runs it */
.demo.live-connect #rail-connect { stroke: #5B2FE0; stroke-width: 2.6; marker-end: url(#arrowGo); }

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

/* --- 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; }

.card-trigger { left: 0;     top: 50%; width: 22.7%; }
.card-dest    { left: 75.5%; top: 50%; 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; }
}

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

   The connection 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: 1fr 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;
}
/* 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;
  /* less top/bottom air than the rest of the page's --pad-y rhythm — the
     hero has its own tall stack (h1, lead, CTA, demo, view-all) to fit
     above the fold, so it earns a tighter vertical budget than a section
     that is just a heading and a lead paragraph. The vh half of this
     clamp is deliberately small next to base.css's viewport clamp
     elsewhere — it only lets the hero breathe more on a genuinely tall
     window, so the next section doesn't peek through right under a big
     dead gap. Content itself (h1 size, demo size) stays width-based, per
     the note below, so only the air around it grows with the window. */
  padding: clamp(52px, 8vh, 96px) var(--pad-x);
  text-align: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.hero-h1 {
  margin: 0 auto clamp(16px, 2.4vh, 28px);
  max-width: 900px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hero-lead {
  max-width: 560px;
  margin: 0 auto clamp(22px, 3vh, 34px);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero .demo {
  height: clamp(190px, 16vw, 240px);
  margin-top: clamp(20px, 3vh, 32px);
}

/* the way on to the full integrations list */
.hero-more {
  align-self: center;
  margin-top: clamp(22px, 3vh, 34px);
  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 { padding: 36px var(--pad-x); }
  .hero-h1 { margin-bottom: 12px; }
  .hero-lead { margin-bottom: 16px; }
  .hero .demo { height: clamp(160px, 14vw, 200px); margin-top: 16px; }
  .hero .demo-sub { display: none; }
  .hero-more { margin-top: 16px; padding: 11px 24px; font-size: 14px; }
}
@media (max-width: 700px) {
  .hero { padding: 48px var(--pad-x); }
  .hero-h1 { font-size: clamp(24px, 7vw, 34px); margin-bottom: 16px; line-height: 1.15; }
  .hero-lead { font-size: 15px; margin-bottom: 22px; }
  .hero .demo { height: clamp(220px, 46vw, 260px); margin-top: 18px; }
}

/* --- 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: 344px;
  flex: 0 1 344px;
  max-width: 360px;
  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 {
  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 20 trigger/action 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; }

/* --- 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-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; }
}