/* ==========================================================================
   newsletter.css — the subscription page. Loaded by newsletter.html and by
   nothing else; deleting that page, this sheet and js/newsletter.js removes
   the feature completely.

   WHAT THIS SHEET IS ALLOWED TO OWN. Almost nothing. The page is built out of
   components that already exist and are already reasoned about somewhere else:

     .brief-err / .brief-sent                          brief-form.css
     .btn / .btn-ghost / .btn-fill                      base.css
     .ins-mast / .ins-nav                               insights.css

   What is left, and the only thing declared below, is the shape of a form that
   reads as two steps rather than as a page of fields: the numbered step, the
   category grid, and the block that takes the address.

   WHAT THIS SHEET USED TO BE (client direction, 2026-08-31). Roughly twice
   this length, because the page asked three questions instead of one. Deleted
   with them: the market chip grid (02), the cadence pair and its drawn
   frequency rail (04), the whole preview panel — the specimen mail, the note
   grid, the empty-state recovery buttons, the overflow line (05) — and the
   pinned action bar with its summary tokens, its bar-height fitting and its
   hide-at-footer transform (06). Anything below that looks like a survivor of
   that page is one, and is noted where it sits.

   THE DISCIPLINE HUES ARE USED, AND THEY EARN IT. base.css's own rule for the
   --d-* set is that a second use has to make the mapping honestly rather than
   borrow the palette. Each cell in the grid IS one discipline — the same six,
   by the same names, from DISCIPLINES in data.js — so a reader who has seen
   the constellation on index reads this grid with no new vocabulary. The hue
   is a scrubbed wash on select, not a fill at rest: six saturated panels
   stacked in a grid would be the loudest thing on a page whose job is a form.
   ========================================================================== */


/* ==========================================================================
   01. The steps
   Two questions, each a <section> with its own heading, numbered. The numeral
   is the same device tools.css uses on .tl-step and for the same reason: it
   says how much is left, which is the single most useful thing a multi-part
   form can tell someone before they abandon it. Two steps is the floor at
   which numbering still earns its place — one would be a numeral counting
   itself.
   ========================================================================== */
.nl-step{padding:var(--sec-sm) 0}
/* The masthead already carries the page's top space, so the first step opens
   tighter than the rhythm below it. */
.nl-step:first-of-type{padding-top:var(--s10)}

.nl-step-h{display:flex;align-items:baseline;gap:var(--s4);margin:0}
.nl-num{
  flex:none;
  color:var(--purple-deep);font-size:15px;line-height:23px;font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.nl-hint{
  margin:var(--s3) 0 0;
  color:var(--gray);font-size:15px;line-height:23px;max-width:62ch;
}

/* A heading and the line that answers it, on one baseline. The old preview
   panel introduced this row for its live match count; it survives here because
   the selected count is the same kind of thing — a number that changes without
   the focus moving, sitting where the reader is already looking. */
.nl-step-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s3)}
/* Tabular figures so the count does not shuffle its neighbours every time a
   card is clicked. It is announced; see aria-live in the markup.

   IT SITS BESIDE THE HEADING, NOT AT THE FAR EDGE, and the auto margin is what
   does it. .nl-step-top is space-between, which is right for the terms block
   below - a 450px caption at the opposite end reads as a note on the whole
   section - and wrong here: this is a 210px fragment, and space-between left it
   826px from the words it belongs to on a 1440 screen. A live number that far
   from its own heading reads as an unrelated thing at the edge of the page.

   AN AUTO MARGIN RATHER THAN A SECOND CLASS. In a flex row, auto margins absorb
   the free space before justify-content is applied, so this one pulls the count
   back against the heading while .nl-step-top keeps one definition and the
   terms block keeps the behaviour that suits it. The rule lives on the element
   that differs, which is the count. */
