/* ==========================================================================
   LEGAL DOCUMENT PAGE — v3

   Loaded by the terms-of-service views alone
   (resources/views/frontend/pages/terms_of_service/{locale}.blade.php), pushed
   into the head after front.css so it wins on order as well as on specificity.

   Written to be a SHARED legal-page stylesheet, not a terms-only one: the
   privacy policy and imprint pages under resources/views/frontend/pages/ are
   the same shape of document (one long numbered text, no data) and can adopt
   this file by wearing .nlp-legal and the same lg- markup. Nothing here names
   the terms page.

   Three house rules this file follows, same as the other v3 stylesheets:

     1. SCOPE. Everything is under .nlp-legal, the class on #page-content. Two
        classes deep beats every Bootstrap/Nifty/front.css rule below it on
        specificity, so there is not one !important here.

     2. TOKENS ARE PREFIXED --lg-. front.css declares its own :root --gray,
        --primary, --dark and friends; an unprefixed token declared on a
        container would silently repaint any theme rule that reaches an element
        inside the document.

     3. THE OLD TYPE CLASSES ARE GONE FROM THE MARKUP. The pre-redesign page
        was built from .hd4_20 / .p2_16 / .gray-text / .page-ul, which are
        front.css utilities with their own media queries (front.css:6588 and
        :7046 restyle .hd4_20 at two breakpoints). Rather than out-specify
        them at every width, the redesigned markup does not carry them.

   Order: tokens, reset, progress bar, hero, layout, contents rail, the paper
   the document is printed on, its typography, the closing cards, the
   back-to-top control, then the breakpoints, then print. The typography half
   comes after .lg-paper because both set the spacing inside the sheet.
   ========================================================================== */

/* Contents links jump to a heading, so the jump is eased rather than snapped.
   Global by nature, but this file loads on legal pages alone. */
html {
  scroll-behavior: smooth;
}

/* ============ tokens ============ */
.nlp-legal {
  --lg-sky: #3FA9E8;
  --lg-sky-deep: #2286C7;
  --lg-sky-tint: #EDF6FC;
  --lg-sky-line: #D3E9F8;
  --lg-ink: #12303B;
  --lg-teal: #0F6E78;
  --lg-teal-deep: #0A4F57;
  --lg-teal-tint: #EAF4F3;
  --lg-paper: #FFFFFF;
  --lg-mist: #F4F9F9;
  --lg-line: #E6EDEC;
  --lg-line-soft: #F0F5F4;
  --lg-text: #3D5058;
  --lg-text-soft: #6B7D84;
  --lg-gold: #F0C033;
  --lg-radius: 22px;
  --lg-radius-sm: 12px;
  --lg-shadow: 0 1px 2px rgba(15, 80, 95, .04), 0 10px 30px -12px rgba(15, 80, 95, .10);
  --lg-shadow-lift: 0 3px 6px rgba(15, 80, 95, .05), 0 20px 44px -16px rgba(15, 80, 95, .18);

  /* The v3 header is sticky and roughly 67px tall (13px padding, a 40px control
     row, 13px, 1px border). The contents rail parks below it, a heading jumped
     to from that rail clears it, and the scrollspy calls a heading "current"
     from the same line. All three are driven from here so one number moves
     them together — the JS reads it off this element. */
  --lg-head-offset: 88px;

  background: var(--lg-mist);
  color: var(--lg-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ============ reset ============ */
/* Bootstrap already box-sizes everything; repeated so the page behaves
   identically if it is ever lifted onto a layout that does not. */
.nlp-legal *,
.nlp-legal *::before,
.nlp-legal *::after {
  box-sizing: border-box;
}

.nlp-legal button {
  font-family: inherit;
  cursor: pointer;
}

.nlp-legal h1,
.nlp-legal h2,
.nlp-legal h3 {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--lg-ink);
}

.nlp-legal p {
  margin: 0;
}

.nlp-legal ul,
.nlp-legal ol {
  margin: 0;
  padding: 0;
}

.nlp-legal a {
  text-decoration: none;
}

.nlp-legal .lg-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ reading progress ============ */
/* Fixed to the viewport top, above the sticky header. A legal page is long
   enough that "how much is left" is worth a line of pixels. */
.nlp-legal .lg-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  z-index: 1200;
  pointer-events: none;
}

