/* =========================================================
   CRMSyntax — Full Screen Responsive Design System
   ALWAYS HORIZONTAL NAVIGATION
   ALWAYS VISIBLE NAVIGATION
   ========================================================= */

:root{
  --ink:#0E1420;
  --ink-soft:#596273;
  --paper:#FFFFFF;
  --paper-alt:#F5F7FA;
  --paper-deep:#0B111C;

  --line:#E3E8EF;
  --line-deep:#263142;

  --blue:#0176D3;
  --blue-dark:#014C8C;
  --blue-light:#EAF5FF;

  --orange:#FF7A59;
  --orange-light:#FFF1ED;

  --green:#2E8B57;

  --radius:8px;
  --radius-lg:14px;

  --display:'Space Grotesk',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --maxw:1600px;

  --side-space:clamp(14px,4vw,72px);

  --section-space:clamp(64px,8vw,120px);

  /* NAV HEIGHT */
  --nav-height:72px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  margin:0;
  min-height:100vh;

  font-family:var(--body);
  color:var(--ink);

  background:var(--paper);

  line-height:1.65;
  font-size:16px;

  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{
  max-width:100%;
  height:auto;
  display:block;
}

button,
input,
select,
textarea{
  font:inherit;
}

a{
  color:inherit;
}

h1,
h2,
h3,
h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;

  margin:0 0 .5em;

  letter-spacing:-.025em;
}

h1{
  font-size:clamp(2.5rem,5vw,5.2rem);
}

h2{
  font-size:clamp(1.8rem,3.5vw,3.2rem);
}

h3{
  font-size:clamp(1.05rem,1.5vw,1.3rem);
}

p{
  margin:0 0 1em;
  color:var(--ink-soft);
}

::selection{
  background:var(--blue);
  color:#fff;
}


/* =========================================================
   GLOBAL CONTAINER
   ========================================================= */

.container{
  width:100%;
  max-width:var(--maxw);

  margin:0 auto;

  padding-left:var(--side-space);
  padding-right:var(--side-space);
}


/* =========================================================
   EYEBROW
   ========================================================= */

.eyebrow{
  font-family:var(--mono);

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.14em;

  color:var(--blue);

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-bottom:18px;
}

.eyebrow::before{
  content:"//";
  color:var(--orange);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(1,118,211,.3);
  outline-offset:3px;
}

@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
  }
}


/* =========================================================
   HEADER / NAVIGATION
   =========================================================

   IMPORTANT:

   THE NAVIGATION IS ALWAYS:

   ✓ VISIBLE
   ✓ HORIZONTAL
   ✓ STICKY
   ✓ AT THE TOP
   ✓ DESKTOP
   ✓ LAPTOP
   ✓ TABLET
   ✓ IPAD
   ✓ IPHONE
   ✓ ANDROID

   NEVER:
   ✗ vertical
   ✗ hamburger
   ✗ display:none
   ✗ hidden
   ✗ collapsed

   ========================================================= */

header.site{
  position:sticky;

  top:0;
  left:0;
  right:0;

  z-index:99999;

  width:100%;

  min-height:var(--nav-height);

  background:rgba(255,255,255,.97);

  border-bottom:1px solid rgba(225,230,236,.9);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  isolation:isolate;
}


/* =========================================================
   NAV WRAPPER
   ========================================================= */

.nav-wrap{
  width:100%;
  max-width:1600px;

  min-height:var(--nav-height);

  margin:0 auto;

  padding:10px var(--side-space);

  display:flex;

  flex-direction:row !important;

  align-items:center;

  flex-wrap:nowrap !important;

  gap:clamp(10px,2vw,24px);

  /*
    IMPORTANT:
    Do NOT use overflow:hidden here.
    It can hide the navigation on small screens.
  */
  overflow:visible;
}


/* =========================================================
   LOGO
   ========================================================= */

.logo{
  flex:0 0 auto;

  display:flex;

  align-items:center;

  gap:7px;

  font-family:var(--display);

  font-size:clamp(.9rem,1.2vw,1.2rem);

  font-weight:700;

  text-decoration:none;

  color:var(--ink);

  white-space:nowrap;

  position:relative;

  z-index:2;
}

