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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

/* css/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.
   Builder-safe: no keyframes (motion is transitions switched on by .go and .done),
   Webflow breakpoints only, classes only. 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; in Webflow the Dropdown element */
.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)}
}

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