@charset "UTF-8";
/* ────────────────────────────────────────────────────────────────
   Gatesites - gatesites.noahlot.com

   Two colours and no more: white ground, black type, one grey metal
   blue that does every job an accent has to do (rules, the record
   block, the button, the one mark of emphasis). Tints of that blue
   are still that blue; nothing else is introduced.

   Deliberately plain. The reader is a legal team, so the page is
   built to look like a document they would already trust: hairline
   rules instead of shadows, one type superfamily, and motion slow
   enough that nobody notices it happened.
   ──────────────────────────────────────────────────────────────── */

:root {
  --white:  #FFFFFF;
  --black:  #2B2150;

  --steel:      #6C4CF0;   /* the accent, on the primary action */
  --steel-deep: #563AD1;   /* pressed, same hue */
  --steel-05:   #EEE9FE;   /* accent wash */
  --steel-12:   transparent; /* Fluffy separates by space, never a line */
  --steel-30:   transparent;

  --page:   #F3F0FC;   /* the soft ground */
  --page-2: #E7E0F8;   /* its deeper step */
  --card:   #FFFFFF;

  --grey:   #2B2150;   /* ink, the ground's own hue taken deep */
  --grey-2: #5F5885;   /* meta, 6.4:1 on white */

  --r-pill: 999px;
  --r-card: 26px;

  --wrap: 1080px;
  --pad:  clamp(20px, 5vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.62;
  overflow-x: clip;
}

a { color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--steel); color: var(--white);
  padding: 12px 18px; z-index: 90;
  font-family: "Nunito", system-ui, sans-serif; font-size: 14px;
}
.skip:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--steel);
  outline-offset: 3px;
}

/* The one mark of emphasis on the site: a rule under the phrase, in
   the accent, drawn once on load. No fill, no highlighter. */
.hl { font-style: normal; position: relative; }
.hl > span { position: relative; }
.hl::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.12em;
  height: 3px;
  background: var(--steel);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: rule 1.1s cubic-bezier(.32,.72,.24,1) .5s both;
}
@keyframes rule { to { transform: scaleX(1); } }

