/* =============================================================================
   DCB Technology — design option B
   Light and dark, blue throughout. One stylesheet for every page.

   Theme resolution: light tokens on :root, dark tokens under both
   [data-theme="dark"] (the toggle) and prefers-color-scheme (the default),
   so the site follows the OS until someone presses the button.

   Card grids use auto-fit/minmax rather than fixed column counts, so they
   reflow on their own and cannot get stranded multi-column on a phone.
   ============================================================================= */

:root{
  color-scheme:light;

  /* brand blue, kept for accents only: buttons, links, icons, focus */
  --blue:#1874CD;
  --blue-600:#155FA8;
  --blue-700:#0C4370;
  --blue-300:#7FB2E6;
  --on-blue:#FFFFFF;

  /* warm stone neutrals */
  --tint:#E8E5E0;
  --tint-line:#D8D3CC;
  --ink:#1C1917;
  --ink-70:#4A423B;
  --ink-50:#6B6259;
  --line:#DEDAD4;
  --line-soft:#EDEBE7;
  --surface:#FFFFFF;
  --page:#EFEDEA;
  /* White is reserved for cards, the console and the header. Full-width bands
     that used to be white now use this, so the page never goes stark. */
  --band-soft:#F7F6F4;
  /* Hero, interior page headers and the footer. In light they sit on the page
     ground so the bands alternate; in dark they lift off it instead. */
  --band-hero:#EFEDEA;
  --head-bg:rgba(255,255,255,.90);
  --dot:rgba(24,116,205,.16);

  /* status */
  --ok:#0A6B4A;
  --ok-bg:#DDEFE4;
  --warn:#8A5300;
  --warn-bg:#F5EAD8;
  --bad:#A62B21;
  --bad-bg:#F8E7E4;

  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r:14px;
  --r-sm:10px;
  --r-pill:999px;

  --sh-sm:0 1px 2px rgba(11,27,46,.06), 0 3px 8px rgba(11,27,46,.05);
  --sh:0 2px 4px rgba(11,27,46,.05), 0 16px 32px -18px rgba(11,27,46,.35);
  --sh-lg:0 30px 64px -32px rgba(11,27,46,.38), 0 10px 26px -18px rgba(24,116,205,.35);

  --gut:clamp(20px,5vw,56px);
  --maxw:1320px;
  --head-h:74px;
  /* Header controls. The switch computes to exactly this -- option box + 3px
     padding + 1px border on each side -- and the burger is told to match, so
     resizing .theme-opt moves both instead of only one. */
  --ctl-h:38px;
}

:root[data-theme="dark"]{
  color-scheme:dark;

  --blue:#4C9AE8;
  --blue-600:#6EB0F0;
  --blue-700:#A8CFF7;
  --blue-300:#3E7099;
  --on-blue:#0A0D10;

  --tint:#1D2228;
  --tint-line:#333940;
  --ink:#F0F1F3;
  --ink-70:#C2C7CE;
  --ink-50:#9BA3AC;
  --line:#2D3238;
  --line-soft:#20252A;
  --surface:#181B1F;
  --page:#101215;
  --band-soft:#181B1F;
  --band-hero:#181B1F;
  --head-bg:rgba(24,27,31,.90);
  --dot:rgba(150,170,195,.16);

  --ok:#5CCFA2;
  --ok-bg:#123227;
  --warn:#E5B461;
  --warn-bg:#332A12;
  --bad:#FF9A92;
  --bad-bg:#331917;

  --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.3);
  --sh:0 2px 4px rgba(0,0,0,.35), 0 16px 32px -18px rgba(0,0,0,.7);
  --sh-lg:0 30px 64px -32px rgba(0,0,0,.85), 0 10px 26px -18px rgba(0,0,0,.6);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --blue:#4C9AE8;
    --blue-600:#6EB0F0;
    --blue-700:#A8CFF7;
    --blue-300:#3E7099;
    --on-blue:#0A0D10;

    --tint:#1D2228;
    --tint-line:#333940;
    --ink:#F0F1F3;
    --ink-70:#C2C7CE;
    --ink-50:#9BA3AC;
    --line:#2D3238;
    --line-soft:#20252A;
    --surface:#181B1F;
    --page:#101215;
    --band-soft:#181B1F;
    --band-hero:#181B1F;
    --head-bg:rgba(24,27,31,.90);
    --dot:rgba(150,170,195,.16);

    --ok:#5CCFA2;
    --ok-bg:#123227;
    --warn:#E5B461;
    --warn-bg:#332A12;
    --bad:#FF9A92;
    --bad-bg:#331917;

    --sh-sm:0 1px 2px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.3);
    --sh:0 2px 4px rgba(0,0,0,.35), 0 16px 32px -18px rgba(0,0,0,.7);
    --sh-lg:0 30px 64px -32px rgba(0,0,0,.85), 0 10px 26px -18px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--body);font-size:16.5px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.03em;line-height:1.06}