.nl-count{
  margin:0 auto 0 var(--s2);
  color:var(--purple-deep);font-size:15px;line-height:23px;font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* A real <fieldset> and a real <legend>, stripped. The grouping is what tells a
   screen reader that six checkboxes are one question; the border and the
   inline-shrink-to-fit legend are the two pieces of UA chrome that have to go
   before it can be laid out. */
.nl-fs{border:0;padding:0;margin:0;min-width:0}
.nl-fs legend{padding:0;width:100%}

/* An anchor landing under a heading rather than flush against the viewport
   edge. There is no fixed bar to clear any more — the offset is now only the
   ordinary breathing room a jumped-to heading wants. */
.nl-step{scroll-margin-top:var(--s8)}


/* ==========================================================================
   02. The categories
   Nine cells: the six disciplines in the order the constellation draws them,
   then the three cross-cutting editions. See newsletter.html for why the last
   three are not disciplines, and base.css for why they carry --e-* hues of
   their own rather than three more --d-*.

   THE WHOLE CELL IS THE LABEL. It was a <div> wrapping a label until the "see
   what is filed here" link was removed on 2026-08-31: an anchor cannot sit
   inside a <label>, so the cell had to hold the ground while the label held
   only the text above the link, and the selected wash had to be reached with
   :has() because a sibling selector could not climb back out to the wrapper.
   The link is gone and so is all of that. One element, one sibling selector, no
   :has() dependency, and the whole card is one hit target again.

   THE TYPE PAIR IS THE SAME ONE THE TERMS BLOCK USES, and that is a correction
   rather than a coincidence. These cards were 16/600 over 14/400 while the
   terms pills below them were 17/600 over 15/400 - so the page's PRIMARY
   CONTROL was set smaller than its own fine print. Two card type pairs on one
   page is drift whichever way round it is; matched, and with the icon, the
   colour and the position doing the rest, the categories read as the more
   important of the two without needing a bigger number.
   ========================================================================== */
/* THREE ACROSS, WHICH IS NOW THREE ROWS OF THREE. It was six in two rows until
   the watchlist, the tools and the network were added on 2026-08-31; the track
   count did not have to change, which is the useful property of picking a
   column count rather than dividing by the number of things. */
.nl-cats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* --s4, not --s3. The cells carry a 24px radius, and a 12px gutter is half a
     radius: the curves of two neighbours nearly meet and the row reads as one
     ribbed surface rather than as six cards. */
  gap:var(--s4);margin-top:var(--s6);
}
@media (max-width:1000px){.nl-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.nl-cat{position:relative;display:block}
/* Painted out rather than hidden: display:none would take it out of the tab
   order and off the accessibility tree. It stays a real checkbox, covering its
   own label, and every state below is driven from it. */
/* z-index, and it is load-bearing rather than tidy. The body below is
   position:relative now (it has to be, for the tick), which makes it a
   positioned element painting OVER this input - and an input the pointer cannot
   reach is an input that never matches :hover, so every `input:hover + body`
   rule on this card silently stops firing. One line keeps the transparent
   checkbox on top, where the whole-card hit target has always depended on it. */
.nl-cat input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}

.nl-cat-body{
  /* position, because the tick sits on this box rather than in the markup. See
     the state block below for why it is drawn rather than written. */
  position:relative;display:block;height:100%;
  /* Even on all four sides, which it was not: 20px top and 12px bottom was the
     asymmetry the removed link needed, and with the link gone it read as a card
     whose contents had slipped upwards. --s7 rather than --s6 because these are
     440px wide at full size and 24px of padding on that measure is tight. */
  /* --s7 all round on three sides, and --s12 on the right: the tick sits in
     that corner and the name must not run under it. 28 + 22 + 8 of air = 58,
     which rounds to --s12 + --s3 and is why the right inset is the odd one. */
  padding:var(--s7);padding-right:calc(var(--s12) + var(--s3));
  border-radius:var(--r-lg);
  background:var(--haze);
  /* The ring is a box-shadow rather than a border, and that is the whole reason
     the selected state can be two pixels thick without the card moving: a
     border would add 4px to the box and shove every neighbour in the row. It is
     declared transparent at rest so there is one property to animate. */
  box-shadow:inset 0 0 0 2px transparent;
  transition:background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}