/* ── bar ────────────────────────────────────────────────────── */
.bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--steel-12);
}
.mark { text-decoration: none; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.mark-n {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: .10em;
}
/* The full name reads as the expansion of the mark, so it sits beside it in
   one left lockup rather than off on its own at the far end of the bar. */
.mark-x {
  font-family: "Nunito", system-ui, sans-serif; font-size: 14px;
  letter-spacing: .04em; color: var(--grey-2);
}

/* ── bar nav ────────────────────────────────────────────────────
   The two projects, in the bar. With only two of them this is the whole
   navigation; the page you are on stays present but stops offering
   itself as somewhere to go. */
.nav { display: flex; flex-wrap: wrap; gap: 10px 34px; }
.nav a {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; letter-spacing: .04em;
  text-decoration: none;
  color: var(--grey-2);
  transition: color .25s ease;
}
.nav a:hover { color: var(--steel); }
/* The page you are on is still announced to a screen reader, it just stops
   behaving like somewhere to go. */
.nav a[aria-current] { cursor: default; }
.nav a[aria-current]:hover { color: var(--grey-2); }

/* Whichever section leads the page carries no rule of its own: the bar
   already draws one directly above it, and two hairlines a pixel apart
   read as a mistake. Written against :first-child rather than a class so
   reordering the sections cannot leave it stranded on the wrong one. */
main > section:first-child {
  border-top: 0;
  padding-top: clamp(44px, 8vw, 88px);
  /* Centring the prose against a taller card is right mid-page but wrong at
     the very top, where it opens the page with an empty upper left corner. */
  align-items: start;
}

/* ── hero ───────────────────────────────────────────────────── */
.hero {
  border-top: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  padding: clamp(44px, 8vw, 88px) var(--pad) clamp(48px, 7vw, 80px);
  max-width: var(--wrap);
  margin: 0 auto;
}

h1 {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(29px, 3.7vw, 43px);
  line-height: 1.17;
  letter-spacing: -.016em;
  text-wrap: balance;
}

.lede {
  margin: 24px 0 0;
  max-width: 32em;
  color: var(--grey);
  font-size: 18px;
}

.hero-do { margin: 30px 0 0; }

.btn {
  display: inline-block;
  background: var(--steel);
  color: var(--white);
  text-decoration: none;
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: .01em;
  padding: 14px 26px;
  border: 1px solid var(--steel);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.btn:hover  { background: var(--steel-deep); border-color: var(--steel-deep); }
.btn:active { background: var(--steel-deep); }
.btn-wide   { width: 100%; text-align: center; }

/* ── the record block ───────────────────────────────────────── */
.sheet {
  margin: 0;
  background: var(--steel-05);
  border: 1px solid var(--steel-30);
}
.sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--steel-30);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500;
  color: var(--steel);
}
.sheet-count { color: var(--grey-2); letter-spacing: .08em; }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 6.5em 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 13px 20px;
  border-bottom: 1px solid var(--steel-12);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px;
  animation: rowin .8s ease both;
  animation-delay: calc(.25s + var(--i) * .13s);
}
.row:last-child { border-bottom: 0; }
@keyframes rowin {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.row-k { color: var(--black); }
.row-d { color: var(--grey-2); }
.row-v { color: var(--grey-2); text-align: right; }

/* A match is marked by weight and a rule, not by colour fill. */
.is-hit { background: var(--steel-05); }
.is-hit .row-k { font-weight: 600; }
.is-hit .row-v {
  color: var(--steel);
  font-weight: 600;
  border-bottom: 2px solid var(--steel);
  padding-bottom: 1px;
}

.sheet-foot {
  margin: 0;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--steel-30);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.6;
  color: var(--grey-2);
}

/* ── exhibits ───────────────────────────────────────────────── */
.exhibits {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.ex {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(26px, 4vw, 48px);
}
.ex > li { position: relative; padding-top: 26px; border-top: 1px solid var(--steel-30); }
/* Sits astride the rule, with the ground painted behind it so the rule
   appears to break for the number rather than run under it. */
.ex-n {
  position: absolute; top: -10px; left: 0;
  background: var(--white);
  padding-right: 10px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .1em;
  color: var(--grey-2);
}
.ex h2 {
  margin: 0 0 8px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 19px; letter-spacing: -.006em;
}
.ex p { margin: 0; color: var(--grey); font-size: 16.5px; }

/* ── why ────────────────────────────────────────────────────── */
.why {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
}
.why-p {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.45;
  letter-spacing: -.004em;
  text-wrap: pretty;
}
.why-p em { font-style: italic; }
.why-sig {
  margin: 20px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--grey-2);
}

/* ── join ───────────────────────────────────────────────────── */
.join {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 370px);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.join-say h1 {
  margin: 0 0 16px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: -.012em;
  line-height: 1.2;
}
.join-say p { margin: 0; color: var(--grey); max-width: 34em; }
.join-say p + p { margin-top: 16px; }
.join-say p a {
  color: var(--black);
  text-decoration-color: var(--steel-30);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .25s ease;
}
.join-say p a:hover { text-decoration-color: var(--steel); }

.card {
  background: var(--white);
  border: 1px solid var(--steel-30);
  padding: clamp(24px, 3vw, 32px);
}
.card-price {
  margin: 0 0 18px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 46px; line-height: 1; letter-spacing: -.03em;
  color: var(--black);
}
.card-price .cur { font-size: .55em; vertical-align: .42em; margin-right: .04em; }
.card-price .per {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 13px; font-weight: 400; letter-spacing: .06em;
  margin-left: 9px;
  color: var(--grey-2);
}
.card-facts {
  list-style: none; margin: 0 0 22px; padding: 0;
  border-top: 1px solid var(--steel-12);
}
.card-facts li {
  padding: 11px 0 11px 20px;
  border-bottom: 1px solid var(--steel-12);
  font-size: 15.5px; line-height: 1.45;
  color: var(--grey);
  position: relative;
}
.card-facts li::before {
  content: "";
  position: absolute; left: 0; top: 18px;
  width: 9px; height: 1px; background: var(--steel);
}
.card-do { margin: 0; }