.logo .dot{
  color:var(--orange);
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

nav.primary{

  /*
    Critical:
    Navigation gets remaining width.
  */

  flex:1 1 auto;

  min-width:0;

  width:auto;

  display:flex !important;

  flex-direction:row !important;

  flex-wrap:nowrap !important;

  align-items:center;

  justify-content:flex-end;

  gap:clamp(10px,1.5vw,26px);

  margin:0;

  padding:0;

  white-space:nowrap;

  /*
    On small screens links can scroll horizontally.
  */

  overflow-x:auto;

  overflow-y:hidden;

  scrollbar-width:none;

  -ms-overflow-style:none;

  -webkit-overflow-scrolling:touch;

  /*
    Never allow links to become vertical.
  */

  writing-mode:horizontal-tb !important;
}

nav.primary::-webkit-scrollbar{
  display:none;

  width:0;
  height:0;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

nav.primary a{

  position:relative;

  flex:0 0 auto !important;

  width:auto !important;

  display:inline-flex !important;

  align-items:center;

  justify-content:center;

  color:var(--ink-soft);

  font-size:clamp(.7rem,.85vw,.9rem);

  font-weight:500;

  text-decoration:none;

  white-space:nowrap !important;

  padding:8px 0;

  transition:color .2s ease;

  /*
    Prevent any framework from stacking links.
  */

  float:none !important;

  clear:none !important;
}

nav.primary a::after{
  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:0;

  height:2px;

  background:var(--blue);

  transition:width .2s ease;
}

nav.primary a:hover,
nav.primary a.active{
  color:var(--ink);
}

nav.primary a:hover::after,
nav.primary a.active::after{
  width:100%;
}


/* =========================================================
   NAV CTA
   ========================================================= */

.nav-cta{
  flex:0 0 auto !important;

  display:inline-flex !important;

  align-items:center;

  justify-content:center;

  font-family:var(--mono);

  font-size:clamp(.6rem,.8vw,.78rem);

  background:var(--ink);

  color:#fff;

  padding:10px 15px;

  border-radius:7px;

  text-decoration:none;

  white-space:nowrap !important;

  transition:
    transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;

  position:relative;

  z-index:2;
}

.nav-cta:hover{
  background:var(--blue-dark);

  transform:translateY(-1px);

  box-shadow:0 8px 22px rgba(1,76,140,.18);
}


/* =========================================================
   NAV TOGGLE
   =========================================================

   NEVER SHOW MOBILE HAMBURGER.

   ========================================================= */

.nav-toggle{
  display:none !important;

  visibility:hidden !important;

  width:0 !important;
  height:0 !important;

  opacity:0 !important;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  padding-top:clamp(72px,9vw,150px);

  padding-bottom:clamp(64px,8vw,120px);

  overflow:hidden;
}

.hero::before{
  content:"";

  position:absolute;

  width:600px;
  height:600px;

  top:-300px;
  right:-180px;

  background:
    radial-gradient(
      circle,
      rgba(1,118,211,.10) 0%,
      rgba(1,118,211,0) 70%
    );

  pointer-events:none;
}

.hero-grid{
  position:relative;

  z-index:1;

  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(400px,.95fr);

  gap:clamp(40px,6vw,110px);

  align-items:center;
}

.hero p{
  max-width:720px;

  font-size:clamp(1rem,1.3vw,1.2rem);

  line-height:1.75;
}

.hero-actions{
  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-top:32px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  min-height:48px;

  padding:12px 22px;

  border-radius:7px;

  font-size:.92rem;

  font-weight:600;

  text-decoration:none;

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.btn-primary{
  background:var(--blue);

  color:#fff;

  box-shadow:
    0 8px 22px rgba(1,118,211,.18);
}

.btn-primary:hover{
  background:var(--blue-dark);

  transform:translateY(-2px);

  box-shadow:
    0 12px 28px rgba(1,118,211,.25);
}

.btn-ghost{
  background:#fff;

  border:1px solid var(--line);

  color:var(--ink);
}

.btn-ghost:hover{
  border-color:var(--blue);

  color:var(--blue);

  transform:translateY(-2px);
}


/* =========================================================
   CODE CARD
   ========================================================= */

.code-card{
  width:100%;

  background:var(--paper-deep);

  border:1px solid var(--line-deep);

  border-radius:14px;

  padding:22px 24px 26px;

  font-family:var(--mono);

  font-size:clamp(.72rem,.8vw,.84rem);

  color:#C7D0DD;

  box-shadow:
    0 30px 80px rgba(14,20,32,.20);

  overflow:hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.code-card:hover{
  transform:translateY(-4px);

  box-shadow:
    0 40px 90px rgba(14,20,32,.28);
}

.code-card .bar{
  display:flex;

  gap:7px;

  margin-bottom:18px;
}

.code-card .bar span{
  width:10px;
  height:10px;

  border-radius:50%;

  background:#3B4557;
}

.code-card .file{
  color:#7A8599;

  font-size:.72rem;

  margin-bottom:12px;
}

.code-card .kw{
  color:#FF9C7A;
}

.code-card .fn{
  color:#6FC2FF;
}

.code-card .str{
  color:#9EE6A8;
}

.code-card .cm{
  color:#5C6779;
}

.code-card pre{
  margin:0;

  white-space:pre-wrap;

  overflow-wrap:anywhere;
}


/* =========================================================
   STATS
   ========================================================= */

.statbar{
  border-top:1px solid var(--line);

  border-bottom:1px solid var(--line);

  padding:clamp(28px,4vw,48px) 0;

  background:
    linear-gradient(
      180deg,
      #fff,
      #fafbfd
    );
}

.statbar .row{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:28px;
}

.stat{
  min-width:0;
}

.stat .num{
  font-family:var(--display);

  font-size:clamp(1.8rem,3vw,2.7rem);

  font-weight:700;

  color:var(--ink);

  line-height:1;

  margin-bottom:8px;
}

.stat .label{
  font-family:var(--mono);

  font-size:.7rem;

  color:var(--ink-soft);

  text-transform:uppercase;

  letter-spacing:.07em;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.section{
  padding-top:var(--section-space);

  padding-bottom:var(--section-space);
}

.section-alt{
  background:var(--paper-alt);
}

.section-head{
  max-width:760px;

  margin-bottom:clamp(36px,5vw,64px);
}

.section-head.center{
  margin-left:auto;

  margin-right:auto;

  text-align:center;
}

.section-head p{
  font-size:clamp(1rem,1.2vw,1.1rem);
}


/* =========================================================
   GRIDS
   ========================================================= */

.grid{
  display:grid;

  gap:clamp(18px,2vw,28px);
}

.grid-3{
  grid-template-columns:
    repeat(3,minmax(0,1fr));
}

.grid-2{
  grid-template-columns:
    repeat(2,minmax(0,1fr));
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
  position:relative;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  padding:clamp(22px,2.5vw,34px);

  background:var(--paper);

  box-shadow:
    0 8px 30px rgba(14,20,32,.035);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.card:hover{
  transform:translateY(-5px);

  border-color:#D4DCE6;

  box-shadow:
    0 20px 50px rgba(14,20,32,.09);
}

.card .tag{
  font-family:var(--mono);

  font-size:.68rem;

  color:var(--blue);

  text-transform:uppercase;

  letter-spacing:.08em;

  margin-bottom:12px;

  display:block;
}

.card h3{
  margin-bottom:10px;
}

.card p{
  margin-bottom:0;

  font-size:.94rem;
}

.card ul{
  margin:16px 0 0;

  padding:0;

  list-style:none;
}

.card ul li{
  font-size:.88rem;

  color:var(--ink-soft);

  padding:6px 0 6px 20px;

  position:relative;
}

.card ul li::before{
  content:"—";

  position:absolute;

  left:0;

  color:var(--orange);
}

.card.sf{
  border-top:3px solid var(--blue);
}

.card.hs{
  border-top:3px solid var(--orange);
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-row{
  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  border-top:1px solid var(--line);

  border-left:1px solid var(--line);

  border-radius:var(--radius-lg);

  overflow:hidden;
}

.process-step{
  min-height:180px;

  padding:clamp(22px,3vw,36px);

  background:#fff;

  border-right:1px solid var(--line);

  border-bottom:1px solid var(--line);

  transition:background .2s ease;
}

.process-step:hover{
  background:#FBFCFE;
}

.process-step .idx{
  font-family:var(--mono);

  color:var(--orange);

  font-size:.78rem;

  display:block;

  margin-bottom:18px;
}


/* =========================================================
   QUOTE
   ========================================================= */

.quote{
  border-left:3px solid var(--blue);

  padding:8px 0 8px 26px;

  margin:0;
}

.quote p{
  font-size:clamp(1.05rem,1.5vw,1.3rem);

  color:var(--ink);

  font-family:var(--display);

  font-weight:500;
}

.quote cite{
  font-family:var(--mono);

  font-size:.76rem;

  color:var(--ink-soft);

  font-style:normal;
}


/* =========================================================
   FAQ
   ========================================================= */

details.faq{
  border-bottom:1px solid var(--line);

  padding:20px 0;
}

details.faq summary{
  cursor:pointer;

  font-family:var(--display);

  font-weight:600;

  font-size:1.02rem;

  list-style:none;

  display:flex;

  justify-content:space-between;

  gap:20px;
}

details.faq summary::-webkit-details-marker{
  display:none;
}

details.faq summary::after{
  content:"+";

  flex:0 0 auto;

  font-family:var(--mono);

  color:var(--orange);
}

details.faq[open] summary::after{
  content:"–";
}

details.faq p{
  margin-top:14px;

  max-width:850px;
}


/* =========================================================
   CTA BAND
   ========================================================= */

.cta-band{
  position:relative;

  background:
    radial-gradient(
      circle at 20% 20%,
      rgba(1,118,211,.18),
      transparent 35%
    ),
    var(--paper-deep);

  color:#fff;

  padding-top:clamp(60px,7vw,100px);

  padding-bottom:clamp(60px,7vw,100px);

  text-align:center;

  overflow:hidden;
}

.cta-band h2{
  color:#fff;
}

.cta-band p{
  color:#AEB8C6;

  max-width:620px;

  margin:0 auto 30px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer.site{
  border-top:1px solid var(--line);

  padding-top:clamp(48px,6vw,80px);

  padding-bottom:28px;

  background:var(--paper-alt);
}

.footer-grid{
  display:grid;

  grid-template-columns:
    minmax(220px,1.6fr)
    repeat(3,minmax(130px,1fr));

  gap:clamp(24px,4vw,60px);

  margin-bottom:50px;
}

footer.site h4{
  font-family:var(--mono);

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  color:var(--ink-soft);

  margin-bottom:16px;
}

footer.site ul{
  list-style:none;

  margin:0;

  padding:0;
}

footer.site li{
  margin-bottom:10px;
}

footer.site a{
  text-decoration:none;

  color:var(--ink-soft);

  font-size:.9rem;

  transition:color .2s ease;
}

footer.site a:hover{
  color:var(--blue);
}

.footer-bottom{
  border-top:1px solid var(--line);

  padding-top:22px;

  display:flex;

  justify-content:space-between;

  flex-wrap:wrap;

  gap:12px;

  font-family:var(--mono);

  font-size:.72rem;

  color:var(--ink-soft);
}


/* =========================================================
   BREADCRUMB / PAGE HERO
   ========================================================= */

.crumb{
  font-family:var(--mono);

  font-size:.74rem;

  color:var(--ink-soft);

  padding-top:24px;
}

.crumb a{
  color:var(--ink-soft);

  text-decoration:none;
}

.crumb a:hover{
  color:var(--blue);
}

.page-hero{
  padding-top:clamp(32px,5vw,64px);

  padding-bottom:clamp(50px,7vw,100px);
}

.page-hero .lede{
  font-size:clamp(1rem,1.3vw,1.15rem);

  max-width:760px;
}

.pill-row{
  display:flex;

  gap:9px;

  flex-wrap:wrap;

  margin-top:22px;
}

.pill{
  font-family:var(--mono);

  font-size:.7rem;

  border:1px solid var(--line);

  border-radius:999px;

  padding:7px 13px;

  color:var(--ink-soft);

  background:#fff;
}


/* =========================================================
   TABLE
   ========================================================= */

.table-wrap{
  width:100%;

  overflow-x:auto;

  -webkit-overflow-scrolling:touch;

  border:1px solid var(--line);

  border-radius:var(--radius-lg);
}

table.compare{
  width:100%;

  min-width:650px;

  border-collapse:collapse;

  font-size:.9rem;
}

table.compare th,
table.compare td{
  border:1px solid var(--line);

  padding:14px 16px;

  text-align:left;
}

table.compare th{
  font-family:var(--mono);

  font-size:.7rem;

  text-transform:uppercase;

  letter-spacing:.05em;

  background:var(--paper-alt);
}


/* =========================================================
   CONTACT FORM
   ========================================================= */

form.contact{
  width:100%;

  max-width:760px;

  display:grid;

  gap:20px;
}

form.contact label{
  font-family:var(--mono);

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.06em;

  color:var(--ink-soft);

  display:block;

  margin-bottom:7px;
}

form.contact input,
form.contact select,
form.contact textarea{
  width:100%;

  padding:14px 15px;

  border:1px solid var(--line);

  border-radius:7px;

  font-family:var(--body);

  font-size:.95rem;

  color:var(--ink);

  background:#fff;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

form.contact textarea{
  min-height:150px;

  resize:vertical;
}

form.contact input::placeholder,
form.contact textarea::placeholder{
  color:#9AA3B1;
}

form.contact input:focus,
form.contact select:focus,
form.contact textarea:focus{
  outline:none;

  border-color:var(--blue);

  box-shadow:
    0 0 0 4px rgba(1,118,211,.09);
}


/* =========================================================
   CASE STUDIES
   ========================================================= */

.platform-divider{
  display:flex;

  align-items:center;

  gap:20px;

  margin:10px 0 32px;
}

.platform-divider h2{
  margin:0;

  white-space:nowrap;
}

.platform-divider .line{
  flex:1;

  height:1px;

  background:var(--line);
}

.platform-divider:first-of-type{
  margin-top:0;
}

.case-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:clamp(18px,2vw,28px);

  margin-bottom:clamp(50px,7vw,90px);
}

details.case-card{
  border:1px solid var(--line);

  border-radius:var(--radius-lg);

  background:var(--paper);

  overflow:hidden;

  align-self:start;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

details.case-card:hover{
  box-shadow:
    0 15px 40px rgba(14,20,32,.06);
}

details.case-card[open]{
  border-color:#C8D1DD;
}

details.case-card summary{
  cursor:pointer;

  padding:clamp(22px,2.5vw,32px);

  list-style:none;

  display:block;
}

details.case-card summary::-webkit-details-marker{
  display:none;
}

.case-tag{
  font-family:var(--mono);

  font-size:.7rem;

  text-transform:uppercase;

  letter-spacing:.08em;

  color:var(--blue);

  display:block;

  margin-bottom:11px;
}

details.case-card.hs .case-tag{
  color:var(--orange);
}

details.case-card h3{
  font-size:1.08rem;

  margin-bottom:10px;
}

.case-teaser{
  font-size:.92rem;

  margin-bottom:0;

  min-height:64px;
}

.case-toggle{
  display:inline-flex;

  align-items:center;

  gap:6px;

  font-family:var(--mono);

  font-size:.76rem;

  color:var(--ink);

  margin-top:18px;
}

.case-toggle::after{
  content:"+";

  color:var(--orange);

  font-size:1rem;
}

details.case-card[open] .case-toggle::after{
  content:"–";
}

details.case-card[open] .case-toggle{
  color:var(--blue);
}

.case-body{
  padding:
    0
    clamp(22px,2.5vw,32px)
    30px;

  border-top:1px solid var(--line);
}

.case-block{
  padding-top:22px;
}

.case-block h4{
  font-family:var(--mono);

  font-size:.72rem;

  text-transform:uppercase;

  letter-spacing:.06em;

  color:var(--ink-soft);

  margin-bottom:10px;
}

.case-block p{
  font-size:.92rem;

  margin-bottom:10px;
}

.case-block ul{
  margin:0;

  padding:0;

  list-style:none;
}

.case-block ul li{
  font-size:.9rem;

  color:var(--ink-soft);

  padding:5px 0 5px 18px;

  position:relative;
}

.case-block ul li::before{
  content:"—";

  position:absolute;

  left:0;

  color:var(--orange);
}

.metric-row{
  display:flex;

  gap:20px;

  flex-wrap:wrap;

  padding-top:22px;

  margin-top:22px;

  border-top:1px solid var(--line);
}

.metric{
  flex:1;

  min-width:96px;
}

.metric .metric-num{
  font-family:var(--display);

  font-weight:700;

  font-size:1.45rem;

  color:var(--blue);

  display:block;
}

details.case-card.hs .metric .metric-num{
  color:var(--orange);
}

.metric .metric-label{
  font-family:var(--mono);

  font-size:.68rem;

  color:var(--ink-soft);

  text-transform:uppercase;

  letter-spacing:.04em;
}

.case-quote{
  border-left:3px solid var(--blue);

  padding:3px 0 3px 16px;

  margin:22px 0 0;

  font-size:.9rem;

  color:var(--ink);

  font-style:italic;
}

details.case-card.hs .case-quote{
  border-left-color:var(--orange);
}

.case-quote cite{
  display:block;

  margin-top:8px;

  font-family:var(--mono);

  font-size:.72rem;

  color:var(--ink-soft);

  font-style:normal;
}


/* =========================================================
   ARTICLE / BLOG BASE
   ========================================================= */

.article-wrap{
  width:100%;

  max-width:1200px;

  margin:0 auto;
}

.article-header{
  position:relative;

  padding-top:clamp(52px,7vw,95px);

  padding-bottom:clamp(34px,5vw,60px);

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(1,118,211,.07),
      transparent 32%
    );
}

.article-header .article-wrap{
  max-width:1200px;
}

.article-header .crumb{
  margin-bottom:28px;
}

.article-header h1{
  max-width:1150px;

  font-size:clamp(
    2.4rem,
    5vw,
    4.7rem
  );

  line-height:1.08;

  letter-spacing:-.04em;

  margin-bottom:24px;
}

.article-header .article-lead{
  max-width:850px;

  font-size:clamp(
    1.05rem,
    1.5vw,
    1.25rem
  );

  line-height:1.8;

  color:var(--ink-soft);

  margin-bottom:26px;
}

.article-meta{
  display:flex;

  align-items:center;

  flex-wrap:wrap;

  gap:9px 10px;

  margin-top:24px;
}

.article-meta .meta-pill{
  background:#fff;

  border:1px solid var(--line);

  border-radius:999px;

  padding:7px 13px;

  font-family:var(--mono);

  font-size:.69rem;

  color:var(--ink-soft);

  box-shadow:
    0 2px 8px rgba(14,20,32,.03);
}

.article-meta > span:last-child{
  margin-left:4px;

  color:#7B8492;

  font-family:var(--mono);

  font-size:.7rem;
}

.article-header + .section{
  padding-top:clamp(28px,4vw,50px);
}


/* =========================================================
   BLOG CONTENT LAYOUT
   ========================================================= */

.article-layout{
  max-width:1200px;

  margin:0 auto;

  display:grid;

  grid-template-columns:minmax(0,1fr);

  gap:0;
}


/* =========================================================
   IN THIS GUIDE — ALWAYS HORIZONTAL
   ========================================================= */

.article-layout .toc{
  position:relative;

  width:100%;

  display:flex !important;

  flex-direction:row !important;

  flex-wrap:nowrap !important;

  align-items:center;

  gap:8px;

  margin:0 0 clamp(38px,5vw,60px);

  padding:14px;

  border:1px solid var(--line);

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #F8FAFC 100%
    );

  box-shadow:
    0 8px 30px rgba(14,20,32,.045);

  overflow-x:auto;

  overflow-y:hidden;

  -webkit-overflow-scrolling:touch;

  scrollbar-width:none;
}

.article-layout .toc::-webkit-scrollbar{
  display:none;

  width:0;
  height:0;
}

.article-layout .toc strong{
  flex:0 0 auto;

  display:inline-flex;

  align-items:center;

  min-height:36px;

  padding:0 12px 0 4px;

  margin-right:3px;

  font-family:var(--mono);

  font-size:.69rem;

  font-weight:500;

  text-transform:uppercase;

  letter-spacing:.1em;

  color:var(--ink);

  white-space:nowrap;
}

.article-layout .toc strong::before{
  content:"//";

  color:var(--orange);

  margin-right:8px;
}

.article-layout .toc a{
  flex:0 0 auto;

  display:inline-flex;

  align-items:center;

  min-height:36px;

  padding:7px 13px;

  border:1px solid transparent;

  border-radius:7px;

  background:#fff;

  color:var(--ink-soft);

  font-family:var(--body);

  font-size:.78rem;

  font-weight:500;

  text-decoration:none;

  white-space:nowrap;

  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.article-layout .toc a:hover{
  color:var(--blue);

  background:var(--blue-light);

  border-color:rgba(1,118,211,.15);

  transform:translateY(-1px);
}

.article-layout .toc a::before{
  content:"→";

  margin-right:6px;

  color:var(--orange);

  font-family:var(--mono);

  font-size:.72rem;
}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.article-content{
  width:100%;

  max-width:920px;

  margin:0 auto;

  font-size:1.04rem;

  line-height:1.8;
}

.article-content > p{
  max-width:880px;
}

.article-content p{
  margin-bottom:1.25em;
}

.article-content h2{
  position:relative;

  margin-top:clamp(52px,7vw,82px);

  margin-bottom:18px;

  padding-top:10px;

  font-size:clamp(
    1.65rem,
    3vw,
    2.45rem
  );

  line-height:1.2;

  letter-spacing:-.025em;
}

.article-content h2::before{
  content:"";

  display:block;

  width:34px;

  height:3px;

  margin-bottom:14px;

  border-radius:999px;

  background:var(--blue);
}

.article-content h3{
  margin-top:36px;

  margin-bottom:12px;

  font-size:clamp(
    1.05rem,
    1.5vw,
    1.3rem
  );
}

.article-content ul{
  margin:18px 0 30px;

  padding:0;

  list-style:none;
}

.article-content li{
  position:relative;

  margin:0;

  padding:7px 0 7px 25px;

  color:var(--ink-soft);
}

.article-content li::before{
  content:"";

  position:absolute;

  left:2px;

  top:16px;

  width:7px;

  height:7px;

  border-radius:50%;

  background:var(--orange);
}

.article-content strong{
  color:var(--ink);

  font-weight:600;
}


/* =========================================================
   ARTICLE CALLOUT
   ========================================================= */

.article-callout{
  position:relative;

  margin:0 0 48px;

  padding:28px 30px 28px 32px;

  border:1px solid #DCE8F3;

  border-left:4px solid var(--blue);

  border-radius:0 12px 12px 0;

  background:
    linear-gradient(
      135deg,
      #F5FAFF,
      #FFFFFF
    );

  box-shadow:
    0 10px 35px rgba(1,118,211,.05);
}

.article-callout h3{
  margin:0 0 9px;

  font-size:1.08rem;

  color:var(--ink);
}

.article-callout p{
  margin:0;

  font-size:.94rem;

  line-height:1.7;
}


/* =========================================================
   KEYWORD GRID
   ========================================================= */

.keyword-grid{
  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:14px;

  margin:28px 0 42px;
}

.keyword-item{
  position:relative;

  padding:20px 20px 20px 22px;

  border:1px solid var(--line);

  border-radius:10px;

  background:#fff;

  font-size:.86rem;

  line-height:1.6;

  box-shadow:
    0 5px 20px rgba(14,20,32,.025);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.keyword-item::before{
  content:"";

  position:absolute;

  left:0;

  top:14px;

  bottom:14px;

  width:3px;

  border-radius:0 3px 3px 0;

  background:var(--blue);
}

.keyword-item:nth-child(even)::before{
  background:var(--orange);
}

.keyword-item:hover{
  transform:translateY(-3px);

  border-color:#D4DDE8;

  box-shadow:
    0 12px 30px rgba(14,20,32,.07);
}

.keyword-item strong{
  display:inline-block;

  margin-bottom:3px;

  font-family:var(--display);

  font-size:.95rem;

  color:var(--ink);
}


/* =========================================================
   ARTICLE LINKS
   ========================================================= */

.article-content a{
  color:var(--blue);

  text-decoration-thickness:1px;

  text-underline-offset:4px;

  transition:color .2s ease;
}

.article-content a:hover{
  color:var(--blue-dark);
}


/* =========================================================
   ARTICLE TAGS
   ========================================================= */

.tag-list{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:45px;

  padding-top:25px;

  border-top:1px solid var(--line);
}

.tag-list span{
  display:inline-flex;

  align-items:center;

  min-height:30px;

  padding:5px 11px;

  border:1px solid var(--line);

  border-radius:999px;

  background:var(--paper-alt);

  color:var(--ink-soft);

  font-family:var(--mono);

  font-size:.66rem;

  letter-spacing:.02em;
}


/* =========================================================
   ARTICLE CTA
   ========================================================= */

.article-footer-cta{
  position:relative;

  overflow:hidden;

  margin-top:55px;

  padding:clamp(32px,5vw,55px);

  border-radius:16px;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(1,118,211,.18),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(255,122,89,.12),
      transparent 30%
    ),
    var(--paper-deep);

  text-align:center;

  box-shadow:
    0 20px 60px rgba(14,20,32,.14);
}

.article-footer-cta h2{
  margin-bottom:12px;

  color:#fff;
}

.article-footer-cta p{
  max-width:650px;

  margin:0 auto 26px;

  color:#AEB8C6;

  font-size:.96rem;
}


/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media(max-width:1100px){

  :root{
    --nav-height:66px;
  }

  .nav-wrap{
    padding-left:18px;
    padding-right:18px;

    gap:14px;
  }

  .logo{
    font-size:1rem;
  }

  nav.primary{
    gap:14px;

    justify-content:flex-start;
  }

  nav.primary a{
    font-size:.78rem;
  }

  .nav-cta{
    font-size:.68rem;

    padding:8px 11px;
  }

  .hero-grid{
    grid-template-columns:
      minmax(0,1fr)
      minmax(320px,.85fr);

    gap:40px;
  }

  .statbar .row{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .grid-3{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .process-row{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .process-step:nth-child(2){
    border-right:none;
  }

  .footer-grid{
    grid-template-columns:
      1.5fr
      repeat(2,1fr);
  }
}


/* =========================================================
   TABLET / IPAD
   ========================================================= */

@media(max-width:860px){

  :root{
    --side-space:16px;

    --nav-height:60px;
  }

  /*
    NAVIGATION REMAINS FULLY VISIBLE AND HORIZONTAL.
  */

  header.site{
    position:sticky !important;

    top:0 !important;

    left:0;

    right:0;

    width:100%;

    min-height:60px;

    z-index:99999;

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;
  }

  .nav-wrap{

    width:100%;

    min-height:60px;

    padding:8px 16px;

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:center;

    gap:10px;

    overflow:visible !important;
  }

  .logo{
    flex:0 0 auto !important;

    font-size:.95rem;

    max-width:160px;
  }

  nav.primary{

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    flex:1 1 auto !important;

    min-width:0 !important;

    width:auto !important;

    gap:13px;

    justify-content:flex-start;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    visibility:visible !important;

    opacity:1 !important;
  }

  nav.primary a{

    display:inline-flex !important;

    flex:0 0 auto !important;

    width:auto !important;

    white-space:nowrap !important;

    font-size:.76rem;

    padding:7px 0;
  }

  .nav-cta{

    display:inline-flex !important;

    flex:0 0 auto !important;

    white-space:nowrap !important;

    font-size:.64rem;

    padding:8px 10px;
  }

  .nav-toggle{
    display:none !important;
  }

  .hero{
    padding-top:64px;

    padding-bottom:64px;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .hero p{
    max-width:800px;
  }

  .code-card{
    max-width:850px;
  }

  .grid-3,
  .grid-2,
  .case-grid{
    grid-template-columns:1fr;
  }

  .process-row{
    grid-template-columns:1fr;

    border-right:1px solid var(--line);
  }

  .process-step{
    border-right:none;
  }

  .footer-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .article-header{
    padding-top:48px;
  }

  .article-header h1{
    font-size:clamp(
      2.25rem,
      7vw,
      3.5rem
    );
  }

  .article-layout .toc{
    margin-bottom:42px;
  }

  .article-content{
    max-width:100%;
  }

  .keyword-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   MOBILE — IPHONE / ANDROID
   ========================================================= */

@media(max-width:600px){

  :root{
    --side-space:12px;

    --nav-height:56px;
  }

  body{
    font-size:15px;

    /*
      Make sure page itself never creates
      horizontal overflow.
    */

    overflow-x:hidden;
  }


  /* =======================================================
     MOBILE NAVIGATION
     
     ALWAYS:
     ✓ STICKY
     ✓ TOP
     ✓ VISIBLE
     ✓ HORIZONTAL
     ✓ SCROLLABLE

     NEVER:
     ✗ HIDDEN
     ✗ VERTICAL
     ✗ HAMBURGER
     ✗ COLLAPSED
     ======================================================= */

  header.site{

    position:sticky !important;

    position:-webkit-sticky !important;

    top:0 !important;

    left:0 !important;

    right:0 !important;

    width:100% !important;

    height:auto !important;

    min-height:56px !important;

    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    z-index:999999 !important;

    background:rgba(255,255,255,.98) !important;

    border-bottom:1px solid var(--line);

    overflow:visible !important;
  }


  /* =======================================================
     MOBILE NAV WRAPPER
     ======================================================= */

  .nav-wrap{

    width:100% !important;

    max-width:none !important;

    min-height:56px !important;

    height:56px !important;

    margin:0 !important;

    padding:7px 10px !important;

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:8px !important;

    overflow:visible !important;
  }


  /* =======================================================
     MOBILE LOGO
     ======================================================= */

  .logo{

    flex:0 0 auto !important;

    width:auto !important;

    max-width:100px !important;

    min-width:0 !important;

    display:flex !important;

    align-items:center !important;

    white-space:nowrap !important;

    overflow:hidden;

    text-overflow:ellipsis;

    font-size:.82rem !important;

    line-height:1 !important;

    z-index:2;
  }


  /* =======================================================
     MOBILE PRIMARY NAV
     
     THIS IS THE IMPORTANT PART.
     
     The navigation itself scrolls horizontally.
     It NEVER becomes vertical.
     ======================================================= */

  nav.primary{

    flex:1 1 0% !important;

    width:0 !important;

    min-width:0 !important;

    max-width:none !important;

    height:42px !important;

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:center !important;

    justify-content:flex-start !important;

    gap:13px !important;

    margin:0 !important;

    padding:0 2px !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    white-space:nowrap !important;

    scrollbar-width:none !important;

    -ms-overflow-style:none !important;

    -webkit-overflow-scrolling:touch !important;

    visibility:visible !important;

    opacity:1 !important;

    transform:none !important;

  }

  nav.primary::-webkit-scrollbar{

    display:none !important;

    width:0 !important;

    height:0 !important;
  }


  /* =======================================================
     MOBILE NAV LINKS
     ======================================================= */

  nav.primary a{

    flex:0 0 auto !important;

    width:auto !important;

    max-width:none !important;

    min-width:max-content !important;

    display:inline-flex !important;

    flex-direction:row !important;

    align-items:center !important;

    justify-content:center !important;

    padding:7px 0 !important;

    margin:0 !important;

    white-space:nowrap !important;

    font-size:.68rem !important;

    line-height:1 !important;

    visibility:visible !important;

    opacity:1 !important;

  }

  nav.primary a::after{

    bottom:-1px;

    height:2px;
  }


  /* =======================================================
     MOBILE CTA
     ======================================================= */

  .nav-cta{

    flex:0 0 auto !important;

    width:auto !important;

    max-width:none !important;

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    white-space:nowrap !important;

    font-size:.56rem !important;

    line-height:1 !important;

    padding:8px 8px !important;

    border-radius:6px !important;

    visibility:visible !important;

    opacity:1 !important;

    z-index:2;
  }


  /* =======================================================
     MOBILE TOGGLE
     ======================================================= */

  .nav-toggle,
  .menu-toggle,
  .hamburger,
  .mobile-menu,
  .mobile-nav{

    display:none !important;

    visibility:hidden !important;
  }


  /* =======================================================
     HERO
     ======================================================= */

  .hero{
    padding-top:52px;

    padding-bottom:52px;
  }

  h1{
    font-size:clamp(
      2.25rem,
      12vw,
      3.4rem
    );
  }

  h2{
    font-size:clamp(
      1.7rem,
      8vw,
      2.4rem
    );
  }

  .hero-actions{
    flex-direction:column;

    align-items:stretch;
  }

  .btn{
    width:100%;
  }

  .code-card{
    padding:18px;

    border-radius:10px;

    font-size:.7rem;

    overflow-x:auto;
  }


  /* =======================================================
     STATS
     ======================================================= */

  .statbar .row{
    grid-template-columns:
      1fr 1fr;

    gap:26px 18px;
  }

  .stat .num{
    font-size:1.75rem;
  }

  .stat .label{
    font-size:.64rem;
  }


  /* =======================================================
     SECTIONS
     ======================================================= */

  .section{
    padding-top:64px;

    padding-bottom:64px;
  }

  .section-head{
    margin-bottom:34px;
  }

  .card{
    padding:22px;
  }

  .process-step{
    min-height:auto;

    padding:24px 20px;
  }

  .platform-divider{
    gap:12px;
  }

  .platform-divider h2{
    white-space:normal;
  }

  .case-grid{
    margin-bottom:50px;
  }

  .case-teaser{
    min-height:auto;
  }


  /* =======================================================
     FOOTER
     ======================================================= */

  .footer-grid{
    grid-template-columns:1fr;

    gap:34px;
  }

  .footer-bottom{
    flex-direction:column;
  }

  .page-hero{
    padding-top:32px;

    padding-bottom:54px;
  }


  /* =======================================================
     BLOG MOBILE
     ======================================================= */

  .article-header{
    padding-top:38px;

    padding-bottom:30px;
  }

  .article-header .crumb{
    margin-bottom:22px;

    font-size:.68rem;
  }

  .article-header h1{
    font-size:clamp(
      2rem,
      10vw,
      2.8rem
    );

    line-height:1.1;

    letter-spacing:-.035em;
  }

  .article-header .article-lead{
    font-size:1rem;

    line-height:1.7;
  }

  .article-meta{
    align-items:flex-start;

    gap:7px;
  }

  .article-meta > span:last-child{
    width:100%;

    margin-left:0;

    margin-top:4px;
  }


  /* =======================================================
     IN THIS GUIDE
     ======================================================= */

  .article-layout .toc{

    position:static !important;

    width:100% !important;

    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:7px;

    margin:0 0 38px;

    padding:9px;

    overflow-x:auto !important;

    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    border:1px solid var(--line);

    border-radius:10px;

    background:
      linear-gradient(
        135deg,
        #FFFFFF 0%,
        #F8FAFC 100%
      );
  }

  .article-layout .toc::-webkit-scrollbar{
    display:none;
  }

  .article-layout .toc strong{
    flex:0 0 auto !important;

    width:auto !important;

    min-height:34px;

    margin:0 !important;

    padding:0 9px 0 3px !important;

    display:inline-flex !important;

    white-space:nowrap !important;
  }

  .article-layout .toc a{
    flex:0 0 auto !important;

    width:auto !important;

    min-height:34px;

    margin:0 !important;

    padding:7px 11px;

    display:inline-flex !important;

    white-space:nowrap !important;

    border:1px solid var(--line);

    border-radius:7px;

    background:#fff;

    font-size:.72rem;
  }


  /* =======================================================
     ARTICLE
     ======================================================= */

  .article-content{
    font-size:.98rem;

    line-height:1.75;
  }

  .article-content h2{
    margin-top:54px;

    font-size:1.7rem;
  }

  .article-content h2::before{
    width:28px;

    height:3px;

    margin-bottom:12px;
  }

  .article-content h3{
    margin-top:30px;

    font-size:1.1rem;
  }

  .article-content li{
    padding-left:22px;
  }


  /* =======================================================
     CALLOUT
     ======================================================= */

  .article-callout{
    padding:22px 20px 22px 22px;

    margin-bottom:38px;
  }


  /* =======================================================
     KEYWORDS
     ======================================================= */

  .keyword-grid{
    gap:10px;

    margin-top:22px;
  }

  .keyword-item{
    padding:17px 17px 17px 20px;
  }


  /* =======================================================
     TAGS
     ======================================================= */

  .tag-list{
    margin-top:38px;

    padding-top:22px;
  }


  /* =======================================================
     CTA
     ======================================================= */

  .article-footer-cta{
    margin-top:42px;

    padding:32px 20px;

    border-radius:12px;
  }

  .article-footer-cta h2{
    font-size:1.7rem;
  }

  .article-footer-cta .btn{
    width:100%;
  }
}


/* =========================================================
   VERY SMALL PHONES
   iPhone SE / SMALL ANDROID
   ========================================================= */

@media(max-width:380px){

  :root{
    --side-space:10px;

    --nav-height:54px;
  }

  header.site{
    min-height:54px !important;
  }

  .nav-wrap{
    min-height:54px !important;

    height:54px !important;

    padding:6px 8px !important;

    gap:6px !important;
  }

  .logo{
    max-width:78px !important;

    font-size:.74rem !important;
  }

  nav.primary{
    gap:10px !important;

    height:40px !important;
  }

  nav.primary a{
    font-size:.62rem !important;
  }

  .nav-cta{
    font-size:.5rem !important;

    padding:7px 7px !important;
  }

  .statbar .row{
    grid-template-columns:1fr;
  }

  .hero-actions{
    margin-top:24px;
  }

  .code-card{
    font-size:.65rem;
  }

  .article-header h1{
    font-size:2rem;
  }

  .article-layout .toc{
    padding:8px;
  }

  .article-layout .toc strong{
    padding-right:7px !important;
  }

  .article-layout .toc a{
    padding:7px 10px;

    font-size:.69rem;
  }

  .article-content h2{
    font-size:1.55rem;
  }
}


/* =========================================================
   LARGE / ULTRAWIDE
   ========================================================= */

@media(min-width:1800px){

  :root{
    --maxw:1800px;

    --side-space:clamp(
      60px,
      5vw,
      110px
    );
  }

  body{
    font-size:17px;
  }

  .nav-wrap{
    max-width:1800px;
  }

  .hero-grid{
    gap:120px;
  }
}


/* =========================================================
   4K SCREENS
   ========================================================= */

@media(min-width:2400px){

  :root{
    --maxw:2100px;
  }

  .container{
    max-width:2100px;
  }

  .nav-wrap{
    max-width:2100px;
  }

  .hero{
    min-height:calc(100vh - 72px);

    display:flex;

    align-items:center;
  }

  .hero-grid{
    width:100%;
  }

  .section{
    padding-top:140px;

    padding-bottom:140px;
  }
}


/* =========================================================
   FINAL NAVIGATION SAFETY OVERRIDES
   =========================================================

   These rules intentionally come LAST so that another
   responsive rule or framework cannot accidentally turn
   the navigation into a vertical/hidden menu.

   ========================================================= */

header.site,
header.site .nav-wrap,
header.site nav.primary{
  visibility:visible !important;
}

header.site nav.primary{
  display:flex !important;

  flex-direction:row !important;

  flex-wrap:nowrap !important;
}

header.site nav.primary a{
  display:inline-flex !important;

  flex:0 0 auto !important;

  width:auto !important;

  white-space:nowrap !important;
}

@media(max-width:600px){

  header.site{
    display:block !important;

    visibility:visible !important;

    opacity:1 !important;

    position:sticky !important;

    top:0 !important;

    z-index:999999 !important;
  }

  header.site .nav-wrap{
    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    visibility:visible !important;

    overflow:visible !important;
  }

  header.site nav.primary{
    display:flex !important;

    flex-direction:row !important;

    flex-wrap:nowrap !important;

    visibility:visible !important;

    opacity:1 !important;

    overflow-x:auto !important;

    overflow-y:hidden !important;
  }

  header.site nav.primary a{
    display:inline-flex !important;

    flex:0 0 auto !important;

    width:auto !important;

    white-space:nowrap !important;
  }

  header.site .nav-cta{
    display:inline-flex !important;

    flex:0 0 auto !important;

    white-space:nowrap !important;
  }
}

/* =========================================================
   FINAL RESPONSIVE NAVIGATION FIX
   =========================================================

   Requirements:
   - Horizontal navigation on desktop, tablet and mobile
   - Never turns into a vertical menu
   - Mobile links remain horizontally scrollable
   - Header is fixed to the top for reliable iPhone/Android behavior
   - Header hides while scrolling DOWN
   - Header returns while scrolling UP
   - Header is always visible when the page is at the very top

   NOTE:
   The hide/show behavior requires the small JavaScript snippet
   provided separately with this stylesheet.
   ========================================================= */

:root{
  --nav-height:72px;
}

/* ---------- Fixed header ---------- */

header.site{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  min-height:var(--nav-height) !important;
  z-index:999999 !important;

  transform:translate3d(0,0,0);
  transition:transform .28s ease;
  will-change:transform;

  visibility:visible !important;
  opacity:1 !important;

  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid rgba(225,230,236,.9);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  isolation:isolate;
}

header.site.nav-visible{
  transform:translate3d(0,0,0) !important;
}

header.site.nav-hidden{
  transform:translate3d(0,-110%,0) !important;
}

/* The fixed header must not cover the first section. */
body{
  padding-top:var(--nav-height);
}

/* ---------- Main nav row ---------- */

header.site .nav-wrap{
  width:100% !important;
  max-width:1600px;
  min-height:var(--nav-height) !important;
  height:var(--nav-height) !important;

  margin:0 auto;
  padding:10px var(--side-space);

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;

  gap:clamp(8px,1.6vw,22px);

  overflow:visible !important;
}

/* ---------- Logo ---------- */

header.site .logo{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:0 !important;

  display:flex !important;
  align-items:center;

  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;

  font-size:clamp(.82rem,1.15vw,1.2rem);
}

/* ---------- Primary links ---------- */

header.site nav.primary{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-end;

  gap:clamp(9px,1.4vw,24px);

  margin:0 !important;
  padding:0 !important;

  white-space:nowrap !important;
  writing-mode:horizontal-tb !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;

  scrollbar-width:none;
  -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;

  overscroll-behavior-x:contain;
  touch-action:pan-x;
}

header.site nav.primary::-webkit-scrollbar{
  display:none;
  width:0;
  height:0;
}

header.site nav.primary a{
  flex:0 0 auto !important;
  width:auto !important;
  min-width:max-content !important;

  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;

  white-space:nowrap !important;
  float:none !important;
  clear:none !important;

  padding:8px 0;
  margin:0;

  line-height:1.2;
}

/* ---------- CTA ---------- */

header.site .nav-cta{
  flex:0 0 auto !important;
  width:auto !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  white-space:nowrap !important;
  margin:0;

  flex-shrink:0 !important;
}

/* Hamburger is not used. */
header.site .nav-toggle{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
}

/* ---------- Tablet ---------- */

@media(max-width:1100px){
  :root{
    --nav-height:66px;
  }

  body{
    padding-top:var(--nav-height);
  }

  header.site .nav-wrap{
    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;
    padding-left:18px;
    padding-right:18px;
    gap:12px;
  }

  header.site nav.primary{
    justify-content:flex-start !important;
    gap:14px;
  }

  header.site nav.primary a{
    font-size:.78rem;
  }

  header.site .nav-cta{
    font-size:.68rem;
    padding:8px 11px;
  }
}

/* ---------- iPad / tablet ---------- */

@media(max-width:860px){
  :root{
    --side-space:16px;
    --nav-height:60px;
  }

  body{
    padding-top:var(--nav-height);
  }

  header.site{
    min-height:var(--nav-height) !important;
  }

  header.site .nav-wrap{
    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;

    padding:8px var(--side-space);
    gap:9px;
  }

  header.site .logo{
    max-width:145px;
    font-size:.9rem;
  }

  header.site nav.primary{
    flex:1 1 0% !important;
    justify-content:flex-start !important;
    gap:13px;
  }

  header.site nav.primary a{
    font-size:.74rem;
    padding:7px 0;
  }

  header.site .nav-cta{
    font-size:.62rem;
    padding:8px 9px;
  }
}

/* ---------- iPhone / Android ---------- */

@media(max-width:600px){
  :root{
    --side-space:10px;
    --nav-height:56px;
  }

  body{
    padding-top:var(--nav-height);
    font-size:15px;
  }

  header.site{
    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;

    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  header.site .nav-wrap{
    width:100% !important;
    max-width:none !important;

    min-height:var(--nav-height) !important;
    height:var(--nav-height) !important;

    padding:6px var(--side-space) !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;

    gap:7px !important;
    overflow:visible !important;
  }

  header.site .logo{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:92px !important;

    font-size:.78rem !important;
    line-height:1 !important;
  }

  header.site nav.primary{
    flex:1 1 0% !important;
    width:0 !important;
    min-width:0 !important;

    height:42px !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:0 2px !important;
    margin:0 !important;

    white-space:nowrap !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    -webkit-overflow-scrolling:touch !important;

    touch-action:pan-x;
    overscroll-behavior-x:contain;
  }

  header.site nav.primary a{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:max-content !important;

    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;

    padding:7px 0 !important;
    margin:0 !important;

    font-size:.67rem !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  header.site .nav-cta{
    flex:0 0 auto !important;
    width:auto !important;
    max-width:none !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:8px 8px !important;
    border-radius:6px !important;

    font-size:.55rem !important;
    line-height:1 !important;

    white-space:nowrap !important;
  }

  /* Keep the first content section clear of the fixed header. */
  .hero{
    padding-top:56px;
  }
}

/* ---------- Very small phones: iPhone SE / small Android ---------- */

@media(max-width:380px){
  :root{
    --side-space:8px;
    --nav-height:54px;
  }

  body{
    padding-top:var(--nav-height);
  }

  header.site .nav-wrap{
    min-height:54px !important;
    height:54px !important;
    padding:6px 8px !important;
    gap:6px !important;
  }

  header.site .logo{
    max-width:74px !important;
    font-size:.72rem !important;
  }

  header.site nav.primary{
    height:40px !important;
    gap:10px !important;
  }

  header.site nav.primary a{
    font-size:.61rem !important;
  }

  header.site .nav-cta{
    font-size:.49rem !important;
    padding:7px 7px !important;
  }

  .hero{
    padding-top:54px;
  }
}

/* ---------- Reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
  header.site{
    transition:none !important;
  }
}