/* =========================================================================
   Grand Valley — Apps Layer (2026-08-23)
   Additive, non-destructive: styles two surfaces the React build leaves
   empty or inert.
     1. /dashboard — the route renders an empty .app (no nav, no footer, no
        content). This layer mounts a real validator dashboard next to it.
     2. /tools     — the [LAUNCH] cards are plain divs with no href and no
        click handler; this layer makes them behave like the links they
        already look like, and adds the FAQ section the FAQ card points at.

   Design tokens are the ones the bundle already defines (--color-accent,
   --gold-*, --card-gradient, "Plus Jakarta Sans"). Nothing here overrides
   existing site rules; every selector is namespaced under .gv-*.
   ========================================================================= */

/* ---- local tokens: derived from the bundle's palette, never redefining it -- */
.gv-app {
  --gv-a: #ff6b00;
  --gv-a-lite: #ff8533;
  --gv-gold: #ffd157;
  --gv-amber: #ffc355;
  --gv-line: rgba(255, 255, 255, 0.1);
  --gv-line-warm: rgba(255, 163, 78, 0.28);
  --gv-txt: #fff;
  --gv-txt-2: rgba(255, 255, 255, 0.7);
  --gv-txt-3: rgba(255, 255, 255, 0.45);
  --gv-card: #101010;
  --gv-mono: "Fira Code", Consolas, Monaco, "Courier New", monospace;
}

/* =========================================================================
   Shell
   ========================================================================= */
.gv-app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: #000;
  color: var(--gv-txt);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  padding-bottom: 80px;
  overflow-x: hidden;
}
/* the amber wash the rest of the site opens with, reused as a page ambience */
.gv-app::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 620px;
  background: radial-gradient(
    ellipse 900px 420px at 50% -60px,
    rgba(255, 107, 0, 0.22) 0%,
    rgba(255, 163, 78, 0.08) 45%,
    transparent 72%
  );
  pointer-events: none;
}
.gv-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* while a gv-app surface owns the viewport, the bundle's page-transition
   overlay has nothing to hand off to — it would sit on top forever */
html.gv-app-active .page-transition-overlay {
  display: none !important;
}
html.gv-app-active .app {
  display: none;
}

/* ---- header ---- */
.gv-head {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 0 0;
}
.gv-head-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
.gv-head-brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.gv-head-brand span {
  font-family: var(--gv-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--gv-txt-2);
  text-transform: uppercase;
}
.gv-head-nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.gv-head-nav a {
  color: var(--gv-txt-2);
  text-decoration: none;
  font-size: 15px;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.2s ease;
}
.gv-head-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gv-a);
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.gv-head-nav a:hover {
  color: #fff;
}
.gv-head-nav a:hover::after {
  width: 100%;
}

/* ---- page title block ---- */
.gv-title {
  padding: 54px 0 30px;
}
.gv-eyebrow {
  font-family: var(--gv-mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gv-amber);
  margin: 0 0 14px;
}
.gv-title h1 {
  margin: 0;
  font-size: clamp(34px, 5.4vw, 60px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.gv-title p {
  margin: 16px 0 0;
  max-width: 620px;
  color: var(--gv-txt-2);
  font-size: 16px;
  line-height: 1.6;
}

/* ---- status pill row (same vocabulary as the hero chips) ---- */
.gv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.gv-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--gv-line);
  border-radius: 999px;
  font-family: var(--gv-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-txt-2);
  background: rgba(255, 255, 255, 0.02);
}
.gv-pill i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gv-txt-3);
  font-style: normal;
  flex: none;
}
.gv-pill.is-live i {
  background: #3ddc84;
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.8);
}
.gv-pill.is-warn i {
  background: var(--gv-amber);
}

/* =========================================================================
   Section + card primitives
   ========================================================================= */
