/* GENERATED by design/apply-handoff.py from the redesign handoff.
   Edit the handoff or the local-additions block in that script,
   not this file -- it is overwritten on every run. */

/* ==========================================================================
   Nexflow — top bar, hero and module sections.
   Vanilla CSS, no build step, no dependencies. Drop-in replacement for the
   header + hero + two module sections of index.html.

   WHAT CHANGED FROM THE CURRENT SITE
   1. Type: Montserrat everywhere (matches the NexFlow lockup's geometric
      sans). Schibsted Grotesk + JetBrains Mono are no longer used.
   2. Colour: text is the lockup's cool slate (#2C343C), not a warm black.
      One accent only: the lockup's blue (#1B66C9). Theme picker removed.
   3. Header floats over the hero as a frosted glass bar with a layered
      shadow, instead of sitting in a flat strip above it.
   4. Hero background is the halftone image, animated: slow scale/pan, two
      drifting dot grids that interfere with the image's own screen, and a
      light sweep. Legibility comes from LOCAL scrims, not a full-bleed wash.
   5. The nine-module "spine" runs horizontally across the hero as a bus with
      nine tags in two lanes (was a vertical chip list).
   6. Module cards are raised plates in a recessed tray. Square corners,
      hairlines and layered shadows — no soft rounded cards, no stock icons.

   ASSETS REQUIRED
   - assets/img/hero-halftone.jpg   (shipped alongside this file)
   - assets/brand/nexflow-lockup.png (already on the site; swap the absolute
     URL below for your local path)
   ========================================================================== */

:root{
  /* Surfaces */
  --bg:#F5F5F1;              /* page paper (unchanged from current site)   */
  --surface:#FFFFFF;         /* panel face                                  */
  --surface-2:#F8FAFC;       /* panel face, bottom of gradient              */
  --tray:#EDF1F4;            /* recessed ground the panels sit on           */
  --hero-ground:#EDF3F6;     /* fallback under the hero image               */
  --border:#DFE5EA;

  /* Ink — sampled from the NexFlow lockup wordmark */
  --ink:#2C343C;
  --muted:#6C7580;
  --muted-2:#8A95A1;

  /* One accent: the lockup blue */
  --primary:#1B66C9;
  --primary-hover:#144E9D;
  --accent:#8FC4F5;          /* light blue, used only for the demo chip     */
  --accent-ink:#0A1C33;

  /* Depth. All shadows are cool-cast (blue-grey), never neutral grey. */
  --sh-plate:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 1px rgba(18,42,72,.05),
    0 6px 14px -8px rgba(18,42,72,.17),
    0 20px 36px -24px rgba(18,42,72,.26);
  --sh-plate-hover:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 3px rgba(18,42,72,.07),
    0 16px 28px -10px rgba(18,42,72,.20),
    0 38px 58px -28px rgba(27,102,201,.40);
  --sh-bar:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,102,201,.09),
    0 1px 1px rgba(18,42,72,.06),
    0 8px 18px -8px rgba(18,42,72,.22),
    0 30px 50px -26px rgba(18,42,72,.42);
  --sh-tray: inset 0 3px 9px -5px rgba(18,42,72,.16);

  --radius:3px;
  --maxw:1180px;
  --font:'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ color:var(--primary-hover); }
h1,h2,h3{ margin:0; letter-spacing:-.03em; }

:focus-visible{ outline:3px solid rgba(27,102,201,.55); outline-offset:2px; }

.skip-link{
  position:absolute; left:16px; top:-6rem; z-index:20;
  background:var(--surface); color:var(--ink);
  padding:10px 16px; border-radius:var(--radius); box-shadow:var(--sh-bar);
  transition:top .15s ease;
}
.skip-link:focus{ top:16px; }

/* Sections run full-bleed (background image, tray and shadows reach the
   window edge); .inner caps the CONTENT at --maxw and centres it. */
.shell{ position:relative; overflow:hidden; }
.inner{ max-width:var(--maxw); margin-inline:auto; padding-inline:40px; }

/* --------------------------------------------------------------------------
   1. Floating top bar
   Sits ON the hero (position:absolute inside .shell), frosted so the moving
   halftone reads through it. The hero carries top padding to clear it.
   -------------------------------------------------------------------------- */
