/* ============================================================
   Propeoll — design system
   Tokens follow the house DESIGN.md rhythm: one accent colour,
   hairline dividers, alternating light / dark full-bleed tiles,
   elevation used only where a surface must lift.
   ============================================================ */

/* ---------- 1. Tokens ------------------------------------- */
:root{
  /* brand */
  --brand:#5A4BE8;
  --brand-deep:#4436C7;
  --brand-press:#392CAB;
  --brand-soft:#EFEDFF;
  --brand-soft-2:#E1DDFF;
  --brand-on-dark:#A79BFF;

  /* ink & surface */
  --ink:#0E1116;
  --ink-2:#3A4048;
  --muted:#6B7280;
  --muted-2:#9AA1AC;
  --paper:#FFFFFF;
  --paper-2:#F7F7F5;
  --paper-3:#F0F0EE;
  --pearl:#FBFBFA;
  --dark:#12101C;
  --dark-2:#1A1729;
  --dark-3:#221E36;

  /* lines */
  --line:#E6E6E3;
  --line-2:#D5D5D1;
  --line-dark:rgba(255,255,255,.12);

  /* data semantics */
  --pos:#0E7C57;
  --pos-soft:#E4F4ED;
  --warn:#A8690B;
  --warn-soft:#FBF0DC;
  --neg:#C0392B;
  --neg-soft:#FBEAE7;

  /* type */
  --fs:"SF Pro Text",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  --fd:"SF Pro Display",-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Inter,"Helvetica Neue",Arial,sans-serif;
  --fm:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* geometry */
  --r-xs:6px; --r-sm:9px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sp-xs:8px; --sp-sm:12px; --sp-md:17px; --sp-lg:24px; --sp-xl:32px; --sp-2xl:48px; --sp-sec:96px;
  --wrap:1680px;
  --shadow:0 3px 30px rgba(14,17,22,.10);
  --shadow-lift:0 12px 44px rgba(14,17,22,.14);
  --nav-h:64px;
}

