/* ==========================================================================
   call.9flg.com — the calling product's own website.

   A separate stylesheet from 9flg.com on purpose. This is a PRODUCT site and it
   is judged against the products it sits beside in a search result, so it wears
   that shape: a floating pill header with a mega-menu, a serif display face, a
   centred hero, and a section rhythm that repeats the same call to action.

   Every colour is a variable. The palette is the FLG one — the brand red from
   the logo, ink navy, generous white — so the product site and the group site
   are visibly the same company.
   ========================================================================== */
:root{
  --ink:#0A1628; --ink2:#48546B; --muted:#7A8496;
  --red:#C0202A; --red-d:#9C161F; --red-soft:#FDF2F2; --red-line:#F6DADC;
  --gold:#C89B3C;
  --line:#E8EBF0; --bg:#fff; --soft:#F7F8FA; --navy:#0A1628; --navy2:#16273F;
  --ok:#1B8A5A;
  --disp:"Instrument Serif",Georgia,"Times New Roman",serif;
  --head:"Plus Jakarta Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:18px; --rs:12px; --rp:999px;
  --sh:0 2px 4px rgba(10,22,40,.03), 0 12px 32px rgba(10,22,40,.07);
  --sh-lg:0 24px 70px rgba(10,22,40,.16);
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d)}
p{margin:0 0 1em;color:var(--ink2)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:-.015em;line-height:1.06;margin:0 0 .35em}
h1{font-size:clamp(2.5rem,5.4vw,4.4rem)}
h2{font-size:clamp(2rem,3.6vw,3rem)}
h3{font-family:var(--head);font-size:1.07rem;font-weight:700;letter-spacing:-.012em;
  line-height:1.3;margin:0 0 .45em;color:var(--ink)}
.accent{color:var(--red)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--head);
  font-size:.7rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--red);background:var(--red-soft);border:1px solid var(--red-line);
  padding:7px 16px;border-radius:var(--rp);margin-bottom:22px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.secthead{max-width:720px;margin:0 auto 44px;text-align:center}
.secthead p{font-size:1.06rem}
/* The section label. A bordered box rather than loose lettering: the reference
   boxes every one of its section labels, and that single detail is most of what
   makes a page read as designed instead of as a document with subheadings. */
.kicker{display:inline-block;font-family:var(--head);font-size:.68rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:18px;
  border:1px solid var(--line);border-radius:7px;padding:6px 13px;background:#fff}

/* buttons ---------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--head);font-weight:700;font-size:.95rem;padding:13px 26px;
  border-radius:var(--rp);background:var(--red);color:#fff;border:1px solid var(--red);
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;
  transform:translateY(-1px);box-shadow:0 10px 24px rgba(192,32,42,.28)}
.btn.outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.outline:hover{background:#fff;color:var(--red);border-color:var(--red);box-shadow:var(--sh)}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:#fff;color:var(--red);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.btn.sm{padding:9px 18px;font-size:.88rem}

/* announcement ----------------------------------------------------------- */
.announce{background:var(--navy);color:#fff;font-size:.88rem;position:relative;z-index:80}
.announce .wrap{display:flex;align-items:center;justify-content:center;gap:10px;
  padding:11px 52px;text-align:center;flex-wrap:wrap}
.announce a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.announce a:hover{color:#fff;opacity:.85}
.announce .x{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  background:none;border:0;color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;
  opacity:.7;padding:4px 8px}
.announce .x:hover{opacity:1}
.announce.gone{display:none}

/* header ----------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:70;padding:14px 0 0;background:transparent}
.hdr .bar{max-width:var(--max);margin:0 auto;background:#fff;border:1px solid var(--line);
  border-radius:var(--rp);box-shadow:var(--sh);display:flex;align-items:center;
  gap:18px;padding:10px 12px 10px 22px;
  /* the mega-menu hangs off THIS, not off the menu item — anchored to the item
     it ran off the left edge of the screen, because a 980px panel centred on a
     link 300px from the left has nowhere to go */
  position:relative}
.hdr .logo{display:flex;align-items:center;gap:10px;font-family:var(--head);
  font-weight:800;font-size:1.12rem;color:var(--ink);letter-spacing:-.02em;flex:0 0 auto}
.hdr .logo img{height:34px;width:auto}
.hdr .logo b{color:var(--red);font-weight:800}
.nav{display:flex;align-items:center;gap:4px;margin:0 auto;list-style:none;padding:0}
/* static, so the mega-menu below resolves against the header bar instead */
.nav>li{position:static}
.nav>li>a,.nav>li>button{font-family:var(--head);font-weight:600;font-size:.95rem;
  color:var(--ink);background:none;border:0;cursor:pointer;padding:10px 14px;
  display:inline-flex;align-items:center;gap:6px;border-radius:10px;font-family:var(--head)}
.nav>li>a:hover,.nav>li>button:hover,.nav>li.on>a{color:var(--red);background:var(--red-soft)}
.nav .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.55;transition:transform .2s ease}
.nav li:hover .caret{transform:rotate(180deg)}
.hdrcta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hdrcta .signin{font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--ink);padding:10px 12px}
.hdrcta .signin:hover{color:var(--red)}

