/* ==========================================================================
   Centre for Disability Support — public site
   Palette sampled from the logo artwork; structural language (radii, hairline
   borders, soft type weights, generous whitespace) inherited from the app's
   design tokens so the marketing site and the product read as one company.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #1a2340;
  --navy-deep: #121834;
  --blue: #2f97f8;
  /* #1479db was two steps too light: white on it is 4.39:1, and this token is
     also the colour of every link, eyebrow and pill on a light background — so
     it failed WCAG AA (4.5:1) for normal text in nine places at once. #1163bc
     clears it against white (5.94) AND against the pale --blue-wash (5.34),
     which the intermediate #1470cf did not. */
  --blue-dark: #1163bc;
  --sky: #5fc9f8;
  --purple: #7a1ff0;
  --purple-dark: #6114cc;

  /* Surfaces */
  --bg: #fafafa;
  --bg-subtle: #f4f5f8;
  --card: #ffffff;
  --border: #e5e5e7;
  --border-light: #f0f0f2;

  /* Text */
  --text: #1a2340;
  --text-muted: #5c6274;
  /* #868b99 was 3.41:1 on white — a fail for normal text, and this token
     carries the mono labels, frame captions and figcaptions, i.e. exactly the
     small text that needs contrast most. #6b7080 clears AA on all three page
     backgrounds (4.94 / 4.73 / 4.53). */
  --text-faint: #6b7080;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b9c0d4;

  /* Accent washes */
  --blue-wash: #eaf4fe;
  --purple-wash: #f4ecfe;
  --sky-wash: #ecf8fe;

  /* Shape */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --shadow: 0 1px 3px rgba(26, 35, 64, 0.04), 0 8px 24px rgba(26, 35, 64, 0.06);
  --shadow-lg: 0 2px 6px rgba(26, 35, 64, 0.05), 0 18px 48px rgba(26, 35, 64, 0.1);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  /* System mono — used for small labels and the de-id worked example. Gives the
     technical texture a webfont would, at zero network cost. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --wrap: 1120px;
  --wrap-narrow: 760px;
}

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------------- a11y --- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------- typography --- */

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}

h1 {
  /* Capped lower than it was: at 3.4rem the hero h1 broke as "Your NDIS /
     information, in one / place, in your name." with two words stranded. */
  font-size: clamp(2rem, 4.4vw, 2.95rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  text-wrap: balance;
}
h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}
h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}

p {
  margin: 0 0 1.1em;
}

a {
  color: var(--blue-dark);
  text-decoration-color: rgba(47, 151, 248, 0.4);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

.lede {
  font-size: clamp(1.08rem, 2vw, 1.32rem);
  color: var(--text-muted);
  line-height: 1.55;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--blue-dark);
  margin-bottom: 14px;
}
.eyebrow.on-dark {
  color: var(--sky);
}
.eyebrow.purple {
  color: var(--purple-dark);
}

/* ------------------------------------------------------------- layout --- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow {
  max-width: var(--wrap-narrow);
}

section {
  padding: clamp(56px, 8vw, 104px) 0;
}
section.tight {
  padding: clamp(40px, 5vw, 64px) 0;
}
/* A tight section straight after a hero continues it (the Privacy page's
   banner), so the hero's own bottom padding is the only gap it needs. */
.hero + section.tight {
  padding-top: 0;
}