/* ---------- 2. Reset -------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--fs);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. Typography --------------------------------- */
.h1{font-family:var(--fd);font-size:clamp(40px,6.2vw,68px);font-weight:600;line-height:1.03;letter-spacing:-.032em}
.h2{font-family:var(--fd);font-size:clamp(30px,4.2vw,46px);font-weight:600;line-height:1.08;letter-spacing:-.026em}
.h3{font-family:var(--fd);font-size:clamp(22px,2.6vw,28px);font-weight:600;line-height:1.18;letter-spacing:-.02em}
.h4{font-family:var(--fd);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.lead{font-family:var(--fd);font-size:clamp(18px,2.1vw,22px);font-weight:400;line-height:1.45;letter-spacing:-.012em;color:var(--ink-2)}
.body{font-size:17px;line-height:1.6;color:var(--ink-2)}
.small{font-size:15px;line-height:1.55;color:var(--muted)}
.fine{font-size:13px;line-height:1.5;color:var(--muted)}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.mono{font-family:var(--fm);font-size:.92em;letter-spacing:0}
.accent{color:var(--brand)}
.dim{color:var(--muted)}
.nowrap{white-space:nowrap}

/* ---------- 4. Layout ------------------------------------- */
.wrap{width:min(90%,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(90%,880px);margin-inline:auto}
.sec{padding:var(--sp-sec) 0}
.sec-sm{padding:64px 0}
/* a section that is meant to land whole */
.sec-fold{padding-top:clamp(38px,5vh,64px);padding-bottom:clamp(38px,5vh,64px)}
.sec-fold .sec-head{margin-bottom:var(--sp-lg)}
.sec-head{max-width:820px;margin-bottom:var(--sp-2xl)}
/* .center on the block itself only centred the text; the 820px box still sat
   left. This centres the box too, wherever the class is used. */
.sec-head.center{margin-inline:auto}
/* wider head, for a headline that must hold one line */
.sec-head.wide{max-width:1000px}
.sec-head .h2{margin:14px 0 16px}
.center{text-align:center}
.center .sec-head{margin-inline:auto}
.grid{display:grid;gap:var(--sp-lg)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
/* The hero gives its product side a little more room than a straight half.
   Scoped to wide screens: unscoped, its specificity would beat the
   single-column rule in the narrow media queries below. */
@media (min-width:981px){
  .hero .split{grid-template-columns:1.15fr 1fr}
}
.stack>*+*{margin-top:var(--sp-md)}
.hr{border:0;border-top:1px solid var(--line);margin:0}

/* tone surfaces */
.tone-paper{background:var(--paper)}
.tone-parch{background:var(--paper-2)}
.tone-brand{background:var(--brand-soft)}
.tone-dark{background:var(--dark);color:#fff}
.tone-dark .h1,.tone-dark .h2,.tone-dark .h3,.tone-dark .h4{color:#fff}
.tone-dark .lead,.tone-dark .body{color:#C9C6D6}
.tone-dark .small,.tone-dark .fine{color:#9C98AE}
.tone-dark .eyebrow{color:var(--brand-on-dark)}
.tone-dark a{color:var(--brand-on-dark)}
.tone-dark .hr{border-color:var(--line-dark)}

/* ---------- 5. Buttons ------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;border-radius:var(--r-pill);
  padding:12px 24px;font-size:16px;font-weight:500;letter-spacing:-.01em;cursor:pointer;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.tone-dark .btn-ghost,.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.tone-dark .btn-ghost:hover,.cta-band .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--paper-3)}
.btn-sm{padding:9px 18px;font-size:15px}
.btn-lg{padding:15px 30px;font-size:17px}
.link-arrow{display:inline-flex;align-items:center;gap:5px;font-weight:500;color:var(--brand)}
.link-arrow::after{content:"›";font-size:1.25em;line-height:1;transition:transform .18s ease}
.link-arrow:hover{text-decoration:none}
.link-arrow:hover::after{transform:translateX(3px)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------- 6. Chips & pills ------------------------------ */
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--paper-2);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--ink-2)}
.chip-brand{background:var(--brand-soft);border-color:var(--brand-soft-2);color:var(--brand-deep)}
.tone-dark .chip{background:rgba(255,255,255,.07);border-color:var(--line-dark);color:#D6D3E2}
.dot{width:7px;height:7px;border-radius:50%;background:var(--pos);flex:none}
.dot-live{box-shadow:0 0 0 0 rgba(14,124,87,.5);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(14,124,87,0)}100%{box-shadow:0 0 0 0 rgba(14,124,87,0)}}
.tag{display:inline-block;padding:3px 9px;border-radius:var(--r-xs);font-size:12px;font-weight:600;letter-spacing:-.01em}
.tag-pos{background:var(--pos-soft);color:var(--pos)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-neg{background:var(--neg-soft);color:var(--neg)}
.tag-brand{background:var(--brand-soft);color:var(--brand-deep)}

/* ---------- 7. Nav ---------------------------------------- */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line)}
/* At the top of the page the bar merges into the section beneath it. The
   backdrop and the rule only appear once something has scrolled under it, so
   the scoping to .js keeps the plain bar for a browser that never toggles. */
.js .nav{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease}
.js .nav.stuck{background:rgba(255,255,255,.82);border-bottom-color:var(--line);
  backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px)}
.nav-in{display:flex;align-items:center;gap:var(--sp-xl);height:100%}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand svg{width:30px;height:30px}
.brand-word{font-family:var(--fd);font-size:21px;font-weight:600;letter-spacing:-.035em}
.brand-word i{font-style:normal;color:var(--brand)}
.nav-links{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav-links a:not(.btn){font-size:15px;color:var(--ink-2);font-weight:450}
.nav-links a:not(.btn):hover{color:var(--ink);text-decoration:none}
.nav-links a.on:not(.btn){color:var(--brand)}
.nav-cta{margin-left:8px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.burger svg{width:22px;height:22px}
.mobile{display:none;border-bottom:1px solid var(--line);background:#fff}
.mobile.open{display:block}
.mobile ul{padding:12px 0 20px}
.mobile a:not(.btn){display:block;padding:12px 0;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line)}
.mobile .btn{margin-top:16px;width:100%;justify-content:center}

/* ---------- 8. Hero --------------------------------------- */
/* The bar is see-through until the page scrolls, so the hero is pulled up
   underneath it and pads itself clear again. That way the gradient runs behind
   the bar and the two read as one surface, with no seam at the nav's height. */
.hero{margin-top:calc(-1 * var(--nav-h));
  padding:calc(clamp(56px,8vw,96px) + var(--nav-h)) 0 clamp(48px,7vw,80px);background:
  radial-gradient(760px 520px at 82% -6%,rgba(124,109,240,.20) 0%,rgba(124,109,240,0) 62%),
  radial-gradient(620px 420px at 6% 8%,rgba(56,152,248,.10) 0%,rgba(56,152,248,0) 66%),
  radial-gradient(900px 500px at 50% 104%,rgba(214,72,190,.055) 0%,rgba(214,72,190,0) 70%),
  var(--paper)}
.hero .h1{margin:22px 0 24px;font-size:clamp(44px,6.1vw,84px);line-height:1.0;
  letter-spacing:-.038em;text-wrap:balance}
.hero .lead{max-width:50ch}
.hero .chip{padding:7px 15px 7px 12px;font-size:13.5px}

/* three facts under the call to action, in place of a single grey line */
.hero-proof{display:flex;flex-wrap:wrap;gap:12px 34px;margin-top:38px;padding-top:26px;
  border-top:1px solid var(--line);list-style:none}
.hero-proof li{display:flex;flex-direction:column;gap:3px}
.hero-proof b{font-family:var(--fd);font-size:19px;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.hero-proof span{font-size:13px;color:var(--muted)}
.hero .btn-row{margin-top:var(--sp-xl)}
.hero-note{margin-top:24px;display:flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)}

/* The hero is meant to land whole, without scrolling. Below 981px it stacks
   and that is no longer possible, so the constraint only applies above it. */
@media (min-width:981px){
  /* the hero reaches under the bar, so the fold is the full viewport */
  .hero{display:flex;align-items:center;min-height:100svh;
    padding-top:calc(clamp(18px,3.4vh,56px) + var(--nav-h));
    padding-bottom:clamp(18px,3.4vh,56px)}
  .hero > .wrap{width:min(90%,var(--wrap))}
  .shot{display:flex;justify-content:center}
  /* leave room for the rail, the arrow and the hero's own padding */
  .shot img{width:auto;height:auto;max-width:100%;
    max-height:calc(100svh - var(--nav-h) - 286px)}
  .rail{margin-top:56px}
}
/* short laptops: the headline stays large, and the room comes off the
   spacing around it, so the hero still lands inside one fold */
@media (min-width:981px) and (max-height:820px){
  .hero .h1{font-size:clamp(38px,5.3vw,64px);margin:16px 0 18px}
  .hero .lead{font-size:16.5px;line-height:1.5}
  .hero .btn-lg{padding:12px 24px;font-size:16px}
  .hero .btn-row{margin-top:22px}
  .hero-proof{margin-top:22px;padding-top:16px;gap:9px 26px}
  .hero-proof b{font-size:17px}
  .rail{margin-top:44px;padding:12px}
}

/* ---------- 9. Cards -------------------------------------- */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.card-flat{background:var(--paper-2);border-color:transparent}
.card .h4{margin-bottom:8px}
.tone-dark .card{background:var(--dark-2);border-color:var(--line-dark)}
.tone-parch .card{background:#fff}
.card-hover{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.card-hover:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.icon{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-deep);margin-bottom:16px}
.icon svg{width:19px;height:19px}
.tone-dark .icon{background:rgba(167,155,255,.16);color:var(--brand-on-dark)}

/* owner questions (the solution) */
.qmark{width:34px;height:34px;border-radius:50%;background:var(--brand-soft);color:var(--brand-deep);
  display:grid;place-items:center;font-family:var(--fd);font-size:19px;font-weight:600;
  line-height:1;margin-bottom:15px}
.qgrid .h4{margin-bottom:9px}
.qnote{max-width:720px;margin:34px auto 0;text-align:center;font-family:var(--fd);
  font-size:clamp(17px,1.9vw,20px);line-height:1.45;letter-spacing:-.012em;color:var(--ink-2)}
@media (max-width:760px){
  .qnote{margin-top:26px;text-align:left}
}

/* numbered steps */
.step-n{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-family:var(--fd);font-size:15px;font-weight:600;margin-bottom:16px}
.tone-dark .step-n{background:var(--brand);color:#fff}

/* stat band */
.stat{padding:6px 0}
.stat b{display:block;font-family:var(--fd);font-size:clamp(38px,5vw,56px);font-weight:600;line-height:1;letter-spacing:-.035em}
.stat span{display:block;margin-top:10px;font-size:15px;color:var(--muted)}
.tone-dark .stat span{color:#9C98AE}

/* ---------- 10. Product mock (dashboard) ------------------ */
.mock{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.mock-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--pearl)}
.mock-title{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mock-body{padding:18px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.kpi{background:#fff;padding:14px 15px}
.kpi u{display:block;text-decoration:none;font-size:12px;color:var(--muted);letter-spacing:.02em}
.kpi b{display:block;font-family:var(--fd);font-size:23px;font-weight:600;letter-spacing:-.025em;margin:5px 0 4px}
.kpi i{font-style:normal;font-size:12px;color:var(--muted)}
.bars{margin-top:16px;display:grid;gap:11px}
.bar-row{display:grid;grid-template-columns:110px 1fr 46px;align-items:center;gap:12px;font-size:13px}
.bar-row span:first-child{color:var(--ink-2)}
.bar{height:7px;border-radius:var(--r-pill);background:var(--paper-3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--brand);
  width:var(--w,50%);animation:grow 1.1s cubic-bezier(.22,1,.36,1) both}
.bar.pos i{background:var(--pos)} .bar.warn i{background:var(--warn)}
.bar-row b{font-family:var(--fd);font-weight:600;font-size:13px;text-align:right;letter-spacing:-.01em}
@keyframes grow{from{width:0}}
@media (prefers-reduced-motion:reduce){.bar i{animation:none}}

/* hero product card */
.hero-visual{position:relative}
.headline-figure{padding:4px 2px 18px}
.headline-figure u{display:block;text-decoration:none;font-size:12px;letter-spacing:.03em;color:var(--muted)}
.headline-figure b{display:flex;align-items:baseline;gap:12px;font-family:var(--fd);font-size:40px;font-weight:600;letter-spacing:-.035em;margin-top:6px;line-height:1}
.headline-figure em{font-style:normal;font-size:15px;font-weight:600;color:var(--pos);background:var(--pos-soft);padding:4px 10px;border-radius:var(--r-pill);letter-spacing:-.01em}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.quad>div{background:#fff;padding:13px 14px}
.quad u{display:block;text-decoration:none;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.quad b{display:block;font-family:var(--fd);font-size:19px;font-weight:600;letter-spacing:-.02em;margin:5px 0 3px}
.quad i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.excluded{display:flex;gap:13px;align-items:flex-start;margin-top:16px;padding:14px 15px;
  border-radius:var(--r-md);background:var(--neg-soft);border:1px solid rgba(192,57,43,.16)}
.excluded .tag{flex:none;margin-top:1px}
.excluded p{font-size:13px;line-height:1.45;color:#7C2F26}
.excluded b{font-family:var(--fd);font-weight:600}
/* a second card peeking out behind, for depth only */

/* data table */
.dt{font-size:14px}
.dt th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--line)}
.dt td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
/* columns sat flush against each other once a table carried more than three
   of them, so headings and values ran together */
.dt th + th,.dt td + td{padding-left:16px}
/* a fourth column does not survive a phone; the state is a nicety next to the
   two figures, so it is the one that goes */
@media (max-width:640px){
  .dt .col-state{display:none}
}
.dt tr:last-child td{border-bottom:0}
.dt .num{text-align:right;font-family:var(--fd);font-weight:600;color:var(--ink);letter-spacing:-.015em}
.dt-foot{display:flex;justify-content:space-between;gap:12px;padding-top:12px;font-size:13px;color:var(--muted)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- hero product image ---------------------------- */
/* The render is cut out to its own tilted shape, so there is no card around
   it. The shadow is a filter rather than a box-shadow so it follows the
   alpha channel instead of a rectangle. */
.shot{margin:0;position:relative}
.shot img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 20px 38px rgba(14,17,22,.17)) drop-shadow(0 3px 9px rgba(14,17,22,.07));
  animation:shot-float 7s ease-in-out infinite}
@keyframes shot-float{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-11px) rotate(-.25deg)}
}
/* a slow wash behind it, so the whole corner feels awake rather than static */
.shot::before{content:"";position:absolute;inset:6% 4% 10% 6%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(90,75,232,.16),rgba(90,75,232,0) 72%);
  filter:blur(6px);animation:shot-glow 7s ease-in-out infinite}
@keyframes shot-glow{
  0%,100%{opacity:.55;transform:scale(1)}
  50%{opacity:.9;transform:scale(1.06)}
}
@media (max-width:620px){
  .shot img{filter:drop-shadow(0 12px 24px rgba(14,17,22,.15))}
}

/* ---------- budget burn chart ---------------------------- *
 * Drawn fully visible by default. The reveal animation is layered on only
 * under .js, so if animations never run the chart is still a chart rather
 * than an empty box. */
.burn{display:block;width:100%;height:auto}
.bn-axis{stroke:var(--line);stroke-width:1.5}
.bn-budget{stroke:var(--neg);stroke-width:2;stroke-dasharray:6 5;opacity:.85}
.bn-line{fill:none;stroke:var(--brand);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bn-fill{fill:var(--brand);opacity:.10}
.bn-dot{fill:var(--brand)}
.bn-unknown{fill:var(--paper-3);stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:5 5}
.bn-q{font-family:var(--fd);font-size:42px;font-weight:600;fill:var(--muted-2);text-anchor:middle}
.bn-cap{font-family:var(--fs);font-size:11.5px;fill:var(--muted)}
.bn-mid{text-anchor:middle}
.bn-now{font-family:var(--fd);font-weight:600;font-size:13px;fill:var(--ink)}
.bn-today{fill:var(--ink-2);font-weight:600;text-anchor:middle}

/* Scoped to .reveal.in, so the hidden starting state only ever exists once
   the card is on screen and about to animate. Until then the chart carries
   its plain visible styles, which is what a browser with no JS, or with
   animations suppressed, will show. */
.js .reveal.in .bn-line{stroke-dasharray:420;stroke-dashoffset:420;
  animation:bn-draw 1.7s cubic-bezier(.4,0,.3,1) .1s forwards}
.js .reveal.in .bn-fill{opacity:0;animation:bn-fill .8s ease 1.2s forwards}
.js .reveal.in .bn-dot{opacity:0;animation:bn-fade .4s ease 1.5s forwards}
.js .reveal.in .bn-now{opacity:0;animation:bn-fade .4s ease 1.6s forwards}
.js .reveal.in .bn-unknown{opacity:0;animation:bn-fade .7s ease 1.8s forwards}
.js .reveal.in .bn-q{opacity:0;animation:bn-fade .7s ease 2s forwards}
.js .reveal.in .bn-mid{opacity:0;animation:bn-fade .7s ease 2.1s forwards}
@keyframes bn-draw{to{stroke-dashoffset:0}}
@keyframes bn-fade{to{opacity:1}}
@keyframes bn-fill{to{opacity:.10}}
/* the viewBox is scaled to about 0.6 on a phone, which drops 11.5px type to
   under 7px. These sizes are chosen so the rendered result stays near 11px. */
@media (max-width:620px){
  .bn-cap{font-size:18px}
  .bn-now{font-size:20px}
  .bn-q{font-size:54px}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal.in .bn-line{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .js .reveal.in .bn-fill{opacity:.10;animation:none}
  .js .reveal.in .bn-dot,.js .reveal.in .bn-now,.js .reveal.in .bn-unknown,
  .js .reveal.in .bn-q,.js .reveal.in .bn-mid{opacity:1;animation:none}
}

/* ---------- hero rail: the short form of the architecture -- */
/* One SVG owns the whole picture, so the three sources, the hub and the
   Propeoll tile stay wired to each other at every width. The connector that
   rises into the dashboard is drawn at negative y and leaves the box through
   overflow:visible. */
.rail{position:relative;margin-top:34px;padding:13px 12px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:
    radial-gradient(440px 200px at 86% -12%, rgba(124,109,240,.17), transparent 70%),
    radial-gradient(380px 210px at 6% 112%, rgba(56,152,248,.13), transparent 72%),
    radial-gradient(300px 180px at 48% 120%, rgba(214,72,190,.07), transparent 72%),
    linear-gradient(135deg,#FFFFFF 0%,#FBFAFE 55%,#F4F2FB 100%);
  box-shadow:0 12px 32px rgba(14,17,22,.09)}
.rail-svg{display:block;width:100%;height:auto;overflow:visible}

/* chips: the three sources, and the Analytics hub */
.rl-chip rect{fill:#fff;stroke:var(--line);stroke-width:1;
  filter:drop-shadow(0 2px 5px rgba(14,17,22,.07))}
.rl-chip text{font-family:var(--fd);font-size:12px;font-weight:500;fill:var(--ink)}
.rl-hub rect{fill:var(--paper-2);stroke:var(--line-2)}
.rl-hub text{font-size:13px;font-weight:600;letter-spacing:-.015em}

/* the destination */
.rl-tile rect{fill:var(--brand);filter:drop-shadow(0 8px 20px rgba(90,75,232,.34))}
.rl-tile-a{font-family:var(--fd);font-size:14.5px;font-weight:600;letter-spacing:-.03em;fill:#fff}
.rl-tile-b{font-family:var(--fs);font-size:10px;fill:#D8D3FF}

/* wires, and the dots that travel them */
.rl-wire{fill:none;stroke:var(--line-2);stroke-width:1.8;stroke-linecap:round}
.rl-dot{fill:var(--brand);offset-distance:0%;
  animation:rl-run 3.4s cubic-bezier(.45,0,.55,1) infinite}
@keyframes rl-run{
  0%{offset-distance:0%;opacity:0} 14%{opacity:1}
  78%{opacity:1} 94%{offset-distance:100%;opacity:0} 100%{opacity:0}
}
.rl-rise-wire{fill:none;stroke:url(#rlFade);stroke-width:2.4;stroke-linecap:round}
.rl-rise-dot{fill:var(--brand);offset-distance:0%;
  animation:rl-run 2.8s cubic-bezier(.4,0,.5,1) 2s infinite}

/* label for the connector into the dashboard, pinned to the tile's x */
.ru-label{position:absolute;left:78%;bottom:calc(100% + 4px);transform:translateX(-100%);
  white-space:nowrap;font-size:11.5px;font-weight:500;color:var(--brand-deep);
  background:var(--brand-soft);border:1px solid var(--brand-soft-2);
  padding:4px 10px;border-radius:var(--r-pill)}
@media (max-width:980px){ .ru-label{display:none} }
@media (prefers-reduced-motion:reduce){
  .rl-dot,.rl-rise-dot{animation:none;opacity:0}
}

/* ---------- data flow diagram ---------------------------- */
/* Direct child only. A descendant selector here also caught the stacked
   mobile rows, which carry their own <svg> icons, and stretching those to
   100% broke the viewBox crop that isolates each glyph. */
.flowdiag{margin:0}
.flowdiag > svg{display:block;width:100%;max-width:1000px;margin-inline:auto;
  height:auto;overflow:visible}
.fd-card{fill:#fff;stroke:var(--line);stroke-width:1.5}
.fd-hub{fill:var(--paper-2);stroke:var(--line-2);stroke-width:1.5}
.fd-propeoll{fill:var(--brand)}
.fd-wire{fill:none;stroke:var(--line-2);stroke-width:2;stroke-linecap:round}
.fd-note{font-family:var(--fs);font-size:12.5px;fill:var(--muted)}
.fd-tag{font-family:var(--fs);font-size:11.5px;fill:var(--muted-2)}
.fd-brand{font-family:var(--fd);font-size:19px;font-weight:600;letter-spacing:-.03em;fill:#fff}
.fd-on-brand{fill:#D8D3FF}
.fd-rule{stroke:rgba(255,255,255,.22);stroke-width:1}
.fd-credit{font-family:var(--fs);font-size:11.5px;fill:#CFC8FF}
.fd-dot{fill:var(--brand);offset-distance:0%;animation:fd-travel 3.4s linear infinite}
@keyframes fd-travel{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
/* what the picture is for, said in plain terms under it */
.fd-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:24px auto 0;
  max-width:1000px;text-align:left}
.fd-outcomes div{font-size:13.5px;line-height:1.5;color:var(--muted);
  padding-left:15px;border-left:2px solid var(--brand-soft-2)}
.fd-outcomes b{display:block;font-family:var(--fd);font-size:15px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:3px}
@media (max-width:760px){
  .fd-outcomes{grid-template-columns:1fr;gap:16px;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .fd-dot{display:none}
}

/* stacked flow, for narrow screens */
/* The phone gets the same story as the SVG, told as a column: three sources,
   a spine into the data layer, and a two-way spine into Propeoll. The cards
   deal themselves in when the figure is scrolled to, which is what makes it
   read as a flow rather than as a list of boxes. */
.fd-stack{display:none}
.fd-s-row{position:relative;display:flex;align-items:flex-start;gap:13px;
  padding:15px 16px;background:#fff;border:1px solid var(--line);
  border-radius:15px;box-shadow:0 4px 14px rgba(14,17,22,.05)}
.fd-s-row + .fd-s-row{margin-top:10px}
.fd-s-ico{width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--paper-2);border:1px solid var(--line)}
.fd-s-ico .zoho-icon{width:24px;height:24px}
.fd-s-ico.is-mark{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)}
.fd-s-ico.is-mark svg{width:26px;height:26px}
.fd-s-row span{font-size:13px;line-height:1.45;color:var(--muted)}
.fd-s-row b{display:block;font-family:var(--fd);font-size:15px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink);margin-bottom:3px}
.fd-s-row.is-hub{background:var(--paper-2);border-color:var(--line-2)}
.fd-s-row.is-brand{background:var(--brand);border-color:var(--brand);
  box-shadow:0 10px 26px rgba(90,75,232,.28)}
.fd-s-row.is-brand b{color:#fff}
.fd-s-row.is-brand span{color:#D8D3FF}

/* the spine between the cards, with a dot running it */
.fd-s-link{position:relative;height:34px;margin:7px 0}
.fd-s-link::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  margin-left:-1px;border-radius:2px;background:var(--line-2)}
.fd-s-link.is-two-way::before{background:var(--brand);opacity:.4}
.fd-s-link i{position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--brand);box-shadow:0 0 9px rgba(90,75,232,.55);
  animation:fd-s-down 2.4s cubic-bezier(.45,0,.55,1) infinite}
.fd-s-link i.up{animation:fd-s-up 2.4s cubic-bezier(.45,0,.55,1) 1.2s infinite}
@keyframes fd-s-down{
  0%{top:-5px;opacity:0} 18%{opacity:1} 80%{opacity:1} 100%{top:calc(100% - 2px);opacity:0}
}
@keyframes fd-s-up{
  0%{top:calc(100% - 2px);opacity:0} 18%{opacity:1} 80%{opacity:1} 100%{top:-5px;opacity:0}
}

/* Scoped to .reveal.in, so the starting state only exists once the figure is
   on screen and about to animate. Before that the cards carry their plain
   visible styles, which is what a browser with no script will show. */
.js .reveal.in .fd-s-row,
.js .reveal.in .fd-s-link{animation:fd-s-in .6s cubic-bezier(.22,1,.36,1) var(--d,0s) both}
.js .reveal.in .fd-s-link i{animation:fd-s-in .6s cubic-bezier(.22,1,.36,1) var(--d,0s) both,
  fd-s-down 2.4s cubic-bezier(.45,0,.55,1) infinite}
.js .reveal.in .fd-s-link i.up{animation:fd-s-in .6s cubic-bezier(.22,1,.36,1) var(--d,0s) both,
  fd-s-up 2.4s cubic-bezier(.45,0,.55,1) 1.2s infinite}
@keyframes fd-s-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .fd-s-link i{display:none}
  .js .reveal.in .fd-s-row,.js .reveal.in .fd-s-link{animation:none}
}

@media (max-width:760px){
  /* direct child only: the stacked rows carry their own <svg> icons */
  .flowdiag > svg{display:none}
  .fd-stack{display:block}
}

/* ---------- derived rate, built line by line -------------- */
/* Each row is one step of the calculation. The divisor rows are indented and
   marked so the list reads as arithmetic rather than as a table of facts. */
.build{list-style:none;display:grid;gap:0}
.build li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.build-k{font-size:14px;color:var(--ink-2)}
.build-k i{display:block;font-style:normal;font-size:12px;color:var(--muted-2);margin-top:2px}
.build-v{flex:none;font-family:var(--fd);font-size:17px;font-weight:600;
  letter-spacing:-.02em;color:var(--ink)}
.build li.build-op .build-k{padding-left:15px;border-left:2px solid var(--brand-soft-2);
  margin-left:1px}
.build li.build-op .build-v{color:var(--muted);font-size:16px}
.build li.build-out{border-bottom:0;padding-top:15px}
.build li.build-out .build-k{font-family:var(--fd);font-size:15px;font-weight:600;
  letter-spacing:-.015em;color:var(--ink)}
.build li.build-out .build-v{font-size:26px;color:var(--brand)}

/* the same rate, in the project's own currency */
.build-fx{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:4px;padding:13px 15px;border-radius:var(--r-md);
  background:var(--brand-soft);border:1px solid var(--brand-soft-2);
  font-size:13.5px;color:var(--brand-deep)}
.build-fx b{flex:none;font-family:var(--fd);font-size:19px;font-weight:600;
  letter-spacing:-.02em;color:var(--brand-deep);text-align:right}
.build-fx b i{display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--brand);margin-top:1px}

/* ---------- applications included ------------------------ */
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.app{display:flex;flex-direction:column;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px}
.app img{height:34px;width:auto;align-self:flex-start}
.app .app-mark{display:flex;align-items:center;gap:9px}
.app .app-mark svg{width:28px;height:28px}
.app .app-mark b{font-family:var(--fd);font-size:20px;font-weight:600;letter-spacing:-.035em}
.app p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.app .tag{align-self:flex-start}

/* ---------- waffle, for the unapproved hours ------------- */
.waffle{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin:4px 0 2px}
.waffle i{aspect-ratio:1;border-radius:3px;background:var(--pos);opacity:.22}
.waffle i.on{opacity:1}
.waffle i.bad{background:var(--neg);opacity:1;animation:waffle-pop .45s cubic-bezier(.22,1,.36,1) both}
@keyframes waffle-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.waffle-key{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.waffle-key span{display:inline-flex;align-items:center;gap:7px}
.waffle-key i{width:10px;height:10px;border-radius:3px;flex:none}
.waffle-key i.ok{background:var(--pos)}
.waffle-key i.no{background:var(--neg)}
@media (prefers-reduced-motion:reduce){
  .waffle i.bad{animation:none}
}

@media (max-width:860px){
  .apps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .apps{grid-template-columns:1fr}
  .waffle{grid-template-columns:repeat(8,1fr)}
}

/* record card, derived figures, version list, mini stats */
.rec-k{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;background:var(--brand-soft);
  color:var(--brand-deep);font-family:var(--fd);font-size:11px;font-weight:600;margin-right:9px;vertical-align:-3px}
.rec-n{text-align:right;font-size:12.5px;color:var(--muted-2);white-space:nowrap}
.derived{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;margin-top:16px}
.derived>div{background:var(--pearl);padding:13px 14px}
.derived u{display:block;text-decoration:none;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.derived b{display:block;font-family:var(--fd);font-size:18px;font-weight:600;letter-spacing:-.02em;margin:5px 0 3px}
.derived i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.ver{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:9px}
.ver>div{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.ver>div i{font-style:normal;margin-left:auto;font-size:12px;color:var(--muted-2)}
.ver .tag{flex:none}
.mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;margin-top:22px}
.mini>div{background:var(--pearl);padding:14px 15px}
.mini u{display:block;text-decoration:none;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.mini b{display:block;font-family:var(--fd);font-size:20px;font-weight:600;letter-spacing:-.025em;margin:5px 0 3px}
.mini i{font-style:normal;font-size:11.5px;color:var(--muted-2)}
.tone-parch .mini>div,.tone-parch .derived>div{background:#fff}

/* the four-number model */
.model{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.model-cell{background:var(--dark-2);padding:28px 24px}
.model-cell .k{font-family:var(--fd);font-size:34px;font-weight:600;color:var(--brand-on-dark);line-height:1;letter-spacing:-.03em}
.model-cell h3{margin:14px 0 4px;font-family:var(--fd);font-size:20px;font-weight:600;color:#fff}
.model-cell .q{font-size:14px;color:var(--brand-on-dark);margin-bottom:14px}
.model-cell p{font-size:14px;line-height:1.55;color:#B7B3C6}
.model-cell code{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-dark);
  font-family:var(--fm);font-size:12.5px;color:#9C98AE}
.formulas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.formula{padding:9px 15px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid var(--line-dark);
  font-family:var(--fm);font-size:13px;color:#D6D3E2}
.formula b{color:#fff;font-family:var(--fd);font-weight:600}

/* flow arrows */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:14px;font-weight:500}
.flow em{font-style:normal;padding:8px 15px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line)}
.flow s{text-decoration:none;color:var(--brand);font-size:17px}
.tone-dark .flow em{background:rgba(255,255,255,.07);border-color:var(--line-dark)}

/* ---------- 11. Pricing ----------------------------------- */
.toggle{display:inline-flex;padding:4px;border-radius:var(--r-pill);background:var(--paper-3);gap:2px}
.toggle button{border:0;background:transparent;padding:9px 20px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;transition:.18s}
.toggle button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.09)}
.toggle .save{margin-left:6px;font-size:12px;color:var(--pos);font-weight:600}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg);align-items:start}
.plan{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:32px}
.plan.feature{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.plan-badge{position:absolute;top:-13px;left:32px;padding:5px 13px;border-radius:var(--r-pill);background:var(--brand);color:#fff;font-size:12px;font-weight:600;letter-spacing:-.01em}
.price{display:flex;align-items:baseline;gap:3px;margin:22px 0 6px;font-family:var(--fd);letter-spacing:-.04em}
.price .cur{font-size:26px;font-weight:500;color:var(--ink-2)}
.price .amt{font-size:56px;font-weight:600;line-height:1}
.price-sub{font-size:14px;color:var(--muted);margin-bottom:24px}
.plan-kicker{margin:22px 0 0;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan-kicker + .feat{margin-top:12px}
.feat b{font-weight:600;color:var(--ink)}
.feat{display:grid;gap:11px;margin:24px 0}
/* Block, not flex: as a flex container the tick, a <b> and the text after it
   become three separate items, so the gap opens up mid-sentence. */
.feat li{position:relative;padding-left:29px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.feat li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234436C7' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat}
.plan-note{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;line-height:1.5;color:var(--muted)}
.cmp th,.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;text-align:left}
.cmp thead th{font-family:var(--fd);font-size:16px;font-weight:600;color:var(--ink);background:var(--paper-2)}
.cmp th:first-child{width:44%}
.cmp td{text-align:center;color:var(--ink-2)}
.cmp td:first-child{text-align:left;color:var(--ink)}
.cmp .yes{color:var(--pos);font-weight:600}
.cmp .no{color:var(--muted-2)}
/* licence allocation: prose in the middle column, so it reads left-aligned
   rather than centred like the tick table it shares a class with */
.cmp.lic th:first-child{width:26%}
.cmp.lic td{text-align:left;font-size:14px;color:var(--muted)}
.cmp.lic td:first-child{color:var(--ink)}
.cmp.lic td b{font-family:var(--fd);font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.cmp.lic td .fine{display:block;margin-top:2px}
.cmp.lic th:last-child,.cmp.lic td:last-child{width:22%;text-align:right;white-space:nowrap}
.lic-n{display:inline-block;padding:4px 11px;border-radius:var(--r-pill);
  background:var(--brand-soft);border:1px solid var(--brand-soft-2);
  font-size:12.5px;font-weight:600;color:var(--brand-deep)}
@media (max-width:620px){
  .cmp.lic th,.cmp.lic td{padding:12px 12px;font-size:13.5px}
  .cmp.lic th:last-child,.cmp.lic td:last-child{white-space:normal}
}

/* ---------- 12. Partner tiers ----------------------------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);align-items:start}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:30px;height:100%}
.tier.feature{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.tier-rate{font-family:var(--fd);font-size:44px;font-weight:600;letter-spacing:-.035em;line-height:1;margin:18px 0 4px;color:var(--brand)}
.tier-rate small{font-family:var(--fs);font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}
.ladder{counter-reset:s;display:grid;gap:0;list-style:none;padding:0;margin:0}
.ladder li{position:relative;counter-increment:s;padding:0 0 32px 56px}
.ladder li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-deep);display:grid;place-items:center;font-family:var(--fd);font-size:13px;font-weight:600}
.ladder li::after{content:"";position:absolute;left:17.5px;top:38px;bottom:2px;width:1px;background:var(--line)}
.ladder li:last-child{padding-bottom:0}
.ladder li:last-child::after{display:none}
.ladder h4{margin-bottom:5px}

/* ---------- 13. FAQ --------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--fd);font-size:19px;font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-7px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 8% 24px 0;color:var(--ink-2);font-size:16px;line-height:1.62}

/* ---------- 14. Forms & Zoho embed ------------------------ */
.form-shell{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:10px;box-shadow:var(--shadow)}
.zf-frame{width:100%;border:0;display:block;border-radius:var(--r-lg);min-height:640px;background:#fff}
.form-fallback{padding:44px 32px;text-align:center}
.form-fallback .icon{margin:0 auto 18px}
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
.contact-list{display:grid;gap:20px}
.contact-list li{display:flex;gap:14px;align-items:flex-start}
.contact-list .icon{margin:0;width:34px;height:34px}
.contact-list b{display:block;font-size:14px;color:var(--muted);font-weight:500}
.contact-list a,.contact-list span{font-size:17px;color:var(--ink);font-weight:500}

/* ---------- 15. CTA band & footer ------------------------- */
.cta-band{color:#fff;text-align:center;padding:clamp(64px,9vw,104px) 0;position:relative;overflow:hidden;
  background:
    radial-gradient(760px 460px at 18% -10%, rgba(139,122,255,.62), transparent 66%),
    radial-gradient(660px 420px at 84% 110%, rgba(232,80,170,.40), transparent 68%),
    radial-gradient(560px 380px at 62% 18%, rgba(56,152,248,.34), transparent 70%),
    linear-gradient(135deg,#2E2168 0%,#1C1545 52%,#140F2E 100%)}
/* a violet button disappears on a lit violet field, so the primary inverts */
.cta-band .btn-primary{background:#fff;color:var(--brand-deep)}
.cta-band .btn-primary:hover{background:#EFEDFF}
.cta-band .h2{max-width:18ch;margin:0 auto 18px}
.cta-band .lead{max-width:52ch;margin:0 auto 32px;color:#C9C6D6}
.foot{background:#0A0A0C;border-top:0;padding:64px 0 32px}
.foot .brand{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr 1fr;gap:var(--sp-xl)}
.foot h5{margin:0 0 16px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6E6E73}
.foot li{margin-bottom:11px}
.foot a{font-size:15px;color:#C7C7CC}
.foot a:hover{color:#fff}
.foot-brand p{margin-top:16px;font-size:15px;color:#8E8E93;max-width:34ch;line-height:1.6}
/* official Zoho partner badge, from the Zoho partner media kit */
.zpartner{display:inline-block;height:62px;width:auto}
.zpartner-foot{height:46px;margin-top:20px}
@media (max-width:560px){
  .zpartner{height:50px}
  .zpartner-foot{height:42px}
}
.foot-offices li{margin-bottom:16px;font-size:13px;line-height:1.55;color:#8E8E93}
.foot-offices b{display:block;font-size:14px;font-weight:600;color:#C7C7CC;margin-bottom:2px}
.foot-bottom{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:#6E6E73}
.foot-bottom a{font-size:13px;color:#8E8E93}
.foot-bottom a:hover{color:#fff}

/* ---------- 16. Misc -------------------------------------- */
.logos{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.marquee-note{font-size:13px;color:var(--muted);margin-bottom:14px}
.js .reveal{opacity:0;transform:translateY(14px)}
.js .reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}

/* Whole sections ease in as they are scrolled to. The class is added by the
   script, never by the markup, so nothing can be left hidden when the script
   does not run. The movement is deliberately small: it should register as the
   page settling, not as an entrance. */
.js section.sec-anim{opacity:0;transform:translateY(20px)}
.js section.sec-anim.in{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js section.sec-anim{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:12px 18px;z-index:100;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* ---------- 17. Responsive -------------------------------- */
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:40px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .model{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:1fr;max-width:560px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--sp-lg)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:block;padding:11px}
  .g3{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr;max-width:520px}
}
@media (max-width:760px){
  .derived,.mini{grid-template-columns:1fr}
  .rec-n{display:none}
  .quad{grid-template-columns:1fr 1fr}
  .headline-figure b{font-size:34px}
}
@media (max-width:620px){
  :root{--sp-sec:64px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .model{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .bar-row{grid-template-columns:88px 1fr 42px;gap:9px}
  .btn{width:100%;justify-content:center}
  .btn-row{flex-direction:column;align-items:stretch}
  .hero .btn-row .link-arrow{justify-content:center}
  .foot-grid{grid-template-columns:1fr}
  .price .amt{font-size:46px}
}