h2{font-size:clamp(26px,3.2vw,38px)}
h3{font-size:19px;letter-spacing:-.01em}
h4{font-size:15px;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
ul{margin:0;padding:0}
strong,b{font-weight:700}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue);color:var(--on-blue);padding:12px 18px;border-radius:0 0 var(--r-sm) 0;font-weight:700}
.skip:focus{left:0;top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- section rhythm ---------- */
section{padding:clamp(56px,7vw,96px) 0}
/* a section straight after a page header does not need the full gap on top;
   it buries the content the visitor came for below the fold */
.page-head + section{padding-top:clamp(34px,4vw,58px)}
section[id]{scroll-margin-top:calc(var(--head-h) + 16px)}
/* the header CTA jumps straight to the form, so clear the sticky bar and no more */
#form{scroll-margin-top:calc(var(--head-h) + 28px)}
.band-white{background:var(--band-soft)}
.band-tint{background:var(--tint)}
.band-line{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* ---------- scroll reveal ----------
   Targets are hidden by selector, not by a class the script has to add, so the
   first paint is already correct and nothing flashes. `reveal-on` is set by the
   inline script in each <head>, and only when motion is welcome; a failsafe
   there removes it again if site.js never runs, so content can never be
   stranded invisible. */
/* The hidden state is wrapped in :where() so it carries no specificity of its
   own. Written plainly, `main .cta-inner > div` and `main .docs li` outrank
   `main .is-in` and those elements can never be revealed at all. */
html.reveal-on main :where(.sec-head,.card,.split-art,.split-text,.steps,.cta-inner > div,.docs li){opacity:0;transform:translateY(18px)}

/* Horizontal reveals extend the scrollable area even though they do not affect
   layout, so the off-screen half of a slide would widen the page. Clipping main
   on the x axis contains it; `clip` rather than `hidden` so it does not become a
   scroll container and break the sticky header. */
main{overflow-x:clip}

/* a little directional variety so a long page does not repeat one move */
html.reveal-on main :where(.card){transform:translateY(18px) scale(.985)}
html.reveal-on main :where(.split-text){transform:translateX(-26px)}
html.reveal-on main :where(.split-art){transform:translateX(26px)}
html.reveal-on main :where(.steps){transform:translateY(26px)}

html.reveal-on main .is-in{
  opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);
}

/* the sticky header lifts off the page once you leave the top */
.site-head{transition:box-shadow .25s ease,border-color .25s ease}
.site-head.is-scrolled{box-shadow:0 8px 24px -16px rgba(11,27,46,.55);border-bottom-color:var(--tint-line)}
@media (prefers-reduced-motion:reduce){
  .site-head{transition:none}
}

/* A plain kicker, not a capsule. The pill chrome was decoration on a label that
   already reads as one -- mono, uppercase, letter-spaced, in brand blue. The
   capsules that remain (console status, SAMPLE VIEW, the pricing badge, the form
   radios) each earn theirs by marking state or being clickable. Margin absorbs
   the 6px padding and 1px border, so the gap down to the heading is unchanged. */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue-700);
  margin-bottom:27px;
}
.sec-head{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{margin:16px 0 0;color:var(--ink-70);font-size:17.5px}
/* one-line note directly above a grid, where a full section header would
   push the content itself below the fold */
.grid-note{margin:0 0 22px;font-size:15px;color:var(--ink-50);max-width:70ch}
.grid-note a{color:var(--blue-700);font-weight:700}
.lede{color:var(--ink-70);font-size:clamp(17px,1.7vw,19.5px);max-width:56ch}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  padding:13px 22px;border-radius:var(--r-pill);white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease;
}
.btn svg{width:17px;height:17px;flex:none}
.btn-solid{background:var(--blue);color:var(--on-blue)}
.btn-solid:hover{background:var(--blue-600);transform:translateY(-1px)}
.btn-outline{background:var(--surface);color:var(--blue-700);border-color:var(--tint-line)}
.btn-outline:hover{border-color:var(--blue-300);background:var(--tint);transform:translateY(-1px)}
.btn-quiet{background:transparent;color:var(--ink-70);border-color:var(--line)}
.btn-quiet:hover{color:var(--ink);border-color:var(--blue-300);background:var(--surface)}
.btn-onink{background:#FFFFFF;color:#0C4370}
.btn-onink:hover{background:#DCE9F9;transform:translateY(-1px)}
.btn-onink-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-onink-ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.75)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn-lg{padding:16px 28px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:var(--head-bg);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;gap:16px;height:var(--head-h)}
.brand{flex:none;display:block}
.brand img{height:40px;width:auto}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand img{filter:brightness(0) invert(1)}}

