/* ---- Scoping rule for this file ----
   EVERY selector here sits under .nst-chrome. That is not tidiness. The tokens
   are declared on .nst-chrome, so a rule that escapes it lands on markup where
   --nst-text and the rest do not exist, and an undefined custom property is
   invalid at computed value time: the declaration is dropped and the value
   inherits instead. Silently.

   It cost an evening. The dropdown rules were unscoped, /industry-playbooks/
   has its own dropdown outside .nst-chrome, and this file was overriding that
   page's correct colour with one that evaluated to nothing. The titles rendered
   grey rather than white and it read as "the colours were never updated".

   Add nothing to this file that is not under .nst-chrome.
*/
/* Shared site chrome for ai.nolanscottteam.com.
   Loaded by every page that is not index.html.

   EVERY SELECTOR IS PREFIXED nst- AND NOTHING HERE STYLES A BARE TAG.
   This site has three different page templates with three different class
   vocabularies, and index.html styles the bare nav tag as position:fixed, which
   already pinned a footer's link columns to the top of the hero once. Scoping is
   what makes one file safe to drop onto all of them.

   The header here is in normal flow rather than fixed. index.html has a fixed
   header and pays for it with four offsets that have to move together; these
   pages have their own sticky section navs and their own top spacing, and a
   fixed bar would sit on top of both. Unifying that is a restyle for later.
*/
.nst-chrome{
  --nst-bg:#070A11; --nst-line:rgba(255,255,255,0.07); --nst-cyan:#00C9FF;
  --nst-text:#F0F4FF; --nst-muted:#8892A4; --nst-dim:#3A4255; --nst-gold:#e8b931;
  --ic-li:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
  --ic-yt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E");
  --ic-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.71-2.13 1.38S.93 3.35.63 4.14c-.3.76-.5 1.64-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.71 1.46 1.38 2.13s1.34 1.08 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.71 2.13-1.38s1.08-1.34 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.71-1.46-1.38-2.13S20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
  --ic-tt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
  --ic-fb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}
/* Fixed on every page, one height, one variable. The spacer holds the space in
   the flow so no page needs its own top padding: that was the thing generating a
   different offset per template and a different bug per template with it. */
.nst-chrome{position:relative;z-index:200}
.nst-chrome *{box-sizing:border-box}
.nst-chrome a{text-decoration:none}

/* ---- top bar: the only route back to nolanscottteam.com ---- */
 .nst-chrome .nst-topbar{background:linear-gradient(rgba(232,185,49,0.09),rgba(232,185,49,0.09)),#0A0E18;border-bottom:1px solid rgba(232,185,49,0.22)}
 .nst-chrome .nst-tb-in{display:flex;align-items:center;gap:14px;padding:0 40px;height:38px}
 .nst-chrome .nst-tb-label{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--nst-gold);font-weight:600;white-space:nowrap}
 .nst-chrome .nst-tb-copy{font-family:Inter,system-ui,sans-serif;font-size:12.5px;color:var(--nst-muted);line-height:1.3}
 .nst-chrome .nst-tb-go{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;color:var(--nst-gold);white-space:nowrap}
 .nst-chrome .nst-tb-go:hover{text-decoration:underline}

/* ---- nav ---- */
 .nst-chrome .nst-nav{display:flex;align-items:center;gap:26px;padding:0 40px;min-height:64px;background:rgba(7,10,17,0.92);border-bottom:1px solid var(--nst-line);flex-wrap:wrap}
 .nst-chrome .nst-logo{display:flex;align-items:center;gap:11px;padding:10px 0}
 .nst-chrome .nst-mark{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.05em;color:var(--nst-muted);white-space:nowrap;transition:color .2s}
 .nst-chrome .nst-mark:hover{color:var(--nst-text)}
 .nst-chrome .nst-mark b{color:var(--nst-cyan);font-weight:700}
 .nst-chrome .nst-div{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--nst-cyan);font-weight:600;border:1px solid rgba(0,201,255,0.3);border-radius:2px;padding:3px 7px;line-height:1;white-space:nowrap}
 .nst-chrome .nst-links{display:flex;gap:24px;align-items:center;margin-left:auto;flex-wrap:wrap;padding:8px 0}
 .nst-chrome .nst-links a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--nst-muted);transition:color .2s;white-space:nowrap}
 .nst-chrome .nst-links a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-links a.nst-on{color:var(--nst-cyan)}
