/* klink.cloud design system.
   One stylesheet for every page. Components live here, not in per-page <style>
   blocks, because a component defined on one page and used on another is how
   the FAQ shipped unstyled. If a page needs a new component, add it here. */


:root{
  --ink:#0A0E27; --ink-2:#2C3357; --muted:#5A6488; --faint:#8A93B2;
  --line:#E6E9F2; --line-soft:#EEF1F8; --surface:#F7F8FC; --white:#fff;
  --brand:#283182; --brand-2:#4F5FE8; --violet:#7859F8; --cyan:#22C7EE; --coral:#FF6B4A;
  --grad-soft:linear-gradient(135deg,#EEF1FF 0%,#F3EEFF 50%,#EAF8FF 100%);

  /* ---- live gradient palette ----
     Every gradient surface on the site reads these tokens, so trying a different
     brand gradient is one command rather than an edit spread across the sheet:
       npm run gradient -- classic      the original
       npm run gradient -- trust        Trust Center colours, hero stays light
       npm run gradient -- trust-dark   Trust Center colours and its dark hero
     scripts/build-gradient.mjs rewrites everything between the two markers, so
     do not hand-edit inside them; add a palette to that script instead. */
  /* gradient:start */
  --grad:linear-gradient(135deg,#1B2260 0%,#3B49C4 34%,#4F5FE8 66%,#7859F8 100%);
  --hero-bg:transparent;
  --hero-ink:var(--ink);
  --hero-lede:var(--muted);
  --hero-micro:var(--faint);
  --hero-grad-text:var(--grad);
  --hero-glow-inset:-320px 0 auto;
  --hero-glow-height:760px;
  --hero-glow:radial-gradient(58% 50% at 50% 44%, rgba(120,89,248,.16), transparent 70%),
              radial-gradient(44% 40% at 78% 26%, rgba(34,199,238,.16), transparent 70%),
              radial-gradient(46% 42% at 20% 30%, rgba(40,49,130,.14), transparent 70%);
  --cta-glow:radial-gradient(58% 70% at 78% 108%, rgba(79,95,232,.62), transparent 68%),
             radial-gradient(44% 56% at 96% 88%, rgba(34,199,238,.34), transparent 70%),
             radial-gradient(50% 62% at 10% -8%, rgba(120,89,248,.30), transparent 66%);
  --grad-btn:var(--grad);
  --footer-bg:radial-gradient(1200px 620px at 84% 112%, rgba(79,95,232,.40), transparent 66%),
              radial-gradient(760px 420px at 99% 72%, rgba(34,199,238,.15), transparent 70%),
              radial-gradient(1000px 540px at 4% -10%, rgba(120,89,248,.22), transparent 64%),
              linear-gradient(#0D1424,#0D1424);
  /* gradient:end */
  --shadow-sm:0 1px 2px rgba(10,14,39,.06),0 1px 3px rgba(10,14,39,.05);
  --shadow-md:0 8px 24px -10px rgba(10,14,39,.18);
  --shadow-lg:0 32px 70px -32px rgba(10,14,39,.42);
  --r:14px; --r-lg:20px; --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:24px}

h1,h2,h3,h4,.display{font-family:"Plus Jakarta Sans",Inter,sans-serif; margin:0;
  letter-spacing:-.028em; line-height:1.08; font-weight:800}
h1{font-size:clamp(2.6rem,5.6vw,4.35rem)}
h2{font-size:clamp(2rem,4vw,3.05rem); line-height:1.12}
h3{font-size:1.2rem; font-weight:700; letter-spacing:-.012em; line-height:1.35}
p{margin:0}
.lede{font-size:clamp(1.06rem,1.7vw,1.28rem); color:var(--muted); line-height:1.6}
.eyebrow{font-family:"Plus Jakarta Sans",sans-serif; font-size:12.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--brand-2)}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex; align-items:center; gap:14px; height:72px}
.nav-logo{height:29px; width:auto}
.menu{display:none; align-items:center; gap:2px; margin-left:18px; flex:1}
.menu>li{list-style:none; position:relative}
.menu-btn{display:flex; align-items:center; gap:6px; background:none; border:0; padding:9px 13px;
  border-radius:9px; font-size:15px; font-weight:600; color:var(--ink-2); font-family:Inter,sans-serif}
.menu-btn:hover{background:var(--surface); color:var(--ink)}
.chev{width:9px; height:9px; border-right:1.8px solid currentColor; border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); opacity:.55; transition:transform .18s}
.menu>li:hover .chev{transform:rotate(225deg) translate(-3px,-3px)}
.panel{position:absolute; top:calc(100% + 8px); left:0; opacity:0; visibility:hidden;
  transform:translateY(-6px); transition:all .16s ease; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); padding:12px; z-index:90}
.menu>li:hover .panel{opacity:1; visibility:visible; transform:translateY(0)}
.panel-1{width:392px}
/* These were far wider than their content: the Solutions left column ran 474px
   for 326px of text and the Resources one 476px for 233px. Sized to the words
   instead, which also stops the last dropdown running off the right edge without
   having to open it leftward. */
.panel-2.panel-res{width:508px; grid-template-columns:1fr 160px}
/* Solutions sits further right than Products, so 748px hung off the edge by
   67px at 1024 and 77px at 960. Narrower below 1200, same as panel-3. */
.panel-2{width:592px; display:grid; grid-template-columns:1fr 172px; gap:2px 12px}
@media (min-width:1200px){
  .panel-2{width:648px; grid-template-columns:1fr 196px; gap:2px 14px}
  .panel-2.panel-res{width:592px; grid-template-columns:1fr 180px}
}
/* Industries are plain links, so the column is narrower than the use cases and
   carries the same divider the Products feature list uses. */
.panel-2 .pfeat{border-left:1px solid var(--line-soft); padding-left:6px}
/* Products. Three zones: argument, feature list, and a screenshot that follows
   the hovered feature. Only the first column carries descriptions, because
   vertical space is what limits a menu. */
/* The panel is anchored to its menu item, so its width has to fit between that
   item and the right edge of the window. At 1046px it overflowed by 54px at
   1280 and 257px at 1024, and the nav is on from 960 up. Below 1200 the preview
   column is dropped rather than squeezed into something unreadable. */
.panel-3{width:572px; display:grid; grid-template-columns:300px 232px; gap:0 12px; padding:14px}
.panel-3 .pcol.ppreview{display:none}
@media (min-width:1200px){
  .panel-3{width:920px; grid-template-columns:288px 214px 1fr}
  .panel-3 .pcol.ppreview{display:block}
}
@media (min-width:1440px){
  .panel-3{width:1046px; grid-template-columns:300px 232px 1fr}
}
.panel-3 .pcol{min-width:0}
.panel-3 .pfeat{border-left:1px solid var(--line-soft); padding-left:6px}
.panel a.pl{display:block; padding:9px 12px; border-radius:10px;
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:14.3px;
  color:var(--ink); letter-spacing:-.008em}
.panel a.pl:hover,.panel a.pl.on{background:var(--surface)}
.ppreview{position:relative; background:var(--surface); border:1px solid var(--line-soft);
  border-radius:13px; overflow:hidden}
