/* css/tokens.css */
/* Design tokens. 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:#5a697f;          /* 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:#197555;       /* app --green */
  --green-t:#197555;
  --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;

  /* THE MENU SCALE (2026-10-16): one type and surface scale for the whole site, taken from the
     dropdown menus. Rules in companies/manelink/workspace/website-design-rules.md, section 13.
     Use these names in new CSS instead of numbers. --r and --rb above stay for older rules. */
  --fs-hero:88px;        /* page title in a hero (clamped down on smaller screens) */
  --fs-h2:44px;          /* section heading on a new page; existing pages keep 34-44px (guide 13.1) */
  --fs-card:20px;        /* card title on a new page; existing cards keep 17-22px (guide 13.1) */
  --fs-block:24px;       /* story-block title (2026-10-25 standing rule): label --fs-label, title --fs-block 500 navy, line --fs-body grey, link 15px semibold royal */
  --fs-body:16px;        /* body text */
  --fs-small:14.5px;     /* list links, meta lines, the menus' links */
  --fs-label:11.5px;     /* the one label style: capitals, semibold, --ls-label, --t4 */
  --ls-label:.06em;
  --fw-text:400;         /* body text */
  --fw-title:500;        /* every heading and title: no bold */
  --fw-label:600;        /* labels and buttons only */
  --r-panel:16px;        /* panels, menus, slides, floating cards */
  --r-card:12px;         /* cards, boxes, tables */
  --r-tile:7px;          /* icon tiles; buttons and fields keep --rb (6px) */
}

/* 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:none}   /* no hover underline anywhere on the site (Wafi, 2026-10-15) */
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, one banner per section. */
/* 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:#fff}   /* sits between the dark review band and the grey closing (2026-10-24 reorder) */
.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)}

/* the home page's four pillars (#pillars): the How it works step cards, two by two, and four across from Webflow's
   large breakpoint (1280px), where each card is wide enough for its panel rows on one line */
