/* ═══════════════════════════════════════════════════════════════
   S_DevLabs — Strategic Development Labs
   Palette taken from the logo: black, white, cyan, deep blue.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:            #05070c;
  --bg-alt:        #090c14;
  --surface:       #0e1219;
  --surface-2:     #141924;
  --line:          #1e2534;
  --line-soft:     #171d29;

  --text:          #eef2f8;
  --text-dim:      #9aa5b8;
  --text-faint:    #6b7688;

  --cyan:          #3ec8f0;
  --blue:          #2b6fd4;
  --blue-deep:     #16357a;
  --accent-grad:   linear-gradient(135deg, var(--cyan) 0%, var(--blue) 100%);

  --radius:        14px;
  --radius-sm:     9px;
  --maxw:          1120px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ──────────────────────────── [hidden] GUARD ───────────────────────────
   The browser's default [hidden] { display: none } is a type selector,
   so any class rule that sets display silently overrides it. That bit
   us: .ideas-cta sets display:flex, which made the "Nothing published
   yet" notice render on top of three real article cards.

   This restores the intent globally. If an element carries the hidden
   attribute, it is hidden, no matter what its class says.
   ──────────────────────────────────────────────────────────────────────── */

[hidden] { display: none !important; }


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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ambient glow — echoes the emblem's depth */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 480px at 18% -8%, rgba(62, 200, 240, .11), transparent 62%),
    radial-gradient(760px 440px at 88% 4%, rgba(43, 111, 212, .12), transparent 60%);
}

main, header, footer { position: relative; z-index: 1; }

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: .86em;
  background: rgba(62, 200, 240, .08);
  border: 1px solid rgba(62, 200, 240, .16);
  border-radius: 5px;
  padding: .1em .38em;
  color: #bfe9fb;
  word-break: break-word;
}

pre code {
  background: none; border: 0; padding: 0; color: inherit; font-size: .82rem;
}

h1, h2, h3 { line-height: 1.22; letter-spacing: -.018em; margin: 0; }

/* ───────────────────────────── NAV ───────────────────────────── */

/* ── Centered brand header ─────────────────────────────────────
   Three columns: nav-left | brand (centred) | nav-right.
   The brand block is centred with position:absolute so it stays dead
   centre no matter how wide the two nav sides get.                    */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 1.5rem;
  background: rgba(5, 7, 12, .78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

/* True centre, independent of the nav side widths */
.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 0 0 auto;
}
.brand:hover { text-decoration: none; }

/* The emblem is a square black tile — let it sit flush, no rounding,
   so the negative space in the logo reads as part of the mark. */
.brand-mark {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font-weight: 750;
  font-size: 1.02rem;
  letter-spacing: -.015em;
  color: var(--text);
  display: flex;
  align-items: baseline;
}
/* The dot in S.DevLabs is a short blue bar, per the brand artwork */
.brand-dot {
  display: inline-block;
  width: .22em;
  height: .11em;
  background: var(--accent-grad);
  border-radius: 1px;
  margin: 0 .04em 0 .02em;
}
.brand-tag {
  font-size: .52rem;
  letter-spacing: .26em;
  color: var(--text-faint);
  font-weight: 600;
  margin-top: .16rem;
}

.nav-links { display: flex; align-items: center; gap: 1.35rem; }
.nav-right { margin-left: auto; }
.nav-links a:not(.btn) {
  color: var(--text-dim);
  font-size: .89rem;
  font-weight: 500;
}
.nav-links a:not(.btn):hover { color: var(--text); text-decoration: none; }

/* Which section you are looking at, while you look at it. */
.nav-links a.is-active {
  color: var(--cyan);
}
.nav-links a.is-active::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 3px;
  background: var(--cyan);
  opacity: .7;
}

/* ───────────────────────────── BUTTONS ───────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .62rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent-grad);
  color: #04121c;
  font-weight: 650;
  font-size: .9rem;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  box-shadow: 0 5px 20px -8px rgba(62, 200, 240, .65);
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 9px 26px -8px rgba(62, 200, 240, .8);
}
.btn-sm { padding: .42rem .9rem; font-size: .82rem; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); box-shadow: none; }

/* ───────────────────────────── HERO ──────────────────────────── */

.hero {
  position: relative;
  padding: 3.5rem 1.5rem 3.8rem;
  overflow: hidden;
  isolation: isolate;
}

/* The ledger backdrop. Behind everything, faint enough to read the
   hero over it, but moving so the page feels alive. */