/* mega-menu -------------------------------------------------------------- */
.mega{position:absolute;top:calc(100% + 12px);left:0;right:0;transform:translateY(-8px);
  background:#fff;border:1px solid var(--line);border-radius:22px;
  box-shadow:var(--sh-lg);padding:22px;opacity:0;visibility:hidden;transition:.18s ease;
  z-index:75}
.nav>li:hover .mega,.nav>li:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.megagrid{display:grid;grid-template-columns:270px 1fr;gap:20px}
.megarail{list-style:none;margin:0;padding:0}
.megarail>li>a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  font-family:var(--head);font-weight:600;font-size:.95rem;color:var(--ink)}
.megarail>li>a:hover,.megarail>li.sel>a{background:var(--red-soft);color:var(--red)}
.megarail .dot{width:26px;height:26px;border-radius:50%;background:var(--red-soft);
  border:1px solid var(--red-line);flex:0 0 auto;display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:var(--red);font-family:var(--head)}
.megarail small{display:block;font-weight:500;font-size:.78rem;color:var(--muted);line-height:1.35}
/* One panel per rail, stacked in the same grid cell; only the picked one shows.
   Stacked rather than hidden-and-reflowed so the menu keeps ONE height and does
   not jump as the pointer runs down the rail. */
.megarail{grid-column:1;grid-row:1}
.megapanel{grid-column:2;grid-row:1;background:var(--red-soft);border:1px solid var(--red-line);
  border-radius:16px;padding:18px;display:none}