.nl-cat input:hover + .nl-cat-body{background:var(--mist)}

/* ONE SELECTED COLOUR, NOT NINE (client direction, 2026-09-02). Until now a
   ticked card washed itself in its own category hue - .18 of --d-brand, of
   --d-media, of --e-network - on the argument that the reader would recognise
   the colour from insights.html. What it actually produced is the thing the
   client reported: nine cards that each mean "chosen" and none of which look
   like each other, so "selected" reads as nine unrelated states rather than one
   repeated one. Selection is a STATE, and a state gets one colour; identity is
   what the per-category hue is for, and it keeps its job on the resting mark
   below. --pale is the site's existing tinted surface, so this is a token the
   page already owned rather than a tenth wash mixed for this rule.

   AND THE COLOUR IS NOT THE SIGNAL ON ITS OWN. A .18 wash was the entire
   indication that a card was ticked - no edge, no mark, nothing at the size a
   glance works at - which is why a picked card did not look picked. Three
   things now change together and each is legible without the other two: the
   surface, a 2px ring, and the tick in the corner. That is also what makes the
   state survive a reader who cannot separate the wash from the grey. */
.nl-cat input:checked + .nl-cat-body{
  background:var(--pale);
  box-shadow:inset 0 0 0 2px var(--purple);
}
.nl-cat input:focus-visible + .nl-cat-body{outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-off)}

/* ==========================================================================
   THE TICK, and it is drawn in CSS rather than written in the markup for a
   reason that is not laziness: it is not content. The checkbox already carries
   the state to a screen reader, and nine more <span>s in the HTML would be nine
   more things to keep in sync every time a category is added. Two
   pseudo-elements on the body: ::before is the ring, ::after is the mark.

   IT IS VISIBLE AT REST, empty. An indicator that only appears once you have
   ticked something tells you what you did; one that is there beforehand tells
   you the cards are tickable AND that you may tick more than one, which is the
   question this grid actually raises - nine cards with no controls on them read
   as a set you pick ONE of. The empty circle is the affordance; the filled one
   is the receipt.

   THE RESTING RING IS PLUM AT .55, not --line. --line is #E2E2E2 and lands at
   1.1:1 on --haze - an outline nobody can see is not an affordance. At .55 it
   sits near 3:1, which is the non-text floor, and stays quieter than the type.

   18, AND IT WAS 22 FOR A DAY. Two measurements sized this, both of them
   ratios rather than a preference. The name beside it has a CAP HEIGHT OF 13px
   (17px Libre Franklin at 600), and 22 against 13 is 1.7x - a control larger
   than the thing it belongs to. And the category mark on the other side of the
   same row is 24: at 22 the indicator was 92% OF THE ICON, so the card carried
   two marks of one size and the control competed with the identity. 18 is 1.38x
   the cap and 0.75x the icon, which puts it under both - a control the reader
   finds when they look for it rather than one that arrives first.

   1.5 RATHER THAN THE ICON'S 1.75, and that is a deliberate exception rather
   than drift. 1.75 is the stroke spec for a 24 GRID; held at 18 it is
   proportionally 30% heavier, and the circle went back to shouting at a smaller
   size. This is also not an icon - it is a control edge, the same register as
   the 1px and 2px edges base.css draws on fields and chips - so it takes a
   control's width. THE RULE FOR WHOEVER ADDS THE NEXT ONE: content icons stay
   24/1.75; control indicators are 18/1.5. Nothing else on this site is either
   yet, which is why both are written down here.
   ========================================================================== */
.nl-cat-body::before,
.nl-cat-body::after{content:"";position:absolute;pointer-events:none}
/* The +3/+2 nudge keeps the smaller circle optically on the icon's line and
   square to the card edge: the box shrank by 4 but the padding it hangs off
   did not, so half the difference goes back on the top and right. */
