/* ==========================================================================
   ClaimWorks™ — Shared Design System
   One stylesheet, every page. Change a token or component here and it
   updates site-wide. Do not duplicate these rules into page-level <style>.
   ========================================================================== */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:#0A1628;color:#F0F4F8;-webkit-font-smoothing:antialiased}
button{cursor:pointer;font-family:inherit}
a{color:inherit}
img{display:block;max-width:100%}
textarea,input{font-family:inherit}

/* Custom focus ring everywhere (replaces the browser default, which
   renders as an ugly corner-bracket outline on rounded nav/buttons).
   :focus-visible keeps it keyboard-only; plain mouse clicks stay clean. */
a,button,input,textarea{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:6px;
}

/* ── Tokens ── */
:root{
  --navy:#0A1628; --navy2:#0F1F3D; --navy3:#162847;
  --teal:#00D4C8; --teal2:#00A89E;
  /* -ink variants: the only accent shades that pass WCAG AA as text on light backgrounds */
  --teal-ink:#00756E; --amber-ink:#8F5C00; --red-ink:#B03030; --purple-ink:#6B4FBB;
  --white:#F0F4F8; --off:#F7FAFD; --light:#EEF2F7;
  --slate:#A9B8C9; --slate2:#5A7390; --slate-lt:#C2CEDB; /* slate/slate-lt are dark-bg text tiers; both AA+ on navy */
  --amber:#F5A623; --red:#E84545; --green:#00C896;
  --purple:#7C3AED; --blue2:#0D6B8A; --blue3:#0D9488;
  --dark:#0A1628; --body:#4A5568; --muted:#5E7086;
  --border:#E2E8F0; --border2:rgba(0,212,200,0.2);
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',system-ui,sans-serif;
}

/* ── Skip link (a11y) ── */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--teal);color:var(--navy);padding:12px 20px;
  border-radius:0 0 8px 0;font-weight:700;font-size:14px;text-decoration:none;
}
.skip-link:focus{left:0}

/* ── Nav ── */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:68px;display:flex;align-items:center;
  padding:0 40px;transition:all .35s ease;
}
#nav.solid{
  background:rgba(10,22,40,.96);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(0,212,200,.12);
  box-shadow:0 4px 24px rgba(0,0,0,.3);
}
.nav-in{max-width:1240px;margin:0 auto;width:100%;display:flex;align-items:center;gap:12px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.logomark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--navy);font-size:14px;letter-spacing:-.02em;
  box-shadow:0 0 16px rgba(0,212,200,.35);
}
.logomark-img{height:34px;width:auto;display:block}
.logo-text{color:var(--white);font-weight:700;font-size:17px;letter-spacing:-.025em}
.logo-text sup{color:var(--teal);font-size:10px;font-family:var(--mono);letter-spacing:.08em;vertical-align:super}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-a{
  background:none;border:none;color:var(--slate);font-size:13.5px;
  padding:7px 12px;border-radius:7px;transition:color .2s;font-weight:400;
  border-bottom:2px solid transparent;text-decoration:none;display:inline-block;
}
.nav-a:hover{color:var(--white)}
.nav-a.on{color:var(--teal);font-weight:600;border-bottom-color:var(--teal)}
.nav-demo{
  background:var(--teal);color:var(--navy);border:none;
  padding:9px 22px;border-radius:9px;font-weight:700;font-size:13.5px;
  letter-spacing:-.01em;transition:opacity .2s,transform .15s;
  box-shadow:0 0 20px rgba(0,212,200,.3);white-space:nowrap;margin-left:8px;
  text-decoration:none;display:inline-block;
}
.nav-demo:hover{opacity:.9;transform:translateY(-1px)}

