/* ==========================================================================
   nav section · every rule is scoped under #site-header.
   Header bar + morphing mega menu (with promo cards) + full-screen mobile menu.
   Palette: tokens from base.css only (apricot accent, violet "working", gold "done"). No green / teal.
   ========================================================================== */
#site-header{
  --sh-warm-200:#d8cfc9;
  --sh-warm-900:#282726;   /* panel / pill surface */
  --sh-warm-800:#302e2c;   /* raised inside panels */
  --sh-gray-800:#3a3936;   /* hairlines inside panels */
  --sh-gray-300:#b7b4b1;   /* descriptions */
  --sh-mlink:#b1aeab;
  --sh-ink:#181818;
  --sh-p1o:cubic-bezier(.25,.46,.45,.94);
  --sh-p2o:cubic-bezier(.215,.61,.355,1);
  --sh-p2i:cubic-bezier(.55,.055,.675,.19);
  --sh-p2io:cubic-bezier(.645,.045,.355,1);
  --sh-p3o:cubic-bezier(.165,.84,.44,1);
  --sh-expo:cubic-bezier(.16,1,.3,1);
  --sh-back:cubic-bezier(.34,1.4,.64,1);
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:90;
  transition:z-index 0s linear .35s; /* stay lifted while the closing panel/menu animates out */
  pointer-events:none;color:var(--cream);
}

/* ---------------- intro ---------------- */
@keyframes sh-intro{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
#site-header [data-sh-intro]{animation:sh-intro .9s var(--sh-p2o) var(--d,0s) both}

/* ---------------- veil ---------------- */
#site-header .sh-veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:rgba(12,12,12,.32);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:opacity .45s var(--sh-p2io);
}
#site-header.is-menu-open .sh-veil{opacity:1;pointer-events:auto;transition:opacity .3s var(--sh-p2o)}

/* ---------------- bar ---------------- */
#site-header .sh-bar{
  position:fixed;z-index:3;top:0;left:0;right:0;height:var(--header-h);pointer-events:auto;
  background-color:rgba(40,39,38,0);border-radius:0;box-shadow:0 8px 24px rgba(0,0,0,0);
  transition:top .4s var(--sh-p2o),left .4s var(--sh-p2o),right .4s var(--sh-p2o),height .4s var(--sh-p2o),
             background-color .4s var(--sh-p2o),border-radius .4s var(--sh-p2o),box-shadow .4s var(--sh-p2o),
             transform .4s var(--sh-p2o);
}
#site-header.is-floating .sh-bar{
  top:12px;height:64px;
  left:max(24px,calc((100vw - 1440px)/2 + 24px));right:max(24px,calc((100vw - 1440px)/2 + 24px));
  background-color:rgba(40,39,38,.9);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
}
#site-header.is-hidden .sh-bar{transform:translateY(calc(-100% - 48px));transition-timing-function:var(--sh-p2i)}

#site-header .sh-nav{
  position:relative;z-index:2;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  width:100%;max-width:calc(var(--container) + var(--gutter)*2);height:100%;margin:0 auto;padding:0 var(--gutter);
  transition:padding .4s var(--sh-p2o);
}
#site-header.is-floating .sh-nav{padding:0 8px 0 24px}

/* logo */
#site-header .sh-logo{justify-self:start;display:flex;align-items:center;gap:10px;height:40px;padding-right:6px;border-radius:6px}
#site-header .sh-logo img{width:28px;height:28px;transition:rotate .6s var(--sh-back)}
@media (hover:hover){#site-header .sh-logo:hover img{rotate:-8deg}}
#site-header .sh-logo__word{font:700 26px/1 var(--font-display);letter-spacing:-.04em;color:var(--cream);transform:translateY(-1px)}

/* centered menu */
#site-header .sh-menu{display:flex;align-items:center;gap:2px}
#site-header .sh-trigger{
  position:relative;display:flex;align-items:center;height:48px;padding:0 16px;border-radius:8px;
  font:500 13px/1 var(--font-mono);text-transform:uppercase;color:var(--cream);white-space:nowrap;
  transition:background-color .35s cubic-bezier(.4,0,.2,1),color .35s cubic-bezier(.4,0,.2,1);
}
@media (hover:hover){#site-header .sh-trigger:hover{background:var(--cream);color:var(--sh-ink)}}
#site-header .sh-trigger[aria-expanded="true"]{background:var(--cream);color:var(--sh-ink)}
/* section containing the current page */
#site-header .sh-trigger.is-current::after{
  content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;
  background:var(--accent);transition:opacity .2s;
}
#site-header .sh-trigger.is-current[aria-expanded="true"]::after{opacity:0}