.nav{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:14.5px;font-weight:500}
.nav a{
  text-decoration:none;color:var(--ink-70);padding:8px 12px;border-radius:var(--r-pill);
  transition:color .15s,background .15s;white-space:nowrap;
}
.nav a:hover{color:var(--ink);background:var(--tint)}
.nav a[aria-current="page"]{color:var(--blue-700);background:var(--tint);font-weight:700}
.nav-cta{display:flex;align-items:center;gap:8px;margin-left:12px;padding-left:14px;border-left:1px solid var(--line)}
.nav-cta a{padding:9px 16px}
/* `.nav a` outranks `.btn-solid` on specificity, so the button colours have to
   be restated here or the header buttons inherit the nav link colour. */
.nav-cta .btn-solid,.nav-cta .btn-solid:hover,.nav-cta .btn-solid[aria-current="page"]{color:var(--on-blue);background:var(--blue)}
.nav-cta .btn-solid:hover{background:var(--blue-600)}
.nav-cta .btn-outline,.nav-cta .btn-outline:hover,.nav-cta .btn-outline[aria-current="page"]{color:var(--blue-700);background:var(--surface)}
.nav-cta .btn-outline:hover{background:var(--tint)}

/* three-way theme switch: system / light / dark */
.theme-switch{
  flex:none;display:inline-flex;align-items:center;gap:2px;height:var(--ctl-h);
  background:var(--line-soft);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;
}
.theme-opt{
  display:grid;place-items:center;width:32px;height:30px;flex:none;
  border:0;border-radius:var(--r-pill);background:transparent;color:var(--ink-50);
  cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;
}
.theme-opt svg{width:16px;height:16px}
.theme-opt:hover{color:var(--ink)}
.theme-opt[aria-pressed="true"]{background:var(--surface);color:var(--blue-700);box-shadow:var(--sh-sm)}

.burger{
  display:none;align-items:center;gap:9px;height:var(--ctl-h);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink);font-family:var(--body);font-size:14px;font-weight:700;padding:9px 16px;cursor:pointer;
}
.burger i{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px}
.burger i::before{top:-5px}
.burger i::after{top:5px}
.burger i,.burger i::before,.burger i::after{transition:transform .2s,background .2s,top .2s}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}

@media (max-width:1320px){
  .nav{gap:0;font-size:14px}
  .nav a{padding:8px 9px}
  .nav-cta{margin-left:8px;padding-left:10px}
  .nav-cta a{padding:9px 13px;font-size:13px}
}
@media (max-width:1180px){
  .burger{display:inline-flex}
  .theme-switch{margin-left:auto}
  .nav{
    display:none;position:absolute;left:0;right:0;top:var(--head-h);
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:10px var(--gut) 20px;box-shadow:var(--sh);
    /* a phone held sideways has barely 250px under the header */
    max-height:calc(100dvh - var(--head-h));overflow-y:auto;
  }
  .nav.open{display:flex}
  .nav a{padding:14px 12px;font-size:16px;border-radius:var(--r-sm)}
  .nav-cta{
    flex-direction:column;align-items:stretch;gap:10px;
    margin:14px 0 0;padding:16px 0 0;border-left:none;border-top:1px solid var(--line);
  }
  .nav-cta a{padding:14px 18px;font-size:15px}
}