/* ── Mobile nav (hamburger) ── */
.nav-burger{
  display:none;flex-direction:column;gap:5px;background:none;border:none;
  padding:8px;margin-left:auto;
}
.nav-burger span{width:22px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
.nav-burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.on span:nth-child(2){opacity:0}
.nav-burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hidden by default — only shown (as a slide-down panel) inside the
   mobile breakpoint below. Without this base rule it renders as an
   unstyled block of links stacked above the real nav at wider widths. */
.mob-nav{display:none}

@media(max-width:860px){
  .nav-links{display:none}
  .nav-demo{display:none}
  .nav-burger{display:flex}
  #nav.solid, #nav{background:rgba(10,22,40,.98)}
  .mob-nav{
    position:fixed;top:68px;left:0;right:0;bottom:0;z-index:999;
    background:rgba(10,22,40,.98);backdrop-filter:blur(20px);
    display:flex;flex-direction:column;gap:2px;padding:20px 24px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .25s ease,opacity .25s ease;
    overflow-y:auto;
  }
  .mob-nav.on{transform:translateY(0);opacity:1;pointer-events:auto}
  .mob-nav a{
    color:var(--slate);font-size:17px;font-weight:600;padding:14px 6px;
    border-bottom:1px solid rgba(255,255,255,.06);text-decoration:none;
  }
  .mob-nav a.on{color:var(--teal)}
  /* .mob-nav a{color:slate} above (0,1,1) otherwise beats the base
     .nav-demo{color:navy} (0,1,0) rule, washing out this pill's text. */
  .mob-nav a.nav-demo{display:inline-flex;margin:18px 6px 0;text-align:center;justify-content:center;color:var(--navy);border-bottom:none}
}

/* ── Helpers ── */
.max{max-width:1240px;margin:0 auto;padding:0 40px}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:18px;
}
.eyebrow.dark{color:var(--teal-ink)}
.tline{width:52px;height:2px;background:linear-gradient(90deg,var(--teal),transparent);margin-bottom:28px}
.tline.dark{background:linear-gradient(90deg,var(--teal2),transparent)}
h1.hd,h2.hd{
  font-size:clamp(28px,3.5vw,48px);font-weight:800;
  letter-spacing:-.035em;margin-bottom:18px;line-height:1.08;
}
.sub{font-size:18px;line-height:1.72;max-width:580px;margin-bottom:60px;color:var(--slate)}
.sub.lgt{color:var(--body)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 30px;border-radius:10px;font-weight:700;font-size:15px;
  letter-spacing:-.01em;border:none;transition:all .2s;cursor:pointer;
  text-decoration:none;
}
.btn-t{background:var(--teal);color:var(--navy);box-shadow:0 0 24px rgba(0,212,200,.3)}
.btn-t:hover{opacity:.9;transform:translateY(-1px)}
.btn-o{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.2)}
.btn-o:hover{background:rgba(255,255,255,.06)}
/* Outline button for use on light (--off/--light/#fff) sections —
   .btn-o's white text is invisible there. */
.btn-o-lt{background:transparent;color:var(--dark);border:1px solid var(--border)}
.btn-o-lt:hover{background:rgba(10,22,40,.04)}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 14px;border-radius:100px;
  background:rgba(0,212,200,.1);color:var(--teal);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid rgba(0,212,200,.35);
}
.check{color:var(--teal);flex-shrink:0;margin-top:2px}
.cross{color:#FC8181;flex-shrink:0;margin-top:2px}

/* ── Grid ── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
/* Generic responsive 2-column split for one-off layouts (contact form,
   copy+screenshot rows) that don't fit the fixed-gap .g2 grid. Set the
   gap per-instance with style="--split-gap:88px". */
.split-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--split-gap,28px);align-items:start}
@media(max-width:860px){
  .g2,.g3,.g4,.g5,.split-2{grid-template-columns:1fr}
  .g2m{grid-template-columns:1fr 1fr}
  .hero-g,.aug-grid{grid-template-columns:1fr!important;gap:52px!important}
  .split-2{gap:40px}
}

/* ── Cards ── */
.card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:30px}
.card-dk{background:rgba(255,255,255,.045);border:1px solid rgba(0,212,200,.15);border-radius:14px;padding:30px}
.card .ct{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:10px}
.card .cb{font-size:14px;color:var(--body);line-height:1.65}
.card-dk .ct{color:var(--teal)}
.card:not(.card-dk) .ct[style*="--teal"]{color:var(--teal-ink)!important}
.card:not(.card-dk) .ct[style*="--amber"]{color:var(--amber-ink)!important}
.card-dk .cb{color:var(--slate)}

