:root{
  --nav-bg:#1D3E36; --nav-panel:#264C42; --nav-card:#2E5A4E; --nav-line:#40766A;
  --nav-border-control:#5C9389; --nav-ink:#F3F9F7;
  --nav-gold:#E8A94A; --nav-gold-hover:#F2BC63; --nav-on-gold:#2B1A06;
  --nav-teal:#3FE0CB; --nav-bad:#EA8280;
}
/* The mount point chrome.js injects into. Without this the nav's
   position:sticky silently does nothing (2026-08-03): a sticky element is
   confined to its parent's box, and this wrapper is exactly as tall as the
   nav, so there is no distance for it to travel. display:contents removes
   the wrapper's box entirely, leaving .fs-nav sticky against the page. */
#site-header{display:contents}
.fs-nav{border-bottom:1px solid var(--nav-line);background:rgba(19,42,37,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:40}
.fs-nav .fs-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:1100px;margin:0 auto}
.fs-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.fs-brand img{width:56px;height:56px;object-fit:contain;display:block}
.fs-brand span{font-family:"Newsreader",serif;font-style:italic;font-weight:600;font-size:17px;letter-spacing:-.02em;color:var(--nav-ink)}
.fs-links{display:flex;align-items:center;gap:20px}
.fs-links a{color:rgba(243,234,213,.75);text-decoration:none;font-size:14px}
.fs-links a:hover{color:var(--nav-ink)}
.fs-meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;color:rgba(243,234,213,.5)}
.fs-cta{background:var(--nav-gold);color:var(--nav-on-gold);font-weight:700;padding:9px 16px;border-radius:8px;text-decoration:none;font-size:14px;white-space:nowrap}
.fs-cta:hover{background:var(--nav-gold-hover)}
.fs-cta-ghost{background:none;border:1px solid var(--nav-line);color:var(--nav-ink);font-weight:600}
.fs-cta-ghost:hover{background:none;border-color:var(--nav-teal);color:var(--nav-teal)}
.fs-cta-group{display:flex;align-items:center;gap:10px}
.fs-burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.fs-burger span{display:block;width:22px;height:2px;background:var(--nav-ink);margin:5px 0;border-radius:2px}
.fs-desktop-cta{display:inline-block}
.fs-cta-menu{display:none}
/* Higher specificity than the two rules above, so the button GROUP
   stays a flex row (Login beside Free Trial) instead of inheriting
   inline-block/block from the same show/hide classes every other
   single CTA already used. Same-specificity rules cascade by
   position, and these lost that race silently until tested. */
.fs-cta-group.fs-desktop-cta{display:flex}
.fs-cta-group.fs-cta-menu{display:none}
.fs-dash{display:none}
/* Students dropdown. Hover-opens on desktop, click-opens on touch (the JS
   below toggles .open), and on mobile it flattens into the burger panel as
   an indented list rather than a floating menu — a floating panel inside an
   already-floating panel is unusable at narrow width. */
.fs-dd{position:relative}
.fs-dd-btn{background:none;border:0;padding:6px 0;cursor:pointer;color:rgba(243,234,213,.75);
  font-size:14px;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.fs-dd-btn:hover{color:var(--nav-ink)}
.fs-dd-btn::after{content:"▾";font-size:10px;opacity:.7}
/* The menu sits 10px below the label, and that gap belonged to neither element:
   moving the mouse down from the label crossed dead ground, :hover dropped, and
   the menu closed before you reached it. This bridges the gap so the hover path
   is continuous — you can only leave by moving sideways or past the menu. */
.fs-dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.fs-dd-menu{display:none;position:absolute;top:calc(100% + 10px);left:-14px;min-width:250px;
  background:var(--nav-panel);border:1px solid var(--nav-line);border-radius:10px;padding:6px;z-index:60;
  box-shadow:0 12px 28px rgba(0,0,0,.4)}
.fs-dd:hover .fs-dd-menu,.fs-dd.open .fs-dd-menu{display:block}
.fs-dd-menu a{display:block;padding:9px 12px;border-radius:7px;font-size:13.5px;
  color:rgba(243,234,213,.8);white-space:nowrap}
.fs-dd-menu a:hover{background:var(--nav-card);color:var(--nav-ink)}
.fs-dd-menu .fs-dd-note{display:block;font-size:11px;color:rgba(243,234,213,.45);
  padding:8px 12px 4px;font-family:"IBM Plex Mono",monospace;letter-spacing:.06em}
/* Below this width, the nav genuinely doesn't fit as one row (5 links +
   logo + CTA button) — collapse to logo + hamburger + CTA in one row
   instead; links move into a dropdown panel. */
@media(max-width:760px){
  .fs-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:flex-start; gap:0; background:var(--nav-panel); border-bottom:1px solid var(--nav-line);
    padding:6px 20px 14px;}
  .fs-links.open{display:flex}
  .fs-links a{padding:10px 0; width:100%}
  .fs-meta{padding:10px 0}
  .fs-burger{display:block}
  .fs-desktop-cta{display:none}
  .fs-cta-menu{display:block}
  .fs-cta-group.fs-desktop-cta{display:none}
  .fs-cta-group.fs-cta-menu{display:flex}
  .fs-nav .fs-wrap{position:relative}
  .fs-brand span{display:none}
  /* Flattened: the menu is always shown, indented under its label, so a
     tester on a phone sees every testing link without a second tap into a
     floating panel that would overflow the screen. */
  .fs-dd{width:100%}
  .fs-dd-btn{padding:10px 0;width:100%;justify-content:flex-start}
  /* The bridge only exists to cover the gap under a floating menu. Flattened
     into the burger panel there is no gap, and an absolutely positioned
     pseudo-element would hang off a static parent. */
  .fs-dd-menu::before{display:none}
  .fs-dd-menu{display:block;position:static;border:0;background:none;box-shadow:none;
    padding:0 0 6px 14px;min-width:0}
  .fs-dd-menu a{padding:8px 0;white-space:normal}
  .fs-dd-menu a:hover{background:none}
  .fs-dd-menu .fs-dd-note{padding:6px 0 2px}
}
.fs-fb-overlay{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:80;
  display:flex; align-items:flex-end; justify-content:center; padding:0;}