.section-head {
  max-width: 680px;
  margin-bottom: 44px;
}
.section-head.centred {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.band-subtle {
  background: var(--bg-subtle);
}
.band-dark {
  background: var(--navy);
  color: var(--text-on-dark-muted);
  /* --text-faint is tuned for light backgrounds, where it must be dark enough
     to clear AA. On navy that same value is 3.1:1 — so the mono labels and
     notes inside a dark band need the inverse adjustment, not the same token. */
  --text-faint: #9aa0b0;
}
.band-dark h2,
.band-dark h3,
.band-dark h4 {
  color: #fff;
}
.band-dark .lede {
  color: var(--text-on-dark-muted);
}
/* :not(.btn) again — a bare `.band-dark a` rule out-specifies .btn-on-dark and
   paints button labels sky-blue on white (~1.9:1). Buttons keep their own colours. */
.band-dark a:not(.btn) {
  color: var(--sky);
}

/* ------------------------------------------------------------ buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--blue-dark);
  color: #fff;
}
.btn-primary:hover {
  background: #0e559f;
}

.btn-secondary {
  background: transparent;
  color: var(--navy);
  border-color: #ccd0dc;
}
.btn-secondary:hover {
  border-color: var(--navy);
  background: rgba(26, 35, 64, 0.03);
}

.btn-on-dark {
  background: #fff;
  color: var(--navy);
}
.btn-on-dark:hover {
  background: var(--sky-wash);
}

/* Secondary action on a dark band — outlined, so it reads below .btn-on-dark. */
.btn-ghost-dark {
  background: transparent;
  color: #fff;
  border-color: #4a5680;
}
.btn-ghost-dark:hover {
  border-color: #8b97c0;
  background: rgba(255, 255, 255, 0.06);
}

.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover {
  transform: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}
.arrow-link::after {
  content: "→";
  transition: transform 0.18s ease;
}
.arrow-link:hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------- nav --- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 250, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--border);
}
.site-nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  height: 30px;
  width: auto;
}
.brand-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* :not(.btn) matters — without it this rule out-specifies .btn-primary and
   paints the CTA's label muted grey on blue (a real contrast failure). */