.site-header{
  position:absolute;
  top:20px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:6;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:11px 12px 11px 20px;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.66));
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:var(--sh-bar);
}
.brand-logo{ height:38px; width:auto; display:block; }

/* Pinned state: once the page has scrolled past the top, js/site.js adds
   .is-pinned and the bar drops back in, fixed to the viewport. Both the
   floating bar and the .site-header--static one land in the same place, so
   every page pins the same way. */
.site-header.is-pinned{
  position:fixed;
  top:12px; left:0; right:0;
  width:calc(100% - 52px);
  max-width:calc(var(--maxw) - 52px);
  margin-inline:auto;
  z-index:60;
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.8));
  -webkit-backdrop-filter:blur(16px) saturate(165%);
  backdrop-filter:blur(16px) saturate(165%);
  box-shadow:0 16px 34px -20px rgba(18,42,72,.5);
  animation:nfBarDrop .34s cubic-bezier(.16,1,.3,1) both;
}
@keyframes nfBarDrop{
  from{ transform:translateY(-130%); opacity:0; }
  to{ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .site-header.is-pinned{ animation:none; }
}

.site-nav{
  display:flex; align-items:center; gap:6px;
  font-weight:600; font-size:13.5px; line-height:1;
  color:#5D6874;
}
.site-nav a:not(.btn-demo){
  color:inherit;
  padding:8px 11px;
  border-radius:2px;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.site-nav a:not(.btn-demo):hover{
  background:rgba(255,255,255,.88);
  color:var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 1px 2px rgba(18,42,72,.12);
}

/* Raised slug. Lifts 1px and turns brand blue on hover. */
.btn-demo{
  padding:11px 17px;
  border-radius:2px;
  color:#fff;
  background:linear-gradient(180deg,#3A434D,#252C34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 1px 2px rgba(18,42,72,.26),
             0 9px 18px -8px rgba(18,42,72,.48);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn-demo:hover{
  color:#fff;
  background:linear-gradient(180deg,#2E7CDC,var(--primary));
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),
             0 2px 4px rgba(18,42,72,.24),
             0 14px 24px -8px rgba(27,102,201,.55);
}

/* --------------------------------------------------------------------------
   2. Hero — animated halftone ground
   Layer order: image → dot grid A → dot grid B → global veil → local scrims
   → light sweep → content. The veil stays light (.26–.58) so the image reads;
   the two ellipse scrims do the legibility work under the copy only.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  padding:112px 0 44px;
  overflow:hidden;
  background:var(--hero-ground);
  color:var(--ink);
}
.hero-layer{ position:absolute; inset:0; }
.hero-img{
  background-image:url('../assets/img/hero-halftone.jpg');
  background-size:cover;
  background-position:58% 62%;
  animation:nfDrift 36s ease-in-out infinite alternate;
}
/* Two dot grids of different pitch drifting in opposite directions: they
   interfere with the photo's own halftone screen, so the dots look alive. */
.hero-dots-a,
.hero-dots-b{ position:absolute; inset:-40px; }
.hero-dots-a{
  background-image:radial-gradient(rgba(27,102,201,.22) 1.2px, transparent 1.3px);
  background-size:9px 9px;
  animation:nfDotA 20s linear infinite;
}
.hero-dots-b{
  background-image:radial-gradient(rgba(15,76,143,.14) 1.1px, transparent 1.2px);
  background-size:14px 14px;
  animation:nfDotB 29s linear infinite;
}
.hero-veil{
  background:linear-gradient(100deg,
    rgba(244,248,250,.58) 0%,
    rgba(244,248,250,.38) 42%,
    rgba(244,248,250,.26) 100%);
}
.hero-scrim{
  background:
    radial-gradient(118% 80% at 3% 20%,  rgba(247,250,252,.94) 0%, rgba(247,250,252,.74) 38%, rgba(247,250,252,0) 76%),
    radial-gradient(54% 64% at 93% 22%,  rgba(247,250,252,.94) 0%, rgba(247,250,252,.72) 48%, rgba(247,250,252,0) 84%);
}
.hero-sheen{
  position:absolute; top:0; bottom:0; left:0; width:34%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:nfSheen 9s cubic-bezier(.4,0,.6,1) infinite;
}

.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:56px;
  align-items:end;
  animation:nfRise .6s cubic-bezier(.16,1,.3,1) both;
}
.eyebrow{
  font-weight:600; font-size:10.5px; line-height:1;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--primary);
  margin-bottom:24px;
}
/* The headline borrows the lockup's own weight split: "Nex" bold, "Flow"
   regular in a lighter tone. */
.hero h1{ font-size:64px; font-weight:700; line-height:1.03; }
.hero h1 .light{ font-weight:400; color:#7C8894; }
.hero-lead{ margin:0 0 22px; font-size:16.5px; line-height:1.55; color:#39414B; text-wrap:pretty; }
.hero-actions{ display:flex; gap:10px; }
.btn{
  display:inline-flex; align-items:center;
  padding:13px 18px;
  border-radius:2px;
  font-weight:600; font-size:14.5px; line-height:1;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn-solid{ background:var(--ink); color:#F5F5F1; }
.btn-solid:hover{ background:var(--primary); color:#fff; }
.btn-ghost{ border:1px solid var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#F5F5F1; }

/* --------------------------------------------------------------------------
   3. The spine
   One bus across the hero, nine tags hanging off it in two lanes: Time & HR
   above the line, Parts & Logistics below. Each tag is a small paper plate so
   it stays legible over the pattern without another scrim.
   -------------------------------------------------------------------------- */
.spine{ position:relative; height:250px; margin-top:54px; }
.spine-line{
  position:absolute; left:0; right:0; top:50%; height:1px;
  background:linear-gradient(90deg, rgba(27,102,201,.10), var(--primary) 12%, var(--primary) 88%, rgba(27,102,201,.10));
}
/* The data pulse travelling down the bus. */
.spine-pulse{
  position:absolute; left:20px; top:calc(50% - 3px);
  width:7px; height:7px;
  background:#0F4C8F;
  box-shadow:0 0 0 3px rgba(255,255,255,.65);
  animation:nfBus 5.5s linear infinite;
}
.lane{
  position:absolute; left:0;
  font-weight:600; font-size:9.5px; line-height:1;
  letter-spacing:.16em; text-transform:uppercase;
  color:#4A5460;
  background:rgba(247,250,252,.86);
  padding:4px 7px;
  box-shadow:0 0 0 1px rgba(27,102,201,.12);
  cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.lane-up:hover,
.lane-up:focus-visible{ transform:translateY(-4px) scale(1.05); }
.lane-down:hover,
.lane-down:focus-visible{ transform:translateY(4px) scale(1.05); }
.lane:hover,
.lane:focus-visible{
  color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 1px rgba(27,102,201,.5), 0 8px 16px -6px rgba(18,42,72,.28);
}
.lane-up{ top:0; }
.lane-down{ bottom:0; }

.taps{ position:absolute; inset:0; display:flex; padding:0 10px; }
/* The lane wrappers exist for the sub-1180px fallback only; on the wide bus
   they collapse so the nine .tap elements are direct flex items again. */
.lane-group,
.lane-taps{ display:contents; }
.tap{ flex:1; display:grid; grid-template-rows:1fr 1fr; justify-items:center; }
.tap-inner{ display:flex; flex-direction:column; align-items:center; }
.tap-up .tap-inner{ align-self:end; }
.tap-down .tap-inner{ align-self:start; grid-row:2; }
.tap-tag{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:5px 9px 6px;
  white-space:nowrap;                /* nine tags must never wrap */
  background:rgba(247,250,252,.88);
  box-shadow:0 0 0 1px rgba(27,102,201,.16);
  color:inherit; cursor:pointer;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease;
}
/* Each tag pops away from the bus on hover, so it reads as selectable. */
.tap-up .tap-tag:hover,
.tap-up .tap-tag:focus-visible{
  transform:translateY(-5px) scale(1.06);
  background:#fff;
  box-shadow:0 0 0 1px rgba(27,102,201,.5), 0 10px 20px -6px rgba(18,42,72,.30);
}
.tap-down .tap-tag:hover,
.tap-down .tap-tag:focus-visible{
  transform:translateY(5px) scale(1.06);
  background:#fff;
  box-shadow:0 0 0 1px rgba(27,102,201,.5), 0 10px 20px -6px rgba(18,42,72,.30);
}
.tap-up .tap-tag{ margin-bottom:11px; }
.tap-down .tap-tag{ margin-top:11px; }
.tap-name{ font-weight:600; font-size:12.5px; letter-spacing:.02em; color:var(--ink); }
.tap-what{ font-weight:400; font-size:10.5px; letter-spacing:.04em; color:var(--ink); }
.tap-stem{ width:1px; height:34px; background:var(--primary); }
.tap-dot{ width:7px; height:7px; background:var(--primary); animation:nfTap 3s ease-in-out infinite; }
.tap-up .tap-dot{ margin-bottom:-3px; }
.tap-down .tap-dot{ margin-top:-3px; }

/* --------------------------------------------------------------------------
   4. Module sections — raised plates in a recessed tray
   -------------------------------------------------------------------------- */
.modules{
  padding:56px 0 66px;
  background:var(--tray);
  border-top:1px solid var(--border);
  box-shadow:var(--sh-tray);
}
.section-head{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) auto;
  gap:40px;
  align-items:end;
  padding-bottom:20px;
  border-bottom:2px solid var(--ink);
}
.section-head h2{ font-size:27px; font-weight:700; line-height:1.15; }
.section-head p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--muted); max-width:38rem; }
.section-count{
  font-weight:600; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); white-space:nowrap;
}
.section-gap{ height:56px; }

.panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:26px;
}
.panel{
  position:relative;
  display:flex; flex-direction:column;
  padding:24px 22px 22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  color:var(--ink);
  box-shadow:var(--sh-plate);
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, border-color .2s ease;
}
.panel:hover{
  transform:translateY(-3px);
  border-color:rgba(27,102,201,.42);
  box-shadow:var(--sh-plate-hover);
  color:var(--ink);
}
/* 2px stub, echoing the stems on the hero bus. */
/* ---- Hover-revealed holographic sigil, one per module ---- */
.holo{
  position:absolute; top:18px; right:18px;
  pointer-events:none;
  opacity:0;
  filter:saturate(1.25) drop-shadow(0 1px 4px rgba(120,90,220,.20));
  transition:opacity .34s ease;
}
.panel:hover .holo,
.panel:focus-visible .holo{ opacity:1; }
.holo svg{ display:block; animation:holoHue 9s linear infinite, holoFloat 5s ease-in-out infinite alternate; }
.panel-stub{ display:block; width:2px; height:18px; background:var(--primary); margin-bottom:16px; }
.panel-keyline{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.panel-key{
  font-weight:600; font-size:11px;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--primary);
}
.demo-chip{
  font-weight:600; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent);
  padding:3px 7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.panel h3{ margin:0 0 9px; font-size:20px; font-weight:700; line-height:1.25; letter-spacing:-.02em; }
.panel p{ margin:0 0 20px; font-size:15px; line-height:1.5; color:var(--muted); }
.panel-more{ margin-top:auto; font-weight:600; font-size:13.5px; color:var(--primary); }

/* ---------------------------------- Motion -------------------------------- */
@keyframes nfRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
@keyframes nfDrift{ 0%{ transform:scale(1.06); } 100%{ transform:scale(1.15) translate3d(-2.2%,-1.4%,0); } }
/* Translate by exactly one tile so the loop is seamless. */
@keyframes nfDotA{ to{ transform:translate3d(9px,9px,0); } }
@keyframes nfDotB{ to{ transform:translate3d(-14px,14px,0); } }
@keyframes nfSheen{ 0%{ transform:translateX(-30%); opacity:0; } 35%{ opacity:.55; } 100%{ transform:translateX(115%); opacity:0; } }
@keyframes nfBus{ 0%{ transform:translateX(0); opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ transform:translateX(1060px); opacity:0; } }
@keyframes nfTap{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
/* Holographic sigils: the site's own module icons, stroked with the shared
   SVG iridescent gradient (#nfHolo, defined once at the top of <body>), then
   hue-cycled and floated so each one shimmers slightly out of phase. */
@keyframes holoHue{ to{ filter:hue-rotate(360deg); } }
@keyframes holoFloat{ to{ transform:translateY(-3px); } }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.001ms !important; }
}

/* -------------------------------- Responsive ------------------------------ */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; align-items:start; }
  .hero h1{ font-size:48px; }
  .panel-grid{ grid-template-columns:repeat(2,1fr); }
  .section-head{ grid-template-columns:1fr; gap:12px; }
  .section-head p{ max-width:none; }
}
/* The horizontal bus needs the full 1180px shell to fit nine tags on one
   line. Below that it becomes two labelled lanes of tags — the grouping is
   carried by headings instead of by position above/below the rail. */
@media (max-width:1180px){
  .spine{ height:auto; margin-top:40px; }
  .spine-line,
  .spine-pulse{ display:none; }
  .taps{ position:static; display:grid; gap:28px; padding:0; }
  .lane-group{ display:block; }
  .lane-taps{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .lane{ position:static; display:inline-block; margin-bottom:12px; }
  .tap{ display:block; justify-items:normal; }
  .tap-inner{ display:block; justify-self:stretch; align-self:auto; }
  .tap-stem,
  .tap-dot{ display:none; }
  .tap-up .tap-tag,
  .tap-down .tap-tag{ margin:0; }
  .tap-tag{ align-items:flex-start; white-space:normal; }
  .tap-up .tap-tag:hover,
  .tap-down .tap-tag:hover{ transform:translateY(-3px) scale(1.01); }
  .lane-up:hover,
  .lane-down:hover{ transform:translateY(-3px) scale(1.03); }
}
@media (max-width:640px){
  .site-header{ width:calc(100% - 28px); padding:10px 10px 10px 14px; }
  .site-header.is-pinned{ width:calc(100% - 28px); top:8px; }
  .brand-logo{ height:30px; }
  .inner{ padding-inline:22px; }
  .site-nav a:not(.btn-demo){ display:none; }
  .hero{ padding:104px 0 36px; }
  .hero h1{ font-size:38px; }
  .modules{ padding:44px 0 52px; }
  .panel-grid{ grid-template-columns:1fr; }
  .lane-taps{ grid-template-columns:repeat(2,1fr); }
}

/* ======================= local additions =============================
   Not from the handoff. Kept here so re-applying a new handoff cannot
   silently drop them -- design/apply-handoff.py re-appends this block.
   ==================================================================== */

/* The sections the handoff does not restyle still read site.css's token names.
   Map them on to the new values so they follow the redesign rather than
   clashing with it. html[data-theme] is included because a visitor who used the
   old accent picker still carries data-theme, which outranks :root. */
:root,
html[data-theme]{
  --text:#2C343C;
  --text-muted:#5A6572;
  --surface-alt:#ECEDE9;
  --border:#DCDDD7;
  --accent:#1B66C9;
  --accent-hover:#144E9D;
  --accent-ink:#FFFFFF;
  --primary:#1B66C9;
  --primary-hover:#144E9D;
  --radius:2px;
  --radius-sm:2px;
}

/* Montserrat everywhere, per the handoff. */
body, h1, h2, h3, h4, h5, h6, .mono, code, kbd, pre, samp{ font-family:var(--font); }

/* --- winning against site.css ------------------------------------------------
   site.css is loaded first but several of its selectors are MORE SPECIFIC than
   the handoff's, so they win regardless of order. Two consequences had to be
   undone, and both need selectors that at least match the specificity:

     site.css  .site-nav a:not(.btn)   (0,2,1)   beats  .btn-demo   (0,1,0)
       -> the demo button was painted --text-muted grey, not its intended white
     site.css  a:hover                 (0,1,1)   beats  a           (0,0,1)
       -> every anchor in the new chrome underlined on hover, including the nine
          module plates and the nine hero tags

   The handoff cannot know about this; it was authored as a standalone page. */
.site-nav a.btn-demo{ color:#fff; }

/* No hover underline on the new chrome. Prose links in the retained sections
   keep theirs -- underlining body copy on hover is wanted, underlining a card
   or a tag is not. */
.panel:hover, .panel:focus-visible,
.tap-tag:hover, .tap-tag:focus-visible,
.lane:hover, .lane:focus-visible,
.site-nav a:hover, .site-header a:hover{
  text-decoration:none;
}

/* Log in. The handoff's nav has no sign-in affordance, but the ERP is served at
   /app on this domain. Same geometry as the demo CTA so they read as a pair,
   outlined rather than filled so the demo stays the primary action. The
   .site-nav prefix is there for the specificity reason above. */
.site-nav a.btn-demo.btn-signin{
  color:var(--primary);
  background:transparent;
  box-shadow:inset 0 0 0 1px rgba(27,102,201,.42);
}
.site-nav a.btn-demo.btn-signin:hover{
  color:#fff;
  background:linear-gradient(180deg,#2E7CDC,var(--primary));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             0 9px 18px -8px rgba(18,42,72,.48);
}

/* The back link sat on the same line as the eyebrow and crowded it: site.css
   makes both display:inline-flex, so they flow as one line and the back link's
   margin-bottom does nothing to separate them. Block-level flex puts it on its
   own row; width:fit-content keeps the hit area around the text rather than
   stretching it across the hero. */
.hero-inner .back-link{
  display:flex;
  width:fit-content;
}

/* "Parts & Logistics" wrapped to two lines. The handoff's .section-head is a
   220px | 1fr | auto grid, and at 27px in expanded Archivo that heading does not
   fit 220px, while "Time & HR" does. Let the heading column size to its content
   instead. Scoped to min-width so it cannot override the handoff's own
   max-width:1000px rule, which collapses the grid to one column -- this block is
   appended after that media query, so an unscoped rule would win on mobile too. */
@media (min-width:1001px){
  .section-head{ grid-template-columns:max-content minmax(0,1fr) auto; }
  .section-head h2{ white-space:nowrap; }
}

/* The custom-work section is the pitch, not a footnote: bigger type, its own
   surface, and cards that read as substantial. It is a retained section styled by
   site.css, so it needs its own emphasis here rather than inheriting the
   handoff's module-tray treatment. */
#custom{
  background:var(--surface-2, #EEF1F4);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding-block:clamp(56px, 7vw, 96px);
  /* No top margin. The module tray above ends with its own background, and this
     section starts one; a margin between them just exposes a strip of the warm
     page background (--bg) as a cream band across the full width. The padding
     above already gives the heading its room, inside the band where it belongs. */
  margin-top:0;
}
#custom .section-head{
  display:block;
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:clamp(28px, 3vw, 44px);
}
#custom .section-head h2{
  white-space:normal;
  font-size:clamp(32px, 4.4vw, 54px);
  line-height:1.05;
  letter-spacing:-.01em;
  max-width:18ch;
  margin-bottom:16px;
}
#custom .section-head p.muted{
  font-size:clamp(16px, 1.35vw, 19px);
  line-height:1.55;
  max-width:52ch;
  color:var(--muted);
}
#custom .integration-grid{ gap:20px; }
#custom .integration-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:2px;
  padding:clamp(22px, 2.4vw, 34px);
  box-shadow:var(--sh-plate);
}
#custom .integration-card h3{
  font-size:clamp(19px, 1.7vw, 23px);
  margin-bottom:10px;
}
#custom .integration-card p{ font-size:15.5px; line-height:1.55; color:var(--muted); }
#custom .integration-note{
  margin-top:clamp(24px, 2.6vw, 36px);
  font-size:17px;
  color:var(--ink);
}
#custom .integration-note a{ font-weight:600; }

/* Same cream band again, this time below the section: site.css gives
   .site-footer a 64px margin-top, which between the custom section's band and
   the footer's white surface shows as a strip of page background rather than as
   space. Scoped with the adjacent sibling so it only applies where a banded
   section runs straight into the footer -- the product pages end on plain
   background and still want the gap. */
#custom + .site-footer{ margin-top:0; }

/* Static header, for how-it-works and the product pages. The handoff's header is
   position:absolute inside .shell so it floats over the hero; those pages have
   no hero and no .shell, so there it sits in the normal flow. */
.site-header--static{
  position:static;
  max-width:var(--maxw);
  margin:0 auto;
  border-bottom:1px solid var(--border);
  backdrop-filter:none;
  background:var(--surface);
}