/* the switch, the logo and the menu button all have to share a phone-width bar */
@media (max-width:560px){
  :root{--ctl-h:34px}          /* opt 26 + 8 */
  .head-inner{gap:10px}
  .brand img{height:34px}
  .theme-opt{width:26px;height:26px}
  .theme-opt svg{width:15px;height:15px}
  .burger-label{display:none}
  .burger{padding:9px 13px;gap:0}
}
/* At 560px the header row still asks for 336px of width. A 320px phone does not
   have it, and the page scrolls sideways. Below 360 everything gives a little. */
@media (max-width:359px){
  :root{--ctl-h:32px}          /* opt 24 + 8 */
  /* --gut rather than .wrap padding, so the open nav panel and every section
     narrow with it instead of only the header row */
  :root{--gut:14px}
  .head-inner{gap:8px}
  .brand img{height:30px}
  .theme-opt{width:24px;height:24px}
  .theme-opt svg{width:14px;height:14px}
  .burger{padding:8px 11px}
}
/* Below the usual 320px floor -- the Galaxy Fold cover screen reports 280. */
@media (max-width:319px){
  :root{--gut:12px}
  .brand img{height:26px}
  .burger{padding:8px 9px}
}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--band-hero);
  border-bottom:1px solid var(--line);
  padding:clamp(44px,5.5vw,76px) 0 clamp(52px,6vw,88px);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 420px at 88% -8%, rgba(24,116,205,.16), transparent 62%),
    radial-gradient(600px 340px at 4% 4%, rgba(24,116,205,.09), transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background-image:radial-gradient(var(--dot) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.5),transparent 55%);
}
.hero .wrap{position:relative;z-index:1}
/* The console changes height when a group or row is opened. Centring would
   re-centre the whole row and drag the headline with it, so the text column
   is pinned to the top and the panel grows downward on its own. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,4vw,54px);align-items:start}
@media (min-width:1040px){.hero-grid{grid-template-columns:minmax(0,0.76fr) minmax(0,1.24fr)}}
.hero h1 em{font-style:normal;color:var(--blue)}
.sec-head h2 em{font-style:normal;color:var(--blue)}
.hero .lede{margin-top:20px}
.hero .btn-row{margin-top:30px}
.hero-note{margin:20px 0 0;font-size:14px;color:var(--ink-50)}
.hero-note a{color:var(--blue-700);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--tint-line)}
.hero-note a:hover{border-bottom-color:var(--blue)}

.proof{
  display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-50);
}
.proof span{display:inline-flex;align-items:center;gap:8px}
.proof b{color:var(--ink);font-weight:700}
.proof svg{width:16px;height:16px;color:var(--blue);flex:none}

/* ---------- page header (interior pages) ---------- */
.page-head{
  position:relative;overflow:hidden;background:var(--band-hero);
  border-bottom:1px solid var(--line);
  padding:clamp(42px,5vw,68px) 0 clamp(36px,4.5vw,56px);
}
.page-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 340px at 82% -20%, rgba(24,116,205,.16), transparent 62%);
}
.page-head .wrap{position:relative;z-index:1}
.page-head .lede{margin-top:18px}

/* =============================================================================
   CONSOLE — the illustration
   ============================================================================= */
.console{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.console-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(180deg,var(--surface),var(--line-soft));border-bottom:1px solid var(--line);
}
.console-dots{display:flex;gap:6px;flex:none}
/* Window buttons, in the order every desktop puts them. The inset ring keeps
   them from floating on the pale title bar the way flat circles do. */
