/* ==========================================================================
   Recurnix - recurnix.com
   Design system. Evolves the existing identity rather than replacing it:
   the indigo-to-cyan gradient, Space Grotesk display and Inter text were
   already the brand, and both fonts are already self-hosted here.
   ========================================================================== */

/* ---------- Fonts (already on disk, variable, latin subset) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');}

/* ---------- Tokens ---------- */
:root{
  --brand-1:#4f46e5;   /* indigo - carried over */
  --brand-2:#0891b2;   /* cyan   - carried over */
  --brand-1-deep:#4338ca;
  --brand-1-soft:#eef2ff;
  --brand-2-soft:#ecfeff;
  --grad:linear-gradient(100deg,var(--brand-1) 0%,var(--brand-2) 100%);
  --grad-soft:linear-gradient(100deg,rgba(79,70,229,.10) 0%,rgba(8,145,178,.10) 100%);

  --bg:#f7f8fc;
  --bg-soft:#eef1f8;
  --surface:#ffffff;
  --surface-2:#fbfcff;
  --border:#e4e9f3;
  --border-strong:#d4dbe9;

  --ink:#0f1731;
  --text:#2b3654;
  --muted:#556179;
  --muted-2:#7c869c;

  --ok:#047857;
  --ok-soft:#ecfdf5;
  --warn:#b45309;
  --err:#b91c1c;

  --font-display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-text:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --space-1:.25rem; --space-2:.5rem; --space-3:1rem; --space-4:1.5rem;
  --space-5:2rem;   --space-6:3rem;  --space-7:4.5rem; --space-8:6.5rem;

  --radius:16px; --radius-sm:10px; --radius-lg:24px; --radius-pill:999px;

  --shadow-sm:0 1px 2px rgba(15,23,49,.06),0 1px 3px rgba(15,23,49,.04);
  --shadow:0 4px 16px rgba(15,23,49,.07),0 1px 3px rgba(15,23,49,.05);
  --shadow-lg:0 18px 48px rgba(15,23,49,.12),0 4px 12px rgba(15,23,49,.06);
  --shadow-brand:0 14px 40px rgba(79,70,229,.24);

  --wrap:1180px;
  --ease:cubic-bezier(.22,.75,.28,1);
  --dur:.55s;
}

/* Dark mode. Contrast targets held: body text 4.5:1+, large text 3:1+. */


/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-text);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-1);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);
  line-height:1.12;letter-spacing:-.022em;margin:0 0 var(--space-3);font-weight:600}
h1{font-size:clamp(2.5rem,6.2vw,4.2rem);letter-spacing:-.035em}
h2{font-size:clamp(1.9rem,3.9vw,2.85rem);letter-spacing:-.028em}
h3{font-size:1.2rem}
p{margin:0 0 var(--space-3)}
ul{margin:0;padding:0;list-style:none}
code,kbd{font-family:var(--font-mono);font-size:.9em}
:focus-visible{outline:3px solid var(--brand-1);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);
  padding:.75rem 1.25rem;border-radius:0 0 var(--radius-sm) 0;z-index:200;font-weight:600}
.skip:focus{left:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.sec{padding:var(--space-8) 0}
.sec-sm{padding:var(--space-7) 0}
.center{text-align:center}
.lede{font-size:1.15rem;color:var(--muted);max-width:62ch}
.center .lede{margin-inline:auto}
.grid{display:grid;gap:var(--space-4)}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g2-7{grid-template-columns:1.15fr .85fr;gap:var(--space-6);align-items:center}
}

