/* Rootpad v3: the home page (docs/design-v3/DESIGN.md §5.1, mock panel 1). Loaded after css/site.css by index.html
   only. Owner: H (HOME). Every rule is scoped under main.home and uses the base tokens; nothing here moves (no
   transition, no keyframes, no motion block: the one motion block of site.css covers the bars, the counts and the
   hero's backlight). Mobile first: phones, then 600px, 900px (two hero columns, the coin table) and 1080px. */

.home {
  --sec-title: clamp(24px, 2.6vw, 30px);
  --tap: 44px;
}

/* ------------------------------------------------------------ sections */
.home .section { padding-block: var(--s8); }
.home .coins-section { padding-top: var(--s6); }
.home .section-head { max-width: 720px; margin-bottom: var(--s6); }
.home .section-head h2,
.home .list-title h2,
.home .ug-copy h2,
.home .stats-section h2,
.home .field-note h2 {
  font-size: var(--sec-title);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.home .section-head .lead { margin: 0; font-size: var(--fs-body); }
.home .cta-row.center { justify-content: center; }
/* a link on a line of its own is a whole tap target (links inside a sentence stay text) */
.home .hero-more .text-link,
.home .center-link .text-link,
.home .who .text-link {
  min-height: var(--tap);
}
@media (min-width: 900px) {
  .home .section { padding-block: var(--s9); }
  .home .coins-section { padding-top: var(--s7); }
}

/* ------------------------------------------------------------ hero (mock panel 1) */
/* nothing the hero draws may widen the page: its box clips (the art, the backlight, the bubble) */
.home .hero {
  position: relative;
  overflow: clip;
  padding-block: var(--s6) var(--s7);
  background: radial-gradient(ellipse 52% 62% at 76% 34%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
}
.home .hero-grid {
  display: grid;
  gap: var(--s5);
}
.home .hero-copy > * { margin-block: 0; }
.home .hero-badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* the mock's two badges: the base pill shape (DESIGN §3.4: radius --r-pill) in capitals, tracked like the banner's */
.home .hero-badges .pill { letter-spacing: 0.06em; text-transform: uppercase; }
.home .display {
  margin-top: var(--s4);
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.03em;
}
/* two lines at every width: "Every coin" / "has roots." */
.home .display .line { display: block; }
.home .root-word { color: var(--accent-hover); }
.home .hero-sub {
  max-width: 520px;
  margin-top: var(--s4);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.5;
}
.home .hero .lead {
  max-width: 520px;
  margin-top: var(--s3);
  font-size: 15px;
  line-height: 1.55;
}
.home .hero .cta-row { margin-top: var(--s5); }
.home .hero-more { margin-top: var(--s1); }
.home .hero .core { margin-top: var(--s2); color: var(--muted); font-size: var(--fs-sm); }
.home .hero .core [data-i18n='home.core1'] { color: var(--text); font-weight: 700; }
.home .trust-strip {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--s3);
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
/* each fact stays whole: a line breaks only between two facts, after the dot */
.home .trust-strip li {
  white-space: nowrap;
}
.home .trust-strip li:not(:last-child)::after { content: '·'; margin-inline: var(--s2); color: var(--soft); }

/* Dig: the picture fades into the page on every edge (site.css .hero-art: the fades and the backlight), his own line,
   signed "Dig", under him */
.home .hero-side { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.home .hero-art img {
  aspect-ratio: 560 / 512;
}
/* his line stays in the flow under him at every width (DESIGN §5.1: "with Dig's bubble under it"), so it never covers
   the art; it tucks into the art's faded foot */
.home .dig-say {
  position: relative;
  z-index: 1;
  max-width: 300px;
  margin: calc(-1 * var(--s5)) auto 0;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--card);
}
/* the tail points up at Dig */
.home .dig-say::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  background: var(--card);
  transform: translateX(-50%) rotate(45deg);
}
.home .dig-say blockquote,
.home .quote-line blockquote { margin: 0; }
.home .dig-say blockquote p,
.home .quote-line blockquote p { margin: 0; color: var(--text); font-size: 15px; font-style: italic; line-height: 1.45; }
.home .dig-say figcaption,
.home .quote-line figcaption { margin-top: var(--s1); color: var(--muted); font-size: 13px; font-weight: 700; }
.home .dig-say figcaption::before,
.home .quote-line figcaption::before { content: '— '; }

/* the three facts under the hero: a green line icon, a big word, one muted line (phones: icon on the left) */
.home .hero-foot { margin-top: var(--s6); }
.home .features { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.home .fact { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--s4); align-content: start; align-items: start; margin: 0; }
.home .fact-icon {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  background: var(--accent);
  -webkit-mask: var(--icon) center / 32px 32px no-repeat;
  mask: var(--icon) center / 32px 32px no-repeat;
}
.home .fact-v { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.home .fact-v [data-c] { font-variant-numeric: tabular-nums; }
.home .fact-t { margin: 2px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
/* the live line is filled after the read: it keeps room for 3 lines on phones (2 from 600px), so nothing below moves */
.home .hero-live {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 58.5px;
  margin: var(--s4) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.home .hero-live .live-dot { flex: 0 0 8px; }
.home .hero-live .num { color: var(--text); }
.home .live-block { white-space: nowrap; }

@media (max-width: 599px) {
  /* phones: the two hero buttons share one row while both fit (375px and up), half each; at 320px they stack */
  .home .hero .cta-row {
    flex-direction: row;
  }
  .home .hero .cta-row .btn {
    flex: 1 1 140px;
    min-height: 48px;
    padding-inline: var(--s3);
  }
}
@media (min-width: 600px) {
  .home .hero-sub { font-size: 18px; }
  .home .hero .lead { font-size: var(--fs-body); }
  .home .hero-side { max-width: 420px; }
  .home .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
  .home .fact { grid-template-columns: minmax(0, 1fr); }
  .home .fact-icon { grid-row: auto; margin-bottom: var(--s4); }
  .home .hero-live {
    min-height: 39px;
  }
}
@media (min-width: 900px) {
  .home .hero {
    padding-block: 64px var(--s6);
  }
  .home .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s7);
    align-items: center;
    min-height: 560px;
  }
  .home .hero-side { max-width: 560px; margin-right: 0; }
  .home .hero-foot { margin-top: var(--s4); }
  .home .fact { padding: var(--s5); }
  .home .fact-icon { margin-bottom: var(--s5); }
  .home .fact-v { font-size: var(--fs-num); }
}
/* the 1200px page leaves Dig's column 524px wide: he takes the column gap too, so he is drawn at his 560px (§5.1) */
@media (min-width: 1080px) {
  .home .hero-side { width: calc(100% + var(--s7)); margin-left: calc(-1 * var(--s7)); }
}

/* ------------------------------------------------------------ the coins preview (lib/coinrow.js) */
.home .list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3) var(--s4);
  margin-bottom: var(--s3);
}
.home .list-title h2 { margin: 0; }
.home .list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.home #sort-note { margin: 0 0 var(--s4); }
.home #list-state > * { margin-bottom: var(--s4); }
.home .state-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.home .state-row .alert { flex: 1 1 280px; margin: 0; }
.home .home-table .coin-cell > div { min-width: 0; }
/* the progress bars of the rows start at one edge, whatever the width of their percentage */
.home .home-table .prog-cell .num { min-width: 5ch; }
/* a value never splits from its unit ("0.0₅91 ETH", "0.02%") */
.home #coins .num {
  white-space: nowrap;
}
/* why a graduated coin's price is "—" here (shown only when such a row is) */
.home #price-note { margin: var(--s3) 0 0; }
.home .show-more { margin-top: var(--s4); }
/* the count and the read time: the list's footer line, after the rows */
.home #list-meta {
  margin: var(--s3) 0 0;
}
/* touch (a phone, or any screen that can be touched): the order switch, Refresh and each row's Buy / View are whole
   tap targets */