/* right side */
#site-header .sh-actions{justify-self:end;display:flex;align-items:center;gap:8px}
#site-header .sh-cta{transition:background-color .3s var(--ease),translate .35s var(--sh-back)}
@media (hover:hover){#site-header .sh-cta:hover{translate:0 -2px}}
#site-header .sh-cta:active{translate:0 0;background:var(--cream-2)}
#site-header .sh-arrow{width:20px;height:20px;flex-shrink:0;transition:translate .35s var(--sh-back)}

/* ---------------- mega-menu shell ---------------- */
#site-header .sh-dd{
  position:absolute;top:calc(100% + 8px);left:50%;max-width:calc(100vw - 48px);overflow:hidden;
  border-radius:14px;background:var(--sh-warm-900);
  box-shadow:0 30px 60px -16px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-10px);
  transition:opacity .35s var(--sh-p2io),transform .4s var(--sh-p2io),visibility 0s linear .4s,
             width .55s var(--sh-p3o),height .55s var(--sh-p3o);
}
#site-header .sh-dd.is-open{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
  transition:opacity .4s var(--sh-p3o),transform .45s var(--sh-expo),visibility 0s,
             width .55s var(--sh-p3o),height .55s var(--sh-p3o);
}
#site-header .sh-dd.is-snap{transition:none}
#site-header .sh-dd,
#site-header .sh-panel{max-height:calc(100vh - 104px)}
#site-header.is-floating .sh-dd,
#site-header.is-floating .sh-panel{max-height:calc(100vh - 112px)}
#site-header .sh-panel{
  position:absolute;top:0;left:0;opacity:0;visibility:hidden;overflow-x:hidden;overflow-y:auto;
  overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--sh-gray-800) transparent;
}
#site-header .sh-panel.is-active{opacity:1;visibility:inherit;transition:opacity .35s var(--sh-p2o) .1s}

/* item rise on open */
@keyframes sh-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#site-header .sh-panel.is-active [data-rise]{animation:sh-rise .55s var(--sh-expo) calc(.08s + var(--i,0) * .035s) both}

/* shared bits */
#site-header .sh-eyebrow{font:500 12px/1 var(--font-mono);text-transform:uppercase;color:var(--taupe)}
#site-header .sh-dot{color:var(--accent)}
#site-header .sh-hi{color:var(--cream)}
#site-header .sh-panel a{border-radius:6px}
#site-header .sh-panel a:focus-visible{outline-offset:4px}
#site-header .sh-ico{
  width:24px;height:24px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;
  transition:translate .45s var(--sh-back);
}

/* current page marker inside panels */
#site-header [aria-current="page"] .sh-feat__t::after,
#site-header [aria-current="page"] .sh-glink__t::after,
#site-header [aria-current="page"] .sh-tile__t::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:10px;border-radius:50%;
  background:var(--accent);vertical-align:.18em;
}

/* ---------- feature items (product / use cases) ---------- */
#site-header .sh-feats{display:grid;grid-template-columns:1fr 1fr;gap:36px 24px;padding:40px;align-content:start}
#site-header .sh-gh{padding:40px 40px 0}
#site-header .sh-gh + .sh-feats{padding-top:28px}
#site-header .sh-feat{display:block;max-width:300px}
#site-header .sh-feat__t{
  display:block;margin-top:16px;font:700 20px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--sh-warm-200);
  transition:color .35s var(--sh-expo),translate .45s var(--sh-expo);
}
#site-header .sh-feat__d,
#site-header .sh-glink__d{display:block;margin-top:6px;font-size:13px;line-height:1.45;font-weight:400;color:var(--sh-gray-300)}
@media (hover:hover){
  #site-header .sh-feat:hover .sh-ico{translate:0 -3px}
  #site-header .sh-feat:hover .sh-feat__t{color:var(--cream)}
}
#site-header .sh-feat[aria-current="page"] .sh-feat__t{color:var(--cream)}