/* ── HERO ── */
.hero{
  min-height:100vh;
  background:radial-gradient(ellipse at 18% 52%,#162847 0%,#0A1628 68%);
  display:flex;align-items:center;
  padding:130px 40px 90px;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,200,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,212,200,.035) 1px,transparent 1px);
  background-size:64px 64px;
}
.hero::after{
  content:'';position:absolute;
  right:-200px;top:50%;transform:translateY(-50%);
  width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,200,.07) 0%,transparent 70%);
  pointer-events:none;
}
.hero-g{display:grid;grid-template-columns:1.05fr .95fr;gap:90px;align-items:center}
.hero h1{
  font-size:clamp(38px,5.5vw,68px);font-weight:800;
  color:var(--white);line-height:1.04;letter-spacing:-.04em;
  margin:26px 0 22px;
}
.hero h1 em{color:var(--teal);font-style:normal}
.hero p{color:var(--slate);font-size:18px;line-height:1.73;max-width:500px;margin-bottom:38px}
.hero p strong{color:var(--white);font-weight:600}
.hbtns{display:flex;gap:14px;flex-wrap:wrap}
.hstats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap}
.hstat-n{font-family:var(--mono);font-size:27px;font-weight:700;color:var(--teal);letter-spacing:-.02em}
.hstat-l{font-size:11.5px;color:var(--slate);margin-top:3px}

/* ── Page hero (non-home pages) ── */
/* .sec.pagehero (not .pagehero alone) so this beats .sec{padding:108px 40px}
   below regardless of source order — both are used together in markup. */
.sec.pagehero{padding:150px 40px 64px}

/* ── Ticker ── */
.ticker{
  background:rgba(255,255,255,.04);border:1px solid rgba(0,212,200,.22);
  border-radius:14px;padding:22px 26px;font-family:var(--mono);font-size:12px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.t-head{color:var(--slate);font-size:10px;letter-spacing:.12em;margin-bottom:16px;text-transform:uppercase}
.t-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;transition:opacity .25s}
.t-row.dim{opacity:.22}
.t-ic{width:14px;text-align:center;font-size:13px;flex-shrink:0}
.t-txt{flex:1}
.t-st{font-size:10px;margin-left:auto}
.t-done{
  background:rgba(0,200,150,.1);border:1px solid rgba(0,212,200,.38);
  border-radius:9px;padding:11px 16px;margin-top:16px;
  display:none;align-items:center;gap:10px;
}
.t-done.show{display:flex}
.aug-float{display:flex;flex-direction:column;gap:18px;align-items:flex-end;margin-top:28px}
.aug-chip{
  background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.35);
  border-radius:11px;padding:11px 16px;backdrop-filter:blur(10px);
}
.aug-chip-t{color:var(--teal);font-size:12px;font-weight:700}
.aug-chip-s{color:var(--slate);font-size:11px;font-family:var(--mono);margin-top:3px}

/* ── Stats bar ── */
.sbar{background:var(--navy2);border-top:1px solid rgba(0,212,200,.1);border-bottom:1px solid rgba(0,212,200,.1);padding:36px 40px}
.sbar-n{font-family:var(--mono);font-size:34px;font-weight:700;color:var(--teal);letter-spacing:-.03em;text-align:center}
.sbar-l{font-size:12px;color:var(--slate);margin-top:5px;line-height:1.45;text-align:center}

/* ── Sections ── */
.sec{padding:108px 40px}
.sec-dk{background:var(--navy)}
.sec-dk2{background:var(--navy2)}
.sec-dk3{background:var(--navy3)}
.sec-lt{background:var(--off)}
.sec-lt2{background:var(--light)}
.sec-wh{background:#fff}
.grid-bg{position:relative;overflow:hidden}
.grid-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,212,200,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,200,.03) 1px,transparent 1px);
  background-size:56px 56px;
}
.grid-bg>.max{position:relative;z-index:1}

