/* Shared Skovrum marketing shell.
   Page-specific layouts stay in index.html/features.html/…; this file owns
   cross-page theme behavior, the shared floating theme control, and the shared
   site header and footer (markup between the MARKETING-HEADER/FOOTER markers,
   identical on every page; scripts/verify-marketing.mjs checks). */
html[data-marketing-theme="light"],
html[data-marketing-theme="light"] body{background:#fbfbfe}
html[data-marketing-theme="dark"],
html[data-marketing-theme="dark"] body{background:#101017}

/* Shell tokens. Pages may also define these; the values match. A page narrows the
   header/footer to its content column with --shell-max (release notes: 760px). */
.sk{--hdr:rgba(251,251,254,.78);--grad-tagline:linear-gradient(92deg,#8b74f5,#41a578)}
.sk.dark{--hdr:rgba(16,16,23,.72)}
@media (prefers-color-scheme:dark){ .sk.auto{--hdr:rgba(16,16,23,.72)} }

.site-hd{position:sticky;top:0;z-index:40;background:var(--hdr);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-hd-in{max-width:var(--shell-max,1080px);margin:0 auto;padding:0 24px;height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.site-brand svg{width:36px;height:36px;display:block}
.site-word{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.site-nav{display:flex;align-items:center;gap:18px}
.hd-link{font-weight:800;font-size:14px;color:var(--muted);text-decoration:none;transition:color .15s ease}
.hd-link:hover,.hd-link[aria-current="page"]{color:var(--purple-strong)}
.hd-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;white-space:nowrap;border-radius:12px;background:var(--grad-purple);color:#fff;font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 12px 24px -10px rgba(78,61,156,.55);transition:box-shadow .2s ease,transform .15s ease}
.hd-cta:hover{color:#fff;box-shadow:0 18px 32px -10px rgba(78,61,156,.7);transform:translateY(-1px)}
.hd-cta:active{transform:translateY(1px)}
.hd-cta svg{width:16px;height:16px}

/* Phone menu: a <details> disclosure, so it works without JavaScript; landing.js
   closes it on an outside click or Esc. */
.hd-menu{position:relative;display:none}
.hd-menu summary{list-style:none;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.hd-menu summary::-webkit-details-marker{display:none}
.hd-menu summary svg{width:19px;height:19px}
.hd-menu summary:focus-visible,.hd-link:focus-visible,.hd-cta:focus-visible,.foot-link:focus-visible,.site-brand:focus-visible{outline:2px solid #7c5cf1;outline-offset:3px;border-radius:10px}
.hd-menu-panel{position:absolute;right:0;top:50px;min-width:200px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 24px 60px -22px rgba(15,16,30,.45);display:flex;flex-direction:column}
.hd-menu-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-weight:800;font-size:15px;color:var(--ink);text-decoration:none}
.hd-menu-panel a:hover,.hd-menu-panel a[aria-current="page"]{background:var(--purple-soft);color:var(--purple-strong)}
@media (max-width:600px){
  .hd-link{display:none}
  .hd-menu{display:block}
  .site-nav{gap:10px}
}
/* Phones: the primary button keeps one line beside the brand and the menu. */
@media (max-width:420px){
  .site-hd-in{padding:0 16px}
  .hd-cta{padding:0 15px}
  .hd-cta svg{display:none}
}
@media (max-width:360px){ .site-hd .site-word{display:none} }

.site-ft{position:relative;z-index:1;border-top:1px solid var(--line);padding:34px 0}
.site-ft-in{max-width:var(--shell-max,1080px);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap}
.site-ft-brand{display:flex;align-items:center;gap:10px}
.site-ft-brand svg{width:30px;height:30px;display:block}
.site-ft-brand .site-word{font-size:18px}
.site-tagline{font-weight:800;font-size:13px;background:var(--grad-tagline);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#8b74f5}
.site-ft-links{display:flex;align-items:center;gap:4px 16px;flex-wrap:wrap;color:var(--muted);font-size:12.5px;font-weight:650}
.foot-link{display:inline-flex;align-items:center;min-height:40px;color:var(--muted);font-weight:800;text-decoration:none;transition:color .15s ease}
.foot-link:hover,.foot-link[aria-current="page"]{color:var(--purple)}
.foot-link.signin{color:var(--purple-strong)}

.theme-fab{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;
  width:38px;height:38px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--muted);
  box-shadow:0 12px 26px -16px rgba(40,42,70,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font:700 19px/1 'Manrope',sans-serif;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease
}
.theme-fab:hover{transform:translateY(-2px);border-color:rgba(124,92,241,.42);color:var(--purple-strong)}
.theme-fab:focus-visible{outline:2px solid #7c5cf1;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .hd-cta,.hd-link,.foot-link{transition:none}
}