/* ============================================================================
   Trading Rules & Regulations — /trading-rules
   Figma file 84J3BYC09NZcH6pAx3IWa5 (Lucas's newer duplicate, NOT the key the
   other handoffs use). Desktop 959:66525 (1512x22055), mobile 959:68003
   (393x30441).

   Every value below is read out of the node JSON via tools/figma/fx.py.
   Do not hand-tune — re-extract.

   This is the only LIGHT page on the site. The page frame fill is #F0F2F5,
   not the usual near-black, so the shared dark chrome sits on a teal hero
   wash at the top and everything below it is light.
   ========================================================================= */

.tr {
  /* --- page palette, from 959:66525 and the section nodes ----------------- */
  --tr-page:      #F0F2F5;   /* 959:66525 frame fill                          */
  --tr-ink:       #0D0D0D;   /* headings                                      */
  --tr-body:      rgba(13,13,13,.7);  /* every body paragraph                 */
  --tr-body-80:   rgba(13,13,13,.8);  /* card labels                          */
  --tr-card:      #FFFFFF;
  --tr-pale:      #F0F5F5;   /* the pale plate behind card clusters           */
  --tr-shell:     #F9F9F9;   /* the three intro summary cards                 */

  /* --- the three verdict colours. Fill is the colour at 5%, stroke 2px. --- */
  --tr-permit:    #33635F;
  --tr-deduct:    #C8B100;
  --tr-breach:    #DB4446;

  /* --- signature fills -----------------------------------------------------
     TRAP: every one of these gradients carries a PAINT-level opacity in the
     Figma file (0.09 on the chips, 0.15 on the equity-floor and guarantee
     bars). fx.py reports gradient stops but silently drops paint opacity, so
     read straight off it they come out as solid dark teal and every icon
     disappears into its own chip. The alphas below are the stop alpha times
     the paint opacity. Do not "simplify" them back to solid colours.        */
  --tr-chip:      linear-gradient(73.7deg, rgba(5,63,59,.09) 0%, rgba(5,63,59,.0711) 59.83%, rgba(255,255,255,.09) 100%);
  --tr-chip-lite: linear-gradient(73.7deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.0711) 59.83%, rgba(255,255,255,.09) 100%);
  --tr-hair:      linear-gradient(7.6deg, rgba(255,255,255,.11) 0%, #FFFFFF 49.52%, rgba(255,255,255,.11) 100%);

  /* --- layout, from the two-column body 959:66580 ------------------------- */
  --tr-rail:      290px;   /* 959:66581 */
  --tr-gutter:    32px;    /* 959:66638 x=322 minus the 290 rail */
  --tr-col:       884px;   /* 959:66638 */
  --tr-stage:     1206px;  /* 959:66550 */

  /* Sticky offset. The shared navbar is 59 tall sitting at page y=66, so a
     section must clear 66+59 plus breathing room before its heading is
     readable. Used for BOTH the sticky rail top and scroll-margin-top —
     they must stay in step or nav clicks land under the navbar. */
  --tr-sticky-top: 24px;
  --tr-anchor-top: 104px;

  background: var(--tr-page);
  color: var(--tr-ink);
  font-family: var(--font-sans);
  position: relative;
  overflow: clip;
}

/* Deep links must land with the heading visible, not under the navbar.
   This is the single most common bug on a page like this. */
.tr [id] { scroll-margin-top: var(--tr-anchor-top); }

/* Smooth scrolling is a real cost on a 22,000px page if you did not ask for
   it, so it is behind the reduced-motion query, not global. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.tr) { scroll-behavior: smooth; }
}

/* ==========================================================================
   1. Hero wash — 959:66528 (Ellipse 473, HARD_LIGHT, layer blur 516) and
   959:66529 (Overlay, 1512x607), reproduced together as ONE element.

   FULL BLEED, NOT A CENTRED BOX. This is a BACKGROUND, so it runs
   left:0 / right:0 / width:auto with a min-width floor, per HANDOFF-COMMON §4.
   Pinned at the Figma width it became a 1512px teal panel floating in the
   middle of a wide screen with pale strips down both sides. The 1512 stage
   that POSITIONS content stays centred; the wash behind it does not.

   THE STOPS BELOW ARE SAMPLED FROM THE FIGMA RENDER, not derived from the
   node values. Read literally, 959:66529 is a left-to-right fade from 62% to
   transparent — build that and you get a wash that is dark on the left and
   pale on the right, which is not what the file draws. What it actually
   renders is centre-weighted horizontally with a steady vertical falloff,
   because the HARD_LIGHT ellipse above it dominates; and Chrome does not
   blend HARD_LIGHT the way Figma does regardless.

   Method: composite the Figma render of 959:66527 over the page fill
   (#F0F2F5), then solve each pixel back to an alpha over #053F3B. Re-measure
   rather than eyeball if the design changes.
   ======================================================================= */