/* ── the amount chooser ─────────────────────────────────────────
   Native radios, hidden but still focusable and still what posts, with
   the visible chip drawn by the sibling span. Nothing here is required
   for the form to work: the preset marked `checked` in the markup is
   what a scripting-free browser sends. */
.amounts {
  border: 0;
  margin: 16px 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px;
}
.amounts label { position: relative; cursor: pointer; }
.amounts label input {
  position: absolute; inset: 0;
  opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.amounts label span {
  display: block;
  padding: 7px 13px;
  border: 1px solid var(--steel-30);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; letter-spacing: .04em;
  color: var(--steel);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.amounts label:hover span { border-color: var(--steel); }
.amounts label input:checked + span {
  background: var(--steel); border-color: var(--steel); color: var(--white);
}
.amounts label input:focus-visible + span {
  outline: 2px solid var(--steel); outline-offset: 2px;
}

/* [hidden] is only `display: none` at UA-stylesheet weight, so any display
   declared here beats it and the field shows through. Restate it. */
.amount-other[hidden] { display: none; }
.amount-other {
  display: inline-flex; align-items: center; gap: 3px;
  border: 1px solid var(--steel-30);
  padding: 0 11px;
}
.amount-other:focus-within { border-color: var(--steel); }
.amount-cur {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; color: var(--grey-2);
}
.amount-other input {
  width: 4.2em;
  border: 0; background: transparent;
  padding: 7px 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; color: var(--black);
}
.amount-other input:focus { outline: none; }

/* Present to a screen reader, absent to everyone else. The chooser needs a
   group label; the page does not need a caption above four obvious chips. */
.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── limits ─────────────────────────────────────────────────── */
.limits {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.lim {
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  max-width: 860px;
  display: grid;
  gap: clamp(20px, 3vw, 36px);
}
.lim > div { border-left: 1px solid var(--steel-30); padding-left: 18px; }
.lim dt {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 16.5px;
  margin-bottom: 3px;
}
.lim dd { margin: 0; color: var(--grey); font-size: 16px; }

/* ── foot ───────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--steel-12);
  padding: clamp(30px, 4vw, 48px) var(--pad) clamp(38px, 5vw, 56px);
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 30px;
}
.foot-mark {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: .10em;
}
.foot-l {
  margin: 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px; letter-spacing: .03em;
  color: var(--grey-2);
}
.foot-l a { color: var(--steel); text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* The way home from every page, including the ones on other subdomains that
   carry no bar of their own. */
.foot-mark a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.foot-mark a:hover { color: var(--steel); }

/* ── how ────────────────────────────────────────────────────────
   The three columns joined into one, cut back to the length that reads
   at the same measure as the intro paragraph. The section divider above
   is the only rule; the blocks' own one went with them. */
.how {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad) clamp(44px, 7vw, 80px);
  border-top: 1px solid var(--steel-12);
}
/* Body size and body leading, like the intro paragraph, but across the
   full container width rather than the intro's 34em. The text is written
   long enough to fill it. */
.how p {
  margin: 0;
  color: var(--grey);
}

/* ── landing ────────────────────────────────────────────────── */
.intro {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(44px, 8vw, 88px) var(--pad) clamp(26px, 3.5vw, 40px);
}
.picks {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(44px, 7vw, 80px);
}
.pick {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(18px, 2.5vw, 28px);
}
.pick > li { display: flex; }
.pick a {
  display: flex; flex-direction: column;
  width: 100%;
  text-decoration: none;
  border: 1px solid var(--steel-30);
  padding: clamp(22px, 3vw, 30px);
  transition: border-color .25s ease, background-color .25s ease;
}
.pick a:hover { border-color: var(--steel); background: var(--steel-05); }
.pick-n {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 17px; letter-spacing: .08em; color: var(--grey-2);
}
.pick h2 {
  margin: 12px 0 8px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: -.012em;
}
.pick p { margin: 0 0 22px; color: var(--grey); font-size: 16.5px; }
.pick-go {
  margin-top: auto;
  align-self: start;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12.5px; letter-spacing: .06em;
  color: var(--steel);
  border-bottom: 1px solid var(--steel-30);
  padding-bottom: 2px;
  transition: border-color .25s ease;
}
.pick a:hover .pick-go { border-color: var(--steel); }

/* A project that exists but has not opened its doors. The card keeps its
   place in the numbering and goes grey all over: hairline border, muted
   type, no hover, nothing to click. The one live word is "Coming soon". */
.pick-soon {
  display: flex; flex-direction: column;
  width: 100%;
  border: 1px dashed var(--steel-30);
  padding: clamp(22px, 3vw, 30px);
  color: var(--grey-2);
}
.pick-soon h2 { color: var(--grey-2); margin: 12px 0 8px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 21px; letter-spacing: -.012em; }
.pick-soon p { color: var(--grey-2); margin: 0 0 22px; font-size: 16.5px; }
.pick-soon .pick-go {
  color: var(--grey-2);
  border-bottom-color: var(--steel-12);
}

/* ── thanks page ────────────────────────────────────────────── */
.done {
  max-width: 680px;
  margin: 0 auto;
  padding: clamp(52px, 10vw, 112px) var(--pad) clamp(44px, 7vw, 88px);
}
.done h1 { font-size: clamp(30px, 4.4vw, 44px); }
.done .lede { margin-top: 22px; }
.done-next {
  list-style: none; margin: 34px 0 0; padding: 0;
  border-top: 1px solid var(--steel-30);
}
.done-next li {
  padding: 16px 0;
  border-bottom: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: 3.4em 1fr;
  gap: 14px;
  align-items: baseline;
  color: var(--grey);
  font-size: 16.5px;
}
.done-next b {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; font-weight: 500; letter-spacing: .1em;
  color: var(--steel);
}
.done-back { margin-top: 34px; }

/* ── narrow ─────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .hero, .join { grid-template-columns: minmax(0, 1fr); }
  .join .card { max-width: 440px; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .row { grid-template-columns: 5.6em 1fr; font-size: 12.5px; padding: 12px 15px; }
  .row-v { grid-column: 1 / -1; text-align: left; justify-self: start; }
  .is-hit .row-v { display: inline-block; }
  .sheet-head, .sheet-foot { padding-left: 15px; padding-right: 15px; }
  .card-price { font-size: 40px; }
}

/* ── reduced motion ─────────────────────────────────────────────
   Killing animations alone would leave the rule at scaleX(0) and
   every record row at opacity 0, so the resting state is restored
   explicitly rather than assumed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .hl::after { transform: scaleX(1); }
  .row { opacity: 1; }
}

/* ── privacy ────────────────────────────────────────────────────
   A document, so a single measure and the same definition-list shape
   the rest of the site already uses for "what this is not". */
.priv {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 80px) var(--pad) clamp(48px, 8vw, 90px);
}
.priv h1 { margin: 0 0 20px; }
.priv-lede { margin: 0 0 8px; color: var(--grey); max-width: 34em; }
.priv h2 {
  margin: clamp(34px, 5vw, 52px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--steel-30);
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 20px; letter-spacing: -.012em;
}
.priv-l { margin: 18px 0 0; }
.priv-l > div { padding: 14px 0; border-bottom: 1px solid var(--steel-12); }
.priv-l dt {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 16.5px; margin-bottom: 4px;
}
.priv-l dd { margin: 0; color: var(--grey); font-size: 16.5px; }
.priv-p { margin: 16px 0 0; color: var(--grey); }
.priv-date {
  margin: clamp(34px, 5vw, 52px) 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px; color: var(--grey-2);
}

/* ────────────────────────────────────────────────────────────────
   gatesites.noahlot.com additions

   Same two colours, same hairlines. The only new idea is the mock:
   a small, honest reproduction of the extension's own block page,
   used as the hero image instead of an invented illustration. It is
   built from the same rules as everything else on the page, so it
   costs nothing to load and cannot go stale against a screenshot.
   ──────────────────────────────────────────────────────────────── */

/* ── hero ───────────────────────────────────────────────────── */
.gk-hero {
  border-top: 1px solid var(--steel-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
  padding: clamp(44px, 8vw, 88px) var(--pad) clamp(48px, 7vw, 80px);
  max-width: var(--wrap);
  margin: 0 auto;
}
.gk-hero .lede { max-width: 30em; }
.gk-do { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.gk-do .btn { padding: 15px 28px; }
.gk-sub {
  margin: 14px 0 0;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px; letter-spacing: .04em; color: var(--grey-2);
}

/* ── the mock block page ────────────────────────────────────── */
.mock { border: 1px solid var(--steel-30); background: var(--white); }
.mock-bar {
  display: flex; align-items: baseline; gap: 9px;
  padding: 11px 16px; border-bottom: 1px solid var(--steel-12);
}
.mock-n { font-family: "Nunito", system-ui, sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .1em; }
.mock-x { font-family: "Nunito", system-ui, sans-serif; font-size: 9.5px; color: var(--grey-2); letter-spacing: .04em; }
.mock-body { padding: 26px 20px 22px; }
.mock-h {
  margin: 0; font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.02em; line-height: 1.12;
}
.mock-rule { height: 3px; width: 62px; background: var(--steel); margin: 13px 0 0; }
.mock-p { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--grey); }
.mock-facts { margin: 20px 0 0; border-top: 1px solid var(--steel-30); }
.mock-facts > div {
  display: grid; grid-template-columns: 7em 1fr; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--steel-12);
  font-family: "Nunito", system-ui, sans-serif; font-size: 10.5px;
}
.mock-facts dt { color: var(--grey-2); letter-spacing: .07em; text-transform: uppercase; font-size: 9px; padding-top: 1px; }
.mock-facts dd { margin: 0; overflow-wrap: anywhere; }
.mock-acts { margin: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mock-btn {
  font-family: "Nunito", system-ui, sans-serif; font-size: 11.5px; font-weight: 500;
  padding: 7px 14px; border: 1px solid var(--steel);
}
.mock-btn-solid { background: var(--steel); color: var(--white); }
.mock-btn-ghost { color: var(--steel); }
.mock-wait {
  margin: 18px 0 0; padding: 14px 16px;
  border: 1px solid var(--steel-30); background: var(--steel-05);
}
.mock-wait b {
  display: block; font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 30px; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.mock-wait span {
  display: block; margin-top: 5px;
  font-family: "Nunito", system-ui, sans-serif; font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--grey-2);
}

/* ── generic section ────────────────────────────────────────── */
.band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--pad);
  border-top: 1px solid var(--steel-12);
}
.band-narrow { max-width: 780px; }
.band > h2 {
  margin: 0 0 8px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(23px, 2.7vw, 30px); letter-spacing: -.014em; line-height: 1.2;
}
.band > p { margin: 0 0 26px; color: var(--grey); max-width: 36em; }
.band > p:last-child { margin-bottom: 0; }
.band-n {
  display: block; margin-bottom: 14px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .12em; color: var(--grey-2);
}