/* ---------- promo cards ---------- */
#site-header .sh-promo{
  position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:10px;
  background:#121212;color:var(--cream);box-shadow:inset 0 0 0 1px var(--sh-gray-800);
  transition:box-shadow .35s var(--sh-p2o);
}
@media (hover:hover){#site-header .sh-promo:hover{box-shadow:inset 0 0 0 1px #4a4744}}
#site-header .sh-promo__copy{position:relative;z-index:2;display:block;padding:28px 28px 0}
#site-header .sh-promo__eyebrow{display:block;font:500 12px/1 var(--font-mono);text-transform:uppercase;color:var(--taupe)}
#site-header .sh-promo__title{
  display:block;max-width:400px;margin-top:12px;font:700 28px/1.04 var(--font-display);letter-spacing:-.03em;color:var(--taupe);
}
#site-header .sh-promo__bar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;height:64px;
  padding-left:28px;border-top:1px solid var(--sh-gray-800);background:#121212;
}
#site-header .sh-promo__cta{font:500 13px/1 var(--font-mono);text-transform:uppercase;color:var(--cream)}
#site-header .sh-promo__go{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;width:64px;height:64px;
  background:var(--accent);color:var(--accent-ink);transition:background-color .3s var(--ease);
}
#site-header .sh-promo__go .sh-arrow{width:24px;height:24px}
@media (hover:hover){
  #site-header .sh-promo:hover .sh-promo__go{background:var(--accent-hover)}
  #site-header .sh-promo:hover .sh-promo__go .sh-arrow{translate:4px 0}
}

/* stage = the illustration area of a promo */
#site-header .sh-stage{position:relative;display:block;flex:1;min-height:150px;overflow:hidden}
#site-header .sh-stage::before{ /* soft dot grid */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(circle at 1px 1px,#34322f 1px,transparent 1.2px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
/* tag slot: top-left inside the stage padding (or inside the demo window's title bar) */
#site-header .sh-ill{
  position:absolute;z-index:3;top:14px;left:28px;font:500 10px/1 var(--font-mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--taupe);white-space:nowrap;
}
#site-header .sh-win__bar .sh-ill{position:static;flex-shrink:0;margin-left:auto;padding-left:10px}
#site-header .sh-ask__card .sh-ill{top:16px;left:auto;right:16px}
#site-header .sh-brief .sh-ill{position:static;align-self:flex-start;margin-bottom:2px}
/* live (animated) stages hide what has not happened yet; static stages show the completed state */
#site-header .sh-stage [data-on]{transition:opacity .45s var(--sh-p2o),transform .55s var(--sh-expo),background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
#site-header .sh-stage.is-live [data-on]:not(.is-on){opacity:0;transform:translateY(6px)}
#site-header .sh-stage.is-snap,
#site-header .sh-stage.is-snap *{transition:none!important}

/* ----- product: launcher → task panel → brief ----- */
#site-header .sh-win{
  position:absolute;left:24px;right:120px;top:22px;bottom:22px;overflow:hidden;border-radius:10px;
  background:#1b1a19;box-shadow:inset 0 0 0 1px #2e2c2a;
}
#site-header .sh-win__bar{display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;border-bottom:1px solid #2e2c2a}
#site-header .sh-win__bar i{width:7px;height:7px;border-radius:50%;background:#3a3936}
#site-header .sh-win__bar b{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-left:8px;font:500 10px/1 var(--font-mono);text-transform:uppercase;color:var(--muted)}
#site-header .sh-win__doc{display:flex;flex-direction:column;gap:11px;padding:18px 16px}
#site-header .sh-win__doc i{display:block;width:var(--w);height:6px;border-radius:3px;background:#2a2826}
#site-header .sh-win__doc i:first-child{height:10px;background:#34312e;margin-bottom:4px}