.megapanel.sel{display:block}
.megarail .dot svg,.megaitems .sq svg{width:15px;height:15px;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.megalead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fff;border:1px solid var(--red-line);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.megalead b{font-family:var(--head);font-size:1rem;display:block;color:var(--ink)}
.megalead span{font-size:.84rem;color:var(--ink2)}
.megalead .go{color:var(--red);font-size:1.2rem;flex:0 0 auto}
.megaitems{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;list-style:none;margin:0;padding:0}
.megaitems a{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--ink)}
.megaitems a:hover{background:#fff;color:var(--red)}
.megaitems .sq{width:26px;height:26px;border-radius:8px;background:var(--red);flex:0 0 auto;
  display:grid;place-items:center;color:#fff;font-size:.7rem;font-weight:800;font-family:var(--head)}
.megafoot{margin-top:18px;background:linear-gradient(100deg,var(--navy),var(--navy2));
  border-radius:16px;padding:20px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.megafoot p{margin:0;color:#fff;font-family:var(--disp);font-size:1.32rem;line-height:1.25}
/* brand red on navy fails contrast — the emphasis is a warm tint instead */
.megafoot p b{color:#FFD9DB;font-weight:400}

/* burger + drawer -------------------------------------------------------- */
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);background:#fff;
  border-radius:12px;cursor:pointer;position:relative}
.burger span,.burger::before,.burger::after{content:"";position:absolute;left:11px;right:11px;
  height:2px;background:var(--ink);border-radius:2px}
.burger::before{top:14px}.burger span{top:20px}.burger::after{top:26px}
.drawer{position:fixed;inset:0;background:rgba(10,22,40,.45);z-index:90;display:none}
.drawer.open{display:block}
.dpanel{position:absolute;right:0;top:0;bottom:0;width:min(400px,90vw);background:#fff;
  padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.dhead{display:flex;align-items:center;justify-content:space-between}
/* The drawer wears the same logo as the header, but the size rule was scoped
   `.hdr .logo img` — so in here the mark drew at its natural width and ate the
   top third of the panel, with "Calling" knocked onto its own line and turned
   red by the default link colour. Same size and same row as the header. */
.dhead .logo{display:flex;align-items:center;gap:10px;font-family:var(--head);
  font-weight:800;font-size:1.12rem;color:var(--ink);letter-spacing:-.02em}
.dhead .logo img{height:34px;width:auto}
.dclose{background:none;border:0;font-size:2rem;line-height:1;cursor:pointer;color:var(--ink)}
.dpanel nav ul{list-style:none;margin:0;padding:0}
.dpanel nav a{display:block;padding:11px 4px;font-family:var(--head);font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}
.dpanel summary{padding:11px 4px;font-family:var(--head);font-weight:700;cursor:pointer;
  border-bottom:1px solid var(--line);color:var(--ink)}
.dpanel details ul{padding-left:14px}
.dpanel details a{font-weight:500;font-size:.94rem;color:var(--ink2)}
.dfoot{margin-top:auto;display:grid;gap:10px}

/* hero ------------------------------------------------------------------- */
.hero{padding:64px 0 40px;text-align:center;
  background:radial-gradient(1000px 460px at 50% -12%,var(--red-soft),transparent 65%)}
.hero h1{max-width:16ch;margin:0 auto .28em}
.hero .sub{font-family:var(--disp);font-size:clamp(1.3rem,2.4vw,1.95rem);color:var(--ink);
  line-height:1.25;max-width:30ch;margin:0 auto .8em}
.hero .lede{font-size:1.06rem;color:var(--ink2);max-width:56ch;margin:0 auto 26px}
.herocta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.freeline{font-size:.9rem;color:var(--muted);margin-bottom:26px}
.freeline a{font-weight:600}
.proofrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
.proofchip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--rp);padding:8px 16px;font-size:.87rem;font-weight:600;font-family:var(--head);
  color:var(--ink);box-shadow:var(--sh)}
.proofchip .tickmark{color:var(--ok);font-weight:800}

/* the numbers that close the fold. Deliberately quieter than the buttons above
   it — the reference site greys its logo wall right down for the same reason,
   so proof reassures without competing with the thing it wants pressed. The row
   wraps to two lines on a phone rather than shrinking the numbers. */
.heroproof{margin-bottom:34px}
.heroproof-lead{font-size:.82rem;color:var(--muted);letter-spacing:.02em;margin:0 0 14px}
/* A GRID, not a flex row. Flex-wrap put three numbers on one line and the
   fourth alone underneath, which reads as a mistake rather than a set. Four
   equal columns keep them one line on a desktop and a tidy 2x2 on a phone. */
.heroproof-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 24px;
  max-width:760px;margin:0 auto;align-items:start}
.heroproof-item{display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:.8rem;color:var(--muted);line-height:1.3;text-align:center}
.heroproof-item b{font-family:var(--disp);font-size:1.6rem;font-weight:600;color:var(--ink);
  line-height:1}
@media(max-width:620px){
  .heroproof-row{grid-template-columns:repeat(2,1fr);gap:18px}
  .heroproof-item{font-size:.75rem}
  .heroproof-item b{font-size:1.35rem}
}

/* hero sign-up (used where the page IS the advert) ----------------------- */
/* CENTRE, not start. With align-items:start the short left column (245px) sat
   against a 564px form and pooled ~300px of empty white beneath itself — at some
   scroll positions the whole window was blank. Centring splits that space either
   side of the text so there is no dead block anywhere. */
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;
  text-align:left}
.herogrid h1{margin-left:0;max-width:none}
.signupcard{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;
  box-shadow:var(--sh-lg)}
.signupcard h3{font-size:1.25rem;font-family:var(--disp);font-weight:400}
.signupcard label{display:block;font-family:var(--head);font-size:.83rem;font-weight:600;
  color:var(--ink2);margin-bottom:12px}