.tr__overlay {
  position: absolute;
  top: 56px;
  left: 0; right: 0; width: auto;   /* background, so full bleed */
  min-width: 1512px;
  height: 607px;
  background: linear-gradient(180deg,
    rgba(5,63,59,.78) 0%,
    rgba(5,63,59,.84) 16.5%,
    rgba(5,63,59,.78) 29.7%,
    rgba(5,63,59,.66) 42.8%,
    rgba(5,63,59,.50) 56%,
    rgba(5,63,59,.35) 69.2%,
    rgba(5,63,59,.16) 82.4%,
    rgba(5,63,59,.03) 95.6%,
    rgba(5,63,59,0) 100%);
  /* horizontal falloff: the render is ~20% lighter at the frame edges than
     across the middle two quarters */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.80) 0%, #000 26%, #000 74%, rgba(0,0,0,.80) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.80) 0%, #000 26%, #000 74%, rgba(0,0,0,.80) 100%);
  pointer-events: none;
  z-index: 0;
}
.tr__inner { position: relative; z-index: 1; }

/* --- intro block 959:66551 (1206x559) ----------------------------------- */
.tr-intro {
  width: var(--tr-stage);
  margin: 0 auto;
  padding-top: 117px;          /* 959:66551 sits at page y=242 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 39px;
}
.tr-intro__head {
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  width: 729px;
}
.tr-intro__titlewrap {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  width: 582px;
}
/* 959:66554 — the version pill */
.tr-intro__ver {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 57px;
  background: var(--tr-chip-lite);
  -webkit-backdrop-filter: blur(8.35px);
  backdrop-filter: blur(8.35px);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  font-weight: var(--w-medium);
  color: #FFFFFF;
}
/* 959:66556 — SF Pro 510 90/81 ls -2.7 */
.tr-intro__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: 90px; line-height: 81px; letter-spacing: -2.7px;
  color: #FFFFFF;
  text-align: center;
}
/* 959:66557 */
.tr-intro__meta {
  margin: 0;
  font-size: 18px; line-height: 27px; letter-spacing: -.36px;
  font-weight: var(--w-medium);
  color: #FFFFFF;
  text-align: center;
}

/* --- the three verdict cards 959:66558 ---------------------------------- */
.tr-verdicts {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  width: var(--tr-stage);
  align-items: flex-start;
}
.tr-verdict {
  width: 390px;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--tr-shell);
  border-radius: 32px;
}
.tr-verdict__head {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px;
  border-radius: 32px;
  border: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 5%, transparent);
}
.tr-verdict--permit .tr-verdict__head { color: var(--tr-permit); }
.tr-verdict--deduct .tr-verdict__head { color: var(--tr-deduct); }
.tr-verdict--breach .tr-verdict__head { color: var(--tr-breach); }
.tr-verdict__label {
  margin: 0;
  font-size: 16px; line-height: 24px; letter-spacing: -.16px;
  font-weight: var(--w-semi);
  color: currentColor;
}
.tr-verdict__what,
.tr-verdict__eg {
  margin: 0;
  font-size: 20px; line-height: 26.4px; letter-spacing: -.2px;
  font-weight: var(--w-regular);
  color: var(--tr-body);
}
.tr-verdict__eg { padding: 0 24px 16px; opacity: .8; }

/* ==========================================================================
   2. Two-column body 959:66580 — 290 rail, 32 gutter, 884 content
   ======================================================================= */
.tr-body {
  width: var(--tr-stage);
  margin: 100px auto 0;
  display: grid;
  grid-template-columns: var(--tr-rail) var(--tr-col);
  column-gap: var(--tr-gutter);
  align-items: start;
}

/* --- the sticky table of contents 959:66581 ------------------------------ */
.tr-toc {
  position: sticky;
  top: var(--tr-sticky-top);
  /* The rail is 1317 tall against a 19,210 tall content column, so it has to
     stay pinned. On a short viewport the list would otherwise run off the
     bottom and become unreachable, hence its own scroller. */
  max-height: calc(100vh - (var(--tr-sticky-top) * 2));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  background: var(--tr-card);
  border-radius: 24px;
  padding: 24px 16px 16px;
  display: flex; flex-direction: column; gap: 20px;
}
.tr-toc__title {
  margin: 0;
  font-size: 16px; line-height: 16px; letter-spacing: -.16px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-toc__list { list-style: none; margin: 0; padding: 0; }
.tr-toc__group {
  padding: 10px 0;
  font-size: 12px; line-height: 8px; letter-spacing: -.12px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
  opacity: .5;
}
.tr-toc__link {
  display: block;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 16px; line-height: 21px; letter-spacing: -.96px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--e-out),
              transform var(--t-instant) var(--e-out);
}
/* --- the active section expands, and only the active one ----------------
   Lucas, 4 Sep 2026: when you are reading a section its sub-items should be
   showing, animated, and once you are past it they should not.

   ANIMATED WITH grid-template-rows 0fr -> 1fr, which is the only way to
   transition to a height the content decides. THE CLIPPER MUST HAVE NO
   PADDING OF ITS OWN: a border box can never be shorter than its own padding,
   so padding here would floor the closed state at that height instead of 0 and
   every collapsed section would keep a visible sliver. The horizontal inset
   lives on .tr-toc__sub inside. Same trap as the /mcp capability rows.

   min-height: 0 on both boxes because a grid item's default min-height is auto,
   which refuses to shrink below its content and defeats the whole thing. */