.nav-links a:not(.btn) {
  display: block;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:not(.btn):hover {
  color: var(--navy);
  background: rgba(26, 35, 64, 0.045);
}
.nav-links a[aria-current="page"]:not(.btn) {
  color: var(--blue-dark);
  font-weight: 600;
}
.nav-links .btn {
  white-space: nowrap;
  padding: 10px 18px;
  font-size: 0.92rem;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
}

/* The 1081-1200px band is where the rail is tightest. Tighten it a little there
   so a wider system font (Segoe UI runs wider than the headless metrics this was
   measured against) can't tip it into a wrapped second row. */
@media (max-width: 1200px) {
  .brand-name {
    font-size: 0.97rem;
  }
  .nav-links a:not(.btn) {
    padding: 8px 9px;
  }
  .nav-links .btn {
    padding: 10px 15px;
  }
}

/* The full rail needs ~950px of its own. Below that the hamburger takes over —
   deliberately earlier than the usual tablet breakpoint, because a wrapped
   two-row nav looks broken in a way a hamburger never does. */
@media (max-width: 1080px) {
  .nav-toggle {
    display: block;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 8px 16px 16px;
    box-shadow: var(--shadow);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-links a {
    padding: 12px 8px;
    font-size: 1rem;
  }
  .nav-links li:last-child {
    margin-top: 8px;
  }
}

/* --------------------------------------------------------------- hero --- */

.hero {
  /* Top padding is deliberately much smaller than the bottom. Every hero opens
     with the status pill, which now sits inside the text block rather than in a
     band of its own — so the lead-in only has to clear the nav, not hold a
     centred label. */
  padding: clamp(16px, 2vw, 26px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(168deg, var(--sky-wash) 0%, var(--bg) 62%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.hero h1 {
  margin-bottom: 20px;
}
.hero .lede {
  max-width: 38ch;
  /* pretty avoids the single-word last line the 34ch measure was producing */
  text-wrap: pretty;
}

/* Stacked hero: intro copy full-measure, figure beneath it rather than beside.
   Used when the hero image is a wide product screenshot — in a half-width
   column its UI text renders too small to read, which is the whole point of
   showing it. The figure is already the second grid child, so collapsing to one
   column is all that is needed; no markup change. */
.hero-grid.hero-stacked {
  grid-template-columns: 1fr;
  gap: clamp(28px, 3.6vw, 44px);
}
/* The lede's measure is left to .centre-text .lede (54ch, auto margins) so the
   stacked hero matches the Privacy & AI hero exactly — .hero .lede's 38ch is
   sized for the old narrow column and would read as a stack of stubs here.
   Only the flex rows need help: text-align cannot centre them. */
.hero-grid.hero-stacked .centre-text .btn-row,
.hero-grid.hero-stacked .centre-text .trust-strip {
  justify-content: center;
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero .lede {
    max-width: none;
  }
}

/* -------------------------------------------------------------- cards --- */

.card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  padding: 26px;
}
.card h3 {
  margin-bottom: 8px;
}
.card p:last-child {
  margin-bottom: 0;
}

.grid {
  display: grid;
  gap: 18px;
}
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* Feature tile with an icon chip */
.tile {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r);
  padding: 26px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
a.tile {
  text-decoration: none;
  color: inherit;
}
a.tile:hover {
  border-color: #d5dae6;
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.tile .chip {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  background: var(--blue-wash);
  color: var(--blue-dark);
  flex-shrink: 0;
}
.tile .chip.purple {
  background: var(--purple-wash);
  color: var(--purple-dark);
}
.tile .chip svg {
  width: 21px;
  height: 21px;
}
.tile p {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin-bottom: 0;
}
.tile .arrow-link {
  margin-top: 16px;
  font-size: 0.95rem;
}

/* Numbered steps. A hairline runs behind the markers so four columns read as
   one sequence rather than four unrelated lists. */
.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.steps-3 {
  grid-template-columns: repeat(3, 1fr);
}
.steps::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 19px;
  right: 19px;
  height: 2px;
  background: var(--border);
}
.step {
  position: relative;
  padding-top: 52px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1rem;
}
.step h3 {
  font-size: 1.05rem;
  margin-bottom: 6px;
}
.step p {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* Compact scannable list of the seven profile sections. A dense paragraph
   naming all seven is unreadable; this is the same content you can skim. */
.section-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-list .dot-blue { --dot: #2f97f8; }
.section-list .dot-purple { --dot: #7a1ff0; }
.section-list .dot-pink { --dot: #ff2d55; }
.section-list .dot-green { --dot: #34c759; }
.section-list .dot-sky { --dot: #5ac8fa; }
.section-list .dot-orange { --dot: #ff9500; }
.section-list .dot-indigo { --dot: #5856d6; }
.section-list li {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--dot, var(--blue));
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
.section-list b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.section-list span {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .section-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .section-list {
    grid-template-columns: 1fr;
  }
}

/* A ticked list for inside a card. A long comma-run-on of everything built
   reads as one grey block and undersells the list; the same items ticked are
   scannable and look like what they are — a count. */
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.tick-list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.94rem;
  line-height: 1.45;
  color: var(--text-body);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* A single line lifted out of a long prose passage. The About story runs three
   dense paragraphs with nothing for the eye to land on; this gives it a rest
   and puts the sentence that matters where a skimmer will actually read it. */
.pull-quote {
  margin: 30px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
  font-size: 1.22rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--navy);
  text-wrap: pretty;
}

/* An axis for ordered card sets — the guardianship types are a spectrum of
   authority, which a plain grid hides. */
.spectrum {
  margin-bottom: 26px;
}
.spectrum-bar {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34c759 0%, #5ac8fa 34%, #2f97f8 62%, #7a1ff0 100%);
}
.spectrum-ends {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.spectrum-ends span:last-child {
  text-align: right;
}

/* ---------------------------------------------------- rhythm breakers --- */
/* Two sections deliberately take a different shape so the page does not read as
   ten identical eyebrow/heading/lede/grid blocks in a row. */

/* Roadmap as a horizontal timeline. */
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  position: relative;
  padding-top: 34px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--sky) 55%, var(--border) 100%);
}
.tl-item {
  position: relative;
}
.tl-item::before {
  content: "";
  position: absolute;
  top: -34px;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
}
.tl-item:nth-child(2)::before {
  border-color: var(--sky);
}
.tl-item:nth-child(3)::before {
  border-color: #c3c8d6;
}
.tl-when {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 8px;
}
.tl-item:nth-child(3) .tl-when {
  color: var(--text-faint);
}
.tl-item h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}
.tl-item p {
  color: var(--text-muted);
  font-size: 0.97rem;
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .timeline::before {
    display: none;
  }
  .tl-item {
    padding-left: 28px;
  }
  .tl-item::before {
    top: 4px;
    left: 0;
  }
  .timeline {
    padding-top: 0;
  }
}

/* Compact technical spec strip — deliberately terse, no heading furniture. */
.spec-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.spec-row > div {
  background: var(--card);
  padding: 22px 24px;
}
.spec-row dt {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 8px;
}
.spec-row dd {
  margin: 0;
  font-size: 0.97rem;
  color: var(--text-muted);
}
.spec-row dd strong {
  display: block;
  color: var(--navy);
  font-size: 1.05rem;
  margin-bottom: 3px;
}
@media (max-width: 880px) {
  .spec-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .spec-row {
    grid-template-columns: 1fr;
  }
}

/* Split "two audiences" panel */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.split > * {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: clamp(26px, 3.4vw, 40px);
}
@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
  }
}

/* Plain feature list with ticks */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--text-muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue);
  transform: rotate(-45deg);
}
/* Ticks running the FULL wrap width beneath a figure rather than beside it.
   One column at 1120px would set ~140-character lines; two keeps each near a
   readable measure while still reading as a single list. */
.ticks-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 48px;
  align-items: start;
}
.ticks-under {
  margin-top: 28px;
}
@media (max-width: 620px) {
  .ticks-2 {
    grid-template-columns: 1fr;
  }
}

.band-dark .ticks li {
  color: var(--text-on-dark-muted);
}
.band-dark .ticks li::before {
  border-color: var(--sky);
}

/* ------------------------------------------------- screenshot framing --- */

.shot {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #f6f7f9;
  border-bottom: 1px solid var(--border);
}
.shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d9dce4;
}
.shot img {
  width: 100%;
  display: block;
}

/* ------------------------------------------------- product framing --- */

/* A hero-weight product frame: the app window lifted off a soft tinted
   backdrop. Carries the page where photography used to. */
.frame {
  position: relative;
  padding: clamp(14px, 2.2vw, 26px);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--sky-wash) 0%, #eef1f8 60%, #e9ecf5 100%);
}
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-lg);
  border: 1px solid rgba(26, 35, 64, 0.06);
  pointer-events: none;
}
.frame .shot {
  box-shadow: 0 2px 8px rgba(26, 35, 64, 0.06), 0 24px 60px rgba(26, 35, 64, 0.16);
}
/* For a capture whose own resolution is lower than the 1018px slot it lands in.
   At full width the browser upscales it and the UI text goes soft; capping the
   frame spends fewer CSS pixels on the same image pixels, which is the only
   thing that sharpens it short of a bigger recapture. The rest of the page's
   captures land near 0.6 of their natural width — this brings the outlier back
   in line with them. */