.hero-ledger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  opacity: .62;
  /* Fade the edges so the terminal does not have hard cut-off lines
     where it meets the section boundary. */
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 45%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 68% at 50% 45%, #000 25%, transparent 100%);
}

/* A scrim over the middle of the backdrop. The terminal reads at the
   edges; the centre stays quiet so the banner, the intro copy and the
   stat row always win. Without this the log text cuts straight across
   the logo and the stat labels. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 46% at 50% 42%, rgba(5, 7, 12, .94) 0%, rgba(5, 7, 12, .72) 45%, rgba(5, 7, 12, 0) 78%);
}

.hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* The full brand lockup as supplied: emblem, wordmark, subtitle,
   divider, tagline, service line and URL on one black canvas. */
/* The lockup artwork is feathered to transparent at its edges, so it
   dissolves into the page's blue glow instead of sitting on a hard
   black tile. No border, no rounding, no box. */
.hero-lockup {
  display: block;
  width: min(100%, 760px);
  height: auto;
  margin: 0 auto 2rem;
  border: 0;
  background: transparent;
  mix-blend-mode: screen;
}

.hero-lede {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 1.08rem;
  color: var(--text-dim);
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-stats {
  list-style: none;
  margin: 3rem auto 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 620px;
}
.hero-stats li { display: flex; flex-direction: column; gap: .18rem; }
.hero-stats strong {
  font-size: 1.32rem;
  font-weight: 750;
  letter-spacing: -.02em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-stats span {
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
}

/* ─────────────────────────── SECTIONS ────────────────────────── */

.section { padding: 4.5rem 1.5rem; }
.section-alt {
  background: var(--bg-alt);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.section-head { max-width: var(--maxw); margin: 0 auto 2.6rem; }
.eyebrow {
  margin: 0 0 .5rem;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 700;
}
.section-head h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight: 780;
  letter-spacing: -.03em;
}
.section-lede {
  margin: .85rem 0 0;
  color: var(--text-dim);
  max-width: 40rem;
  font-size: 1.01rem;
}

.grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.15rem;
}

/* ───────────────────────────── CARDS ─────────────────────────── */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.card:hover {
  border-color: rgba(62, 200, 240, .4);
  transform: translateY(-3px);
  background: var(--surface-2);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .7rem;
}
.card-head h3 {
  font-family: var(--font-mono);
  font-size: 1.04rem;
  font-weight: 650;
  letter-spacing: -.015em;
  word-break: break-word;
}

.tag {
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(154, 165, 184, .11);
  color: var(--text-dim);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tag-xrpl {
  background: rgba(62, 200, 240, .11);
  color: var(--cyan);
  border-color: rgba(62, 200, 240, .28);
}

.card-desc { margin: 0 0 1rem; color: var(--text-dim); font-size: .93rem; }

.card-feats {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .42rem;
}
.card-feats li {
  position: relative;
  padding-left: 1.1rem;
  font-size: .875rem;
  color: var(--text-dim);
}
.card-feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-grad);
}

/* The install command is the last thing before the card footer, on
   every card, regardless of how tall the demo above it is. The
   auto top margin does the pushing — it just needs the demo to be
   able to absorb the spare space instead of the install block. */
/* The wrapper holds the auto-margin so the install command still sits
   at the card's base; the button lives inside the block, top-right. */
.install {
  position: relative;
  margin: auto 0 1rem;
  order: 5;
}

.card-install {
  margin: 0;
  background: #04060b;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .85rem;
  padding-right: 4.2rem;
  overflow-x: auto;
  white-space: pre;
}

/* Copy button, inside the block at the top right */
.copy-install {
  position: absolute;
  top: .45rem;
  right: .45rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .5rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #0b111b;
  color: var(--text-faint);
  font-family: var(--font-sans);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}
.copy-install:hover {
  border-color: var(--cyan);
  color: var(--cyan);
  background: rgba(62, 200, 240, .09);
}
.copy-install.is-copied {
  border-color: rgba(87, 217, 138, .55);
  color: #57d98a;
  background: rgba(87, 217, 138, .1);
}
.copy-install svg { flex: 0 0 auto; }
.card-links { order: 6; }
.card-desc { order: 1; }
.card-feats { order: 2; }
.card-head { order: 0; }
.demo { order: 3; }

.card-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line-soft);
  font-size: .87rem;
}
.card-links a { font-weight: 600; }
.meta { color: var(--text-faint); font-size: .76rem; font-family: var(--font-mono); }