/* ── Compare ── */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:16px;overflow:hidden}
.cmp-bad{background:#FFF5F5;border:1px solid #FED7D7;padding:44px}
.cmp-good{background:var(--navy);padding:44px}
.cmp-lbl{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px}
.cmp-bad .cmp-lbl{color:var(--red-ink)}
.cmp-good .cmp-lbl{color:var(--teal)} /* navy panel — bright teal passes here, teal-ink does not */
.cmp-row{display:flex;gap:13px;margin-bottom:15px;align-items:flex-start}
.cmp-row span:last-child{font-size:15px;line-height:1.5}
.cmp-bad .cmp-row span:last-child{color:#4A5568}
.cmp-good .cmp-row span:last-child{color:var(--slate)}
@media(max-width:860px){.cmp{grid-template-columns:1fr}}

/* ── Auggie section ── */
.aug-grid{display:grid;grid-template-columns:1fr 1fr;gap:88px;align-items:start}
.aug-quote{background:rgba(0,212,200,.06);border:1px solid rgba(0,212,200,.28);border-radius:16px;padding:34px;margin-bottom:32px}
.aug-q-lbl{font-size:13px;color:var(--teal);font-weight:700;margin-bottom:16px}
.aug-quote p{font-size:17px;color:var(--white);line-height:1.78;font-style:italic}
.aug-caps{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.aug-caps{grid-template-columns:1fr}}
.aug-cap{background:rgba(255,255,255,.045);border:1px solid rgba(0,212,200,.14);border-radius:11px;padding:20px}
.aug-cap-t{color:var(--teal);font-size:13px;font-weight:700;margin-bottom:8px}
.aug-cap-b{color:var(--slate);font-size:12px;line-height:1.55}
.aug-panel{background:rgba(255,255,255,.04);border:1px solid rgba(0,212,200,.2);border-radius:14px;padding:26px;margin-top:24px}
.aug-panel-hd{font-family:var(--mono);font-size:11px;color:var(--slate);margin-bottom:14px;text-transform:uppercase;letter-spacing:.12em}
.aug-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.aug-row:last-child{border-bottom:none}
.aug-row-l{font-size:13px;color:var(--slate)}
.aug-row-v{font-family:var(--mono);font-size:19px;color:var(--teal);font-weight:700}

/* ── Dashboard wrap ── */
.dbwrap{border-radius:18px;overflow:hidden;border:1px solid rgba(0,212,200,.22);box-shadow:0 60px 120px rgba(0,0,0,.55)}
.dbtb{background:rgba(0,212,200,.05);padding:13px 22px;display:flex;gap:8px;align-items:center;border-bottom:1px solid rgba(0,212,200,.1)}
.dbtb-dot{width:11px;height:11px;border-radius:50%}
.dbtb-lbl{font-family:var(--mono);font-size:11px;color:var(--slate);margin-left:10px}
.dbwrap img{width:100%;display:block}

/* ── Platform img note ── */
.img-rel{position:relative}
.img-note{position:absolute;bottom:-18px;left:-18px;background:var(--navy2);border:1px solid rgba(0,212,200,.38);border-radius:11px;padding:13px 20px}
.img-note span{font-family:var(--mono);font-size:11.5px;color:var(--teal)}
@media(max-width:600px){.img-note{position:static;display:inline-block;margin-top:18px}}

/* ── 5-step process ── */
.steps{display:flex;flex-direction:column;gap:0;max-width:840px}
.step{display:grid;grid-template-columns:56px 1fr;gap:28px;margin-bottom:44px;align-items:start}
.step-num{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:700;font-size:17px;flex-shrink:0}
.step-body{padding-left:24px;border-left:2px solid;padding-bottom:44px}
.step-title{font-size:20px;font-weight:700;margin-bottom:10px}
.step-desc{font-size:15px;color:var(--body);line-height:1.72}

/* ── Tabs ── */
/* Sticks to the underside of the fixed nav (68px tall) while its tab
   panel is in view, and the button row is centered to the same 1240px
   measure as every other section instead of hugging the left edge. */
.tab-bar{
  position:sticky;top:68px;z-index:500;
  border-bottom:1px solid rgba(0,212,200,.12);background:var(--navy2);
  overflow-x:auto;
}
.tab-bar-in{max-width:1240px;margin:0 auto;display:flex;gap:2px;padding:0 40px}
@media(max-width:860px){
  /* On narrow screens the tab row usually overflows with no visual
     hint that more tabs are reachable by swiping — a right-edge fade
     signals it without adding an arrow control. */
  .tab-bar::after{
    content:'';position:absolute;top:0;right:0;bottom:1px;width:36px;
    background:linear-gradient(90deg,transparent,var(--navy2));
    pointer-events:none;
  }
}
.tab-btn{background:none;border:none;padding:18px 26px;font-size:14px;font-weight:600;color:var(--slate);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s;white-space:nowrap;flex-shrink:0}
.tab-btn.on{color:var(--teal);border-bottom-color:var(--teal)}
.tab-pane{display:none}
.tab-pane.on{display:block}

/* ── Paths ── */
.path-t{background:rgba(0,212,200,.07);border:1px solid rgba(0,212,200,.28);border-radius:18px;padding:42px}
.path-d{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:42px}
.path-num{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;margin-bottom:22px}
.path-title{font-size:19px;font-weight:700;margin-bottom:16px}
.path-t .path-title{color:var(--teal)}
.path-d .path-title{color:var(--white)}
.path-body{font-size:15px;line-height:1.72;color:var(--slate);margin-bottom:24px}
.path-sub{font-size:11px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.28);border-radius:100px;padding:4px 12px;color:var(--teal);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}

/* ── Both methods ── */
.both{background:var(--navy2);padding:56px 40px}
.both-hd{font-size:13px;font-weight:700;color:var(--teal);letter-spacing:.14em;text-transform:uppercase;margin-bottom:26px;text-align:center}
.both-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:860px){.both-g{grid-template-columns:1fr}}
.both-i{display:flex;gap:12px;align-items:flex-start}
.both-i span:last-child{font-size:14px;color:var(--slate);line-height:1.6}

