/* ==========================================================================
   WPCentrify Design System
   A CentriQor product
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Buttons & links
   6. Navigation
   7. Cards & surfaces
   8. Dark "command center" surfaces
   9. Product mock / dashboard UI
  10. Interactive widgets
  11. Forms
  12. Tables
  13. Footer
  14. Motion & reveal
  15. Utilities
  16. Responsive
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root{
  /* Brand */
  --blue:#3b5bff;
  --blue-d:#2440e0;
  --blue-l:#5d78ff;
  --indigo:#6d5efc;
  --sky:#22b8ff;

  /* Status */
  --emerald:#0fb885;
  --emerald-d:#07805c;
  --amber:#f59e0b;
  --red:#ef4560;

  /* Ink */
  --ink:#0b1226;
  --ink-2:#1c2745;
  --slate:#55618a;
  --dim:#646e88;

  /* Surfaces */
  --bg:#ffffff;
  --bg-2:#f6f8fd;
  --bg-3:#eef3ff;
  --lavender:#f4f1ff;
  --cyan-wash:#eefbff;
  --mint-wash:#edfcf6;
  --rose-wash:#fff2f7;
  --amber-wash:#fff8ec;

  /* Feature surfaces (bright) */
  --night:#eef3ff;
  --night-2:#f6f8fd;
  --night-3:#e4ecff;
  --night-line:#dde5f5;
  --night-line-2:#c9d5ee;
  --night-ink:#0b1226;
  --night-slate:#55618a;

  /* Lines */
  --line:#e6eaf3;
  --line-2:#d5dcec;

  /* Gradients */
  --grad:linear-gradient(100deg,#6d5efc,#3b5bff 52%,#22b8ff);
  --grad-flat:linear-gradient(100deg,#3b5bff,#22b8ff);
  --grad-soft:linear-gradient(135deg,rgba(109,94,252,.12),rgba(34,184,255,.12));

  /* Type */
  --display:"Plus Jakarta Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Radii */
  --r-xs:8px;
  --r-sm:12px;
  --r:16px;
  --r-md:20px;
  --r-lg:26px;
  --r-xl:34px;

  /* Shadows */
  --shadow-xs:0 2px 8px -3px rgba(11,18,38,.10);
  --shadow-sm:0 14px 34px -22px rgba(28,39,69,.32);
  --shadow:0 30px 66px -34px rgba(36,64,224,.30);
  --shadow-lg:0 48px 100px -48px rgba(36,64,224,.42);
  --shadow-night:0 40px 84px -44px rgba(36,64,224,.34);

  /* Spacing rhythm */
  --gutter:24px;
  --sec-y:clamp(52px,6.2vw,92px);
  --max:1200px;
  --max-narrow:800px;
  --measure:832px;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.18s;
  --t:.32s;
  --t-slow:.6s;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  overflow-x:hidden;
  margin:0;
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.68;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-feature-settings:"cv02","cv03","cv04","cv11";
}
img,svg,video{max-width:100%;height:auto;display:block}
/* The hidden attribute must beat component rules that set display (e.g. .btn sets
   display:inline-flex, which would otherwise reveal buttons toggled hidden by JS). */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
ul,ol{padding-left:1.15em}
li{margin:.34em 0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
::selection{background:rgba(59,91,255,.18);color:var(--ink)}
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:#fff;padding:14px 22px;
  border-radius:0 0 var(--r-sm) 0;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4,h5,h6{
  font-family:var(--display);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:700;
  text-wrap:balance;
}
h1,.h1{font-size:clamp(2.3rem,5vw,3.9rem);letter-spacing:-.032em;line-height:1.06;font-weight:800}
h2,.h2{font-size:clamp(1.8rem,3.4vw,2.7rem);letter-spacing:-.026em;line-height:1.14;font-weight:800}
h3,.h3{font-size:clamp(1.18rem,1.85vw,1.45rem);letter-spacing:-.016em;line-height:1.28;font-weight:700}
h4,.h4{font-size:1.06rem;letter-spacing:-.008em;line-height:1.38;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.lead{
  font-size:clamp(1.06rem,1.6vw,1.28rem);
  color:var(--slate);
  line-height:1.62;
  max-width:62ch;
}
.lede-center{margin-left:auto;margin-right:auto;text-align:center}
strong,b{font-weight:650;color:var(--ink)}
a{color:var(--blue-d);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--blue)}
.prose a{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:rgba(59,91,255,.34);
}
.prose a:hover{text-decoration-color:var(--blue)}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding-right:.06em;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);
  font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-d);
  background:var(--bg-3);
  border:1px solid rgba(59,91,255,.16);
  padding:7px 13px;border-radius:999px;
  margin:0 0 18px;
}
.eyebrow.on-night{background:#fff;color:var(--blue-d);border:1px solid var(--line);box-shadow:var(--shadow-xs)}
.eyebrow-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--blue);flex:none;
}
.eyebrow-dot.live{
  background:var(--emerald);
  box-shadow:0 0 0 0 rgba(15,184,133,.55);
  animation:pulse-dot 2.2s infinite;
}
@keyframes pulse-dot{
  70%{box-shadow:0 0 0 8px rgba(15,184,133,0)}
  100%{box-shadow:0 0 0 0 rgba(15,184,133,0)}
}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:-.01em}
.muted{color:var(--slate)}
.small{font-size:.92rem}
.tiny{font-size:.82rem;line-height:1.55}

/* Prose blocks for guides / blog / legal */
.prose{max-width:74ch;font-size:17px;line-height:1.76;color:var(--ink-2)}
.prose h2{margin:2.1em 0 .6em;font-size:clamp(1.5rem,2.6vw,1.95rem)}
.prose h3{margin:1.7em 0 .5em;font-size:1.2rem}
.prose h4{margin:1.5em 0 .4em}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.35em}
.prose li{margin:.42em 0}
.prose li::marker{color:var(--blue)}
.prose blockquote{
  margin:1.6em 0;padding:20px 26px;
  border-left:3px solid var(--blue);
  background:var(--bg-2);
  border-radius:0 var(--r) var(--r) 0;
  color:var(--ink-2);font-size:1.03em;
}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{
  font-family:var(--mono);font-size:.87em;
  background:var(--bg-3);color:var(--blue-d);
  padding:2px 7px;border-radius:6px;
}
.prose img{border-radius:var(--r);border:1px solid var(--line);margin:1.6em 0}
.prose table{margin:1.6em 0}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
/* wrap-narrow / wrap-wide are used both alongside .wrap and on their own, so they
   carry their own centering + gutter rather than relying on .wrap being present. */
/* The narrow tier shares the same box and left edge as the wide tier so every section
   lines up on one grid. Reading content (prose, hero text, generic wrapped blocks) sits
   in a left-aligned measure; modules (FAQ, callout/CTA cards, section heads) stay centered. */
.wrap-narrow{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow>p,
.wrap-narrow>h2,
.wrap-narrow>h3,
.wrap-narrow>h4,
.wrap-narrow>ul,
.wrap-narrow>ol,
.wrap-narrow>.eyebrow,
.wrap-narrow>.lead,
.wrap-narrow>.prose,
.wrap-narrow>.card,
.wrap-narrow>.reveal{max-width:var(--measure);margin-inline:0}
.wrap-narrow>.section-head{max-width:760px;margin-inline:auto}
/* A wrap-narrow nested inside a wrap must not add a second gutter (both are now full width). */
.wrap>.wrap-narrow{max-width:none;padding-inline:0}
.wrap-narrow>.acc,
.wrap-narrow>.night-card,
.wrap-narrow>.center{max-width:var(--measure);margin-inline:auto}
.wrap-wide{width:100%;max-width:1340px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y);position:relative}
.section-sm{padding-block:clamp(44px,5vw,72px)}
.bg-2{background:var(--bg-2)}
.bg-3{background:var(--bg-3)}
.bg-lav{background:var(--lavender)}
.bg-mint{background:var(--mint-wash)}
.section-head{max-width:760px;margin:0 auto clamp(34px,4vw,54px);text-align:center}
.section-head.center{margin-inline:auto;text-align:center}
/* Headings that sit beside content inside a two-column row stay left-aligned. */
.split .section-head,.split-40 .section-head,.split-60 .section-head,
.reveal-l .section-head,.reveal-r .section-head{margin-inline:0;text-align:left}
.section-head p{color:var(--slate);font-size:1.08rem;margin-top:.35em}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
/* split-40 / split-60 are used on their own (not alongside .split), so they carry the
   grid display, gap and alignment themselves rather than relying on .split being present. */