@media(min-width:640px){.fs-fb-overlay{align-items:center; padding:20px;}}
.fs-fb-card{width:100%; max-width:480px; background:var(--nav-panel); color:var(--nav-ink); border:1px solid var(--nav-line);
  border-radius:16px 16px 0 0; padding:22px 20px; margin:0;}
@media(min-width:640px){.fs-fb-card{border-radius:14px;}}
.fs-fb-card h3{font-family:"Newsreader",serif; font-size:20px; margin:0 0 12px;}
.fs-fb-asnote{font-size:12.5px; color:rgba(243,234,213,.6); margin:-4px 0 12px;}
.fs-fb-idfields{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.fs-fb-idfields input{width:100%; background:var(--nav-card); color:var(--nav-ink); border:1px solid var(--nav-border-control);
  border-radius:8px; padding:10px; font-family:inherit; font-size:14.5px;}
.fs-fb-card textarea{width:100%; min-height:110px; background:var(--nav-card); color:var(--nav-ink);
  border:1px solid var(--nav-border-control); border-radius:8px; padding:10px; font-family:inherit; font-size:14.5px; resize:vertical;}
.fs-fb-shotbtns{display:flex; gap:8px; margin-top:10px;}
.fs-fb-shotbtn{flex:1; background:none; border:1px solid var(--nav-line); color:var(--nav-ink); border-radius:8px;
  padding:9px 10px; font-size:13.5px; cursor:pointer;}
.fs-fb-shotbtn:hover{border-color:var(--nav-teal);}
.fs-fb-preview{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.fs-fb-preview img{width:60px; height:60px; object-fit:cover; border-radius:6px; border:1px solid var(--nav-line);}
.fs-fb-actions{display:flex; gap:10px; margin-top:16px;}
.fs-fb-actions button{padding:10px 18px; border-radius:8px; font-size:14px; cursor:pointer; border:0;}
.fs-fb-send{background:var(--nav-gold); color:var(--nav-on-gold); font-weight:700;}
.fs-fb-cancel{background:none; border:1px solid var(--nav-line) !important; color:rgba(234,243,241,.75);}

  /* Feature-page link styles live here, not on the pages themselves. They were
     lost twice when those pages got regenerated, which is what put the blue
     browser-default links back both times. */
  .fp-back{margin:0 0 6px}
  .fp-back a{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;
    color:var(--nav-muted);text-decoration:none}
  .fp-back a:hover{color:var(--nav-teal)}
  .fp-try{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0 0}
  .fp-try a{display:inline-block;padding:12px 22px;border-radius:8px;text-decoration:none;
    font-size:15px;font-weight:700}
  .fp-try a.solid{background:var(--nav-gold);color:var(--nav-on-gold)}
  .fp-try a.solid:hover{background:var(--nav-gold-hover)}
  .fp-try a.ghost{border:1px solid var(--nav-line);color:var(--nav-ink);font-weight:600}
  .fp-try a.ghost:hover{border-color:var(--nav-teal);color:var(--nav-teal)}
  .hiw .fp-body{font-size:16px;line-height:1.68;color:var(--nav-ink);margin:0 0 16px;max-width:74ch}
  .hiw section{margin-bottom:44px}
  .hiw section h2{margin-bottom:14px}