: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}
/* z-index 70, was 40. The nav is sticky AND has a z-index, so it makes its
   own stacking context — the dropdown's z-index:60 is measured INSIDE that
   context and cannot lift the menu above anything outside it. The app's
   course strip (.subtabs) sits at 55, so it beat the entire nav and drew
   over the open Account menu. Raising the menu would not have fixed it;
   the nav itself has to outrank the page. */
.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:70}
/* 1200, matching the page containers (2026-08-04). The feature pages needed
   more room for the three-across graphics; the nav has to move with them or
   the card sits wider than the bar above it. */
.fs-nav .fs-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:1400px;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-border-control);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}

/* The help "?" — a round target rather than a text link, so it reads as a
   button at a glance and gives a finger something to hit on a phone. */
/* Was a 28px circle containing "?" (2026-08-04, Marc) — a lone question mark
   says nothing about what it does, least of all in a mobile menu where it sat
   between worded items. Now a labelled pill that fits the text. */
.fs-help{display:inline-grid; place-items:center; height:28px; padding:0 12px;
  border-radius:99px; border:1px solid var(--nav-line); font-weight:600;
  font-size:14px; line-height:1; white-space:nowrap;}
.fs-help:hover{border-color:var(--nav-teal); color:var(--nav-teal)}

/* Account sits at the far right of the links row. */
.fs-acct{margin-left:auto}
/* A menu on the last item must open RIGHTWARD, or it runs off the edge of
   the screen — the default left:-14px anchors it to the button's left. */
.fs-dd-right{left:auto;right:-14px}
.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. Was 760px,
   sized when this was 5 links + logo + CTA button; the nav has grown since
   (What it does, Parents, Pricing, Feedback, Dashboard, How do I?, Account,
   Log out, Free Trial) without this number moving with it, so an iPad in
   portrait — 768-834px, comfortably above 760 — got the full desktop row
   and it didn't fit: the CTA ran off the right edge and the page scrolled
   horizontally (2026-08-20, Marc, with screenshots). 1024px clears every
   common tablet PORTRAIT width (iPad 768-834, iPad Pro 12.9" at exactly
   1024) while still giving a real laptop/desktop width the full row —
   tablet landscape and up is at least 1024px on every current device.
   Collapse to logo + hamburger + CTA in one row instead; links move into
   a dropdown panel. */
@media(max-width:1024px){
  /* SCROLLABLE, AND CAPPED TO THE SCREEN (2026-08-04). This panel had no
     height limit and no scrolling, and it has grown a lot — eight What I do
     items, four Account items, plus the Log out / Free Trial pair. On a phone
     the bottom ran past the viewport, under the browser toolbar: the buttons
     rendered but the tap never reached them, so even a plain <a href> did
     nothing. dvh, not vh, because vh ignores the browser chrome that was
     covering them in the first place. */
  .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;
    max-height:calc(100dvh - 100%); overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;}
  .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; padding-bottom:6px}
  .fs-nav .fs-wrap{position:relative}
  .fs-brand span{display:none}
  /* In the burger panel the links are a stacked column, so "far right" is
     meaningless — margin-left:auto would push Account off the left edge of
     its own column. It sits in normal order here, like everything else. */
  .fs-acct{margin-left:0; width:100%}
  .fs-dd-right{left:auto; right:auto}
  /* 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}