#site-header .sh-tp{
  /* sits beside the launcher (bottoms aligned), never on top of it */
  position:absolute;right:80px;bottom:22px;width:min(264px,calc(100% - 112px));padding:12px;border-radius:12px;
  background:var(--sh-warm-800);box-shadow:0 18px 40px -10px rgba(0,0,0,.6),inset 0 0 0 1px #423f3c;
  transform-origin:calc(100% + 37px) calc(100% - 21px);
}
#site-header .sh-stage.is-live .sh-tp:not(.is-on){transform:scale(.4);opacity:0}
#site-header .sh-tp__ask{
  display:block;padding:9px 11px;border-radius:9px 9px 3px 9px;background:#3a3735;
  font:500 12.5px/1.35 var(--font-display);color:var(--cream);
}
#site-header .sh-tp__steps{display:flex;flex-direction:column;padding:4px 2px 0}
#site-header .sh-step{display:flex;align-items:center;gap:8px;max-height:22px;margin-top:7px;overflow:hidden;font:400 12px/1.2 var(--font-display);color:var(--sh-gray-300)}
#site-header .sh-step__ic{position:relative;width:14px;height:14px;flex-shrink:0;border-radius:50%;background:var(--ok);transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
#site-header .sh-step__ic::after{ /* check */
  content:"";position:absolute;left:4.5px;top:2.6px;width:3.5px;height:6.5px;border:solid var(--accent-ink);border-width:0 1.6px 1.6px 0;rotate:45deg;
  transition:opacity .25s var(--ease);
}
@keyframes sh-spin{to{rotate:360deg}}
#site-header .sh-stage.is-live .sh-step:not(.is-done) .sh-step__ic{background:transparent;box-shadow:inset 0 0 0 1.6px rgba(155,156,255,.3)}
#site-header .sh-stage.is-live .sh-step:not(.is-done) .sh-step__ic::after{
  opacity:1;left:0;top:0;width:14px;height:14px;rotate:0deg;border:1.6px solid transparent;border-top-color:var(--violet);border-radius:50%;box-sizing:border-box;
  animation:sh-spin .8s linear infinite;
}
#site-header .sh-stage.is-live .sh-step:not(.is-done){color:var(--cream)}
#site-header .sh-tp__res{display:flex;align-items:center;justify-content:space-between;gap:10px;max-height:72px;margin-top:10px;padding:9px 9px 9px 11px;border-radius:9px;background:#1f1e1d;box-shadow:inset 0 0 0 1px #3a3936}
/* the task panel grows upward as each step arrives (no empty box waiting for content) */
#site-header .sh-stage .sh-step,
#site-header .sh-stage .sh-tp__res{
  transition:opacity .45s var(--sh-p2o),transform .55s var(--sh-expo),max-height .55s var(--sh-expo),margin .55s var(--sh-expo),padding .55s var(--sh-expo),
             background-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
#site-header .sh-stage.is-live .sh-step:not(.is-on),
#site-header .sh-stage.is-live .sh-tp__res:not(.is-on){max-height:0;margin-top:0;padding-top:0;padding-bottom:0}
#site-header .sh-tp__doc{display:flex;flex-direction:column;gap:3px;min-width:0}
#site-header .sh-tp__doc b{font:600 12.5px/1.2 var(--font-display);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#site-header .sh-tp__doc small{font:500 10px/1 var(--font-mono);text-transform:uppercase;color:var(--ok)}
#site-header .sh-tp__btn{flex-shrink:0;padding:7px 10px;border-radius:6px;font:500 10.5px/1 var(--font-mono);text-transform:uppercase;background:var(--accent);color:var(--accent-ink)}
#site-header .sh-stage.is-live .sh-tp__btn:not(.is-on){opacity:1;transform:none;background:var(--cream);color:var(--ink)}

#site-header .sh-launch{
  position:absolute;right:22px;bottom:22px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;background:#242322;box-shadow:0 0 0 1px #4a4744;
}
#site-header .sh-launch img{width:20px;height:20px}
#site-header .sh-launch::after{content:"";position:absolute;right:5px;top:5px;width:8px;height:8px;border-radius:22%;background:var(--accent);opacity:0} /* status symbol: waiting for you (active) */
#site-header .sh-stage.is-live .sh-launch:not(.is-on){opacity:1;transform:none}
#site-header .sh-stage.is-live .sh-launch:not(.is-on)::after{opacity:1;animation:status-sq-blink 1.6s var(--sh-p2o) infinite}