/* ---------- Eyebrow / pills ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--font-display);font-size:.76rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--brand-1);
  background:var(--brand-1-soft);border:1px solid var(--border);
  padding:.4rem .85rem;border-radius:var(--radius-pill);margin-bottom:var(--space-3)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--brand-1);
  box-shadow:0 0 0 0 rgba(79,70,229,.55);animation:ping 2.4s var(--ease) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(79,70,229,.5)}70%{box-shadow:0 0 0 9px rgba(79,70,229,0)}100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}}
.tag{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.04em;
  padding:.25rem .6rem;border-radius:var(--radius-pill);
  background:var(--brand-1-soft);color:var(--brand-1);border:1px solid var(--border)}
.tag-ok{background:var(--ok-soft);color:var(--ok)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);font-weight:600;font-size:.98rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-pill);border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
  text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{box-shadow:0 18px 50px rgba(79,70,229,.34)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--brand-1);color:var(--brand-1)}
.btn-lg{padding:1.05rem 2rem;font-size:1.05rem}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.center .btn-row{justify-content:center}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.hdr.stuck{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  min-height:72px}
.brand{display:flex;align-items:center;gap:.65rem;font-family:var(--font-display);
  font-weight:700;font-size:1.22rem;color:var(--ink);letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand .mark{width:34px;height:34px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:1rem;font-weight:700;
  box-shadow:var(--shadow-brand);flex:none}
.nav{display:none;gap:.35rem;align-items:center}
@media(min-width:980px){.nav{display:flex}}
.nav a{color:var(--text);font-weight:500;font-size:.96rem;padding:.5rem .8rem;
  border-radius:var(--radius-sm);transition:color .16s,background .16s}
.nav a:hover{color:var(--ink);background:var(--bg-soft);text-decoration:none}
.nav a[aria-current="page"]{color:var(--brand-1);font-weight:600}
.hdr-cta{display:none;gap:.6rem;align-items:center}
@media(min-width:980px){.hdr-cta{display:flex}}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border-strong);cursor:pointer}
@media(min-width:980px){.burger{display:none}}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.burger span+span{margin-top:4px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobnav{display:none;padding:var(--space-3) 0 var(--space-4);border-top:1px solid var(--border)}
.mobnav.open{display:block}
@media(min-width:980px){.mobnav,.mobnav.open{display:none}}
.mobnav a{display:block;padding:.8rem .25rem;color:var(--text);font-weight:500;
  border-bottom:1px solid var(--border)}
.mobnav .btn-row{margin-top:var(--space-3)}
.mobnav .btn{flex:1}

/* ---------- Hero ---------- */
.hero{position:relative;padding:var(--space-8) 0 var(--space-7);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:-30% -10% auto;height:820px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 46% at 18% 22%,rgba(79,70,229,.22),transparent 62%),
    radial-gradient(40% 40% at 82% 12%,rgba(8,145,178,.20),transparent 60%),
    radial-gradient(38% 38% at 62% 62%,rgba(139,92,246,.14),transparent 62%);
  filter:blur(14px);animation:drift 26s var(--ease) infinite alternate}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-3%,2%,0) scale(1.07)}
  100%{transform:translate3d(3%,-2%,0) scale(1.03)}}
.hero-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(78% 58% at 50% 32%,#000 35%,transparent 78%);
          mask-image:radial-gradient(78% 58% at 50% 32%,#000 35%,transparent 78%)}
.hero h1{margin-bottom:var(--space-4)}
.hero .lede{font-size:1.22rem;margin-bottom:var(--space-5)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-4);box-shadow:var(--shadow-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
  position:relative;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-strong)}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.97rem;margin:0}
.card-lift::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--grad);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.card-lift:hover::before{transform:scaleX(1)}

/* ---------- Animated icon system ----------
   Each icon draws itself when it scrolls into view, then a single element
   keeps a slow ambient motion. Everything here is disabled wholesale by
   prefers-reduced-motion at the bottom of this file. */
.ico{width:46px;height:46px;border-radius:12px;background:var(--brand-1-soft);
  display:grid;place-items:center;margin-bottom:var(--space-3);flex:none;
  border:1px solid var(--border)}