.signupcard input{width:100%;margin-top:5px;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:.95rem;background:var(--soft)}
.signupcard input:focus{outline:2px solid var(--red);outline-offset:1px;background:#fff}
.signupcard button{width:100%;margin-top:4px}
.signupcard .dim{font-size:.79rem;color:var(--muted);margin:12px 0 0;line-height:1.5}

/* sections --------------------------------------------------------------- */
section{padding:72px 0}
section.soft{background:var(--soft)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:var(--ink2)}
.ticks li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;
  border-radius:50%;background:var(--red-soft);border:1px solid var(--red-line)}
.ticks li::after{content:"";position:absolute;left:5px;top:.62em;width:5px;height:9px;
  border:solid var(--red);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* pills strip */
.pills{background:var(--navy);padding:16px 0}
.pills .wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  border-radius:var(--rp);padding:7px 16px;font-size:.85rem;font-family:var(--head);font-weight:600}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;text-align:center;
  box-shadow:var(--sh)}
.stat b{display:block;font-family:var(--disp);font-size:clamp(2.1rem,3.8vw,3rem);color:var(--red);
  line-height:1;margin-bottom:8px;font-weight:400}
.stat span{font-family:var(--head);font-size:.87rem;font-weight:600;color:var(--ink2)}

/* card grids */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* A set of four is 2x2, never 3 and a lonely one. */
.cards.four{grid-template-columns:repeat(2,1fr);max-width:980px;margin:0 auto}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--sh);transition:transform .18s ease,box-shadow .18s ease;
  display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
/* Plain lettering, not a pill. The icon above it is already a tinted rounded
   box, so a filled badge directly beneath it stacked TWO pink rectangles in the
   same corner of all six cards and the eye read the packaging before the words.
   The reference sets this label as bare uppercase for exactly that reason. */
.card .tag{display:inline-block;align-self:flex-start;font-family:var(--head);font-size:.68rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  margin-bottom:10px}
.card p{font-size:.95rem;margin-bottom:1em}
/* The whole card is the link, and the link is lettering.
   It used to be a bordered pill at the bottom of every card, which meant each
   card offered the same destination twice — the arrow in the top corner and a
   button underneath — while the 90% of the card between them was dead to the
   mouse. The reference makes the entire card the target and shows only the
   arrow. `::before` stretches this anchor over the card, so the text stays for
   a screen reader and for anyone who wants to read where they are going. */
.card{position:relative}
.card .go{margin-top:auto;align-self:flex-start;font-family:var(--head);font-weight:700;
  font-size:.87rem;color:var(--ink);transition:color .15s ease}
.card .go::before{content:"";position:absolute;inset:0;border-radius:var(--r)}
.card:hover .go{color:var(--red)}
.card .go::after{content:" →"}

/* ...except in the chooser, where the label IS the decision.
   Flattening every card link to lettering was right for the product grid — the
   card is the link there and a button underneath said the same thing twice. It
   was wrong here: "Start free", "Book a demo" and "Talk to us" are three
   different offers to three different buyers, and they went out as the palest
   text on the page. They are buttons again, the first one filled, because the
   reference fills only its cheapest way in and outlines the two that need a
   salesperson. No arrow — a button already looks pressable. */