.frame-narrow {
  max-width: 86%;
  margin-inline: auto;
}

/* A phone-shaped frame for the captures that are genuinely phone-first. Narrow
   and centred in its column, so a portrait screenshot is not stretched to the
   width of a laptop frame. */
.frame-phone {
  max-width: 320px;
  margin: 0 auto;
}
.frame-phone .shot {
  border-radius: 18px;
}
.frame.on-dark {
  background: linear-gradient(150deg, #26305a 0%, #1d2648 60%, #171f3d 100%);
}
.frame.on-dark::after {
  border-color: rgba(255, 255, 255, 0.08);
}

/* Caption under a product frame, naming what's on screen. */
.frame-caption {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 12px;
  line-height: 1.5;
}
.band-dark .frame-caption {
  color: #8f9ab8;
}

/* Placeholder while real screenshots/photography are pending */
.placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 260px;
  padding: 28px;
  border-radius: var(--r);
  border: 2px dashed #ccd2e0;
  background: repeating-linear-gradient(
    45deg,
    #f7f8fb,
    #f7f8fb 12px,
    #f2f4f8 12px,
    #f2f4f8 24px
  );
  /* Explicit, not var(--text-faint): the hatch behind this is light even when
     the placeholder sits inside a dark band, so it must not pick up the band's
     lightened faint token. */
  color: #6b7080;
  font-size: 0.9rem;
  line-height: 1.5;
}
.placeholder strong {
  display: block;
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.placeholder.tall {
  min-height: 420px;
}

/* ------------------------------------------------------------ figures --- */

figure {
  margin: 0;
}
figure svg {
  width: 100%;
  height: auto;
  display: block;
}
figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-faint);
  text-align: center;
}