/* ---- Industry Playbooks dropdown ----
   The nav link went to a grid you then had to click again. This puts the six
   overviews one hover away and keeps the grid as the first item, so the link
   still does what it always did for anyone who clicks straight through.

   No gap between the trigger and the panel. A visual gap is fine, a hover gap is
   not: the pointer crosses dead space on the way down and the panel closes under
   it. The spacing here is padding inside the panel, not margin above it.

   :focus-within as well as :hover, so it opens on keyboard tab. */
 .nst-chrome .nst-item{position:relative;display:flex;align-items:center}
 .nst-chrome .nst-drop{display:none;position:absolute;top:100%;right:-14px;left:auto;
  width:340px;max-width:calc(100vw - 32px);padding:8px;
  background:#0b1018;border:1px solid var(--nst-line);border-radius:6px;
  box-shadow:0 18px 44px rgba(0,0,0,.55);z-index:300}
/* The panel opens at the item's bottom edge, but the item is only as tall as its
   text, so there was a strip of nav between the link and the panel with no hover
   on it. This pads the item out to the full nav height instead, which makes the
   trigger and the panel physically touch. */
 .nst-chrome .nst-item{padding:22px 0;margin:-22px 0}
 .nst-chrome .nst-item:hover .nst-drop, .nst-chrome .nst-item:focus-within .nst-drop{display:block}
/* These anchors sit inside .nst-links, which sets white-space:nowrap to stop the
   nav labels breaking. The panel inherited it, so every description ran in one
   line straight out of the box and off into the page. Reset it here rather than
   loosening the nav rule, which needs the nowrap. */
 .nst-chrome .nst-drop a{display:block;padding:9px 11px;border-radius:4px;text-transform:none;letter-spacing:0;font-size:12.5px;font-family:inherit;white-space:normal}
 .nst-chrome .nst-drop b, .nst-chrome .nst-drop em{white-space:normal;overflow-wrap:anywhere}
 .nst-chrome .nst-drop a:hover{background:rgba(255,255,255,.05)}
 .nst-chrome .nst-drop b{display:block;font-weight:600;color:var(--nst-text);font-size:12.5px;letter-spacing:0.01em}
 .nst-chrome .nst-drop em{display:block;font-style:normal;color:var(--nst-muted);font-size:11px;line-height:1.5;margin-top:3px}
 .nst-chrome .nst-drop a:hover b{color:var(--nst-cyan)}
 .nst-chrome .nst-drop .nst-sep{height:1px;background:var(--nst-line);margin:7px 4px}
 .nst-chrome .nst-cta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:#070A11;background:var(--nst-cyan);padding:10px 16px;border-radius:4px;font-weight:600;white-space:nowrap}

/* ---- footer ---- */
 .nst-chrome .nst-footer{background:var(--nst-bg);border-top:1px solid var(--nst-line);padding:56px 40px 26px;font-family:Inter,system-ui,sans-serif}
 .nst-chrome .nst-fwrap{max-width:1400px;margin:0 auto}
 .nst-chrome .nst-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
 .nst-chrome .nst-flogo{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;letter-spacing:0.05em;color:var(--nst-text)}
 .nst-chrome .nst-flogo b{color:var(--nst-cyan);font-weight:700}
 .nst-chrome .nst-fdiv{font-family:Syne,'JetBrains Mono',sans-serif;font-size:11px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--nst-cyan);margin-top:9px}
 .nst-chrome .nst-faddr{color:var(--nst-muted);font-size:12.5px;line-height:1.85;margin:16px 0 0}
 .nst-chrome .nst-faddr a{color:var(--nst-muted)}
 .nst-chrome .nst-faddr a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-fh{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:0.13em;text-transform:uppercase;color:var(--nst-dim);margin:0 0 14px;font-weight:600}
 .nst-chrome .nst-fnav{display:flex;flex-direction:column;gap:9px}
 .nst-chrome .nst-fnav a{color:var(--nst-muted);font-size:12.5px}
 .nst-chrome .nst-fnav a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-fnav a.nst-gold{color:var(--nst-gold)}
 .nst-chrome .nst-fgrid > div:not(:first-child) .nst-fh{text-align:center}
 .nst-chrome .nst-fgrid > div:not(:first-child) .nst-fnav{align-items:center}
 .nst-chrome .nst-social{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
 .nst-chrome .nst-soc{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--nst-line);border-radius:3px;transition:border-color .2s,background .2s}
 .nst-chrome .nst-soc::before{content:'';width:17px;height:17px;background:var(--nst-dim);transition:background .2s;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
 .nst-chrome .nst-soc:hover{border-color:var(--nst-cyan);background:rgba(0,201,255,0.06)}
 .nst-chrome .nst-soc:hover::before{background:var(--nst-cyan)}
 .nst-chrome .nst-li::before{-webkit-mask-image:var(--ic-li);mask-image:var(--ic-li)}
 .nst-chrome .nst-yt::before{-webkit-mask-image:var(--ic-yt);mask-image:var(--ic-yt)}
 .nst-chrome .nst-ig::before{-webkit-mask-image:var(--ic-ig);mask-image:var(--ic-ig)}
 .nst-chrome .nst-tt::before{-webkit-mask-image:var(--ic-tt);mask-image:var(--ic-tt)}
 .nst-chrome .nst-fb::before{-webkit-mask-image:var(--ic-fb);mask-image:var(--ic-fb)}
 .nst-chrome .nst-flogos{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--nst-line);opacity:0.5}
 .nst-chrome .nst-flogos img{height:26px;width:auto;filter:brightness(0) invert(1)}
 .nst-chrome .nst-flogos img.nst-badge{height:36px}