/* ── Tiers ── */
.tier{border-radius:18px;overflow:hidden;border:1px solid rgba(0,212,200,.25)}
.tier-hd{padding:22px 34px;display:flex;align-items:center;justify-content:space-between}
.tier-name{font-size:19px;font-weight:800;color:var(--navy)}
.tier-rec{background:rgba(10,22,40,.2);border-radius:100px;padding:5px 13px;font-size:10px;font-weight:700;color:var(--navy);letter-spacing:.12em;text-transform:uppercase}
.tier-bd{padding:34px}
.tier-p{font-size:14px;color:var(--body);line-height:1.65;margin-bottom:24px}
.tier-li{display:flex;gap:10px;margin-bottom:11px;font-size:14px;color:var(--body)}
.tier-btn{width:100%;padding:13px;border:none;border-radius:9px;font-weight:700;font-size:14px;margin-top:28px;transition:opacity .2s}
.tier-btn:hover{opacity:.88}

/* ── Brand logos (integration/platform/parts cards) ── */
/* A fixed-height slot so logos of wildly different aspect ratios still
   line up; .brand-mono is the fallback for any partner we don't have
   an official logo asset for (initials on a flat tile, not a broken
   image icon). */
.brand-logo-slot{height:36px;display:flex;align-items:center;margin-bottom:16px}
/* height:100% (not max-height) — ties directly to the slot's definite
   36px height so width can resolve from the aspect ratio immediately.
   Some wide-aspect logos render at 0×0 in Chromium when nested inside
   a flex row and sized only via max-height/width:auto (a flex shrink-
   to-fit ambiguity), so avoid that combination here. */
.brand-logo-slot img{height:100%;width:auto;max-width:150px;object-fit:contain}
/* A few partner logos are white/light-colored artwork with no light
   variant available — .on-dark gives them a small dark chip to sit on
   instead of disappearing against these cards' white background. */
.brand-logo-slot.on-dark{
  background:var(--navy);border-radius:8px;padding:8px 16px;
  height:52px;display:inline-flex;
}
.brand-mono{
  min-width:38px;height:38px;padding:0 9px;border-radius:9px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--teal),var(--teal2));
  color:var(--navy);font-weight:800;font-size:13px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;
}

/* ── Integration cards ── */
.int-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;transition:transform .2s,box-shadow .2s}
.int-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.07)}
.int-name{font-size:16px;font-weight:700;color:var(--dark);margin-bottom:6px}
.int-type{font-size:12px;color:var(--body);margin-bottom:14px}
.live{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:100px;background:rgba(0,200,150,.1);color:#0D6B56;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(0,200,150,.28)}

/* ── Platform cards ── */
.plat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;transition:transform .2s,box-shadow .2s}
.plat-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.plat-name{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:5px}
.plat-desc{font-size:13px;color:var(--body)}