@media (max-width: 899px), (any-pointer: coarse) {
  .home .list-tools .seg span,
  .home .list-tools .chip,
  .home #coins .btn {
    min-height: var(--tap);
  }
}

/* ------------------------------------------------------------ "Right now, on the chain" */
.home .stats-section { padding-top: 0; }
.home .stats-section h2 { margin-bottom: var(--s4); }
.home .stats-section .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.home .stats-section .stat-v { font-size: 22px; }
.home #st-read .stat-v { font-size: var(--fs-body); }
/* the block number in mono 400 (§2.4), not the tile's 700: the home then loads one mono face, not two (QA home-3) */
.home #st-read .stat-v .mono { font-weight: 400; }
.home #st-root .stat-v { white-space: nowrap; }
/* phones, in the markup's order (QA home-1): the two counts share a row, ETH and block a row each (never overflow) */
@media (max-width: 599px) {
  .home #st-root,
  .home #st-read { grid-column: span 2; }
}
@media (min-width: 900px) {
  /* min-content: a column never narrower than its one-line ETH value (it ran 22 px past its tile at 900 px) */
  .home .stats-section .stat-grid { grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: var(--s4); }
  .home .stats-section .stat-v { font-size: var(--fs-num); }
  .home #st-read .stat-v { font-size: 18px; }
}
/* "What each number means" under the tiles (the base details.defs, DESIGN §3.8): a readable line length; a formula
   breaks rather than widen a phone; the home's note on a number (what this page leaves out of it) under its definition */