.nl-cat-body::before{
  top:calc(var(--s7) + 3px);right:calc(var(--s7) + 2px);width:18px;height:18px;
  border-radius:var(--r-pill);
  border:1.5px solid rgb(var(--plum-rgb) / .55);
  background:transparent;
  transition:background-color 200ms ease-in-out, border-color 200ms ease-in-out;
}
.nl-cat input:hover + .nl-cat-body::before{border-color:var(--purple)}
.nl-cat input:checked + .nl-cat-body::before{background:var(--purple);border-color:var(--purple)}
/* The mark itself: two edges of a box, rotated. 1.5 to match the ring it sits
   in rather than the icon opposite it - see the size note above. */
.nl-cat-body::after{
  top:calc(var(--s7) + 8px);right:calc(var(--s7) + 7px);
  width:8px;height:4px;
  border-left:1.5px solid var(--white);
  border-bottom:1.5px solid var(--white);
  border-radius:1px;
  transform:rotate(-45deg) scale(.6);transform-origin:center;
  opacity:0;
  transition:opacity 140ms ease-in-out, transform 200ms var(--ease);
}
.nl-cat input:checked + .nl-cat-body::after{opacity:1;transform:rotate(-45deg) scale(1)}

/* THE MARK. See the head comment in newsletter.html for why this site now has
   content icons at all and what the set is allowed to be; what is here is only
   how it is drawn.

   NOT A NEW STROKE SPEC. 1.75 with round caps and joins on no fill is what
   base.css already declares three times over for every other icon on the site,
   and a 1.75 stroke on a 24 grid rendered at 24px is the same optical weight as
   the 1.75 on a 16 grid rendered at 16px in the header and the filter bar. The
   grid is bigger because a card has room a caret does not; the line is not.

   IT CARRIES THE DISCIPLINE'S OWN HUE AT REST, which is the one thing on the
   cell that does. Until now the --d-* colour appeared only once a card was
   ticked, so six categories sat in identical grey until the reader committed to
   one. A 24px mark is not a panel - the warning in this sheet's head comment is
   about six saturated FILLS - and at 1.75px on --haze it gives the grid a key
   without becoming the loudest thing on a page whose job is a form. */
.nl-cat-i{
  /* --s4 below it, not --s3. At 12px the mark sat on the name; the icon is a
     separate register from the type and needs to read as one. */
  display:block;width:24px;height:24px;margin-bottom:var(--s4);
  fill:none;stroke:currentColor;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;
  color:rgb(var(--hue,144 79 255));
  transition:color 200ms ease-in-out;
}
/* Selected, the mark drops its category hue and joins the state. The card is
   --pale under a --purple ring, and a ninth different mark colour inside that
   would be the same nine-states-for-one-idea problem the wash had. --plum with
   the name is the pairing the rest of the page uses for a chosen thing, and it
   is the darker end of the same purple family the ring is drawn from. */
.nl-cat input:checked + .nl-cat-body .nl-cat-i{color:var(--plum)}

.nl-cat-n{
  display:block;
  color:var(--slate);font-size:17px;line-height:25px;font-weight:600;letter-spacing:-.01em;
}
.nl-cat-d{
  /* --s2 held the description against the name at two sizes that were only 2px
     apart. At the corrected pair the gap can do its half of the separating. */
  display:block;margin-top:var(--s3);
  color:var(--gray);font-size:15px;line-height:23px;
}
.nl-cat input:checked + .nl-cat-body .nl-cat-n{color:var(--plum)}


/* ==========================================================================
   03. The address
   ONE FIELD, IN THE PAGE, and the reasoning for that is in newsletter.html:
   this used to be a pinned bar closing a 2,389px gap between the first tick
   and the button, and deleting two of the three questions deleted the gap.

   A FILLED PANEL, NOT A BARE ROW. It is the second of two steps and it has to
   read as a step, not as a footer that happened to land there. --haze is the
   same surface the category cells and the terms pills use, so the page is made
   of one material throughout.
   ========================================================================== */
.nl-sub .wrap{padding-bottom:var(--s4)}