.console-dots i{width:11px;height:11px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.console-dots i:nth-child(1){background:#FF5F57}
.console-dots i:nth-child(2){background:#FEBC2E}
.console-dots i:nth-child(3){background:#28C840}
.console-name{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tag-sample{
  margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);
  background:var(--tint);border:1px solid var(--tint-line);padding:5px 10px;border-radius:var(--r-pill);
}
.console-body{display:grid;grid-template-columns:minmax(0,1fr)}
/* The rail was a flat 150px, which is 14px short of "Microsoft 365  486" -- the
   count rode out over the chip's own border. max-content sizes the column to
   whichever label is longest, so adding a group later cannot reintroduce this;
   150px stays as the floor so a short list still looks like a rail. */
@media (min-width:760px){.console-body{grid-template-columns:minmax(150px,max-content) minmax(0,1fr)}}

.console-rail{
  display:flex;align-items:center;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--line-soft);padding:10px 12px;
  /* a sideways swipe on the strip must not trigger the browser back gesture */
  overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.console-rail::-webkit-scrollbar{display:none}
.console-rail .rail-label{display:none}

/* Phone: the strip is wider than the screen, and nothing about a row of tabs
   that happens to end at the edge says "there are four more". Fading whichever
   side still has tabs behind it does. console.js keeps .at-start/.at-end in
   step with the scroll position; without it both edges simply stay soft. */
@media (max-width:759px){
  .console-rail{
    --fade-l:26px;--fade-r:26px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 var(--fade-l),
      #000 calc(100% - var(--fade-r)),transparent 100%);
  }
  .console-rail.at-start{--fade-l:0px}
  .console-rail.at-end{--fade-r:0px}
  /* The divider has to live on the panel below: the mask would eat 26px out of
     each end of it and leave the line looking broken. */
  .console-main{border-top:1px solid var(--line)}
}
@media (min-width:760px){
  .console-rail{display:block;overflow:visible;border-right:1px solid var(--line);padding:16px 12px}
  .console-rail .rail-label{display:block}
}
.rail-label{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);padding:0 10px;margin-bottom:10px;
}
.rail-label ~ .rail-label{margin-top:18px}
.rail-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex:none;
  font-family:var(--body);font-size:13px;color:var(--ink-70);text-align:left;
  background:transparent;border:1px solid transparent;border-radius:var(--r-sm);
  padding:8px 12px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
@media (min-width:760px){.rail-item{width:100%;margin-bottom:2px}}
/* comfortable thumb targets on the console tab strip */
@media (max-width:759px){.rail-item{padding:12px 14px}}
.rail-item:hover{background:var(--tint);color:var(--ink)}
.rail-item[aria-selected="true"]{background:var(--tint);color:var(--blue-700);font-weight:700;border-color:var(--tint-line)}
.rail-item span{font-family:var(--mono);font-size:11px;color:var(--ink-50)}
.rail-item[aria-selected="true"] span{color:var(--blue-700)}

.console-main{min-width:0}
/* grid-auto-rows:1fr so a tile that wraps onto a second row is the same height
   as the first row, and the bottom-pinned numbers line up across rows too. */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));grid-auto-rows:1fr;border-bottom:1px solid var(--line)}
/* A two-line label ("Threats blocked - 30d") pushed its number 16.5px below the
   ones beside it. The tiles are grid siblings and so already share a height;
   pinning the number to the bottom of that shared box lines all four up whatever
   their labels do, at any width, rather than reserving a fixed label height that
   a third line would break again. */
