/* The organization site: the homepage and the product pages share this bar,
   products menu, dialogs and type. */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --blue:#1a56db;--blue-dark:#1240a8;--blue-xdark:#0d2e7a;--blue-light:#e8f0fe;
  --red:#dc2626;--red-light:#fef2f2;--green:#16a34a;--green-light:#f0fdf4;
  --amber:#c2410c;--amber-light:#fff7ed;
  --bg:#ffffff;--bg2:#f8fafc;--text:#1e293b;--text2:#475569;--text3:#94a3b8;
  --border:#e2e8f0;--card:#ffffff;
}
body{font-family:'Inter',system-ui,sans-serif;color:var(--text);background:var(--bg);-webkit-tap-highlight-color:transparent}
h1,h2,h3,.disp{font-family:'Sora',sans-serif}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--blue)}

/* NAV */
/* ---- the bar ------------------------------------------------------------
   Solid navy, always. I made this transparent on the assumption that the
   hero sits behind it — it does not. The bar is sticky, not fixed, so the
   hero begins underneath it and transparent meant the white page showed
   through with white text on it. The wordmark disappeared entirely.

   The scroll state is now only a deeper shadow: enough to say the bar is
   floating over content rather than sitting in it, without touching the
   colour that the logo depends on. */
nav{background:var(--blue-xdark);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:10px;height:64px;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
  transition:box-shadow var(--d-base) var(--ease-out)}