.nl-sub-box{
  /* Even --s8 on all four sides. It was 28 top and bottom against 32 left and
     right, which is a difference too small to read as intentional and just
     enough to make the box look settled a little low in its own frame. */
  margin-top:var(--s5);padding:var(--s8);
  border-radius:var(--r-lg);background:var(--haze);
  max-width:44rem;
}

/* OUT OF THE BOX AND INTO THE HEADING'S SUB-LINE SLOT, which is step 01's
   .nl-hint position. It takes .nl-hint's exact type - 15/23 --gray, --s3 under
   the heading - because the slot has to mean one thing on both steps: a line
   saying what this step is about, before the control that does it. Two
   different sizes in the same position on two consecutive steps would be the
   page describing its own structure inconsistently.

   THE EMPHASIS MOVED TO THE <b>, WHICH IS WHERE IT BELONGS. It was carrying
   17/26 --slate to lead the panel it used to sit inside; the part that actually
   needs to be read at a glance is the list of categories, not "You get". */
.nl-sum{
  margin:var(--s3) 0 0;
  color:var(--gray);font-size:15px;line-height:23px;max-width:62ch;
}
.nl-sum b{font-weight:600;color:var(--plum)}

.nl-sub-row{display:block}
/* ABOVE THE FIELD, which is the arrangement the pinned bar could not have: a
   single row has no above. brief-form.css sets its labels the same way, in the
   same case and weight, so the two forms on this site read as one system. */
.nl-sub-row label{
  display:block;margin-bottom:var(--s2);
  font-size:12px;line-height:16px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ash);
}
.nl-sub-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}

/* --r-pill, NOT the --r-sm every other input on this site uses, and the
   difference is a rule rather than an exception: radius follows the row a
   control sits in. brief-form's fields are stacked in a column with the pill
   button BELOW them, so 4px against 24px never meet. This is the only place on
   the site where a field and a pill share a row at the same height, and a 4px
   field butted against a 24px button reads as two components from two systems.

   THE HEIGHT IS MEASURED, NOT ASSUMED. .btn is 12px padding on line-height
   normal and lands at 43px. box-sizing is border-box site-wide, so fixing the
   field at the same number also holds the row still when the invalid state
   thickens the border to 2px. */
.nl-sub-act input{
  flex:1 1 18rem;min-width:0;height:43px;
  padding:0 var(--s5);
  border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--white);
  color:var(--slate);font-family:var(--font);font-size:16px;line-height:24px;
  /* 16px is the floor that stops iOS Safari zooming the viewport on focus — the
     same reason brief-form.css gives for the same value. */
}
.nl-sub-act input::placeholder{color:var(--ash)}
.nl-sub-act input:focus-visible{
  outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-in);border-color:var(--focus-c);
}
/* Never colour alone: the invalid state carries a border, and the message in
   .nl-sub-err names what is wrong in words. */
.nl-sub-act input[aria-invalid="true"]{border-color:var(--red);border-width:2px}
.nl-sub-act .btn{flex:none;white-space:nowrap}

/* UNDER the row rather than replacing part of it, so the field it refers to
   does not move while it is being read. */
.nl-sub-err{margin:var(--s4) 0 0}

/* RED (client direction, 2026-08-31), on the --red-bg / --red-ink / --red set
   now declared in base.css. It was --pale purple, on the argument that picking
   nothing is a legal subscription and red would be accusing somebody of a
   mistake they had not made. Overruled, and the reason given was the better
   one: a panel that stops a submission has to read as a stop, and the purple
   did not.

   SO THE TWO STATES ARE SEPARATED BY SHAPE INSTEAD OF BY HUE. .brief-err four
   lines above is the same red and means something different - what you typed
   cannot be used - and the pair appear one after the other, not together, since
   the email is validated first. Left as identical panels the reader would learn
   that both are their fault, and the second one is not. So: .brief-err stays a
   compact --r-sm strip with one line of 15px. This is a padded --r-md block
   with a heading over a paragraph and a control under it. Same colour, two
   clearly different objects, and the words carry the rest.

   NO LEFT RULE (client direction, 2026-08-31). It carried the urgency while the
   panel was --pale purple and had to work without the colour; on --red-bg the
   surface does that job on its own and the rule was a second voice saying the
   same thing. THE RADIUS WENT BACK TO ONE VALUE WITH IT - the --r-sm/--r-md
   split existed only so the rule read as attached to the panel rather than
   drawn beside it, and with no rule there is nothing for a square corner to
   attach to. */