/* ----- use cases: request → brief ----- */
#site-header .sh-brief{display:flex;flex-direction:column;justify-content:center;gap:10px;padding:36px 28px 22px}
#site-header .sh-brief__ask{
  align-self:flex-start;display:flex;align-items:center;gap:8px;max-width:100%;padding:9px 12px 9px 9px;border-radius:999px;
  background:var(--sh-warm-800);box-shadow:inset 0 0 0 1px #423f3c;font:500 12.5px/1.25 var(--font-display);color:var(--cream);
}
#site-header .sh-brief__ask img{width:18px;height:18px;flex-shrink:0;border-radius:5px}
#site-header .sh-brief__card{display:flex;flex-direction:column;gap:2px;padding:6px 14px;border-radius:12px;background:#1b1a19;box-shadow:inset 0 0 0 1px #2e2c2a}
#site-header .sh-brief__row{display:flex;align-items:center;gap:14px;padding:9px 0}
#site-header .sh-brief__row + .sh-brief__row{border-top:1px solid #2a2826}
#site-header .sh-brief__k{flex-shrink:0;width:160px;font:500 10.5px/1.2 var(--font-mono);text-transform:uppercase;color:var(--taupe)}
#site-header .sh-brief__row i{display:block;width:var(--w);height:6px;border-radius:3px;background:#34312e}
#site-header .sh-brief__row:first-child i{background:linear-gradient(90deg,var(--accent) 0 18%,#34312e 18%)}

/* ----- resources: stacked guide cards ----- */
#site-header .sh-stack{min-height:132px}
#site-header .sh-stack__card{
  position:absolute;left:50%;bottom:-26px;display:flex;flex-direction:column;gap:9px;width:200px;height:132px;padding:18px 16px;
  border-radius:10px;background:#1d1c1b;box-shadow:inset 0 0 0 1px #34312e,0 14px 30px -12px rgba(0,0,0,.6);
  transform:translateX(-50%) translateX(var(--x,0)) rotate(var(--r,0deg));transition:transform .6s var(--sh-expo);
}
#site-header .sh-stack__card:nth-child(1){--x:-96px;--r:-8deg;background:#191817}
#site-header .sh-stack__card:nth-child(2){--x:92px;--r:7deg;background:#1b1a19}
#site-header .sh-stack__card:nth-child(3){--x:0px;--r:0deg;bottom:-16px;background:var(--sh-warm-800);box-shadow:inset 0 0 0 1px #45423f,0 18px 36px -12px rgba(0,0,0,.7)}
@media (hover:hover){
  #site-header .sh-promo:hover .sh-stack__card:nth-child(1){--x:-118px;--r:-11deg}
  #site-header .sh-promo:hover .sh-stack__card:nth-child(2){--x:114px;--r:10deg}
  #site-header .sh-promo:hover .sh-stack__card:nth-child(3){transform:translateX(-50%) translateY(-6px)}
}
#site-header .sh-stack__card i{display:block;width:var(--w);height:6px;border-radius:3px;background:#34312e}
#site-header .sh-stack__chip{display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin-bottom:2px;border-radius:8px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(255,143,90,.4)}
#site-header .sh-stack__chip img{width:16px;height:16px;border-radius:4px}
#site-header .sh-stack__card b{display:block;margin-bottom:3px;font:500 10px/1 var(--font-mono);text-transform:uppercase;color:var(--taupe)}
#site-header .sh-stack__card:nth-child(3) b{color:var(--cream)}

/* ----- company: approval request ----- */
#site-header .sh-ask{display:flex;align-items:center;justify-content:center;padding:36px 28px 24px}
#site-header .sh-ask__card{
  position:relative;display:flex;flex-direction:column;width:100%;max-width:340px;padding:16px;border-radius:12px;
  background:var(--sh-warm-800);box-shadow:inset 0 0 0 1px #423f3c,0 18px 40px -14px rgba(0,0,0,.6);
}
#site-header .sh-ask__k{font:500 10px/1 var(--font-mono);text-transform:uppercase;color:var(--taupe)}
#site-header .sh-ask__t{margin-top:9px;font:600 16px/1.2 var(--font-display);letter-spacing:-.01em;color:var(--cream)}
#site-header .sh-ask__m{margin-top:4px;font-size:12px;line-height:1.3;color:var(--sh-gray-300)}
#site-header .sh-ask__acts{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#site-header .sh-ask__no,
#site-header .sh-ask__yes{position:relative;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:6px;font:500 10.5px/1 var(--font-mono);text-transform:uppercase}
#site-header .sh-ask__no{background:#3a3735;color:var(--sh-gray-300)}
#site-header .sh-ask__yes{background:var(--ok);color:var(--accent-ink)}
#site-header .sh-ask__lbl,#site-header .sh-ask__ok{transition:opacity .25s var(--ease),transform .35s var(--sh-expo)}
#site-header .sh-ask__lbl{position:absolute;left:12px;opacity:0}
#site-header .sh-ask__ok{display:inline-flex;align-items:center;gap:6px}
#site-header .sh-ask__ok::before{content:"";width:3.5px;height:7px;margin:-2px 2px 0 1px;border:solid currentColor;border-width:0 1.6px 1.6px 0;rotate:45deg}
#site-header .sh-stage.is-live .sh-ask__yes:not(.is-on){opacity:1;transform:none}
#site-header .sh-stage.is-live .sh-ask__yes:not(.is-done){background:var(--cream);color:var(--ink)}
#site-header .sh-stage.is-live .sh-ask__yes.is-on:not(.is-done){background:var(--accent);color:var(--accent-ink);transform:scale(.95)}
#site-header .sh-stage.is-live .sh-ask__yes:not(.is-done) .sh-ask__lbl{opacity:1}
#site-header .sh-stage.is-live .sh-ask__yes:not(.is-done) .sh-ask__ok{opacity:0;transform:translateY(4px)}