/* ── Brand tags ── */
.brand-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:36px}
.bt{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;background:var(--off);border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--dark);font-weight:500;transition:background .15s,border-color .15s}
.bt img{width:18px;height:18px;border-radius:4px;object-fit:contain;flex-shrink:0}
.bt:hover{background:rgba(0,212,200,.08);border-color:rgba(0,212,200,.35)}
.brand-callout{background:var(--navy);border-radius:14px;padding:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bc-n{font-family:var(--mono);font-size:40px;font-weight:700;color:var(--teal);letter-spacing:-.03em}
.bc-t{font-size:17px;font-weight:700;color:var(--white)}
.bc-s{font-size:14px;color:var(--slate);margin-top:5px}
.bc-lnk{color:var(--teal);text-decoration:none;font-weight:600}
.bc-lnk:hover{text-decoration:underline}

/* ── Parts ── */
.part{background:#fff;border:1px solid var(--border);border-radius:14px;padding:26px;text-align:center;transition:transform .2s,box-shadow .2s}
.part:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.06)}
.part .brand-logo-slot,.part .brand-mono{margin-left:auto;margin-right:auto;justify-content:center}
.part-n{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:12px}

/* ── Industries ── */
.ind{background:var(--off);border:1px solid var(--border);border-radius:16px;padding:0;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;text-decoration:none;display:block;color:inherit}
.ind:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.1)}
.ind:hover .ind-img{transform:scale(1.05)}
.ind-imgwrap{height:180px;overflow:hidden;position:relative}
.ind-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ind-fade{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(10,22,40,.75) 100%)}
.ind-body{padding:26px 28px 28px}
.ind-n{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:13px}
.ind-d{font-size:14px;color:var(--body);line-height:1.65;margin-bottom:20px}
.ind-lnk{font-size:13px;font-weight:600}
.ind-lnk[style*="--teal"]{color:var(--teal-ink)!important}
.ind-lnk[style*="--amber"]{color:var(--amber-ink)!important}

/* ── Timeline ── */
/* Each milestone is a flex row: an icon+rail column, then a card. The
   connecting line is per-item (.tl-rail::after) rather than one long
   absolutely-positioned line, so it always lines up with its icon
   regardless of how tall any single card is. */
.tl{display:flex;flex-direction:column}
.tl-item{display:flex;gap:26px}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.tl-icon{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--off);border:2px solid var(--teal);color:var(--teal2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.06);position:relative;z-index:1;
}
.tl-icon svg{width:24px;height:24px}
.tl-rail::after{content:'';flex:1;width:2px;min-height:24px;background:linear-gradient(var(--teal),rgba(10,22,40,.08));margin:8px 0}
.tl-item:last-child .tl-rail::after{display:none}
.tl-card{
  flex:1;background:#fff;border:1px solid var(--border);border-radius:14px;
  padding:24px 28px;margin-bottom:28px;transition:transform .2s,box-shadow .2s;
}
.tl-card:hover{transform:translateX(4px);box-shadow:0 12px 30px rgba(0,0,0,.07)}
.tl-yr{
  display:inline-flex;padding:3px 13px;border-radius:100px;margin-bottom:12px;
  background:rgba(0,212,200,.1);border:1px solid rgba(0,212,200,.3);
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--teal-ink);
}
.tl-t{font-size:18px;font-weight:800;color:var(--dark);margin-bottom:8px}
.tl-b{font-size:14px;color:var(--body);line-height:1.65}

/* ── Team ── */
.team-card{background:rgba(255,255,255,.045);border:1px solid rgba(0,212,200,.15);border-radius:18px;padding:34px}
.tc-av{width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--teal2));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:var(--navy);margin-bottom:22px}
.tc-n{font-size:18px;font-weight:800;color:var(--white);margin-bottom:4px}
.tc-t{font-size:13px;color:var(--teal);margin-bottom:16px}
.tc-bio{font-size:13px;color:var(--slate);line-height:1.68;margin-bottom:20px}
.tc-loc{font-family:var(--mono);font-size:11px;color:var(--slate)}
.tc-em{font-family:var(--mono);font-size:11px;color:var(--teal);margin-top:4px;text-decoration:none;display:inline-block}
.tc-em:hover{text-decoration:underline}

/* ── Company stats ── */
.cstat-n{font-family:var(--mono);font-size:38px;font-weight:700;color:var(--dark);letter-spacing:-.035em;text-align:center}
.cstat-l{font-size:13px;color:var(--muted);margin-top:7px;line-height:1.4;text-align:center}

/* ── News ── */
/* Featured (most recent) article gets its own hero-style card with an
   image; the rest are a denser 3-col grid with calendar-chip dates and
   a cycling accent color per card (decorative only, not a category). */
