/* the cost of 3M lookups a month, ipdata against ipinfo and MaxMind (2026-10-10; kept, his pick 2026-10-12) */
.costs-section { padding: var(--space-3xl) 0; position: relative; z-index: 1; }   /* 64px above and below, the same on both sides of its markers (his asks, 2026-10-13) */
.costs-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.costs-copy h2 { margin-top: var(--space-xl); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.costs-copy .section-description { margin-top: var(--space-md); max-width: 44ch; }
.costs-link { display: inline-block; margin-top: var(--space-lg); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text-primary); }
.costs-link span { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); }
.costs-link:hover span { transform: translateX(3px); }
.costs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.costs-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.costs-stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.costs-stat-lead, .costs-stat-tail { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); }
.costs-card { border: 1px solid var(--border); background: var(--bg-primary); }
.costs-card-head { padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); }
.costs-card-head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.costs-card-head p { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.costs-row { padding: var(--space-md) var(--space-xl); border-bottom: 1px solid var(--border); }
.costs-row-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.costs-who { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.costs-who small { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.04em; }
.costs-mark { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.costs-price { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.costs-price small { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); margin-right: 0.3rem; }
.costs-bar { height: 10px; margin-top: 0.7rem; background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.costs-bar i { display: block; height: 100%; width: max(6px, calc(var(--share) * 1%)); background: color-mix(in srgb, var(--text-primary) 28%, transparent); }
.costs-row--us .costs-bar i { background: var(--accent); }
.costs-foot { padding: var(--space-md) var(--space-xl); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 1023px) { .costs-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 359px) { .costs-row { padding-left: var(--space-md); padding-right: var(--space-md); } .costs-row-top { flex-wrap: wrap; row-gap: 0.1rem; } .costs-who { min-width: 0; } .costs-price { flex-basis: 100%; } }   /* the narrowest phones (2026-10-12): every price on its own line under the name, the same in each row, instead of running past the edge */
/* the uptime section after costs (2026-10-11), in the costs section's form: the copy at the left, a card at the right */
.uptime-section { padding: var(--space-3xl) 0; position: relative; z-index: 1; }   /* the same */
.up-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }   /* the copy starts level with the card, right under the headline (2026-10-14) */   /* 5:8 and a tighter gap since 2026-10-12: the month grid wants every pixel of width */
.up-head { margin-bottom: var(--space-xl); }   /* back in the copy column since 2026-10-14, the headline now short enough: the card's top is level with the eyebrow */
.up-head h2 { margin-top: var(--space-xl); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; }
.up-copy > :first-child { margin-top: 0; }
.up-copy .section-description { margin-top: var(--space-md); max-width: 44ch; }
.up-links { display: flex; flex-wrap: wrap; gap: 0.6rem var(--space-xl); margin-top: var(--space-lg); }
.up-link { display: inline-block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--text-primary); }
.up-link span { display: inline-block; transition: transform var(--duration-fast) var(--ease-out); } .up-link:hover span { transform: translateX(3px); }
.up-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 1px solid var(--border); }
.up-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.up-stat b { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.up-stat-lead, .up-stat-tail { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); }
.up-card { position: relative; border: 1px solid var(--border); background: var(--bg-primary); }
.up-card-head { padding: var(--space-lg) var(--space-xl); border-bottom: 1px solid var(--border); }
.up-card-head h3 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
.up-card-head p { margin-top: 0.25rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
/* the month grid: a row per year, newest first, the year's mean beside it; a cell carries the month's uptime (2026-10-12, from updown.io's figures in data/latency-months.json) */
.up-cal { container-type: inline-size; display: grid; gap: 6px; padding: var(--space-lg); border-bottom: 1px solid var(--border); }
.up-cal-row { display: grid; grid-template-columns: 3rem repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; }
.up-cal-head span { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.04em; text-align: center; color: var(--text-muted); }
.up-cal-year { font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.25; color: var(--text-muted); }
.up-cal-year b { display: block; font-weight: 500; color: var(--text-primary); }
.up-cal-year small { display: block; font-size: 0.62rem; }
.up-m { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 2px; background: #1a9f5a; font-family: var(--font-mono); font-style: normal; font-size: 0.66rem; font-size: clamp(0.6rem, 1.75cqw, 0.72rem); letter-spacing: 0; color: var(--text-primary); overflow: hidden; }   /* the status green the response windows use; the figures in the mono face (Inter tried and reverted 2026-10-12) */
.up-m.sub { background: color-mix(in srgb, #1a9f5a 62%, var(--bg-primary)); }   /* a month under 100 */
.up-m.none { background: color-mix(in srgb, var(--text-primary) 5%, transparent); }   /* no measurement */
/* the hover card over a month cell (2026-10-12): the month's mean response time, its parts, the samples and each probe location, from the harvest's figures; pointer devices only, nothing until the file carries response times */
.up-tip { position: absolute; z-index: 6; width: 324px; padding: 0.8rem 0.95rem 0.85rem; transform: translate(-50%, -100%); border: 1px solid var(--border); border-radius: 6px; background: var(--bg-primary); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--text-primary) 35%, transparent); font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.6; color: var(--text-secondary); pointer-events: none; }   /* the text a step larger since 2026-10-12 (his ask) */
.up-tip[hidden] { display: none; }
.up-tip--below { transform: translate(-50%, 0); }   /* under the cell when the rows above leave no room */
.up-tip-h { display: block; font-size: 0.78rem; font-weight: 500; color: var(--text-primary); }
.up-tip-ms { display: inline-block; margin-top: 0.2rem; font-family: var(--font-sans); font-size: 1.7rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); }
.up-tip-sub { margin-left: 0.45rem; }
.up-tip-l { display: block; }
.up-tip-hosts { list-style: none; margin: 0.55rem 0 0; padding: 0.55rem 0 0; border-top: 1px solid var(--border); columns: 2; column-gap: 0.9rem; }
.up-tip-hosts li { display: flex; justify-content: space-between; gap: 0.5rem; break-inside: avoid; }
.up-tip-hosts li span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-tip-hosts li b { flex: none; white-space: nowrap; font-weight: 500; color: var(--text-primary); }
.up-foot { padding: var(--space-md) var(--space-xl); font-family: var(--font-mono); font-size: 0.66rem; line-height: 1.6; color: var(--text-muted); }
@media (max-width: 1099px) { .up-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); } }   /* one column sooner than before: the month grid needs the width */
/* PROTOTYPE ?up= (2026-10-12, "could you make this bigger"): two forms that give the month grid real room. years: the grid turned, a column per year and the months down the side, chronological left to right (the rows come newest first, so their order is reversed); wide: the card the full width under the copy, the stats beside the text */