.sec-who-its-for .card .go{border:1px solid var(--line);border-radius:var(--rp);
  padding:11px 22px;background:#fff;transition:.15s ease}
.sec-who-its-for .card .go::after{content:""}
.sec-who-its-for .card:hover .go{border-color:var(--red);color:var(--red);box-shadow:var(--sh)}
.sec-who-its-for .card:first-child .go{background:var(--red);border-color:var(--red);color:#fff}
.sec-who-its-for .card:first-child:hover .go{background:var(--red-d);border-color:var(--red-d);
  color:#fff;box-shadow:0 10px 24px rgba(192,32,42,.28)}

/* icon top-left, arrow top-right — the reference's card head */
.cardtop{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;
  min-height:44px}
/* margin-left:auto, not just space-between. On a card that has a link but NO
   icon the arrow was the only child of .cardtop, so space-between had nothing
   to push against and it sat at the top LEFT — where the icon belongs. */
.arrow{color:var(--red);font-size:1.05rem;opacity:.55;margin-left:auto;
  transition:transform .18s ease,opacity .18s ease}
.card:hover .arrow{opacity:1;transform:translateX(3px)}
.ico{width:44px;height:44px;border-radius:13px;background:var(--red-soft);border:1px solid var(--red-line);
  display:grid;place-items:center;flex:0 0 auto}
.ico svg{width:23px;height:23px;fill:none;stroke:var(--red);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:38px;height:38px;border-radius:11px;margin-bottom:13px}
.ico.sm svg{width:20px;height:20px}

/* numbered services */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--sh)}
.step .n{font-family:var(--disp);font-size:2.4rem;color:var(--red);line-height:1;margin-bottom:10px}
.step .n span{font-size:1rem;color:var(--muted)}

/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trustitem{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.trustitem b{display:block;font-family:var(--head);font-size:1rem;margin-bottom:6px}
.trustitem span{font-size:.9rem;color:var(--ink2)}

/* marquee */
.marq{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marqtrack{display:flex;gap:14px;width:max-content;animation:slide 42s linear infinite}
.chip{background:#fff;border:1px solid var(--line);border-radius:var(--rp);padding:10px 22px;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--ink2);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marqtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* breadcrumb ------------------------------------------------------------- */
.crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;
  font-family:var(--head);font-size:.8rem;font-weight:600;margin-bottom:18px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs span{color:var(--ink)}
.crumbs i{font-style:normal;color:var(--line);font-size:1rem}
.hero.split .crumbs{justify-content:flex-start}

/* product-page hero: pitch left, a drawing of that product right ---------- */
.hero.split{text-align:left;padding-bottom:56px}
.herotwo{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero.split h1{max-width:none;margin-left:0;font-size:clamp(2.1rem,3.7vw,3.3rem)}
.hero.split .sub{margin-left:0;max-width:34ch;font-size:clamp(1.15rem,1.9vw,1.5rem)}
.hero.split .lede{margin-left:0}
.hero.split .herocta,.hero.split .proofrow{justify-content:flex-start}
.hero.split .freeline{text-align:left}
.hero.split .heroproof,.hero.split .heroproof-row{text-align:left;justify-content:flex-start}
.heropanel{position:relative}
.heropanel::before{content:"";position:absolute;inset:-24px -16px;border-radius:28px;
  background:radial-gradient(560px 280px at 55% 15%,var(--red-soft),transparent 72%)}
.chipst{margin-left:auto;flex:0 0 auto;font-family:var(--head);font-weight:700;
  font-size:.71rem;padding:5px 11px;border-radius:var(--rp);white-space:nowrap;
  background:var(--soft);color:var(--muted)}
.chipst.ok{background:rgba(27,138,90,.1);color:var(--ok)}
.chipst.busy{background:var(--red-soft);color:var(--red)}
.chipst.idle{background:rgba(200,155,60,.14);color:#8A6A22}
.heropanel .winrow:last-child{border-bottom:0}

/* showcase — words beside a drawing of the product ----------------------- */
.show{display:grid;grid-template-columns:.92fr 1.08fr;gap:52px;align-items:center}
.show.flip .showtext{order:2}
.showtext h2{margin-bottom:.3em}
.showtext .lede{font-size:1.05rem}
.showtext .ticks{margin:0 0 26px}
.showpanel{position:relative}
.showpanel::before{content:"";position:absolute;inset:-26px -18px;border-radius:28px;
  background:radial-gradient(600px 300px at 60% 20%,var(--red-soft),transparent 70%)}
.win{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh-lg);overflow:hidden}
.winbar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--soft);
  border-bottom:1px solid var(--line)}
.winbar span{width:9px;height:9px;border-radius:50%;background:#D9DEE7}
.winbar em{margin-left:10px;font-style:normal;font-family:var(--head);font-size:.76rem;
  font-weight:600;color:var(--muted)}
.winrow{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.winrow b{display:block;font-family:var(--head);font-size:.95rem;color:var(--ink)}
.winrow small{font-size:.78rem;color:var(--muted)}
.avat{width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;flex:0 0 auto;
  display:grid;place-items:center;font-family:var(--head);font-weight:800;font-size:.82rem}
.pillok{margin-left:auto;flex:0 0 auto;background:rgba(27,138,90,.1);color:var(--ok);
  font-family:var(--head);font-weight:700;font-size:.72rem;padding:5px 11px;border-radius:var(--rp)}
.wincard{margin:14px 18px;padding:13px 15px;border:1px solid var(--line);border-radius:12px}
.wincard:last-child{margin-bottom:18px}
.wincard.done{background:var(--red-soft);border-color:var(--red-line)}
.wch{display:flex;align-items:center;gap:7px;font-family:var(--head);font-size:.68rem;
  font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.dotred{width:7px;height:7px;border-radius:50%;background:var(--red)}
.waveline{display:flex;align-items:flex-end;gap:3px;height:38px}
.waveline i{flex:1;background:var(--red);opacity:.45;border-radius:2px;min-width:2px}
.wtx{margin:0 0 7px;font-size:.86rem;color:var(--ink2);line-height:1.5}
.wtx:last-child{margin-bottom:0}
.wtx b{color:var(--ink);font-family:var(--head);font-weight:700}

/* marketplace — category rail + searchable tiles -------------------------- */
.market{display:grid;grid-template-columns:236px 1fr;gap:32px;align-items:start}
/* ☠️ A grid item is min-width:auto, so it refuses to shrink below its own
   min-content. The category rail scrolls sideways on a phone, and its
   min-content is the whole row of categories — so the rail would not shrink,
   the column went 731px wide inside a 375px screen, and the PAGE scrolled
   sideways by 380px. overflow-x on the list is not enough; the ITEM needs
   permission to be narrower than its contents. */
.market>*{min-width:0}
.mkrail h4{font-family:var(--head);font-size:.68rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.mksearch input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.92rem;background:#fff}
.mksearch input:focus{outline:2px solid var(--red);outline-offset:1px}
.mkrail ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mkrail button{width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--head);font-weight:600;font-size:.9rem;color:var(--ink2);
  padding:9px 12px;border-radius:9px}
.mkrail button:hover{background:var(--soft);color:var(--ink)}
.mkrail button.on{background:var(--red-soft);color:var(--red)}
.mkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:start}
.mktile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;
  box-shadow:var(--sh);transition:transform .16s ease,box-shadow .16s ease}
.mktile:hover{transform:translateY(-2px);box-shadow:var(--sh-lg)}
.mktile[hidden]{display:none}
.mktop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.mktop .ico{width:38px;height:38px;border-radius:11px}
.mktop .ico b{font-family:var(--head);font-weight:800;color:var(--red);font-size:.95rem}
.mktop .ico svg{width:20px;height:20px}
.mkcat{font-family:var(--head);font-size:.62rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.mktile h3{font-size:1rem;margin-bottom:.3em}
.mktile p{font-size:.87rem;margin:0}
.mknone{grid-column:1/-1;padding:26px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r)}

/* integrations panel ----------------------------------------------------- */
.intpanel{background:linear-gradient(135deg,#FFF4E8,#FDECEC);border:1px solid var(--red-line);
  border-radius:26px;padding:40px;display:grid;grid-template-columns:.85fr 1.15fr;
  gap:40px;align-items:center}
.intpanel .kicker{background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.9)}
.intpanel h2{margin-bottom:.35em}
.intpanel p{color:var(--ink2)}
.inttiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.inttiles li{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid rgba(255,255,255,.9);
  border-radius:13px;padding:13px 15px;font-family:var(--head);font-weight:600;font-size:.9rem;
  color:var(--ink);box-shadow:0 2px 10px rgba(10,22,40,.05)}
.ini{width:30px;height:30px;border-radius:9px;background:var(--red-soft);color:var(--red);
  border:1px solid var(--red-line);flex:0 0 auto;display:grid;place-items:center;
  font-family:var(--head);font-weight:800;font-size:.82rem}
.ini svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

/* The counted result under an AI card's claim. Deliberately quiet — it is
   evidence for the sentence above it, not a headline of its own. */
.result{display:inline-block;margin-top:12px;padding:5px 12px;border-radius:999px;
  background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);
  font-family:var(--head);font-weight:700;font-size:.76rem;letter-spacing:.01em}

/* voices */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  box-shadow:var(--sh);margin:0}
.voice blockquote{margin:0 0 16px;font-family:var(--disp);font-size:1.16rem;line-height:1.42;color:var(--ink)}
.voice figcaption b{display:block;font-family:var(--head);font-size:.92rem}
.voice figcaption span{font-size:.83rem;color:var(--muted)}
.sample{display:inline-block;font-family:var(--head);font-size:.64rem;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);
  border-radius:var(--rp);padding:3px 10px;margin-bottom:12px}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--rs);margin-bottom:12px;
  box-shadow:var(--sh)}
