: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:8px 20px;max-width:1400px;margin:0 auto}
.fs-brand{display:flex;align-items:center;gap:4px;text-decoration:none}
/* SIZED PER IMAGE, NOT PER TAG (2026-09-02). The old rule was
   `.fs-brand img{width:56px;height:56px}` — one square for the one square
   image the brand used to be. The lockup is three images with three
   different aspect ratios, and a blanket 56x56 would squash the wordmark
   (2.49:1) and stretch the kanji column (1:2). Each gets its own height
   and an auto width, so nothing is ever distorted by the rule that sizes
   it. Heights, not widths, because they are what has to agree optically. */
.fs-brand img{display:block;object-fit:contain}
/* DOUBLED (2026-09-02, Marc: "logo has to be double the size"). 38/30 was
   sized to leave the nav's own height alone; at 76/60 the lockup is taller
   than the bar was, so .fs-wrap's vertical padding comes down to 8px and
   the nav grows by about 20px rather than by 40. The burger and the CTA
   pair are centred on the same axis, so nothing else moves. */
.fs-brand .fs-mark{width:76px;height:76px}
.fs-brand .fs-word{height:60px;width:auto}
.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)}
/* 9px 16px was sized for "Free Trial" and even that sat tight against the
   edges (2026-08-27, Marc: "make the buttons wider so they actually fit the
   text" — with a screenshot of the text touching both sides). Wider pads,
   and a centre so the pair reads as two even buttons. */
.fs-cta{background:var(--nav-gold);color:var(--nav-on-gold);font-weight:700;padding:10px 24px;border-radius:8px;text-decoration:none;font-size:14px;white-space:nowrap;text-align:center}
.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}
/* SIGNED-IN-ONLY ITEMS, AND IT HAS TO OUTRANK WHATEVER THEY ALSO ARE
   (2026-09-01). This was one class at single specificity, and .fs-help forty
   lines BELOW it set display:inline-grid at the same specificity — so the
   later rule won the cascade and "How do I?" was visible to every signed-out
   visitor on every marketing page. The mobile block did it a second time
   (.fs-help{display:block}). !important because this rule's whole job is to
   beat any display a hidden item happens to carry for its own appearance;
   the alternative is remembering to re-check ordering every time somebody
   styles an item that is also fs-dash, which is exactly what failed. */
.fs-dash{display:none !important}
/* 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}
  /* In the burger panel the pair shares the row evenly — full-width tap
     targets instead of two small islands (2026-08-27, same ask). The
     .fs-links a{width:100%} rule above must not stack them. */
  .fs-cta-group.fs-cta-menu a{flex:1 1 0; width:auto}
  .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}
  /* WHAT IT DOES IS ONE LINK ON A PHONE (2026-08-27, Marc: "on mobile, we
     should just have what it does without the dropdowns"). Flattened, its
     ten feature pages made the burger panel mostly be that one submenu —
     scrolling past it to reach Pricing or Dashboard. The label already
     links to /what-i-do.html, which lists every feature anyway, so the
     children add nothing a tap doesn't reach. Account keeps its flattened
     items: they have no landing page to fall back to. */
  #fsStudentsMenu{display:none}
  #fsStudentsBtn::after{display:none}
  /* THE HELP LINK DRESSES LIKE ITS NEIGHBOURS (2026-08-27, Marc: "how do I
     button should just be a text link in the menu"). The pill is a desktop
     shape; stretched full-width in a column of plain links it read as the
     one thing on the menu shouting. Same padding and weight as the rest. */
  .fs-help{display:block; height:auto; padding:10px 0; border:0; border-radius:0;
    font-weight:400; font-size:14px; text-align:left}
  .fs-help:hover{border-color:transparent}
}
.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}