/* ───────────────────────────── IDEAS ─────────────────────────── */

.ideas {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  /* Four cards, two per row on desktop -- an even 2x2 reads as
     deliberate; a 3+1 leftover reads as a missing card. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}
@media (max-width: 820px) {
  .ideas { grid-template-columns: minmax(0, 1fr); }
}
.idea {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.idea::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-grad);
}
.idea h3 { font-size: 1.04rem; margin: .75rem 0 .55rem; }
.idea p { margin: 0; color: var(--text-dim); font-size: .91rem; }

.idea-status {
  display: inline-block;
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  padding: .22rem .6rem;
  border-radius: 999px;
}
.status-active {
  background: rgba(62, 200, 240, .12);
  color: var(--cyan);
  border: 1px solid rgba(62, 200, 240, .3);
}
.status-idea {
  background: rgba(154, 165, 184, .1);
  color: var(--text-dim);
  border: 1px solid var(--line);
}

.idea-meta {
  margin-top: 1rem !important;
  font-size: .78rem !important;
  color: var(--text-faint) !important;
  font-family: var(--font-mono);
}

.ideas-cta {
  max-width: var(--maxw);
  margin: 2.1rem auto 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}

/* A class selector with display beats the UA stylesheet's [hidden] rule,
   so the hidden attribute alone does not hide these. Restore it. */
.ideas-cta[hidden] { display: none; }

.ideas-cta .btn {
  display: inline-flex;
  align-items: center;
}

.ideas-cta-note {
  color: var(--text-faint);
  font-size: .89rem;
}

/* ──────────────────────────── DONATE ────────────────────────── */

.donate-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.donate-qr {
  text-align: center;
}

.donate-qr-link {
  display: inline-block;
  padding: .55rem;
  background: #ffffff;
  border-radius: 12px;
  line-height: 0;
  transition: transform .16s ease, box-shadow .16s ease;
}
.donate-qr-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.donate-qr-link img {
  display: block;
  width: 200px;
  height: 200px;
  image-rendering: pixelated;
}

.donate-qr-cap {
  margin: .7rem 0 0;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
}

.donate-info {
  padding-top: .35rem;
}

.donate-lede-top {
  margin: 0 auto 1.6rem;
  max-width: 46rem;
  text-align: center;
}

.donate-lede {
  margin: 0 0 1.4rem;
  max-width: 34rem;
  color: var(--text-dim);
  font-size: .96rem;
  line-height: 1.7;
}

.donate-address {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  padding: .8rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-width: 34rem;
}

.donate-address-label {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  white-space: nowrap;
}

.donate-address-value {
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing: 0;
  color: var(--text);
  word-break: break-all;
  flex: 1 1 auto;
  min-width: 0;
}

.donate-address .copy-install {
  position: static;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.donate-address .copy-install:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}
.donate-address .copy-install.is-copied {
  color: #7ee0a8;
  border-color: rgba(126, 224, 168, .5);
}
.donate-address .copy-install.is-selected {
  color: #ffc46b;
  border-color: rgba(255, 196, 107, .5);
}

.donate-meta {
  margin: .9rem 0 0;
  font-size: .78rem;
  color: var(--text-faint);
  letter-spacing: .04em;
}

.donate-note {
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  max-width: 34rem;
  font-size: .89rem;
  color: var(--text-faint);
}
.donate-note a { color: var(--cyan); }

@media (max-width: 720px) {
  .donate-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    justify-items: center;
    text-align: center;
  }
  .donate-info { text-align: left; width: 100%; }
  .donate-address { justify-content: center; }
}

/* ──────────────────────────── CONTACT ────────────────────────── */

/* Honeypot. Off-screen and invisible to people, reachable by bots that
   fill every input they find. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-wrap {
  max-width: 46rem;
  margin: 0 auto;
}

.contact {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.field { display: flex; flex-direction: column; gap: .38rem; }
.field label {
  font-size: .71rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.field input, .field textarea {
  background: #04060b;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .68rem .8rem;
  color: var(--text);
  font-family: inherit;
  font-size: .93rem;
  transition: border-color .16s ease, box-shadow .16s ease;
  resize: vertical;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(62, 200, 240, .13);
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.contact .btn { align-self: flex-start; }
.form-note { margin: 0; font-size: .8rem; color: var(--text-faint); }
.form-note strong { color: var(--text-dim); }

/* ──────────────────────────── FOOTER ─────────────────────────── */