.split-40,.split-60{display:grid;gap:clamp(32px,5vw,72px);align-items:center}
.split-40{grid-template-columns:.85fr 1.15fr}
.split-60{grid-template-columns:1.15fr .85fr}
.stack-sm>*+*{margin-top:10px}
.stack>*+*{margin-top:18px}
.stack-lg>*+*{margin-top:30px}
.row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.row-tight{gap:8px}
.center{text-align:center}
.divider{height:1px;background:var(--line);border:0;margin:0}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);
  font-weight:600;font-size:15.5px;letter-spacing:-.012em;
  padding:14px 24px;border-radius:12px;
  border:1px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
  position:relative;overflow:hidden;
}
.btn svg{flex:none;transition:transform var(--t) var(--ease)}
/* Labels are wrapped in a <span> so they sit above the gradient background. Because
   the global reset sets svg{display:block}, an icon inside that span would drop to its
   own line; making the span an inline flex row keeps label and icon together. */
.btn>span{display:inline-flex;align-items:center;justify-content:center;gap:9px;line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* FIX: the hover overlay used to be an ::after painted ABOVE bare text nodes.
   `.btn-primary>*{z-index:1}` only lifted ELEMENT children (the svg), so any
   label written as a bare text node vanished on hover. Both gradients are now
   background layers on the element itself, cross-faded via background-position,
   so nothing is ever painted over the label. No markup change required. */
.btn-primary{
  color:#fff;
  background-image:linear-gradient(100deg,#5d78ff 0%,#3b5bff 26%,#48c8ff 50%,#3b5bff 74%,#5d78ff 100%);
  background-size:220% 100%;
  background-position:0% 0;
  box-shadow:0 14px 32px -14px rgba(59,91,255,.62);
  transition:transform var(--t-fast) var(--ease),
             box-shadow var(--t) var(--ease),
             background-position .42s var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
}
.btn-primary:hover,.btn-primary:focus-visible{
  color:#fff;
  background-position:100% 0;
  box-shadow:0 20px 44px -14px rgba(59,91,255,.72);
}
.btn-primary::after{content:none}
.btn-primary>*{position:relative;z-index:1}
.btn-primary:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .btn-primary{transition:box-shadow var(--t) var(--ease)}
  .btn-primary:hover{background-position:0% 0}
}
.btn-ghost{
  background:#fff;color:var(--ink);
  border-color:var(--line-2);
  box-shadow:var(--shadow-xs);
}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue-d);box-shadow:0 12px 26px -16px rgba(59,91,255,.5)}
.btn-outline{
  background:transparent;color:var(--ink);border-color:var(--line-2);
}
.btn-outline:hover{border-color:var(--blue);color:var(--blue-d);background:var(--bg-3)}
.btn-night{background:var(--ink);
  color:#fff;border-color:var(--ink);
}
.btn-night:hover{background:var(--ink-2);color:#fff;border-color:var(--ink-2)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 16px 36px -18px rgba(0,0,0,.5)}
.btn-white:hover{color:var(--blue-d)}
.btn-lg{padding:17px 30px;font-size:16.5px;border-radius:14px}
.btn-sm{padding:10px 17px;font-size:14px;border-radius:10px}
.btn-block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{opacity:.5;pointer-events:none}
.link-arrow{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:600;font-size:15px;color:var(--blue-d);
  font-family:var(--display);
}
.link-arrow svg{transition:transform var(--t) var(--ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.cta-note{font-size:13.5px;color:var(--dim);display:flex;align-items:center;gap:7px}
/* .row and .cta-note are flex containers, so text-align:center on them or on an
   ancestor cannot centre their children. Centre the flex line explicitly. */
.row.center{justify-content:center}
.center .cta-note,.section-head.center .cta-note{justify-content:center}
.cta-note svg{color:var(--emerald);flex:none}

/* ==========================================================================
   6. NAVIGATION
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),background var(--t) var(--ease);
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -24px rgba(11,18,38,.5);
}
.scroll-progress{
  position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--grad);z-index:2;
  transition:width .1s linear;
}
.nav{
  display:flex;align-items:center;gap:28px;
  height:70px;
}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.brand svg{width:36px;height:36px;filter:drop-shadow(0 6px 12px rgba(59,91,255,.26))}
.brand-word{
  font-family:var(--display);
  font-size:20.5px;font-weight:700;letter-spacing:-.045em;
  color:var(--ink);white-space:nowrap;
}
.brand-word .c{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav-menu{
  display:flex;align-items:center;gap:4px;
  margin:0;padding:0;list-style:none;flex:1;
}
.nav-menu>li{margin:0;position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 13px;border-radius:9px;
  font-size:15px;font-weight:520;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--bg-2);color:var(--ink)}
.nav-link .chev{transition:transform var(--t) var(--ease);opacity:.6}
.nav-link[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}
.nav-login{
  font-size:15px;font-weight:520;color:var(--ink-2);
  padding:9px 12px;border-radius:9px;
}
.nav-login:hover{background:var(--bg-2);color:var(--ink)}

/* Mega dropdown */
.mega{
  position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(760px,92vw);
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  padding:22px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t);
  z-index:120;
}
.mega.narrow{width:min(430px,92vw)}
.mega.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mega-grid.one{grid-template-columns:1fr}
.mega-item{
  display:flex;gap:12px;padding:11px 12px;border-radius:12px;
  transition:background var(--t-fast) var(--ease);
}
.mega-item:hover{background:var(--bg-2)}
.mega-ico{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:grid;place-items:center;
  background:var(--bg-3);color:var(--blue-d);
}
.mega-item:hover .mega-ico{background:var(--grad);color:#fff}
.mega-item .mega-ico{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.mega-t{display:block;font-family:var(--display);font-weight:620;font-size:14.5px;color:var(--ink);letter-spacing:-.015em;margin-bottom:3px}
.mega-d{display:block;font-size:12.8px;color:var(--slate);line-height:1.45}
.mega-foot{
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.mega-label{
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding:0 12px;margin:8px 0 4px;display:block;
}

/* Mobile nav */
.nav-toggle{
  display:none;width:42px;height:42px;border-radius:11px;
  border:1px solid var(--line-2);
  align-items:center;justify-content:center;flex:none;
  transition:background var(--t-fast) var(--ease);
}
.nav-toggle:hover{background:var(--bg-2)}
.nav-toggle span{
  display:block;width:17px;height:1.8px;background:var(--ink);
  border-radius:2px;position:relative;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:0;width:17px;height:1.8px;
  background:var(--ink);border-radius:2px;
  transition:transform var(--t) var(--ease);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-drawer{
  position:fixed;inset:70px 0 0;z-index:99;
  background:#fff;
  overflow-y:auto;padding:20px var(--gutter) 40px;
  transform:translateX(100%);
  transition:transform var(--t) var(--ease-out);
  visibility:hidden;
}
.mobile-drawer.is-open{transform:translateX(0);visibility:visible}
.m-group{border-bottom:1px solid var(--line);padding:4px 0}
.m-group summary{
  display:flex;justify-content:space-between;align-items:center;
  padding:15px 2px;font-family:var(--display);font-weight:620;font-size:17px;
  color:var(--ink);cursor:pointer;list-style:none;
}
.m-group summary::-webkit-details-marker{display:none}
.m-group summary svg{transition:transform var(--t) var(--ease);opacity:.55}
.m-group[open] summary svg{transform:rotate(180deg)}
.m-links{display:flex;flex-direction:column;gap:2px;padding:0 0 14px}
.m-links a{
  padding:10px 12px;border-radius:10px;font-size:15px;
  color:var(--ink-2);font-weight:500;
}
.m-links a:hover{background:var(--bg-2)}
.m-cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
body.nav-open{overflow:hidden}

/* ==========================================================================
   7. CARDS & SURFACES
   ========================================================================== */
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  position:relative;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.card-hover:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:rgba(59,91,255,.28);
}
.card-pad-sm{padding:20px}
.card-pad-lg{padding:clamp(26px,3vw,40px)}
.card h3{margin-bottom:.4em}
.card p{color:var(--slate);font-size:15.2px}
.card-glow{overflow:hidden}
.card-glow::before{
  content:"";position:absolute;top:-40%;right:-30%;
  width:260px;height:260px;border-radius:50%;
  background:var(--grad-soft);
  filter:blur(40px);opacity:0;
  transition:opacity var(--t-slow) var(--ease);
  pointer-events:none;
}
.card-glow:hover::before{opacity:1}
.card-link{display:block;color:inherit}
.card-link:hover{color:inherit}
.ico{
  width:46px;height:46px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--bg-3);color:var(--blue-d);
  margin-bottom:18px;flex:none;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),transform var(--t) var(--ease);
}
.card-hover:hover .ico{background:var(--grad);color:#fff;transform:scale(1.06) rotate(-4deg)}
.ico-mint{background:var(--mint-wash);color:var(--emerald-d)}
.ico-amber{background:var(--amber-wash);color:#b45309}
.ico-rose{background:var(--rose-wash);color:#be123c}
.ico-lav{background:var(--lavender);color:var(--indigo)}
.ico-cyan{background:var(--cyan-wash);color:#0284c7}
.ico-sm{width:36px;height:36px;border-radius:10px;margin-bottom:12px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:7px;
  background:var(--bg-3);color:var(--blue-d);
}
.badge-mint{background:var(--mint-wash);color:var(--emerald-d)}
.badge-amber{background:var(--amber-wash);color:#b45309}
.badge-rose{background:var(--rose-wash);color:#be123c}
.badge-slate{background:var(--bg-2);color:var(--slate)}
.badge-night{background:#fff;color:var(--blue-d);border:1px solid var(--line)}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  font-size:13.5px;font-weight:520;color:var(--ink-2);
  transition:all var(--t-fast) var(--ease);
}
.pill:hover{border-color:var(--blue);color:var(--blue-d);transform:translateY(-1px)}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{
  display:flex;gap:11px;align-items:flex-start;
  margin:0 0 12px;font-size:15.4px;color:var(--ink-2);line-height:1.55;
}
.check-list li:last-child{margin-bottom:0}
.check-list svg{flex:none;margin-top:4px;color:var(--emerald)}
.check-list.on-night li{color:var(--slate)}
.x-list li svg{color:var(--red)}
.stat-block{display:flex;flex-direction:column;gap:2px}
.stat-num{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  letter-spacing:-.045em;color:var(--ink);line-height:1;
}
.stat-num.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{display:block;font-size:13.5px;color:var(--slate);line-height:1.4;margin-top:6px}


/* --- Section rhythm ------------------------------------------------------
   Two sections sharing a background stack their padding, which reads as a
   dead gap. Collapse the seam so the rhythm stays even.                     */
.section + .section:not(.bg-2):not(.bg-3):not(.night){padding-top:clamp(20px,2.2vw,34px)}
.section.bg-2 + .section.bg-2{padding-top:clamp(20px,2.2vw,34px)}
.section.bg-3 + .section.bg-3{padding-top:clamp(20px,2.2vw,34px)}
.page-head + .section:not(.bg-2):not(.bg-3):not(.night){padding-top:clamp(28px,3vw,46px)}
/* A prose block is narrow, so it needs less vertical air than a card grid. */
.section > .wrap-narrow{padding-block:0}
.prose-sec{padding-block:clamp(36px,4.4vw,62px)}

/* ==========================================================================
   8. FEATURE SURFACES (bright "command center")
   ========================================================================== */
.night{
  background:var(--bg-3);
  color:var(--slate);
  position:relative;
  overflow:hidden;
}
.night::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% 0%,rgba(109,94,252,.16),transparent 62%),
    radial-gradient(820px 460px at 88% 8%,rgba(34,184,255,.15),transparent 62%),
    radial-gradient(600px 400px at 50% 100%,rgba(59,91,255,.10),transparent 66%);
}
.night::after{display:none}
.night>*{position:relative;z-index:1}
.night h1,.night h2,.night h3,.night h4{color:var(--ink)}
.night h1 .grad-text,.night h2 .grad-text,.night h3 .grad-text{color:transparent}
.night .lead,.night p{color:var(--slate)}
.night strong{color:var(--ink)}
.night .section-head p{color:var(--slate)}
.night .divider{background:var(--line)}
.night-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:26px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.night-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:var(--shadow);
}
.night-card h3{color:var(--ink)}
.night-card h3 .grad-text{color:transparent}
.night-card p{color:var(--slate);font-size:15.2px}
.night .ico{background:var(--bg-3);color:var(--blue-d)}
.night-card .ico{background:var(--bg-3);color:var(--blue-d)}
.night-card:hover .ico{background:var(--grad);color:#fff}
.night .stat-num:not(.grad){color:var(--ink)}
.night .stat-label{color:var(--slate)}
.night a:not(.btn){color:var(--blue-d)}
.night a:not(.btn):hover{color:var(--blue)}
.night .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-xs)}
.night .btn-ghost:hover{background:#fff;color:var(--blue-d);border-color:var(--blue-l)}
.night .badge{background:#fff;color:var(--blue-d);border:1px solid var(--line)}
.night .cta-note{color:var(--slate)}

/* ==========================================================================
   9. PRODUCT MOCK / DASHBOARD UI
   ========================================================================== */
.app{
  border-radius:var(--r-lg);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  font-size:13px;
  color:var(--ink-2);
}
.app-light{
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);color:var(--ink-2);
}
.app-bar{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;
  border-bottom:1px solid var(--line);
  background:var(--bg-2);
}
.app-light .app-bar{border-bottom-color:var(--line);background:var(--bg-2)}
.app-dots{display:flex;gap:6px}
.app-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block}
.app-light .app-dots i{background:var(--line-2)}
.app-dots i:first-child{background:#ff5f57}
.app-dots i:nth-child(2){background:#febc2e}
.app-dots i:nth-child(3){background:#28c840}
.app-url{
  flex:1;text-align:center;font-family:var(--mono);font-size:11px;
  color:var(--dim);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-light .app-url{color:var(--dim)}
.app-body{padding:16px}
.app-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
.app-title{
  font-family:var(--display);font-weight:650;font-size:14.5px;
  color:var(--ink);letter-spacing:-.02em;
}
.app-light .app-title{color:var(--ink)}
.app-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
.kpi{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:13px;padding:12px 13px;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.kpi:hover{border-color:var(--line-2);background:var(--bg-3)}
.app-light .kpi{background:var(--bg-2);border-color:var(--line)}
.kpi-l{display:block;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);margin-bottom:6px;
}
.app-light .kpi-l{color:var(--dim)}
.kpi-v{
  font-family:var(--display);font-weight:700;font-size:22px;
  color:var(--ink);letter-spacing:-.035em;line-height:1;
}
.app-light .kpi-v{color:var(--ink)}
.kpi-d{font-size:10.5px;margin-top:5px;display:flex;align-items:center;gap:4px}
.up{color:var(--emerald-d)}
.down{color:#c81e3c}
.flat{color:var(--dim)}

/* Site rows */
.rows{display:flex;flex-direction:column;gap:6px}
.rw{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  gap:10px;align-items:center;
  padding:10px 12px;border-radius:11px;
  background:var(--bg-2);
  border:1px solid var(--line);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.rw:hover{background:var(--bg-2);border-color:var(--line);transform:translateX(3px)}
.app-light .rw{background:var(--bg-2);border-color:var(--line)}
.app-light .rw:hover{background:var(--bg-3)}
.rw-site{display:flex;align-items:center;gap:9px;min-width:0}
.rw-fav{
  width:23px;height:23px;border-radius:7px;flex:none;
  display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:10.5px;color:#fff;
}
.rw-name{display:block;
  font-weight:550;font-size:12.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.app-light .rw-name{color:var(--ink)}
.rw-meta{display:block;font-size:10px;color:var(--dim);font-family:var(--mono)}
.app-light .rw-meta{color:var(--dim)}
.tag{
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;
  padding:3.5px 8px;border-radius:6px;white-space:nowrap;
}
.tag-ok{background:var(--mint-wash);color:var(--emerald-d)}
.tag-warn{background:var(--amber-wash);color:#b45309}
.tag-risk{background:var(--rose-wash);color:#be123c}
.tag-info{background:var(--bg-3);color:var(--blue-d)}
.tag-idle{background:var(--bg-2);color:var(--dim)}
.app-light .tag-ok{background:var(--mint-wash);color:var(--emerald-d)}
.app-light .tag-warn{background:var(--amber-wash);color:#b45309}
.app-light .tag-risk{background:var(--rose-wash);color:#be123c}
.app-light .tag-info{background:var(--bg-3);color:var(--blue-d)}

/* Mini bar chart + sparkline */
.spark{width:100%;height:52px;display:block;overflow:visible}
.spark path{
  stroke-dasharray:var(--len,1000);
  stroke-dashoffset:var(--len,1000);
  transition:stroke-dashoffset 1.8s var(--ease-out);
}
.spark.drawn path{stroke-dashoffset:0}
.bars{display:flex;align-items:flex-end;gap:5px;height:74px}
.bars i{
  flex:1;border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,#6d5efc,#3b5bff);
  height:6%;
  transition:height 1.1s var(--ease-out),opacity var(--t) var(--ease);
  opacity:.85;
}
.bars i:hover{opacity:1}
.bars.grown i{height:var(--h)}

/* Progress ring */
.ring{transform:rotate(-90deg)}
.ring circle{transition:stroke-dashoffset 1.6s var(--ease-out)}

/* ==========================================================================
   10. INTERACTIVE WIDGETS
   ========================================================================== */
/* Tabs */
.tabs{
  display:inline-flex;gap:4px;padding:5px;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;flex-wrap:wrap;
}
.tabs.on-night{background:#fff;border-color:var(--line);box-shadow:var(--shadow-xs)}
.tab{
  padding:9px 17px;border-radius:10px;
  font-family:var(--display);font-weight:600;font-size:14px;
  color:var(--slate);letter-spacing:-.012em;
  transition:all var(--t-fast) var(--ease);
  white-space:nowrap;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:#fff;color:var(--ink);
  box-shadow:0 4px 12px -6px rgba(11,18,38,.28);
}
.tabs.on-night .tab{color:var(--slate)}
.tabs.on-night .tab:hover{color:var(--ink)}
.tabs.on-night .tab[aria-selected="true"]{
  background:var(--grad);color:#fff;box-shadow:0 8px 22px -10px rgba(59,91,255,.7);
}
.tab-panel{display:none;animation:fade-up .5s var(--ease-out)}
.tab-panel.is-active{display:block}
@keyframes fade-up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* Accordion / FAQ */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  display:flex;width:100%;text-align:left;gap:18px;
  align-items:flex-start;justify-content:space-between;
  padding:22px 4px;
  font-family:var(--display);font-weight:620;
  font-size:clamp(16px,1.7vw,18.5px);
  color:var(--ink);letter-spacing:-.02em;line-height:1.4;
  transition:color var(--t-fast) var(--ease);
}
.acc-btn:hover{color:var(--blue-d)}
.acc-ico{
  width:26px;height:26px;flex:none;border-radius:8px;
  background:var(--bg-2);display:grid;place-items:center;
  margin-top:2px;transition:all var(--t) var(--ease);
}
.acc-ico svg{transition:transform var(--t) var(--ease)}
.acc-btn[aria-expanded="true"] .acc-ico{background:var(--grad);color:#fff}
.acc-btn[aria-expanded="true"] .acc-ico svg{transform:rotate(45deg)}
.acc-panel{
  overflow:hidden;height:0;
  transition:height var(--t) var(--ease);
}
.acc-panel-in{padding:0 46px 24px 4px;color:var(--slate);font-size:15.8px;line-height:1.7}
.acc-panel-in p:last-child{margin-bottom:0}
.acc-panel-in a{font-weight:550}

/* Slider control */
.ctrl{margin-bottom:22px}
.ctrl-top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:11px;
}
.ctrl-label{font-size:14.5px;font-weight:560;color:var(--ink-2)}
.ctrl-val{
  font-family:var(--display);font-weight:700;font-size:19px;
  color:var(--blue-d);letter-spacing:-.03em;
}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;border-radius:99px;
  background:var(--line);outline:none;margin:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
  box-shadow:0 4px 14px -4px rgba(59,91,255,.7);
  cursor:grab;transition:transform var(--t-fast) var(--ease);
}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.05)}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);
  box-shadow:0 4px 14px -4px rgba(59,91,255,.7);cursor:grab;
}
.ctrl-scale{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--dim);margin-top:7px;font-family:var(--mono);
}

/* Result panel */
.result{
  background:linear-gradient(165deg,#fff,var(--bg-3));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:28px;
  box-shadow:var(--shadow);
}
.result-hero{text-align:center;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:20px}
.result-big{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.4rem,5vw,3.3rem);line-height:1;
  letter-spacing:-.04em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.result-sub{display:block;font-size:13px;color:var(--slate);margin-top:9px}
.result-rows{display:flex;flex-direction:column;gap:11px}
.result-row{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;font-size:14px;
}
.result-row span:first-child{color:var(--slate)}
.result-row span:last-child{font-family:var(--display);font-weight:640;color:var(--ink)}
.result-row.total{
  border-top:1px solid var(--line);padding-top:13px;margin-top:3px;
}
.result-row.total span:last-child{color:var(--emerald-d)}

/* Pipeline simulator */
.pipe{display:flex;flex-direction:column;gap:0}
.pipe-step{
  display:grid;grid-template-columns:auto 1fr auto;
  gap:15px;align-items:center;
  padding:14px 4px;position:relative;
  opacity:.4;
  transition:opacity var(--t) var(--ease);
}
.pipe-step::before{
  content:"";position:absolute;left:15px;top:calc(50% + 15px);
  width:2px;height:calc(100% - 30px);
  background:var(--line-2);
}
.pipe-step:last-child::before{display:none}
.pipe-step.is-active,.pipe-step.is-done,.pipe-step.is-fail{opacity:1}
.pipe-dot{
  width:32px;height:32px;border-radius:50%;flex:none;
  border:2px solid var(--line-2);
  display:grid;place-items:center;
  background:#fff;
  font-family:var(--mono);font-size:11px;font-weight:700;
  color:var(--dim);
  transition:all var(--t) var(--ease);position:relative;z-index:1;
}
.pipe-step.is-active .pipe-dot{
  border-color:var(--blue);color:#fff;background:var(--blue);
  box-shadow:0 0 0 0 rgba(59,91,255,.5);animation:pulse-ring 1.5s infinite;
}
@keyframes pulse-ring{70%{box-shadow:0 0 0 12px rgba(59,91,255,0)}100%{box-shadow:0 0 0 0 rgba(59,91,255,0)}}
.pipe-step.is-done .pipe-dot{border-color:var(--emerald);background:var(--emerald);color:#fff}
.pipe-step.is-fail .pipe-dot{border-color:var(--red);background:var(--red);color:#fff}
.pipe-t{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.018em}
.pipe-d{display:block;font-size:12.8px;color:var(--slate);margin-top:2px;line-height:1.45}
.pipe-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.pipe-step.is-done .pipe-status{color:var(--emerald-d)}
.pipe-step.is-active .pipe-status{color:var(--blue-d)}
.pipe-step.is-fail .pipe-status{color:var(--red)}
.pipe-step .pipe-status{color:var(--dim)}

/* Toggle switch */
.switch{
  display:inline-flex;align-items:center;gap:11px;
  cursor:pointer;font-size:14.5px;font-weight:540;color:var(--ink-2);
}
.switch-track{
  width:46px;height:26px;border-radius:99px;flex:none;
  background:var(--line-2);position:relative;
  transition:background var(--t) var(--ease);
}
.switch-track::after{
  content:"";position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.22);
  transition:transform var(--t) var(--ease-out);
}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch input:checked+.switch-track{background:var(--grad)}
.switch input:checked+.switch-track::after{transform:translateX(20px)}
.switch input:focus-visible+.switch-track{outline:3px solid var(--blue);outline-offset:3px}

/* Marquee */
.marquee{overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:flex;gap:18px;width:max-content;animation:scroll-x 42s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* Ticker */
.ticker{
  display:flex;align-items:center;gap:12px;
  padding:12px 18px;border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;overflow:hidden;box-shadow:var(--shadow-xs);
}
.ticker-lines{position:relative;height:20px;flex:1;overflow:hidden}
.ticker-line{
  position:absolute;inset:0;
  display:flex;align-items:center;gap:9px;
  opacity:0;transform:translateY(100%);
  transition:opacity .5s var(--ease),transform .5s var(--ease-out);
  white-space:nowrap;
}
.ticker-line.is-in{opacity:1;transform:translateY(0)}
.ticker-line.is-out{opacity:0;transform:translateY(-100%)}

/* Copy button */
.copy-btn{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:12px;
  padding:8px 13px;border-radius:9px;
  border:1px solid var(--line-2);background:#fff;color:var(--slate);
  transition:all var(--t-fast) var(--ease);
}
.copy-btn:hover{border-color:var(--blue);color:var(--blue-d)}
.copy-btn.done{border-color:var(--emerald);color:var(--emerald-d);background:var(--mint-wash)}

/* Checklist tool */
.task{
  display:flex;gap:13px;align-items:flex-start;
  padding:14px 16px;border-radius:13px;
  border:1px solid var(--line);background:#fff;
  transition:all var(--t-fast) var(--ease);cursor:pointer;
  margin-bottom:8px;
}
.task:hover{border-color:var(--blue);background:var(--bg-2)}
.task input{position:absolute;opacity:0;width:0;height:0}
.task-box{
  width:21px;height:21px;border-radius:6px;flex:none;margin-top:2px;
  border:2px solid var(--line-2);
  display:grid;place-items:center;
  transition:all var(--t-fast) var(--ease);
}
.task-box svg{opacity:0;transform:scale(.5);transition:all var(--t) var(--ease-out);color:#fff}
.task input:checked+.task-box{background:var(--grad);border-color:transparent}
.task input:checked+.task-box svg{opacity:1;transform:scale(1)}
.task input:focus-visible+.task-box{outline:3px solid var(--blue);outline-offset:2px}
.task-t{display:block;font-weight:560;font-size:15px;color:var(--ink);line-height:1.4}
.task-d{display:block;font-size:13.4px;color:var(--slate);margin-top:3px;line-height:1.5}
.task input:checked~div .task-t{text-decoration:line-through;color:var(--dim)}
.progress-bar{
  height:9px;border-radius:99px;background:var(--line);
  overflow:hidden;position:relative;
}
.progress-fill{
  height:100%;border-radius:99px;background:var(--grad);
  width:0;transition:width .5s var(--ease-out);
}

/* ==========================================================================
   11. FORMS
   ========================================================================== */
.field{margin-bottom:18px}
.field label,.label{
  display:block;font-size:13.5px;font-weight:600;
  color:var(--ink);margin-bottom:7px;letter-spacing:-.005em;
}
.label .req{color:#c81e3c;margin-left:2px}
.hint{display:block;font-size:12.5px;color:var(--dim);margin-top:6px;line-height:1.5}
.input,.select,.textarea{
  width:100%;
  padding:13px 15px;
  border:1.5px solid var(--line-2);
  border-radius:12px;
  background:#fff;
  font-size:15.5px;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--dim)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(59,91,255,.14);
}
.textarea{min-height:132px;resize:vertical;line-height:1.6}
.select{
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355618a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:42px;cursor:pointer;
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.input.is-error,.select.is-error,.textarea.is-error{border-color:var(--red);box-shadow:0 0 0 4px rgba(239,69,96,.12)}
.err-msg{
  font-size:12.5px;color:var(--red);margin-top:6px;
  display:none;align-items:center;gap:5px;
}
.err-msg.is-shown{display:flex}
.choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 12px;border-radius:12px;
  border:1.5px solid var(--line-2);background:#fff;
  font-size:14.5px;font-weight:550;color:var(--ink-2);
  cursor:pointer;text-align:center;
  transition:all var(--t-fast) var(--ease);
}
.choice span:hover{border-color:var(--blue-l);background:var(--bg-2)}
.choice input:checked+span{
  border-color:var(--blue);background:var(--bg-3);color:var(--blue-d);
  box-shadow:0 0 0 3px rgba(59,91,255,.12);
}
.choice input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13.6px;color:var(--slate);line-height:1.55}
.consent input{
  width:19px;height:19px;flex:none;margin-top:2px;
  accent-color:var(--blue);cursor:pointer;
}
.alert{
  display:flex;gap:13px;align-items:flex-start;
  padding:16px 18px;border-radius:14px;
  font-size:14.6px;line-height:1.55;margin-bottom:22px;
}
.alert svg{flex:none;margin-top:2px}
.alert-ok{background:var(--mint-wash);border:1px solid rgba(15,184,133,.28);color:#065f46}
.alert-err{background:var(--rose-wash);border:1px solid rgba(239,69,96,.26);color:#9f1239}
.alert-info{background:var(--bg-3);border:1px solid rgba(59,91,255,.2);color:var(--blue-d)}

/* Step indicator */
.steps{display:flex;align-items:center;gap:0;margin-bottom:30px}
.step-i{display:flex;align-items:center;gap:10px;flex:1}
.step-i:last-child{flex:none}
.step-n{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;
  background:var(--bg-2);color:var(--dim);
  border:1.5px solid var(--line);
  transition:all var(--t) var(--ease);
}
.step-i.is-on .step-n{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px -8px rgba(59,91,255,.7)}
.step-i.is-done .step-n{background:var(--emerald);color:#fff;border-color:transparent}
.step-t{display:block;font-size:13.4px;font-weight:560;color:var(--dim);white-space:nowrap}
.step-i.is-on .step-t,.step-i.is-done .step-t{color:var(--ink)}
.step-line{flex:1;height:1.5px;background:var(--line);margin:0 12px;transition:background var(--t) var(--ease)}
.step-i.is-done .step-line{background:var(--emerald)}

/* ==========================================================================
   12. TABLES
   ========================================================================== */
.table-wrap{
  overflow-x:auto;border-radius:var(--r-lg);
  border:1px solid var(--line);background:#fff;
  -webkit-overflow-scrolling:touch;
}
table.cmp{width:100%;border-collapse:collapse;font-size:14.8px;min-width:660px}
table.cmp th,table.cmp td{
  padding:15px 18px;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;
}
table.cmp thead th{
  font-family:var(--display);font-weight:650;font-size:14px;
  color:var(--ink);background:var(--bg-2);
  letter-spacing:-.015em;white-space:nowrap;
  position:sticky;top:0;z-index:2;
}
table.cmp thead th.us{
  background:var(--grad);color:#fff;
}
table.cmp tbody tr{transition:background var(--t-fast) var(--ease)}
table.cmp tbody tr:hover{background:var(--bg-2)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child,table.cmp th:first-child{
  font-weight:560;color:var(--ink);
}
table.cmp td.us{background:rgba(59,91,255,.045);font-weight:550;color:var(--ink)}
table.cmp .yes{color:var(--emerald-d);font-weight:600}
table.cmp .no{color:var(--dim)}
table.cmp .partial{color:#b45309}
.cell-ico{display:inline-flex;align-items:center;gap:7px}
.cmp-caption{font-size:12.8px;color:var(--dim);margin-top:12px;line-height:1.6}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:30px;
  display:flex;flex-direction:column;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
  position:relative;
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(59,91,255,.3)}
.plan.featured{
  border-color:transparent;
  box-shadow:var(--shadow-lg);
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  border:2px solid transparent;
}
.plan-flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--grad);color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:6px 15px;border-radius:99px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(59,91,255,.7);
}
.plan-name{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.025em}
.plan-for{display:block;font-size:13.4px;color:var(--slate);margin-top:5px;min-height:40px;line-height:1.5}
.plan-price{display:flex;align-items:baseline;gap:5px;margin:20px 0 4px}
.plan-amt{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.05em;color:var(--ink);line-height:1}
.plan-per{font-size:14px;color:var(--slate)}
.plan-note{font-size:12.8px;color:var(--dim);margin-bottom:22px}
.plan .check-list{margin:22px 0 26px;flex:1}
.plan .check-list li{font-size:14.4px}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer{
  background:var(--bg-2);color:var(--slate);
  border-top:1px solid var(--line);
  padding-top:clamp(56px,7vw,88px);
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 20% 0%,rgba(59,91,255,.07),transparent 62%),
             radial-gradient(600px 300px at 82% 10%,rgba(109,94,252,.06),transparent 62%);
}
.site-footer>*{position:relative;z-index:1}
.foot-top{
  display:grid;grid-template-columns:1.4fr repeat(5,1fr);
  gap:36px 26px;padding-bottom:44px;
}
.foot-brand .brand-word{color:var(--ink)}
.foot-blurb{font-size:14.2px;color:var(--slate);margin:16px 0 20px;max-width:32ch;line-height:1.65}
.foot-h{
  font-family:var(--display);font-weight:650;font-size:13px;
  color:var(--ink);letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:14px;
}
.foot-list{list-style:none;padding:0;margin:0}
.foot-list li{margin:0 0 9px}
.foot-list a{
  font-size:14px;color:var(--slate);
  transition:color var(--t-fast) var(--ease),padding-left var(--t-fast) var(--ease);
  display:inline-block;
}
.foot-list a:hover{color:var(--blue-d);padding-left:3px}
.foot-bar{
  border-top:1px solid var(--line);
  padding:24px 0 30px;
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;font-size:13.4px;
}
.foot-legal{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal a{color:var(--slate)}
.foot-legal a:hover{color:var(--blue-d)}
/* Consent withdrawal has to be as easy as granting it, so the control lives
   permanently in the footer rather than only in the banner. */
.foot-legal-btn{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--slate);
}
.foot-legal-btn:hover{color:var(--blue-d)}

/* Cookie consent bar */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--bg);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px rgba(11,18,38,.09);
  padding:16px clamp(16px,4vw,32px);
}
.cookie-bar[hidden]{display:none}
.cookie-bar-in{
  max-width:1120px;margin-inline:auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,36px);
  flex-wrap:wrap;
}
.cookie-bar-copy{flex:1 1 420px;min-width:0}
.cookie-bar-h{
  font-family:var(--display);font-weight:700;font-size:15px;
  color:var(--ink);margin:0 0 3px;letter-spacing:-.01em;
}
.cookie-bar-copy p{font-size:13.6px;line-height:1.5;color:var(--slate);margin:0}
.cookie-bar-copy a{color:var(--blue-d);text-decoration:underline}
/* Equal prominence: refusing must not be harder than accepting. */
.cookie-bar-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-bar-actions .btn{min-width:132px;justify-content:center}
@media (max-width:640px){
  .cookie-bar-in{flex-direction:column;align-items:stretch}
  /* the 420px basis is a width in the row layout; once the axis flips it
     would become a 420px height, so reset it */
  .cookie-bar-copy{flex:0 1 auto}
  .cookie-bar-actions{width:100%}
  .cookie-bar-actions .btn{flex:1 1 0;min-width:0}
}
.copyright{color:var(--dim)}
.copyright strong{color:var(--ink-2);font-weight:600}
.soc{display:flex;gap:9px}
.soc a{
  width:36px;height:36px;border-radius:10px;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);
  color:var(--slate);
  transition:all var(--t-fast) var(--ease);
}
.soc a:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-2px)}

/* Back to top */
.to-top{
  position:fixed;right:22px;bottom:22px;z-index:90;
  width:46px;height:46px;border-radius:14px;
  background:#fff;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink);
  box-shadow:var(--shadow-sm);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all var(--t) var(--ease);
}
.to-top.is-shown{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--grad);color:#fff;border-color:transparent}

/* ==========================================================================
   14. MOTION & REVEAL
   ========================================================================== */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .68s var(--ease-out),transform .68s var(--ease-out);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal-l{transform:translateX(-30px)}
.reveal-r{transform:translateX(30px)}
.reveal-s{transform:scale(.955)}
[data-stagger]>*{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
[data-stagger].is-in>*{opacity:1;transform:none}
[data-stagger].is-in>*:nth-child(1){transition-delay:.03s}
[data-stagger].is-in>*:nth-child(2){transition-delay:.09s}
[data-stagger].is-in>*:nth-child(3){transition-delay:.15s}
[data-stagger].is-in>*:nth-child(4){transition-delay:.21s}
[data-stagger].is-in>*:nth-child(5){transition-delay:.27s}
[data-stagger].is-in>*:nth-child(6){transition-delay:.33s}
[data-stagger].is-in>*:nth-child(7){transition-delay:.39s}
[data-stagger].is-in>*:nth-child(8){transition-delay:.45s}
@keyframes float-y{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(22px,-18px) scale(1.05)}
  66%{transform:translate(-16px,14px) scale(.97)}
}
.orb{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.55;animation:drift 22s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,[data-stagger]>*{opacity:1 !important;transform:none !important}
  .spark path{stroke-dashoffset:0 !important}
}

/* ==========================================================================
   15. HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--bg);
  padding-block:clamp(56px,7vw,92px) clamp(64px,8vw,110px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 500px at 8% -6%,rgba(109,94,252,.15),transparent 60%),
    radial-gradient(900px 520px at 96% 4%,rgba(34,184,255,.14),transparent 58%),
    radial-gradient(700px 420px at 46% 108%,rgba(59,91,255,.11),transparent 62%);
}

/* Gentle drifting aura on the hero, borrowed motion idea, kept subtle. */
.hero::before{animation:aura-drift 16s ease-in-out infinite alternate}
@keyframes aura-drift{to{transform:translate3d(26px,20px,0) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}

.hero::after{display:none}
.hero>*{position:relative;z-index:1}
.hero h1{color:var(--ink)}
.hero-grid{
  display:grid;grid-template-columns:1.03fr 1.12fr;
  gap:clamp(34px,4.5vw,60px);align-items:center;
}
.hero-lead{
  font-size:clamp(1.04rem,1.55vw,1.22rem);
  color:var(--slate);line-height:1.62;max-width:56ch;margin-bottom:28px;
}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:24px}
.hero-proof{
  display:flex;gap:26px;flex-wrap:wrap;align-items:center;
  padding-top:26px;margin-top:4px;
  border-top:1px solid var(--line);
}
.hero-proof .stat-num{font-size:1.55rem;color:var(--ink)}
.hero-proof .stat-label{font-size:12.4px;color:var(--dim);margin-top:3px}
.hero-app{position:relative;animation:float-y 9s ease-in-out infinite}
.hero-badge{
  position:absolute;z-index:3;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:14px;padding:11px 15px;
  box-shadow:var(--shadow);
  display:flex;align-items:center;gap:11px;
  animation:float-y 7s ease-in-out infinite;
}
.hero-badge-1{right:-14px;top:5%;animation-delay:-2s}
.hero-badge-2{left:-20px;bottom:14%;animation-delay:-4.5s}
.hb-ico{
  width:32px;height:32px;border-radius:9px;flex:none;
  display:grid;place-items:center;
}
.hb-t{display:block;font-family:var(--display);font-weight:640;font-size:12.8px;color:var(--ink);letter-spacing:-.015em}
.hb-d{display:block;font-size:11px;color:var(--dim);margin-top:1px;font-family:var(--mono)}
.logo-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:center;
}
.logo-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:11px;
  background:#fff;
  border:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:14px;
  color:var(--slate);letter-spacing:-.02em;
  transition:all var(--t) var(--ease);
}
.logo-chip:hover{background:#fff;color:var(--blue-d);border-color:var(--line-2);transform:translateY(-2px)}


/* --- Final CTA -----------------------------------------------------------
   A full-bleed gradient wash directly above the footer competes with it.
   Contain the CTA in a card instead: calmer, and it reads as a deliberate
   end-of-page moment rather than another coloured band.                     */
#cta{background:var(--bg-2)}
#cta::before,#cta::after{display:none}
#cta > .wrap > div{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:clamp(40px,5vw,66px) clamp(26px,4vw,58px);
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  max-width:860px !important;
}
#cta > .wrap > div::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);
}
#cta > .wrap > div::after{
  content:"";position:absolute;pointer-events:none;
  width:420px;height:420px;right:-160px;top:-190px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,91,255,.09),transparent 68%);
}
#cta h2,#cta p,#cta .hero-cta,#cta .row,#cta .cta-note,#cta .eyebrow{position:relative;z-index:1}
#cta .eyebrow{background:var(--bg-3);border-color:transparent}
@media (max-width:560px){
  #cta > .wrap > div{padding:34px 22px;border-radius:var(--r-lg)}
}

/* ==========================================================================
   16. UTILITIES
   ========================================================================== */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}
.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:44px}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.w-full{width:100%}
.no-wrap{white-space:nowrap}
.hide{display:none !important}
.relative{position:relative}
.flex-1{flex:1}
.gap-sm{gap:10px}
.text-emerald{color:var(--emerald-d)}
.text-red{color:var(--red)}
.text-amber{color:#b45309}
.breadcrumb{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  font-size:13.2px;color:var(--dim);margin-bottom:22px;
  list-style:none;padding:0;
}
.breadcrumb li{margin:0;display:flex;align-items:center;gap:8px}
.breadcrumb a{color:var(--slate)}
.breadcrumb a:hover{color:var(--blue-d)}
.breadcrumb li[aria-current]{color:var(--ink-2);font-weight:540}
.page-head{
  padding-block:clamp(40px,5vw,64px) clamp(30px,4vw,46px);
  background:linear-gradient(180deg,var(--bg-3),var(--bg));
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.page-head::before{
  content:"";position:absolute;top:-40%;right:-6%;
  width:520px;height:520px;border-radius:50%;
  background:var(--grad-soft);filter:blur(70px);pointer-events:none;
}
.page-head>*{position:relative;z-index:1}
.page-head h1{max-width:20ch}
.page-head .lead{margin-top:14px}
/* Single-column text heros sit in the reading column, left-aligned to the same edge as
   the body content below (prose, card grids, splits) so the whole page shares one edge.
   Heros that pair text with a visual nest the reveal in a split and keep the full width. */
.page-head .wrap .reveal{max-width:var(--measure);margin-inline:0}
.page-head .wrap .reveal h1{max-width:none}
.page-head [class*="split"] .reveal{max-width:none;margin-inline:0}
.page-head [class*="split"] .reveal h1{max-width:20ch}
.toc{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;margin-bottom:34px;
}
.toc-h{
  font-family:var(--display);font-weight:650;font-size:13px;
  text-transform:uppercase;letter-spacing:.09em;
  color:var(--slate);margin-bottom:12px;
}
.toc ol{margin:0;padding-left:1.15em;columns:2;column-gap:30px}
.toc li{margin:.3em 0;font-size:14.4px;break-inside:avoid}
.author-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 0;border-block:1px solid var(--line);
  margin:26px 0 34px;font-size:13.6px;color:var(--slate);
}
.avatar{
  width:40px;height:40px;border-radius:50%;flex:none;
  background:var(--grad);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:14px;color:#fff;
}
.post-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(59,91,255,.28)}
.post-thumb{
  aspect-ratio:16/9;background:var(--grad-soft);
  position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.post-thumb svg{width:100%;height:100%;display:block}
.post-body{padding:22px;display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:1.13rem;margin-bottom:.45em;line-height:1.28}
.post-body p{font-size:14.4px;color:var(--slate);flex:1}
.post-meta{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  font-size:12.4px;color:var(--dim);margin-top:16px;
  font-family:var(--mono);
}
.quote-card{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:28px;
  display:flex;flex-direction:column;height:100%;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.quote-card blockquote{
  margin:0 0 20px;font-size:15.8px;line-height:1.66;
  color:var(--ink-2);flex:1;
}
.quote-card blockquote::before{
  content:"";display:block;width:30px;height:3px;
  background:var(--grad);border-radius:3px;margin-bottom:16px;
}
.who{display:flex;align-items:center;gap:12px}
.who-n{font-family:var(--display);font-weight:640;font-size:14.4px;color:var(--ink);letter-spacing:-.015em}
.who-r{display:block;font-size:12.6px;color:var(--slate);margin-top:1px}
.stars{display:flex;gap:2px;color:var(--amber);margin-bottom:14px}
.placeholder-img{
  background:
    repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 12px,var(--bg-3) 12px,var(--bg-3) 24px);
  border:1px dashed var(--line-2);
  border-radius:var(--r);
  display:grid;place-items:center;
  color:var(--dim);font-family:var(--mono);font-size:12px;
  text-align:center;padding:26px;line-height:1.6;
}
.notice{
  background:var(--amber-wash);
  border:1px solid rgba(245,158,11,.3);
  border-left:3px solid var(--amber);
  border-radius:0 var(--r) var(--r) 0;
  padding:16px 20px;font-size:14.2px;color:#78350f;line-height:1.6;
  margin:22px 0;
}
.notice strong{color:#78350f}

/* ==========================================================================
   17. RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .foot-top{grid-template-columns:repeat(3,1fr);gap:34px 24px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-badge-1{right:0;top:3%}
  .hero-badge-2{left:0;bottom:8%}
  .g-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:960px){
  .nav-menu{display:none}
  .nav-toggle{display:flex}
  .nav-actions .nav-login{display:none}
  .nav{gap:14px}
  .plans{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .split,.split-40,.split-60{grid-template-columns:1fr;gap:34px}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .app-kpis{grid-template-columns:repeat(2,1fr)}
  .toc ol{columns:1}
}
@media (max-width:760px){
  :root{--gutter:18px}
  body{font-size:16px}
  .g-3,.g-5{grid-template-columns:1fr}
  .g-2{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr;gap:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:30px 20px}
  .foot-brand{grid-column:1/-1}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:14px}
  .hero-proof{gap:20px}
  .hero-badge{display:none}
  .card{padding:22px}
  .btn{width:auto}
  .hero-cta .btn{flex:1;min-width:170px}
  .steps .step-t{display:none}
  .step-line{margin:0 8px}
  .acc-panel-in{padding-right:8px}
  .result{padding:22px}
  .to-top{right:14px;bottom:14px;width:42px;height:42px}
  .tabs{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .tab{font-size:13.4px;padding:8px 13px}
  /* Fit the 3-column comparison table within the viewport rather than clipping the
     WPCentrify and ManageWP columns off the right edge. Values wrap; icons top-align. */
  table.cmp{min-width:0;font-size:13.5px}
  table.cmp th,table.cmp td{padding:12px 11px}
  table.cmp thead th{font-size:12.5px}
  table.cmp td:first-child,table.cmp th:first-child{width:46%}
  table.cmp .cell-ico{gap:5px;align-items:flex-start}
  table.cmp .cell-ico svg{margin-top:3px}
}
@media (max-width:520px){
  .g-4{grid-template-columns:1fr}
  .app-kpis{grid-template-columns:repeat(2,1fr)}
  .rw{grid-template-columns:1fr auto;row-gap:7px}
  .foot-top{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .choice-grid{grid-template-columns:1fr 1fr}
}
@media print{
  .site-header,.site-footer,.to-top,.hero-badge{display:none}
  body{color:#000}
}

/* ==========================================================================
   18. WORKFLOW BUILDER (interactive automation preview)
   ========================================================================== */
.wf{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.wf-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:20px 26px;border-bottom:1px solid var(--line);
}
.wf-head h3{font-size:1.08rem;margin:0;letter-spacing:-.02em}
.wf-soon{
  font-family:var(--mono);font-size:10px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  background:var(--grad);color:#fff;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
}
.wf-body{padding:24px 26px 26px}
.wf-l{
  display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  margin:0 0 11px;
}
.chips+.wf-l{margin-top:24px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--body);font-size:14px;font-weight:550;
  padding:10px 17px;border-radius:11px;
  background:#fff;color:var(--ink-2);
  border:1px solid var(--line-2);
  cursor:pointer;white-space:nowrap;
  transition:all var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--blue-l);color:var(--blue-d);transform:translateY(-1px)}
.chip[aria-pressed="true"]{
  border-color:var(--blue);color:var(--blue-d);
  background:var(--bg-3);
  box-shadow:0 0 0 3px rgba(59,91,255,.12);
}
.chip:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.flow{
  display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;
  align-items:stretch;gap:0;margin-top:26px;
}
.node{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:18px 20px;text-align:center;
  transition:all var(--t) var(--ease);
}
.node .nlabel{display:block;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:7px;
}
.node .ntitle{
  font-family:var(--display);font-weight:650;font-size:15px;
  color:var(--ink);letter-spacing:-.02em;line-height:1.3;
}
.node.mid{
  background:var(--grad);border-color:transparent;
  box-shadow:0 18px 38px -20px rgba(36,64,224,.6);
}
.node.mid .nlabel{color:rgba(255,255,255,.78)}
.node.mid .ntitle{color:#fff}
.node.swap{animation:node-pop .34s var(--ease-out)}
@keyframes node-pop{0%{transform:scale(.96);opacity:.4}100%{transform:scale(1);opacity:1}}
.conn{
  position:relative;min-width:56px;align-self:center;height:2px;
  background:linear-gradient(90deg,var(--line-2),var(--blue-l));
}
/* The dot travels the length of the connector rather than sitting at its
   midpoint. left:0 -> left:100% with the -50%,-50% translate puts the dot
   centred on each end exactly, whatever width the grid gives the connector. */
.conn::after{
  content:"";position:absolute;top:50%;left:0;
  width:9px;height:9px;border-radius:50%;background:var(--blue);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 4px rgba(59,91,255,.15),0 0 9px rgba(59,91,255,.5);
  animation:conn-dot 1.6s linear infinite;
}
@keyframes conn-dot{
  0%{left:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:100%;opacity:0}
}
/* Product screenshots framed in the same browser chrome as the built mockups,
   so a real capture and a hand-built mockup read as one system. */
.shots{display:grid;gap:38px;margin-top:32px;align-items:start}
/* Two captures sit side by side once there is room for both to stay legible.
   Their aspect ratios differ, so the columns are top-aligned rather than
   stretched: distorting a screenshot to square off a grid is not worth it. */
@media (min-width:1040px){
  .shots-pair{grid-template-columns:1fr 1fr;gap:30px 28px}
  /* The two captures have different aspect ratios, which would leave one
     caption floating half a frame above the other. Rather than distort either
     image, the frames share a height and the shorter one is letterboxed in the
     screenshots' own background colour, so it reads as margin, not as a gap. */
  .shots-pair .shot picture{
    display:grid;place-items:center;
    aspect-ratio:1197/758;background:#f5f7fc;
  }
  .shots-pair .shot img{width:auto;height:auto;max-width:100%;max-height:100%}
}
/* grid items default to min-width:auto, which would let the frame grow to fit
   a wide screenshot instead of scrolling it */
.shot{margin:0;min-width:0}
.shot .app{overflow:hidden;min-width:0;max-width:100%;transition:box-shadow var(--t) var(--ease)}
.shot:hover .app{box-shadow:var(--shadow-lg,var(--shadow))}
.shot picture{display:block}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{
  margin-top:22px;font-size:13.6px;line-height:1.65;color:var(--slate);
  max-width:64ch;
}
/* Featured partner card (partners page) */
.feat-card{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl,22px);
  overflow:hidden;box-shadow:var(--shadow-sm);margin-top:26px;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease);
}
.feat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.feat-media{position:relative;overflow:hidden;background:var(--bg-2);min-height:100%}
.feat-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform .5s var(--ease)}
.feat-card:hover .feat-media img{transform:scale(1.03)}
.feat-body{padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;align-items:flex-start}
.feat-tag{
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue-d);background:var(--bg-3);border-radius:999px;padding:5px 12px;
}
.feat-body h3{font-size:clamp(1.2rem,2.2vw,1.55rem);margin:14px 0 8px;letter-spacing:-.01em}
.feat-body>p{color:var(--slate);font-size:14.5px;line-height:1.62;margin:0 0 16px}
.feat-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px;padding:0}
.feat-chips li{
  font-size:12px;font-weight:600;color:var(--ink-2);
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;
}
.feat-card .link-arrow{margin-top:auto}
@media (max-width:820px){
  .feat-card{grid-template-columns:1fr}
  .feat-media{min-height:0;aspect-ratio:1400/677}
}
.shot figcaption b{
  display:block;margin-bottom:5px;
  font-family:var(--display);font-size:14.6px;font-weight:650;
  color:var(--ink);letter-spacing:-.01em;
}
@media (max-width:760px){
  /* A full dashboard capture is unreadable scaled to a phone width, so the
     frame scrolls horizontally instead and the screenshot keeps a legible
     size. Scoped to the frame, so the page itself never scrolls sideways. */
  .shot .app{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot img{min-width:660px}
  .shot .app-bar{position:sticky;left:0}
}
@media (max-width:640px){
  .shots{gap:28px}
  .shot figcaption{font-size:13px}
}

.wf-note{
  font-size:12.8px;color:var(--dim);margin:20px 0 0;line-height:1.55;font-style:italic;
}

.recipes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.recipe{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;box-shadow:var(--shadow-sm);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.recipe:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.recipe-tag{
  display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--bg-3);color:var(--blue-d);
  padding:5px 11px;border-radius:999px;margin-bottom:16px;
}
.rflow{display:flex;flex-direction:column;align-items:stretch}
.rnode{
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;
  font-size:13.6px;color:var(--ink-2);text-align:center;font-weight:520;
}
.rnode.hl{background:var(--grad);border-color:transparent;color:#fff;font-weight:600}
.rconn{
  width:2px;height:16px;margin:0 auto;position:relative;
  background:linear-gradient(180deg,var(--line-2),var(--blue-l));
}
.rconn::after{
  content:"";position:absolute;top:0;left:50%;
  width:7px;height:7px;border-radius:50%;background:var(--blue);
  transform:translate(-50%,-50%);
  box-shadow:0 0 7px rgba(59,91,255,.45);
  animation:rconn-dot 1.6s linear infinite;
}
@keyframes rconn-dot{
  0%{top:0;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{top:100%;opacity:0}
}
@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:0}
  .conn{width:2px;height:22px;min-width:0;margin:0 auto;
        background:linear-gradient(180deg,var(--line-2),var(--blue-l))}
  /* the connector is vertical here, so the dot must travel down, not across */
  .conn::after{left:50%;top:0;animation-name:rconn-dot}
  .recipes{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .node.swap{animation:none}
  /* park the dot at the midpoint instead of animating it */
  .conn::after{animation:none;left:50%;opacity:1}
  .rconn::after{animation:none;top:50%;opacity:1}
}

@media (max-width:520px){
  .nav-actions .btn{padding:9px 14px;font-size:13.4px}
  .brand-word{font-size:1.02rem}
}
@media (max-width:430px){
  /* The drawer carries the same CTA, so drop the duplicate rather than
     letting the header overflow. */
  .nav-actions .btn-primary{display:none}
  .nav-actions{gap:6px}
}

/* The off-canvas drawer is fixed at translateX(100%) when closed, which
   fixed positioning keeps outside the body's overflow clip. `clip` on the
   root contains it without disabling position:sticky (unlike `hidden`).   */
html{overflow-x:clip}
.mobile-drawer:not(.is-open){pointer-events:none}
.m-cta{margin-bottom:18px}

/* ==========================================================================
   19. CHARTS
   ========================================================================== */
.chart-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);box-shadow:var(--shadow-sm);
}
.chart-head{margin-bottom:22px}
.chart-title{font-family:var(--display);font-weight:700;font-size:1.14rem;color:var(--ink);letter-spacing:-.018em}
.chart-sub{display:block;font-size:13.6px;color:var(--slate);margin-top:5px;line-height:1.5}
.chart-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px}
.lg{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--slate)}
.lg i{width:11px;height:11px;border-radius:3px;flex:none;display:block}
.chart-svg{width:100%;height:auto;display:block;overflow:visible}
.chart-note{font-size:12.6px;color:var(--dim);margin-top:16px;line-height:1.55}
/* Grid, axes and labels */
.c-grid{stroke:var(--line);stroke-width:1}
.c-axis{stroke:var(--line-2);stroke-width:1.5}
.c-lbl{font-family:var(--body);font-size:11.5px;fill:var(--dim)}
.c-lbl-b{font-family:var(--display);font-size:12px;font-weight:650;fill:var(--ink-2)}
/* Animated bars: grow from the baseline once the chart scrolls into view */
.c-bar{transform-origin:bottom;transform:scaleY(0);transition:transform .85s var(--ease-out)}
.is-in .c-bar,.chart-card.is-in .c-bar{transform:scaleY(1)}
.c-bar:nth-of-type(2){transition-delay:.09s}
.c-bar:nth-of-type(3){transition-delay:.18s}
.c-bar:nth-of-type(4){transition-delay:.27s}
/* Animated line/area */
.c-line{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.5s var(--ease-out)}
.is-in .c-line{stroke-dashoffset:0}
.c-area{opacity:0;transition:opacity .9s var(--ease-out) .4s}
.is-in .c-area{opacity:1}
.c-dot{opacity:0;transition:opacity .4s var(--ease-out)}
.is-in .c-dot{opacity:1}
.c-dot:nth-of-type(2){transition-delay:.5s}.c-dot:nth-of-type(3){transition-delay:.7s}
.c-dot:nth-of-type(4){transition-delay:.9s}.c-dot:nth-of-type(5){transition-delay:1.1s}
/* Interactive line-chart hover: crosshair, active data points and tooltip */
.c-cross{stroke:var(--line-2);stroke-width:1;stroke-dasharray:4 4;opacity:0;pointer-events:none;transition:opacity .15s var(--ease)}
.c-cross.show{opacity:.55}
.c-dot{transition:opacity .4s var(--ease-out),r .16s var(--ease),stroke-width .16s var(--ease)}
.c-dot.is-active{r:6.4;stroke-width:3.3;transition-delay:0s}
.c-hit{cursor:crosshair}
.chart-tip{
  position:absolute;top:6px;left:0;z-index:6;pointer-events:none;
  transform:translateX(-50%) translateY(4px);
  background:var(--ink);color:#fff;border-radius:11px;padding:9px 12px;
  font-size:12.5px;line-height:1.35;white-space:nowrap;box-shadow:var(--shadow);
  opacity:0;transition:opacity .15s var(--ease),transform .15s var(--ease)}