.faq summary{padding:18px 22px;font-family:var(--head);font-weight:700;cursor:pointer;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.4rem;font-weight:400;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .body{padding:0 22px 20px;color:var(--ink2)}

/* cta band */
.ctaband{background:linear-gradient(100deg,var(--navy),var(--navy2));color:#fff;text-align:center}
.ctaband h2{color:#fff}
.ctaband p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 24px}

/* enquiry panel */
.talkgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:var(--sh)}
.formcard .field{display:block;margin-bottom:14px}
.formcard .field span{display:block;font-family:var(--head);font-size:.83rem;font-weight:600;
  color:var(--ink2);margin-bottom:5px}
.formcard input,.formcard textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:12px;font:inherit;font-size:.95rem;background:var(--soft)}
.formcard input:focus,.formcard textarea:focus{outline:2px solid var(--red);outline-offset:1px;background:#fff}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sidecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--sh);margin-bottom:14px}
.notice{background:var(--red-soft);border:1px solid var(--red-line);border-radius:12px;padding:14px 16px;
  margin-bottom:16px;font-family:var(--head);font-weight:600;font-size:.92rem}

/* index of child pages */
.index{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

/* pricing ---------------------------------------------------------------- */
.pricectl{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;
  box-shadow:var(--sh);margin-bottom:10px}
.seg{display:inline-flex;align-items:center;gap:4px;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--rp);padding:4px}
.seg button{border:0;background:none;font-family:var(--head);font-weight:700;font-size:.86rem;
  color:var(--ink2);padding:8px 16px;border-radius:var(--rp);cursor:pointer}
.seg button.on{background:var(--ink);color:#fff}
.save{background:var(--red-soft);border:1px solid var(--red-line);color:var(--red);
  font-family:var(--head);font-weight:700;font-size:.76rem;padding:5px 12px;border-radius:var(--rp);
  margin-left:6px}
.ctl{display:inline-flex;align-items:center;gap:9px;font-family:var(--head);font-weight:600;
  font-size:.86rem;color:var(--ink2)}
.ctl select{font:inherit;font-size:.88rem;padding:8px 12px;border:1px solid var(--line);
  border-radius:10px;background:#fff;color:var(--ink)}
.ctlnote{text-align:center;font-size:.88rem;color:var(--muted);margin:0 0 34px}

.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;
  box-shadow:var(--sh);position:relative;display:flex;flex-direction:column}
.tier.pick{border-color:var(--red);box-shadow:0 18px 46px rgba(192,32,42,.16)}
.poptag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--red);
  color:#fff;font-family:var(--head);font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 14px;border-radius:var(--rp);white-space:nowrap}
.tier .who{font-size:.85rem;color:var(--muted);margin:0 0 16px;min-height:2.6em}
.tier .fig{margin-bottom:18px;min-height:64px}
.tier .fig b{font-family:var(--disp);font-size:2.5rem;font-weight:400;color:var(--ink);
  line-height:1;display:block}
.tier .fig .free{color:var(--ok)}
.tier .fig .per{font-size:.8rem;color:var(--muted)}
.tier .btn{width:100%}
.tierfeat{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
  display:grid;gap:9px;font-size:.89rem;color:var(--ink2)}
.tierfeat li{position:relative;padding-left:22px}
.tierfeat li::before{content:"✓";position:absolute;left:0;top:0;color:var(--red);font-weight:800}
.pricenote{list-style:none;margin:26px auto 0;padding:0;max-width:760px;display:grid;gap:8px;
  font-size:.88rem;color:var(--muted);text-align:center}

/* comparison table */
.cmpwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  box-shadow:var(--sh)}
.cmp{width:100%;border-collapse:collapse;min-width:680px;font-size:.9rem}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-family:var(--head);font-size:.74rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);background:var(--soft);white-space:nowrap}
.cmp tbody th{font-family:var(--head);font-weight:600;color:var(--ink);width:38%}
.cmp tbody th small{display:block;font-weight:400;font-size:.8rem;color:var(--muted)}
.cmp td{text-align:center;color:var(--ink2)}
.cmp .yes{color:var(--ok);font-weight:800}
.cmp .no{color:var(--muted)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}