.nlp-legal .lg-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--lg-sky) 0%, var(--lg-teal) 100%);
  border-radius: 0 3px 3px 0;
}

/* ============ hero ============ */
/* Dark band, echoing the promo bar at the very top of the layout, so the white
   document sheet below it reads as a separate object. */
.nlp-legal .lg-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lg-ink) 0%, var(--lg-teal-deep) 58%, var(--lg-teal) 100%);
  color: #fff;
  padding: 46px 0 40px;
}

/* Two soft lights, not an image: nothing extra to download on a page nobody
   waits for. */
.nlp-legal .lg-hero::before,
.nlp-legal .lg-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.nlp-legal .lg-hero::before {
  width: 460px;
  height: 460px;
  top: -230px;
  right: -90px;
  background: radial-gradient(circle, rgba(63, 169, 232, .34) 0%, rgba(63, 169, 232, 0) 70%);
}

.nlp-legal .lg-hero::after {
  width: 360px;
  height: 360px;
  bottom: -220px;
  left: -60px;
  background: radial-gradient(circle, rgba(240, 192, 51, .16) 0%, rgba(240, 192, 51, 0) 70%);
}

.nlp-legal .lg-hero .lg-wrap {
  position: relative;
  z-index: 1;
}

/* breadcrumb */
.nlp-legal .lg-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 18px;
}

.nlp-legal .lg-crumbs a {
  color: rgba(255, 255, 255, .82);
}

.nlp-legal .lg-crumbs a:hover {
  color: #fff;
  text-decoration: underline;
}

.nlp-legal .lg-crumbs span[aria-hidden] {
  opacity: .5;
}

.nlp-legal .lg-crumbs .lg-crumb-here {
  color: #fff;
}

.nlp-legal .lg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 6px 13px;
}

.nlp-legal .lg-eyebrow .material-icons {
  font-size: 14px;
}

.nlp-legal .lg-title {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -.015em;
  color: #fff;
  margin: 16px 0 0;
}

.nlp-legal .lg-lede {
  max-width: 62ch;
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.62;
  color: rgba(255, 255, 255, .8);
}

/* hero meta chips */
.nlp-legal .lg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.nlp-legal .lg-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 999px;
  padding: 7px 14px;
}

.nlp-legal .lg-chip b {
  font-weight: 700;
  color: #fff;
}

.nlp-legal .lg-chip .material-icons {
  font-size: 15px;
  color: var(--lg-gold);
}

/* hero actions */
.nlp-legal .lg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.nlp-legal .lg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  padding: 11px 20px;
  border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

.nlp-legal .lg-btn .material-icons {
  font-size: 17px;
}

.nlp-legal .lg-btn:hover {
  transform: translateY(-1px);
}

.nlp-legal .lg-btn-solid {
  background: #fff;
  color: var(--lg-teal-deep);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .5);
}

.nlp-legal .lg-btn-solid:hover {
  background: #fff;
  color: var(--lg-ink);
}

.nlp-legal .lg-btn-ghost {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
}

.nlp-legal .lg-btn-ghost:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* ============ layout ============ */
.nlp-legal .lg-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 34px;
  /* DO NOT put align-items: start back here. It sizes .lg-rail to its own
     content (~640px) instead of the row, and position:sticky can only travel
     inside its own containing block — so the rail scrolled away with the page
     and looked like sticky was broken. Stretch makes the column as tall as the
     document, which is exactly how far the rail should follow the reader.
     The paper defines the row height, so stretching changes nothing visually. */
  align-items: stretch;
  padding-top: 34px;
  padding-bottom: 72px;
}

/* The grid item, full height. The sticky box is its child so that the child has
   the whole document's height to travel through. */
.nlp-legal .lg-rail {
  min-width: 0;
}