/* ---------- PRODUCT ---------- */
#site-header .sh-pf{display:grid;grid-template-columns:1fr 1fr;width:min(1240px,calc(100vw - 48px));min-height:min(480px,calc(100vh - 112px))}
#site-header .sh-demo{min-height:272px}
#site-header .sh-pf__side{display:flex;flex-direction:column;padding:32px;border-left:1px solid var(--sh-gray-800)}
/* 7 items: fill column by column (4 + 3) so the list reads top-down without an orphan in the last row */
#site-header .sh-pf{grid-template-columns:7fr 5fr}
#site-header .sh-pf .sh-feats{grid-template-rows:repeat(4,auto);grid-auto-flow:column;row-gap:30px}
#site-header .sh-pf .sh-feat{max-width:320px}

/* ---------- USE CASES ---------- */
#site-header .sh-uc{display:grid;grid-template-columns:7fr 5fr;width:min(1240px,calc(100vw - 48px));min-height:min(540px,calc(100vh - 112px))}
#site-header .sh-uc__main{display:flex;flex-direction:column;padding-bottom:36px}
#site-header .sh-uc__side{display:flex;flex-direction:column;padding:32px;border-left:1px solid var(--sh-gray-800)}
#site-header .sh-all{
  display:flex;align-items:center;gap:10px;margin:auto 40px 0;padding:20px 0 4px;
  font:500 13px/1 var(--font-mono);text-transform:uppercase;color:var(--cream);border-top:1px solid var(--sh-gray-800);border-radius:0!important;
}
#site-header .sh-all .sh-arrow{width:18px;height:18px;color:var(--accent)}
@media (hover:hover){#site-header .sh-all:hover .sh-arrow{translate:4px 0}}
#site-header .sh-all[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- RESOURCES ---------- */
#site-header .sh-res{display:grid;grid-template-columns:1fr 1fr;width:min(1080px,calc(100vw - 48px));min-height:440px}
#site-header .sh-res__main{display:flex;flex-direction:column;padding:40px 40px 32px}
#site-header .sh-res__side{display:flex;flex-direction:column;padding:32px;border-left:1px solid var(--sh-gray-800)}
#site-header .sh-tiles{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px;margin-top:24px}
#site-header .sh-tile{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;height:100%;min-height:150px;padding:20px;border-radius:10px;
  background:rgba(255,255,255,.015);box-shadow:inset 0 0 0 1px var(--sh-gray-800);
  transition:background-color .35s var(--sh-p2o),box-shadow .35s var(--sh-p2o);
}
#site-header .sh-tile__txt{display:flex;flex-direction:column;gap:6px}
#site-header .sh-tile__t{font:700 20px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--sh-warm-200);transition:color .35s var(--sh-expo)}
#site-header .sh-tile__d{min-height:2.8em;font-size:13px;line-height:1.4;color:var(--sh-gray-300)}
#site-header .sh-tile__go{position:absolute;top:18px;right:18px;width:18px;height:18px;color:var(--taupe);transition:translate .4s var(--sh-back),color .3s}
@media (hover:hover){
  #site-header .sh-tile:hover{background:var(--sh-warm-800);box-shadow:inset 0 0 0 1px #4a4744}
  #site-header .sh-tile:hover .sh-tile__t{color:var(--cream)}
  #site-header .sh-tile:hover .sh-tile__go{translate:2px -2px;color:var(--accent)}
}