.ico svg{width:24px;height:24px;stroke:var(--brand-1);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ico .draw{stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120)}
.reveal.in .ico .draw{animation:draw 1.15s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.ico .spin{transform-origin:center;animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ico .pulse{animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.06)}}
.ico .bob{animation:bob 3.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.ico .slide{animation:slide 3s var(--ease) infinite}
@keyframes slide{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
.ico-lg{width:58px;height:58px}
.ico-lg svg{width:30px;height:30px}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

/* ---------- Product surface mock ---------- */
.mock{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.mock-bar{display:flex;align-items:center;gap:.45rem;padding:.7rem .9rem;
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong);display:block}
.mock-url{margin-left:.6rem;font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:.2rem .7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock-body{padding:var(--space-4);display:grid;gap:var(--space-3)}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.stat{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:.85rem .95rem}
.stat b{display:block;font-family:var(--font-display);font-size:1.45rem;color:var(--ink);
  letter-spacing:-.02em;line-height:1.15}
.stat span{font-size:.76rem;color:var(--muted);letter-spacing:.02em}
.bars{display:flex;align-items:flex-end;gap:.42rem;height:118px;padding-top:.4rem}
.bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--grad);opacity:.85;
  transform-origin:bottom;transform:scaleY(0)}
.reveal.in .bars i{animation:grow .95s var(--ease) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.rows{display:grid;gap:.5rem}
.row{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.84rem}
.row .who{flex:1;color:var(--text);font-weight:500}
.row .amt{font-family:var(--font-mono);color:var(--ink);font-weight:600}
.row .pill{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:var(--radius-pill);background:var(--ok-soft);color:var(--ok)}
.float{position:absolute;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:.6rem .85rem;
  font-size:.8rem;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:.5rem;
  animation:bob 5s var(--ease) infinite}
.float svg{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.float-a{top:9%;right:-14px;animation-delay:.4s}
.float-b{bottom:12%;left:-18px;animation-delay:1.4s}
@media(max-width:900px){.float{display:none}}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-t{display:flex;gap:.7rem;width:max-content;animation:scrollx 46s linear infinite}
.marquee:hover .marquee-t{animation-play-state:paused}
@keyframes scrollx{to{transform:translateX(-50%)}}
.chip{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-pill);
  padding:.45rem 1rem;font-size:.87rem;color:var(--text);white-space:nowrap;font-weight:500}

/* ---------- Feature split ---------- */
.split{display:grid;gap:var(--space-6);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split.flip .split-media{order:-1}}
.checks li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.75rem;color:var(--text)}
.checks svg{width:20px;height:20px;flex:none;margin-top:2px;stroke:var(--ok);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Stats band ---------- */
.band{background:var(--surface);border-block:1px solid var(--border)}
.band .grid{text-align:center}
.band b{display:block;font-family:var(--font-display);font-size:clamp(2rem,4vw,2.9rem);
  color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.band span{color:var(--muted);font-size:.92rem}

/* ---------- Pricing ---------- */
.price-card{background:var(--surface);border:2px solid var(--brand-1);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.price-card::after{content:"";position:absolute;inset:0;background:var(--grad-soft);z-index:-1}
.price{font-family:var(--font-display);font-size:4rem;color:var(--ink);letter-spacing:-.04em;
  line-height:1;display:flex;align-items:flex-start;gap:.2rem;justify-content:center}
.price sup{font-size:1.5rem;margin-top:.5rem}
.price small{font-size:.95rem;color:var(--muted);font-family:var(--font-text);
  align-self:flex-end;margin-bottom:.7rem;font-weight:400}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
th,td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--border)}
th{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:.85rem;
  letter-spacing:.04em;text-transform:uppercase;background:var(--surface-2)}
td{color:var(--text)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--bg)}
.yes{color:var(--ok);font-weight:600}
.no{color:var(--muted-2)}

/* ---------- Steps ---------- */
.steps{counter-reset:s;display:grid;gap:var(--space-4)}
.step{position:relative;padding-left:3.6rem}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:2.5rem;height:2.5rem;border-radius:12px;background:var(--grad);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:700;
  box-shadow:var(--shadow-brand)}
.step h3{margin-bottom:.35rem}
.step p{color:var(--muted);margin:0}

/* ---------- Code block ---------- */
.code{background:var(--ink);color:#dfe6ff;border-radius:var(--radius);padding:var(--space-4);
  font-family:var(--font-mono);font-size:.86rem;line-height:1.75;overflow-x:auto;
  border:1px solid var(--border-strong)}
