/* THE BASE SIZE (2026-09-05, Marc: "Our base font size makes the site too
   hard to read"). Nothing set one; the browser's 16px stood, and ~250 rules
   sat at 12.5–15.5px on top of it. Body copy is in rem now (converted in
   the same pass, 13.5–18px → rem), so this one number moves all of it:
   18px on a desktop, 17px on a phone. Eyebrows, chips and the nav stay in px
   so they do not balloon. */
html{font-size:18px}
@media(max-width:700px){html{font-size:17px}}
: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,.97);position:sticky;top:0;z-index:70}
/* UNDER THE STATUS BAR NO MORE (2026-09-04, Marc, installed-app screenshot:
   "Placement of the menu burger makes it difficult to click"). The pages
   declare viewport-fit=cover, so in the installed app the bar started at the
   very top of the screen — under the clock and the battery — and the burger
   sat in the corner iOS reserves for its own gestures. The bar now begins
   below the notch/status bar. */
@supports (padding: max(0px)){ .fs-nav{padding-top:env(safe-area-inset-top)} }
/* AND NOTHING SHOWS THROUGH ABOVE IT (2026-09-05, Marc, installed-app
   screenshot: "The top of the menu bar is transparent. You can see the site
   above the nav bar"). Whatever gap iOS leaves between the screen top and
   the stuck bar — the status-bar strip the padding above was meant to fill —
   this paints it the bar's own colour. Absolutely positioned off the bar's
   top edge, so it only ever covers the strip above the bar, never content. */
.fs-nav::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:#132a25;pointer-events:none}
/* 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)}
/* The tagline under the wordmark (2026-09-05, Marc: "AI powered tutoring"). */
.fs-brand-text{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.fs-brand .fs-tag{display:block;font-family:'IBM Plex Mono',monospace;font-style:normal;font-weight:500;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(243,234,213,.85);margin:-6px 0 0 0;white-space:nowrap;
  /* The A sits under the S (2026-09-05, Marc: "shift it to the right so the a
     lines up with the S"). The S glyph starts 36% into the wordmark
     (translate 1297 of 3607); the wordmark is 60px tall, 3607:1448 wide. */
  padding-left:calc(60px * 3607 / 1448 * .36)}
.fs-links{display:flex;align-items:center;gap:20px}
/* A LINK NEVER WRAPS (2026-09-05, Marc's QA: at 1136px "What it does" broke
   onto three lines and the CTA ran off the right edge). nowrap here, and a
   tighter row between the burger breakpoint and 1280 — see below. */
.fs-links a{color:rgba(243,234,213,.75);text-decoration:none;font-size:14px;white-space:nowrap}
@media(max-width:1280px) and (min-width:1081px){
  .fs-links{gap:12px}
  .fs-links a{font-size:13px}
  .fs-brand .fs-mark{width:60px;height:60px}
  .fs-brand .fs-word{height:46px}
  .fs-brand .fs-tag{padding-left:calc(46px * 3607 / 1448 * .36)}
}
.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}
/* The Marketing fold is a phone-panel control only — see header.html. */
.fs-mkt-btn{display:none}
.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. */
/* 1080, not 1024 (2026-09-05): with every link on one line the full row
   needs about 1060px; between 1025 and 1080 the CTA ran off the right edge. */