/* Each playbook page carries a disclaimer about which automations are actually
   possible on the client's software. That is real content and has to stay, but
   standing alone above the site footer it read as an orphaned paragraph with no
   heading. It belongs inside the footer, in fine print, where a disclaimer goes. */
 .nst-chrome .nst-fnote{margin-top:30px;padding-top:22px;border-top:1px solid var(--nst-line);color:var(--nst-dim);font-size:11.5px;line-height:1.75;max-width:900px}
 .nst-chrome .nst-fnote a{color:var(--nst-dim);text-decoration:underline;text-underline-offset:2px}
 .nst-chrome .nst-fnote a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-fnote .srcs{display:flex;flex-direction:column;gap:7px;margin-top:12px;columns:auto}
/* The page's own .foot-note and .srcs rules still apply in here, since page CSS
   is not scoped. Neutralise the parts that fight the footer rather than editing
   seven pages: sizing comes from .nst-fnote, and .srcs drops its two column
   layout, which broke into a narrow ragged pair inside the footer grid. */
 .nst-chrome .nst-fnote .foot-note{margin:0;font-size:inherit;color:inherit;line-height:inherit;max-width:none}
 .nst-chrome .nst-fnote .srcs a{display:block;color:var(--nst-dim);text-decoration:underline;text-underline-offset:2px;margin:0}
 .nst-chrome .nst-fnote .srcs a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:20px;border-top:1px solid var(--nst-line);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--nst-dim);letter-spacing:0.03em}
 .nst-chrome .nst-fbottom a{color:var(--nst-dim)}
 .nst-chrome .nst-fbottom a:hover{color:var(--nst-cyan)}
 .nst-chrome .nst-fb-links{display:flex;gap:18px}

/* ---- Hamburger and its panel ----
   Hidden above 900px. The panel is in normal flow rather than fixed, so opening
   it pushes the page down instead of covering it. That is what lets one
   stylesheet work on templates with different top offsets: there is no top
   value to get wrong. */
 .nst-chrome .nst-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:34px;height:34px;padding:5px;background:none;border:none;cursor:pointer;flex-shrink:0;margin-left:auto}
 .nst-chrome .nst-burger span{display:block;height:2px;width:100%;background:var(--nst-muted);border-radius:2px;transition:transform .22s,opacity .18s}
 .nst-chrome .nst-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .nst-chrome .nst-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
 .nst-chrome .nst-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .nst-chrome .nst-mobile{display:none;flex-direction:column;padding:6px 20px 18px;background:var(--nst-bg);border-bottom:1px solid var(--nst-line)}
 .nst-chrome .nst-mobile.nst-open{display:flex}
 .nst-chrome .nst-mobile a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--nst-muted);padding:15px 0;border-bottom:1px solid var(--nst-line)}
 .nst-chrome .nst-mobile a:last-child{border-bottom:none}
 .nst-chrome .nst-mobile a.nst-on{color:var(--nst-cyan)}
 .nst-chrome .nst-mobile a.nst-gold{color:var(--nst-gold)}
 .nst-chrome .nst-mobile .nst-sub{display:flex;flex-direction:column;border-bottom:1px solid var(--nst-line)}
 .nst-chrome .nst-mobile .nst-sub a{border-bottom:none;padding:11px 0 11px 18px;font-size:11px;color:var(--nst-muted);text-transform:none;letter-spacing:0.02em}
/* Even padding top and bottom. The first and last items were 2px and 15px, so
   the rule above the list sat almost against the first name while the last had a
   gap under it, and the block read as misaligned rather than as a list. */
 .nst-chrome .nst-mobile .nst-sub{padding:4px 0 6px}