.news-featured{
  display:grid;grid-template-columns:280px 1fr;
  background:var(--navy);border-radius:18px;overflow:hidden;
  margin-bottom:40px;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s;
}
.news-featured:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(0,0,0,.22)}
.nf-img{position:relative;overflow:hidden;background:var(--navy2)}
.nf-img img{width:100%;height:100%;object-fit:cover;min-height:240px}
.nf-body{padding:38px 42px}
.nf-date{font-family:var(--mono);font-size:12px;color:var(--teal);letter-spacing:.06em;margin-top:16px;margin-bottom:14px}
.nf-title{font-size:25px;font-weight:800;color:var(--white);margin-bottom:14px;line-height:1.25;letter-spacing:-.02em}
.nf-excerpt{font-size:15px;color:var(--slate);line-height:1.72;margin-bottom:22px;max-width:640px}
@media(max-width:760px){
  .news-featured{grid-template-columns:1fr}
  .nf-img img{min-height:180px}
}

.news-g{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1024px){.news-g{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.news-g{grid-template-columns:1fr}}

.news-g .news-card:nth-child(3n+1){--accent:var(--teal);--accent-ink:var(--teal-ink)}
.news-g .news-card:nth-child(3n+2){--accent:var(--purple);--accent-ink:var(--purple-ink)}
.news-g .news-card:nth-child(3n+3){--accent:var(--amber);--accent-ink:var(--amber-ink)}

.news-card{
  display:flex;gap:16px;background:#fff;border:1px solid var(--border);
  border-top:3px solid var(--accent,var(--teal));border-radius:14px;padding:22px;
  transition:transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none;
}
.news-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.news-datebox{
  flex-shrink:0;width:54px;text-align:center;background:var(--off);
  border:1px solid var(--border);border-radius:10px;padding:8px 2px 9px;height:fit-content;
}
.news-mon{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--accent-ink,var(--teal-ink));text-transform:uppercase}
.news-day{display:block;font-size:19px;font-weight:800;color:var(--dark);line-height:1.15;margin-top:2px}
.news-cardbody{min-width:0}
.news-yr{font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:6px}
.news-title{font-size:15.5px;font-weight:700;color:var(--dark);margin-bottom:8px;line-height:1.4}
.news-body{
  font-size:13px;color:var(--body);line-height:1.6;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-lnk{font-size:12.5px;font-weight:700;color:var(--teal-ink)}
.nf-body .news-lnk{color:var(--teal)} /* featured card is navy — bright teal passes there, teal-ink does not */

/* ── Contact ── */
.form-lbl{font-size:12px;font-weight:600;color:var(--muted);display:block;margin-bottom:7px}
.form-in{width:100%;padding:13px 17px;border-radius:9px;border:1px solid var(--border);font-size:14px;color:var(--dark);background:var(--off);outline:none;transition:border-color .2s}
.form-in:focus{border-color:var(--teal2);box-shadow:0 0 0 3px rgba(0,212,200,.1)}
.form-row{margin-bottom:18px}
.form-g2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
@media(max-width:600px){.form-g2{grid-template-columns:1fr}}
.form-sub{width:100%;background:var(--teal);color:var(--navy);border:none;padding:15px;border-radius:11px;font-weight:700;font-size:15px;margin-top:10px;transition:opacity .2s}
.form-sub:hover{opacity:.88}
.form-err{font-size:12px;color:var(--red);margin-top:6px;display:none}
.form-in.err{border-color:var(--red)}
.form-in.err+.form-err{display:block}
.c-det-lbl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px}
.c-det-v{font-family:var(--mono);font-size:13.5px;color:var(--dark)}
.c-det{margin-bottom:22px}
.c-jim{background:var(--navy);border-radius:14px;padding:26px;margin-top:40px}
.c-jim-t{font-size:14px;font-weight:700;color:var(--teal);margin-bottom:9px}
.c-jim-b{font-size:13px;color:var(--slate);line-height:1.62;margin-bottom:13px}
.c-jim-ph{font-family:var(--mono);font-size:12px;color:var(--white)}
.c-jim-em{font-family:var(--mono);font-size:12px;color:var(--teal);margin-top:4px;text-decoration:none;display:inline-block}
.c-jim-em:hover{text-decoration:underline}