.kpi{padding:16px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column}
.kpi:last-child{border-right:none}
.kpi-lbl{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:8px;
}
.kpi-val{display:block;margin-top:auto;font-family:var(--display);font-size:clamp(23px,2.6vw,28px);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.kpi-val small{font-size:.55em;font-weight:700;color:var(--ink-50);margin-left:3px}
.spark{display:flex;align-items:flex-end;gap:3px;height:22px;margin-top:12px}
/* Height stays inline so the bars are correct with no JavaScript; the grow-in
   scales from the baseline instead, which costs no layout. */
.spark i{
  flex:1;background:var(--tint-line);border-radius:2px 2px 0 0;display:block;min-height:3px;
  transform-origin:bottom;transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.spark i.hi{background:var(--blue)}
/* last bar went the wrong way for this metric */
.spark i.hi-warn{background:var(--warn)}
@media (prefers-reduced-motion:reduce){.spark i{transition:none}}

.console-table{padding:6px 0}
.crow-wrap{border-bottom:1px solid var(--line-soft)}
.crow-wrap:last-child{border-bottom:none}
.crow{
  display:grid;width:100%;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 12px;
  grid-template-areas:"name pill chev" "meta pill chev";
  padding:12px 18px;align-items:center;text-align:left;
  font-family:var(--body);color:inherit;background:transparent;border:0;cursor:pointer;
  transition:background .15s ease;
}
.crow:hover,.crow[aria-expanded="true"]{background:var(--tint)}
.crow-chev{grid-area:chev;width:15px;height:15px;color:var(--ink-50);transition:transform .18s ease}
.crow[aria-expanded="true"] .crow-chev{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.crow-chev{transition:none}}

.crow-detail{padding:0 18px 16px;background:var(--tint)}
.crow-detail dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 14px;margin:0 0 12px;font-size:12.5px}
.crow-detail dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50);padding-top:2px}
.crow-detail dd{margin:0;color:var(--ink-70)}
.crow-events{list-style:none;border-top:1px solid var(--tint-line);padding-top:10px}
.crow-events li{display:flex;gap:10px;font-size:12.5px;color:var(--ink-70);padding:3px 0}
.crow-events time{font-family:var(--mono);font-size:11px;color:var(--ink-50);flex:none;width:44px}
.crow-name{grid-area:name;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.crow-meta{grid-area:meta;font-family:var(--mono);font-size:11.5px;color:var(--ink-50)}
.pill{
  grid-area:pill;justify-self:end;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;
}
.pill-ok{color:var(--ok);background:var(--ok-bg)}
.pill-warn{color:var(--warn);background:var(--warn-bg)}
.pill-info{color:var(--blue-700);background:var(--tint)}
@media (max-width:420px){
  .crow{grid-template-areas:"name name chev" "meta pill chev";gap:4px 10px}
  .pill{align-self:center}
  .crow-detail dl{grid-template-columns:minmax(0,1fr)}
  .crow-detail dt{padding-top:6px}
}

.console-feed{border-top:1px solid var(--line);background:var(--line-soft);padding:14px 18px}
.console-feed .feed-label{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:10px;
}
.console-feed ul{list-style:none}
.console-feed li{
  display:flex;gap:12px;align-items:baseline;
  font-size:13px;color:var(--ink-70);padding:5px 0;
}
.console-feed time{font-family:var(--mono);font-size:11px;color:var(--ink-50);flex:none;width:46px}
.console-cap{
  margin:0;padding:13px 18px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-50);line-height:1.6;background:var(--surface);
}
.console-cap b{color:var(--ink-70)}

/* =============================================================================
   CARDS
   ============================================================================= */
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.4vw,28px);box-shadow:var(--sh-sm);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease;
}
.card.lift:hover{box-shadow:var(--sh);transform:translateY(-3px);border-color:var(--blue-300)}
/* Two lines reserved, so a one-line title and a two-line title push their
   paragraph to the same place and the body text lines up across a row. 2em
   is exactly two lines at the inherited line-height of 1.15 -- expressed in em
   so it tracks the font size rather than needing a pixel value per breakpoint.
   Titles never reach three lines: measured 1 or 2 at every width from 768 up. */
.card h3{margin-bottom:10px;min-height:2.3em}
.card p{color:var(--ink-70);font-size:15.5px;margin:0}
.card p + p{margin-top:12px}

.ico{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--blue);margin-bottom:16px;
}
.ico svg{width:22px;height:22px}

/* An explicit line-height so a bold row and a regular row build the same line
   box. Without it <strong> shifts its own row's box and the tick, pinned at a
   fixed offset, sits ~1px higher than the plain rows below it. */
.ticks{list-style:none;margin:16px 0 0;font-size:14px;line-height:1.5}
.ticks li{position:relative;padding:7px 0 7px 26px;color:var(--ink);font-weight:700;border-top:1px solid var(--line-soft)}
.ticks li:first-child{border-top:none}
.ticks li::before{
  content:"";position:absolute;left:0;top:13px;width:14px;height:14px;border-radius:50%;
  background:var(--tint);border:1px solid var(--tint-line);
}
.ticks li::after{
  content:"";position:absolute;left:4px;top:17px;width:6px;height:3px;
  border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg);
}
/* the li already carries this; kept so any inline <strong> does not look odd */
.ticks strong{color:inherit;font-weight:inherit}