/* ---- Phone ----
   The first version let the nav wrap freely, which put the wordmark on one line
   and the five links across two more, and hiding the CTA to save room took away
   the only booking link on the page.

   Two deliberate rows instead. Row one is the wordmark and the CTA. Row two is
   the links on a single line that scrolls sideways, because five uppercase mono
   labels will not fit any phone and scrolling loses nothing while wrapping loses
   the shape of the header. No JavaScript, so it works identically on all three
   page templates. */
@media(max-width:900px){
 .nst-chrome .nst-tb-in{padding:0 20px;gap:12px}
 .nst-chrome .nst-tb-copy{display:none}
 .nst-chrome .nst-nav{padding:0 20px;gap:10px;height:64px;flex-wrap:nowrap}
 .nst-chrome .nst-logo{flex:1 1 auto;min-width:0}
 .nst-chrome .nst-links, .nst-chrome .nst-cta{display:none}
 .nst-chrome .nst-burger{display:flex}
 .nst-chrome .nst-footer{padding:44px 20px 22px}
 .nst-chrome .nst-fgrid{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:440px){
 .nst-chrome .nst-div{display:none}
}
/* The panel can only ever be visible where the button that closes it is visible.
   chrome.js also closes it on resize, but that depends on an event firing and on
   the script having loaded. This does not: above the breakpoint the open state
   simply has no effect, so the menu cannot be stuck open on a desktop. */
@media(min-width:901px){
 .nst-chrome .nst-mobile, .nst-chrome .nst-mobile.nst-open{display:none}
}
@media(max-width:560px){
 .nst-chrome .nst-fgrid{grid-template-columns:1fr;gap:28px}
 .nst-chrome .nst-fgrid > div:not(:first-child) .nst-fh{text-align:left}
 .nst-chrome .nst-fgrid > div:not(:first-child) .nst-fnav{align-items:flex-start}
 .nst-chrome .nst-flogos{gap:22px;margin-top:34px}
 .nst-chrome .nst-fbottom{font-size:9.5px}
}

/* ============================================================
   SLATE VARIANT
   For the industry playbook pages, which are their own design system: gold
   #c6a45c on slate #0a0e14, a system serif for display, and system mono for
   labels. No webfonts at all, which is why these pages do not load the Google
   Fonts stylesheet the cyan pages do.

   Dropping the cyan chrome on top of that read as two sites bolted together, so
   the chrome takes their palette instead. Structure is identical; only the
   tokens and three details change, so there is still one stylesheet and one
   markup shape to maintain.

   Add class nst-slate alongside nst-chrome on the wrapper.
   ============================================================ */
.nst-chrome.nst-slate{
  --nst-bg:#0a0e14; --nst-line:rgba(198,164,92,0.16);
  --nst-cyan:#c6a45c;                 /* the accent slot, gold here */
  --nst-text:#e8ecf2; --nst-muted:#93a0b3; --nst-dim:#66748a;
  --nst-gold:#e0c078;                 /* the brighter gold, so the route out still separates */
  --nst-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nst-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --nst-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
.nst-slate .nst-tb-label,.nst-slate .nst-tb-go,.nst-slate .nst-mark,
.nst-slate .nst-div,.nst-slate .nst-links a,.nst-slate .nst-cta,
 .nst-slate .nst-flogo, .nst-slate .nst-fh, .nst-slate .nst-fbottom{font-family:var(--nst-mono)}
.nst-slate .nst-tb-copy,.nst-slate .nst-faddr,.nst-slate .nst-fnav a,
 .nst-slate .nst-footer{font-family:var(--nst-sans)}
 .nst-slate .nst-fdiv{font-family:var(--nst-serif);font-weight:400;letter-spacing:0.2em}

/* The bar cannot be gold-on-gold here or it stops reading as a separate strip,
   so it takes the page's own darker slate with a gold rule under it. */
 .nst-slate .nst-topbar{background:linear-gradient(rgba(198,164,92,0.06),rgba(198,164,92,0.06)),#0f141c;border-bottom:1px solid rgba(198,164,92,0.28)}
 .nst-slate .nst-nav{background:rgba(10,14,20,0.92);backdrop-filter:blur(18px)}

/* Their vocabulary is pills: the eyebrow is a bordered 100px capsule in mono at
   0.22em. The division tag and the CTA follow it rather than the cyan site's
   square corners. */
 .nst-slate .nst-div{border-radius:100px;padding:5px 11px;letter-spacing:0.2em;border-color:var(--nst-line);color:var(--nst-cyan)}
 .nst-slate .nst-cta{border-radius:100px;background:var(--nst-cyan);color:#0a0e14;letter-spacing:0.14em;padding:10px 18px}
 .nst-slate .nst-cta:hover{background:var(--nst-gold)}
 .nst-slate .nst-soc{border-radius:100px}