/* A fixed-viewBox diagram scales down with the viewport, so below about 700px
   its labels land under 6px and the picture stops being a picture. Give the
   drawing a floor and let its own figure scroll sideways instead — the page
   itself still never scrolls horizontally. */
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.scroll-x > svg {
  min-width: 720px;
}

/* ----------------------------------------------- profile section map --- */

/* The seven profile sections, grouped by the job each group does. Replaced a
   fixed-viewBox SVG whose 12.5px descriptions scaled down to about 4px on a
   phone; as HTML it reflows, and it reuses the .section-list card language the
   participants page already uses for the same seven sections. */

.sec-map {
  display: grid;
  gap: 20px;
  margin: 8px 0 40px;
}
.sec-group-h {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 9px;
}
.sec-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, 1fr);
}
.sec-cards.is-one {
  grid-template-columns: 1fr;
}
.sec-card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--dot, var(--blue));
  border-radius: var(--r-sm);
  padding: 16px 18px;
}
/* Same seven accents the participants page uses for the same seven sections. */
.sec-card.dot-blue { --dot: #2f97f8; }
.sec-card.dot-purple { --dot: #7a1ff0; }
.sec-card.dot-pink { --dot: #ff2d55; }
.sec-card.dot-green { --dot: #34c759; }
.sec-card.dot-sky { --dot: #5ac8fa; }
.sec-card.dot-orange { --dot: #ff9500; }
.sec-card.dot-indigo { --dot: #5856d6; }
.sec-card b {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.sec-card span {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .sec-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .sec-cards {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------- fork diagram --- */

/* One thing that becomes two and reconciles back — drawn with the site's own
   card language rather than as a fixed-viewBox SVG, whose 12.5px chain labels
   were the most useful part and the first to become unreadable on a phone.
   Columns become rows below 860px and the arrows turn to point down. */

.fork {
  display: grid;
  grid-template-columns: auto 24px minmax(0, 1.45fr) 24px auto;
  align-items: center;
  gap: 14px;
  margin: 8px 0 40px;
}
.fork-node {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  max-width: 260px;
}
.fork-node b {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 3px;
}
.fork-node span {
  display: block;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.fork-pair {
  display: grid;
  gap: 12px;
}
.fork-branch {
  border: 1px solid var(--fk, var(--blue));
  background: var(--fk-wash, var(--blue-wash));
  border-radius: 14px;
  padding: 14px 18px;
}
.fork-pay { --fk: #2f97f8; --fk-wash: #eaf4fe; --fk-ink: #12558f; }
.fork-claim { --fk: #34c759; --fk-wash: #e8f9ed; --fk-ink: #186e33; }
.fork-branch b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fk-ink, var(--blue-dark));
  margin-bottom: 6px;
}
.fork-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.fork-chain i {
  font-style: normal;
  color: var(--fk, var(--blue));
}
.fork-arrow {
  justify-self: center;
  color: var(--text-faint);
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 860px) {
  .fork {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fork-node {
    max-width: none;
  }
  .fork-arrow {
    transform: rotate(90deg);
  }
}

/* --------------------------------------------------- taxonomy ledger --- */

/* The 3 → 20 → 70 structure drawn out rather than asserted: one square per
   anchor, grouped into its domain, grouped into its pillar. Hover, tap or tab
   a square and the readout names it, so a reader can explore all seventy
   without the page having to carry seventy labels. Replaced a fixed-viewBox
   SVG that was illegible below about 700px. */

.taxonomy {
  margin: 8px 0 40px;
}
/* The ledger sits inside the site's app frame, like every other product image,
   because without that chrome a reader sees coloured squares in a bare figure
   and reads a diagram — not a real assessment part-way through, which is what
   the states are saying. `.shot` is white and clips its overflow, so the app
   surface gets the page's own background and the sticky readout stays OUTSIDE
   the frame, where it cannot be clipped. */
.tax-app {
  background: var(--bg);
  padding: clamp(14px, 2vw, 22px);
}

/* Sticky under the 67px nav so the name stays in view while the reader is
   further down the ledger — otherwise tapping a square on a phone updates a
   line that has already scrolled away. */
.tax-readout {
  position: sticky;
  top: 67px;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 8px;
  min-height: 46px;
  margin: 0 0 20px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text-muted);
}
.tax-readout .tax-sep {
  color: var(--text-faint);
}
.tax-readout .tax-p {
  font-weight: 600;
}
.tax-readout .tax-a {
  font-weight: 600;
  color: var(--text);
}
.tax-readout[data-k="self"] .tax-p { color: #12558f; }
.tax-readout[data-k="env"] .tax-p { color: #186e33; }
.tax-readout[data-k="rel"] .tax-p { color: #5510ab; }

.tax-pillar {
  margin-bottom: 22px;
}
.tax-pillar:last-child {
  margin-bottom: 0;
}
.tax-self { --tp: #2f97f8; --tp-ink: #12558f; --tp-soft: #cbe4fd; }
.tax-env { --tp: #34c759; --tp-ink: #186e33; --tp-soft: #c2ecce; }
.tax-rel { --tp: #7a1ff0; --tp-ink: #5510ab; --tp-soft: #dcc9fa; }

.tax-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
}
.tax-head .tax-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--tp);
  flex: none;
  align-self: center;
}
.tax-head .tax-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tp-ink);
}
.tax-head .tax-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-faint);
}

.tax-doms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  align-items: start;
  gap: 12px;
}
.tax-dom {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  padding: 12px 14px 13px;
}
.tax-dom-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tp-ink);
}
.tax-dom-h b {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--text-faint);
}

.tax-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 0 -4px;
}
/* 24px button, 15px visible square: the tap target clears the 24px minimum
   without the squares growing into blocks. */
.tax-cell {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 6px;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.tax-cell::before {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--st-bg, var(--tp-soft));
  box-shadow: var(--st-ring, none);
  transition: transform 0.12s ease;
}
/* Each square carries the assessment's own state, not the pillar's colour —
   these are the seven the product uses, with the two safety states drawn as
   circles so state does not rest on colour alone. Colours lifted from the
   design source so the site and the app agree. */
.s-clear { --st-bg: #dfe4ea; }
.s-deep { --st-bg: #0071e3; }
.s-concern { --st-bg: #e08300; }
.s-follow { --st-bg: rgba(224, 131, 0, 0.16); --st-ring: inset 0 0 0 1.5px #e08300; }
.s-unscreened { --st-bg: transparent; --st-ring: inset 0 0 0 1.5px rgba(16, 24, 40, 0.25); }
.s-safety { --st-bg: transparent; --st-ring: inset 0 0 0 2px #d92d20; }
.s-gate { --st-bg: #d92d20; }
.tax-cell.s-safety::before,
.tax-cell.s-gate::before,
.tax-sw.s-safety,
.tax-sw.s-gate {
  border-radius: 50%;
}
.tax-cell:hover::before,
.tax-cell:focus::before {
  transform: scale(1.32);
}
.tax-cell:focus {
  outline: none;
}
.tax-cell:focus-visible {
  outline: 2px solid var(--tp-ink);
  outline-offset: 0;
}

/* The key. Deliberately quiet and above the ledger: a reader who only wants
   the 3 -> 20 -> 70 shape can ignore it, and the readout names the state in
   words anyway, so it is a reference rather than something to memorise. */
.tax-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.tax-key-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.tax-sw {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex: none;
  background: var(--st-bg, #dfe4ea);
  box-shadow: var(--st-ring, none);
}
.tax-readout .tax-state {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text-faint);
}
/* Tabbing to a square must not park it under the nav + sticky readout. */
.tax-cell {
  scroll-margin-top: 128px;
  scroll-margin-bottom: 24px;
}

/* Two columns on a phone rather than twenty stacked cards. The domain names
   wrap at this width, which is cheaper than the ~800px of extra page the
   single column costs. */
@media (max-width: 620px) {
  .tax-doms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .tax-dom {
    padding: 10px 10px 11px;
  }
  .tax-dom-h {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 6px;
  }
  .tax-dom-h b {
    margin-left: 6px;
  }
  .tax-readout {
    font-size: 0.88rem;
    padding: 9px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tax-cell::before {
    transition: none;
  }
}

/* ------------------------------------------------------------- callout --- */

.callout {
  border-left: 3px solid var(--blue);
  background: var(--blue-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 20px 24px;
}
.callout.purple {
  border-color: var(--purple);
  background: var(--purple-wash);
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout .big {
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
}

/* Stat / status pill */
.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--blue-wash);
  color: var(--blue-dark);
}
.pill.muted {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark-muted);
}

/* -------------------------------------------------------------- forms --- */

.signup {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.signup input[type="email"] {
  flex: 1 1 260px;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  font: inherit;
  font-size: 1rem;
  background: #fff;
  color: var(--text);
}
.signup input::placeholder {
  color: var(--text-faint);
}

/* -------------------------------------------- status pill & trust strip --- */

/* Up-front honesty about build stage, rather than buried in a roadmap. Sits at
   the top of the hero's own text block, hard left even where that block centres
   its text: a block-level box with a fit-content width and an auto right margin
   ignores the parent's text-align, so one rule covers both hero shapes. */
.status-pill {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #4a3b7a;
  background: #f1ecfe;
  border: 1px solid #e2d8fc;
  padding: 7px 15px;
  border-radius: 999px;
  margin: 0 auto 18px 0;
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple);
  flex-shrink: 0;
}

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}
/* No inline separators: a "·" pseudo-element strands itself at the start of a
   line whenever the strip wraps. Spacing alone does the separating. */
.trust-strip {
  gap: 10px 26px;
}

/* ------------------------------------------------------- mono details --- */

.mono-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.band-dark .mono-label {
  color: #8f9ab8;
}

/* A photo placeholder that doubles as the brief for the image that replaces it. */
.photo-brief {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: repeating-linear-gradient(
    135deg,
    #f2f5fa 0 12px,
    #e9eef7 12px 24px
  );
}
.photo-brief.wide {
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
}

/* Founder portrait. The source is already circle-cropped, but clipping in CSS
   too means the image reads as a circle on any background — which in turn
   meant the alpha channel bought nothing, and it could ship as a 59KB JPEG
   instead of a 911KB PNG. */
.portrait {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.photo-caption {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

/* ------------------------------------------------------ de-id stepper --- */

.stepper-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
  padding: 0;
  list-style: none;
}
.stepper-tabs button {
  padding: 9px 17px;
  border-radius: 999px;
  font-size: 0.93rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #4a5680;
  background: transparent;
  color: #fff;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.stepper-tabs button:hover {
  border-color: #7f8cb8;
}
.stepper-tabs button[aria-selected="true"] {
  background: #c9a6ff;
  border-color: #c9a6ff;
  color: var(--navy);
  font-weight: 600;
}

.stepper-panel {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 860px) {
  .stepper-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.stepper-copy .step-count {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  color: var(--sky);
  margin-bottom: 10px;
}
.stepper-copy h3 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.stepper-copy p {
  color: var(--text-on-dark-muted);
  font-size: 1rem;
}
.stepper-aside {
  border-left: 2px solid var(--purple);
  padding-left: 14px;
  font-size: 0.93rem;
  color: #b7a6de;
}

.stepper-pane {
  background: #10162e;
  border: 1px solid #2f3a60;
  border-radius: var(--r);
  padding: 22px 24px;
  /* Same inversion as .band-dark — this pane is its own dark surface and is
     not nested inside one. */
  --text-faint: #9aa0b0;
}
.stepper-pane .pane-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #e8ecf7;
  margin: 0 0 14px;
  overflow-wrap: break-word;
}
.stepper-pane .pane-text.is-mono {
  font-family: var(--mono);
  font-size: 0.88rem;
  white-space: pre-wrap;
  color: #a7f3c4;
}
.stepper-pane .pane-note {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: #8f9ab8;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #2f3a60;
}
.tok {
  background: rgba(122, 31, 240, 0.28);
  border-bottom: 1px solid #a06cf5;
  border-radius: 3px;
  padding: 0 3px;
}
.tok-found {
  background: rgba(255, 149, 0, 0.22);
  border-bottom: 1px solid #ff9500;
  border-radius: 3px;
  padding: 0 3px;
}

/* ---------------------------------------------------------- utilities --- */

.centre-text {
  text-align: center;
}
/* A constrained measure inside a centred block still needs its margins
   auto-ed, or it sits left of centre while the heading above it is centred. */
.centre-text .lede {
  max-width: 54ch;
  margin-left: auto;
  margin-right: auto;
}
.stack-centre {
  justify-content: center;
}
.measure {
  max-width: 34ch;
}
.head-wide {
  max-width: 720px;
}
.grid-align-centre {
  align-items: center;
  gap: 44px;
}
/* Top-align instead, for a pair whose heights differ a lot. Centring two
   very unequal columns anchors neither: the shorter one floats with a gap
   above AND below. Aligning tops gives a real line to read from, and puts
   the whole difference in the bottom-left — the corner the eye leaves last.
   Use where the figure carries a caption too, since that extends the right
   column further and the two can never finish level anyway. */
.grid-align-top {
  align-items: start;
  gap: 44px;
}
.mt-s {
  margin-top: 14px;
}
.mt-m {
  margin-top: 20px;
}
.mt-l {
  margin-top: 44px;
}
.figure-flush {
  margin: 8px 0 40px;
}
.note {
  color: var(--text-faint);
  font-size: 0.94rem;
}

/* A screenshot placeholder sitting inside browser chrome shouldn't repeat
   the chrome's own border/radius. */
.shot .placeholder {
  border: 0;
  border-radius: 0;
}

/* ------------------------------------------------------------- footer --- */

.site-footer {
  background: var(--navy-deep);
  color: var(--text-on-dark-muted);
  padding: 60px 0 32px;
  font-size: 0.94rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 36px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
/* Footer column labels. Marked up as h2 (they are sections of the footer
   landmark, not sub-headings of the last h2 in main) but styled small — an h4
   here produced a 2->4 heading-level skip. */
.site-footer h4,
.site-footer .footer-head {
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 12px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin-bottom: 8px;
}
.site-footer a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer .brand img {
  height: 34px;
  margin-bottom: 14px;
}
.footer-note {
  padding-top: 26px;
  font-size: 0.85rem;
  color: #7f879e;
}
.footer-note p {
  margin-bottom: 8px;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}