.home #home-defs dd { max-width: 76ch; overflow-wrap: break-word; }
.home #home-defs .def-note { margin-top: var(--s2); color: var(--text); }

/* ------------------------------------------------------------ what the Root vault is (and isn't), what feeds it */
.home .underground { border-block: 1px solid var(--line); background: var(--bg-2); }
.home .ug-grid { display: grid; gap: var(--s6); }
.home .ug-story { max-width: 60ch; color: var(--muted); font-size: 17px; }
.home .is-isnt { display: grid; gap: var(--s4); }
.home .is-isnt .card,
.home .ug-art .card { margin: 0; }
.home .mark-list { display: grid; gap: var(--s3); margin: 0; padding: 0; list-style: none; font-size: 15px; }
.home .mark-list li,
.home .honest-list li { position: relative; padding-left: 28px; }
.home .mark-list li::before,
.home .honest-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask: url('/img/ui/check.svg') center / 18px 18px no-repeat;
  mask: url('/img/ui/check.svg') center / 18px 18px no-repeat;
}
.home .mark-list.no li::before {
  background: var(--danger);
  -webkit-mask-image: url('/img/ui/close.svg');
  mask-image: url('/img/ui/close.svg');
}
.home .ug-art,
.home .flow-panel { display: grid; gap: var(--s4); }
.home .flow-panel { gap: var(--s3); }
.home .flow-label,
.home .formula-label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home .root-flows { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; font-size: 15px; }
.home .root-flows li {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--card-2);
}
.home .flows-out li { border-left-color: var(--gold); }
/* the vault between what goes in and what comes out: the gold glyph on a line */
.home .vault-node { display: flex; align-items: center; gap: var(--s3); }
.home .vault-node::before,
.home .vault-node::after { content: ''; flex: 1; height: 1px; background: var(--line-strong); }
.home .vault-glyph { width: 52px; height: 52px; border: 1px solid var(--amber-line); border-radius: 50%; background: var(--amber-bg); }
.home .vault-glyph::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  -webkit-mask: url('/img/ui/vault.svg') center / 28px 28px no-repeat;
  mask: url('/img/ui/vault.svg') center / 28px 28px no-repeat;
}
.home .formula code {
  display: block;
  margin-block: var(--s2);
  padding: var(--s3);
  border-radius: var(--r);
  background: var(--card-2);
  color: var(--text);
  overflow-wrap: anywhere;
}
.home .formula p:last-child { color: var(--muted); font-size: var(--fs-sm); }
.home .rules-block { margin-top: var(--s8); }
.home .rules-block h3 { font-size: var(--fs-h2); }
.home .rules { display: grid; gap: var(--s3); margin: var(--s4) 0; padding: 0; list-style: none; }
/* align-content: start: each card's text starts at one height, however tall the others are (QA home-2) */
.home .rules .card { display: grid; align-content: start; gap: var(--s1); margin: 0; }
.home .rule-v { font-size: var(--fs-num); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.home .rule-t,
.home .rules-extra { color: var(--muted); font-size: 15px; }
.home .rules-extra { margin-bottom: var(--s1); }
.home .ug-cta { margin-top: var(--s6); }
@media (min-width: 600px) {
  .home .is-isnt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .home .ug-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--s8); align-items: start; }
}

