/* ResiProx redesign mockups (29 Oct 2026): shared base for every option (option A = this file alone; B-F add a theme file); brand colours from the logo
   (#10c465 / #24fd8a / #0f4e28) and the current site (#0cf57e on near-black). No framework, no icon font. */
/* Size-adjusted Arial stands in until the web fonts arrive, so text keeps its size and nothing shifts (metrics measured
   with fontmetrics.html). Production: self-host the fonts, preload them, and add the same overrides for Roboto. */
@font-face { font-family: "Poppins Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 105.54%; ascent-override: 99.49%; descent-override: 33.16%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 400; size-adjust: 103.97%; ascent-override: 91.37%; descent-override: 22.12%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 600; size-adjust: 98.6%; ascent-override: 96.34%; descent-override: 23.33%; line-gap-override: 0%; }
:root {
  --ink-950: #050807; --ink-900: #090e0c; --ink-850: #0e1512; --ink-800: #15201b; --ink-700: #22312a;
  --on-dark: #eaf2ed; --on-dark-2: #a3b5ab; --on-dark-3: #6f8579;
  --paper: #ffffff; --paper-2: #f3f7f4; --paper-3: #e8f0eb; --line: #dce7e0;
  --text: #0b1410; --text-2: #46564e; --text-3: #6b7b73;
  --green: #10c465; --green-hi: #24fd8a; --neon: #0cf57e; --green-deep: #0f4e28; --green-link: #0a7d40;
  --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(5, 8, 7, .06), 0 8px 24px rgba(5, 8, 7, .06);
  --wrap: 1180px; --gut: 20px;
  --font-head: Poppins, "Poppins Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Public Sans", "Public Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 400 16px/1.65 var(--font-body); color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--green-link); text-underline-offset: 3px; }
a:hover { color: var(--text); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 4px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--font-mono); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--green-link); margin-bottom: 16px; }
.dark .eyebrow { color: var(--neon); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }

/* mockup ribbon */
.mock-bar { background: #fff6c2; color: #4a3d00; font: 500 12.5px/1.4 var(--font-body); text-align: center; padding: 6px var(--gut); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border-radius: 10px; border: 1px solid transparent;
  font: 600 15px/1.2 var(--font-head); text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #03140a; }
.btn-primary:hover { background: var(--green-hi); color: #03140a; }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: rgba(234, 242, 237, .22); }
.btn-ghost:hover { border-color: var(--neon); color: #fff; }
.btn-line { background: var(--paper); color: var(--text); border-color: var(--line); }
.btn-line:hover { border-color: var(--text); color: var(--text); }
.btn-sm { min-height: 38px; padding: 8px 14px; font-size: 14px; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(5, 8, 7, .92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, .07); color: var(--on-dark); }
.site-head .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.logo { display: block; flex: none; }
.logo img { width: 128px; height: auto; }
.nav { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--on-dark-2); text-decoration: none; font: 500 14.5px/1.2 var(--font-body); }
.nav a:hover, .nav a[aria-current] { color: #fff; background: rgba(255, 255, 255, .06); }
.head-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.head-cta .login { color: var(--on-dark-2); text-decoration: none; font-weight: 500; font-size: 14.5px; padding: 8px 10px; }
.head-cta .login:hover { color: #fff; }
.menu { display: none; margin-left: auto; }
.menu > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary span, .menu > summary span::before, .menu > summary span::after { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; position: relative; content: ""; }
.menu > summary span::before { position: absolute; top: -6px; } .menu > summary span::after { position: absolute; top: 6px; }
.menu[open] > summary span { background: transparent; }
.menu[open] > summary span::before { top: 0; transform: rotate(45deg); } .menu[open] > summary span::after { top: 0; transform: rotate(-45deg); }
.menu-panel { position: absolute; left: 0; right: 0; top: 68px; background: var(--ink-950); border-bottom: 1px solid var(--ink-700); padding: 12px var(--gut) 20px; }
.menu-panel a { display: block; padding: 13px 4px; color: var(--on-dark); text-decoration: none; font: 500 17px/1.3 var(--font-head); border-bottom: 1px solid var(--ink-800); }
.menu-panel .btn { width: 100%; margin-top: 14px; }
@media (max-width: 1020px) { .site-head .nav, .head-cta { display: none; } .menu { display: block; } }

/* sections */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }
.dark { background: var(--ink-950); color: var(--on-dark); }
.dark p { color: var(--on-dark-2); }
.tint { background: var(--paper-2); }
.sec-head { max-width: 680px; margin-bottom: 44px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sec-head p { font-size: 17.5px; color: var(--text-2); margin: 0; }
.dark .sec-head p { color: var(--on-dark-2); }
.grid-bg { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 44px 44px; }

/* hero */
.hero { position: relative; overflow: hidden; padding: 88px 0 72px; }
.hero::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 820px; height: 820px; background: radial-gradient(closest-side, rgba(16, 196, 101, .22), transparent 70%); pointer-events: none; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.06; letter-spacing: -.025em; margin-bottom: 22px; color: #fff; }
.hero h1 em { font-style: normal; color: var(--neon); }
.hero .lede { font-size: 19px; line-height: 1.6; max-width: 560px; margin-bottom: 30px; color: var(--on-dark-2); }
.hero .lede strong { color: var(--on-dark); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 30px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: var(--on-dark-2); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks svg { width: 16px; height: 16px; color: var(--neon); flex: none; }

/* proxy console card (hero visual) */
.console { background: linear-gradient(180deg, rgba(21, 32, 27, .92), rgba(9, 14, 12, .96)); border: 1px solid var(--ink-700); border-radius: 18px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .05); overflow: hidden; }
.console-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--ink-800); font: 500 13px/1 var(--font-body); color: var(--on-dark-3); }
.console-top .dots { display: flex; gap: 6px; } .console-top .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-700); }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--neon); font-weight: 600; }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 10px rgba(12, 245, 126, .7); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.console-body { padding: 18px; display: grid; gap: 14px; }
.c-row { display: grid; gap: 7px; }
.c-label { font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); }
.c-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ink-950); border: 1px solid var(--ink-800); border-radius: 10px; padding: 11px 13px; font: 500 14.5px/1.3 var(--font-mono); color: var(--on-dark); }
.c-field .copy { color: var(--on-dark-3); font: 600 12px/1 var(--font-body); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg span { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--ink-800); font-size: 13.5px; color: var(--on-dark-2); background: var(--ink-950); }
.seg span.on { border-color: rgba(12, 245, 126, .5); color: #fff; background: rgba(16, 196, 101, .14); }
.c-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.c-grid div { background: var(--ink-950); border: 1px solid var(--ink-800); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--on-dark); }
.c-grid small { display: block; font-size: 11px; color: var(--on-dark-3); margin-bottom: 2px; }
.c-cmd { margin: 0; background: #020403; border-top: 1px solid var(--ink-800); padding: 16px 18px; font: 13.5px/1.6 var(--font-mono); color: var(--on-dark-2); overflow-x: auto; white-space: pre; }
.c-cmd b { color: var(--neon); font-weight: 500; }

/* stats strip */
.stats { border-top: 1px solid var(--ink-800); border-bottom: 1px solid var(--ink-800); background: var(--ink-900); }
.stats ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
.stats li { padding: 26px 18px; border-left: 1px solid var(--ink-800); }
.stats li:first-child { border-left: 0; padding-left: 0; }
.stats b { display: block; font: 600 30px/1.1 var(--font-head); color: #fff; letter-spacing: -.02em; }
.stats span { font-size: 14px; color: var(--on-dark-2); }

/* product cards */
.products { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.product { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 32px; box-shadow: var(--shadow); }
.product .icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--ink-950); color: var(--neon); margin-bottom: 20px; }
.product .icon svg { width: 26px; height: 26px; }
.product h3 { font-size: 24px; margin-bottom: 10px; }
.product > p { color: var(--text-2); }
.checks { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 30px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' fill='none' stroke='%230a7d40' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; }
.dark .checks li::before { background-color: rgba(16, 196, 101, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' fill='none' stroke='%230cf57e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.price-line .from { font-size: 13.5px; color: var(--text-3); }
.price-line b { font: 600 30px/1 var(--font-head); letter-spacing: -.02em; }
.price-line b small { font-size: 16px; color: var(--text-3); font-weight: 500; }
.price-line .entry { font-size: 14px; color: var(--text-2); width: 100%; }
.product .actions { display: flex; gap: 10px; margin-top: 20px; }

/* pricing */
.pricing { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: stretch; }
.calc { background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: 20px; padding: 28px; }
.tabs { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--ink-950); border: 1px solid var(--ink-800); margin-bottom: 26px; }
.tabs button { appearance: none; border: 0; background: transparent; color: var(--on-dark-2); font: 600 14.5px/1 var(--font-head); padding: 11px 16px; border-radius: 9px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--green); color: #03140a; }
.calc-out { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 40px; margin-bottom: 22px; }
.calc-out div small { display: block; font-size: 13px; color: var(--on-dark-3); margin-bottom: 6px; }
.calc-out b { font: 600 44px/1 var(--font-head); color: #fff; letter-spacing: -.03em; }
.calc-out .per b { font-size: 26px; color: var(--neon); }
.calc input[type=range] { width: 100%; accent-color: var(--green); height: 28px; margin: 0; cursor: pointer; }
.ticks-scale { display: flex; justify-content: space-between; margin: 6px 0 26px; padding: 0; list-style: none; font: 12px/1 var(--font-mono); color: var(--on-dark-3); }
.calc .btn { width: 100%; }
.calc-notes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; color: var(--on-dark-3); }
.plan-side { display: grid; gap: 16px; }
.side-card { background: var(--ink-900); border: 1px solid var(--ink-800); border-radius: 20px; padding: 24px; }
.side-card h3 { font-size: 18px; color: #fff; margin-bottom: 14px; }
.side-card .checks { margin: 0; gap: 9px; font-size: 15px; color: var(--on-dark-2); }
.side-card p { font-size: 15px; margin: 0 0 14px; }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.feature { background: var(--paper); padding: 26px 24px; }
.feature svg { width: 26px; height: 26px; color: var(--green-link); margin-bottom: 14px; }
.feature h3 { font-size: 16.5px; margin-bottom: 6px; }
.feature p { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.55; }

/* integration */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.steps { list-style: none; margin: 0 0 28px; padding: 0; counter-reset: s; display: grid; gap: 18px; }
.steps li { counter-increment: s; position: relative; padding-left: 52px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ink-950); color: var(--neon); font: 600 15px/1 var(--font-head); }
.steps b { display: block; font-family: var(--font-head); font-weight: 600; margin-bottom: 2px; }
.steps span { color: var(--text-2); font-size: 15px; }
.code { background: var(--ink-950); border-radius: 16px; overflow: hidden; border: 1px solid var(--ink-800); box-shadow: 0 24px 60px rgba(5, 8, 7, .18); }
.code-tabs { display: flex; gap: 2px; padding: 8px 8px 0; background: var(--ink-900); border-bottom: 1px solid var(--ink-800); }
.code-tabs button { appearance: none; border: 0; background: transparent; color: var(--on-dark-3); font: 500 13.5px/1 var(--font-body); padding: 11px 14px; border-radius: 8px 8px 0 0; cursor: pointer; }
.code-tabs button[aria-selected="true"] { background: var(--ink-950); color: #fff; }
.code-tabs .copy-btn { margin-left: auto; }
.code pre { margin: 0; padding: 22px; font: 14px/1.7 var(--font-mono); color: #d6e4dc; overflow-x: auto; }
.code pre[hidden] { display: none; }
.tok-k { color: #7ee2a8; } .tok-s { color: #f5d77a; } .tok-c { color: #6f8579; } .tok-f { color: #8fc8ff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips a, .chips span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--text); text-decoration: none; font-size: 14px; }
.chips a:hover { border-color: var(--green-link); color: var(--green-link); }
.dark .chips a, .dark .chips span { background: var(--ink-900); border-color: var(--ink-800); color: var(--on-dark); }
.dark .chips a:hover { border-color: var(--neon); color: #fff; }

/* use cases */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.uc { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; text-decoration: none; color: var(--text); transition: border-color .15s, transform .15s, box-shadow .15s; }
.uc:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow); color: var(--text); }
.uc .tag { font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--green-link); }
.uc h3 { font-size: 18px; margin: 12px 0 8px; }
.uc p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* locations */
.loc { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.big-num { font: 600 clamp(64px, 9vw, 112px)/.9 var(--font-head); letter-spacing: -.04em; color: #fff; margin-bottom: 12px; }
.big-num span { color: var(--neon); }
.globe { position: relative; aspect-ratio: 1.6; border-radius: 20px; border: 1px solid var(--ink-800); background: radial-gradient(ellipse at 50% 120%, rgba(16, 196, 101, .2), transparent 60%), var(--ink-900); overflow: hidden; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }
.globe svg.arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.globe .chips { position: relative; }

/* blog cards */
.post-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.post-card:hover { border-color: var(--green); box-shadow: var(--shadow); color: var(--text); }
.post-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper-3); }
.post-card div { padding: 18px 20px 22px; }
.post-card small { font-size: 13px; color: var(--text-3); }
.post-card h3 { font-size: 17.5px; margin: 6px 0 8px; }
.post-card p { font-size: 14.5px; color: var(--text-2); margin: 0; line-height: 1.55; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 600 17.5px/1.4 var(--font-head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); color: var(--green-link); font: 500 20px/1 var(--font-body); }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 48px 22px 0; color: var(--text-2); }

/* CTA band */
.cta-band { position: relative; overflow: hidden; border-radius: 24px; padding: 56px; background: radial-gradient(ellipse at 85% 0%, rgba(36, 253, 138, .28), transparent 55%), linear-gradient(135deg, var(--green-deep), #06140c 70%); color: #fff; display: grid; grid-template-columns: 1.3fr auto; gap: 32px; align-items: center; }
.cta-band h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 10px; }
.cta-band p { color: #bfe9d1; margin: 0; font-size: 17px; }
.cta-band .cta-row { justify-content: flex-end; }

/* footer */
.site-foot { background: var(--ink-950); color: var(--on-dark-2); padding: 72px 0 32px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.foot-grid h4 { font: 600 13px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin: 6px 0 16px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-grid a { color: var(--on-dark); text-decoration: none; }
.foot-grid a:hover { color: var(--neon); }
.foot-brand p { margin: 16px 0 20px; max-width: 300px; }
.social { display: flex; gap: 8px; }
.social a { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--ink-700); color: var(--on-dark-2); }
.social a:hover { border-color: var(--neon); color: #fff; }
.social svg { width: 16px; height: 16px; }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--ink-800); font-size: 13.5px; color: var(--on-dark-3); }

/* ---------- article template ---------- */
.art-hero { padding: 56px 0 48px; position: relative; overflow: hidden; }
.art-hero::before { content: ""; position: absolute; right: -200px; top: -260px; width: 700px; height: 700px; background: radial-gradient(closest-side, rgba(16, 196, 101, .18), transparent 70%); }
.art-hero .wrap { position: relative; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: var(--on-dark-3); }
.crumbs a { color: var(--on-dark-2); text-decoration: none; }
.crumbs a:hover { color: #fff; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-700); }
.art-hero h1 { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.025em; color: #fff; max-width: 860px; margin-bottom: 18px; }
.art-hero .dek { font-size: 19px; line-height: 1.6; color: var(--on-dark-2); max-width: 760px; margin-bottom: 26px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; color: var(--on-dark-3); }
.meta .by { display: flex; align-items: center; gap: 10px; color: var(--on-dark); font-weight: 500; }
.meta .by i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-800); }
.meta .by i img { width: 20px; }
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; padding-top: 56px; padding-bottom: 88px; }
.prose { font-size: 17.5px; line-height: 1.75; color: #1d2a24; max-width: 740px; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 + *, .prose h3 + * { margin-top: .5em; }
.prose h2 { font-size: 29px; margin: 2em 0 .2em; padding-top: .2em; }
.prose h3 { font-size: 21px; margin: 1.6em 0 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--green-link); }
.prose a { color: var(--green-link); font-weight: 500; }
.prose a.btn { font-weight: 600; text-decoration: none; }
.prose a.btn-primary { color: #03140a; }
.prose a.btn-ghost { color: var(--on-dark); }
.prose strong { color: var(--text); }
.prose .lead { font-size: 20px; line-height: 1.65; color: var(--text); }
.prose figure { margin: 2em 0; }
.prose figure img { width: 100%; border-radius: var(--radius); background: var(--paper-3); }
.prose figcaption { font-size: 14px; color: var(--text-3); margin-top: 10px; }
.prose pre { margin: 1.4em 0; background: var(--ink-950); color: #d6e4dc; border-radius: 12px; padding: 18px 20px; font: 14.5px/1.7 var(--font-mono); overflow-x: auto; }
.prose code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-3); padding: .12em .4em; border-radius: 5px; }
.prose pre code { background: none; padding: 0; font-size: inherit; }
.callout { border-radius: 14px; padding: 20px 22px; background: var(--paper-2); border: 1px solid var(--line); font-size: 16.5px; }
.callout b { display: block; font-family: var(--font-head); margin-bottom: 4px; color: var(--text); }
.callout.tip { border-left: 4px solid var(--green); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; min-width: 560px; }
.prose th { text-align: left; font: 600 13px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--paper-2); }
.prose th, .prose td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose tr:last-child td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; color: var(--text); }
.rp-box { border-radius: 18px; background: var(--ink-950); color: var(--on-dark); padding: 28px; position: relative; overflow: hidden; }
.rp-box::before { content: ""; position: absolute; right: -120px; top: -160px; width: 380px; height: 380px; background: radial-gradient(closest-side, rgba(16, 196, 101, .25), transparent 70%); }
.rp-box > * { position: relative; }
.rp-box h3 { color: #fff; margin: 0 0 8px; font-size: 22px; }
.rp-box p { color: var(--on-dark-2); font-size: 16px; }
.rp-box .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 20px; }
.rp-box .two div { border: 1px solid var(--ink-700); border-radius: 12px; padding: 14px 16px; background: rgba(255, 255, 255, .02); }
.rp-box .two b { display: block; color: #fff; font-family: var(--font-head); font-size: 15.5px; }
.rp-box .two span { font-size: 14px; color: var(--on-dark-2); }
.rp-box .two strong { color: var(--neon); }
.rp-box .checks { font-size: 15.5px; margin-bottom: 22px; }
.rp-box .cta-row .btn { min-height: 44px; }
.prose .faq { border-top: 1px solid var(--line); }
.prose .faq summary { font-size: 17px; }
.prose .faq details > div { padding-right: 0; font-size: 16.5px; }
.author { display: flex; gap: 16px; align-items: flex-start; border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-top: 2.4em; font-size: 15.5px; color: var(--text-2); }
.author i { flex: none; width: 48px; height: 48px; border-radius: 12px; background: var(--ink-950); display: grid; place-items: center; }
.author i img { width: 28px; }
.author b { display: block; color: var(--text); font-family: var(--font-head); }
.aside { position: relative; }
.aside-sticky { position: sticky; top: 92px; display: grid; gap: 20px; }
.toc { border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.toc h2 { font: 600 12.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 12px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14.5px; line-height: 1.4; border-left: 2px solid transparent; }
.toc a:hover { background: var(--paper-2); color: var(--text); }
.toc a.is-active { color: var(--text); background: var(--paper-2); border-left-color: var(--green); font-weight: 600; }
.mini { border-radius: 16px; background: var(--ink-950); color: var(--on-dark); padding: 22px; }
.mini b { font-family: var(--font-head); font-size: 17px; color: #fff; display: block; margin-bottom: 6px; }
.mini p { font-size: 14.5px; color: var(--on-dark-2); margin: 0 0 16px; }
.mini .btn { width: 100%; }
.mini .btn + .btn { margin-top: 8px; }
.toc-mobile { display: none; }
.related { padding: 0 0 88px; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero .wrap, .split, .loc, .pricing { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .stats ul { grid-template-columns: repeat(3, 1fr); }
  .stats li:nth-child(4) { border-left: 0; padding-left: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .art-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .aside { display: none; }
  .toc-mobile { display: block; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 28px; }
  .toc-mobile summary { cursor: pointer; padding: 14px 18px; font: 600 16px/1.3 var(--font-head); list-style: none; display: flex; justify-content: space-between; }
  .toc-mobile summary::-webkit-details-marker { display: none; }
  .toc-mobile summary::after { content: "▾"; color: var(--green-link); }
  .toc-mobile ol { margin: 0; padding: 0 18px 16px 38px; font-size: 15.5px; line-height: 1.5; }
  .toc-mobile li + li { margin-top: 6px; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; }
  .section { padding: 64px 0; }
  .hero { padding: 48px 0 40px; }
  .hero .lede { font-size: 17px; }
  .cta-row .btn { flex: 1 1 auto; }
  .products, .cards3 { grid-template-columns: minmax(0, 1fr); }
  .product { padding: 24px; }
  .stats ul { grid-template-columns: 1fr 1fr; }
  .stats li, .stats li:first-child { border-left: 0; padding: 18px 0; border-top: 1px solid var(--ink-800); }
  .stats li:nth-child(-n+2) { border-top: 0; }
  .stats li:last-child { grid-column: 1 / -1; }
  .stats b { font-size: 25px; }
  .c-grid { grid-template-columns: 1fr 1fr; }
  .features { grid-template-columns: 1fr; }
  .calc { padding: 20px; }
  .calc-out b { font-size: 36px; }
  .cta-band { grid-template-columns: 1fr; padding: 32px 22px; }
  .cta-band .cta-row { justify-content: stretch; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .faq details > div { padding-right: 0; }
  .art-hero { padding: 36px 0 32px; }
  .art-hero .dek { font-size: 17px; }
  .art-layout { padding-top: 36px; padding-bottom: 64px; }
  .prose { font-size: 17px; }
  .prose h2 { font-size: 25px; }
  .rp-box { padding: 22px; }
  .rp-box .two { grid-template-columns: 1fr; }
  .globe { aspect-ratio: auto; min-height: 280px; padding: 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------- shared by every option: dropdown nav, mobile menu groups, sticky phone CTA, illustrations ---------- */
.nav > li { position: relative; }
.nav > li.has-sub > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 3px 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); opacity: .7; }
.sub { position: absolute; top: calc(100% + 6px); left: -8px; z-index: 60; min-width: 280px; display: none; gap: 2px; padding: 8px; border-radius: 14px; background: var(--sub-bg, var(--ink-900)); border: 1px solid var(--sub-line, var(--ink-700)); box-shadow: 0 18px 50px rgba(5, 8, 7, .28); }
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav > li:hover > .sub, .nav > li:focus-within > .sub { display: grid; }
.sub a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--sub-text, var(--on-dark)); text-decoration: none; font-size: 14.5px; line-height: 1.35; }
.sub a:hover { background: var(--sub-hover, rgba(255, 255, 255, .06)); }
.sub a b { display: block; font-weight: 600; }
.sub a span { display: block; font-size: 13px; color: var(--sub-muted, var(--on-dark-3)); margin-top: 2px; }
.menu-panel h3 { font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-3); margin: 18px 4px 2px; }
.m-cta { display: none; }
@media (max-width: 760px) {
  .m-cta { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 70; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: var(--mcta-bg, rgba(5, 8, 7, .94)); color: var(--mcta-text, #fff); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); backdrop-filter: blur(8px); }
  .m-cta b { display: block; font: 600 15px/1.2 var(--font-head); }
  .m-cta span { font-size: 12.5px; opacity: .75; }
  .m-cta { transform: translateY(140%); transition: transform .25s ease; }
  .show-mcta .m-cta { transform: none; }
  body { padding-bottom: 76px; }
}
.p-illu { display: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }
.h2-lg { font-size: clamp(28px, 3.4vw, 40px); }
.h2-md { font-size: clamp(24px, 2.6vw, 32px); }
.pt0 { padding-top: 0; }
.flag { width: 20px; height: 14px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.map { position: relative; }
.map > img { width: 100%; height: auto; }
.pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--pin-bg, #fff); color: var(--pin-text, var(--text)); font: 600 13px/1 var(--font-body); text-decoration: none; box-shadow: 0 6px 18px rgba(5, 8, 7, .12); white-space: nowrap; }
.pin:hover { color: var(--green-link); }
@media (max-width: 760px) { .pin { font-size: 11.5px; padding: 5px 9px 5px 7px; gap: 6px; } .pin .flag { width: 16px; height: 11px; } .map .pin:nth-child(n+6) { display: none; } }
.compare table, .ladder table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; min-width: 520px; background: var(--paper); }
.compare th, .compare td, .ladder th, .ladder td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th, .ladder thead th { font: 600 12.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--paper-2); }
.compare tbody th { font-weight: 600; color: var(--text); width: 22%; }
.compare tr:last-child > *, .ladder tr:last-child > * { border-bottom: 0; }
.ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ladder table { min-width: 0; }
.ladder caption { text-align: left; font: 600 17px/1.3 var(--font-head); padding: 14px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ladder td:last-child { color: var(--green-link); font-weight: 600; }
.ladder tr:last-child td { background: var(--paper-2); }
.trust { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; margin: 0; padding: 0; list-style: none; }
.trust b { display: block; font: 700 20px/1.2 var(--font-head); }
.trust span { font-size: 13.5px; color: var(--text-3); }
.trust a { color: inherit; text-decoration: none; }
.chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.choose { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: var(--paper); }
.choose h3 { font-size: 20px; }
.pay { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pay li { font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--text-2); background: var(--paper); }
@media (max-width: 760px) { .ladder, .chooser { grid-template-columns: minmax(0, 1fr); } .trust { justify-content: flex-start; } .trust li { width: calc(50% - 14px); } }
/* Option H "Console bento" = A + D (29 Oct): A's dark console look (near-black, neon green, grid background, live
   "proxy details" console, Poppins + Public Sans from base.css) laid out as D's bento: the whole offer in rounded dark
   tiles, one neon tile, the price-per-GB chart, and every later section built from the same tiles. Articles read on a
   white sheet (D) inside the dark page (A). */
:root { --tile: #0c1311; --tile-2: #111a16; --tile-line: #1a2621; --radius-tile: 22px; }
body { background: var(--ink-950); }
.h-canvas { background: var(--ink-950); }
.pt-tiles { padding: 0 0 24px; }
.btn { border-radius: 999px; }
.btn-sm { border-radius: 999px; }

/* hero: A's console hero, a little tighter so the tiles start on the first screen */
.h-hero { padding: 76px 0 56px; }
.h-hero h1 { font-size: clamp(36px, 5vw, 58px); }

/* tiles (D's bento, dark) */
.tile { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--tile-2), var(--tile)); border: 1px solid var(--tile-line); border-radius: var(--radius-tile); padding: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.tile h3 { font-size: 21px; margin-bottom: 6px; color: #fff; }
.tile p { color: var(--on-dark-2); font-size: 15px; margin: 0; }
.tile .k { font: 600 46px/1 var(--font-head); letter-spacing: -.04em; display: block; margin: 22px 0 6px; color: #fff; }
.tile .k span { color: var(--neon); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px;
  grid-template-areas: "res res cty up" "res res ses ses" "mob mob tools tools" "chart chart sup exp"; }
.t-res { grid-area: res; display: flex; flex-direction: column; background: radial-gradient(ellipse 70% 60% at 85% 70%, rgba(16, 196, 101, .2), transparent 70%), linear-gradient(180deg, var(--tile-2), var(--tile)); }
.t-res .k { margin-top: 26px; }
.t-res .illu { position: absolute; right: 22px; bottom: 104px; width: 220px; }
.t-tag { align-self: flex-start; font: 600 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--neon); border: 1px solid rgba(12, 245, 126, .35); background: rgba(12, 245, 126, .08); border-radius: 999px; padding: 6px 10px; margin-bottom: 16px; }
.t-price { margin-top: 22px !important; }
.t-price b { color: #fff; font: 600 22px/1.2 var(--font-head); }
.t-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.t-res .t-price { margin-top: auto !important; padding-top: 26px; }
.t-cty { grid-area: cty; background: #070b09; }
.t-cty .k { margin-top: 0; }
.t-cty img { position: absolute; left: -10px; bottom: -24px; width: 140%; max-width: none; opacity: .55; }
.t-cty p { position: relative; }
.t-up { grid-area: up; background: radial-gradient(ellipse at 100% 0%, #24fd8a, transparent 60%), var(--green); border-color: transparent; }
.t-up .k { margin-top: 0; color: #03140a; }
.t-up p { color: #053a1c; font-weight: 500; }
.t-ses { grid-area: ses; }
.t-ses .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.t-ses .pills span { padding: 9px 14px; border-radius: 999px; background: var(--ink-950); border: 1px solid var(--tile-line); color: var(--on-dark-2); font-weight: 600; font-size: 14px; }
.t-ses .pills span.on { background: rgba(16, 196, 101, .14); border-color: rgba(12, 245, 126, .5); color: #fff; }
.t-mob { grid-area: mob; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.t-mob .illu { width: 150px; }
.t-tools { grid-area: tools; }
.t-tools .chips { margin-top: 16px; }
.t-tools .chips a { background: var(--ink-950); border-color: var(--tile-line); }
.t-chart { grid-area: chart; }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin-top: 26px; }
.bars div { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--neon), #0a5c2f); position: relative; min-width: 0; box-shadow: 0 0 18px rgba(12, 245, 126, .12); }
.bars div span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 600 11.5px/1 var(--font-mono); color: var(--on-dark-2); white-space: nowrap; }
.bars-x { display: flex; gap: 8px; margin-top: 8px; font: 11.5px/1.2 var(--font-mono); color: var(--on-dark-3); }
.bars-x span { flex: 1; text-align: center; }
.t-sup { grid-area: sup; }
.t-exp { grid-area: exp; background: radial-gradient(ellipse at 0% 100%, rgba(36, 253, 138, .22), transparent 65%), #0f3d22; border-color: #18603a; }
.t-exp p { color: #bfe9d1; }
.t-sup svg, .t-exp svg { width: 30px; height: 30px; color: var(--neon); margin-bottom: 12px; }
.t-sup h3, .t-exp h3 { font-size: 19px; }

/* later sections reuse the tile look */
.section { padding: 80px 0; }
.section.pt0 { padding-top: 0; }
.calc, .side-card { background: linear-gradient(180deg, var(--tile-2), var(--tile)); border-color: var(--tile-line); border-radius: var(--radius-tile); }
.tabs { border-radius: 999px; }
.tabs button { border-radius: 999px; }
.h-dev { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; align-items: center; }
.h-dev-text .steps { margin: 6px 0 0; }
.h-dev-text .steps span { color: var(--on-dark-2); }
.h-dev-text .steps li::before { background: var(--ink-950); border: 1px solid var(--tile-line); }
.h-dev .code { border-radius: var(--radius-tile); border-color: var(--tile-line); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.uc { background: linear-gradient(180deg, var(--tile-2), var(--tile)); border-color: var(--tile-line); color: var(--on-dark); border-radius: var(--radius-tile); }
.uc:hover { border-color: rgba(12, 245, 126, .5); color: var(--on-dark); box-shadow: 0 0 0 1px rgba(12, 245, 126, .25), 0 18px 40px rgba(0, 0, 0, .35); }
.uc h3 { color: #fff; }
.uc p { color: var(--on-dark-2); }
.uc .tag { color: var(--neon); }
.uc-ico { display: none; }
.h-loc { padding: 40px; }
.h-loc p { margin-bottom: 20px; }
.h-loc .map { --pin-bg: rgba(5, 8, 7, .88); --pin-text: var(--on-dark); }
.h-loc .pin { border: 1px solid var(--tile-line); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); }
.h-loc .pin:hover { color: var(--neon); }
.h-loc .map > img { opacity: .8; }
.post-card { background: linear-gradient(180deg, var(--tile-2), var(--tile)); border-color: var(--tile-line); color: var(--on-dark); border-radius: var(--radius-tile); }
.post-card:hover { border-color: rgba(12, 245, 126, .5); color: var(--on-dark); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.post-card h3 { color: #fff; }
.post-card p { color: var(--on-dark-2); }
.post-card small { color: var(--on-dark-3); }
.post-card img { background: var(--ink-850); }
.h-canvas .faq { background: linear-gradient(180deg, var(--tile-2), var(--tile)); border: 1px solid var(--tile-line); border-radius: var(--radius-tile); padding: 6px 30px; }
.h-canvas .faq details { border-color: var(--tile-line); }
.h-canvas .faq details:last-child { border-bottom: 0; }
.h-canvas .faq summary { color: #fff; }
.h-canvas .faq summary::after { background: rgba(16, 196, 101, .14); color: var(--neon); }
.h-canvas .faq details > div { color: var(--on-dark-2); }
.cta-band { border-radius: 28px; border: 1px solid #18603a; }
.site-foot { border-top: 1px solid var(--ink-800); }

/* article: dark page, white reading sheet (D) */
.page-post main { background: var(--ink-950); }
.page-post .art-layout { background: #fff; color: var(--text); border-radius: 28px; padding-left: 48px; padding-right: 48px; margin-bottom: 40px; max-width: calc(var(--wrap) + 2 * var(--gut)); }
.page-post .related { color: var(--on-dark); }
.page-post .related h2 { color: #fff; }
.toc a.is-active { border-left-color: var(--green); }

@media (max-width: 1020px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "res res" "cty up" "ses ses" "mob mob" "tools tools" "chart chart" "sup exp"; }
  .h-dev { grid-template-columns: minmax(0, 1fr); }
  .h-loc { padding: 28px; }
  .page-post .art-layout { padding-left: 28px; padding-right: 28px; }
}
@media (max-width: 760px) {
  .h-hero { padding: 40px 0 36px; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; grid-template-areas: "res" "cty" "up" "ses" "mob" "tools" "chart" "sup" "exp"; }
  .tile { padding: 22px; }
  .t-res .illu { position: static; align-self: flex-end; width: 140px; margin: -104px -4px 0 0; }
  .h-loc .map { margin: 8px -10px 0; }
  .h-loc .pin:nth-child(3) { display: none; }
  .t-mob { grid-template-columns: minmax(0, 1fr); }
  .t-mob .illu { display: none; }
  .tile .k { font-size: 40px; }
  .bars div span { font-size: 9.5px; top: -16px; }
  .bars-x { font-size: 9.5px; gap: 4px; }
  .bars { gap: 4px; }
  .section { padding: 56px 0; }
  .h-canvas .faq { padding: 2px 18px; }
  .h-loc { padding: 22px; }
  .page-post .art-layout { padding-left: 18px; padding-right: 18px; border-radius: 20px; }
}

/* ---- Option I (31 Oct, owner: "option H but with the colors from option G"): H's layout and fonts, in G's light
   mint palette (white tiles on mint, deep-green buttons with white text, dark green code blocks and footer).
   build.py writes theme-i.css = theme-h.css + this file. H's dark tokens are flipped here, so everything built on them
   turns light; the rest of this file covers hard-coded colours and the blocks that stay dark on purpose. ---- */
:root {
  --ink-950: #f3faf5; --ink-900: #fff; --ink-850: #fff; --ink-800: #e1eee6; --ink-700: #d3e6da;
  --on-dark: #0b1f14; --on-dark-2: #4b5f53; --on-dark-3: #6d8075; --neon: #0f7f3e;
  --text: #0b1f14; --text-2: #4b5f53; --text-3: #6d8075; --line: #e1eee6; --paper-2: #f3faf5; --paper-3: #e6f5ec;
  --btn: #0f7f3e; --btn-hi: #0b6a33; --green-link: #0d7a3b; --mint: #eaf8ef; --deep: #062a17;
  --tile: #fff; --tile-2: #fff; --tile-line: #e1eee6; --tile-shadow: 0 18px 40px rgba(11, 31, 20, .06);
  --sub-bg: #fff; --sub-line: #e1eee6; --sub-text: #0b1f14; --sub-muted: #5b6f63; --sub-hover: #f1f8f3;
  --mcta-bg: rgba(255, 255, 255, .97); --mcta-text: #0b1f14;
}
.btn-primary { background: var(--btn); color: #fff; box-shadow: 0 6px 16px rgba(15, 127, 62, .22); }
.btn-primary:hover { background: var(--btn-hi); color: #fff; }
.btn-ghost { background: #fff; color: var(--btn); border: 1.5px solid #9fd8b6; }
.btn-ghost:hover { border-color: var(--btn); color: var(--btn-hi); }

/* header */
.site-head { background: rgba(255, 255, 255, .92); border-bottom: 1px solid var(--line); color: var(--text); }
.nav a { color: var(--text); }
.nav a:hover, .nav a[aria-current] { color: var(--btn); background: var(--mint); }
.head-cta .login { color: var(--text); }
.head-cta .login:hover { color: var(--btn); }
.menu > summary { border-color: var(--line); }
.menu > summary span, .menu > summary span::before, .menu > summary span::after { background: var(--text); }
.menu[open] > summary span { background: transparent; }
.menu-panel { background: #fff; border-color: var(--line); }
.menu-panel a { color: var(--text); border-color: var(--line); }
.menu-panel h3 { color: var(--text-3); }

/* hero + article hero: G's soft mint gradient, H's grid drawn in faint green */
.h-hero, .art-hero.dark { background:
  linear-gradient(rgba(15, 127, 62, .055) 1px, transparent 1px) 0 0 / 44px 44px,
  linear-gradient(90deg, rgba(15, 127, 62, .055) 1px, transparent 1px) 0 0 / 44px 44px,
  radial-gradient(ellipse 60% 70% at 85% 30%, rgba(36, 253, 138, .22), transparent 70%),
  radial-gradient(ellipse 50% 60% at 0% 100%, rgba(16, 196, 101, .12), transparent 70%), linear-gradient(180deg, #f6fcf8, #f3faf5); color: var(--text); }
.hero::before, .art-hero::before { display: none; }
.hero h1, .art-hero h1 { color: var(--text); }

/* console: light card, the command line stays dark */
.console { background: #fff; border-color: var(--line); box-shadow: 0 2px 4px rgba(11, 31, 20, .04), 0 28px 70px rgba(11, 31, 20, .14); }
.seg span.on { color: var(--btn); border-color: #9fd8b6; background: var(--mint); font-weight: 600; }
.c-cmd { background: var(--deep); border-top-color: var(--deep); color: #cfe6d8; }
.c-cmd b { color: #5dffa8; }
.c-cmd .tok-c { color: #86a895; }

/* owner's pick (31 Oct): calculator in the hero, console in the section below the tiles (src/i-console-mint/home.html).
   Fixed columns and sizes in the hero so the card keeps its height at every step of the slider, up to "1000 GB / $3,500.00". */
.hero-calc { min-width: 0; scroll-margin-top: 90px; }
.h-hero .calc { box-shadow: 0 2px 4px rgba(11, 31, 20, .04), 0 28px 70px rgba(11, 31, 20, .14); }
.h-hero .calc-notes li { text-wrap: pretty; }
.h-hero .calc-out { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; gap: 12px; }
.h-hero .calc-out b { font-size: clamp(26px, 8vw, 34px); white-space: nowrap; }
.h-hero .calc-out .per b { font-size: clamp(18px, 5.4vw, 22px); line-height: clamp(26px, 8vw, 34px); }
.pricing .console { display: flex; flex-direction: column; min-width: 0; }
.pricing .console-body { flex: 1; align-content: start; }

/* tiles */
.tile { box-shadow: var(--tile-shadow); }
.tile h3, .tile .k, .t-price b { color: var(--text); }
.t-cty { background: #fff; }
.t-cty img { opacity: .42; left: 8%; bottom: -30px; width: 120%; }
.t-cty .k, .t-cty p { position: relative; z-index: 1; }
.t-up { background: radial-gradient(ellipse at 100% 0%, rgba(36, 253, 138, .45), transparent 60%), linear-gradient(135deg, #0f7f3e, #0a4f27); }
.t-up .k { color: #fff; }
.t-up p { color: #d6f5e3; }
.t-ses .pills span.on { color: var(--btn); background: var(--mint); border-color: #9fd8b6; }
.t-exp { background: radial-gradient(ellipse at 0% 100%, rgba(36, 253, 138, .22), transparent 65%), var(--mint); border-color: #cfeadb; }
.t-exp p { color: var(--text-2); }
.bars div { background: linear-gradient(180deg, #10c465, #0f7f3e); box-shadow: none; }

/* later sections */
.dark .checks li::before { background-color: var(--mint); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14.5 7' fill='none' stroke='%230f7f3e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.calc, .side-card { box-shadow: var(--tile-shadow); }
.calc-out b, .side-card h3 { color: var(--text); }
.tabs button[aria-selected="true"] { background: var(--btn); color: #fff; }
.calc input[type=range] { accent-color: var(--btn); }
.code { background: var(--deep); border-color: var(--deep); }
.code-tabs { background: rgba(255, 255, 255, .06); border-bottom-color: rgba(255, 255, 255, .1); }
.code-tabs button { color: #a9c6b6; }
.code-tabs button[aria-selected="true"] { background: var(--deep); color: #fff; }
.h-dev .code { border-color: var(--deep); box-shadow: 0 24px 60px rgba(11, 31, 20, .18); }
.uc, .post-card, .h-canvas .faq { box-shadow: var(--tile-shadow); }
.uc:hover, .post-card:hover { border-color: #9fd8b6; box-shadow: 0 0 0 1px rgba(15, 127, 62, .15), 0 18px 40px rgba(11, 31, 20, .1); }
.uc h3, .post-card h3, .big-num, .h-canvas .faq summary { color: var(--text); }
.h-loc .map { --pin-bg: #fff; --pin-text: var(--text); }
.h-loc .pin { box-shadow: 0 8px 22px rgba(11, 31, 20, .12); }
.h-loc .pin:hover { color: var(--btn); }
.h-loc .map > img { opacity: 1; }

/* the deep-green blocks */
.cta-band, .rp-box, .mini { color: #fff; }
.cta-band { background: radial-gradient(ellipse at 90% 0%, rgba(36, 253, 138, .35), transparent 55%), linear-gradient(135deg, #0f7f3e, #0a4f27); border: 0; }
.rp-box { background: linear-gradient(135deg, #0f7f3e, #0a4f27); }
.mini { background: linear-gradient(160deg, #0f7f3e, #0a4f27); }
.rp-box p, .mini p, .rp-box .two span { color: #d6f5e3; }
.rp-box .two div { border-color: rgba(255, 255, 255, .25); }
.rp-box .two strong { color: #b6ffd5; }
.cta-band .btn-primary, .rp-box .btn-primary, .mini .btn-primary, .prose .rp-box a.btn-primary { background: #fff; color: var(--btn); box-shadow: none; }
.cta-band .btn-primary:hover, .rp-box .btn-primary:hover, .mini .btn-primary:hover { background: var(--mint); color: var(--btn-hi); }
.cta-band .btn-ghost, .rp-box .btn-ghost, .mini .btn-ghost, .prose .rp-box a.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }

/* article */
.crumbs, .crumbs a, .meta { color: var(--text-3); }
.crumbs a:hover { color: var(--btn); }
.crumbs li + li::before { color: var(--text-3); }
.meta .by { color: var(--text); }
.meta .by i, .author i { background: var(--mint); }
.page-post .art-layout { box-shadow: var(--tile-shadow); }
.page-post .related h2 { color: var(--text); }
.prose pre { background: var(--deep); }
.prose a.btn-primary { color: #fff; }

/* footer: G's dark green */
.site-foot { background: var(--deep); color: #b9d3c4; border-top: 0; }
.foot-grid a { color: #e8f3ec; }
.foot-grid a:hover { color: #5dffa8; }
.foot-grid h4, .foot-bottom { color: #8fb3a0; }
.foot-bottom { border-color: rgba(255, 255, 255, .12); }
.social a { border-color: rgba(255, 255, 255, .2); color: #cfe6d8; }
.social a:hover { border-color: #5dffa8; color: #fff; }

/* ---- WordPress content inside the design (theme/src/wp.css). Real posts carry block markup and old pages their own HTML. ---- */
.page-body { padding-top: 48px; padding-bottom: 72px; }
.page-body .prose { margin: 0 auto; }
.page-post .page-body .prose { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-tile, 20px); padding: 40px clamp(20px, 5vw, 56px); box-shadow: var(--tile-shadow); }
.page-post .page-body .prose-wide { max-width: var(--wrap, 1180px); }
.art-hero .eyebrow { margin-bottom: 14px; }
.section-tight.pt0 { padding-top: 0; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 36px; }
.pager a, .pager span { padding: 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text-2); text-decoration: none; font-size: 15px; }
.pager .current { background: var(--btn); border-color: var(--btn); color: #fff; }
.post-card h3 { overflow-wrap: anywhere; }
.prose > :first-child { margin-top: 0; }
.prose .dir { columns: 4 170px; column-gap: 28px; list-style: none; padding: 0; margin: 12px 0 0; }
.dir li { break-inside: avoid; margin: 0; padding: 4px 0; font-size: 16px; }
.prose img { max-width: 100%; height: auto; border-radius: 12px; }
.prose iframe { max-width: 100%; border: 0; border-radius: 12px; }
.prose .wp-block-image { margin: 1.6em 0; }
.prose .wp-block-table { margin: 1.6em 0; overflow-x: auto; }
.prose .wp-block-table table { min-width: 520px; }
.prose table { overflow-wrap: normal; }
.prose h2, .prose h3 { scroll-margin-top: 90px; overflow-wrap: anywhere; }
.prose p, .prose li { overflow-wrap: anywhere; }

/* snippet #7's Contents box: the design's colors. It sits in the sidebar on wide screens (rp_toc_from). */
.prose .rp-toc { border: 1px solid var(--line); background: #f7fbf8; border-radius: 14px; font-family: var(--font-body); }
.prose .rp-toc > summary { color: var(--text); font-family: var(--font-head); }
.prose .rp-toc > summary::after { border-color: var(--btn); }
.prose .rp-toc__count { color: var(--text-3); }
.prose .rp-toc__list > li::before { color: var(--btn); }
.prose .rp-toc__sub > li::before { background: var(--btn); }
.prose .rp-toc a { color: var(--text-2); font-weight: 400; }
.prose .rp-toc a:hover { color: var(--btn); }
.aside .toc { max-height: calc(100vh - 340px); overflow-y: auto; }
@media (min-width: 1021px) { .prose .rp-toc { display: none; } }
@media (max-width: 1020px) { .aside { display: none; } }

/* /what-is-my-ip/ and /ip-lookup/ */
.tool-card { max-width: 640px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-tile, 20px); padding: clamp(20px, 4vw, 32px); box-shadow: var(--tile-shadow); }
.tool-card h2 { font-size: 24px; margin: 0 0 12px; }
.tool-card h3 { font-size: 19px; margin: 22px 0 8px; }
.tool-rows { margin: 0 0 18px; }
.tool-rows > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.tool-rows dt { color: var(--text-2); }
.tool-rows dd { margin: 0; font-family: var(--font-mono); font-size: 15px; color: var(--text); text-align: right; overflow-wrap: anywhere; }
.tool-warn { margin: 0 0 14px; color: #a13b12; font-weight: 500; }
.tool-card p { margin-top: 14px; }
.tool-note { color: var(--text-3); font-size: 15px; }
.lookup { display: flex; gap: 10px; }
.lookup input { flex: 1; min-width: 0; font: 16px/1.4 var(--font-body); padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: #f7fbf8; }
.lookup input:focus { outline: 2px solid var(--btn); outline-offset: 1px; }
.lookup + [data-result] { margin-top: 22px; }
.tool-text { margin: 40px auto 0; }
.search-bar { display: flex; gap: 10px; }
.search-bar br { display: none; }
.search-bar input { flex: 1; min-width: 0; font: 16px/1.4 var(--font-body); padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: #f7fbf8; }
.search-bar button { appearance: none; border: 0; cursor: pointer; padding: 12px 24px; border-radius: 999px; background: var(--btn); color: #fff; font: 600 15px/1.2 var(--font-head); }
.search-bar button:hover { background: var(--btn-hi); }

.err-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.err-tiles a { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-decoration: none; }
.err-tiles a:hover { border-color: var(--btn); }
.err-tiles b { display: block; font: 600 16px/1.35 var(--font-head); color: var(--text); margin-bottom: 4px; }
.err-tiles span { display: block; font-size: 14px; line-height: 1.45; color: var(--text-3); }
@media (max-width: 1020px) { .err-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .err-tiles { grid-template-columns: minmax(0, 1fr); } }