/* ---------- COMPANY ---------- */
#site-header .sh-co{display:grid;grid-template-columns:1fr 1.1fr;width:min(1000px,calc(100vw - 48px));min-height:440px}
#site-header .sh-co__side{display:flex;flex-direction:column;padding:32px;border-left:1px solid var(--sh-gray-800)}
#site-header .sh-group{display:flex;flex-direction:column;padding:40px}
#site-header .sh-group ul{margin-top:12px}
#site-header .sh-group li{padding:14px 0}
#site-header .sh-glink{display:block}
#site-header .sh-glink__t{
  display:inline-block;font:700 20px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--sh-warm-200);
  transition:translate .45s var(--sh-expo),color .35s var(--sh-expo);
}
@media (hover:hover){#site-header .sh-glink:hover .sh-glink__t{translate:6px 0;color:var(--cream)}}

/* narrow desktops */
@media (min-width:1025px) and (max-width:1279px){
  #site-header .sh-feats{gap:30px 20px;padding:32px}
  #site-header .sh-feat__t{font-size:18px}
  #site-header .sh-pf__side,#site-header .sh-uc__side,#site-header .sh-res__side,#site-header .sh-co__side{padding:24px}
  #site-header .sh-promo__title{font-size:24px}
  #site-header .sh-all{margin-left:32px;margin-right:32px}
  #site-header .sh-group{padding:32px}
  #site-header .sh-res__main{padding:32px 32px 24px}
  #site-header .sh-gh{padding:32px 32px 0}
  #site-header .sh-gh + .sh-feats{padding-top:24px}
  #site-header .sh-brief__k{width:140px}
}

/* short desktop viewports: tighten vertical rhythm so panels fit without inner scrolling */
@media (min-width:1025px) and (max-height:760px){
  #site-header .sh-gh{padding-top:28px}
  #site-header .sh-feats,
  #site-header .sh-pf .sh-feats{row-gap:22px}
  #site-header .sh-gh + .sh-feats{padding-top:20px}
  #site-header .sh-feat__t{margin-top:12px}
}

/* ---------------- burger ---------------- */
#site-header .sh-burger{display:none;position:relative;width:48px;height:48px;margin-right:-12px;border-radius:8px;flex-shrink:0}
#site-header .sh-burger span{
  position:absolute;left:50%;width:24px;height:2px;margin-left:-12px;border-radius:1px;background:var(--cream);
  transition:top .45s var(--sh-expo),rotate .45s var(--sh-expo),opacity .3s var(--sh-expo),width .45s var(--sh-expo);
}
#site-header .sh-burger span:nth-child(1){top:17px}
#site-header .sh-burger span:nth-child(2){top:23px;width:16px}
#site-header .sh-burger span:nth-child(3){top:29px}
#site-header.is-mobile-open .sh-burger span:nth-child(1){top:23px;rotate:45deg}
#site-header.is-mobile-open .sh-burger span:nth-child(2){opacity:0}
#site-header.is-mobile-open .sh-burger span:nth-child(3){top:23px;rotate:-45deg}

