/* IdleNet. Rebuilt 2026-09-23.

   Palette and system: paper ground, white panels, pure black hairlines, square corners everywhere,
   a deep green accent, and one inverted black section for rhythm. Type is Pixelify Sans for the big
   display lines (the pixel feel the user asked for), DM Sans for headings and reading, Geist Mono
   for labels, buttons and figures.

   Two surfaces share this file: index.html and app.html. Every figure on either comes from
   rates.js, and nothing on either is live. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Geist+Mono:wght@400;500&family=Pixelify+Sans:wght@400;500;600;700&display=swap");

:root {
  --paper: #efefed;
  --paper-2: #e8e8e6;
  --white: #ffffff;
  --ink: #000000;
  --muted: #4c4c4c;
  --subtle: #7a7a7a;
  --line: #000000;

  --accent: #0f3b2a;
  --accent-strong: #09291e;
  --tint: #ddb8ca;

  --pix: "Pixelify Sans", ui-monospace, monospace;
  --sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wide: 1240px;
  --gutter: clamp(16px, 3.4vw, 40px);
  --section: clamp(56px, 6.4vw, 92px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  /* the pixel face ligates fi into something that reads as A */
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg, img { display: block; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

/* ---------- type ---------- */
.pix { font-family: var(--pix); }
/* three lines, set by the breaks in the markup: the longest is INTERNET INTO */
h1 { font-family: var(--pix); font-weight: 700; font-size: clamp(34px, 5.4vw, 78px); line-height: 1.02; letter-spacing: -0.02em; }
h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(28px, 4vw, 54px); line-height: 1.06; letter-spacing: -0.03em; }
h2.pix { font-family: var(--pix); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
p { color: var(--muted); }
.lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--muted); line-height: 1.6; }
.small { font-size: 15px; color: var(--muted); }
.note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--subtle); text-transform: uppercase; line-height: 1.7; }
.ink { color: var(--ink); }
.blue, .green, .gold { color: var(--accent); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wide { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: var(--section); }
.sec-head { margin-bottom: clamp(22px, 3vw, 38px); }
.sec-n { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--subtle); margin-bottom: 14px; }
.sec-head p { max-width: 62ch; margin-top: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 36px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- panels: white, hairline, square ---------- */
.box { background: var(--white); border: 1px solid var(--line); padding: clamp(16px, 2vw, 26px); }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--mono); font-size: 14.5px; line-height: 1;
  height: 49px; padding: 0 18px; border: 1px solid var(--line); border-radius: 0;
  background: var(--ink); color: var(--white);
  transition: background 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }
.btn-gold { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-gold:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-sm { height: 40px; padding: 0 14px; font-size: 13px; }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---------- top bar ---------- */
/* the bar follows you down the page: the download is the point of the site */
.bar { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.ca { font-family: var(--mono); font-size: 13px; color: var(--subtle); }
.ca b { color: var(--ink); font-weight: 400; }
.btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pix); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.mark-img { width: 26px; height: auto; flex: none; }
.bar nav { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.bar nav a:hover { color: var(--ink); }
@media (max-width: 940px) { .bar nav { display: none; } }

/* ---------- prototype banner ---------- */
.flag { background: var(--ink); color: var(--white); }
.flag-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding-block: 9px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; text-align: center; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 5vw, 72px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(22px, 3.4vw, 48px); align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede { margin-top: 22px; max-width: 48ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; }

/* ---------- meters: progress in blocks ---------- */
.meter { display: flex; gap: 2px; margin-top: 14px; }
.meter i { flex: 1; height: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.meter i.on { background: var(--accent); }
.meter.is-green i.on { background: var(--accent); }
.meter-sm i { height: 11px; }

/* ---------- key/value rows ---------- */
.rows { display: grid; gap: 0; border: 1px solid var(--line); }
.rows > * + * { border-top: 1px solid var(--line); }
.kv { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: var(--white); }
.kv .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.kv .v { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }

/* ---------- state chips ---------- */
.states { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); background: var(--white); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--muted); }
.chip i { width: 7px; height: 7px; background: var(--subtle); flex: none; }
.chip.is-done { color: var(--accent); border-color: var(--accent); }
.chip.is-done i { background: var(--accent); }
.chip.is-now { color: var(--ink); }
.chip.is-now i { background: var(--ink); }
.states .sep { color: var(--subtle); font-family: var(--mono); font-size: 11px; }

/* ---------- numbered step tiles ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.steps > * { border-right: 1px solid var(--line); }
.steps > *:last-child { border-right: 0; }
.step { background: var(--white); }
.step .n { font-family: var(--mono); font-size: 12px; color: var(--subtle); }
.step h3 { margin: 12px 0 10px; }
.step p { font-size: 15px; }
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > * { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .steps > * { border-right: 0; } }

/* ---------- try it ---------- */
.try { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0; border: 1px solid var(--line); }
.try > .box { border: 0; }
.try > .box:first-child { border-right: 1px solid var(--line); background: var(--paper-2); }
@media (max-width: 860px) { .try { grid-template-columns: 1fr; } .try > .box:first-child { border-right: 0; border-bottom: 1px solid var(--line); } }
.opt { display: grid; gap: 8px; }
.opt button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid var(--line); background: var(--white); font-family: var(--mono); font-size: 13px; color: var(--muted); }
.opt button:hover { color: var(--ink); }
.opt button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.opt-label { display: block; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--subtle); margin-bottom: 10px; }
.out { display: grid; align-content: start; gap: 16px; }
.out .big { font-family: var(--pix); font-weight: 700; font-size: clamp(26px, 3.6vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- asset list ---------- */
.asset { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 13px; border: 1px solid var(--line); background: var(--white); }
.asset + .asset { margin-top: 8px; }
.asset.is-on { background: var(--paper-2); }
.tick { display: grid; place-items: center; height: 38px; border: 1px solid var(--line); background: var(--paper-2); font-family: var(--mono); font-size: 12px; }
.asset-name { font-family: var(--mono); font-size: 13.5px; }
.asset-sub { font-size: 14px; color: var(--subtle); }
.asset-pct { font-family: var(--mono); font-size: 13px; color: var(--accent); }

/* ---------- table ---------- */
.tbl { border: 1px solid var(--line); background: var(--white); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 13px 14px; border-bottom: 1px solid var(--line); background: var(--paper-2); white-space: nowrap; }
td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
td:first-child { color: var(--ink); }
tr:last-child td { border-bottom: 0; }

/* ---------- faq ---------- */
.faq { border: 1px solid var(--line); background: var(--white); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 16px; font-family: var(--sans); font-size: 19px; letter-spacing: -0.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 16px; color: var(--ink); }
.faq details[open] summary::after { content: "\00d7"; }
.faq p { padding: 0 16px 20px; font-size: 16px; max-width: 78ch; }

/* ---------- the inverted section ---------- */
.invert { background: var(--ink); color: var(--white); }
.invert h2, .invert .ink { color: var(--white); }
.invert p, .invert .lede { color: rgb(255 255 255 / 0.66); }
.invert .sec-n, .invert .note { color: rgb(255 255 255 / 0.5); }
.invert .steps, .invert .steps > * { border-color: rgb(255 255 255 / 0.28); }
.invert .step { background: transparent; }
.invert .step .n { color: rgb(255 255 255 / 0.5); }
.invert .blue, .invert .green, .invert .gold { color: var(--tint); }

/* ---------- closing + footer ---------- */
.closing { text-align: center; }
.closing h2 { margin-inline: auto; max-width: 20ch; }
.closing .hero-ctas { justify-content: center; }
footer { border-top: 1px solid var(--line); padding-block: 22px 30px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--subtle); }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-in a:hover { color: var(--ink); }

/* ---------- the app surface ---------- */
.app { padding-block: clamp(22px, 2.6vw, 36px) clamp(44px, 5.4vw, 76px); }
.app-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.app-head h1 { font-size: clamp(30px, 4.4vw, 60px); }
.app-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.app-grid > .box { grid-column: span 12; }
.col-7 { grid-column: span 7 !important; }
.col-5 { grid-column: span 5 !important; }
@media (max-width: 980px) { .col-7, .col-5 { grid-column: span 12 !important; } }
.figure { font-family: var(--mono); font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pair { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 16px; }
.pair b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; margin-bottom: 3px; }

/* switch: two states, square */
.switch { display: inline-flex; align-items: center; gap: 12px; }
.switch button { width: 54px; height: 28px; background: var(--paper-2); border: 1px solid var(--line); position: relative; }
.switch button::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--subtle); transition: transform 0.12s ease, background 0.12s ease; }
.switch button[aria-pressed="true"]::after { transform: translateX(24px); background: var(--accent); }
.switch b { font-family: var(--mono); font-size: 13px; font-weight: 500; }

.target { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.target:first-of-type { border-top: 0; padding-top: 0; }
.target-name { font-family: var(--mono); font-size: 13.5px; }
.target-sub { font-size: 14px; color: var(--subtle); }
.target-amt { font-family: var(--mono); font-size: 14px; }

/* the provider's rate card: a price list, not a promise, so it reads as a table and not a figure */
.rate-card { display: grid; border: 1px solid var(--line); background: var(--white); }
.tier { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.tier:last-child { border-bottom: 0; }
.tier-rate { font-family: var(--mono); font-size: 20px; letter-spacing: -0.01em; }
.tier-where { font-size: 15px; color: var(--muted); line-height: 1.5; }
.tier-zero { background: var(--paper-2); }
.tier-zero .tier-rate { color: var(--subtle); }
@media (max-width: 640px) { .tier { grid-template-columns: 1fr; gap: 6px; } }

/* the build behind the button: version, size and the hash to check it against */
.dl-meta { border: 1px solid var(--line); padding: 14px 16px; line-height: 1.5; }
.dl-meta .sha b { font-family: var(--mono); font-size: 10.5px; word-break: break-all; color: var(--ink); }

/* the documents: one column, ordinary reading measure, no motion */
.doc { padding: calc(var(--section) * 0.7) 0 var(--section); }
.doc .wide { max-width: 860px; }
.doc-h { font-family: var(--pix); font-size: clamp(26px, 4vw, 44px); line-height: 1.04; letter-spacing: -0.01em; margin: 10px 0 18px; }
.doc .lede { max-width: 64ch; }
.doc h2 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; margin: 34px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc p, .doc li { font-size: 15.5px; line-height: 1.62; color: var(--muted); max-width: 70ch; }
.doc p + p { margin-top: 10px; }
.doc ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; }
.doc b { color: var(--ink); font-weight: 500; }
.doc code { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.doc a { color: var(--ink); text-decoration: underline; }