.nlp-legal .lg-sticky {
  position: sticky;
  top: var(--lg-head-offset);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* The rail is taller than the viewport in some languages; let it scroll on
     its own rather than clipping the last sections out of reach. */
  max-height: calc(100vh - var(--lg-head-offset) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Room for the focus ring on the last link once the rail scrolls. */
  padding-right: 4px;
}

/* ============ contents rail ============ */
.nlp-legal .lg-toc {
  background: var(--lg-paper);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-sm);
  box-shadow: var(--lg-shadow);
  padding: 16px 8px 12px 16px;
  /* Hidden until the JS has links to put in it: an empty box is worse than no
     box, and this page still reads perfectly without the script. */
  display: none;
}

.nlp-legal .lg-toc.is-ready {
  display: block;
}

.nlp-legal .lg-toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 8px;
}

.nlp-legal .lg-toc-title {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--lg-text-soft);
}

/* Only the narrow layout turns this into a disclosure button. */
.nlp-legal .lg-toc-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lg-line);
  border-radius: 50%;
  background: var(--lg-mist);
  color: var(--lg-teal);
  padding: 0;
}

.nlp-legal .lg-toc-toggle .material-icons {
  font-size: 20px;
  transition: transform .2s ease;
}

.nlp-legal .lg-toc-list {
  list-style: none;
  margin-top: 10px;
  max-height: none;
}

.nlp-legal .lg-toc-list li {
  margin: 0;
}

.nlp-legal .lg-toc-list a {
  display: flex;
  gap: 9px;
  align-items: baseline;
  font-size: 13px;
  line-height: 1.42;
  font-weight: 500;
  color: var(--lg-text-soft);
  border-left: 2px solid transparent;
  border-radius: 0 8px 8px 0;
  padding: 7px 10px 7px 11px;
  margin-left: -13px;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

.nlp-legal .lg-toc-list a:hover {
  color: var(--lg-teal);
  background: var(--lg-teal-tint);
}

.nlp-legal .lg-toc-num {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--lg-sky-deep);
  opacity: .75;
  flex: none;
  min-width: 15px;
}

.nlp-legal .lg-toc-list a.is-on {
  color: var(--lg-teal-deep);
  font-weight: 700;
  background: var(--lg-teal-tint);
  border-left-color: var(--lg-teal);
}

.nlp-legal .lg-toc-list a.is-on .lg-toc-num {
  opacity: 1;
}

/* rail help card */
.nlp-legal .lg-aside-card {
  background: linear-gradient(160deg, var(--lg-sky-tint) 0%, #fff 78%);
  border: 1px solid var(--lg-sky-line);
  border-radius: var(--lg-radius-sm);
  padding: 16px;
  flex: none;
}

.nlp-legal .lg-aside-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--lg-ink);
}

.nlp-legal .lg-aside-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lg-text-soft);
  margin-top: 6px;
}

.nlp-legal .lg-aside-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lg-teal);
}

.nlp-legal .lg-aside-link .material-icons {
  font-size: 15px;
}

.nlp-legal .lg-aside-link:hover {
  color: var(--lg-teal-deep);
  text-decoration: underline;
}

/* ============ the paper ============ */
/* One continuous sheet rather than fifteen cards: a contract reads as a single
   document, and fifteen shadows down the page reads as a list of unrelated
   boxes. */
.nlp-legal .lg-paper {
  background: var(--lg-paper);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius);
  box-shadow: var(--lg-shadow);
  padding: 8px 48px 40px;
}

.nlp-legal .lg-sec {
  padding: 34px 0 4px;
  border-top: 1px solid var(--lg-line-soft);
}

.nlp-legal .lg-sec:first-child {
  border-top: 0;
}

/* The jumped-to heading has to clear the sticky header. scroll-margin-top does
   that without the old trick of an offset invisible anchor. */
.nlp-legal .lg-sec {
  scroll-margin-top: var(--lg-head-offset);
}

.nlp-legal .lg-sec-title {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 23px;
  line-height: 1.28;
  font-weight: 600;
  letter-spacing: -.005em;
  margin-bottom: 16px;
  scroll-margin-top: var(--lg-head-offset);
}