.code .c{color:#8ea0c9}
.code .k{color:#7dd3fc}

/* ---------- FAQ ---------- */
details.faq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:0;margin-bottom:.75rem;overflow:hidden;transition:border-color .2s}
details.faq[open]{border-color:var(--brand-1)}
details.faq summary{cursor:pointer;padding:1.1rem 1.3rem;font-family:var(--font-display);
  font-weight:600;color:var(--ink);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s var(--ease);flex:none}
details.faq[open] summary::after{transform:rotate(-135deg)}
details.faq .a{padding:0 1.3rem 1.2rem;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta{position:relative;background:var(--grad);border-radius:var(--radius-lg);
  padding:var(--space-7) var(--space-5);text-align:center;overflow:hidden;
  box-shadow:var(--shadow-lg)}
.cta::before{content:"";position:absolute;inset:0;opacity:.3;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);
          mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.cta > *{position:relative}
.cta h2{color:#fff}
.cta p{color:rgba(255,255,255,.9);max-width:56ch;margin-inline:auto}
.cta .btn-ghost{background:#fff;color:var(--brand-1-deep);border-color:transparent}
.cta .btn-primary{background:rgba(255,255,255,.14);color:#fff;
  border-color:rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(6px)}

/* ---------- Footer ---------- */
.ftr{background:var(--surface);border-top:1px solid var(--border);padding:var(--space-7) 0 var(--space-4);margin-top:var(--space-8)}
.ftr-grid{display:grid;gap:var(--space-5)}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ftr h4{font-family:var(--font-display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);margin:0 0 var(--space-3)}
.ftr li{margin-bottom:.6rem}
.ftr a{color:var(--muted);font-size:.94rem}
.ftr a:hover{color:var(--brand-1)}
.ftr .about{color:var(--muted);font-size:.94rem;max-width:38ch}
.ftr-btm{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:space-between;
  color:var(--muted-2);font-size:.87rem}

/* ---------- Forms ---------- */
.field{margin-bottom:var(--space-3)}
.field label{display:block;font-weight:600;color:var(--ink);font-size:.9rem;margin-bottom:.4rem}
.field input,.field textarea{width:100%;padding:.85rem 1rem;border-radius:var(--radius-sm);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-family:inherit;font-size:1rem}
.field input:focus,.field textarea:focus{border-color:var(--brand-1);outline:none;
  box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.field textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* ---------- Utility ---------- */
.mb-0{margin-bottom:0}
.mt-4{margin-top:var(--space-4)}
.mt-5{margin-top:var(--space-5)}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.mono{font-family:var(--font-mono)}

/* ---------- Motion off ----------
   One switch. Everything above that moves is turned off here, because a
   site that ignores this setting is unusable for people it matters to. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .ico .draw{stroke-dashoffset:0}
  .bars i{transform:scaleY(1)}
  .hero-bg{animation:none}
}
/* ==========================================================================
   SIGNATURE COMPONENTS
   The parts of this site that only make sense for Recurnix.
   ========================================================================== */

/* ---------- The recurrence engine ----------
   A five-station billing cycle drawn as a ring. Payloads travel the ring on
   an offset-path so the loop reads as continuous rather than as a carousel.
   Where offset-path is unsupported the payloads simply do not appear and
   the diagram still reads correctly. */
.engine{position:relative;width:100%;max-width:440px;margin-inline:auto;aspect-ratio:400/340}
.eng-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.eng-flow{stroke-dasharray:14 640;stroke-dashoffset:0;animation:flow 9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-654}}
.eng-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;
  width:44%}
.eng-core-label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);font-weight:600}
.eng-core-val{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--ink);
  letter-spacing:-.02em;line-height:1.2;margin:.15rem 0}
.eng-core-sub{display:block;font-size:.76rem;color:var(--muted)}
.eng-node{position:absolute;transform:translate(-50%,-50%);text-align:center;width:118px}
.eng-node b{display:block;font-family:var(--font-display);font-size:.92rem;color:var(--ink);
  margin-top:.35rem}
.eng-node em{display:block;font-style:normal;font-size:.72rem;color:var(--muted);line-height:1.35}
.eng-dot{display:block;width:13px;height:13px;border-radius:50%;margin:0 auto;
  background:var(--surface);border:2.5px solid var(--brand-1);position:relative}