/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(30px,4vw,56px);align-items:center}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.split-art{
  position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--sh);padding:clamp(22px,3vw,32px);overflow:hidden;
}
.split-art::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(500px 260px at 80% 0%, rgba(24,116,205,.14), transparent 65%);
}
.split-art > *{position:relative}
.layer{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--surface);
  margin-bottom:10px;box-shadow:var(--sh-sm);
}
.layer:last-child{margin-bottom:0}
.layer-ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--tint);color:var(--blue);flex:none}
.layer-ico svg{width:18px;height:18px}
.layer b{display:block;font-size:14.5px;letter-spacing:-.01em}
/* Scoped to the descriptor line only. As `.layer span` this outranked
   .layer-ico and .pill -- both are spans inside .layer -- and quietly took the
   icon box from grid to block (killing place-items:center, which is why the
   glyph sat in the top-left corner), turned the icon grey instead of blue, and
   pushed it down 2px. */
.layer > div > span{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-50);margin-top:2px}
.layer .pill{grid-area:auto;justify-self:end}
.split-art.no-pills .layer{grid-template-columns:auto minmax(0,1fr)}

/* ---------- pricing ---------- */
.price-card{display:flex;flex-direction:column;position:relative}
.price-card.featured{border-color:var(--blue);box-shadow:var(--sh)}
.badge{
  position:absolute;top:-11px;left:clamp(22px,2.4vw,28px);
  background:var(--blue);color:var(--on-blue);font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill);
}
.price{display:flex;align-items:baseline;gap:6px;margin:14px 0 4px}
.price b{font-family:var(--display);font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--blue-700)}
.price span{font-family:var(--mono);font-size:12px;color:var(--ink-50)}
.price-for{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.price-card .btn{margin-top:auto;width:100%}
.price-card .ticks{margin-bottom:20px}

/* ---------- steps ---------- */
.steps{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.step{background:var(--surface);padding:24px 22px}
.step-n{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--tint);color:var(--blue-700);font-family:var(--mono);font-size:12px;font-weight:500;margin-bottom:14px;
}
.step h3{font-size:16.5px;margin-bottom:8px}
.step p{color:var(--ink-70);font-size:14.5px;margin:0}

/* ---------- CTA band ---------- */
.cta{background:linear-gradient(135deg,#12161A,#123E68 55%,#1268B5);color:#fff;position:relative;overflow:hidden}
.cta::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(600px 300px at 85% 10%, #000, transparent 70%);
  mask-image:radial-gradient(600px 300px at 85% 10%, #000, transparent 70%);
}
.cta .wrap{position:relative;z-index:1}
.cta-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:26px;align-items:center}
@media (min-width:860px){.cta-inner{grid-template-columns:minmax(0,1fr) auto}}
.cta h2{color:#fff}
.cta p{color:#DCE8F5;margin:14px 0 0;max-width:54ch}
/* A translucent white pill lightens the ground under 11.5px text and drags it
   to 3.4:1 over the pale end of the gradient. Tinting the pill down instead of
   up keeps the chip subtle and puts the label back above 4.5:1. */
.cta .eyebrow{color:#DCE8F5}

/* ---------- forms ---------- */
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:900px){.form-wrap{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px);box-shadow:var(--sh-sm)}
.frow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 16px}
label{display:block;font-size:13.5px;font-weight:700;color:var(--ink);margin:0 0 7px}
label .opt{font-weight:400;color:var(--ink-50)}
input,select,textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--ink);
  background:var(--page);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:18px;transition:border-color .15s,background .15s;
}
input:hover,select:hover,textarea:hover{border-color:var(--blue-300)}
input:focus,select:focus,textarea:focus{background:var(--surface);border-color:var(--blue)}
textarea{min-height:130px;resize:vertical}
::placeholder{color:var(--ink-50);opacity:1}
select option{background:var(--surface);color:var(--ink)}
[aria-invalid="true"]{border-color:var(--bad);background:var(--bad-bg)}

.choice{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.choice label{
  display:inline-flex;align-items:center;gap:9px;margin:0;cursor:pointer;font-weight:500;
  border:1.5px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;background:var(--page);
  transition:border-color .15s,background .15s;
}
.choice input{width:auto;margin:0;accent-color:var(--blue)}
.choice label:hover{border-color:var(--blue-300)}
.choice input:checked + span{color:var(--blue-700);font-weight:700}

.captcha:not(:empty){margin:0 0 18px}
.form-note{font-size:13.5px;color:var(--ink-50);margin:14px 0 0;line-height:1.6}
.form-note.bad{color:var(--bad);font-weight:700}
.form-ok{text-align:center;padding:26px 6px}
.form-ok h3{font-size:22px;margin-bottom:10px}
.form-ok p{color:var(--ink-70);margin:0}
.form-ok a{color:var(--blue-700);font-weight:700}

.direct{list-style:none}
.direct li{padding:18px 0;border-top:1px solid var(--line)}
.direct li:first-child{border-top:none;padding-top:0}
.direct h2{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-50);margin-bottom:8px}
.direct a{font-size:20px;font-weight:800;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.direct a:hover{color:var(--blue-700)}
.direct p{margin:6px 0 0;font-size:14.5px;color:var(--ink-70)}

/* ---------- listing cards ----------
   One component, two uses: the legal document list and job postings. */
.docs,.jobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.doc,.job{
  display:flex;flex-direction:column;gap:10px;height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;text-decoration:none;box-shadow:var(--sh-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.doc:hover,.doc:focus-visible,
.job:hover,.job:focus-visible{transform:translateY(-3px);box-shadow:var(--sh);border-color:var(--blue-300)}
.doc-top,.job-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.doc-ico,.job-ico{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--tint);border:1px solid var(--tint-line);color:var(--blue);flex:none;
}
.doc-ico svg,.job-ico svg{width:19px;height:19px}
.doc-name,.job-name{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.doc:hover .doc-name,.job:hover .job-name{color:var(--blue-700)}
.doc-desc,.job-desc{font-size:14px;color:var(--ink-70);line-height:1.6}
.doc-open,.job-open{
  margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:7px;
  font-size:14px;font-weight:700;color:var(--blue-700);
}
.doc-open svg,.job-open svg{width:15px;height:15px;transition:transform .15s ease}
.doc:hover .doc-open svg,.job:hover .job-open svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .doc,.job,.doc-open svg,.job-open svg{transition:none}
  .doc:hover,.job:hover{transform:none}
}

/* ---------- footer ---------- */
.site-foot{background:var(--band-hero);border-top:1px solid var(--line);padding:clamp(42px,5vw,64px) 0 28px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:32px}
.foot-brand img{height:36px;width:auto;margin-bottom:16px}
:root[data-theme="dark"] .foot-brand img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot-brand img{filter:brightness(0) invert(1)}}
.foot-brand p{font-size:14.5px;color:var(--ink-70);margin:0 0 12px;max-width:34ch}
.foot-brand a{color:var(--blue-700);font-weight:700;text-decoration:none;font-size:15px}
.foot-brand a:hover{text-decoration:underline}
/* marks the phone number in the footer as the support line, not a sales line */
.foot-tag{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-50);white-space:nowrap;margin-left:8px;
}
.foot-hours{font-family:var(--mono);font-size:11.5px;color:var(--ink-50);margin-top:12px !important;line-height:1.7}
.site-foot h2{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-50);margin-bottom:14px;
}
.site-foot ul{list-style:none}
.site-foot li{margin-bottom:9px;line-height:1.4}
.site-foot li a{font-size:14.5px;color:var(--ink-70);text-decoration:none}
.site-foot li a:hover{color:var(--blue-700);text-decoration:underline}
@media (max-width:860px){
  .site-foot li{margin-bottom:2px}
  .site-foot li a{display:inline-block;padding:9px 0}
}
.site-foot li small{display:block;font-size:12px;color:var(--ink-50);margin-top:1px}
.foot-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  margin-top:38px;padding-top:22px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-50);
}
.foot-bar a{color:var(--ink-50);text-decoration:none}
.foot-bar a:hover{color:var(--blue-700)}