/* ---------- Inter, self-hosted (OFL 1.1), variable weight ---------- */
@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
}
@font-face{
  font-family:"Inter var";
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin-wght-italic.woff2) format("woff2");
}

/* ============================================================
   TheAnalyst PRO — public site, Home page
   Design system built to the supplied brand specification:
   red #A83236 · gray #475362 · navy #132156 · Inter / Helvetica
   ============================================================ */
:root{
  --navy:#132156;
  --red:#A83236;
  --gray:#475362;
  --paper:#ffffff;
  --paper-2:#F7F8FA;
  --line:#E3E7EF;
  --sans:"Inter var","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:var(--sans);
  --fs-h1:clamp(32px,3.3vw,47px);
  --fs-h2:clamp(27px,3.7vw,53px);
  --fs-h3:clamp(20px,1.5vw,22px);
  --fs-lead:clamp(19px,1.8vw,25px);
  --fs-body:18px;
  --fs-nav:15px;
  --wrap:1280px;
  --pad:32px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--gray);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3,h4{color:var(--navy);margin:0;letter-spacing:-.018em}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.1}
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.14;font-family:var(--display)}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.28}
p{margin:0}
a{color:var(--navy);text-decoration:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:17px;font-weight:700;line-height:1;
  padding:17px 30px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn svg{flex:0 0 auto;transition:transform .22s ease}
.btn:hover svg{transform:translateX(4px)}
/* neutral navy-tinted shadow, not a red one: a red glow under the button reads
   as pink, and the client asked for no pink anywhere on the site (8/20) */
.btn-red{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(19,33,86,.20)}
.btn-red:hover{background:#93292d;transform:translateY(-1px);box-shadow:0 10px 24px rgba(19,33,86,.26)}
.btn-navy{background:var(--navy);color:#fff}
/* outlined variant: inset ring rather than a border, so the box size
   stays identical to the filled buttons beside it */
.btn-outline{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}
.btn-navy:hover{background:#0d1740;transform:translateY(-1px)}
.link-ex{
  display:inline-flex;align-items:center;gap:10px;
  font-style:italic;font-size:17px;color:var(--navy);font-weight:500;
  /* These are the way into every pillar page, and the text was the whole hit
     area - 23-28px against the 44px floor on a phone (audit, 8/25). The padding
     grows the target; the matching negative margin takes it back out of the
     layout, so nothing on any page moves. */
  padding-block:11px;margin-block:-11px;
}
.link-ex svg{transition:transform .22s ease}
.link-ex:hover{color:var(--red)}
.link-ex:hover svg{transform:translateX(4px)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:3px solid var(--navy);
}
/* the header runs nearly edge to edge, per the supplied header design: the
   logo sits ~3% from the left and the CTA pair the same from the right,
   rather than lining up with the 1280px content container */
/* The header is fluid between roughly 1024px and 1440px: padding, gaps, logo,
   nav type and CTA padding all tighten together as the window narrows. That is
   what lets a 1276px viewport (a 15" MacBook at its default scaling) still show
   the real nav instead of a burger, without any label wrapping. */
.site-head .wrap{max-width:1720px;padding:0 clamp(18px,2.2vw,56px)}
.head-in{display:flex;align-items:center;gap:clamp(16px,1.9vw,34px);height:96px}
/* client-supplied transparent logo (8/17), so no plate to blend away.
   Enlarged on client request (8/20): 56 -> 72px in the same 96px bar, which
   widens the mark ~41px and is why the burger threshold moved to 1280. */
.brand img{height:clamp(58px,4.8vw,72px);width:auto}   /* 72px stands from ~1500px up */
.nav{display:flex;align-items:center;gap:clamp(15px,1.7vw,26px);margin-left:auto}
/* a two-line "USE / CASES" is worse than collapsing to the burger, so never
   let a nav label or a header CTA wrap */
.nav a,.head-cta{white-space:nowrap}
.nav a{
  font-size:clamp(14px,1.12vw,var(--fs-nav));font-weight:600;text-transform:uppercase;
  letter-spacing:.045em;color:var(--navy);position:relative;padding:6px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--red);transition:right .24s ease;
}
.nav a:hover::after{right:0}
.head-ctas{display:flex;align-items:center;gap:clamp(8px,0.9vw,12px);margin-left:clamp(4px,0.6vw,8px)}
.head-cta{font-size:clamp(14px,1.1vw,16px);padding:13px clamp(15px,1.9vw,26px)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#fff 0%,var(--paper-2) 100%);overflow:hidden}
/* height tied to width, so the art box keeps a near-constant shape and the
   framing holds from 1280 up to a very wide monitor */
.hero-in{display:flex;align-items:center;min-height:clamp(620px,44vw,900px)}
.hero-copy{position:relative;z-index:2;max-width:660px;padding:78px 0}
.hero h1{text-wrap:balance}
.hero .lead{
  font-size:var(--fs-lead);color:var(--navy);font-weight:400;
  line-height:1.4;margin-top:26px;
}
.hero .body{margin-top:26px;max-width:50ch}
.hero .cta{margin-top:34px}
.kicker{
  display:block;margin-top:30px;font-style:italic;font-weight:700;
  font-size:19px;color:var(--navy);
}
.hero-art{position:absolute;top:0;right:0;bottom:0;width:58%;max-width:1180px;z-index:1;overflow:hidden}
/* One image, one long fade - the mockup dissolves the photograph into the page
   rather than butting it against an edge. The ramp starts at 0 and does not
   reach full opacity until 62%, which is what keeps it from reading as a seam. */
.hero-art img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 54%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.32) 24%,#000 62%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.32) 24%,#000 62%);
}

/* ---------- section shell ---------- */
.sec{padding:96px 0}
.sec-2{background:var(--paper-2)}
.sec h2.center{margin:0 auto}
.sub{
  margin:20px auto 0;text-align:center;
  font-size:20px;line-height:1.5;color:var(--gray);
}

/* ---------- feature grid ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:52px 64px;margin-top:64px}
.fcard{display:grid;grid-template-columns:296px 1fr;gap:30px;align-items:start}
.fcard .shot{
  width:296px;height:178px;object-fit:cover;border-radius:3px;
  box-shadow:0 3px 14px rgba(19,33,86,.14);
  transition:transform .25s ease,box-shadow .25s ease;
}
.fcard:hover .shot{transform:translateY(-3px);box-shadow:0 10px 24px rgba(19,33,86,.2)}
.fcard .link-ex{margin-top:18px}
.feat-foot{display:flex;justify-content:flex-end;margin-top:58px}

/* ---------- role band ---------- */
/* the band's people reach past the container by design, so the section that
   holds it clips: otherwise they add a horizontal scrollbar at viewport widths
   near the container width (~1024-1280) where the auto margins run out */
.clip-figs{overflow:hidden}
/* One scene, not a composite. The supplied graphic is cropped once, so every
   figure keeps the scale and seat it was drawn at — cutting it into three
   pieces is what made the trio read as a second, nearer table. The mockup's
   baked labels are covered by a live white plate (the oval interior is white,
   so the plate cannot be seen) and the real labels are laid over it, which
   keeps them translatable, searchable and linkable. */
.roleband{position:relative;container-type:inline-size;margin-top:52px}
.roleband .scene{width:100%;height:auto}
.pill{
  /* No white plate any more. The plate's right edge landed at 83.3% of the
     scene, which is mid-way through the water glass by the woman at the top
     right, so it sliced the glass in half (client, 8/26). The baked labels,
     icon discs and divider lines have instead been painted out of
     role-scene.jpg itself, so the layer carrying the live text can be
     transparent and the artwork underneath survives intact. */
  position:absolute;left:17.3%;top:5.4%;width:66%;height:49.8%;z-index:2;
  background:transparent;display:grid;padding-top:1.2cqw;
  /* the artwork's own column widths, so the live dividers fall where the
     flattened graphic had them */
  grid-template-columns:192fr 231fr 245fr 250fr 185fr;
}
/* no divider rules between the columns: the client asked (8/20) for the thin
   lines lying across the conference table to go */
.role{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 1cqw;
}
.role .ic{
  width:5.1cqw;height:5.1cqw;border-radius:50%;background:var(--navy);
  display:grid;place-items:center;margin:0 auto;
  transition:transform .22s ease;
}
.role:hover .ic{transform:translateY(-3px) scale(1.04)}
.role .ic svg{width:52%;height:52%;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* nowrap keeps every label on the two lines the <br> asks for: "Lenders &
   Loan" is a hair wider than its column and would otherwise break to three,
   dropping its "Learn more" out of line with the rest */
/* h2 as well as h3: the band is an h3 on Home, where an h2 introduces it, and
   an h2 on Use Cases, where it follows the h1 directly and an h3 would skip a
   level (audit, 8/25). weight and line-height are pinned so the two render
   identically - the global h2 would otherwise come in at 800/1.14. */
.role h3,.role h2{margin-top:2.2cqw;font-family:var(--display);font-size:1.92cqw;min-height:2.5em;
  font-weight:700;line-height:1.28;letter-spacing:-.01em;white-space:nowrap}
/* role titles are links as well as the "Learn more" beneath them (client, 8/21) */
.role h3 a.role-link,.role h2 a.role-link{color:inherit;text-decoration:none}
.role h3 a.role-link:hover,.role h2 a.role-link:hover{color:var(--red);text-decoration:underline;text-underline-offset:3px}
.role h3 a.role-link:focus-visible,.role h2 a.role-link:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:3px}
.role .link-ex{margin-top:.5cqw;font-size:1.3cqw;gap:.6cqw;white-space:nowrap}
.role .link-ex svg{width:1.1cqw;height:auto}
.role-foot{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:24px;margin-top:44px;
}
.role-foot .tag{
  grid-column:2;font-family:var(--display);font-weight:700;font-size:25px;
  color:var(--navy);text-align:center;
}
.role-foot .btn{grid-column:3;justify-self:end}

/* ---------- testimonials ---------- */
.tsts{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1240px;margin:60px auto 0}
.tst{text-align:center}
.tst .thumb{
  display:block;position:relative;border-radius:14px;overflow:hidden;
  max-width:330px;width:100%;margin:0 auto;padding:0;border:0;background:none;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(19,33,86,.16);
  transition:transform .25s ease,box-shadow .25s ease;
}
.tst .thumb:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(19,33,86,.24)}
/* One card size for all three (client, 8/25): the supplied stills were 760x668,
   550x515 and 760x667, and height:auto turned that into three different card
   heights. The box is fixed at 4:3 and the image covers it, so a later still of
   any size drops in without changing the grid. The three home stills are cut to
   4:3 at 760x570, so cover has nothing to crop. */
.tst .thumb img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
/* The eight testimonial-page stills are all ~760x667; keep their own ratio so
   the wider home box does not crop 15% off the top and bottom of every face. */
.tsts.eight .thumb img{aspect-ratio:760/667}
/* Play control. The white disc is gone (client, 8/25): it existed only to hide
   the YouTube badge burned into every supplied still, and a circle cannot cover
   a rounded RECTANGLE - the badge's corners leaked red around it on all eight
   cards. The stills are now clean frames pulled from each video (YouTube's own
   thumbnails, Vimeo's posters), so there is nothing left to hide and the mark
   can just be the play arrow. Do not reintroduce a still with a badge in it. */
/* Lower-right corner, not the middle of the face (client, 8/25). Larger than
   the centred mark it replaces, per the same note. It stays visible rather than
   appearing only on hover: hover does not exist on touch, and a card whose only
   affordance is invisible reads as a still photo there. Hover still responds. */
.tst .play{
  position:absolute;right:3.5%;bottom:3.5%;
  width:clamp(48px,17%,66px);aspect-ratio:1;
  display:grid;place-items:center;
  transition:transform .22s ease;
}
.tst .play svg{
  width:100%;height:100%;fill:#fff;
  /* the arrow sits straight on the photograph now, so it carries its own
     contrast rather than borrowing it from a disc */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(0,0,0,.4));
}
.tst .thumb:hover .play,
.tst .thumb:focus-visible .play{transform:scale(1.12)}