.eng-dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--brand-1);opacity:0;animation:ring 9s var(--ease) infinite}
.eng-node[data-i="0"] .eng-dot::after{animation-delay:0s}
.eng-node[data-i="1"] .eng-dot::after{animation-delay:1.8s}
.eng-node[data-i="2"] .eng-dot::after{animation-delay:3.6s}
.eng-node[data-i="3"] .eng-dot::after{animation-delay:5.4s}
.eng-node[data-i="4"] .eng-dot::after{animation-delay:7.2s}
@keyframes ring{0%{opacity:.9;transform:scale(.7)}22%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.eng-pays{position:absolute;inset:0}
.eng-pay{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--grad);
  box-shadow:0 0 12px rgba(79,70,229,.7);
  offset-path:path("M200 30 L372 130 L306 300 L94 300 L28 130 Z");
  offset-distance:0%;animation:travel 16s linear infinite}
@supports not (offset-path: path("M0 0")){.eng-pay{display:none}}
@keyframes travel{to{offset-distance:100%}}
@media(max-width:560px){
  .engine{max-width:330px}
  .eng-node{width:86px}
  .eng-node em{display:none}
  .eng-core-val{font-size:1.05rem}
}

/* ---------- Cost curve ---------- */
.calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-lg);max-width:860px;margin-inline:auto}
.calc-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin-bottom:.75rem}
.calc-label{font-family:var(--font-display);font-weight:600;color:var(--ink)}
.calc-out{font-family:var(--font-display);font-size:1.6rem;color:var(--brand-1);
  font-weight:700;letter-spacing:-.02em}
.calc-range{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--brand-1) 0%,var(--brand-1) var(--pct,12%),
  var(--bg-soft) var(--pct,12%),var(--bg-soft) 100%);outline:none;cursor:pointer}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--surface);border:3px solid var(--brand-1);box-shadow:var(--shadow);cursor:grab}
.calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--surface);
  border:3px solid var(--brand-1);box-shadow:var(--shadow);cursor:grab}
.calc-range:focus-visible{outline:3px solid var(--brand-1);outline-offset:6px}
.calc-plot{margin:var(--space-4) 0;height:220px;border-radius:var(--radius);overflow:hidden;
  background:var(--bg);border:1px solid var(--border)}
.calc-plot svg{width:100%;height:100%}
.calc-grid line{stroke:var(--border);stroke-width:1;stroke-dasharray:4 6}
.curve-them{stroke:var(--muted-2);stroke-width:2.5;stroke-linecap:round;
  transition:d .25s var(--ease)}
.curve-us{stroke:var(--brand-1);stroke-width:3;stroke-linecap:round}
.marker{fill:var(--muted-2);stroke:var(--surface);stroke-width:3}
.marker-us{fill:var(--brand-1)}
.calc-legend{display:grid;gap:var(--space-3)}
@media(min-width:700px){.calc-legend{grid-template-columns:repeat(3,1fr)}}
.calc-item{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem 1rem;background:var(--bg);
  border:1px solid var(--border);border-radius:var(--radius-sm)}
.calc-item-us{border-color:var(--brand-1)}
.calc-item-save{border-color:var(--ok)}
.calc-item b{display:block;font-family:var(--font-display);font-size:.82rem;color:var(--muted);
  font-weight:600;letter-spacing:.02em}
.calc-item span:not(.swatch){display:block;font-family:var(--font-display);font-size:1.35rem;
  color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.calc-item em{display:block;font-style:normal;font-size:.75rem;color:var(--muted-2)}
.calc-item-save span:not(.swatch){color:var(--ok)}
.swatch{width:12px;height:12px;border-radius:3px;margin-top:.45rem;flex:none}
.swatch-us{background:var(--brand-1)}
.swatch-them{background:var(--muted-2)}
.swatch-save{background:var(--ok)}

/* ---------- Recursion stack ---------- */
.recur{position:relative}
.recur-stack{display:grid;gap:.9rem}
.recur-layer{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.recur-layer:hover{transform:translateX(6px);box-shadow:var(--shadow)}
.recur-layer b{display:block;font-family:var(--font-display);color:var(--ink);font-size:1.05rem}
.recur-layer em{display:block;font-style:normal;color:var(--muted);font-size:.87rem;margin-top:.15rem}
.recur-tag{display:inline-block;font-family:var(--font-mono);font-size:.72rem;color:var(--brand-1);
  background:var(--brand-1-soft);border-radius:var(--radius-pill);padding:.15rem .6rem;
  margin-bottom:.45rem}
.recur-l2{margin-left:1.5rem;border-color:var(--brand-1)}
.recur-l3{margin-left:3rem;border-color:var(--brand-2)}
.recur-l3 .recur-tag{color:var(--brand-2);background:var(--brand-2-soft)}
.recur-stack::before{content:"";position:absolute;left:.55rem;top:1.5rem;bottom:1.5rem;width:2px;
  background:linear-gradient(180deg,var(--brand-1),var(--brand-2));opacity:.35;border-radius:2px}
@media(max-width:560px){.recur-l2{margin-left:.75rem}.recur-l3{margin-left:1.5rem}}

/* ---------- Live release badge ---------- */
.live{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--muted);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:.35rem .85rem;font-family:var(--font-mono)}
.live .lv-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
  animation:ping 2.4s var(--ease) infinite}