.nshot{margin:0; display:none; padding:13px 13px 11px}
.nshot.on{display:block}
.nshot img{width:100%; height:auto; aspect-ratio:44/20; object-fit:cover; object-position:top left;
  border-radius:9px; border:1px solid var(--line); background:#fff; display:block}
.nshot figcaption{margin-top:9px; font-size:12.7px; color:var(--muted); line-height:1.45}
.panel h4{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  font-weight:700; padding:10px 12px 8px}
.panel h4.col2{grid-column:2}
.panel .pcol{display:block}
/* Menu rows are icon + text, so the row is a flex line rather than a block. */
.panel a{display:flex; gap:12px; align-items:flex-start; padding:10px 12px; border-radius:11px}
.panel a:hover{background:var(--surface)}
.panel a b{display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:14.5px;
  font-weight:700; color:var(--ink); letter-spacing:-.008em}
.panel a span{display:block; font-size:12.8px; color:var(--faint); line-height:1.45; margin-top:2px}

/* Menu icon tile. Inline SVG so a menu never renders before its icons arrive. */
.mi{flex:0 0 auto; width:36px; height:36px; border-radius:10px; display:flex;
  align-items:center; justify-content:center; background:var(--surface);
  border:1px solid var(--line); transition:background .15s, border-color .15s}
.mi svg{width:18px; height:18px; fill:none; stroke:var(--ink-2); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke .15s}
.panel a:hover .mi{background:var(--grad-soft); border-color:#D9DEF8}
.panel a:hover .mi svg{stroke:var(--brand-2)}
.nav-right{display:flex; align-items:center; gap:8px; margin-left:auto}
.nav-link{display:none; font-size:15px; font-weight:600; color:var(--ink-2); padding:9px 13px; border-radius:9px}
.nav-link:hover{background:var(--surface); color:var(--ink)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:15px; padding:11px 20px;
  border-radius:10px; border:1px solid transparent; white-space:nowrap;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, border-color .18s}
.btn:hover{transform:translateY(-1px)}
/* Its own token, not --grad: that one is also clipped into headline text by
   .grad-text, so darkening it for the button would black out the h1. */
.btn-primary{background:var(--grad-btn); color:#fff; box-shadow:0 6px 18px -6px rgba(79,95,232,.62)}
.btn-primary:hover{box-shadow:0 12px 26px -8px rgba(79,95,232,.7)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--faint); box-shadow:var(--shadow-sm)}
.btn-lg{padding:15px 28px; font-size:16.5px; border-radius:12px}
/* Mobile navigation. The toggle and panel sit outside <header> because .nav uses
   backdrop-filter, which makes it the containing block for fixed descendants and
   would size the panel against the header instead of the viewport.
   A checkbox drives it so the menu works without JavaScript
   and cannot break on a static page. Before this the burger was decorative and
   the whole nav was unreachable below 960px. */
.burger{display:none; flex-direction:column; gap:5px; padding:12px; cursor:pointer;
  margin-left:4px; border-radius:9px}
.burger:hover{background:var(--surface)}
.burger i{display:block; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease}
.nav-toggle:checked ~ .nav .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav .burger i:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{display:none; position:fixed; inset:72px 0 0; z-index:1100;  /* above the chat widget, which is lifted to 1000 */ background:#fff;
  overflow-y:auto; -webkit-overflow-scrolling:touch; border-top:1px solid var(--line)}
.nav-toggle:checked ~ .mobile-menu{display:block}
.mm-inner{padding:22px 24px 40px; max-width:640px; margin:0 auto}
.mm-inner h5{margin:22px 0 8px; font-family:"Plus Jakarta Sans",sans-serif; font-size:11.5px;
  font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.mm-inner h5:first-child{margin-top:4px}
.mm-inner a{display:flex; gap:13px; align-items:center; padding:12px 4px; font-size:16px;
  font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.mm-inner a b{display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:15.5px; font-weight:700}
.mm-inner a span{display:block; font-size:13px; font-weight:400; color:var(--faint); line-height:1.4; margin-top:1px}
.mm-inner a.mm-plain{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700}
.mm-inner a:active{color:var(--brand-2)}
.mm-cta{display:grid; gap:10px; margin-top:26px}
.mm-cta .btn{width:100%}
.mm-cta a{border-bottom:0; padding:15px 28px}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding:76px 0 0; text-align:center;
  background:var(--hero-bg); color:var(--hero-ink)}
/* The glow is a pseudo-element so the copy sits above it at full contrast. On the
   light palettes it starts above the hero and bleeds up behind the header; a dark
   palette clips it to the hero box instead, or it would paint behind the white
   header. That is what --hero-glow-inset switches. */
.hero::before{content:""; position:absolute; inset:var(--hero-glow-inset);
  height:var(--hero-glow-height); z-index:-1; background:var(--hero-glow)}
.pill{display:inline-flex; align-items:center; gap:9px; padding:6px 8px 6px 6px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); font-size:13.5px;
  font-weight:600; color:var(--ink-2)}
.pill b{background:var(--grad); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:4px 9px; border-radius:999px; font-family:"Plus Jakarta Sans",sans-serif;
  flex:0 0 auto; white-space:nowrap}
.hero h1{margin:24px auto 0; max-width:17ch; text-wrap:balance}
/* Scoped to the hero: a dark palette needs a light headline gradient, while the
   sub-hero on every other page stays on white and must keep the dark one. */
.hero .grad-text{background:var(--hero-grad-text); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.hero .lede{margin:24px auto 0; max-width:60ch; color:var(--hero-lede)}
.hero .micro{color:var(--hero-micro)}
.actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.micro{margin-top:16px; font-size:14px; color:var(--faint)}
.hero-shot{position:relative; margin:60px auto 0; max-width:1040px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:#fff; padding:8px; box-shadow:var(--shadow-lg)}
.hero-shot video,.hero-shot img{width:100%; border-radius:13px; display:block}

/* ---------- client logo wall ----------
   Two rows drifting in opposite directions. Customer logos have wildly different
   aspect ratios, so each sits in a fixed-height white card; that, not spacing,
   is what makes the row read as deliberate. Two rows show 25 brands without
   shrinking any of them. */
.proof{padding:0; margin:72px 0 0}
.proof-inner{padding:64px 0 66px; position:relative; overflow:hidden;
  /* A held blue field rather than a fade to white, so the band reads as its own
     section the way it does on the app sign-in page. */
  background:linear-gradient(180deg,#DCEAFB 0%,#E4F0FD 45%,#DBE9FB 100%)}
.proof-inner::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 90% at 50% 0%, rgba(255,255,255,.55), transparent 70%)}
/* Proof band heading. A single long line had no hierarchy and crowded the rows
   beneath it, so the claim and the qualifier are now separate, with real space
   before the logos begin. */
.proof-head{position:relative; z-index:1; text-align:center; padding:0 24px}
.proof-head h2{font-size:clamp(1.35rem,2.6vw,1.85rem); letter-spacing:-.025em;
  color:var(--ink); text-wrap:balance}
.proof-head p{margin:12px auto 0; max-width:52ch; font-size:15.5px; color:var(--muted);
  line-height:1.55; text-wrap:balance}

.marquee{position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee + .marquee{margin-top:12px}
.proof-head + .marquee{margin-top:48px}
.track{display:flex; width:max-content; align-items:center; gap:10px;
  animation:slide 70s linear infinite}
.track.rev{animation-direction:reverse; animation-duration:82s}
.proof:hover .track{animation-play-state:paused}

/* The chip should hug the logo. Oversized cards holding small marks read as
   empty boxes, so height and padding are tuned to the logo, not the other way
   round: roughly 45% of the chip height is ink, which is what the app does. */
.track figure{margin:0; flex:0 0 auto; height:52px; min-width:128px; padding:0 8px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(16,24,40,.05); border-radius:10px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .18s ease, box-shadow .18s ease}
.track figure:hover{transform:translateY(-2px); box-shadow:0 6px 16px -8px rgba(16,24,40,.3)}
.track img{max-height:38px; max-width:112px; width:auto; object-fit:contain}

@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}
@media (max-width:640px){
  /* Bigger than desktop in relative terms: on a narrow screen these marks are
     the proof, and shrinking them makes them unreadable. */
  .track figure{height:60px; min-width:140px; padding:0 10px; border-radius:12px}
  .track img{max-height:44px; max-width:118px}
  .marquee + .marquee{margin-top:10px}
  .proof-head + .marquee{margin-top:34px}
  .proof-inner{padding:46px 0 50px}
}

/* ---------- sections ---------- */
section{padding:92px 0}
.head{max-width:62ch; margin:0 auto; text-align:center}
.head h2{text-wrap:balance}
.head .lede{margin-top:18px}
.alt{background:var(--surface); border-block:1px solid var(--line-soft)}

.pillars{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr}
.pillar{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-sm); transition:transform .18s, box-shadow .18s}
.pillar:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.ic{width:44px; height:44px; border-radius:12px; background:var(--grad-soft);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.ic svg{width:21px; height:21px; stroke:var(--brand-2); fill:none; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.pillar h3{margin-bottom:9px}
.pillar p{color:var(--muted); font-size:15.5px}

/* feature rows */
.feature{display:grid; gap:44px; align-items:center; grid-template-columns:1fr; margin-top:92px}
.feature:first-of-type{margin-top:56px}
.feature h3{font-size:clamp(1.6rem,3vw,2.15rem); font-weight:800; margin-top:14px}
.feature>div>p{margin-top:15px; color:var(--muted)}
.ticks{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:11px}
.ticks li{position:relative; padding-left:30px; color:var(--ink-2); font-size:15.5px}
.ticks li::before{content:""; position:absolute; left:0; top:6px; width:19px; height:19px; border-radius:6px;
  background:var(--grad-soft); border:1px solid #D9DEF8}
.ticks li::after{content:""; position:absolute; left:6px; top:11px; width:6px; height:3px;
  border-left:1.8px solid var(--brand-2); border-bottom:1.8px solid var(--brand-2); transform:rotate(-45deg)}
.shot{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; padding:12px;
  box-shadow:var(--shadow-md)}

/* stats */
.stats{display:grid; gap:2px; margin-top:52px; grid-template-columns:repeat(2,1fr);
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden}
.stat{background:#fff; padding:34px 22px; text-align:center}
.stat .n{font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(2.3rem,4.6vw,3.15rem);
  font-weight:800; letter-spacing:-.035em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.stat .l{margin-top:11px; font-size:14.5px; color:var(--muted); line-height:1.45}

/* pricing */
.plans{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr; align-items:start}
.plan{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-sm); position:relative}
.plan.pop{border-color:transparent; box-shadow:var(--shadow-lg);
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; border:1.6px solid transparent}
.tag{position:absolute; top:-12px; left:30px; background:var(--grad); color:#fff; font-size:11.5px;
  font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;
  font-family:"Plus Jakarta Sans",sans-serif}
.plan h3{font-size:1.05rem}
.price{margin:16px 0 4px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800;
  font-size:2.6rem; letter-spacing:-.035em; line-height:1}
.price small{font-size:.95rem; font-weight:600; color:var(--faint); letter-spacing:0}
.plan>p{font-size:14.5px; color:var(--muted); min-height:44px}
.plan .btn{width:100%; margin-top:20px}
.plan ul{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:10px;
  border-top:1px solid var(--line-soft); padding-top:20px}
.plan li{position:relative; padding-left:26px; font-size:14.5px; color:var(--ink-2)}
.plan li::before{content:""; position:absolute; left:3px; top:8px; width:6px; height:3px;
  border-left:1.8px solid var(--brand-2); border-bottom:1.8px solid var(--brand-2); transform:rotate(-45deg)}
.vs{margin-top:26px; text-align:center; font-size:14.5px; color:var(--muted)}
.vs b{color:var(--ink)}

/* reviews */
.senja-wrap{margin-top:48px; min-height:420px}
.senja-fallback{text-align:center; color:var(--muted); font-size:15.5px}
.senja-fallback a{color:var(--brand-2); font-weight:600}

/* quotes */
.quotes{display:grid; gap:20px; margin-top:52px; grid-template-columns:1fr}
.quote{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-sm)}
.quote blockquote{margin:0; font-family:"Plus Jakarta Sans",sans-serif; font-size:18px; font-weight:600;
  line-height:1.5; letter-spacing:-.012em; color:var(--ink)}
.who{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-soft); font-size:14px}
.who b{display:block; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif}
.who span{color:var(--faint)}

/* integrations */
.ints{margin:44px 0 8px; display:grid; gap:14px; grid-template-columns:repeat(3,1fr)}
.int{display:flex; align-items:center; justify-content:center; height:84px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:18px; transition:transform .16s, box-shadow .16s}
.int:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.int img{max-height:28px; max-width:100%; width:auto; object-fit:contain}

/* cta */
.cta{position:relative; overflow:hidden; border-radius:26px; padding:72px 30px; text-align:center;
  background:var(--grad); color:#fff}
.cta::after{content:""; position:absolute; inset:0; opacity:.5; z-index:0;
  background:var(--cta-glow)}
.cta>*{position:relative; z-index:1}
.cta h2{color:#fff}
.cta p{margin:18px auto 0; max-width:56ch; color:#D5DBFB; font-size:1.08rem}
.cta .btn-primary{background:#fff; color:var(--brand); box-shadow:0 10px 26px -10px rgba(0,0,0,.42)}
.cta .btn-ghost{background:rgba(255,255,255,.09); color:#fff; border-color:rgba(255,255,255,.42)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.17)}
.cta .micro{color:#BFC7F5}


@media (max-width:600px){
  .ints{grid-template-columns:repeat(2,1fr)}
  .int{height:72px; padding:14px}
  .nav-in{height:64px; gap:8px}
  .nav-right .btn-ghost{display:none}          /* one primary action fits; the rest live in the menu */
  .mobile-menu{inset:64px 0 0}
  .actions .btn{width:100%}                     /* full width buttons are easier to hit */
  .actions{gap:10px}
  .cta{padding:48px 22px; border-radius:18px}
  .capitem{padding:20px 22px}
  .ctaband{padding:24px; flex-direction:column; align-items:flex-start}
  .ctaband .actions{width:100%}
}

@media (min-width:600px){
  .pillars{grid-template-columns:repeat(3,1fr)}
  .quotes{grid-template-columns:repeat(2,1fr)}
  .ints{grid-template-columns:repeat(6,1fr)}
  .stats{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:959px){ .burger{display:flex} }
@media (min-width:960px){
  .menu{display:flex} .nav-link{display:inline-flex} .burger{display:none} .mobile-menu{display:none !important}
  .feature{grid-template-columns:1fr 1fr; gap:70px}
  .feature.flip>div:first-child{order:2}
  .plans{grid-template-columns:repeat(3,1fr)}
  .cta{padding:92px 56px}
}

/* ---- footer (matches the production site's structure) ---- */
/* Footer brand column: logo above the social row. Declared explicitly rather
   than relying on the grid, so the intent survives a layout change. */
.f-brand{display:flex; flex-direction:column; align-items:flex-start}

/* Currency flag in the pricing selector. The src is swapped by script, so the
   class needs a rule of its own rather than inheriting from a parent selector. */
.flag{width:20px; height:14px; object-fit:cover; border-radius:2px; flex:0 0 auto}

footer{background:var(--footer-bg); color:#94A3B8; padding:64px 0 0; margin-top:96px}
.f-top{display:grid; gap:44px; grid-template-columns:1fr; padding-bottom:52px}
.f-logo{height:34px; width:auto}
.f-social{display:flex; gap:12px; margin-top:28px}
.f-social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; transition:background .18s}
.f-social a:hover{background:rgba(255,255,255,.16)}
.f-social img{width:19px; height:19px}
.f-cols{display:grid; gap:34px 26px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fcol h5{margin:0 0 16px; font-family:"Plus Jakarta Sans",sans-serif; font-size:13px;
  font-weight:700; color:#64748B; letter-spacing:.02em}
.fcol a{display:block; padding:6px 0; font-size:14.5px; color:#CBD5E1; line-height:1.45}
.fcol a:hover{color:#fff}
.f-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:24px 0 30px; border-top:1px solid rgba(255,255,255,.08); font-size:14px; color:#64748B}
.f-legal{display:flex; gap:26px}
.f-legal a:hover{color:#fff}
@media (min-width:720px){ .f-cols{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .f-top{grid-template-columns:250px 1fr; gap:56px} }


/* ---- pricing page ---- */
.p-hero{padding:26px 0 0; text-align:center; position:relative; overflow:hidden}
.p-hero::before{content:""; position:absolute; inset:-300px 0 auto; height:640px; z-index:-1;
  background:radial-gradient(52% 46% at 50% 46%, rgba(120,89,248,.15), transparent 70%),
             radial-gradient(40% 38% at 80% 24%, rgba(34,199,238,.14), transparent 70%)}
.p-hero h1{margin:12px auto 0; max-width:22ch; text-wrap:balance;
  font-size:clamp(1.75rem,3.2vw,2.4rem)}
.p-hero .lede{margin:11px auto 0; max-width:56ch; font-size:1rem}

.controls{margin:20px auto 0; display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:center}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:4px}
.seg button{border:0; background:none; padding:9px 18px; border-radius:9px; font-size:14.5px;
  font-weight:700; color:var(--muted); font-family:"Plus Jakarta Sans",sans-serif}
.seg button[aria-pressed="true"]{background:#fff; color:var(--ink); box-shadow:var(--shadow-sm)}
.save{margin-left:6px; font-size:11.5px; font-weight:800; letter-spacing:.04em; color:#fff;
  background:var(--grad); padding:3px 8px; border-radius:999px}
.cur{display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:8px 14px; box-shadow:var(--shadow-sm)}
/* The flag assets are round badges, 512 by 512. Rendering them into a 20 by 14
   rectangle with object-fit:cover sliced the top and bottom off the circle,
   which is why they looked flattened. Square box, round corner. */
.cur img{width:18px; height:18px; object-fit:contain; border-radius:50%; display:block}
.cur select{border:0; background:none; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700;
  font-size:14.5px; color:var(--ink); outline:none}

/* Label, slider and value on one line rather than stacked, so the plans clear
   the fold on a laptop. This page gets opened live in sales calls. */
.volume{margin:18px auto 0; max-width:720px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:14px 22px; box-shadow:var(--shadow-sm);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:18px; align-items:center}
.volume-top{display:contents}
.volume-top span:first-child{grid-column:1; grid-row:1; text-align:left}
.volume .volume-val{grid-column:3; grid-row:1; text-align:right}
.volume input[type=range]{grid-column:2; grid-row:1}
.volume-scale{grid-column:2; grid-row:2}
.volume-top span{font-size:14px; color:var(--muted); font-weight:600}
.volume-val{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:1.25rem;
  letter-spacing:-.02em; color:var(--ink)}
input[type=range]{-webkit-appearance:none; appearance:none; width:100%; height:6px; margin-top:20px;
  border-radius:99px; background:var(--line); outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px;
  border-radius:50%; background:var(--grad); border:3px solid #fff; cursor:pointer;
  box-shadow:0 2px 8px rgba(40,49,130,.4)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#4F5FE8;
  border:3px solid #fff; cursor:pointer}
/* The tiers are not evenly spaced: 10k is index 9 of 17, so it belongs at 53%
   of the track, not at a third of it. Spacing these labels evenly put "10k"
   above a position that actually meant 6k. Each label now carries its own
   fraction and is placed against the thumb's real travel, which is inset by
   half a thumb at each end. */
.volume-scale{position:relative; height:15px; margin-top:5px; font-size:12.5px; color:var(--faint)}
.volume-scale span{position:absolute; top:0; white-space:nowrap;
  left:calc(10px + var(--p) * (100% - 20px)); transform:translateX(-50%)}
.volume-scale span:first-child{transform:none}
.volume-scale span:last-child{transform:translateX(-100%)}

.pcards{display:grid; gap:22px; margin-top:26px; grid-template-columns:1fr; align-items:start}
.pcard{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:32px;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column}
.pcard.pop{box-shadow:var(--shadow-lg); border:1.6px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box; position:relative}
.pcard h3{font-size:1.12rem}
.pcard .sub{margin-top:7px; font-size:14.5px; color:var(--muted); min-height:42px}
.amount{margin:20px 0 2px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800;
  font-size:2.75rem; letter-spacing:-.035em; line-height:1; color:var(--ink)}
.amount small{font-size:.9rem; font-weight:600; color:var(--faint); letter-spacing:0; white-space:nowrap}
.per{min-height:38px}
.per{font-size:13.5px; color:var(--faint)}
.pcard .btn{width:100%; margin-top:22px}
.pcard ul{margin:24px 0 0; padding:22px 0 0; list-style:none; display:grid; gap:11px;
  border-top:1px solid var(--line-soft)}
.pcard li{position:relative; padding-left:27px; font-size:14.5px; color:var(--ink-2)}
.pcard li::before{content:""; position:absolute; left:3px; top:8px; width:7px; height:3.5px;
  border-left:1.9px solid var(--brand-2); border-bottom:1.9px solid var(--brand-2); transform:rotate(-45deg)}

.seat b{display:block; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.05rem}
.seat p{font-size:14.5px; color:var(--muted); margin-top:5px; max-width:46ch}
.seat .amount{margin:0; font-size:2rem; white-space:nowrap}

.explain{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:34px;
  margin-top:20px; box-shadow:var(--shadow-sm)}
.explain h3{margin-bottom:12px}
.explain p{color:var(--muted); font-size:15.5px; margin-top:10px}

.faq{max-width:800px; margin:52px auto 0; display:grid; gap:12px}
details{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:0 22px;
  transition:box-shadow .18s}
details[open]{box-shadow:var(--shadow-md)}
summary{list-style:none; cursor:pointer; padding:20px 0; font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:700; font-size:16px; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:""; width:9px; height:9px; flex:0 0 auto; border-right:2px solid var(--faint);
  border-bottom:2px solid var(--faint); transform:rotate(45deg); transition:transform .2s}
details[open] summary::after{transform:rotate(225deg)}
details p{padding:0 0 22px; color:var(--muted); font-size:15.5px; margin:0}

@media (min-width:600px){ .seats{grid-template-columns:repeat(2,1fr)} }
@media (min-width:960px){ .pcards{grid-template-columns:repeat(3,1fr)} }

/* ---- comparison table ---- */
.ctable{margin-top:44px; scroll-margin-top:160px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  overflow:hidden; box-shadow:var(--shadow-sm)}
.thead,.tr{display:grid; grid-template-columns:minmax(240px,2.4fr) repeat(3,minmax(104px,1fr)); align-items:center}
.thead{background:#fff; border-bottom:1px solid var(--line);
  padding:26px 18px 22px; gap:10px}
.th-label{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:15px}
.th-plan{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px}
.th-plan b{font-family:"Plus Jakarta Sans",sans-serif; font-size:14.5px}
.th-plan .btn{padding:7px 14px; font-size:13px; width:100%; max-width:150px}
.th-plan.pop b{color:var(--brand-2)}

.tgroup{border-top:0}
.tbody{padding:6px 0 10px}
.tbody .tr:first-child{border-top:0}
.tgroup summary{display:flex; align-items:center;
  justify-content:space-between; gap:12px; cursor:pointer; list-style:none;
  padding:16px 18px; background:var(--surface-2);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-top:8px;
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:13.5px;
  letter-spacing:.02em; color:var(--ink)}
.tgroup summary::-webkit-details-marker{display:none}
.tgroup summary em{font-style:normal; font-size:12px; font-weight:600; color:var(--faint)}
.tgroup summary::after{content:""; width:8px; height:8px; margin-left:auto; order:3;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform .18s}
.tgroup[open] summary::after{transform:rotate(225deg)}
.tgroup summary em{order:2}

.tr{padding:12px 18px; border-top:1px solid var(--line-soft); gap:10px; min-height:48px}
.tr:nth-child(even){background:#FCFDFF}
.th{min-width:0}
.rl{display:block; font-size:14px; font-weight:600; color:var(--ink); line-height:1.35}
.rd{display:block; font-size:12.4px; color:var(--faint); line-height:1.4; margin-top:2px}
.tc{text-align:center; font-size:13px}
.yes{display:inline-block; width:17px; height:17px; border-radius:50%; background:var(--grad);
  position:relative; vertical-align:middle}
.yes::after{content:""; position:absolute; left:5px; top:6px; width:6px; height:3px;
  border-left:1.7px solid #fff; border-bottom:1.7px solid #fff; transform:rotate(-45deg)}
/* Not included. Same 17px box as .yes so the columns stay aligned, but drawn as
   two bars rather than filled, because a solid grey disc in the negative column
   carries as much weight as the tick and the table stops reading at a glance.
   Drawn rather than typed: a multiplication sign is fine but an em dash would
   trip the copy guard, and this keeps both markers on the same geometry. */
.no{display:inline-block; width:17px; height:17px; position:relative; vertical-align:middle}
.no::before,.no::after{content:""; position:absolute; left:3px; top:7.6px; width:11px;
  height:1.8px; border-radius:1px; background:#AFB8CE}
.no::before{transform:rotate(45deg)}
.no::after{transform:rotate(-45deg)}
.val{color:var(--brand-2); font-weight:600; font-size:12.6px; line-height:1.3; display:inline-block}
.tnote{margin-top:16px; text-align:center; font-size:13.5px; color:var(--faint)}

@media (max-width:860px){
  .ctable{overflow-x:auto}
  .thead,.tr{grid-template-columns:minmax(190px,2fr) repeat(3,minmax(88px,1fr)); min-width:620px}
  .th-plan .btn{display:none}
}

/* ---- footer (matches the production site's structure) ---- */
/* Footer brand column: logo above the social row. Declared explicitly rather
   than relying on the grid, so the intent survives a layout change. */
.f-brand{display:flex; flex-direction:column; align-items:flex-start}

/* Currency flag in the pricing selector. The src is swapped by script, so the
   class needs a rule of its own rather than inheriting from a parent selector. */
.flag{width:20px; height:14px; object-fit:cover; border-radius:2px; flex:0 0 auto}

footer{background:var(--footer-bg); color:#94A3B8; padding:64px 0 0; margin-top:96px}
.f-top{display:grid; gap:44px; grid-template-columns:1fr; padding-bottom:52px}
.f-logo{height:34px; width:auto}
.f-social{display:flex; gap:12px; margin-top:28px}
.f-social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.07);
  display:flex; align-items:center; justify-content:center; transition:background .18s}
.f-social a:hover{background:rgba(255,255,255,.16)}
.f-social img{width:19px; height:19px}
.f-cols{display:grid; gap:34px 26px; grid-template-columns:repeat(2,minmax(0,1fr))}
.fcol h5{margin:0 0 16px; font-family:"Plus Jakarta Sans",sans-serif; font-size:13px;
  font-weight:700; color:#64748B; letter-spacing:.02em}
.fcol a{display:block; padding:6px 0; font-size:14.5px; color:#CBD5E1; line-height:1.45}
.fcol a:hover{color:#fff}
.f-bottom{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:24px 0 30px; border-top:1px solid rgba(255,255,255,.08); font-size:14px; color:#64748B}
.f-legal{display:flex; gap:26px}
.f-legal a:hover{color:#fff}
@media (min-width:720px){ .f-cols{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1024px){ .f-top{grid-template-columns:250px 1fr; gap:56px} }


/* ---- capability grid: many short capabilities, scannable ---- */
.capgrid{display:grid; gap:1px; margin-top:44px; background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--r-lg); overflow:hidden;
  grid-template-columns:1fr}
.capitem{background:#fff; padding:24px 26px}
.capitem h4{margin:0 0 7px; font-family:"Plus Jakarta Sans",sans-serif; font-size:15.5px;
  font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.capitem p{font-size:14.5px; color:var(--muted); line-height:1.55}
.capitem .tag-new{display:inline-block; margin-left:8px; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--grad);
  padding:2px 7px; border-radius:999px; vertical-align:middle}

/* ---- mid page CTA band ---- */
.ctaband{margin-top:56px; display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:30px 34px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--grad-soft)}
.ctaband p{margin:0; font-family:"Plus Jakarta Sans",sans-serif; font-weight:700;
  font-size:1.15rem; letter-spacing:-.015em; color:var(--ink)}
.ctaband span{display:block; margin-top:5px; font-family:Inter,sans-serif; font-weight:400;
  font-size:14.5px; color:var(--muted); letter-spacing:0}
.ctaband .actions{margin:0; justify-content:flex-start}

@media (min-width:640px){ .capgrid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .capgrid{grid-template-columns:repeat(3,1fr)} }

/* ---- demo request page ---- */
/* Multi-select chips. Checkboxes are easier to answer than a long dropdown and
   give sales a clearer read than free text, at almost no extra friction. */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
.chip{position:relative; display:inline-flex}
.chip input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.chip span{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px;
  border:1px solid var(--line); background:#fff; font-size:14px; font-weight:600; color:var(--ink-2);
  cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.chip span::before{content:""; width:14px; height:14px; border-radius:5px; flex:0 0 auto;
  border:1.5px solid var(--faint); transition:background .15s, border-color .15s}
.chip:hover span{border-color:var(--faint)}
.chip input:checked + span{border-color:var(--brand-2); background:var(--grad-soft); color:var(--ink)}
.chip input:checked + span::before{background:var(--brand-2); border-color:var(--brand-2);
  background-image:linear-gradient(45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%),
                   linear-gradient(-45deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
  background-size:8px 2px, 8px 2px; background-position:3px 8px, 3px 8px; background-repeat:no-repeat}
.chip input:focus-visible + span{box-shadow:0 0 0 3px rgba(79,95,232,.2)}
@media (max-width:520px){ .chip span{padding:8px 12px; font-size:13.5px} }

/* Two step booking: details first, calendar second. Capturing the lead before
   the calendar means an abandoned booking still leaves a contact behind. */
.steps-bar{display:flex; gap:8px; margin-bottom:20px}
.steps-bar span{flex:1; height:4px; border-radius:99px; background:var(--line)}
.steps-bar span.on{background:var(--grad)}
.step-label{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--brand-2); font-family:"Plus Jakarta Sans",sans-serif; margin-bottom:8px}
.step[hidden]{display:none}
.step-back{background:none; border:0; padding:0; margin-top:16px; font:inherit; font-size:14px;
  font-weight:600; color:var(--muted); cursor:pointer}
.step-back:hover{color:var(--ink)}
.booked-as{margin:0 0 16px; padding:12px 14px; border-radius:10px; background:var(--grad-soft);
  border:1px solid #D9DEF8; font-size:14px; color:var(--ink-2)}
.booked-as b{font-weight:700}

/* Cal.com inline embed. It needs real height or it collapses, and its own
   scroller must not fight the page scroller on a phone. */
.cal-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:12px; box-shadow:var(--shadow-lg); overflow:hidden}
#my-cal-inline-book-demo{width:100%; min-height:660px; overflow:auto;
  -webkit-overflow-scrolling:touch}
.cal-fallback{margin-top:22px; border:1px solid var(--line); border-radius:var(--r); background:#fff}
.cal-fallback summary{padding:16px 20px; font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:700; font-size:15px; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:12px}
.cal-fallback summary::-webkit-details-marker{display:none}
.cal-fallback summary::after{content:""; width:8px; height:8px; flex:0 0 auto;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform .2s}
.cal-fallback[open] summary::after{transform:rotate(225deg)}
.cal-fallback .fb-body{padding:0 20px 22px}
.cal-fallback .fb-body > p{font-size:14.5px; color:var(--muted); margin-bottom:4px}
@media (max-width:640px){ #my-cal-inline-book-demo{min-height:560px} }

.demo-grid{display:grid; gap:40px; grid-template-columns:1fr; align-items:start; margin-top:44px}
.demo-copy h1{font-size:clamp(2.2rem,4.4vw,3.2rem); text-wrap:balance}
.demo-copy .lede{margin-top:20px; max-width:52ch}
.steps{margin:34px 0 0; padding:0; list-style:none; display:grid; gap:18px}
.steps li{display:flex; gap:16px; align-items:flex-start}
.steps b{flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--grad); color:#fff;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center}
.steps h4{margin:0 0 3px; font-family:"Plus Jakarta Sans",sans-serif; font-size:16px; font-weight:700}
.steps p{font-size:15px; color:var(--muted); line-height:1.55}
.assure{margin-top:32px; padding-top:26px; border-top:1px solid var(--line); display:grid; gap:11px}
.assure div{position:relative; padding-left:28px; font-size:14.8px; color:var(--ink-2)}
.assure div::before{content:""; position:absolute; left:4px; top:8px; width:7px; height:3.5px;
  border-left:2px solid var(--brand-2); border-bottom:2px solid var(--brand-2); transform:rotate(-45deg)}

.demo-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-lg)}
.demo-card h2{font-size:1.5rem}
.demo-card > p{margin-top:8px; font-size:14.8px; color:var(--muted)}
.field{margin-top:16px}
.field label{display:block; font-size:13.5px; font-weight:600; color:var(--ink-2); margin-bottom:6px}
.field label span{color:var(--faint); font-weight:500}
.field input,.field select,.field textarea{width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:88px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand-2);
  box-shadow:0 0 0 3px rgba(79,95,232,.16)}
.field-row{display:grid; gap:14px; grid-template-columns:1fr}
.demo-card .btn{width:100%; margin-top:22px}
.form-note{margin-top:14px; font-size:13px; color:var(--faint); text-align:center; line-height:1.5}
.form-error{margin-top:16px; padding:12px 14px; border-radius:10px; font-size:14.5px;
  background:#FEF3F2; border:1px solid #FECDCA; color:#B42318}

/* Field level feedback. Telling someone their address is wrong at submit time,
   after they have filled in everything else, is the worst moment to say it. */
.field-note{display:none; margin-top:7px; font-size:13.5px; line-height:1.45; color:#B42318}
.field-note.show{display:block}
.field input.invalid,.field select.invalid{border-color:#F97066}
.field input.invalid:focus{box-shadow:0 0 0 3px rgba(249,112,102,.18)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

@media (max-width:640px){
  .demo-grid{gap:30px; margin-top:30px}
  .demo-card{padding:22px 18px; border-radius:16px}
  .demo-copy h1{font-size:clamp(1.9rem,7.5vw,2.4rem)}
  .demo-copy .lede{margin-top:16px}
  .steps{margin-top:26px; gap:16px}
  .steps b{width:26px; height:26px; font-size:13px}
  .assure{margin-top:26px; padding-top:22px}
  .cal-card{padding:8px}
  .steps-bar{margin-bottom:16px}
}
@media (min-width:640px){ .field-row{grid-template-columns:1fr 1fr} }
@media (min-width:980px){
  /* The card used to be fixed at 620px here and 700px above 1200px, which left
     the argument column 280px to 368px and broke the headline over four lines.
     The calendar still needs room, so the card keeps most of its width but the
     copy column is no longer starved. */
  .demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,520px); gap:44px}
}
@media (min-width:1200px){ .demo-grid{grid-template-columns:minmax(0,1fr) 600px; gap:56px} }

/* ---- rate tables ---- */
.rate-tools{display:flex; flex-direction:column; gap:16px; align-items:center; margin-top:34px}
.rate-find{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; width:100%}
/* Region filter. The chips wrap onto a second line rather than scrolling sideways,
   because a horizontal scroller hides the regions a visitor is looking for. */
.rate-chips{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; padding:4px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); max-width:100%}
.rate-chip{font:inherit; font-size:14.5px; font-weight:600; color:var(--ink-2); cursor:pointer;
  padding:9px 18px; border:0; border-radius:999px; background:transparent; white-space:nowrap;
  transition:background .15s ease, color .15s ease}
.rate-chip:hover{background:rgba(40,49,130,.06); color:var(--ink)}
.rate-chip.is-on{background:var(--ink); color:#fff}
.rate-chip:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}
.rate-search{position:relative; flex:1 1 320px; max-width:420px}
.rate-search input{width:100%; font:inherit; font-size:15.5px; padding:12px 14px; border:1px solid var(--line);
  border-radius:10px; background:#fff}
.rate-search input:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 3px rgba(79,95,232,.16)}
.rate-count{font-size:14px; color:var(--faint)}
.rate-wrap{margin-top:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  overflow:hidden; box-shadow:var(--shadow-sm)}
.rate-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.rate-table{width:100%; border-collapse:collapse; min-width:640px; font-size:14.5px}
.rate-table th{position:sticky; top:0; background:var(--surface); text-align:left; padding:14px 18px;
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:12.5px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); white-space:nowrap}
.rate-table th small{display:block; font-weight:500; text-transform:none; letter-spacing:0;
  font-size:11.5px; color:var(--faint); margin-top:2px}
.rate-table td{padding:12px 18px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.rate-table tr:last-child td{border-bottom:0}
.rate-table tbody tr:hover td{background:#FCFDFF}
.rate-table .cty{font-weight:600; color:var(--ink)}
.cty-in{display:flex; align-items:center; gap:10px}
/* One sprite instead of 54 SVGs. Cells are stacked vertically, so the offset is
   the cell index times its height. The sprite is drawn at 2x for sharpness. */
.flag{flex:none; width:24px; height:18px; border-radius:3px;
  background-image:url(/assets/flags.png); background-size:24px auto;
  background-position:0 calc(var(--f) * -18px);
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.14)}
.rate-table .num{font-variant-numeric:tabular-nums; color:var(--ink-2)}
.rate-na{color:var(--faint); font-size:13px}
.rate-empty{padding:40px; text-align:center; color:var(--faint)}
.rate-note{margin-top:16px; font-size:13px; color:var(--faint); text-align:center; line-height:1.55}

/* ---- comparison calculator ---- */
.calc{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--shadow-md); margin-top:44px}
.calc-controls{display:grid; gap:24px; grid-template-columns:1fr}
.calc-control label{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:10px}
.calc-control label b{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.35rem; font-weight:800;
  letter-spacing:-.02em; color:var(--ink)}
.calc-cols{display:grid; gap:18px; margin-top:30px; grid-template-columns:1fr}
.calc-col{border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--surface)}
.calc-col.win{background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  border:1.6px solid transparent; box-shadow:var(--shadow-md)}
.calc-col h4{margin:0 0 4px; font-family:"Plus Jakarta Sans",sans-serif; font-size:1.05rem; font-weight:800}
.calc-col .sub{font-size:13px; color:var(--faint); margin-bottom:16px}
.calc-line{display:flex; justify-content:space-between; gap:14px; padding:8px 0;
  font-size:14.5px; color:var(--ink-2); border-bottom:1px dashed var(--line)}
.calc-line span:last-child{font-weight:600; color:var(--ink); white-space:nowrap}
.calc-total{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line)}
.calc-total b{font-family:"Plus Jakarta Sans",sans-serif; font-size:2rem; font-weight:800;
  letter-spacing:-.03em; line-height:1}
.calc-col.win .calc-total b{background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent}
.tier{display:inline-block; margin-top:10px; font-size:11.5px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:#fff; background:var(--grad); padding:4px 10px; border-radius:999px;
  font-family:"Plus Jakarta Sans",sans-serif}
.savings{margin-top:24px; padding:24px; border-radius:var(--r); text-align:center;
  background:var(--grad-soft); border:1px solid #D9DEF8}
.savings .n{font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(2rem,4.5vw,2.9rem);
  font-weight:800; letter-spacing:-.03em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.savings .y{margin-top:8px; font-size:15px; color:var(--muted)}
.calc-note{margin-top:16px; font-size:12.8px; color:var(--faint); text-align:center; line-height:1.5}

/* ---- feature comparison ---- */
.vs-table{margin-top:44px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:#fff; overflow:hidden; box-shadow:var(--shadow-sm)}
.vs-row{display:grid; grid-template-columns:minmax(180px,2fr) 1fr 1fr; align-items:center;
  gap:12px; padding:13px 18px; border-top:1px solid var(--line-soft); font-size:14.5px}
.vs-row:first-child{border-top:0; background:var(--surface); font-family:"Plus Jakarta Sans",sans-serif;
  font-weight:800; font-size:13px}
.vs-row div:nth-child(n+2){text-align:center}
.vs-row .rl{font-weight:600; color:var(--ink)}
.vs-yes{display:inline-block; width:18px; height:18px; border-radius:50%; background:var(--grad);
  position:relative; vertical-align:middle}
.vs-yes::after{content:""; position:absolute; left:5px; top:6px; width:7px; height:3px;
  border-left:1.8px solid #fff; border-bottom:1.8px solid #fff; transform:rotate(-45deg)}
.vs-no{color:var(--faint); font-size:13px}
.vs-cost{color:var(--brand-2); font-weight:600; font-size:13px}

@media (min-width:760px){ .calc-controls{grid-template-columns:1fr 1fr} .calc-cols{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .vs-table{overflow-x:auto} .vs-row{min-width:520px} .calc{padding:20px 16px} }

/* ---- article prose ----
   Styles the rich text exactly as it comes out of the CMS. The body carries
   tables, blockquotes and figures, so all of them need a home here. */
.article{max-width:760px; margin:0 auto}
.article-head{max-width:760px; margin:0 auto; text-align:left}
.article-head h1{font-size:clamp(2rem,4.4vw,3rem); text-wrap:balance; margin-top:16px}
.article-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:24px;
  padding-top:22px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted)}
.article-meta b{color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700}
.article-meta .dot{width:3px; height:3px; border-radius:50%; background:var(--faint)}
.article-cover{margin:36px auto 0; max-width:900px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-md)}
.article-cover img{width:100%; display:block}

.prose{font-size:17.5px; line-height:1.75; color:var(--ink-2)}
.prose > *:first-child{margin-top:0}
.prose h2{font-size:clamp(1.5rem,3vw,1.95rem); margin:44px 0 14px; color:var(--ink); letter-spacing:-.022em}
.prose h3{font-size:clamp(1.2rem,2.2vw,1.4rem); margin:34px 0 12px; color:var(--ink)}
.prose h4{font-size:1.1rem; margin:28px 0 10px; color:var(--ink); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700}
.prose p{margin:0 0 18px}
.prose a{color:var(--brand-2); font-weight:500; text-decoration:underline; text-underline-offset:2px}
.prose a:hover{color:var(--brand)}
.prose strong{color:var(--ink); font-weight:700}
.prose ul,.prose ol{margin:0 0 20px; padding-left:22px}
.prose li{margin-bottom:9px}
.prose li::marker{color:var(--faint)}
.prose img{max-width:100%; height:auto; border-radius:var(--r); margin:26px 0; border:1px solid var(--line)}
.prose figure{margin:28px 0}
.prose figcaption{margin-top:9px; font-size:14px; color:var(--faint); text-align:center}
.prose blockquote{margin:26px 0; padding:18px 24px; border-left:3px solid var(--brand-2);
  background:var(--surface); border-radius:0 var(--r) var(--r) 0; color:var(--ink);
  font-family:"Plus Jakarta Sans",sans-serif; font-weight:600; font-size:1.05rem}
.prose blockquote p:last-child{margin-bottom:0}
/* Tables are common in these posts and must not blow out the column on a phone. */
.prose .table-scroll{overflow-x:auto; margin:26px 0; border:1px solid var(--line);
  border-radius:var(--r); -webkit-overflow-scrolling:touch}
.prose table{border-collapse:collapse; width:100%; min-width:520px; font-size:15px}
.prose th,.prose td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft)}
.prose th{background:var(--surface); font-family:"Plus Jakarta Sans",sans-serif; font-weight:700;
  color:var(--ink); white-space:nowrap}
.prose tr:last-child td{border-bottom:0}
.prose hr{border:0; border-top:1px solid var(--line); margin:36px 0}

/* ---- blog index ---- */
.post-grid{display:grid; gap:24px; margin-top:44px; grid-template-columns:1fr}
.post-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s}
.post-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.post-card .thumb{aspect-ratio:16/9; background:var(--surface-2); overflow:hidden}
.post-card .thumb img{width:100%; height:100%; object-fit:cover; display:block}
.post-card .body{padding:22px; display:flex; flex-direction:column; flex:1}
.post-card .cat{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand-2); font-family:"Plus Jakarta Sans",sans-serif}
.post-card h3{margin:10px 0 8px; font-size:1.08rem; line-height:1.4}
.post-card p{color:var(--muted); font-size:14.5px; flex:1}
.post-card .meta{margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:13px; color:var(--faint)}
.pager{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:48px; flex-wrap:wrap}
.pager a,.pager span{padding:9px 14px; border-radius:9px; border:1px solid var(--line);
  font-size:14.5px; font-weight:600; background:#fff; color:var(--ink-2)}
.pager a:hover{border-color:var(--faint)}
.pager .cur{background:var(--grad); color:#fff; border-color:transparent}
.pager .gap{border:0; background:none; color:var(--faint)}
.cats{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:26px}
.cats a{padding:8px 15px; border-radius:999px; border:1px solid var(--line); background:#fff;
  font-size:14px; font-weight:600; color:var(--ink-2)}
.cats a.on{background:var(--grad); color:#fff; border-color:transparent}

@media (min-width:680px){ .post-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1040px){ .post-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .prose{font-size:16.5px} .article-cover{border-radius:var(--r)} }

/* ---- customer story cards ----
   Each story leads with the post's own cover image. Cards built around a small
   brand logo looked empty, because only two of the seven brands have a mark we
   hold. */
.story-grid{display:grid; gap:24px; margin-top:48px; grid-template-columns:1fr}
.story{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s}
.story:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.story .cover{position:relative; aspect-ratio:16/10; background:var(--surface-2); overflow:hidden}
.story .cover img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease}
.story:hover .cover img{transform:scale(1.03)}
/* The brand sits on the image as a white chip, the same treatment as the logo
   wall, so a logo and a wordmark both read consistently. */
.story .brand{position:absolute; left:14px; bottom:14px; display:flex; align-items:center;
  gap:8px; height:40px; padding:0 14px; background:#fff; border-radius:10px;
  box-shadow:0 2px 8px rgba(10,14,39,.18)}
.story .brand img{max-height:22px; max-width:92px; width:auto; object-fit:contain}
.story .brand span{font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:14px;
  letter-spacing:-.01em; color:var(--ink); white-space:nowrap}
.story .body{padding:24px; display:flex; flex-direction:column; flex:1}
.story .kicker{font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--brand-2); font-family:"Plus Jakarta Sans",sans-serif}
.story h3{margin:10px 0 9px; font-size:1.12rem; line-height:1.38}
.story p{color:var(--muted); font-size:14.8px; flex:1}
.story .go{margin-top:18px; font-weight:600; font-size:14.5px; color:var(--brand-2)}

/* ---- press: boilerplate and brand assets ----
   The boilerplate is set narrow because it exists to be read once and copied,
   and a full-width paragraph at this length is hard to scan. */
.boiler{max-width:820px; margin:40px auto 0; background:#fff; border:1px solid var(--line);
  border-left:3px solid var(--brand-2); border-radius:var(--r-lg); padding:28px 30px;
  box-shadow:var(--shadow-sm)}
.boiler p{color:var(--ink); font-size:16.5px; line-height:1.72}
.kit{display:grid; gap:20px; margin-top:44px; grid-template-columns:1fr}
.kitem{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm);
  transition:transform .18s, box-shadow .18s}
.kitem:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.kimg{display:flex; align-items:center; justify-content:center; height:132px; margin-bottom:18px;
  background:var(--surface-2); border-radius:var(--r); overflow:hidden}
.kimg img{max-width:72%; max-height:66%; width:auto; object-fit:contain}
.kimg-dark{background:#101828}
.kimg-txt span{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:14px;
  color:var(--muted)}
.kitem b{font-family:"Plus Jakarta Sans",sans-serif; font-size:15.5px; letter-spacing:-.01em;
  color:var(--ink)}
.kmeta{margin-top:5px; font-size:14px; color:var(--muted)}

.partner-hero{display:grid; gap:34px; align-items:center; grid-template-columns:1fr; margin-top:44px}
.partner-mark{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:40px; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm)}
.partner-mark img{max-height:76px; max-width:230px; width:auto; object-fit:contain}

@media (min-width:700px){ .story-grid{grid-template-columns:repeat(2,1fr)}
  .kit{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .story-grid{grid-template-columns:repeat(3,1fr)}
  .partner-hero{grid-template-columns:300px 1fr; gap:52px} }

/* ---- sub page hero ---- */
/* The sub-hero used to end flush with its last line of text. On the 21 pages
   where an .alt section follows, .alt's top border therefore landed directly on
   that line. The sub-hero now owns 56px of the gap the next section used to own
   entirely, so the boundary moves down without changing the overall rhythm. */
.sub-hero{position:relative; overflow:hidden; padding:72px 0 56px; text-align:center}
.sub-hero + section{padding-top:36px}
.sub-hero::before{content:""; position:absolute; inset:-300px 0 auto; height:640px; z-index:-1;
  background:radial-gradient(54% 48% at 50% 46%, rgba(120,89,248,.15), transparent 70%),
             radial-gradient(40% 38% at 78% 26%, rgba(34,199,238,.14), transparent 70%)}
.sub-hero h1{margin:20px auto 0; max-width:19ch; text-wrap:balance}
.sub-hero .lede{margin:22px auto 0; max-width:58ch}

/* ---------- about: story page ---------- */
/* The about page is prose, not product cards, so it gets a reading column
   rather than a grid. Sitting the photo directly under the hero gives the
   story a subject before it starts talking. */
.story-media{padding-block:48px 4px}
.story-photo{margin:0; border-radius:24px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 24px 60px -34px rgba(16,24,40,.5)}
.story-photo img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
/* Named about-story because .story is already the customer story card. */
.about-story{max-width:720px; margin:0 auto}
.about-story h2:first-child{margin-top:0}

.investors-block{max-width:900px; margin:62px auto 0; text-align:center}
.investors-label{margin:0; font-family:"Plus Jakarta Sans",sans-serif; font-size:12.5px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
/* Chips are sized to the logo the way the client marquee is, because these
   marks arrive at four different aspect ratios and stacked marks need height
   that wordmarks do not. */
.investors{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:22px}
.investors figure{margin:0; flex:0 0 auto; width:206px; height:104px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(16,24,40,.06); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .18s ease, box-shadow .18s ease}
.investors figure:hover{transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(16,24,40,.36)}
.investors img{max-height:54px; max-width:150px; width:auto; object-fit:contain}
/* A stacked mark spends half its height on the icon, so matching the wordmarks
   on height makes its name unreadable. It gets height instead. */
.investors .stacked img{max-height:76px}
@media (max-width:640px){
  .story-media{padding-block:32px 4px}
  .story-photo{border-radius:16px}
  .investors figure{width:calc(50% - 7px); height:88px}
  .investors img{max-height:44px; max-width:78%}
  .investors .stacked img{max-height:62px}
}

/* ---------- integration logo strip ---------- */
/* Sized to the mark like the client marquee, because these arrive at very
   different aspect ratios and a fixed box makes the small ones look lost. */
.logorow{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:44px auto 0; max-width:820px}
.logorow figure{margin:0; flex:0 0 auto; width:190px; height:92px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid rgba(16,24,40,.06); border-radius:16px;
  box-shadow:0 1px 2px rgba(16,24,40,.06);
  transition:transform .18s ease, box-shadow .18s ease}
.logorow figure:hover{transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(16,24,40,.36)}
.logorow img{max-height:38px; max-width:132px; width:auto; object-fit:contain}
/* These marks run from 1.4:1 to 4.8:1. Matching them on height alone leaves the
   squat ones looking half the size of the wide ones, so height is set by shape
   to even out the visual mass. */
.logorow .squat img{max-height:52px}
.logorow .wide img{max-height:30px}
.logorow .more{background:var(--surface); border-style:dashed; border-color:var(--line)}
.logorow .more span{font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:14px;
  color:var(--muted); text-align:center; line-height:1.35; padding:0 14px}
@media (max-width:640px){
  .logorow{gap:10px; margin-top:34px}
  .logorow figure{width:calc(50% - 5px); height:78px}
  .logorow img{max-height:28px; max-width:76%}
}

@media (max-width:720px){
  /* Back to a stacked card, with the label and its value sharing a line. The
     rows have to be stated: the desktop rules pin the slider to row 1, which
     otherwise leaves it stacked above its own label. */
  .volume{grid-template-columns:1fr; row-gap:8px}
  .volume-top{display:flex; align-items:center; justify-content:space-between; gap:12px;
    flex-wrap:wrap; grid-column:1; grid-row:1}
  .volume input[type=range]{grid-column:1; grid-row:2}
  .volume-scale{grid-column:1; grid-row:3}
}

/* ---------- tooltip ---------- */
/* A light panel with its own header and close button, matching the explainer
   the Webflow page used. Opens on click, not hover: a hover tooltip cannot be
   reached on a touch screen. */
.tip{position:relative; display:inline-flex; vertical-align:middle; margin-left:6px}
.tip-btn{display:inline-flex; padding:0; border:0; background:none; cursor:pointer; color:var(--faint);
  border-radius:50%; line-height:0}
.tip-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.tip-btn:hover{color:var(--brand-2)}
.tip-btn:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}

/* Positioned fixed and placed by script from the button's rect. It cannot be
   absolute: .p-hero carries overflow:hidden to contain its gradient, which
   clipped the panel so only its header was visible. Fixed also avoids fighting
   the pricing cards for stacking order. */
.tip-box{position:fixed; left:0; top:0;
  width:min(430px,86vw); background:#fff; color:var(--ink-2); text-align:left; font-weight:400;
  border:1px solid var(--line); border-radius:16px;
  box-shadow:0 26px 60px -22px rgba(10,14,39,.42); z-index:40; overflow:hidden;
  opacity:0; visibility:hidden; transition:opacity .14s ease, transform .14s ease}
.tip.open .tip-box{opacity:1; visibility:visible}

.tip-head{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line-soft)}
.tip-head b{font-family:"Plus Jakarta Sans",sans-serif; font-size:15px; font-weight:700; color:var(--ink)}
.tip-close{display:inline-flex; padding:4px; margin:-4px; border:0; background:none; cursor:pointer;
  color:var(--faint); border-radius:8px; line-height:0}
.tip-close svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.tip-close:hover{color:var(--ink)}
.tip-close:focus-visible{outline:2px solid var(--brand-2); outline-offset:2px}

.tip-body{display:block; padding:14px 16px 16px; font-size:13.6px; line-height:1.6}
.tip-body span{display:block}
.tip-body span + span{margin-top:11px}

@media (max-width:640px){
  /* A sheet pinned to the bottom of the screen, so a narrow viewport cannot
     push it off the edge and it stays within thumb reach. */
  .tip-box{left:12px !important; right:12px; bottom:12px; top:auto !important; width:auto;
    max-height:70vh; overflow:auto}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  /* The badge sat on one line and the claim wrapped under it, which left the
     chip looking like a circle with the words stacked inside. */
  .pill{align-items:center; text-align:left; padding:7px 12px 7px 7px; gap:9px; line-height:1.4;
    max-width:calc(100% - 8px)}

  /* The header CTA crowded the logo and the burger, and both calls to action
     already sit inside the menu and in the hero. */
  .nav-right .btn{display:none}
  .burger{margin-left:auto}

  /* Pricing and a demo, before the four sections of menu. */
  .mm-quick{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px}
  .mm-quick a{display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 10px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
    font-family:"Plus Jakarta Sans",sans-serif; font-weight:700; font-size:15px; color:var(--ink)}
  .mm-quick a:active{background:#EDF0F7}
  .mm-quick .mi{width:26px; height:26px; border-radius:8px; background:#fff}
  .mm-quick .mi svg{width:15px; height:15px}
}
@media (max-width:640px){
  /* Thumb sized targets. Footer links were 33px tall in a dense list, the
     currency select 18px and the info icon 16px, all under a comfortable tap. */
  .fcol a{padding-block:11px}   /* .fcol a is a class, so plain footer a loses */
  .cur{padding-block:7px}
  .cur select{min-height:30px}
  /* Legal links in the footer bottom bar, and the calculator sliders on the
     comparison pages, were the last targets under a comfortable tap. */
  .f-legal a{display:inline-block; padding-block:10px}
  input[type=range]{height:26px}

  /* The plans are taller than a phone screen, so by the time you reach Growth
     the volume control has scrolled away and there is no way to see the price
     change. It now pins under the header while the cards scroll past. */
  .volume{position:sticky; top:72px; z-index:20; margin-top:0;
    box-shadow:0 10px 24px -18px rgba(16,24,40,.5)}
  .pcards{margin-top:18px}
  .tip-btn{padding:7px; margin:-7px}
  .volume input[type=range]{height:26px}
}
@media (max-width:640px){
  /* The comparison table scrolled sideways with the feature names inside the
     scroll, so the labels were sliced off and a row told you nothing. Columns
     are sized to fit a 390px screen instead, and the label column is pinned so
     it stays readable on anything narrower. */
  .thead,.tr{grid-template-columns:96px repeat(3,minmax(0,1fr)); min-width:0; gap:4px}
  .tr{padding:11px 10px}
  .tr .th{position:sticky; left:0; z-index:2; background:inherit;
    padding-right:6px; box-shadow:8px 0 8px -8px rgba(16,24,40,.16)}
  .tr:nth-child(even) .th{background:#FCFDFF}
  .tr:nth-child(odd) .th{background:#fff}
  .rl{font-size:12.8px}
  .rd{font-size:11.4px; margin-top:1px}
  /* A grid item will not shrink below its content by default, so the values
     spilled across each other and read as "UnlimitedUnlimitedUnlimited". */
  .tc{font-size:12px; min-width:0}
  /* Long values have no space to wrap at, so they need a break opportunity.
     The column is now wide enough that "Unlimited" fits on one line, so this
     only bites on genuinely long strings such as "$45/number". */
  .val{display:block; font-size:10.2px; line-height:1.25; white-space:normal; overflow-wrap:break-word}
  .yes,.no{width:15px; height:15px}
  .no::before,.no::after{left:2px; top:6.6px; width:11px}

  /* The plan header has to line up with those columns, and its buttons were
     wider than the column they sit in. */
  .thead{padding:16px 10px 14px; gap:4px}
  .th-label{font-size:13px}
  .th-plan b{font-size:12.2px; line-height:1.2}
  .th-plan{gap:6px}
  .th-plan .btn{padding:6px 4px; font-size:11px; max-width:100%}
  .tgroup summary{padding:13px 10px; font-size:12.6px}
}

/* ---------- inline application form ---------- */
/* Used by any content page that carries spec.apply, so a partner programme can
   collect applications without its own page. */
.applybox{max-width:720px; margin:44px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:34px; box-shadow:var(--shadow-sm)}
.applybox .head{margin-bottom:26px}
.applyform .field-row{display:grid; gap:16px; grid-template-columns:1fr 1fr}
.applyform .field{margin-top:16px}
.applyform .btn{width:100%; margin-top:22px}
.applybox #apply-done h3{font-family:"Plus Jakarta Sans",sans-serif; font-size:1.25rem}
.applybox #apply-done p{margin-top:10px; color:var(--muted)}
@media (max-width:640px){
  .applybox{padding:22px 18px; border-radius:16px; margin-top:34px}
  .applyform .field-row{grid-template-columns:1fr; gap:0}
}