/* css/tokens.css */
/* Design tokens. In Webflow these become Variables; keep this file the single source. */
/* Manelink AI brand guidelines v2.3: website tokens. Single light theme by rule (Night never appears on the website). */
/* The palette, radii and type pairing are lifted from the Office itself
   (platform/_sidebar.css :root) so the site and the product read as one system. */
:root{
  /* colour, matched to the app */
  --navy:#02254f;        /* app --v2-head, headings */
  --btn:#2946b6;        /* buttons: the royal blue of the home hero fade */
  --btn-h:#1e39a3;
  --blue:#2946b6;        /* the site primary: royal blue (was the app blue #0176d3), same as --btn */
  --blue-d:#1e39a3;      /* app --pt */
  --ink:#040d1c;         /* app --ink */
  --mute:#46556b;        /* app --mute */
  --t4:#627187;          /* app --v2-t4, the quietest text */
  --sky:#eceffb;         /* app --pl. Accent tint only: icon chips and the SAMPLE badge.
                            Never a full-bleed section, the surfaces are white and --cloud. */
  --cloud:#fafafa;       /* app --bg, the secondary surface */
  --hover:#eaf0f8;       /* app --v2-hover */
  --line:#e4ecf5;        /* app --line */
  --rail:#d3dfec;        /* app --v2-rail */
  --white:#fff;
  --amber:#b45309;       /* app --amber */
  --green:#1c7f5d;       /* app --green */
  --green-t:#1c7f5d;
  --red:#b42318;         /* app --red */

  /* the Office puts a shadow on modals and popovers only. Cards are flat,
     separated by a 1px line, so --shadow is for things that genuinely float. */
  --shadow:0 18px 48px rgba(2,37,79,.14);

  /* app cards sit between 8 and 12px. Nothing in the product is a 20px pill. */
  --r:8px;
  --rb:6px;

  /* one family for text, UI and display, after Zip (Riforma, licensed; Geist is the free Google Fonts match) */
  --ui:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --web:var(--ui);       /* every existing var(--web) is UI text, so it resolves to Geist */
  --display:'Geist',system-ui,Arial,sans-serif;
}