/* ---------- dialogs: account login + schedule a demo ---------- */
.modal[hidden]{display:none}
/* flex + margin:auto centres a short dialog but still lets a tall one scroll —
   place-items:center would clip the top of the taller demo form */
.modal{
  position:fixed;inset:0;z-index:130;display:flex;justify-content:center;
  background:rgba(10,16,40,.72);padding:clamp(16px,4vh,52px) 20px;
  overflow:auto;animation:vmIn .18s ease;
}
.modal-box{
  position:relative;margin:auto;width:min(520px,100%);background:#fff;border-radius:16px;
  box-shadow:0 30px 80px rgba(5,10,30,.45);padding:38px 36px 32px;
}
.modal-box.wide{width:min(700px,100%)}
.modal-box h2{font-size:clamp(24px,2.4vw,30px);line-height:1.15}
.modal-sub{margin-top:10px;font-size:17px;line-height:1.5}
.modal-x{
  position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;
  border:0;background:var(--paper-2);color:var(--navy);font-size:22px;line-height:1;
  cursor:pointer;display:grid;place-items:center;
}
.modal-x:hover{background:var(--navy);color:#fff}
.mform{margin-top:24px}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.field-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:4px 0 22px}
.check{display:flex;align-items:center;gap:9px;font-size:15.5px;color:var(--gray)}
.check input{width:17px;height:17px;accent-color:var(--red)}
.small-link{font-size:15px;font-weight:700;color:var(--navy)}
.small-link:hover{color:var(--red)}
.btn.full{width:100%;justify-content:center}
.fs{border:0;padding:0;margin:0 0 18px}
.fs legend{font-size:15px;font-weight:700;color:var(--navy);padding:0;margin-bottom:8px}
.radios.two{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.mform-foot{margin-top:18px;font-size:15.5px;text-align:center}
.mform-foot a{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mform-foot a:hover{color:var(--red)}
.form-status{
  margin-top:16px;padding:12px 14px;border-radius:8px;font-size:15.5px;
  background:#EDF3EC;border-left:3px solid #2F7A44;color:#245C33;
}
/* nothing to say, nothing to show: an empty status still painted its panel */
.form-status:empty{display:none}
/* pinning the body rather than just hiding overflow: overflow:hidden alone
   drops the scroll position, so the page jumped when a dialog opened */
body.modal-open{position:fixed;width:100%;overflow:hidden}
@media (max-width:560px){
  .modal-box{padding:30px 22px 26px}
  .field-2,.radios.two{grid-template-columns:1fr}
}

/* ---------- video modal ---------- */
.vmodal[hidden]{display:none}
.vmodal{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(10,16,40,.72);padding:24px;animation:vmIn .18s ease;
}
@keyframes vmIn{from{opacity:0}to{opacity:1}}
.vmodal-box{
  position:relative;width:min(960px,100%);background:#fff;border-radius:16px;
  overflow:hidden;box-shadow:0 30px 80px rgba(5,10,30,.45);
}
.vframe{position:relative;aspect-ratio:16/9;background:#000}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vmodal-cap{padding:20px 26px 24px}
.vm-name{font-size:21px;font-weight:800;color:var(--navy);line-height:1.25}
.vm-meta{margin-top:4px;font-size:15px;font-weight:700;color:var(--gray)}
.vm-sum{margin-top:12px;font-size:16px;line-height:1.6}
.vm-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:15px;font-weight:700;color:var(--navy)}
.vm-link:hover{color:var(--red)}
.vmodal-x{
  position:absolute;right:12px;top:12px;z-index:2;width:42px;height:42px;
  border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--navy);
  font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(5,10,30,.3);
}
.vmodal-x:hover{background:#fff;color:var(--red)}
.tst .name{margin-top:22px;font-size:24px;font-weight:800;color:var(--navy);line-height:1.2;min-height:2.4em}
.tst .meta{margin-top:8px;font-size:16px;font-weight:700;color:var(--navy);line-height:1.45}
/* 8/14 note: "this is the only button that is navy and centered... let's
   decide which we prefer and apply to all sections". Colour was decided
   (red is Schedule a Demo only); alignment now follows the majority, so
   every section action button sits right, as .feat-foot already did. */
.tsts-foot{display:flex;justify-content:flex-end;margin-top:48px}

/* testimonials page: eight video cards as 4 + 4 rather than the deck's 3 + 3 + 2,
   which would leave an orphan row */
.tsts.eight{grid-template-columns:repeat(4,1fr);gap:46px 28px;max-width:none}
.tsts.eight .thumb{max-width:none}
.tsts.eight .name{font-size:20px;min-height:2.6em}
.tsts.eight .meta{font-size:15px}
@media (max-width:980px){.tsts.eight{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tsts.eight{grid-template-columns:1fr}}

/* written testimonials */
.quotes{margin-top:52px;display:grid}
.quote{
  display:grid;grid-template-columns:132px 1fr;gap:30px;align-items:start;
  padding:32px 0;border-bottom:1px solid var(--line);
}
.quote:last-child{border-bottom:0}
.quote-face img{width:118px;height:118px;border-radius:50%;object-fit:cover;
  box-shadow:0 4px 16px rgba(19,33,86,.18)}
.quote blockquote{margin:0;padding-left:56px;position:relative;font-size:17.5px;line-height:1.65}
.quote blockquote::before{
  content:"\201C";position:absolute;left:0;top:-.18em;
  font-family:Georgia,serif;font-size:64px;line-height:1;color:#8C97AB;
}
.quote .qname{margin-top:14px;padding-left:56px;color:var(--red);font-size:18px;font-weight:700}
.quote .qrole{padding-left:56px;font-size:15.5px;line-height:1.5}
@media (max-width:700px){
  .quote{grid-template-columns:1fr;gap:16px}
  .quote blockquote,.quote .qname,.quote .qrole{padding-left:34px}
  .quote blockquote::before{font-size:48px}
}

/* ---------- partner marquee ---------- */
/* white ground, so multiply erases the white plates several logo files ship
   with — the 8/14 note asked for the plates gone */
.partners{padding:66px 0 84px;background:var(--paper);overflow:hidden}
.partners .eyebrow{
  text-align:center;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray);font-weight:600;
}
.marquee{margin-top:38px;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mtrack{display:flex;align-items:center;gap:76px;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
/* height comes from the per-logo --lh set in the markup; see the note on
   $tap_partners in pages/home.php for how those numbers are derived. No
   max-width any more — the files are trimmed to their ink, so a wordmark's
   width is real content rather than padding. */
.mtrack img{
  height:var(--lh,40px);width:auto;object-fit:contain;
  mix-blend-mode:multiply; /* drops the white plate several logo files ship with */
  filter:grayscale(1);opacity:.88;transition:filter .25s ease,opacity .25s ease;
}
.mtrack img:hover{filter:grayscale(0);opacity:1}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- stat band ---------- */
.stats{background:var(--navy);padding:36px 0}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{text-align:center;padding:6px 20px;border-right:1px solid rgba(255,255,255,.22)}
.stat:last-child{border-right:0}
.stat b{display:block;color:#fff;font-size:clamp(30px,2.9vw,40px);font-weight:800;line-height:1.1}
.stat span{display:block;color:#fff;opacity:.92;font-size:16px;margin-top:6px}

/* ---------- reports ---------- */
.reports{background:linear-gradient(180deg,#fff,var(--paper-2));padding:92px 0 100px;overflow:hidden}
.reports-in{display:grid;grid-template-columns:.88fr 1.12fr;gap:56px;align-items:center}
.rule{width:88px;height:5px;background:var(--red);border-radius:3px;margin:28px 0}
.reports .body{max-width:44ch}
.reports .btn{margin-top:34px}
.fan{position:relative;height:470px}
.fan img{
  position:absolute;left:50%;top:50%;height:400px;width:auto;border-radius:6px;
  box-shadow:0 16px 44px rgba(19,33,86,.22);background:#fff;
  transform-origin:center;transition:transform .55s cubic-bezier(.22,.75,.2,1),opacity .55s ease;
}
.fan-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:10px}
.fan-nav button{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:grid;place-items:center;cursor:pointer;color:var(--navy);
}
.fan-nav button:hover{border-color:var(--navy)}
.dots{display:flex;gap:10px}
.dots i{width:9px;height:9px;border-radius:50%;background:#CFD5E2;cursor:pointer;transition:background .2s}
.dots i.on{background:var(--red)}
.fan-foot{text-align:center;margin-top:14px}
.fan-foot a{font-size:16px;color:var(--navy)}
.fan-foot a:hover{color:var(--red)}

/* ---------- footer ---------- */
.site-foot{border-top:3px solid var(--navy);background:var(--paper)}
/* Four link columns beside the logo, per the client's footer design (8/21).
   Equal columns now that the longest label is "Terms of Service". */
.foot-in{display:grid;grid-template-columns:220px repeat(4,1fr);gap:24px;align-items:start;
  /* longhands, not the shorthand: a shorthand here zeroed .wrap's side padding
     and the footer ran flush to the viewport edge below the wrap's max width */
  padding-top:20px;padding-bottom:16px}
.foot-brand img{width:100%;max-width:212px;height:auto;mix-blend-mode:multiply}
/* hairlines sit between the link columns; the design has none beside the logo */
.fcol{border-left:1px solid var(--line);padding-left:22px}
.foot-brand+.fcol{border-left:0;padding-left:0}
.fcol h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.09em}
.fcol ul{list-style:none;margin:8px 0 0;padding:0}
.fcol li{line-height:22px}
.fcol li+li{margin-top:2px}
.fcol a{font-size:15px;white-space:nowrap}
.fcol a:hover{color:var(--red)}
@media (max-width:1150px){
  /* the logo takes its own row and the four columns share the width; the
     divider beside whichever column starts a row is dropped below */
  .foot-in{grid-template-columns:repeat(4,1fr);row-gap:26px}
  .foot-brand{grid-column:1/-1}
  .foot-in .fcol:nth-child(2){border-left:0;padding-left:0}
}
.foot-bar{background:var(--navy);color:#fff;text-align:center;padding:12px 0;font-size:15px}
.foot-bar span{opacity:.55;margin:0 12px}

/* ============================================================
   pillar page template — shared by every platform pillar page.
   The pillar mockups are slide decks (~31px body, one topic per screen), so
   this builds their content and section order in the Home page's type scale
   and consolidates what the deck spread across separate slides.
   ============================================================ */
.phero{background:linear-gradient(180deg,#fff,var(--paper-2));padding:66px 0 74px;overflow:hidden}
.phero-in{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
/* grid items default to min-width:auto, so one wide child (a page-scoped
   max-width on the hero image, say) pins the whole track open and .phero's
   overflow:hidden then silently crops the headline and copy on a phone. */
.phero-in>*{min-width:0}
.phero h1{font-size:clamp(30px,3.1vw,44px)}
.phero-sub{
  margin-top:12px;font-size:clamp(19px,1.7vw,25px);color:var(--navy);
  font-weight:400;line-height:1.35;
}
.phero .body{margin-top:24px;max-width:52ch}
.phero .cta{margin-top:32px}
/* width:auto, not 100%: several of these crops come out of a 1366x768
   mockup screen and stretching them past their pixel size is what makes them
   look soft. They now sit at natural size and only shrink to fit. */
.phero-art img{width:auto;max-width:100%;height:auto;margin:0 auto}
/* .cut = artwork that was exported on a white ground. Multiply drops that
   ground into the section behind it so the art sits on the page instead of
   reading as a pasted-on white box (client, 8/20). NOT for full-bleed
   photographs — multiply would darken them against the gradient. */
.phero-art.cut img{mix-blend-mode:multiply}

.sec h2:not(.center){max-width:26ch}
.sec h2.wide{max-width:none}
.lead-2{margin-top:18px;font-size:20px;color:var(--navy);line-height:1.5}
.bul{margin:22px 0 0;padding:0;list-style:none;max-width:70ch}
.bul li{position:relative;padding-left:26px;margin-top:12px;line-height:1.6}
/* bullet dots are navy, not red (client, 8/20) — red is reserved for the
   "Schedule a Demo" button and accent words */
.bul li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--navy);
}

/* image + copy row, alternating sides */
.row{display:grid;grid-template-columns:.86fr 1.14fr;gap:44px;align-items:center;margin-top:44px}
.row.flip{grid-template-columns:1.14fr .86fr}
.row.flip .row-art{order:2}
.row-art img{width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:4px;box-shadow:0 8px 26px rgba(19,33,86,.16)}
.row-art.flat img{box-shadow:none;border-radius:0}
/* .cut = exported on a white ground; see .phero-art.cut */
.row-art.cut img{mix-blend-mode:multiply}
.row-copy .body+.body{margin-top:18px}
.row-copy h3{margin-bottom:10px;font-size:clamp(20px,1.7vw,24px)}

/* the deck's feature list: art beside copy, alternating, plus copy-only items */
.tools{margin-top:52px;display:grid;gap:50px}
/* "auto" lets each art column shrink to its image's natural width, so every
   crop renders at full size instead of being squeezed into a fixed 340px
   column — bigger and sharper, with no upscaling. */
.tool{display:grid;grid-template-columns:auto 1fr;gap:44px;align-items:center}
.tool.flip{grid-template-columns:1fr auto}
.tool.flip .tool-art{order:2}
.tool-art{max-width:440px}
/* no radius, no drop shadow, and multiply so the white ground disappears: the
   client asked for these to sit directly on the page rather than in a box */
.tool-art img{width:auto;max-width:100%;height:auto;margin:0 auto;mix-blend-mode:multiply}
/* The report crops are now full-resolution exports from the product's sample
   viewer, several times larger than the slot. Capping the height keeps the rows
   at the proportions the mockups had and spends the extra pixels on sharpness
   at DPR>1. Harmless for the two device mockups, which are smaller than this. */
.tool-art img{max-height:360px}
/* .bleed = artwork that runs to its own page edge (the OM cover is a full-bleed
   photo). Multiply would stain it with the .sec-2 paper tint and grey out the
   white cover type, so it opts out. */
.tool-art.bleed img{mix-blend-mode:normal}
.tool-art picture{display:contents}
/* No hairline ring on document crops: the 1px spread shadow landed on a
   subpixel at DPR>1, so it painted on three sides and not the fourth and read
   as a partial black line around the report (client, 8/21). The crops carry
   their own page edge. */
.si-lg{width:96px;height:96px}
.si-lg svg{width:100%;height:100%}
.tool h3,.tool-solo h3{font-size:clamp(21px,1.9vw,26px);margin-bottom:12px}
.tool .body{max-width:62ch}
.tool-solo{max-width:78ch}

/* numbered tool headings inside a pillar page */
.nbadge{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--red);color:#fff;font-size:16px;font-weight:800;margin-right:12px;
  vertical-align:middle;
}
.tool-solo.numbered{max-width:80ch}
.tool-solo.numbered+.tool-solo.numbered{margin-top:46px}
.subhead{margin-top:22px;font-size:19px;font-weight:700;color:var(--navy)}

/* the mockups' "who it is for" band: navy icon disc, red label, arrow, copy */
.rcards{
  margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:34px;
  background:var(--paper-2);border-radius:14px;padding:46px 34px;
}
.rcards.five{grid-template-columns:repeat(5,1fr);gap:26px}
.rcard{text-align:center;display:flex;flex-direction:column;align-items:center}
.rcard .ic{
  width:78px;height:78px;border-radius:50%;background:var(--navy);
  display:grid;place-items:center;transition:transform .22s ease;
}
.rcard:hover .ic{transform:translateY(-3px) scale(1.04)}
.rcard .ic svg{width:38px;height:38px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rcard h3{margin-top:20px;color:var(--red);font-size:19px;min-height:2.5em}
.rcard .arw{display:block;margin:4px 0 12px;color:var(--navy)}
.rcard p{font-size:15.5px;line-height:1.55}

/* arrow list (the deck's chevron bullets) */
.arrows{margin-top:52px;display:grid;gap:40px}
.arrow-item{display:grid;grid-template-columns:56px 1fr;gap:22px;align-items:start}
.arrow-item .ar{color:var(--navy);margin-top:6px}
.arrow-item h3{margin-bottom:8px;font-size:clamp(20px,1.7vw,24px)}
.arrow-item .body{max-width:70ch}

/* Partnership pyramid, rebuilt from the deck's flattened graphic.
   Tiers are 88px so each label (one title line + two description lines, ~72px)
   clears the next one with real breathing room while the tiers still stack into
   one solid pyramid. Each label is joined to its tier by a leader line whose
   length is the distance from that tier's edge out to the copy column, since
   the tiers are centred and every one is a different width. */
.pyr{margin-top:34px;display:grid;gap:0}   /* the deck draws one solid pyramid */
.pyr-row{display:grid;grid-template-columns:300px 1fr;gap:26px;align-items:center}
.pyr-tier{
  position:relative;height:88px;display:grid;place-items:center;color:#fff;
  background:var(--navy);margin:0 auto;box-shadow:0 -1px 0 #fff inset;
}
.pyr-tier svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pyr-row:nth-child(1) .pyr-tier{width:86px;clip-path:polygon(50% 0,100% 100%,0 100%)}
.pyr-row:nth-child(2) .pyr-tier{width:150px;clip-path:polygon(21% 0,79% 0,100% 100%,0 100%)}
.pyr-row:nth-child(3) .pyr-tier{width:216px;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.pyr-row:nth-child(4) .pyr-tier{width:284px;clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}
.pyr-row:nth-child(1) .pyr-tier svg{margin-top:30px}
/* (300 - tier width) / 2 + the 26px column gap */
.pyr-row:nth-child(1){--lead:133px}
.pyr-row:nth-child(2){--lead:101px}
.pyr-row:nth-child(3){--lead:68px}
.pyr-row:nth-child(4){--lead:34px}
.pyr-copy{position:relative}
.pyr-copy::before{
  content:"";position:absolute;top:50%;left:calc(-1 * var(--lead));
  width:var(--lead);height:1px;background:rgba(19,33,86,.28);
}
.pyr-copy h3{font-size:19px;line-height:1.25}
.pyr-copy p{font-style:italic;font-size:16px;margin-top:3px;line-height:1.4}

/* scenario cards with the deck's navy cap bar */
.scards{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.scard{
  background:#fff;border:1px solid #D9DEEA;border-top:10px solid var(--navy);
  border-radius:6px;padding:26px 24px 28px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.scard:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(19,33,86,.14)}
.scard h3{color:var(--red);font-size:19px;margin-bottom:12px}
.scard p{font-size:16px;line-height:1.6}
@media (max-width:980px){
  .scards{grid-template-columns:1fr 1fr}
  .pyr-row{grid-template-columns:180px 1fr;gap:18px}
}
@media (max-width:560px){
  .scards{grid-template-columns:1fr}
  .pyr-row{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* numbered process strip (DealRoom's "clean, repeatable deal process") */
.steps{margin-top:60px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.step{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:30px 18px 22px;text-align:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.step:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(19,33,86,.12)}
.step .n{
  position:absolute;top:-19px;left:50%;transform:translateX(-50%);
  width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;
  font-size:17px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 5px #fff;
}
.step .si{width:58px;height:58px;margin:6px auto 16px;display:block;color:var(--navy)}
.step .si svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step p{font-size:15.5px;line-height:1.55}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr;gap:34px 20px}}
@media (max-width:560px){.steps{grid-template-columns:1fr;gap:34px}}

/* security page: the deck's Technical / Why It Matters pairs */
.ctrl{margin-top:44px;display:grid;gap:40px}
.ctrl-item{border-left:3px solid var(--line);padding-left:26px}
.ctrl-item h3{font-size:clamp(20px,1.7vw,24px);margin-bottom:16px}
.tw{margin-top:14px}
.tw dt{font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--navy)}
.tw dd{margin:6px 0 0;line-height:1.62}
.tw dt.why{color:var(--red)}
.ctrl-art{display:flex;gap:26px;align-items:flex-start}
.ctrl-art img{width:120px;height:auto;flex:0 0 auto}

/* contact page */
.cform{
  margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:34px;box-shadow:0 8px 28px rgba(19,33,86,.08);max-width:620px;
}
.field{margin-bottom:18px}
.field label{display:block;font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px}
.field input,.field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--gray);
  padding:12px 14px;border:1px solid #CFD6E4;border-radius:8px;background:#fff;
}
.field input:focus,.field textarea:focus{outline:3px solid var(--red);outline-offset:1px;border-color:var(--navy)}
.field textarea{min-height:120px;resize:vertical}
.req{color:var(--red)}
.radios{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.radios label{display:flex;align-items:center;gap:10px;font-weight:400;font-size:16px;color:var(--gray)}
.radios input{width:18px;height:18px;accent-color:var(--red)}
.captcha{
  margin:22px 0;border:1px dashed #B9C2D4;border-radius:8px;padding:18px;
  text-align:center;font-size:14px;color:#7A869E;background:var(--paper-2);
}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:44px}
.two-up .iconrow{display:flex;align-items:flex-start;gap:16px;margin-top:20px}
.two-up .iconrow svg{flex:0 0 auto;color:var(--navy)}
@media (max-width:880px){.two-up{grid-template-columns:1fr;gap:38px}}

/* closing band */
.closing{background:var(--paper-2);padding:80px 0}
.closing-in{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.closing-art img{width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:4px;box-shadow:0 10px 30px rgba(19,33,86,.18)}
/* .cut = a background-removed subject: no card, no shadow, white ground
   multiplied away so it stands on the page. See .phero-art.cut */
.closing-art.cut img{border-radius:0;box-shadow:none;mix-blend-mode:multiply}
.closing h2{max-width:22ch}
.closing .body{margin-top:20px;max-width:52ch}
.closing .btn{margin-top:30px}

@media (max-width:980px){
  .phero-in,.row,.row.flip,.tool,.tool.flip,.closing-in{grid-template-columns:1fr;gap:30px}
  .row.flip .row-art,.tool.flip .tool-art{order:0}
  .rcards,.rcards.five{grid-template-columns:1fr 1fr;gap:30px 24px;padding:36px 24px}
  .sec h2:not(.center){max-width:none}
}
@media (max-width:560px){
  .rcards,.rcards.five{grid-template-columns:1fr}
  .rcard h3{min-height:0}
}

/* ---------- reveal ---------- */
/* Scoped to html.js-rv, which render.php's inline head script sets and removes
   again if site.js has not taken over within 2s. Unscoped, this rule hid real
   marketing content from anything that did not run the script (UI review, 8/24)
   — the page's default state must be visible. */
.js-rv .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js-rv .rv.in{opacity:1;transform:none}

/* ---------- review notes ---------- */
/* Internal build commentary. Kept in the markup for our own reference, never
   rendered — the preview panel that used to toggle it is gone. */
.note{display:none}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .feat{gap:44px 44px}
  .fcard{grid-template-columns:238px 1fr;gap:24px}
  .fcard .shot{width:238px;height:143px}
}
@media (max-width:980px){
  :root{--pad:24px}
  /* stacked: copy first, then the scene full-bleed under it */
  .hero-in{display:block;min-height:0}
  .hero-copy{max-width:none;padding:52px 0 0}
  .hero-art{position:relative;width:auto;margin:34px 0 -6px;height:min(60vw,360px);border-radius:8px}
  .hero-art img{-webkit-mask-image:none;mask-image:none;object-position:60% 62%}
  .br-lg{display:none}
  .feat{grid-template-columns:1fr}
  /* the scene is a wide desktop composition; below this it stops reading, so
     the roles fall back to a plain grid at fixed sizes */
  .roleband .scene{display:none}
  .pill{position:static;width:auto;height:auto;padding:0;
    grid-template-columns:repeat(2,1fr);gap:44px 0}
  .role{padding:0 12px}
  .role .ic{width:70px;height:70px}
  .role .ic svg{width:34px;height:34px}
  /* h2 as well as h3: Use Cases renders these labels as <h2> (heading-level
     audit, 8/25). Listing only h3 left that page on the desktop 1.92cqw /
     nowrap rules, so its role labels rendered at ~5px on a 320px phone. */
  .role h3,.role h2{margin-top:20px;font-size:20px;min-height:2.5em;white-space:normal}
  .role .link-ex{margin-top:6px;font-size:15px;gap:10px}
  .role .link-ex svg{width:16px}
  .role-foot{grid-template-columns:1fr;justify-items:center}
  .role-foot .tag,.role-foot .btn{grid-column:1;justify-self:center}
  .tsts{grid-template-columns:1fr;gap:44px}
  /* a single column is wider than the video stills; cap them at their own size */
  .tsts .thumb,.tsts.eight .thumb{max-width:340px}
  .stats-in{grid-template-columns:1fr 1fr;gap:26px 0}
  .stat:nth-child(2){border-right:0}
  .reports-in{grid-template-columns:1fr}
  .fan{height:400px}
  .fan img{height:330px}
}
/* the four link columns still fit above 700px, and dropping to two there
   rather than at 980px keeps the footer short across tablet widths */
@media (max-width:700px){
  .foot-in{grid-template-columns:1fr 1fr;gap:24px}
  .fcol{border-left:0;padding-left:0}
}
@media (max-width:560px){
  .fcol a{white-space:normal}
  /* 120px icon + 26px gap left the copy column ~136px wide at 360px, i.e.
     two or three words a line under a tall empty gutter */
  .ctrl-art{flex-direction:column;gap:18px}
  .sec{padding:64px 0}
  .fcard{grid-template-columns:1fr}
  .fcard .shot{width:100%;height:180px}
  .pill{grid-template-columns:1fr}
  .stats-in{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:14px 0}
  .stat:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .mtrack{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
  /* !important, not specificity: this has to beat .js-rv .rv */
  .rv{opacity:1 !important;transform:none !important}
}

.nav a.here{color:var(--red)}
.nav a.here::after{right:0}

/* ---------- skip link ---------- */
.skip{
  position:absolute;left:14px;top:-64px;z-index:100;
  background:var(--navy);color:#fff;font-weight:700;font-size:15px;
  padding:13px 20px;border-radius:0 0 8px 8px;transition:top .18s ease;
}
.skip:focus{top:0}
main:focus{outline:none}

/* ---------- header collapse ---------- */
/* The header is fluid (see .head-in above), so its requirement scales with the
   viewport: measured with wrapping forbidden it needs 1068px at a 1276px window
   and 974px at 1025px — 51px of slack even at the boundary. Hence 1024: every
   real laptop keeps the full nav, and the burger is for tablets and phones.
   Two earlier attempts got this wrong in both directions — a fixed 1280 hid the
   nav on a 1276px MacBook, and a fixed 1150 showed a nav that could not fit and
   silently wrapped into two lines. The lesson is that the threshold has to be
   measured against a nav that is forbidden to wrap. */
@media (max-width:1024px){
  .nav,.head-ctas{display:none}
  .burger{display:block}
}
@media (max-width:700px){
  .head-in{height:76px}
  .brand img{height:58px}
}

/* ---------- mobile nav drawer ---------- */
.mnav{display:none}
.burger span{transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1024px){   /* must match the header collapse above */
  .mnav[hidden]{display:none}
  .mnav:not([hidden]){
    display:flex;flex-direction:column;
    position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:3px solid var(--navy);
    box-shadow:0 20px 44px rgba(19,33,86,.16);
    padding:14px clamp(20px,3.2vw,56px) 26px;animation:mnavIn .18s ease;
  }
  .mnav nav{display:flex;flex-direction:column}
  .mnav nav a{
    padding:15px 2px;font-size:16px;font-weight:600;text-transform:uppercase;
    letter-spacing:.045em;color:var(--navy);border-bottom:1px solid var(--line);
  }
  .mnav nav a.here{color:var(--red)}
  .mnav .btn{margin-top:14px;justify-content:center}
}
@keyframes mnavIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- print ---------- */
@media print{
  .burger,.mnav,.skip,.fan-nav,.marquee,.vmodal{display:none !important}
  .site-head{position:static;border-bottom:2px solid var(--navy);background:#fff}
  body{background:#fff}
  .rv{opacity:1 !important;transform:none !important}
  .acc-body{display:block !important}          /* print every role section */
  .hero-art img{-webkit-mask-image:none;mask-image:none}
  .fcard,.incard,.plan,.art,.tst,.uc-item,.stat{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  .btn{box-shadow:none}
}