/* ── numbered steps ─────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps > li {
  counter-increment: s;
  display: grid; grid-template-columns: 3.4em minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--steel-12);
}
.steps > li:first-child { border-top: 1px solid var(--steel-30); }
.steps > li::before {
  content: "0" counter(s);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px; letter-spacing: .1em; color: var(--steel);
  padding-top: 4px;
}
.steps h3 {
  margin: 0 0 5px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: 17.5px; letter-spacing: -.008em;
}
.steps p { margin: 0; color: var(--grey); font-size: 16px; }
.steps p + p { margin-top: 9px; }

/* ── feature table ──────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; margin: 0; }
.tbl caption {
  text-align: left; padding-bottom: 14px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2);
}
.tbl th, .tbl td {
  text-align: left; vertical-align: top;
  padding: 13px 14px 13px 0;
  border-bottom: 1px solid var(--steel-12);
  font-size: 15.5px;
}
.tbl thead th {
  border-bottom: 1px solid var(--steel-30);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; color: var(--steel);
  padding-bottom: 10px;
}
.tbl tbody th {
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  width: 34%; padding-right: 26px;
}
.tbl td { color: var(--grey); padding-right: 0; }
.tbl-wrap { overflow-x: auto; }
@media (max-width: 620px) {
  .tbl tbody th, .tbl td { display: block; width: auto; border-bottom: 0; padding: 0; }
  .tbl tbody th { padding-top: 15px; }
  .tbl tbody td { padding-bottom: 15px; border-bottom: 1px solid var(--steel-12); }
  .tbl thead { display: none; }
}

/* ── the download block ─────────────────────────────────────── */
.get {
  border: 1px solid var(--steel-30);
  padding: clamp(24px, 3.4vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
.get h2 {
  margin: 0 0 8px;
  font-family: "Nunito", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.014em; line-height: 1.2;
}
.get p { margin: 0; color: var(--grey); max-width: 34em; }
.get-meta {
  margin-top: 14px !important;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 11.5px; letter-spacing: .04em; color: var(--grey-2);
}
@media (max-width: 700px) { .get { grid-template-columns: 1fr; } }

/* ── code / keyboard paths ──────────────────────────────────── */
code, .path {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: .88em;
  background: var(--steel-05);
  border: 1px solid var(--steel-12);
  padding: 1px 6px;
  overflow-wrap: anywhere;
}

/* ── the honest limits list ─────────────────────────────────── */
.nots { list-style: none; margin: 0; padding: 0; }
.nots > li {
  padding: 16px 0 16px 22px;
  border-bottom: 1px solid var(--steel-12);
  position: relative;
  color: var(--grey);
  font-size: 16px;
}
.nots > li:first-child { border-top: 1px solid var(--steel-30); }
.nots > li::before {
  content: ""; position: absolute; left: 0; top: 26px;
  width: 11px; height: 1px; background: var(--steel);
}
.nots b { font-family: "Nunito", system-ui, sans-serif; font-weight: 600; color: var(--black); }

@media (max-width: 880px) {
  .gk-hero { grid-template-columns: minmax(0, 1fr); }
  .gk-hero .mock { max-width: 460px; }
}

/* ────────────────────────────────────────────────────────────────
   Fluffy overrides — gatesites.noahlot.com

   The site wears the same register as the extension it ships: one
   rounded family, a soft lilac ground, white blocks sitting on it,
   pills on the things you can press, and no rule anywhere. The two
   line tokens above resolve to nothing, so what remains here is
   giving the blocks that used to be defined by a border a ground of
   their own instead.
   ──────────────────────────────────────────────────────────────── */

body { background: var(--page); }

h1, h2, h3, .band > h2, .mock-h, .card-price, .stat b {
  font-weight: 800;
  letter-spacing: -.032em;
}
h1 { line-height: 1.08; }

/* the pills */
.btn {
  border-radius: var(--r-pill);
  border: 0;
  font-weight: 800;
  letter-spacing: -.01em;
  padding: 16px 30px;
  transition: background-color .2s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.gk-do .btn[style] {                 /* the secondary hero action */
  background: var(--card) !important;
  color: var(--steel) !important;
}
.gk-do .btn[style]:hover { background: var(--page-2) !important; }

/* white blocks on the tint, everywhere a border used to do the work */
.pick a, .pick-soon, .sheet, .card, .get, .mock, .panel,
.ex > li, .steps > li, .nots > li, .lim > div {
  background: var(--card);
  border: 0;
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 32px);
}
.pick a:hover { background: var(--page-2); }

.ex { gap: 14px; }
.ex > li { padding-top: 30px; }
.ex-n {
  position: static; display: inline-block;
  background: var(--steel-05); color: var(--steel);
  border-radius: var(--r-pill); padding: 5px 13px;
  font-weight: 800; font-size: 11.5px; letter-spacing: .05em;
  margin-bottom: 14px;
}
.ex h2 { font-size: 20px; }

.steps { display: grid; gap: 12px; }
.steps > li { grid-template-columns: 3.2em minmax(0, 1fr); align-items: start; }
.steps > li:first-child { border-top: 0; }
.steps > li::before { color: var(--steel); font-weight: 800; }

.nots { display: grid; gap: 12px; }
.nots > li { padding-left: clamp(24px, 3vw, 32px); }
.nots > li:first-child { border-top: 0; }
.nots > li::before { display: none; }

.mock { padding: 0; overflow: hidden; }
.mock-bar { border-bottom: 0; padding: 18px 22px 4px; }
.mock-body { padding: 8px 22px 26px; }
.mock-rule { height: 7px; border-radius: var(--r-pill); width: 62px; }
.mock-facts { background: var(--page); border-radius: 18px; padding: 6px 18px; margin-top: 22px; }
.mock-facts > div { border-bottom: 0; padding: 9px 0; }
.mock-btn { border-radius: var(--r-pill); border: 0; font-weight: 800; padding: 9px 18px; }
.mock-btn-ghost { background: var(--steel-05); }
.mock-wait { background: var(--page); border: 0; border-radius: 18px; }

/* the feature table becomes rows of blocks */
.tbl tbody tr { background: var(--card); }
.tbl thead th { border-bottom: 0; color: var(--steel); font-weight: 800; }
.tbl th, .tbl td { border-bottom: 0; padding: 14px 18px; }
.tbl tbody th:first-child { border-radius: var(--r-card) 0 0 var(--r-card); }
.tbl tbody td:last-child  { border-radius: 0 var(--r-card) var(--r-card) 0; }
.tbl { border-spacing: 0 10px; border-collapse: separate; }

/* documents: the section rules go, the spacing stays */
.priv h2 { border-top: 0; padding-top: 0; margin-top: clamp(38px, 5vw, 56px); }
.priv-l > div { border-bottom: 0; background: var(--card); border-radius: 18px; padding: 16px 20px; margin-bottom: 10px; }
.done-next { border-top: 0; display: grid; gap: 10px; }
.done-next li { border-bottom: 0; background: var(--card); border-radius: 18px; padding: 16px 20px; }
.done-next b { color: var(--steel); font-weight: 800; }

/* chrome */
.bar { border-bottom: 0; padding-top: 26px; }
.mark-n { font-weight: 800; letter-spacing: .04em; }
.nav a { font-weight: 700; letter-spacing: 0; font-size: 14px; }
.band, .exhibits, .limits, .how, .join, .picks, .intro { border-top: 0; }
.foot { border-top: 0; }
.skip { border-radius: var(--r-pill); }

.tag, .band-n {
  display: inline-block; background: var(--steel-05); color: var(--steel);
  border-radius: var(--r-pill); padding: 6px 15px;
  font-weight: 800; font-size: 11.5px; letter-spacing: .05em;
}

.hl::after { height: 7px; border-radius: var(--r-pill); bottom: -.16em; }
code, .path {
  background: var(--steel-05); border: 0; border-radius: var(--r-pill);
  padding: 3px 11px; font-weight: 700;
}
.note { border-left: 0; background: var(--steel-05); border-radius: 18px; padding: 18px 22px; }