/* INSYNCR site stylesheet. The Flock Ramp system (dark ground rgb(5,10,20), purple rgb(105,88,226) to violet
   rgb(115,23,213) gradient with a white inset sheen, glass cards at 4 percent white, 140px gradient statistics)
   applied to every page. The class vocabulary of the inner pages (lab, sec-head, card, grid, plan, faq, kv, prose,
   field and the rest) is restyled here on the same tokens, so one stylesheet serves the home page and the 40 inner
   pages. Fonts are self hosted (Plus Jakarta Sans, OFL) so no request leaves for a font. */

@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}

:root{
  --ground:#050A14;--text:#EAEAEA;--muted:rgba(234,234,234,.68);--dim:rgba(234,234,234,.5);
  --purple:#6958E2;--violet:#7317D5;--accent:#B9AEFF;--accent2:#D9D2FF;
  --card:rgba(255,255,255,.04);--card2:rgba(255,255,255,.07);--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
  --grad-btn:linear-gradient(90deg,#6958E2 20%,#7317D5);--sheen:inset 0 15px 18px rgba(255,255,255,.55);
  --grad-text:linear-gradient(90deg,#6958E2 20%,#fff);--rail:linear-gradient(90deg,rgba(255,255,255,0),#6958E2);
  --font:"Plus Jakarta Sans","Creato Display",Arial,sans-serif;--display:var(--font);--body:var(--font);
  --ease:cubic-bezier(.2,.7,.2,1);--dur:220ms;
  /* names the inner pages use */
  --ink:#EAEAEA;--ink2:rgba(234,234,234,.72);--ink3:rgba(234,234,234,.52);--white:#FFFFFF;--peach:#D9D2FF;--lav:rgba(105,88,226,.18);
  --deep:#150D33;--orange:#6958E2;--mint:#0A1020;--r:20px;--gap:20px;--pad:28px;--sec:112px;
  /* the menu panel needs a ground that is not see through, which --card is not */
  --pop:#0B1526;--pop2:rgba(255,255,255,.05);--pop-shadow:0 30px 70px rgba(0,0,0,.5);--mhead:#B9AEFF;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font:400 16px/24px var(--font);overflow-x:clip;min-height:100vh}
body.ready{animation:pagein .6s var(--ease)}
@keyframes pagein{from{opacity:0}to{opacity:1}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{margin:0;color:var(--text);font-weight:700;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:64px;line-height:1.05;letter-spacing:-1.6px;max-width:900px}
h2{font-size:48px;line-height:1.12;letter-spacing:-1.1px;max-width:24ch}
h3{font-size:24px;line-height:32px;letter-spacing:-.48px}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
[id]{scroll-margin-top:112px}  /* the capsule is 66px tall inside 16px of air */
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:#fff;color:#050A14;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:16px}
.wrap{width:100%;max-width:1189px;margin:0 auto;padding-inline:24px}
.sec{padding-top:var(--sec)}
main{padding-bottom:var(--sec)}
.home main{padding-bottom:0}
.home .sec{padding:var(--sec) 0}
.center{text-align:center}
.head{max-width:820px}
.center .head{margin-inline:auto}
.head h2{margin-top:16px}
.head .sub{margin-top:18px}
.sub{color:var(--muted);font-size:17px;line-height:27px;max-width:620px}
.center .sub{margin:20px auto 0}
.lede{font-size:19px;line-height:1.5;color:var(--muted);max-width:680px;margin-top:20px;text-wrap:pretty}
.micro{font-size:14px;line-height:1.5;color:var(--dim);margin-top:14px}
.link{font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(185,174,255,.35);text-decoration-thickness:1px}
.link:hover{text-decoration-color:var(--accent)}
.fine{text-align:center;font-size:14px;color:var(--muted);margin-top:24px}

/* labels: the rounded pill for section eyebrows, a small accent caption inside cards */
.lab,.pill{display:inline-block;background:rgba(105,88,226,.18);border:1px solid rgba(105,88,226,.45);color:var(--text);border-radius:999px;padding:7px 16px;font:500 14px/20px var(--font);letter-spacing:0;text-transform:none}
.card .lab,.prose .lab,.callout .lab,.strip .lab,.hollow .lab,form .lab{background:none;border:0;padding:0;border-radius:0;font:700 12px/1.2 var(--font);letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.strip .lab{color:var(--muted);letter-spacing:0;text-transform:none;font:400 14px/20px var(--font)}
.hollow .lab{color:var(--dim)}
.card-purple .lab{color:var(--accent2)}
.sec-head{margin-bottom:40px}
.sec-head .lab{margin-bottom:16px}
.sec-head h2{margin-top:0}
.sec-head .lede{margin-top:16px}
.card .lab{display:block;margin-bottom:12px}

/* buttons: the gradient primary with the arrow tile and a sheen sweep on hover, a white secondary, a dark outline */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:12px 24px;font:500 16px/24px var(--font);color:var(--text);border:1px solid transparent;cursor:pointer;white-space:normal;text-align:center;text-wrap:balance;min-height:48px;text-decoration:none;overflow:hidden;transition:transform .25s var(--ease),filter .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
/* Why .btn no longer says white-space:nowrap.

   It said nowrap with overflow:hidden, so any label wider than its button was
   cut with no ellipsis and no error: it just looked like a shorter label.
   Three separate places were doing it and each was found and patched
   individually, which is the sign of fixing the symptom. The pricing cards,
   then twelve pages of phone width buttons, then the same plan cards again on
   the home page under a different class.

   white-space:normal with min-height does nothing at all when a label fits,
   which is almost always. It only acts when the text would otherwise be
   destroyed. So the general rule is cheaper than the three special cases and
   cannot be missed by a selector. */
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad-btn);box-shadow:var(--sheen);color:#fff;padding:12px 10px 12px 18px;font-weight:400}
.btn-primary::after{content:"";flex:none;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/16px no-repeat;transition:transform .25s var(--ease)}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-primary:hover::before{transform:translateX(130%)}
.btn-primary:hover::after{transform:translateX(3px)}
.btn-ink{background:#EAEAEA;color:#050A14;font-weight:500}
.btn-ink:hover{background:#fff;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);border-color:var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--line2)}
.btn-onpurple{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.3);color:#fff}
.btn-onpurple:hover{border-color:#fff}
.btn-sm{padding:9px 16px;font-size:15px}
.btn-sm.btn-primary{padding:8px 8px 8px 16px}
.btn-sm.btn-primary::after{width:28px;height:28px;background-size:14px}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.center .btns{justify-content:center}

/* cards: glass at 4 percent white, a cursor spotlight on hover, a lift on link cards */
.card{position:relative;isolation:isolate;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);min-width:0;transition:transform .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(105,88,226,.22),transparent 60%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none;z-index:-1}
.card:hover::after{opacity:1}
a.card,.grid>.card:not(form),.post{text-decoration:none}
a.card:hover,.grid>.card:not(form):hover,.post:hover{transform:translateY(-4px);border-color:rgba(105,88,226,.5);background:var(--card2)}
.card h3{font-size:20px;line-height:1.25;margin-bottom:10px}
.card p{color:var(--muted);font-size:16px;line-height:1.55;text-wrap:pretty}
.card .who{display:block;margin-top:14px;font-size:14px;color:var(--dim)}
.hollow{background:transparent;border:1px solid var(--line2)}
.card-purple{background:linear-gradient(135deg,rgba(105,88,226,.34),rgba(115,23,213,.14));border-color:rgba(105,88,226,.45);color:#fff}
.card-purple h2,.card-purple h3{color:#fff}
.card-purple p{color:rgba(255,255,255,.82);font-size:15px}
.card-purple .from{font:700 20px/1.2 var(--font);color:var(--accent2);margin-top:28px;letter-spacing:-.01em}
.card-purple .big{margin-top:6px}
.card-purple .micro{color:var(--accent2)}
.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.after{margin-top:32px}
.big{font:700 64px/1 var(--font);letter-spacing:-.03em;margin:28px 0 12px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.caps{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.caps span{font:500 12px/1 var(--font);color:var(--accent);background:rgba(105,88,226,.16);border:1px solid rgba(105,88,226,.3);border-radius:999px;padding:7px 11px;white-space:nowrap}
.bento{margin-top:56px}
.bento .card{display:flex;flex-direction:column;justify-content:space-between;min-height:300px;overflow:hidden}
.ribbon-crop{margin:20px calc(var(--pad) * -1) calc(var(--pad) * -1) 0;height:96px;overflow:hidden;border-top-left-radius:12px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.ribbon-crop img{height:100%;width:auto;max-width:none}

/* header: a floating capsule, the shape Adi picked on 27 September, filled in
   #5515AA, the deep end of Blue Violet. It has its own ground, so the header
   behind it stays transparent and the page scrolls under it; all the scrolled
   state does is pull it a little closer to the top. */
.site-head{position:sticky;top:0;z-index:50;padding:16px 0;background:none;border:0;transition:padding .25s var(--ease)}
.site-head.scrolled{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:9px 0}
.pwrap{width:100%;max-width:1280px;margin:0 auto;padding-inline:20px}
.cap{position:relative;display:flex;align-items:center;gap:22px;height:66px;padding:0 8px 0 24px;border-radius:999px;
  background:#5515AA;box-shadow:0 16px 40px rgba(85,21,170,.28),inset 0 1px 0 rgba(255,255,255,.14)}
.caplogo{display:flex;align-items:center;flex:0 0 auto}
.caplogo img{height:26px;width:auto}
.pnav{flex:1 1 auto;min-width:0}
.pnav>ul{display:flex;align-items:center;gap:22px;margin:0;padding:0;list-style:none}
.pnav .nl{display:flex;align-items:center;align-self:stretch}
.pnav .nl>a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:500 15px/1 var(--font);
  color:rgba(255,255,255,.88);text-decoration:none;padding:9px 10px;border-radius:9px;transition:color .18s,background .18s}
.pnav .nl>a:hover{color:#fff}
.pnav .nl>a[aria-current],.pnav .nl.open>a{color:#fff;background:rgba(255,255,255,.14)}
.pnav .cv{width:10px;height:7px;opacity:.6;transition:transform .2s var(--ease)}
.pnav .nl:hover .cv,.pnav .nl.open .cv{transform:rotate(180deg);opacity:1}
.pact{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.plog{font:500 15px/1 var(--font);color:rgba(255,255,255,.88);text-decoration:none;padding:0 8px;white-space:nowrap}
.plog:hover{color:#fff}
.pact .btn{height:44px;padding:0 20px;border-radius:999px;font-size:15px;display:inline-flex;align-items:center;white-space:nowrap}
.pact .btn-ghost{border:1px solid rgba(255,255,255,.42);color:#fff;background:none}
.pact .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.pact .btn-primary{background:#fff;color:#5515AA;font-weight:600;box-shadow:none}
.pact .btn-primary:hover{background:#F3ECFC}
/* the one place Safety Orange appears in the bar, as a fill and never as text */
.pact .btn-primary::after{content:"";width:7px;height:7px;border-radius:50%;background:#FC7E20;margin-left:9px;flex:0 0 auto}
.pburger{display:none;width:44px;height:44px;border-radius:999px;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.14)}
.pburger span{position:relative;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.pburger span::before,.pburger span::after{content:"";position:absolute;left:0;display:block;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease),top .25s var(--ease)}
.pburger span::before{top:-6px}.pburger span::after{top:6px}
.pburger[aria-expanded=true] span{background:transparent}
.pburger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.pburger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* home hero */
.hero{position:relative;padding:56px 0 120px;min-height:710px;overflow-x:clip;overflow-y:visible}
.hero .light{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero .light::before{content:"";position:absolute;left:58%;top:-10%;width:1100px;height:900px;background:radial-gradient(closest-side,rgba(105,88,226,.55),rgba(115,23,213,.25) 45%,rgba(5,10,20,0) 72%);filter:blur(40px);animation:drift 14s ease-in-out infinite alternate}
.hero .light::after{content:"";position:absolute;left:75%;top:30%;width:600px;height:600px;background:radial-gradient(closest-side,rgba(115,23,213,.45),rgba(5,10,20,0) 70%);filter:blur(60px);animation:drift2 18s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,40px) scale(1.08)}}
@keyframes drift2{from{transform:translate(0,0)}to{transform:translate(50px,-60px)}}
.hero .wrap{position:relative}
.hero .left{max-width:780px;position:relative;z-index:2}
.hero h1{font-size:86px;line-height:94px;letter-spacing:-1.72px;margin-top:28px;max-width:none}
.hero h1 .w{display:inline-block}
/* the headline is not split into words any more, and must never start hidden */
.js .hero h1 .w{opacity:1;transform:none;filter:none}
.js .hero h1.in .w{opacity:1;transform:none;filter:none}
.hero .sub{margin-top:24px;font-size:16px;line-height:24px;color:var(--text);opacity:.8}
.chips{display:flex;gap:16px 40px;flex-wrap:wrap;margin-top:32px}
.chips li{display:flex;align-items:center;gap:14px;font-size:15px;line-height:20px;font-weight:500;max-width:170px}
.chips i{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);display:grid;place-items:center}
.chips svg{width:16px;height:16px}
.hero .btns{margin-top:40px}
.panel{position:absolute;left:820px;top:120px;width:1240px;z-index:1;will-change:transform}
.js .panel{opacity:0;transform:perspective(1400px) rotateY(-10deg) translateX(80px)}
.js .panel.in{opacity:1;transform:perspective(1400px) rotateY(0) translateX(0) translateY(var(--py,0));transition:opacity 1.2s var(--ease) .35s,transform 1.2s var(--ease) .35s}
.frame{background:#0A1020;border:1px solid var(--line2);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(105,88,226,.15),0 0 80px rgba(105,88,226,.25);overflow:hidden}
.frame .bar{display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.frame .bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.frame .bar span{margin-left:10px}
.frame .bar em{margin-left:auto;font-style:normal;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:500}
.frame .bar em b{width:8px;height:8px;border-radius:50%;background:#6958E2;box-shadow:0 0 0 0 rgba(105,88,226,.7);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(105,88,226,.7)}70%{box-shadow:0 0 0 10px rgba(105,88,226,0)}100%{box-shadow:0 0 0 0 rgba(105,88,226,0)}}
.frame .ribbon img{width:100%;height:auto;border-bottom:1px solid var(--line)}
.frame .shot{position:relative;height:500px;overflow:hidden;background:#0d1226}
.frame .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity 1.2s var(--ease)}
.frame .shot img.alt{opacity:0}
.frame.swap .shot img.alt{opacity:1}
.frame .scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,#B9AEFF,transparent);opacity:0;pointer-events:none}
.frame.refreshing .scan{animation:scan 1.1s var(--ease) forwards}
@keyframes scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.frame .foot{display:flex;justify-content:space-between;gap:16px;padding:12px 20px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.frame .foot b{color:var(--text);font-weight:500}

/* customer strips: the masked marquee on the home, the plain name row on inner pages */
.brands{padding:40px 0 56px}
.brands .lab{display:block;text-align:center;margin-bottom:24px}
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:18%;z-index:1;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#050A14 5%,rgba(5,10,20,0))}
.marquee::after{right:0;background:linear-gradient(90deg,rgba(5,10,20,0),#050A14 95%)}
.track{display:flex;gap:72px;width:max-content;animation:scroll 40s linear infinite}
.marquee:hover .track,.marquee:hover .trow{animation-play-state:paused}
.track li{font-weight:700;font-size:22px;letter-spacing:-.4px;color:var(--text);opacity:.55;white-space:nowrap}
/* While the strip is names rather than logos it has to look chosen. Slightly
   tighter, a shade lighter, and the optical weight of a lockup rather than of
   a sentence. */
.track li:not(.has-logo){font-size:20.5px;letter-spacing:-.55px;opacity:.48}
.track li.has-logo{display:flex;align-items:center}
/* Every mark as a flat silhouette, so eight competing brand palettes do not
   fight the page and a logo sits at the same optical weight as a name beside
   it. brightness(0) collapses any artwork to solid black whatever colour it
   started as, which also rescues the official Arconic and Creative Planning
   files: both are white-on-dark versions whose wordmarks would otherwise be
   invisible here. Inverted on the dark base theme. */
.track li.has-logo img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.5;
  transition:opacity .2s}
.marquee:hover li.has-logo img{opacity:.85}
@keyframes scroll{to{transform:translateX(-50%)}}
.strip .names{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:20px}
.strip .names li{font:700 20px/1.2 var(--font);letter-spacing:-.01em;color:var(--text);opacity:.55}
.strip .line{margin-top:24px;font-size:15px;color:var(--dim)}

/* the problem: four numbered columns on the rail, purple light behind */
.choose{position:relative;overflow:hidden}
.choose::before{content:"";position:absolute;left:50%;top:0;width:1400px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(105,88,226,.28),rgba(5,10,20,0) 70%);filter:blur(40px);pointer-events:none}
.choose .wrap{position:relative}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:72px;padding-top:40px}
.rail::before,.rail::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--rail);transform-origin:left;transition:transform 1.4s var(--ease)}
.rail::after{filter:blur(8px);opacity:.9}
.js .rail::before,.js .rail::after{transform:scaleX(0)}
.js .rail.in::before,.js .rail.in::after{transform:scaleX(1)}
.rail>div{position:relative}
.rail>div::before{content:"";position:absolute;left:0;top:-46px;width:12px;height:12px;border-radius:50%;background:#6958E2;box-shadow:0 0 0 4px rgba(105,88,226,.25),0 0 22px #6958E2;transition:transform .5s var(--ease)}
.js .rail>div::before{transform:scale(0)}
.js .rail.in>div::before{transform:scale(1)}
.rail>div:nth-child(2)::before{transition-delay:.3s}.rail>div:nth-child(3)::before{transition-delay:.6s}.rail>div:nth-child(4)::before{transition-delay:.9s}
.rail .n{display:block;font-size:14px;color:var(--muted);font-weight:500;letter-spacing:.5px}
.rail h3{margin-top:12px;font-size:22px}
.rail p{margin-top:12px;color:var(--muted)}
.pull{margin-top:40px;max-width:840px}
.home .pull{margin-top:72px;max-width:none;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;padding:36px 40px;background:var(--card);border:1px solid var(--line);border-radius:20px}
.pull blockquote{margin:0;font:700 28px/1.3 var(--font);letter-spacing:-.015em;text-wrap:pretty}
.home .pull blockquote{font-size:24px;line-height:34px}
.pull cite{display:block;font-style:normal;font-size:15px;color:var(--dim);margin-top:14px}

/* how it works: tabs with a progress bar while they advance on their own */
.tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.tabs button{position:relative;font:700 16px/24px var(--font);color:var(--text);background:rgba(221,221,221,0);border-radius:10px;padding:12px 20px;transition:background .25s var(--ease);overflow:hidden}
.tabs button:hover{background:rgba(255,255,255,.06)}
.tabs button[aria-selected=true]{background:#6958E2;box-shadow:var(--sheen)}
.tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.7);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .2s linear}
.tab{display:none;margin-top:40px;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:48px}
.tab.on{display:grid;animation:fadeup .6s var(--ease)}
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.tab .k{color:var(--accent);font-weight:500;font-size:14px}
.tab h3{margin-top:12px;font-size:30px;line-height:38px;letter-spacing:-.6px}
.tab p{margin-top:16px;color:var(--muted)}
.tab ol{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tab ol li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.tab ol b{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(105,88,226,.25);color:#fff;font-size:13px;display:grid;place-items:center;font-weight:700}
.tab .img{background:#0A1020;border:1px solid var(--line2);border-radius:16px;padding:12px;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 60px rgba(105,88,226,.18)}
.tab .img img{border-radius:10px;width:100%;height:340px;object-fit:cover;object-position:top left}
.tab .img img.fit{object-fit:contain;background:#fff}
.tab .img figcaption{font-size:13px;color:var(--muted);padding:12px 4px 2px}

/* metrics: the giant gradient numbers count up and sharpen from a blur */
.metrics{padding:80px 0 40px}
.metric{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.metric:first-child{border-top:0}
.num{font-size:140px;line-height:1;font-weight:700;letter-spacing:-5px;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;background-size:200% 100%}
.js .num{transform:scale(.8);filter:blur(10px);opacity:0;transition:transform 1.1s var(--ease),filter 1.1s var(--ease),opacity 1.1s var(--ease)}
.js .num.on{transform:none;filter:none;opacity:1;animation:shimmer 6s ease-in-out infinite alternate}
@keyframes shimmer{from{background-position:0 0}to{background-position:100% 0}}
.metric h3{font-size:28px;line-height:36px}
.metric p{margin-top:14px;color:var(--muted)}
.metric .link{display:inline-block;margin-top:18px}

/* sources, bound not generated, security cards */
.src{padding:32px}
.src h3{font-size:18px;line-height:26px}
.src ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.src li{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:10px;padding:6px 12px;font-size:14px;font-weight:500}
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.cmp .card{padding:40px}
.cmp .card h3{font-size:22px}
.cmp ul li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:16px}
.cmp ul li:last-child{border-bottom:0}
.cmp .tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.08);color:var(--muted)}
.cmp .tag.good{background:var(--grad-btn);box-shadow:var(--sheen);color:#fff}
.cmp h3{margin-top:18px}
.cmp .lead{margin-top:8px;color:var(--accent);font-weight:500}
.cmp p.t{margin-top:12px;color:var(--muted)}
.meet{margin-top:var(--gap)}
.sec2{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:56px}
.sec2 .card{padding:40px}
.sec2 .k{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.sec2 h3{margin-top:14px}
.sec2 p{margin-top:12px;color:var(--muted)}

/* testimonials */
.trow{display:flex;gap:20px;width:max-content;animation:scroll 60s linear infinite}
.trow.rev{animation-direction:reverse;margin-top:20px}
.quote{width:380px;padding:32px;display:flex;flex-direction:column;gap:18px}
.quote blockquote{margin:0;font-size:18px;line-height:28px;font-weight:500}
.quote cite{font-style:normal;color:var(--muted);font-size:14px;display:flex;align-items:center;gap:12px;margin-top:auto}
.quote cite i{width:38px;height:38px;border-radius:50%;background:var(--grad-btn);box-shadow:var(--sheen);display:inline-grid;place-items:center;color:#fff;font-weight:700;font-style:normal;font-size:13px;flex:none}
.quote-card .brand{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.brand-art{width:60px;height:60px;border-radius:999px;overflow:hidden;flex:none;background:rgba(105,88,226,.2)}
.brand-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.7)}
.brand b{display:block;font:600 15px/1.2 var(--font);color:var(--text)}
.brand small{display:block;font-size:13px;color:var(--dim);margin-top:2px}
.quote-card blockquote{margin:0;font:600 20px/1.35 var(--font);letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.quote-card cite{display:block;font-style:normal;font-size:14px;color:var(--dim);margin-top:16px}

/* screenshots and frames on inner pages */
.shot{margin:var(--gap) 0 0;padding:12px}
.shot-frame{position:relative;aspect-ratio:21/10;border-radius:12px;overflow:hidden;background:#0A1020;border:1px solid var(--line2)}
.shot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:opacity 900ms var(--ease)}
.shot-frame img.alt{opacity:0}
.shot-frame.swap img.alt{opacity:1}
.shot figcaption,.ui figcaption{font-size:13px;color:var(--dim);padding:12px 8px 2px}
.ribbon{padding:12px;overflow-x:auto;margin-bottom:var(--gap)}
.ribbon img{width:100%;min-width:1100px;border-radius:8px}
.step-n{width:36px;height:36px;border-radius:999px;background:var(--grad-btn);box-shadow:var(--sheen);color:#fff;display:grid;place-items:center;font:700 15px/1 var(--font);margin-bottom:22px}
.ui{padding:12px;margin:0}
.ui-frame{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0A1020;border:1px solid var(--line2);display:grid;place-items:center;box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 60px rgba(105,88,226,.14)}
.ui-frame img{width:100%;height:100%;object-fit:contain;padding:8px}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--line);padding-top:28px}
.cols h3{font-size:16px;margin-bottom:14px}
.cols li{font-size:16px;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.cols li:last-child{border-bottom:0}
.under{margin-top:28px;font-size:15px;color:var(--dim);max-width:680px}
.roles .card{padding:36px}
.roles .card h3{font-size:24px}
.roles .card p{font-size:17px}
.invite{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;color:var(--muted)}

/* pricing */
.price-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.toggle{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.toggle button{height:40px;padding:0 20px;border-radius:9px;font:500 15px/1 var(--font);color:var(--muted);transition:background .25s var(--ease),color .25s var(--ease)}
.toggle button[aria-pressed=true]{background:#6958E2;box-shadow:var(--sheen);color:#fff}
.home .toggle{margin-top:28px}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px;text-align:left}
.plan{display:flex;flex-direction:column;gap:14px;position:relative}
.plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px}
.plan h3{margin:0;font-size:22px}
.plan.most{border-color:rgba(105,88,226,.6);box-shadow:0 0 60px rgba(105,88,226,.18)}
.plan .most-tag,.badge{position:absolute;top:-14px;left:28px;background:var(--grad-btn);box-shadow:var(--sheen);color:#fff;font:700 12px/1 var(--font);letter-spacing:.6px;text-transform:uppercase;padding:7px 12px;border-radius:8px;white-space:nowrap}
.plan-top .badge{position:static}
.plans .badge{position:static;padding:5px 9px;font-size:11px}
.price{font:700 40px/1.1 var(--font);letter-spacing:-1.4px;color:var(--text)}
.price small{display:inline;white-space:nowrap;font:400 15px/1 var(--font);letter-spacing:0;color:var(--muted);margin-left:6px}
.g4 .plan .price{font-size:34px;letter-spacing:-1px}
.as-h1{font-size:64px;line-height:1.05;letter-spacing:-1.6px;max-width:900px}
.price-sub,.plan .per{font-size:14px;color:var(--muted);min-height:21px}
.plan .desc,.plan .what{flex:1;color:var(--muted);margin:6px 0 8px}
.plan .btns{flex-direction:column;align-items:stretch;gap:10px;margin-top:auto}
.plan .btn{width:100%}
.plan .micro{font-size:12px;margin-top:6px}
.plan .buy{text-align:center;font-size:14px;align-self:center}
.pricing[data-period="annual"] .monthly,.pricing[data-period="annual"] .m{display:none}
.pricing[data-period="monthly"] .annual,.pricing[data-period="monthly"] .a{display:none}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);align-items:end}
.calc .field{margin:0}
.calc output{display:block;font:700 36px/1 var(--font);letter-spacing:-.03em;color:var(--text)}

/* guides and faq */
.guides{padding:8px 28px}
.guides ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.guides li{border-bottom:1px solid var(--line)}
.guides li:nth-last-child(-n+2){border-bottom:0}
.guides a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font:600 17px/1.3 var(--font);text-decoration:none;color:var(--text)}
.guides a:hover{color:var(--accent)}
.guides a::after{content:"→";color:var(--dim);font-weight:400;flex:none;transition:transform .25s var(--ease)}
.guides a:hover::after{transform:translateX(4px)}
.post{padding:32px;display:flex;flex-direction:column;gap:12px}
.post .k{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.post h3{font-size:20px;line-height:28px}
.post .more{margin-top:auto;color:var(--text);font-weight:500}
.faq{padding:8px 28px}
.home .faq{max-width:820px;margin:48px auto 0;text-align:left}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:700 18px/1.3 var(--font);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:9px;background:rgba(105,88,226,.25);display:grid;place-items:center;color:#fff;font:400 22px/1 var(--font);transition:transform .25s var(--ease),background .25s}
.faq details[open] summary::after{transform:rotate(45deg);background:#6958E2}
.faq details p{color:var(--muted);padding:0 40px 24px 0;max-width:760px}
@supports (interpolate-size: allow-keywords){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* key value rows: the two column grid on inner pages, the list on the home */
.kv{display:grid;grid-template-columns:200px 1fr;gap:10px 24px;font-size:16px;color:var(--muted)}
.kv b{color:var(--text);font-weight:700}
.kv>*{padding:12px 0;border-bottom:1px solid var(--line)}
.kv>*:nth-last-child(-n+2){border-bottom:0}
.kvl{margin:48px 0 0;border-top:1px solid var(--line)}
.kvl div{display:grid;grid-template-columns:220px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.kvl dt{font-weight:700}
.kvl dd{margin:0;color:var(--muted)}

/* final calls */
.final{padding:64px;color:#fff}
.final h2{color:#fff;max-width:20ch}
.final .btns{margin-top:36px}
.book{position:relative;overflow:hidden;text-align:center;padding:140px 0}
.book::before{content:"";position:absolute;left:50%;bottom:-40%;width:1200px;height:900px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(105,88,226,.5),rgba(115,23,213,.2) 45%,rgba(5,10,20,0) 72%);filter:blur(40px);pointer-events:none;animation:breathe 8s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
.book .wrap{position:relative}
.book .btns{justify-content:center;margin-top:40px}
.book .micro{margin-top:24px;font-size:14px;color:var(--muted)}

/* page level blocks: forms, article layout, account, solutions */
.page-hero{padding-top:48px}
.page-hero .lab{margin-bottom:0}
.page-hero h1{margin-top:20px}
.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--gap);align-items:start}
.field{display:block;margin-bottom:18px}
.field span{display:block;font:600 14px/1.2 var(--font);color:var(--text);margin-bottom:8px}
.field small{display:block;font-size:13px;color:var(--dim);margin-top:6px}
.field input,.field select,.field textarea{width:100%;min-width:0;height:50px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.05);padding:0 16px;font:400 16px/1.2 var(--font);color:var(--text);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);color-scheme:dark}
.field select option{background:#0A1020;color:#fff}
.field textarea{height:auto;min-height:96px;padding:14px 16px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(234,234,234,.38)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--purple);background:rgba(255,255,255,.07);box-shadow:0 0 0 3px rgba(105,88,226,.25)}
.field input:user-invalid{border-color:#FF6B6B}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:22px}
.plans label{display:block;position:relative;cursor:pointer}
.plans input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;pointer-events:none}
.plans .opt{display:block;border:1px solid var(--line2);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.04);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);min-height:100%}
.plans input:checked+.opt{border-color:var(--purple);background:rgba(105,88,226,.2);box-shadow:0 0 0 1px var(--purple)}
.plans input:focus-visible+.opt{outline:2px solid var(--accent);outline-offset:2px}
.plans b{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font:600 16px/1.2 var(--font)}
.plans small{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.4}
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{position:relative;padding:14px 0 14px 48px;border-bottom:1px solid var(--line);color:var(--muted);font-size:16px}
.steps li:last-child{border-bottom:0}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:999px;background:var(--grad-btn);box-shadow:var(--sheen);color:#fff;display:grid;place-items:center;font:700 14px/1 var(--font)}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0A1020;border:1px solid var(--line2);display:grid;place-items:center;color:var(--muted);font-size:14px;text-align:center;padding:16px}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:.45}
.video span{position:relative;background:#EAEAEA;border-radius:999px;padding:10px 16px;font:600 14px/1 var(--font);color:#050A14}
.state{display:none}
.page[data-state="thanks"] .state-form{display:none}
.page[data-state="thanks"] .state-thanks{display:block}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.toc a{font:500 14px/1 var(--font);color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:11px 16px;text-decoration:none;transition:border-color .2s,color .2s}
.toc a:hover{color:var(--text);border-color:rgba(105,88,226,.6)}
.person{display:flex;gap:20px;align-items:center}
.person .ava{width:72px;height:72px;border-radius:999px;background:var(--grad-btn);box-shadow:var(--sheen);display:grid;place-items:center;font:700 22px/1 var(--font);color:#fff;flex:none}
.person b{display:block;font:700 18px/1.2 var(--font)}
.person p{margin-top:4px}
.sol-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gap);align-items:center}
.sol-hero .ui-frame{aspect-ratio:4/3}
.same{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.same ul li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:16px}
.same ul li:last-child{border-bottom:0}
.same h3{margin-bottom:8px}
.others{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;align-items:center}
.others a{font:600 15px/1 var(--font);color:var(--accent);text-decoration:none}
.others a:hover{text-decoration:underline;text-underline-offset:4px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start;min-width:0}
.prose{max-width:68ch;min-width:0;overflow-wrap:anywhere}
.prose pre,.prose table,.prose figure,.prose img{max-width:100%}
.prose pre{white-space:pre;overflow-wrap:normal}
.prose h2{font-size:32px;margin:48px 0 16px;max-width:none}
.prose h3{font-size:20px;margin:28px 0 10px}
.prose p{font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 16px;text-wrap:pretty}
.prose ul,.prose ol{margin:0 0 18px 22px;padding:0;list-style:disc;color:var(--muted);font-size:17px;line-height:1.6}
.prose ol{list-style:decimal}
.prose li{margin-bottom:6px}
.prose figure{margin:24px 0}
.prose .callout{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin:28px 0}
.prose .callout .lab{margin-bottom:8px;display:block}
.prose .callout p{margin:0}
.prose b{color:var(--text)}
.aside{position:sticky;top:140px}
.aside .card{margin-bottom:var(--gap)}
.aside h3{font-size:18px}
.aside ul li{padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.aside ul li:last-child{border-bottom:0}
.aside a{text-decoration:none;color:var(--muted)}
.aside a:hover{color:var(--accent)}
table.cmpt,table.t{width:100%;border-collapse:collapse;font-size:15px}
table.cmpt th,table.t th{font:700 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:0 12px 14px 0;border-bottom:1px solid var(--line)}
table.cmpt td,table.t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top}
table.cmpt td:first-child{color:var(--text);font-weight:600;width:24%}
table.cmpt tr:last-child td,table.t tr:last-child td{border-bottom:0}
table.cmpt td.grp{font:700 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);padding-top:24px;border-bottom:0}
.pricing table.cmpt th:not(:first-child),.pricing table.cmpt td:not(:first-child){text-align:center}
.pricing table.cmpt td:not(:first-child){color:var(--text)}
.tw{overflow-x:auto}
.acc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--gap);align-items:start}
.side a{display:block;padding:12px 16px;border-radius:12px;text-decoration:none;color:var(--muted);font:500 15px/1.2 var(--font)}
.side a.on,.side a:hover{background:rgba(105,88,226,.2);color:var(--text)}
.qty{display:inline-flex;align-items:center;gap:8px}
.qty button{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);font:600 18px/1 var(--font)}
.qty output{min-width:24px;text-align:center;font:600 16px/1 var(--font);color:var(--text)}
.sum{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--muted)}
.sum:last-of-type{border-bottom:0;font-weight:600;color:var(--text)}
.ex{font-size:12px;color:var(--accent);background:rgba(105,88,226,.18);border:1px solid rgba(105,88,226,.4);border-radius:999px;padding:6px 10px;display:inline-block}
.notice{background:rgba(105,88,226,.12);border:1px solid rgba(105,88,226,.35);border-radius:12px;padding:12px 16px;font-size:14px;color:var(--muted);margin-top:16px}
.notice.ok{border-color:rgba(80,200,140,.45);background:rgba(80,200,140,.1)}
.notice.err{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.1)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* articles: the migrated blog, guides, knowledge base, product updates */
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--dim);margin-top:18px}
.art-meta b{color:var(--muted);font-weight:500}
.cover{margin:32px 0 0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line2);background:#0A1020;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.cover img{width:100%;height:auto;max-height:520px;object-fit:cover}
.prose img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--line2);margin:8px 0}
.prose figure img{margin:0}
.prose figcaption{font-size:13px;color:var(--dim);padding:10px 4px 0}
.prose table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 20px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.prose th{color:var(--text);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.prose blockquote{margin:20px 0;padding:16px 24px;border-left:3px solid var(--purple);background:var(--card);border-radius:0 12px 12px 0;color:var(--text);font-weight:500}
.prose code{font:500 14px/1.5 ui-monospace,Consolas,monospace;background:rgba(255,255,255,.08);border-radius:6px;padding:2px 6px;color:var(--accent2)}
.prose pre{background:#0A1020;border:1px solid var(--line2);border-radius:12px;padding:16px 20px;overflow-x:auto;color:var(--text);font:400 14px/1.5 ui-monospace,Consolas,monospace;margin:0 0 20px}
.prose pre code{background:none;padding:0;color:inherit}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose h4{font-size:17px;margin:20px 0 8px}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(185,174,255,.35)}
.prose a:hover{text-decoration-color:var(--accent)}
.prose strong,.prose b{color:var(--text)}
.filter{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
.filter input{flex:1 1 280px;height:48px;border:1px solid var(--line2);border-radius:12px;background:rgba(255,255,255,.05);padding:0 16px;font:400 16px/1.2 var(--font);color:var(--text);color-scheme:dark}
.filter input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(105,88,226,.25)}
.chipbar{display:flex;flex-wrap:wrap;gap:8px}
.chipbar a,.chipbar button{font:500 14px/1 var(--font);color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:11px 16px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.chipbar a:hover,.chipbar button:hover{color:var(--text);border-color:rgba(105,88,226,.6)}
.chipbar .on{background:#6958E2;color:#fff;box-shadow:var(--sheen);border-color:transparent}
.plist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.plist li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.plist li:hover{transform:translateY(-2px);border-color:rgba(105,88,226,.5)}
.plist li.hide{display:none}
.plist .th{width:96px;height:64px;border-radius:10px;object-fit:cover;background:#0A1020;border:1px solid var(--line)}
.plist a.t{font:700 17px/1.3 var(--font);color:var(--text);text-decoration:none}
.plist a.t:hover{color:var(--accent)}
.plist .d{font-size:14px;color:var(--muted);margin-top:4px}
.plist .m{font-size:12px;color:var(--dim);margin-top:6px}
.plist .m span{color:var(--accent);margin-right:10px}
.grp{margin-top:56px}
.grp h2{font-size:28px;margin-bottom:20px}
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px}
.ind{padding:32px;display:flex;flex-direction:column;gap:10px;text-decoration:none}
.ind .k{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.ind h3{font-size:20px;line-height:1.3}
.ind p{color:var(--muted);font-size:15px}
.ind .more{margin-top:auto;color:var(--text);font-weight:500}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;color:var(--text);transition:border-color .2s,background .2s}
.social a:hover{border-color:rgba(105,88,226,.6);background:var(--card2)}
.social svg{width:18px;height:18px}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:40px}

/* footer */
footer{position:relative;overflow:hidden;border-top:1px solid var(--line);padding:72px 0 40px;color:var(--muted)}
footer::before{content:"";position:absolute;left:50%;top:-300px;width:1000px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(105,88,226,.18),rgba(5,10,20,0) 70%);filter:blur(40px);pointer-events:none}
footer .wrap{position:relative}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px}
footer .logo img{height:30px;width:auto}
footer .tag{margin-top:18px;max-width:320px}
footer h4{color:var(--text);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin:0 0 16px}
footer li{margin-bottom:10px}
footer li a{text-decoration:none}
footer li a:hover{color:var(--text)}
footer address{font-style:normal;line-height:22px}
.fbot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:14px}
.fbot ul{display:flex;gap:20px}
.fbot a{text-decoration:none}

/* mobile trial bar, cookie consent */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(5,10,20,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));flex-direction:column;align-items:stretch}
.mbar .btn{width:100%}
.mbar .micro{margin-top:6px;font-size:12px;text-align:center}
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;background:rgba(10,16,32,.96);border:1px solid var(--line2);border-radius:16px;padding:18px 20px;box-shadow:0 20px 60px rgba(0,0,0,.5);display:none;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.consent.show{display:flex;animation:fadeup .4s var(--ease)}
.consent p{flex:1 1 260px}
.consent .btns{gap:8px}
.consent .btn{padding:8px 14px;font-size:14px}
.consent .btn-primary{padding:6px 6px 6px 14px}
.consent .btn-primary::after{width:26px;height:26px;background-size:13px}
.consent a{color:var(--text)}

/* reveals: opacity 0, 60px down, 5px blur, as the reference's interactions start */
.js .rv{opacity:0;transform:translateY(60px);filter:blur(5px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none;filter:none}
/* Above the fold is present at rest. The hero text carries class="rv" in the
   mockup markup, so removing it from the auto reveal list is not enough: these
   selectors stop it ever starting hidden. The product visual still animates. */
.js .hero .left .rv,.js .hero .left.rv,.js .page-hero > .rv,.js .page-hero .lede.rv,
.js .hero .left .rv.k1,.js .hero .left .rv.k2,.js .hero .left .rv.k3,.js .hero .left .rv.k4{
  opacity:1;transform:none;filter:none;transition:none
}
.js .rv.k1{--d:.1s}.js .rv.k2{--d:.2s}.js .rv.k3{--d:.3s}.js .rv.k4{--d:.4s}

@media (max-width:1100px){
  .panel{left:auto;right:-360px;width:1000px}
  .rail,.plan-grid,.g4{grid-template-columns:1fr 1fr}
  .fgrid{grid-template-columns:1fr 1fr 1fr}
  .metric{grid-template-columns:1fr;gap:16px}
  .nav>ul{gap:22px}
}
@media (max-width:1024px){
  h1{font-size:52px;letter-spacing:-1.2px}
  h2{font-size:38px}
  .g3{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .art{grid-template-columns:minmax(0,1fr)}.aside{position:static}
  .acc{grid-template-columns:minmax(0,1fr)}.side{display:flex;flex-wrap:wrap;gap:4px}
  .final{padding:48px}
  .calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:820px){
  :root{--sec:72px;--pad:24px}
  h1{font-size:40px;line-height:1.08;letter-spacing:-1px}h2{font-size:32px;line-height:1.15;letter-spacing:-.8px}
  .hero h1{font-size:48px;line-height:54px;letter-spacing:-1.2px}
  .wrap{padding-inline:16px}
  .cap{height:58px}.caplogo img{height:23px}
  [id]{scroll-margin-top:90px}
  .hero{padding:32px 0 56px;min-height:0}.hero .left{max-width:none}
  .panel{position:static;width:100%;margin-top:40px}.frame .shot{height:280px}
  .hero .light::before{left:20%;width:800px;height:600px}
  .rail,.plan-grid,.g2,.g3,.g4,.sec2,.cmp,.tab,.fgrid,.two,.sol-hero,.same,.frow,.plans{grid-template-columns:1fr}
  .rail{padding-top:0;padding-left:32px;gap:32px}.rail::before,.rail::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto;background:linear-gradient(180deg,rgba(255,255,255,0),#6958E2);transform-origin:top}.js .rail::before,.js .rail::after{transform:scaleY(0)}.js .rail.in::before,.js .rail.in::after{transform:scaleY(1)}.rail>div::before{left:-36px;top:6px}
  .chips{gap:16px 28px}.chips li{max-width:none;flex:1 1 150px}
  .tab{padding:24px}.tab .img img{height:220px}
  .num{font-size:88px;letter-spacing:-3px}
  .home .pull{grid-template-columns:1fr}.pull blockquote{font-size:22px;line-height:1.3}
  .kv{grid-template-columns:1fr;gap:4px 0}.kv>*{padding:8px 0;border-bottom:0}.kv b{padding-top:14px;border-top:1px solid var(--line)}
  .kvl div{grid-template-columns:1fr;gap:6px}
  .hub,.contact-grid{grid-template-columns:1fr}
  .plist li{grid-template-columns:72px 1fr}.plist .th{width:72px;height:52px}
  .quote{width:300px}
  .book{padding:88px 0}
  .final{padding:32px 24px}
  .guides,.faq{padding:4px 20px}.guides ul{grid-template-columns:1fr}.guides li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.guides li:last-child{border-bottom:0}
  .faq summary{font-size:16px}.faq details p{padding-right:0}
  .btns .btn{flex:1 1 auto}
  .big{font-size:52px}
  .bento .card{min-height:0}
  .shot-frame{aspect-ratio:4/3}
  .price-sub{min-height:0}
  body{padding-bottom:96px}
  .mbar{display:flex}
  table.t{display:block;overflow-x:auto;white-space:nowrap}
  .as-h1{font-size:40px;line-height:1.08;letter-spacing:-1px}
  .consent{left:10px;right:10px;bottom:100px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js .rv,.js .hero h1 .w,.js .panel,.js .num{opacity:1!important;transform:none!important;filter:none!important}
  .js .rail::before,.js .rail::after,.js .rail>div::before{transform:none!important}
}


/* ---------------------------------------------------------------- the sheets
   Each one is positioned against the capsule rather than its own item: the
   two big ones span it, the two small ones sit flush to one end. A 1,120px
   sheet hanging off the second item runs past the right edge of a 1,280px
   laptop, which is why. Hover, keyboard focus and a tap all open one, and
   there is a short delay in and a longer one out so crossing the bar with a
   mouse does not make the panels flicker. */
.mega{position:absolute;top:calc(100% + 14px);z-index:60;width:var(--pw,auto);
  background:var(--pop);border:1px solid var(--line);border-radius:24px;box-shadow:var(--pop-shadow);padding:26px;
  max-height:calc(100vh - 150px);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top center;
  transition:opacity .18s var(--ease),transform .22s var(--ease),visibility .18s}
/* site wide rules set left and right together, which over constrains a box
   that also has a width, so each of these has to clear the edge it is not on */
.hang-w>.mega{left:0;right:0;width:auto}
.hang-l>.mega{left:0;right:auto;max-width:100%}
.hang-r>.mega{right:0;left:auto;max-width:100%}
.mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nl:hover>.mega,.nl:focus-within>.mega,.nl.open>.mega{opacity:1;visibility:visible;transform:none}
.nl.shut>.mega{opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985)}
.mega-in{display:grid;gap:22px}
.mega-solutions{grid-template-columns:minmax(0,2.35fr) minmax(0,1fr) minmax(0,1fr)}
.mega-industries{grid-template-columns:repeat(4,minmax(0,1fr))}
.mega-how{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1.05fr)}
.mega-res{grid-template-columns:repeat(3,minmax(0,.8fr)) minmax(0,1.1fr)}
.mcol{min-width:0}
/* Safety Orange measures 2.58:1 on white and cannot carry an 11px heading.
   These are the deep violet at 10.13:1. The light brand colours appear below
   as icon tiles and bullet dots, which is the job the brand guide gives them. */
.mhead{display:block;font:700 11px/1.2 var(--font);letter-spacing:1.3px;text-transform:uppercase;color:var(--mhead);margin:0 0 12px}
.mlede{font-size:13px;line-height:19px;color:var(--muted);margin:-6px 0 14px;max-width:46ch}
.mpacks{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mpack{display:block;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--pop2);text-decoration:none;min-width:0;
  transition:border-color .16s,box-shadow .16s}
.mpack:hover{border-color:var(--purple);box-shadow:0 10px 24px rgba(121,46,222,.13)}
.mpack-h{display:flex;align-items:center;gap:7px;row-gap:4px;flex-wrap:wrap}
.mpack-n{font-weight:700;font-size:16px;letter-spacing:-.2px;color:var(--text);margin-right:auto;min-width:0}
.mpack-p{font-size:11.5px;color:var(--muted);white-space:nowrap;margin-left:auto;flex:0 0 auto}
.mpack-w{display:block;font-size:13px;line-height:19px;color:var(--muted);margin-top:7px}
.mpack-f{margin-top:10px;display:grid;gap:5px}
.mpack-f li{font-size:12.5px;line-height:17px;color:var(--text);opacity:.86;padding-left:15px;position:relative}
.mpack-f li::before{content:"";position:absolute;left:1px;top:6px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.mpack-s{display:block;margin-top:11px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;line-height:17px;color:var(--muted)}
.mpack .mic{width:26px;height:26px;border-radius:8px}
.mpack .mic svg{width:14px;height:14px}
.chip{font:600 9.5px/1 var(--font);letter-spacing:.4px;text-transform:uppercase;padding:3px 6px;border-radius:999px;white-space:nowrap;
  background:var(--orange-pale,#FDEEE4);color:var(--orange-dk,#A34A08);border:1px solid rgba(163,74,8,.22)}
.mrow{display:block;padding:8px 10px 8px 8px;border-radius:12px;text-decoration:none;transition:background .16s}
.mrow-ic{display:flex;gap:11px;align-items:flex-start}
.mrow:hover{background:var(--pop2)}
.mrow-b{display:block;min-width:0}
.mrow-t{display:block;font-weight:600;font-size:15px;line-height:22px;color:var(--text)}
.mrow:hover .mrow-t{color:var(--accent)}
.mrow-n{display:block;font-size:12.5px;line-height:18px;color:var(--muted);margin-top:1px}
.mrow-tight{padding:6px 10px 6px 8px}
.mic{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--pop2);color:var(--accent);transition:transform .16s var(--ease)}
.mic svg{width:16px;height:16px}
.mrow:hover .mic{transform:scale(1.06)}
/* a grid item defaults to min-width:auto, so a row wider than its track
   pushes out of the column instead of wrapping inside it */
.mflat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 6px}
.mflat>*{min-width:0}
.mflat .mrow-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mmore{display:inline-block;margin:10px 0 0 8px;font-size:13px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.mnote{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--pop2)}
.mnote p{font-size:13px;line-height:20px;color:var(--muted)}
.mnote .link{display:block;margin-top:10px;font-size:13px}
.mbtn{margin:14px 0 0;width:100%;height:42px;border-radius:999px;justify-content:center;display:flex;align-items:center;font-weight:600}
.mbtn::after{content:none}
.mfine{display:block;margin-top:9px;font-size:11.5px;line-height:16px;color:var(--muted);text-align:center}
/* the phone menu: the same sections, collapsed, in a card under the capsule */
.mpanel{display:none;margin-top:10px;background:var(--pop);border:1px solid var(--line);border-radius:22px;padding:8px 20px 20px;box-shadow:var(--pop-shadow)}
.mpanel.open{display:block;animation:fadeup .3s var(--ease)}
.mpanel .mtop,.mpanel .mgrp-t{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 0;
  font-weight:500;font-size:17px;color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)}
.mpanel .mgrp-t .cv{width:12px;height:8px;opacity:.6;transition:transform .2s var(--ease)}
.mpanel .mgrp-t[aria-expanded=true] .cv{transform:rotate(180deg)}
.mgrp-p{display:none;padding:4px 0 12px}
.mgrp-p.open{display:block}
.mgrp-p a{display:block;padding:9px 0 9px 14px;font-size:15.5px;color:var(--muted);text-decoration:none}
.mgrp-p a:hover,.mgrp-p a:focus{color:var(--text)}
.mgrp-all{font-weight:600!important;color:var(--accent)!important}
.mgrp-h{display:block;padding:14px 0 4px 14px;font:700 11px/1.2 var(--font);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.mpanel .btns{padding-top:16px}
/* the packs, on the page behind the menu */
.ticks{display:grid;gap:9px}
.ticks li{position:relative;padding-left:26px;font-size:15px;line-height:23px;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--lav)}
.ticks li::after{content:"";position:absolute;left:4.5px;top:8px;width:6px;height:3px;border-left:2px solid var(--purple);border-bottom:2px solid var(--purple);transform:rotate(-45deg)}
.pack-price{font-size:15px;color:var(--accent);font-weight:600}
.pack-src{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:20px;color:var(--muted)}
.pack-src strong{color:var(--text);font-weight:600}
@media (max-width:1280px){
  .pnav>ul{gap:14px}
  .pnav .nl>a{padding:9px 7px;font-size:14.5px}
  .cap{gap:16px;padding-left:20px}
  .plog{padding:0 4px}
  .pact .btn{padding:0 16px}
}
@media (max-width:1120px){
  .pnav,.pact{display:none}
  .pburger{display:inline-flex}
  .cap{justify-content:space-between;padding:0 12px 0 20px}
  .mega-solutions,.mega-industries,.mega-how,.mega-res{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .mega{transition:none}
  .pnav .cv,.mic,.mpanel .mgrp-t .cv{transition:none}
}


/* ------------------------------------------------------------- proof pages
   /customers/, /success-stories/ and /product-updates/. The last two were
   generated by the same list template as the knowledge base, so they showed
   titles and truncated excerpts. These are the pieces the real pages need. */

/* the figures above the story cards, each one from a published story */
.pfrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pf{display:block;padding:20px 18px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.pf:hover{border-color:var(--purple);box-shadow:0 12px 30px rgba(121,46,222,.12);transform:translateY(-2px)}
.pf-n{display:block;font:700 34px/1.05 var(--display);letter-spacing:-1px;color:var(--violet);font-variant-numeric:tabular-nums}
.pf-u{display:block;font:600 15px/1.2 var(--font);color:var(--text);margin-top:4px}
.pf-c{display:block;font-size:13px;line-height:19px;color:var(--muted);margin-top:9px}
.story .brand-art img{object-fit:cover}

/* one story: the words on the left, the number and the picture on the right */
.storynav{display:flex;gap:18px;flex-wrap:wrap;margin-top:24px}
.storynav .link{font-size:14px}
.story-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:start}
.story-main{min-width:0}
.story-fig{min-width:0;position:sticky;top:120px}
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center;margin-top:24px}
.ba-c{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--card2)}
.ba-after{border-color:rgba(121,46,222,.35);background:var(--lav)}
.ba-k{display:block;font:700 11px/1.2 var(--font);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ba-after .ba-k{color:var(--violet)}
.ba-c p{font-size:15px;line-height:22px;color:var(--text)}
.ba-arrow{font-size:22px;color:var(--purple)}
.pull{margin:28px 0 0;padding:20px 24px;border-left:3px solid var(--purple);background:var(--card2);border-radius:0 16px 16px 0;font-size:18px;line-height:28px;color:var(--text);font-style:normal}
.pull cite{display:block;margin-top:12px;font-size:14px;font-style:normal;color:var(--muted)}
.bignum{padding:28px 24px;border-radius:20px;background:var(--lav);border:1px solid rgba(121,46,222,.22);text-align:center}
.bn-a{display:block;font:700 54px/1 var(--display);letter-spacing:-2px;color:var(--violet);font-variant-numeric:tabular-nums}
.bn-b{display:block;font:600 20px/1.2 var(--display);color:var(--violet);margin-top:6px}
.bn-c{display:block;font-size:13px;line-height:19px;color:var(--muted);margin-top:12px}

/* the changelog */
.current{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px;padding:18px 22px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.cur-k{font:700 11px/1.2 var(--font);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.cur-v{font:700 26px/1 var(--display);color:var(--violet);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.cur-d{font-size:14px;color:var(--muted)}
.current .btns{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.rel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:26px 0;border-top:1px solid var(--line)}
.rel:first-child{border-top:0;padding-top:0}
.rel-v{position:sticky;top:120px;align-self:start}
.rel-n{display:block;font:700 26px/1 var(--display);letter-spacing:-.6px;color:var(--text);font-variant-numeric:tabular-nums}
.rel-d{display:block;font-size:13px;color:var(--muted);margin-top:6px}
.cl{display:grid;gap:14px}
.cl li{display:grid;grid-template-columns:78px minmax(0,1fr);gap:14px;align-items:start}
.ck{display:inline-block;justify-self:start;font:700 10px/1 var(--font);letter-spacing:.7px;text-transform:uppercase;padding:5px 8px;border-radius:999px;white-space:nowrap}
.ck-new{background:var(--lav);color:var(--violet)}
.ck-fix{background:var(--orange-pale,#FDEEE4);color:var(--orange-dk,#A34A08)}
.ck-security{background:var(--turq-ink-bg,#EAFBF5);color:var(--turq-ink,#0F7A62)}
.ck-improved{background:#E6F4FA;color:#1E6C87}
.ck-note{background:var(--card2);color:var(--muted)}
.ci{font-size:15px;line-height:23px;color:var(--muted);min-width:0}
.ci b{display:block;color:var(--text);font-weight:600;font-size:15.5px;margin-bottom:2px}
@media (max-width:1024px){
  .pfrow{grid-template-columns:1fr 1fr}
  .story-row{grid-template-columns:minmax(0,1fr);gap:32px}
  .story-fig{position:static;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:center}
  .story-fig .card{margin-top:0!important}
  .rel{grid-template-columns:minmax(0,1fr);gap:16px}
  .rel-v{position:static;display:flex;align-items:baseline;gap:12px}
  .rel-d{margin-top:0}
}
@media (max-width:640px){
  .pfrow{grid-template-columns:1fr}
  .ba{grid-template-columns:minmax(0,1fr);gap:10px}
  .ba-arrow{transform:rotate(90deg);justify-self:center}
  .story-fig{grid-template-columns:minmax(0,1fr)}
  .cl li{grid-template-columns:minmax(0,1fr);gap:6px}
  .current{border-radius:20px}
  .current .btns{margin-left:0;width:100%}
}

/* the price lists INSYNCR is already on, named on /partnerships/ only */
.resellers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:8px}
.resellers li{display:grid;place-items:center;min-height:96px;padding:18px 14px;border:1px solid var(--line);border-radius:18px;background:var(--card);text-align:center}
.resellers span{font:600 19px/1.25 var(--display);letter-spacing:-.3px;color:var(--text)}
@media (max-width:820px){.resellers{grid-template-columns:1fr 1fr}}


/* --------------------------------------------------------- prices and sums
   Most INSYNCR customers are outside the euro zone and the site quoted euros
   only, so the reader did the conversion in their head before deciding
   whether to read on. */
.curbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.curbar-k{font:500 14px/1 var(--font);color:var(--muted)}
.curtoggle button{height:34px;padding:0 13px;font-size:13px;letter-spacing:.2px}
.curnote{flex-basis:100%;margin:2px 0 0;font-size:12.5px;line-height:18px;color:var(--muted);max-width:62ch}
.price-head{gap:18px;flex-wrap:wrap}
/* the helper line under each field wraps to different depths, and the
   shared .calc rule ends its items, which left the row ragged */
.calc4{grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;row-gap:18px}
.calc .field small{display:block;margin-top:6px;font-size:12px;line-height:17px;color:var(--dim)}
.card.hollow.accent{border-color:rgba(121,46,222,.4);background:var(--lav)}
.card.hollow.accent output{color:var(--violet)}
.card.hollow.neg output{color:var(--orange-dk,#A34A08)}
/* the comparison table */
.vswrap{overflow-x:auto;margin-top:24px}
.vs{width:100%;border-collapse:collapse;min-width:620px}
.vs caption{caption-side:bottom;text-align:left;padding-top:14px}
.vs th,.vs td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.vs thead th{font:700 11px/1.2 var(--font);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);padding-bottom:10px}
.vs tbody th{font-weight:600;font-size:16px;color:var(--text);width:44%}
.vs tbody th a{color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(121,46,222,.35)}
.vs tbody th a:hover{text-decoration-color:var(--purple)}
.vs-n{display:block;margin-top:5px;font:400 13px/19px var(--font);color:var(--muted)}
.vs-y{font:700 19px/1.2 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-d{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.vs-more{color:var(--orange-dk,#A34A08);font-weight:600}
.vs-less{color:var(--turq-ink,#0F7A62);font-weight:600}
.vs-na{color:var(--dim);font-style:normal}
.vs-g th{padding:22px 16px 8px;border-bottom:0;font:700 11px/1.2 var(--font);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted)}
.vs tbody tr:first-child th{padding-top:6px}
.vs-us{background:var(--lav)}
.vs-us th,.vs-us .vs-y{color:var(--violet)}
.vs-us th:first-child{border-top-left-radius:14px;border-bottom-left-radius:14px}
@media (max-width:1024px){.calc4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.calc4{grid-template-columns:minmax(0,1fr)}.curbar{gap:8px}}

/* the plan table, now 45 rows rather than 14 */
.cmpt .yes{color:var(--turq-ink,#0F7A62);font-weight:700;font-size:15px;line-height:1}
/* The same size and weight as the tick so the column scans as a pair, but
   muted rather than red. A plan with one tick and fifty red crosses reads as
   broken; the same plan with fifty grey ones reads as smaller, which is what
   it is. */
.cmpt .no{color:var(--dim);font-weight:700;font-size:13.5px;line-height:1;opacity:.55}
.cmpt tbody tr:hover td{background:var(--card2)}
.cmpt td:first-child{width:46%}
.cmpt .grp{position:sticky;left:0}
.cmpt thead th{position:sticky;top:96px;background:var(--card);z-index:2}

/* the pack pages */
.packprice{margin-top:22px;font:600 20px/1.3 var(--display);color:var(--violet)}
.packprice-alt{font:400 16px/1.3 var(--font);color:var(--muted);margin-left:8px}
.srclist{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.srclist li{position:relative;padding-left:16px;font-size:15px;line-height:22px;color:var(--muted)}
.srclist li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--purple)}
ul.plain li{padding:9px 0;border-bottom:1px solid var(--line)}
ul.plain li:last-child{border-bottom:0}
ul.plain a{font-weight:600;color:var(--text);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(121,46,222,.35)}
@media (max-width:640px){.srclist{grid-template-columns:minmax(0,1fr)}}

/* the three problems, on the home page above the argument */
.pick-c{display:block;text-decoration:none;padding:28px}
.pick-c .pick-i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--lav);color:var(--violet);margin-bottom:18px}
.pick-c .pick-i svg{width:22px;height:22px}
.pick-c h3{font-size:20px;line-height:27px;letter-spacing:-.3px}
.pick-c p{margin-top:12px;font-size:15px;line-height:23px;color:var(--muted)}
.pick-c .more{display:inline-block;margin-top:18px;font-weight:600;font-size:14px;color:var(--accent)}
.pick-c:hover .pick-i{background:var(--purple);color:#fff}

/* the one line that takes a reader from a ranking article to the product */
.route{display:flex;gap:16px;align-items:flex-start;margin:0 0 32px;padding:20px 22px;border-radius:16px;
  background:var(--lav);border:1px solid rgba(121,46,222,.22)}
.route-i{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--violet)}
.route-i svg{width:19px;height:19px}
.route-b{min-width:0}
.route-b b{display:block;font-size:16px;line-height:24px;color:var(--text)}
.route-b p{margin:6px 0 10px;font-size:14.5px;line-height:22px;color:var(--muted)}
.route-b .link{font-size:14px}
@media (max-width:560px){.route{flex-direction:column;gap:12px;padding:18px}}

/* the plan name on an industry page is a link now, and the For IT page opens
   with the short version rather than ending with it */
.plan-link{color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;
  text-decoration-color:rgba(255,255,255,.5)}
.plan-link:hover{text-decoration-color:#fff}
.it-top{display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.it-top>div:first-child{flex:1 1 380px;min-width:0}
.it-top .btns{flex:0 0 auto;margin:0}
@media (max-width:720px){.it-top .btns{width:100%}}

/* the list price a reseller quotes against, beside the form */
.pcells{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcell{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.pcell-n{display:block;font:600 15px/1.2 var(--display);color:var(--text)}
.pcell-p{display:block;margin-top:5px;font:700 17px/1.2 var(--display);color:var(--violet);font-variant-numeric:tabular-nums}
.pcell-u{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
@media (max-width:480px){.pcells{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ search
   Finding 6: 187 pages and no way to search them. The index is static and
   the matching happens in the page, so nothing a visitor types leaves the
   browser. */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ss{position:relative;flex:0 0 auto}
.ss-l{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.14);color:rgba(255,255,255,.9);transition:background .18s,width .18s}
.ss-l:focus-within{background:rgba(255,255,255,.22)}
.ss-l svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.ss input{width:92px;border:0;background:none;color:#fff;font:400 14px/1 var(--font);outline:none;transition:width .2s var(--ease)}
.ss input::placeholder{color:rgba(255,255,255,.66)}
.ss input:focus{width:170px}
.ss input::-webkit-search-cancel-button{filter:invert(1);opacity:.6}
.ss-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(430px,86vw);z-index:70;
  background:var(--pop);border:1px solid var(--line);border-radius:18px;box-shadow:var(--pop-shadow);
  padding:10px;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .16s var(--ease),transform .18s var(--ease),visibility .16s}
.ss.has .ss-panel{opacity:1;visibility:visible;transform:none}
.ss-status{margin:2px 6px 8px;font:500 11.5px/1.3 var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ss-status:empty{display:none}
.ss-hit{display:block;padding:9px 10px;border-radius:12px;text-decoration:none;transition:background .14s}
.ss-hit:hover,.ss-hit:focus-visible{background:var(--pop2)}
.ss-k{display:block;font:700 10px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ss-t{display:block;margin-top:3px;font-weight:600;font-size:15px;line-height:21px;color:var(--text)}
.ss-d{display:block;margin-top:2px;font-size:12.5px;line-height:18px;color:var(--muted);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* on a phone it sits at the top of the menu panel and opens downward */
.ss-m{margin:8px 0 6px}
.ss-m .ss-l{background:var(--pop2);color:var(--text);height:44px}
.ss-m .ss-l svg{color:var(--muted)}
.ss-m input{color:var(--text);width:100%;font-size:16px}
.ss-m input:focus{width:100%}
.ss-m input::placeholder{color:var(--muted)}
.ss-m .ss-panel{position:static;width:auto;box-shadow:none;border:0;padding:6px 0 0;
  opacity:1;visibility:visible;transform:none;background:none}
.ss-m .ss-panel:empty{display:none}
@media (max-width:1280px){.ss input{width:74px}.ss input:focus{width:130px}}

/* the question each industry asks first, and the answer */
.objn{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:28px;align-items:start}
.objn-q{margin:0;padding:26px 28px;border-radius:18px;background:var(--lav);
  border:1px solid rgba(121,46,222,.22);font:500 21px/1.42 var(--display);letter-spacing:-.3px;color:var(--violet)}
.objn-q::before{content:"\201C";display:block;font:700 40px/0.7 var(--display);color:var(--purple);opacity:.45;margin-bottom:10px}
.objn-a{padding-top:4px}
.objn-a p{font-size:16.5px;line-height:1.6;color:var(--muted);max-width:60ch}
@media (max-width:820px){.objn{grid-template-columns:minmax(0,1fr);gap:20px}.objn-q{font-size:19px;padding:22px}}

/* ------------------------------------------------------- newsletter, footer
   One field in the first footer column, under the tagline. It is the only
   place on the site that asks for an address without asking for a trial, so
   it says what arrives and how to stop before it asks. */
.nlf{margin-top:22px;max-width:360px}
.nlf label{display:block;font-weight:600;font-size:14.5px;line-height:20px;color:var(--text);margin-bottom:9px}
.nlf-row{display:flex;gap:8px;align-items:stretch}
.nlf input[type=email]{flex:1 1 auto;min-width:0;height:42px;padding:0 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--pop2);color:var(--text);font:400 15px/1 var(--font)}
.nlf input[type=email]::placeholder{color:var(--muted)}
.nlf input[type=email]:focus{outline:2px solid var(--purple);outline-offset:1px;border-color:transparent}
.nlf .btn{flex:0 0 auto;height:42px;padding:0 17px;font-size:14.5px}
.nlf-note{margin:9px 0 0;font-size:12.5px;line-height:17px;color:var(--muted)}
.nlf .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:560px){.nlf-row{flex-wrap:wrap}.nlf .btn{width:100%}}

/* ------------------------------------------------- the capsule on a laptop
   Found 28 September by measuring rather than looking: at 1440 the nav
   needed 685px of content inside the 532px box flexbox had given it, so
   Resources and For IT rendered underneath the search field.

   It is not a laptop problem. The capsule stops growing at about 1226px
   whatever the viewport does, and the row needs roughly 1340, so it
   overlapped at EVERY width above the burger breakpoint, 1920 included. The
   first version of this fix capped at 1560 on the assumption that wide
   screens were fine; measuring 1561, 1600 and 1920 showed 43px of overlap
   still there. Hence no upper bound.

   The sweep reported 1920 clean the whole time because it looks for page
   level horizontal overflow and console errors. Two elements sitting on top
   of each other inside a fixed width bar are neither, so no width would ever
   have caught this. Measuring element geometry is the only thing that does. */
@media (min-width:1121px){
  /* the navigation is the part that must not be squeezed */
  .pnav{flex:0 0 auto}
  .pact{flex:1 1 auto;justify-content:flex-end;min-width:0}
  .pnav>ul{gap:13px}
  .pnav .nl>a{padding:9px 7px;font-size:14.5px}
  .cap{gap:14px;padding-left:20px;position:relative}
  .plog{padding:0 4px;flex:0 0 auto}
  /* a button may not shrink below its own label. Letting .pact flex meant
     the two capsule buttons were being squeezed and clipping their text at
     1121: Book a demo by 17px, Start free trial by 23. */
  .pact .btn{padding:0 15px;flex:0 0 auto}
  /* the field goes, the icon stays. A magnifier is still a search box to
     anybody who has used a website, and it is the one thing in this row that
     can be asked for rather than shown. */
  .ss-l{padding:0 9px;gap:0}
  .ss input{width:0;padding:0;opacity:0;transition:width .2s var(--ease),opacity .15s}
  /* Adi, 5 October: "i click the search bar on the menu, it doesnt work, it
     opens to the log in and book demo". Measured: the collapsed magnifier is
     a 33 by 38 target with 10px of clear space before Log in, so a near miss
     lands on the neighbour. The hit area is widened to 44 with a pseudo
     element, which adds no layout width and so cannot bring back the nav
     clipping this breakpoint exists to fix, and the cursor now says the thing
     is clickable. Dropped while the field is open so it cannot sit over the
     input the visitor is trying to click into. */
  .ss-l{position:relative;cursor:pointer}
  .ss:not(:focus-within) .ss-l::after{content:"";position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    width:44px;height:44px;border-radius:999px}
  /* on focus it opens over the capsule, not inside the row, so nothing it
     does can push the nav back into the overlap this fixes */
  .ss:focus-within{position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:72}
  .ss:focus-within .ss-l{gap:7px;padding:0 13px;background:rgba(255,255,255,.22)}
  .ss:focus-within input{width:min(230px,26vw);opacity:1}
}

/* ------------------------------------------- the trial button on a plan card
   Found 28 September by measuring every button on the pricing page. The plan
   card is 270px with 28px of padding, so the button gets 214px, and its own
   18/10 padding leaves 184px for a label that needs 194 at 16px. With
   white-space:nowrap and overflow:hidden the label was simply cut, with no
   ellipsis to even hint at it. Four cards, and it is the buy button on the
   pricing page.

   Trimming the padding would buy six pixels and leave the next label, or the
   next translation, in the same place. Letting it wrap cannot clip at any
   width or in any language, and a two line button in a 270px card is fine.
   The pair is stacked rather than side by side, so a taller button does not
   pull anything out of line. */
.plan .btns .btn{white-space:normal;height:auto;min-height:46px;padding:11px 14px;
  line-height:1.25;text-align:center;text-wrap:balance}

/* Between the burger and about 1200 the full row will not fit however it is
   tightened: measured at 1121 it is roughly 60px over once the buttons are
   allowed to keep their labels. Book a demo is the one to drop, because it
   also sits in the Resources menu and in the footer, while Log in appears
   nowhere else on the page and existing customers need it. */
@media (min-width:1121px) and (max-width:1200px){
  .pact .btn-ghost{display:none}
}

/* ------------------------------------------------- button labels on a phone
   Found on 28 September, the first time the sweep ran against the build that
   actually ships and with a clipped label check in it. .btn carries
   white-space:nowrap and overflow:hidden, which is right on a desktop where
   there is room and silently destructive at 360, where twelve pages were
   cutting their own labels:

     "Sending this to IT? Everything they ask is here"   cut by 85px
     "Everything in Professional"                        cut by 12px
     "Start trial on Professional"                       cut by 10px
     "Start free 7 day trial on Professional"            cut by  9px
     "Twenty minutes on your report"                     cut by  4px

   No ellipsis and no error, so on a phone the first of those simply read
   "Sending this to IT? Everything they" and looked deliberate. A label that
   does not fit should take a second line, not lose its ending. */
@media (max-width:640px){
  .btn{white-space:normal;height:auto;min-height:48px;line-height:1.3;
    padding-top:11px;padding-bottom:11px;text-align:center;text-wrap:balance}
  .btn-primary{padding-left:16px;padding-right:12px}
}

/* ------------------------------------------------- the reports, in the stories
   Note 8: the customers made real. Five outputs, each a screenshot of the add
   in open in PowerPoint, sitting above the quotes so the page shows the thing
   before it shows the opinion about the thing. */
.reps-wrap{margin-top:40px}
.reps-lede{max-width:62ch;margin:0 auto 26px;text-align:center;font-size:15.5px;line-height:1.55;color:var(--muted)}
.reps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px}
.rep{display:flex;flex-direction:column;gap:2px;color:inherit;margin:0;
  border-radius:14px;padding:10px}
.rep figcaption{display:flex;flex-direction:column;gap:2px}
/* no hover lift any more: these are not links, and a card that lifts under
   the cursor tells a reader it is clickable when it is not */
.reps-note{margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.rep-shot{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--pop);aspect-ratio:16/9;margin-bottom:10px}
.rep-shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.rep-t{font-weight:600;font-size:15px;line-height:20px;color:var(--text)}
.rep-s{font-size:13px;line-height:18px;color:var(--muted)}
@media (max-width:640px){.reps{grid-template-columns:minmax(0,1fr)}.rep-shot{aspect-ratio:16/10}}

/* ------------------------------------------------ the testimonial avatars
   Adi asked on 1 October for photographs here, and for stock ones if real
   ones could not be found. These eight quotes carry real names at real
   companies, so a stock face beside "Michael Smith, CEO, The Brandsmith" is
   a picture of somebody who is not him, shown as him. It is the same thing
   that was declined on the customer stories, and the people quoted are one
   search away from being recognised.

   So the initials stay, and stop looking like a default. Each avatar takes
   its own tint from the brand ramp instead of all eight repeating one
   gradient, the letterforms are set rather than inherited, and a soft ring
   lifts it off the card. The moment real headshots arrive this becomes an
   img swap and nothing else changes. */
.quote cite i{
  width:42px;height:42px;font-size:13.5px;letter-spacing:.3px;
  box-shadow:0 0 0 3px var(--pop),0 4px 14px rgba(40,16,90,.22);
  font-variant-numeric:tabular-nums;
}
.quote cite i[data-tint="0"]{background:linear-gradient(204deg,#792EDE,#5515AA)}
.quote cite i[data-tint="1"]{background:linear-gradient(204deg,#5F7CE8,#3448B4)}
.quote cite i[data-tint="2"]{background:linear-gradient(204deg,#B06AE8,#7A2FB8)}
.quote cite i[data-tint="3"]{background:linear-gradient(204deg,#4C6FD6,#2A3C96)}
.quote cite i[data-tint="4"]{background:linear-gradient(204deg,#8E57E0,#5B19A8)}

/* ------------------------------- a quote you can check beats a face you cannot
   Four of the eight testimonials have a published case study behind them, so
   the attribution links to it. This is the honest version of the thing stock
   photographs are usually hired to fake: a reader who doubts the quote can go
   and read the whole account. */
.quote cite .qwho{display:flex;flex-direction:column;gap:2px;min-width:0}
.quote cite .qstory{font-size:12.5px;line-height:16px;color:var(--purple);text-decoration:none;
  border-bottom:1px solid rgba(121,46,222,.3);align-self:flex-start;transition:border-color .2s}
.quote cite .qstory:hover{border-bottom-color:var(--purple)}

/* ------------------------------------- industries as a row, not nine cards
   Note 9, 1 October. Nine equal cards asked the reader to place themselves a
   second time, by sector, after #which had already asked by problem. The
   links are all still here because the industry pages need them; they just
   stopped taking a screen to do it. */
.indrow{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;margin-top:26px}
.indlink{display:inline-block;padding:9px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--pop);color:var(--text);text-decoration:none;font-size:14.5px;line-height:20px;
  transition:border-color .18s,background .18s,transform .18s}
.indlink:hover{border-color:var(--purple);background:var(--pop2);transform:translateY(-1px)}

/* ------------------------------------------- what the rebuilding costs now
   The saving moved here from /pricing/, which a reader only opens once they
   already want this. Three fields, their numbers, and the answer sits beside
   the trial button. */
.worth{padding:32px;max-width:860px;margin:30px auto 0;text-align:left}
.worth-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.worth-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px;
  padding-top:24px;border-top:1px solid var(--line)}
.worth-n{display:block;font:700 42px/1.05 var(--display);letter-spacing:-1.4px;color:var(--purple);
  font-variant-numeric:tabular-nums}
.worth-l{display:block;margin-top:6px;font-size:14px;line-height:19px;color:var(--muted)}
.worth-cta{margin-top:26px}
.worth-fine{margin-top:12px}
@media (max-width:720px){
  .worth{padding:22px}
  .worth-in{grid-template-columns:minmax(0,1fr)}
  .worth-out{grid-template-columns:minmax(0,1fr);gap:18px}
  .worth-n{font-size:36px}
}

/* --------------------------------------------------- the data source list
   Notes 11 and 19. Asked for brand logos; the real ones are not available
   for the Microsoft products and the icon sets answer with the wrong
   product, so each source carries a glyph for its kind instead. One set,
   one weight, honest about what it is, and it cannot go stale when a vendor
   restyles its mark. */
.src ul li{display:flex;align-items:center;gap:10px}
.src .sg{width:17px;height:17px;flex:none;color:var(--purple);opacity:.72}
/* The real vendor marks sit at the same optical size as the glyphs beside
   them. They keep their own colours: these are the products a reader is
   looking for, and a greyed out Excel icon is harder to spot than a green
   one, which is the whole reason Adi wanted logos here. */
.src .sl{width:18px;height:18px;flex:none;object-fit:contain;display:block}

/* ------------------------------------- a capped heading in a centred block
   Note 21, 1 October. h2 carries max-width:24ch and the reset zeroes all
   four margins, so in a centred section the heading is narrower than its
   container and has no auto margins to centre it: it sits hard left while
   the pill, the paragraph and the buttons around it centre correctly. On
   the final call block that was 195px off, which is exactly the amount Adi
   could see and could not name.

   Elsewhere on the site this is hidden because the centring lives on a
   wrapper (.center .head{margin:0 auto}) and the heading inherits its
   position from the box. .book has no such wrapper. Both conventions get
   the auto margins here so neither can drift again. */
.center h1,.center h2,.center h3,
.book h1,.book h2,.book h3{margin-inline:auto}

/* ------------------------------------------- what the rebuilding costs now
   Pricing note 6. Four equal cards made a reader work out which number was
   the point. Three of them are the arithmetic and one is the answer, so the
   answer is set large and spans the row, and the three hour figures sit
   under it as the workings. The section sits on a tinted panel so it reads
   as the conclusion of the pricing page rather than another block on it. */
.savings-sec > .card{background:var(--lav);border-color:rgba(121,46,222,.26)}
.saveout{margin-top:26px}
.saveout-big{text-align:center;padding:26px 20px;border-radius:16px;background:var(--pop);
  border:1px solid rgba(121,46,222,.3)}
.saveout-big output{display:block;margin-top:8px;font:700 clamp(40px,6vw,60px)/1.02 var(--display);
  letter-spacing:-2px;color:var(--violet);font-variant-numeric:tabular-nums}
.saveout-big .micro{margin-top:10px}
.saveout-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.saveout-work > div{padding:16px 18px;border-radius:13px;border:1px solid var(--line);background:var(--pop)}
.saveout-work output{display:block;margin-top:5px;font:700 26px/1.1 var(--display);
  letter-spacing:-.8px;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .saveout-work{grid-template-columns:minmax(0,1fr)}
  .saveout-big{padding:22px 16px}
}

/* ------------------------------------------- the compatibility heading
   For IT note 4. "Office 2016 and later, on Windows." is thirty four
   characters and broke across two lines, because the global h2 cap of 24ch
   is 751px at this size while its own container is 1141px. The cap is there
   to stop long headings running to an unreadable measure; this one is short
   enough that the cap is the only thing breaking it. Widened just here
   rather than globally, so no other heading's measure changes. */
#compat .sec-head h2{max-width:34ch}

/* ----------------------------------------- the assumptions, out of the way
   The saving calculator asked eight questions before it answered anything.
   Four of them describe what the reader already does; four are assumptions
   about afterwards, each with a default most readers could not improve on
   by guessing. They are stated in one line and open on a click, so the
   figures stay arguable without eight boxes standing between a reader and
   the number. */
.assume{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.assume > summary{cursor:pointer;list-style:none;font-size:14px;line-height:21px;color:var(--muted);
  max-width:72ch}
.assume > summary::-webkit-details-marker{display:none}
.assume > summary b{color:var(--purple);font-weight:600;white-space:nowrap}
.assume > summary b::after{content:" \203A";font-weight:700}
.assume[open] > summary b::after{content:" \2039"}
.assume > summary:hover b{text-decoration:underline}
.assume > summary:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}
/* A details element hides its non summary children by itself, until one of
   them sets its own display. .assume-in is a grid, so the panel reported
   open:false while all four inputs stayed on screen: the change looked
   applied and did nothing. Hide it explicitly when closed. */
.assume:not([open]) .assume-in{display:none}
.assume-in{margin-top:18px}

/* a quiet line to the saving calculator, on the pages that describe the
   problem it prices. Set as one sentence rather than a card: it is a way
   out of the page, not another thing to read. */
.costline{margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line);
  font-size:15.5px;line-height:23px;color:var(--muted);text-align:center}
.costline span{display:inline-block;margin-right:6px}

/* ------------------------------------------- the identifiers on contact
   Adi, notes 40 and 41. Registration, VAT, DUNS and NCAGE ran down an
   address block as four more lines of the same weight, so a procurement
   reader scanning for one of them had to read all four. A term and its
   value per row, the value in tabular figures so the digits line up. */
.idlist{display:grid;grid-template-columns:auto;gap:10px;margin:16px 0 0}
.idlist dt{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.idlist dd{margin:2px 0 0;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.idlist dd a{font-variant-numeric:normal}
@media (min-width:560px){
  .idlist{grid-template-columns:minmax(0,50%) minmax(0,1fr);align-items:baseline;gap:8px 18px}
  .idlist dd{overflow-wrap:break-word}
  .idlist dt{grid-column:1}
  .idlist dd{grid-column:2;margin:0}
}

/* ------------------------------------------------ customers, as companies
   Adi, notes 45 and 46. A customer was a grey word at 55 per cent opacity in
   a wrapped row, which reads as a list of words rather than a list of firms,
   and nothing let a visitor confirm any of them exist. A tile each: the real
   logo where one is on disk, the name set as a wordmark where there is not,
   the sector under it, and the company's own address behind the tile. The
   logo is held to a height rather than a width, because a wordmark and a
   roundel at the same width are not the same size to the eye. */
.ccos{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.ccos > li{display:flex}
.cco{display:flex;flex-direction:column;justify-content:center;gap:7px;width:100%;min-height:112px;
  padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card);
  text-decoration:none;color:var(--text);transition:border-color .25s var(--ease),transform .25s var(--ease)}
a.cco:hover{border-color:rgba(105,88,226,.55);transform:translateY(-2px)}
.cco-l{height:24px;margin-bottom:2px;width:auto;max-width:100%;object-fit:contain;object-position:left center;display:block}
.cco-w{font:700 17px/1.25 var(--font);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.cco-n{font:700 14.5px/1.25 var(--font);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.cco-s{font-size:12.5px;line-height:17px;color:var(--muted)}
a.cco .cco-s::after{content:" ↗";color:var(--purple);white-space:nowrap}
/* The DataPoint era names are history, not a customer list, so they are
   quieter: no card, no link, no arrow. */
.cco-flat{padding:16px 18px;min-height:0;gap:4px;justify-content:center}
.cco-flat .cco-w{font:700 14.5px/1.25 var(--font);letter-spacing:-.01em;color:var(--text)}
@media (max-width:560px){
  .ccos{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .cco{min-height:100px;padding:14px}
}

/* The source marks the pack pages were missing (note 30). The home page has
   had the real vendor logos since 30 September; these lists had dots. */
.srclist-ic li{padding-left:0;display:flex;align-items:center;gap:9px}
.srclist-ic li::before{display:none}
.srclist-ic .sg{width:17px;height:17px;flex:none;color:var(--purple);opacity:.72}
.srclist-ic .sl{width:18px;height:18px;flex:none;object-fit:contain;display:block}

/* Note 38: the article thumbnails were 96 by 64, small enough to read as
   decoration rather than as a picture of the piece. Half as big again, at
   the same 3 to 2, and the row grows with them. */
.plist li{grid-template-columns:148px 1fr;gap:18px;padding:16px}
.plist .th{width:148px;height:99px}
@media (max-width:560px){
  .plist li{grid-template-columns:104px 1fr;gap:13px;padding:13px}
  .plist .th{width:104px;height:70px}
}

/* ---------------------------------------------- the position, in the hero
   The strategy says the thing being sold is a number somebody will sign, not
   a faster afternoon, and until now that argument lived only on an interior
   page. One line under the hero paragraph, quieter than the paragraph above
   it so it reads as the point rather than as more copy. */
.hero .strap{margin-top:18px;max-width:62ch;font-size:16px;line-height:25px;color:var(--muted);
  padding-left:16px;border-left:2px solid var(--purple)}
.hero .strap b{color:var(--text);font-weight:600}
.hero .strap .link{white-space:nowrap}
@media (max-width:640px){.hero .strap{font-size:15px;line-height:24px;padding-left:13px}}

/* ------------------------------------------- the short answer, up top
   The comparison pages did not answer their own query until the fourth
   heading. This is the paragraph a reader in a hurry, and a model writing an
   AI overview, can both take whole: set apart, slightly larger than body,
   and the first thing under the opening paragraph. */
.answer{margin-top:26px;padding:22px 24px;border-radius:16px;background:var(--lav);
  border:1px solid rgba(121,46,222,.26);max-width:72ch}
.answer-k{display:block;font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--purple);font-weight:600;margin-bottom:8px}
.answer p{margin:0;font-size:17px;line-height:27px;color:var(--text)}
@media (max-width:640px){
  .answer{padding:18px;margin-top:20px}
  .answer p{font-size:16px;line-height:25px}
}

/* the one line under each comparison on the guides hub */
.guides .gnote{display:block;margin-top:3px;font-size:13.5px;line-height:20px;color:var(--muted)}
.guides li{margin-bottom:14px}

/* ------------------------------------------- the side by side comparison
   Adi, 2 October: the two product names have to sit over their own columns.
   They were in a <thead> all along and unreadable, because .tw is
   overflow-x:auto and therefore a scroll container, so position:sticky on
   the header resolved against it and left UPSLIDE and INSYNCR floating in
   the middle of the first row, over the text. Measured before changing it:
   the header ran 1726 to 1755 and the first cell 1659 to 1780.

   Static, with a ground of its own, and the INSYNCR column faintly tinted so
   the eye can hold one column all the way down a fourteen row table. The
   label column was eating 46% and leaving 123px a side, which is the other
   half of why it read badly. */
.cmpt thead th{position:static;top:auto;z-index:auto;
  font:700 12.5px/1.3 var(--font);letter-spacing:.09em;color:var(--text);
  padding:0 14px 12px 0;border-bottom:2px solid var(--line)}
.cmpt thead th:last-child{color:var(--purple)}
.art .cmpt td:first-child,.prose .cmpt td:first-child{width:26%}
.art .cmpt td:last-child,.prose .cmpt td:last-child,
.art .cmpt th:last-child,.prose .cmpt th:last-child{background:var(--lav);
  padding-left:14px;padding-right:14px}
.cmpt td:nth-child(2){padding-right:14px}
@media (max-width:720px){
  .art .cmpt td:first-child,.prose .cmpt td:first-child{width:34%}
  table.cmpt,table.t{font-size:14px}
}

/* ------------------------------- the comparison columns, 2 October, later
   Measured on test37 at 375px: the competitor column was 57px wide and the
   text inside it was breaking mid word, "Forma / tting / check / s, not",
   "Water / fall / and / Marim / ekko". At 1089px it was 118px against
   INSYNCR's 338px, which reads as a rigged comparison before a word of it
   is read.

   One cause for both. .prose carries overflow-wrap:anywhere to stop long
   URLs escaping the column; a table cell inherits it, and a cell that may
   break anywhere reports a min-content width of one character, so the auto
   layout is free to crush it to nothing. The cells opt out, the table is
   laid out on fixed thirds so neither side can be starved, and on a phone
   it keeps a floor and scrolls sideways inside .tw rather than shrinking
   below what a word needs. */
.cmpt{table-layout:fixed}
.cmpt td,.cmpt th{overflow-wrap:break-word;word-break:normal;hyphens:none}
.art .cmpt-pair td:first-child,.prose .cmpt-pair td:first-child,
.art .cmpt-pair th:first-child,.prose .cmpt-pair th:first-child{width:26%}
.cmpt-pair td:nth-child(2),.cmpt-pair th:nth-child(2),
.art .cmpt-pair td:last-child,.prose .cmpt-pair td:last-child,
.art .cmpt-pair th:last-child,.prose .cmpt-pair th:last-child{width:37%}
@media (max-width:720px){
  /* A phone cannot hold three readable columns side by side: 341px of
     container over three columns is 113px each, and the INSYNCR column is
     the one a reader came for, so it must not be the one parked off screen
     behind a sideways scroll. The label takes a full width row of its own
     and the two products sit under it at half each, which is 160px apiece
     and both on screen at once. Each cell carries its own product name, so
     a reader who has scrolled past the header still knows which is which. */
  .cmpt-pair,.cmpt-pair thead,.cmpt-pair tbody,.cmpt-pair tr,.cmpt-pair td,.cmpt-pair th{display:block;width:auto}
  .cmpt-pair{min-width:0}
  .cmpt-pair thead{display:none}
  .cmpt-pair tr{display:grid;grid-template-columns:1fr 1fr;
    gap:0 10px;padding:14px 0;border-bottom:1px solid var(--line)}
  .art .cmpt-pair td:first-child,.prose .cmpt-pair td:first-child,
  .art .cmpt-pair th:first-child,.prose .cmpt-pair th:first-child{
    grid-column:1 / -1;width:auto;font-weight:700;color:var(--text);
    padding:0 0 10px;border:0}
  .cmpt-pair td:nth-child(2),
  .art .cmpt-pair td:last-child,.prose .cmpt-pair td:last-child{
    width:auto;padding:10px;border:0;border-radius:8px;align-self:start}
  .art .cmpt-pair td:last-child,.prose .cmpt-pair td:last-child{background:var(--lav)}
  .cmpt-pair td:nth-child(2){background:var(--card)}
  .cmpt-pair td[data-h]:before{content:attr(data-h);display:block;
    font:700 10.5px/1 var(--font);letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);margin:0 0 6px}
  .art .cmpt-pair td:last-child[data-h]:before,
  .prose .cmpt-pair td:last-child[data-h]:before{color:var(--purple)}
}

/* The plan menu leads with the month, so "billed annually" has to travel
   with it; a month figure on its own would be the wrong number. The chip is
   white-space:nowrap and right aligned, so the qualifier takes its own line
   under the figure rather than stretching the row. */
.mpack-p{text-align:right;line-height:1.3}
.mpack-p small{display:block;font-size:10px;font-weight:500;opacity:.78;
  letter-spacing:.01em}

/* ---------------------------------------------- wide and very wide screens
   Adi, 2 October, on a 32 inch display: the page did not look formatted.
   Measured at 2560px the content was 1189px, 46% of the screen, with 686px
   of empty ground down each side and the nav floating in the middle of it.
   .wrap and .pwrap also disagreed, 1189 against 1280, so a section built on
   one did not line up with a section built on the other.

   One scale now, stepping up with the display instead of stopping dead at
   1189. It steps rather than running free because a line of text that keeps
   growing stops being readable; the prose column is capped at 68ch anyway,
   so the extra width goes to the grids, cards, tables and the nav, which is
   what actually looked stranded. */
:root{--shell:1189px}
@media (min-width:1500px){:root{--shell:1320px}}
@media (min-width:1800px){:root{--shell:1440px}}
@media (min-width:2200px){:root{--shell:1560px}}
.wrap{max-width:var(--shell)}
.pwrap{max-width:var(--shell)}

/* The display type was set for a 1440 screen and reads small on a 32 inch
   one. It lifts once, at the width where the extra room appears. */
@media (min-width:1800px){
  .hero h1{font-size:96px}
  h2{font-size:52px}
  .lede{font-size:20px}
}

/* --------------------------------------------- the narrowest phones, 320px
   Three pages pushed past the viewport at 320. Two causes, both real.

   A grid track written as 1fr keeps an implicit min-width of auto, so it
   refuses to shrink below the longest word in it. On the article list that
   is a title like "Link PowerPoint to Microsoft Dynamics", and the row grew
   to 354px inside a 320px screen. minmax(0,1fr) lets it wrap instead.

   And at 320 a 148px thumbnail leaves 96px for the title, which is not a
   column, so the picture steps down once more below 400px.

   The footer's legal row was a flex line with no wrap, so Privacy, Terms,
   Cookies and the rest ran straight off the edge on a long article. */
.plist li{grid-template-columns:148px minmax(0,1fr)}
@media (max-width:1024px){.plist li{grid-template-columns:72px minmax(0,1fr)}}
@media (max-width:560px){.plist li{grid-template-columns:104px minmax(0,1fr)}}
@media (max-width:400px){
  .plist li{grid-template-columns:76px minmax(0,1fr);gap:11px;padding:11px}
  .plist .th{width:76px;height:51px}
  .plist a.t{font-size:15.5px}
}
.fbot ul{flex-wrap:wrap}
.quote{max-width:300px;width:auto}
/* The list text itself still would not break: the description reported a
   min content width of 209px inside a 177px column, so the row pushed the
   page 4px wide even once the track could shrink. Titles and descriptions
   in the list wrap inside a word when there is no other way. */
.plist li>div{min-width:0}
.plist a.t,.plist .d,.plist .m{overflow-wrap:break-word;min-width:0}
/* A heading with a long word in it ("synchronization" in an article title)
   was 317px wide in a 288px column at 320, which pushed the whole page
   sideways. Headings break inside a word only when there is no other way;
   at every normal width this changes nothing. */
h1,h2,h3,h4,.hero h1,.page-hero h1{overflow-wrap:break-word}

/* ------------------------------------------- the plan table, five columns
   Kurt, 3 October, circling the gap: "Columns not equally spread", on the
   home page table and again on the pricing page. Starter was 401px wide
   against 171px for Business, Professional and Viewer, so the eye read a
   hole in the middle of the header rather than four comparable plans.
   The label column keeps the room it needs for a feature name; the four
   plans divide what is left in equal quarters. */
.cmpt:not(.cmpt-pair){table-layout:fixed}
.cmpt:not(.cmpt-pair) th:first-child,
.cmpt:not(.cmpt-pair) td:first-child{width:28%}
.cmpt:not(.cmpt-pair) th:nth-child(n+2),
.cmpt:not(.cmpt-pair) td:nth-child(n+2){width:18%}
@media (max-width:860px){
  /* four plan columns cannot be read at phone width; the table keeps a
     floor and scrolls sideways inside .tw rather than crushing them */
  .cmpt:not(.cmpt-pair){min-width:720px}
}

/* ------------------------------------------------- customer marks, sizes
   Kurt, 3 October, circling the Brandsmith and Lumen marks on the story
   cards: "Logos are a bit small". The art sat in a 60px circle and was
   scaled 1.7 and cropped, which suits a face and ruins a wordmark: it
   throws away two fifths of the width before the reader sees it. A larger
   box and a gentler zoom, and the company tiles below lift with it. */
.brand-art{width:72px;height:72px}
.brand-art img{transform:scale(1.2)}
.story .brand-art img{object-fit:contain;transform:none}
.cco-l{height:30px}

/* Kurt, 3 October: "Make pics a bit bigger?" on the article list. The
   thumbnails went from 96 to 148 on 1 October and still read as a stamp
   beside a two line title. */
.plist .th{width:176px;height:118px}
@media (max-width:1024px){.plist li{grid-template-columns:96px minmax(0,1fr)}.plist .th{width:96px;height:64px}}
@media (max-width:560px){.plist li{grid-template-columns:116px minmax(0,1fr)}.plist .th{width:116px;height:78px}}
@media (max-width:400px){.plist li{grid-template-columns:76px minmax(0,1fr)}.plist .th{width:76px;height:51px}}

/* Kurt, 3 October, arrows into the gap under two home page headings:
   "Spacing?" and "Also here add some space". There was none: .head set a
   measure and no bottom margin, so a centred lede finished and the card
   grid began on the next pixel. The pricing page's .sec-head has always
   had 40px; the home page's .head had 0. */
.head{margin-bottom:40px}
.head:last-child{margin-bottom:0}

/* A post with no featured image got a bare box in the thumbnail column, and
   the two newest product updates have none, so the list opened on two empty
   panels. A tinted panel with a small mark reads as "no picture for this
   one" rather than as something that failed to load. */
.plist span.th{background:var(--lav);border-color:transparent;
  display:flex;align-items:center;justify-content:center}
.plist span.th::after{content:"";width:26px;height:26px;border-radius:7px;
  border:2px solid var(--purple);opacity:.28}

/* ---------------------------------------- the INSYNCR column, 4 October
   Adi: "the purple border line over INSYNCR doesn't look that good". He is
   right, and the cause is that the tint was painted on table cells inside
   a card that has 32px of padding. So the block started abruptly in open
   white, its top edge reading as a stray rule above the word INSYNCR, and
   its right edge stopped short of the card. It looked like a misplaced
   rectangle rather than the column a reader is meant to follow.

   Treated as a panel instead: rounded where it starts and where it ends,
   room above the label, and its own faint purple rule under the heading
   rather than the grey one running through from the other columns. */
.cmpt-pair thead th{padding-top:14px}
.art .cmpt-pair th:last-child,.prose .cmpt-pair th:last-child{
  border-radius:12px 12px 0 0;
  border-bottom:2px solid rgba(105,88,226,.28)}
.art .cmpt-pair tr:last-child td:last-child,
.prose .cmpt-pair tr:last-child td:last-child{border-radius:0 0 12px 12px;
  padding-bottom:16px}
/* the row rules stop at the panel edge rather than cutting across it */
.art .cmpt-pair td:last-child,.prose .cmpt-pair td:last-child{
  border-bottom-color:rgba(105,88,226,.16)}
@media (max-width:720px){
  /* stacked, every INSYNCR cell stands alone, so each one is a panel in
     its own right and rounds on all four corners rather than inheriting
     the cap and foot of a column that no longer exists */
  .art .cmpt-pair td:last-child,.prose .cmpt-pair td:last-child,
  .art .cmpt-pair th:last-child,.prose .cmpt-pair th:last-child{
    border-radius:10px;border-bottom-color:transparent}
  .art .cmpt-pair tr:last-child td:last-child,
  .prose .cmpt-pair tr:last-child td:last-child{padding-bottom:12px}
}

/* a source row in the plan table carries the same mark as the source lists.
   The flex box sits on a span, not the cell: display:flex on a <td> takes it
   out of the table layout and the fixed first column width stops applying,
   which wrapped every name one word per line. */
.cmpt .srcrow{display:flex;align-items:flex-start;gap:9px}
.cmpt .srcrow .sl{flex:0 0 auto;width:18px;height:18px;object-fit:contain;margin-top:1px}
.cmpt .srcrow .sg{flex:0 0 auto;width:18px;height:18px;color:var(--purple);opacity:.75;margin-top:1px}

/* ------------------------------------------- the shop pages, 5 October
   Cart, checkout and login are WooCommerce Blocks inside Elementor
   containers. They were getting the site's header and then nothing else:
   default grey buttons beside our purple pills, square form fields, and
   everything crammed into a 641px column with the right half of a 1440px
   screen empty. These are the last three pages a customer touches before
   paying, and they were the three that read as unfinished.

   Scoped to body.woocommerce-page and the block classes, so none of the
   66 built pages can be touched by any of it. */

/* the column was 641px of a 1440px screen; the site's own shell is 1189 */
/* The narrow left aligned column was ours. These pages render through the
   article template: a .art grid holding an article.prose capped at the
   640px reading measure, with the rest of the grid reserved for a sidebar
   that a checkout does not have. Correct for a guide, wrong here. */
.woocommerce-cart .art,.woocommerce-checkout .art{display:block}
.woocommerce-cart .art > article.prose,
.woocommerce-checkout .art > article.prose{max-width:900px;margin-inline:auto}
.woocommerce-page .prose > h1,.woocommerce-page .elementor-widget-heading{text-align:center}

/* the panels take the card chrome the rest of the site uses */
.woocommerce-page .wc-block-cart-items,
.woocommerce-page .wp-block-woocommerce-cart-order-summary-block,
.woocommerce-page .wc-block-components-sidebar,
.woocommerce-page .wc-block-components-sidebar{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,2.4vw,28px)}

/* every button, whichever plugin drew it */
.woocommerce-page .wc-block-components-button,
.woocommerce-page .woocommerce button.button,
.woocommerce-page .woocommerce a.button,
.woocommerce-page .woocommerce input.button,
.woocommerce-page button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;border-radius:12px;border:1px solid transparent;
  font:500 16px/24px var(--font);text-decoration:none;cursor:pointer;
  background:var(--grad-btn);color:#fff;box-shadow:var(--sheen);
  transition:transform .25s var(--ease),filter .25s var(--ease)}
.woocommerce-page .wc-block-components-button:hover,
.woocommerce-page .woocommerce button.button:hover,
.woocommerce-page .woocommerce a.button:hover,
.woocommerce-page button[type="submit"]:hover{transform:translateY(-1px);filter:brightness(1.06)}
/* the secondary ones keep the ghost treatment rather than shouting too */
.woocommerce-page .wc-block-components-button.outlined,
.woocommerce-page .woocommerce a.button.wc-backward{
  background:none;color:var(--text);border-color:var(--line2);box-shadow:none}

/* form fields, matching .field on the rest of the site */
.woocommerce-page .wc-block-components-text-input input,
.woocommerce-page .woocommerce form input[type="text"],
.woocommerce-page .woocommerce form input[type="email"],
.woocommerce-page .woocommerce form input[type="password"],
.woocommerce-page .woocommerce form input[type="tel"],
.woocommerce-page .woocommerce form select{
  width:100%;min-width:0;height:50px;border:1px solid var(--line2);border-radius:12px;
  background:var(--card2,rgba(255,255,255,.05));padding:0 16px;
  font:400 16px/1.2 var(--font);color:var(--text)}
.woocommerce-page .wc-block-components-text-input input:focus,
.woocommerce-page .woocommerce form input:focus,
.woocommerce-page .woocommerce form select:focus{
  outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(105,88,226,.25)}

/* the money, in the site's own type rather than three different sizes */
.woocommerce-page .wc-block-components-totals-item__label{color:var(--muted)}
.woocommerce-page .wc-block-components-totals-item__value{
  font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.woocommerce-page .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:24px;letter-spacing:-.02em}
.woocommerce-page .wc-block-components-product-price__value{font-weight:700;color:var(--text)}


/* Three things the first pass left. The totals panel is a card drawn
   inside a card, so the inner one drops its chrome. The line price was set
   larger than the order total, which reads as the number that matters when
   it is not. And the heading is the WooCommerce page title, centred over
   the two columns rather than hanging off the left. */
.woocommerce-page .wc-block-components-sidebar .wp-block-woocommerce-cart-order-summary-block,
.woocommerce-page .wc-block-components-sidebar > *{background:none;border:0;padding:0}
.woocommerce-page .wc-block-cart-item__wrap .wc-block-components-product-price{
  font-size:15px;color:var(--muted);font-weight:500;display:block;margin-top:2px}
.woocommerce-page .wc-block-cart-item__wrap .wc-block-components-product-price__value{
  font-weight:600;color:var(--muted)}
.woocommerce-page .entry-title,
.woocommerce-page .elementor-heading-title,
.woocommerce-page main > .wrap > h1,
.woocommerce-page .art > h1{text-align:center}

/* The cart row on a phone. The three cells are a real table row, and
   WooCommerce lays them out side by side at any width, so inside our card
   the total sat at x=316 of a 390px screen and the price was cut in half.
   This predates the styling above: it overflows the same seven elements
   with every rule here switched off. The row stacks instead, and the
   selectors carry the same weight WooCommerce uses or they do not win. */
@media (max-width:720px){
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items,
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items tbody,
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row{
    display:block;width:100%;max-width:100%;min-width:0}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items thead{display:none}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row{
    padding:18px 0;border-bottom:1px solid var(--line);overflow:hidden}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items tr.wc-block-cart-items__row > td{
    display:block;width:auto;max-width:100%;min-width:0;padding-left:0;padding-right:0}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items td.wc-block-cart-item__image{
    float:left;width:58px;margin:0 14px 10px 0}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items td.wc-block-cart-item__image img{
    width:58px;height:auto}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items td.wc-block-cart-item__total{
    clear:both;text-align:left;padding-top:12px;margin-top:10px;border-top:1px solid var(--line)}
  .woocommerce-cart .wc-block-cart table.wc-block-cart-items td.wc-block-cart-item__total
    .wc-block-components-product-price{font-size:22px;font-weight:700;color:var(--text)}
}

/* The chat bubble sat on the checkout button. WooCommerce pins Proceed to
   Checkout to the bottom of a phone screen, Boei pins its bubble to the
   same corner, and the bubble won: a thumb landing on the right end of the
   button opened the chat instead. Measured on a 375px screen, the button
   runs 16 to 359 and the bubble covered 285 to 345 of it. The bubble moves
   up above the bar on the two pages that have one. */
@media (max-width:720px){
  .woocommerce-cart #boei_button,.woocommerce-checkout #boei_button,
  .woocommerce-cart .boei_button,.woocommerce-checkout .boei_button{bottom:112px !important}
}


/* The light, brand coloured theme (Kurt, 21 Sep 2026: "more in line with the colour we have set out in the brand guide").
   Appended after site.css when the site is built with --theme light. Same structure, same motion, the brand tokens:
   purple 5515AA, deep purple 3D0F7A, orange FC7E20 on the primary button only, peach FFB27A, lavender EBE3F6,
   mint F4F9F5, ink 17181C. Nothing here changes the markup. */
:root{
  --ground:#F5F3FB;--text:#17181C;--muted:#4A4E58;--dim:#767B86;
  --purple:#5515AA;--violet:#3D0F7A;--accent:#5515AA;--accent2:#FFB27A;
  --card:#FFFFFF;--card2:#FBFAFE;--line:#DCD7EA;--line2:#C9C2E0;
  --grad-btn:linear-gradient(90deg,#FC7E20,#FF9640);--sheen:inset 0 12px 16px rgba(255,255,255,.35);
  --grad-text:linear-gradient(90deg,#5515AA 20%,#3D0F7A);--rail:linear-gradient(90deg,rgba(85,21,170,0),#5515AA);
  --ink:#17181C;--ink2:#4A4E58;--ink3:#767B86;--white:#FFFFFF;--peach:#FFB27A;--lav:#EBE3F6;--deep:#3D0F7A;--orange:#FC7E20;--mint:#F4F9F5;
  --pop:#FFFFFF;--pop2:#FAF9FD;--pop-shadow:0 26px 60px rgba(60,63,80,.16);
  --mhead:#5515AA;--orange-pale:#FDEEE4;--orange-dk:#A34A08;
}
body{background:var(--ground);color:var(--text)}
body.ready{animation:none}
h1,h2,h3,h4{color:var(--text)}
.lab,.pill{background:var(--lav);border-color:#D8CCF0;color:var(--purple)}
.card .lab,.prose .lab,.callout .lab,.strip .lab,.hollow .lab,form .lab,.card-purple .lab{background:none;border:0}
.card-purple .lab{color:var(--peach)}
.btn{color:var(--text)}
.btn-primary{color:var(--deep);font-weight:600}
.btn-primary::after{background:rgba(61,15,122,.14) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D0F7A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/16px no-repeat}
.btn-primary::before{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#2B2D33}
.btn-ghost{background:#fff;border-color:var(--line2);color:var(--text)}
.btn-ghost:hover{background:var(--lav);border-color:var(--purple)}
.btn-onpurple{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff}
.link{color:var(--purple);text-decoration-color:rgba(85,21,170,.35)}
.link:hover{text-decoration-color:var(--purple)}
.card{background:#fff;border-color:var(--line);box-shadow:0 1px 2px rgba(23,24,28,.04)}
.card::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(85,21,170,.08),transparent 60%)}
a.card:hover,.grid>.card:not(form):hover,.post:hover{border-color:var(--purple);background:#fff;box-shadow:0 14px 40px rgba(61,15,122,.1)}
.card p,.sub,.lede,.micro,.fine{color:var(--muted)}
.hollow{background:transparent;border-color:var(--line2)}
.card-purple{background:linear-gradient(135deg,#3D0F7A,#5515AA);border-color:transparent;color:#fff}
.card-purple p{color:rgba(255,255,255,.85)}
.card-purple .from,.card-purple .micro{color:var(--peach)}
.big{background:var(--grad-text);-webkit-background-clip:text;background-clip:text}
.pills span{color:var(--purple);background:var(--lav);border-color:#D8CCF0}
.site-head.scrolled{background:rgba(245,243,251,.85);border-bottom-color:var(--line)}
.nav-links{border-top-color:var(--line)}
.menu-btn{background:#fff;border-color:var(--line2)}
.mpanel{background:var(--ground)}
.hero .light::before{background:radial-gradient(closest-side,rgba(85,21,170,.22),rgba(255,178,122,.18) 45%,rgba(245,243,251,0) 72%)}
.hero .light::after{background:radial-gradient(closest-side,rgba(252,126,32,.18),rgba(245,243,251,0) 70%)}
.hero .sub{color:var(--muted);opacity:1}
.chips i{background:#fff;border-color:var(--line2);color:var(--purple)}
.frame{background:#fff;border-color:var(--line2);box-shadow:0 30px 80px rgba(61,15,122,.18),0 0 0 1px rgba(85,21,170,.08)}
.frame .bar{border-bottom-color:var(--line);color:var(--muted)}
.frame .bar i{background:var(--line2)}
.frame .bar em{color:var(--purple)}
.frame .bar em b{background:var(--purple);box-shadow:0 0 0 0 rgba(85,21,170,.5)}
.frame .ribbon img{border-bottom-color:var(--line)}
.frame .shot{background:#fff}
.frame .scan{background:linear-gradient(90deg,transparent,#5515AA,transparent)}
.frame .foot{border-top-color:var(--line);color:var(--muted)}
.frame .foot b{color:var(--text)}
.marquee::before{background:linear-gradient(90deg,#F5F3FB 5%,rgba(245,243,251,0))}
.marquee::after{background:linear-gradient(90deg,rgba(245,243,251,0),#F5F3FB 95%)}
.track li,.strip .names li{color:var(--text);opacity:.55}
.choose::before{background:radial-gradient(closest-side,rgba(85,21,170,.12),rgba(245,243,251,0) 70%)}
.rail>div::before{background:var(--purple);box-shadow:0 0 0 4px rgba(85,21,170,.18),0 0 18px rgba(85,21,170,.5)}
.rail .n,.rail p{color:var(--muted)}
.home .pull{background:#fff;border-color:var(--line)}
.pull cite{color:var(--dim)}
.tabs button{color:var(--text)}
.tabs button:hover{background:var(--lav)}
.tabs button[aria-selected=true]{background:var(--purple);color:#fff;box-shadow:var(--sheen)}
.tab{background:#fff;border-color:var(--line)}
.tab .k{color:var(--purple)}
.tab p,.tab ol li{color:var(--muted)}
.tab ol b{background:var(--lav);color:var(--purple)}
.tab .img{background:#fff;border-color:var(--line2);box-shadow:0 24px 60px rgba(61,15,122,.14)}
.tab .img figcaption{color:var(--dim)}
.metric{border-top-color:var(--line)}
.metric p{color:var(--muted)}
.src li{background:var(--lav);border-color:#D8CCF0;color:var(--purple)}
.cmp ul li{border-bottom-color:var(--line);color:var(--muted)}
.cmp .tag{background:var(--lav);color:var(--purple)}
.cmp .tag.good{background:var(--purple);color:#fff;box-shadow:none}
.cmp .lead{color:var(--purple)}
.cmp p.t,.sec2 p{color:var(--muted)}
.sec2 .k{color:var(--purple)}
.quote blockquote{color:var(--text)}
.quote cite{color:var(--muted)}
.quote cite i{background:linear-gradient(135deg,#3D0F7A,#5515AA);box-shadow:none}
.brand-art{background:var(--lav)}
.brand b{color:var(--text)}.brand small,.quote-card cite{color:var(--dim)}
.shot-frame,.ui-frame{background:var(--mint);border-color:var(--line)}
.ui-frame{box-shadow:0 20px 50px rgba(61,15,122,.1)}
.shot figcaption,.ui figcaption{color:var(--dim)}
.step-n{background:linear-gradient(135deg,#3D0F7A,#5515AA);box-shadow:none}
.cols{border-top-color:var(--line)}
.cols li{color:var(--muted);border-bottom-color:var(--line)}
.toggle{background:#fff;border-color:var(--line)}
.toggle button{color:var(--muted)}
.toggle button[aria-pressed=true]{background:var(--purple);color:#fff;box-shadow:none}
.plan.most{border-color:var(--purple);box-shadow:0 0 0 4px rgba(85,21,170,.08)}
.plan .most-tag,.badge{background:linear-gradient(135deg,#3D0F7A,#5515AA);box-shadow:none}
.price{color:var(--text)}
.price small,.price-sub,.plan .per,.plan .desc,.plan .what{color:var(--muted)}
.kv{color:var(--muted)}.kv b{color:var(--text)}.kv>*{border-bottom-color:var(--line)}
.kvl{border-top-color:var(--line)}.kvl div{border-bottom-color:var(--line)}.kvl dd{color:var(--muted)}
.guides li{border-bottom-color:var(--line)}.guides a{color:var(--text)}.guides a:hover{color:var(--purple)}.guides a::after{color:var(--dim)}
.post .k{color:var(--purple)}.post .more{color:var(--text)}
.faq details{border-bottom-color:var(--line)}
.faq summary::after{background:var(--lav);color:var(--purple)}
.faq details[open] summary::after{background:var(--purple);color:#fff}
.faq details p{color:var(--muted)}
.final{color:#fff}
.book::before{background:radial-gradient(closest-side,rgba(85,21,170,.18),rgba(252,126,32,.1) 45%,rgba(245,243,251,0) 72%)}
.book .micro{color:var(--muted)}
.page-hero .lab{margin-bottom:0}
.field span{color:var(--text)}.field small{color:var(--dim)}
.field input,.field select,.field textarea{background:#fff;border-color:var(--line2);color:var(--text);color-scheme:light}
.field select option{background:#fff;color:var(--text)}
.field input::placeholder,.field textarea::placeholder{color:#9A9EA8}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);background:#fff;box-shadow:0 0 0 3px rgba(85,21,170,.15)}
.plans .opt{background:#fff;border-color:var(--line2)}
.plans input:checked+.opt{border-color:var(--purple);background:var(--lav);box-shadow:0 0 0 1px var(--purple)}
.plans small{color:var(--muted)}
.steps li{color:var(--muted);border-bottom-color:var(--line)}
.steps li::before{background:linear-gradient(135deg,#3D0F7A,#5515AA);box-shadow:none}
.video{background:var(--mint);border-color:var(--line)}
.video span{background:var(--ink);color:#fff}
.toc a{color:var(--muted);background:#fff;border-color:var(--line)}
.toc a:hover{color:var(--text);border-color:var(--purple)}
.person .ava{background:linear-gradient(135deg,#3D0F7A,#5515AA);box-shadow:none}
.same ul li{border-bottom-color:var(--line);color:var(--muted)}
.others a{color:var(--purple)}
.prose p,.prose ul,.prose ol{color:var(--muted)}
.prose .callout{background:#fff;border-color:var(--line)}
.prose img{border-color:var(--line)}
.prose th{color:var(--text)}.prose th,.prose td{border-bottom-color:var(--line);color:var(--muted)}
.prose blockquote{background:#fff;border-left-color:var(--purple);color:var(--text)}
.prose code{background:var(--lav);color:var(--violet)}
.prose pre{background:#1E1B2E;border-color:transparent;color:#EAEAEA}
.prose hr{border-top-color:var(--line)}
.prose a{color:var(--purple)}
.prose strong,.prose b{color:var(--text)}
.aside ul li{border-bottom-color:var(--line)}.aside a{color:var(--muted)}.aside a:hover{color:var(--purple)}
table.cmpt th,table.t th{color:var(--dim);border-bottom-color:var(--line)}
table.cmpt td,table.t td{border-bottom-color:var(--line);color:var(--muted)}
table.cmpt td:first-child{color:var(--text)}
table.cmpt td.grp{color:var(--purple)}
.pricing table.cmpt td:not(:first-child){color:var(--text)}
.side a{color:var(--muted)}.side a.on,.side a:hover{background:var(--lav);color:var(--text)}
.qty button{background:var(--lav);border-color:var(--line2)}.qty output{color:var(--text)}
.sum{border-bottom-color:var(--line);color:var(--muted)}.sum:last-of-type{color:var(--text)}
.ex{color:var(--purple);background:var(--lav);border-color:#D8CCF0}
.notice{background:var(--lav);border-color:#D8CCF0;color:var(--muted)}
.art-meta{color:var(--dim)}.art-meta b{color:var(--muted)}
.cover{background:#fff;border-color:var(--line);box-shadow:0 20px 60px rgba(61,15,122,.12)}
.filter input{background:#fff;border-color:var(--line2);color:var(--text);color-scheme:light}
.chipbar a,.chipbar button{color:var(--muted);background:#fff;border-color:var(--line)}
.chipbar a:hover,.chipbar button:hover{color:var(--text);border-color:var(--purple)}
.chipbar .on{background:var(--purple);color:#fff;box-shadow:none;border-color:transparent}
.plist li{background:#fff;border-color:var(--line)}.plist li:hover{border-color:var(--purple)}
.plist .th{background:var(--mint);border-color:var(--line)}
.plist a.t{color:var(--text)}.plist a.t:hover{color:var(--purple)}
.plist .d{color:var(--muted)}.plist .m{color:var(--dim)}.plist .m span{color:var(--purple)}
.ind .k{color:var(--purple)}.ind p{color:var(--muted)}.ind .more{color:var(--text)}
.social a{background:#fff;border-color:var(--line);color:var(--text)}
.social a:hover{border-color:var(--purple);background:var(--lav)}
footer{border-top-color:var(--line);color:var(--muted)}
footer::before{background:radial-gradient(closest-side,rgba(85,21,170,.08),rgba(245,243,251,0) 70%)}
footer h4{color:var(--text)}
footer li a:hover{color:var(--purple)}
.fbot{border-top-color:var(--line)}
.mbar{background:rgba(245,243,251,.94);border-top-color:var(--line)}
.consent{background:#fff;border-color:var(--line2);color:var(--muted);box-shadow:0 20px 60px rgba(23,24,28,.15)}
.consent a{color:var(--text)}
.skip{background:var(--ink);color:#fff}
:focus-visible{outline-color:var(--purple)}
.as-h1{color:var(--text)}
@media (max-width:820px){.hero .light::before{background:radial-gradient(closest-side,rgba(85,21,170,.16),rgba(245,243,251,0) 70%)}}


/* the menu's icon tiles. All six brand colours are present and none of them
   is text: every glyph sits on a pale fill in a form that reads on white. */
.t-purple{background:#F0E8FB;color:#5515AA}
.t-orange{background:#FDEEE4;color:#A34A08}
.t-turq{background:#EAFBF5;color:#0F7A62}
.t-pink{background:#FBE7FB;color:#A3189F}
.t-sky{background:#E6F4FA;color:#1E6C87}

/* the customer marks are silhouettes; on a light ground they are dark */
.track li.has-logo img{filter:brightness(0);opacity:.42}
.marquee:hover li.has-logo img{opacity:.72}


/* The brand theme (Adi, 26 Sep 2026: "update the website to match this brand system").

   Appended after theme-light.css, so it keeps that file's structural work and
   changes only what the real brand says. The source is the Branding Kit
   INSYNCR: Brand Guide v09/2024 by Expect More, the Correct colour palette
   PDF, and the live insyncr.com read on 26 September.

   Three things change against every earlier theme:

   1. Typefaces. Poppins for display, Onest for everything else. Both are OFL
      and both are served from our own assets folder, so no request leaves for
      Google. The earlier themes used Plus Jakarta Sans, which is not a brand
      face and never was.
   2. Blue Violet #792EDE is the main brand colour. #5515AA is its deep end,
      used for button fills and as the end of the main gradient, which is what
      the live site does. The earlier themes used #5515AA as though it were
      the main colour.
   3. The ground is white, and the primary button is violet at 30px, not
      orange at 12px. Safety orange goes back to being the accent.

   The three supporting colours from the guide, Steel Pink, Non Photo Blue and
   Turquoise, are declared here so illustration and diagrams can reach them.
*/

@font-face{font-family:"Poppins";src:url(fonts/Poppins-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/Poppins-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url(fonts/Onest-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* type: Poppins sets the display, Onest sets everything else */
  --display:"Poppins","Segoe UI",system-ui,sans-serif;
  --font:"Onest","Segoe UI",system-ui,sans-serif;
  --body:var(--font);

  /* the six brand colours, with the deep violet the live site actually uses */
  --purple:#792EDE;        /* BLUE VIOLET, the main brand colour */
  --violet:#5515AA;        /* its deep end, button fills and gradient ends */
  --deep:#5515AA;
  --accent:#792EDE;
  --accent2:#FC7E20;
  --orange:#FC7E20;        /* SAFETY ORANGE, the accent */
  --pink:#CA0CCE;          /* STEEL PINK */
  --sky:#94DDF5;           /* NON PHOTO BLUE */
  --turq:#43E5C0;          /* TURQUOISE */

  /* shades and pales from the palette, accents only, never the main colour */
  --purple-shade:#AE90DD;--lav:#EBE3F6;
  --peach:#F9BD95;--orange-pale:#FDEEE4;
  --mint:#F3FFF8;

  /* the ground is white, and CHARCOAL is the text colour, not black */
  --ground:#FFFFFF;
  --card:#FFFFFF;--card2:#F7F9FB;
  --text:#3C3F50;--ink:#3C3F50;
  --muted:#5C6070;--ink2:#5C6070;
  --dim:#727996;--ink3:#727996;
  --line:#DCDDE5;--line2:#C6C9D6;

  /* the primary button is violet now, so the button gradient is the brand one */
  --grad-btn:linear-gradient(204deg,#792EDE 0%,#5515AA 100%);
  --grad-text:linear-gradient(90deg,#792EDE 20%,#5515AA);
  --rail:linear-gradient(90deg,rgba(121,46,222,0),#792EDE);
  --sheen:none;

  --r:20px;

  /* Text safe versions of the lighter brand colours. Non Photo Blue and
     Turquoise are far too light to read on white, so anything that has to be
     read uses these darkened forms; the originals stay for fills and
     illustration. Contrast on white: turquoise 4.9:1, pink 5.4:1, sky 4.8:1,
     orange 4.6:1 at the label sizes they are used at. */
  --turq-ink:#0F7A62;--turq-ink-bg:#EAFBF5;--turq-ink-br:#BEEBDD;
  --pink-ink:#A3189F;
  --sky-ink:#1E6C87;
  --orange-dk:#A34A08;
}

body{background:var(--ground);color:var(--text);font-family:var(--font)}

/* Poppins on the display sizes, Onest everywhere else. Poppins runs wider than
   Plus Jakarta Sans, so the tracking eases off or the headline crowds itself. */
h1,h2{font-family:var(--display);font-weight:700}
h3,h4{font-family:var(--font);font-weight:600}
h1{letter-spacing:-1.2px}
h2{letter-spacing:-.8px}
h3{letter-spacing:-.2px}
.big,.metric b,.stat b{font-family:var(--display)}

/* buttons: violet fill, 30px, Onest. The 30px corner is a large part of why
   the live site reads as INSYNCR rather than as a framework default. */
.btn{border-radius:30px;font-family:var(--font);font-weight:500}
.btn-primary{background:var(--grad-btn);color:#fff;font-weight:500}
.btn-primary::after{background:rgba(255,255,255,.18) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center/16px no-repeat}
.btn-primary::before{background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%)}
.btn-ghost{background:#fff;border-color:var(--purple);color:var(--purple)}
.btn-ghost:hover{background:var(--lav);border-color:var(--purple);color:var(--violet)}
.btn-ink{background:var(--text);color:#fff}
.btn-ink:hover{background:#4A4E60}

/* safety orange is the accent, so it marks one thing rather than filling a control */
.lab,.pill{background:var(--lav);border-color:#DDD1F2;color:var(--purple)}
.card .lab,.prose .lab,.callout .lab,.strip .lab,.hollow .lab,form .lab{color:var(--purple)}
.card-purple .lab{color:var(--peach)}
.card-purple{background:linear-gradient(204deg,#792EDE 0%,#5515AA 100%)}
.pills span{color:var(--purple);background:var(--lav);border-color:#DDD1F2}
.link{color:var(--purple);text-decoration-color:rgba(121,46,222,.35)}
.link:hover{text-decoration-color:var(--purple)}

/* surfaces on a white ground: an edge, not a fill */
.card{background:#fff;border-color:var(--line);box-shadow:0 2px 10px rgba(60,63,80,.06)}
.card::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(121,46,222,.05),transparent 60%)}
a.card:hover,.grid>.card:not(form):hover,.post:hover{border-color:var(--purple);box-shadow:0 14px 40px rgba(121,46,222,.12)}
.site-head.scrolled{background:rgba(255,255,255,.88);border-bottom-color:var(--line)}
.frame{box-shadow:0 30px 70px rgba(60,63,80,.2),0 0 0 1px rgba(60,63,80,.06)}

/* the atmospheric washes come off the live site rather than being invented */
.hero .light::before{background:radial-gradient(closest-side,rgba(121,46,222,.12),rgba(252,126,32,.07) 45%,rgba(255,255,255,0) 72%)}
.choose::before{background:radial-gradient(closest-side,rgba(121,46,222,.07),rgba(255,255,255,0) 70%)}
.book::before{background:radial-gradient(closest-side,rgba(121,46,222,.1),rgba(252,126,32,.06) 45%,rgba(255,255,255,0) 72%)}
.marquee::before{background:linear-gradient(90deg,#FFFFFF 5%,rgba(255,255,255,0))}
.marquee::after{background:linear-gradient(90deg,rgba(255,255,255,0),#FFFFFF 95%)}

/* remaining lavender fills that the light theme set */
.tabs button:hover,.tab ol b,.src li,.cmp .tag,.faq summary::after,.brand-art{background:var(--lav)}
.tab ol b,.src li,.cmp .tag,.faq summary::after{color:var(--purple)}
.src li{border-color:#DDD1F2}
.quote cite i,.step-n,.steps li::before,.person .ava,.plan .most-tag,.badge{background:linear-gradient(204deg,#792EDE,#5515AA)}
.rail>div::before{background:var(--purple);box-shadow:0 0 0 4px rgba(121,46,222,.18),0 0 18px rgba(121,46,222,.45)}
.plans input:checked+.opt{border-color:var(--purple);background:var(--lav);box-shadow:0 0 0 1px var(--purple)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(121,46,222,.15)}
:focus-visible{outline-color:var(--purple)}

/* The hero headline. 86px was chosen for the dark design in a narrower face;
   in Poppins it pushes the product below the fold, which defeats a hero. The
   live site sets h1 at 40px, so 60px here keeps the impact and still leaves
   the animation visible at rest. */
.home .hero h1{font-size:60px;line-height:66px;letter-spacing:-1.4px}
@media (max-width:1100px){ .home .hero h1{font-size:48px;line-height:54px} }

/* The no endpoint hand off, shown in place of a submission until the forms
   are connected. It has to read as "not done yet", so it borrows the warning
   ground rather than the brand's. */
.handoff{margin-top:20px;border:1px solid #F2D9A8;background:#FFFBF2;border-radius:var(--r);padding:18px 20px}
.handoff-h{margin:0;font:600 15px/1.4 var(--font);color:#7A5C00}
.handoff-p{margin:6px 0 0;font:400 14px/1.5 var(--font);color:var(--muted)}
.handoff-p b{color:var(--text);font-weight:600}
.handoff-pre{margin:14px 0 0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  font:400 13px/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);
  white-space:pre-wrap;word-break:break-word;overflow-x:auto}
.handoff-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.handoff-btns .btn{padding:10px 20px;font-size:14px}

/* The customer strip. A logo sits at a fixed optical height and goes grey so
   no single brand shouts over the others; colour returns on hover. A customer
   whose logo file has not arrived yet renders as their name in the same row,
   at the same weight, so the strip never looks half finished. */
.brands .track li{display:flex;align-items:center;justify-content:center;height:42px}
.brands .track li.has-logo{padding:0 4px}
.brands .track li.has-logo img{
  /* an explicit height, not max-height: the image needs a box before it loads,
     or it has zero area and never loads */
  height:36px;width:auto;max-width:190px;display:block;object-fit:contain;
  /* brightness(0), not grayscale(1). Grayscale leaves white white, and the
     official Arconic and Creative Planning files are white-on-dark versions,
     so on this light ground their wordmarks disappeared entirely. Collapsing
     to a solid silhouette renders every mark at one weight whatever colour
     it started as, and puts a logo at the same optical weight as a customer
     name still shown as text. */
  filter:brightness(0) opacity(.62);
  transition:opacity .3s var(--ease);
}
.brands .track li.has-logo:hover img{filter:brightness(0) opacity(.88)}
@media (prefers-reduced-motion:reduce){ .brands .track li.has-logo img{transition:none} }

/* ============================================================
   Bringing the rest of the palette back in.

   The brand has six colours and the site was using one. Checked against the
   live insyncr.com on 26 September: it shows 38 visibly orange elements, ours
   showed zero, because making the primary button violet removed the only
   orange on the page and nothing replaced it. The live site's pattern is
   orange on the small headings above a feature or a card, so that is the
   pattern followed here, and the three supporting colours from the guide take
   the jobs they are actually for.

   The discipline: violet still identifies, orange still asks for the click.
   These are accents at label size, never a second identity.
   ============================================================ */

/* the small caps label above a step, a metric or a feature: orange, which is
   where the live site puts it */
.k,.sec2 .k{color:var(--orange)}
.metric .k,.tab .k{color:var(--orange)}

/* the reassurance ticks under the hero: turquoise, darkened so it passes on
   white. A tick is a "this is fine" signal and it should not be the brand
   colour, which is doing the identifying. */
.chips i{background:var(--turq-ink-bg);border-color:var(--turq-ink-br);color:var(--turq-ink)}
.chips i svg{stroke:var(--turq-ink)}

/* "Read more" on a card: orange arrow, so a card has somewhere warm to rest */
.more{color:var(--orange)}
.more::after{background:var(--orange)}
a.card:hover .more{color:var(--orange-dk)}

/* The industries grid. Eight cards all in violet read as one block, so the
   tier label rotates through the palette. Nothing structural changes; it is a
   label colour, which is why it can carry the lighter colours safely. */
.ind:nth-child(8n+1) .k{color:var(--orange)}
.ind:nth-child(8n+2) .k{color:var(--pink-ink)}
.ind:nth-child(8n+3) .k{color:var(--turq-ink)}
.ind:nth-child(8n+4) .k{color:var(--purple)}
.ind:nth-child(8n+5) .k{color:var(--sky-ink)}
.ind:nth-child(8n+6) .k{color:var(--orange)}
.ind:nth-child(8n+7) .k{color:var(--pink-ink)}
.ind:nth-child(8n+8) .k{color:var(--turq-ink)}

/* a card picks up its accent on hover instead of always violet */
.ind:nth-child(8n+1):hover{border-color:var(--orange)}
.ind:nth-child(8n+2):hover{border-color:var(--pink-ink)}
.ind:nth-child(8n+3):hover{border-color:var(--turq-ink)}
.ind:nth-child(8n+5):hover{border-color:var(--sky-ink)}
.ind:nth-child(8n+6):hover{border-color:var(--orange)}
.ind:nth-child(8n+7):hover{border-color:var(--pink-ink)}
.ind:nth-child(8n+8):hover{border-color:var(--turq-ink)}

/* the comparison tag and the numbered list markers inside a step */
.cmp .tag{background:var(--orange-pale);color:var(--orange-dk);border-color:#F6D9BE}
.tab ol b{background:var(--orange-pale);color:var(--orange-dk)}

/* The customer row used to sit on a pale orange block. Adi, 4 October:
   "the orange box looks ugly as hell". He is right, and the colour was the
   smaller half of it. The block was a hard edged rectangle with square
   corners in a design made of rounded cards, in an orange that belongs to
   nothing else on the page, and because the cards are laid out on a track
   that does not stretch, four of them filled about half of it and the rest
   was empty fill. On /solutions/many-documents/ there is one card in it.

   The break between sections is worth keeping, so it is a rule rather than
   a wash: a hairline above, no fill, and the side padding dropped so the
   cards line up with the text above them instead of sitting inset. */
.strip{background:none;border-top:1px solid var(--line);padding:34px 0 10px}


/* the menu's section headings take the orange the live site gives small
   uppercase labels, so the panel is not four columns of one purple */
/* .mhead was Safety Orange here and measured 2.58:1 on white. It is set
   from --mhead now, which is the deep violet at 10.13:1. */
.mpack:hover{border-color:var(--purple);box-shadow:0 10px 26px rgba(121,46,222,.14)}
.mpack-f li::before{background:var(--orange)}
.pack-price{color:var(--violet)}


/* Purple call to action cards were white text on a white card, on 169 pages:
   every "try it on your own report" box in every article, the plan card on
   every industry page, the closing card on most inner pages. The .card rule
   above sets a white fill at the same specificity as .card-purple and this
   file loads after the one that fills it, so white won. Naming both classes
   settles it. */
.card.card-purple{background:linear-gradient(135deg,#5515AA 0%,#792EDE 100%);border-color:transparent;color:#fff;box-shadow:0 18px 44px rgba(85,21,170,.22)}
.card.card-purple::after{background:none}
.card.card-purple h2,.card.card-purple h3{color:#fff}
.card.card-purple p{color:rgba(255,255,255,.88)}
.card.card-purple .lab{color:#F9BD95}
.card.card-purple .link{color:#fff;text-decoration-color:rgba(255,255,255,.5)}


/* The home page hero animation, scoped under #stage.
   Generated from mockups/hero-motion/v2-powerpoint.html by the build.
   Seventeen of the animation's class names collide with the site's own
   (.tab, .bar, .state, .src and others), so every rule is scoped to the
   animation's root element. The readable source is in the mockup.
   Only the host chrome tokens below stay global: they are Microsoft's
   palette, not ours, and have no place in the brand token set. */
:root{
  --ppt:#C43E1C;
  --ui:"Segoe UI","Segoe UI Web (West European)",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --chrome:#F5F3F1;--chrome-line:#E1DFDD;--chrome-ink:#323130;--chrome-ink2:#605E5C;
}
#stage{
  position:relative;margin-top:36px;border-radius:22px;border:1px solid var(--line);
  background:
    radial-gradient(1100px 420px at 80% 6%,rgba(85,21,170,.08),transparent 62%),
    radial-gradient(700px 400px at 4% 96%,rgba(196,62,28,.06),transparent 60%),
    var(--card2);
  overflow:hidden;
}
#stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(85,21,170,.15) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 32%,transparent 76%);
          mask-image:radial-gradient(120% 100% at 50% 0%,#000 32%,transparent 76%);
}
#stage .stage-in{position:relative;padding:clamp(16px,3vw,40px)}
#stage .ppt{
  position:relative;border-radius:8px;overflow:hidden;background:#fff;
  border:1px solid #D2D0CE;font-family:var(--ui);
  box-shadow:0 34px 80px rgba(23,24,28,.20),0 3px 10px rgba(23,24,28,.10);
}
#stage .tbar{display:flex;align-items:center;gap:11px;height:38px;padding-left:10px;background:var(--chrome);border-bottom:1px solid var(--chrome-line)}
#stage .plogo{width:19px;height:19px;border-radius:3px;background:var(--ppt);color:#fff;font:700 11px/19px var(--ui);text-align:center;flex:none;letter-spacing:-.3px}
#stage .autosave{display:flex;align-items:center;gap:6px;font:400 11.5px/1 var(--ui);color:var(--chrome-ink2);white-space:nowrap}
#stage .sw{width:26px;height:14px;border-radius:8px;background:#C8C6C4;position:relative;flex:none}
#stage .sw::after{content:"";position:absolute;top:2.5px;left:3px;width:9px;height:9px;border-radius:50%;background:#fff}
#stage .tbar .fname{font:600 12px/1 var(--ui);color:var(--chrome-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stage .tbar .saved{font:400 11.5px/1 var(--ui);color:var(--chrome-ink2);white-space:nowrap}
#stage .wbtns{margin-left:auto;display:flex;height:100%;flex:none}
#stage .wbtns span{width:42px;display:grid;place-items:center;font:400 11px/1 var(--ui);color:var(--chrome-ink)}
/* The generic .tabs component in site.css is a centred row of pill buttons
   used elsewhere on the site, and all of it was leaking in here: a 40px
   top margin, an 8px gap, wrapping, and centre justification. The 40px
   showed as a white band between the title bar and the ribbon tabs, which
   real PowerPoint does not have and which cost the window 40px of height
   for nothing. Note 16 on the home page, 1 October. Everything the
   generic rule sets is neutralised here rather than only the margin, so
   the leak cannot come back through one of the other four properties. */
#stage .tabs{display:flex;align-items:stretch;background:var(--chrome);padding-right:8px;border-bottom:1px solid var(--chrome-line);overflow:hidden;margin:0;gap:0;flex-wrap:nowrap;justify-content:flex-start}
#stage .tab{
  position:relative;padding:0 10px;height:30px;display:flex;align-items:center;
  font:400 12px/1 var(--ui);color:var(--chrome-ink);white-space:nowrap;
  border-radius:4px 4px 0 0;transition:background .18s var(--ease)}
#stage .tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:transparent;transition:background .22s var(--ease)}
#stage .tab.file{background:var(--ppt);color:#fff;border-radius:0;font-weight:600;padding:0 14px}
#stage .tab.on{background:#fff;font-weight:600}
#stage .tab.on::after{background:var(--ppt)}
#stage .tab.ours{display:flex;gap:6px;align-items:center;font-weight:600;color:var(--purple)}
#stage .tab.ours i{width:12px;height:12px;border-radius:3px;background:var(--purple);flex:none}
/* .ribbon in site.css carries margin-bottom:var(--gap), which put a 20px
   white gap between the ribbon and the slide area. Same leak, same fix. */
#stage .ribbon{display:flex;align-items:stretch;background:#fff;border-bottom:1px solid var(--chrome-line);padding:4px 8px 0;min-height:74px;overflow:hidden;margin:0}
#stage .rgroup{display:flex;flex-direction:column;justify-content:space-between;padding:0 10px;border-right:1px solid #EDEBE9}
#stage .rrow{display:flex;gap:2px;align-items:flex-start}
#stage .gname{text-align:center;font:400 10px/1 var(--ui);color:var(--chrome-ink2);padding:3px 0 4px}
#stage .rbtn{
  display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px;padding:4px 6px 3px;
  border-radius:4px;font:400 10.5px/1.15 var(--ui);color:var(--chrome-ink);text-align:center;
  transition:background .15s var(--ease),transform .1s var(--ease)}
#stage .rbtn svg{width:19px;height:19px;stroke-width:1.6;flex:none}
#stage .rbtn.big{min-width:58px}
#stage .rbtn.hot{background:#EFE7FA}
#stage .rbtn.press{transform:scale(.94)}
#stage .rbtn.spin svg{animation:spin .75s linear 2}
@keyframes spin{to{transform:rotate(360deg)}}
#stage #ourGroups{display:none;opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
#stage #ourGroups.in{opacity:1;transform:none}
#stage #msGroups{display:flex}
#stage .ribbon .state{
  align-self:center;margin-left:auto;margin-right:4px;display:inline-flex;align-items:center;gap:6px;
  font:600 10.5px/1 var(--ui);letter-spacing:.2px;padding:5px 10px;border-radius:3px;
  background:#FFF4CE;color:#7A5C00;border:1px solid #F2E2A8;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
#stage .ribbon .state b{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
#stage .ribbon .state.live{background:#DFF6DD;color:#0B6A0B;border-color:#B7E3B4}
#stage .work{display:grid;grid-template-columns:106px minmax(0,1fr) 216px;background:#F3F2F1}
#stage .thumbs{background:#fff;border-right:1px solid var(--chrome-line);padding:8px 6px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
#stage .th{display:flex;gap:5px;align-items:flex-start}
#stage .th .n{font:400 10px/1 var(--ui);color:var(--chrome-ink2);width:12px;text-align:right;padding-top:12px;flex:none}
#stage .th .pv{flex:1;aspect-ratio:16/9;border:1px solid #D2D0CE;border-radius:2px;background:#fff;padding:4px;overflow:hidden;position:relative;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
#stage .th.sel .pv{border-color:var(--ppt);box-shadow:0 0 0 1.5px var(--ppt)}
#stage .th .l{display:block;height:2.5px;border-radius:1px;background:#C9C6F0;margin-bottom:2.5px}
#stage .th .l.t{background:#8F7BD4;width:72%;height:3.5px;margin-bottom:4px}
#stage .th .l.s{width:52%}
#stage .th .pv::after{content:"";position:absolute;inset:0;background:var(--purple);opacity:0;transition:opacity .18s var(--ease)}
#stage .th.ping .pv::after{opacity:.22}
#stage .canvasarea{position:relative;padding:clamp(12px,2vw,22px);display:grid;place-items:center;overflow:hidden}
#stage .deck{position:relative;width:100%}
#stage .ghost{
  position:absolute;inset:0;border-radius:2px;background:#fff;border:1px solid #D2D0CE;
  box-shadow:0 8px 20px rgba(23,24,28,.16);opacity:0;transform:translate3d(0,0,0) rotate(0deg);
  transition:transform .75s var(--ease),opacity .45s var(--ease);padding:14px 16px;overflow:hidden}
#stage .ghost .gname{font:700 12.5px/1.2 var(--font);color:var(--ink);letter-spacing:-.2px}
#stage .ghost .gsub{margin-top:4px;font:500 9.5px/1.2 var(--font);color:var(--ink3)}
#stage .ghost .gbar{margin-top:12px;height:5px;border-radius:3px;background:var(--lav)}
#stage .ghost .gbar+.gbar{margin-top:6px;width:70%}
#stage .slide{
  position:relative;z-index:2;aspect-ratio:16/9;border-radius:2px;background:#fff;border:1px solid #D2D0CE;
  box-shadow:0 10px 26px rgba(23,24,28,.18);padding:clamp(12px,1.8vw,20px) clamp(14px,2vw,22px);
  transform-origin:0 0;transition:transform .7s var(--ease);
  display:flex;flex-direction:column;font-family:var(--font)}
#stage .deck.fanned .slide{transform:scale(.965)}
#stage .slide-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
#stage .eyebrow{font:700 clamp(7px,.75vw,9px)/1.2 var(--font);letter-spacing:1.2px;text-transform:uppercase;color:var(--purple)}
#stage .slide h2{margin:5px 0 0;font:700 clamp(14px,1.9vw,22px)/1.14 var(--font);letter-spacing:-.5px;color:var(--ink)}
#stage .asat{font:500 clamp(8px,.8vw,10px)/1.3 var(--font);color:var(--ink3);text-align:right;white-space:nowrap}
#stage .asat s{display:block;text-decoration:none;font-weight:700;color:var(--ink2);font-size:1.12em}
#stage .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,10px);margin-top:clamp(8px,1.3vw,14px)}
#stage .kpi{border:1px solid #E6E3F0;border-radius:4px;padding:clamp(6px,.85vw,10px);background:#FCFBFE;position:relative}
#stage .kpi .k{font:700 clamp(6px,.62vw,8px)/1.2 var(--font);letter-spacing:.7px;text-transform:uppercase;color:var(--ink3)}
#stage .kpi .v{margin-top:4px;display:flex;align-items:baseline;font:700 clamp(14px,2.1vw,25px)/1 var(--font);letter-spacing:-.9px;color:var(--ink);font-variant-numeric:tabular-nums}
#stage .kpi .u{font-size:.54em;font-weight:700;color:var(--ink3)}
#stage .kpi .d{margin-top:3px;font:600 clamp(7px,.72vw,9.5px)/1.2 var(--font);color:#0B6A0B}
#stage .kpi .d.dn{color:#A33417}
#stage .kpi::after{content:"";position:absolute;inset:0;border-radius:4px;box-shadow:inset 0 0 0 2px var(--purple);opacity:0;transition:opacity .3s var(--ease)}
#stage .kpi.flash::after{opacity:1}
#stage .odo{display:inline-flex;overflow:hidden;height:1em;line-height:1}
#stage .odo .col{width:1ch;overflow:hidden;height:1em;text-align:center}
#stage .odo .col span{display:block;height:1em;transition:transform .85s var(--ease)}
#stage .odo .col.c1 span{transition-duration:.7s}
#stage .odo .col.c2 span{transition-duration:.95s}
#stage .odo .col.c3 span{transition-duration:1.1s}
#stage .chartwrap{margin-top:clamp(7px,1.1vw,12px);flex:1;border:1px solid #E6E3F0;border-radius:4px;padding:clamp(6px,.9vw,11px);background:#FCFBFE;display:flex;flex-direction:column;min-height:0}
#stage .chartwrap .ct{font:700 clamp(6px,.62vw,8px)/1.2 var(--font);letter-spacing:.7px;text-transform:uppercase;color:var(--ink3)}
#stage .bars{margin-top:7px;flex:1;display:flex;align-items:flex-end;gap:clamp(3px,.75vw,9px);min-height:0}
#stage .bar{flex:1;border-radius:2px 2px 0 0;background:linear-gradient(180deg,#7A3FC4,var(--purple));height:20%;transition:height .8s var(--ease);min-width:4px}
#stage .bar.mut{background:linear-gradient(180deg,#CFC3E6,#BCACDD)}
#stage .blabels{display:flex;gap:clamp(3px,.75vw,9px);margin-top:4px}
#stage .blabels span{flex:1;text-align:center;font:600 clamp(5.5px,.6vw,8px)/1.2 var(--font);color:var(--ink3);min-width:4px}
#stage .fieldtag{
  position:absolute;z-index:6;pointer-events:none;font:700 10px/1 var(--ui);color:#fff;background:var(--purple);
  border-radius:3px;padding:4px 7px;white-space:nowrap;box-shadow:0 5px 14px rgba(61,15,122,.3);
  opacity:0;transform:translateY(4px) scale(.92);transition:opacity .26s var(--ease),transform .26s var(--ease)}
#stage .fieldtag.show{opacity:1;transform:translateY(0) scale(1)}
#stage .pane{background:#fff;border-left:1px solid var(--chrome-line);display:flex;flex-direction:column;overflow:hidden}
#stage .pane-top{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid var(--chrome-line)}
#stage .pane-top i{width:15px;height:15px;border-radius:3px;background:var(--purple);flex:none}
#stage .pane-top .t{font:600 12px/1 var(--ui);color:var(--chrome-ink)}
#stage .pane-top .x{margin-left:auto;font:400 12px/1 var(--ui);color:var(--chrome-ink2)}
#stage .pane-body{padding:9px 10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
#stage .pane-h{font:600 10px/1.2 var(--ui);letter-spacing:.5px;text-transform:uppercase;color:var(--chrome-ink2);margin-bottom:1px}
#stage .src{display:flex;align-items:center;gap:8px;border:1px solid var(--chrome-line);border-radius:4px;padding:7px 8px;background:#fff;transition:border-color .3s var(--ease),background .3s var(--ease)}
#stage .src .ic{width:21px;height:21px;border-radius:3px;display:grid;place-items:center;font:700 8.5px/1 var(--ui);color:#fff;flex:none}
#stage .src .nm{font:600 11px/1.2 var(--ui);color:var(--chrome-ink)}
#stage .src .st{margin-top:1px;font:400 9.5px/1.2 var(--ui);color:var(--chrome-ink2)}
#stage .src .tick{margin-left:auto;width:14px;height:14px;border-radius:50%;border:1.4px solid #C8C6C4;display:grid;place-items:center;flex:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
#stage .src .tick svg{width:8px;height:8px;opacity:0;transition:opacity .25s var(--ease)}
#stage .src.on{border-color:var(--purple);background:#FCFAFF}
#stage .src.on .tick{background:var(--purple);border-color:var(--purple)}
#stage .src.on .tick svg{opacity:1}
#stage .pane-foot{margin:2px 0 0;font:400 9.5px/1.45 var(--ui);color:var(--chrome-ink2)}
#stage .pane-foot b{color:var(--chrome-ink);font-weight:600}
#stage .vbox{margin-top:auto;border-top:1px solid var(--chrome-line);padding:10px;transition:background .3s var(--ease)}
#stage .vbox.on{background:#FCFAFF}
#stage .vbox .k{font:600 9px/1.2 var(--ui);letter-spacing:.5px;text-transform:uppercase;color:var(--chrome-ink2)}
#stage .vbox .v{margin-top:3px;font:700 26px/1 var(--font);letter-spacing:-1.1px;color:var(--purple);font-variant-numeric:tabular-nums}
#stage .vbox .s{margin-top:3px;font:400 9.5px/1.35 var(--ui);color:var(--chrome-ink2)}
#stage .sbar{display:flex;align-items:center;gap:14px;height:26px;padding:0 12px;background:var(--chrome);border-top:1px solid var(--chrome-line);font:400 11px/1 var(--ui);color:var(--chrome-ink2);white-space:nowrap;overflow:hidden}
#stage .sbar .grow{margin-left:auto;display:flex;align-items:center;gap:10px}
#stage .sbar .views{display:flex;gap:6px}
#stage .sbar .views i{width:13px;height:11px;border:1.3px solid var(--chrome-ink2);border-radius:1.5px;display:block}
#stage .sbar .views i.on{border-color:var(--ppt);background:rgba(196,62,28,.12)}
#stage .zoom{display:flex;align-items:center;gap:6px}
#stage .zoom .rail{width:58px;height:2px;background:#C8C6C4;position:relative;border-radius:1px;display:block}
#stage .zoom .rail::after{content:"";position:absolute;left:34px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--chrome-ink2)}
#stage .caption{
  position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(14px,2.4vw,24px);z-index:8;max-width:330px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;
  box-shadow:0 14px 34px rgba(61,15,122,.15);font:500 12.5px/1.45 var(--font);color:var(--ink2);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
#stage .caption.show{opacity:1;transform:translateY(0)}
#stage .caption b{display:block;color:var(--ink);font-weight:700;margin-bottom:2px;font-size:13px;letter-spacing:-.1px}
#stage .cursor{position:absolute;left:0;top:0;z-index:20;width:20px;height:20px;pointer-events:none;
  transform:translate3d(-100px,-100px,0);transition:transform 1s var(--ease);
  filter:drop-shadow(0 3px 5px rgba(23,24,28,.3))}
#stage .cursor.fast{transition-duration:.55s}
#stage .cursor .halo{position:absolute;left:-9px;top:-9px;width:34px;height:34px;border-radius:50%;background:var(--purple);opacity:0;transform:scale(.3)}
#stage .cursor.click .halo{animation:tap .5s var(--ease)}
@keyframes tap{0%{opacity:.32;transform:scale(.3)}100%{opacity:0;transform:scale(1.2)}}
#stage .drag{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--purple);
  border-radius:4px;padding:4px 8px;font:600 10px/1 var(--ui);color:var(--purple);white-space:nowrap;
  box-shadow:0 7px 18px rgba(61,15,122,.22);opacity:0;transform:scale(.9);
  transition:opacity .2s var(--ease),transform .2s var(--ease)}
#stage .cursor.carry .drag{opacity:1;transform:scale(1)}
#stage .beats{display:flex;gap:6px;position:absolute;top:clamp(12px,2vw,18px);right:clamp(16px,3vw,40px);z-index:9}
#stage .beats i{width:26px;height:3px;border-radius:2px;background:var(--line2);overflow:hidden;position:relative}
#stage .beats i::after{content:"";position:absolute;inset:0;width:0;background:var(--purple)}
#stage .beats i.done::after{width:100%}
#stage .beats i.run::after{width:100%;transition:width var(--beat,3s) linear}
#stage .facts{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:14px 20px}
#stage .facts .lead{display:inline-flex;align-items:center;gap:8px;font:700 10px/1.2 var(--font);letter-spacing:1.1px;text-transform:uppercase;color:var(--ink3)}
#stage .facts .lead i{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
#stage .fact{display:inline-flex;align-items:baseline;gap:7px;font:500 12.5px/1.2 var(--font);color:var(--ink3);white-space:nowrap}
#stage .fact b{font-weight:700;color:var(--ink);font-size:15px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
#stage .controls{margin-top:14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#stage .ctl{font:600 12px/1 var(--font);color:var(--ink2);background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;cursor:pointer}
#stage .ctl:hover{border-color:var(--purple);color:var(--purple)}
#stage .hint{font:500 12px/1.4 var(--font);color:var(--dim)}
@media (max-width:1040px){
#stage .work{grid-template-columns:86px minmax(0,1fr) 190px}
#stage .rbtn span{display:none}
#stage .rbtn, #stage .rbtn.big{min-width:36px}
}
@media (max-width:860px){
#stage .work{grid-template-columns:minmax(0,1fr) 180px}
#stage .thumbs{display:none}
#stage .tab:nth-child(n+7):not(.ours){display:none}
}
@media (max-width:620px){
#stage .work{grid-template-columns:minmax(0,1fr)}
#stage .pane{border-left:0;border-top:1px solid var(--chrome-line)}
#stage .tab:nth-child(n+4):not(.ours){display:none}
#stage .autosave, #stage .tbar .saved{display:none}
#stage .caption{position:static;max-width:none;margin-top:14px;opacity:1;transform:none}
#stage .sbar span:nth-child(n+2):not(.grow){display:none}
}
@media (prefers-reduced-motion:reduce){
#stage *, #stage *::before, #stage *::after{animation:none!important;transition:none!important}
#stage .cursor, #stage .beats{display:none}
#stage .caption{opacity:1;transform:none}
}
/* ---- placing the animation in the home hero ----
   The dark design put the product shot in .panel, absolutely positioned at
   left:820px and 1240px wide so it bled off the right edge with a 3D turn,
   starting at opacity 0 until the reveal script ran. A full width animated
   window cannot live in that. The build removes .panel entirely and drops the
   stage into the hero's normal flow instead, so the text reads first and the
   product runs full width underneath it, which is also where a visitor looks
   next. */
.home .hero{min-height:0;padding:48px 0 88px}
.home .hero .left{max-width:900px}
.home .hero .wrap>#stage{margin-top:44px}
.home .hero #stage{position:relative;z-index:2}
/* the hero's two drifting glows were sized for a 1240px panel on a dark
   ground; on white they only need to hint. */
.home .hero .light::before{width:820px;height:600px;left:52%;filter:blur(60px)}
.home .hero .light::after{display:none}
@media (max-width:900px){ .home .hero{padding:32px 0 64px} .home .hero .wrap>#stage{margin-top:32px} }


/* The four "how it works" step animations.

   They replace four raw product screenshots that showed the app but not the
   mechanism: a reader could not tell from a still what binding or a rule
   actually does. Each panel is a small scripted loop in the same language as
   the hero, and only the one inside the open tab runs.

   Everything is scoped under .stepfx. The hero animation taught this lesson
   the hard way: short generic class names like .tab and .bar collide with the
   site's own and silently restyle it.
*/
.stepfx{
  position:relative;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(180deg,#FCFBFE,#F7F9FB);
  padding:clamp(14px,2vw,22px);overflow:hidden;min-height:250px;
  display:flex;flex-direction:column;gap:12px;
}
.stepfx *{box-sizing:border-box}
.stepfx .fx-cap{
  display:flex;align-items:center;gap:8px;font:600 11px/1.2 var(--font);
  letter-spacing:.4px;color:var(--dim);text-transform:uppercase;
}
.stepfx .fx-cap i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.stepfx .fx-body{flex:1;display:flex;gap:12px;min-height:0}
@media (max-width:620px){ .stepfx .fx-body{flex-direction:column} }

/* a small window, the same idea as the hero's but cut down */
.stepfx .win{
  flex:1;min-width:0;background:#fff;border:1px solid var(--line2);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(60,63,80,.06);
}
.stepfx .win-bar{
  display:flex;align-items:center;gap:6px;padding:7px 10px;background:#F5F3F1;
  border-bottom:1px solid #E1DFDD;font:400 10.5px/1 "Segoe UI",system-ui,sans-serif;color:#605E5C;
}
.stepfx .win-bar b{width:13px;height:13px;border-radius:3px;background:#C43E1C;color:#fff;
  font:700 8px/13px "Segoe UI",system-ui,sans-serif;text-align:center;flex:none}
.stepfx .win-in{padding:11px 12px;flex:1;display:flex;flex-direction:column;gap:9px;min-height:0}

/* source rows, step 1 */
.stepfx .srow{
  display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;
  padding:7px 9px;background:#fff;transition:border-color .3s var(--ease),background .3s var(--ease);
}
.stepfx .srow .ic{width:20px;height:20px;border-radius:4px;flex:none;display:grid;place-items:center;
  font:700 8px/1 var(--font);color:#fff}
.stepfx .srow .nm{font:600 11.5px/1.2 var(--font);color:var(--text)}
.stepfx .srow .sub{margin-top:1px;font:400 10px/1.2 var(--font);color:var(--dim)}
.stepfx .srow .dot{margin-left:auto;font:700 9px/1 var(--font);letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.stepfx .srow.live{border-color:var(--turq-ink);background:var(--turq-ink-bg)}
.stepfx .srow.live .dot{color:var(--turq-ink)}

/* a data table that streams in */
.stepfx .tbl{border:1px solid var(--line);border-radius:7px;overflow:hidden;font:400 10.5px/1 var(--font)}
.stepfx .tbl .tr{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1px;background:var(--line)}
.stepfx .tbl .tr>span{background:#fff;padding:6px 8px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepfx .tbl .tr.hd>span{background:#F7F9FB;color:var(--dim);font-weight:700;font-size:9.5px;letter-spacing:.4px;text-transform:uppercase}
.stepfx .tbl .tr.rowin{opacity:0;transform:translateY(-4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.stepfx .tbl .tr.rowin.on{opacity:1;transform:none}

/* a mini slide */
.stepfx .sl{background:#fff;border:1px solid var(--line2);border-radius:3px;padding:12px 13px;flex:1;
  display:flex;flex-direction:column;gap:8px;min-height:0;position:relative}
.stepfx .sl .eye{font:700 8px/1.2 var(--font);letter-spacing:1.1px;text-transform:uppercase;color:var(--orange)}
.stepfx .sl h4{margin:0;font:700 clamp(12px,1.5vw,16px)/1.2 var(--display);letter-spacing:-.3px;color:var(--text)}
.stepfx .ph{display:inline-block;border-radius:3px;padding:1px 5px;background:var(--lav);color:var(--purple);
  font:600 .92em/1.25 var(--font);transition:background .3s var(--ease),color .3s var(--ease)}
.stepfx .ph.bound{background:transparent;color:inherit;padding:1px 0}
.stepfx .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.stepfx .kpi{border:1px solid var(--line);border-radius:5px;padding:7px 8px;background:#FCFBFE;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.stepfx .kpi .lbl{font:700 7.5px/1.2 var(--font);letter-spacing:.6px;text-transform:uppercase;color:var(--dim)}
.stepfx .kpi .val{margin-top:3px;font:700 clamp(14px,2vw,19px)/1 var(--font);letter-spacing:-.6px;color:var(--text);
  font-variant-numeric:tabular-nums}
.stepfx .kpi .dlt{margin-top:2px;font:600 8.5px/1.2 var(--font);color:var(--turq-ink)}
.stepfx .kpi.warn{border-color:#E8B9AC;background:#FDF5F2}
.stepfx .kpi.warn .dlt{color:#A31C4F}
.stepfx .kpi.flash{border-color:var(--purple);background:#FCFAFF}

/* the rule strip, step 3 */
.stepfx .rule{display:flex;align-items:center;gap:7px;flex-wrap:wrap;border:1px dashed var(--line2);
  border-radius:7px;padding:8px 10px;background:#fff;font:600 10.5px/1.4 var(--font);color:var(--text)}
.stepfx .rule code{font:700 10px/1 ui-monospace,Menlo,Consolas,monospace;background:var(--lav);color:var(--purple);
  border-radius:4px;padding:3px 6px}
.stepfx .rule .sw{width:13px;height:13px;border-radius:3px;flex:none}
.stepfx .rule.fire{border-color:#E8B9AC;background:#FDF5F2}

/* the version grid, step 4 */
.stepfx .grid12{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:1;min-height:0}
.stepfx .gtile{border:1px solid var(--line);border-radius:3px;background:#fff;padding:5px 6px;
  opacity:0;transform:scale(.9);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.stepfx .gtile.on{opacity:1;transform:none}
.stepfx .gtile b{display:block;font:700 7.5px/1.2 var(--font);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stepfx .gtile i{display:block;height:2.5px;border-radius:2px;background:var(--lav);margin-top:4px}
.stepfx .gtile i+i{width:64%;margin-top:3px}
.stepfx .count{font:700 clamp(20px,3vw,30px)/1 var(--font);letter-spacing:-1px;color:var(--purple);
  font-variant-numeric:tabular-nums}
.stepfx .countlbl{font:600 9.5px/1.3 var(--font);color:var(--dim);margin-top:2px}

/* the side rail that explains what just happened */
.stepfx .fx-side{width:150px;flex:none;display:flex;flex-direction:column;gap:7px}
@media (max-width:620px){ .stepfx .fx-side{width:auto;flex-direction:row;flex-wrap:wrap} }
.stepfx .note{border:1px solid var(--line);border-radius:7px;background:#fff;padding:8px 9px;
  font:500 10.5px/1.4 var(--font);color:var(--muted);opacity:.35;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.stepfx .note b{display:block;color:var(--text);font-weight:700;font-size:11px;margin-bottom:2px}
.stepfx .note.on{opacity:1;border-color:var(--purple)}

/* the cursor */
.stepfx .cur{position:absolute;left:0;top:0;width:15px;height:15px;z-index:9;pointer-events:none;
  transform:translate3d(-60px,-60px,0);transition:transform .75s var(--ease);
  filter:drop-shadow(0 2px 3px rgba(23,24,28,.3))}
.stepfx .cur .ho{position:absolute;left:-7px;top:-7px;width:28px;height:28px;border-radius:50%;
  background:var(--purple);opacity:0;transform:scale(.3)}
.stepfx .cur.tap .ho{animation:fxtap .45s var(--ease)}
@keyframes fxtap{0%{opacity:.3;transform:scale(.3)}100%{opacity:0;transform:scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  .stepfx *,.stepfx *::before,.stepfx *::after{animation:none!important;transition:none!important}
  .stepfx .cur{display:none}
  .stepfx .note{opacity:1}
  .stepfx .gtile,.stepfx .tbl .tr.rowin{opacity:1;transform:none}
}


/* The generation run, one per industry and use case. Everything is scoped
   under .indfx so nothing here can reach the rest of the page, which is the
   mistake the first animation made: seventeen class names collided with the
   site's own and the tabbed section grew to 1,322px wide on a phone.

   Four beats drive it, set by a data-beat attribute on .indfx from the
   script. CSS only reacts; it never decides. */

.indfx{margin:40px 0 0;padding:0}
.indfx .fx-win{position:relative;border-radius:14px;overflow:hidden;background:#F3F3F5;
  box-shadow:0 30px 70px rgba(60,63,80,.22),0 0 0 1px rgba(60,63,80,.08);
  font-family:"Segoe UI",system-ui,sans-serif;color:#3C3F50}
.indfx figcaption{margin-top:14px;font-size:13px;line-height:19px;color:var(--muted)}

/* window chrome, the same shape as the hero animation Adi picked */
.indfx .fx-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;background:#1F1F1F;color:#D6D6D6;font-size:11.5px}
.indfx .fx-dot{width:9px;height:9px;border-radius:50%}
.indfx .fx-dot.r{background:#FF5F57}.indfx .fx-dot.y{background:#FEBC2E}.indfx .fx-dot.g{background:#28C840}
.indfx .fx-file{margin-left:10px;font-weight:600;color:#fff}
.indfx .fx-saved{opacity:.6}
.indfx .fx-ribbon{display:flex;align-items:center;gap:14px;height:32px;padding:0 12px;background:#fff;border-bottom:1px solid #E3E3E7;font-size:11.5px}
.indfx .fx-tab{color:#5C6070}
.indfx .fx-tab.on{color:#5515AA;font-weight:700;border-bottom:2px solid #792EDE;height:32px;display:flex;align-items:center}
.indfx .fx-conn{margin-left:auto;display:flex;align-items:center;gap:6px;color:#5C6070}
.indfx .fx-conn i{width:7px;height:7px;border-radius:50%;background:#C6C9D6;transition:background .3s}
.indfx[data-beat="0"] .fx-conn i,.indfx[data-beat="1"] .fx-conn i,
.indfx[data-beat="2"] .fx-conn i,.indfx[data-beat="3"] .fx-conn i{background:#43E5C0}
.indfx[data-beat="0"] .fx-conn i{animation:fxpulse 1s ease-in-out infinite}

.indfx .fx-body{display:grid;grid-template-columns:44px minmax(0,1fr) 188px;gap:0;background:#EDEDF1}
.indfx .fx-rail{padding:10px 6px;display:grid;gap:7px;align-content:start;background:#F7F7F9;border-right:1px solid #E3E3E7}
.indfx .fx-thumb{display:block;height:20px;border-radius:2px;background:#fff;border:1px solid #DCDDE5}
.indfx .fx-thumb.on{border-color:#792EDE;box-shadow:0 0 0 1.5px rgba(121,46,222,.3)}

/* the slide */
.indfx .fx-slide{margin:14px;padding:16px 18px;background:#fff;border:1px solid #DCDDE5;border-radius:3px;min-width:0}
.indfx .fx-title{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.indfx .fx-title b{font-size:15px;font-weight:700;color:#3C3F50;line-height:1.2}
.indfx .fx-title span{font-size:10.5px;color:#727996;text-transform:uppercase;letter-spacing:.8px}
.indfx .fx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.indfx .fx-kpi{padding:9px 10px;border:1px solid #E7E7EC;border-radius:4px;min-width:0}
.indfx .fx-kpi-k{display:block;font-size:9px;color:#727996;text-transform:uppercase;letter-spacing:.6px;line-height:1.3}
.indfx .fx-kpi-v{display:block;margin-top:4px;font-size:16px;font-weight:700;color:#3C3F50;font-variant-numeric:tabular-nums}

/* a bound shape: grey placeholder until the bind beat, then the value */
.indfx .fx-bind{position:relative;transition:color .3s}
.indfx[data-beat="0"] .fx-bind{color:transparent}
.indfx[data-beat="0"] .fx-bind::after{content:"";position:absolute;left:0;top:14%;width:100%;height:70%;
  border-radius:3px;background:linear-gradient(90deg,#EDEDF1,#E2E2E8,#EDEDF1);background-size:200% 100%;
  animation:fxshim 1.1s linear infinite}
.indfx[data-beat="1"] .fx-kpi{animation:fxflash .5s var(--ease) both;animation-delay:calc(var(--d,0) * 1s)}
.indfx[data-beat="1"] .fx-kpi[data-n="0"]{--d:.05}
.indfx[data-beat="1"] .fx-kpi[data-n="1"]{--d:.2}
.indfx[data-beat="1"] .fx-kpi[data-n="2"]{--d:.35}

/* charts */
.indfx .fx-chart{margin-top:12px;height:74px}
.indfx .fx-bars{display:flex;align-items:flex-end;gap:7px;padding:0 2px}
.indfx .fx-bars i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:#B79BEA;transform-origin:bottom;
  transform:scaleY(.15);transition:transform .5s var(--ease),background .3s}
.indfx[data-beat="1"] .fx-bars i,.indfx[data-beat="2"] .fx-bars i,.indfx[data-beat="3"] .fx-bars i{transform:scaleY(1);transition-delay:calc(var(--i) * .06s)}
.indfx[data-beat="2"] .fx-bars i:nth-child(4),.indfx[data-beat="3"] .fx-bars i:nth-child(4){background:#FC7E20}
.indfx .fx-line{color:#792EDE}
.indfx .fx-line svg{width:100%;height:74px;display:block}
.indfx .fx-pl{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.1s var(--ease)}
.indfx[data-beat="1"] .fx-pl,.indfx[data-beat="2"] .fx-pl,.indfx[data-beat="3"] .fx-pl{stroke-dashoffset:0}
.indfx[data-beat="2"] .fx-line,.indfx[data-beat="3"] .fx-line{color:#C2410C}
.indfx .fx-traffic{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr 1fr;gap:6px}
.indfx .fx-traffic span{border-radius:3px;background:#E7E7EC;transition:background .35s var(--ease)}
.indfx[data-beat="1"] .fx-traffic span,.indfx[data-beat="2"] .fx-traffic span,.indfx[data-beat="3"] .fx-traffic span{
  background:#43E5C0;transition-delay:calc(var(--i) * .05s)}
.indfx[data-beat="2"] .fx-traffic span:nth-child(3),.indfx[data-beat="3"] .fx-traffic span:nth-child(3),
.indfx[data-beat="2"] .fx-traffic span:nth-child(8),.indfx[data-beat="3"] .fx-traffic span:nth-child(8){background:#FC7E20}
.indfx[data-beat="2"] .fx-traffic span:nth-child(11),.indfx[data-beat="3"] .fx-traffic span:nth-child(11){background:#E0483A}
.indfx .fx-none{display:grid;gap:7px;align-content:center}
.indfx .fx-none span{height:9px;border-radius:3px;background:#E7E7EC;width:0;transition:width .6s var(--ease)}
.indfx[data-beat="1"] .fx-none span,.indfx[data-beat="2"] .fx-none span,.indfx[data-beat="3"] .fx-none span{width:100%}
.indfx .fx-none span:nth-child(2){width:0}.indfx[data-beat="1"] .fx-none span:nth-child(2),
.indfx[data-beat="2"] .fx-none span:nth-child(2),.indfx[data-beat="3"] .fx-none span:nth-child(2){width:72%;transition-delay:.1s}
.indfx .fx-none span:nth-child(3){width:0}.indfx[data-beat="1"] .fx-none span:nth-child(3),
.indfx[data-beat="2"] .fx-none span:nth-child(3),.indfx[data-beat="3"] .fx-none span:nth-child(3){width:48%;transition-delay:.2s}

/* the rule line */
.indfx .fx-rule{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid #EDEDF1;
  font-size:10.5px;color:#727996;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.indfx[data-beat="2"] .fx-rule,.indfx[data-beat="3"] .fx-rule{opacity:1;transform:none}
.indfx .fx-rule-d{width:8px;height:8px;border-radius:2px;background:#FC7E20;flex:0 0 auto}

/* the record list and the run */
.indfx .fx-side{padding:14px 14px 14px 0;min-width:0}
.indfx .fx-side-h{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.8px;color:#727996;margin-bottom:8px}
.indfx .fx-recs{display:grid;gap:3px;margin:0;padding:0;list-style:none}
.indfx .fx-recs li{font-size:11px;line-height:1.5;padding:5px 8px;border-radius:4px;background:#fff;border:1px solid #E7E7EC;
  color:#5C6070;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s,color .25s,border-color .25s}
.indfx .fx-recs li.on{background:#F0E8FB;border-color:#B79BEA;color:#5515AA;font-weight:600}
.indfx .fx-recs li.done{color:#0F7A62;border-color:#BEEBDD;background:#EAFBF5}
.indfx .fx-run{margin-top:12px}
.indfx .fx-run-b{display:block;height:6px;border-radius:999px;background:#E2E2E8;overflow:hidden}
.indfx .fx-run-b i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#792EDE,#5515AA)}
.indfx .fx-run-t{display:block;margin-top:7px;font-size:10.5px;color:#727996;font-variant-numeric:tabular-nums}
.indfx .fx-run-t b{color:#5515AA}

/* the four beats along the bottom */
.indfx .fx-status{display:flex;align-items:center;gap:14px;padding:9px 12px;background:#fff;border-top:1px solid #E3E3E7}
.indfx .fx-beats{display:flex;gap:6px;margin:0;padding:0;list-style:none;flex-wrap:wrap;min-width:0}
.indfx .fx-beat{display:flex;align-items:center;gap:6px;padding:4px 9px 4px 4px;border-radius:999px;
  font-size:10.5px;color:#727996;background:#F3F3F5;transition:background .25s,color .25s}
.indfx .fx-b-n{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#E2E2E8;
  color:#5C6070;font-size:9px;font-weight:700}
.indfx .fx-beat.on{background:#F0E8FB;color:#5515AA}
.indfx .fx-beat.on .fx-b-n{background:#792EDE;color:#fff}
.indfx .fx-beat.was .fx-b-n{background:#43E5C0;color:#08493A}
.indfx .fx-ex{margin-left:auto;font-size:10px;color:#9AA0B4;white-space:nowrap}

@keyframes fxshim{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes fxflash{0%{box-shadow:0 0 0 0 rgba(121,46,222,.45)}100%{box-shadow:0 0 0 7px rgba(121,46,222,0)}}
@keyframes fxpulse{0%,100%{opacity:1}50%{opacity:.35}}

@media (max-width:900px){
  .indfx .fx-body{grid-template-columns:34px minmax(0,1fr)}
  .indfx .fx-side{display:none}
  .indfx .fx-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .indfx .fx-kpi:nth-child(3){display:none}
}
@media (max-width:560px){
  .indfx .fx-saved,.indfx .fx-tab:nth-child(2),.indfx .fx-tab:nth-child(3),.indfx .fx-tab:nth-child(4){display:none}
  .indfx .fx-beat span.fx-b-t{display:none}
  .indfx .fx-beat{padding:4px}
}
@media (prefers-reduced-motion:reduce){
  .indfx *{animation:none!important;transition:none!important}
}

/* --- Adi, 1 October ----------------------------------------------------
   NOTE 54. The beat numbers were sitting below their circles, not in them.
   .fx-b-n is a 16px grid circle around a 9px digit and never set its own
   line-height, so the digit inherited the 24px body line, became a 24px
   grid item inside a 16px track and hung out of the bottom. One property.

   NOTES 26, 55 and 56. The figure ran the whole width of the window. Inside
   a section.wrap it is held to the 1,189px measure like everything else;
   injected straight into <main> on the use case pages there was nothing to
   hold it, so it was 450px wider than its own heading. Same measure, same
   gutter, so it lines up with the text above and below it. */
.indfx .fx-b-n{line-height:1}
main > .indfx{max-width:var(--shell,1189px);margin-inline:auto;padding-inline:24px;box-sizing:border-box}