.nl-confirm{
  margin:var(--s4) 0 0;padding:var(--s5) var(--s6);
  border-radius:var(--r-md);
  background:var(--red-bg);
  color:var(--red-ink);font-size:15px;line-height:23px;
}
.nl-confirm p{margin:0}
/* Its own line, not a bold clause inside the sentence. The stop is one fact -
   nothing is picked - and the consequence is the sentence under it. */
.nl-confirm b{
  display:block;margin-bottom:var(--s1);
  font-size:16px;line-height:24px;font-weight:600;
}
/* .btn-ghost is the site's text-only action, so the way back is not a new
   component. It takes the panel's ink rather than the button's purple: a purple
   link inside a red block reads as belonging to the page behind it. */
.nl-confirm-go{margin-top:var(--s3);padding-top:6px;padding-bottom:6px;color:var(--red-ink)}
.nl-confirm-go:hover,.nl-confirm-go:focus-visible{color:var(--red)}

/* THE FINE PRINT IS RULED OFF, which is the same device the terms cards use
   under their headings and .pcard-foot uses above its byline. Without it the
   note floated the same distance below the field as the field sat below its
   label, so a legal footnote read as a third step in the form. */
.nl-sub-note{
  margin:var(--s6) 0 0;padding-top:var(--s5);
  border-top:1px solid var(--line);
  color:var(--ash);font-size:14px;line-height:22px;
}

/* The confirmation replaces the box, so it takes the box's own footprint. */
.nl-sub .brief-sent{margin-top:var(--s6);max-width:44rem}


/* ==========================================================================
   04. The terms
   Four things a reader settles before typing an address, in full on the page
   rather than behind a control.

   NO ICONS, AND THAT IS A SYSTEMS DECISION RATHER THAN A TASTE ONE. This site
   has no content iconography anywhere — every SVG on the other twelve pages is
   functional UI, and not one card, list or section is illustrated. Four icons
   here would be a vocabulary invented for the smallest block on one page, and
   the particular four this block would want are the stock trust badges every
   mailing-list page already has.
   ========================================================================== */
.nl-terms{background:var(--offwhite)}
.nl-terms .wrap{padding-top:var(--sec-sm);padding-bottom:var(--sec-sm)}
/* Borrows .nl-step-top's row rather than declaring a second one. The note is
   NOT --purple-deep like the count in step 01: that colour is carrying live
   data up there, and reusing it on a fixed sentence would spend the page's one
   attention colour on something that never changes. --ash instead. */
.nl-terms-note{margin:0;color:var(--ash);font-size:15px;line-height:23px}

/* The GRID ITEM IS THE PAIR, not the term and the definition separately. A
   <dl> laid out as a grid puts every dt and every dd in its own cell, so four
   terms and four definitions ran across the columns in reading order and no
   definition sat under the term it belonged to. Each pair is wrapped in a div,
   which is what the spec allows a <dl> to contain for exactly this. */
.nl-terms-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s3);margin:var(--s6) 0 0;
}
.nl-terms-list > div{
  padding:var(--s6);
  border-radius:var(--r-lg);
  background:var(--haze);
  /* Same inset-shadow trick the category cards use, and for the same reason: a
     real border would add 2px to the box and reflow the row on hover. */
  box-shadow:inset 0 0 0 1px transparent;
  transition:background-color 200ms ease-in-out, box-shadow 200ms ease-in-out;
}