.chart-tip.show{opacity:1;transform:translateX(-50%) translateY(0)}
.chart-tip .ct-lbl{display:block;font-family:var(--display);font-weight:700;font-size:12.8px;margin-bottom:6px}
.chart-tip .ct-row{display:flex;align-items:center;gap:7px;margin-top:3px}
.chart-tip .ct-row i{width:9px;height:9px;border-radius:3px;flex:none}
.chart-tip .ct-row .ct-name{color:rgba(255,255,255,.72);margin-right:16px}
.chart-tip .ct-row b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:650;color:#fff}
/* Subtle hover feedback on bar and band charts (values are already labelled) */
.c-bar:hover{filter:brightness(1.07) saturate(1.04)}
/* Horizontal band chart */
.c-band{transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease-out),filter .15s var(--ease)}
.is-in .c-band{transform:scaleX(1)}
.c-band:hover{filter:brightness(1.07)}
.c-band:nth-of-type(2){transition-delay:.1s}.c-band:nth-of-type(3){transition-delay:.2s}
.c-band:nth-of-type(4){transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .c-bar,.c-band{transform:none;transition:none}
  .c-line{stroke-dashoffset:0;transition:none}
  .c-area,.c-dot{opacity:1;transition:none}
}
@media (max-width:560px){
  .chart-legend{gap:12px}
  .lg{font-size:12.2px}
}