.live[data-state="stale"] .lv-dot{background:var(--muted-2);animation:none}

/* ---------- Animated gradient headline ---------- */
.grad-text{background:linear-gradient(100deg,var(--brand-1) 0%,var(--brand-2) 42%,var(--brand-1) 84%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shift 9s var(--ease) infinite}
@keyframes shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media (prefers-reduced-motion:reduce){
  .eng-flow,.eng-pay,.eng-dot::after,.grad-text{animation:none}
  .eng-flow{stroke-dasharray:none}
  .grad-text{background-position:0 50%}
}
/* ==========================================================================
   CSP-SAFE UTILITIES
   This site runs under style-src 'self'. Inline style attributes are voided
   by that policy, so everything that would have been an inline style lives
   here as a class or an attribute rule instead.
   ========================================================================== */
.overline{letter-spacing:.1em;text-transform:uppercase}
.narrow{max-width:820px;margin-inline:auto}
.narrow-lg{max-width:940px;margin-inline:auto}
.amt-credit{color:var(--ok)}
.row-total{border-color:var(--brand-1)!important}
.row-center{justify-content:center}
.items-start{align-items:start}
.h-sm{font-size:1.5rem}
.w-full{width:100%}
.card-pad{padding:2rem}
.mt-3{margin-top:1rem}

/* Icons: pathLength="100" normalises every path so one rule draws them all. */
.ico .draw{stroke-dasharray:100;stroke-dashoffset:100}
.ico [data-dly="2"]{animation-delay:.3s}
.ico [data-dly="3"]{animation-delay:.6s}
.ico [data-hand]{transform-origin:12px 12px;animation-duration:12s}
.arw{stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Engine station positions, matched to the pentagon vertices inside the
   -40 -30 480 400 viewBox. Percentages keep them locked to the shape at
   every container width. */
.engine{aspect-ratio:480/400}
.eng-node[data-i="0"]{left:50%;top:15%}
.eng-node[data-i="1"]{left:85.8%;top:40%}
.eng-node[data-i="2"]{left:72.1%;top:82.5%}
.eng-node[data-i="3"]{left:27.9%;top:82.5%}
.eng-node[data-i="4"]{left:14.2%;top:40%}
.eng-flow{stroke-dasharray:4 96}
@keyframes flow{to{stroke-dashoffset:-100}}
.eng-payload{filter:drop-shadow(0 0 5px rgba(79,70,229,.8))}

@media (prefers-reduced-motion:reduce){
  .eng-payload{display:none}
  .ico .draw{stroke-dashoffset:0}
}
/* ---------- Engine refinements ----------
   The node box was centred on its vertex, which put the dot above the
   corner and the label below it. Anchor the dot itself on the vertex
   instead and let the label hang beneath. */
.eng-node{transform:translate(-50%,-7px)}
.eng-node[data-i="2"],.eng-node[data-i="3"]{transform:translate(-50%,calc(-100% + 7px))}
.eng-node[data-i="2"] .eng-dot,.eng-node[data-i="3"] .eng-dot{order:2;margin-top:.35rem}
.eng-node[data-i="2"],.eng-node[data-i="3"]{display:flex;flex-direction:column-reverse}
.eng-node[data-i="2"] b,.eng-node[data-i="3"] b{margin-top:0}

/* The dashed track was too quiet to read as a cycle. */
.eng-track{stroke:var(--border-strong);stroke-width:2;opacity:.9}
.eng-flow{stroke-width:3.5}
.eng-dot{width:15px;height:15px;border-width:3px;
  box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(79,70,229,.45)}
.eng-payload{r:6}
/* Bottom stations: label above the dot, but still reading name then note.
   column-reverse also reversed the name and description, so order the
   children explicitly instead. */
.eng-node[data-i="2"],.eng-node[data-i="3"]{display:flex;flex-direction:column}
.eng-node[data-i="2"] .eng-dot,.eng-node[data-i="3"] .eng-dot{order:3;margin-top:.4rem}
.eng-node[data-i="2"] b,.eng-node[data-i="3"] b{order:1;margin-top:0}
.eng-node[data-i="2"] em,.eng-node[data-i="3"] em{order:2}
/* Bottom stations: label above the dot, still reading name then note.
   column-reverse also reversed name and description, so order explicitly. */
.eng-node[data-i="2"],.eng-node[data-i="3"]{display:flex;flex-direction:column}
.eng-node[data-i="2"] .eng-dot,.eng-node[data-i="3"] .eng-dot{order:3;margin-top:.4rem}
.eng-node[data-i="2"] b,.eng-node[data-i="3"] b{order:1;margin-top:0}
.eng-node[data-i="2"] em,.eng-node[data-i="3"] em{order:2}
/* ==========================================================================
   LEGAL PAGES
   Long-form documents need a different rhythm from marketing pages: a
   sticky contents rail, generous measure, and numbered sections that can
   be linked to directly from an email or a support ticket.
   ========================================================================== */
.legal-hero{padding:var(--space-7) 0 var(--space-5);border-bottom:1px solid var(--border);
  background:var(--surface)}
.legal-hero h1{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:var(--space-3)}
.legal-meta{font-size:.87rem;color:var(--muted-2);margin:var(--space-3) 0 0}
.crumbs{font-size:.87rem;color:var(--muted);margin-bottom:var(--space-3)}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-1)}
.crumbs span[aria-hidden]{margin:0 .4rem;color:var(--border-strong)}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

