/* Hallmark · shape: tool landing (custom) · genre: modern-minimal · theme: custom (AerVPN brand)
 * paper: #ffffff · accent: #0a8459 · display: Space Grotesk · body: Inter
 * nav: wordmark + one link + language menu · signature: the visitor's own IP, set huge over the AerVPN gradient rule
 * axes: white/grotesk/green · posture: tool-first, promo second · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R3 V3 · weakest: E (no product imagery; old screenshots carry the retired "VPN IP" name), the now/with-AerVPN comparison carries the promo instead */
/* Hallmark · waive 78 · hero h1 26px under the IP figure at 116px · the visitor's own IP is the display element, the question h1 stays quiet so the address reads first */
/* Hallmark · waive 79 · 161px below the hero actions · an IP lookup page keeps the hero short so the what-every-website-sees table starts on the first laptop screen */
/* Hallmark · waive 77 · terminal block two commands tall · curl check-ip.com/ip is a reference for scripts, giving it mass would pad the IP page with filler */
/* Hallmark · dismissed 41 · accent-ink is green text on paper, never placed on the accent fill; text on the accent button uses on-accent white */
@import url("./tokens.css");
@import url("./base.css");

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/s/fonts/inter-var-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/s/fonts/inter-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/s/fonts/spacegrotesk-var-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/s/fonts/spacegrotesk-var-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root { --container: 1180px; --gutter: 40px; }
html { color-scheme: light dark; }
body { line-height: 1.6; }
.muted { color: var(--color-muted); }
h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.2; }
h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }

/* ---------- top bar ---------- */
.bar { position: relative; border-block-end: var(--rule-hair) solid var(--color-rule); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; color: var(--color-ink); margin: 0; }
.wordmark span { color: var(--color-accent-ink); }
.bar-nav { display: flex; align-items: center; gap: var(--space-xs); }
.bar-link, .lang summary {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-sm);
  border-radius: var(--radius-ctl); color: var(--color-ink); text-decoration: none; font-size: var(--text-sm); font-weight: 600;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.bar-link:hover, .lang summary:hover { background: var(--color-paper-2); }
.lang { position: relative; }
.lang summary { cursor: pointer; list-style: none; gap: var(--space-xs); border: var(--rule-hair) solid var(--color-rule); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 7px; height: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.lang[open] summary { background: var(--color-paper-2); }
.lang ul {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: var(--z-dropdown);
  margin: 0; padding: var(--space-xs); list-style: none; width: 26rem;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xs);
  max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card);
}
.lang li a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: 8px; text-decoration: none; color: var(--color-ink); font-size: var(--text-sm); }
.lang li a:hover { background: var(--color-paper-2); }
.lang li a[aria-current] { color: var(--color-accent-ink); font-weight: 600; }

/* ---------- hero: the IP ---------- */
.hero { padding-block: var(--space-2xl) var(--space-2xl); }
.hero h1 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); font-weight: 400; color: var(--color-muted); letter-spacing: -0.01em; }
.ip {
  margin-block-start: var(--space-lg); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.75rem, 1rem + 8vw, 7.25rem); line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0;
}
.ip.ip-long { font-size: clamp(1.6rem, 0.8rem + 4.2vw, 4.25rem); letter-spacing: -0.02em; }
.ip output { display: inline-block; padding-block-end: var(--space-md); background: linear-gradient(90deg, var(--color-brand-1), var(--color-brand-2), var(--color-brand-3)) bottom left / 100% 4px no-repeat; }
.seen { margin-block-start: var(--space-lg); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 60ch; }
.seen.on { color: var(--color-accent-ink); font-weight: 600; }
.actions { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding-inline: var(--space-lg);
  border-radius: var(--radius-ctl); border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper); color: var(--color-ink); font-weight: 600; font-size: var(--text-md);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-paper-2); border-color: var(--color-muted); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.btn.primary:hover { background: color-mix(in oklab, var(--color-accent) 86%, var(--color-ink)); }