.gv-sec {
  padding: 46px 0 0;
}
.gv-sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gv-line);
  padding-bottom: 12px;
}
.gv-sec-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gv-sec-head .gv-sec-note {
  margin-left: auto;
  font-family: var(--gv-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
}

.gv-card {
  position: relative;
  background: var(--gv-card);
  border: 1px solid var(--gv-line);
  border-radius: 16px;
  padding: 22px;
  overflow: hidden;
}
/* the warm top edge the project/blog cards already use */
.gv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 210, 87, 0.55) 35%,
    rgba(255, 115, 0, 0.55) 65%,
    transparent 100%
  );
}

/* =========================================================================
   Stat grid
   ========================================================================= */
.gv-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
/* a single row of three — never collapses to 2+1 on mid widths */
.gv-stats-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gv-endpoint {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}
.gv-endpoint code {
  font-family: var(--gv-mono);
  font-size: 12.5px;
  color: var(--gv-gold);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 6px 9px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.gv-stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 132px;
}
.gv-stat-label {
  font-family: var(--gv-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
}
.gv-stat-value {
  font-size: clamp(24px, 2.7vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* unit sits with the number but never competes with it for size */
.gv-stat-value .gv-u,
.gv-calc-out dd .gv-u {
  font-size: 0.62em;
  font-weight: 500;
  color: var(--gv-txt-2);
  margin-left: 4px;
  letter-spacing: 0;
}
.gv-stat-value.is-pending {
  color: var(--gv-txt-3);
}
.gv-stat-sub {
  margin-top: auto;
  font-size: 13px;
  color: var(--gv-txt-2);
  line-height: 1.45;
}
.gv-stat-sub b {
  color: var(--gv-amber);
  font-weight: 500;
}

/* =========================================================================
   Identity card
   ========================================================================= */
.gv-id {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 28px;
}
.gv-id-details {
  margin: 14px 0 0;
  color: var(--gv-txt-2);
  font-size: 15px;
  line-height: 1.65;
}
.gv-id-moniker {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gv-id-moniker img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
}
.gv-id-moniker h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gv-kv {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 10px 16px;
  align-items: start;
  font-size: 14px;
}
.gv-kv dt {
  font-family: var(--gv-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
  padding-top: 3px;
}
.gv-kv dd {
  margin: 0;
  color: var(--gv-txt);
  overflow-wrap: anywhere;
}
.gv-kv dd a {
  color: var(--gv-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 195, 85, 0.35);
}
.gv-kv dd a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.gv-mono {
  font-family: var(--gv-mono);
  font-size: 13px;
}

.gv-copy {
  margin-left: 8px;
  background: transparent;
  border: 1px solid var(--gv-line);
  color: var(--gv-txt-3);
  border-radius: 6px;
  font-family: var(--gv-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  vertical-align: middle;
}
.gv-copy:hover {
  color: var(--gv-amber);
  border-color: var(--gv-line-warm);
}
.gv-copy.is-done {
  color: #3ddc84;
  border-color: rgba(61, 220, 132, 0.5);
}

/* =========================================================================
   Buttons
   ========================================================================= */
.gv-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid var(--gv-line-warm);
  background: linear-gradient(135deg, #ff6b00 0%, #ff8533 50%, #ffaa00 100%);
  color: #140b00;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.gv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 107, 0, 0.28);
}
.gv-btn.is-ghost {
  background: transparent;
  color: var(--gv-txt);
  border-color: var(--gv-line);
}
.gv-btn.is-ghost:hover {
  border-color: var(--gv-line-warm);
  box-shadow: none;
}
.gv-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* =========================================================================
   Calculator
   ========================================================================= */
.gv-calc {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 26px;
}
.gv-field {
  display: block;
  margin-bottom: 18px;
}
.gv-field > span {
  display: block;
  font-family: var(--gv-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
  margin-bottom: 8px;
}
.gv-input {
  display: flex;
  align-items: center;
  border: 1px solid var(--gv-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease;
}
.gv-input:focus-within {
  border-color: var(--gv-line-warm);
}
.gv-input input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-family: var(--gv-mono);
  font-size: 16px;
  padding: 12px 14px;
  -moz-appearance: textfield;
  appearance: textfield;
}
.gv-input input::-webkit-outer-spin-button,
.gv-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gv-input em {
  font-style: normal;
  font-family: var(--gv-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--gv-txt-3);
  padding-right: 14px;
}
.gv-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: -6px;
}
.gv-presets button {
  background: transparent;
  border: 1px solid var(--gv-line);
  color: var(--gv-txt-2);
  border-radius: 999px;
  padding: 6px 13px;
  font-family: var(--gv-mono);
  font-size: 11px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.gv-presets button:hover {
  color: var(--gv-amber);
  border-color: var(--gv-line-warm);
}

.gv-calc-out {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--gv-line);
  border: 1px solid var(--gv-line);
  border-radius: 12px;
  overflow: hidden;
}
.gv-calc-out div {
  background: #0b0b0b;
  padding: 18px;
}
.gv-calc-out dt {
  font-family: var(--gv-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
  margin-bottom: 9px;
}
.gv-calc-out dd {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.gv-calc-out dd small {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--gv-txt-2);
}
.gv-calc-out .is-net dd {
  color: var(--gv-gold);
}
.gv-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gv-txt-3);
}
.gv-note b {
  color: var(--gv-txt-2);
  font-weight: 500;
}

/* =========================================================================
   Networks table
   ========================================================================= */
.gv-table-scroll {
  overflow-x: auto;
  border: 1px solid var(--gv-line);
  border-radius: 14px;
}
.gv-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 14px;
}
.gv-table th,
.gv-table td {
  text-align: left;
  padding: 15px 18px;
  border-bottom: 1px solid var(--gv-line);
  vertical-align: middle;
}
.gv-table th {
  font-family: var(--gv-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
  font-weight: 400;
  background: rgba(255, 255, 255, 0.02);
}
.gv-table tr:last-child td {
  border-bottom: 0;
}
.gv-net {
  display: flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
}
.gv-net img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
  flex: none;
}
.gv-tag {
  display: inline-block;
  font-family: var(--gv-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--gv-line);
  color: var(--gv-txt-2);
}
.gv-tag.is-live {
  color: #3ddc84;
  border-color: rgba(61, 220, 132, 0.4);
}
.gv-tag.is-off {
  color: var(--gv-txt-3);
}
.gv-table a {
  color: var(--gv-amber);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 195, 85, 0.3);
}
.gv-table a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* =========================================================================
   Provenance
   ========================================================================= */
.gv-src {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.gv-src .gv-card {
  padding: 18px;
}
.gv-src h4 {
  margin: 0 0 8px;
  font-family: var(--gv-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
  font-weight: 400;
}
.gv-src p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--gv-txt-2);
  /* only break where a word genuinely does not fit (long addresses / urls),
     never mid-word in prose */
  overflow-wrap: anywhere;
}

/* ---- footer ---- */
.gv-foot {
  margin-top: 58px;
  padding-top: 22px;
  border-top: 1px solid var(--gv-line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 26px;
  align-items: center;
  font-family: var(--gv-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gv-txt-3);
}
.gv-foot a {
  color: var(--gv-txt-2);
  text-decoration: none;
}
.gv-foot a:hover {
  color: var(--gv-amber);
}
.gv-foot .gv-foot-end {
  margin-left: auto;
}

/* =========================================================================
   Guides index (/guide)
   ========================================================================= */
.gv-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.gv-guide-card h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gv-guide-card p {
  margin: 0 0 16px;
  color: var(--gv-txt-2);
  font-size: 14px;
  line-height: 1.6;
}
.gv-guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gv-guide-links a {
  font-family: var(--gv-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--gv-amber);
  text-decoration: none;
  border: 1px solid var(--gv-line);
  border-radius: 999px;
  padding: 7px 13px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.gv-guide-links a:hover {
  color: #fff;
  border-color: var(--gv-line-warm);
}

.gv-guide-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gv-guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 11px 18px;
  border: 1px solid var(--gv-line);
  border-radius: 12px;
  background: var(--gv-card);
  color: var(--gv-txt);
  text-decoration: none;
  font-size: 14.5px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease, color 0.25s ease;
}
.gv-guide-chip:hover {
  transform: translateY(-2px);
  border-color: var(--gv-line-warm);
  color: var(--gv-gold);
}

/* =========================================================================
   /blog — display repairs
   ========================================================================= */

/* The title clipped on every card, leaving the last word bleeding under the
   divider. Clamp it honestly with an ellipsis and give it room for a third
   line, which is what the longer headlines actually need. */
/* The bundle sets `display: flow-root` on the title, which silently disables
   -webkit-line-clamp — the clamp needs -webkit-box. The element was then left
   at 3.4 lines tall with overflow hidden, so a fourth line showed a sliver of
   itself under the divider. !important is the only lever here: the rule lives
   in a compiled stylesheet this layer cannot edit. max-height pins it to three
   whole lines so the cut lands cleanly even where the clamp is unsupported. */
.blog-card .blog-card-content .blog-card-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.24;
  max-height: calc(1.24em * 3);
}

/* Justified copy at this column width opens rivers of white space. */
.blog-card .blog-card-description,
.blog-card p {
  text-align: left;
  hyphens: none;
}
.blog-card .blog-card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The card carried a category tag and an "↗ Medium" badge saying the same
   word. JS marks the redundant one only when the two texts match. */
.blog-card .blog-category-tag.gv-dup-badge {
  display: none;
}

/* Filtering to a category with no posts used to blank the page in silence. */
.gv-blog-empty {
  grid-column: 1 / -1;
  padding: 48px 24px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  text-align: center;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}
.gv-blog-empty p {
  margin: 0;
  color: #fff;
  font-size: 17px;
}
.gv-blog-empty .gv-blog-empty-sub {
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.gv-blog-empty b {
  color: #ffc355;
  font-weight: 500;
}
.gv-blog-empty a {
  color: #ffc355;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 195, 85, 0.35);
}
.gv-blog-empty a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* =========================================================================
   404 fallback
   ========================================================================= */
.gv-404 {
  padding: 74px 0 40px;
  max-width: 780px;
}
.gv-404 h1 {
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.gv-404 > p {
  margin: 18px 0 0;
  color: var(--gv-txt-2);
  font-size: 16px;
  line-height: 1.65;
}
.gv-404 code {
  font-family: var(--gv-mono);
  font-size: 14px;
  color: var(--gv-gold);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 5px;
  padding: 2px 7px;
  overflow-wrap: anywhere;
}
.gv-404-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 34px;
}
.gv-404-card {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--gv-line);
  border-radius: 14px;
  background: var(--gv-card);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.gv-404-card:hover {
  transform: translateY(-3px);
  border-color: var(--gv-line-warm);
}
.gv-404-card b {
  display: block;
  color: var(--gv-txt);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.gv-404-card span {
  display: block;
  color: var(--gv-txt-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* =========================================================================
   /tools — make the inert [LAUNCH] cards behave like links
   The bundle renders them as <div class="tool-card">; this layer only adds
   affordance (cursor, focus ring, hover lift). Card visuals stay untouched.
   ========================================================================= */
.tool-card.gv-live-card,
.top-tool-card.gv-live-card {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.tool-card.gv-live-card:hover,
.top-tool-card.gv-live-card:hover {
  transform: translateY(-3px);
}
.tool-card.gv-live-card:focus-visible,
.top-tool-card.gv-live-card:focus-visible {
  outline: 2px solid var(--color-accent, #ff6b00);
  outline-offset: 3px;
}
/* Card copy ships justified, which opens rivers of white space at this
   column width ("Step-by-step    guide    to    run"). */
.tool-card .tool-description,
.top-tool-card .tool-description,
.tool-card p,
.top-tool-card p {
  text-align: left;
  hyphens: none;
}

/* Brand marks stand in for the stock photography the seed data used. They
   are logos, not photographs, so they need room rather than a crop. */
.top-tool-card.gv-top-logo .tool-card-image {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 214, 150, 0.3) 0%, rgba(255, 150, 60, 0.1) 45%, transparent 72%),
    #131313;
}
.top-tool-card.gv-top-logo .tool-card-image img {
  object-fit: contain;
  padding: 26px;
  width: 100%;
  height: 100%;
}

/* Narrow screens: the card's own rules clamp the description to a single
   line and shrink the artwork to a dot. Give the copy the room it needs and
   scale the padding with the card. */
@media (max-width: 760px) {
  /* Every child of the card is absolutely positioned, so the card's height
     has to stay explicit — `height: auto` collapses it to its borders. The
     card ships at 34.8vw, which is 136px on a phone: shorter than its own
     artwork. Given a real height, the copy fits without clipping. */
  .top-tool-card {
    height: 350px;
  }
  .top-tool-card .tool-card-image {
    height: 185px;
  }
  .top-tool-card.gv-top-logo .tool-card-image img {
    padding: 16px;
  }
  .top-tool-card .tool-card-content {
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-bottom: 18px;
  }
  .top-tool-card .tool-description {
    -webkit-line-clamp: unset;
    display: block;
    max-height: none;
    height: auto;
    overflow: visible;
    font-size: 14px;
    line-height: 1.55;
  }
}

/* =========================================================================
   /tools — FAQ block (the destination the FAQ card never had)
   ========================================================================= */
.gv-faq {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px 20px;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
}
.gv-faq h2 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.gv-faq > p {
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}
.gv-faq-item {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.gv-faq-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.gv-faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-size: 16.5px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.gv-faq-item summary::-webkit-details-marker {
  display: none;
}
.gv-faq-item summary:hover {
  color: #ffc355;
}
.gv-faq-item summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  line-height: 1;
  color: #ffc355;
  transition: transform 0.25s ease;
}
.gv-faq-item[open] summary::after {
  content: "−";
}
.gv-faq-item .gv-faq-body {
  padding: 0 44px 22px 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.7;
}
.gv-faq-item .gv-faq-body a {
  color: #ffc355;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 195, 85, 0.35);
}
.gv-faq-item .gv-faq-body a:hover {
  color: #fff;
  border-bottom-color: #fff;
}
.gv-faq-item .gv-faq-body code {
  font-family: "Fira Code", Consolas, Monaco, monospace;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 2px 6px;
  word-break: break-all;
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1000px) {
  .gv-stats,
  .gv-calc-out {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  .gv-id,
  .gv-calc {
    grid-template-columns: minmax(0, 1fr);
  }
  .gv-head-nav {
    gap: 18px;
  }
}
@media (max-width: 560px) {
  .gv-stats {
    grid-template-columns: minmax(0, 1fr);
  }
  .gv-stat {
    min-height: 0;
  }
  /* the provenance note competes with the heading at this width — the
     "Where these numbers come from" section says the same thing in full */
  .gv-sec-head .gv-sec-note {
    display: none;
  }
}
@media (max-width: 640px) {
  .gv-wrap {
    padding: 0 18px;
  }
  .gv-head {
    flex-wrap: wrap;
    gap: 14px;
  }
  .gv-head-nav {
    margin-left: 0;
    width: 100%;
  }
  .gv-title {
    padding: 34px 0 22px;
  }
  .gv-kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 0;
  }
  .gv-kv dt {
    margin-top: 12px;
  }
  .gv-faq {
    padding: 44px 18px 20px;
  }
}

/* Honour the same accessibility contract as the motion layer. */
@media (prefers-reduced-motion: reduce) {
  .gv-app *,
  .gv-faq * {
    transition: none !important;
    animation: none !important;
  }
}