.steps.st4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1280px){.steps.st4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.steps.st4{grid-template-columns:minmax(0,1fr)}}
.steps.st4 .num{text-transform:uppercase}   /* a layer name, not a step number, so the row never reads as a sequence */
.steps.st4 h3{text-wrap:balance}.steps.st4 .nw{white-space:nowrap}
.steps.st4 .fn-more{margin-top:4px}
/* panel heads: workspace tiles on System (as the Industries page's), a setup bar on Experts, agent faces on the other two */
.steps.st4 .mini .rail i.lg{display:grid;place-items:center;border-radius:7px;background:#2946b6;color:#fff;font:600 11px var(--web);font-style:normal}
.steps.st4 .mini .rail i.lg2{background:#6d5ae6}.steps.st4 .mini .rail i.lg3{background:#0e7490}
.steps.st4 .mini .rail i.lg + i.lg{margin-left:4px;border:0;box-shadow:none}.steps.st4 .mini .rail i.lg{border:0;box-shadow:none}
.steps.st4 .mini .prog{display:flex;align-items:center;gap:8px;height:30px;font-size:11.5px;color:#46556b}
.steps.st4 .mini .prog i{position:relative;flex:1;height:6px;border-radius:3px;background:#e4ecf5;overflow:hidden}
.steps.st4 .mini .prog b{position:absolute;top:0;bottom:0;left:0;width:66%;border-radius:3px;background:var(--btn)}
/* phones: the label, title, line and link only, so four cards don't fill four screens */
@media (max-width:767px){.steps.st4 .mini{display:none}}
/* 50 words (2026-10-24): the pillar names carry the section. The mini cards keep one header line and show their rows
   as quiet bars with status dots; each card is one link, its arrow the only cue */
.steps.st4 .mini .r .q{display:block;width:var(--w);height:7px;border-radius:4px;background:#e3e9f3}
.steps.st4 .mini .r .wait{margin-left:auto;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #9aa6b6}
.steps.st4 .step{position:relative}
.steps.st4 .fn-more{display:block;width:0;height:0;margin:0;padding:0}   /* the link has no box of its own: the card is its hit area, a small arrow sits in the top corner */
.steps.st4 .fn-more:after{position:absolute;top:20px;right:20px;width:24px;height:24px;border:0;border-radius:50%;transform:none;
  background:#fff url(../assets/icons/chevron-right.svg) 9px 50%/7px 11px no-repeat;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s,background-color .2s}
.steps.st4 .fn-more:before{content:"";position:absolute;inset:0;border-radius:var(--r)}
.steps.st4 .step:hover .fn-more:after{background-color:var(--sky);box-shadow:0 0 0 1px var(--btn)}
.steps.st4 .fn-more:focus-visible{outline:none}.steps.st4 .fn-more:focus-visible:before{outline:2px solid var(--btn);outline-offset:3px}
/* the section opens the page after the hero: the screenshot hangs 120px into it (80px at 991px and below), plus the usual 96px section gap (64px on phones) */
.s.pl4-sec{padding-top:264px}
@media (max-width:991px){.s.pl4-sec{padding-top:208px}}
@media (max-width:767px){.s.pl4-sec{padding-top:168px}}
/* 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:#5a697f;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:36px;height:36px;margin-bottom:20px;border-radius:var(--r-tile);background:var(--sky)}   /* the menus' icon tile: a pale blue square, no frame */
.fn-ico img{width:20px;height:20px}
.fn-item h3{margin:0 0 8px;font:500 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:repeat(4,minmax(0,1fr));gap:48px}   /* four equal columns, each with its lists stacked */   /* Resources is wide: Learn and Get help side by side */   /* six short columns of three to six links, so none runs long */
/* the footer takes the dropdown menus' scale: column names like the bar's menu names, group labels in the
   menus' small grey capitals, title-only links in medium weight, no rules between them */
.ft-col h3{margin:0 0 20px;font:500 15px 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 10px;font:600 var(--fs-label) var(--web);letter-spacing:var(--ls-label);text-transform:uppercase;color:#a3b3e8}
footer a{display:block;width:max-content;max-width:100%;margin:0 0 12px;font:500 14.5px/1.3 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:500 14.5px 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/seats/chief-of-staff-320.jpg)}
.av02{background-image:url(../assets/img/seats/sales-lead-320.jpg)}
.av03{background-image:url(../assets/img/seats/finance-lead-320.jpg)}
.av05{background-image:url(../assets/img/seats/commerce-lead-320.jpg)}
.av09{background-image:url(../assets/img/seats/operations-lead-320.jpg)}
.av10{background-image:url(../assets/img/seats/marketing-lead-320.jpg)}
.av12{background-image:url(../assets/img/seats/people-lead-320.jpg)}
.av14{background-image:url(../assets/img/seats/legal-lead-320.jpg)}

/* ---- 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:500 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:var(--r-tile);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-weight:400;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:28px;height:28px;background-size:13px 13px}   /* the social icons under the Company links */

/* ---- Home, Product and Pricing on the dropdown menus' scale (2026-10-16) ----------------
   The marketing layer takes the menus' look: small grey capital labels with no pill, titles in
   medium weight, no bold, flat cards at 12px corners, floating panels at 16px. The mock app
   screens inside the pictures keep the app's own styles. */
.home .eyebrow,.p-office .eyebrow,.p-pricing .eyebrow{height:auto;padding:0;border:0;border-radius:0;background:none;
  font:600 var(--fs-label) var(--web);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t4)}
.home .eyebrow i,.p-office .eyebrow i,.p-pricing .eyebrow i{display:none}
.home .eyebrow-dark{background:none;color:#a3b3e8}
.home .step .num{font-size:var(--fs-label)}
.home .step h3,.home .bcard h3,.home .kind h3{font-weight:500}
.home .pc,.home .stk-row{font-weight:500}
.home .panel h4{font-weight:500}
.home .pg b,.home .ag b{font-weight:500}
.home .dg-board b,.home .dg-gate b{font-weight:600}
.home .kind .tag{font:600 var(--fs-label) var(--web);letter-spacing:var(--ls-label);color:var(--t4)}
.home .step,.home .bcard,.home .pc,.home .num-card,.home .kind,.home .ag,.home .pg{border-radius:var(--r-card)}
.home .stk-list{border-radius:var(--r-card);box-shadow:none}
.home .panel-in{border-radius:var(--r-panel)}
/* Product: the Connections row names and connected tools in medium weight, the number cards at 12px */
.p-office .cn-row h3,.p-office .cn-t.cn-on{font-weight:500}
.p-office .num-card,.p-office .step,.p-office .kind,.p-office .pc{border-radius:var(--r-card)}
/* Pricing: flat plan cards at 12px, titles in medium weight, the Recommended tag in the label style,
   the included lists, workspace kinds and questions at 12px, the open plan panels at 16px */
.p-pricing .plan{border-radius:var(--r-card);box-shadow:none}
.p-pricing .plan h3,.p-pricing .kind h3,.p-pricing .panel h4,.p-pricing .panel .pb-h,.p-pricing .fq summary{font-weight:500}
.p-pricing .plan-flag{font:600 var(--fs-label) var(--web);letter-spacing:var(--ls-label);text-transform:uppercase}
.p-pricing .incl div,.p-pricing .kind,.p-pricing .fq{border-radius:var(--r-card)}
.p-pricing .panel-in{border-radius:var(--r-panel)}

/* ---- HOW IT WORKS TIMELINE (home #how): three steps on one line joined by a progress line, one frame below that
   shows the chosen step's app window. --tl (0 to 1) is set by the page script. With JS off it is a plain list ---- */
.tl{margin-top:48px;scroll-margin-top:96px}
.tl-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tl.tabbed .tl-steps:before,.tl.tabbed .tl-steps:after{content:"";position:absolute;top:17px;left:18px;height:2px;border-radius:1px;background:var(--line)}
.tl.tabbed .tl-steps:before{width:calc(66.667% + 16px)}
.tl.tabbed .tl-steps:after{width:calc((66.667% + 16px) * var(--tl,0));background:var(--btn)}
.tl.ready .tl-steps:after{transition:width .35s ease}
.tl.run .tl-steps:after{transition:width 6s linear}   /* playing: the line creeps to the next dot while the step is shown */
.tl-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 8px 0 0;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
.tl-dot{display:grid;place-items:center;width:36px;height:36px;margin-bottom:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--rail);font:var(--fw-label) 12.5px var(--ui);font-style:normal;color:var(--mute);transition:background-color .2s,color .2s,box-shadow .2s}
.tl-step b{font:var(--fw-title) var(--fs-card)/1.25 var(--display);letter-spacing:-.01em;color:var(--mute);transition:color .2s}
.tl-step small{max-width:36ch;font:400 15px/1.55 var(--web);color:var(--mute)}
.tl-step.on .tl-dot,.tl-step.done .tl-dot{background:var(--btn);color:#fff;box-shadow:0 0 0 1px var(--btn)}
.tl-step.on b,.tl:not(.tabbed) .tl-step b,.tl-step:hover b{color:var(--navy)}
.tl-step:focus-visible{outline:2px solid var(--btn);outline-offset:6px;border-radius:var(--r-card)}
.tl:not(.tabbed) .tl-step{cursor:default}
/* the frame: one wide tinted panel. With JS the windows share one cell and cross-fade */
.tl-frame{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;margin-top:40px;padding:56px 32px;border-radius:var(--r-panel);background:linear-gradient(160deg,#f3f6fd 0%,#e6ecfb 100%);box-shadow:inset 0 0 0 1px #e3e9f3}
.tl:not(.tabbed) .tl-frame{gap:24px}
.tl-pane{display:flex;justify-content:center;width:100%;min-width:0}
.tl.tabbed .tl-pane{grid-area:1/1;opacity:0;visibility:hidden}
.tl.tabbed .tl-pane.on{opacity:1;visibility:visible}
/* the cross-fade starts only once the first step is set (.ready), so nothing fades out on load */
.tl.ready .tl-pane{transition:opacity .3s ease,visibility 0s .3s}.tl.ready .tl-pane.on{transition:opacity .3s ease,visibility 0s}
.tl-img{width:100%;max-width:720px}
.tl-win{display:flex;flex-direction:column;border-radius:var(--r-card);background:#fff;box-shadow:0 0 0 1px #e3e9f3,0 24px 48px -28px rgba(2,37,79,.35);font:500 13.5px var(--web);color:var(--navy);text-align:left}
.tl-bar{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line)}
.tl-bar b{font:600 14px var(--web)}.tl-bar small{font:500 12px var(--web);color:var(--t4)}
.tl-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px}
.tl-row{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px;border-radius:8px;box-shadow:0 0 0 1px #e4ecf5}
.tl-row b{min-width:0;font:600 13.5px var(--web);color:#040d1c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-row.tl-in{margin-left:28px}
.tl-row.tl-hl{background:var(--sky);box-shadow:none}
.tl-row.tl-ok{background:#f3faf6;box-shadow:none}
.tl-av{flex:none;width:26px;height:26px;border-radius:50%;background-color:#e9e2ff;background-size:cover;background-position:center}
.tl-tag,.tl-on,.tl-go{margin-left:auto;flex:none;font:500 12px var(--web);font-style:normal;color:#46556b}
.tl-on{display:inline-flex;align-items:center;gap:6px;color:var(--green-t)}.tl-on:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.tl-go{color:var(--btn)}
.tl-edit{display:flex;flex-direction:column;gap:3px;margin:-2px 0 2px 36px;padding:9px 12px;border-left:2px solid var(--btn);border-radius:0 8px 8px 0;background:#f6f8fc;font:500 13px var(--web)}
.tl-edit small{font:600 11px var(--web);letter-spacing:.04em;text-transform:uppercase;color:var(--t4)}
.tl-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.tl-btn{padding:7px 13px;border-radius:6px;font:600 12.5px var(--web);font-style:normal}
.tl-btn.y{background:var(--btn);color:#fff}.tl-btn.n{box-shadow:0 0 0 1px #dfe6f2;color:var(--navy)}
@media (max-width:767px){
  /* phones: the steps stack on a vertical line */
  .tl-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .tl-step{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:4px;padding:0}
  .tl-dot{grid-row:1/3;margin:0}
  .tl.tabbed .tl-steps:before{top:18px;bottom:18px;left:17px;width:2px;height:auto}
  .tl.tabbed .tl-steps:after{top:18px;left:17px;width:2px;height:calc((100% - 36px) * var(--tl,0))}
  .tl.ready .tl-steps:after{transition:height .35s ease}
  .tl.run .tl-steps:after{transition:height 6s linear}
  .tl-step b{font-size:18px}
  .tl-frame{margin-top:28px;padding:20px 12px}
  .tl-row.tl-in{margin-left:16px}
  .tl-tag{display:none}
}

/* System card picture (2026-10-24, Wafi's drawing): three workspaces stacked, one royal blue fading with depth */
.steps.st4 .mini.pv{position:relative;height:116px;padding:12px;box-sizing:border-box}
.steps.st4 .pv .q{display:block;width:var(--w);height:7px;border-radius:4px;background:#e3e9f3}
.pv-ws{position:absolute;left:50%;display:flex;align-items:center;gap:10px;width:168px;height:34px;padding:0 10px;box-sizing:border-box;border:1px solid #e4ecf5;border-radius:7px;background:#fff;box-shadow:0 6px 14px -10px rgba(2,37,79,.35)}
.pv-ws>i:first-child:not([class]){flex:none;width:16px;height:16px;border-radius:5px;background:#2946b6}
.pv-w1{top:62px;transform:translateX(-50%)}
.pv-w2{top:40px;transform:translateX(-50%) scale(.92);opacity:.85}
.pv-w3{top:18px;transform:translateX(-50%) scale(.84);opacity:.6}

/* Workers card picture (2026-10-24, Wafi's drawing): three agents stacked like the System workspaces,
   the back two done (green dot), the front one improving (a rising line) */
.pv-ws .q{flex:1 1 auto}
.pv-face{flex:none;width:18px;height:18px;border-radius:50%;background-color:#e9e2ff;background-size:cover;background-position:center}
.pv-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--green)}
.pv-rise{display:block;flex:none}

/* Functions and Experts in the same stack (2026-10-24): Functions shows department icons (Marketing, Finance, Sales)
   where System shows workspaces; Experts shows two setup steps done and the setup lead on the last one */
.pv-ic{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--sky)}
.pv-ic img{display:block;width:13px;height:13px}
.pv-ok{position:relative;flex:none;width:14px;height:14px;border-radius:50%;background:var(--green)}
.pv-ok:after{content:"";position:absolute;left:4.5px;top:2.5px;width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.pv-prog{position:relative;flex:1 1 auto;height:7px;border-radius:4px;background:#e3e9f3;overflow:hidden}
.pv-prog b{position:absolute;left:0;top:0;bottom:0;width:66%;border-radius:4px;background:var(--btn)}

/* the whole card is the link, so the whole card answers the hover */
.steps.st4 .step{transition:border-color .2s,box-shadow .2s,transform .2s}
.steps.st4 .step:hover{border-color:var(--btn);box-shadow:0 14px 30px -20px rgba(2,37,79,.4);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.steps.st4 .step:hover{transform:none}}
/* the link has no box but is still a flex item: take back its gap so the card ends at its padding */
.steps.st4 .fn-more{margin-top:-10px}
.steps.st4 .step{padding-bottom:26px}

/* How it works in fewer words (2026-10-24): step titles carry the steps; the windows keep the names, the setup title and
   the review story as words, and show the rest as quiet bars */
.tl-q{display:inline-block;vertical-align:middle;width:var(--w);max-width:100%;height:7px;border-radius:4px;background:#dde4ef}
.tl-btn .tl-q{background:#d7dfec}.tl-btn.y .tl-q{background:rgba(255,255,255,.6)}
.tl-row b .tl-q{display:block}
.tl-on:empty{gap:0}
@media (max-width:767px){.tl-tag .tl-q{display:none}}
/* product page (2026-10-24): How it works follows Connections, both white, so a hairline separates them */
.how-sec.how-after{border-top:1px solid var(--line)}

/* ---- EXPERTS (home, 2026-10-24): text left, the setup window right; one column on phones ---- */
.xp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.xp-sec .sh{margin:0;text-align:left}
.xp-sec .fn-more{margin-top:18px}
.xp-pic{display:flex;justify-content:flex-end}
.xp-pic .tl-win{width:100%;max-width:520px}
@media (max-width:991px){.xp-grid{grid-template-columns:minmax(0,1fr);gap:32px}.xp-pic{justify-content:flex-start}}
/* footer (2026-10-24): five columns of one list each (Product, Teams, Industries, Resources, Company), no group labels,
   so the columns run to similar lengths; three per row on tablets, two on phones */
.ft-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
@media (max-width:991px){footer .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}}
@media (max-width:767px){footer .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
/* home (2026-10-24): Experts now follows the white standards section, so a hairline separates them */
.xp-sec{border-top:1px solid var(--line)}


/* ---- PILLAR STACK, PINNED (home #pillars, 2026-10-27, after the amenities section on avetre.com/grace-bay-pavilion) ----
   The section holds still while you scroll through it (a quarter of a screen per layer): the four chapters sit stacked
   with dividers, the one you are on open (blue label, navy heading, its line and link) and the rest a grey heading;
   the stack beside them lights the same layer and the box counts 01 / 04. A chapter or a layer in the stack scrolls
   to its share. Tablets and phones keep the same, the stack on top and only the open chapter's heading showing.
   With JS off the chapters read as a list and the stack is hidden. Script at the foot of index.html. */
.ps-pin{margin-top:64px}   /* the heading sits inside the track since 2026-10-27, so the gap under it is the pin's */
.ps-ch{padding:28px 0;border-top:1px solid var(--line)}
.ps-ch:first-child{border-top:0;padding-top:0}
.ps-num{margin:0 0 14px;font:var(--fw-label) var(--fs-label) var(--ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t4);transition:color .35s ease}
.ps-ch h3{margin:0;max-width:18ch;font:var(--fw-title) calc(var(--fs-block) + 4px)/1.18 var(--display);letter-spacing:-.02em;color:var(--navy);transition:color .35s ease}
.ps-ch .lead{margin:16px 0 0;max-width:40ch;font-size:var(--fs-body)}
.ps-ch .fn-more{margin-top:18px}
.ps-stage{display:none}
.ps-panel{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:var(--r-card);background:#f5f7fd;overflow:hidden}   /* the work area: a soft blue-white (#f5f7fd, Wafi's colour, 2026-11-02; was grey --cloud), white cards on it */
.ps-hd{flex:none;display:flex;align-items:center;gap:8px;padding:13px 18px;border-bottom:1px solid var(--line);background:#fff;font:400 14.5px var(--ui);color:var(--t4)}   /* the app's breadcrumb */
.ps-back{all:unset;font:inherit;color:inherit;cursor:default;border-radius:4px}.ps-back:after{content:"\203A";margin-left:8px;color:var(--t4)}   /* the breadcrumb is the way back from a zoomed plate (2026-10-31) */
.ps-zoom .ps-back{color:var(--blue);cursor:pointer}.ps-zoom .ps-back:hover{text-decoration:underline}.ps-back:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.ps-zoom .ps-cv{cursor:zoom-out}
.ps-count{margin-left:auto;font:400 13px var(--ui);font-style:normal;font-variant-numeric:tabular-nums;color:var(--t4)}   /* the layer you are on, of four (2026-10-27, in place of the rail and the hint) */
.ps-count b{font-weight:500;color:var(--navy)}
.ps-hd b{font-weight:500;color:var(--navy)}
.ps-cv{display:block;flex:1 1 auto;width:100%;min-height:0;cursor:grab;touch-action:pan-y}
.ps-cv.drag{cursor:grabbing}

.js .ps-stick{display:contents}   /* the wrapper only holds when the heading pins too (.ps-head below) */
/* pinned, with JS: the heading, then the pin, then a quarter of a screen of track per layer (the ::after); the pin sits
   under the 72px nav */
.js .ps{position:relative}
.js .ps::after{content:"";display:block;height:calc(4 * 45vh)}   /* a short hold (2026-10-27, Wafi), longer since the stack zooms into each plate on scroll (2026-11-01): 45vh a layer */
.js .ps-pin{position:sticky;top:72px;height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;padding:40px 0;margin-top:24px}
/* no empty space (2026-10-27, Wafi, twice): on desktop the pinned block is centred under the nav, 640px tall at most
   (the section's height before it pinned) and less on a short screen; the stack's box is the same height, and the script spreads the four
   chapters down it (--pp, the space either side of each divider), so the first label sits level with the box's top and
   the last heading with its bottom. The track is the block plus a quarter of a screen per layer. */
@media (min-width:992px){
  .js .ps{--ph:min(calc(100vh - 136px),680px)}   /* 680px at most (2026-10-27, Wafi; was 640, the height before it pinned) */
  .js .ps-pin{margin-top:56px}
  .js .ps-chs .ps-ch{padding:var(--pp,24px) 0}
  .js .ps-chs .ps-ch:first-child{padding-top:0}
  .js .ps-chs .ps-ch:last-child{padding-bottom:0}
  .js .ps-pin{top:calc(36px + 50vh - var(--ph) / 2);height:var(--ph);padding:0}
}
/* the heading pins too (2026-10-27, Wafi: no white above and below at the same height): where the screen has room for the
   heading and the 640px block, they hold together as one, centred under the nav (the script sets .ps-head, --ph and --st) */
.js .ps.ps-head .ps-stick{display:block;position:sticky;top:var(--st,88px)}
.js .ps.ps-head .ps-pin{position:relative;top:auto;margin-top:0}   /* the heading's own 40px gap, as on the other sections */
@media (min-width:992px) and (max-height:820px){ .ps-ch h3{max-width:none;font-size:var(--fs-block)} .ps-ch .lead{margin-top:10px} .ps-ch .fn-more{margin-top:12px} }
.js .ps-list{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:0}
/* the chapters: the one you are on open, the rest a grey heading (Wafi's picture, 2026-10-27) */
.js .ps-ch{padding:24px 0;cursor:pointer}
.js .ps-ch:first-child{padding-top:0}
.js .ps-ch:last-child{padding-bottom:0}
.js .ps-ch.on{cursor:default}
.js .ps-ch.on .ps-num{color:var(--btn)}
.js .ps-ch:not(.on) h3{color:#6c798d}   /* darker (2026-11-02, Wafi; was #9aa5b8, 2.5:1): about 4.4:1, still behind the open chapter */
/* the chapters you are not on are short (2026-11-02, Wafi): the label and a one-line heading a size down, so the open
   chapter leads; the list is no longer spread to the box's height but sits centred beside it */
@media (min-width:992px){ .js .ps-ch h3{transition:color .35s ease,font-size .35s ease} .js .ps-ch:not(.on) h3{max-width:none;font-size:var(--fs-card);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} }
.js .ps-ch:not(.on):hover h3{color:var(--mute)}
.js .ps-ch:focus-visible{outline:2px solid var(--btn);outline-offset:6px;border-radius:4px}
.js .ps-more{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.ps-more>div{min-height:0;overflow:hidden}
.js .ps-ch:not(.on) .ps-more{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .45s}
.js .ps-ch .lead{min-height:calc(2em * 1.55)}   /* steady (2026-10-27): every line takes two lines' room, so the list keeps one height whichever chapter is open */
.js .ps-stage{display:block;min-height:0}
@media (max-width:991px){
  /* the stack on top, the chapters under it (Avetre's phone layout); only the open chapter shows its heading */
  .js .ps::after{height:calc(4 * 45svh)}
  .js .ps-pin{height:calc(100svh - 72px);grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,56%) minmax(0,1fr);gap:18px;padding:12px 0 14px}   /* 56% since 2026-11-01 (was 50%): a bigger stack card on phones */
  .js .ps-stage{order:-1}
  .js .ps-list{justify-content:flex-start}
  .js .ps-ch{padding:16px 0}   /* more air between the chapters (2026-11-02, Wafi: was 12px); taller screens get more below */
  .ps-num{margin-bottom:10px}
  .ps-ch h3{max-width:22ch;font-size:var(--fs-card)}
  .ps-ch .lead{margin-top:10px;font-size:15px}
  .ps-ch .fn-more{margin-top:12px}
  .js .ps-ch:not(.on) .ps-num{margin-bottom:0}
  .js .ps-ch h3{max-height:120px;overflow:hidden;transition:color .35s ease,max-height .4s ease}
  .js .ps-ch:not(.on) h3{max-height:0}
}
/* the chapters spread with the screen's height: the list shares the pinned screen with the stack, so the gaps grow
   only where there is room under it (measured 2026-11-02: 34px spare at 844 tall, 73px at 932, 180px on a tablet) */
@media (max-width:991px) and (min-height:741px) and (max-height:839px){ .js .ps-pin{grid-template-rows:minmax(0,54%) minmax(0,1fr)} }   /* 812-tall phones: the stack 2% smaller so the roomier list fits */
@media (max-width:991px) and (min-height:741px) and (max-height:799px){ .js .ps-ch{padding:14px 0} }   /* 780-tall phones: a little less, so it still fits */
@media (max-width:991px) and (min-height:900px){ .js .ps-ch{padding:20px 0} }
@media (max-width:991px) and (min-height:1050px){ .js .ps-ch{padding:28px 0} .ps-num{margin-bottom:12px} .ps-ch .lead{margin-top:12px} .ps-ch .fn-more{margin-top:16px} }
@media (max-width:991px) and (max-height:740px){   /* short phones (iPhone SE): a smaller stack, so the link stays on screen */
  .js .ps-pin{grid-template-rows:minmax(0,52%) minmax(0,1fr);gap:12px}
  .js .ps-ch{padding:9px 0}
  .ps-num{margin-bottom:8px}
  .ps-ch .lead{margin-top:8px}
  .ps-ch .fn-more{margin-top:10px}   /* the SE keeps its tight spacing: it has no room to spare */
  .ps-ch h3{font-size:18px}
}
@media (prefers-reduced-motion:reduce){ .ps-num,.ps-ch h3,.js .ps-more{transition:none} }

/* ---- HOME TOOLS STRIP (2026-10-24): under the hero picture, the same look as the Solutions pages' strip ---- */
.hm-tools{margin:0 0 104px;text-align:center}
.hm-tools p{margin:0;font:var(--fw-label) var(--fs-label) var(--ui);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t4)}
.hm-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin-top:22px}
.hm-marks span{display:inline-flex;align-items:center;gap:10px;height:40px;font:500 15px var(--ui);color:var(--navy)}
.hm-marks img{display:block;width:auto;height:22px}
.hm-marks .hm-nt{height:28px}
@media (max-width:767px){ .hm-tools{margin-bottom:72px} .hm-marks{gap:6px 22px} }

/* ---- FOOTER, the hybrid (sandbox try, 2026-10-24): the live footer's frame (five full-width columns,
   logo and subscribe on one row, copyright and policies on the next) with what worked in the Scout
   try: small capital labels over the links and a quiet "Browse all" with an arrow (the four-pillar
   line beside the logo was tried and removed, 2026-10-25). Small text is #d3dcf8, which keeps 4.5:1 even over the bottom glow (#a3b3e8
   fell to about 3:1 there). Overrides the footer rules above; the royal fade and glow come from them. ---- */
footer{padding:80px 0 32px;color:#d3dcf8}
footer .ft-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
footer .ft-col h3{margin:0 0 20px;font:var(--fw-label) 12px/1.4 var(--web);letter-spacing:.08em;text-transform:uppercase;color:#a3b3e8}   /* the labels sit on the dark top of the fade, at 6.9:1 */
footer .ft-col a{display:block;width:max-content;max-width:100%;margin:0 0 14px;font:var(--fw-text) 14.5px/1.4 var(--web);color:#e6ebfb}
footer .ft-col a:hover{color:#fff;text-decoration:none}
footer .ft-col .ft-all{color:#c7d2f5}
footer .ft-col .ft-all:after{content:" \2192"}
footer .ft-soc-col{display:flex;gap:6px;margin-top:18px}
footer .ft-soc-col .ft-ic{width:30px;height:30px;margin:0;border-radius:var(--rb);background-color:rgba(255,255,255,.1);background-size:14px 14px}
footer .ft-soc-col .ft-ic:hover{background-color:rgba(255,255,255,.2)}
/* the bottom band: a 2 x 2 grid, logo | subscribe, then copyright | policies */
.ft-band3{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px 48px;margin-top:64px;padding-top:40px;border-top:1px solid rgba(255,255,255,.14)}
.ft-id{display:flex;align-items:center;gap:24px;min-width:0}
footer .ft-logo{flex:none;display:block;width:153px;height:37px;margin:0;background:url(../assets/img/manelink-logo-white.svg) no-repeat left center/contain}   /* the full logo, as the nav over the blue */
.ft-news2{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.ft-news2 b{font:500 14.5px var(--web);color:#fff;white-space:nowrap}
footer .ft-copy{font:var(--fw-text) 13.5px var(--web);color:#d3dcf8}
footer .ft-band3 .ft-pol{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 24px}
footer .ft-band3 .ft-pol a{display:inline;width:auto;margin:0;font:var(--fw-text) 13.5px var(--web);color:#d3dcf8}
footer .ft-band3 .ft-pol a:hover{color:#fff}
@media (max-width:991px){
  footer .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .ft-band3{grid-template-columns:minmax(0,1fr);align-items:start}
  .ft-news2,footer .ft-band3 .ft-pol{justify-content:flex-start}
  .ft-band3 .ft-copy{order:4}
}
@media (max-width:767px){
  footer{padding-top:64px}
  footer .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
}
@media (max-width:479px){
  /* two columns on phones (2026-10-31, was one column, about 2.5 screens): Product | Teams, Resources | Company, then
     Industries across the full width last, so its long names stay on one line */
  footer .ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  footer .ft-cols>.ft-col:nth-child(3){order:9;grid-column:1/-1}
  .ft-news2{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---- PRODUCT PAGE REORDER (2026-10-24) ---- */
.s.s-line{border-top:1px solid var(--line)}   /* two white sections meet */
/* FUNCTIONS GRID (app look, 2026-10-24): one card per department, drawn like the app's team cards: the lead's face,
   name and status, the department's first routine in an app row, and the app's royal link. Each links to its
   Solutions page. */
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.fx-card{display:flex;flex-direction:column;gap:14px;padding:18px;border:1px solid var(--line);border-radius:10px;background:#fff;color:inherit;text-decoration:none;
  transition:border-color .2s,box-shadow .2s}
.fx-card:hover{border-color:#c9d4f5;box-shadow:0 14px 30px -22px rgba(2,37,79,.4);text-decoration:none}
.fx-who{display:flex;align-items:center;gap:12px}
.fx-face{position:relative;flex:none;width:40px;height:40px}
.fx-face img{display:block;width:40px;height:40px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 1px var(--line)}
.fx-face em{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 2px #fff}
.fx-who b{display:block;font:500 15.5px/1.3 var(--ui);color:var(--ink)}
.fx-who small{display:block;margin-top:2px;font:400 13px/1.3 var(--ui);color:#5a697f}
.fx-rt{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fafbfc;font:400 13.5px/1.4 var(--ui);color:#2f3d52}
.fx-rt i{flex:none;width:14px;height:14px;background:#45546a;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.fx-go{margin-top:auto;font:500 13.5px var(--ui);color:var(--btn)}
.fx-go:after{content:" \2192"}
@media (max-width:991px){ .fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:767px){ .fx-grid{grid-template-columns:minmax(0,1fr);margin-top:28px} }
/* the plan picture folded into the Experts section, below the timeline */
.how-sec .xp-sub{margin-top:80px;margin-left:-16px}   /* the plan block keeps .tour-in padding for its frame; the heading lines up with the timeline */
.how-sec .xp-sub h3{margin:0;font:var(--fw-title) 26px/1.2 var(--display);letter-spacing:-.015em;color:var(--navy)}
.how-sec .xp-sub .lead{margin-top:12px}
@media (max-width:767px){ .how-sec .xp-sub{margin-top:56px} .how-sec .xp-sub h3{font-size:22px} }

/* EXPERTS, short (2026-10-24): the copy beside the timeline's Setup window */
.xp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.xp-grid .sh{margin:0}
.xp-art{margin-top:0;padding:0;background:none;box-shadow:none;border-radius:0}
@media (max-width:991px){ .xp-grid{grid-template-columns:minmax(0,1fr);gap:36px} }
@media (max-width:767px){ .xp-art{padding:0} .xp-art .tl-tag{display:none} }


/* home four-layer section (2026-10-25): a shorter gap under it (was the full 96px), so the last chapter sits closer to the
   departments section */
section.s.ps-sec{padding-bottom:56px}
@media (max-width:767px){ section.s.ps-sec{padding-bottom:40px} }

/* the four-layer header sits on the left (2026-10-25, the latest ask after moving between left and centre) */
/* its lead runs on one line on desktop (2026-10-25); narrower screens wrap it as usual */
.ps-sh,.ps-sh .lead{max-width:none}
/* centred (2026-10-25, Wafi's latest call after the left/centre back and forth) */
.ps-sh{text-align:left;align-items:flex-start}   /* on the left (2026-11-02, Wafi; centred since 2026-10-25) */
.ps-sh .eyebrow{justify-content:flex-start}
.home .ps-sh .eyebrow{color:var(--navy)}   /* navy like the heading (2026-11-01, Wafi): the hero's blue fade reaches this label on laptops and phones, where grey washed out (1.8:1 at 1024 wide); navy reads 5:1 or better on every screen */

/* home Experts (2026-10-25): the setup window is as tall as the standards picture above (the page script sets --xp-h);
   its rows share the height evenly */
.xp-pic .tl-win{height:var(--xp-h,auto)}
.xp-pic .tl-body{flex:1 1 auto}
.xp-pic .tl-row{flex:1 1 0;min-height:42px}
@media (max-width:991px){ .xp-pic .tl-win{height:auto} .xp-pic .tl-row{flex:none} }

/* ---- EXPERTS PICTURE (home, 2026-10-25): a flat Office screen, the twin of the standards picture above it: the same
   690x526 stage on the app's #fafafa canvas, the app sidebar with Progress open, a Workspace > Go-live plan header,
   the setup steps as white hairline rows (green check rows for done, a royal ring for in progress, quiet bars for
   next) and the expert as a team card with a message and a reply field. Scaled to its column by the page script.
   (Tilted 3D versions after the references came first, the same day.) */
.ep{--s:1;position:relative;width:calc(526px * var(--s));height:calc(var(--h) * var(--s));max-width:100%;--h:472px}
.ep-stage{position:absolute;left:0;top:0;width:526px;height:var(--h);transform:scale(var(--s));transform-origin:0 0;overflow:hidden;
  border-radius:10px;background:#fafafa;box-shadow:inset 0 0 0 1px #e3e9f3;font-family:var(--ui);color:var(--ink)}
.ep-stage *{box-sizing:border-box}
.ep-side{position:absolute;left:0;top:0;bottom:0;width:164px;padding:16px 10px;display:flex;flex-direction:column;gap:2px;
  background:#fff;border-right:1px solid #e9eef5;border-radius:10px 0 0 10px}
.ep-logo{display:block;width:92px;height:auto;margin:0 0 16px 8px}
.ep-side em{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;font-size:13px;line-height:1;font-style:normal;color:#2f3d52}
.ep-side em i{flex:none;width:14px;height:14px;background:#45546a;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.ep-side em.on{background:#eef2f9;color:var(--navy)}
.ep-side em.on i{background:var(--navy)}
.ep-side small{margin:12px 0 4px 8px;font-size:11.5px;line-height:1;color:#5a697f}
.ep-main{position:absolute;inset:0;display:block}
.ep-top{display:flex;align-items:center;height:48px;padding:0 18px 0 22px;background:#fff;border-bottom:1px solid #e9eef5;border-radius:0 10px 0 0}
.ep-crumb{display:flex;align-items:center;gap:6px;font-size:14px;color:#5a697f}
.ep-crumb i{font-style:normal}.ep-crumb b{font-weight:500;color:var(--navy)}
.ep-btn{margin-left:auto;padding:8px 12px;border-radius:6px;background:var(--btn);color:#fff;font-size:12.5px;font-weight:500}
.ep-body{display:block;padding:18px 22px}
.ep-hd{display:flex;align-items:flex-start;justify-content:space-between}
.ep-hd>span{display:flex;flex-direction:column;gap:7px}
.ep-hd b{font-size:22px;font-weight:500;line-height:1;letter-spacing:-.01em;color:var(--ink)}
.ep-hd small{font-size:13px;line-height:1;color:#46556b}
.ep-chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:#fff;border:1px solid #e3e9f3;font-size:12px;line-height:1;font-style:normal;color:#2f3d52}
.ep-chip i{font-style:normal}
.ep-sec{display:flex;align-items:baseline;gap:7px;margin:18px 0 8px}
.ep-sec b{font-size:14px;font-weight:500;line-height:1;color:var(--navy)}
.ep-sec small{font-size:13px;line-height:1;color:#5a697f}
.ep-sec a{margin-left:auto;font-size:12.5px;line-height:1;color:var(--btn)}
.ep-sec a::after{content:" \2192"}
.ep-row{display:flex;align-items:center;gap:10px;height:36px;margin-bottom:6px;padding:0 12px;border-radius:8px;background:#fff;border:1px solid #e4ecf5;font-size:13px;color:#2f3d52}
.ep-row b{font-weight:400;color:var(--ink);white-space:nowrap}
.ep-row b.ep-g{font-weight:500}
.ep-ck{display:block;flex:none}
.ep-r{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12px}
.ep-g{color:#197555}.ep-b{color:var(--btn)}
.ep-marks{display:flex;gap:4px}
.ep-marks img{display:block;width:20px;height:20px;padding:3px;border-radius:5px;background:#fff;box-shadow:0 0 0 1px #e3e9f3}
.ep-ring{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid #c7d1de}
.ep-ring-on{border-color:var(--btn);border-right-color:#dbe3f7}
.ep-q{display:block;width:var(--w);height:7px;border-radius:4px;background:#e6ebf2}
.ep-in{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eceffb;font-size:10px;font-weight:500;line-height:1;font-style:normal;color:#2946b6}
.ep-in-l{width:32px;height:32px;font-size:13px}
.ep-note{display:block;padding:12px 14px;border-radius:8px;background:#fff;border:1px solid #e4ecf5}
.ep-who{display:flex;align-items:center;gap:10px}
.ep-who>span{display:flex;flex-direction:column;gap:5px}
.ep-who b{font-size:14px;font-weight:500;line-height:1;color:var(--ink)}
.ep-who small{font-size:12px;line-height:1;color:#46556b}
.ep-who em{margin-left:auto;align-self:flex-start;font-size:11.5px;font-style:normal;color:#8390a3}
.ep-msg{display:block;margin-top:9px;font-size:13px;line-height:1.45;color:#2f3d52}
.ep-reply{display:flex;align-items:center;margin-top:10px;padding:5px 5px 5px 11px;border-radius:7px;border:1px solid #e3e9f3;font-size:12px;color:#8390a3}
.ep-send{margin-left:auto;display:block;width:24px;height:24px;border-radius:6px;background:var(--btn) url(../assets/icons/ep-send.svg) center/13px 13px no-repeat}
/* the moving parts (2026-10-25): two states stacked in one cell (ep-sw), the a-parts the start, the b-parts the
   finish. With no motion the b-parts show: writing the standards done, 5 of 6, the first routine in progress and
   Sam's new message. Motion: the EXPERTS block in css/motion.css. */
.ep-sw{display:inline-grid;justify-items:end;align-items:center}
.ep-sw>*{grid-area:1/1}
.ep-swl{display:grid;justify-items:start}
.ep-ic{position:relative;flex:none;width:16px;height:16px}
.ep-ic>*{position:absolute;left:0;top:0}
.ep-a3,.ep-a4,.ep-a5{opacity:0}
.ep-msg.ep-sw{display:grid}
.ep-dots{display:flex;gap:4px;align-self:start;padding:6px 0;opacity:0}
.ep-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#9aa7b8}
.xp-pic{align-items:center}

/* product Experts (2026-10-25): a glass frame round the Setup window on the grey band, after the departments window
   (rotate.css .cl-win): a 14px band of clear white between a bright inner edge and a faint outer line, with the
   soft shadow under it. Drawn as box-shadow rings so the window's box does not move. */
#experts .tl-win{box-shadow:0 0 0 1px #e3e9f3,0 0 0 2px rgba(255,255,255,.95),0 0 0 14px rgba(255,255,255,.7),
  0 0 0 15px rgba(2,37,79,.1),0 30px 60px -30px rgba(2,37,79,.35)}
/* white since the background rotation (2026-10-25): the frame's outer line a touch firmer so it holds on white, and no
   hairline on top, since it follows the dark AI workers band */
#experts.xp-sec{border-top:0}
@media (max-width:767px){ #experts .tl-win{box-shadow:0 0 0 1px #e3e9f3,0 0 0 2px rgba(255,255,255,.95),0 0 0 9px rgba(255,255,255,.7),
  0 0 0 10px rgba(2,37,79,.08),0 24px 48px -26px rgba(2,37,79,.35)} }

/* phones (2026-10-25, home first, then every page): text links get a 44px tap area from an invisible layer 12px
   above and below them, so nothing moves */
@media (max-width:767px){
  .fn-more,.tlc-soon a{position:relative}
  .fn-more::before,.tlc-soon a::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
}



/* product Experts on phones (2026-10-25): the Setup window keeps its In progress tag, there is room for it */
@media (max-width:767px){ #experts .tl-tag{display:inline} }

/* Experts right after the dark AI workers band needs no hairline (2026-10-25) */
.flow+.xp-sec{border-top:0}

/* ---- ONE FRAME (2026-10-25): every app picture on the product page wears the hero's framed window, the shot's clear
   band between two hairlines (css/health.css .mt-win). On the light sections the band takes a pale royal tint so it
   still reads; the hero keeps its white glass on the blue fade. Box-shadow rings, so nothing moves. */
#hood .cx-win,#experts .tl-win{border-color:#dfe6f2;box-shadow:0 0 0 1px #dfe6f2,0 0 0 14px rgba(65,105,225,.05),0 0 0 15px rgba(41,70,182,.11),0 34px 70px -30px rgba(2,37,79,.35)}
@media (max-width:767px){ #experts .tl-win{box-shadow:0 0 0 1px #dfe6f2,0 0 0 9px rgba(65,105,225,.05),0 0 0 10px rgba(41,70,182,.11),0 24px 48px -26px rgba(2,37,79,.35)} }

/* ---- ROUNDED SECTIONS (2026-10-31, home): where the colour changes between two sections, the lower one is a card with
   large rounded top corners that rises over the one before it, so that section shows in the corners. After the hero too
   since the film became its background (2026-11-01; it was left out before), not between two sections of the same colour, not on the footer (it joins the grey closing). Today: Business functions
   (grey over white), the standards (white over grey) and the closing (grey over white). A hairline follows the curve */
.home{--sec-r:48px}
.home #desks,.home #learn,.home .final{position:relative;margin-top:calc(-1 * var(--sec-r));border-radius:var(--sec-r) var(--sec-r) 0 0;box-shadow:0 -1px 0 var(--line)}
.home #learn{background:#fff}
/* Why Manelink (2026-11-01, Wafi): now that the film is the hero's background, this section is a white card too, rising
   over the film's foot so the film shows in its corners (the hero's pause button and card move up to stay clear) */
.home #pillars{position:relative;z-index:2;margin-top:calc(-1 * var(--sec-r));border-radius:var(--sec-r) var(--sec-r) 0 0;background:#fff;box-shadow:0 -1px 0 var(--line)}   /* every width (2026-11-01, Wafi; it was desktop only for a while) */
.home #desks{z-index:3}.home #learn{z-index:4}   /* each card above the one it rises over (2026-11-02, Wafi): #pillars sits at 2, so at auto Business functions' rounded top was painted over by it */
/* the card covers the bottom --sec-r of the section before it, so that section gets the room back (pillars through evenEnd) */
.home #desks,.home #stories{padding-bottom:calc(96px + var(--sec-r))}
@media (max-width:767px){ .home{--sec-r:28px} .home #desks,.home #stories{padding-bottom:calc(64px + var(--sec-r))} }
/* the same on every other page, set by the script in partials/nav.html (2026-10-31) */
:root{--sec-r:48px}
@media (max-width:767px){ :root{--sec-r:28px} }
.sec-rd{position:relative;margin-top:calc(-1 * var(--sec-r)) !important;border-radius:var(--sec-r) var(--sec-r) 0 0;box-shadow:0 -1px 0 var(--line)}

/* THE FILM's button (2026-11-01): play or pause, bottom right of any [data-film] frame, in frosted white (the hero film) */
[data-film] .af-pp{position:absolute;right:16px;bottom:16px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.6);border-radius:50%;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--navy);cursor:pointer;box-shadow:0 6px 16px -8px rgba(8,18,70,.4)}
[data-film] .af-pp:hover{background:#fff}
[data-film] .af-pp:focus-visible{outline:2px solid var(--btn);outline-offset:3px}
[data-film] .af-pause{display:none}[data-film].playing .af-pause{display:block}[data-film].playing .af-play{display:none}
@media (max-width:767px){ [data-film] .af-pp{right:10px;bottom:10px;width:36px;height:36px} }

/* ---- CLOSING + FOOTER, one light grey block on every page (2026-11-01, Wafi; designed in the sandbox's
   mockup-home-closing.html) --------------------------------------------------------------------------------------------
   partials/footer.html holds the whole block, and every page shows all of it (2026-11-01, Wafi: the same footer on all
   pages; a footer-only version for Contact, Blog and the like was built and dropped). "See your AI team at work", the
   demo sentence and the two buttons on the left, the calculator and readiness cards on the right. Below: two plain link columns, then a hairline and the base row (full logo, copyright,
   the social icons in clear grey boxes). The block rises over the section before it with the rounded top (--sec-r).
   The old .final and footer rules above stay for mockups; footer.ce overrides them. */
.final[data-ce]{display:none!important}
footer.ce{position:relative;z-index:1;margin-top:calc(-1 * var(--sec-r));padding:0;overflow:hidden;border-radius:var(--sec-r) var(--sec-r) 0 0;
  background:#f4f6f9;box-shadow:0 -1px 0 var(--line);   /* flat #f4f6f9 (sandbox 2026-11-02, Wafi; #fafafa before, Wafi's earlier swatch, after trying #f5f7fd and a black gradient; a #f6f7f9 to #f0f2f5 fade before that) */
 color:var(--navy);font-size:var(--fs-small)}
footer.ce:before{content:none}
/* the site art rule: a fine grey dot field, strongest at the bottom right and fading toward the top left (2026-11-01, Wafi) */
footer.ce:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(2,37,79,.18) 1.15px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask:radial-gradient(120% 100% at 100% 100%,#000 15%,rgba(0,0,0,.35) 55%,transparent 85%);mask:radial-gradient(120% 100% at 100% 100%,#000 15%,rgba(0,0,0,.35) 55%,transparent 85%)}
footer.ce .wrap{position:relative;z-index:1;padding-top:104px;padding-bottom:40px}
footer.ce a{margin:0;width:auto}
footer.ce a:focus-visible{outline:2px solid var(--btn);outline-offset:3px}

.ce-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,clamp(380px,36vw,500px));gap:56px clamp(48px,7vw,120px);align-items:start}
.ce-right{display:flex;flex-direction:column;gap:56px}
.ce-sign{margin:0 0 40px;max-width:none;font:var(--fw-title) clamp(44px,5vw,72px)/1.02 var(--display);letter-spacing:-.03em;color:var(--navy);white-space:nowrap}
footer.ce .ce-sign a{display:inline;font:inherit;color:inherit;text-decoration:none}
.ce-lead{margin:0;font:var(--fw-title) 24px/1.35 var(--display);letter-spacing:-.01em;color:var(--mute)}
footer.ce .ctas{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:12px;margin:28px 0 0}
footer.ce .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)}
footer.ce .btn.g:hover{background:#fff;border-color:#c9d3e6}

/* the two cards: slim white rows with an arrow */
.ce-cards{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px}
footer.ce .ce-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 52px 17px 20px;border:1px solid #e3e8f1;border-radius:var(--r-card);background:#fff;color:var(--navy);text-decoration:none;transition:border-color .15s,box-shadow .15s}
footer.ce .ce-card:hover{border-color:#c9d3e6;box-shadow:0 10px 24px -16px rgba(2,37,79,.25)}
.ce-card:after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid var(--navy);border-width:1.6px 1.6px 0 0;transform:rotate(45deg);opacity:.85;transition:transform .15s}
.ce-card:hover:after{transform:translateX(3px) rotate(45deg);opacity:1}
.ce-card b{font:var(--fw-title) 17px/1.3 var(--display);color:var(--navy);white-space:nowrap}

/* the links: two plain columns; hover turns the site's blue, no underline (site rule since 2026-10-15) */
.ce-links{display:grid;grid-template-columns:auto auto;gap:24px clamp(48px,7vw,120px)}
.ce-col{display:flex;flex-direction:column;gap:16px;min-width:0}
footer.ce .ce-col a{font:var(--fw-title) 17px/1.3 var(--display);color:var(--navy);opacity:.9;white-space:nowrap;text-decoration:none;transition:color .15s ease}

/* base row: the full logo on the left, the copyright in the centre on one line, the social icons on the right */
.ce-base{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;margin-top:96px;padding-top:24px;color:var(--mute)}
/* the divider (2026-11-01, Wafi: fix it): one solid hairline on a 14px band in the footer's own grey, so the dot field
   never lands on it (a row of dots sat right on the old border and read as beads on a string) */
.ce-base::before{content:"";position:absolute;left:0;right:0;top:-7px;height:15px;pointer-events:none;
  background:linear-gradient(180deg,transparent 7px,#dce2eb 7px,#dce2eb 8px,transparent 8px),#f4f6f9}   /* the band in the footer's colour (2026-11-02: it kept the old #f1f3f6 and showed as a grey strip) */   /* a light hairline, between #e4e9f0 and #d6dde8 (Wafi tuned it both ways) */
.ce-id{display:flex;align-items:center;gap:20px;justify-self:start}
.ce-made{margin:0;text-align:center;line-height:1.45;color:var(--mute);white-space:nowrap}
footer.ce .ce-logo{display:block}
.ce-logo img{display:block;height:37px;width:auto}   /* the old footer's logo size, 153 x 37 (2026-11-01, Wafi; was 32px) */
.ce-reach{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;justify-self:end}
footer.ce .ce-soc{margin:0;gap:10px}
/* clear grey boxes: #fafafa with a hairline edge, the icon in navy (the icon files are white, so each is drawn as a navy shape through a mask) */
footer.ce .ft-ic{position:relative;width:44px;height:44px;background:#f4f6f9;border:1px solid #d3dae5;transition:border-color .15s ease,background-color .15s ease}
footer.ce .ft-ic:hover{background:#fff;border-color:#b7c2d3}
footer.ce .ft-ic:before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--navy);
  -webkit-mask:var(--ic) no-repeat center/contain;mask:var(--ic) no-repeat center/contain}
footer.ce .ft-li{--ic:url(../assets/icons/soc-linkedin.svg)} footer.ce .ft-ig{--ic:url(../assets/icons/soc-instagram.svg)} footer.ce .ft-x{--ic:url(../assets/icons/soc-x.svg)}

footer.ce .ce-col a:hover,footer.ce .ce-base a:hover,footer.ce .ce-col a:focus-visible,footer.ce .ce-base a:focus-visible{color:var(--blue);opacity:1;text-decoration:none}

/* tablets: one column, the cards and links under the ask */
@media (max-width:991px){
  .ce-main{grid-template-columns:minmax(0,1fr)}
  .ce-right{gap:48px}
  .ce-cards{max-width:560px}
}
/* phones: heading, sentence, buttons, the two card rows, then the links in two columns */
@media (max-width:767px){
  footer.ce .wrap{padding-top:72px;padding-bottom:32px}
  .ce-sign{margin-bottom:28px;font-size:min(36px, calc((100vw - 34px) / 8.2))}
  .ce-lead{font-size:20px}
  .ce-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
  .ce-col{gap:14px}
  footer.ce .ce-col a{font-size:16px}
  .ce-card b{white-space:normal}
  .ce-base{grid-template-columns:1fr;gap:16px;margin-top:64px}
  .ce-made{text-align:left;white-space:normal}
  .ce-reach{justify-self:start}
}
/* Why Manelink's intro wraps evenly on its own (2026-11-01: a hard break left "the / workers" on phones) */
.ps-sh .lead{max-width:620px;text-wrap:balance}   /* two even lines on desktop (keep the lead short enough for two: about 90 characters at 19px in the 453-543px column) */
/* Why Manelink's header in two columns (2026-11-02, Wafi): the heading a size down so it fits the chapters' column on
   the left, the intro on the right over the stack's box, on the same columns as the pinned block (1fr | 1.05fr, 72px) */
@media (min-width:992px){
  .ps-sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:72px;row-gap:14px;align-items:end}
  .ps-sh .eyebrow{grid-column:1;grid-row:1}
  .ps-sh h2{grid-column:1;grid-row:2;font-size:min(32px,2.6vw)}   /* 32px since 2026-11-02 (Wafi: smaller; was 38) */
  .ps-sh .lead{grid-column:2;grid-row:1 / 3;align-self:end;max-width:none;margin:0}
}

/* 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-reports .nv-res,.p-sales .nv-sol,.p-marketing .nv-sol,.p-operations .nv-sol,.p-finance .nv-sol,.p-commerce .nv-sol,.p-people .nv-sol,.p-legaldesk .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. */
/* 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.
   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}
/* a one-line description of the hovered desk or industry, top left of the preview, so the
   panel says what the page holds before the click */
.nd-pvd{position:absolute;left:18px;right:18px;top:14px;font:400 13.5px/1.45 var(--web);color:var(--mute);text-align:left}
.nd-pvd b{display:block;margin-bottom:2px;font-weight:600;color:var(--navy)}   /* inherit, not visible: a visible child of the closed panel would catch the hover and open the menu */
.nd-p1 .nd-mini{width:74%}
/* Solutions in two lists, by team and by industry (2026-10-15, after Stripe's Solutions menu).
   Industry links share the desk hover (.nd-desk, data-pv 5 to 10), so each shows its own picture. */
.nd-p1{width:900px;margin-left:-450px}
.nd-split3{grid-template-columns:200px 236px 1fr;gap:12px}
.nd-lab{display:block;padding:2px 10px 8px;font:500 14px var(--web);color:var(--navy)}   /* plain dark labels, as in the phone menu */
.nd-inds{padding-left:12px;border-left:1px solid var(--line)}
.nav nav .nd-ind{padding:7px 10px;font:500 14.5px/1.3 var(--web)}
.nav nav .nd-all{display:inline-flex;align-items:center;gap:6px;margin:8px 10px 0;font:600 13.5px var(--web);color:var(--btn)}
.nav nav .nd-all:after{content:"";width:6px;height:6px;border:solid currentColor;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.nd-chip.nd-wt{background:#fdf3e6;color:var(--amber)}
.mp-lab{display:block;margin:4px 0 6px;font:500 16px var(--web);color:var(--navy)}
.mp-lab.mp-first{margin-top:0}
/* phone menu groups, after Stripe's: one column of blue links under plain dark headings, a divider between groups */
.mp-lab.mp-sep{margin-top:18px;padding-top:26px;border-top:1px solid var(--line)}
/* 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)}
/* every menu after Clay's: small grey labels, title-only links, a thin line between columns */
.nd-panel.nd-slim{left:50%;display:grid}
.nd-panel.nd-two{width:440px;margin-left:-220px;grid-template-columns:1fr 1fr}
.nd-panel.nd-three{width:600px;margin-left:-300px;grid-template-columns:1fr 1fr 1fr}
.nd-slim .nd-col{gap:0;padding:20px 12px 18px}
.nd-slim .nd-col h4{margin:0 0 6px;font-size:var(--fs-label)}
.nav nav .nd-slim .nd-item{padding:7px 10px}
.nd-slim .nd-item b{font:500 14.5px/1.3 var(--web);color:var(--navy)}
.nav nav .nd-slim .nd-item:hover b{color:var(--btn)}
/* rounded on all four corners after Clay's, set 8px below the bar; the strip above keeps hover alive across the gap */
.nd-panel.nd-slim{top:calc(100% + 8px);border-top:1px solid var(--line);border-radius:var(--r-panel);overflow:visible}
.nd-panel.nd-slim:before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.nd-slim .nd-col:last-child{border-radius:0 15px 15px 0}
/* Solutions rows carry a small icon tile, as Clay's menus do */
.nav nav .nd-icons .nd-item{align-items:center;gap:10px;padding:5px 10px}
.nd-ic{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--r-tile);background:var(--sky)}
.nd-ic img{display:block;width:16px;height:16px}
/* one height for every menu: Solutions lays each list in two short columns, one row taller for the eight industries */
.nd-panel.nd-slim{height:196px}
.nd-panel.nd-slim.nd-icons{height:234px}
.nd-panel.nd-icons{width:760px;margin-left:-380px}
.nd-icons .nd-item b{white-space:nowrap}
.nd-icons .nd-col{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto repeat(3,auto);grid-auto-flow:column;align-content:start;column-gap:4px}
.nd-icons .nd-col.nd-r4{grid-template-rows:auto repeat(4,auto)}   /* By industry: eight items, two columns of four */
.nd-icons .nd-col h4{grid-row:1;grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;height:16px;line-height:16px}
.nav nav .nd-all{padding:0;font:500 12.5px/16px var(--web);letter-spacing:0;text-transform:none;color:var(--btn)}
.nav nav .nd-all:hover{color:var(--blue-d)}
/* a feature card closes each menu, after Clay's: a picture, a small label and one line.
   Shown on every desktop width, a little narrower below 1280px */
.nd-panel.nd-p0.nd-slim{width:640px;margin-left:-320px;grid-template-columns:1fr 1fr 210px}
.nd-panel.nd-p1.nd-slim{width:940px;margin-left:-470px;grid-template-columns:1fr 1fr 210px}
.nd-panel.nd-p2.nd-slim{width:800px;margin-left:-400px;grid-template-columns:1fr 1fr 1fr 210px}
.nd-slim .nd-col.nd-fcol{display:block;padding:10px;background:var(--cloud)}
@media (max-width:991px){ .nd-slim .nd-col.nd-fcol{display:none} }
@media (min-width:1280px){
  .nd-panel.nd-p0.nd-slim{width:680px;margin-left:-340px;grid-template-columns:1fr 1fr 240px}
  .nd-panel.nd-p1.nd-slim{width:980px;margin-left:-490px;grid-template-columns:1fr 1fr 240px}
  .nd-panel.nd-p2.nd-slim{width:840px;margin-left:-420px;grid-template-columns:1fr 1fr 1fr 240px}
}
/* the picture card is flat with --r-panel corners and no border, as the site's tiles (2026-11-05, Wafi) */
.nav nav .nd-feat{display:flex;flex-direction:column;height:100%;border:0;border-radius:var(--r-panel);background:#fff;overflow:hidden;color:var(--navy);text-decoration:none;transition:box-shadow .15s ease}
.nav nav .nd-feat:hover{box-shadow:0 10px 24px -14px rgba(2,37,79,.35)}
.nd-fimg{display:block;flex:none;height:96px;overflow:hidden;background:var(--sky)}
.nd-feat small{margin:10px 12px 3px;font:600 11px/14px var(--web);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--t4)}
.nd-feat b{margin:0 12px;font:500 14px/18px var(--web);color:var(--navy)}
.nav nav .nd-feat:hover b{color:var(--btn)}
/* Solutions: five industry cards in the Industries colours, fanning out as the menu opens (the only card that moves) */
.nd-fan{position:relative;background:#e9eefb}
.nd-fan i{position:absolute;left:50%;bottom:-40px;width:50px;height:104px;margin-left:-25px;border-radius:9px;transform-origin:50% 150%;
  background:linear-gradient(170deg,var(--ac) 0%,var(--ac) 30%,var(--ac2) 65%,var(--soft) 100%);box-shadow:0 10px 18px -8px rgba(2,20,70,.45),inset 0 0 0 1px rgba(255,255,255,.18);
  transition:transform .6s cubic-bezier(.2,.8,.2,1) .1s}
.nd-fan .nf1{--a:-40deg;--ac:#2946b6;--ac2:#5a78dc;--soft:#cfe0fb}
.nd-fan .nf2{--a:-20deg;--ac:#4a5fd0;--ac2:#8193ea;--soft:#d3daf8;z-index:1}
.nd-fan .nf3{--a:0deg;--ac:#1f6fa8;--ac2:#4e97cc;--soft:#c9e4f1;z-index:2}
.nd-fan .nf4{--a:20deg;--ac:#1e39a3;--ac2:#4a64c8;--soft:#c3cff2;z-index:1}
.nd-fan .nf5{--a:40deg;--ac:#5b5bd6;--ac2:#8b8bea;--soft:#dad8f8}
.nd.open .nd-fan i{transform:rotate(var(--a))}
@media (hover:hover){ .nd:hover .nd-fan i{transform:rotate(var(--a))} }
@media (prefers-reduced-motion:reduce){ .nd-fan i{transform:rotate(var(--a));transition:none} }
/* Solutions picture card: Hire AI workers (2026-11-05, Wafi: "add it to the Solutions menu"). Three department lead
   portraits as small framed cards, the hire page's hero fan in miniature; they spread a little when the menu opens */
.nd-hire{position:relative;background:#e9eefb}
.nd-hire i{position:absolute;left:50%;top:16px;width:54px;height:68px;margin-left:-27px;border-radius:11px;border:3px solid var(--c);background:#dfe7f6 center/cover no-repeat;
  box-shadow:0 8px 16px -10px rgba(2,37,79,.5);transform:translateX(var(--x0)) rotate(var(--r0));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.nd-hire .nh1{--c:#8fa6f0;--x0:-30px;--r0:-8deg;--x1:-50px;--r1:-12deg;background-image:url(../assets/img/seats/commerce-lead-320.jpg)}
.nd-hire .nh2{--c:#4169e1;--x0:0px;--r0:0deg;--x1:0px;--r1:0deg;z-index:1;background-image:url(../assets/img/seats/sales-lead-320.jpg)}
.nd-hire .nh3{--c:#2946b6;--x0:30px;--r0:8deg;--x1:50px;--r1:12deg;background-image:url(../assets/img/seats/finance-lead-320.jpg)}
.nd.open .nd-hire i{transform:translateX(var(--x1)) rotate(var(--r1))}
@media (hover:hover){ .nd:hover .nd-hire i{transform:translateX(var(--x1)) rotate(var(--r1))} }
@media (prefers-reduced-motion:reduce){ .nd-hire i{transition:none} }
/* Product and Resources draw in the same style: a pale panel and blue gradient cards */
.nd-win,.nd-paper{position:relative;background:#e9eefb}
.nd-win .nw,.nd-paper i{position:absolute;left:50%;display:block;
  background:linear-gradient(170deg,var(--ac) 0%,var(--ac) 30%,var(--ac2) 65%,var(--soft) 100%);box-shadow:0 10px 18px -8px rgba(2,20,70,.45),inset 0 0 0 1px rgba(255,255,255,.18)}
/* Product: one Office window with a sidebar and three lines */
.nd-win .nw{bottom:-30px;width:150px;height:100px;margin-left:-75px;border-radius:10px;overflow:hidden;--ac:#2946b6;--ac2:#5a78dc;--soft:#cfe0fb}
.nw-side{position:absolute;left:0;top:0;bottom:0;width:36px;background:rgba(255,255,255,.14)}
.nw-row{position:absolute;left:48px;height:6px;border-radius:3px;background:rgba(255,255,255,.55)}
.nw-row.r1{top:16px;width:64px}.nw-row.r2{top:30px;width:44px}.nw-row.r3{top:44px;width:56px}
/* Resources: three papers, the front one with lines */
.nd-paper i{bottom:-26px;width:62px;height:90px;margin-left:-31px;border-radius:var(--r-tile);overflow:hidden;transform-origin:50% 140%;transform:translateX(var(--x)) rotate(var(--a))}
.nd-paper .np1{--a:-14deg;--x:-30px;--ac:#4a5fd0;--ac2:#8193ea;--soft:#d3daf8}
.nd-paper .np2{--a:14deg;--x:30px;--ac:#5b5bd6;--ac2:#8b8bea;--soft:#dad8f8}
.nd-paper .np3{--a:0deg;--x:0px;--ac:#1e39a3;--ac2:#4a64c8;--soft:#c3cff2;z-index:1}
.nd-paper .nw-row{left:12px}.nd-paper .nw-row.r1{width:38px}.nd-paper .nw-row.r2{width:26px}.nd-paper .nw-row.r3{width:32px}
/* 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:12px 0;font:500 17px var(--web);color:var(--btn);text-decoration:none}
.mp-sub a:hover,.mp-l:hover{color:var(--btn);text-decoration:none}
.mp-sub a:hover{color:var(--blue-d)}   /* the links are already blue; hover darkens them */
.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 ------------------------------------------------------ */
.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 --------------------------------------------------------- */
@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. */
/* COMPANY (rebuilt 2026-10-02): the Services blue hero with a Needs you card, a short why,
   three rules, and who is behind it with a contact card */
.co-quote{justify-self:center;width:100%;max-width:440px;margin:0;padding:36px 36px 30px;border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 12px rgba(255,255,255,.12),0 30px 60px -20px rgba(2,10,40,.5)}
.co-quote blockquote{position:relative;margin:0;padding-top:34px;font:500 30px/1.25 var(--display);letter-spacing:-.02em;color:var(--navy)}
.co-quote blockquote:before{content:"\201C";position:absolute;left:-2px;top:-14px;font:600 64px/1 var(--display);color:var(--btn)}
.co-quote figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font:500 14px var(--web);color:var(--t4)}
.co-why{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:72px;align-items:start}
.co-text p{margin:0 0 18px;font:400 18px/1.7 var(--ui);color:var(--mute)}
.co-text p:last-child{margin-bottom:0}
.co-more a{font:600 16px var(--ui);color:var(--btn);text-decoration:none}
.co-more a:after{content:" →"}
.co-more a:hover{text-decoration:none}
.co-who{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:72px;align-items:center}
.co-who .co-text{margin-top:24px;max-width:600px}
.co-contact{display:flex;flex-direction:column;gap:8px;padding:28px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 18px 40px -28px rgba(2,37,79,.22)}
.co-contact small{font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.co-mail{font:600 22px/1.3 var(--display);color:var(--btn);text-decoration:none;overflow-wrap:anywhere}
.co-mail:hover{text-decoration:none}
.co-contact p{margin:0;font-size:15px;line-height:1.5;color:var(--mute)}
.co-press{margin-top:10px;padding-top:14px;border-top:1px solid var(--line);font:600 15px var(--ui);color:var(--navy);text-decoration:none}
.co-press:hover{color:var(--btn)}
/* how we got here: a vertical roadmap, done steps lit in turn by motion.css (co-d / co-l),
   today marked, what comes next left open (dashed) */
.co-roadhd{position:sticky;top:120px;align-self:start}
.co-text-s{margin:14px 0 0;font:400 16px/1.6 var(--ui);color:var(--t4)}
.co-stages{list-style:none;margin:0;padding:0}
.co-st{position:relative;display:flex;flex-direction:column;gap:4px;padding:0 0 30px 40px}
.co-st:before{content:"";position:absolute;left:7px;top:22px;bottom:-4px;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:4px;width:16px;height:16px;box-sizing:border-box;border-radius:50%;border:2px solid #cdd7e3;background:#fff}
.co-st:first-child:after{border-color:var(--blue);background:var(--blue)}   /* the first build: where it started, always lit */
.co-st b{font:600 19px/1.35 var(--display);letter-spacing:-.01em;color:var(--navy)}
.co-st b em{margin-left:8px;padding:2px 8px;border-radius:5px;background:#e7f6ee;font:600 12px var(--web);font-style:normal;color:var(--green);vertical-align:2px}
.co-st span{font-size:16px;line-height:1.6;color:var(--mute)}
.co-st.co-next:after{border-style:dashed;border-color:var(--t4);background:transparent}
.co-st.co-next b{color:var(--t4)}
@media (max-width:991px){ .co-why,.co-who{grid-template-columns:minmax(0,1fr);gap:28px} .co-contact{max-width:440px} .co-roadhd{position:static} }
@media (max-width:479px){ .co-quote{padding:28px 24px 24px} .co-quote blockquote{font-size:25px} .co-text p{font-size:17px} .co-st b{font-size:17px} }

/* company in the services page's style (css/services.css): the pieces that page
   does not already carry */
.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}
.co-holds .sv-item h3{font-size:18px;line-height:26px}
.co-holds .sv-item h3:before{top:6px;height:16px}
.co-holds .sv-item p{font-size:17px;line-height:1.6}
.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 */
/* 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 14%,#2946b6 27%,#4a68d2 44%,#89a3ec 54%,#c4d2f7 63%,#eef2fd 71%,#fff 78%)}
.bt-fade .mt-band{background:transparent}
@media (max-width:767px){ .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%)} }   /* phones keep the earlier fade, as on Home */



/* 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%)}
/* Company and Press open onto the grey section, so their hero lifts to that grey, not to white:
   no seam where the two meet */
.p-company .sv.sv-hero.sv-blue,.p-press .sv.sv-hero.sv-blue{
  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%,#dfe5f8 93%,#fafafa 100%)}
.sv-hero.sv-blue .sv-guides i{background-image:linear-gradient(180deg,rgba(255,255,255,.12) 50%,transparent 50%)}
/* ...and the guide lines hand over from white to the next section's grey dashes as the hero pales
   (Services too: its hero ends on white, so only the lines needed this) */
.p-company .sv-hero.sv-blue .sv-guides i:after,.p-press .sv-hero.sv-blue .sv-guides i:after,.p-services .sv-hero.sv-blue .sv-guides i:after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(66,71,112,.09) 50%,transparent 50%);background-size:1px 8px;
  -webkit-mask-image:linear-gradient(180deg,transparent 70%,#000 92%);mask-image:linear-gradient(180deg,transparent 70%,#000 92%)}
.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-ctas{margin-top:0}
.sv-hero.sv-blue .sv-more{color:#fff}
.sv-hero.sv-blue .sv-more:hover{color:#dfe6fb}
.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}

/* Press (press.html): the facts list, the names and the brand assets. Shared .sv sections come from services.css */
/* PRESS: the Services blue hero with a white press card beside the copy, facts at full
   width and name cards with an icon */
.pr-use{margin:0 0 28px;max-width:560px;font:400 16px/1.6 var(--ui);color:rgba(255,255,255,.72)}
.p-press .sv-hero .sv-lead{margin:24px 0 16px;font-weight:500;color:#fff}
.pr-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pr-card{justify-self:center;width:100%;max-width:420px;padding:32px 32px 24px;border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 12px rgba(255,255,255,.12),0 30px 60px -20px rgba(2,10,40,.5)}
.pr-card img{display:block;width:152px;height:auto}   /* the full logo at the nav's size: a signature, not a headline */
.pr-cline{margin:10px 0 22px;font:400 15px/1.4 var(--web);color:var(--t4)}
.pr-card dl{margin:0}
.pr-card dl div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);font:400 14px/1.4 var(--web)}
.pr-card dt{color:var(--t4)}
.pr-card dd{margin:0;font-weight:600;color:var(--navy);text-align:right}
.pr-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;margin:32px 0 0}
.pr-f{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:20px;padding:18px 0;border-top:1px solid var(--line)}
.pr-f dt{font:600 16px/1.5 var(--web);color:var(--navy)}
.pr-f dd{margin:0;color:var(--mute);font-size:17px;line-height:1.55}
.pr-f a,.pr-names a{color:var(--btn)}
.pr-names{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.pr-n{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;align-items:start;padding:22px 24px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pr-ic{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:8px;background:var(--sky)}
.pr-ic img{display:block;width:18px;height:18px}
.pr-n b{font:600 19px/1.3 var(--display);letter-spacing:-.01em;color:var(--navy)}
.pr-n>span:last-child{margin-top:4px;color:var(--mute);font-size:16px;line-height:1.5}
@media (max-width:991px){.pr-facts{grid-template-columns:minmax(0,1fr)}.pr-names{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.pr-f{grid-template-columns:minmax(0,1fr);gap:4px}.pr-names{grid-template-columns:minmax(0,1fr)}}

/* pricing hero picture (2026-11-02, Wafi): the Office dashboard that was the home hero, in its glass frame on the blue, 960px wide at most (a size down, 2026-11-02, Wafi; was the 1180px column).
   The window is 1130x740 with JS (the screenshot fills the top, the live layer the rest), as it was on the home page */
.pr-dash .shot{max-width:960px;margin:0 auto;border-color:rgba(255,255,255,.55);
  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 (min-width:768px){ .js .pr-dash .shot{aspect-ratio:1130/740} .js .pr-dash .shot .shot-lg{display:block;width:100%;height:auto} }
@media (max-width:767px){ .pr-dash .shot{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)} }
/* a real glass frame (2026-11-02, Wafi): a frosted panel round the window, 14px of it (8 on phones), a bright hairline edge and
   a soft shadow under it; the ribbon behind shows through, blurred. The window's own rings give way to one white hairline */
.pr-glass{position:relative;max-width:988px;margin:0 auto;padding:14px;border-radius:calc(var(--r) + 14px);
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 40px 80px -32px rgba(8,18,70,.5)}
.pr-dash .pr-glass .shot{max-width:none;margin:0;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:767px){ .pr-glass{padding:8px;border-radius:calc(var(--r) + 8px)} .pr-dash .pr-glass .shot{box-shadow:0 0 0 1px rgba(255,255,255,.6)} }
.rq-sec .rq{margin-top:0}

/* css/solutions.css */
/* Solutions pages (solutions/sales.html, solutions/marketing.html, solutions/operations.html), after
   clay.com/clay-for-sales and clay-for-marketing. Shared parts first, then each page's pictures.
   Motion is transitions switched on by .go and .done. With JS off every picture shows its
   resting frame. */

/* ============================= HERO ============================= */
/* the royal fade, as Home and Services: deep royal at the top, white by the window's lower half */
.sl-hero{padding:150px 0 0;text-align:center;overflow-x:clip;   /* the callouts hang past the frame; never let them scroll the page */
  
  background:radial-gradient(90% 38% at 0 0,rgba(8,18,70,.55),transparent 70%),
    radial-gradient(70% 32% at 100% 14%,rgba(96,131,226,.35),transparent 70%),
    linear-gradient(180deg,#152a84 0%,#1e39a3 14%,#2946b6 27%,#4a68d2 40%,#89a3ec 52%,#c4d2f7 62%,#eef2fd 70%,#fff 78%)}
.sl-hero .wrap{display:flex;flex-direction:column;align-items:center}
.sl-hero h1{margin:22px 0 0;max-width:15ch;color:#fff;font-size:clamp(48px,6vw,84px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.sl-hero .lead{margin:22px auto 0;max-width:44ch;color:rgba(255,255,255,.86);text-wrap:balance}
.sl-hero .ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:30px}
.sl-hero .btn{height:52px;padding:0 26px;font-size:16px}
.sl-hero .btn.p{background:#fff;color:var(--btn)}
.sl-hero .btn.p:hover{background:#eef2fd}
.sl-hero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.sl-hero .btn.g:hover{background:rgba(255,255,255,.12)}
.sl-hero .btn:focus-visible{outline-color:#fff}

/* the "for" picker, after Clay's "Clay for Sales teams" select: a native disclosure, so it
   opens with JS off */
.sl-pick{position:relative;z-index:5}
.sl-pick summary{display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 5px 0 14px;border:1px solid rgba(255,255,255,.3);border-radius:var(--rb);
  background:rgba(255,255,255,.1);color:#fff;font:500 15px var(--web);cursor:pointer;list-style:none}
.sl-pick summary::-webkit-details-marker{display:none}
.sl-pick summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sl-pick-now{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 12px;border-radius:5px;background:#fff;color:var(--navy);font-weight:600}
.sl-pick-now:after{content:"";width:6px;height:6px;margin-top:-3px;border:solid var(--navy);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s ease}
.sl-pick[open] .sl-pick-now:after{margin-top:3px;transform:rotate(-135deg)}
.sl-pick-menu{position:absolute;top:calc(100% + 8px);left:50%;min-width:220px;padding:6px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--shadow);text-align:left;transform:translateX(-50%)}
.sl-pick-menu a{display:block;padding:9px 12px;border-radius:5px;color:var(--ink);font:500 15px var(--web)}
.sl-pick-menu a:hover{background:var(--hover);text-decoration:none}
.sl-pick-menu .sl-pick-on{background:var(--sky);color:var(--btn);font-weight:600}

/* ---- the Office window on the fade: a glass frame, no backdrop of its own ---- */
.sl-stage{position:relative;width:100%;max-width:1040px;margin:64px auto 0;text-align:left}
.sl-win{overflow:hidden;border-radius:var(--r);background:#fff;
  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)}
.sl-wbar{display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border-bottom:1px solid var(--line);font:500 13px var(--web);color:var(--mute)}
.sl-wbar b{color:var(--navy);font-weight:600}
.sl-mk{width:18px;height:18px;background:url(../assets/img/manelink-mark.svg) center/contain no-repeat}
.sl-crumb:before{content:"/";margin-right:10px;color:var(--rail)}
.sl-me{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:var(--navy)}
.sl-av{flex:none;display:inline-block;width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.sl-wbody{display:grid;grid-template-columns:200px minmax(0,1fr);min-height:356px}
.sl-side{display:flex;flex-direction:column;gap:2px;padding:16px 12px;border-right:1px solid var(--line);background:var(--cloud)}
.sl-side small{margin:6px 8px 6px;font:600 11px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.sl-side em{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:6px;font:500 13.5px var(--web);font-style:normal;color:var(--ink)}
.sl-side em .sl-av{width:22px;height:22px}
.sl-side em.on{background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--navy);font-weight:600}
.sl-main{padding:18px 22px 22px;min-width:0}
.sl-mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sl-mh b{font:600 17px var(--display);color:var(--navy)}
.sl-count{position:relative;display:inline-grid;font:600 12.5px var(--web)}
.sl-count>span{grid-area:1/1;padding:4px 10px;border-radius:5px;background:var(--sky);color:var(--btn);transition:opacity .3s ease}
.sl-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;
  transition:opacity .5s ease,transform .5s ease,background-color .4s ease,border-color .4s ease}
.sl-row+.sl-row{margin-top:10px}
.sl-rt{display:flex;flex-direction:column;min-width:0}
.sl-rt small{font:500 12px var(--web);color:var(--t4)}
.sl-rt b{font:600 14.5px/1.35 var(--web);color:var(--navy)}
.sl-tag{padding:3px 9px;border-radius:5px;background:#f1f4fb;font:500 12px var(--web);color:var(--mute);white-space:nowrap}
.sl-acts{display:inline-grid;grid-auto-flow:column;gap:6px;justify-content:end;min-width:150px}
.sl-acts em{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-radius:5px;font:600 12.5px var(--web);font-style:normal;white-space:nowrap}
.sl-yes{background:var(--btn);color:#fff}
.sl-no{border:1px solid var(--line);color:var(--navy);background:#fff}
.sl-done{background:#e7f5ef;color:var(--green)}

/* resting frame (JS off, reduced motion): all four rows, the first approved, 3 waiting */
.sl-r1 .sl-yes,.sl-r1 .sl-no,.sl-c4{display:none}
.sl-r1{background:#f6fbf8;border-color:#cfe9dc}
/* with JS the rows arrive one by one, then the first is approved */
.js .sl-stage .sl-r1 .sl-yes,.js .sl-stage .sl-r1 .sl-no{display:inline-flex}
.js .sl-stage .sl-r1 .sl-done{display:none}
.js .sl-stage .sl-c4{display:block}
.js .sl-stage .sl-c3{opacity:0}
.js .sl-stage .sl-r1{background:#fff;border-color:var(--line)}
.js .sl-stage.done .sl-r1 .sl-yes,.js .sl-stage.done .sl-r1 .sl-no{display:none}
.js .sl-stage.done .sl-r1 .sl-done{display:inline-flex}
.js .sl-stage.done .sl-r1{background:#f6fbf8;border-color:#cfe9dc}
.js .sl-stage.done .sl-c4{opacity:0}
.js .sl-stage.done .sl-c3{opacity:1}
.js .sl-stage:not(.go):not(.done) .sl-row{opacity:0;transform:translateY(10px)}   /* .done always shows the rows, whatever happened to .go */
.js .sl-stage.go .sl-r2{transition-delay:.35s}
.js .sl-stage.go .sl-r3{transition-delay:.7s}
.js .sl-stage.go .sl-r4{transition-delay:1.05s}
.js .sl-stage.done .sl-row{transition-delay:0s}

/* floating callouts over the window: intentional overlap, as on Home */
.sl-call{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 16px 12px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:0 18px 40px -18px rgba(2,37,79,.35);transition:opacity .6s ease 1.6s,transform .6s ease 1.6s}
.sl-call img{flex:none;width:34px;height:34px;padding:8px;border-radius:6px;background:var(--sky)}
.sl-call span{display:flex;flex-direction:column}
.sl-call b{font:600 14px var(--web);color:var(--navy)}
.sl-call small{font:400 12.5px var(--web);color:var(--mute)}
.sl-call-a{left:-44px;bottom:46px}
.sl-call-b{right:-40px;bottom:-46px}   /* below the last row, clear of every action button */
.js .sl-stage:not(.go):not(.done) .sl-call{opacity:0;transform:translateY(12px)}

/* the tools connected today, in place of Clay's customer logos */
.sl-tools{margin:92px 0 0;padding-bottom:8px}
.sl-tools p{font:600 12.5px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.sl-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;margin-top:22px}
.sl-marks span{display:inline-flex;align-items:center;gap:10px;height:40px;font:500 15px var(--web);color:var(--navy)}
.sl-marks img{display:block;width:auto;height:22px}
.sl-marks .sl-wm{height:22px}
.sl-marks .sl-nt{height:28px}

/* ============================= BENEFITS ============================= */
.sl-why{padding-top:112px}
.sl-sh{align-items:center;max-width:780px;margin:0 auto 48px;text-align:center}
.sl-sh .lead{text-wrap:balance}
.sl-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* light cards: the pale periwinkle wash */
.sl-tc,.sl-wc{padding:28px 28px 30px;border:1px solid #dbe3f7;border-radius:var(--r);background:linear-gradient(180deg,#fbfcff 0%,#eef2fd 62%,#e4ecfb 100%)}
.sl-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:22px;border:1px solid #d3dcf7;border-radius:var(--rb);background:#fff}
.sl-tc h3,.sl-wc h3{margin:0 0 8px;font:600 19px/1.3 var(--display)}
.sl-tc p,.sl-wc p{color:var(--mute);font-size:15.5px;line-height:1.55}

/* ============================= FEATURE CARDS ============================= */
.sl-feats .wrap{display:flex;flex-direction:column;gap:28px}
.sl-fc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:56px;padding:28px 28px 28px 56px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sl-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:28px 56px 28px 28px}
.sl-flip .sl-ft{order:2}
.sl-ft h2{font-size:clamp(30px,3.2vw,40px);line-height:1.1}
.sl-ft p{margin:18px 0 24px;max-width:44ch;color:var(--mute);font-size:17px;line-height:1.55}

/* the picture panel: the periwinkle wash with a royal glow; each mockup sits inside it */
.sl-fv{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:440px;padding:44px;border-radius:var(--r);overflow:hidden;
  background:radial-gradient(70% 60% at 85% 10%,rgba(41,70,182,.16),transparent 70%),linear-gradient(180deg,#f3f6fe 0%,#e4ecfb 60%,#d8e2fa 100%)}
.sl-fv>*{position:relative;transition:opacity .55s ease,transform .55s ease}
.js .sl-fv:not(.go)>*{opacity:0;transform:translateY(14px)}
.js .sl-fv.go>*:nth-child(2){transition-delay:.3s}
.js .sl-fv.go>*:nth-child(3){transition-delay:.6s}

/* shared card parts inside the pictures */
.sl-mail,.sl-brief,.sl-prep,.sl-fup,.sl-crm{border:1px solid #d6def5;border-radius:var(--r);background:#fff;box-shadow:0 16px 36px -22px rgba(2,37,79,.3)}
.sl-mhd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.sl-mhd b{font:600 15px var(--web);color:var(--navy)}
.sl-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:5px;background:var(--sky);font:600 12px var(--web);color:var(--btn);white-space:nowrap}
.sl-pill img{display:block}
.sl-hs{width:auto;height:13px}
.sl-hl{font:500 14.5px/1.5 var(--web);color:var(--ink)}
.sl-sk{display:block;height:9px;margin-top:9px;border-radius:5px;background:#d3dcf7}
.sl-sk.w90{width:90%}.sl-sk.w75{width:75%}.sl-sk.w70{width:70%}.sl-sk.w60{width:60%}
.sl-mfoot{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line)}
.sl-mfoot em{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:5px;font:600 13px var(--web);font-style:normal}

/* 1. outreach: the email draft */
.sl-mail{max-width:460px;width:100%;margin:0 auto}
.sl-mf{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px;padding:10px 18px;border-bottom:1px solid var(--line);font:500 14px var(--web);color:var(--navy)}
.sl-mf small{font:500 13px var(--web);color:var(--t4)}
.sl-mb{padding:16px 18px 18px}
.sl-src{display:flex;align-items:center;gap:8px;margin:0 18px;padding:8px 10px;border-radius:5px;background:#f1f4fb;font:500 12.5px var(--web);color:var(--mute)}
.sl-src img{display:block}
.sl-mail .sl-mfoot{margin-top:14px}
.sl-float{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid #d6def5;border-radius:var(--rb);background:#fff;
  box-shadow:0 14px 30px -16px rgba(2,37,79,.35);font:600 13px var(--web);color:var(--navy);white-space:nowrap}
.sl-f1{right:22px;top:22px}
.js .sl-fv.go .sl-f1{transition-delay:.7s}

/* 2. signals: four kinds of change feed the brief */
.sl-sig{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.sl-sig span{padding:7px 12px;border:1px solid #d3dcf7;border-radius:var(--rb);background:rgba(255,255,255,.85);font:500 13px var(--web);color:var(--navy)}
.sl-sig span:before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--btn);vertical-align:1px}
.sl-brief{max-width:460px;width:100%;margin:6px auto 0}
.sl-br{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 18px}
.sl-br+.sl-br{border-top:1px solid var(--line)}
.sl-n{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#f1f4fb;font:600 12.5px var(--web);color:var(--navy)}
.sl-lv{padding:3px 9px;border-radius:5px;background:#f1f4fb;font:600 12px var(--web);color:var(--mute);white-space:nowrap}
.sl-hi{background:#e7f5ef;color:var(--green)}
.sl-fu{background:#fdf3e6;color:var(--amber)}

/* 3. calls: the event, the prep steps, the follow-up */
.sl-v3{gap:12px}
.sl-ev{display:flex;align-items:center;gap:12px;align-self:flex-start;padding:10px 16px 10px 12px;border:1px solid #d6def5;border-radius:var(--rb);background:#fff}
.sl-ev img{display:block;width:18px;height:auto}
.sl-ev span,.sl-ph span{display:flex;flex-direction:column}
.sl-ev b,.sl-ph b{font:600 14px var(--web);color:var(--navy)}
.sl-ev small,.sl-ph small{font:400 12.5px var(--web);color:var(--mute)}
.sl-prep{padding:14px 16px}
.sl-ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sl-step{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:5px;background:#f6f8fe;font:500 13.5px var(--web);color:var(--navy)}
.sl-step+.sl-step{margin-top:6px}
.sl-fup{margin-left:32px}
.sl-fup .sl-hl{padding:14px 18px 0}
.sl-fup .sl-sk{margin-left:18px;max-width:calc(100% - 36px)}
.sl-fup .sl-mfoot{margin-top:14px}

/* 4. CRM: proposed updates, before and after */
.sl-crm{max-width:500px;width:100%;margin:0 auto}
.sl-dr{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.3fr);gap:12px;padding:11px 18px;font:500 13.5px/1.4 var(--web);color:var(--navy)}
.sl-dr+.sl-dr{border-top:1px solid var(--line)}
.sl-dh{font:600 11.5px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4);background:var(--cloud)}
.sl-old{color:var(--t4);text-decoration:line-through;text-decoration-color:#b8c3dc}
.sl-new{color:var(--green);font-weight:600}

/* ============================= THE WALL: the improvement loop ============================= */
.sl-loop{padding-bottom:112px}
.sl-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;gap:20px}
.sl-wall .sl-wc:nth-child(1){grid-area:1/1}
.sl-wall .sl-wc:nth-child(2){grid-area:2/1}
.sl-feat{grid-area:1/2/3/3}
.sl-wall .sl-wc:nth-child(4){grid-area:1/3}
.sl-wall .sl-wc:nth-child(5){grid-area:2/3}
/* the featured card, as Clay's navy case-study card: the royal fade */
.sl-feat{display:flex;flex-direction:column;padding:30px;border-radius:var(--r);color:#fff;
  background:radial-gradient(80% 50% at 0 0,rgba(8,18,70,.5),transparent 70%),linear-gradient(180deg,#1e39a3 0%,#2946b6 55%,#4a68d2 100%)}
.sl-ico-w{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3)}
.sl-feat h3{margin:0 0 18px;color:#fff;font:600 22px/1.25 var(--display)}
.sl-rl{margin:0 0 26px;padding:0;list-style:none}
.sl-rl li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid rgba(255,255,255,.2)}
.sl-rl li:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.sl-rl b{font:600 15px var(--web)}
.sl-rl small{font:400 13.5px var(--web);color:rgba(255,255,255,.78)}
.sl-wbtn{margin-top:auto;align-self:flex-start;background:#fff;color:var(--btn)}
.sl-wbtn:hover{background:#eef2fd}
.sl-wbtn:focus-visible{outline-color:#fff}

/* ============================= MARKETING PICTURES ============================= */
/* 5. leads: the sign-up, what the agent found, the reply */
.sl-lead{align-self:flex-start;min-width:280px;border:1px solid #d6def5;border-radius:var(--r);background:#fff;box-shadow:0 16px 36px -22px rgba(2,37,79,.3)}
.sl-who{display:flex;align-items:center;gap:12px;padding:14px 18px}
.sl-who span{display:flex;flex-direction:column}
.sl-who b{font:600 14.5px var(--web);color:var(--navy)}
.sl-who small{font:400 13px var(--web);color:var(--mute)}
.sl-found{justify-content:flex-start;padding-left:32px}
.sl-found span:before{background:var(--green)}

/* 6. brand: the post, and the check card laid over its corner (intentional overlap) */
.sl-post{max-width:440px;width:100%;padding:18px 20px 22px;border:1px solid #d6def5;border-radius:var(--r);background:#fff;box-shadow:0 16px 36px -22px rgba(2,37,79,.3)}
.sl-post .sl-ph{margin-bottom:14px}
.sl-check{align-self:flex-end;width:300px;max-width:100%;margin-top:-34px;border:1px solid #d6def5;border-radius:var(--r);background:#fff;box-shadow:0 20px 40px -20px rgba(2,37,79,.38)}
.sl-ck{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 12px;padding:9px 6px;font:500 13.5px var(--web);color:var(--navy)}
.sl-ck+.sl-ck{border-top:1px solid var(--line)}
.sl-ck:last-child{margin-bottom:8px}
.sl-ck img{flex:none}
.sl-ck-w{color:var(--amber)}

/* 7. key accounts: the CRM table, three columns */
.sl-abm .sl-dr{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.7fr)}
.sl-f2{left:22px;bottom:22px}
.js .sl-fv.go .sl-f2{transition-delay:.7s}

/* 8. reports: three figures over a smooth curve with a soft fill (never bars) */
.sl-rep{max-width:480px;width:100%;margin:0 auto;border:1px solid #d6def5;border-radius:var(--r);background:#fff;box-shadow:0 16px 36px -22px rgba(2,37,79,.3)}
.sl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 18px 6px}
.sl-stats span{display:flex;flex-direction:column;min-width:0}
.sl-stats small{font:500 12px var(--web);color:var(--t4)}
.sl-stats b{font:600 26px/1.2 var(--display);letter-spacing:-.02em;color:var(--navy)}
.sl-stats b.sl-sm{margin-top:4px;font:600 14px/1.3 var(--web);letter-spacing:0}
.sl-stats em{font:600 12.5px var(--web);font-style:normal;color:var(--green)}
.sl-curve{display:block;width:calc(100% - 36px);height:120px;margin:8px 18px 0}
.sl-next{display:flex;align-items:center;gap:10px;margin:12px 18px 18px;padding:10px 12px;border-radius:6px;background:var(--sky);font:500 13.5px/1.4 var(--web);color:var(--navy)}
.sl-next img{flex:none}

/* ---- a week on the desk: Clay's tabbed case study, as two routines ---- */
.sl-story{padding-bottom:112px}
.sl-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-bottom:20px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sl-tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:22px 16px;background:#fff;color:var(--navy);text-align:center;transition:background-color .2s ease}
.sl-tab+.sl-tab{border-left:1px solid var(--line)}
.sl-tab b{font:600 18px var(--display)}
.sl-tab small{font:400 14px var(--web);color:var(--mute)}
.sl-tab:hover{text-decoration:none;background:var(--cloud)}
.sl-tab.on{background:var(--sky);box-shadow:inset 0 -3px 0 var(--btn)}
.sl-tab.on b{color:var(--btn)}
.sl-sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:56px;padding:28px 56px 28px 28px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.sl-sc+.sl-sc{margin-top:20px}
.js .sl-sc:not(.on){display:none}
.sl-scv{display:flex;align-items:center;justify-content:center;min-height:460px;padding:40px;border-radius:var(--r);
  background:radial-gradient(80% 50% at 0 0,rgba(8,18,70,.5),transparent 70%),linear-gradient(180deg,#1e39a3 0%,#2946b6 45%,#4a68d2 75%,#89a3ec 100%)}
.sl-cal{width:100%;max-width:440px;border-radius:var(--r);background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.28),0 0 0 10px rgba(255,255,255,.14),0 0 0 11px rgba(255,255,255,.34),0 30px 60px -28px rgba(8,18,70,.5)}
.sl-cr{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 18px}
.sl-cr+.sl-cr{border-top:1px solid var(--line)}
.sl-day{display:grid;place-items:center;height:26px;border-radius:5px;background:#f1f4fb;font:600 12px var(--web);color:var(--navy)}
.sl-cr .sl-rt small{order:2}   /* calendar rows: the title first, then the channel */
.sl-cr .sl-rt b{font-size:14px}
.sl-wt{background:var(--sky);color:var(--btn)}
.sl-eye{font:600 12.5px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--btn)}
.sl-sct h2{margin:12px 0 0;font-size:clamp(28px,3vw,38px);line-height:1.12}
.sl-sct>p{margin:16px 0 22px;color:var(--mute);font-size:17px;line-height:1.55}
.sl-steps{margin:0 0 28px;padding:0;list-style:none;counter-reset:st}
.sl-steps li{position:relative;display:flex;flex-direction:column;padding:10px 0 10px 40px;counter-increment:st}
.sl-steps li+li{border-top:1px solid var(--line)}
.sl-steps li:before{content:counter(st);position:absolute;left:0;top:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:var(--sky);font:600 13px var(--web);color:var(--btn)}
.sl-steps b{font:600 15px var(--web);color:var(--navy)}
.sl-steps span{font:400 15px/1.5 var(--web);color:var(--mute)}

/* ============================= OPERATIONS PICTURES ============================= */
.sl-nw{width:auto;min-width:32px;padding:0 6px}   /* a count rather than a rank */
.sl-n img{display:block}
.sl-bl{background:#fdecea;color:var(--red)}
.sl-dr em.sl-lv{font-style:normal}
.sl-tasks .sl-dr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;align-items:center}
.sl-tasks .sl-dr span:last-child{justify-self:end}
.sl-v11 .sl-sig{margin-top:4px}
.sl-v11 .sl-sig span:before{background:var(--green)}
.sl-tabs-3{grid-template-columns:repeat(3,minmax(0,1fr))}


/* ============================= FINANCE PICTURES ============================= */
/* 13. spend: expense lines, the unmatched one tinted amber */
.sl-exp .sl-dr{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto}
.sl-exp .sl-dr span:last-child{justify-self:end;font-variant-numeric:tabular-nums}
.sl-flag{background:#fdf6ec}
.sl-flag span{color:var(--amber)}
/* 15. bills: the bill, with the check card over its corner (as the brand check) */
.sl-amt{margin:4px 0 6px;font:600 30px/1.1 var(--display);letter-spacing:-.02em;color:var(--navy);font-variant-numeric:tabular-nums}
.sl-check .sl-mfoot{margin-top:4px}
/* routine tabs: a face in the day cell */
.sl-day .sl-av{width:24px;height:24px}
/* ============================= COMMERCE PICTURES ============================= */
/* the hero strip's second line: what is named but not connected yet */
.sl-tools .sl-soon{margin-top:14px;font:400 13.5px/1.5 var(--web);letter-spacing:0;text-transform:none;color:var(--t4)}
/* 18. listings: three product photo tiles on the listing card */
.sl-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 6px}
.sl-tiles i{display:block;aspect-ratio:4/3;border-radius:6px}
.sl-tl1{background:linear-gradient(150deg,#dfe7fc,#b9c9f6)}
.sl-tl2{background:linear-gradient(150deg,#dcf4ea,#b2e4cf)}
.sl-tl3{background:linear-gradient(150deg,#fdf0da,#f6d7a4)}

/* ============================= BREAKPOINTS ============================= */
@media (max-width:991px){
  .sl-hero{padding-top:132px}
  .sl-call-a{left:-12px}
  .sl-call-b{right:-12px}
  .sl-wbody{grid-template-columns:170px minmax(0,1fr)}
  .sl-tag{display:none}
  .sl-tri{grid-template-columns:minmax(0,1fr)}
  .sl-fc,.sl-flip{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px 28px 28px}
  .sl-flip .sl-ft{order:0}
  .sl-ft p{max-width:60ch}
  .sl-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-wall .sl-wc:nth-child(n),.sl-feat{grid-area:auto}
  .sl-feat{grid-column:1/-1;order:-1}
}
@media (max-width:767px){
  .sl-hero{padding-top:112px}
  .sl-hero h1{font-size:44px}
  .sl-stage{margin-top:48px}
  .sl-wbody{grid-template-columns:minmax(0,1fr);min-height:0}
  .sl-side{display:none}
  .sl-main{padding:14px}
  .sl-row{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .sl-acts{grid-column:2;justify-content:start;min-width:0}
  .sl-call{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:14px}
  .sl-call-b{display:none}
  .sl-marks{gap:6px 22px}
  .sl-why{padding-top:80px}
  .sl-fv{min-height:0;padding:28px 18px}
  .sl-fup{margin-left:0}
  .sl-f1{position:relative;right:auto;top:auto;align-self:flex-start}
  .sl-wall{grid-template-columns:minmax(0,1fr)}
  .sl-loop{padding-bottom:72px}
}
@media (max-width:479px){
  .sl-hero h1{font-size:38px}
  .sl-hero .ctas{flex-direction:column;align-self:stretch}
  .sl-fc,.sl-flip{padding:28px 16px 16px}
  .sl-dr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:2px}
  .sl-dr>span:first-child{grid-column:1/-1;font-weight:600;color:var(--t4);font-size:12px}
  .sl-dh{display:none}
  .sl-mhd{flex-wrap:wrap}
}

@media (max-width:991px){
  .sl-sc{grid-template-columns:minmax(0,1fr);gap:32px;padding:28px}
  .sl-scv{min-height:0}
}
@media (max-width:767px){
  .sl-tab{padding:16px 10px}
  .sl-tab b{font-size:16px}
  .sl-scv{padding:24px 16px}
  .sl-story{padding-bottom:72px}
  .sl-found{padding-left:0}
  .sl-lead{min-width:0;align-self:stretch}
  .sl-check{align-self:stretch;width:auto;margin-top:0}
  .sl-f2{position:relative;left:auto;bottom:auto;align-self:flex-start}
}
@media (max-width:479px){
  .sl-sc{padding:16px}
  .sl-tab small{display:none}
  .sl-float{white-space:normal}
  .sl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-stats span:last-child{grid-column:1/-1}
  .sl-cr{grid-template-columns:36px minmax(0,1fr);row-gap:6px}
  .sl-cr .sl-lv{grid-column:2;justify-self:start}
  .sl-abm .sl-dr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sl-abm .sl-dr>span:first-child{grid-column:1/-1}
}
@media (max-width:479px){
  .sl-tasks .sl-dr{grid-template-columns:minmax(0,1fr) auto}
  .sl-tasks .sl-dr>span:first-child{grid-column:1/-1}
  .sl-tasks .sl-dr>span:first-child,.sl-abm .sl-dr>span:first-child{color:var(--navy);font-size:13.5px}   /* here the first cell is the item, not a field label */
}

@media (max-width:479px){
  .sl-exp .sl-dr{grid-template-columns:minmax(0,1fr) auto}
  .sl-exp .sl-dr>span:first-child{grid-column:1/-1;color:var(--navy);font-size:13.5px}
  .sl-flag>span:first-child{color:var(--amber)}
}

/* ============================= THE DROPDOWN MENUS' SCALE (2026-10-16) =============================
   Desk pages: labels in the menus' small grey capitals at .06em, titles in medium weight with no
   bold, cards at 12px corners and the wide feature panels at 16px. Mock app screens keep their own. */
.sl-pick-now,.sl-pick-menu .sl-pick-on{font-weight:500}
.sl-tools p,.sl-eye{font-size:var(--fs-label);letter-spacing:var(--ls-label);color:var(--t4)}
.sl-tc h3,.sl-wc h3,.sl-feat h3,.sl-rl b{font-weight:500}
.sl-tc,.sl-wc,.sl-feat{border-radius:var(--r-card)}
.sl-fc{border-radius:var(--r-panel)}
.sl-tab b,.sl-steps b{font-weight:500}
.sl-steps li:before{border-radius:var(--r-tile)}

/* ---- TYPE SCALE (2026-10-25, as on the product and Industries pages): section headings 34px, feature-row titles 28px
   under them, card titles 18px, description lines 16px in one grey; text links stay 15px. The shared closing keeps
   its own sizes. */
.sl-why .sl-sh h2,.sl-loop .sl-sh h2,.sl-sct h2{font-size:34px;line-height:1.22;letter-spacing:-.02em}
.sl-fc .sl-ft h2{font-size:28px;line-height:1.2;letter-spacing:-.02em}
.sl-tc h3,.sl-wc h3,.sl-feat h3{font-size:18px;line-height:1.3}
.sl-tc p,.sl-wc p,.sl-fc .sl-ft p,.sl-sct>p{font-size:16px;line-height:1.55;color:#46556b}
@media (max-width:767px){
  .sl-why .sl-sh h2,.sl-loop .sl-sh h2,.sl-sct h2{font-size:27px}
  .sl-fc .sl-ft h2{font-size:22px}
}

/* css/reports.css */
/* REPORTS AND GUIDES (reports.html, reports/<slug>.html), after zip.com's research, reports
   and guides library and its gated resource pages. The library reuses research.css (rz-*)
   for the title, featured slide and grid; this file adds the paper covers and the detail
   page: a back link, a title band, the cover and what the paper covers on the left, the
   access form on the right, then a thank-you with the download. Classes rp-*.
   Builder-safe: no keyframes, breakpoints 991 / 767 / 479 only. */

/* a paper as a hardback book, after the Stripe Press books (which they draw in WebGL; this is
   plain CSS 3D): a marbled cover with the title in white and the mark on
   a white tab, a spine wrapped in the same art, a page block along the bottom, and a soft
   shadow on the ground. The book turns a little toward the pointer (script on each page).
   Size comes from --w alone; the cover art is an <img> on the front and the spine, so each
   paper sets its own art in the HTML. */
.rp-3d{--w:280px;--t:calc(var(--w)*.12);--h:calc(var(--w)*1.294);--rx:13deg;--ry:26deg;
  --cloth:#0b1648;--ink:#fff;--tab:#fff;   /* per book: the cloth (boards, spine, back), the ink for type, the tab behind the mark */
  
  position:relative;display:block;width:var(--w);height:var(--h);perspective:calc(var(--w)*6);color:var(--ink)}
.rp-3d:before{content:"";position:absolute;left:2%;right:-14%;bottom:-9%;height:16%;
  background:radial-gradient(closest-side,rgba(2,20,60,.38),rgba(2,20,60,.12) 60%,transparent)}
.rp-3d-b{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rp-3d-b>span{position:absolute;display:block;overflow:hidden;background:var(--cloth);backface-visibility:hidden}
.rp-3d-b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* front: the hinge groove near the spine and a soft light from the top left */
.rp-3d-f{inset:0;transform:translateZ(calc(var(--t)/2));border-radius:1px 3px 3px 1px}
.rp-3d-f:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,20,.42) 0,rgba(255,255,255,.2) 1.4%,rgba(0,0,20,.3) 3.4%,rgba(255,255,255,.1) 5%,rgba(255,255,255,0) 8%),
  linear-gradient(155deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 38%,rgba(0,0,20,0) 62%,rgba(0,0,20,.22) 100%)}
.rp-3d-t{position:absolute;z-index:2;left:12%;bottom:6.5%;width:46%;font:600 calc(var(--w)*.064)/1.04 var(--display);letter-spacing:-.015em;color:var(--ink);text-shadow:0 1px calc(var(--w)*.02) rgba(4,10,40,.55)}
.rp-3d-t small{display:block;margin-bottom:calc(var(--w)*.03);font:600 calc(var(--w)*.03)/1 var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.85}
/* the maker sits bottom right, where the reference puts its author: the white logo printed on
   the art, no label, as tall as a line of the title and on its baseline */
.rp-3d-a{position:absolute;z-index:2;right:7%;bottom:7.2%;width:calc(var(--w)*.28);filter:drop-shadow(0 1px calc(var(--w)*.016) rgba(4,10,40,.5))}
.rp-3d-b .rp-3d-a img{position:static;display:block;width:100%;height:auto}
/* spine: the same art, darker, with the name and title reading down it */
.rp-3d-s{top:0;left:calc(var(--t)/-2);width:var(--t);height:100%;transform:rotateY(-90deg)}
.rp-3d-s img{object-position:0 0}
.rp-3d-s:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,20,.5),rgba(0,0,20,.22) 45%,rgba(0,0,20,.42))}
.rp-3d-s>span{position:absolute;z-index:2;inset:5% 0;display:flex;align-items:center;justify-content:space-between;writing-mode:vertical-rl;
  font:500 calc(var(--w)*.04)/1 var(--display);letter-spacing:.01em;white-space:nowrap;color:var(--ink)}
.rp-3d-s>span i{font-style:normal;margin-top:4%;width:62%;aspect-ratio:1;background:var(--tab);display:grid;place-items:center;writing-mode:horizontal-tb}
.rp-3d-s>span i img{position:static;width:74%;height:auto}
/* page blocks: the cream edges of the paper between the two boards */
.rp-3d-b .rp-3d-p,.rp-3d-b .rp-3d-e{background:
  linear-gradient(180deg,var(--cloth) 0 7%,rgba(0,0,0,0) 7% 93%,var(--cloth) 93%),
  linear-gradient(90deg,rgba(60,50,30,.28),rgba(60,50,30,0) 30%),
  repeating-linear-gradient(180deg,#f4f0e8 0,#f4f0e8 1.5px,#e6e0d4 1.5px,#e6e0d4 3px)}
.rp-3d-p{left:0;top:calc(var(--h) - var(--t)/2);width:calc(var(--w) - 2px);height:var(--t);transform:rotateX(-90deg)}
.rp-3d-e{top:0;left:calc(var(--w) - var(--t)/2);width:var(--t);height:100%;transform:rotateY(90deg)}
.rp-3d-b .rp-3d-e{background:linear-gradient(90deg,var(--cloth) 0 7%,rgba(0,0,0,0) 7% 93%,var(--cloth) 93%),repeating-linear-gradient(90deg,#f4f0e8 0,#f4f0e8 1.5px,#e6e0d4 1.5px,#e6e0d4 3px)}
.rp-3d-k{inset:0;transform:translateZ(calc(var(--t)/-2)) rotateY(180deg)}
@media (prefers-reduced-motion:reduce){.rp-3d-b{transition:none}}
/* on a library card the book stands on a light shelf */
.rz-img.rp-shelf{display:grid;place-items:center;background:linear-gradient(160deg,#f2f5fe 0,#dfe7fc 100%)}
.rz-img.rp-shelf .rp-3d{--w:124px;margin:-4% 0 0 -6%}
.rz-sin .rz-img.rp-shelf .rp-3d{--w:186px}

/* ---- the detail page ---- */
.rp{padding:112px 0 0}
.rp-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:20px;font:500 15px var(--ui);color:var(--mute);text-decoration:none}
.rp-back:before{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(45deg)}
.rp-back:hover{color:var(--btn)}
.rp-band{padding:44px 48px 52px;border-radius:12px;background:#eef2fd}
.rp-band small{display:block;margin-bottom:14px;font:600 13px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--btn)}
.rp-band h1{max-width:820px;font:600 48px/1.08 var(--display);letter-spacing:-.025em}
.rp-band p{max-width:680px;margin:16px 0 0;font-size:19px;line-height:1.5;color:var(--mute)}
.rp-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:56px;align-items:start;padding:48px 0 96px}
.rp-main .rp-3d{--w:280px;margin:20px 0 64px 24px}
.rp-main h2{margin:40px 0 14px;font:600 24px/1.3 var(--display);letter-spacing:-.01em}
.rp-main p{margin:0 0 14px;font-size:17px;line-height:1.7;color:var(--mute)}
.rp-main ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.rp-main li{padding-left:4px;font-size:17px;line-height:1.6;color:var(--mute)}
.rp-main li::marker{color:var(--btn)}
.rp-main li b{font-weight:600;color:var(--navy)}
.rp-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:32px 0 0;padding:0}
.rp-facts div{padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:#fff}
.rp-facts dt{font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.rp-facts dd{margin:6px 0 0;font:600 16px/1.3 var(--display);color:var(--navy)}

/* the access form */
.rp-form{position:sticky;top:96px;padding:28px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 24px 48px -28px rgba(2,37,79,.28)}
.rp-form h2{margin:0 0 6px;font:600 22px/1.3 var(--display);letter-spacing:-.01em}
.rp-form>p{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--mute)}
.rp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.rp-f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.rp-f label{font:600 14px var(--web);color:var(--navy)}
.rp-f label i{font-style:normal;color:var(--btn)}
.rp-f input,.rp-f select{width:100%;min-width:0;box-sizing:border-box;height:42px;padding:0 12px;border:1px solid #cdd7e3;border-radius:6px;background:#fff;font:400 15px var(--web);color:var(--ink)}
.rp-f input:focus,.rp-f select:focus{outline:2px solid var(--btn);outline-offset:0;border-color:var(--btn)}
.rp-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 18px;font:400 15px/1.45 var(--web);color:var(--ink)}
.rp-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--btn)}
.rp-send{width:100%;height:46px;border:0;border-radius:6px;background:var(--btn);font:600 16px var(--ui);color:#fff;cursor:pointer}
.rp-send:hover{background:var(--btn-h)}
.rp-send[disabled]{opacity:.7;cursor:default}
.rp-legal{margin:14px 0 0!important;font-size:13px!important;line-height:1.5;color:var(--t4)!important}
.rp-legal a{color:var(--btn)}
.rp-hp{position:absolute;left:-9999px}   /* the bot trap */
/* thank you: shown after the form is sent; with JS off it shows under the form, so no one is stuck */
.rp-done{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.js .rp-done{display:none}
.js .rp-got form{display:none}
.js .rp-got .rp-done{display:block;margin:0;padding:0;border:0}
.rp-done h3{margin:0 0 6px;font:600 20px/1.3 var(--display);color:var(--navy)}
.rp-done p{margin:0 0 16px;font-size:15px;line-height:1.5;color:var(--mute)}
.rp-dl{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:6px;background:var(--btn);font:600 16px var(--ui);color:#fff;text-decoration:none}
.rp-dl:hover{background:var(--btn-h)}

@media (max-width:991px){
  .rp{padding-top:96px}
  .rp-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .rp-form{position:static;max-width:560px}
  .rp-band{padding:36px 32px 40px}
  .rp-band h1{font-size:40px}
}
@media (max-width:767px){
  .rp-facts{grid-template-columns:1fr 1fr}
  .rp-main .rp-3d{--w:224px;margin-left:16px}
  .rz-sin .rz-img.rp-shelf .rp-3d{--w:132px}   /* the slide stacks into a 3:2 frame */
}
@media (max-width:479px){
  .rp-band{padding:28px 20px 32px}
  .rp-band h1{font-size:32px}
  .rp-row{grid-template-columns:minmax(0,1fr);gap:0}
  .rp-form{padding:22px 18px}
}

/* ---- the dropdown menus' scale (2026-10-16) ----------------------------------------------
   The white paper page (p-reports without p-lib): the kicker in the menus' small grey capitals,
   the title, section headings, fact values, form title, field labels and the done note in medium
   weight, the fact labels at 11.5px, the fact boxes at 12px. The wording, the cover and the bold
   lead-ins inside the list stay as they are. The related cards take the library's rules. */
.p-reports:not(.p-lib) .rp-band small{font-size:var(--fs-label);color:var(--t4)}
.p-reports:not(.p-lib) .rp-band h1,.p-reports:not(.p-lib) .rp-main h2,.p-reports:not(.p-lib) .rp-facts dd,
.p-reports:not(.p-lib) .rp-form h2,.p-reports:not(.p-lib) .rp-f label,.p-reports:not(.p-lib) .rp-done h3{font-weight:500}
.p-reports:not(.p-lib) .rp-facts dt{font-size:var(--fs-label)}
.p-reports:not(.p-lib) .rp-facts div{border-radius:var(--r-card)}

/* css/state.css */
/* Reveal behaviour and the site's common breakpoints (991 / 767 / 479); any other width is fine where a layout needs it. */
/* 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/industries.css */
/* Industries hub (industries.html), laid out after stripe.com/issuing (2026-10-15).
   hb-* classes only. The header keeps the site's royal blue fade and the nav sits on it (.bluetop). */
.hb{--pale:#f6f9fc}
.hb section{position:relative}
.hb-s{padding:104px 0}
.hb-pale{background:var(--pale)}
.hb-grey{background:var(--cloud)}   /* the site theme grey (#fafafa) */
.hb-wash{background:linear-gradient(180deg,#f7f9fe 0,#eef3fd 40%,#e4ecfb 100%)}   /* the blue wash of the home page product cards */
.hb-h{margin:0;max-width:30ch;font:500 34px/1.22 var(--display);letter-spacing:-.02em;color:var(--navy)}
.hb-h .gy{display:block;color:#6b7a90}
.hb-h.c{margin:0 auto;text-align:center}
/* the sticky Industries bar (Stripe's product bar) comes back with the first industry page */
/* hero */
.hb-hero{padding:160px 0 0;overflow:hidden;
  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 22%,#2946b6 40%,#4a68d2 58%,#89a3ec 74%,#dfe6fb 90%,#fff 100%)}
/* the page title matches the desk pages' heroes (solutions.css .sl-hero h1): one large line, one line of text under it */
.hb-title{max-width:15ch;margin:0 auto;color:#fff;text-align:center;font:500 clamp(48px,6vw,84px)/1.02 var(--display);letter-spacing:-.03em;text-wrap:balance}
.hb-lead{margin:22px auto 0;max-width:44ch;color:rgba(255,255,255,.86);text-align:center;text-wrap:balance}
.hb-hero .ctas{display:flex;justify-content:center;gap:14px;margin-top:30px}
.hb-hero .btn{height:52px;padding:0 26px;font-size:16px}
.hb-hero .btn.p{background:#fff;color:var(--btn)}.hb-hero .btn.p:hover{background:#eef2fd}
.hb-hero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.hb-hero .btn.g:hover{background:rgba(255,255,255,.12)}
/* the fan: one card per industry, rising into an arc on load (transitions only) */
.hb-fan{position:relative;height:440px;margin-top:40px;--r:0deg}   /* 440 with cards at bottom:40px (was 330 and -70): eight cards at 12deg lean 42deg at the ends, and the extra 110px keeps both outer labels above the hero's cropped edge */
/* the fan turns: with JS (.turns) it sits sticky in a track three screens wide, and the scroll position sets --r.
   Eight snap points sit along the track, one per card */
.hb-fanx.turns{margin:8px calc(50% - 50vw) 0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.hb-fanx.turns::-webkit-scrollbar{display:none}
.hb-fanx.drag{scroll-snap-type:none;cursor:grabbing}
.hb-track{position:relative}
.hb-fanx.turns .hb-track{width:300%}
.hb-fanx.turns .hb-fan{position:sticky;left:0;width:33.3333%;margin-top:0}
.hb-snap{position:absolute;top:0;width:1px;height:1px;scroll-snap-align:start}
.hb-snap.s0{left:0}.hb-snap.s1{left:9.5238%}.hb-snap.s2{left:19.0476%}.hb-snap.s3{left:28.5714%}.hb-snap.s4{left:38.0952%}.hb-snap.s5{left:47.619%}.hb-snap.s6{left:57.1429%}.hb-snap.s7{left:66.6667%}
.hb-card{position:absolute;left:50%;bottom:40px;width:230px;height:330px;margin-left:-115px;padding:20px 20px 18px;border-radius:16px;display:flex;flex-direction:column;text-decoration:none;transform-origin:50% 255%;box-shadow:0 30px 60px -24px rgba(2,20,70,.55),inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s}
.hb-card small{font:600 11.5px var(--web);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.hb-card b{max-width:140px;margin-top:10px;font:600 22px/1.18 var(--display);letter-spacing:-.01em}
.hb-card i{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-style:normal}
.hb-card i{display:none}   /* the faces and arrow sit in the card's cropped foot, never seen; hidden so the taller fan shows no half faces. The whole card is the link */
.hb-card i em{display:flex;max-width:none}.hb-card i em .sl-av{width:26px;height:26px;margin-right:-6px;box-shadow:0 0 0 2px currentColor}
.hb-card i strong{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2);font:600 15px var(--web)}
/* each card wears its industry slide's colour as a gradient like the industry panel's: a dark corner, a soft light glow,
   and the slide's accent (--ac) fading through a lighter step (--ac2) to its pale tint (--soft),
   so card and slide read as one industry. The card also carries its slide's iz-s class for the variables. */
.hb-card{color:#fff;background:radial-gradient(90% 60% at 15% 0%,rgba(8,18,70,.45),transparent 70%),radial-gradient(70% 60% at 100% 30%,rgba(255,255,255,.3),transparent 70%),
  linear-gradient(170deg,var(--ac) 0%,var(--ac) 30%,var(--ac2) 65%,var(--soft) 100%)}
.hb-c1{--a:-42deg}.hb-c2{--a:-30deg}.hb-c3{--a:-18deg}.hb-c4{--a:-6deg}.hb-c5{--a:6deg}.hb-c6{--a:18deg}.hb-c7{--a:30deg}.hb-c8{--a:42deg}
.hb-card{transform:rotate(calc(var(--a) + var(--r)))}
.hb-card:hover,.hb-card:focus-visible{transform:rotate(calc(var(--a) + var(--r))) translateY(-18px)}
.hb-card:hover,.hb-pc:hover{text-decoration:none}   /* base.css underlines every a:hover; these cards lift instead */
.js .hb-fan:not(.go) .hb-card{transform:translateY(240px) rotate(0);opacity:0}
.js .hb-fan.go .hb-c3,.js .hb-fan.go .hb-c6{transition-delay:.06s}
.js .hb-fan.go .hb-c2,.js .hb-fan.go .hb-c7{transition-delay:.12s}
.js .hb-fan.go .hb-c1,.js .hb-fan.go .hb-c8{transition-delay:.18s}
.js .hb-fan.go .hb-card:hover{transition-delay:0s}
.hb-fan.still .hb-card{transition:none}
.js .hb-fan.go.ready .hb-card{transition:transform .25s ease-out;transition-delay:0s}   /* once risen, the cards follow the wheel closely */
/* a white horizon closes the fan: one wide, shallow curve across the whole hero, rising 70px in the middle (a circle 3738px
   in radius, so it meets the edge at 720px either side of centre). It hides every card's foot and the gap between them,
   every card ends on the same line, and the end cards' labels stay clear of it */
.hb-hero{position:relative}
.hb-hero::after{content:"";position:absolute;left:50%;bottom:-7406px;width:7476px;height:7476px;margin-left:-3738px;border-radius:50%;background:#fff;pointer-events:none}
/* stats */
.hb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hb-stats div{display:flex;flex-direction:column;padding:30px 24px 30px;border-left:1px solid #d6e0f5}.hb-stats div:first-child{border-left:0;padding-left:0}
.hb-stats b{display:block;font:500 38px/1.1 var(--display);letter-spacing:-.02em;color:var(--navy)}
.hb-stats span{display:block;margin-top:10px;max-width:24ch;font:400 14.5px/1.5 var(--web);color:var(--mute)}
.hb-stats .fn-more{margin-top:auto;padding-top:16px;font-size:14px}
.hb-statsec .hb-stats{border-color:#d6e0f5}
.hb-statsec .hb-h{max-width:none}
.hb-it{position:relative;padding:24px 24px 18px}
.hb-it h3{margin:0 0 8px;padding-right:44px;font:600 20px/1.3 var(--display);color:var(--navy)}
.hb-it p{margin:0;max-width:44ch;font:400 14.5px/1.55 var(--web);color:var(--mute)}
.hb-vis{margin-top:auto;padding:22px 24px 0;background:linear-gradient(180deg,#fff 0%,#eef2fd 100%)}
.hb-ui{border:1px solid #dfe6f2;border-bottom:0;border-radius:10px 10px 0 0;background:#fff;box-shadow:0 -10px 30px -22px rgba(2,37,79,.3);font:500 13px var(--web);color:var(--navy)}
.hb-ui .hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);font:600 13px var(--web)}
.hb-ui .hd small{font:500 11.5px var(--web);color:var(--t4)}
.hb-ui .r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 14px;border-top:1px solid var(--line)}
.hb-ui .r:first-of-type{border-top:0}
.hb-ui .r small{display:block;font:400 11.5px var(--web);color:var(--t4)}
.hb-tag{padding:3px 8px;border-radius:5px;background:#f1f4fb;font:600 11.5px var(--web);color:var(--mute);white-space:nowrap}
.hb-tag.ok{background:#e7f5ef;color:var(--green)}.hb-tag.wt{background:#fdf3e6;color:var(--amber)}.hb-tag.bl{background:var(--sky);color:var(--btn)}
.hb-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.hb-split .btn{margin-top:28px}
/* set up your way */
.hb-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:48px;padding-bottom:72px;border-bottom:1px solid var(--line)}
.hb-two img{display:block;width:36px;height:36px;padding:8px;margin-bottom:16px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #dfe6f2}
.hb-two h3{margin:0 0 8px;font:600 16px var(--web);color:var(--navy)}
.hb-two p{margin:0 0 14px;max-width:46ch;font:400 15px/1.6 var(--web);color:var(--mute)}
.hb-acc{margin-top:28px;border-top:1px solid var(--line)}
.hb-acc details{border-bottom:1px solid var(--line)}
.hb-acc summary{padding:18px 0;cursor:pointer;list-style:none;font:500 19px var(--display);color:var(--navy)}
.hb-acc summary::-webkit-details-marker{display:none}
.hb-acc details[open] summary{font-weight:600}
.hb-acc p{margin:-6px 0 18px;max-width:48ch;font:400 15px/1.6 var(--web);color:var(--mute)}
/* plan cards and resources */
.hb-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.hb-pc{display:flex;flex-direction:column;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #e3e9f3,0 20px 40px -30px rgba(2,37,79,.3);overflow:hidden;color:inherit;text-decoration:none}
.hb-pc .hb-vis{order:-1;margin:0;padding:22px 22px 0;height:170px;overflow:hidden}
.hb-pc .hb-it h3{font-size:18px}
.hb-big{padding:16px 14px;font:600 30px/1 var(--display);letter-spacing:-.02em;color:var(--navy)}
.hb-big small{display:block;margin-top:6px;font:500 12px var(--web);letter-spacing:0;color:var(--green)}
.hb-prog{height:8px;margin:4px 14px 16px;border-radius:4px;background:#e6ebf2}.hb-prog i{display:block;width:60%;height:100%;border-radius:4px;background:var(--btn)}
.hb-res .hb-vis{display:grid;place-items:center;height:200px;padding:20px}
.hb-res .rp-3d{--w:110px}
.hb-res .hb-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #dfe6f2,0 14px 28px -18px rgba(2,37,79,.35)}
.hb-it .fn-more{margin-top:14px;font-size:14.5px}
/* faq */
.hb-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px}
.hb-faq .hb-acc{margin-top:0}
.hb-faq summary{font:600 17px/1.4 var(--web)}
@media (max-width:991px){
  .hb-s{padding:80px 0}
  /* tablets and phones: no horizon under the fan. Tablets sink the cards 70px instead (the fan 70px shorter, so the tops stay put) to crop
     their feet at the edge as phones do; the outer cards, whose labels would dip, sit off screen until swiped in */
  .hb-hero::after{display:none}
  .hb-fan{height:370px}.hb-card{bottom:-30px}
  .hb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.hb-stats div:nth-child(3){border-left:0;padding-left:0}.hb-stats div:nth-child(n+3){border-top:1px solid var(--line)}
  .hb-split,.hb-faq{grid-template-columns:minmax(0,1fr);gap:40px}
  .hb-three{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .hb-h{font-size:27px}.hb-title{font-size:44px}
  .hb-s{padding:64px 0}.hb-hero{padding-top:128px}
  .hb-hero .ctas{flex-direction:column;align-items:stretch}
  /* phones keep the fan, as Stripe Issuing does: cards spread wide around a point far below, the middle two near
     upright and their neighbours cropped at the screen edge; the fan swipes sideways to reach the rest */
  .hb-fanx{margin:24px -16px 0}.hb-fanx.turns{margin:24px -16px 0}
  .hb-fan{height:300px;margin-top:36px}.hb-fanx .hb-fan{margin-top:0}
  .hb-card{width:150px;height:210px;margin-left:-75px;bottom:-4px;padding:16px 16px 14px;border-radius:14px;transform-origin:50% 330%}
  .hb-card:hover,.hb-card:focus-visible{transform:rotate(calc(var(--a) + var(--r))) translateY(-10px)}
  .js .hb-fan:not(.go) .hb-card{transform:translateY(160px) rotate(0)}
  .hb-card small{font-size:11px}
  .hb-card b{max-width:118px;margin-top:8px;font-size:16px;line-height:1.2}
  .hb-card i{display:none}   /* the arrow sits in the cropped foot of the card; the whole card is the link */
  .hb-two{grid-template-columns:minmax(0,1fr)}
  .hb-stats{grid-template-columns:minmax(0,1fr)}.hb-stats div,.hb-stats div:nth-child(3){border-left:0;padding-left:0}.hb-stats div+div{border-top:1px solid var(--line)}
  .hb-stats{margin-top:32px}.hb-stats div{padding:20px 0}.hb-stats b{font-size:28px}.hb-stats span{margin-top:6px;max-width:none}.hb-stats .fn-more{padding-top:10px}
}

/* ---- industry cards (directory): two columns of large cards after Zip's product grid. Each card has a
   royal title, one outcome line and an app window cropped at the card's foot, drawn in HTML. ---- */
.iz-win{display:flex;flex-direction:column;align-self:center;width:84%;margin-top:auto;border-radius:10px 10px 0 0;background:#fff;
  box-shadow:0 0 0 1px #e3e9f3,0 -12px 40px -24px rgba(2,37,79,.28);font:500 12.5px/1.35 var(--web);color:var(--navy);height:330px;overflow:hidden}
.iz-bar{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);font:600 13.5px var(--web)}
.iz-bar b{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.iz-bar small{font:500 12px var(--web);color:var(--t4)}
.iz-btns{display:flex;gap:6px;margin-left:auto}.iz-btns i{padding:4px 9px;border-radius:5px;box-shadow:0 0 0 1px #dfe6f2;font:600 11px var(--web);font-style:normal;color:var(--navy)}
.iz-back{color:var(--t4)}
/* status tags */
.iz-t{justify-self:start;padding:3px 9px;border-radius:5px;font:600 11.5px var(--web);font-style:normal;white-space:nowrap}
.iz-t.r{background:#fdecea;color:#b42318}.iz-t.w{background:#fdf3e1;color:#a15c07}.iz-t.g{background:#e7f5ef;color:var(--green)}.iz-t.n{background:#f1f4f8;color:var(--t4)}.iz-t.b{background:var(--sky);color:var(--btn)}
/* tables */
.iz-tbl{display:flex;flex-direction:column;padding:4px 16px}
.iz-th,.iz-tr{display:grid;grid-template-columns:1.1fr 1.3fr .9fr;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.iz-th{border-top:0;font:500 11.5px var(--web);color:var(--t4)}
.iz-mute{color:var(--mute);font-weight:400}
.iz-tbl2 .iz-tr{grid-template-columns:1.6fr .4fr .7fr}.iz-tbl2 .iz-tr:first-child{border-top:0}
.iz-num{color:var(--mute)}
/* chat with a redline */
.iz-chat{display:flex;flex-direction:column;gap:12px;padding:16px 18px}
.iz-you{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.iz-you span{padding:8px 12px;border-radius:10px;background:#f1f4f8;font-weight:500}
.iz-av{flex:none;width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.iz-who{display:flex;align-items:center;gap:8px;color:var(--mute);font-weight:500}.iz-who .iz-av{width:22px;height:22px}
.iz-msg{display:flex;flex-direction:column;gap:7px;width:100%}.iz-msg i,.iz-sk{display:block;height:9px;border-radius:5px;background:#d3dcf7}.iz-msg .w90{width:90%}.iz-msg .w60{width:60%}
.iz-sk.w70{width:70%}.iz-sk.w60{width:60%}.iz-sk.w45{width:45%}
.iz-doc{display:flex;flex-direction:column;gap:7px;padding:12px 14px;border:1px solid var(--line);border-radius:8px}
.iz-doc b{font:600 12px var(--web)}
.iz-red,.iz-grn{display:flex;flex-direction:column;gap:6px}
.iz-red i,.iz-grn i{display:block;height:9px;border-radius:3px}
.iz-red i{background:#f7c9c4;position:relative}.iz-red i::after{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:#d9534f}
.iz-grn i{background:#c9ead9}
.iz-red .w70{width:70%}.iz-red .w45{width:45%}.iz-grn .w90{width:90%}.iz-grn .w80{width:80%}.iz-grn .w60{width:60%}
/* bid columns */
.iz-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.iz-col{display:flex;flex-direction:column;gap:7px;padding:14px;border-left:1px solid var(--line)}.iz-col:first-child{border-left:0}
.iz-co{display:flex;align-items:flex-start;gap:7px;font:600 12.5px/1.3 var(--web)}
.iz-lg{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#2946b6;color:#fff;font:700 10px var(--web);font-style:normal}
.iz-col:nth-child(2) .iz-lg{background:#6d5ae6}.iz-col:nth-child(3) .iz-lg{background:#0e7490}
.iz-col small{font:500 11.5px var(--web);color:var(--t4)}
.iz-st{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font:600 11.5px var(--web);font-style:normal}
.iz-st::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.iz-st.g{color:var(--green)}.iz-st.b{color:var(--btn)}.iz-st.w{color:var(--amber)}
.iz-kv{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.iz-kv span{font:500 11px var(--web);color:var(--t4)}.iz-kv b{font:600 13px var(--web)}
/* review: a small card pointing at the score table */
.iz-pair{display:flex;align-items:flex-start;gap:14px;width:84%;align-self:center;margin-top:auto}
.iz-pair .iz-win{width:auto;flex:1;margin:0;align-self:auto}
.iz-mini{flex:0 0 150px;display:flex;flex-direction:column;gap:10px;margin-top:20px;padding:14px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #e3e9f3,0 14px 28px -20px rgba(2,37,79,.3);font:500 12.5px var(--web);color:var(--navy)}
.iz-mini b{font:600 14px var(--web);padding-bottom:8px;border-bottom:1px solid var(--line)}
.iz-mini span{display:flex;flex-direction:column;gap:2px}.iz-mini small{font:500 11px var(--web);color:var(--t4)}
.iz-arrow{flex:none;width:0;height:0;margin-top:44px;border-left:8px solid var(--btn);border-top:6px solid transparent;border-bottom:6px solid transparent}
/* engagement letter progress */
.iz-portal{display:flex;flex-direction:column;gap:10px;padding:18px 18px}
.iz-h{text-align:center;font:600 14px var(--web);margin-bottom:4px}
.iz-prog{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;background:#f6f8fb}
.iz-prog span{display:flex;flex-direction:column;font:500 11px var(--web);color:var(--mute)}
.iz-prog i{flex:1;height:7px;border-radius:4px;background:#e3e8f1}.iz-prog i b{display:block;width:80%;height:100%;border-radius:4px;background:var(--btn)}
.iz-step{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px 12px;border-radius:8px;box-shadow:0 0 0 1px var(--line)}.iz-step b{grid-column:1}.iz-step .iz-sk{grid-column:1}.iz-step .iz-t{grid-column:2;grid-row:1/3}
.iz-step b{font:600 12.5px var(--web)}.iz-step span{display:flex;align-items:center;gap:7px;font:500 12px var(--web);color:var(--mute)}
.iz-ok,.iz-wait{flex:none;width:12px;height:12px;border-radius:50%;background:var(--green)}.iz-wait{background:var(--amber)}
.iz-lgv{background:#6d5ae6}
.iz-ic{margin-left:auto;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #b8c1d3}
/* shortlist */
.iz-cand .iz-tr{grid-template-columns:1.3fr 1.1fr .8fr}.iz-cand .iz-tr:first-child{border-top:0}
.iz-pp{display:flex;align-items:center;gap:8px;font-weight:600}.iz-pp .iz-av{width:24px;height:24px}
.iz-match{display:flex;align-items:center;gap:8px;color:var(--mute);font-weight:500}
.iz-match i{flex:1;height:6px;border-radius:3px;background:#e3e8f1}.iz-match i b{display:block;height:100%;border-radius:3px;background:var(--btn)}
.iz-match .m92{width:92%}.iz-match .m88{width:88%}.iz-match .m81{width:81%}.iz-match .m74{width:74%}.iz-match .m63{width:63%}
.iz-av.av01{background-image:url(../assets/img/seats/chief-of-staff-320.jpg)}.iz-av.av02{background-image:url(../assets/img/seats/sales-lead-320.jpg)}.iz-av.av03{background-image:url(../assets/img/seats/finance-lead-320.jpg)}
.iz-av.av05{background-image:url(../assets/img/seats/commerce-lead-320.jpg)}.iz-av.av09{background-image:url(../assets/img/seats/operations-lead-320.jpg)}.iz-av.av12{background-image:url(../assets/img/seats/people-lead-320.jpg)}.iz-av.av14{background-image:url(../assets/img/seats/legal-lead-320.jpg)}
@media (max-width:767px){
  .iz-win{width:92%;height:270px;margin-top:24px}
  .iz-pair{width:92%;margin-top:24px}.iz-mini,.iz-arrow{display:none}
  .iz-th,.iz-tr{grid-template-columns:1fr 1fr;row-gap:4px}.iz-th span:nth-child(2),.iz-tr .iz-mute{display:none}
  .iz-tbl2 .iz-tr,.iz-cand .iz-tr{grid-template-columns:1.4fr auto}.iz-tbl2 .iz-num,.iz-match{display:none}
  .iz-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.iz-col:nth-child(3){display:none}
  .iz-btns{display:none}
}


/* routines by industry */
.hb-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}   /* square-cornered like the tags and buttons; the selected tab in the tag tint, not solid blue */
.hb-tab{padding:7px 12px;border-radius:6px;box-shadow:0 0 0 1px #e3e9f3;font:500 13.5px var(--web);color:var(--mute);text-decoration:none;background:#fff;transition:background-color .15s,color .15s,box-shadow .15s}
.hb-tab:hover{color:var(--navy);box-shadow:0 0 0 1px #c9d4ee;text-decoration:none}
.hb-tab.on{background:var(--sky);color:var(--btn);font-weight:600;box-shadow:0 0 0 1px #b9c6ee}
.hb-rts.tabbed .hb-rt{display:none}
.hb-rts.tabbed .hb-rt.on{display:block}
.hb-tab:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
#routines{scroll-margin-top:72px}
.hb-key{display:flex;flex-wrap:wrap;gap:6px 18px;padding:11px 16px;border-top:1px solid var(--line);background:#fafbfe;font:500 12px var(--web);color:var(--t4)}
.hb-key span{display:inline-flex;align-items:center;gap:6px}
.hb-key i{width:8px;height:8px;border-radius:50%;background:var(--btn)}.hb-key i.wt{background:var(--amber)}.hb-key i.ok{background:var(--green)}

/* ---- routines by industry, after Zip's "team behind your transformation": a royal panel holding the
   industry switcher (in the photo's place), then a + list with dotted connectors and arrow links ---- */
.rt2{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;margin-top:48px;align-items:stretch}
.rt2-vis{display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:560px;padding:32px;border-radius:12px;overflow:hidden;
  background:radial-gradient(90% 60% at 15% 0%,rgba(8,18,70,.6),transparent 70%),radial-gradient(70% 60% at 100% 25%,rgba(160,180,245,.55),transparent 70%),
             linear-gradient(170deg,#1e39a3 0%,#2946b6 38%,#4a68d2 68%,#89a3ec 100%)}
.rt2-vis small{font:600 12px var(--web);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.rt2-vis .hb-tabs{display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;margin:0;padding:0;border:0}
.rt2-vis .hb-tab{display:block;padding:12px 16px;border-radius:8px;background:transparent;box-shadow:none;font:500 19px/1.3 var(--display);color:rgba(255,255,255,.8);text-align:left;white-space:normal}
.rt2-vis .hb-tab:hover{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.rt2-vis .hb-tab.on{background:#fff;color:var(--btn);font-weight:600;box-shadow:0 14px 28px -16px rgba(2,20,70,.55)}
.rt2-vis .hb-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.rt2 .hb-rts{display:block;align-self:center}
.rt2-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px}
.rt2-list li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:20px}
.rt2-list li::before{content:"";position:absolute;left:9px;top:28px;bottom:-26px;border-left:1.5px dotted #c3cbe0}
.rt2-plus{font:400 22px/1 var(--web);font-style:normal;color:var(--btn);text-align:center}
.rt2-list h3{margin:0 0 4px;font:600 19px/1.3 var(--display);color:var(--navy)}
.rt2-list p{margin:0;max-width:48ch;font:400 16px/1.55 var(--web);color:var(--ink)}
.rt2-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.rt2-meta small{font:500 13px var(--web);color:var(--t4)}
.rt2 .hb-key{margin:28px 0 0 40px;padding:0;border:0;background:none}
.rt2-links{display:flex;flex-direction:column;max-width:440px;margin:16px 0 0 40px}
.rt2-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid #cfd6e4;font:600 16px var(--web);color:var(--btn);text-decoration:none}
.rt2-links a::after{content:"\2192";font-size:19px;line-height:1}
.rt2-links a:hover{color:var(--blue-d);border-bottom-color:var(--btn)}
@media (max-width:991px){
  .rt2{grid-template-columns:minmax(0,1fr);gap:36px}
  .rt2-vis{min-height:0}
  .rt2-vis .hb-tabs{flex-direction:row;flex-wrap:wrap}
  .rt2-vis .hb-tab{font-size:16px;padding:9px 14px}
}
@media (max-width:767px){
  .rt2-vis{padding:20px;gap:10px}
  /* phones: all six industries at once in a 2 by 3 grid of soft buttons, nothing hidden past the edge */
  .rt2-vis .hb-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}   /* every box as tall as the tallest */
  .rt2-vis .hb-tab{display:flex;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);font-size:14.5px;line-height:1.25;color:#fff}
  .rt2-vis .hb-tab:hover{background:rgba(255,255,255,.2);color:#fff}
  /* a darker panel on phones (no pale periwinkle end) so every white name reads at 5:1 or better; a plain label */
  .rt2-vis{background:radial-gradient(90% 60% at 15% 0%,rgba(8,18,70,.6),transparent 70%),linear-gradient(170deg,#1e39a3 0%,#2946b6 55%,#3651bd 100%)}
  .rt2-vis small{font:500 15px var(--web);letter-spacing:0;text-transform:none;color:rgba(255,255,255,.85)}
  .rt2-vis .hb-tab.on{box-shadow:0 10px 22px -14px rgba(2,20,70,.6)}
  .rt2-list{gap:26px}.rt2-list li{column-gap:14px}.rt2-list p{font-size:15px}
  .rt2 .hb-key,.rt2-links{margin-left:34px}
}


/* ---- industry slides, after clay.com's feature stack: each panel is sticky at the same top, so the next
   slides up over it. Tints and accents per industry; the app window sits in a rounded box on the right ---- */
.iz-stack{display:flex;flex-direction:column;gap:24px;margin-top:48px}
.iz-slide{position:sticky;top:88px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:540px;border-radius:40px;background:var(--bg);
  box-shadow:0 -1px 0 rgba(2,37,79,.04),0 -18px 40px -30px rgba(2,37,79,.25);scroll-margin-top:88px}
/* colours belong to positions, not industries: when the industries change or move, each slot keeps its colour (Wafi, 2026-10-23) */
.iz-s1{--ac2:#5a78dc;--bg:#eef5ff;--ac:#2946b6;--soft:#cfe0fb;--box:#e0ebfd}   /* Consumer and retail */
.iz-s2{--ac2:#8193ea;--bg:#eff1fd;--ac:#4a5fd0;--soft:#d3daf8;--box:#e2e7fb}   /* Hospitality */
.iz-s3{--ac2:#4e97cc;--bg:#edf6fb;--ac:#1f6fa8;--soft:#c9e4f1;--box:#dbecf6}   /* Real estate and construction */
.iz-s4{--ac2:#4a64c8;--bg:#e9eefb;--ac:#1e39a3;--soft:#c3cff2;--box:#d9e2f8}   /* Manufacturing and logistics */
.iz-s5{--ac2:#8b8bea;--bg:#f2f1fd;--ac:#5b5bd6;--soft:#dad8f8;--box:#e5e4fb}   /* Financial services */
.iz-s6{--ac2:#6f8de6;--bg:#d3defa;--ac:#2946b6;--soft:#b3c5f4;--box:#c3d2f7}   /* Business services */
.iz-s7{--ac2:#3fa2c9;--bg:#ebf6fb;--ac:#107497;--soft:#c6e6f2;--box:#d8eef7}   /* Healthcare */
.iz-s8{--ac2:#9479e0;--bg:#f3f0fc;--ac:#6646c4;--soft:#ddd3f7;--box:#e8e1fa}   /* Public sector */
.iz-left{display:flex;flex-direction:column;padding:44px 40px 40px 52px}
.iz-pills{display:flex;align-items:center;margin-bottom:24px}
.iz-pill{height:32px;width:52px;border-radius:999px;background:var(--soft);box-shadow:0 0 0 2px var(--bg);font-style:normal}
.iz-pill+.iz-pill{margin-left:-20px}
.iz-pill.on{position:relative;z-index:1;display:inline-flex;align-items:center;width:auto;padding:0 18px;background:var(--ac);font:600 12.5px var(--web);letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;flex:none}
.iz-slide h3{margin:0;font:600 38px/1.1 var(--display);letter-spacing:-.022em;color:var(--navy);max-width:14ch}
.iz-slide h3 span{color:var(--ac)}
.iz-left p{margin:24px 0 0;max-width:40ch;font:400 17px/1.55 var(--web);color:var(--ink)}
.iz-foot{margin-top:auto;padding-top:22px}
.iz-go{font-size:15px;color:var(--ac)}.iz-go:hover{color:var(--navy)}
.iz-right{padding:24px}
.iz-box{display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:28px;background:var(--box);overflow:hidden;padding-top:40px}
.iz-box .iz-win{width:86%;margin-top:0;height:300px}
.iz-box .iz-pair{width:86%;margin-top:0}
@media (max-width:991px){
  .iz-slide{position:relative;top:auto;grid-template-columns:minmax(0,1fr);min-height:0;border-radius:28px}
  .iz-left{padding:36px 32px 0}
  .iz-slide h3{font-size:32px}
  .iz-right{padding:24px}
  .iz-box{height:auto;min-height:320px}
}
@media (max-width:767px){
  /* on phones the slides become a sideways swipe row, one a screen, the next peeking in */
  .iz-stack{flex-direction:row;gap:12px;margin:32px -16px 0;padding:0 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none}.iz-stack::-webkit-scrollbar{display:none}
  .iz-slide{flex:0 0 88%;scroll-snap-align:start}
  .iz-left{padding:26px 22px 0}
  .iz-slide h3{font-size:28px}
  .iz-left p{font-size:16px}
  .iz-right{padding:16px}
  .iz-box{min-height:0;padding-top:24px;border-radius:20px}
  .iz-box .iz-win,.iz-box .iz-pair{width:92%}
  .iz-box .iz-win{height:220px}
  .iz-pill{width:40px;height:28px}.iz-pill+.iz-pill{margin-left:-16px}
  .iz-pill.on{padding:0 14px;font-size:11.5px;letter-spacing:.08em}   /* two-word labels (Consumer goods) stay on one line */
}

/* start small and grow: one picture per step, each a white panel in a soft blue frame (the Add a rule look) */
.sg-frame{display:flex;align-items:center;justify-content:center;min-height:440px;padding:40px;border-radius:14px;
  background:linear-gradient(160deg,#f3f6fd 0%,#e6ecfb 100%);box-shadow:inset 0 0 0 1px #e3e9f3}
.sg-pane{width:100%;max-width:420px}.sg-frame.tabbed .sg-pane{display:none}.sg-frame.tabbed .sg-pane.on{display:block}.sg-frame:not(.tabbed){flex-direction:column;gap:20px}
.sg-img>span{display:block}
.sg-panel{display:flex;flex-direction:column;border-radius:10px;background:#fff;box-shadow:0 0 0 1px #e3e9f3,0 18px 36px -24px rgba(2,37,79,.35);font:500 13px var(--web);color:var(--navy)}
.sg-hd{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.sg-hd b{font:600 14px var(--web)}.sg-hd small{font:500 12px var(--web);color:var(--t4)}
.sg-f{display:flex;flex-direction:column;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.sg-f>small{font:500 11.5px var(--web);color:var(--t4)}
.sg-in{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;border-radius:7px;box-shadow:0 0 0 1px #dfe6f2;font:500 13px var(--web)}
.sg-in.sel i{width:6px;height:6px;border:solid var(--navy);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-3px}
.sg-rules{display:flex;flex-direction:column;gap:6px}
.sg-rules span{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;background:#f6f8fb;font:500 12.5px var(--web)}
.sg-rules i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--green)}
.sg-acts{display:flex;justify-content:flex-end;gap:8px;padding:11px 14px}
.sg-acts em{padding:6px 12px;border-radius:6px;font:600 12.5px var(--web);font-style:normal}
.sg-acts .y{background:var(--btn);color:#fff}.sg-acts .n{box-shadow:0 0 0 1px #dfe6f2}
.sg-ws{display:flex;flex-direction:column;gap:6px;padding:10px 12px}
.sg-w{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px}
.sg-w.on{background:var(--sky)}
.sg-w>span{display:flex;flex-direction:column;flex:1}.sg-w b{font:600 13px var(--web)}.sg-w small{font:500 11.5px var(--web);color:var(--t4)}
.sg-lg{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:6px;background:#2946b6;color:#fff;font:700 12px var(--web);font-style:normal}
.sg-lg2{background:#6d5ae6}.sg-lg3{background:#0e7490}
.sg-tag{padding:3px 8px;border-radius:5px;background:#fff;font:600 11px var(--web);font-style:normal;color:var(--btn)}

/* the steps on the left switch the picture on the right */
.sg-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;margin-top:64px}
.sg-steps{display:flex;flex-direction:column;gap:8px}
.sg-step{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 18px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer;font:inherit;transition:background-color .15s,box-shadow .15s}
.sg-step img{flex:none;width:34px;height:34px;padding:8px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px #dfe6f2}
.sg-step span{display:flex;flex-direction:column;gap:4px}
.sg-step b{font:600 16px var(--web);color:var(--navy)}
.sg-step small{max-width:44ch;font:400 14.5px/1.55 var(--web);color:var(--mute)}
.sg-step:hover{background:rgba(255,255,255,.6)}
.sg-step.on{background:#fff;box-shadow:0 0 0 1px #e3e9f3,0 14px 28px -22px rgba(2,37,79,.35)}
.sg-step:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
@media (max-width:991px){
  .sg-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .sg-frame{min-height:0;padding:24px}
}

/* ---- phone pass: shorter sections and thumb-sized targets ---- */
@media (max-width:767px){
  /* stats as a 2 by 2 grid instead of four stacked rows */
  .hb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hb-stats div,.hb-stats div:nth-child(3){padding:20px 0;border-left:0}
  .hb-stats div:nth-child(even){padding-left:16px;border-left:1px solid #d6e0f5}
  .hb-stats div+div{border-top:0}.hb-stats div:nth-child(n+3){border-top:1px solid #d6e0f5}
  .hb-stats b{font-size:26px}.hb-stats span{font-size:14px}
  /* every text link gets a 44px tall hit area without moving the layout */
  .hb-s .fn-more,.iz-go{padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px}
  .hb-stats .fn-more{display:block;margin-top:auto;padding-top:12px;font-size:14px;line-height:1.35}
  .hb-stats .fn-more:after{display:inline-block;margin:0 0 1px 6px;vertical-align:middle}   /* in the narrow columns the arrow follows the last word when the link wraps */
  .rt2-vis .hb-tab{min-height:44px}
  /* start small and grow: less air between the two ways in and the steps */
  .hb-two{gap:28px;margin-top:32px;padding-bottom:40px}
  .sg-wrap{margin-top:40px}
  /* plan your first month: the three cards as a swipe row, like the slides */
  .hb-three{display:flex;gap:12px;margin:32px -16px 0;padding:0 16px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none}
  .hb-three::-webkit-scrollbar{display:none}
  .hb-three .hb-pc{flex:0 0 82%;scroll-snap-align:start}
  .hb-pc .hb-vis,.hb-res .hb-vis{height:160px}
}

/* ---- the dropdown menus' scale (2026-10-16) ----------------------------------------------
   Titles drop to medium weight with no bold, labels take the menus' small capitals at .06em,
   the slides and frames take the 16px panel corner and the step buttons the 12px card corner.
   Colours stay as settled. The mock app screens keep their own styles. */
.p-industries .iz-slide h3,.p-industries .hb-card b,.p-industries .rt2-list h3,.p-industries .hb-it h3,
.p-industries .hb-two h3,.p-industries .sg-step b{font-weight:500}
.p-industries .hb-tab.on,.p-industries .rt2-vis .hb-tab.on{font-weight:500}
.p-industries .hb-acc details[open] summary,.p-industries .hb-faq summary{font-weight:500}
.p-industries .iz-pill.on{font-size:var(--fs-label);letter-spacing:var(--ls-label)}
.p-industries .rt2-vis small{font-size:var(--fs-label);letter-spacing:var(--ls-label)}
.p-industries .iz-slide{border-radius:var(--r-panel)}
.p-industries .sg-frame{border-radius:var(--r-panel)}
.p-industries .sg-step{border-radius:var(--r-card)}
@media (max-width:767px){
  .p-industries .rt2-vis small{font-size:15px;letter-spacing:0}   /* phones keep the plain "Choose an industry" label */
}
/* product (2026-10-25): the stack under an hb-h heading, with the gap the slides and the switcher use */
#learn .stk{margin-top:48px}
@media (max-width:767px){ #learn .stk{margin-top:32px} }
/* product: the readiness card shows question 3 of 4 */
.p-industries .hb-res .hb-prog i{width:75%}

/* ---- LAYERED SCENES (product Four layers, 2026-10-25): each pillar's picture after Wafi's reference sheets (a tinted
   panel, a ghost or back window, the app window slanted as one plane, matrix(.982,.191,0,1) = an 11 degree skew, bleeding
   off the panel and fading right, one row lifted out, a piece in front), drawn in the Office's own look (the Overview:
   white row cards on #fafbfc, a 1px line, navy titles with grey counts, outlined pills with a status dot, an outlined
   and a royal button, faces, the smooth chart with a soft fill). Plain 2D transforms and masks; art assets/art/lx-chart.svg. */
#layers .iz-box{padding-top:0;justify-content:stretch}
.lx{position:relative;display:block;flex:1;min-height:420px;overflow:hidden;font-family:var(--ui)}
.lx span,.lx i,.lx b,.lx em,.lx small{box-sizing:border-box;font-style:normal}
.lx>span{position:absolute;display:block}
.lx-ghost{left:18%;top:7%;width:100%;height:62%;border-radius:14px;background:var(--ac2);opacity:.16;transform:matrix(.982,.191,0,1,0,0);transform-origin:0 0;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent 95%);mask-image:linear-gradient(90deg,#000 55%,transparent 95%)}
.lx-main{left:9%;top:13%;width:112%;transform:matrix(.982,.191,0,1,0,0);transform-origin:0 0}
.lx-main.lx-low{top:25%}
/* the window */
.ax-win{display:flex;flex-direction:column;min-height:470px;border-radius:12px;background:#fafbfc;
  box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(2,37,79,.35);
  -webkit-mask-image:linear-gradient(90deg,#000 58%,transparent 97%);mask-image:linear-gradient(90deg,#000 58%,transparent 97%)}
.ax-top{display:flex;align-items:center;height:46px;padding:0 18px;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;background:#fff}
.ax-crumb{font:400 13px var(--ui);color:var(--mute);white-space:nowrap}.ax-crumb b{font-weight:500;color:var(--navy)}
.ax-btns{display:flex;gap:8px;margin-left:auto;padding-right:22%}
.ax-btns i{padding:6px 11px;border:1px solid var(--line);border-radius:7px;background:#fff;font:500 12px/1 var(--ui);color:var(--ink);white-space:nowrap}
.ax-btns i.p{background:var(--btn);border-color:var(--btn);color:#fff}
.ax-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px}
.ax-hi{font:600 20px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ax-h{display:flex;align-items:baseline;gap:8px;margin:2px 0 2px}
.ax-h b{font:600 14px var(--ui);color:var(--navy)}.ax-h small{font:400 12.5px var(--ui);color:#5a697f}
.ax-h em{margin-left:auto;padding-right:22%;font:500 12px var(--ui);color:var(--btn);white-space:nowrap}
/* rows: the app's white row cards */
.ax-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ax-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ax-t b{font:500 13.5px var(--ui);color:var(--ink);white-space:nowrap}.ax-t small{font:400 12px var(--ui);color:#5a697f;white-space:nowrap}
.ax-lg{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f1f4f8;font:700 13px var(--display)}
.ax-row .iz-av,.ax-srow .iz-av{flex:none;width:30px;height:30px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.ax-ring{flex:none;width:12px;height:12px;margin:0 4px;border-radius:50%;box-shadow:inset 0 0 0 2px #2e9d6b}
.ax-ring.now{box-shadow:inset 0 0 0 2px #f59e0b}
.ax-pill{display:inline-flex;align-items:center;gap:6px;margin-left:auto;margin-right:22%;padding:4px 10px;border:1px solid #dbe6f2;border-radius:999px;background:#fff;
  font:500 11.5px var(--ui);color:#2f3d52;white-space:nowrap}
.ax-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#2e9d6b}
.ax-pill.b::before{background:var(--btn)}.ax-pill.w::before{background:#f59e0b}.ax-pill.up{margin-right:0}.ax-pill.up::before{display:none}
/* the lifted row */
.ax-row.lift{position:relative;z-index:2;border-color:transparent;transform:translate(-10px,-3px) scale(1.035);transform-origin:0 50%;
  box-shadow:0 0 0 1.5px var(--ac2),0 18px 34px -14px rgba(2,37,79,.35)}
.ax-row.lift .ax-t b{color:var(--ac)}
/* the outlined total */
.ax-total{border:1.5px solid var(--ac);background:var(--bg)}.ax-total .ax-t b,.ax-total .ax-t small{color:var(--ac)}
.ax-sum{margin-left:auto;margin-right:22%;font:600 13px var(--ui);color:var(--ac);white-space:nowrap}
/* AI health card */
.ax-card{display:flex;flex-direction:column;margin-right:20%;padding:14px 16px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.ax-ch{display:flex;align-items:baseline}.ax-ch b{font:600 13.5px var(--ui);color:var(--navy)}.ax-ch em{margin-left:auto;font:400 12px var(--ui);color:#2f3d52}
.ax-fig{display:flex;align-items:center;gap:8px;margin-top:6px}.ax-fig b{font:500 26px/1 var(--display);color:var(--navy)}.ax-fig small{font:400 12px var(--ui);color:#2f3d52}
.ax-fig .ax-pill{margin-left:auto}
.ax-chart{display:block;height:140px;margin-top:8px;background:url(../assets/art/lx-chart.svg) no-repeat left top/100% 140px}
/* the AI team panel in front */
.lx-side{right:3%;top:47%;width:250px;padding:12px 14px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line),0 24px 44px -20px rgba(2,37,79,.4);
  transform:matrix(.982,.191,0,1,0,0);transform-origin:0 0}
.lx-side .ax-h{margin:0 0 6px}
.ax-srow{display:flex !important;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.ax-srow em{margin-left:auto;font:600 14px var(--display);color:var(--ac)}
/* Experts: the back window */
.lx-back{left:20%;top:6%;width:96%;height:58%;padding:16px 22px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.85);
  transform:matrix(.982,.191,0,1,0,0);transform-origin:0 0;
  -webkit-mask-image:linear-gradient(90deg,#000 50%,transparent 92%);mask-image:linear-gradient(90deg,#000 50%,transparent 92%)}
.lx-chips{display:flex !important;gap:8px;margin-top:12px}
.lx-chips i{padding:4px 11px;border:1px solid #dbe6f2;border-radius:999px;background:#fff;font:500 11.5px var(--ui);color:#2f3d52}
.lx-c0{color:#2946b6}.lx-c1{color:#2e9d6b}.lx-c2{color:#c2410c}.lx-c3{color:#6646c4}.lx-c4{color:#107497}
@media (max-width:991px){ .lx{min-height:360px} }
@media (max-width:767px){
  .lx{min-height:290px}
  .lx-main{left:7%;top:10%;width:125%}.lx-main.lx-low{top:20%}
  .ax-win{min-height:330px}
  .ax-btns i:not(.p){display:none}
  .ax-pill{margin-right:24%}
  .lx-side{width:200px;right:2%;top:52%;padding:10px 12px}.lx-side .ax-srow:nth-child(4){display:none}
  .ax-chart{height:100px;background-size:100% 100px}
}
@media (max-width:767px){ .ax-row .ax-pill,.ax-h small,.ax-sum{display:none} .ax-h{white-space:nowrap} .ax-h em{padding-right:26%} }

/* ---- TYPE SCALE (2026-10-25, Wafi's review; product first, then Industries the same day): both pages' text on one
   scale. Section headings stay hb-h 34px; every title under them is smaller, item titles share one size, description
   lines one size and one grey, text links 15px, titles 500. .p-industries is on both pages' body. */
.p-industries .iz-slide h3{font-size:28px;line-height:1.2;letter-spacing:-.02em}                      /* below the 34px section heading */
.p-industries .rt2-list h3,.p-industries .hb-res h3,.p-industries .hb-faq summary,.p-industries .sg-step b,.p-industries .hb-two h3{font-size:18px;line-height:1.3}   /* one item-title size */
.p-industries .iz-slide p,.p-industries .rt2-list p,.p-industries .hb-faq p,.p-industries .hb-res p,.p-industries .sg-step small,.p-industries .hb-two p{font-size:16px;line-height:1.55;color:#46556b}   /* one description size and one grey */
.p-industries .stk-row{font-weight:500}                                                               /* titles are never bold */
.p-industries .stk-row small{font-size:14.5px}
.p-industries .rt2-links a,.p-industries .hb-res .fn-more,.p-industries .iz-slide .fn-more,.p-industries .hb-two .fn-more,.p-industries .hb-stats .fn-more{font-size:15px}   /* one link size */
@media (max-width:767px){ .p-industries .iz-slide h3{font-size:22px} }
.p-industries .hb-stats b{font-size:34px}   /* stat figures no bigger than the section headings (2026-10-25); phones keep their 26px */
@media (max-width:767px){ .p-industries .hb-stats b{font-size:26px} }

/* ---- Industries slides as layered scenes too (2026-10-25): the product page's LAYERED SCENES on the eight industry
   panels, in each panel's own colour */
#industries .iz-box{padding-top:0;justify-content:stretch}
.ax-pill.r::before{background:#e5484d}
.ax-ring.next{box-shadow:inset 0 0 0 2px #c4cedc}
.ax-lg.wide{width:auto;min-width:30px;padding:0 7px;font:600 12px var(--ui)}
.ax-bub{display:block;margin-top:8px;padding:8px 11px;border-radius:10px;background:#f1f4f8;font:400 12.5px/1.4 var(--ui);color:var(--ink)}
.ax-bub.me{margin-left:24px;background:var(--btn);color:#fff}
@media (max-width:767px){ .ax-bub{font-size:11.5px} }
.ax-h+.ax-row.lift{margin-top:6px}   /* a lifted first row clears the header */

/* ---- INDUSTRIES REFINE (2026-11-06, Mode B, design-system/): the page keeps its sections, copy and motion and takes the
   homepage's type and grounds, as the Product page did (health.css). One section heading size (the base h2: 44px, 32px
   on phones) in place of 34px; the grey second line of each heading reads as the homepage lead (19px, 17 on phones, the
   site's mid grey) 14px under it, and the heading sits a steady 56px above its content (40 on phones); the hero headline
   is the homepage's 72px; the bands alternate the homepage's #f4f6f9 and white from the first section under the hero
   (Hand off the weekly work grey, rising from the hero's white foot with the sections' rounded top; Eight industries
   white; the routines grey; Start small white; Plan grey; the FAQ white, then the grey closing). Scoped to Industries
   alone: Product also loads this file and has its own rules. ---- */
.p-industries:not(.p-office) .hb-title{font-size:clamp(48px,5.1vw,72px);letter-spacing:-.03em}
.p-industries:not(.p-office) .hb-h{max-width:none;font:500 clamp(30px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.02em}
.p-industries:not(.p-office) .hb-h .gy{max-width:40em;margin-top:14px;font:400 19px/1.55 var(--ui);letter-spacing:0;color:var(--mute)}
.p-industries:not(.p-office) .hb-s .wrap:not(.hb-faq) > .hb-h + *{margin-top:56px}
.p-industries:not(.p-office) .hb-faq .hb-h{max-width:12em}
/* grounds (2026-11-06, Wafi, in passes): one white run from the hero through Hand off the weekly work, Eight industries
   and the routines; then Start small grey, the steps white, Plan grey, the FAQ white and the grey closing */
.p-industries:not(.p-office) .hb-statsec{background:#fff}
.p-industries:not(.p-office) #industries{background:#fff}
.p-industries:not(.p-office) #routines{background:#fff}   /* fourth pass (2026-11-06, Wafi): the routines white too, so one white run from the hero to Start small */
.p-industries:not(.p-office) #industries,.p-industries:not(.p-office) #routines{padding-top:16px}   /* on the same white as the section above, so the gap is that one's foot plus 16px: about 120px, the homepage's spacing between same-ground sections (it was 208) */
.p-industries:not(.p-office) .hb-grey{background:#f4f6f9}
.p-industries:not(.p-office) .hb-s.hb-grey + .hb-s:not(.hb-wash){background:#fff}
.p-industries:not(.p-office) .hb-sg .sg-wrap{margin-top:0}   /* the steps and the New routine panel, their own section under Start small and grow (2026-11-06, Wafi) */
.p-industries:not(.p-office) .hb-sg + .hb-s{background:#f4f6f9}
.p-industries:not(.p-office) .hb-two{padding-bottom:0;border-bottom:0}   /* no divider under the two ways to start: the steps below are their own section now (2026-11-06, Wafi) */
.p-industries:not(.p-office) .hb-wash{background:#fff}

@media (max-width:767px){
  .p-industries:not(.p-office) .hb-h{font-size:32px}
  .p-industries:not(.p-office) .hb-h .gy{margin-top:12px;font-size:17px}
  .p-industries:not(.p-office) .hb-s .wrap:not(.hb-faq) > .hb-h + *{margin-top:40px}
  .p-industries:not(.p-office) .hb-title{font-size:44px}
}

/* Eight industries on phones (2026-11-06, Wafi): a deck that builds as you scroll, as Four layers does on Product, in
   place of the sideways swipe row. Each card sticks under the nav as it arrives and the next slides up over it, so an 8px
   edge of every earlier card shows (8px, not 10, with eight cards); the card being covered shrinks and dims a little
   (--k, set by the page script). Product keeps its own rules (#layers) */
@media (max-width:767px){
  .p-industries:not(.p-office) #industries .iz-stack{flex-direction:column;gap:16px;margin:32px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .p-industries:not(.p-office) #industries .iz-slide{flex:none;position:sticky;top:calc(72px + var(--i, 0) * 8px);transform-origin:50% 0;
    transform:scale(calc(1 - var(--k, 0) * .05));filter:brightness(calc(1 - var(--k, 0) * .04));
    box-shadow:0 -10px 26px -18px rgba(2,37,79,.35),0 0 0 1px rgba(2,37,79,.04)}
  .p-industries:not(.p-office) #industries .iz-s2{--i:1}
  .p-industries:not(.p-office) #industries .iz-s3{--i:2}
  .p-industries:not(.p-office) #industries .iz-s4{--i:3}
  .p-industries:not(.p-office) #industries .iz-s5{--i:4}
  .p-industries:not(.p-office) #industries .iz-s6{--i:5}
  .p-industries:not(.p-office) #industries .iz-s7{--i:6}
  .p-industries:not(.p-office) #industries .iz-s8{--i:7}
}

/* css/avatar.css */
/* ---- AVATAR CARD (product page, AI workers, since 2026-11-02; on the home page's #learn 2026-11-01 to 2026-11-02, Wafi:
   the home section went back to the chat animation and the card moved here). Script: ALPHA CLIPS at the foot of
   product.html. The card sits in the AI workers slide's panel (.iz-box.aw-box), over a soft royal glow. */
.iz-box.aw-box,#layers .iz-box.aw-box{position:relative;justify-content:center;align-items:center;padding:36px 24px}   /* centred both ways: the #layers slides set padding-top:0 and stretch, which pinned the card to the top (2026-11-02, Wafi) */
/* the royal glow behind the glass card (back 2026-11-01, Wafi's screenshot) */
.iz-box.aw-box::before{content:"";position:absolute;left:50%;top:50%;width:min(460px,96%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 32% 34%,rgba(65,105,225,.3),transparent 60%),radial-gradient(circle at 70% 68%,rgba(143,176,255,.36),transparent 62%);filter:blur(36px)}   /* a little softer (2026-11-01, Wafi; was .42/.5 at 28px blur) */
.aw{position:relative;width:min(350px,100%);padding:30px 23px 30px;border-radius:var(--r-panel);text-align:center;
  background:linear-gradient(155deg,rgba(255,255,255,.66),rgba(255,255,255,.24));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),0 24px 50px -26px rgba(30,57,163,.45)}   /* frosted glass over the royal glow, no dots (back 2026-11-01, Wafi's screenshot); 350px, the figure 235px on desktop */
.aw-hi{margin:0;font:var(--fw-title) 18px/1.25 var(--display);letter-spacing:-.01em;color:var(--navy)}   /* the one line, the card's title (2026-11-01: the second line repeated the hero); navy on the glass, as in Wafi's screenshot (2026-11-01) */
.aw-fig{position:relative;width:min(235px,100%);aspect-ratio:864/1074;margin:21px auto 0}   /* the waving flagship back (2026-11-06, Wafi) */
.aw-fig>*{position:absolute;inset:0;width:100%;height:100%;display:block}
.aw-cv{opacity:0;transition:opacity .3s ease}
.aw-fig.live .aw-cv{opacity:1}
.aw-fig.live .aw-still{opacity:0;transition:opacity .3s ease}
.aw-src{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* phones (2026-11-01, Wafi): the avatar card a size down from full width, centred, with the figure in step */
@media (max-width:767px){ .aw{width:min(264px,74%);padding:22px 16px 22px} .aw-fig{width:min(172px,100%);margin-top:14px} .aw-hi{font-size:16px} .iz-box.aw-box::before{width:min(340px,96%)} }   /* phones: a size down three times on 2026-11-01 (320/210/18, 290/190/17, now 264/172/16) */
/* Mane at work (2026-11-06, Wafi): his tablet loop in the card, cut out of its white ground (workspace/tools/video/whitecut.swift); 3:4, so the canvas is not stretched */
.aw-fig.aw-mane{aspect-ratio:604/806}
.aw-role{white-space:nowrap}   /* when the line wraps (phones), it breaks after "Mane." */
/* the reimagined flagship back in the card (2026-11-06, Wafi: "change the Mane avatar in this card with the flagship
   avatar"): the still with the floor shadow it was rendered with (same picture as Hire AI workers, Know who runs it),
   about Mane's standing height; no loop, so the card's canvas and clip are gone */
.aw-fig.aw-flag{width:min(176px,100%);aspect-ratio:760/1528}
@media (max-width:767px){ .aw-fig.aw-flag{width:min(132px,100%)} }

/* css/health.css */
/* ============================================================================
   AI HEALTH, LIVE — Office page, AI health section. After Metronome's hero.

   Metronome: a browser dashboard over a colour video; its charts draw left to
   right (clip-path inset(0 100% 0 0) to 0), then two floating cards rise in from
   opacity 0 / translateY(16px), staggered; a donut sits in the notification.
   Kept on a fixed 1120x600 stage. The video becomes a CSS gradient that drifts.
   Builder-safe: no keyframes here (HEALTH block in css/motion.css). Resting state
   is the finished frame.
   ========================================================================== */

.mt-band{overflow:hidden}   /* a stale --s can never widen the page */
.mt{--s:1;position:relative;max-width:100%;width:calc(1120px * var(--s));height:calc(600px * var(--s));margin:34px auto 0}
.mt-stage{position:absolute;left:0;top:0;width:1120px;height:600px;transform:scale(var(--s));transform-origin:0 0;
  border-radius:8px;overflow:hidden;contain:layout paint;font-family:var(--ui);color:var(--ink);background:#d6dcf4}
.mt-foot{margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--t4)}
.mt-bg{position:absolute;left:-15%;top:-15%;width:130%;height:130%;display:block;
  background:radial-gradient(520px 420px at 12% 18%,rgba(43,179,217,.85),transparent 70%),
             radial-gradient(560px 460px at 88% 22%,rgba(79,190,150,.55),transparent 70%)   /* the logo green, not purple */,
             radial-gradient(640px 520px at 70% 92%,rgba(41,70,182,.85),transparent 72%),
             radial-gradient(520px 420px at 20% 90%,rgba(145,161,224,.9),transparent 70%),#c9d1f0}
/* JS plays it on arrival; without JS these never match and the frame is whole */
.js .mt:not(.go) .mt-seat,.js .mt:not(.go) .mt-note,.js .mt:not(.go) .mt-sb,.js .mt:not(.go) .mt-late,.js .mt:not(.go) .mt-ann{opacity:0}
.js .mt:not(.go) .mt-sa{opacity:1}
.js .mt:not(.go) .mt-plot{clip-path:inset(0 100% 0 0)}

/* ---- the browser: the Office Overview as it looks in the product ----------
   Light sidebar, a breadcrumb bar with the two actions, the greeting, then AI
   health as the app lays it out: Productivity and AI usage cards, each with its
   figure, a trend pill, a line of context and the chart; the workforce below. */
.mt-win{position:absolute;left:80px;top:56px;width:940px;height:600px;border-radius:8px;overflow:hidden;
  background:#fafbfc;border:1px solid rgba(255,255,255,.6);
  /* glass frame, as on the home hero shot: a translucent white band with bright hairlines,
     drawn as box-shadow rings so the window and its callouts keep their positions */
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 0 14px rgba(255,255,255,.2),0 0 0 15px rgba(255,255,255,.45),0 34px 70px -30px rgba(2,37,79,.45)}
.mt-win>span{position:absolute;display:block}
.mt-bar{left:0;top:0;width:100%;height:34px;display:flex !important;align-items:center;justify-content:center;
  background:#f3f5f8;border-bottom:1px solid var(--line)}
.mt-dots{position:absolute;left:14px;top:12px;display:flex;gap:6px}
.mt-dots i{display:block;width:10px;height:10px;border-radius:50%;background:#dbe3ed}
.mt-url{display:flex;align-items:center;gap:6px;width:300px;height:22px;justify-content:center;border-radius:5px;
  background:#fff;border:1px solid var(--line);font-size:11.5px;color:var(--mute)}

.mt-side{left:0;top:34px;bottom:0;width:188px;padding:14px 12px;background:#fff;border-right:1px solid #e6edf5;display:flex !important;flex-direction:column;gap:1px}
.mt-mark{display:block;height:19px;margin:0 6px 12px;background:url(../assets/img/manelink-wordmark.svg) no-repeat left center/contain}
.mt-ws{position:relative;display:block;margin-bottom:8px;padding:7px 10px;border:1px solid #e1e8f1;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--ink)}
.mt-ws::after{content:"";position:absolute;right:11px;top:11px;width:5px;height:5px;border:solid #46556b;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.mt-find{position:relative;display:flex;align-items:center;margin-bottom:8px;padding:6px 8px 6px 28px;border:1px solid #e1e8f1;border-radius:6px;background:#f7f9fc;font-size:12px;color:var(--t4)}
.mt-find::before{content:"";position:absolute;left:10px;top:9px;width:8px;height:8px;border:1.5px solid #8793a6;border-radius:50%}
.mt-find::after{content:"";position:absolute;left:18px;top:18px;width:4px;height:1.5px;background:#8793a6;transform:rotate(45deg)}
.mt-find em{margin-left:auto;padding:1px 5px;border:1px solid #e1e8f1;border-radius:4px;background:#fff;font-style:normal;font-size:11px;color:#46556b}
.mt-grp{display:block;margin:10px 0 3px;padding:0 10px;font-size:11px;font-weight:500;letter-spacing:.04em;color:#5a697f}
.mt-nav{display:flex;align-items:center;gap:10px;height:27px;padding:0 10px;border-radius:6px;font-size:12.5px;color:#1c2636}
.mt-nav img{filter:grayscale(1) brightness(.5);opacity:.85}
.mt-nav em{margin-left:auto;font-style:normal;font-size:11.5px;color:#46556b}
.mt-nav em.mt-red{color:#e5484d}
.mt-nav.on{background:#eaf0f8;color:#040d1c;font-weight:500}
.mt-nav.on img{filter:none;opacity:1}

.mt-top{left:188px;right:0;top:34px;height:46px;display:flex !important;align-items:center;gap:8px;padding:0 18px;border-bottom:1px solid #e6edf5}
.mt-crumb{margin-right:auto;font-size:13px;color:#5a697f}
.mt-crumb b{margin-left:4px;font-weight:500;color:var(--navy)}
.mt-tb{padding:5px 11px;border:1px solid #e1e8f1;border-radius:6px;background:#fff;font-size:12px;font-weight:500;color:var(--ink)}
.mt-tb.mt-tp{border-color:var(--blue);background:var(--blue);color:#fff}
.mt-hi{left:212px;top:96px;display:flex !important;flex-direction:column;gap:3px;font:600 22px/1.15 var(--display);color:#0b1220}
.mt-hi small{font:400 12.5px var(--ui);color:#3d4a5c}

.mt-sh2{left:212px;right:24px;top:158px;display:flex !important;align-items:baseline;gap:8px}
.mt-sh2 b{font-size:14px;font-weight:600;color:var(--navy)}
.mt-sh2 small{font-size:12px;color:#46556b}
.mt-sh2 em{margin-left:auto;font-size:12px;font-style:normal;color:var(--blue)}
.mt-sh3{top:436px}

.mt-card{top:184px;width:346px;height:236px;display:flex !important;flex-direction:column;padding:14px 16px;border:1px solid #e4ecf5;border-radius:8px;background:#fff}
.mt-c1{left:212px}
.mt-c2{left:570px}
.mt-ch{display:flex;align-items:baseline}
.mt-ch b{font-size:14px;font-weight:600;color:var(--navy)}
.mt-ch em{margin-left:auto;font-size:12px;font-style:normal;color:#3d4a5c}
.mt-kpi{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.mt-kpi strong{font:600 26px/1 var(--display);letter-spacing:-.01em;color:var(--navy)}
.mt-kpi small{font-size:12.5px;color:#3d4a5c}
.mt-pill{margin-left:auto;align-self:center;padding:3px 9px;border:1px solid #e1e8f1;border-radius:999px;background:#fff;font:500 11px var(--ui);font-style:normal;color:var(--ink)}
.mt-up,.mt-dn{color:var(--ink)}
.mt-sub{display:block;margin-top:8px;font-size:11.5px;color:#5a697f}
.mt-chart{display:flex;flex:1 1 auto;margin-top:12px;min-height:0}
.mt-plot{position:relative;flex:1;background-repeat:no-repeat,repeat-y;background-position:center,0 0;background-size:100% 100%,100% 33.33%}
.mt-prod{background-image:url(../assets/art/mt-prod.svg),linear-gradient(180deg,rgba(208,221,236,.6) 1px,transparent 1px)}
.mt-cost{background-image:url(../assets/art/mt-cost.svg),linear-gradient(180deg,rgba(208,221,236,.6) 1px,transparent 1px)}
.mt-end{position:absolute;right:-5px;display:block;width:10px;height:10px;border-radius:50%;background:var(--blue);border:2px solid #fff;
  box-shadow:0 0 0 0 rgba(41,70,182,.45)}
.mt-prod .mt-end{top:calc(16.7% - 5px)}   /* the last point of the productivity curve */
.mt-cost .mt-end{top:calc(56.7% - 5px)}   /* the last point of the cost curve */

.mt-seats{left:212px;right:24px;top:462px;display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mt-sc{display:flex;align-items:center;gap:10px;height:48px;padding:0 12px;border:1px solid #e4ecf5;border-radius:8px;background:#fff}
.mt-sc>i{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--sky)}
.mt-sc>i.mt-run::after{content:"";position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;background:#1f9d6b}
.mt-sc>span{display:flex;flex-direction:column;gap:1px;min-width:0}
.mt-sc b{font-size:12.5px;font-weight:600;color:var(--ink)}
.mt-sc small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11.5px;color:#46556b}

/* ---- the story's parts. Rest (JS or motion off) is the END: after-values, the
   "under the median" marker, both cards, the stage unlocked. -------------------- */
.mt-sw{display:inline-grid}
.mt-sw>span{grid-area:1/1}
.mt-sa{opacity:0}
.mt-med{position:absolute;left:0;right:0;top:40%;height:0;border-top:1.5px dashed #9aa7b8}   /* the median, $0.48 */
.mt-medl{position:absolute;right:0;top:calc(40% - 17px);font:500 11px var(--ui);font-style:normal;color:#5a697f}
.mt-ann{position:absolute;padding:4px 9px;border-radius:6px;background:#fff;border:1px solid #e4ecf5;font:600 11px var(--ui);font-style:normal;white-space:nowrap;
  color:var(--navy);box-shadow:0 8px 18px -8px rgba(2,37,79,.3)}
.mt-a1{left:6%;top:calc(33% + 8px);opacity:0}
.mt-a1::before,.mt-a2::before{content:"";position:absolute;left:12px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px #fff}
.mt-a2{left:34%;top:calc(40% + 10px);background:#e7f6ee;border-color:#cdebd9;color:var(--green)}
.mt-a2::before{background:var(--green)}
.mt-unl{font-weight:600;color:var(--green) !important}

/* ---- the floating cards ------------------------------------------------- */
.mt-seat,.mt-note{position:absolute;z-index:3;border-radius:8px;background:#fff;overflow:hidden;
  box-shadow:0 26px 50px -22px rgba(2,37,79,.42),0 6px 16px -8px rgba(2,37,79,.16)}
.mt-seat{left:790px;top:176px;width:310px;padding:12px}
.mt-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mt-tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:6px;background:var(--cloud)}
.mt-tile small{font-size:11px;color:var(--t4)}
.mt-tile small+b,.mt-tile b+small{margin-top:1px}
.mt-tile b{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.25}
.mt-tile b+small{margin-top:8px}
.mt-sm{font-size:13px}
.mt-prog{position:relative;display:block;height:6px;margin-top:6px;border-radius:4px;background:#e7e9f4}
.mt-prog i{position:absolute;left:0;top:0;bottom:0;width:100%;display:block;border-radius:4px;background:var(--blue)}
.mt-rate{display:block;margin-top:8px;padding:10px 12px;border-radius:6px;background:var(--cloud)}
.mt-rr{display:grid;grid-template-columns:1.35fr 1fr .9fr .8fr;gap:6px;font-size:11.5px;color:var(--ink)}
.mt-rh{margin-bottom:6px;font-size:11px;color:var(--t4)}
.mt-win2{color:var(--blue-d);font-weight:600}
.mt-note{left:28px;top:432px;width:340px}   /* laid over the Productivity chart, deliberately */
.mt-nh{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--sky);font-size:12px;color:var(--ink)}
.mt-nh span:first-child{display:flex;align-items:center;gap:7px}
.mt-nb{display:flex;align-items:center;gap:14px;padding:16px}
.mt-nb>span{display:flex;flex-direction:column;gap:10px;flex:1}
.mt-nb b{font-size:15px;font-weight:500;line-height:1.35;color:var(--ink)}
.mt-nb small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.mt-donut{flex:none;display:block;width:84px;height:84px;background:url(../assets/art/mt-donut.svg) no-repeat center/100% 100%}


/* ---- breakpoints: a floor for --s; the page script sets the exact fit ---- */
@media (max-width:991px){ .mt{--s:.64} }
@media (max-width:767px){ .mt{--s:.38} }
@media (max-width:479px){ .mt{--s:.25} }

/* the three target cards sit under the dashboard (product page) */
.mt-nums{margin-top:40px}
.mt-hero .mt{margin-top:0}
/* no backdrop of its own: the window and its glass frame sit on the page's blue fade */
.mt-stage{background:transparent}
.mt-bg{display:none}

/* the three target cards close the hero band: a shorter gap under them (2026-10-24, was the full 96px section padding) */
section.s.mt-hero{padding-bottom:56px}
@media (max-width:767px){ section.s.mt-hero{padding-bottom:40px} }

/* the three figures' label (2026-10-25): they are the bar every AI worker is held to, not results */
.mt-nums-h{margin:40px 0 14px;font-size:15px;font-weight:500;color:var(--navy)}
.mt-nums-h+.mt-nums{margin-top:0}

/* ---- PHONE (2026-10-25): the whole dashboard shrinks to about 30% on a phone (text about 4px), so phones show its
   key part: the AI usage card, where cost falls under the median, with the "finished 21% under the usual cost" note
   laid over the foot of its chart; the stage is cropped to a 360x370 window at x 646, y 228 (the stage ends at 600) and fitted to the column (about 0.95). The
   per-seat table and the Productivity card are left out there. */
@media (max-width:767px){
  .mt{width:calc(360px * var(--s));height:calc(370px * var(--s));overflow:hidden;border-radius:var(--r);
    border:1px solid rgba(255,255,255,.55);   /* the hero shot's frame on phones (2026-10-25): its corners and glass ring */
    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)}
  .mt-stage{left:calc(-646px * var(--s));top:calc(-228px * var(--s))}
  .mt-seat,.mt-sh3,.mt-seats{display:none !important}
  .mt-note{left:656px;top:438px}   /* over the foot of the chart, as on desktop it lies over the other chart */
}

/* ---- BIGGER, POPS INSIDE (2026-10-25, Wafi): the stage frames just the window (972x560 with room for its glass ring,
   was 1120x600 with empty space at both sides) and the page script fits it to the column, above 1x on wide screens, so
   the dashboard reads about 20% bigger; the two floating cards sit inside the window instead of over its edges. The
   phone crop keeps showing the same part of the window (offsets moved with the window, -64px and -40px). */
.mt{width:calc(972px * var(--s));height:calc(560px * var(--s))}
.mt-stage{width:972px;height:560px}
.mt-win{left:16px;top:16px}
.mt-seat{left:4px;top:352px}                   /* bottom left, edging 12px past the window's left side (2026-10-25) */
.mt-note{left:628px;top:70px}                  /* top right, edging 12px past the window's right side, above the AI usage figure */
@media (max-width:767px){
  .mt{width:calc(360px * var(--s));height:calc(370px * var(--s))}   /* phones keep their 360x370 crop */
  .mt-stage{left:calc(-582px * var(--s));top:calc(-188px * var(--s))}
  .mt-note{left:592px;top:398px}
}
/* the two pop windows slightly smaller (2026-10-25): scaled to 86%, each pinned at its corner (the bonus card bottom
   left, the notification top right); `scale` stacks with the keyframes' transform. Phones keep their own size. */
.mt-seat{scale:.86;transform-origin:0 100%}
.mt-note{scale:.86;transform-origin:100% 0}
@media (max-width:767px){ .mt-note{scale:1} }

/* ---- GLASS FRAME (2026-11-02, Wafi: as on the pricing dashboard): a frosted panel 14px round the window, a bright hairline
   edge, an inner highlight and a soft shadow under it; the window's own rings give way to one white hairline. Phones show a
   crop, framed by .mt itself, so the frame there is drawn on the crop in the same glass colours */
.mt-glass{position:absolute;left:2px;top:2px;width:968px;height:628px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 40px 80px -32px rgba(8,18,70,.5)}
.mt-win{box-shadow:0 0 0 1px rgba(255,255,255,.6)}
@media (max-width:767px){
  .mt-glass{display:none}
  .mt{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 0 8px rgba(255,255,255,.2),0 0 0 9px rgba(255,255,255,.5),0 24px 50px -24px rgba(8,18,70,.45)}
}

/* Product page refine (2026-11-06, Mode B, design-system/): the sections now follow the homepage's heading scale.
   One section heading size (the base h2: 44px, 32px on phones) instead of 34 for most and 44 for the teams section;
   the grey second line of each heading reads as the homepage's lead (19px body text, 17px on phones) under it; the
   heading sits a steady 56px above its content (40px on phones); alternate bands use the homepage's section grey;
   the four layers band and the teams band rise with the same rounded top as every other band here. Markup and copy
   are unchanged. */
.p-office .hb-h{max-width:none;font:500 clamp(30px,3.6vw,44px)/1.1 var(--display);letter-spacing:-.02em}
.p-office .hb-h .gy{max-width:40em;margin-top:14px;font:400 19px/1.55 var(--ui);letter-spacing:0;color:var(--mute)}
.p-office .hb-s .wrap:not(.hb-faq) > .hb-h + *{margin-top:56px}
.p-office .hb-faq .hb-h{max-width:12em}
.p-office .hb-grey{background:#f4f6f9}
.p-office #layers{position:relative;padding-bottom:calc(104px + var(--sec-r));background:#fff}   /* white, straight after the hero's white foot (2026-11-06, Wafi: the Industries ground) */
.p-office #desks{position:relative;isolation:isolate;margin-top:calc(-1 * var(--sec-r));border-radius:var(--sec-r) var(--sec-r) 0 0;box-shadow:0 -1px 0 var(--line);background:#f4f6f9}
/* Business functions on the section grey (2026-11-06, Wafi; dark blue the same day before it): the label, heading, line
   and tabs in their usual colours. The department window sits straight on the grey, with no pale band behind it and
   no fade at its foot, in a glass frame drawn for a light ground: a frosted white panel 14px out, a hairline edge, an
   inner highlight and a soft shadow. It ends inside the stage, so the frame closes at the foot. */
/* the department tabs: white pills on the grey (their usual fill is this grey), the picked one in its usual pale blue */
.p-office #desks .cl-tab{animation-name:cl-tab-gy;background:#fff;box-shadow:0 0 0 1px #e4ecf5 inset}
.p-office #desks .cl-tabs .cl-c0{background:#dbe8fb;box-shadow:0 0 0 1px #c5dbf6 inset}
@keyframes cl-tab-gy{ 0%,13.215%{background:#dbe8fb;color:#02254f;box-shadow:0 0 0 1px #c5dbf6 inset}
  14.286%,98.929%{background:#fff;color:#5a697f;box-shadow:0 0 0 1px #e4ecf5 inset}
  100%{background:#dbe8fb;color:#02254f;box-shadow:0 0 0 1px #c5dbf6 inset} }
.p-office #desks .cl[class*="cl-p"] .cl-tabs .cl-tab{background:#fff;box-shadow:0 0 0 1px #e4ecf5 inset}
.p-office #desks .cl.cl-p0 .cl-tabs .cl-tab.cl-c0, .p-office #desks .cl.cl-p1 .cl-tabs .cl-tab.cl-c1, .p-office #desks .cl.cl-p2 .cl-tabs .cl-tab.cl-c2, .p-office #desks .cl.cl-p3 .cl-tabs .cl-tab.cl-c3, .p-office #desks .cl.cl-p4 .cl-tabs .cl-tab.cl-c4, .p-office #desks .cl.cl-p5 .cl-tabs .cl-tab.cl-c5, .p-office #desks .cl.cl-p6 .cl-tabs .cl-tab.cl-c6{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.p-office #desks .cl-mt{background:#fff;box-shadow:0 0 0 1px #e4ecf5 inset}
.p-office #desks .cl-mt.on{background:#dbe8fb;box-shadow:0 0 0 1px #c5dbf6 inset}
.p-office #desks .cl-bands{display:none !important}
.p-office #desks .cl-stage{-webkit-mask-image:none;mask-image:none}
.p-office #desks .cl-win{height:368px;overflow:hidden;box-shadow:0 0 0 calc(1px / var(--s)) var(--line)}
.p-office #desks .cl-stage::before{content:"";position:absolute;left:56px;right:56px;top:224px;height:396px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.55));border:1px solid #dfe6f0;
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:inset 0 1px 0 #fff,0 40px 80px -36px rgba(2,37,79,.28)}
/* the department window's shadow is no longer cut off (2026-11-06): the stage clipped the glass frame's soft shadow in a
   hard line under it */
.p-office #desks .cl-stage{overflow:visible;contain:layout}
/* the department story, fuller (2026-11-06, Wafi: "improve the animation"). Each desk has 5s of the 35s loop; the card
   delays (.cl .cl-cN *, motion.css) carry these too. The lead's bar under its name fills a third as each step is ticked
   off; a pale blue highlight runs down the table one row at a time while the lead works, and each row's status pops in
   as the highlight leaves it, so the result pill arrives with the table filled. Motion off: the finished frame. */
.p-office #desks .cl-ph small .cl-q{background:linear-gradient(#4169e1,#4169e1) 0 0/100% 100% no-repeat,#e3e9f3;animation-name:cl-lbar;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}   /* longhands, so the card's delay (motion.css) still applies */
@keyframes cl-lbar{0%,5.4%{background-size:0% 100%,auto} 6.2%,7.5%{background-size:33.4% 100%,auto} 8.3%,10.7%{background-size:66.7% 100%,auto} 11.5%,100%{background-size:100% 100%,auto}}
.p-office #desks .cl-tr .cl-tag{transform-origin:0 50%}
@keyframes cl-rw1{0%,4.50%{background:transparent} 4.70%,5.40%{background:#f2f6fe} 5.60%,100%{background:transparent}}
@keyframes cl-tg1{0%,5.30%{opacity:0;transform:scale(.8)} 5.90%,100%{opacity:1;transform:none}}
.p-office #desks .cl-table .cl-tr:nth-child(2){animation-name:cl-rw1;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}
.p-office #desks .cl-table .cl-tr:nth-child(2) .cl-tag{animation-name:cl-tg1;animation-duration:35s;animation-timing-function:cubic-bezier(.2,.8,.2,1.3);animation-fill-mode:both;animation-iteration-count:infinite}
@keyframes cl-rw2{0%,5.60%{background:transparent} 5.80%,6.50%{background:#f2f6fe} 6.70%,100%{background:transparent}}
@keyframes cl-tg2{0%,6.40%{opacity:0;transform:scale(.8)} 7.00%,100%{opacity:1;transform:none}}
.p-office #desks .cl-table .cl-tr:nth-child(3){animation-name:cl-rw2;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}
.p-office #desks .cl-table .cl-tr:nth-child(3) .cl-tag{animation-name:cl-tg2;animation-duration:35s;animation-timing-function:cubic-bezier(.2,.8,.2,1.3);animation-fill-mode:both;animation-iteration-count:infinite}
@keyframes cl-rw3{0%,6.70%{background:transparent} 6.90%,7.60%{background:#f2f6fe} 7.80%,100%{background:transparent}}
@keyframes cl-tg3{0%,7.50%{opacity:0;transform:scale(.8)} 8.10%,100%{opacity:1;transform:none}}
.p-office #desks .cl-table .cl-tr:nth-child(4){animation-name:cl-rw3;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}
.p-office #desks .cl-table .cl-tr:nth-child(4) .cl-tag{animation-name:cl-tg3;animation-duration:35s;animation-timing-function:cubic-bezier(.2,.8,.2,1.3);animation-fill-mode:both;animation-iteration-count:infinite}
@keyframes cl-rw4{0%,7.80%{background:transparent} 8.00%,8.70%{background:#f2f6fe} 8.90%,100%{background:transparent}}
@keyframes cl-tg4{0%,8.60%{opacity:0;transform:scale(.8)} 9.20%,100%{opacity:1;transform:none}}
.p-office #desks .cl-table .cl-tr:nth-child(5){animation-name:cl-rw4;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}
.p-office #desks .cl-table .cl-tr:nth-child(5) .cl-tag{animation-name:cl-tg4;animation-duration:35s;animation-timing-function:cubic-bezier(.2,.8,.2,1.3);animation-fill-mode:both;animation-iteration-count:infinite}
@keyframes cl-rw5{0%,8.90%{background:transparent} 9.10%,9.80%{background:#f2f6fe} 10.00%,100%{background:transparent}}
@keyframes cl-tg5{0%,9.70%{opacity:0;transform:scale(.8)} 10.30%,100%{opacity:1;transform:none}}
.p-office #desks .cl-table .cl-tr:nth-child(6){animation-name:cl-rw5;animation-duration:35s;animation-timing-function:ease;animation-fill-mode:both;animation-iteration-count:infinite}
.p-office #desks .cl-table .cl-tr:nth-child(6) .cl-tag{animation-name:cl-tg5;animation-duration:35s;animation-timing-function:cubic-bezier(.2,.8,.2,1.3);animation-fill-mode:both;animation-iteration-count:infinite}
@media (prefers-reduced-motion:reduce){ .p-office #desks .cl-stage *{animation:none !important} }
/* sections stack in page order (no z-index of their own), so each one's rounded top shows over the band above it:
   Business functions had z-index 1 and hid Explore what is built in's corners (2026-11-06) */
@media (max-width:991px){
  .p-office #layers{padding-bottom:calc(80px + var(--sec-r))}
}
@media (max-width:767px){
  .p-office .hb-h{font-size:32px}
  .p-office .hb-h .gy{margin-top:12px;font-size:17px}
  .p-office .hb-s .wrap:not(.hb-faq) > .hb-h + *{margin-top:40px}
  .p-office #layers{padding-bottom:calc(64px + var(--sec-r))}
}

/* Product hero (2026-11-06, Wafi): the label "The Office" over the headline at the home page's hero size (72px), the lead
   and buttons level with the headline's foot. The ground is the home hero's (hero.css NO FILM): the same deep royal
   gradient and fading dot grid, under the copy and the whole app window. Later the same day (Wafi) the ground became
   the Industries hero's: royal blue fading to white at the foot, so Four layers simply follows it (no rising edge).
   The three numbers under the window are gone. */
.p-office .bt-fade{position:relative;isolation:isolate;
  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 22%,#2946b6 40%,#4a68d2 58%,#89a3ec 74%,#dfe6fb 90%,#fff 100%)}   /* the Industries hero's ground (industries.css .hb-hero), 2026-11-06, Wafi */
.p-office .bt-fade::before{content:none}   /* no dot grid on the hero (2026-11-06, Wafi) */
.p-office section.s.mt-hero{padding-bottom:88px}
@media (max-width:767px){ .p-office section.s.mt-hero{padding-bottom:48px} }
.p-office .bt-fade .hh{align-items:center}   /* the headline sits level with the middle of the lead and buttons (2026-11-06, Wafi) */
.p-office .bt-fade .hh-main{position:relative;display:flex;flex-direction:column;gap:18px;min-width:0}
@media (min-width:992px){ .p-office .bt-fade .hh-main .eyebrow{position:absolute;left:0;bottom:calc(100% + 18px)} }   /* the label rides above, so the headline alone is centred */
.p-office .bt-fade .hh-main .eyebrow{align-self:flex-start;background:none;color:rgba(255,255,255,.78)}   /* the plain label, without the old chip fill pages.css gives a hero eyebrow */
.p-office .bt-fade .hh h1{max-width:11em;white-space:normal;font-size:clamp(56px,5vw,72px);line-height:1.04}
@media (max-width:991px){ .p-office .bt-fade .hh{align-items:start} }
@media (max-width:767px){ .p-office .bt-fade .hh h1{font-size:44px} .p-office .bt-fade .hh-main{gap:14px} }

/* ---- THE OVERVIEW, REBUILT (2026-11-06, Wafi: "animate using this dashboard"): the window's main area follows the
   Office Overview screenshot: AI health since Sep 7 (Productivity with its curve, a soft fill and the failures line; AI
   usage with two lines), Needs you with one decision, and the workforce. The two floating cards of the earlier cost
   story are gone. Story, 14s, keyframes below (the draw, the before and after figures and the late pills reuse the
   HEALTH keyframes in motion.css): figures and charts 0-26%; the Sales Lead runs; at 58% it finishes, its report
   slides into Needs you on top, the decision and the workforce move down one row (the window crops them, as the app
   scrolls) and the counts tick: Needs you 1 to 2, Tasks 3 to 2, Outputs 4 to 5; all of it resets at the loop's end. */
.mt-v2 .mt-hi{top:92px}
.mt-v2 .mt-sh2{top:150px}
.mt-v2 .mt-card{top:174px;height:170px;padding:14px 16px 10px}
.mt-v2 .mt-kpi{gap:7px}
.mt-v2 .mt-kpi small,.mt-v2 .mt-kpi strong{white-space:nowrap}
.mt-v2 .mt-pill{white-space:nowrap;padding:3px 8px;font-size:10.5px}
.mt-v2 .mt-sub{flex:none;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-v2 .mt-chart{margin-top:10px}
.mt-v2 .mt-plot{display:block;width:100%;height:100%;overflow:visible;background:none}
.mt-v2 .mt-gl{fill:none;stroke:#e4ecf5;stroke-width:1;vector-effect:non-scaling-stroke}
.mt-v2 .mt-fl{fill:rgba(65,105,225,.09);stroke:none}
.mt-v2 .mt-ln{fill:none;stroke:#6f95e6;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mt-v2 .mt-lr{stroke:#ec6a5e;stroke-width:1.4}
.mt-v2 .mt-lg{stroke:#1fb37a}
.mt-v2 .mt-sh4{top:362px}
.mt-v2 .mt-list{left:212px;right:24px;top:386px;height:82px}
.mt-row{position:absolute;left:0;right:0;top:0;height:38px;display:flex;align-items:center;gap:10px;padding:0 14px;
  border:1px solid #e4ecf5;border-radius:8px;background:#fff;font-size:12.5px;color:var(--ink)}
.mt-row>span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mt-row small{font-size:11.5px;color:#5a697f}
.mt-row em{font-style:normal;font-size:12px;font-weight:500;color:var(--blue)}
.mt-rd{flex:none;width:10px;height:10px;border-radius:50%;border:2px solid #ff5f1f}   /* the Office's attention colour */
.mt-rd.mt-rb{border-color:var(--blue)}
.mt-new{opacity:0}
.mt-v2 .mt-sh3{top:444px}
.mt-v2 .mt-seats{top:468px}
.mt-swap{display:inline-grid}
.mt-swap>span{grid-area:1/1}
.mt-swap .mt-n2{opacity:0}
.mt.go .mt-swap .mt-n1{animation:mt-n1 14s ease infinite both}
.mt.go .mt-swap .mt-n2{animation:mt-n2 14s cubic-bezier(.2,.8,.2,1) infinite both}
.mt.go .mt-red.mt-swap{animation:mt-ping 14s ease-out infinite both;border-radius:999px}
.mt.go .mt-new{animation:mt-new 14s cubic-bezier(.2,.8,.2,1) infinite both}
.mt.go .mt-old,.mt.go .mt-push{animation:mt-push 14s cubic-bezier(.65,0,.35,1) infinite both}
.mt-v2.go .mt-run::after{animation:mt-runoff 14s ease infinite both}
@keyframes mt-n1{0%,57%{opacity:1} 59%,93%{opacity:0} 96%,100%{opacity:1}}
@keyframes mt-n2{0%,57%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.25)} 63%,92%{opacity:1;transform:none} 95%,100%{opacity:0}}
@keyframes mt-ping{0%,58%{box-shadow:0 0 0 0 rgba(229,72,77,0)} 59%{box-shadow:0 0 0 0 rgba(229,72,77,.45)} 66%,100%{box-shadow:0 0 0 8px rgba(229,72,77,0)}}
@keyframes mt-new{0%,58%{opacity:0;transform:translateY(-8px)} 62%,92%{opacity:1;transform:none} 95%,100%{opacity:0;transform:none}}
@keyframes mt-push{0%,57%{transform:none} 61%,92%{transform:translateY(44px)} 97%,100%{transform:none}}
@keyframes mt-runoff{0%,56%{opacity:1} 58%,94%{opacity:0} 97%,100%{opacity:1}}
/* ---- the story, tightened (2026-11-06, Wafi: "improve the dashboard animation"): the figures count up while the
   charts draw (page script), a live dot lands on each chart's last point, a progress bar fills under the running Sales
   Lead through the quiet middle (30% to 56%), and its report lands in Needs you with a pale blue flash that fades */
.mt-v2 .mt-chart{position:relative}
.mt-num{font-variant-numeric:tabular-nums}
.mt-tip{position:absolute;right:-4px;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:#4169e1;border:2px solid #fff;box-shadow:0 0 0 0 rgba(65,105,225,.45)}
.mt.go .mt-tip{animation:mt-tipin 14s ease infinite both,mt-dot 2s ease-out infinite}
@keyframes mt-tipin{0%,25%{opacity:0;transform:scale(.4)} 28%,92%{opacity:1;transform:none} 95%,100%{opacity:0}}
.mt-v2 .mt-sc{position:relative;overflow:hidden}
.mt-v2 .mt-sc>i.mt-bar2{position:absolute;left:0;right:0;bottom:0;width:auto;height:3px;border-radius:0;background:#e7ecf6;opacity:0}   /* not the avatar's 28px circle (.mt-sc>i) */
.mt-bar2::after{content:"";position:absolute;inset:0;background:#4169e1;transform-origin:0 50%;transform:scaleX(0)}
.mt.go .mt-bar2{animation:mt-barwrap 14s ease infinite both}
.mt.go .mt-bar2::after{animation:mt-barfill 14s cubic-bezier(.4,0,.2,1) infinite both}
@keyframes mt-barwrap{0%,28%{opacity:0} 30%,56%{opacity:1} 59%,100%{opacity:0}}
@keyframes mt-barfill{0%,30%{transform:scaleX(0)} 56%,100%{transform:scaleX(1)}}
.mt.go .mt-new{animation:mt-new 14s cubic-bezier(.2,.8,.2,1) infinite both,mt-flash 14s ease infinite both}
@keyframes mt-flash{0%,60%{background:#e6edfc;border-color:#c9d6f7} 80%,100%{background:#fff;border-color:#e4ecf5}}
/* the window's shadow is no longer cut off: the stage clipped the glass frame's soft shadow in a hard line under it */
.mt-v2 .mt-stage{overflow:visible;contain:layout}
@media (prefers-reduced-motion:reduce){ .mt.go .mt-tip,.mt.go .mt-bar2,.mt.go .mt-bar2::after,.mt.go .mt-swap .mt-n1,.mt.go .mt-swap .mt-n2,.mt.go .mt-red.mt-swap,.mt.go .mt-new,.mt.go .mt-old,.mt.go .mt-push,.mt-v2.go .mt-run::after{animation:none} }
/* phones: the crop shows the greeting, AI health's Productivity card and Needs you, so the story reads there too */
@media (max-width:767px){ .mt.mt-v2 .mt-stage{left:calc(-216px * var(--s));top:calc(-96px * var(--s))} }
/* on the blue the whole window shows (2026-11-06): it ends inside the stage, so its glass frame closes with rounded
   corners at the foot instead of being cut by the stage's edge */
.mt-v2 .mt-win{height:528px}
.mt-v2 .mt-glass{height:556px}
/* the window's shadow on the Industries ground (2026-11-06): the hero now fades to white, so the deep shadow drawn for
   the blue read as a grey smudge under the window and was cut in a hard line at the hero's foot. A smaller, lighter
   shadow that ends well inside the space below */
.mt-v2 .mt-glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 28px 56px -30px rgba(2,37,79,.28)}
@media (max-width:767px){ .p-office .mt.mt-v2{box-shadow:0 0 0 1px rgba(255,255,255,.6),0 0 0 8px rgba(255,255,255,.2),0 0 0 9px rgba(255,255,255,.5),0 16px 32px -20px rgba(2,37,79,.25)} }
/* phones and tablets (2026-11-06 mobile pass): the "Works in the tools you already use" link in Better every week was a
   20px tall tap target; padding grows its hit area to 44px without moving the row */
.p-office .stk-row .stk-link{display:inline-block;padding:12px 0;margin:-12px 0}
/* ---- Four layers on phones (2026-11-06, Wafi: "function like Business functions and cascade up"): not a sideways swipe
   row any more but a deck that builds as you scroll. Each card sticks under the nav as it arrives and the next slides up
   over it, so a 10px edge of every earlier card shows; the card being covered shrinks and dims a little (--k, set by
   the page script), as in the Business functions deck. Industries keeps its swipe row (these rules are .p-office only) */
@media (max-width:767px){
  .p-office #layers .iz-stack{flex-direction:column;gap:16px;margin:32px 0 0;padding:0;overflow:visible;scroll-snap-type:none}
  .p-office #layers .iz-slide{flex:none;position:sticky;top:calc(72px + var(--i, 0) * 10px);transform-origin:50% 0;
    transform:scale(calc(1 - var(--k, 0) * .05));filter:brightness(calc(1 - var(--k, 0) * .04));
    box-shadow:0 -10px 26px -18px rgba(2,37,79,.35),0 0 0 1px rgba(2,37,79,.04)}
  .p-office #layers .iz-s2{--i:1}
  .p-office #layers .iz-s3{--i:2}
  .p-office #layers .iz-s4{--i:3}
  .p-office #layers .aw-fig.aw-flag{width:min(120px,100%)}   /* the AI workers card was over 800px tall; a smaller figure and panel keep it near the other cards' height */
  .p-office #layers .iz-box.aw-box{padding:20px 16px}
}
/* Business functions on phones: back to the swipe row with tabs (2026-11-06, Wafi: "how it used to originally", the
   24 Sep version). The vertical deck and the slide-in deck (rotate.css, still the home page's rules) are switched off
   here: no spacer, no pinned rail, no stacking or sliding; the tab row shows and the cards sit side by side in a row
   that snaps one card at a time, the next one peeking in */
@media (max-width:767px){
  .p-office #desks .cl-m::after{content:none;display:none}
  .p-office #desks .cl-m .cl-mtabs{display:flex}
  .p-office #desks .cl-m .cl-mrail{display:flex;position:static;top:auto;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}
  .p-office #desks .cl-m .cl-mrail::-webkit-scrollbar{display:none}
  .p-office #desks .cl-m .cl-mc{grid-area:auto;position:static;top:auto;flex:0 0 86%;width:auto;margin:0;scroll-snap-align:center;
    transform:none;filter:none;box-shadow:none}
}
@media (max-width:479px){
  .p-office #desks .cl-m .cl-mrail{margin:16px -16px 0;padding:0 16px 8px;scroll-padding:0 16px}
  .p-office #desks .cl-m .cl-mc{flex-basis:88%}
}
/* Business functions on phones, in the desktop look (2026-11-06, Wafi): each card is the desktop window's light glass frame
   (frosted white panel, hairline edge, soft shadow; no tint or dots); the lead's card and the result pill take the
   desktop popover's and pill's hairline and shadow; each step shows the desktop's spinner, which turns into a green
   tick as the bar passes it (no JS or motion off: all ticked). The rail gets room below so the shadows are not cut */
@media (max-width:767px){
  .p-office #desks .cl-m .cl-mrail{padding-bottom:30px;margin-bottom:-14px}
  .p-office #desks .cl-m .cl-mc{gap:14px;padding:18px 14px 16px;border-radius:22px;border:1px solid #dfe6f0;
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.6));
    box-shadow:inset 0 1px 0 #fff,0 22px 44px -30px rgba(2,37,79,.3)}
  .p-office #desks .cl-mpop{box-shadow:0 18px 36px -22px rgba(2,37,79,.35),0 0 0 1px #e3eaf4}
  .p-office #desks .cl-mpill{box-shadow:0 12px 26px -16px rgba(2,37,79,.35),0 0 0 1px #e3eaf4}
  .p-office #desks .cl-ms::after{content:"";flex:none;margin-left:auto;width:18px;height:18px;border-radius:50%;
    background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
  .p-office #desks .cl-mc.cl-run .cl-ms:not(.cl-mtick)::after{box-sizing:border-box;width:16px;height:16px;margin-right:1px;background:none;
    border:2px solid #cfd9e6;border-top-color:var(--blue);animation:cl-rot .9s linear infinite}
  .p-office #desks .cl-mc.cl-run .cl-ms.cl-mtick::after{animation:cl-mpop .35s cubic-bezier(.2,.8,.2,1.4) both}
}
@keyframes cl-mpop{0%{transform:scale(.5);opacity:0} 100%{transform:none;opacity:1}}

/* 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 (2026-10-24): one canvas, the home page's pillar stack in app cards (script ONE SYSTEM STACK) ---- */
.stk-art{display:none;position:relative;width:100%;max-width:540px;aspect-ratio:540/460;margin:0 auto}   /* wider plates (2026-10-25): the box fills the column and the plates pack a little closer; 460 tall (was 580; plates about 7% smaller since, at Wafi's request) so the empty band above and below the stack goes, with room left for the lift */
.js .stk-art{display:block}
.stk-cv{display:block;width:100%;height:100%}

/* ---- 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 script moves .on down the list and to the row under the pointer */
.stk-row{transition:background-color .25s,box-shadow .25s,color .25s;cursor:default}
.stk-row.on{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:400px}
}
@media (max-width:479px){
  .stk-row{padding:12px 12px;font-size:14px}
  .stk-row small{font-size:12.5px}
}

/* product page (2026-10-24): the section follows Under the hood, both white, so a hairline separates them */
.stk-sec.stk-after{border-top:1px solid var(--line)}

/* the tools row (2026-10-25): the two tools rows merged into the base row, which links to Connections on the home page */
.stk-row .stk-link{color:inherit;text-decoration:none}
.stk-row .stk-link::after{content:" \2192";color:var(--btn)}
.stk-row .stk-link:hover{color:var(--btn)}
/* bigger plates (2026-10-25): the box runs 100px taller and the plates take more of it (S .265 of the height, was .276 of 460) */
.stk-art{aspect-ratio:540/520}   /* plates about 9% smaller again (2026-10-25, Wafi): S .26 of a 520 box, was .265 of 560 */
@media (max-width:991px){ .stk-art{max-width:460px} }

/* 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}
.cl.cl-p5 .cl-stage .cl-d,.cl.cl-p5 .cl-stage .cl-card,.cl.cl-p5 .cl-stage .cl-band{opacity:0}
.cl.cl-p5 .cl-stage .cl-d.cl-c5,.cl.cl-p5 .cl-stage .cl-card.cl-c5,.cl.cl-p5 .cl-stage .cl-band.cl-c5{opacity:1}
.cl.cl-p5 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p5 .cl-tabs .cl-tab.cl-c5{background:#dbe8fb;color:var(--navy);box-shadow:0 0 0 1px #c5dbf6 inset}
.cl.cl-p6 .cl-stage .cl-d,.cl.cl-p6 .cl-stage .cl-card,.cl.cl-p6 .cl-stage .cl-band{opacity:0}
.cl.cl-p6 .cl-stage .cl-d.cl-c6,.cl.cl-p6 .cl-stage .cl-card.cl-c6,.cl.cl-p6 .cl-stage .cl-band.cl-c6{opacity:1}
.cl.cl-p6 .cl-tabs .cl-tab{background:#f3f5f8;color:var(--t4);box-shadow:none}
.cl.cl-p6 .cl-tabs .cl-tab.cl-c6{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: Commerce pale steel, Revenue royal,
   Marketing periwinkle, Operations sky, Finance steel, Executive Office the original tint, People lavender */
.cl-band.cl-c0,.cl-mc0{background-color:#dde9f7}
.cl-band.cl-c1,.cl-mc1{background-color:#dae5fb}
.cl-band.cl-c2,.cl-mc2{background-color:#e5e8fc}
.cl-band.cl-c3,.cl-mc3{background-color:#d9ecf9}
.cl-band.cl-c4,.cl-mc4{background-color:#e0e9f4}
.cl-band.cl-c5,.cl-mc5{background-color:#e4ecfb}
.cl-band.cl-c6,.cl-mc6{background-color:#e3e6fb}

/* ---- 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{box-sizing:border-box;border:2px solid var(--green);border-radius:50%;background:transparent;box-shadow:inset 0 0 0 9px var(--green)}   /* a ring filled by its inset shadow, so the tick can fill it in (motion.css); finished by default */
.cl-ok::after{content:"";position:absolute;left:6px;top:3px;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-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%}
}
/* ---- phones: a deck built by scrolling (2026-11-02, Wafi, after salesforce.com's stacked cards). The seven cards
   follow each other down the page; each one sticks under the nav as it arrives and the next slides up over it, so the
   deck builds from the bottom with a 10px edge of every earlier card showing. The tab row goes (each card names its
   department). The script in index.html shrinks and dims a card a little as the next one covers it; without it the
   deck still builds. overflow:clip, not hidden, on the section: hidden makes it a scroll box and sticky stops working */
@media (max-width:767px){
  section.cl-sec{overflow:clip}
  .cl-m .cl-mtabs{display:none}
  .cl-m .cl-mrail{display:block;overflow:visible;margin:0;padding:0;scroll-snap-type:none}
  .cl-m .cl-mc{position:sticky;top:calc(72px + var(--i, 0) * 10px);margin:0 0 16px;transform-origin:50% 0;
    box-shadow:0 -10px 26px -18px rgba(2,37,79,.35),0 0 0 1px rgba(2,37,79,.04);
    transform:scale(calc(1 - var(--k, 0) * .05));filter:brightness(calc(1 - var(--k, 0) * .04))}
  .cl-m .cl-mc:last-child{margin-bottom:0}
  .cl-mc1{--i:1}.cl-mc2{--i:2}.cl-mc3{--i:3}.cl-mc4{--i:4}.cl-mc5{--i:5}.cl-mc6{--i:6}
  /* the work plays as a card lands (2026-11-02, Wafi): the script adds .cl-run to every card up front (not with reduced
     motion), so the steps wait and the result is hidden; when a card comes up the screen its steps are done one by one
     (.cl-mtick, which fills the progress bar below) and then the result pops in (.cl-mfin). Each card plays once */
  .cl-mc.cl-run .cl-mpill{opacity:0;transform:translateY(6px)}
  .cl-mc.cl-run.cl-mfin .cl-mpill{opacity:1;transform:none;transition:opacity .35s ease,transform .35s cubic-bezier(.2,.75,.2,1)}
}
/* ---- phones: the deck slides in from the right (2026-11-02, Wafi). With JS the rail pins under the nav while a spacer
   (::after, 6 x 62svh plus a 45svh hold) scrolls past, and each card after the first slides in from the right over the one before (--x, 1
   off screen to 0 in place, set by the script in index.html). Cards share one grid cell; each rests 6px right of the one
   before, so a thin edge of every earlier card shows on the left, like the 10px top edges of the vertical deck it
   replaces (still the no-JS layout above). A covered card shrinks and dims a little (--k) */
@media (max-width:767px){
  .js .cl-m::after{content:"";display:block;height:calc(6 * 62svh + 45svh)}   /* 45svh of hold after the last card lands, so People plays before the deck moves on */
  .js .cl-m .cl-mrail{display:grid;position:sticky;top:max(80px, calc(50svh - var(--rh, 440px) / 2 + 28px))}
  .js .cl-m .cl-mc{grid-area:1/1;position:relative;top:auto;align-self:stretch;width:calc(100% - 36px);margin:0;transform-origin:0 50%;
    transform:translateX(calc(var(--i, 0) * 6px + var(--x, 0) * (100% + 60px))) scale(calc(1 - var(--k, 0) * .04));
    box-shadow:-10px 0 26px -16px rgba(2,37,79,.35),0 0 0 1px rgba(2,37,79,.04)}
  .js .cl-m .cl-mc:not(.cl-mc0){--x:1}
}

/* quiet bars (2026-10-24): the department windows keep their titles, the agent's name and the outcome as words;
   table cells, column heads, schedules, steps and the window chrome are pale bars */
.cl-q{display:inline-block;vertical-align:middle;width:var(--w);max-width:100%;height:7px;border-radius:4px;background:#dde4ef}
.cl-th .cl-q{height:6px;background:#edf1f7}
.cl-side em.on .cl-q{background:#b9cdf2}
.cl-step .cl-q,.cl-ms .cl-q{flex:0 1 auto}
/* the status column keeps its meaning as a coloured tag: green done, blue in progress, amber waiting on you */
.cl-tag{display:inline-block;vertical-align:middle;width:46px;height:16px;border-radius:5px}
.cl-tag-g{background:#dcf1e5;box-shadow:inset 0 0 0 1px #c3e6d2}.cl-tag-b{background:#e3ecfa;box-shadow:inset 0 0 0 1px #cbdaf5}.cl-tag-a{background:#fbefd6;box-shadow:inset 0 0 0 1px #f2dcaa}

/* ---- FULLER WINDOW (2026-10-25): words where the story is, a real sidebar, a fading crop -------------------------
   Status tags, column heads, the agent's three steps and the count chip carry words; table cells and schedule lines
   stay quiet bars (home page mock-up rule 3). The sidebar is the app's own nav with its icons. The stage stops
   just under the table and fades out (rule 5), so no empty half-window shows. */
.cl-tag{width:auto;height:20px;padding:0 8px;font:500 11.5px/20px var(--ui);font-style:normal;white-space:nowrap}
.cl-tag-g{color:#197555}.cl-tag-b{color:#2946b6}.cl-tag-a{color:#9a5b06}
.cl-sn{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-ms .cl-sn{flex:1 1 auto}
.cl-side{gap:2px;padding:14px 12px}
.cl-side em{display:flex;align-items:center;gap:10px;padding:7px 10px}
.cl-side em i{flex:none;width:15px;height:15px;background:#45546a;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.cl-side em.on i{background:var(--navy)}
.cl-side em u{margin-left:auto;text-decoration:none;font-size:12px;font-weight:500;color:#c43d3d}
.cl-side small{margin:12px 0 4px 10px;font-size:11.5px;color:var(--t4)}
.cl-wh2 b{font-weight:500}
.cl-crumb{margin-left:-2px}
/* the crop: 700 to 630, the last 70px fading to the page */
.cl{height:calc(630px * var(--s))}
.cl-stage{height:630px;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 70px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 70px),transparent)}

/* ---- phones: one progress bar in place of the three green checks (2026-11-02, Wafi) -------------------------------
   The bar sits under the worker's name, where the quiet bar was. It rests full; with the play script (.cl-run) it starts
   empty and fills in one smooth run (--p, set by the script), and a step's words darken as it is done */
.cl-mbar{display:block;width:min(150px,100%);height:6px;margin-top:5px;border-radius:3px;background:#e3e9f3;overflow:hidden}
.cl-mbar i{display:block;width:100%;height:100%;border-radius:3px;background:#4169e1;transform-origin:0 50%}
@media (max-width:767px){
  .cl-mc.cl-run .cl-mbar i{transform:scaleX(var(--p, 0))}
  .cl-mc.cl-run[data-played] .cl-mbar i{transition:transform 1.6s cubic-bezier(.45,.05,.4,1)}   /* one smooth fill once the card plays (the script sets --p to 1); no transition before, so the bar never drains on load */
  .cl-mc.cl-run .cl-ms{color:var(--t4);transition:color .3s ease}
  .cl-mc.cl-run .cl-ms.cl-mtick{color:var(--ink)}
}

/* css/motion.css */
/* ============================================================================
   MOTION — the site's shared keyframes.

   Keyframes may live in any stylesheet; this file collects the ones several
   pages share. There is no platform limit on motion (the site is hosted on AWS
   from GitHub).

   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: the learning loop and the tour, HERO TOUR below. */
@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-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) .15s both}
.js .hs-m2{animation-delay:.4s}
.js .hs-live{animation:hs-live 1.8s ease-out infinite}
.js .hsm-m2{animation-delay:.4s}

/* ---- HERO TOUR (home page): one 10.5s loop from page load ------------------------------
   One Inbox item: click Edit (2.6s), saved as a rule, the figures improve and the toast
   appears together (4.6s). Routines cross-fades in 1.2s after the toast appears, rising 8px and taking
   the toast with it (6.5s). The Overview resets under Routines (11.1s), then Routines fades away
   (11.7-12.5s) onto the resting frame. (The Agents org chart page was removed 2026-10-16, the Chat page
   2026-10-31: the loop went from 17.5s to 12.5s, every beat after Chat 5s sooner.) */
@keyframes x2-a     { 0%,20.8%{opacity:1;transform:none} 24%,88.8%{opacity:0;transform:translateY(6px)} 89.601%,100%{opacity:1;transform:none} }
@keyframes x2-rule  { 0%,22.401%{opacity:0;transform:translateY(6px)} 25.6%,88.8%{opacity:1;transform:none} 89.601%,100%{opacity:0;transform:translateY(6px)} }
@keyframes x2-q2    { 0%,22.401%{opacity:1} 24%,88.8%{opacity:0} 89.601%,100%{opacity:1} }
@keyframes x2-q1    { 0%,22.401%{opacity:0} 24%,88.8%{opacity:1} 89.601%,100%{opacity:0} }
@keyframes x2-old   { 0%,36.8%{opacity:1} 39.199%,88.8%{opacity:0} 89.601%,100%{opacity:1} }
@keyframes x2-new   { 0%,36.8%{opacity:0;transform:translateY(5px)} 39.199%,88.8%{opacity:1;transform:none} 89.601%,100%{opacity:0;transform:translateY(5px)} }
@keyframes x2-toast { 0%,36.8%{opacity:0;transform:translateY(10px)} 39.199%,51.999%{opacity:1;transform:none} 56.799%,100%{opacity:0;transform:translateY(-4px)} }
@keyframes x2-cur   { 0%,6.399%{opacity:0;transform:translate(150px,130px)} 11.2%{opacity:1;transform:translate(130px,112px)} 17.601%{opacity:1;transform:none} 20.8%{transform:scale(.82)} 22.401%{opacity:1;transform:none} 27.199%,100%{opacity:0;transform:translate(24px,40px)} }
@keyframes x2-tap   { 0%,17.601%{opacity:0;transform:scale(.4)} 20.8%{opacity:1;transform:scale(.8)} 27.199%,100%{opacity:0;transform:scale(1.6)} }
@keyframes x2-p2    { 0%,52.001%{opacity:0;visibility:hidden;transform:translateY(8px)} 56.799%,93.601%{opacity:1;visibility:visible;transform:none} 100%{opacity:0;visibility:visible;transform:none} }
@keyframes x2-k0    { 0%,51.999%{opacity:1} 56.799%,93.601%{opacity:0} 100%{opacity:1} }
@keyframes x2-k2    { 0%,52.001%{opacity:0} 56.799%,93.601%{opacity:1} 100%{opacity:0} }
@keyframes x2-hl    { 0%,51.999%{transform:none} 56.799%,93.601%{transform:translateY(223.2px)} 100%{transform:none} }   /* Overview, then Routines (Chat taken out 2026-10-31) */
@keyframes x2-s0    { 0%,60.8%{opacity:1} 62.4%,100%{opacity:0} }
@keyframes x2-s1    { 0%,60.8%{opacity:0} 62.4%,74.4%{opacity:1} 76%,100%{opacity:0} }
@keyframes x2-s2    { 0%,74.4%{opacity:0} 76%,100%{opacity:1} }
@keyframes x2-bar   { 0%,60.001%{transform:scaleX(0)} 74.4%,100%{transform:scaleX(1)} }
@keyframes x2-t1    { 0%,64.8%{border-color:#c9d4f5;background:transparent} 66.4%,100%{border-color:#197555;background:#197555} }
@keyframes x2-t2    { 0%,69.599%{border-color:#c9d4f5;background:transparent} 71.201%,100%{border-color:#197555;background:#197555} }
@keyframes x2-t3    { 0%,74.4%{border-color:#c9d4f5;background:transparent} 76%,100%{border-color:#197555;background:#197555} }
@keyframes x2-res   { 0%,76%{opacity:0} 77.6%,100%{opacity:1} }
/* the hero loop starts 1.5s in (2026-10-24; 1.26s since the 10.5s loop), so the cursor is already moving when the page opens */
.js .hx2 .hx-a{animation:x2-a 10.5s ease -1.26s infinite both}
.js .hx2 .hx-rule{animation:x2-rule 10.5s ease -1.26s infinite both}
.js .hx2 .hx-q2{animation:x2-q2 10.5s ease -1.26s infinite both}
.js .hx2 .hx-q1{animation:x2-q1 10.5s ease -1.26s infinite both}
.js .hx2 .hx-old{animation:x2-old 10.5s ease -1.26s infinite both}
.js .hx2 .hx-new{animation:x2-new 10.5s ease -1.26s infinite both}
.js .hx2 .hs-toast.hx-toast{animation:x2-toast 10.5s ease -1.26s infinite both}
.js .hx2 .hs-cur.hx-cur{animation:x2-cur 10.5s cubic-bezier(.45,0,.25,1) -1.26s infinite both}
.js .hx2 .hsm-tap.hx-tap{animation:x2-tap 10.5s ease-out -1.26s infinite both}
.js .hx2 .x2-wf{animation:x2-p2 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
.js .hx2 .x2-k0{animation:x2-k0 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
.js .hx2 .x2-k2{animation:x2-k2 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
.js .hx2 .x2-hl{animation:x2-hl 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
.js .hx2 .x2-st .x2-s0{animation:x2-s0 10.5s ease -1.26s infinite both}
.js .hx2 .x2-st .x2-s1{animation:x2-s1 10.5s ease -1.26s infinite both}
.js .hx2 .x2-st .x2-s2{animation:x2-s2 10.5s ease -1.26s infinite both}
.js .hx2 .x2-bar i{animation:x2-bar 10.5s linear -1.26s infinite both}
.js .hx2 .x2-t1 i{animation:x2-t1 10.5s ease -1.26s infinite both}
.js .hx2 .x2-t2 i{animation:x2-t2 10.5s ease -1.26s infinite both}
.js .hx2 .x2-t3 i{animation:x2-t3 10.5s ease -1.26s infinite both}
.js .hx2 .x2-res{animation:x2-res 10.5s ease -1.26s infinite both}
/* the open page's label darkens with the highlight, as in the Office: Overview, then Routines */
@keyframes x2-on-o  { 0%,51.999%{color:#040d1c} 56.799%,93.601%{color:#2f3d52} 100%{color:#040d1c} }
@keyframes x2-on-r  { 0%,52.001%{color:#2f3d52} 56.799%,93.601%{color:#040d1c} 100%{color:#2f3d52} }
.js .hx2 .x2-on-o{animation:x2-on-o 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
.js .hx2 .x2-on-r{animation:x2-on-r 10.5s cubic-bezier(.4,0,.2,1) -1.26s infinite both}
/* the loop ends on the learning paying off: "Your rule" pops in as the proposals step completes, and the result says ROI */
@keyframes x2-rtag  { 0%,69.599%{opacity:0;transform:scale(.8)} 71.201%,100%{opacity:1;transform:none} }
.js .hx2 .x2-rtag{display:inline-block;animation:x2-rtag 10.5s cubic-bezier(.3,1.4,.5,1) -1.26s 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:991px){
  .dg-wire{animation-name:dash-down}   /* the diagram stacks from tablet width down, so its wires run vertically */
}


/* ---- 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 */

/* ---- 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, how we got here) ------------------------------------ */
/* 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.co-next:nth-child(n):after{animation:none}   /* what comes next stays open */
.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%,13%{opacity:0;transform:translateX(-10px)} 17%,95%{opacity:1;transform:none} 99%,100%{opacity:0} }   /* the draft arrives with Alex's request (2026-10-25, was at 28-32%), so the window is never half empty for long */
@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 12s ease both infinite}
.zp-me{animation:zp-ask 12s ease both infinite}
.zp-s1{animation:zp-s1 12s ease both infinite}
.zp-s2{animation:zp-s2 12s ease both infinite}
.zp-dh,.zp-l{animation:zp-doc 12s ease both infinite}
.zp-scan{animation:zp-scan 12s cubic-bezier(.45,0,.55,1) both infinite}
.zp-hi{animation:zp-hi 12s ease both infinite}
.zp-who{animation:zp-who 12s cubic-bezier(.2,.9,.3,1.2) both infinite}
.zp-reply{animation:zp-reply 12s ease both infinite}
.zp-opts{animation:zp-opts 12s ease both infinite}
.zp-oa,.zp-ob,.zp-acts{animation:zp-part 12s ease both infinite}
/* a 12 s loop (was 7 s) that opens mid-ask: the greeting, Alex's request and the file in, the
   proposal on the left with Pricing picked out, and "Checking it against your standards" showing,
   52% into the loop. Every part starts --zp0 into its timeline; the parts that trail keep their beat */
.zp{--zp0:-6.24s}
.zp-greet,.zp-me,.zp-s1,.zp-s2,.zp-dh,.zp-l,.zp-scan,.zp-hi,.zp-who,.zp-reply,.zp-opts,.zp-oa,.zp-ob,.zp-acts{animation-delay:var(--zp0)}
.zp-d2{animation-delay:calc(var(--zp0) + .09s)} .zp-d3{animation-delay:calc(var(--zp0) + .2s)}
.zp-ob{animation-delay:calc(var(--zp0) + .1s)} .zp-acts{animation-delay:calc(var(--zp0) + .2s)}
.js .zp:not(.in) .zp-stage *{animation-play-state:paused}

/* ---- EXPERTS (home, 2026-10-25): the Go-live plan moves on, a 12s loop. Writing the standards spins, then turns
   into a green check and Done as the count goes from 4 to 5 of 6; the next step appears as Turn on your first routine
   and starts; Sam types, then his new message replaces the old one. Rests (no motion) on the finish. */
@keyframes ep-a3   { 0%,30%{opacity:1} 33%,94%{opacity:0} 98%,100%{opacity:1} }
@keyframes ep-b3   { 0%,30%{opacity:0} 33%,94%{opacity:1} 98%,100%{opacity:0} }
@keyframes ep-pop  { 0%,30%{opacity:0;transform:scale(.4)} 34%{opacity:1;transform:scale(1.15)} 37%,94%{opacity:1;transform:none} 98%,100%{opacity:0;transform:scale(.4)} }
@keyframes ep-a4   { 0%,40%{opacity:1} 43%,94%{opacity:0} 98%,100%{opacity:1} }
@keyframes ep-b4   { 0%,40%{opacity:0;transform:translateY(4px)} 44%,94%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ep-a5   { 0%,48%{opacity:1} 51%,94%{opacity:0} 98%,100%{opacity:1} }
@keyframes ep-typ  { 0%,51%{opacity:0} 53%,61%{opacity:1} 63%,100%{opacity:0} }
@keyframes ep-b5   { 0%,62%{opacity:0;transform:translateY(6px)} 66%,94%{opacity:1;transform:none} 98%,100%{opacity:0} }
@keyframes ep-rot  { to{transform:rotate(360deg)} }
@keyframes ep-dot  { 0%,60%,100%{transform:none;opacity:.5} 30%{transform:translateY(-3px);opacity:1} }
.ep .ep-a3{animation:ep-a3 12s ease both infinite}
.ep .ep-b3{animation:ep-b3 12s ease both infinite}
.ep .ep-pop3{animation:ep-pop 12s cubic-bezier(.2,.9,.3,1.2) both infinite}
.ep .ep-a4{animation:ep-a4 12s ease both infinite}
.ep .ep-b4{animation:ep-b4 12s ease both infinite}
.ep .ep-a5{animation:ep-a5 12s ease both infinite}
.ep .ep-typ{animation:ep-typ 12s ease both infinite}
.ep .ep-b5{animation:ep-b5 12s ease both infinite}
.ep .ep-a3.ep-spin{animation:ep-a3 12s ease both infinite,ep-rot 1s linear infinite}
.ep .ep-b4.ep-spin{animation:ep-b4 12s ease both infinite,ep-rot 1s linear infinite}
.ep .ep-typ i{animation:ep-dot 1s ease infinite}
.ep .ep-typ i:nth-child(2){animation-delay:.15s} .ep .ep-typ i:nth-child(3){animation-delay:.3s}
.js .xp-pic:not(.in) .ep *{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, Request complete, removed 2026-10-25: C now holds until the loop restarts)
   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%,97%{opacity:1} 99.5%,100%{opacity:0} }   /* holds to the end of the loop (the Request complete scene came out, 2026-10-25) */
@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 seven copies of one
   choreography:
     0.1s  the card rises        0.8s  the popover
     2.0s  step one ticks        2.8s  step two     (a tick: the ring fills green, the check draws, a small bounce; 2026-11-02)
     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)} 1.429%,12.857%{opacity:1;transform:none} 14.286%,100%{opacity:0;transform:none} }
@keyframes cl-fade { 0%{opacity:0} 1.429%,12.857%{opacity:1} 14.286%,100%{opacity:0} }
@keyframes cl-tab  { 0%,13.215%{background:#dbe8fb;color:#02254f;box-shadow:0 0 0 1px #c5dbf6 inset}
                     14.286%,98.929%{background:#f3f5f8;color:#5a697f;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%,2.143%{opacity:0;transform:translateY(12px)} 4.286%,100%{opacity:1;transform:none} }
@keyframes cl-sp1  { 0%,5.357%{opacity:1} 6.071%,100%{opacity:0} }
@keyframes cl-ok1  { 0%,5.357%{opacity:0;box-shadow:inset 0 0 0 0 var(--green);transform:none} 5.457%{opacity:1;box-shadow:inset 0 0 0 0 var(--green)} 6.1%{box-shadow:inset 0 0 0 9px var(--green)} 6.214%{transform:none} 6.757%{transform:scale(1.14)} 7.414%,100%{opacity:1;box-shadow:inset 0 0 0 9px var(--green);transform:none} }
@keyframes cl-ck1  { 0%,5.928%{clip-path:polygon(-20px -20px,-32px -20px,18px 30px,-20px 30px)} 6.785%,100%{clip-path:polygon(-20px -20px,-10px -20px,40px 30px,-20px 30px)} }
@keyframes cl-sp2  { 0%,7.5%{opacity:1} 8.214%,100%{opacity:0} }
@keyframes cl-ok2  { 0%,7.5%{opacity:0;box-shadow:inset 0 0 0 0 var(--green);transform:none} 7.6%{opacity:1;box-shadow:inset 0 0 0 0 var(--green)} 8.243%{box-shadow:inset 0 0 0 9px var(--green)} 8.357%{transform:none} 8.9%{transform:scale(1.14)} 9.557%,100%{opacity:1;box-shadow:inset 0 0 0 9px var(--green);transform:none} }
@keyframes cl-ck2  { 0%,8.071%{clip-path:polygon(-20px -20px,-32px -20px,18px 30px,-20px 30px)} 8.928%,100%{clip-path:polygon(-20px -20px,-10px -20px,40px 30px,-20px 30px)} }
@keyframes cl-sp3  { 0%,10.714%{opacity:1} 11.428%,100%{opacity:0} }
@keyframes cl-ok3  { 0%,10.714%{opacity:0;box-shadow:inset 0 0 0 0 var(--green);transform:none} 10.814%{opacity:1;box-shadow:inset 0 0 0 0 var(--green)} 11.457%{box-shadow:inset 0 0 0 9px var(--green)} 11.571%{transform:none} 12.114%{transform:scale(1.14)} 12.771%,100%{opacity:1;box-shadow:inset 0 0 0 9px var(--green);transform:none} }
@keyframes cl-ck3  { 0%,11.285%{clip-path:polygon(-20px -20px,-32px -20px,18px 30px,-20px 30px)} 12.142%,100%{clip-path:polygon(-20px -20px,-10px -20px,40px 30px,-20px 30px)} }
@keyframes cl-load { 0%,8.929%{opacity:1} 9.643%,100%{opacity:0} }
@keyframes cl-got  { 0%,8.929%{opacity:0} 10%,100%{opacity:1} }
@keyframes cl-wv   { 0%,7.5%{clip-path:inset(100% 0 0 0)} 8.929%,100%{clip-path:inset(0 0 0 0)} }
@keyframes cl-wh   { 0%,8.929%{clip-path:inset(0 100% 0 0)} 9.643%,100%{clip-path:inset(0 0 0 0)} }
@keyframes cl-pill { 0%,9.285%{opacity:0;transform:scale(.92)} 10.357%,100%{opacity:1;transform:none} }
@keyframes cl-rot  { to{transform:rotate(360deg)} }
.cl-card{animation:cl-card 35s cubic-bezier(.2,.7,.2,1) both infinite}
.cl-d,.cl-band{animation:cl-fade 35s ease both infinite}
.cl-tab{animation:cl-tab 35s ease both infinite}
.cl-pop{animation:cl-pop 35s cubic-bezier(.2,.7,.2,1) both infinite}
.cl-s1 .cl-spin{animation:cl-sp1 35s ease both infinite,cl-rot .9s linear infinite}
.cl-s1 .cl-ok{animation:cl-ok1 35s ease both infinite} .cl-s1 .cl-ok::after{animation:cl-ck1 35s cubic-bezier(.4,0,.2,1) both infinite}
.cl-s2 .cl-spin{animation:cl-sp2 35s ease both infinite,cl-rot .9s linear infinite}
.cl-s2 .cl-ok{animation:cl-ok2 35s ease both infinite} .cl-s2 .cl-ok::after{animation:cl-ck2 35s cubic-bezier(.4,0,.2,1) both infinite}
.cl-s3 .cl-spin{animation:cl-sp3 35s ease both infinite,cl-rot .9s linear infinite}
.cl-s3 .cl-ok{animation:cl-ok3 35s ease both infinite} .cl-s3 .cl-ok::after{animation:cl-ck3 35s cubic-bezier(.4,0,.2,1) both infinite}
.cl-load{animation:cl-load 35s ease both infinite}
.cl-load .cl-spin{animation:cl-rot .9s linear infinite}
.cl-got{animation:cl-got 35s ease both infinite}
.cl-wv{animation:cl-wv 35s ease both infinite}
.cl-wh{animation:cl-wh 35s ease both infinite}
.cl-pill{animation:cl-pill 35s cubic-bezier(.2,.9,.3,1.2) both infinite}
/* each department onto its own 5s window of the 35s loop: delays of 0, -25, -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:-30s} .cl .cl-c2,.cl .cl-c2 *{animation-delay:-25s}
.cl .cl-c3,.cl .cl-c3 *{animation-delay:-20s} .cl .cl-c4,.cl .cl-c4 *{animation-delay:-15s}
.cl .cl-c5,.cl .cl-c5 *{animation-delay:-10s} .cl .cl-c6,.cl .cl-c6 *{animation-delay:-5s}
/* the drawn check is a ::after, which "*" does not reach: it takes its card's delay too (2026-11-02) */
.cl .cl-c1 .cl-ok::after{animation-delay:-30s} .cl .cl-c2 .cl-ok::after{animation-delay:-25s} .cl .cl-c3 .cl-ok::after{animation-delay:-20s}
.cl .cl-c4 .cl-ok::after{animation-delay:-15s} .cl .cl-c5 .cl-ok::after{animation-delay:-10s} .cl .cl-c6 .cl-ok::after{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: no CSS motion since 2026-10-24; the product page draws it on a canvas (ONE SYSTEM STACK script) */

/* ---- 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}

/* ---- PILLAR PICTURES (home #pillars): one quiet entrance when the cards reveal (.rv.in), played once.
   The back tiles settle into each stack, the Workers line draws itself, the Experts progress bar fills. */
@keyframes pv-w2in { from{opacity:0;transform:translateX(-50%) translateY(22px) scale(.92)} to{opacity:.85;transform:translateX(-50%) scale(.92)} }
@keyframes pv-w3in { from{opacity:0;transform:translateX(-50%) translateY(44px) scale(.84)} to{opacity:.6;transform:translateX(-50%) scale(.84)} }
@keyframes pv-draw { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes pv-fill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.js .steps.st4.rv .pv-w2{animation:pv-w2in .55s cubic-bezier(.2,.8,.2,1) .2s both;animation-play-state:paused}
.js .steps.st4.rv .pv-w3{animation:pv-w3in .55s cubic-bezier(.2,.8,.2,1) .3s both;animation-play-state:paused}
.js .steps.st4.rv .pv-rise{animation:pv-draw .5s ease-out .45s both;animation-play-state:paused}
.js .steps.st4.rv .pv-prog b{transform-origin:left center;animation:pv-fill .5s ease-out .45s both;animation-play-state:paused}
.js .steps.st4.rv.in .pv-w2,.js .steps.st4.rv.in .pv-w3,.js .steps.st4.rv.in .pv-rise,.js .steps.st4.rv.in .pv-prog b{animation-play-state:running}

/* ---- BORDER BEAM (product page bento, 2026-10-24) ------------------------------------------
   A short royal light runs around each card's border: the border layer (.bcard::before) is a conic
   gradient from --beam, and --beam turns once every 7s. --beam is registered so it can be animated;
   each card starts at a different point of its lap. Reduced motion: a plain grey border. */
@property --beam{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes bento-beam { to{--beam:360deg} }
.bento .bcard.ap{animation:bento-beam 7s linear infinite}
.bento .bcard.ap:nth-child(2){animation-delay:-1.4s}
.bento .bcard.ap:nth-child(3){animation-delay:-2.8s}
.bento .bcard.ap:nth-child(4){animation-delay:-4.2s}
.bento .bcard.ap:nth-child(5){animation-delay:-5.6s}

@media (prefers-reduced-motion:reduce){
  .bento .bcard.ap{animation:none;--ring:var(--line)}   /* the border beam stops; the border is a plain line */
  .js .steps.st4.rv .pv-w2,.js .steps.st4.rv .pv-w3,.js .steps.st4.rv .pv-rise,.js .steps.st4.rv .pv-prog b{animation:none}
  .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{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}
  .ep *{animation:none}
  .hero .shot,.shot-sec .shot,.js .hs-stage *,.js .hsm-stage *{animation:none}
  .home .hero .shot{animation:none}   /* the home hero restates its animation more specifically, so it needs its own stop */
  .js .hx .hs-stage *,.js .hx .hsm-stage *{animation:none!important}
  /* reduced motion rests on the payoff, not the first frame: the edit saved as a rule, the figures improved, the note that the agent learned it */
  .js .hx .hx-a,.js .hx .hx-q2,.js .hx .hx-old,.js .hx .hs-cur,.js .hx .hsm-tap{opacity:0!important}
  .js .hx .hx-rule,.js .hx .hx-q1,.js .hx .hx-new,.js .hx .hs-toast.hx-toast{opacity:1!important;transform:none!important}
  .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}
  .panel:target .panel-hd>div:first-child,
  .panel:target .panel-list div,
  .panel:target .panel-body{animation:none}
}