/* ── CTA ── */
.cta{background:linear-gradient(135deg,#162847,#0A1628);padding:110px 40px;text-align:center}
.cta-in{max-width:620px;margin:0 auto}
.cta-sub{margin-top:22px;color:var(--slate);font-size:14px}
.cta-sub span{color:var(--teal);font-family:var(--mono)}

/* ── Footer ── */
footer{background:var(--navy);border-top:1px solid rgba(0,212,200,.1);padding:70px 40px 36px}
.ft-g{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
@media(max-width:860px){.ft-g{grid-template-columns:1fr 1fr;gap:36px}}
.ft-desc{font-size:13px;color:var(--slate);line-height:1.72;max-width:290px;margin-top:16px}
.ft-ph{font-family:var(--mono);font-size:12px;color:var(--teal);margin-top:18px;text-decoration:none;display:block;width:max-content}
.ft-em{font-family:var(--mono);font-size:12px;color:var(--slate);margin-top:5px;text-decoration:none;display:block;width:max-content}
.ft-hd{font-size:11.5px;font-weight:700;color:var(--slate);text-transform:uppercase;letter-spacing:.12em;margin-bottom:18px}
.ft-a{font-size:14px;color:var(--slate);display:block;margin-bottom:11px;cursor:pointer;transition:color .2s;background:none;border:none;text-align:left;padding:0;text-decoration:none}
.ft-a:hover{color:var(--white)}
.ft-bot{max-width:1240px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);padding-top:26px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.ft-copy{font-size:12px;color:var(--slate)}
.ft-urls{font-family:var(--mono);font-size:11px;color:var(--slate)}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal-stagger.in>*{opacity:1;transform:translateY(0)}
.reveal-stagger.in>*:nth-child(1){transition-delay:.05s}
.reveal-stagger.in>*:nth-child(2){transition-delay:.12s}
.reveal-stagger.in>*:nth-child(3){transition-delay:.19s}
.reveal-stagger.in>*:nth-child(4){transition-delay:.26s}
.reveal-stagger.in>*:nth-child(5){transition-delay:.33s}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{transition:none;opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* Lock the page behind the open mobile nav */
body.nav-open{overflow:hidden}

/* Disabled submit ("Sending…") must read as inert */
.form-sub:disabled{opacity:.6;cursor:default}

/* Skip-link target must clear the 68px fixed nav */
#main{scroll-margin-top:80px}

/* ── News article pages (public/news/<slug>.html) ── */
.article{max-width:760px;margin:0 auto}
.article-date{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--slate);text-transform:uppercase}
.article-body{font-size:16.5px;line-height:1.75;color:var(--body)}
.article-body p{margin-bottom:18px}
.article-body h2{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--dark);margin:38px 0 14px}
.article-body h3{font-size:19px;font-weight:700;color:var(--dark);margin:30px 0 12px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:24px}
.article-body li{margin-bottom:9px}
.article-body strong{color:var(--dark)}
.article-body a:not(.btn){color:var(--teal-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.article-body a:not(.btn):hover{color:var(--blue3)}
.article-body img{border-radius:14px;border:1px solid var(--border);margin:30px auto;background:#fff}
.article-body blockquote{
  background:#fff;border:1px solid var(--border);border-left:3px solid var(--teal);
  border-radius:12px;padding:24px 28px;margin:0 0 30px;text-align:center;
}
.article-body blockquote p{margin-bottom:8px}
.article-body blockquote p:last-child{margin-bottom:0}
.article-video{aspect-ratio:16/9;margin:30px 0;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#000}
.article-video iframe{width:100%;height:100%;border:0;display:block}
.article-back{margin-top:44px}

/* FAQ accordion (services) */
.faq{max-width:760px;margin:52px auto 0}
.faq details{background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:12px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:15.5px;font-weight:700;color:var(--dark)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex-shrink:0;font-size:22px;font-weight:400;line-height:1;color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .faq-a{padding:0 22px 20px;font-size:14.5px;color:var(--body);line-height:1.7}
.faq .faq-a a{color:var(--blue,#1867C0)}
.ft-li{display:flex;width:max-content;align-items:center;gap:7px;font-size:12.5px;color:var(--slate);margin-top:14px;text-decoration:none;transition:color .15s}
.ft-li:hover{color:var(--teal)}