/* ------------------------------------------------------------ how a coin grows: four cards (phones: a timeline) */
.home .how { display: grid; gap: var(--s4); margin: 0; padding: 0; list-style: none; }
.home .how > li {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.home .how h3 { margin: var(--s3) 0 var(--s2); }
.home .how p { color: var(--muted); font-size: 15px; }
.home .step-num {
  position: absolute;
  top: var(--pad);
  right: var(--pad);
  padding: 2px 10px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* one family of line icons, drawn inline: soil grey, the plant green, the Root vault gold */
.home .step-icon svg { display: block; width: 48px; height: 48px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home .step-icon .i-soil { stroke: var(--soft); }
.home .step-icon .i-moss { stroke: var(--accent); }
.home .step-icon .i-gold { stroke: var(--gold); }
.home .step-icon .i-dot { fill: var(--gold); }
/* what happens to the Root vault, in the card's footer strip: one face, no orphan word */
.home .how .root-strip {
  margin: auto calc(-1 * var(--pad)) calc(-1 * var(--pad));
  padding: var(--s3) var(--pad);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--card-2);
  color: var(--text);
  font-size: var(--fs-sm);
  text-wrap: balance;
}
.home .how .root-strip [data-c] {
  font: inherit;
}
.home .center-link { margin: var(--s5) 0 0; text-align: center; }
@media (max-width: 599px) {
  /* the stages stacked, joined by a line */
  .home .how > li + li::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--s4) - 1px);
    left: 39px;
    width: 2px;
    height: var(--s4);
    background: var(--line-strong);
  }
}
@media (min-width: 600px) {
  .home .how { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* side by side: each strip 2 lines tall at least (1.55 x 14px, padding, border), so their tops line up (QA home-2) */
  .home .how .root-strip { min-height: calc(3.1em + 2 * var(--s3) + 1px); }
}
@media (min-width: 1080px) {
  .home .how { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ who else lives here: Fungi and Dig */
.home .trio-grid { display: grid; gap: var(--s4); }
.home .who { margin: 0; }
.home .who .mascot-head { display: block; width: 96px; height: 96px; margin-bottom: var(--s4); }
.home .who .kicker { color: var(--accent); }
.home .who h3 { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-h2); }
.home .who p { color: var(--muted); }
.home .who .strong-line { color: var(--text); font-weight: 700; }
.home .quote-line {
  margin: 0 0 var(--s4);
  padding: var(--s3) var(--s4);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--card-2);
}
@media (min-width: 900px) {
  .home .trio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}

/* ------------------------------------------------------------ before you dig in; questions people ask */
.home .field-note { max-width: 860px; margin: 0 auto; padding: var(--s6); border-left: 3px solid var(--amber); }
.home .honest-list { display: grid; gap: 10px; margin: var(--s4) 0 var(--s5); padding: 0; list-style: none; }
.home .honest-list li::before {
  background: var(--amber);
  -webkit-mask-image: url('/img/ui/caution.svg');
  mask-image: url('/img/ui/caution.svg');
}
.home .faq-cards { display: grid; gap: var(--s3); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.home .faq-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s3);
  height: 100%;
  margin: 0;
}
.home .faq-card .q { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.home .faq-card .more { color: var(--accent); font-size: var(--fs-sm); font-weight: 700; }
@media (max-width: 599px) {
  /* phones: the buttons of a call-to-action row below the hero are full width (never some full and some not) */
  .home .ug-cta .btn,
  .home .field-note .cta-row .btn,
  .home .faq-teaser .cta-row .btn { flex: 1 1 100%; }
  .home .field-note { padding: var(--s5); }
}
@media (min-width: 600px) {
  .home .faq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
  .home .faq-card { min-height: 120px; }
}
@media (min-width: 1080px) {
  .home .faq-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------ forced colours: the line icons stay visible */
@media (forced-colors: active) {
  .home .fact-icon,
  .home .mark-list li::before,
  .home .honest-list li::before,
  .home .vault-glyph::before {
    forced-color-adjust: none;
    background-color: CanvasText;
  }
}