nav.is-stuck{box-shadow:0 6px 28px rgba(0,0,0,.34)}
/* a nav link that wraps to a second line makes the whole bar two rows tall */
.nav-links a{white-space:nowrap}
.logo{color:#fff;font-size:1.1rem;font-weight:800;letter-spacing:-0.5px;display:flex;align-items:center;gap:8px;text-decoration:none}
.logo em{color:#f87171;font-style:normal}
.logo .biz-tag{font-size:0.6rem;font-weight:800;background:rgba(255,255,255,0.15);padding:2px 8px;border-radius:10px;letter-spacing:0.5px;text-transform:uppercase}
.nav-links{list-style:none;display:flex;gap:1.6rem}
.nav-links a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:0.84rem;cursor:pointer;transition:color 0.2s}
.nav-links a:hover{color:#fff}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-left{display:flex;align-items:center;gap:13px;min-width:0}
/* ---- the products menu -------------------------------------------------
   The organization platform is the company now, and the scanner and the
   extension are things it makes. That relationship has to be visible in the
   navigation or it is just a claim in a commit message: one control, on
   every page, that lists the family and marks where you are standing.

   It opens on hover where there is a pointer and on a tap where there is
   not, so it works the same on a laptop and a phone without two designs. It
   keeps its own dark palette rather than the page's, because it hangs off a
   dark bar on a page that can be either theme. */
.pr-wrap{display:flex;align-items:center;flex-shrink:0}
/* Red, like the button it replaced. It is the one control on the bar that
   says "there is more of us than this page", so it should not look like the
   quiet links beside it. */
/* Above 800px this is gone: the link row carries Products instead. Below it,
   the row is hidden and this is the only way into the drawer, so it stays. */
.pr-wrap{display:none}
@media(max-width:800px){.pr-wrap{display:flex}}
.pr-btn{display:inline-flex;align-items:center;gap:7px;
  background:var(--red);border:1px solid transparent;
  color:#fff;padding:8px 14px;border-radius:9px;
  font:inherit;font-size:0.82rem;font-weight:700;cursor:pointer;white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.22);
  transition:background .18s,box-shadow .18s,transform .12s}

/* the link version: it reads as one of the navigation items, because that is
   what it now is. The chevron is the only thing marking it as opening
   something rather than jumping down the page. */
.nav-products > a{display:inline-flex;align-items:center;gap:5px}
.nav-products > a svg{opacity:.6;transition:transform .18s,opacity .18s}
.nav-products > a:hover svg{opacity:1;transform:translateY(1px)}
.pr-btn:hover,.pr-wrap.open .pr-btn{background:#b91c1c;box-shadow:0 3px 12px -2px rgba(220,38,38,.6)}
.pr-btn:active{transform:scale(.97)}
.pr-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pr-chev{transition:transform .18s;opacity:.85}
.pr-wrap.open .pr-chev{transform:rotate(180deg)}
.pr-bars{display:none}

/* ---- the bar on a phone ------------------------------------------------
   Three lines at the right-hand end, and nothing else but the wordmark.
   It used to be a red pill reading "Menu" sitting in the middle of the bar,
   beside a second red pill reading "Book a Demo" — two red buttons of equal
   weight, neither of them where a thumb expects to find a menu.

   Book a Demo and the account controls are not lost: they are the first two
   things in the panel this opens, which is where a phone keeps them. */
@media(max-width:800px){
  .pr-wrap{display:flex;margin-left:auto}
  .pr-btn{
    background:none;border:0;box-shadow:none;
    padding:10px;margin-right:-10px;   /* the icon sits flush with the edge */
    border-radius:10px;color:#fff;
  }
  .pr-btn .pr-bars{display:block}
  .pr-btn .pr-lab-d,.pr-btn .pr-chev{display:none}
  .pr-btn:hover,.pr-wrap.open .pr-btn{background:rgba(255,255,255,.12);box-shadow:none}
  .pr-btn:active{transform:none;background:rgba(255,255,255,.18)}
  .pr-btn:focus-visible{outline:2px solid #fff;outline-offset:0}
  /* the three lines turn into a cross while the panel is open */
  .pr-bars line{transition:transform .22s var(--ease-out),opacity .16s linear;
    transform-origin:center}
  .pr-wrap.open .pr-bars line:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .pr-wrap.open .pr-bars line:nth-child(2){opacity:0}
  .pr-wrap.open .pr-bars line:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* everything else on the bar lives in the panel instead */
  nav .nav-cta,nav .acct-wrap{display:none}
  nav{padding:0 1.1rem}
}
@media(max-width:800px) and (prefers-reduced-motion:reduce){
  .pr-bars line{transition:none}
}

/* ---- the drawer -------------------------------------------------------
   This was a dropdown hanging off the button, dark blue on a dark blue bar.
   Two things were wrong with it. Its own text was a shade of white on a
   shade of navy, so it had to be read rather than seen. And on a phone the
   bar could not hold the wordmark, this button, the account control and the
   call to action all at once - the label was clipped to "Product", the
   account button sat on top of it, and that menu then opened as a sheet
   across the headline.

   So it comes in from the left instead, in the page’s own light palette,
   with a colour to each product and type at a size you can take in at a
   glance. On a phone it also carries the section links and the account
   actions, which were unreachable there before - the link list hides at
   800px and the account control now at 640px, and neither had anywhere
   else to go. */
/* A dropdown does not dim the page. The scrim stays only as an invisible
   surface that catches a click anywhere outside the menu, which is how the
   menu closes. */
.pr-scrim{position:fixed;inset:0;z-index:190;background:transparent;
  opacity:0;visibility:hidden}
body.pr-open .pr-scrim{opacity:1;visibility:visible}
/* opened by hover, it closes when the pointer leaves, so the click-catcher
   stays off: it sits above the bar and would cover the link that opened it */
body.pr-hover .pr-scrim{opacity:0;visibility:hidden}

/* ---- the products menu, stripped ----------------------------------------
   Icons, one-line descriptions, a "you are here" badge and two section
   headings, to say three words. It was a page of its own hanging off a
   navigation item.

   The markup is unchanged — the phone sheet still uses those pieces for the
   section links and the account actions — but on a dropdown they are all
   switched off. What is left reads like the links it sits under, because
   that is what it is. */
.pr-panel .pr-ico,
.pr-panel .pr-tx > span,
.pr-panel .pr-here,
.pr-panel .pr-out,
.pr-panel .pr-lab,
.pr-panel .pr-sep{display:none}
.pr-panel .pr-item{display:block;padding:7px 12px;border-radius:7px;
  border:none;transform:none}
.pr-panel .pr-item:hover{transform:none;background:var(--bg2);border:none}
.pr-panel .pr-item-blue:hover,
.pr-panel .pr-item-green:hover,
.pr-panel .pr-item-amber:hover{background:var(--bg2);border-color:transparent}
.pr-panel .pr-tx{display:block}
.pr-panel .pr-tx b{font-size:.86rem;font-weight:500;color:var(--text2);
  line-height:1.5;white-space:nowrap}
.pr-panel .pr-item:hover .pr-tx b{color:var(--blue)}

/* the phone sheet still needs its heading and its sections */
@media(max-width:800px){
  .pr-panel .pr-lab,.pr-panel .pr-sep{display:block}
  .pr-panel .pr-tx b{white-space:normal;font-weight:700;color:var(--text)}
}

/* ---- the products menu --------------------------------------------------
   A dropdown hanging off the Products link, not a drawer. The drawer made
   sense when the button lived beside the wordmark and had to carry the whole
   navigation on a phone; now that Products is one item among the links, a
   panel sliding in from the far side of the screen is far more movement than
   the job needs.

   --pr-x is set by the script from the link's position, because the panel
   cannot live inside the link: below 800px the link row is hidden, and a
   child of a display:none parent cannot be shown. Fixed positioning lets the
   same panel serve both. */
.pr-panel{position:fixed;top:56px;left:var(--pr-x,50%);z-index:200;
  width:max-content;min-width:196px;max-width:calc(100vw - 24px);
  display:flex;flex-direction:column;
  max-height:min(560px,calc(100vh - 88px));
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  box-shadow:0 26px 60px -18px rgba(8,14,40,.4),0 2px 8px rgba(8,14,40,.12);
  transform-origin:top center;
  opacity:0;transform:translateY(-8px) scale(.97);visibility:hidden;
  transition:opacity var(--d-base) var(--ease-out),
             transform var(--d-base) var(--ease-out),visibility var(--d-base)}
body.pr-open .pr-panel{opacity:1;transform:none;visibility:visible}

/* on a phone it is a sheet under the bar, because there is no link to hang
   it from — the row it lives in is hidden at that width */
@media(max-width:800px){
  .pr-panel{left:12px;right:12px;width:auto;top:58px}
}

/* The wordmark and the close button were the drawer's furniture: a panel
   covering a third of the screen needs a header and a way out. A dropdown
   is neither — it is attached to the thing that opened it, and it closes by
   clicking anywhere else. On a phone it is still a sheet, so the close
   button earns its place there. */
.pr-top{display:none}
@media(max-width:800px){
  .pr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:15px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
}
.pr-brand{font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;
  color:var(--text);letter-spacing:-.3px}
.pr-brand em{font-style:normal;color:var(--blue)}
.pr-x{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text2);display:flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s}
.pr-x:hover{background:var(--red-light);color:var(--red);border-color:#fecaca}
.pr-x:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.pr-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:10px}
@media(max-width:800px){.pr-scroll{padding:12px 12px 24px}}
.pr-lab{padding:10px 10px 6px;font-size:0.62rem;font-weight:800;letter-spacing:.9px;
  text-transform:uppercase;color:var(--text3)}
.pr-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:13px;
  text-decoration:none;color:var(--text);border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .15s}
.pr-item:hover{transform:translateX(2px)}
.pr-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.pr-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center}
/* a colour each, so the three are told apart before a word is read */
.pr-item-blue  .pr-ico{background:var(--blue-light);color:var(--blue)}
.pr-item-green .pr-ico{background:var(--green-light);color:var(--green)}
.pr-item-amber .pr-ico{background:var(--amber-light);color:var(--amber)}
.pr-item-blue:hover {background:var(--blue-light);border-color:#c7dbfb}
.pr-item-green:hover{background:var(--green-light);border-color:#bbf7d0}
.pr-item-amber:hover{background:var(--amber-light);border-color:#fed7aa}
.pr-tx{min-width:0}
.pr-tx b{display:block;font-size:0.87rem;font-weight:700;line-height:1.35;color:var(--text)}
/* The child combinator matters here. ".pr-tx span" is a class plus an element,
   which outranks ".pr-here" on its own, so the "you are here" chip inherited
   display:block and stretched the full width of the panel like a banner. The
   description is the direct child; the chip is inside the <b>. */
.pr-tx > span{display:block;font-size:0.75rem;color:var(--text2);line-height:1.5;margin-top:3px}
.pr-here{display:inline-block;font-size:0.55rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.5px;background:var(--green-light);color:var(--green);
  border:1px solid #bbf7d0;padding:2px 6px;border-radius:9px;margin-left:7px;vertical-align:2px}
.pr-out{flex-shrink:0;margin-left:auto;align-self:center;color:var(--text3)}
.pr-sep{height:1px;background:var(--border);margin:9px 10px}
.pr-item-red .pr-ico{background:var(--red-light);color:var(--red)}
.pr-item-red:hover{background:var(--red-light);border-color:#fecaca}

/* the two sections that only exist on a phone */
.pr-nav,.pr-acct{display:none}
.pr-link{display:block;width:100%;text-align:left;background:none;border:none;
  font:inherit;font-size:0.9rem;font-weight:600;color:var(--text);
  padding:11px 12px;border-radius:10px;cursor:pointer;
  transition:background .15s,color .15s}
.pr-link:hover{background:var(--blue-light);color:var(--blue)}
.pr-cta{display:block;text-align:center;text-decoration:none;font-size:0.88rem;
  font-weight:700;padding:12px;border-radius:10px;margin:0 2px 8px;
  border:1px solid var(--border);color:var(--text2);
  transition:background .15s,color .15s,border-color .15s}
.pr-cta-ghost:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}
.pr-cta-solid{background:var(--red);border-color:var(--red);color:#fff}
.pr-cta-demo{width:100%;font-family:'Sora',sans-serif;cursor:pointer;margin-bottom:4px}
/* on the desktop dropdown the bar still has its own Book a Demo, so this
   would be the same button twice */
@media(min-width:801px){.pr-cta-demo{display:none}}
.pr-cta-solid:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}

@media(max-width:800px){
  .pr-nav{display:block}
  /* The button carries no label at this width — three lines and nothing
     else. This used to show a "Menu" span, which no longer exists in the
     markup; the rule outlived the element it was written for. The rules
     that now dress the button are further up with the rest of the phone
     bar, so there is one place to look. */
  .pr-lab-d,.pr-chev{display:none}
}
/* The bar hides Book a Demo and the account control from 800px down, so the
   sheet has to carry them from the same width. It used to start at 640px,
   which left every width in between - a tablet held upright - with no way
   to book a demo or sign in at all. */
@media(max-width:800px){.pr-acct{display:block}}
@media(prefers-reduced-motion:reduce){
  .pr-panel,.pr-scrim,.pr-chev,.pr-item{transition:none}
}
.nav-cta{background:var(--red);color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:0.84rem;cursor:pointer;font-weight:700;font-family:'Sora',sans-serif;transition:background 0.2s}
.nav-cta:hover{background:#b91c1c}
@media(max-width:800px){.nav-links{display:none}}
.nav-cta{white-space:nowrap;flex-shrink:0}
.logo{white-space:nowrap;flex-shrink:0}
/* sign-in options collapse behind one control so the bar never wraps */
.acct-wrap{position:relative;flex-shrink:0}
.acct-btn{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;height:36px;padding:0 10px;border-radius:8px;cursor:pointer;transition:background .2s,border-color .2s;font-family:inherit}
.acct-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.acct-btn[aria-expanded="true"]{background:rgba(255,255,255,.14);border-color:#fff}
.acct-chev{transition:transform .2s ease;opacity:.8}
.acct-btn[aria-expanded="true"] .acct-chev{transform:rotate(180deg)}
/* Left as it shipped. I had two goes at improving this and made it worse both
   times, so it is back to the version that worked. */
.acct-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:8px;display:none;flex-direction:column;gap:6px;box-shadow:0 16px 40px rgba(8,14,40,.28);z-index:120}
.acct-menu.open{display:flex;animation:acctIn .16s ease both}
@keyframes acctIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct-item{display:block;padding:10px 12px;border-radius:8px;font-size:.86rem;font-weight:600;color:var(--text2);text-decoration:none;border:1px solid var(--border);text-align:center;transition:background .15s,color .15s,border-color .15s}
.acct-item:hover{background:var(--blue-light);color:var(--blue);border-color:var(--blue)}
.acct-item-primary{background:var(--red);border-color:var(--red);color:#fff}
.acct-item-primary:hover{background:#b91c1c;border-color:#b91c1c;color:#fff}
@media(prefers-reduced-motion:reduce){.acct-menu.open{animation:none}.acct-chev{transition:none}}
/* The links only collapse at 800px, but the full-size bar needs 973px — so
   across that whole band the header ran off the right edge and the page
   scrolled sideways. iPad portrait (810px) and iPad Air portrait (834px) both
   sit inside it. Two steps of tightening carry the full link set down to
   where it already hides, so no navigation is dropped to fix this. */
@media(max-width:1000px){
  nav{padding:0 .85rem}
  .nav-links{gap:.7rem}
  .nav-links a{font-size:.76rem}
  .nav-cta{padding:9px 12px;font-size:.8rem}
}
@media(min-width:801px) and (max-width:880px){
  nav{padding:0 .75rem}
  .nav-links{gap:.55rem}
  .nav-links a{font-size:.74rem}
  .logo{font-size:1rem}
  /* the badge gives way before the navigation does — the wordmark still says
     which product this is, and the tag returns once the links have collapsed */
  .logo .biz-tag{display:none}
  .nav-cta{padding:8px 11px;font-size:.78rem}
}
@media(max-width:640px){
  nav{padding:0 .75rem;height:56px;gap:10px}
  .logo{font-size:.98rem;gap:6px}
  .logo .biz-tag{font-size:.52rem;padding:2px 6px}
  .nav-cta{padding:9px 13px;font-size:.78rem}
  /* Four controls will not fit across a phone, and squeezing them is what
     put the account button on top of the menu button and pushed the call to
     action against the edge. The account one moves into the drawer instead:
     it is two links, and they read better there than as a sheet dropped
     across the headline. */
  .acct-wrap{display:none}
}
@media(max-width:380px){
  .logo{font-size:.9rem}
  .logo .biz-tag{display:none}
  .nav-cta{padding:8px 10px;font-size:.74rem}
}

/* HERO */
.hero{background:radial-gradient(120% 140% at 20% -10%,#1c4fc7 0%,var(--blue-xdark) 55%,#081d52 100%);color:#fff;padding:4.5rem 1.5rem 4rem;position:relative;overflow:hidden}
.hero-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);border-radius:20px;padding:5px 14px;font-size:0.74rem;font-weight:700;margin-bottom:1.2rem}
.hero h1{font-size:2.6rem;font-weight:900;line-height:1.14;margin-bottom:1rem}
.hero h1 em{color:#f87171;font-style:normal}
.hero p{font-size:1rem;opacity:0.85;line-height:1.7;max-width:480px;margin-bottom:1.8rem}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap}
.btn-primary{background:var(--red);color:#fff;border:none;padding:13px 24px;border-radius:9px;font-weight:700;font-size:0.92rem;cursor:pointer;font-family:'Sora',sans-serif;transition:background 0.2s}
.btn-primary:hover{background:#b91c1c}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff;border:1.5px solid rgba(255,255,255,0.35);padding:13px 24px;border-radius:9px;font-weight:700;font-size:0.92rem;cursor:pointer;font-family:'Sora',sans-serif;transition:all 0.2s}
.btn-secondary:hover{background:rgba(255,255,255,0.18);border-color:#fff}

/* Hero signature: phishing funnel visualization */
.funnel-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:18px;padding:1.6rem;backdrop-filter:blur(6px)}
.funnel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.funnel-head strong{font-size:0.82rem;font-weight:700}
.funnel-live{display:flex;align-items:center;gap:5px;font-size:0.68rem;color:#4ade80;font-weight:700}
.funnel-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.4}}
.funnel-row{margin-bottom:0.85rem;opacity:0;transform:translateY(9px);transition:opacity .5s ease,transform .5s cubic-bezier(.22,.68,0,1)}
.funnel-card.animate .funnel-row{opacity:1;transform:none}
.funnel-card.animate .funnel-row:nth-of-type(1){transition-delay:40ms}
.funnel-card.animate .funnel-row:nth-of-type(2){transition-delay:170ms}
.funnel-card.animate .funnel-row:nth-of-type(3){transition-delay:300ms}
.funnel-card.animate .funnel-row:nth-of-type(4){transition-delay:430ms}
@media(prefers-reduced-motion:reduce){.funnel-row{opacity:1;transform:none;transition:none}.funnel-fill{transition:none}}
.funnel-label{display:flex;justify-content:space-between;font-size:0.76rem;color:rgba(255,255,255,0.75);margin-bottom:4px}
.funnel-label strong{color:#fff}
.funnel-track{height:9px;background:rgba(255,255,255,0.12);border-radius:5px;overflow:hidden}
.funnel-fill{height:100%;border-radius:5px;width:0;transition:width 1.4s cubic-bezier(.22,.68,0,1.2)}
.funnel-fill{transition:width 1.05s cubic-bezier(.22,.68,0,1.12)}
.funnel-card.animate .f1{width:100%;background:#60a5fa;transition-delay:0ms}
.funnel-card.animate .f2{width:74%;background:#facc15;transition-delay:150ms}
.funnel-card.animate .f3{width:19%;background:#f87171;transition-delay:300ms}
.funnel-card.animate .f4{width:31%;background:#4ade80;transition-delay:450ms}
.funnel-note{font-size:0.72rem;color:rgba(255,255,255,0.55);margin-top:1rem;line-height:1.6}

/* TRUST STRIP */
.trust-strip{background:var(--bg2);border-bottom:1px solid var(--border);padding:1rem 1.5rem;text-align:center;font-size:0.78rem;color:var(--text3);letter-spacing:0.3px}
.trust-strip strong{color:var(--text2)}

/* PROBLEM */
.section{padding:6.5rem 1.5rem}
.sec-head{max-width:680px;margin:0 auto 3.4rem;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;letter-spacing:-1px;line-height:1.15;margin:.7rem 0 .9rem;color:var(--text)}
.sec-head p{color:var(--text2);font-size:1.04rem;line-height:1.7;max-width:34em;margin:0 auto}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.6rem;max-width:1080px;margin:0 auto}
.problem-card{background:none;border:none;border-top:2px solid var(--border);border-radius:0;padding:1.6rem 0 0;
  transition:border-color var(--d-fast) var(--ease-out)}
.problem-card:hover{border-top-color:var(--blue)}

/* ---- surfaces -----------------------------------------------------------
   Anything that behaves like a card lifts the same 3px on the same curve.
   Consistency is the whole point: a page where every card lifts differently
   reads as several pages stapled together. */
.dttm-card,.plan-biz{
  transition:transform var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),
             border-color var(--d-fast) var(--ease-out)}
.dttm-card:hover{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)}
.plan-biz:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(13,32,74,.22);
  border-color:rgba(26,86,219,.35)}

/* the recommended tier sits forward of the others, and says so once on
   arrival rather than pulsing forever */
.plan-biz.featured{transform:translateY(-4px)}
.plan-biz.featured:hover{transform:translateY(-7px)}
.plan-biz-badge{transition:transform var(--d-base) var(--ease-press)}
.plan-biz.in .plan-biz-badge{animation:badgeIn 620ms var(--ease-press) 260ms both}
@keyframes badgeIn{
  0%{opacity:0;transform:translateY(6px) scale(.9)}
  100%{opacity:1;transform:none}
}
.problem-stat{font-family:'Sora',sans-serif;font-size:2.6rem;font-weight:600;letter-spacing:-1.4px;color:var(--text);line-height:1;margin-bottom:.7rem}
.problem-card p{font-size:0.86rem;color:var(--text2);line-height:1.6}
@media(max-width:800px){.problem-grid{grid-template-columns:1fr}}

/* DETECT TRAIN TEST MEASURE */
.dttm{background:var(--blue-xdark);padding:4.5rem 1.5rem;color:#fff}
.dttm .sec-head h2,.dttm .sec-head p{color:#fff}
.dttm .sec-head p{opacity:0.75}
.dttm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1080px;margin:0 auto}
.dttm-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.15);border-radius:14px;padding:1.5rem}
.dttm-num{font-size:0.72rem;font-weight:800;color:#f87171;letter-spacing:1px;margin-bottom:0.6rem}
.dttm-card h3{font-size:1rem;margin-bottom:0.5rem}
.dttm-card p{font-size:0.82rem;opacity:0.75;line-height:1.6}
@media(max-width:800px){.dttm-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.dttm-grid{grid-template-columns:1fr}}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1080px;margin:0 auto}
/* The feature cards used to hide themselves and wait for .in on the grid.
   Nothing adds that class any more — the shared reveal handles these, like
   everything else — so the rules only survived by being overridden. Left in
   place they would hide six cards the day somebody touched specificity. */
.feat-meter{height:3px;border-radius:2px;background:var(--border);margin-top:1.1rem;overflow:hidden}
.feat-meter i{display:block;height:100%;width:0;border-radius:2px;background:linear-gradient(90deg,var(--blue),#60a5fa);transition:width 1.1s cubic-bezier(.22,.68,0,1)}
.feat-grid.in .feat-meter i{width:var(--w,70%)}
.feat-card:hover .feat-icon{transform:translateY(-2px) scale(1.06)}
.feat-icon{transition:transform .3s cubic-bezier(.34,1.4,.64,1)}
@media(prefers-reduced-motion:reduce){.feat-card{opacity:1;transform:none}.feat-grid.in .feat-card,.feat-grid.in .feat-meter i,.feat-icon{transition:none}}
.feat-card{border:1px solid var(--border);border-radius:16px;padding:1.7rem;transition:box-shadow .25s var(--ease-out),transform .25s var(--ease-out),border-color .25s}
.feat-card:hover{box-shadow:0 14px 34px -12px rgba(13,32,74,.18);transform:translateY(-3px);border-color:rgba(26,86,219,.3)}
.feat-icon{width:38px;height:38px;border-radius:9px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:0.9rem;color:var(--blue)}
.feat-card h3{font-size:0.94rem;margin-bottom:0.4rem;color:var(--text)}
.feat-card p{font-size:0.83rem;color:var(--text2);line-height:1.6}
@media(max-width:800px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.feat-grid{grid-template-columns:1fr}}

/* PHISHING SIM SECTION */
.sim-section{background:var(--bg2);padding:4.5rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.sim-layout{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.sim-copy .eyebrow{margin-bottom:0.6rem;display:block}
.sim-copy h2{font-size:1.7rem;font-weight:900;margin-bottom:0.8rem}
.sim-copy p{color:var(--text2);font-size:0.9rem;line-height:1.75;margin-bottom:1rem}
.sim-list{list-style:none}
.sim-list li{display:flex;gap:8px;font-size:0.85rem;color:var(--text2);padding:5px 0;align-items:flex-start}
.sim-list li svg{flex-shrink:0;margin-top:2px;color:var(--green)}
.sim-safety{margin-top:1.2rem;background:var(--amber-light);border:1px solid #fdba74;border-radius:10px;padding:10px 14px;font-size:0.78rem;color:var(--amber);line-height:1.6}
.sim-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.sim-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.sim-card-head strong{font-size:0.86rem}
.sim-badge{font-size:0.68rem;font-weight:800;background:var(--blue-light);color:var(--blue);padding:2px 10px;border-radius:10px}
.sim-dept-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:0.8rem}
.sim-dept-row:last-child{border-bottom:none}
.sim-dept-name{width:90px;flex-shrink:0;color:var(--text2);font-weight:600}
.sim-dept-track{flex:1;height:8px;background:var(--bg2);border-radius:5px;overflow:hidden}
.sim-dept-fill{height:100%;border-radius:5px}
.sim-dept-pct{width:36px;text-align:right;font-weight:700;font-size:0.78rem}
.sim-illustrative{text-align:center;font-size:0.68rem;color:var(--text3);margin-top:0.9rem}

/* SECURITY SCORE */
.score-layout{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.score-gauge-wrap{display:flex;justify-content:center}
.score-ring{position:relative;width:220px;height:220px}
.score-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.score-num strong{font-size:2.6rem;font-weight:900;color:var(--text);line-height:1}
.score-num span{font-size:0.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;margin-top:2px}
.score-list{list-style:none}
.score-list li{display:flex;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--text2);align-items:baseline;flex-wrap:wrap}
.score-list li:last-child{border-bottom:none}
.score-list strong{color:var(--text);flex:0 0 auto;white-space:nowrap}
.score-list strong::after{content:' —';color:var(--text3)}
.score-list span{flex:1 1 200px;min-width:0}
@media(max-width:800px){.sim-layout,.score-layout{grid-template-columns:1fr}}

/* DASHBOARD PREVIEW */
.dash-preview{background:var(--blue-xdark);padding:4.5rem 1.5rem}
.dash-preview .sec-head h2,.dash-preview .sec-head p{color:#fff}
.dash-preview .sec-head p{opacity:0.75}
.dash-mock{max-width:1000px;margin:0 auto;background:#0f1d3f;border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:1.6rem;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.dash-mock-label{text-align:center;font-size:0.68rem;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem}
.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.9rem;margin-bottom:1rem}
.dash-stat{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:0.9rem}
.dash-stat-num{font-size:1.4rem;font-weight:900;color:#fff}
.dash-stat-label{font-size:0.68rem;color:rgba(255,255,255,0.5);margin-top:2px;text-transform:uppercase;letter-spacing:0.3px}
.dash-chart{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:1rem;display:flex;align-items:flex-end;gap:6px;height:110px}
.dash-bar{flex:1;background:linear-gradient(180deg,#60a5fa,#3b82f6);border-radius:4px 4px 0 0}
@media(max-width:700px){.dash-stats{grid-template-columns:1fr 1fr}}

/* REPORTS */
.report-layout{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.report-mock{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.6rem;box-shadow:0 8px 30px rgba(0,0,0,0.06)}
.report-mock-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:0.8rem;margin-bottom:0.8rem}
.report-mock-head strong{font-size:0.9rem}
.report-line{display:flex;justify-content:space-between;font-size:0.82rem;padding:6px 0;color:var(--text2)}
.report-line strong{color:var(--text)}
@media(max-width:800px){.report-layout{grid-template-columns:1fr}}

/* PRICING */
.pricing-toggle{display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:2.4rem}
.pt-btn{background:var(--bg2);border:1px solid var(--border);padding:6px 16px;border-radius:20px;font-size:0.82rem;font-weight:700;cursor:pointer;color:var(--text2)}
.pt-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.pt-save{font-size:0.7rem;color:var(--green);font-weight:700}
.plans-biz{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1080px;margin:0 auto}
.plan-biz{background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:1.8rem;position:relative}
.plan-biz.featured{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}
.plan-biz-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--blue);color:#fff;font-size:0.66rem;font-weight:800;padding:3px 12px;border-radius:12px;white-space:nowrap}
.plan-biz-name{font-size:0.76rem;font-weight:800;text-transform:uppercase;letter-spacing:0.8px;color:var(--text3)}
.plan-biz-price{font-size:1.8rem;font-weight:900;margin:0.4rem 0 0.2rem}
.plan-biz-price sup{font-size:0.85rem;font-weight:600}
.plan-biz-price sub{font-size:0.78rem;font-weight:400;color:var(--text3)}
.plan-biz-desc{font-size:0.8rem;color:var(--text2);margin:0.4rem 0 1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);line-height:1.5}
.plan-biz ul{list-style:none;margin-bottom:1.3rem}
.plan-biz ul li{font-size:0.81rem;padding:4px 0;color:var(--text2);display:flex;gap:7px;align-items:flex-start}
.plan-biz-btn{width:100%;padding:11px;border-radius:9px;font-weight:700;font-size:0.86rem;cursor:pointer;border:2px solid var(--blue);color:var(--blue);background:transparent}
.plan-biz.featured .plan-biz-btn{background:var(--blue);color:#fff}
@media(max-width:800px){.plans-biz{grid-template-columns:1fr}}

/* INDUSTRIES */
.ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.8rem;max-width:1080px;margin:0 auto}
/* ---- industries: liquid glass ---------------------------------------------
   The chips are panes of glass in the manner of iOS: frosted, bright at the
   rim, catching the light where a finger or pointer is, and giving a little
   under a press. Glass is only visible against something, so soft brand
   light drifts slowly behind the grid for it to blur. */
#industries{position:relative;overflow:hidden}
.ind-grid{position:relative;isolation:isolate}
.ind-grid::before{content:"";position:absolute;inset:-14% -8%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 55% at 16% 28%,rgba(26,86,219,.42),transparent 70%),
    radial-gradient(34% 52% at 84% 22%,rgba(14,165,233,.36),transparent 70%),
    radial-gradient(42% 60% at 62% 88%,rgba(248,113,113,.30),transparent 70%),
    radial-gradient(30% 46% at 34% 82%,rgba(124,58,237,.20),transparent 70%);
  filter:blur(30px);animation:indDrift 22s ease-in-out infinite alternate}
@keyframes indDrift{
  0%{transform:translate3d(-3%,-2%,0) scale(1)}
  50%{transform:translate3d(3%,2%,0) scale(1.07)}
  100%{transform:translate3d(-1%,3%,0) scale(1.02)}}
.ind-chip{position:relative;overflow:hidden;border-radius:20px;padding:1.05rem 1.35rem;min-height:60px;
  display:flex;align-items:center;font-size:.92rem;font-weight:600;color:#0b1f4d;letter-spacing:-.1px;
  background:linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.3),
    inset 0 0 22px rgba(255,255,255,.2),0 12px 30px -16px rgba(13,32,74,.32),0 2px 6px -2px rgba(13,32,74,.08);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .35s var(--ease-out);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.ind-chip span{position:relative;z-index:1}
/* the rim: brightest where the light comes from, a cool tint round the far edge */
.ind-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,255,255,.12) 38%,rgba(147,197,253,.55) 72%,rgba(255,255,255,.75));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* the light on the surface: a glint that follows the pointer, and a slow
   sweep now and then, staggered, so the panes look alive on a phone too */
.ind-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,22%) var(--my,0%),rgba(255,255,255,.8),transparent 62%),
    linear-gradient(105deg,transparent 38%,rgba(255,255,255,.6) 50%,transparent 62%);
  background-size:100% 100%,260% 100%;background-repeat:no-repeat;background-position:0 0,160% 0;
  opacity:.5;transition:opacity .35s var(--ease-out);
  animation:indSheen 8s cubic-bezier(.45,0,.2,1) infinite;animation-delay:calc(var(--i,0) * .55s + 1.2s)}
@keyframes indSheen{0%,72%{background-position:0 0,160% 0}100%{background-position:0 0,-70% 0}}
@media(hover:hover) and (pointer:fine){
  .ind-chip:hover{transform:translateY(-3px) scale(1.02);
    box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 26px rgba(255,255,255,.28),
      0 22px 40px -18px rgba(13,32,74,.38),0 3px 8px -2px rgba(13,32,74,.1)}
  .ind-chip:hover::after{opacity:1}
}
/* pressed: the pane gives, then springs back when released */
.ind-chip.is-pressed{transform:scale(.965);transition-duration:.14s;transition-timing-function:var(--ease-out)}
.ind-chip.is-pressed::after{opacity:1}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ind-chip{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.78))}}
@media(prefers-reduced-motion:reduce){
  .ind-grid::before,.ind-chip::after{animation:none!important}
  .ind-chip.is-pressed{transform:none!important}}
@media(max-width:800px){.ind-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ind-grid{grid-template-columns:1fr}}

/* TESTIMONIALS PLACEHOLDER */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1080px;margin:0 auto}
.testi-card{border:1px solid var(--border);border-radius:16px;padding:1.7rem;background:var(--card);text-align:left;
  transition:transform .25s var(--ease-out,cubic-bezier(.22,.68,0,1)),box-shadow .25s,border-color .25s}
.testi-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px rgba(13,32,74,.18);border-color:rgba(26,86,219,.3)}
.testi-ic{width:38px;height:38px;border-radius:11px;background:var(--blue-light);color:var(--blue);display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
.testi-card h3{font-family:'Sora',sans-serif;font-size:1rem;font-weight:600;letter-spacing:-.2px;color:var(--text);margin-bottom:.5rem;line-height:1.35}
.testi-card p{font-size:.88rem;line-height:1.7;color:var(--text2);margin:0}
.testi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.testi-top .testi-ic{margin-bottom:0}
.testi-step{font-family:'Sora',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);background:var(--blue-light);border-radius:999px;padding:4px 10px}
.testi-card{display:flex;flex-direction:column}
.testi-list{list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--border);display:grid;gap:.55rem}
.testi-list li{position:relative;padding-left:1.4rem;font-size:.84rem;color:var(--text);line-height:1.45}
.testi-list li::before{content:"";position:absolute;left:0;top:.28rem;width:.8rem;height:.8rem;border-radius:50%;background:var(--blue-light) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231a56db%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6L9 17l-5-5%27/%3E%3C/svg%3E") center/60% no-repeat}
.testi-foot{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2.4rem}
@media(max-width:800px){.testi-grid{grid-template-columns:1fr}}

/* FAQ (reuses accordion pattern) */
.faq{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-btn{width:100%;background:none;border:none;display:flex;justify-content:space-between;align-items:center;padding:1.05rem 0;cursor:pointer;text-align:left;gap:1rem}
.faq-q{font-size:0.92rem;font-weight:700;color:var(--text)}
.faq-icon{width:20px;height:20px;border-radius:50%;background:var(--blue-light);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform 0.3s,background 0.2s}
.faq-icon{transition:background var(--d-base) var(--ease-out)}
.faq-icon svg{stroke:var(--blue);transition:transform var(--d-base) var(--ease-press),stroke var(--d-base) var(--ease-out)}
.faq-btn{transition:color var(--d-fast) var(--ease-out)}
.faq-btn:hover .faq-q{color:var(--blue)}
.faq-item.open .faq-icon{background:var(--blue)}
.faq-item.open .faq-icon svg{stroke:#fff;transform:rotate(45deg)}
/* grid-template-rows rather than a max-height guess: the old rule capped at
   300px, so a longer answer would simply have been cut off, and the
   animation ran against a number that had nothing to do with the content. */
.faq-a{display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows var(--d-base) var(--ease-out),opacity var(--d-base) var(--ease-out);
  opacity:0}
.faq-a > *{min-height:0}
.faq-a-inner{font-size:0.86rem;color:var(--text2);line-height:1.85;padding:0 0 1.3rem}
.faq-item.open .faq-a{grid-template-rows:1fr;opacity:1}

/* DEMO / ASSESSMENT FORMS */
.cta-final{background:linear-gradient(135deg,var(--blue-xdark) 0%,var(--blue) 100%);padding:4.5rem 1.5rem;text-align:center;color:#fff}
.cta-final h2{font-size:1.7rem;font-weight:900;margin-bottom:0.6rem}
.cta-final p{opacity:0.85;max-width:460px;margin:0 auto 1.6rem;line-height:1.7;font-size:0.92rem}

/* ---- dialogs ------------------------------------------------------------
   These are the same forms, in the same house style, as the console's sign-in
   screen at /app. That is deliberate: this dialog is the last thing somebody
   sees before they become a customer and the first thing they see after, so
   the two should not look like they were made by different people. Field
   height, radius, focus ring, label weight, button and timing are lifted from
   .au-* in business-app.html — if that screen is restyled, restyle this too.

   The accent inside the dialog is the product's indigo rather than the
   marketing navy, for the same reason: it is a doorway into the product. It
   is scoped to the overlay so nothing else on the page shifts colour. */
.form-overlay{
  --fm-blue:#4338CA;
  --fm-blue-dark:#372FA3;
  --fm-ring:rgba(67,56,202,.13);
  --au-ease:cubic-bezier(.25,.46,.45,.94);   /* quick out, soft landing */
  --au-fast:140ms;
  --au-mid:220ms;
}

.form-overlay{display:none;position:fixed;inset:0;z-index:1000;
  align-items:center;justify-content:center;padding:1rem;
  background:rgba(12,15,26,.62);
  opacity:0;transition:opacity var(--au-mid) var(--au-ease)}
@supports (backdrop-filter:blur(2px)){
  .form-overlay{backdrop-filter:blur(3px)}
}
.form-overlay.open{display:flex}
.form-overlay.is-shown{opacity:1}

.form-modal{
  background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:1.75rem;width:100%;max-width:436px;max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:0 24px 60px -18px rgba(12,15,26,.42);
  opacity:0;transform:translateY(10px) scale(.985);
  transition:transform var(--au-mid) var(--au-ease),opacity var(--au-mid) var(--au-ease)}
.form-overlay.is-shown .form-modal{opacity:1;transform:none}

/* The fields arrive after the panel does, a few milliseconds apart, the way
   the console's do. It is the difference between a dialog appearing and a
   dialog opening. */
.form-overlay.is-shown .form-modal > div > *{animation:fmRise 260ms var(--au-ease) both}
@keyframes fmRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.form-overlay.is-shown .form-modal > div > *:nth-child(1){animation-delay:70ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(2){animation-delay:100ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(3){animation-delay:125ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(4){animation-delay:148ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(5){animation-delay:169ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(6){animation-delay:188ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(7){animation-delay:205ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(8){animation-delay:220ms}
.form-overlay.is-shown .form-modal > div > *:nth-child(n+9){animation-delay:234ms}

.form-modal-close{position:absolute;top:12px;right:12px;background:none;border:0;
  font-size:1.25rem;line-height:1;cursor:pointer;color:var(--text3);
  width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  transition:color var(--au-fast) var(--au-ease),background var(--au-fast) var(--au-ease)}
.form-modal-close:hover{color:var(--text);background:var(--bg2)}

.form-modal h2{font-family:'Sora',sans-serif;font-size:1.5rem;font-weight:700;
  letter-spacing:-.5px;margin:0 0 6px;color:var(--text);line-height:1.2}
.form-modal-sub{font-size:0.875rem;color:var(--text3);line-height:1.65;margin:0 0 22px}

.form-modal label{display:block;font-size:0.75rem;font-weight:600;color:var(--text2);
  text-transform:none;letter-spacing:0;margin:14px 0 6px}
.form-modal label:first-of-type{margin-top:0}

.form-modal input,.form-modal select,.form-modal textarea{
  width:100%;height:42px;background:var(--bg2);border:1.5px solid var(--border);
  border-radius:9px;padding:0 12px;font-size:0.9375rem;color:var(--text);font-family:inherit;
  outline:none;
  transition:border-color var(--au-fast) var(--au-ease),
             box-shadow var(--au-fast) var(--au-ease),
             background var(--au-fast) var(--au-ease)}
.form-modal input:hover:not(:focus),
.form-modal select:hover:not(:focus),
.form-modal textarea:hover:not(:focus){border-color:var(--text3)}
.form-modal input:focus,.form-modal select:focus,.form-modal textarea:focus{
  border-color:var(--fm-blue);box-shadow:0 0 0 3px var(--fm-ring);background:var(--card)}
.form-modal select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7189' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.form-modal textarea{height:auto;min-height:84px;padding:11px 12px;resize:vertical;line-height:1.6}

/* a field that is wrong says so by moving, once */
.form-modal input.is-bad,.form-modal select.is-bad,.form-modal textarea.is-bad{
  border-color:var(--red);animation:fieldShake 340ms var(--au-ease)}
@keyframes fieldShake{
  10%,90%{transform:translateX(-2px)}
  30%,70%{transform:translateX(3px)}
  50%{transform:translateX(-3px)}
}

/* the row carries the gap that its labels gave up, so a two-up pair sits the
   same distance below the field above it as a single field would */
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.form-row2 > div > label{margin-top:0}
/* a note on a label, in the label's own line rather than under it */
.form-opt{font-weight:400;color:var(--text3);font-size:.72rem;margin-left:.4rem}

.form-submit{
  width:100%;height:44px;background:var(--fm-blue);color:#fff;border:0;border-radius:9px;
  font-family:'Sora',sans-serif;font-size:0.9375rem;font-weight:600;cursor:pointer;
  margin-top:22px;padding:0;
  transition:background var(--au-fast) var(--au-ease),
             transform 90ms var(--au-ease),
             box-shadow var(--au-mid) var(--au-ease)}
.form-submit:hover:not(:disabled){background:var(--fm-blue-dark);
  box-shadow:0 4px 14px rgba(67,56,202,.26)}
.form-submit:active:not(:disabled){transform:scale(.985)}
.form-submit:disabled{opacity:.6;cursor:not-allowed}
.form-submit:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(67,56,202,.35)}

.form-err{display:none;background:var(--red-light);color:#991b1b;
  border:1px solid rgba(185,28,28,.3);border-radius:9px;padding:10px 12px;
  font-size:0.8125rem;line-height:1.55;margin-top:14px}
.form-err.on,.form-err[style*="block"]{animation:auShake .34s var(--au-ease)}
@keyframes auShake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(3px)}50%{transform:translateX(-3px)}}

.form-success{display:none;text-align:center;padding:.5rem 0 0}
.form-success svg{color:var(--green);margin-bottom:0.9rem}
.form-success h3{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700;
  letter-spacing:-.3px;margin-bottom:0.5rem;color:var(--text)}
.form-success p{font-size:0.875rem;color:var(--text3);line-height:1.7}

.newsletter-section{background:var(--blue-xdark);padding:3.5rem 1.5rem;border-top:1px solid rgba(255,255,255,0.1)}
.newsletter-inner{max-width:640px;margin:0 auto;text-align:center;color:#fff}
.newsletter-inner h2{font-size:1.5rem;font-weight:900;margin-bottom:0.6rem}
.newsletter-inner p{font-size:0.9rem;opacity:0.8;line-height:1.7;margin-bottom:1.5rem}
.newsletter-form{display:flex;gap:8px;max-width:420px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.newsletter-form input{flex:1;min-width:220px;border:1.5px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.08);color:#fff;border-radius:9px;padding:11px 14px;font-size:0.88rem;font-family:inherit;outline:none}
.newsletter-form input::placeholder{color:rgba(255,255,255,0.5)}
.newsletter-form input:focus{border-color:#fff}
.newsletter-form button{background:var(--red);color:#fff;border:none;padding:11px 22px;border-radius:9px;font-weight:700;font-size:0.88rem;cursor:pointer;font-family:'Sora',sans-serif;white-space:nowrap}
.newsletter-form button:hover{background:#b91c1c}
.newsletter-form button:disabled{background:rgba(255,255,255,0.2);cursor:not-allowed}
.newsletter-note{font-size:0.72rem;opacity:0.55;margin-top:0.9rem;line-height:1.6}
.newsletter-success{display:none;color:#4ade80;font-size:0.88rem;font-weight:700;margin-top:0.4rem}

/* ---- the footer -------------------------------------------------------
   Three lines of centred text told nobody anything. A site with a platform,
   two other products and a pricing table has enough to say that it can be
   laid out as a map of itself: what we make on the left, where to go on the
   right, and the small print underneath its own rule. */
footer{background:#081735;color:rgba(255,255,255,.62);text-align:left;
  padding:3.6rem 1.5rem 1.6rem;font-size:0.82rem;line-height:1.7}
/* Two regions with a rule between them, rather than four columns that all
   stop at different heights and leave the bottom half of the footer empty.
   Everything about the site is on the left; the one thing that asks something
   of the reader is on the right, in a column that runs the whole height and
   ends on the social links. */
.ft-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:0;align-items:stretch}
.ft-main{padding-right:3.2rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:2.4rem 2rem;align-content:start}
.ft-side{padding-left:3.2rem;border-left:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column}
/* The brand column held five short lines and then stopped, leaving the tallest
   empty space in the footer directly under the name of the company. It runs
   the full height of the grid now and the words are set at a size that uses
   it — same words, given the room they were rattling around in. */
/* the brand sits across the top of the left region, and the link columns run
   underneath it — which is what gives that side its second row */
.ft-brand{grid-column:1 / -1;margin-bottom:.4rem}
.ft-brand .ft-logo{display:flex;align-items:center;gap:8px;color:#fff;
  font-size:1.5rem;font-weight:800;letter-spacing:-.6px;text-decoration:none;margin-bottom:1.15rem}
.ft-brand .ft-logo em{color:#f87171;font-style:normal}
.ft-brand p{margin:0;max-width:62ch;font-size:0.9rem;line-height:1.8;color:rgba(255,255,255,.6)}
/* Two panels built from one rule, so they are the same object twice: same
   width, same border, same radius, same padding, contents centred. Each sits
   under its own heading rather than swallowing it, which is what keeps them
   reading as a pair instead of two different ideas. */
.ft-panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:1.4rem 1.3rem;text-align:center}
.ft-news{margin:0}
.ft-news h4,.ft-social h4{margin:0 0 .8rem;font-size:0.9rem;font-weight:700;color:#fff;
  letter-spacing:0;text-transform:none;font-family:inherit}
.ft-news p{margin:0 0 1.1rem;font-size:0.79rem;line-height:1.7;color:rgba(255,255,255,.58);
  max-width:none}
.ft-newsform{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:none}
.ft-newsform input{flex:1;min-width:190px;border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;border-radius:9px;padding:10px 12px;
  font-size:0.82rem;font-family:inherit;outline:none;transition:border-color .16s,background .16s}
.ft-newsform input::placeholder{color:rgba(255,255,255,.42)}
.ft-newsform input:focus{border-color:rgba(255,255,255,.65);background:rgba(255,255,255,.1)}
.ft-newsform button{background:var(--red);color:#fff;border:0;padding:10px 18px;border-radius:9px;
  font-weight:700;font-size:0.82rem;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .16s}
.ft-newsform button:hover{background:#b91c1c}
.ft-newsform button:disabled{background:rgba(255,255,255,.18);cursor:not-allowed}
.ft-newsnote{font-size:0.7rem;color:rgba(255,255,255,.4);margin-top:.8rem;line-height:1.55}
/* pushed to the bottom of the column, so the side ends level with the links */
.ft-social{margin-top:auto;padding-top:1.9rem}
/* Each one is a circle with its name under it, so the link is the pair rather
   than the icon alone — which also gives the row something to space out by.
   The hover moves the circle and leaves the name where it is; the whole thing
   lifting looks like the text is loose. */
.ft-socrow{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.ft-soc{display:flex;flex-direction:column;align-items:center;gap:10px;
  text-decoration:none;color:#fff;flex-shrink:0}
.ft-socico{width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.ft-soc:hover .ft-socico{background:var(--red);border-color:transparent;
  transform:translateY(-3px);box-shadow:0 8px 20px -6px rgba(220,38,38,.8)}
.ft-soc:focus-visible{outline:none}
.ft-soc:focus-visible .ft-socico{outline:2px solid #fff;outline-offset:2px}
.ft-socico svg{width:21px;height:21px}
.ft-socname{font-size:0.75rem;font-weight:600;color:#fff;letter-spacing:.1px;line-height:1}
@media(max-width:400px){.ft-socrow{gap:20px}}
.ft-col h4{margin:0 0 1.05rem;font-size:0.72rem;font-weight:800;letter-spacing:1px;
  text-transform:uppercase;color:#fff;font-family:inherit}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.62rem}
.ft-col a{color:rgba(255,255,255,.72);text-decoration:none;font-size:0.84rem;cursor:pointer;
  transition:color .16s}
.ft-col a:hover{color:#fff}
.ft-ext{opacity:.45;margin-left:5px;vertical-align:-1px}
.ft-rule{max-width:1180px;margin:2.8rem auto 0;height:1px;background:rgba(255,255,255,.12)}
.ft-base{max-width:1180px;margin:0 auto;padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;
  align-items:center;justify-content:space-between;font-size:0.78rem;color:rgba(255,255,255,.45)}
.ft-base nav{background:none;padding:0;height:auto;position:static;box-shadow:none;
  display:flex;gap:1.2rem;align-items:center}
.ft-base a{color:rgba(255,255,255,.55);text-decoration:none}
.ft-base a:hover{color:#fff}
@media(max-width:900px){
  .ft-grid{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  .ft-main{padding-right:0}
  .ft-side{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:2.2rem}
  .ft-social{margin-top:2rem}
}
@media(max-width:620px){
  .ft-main{grid-template-columns:1fr 1fr;gap:2rem 1.4rem}
}
@media(max-width:520px){
  footer{padding:2.6rem 1.2rem 1.4rem}
  .ft-base{flex-direction:column;align-items:flex-start}
}

@media(max-width:800px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  .hero p{max-width:100%}
}

/* ======================================================================
   2026 REFRESH
   Sections carry themselves on space and hierarchy instead of being
   wrapped in cards. Display type is large and light; body stays 16/1.6.
   Motion is short and purposeful, and disappears under reduced-motion.
   ====================================================================== */
/* ---- motion tokens ------------------------------------------------------
   Every duration and curve on this page comes from here, so the whole site
   shares one sense of weight. Three speeds is enough: fast for things that
   respond to a pointer, base for state changes, slow for things arriving
   from off-screen.

   --ease-out is an expo-out: most of the distance is covered in the first
   third, so movement arrives and settles instead of gliding. --ease-press
   overshoots very slightly, which is what makes a button feel like it has
   mass when you let go of it. */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.34,1.28,.64,1);
  --d-fast:150ms;
  --d-base:300ms;
  --d-slow:620ms;
  --maxw:1120px;

  /* The hero has its own pair. Two seconds is far longer than anything else
     on the page moves, which is deliberate: it is the first thing seen and
     nothing is competing with it, so it can afford to take its time. An
     expo-out over two seconds would cover the distance in the first half
     second and then crawl, which reads as a stall rather than a descent —
     hence a gentler curve that keeps moving the whole way down. */
  --d-hero:2000ms;
  --ease-hero:cubic-bezier(.25,.6,.3,1);
}
/* the old name, still used by a few rules written before the tokens existed */
:root{--rv-e:var(--ease-out)}
.wrap2{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}

/* rhythm: generous air, hairline rules — no card borders */
.band{padding:6.5rem 1.5rem;position:relative}
.band+.band{border-top:1px solid var(--border)}
.band-tint{background:var(--bg2)}
@media(max-width:800px){.band{padding:4rem 1.2rem}}

/* The dot is a flex item, so centring it centres it against the whole block.
   On a phone this label wraps to two lines and the dot went and sat in the
   gutter between them, on its own. It belongs beside the first line whether
   there is one line or three. */
.eyebrow2{display:inline-flex;align-items:flex-start;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:1.4px;line-height:1.45;text-transform:uppercase;color:var(--blue);margin-bottom:1.1rem}
.eyebrow2::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;margin-top:5px}
.band-tint .eyebrow2,.dark-band .eyebrow2{color:#7aa5f5}

/* display type: big, light, tight — the single biggest tell of a considered site */
.d1{font-size:clamp(2.4rem,5vw,3.9rem);font-weight:600;line-height:1.08;letter-spacing:-1.6px;color:var(--text)}
.d2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:600;line-height:1.15;letter-spacing:-1px;color:var(--text)}
.lede{font-size:1.06rem;line-height:1.7;color:var(--text2);max-width:36em}
.dark-band .d1,.dark-band .d2{color:#fff}
.dark-band .lede{color:rgba(255,255,255,.72)}

/* pill controls */
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 28px;border-radius:100px;font-family:'Sora',sans-serif;font-size:.95rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:transform var(--d-base) var(--ease-out),background var(--d-base),box-shadow var(--d-base),border-color var(--d-base);text-decoration:none;white-space:nowrap}
.btn2-primary{background:var(--blue);color:#fff}
.btn2-primary:hover{background:var(--blue-dark);box-shadow:0 8px 24px rgba(26,86,219,.28);transform:translateY(-1px)}
.btn2-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn2-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
/* On a blue band a blue button disappears, and a white one puts a white patch
   on a field that is meant to be all blue. Red is neither: it is already the
   colour of Book a Demo in the bar and of the same button in the closing band,
   so this is the one it should have been wearing all along. */
.dark-band .btn2-primary{background:var(--red);color:#fff}
.dark-band .btn2-primary:hover{background:#b91c1c;color:#fff;
  box-shadow:0 10px 28px rgba(220,38,38,.38)}
.dark-band .btn2-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.dark-band .btn2-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn2:active{transform:translateY(0) scale(.97);transition-duration:80ms}

/* ---- pointer feedback ---------------------------------------------------
   Every button on the page lifts 2px and gains a shadow on hover, and
   presses to 97% on click. The press is the part that matters: it is the
   only confirmation a person gets in the moment between clicking and the
   page responding, and at 80ms it registers without being seen. */
.nav-cta,.plan-biz-btn,.pt-btn,.form-modal button[type=submit],.ft-news button{
  transition:background var(--d-fast) var(--ease-out),
             box-shadow var(--d-fast) var(--ease-out),
             transform var(--d-fast) var(--ease-press),
             border-color var(--d-fast) var(--ease-out)}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px -6px rgba(220,38,38,.55)}
.nav-cta:active{transform:translateY(0) scale(.97);transition-duration:80ms}
.plan-biz-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(26,86,219,.45)}
.plan-biz-btn:active{transform:translateY(0) scale(.97);transition-duration:80ms}
.pt-btn:hover{transform:translateY(-1px);border-color:var(--blue);color:var(--blue)}
.pt-btn:active{transform:translateY(0) scale(.97);transition-duration:80ms}
/* the submit button's own hover and press live with the rest of the dialog
   styles above; this once set a second, conflicting pair here */

/* alternating two-column feature rhythm */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:4.5rem;align-items:center;max-width:var(--maxw);margin:0 auto}
.split.flip>*:first-child{order:2}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:2.2rem}.split.flip>*:first-child{order:0}}

/* product shots: real UI, framed with depth rather than decoration */
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:0 26px 60px -20px rgba(13,32,74,.32),0 8px 20px -12px rgba(13,32,74,.2);background:var(--card);position:relative}
/* rotating product deck
   -----------------------------------------------------------------------
   Four screens on a loop, and the whole thing is driven by one animation:
   the progress bar. Its fill is what times the slide, and its animationend
   is what advances to the next one — so there is no timer running alongside
   the bar that could drift out of step with it, and pausing is a matter of
   pausing that one animation rather than clearing and restarting a clock.

   Everything here moves on opacity and transform only. The frame never
   moves or resizes: the Ken Burns drift is on the <img> inside a clipped
   .shot, so the card edges stay exactly where they are. */
/* on :root, not on .shotdeck — the progress segments live in .deck-ui, which
   is a sibling of the deck, so a custom property scoped to the deck left them
   with an animation that had no duration and therefore never ran at all */
:root{--deck-dwell:4600ms}
.shotdeck{position:relative;aspect-ratio:1208/720;background:#0F1117;border-radius:14px}
.deck-slide{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity 700ms cubic-bezier(.4,0,.2,1);will-change:opacity}
.deck-slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.deck-slide.is-leaving{opacity:0;z-index:1}
.deck-slide .shot{height:100%;overflow:hidden}
.deck-slide .shot img{width:100%;height:100%;object-fit:cover;object-position:top left;display:block;
  transform-origin:50% 42%;will-change:transform;backface-visibility:hidden}
/* the drift runs for exactly as long as the slide is up */
@keyframes deckDrift{from{transform:scale(1)}to{transform:scale(1.035)}}
.deck-slide.is-active .shot img{animation:deckDrift var(--deck-dwell) linear forwards}
/* held at the far end while it fades out, so removing the animation does not
   snap the picture back while it is still visible */
.deck-slide.is-leaving .shot img{animation:none;transform:scale(1.035)}
.shotdeck.is-paused .deck-slide.is-active .shot img{animation-play-state:paused}

.deck-ui{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.deck-dots{display:flex;gap:7px}
/* each dash is the countdown for its own slide */
.deck-seg{position:relative;width:40px;height:4px;border-radius:3px;border:0;padding:0;
  cursor:pointer;background:rgba(255,255,255,.26);overflow:hidden;
  transition:background .3s}
.deck-seg:hover{background:rgba(255,255,255,.4)}
.deck-seg:focus-visible{outline:2px solid #8fb4ff;outline-offset:3px}
.deck-fill{position:absolute;inset:0;background:#8fb4ff;border-radius:inherit;
  transform:scaleX(0);transform-origin:left center;will-change:transform}
@keyframes deckFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.deck-seg.on .deck-fill{animation:deckFill var(--deck-dwell) linear forwards}
.deck-seg.done .deck-fill{transform:scaleX(1)}
.shotdeck-ui.is-paused .deck-seg.on .deck-fill{animation-play-state:paused}

/* the caption follows the picture rather than moving with it */
.deck-ui .shot-cap{margin:0;min-height:1.2em;
  transition:opacity 380ms cubic-bezier(.4,0,.2,1) 100ms,
             transform 380ms cubic-bezier(.4,0,.2,1) 100ms}
.deck-ui .shot-cap.swap{opacity:0;transform:translateY(8px);transition-delay:0ms}

@media(prefers-reduced-motion:reduce){
  .deck-slide{transition:opacity .2s linear}
  .deck-slide.is-active .shot img{animation:none}
  .deck-seg.on .deck-fill{animation:none;transform:scaleX(1)}
  .deck-ui .shot-cap{transition:none}
}
/* A full desktop dashboard scaled to phone width is unreadable, so on small
   screens show the top-left of the shot at legible scale instead of shrinking
   the whole thing. The interesting part — score and headline — lives there. */
@media(max-width:640px){
  /* Crop rather than shrink so the dashboard stays legible, but never with
     width:auto + max-width:none — an unconstrained parent then lets the image
     render at its natural 2416px and blows the page width out. Cover against a
     fixed ratio cannot overflow whatever the parent does. */
  .shot{aspect-ratio:1/1}
  .shot img{width:100%;height:100%;max-width:100%;transform:none;object-fit:cover;object-position:20% 0}
  /* the deck owns its own ratio; its shots simply fill it. overflow is clipped
     because at this width the off-stage slides would otherwise scroll the page */
  .shotdeck{aspect-ratio:5/4;overflow:hidden;border-radius:14px}
  .deck-slide .shot{width:100%;height:100%;aspect-ratio:auto}
  /* anchored left so headings read from their first letter rather than
     being sliced mid-word by a centred crop */
  .deck-slide .shot img{object-position:0 0}
}
.shot img{width:100%;height:auto;display:block}
  /* ---- the product shots ------------------------------------------------
     A dark rectangle with a crisp border, sitting on a blue gradient, reads
     as a picture of an application rather than part of the page. The border
     is what does most of it: a hard edge all the way round announces where
     the screenshot stops and the site starts.

     So there is no border. The frame is the hero's own deep blue rather than
     near-black, it sits in a wide blue glow that bleeds into the band, and
     the screenshot itself carries a wash of the same blue. The edge is still
     legible — the glow and the highlight along the top see to that — but it
     is a soft one, and the shot now sits in the band instead of on it. */
.dark-band .shot{border:none;
    box-shadow:0 40px 90px -30px rgba(4,14,44,.85),
               0 0 0 1px rgba(122,165,245,.10),
               0 0 120px -20px rgba(59,130,246,.42),
               inset 0 1px 0 rgba(255,255,255,.08)}
.dark-band .shotdeck{background:#0b1f4d;
    box-shadow:0 0 140px -30px rgba(96,165,250,.55)}
  /* and a wash of the band's own blue over the screenshot, light enough to
     leave every figure on it readable */
.dark-band .shot::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(165deg,rgba(96,165,250,.16),rgba(26,86,219,.10) 55%,rgba(13,46,122,.14));
    mix-blend-mode:screen}
.shot{position:relative}
.shot-cap{font-size:.72rem;color:var(--text3);margin-top:12px;text-align:center}
.dark-band .shot-cap{color:rgba(255,255,255,.45)}

/* checklist used beside feature copy */
.ticks{list-style:none;margin:1.6rem 0 0;display:grid;gap:.85rem}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--text2);line-height:1.6}
.ticks svg{flex-shrink:0;margin-top:3px;color:var(--green)}
.dark-band .ticks li{color:rgba(255,255,255,.75)}

/* proof strip — real capability claims, never fabricated customers */
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2.5rem;max-width:var(--maxw);margin:0 auto}
.proof-n{font-family:'Sora',sans-serif;font-size:2.4rem;font-weight:600;letter-spacing:-1.2px;line-height:1;color:var(--text)}
.dark-band .proof-n{color:#fff}
.proof-l{font-size:.9rem;color:var(--text2);margin-top:.6rem;line-height:1.55}
.dark-band .proof-l{color:rgba(255,255,255,.65)}

/* hero: statement first, product immediately after — the Hoxhunt move */
/* Making it lighter was the wrong fix on its own: one flat bright blue from
   edge to edge is a slab whichever end of the scale it sits at. What was
   missing is depth — somewhere for the light to come from.

   So: a deep blue ground, a broad glow spilling from above the headline as if
   something is lit off-screen, a trace of the brand red in the far corner so
   the accent belongs to the picture rather than only to the buttons, and a
   faint grid that fades out before it reaches the text. Everything is layered
   on one element; nothing here costs a repaint. */
/* One deep blue, evenly. Every attempt to give this band "depth" did it by
   adding light — a glow above the headline, a grid, a lighter top — and each
   one showed up as a pale patch on a colour that is supposed to read as a
   single solid field. The dimension it needs is the other direction: the same
   blue, settling darker toward the bottom. Nothing lighter than the top stop
   appears anywhere on it. */
/* The same ramp the scan page uses: linear-gradient(150deg, --blue-xdark to
   --blue). Both pages carry the same two tokens, so this is literally the
   same declaration rather than a colour picked to look like it — the two
   heroes cannot drift apart later. */
.hero2{position:relative;padding:5.5rem 1.5rem 0;text-align:center;overflow:hidden;
  background:linear-gradient(150deg,var(--blue-xdark) 0%,var(--blue) 100%)}
.hero2 > *{position:relative;z-index:1}
.hero2-inner{max-width:860px;margin:0 auto}
.hero2-h1{margin-bottom:1.4rem}
.hero2-h1 em{color:#f87171;font-style:normal}
.hero2-lede{margin:0 auto;font-size:1.12rem}
.hero2-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
/* Three separate promises run together into one grey sentence with dots
   between them, which is a footnote, not reassurance. Three marks, three
   facts, each one able to be read on its own. */
.hero2-meta{list-style:none;margin:1.8rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.hero2-meta li{display:inline-flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;color:rgba(255,255,255,.82);line-height:1;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:8px 14px 8px 11px;white-space:nowrap}
.hero2-meta svg{flex-shrink:0;color:#7ee2a8}
@media(min-width:1040px){.hero2-meta{justify-content:flex-start}}
@media(max-width:400px){.hero2-meta li{font-size:.73rem;padding:7px 11px 7px 9px}}
.hero2-shot{max-width:840px;margin:3.2rem auto 0;padding-bottom:calc(3.5rem + var(--wave-h))}
@media(max-width:800px){.hero2{padding-top:3.4rem}
  .hero2-shot{margin-top:2.4rem;padding-bottom:calc(1.5rem + var(--wave-h))}}

/* ---- where the blue ends ----------------------------------------------
   One path. Blue above it, the colour of the next section below it, and the
   line between them is a single unhurried curve that sits low on the left and
   rises to the right. Not two of anything, not a ribbon, not a seam standing
   on its end — a divider, which is what was being asked for. */
.hero2{--wave-h:clamp(58px,8vw,132px)}
.hero2-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;
  height:var(--wave-h);display:block;z-index:1;pointer-events:none}
.hero2-wave path{fill:var(--bg2)}

/* ---- the split, once there is width for one ---------------------------
   Words on the left, the product on the right, and a curve rather than a
   straight edge between them. The right side is the same blue lifted a few
   per cent, so the seam reads as light falling across the band instead of as
   two panels butted together — which is the only way a divider like this
   works without looking like a join.

   It is one SVG stretched over the whole band with preserveAspectRatio:none,
   so the curve keeps its shape at any width instead of flattening out. Below
   1040px none of this applies and the hero stays the stacked, centred one. */
@media(min-width:1040px){
  /* The product gets the bigger half. Giving the words a narrower measure is
     not a sacrifice — a headline reading across 40-odd characters is better
     than one reading across 60 — and it buys the curve the room to lean
     properly at the same time. */
  .hero2{display:grid;align-items:center;column-gap:3.4rem;text-align:left;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    padding:4.6rem max(1.5rem,calc((100% - 1440px) / 2)) calc(3rem + var(--wave-h))}
  .hero2-inner{max-width:none;margin:0}
  .hero2-lede{margin:0;max-width:44ch}
  .hero2-ctas{justify-content:flex-start}
  .hero2-shot{max-width:none;margin:0;padding-bottom:0}
  .deck-ui{justify-content:flex-start}
  /* anchored to the gutter rather than stretched across the whole band. A
     full-width viewBox puts the curve at a fixed fraction of the page, and the
     text column is not a fixed fraction of the page — so at one width the
     curve cleared the headline and at the next it ran straight through it.
     Starting the box at 42% means the curve keeps its distance from the words
     at every width, because both are measured from the same edge. */
  /* width and height stated outright, because an <svg> with height:auto sizes
     itself from its viewBox ratio rather than from top/bottom offsets. With a
     100x800 box that made this element ten times the height of the hero and
     overflow:hidden quietly cropped it, so what has been on the page was the
     top sliver of a hugely stretched shape rather than the curve as drawn. */

}
/* the widest case: let the words breathe rather than stretching the column */
@media(min-width:1500px){.hero2-lede{max-width:40ch}}

/* the funnel card moved off the dark hero onto a light band, so it needs
   its own light treatment rather than the translucent-on-navy version */
.funnel-card-standalone{background:var(--blue-xdark);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.8rem;backdrop-filter:none;
  box-shadow:0 26px 60px -22px rgba(13,32,74,.4)}
.funnel-card-standalone .funnel-head strong{color:#fff}
.funnel-card-standalone .funnel-label{color:rgba(255,255,255,.72)}
.funnel-card-standalone .funnel-label strong{color:#fff}
.funnel-card-standalone .funnel-note{color:rgba(255,255,255,.5)}

/* scroll-reveal */
/* ---- motion ------------------------------------------------------------
   One system, not several. Everything that moves on this page moves the
   same way: up a little, into focus, at the same speed, on the same curve.

   The curve is an expo-out — almost all of the distance is covered in the
   first third of the duration, so it arrives quickly and settles rather
   than gliding. That is what separates motion that feels engineered from
   motion that feels like a slideshow transition.

   The blur is what makes it read as depth rather than as a sliding box. It
   is only 7px and it is gone in half a second, but without it the same
   translate looks cheap.

   Everything replays. Scroll back up to a section and it plays again —
   asked for, and right: these are small signals that something is alive,
   not a one-time curtain-raise. */
/* translate and scale rather than transform, deliberately. A card that is
   revealed by transform and then lifted on hover by transform is one
   property being fought over by two rules, and the reveal wins because it
   is declared later — which is exactly how every card hover on this page
   came to do nothing. These are separate properties, so the reveal and the
   hover compose instead of colliding, and the floating hero shot can keep
   its own transform animation at the same time.

   Where they are not supported the element simply never hides, which is the
   right way for this to fail. */
/* No blur. It used to arrive out of focus and sharpen, which on text reads
   as the page still loading rather than as motion, and on the product shot
   made a screenshot of a dashboard look like a photograph of one. Fading and
   moving is enough. It also costs nothing: a filter on a large element is
   repainted every frame, a translate is not. */
.rv{opacity:0;translate:0 24px;scale:.985;
  transition:opacity var(--d-slow) var(--ease-out),translate var(--d-slow) var(--ease-out),
             scale var(--d-slow) var(--ease-out)}
.rv.in{opacity:1;translate:none;scale:none}


/* The product shot is big, so it moves less than the lines beside it —
   a large object crossing the same distance as a small one looks wrong.
   It comes down with them, from above, over the same two seconds.

   The .in state has to be restated here. `.rv.in` and `.hero2-shot.rv` carry
   the same specificity, and this rule comes after it, so on its own it would
   pin the shot at its starting offset for ever: the shot would fade in but
   never travel. It had been doing exactly that. */
.hero2-shot.rv{translate:0 -18px;scale:.99}
.hero2-shot.rv.in{translate:none;scale:none}

/* ---- the hero -----------------------------------------------------------
   The one place on the page where a little more is right: it is the first
   thing seen and nothing is competing with it.

   It descends. Each line starts a little above where it belongs and settles
   down into place over two seconds, one following the other by 80ms, and the
   product shot keeps breathing afterwards — seven seconds, seven pixels,
   which is under the threshold of noticing but over the threshold of feeling
   static. The float waits until the descent has finished; overlapping them
   fights the settle at exactly the moment it should be coming to rest. */
/* `.hero .hero-stage`, not `.hero-stage`, because `.hero p` up at the top of
   this stylesheet sets opacity:.85 on the lede and outranks a single class.
   The lede was therefore starting the entrance already 85% visible: it moved
   with everything else, but it did not appear, so beside a headline fading in
   from nothing it read as the one static line on the screen. The resting
   appearance is unchanged — `.hero-go .hero-stage` already won that. */
.hero .hero-stage{opacity:0;translate:0 -26px}
.hero-go .hero-stage{opacity:1;translate:none;
  transition:opacity var(--d-hero) var(--ease-hero),translate var(--d-hero) var(--ease-hero)}
.hero-go .hero-stage:nth-child(1){transition-delay:60ms}
.hero-go .hero-stage:nth-child(2){transition-delay:140ms}
.hero-go .hero-stage:nth-child(3){transition-delay:220ms}
.hero-go .hero-stage:nth-child(4){transition-delay:300ms}
.hero-go .hero-stage:nth-child(5){transition-delay:380ms}
.hero-go .hero2-shot{animation:shotFloat 7s ease-in-out 2.7s infinite}
@keyframes shotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

/* The band itself keeps moving. The gradient is three stops drifting across
   a 200% canvas over half a minute — far too slow to watch, fast enough
   that the hero is never quite the same twice. This is the cheapest kind of
   life a page can have: no elements moving, nothing to distract from the
   headline, just a surface that is not flat. */
.hero2{background-size:200% 200%;animation:heroDrift 34s ease-in-out infinite}
@keyframes heroDrift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

/* the dot beside the eyebrow breathes, so there is always one live thing
   in the first screenful */
.hero2 .eyebrow2::before{animation:eyebrowPulse 2.6s ease-in-out infinite}
@keyframes eyebrowPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}

/* bars and rings fill from nothing on the way in. Their target size is
   read off the element first and put back by the script, so the markup
   stays the source of truth for what the number actually is. */
.rv-bar{transition:width 1.05s var(--rv-e),height 1.05s var(--rv-e)}
.rv-ring{transition:stroke-dashoffset 1.15s var(--rv-e)}
/* The product card comes in behind the heading it belongs to, so the hero
   resolves top to bottom instead of everything landing at once.

   These name translate and scale, not transform. The reveal was moved off
   transform so that a hover could compose with it; this rule was left behind
   naming the property nothing animates any more, which meant the shot's
   movement snapped into place and only its opacity faded. */
.hero2-shot.rv{transition:opacity var(--d-hero) var(--ease-hero) .22s,
                          translate var(--d-hero) var(--ease-hero) .22s,
                          scale var(--d-hero) var(--ease-hero) .22s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1!important;translate:none!important;scale:none!important;transition:none!important}
  .rv-bar,.rv-ring{transition:none!important}
  /* everything added for motion, switched off in one place */
  .hero-stage{opacity:1!important;translate:none!important;transition:none!important}
  .hero-go .hero2-shot{animation:none!important}
  .hero2{animation:none!important}
  .hero2 .eyebrow2::before{animation:none!important}
  .plan-biz.in .plan-biz-badge{animation:none!important}
  .form-overlay,.form-modal{transition:none!important}
  .form-modal input.is-bad,.form-modal select.is-bad,.form-modal textarea.is-bad{animation:none!important}
  .form-overlay.is-shown .form-modal > div > *{animation:none!important}
  .form-err.on,.form-err[style*="block"]{animation:none!important}
  .faq-a{transition:none!important}
  nav{transition:none!important}
  .btn2,.nav-cta,.plan-biz-btn,.pt-btn,.dttm-card,.ind-chip,.plan-biz,
  .feat-card,.testi-card,.problem-card{transition:none!important}
  .btn2:hover,.nav-cta:hover,.plan-biz-btn:hover,.pt-btn:hover,
  .dttm-card:hover,.ind-chip:hover,.plan-biz:hover,.feat-card:hover,
  .testi-card:hover{transform:none!important}
  .btn2:hover,.btn2:active{transform:none!important}
  *{animation-duration:1ms!important;transition-duration:1ms!important}
}

/* ---- the two products ---------------------------------------------------
   One card each on the homepage. The card is the link, because the whole
   point of the section is to send someone to the right product. */
.prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:var(--maxw);margin:0 auto}
@media(max-width:860px){.prod-grid{grid-template-columns:1fr}}
.prod-card{position:relative;display:flex;flex-direction:column;gap:.7rem;padding:2rem;
  border:1px solid var(--border);border-radius:18px;background:var(--card);
  text-decoration:none;color:var(--text);overflow:hidden;
  transition:transform var(--d-base) var(--ease-out),box-shadow var(--d-base) var(--ease-out),border-color var(--d-base)}
.prod-card::before{content:'';position:absolute;inset:0 0 auto 0;height:4px;background:var(--prod-c)}
.prod-card-blue{--prod-c:var(--blue);--prod-bg:var(--blue-light)}
.prod-card-red{--prod-c:var(--red);--prod-bg:var(--red-light)}
a.prod-card:hover{transform:translateY(-3px);border-color:var(--prod-c);
  box-shadow:0 22px 48px -22px rgba(13,32,74,.35)}
a.prod-card:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.prod-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  background:var(--prod-bg);color:var(--prod-c)}
.prod-kicker{font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:.4rem}
.prod-card h3{font-size:1.45rem;font-weight:600;letter-spacing:-.5px;line-height:1.2}
.prod-card p{color:var(--text2);font-size:.95rem;line-height:1.7}
.prod-card ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:.3rem 0 .6rem}
.prod-card li{position:relative;padding-left:1.5rem;font-size:.9rem;color:var(--text)}
.prod-card li::before{content:'';position:absolute;left:2px;top:.42em;width:9px;height:9px;border-radius:50%;
  background:var(--prod-bg);box-shadow:inset 0 0 0 2.5px var(--prod-c)}
.prod-go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-family:'Sora',sans-serif;font-weight:600;font-size:.92rem;color:var(--prod-c);
  background:none;border:none;padding:0;cursor:pointer}
.prod-go svg{transition:transform var(--d-fast) var(--ease-out)}
.prod-card:hover .prod-go svg,.prod-go:hover svg{transform:translateX(4px)}
@media(max-width:600px){.prod-card{padding:1.5rem}}

/* ---- hero scenes (homepage and product pages) -------------------------------------------------------
   A short story told on a loop beside the headline. js/hero-art.js adds s1,
   s2 ... in turn; everything below draws what each step looks like. It is
   decoration (aria-hidden), so nothing in it can be focused or clicked.
   Desktop only: it lives in the hero's second column, which exists from
   1040px. Below that it is not shown at all, and since hero-art.js only
   plays while the scene is on screen, it never runs there either. */
.ha{--ha-line:rgba(255,255,255,.09);--ha-text:#e8eaf0;--ha-mut:#a0a8b8;--ha-dim:#6c7488;
  --ha-blue:#8b9dff;--ha-green:#4ade80;--ha-red:#f87171;--ha-amber:#fbbf24;
  --ha-ease:cubic-bezier(.2,.8,.2,1);
  display:none;position:relative;width:100%;max-width:580px;justify-self:center;margin:0 auto;
  text-align:left;font-size:13px;line-height:1.4;color:var(--ha-text);pointer-events:none;user-select:none}
@media(min-width:1040px){.ha{display:block}}
.ha-stage{display:flex;flex-direction:column;transition:opacity .4s ease}
.ha.ha-out .ha-stage{opacity:0}
.ha.ha-reset,.ha.ha-reset *{transition:none!important;animation:none!important}
.ha-card{position:relative;background:rgba(13,16,24,.94);border:1px solid var(--ha-line);border-radius:16px;overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(2,8,36,.8),0 1px 0 rgba(255,255,255,.04) inset}
.ha-top{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--ha-line);font-size:11.5px;font-weight:600;color:var(--ha-mut);white-space:nowrap}
.ha-top>i{width:7px;height:7px;border-radius:50%;background:var(--ha-green);flex-shrink:0}
.ha-top em{margin-left:auto;font-style:normal;font-weight:500;color:var(--ha-dim)}
.ha-ava{width:28px;height:28px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,#3b4bd8,#8b5cf6)}
.ha-m{flex:1;min-width:0}
.ha-m b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ha-m span{display:block;font-size:11.5px;color:var(--ha-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.ha-chip{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 8px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.2px;
  border:1px solid currentColor;white-space:nowrap}
.ha-chip-g{color:var(--ha-green);background:rgba(74,222,128,.08)}
.ha-chip-r{color:var(--ha-red);background:rgba(248,113,113,.08)}
.ha-chip-b{color:var(--ha-blue);background:rgba(139,157,255,.08)}
.ha-chip-n{color:var(--ha-mut);border-color:var(--ha-line);background:rgba(255,255,255,.03)}
/* two chips in one place: the later one replaces the earlier */
.ha-swap{display:grid;justify-items:end}
.ha-swap>*{grid-area:1/1;transition:opacity .3s,transform .35s var(--ha-ease)}