.tr-toc__subwrap {
  display: grid;
  grid-template-rows: 0fr;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: grid-template-rows var(--t-base) var(--e-out),
              opacity var(--t-fast) var(--e-out);
}
.tr-toc__item--group.is-open > .tr-toc__subwrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
/* NO VERTICAL PADDING WHILE CLOSED. `min-height: 0` zeroes the CONTENT box, not
   the border box, so a 6px padding-top here kept every collapsed row 6px tall -
   seven faint slivers down the rail. Measured, not eyeballed. The 6px gap under
   the section title is applied only in the open state, so it animates in with
   the rest and contributes nothing when closed. */
.tr-toc__sub {
  list-style: none;
  margin: 0; padding: 0 16px;
  min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
}
.tr-toc__item--group.is-open > .tr-toc__subwrap > .tr-toc__sub { padding-top: 6px; }
.tr-toc__sublink {
  display: block;
  font-size: 12px; line-height: 16px; letter-spacing: -.12px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
  opacity: .65;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--e-out);
}
/* The item with children is drawn as a filled card (959:66588). */
/* THE GROUP CHROME FOLLOWS THE OPEN STATE. It used to be permanently on, which
   is why section 1 sat in a pale rounded box for the whole page while the
   section you were actually reading did not. padding-bottom is animated with
   it, or the plate keeps a 12px lip under a collapsed list. */
.tr-toc__item--group {
  border-radius: 16px;
  background: transparent;
  padding-bottom: 0;
  transition: background-color var(--t-fast) var(--e-out),
              padding-bottom var(--t-base) var(--e-out);
}
.tr-toc__item--group.is-open {
  background: var(--tr-pale);
  padding-bottom: 12px;
}
.tr-toc__item--group.is-open > .tr-toc__link {
  padding-bottom: 6px;
  font-weight: var(--w-semi);
  letter-spacing: -.16px;
}

/* Scroll-spy state. aria-current is the source of truth. */
.tr-toc__link[aria-current="true"],
.tr-toc__sublink[aria-current="true"] {
  background: var(--tr-pale);
  opacity: 1;
  font-weight: var(--w-semi);
}
.tr-toc__item--group.is-open > .tr-toc__link[aria-current="true"] { background: transparent; }

/* Someone who has asked for less motion gets the same states, instantly. */
@media (prefers-reduced-motion: reduce) {
  .tr-toc__subwrap, .tr-toc__item--group { transition: none; }
}