/* footer ----------------------------------------------------------------- */
footer{background:var(--navy);color:rgba(255,255,255,.72);padding:64px 0 30px;font-size:.92rem}
footer h4{font-family:var(--head);font-size:.72rem;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:#fff;margin:0 0 16px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer a{color:rgba(255,255,255,.72)}
footer a:hover{color:#fff}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px}
.fbrand{font-family:var(--head);font-weight:800;font-size:1.2rem;color:#fff;margin-bottom:12px;
  display:flex;align-items:center;gap:10px}
.fbrand img{height:34px;width:auto}
.fbrand b{color:var(--red)}
/* The comparison strip: one row of links across the footer, above the rule. */
.fcompare{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:22px}
.fcompare h4{font-family:var(--head);font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 12px}
.fcompare ul{display:flex;flex-wrap:wrap;gap:8px 10px;list-style:none;margin:0;padding:0}
.fcompare li a{display:inline-block;padding:6px 12px;border-radius:999px;font-size:.84rem;
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8)}
.fcompare li a:hover{border-color:rgba(255,255,255,.4);color:#fff}
.frule{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:22px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.85rem}

/* sticky phone bar ------------------------------------------------------- */
.stickybar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:85;background:#fff;
  border-top:1px solid var(--line);padding:9px 12px;gap:9px;
  box-shadow:0 -6px 22px rgba(10,22,40,.12)}
.stickybar a{flex:1;text-align:center;padding:12px 6px;border-radius:12px;font-family:var(--head);
  font-weight:700;font-size:.9rem;border:1px solid var(--line);color:var(--ink)}
.stickybar a.solid{background:var(--red);color:#fff;border-color:var(--red)}

/* reveal ----------------------------------------------------------------- */
.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* ------------------------------------------------------------------ phone */
@media(max-width:1060px){
  .nav,.hdrcta .signin,.hdrcta .btn.outline{display:none}
  .burger{display:block}
  .hdr .bar{padding:10px 12px 10px 16px}
}
@media(max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .cards,.steps,.voices,.index{grid-template-columns:repeat(2,1fr)}
  .tiers{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .herogrid{grid-template-columns:1fr;gap:30px}
  .show,.intpanel,.herotwo,.market{grid-template-columns:1fr;gap:32px}
  .mkgrid{grid-template-columns:repeat(2,1fr)}
  .mkrail ul{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px}
  .show.flip .showtext{order:0}
  .talkgrid{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  section{padding:52px 0}
  .hero{padding:40px 0 28px}
  /* .cards.four is TWO class names, so it outranks a bare .cards here and a
     set of four stayed two columns on a phone — 155px wide, three words to a
     line. Name it explicitly or it never collapses. */
  .cards,.cards.four,.steps,.voices,.index,.trust,.tiers{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pricectl{flex-direction:column;align-items:stretch;gap:12px}
  .pricectl .ctl{justify-content:space-between}
  .frow{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr}
  .mkgrid{grid-template-columns:1fr}
  .intpanel{padding:26px 20px;border-radius:20px}
  .inttiles{grid-template-columns:1fr}
  .showpanel::before{display:none}
  .herocta .btn{width:100%}
  .stickybar{display:flex}
  body{padding-bottom:70px}
  .announce .wrap{padding:10px 44px;font-size:.82rem}
}