/* The number lives in the badge, so the source heading text keeps its own
   numbering out of the way of the design. */
.nlp-legal .lg-sec-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  margin-top: 2px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--lg-teal-tint);
  border: 1px solid #D7E8E5;
  color: var(--lg-teal-deep);
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ============ document typography ============ */
.nlp-legal .lg-p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--lg-text);
  margin-bottom: 14px;
  /* Legal prose is long-form; keep the measure readable even on wide screens. */
  max-width: 78ch;
}

.nlp-legal .lg-p:last-child {
  margin-bottom: 0;
}

.nlp-legal .lg-p strong {
  color: var(--lg-ink);
  font-weight: 600;
}

.nlp-legal .lg-p a {
  color: var(--lg-sky-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--lg-sky-line);
}

.nlp-legal .lg-p a:hover {
  color: var(--lg-teal);
  border-bottom-color: currentColor;
}

/* Sub-heading inside a section. Was a .font-600 paragraph, which gave screen
   readers and search engines nothing to work with. */
.nlp-legal .lg-h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--lg-teal-deep);
  margin: 26px 0 12px;
  scroll-margin-top: var(--lg-head-offset);
}

.nlp-legal .lg-sec-title+.lg-h3 {
  margin-top: 4px;
}

/* Third level, added for the privacy policy on 2026-08-29: its section 2 numbers
   three deep (2.4.1 under 2.4 under 2) and flattening those into .lg-h3 lost the
   hierarchy the document is written in. Quieter than .lg-h3 on purpose — the
   weight step is what says "inside the one above". */
.nlp-legal .lg-h4 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--lg-ink);
  margin: 20px 0 9px;
  scroll-margin-top: var(--lg-head-offset);
}

.nlp-legal .lg-h3+.lg-h4 {
  margin-top: 12px;
}

/* A run-in label that introduces the list under it — "We accept the following
   payment methods:" — set apart from body copy without becoming a heading. */
.nlp-legal .lg-lead-in {
  font-size: 15.5px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--lg-ink);
  margin: 18px 0 10px;
}

.nlp-legal .lg-list {
  list-style: none;
  max-width: 78ch;
  margin: 0 0 16px;
}

.nlp-legal .lg-list li {
  position: relative;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--lg-text);
  padding: 4px 0 4px 26px;
}

/* The privacy policy's lists are largely "Label: what it means" pairs, so the
   label needs the same lift it gets in body copy. */
.nlp-legal .lg-list li strong {
  color: var(--lg-ink);
  font-weight: 600;
}

.nlp-legal .lg-list li a {
  color: var(--lg-sky-deep);
  font-weight: 500;
  border-bottom: 1px solid var(--lg-sky-line);
}

.nlp-legal .lg-list li a:hover {
  color: var(--lg-teal);
  border-bottom-color: currentColor;
}

.nlp-legal .lg-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lg-sky);
  box-shadow: 0 0 0 3px var(--lg-sky-tint);
}

/* Numbered variant, for the few places the source list is a sequence. */
.nlp-legal .lg-list-num {
  counter-reset: lg-item;
}

.nlp-legal .lg-list-num li {
  counter-increment: lg-item;
  padding-left: 32px;
}

.nlp-legal .lg-list-num li::before {
  content: counter(lg-item);
  left: 0;
  top: 6px;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: var(--lg-teal-tint);
  box-shadow: none;
  color: var(--lg-teal-deep);
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============ callouts ============ */
/* Pulls a clause the reader most often comes here for (refund window, notice
   period) out of the run of text. Carries no new wording — the text inside is
   the clause as authored. */
.nlp-legal .lg-note {
  display: flex;
  gap: 13px;
  background: var(--lg-sky-tint);
  border: 1px solid var(--lg-sky-line);
  border-left: 3px solid var(--lg-sky);
  border-radius: 4px var(--lg-radius-sm) var(--lg-radius-sm) 4px;
  padding: 15px 17px;
  margin: 18px 0;
  max-width: 78ch;
}

.nlp-legal .lg-note .material-icons {
  flex: none;
  font-size: 20px;
  color: var(--lg-sky-deep);
  margin-top: 1px;
}

.nlp-legal .lg-note-body {
  min-width: 0;
}

.nlp-legal .lg-note .lg-p {
  margin-bottom: 8px;
}

.nlp-legal .lg-note .lg-p:last-child {
  margin-bottom: 0;
}

/* Optional kicker above a callout's text. Unused on the terms page — a label
   there would be new wording on a legal document — and kept for the privacy
   policy, where the callouts are editorial. */
.nlp-legal .lg-note-label {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lg-sky-deep);
  margin-bottom: 5px;
}