@media(max-width:1080px){
  /* 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}
  /* A REAL BUTTON, NOT THREE LINES IN THE CORNER (2026-09-04, same ask).
     22px lines with 6px padding was a 34px target hard against the edge;
     48px square, boxed so it reads as a control, and away from the corner. */
  .fs-burger{display:flex; flex-direction:column; justify-content:center; align-items:center;
    min-width:48px; min-height:48px; padding:0; margin-right:-4px;
    border:1px solid var(--nav-line); border-radius:10px}
  .fs-burger span{width:24px; margin:3px 0}
  .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}
  .fs-brand .fs-tag{display:block;font-size:9.5px;margin-top:-4px}
  /* 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}

  /* THE SIGNED-IN PANEL (2026-09-04, Marc: "kinda ugly on mobile ... lump
     every marketing page under marketing and it has to be clicked to open").
     header.js stamps .authed on #fsLinks when a session exists. Then:
     - the marketing links fold behind one "Marketing" row, closed until
       tapped, and sit LAST — a student's panel opens on Dashboard, not on
       Parents / Teachers / Organizations;
     - the duplicates go: the top-row Feedback (Account has one) and the
       Log out button pair (Account has Log out);
     - rows tighten from 10px to 8px so the panel fits a phone. */
  .fs-links.authed .fs-mkt-btn{display:block; order:10; width:100%; padding:10px 0; margin:0;
    background:none; border:0; text-align:left; cursor:pointer;
    font:inherit; font-family:var(--mono, monospace); font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(243,234,213,.5)}
  .fs-links.authed .fs-mkt-btn::after{content:"\25BE"; font-size:10px; margin-left:8px; opacity:.6}
  .fs-links.authed.mkt-open .fs-mkt-btn::after{content:"\25B4"}
  .fs-links.authed .fs-mkt-item{display:none; order:11}
  .fs-links.authed.mkt-open .fs-mkt-item{display:block}
  .fs-links.authed.mkt-open .fs-mkt-item a, .fs-links.authed.mkt-open a.fs-mkt-item{padding-left:14px}
  .fs-links.authed #navFeedbackLink{display:none}
  .fs-links.authed .fs-cta-group.fs-cta-menu{display:none}
  .fs-links.authed .fs-logout-row{display:flex !important; order:20; width:100%; margin-top:6px}
  .fs-links.authed a{padding:8px 0}
  .fs-links.authed .fs-dd-menu a{padding:7px 0}
  .fs-links.authed .fs-dd-btn{padding:8px 0}

  /* ROWS THAT LOOK TAPPABLE (2026-09-04, Marc: "Those main menu items aren't
     obviously clickable"). Every link in the panel is a full-width row with
     a hairline under it, ink rather than faint text, and a chevron on the
     right; the two group labels (Account, Marketing) read as headings, not
     rows. A press darkens the row. */
  .fs-links a:not(.fs-cta), .fs-links .fs-dd-menu a{display:flex; align-items:center; justify-content:space-between;
    color:var(--nav-ink); font-size:15.5px; border-bottom:1px solid var(--nav-line); padding:12px 2px; margin:0}
  .fs-links a:not(.fs-cta)::after, .fs-links .fs-dd-menu a::after{content:"\203A"; font-size:20px; line-height:1; opacity:.45; margin-left:12px}
  .fs-links a:not(.fs-cta):active, .fs-links .fs-dd-menu a:active{background:var(--nav-card)}
  .fs-links .fs-dd-menu{padding:0}
  .fs-links .fs-dd-menu a{padding-left:14px}
  /* Account is a heading: its items are the rows. What it does is a ROW — its
     submenu is hidden on a phone, so the label itself is the link. */
  .fs-links #fsAccountBtn{display:block; padding:14px 2px 6px; border:0; font-family:var(--mono, monospace);
    font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(243,234,213,.5)}
  .fs-links #fsAccountBtn::after{display:none}
  /* ACCOUNT IS AN ACCORDION TOO (2026-09-04, Marc: "My account can be an
     accordion as well"). Signed in, on a phone, the Account label toggles its
     items the way Marketing does — closed until tapped — so the panel opens
     on four rows. header.js intercepts the tap; the label's href is what
     desktop and a visitor still get. */
  .fs-links.authed #fsAccountBtn{cursor:pointer; padding:14px 2px 10px; border-bottom:1px solid var(--nav-line)}
  .fs-links.authed #fsAccountBtn::after{display:inline; content:"\25BE"; font-size:10px; margin-left:8px; opacity:.6}
  .fs-links.authed .fs-acct.open #fsAccountBtn::after{content:"\25B4"}
  .fs-links.authed .fs-acct .fs-dd-menu{display:none}
  .fs-links.authed .fs-acct.open .fs-dd-menu{display:block}
  .fs-links.authed .fs-mkt-btn{padding:14px 2px 10px; border-bottom:1px solid var(--nav-line)}
  .fs-links .fs-mkt-btn{font-family:var(--mono, monospace); font-size:11.5px; letter-spacing:.14em;
    text-transform:uppercase; color:rgba(243,234,213,.5); padding:14px 2px 6px; border-top:0}
  /* What it does keeps its chevron on a phone — it is a row here, not a
     dropdown, and the ::after that the dropdown arrow used is off. */
  #fsStudentsBtn::after{display:inline; content:"\203A"; font-size:20px; line-height:1; opacity:.45; margin-left:12px}
  /* The Log in / Free Account pair takes the full row. */
  .fs-cta-group.fs-cta-menu{width:100%; gap:10px}
  .fs-cta-group.fs-cta-menu a{text-align:center}
  .fs-links.authed a, .fs-links.authed .fs-dd-menu a{padding:12px 2px}
  .fs-links.authed #fsAccountBtn{padding:14px 2px 6px}
  .fs-links .fs-help{border-bottom:1px solid var(--nav-line); padding:12px 2px; font-size:15.5px}
}
.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:12.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}