.legal-wrap{display:grid;gap:var(--space-6)}
@media(min-width:1000px){.legal-wrap{grid-template-columns:250px 1fr;align-items:start}}
.legal-toc{display:none}
@media(min-width:1000px){
  .legal-toc{display:block;position:sticky;top:96px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-4);
    max-height:calc(100vh - 130px);overflow-y:auto}
}
.legal-toc-h{font-family:var(--font-display);font-size:.76rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--space-3)}
.legal-toc ol{list-style:decimal;padding-left:1.1rem;margin:0;color:var(--muted-2)}
.legal-toc li{margin-bottom:.5rem;font-size:.87rem}
.legal-toc a{color:var(--text);text-decoration:none}
.legal-toc a:hover{color:var(--brand-1);text-decoration:underline}

.legal-body{max-width:72ch}
.legal-s{margin-bottom:var(--space-5);scroll-margin-top:100px}
.legal-s h2{font-size:1.3rem;margin-bottom:var(--space-3);padding-bottom:.6rem;
  border-bottom:1px solid var(--border)}
.legal-s p{color:var(--text);margin-bottom:var(--space-3)}
.legal-list{list-style:disc;padding-left:1.3rem;margin:0 0 var(--space-3);color:var(--text)}
.legal-list li{margin-bottom:.6rem}
.legal-body table{min-width:0;font-size:.9rem}
.legal-body th,.legal-body td{padding:.7rem .85rem;vertical-align:top}
.legal-foot{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--border)}

/* Facts I could not verify are marked, not invented. They must be visible
   enough that they cannot ship unnoticed. */
.tbd{background:#fff3cd;color:#7a5b00;border:1px dashed #d9a400;border-radius:4px;
  padding:.05rem .4rem;font-size:.92em;font-style:normal}

.ftr-legal{font-weight:600;color:var(--muted)}
.ftr-legal:hover{color:var(--brand-1)}
.ftr-btm{align-items:center}