@media (hover: hover) and (pointer: fine) {
  .tr-toc__link:hover { background: rgba(13,13,13,.045); }
  .tr-toc__sublink:hover { opacity: 1; }
}
.tr-toc__link:active { transform: translateY(1px); }
.tr-toc__link:focus-visible,
.tr-toc__sublink:focus-visible {
  outline: 2px solid var(--tr-permit);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ==========================================================================
   3. Content column 959:66638
   ======================================================================= */
.tr-content { width: var(--tr-col); min-width: 0; }

/* --- "What's permitted" 959:66639 --------------------------------------- */
.tr-permitted { display: flex; flex-direction: column; gap: 30px; }
.tr-permitted__title {
  margin: 0;
  font-size: 24px; line-height: 36px; letter-spacing: -.24px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-permitted__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tr-pcard {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 24px;
  background: var(--tr-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .tr-pcard:hover { transform: translateY(-2px); }
}
.tr-pcard:active { transform: translateY(0); }
.tr-pcard:focus-visible { outline: 2px solid var(--tr-permit); outline-offset: 2px; }
.tr-pcard__top { display: flex; align-items: center; gap: 8px; position: relative; z-index: 2; }
.tr-pcard__label {
  font-size: 14px; line-height: 16.8px; letter-spacing: -.14px;
  font-weight: var(--w-medium);
  color: var(--tr-body-80);
}
.tr-pcard__value {
  position: relative; z-index: 2;
  font-size: 18px; line-height: 23.8px; letter-spacing: -.54px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
/* 959:66659 — the 100x100 watermark at 30% */
.tr-pcard__mark {
  position: absolute;
  top: 6px; right: 44px;
  width: 100px; height: 100px;
  opacity: .3;
  pointer-events: none;
  z-index: 1;
}
/* 959:66671 — the cross-reference chip */
.tr-pcard__ref {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  min-width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 43.75px;
  background: linear-gradient(73.7deg, rgba(5,63,59,.0711) 0%, rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  font-size: 14px; line-height: 14px; letter-spacing: -.84px;
  font-weight: var(--w-medium);
  color: #053F3B;
  opacity: .6;
  padding: 0 7px;
}

/* --- the round icon chip, used everywhere (30x30, r 43.75) -------------- */
.tr-ico {
  flex: none;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 43.75px;
  background: var(--tr-chip);
}
.tr-ico img { width: 16px; height: 16px; display: block; }

/* ==========================================================================
   4. Rule sections 959:66759 — 24 children, 60px apart
   ======================================================================= */
.tr-sections { display: flex; flex-direction: column; gap: 60px; margin-top: 60px; }
.tr-sec { display: flex; flex-direction: column; gap: 40px; }

.tr-sec__head { display: flex; align-items: center; gap: 10px; }
/* 959:66762 — the number chip */
.tr-sec__num {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px;
  padding: 8px 12px;
  border-radius: 57px;
  background: var(--tr-chip);
  -webkit-backdrop-filter: blur(8.35px);
  backdrop-filter: blur(8.35px);
  font-size: 16px; line-height: 16px; letter-spacing: -.96px;
  font-weight: var(--w-medium);
  color: #053F3B;
  opacity: .8;
}
.tr-sec__title {
  margin: 0;
  font-size: 32px; line-height: 35.2px; letter-spacing: -.32px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
}
.tr-sec__body { display: flex; flex-direction: column; gap: 24px; }
.tr-sub { display: flex; flex-direction: column; gap: 30px; }
.tr-sub__title,
.tr-sec h3 {
  margin: 0;
  font-size: 24px; line-height: 36px; letter-spacing: -.24px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
/* :not([class]) matters. Without it this rule out-specifies every component
   paragraph inside a section — .tr-note, .tr-dlm__title, .tr-dlm__sum — and
   repaints them all body-grey. */
.tr-sec p:not([class]) {
  margin: 0;
  font-size: 20px; line-height: 26.4px; letter-spacing: -.2px;
  font-weight: var(--w-regular);
  color: var(--tr-body);
}
/* The design draws list items as plain lines inside one text node, with no
   bullet and no indent. Reproduced as a real <ul> for screen readers, styled
   back to the drawn appearance. */
.tr-sec ul.tr-lines { list-style: none; margin: 0; padding: 0; }
.tr-sec ul.tr-lines > li {
  font-size: 20px; line-height: 26.4px; letter-spacing: -.2px;
  font-weight: var(--w-regular);
  color: var(--tr-body);
}
/* the 510-weight emphasis paragraph, e.g. 959:67121 */
.tr-note {
  margin: 0;
  font-size: 20px; line-height: 26.4px; letter-spacing: -.2px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
}

/* --- verdict callout, 959:66841 and friends ----------------------------- */
.tr-call {
  padding: 24px;
  border-radius: 32px;
  border: 2px solid currentColor;
  background: color-mix(in srgb, currentColor 5%, transparent);
  display: flex; flex-direction: column; gap: 16px;
}
.tr-call--permit { color: var(--tr-permit); }
.tr-call--deduct { color: var(--tr-deduct); }
.tr-call--breach { color: var(--tr-breach); }
.tr-call__label {
  margin: 0;
  font-size: 16px; line-height: 24px; letter-spacing: -.16px;
  font-weight: var(--w-semi);
  color: currentColor;
}
.tr-call p { margin: 0; color: var(--tr-body); }

/* ==========================================================================
   5. Figure panels — the 884x469 gradient plate with the glow group
   959:66770 baked in. One image, reused by every panel that draws it.
   ======================================================================= */
.tr-panel {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background-image: url('/assets/tr-panel-bg.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
}
.tr-panel--469 { height: 469px; }

/* the frosted plate that sits on the panel (959:66775, 959:66856) */
.tr-plate {
  position: relative;
  background: var(--tr-pale);
  border-radius: 32px;
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}
.tr-plate::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--tr-hair);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* the white stat tiles inside a plate */
.tr-tile {
  background: var(--tr-card);
  border-radius: 24px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.tr-tile__top { display: flex; align-items: center; gap: 8px; }
.tr-tile__label {
  font-size: 14px; line-height: 16.8px; letter-spacing: -.14px;
  font-weight: var(--w-medium);
  color: var(--tr-body-80);
}
.tr-tile__val {
  font-size: 20px; line-height: 20px; letter-spacing: -.4px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
/* the small percentage pill, 959:66820 */
.tr-pct {
  display: inline-flex; align-items: center;
  align-self: flex-start;
  padding: 4px 6px;
  border-radius: 57px;
  background: var(--tr-chip);
  -webkit-backdrop-filter: blur(8.35px);
  backdrop-filter: blur(8.35px);
  font-size: 12px; line-height: 12px; letter-spacing: -.72px;
  font-weight: var(--w-medium);
  color: #053F3B;
  opacity: .8;
}

/* ==========================================================================
   6. Section 1.1 — Daily Loss Monitor (959:66775, 420x360 on the plate)
   ======================================================================= */
.tr-dlm { width: 420px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.tr-dlm__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 12px;
}
.tr-dlm__title {
  margin: 0;
  font-size: 20px; line-height: 24px; letter-spacing: -.6px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-dlm__resets {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 57px;
  background: var(--tr-chip-lite), var(--tr-chip);
  font-size: 14px; line-height: 20px; letter-spacing: -.42px;
  font-weight: var(--w-semi);
  color: #001D21;
  white-space: nowrap;
}
.tr-dlm__grid { display: flex; flex-direction: column; gap: 4px; }
.tr-dlm__row { display: flex; gap: 4px; }
.tr-dlm__row > .tr-tile { flex: 1; min-width: 0; }
.tr-dlm__floor {
  background: var(--tr-card);
  border-radius: 25px;
  padding: 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tr-dlm__floorval {
  font-size: 36px; line-height: 36px; letter-spacing: -.72px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-dlm__sum {
  border-radius: 16px;
  padding: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(98,156,150,.15) 0%, rgba(88,147,142,0) 100%);
  font-size: 14px; line-height: 20px; letter-spacing: -.42px;
  font-weight: var(--w-semi);
  color: #001D21;
  text-align: center;
}

/* ==========================================================================
   7. Section 1.2 — the three drawdown-type cards (959:66855)
   ======================================================================= */
.tr-ddrow { display: flex; align-items: center; gap: 14px; }
.tr-ddcard {
  width: 229px;
  padding: 12px 12px 16px;
  border-radius: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-ddcard__inner {
  background: var(--tr-card);
  border-radius: 24px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 30px;
}
.tr-ddcard__chart { width: 173px; height: 117.6px; display: block; }
.tr-ddcard__meta { display: flex; flex-direction: column; gap: 6px; }
.tr-ddcard__name {
  font-size: 18px; line-height: 23.8px; letter-spacing: -.54px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-ddcard__pill {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 57px;
  background: linear-gradient(359deg, rgba(5,63,59,.09) 0%, rgba(5,63,59,.0711) 59.83%, rgba(255,255,255,.09) 100%);
  -webkit-backdrop-filter: blur(8.35px);
  backdrop-filter: blur(8.35px);
  font-size: 14px; line-height: 14px; letter-spacing: -.84px;
  font-weight: var(--w-semi);
  color: #053F3B;
  white-space: nowrap;
}
.tr-ddcard__pill img { width: 20px; height: 20px; }
.tr-ddcard__list {
  list-style: none; margin: 0; padding: 0 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.tr-ddcard__list li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; line-height: 18.5px; letter-spacing: -.42px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
  opacity: .7;
}
.tr-ddcard__list li::before {
  content: ''; flex: none;
  width: 12px; height: 8px;
  border-bottom: 2px solid var(--tr-ink);
  border-left: 2px solid var(--tr-ink);
  transform: translateY(-2px);
}

/* ==========================================================================
   8. Generic figure furniture reused by sections 2, 3, 16, 18
   ======================================================================= */
.tr-statrow { display: flex; gap: 4px; width: 100%; }
.tr-stat {
  background: var(--tr-card);
  border-radius: 24px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 18px;
  flex: 1; min-width: 0;
}
.tr-stat__big {
  font-size: 20px; line-height: 20px; letter-spacing: -.4px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-stat__xl {
  font-size: 24px; line-height: 24px; letter-spacing: -.48px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}

/* the flow rail in section 3 */
.tr-flow { display: flex; flex-direction: column; gap: 10px; }
.tr-flow__step {
  background: var(--tr-card);
  border-radius: 16px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tr-flow__name {
  font-size: 14px; line-height: 18px; letter-spacing: -.42px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-flow__line {
  font-size: 12px; line-height: 16px; letter-spacing: -.12px;
  font-weight: var(--w-medium);
  color: var(--tr-body-80);
}
.tr-flow__bang {
  flex: none;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: #D9D9D9;
  font-size: 14px; font-weight: var(--w-medium);
  color: var(--tr-ink);
}
.tr-flow__row { display: flex; align-items: flex-start; gap: 8px; }

/* the big stat block, 959:67084 "68%" */
.tr-hero-stat { display: flex; flex-direction: column; gap: 8px; }
.tr-hero-stat__n {
  font-size: 100px; line-height: 100px; letter-spacing: -6px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
}
.tr-hero-stat__c {
  font-size: 14px; line-height: 18px; letter-spacing: -.42px;
  font-weight: var(--w-semi);
  color: var(--tr-body-80);
}
.tr-figcols { display: flex; gap: 16px; align-items: stretch; width: 100%; }

/* ==========================================================================
   9. Section 22 — breach consequences table (959:67699)
   ======================================================================= */
.tr-tablewrap { border-radius: 24px; overflow: hidden; background: var(--tr-card); }
.tr-table { width: 100%; border-collapse: collapse; }
.tr-table th,
.tr-table td {
  text-align: left;
  padding: 16px 18px;
  font-size: 16px; line-height: 24px; letter-spacing: -.16px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
  vertical-align: top;
}
.tr-table thead th { background: var(--tr-pale); white-space: nowrap; }
.tr-table tbody td { color: var(--tr-body); font-weight: var(--w-medium); }
.tr-table tbody tr + tr th,
.tr-table tbody tr + tr td { border-top: 1px solid rgba(13,13,13,.07); }
.tr-table tbody th { font-weight: var(--w-semi); color: var(--tr-ink); }
.tr-tag {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 57px;
  font-size: 12px; line-height: 16px; letter-spacing: -.12px;
  font-weight: var(--w-semi);
  white-space: nowrap;
}
.tr-tag--breach  { color: var(--tr-breach); background: rgba(219,68,70,.08); }
.tr-tag--deduct  { color: var(--tr-deduct); background: rgba(200,177,0,.08); }
.tr-tag--warning { color: var(--tr-permit); background: rgba(51,99,95,.08); }

/* ==========================================================================
   10. Section 18 — payout schedule + receipt
   ======================================================================= */
.tr-sched { display: flex; flex-direction: column; gap: 18px; width: 100%; }
.tr-sched__label {
  font-size: 14px; line-height: 18px; letter-spacing: -.14px;
  font-weight: var(--w-medium);
  color: var(--tr-body-80);
}
.tr-sched__track { display: flex; align-items: stretch; }
.tr-sched__node {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 0;
  position: relative;
  text-align: center;
}
.tr-sched__node + .tr-sched__node::before {
  content: ''; position: absolute;
  left: -50%; right: 50%; top: 6px;
  border-top: 2px dashed rgba(13,13,13,.18);
}
.tr-sched__n {
  font-size: 14px; line-height: 18px; letter-spacing: -.14px;
  font-weight: var(--w-medium);
  color: var(--tr-ink);
}
.tr-sched__d {
  font-size: 12px; line-height: 16px; letter-spacing: -.12px;
  font-weight: var(--w-medium);
  color: var(--tr-body);
}
.tr-guar {
  border-radius: 16px; padding: 16px;
  background: linear-gradient(180deg, rgba(98,156,150,.15) 0%, rgba(88,147,142,0) 100%);
  display: flex; flex-direction: column; gap: 6px;
}
.tr-guar__t {
  font-size: 18px; line-height: 24px; letter-spacing: -.54px;
  font-weight: var(--w-semi);
  color: #001D21;
}
.tr-guar__s {
  font-size: 14px; line-height: 20px; letter-spacing: -.14px;
  font-weight: var(--w-regular);
  color: #001D21;
}

.tr-receipt {
  background: var(--tr-card);
  border-radius: 20px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  width: 100%;
}
.tr-receipt__t {
  font-size: 18px; line-height: 24px; letter-spacing: -.54px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-receipt__grp {
  font-size: 10.8px; line-height: 14px; letter-spacing: -.11px;
  font-weight: var(--w-semi);
  color: var(--tr-body);
}
.tr-receipt__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(13,13,13,.06);
}
.tr-receipt__k {
  font-size: 12.6px; line-height: 18px; letter-spacing: -.13px;
  font-weight: var(--w-medium);
  color: var(--tr-body);
}
.tr-receipt__k small { display: inline-block; margin-left: 6px; font-size: 10.8px; opacity: .7; }
.tr-receipt__v {
  font-size: 14.4px; line-height: 20px; letter-spacing: -.14px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
  white-space: nowrap;
}
.tr-receipt__foot {
  border-radius: 12px; padding: 14px;
  background: var(--tr-pale);
  display: flex; flex-direction: column; gap: 6px;
}
.tr-receipt__ft {
  font-size: 16.2px; line-height: 22px; letter-spacing: -.49px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-receipt__fs {
  font-size: 12.6px; line-height: 18px; letter-spacing: -.13px;
  font-weight: var(--w-regular);
  color: var(--tr-body);
}

/* ==========================================================================
   11. Section 24 — changelog. Markup is deliberately repetitive so a new
   entry is a copy of <li class="tr-log__entry"> and nothing else moves.
   ======================================================================= */
.tr-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.tr-log__entry {
  background: var(--tr-card);
  border-radius: 24px;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-log__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-log__date {
  font-size: 14px; line-height: 20px; letter-spacing: -.42px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}
.tr-log__chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 57px;
  background: var(--tr-pale);
  font-size: 14px; line-height: 18px; letter-spacing: -.14px;
  font-weight: var(--w-medium);
  color: var(--tr-permit);
}
.tr-log__title {
  margin: 0;
  font-size: 24px; line-height: 36px; letter-spacing: -.24px;
  font-weight: var(--w-semi);
  color: var(--tr-ink);
}

/* ==========================================================================
   12. Mobile — frame 959:68003 (393x30441).
   The 290 rail cannot survive at 393 wide. The mobile frame does NOT turn it
   into a dropdown or an accordion: 959:68059 is the same Contents card, 345
   wide and 1254 tall, sitting statically at the top of the body above the
   first section. That is what is built here. It is not sticky on mobile.
   ======================================================================= */
@media (max-width: 1259px) {
  .tr { --tr-stage: min(1206px, calc(100vw - 48px)); }
  .tr-body { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .tr-content { width: 100%; }
  .tr-toc { position: static; max-height: none; overflow: visible; }
  .tr-intro__head, .tr-intro__titlewrap { width: 100%; }
  .tr-verdicts { width: 100%; }
  .tr-verdict { width: auto; flex: 1; }
  .tr-dlm { width: 100%; max-width: 420px; }
}

@media (max-width: 767px) {
  .tr { --tr-stage: 345px; --tr-anchor-top: 88px; }
  .tr-intro { padding-top: 76px; gap: 40px; }
  .tr-intro__head { gap: 24px; }
  .tr-intro__title { font-size: 40px; line-height: 40px; letter-spacing: -1.2px; }
  .tr-intro__meta { font-size: 16px; line-height: 24px; }
  .tr__overlay { height: 1428px; }

  .tr-verdicts { flex-direction: column; gap: 16px; }
  .tr-verdict { width: 100%; flex: none; }

  .tr-body { margin-top: 60px; }

  .tr-sections { gap: 48px; margin-top: 48px; }
  .tr-sec { gap: 28px; }
  .tr-sec__title { font-size: 24px; line-height: 28px; }
  .tr-sec p, .tr-sec ul.tr-lines > li, .tr-note,
  .tr-verdict__what, .tr-verdict__eg { font-size: 16px; line-height: 22px; }
  .tr-sub__title, .tr-sec h3, .tr-permitted__title { font-size: 18px; line-height: 26px; }
  .tr-call { padding: 20px; border-radius: 24px; }

  .tr-permitted__grid { grid-template-columns: 1fr; }
  .tr-pcard__mark { display: none; }

  .tr-panel { height: auto; padding: 16px 10px; border-radius: 16px; background-size: cover; }
  .tr-dlm { width: 100%; padding: 8px; }
  .tr-dlm__row { flex-direction: column; }
  .tr-dlm__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tr-ddrow { flex-direction: column; align-items: stretch; }
  .tr-ddcard { width: 100%; }
  .tr-ddcard__chart { width: 100%; height: auto; }
  .tr-figcols { flex-direction: column; }
  .tr-hero-stat__n { font-size: 64px; line-height: 64px; letter-spacing: -3px; }

  .tr-sched__track { flex-direction: column; gap: 10px; }
  .tr-sched__node { text-align: left; padding: 0; }
  .tr-sched__node + .tr-sched__node::before { display: none; }

  /* The consequences table cannot stay a table at 345 wide without horizontal
     overflow, so each row becomes a stacked card carrying its own labels. */
  .tr-tablewrap { background: transparent; border-radius: 0; }
  .tr-table, .tr-table tbody, .tr-table tr, .tr-table td, .tr-table th { display: block; width: auto; }
  .tr-table thead { display: none; }
  .tr-table tbody tr {
    background: var(--tr-card);
    border-radius: 20px;
    padding: 16px;
    margin-bottom: 12px;
  }
  .tr-table tbody tr + tr th,
  .tr-table tbody tr + tr td { border-top: 0; }
  .tr-table tbody td { padding: 6px 0 0; font-size: 14px; line-height: 20px; }
  .tr-table tbody th { padding: 0 0 8px; font-size: 16px; }
  .tr-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px; letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(13,13,13,.45);
    font-weight: var(--w-semi);
  }
}

/* ==========================================================================
   13. The half-filled meter in section 2 (959:66948) — two 180x28 bars,
   the left one filled with the teal gradient, the right one the empty track.
   ======================================================================= */
.tr-meter {
  display: block;
  width: 100%; height: 28px;
  border-radius: 8px;
  background: rgba(118,151,148,.1);
  overflow: hidden;
}
.tr-meter__fill {
  display: block;
  width: 50%; height: 100%;
  border-radius: 8px;
  background: linear-gradient(172.8deg, #0B4541 0%, #5D9794 46.63%, #0B4541 100%);
}

/* ==========================================================================
   14. Closing band 959:67877 — the CTA half only (890 of the 1764; the
   remaining 874 is the shared footer, appended separately).
   ======================================================================= */
/* In the Figma file the shared footer is a CHILD of the closing band
   (959:67894 sits inside 959:67877), so the band's dark gradient runs behind
   it and the footer's 12px inset shows dark. Appended as a sibling instead,
   the footer became a 1488px dark card marooned on the light #F0F2F5 page
   with 200px of pale grey down each side. The gradient lives on this wrapper
   and spans the whole 1764, exactly as the band does. */
.tr-close {
  background: linear-gradient(180deg, #303030 0%, #0F0F0F 76.3%);
}
.trc {
  position: relative;
  isolation: isolate;
  min-height: 890px;
  display: grid;
  place-items: center;
  padding: 0 40px;
  overflow: hidden;
  background: transparent;
}
/* 959:67880 — the glass streak stack, approximated with two soft washes. */
.trc__streaks {
  position: absolute; inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(255,255,255,0) 22%, rgba(255,255,255,.055) 34%, rgba(255,255,255,0) 46%),
    linear-gradient(96deg,  rgba(255,255,255,0) 52%, rgba(255,255,255,.035) 62%, rgba(255,255,255,0) 72%);
  filter: blur(38px);
}
/* 959:67978 — the Atlas mark, masked with a white top-down gradient. */
.trc__mark {
  position: absolute;
  top: 45px; left: 50%;
  margin-left: -269px;
  width: 538px; height: 470px;
  z-index: 1;
  pointer-events: none;
}
.trc__inner {
  position: relative;
  z-index: 2;
  width: 558px;
  max-width: 100%;
  margin-top: 422px;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  text-align: center;
}
/* 959:67982 */
.trc__pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: 57px;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(8.35px);
  backdrop-filter: blur(8.35px);
  font-size: 14px; line-height: 21px; letter-spacing: -.42px;
  font-weight: var(--w-medium);
  color: #FFFFFF;
}
/* 959:67989 — SF Pro 510 80/80 ls -2.4, gradient fill #3F4547 -> #EDEDED */
.trc__title {
  margin: 0;
  width: 899px; max-width: 100vw;
  font-family: var(--font-display);
  font-size: 80px; line-height: 80px; letter-spacing: -2.4px;
  font-weight: var(--w-medium);
  background: linear-gradient(162.2deg, #3F4547 0%, #EDEDED 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* ink guard. background-clip:text paints the gradient only inside this
     element's border box, so the descender that hangs below the last line
     box gets no paint at all and is sliced off flat. Push the paint box
     down and take the same space straight back, so the glyphs are whole
     and nothing below this element moves. */
  padding-bottom: .2em; margin-bottom: -.2em;
}
.trc__sub {
  margin: 0;
  font-size: 16px; line-height: 21.1px; letter-spacing: -.32px;
  font-weight: var(--w-medium);
  color: rgba(255,255,255,.8);
}
.trc__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.trc__links li { display: flex; align-items: center; gap: 8px; }
.trc__links li::before {
  content: ''; flex: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--af-teal);
}
.trc__links a,
.trc__links span {
  font-size: 14px; line-height: 14px;
  font-weight: var(--w-medium);
  color: #FFFFFF;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .trc__links a:hover { opacity: .7; }
}
.trc__links a:focus-visible { outline: 2px solid var(--af-teal); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 1259px) {
  .trc__title { width: 100%; font-size: 56px; line-height: 58px; letter-spacing: -1.7px; }
  .trc__inner { margin-top: 380px; }
}
@media (max-width: 767px) {
  .trc { min-height: 0; padding: 0 24px 64px; }
  .trc__mark { top: 10px; width: 374px; height: 327px; margin-left: -187px; }
  .trc__inner { width: 100%; margin-top: 300px; gap: 28px; }
  .trc__title { font-size: 34px; line-height: 38px; letter-spacing: -1px; }
  .trc__links { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   15. Skip link. Not in the Figma file, but this page is 22,000px of legal
   text with a 24-item nav in front of it — reaching the rules with a
   keyboard should not take 30 tab stops.
   ======================================================================= */
.afx-skip {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--af-lime);
  color: var(--af-ink-teal);
  font-size: 14px; font-weight: var(--w-semi);
  text-decoration: none;
  transition: top var(--t-fast) var(--e-out);
}
.afx-skip:focus-visible { top: 16px; outline: 2px solid var(--af-ink-teal); outline-offset: 2px; }

/* ==========================================================================
   16. Text-node fidelity.

   In the Figma file a lead-in line and the list under it ("Measured on all of
   the following:" and its three lines) are ONE text node with a continuous
   26.4px rhythm and no gap. Split into a <p> and a <ul> for screen readers,
   they would inherit the parent's 24/30px gap and float apart. Pull them back
   together so the list hugs its lead-in exactly as drawn.
   ======================================================================= */
.tr-sec__body > p + ul.tr-lines { margin-top: -24px; }
.tr-sub > p + ul.tr-lines { margin-top: -30px; }
/* the same, for two paragraphs that were one text node */
.tr-copy { display: flex; flex-direction: column; gap: 0; }