/* ============ contact block ============ */
.nlp-legal .lg-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-start;
  background: var(--lg-mist);
  border: 1px solid var(--lg-line);
  border-radius: var(--lg-radius-sm);
  padding: 20px 22px;
  margin: 20px 0 6px;
}

.nlp-legal .lg-contact-block {
  min-width: 0;
}

.nlp-legal .lg-contact-label {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lg-text-soft);
  margin-bottom: 7px;
}

.nlp-legal .lg-contact-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--lg-ink);
  margin-bottom: 3px;
}

.nlp-legal .lg-contact-line {
  font-size: 14px;
  line-height: 1.6;
  color: var(--lg-text);
}

.nlp-legal .lg-contact-mail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--lg-teal);
}

.nlp-legal .lg-contact-mail .material-icons {
  font-size: 17px;
}

.nlp-legal .lg-contact-mail:hover {
  color: var(--lg-teal-deep);
  text-decoration: underline;
}

/* ============ closing strip ============ */
/* The "last updated" and copyright lines the document ends with, set as a
   colophon instead of two more body paragraphs. */
.nlp-legal .lg-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--lg-line-soft);
  margin-top: 30px;
  padding-top: 18px;
  font-size: 12.5px;
  color: var(--lg-text-soft);
}

.nlp-legal .lg-colophon b {
  color: var(--lg-ink);
  font-weight: 600;
}

/* NO BACK-TO-TOP CONTROL HERE. The layout already ships one — Nifty's
   .scroll-top button near the end of learn_school, driven by the layout's own
   jQuery — and a second one sat on top of it. Removed 2026-08-29; the theme's
   is the one these pages use. */

/* ============ breakpoints ============ */
@media (max-width: 1100px) {
  .nlp-legal .lg-layout {
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 26px;
  }

  .nlp-legal .lg-paper {
    padding: 8px 34px 34px;
  }
}

/* Below this the rail cannot hold a readable list beside the text, so the
   contents become a disclosure above the document. */
@media (max-width: 900px) {
  .nlp-legal .lg-hero {
    padding: 34px 0 32px;
  }

  .nlp-legal .lg-title {
    font-size: 34px;
  }

  .nlp-legal .lg-lede {
    font-size: 15.5px;
  }

  .nlp-legal .lg-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding-top: 20px;
    padding-bottom: 48px;
  }

  .nlp-legal .lg-sticky {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .nlp-legal .lg-toc {
    padding: 14px 16px;
  }

  .nlp-legal .lg-toc-toggle {
    display: inline-flex;
  }

  /* Collapsed by default on narrow screens: fifteen links above the document
     would push the text a screen and a half down. */
  .nlp-legal .lg-toc .lg-toc-list {
    display: none;
    margin-top: 12px;
  }

  .nlp-legal .lg-toc.is-open .lg-toc-list {
    display: block;
  }

  .nlp-legal .lg-toc.is-open .lg-toc-toggle .material-icons {
    transform: rotate(180deg);
  }

  .nlp-legal .lg-toc-list a {
    margin-left: 0;
    border-left: 0;
    border-radius: 8px;
    padding-left: 10px;
  }

  .nlp-legal .lg-toc-list a.is-on {
    border-left: 0;
  }

  /* The help card repeats what the closing contact block already says; on a
     phone that is one scroll of duplication. */
  .nlp-legal .lg-aside-card {
    display: none;
  }
}