.footer { border-top: 1px solid var(--line-soft); padding: 2.8rem 1.5rem; }
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  text-align: center;
}
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex: 0 0 auto;
}
.footer-name { margin: 0; font-weight: 700; font-size: .95rem; }
.footer-tag {
  margin: .1rem 0 0;
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--text-faint);
  font-weight: 600;
}
.footer-note { margin: .3rem 0 0; color: var(--text-dim); font-size: .87rem; }
.footer-copy { margin: 0; color: var(--text-faint); font-size: .79rem; }

/* ────────────────────────── RESPONSIVE ───────────────────────── */

/* Tablet: keep every link reachable. Only the tagline and the emblem
   drop out -- hiding the nav links would leave a tablet visitor with
   no way to move around the page. */
@media (max-width: 980px) {
  .nav-links { gap: 1rem; }
  .brand-tag { display: none; }
  .brand-mark { width: 34px; height: 34px; }
}

/* Phone: the links no longer fit in one row next to the brand, so they
   scroll horizontally rather than disappearing. */
/* On a phone the ledger turns into visual noise -- the lines are small,
   tight, and sit right behind the stat row. Drop the opacity hard and
   pull the mask in so it reads as a texture at the edges rather than
   text you are meant to read. */
@media (max-width: 760px) {
  .hero-ledger {
    opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 22%, #000 10%, transparent 75%);
    mask-image: radial-gradient(ellipse 90% 55% at 50% 22%, #000 10%, transparent 75%);
  }
  .hero::before {
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(5, 7, 12, .96) 0%, rgba(5, 7, 12, .78) 55%, rgba(5, 7, 12, 0) 88%);
  }
}

@media (max-width: 620px) {
  .nav { gap: .9rem; padding: .7rem 1rem; }
  .nav-right {
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* Fade the right edge so it is obvious the links continue and can be
       swiped. Without it the cut-off looks like a rendering bug. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .nav-right::-webkit-scrollbar { display: none; }
  .nav-links a:not(.btn) { font-size: .82rem; white-space: nowrap; }
  .brand-text { display: none; }
}

@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .hero-lockup { width: 100%; margin-bottom: 1.1rem; }
  .section { padding: 3.2rem 1.15rem; }
  .hero { padding: 3.2rem 1.15rem 2.8rem; }
  .card { padding: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ─────────────────────── TEXT DISCLOSURE (footer) ────────────────────── */

/* A plain-language statement of what this is and who is responsible for
   running it. Deliberately not a section — it belongs at the bottom,
   read once, not browsed. */
.disclosure-text {
  border-top: 1px solid var(--line-soft);
  padding: 3rem 1.5rem 2.6rem;
}

.disclosure-inner {
  max-width: 54rem;
  margin: 0 auto;
}

.disclosure-heading {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.018em;
  color: var(--text-dim);
  margin: 0 0 0;
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
}

/* The heading doubles as the toggle. Collapsed by default -- the legal
   text is there for anyone who wants it, not something we push at a
   visitor who came for the projects. */
.disclosure-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: .9rem .95rem;
  margin-left: -.95rem;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  font: inherit;
  color: var(--text-dim);
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.disclosure-toggle:hover {
  color: var(--text);
  border-color: var(--line);
  background: rgba(62, 200, 240, .05);
}
.disclosure-toggle:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* A small "click me" cue next to the label. */
.disclosure-cue {
  flex: 0 0 auto;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cyan);
  white-space: nowrap;
}
.disclosure-toggle:hover .disclosure-cue { color: var(--text); }

.disclosure-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  transition: transform .18s ease, color .16s ease;
}
.disclosure-toggle:hover .disclosure-chevron { color: var(--cyan); }
.disclosure-toggle[aria-expanded="true"] .disclosure-chevron {
  transform: rotate(180deg);
}
.disclosure-toggle[aria-expanded="true"] .disclosure-cue {
  color: var(--text-faint);
}

.disclosure-body {
  padding: 1.6rem 0 .4rem;
}

.disclosure-sub {
  font-size: .69rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  margin: 1.7rem 0 .55rem;
}
.disclosure-sub:first-of-type { margin-top: 0; }

.disclosure-inner p {
  margin: 0 0 .85rem;
  color: var(--text-faint);
  font-size: .83rem;
  line-height: 1.75;
}
.disclosure-inner p:last-child { margin-bottom: 0; }
.disclosure-inner strong { color: var(--text-dim); font-weight: 650; }