/* ==========================================================================
   THE HOVER, AND IT DELIBERATELY GOES THE OTHER WAY (2026-09-02).
   NOTHING IN THIS BLOCK IS CLICKABLE. It is a <dl> - four facts, no link, no
   control, no destination - sitting a few inches below nine cards that ARE
   controls, in the same --haze material, at the same radius. So the constraint
   on this hover is not "make it feel alive", it is "do not teach the reader
   that a definition list is a button". A card that answers the pointer the way
   the category cells do earns exactly one click, which goes nowhere.

   THE DISTINCTION IS THE DIRECTION OF THE SURFACE. A category card DARKENS on
   hover, --haze to --mist: the target acknowledging the pointer. These LIGHTEN,
   --haze to --white, which is the opposite move and reads as a card coming
   forward to be read rather than one waiting to be pressed. White needs the
   hairline or it dissolves into the --offwhite the section stands on, so the
   ring appears with it - 1px --line, a boundary, not the 2px --purple ring that
   means SELECTED twelve inches up the page.

   AND THE ACCENT IS THE RULE UNDER THE TERM, not the card. The 1px --line under
   each <dt> is already the site's own device; tinting it --purple on hover puts
   the colour on the one element that is doing the summarising, so the eye lands
   on the three-word promise rather than on the box around it.

   NO cursor:pointer, NO lift, NO shadow. Each of those is a control's
   vocabulary and this is not a control.

   @media (hover:hover), because on a touch screen :hover latches on tap and
   stays there until something else is touched - four cards that go white and
   stay white after a stray finger is worse than no hover at all, and there is
   nothing here a touch reader loses by not having it.

   REDUCED MOTION is already handled: base.css kills every transition globally,
   and what is left is an instant colour swap. That is the outcome that sheet
   wants - the feedback stays, the fade goes.
   ========================================================================== */
@media (hover:hover){
  .nl-terms-list > div:hover{
    background:var(--white);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .nl-terms-list > div:hover dt{border-bottom-color:var(--purple)}
}
/* 17px against the 15px below it. At the same size as its own definition the
   term was not a heading, it was the first sentence of a paragraph — which is
   what left this block with nothing to scan.

   THE HAIRLINE IS WHY THIS IS NOT AN ICON. Four cards carrying two type styles
   and one flat fill read as a texture rather than four facts, which is the
   thing an icon was being asked to fix. The rule is the site's own device — the
   same 1px --line under .pcard-foot on every note card — so it gives each card
   the structure it was missing in a language the page already speaks. */
.nl-terms-list dt{
  color:var(--slate);font-size:17px;line-height:25px;font-weight:600;letter-spacing:-.01em;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line);
  transition:border-color 200ms ease-in-out;
}
.nl-terms-list dd{margin:var(--s3) 0 0;color:var(--gray);font-size:15px;line-height:23px}


/* ==========================================================================
   05. Responsive
   ========================================================================== */
@media (max-width:680px){
  .nl-sub-box{padding:var(--s6)}
  /* The button drops under the field rather than squeezing beside it: below
     this width a 18rem floor and a "Send me these notes" button cannot both sit
     in one row without the field falling under 20ch. */
  .nl-sub-act input{flex:1 1 100%}
  .nl-sub-act .btn{width:100%;text-align:center}
}

@media (max-width:640px){
  .nl-step-h{gap:var(--s3)}
  .nl-cats{grid-template-columns:1fr}
  /* One column means full-measure cards, where 28px of side padding starts
     eating the line length rather than framing it. */
  .nl-cat-body{padding:var(--s6);padding-right:calc(var(--s11) + var(--s3))}
  .nl-cat-body::before{top:calc(var(--s6) + 3px);right:calc(var(--s6) + 2px)}
  .nl-cat-body::after{top:calc(var(--s6) + 8px);right:calc(var(--s6) + 7px)}
  .nl-step-top{flex-direction:column;gap:var(--s2)}
}


/* ==========================================================================
   06. Reduced motion
   The colour transitions are left alone, which is what base.css does for the
   same kind of state: they answer a click or a hover, and removing them would
   make the interaction feel unregistered rather than calmer. Nothing on this
   page moves in space any more — the one transform was the pinned bar sliding
   away at the footer, and the bar is gone — so there is nothing left here to
   switch off.
   ========================================================================== */