@media (max-width: 600px) {
  .nlp-legal .lg-wrap {
    padding: 0 16px;
  }

  .nlp-legal .lg-hero {
    padding: 26px 0 26px;
  }

  .nlp-legal .lg-title {
    font-size: 28px;
  }

  .nlp-legal .lg-actions .lg-btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .nlp-legal .lg-paper {
    padding: 4px 20px 28px;
    border-radius: 16px;
  }

  .nlp-legal .lg-sec {
    padding-top: 26px;
  }

  .nlp-legal .lg-sec-title {
    font-size: 19px;
    gap: 11px;
    align-items: center;
  }

  .nlp-legal .lg-sec-num {
    min-width: 28px;
    height: 28px;
    font-size: 11.5px;
    border-radius: 9px;
    margin-top: 0;
  }

  .nlp-legal .lg-p,
  .nlp-legal .lg-list li,
  .nlp-legal .lg-lead-in {
    font-size: 15px;
  }
}

/* ============ print ============ */
/* The hero offers "print / save as PDF", so printing has to produce a document
   rather than a screenshot of a website: no dark band, no rail, no controls,
   and sections that do not break across pages mid-heading. */
@media print {

  /* THE ONLY UNSCOPED RULES IN THIS FILE, and they are deliberate: the "print
     or save as PDF" button has to produce the document, not a paper copy of a
     website. The site chrome lives outside #page-content, so .nlp-legal cannot
     reach it. This is safe because the stylesheet is pushed by the legal views
     alone — no other page loads it, so nothing else can be affected — and it
     only ever applies on paper. Selectors, top to bottom of learn_school:
     the promo bar, the v3 header, the category rail, the pre-v3 header, the
     mobile nav, the login modal and the footer. */
  .nlp-promo,
  .p-header,
  .nlp-cats,
  .header_navbar_learn,
  #mainnav-container,
  #checkout_modal,
  #front-footer {
    display: none;
  }

  .nlp-legal {
    background: #fff;
  }

  .nlp-legal .lg-progress,
  .nlp-legal .lg-rail,
  .nlp-legal .lg-actions,
  .nlp-legal .lg-crumbs {
    display: none;
  }

  /* The theme's own back-to-top, which these pages rely on instead of shipping
     one of their own. It is not part of the document. */
  .scroll-top {
    display: none;
  }

  .nlp-legal .lg-hero {
    background: #fff;
    color: #000;
    padding: 0 0 18px;
    border-bottom: 2px solid #000;
  }

  .nlp-legal .lg-hero::before,
  .nlp-legal .lg-hero::after {
    display: none;
  }

  .nlp-legal .lg-title {
    color: #000;
    font-size: 28px;
  }

  .nlp-legal .lg-lede {
    color: #333;
  }

  .nlp-legal .lg-eyebrow,
  .nlp-legal .lg-chip {
    color: #000;
    background: transparent;
    border-color: #999;
  }

  .nlp-legal .lg-chip b {
    color: #000;
  }

  .nlp-legal .lg-chip .material-icons {
    display: none;
  }

  .nlp-legal .lg-layout {
    display: block;
    padding: 0;
  }

  .nlp-legal .lg-paper {
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .nlp-legal .lg-sec {
    break-inside: auto;
    page-break-inside: auto;
  }

  .nlp-legal .lg-sec-title {
    break-after: avoid;
    page-break-after: avoid;
    font-size: 16px;
  }

  .nlp-legal .lg-h3,
  .nlp-legal .lg-h4,
  .nlp-legal .lg-lead-in {
    break-after: avoid;
    page-break-after: avoid;
    color: #000;
  }

  .nlp-legal .lg-p,
  .nlp-legal .lg-list li {
    font-size: 11pt;
    line-height: 1.5;
    max-width: none;
  }

  .nlp-legal .lg-note,
  .nlp-legal .lg-contact {
    background: transparent;
  }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .nlp-legal .lg-btn,
  .nlp-legal .lg-toc-list a,
  .nlp-legal .lg-toc-toggle .material-icons {
    transition: none;
  }

  .nlp-legal .lg-btn:hover {
    transform: none;
  }
}