/* css/base.css */
/* Reset, typography, layout container and buttons. Shared by every page. */
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.55 var(--web);-webkit-font-smoothing:antialiased}
a{color:var(--btn);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0;color:var(--navy);letter-spacing:-.02em;text-wrap:balance}
h1{font:500 clamp(38px,5vw,62px)/1.04 var(--display);letter-spacing:-.02em}
h2{font:500 clamp(30px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.02em}
h3{font:600 22px/1.25 var(--display);letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.lead{font-size:19px;line-height:1.55;color:var(--mute);max-width:60ch}
.eyebrow{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);font:600 13px var(--web);color:var(--navy)}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--rb);font:600 15px var(--web);white-space:nowrap;transition:transform .12s,background .12s,box-shadow .12s;border:1px solid transparent}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.p{background:var(--btn);color:#fff}.btn.p:hover{background:var(--btn-h)}
.btn.g{background:#fff;color:var(--navy);border-color:var(--line)}.btn.g:hover{background:var(--cloud)}
.btn.s{height:40px;padding:0 16px;font-size:14px}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--btn);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* read aloud, not shown */
/* skip link: the first Tab on every page offers a jump past the navigation; hidden
   above the bar until it has keyboard focus */
.skip{position:absolute;left:16px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--rb);
  background:var(--btn);color:#fff;font:600 14px var(--web);text-decoration:none;transition:top .15s ease}
.skip:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
/* forms: the bot trap is never shown; the status line answers after Send */
.hp{display:none}
.form-status{margin:12px 0 0;font:500 14px/1.45 var(--web)}
.form-status:empty{display:none}
.form-status.ok{color:#1f7a4d}
.form-status.err{color:#b42318}

/* css/sections.css */
/* Section styles in page order. Each banner is one Webflow insert: hand the section's
   markup as `html` and the rules under its banner as `css`. */
/* nav */
.nav{position:sticky;top:0;z-index:20;height:72px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;height:72px;max-width:1520px;padding:0 40px}   /* the bar runs wide, 40px from each edge, and stops at 1440px of content on big screens */   /* logo · menu · buttons */
.logo{display:block;flex:none;height:37px;width:153px;background:url(../assets/img/manelink-logo-ink.svg) no-repeat left center/contain}   /* the full logo (mark and name, from the brand folder's header lockup, 74x18), the name in the nav links' ink; sized so the name matches the old wordmark (115x23) */
.nav nav{display:flex;gap:24px;font:600 14.5px var(--web)}
.nav nav a{color:var(--ink)}.nav nav a:hover{color:var(--btn);text-decoration:none}
.nv-end{display:flex;align-items:center;justify-content:flex-end;gap:12px}
/* hero */
.hero{background:var(--white);padding:48px 0 0}
.hero .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.hero h1{max-width:19ch;font-size:clamp(36px,4.4vw,54px)}   /* a step under the site h1 so more of the product shows on first view */
.hero .lead{max-width:64ch;text-wrap:balance}   /* 54ch forced three lines at the width it actually renders */
.ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.note{font-size:13px;color:var(--mute)}
/* the product shot: a render of the Office Overview, not an image */
.shot{position:relative;width:100%;max-width:1180px;margin:24px auto -120px;border:1px solid var(--line);border-radius:var(--r);background:#fafafa;box-shadow:var(--shadow);overflow:hidden;text-align:left;font-size:13px;line-height:1.45}
/* the honesty marker has to stay a badge. --line went lighter with the app palette,
   so this takes the stronger rail colour and the tint to keep its edge. */
.shot .sample{position:absolute;top:12px;right:14px;z-index:2;font:600 11px var(--web);letter-spacing:.1em;color:var(--mute);border:1px solid var(--rail);background:var(--sky);border-radius:6px;padding:3px 9px}
.os .nv.on{background:#eaf0f8;color:#040d1c}.os .nv.on svg{color:var(--blue)}.os .top .sp{flex:1}
.os .top .b.p{background:var(--blue);border-color:var(--blue);color:#fff}.os .sec .hd{display:flex;align-items:baseline;gap:8px;margin:0 0 8px}.os .sec .hd h5{margin:0;font:600 13.5px var(--web);color:#02254f}.os .sec .hd small{font-size:12px;color:#46556b}.os .sec .hd a{margin-left:auto;font-size:12px}
.row .k{margin-left:auto;font-size:12px;color:#46556b}.row .go{color:var(--btn);font-size:12px}
/* proof strip */
.proof{padding:160px 0 64px}
/* How it works sits on a grey band: it breaks the long white run between the hero and the dark flow section */
.how-sec{background:var(--cloud);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pc{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:20px 22px;display:flex;align-items:center;gap:12px;font:600 15px var(--web);color:var(--navy)}
.pc .ico{width:20px;height:20px;flex:0 0 auto;display:block}
/* sections */
section.s{padding:96px 0}
.sh{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:760px;margin-bottom:40px}
.nb{white-space:nowrap}
.sh .lead{max-width:60ch}
.sh-flush{margin:0}
.sh-tight{margin-bottom:0}
.lead-center{text-align:center}
.sample-inline{position:static;margin-left:auto}
.shot-img{display:block;width:100%;height:auto}
.shot-sm{display:none}
.eyebrow-dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.band{background:var(--cloud)}
.band-sky{background:var(--cloud)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.step{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px 26px 22px;display:flex;flex-direction:column;gap:10px;min-height:100%}
.step .num{font:600 13px var(--ui);color:var(--btn);letter-spacing:.06em}
.step p{color:var(--mute)}
.step .mini{margin-top:auto;border:1px solid var(--line);border-radius:8px;background:#fafafa;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:#2f3d52}
.step .mini .r{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border:1px solid #e4ecf5;border-radius:6px;background:#fff}
.step .mini .r b{font-weight:600;color:#040d1c}.step .mini .r .tag{margin-left:auto;font-size:11px;color:#46556b}
.step .mini .r .on{margin-left:auto;font-size:11px;color:var(--green-t);display:inline-flex;align-items:center;gap:5px}.step .mini .r .on:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.step .mini .r .go{margin-left:auto;font-size:11.5px;color:var(--btn)}
.step .mini .rail{display:flex;align-items:center;gap:6px}.step .mini .rail i{width:26px;height:26px;border-radius:50%;background-color:#e9e2ff;background-size:cover;background-position:center;background-repeat:no-repeat;border:2px solid #fff;box-shadow:0 0 0 1px #e4ecf5}
.step .mini .rail i + i{margin-left:-8px}.step .mini .rail span{font-size:11.5px;color:#46556b;margin-left:6px}
/* numbers band */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.num-card{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:24px 26px;display:flex;flex-direction:column;gap:8px}
.num-card b{font:500 34px/1 var(--display);color:var(--navy);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num-card b small{font:500 15px var(--ui);color:var(--mute);letter-spacing:0;margin-left:8px}
.num-card span{font-size:15px;color:var(--ink)}.num-card em{font-style:normal;font-size:13px;color:var(--mute)}
/* pillars */
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.pillar{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:10px}
.pillar .ic{width:40px;height:40px;border-radius:8px;background:var(--sky);display:grid;place-items:center}.pillar .ic .ico{width:20px;height:20px;display:block}
.pillar p{color:var(--mute)}.pillar .ev{margin-top:auto;padding-top:10px;border-top:1px solid var(--line);font-size:13px;color:var(--ink)}
/* control band */
.control{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border:1px solid var(--line);border-radius:6px;background:#fff;font:600 13.5px var(--web);color:var(--navy)}
.chip .ico{width:14px;height:14px;display:block}
.queue{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.queue .hd{display:flex;align-items:center;gap:8px;font:600 13.5px var(--web);color:#02254f;padding:0 2px 4px}.queue .hd small{color:#46556b;font-weight:500}
.queue .q{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 10px;border:1px solid #e4ecf5;border-radius:6px;color:#040d1c}
.queue .q i{width:8px;height:8px;border-radius:50%;border:1.6px solid #f59e0b;flex:0 0 auto}.queue .q .k{margin-left:auto;font-size:11.5px;color:#46556b;white-space:nowrap}.queue .q .k b{color:var(--blue-d);font-weight:500;margin-left:8px}
.queue .foot{font-size:12px;color:#627187;padding:2px 2px 0}
/* pages grid */
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pg{border:1px solid var(--line);border-radius:6px;background:#fff;padding:16px 18px;display:flex;gap:12px;align-items:flex-start}
.pg .ico{width:18px;height:18px;flex:0 0 auto;margin-top:2px;display:block}
.pg b{display:block;font:700 15px var(--web);color:var(--navy)}.pg span{font-size:13.5px;color:var(--mute)}
/* agents */
.agents{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ag{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:18px;display:flex;align-items:center;gap:14px}a.ag{border-style:dashed;border-color:#b9cde4;background:#fbfdff;transition:border-color .12s,background .12s,transform .12s}a.ag:hover{border-color:var(--blue);background:var(--sky);transform:translateY(-1px);text-decoration:none}a.ag:focus-visible{outline:2px solid var(--blue);outline-offset:3px}a.ag .plus{width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--sky);border:1px dashed #b3bbdd;color:var(--blue);font:400 26px/1 var(--web)}a.ag:hover .plus{background:#fff;border-style:solid}a.ag b{color:var(--blue)}
.ag i{width:52px;height:52px;border-radius:50%;background-color:#eceffb;background-size:cover;background-position:center;background-repeat:no-repeat;border:3px solid #fff;box-shadow:0 0 0 1px var(--line);flex:0 0 auto}
.ag b{display:block;font:700 15px var(--web);color:var(--navy)}.ag span{font-size:13px;color:var(--mute)}
/* journey band, the one navy surface the guide allows */
.journey{background:var(--navy);color:#fff;padding:72px 0}
.journey h2,.journey h3{color:#fff}.journey .lead{color:#cfe0f5}
.stages{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(120px,1fr);gap:0;margin-top:40px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}.stages::-webkit-scrollbar{height:6px}.stages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:3px}
.stage{position:relative;scroll-snap-align:start;display:flex;flex-direction:column;gap:3px;padding:40px 16px 0 0}.stage::before{content:'';position:absolute;top:12px;left:0;right:0;height:2px;background:rgba(255,255,255,.18)}.stage:last-child::before{display:none}.stage::after{content:'';position:absolute;top:5px;left:0;width:12px;height:12px;border-radius:50%;box-sizing:border-box;background:var(--navy);border:2px solid rgba(255,255,255,.4)}
.stage small{font:700 10px var(--web);letter-spacing:.09em;color:#acb6dd}.stage b{font:600 13px/1.3 var(--display);color:#eaf2fd}.stage span{font-size:11.5px;color:#acb6dd;line-height:1.45}
.stage.cur::after{background:#fff;border-color:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.16)}.stage.cur b,.stage.cur small{color:#fff}
.journey .foot{margin-top:18px;font-size:13px;color:#acb6dd}
/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:12px}
.plan h3{font-size:20px}.plan .who{font:600 14px/1.45 var(--web);color:var(--mute);margin:-4px 0 2px;padding-bottom:12px;border-bottom:1px solid var(--line);min-height:53px}.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--ink);font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start}.plan li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:8px;flex:0 0 auto}
.plan .btn{margin-top:auto}
/* final */
/* the close lands on the third colour, reversed. It sits directly above the footer,
   which is the same navy, so a hairline keeps the two from reading as one slab. */
/* the close, after Stripe's "Ready to get started?": the ask on the left with two
   buttons, two next steps on the right. Light, so it reads apart from the footer. */
.final{background:var(--cloud);border-top:1px solid var(--line);padding:96px 0}
.final .wrap{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:48px;align-items:start}
.final h2{margin:0;color:var(--navy)}
.final .lead{margin:16px 0 28px;max-width:36ch;color:var(--mute)}
.final .ctas{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:0}
.final .btn.p:after{content:"";width:6px;height:6px;margin-left:2px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.fn-item{padding-top:6px}
.fn-ico{display:grid;place-items:center;width:40px;height:40px;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;box-shadow:0 1px 2px rgba(2,37,79,.05)}
.fn-ico img{width:20px;height:20px}
.fn-item h3{margin:0 0 8px;font:600 16px var(--web);color:var(--navy)}
.fn-item p{margin:0 0 14px;font:400 15px/1.55 var(--web);color:var(--mute)}
.fn-more{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--web);color:var(--btn)}
.fn-more:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.fn-more:hover{color:var(--blue-d);text-decoration:none}
/* footer: after Zip's. Four columns, each a heading over a rule with grey group
   labels; then a band with the wordmark, the line, and a signup (it opens an email,
   since sign-ups are not wired); then the legal row. Dark navy with a soft blue glow
   rising from the bottom, one shade darker than the closing section above. */
footer{position:relative;overflow:hidden;background:linear-gradient(180deg,#0f2270 0%,#152a84 45%,#1e39a3 100%);color:#b4c2ef;padding:80px 0 32px;font-size:14px}
footer:before{content:"";position:absolute;left:50%;bottom:-420px;width:1400px;height:760px;margin-left:-700px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(96,131,226,.45),rgba(74,104,210,.14) 55%,transparent)}   /* the royal blue of the home hero */
footer .wrap{position:relative}
.ft-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:48px}   /* Resources is wide: Learn and Get help side by side */   /* six short columns of three to six links, so none runs long */
.ft-col h3{margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);font:600 17px var(--display);color:#fff}
.ft-sub{display:flex;flex-direction:column;gap:24px}
.ft-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:767px){.ft-sub{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}}   /* phones: Office beside Platform, Desks beside Workspaces, as Learn and Help */
footer h4{margin:0 0 12px;font:400 13.5px var(--web);letter-spacing:0;text-transform:none;color:#a3b3e8}
footer a{display:block;width:max-content;max-width:100%;margin:0 0 10px;font:400 14.5px var(--web);color:#e6ebfb}
footer a:hover{color:#fff;text-decoration:none}
.ft-band{display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;margin-top:56px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.ft-logo{display:block;width:153px;height:37px;background:url(../assets/img/manelink-logo-white.svg) no-repeat left center/contain}   /* the full logo as in the nav over blue: the mark in colour, the name white */
.ft-tag{display:flex;flex-direction:column;gap:6px}
.ft-tag b{font:600 17px var(--display);color:#fff}
.ft-tag span{font:400 14px var(--web);color:#a3b3e8}
.ft-news{display:flex;flex-direction:column;gap:12px}
.ft-news b{font:600 15px var(--web);color:#fff}
footer .ft-sub-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;margin:0;border-radius:var(--rb);background:#fff;color:var(--btn);font:600 14.5px var(--web)}   /* white, so it shows on the blue */
footer .ft-sub-btn:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
footer .ft-sub-btn:hover{background:#eef2fd;color:var(--btn-h)}
footer .legal{border-top:0;padding-top:0;margin-top:40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#a3b3e8;font-size:13px}

/* seat avatars */
.av01{background-image:url(../assets/img/av01.png)}
.av02{background-image:url(../assets/img/av02.png)}
.av03{background-image:url(../assets/img/av03.png)}
.av05{background-image:url(../assets/img/av05.png)}
.av09{background-image:url(../assets/img/av09.png)}
.av10{background-image:url(../assets/img/av10.png)}
.av12{background-image:url(../assets/img/av12.png)}
.av14{background-image:url(../assets/img/av14.png)}

/* ---- closing section with a demo form (product page: .final.fn-demo) ----------
   The pitch and the two link blocks on the left, the form on the right. */
.final.fn-demo .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.fn-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;margin-top:48px}
.fn-form{box-shadow:0 20px 48px -28px rgba(2,37,79,.28)}
.fn-form h3{margin:0;font:700 22px/1.25 var(--display);color:var(--navy)}
.fn-fsub{margin:6px 0 22px;font:400 15px/1.5 var(--web);color:var(--mute)}
.fn-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 14px}
.fn-form input[type=submit]{width:100%;height:48px;border:0;border-radius:var(--rb);background:var(--btn);color:#fff;font:600 15px var(--web);cursor:pointer;-webkit-appearance:none;appearance:none}
.fn-form input[type=submit]:hover{background:var(--btn-h)}
.fn-form input[type=submit]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (max-width:991px){
  .final.fn-demo .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:479px){
  .fn-links,.fn-two{grid-template-columns:minmax(0,1fr)}
  .fn-links{gap:24px;margin-top:32px}
}

/* ---- a quiet row of guarantees (product page, Control): no pill borders, a small
   check and the words, one line on desktop, a 2 x 2 grid from 991 down, one column on phones ---- */
.chips-plain{gap:12px 36px}
.chips-plain .chip{height:auto;padding:0;border:0;background:none;font:500 15px var(--web);color:var(--navy)}
.chips-plain .chip .ico{width:16px;height:16px}
@media (max-width:991px){
  .chips-plain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
  .chips-plain .chip{align-items:flex-start;line-height:1.35}
  .chips-plain .chip .ico{margin-top:2px;flex:0 0 auto}
}
@media (max-width:479px){ .chips-plain{grid-template-columns:minmax(0,1fr)} }
/* longer items (pricing, "The same engine underneath"): a 2 x 2 grid at every width
   above phones, so four items never wrap 3 + 1 */
.chips-plain.chips-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;max-width:820px}
@media (max-width:479px){ .chips-plain.chips-grid{grid-template-columns:minmax(0,1fr)} }

/* footer: the Connected block (social links and the team address, as manelink.com) and
   the legal row with the policy links */
.ft-connect{display:flex;flex-direction:column;gap:8px}
.ft-connect>b{font:600 17px var(--display);color:#fff}
.ft-connect>span{font:400 14px var(--web);color:#a3b3e8}
.ft-soc{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px}
footer .ft-ic{display:block;width:44px;height:44px;margin:0;border-radius:50%;background:rgba(255,255,255,.1) no-repeat center/20px 20px;transition:background-color .15s ease}
footer .ft-ic:hover{background-color:rgba(255,255,255,.2)}
footer .ft-li{background-image:url(../assets/icons/soc-linkedin.svg)} footer .ft-ig{background-image:url(../assets/icons/soc-instagram.svg)} footer .ft-x{background-image:url(../assets/icons/soc-x.svg)}
footer .ft-mail{display:inline-flex;align-items:center;height:44px;margin:0;padding:0 20px;border-radius:8px;background:rgba(255,255,255,.1);font:500 14.5px var(--web);color:#fff}
footer .ft-mail:hover{background:rgba(255,255,255,.2)}
.ft-copy{display:flex;flex-direction:column;gap:4px}
.ft-pol{display:flex;flex-wrap:wrap;gap:8px 24px}
footer .ft-pol a{margin:0;font-size:13px;color:#a3b3e8;text-decoration:none}
footer .ft-pol a:hover{color:#fff}

/* the legal row's right side: the social icons, then the policy links, on one line */
.ft-end{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.legal .ft-soc{margin:0;gap:8px}
footer .legal .ft-ic{width:34px;height:34px;background-size:16px 16px}

/* bottom of the footer as one 2 x 2 grid: logo | newsletter on the first line, copyright |
   social and policy links on the second. The newsletter runs inline (label beside its
   button), so the first line is only a button tall and the copyright sits just under the
   logo as one brand block. */
footer .ft-band{grid-template-columns:1fr auto;grid-template-rows:auto auto;align-items:center;gap:18px 48px;margin-top:56px;padding-top:40px}
footer .ft-news{flex-direction:row;align-items:center;gap:20px}
footer .ft-copy{display:block;color:#a3b3e8;font-size:13px}
footer .ft-band .ft-end{justify-self:end}
footer .ft-band .ft-news{justify-self:end}
footer .ft-band .ft-soc{margin:0;gap:6px}
footer .ft-band .ft-ic{width:28px;height:28px;background-size:13px 13px}
footer .ft-soc-col{margin-top:16px;gap:6px}
footer .ft-soc-col .ft-ic{width:26px;height:26px;background-size:12px 12px}   /* the social icons under the Company links */

/* css/pages.css */
/* Styles used by the inner pages (office, pricing, company, contact) and the
   shared chrome that every page carries. Loaded after sections.css. */

/* ---- current page in the nav ------------------------------------------- */
/* the nav markup is identical on every page, so the body class marks the spot */
.nav nav a{color:var(--ink)}   /* the links read as firmly as the rest of the page; grey is for hover */
.nav nav a:hover{color:var(--navy);text-decoration:none}
.p-office .nv-office,.p-pricing .nv-pricing,.p-company .nv-company,.p-research .nv-res,.p-roi .nv-res,.p-services .nv-res,.p-wiki .nv-res,.p-gloss .nv-res,.p-ready .nv-res,.p-sales .nv-sol,.p-marketing .nv-sol,.p-operations .nv-sol,.p-finance .nv-sol,.p-commerce .nv-sol{color:var(--navy);
  background-image:none}   /* the current page is marked by its darker colour only: no underline */

/* ---- menu for narrow screens ------------------------------------------- */
/* a native <details>, so it opens with JavaScript off. Webflow's own Navbar
   component replaces this on transfer. */
/* Nav dropdown (Resources), after Stripe's nav menus: a panel under
   the bar with an icon, a title and one line per link. A mouse opens it on hover
   (only where hover exists, so a tap on a tablet does not stick); a click or tap
   toggles .open from the script in partials/nav.html; Escape and a click elsewhere
   close it. Closing waits a beat so a diagonal move to the panel does not drop it.
   In Webflow this is the native Dropdown. Hidden at 991 with the bar links. */
.nav .wrap{position:relative}
/* top-level items: a soft pill on hover, a blue underline on the current section */
.nav nav{gap:16px}   /* each link carries 12px of its own padding, so this reads as 40px between the words */
.nav nav>a,.nav nav .nd-t{padding:8px 12px;border-radius:6px;transition:background-color .15s ease,color .15s ease}
.nav nav>a:hover,.nav nav .nd-t:hover,.nav nav .nd.open .nd-t{background-color:var(--hover);color:var(--navy)}
/* scrolled: shorter, with a shadow (class set by the script in partials/nav.html) */
.nav,.nav .wrap{transition:height .2s ease,box-shadow .2s ease}
.nav.scrolled{height:60px;box-shadow:0 6px 20px -8px rgba(2,37,79,.18)}
.nav.scrolled .wrap{height:60px}
.nav nav{align-self:stretch;align-items:center}
.nd{position:relative;display:flex;align-items:center;height:100%}
.nav nav .nd-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nd-t:after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s ease}
.nd-panel{position:absolute;top:100%;display:grid;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);
  box-shadow:0 30px 60px -20px rgba(2,37,79,.25);overflow:hidden;
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s ease .12s,transform .15s ease .12s,visibility 0s linear .27s}
/* Product: after Notion's product menu. A heading row, three cards, each with a small
   live piece of the Office, and a footer strip. Wider than Resources, so it
   centres on the bar instead of under its trigger. */
.nav .nd-prod{position:static}
.nd-p0{left:50%;width:880px;margin-left:-440px;display:block}
.nd-ph{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 12px}
.nd-ph>span{font:500 14px var(--web);color:var(--t4)}
.nav nav .nd-arrow{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--web);color:var(--btn)}
.nav nav .nd-arrow:after{content:"→"}
.nav nav .nd-arrow:hover{color:var(--blue-d);text-decoration:none}
.nd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px 20px}
.nav nav .nd-card{display:flex;flex-direction:column;padding:14px 14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--cloud);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.nav nav .nd-card:hover{text-decoration:none;background:#fff;border-color:var(--rail);box-shadow:0 10px 24px rgba(2,37,79,.08)}
.nd-card b{padding:0 4px;font:700 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--navy)}
.nd-card>span:last-child{margin-top:4px;padding:0 4px;font:400 14px/1.45 var(--web);color:var(--mute)}

/* the card visuals: small live pieces of the Office, drawn like its product views */
.nd-vis{display:grid;place-items:center;height:132px;margin-bottom:14px;border-radius:6px;background:#fff;border:1px solid var(--line);
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:14px 14px}
.nd-mini{display:flex;flex-direction:column;gap:6px;width:82%;padding:12px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(2,37,79,.1);text-align:left}
.nd-mini small{font:600 10px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.nd-card .nd-mini b{padding:0;font:600 12.5px/1.35 var(--web);color:var(--navy)}
.nd-acts{display:flex;gap:6px;margin-top:2px}
.nd-acts em{padding:4px 10px;border-radius:5px;border:1px solid var(--line);font:600 11px var(--web);font-style:normal;color:var(--navy);background:#fff}
.nd-acts .nd-yes{background:var(--blue);border-color:var(--blue);color:#fff}
.nd-org{display:flex;flex-direction:column;align-items:center}
.nd-you{padding:3px 10px;border-radius:5px;background:var(--navy);color:#fff;font:600 11px var(--web);font-style:normal}
.nd-stem{width:1px;height:12px;background:var(--rail)}
.nd-seats{position:relative;display:flex;gap:8px;padding-top:12px}
.nd-seats:before{content:"";position:absolute;top:0;left:32px;right:32px;height:1px;background:var(--rail)}
.nd-seats>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:8px 4px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(2,37,79,.08);font:600 10.5px var(--web);color:var(--navy)}
.nd-seats>span:before{content:"";position:absolute;top:-13px;left:50%;width:1px;height:12px;background:var(--rail)}
.nd-seats i{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center}
.nd-seats .nd-add{border-style:dashed;box-shadow:none;color:var(--blue)}
.nd-add i{display:grid;place-items:center;background:var(--sky)}
.nd-add i:before{content:"+";font:600 16px/1 var(--web);color:var(--blue)}
.nd-gates{gap:8px}
.nd-gates>span{display:grid;grid-template-columns:58px 1fr 56px;align-items:center;gap:8px}
.nd-gates em{font:500 11px var(--web);font-style:normal;color:var(--mute)}
.nd-gates strong{font:600 11px var(--web);color:var(--navy);text-align:right}
.nd-bar{position:relative;height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.nd-bar:after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.nd-b1:after{width:95%}
.nd-b2:after{width:70%}
.nd-b3:after{width:50%;background:var(--green)}
/* Improve: cost per finished item falling under the median as a seat learns
   (art/nd-cost.svg: a smooth curve, soft fill, dashed median at 50% height). No
   axis numbers, so nothing is invented; the bonus is the product's own rule. */
.nd-cost{gap:8px}
.nd-chart{position:relative;display:block;height:58px}
.nd-chart img{display:block;width:100%;height:100%}
.nd-med{position:absolute;right:0;top:calc(50% - 16px);font:500 10px var(--web);font-style:normal;color:var(--t4)}
.nd-bonus{position:absolute;right:0;bottom:-2px;padding:2px 7px;border-radius:5px;background:#e7f6ee;font:600 10.5px var(--web);font-style:normal;color:var(--green);
  box-shadow:0 2px 6px rgba(2,37,79,.08)}
.nd-pf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--line);background:var(--cloud);font:500 14px var(--web);color:var(--ink)}
.nd-pf span{display:inline-flex;align-items:center;gap:8px}
.nd-pf img{width:18px;height:18px}
/* Solutions: the Product panel's shape, one card per desk, each with a small piece of that
   desk's Office (from its own page), and a footer strip. Centres on the bar like Product. */
.nav .nd-sol{position:static}
.nd-p1{left:50%;width:880px;margin-left:-440px;display:block}
.nd-ln{display:block;height:6px;border-radius:3px;background:var(--hover)}
.nd-l90{width:90%}.nd-l75{width:75%}.nd-l60{width:60%}
.nd-chip{align-self:flex-start;margin-top:2px;padding:3px 8px;border-radius:5px;background:var(--sky);font:600 10.5px var(--web);font-style:normal;color:var(--blue)}
.nd-chip.nd-ok{background:#e7f6ee;color:var(--green)}
.nd-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.nd-tiles i{display:block;aspect-ratio:1/1;border-radius:4px}
.nd-t1{background:linear-gradient(150deg,#dfe7fc,#b9c9f6)}
.nd-t2{background:linear-gradient(150deg,#fde3ec,#f6bfd2)}
.nd-t3{background:linear-gradient(150deg,#dcf4ea,#b2e4cf)}
.nd-t4{background:linear-gradient(150deg,#fdf0da,#f6d7a4)}
.nd-ops{gap:9px}
.nd-ops>span{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:8px}
.nd-dot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.nd-dot.nd-wait{background:var(--blue)}
.nd-ops em{font:500 11px var(--web);font-style:normal;color:var(--mute)}
.nd-ops strong{font:600 11px var(--web);color:var(--navy)}
.nd-ops .nd-need{color:var(--blue)}
/* Solutions as a list beside one picture: the desks on the left, the hovered desk's
   Office picture on the right. A new desk adds a row, not a column. */
.nd-p1{width:640px;margin-left:-320px}
.nd-split{display:grid;grid-template-columns:220px 1fr;gap:16px;padding:0 20px 20px}
.nd-desks{display:flex;flex-direction:column;gap:2px}
.nav nav .nd-desk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;font:500 15px/1.3 var(--web);color:var(--navy)}
.nav nav .nd-desk:hover,.nav nav .nd-desk.on{background:var(--hover);color:var(--btn);text-decoration:none}
.nd-desk i{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:6px;background:var(--sky)}
.nd-desk img{display:block;width:16px;height:16px}
.nd-prev{position:relative;min-height:210px}
.nd-prev .nd-pv{position:absolute;inset:0;height:auto;margin:0;opacity:0;visibility:hidden;transition:opacity .15s ease}
.nd-prev .nd-pv.on{opacity:1;visibility:inherit}   /* inherit, not visible: a visible child of the closed panel would catch the hover and open the menu */
.nd-p1 .nd-mini{width:74%}
/* Finance: the month's total, then the three biggest lines as bars to scale (Rent = full),
   from the Finance page's own figures. No amounts: the total gives the scale. */
.nd-p1 .nd-spend{gap:5px}
.nd-sp{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;line-height:13px}
.nd-sp em{font:500 10.5px var(--web);font-style:normal;color:var(--mute)}
.nd-sp i{display:block;height:6px;border-radius:3px;background:var(--blue)}
.nd-w100{width:100%}.nd-w37{width:37%}.nd-w23{width:23%}
/* Commerce: the page's own price check, one matching item against a competitor */
.nd-pr{display:flex;justify-content:space-between;align-items:center;font:500 11px/14px var(--web)}
.nd-pr em{font-style:normal;color:var(--mute)}
.nd-pr strong{font-weight:600;color:var(--navy)}
.nd-chip.nd-down{background:#fdf0da;color:#8f4c00}
.nd-p2{left:50%;width:720px;margin-left:-360px;grid-template-columns:1fr 1fr 1fr}
.nd.open .nd-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
.nd.open .nd-t:after{transform:rotate(225deg);margin-top:3px}
.nav nav .nd.open .nd-t{color:var(--navy)}
@media (hover:hover){
  .nd:hover .nd-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
  .nd:hover .nd-t:after{transform:rotate(225deg);margin-top:3px}
  .nav nav .nd:hover .nd-t{color:var(--navy);background-color:var(--hover)}
}
.nd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:20px}
.nd-col{display:flex;flex-direction:column;gap:4px;padding:24px 16px 28px;border-left:1px solid var(--line)}
.nd-col:first-child{border-left:0}
.nd-col.nd-tint{background:var(--cloud)}
.nd-col h4{margin:0 0 8px;padding:0 10px;font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.nav nav .nd-item{display:flex;align-items:flex-start;padding:10px;border-radius:6px;color:var(--ink)}
.nav nav .nd-item:hover{background:var(--hover);text-decoration:none}
.nav nav .nd-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.nd-item span{display:flex;flex-direction:column;gap:2px}
.nd-item b{font:600 14.5px/1.3 var(--web);color:var(--btn)}
.nd-item small{font:400 13px/1.4 var(--web);color:var(--mute)}
.nav nav .nd-item:hover b{color:var(--blue-d)}
.nd-item[aria-current="page"]{background:var(--cloud)}
.nd-item[aria-current="page"] b{color:var(--navy)}
/* the two bar buttons, after Stripe's: Sign in outlined, Contact sales filled with a
   chevron. Same height, same 6px corners, 12px apart. */
/* Sign in is a plain link, so "Talk to us" is the only button in the bar */
.nav .nv-login{display:inline-flex;align-items:center;height:36px;padding:0 4px;font:600 15px var(--web);color:var(--ink);white-space:nowrap}
.nav .nv-login:hover{color:var(--btn);text-decoration:none}
.nav .nv-cta{padding:0 18px;font-size:15px;background:var(--btn);color:#fff}   /* the nav's Talk to us: royal blue */
.nav .nv-cta:hover{background:var(--btn-h)}
.menu{display:none;position:relative}
.menu>summary{list-style:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;display:grid;place-items:center;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
/* the menu button: three lines, an X once the menu is open */
.menu>summary::before,.menu>summary::after{content:"";grid-area:1/1;width:16px;height:2px;background:var(--navy)}
.menu>summary::after{box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy)}
.menu>summary::before{display:none}
.menu[open]>summary{border-color:transparent}
.menu[open]>summary::before{display:block;width:20px;transform:rotate(45deg)}
.menu[open]>summary::after{width:20px;box-shadow:none;transform:rotate(-45deg)}
.menu>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* the phone and tablet menu, after zip.com's: a white sheet under the bar, big rows
   with hairlines, Product and Resources opening in place, Talk to us across the foot.
   Plain <details>, so it works with JS off; the bar shows Sign in and the X meanwhile. */
.menu-panel{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:30;display:flex;flex-direction:column;overflow-y:auto;
  padding:0 24px 24px;background:#fff}
.nav.scrolled .menu-panel{top:60px}
.mp-g>summary,.mp-l{display:flex;align-items:center;justify-content:space-between;padding:22px 0;border-bottom:1px solid var(--line);
  list-style:none;cursor:pointer;font:500 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.mp-g>summary::-webkit-details-marker{display:none}
.mp-g>summary::after{content:"";width:10px;height:10px;margin:0 6px 0 0;border:solid var(--ink);border-width:0 2px 2px 0;transform:translateY(-3px) rotate(45deg);transition:transform .15s ease}
.mp-g[open]>summary::after{transform:translateY(3px) rotate(-135deg)}
.mp-g[open]>summary{border-bottom-color:transparent}
.mp-sub{display:flex;flex-direction:column;padding:0 0 14px;border-bottom:1px solid var(--line)}
.mp-sub a{padding:11px 0;font:500 17px var(--web);color:var(--mute);text-decoration:none}
.mp-sub a:hover,.mp-l:hover{color:var(--btn);text-decoration:none}
.menu-panel a[aria-current="page"]{color:var(--btn)}
.nav .menu-panel .mp-cta{display:flex;flex:none;margin-top:auto;width:100%;height:54px;font-size:17px}   /* shown even where the bar hides its own buttons */
.menu-panel>.mp-l:nth-last-child(2){margin-bottom:32px}   /* the last row keeps clear of Talk to us when the menu fills the screen */

/* ---- page hero --------------------------------------------------------- */
/* quieter than the home hero: no product shot, tighter vertical rhythm */
.phero{background:var(--white);border-bottom:1px solid var(--line);padding:64px 0 56px}
.phero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.phero h1{font:500 clamp(34px,4.2vw,52px)/1.06 var(--display);letter-spacing:-.02em}
.phero .lead{max-width:62ch}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* a page hero followed by its product shot: no rule between them (the shot reads as part of the hero) */
.phero.phero-shot{border-bottom:0;padding-bottom:0}
section.shot-sec{padding-top:40px}
.phero.phero-shot+.tour{padding-top:40px}   /* pricing: the plan tour is the hero picture */

/* ---- group heading inside a section ------------------------------------ */
.grp{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.grp h3{font:600 20px/1.25 var(--display)}
.grp span{font-size:14px;color:var(--mute)}
.grp+.pages{margin-bottom:32px}

/* ---- "in every plan" list ---------------------------------------------- */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.incl div{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;background:#fff;padding:16px 18px;font-size:15px;color:var(--ink)}
.incl .ico{width:18px;height:18px;flex:0 0 auto;margin-top:2px}

/* ---- principle cards (company) ----------------------------------------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.val{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:10px}
.val h3{font:600 19px/1.3 var(--display)}
.val p{color:var(--mute)}
.vals.vals-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- workspace kinds (pricing: the unit you are billed per) ------------- */
.kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.kind{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:8px}
.kind .tag{font:700 12px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--btn)}
.kind h3{font:600 19px/1.3 var(--display)}
.kind p{color:var(--mute)}

/* ---- questions --------------------------------------------------------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fq{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px}
.fq h3{font:600 16px/1.35 var(--display);margin:0 0 6px}
.fq p{font-size:15px;line-height:1.55;color:var(--mute)}

/* ---- two columns ------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}

/* ---- contact form ------------------------------------------------------ */
/* markup mirrors a Webflow form, so the transfer is a like for like swap */
.form{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px}
.form label{display:block;font:700 13px var(--web);color:var(--navy);margin:0 0 6px}
.form .fld{margin:0 0 16px}
.form input,.form select,.form textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;font:400 15px var(--web);color:var(--ink)}
.form textarea{height:110px;padding:12px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form .btn{width:100%}
.form .note{margin-top:12px;font-size:13px;color:var(--mute)}

/* ---- contact routes ---------------------------------------------------- */
.routes{display:flex;flex-direction:column;gap:12px}
.route{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.route b{font:600 16px var(--display);color:var(--navy)}
.route span{font-size:14px;color:var(--mute)}
.route a{font:700 14px var(--web);margin-top:4px}

/* a control that is deliberately not live yet, rather than silently broken */
.btn.off{background:var(--cloud);color:var(--mute);border-color:var(--line);cursor:not-allowed}
.btn.off:hover{transform:none;background:var(--cloud)}

/* ---- running text ------------------------------------------------------ */
.prose{max-width:64ch;display:flex;flex-direction:column;gap:18px}
.prose p{font-size:18px;line-height:1.62;color:var(--mute)}
.prose p.pull{font:600 20px/1.5 var(--display);color:var(--navy)}

/* ---- unwritten copy ---------------------------------------------------- */
/* deliberately loud. Every one of these must be gone before the site is public. */
.todo{border:1px dashed var(--amber);border-radius:6px;background:#fffbf2;padding:16px 18px;color:#7a4a00;font-size:14px}
.todo b{display:block;font:600 12px var(--web);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}

/* ---- written but not approved ------------------------------------------ */
/* quieter than .todo because there IS copy here, but it is a draft and has not
   been through Wafi. Same rule: none of these markers ship. */
.draft{border-left:3px solid var(--blue);background:var(--sky);padding:14px 18px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.5;color:var(--navy);max-width:64ch}
.draft b{display:block;font:600 12px var(--web);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}

/* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */
@media (max-width:991px){
  .menu{display:block}
  html:has(.nav .menu[open]){overflow:hidden}
  .nav:has(.menu[open]){background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}   /* the blur would trap the fixed sheet inside the bar */
  .nav:has(.menu[open]) .nv-cta{display:none}
  .nav .nv-end:has(.menu[open]) .nv-login{display:inline-flex;height:36px;padding:0 16px;border-radius:var(--rb);background:var(--btn);color:#fff}
  .js .bluetop .nav:has(.menu[open]){background:#fff;border-bottom-color:var(--line)}
  .js .bluetop .nav:has(.menu[open]) .logo{background-image:url(../assets/img/manelink-logo-ink.svg)}
  .js .bluetop .nav:has(.menu[open]) .nv-login{color:#fff}
  .js .bluetop .nav:has(.menu[open]) .menu>summary{background:#fff}
  .js .bluetop .nav:has(.menu[open]) .menu>summary::before,.js .bluetop .nav:has(.menu[open]) .menu>summary::after{background:var(--navy);box-shadow:none}   /* the blue bar's white bars would cut the X */
  .incl,.vals{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr;gap:28px}
}
@media (max-width:767px){
  .incl,.vals,.kinds,.faq,.vals.vals-2{grid-template-columns:1fr}
  .nav .nv-login{display:none}   /* it is in the menu panel */
  .phero{padding:44px 0 40px}
  .grp+.pages{margin-bottom:24px}
}
@media (max-width:479px){
  /* logo plus a button plus the burger will not fit 320px, and the burger is the
     only route to the other pages, so the header buttons give way. Both live in
     the menu panel, and every page still ends on a full-width call to action. */
  .nav .btn,.nav .nv-login{display:none}
}

/* a plain dark navy section, the footer's colour, for a section that should stand
   apart (company: "Who is behind it") */
.s-navy{background:#011a3b;color:#fff}
.s-navy h2{color:#fff}
.s-navy .prose p{color:#cfe0f5}
.s-navy .prose a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* company, "Why we built it": the story on the left, the business journey on the
   right as a vertical roadmap (one dot and a rule per stage; stage 1 is where every
   workspace starts). Stacks under the story below 991. */
.co-why{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:72px;align-items:start}
.co-road{border:1px solid var(--line);border-radius:8px;background:#fff;padding:28px 28px 24px;box-shadow:0 18px 40px -28px rgba(2,37,79,.22)}
.co-road-h{margin:0 0 22px;display:flex;flex-direction:column;gap:4px}
.co-road-h b{font:600 17px var(--display);color:var(--navy)}
.co-road-h span{font-size:13.5px;color:var(--mute)}
.co-stages{list-style:none;margin:0;padding:0}
.co-st{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 18px 32px}
/* the rule carries a blue fill (height 0 at rest) that the ROADMAP block in motion.css grows */
.co-st:before{content:"";position:absolute;left:6px;top:18px;bottom:-2px;width:2px;background:linear-gradient(var(--blue),var(--blue)) no-repeat center top/2px 0,var(--line)}
.co-st:last-child{padding-bottom:0}
.co-st:last-child:before{display:none}
.co-st:after{content:"";position:absolute;z-index:1;left:0;top:3px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid #cdd7e3;background:#fff}
.co-st small{font:600 11px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.co-st b{font:600 15px/1.3 var(--display);color:var(--navy)}
.co-st span{font-size:13px;line-height:1.45;color:var(--mute)}
.co-on:after{border-color:#4cc38a;background:#4cc38a;box-shadow:0 0 0 4px rgba(76,195,138,.2)}   /* the current stage is green, as the home journey card */
.co-on small{color:var(--btn)}
.co-road-f{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--t4)}
@media (max-width:991px){ .co-why{grid-template-columns:minmax(0,1fr);gap:48px} .co-road{max-width:520px} }
@media (max-width:479px){ .co-road{padding:22px 20px 20px} }

/* company in the services page's style (css/services.css): the pieces that page
   does not already carry */
.co-h1{margin:0;font:500 40px/1.18 var(--display);letter-spacing:-.02em;color:var(--navy);max-width:640px}
@media (max-width:991px){ .co-h1{font-size:34px} }
@media (max-width:479px){ .co-h1{font-size:28px} }
.phero.cg-hero{border-bottom:0}
.co-ctas{align-items:center;gap:24px;margin-top:8px}
.co-why .prose,.sv-light .prose{margin-top:32px}
.co-holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.gl-sec.sv .sv-in{margin-bottom:48px}
.sv .gl,.sv .gl-foot{position:relative;z-index:1}
/* the roadmap card as a services card */
.sv .co-road{border:0;box-shadow:0 30px 60px -12px rgba(2,37,79,.25),0 18px 36px -18px rgba(0,0,0,.3)}
/* the navy section keeps light type over the services type */
.sv.s-navy{background:#011a3b}
.sv.s-navy h2{color:#fff}
.sv.s-navy .sv-eye{color:#acb6dd}
@media (max-width:991px){ .co-holds{grid-template-columns:minmax(0,1fr);gap:32px} }

/* ==========================================================================
   BLUE TOP (body.bluetop: index, pricing), after Zip's hero. The nav sits on the royal
   blue (transparent, white links and logo) until the page scrolls, then returns to the
   usual white bar. JS only (.js): with it off the bar never learns it scrolled, so it
   stays white. Each page paints its own blue fade under it.
   ========================================================================== */
.bluetop .nav{margin-bottom:-72px}   /* the hero runs up under the sticky bar */
.bluetop .nav.scrolled{margin-bottom:-60px}   /* the bar takes no room in either state, so nothing jumps */
.js .bluetop .nav:not(.scrolled){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.js .bluetop .nav:not(.scrolled) .logo{background-image:url(../assets/img/manelink-logo-white.svg)}   /* one lockup everywhere, the full logo: its name white over the blue, ink on the white bar; only the colour changes on scroll */
.js .bluetop .nav:not(.scrolled) nav>a,.js .bluetop .nav:not(.scrolled) nav .nd-t{color:#fff}
.js .bluetop .nav:not(.scrolled) nav>a:hover,.js .bluetop .nav:not(.scrolled) nav .nd-t:hover,.js .bluetop .nav:not(.scrolled) nav .nd.open .nd-t,.js .bluetop .nav:not(.scrolled) nav .nd:hover .nd-t{background-color:rgba(255,255,255,.12);color:#fff}
.js .bluetop .nav:not(.scrolled) .nv-login{color:#fff}
.js .bluetop .nav:not(.scrolled) .nv-login:hover{color:#dbe3fb}
.js .bluetop .nav:not(.scrolled) .nv-cta{background:#fff;color:var(--btn)}
.js .bluetop .nav:not(.scrolled) .nv-cta:hover{background:#eef2fd}
.js .bluetop .nav:not(.scrolled) .menu>summary{background:transparent;border-color:rgba(255,255,255,.55)}
.js .bluetop .nav:not(.scrolled) .menu>summary::after{background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}

.js .p-pricing.bluetop .nav:not(.scrolled) .nv-pricing,.js .p-office.bluetop .nav:not(.scrolled) .nv-office{background-image:none}   /* no current-page underline on the blue either (was white on the blue */

/* pricing: one fade behind the headline and the request dashboard (.bt-fade wraps both) */
.bt-fade{background:radial-gradient(90% 40% at 0 0,rgba(8,18,70,.55),transparent 70%),
    radial-gradient(70% 35% at 100% 20%,rgba(96,131,226,.35),transparent 70%),
    linear-gradient(180deg,#152a84 0%,#1e39a3 18%,#2946b6 34%,#4a68d2 50%,#89a3ec 66%,#c4d2f7 80%,#eef2fd 91%,#fff 100%)}
.bt-fade .phero{background:transparent;padding-top:136px}
.bt-fade .phero h1{color:#fff}
.bt-fade .phero .lead{color:rgba(255,255,255,.86)}
.bt-fade .phero .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.bt-fade .phero .btn.p{background:#fff;color:var(--btn)}
.bt-fade .phero .btn.p:hover{background:#eef2fd}
.bt-fade .phero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.bt-fade .phero .btn.g:hover{background:rgba(255,255,255,.12)}
.bt-fade .phero .btn:focus-visible{outline-color:#fff}
/* header row as on the home page (hero.css .hh): a one-line headline in a lighter
   weight on the left, the lead and both buttons stacked on the right; stacks below 991 */
.p-pricing .bt-fade .phero .wrap,.p-office .bt-fade .phero .wrap{display:block}   /* these use the .hh header row */
.bt-fade .hh{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px 56px;width:100%;text-align:left}
.bt-fade .hh h1{max-width:none;margin:0;white-space:nowrap;font-size:clamp(56px,6vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.bt-fade .hh-side{display:flex;flex-direction:column;gap:22px;min-width:0;max-width:520px;justify-self:end}
.bt-fade .hh .lead{max-width:none;margin:0;font-size:19px;line-height:1.45;text-wrap:pretty}
.bt-fade .hh .ctas{justify-content:flex-start;margin:0;gap:14px}
.bt-fade .hh .btn{height:52px;padding:0 26px;font-size:16px}
@media (max-width:991px){
  .bt-fade .hh{grid-template-columns:minmax(0,1fr);gap:20px}
  .bt-fade .hh-side{justify-self:start;max-width:560px}
}
@media (max-width:767px){
  .bt-fade .hh h1{white-space:normal;font-size:44px}
  .bt-fade .hh .lead{font-size:17px}
}
@media (max-width:767px){ .bt-fade .phero{padding-top:112px} }
/* product: the block is taller (dashboard, then the three target cards), so the blue
   gives way to white by the lower half of the dashboard and the cards sit on white */
.p-office .bt-fade{background:radial-gradient(90% 30% at 0 0,rgba(8,18,70,.55),transparent 70%),
    radial-gradient(70% 25% at 100% 15%,rgba(96,131,226,.35),transparent 70%),
    linear-gradient(180deg,#152a84 0%,#1e39a3 13%,#2946b6 24%,#4a68d2 36%,#89a3ec 48%,#c4d2f7 60%,#eef2fd 70%,#fff 78%)}
.bt-fade .mt-band{background:transparent}



/* services: the hero takes the royal blue fade (as Home, Product and Pricing), lifting to
   white at its foot before the grey section below. The nav sits on the blue (.bluetop). */
.sv.sv-hero.sv-blue{padding-top:160px;
  background:radial-gradient(90% 60% at 0 0,rgba(8,18,70,.55),transparent 70%),
             radial-gradient(70% 50% at 100% 20%,rgba(96,131,226,.35),transparent 70%),
             linear-gradient(180deg,#152a84 0%,#1e39a3 24%,#2946b6 46%,#4a68d2 64%,#89a3ec 80%,#dfe6fb 93%,#fff 100%)}
.sv-hero.sv-blue .sv-guides i{background-image:linear-gradient(180deg,rgba(255,255,255,.12) 50%,transparent 50%)}
.sv-hero.sv-blue .sv-eye{color:#c7d2ff}
.sv-hero.sv-blue h1{color:#fff}
.sv-hero.sv-blue .sv-lead{color:rgba(255,255,255,.86)}
.sv-hero.sv-blue .sv-btn{background:#fff;color:var(--btn)}
.sv-hero.sv-blue .sv-btn:hover{background:#eef2fd}
.sv-hero.sv-blue .sv-rail{background:rgba(255,255,255,.28)}
@media (max-width:767px){ .sv.sv-hero.sv-blue{padding-top:128px} }

/* ---- contact: the page hero, then the form beside the three routes ------- */
.ct-hero{border-bottom:0;padding:64px 0 56px;   /* the wash runs into the white section, so no hairline */
  background:linear-gradient(180deg,#e4ecfb 0,#eef2fd 45%,#f7f9fe 78%,#fff 100%)}
.ct-hero h1{max-width:none;white-space:nowrap}   /* one line */
.ct-hero .lead{max-width:62ch;text-wrap:pretty}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:start}
.ct-form{padding:34px}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ct-form .btn{width:100%;margin-top:4px}
.ct-form .note{text-align:center}
.ct-side{display:flex;flex-direction:column;gap:16px}
.ct-card{border:1px solid #c9d3ef;border-radius:8px;background:#fff;padding:26px 28px}   /* the site card: white with a royal-grey outline */
.ct-card h3{margin:0 0 10px;font:600 19px/1.3 var(--display);color:var(--navy)}
.ct-card p{margin:0;color:var(--mute)}
@media (max-width:991px){ .ct-grid{grid-template-columns:minmax(0,1fr);gap:28px} }
@media (max-width:991px){ .ct-hero h1{white-space:normal} }
@media (max-width:767px){ .ct-two{grid-template-columns:1fr;gap:0} .ct-form{padding:24px} .ct-hero{padding:44px 0 40px} }
.ct-pick{margin:0 0 2px;font:600 13px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ct-form label span{float:right;font:400 12.5px var(--web);color:var(--mute);text-transform:none;letter-spacing:0}
.ct-form .note a{font-weight:600}

/* css/bento.css */
/* Bento grid with expanding detail panels, after the Stripe homepage pattern.

   Stripe renders its dialog from a client-side string table, so with JavaScript off
   nothing opens. This does the same job with :target and no script at all: a card is
   a link to #p-<name>, CSS reveals the matching panel, and the close control is a
   link back to #bento. It is therefore deep linkable and shareable as a side effect.

   It is deliberately NOT marked role="dialog". Without JS there is no focus trap and
   no Escape key, and claiming dialog semantics we cannot honour is worse for a screen
   reader than describing what this actually is: a section of the page revealed by URL.
   In Webflow this becomes a native Interaction, which publishes on any paid plan. */

/* ---- the grid ---------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bcard{position:relative;display:flex;flex-direction:column;min-height:430px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  overflow:hidden;color:var(--navy);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
/* hover glow. Stripe nests three elements per card to draw a gradient border; a
   box-shadow ring plus a soft halo gets the same read, and Webflow's Designer can
   author a box-shadow natively where it cannot author a ::before gradient.
   --glow is set per card below so each one lights in its own artwork hue. */
.bcard{--glow:#2946b6;--glow-soft:rgba(41,70,182,.22)}
.bcard:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--glow);
  box-shadow:0 0 0 3px var(--glow-soft),0 14px 30px -10px var(--glow-soft)}
.bvis img,.bvis .queue{transition:transform .25s ease}
.bcard:hover .bvis img{transform:translateY(-4px)}
.bcard:hover .bvis .queue{transform:scale(.94) translateY(-4px)}
.bexp{transition:background .15s,border-color .15s,transform .15s}
.bcard:hover .bexp{transform:scale(1.08)}
.bcard:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.bcard-2{grid-column:span 2}
.bcard h3{margin:0;padding:26px 68px 0 26px;font:600 22px/1.28 var(--display);color:var(--navy);max-width:24ch}

/* the expand affordance, top right, as on the reference */
.bexp{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:6px;
  background:var(--cloud);border:1px solid var(--line);display:grid;place-items:center}
.bexp img{width:14px;height:14px;display:block}
.bcard:hover .bexp{background:var(--sky);border-color:var(--rail)}

/* the wide cell runs text left, visual right, so it does not leave a hole in the
   middle the way a tall stacked card does */
.bcard-3{grid-column:span 3;flex-direction:row;align-items:stretch;min-height:0}
.bcard-3 .btext{flex:0 0 310px;display:flex;flex-direction:column;padding:26px 0 26px 0}
.bcard-3 .btext h3{padding:0 26px}
.bcard-3 .btext .bsub{padding:10px 26px 0}
.bcard-3 .bmini{flex:1;margin-top:0;justify-content:center;padding:58px 26px 26px 0}   /* 58 top clears the expand button, which overlaps the grid on this card alone */
.bcard-3 .agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.bcard-3 .ag{padding:12px}
.bcard-3 .ag i,.bcard-3 .ag .plus{width:38px;height:38px}
.bcard-3 .ag .plus{font-size:20px}
/* one dark cell, so a six-up grid has some rhythm. It carries the journey rail,
   which is drawn for the navy band and would be invisible on white. */
.bcard-dark{background:#1e39a3;border-color:#1e39a3}   /* royal blue; the gradient itself is art/journey.svg */
.bcard-dark h3{color:#fff}
.bcard-dark .bexp{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28)}
.bcard-dark .bexp img{filter:brightness(0) invert(1)}
.bcard-dark:hover{border-color:var(--rail)}
.bcard-dark:hover .bexp{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.bcard-dark .bsub{color:#c7d2ff}
.bsub{padding:8px 26px 0;font-size:14px;color:var(--mute);max-width:36ch}

/* every visual is decoration inside a link, so clicks always reach the card */
.bvis,.bmini,.bstage{pointer-events:none}

/* compact visuals used inside cards */
.bmini{flex:1;margin-top:0;padding:22px 26px 26px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.bmini-spread{justify-content:center;gap:8px}   /* space-between pushed 43px rows 52px apart; centring keeps them a list */
.bmini .num-card{padding:14px 16px;gap:5px}
.bmini .num-card b{font:700 21px/1 var(--display)}
.bmini .num-card b small{font:500 12px var(--ui);margin-left:6px}
.bmini .num-card span{font-size:13.5px}
/* one line per row, figure hard left and label hard right */
.bart-cost .num-card{flex-direction:row;align-items:baseline;justify-content:space-between;
  gap:12px;padding:12px 16px}
.bart-cost .num-card b{font-size:20px;white-space:nowrap}
.bart-cost .num-card b small{margin-left:5px}
.bart-cost .num-card span{font-size:13px;white-space:nowrap}
/* the rows are 50px now rather than 78, so flex-end left 121px dead above them;
   centred, the group sits inside the ring the way the reference composes it */
.bart-cost .bmini{justify-content:center;gap:14px}
/* the cost card, one column: the heading, the three figures as separate smoked-glass
   rows (label, bar, figure), then SIGNAL MONOLITH filling the foot (a canvas the page
   script draws; in Webflow an Embed plus page code). */
.mono{position:relative;flex:1;min-height:180px;pointer-events:none}
.bcard.bart-cost{min-height:500px}   /* its row runs 500px tall, so the field below the figures gets about 270px */
.mono-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.bart-cost .bexp{z-index:2}
.bcost-body{position:relative;z-index:1;padding:16px 26px 0}
.bart-cost .bcost-body .bmini{padding:0;gap:6px;justify-content:flex-start}
.bcard-dark.bart-cost .num-card.sk-n{flex-direction:row;align-items:center;gap:12px;padding:7px 12px;text-align:left;border-radius:6px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);box-shadow:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.bcard-dark.bart-cost .num-card.sk-n .sk-lab{flex:0 0 92px;font:500 12.5px/1.2 var(--ui);white-space:nowrap;color:#dfe5ff}
.bcard-dark.bart-cost .num-card.sk-n .sk-meter{flex:1 1 auto;height:6px}
.bcard-dark.bart-cost .num-card.sk-n .sk-val{flex:0 0 auto;min-width:42px;text-align:right;font:700 13.5px/1 var(--display);color:#fff}
.bcard-dark .sk-meter{background:rgba(255,255,255,.12)}
.bmini .num-card em{font-size:12.5px}
.brow{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:6px;background:var(--white);padding:10px 14px;font-size:13.5px;color:var(--ink)}
.brow .tag{font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--btn-h);min-width:88px}
.bstage{flex:1;margin-top:0;padding:26px;overflow:hidden;display:flex;align-items:center}

/* the visual sits at the foot of the card and bleeds off the right edge */
.bvis{margin-top:auto;padding:26px 0 0 26px;overflow:hidden}
.bart-office .bvis{padding-right:26px}   /* the app sits inside the card on both sides and bleeds off the foot only */
.bvis img{display:block;width:100%;height:auto;border:1px solid var(--line);border-right:0;border-bottom:0;border-radius:6px 0 0 0}
/* the Office shot at 1:1 with the 1130px layout it was captured from, so its UI
   text is legible. The card clips the right edge, which is how both references
   show product UI: a real panel running off the card rather than a shrunken
   thumbnail. Scaled back down below 767, where a clip would show only the rail. */
.bcard-2 .bvis img{width:1130px;max-width:none}
/* clipped vertically too, or the 587px-tall shot drags row one to 721px and the
   card beside it stretches with it. Two cropped edges is the reference's look. */
.bcard-2 .bvis{max-height:392px}
.bart-office.bcard-2 .bvis{max-height:340px}
.bvis .queue{border-right:0;border-bottom:0;border-radius:6px 0 0 0;transform:scale(.94);transform-origin:top left}


/* ---- gradient artwork -------------------------------------------------- */
/* Real SVG files, so Webflow uploads each as an image asset. These sit BEHIND the
   card content and are anchored to the bottom, leaving the top pale where the
   heading sits. They are artwork inside cards, not a return of gradient surfaces:
   the page itself stays white, #fafafa and navy. */
.bcard{background-repeat:no-repeat;background-position:center bottom;background-size:cover}
.bart-office{background-image:url(../assets/art/office.svg);--glow:#2946b6;--glow-soft:rgba(41,70,182,.22)}
.bart-control{background-image:url(../assets/art/control.svg);--glow:#6d5ae6;--glow-soft:rgba(109,90,230,.26)}
/* the two dark cards (cost, journey) share one background: deep navy dominant, the
   royal only as a low glow at the foot. CSS rather than art/journey.svg so the same
   fall fits the wide card and the tall one; the glows sit at the art's places */
.bart-cost,.bcard-dark.bart-journey{background-image:radial-gradient(80% 46% at 20% 96%,rgba(74,104,210,.38),rgba(74,104,210,0)),
  radial-gradient(70% 42% at 95% 88%,rgba(137,163,236,.18),rgba(137,163,236,0)),
  linear-gradient(180deg,#132671 0%,#162b7e 55%,#1c3596 100%);background-size:100% 100%;
  --glow:#4a68d2;--glow-soft:rgba(74,104,210,.34)}
.bcard-dark.bart-cost,.bcard-dark.bart-journey{border-color:#162b7e}
.bart-workspace{background-image:url(../assets/art/workspace.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.26)}
.bart-journey{background-image:url(../assets/art/journey.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.34)}
.bart-seats{background-image:url(../assets/art/seats.svg);--glow:#4a68d2;--glow-soft:rgba(74,104,210,.24)}

/* ---- the ribbon, on the seats card only -------------------------------- */
/* A band across the bottom of the card with a real twist in it. The strands run
   in from the left, pinch to a waist at 42%, and come out the other side with
   their order reversed — which is what a ribbon does when it turns over.
   The art is one file, shown twice: the left element reveals everything up to
   the waist, the right element everything after it. Each pivots on the waist
   (transform-origin), so motion.css can open one lobe while it closes the
   other and the two stay joined at the pinch. Static it is finished artwork. */
.brib{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none;
  /* the band sits low and is cropped by the card's own bottom edge; this keeps
     its top strands off the paragraph in the left column */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 64%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 46%,#000 64%,#000 100%)}
.rib-l,.rib-r{position:absolute;bottom:-30%;height:104%;display:block;
  background-image:url(../assets/art/ribbon-royal.svg);background-repeat:no-repeat}   /* royal blue copy; login keeps ribbon.svg */
/* The halves OVERLAP by 16% of the card rather than butting together. Both pivot
   on the same point of the artwork (art-x 40%, the waist), so at the pivot they
   coincide exactly; either side of it the opposite shears diverge, and each half
   is fading out as it does. Butted, the join held its position but not its slope,
   and the two shears met at a visible crease.
   48 x 208.333 = 100 and 68 x 147.059 = 100, so both draw the art at card width. */
.rib-l{left:0;width:48%;background-size:208.333% 100%;background-position:left center;
  transform-origin:83.333% 67.5%;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 66%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 66%,transparent 100%)}
.rib-r{left:32%;width:68%;background-size:147.059% 100%;background-position:right center;
  transform-origin:11.765% 67.5%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%,#000 100%)}
/* the waving ribbon (replaces the twist): parallel strands on a sine wave, so they
   never cross, drawn twice across a strip twice the card's width. motion.css slides
   the strip one card-width to the left and loops, so the wave travels across the card
   like cloth in a breeze; the second, fainter layer runs slower and a little lower,
   and the two drift in and out of step. Static it is finished artwork. */
.rib-w{position:absolute;left:0;bottom:-26%;width:200%;height:100%;display:block;
  background:url(../assets/art/ribbon-wave.svg) repeat-x left center/50% 100%}
.rib-w2{bottom:-34%;opacity:.45;background-size:62.5% 100%}
.rib-lit{position:absolute;left:18%;bottom:-34%;width:56%;height:86%;display:block;
  background:radial-gradient(closest-side,rgba(41,70,182,.22),rgba(41,70,182,.06) 50%,transparent 74%)}
.bart-seats .btext,.bart-seats .bmini{position:relative;z-index:1}

/* ---- the sun, on the cost card only ------------------------------------- */
/* Stripe's is a three.js point cloud in a WebGL canvas — one <canvas aria-hidden>
   and a shader, so there is no markup to lift. What carries the look is the
   layout: a RIM of particles on a circle, and FLAMES leaving that rim along
   rays and feathering outward, with the middle left open so the stat rows stay
   readable. The rim turns and the flames pulse outward (motion.css); at rest
   all three layers sit still and it is finished artwork.
   Sizing note: the rim is drawn at rx 216 of a 600 viewBox, so its radius is
   0.36x the element, not half. 480 puts the flanks at x 10/357 — clear of the
   rows, which run x 27-340 — and the top arc in the strip above them. */
.borb{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 33%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 19%,#000 33%,#000 100%)}
/* one origin for all three, so the rim and its flames stay concentric */
.borb i{position:absolute;display:block;left:50%;top:59%;width:410px;height:410px;margin:-205px 0 0 -205px;   /* the particle rings stay inside the card; only the faint outer tips of the flames reach the edges */
  
  background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.orb-h{background-image:radial-gradient(closest-side,rgba(111,134,224,.18),rgba(41,70,182,.05) 48%,transparent 68%)}
.orb-1{background-image:url(../assets/art/orbit-1.svg)}
.orb-2{background-image:url(../assets/art/orbit-2.svg)}
.orb-3{background-image:url(../assets/art/orbit-3.svg)}
.bart-cost h3,.bart-cost .bsub,.bart-cost .bmini{position:relative;z-index:1}

/* ---- the globe, on the journey card only -------------------------------- */
/* Stripe's globe is another three.js point cloud in a WebGL canvas, so again
   there is no markup to lift. What carries it is real geography: the dots are
   Natural Earth 110m coastlines sampled on a roughly equal-area lattice and
   projected orthographically, with the lighting baked per dot.
   A flat image cannot spin, so the turn is carried by the light instead: the
   globe's own dots mask a gradient that travels across, which brightens them
   in the order a rotating sphere would. */
.bglb{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:var(--r);pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 36%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,transparent 18%,#000 36%,#000 100%)}
/* the limb is what says "sphere", so the whole circle has to fit inside the card */
.bglb i{position:absolute;display:block;left:50%;top:68%;width:400px;height:400px;margin:-200px 0 0 -200px}
.glb-haze{background:radial-gradient(closest-side,rgba(137,163,236,.2),rgba(137,163,236,.07) 56%,transparent 74%)}
.glb-dots{background:url(../assets/art/globe.svg) no-repeat center/100% 100%}
.glb-lit{background:linear-gradient(100deg,transparent 0,rgba(199,210,255,.72) 28%,rgba(255,255,255,1) 50%,rgba(199,210,255,.72) 72%,transparent 100%);
  /* the band is HALF the globe wide, so there is always somewhere it is not:
     sized at 260% it spanned 114% of the element and lit everything at once */
  background-size:52% 100%;background-repeat:no-repeat;
  -webkit-mask-image:url(../assets/art/globe.svg);mask-image:url(../assets/art/globe.svg);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.bart-journey h3,.bart-journey .bsub,.bart-journey .bstage{position:relative;z-index:1}


/* ---- glass panels, after the Glean reference --------------------------- */
/* The reference puts the colour on the card and floats a frosted panel on top.
   Here the artwork is that colour, so the visuals inside a card go translucent:
   a white fill you can see through, a blur of the artwork behind, a bright top
   highlight and a soft lift. Webflow has backdrop-filter in its Effects panel,
   so this survives the transfer. Solid panels elsewhere on the site are left
   alone: glass over a plain white section reads as nothing at all. */
.bcard .queue,
.bcard .num-card,
.bcard .brow,
.bcard .ag{
  background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  border-color:rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px -10px rgba(2,37,79,.22);
}
/* the rows inside the frosted inbox are a second, lighter layer */
.bcard .queue .q{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.7)}
/* on the dark card the same idea inverts: smoked glass rather than frosted */
.bcard-dark .stages{grid-auto-columns:minmax(88px,1fr);overflow-x:visible;
  background:rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;padding:16px 14px 10px}

/* motion is a courtesy, never a requirement */
/* ---- skeleton visuals ---------------------------------------------------
   The cards show the shape of the Office, not its text: grey bars for words,
   coloured tiles for kinds of work, real avatars and chart art where they carry
   no claim. Nothing in a card reads as data, so nothing needs a SAMPLE label, and
   nothing goes stale when a label changes in the product. The expanded panels
   behind each card keep their real text. */
.sk-b{display:block;height:9px;border-radius:5px;background:#d3dcf7}   /* skeleton bars in the site's pale royal tint */
.sk-b.sk-s{height:8px;background:#dce3f8}
.sk-b.sk-h{height:14px;border-radius:7px;background:#ccd6f5}
.sk-b.sk-big{height:16px;border-radius:6px;background:#c9d4f5}
.sk-b.sk-hd{height:7px;background:#d8e0f8;display:inline-block;vertical-align:middle}
.w15{width:15%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w35{width:35%}.w40{width:40%}.w45{width:45%}
.w50{width:50%}.w55{width:55%}.w60{width:60%}.w62{width:62%}.w70{width:70%}.w80{width:80%}.w90{width:90%}
.sk-lines{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-width:0}
.sk-t{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;gap:2.5px;width:26px;height:26px;padding:0 7px;border-radius:6px}
.sk-t b{display:block;height:2px;border-radius:1px;background:rgba(255,255,255,.95)}
.sk-t b:nth-child(3){width:60%}
.sk-blue{background:#4a86d8}.sk-green{background:#3fa06e}.sk-amber{background:#f0b33c}.sk-violet{background:#7a6ae0}
.sk-pill{flex:0 0 auto;width:46px;height:18px;border-radius:5px;background:#eaf1fb}

/* a hint of real text: what each thing is, in one short label; the detail stays a bar */
.sk-txt{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:600 12.5px/1.3 var(--web);color:var(--navy)}
.sk-pill{display:grid;place-items:center;width:auto;min-width:46px;padding:0 8px;font:600 10.5px var(--web);font-style:normal;color:var(--blue-d)}
.sk-nav .sk-txt{font-weight:500;font-size:12px;color:var(--mute)}
.sk-nav.on .sk-txt{color:var(--navy);font-weight:600}
.sk-logo .sk-brand{display:block;width:96px;height:18px;background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain}   /* the full logo, icon and name */
.sk-top .sk-txt{font-size:13px}
.sk-btn{display:grid;place-items:center;font:600 11px var(--web);font-style:normal;color:#fff;margin-right:9%}   /* the app runs past the card edge; keep the button in view */
.sk-hello{font:700 17px/1.2 var(--display);color:var(--navy);letter-spacing:-.01em}
.bart-cost .num-card.sk-n .sk-lab{flex:0 0 30%;font-size:12px}
.bart-cost .num-card.sk-n .sk-val{flex:0 0 auto;min-width:54px;text-align:right;font:700 12.5px var(--display);color:var(--navy)}
.stage .sk-stg{font:700 9.5px var(--web);letter-spacing:.09em;text-transform:uppercase;color:#acb6dd}
.stage .sk-stn{margin:2px 0 4px;font:600 12.5px/1.25 var(--display);color:#eaf2fd;white-space:normal}
.stage.cur .sk-stg,.stage.cur .sk-stn{color:#fff}
.bcard-3 .ag .sk-txt{font-size:12px}

/* inbox rows */
.bcard .queue .sk-q{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 10px;border:1px solid rgba(255,255,255,.7);border-radius:6px;background:rgba(255,255,255,.62)}

/* cost: three meters, filled to the three bars a seat is held to */
.bart-cost .num-card.sk-n{align-items:center;gap:16px}
.sk-meter{flex:1 1 auto;height:10px;border-radius:5px;background:#dce3f8;overflow:hidden}
.sk-meter i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6aa6ee,#2b73d6)}
.sk-m95 i{width:95%}.sk-m70 i{width:70%}.sk-m25 i{width:25%;background:linear-gradient(90deg,#5bc28b,#2f9a63)}
.bart-cost .num-card.sk-n .sk-b{flex:0 0 22%}

/* workspace kinds and seats */
.brow .sk-lines,.ag .sk-lines{gap:7px}
.bcard-3 .ag .sk-lines{gap:6px}
.ag.sk-add .sk-b{background:#c3cff5}

/* journey stages on the dark card: smoked bars */
.stage .sk-b{background:rgba(255,255,255,.16)}
.stage .sk-d{height:6px;width:40%}
.stage .sk-dh{height:10px;margin-top:4px;background:rgba(255,255,255,.28)}
.stage .sk-ds{height:6px;margin-top:3px}
.stage.cur .sk-b{background:rgba(255,255,255,.42)}
.stage.cur .sk-dh{background:rgba(255,255,255,.85)}

/* office: a skeleton of the app in place of the screenshot */
.sk-app{display:flex;width:100%;min-width:0;height:420px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:#fafbfd;overflow:hidden;
  transition:transform .25s ease}
.bcard:hover .sk-app{transform:translateY(-4px)}
.sk-side{flex:0 0 170px;display:flex;flex-direction:column;gap:6px;padding:16px 14px;border-right:1px solid var(--line);background:#fff}
.sk-logo{display:flex;align-items:center;gap:8px;margin-bottom:10px}

.sk-nav{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px}
.sk-nav>i{flex:0 0 auto;width:12px;height:12px;border-radius:3px;background:#e3e8f0}
.sk-nav.on{background:#eaf1fb}.sk-nav.on>i,.sk-nav.on .sk-b{background:#b9d0ef}
.sk-main{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;padding:16px 18px;min-width:0}
.sk-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sk-btn{flex:0 0 auto;width:84px;height:24px;border-radius:6px;background:var(--blue)}
.sk-charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:6px}
.sk-chart{display:flex;flex-direction:column;gap:8px;padding:14px;border:1px solid var(--line);border-radius:6px;background:#fff}
.sk-chart img,.bcard-2 .bvis .sk-chart img,.bcard:hover .bvis .sk-chart img{display:block;width:100%;max-width:100%;height:70px;margin-top:4px;border:0;border-radius:0;transform:none}
.sk-chart{overflow:hidden;min-width:0}
.sk-seats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:4px}
.sk-seat{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.sk-seat>i{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center}

@media (prefers-reduced-motion:reduce){
  .bcard,.bexp,.bvis img,.bvis .queue,.sk-app{transition:none;transform:none}
  .bcard:hover{transform:none}
  .bcard:hover .bvis img,.bcard:hover .bvis .queue,.bcard:hover .sk-app,.bcard:hover .bexp{transform:none}
}

/* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */
@media (max-width:991px){
  .bento{grid-template-columns:1fr 1fr;grid-auto-flow:row dense}   /* two columns: the narrow cards pair up, no holes */
  /* the leadership card stacks from here: its heading above, the tiles across the full width */
  .bcard-3{flex-direction:column}
  .bcard-3 .btext{flex:none;padding-bottom:0}
  .bcard-3 .btext h3{padding-right:68px}   /* clear of the expand button */
  .bcard-3 .bmini{padding:22px 26px 26px}
  /* names wrap rather than trail off, in the tiles, the office preview and the queue */
  .bcard-3 .ag .sk-txt,.bart-office .sk-seat .sk-txt,.bcard .queue .sk-q .sk-txt{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
  .bcard-2,.bcard-3{grid-column:span 2}
}
@media (max-width:767px){
  .bento{grid-template-columns:1fr}
  .bcard.bart-cost{min-height:0}
  /* phones: the office preview drops its sidebar and seat row so every label fits */
  .bart-office .sk-side{display:none}
  .bart-office .sk-seats{display:none}
  .bart-cost .mono{min-height:240px}
  .bcard-2 .bvis img{width:100%}
  .bcard-2 .bvis{max-height:none}
  .bcard-2,.bcard-3{grid-column:span 1}
  .bcard-3 .agents{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* bottom and height are percentages of the card, and the card roughly doubles
     in height once it stacks, so the band has to be re-anchored or it slides
     off the bottom entirely */
  .rib-l,.rib-r,.rib-w{bottom:-10%;height:46%} .rib-w2{bottom:-16%}
  /* the bento drops to one column here, so the cost card goes wide and short and
     the 470px ring hides entirely behind the full-width stat rows. Growing it
     puts the flanks back out in the 26px margins where they can be seen. */
  .borb i{top:51%;width:330px;height:330px;margin:-165px 0 0 -165px}   /* the card is wide and short here (about 316px), so the ring shrinks to fit its height */
  .bcard{min-height:0}
}

@media (max-width:479px){
  .bcard-dark .stages{grid-auto-columns:minmax(0,1fr)}
  .stage .sk-stn{font-size:11px}
  .stage .sk-stg{font-size:8.5px}
  .bcard-3 .ag .sk-b{display:none}   /* tiles are too narrow for bars beside the avatar; the names stay, wrapping */
  .bcard-3 .ag{gap:8px;padding:10px}
  .bcard-3 .ag i,.bcard-3 .ag .plus{width:32px;height:32px;flex:0 0 32px}
  /* "Median or under  Cost per finished item" needs 267px and the row is 234px
     wide at 320, so one line clips it silently. Stacked again, still centred. */
  .bart-cost .num-card{flex-direction:column;align-items:center;gap:4px;padding:11px 12px;text-align:center}
  .bart-cost .num-card b,.bart-cost .num-card span{white-space:normal}
  /* the card is narrow again down here, so the ring goes back to the size that
     fits it rather than the wide-card one inherited from 767 */
  .borb i{top:60%;width:350px;height:350px;margin:-175px 0 0 -175px}
  /* the journey card is down to 288px at the narrowest phone, where a 400px
     globe loses its limb and reads as texture. 300 keeps the circle whole. */
  .bglb i{width:300px;height:300px;margin:-150px 0 0 -150px}
}

/* the office, queue, cost, workspace and seats cards: a soft white-to-royal wash, white at the
   top (under the heading) deepening to a pale royal tint at the foot */
.bart-office,.bart-control,.bart-workspace,.bart-seats{background-image:radial-gradient(120% 60% at 50% 100%,rgba(74,104,210,.14),transparent 70%),
  linear-gradient(180deg,#fff 0,#fff 38%,#eef1fc 72%,#e2e8fb 100%);background-size:100% 100%}
.bart-office,.bart-control{--glow:#4a68d2;--glow-soft:rgba(74,104,210,.24)}
/* the light cards (office, queue, cost, workspace, seats): a light-blue wash in the Every
   department tint (#e4ecfb), near-white at the top deepening toward the foot */
.bart-office,.bart-control,.bart-workspace,.bart-seats{background-image:linear-gradient(180deg,#f7f9fe 0,#eef3fd 30%,#e4ecfb 62%,#d8e2fa 100%)}

/* skeleton bars on the seat tiles: a pale royal tint (the site's --sky family) instead of
   grey, so they read against the light-blue wash and match the rest of the palette */
.bcard-3 .ag .sk-b.sk-s{height:8px;background:#d3dcf7}
.bcard-3 .ag.sk-add .sk-b{background:#c3cff5}
/* the journey card: every stage name gets room for two lines, so a one-line name
   (Startup) and a two-line one (Small Business) put their bars on the same line */
.bstage .stage .sk-stn{display:flex;align-items:flex-start;min-height:2.5em;white-space:normal;overflow:visible;text-overflow:clip}
/* every name wraps as it needs to (nothing is cut off), in a two-line box with the text
   set on its floor: each name sits the same distance above its bar, and the bars align */

/* journey card dots: the stages ahead are white, the current stage is the logo green */
.bstage .stage::after{top:6px;left:1px;width:10px;height:10px;background:#fff;border:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 0 0 3px rgba(255,255,255,.28)}   /* a smaller white core in a slim glass ring; the green current stage keeps the larger glow */
.bstage .stage.cur::after{top:5px;left:0;width:12px;height:12px;background:#4cc38a;border:0;box-shadow:0 0 0 5px rgba(76,195,138,.25)}

/* css/panel.css */
/* ==========================================================================
   The expanding detail panel, shared by the home bento cards and the pricing
   plan cards. Opened with :target (a card links to #p-<name>), so it works with
   JavaScript off. Split out of bento.css on 2026-09-22 so pricing.html can use
   it without the whole bento grid.
   ========================================================================== */
/* ---- the panel --------------------------------------------------------- */
/* visibility rather than display, so opening can actually transition. display:none
   cannot animate; this fades the scrim and lifts the card, with no @keyframes. */
.panel{position:fixed;inset:0;z-index:60;overflow-y:auto;background:rgba(2,37,79,.38);
  padding:24px;visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .18s ease,visibility 0s linear .18s}
.panel:target{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .18s ease}
.panel-scrim{position:fixed;inset:0;display:block}
.panel-in{position:relative;z-index:1;max-width:1040px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:40px;
  transform:translateY(10px);transition:transform .22s ease}
.panel:target .panel-in{transform:none}
.panel-x{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:6px;
  border:1px solid var(--line);background:var(--white);color:var(--navy);
  display:grid;place-items:center;font:400 19px/1 var(--ui)}
.panel-x:hover{background:var(--cloud);text-decoration:none}
.panel-hd{display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:start;padding-right:44px}
.panel-hd h2{font:500 30px/1.15 var(--display)}
.panel-hd .lead{margin-top:12px}
.panel-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.panel-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.panel-list div{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:var(--ink)}
.panel-list .ico{width:15px;height:15px;flex:0 0 auto;margin-top:3px;display:block}
.panel-body{margin-top:32px;padding-top:32px;border-top:1px solid var(--line)}
.panel-body h4{margin:0 0 14px;font:600 15px var(--ui);color:var(--navy)}
.panel-shot{border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:28px}
.panel-shot img{display:block;width:100%;height:auto}

/* the journey band reused inside a panel: boxed, not full bleed */
.journey.panel-band{padding:26px;border-radius:8px}
.journey.panel-band .stages{margin-top:0;grid-auto-columns:minmax(106px,1fr)}   /* the panel is narrower than the page band, so all eight stages still fit */

@media (prefers-reduced-motion:reduce){ .panel,.panel-in{transition:none;transform:none} }
@media (max-width:991px){ .panel-hd{grid-template-columns:1fr;gap:20px} .panel-in{padding:28px} }
@media (max-width:767px){ .panel:target{padding:12px} .panel-hd h2{font-size:25px} }

/* css/flow.css */
/* The approval flow, as a Stripe-shaped system diagram on the site navy.

   Reads top to bottom: the tools a seat can reach, down through Connectors and
   Knowledge into the engine; seats you install on the left, the board on the right;
   then every outward action stopping at the gate.

   Dashed slots are Stripe's device and carry a real meaning here, spelled out in the
   caption: they are the things you have not filled yet.

   No frame. The fading dot grid is the only thing marking the area, as in the
   reference. Connectors are striped-background divs rather than SVG, so Webflow's
   Designer can edit them and the dashes can march (see motion.css). */

.flow{background:linear-gradient(180deg,#132671 0%,#182d85 45%,#213d9e 100%);color:#fff;padding:88px 0 96px;overflow:hidden}
.flow h2{color:#fff}
.flow .lead{color:#d2d8f2}
/* the one call to action between the hero and the foot of the page */
.flow-cta{display:flex;justify-content:center;margin:24px 0 0}
.flow .flow-cta .btn.p{background:#fff;color:var(--btn)}
.flow .flow-cta .btn.p:hover{background:#eef2fd}
.flow .foot{margin:22px auto 0;font-size:13px;line-height:1.55;color:#8594ce;max-width:62ch;text-align:center}

/* ---- canvas ------------------------------------------------------------ */
.dg{position:relative;margin-top:40px;padding:22px 0 26px;
  display:flex;flex-direction:column;align-items:center}
/* the whole diagram at 80%: zoom (unlike a transform) also shrinks the space it takes,
   so the section closes up round it. The stacked phone layout keeps full size. */
.dg{zoom:.8;max-width:1132px;margin-left:auto;margin-right:auto}   /* 1132 is the full column; under zoom it renders at 80% */
.dg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url(../assets/art/grid-dot-dark.svg);background-repeat:repeat;
  -webkit-mask-image:radial-gradient(105% 78% at 50% 48%,#000 22%,rgba(0,0,0,.35) 58%,transparent 82%);
  mask-image:radial-gradient(105% 78% at 50% 48%,#000 22%,rgba(0,0,0,.35) 58%,transparent 82%)}
.dg>*{position:relative;z-index:1}

/* ---- the box, the diagram's basic unit --------------------------------- */
.dg-box{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 18px;
  border-radius:6px;background:var(--blue);color:#fff;font:600 14.5px var(--ui);white-space:nowrap}
.dg-ghost{background:transparent;border:1.5px dashed rgba(255,255,255,.22);min-width:78px}

/* ---- top: the tool container and the bridge beneath it ------------------ */
.dg-top{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.dg-group{display:flex;gap:11px;padding:13px;border-radius:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10)}

/* the bridge drops two boxes out of the container and merges them into one stem */
.dg-bridge{position:relative;width:660px;max-width:100%;height:158px}
.br-box{position:absolute;top:52px;width:150px}   /* fixed, so the uprights land on centre */
.br-box.br-l{left:0}
.br-box.br-r{right:0}
.br-up,.br-dn,.br-c{position:absolute;width:1px;
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:1px 6px}
.br-up{top:0;height:52px}
.br-dn{top:94px;height:44px}
.br-up.br-l,.br-dn.br-l{left:75px}
.br-up.br-r,.br-dn.br-r{right:75px}
.br-h{position:absolute;left:75px;right:75px;top:138px;height:1px;
  background-image:repeating-linear-gradient(90deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:6px 1px}
.br-c{left:50%;top:138px;height:20px}

/* ---- middle: seats, store, engine, outputs, board ---------------------- */
.dg-mid{display:flex;align-items:center;justify-content:center;width:100%}
/* the hub is shorter than the row it sits in, so these two dashed runs carry the
   line from the bridge down to the hub and from the hub down to the approval stem */
.dg-mid{position:relative}
.dg-mid::before,.dg-mid::after{content:"";position:absolute;left:50%;width:1px;height:calc(50% - 56px);
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);background-size:1px 6px}
.dg-mid::before{top:0}
.dg-mid::after{bottom:0}
.dg-mid>.dg-box{width:150px}   /* equal flanks keep the hub on the centre line */
/* the hub, after the Stripe tile in Stripe's own diagram: a near-square with a diagonal
   gradient (the site's blue into deep navy), no outline, the white name only */
.dg-hub{flex:0 0 auto;width:112px;height:112px;border-radius:var(--r);background:linear-gradient(135deg,#2b4cd1 0,#1a349d 45%,#11205c 100%);
  box-shadow:0 18px 40px -12px rgba(0,10,40,.6),inset 0 1px 0 rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.dg-hub img{display:block;width:84px;height:auto}

/* the two soft panels that bookend the row */
.dg-panel{flex:0 0 auto;width:196px;padding:14px;border-radius:8px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.dg-board{gap:2px;padding:20px 16px}
.dg-board b{font:700 18px var(--display);color:#fff}   /* same title as .dg-gate */
.dg-board span{font:500 15px/1.3 var(--ui);color:#c0caf1}   /* same subtitle as .dg-gate, 12px on screen under .dg zoom .8 */
.dg-cap{font:600 13px var(--ui);color:#d2d8f2}

.dg-seats{display:grid;grid-template-columns:repeat(3,42px);gap:8px}
.dg-seats i{width:42px;height:42px;border-radius:6px;background-size:cover;background-position:center;
  background-color:#132674;display:block}
.dg-seats .dg-add{display:grid;place-items:center;background:transparent;
  border:1.5px dashed rgba(255,255,255,.24);color:#8594ce;font:400 18px/1 var(--ui)}

/* ---- connectors -------------------------------------------------------- */
.dg-wire{flex:1 1 auto;height:1px;min-width:30px;
  background-image:repeating-linear-gradient(90deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:6px 1px}
.dg-stem{width:1px;height:42px;
  background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
  background-size:1px 6px}

/* A dashed line can end on a transparent segment, and because the dashes march that
   gap flickers. A solid cap at each end keeps the connector touching the card. */
.dg-stem,.dg-wire{position:relative}   /* the br-* lines are already absolute; re-declaring them relative broke the bridge */
.br-up::before,.br-up::after,.br-dn::before,.br-dn::after,
.br-c::before,.br-c::after,.dg-stem::before,.dg-stem::after{
  content:"";position:absolute;left:0;width:1px;height:2px;background:rgba(157,173,238,.62)}
.br-up::before,.br-dn::before,.br-c::before,.dg-stem::before{top:0}
.br-up::after,.br-dn::after,.br-c::after,.dg-stem::after{bottom:0}
.br-h::before,.br-h::after,.dg-wire::before,.dg-wire::after{
  content:"";position:absolute;top:0;width:2px;height:1px;background:rgba(157,173,238,.62)}
.br-h::before,.dg-wire::before{left:0}
.br-h::after,.dg-wire::after{right:0}

/* ---- the gate ---------------------------------------------------------- */
.dg-gate{padding:18px 34px;border-radius:8px;background:rgba(17,52,195,.16);
  border:1px solid rgba(157,173,238,.5);box-shadow:0 0 0 7px rgba(17,52,195,.09);text-align:center}
.dg-gate b{display:block;font:700 18px var(--display);color:#fff}
.dg-gate span{display:block;font:500 15px/1.3 var(--ui);color:#c0caf1;margin-top:2px}

/* ---- tool boxes: a mark, and a face that turns to what the tool may do --- */
/* they turn over on the X axis, as Stripe's app logos do (rotateX, preserve-3d) */
.dg-flip{position:relative;perspective:620px;padding:0;width:158px;height:46px;background:none}
.dg-flip>span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:0 12px;border-radius:6px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.fx-f{background:var(--blue);color:#fff;font:600 14px var(--ui);transform:rotateX(0deg)}
.fx-b{background:#132674;border:1px solid rgba(157,173,238,.42);color:#d2d8f2;
  font:500 15px/1.2 var(--ui);text-align:center;transform:rotateX(180deg);   /* 12px on screen under .dg zoom .8 */
  white-space:normal;overflow-wrap:anywhere;padding:0 6px}   /* .dg-box's nowrap would push long lines past the edge */
.bm{flex:0 0 auto;width:19px;height:19px;border-radius:5px;background:#fff;display:grid;place-items:center}
.bm img{width:12px;height:12px;display:block}

/* ---- Stripe's own mechanics, from its developer-systems-animation code ---- */
/* 1. an empty slot fills: the dashed border fades while a label pops in from
   .75 scale. Here it cycles two tools the Office really connects (motion.css). */
.dg-slot{position:relative;width:158px;height:46px;padding:0;min-width:0}
.dg-fill{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;
  background:var(--blue);color:#fff;font:600 14px var(--ui);opacity:0}
/* 2. the hub's travelling border: a turning conic sweep behind a mask 1.5px in,
   so only a ring of it shows. Off at rest; motion.css lights it on each connect */
.dg-hub{position:relative;overflow:hidden}
.dg-hub img{position:relative;z-index:1}
.dg-glow{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;overflow:hidden;opacity:0;pointer-events:none}
.dg-glow i{display:block;width:300px;height:300px;
  background:conic-gradient(from 0deg,transparent 0 55%,rgba(86,114,226,.9) 72%,#d1d9fb 80%,rgba(56,86,204,.9) 88%,transparent 100%)}
.dg-glow::after{content:"";position:absolute;inset:1.5px;border-radius:calc(var(--r) - 1.5px);background:linear-gradient(135deg,#2b4cd1 0,#1a349d 45%,#11205c 100%)}

/* ---- the actions that leave, inside a dashed enclosure ----------------- */
.dg-acts{display:flex;gap:11px;padding:16px;border-radius:8px;
  border:1.5px dashed rgba(255,255,255,.18);flex-wrap:wrap;justify-content:center}

/* ---- SCALE: hold every seat to a standard ------------------------------- */
/* After Stripe's "Scale with confidence", which sits under its systems diagram
   in the same dark band. Its numbers are gradient text (background-clip:text),
   which Webflow's "clip background to text" does natively; its wave is a
   three.js canvas; here LUMINOUS TIDE, a 2D canvas drawn by the page script. */
.sc{position:relative;margin-top:44px;padding-top:48px}
.sc-div{position:absolute;left:0;right:0;top:0;display:block;height:1px;
  background:linear-gradient(90deg,transparent,rgba(157,173,238,.35) 20%,rgba(157,173,238,.35) 80%,transparent)}
.sc-say{position:relative;z-index:2;max-width:680px;margin:0;font:500 30px/1.3 var(--display);color:#95a2d7;letter-spacing:-.01em}
.sc-say b{font-weight:600;color:#fff}
/* the tide band under the numbers; the negative margin cancels .flow's bottom padding so
   the lattice runs off the section's bottom edge */
.sc-burst{position:relative;height:420px;margin:16px 0 -96px;pointer-events:none}
/* LUMINOUS TIDE: the canvas spans the full window width; the glow stays as the no-JS art */
.sc-burst .sc-glow{position:absolute;display:block;bottom:0;left:-420px;right:-420px;height:100%;
  background:radial-gradient(900px 100% at 50% 100%,rgba(86,114,226,.28),rgba(86,114,226,.06) 55%,transparent 78%)}   /* height follows the band, so it fades out before the top at every size */
.sc-canvas{position:absolute;left:50%;bottom:0;display:block;width:100vw;height:100%;transform:translateX(-50%);pointer-events:auto}   /* receives the hover; nothing clickable sits under it */
.sc-nums{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:44px}
.sc-n b{display:block;font:500 64px/1.15 var(--display);letter-spacing:-.03em;color:transparent;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sc-g1{background-image:linear-gradient(68deg,rgba(108,131,224,.8),#a5b4ed 35%,#e8ecfd 85%)}
.sc-g2{background-image:linear-gradient(73deg,#d1d9fb 10%,#5672e2 75%)}
.sc-g3{background-image:linear-gradient(75deg,#e8ecfd 0,#5672e2 45%,#294ace 95%)}
.sc-n span{display:block;margin-top:14px;max-width:26ch;font-size:16px;line-height:1.45;color:#e5e9f9}
.sc-foot{position:relative;z-index:2;margin:34px 0 0;font-size:13px;color:#8594ce}

/* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */
@media (max-width:991px){
  .sc-say{font-size:26px}
  .sc-burst{height:336px}
  .sc-nums{margin-top:48px}
  .sc-n b{font-size:52px}
  .dg-box{height:38px;padding:0 13px;font-size:13px}
  .dg-ghost{min-width:58px}
  .dg-bridge{width:100%;height:146px}
  .br-box{width:124px}
  .br-up.br-l,.br-dn.br-l{left:62px}
  .br-up.br-r,.br-dn.br-r{right:62px}
  .br-h{left:62px;right:62px}
  .dg-panel{width:158px}
  .dg-hub{width:96px}
  .dg-flip,.dg-slot{width:132px;height:42px}
  .dg-fill{font-size:12.5px}
  .fx-f{font-size:12.5px}
  .dg-mid>.dg-box{width:124px}
  .dg-hub{height:96px}
  .dg-mid::before,.dg-mid::after{height:calc(50% - 48px)}
  .dg-hub img{width:72px;height:auto}
  .dg-seats{grid-template-columns:repeat(3,34px)}
  .dg-seats i{width:34px;height:34px}
}
@media (max-width:767px){
  .sc{margin-top:56px;padding-top:48px}
  .sc-say{font-size:22px}
  .sc-burst{height:252px}
  .sc-nums{grid-template-columns:1fr;gap:24px;margin-top:40px}
  .sc-n b{font-size:46px}
  .dg{zoom:1}
  /* everything stacks, so the horizontal run becomes a vertical one */
  .dg-group{flex-wrap:wrap;justify-content:center}
  .dg-bridge{height:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 0}
  .br-up,.br-dn,.br-h,.br-c{display:none}
  .br-box{position:static}
  .dg-mid{flex-direction:column}
  .dg-mid::before,.dg-mid::after{display:none}
  .dg-panel{width:100%;max-width:280px}
  .dg-hub{width:96px}
  .dg-wire{width:1px;height:26px;flex:0 0 26px;min-width:0;
    background-image:repeating-linear-gradient(180deg,rgba(157,173,238,.62) 0 2px,transparent 2px 6px);
    background-size:1px 6px}
  .dg-acts{padding:12px}
  .dg-acts .dg-ghost{display:none}
}
@media (max-width:479px){
  .sc-say{font-size:19px}
  .sc-burst{height:182px}
  .sc-nums{margin-top:48px}
}

/* css/prefs.css */
/* ============================================================================
   YOUR PREFERENCES, APPLIED — home page. After Zip's contract hero.

   Zip ships that hero as a Lottie: a JSON of vector keyframes (690x610, 30fps,
   10.4s) played by lottie-web. Its text layers give the storyline: a greeting,
   a request with an attached file, "Analyzing contract" over a document outline,
   a scan line and a highlighted line, "Assessing risks against playbooks", then
   the assistant's redlines as Option A / Option B with accept buttons.
   Rebuilt as HTML on the same 690x610 stage, so every word is editable text in
   Webflow rather than paths in a JSON. Motion is the PREFS block in motion.css.
   Resting state is the last frame: the two options on offer.
   ========================================================================== */

.zp-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:48px;align-items:center}
.zp-copy h2{margin:14px 0 16px}
.zp-copy .lead{max-width:40ch;margin:0}
.zp-col{min-width:0}
.zp{--s:.7;position:relative;max-width:100%;width:calc(690px * var(--s));height:calc(610px * var(--s));margin:0 auto}
.zp-stage{position:absolute;left:0;top:0;width:690px;height:610px;transform:scale(var(--s));transform-origin:0 0;
  border-radius:6px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);
  /* a light wash: the Every department tint at the top, lifting to near-white at the foot */
  background:linear-gradient(180deg,#e4ecfb 0,#eaf0fc 40%,#f3f6fe 75%,#fafbff 100%);
  box-shadow:inset 0 0 0 1px var(--line)}   /* a hairline, so the pale top still reads as a frame on the grey band */

/* ---- the draft, beside the chat (kept clear of it: the doc ends at 248, the chat starts at 272) -- */
.zp-doc{position:absolute;left:32px;top:140px;width:216px;height:330px}
.zp-dh{position:absolute;left:0;font-size:17px;color:var(--navy)}
.zp-dh.zp-d1{top:0} .zp-dh.zp-d2{top:88px} .zp-dh.zp-d3{top:212px;color:var(--t4)}
.zp-l{position:absolute;left:2px;display:block;height:10px;border-radius:5px;background:rgba(74,104,210,.16)}
.zp-l.w1{width:214px} .zp-l.w2{width:196px} .zp-l.w3{width:172px} .zp-l.w4{width:150px} .zp-l.w5{width:118px}
.zp-doc .zp-l:nth-of-type(1){top:34px}  .zp-doc .zp-l:nth-of-type(2){top:52px}
.zp-doc .zp-l:nth-of-type(3){top:122px} .zp-doc .zp-l:nth-of-type(4){top:140px} .zp-doc .zp-l:nth-of-type(5){top:158px} .zp-doc .zp-l:nth-of-type(6){top:176px}
.zp-doc .zp-l:nth-of-type(7){top:246px} .zp-doc .zp-l:nth-of-type(8){top:264px} .zp-doc .zp-l:nth-of-type(9){top:282px} .zp-doc .zp-l:nth-of-type(10){top:300px}
/* the line the seat flags: a lifted, glowing copy of it */
.zp-hi{position:absolute;left:8px;top:132px;display:block;width:156px;height:26px;border-radius:6px;background:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 0 18px rgba(41,70,182,.35)}
.zp-hi::after{content:"";position:absolute;left:12px;right:12px;top:9px;height:8px;border-radius:4px;background:#e8eef6}
.zp-scan{position:absolute;left:-8px;top:0;display:block;width:232px;height:60px;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.5) 50%,transparent)}

/* ---- the chat ------------------------------------------------------------ */
/* tall enough to hold the options, with the seat's name set underneath them */
.zp-card{position:absolute;left:272px;top:70px;width:386px;height:470px;border-radius:8px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.zp-b{display:block;padding:12px 16px;border-radius:8px;background:#fff;font-size:15px;line-height:1.4;color:var(--ink)}
.zp-p1>*,.zp-p2>*{position:absolute}
.zp-greet{left:56px;top:26px;width:280px}
.zp-me{right:22px;top:104px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.zp-ask{max-width:270px;background:var(--btn);color:#fff;border-radius:8px 8px 4px 8px}
.zp-file{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:6px;background:#fff;font-size:12.5px;font-weight:500;color:var(--navy)}
.zp-me small{font-size:11.5px;color:var(--mute)}
.zp-st{left:56px;top:262px;display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:500;color:var(--navy)}
.zp-spark{display:block;width:12px;height:12px;background:var(--navy);
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* phase one rests hidden; the resting frame is the options */
.zp-greet,.zp-me,.zp-st,.zp-scan{opacity:0}
.zp-reply{left:56px;top:24px;width:300px}
.zp-opts{left:56px;top:106px;width:310px;padding:16px 18px;border-radius:8px;background:#fff}
.zp-opts b{display:block;margin-bottom:9px;font-size:14px;font-weight:600;color:var(--ink)}
.zp-oa,.zp-ob{display:block}
.zp-ob{margin-top:14px}
.zp-rw{display:flex;gap:5px;margin-top:5px}
.zp-rw i{display:block;height:11px;border-radius:3px}
/* redline convention: struck text red, inserted text green */
.zp-del{background:linear-gradient(180deg,transparent 45%,#e5484d 45%,#e5484d 58%,transparent 58%) 8px 0/calc(100% - 16px) 100% no-repeat,#fde4e4}
.zp-ins{background:#d9f1e2}
.zp-gr{background:#eef1f5}
.x16{width:16%} .x22{width:22%} .x30{width:30%} .x58{width:58%} .x62{width:62%} .x70{width:70%} .x72{width:72%} .x92{width:92%} .x100{width:100%}
.zp-acts{display:flex;gap:8px;margin-top:16px}
.zp-acc{position:relative;flex:1;padding:9px 10px 9px 32px;border-radius:6px;background:#f2f4f7;font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.zp-acc::before{content:"";position:absolute;left:10px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:3px;
  background:#9aa7b8 url(../assets/icons/pt-check.svg) no-repeat center/12px 12px}
.zp-who{position:absolute;left:-14px;bottom:62px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.zp-av{display:block;width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky);
  box-shadow:0 0 0 4px rgba(255,255,255,.8),0 0 26px 8px rgba(74,104,210,.3)}
.zp-who small{position:absolute;left:96px;bottom:-44px;white-space:nowrap;font-size:13.5px;font-weight:600;color:var(--navy)}   /* navy, not the reference's white: it sits on the pale end of the gradient */

@media (max-width:991px){ .zp-grid{grid-template-columns:1fr;gap:32px} .zp{--s:1} }
@media (max-width:767px){ .zp{--s:.62} }
@media (max-width:479px){ .zp{--s:.41} }

/* css/rotate.css */
/* ============================================================================
   EVERY DEPARTMENT — home page. After Clay's "GTM engineers build on Clay".

   Clay's is a data-module="rotate" block: use-case tabs a script cycles; each
   card stacks in one grid cell with a tinted, textured band, a description and
   layered UI images (a table, a floating checklist popover, an action pill on a
   dotted line). Here the checklist, loading cells and pill are HTML, and the
   rotation is keyframes on one shared 25s timeline (css/motion.css, ROTATE).
   Layering: the bands live OUTSIDE the cards, behind the shared window; a
   fading card traps its children's z-index, so a band inside one could never
   sit behind the window while its table sits in front.
   Resting state is the first tab, finished.
   ========================================================================== */

.cl-sec{overflow:hidden}
.cl-sh{text-align:center}
.cl-sh .eyebrow{margin:0 auto}
.cl-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
.cl{--s:1;position:relative;max-width:100%;width:calc(1200px * var(--s));height:calc(700px * var(--s));margin:10px auto 0}
.cl-stage{position:absolute;left:0;top:0;width:1200px;height:700px;transform:scale(var(--s));transform-origin:0 0;
  overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink)}
.cl-stage>span,.cl-card>*{position:absolute;display:block}

/* ---- description + tabs --------------------------------------------------- */
.cl-descs{left:0;right:0;top:0;height:30px}
.cl-d{position:absolute;left:0;right:0;top:0;text-align:center;font-size:18px;color:var(--ink)}
.cl-tabs{z-index:3;left:0;right:0;top:48px;display:flex !important;justify-content:center;gap:10px}
.cl-tab{padding:11px 20px;border-radius:8px;background:#f3f5f8;font-size:15px;font-weight:500;color:var(--t4)}
.cl-tabs .cl-c0{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl-d:not(.cl-c0),.cl-card:not(.cl-c0),.cl-band:not(.cl-c0){opacity:0}
/* tabs are links: a click jumps the loop to that desk (script in index.html). With
   motion off nothing animates, so .cl-pN on .cl shows the picked desk instead; while
   the loop runs, the keyframes win over these plain declarations. */
a.cl-tab{text-decoration:none;cursor:pointer}
a.cl-tab:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cl.cl-p0 .cl-stage .cl-d,.cl.cl-p0 .cl-stage .cl-card,.cl.cl-p0 .cl-stage .cl-band{opacity:0}
.cl.cl-p0 .cl-stage .cl-d.cl-c0,.cl.cl-p0 .cl-stage .cl-card.cl-c0,.cl.cl-p0 .cl-stage .cl-band.cl-c0{opacity:1}
.cl.cl-p0 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p0 .cl-tabs .cl-tab.cl-c0{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl.cl-p1 .cl-stage .cl-d,.cl.cl-p1 .cl-stage .cl-card,.cl.cl-p1 .cl-stage .cl-band{opacity:0}
.cl.cl-p1 .cl-stage .cl-d.cl-c1,.cl.cl-p1 .cl-stage .cl-card.cl-c1,.cl.cl-p1 .cl-stage .cl-band.cl-c1{opacity:1}
.cl.cl-p1 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p1 .cl-tabs .cl-tab.cl-c1{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl.cl-p2 .cl-stage .cl-d,.cl.cl-p2 .cl-stage .cl-card,.cl.cl-p2 .cl-stage .cl-band{opacity:0}
.cl.cl-p2 .cl-stage .cl-d.cl-c2,.cl.cl-p2 .cl-stage .cl-card.cl-c2,.cl.cl-p2 .cl-stage .cl-band.cl-c2{opacity:1}
.cl.cl-p2 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p2 .cl-tabs .cl-tab.cl-c2{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl.cl-p3 .cl-stage .cl-d,.cl.cl-p3 .cl-stage .cl-card,.cl.cl-p3 .cl-stage .cl-band{opacity:0}
.cl.cl-p3 .cl-stage .cl-d.cl-c3,.cl.cl-p3 .cl-stage .cl-card.cl-c3,.cl.cl-p3 .cl-stage .cl-band.cl-c3{opacity:1}
.cl.cl-p3 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p3 .cl-tabs .cl-tab.cl-c3{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl.cl-p4 .cl-stage .cl-d,.cl.cl-p4 .cl-stage .cl-card,.cl.cl-p4 .cl-stage .cl-band{opacity:0}
.cl.cl-p4 .cl-stage .cl-d.cl-c4,.cl.cl-p4 .cl-stage .cl-card.cl-c4,.cl.cl-p4 .cl-stage .cl-band.cl-c4{opacity:1}
.cl.cl-p4 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p4 .cl-tabs .cl-tab.cl-c4{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}

/* ---- the backdrop band, per department ------------------------------------ */
.cl-bands{left:0;right:0;top:300px;bottom:-40px}
.cl-band{position:absolute;inset:0;display:block;border-radius:6px;
  background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1px);background-size:6px 6px}
/* a pale tint per department, all accents of the royal blue (#2946b6) family at the same
   lightness, so the window, its frame and the dots read the same on each: Revenue royal,
   Marketing periwinkle, Operations sky, Finance steel, Executive Office the original tint */
.cl-band.cl-c0,.cl-mc0{background-color:#dae5fb}
.cl-band.cl-c1,.cl-mc1{background-color:#e5e8fc}
.cl-band.cl-c2,.cl-mc2{background-color:#d9ecf9}
.cl-band.cl-c3,.cl-mc3{background-color:#e0e9f4}
.cl-band.cl-c4,.cl-mc4{background-color:#e4ecfb}

/* ---- the shared window ------------------------------------------------------ */
.cl-win{left:70px;right:70px;top:238px;height:500px;border-radius:8px;background:rgba(255,255,255,.94);
  /* white glass frame, as on the expense report and the plan tour: a soft white ring (14px on
     screen at any --s), a brighter white edge and a faint outer line so it still shows where
     the window sits on the white page above the band */
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 calc(1px / var(--s)) rgba(255,255,255,.3),0 0 0 calc(14px / var(--s)) rgba(255,255,255,.2),
    0 0 0 calc(15px / var(--s)) rgba(255,255,255,.45),0 0 0 calc(16px / var(--s)) rgba(2,37,79,.06),
    0 calc(24px / var(--s)) calc(60px / var(--s)) calc(-34px / var(--s)) rgba(2,37,79,.35)}
.cl-wh2{position:absolute;left:0;right:0;top:0;height:54px;display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--line)}
.cl-mk{display:block;width:22px;height:22px;background:url(../assets/img/manelink-mark.svg) no-repeat center/contain}
.cl-wh2 b{font-size:15px;font-weight:600;color:var(--navy)}
.cl-crumb{font-size:14px;color:var(--mute)}
.cl-me{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--mute)}
.cl-side{position:absolute;left:0;top:54px;bottom:0;width:210px;padding:16px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.cl-side b{margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--navy)}
.cl-side em{padding:7px 10px;border-radius:5px;font-size:13px;font-style:normal;color:var(--mute)}
.cl-side em.on{background:#f1f5fb;color:var(--navy);font-weight:500}
.cl-side small{margin:12px 0 2px 2px;font-size:11.5px;color:var(--t4)}
.cl-av{flex:none;display:block;width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}

/* ---- a department's card ------------------------------------------------------ */
.cl-card{position:absolute;inset:0;display:block}
.cl-main{left:281px;right:71px;top:293px;padding:0 20px}
.cl-mh{display:flex;align-items:center;gap:10px;height:50px}
.cl-mh b{font:600 17px var(--display);color:var(--navy)}
.cl-mh em{padding:3px 9px;border-radius:6px;background:#eef3fb;font-size:12px;font-style:normal;color:var(--mute)}
.cl-table{display:block}
.cl-tr{display:grid;grid-template-columns:28px 1.35fr 1.2fr 1.15fr 1.6fr .9fr;gap:12px;align-items:center;height:40px;border-bottom:1px solid #eef2f7;font-size:13px;color:var(--ink)}
.cl-th{height:34px;font-size:12px;color:var(--t4)}
.cl-n{font-size:12px;color:var(--t4)}
.cl-cell{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-lc{height:18px;overflow:visible}
.cl-load,.cl-got{position:absolute;left:0;top:0;white-space:nowrap}
.cl-load{display:flex;align-items:center;gap:6px;color:var(--t4);opacity:0}

/* the popover: the seat's routine, ticking off */
.cl-pop{left:470px;top:160px;width:340px;padding:14px 16px 6px;border-radius:8px;background:#fff;
  box-shadow:0 26px 50px -24px rgba(2,37,79,.42),0 0 0 1px #e3eaf4}
.cl-ph{display:flex;align-items:center;gap:12px;padding-bottom:12px}
.cl-ph .cl-av{width:40px;height:40px;border-radius:6px}
.cl-ph span{display:flex;flex-direction:column;gap:2px}
.cl-ph b{font-size:15px;font-weight:600;color:var(--navy)}
.cl-ph small{font-size:12.5px;color:var(--mute)}
.cl-step{position:relative;display:flex;align-items:center;height:46px;border-top:1px solid #eef2f7;font-size:14px;color:var(--ink)}
.cl-st{position:relative;margin-left:auto;width:22px;height:22px}
.cl-st i{position:absolute;inset:0;display:block}
.cl-spin{width:14px;height:14px;border-radius:50%;border:2px solid #cfd9e6;border-top-color:var(--blue)}
.cl-st .cl-spin{inset:3px;width:auto;height:auto;opacity:0}
.cl-load .cl-spin{position:static;display:block}
.cl-ok{border-radius:50%;background:var(--green)}
.cl-ok::after{content:"";position:absolute;left:8px;top:5px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* the dotted line to the pill */
.cl-wire{display:block}
.cl-wv{left:830px;top:190px;width:2px;height:150px;background:radial-gradient(circle,#6b7c93 1px,transparent 1.4px) 0 0/2px 7px}
.cl-wh{left:830px;top:190px;width:34px;height:2px;background:radial-gradient(circle,#6b7c93 1px,transparent 1.4px) 0 0/7px 2px}
.cl-pill{left:864px;top:168px;display:flex !important;align-items:center;gap:10px;height:44px;padding:0 10px 0 14px;border-radius:8px;background:#fff;
  box-shadow:0 16px 34px -18px rgba(2,37,79,.4),0 0 0 1px #e3eaf4;font-size:14.5px;font-weight:500;color:var(--ink);white-space:nowrap}
.cl-go{display:block;width:28px;height:28px;margin-left:8px;border-radius:6px;background:#f2f5f9;position:relative}
.cl-go::after{content:"";position:absolute;left:9px;top:10px;width:7px;height:7px;border-right:2px solid var(--mute);border-top:2px solid var(--mute);transform:rotate(45deg)}

@media (max-width:991px){ .cl{--s:.6} }
@media (max-width:767px){ .cl{--s:.36} }
@media (max-width:479px){ .cl{--s:.24} }

/* the header is centred like the tabs and window under it; tighter foot before the dark flow section */
.cl-sh{align-items:center;margin-left:auto;margin-right:auto;margin-bottom:28px}
section.cl-sec{padding-bottom:64px}
.cl-foot{margin-top:8px}

/* ---- phones: the desks as real cards in a swipe row (767 and below) ---------- */
.cl-m{display:none}
.cl-mtabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -24px;padding:2px 24px 4px}
.cl-mt{flex:0 0 auto;padding:9px 16px;border-radius:8px;background:#f3f5f8;font-size:14px;font-weight:500;color:var(--t4);text-decoration:none}
.cl-mt.on{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl-mt:hover{text-decoration:none;color:var(--navy)}
.cl-mt:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.cl-mrail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:16px -24px 0;padding:0 24px 8px;scroll-padding:0 24px}
.cl-mc{flex:0 0 86%;scroll-snap-align:center;display:flex;flex-direction:column;gap:14px;padding:18px 16px 16px;border-radius:8px;
  background-image:radial-gradient(rgba(255,255,255,.4) 1px,transparent 1px);background-size:6px 6px}
/* phone cards: the per-department tints are set with the bands above */
.cl-md{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.cl-md b{display:block;margin-bottom:4px;font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.cl-mpop{padding:14px 14px 4px;border-radius:8px;background:#fff;box-shadow:0 12px 30px -18px rgba(2,37,79,.35)}
.cl-mpop .cl-ph{padding-bottom:10px}
.cl-mpop .cl-ph .cl-av{width:36px;height:36px}
.cl-mpop .cl-ph span{min-width:0}
.cl-mpop .cl-ph small{white-space:normal}
.cl-ms{display:flex;align-items:center;gap:10px;min-height:42px;border-top:1px solid #eef2f7;font-size:14px;color:var(--ink)}
.cl-mok{position:relative;flex:0 0 auto;margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--green)}
.cl-mok::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.cl-mpill{display:flex;align-items:center;gap:10px;align-self:flex-start;max-width:100%;padding:10px 14px;border-radius:8px;background:#fff;font-size:13.5px;font-weight:500;color:var(--navy)}
.cl-mpill img{flex:0 0 auto}
@media (max-width:767px){
  .cl{display:none}
  .cl-m{display:block}
  .cl-sh{margin-bottom:20px}
}
@media (max-width:479px){
  .cl-mtabs{margin:0 -16px;padding:2px 16px 4px}
  .cl-mrail{margin:16px -16px 0;padding:0 16px 8px;scroll-padding:0 16px}
  .cl-mc{flex-basis:88%}
}

/* css/hero.css */
/* ==========================================================================
   HERO live layer — home page. See, direct, approve, acted out over the
   Office Overview screenshot.

   A 1130x587 stage in the screenshot's own CSS pixels (the PNG is 2260x1174 at
   2x), scaled to the shot's rendered width by --s (script at the foot of
   index.html). Every piece sits over a measured spot in the image:
     charts   the two plot areas, masked so the lines draw in once on load
     counts   the red Inbox badge in the sidebar and the Inbox header count
     live     a pulsing dot on the Revenue Lead's avatar (the seat is Running)
     row      the one Inbox row, covered by a live item that is approved and cleared
     toast    the confirmation, in the empty space under the workforce cards
   Resting state (motion off, or before the loop starts) is the pending item with
   its Approve link: the moment the headline is about. Motion: HERO in motion.css.
   Shown only with JS (the stage needs --s); with it off the plain image shows.
   Desktop only: phones show the portrait screenshot and keep the entrance alone.
   ========================================================================== */

.hs{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
.js .hs{display:block}
.hs-stage{position:absolute;left:0;top:0;width:1130px;height:587px;transform:scale(var(--s,1));transform-origin:0 0;
  font-family:var(--display);color:#0b1220}
.hs-stage>*{position:absolute;display:block}

/* chart masks: card-white panels that slide off the plot areas */
.hs-mask{background:#fff;transform:scaleX(0);transform-origin:right center}
.hs-m1{left:268px;top:252px;width:384px;height:60px}
.hs-m2{left:719px;top:258px;width:384px;height:54px}

/* the two Inbox counts, drawn over the image's own digits */
.hs-cnt{text-align:center}
.hs-cnt b{position:absolute;left:0;right:0;top:0;display:block;font-weight:inherit}   /* the patch stays, covering the image digit; the digits fade in turn */
.hs-n2,.hs-n1{opacity:0}
.hs-c1{left:181px;top:165px;width:14px;height:20px;background:#fff;font-size:12.5px;line-height:20px;font-weight:500;color:#e5484d}
.hs-c2{left:266px;top:343px;width:12px;height:20px;background:#fafafa;font-size:14px;line-height:20px;color:#46556b}

/* the greeting's subline, which clears with the Inbox */
.hs-sub{left:224px;top:87px;width:150px;height:22px;background:#fafafa;font-size:13px;line-height:22px;color:#3d4a5c;white-space:nowrap}
.hs-sub b{position:absolute;left:2px;top:0;font-weight:400}
.hs-q2,.hs-q1,.hs-q0{opacity:0}

/* Revenue Lead is Running: a live dot on the avatar */
.hs-live{left:557px;top:480px;width:9px;height:9px;border-radius:50%;background:#1f9d6b;box-shadow:0 0 0 1.5px #fff}

/* the Inbox row: a white cover over the image's row, three states stacked in it */
.hs-row{left:227px;top:371.5px;width:888px;height:32px;border-radius:5px;background:#fff}
.hs-pend,.hs-done,.hs-empty{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 11px 0 10px;font-size:14px;white-space:nowrap}
.hs-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;box-shadow:0 0 0 2px #f59e0b inset}
.hs-tx{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.hs-k{color:#46556b}
.hs-go{margin-left:6px;padding:2px 6px;margin-right:-6px;border-radius:5px;font-weight:500;color:#2946b6}
.hs-done img{flex:0 0 auto}
.hs-done .hs-tx{color:#1a7f57}
.hs-empty{color:#6b778a}
.hs-done,.hs-empty,.hs-p2,.hs-p3{opacity:0}

/* the confirmation, bottom right like the app's own toasts */
.hs-toast{right:15px;top:516px;display:flex !important;align-items:center;gap:10px;padding:9px 16px 9px 12px;border:1px solid #e4ecf5;border-radius:8px;background:#fff;
  box-shadow:0 10px 28px rgba(2,37,79,.12);opacity:0}
.hs-toast b{display:block;font-size:13px;font-weight:600;color:#0b1220}
.hs-toast small{display:block;font-size:12px;color:#46556b}

/* the cursor: its tip sits on the Approve link */
.hs-cur{left:1072px;top:385px;width:22px;height:22px;opacity:0}

@media (max-width:767px){ .js .hs{display:none} }

/* ---- the phone layer: the same story over the portrait screenshot (340x876, 2x PNG).
   Measured from the image: the subline, the Inbox count and row, the two plot areas and
   the Revenue Lead's avatar (Running). The toast rises over the last workforce card, as
   a phone's own toasts do, and a tap ring on Approve stands in for the cursor. The
   inner pieces reuse the desktop classes, so they share its keyframes and timing. */
.hsm{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none}
@media (max-width:767px){ .js .hsm{display:block} }
.hsm-stage{position:absolute;left:0;top:0;width:340px;height:876px;transform:scale(var(--sm,1));transform-origin:0 0;
  font-family:var(--display);color:#0b1220}
.hsm-stage>*{position:absolute;display:block}
.hsm-stage .hsm-m1{left:47px;top:282px;width:263px;height:36px}
.hsm-stage .hsm-m2{left:47px;top:491px;width:263px;height:33px}
.hsm-stage .hsm-sub{left:13px;top:90px;width:132px;height:18px;line-height:18px}
.hsm-stage .hsm-c{left:56px;top:566px;width:10px;height:20px;background:#fafafa;font-size:14px;line-height:20px;color:#46556b}
.hsm-stage .hsm-live{left:53px;top:790px}
.hsm-row{left:14px;top:592px;width:312px;height:34px;box-sizing:border-box;border:1px solid #e4ecf5;border-radius:6px;background:#fff}   /* the whole row, border too: the image's two-line item reaches its bottom edge */
.hsm-row .hs-pend,.hsm-row .hs-done,.hsm-row .hs-empty{gap:8px;padding:0 10px;font-size:13px}
.hsm-row .hs-go{margin-left:4px}
.hsm-tap{left:268px;top:595px;width:28px;height:28px;border-radius:50%;border:2px solid rgba(41,70,182,.55);background:rgba(41,70,182,.12);opacity:0}
/* the phone's toast: a small navy pill, centred near the foot, clearly above the app
   rather than another card in it; it rises once the Inbox has emptied */
.hsm-stage .hsm-toast{left:0;right:0;top:816px;width:max-content;margin:0 auto;gap:8px;padding:8px 16px 8px 9px;
  border:0;border-radius:999px;background:var(--navy);box-shadow:0 12px 28px -6px rgba(2,37,79,.45)}
.hsm-stage .hsm-toast b{font-size:13px;font-weight:600;color:#fff}

/* ==========================================================================
   HOME HERO BACKDROP (index.html, body.home), after Zip's hero: a deep royal blue
   under the nav and headline that fades through periwinkle to white behind the
   lower half of the product shot. The nav sits on the blue (transparent, white
   links and logo) until the page scrolls, then returns to the usual white bar.
   JS only (.js): with it off the bar never learns it scrolled, so it stays white.
   ========================================================================== */
/* the nav over the blue lives in pages.css (.bluetop), shared with the pricing page */

.home .hero{padding-top:120px;
  background:radial-gradient(90% 55% at 0 0,rgba(8,18,70,.55),transparent 70%),
             radial-gradient(70% 45% at 100% 30%,rgba(96,131,226,.35),transparent 70%),
             linear-gradient(180deg,#152a84 0%,#1e39a3 22%,#2946b6 40%,#4a68d2 54%,#89a3ec 66%,#c4d2f7 78%,#eef2fd 89%,#fff 100%)}
.home .hero h1{color:#fff}
.home .hero .lead{color:rgba(255,255,255,.86)}
.home .hero .btn.p{background:#fff;color:var(--btn)}
.home .hero .btn.p:hover{background:#eef2fd}
.home .hero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.home .hero .btn.g:hover{background:rgba(255,255,255,.12)}
.home .hero .btn:focus-visible{outline-color:#fff}
@media (max-width:767px){ .home .hero{padding-top:104px} }

/* header row after Zip's hero: a one-line headline in a lighter weight on the left,
   the lead and both buttons stacked on the right. Stacks, left-aligned, below 991. */
.home .hero .hh{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px 56px;width:100%;text-align:left}
.home .hero .hh h1{max-width:none;margin:0;white-space:nowrap;font-size:clamp(56px,6vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.home .hero .hh-side{display:flex;flex-direction:column;gap:22px;min-width:0;max-width:520px;justify-self:end}
.home .hero .hh .lead{max-width:none;margin:0;font-size:19px;line-height:1.45;text-wrap:pretty}
.home .hero .hh .ctas{justify-content:flex-start;margin:0;gap:14px}
.home .hero .hh .btn{height:52px;padding:0 26px;font-size:16px}
.home .hero .shot{margin-top:56px}
@media (max-width:991px){
  .home .hero .hh{grid-template-columns:minmax(0,1fr);gap:20px}
  .home .hero .hh-side{justify-self:start;max-width:560px}
  .home .hero .shot{margin-top:40px}
}
@media (max-width:767px){
  .home .hero .hh h1{white-space:normal;font-size:44px}
  .home .hero .hh .lead{font-size:17px}
}

/* the product shot on the blue: no light-blue glow, a glass frame instead. The frame is
   drawn with box-shadow rings (a pale translucent band with a bright hairline at each
   edge), so the shot's box and its fitted live layer do not move. */
.home .hero .shot{border-color:rgba(255,255,255,.55);
  animation:shot-in 1s cubic-bezier(.2,.8,.2,1) .1s both;
  box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 0 14px rgba(255,255,255,.14),0 0 0 15px rgba(255,255,255,.34),0 34px 70px -28px rgba(8,18,70,.4)}
@media (max-width:767px){
  .home .hero .shot{animation-name:shot-rise;
    box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 0 8px rgba(255,255,255,.14),0 0 0 9px rgba(255,255,255,.34),0 24px 50px -24px rgba(8,18,70,.4)}
}

/* css/stack.css */
/* ============================================================================
   ONE STACK — home page, under "Your standards" (after the Relevance AI home page's
   "one stack" section, in the site's own art and words; no other product is named).

   Left, an isometric stack: eight thin glass planes (hairline edges) build up from the bottom when the section
   arrives, and a lit glass plane floats above them carrying the icon of the capability that
   is lit. Right, the nine capabilities of the Office; each is lit in turn on a 19.8s
   loop (2.2s each), with the Office page it lives on at the right.

   Builder-safe: classes only, no keyframes (they are the STACK block in motion.css),
   every picture a real file (assets/art/stk-*.svg, assets/icons/stk-*.svg). The art
   is positioned in % of a 380x527 box, so it scales with no script. With JS off, or
   motion reduced, it is a finished picture: the whole stack, the first row lit.
   ========================================================================== */

.stk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}

/* ---- the art: a 380x527 box; every position below is a % of it -------------- */
.stk-art{position:relative;width:100%;max-width:400px;aspect-ratio:380/527;margin:0 auto}
.stk-art>*{position:absolute;display:block}
/* the glass planes, 286x158 each, 26 apart: L1 at the foot to L8 at the top */
.stk-g{left:12.37%;width:75.26%;height:29.98%;opacity:.95;filter:drop-shadow(0 6px 10px rgba(41,70,182,.06))}
.stk-g1{top:70.02%} .stk-g2{top:65.09%} .stk-g3{top:60.15%} .stk-g4{top:55.22%}
.stk-g5{top:50.28%} .stk-g6{top:45.35%} .stk-g7{top:40.42%} .stk-g8{top:35.48%}
/* the soft royal light between the floating slab and the stack */
.stk-glow{left:10.5%;top:29.79%;width:79%;height:26.57%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(65,105,225,.08),rgba(65,105,225,.025) 55%,transparent 100%)}
/* the floating royal slab and its icons move as one */
.stk-lift{left:12.37%;top:0.76%;width:75.26%;height:29.98%}
.stk-top{position:absolute;inset:0;display:block;width:100%;height:100%;filter:drop-shadow(0 14px 20px rgba(41,70,182,.18))}
/* the shooting signal: a canvas over the whole art, drawn by the page script */
.stk-art>.stk-sig{inset:0;width:100%;height:100%;pointer-events:none}
/* an icon lies flat on the top face: turned 45deg, then squashed to the 2:1 face */
.stk-i{position:absolute;left:50%;top:45.57%;display:block;width:19%;aspect-ratio:1;opacity:0;
  transform:translate(-50%,-50%) scaleY(.5) rotate(45deg)}
.stk-i1{opacity:1}

/* ---- the list: a white card, as the site's cards (.pc, .step) --------------------- */
.stk-list{margin:0;padding:8px;list-style:none;border:1px solid var(--line);border-radius:10px;background:#fff;
  box-shadow:0 24px 48px -32px rgba(2,37,79,.22)}
.stk-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 16px;border-radius:6px;
  border-bottom:1px solid var(--line);font:600 15px/1.35 var(--web);color:var(--navy)}
.stk-row:last-child{border-bottom:0}
.stk-row small{flex:0 0 auto;font:400 13.5px var(--web);color:var(--t4)}
/* lit: a pale royal pill with royal text (the first row when nothing moves) */
.stk-r1{background:#eef2fc;box-shadow:inset 0 0 0 1px rgba(41,70,182,.12);color:var(--btn)}

@media (max-width:991px){
  .stk{grid-template-columns:minmax(0,1fr);gap:40px}
  .stk-art{max-width:320px}
}
@media (max-width:479px){
  .stk-row{padding:12px 12px;font-size:14px}
  .stk-row small{font-size:12.5px}
}

/* css/state.css */
/* Reveal behaviour and the three Webflow breakpoints (991 / 767 / 479). */
/* reveal: visible by default, so the page is complete with JavaScript off.
   The script adds .js to <html>, and only then does anything start hidden. */
.rv{opacity:1;transform:none}
.js .rv{opacity:0;transform:translateY(14px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}.btn:hover{transform:none}}
/* responsive */
@media (max-width:991px){.nav .wrap{padding:0 24px}.final .wrap{grid-template-columns:1fr 1fr;row-gap:40px}.fn-main{grid-column:1/-1}.nav nav{display:none}.nav .wrap{grid-template-columns:1fr auto}.strip,.steps,.nums,.pillars,.pages,.agents,.plans{grid-template-columns:1fr 1fr}.control{grid-template-columns:1fr}.ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.ft-band{grid-template-columns:1fr;gap:24px} footer .ft-band{grid-template-columns:1fr;gap:20px} footer .ft-news{flex-direction:column;align-items:flex-start;gap:12px} footer .ft-band .ft-end,footer .ft-band .ft-news{justify-self:start}.shot{margin-bottom:-80px}.proof{padding-top:120px}}
@media (max-width:767px){.final{padding:72px 0}.final .wrap{grid-template-columns:1fr;row-gap:32px}.shot-lg{display:none}.shot-sm{display:block}h1{font-size:36px}h2{font-size:32px}.lead{font-size:17px}.strip,.steps,.nums,.pillars,.pages,.agents,.plans{grid-template-columns:1fr}.ft-cols{grid-template-columns:minmax(0,1fr)}section.s{padding:64px 0}.hero{padding-top:32px}.btn.plans-hide{display:none}.nav .wrap{gap:16px}}
@media (max-width:479px){footer a{width:auto;overflow-wrap:anywhere}.menu-panel{padding:0 16px 16px}.wrap{padding:0 16px}.nav .wrap{gap:12px;padding:0 16px}.logo{width:153px;height:37px}}

/* css/motion.css */
/* ============================================================================
   MOTION — the one file that does NOT go through the Webflow builder.

   Everything here uses @keyframes, which data_whtml_builder rejects. At transfer
   time this file's contents go into Webflow's custom code (Site settings or the
   page's own head), which needs a paid Workspace or an active Site plan. Since
   publishing to manelink.ai needs a paid Site plan anyway, that costs nothing.

   Every other css/ file stays builder-safe. Keep it that way: if a rule needs a
   keyframe it belongs in here, not there.

   Nothing in this file is load-bearing. With it removed the page is complete and
   static, which is the standard we keep whether or not the platform forces it.
   ========================================================================== */

/* ---- HERO: the screenshot settles in, then the Office acts out the headline ----
   Once:  the shot rises and tilts flat (1s), a blue glow comes up under it,
          the two chart lines draw in left to right.
   Loop (18s, from 2.8s): three items queue in the Inbox. For each, the cursor
          comes in and clicks Approve, the row turns green and the counts step
          down (3, 2, 1); after the third the Inbox empties and a toast confirms. 0% of every loop keyframe
          is the resting frame in hero.css, so the start and the delay are seamless. */
@keyframes shot-in   { from{opacity:0;transform:perspective(1800px) rotateX(12deg) translateY(48px) scale(.97)} to{opacity:1;transform:none} }
@keyframes shot-glow { from{box-shadow:var(--shadow)} to{box-shadow:var(--shadow),0 40px 90px -30px rgba(41,70,182,.38)} }
@keyframes hs-draw   { from{transform:scaleX(1)} to{transform:scaleX(0)} }
@keyframes hs-p1    { 0%,15.6%{opacity:1;transform:none} 16.7%,96.7%{opacity:0;transform:translateY(6px)} 100%{opacity:1;transform:none} }
@keyframes hs-p2    { 0%,27.8%{opacity:0;transform:translateY(6px)} 30%,43.3%{opacity:1;transform:none} 44.4%,100%{opacity:0;transform:translateY(6px)} }
@keyframes hs-p3    { 0%,55.6%{opacity:0;transform:translateY(6px)} 57.8%,71.1%{opacity:1;transform:none} 72.2%,100%{opacity:0;transform:translateY(6px)} }
@keyframes hs-done  { 0%,16%{opacity:0} 17.2%,24.4%{opacity:1} 25.6%,44%{opacity:0} 45%,52.2%{opacity:1} 53.3%,71.7%{opacity:0} 72.8%,80%{opacity:1} 81.1%,100%{opacity:0} }
@keyframes hs-empty { 0%,82%{opacity:0} 84%,95%{opacity:1} 97%,100%{opacity:0} }
@keyframes hs-n3    { 0%,15.6%{opacity:1} 16.7%,96.7%{opacity:0} 100%{opacity:1} }
@keyframes hs-n2    { 0%,15.6%{opacity:0} 16.7%,43.3%{opacity:1} 44.4%,100%{opacity:0} }
@keyframes hs-n1    { 0%,43.3%{opacity:0} 44.4%,71.1%{opacity:1} 72.2%,100%{opacity:0} }
@keyframes hs-n0    { 0%,71.1%{opacity:0} 72.2%,96.7%{opacity:1} 100%{opacity:0} }
@keyframes hs-cur   { 0%,5%{opacity:0;transform:translate(150px,130px)} 6.7%{opacity:1;transform:translate(130px,112px)} 14.4%{opacity:1;transform:none}
                      15.6%{transform:scale(.82)} 16.7%{opacity:1;transform:none} 20%{opacity:0;transform:translate(24px,40px)}
                      20.1%,32.7%{opacity:0;transform:translate(150px,130px)} 34.4%{opacity:1;transform:translate(130px,112px)} 42.2%{opacity:1;transform:none}
                      43.3%{transform:scale(.82)} 44.4%{opacity:1;transform:none} 47.8%{opacity:0;transform:translate(24px,40px)}
                      47.9%,60.5%{opacity:0;transform:translate(150px,130px)} 62.2%{opacity:1;transform:translate(130px,112px)} 70%{opacity:1;transform:none}
                      71.1%{transform:scale(.82)} 72.2%{opacity:1;transform:none} 75.6%,100%{opacity:0;transform:translate(24px,40px)} }
@keyframes hs-toast { 0%,73%{opacity:0;transform:translateY(10px)} 76%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-4px)} }
@keyframes hs-live   { from{box-shadow:0 0 0 1.5px #fff,0 0 0 1.5px rgba(31,157,107,.55)} to{box-shadow:0 0 0 1.5px #fff,0 0 0 9px rgba(31,157,107,0)} }
.hero .shot,.shot-sec .shot{animation:shot-in 1s cubic-bezier(.2,.8,.2,1) .1s both,shot-glow 1.4s ease .7s both}
/* phones: the portrait shot is tall, so the tilt would push its near edge past the
   screen for a moment and flash a sideways scrollbar. A plain rise instead. */
@keyframes shot-rise { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:none} }
@media (max-width:767px){ .hero .shot,.shot-sec .shot{animation-name:shot-rise,shot-glow} }
.js .hs-mask{animation:hs-draw 1.6s cubic-bezier(.45,0,.2,1) 1s both}
.js .hs-m2{animation-delay:1.25s}
.js .hs-p1{animation:hs-p1 18s ease 2.8s infinite both}
.js .hs-p2{animation:hs-p2 18s ease 2.8s infinite both}
.js .hs-p3{animation:hs-p3 18s ease 2.8s infinite both}
.js .hs-done{animation:hs-done 18s ease 2.8s infinite both}
.js .hs-empty{animation:hs-empty 18s ease 2.8s infinite both}
.js .hs-n3,.js .hs-q3{animation:hs-n3 18s ease 2.8s infinite both}
.js .hs-n2,.js .hs-q2{animation:hs-n2 18s ease 2.8s infinite both}
.js .hs-n1,.js .hs-q1{animation:hs-n1 18s ease 2.8s infinite both}
.js .hs-q0{animation:hs-n0 18s ease 2.8s infinite both}
.js .hs-cur{animation:hs-cur 18s cubic-bezier(.45,0,.25,1) 2.8s infinite both}
.js .hs-toast{animation:hs-toast 18s ease 2.8s infinite both}
.js .hs-live{animation:hs-live 1.8s ease-out infinite}
/* phones: the tap ring on Approve, at the three clicks of the loop (15.6%, 43.3%, 71.1%) */
@keyframes hsm-tap { 0%,14.4%{opacity:0;transform:scale(.4)} 15.6%{opacity:1;transform:scale(.8)} 18%{opacity:0;transform:scale(1.6)}
                     18.1%,42.2%{opacity:0;transform:scale(.4)} 43.3%{opacity:1;transform:scale(.8)} 45.7%{opacity:0;transform:scale(1.6)}
                     45.8%,70%{opacity:0;transform:scale(.4)} 71.1%{opacity:1;transform:scale(.8)} 73.5%,100%{opacity:0;transform:scale(1.6)} }
.js .hsm-tap{animation:hsm-tap 18s ease-out 2.8s infinite both}
.js .hsm-m2{animation-delay:1.25s}
/* phones: the toast waits for the empty Inbox (84%), so the two confirmations never overlap */
@keyframes hsm-toast { 0%,84%{opacity:0;transform:translateY(12px)} 86.5%,93%{opacity:1;transform:none} 95.5%,100%{opacity:0;transform:translateY(6px)} }
.js .hsm-toast{animation:hsm-toast 18s ease 2.8s infinite both}

/* ---- TOUR (product page): five Office pages take turns, 5s each ----------------
   One 25s timeline. Page i is on screen for [5i, 5i+5); the negative delays put
   each element at its place on that timeline from the first frame, so page 0
   (Inbox, the resting state in office-tour.css) is the one showing at the start.
   Hovering the tour pauses it, so a page can be read. */
@keyframes tr-pane { 0%{opacity:0;visibility:visible;transform:translateY(8px)} 2.4%,18%{opacity:1;visibility:visible;transform:none}
                     20%,100%{opacity:0;visibility:visible;transform:translateY(-4px)} }
@keyframes tr-cap  { 0%{opacity:0;visibility:visible} 2.4%,18%{opacity:1;visibility:visible} 20%,100%{opacity:0;visibility:visible} }
@keyframes tr-tab  { 0%,19%{background-color:#eaf0f8;color:var(--navy)} 20%,100%{background-color:var(--tr-off);color:var(--tr-offc)} }
.tr.go .tr-p{animation:tr-pane 25s ease infinite both}
.tr.go .tr-c{animation:tr-cap 25s ease infinite both}
.tr.go .tr-t{animation:tr-tab 25s ease infinite both}
.tr.go .tr-p1,.tr.go .tr-c1,.tr.go .tr-t1{animation-delay:-20s}
.tr.go .tr-p2,.tr.go .tr-c2,.tr.go .tr-t2{animation-delay:-15s}
.tr.go .tr-p3,.tr.go .tr-c3,.tr.go .tr-t3{animation-delay:-10s}
.tr.go .tr-p4,.tr.go .tr-c4,.tr.go .tr-t4{animation-delay:-5s}
/* each page's action, one second into its turn: before fades, after lands, a
   toast confirms; the bar on Progress grows. Same 25s timeline and delays. */
@keyframes tr-sa    { 0%,7%{opacity:1} 8.5%,19.5%{opacity:0} 20%,100%{opacity:1} }
@keyframes tr-sb    { 0%,7%{opacity:0;transform:scale(.92)} 8.5%,19%{opacity:1;transform:none} 20%,100%{opacity:0} }
@keyframes tr-toast { 0%,8.5%{opacity:0;transform:translateY(10px)} 10.5%,17%{opacity:1;transform:none} 18.5%,100%{opacity:0;transform:translateY(-4px)} }
@keyframes tr-grow  { 0%,7%{width:72%} 10%,19.5%{width:84%} 20%,100%{width:72%} }
.tr.go .tr-sa{animation:tr-sa 25s ease infinite both}
.tr.go .tr-sb{animation:tr-sb 25s ease infinite both}
.tr.go .tr-toast{animation:tr-toast 25s cubic-bezier(.2,.7,.2,1) infinite both}
.tr.go .tr-grow{animation:tr-grow 25s cubic-bezier(.3,.7,.2,1) infinite both}
.tr.go .tr-p1 .tr-sa,.tr.go .tr-p1 .tr-sb,.tr.go .tr-p1 .tr-toast,.tr.go .tr-p1 .tr-grow{animation-delay:-20s}
.tr.go .tr-p2 .tr-sa,.tr.go .tr-p2 .tr-sb,.tr.go .tr-p2 .tr-toast,.tr.go .tr-p2 .tr-grow{animation-delay:-15s}
.tr.go .tr-p3 .tr-sa,.tr.go .tr-p3 .tr-sb,.tr.go .tr-p3 .tr-toast,.tr.go .tr-p3 .tr-grow{animation-delay:-10s}
.tr.go .tr-p4 .tr-sa,.tr.go .tr-p4 .tr-sb,.tr.go .tr-p4 .tr-toast,.tr.go .tr-p4 .tr-grow{animation-delay:-5s}
.tr.go:hover .tr-p,.tr.go:hover .tr-c,.tr.go:hover .tr-t,.tr.go:hover .tr-sa,.tr.go:hover .tr-sb,.tr.go:hover .tr-toast,.tr.go:hover .tr-grow{animation-play-state:paused}

/* ---- CONNECTIONS (pricing page): the orb behind the name. A blue-to-purple lava
   ring flows continuously round the white middle.
   The name does not move. */
/* the lava: two connected bands, each turning and changing shape on its own rhythm */
@keyframes cn-lava1 { 0%{transform:rotate(0deg);border-radius:62% 38% 54% 46% / 44% 58% 42% 56%}
                      33%{border-radius:40% 60% 64% 36% / 58% 40% 60% 42%}
                      66%{border-radius:56% 44% 38% 62% / 38% 62% 44% 56%}
                      100%{transform:rotate(360deg);border-radius:62% 38% 54% 46% / 44% 58% 42% 56%} }
@keyframes cn-lava2 { 0%{transform:rotate(0deg) scale(1);border-radius:40% 60% 46% 54% / 60% 40% 58% 42%}
                      50%{transform:rotate(-180deg) scale(1.08);border-radius:62% 38% 60% 40% / 40% 62% 38% 60%}
                      100%{transform:rotate(-360deg) scale(1);border-radius:40% 60% 46% 54% / 60% 40% 58% 42%} }
.cn-l1{animation:cn-lava1 18s ease-in-out infinite}
.cn-l2{animation:cn-lava2 23s ease-in-out infinite}
@keyframes cn-mote { 0%{opacity:0;transform:translate(0,14px) scale(.5)} 20%{opacity:.95} 70%{opacity:.8}
  100%{opacity:0;transform:translate(10px,-46px) scale(1.1)} }
.cn-pt{animation-name:cn-mote;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.cn-pt:nth-of-type(even){animation-name:cn-mote2}
@keyframes cn-mote2 { 0%{opacity:0;transform:translate(0,12px) scale(.5)} 25%{opacity:.9} 70%{opacity:.75}
  100%{opacity:0;transform:translate(-12px,-40px) scale(1)} }

/* ---- approval flow: the dashes march toward each node ------------------- */
/* A dashed border cannot animate. Every connector is a striped background, so
   shifting background-position slides the dashes along the line, always in the
   direction the work travels: down out of the tools, inward to the engine, down
   through the gate. */
@keyframes dash-down{ to{background-position:0 6px} }
@keyframes dash-right{ to{background-position:6px 0} }

.br-up,.br-dn,.br-c,.dg-stem,.dg-mid::before,.dg-mid::after{animation:dash-down 600ms linear infinite}
.br-h,.dg-wire{animation:dash-right 600ms linear infinite}
/* below the gate the dashes crawl: nothing moves quickly past your approval
   (set in full with the draw-in, further down) */

/* the gate breathes, so the eye lands on the one node that can stop the flow */
@keyframes gate-breathe{
  0%,100%{box-shadow:0 0 0 7px rgba(41,70,182,.09); border-color:rgba(166,179,229,.5)}
  50%    {box-shadow:0 0 0 14px rgba(41,70,182,.15); border-color:rgba(190,220,255,.8)}
}
.dg-gate{animation:gate-breathe 3.6s ease-in-out infinite}

/* the empty slots pulse gently, because they are an invitation */
@keyframes slot-pulse{
  0%,100%{border-color:rgba(255,255,255,.18)}
  50%    {border-color:rgba(255,255,255,.34)}
}
.dg-ghost,.dg-add{animation:slot-pulse 4.2s ease-in-out infinite}
.dg-acts .dg-ghost:last-child{animation-delay:1.4s}
.dg-add{animation-delay:.7s}

@media (max-width:767px){
  .dg-wire{animation-name:dash-down}
}


/* ---- tool boxes turn to show what each tool may do ---------------------- */
/* Staggered, so the row ripples rather than flipping as a block. */
@keyframes fx-front{ 0%,28%{transform:rotateX(0deg)} 40%,70%{transform:rotateX(-180deg)} 82%,100%{transform:rotateX(0deg)} }
@keyframes fx-back { 0%,28%{transform:rotateX(180deg)} 40%,70%{transform:rotateX(0deg)} 82%,100%{transform:rotateX(180deg)} }
/* Stripe's flip curve, cubic-bezier(.9,0,.1,1): it holds, then snaps over */
.fx-f{animation:fx-front 12s cubic-bezier(.9,0,.1,1) infinite}
.fx-b{animation:fx-back  12s cubic-bezier(.9,0,.1,1) infinite}
.dg-group>.dg-flip:nth-child(1) .fx-f,.dg-group>.dg-flip:nth-child(1) .fx-b{animation-delay:0s}
.dg-group>.dg-flip:nth-child(2) .fx-f,.dg-group>.dg-flip:nth-child(2) .fx-b{animation-delay:.7s}
.dg-group>.dg-flip:nth-child(4) .fx-f,.dg-group>.dg-flip:nth-child(4) .fx-b{animation-delay:1.4s}
.dg-group>.dg-flip:nth-child(5) .fx-f,.dg-group>.dg-flip:nth-child(5) .fx-b{animation-delay:2.1s}

/* ---- the ribbon on the seats card --------------------------------------- */
/* The twist. Both halves pivot on the waist, in opposite phase: as the left
   lobe collapses the right one opens, which is what the eye reads as a ribbon
   turning over. A shared period keeps the pinch in step; the skew adds the
   tilt a turning band would have. */
/* A SHEAR, not a scale. skewY leaves the pivot column untouched — same position
   and same thickness — so the two halves stay welded at the waist. Counter-phase
   scaleY did not: it met the seam at 0.56 on one side and 1.12 on the other and
   left a visible notch. Any scaleY here is applied equally to both halves. */
@keyframes rib-twist-l{ 0%,100%{transform:skewY(-3.4deg) scaleY(1.12)}
                        50%    {transform:skewY(3.4deg)  scaleY(.88)} }
@keyframes rib-twist-r{ 0%,100%{transform:skewY(3.4deg)  scaleY(1.12)}
                        50%    {transform:skewY(-3.4deg) scaleY(.88)} }
@keyframes rib-lit    { from{transform:translate3d(-14%,4%,0) scale(.94)}
                        to  {transform:translate3d(14%,-4%,0) scale(1.08)} }
@keyframes rib-wave  { from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes rib-wave2 { from{transform:translate3d(0,0,0)} to{transform:translate3d(-62.5%,0,0)} }
.rib-w  {animation:rib-wave 16s linear infinite}
.rib-w2 {animation:rib-wave2 26s linear infinite}
.rib-l  {animation:rib-twist-l 24s ease-in-out infinite}
.rib-r  {animation:rib-twist-r 24s ease-in-out infinite}
.rib-lit{animation:rib-lit 17s ease-in-out infinite alternate}

/* ---- the sun on the cost card -------------------------------------------- */
/* The two structures move differently, because they are different things. The
   rim is a ring of points with no angular feature, so it can turn — that is the
   orbit. The flames are rays, and a spinning starburst reads as a wheel, so
   they travel outward instead: expand and fade, returning to the rim. */
@keyframes orb-cw   { to{transform:rotate(360deg)} }
@keyframes orb-ccw  { to{transform:rotate(-360deg)} }
/* never reaches 0: there is only one flame layer, so a keyframe that fades out
   completely blinks the prominences off once a cycle instead of pulsing them */
@keyframes orb-flare{ 0%,100%{transform:scale(.955);opacity:.44}
                      48%    {transform:scale(1.075);opacity:1} }
@keyframes orb-breathe{ 0%,100%{transform:scale(1);opacity:.82} 50%{transform:scale(1.06);opacity:1} }
.orb-1{animation:orb-cw  150s linear infinite}
.orb-3{animation:orb-ccw  96s linear infinite}
.orb-2{animation:orb-flare 7s ease-in-out infinite}
.orb-h{animation:orb-breathe 9s ease-in-out infinite}

/* ---- the globe on the journey card -------------------------------------- */
/* The dots are a fixed image, so nothing here rotates them. What travels is the
   light across them, west to east, the way the surface of a turning globe moves. */
/* -25%..125% keeps the band on the disc: a wider travel spends most of the
   cycle lighting empty space beside the globe */
@keyframes glb-sweep  { from{background-position:-25% 0} to{background-position:125% 0} }
@keyframes glb-breathe{ 0%,100%{transform:scale(1);opacity:.84} 50%{transform:scale(1.05);opacity:1} }
.glb-lit {animation:glb-sweep 13s linear infinite}
.glb-haze{animation:glb-breathe 11s ease-in-out infinite}

/* ---- PLAN TOUR (pricing page) -------------------------------------------- */
/* Stripe's Billing hero runs on a script timeline; this is the same idea as one
   11s loop of keyframes on a fixed 1024x522 stage, so every value is an exact
   pixel and nothing is measured at runtime. Three frames:
     A  0-26%   the pricing page; One workspace is picked
     B 26-51%   the two outer cards morph into the Office it installs
     C 51-90%   the first approval arrives, is approved, and leaves the Inbox
   then everything fades and the loop starts again from A. Staggers are plain
   animation delays: every element shares the 11s period (sped up from 18s, 2026-09-22), so a delay only shifts
   its own phase and the frames stay in step. */
@keyframes pt-a-in { 0%{opacity:0;transform:translateY(34px)} 5%,24%{opacity:1;transform:none}
                     26.5%,100%{opacity:0;transform:translateY(-6px)} }
@keyframes pt-pick { 0%,18%{transform:none;background:#2946b6} 19.5%{transform:scale(.95);background:#1e39a3}
                     21%,100%{transform:none;background:#2946b6} }
@keyframes pt-nav  { 0%,24%{opacity:1} 26.5%,95%{opacity:0} 100%{opacity:1} }
@keyframes pt-ua   { 0%,25%{opacity:1} 27%,95%{opacity:0} 97%,100%{opacity:1} }
@keyframes pt-ub   { 0%,25%{opacity:0} 27%,51%{opacity:1} 53%,100%{opacity:0} }
@keyframes pt-uc   { 0%,51%{opacity:0} 53%,93%{opacity:1} 95%,100%{opacity:0} }
/* the morph: the surfaces are empty cards, so resizing them distorts nothing,
   and Stripe's counter-scaled inner layer is not needed */
@keyframes pt-sl { 0%{left:30px;top:106px;width:310.67px;height:340px;opacity:0} 3%{opacity:1}
                   26%{left:30px;top:106px;width:310.67px;height:340px}
                   34%,91%{left:20px;top:100px;width:484px;height:356px;opacity:1}
                   95%{left:20px;top:100px;width:484px;height:356px;opacity:0}
                   95.5%,100%{left:30px;top:106px;width:310.67px;height:340px;opacity:0} }
@keyframes pt-sr { 0%{left:683.33px;top:106px;width:310.67px;height:340px;opacity:0} 3%{opacity:1}
                   26%{left:683.33px;top:106px;width:310.67px;height:340px}
                   34%,91%{left:520px;top:100px;width:484px;height:356px;opacity:1}
                   95%{left:520px;top:100px;width:484px;height:356px;opacity:0}
                   95.5%,100%{left:683.33px;top:106px;width:310.67px;height:340px;opacity:0} }
@keyframes pt-sc { 0%{opacity:0} 3%,24%{opacity:1;transform:none} 27%,100%{opacity:0;transform:scale(.96)} }
@keyframes pt-tb { 0%,31%{opacity:0;transform:translateY(10px)} 34%,90%{opacity:1;transform:none} 93.5%,100%{opacity:0;transform:none} }
@keyframes pt-in { 0%,32%{opacity:0;transform:translateY(22px)} 36%,90%{opacity:1;transform:none} 93.5%,100%{opacity:0;transform:none} }
@keyframes pt-hot{ 0%,47%{background:#fff;border-color:#e4ecf5} 49.5%,83%{background:#eceffb;border-color:#2946b6}
                   85%,100%{background:#fff;border-color:#e4ecf5} }
@keyframes pt-q1 { 0%,80%{height:50px;opacity:1;margin-bottom:0} 84%,93%{height:0;opacity:0;margin-bottom:-8px}
                   94%,100%{height:50px;opacity:1;margin-bottom:0} }
@keyframes pt-n4 { 0%,81%{opacity:1} 83.5%,100%{opacity:0} }
@keyframes pt-n3 { 0%,81%{opacity:0} 83.5%,100%{opacity:1} }
@keyframes pt-scrim{ 0%,51%{opacity:0} 54%,78%{opacity:1} 81.5%,100%{opacity:0} }
@keyframes pt-card { 0%,52%{opacity:0;transform:translateY(26px) scale(.98)} 56%,78%{opacity:1;transform:none}
                     81.5%,100%{opacity:0;transform:translateY(-10px)} }
@keyframes pt-yes  { 0%,66%{transform:none;background:#2946b6} 67.5%{transform:scale(.95);background:#1e39a3}
                     69%,100%{transform:none;background:#2946b6} }
@keyframes pt-cb   { 0%,69%{opacity:1} 71%,99%{opacity:0} 100%{opacity:1} }
@keyframes pt-ca   { 0%,69%{opacity:0;transform:scale(.94)} 71.5%,99%{opacity:1;transform:none} 100%{opacity:0} }

.pt-plan,.pt-ta{animation:pt-a-in 11s ease both infinite}
.pt-p2{animation-delay:0.08s} .pt-p3{animation-delay:0.14s}
.pt-pick{animation:pt-pick 11s ease infinite}
.pt-nav{animation:pt-nav 11s ease infinite}
.pt-ua{animation:pt-ua 11s ease infinite}
.pt-ub{animation:pt-ub 11s ease infinite}
.pt-uc{animation:pt-uc 11s ease infinite}
.pt-sl{animation:pt-sl 11s cubic-bezier(.65,0,.35,1) infinite}
.pt-sr{animation:pt-sr 11s cubic-bezier(.65,0,.35,1) infinite}
.pt-sc{animation:pt-sc 11s ease infinite}
.pt-tb{animation:pt-tb 11s ease infinite}
.pt-in{animation:pt-in 11s cubic-bezier(.2,.7,.2,1) both infinite}
.pt-bl>.pt-in:nth-child(2){animation-delay:0.08s} .pt-bl>.pt-in:nth-child(3){animation-delay:0.14s}
.pt-bl>.pt-in:nth-child(4){animation-delay:0.22s} .pt-bl>.pt-in:nth-child(5){animation-delay:0.30s}
.pt-bl>.pt-in:nth-child(6){animation-delay:0.36s}
.pt-br>.pt-hd{animation-delay:0.03s}
.pt-br>.pt-in:nth-child(3){animation-delay:0.19s} .pt-br>.pt-in:nth-child(4){animation-delay:0.25s}
.pt-br>.pt-in:nth-child(5){animation-delay:0.33s}
/* row one fades in with the rest, lights up when its approval opens, and then
   leaves the list once approved: two animations on two different properties */
.pt-q1 .pt-q{animation:pt-in 11s cubic-bezier(.2,.7,.2,1) .11s both infinite,pt-hot 11s ease infinite}
.pt-q1{animation:pt-q1 11s ease infinite}
.pt-n4{animation:pt-n4 11s ease infinite}
.pt-n3{animation:pt-n3 11s ease infinite}
.pt-scrim{animation:pt-scrim 11s ease infinite}
.pt-card{animation:pt-card 11s cubic-bezier(.2,.7,.2,1) infinite}
.pt-yes{animation:pt-yes 11s ease infinite}
.pt-cb{animation:pt-cb 11s ease infinite}
.pt-ca{animation:pt-ca 11s ease infinite}
/* hold at the start until it is on screen, so nobody arrives mid-loop. Gated on
   .js: without the reveal script there is nothing to add .in, so it just runs */
.js .pt:not(.in) .pt-stage *{animation-play-state:paused}

/* ---- GATE (office page) ----------------------------------------------------- */
/* After Stripe Radar's hero. Radar keyframes only its small loops (dashes,
   pulses, a loading ring) and scripts the scenario; here the scenario is a 10s
   loop of keyframes too (sped up from 16s, 2026-09-29, every beat in proportion). Timeline:
     0-24%   three checks run, one after another; the second one flags
    22-37%   APPROVAL REQUIRED fills, and the action's recipients turn amber: Held
    38-72%   the action profile builds, then its analysis and rules land
    76-90%   the approval field reads Waiting in your Inbox
    90-100%  everything settles back for the next pass
   The resting state in gate.css is the finished frame, so every keyframe here
   starts from "not yet" and ends back at it. Staggers are delays on a shared
   10s period; each off-time stays inside the cycle so nothing wraps. */
@keyframes gt-rot     { to{transform:rotate(360deg)} }
@keyframes gt-spin-on { 0%,1%{opacity:0} 2%,8%{opacity:1} 9.5%,100%{opacity:0} }
@keyframes gt-ok-on   { 0%,8%{opacity:0;transform:scale(.5)} 10%,84%{opacity:1;transform:none} 86%,100%{opacity:0} }
@keyframes gt-pulse   { 0%{box-shadow:0 0 0 0 rgba(102,124,210,.55)} 70%,100%{box-shadow:0 0 0 9px rgba(102,124,210,0)} }
@keyframes gt-dash-x  { to{background-position:8px 0} }
@keyframes gt-dash-y  { to{background-position:0 8px} }
@keyframes gt-lit     { 0%,9%{opacity:.6} 11%,84%{opacity:1} 87%,100%{opacity:.6} }
@keyframes gt-lit-bus { 0%,23%{opacity:.6} 25%,84%{opacity:1} 87%,100%{opacity:.6} }
@keyframes gt-lit2    { 0%,37%{opacity:.6} 39%,88%{opacity:1} 91%,100%{opacity:.6} }
@keyframes gt-v0      { 0%,22%{opacity:1} 24%,90%{opacity:0} 93%,100%{opacity:1} }
@keyframes gt-v1      { 0%,22%{opacity:0} 24%,90%{opacity:1} 93%,100%{opacity:0} }
@keyframes gt-fill-l  { 0%,22%{transform:scaleX(0);opacity:1} 34%,88%{transform:scaleX(1);opacity:1}
                        92%{transform:scaleX(1);opacity:0} 93%,100%{transform:scaleX(0);opacity:0} }
@keyframes gt-held    { 0%,35%{opacity:0} 37.5%,90%{opacity:1} 93%,100%{opacity:0} }
@keyframes gt-fto     { 0%,35%{color:#040d1c} 37.5%,90%{color:#2946b6} 93%,100%{color:#040d1c} }
@keyframes gt-p0      { 0%,56%{opacity:1} 58%,90%{opacity:0} 93%,100%{opacity:1} }
@keyframes gt-p1      { 0%,56%{opacity:0} 58%,90%{opacity:1} 93%,100%{opacity:0} }
@keyframes gt-fill-r  { 0%,40%{transform:scaleX(0);opacity:1} 56%,88%{transform:scaleX(1);opacity:1}
                        92%{transform:scaleX(1);opacity:0} 93%,100%{transform:scaleX(0);opacity:0} }
@keyframes gt-t0      { 0%,57%{opacity:1} 59%,86%{opacity:0} 88%,100%{opacity:1} }
@keyframes gt-t1      { 0%,57%{opacity:0;transform:scale(.9)} 59%,86%{opacity:1;transform:none} 88%,100%{opacity:0} }
@keyframes gt-rule-on { 0%,68%{opacity:0;transform:translateY(8px)} 71%,86%{opacity:1;transform:none} 88%,100%{opacity:0} }
@keyframes gt-a0      { 0%,76%{opacity:1} 78%,90%{opacity:0} 93%,100%{opacity:1} }
@keyframes gt-a1      { 0%,76%{opacity:0} 78%,90%{opacity:1} 93%,100%{opacity:0} }
@keyframes gt-run-x   { from{transform:translateX(-200px)} to{transform:translateX(1100px)} }
@keyframes gt-run-y   { from{transform:translateY(-200px)} to{transform:translateY(620px)} }

.gt-spin{animation:gt-spin-on 10s both infinite,gt-rot 1s linear infinite}
.gt-ok{animation:gt-ok-on 10s cubic-bezier(.2,.9,.3,1.3) both infinite}
.gt-c2 img{animation-delay:.6s,0s} .gt-c3 img{animation-delay:1.2s,0s}
.gt-c2 .gt-ok{animation-delay:.6s} .gt-c3 .gt-ok{animation-delay:1.2s}
.gt-dot{animation:gt-pulse 1.8s cubic-bezier(.65,.05,.36,1) infinite}
.gt-c2 .gt-dot{animation-delay:.6s} .gt-c3 .gt-dot{animation-delay:1.2s}
.gt-lh{animation:gt-dash-x .8s linear infinite,gt-lit 10s ease infinite}
.gt-lv{animation:gt-dash-y .8s linear infinite,gt-lit 10s ease infinite}
.gt-l2{animation-delay:0s,.6s} .gt-l3{animation-delay:0s,1.2s}
/* its own keyframe rather than a 1.4s delay, which pushed its dim-out past 100% */
.gt-lbus,.gt-lin{animation-name:gt-dash-y,gt-lit-bus}
.gt-lin{animation-name:gt-dash-x,gt-lit-bus}
.gt-lout,.gt-lp1,.gt-lp2{animation-name:gt-dash-x,gt-lit2}
.gt-lbus2{animation-name:gt-dash-y,gt-lit2}
.gt-v0{animation:gt-v0 10s ease infinite}
.gt-v1{animation:gt-v1 10s ease infinite}
.gt-fill-l{animation:gt-fill-l 10s cubic-bezier(.4,0,.2,1) infinite}
.gt-held,.gt-tint{animation:gt-held 10s ease infinite}
.gt-fto{animation:gt-fto 10s ease infinite}
.gt-p0{animation:gt-p0 10s ease infinite}
.gt-p1,.gt-pct{animation:gt-p1 10s ease infinite}
.gt-fill-r{animation:gt-fill-r 10s cubic-bezier(.4,0,.2,1) infinite}
.gt-t0{animation:gt-t0 10s ease infinite}
.gt-t1{animation:gt-t1 10s cubic-bezier(.2,.9,.3,1.2) infinite}
.gt-side>.gt-row:nth-of-type(4) .gt-tag>*{animation-delay:.4s}
.gt-side>.gt-row:nth-of-type(5) .gt-tag>*{animation-delay:.8s}
.gt-r{animation:gt-rule-on 10s ease infinite}
.gt-side>.gt-r:nth-of-type(8){animation-delay:.4s}
.gt-a0{animation:gt-a0 10s ease infinite}
.gt-a1,.gt-tint2{animation:gt-a1 10s ease infinite}
.gt-run1{animation:gt-run-x 6s linear infinite}
.gt-run2{animation:gt-run-x 7.5s linear 2.6s infinite reverse}
.gt-run3{animation:gt-run-y 5s linear 1.2s infinite}
/* the resting state is the FINISHED frame, so anything waiting out a stagger
   delay would show "done" early (the third tag read None at 0.9s). backwards
   fill holds each element on its 0% frame until its delay is up. Declared last
   so it outranks the shorthands above, which reset fill-mode to none. */
.gt-stage *{animation-fill-mode:both}
/* hold at the start until on screen; without the reveal script it just runs */
.js .gt:not(.in) .gt-stage *{animation-play-state:paused}

/* ---- HOOD (office page) ------------------------------------------------------ */
/* After Stripe's homepage platform graphic, which plays ONCE on arrival and then
   offers replay. So: no infinite loops here. The page script adds .go when the
   graphic is on screen (and again on replay); everything below keys off it and
   fills both ways, so each part holds its first frame until its turn.
     0.0s   the browser rises in
     0.4s   Inbox banner, then its card at 0.65s, and the banner rings
     1.0s   Agents, card at 1.25s
     1.6s   Progress, card at 1.85s
     2.2s   Outputs and its rows, card at 2.45s
     3.0s   replay appears
   (sped up from 4.8s, 2026-09-29: steps 0.6s apart instead of 0.9s) */
@keyframes cx-rise { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes cx-fade { from{opacity:0} to{opacity:1} }
@keyframes cx-in-r { from{opacity:0;transform:translateX(28px) scale(.97)} to{opacity:1;transform:none} }
@keyframes cx-in-l { from{opacity:0;transform:translateX(-28px) scale(.97)} to{opacity:1;transform:none} }
@keyframes cx-ring { 0%{box-shadow:0 0 0 0 rgba(41,70,182,0)} 28%{box-shadow:0 0 0 5px rgba(41,70,182,.22)}
                     100%{box-shadow:0 0 0 0 rgba(41,70,182,0)} }
.cx.go .cx-win{animation:cx-rise .5s cubic-bezier(.2,.7,.2,1) both}
.cx.go .cx-hi {animation:cx-fade .35s ease .25s both}
.cx.go .cx-r1{animation:cx-rise .45s cubic-bezier(.2,.7,.2,1) .4s both,cx-ring 1.1s ease .7s both}
.cx.go .cx-r2{animation:cx-rise .45s cubic-bezier(.2,.7,.2,1) 1.0s both,cx-ring 1.1s ease 1.3s both}
.cx.go .cx-r3{animation:cx-rise .45s cubic-bezier(.2,.7,.2,1) 1.6s both,cx-ring 1.1s ease 1.9s both}
.cx.go .cx-r4{animation:cx-rise .45s cubic-bezier(.2,.7,.2,1) 2.2s both,cx-ring 1.1s ease 2.5s both}
.cx.go .cx-r4 .cx-tr{animation:cx-fade .3s ease 2.4s both}
.cx.go .cx-r4 .cx-tr:nth-child(3){animation-delay:2.47s}
.cx.go .cx-r4 .cx-tr:nth-child(4){animation-delay:2.54s}
.cx.go .cx-r4 .cx-tr:nth-child(5){animation-delay:2.61s}
.cx.go .cx-r4 .cx-tr:nth-child(6){animation-delay:2.68s}
.cx.go .cx-c1{animation:cx-in-r .45s cubic-bezier(.2,.8,.2,1) .65s both}
.cx.go .cx-c2{animation:cx-in-l .45s cubic-bezier(.2,.8,.2,1) 1.25s both}
.cx.go .cx-c3{animation:cx-in-r .45s cubic-bezier(.2,.8,.2,1) 1.85s both}
.cx.go .cx-c4{animation:cx-in-l .45s cubic-bezier(.2,.8,.2,1) 2.45s both}
.js .cx.go .cx-replay{animation:cx-fade .4s ease 3.0s both}

/* ---- SWITCH (pricing page) --------------------------------------------------- */
/* After Stripe's "Embed payments in your platform" card. 8s loop (sped up from 12s, 2026-09-22):
     0-4%    the workspace's approval slides into the card
    30-38%   Approve is pressed; the card turns to Approved
    42-55%   the Approved pill travels the dotted line to the Office
    53-64%   a ring flashes on the Office's mark
    55-60%   that workspace's row lights, its counts tick (3 to 2, 11 to 12)
    88-96%   the card slides out and the row settles, for the next pass
   Resting state (switch.css) is the finished frame. */
@keyframes sw-cc   { 0%{opacity:0;transform:translateX(-36px)} 4%,88%{opacity:1;transform:none}
                     94%,100%{opacity:0;transform:translateX(36px)} }
@keyframes sw-s1   { 0%,34%{opacity:1} 37%,100%{opacity:0} }
@keyframes sw-s2   { 0%,35%{opacity:0;transform:translateY(6px)} 38%,100%{opacity:1;transform:none} }
@keyframes sw-go   { 0%,30%{transform:none;background:#2946b6} 31.5%{transform:scale(.95);background:#1e39a3}
                     33%,100%{transform:none;background:#2946b6} }
@keyframes sw-pill { 0%,40%{opacity:0;transform:none} 43%,44%{opacity:1;transform:none}
                     53%{opacity:1;transform:translateX(90px)} 55.5%,100%{opacity:0;transform:translateX(90px)} }
@keyframes sw-ring { 0%,53%{opacity:0;transform:scale(.6)} 55%{opacity:1;transform:scale(1)} 64%,100%{opacity:0;transform:scale(1.5)} }
@keyframes sw-bg   { 0%,55%{opacity:0} 58%,88%{opacity:1} 93%,100%{opacity:0} }
@keyframes sw-o    { 0%,56%{opacity:1} 58.5%,93%{opacity:0} 96%,100%{opacity:1} }
@keyframes sw-x    { 0%,56%{opacity:0} 58.5%,93%{opacity:1} 96%,100%{opacity:0} }
@keyframes sw-dash-x { to{background-position:5px 0} }
@keyframes sw-dash-y { to{background-position:0 5px} }
.sw-cc  {animation:sw-cc 8s cubic-bezier(.2,.7,.2,1) both infinite}
.sw-s1  {animation:sw-s1 8s ease both infinite}
.sw-s2  {animation:sw-s2 8s ease both infinite}
.sw-go  {animation:sw-go 8s ease both infinite}
.sw-pill{animation:sw-pill 8s cubic-bezier(.45,0,.2,1) both infinite}
.sw-ring{animation:sw-ring 8s ease-out both infinite}
.sw-bg  {animation:sw-bg 8s ease both infinite}
.sw-o   {animation:sw-o 8s ease both infinite}
.sw-x   {animation:sw-x 8s ease both infinite}
.sw-lh  {animation:sw-dash-x .9s linear infinite}
.sw-lv  {animation:sw-dash-y .9s linear infinite}
.js .sw:not(.in) .sw-stage *{animation-play-state:paused}

/* ---- approval flow: Stripe's developer-systems mechanics ------------------- */
/* Read from Stripe's own CSS for this diagram: slots whose dashed border fades
   as a label pops in from .75 scale; PSP lines drawn in with stroke-dashoffset,
   each PSP popping in as its line lands; a turning gradient ring around the
   hub while it is busy. One shared 12s cycle, so the hub lights exactly when a
   tool connects. */
@keyframes dg-slot  { 0%,14%{border-color:rgba(255,255,255,.22)} 16%,44%{border-color:transparent}
                      46%,54%{border-color:rgba(255,255,255,.22)} 56%,84%{border-color:transparent}
                      86%,100%{border-color:rgba(255,255,255,.22)} }
@keyframes dg-fa    { 0%,14%{opacity:0;transform:scale(.75)} 17%,43%{opacity:1;transform:none} 46%,100%{opacity:0;transform:scale(.75)} }
@keyframes dg-fb    { 0%,54%{opacity:0;transform:scale(.75)} 57%,83%{opacity:1;transform:none} 86%,100%{opacity:0;transform:scale(.75)} }
@keyframes dg-glow  { 0%,15%{opacity:0} 18%,32%{opacity:1} 36%,55%{opacity:0} 58%,72%{opacity:1} 76%,100%{opacity:0} }
@keyframes dg-spin  { to{transform:rotate(360deg)} }
/* a line drawing itself: the stroke grows from the gate downward */
@keyframes dg-draw  { 0%,2%{clip-path:inset(0 0 100% 0)} 10%,92%{clip-path:inset(0 0 0 0)} 96%,100%{clip-path:inset(0 0 100% 0)} }
@keyframes dg-act   { 0%,9%{opacity:0;transform:scale(.75)} 13%,88%{opacity:1;transform:none} 92%,100%{opacity:0;transform:scale(.75)} }

.dg-group .dg-slot{animation:dg-slot 12s ease infinite}
.dg-fa{animation:dg-fa 12s cubic-bezier(.4,0,.2,1) infinite}
.dg-fb{animation:dg-fb 12s cubic-bezier(.4,0,.2,1) infinite}
.dg-glow{animation:dg-glow 12s ease infinite}
.dg-glow i{animation:dg-spin 1.5s linear infinite}
.dg-gate + .dg-stem{animation:dash-down 2.4s linear infinite,dg-draw 12s cubic-bezier(.66,0,.34,1) both infinite}
.dg-acts>.dg-box:not(.dg-ghost){animation:dg-act 12s cubic-bezier(.4,0,.2,1) both infinite}
.dg-acts>.dg-box:nth-child(3){animation-delay:.25s}
.dg-acts>.dg-box:nth-child(4){animation-delay:.5s}
.dg-acts>.dg-box:nth-child(5){animation-delay:.75s}

/* ---- SCALE (home page, under the flow diagram) ------------------------------ */
/* Stripe's wave is a three.js canvas. Here a ray burst breathes, and a brighter
   copy seen through a ring mask that grows from the origin sends light out along
   the rays, twice per 4s cycle. */

/* ---- HEALTH (office page): smarter work, fewer tokens, as a 14s loop --------
   (1s = 7.14%). Starts once on screen (.go from the page script), then repeats.
     0.6s   both charts draw; "before" figures ($0.52, 91%) on the cards
     1.6s   "Correction saved as a preference" where cost first dips
     3.2s   cost crosses the dashed median: "Under the median" (the first marker has gone)
     3.6s   the figures land: $0.43 down 18%, 96% up 3 pts
     4.6s   the notification: 21% under the median, efficiency bonus
     6.2s   the seat card; its progress fills, "Unlocked" lands at 8.2s
     12.8s  all fade and it starts over
   The resting frame in health.css is the end of the story. */
@keyframes mt-draw  { 0%,4%{clip-path:inset(0 100% 0 0)} 26%,92%{clip-path:inset(0 0 0 0)} 97%,100%{clip-path:inset(0 0 0 100%)} }
@keyframes mt-sa    { 0%,24%{opacity:1} 26%,100%{opacity:0} }
@keyframes mt-sb    { 0%,24%{opacity:0;transform:translateY(4px)} 26%,92%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes mt-late  { 0%,25%{opacity:0;transform:scale(.9)} 28%,92%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes mt-a1    { 0%,11%{opacity:0;transform:translateY(6px)} 13.5%,19.5%{opacity:1;transform:none} 21.5%,100%{opacity:0} }
@keyframes mt-a2    { 0%,22%{opacity:0;transform:translateY(6px)} 24.5%,92%{opacity:1;transform:none} 96%,100%{opacity:0} }
@keyframes mt-endin { 0%,24%{opacity:0} 27%,92%{opacity:1} 96%,100%{opacity:0} }
@keyframes mt-note  { 0%,32%{opacity:0;transform:translateY(16px)} 36%,91%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-6px)} }
@keyframes mt-donut { 0%,34%{opacity:0;transform:rotate(-120deg) scale(.8)} 40%,100%{opacity:1;transform:none} }
@keyframes mt-seat  { 0%,43%{opacity:0;transform:translateY(16px)} 47%,91%{opacity:1;transform:none} 95%,100%{opacity:0;transform:translateY(-6px)} }
@keyframes mt-fill  { 0%,48%{width:64%} 57%,100%{width:100%} }
@keyframes mt-unl   { 0%,58%{opacity:0;transform:scale(.9)} 61%,100%{opacity:1;transform:none} }
@keyframes mt-prg   { 0%,58%{opacity:1} 60%,100%{opacity:0} }
@keyframes mt-dot   { 0%{box-shadow:0 0 0 0 rgba(41,70,182,.45)} 70%,100%{box-shadow:0 0 0 10px rgba(41,70,182,0)} }
@keyframes mt-drift { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(-3%,2%) scale(1.04)} 66%{transform:translate(2%,-2%) scale(1.02)} }
.mt.go .mt-plot{animation:mt-draw 14s cubic-bezier(.45,0,.2,1) infinite both}
.mt.go .mt-cost{animation-delay:.2s}
.mt.go .mt-kpi .mt-sa{animation:mt-sa 14s ease infinite both}
.mt.go .mt-kpi .mt-sb{animation:mt-sb 14s ease infinite both}
.mt.go .mt-late{animation:mt-late 14s cubic-bezier(.2,.8,.2,1) infinite both}
.mt.go .mt-a1{animation:mt-a1 14s cubic-bezier(.2,.7,.2,1) infinite both}
.mt.go .mt-a2{animation:mt-a2 14s cubic-bezier(.2,.7,.2,1) infinite both}
.mt.go .mt-end{animation:mt-endin 14s ease infinite both,mt-dot 2s ease-out infinite}
.mt.go .mt-note{animation:mt-note 14s cubic-bezier(.2,.7,.2,1) infinite both}
.mt.go .mt-donut{animation:mt-donut 14s cubic-bezier(.2,.8,.2,1) infinite both}
.mt.go .mt-seat{animation:mt-seat 14s cubic-bezier(.2,.7,.2,1) infinite both}
.mt.go .mt-prog i{animation:mt-fill 14s cubic-bezier(.4,0,.2,1) infinite both}
.mt.go .mt-tile .mt-sb{animation:mt-unl 14s cubic-bezier(.2,.8,.2,1) infinite both}
.mt.go .mt-tile .mt-sa{animation:mt-prg 14s ease infinite both}
.mt-bg{animation:mt-drift 24s ease-in-out infinite}

/* ---- GALLERY (office page) --------------------------------------------------- */
/* After Webflow's #MadeinWebflow, which moves its planes with scroll. The track
   holds the cards twice, so sliding it half its width returns it exactly to the
   start: a seamless loop. It pauses under the pointer, so a hovered card holds. */
@keyframes gl-slide { to{transform:translateX(-50%)} }
.gl-track{animation:gl-slide 70s linear infinite}
.gl:hover .gl-track{animation-play-state:paused}

/* ---- ORBIT (company page) ---------------------------------------------------- */
/* After the Webflow Community hero, whose script does this every frame. Three
   keyframes, one 64s period:
     cg-spin  the space turns once around the vertical axis
     cg-face  each card turns back by the same amount, so it always faces you
     cg-far   blur and fade by depth. Written for a card at azimuth 0; each card's
              negative delay shifts it by its own azimuth, so it blurs exactly while
              it passes behind. The depth curve is Webflow's: sharp in the front
              quarter, up to 2.2px blur and 75% opacity at the back. */
@keyframes cg-spin { from{transform:rotateX(-10deg) rotateY(0deg)} to{transform:rotateX(-10deg) rotateY(360deg)} }
@keyframes cg-face { from{transform:rotateY(0deg) rotateX(10deg)} to{transform:rotateY(-360deg) rotateX(10deg)} }
@keyframes cg-far  { 0%{filter:blur(.73px);opacity:.92} 8.33%{filter:blur(1.47px);opacity:.83} 16.67%{filter:blur(2px);opacity:.77}
                      25%{filter:blur(2.2px);opacity:.75} 33.33%{filter:blur(2px);opacity:.77} 41.67%{filter:blur(1.47px);opacity:.83}
                      50%{filter:blur(.73px);opacity:.92} 58.33%,91.67%{filter:blur(0);opacity:1} 100%{filter:blur(.73px);opacity:.92} }
.cg-space{animation:cg-spin 64s linear infinite}
.cg-card{animation:cg-face 64s linear infinite,cg-far 64s linear infinite}
.cg-w1 .cg-card{animation-delay:0s,-64.0s}
.cg-w2 .cg-card{animation-delay:0s,-24.45s}
.cg-w3 .cg-card{animation-delay:0s,-48.89s}
.cg-w4 .cg-card{animation-delay:0s,-9.34s}
.cg-w5 .cg-card{animation-delay:0s,-33.78s}
.cg-w6 .cg-card{animation-delay:0s,-58.23s}
.cg-w7 .cg-card{animation-delay:0s,-18.67s}
.cg-w8 .cg-card{animation-delay:0s,-43.12s}

/* ---- ROADMAP (company page, business journey) --------------------------------- */
/* Progress climbs the journey on a 12s loop: each rule fills blue in 1s and the next
   stage lights with a small pulse, Startup through Industry Leader; it holds, then
   everything past stage 1 fades back and it starts again. Stage 1 stays lit (every
   workspace starts there), so reduced motion keeps that resting frame. One keyframe
   per dot and per rule, since they all reset together. */
@keyframes co-d2 { 0%,11.25%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 11.67%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 14.58%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d3 { 0%,19.58%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 20.0%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 22.92%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d4 { 0%,27.92%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 28.33%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 31.25%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d5 { 0%,36.25%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 36.67%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 39.58%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d6 { 0%,44.58%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 45.0%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 47.92%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d7 { 0%,52.92%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 53.33%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 56.25%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-d8 { 0%,61.25%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} 61.67%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 7px rgba(41,70,182,.18);transform:scale(1.2)} 64.58%,90%{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 4px rgba(41,70,182,.14);transform:scale(1)} 95%,100%{border-color:#cdd7e3;background:#fff;box-shadow:0 0 0 0 rgba(41,70,182,0);transform:scale(1)} }
@keyframes co-l1 { 0%,3.33%{background-size:2px 0} 11.67%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l2 { 0%,11.67%{background-size:2px 0} 20.0%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l3 { 0%,20.0%{background-size:2px 0} 28.33%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l4 { 0%,28.33%{background-size:2px 0} 36.67%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l5 { 0%,36.67%{background-size:2px 0} 45.0%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l6 { 0%,45.0%{background-size:2px 0} 53.33%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
@keyframes co-l7 { 0%,53.33%{background-size:2px 0} 61.67%,90%{background-size:2px 100%} 95%,100%{background-size:2px 0} }
.co-st:nth-child(2):after{animation:co-d2 12s ease-out infinite}
.co-st:nth-child(3):after{animation:co-d3 12s ease-out infinite}
.co-st:nth-child(4):after{animation:co-d4 12s ease-out infinite}
.co-st:nth-child(5):after{animation:co-d5 12s ease-out infinite}
.co-st:nth-child(6):after{animation:co-d6 12s ease-out infinite}
.co-st:nth-child(7):after{animation:co-d7 12s ease-out infinite}
.co-st:nth-child(8):after{animation:co-d8 12s ease-out infinite}
.co-st:nth-child(1):before{animation:co-l1 12s linear infinite}
.co-st:nth-child(2):before{animation:co-l2 12s linear infinite}
.co-st:nth-child(3):before{animation:co-l3 12s linear infinite}
.co-st:nth-child(4):before{animation:co-l4 12s linear infinite}
.co-st:nth-child(5):before{animation:co-l5 12s linear infinite}
.co-st:nth-child(6):before{animation:co-l6 12s linear infinite}
.co-st:nth-child(7):before{animation:co-l7 12s linear infinite}

/* ---- SERVICES HERO (services page) -------------------------------------------- */
/* The line-art board breathes: the seats drift up and down on their own rhythms and
   the two chips bob, so the hero is alive without anything moving far. Resting
   frame (reduced motion) is the drawing as laid out. */
@keyframes sv-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes sv-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.sv-seat{animation:sv-float 6s ease-in-out infinite}
.sv-s2{animation-duration:7s;animation-delay:-2s}
.sv-s3{animation-duration:5.5s;animation-delay:-4s}
.sv-s4{animation-duration:6.5s;animation-delay:-1s}
.sv-s5{animation-duration:7.5s;animation-delay:-3s}
.sv-chip{animation:sv-bob 5s ease-in-out infinite}
.sv-c2{animation-delay:-2.5s}

/* ---- RESEARCH HERO (research page) -------------------------------------------- */
/* The featured slides are alive: their cards float gently and the Approve button
   breathes, the moment the essay is about. Resting frame (reduced
   motion) is the card as laid out. */
@keyframes rs-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes rs-glow  { 0%,100%{box-shadow:0 0 0 0 rgba(41,70,182,0)} 50%{box-shadow:0 0 0 6px rgba(41,70,182,.22)} }
.rz-slide .rs-card{animation:rs-float 6s ease-in-out infinite}
.rz-slide .rs-yes{animation:rs-glow 2.4s ease-in-out infinite}
/* research articles: the figure under the title floats the same way */
.ar-fig .rs-fig>*{animation:rs-float 6s ease-in-out infinite}
.ar-fig .rs-yes{animation:rs-glow 2.4s ease-in-out infinite}

/* ---- PREFS (home page) -------------------------------------------------------- */
/* Zip's Lottie timeline, beat for beat, on a 7s loop (sped up from 8s, 2026-09-22;
   the percentages below are unchanged, so every beat simply arrives sooner):
     0.2s  greeting            1.1s  Alex's request, the draft attached
     2.6s  "Reading the draft", the outline comes in line by line
     3.9s  the scan sweeps     4.4s  one line lifts and glows
     4.5s  "Checking it against your preferences"
     5.1s  the seat appears    5.6s  the conversation clears
     6.0s  the reply           7.0s  Option A, then B, then the accept buttons
   then everything fades and it starts over. */
@keyframes zp-greet { 0%,2.5%{opacity:0;transform:translateY(8px)} 5%,61%{opacity:1;transform:none} 65%,100%{opacity:0;transform:translateY(-16px)} }
@keyframes zp-ask   { 0%,12%{opacity:0;transform:translateY(8px)} 15%,61%{opacity:1;transform:none} 65%,100%{opacity:0;transform:translateY(-16px)} }
@keyframes zp-s1    { 0%,28%{opacity:0} 30%,47%{opacity:1} 49%,100%{opacity:0} }
@keyframes zp-s2    { 0%,48%{opacity:0} 50%,60%{opacity:1} 63%,100%{opacity:0} }
@keyframes zp-doc   { 0%,28%{opacity:0;transform:translateX(-10px)} 32%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes zp-scan  { 0%,41%{opacity:0;transform:translateY(-40px)} 43%{opacity:1;transform:translateY(-40px)}
                      60%{opacity:1;transform:translateY(330px)} 62%,100%{opacity:0;transform:translateY(330px)} }
@keyframes zp-hi    { 0%,47%{opacity:0;transform:scale(.96)} 50%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes zp-who   { 0%,54%{opacity:0;transform:scale(.8)} 57%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes zp-reply { 0%,65%{opacity:0;transform:translateY(12px)} 68%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes zp-opts  { 0%,74%{opacity:0;transform:translateY(12px)} 77%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }
@keyframes zp-part  { 0%,76%{opacity:0} 79%,95%{opacity:1} 99%,100%{opacity:0} }
.zp-greet{animation:zp-greet 7s ease both infinite}
.zp-me{animation:zp-ask 7s ease both infinite}
.zp-s1{animation:zp-s1 7s ease both infinite}
.zp-s2{animation:zp-s2 7s ease both infinite}
.zp-dh,.zp-l{animation:zp-doc 7s ease both infinite}
.zp-d2{animation-delay:0.09s} .zp-d3{animation-delay:0.20s}
.zp-scan{animation:zp-scan 7s cubic-bezier(.45,0,.55,1) both infinite}
.zp-hi{animation:zp-hi 7s ease both infinite}
.zp-who{animation:zp-who 7s cubic-bezier(.2,.9,.3,1.2) both infinite}
.zp-reply{animation:zp-reply 7s ease both infinite}
.zp-opts{animation:zp-opts 7s ease both infinite}
.zp-oa,.zp-ob,.zp-acts{animation:zp-part 7s ease both infinite}
.zp-ob{animation-delay:0.10s} .zp-acts{animation-delay:0.20s}
.js .zp:not(.in) .zp-stage *{animation-play-state:paused}

/* ---- REQUEST (contact page) --------------------------------------------------- */
/* Zip's 34s procurement video, condensed to a 16s loop (1s = 6.25%):
     A  0.3-3.7s  the ask is typed
     B  3.8-9.4s  the seat's questions; answers land, Submit
     C  9.5-15s   the workflow: steps complete in turn; your approval waits on
                  "Needs you", then goes through; then Send
     D  14-15.5s  Request complete
   Items inside a scene only ever turn ON; the scene's own fade hides them again,
   so their loops can wrap freely while the scene is invisible. */
@keyframes rq-a     { 0%{opacity:0} 2%,21%{opacity:1} 23.5%,100%{opacity:0} }
@keyframes rq-type  { 0%,6%{max-width:0;animation-timing-function:steps(44,end)} 19%,100%{max-width:430px} }
@keyframes rq-blink { 50%{opacity:0} }
@keyframes rq-b     { 0%,22.5%{opacity:0} 25%,56.5%{opacity:1} 59%,100%{opacity:0} }
@keyframes rq-rise  { 0%,23%{opacity:0;transform:translateY(10px)} 25.5%,100%{opacity:1;transform:none} }
@keyframes rq-pick  { 0%,34.4%{background:#fff;border-color:#e4ecf5;color:#040d1c} 35.6%,100%{background:#2946b6;border-color:#2946b6;color:#fff} }
@keyframes rq-on    { 0%,43%{opacity:0} 45%,100%{opacity:1} }
@keyframes rq-fill  { 0%,48%{opacity:0} 50%,100%{opacity:1} }
@keyframes rq-ph    { 0%,48%{opacity:1} 50%,100%{opacity:0} }
@keyframes rq-press { 0%,53%{transform:none;background:#2946b6} 54.5%{transform:scale(.94);background:#1e39a3} 56%,100%{transform:none;background:#2946b6} }
@keyframes rq-c     { 0%,58%{opacity:0} 60.5%,92%{opacity:1} 94.5%,100%{opacity:0} }
@keyframes rq-card  { 0%,59%{opacity:0;transform:translateY(12px)} 62%,100%{opacity:1;transform:none} }
@keyframes rq-out   { 0%,64%{opacity:1} 65.5%,100%{opacity:0} }
@keyframes rq-in    { 0%,64%{opacity:0} 65.5%,100%{opacity:1} }
@keyframes rq-need  { 0%,76.5%{opacity:0} 78%,81.5%{opacity:1} 83%,100%{opacity:0} }
@keyframes rq-wait  { 0%,76.5%{border-color:#e4ecf5;box-shadow:none} 78%,81.5%{border-color:#f0c77a;box-shadow:0 0 0 3px rgba(217,119,6,.14)}
                      83%,100%{border-color:#e4ecf5;box-shadow:none} }
@keyframes rq-d     { 0%,88%{opacity:0;transform:scale(.97)} 90%,97%{opacity:1;transform:none} 99.5%,100%{opacity:0} }
.rq-a{animation:rq-a 16s ease both infinite}
.rq-type{animation:rq-type 16s both infinite}
.rq-caret{animation:rq-blink 1s steps(1) infinite}
.rq-b{animation:rq-b 16s ease both infinite}
.rq-me{animation:rq-rise 16s ease both infinite}
.rq-say{animation:rq-rise 16s ease 1s both infinite}
.rq-form{animation:rq-rise 16s ease 1.5s both infinite}
.rq-k1{animation:rq-pick 16s ease both infinite}
.rq-k2{animation:rq-pick 16s ease .8s both infinite}
.rq-file{animation:rq-on 16s ease both infinite}
.rq-fill{animation:rq-fill 16s ease both infinite}
.rq-ph{animation:rq-ph 16s ease both infinite}
.rq-submit{animation:rq-press 16s ease both infinite}
.rq-c{animation:rq-c 16s ease both infinite}
.rq-step{animation:rq-card 16s cubic-bezier(.2,.7,.2,1) both infinite}
.rq-t2{animation-delay:.08s} .rq-t3{animation-delay:.16s} .rq-t5{animation-delay:.32s}
.rq-t4{animation:rq-card 16s cubic-bezier(.2,.7,.2,1) .24s both infinite,rq-wait 16s ease both infinite}
.rq-ready{animation:rq-out 16s ease both infinite}
.rq-ok{animation:rq-in 16s ease both infinite}
.rq-need{animation:rq-need 16s ease both infinite}
.rq-t2 .rq-p{animation-delay:.8s} .rq-t3 .rq-p{animation-delay:1.6s} .rq-t5 .rq-p{animation-delay:3.4s}
.rq-t4 .rq-ready{animation-delay:2s} .rq-t4 .rq-ok{animation-delay:2.8s} .rq-t4 .rq-need{animation-delay:0s}
.rq-ev{animation:rq-in 16s ease both infinite}
.rq-e2{animation-delay:.8s} .rq-e3{animation-delay:1.6s} .rq-e4{animation-delay:2s} .rq-e5{animation-delay:2.8s} .rq-e6{animation-delay:3.4s}
.rq-d{animation:rq-d 16s ease both infinite}
.js .rq:not(.in) .rq-stage *{animation-play-state:paused}

/* ---- FILL (office page) -------------------------------------------------------- */
/* Zip's accounts-payable clip as a 10s loop (1s = 10%; sped up from 16s, 2026-09-29,
   every beat kept in proportion). The report stays on screen throughout; there is no
   hand-off screen:
     0.4s   "Filling in the report" over the source
     2.2s   the fields fill, then the line items, each marked as the seat's
     4.4s   one account is corrected; the preference toast confirms it
     6.6s   "Report ready for your approval" drops in under Approve
     7.6s   Approve is pressed and the card closes
     9.1s   the fields fall back to placeholders and the next report begins
   Between them: the seat's reading bubble (0.2s), the budget meter filling (2.4s),
   "3 checks passed" (2.6s), a cursor that clicks the account (4.4s) and then
   Approve (7.7s), the Draft tag turning Approved and a logged-in-Activity note.
   The values carry staggered delays (up to 1s), so each one empties and refills
   a little after the one before it. */
@keyframes iv-load  { 0%,3%{opacity:0} 5%,19%{opacity:1} 22%,100%{opacity:0} }
@keyframes iv-page  { 0%,19%{opacity:.4;filter:blur(1.5px)} 23%,90%{opacity:1;filter:none} 94%,100%{opacity:.4;filter:blur(1.5px)} }
@keyframes iv-sk    { 0%,21%{opacity:1} 23%,90%{opacity:0} 93%,100%{opacity:1} }
@keyframes iv-val   { 0%,21%{opacity:0;transform:translateY(3px)} 23%,90%{opacity:1;transform:none} 93%,100%{opacity:0;transform:translateY(3px)} }
@keyframes iv-shim  { to{background-position:-200% 0} }
@keyframes iv-edit  { 0%,43%{background:transparent;box-shadow:none} 45%,58%{background:#eceffb;box-shadow:0 0 0 2px #2946b6}
                       61%,100%{background:transparent;box-shadow:none} }
@keyframes iv-toast { 0%,44%{opacity:0;transform:translateY(10px)} 47%,62%{opacity:1;transform:none} 65%,100%{opacity:0} }
@keyframes iv-press { 0%,75.5%{transform:none} 77%{transform:scale(.94)} 78.5%,100%{transform:none} }
@keyframes iv-who   { 0%,1.5%{opacity:0;transform:translateY(8px)} 4%,19%{opacity:1;transform:none} 21.5%,100%{opacity:0;transform:translateY(-4px)} }
@keyframes iv-meter { 0%,23%{transform:scaleX(0)} 30%,92%{transform:scaleX(1)} 96%,100%{transform:scaleX(0)} }
@keyframes iv-chk   { 0%,25%{opacity:0;transform:translateY(10px) scale(.98)} 27.5%,40%{opacity:1;transform:none} 42.5%,100%{opacity:0} }
@keyframes iv-ck    { 0%,26.5%{opacity:0;transform:translateX(-4px)} 28.5%,100%{opacity:1;transform:none} }
@keyframes iv-cur   { 0%,38%{opacity:0;transform:translate(120px,110px)} 40%{opacity:1;transform:translate(90px,80px)}
                      43.5%{opacity:1;transform:none} 44.5%{transform:scale(.82)} 45.5%,68%{opacity:1;transform:none}
                      75.5%{opacity:1;transform:translate(279px,-424px)} 77%{transform:translate(279px,-424px) scale(.82)}
                      78.5%{opacity:1;transform:translate(279px,-424px)} 82%,100%{opacity:0;transform:translate(300px,-400px)} }
@keyframes iv-appr  { 0%,78%{opacity:0;transform:scale(.9)} 80%,92%{opacity:1;transform:none} 94%,100%{opacity:0} }
@keyframes iv-sent  { 0%,79%{opacity:0;transform:translateY(10px)} 81.5%,91%{opacity:1;transform:none} 93.5%,100%{opacity:0} }
@keyframes iv-ready { 0%,64%{opacity:0;transform:translateY(-8px)} 66.5%,77%{opacity:1;transform:none} 79.5%,100%{opacity:0;transform:translateY(-4px)} }
.iv-load{animation:iv-load 10s ease both infinite}
.iv-page{animation:iv-page 10s ease both infinite}
.iv-sk{animation:iv-sk 10s ease both infinite,iv-shim 1.4s linear infinite}
.iv-val{animation:iv-val 10s ease both infinite}
.iv-f1 .iv-sk,.iv-f1 .iv-val{animation-delay:0s,0s}
.iv-f2 .iv-sk,.iv-f2 .iv-val{animation-delay:0.13s,0s}
.iv-f3 .iv-sk,.iv-f3 .iv-val{animation-delay:0.25s,0s}
.iv-f4 .iv-sk,.iv-f4 .iv-val{animation-delay:0.38s,0s}
.iv-f5 .iv-sk,.iv-f5 .iv-val{animation-delay:0.5s,0s}
.iv-f6 .iv-sk,.iv-f6 .iv-val{animation-delay:0.63s,0s}
.iv-r1 .iv-sk,.iv-r1 .iv-val{animation-delay:0.5s,0s}
.iv-r2 .iv-sk,.iv-r2 .iv-val{animation-delay:0.63s,0s}
.iv-r3 .iv-sk,.iv-r3 .iv-val{animation-delay:0.75s,0s}
.iv-r4 .iv-sk,.iv-r4 .iv-val{animation-delay:0.88s,0s}
.iv-r5 .iv-sk,.iv-r5 .iv-val{animation-delay:1s,0s}
.iv-edit{animation:iv-edit 10s ease both infinite}
.iv-toast{animation:iv-toast 10s cubic-bezier(.2,.7,.2,1) both infinite}
.iv-yes{animation:iv-press 10s ease both infinite}
.iv-ready{animation:iv-ready 10s cubic-bezier(.2,.7,.2,1) both infinite}
.iv-who{animation:iv-who 10s cubic-bezier(.2,.7,.2,1) both infinite}
.iv-bar i{transform-origin:left center;animation:iv-meter 10s cubic-bezier(.3,.7,.2,1) both infinite}
.iv-chk{animation:iv-chk 10s cubic-bezier(.2,.7,.2,1) both infinite}
.iv-ck{animation:iv-ck 10s ease both infinite}
.iv-k2{animation-delay:.19s} .iv-k3{animation-delay:.38s}
.iv-cur{animation:iv-cur 10s cubic-bezier(.45,0,.25,1) both infinite}
.iv-appr{animation:iv-appr 10s ease both infinite}
.iv-sent{animation:iv-sent 10s cubic-bezier(.2,.7,.2,1) both infinite}
.js .iv:not(.in) .iv-stage *{animation-play-state:paused}

/* ---- ROTATE (home page) ------------------------------------------------------- */
/* After Clay's rotator, which cycles its tabs with a script. One 25s timeline, a
   5s window per department (1s = 4%). Every keyframe below is written for the
   FIRST window (0-20%); each department's elements carry a negative delay that
   shifts them onto their own window, so the whole rotation is five copies of one
   choreography:
     0.1s  the card rises        0.8s  the popover
     2.0s  step one ticks        2.8s  step two
     3.2s  the loading cell fills   3.9s  step three
     2.8s  the dotted line draws up, then across; 3.4s the pill */
@keyframes cl-card { 0%{opacity:0;transform:translateY(12px)} 2%,18%{opacity:1;transform:none} 20%,100%{opacity:0;transform:none} }
@keyframes cl-fade { 0%{opacity:0} 2%,18%{opacity:1} 20%,100%{opacity:0} }
@keyframes cl-tab  { 0%,18.5%{background:#dbe8fb;color:#02254f;box-shadow:0 0 0 1px #c5dbf6 inset}
                     20%,98.5%{background:#f3f5f8;color:#627187;box-shadow:0 0 0 1px transparent inset}
                     100%{background:#dbe8fb;color:#02254f;box-shadow:0 0 0 1px #c5dbf6 inset} }
@keyframes cl-pop  { 0%,3%{opacity:0;transform:translateY(12px)} 6%,100%{opacity:1;transform:none} }
@keyframes cl-sp1  { 0%,7.5%{opacity:1} 8.5%,100%{opacity:0} }
@keyframes cl-ok1  { 0%,7.5%{opacity:0;transform:scale(.5)} 9%,100%{opacity:1;transform:none} }
@keyframes cl-sp2  { 0%,10.5%{opacity:1} 11.5%,100%{opacity:0} }
@keyframes cl-ok2  { 0%,10.5%{opacity:0;transform:scale(.5)} 12%,100%{opacity:1;transform:none} }
@keyframes cl-sp3  { 0%,15%{opacity:1} 16%,100%{opacity:0} }
@keyframes cl-ok3  { 0%,15%{opacity:0;transform:scale(.5)} 16.5%,100%{opacity:1;transform:none} }
@keyframes cl-load { 0%,12.5%{opacity:1} 13.5%,100%{opacity:0} }
@keyframes cl-got  { 0%,12.5%{opacity:0} 14%,100%{opacity:1} }
@keyframes cl-wv   { 0%,10.5%{clip-path:inset(100% 0 0 0)} 12.5%,100%{clip-path:inset(0 0 0 0)} }
@keyframes cl-wh   { 0%,12.5%{clip-path:inset(0 100% 0 0)} 13.5%,100%{clip-path:inset(0 0 0 0)} }
@keyframes cl-pill { 0%,13%{opacity:0;transform:scale(.92)} 14.5%,100%{opacity:1;transform:none} }
@keyframes cl-rot  { to{transform:rotate(360deg)} }
.cl-card{animation:cl-card 25s cubic-bezier(.2,.7,.2,1) both infinite}
.cl-d,.cl-band{animation:cl-fade 25s ease both infinite}
.cl-tab{animation:cl-tab 25s ease both infinite}
.cl-pop{animation:cl-pop 25s cubic-bezier(.2,.7,.2,1) both infinite}
.cl-s1 .cl-spin{animation:cl-sp1 25s ease both infinite,cl-rot .9s linear infinite}
.cl-s1 .cl-ok{animation:cl-ok1 25s cubic-bezier(.2,.9,.3,1.3) both infinite}
.cl-s2 .cl-spin{animation:cl-sp2 25s ease both infinite,cl-rot .9s linear infinite}
.cl-s2 .cl-ok{animation:cl-ok2 25s cubic-bezier(.2,.9,.3,1.3) both infinite}
.cl-s3 .cl-spin{animation:cl-sp3 25s ease both infinite,cl-rot .9s linear infinite}
.cl-s3 .cl-ok{animation:cl-ok3 25s cubic-bezier(.2,.9,.3,1.3) both infinite}
.cl-load{animation:cl-load 25s ease both infinite}
.cl-load .cl-spin{animation:cl-rot .9s linear infinite}
.cl-got{animation:cl-got 25s ease both infinite}
.cl-wv{animation:cl-wv 25s ease both infinite}
.cl-wh{animation:cl-wh 25s ease both infinite}
.cl-pill{animation:cl-pill 25s cubic-bezier(.2,.9,.3,1.2) both infinite}
/* each department onto its own 5s window: delays of 0, -20, -15, -10, -5 seconds */
/* (0,2,0)+ and declared last, or the step rules above (.cl-s1 .cl-spin, 0,2,0) keep
   their own zero delay and every card ticks on the first card's clock */
.cl .cl-c1,.cl .cl-c1 *{animation-delay:-20s} .cl .cl-c2,.cl .cl-c2 *{animation-delay:-15s}
.cl .cl-c3,.cl .cl-c3 *{animation-delay:-10s} .cl .cl-c4,.cl .cl-c4 *{animation-delay:-5s}
.js .cl:not(.in) .cl-stage *{animation-play-state:paused}

/* ---- bento panels: the contents arrive in order ------------------------- */
/* :target adds the rule, so the animation restarts every time a panel opens.
   Re-opening the same panel replays it, which a transition cannot do. */
@keyframes panel-rise{
  from {opacity:0; transform:translateY(12px)}
  to   {opacity:1; transform:none}
}
.panel:target .panel-hd>div:first-child{animation:panel-rise .40s ease .04s both}
.panel:target .panel-list div{animation:panel-rise .34s ease both}
.panel:target .panel-list div:nth-child(1){animation-delay:.10s}
.panel:target .panel-list div:nth-child(2){animation-delay:.16s}
.panel:target .panel-list div:nth-child(3){animation-delay:.22s}
.panel:target .panel-list div:nth-child(4){animation-delay:.28s}
.panel:target .panel-list div:nth-child(5){animation-delay:.34s}
.panel:target .panel-list div:nth-child(6){animation-delay:.40s}
.panel:target .panel-body{animation:panel-rise .44s ease .24s both}

/* ---- motion is always optional ----------------------------------------- */
/* ---- ONE STACK (home page, css/stack.css) ------------------------------------
   The pale slabs rise into place from the bottom when the section arrives (.in).
   Then a 19.8s loop, 2.2s per capability: each row is lit for its turn, its icon shows
   on the royal slab, and the slab settles down into view at each turn. Negative delays
   start every row mid-loop, so row 1 is lit the moment the loop begins. */
@keyframes stk-rise { 0%{opacity:0;transform:translateY(14px)} 100%{opacity:.95;transform:none} }
@keyframes stk-lift { 0%{opacity:0;transform:translateY(-10%)} 16%,84%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(6%)} }
@keyframes stk-glow { 0%,100%{opacity:.35} 16%,84%{opacity:1} }
@keyframes stk-row  { 0%,10.4%{background-color:#eef2fc;box-shadow:inset 0 0 0 1px rgba(41,70,182,.12);color:#2946b6}
                      11.1%,100%{background-color:rgba(238,242,252,0);box-shadow:inset 0 0 0 1px rgba(41,70,182,0);color:#02254f} }
@keyframes stk-ico  { 0%,11%{opacity:1} 11.11%,100%{opacity:0} }
.js .stk:not(.in) .stk-g{opacity:0}
.js .stk.in .stk-g{animation:stk-rise .7s cubic-bezier(.2,.7,.2,1) both}
.js .stk.in .stk-g1{animation-delay:0s}   .js .stk.in .stk-g2{animation-delay:.08s} .js .stk.in .stk-g3{animation-delay:.16s}
.js .stk.in .stk-g4{animation-delay:.24s} .js .stk.in .stk-g5{animation-delay:.32s} .js .stk.in .stk-g6{animation-delay:.4s}
.js .stk.in .stk-g7{animation-delay:.48s} .js .stk.in .stk-g8{animation-delay:.56s}
.js .stk.in .stk-lift{animation:stk-lift 2.2s cubic-bezier(.3,.7,.3,1) .7s infinite both}
.js .stk.in .stk-glow{animation:stk-glow 2.2s ease-in-out .7s infinite both}
.js .stk.in .stk-row{animation:stk-row 19.8s linear infinite}
.js .stk.in .stk-i{animation:stk-ico 19.8s linear infinite}
.js .stk.in .stk-r1,.js .stk.in .stk-i1{animation-delay:-19.1s}
.js .stk.in .stk-r2,.js .stk.in .stk-i2{animation-delay:-16.9s}
.js .stk.in .stk-r3,.js .stk.in .stk-i3{animation-delay:-14.7s}
.js .stk.in .stk-r4,.js .stk.in .stk-i4{animation-delay:-12.5s}
.js .stk.in .stk-r5,.js .stk.in .stk-i5{animation-delay:-10.3s}
.js .stk.in .stk-r6,.js .stk.in .stk-i6{animation-delay:-8.1s}
.js .stk.in .stk-r7,.js .stk.in .stk-i7{animation-delay:-5.9s}
.js .stk.in .stk-r8,.js .stk.in .stk-i8{animation-delay:-3.7s}
.js .stk.in .stk-r9,.js .stk.in .stk-i9{animation-delay:-1.5s}

/* ---- WORK REACHES YOU (readiness page) ---------------------------------------------
   After Relevance AI's product page, which scripts the same loops with Framer Motion.
   Measured there: the feed rolls up at about 16px a second; seven dots cross the
   "without" lane in about 6s, going red before the wall; six grey dots run into the
   queue and three glowing ones leave it, spaced wider, for pacing. Same timings here,
   one keyframe each, the spacing done with negative delays. */
@keyframes wr-roll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wr-run{0%{left:0;opacity:0}10%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes wr-hit{0%{left:0;opacity:0;background:#c3c8d4}10%{opacity:1}55%{background:#c3c8d4}75%{background:#e0483a}90%{opacity:1}100%{left:100%;opacity:0;background:#e0483a}}
.wr-roll{animation:wr-roll 26s linear infinite}
.wr-tr-bad .wr-d{animation:wr-hit 6.3s linear infinite}
.wr-tr-in .wr-d{animation:wr-run 5.4s linear infinite}
.wr-tr-out .wr-d{animation:wr-run 7.5s linear infinite}
.wr-tr .wr-d2{animation-delay:-.9s}.wr-tr .wr-d3{animation-delay:-1.8s}.wr-tr .wr-d4{animation-delay:-2.7s}
.wr-tr .wr-d5{animation-delay:-3.6s}.wr-tr .wr-d6{animation-delay:-4.5s}.wr-tr .wr-d7{animation-delay:-5.4s}
.wr-tr-out .wr-d2{animation-delay:-2.5s}.wr-tr-out .wr-d3{animation-delay:-5s}
/* hold at the start until on screen; without the reveal script it just runs */
.js .wr:not(.in) .wr-stage *{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .wr-stage *{animation:none}
  .br-up,.br-dn,.br-c,.br-h,.dg-stem,.dg-wire,.dg-gate,.dg-ghost,.dg-add,.dg-mid::before,.dg-mid::after{animation:none}
  .fx-f,.fx-b,.rib-l,.rib-r,.rib-w,.rib-lit{animation:none}
  .dg-group .dg-slot,.dg-fa,.dg-fb,.dg-glow,.dg-glow i,.dg-gate + .dg-stem,.dg-acts>.dg-box:not(.dg-ghost){animation:none}
  .orb-1,.orb-2,.orb-3,.orb-h,.glb-lit,.glb-haze{animation:none}
  .pt-stage *{animation:none}
  .gt-stage *{animation:none}
  /* as specific as the rules they cancel, and later, or they lose */
  .cx.go .cx-stage *,.cx.go .cx-r4 .cx-tr,.js .cx.go .cx-replay{animation:none}
  .pt-q1 .pt-q{animation:none}
  .sw-stage *{animation:none}
  .gl-track{animation:none}
  .rz-slide .rs-card,.rz-slide .rs-yes,.ar-fig .rs-fig>*,.ar-fig .rs-yes{animation:none}
  .sv-seat,.sv-chip{animation:none}
  .co-st:nth-child(n):before,.co-st:nth-child(n):after{animation:none}
  .iv-bar i{animation:none}
  .cg-space,.cg-card,.cg-w .cg-card{animation:none}
  .zp-stage *{animation:none}
  .hero .shot,.shot-sec .shot,.js .hs-stage *,.js .hsm-stage *{animation:none}
  .tr.go .tr-p,.tr.go .tr-c,.tr.go .tr-t,.tr.go .tr-sa,.tr.go .tr-sb,.tr.go .tr-toast,.tr.go .tr-grow{animation:none}
  .iv-stage *,.iv-stage .iv-sk,.iv-stage .iv-val{animation:none}
  .cl-stage *,.cl-stage .cl-st i,.cl-stage .cl-load .cl-spin{animation:none}
  .rq-stage *,.rq-t4,.rq-t4 .rq-p,.rq-e2,.rq-e3,.rq-e4,.rq-e5,.rq-e6,.rq-t2 .rq-p,.rq-t3 .rq-p,.rq-t5 .rq-p{animation:none}
  .cn-lava,.cn-pt{animation:none}
  .mt.go .mt-plot,.mt.go .mt-seat,.mt.go .mt-prog i,.mt.go .mt-note,.mt.go .mt-donut,.mt.go .mt-end,.mt-end,.mt-bg,.mt.go .mt-sa,.mt.go .mt-sb,.mt.go .mt-late,.mt.go .mt-a1,.mt.go .mt-a2,.mt.go .mt-kpi .mt-sa,.mt.go .mt-kpi .mt-sb,.mt.go .mt-tile .mt-sa,.mt.go .mt-tile .mt-sb{animation:none}
  .stk-g,.stk-lift,.stk-glow,.stk-row,.stk-i{animation:none}
  .panel:target .panel-hd>div:first-child,
  .panel:target .panel-list div,
  .panel:target .panel-body{animation:none}
}