/* ---------------- mobile menu ---------------- */
#site-header .sh-mobile{
  position:fixed;z-index:2;top:0;left:0;right:0;height:0;overflow:hidden;pointer-events:none;
  background:var(--sh-warm-900);color:var(--cream);
  transition:height .5s var(--sh-expo);will-change:height;
}
#site-header.is-mobile-open .sh-mobile{height:100vh;height:100dvh;pointer-events:auto}
#site-header .sh-mobile__inner{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:calc(var(--header-h) + 8px) var(--gutter) max(20px,env(safe-area-inset-bottom))}
#site-header .sh-mnav{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#site-header .sh-mnav::-webkit-scrollbar{display:none}
#site-header .sh-mlist > li{
  border-bottom:1px solid var(--sh-gray-800);
  transition:opacity .45s var(--sh-p3o) calc(.16s + var(--i,0) * .06s),transform .45s var(--sh-p3o) calc(.16s + var(--i,0) * .06s);
}
#site-header .sh-mcta{
  display:flex;flex-shrink:0;padding-top:16px;
  transition:opacity .45s var(--sh-p3o) var(--cd,.5s),transform .45s var(--sh-p3o) var(--cd,.5s);
}
#site-header .sh-mobile.is-m-start .sh-mlist > li,
#site-header .sh-mobile.is-m-start .sh-mcta{opacity:0;transform:translateY(18px);transition:none}
#site-header .sh-mcta__btn{width:100%}
#site-header .sh-mrow{display:flex;align-items:center;gap:16px;width:100%;padding:22px 0;text-align:left;border-radius:4px}
#site-header .sh-mrow__n{width:18px;flex-shrink:0;font:500 12px/1 var(--font-mono);color:var(--taupe)}
#site-header .sh-mrow__l{flex:1;font:700 28px/1 var(--font-display);letter-spacing:-.025em;color:var(--cream)}
#site-header .sh-mrow__l .sh-dot{opacity:0;transition:opacity .25s}
#site-header .sh-mrow.is-current .sh-mrow__l .sh-dot{opacity:1}
#site-header .sh-mrow__i{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
#site-header .sh-mrow__v{transform-box:fill-box;transform-origin:center;transition:transform .3s var(--sh-p1o)}
#site-header .sh-mrow[aria-expanded="true"] .sh-mrow__v{transform:rotate(-90deg)}
#site-header .sh-macc{overflow:hidden;height:0;opacity:0}
#site-header .sh-macc.is-open{height:auto;opacity:1}
#site-header .sh-macc.is-anim{transition:height .5s var(--sh-p2o),opacity .5s var(--sh-p2o)}
#site-header .sh-macc.is-anim-out{transition:height .4s var(--sh-p2io),opacity .4s var(--sh-p2io)}
#site-header .sh-macc ul{padding:0 0 18px}
#site-header .sh-mlink{
  display:block;padding:10px 0 10px 34px;font:500 17px/1.35 var(--font-display);
  color:var(--sh-mlink);border-radius:4px;transition:color .2s;
}
#site-header .sh-mlink__t{display:flex;align-items:center;gap:10px}
#site-header .sh-mlink__d{display:block;margin-top:3px;font-size:13px;line-height:1.4;font-weight:400;color:var(--sh-gray-300)}
@media (hover:hover){#site-header .sh-mlink:hover{color:var(--cream)}}
#site-header .sh-mlink[aria-current="page"]{color:var(--cream)}
#site-header .sh-mlink[aria-current="page"] .sh-mlink__t::after{content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--accent)}
#site-header .sh-mlink--all{display:flex;align-items:center;gap:10px;margin-top:6px;font:500 12px/1 var(--font-mono);text-transform:uppercase;color:var(--cream);padding-top:14px;padding-bottom:14px}
#site-header .sh-mlink--all::after{content:"\2192";font:400 16px/1 var(--font-display);color:var(--accent)}

/* ---------------- ≤1024: hamburger layout ---------------- */
@media (max-width:1024px){
  #site-header .sh-nav{grid-template-columns:1fr auto}
  #site-header .sh-menu,
  #site-header .sh-cta,
  #site-header .sh-dd,
  #site-header .sh-veil{display:none}
  #site-header .sh-burger{display:block}
  #site-header.is-floating .sh-bar{top:10px;left:12px;right:12px;height:56px;border-radius:12px}
  #site-header.is-floating .sh-nav{padding:0 16px 0 16px}
  #site-header.is-mobile-open .sh-bar{box-shadow:none;background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (max-width:640px){
  #site-header .sh-logo__word{font-size:24px}
  #site-header .sh-mrow{padding:20px 0}
  #site-header .sh-mrow__l{font-size:26px}
}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  #site-header [data-sh-intro],
  #site-header .sh-panel.is-active [data-rise]{animation:none}
  #site-header .sh-mlist > li,#site-header .sh-mcta,#site-header .sh-panel.is-active{transition-delay:0s!important}
}

/* While a mega-menu or the mobile menu is open, lift the header above the overlays chat launcher
   (--ov-z-chat 800) so the veil blurs it and panels/CTAs are never covered. Stays below the
   cookie scrim (840), cookie banner (850) and demo modal (900). */
#site-header.is-menu-open,
#site-header.is-mobile-open{z-index:830;transition:z-index 0s}