.btn[data-state="done"] { background: var(--color-paper-2); color: var(--color-accent-ink); border-color: var(--color-accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.copy-fail { margin-block-start: var(--space-sm); font-size: var(--text-sm); color: var(--color-error); }

/* ---------- what sites see ---------- */
.sees, .cli, .faq { padding-block: var(--space-3xl); border-block-start: var(--rule-hair) solid var(--color-rule); }
.sees-grid, .cli-grid, .faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.sees-copy p, .cli-grid p { margin-block-start: var(--space-md); color: var(--color-muted); max-width: 46ch; }
.facts { margin: 0; }
.facts .row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.facts .row:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }
dt { color: var(--color-muted); font-size: var(--text-sm); padding-block-start: 2px; }
dd { margin: 0; font-weight: 400; color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; }
dd.mono { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.note { margin-block-start: var(--space-md); font-size: 0.9375rem; color: var(--color-muted); max-width: 60ch; }

/* ---------- AerVPN ---------- */
.promo { background: var(--color-paper-2); padding-block: var(--space-3xl); }
.promo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl) var(--space-2xl); align-items: center; }
.brand { display: flex; align-items: center; gap: var(--space-sm); }
.brand p { font-size: 0.9375rem; line-height: 1.4; }
.brand strong { font-family: var(--font-display); font-size: var(--text-lg); }
.app-icon { width: 56px; height: 56px; border-radius: 14px; flex: none; }
.promo-copy h2 { margin-block-start: var(--space-lg); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); }
.promo-copy .lead { margin-block-start: var(--space-md); font-size: var(--text-lg); color: var(--color-ink-2); max-width: 46ch; }
.stores { margin-block-start: var(--space-xl); display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden;
}
.compare th, .compare td { padding: var(--space-md); text-align: start; vertical-align: top; overflow-wrap: anywhere; border-block-start: var(--rule-hair) solid var(--color-rule); }
.compare thead th, .compare thead td { border-block-start: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.compare tbody th { font-weight: 400; font-size: var(--text-sm); color: var(--color-muted); width: 28%; }
.compare .with { border-inline-start: var(--rule-hair) solid var(--color-rule); color: var(--color-accent-ink); }
.compare thead .with { color: var(--color-ink); background: linear-gradient(90deg, var(--color-brand-1), var(--color-brand-2), var(--color-brand-3)) top left / 100% 4px no-repeat; }
.features { grid-column: 1 / -1; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); }
.features li { border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-md); }


/* ---------- command line ---------- */
.term {
  margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); overflow-x: auto;
  background: var(--color-term); color: var(--color-term-ink); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.8;
}
.term .prompt { color: var(--color-term-dim); user-select: none; }

/* ---------- FAQ ---------- */
.qa details { border-block-end: var(--rule-hair) solid var(--color-rule); }
.qa details:first-child { border-block-start: var(--rule-hair) solid var(--color-rule); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 56px; padding-block: var(--space-sm); cursor: pointer; list-style: none; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--color-accent-ink); }
.qa details p { padding-block-end: var(--space-md); color: var(--color-ink-2); }

/* ---------- footer ---------- */
.foot { border-block-start: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.foot-links { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.foot-links a { color: var(--color-ink); }
.foot-links a:hover { color: var(--color-accent-ink); }
.foot-note { margin-inline-start: auto; font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- privacy ---------- */
.prose { padding-block: var(--space-2xl) var(--space-3xl); max-width: calc(68ch + 2 * var(--gutter)); }
.prose h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: var(--tracking-display); margin-block-end: var(--space-lg); }
.prose h2 { font-size: var(--text-lg); margin-block: var(--space-xl) var(--space-xs); }
.prose p { margin-block-end: var(--space-sm); color: var(--color-ink-2); }
.prose a { color: var(--color-accent-ink); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .sees-grid, .cli-grid, .faq-grid, .promo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-block: var(--space-2xl) var(--space-xl); }
  .sees, .cli, .faq, .promo { padding-block: var(--space-2xl); }
}
@media (max-width: 40rem) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .facts .row { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); gap: var(--space-sm); }
  .compare th, .compare td { padding: var(--space-sm); font-size: var(--text-sm); }
  .compare thead th { font-size: var(--text-md); }
  .compare tbody th { width: 26%; }
  .lang { position: static; }
  .lang ul { position: absolute; inset-inline: var(--gutter); top: 64px; width: auto; grid-template-columns: minmax(0, 1fr); }
  .btn { padding-inline: var(--space-md); white-space: normal; text-align: center; line-height: 1.3; padding-block: var(--space-xs); }
  .lang li a { white-space: nowrap; }
  .bar-link { display: none; }
  .actions .btn, .stores .btn { flex: 1 1 100%; }
  .foot-note { margin-inline-start: 0; }
}
/* IPv4 không được ngắt giữa số; IPv6 dài vẫn được ngắt (có dấu ":" nên không khớp ô hẹp) */
.compare td[dir="ltr"] { overflow-wrap: normal; word-break: normal; font-variant-numeric: tabular-nums; }
@media (max-width: 40rem) { .compare tbody th { width: 22%; } .compare td[dir="ltr"] { font-size: 0.8125rem; overflow-wrap: anywhere; } }