/* Charts scale their whole viewBox down on narrow screens, which shrinks label
   text below legibility. Scale the SVG type up to compensate. */
@media (max-width:620px){
  .c-lbl{font-size:21px}
  .c-lbl-b{font-size:23px}
}
@media (max-width:430px){
  .c-lbl{font-size:26px}
  .c-lbl-b{font-size:28px}
  .chart-card{padding:20px 16px}
}

/* --- Reveal robustness ---------------------------------------------------
   .reveal starts at opacity:0, so if JavaScript never runs the page would be
   blank. Two fallbacks: no JS at all shows everything immediately, and JS that
   loaded but never initialised (script error, blocked CDN) reveals after a
   short delay. Once main.js marks the document ready the failsafe selector
   stops matching and normal scroll reveal takes over.                        */
html:not(.js) .reveal,
html:not(.js) [data-stagger] > *{opacity:1 !important;transform:none !important}
html.js:not(.js-ready) .reveal,
html.js:not(.js-ready) [data-stagger] > *{animation:reveal-failsafe 0s linear 2.5s forwards}
@keyframes reveal-failsafe{to{opacity:1;transform:none}}
html:not(.js) .bars i{height:var(--h)}
html:not(.js) .spark path{stroke-dashoffset:0}
html:not(.js) .c-bar,html:not(.js) .c-band{transform:none}
html:not(.js) .c-line{stroke-dashoffset:0}
html:not(.js) .c-area,html:not(.js) .c-dot{opacity:1}