/* A&J Computers — myip.ajcomputers.com
 *
 * A snapshot of the A&J Computers design system, not a live link to it. Sources:
 *   ajcomputers.website.2026/design_handoff_ajcomputers/design-tokens.css  (tokens)
 *   ajcomputers.support.website/assets/css/site.css   (the tools site; header, hero,
 *                                                       panel, band, CTA, footer)
 * Only the components this site uses are kept; the IP card and connection list are
 * this site's own. Same convention as the tools and plugins sites: when the brand
 * changes, re-derive here.
 *
 * Light only by design: the system defines no dark palette. Navy is a dark
 * section within a light page, not a theme.
 *
 * asset(...) tokens in double braces are rewritten by bin/build.py to fingerprinted URLs.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/fonts/archivo-latin-wdth-normal.woff2?v=e3a28eade2) format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/public-sans-latin-wght-normal.woff2?v=5ed4d31c98) format('woff2');
}

:root {
  /* Brand */
  --aj-blue:#004280; --aj-blue-deep:#00305c; --aj-navy:#0d1b2a; --aj-blue-light:#1565a8;
  --aj-red:#7A1613; --aj-red-hover:#5f110e;
  /* Neutrals */
  --aj-ink:#16191d; --aj-body:#46515f; --aj-body-soft:#5a6675; --aj-muted:#6b7787;
  --aj-muted-2:#8b97a6; --aj-faint:#9aa6b4; --aj-border:#e4e9f0; --aj-border-soft:#eef2f6;
  --aj-bg-soft:#f5f8fb; --aj-bg-hero:#f5f9fd; --aj-white:#ffffff; --aj-note-bg:#e9f1f9;
  /* Type: Archivo at 125% width is the system's "Archivo Expanded" display face */
  --aj-font-heading:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --aj-font-body:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --aj-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Layout */
  --aj-container:1240px; --aj-gutter:28px; --aj-section-y:84px;
  --aj-radius-btn:9px; --aj-radius-tile:12px; --aj-radius-card:16px; --aj-radius-band:22px;
  --aj-shadow-panel:0 24px 60px -30px rgba(0,48,92,.35);
  --aj-measure:46rem;
  /* Default accent; a body .aj-accent-* class overrides it */
  --aj-accent:var(--aj-blue); --aj-accent-hover:var(--aj-blue-deep); --aj-accent-tint:#e9f1f9;
}
.aj-accent-blue { --aj-accent:var(--aj-blue); --aj-accent-hover:var(--aj-blue-deep); --aj-accent-tint:#e9f1f9; }

/* ---- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:96px; }
body {
  margin:0; background:var(--aj-white); color:var(--aj-body);
  font-family:var(--aj-font-body); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1, h2, h3, h4 { font-family:var(--aj-font-heading); color:var(--aj-ink); font-weight:800; line-height:1.2; margin:0; }
p { margin:0 0 16px; }
a { color:var(--aj-blue); text-underline-offset:2px; }
a:hover { color:var(--aj-blue-deep); }
strong { font-weight:650; color:var(--aj-ink); }
img, svg { max-width:100%; }
[hidden] { display:none !important; }
:focus-visible { outline:3px solid var(--aj-blue-light); outline-offset:2px; border-radius:4px; }

.skip {
  position:absolute; left:12px; top:-60px; z-index:100; background:var(--aj-ink); color:#fff;
  padding:10px 16px; border-radius:var(--aj-radius-btn); font-weight:600; text-decoration:none;
}
.skip:focus { top:12px; color:#fff; }

.container { max-width:var(--aj-container); margin-inline:auto; padding-inline:var(--aj-gutter); }
.section { padding-block:var(--aj-section-y); }

.eyebrow {
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--aj-font-heading); font-size:13px; font-weight:700; line-height:1.4;
  text-transform:uppercase; letter-spacing:.16em; color:var(--aj-accent); margin:0 0 14px;
}
.eyebrow--rule::before { content:""; width:26px; height:2px; background:currentColor; display:inline-block; flex:none; }
.h2 { font-size:clamp(28px,3.4vw,38px); line-height:1.14; letter-spacing:-.01em; }
.sec-head { margin-bottom:40px; max-width:680px; }
.sec-head p { font-size:17px; color:var(--aj-muted); margin:14px 0 0; }

/* ---- Header ----------------------------------------------------------- */
.utility { background:var(--aj-blue-deep); color:#fff; font-size:13.5px; }
.utility .container { display:flex; justify-content:space-between; align-items:center; gap:18px; padding-block:9px; flex-wrap:wrap; }
.utility p { margin:0; }
.utility a { color:#fff; text-decoration:none; }
.utility a:hover { color:#fff; text-decoration:underline; }
.utility__links { display:flex; gap:22px; flex-wrap:wrap; }

.mainbar {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.93); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--aj-border);
}
.mainbar .container { display:flex; align-items:center; gap:28px; padding-block:14px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:14px; text-decoration:none; line-height:0; flex:none; }
.brand img { height:48px; width:auto; display:block; }
.brand__tag {
  font-family:var(--aj-font-heading); font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--aj-muted); line-height:1.2;
  border-left:1px solid var(--aj-border); padding-left:14px;
}
.nav { display:flex; gap:26px; flex-wrap:wrap; margin-left:auto; align-items:center; }
.nav a {
  font-size:15.5px; font-weight:600; color:var(--aj-ink); text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .16s, border-color .16s;
}
.nav a:hover { color:var(--aj-blue); }

/* ---- Buttons ---------------------------------------------------------- */
.btns { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--aj-font-body); font-weight:600; font-size:16px; line-height:1.1;
  padding:14px 26px; border-radius:var(--aj-radius-btn); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background-color .15s, border-color .15s, color .15s;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn--sm { font-size:14.5px; padding:10px 18px; }
.btn--red { background:var(--aj-red); color:#fff; }
.btn--red:hover { background:var(--aj-red-hover); color:#fff; }
.btn--accent { background:var(--aj-accent); color:#fff; }
.btn--accent:hover { background:var(--aj-accent-hover); color:#fff; }
.btn--ghost { background:#fff; color:var(--aj-accent); border-color:color-mix(in srgb, var(--aj-accent) 26%, #fff); }
.btn--ghost:hover { border-color:var(--aj-accent); color:var(--aj-accent); }
.btn--white { background:#fff; color:var(--aj-accent); }
.btn--white:hover { background:#f3f6fa; color:var(--aj-accent-hover); }
.btn--on-dark { background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3); }
.btn--on-dark:hover { background:rgba(255,255,255,.2); color:#fff; }
.btn.is-copied, .btn.is-copied:hover { background:var(--aj-accent-hover); }

/* ---- Hero ------------------------------------------------------------- */
.hero { background:linear-gradient(180deg,var(--aj-bg-hero) 0%,#fff 100%); border-bottom:1px solid var(--aj-border-soft); }
.hero .container { padding-block:64px 76px; }
.hero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
.hero h1 {
  font-stretch:125%; font-weight:800; font-size:clamp(34px,4.8vw,52px); line-height:1.12;
  letter-spacing:-.01em; margin:0 0 22px;
}
/* The address is the page's answer, so it out-ranks the heading above it. */
.hero__grid h1 { font-size:clamp(26px,3vw,34px); margin:0 0 20px; }
.hero__lead { font-size:clamp(17px,1.5vw,19px); line-height:1.6; color:var(--aj-body); max-width:560px; margin:0 0 30px; }
.hero__grid .hero__lead { margin:0; }
.hero__trust { display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--aj-muted); font-size:14px; margin-top:26px; }

/* ---- IP address card -------------------------------------------------- */
.ip {
  background:#fff; border:1px solid var(--aj-border); border-top:4px solid var(--aj-accent);
  border-radius:var(--aj-radius-card); padding:28px 30px 30px; margin:0 0 28px;
  box-shadow:var(--aj-shadow-panel);
}
.ip__value {
  font-family:var(--aj-font-heading); font-stretch:125%; font-weight:800;
  font-size:clamp(34px,5.4vw,60px); line-height:1.08; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--aj-accent); margin:0;
  overflow-wrap:anywhere; user-select:all;
}
/* IPv6 addresses run to 39 characters. */
.ip__value--long { font-stretch:100%; font-size:clamp(22px,3vw,34px); }
.ip__meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:14.5px; color:var(--aj-muted); margin:14px 0 24px; }
.chip {
  display:inline-flex; align-items:center; font-family:var(--aj-font-heading); font-weight:700;
  font-size:12.5px; letter-spacing:.06em; line-height:1; padding:6px 10px; border-radius:999px;
  background:var(--aj-accent-tint); color:var(--aj-accent);
}

/* ---- Connection panel (hero right) ------------------------------------- */
.panel {
  background:#fff; border:1px solid var(--aj-border); border-radius:18px; padding:30px;
  box-shadow:var(--aj-shadow-panel);
}
.panel h2 { font-size:19px; margin:0 0 10px; }
.facts { margin:0; }
.facts div {
  display:grid; grid-template-columns:152px minmax(0,1fr); gap:14px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--aj-border-soft);
}
.facts div:first-child { border-top:0; }
.facts dt {
  font-family:var(--aj-font-heading); font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--aj-muted);
}
.facts dd { margin:0; font-size:15.5px; line-height:1.5; color:var(--aj-ink); overflow-wrap:anywhere; }
.facts__line { display:block; }

/* ---- Deep blue band ----------------------------------------------------- */
.grid-3 { display:grid; gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.band { background:var(--aj-blue-deep); color:#fff; }
.band .eyebrow { color:#7fb0e0; }
.band h2 { color:#fff; max-width:620px; }
.band__col { border-top:2px solid rgba(127,176,224,.4); padding-top:22px; }
.band__col h3 { color:#fff; font-size:20px; font-weight:700; margin:0 0 10px; }
.band__col p { color:#bcd0e6; font-size:15.5px; line-height:1.6; margin:0; }

/* ---- CTA band ----------------------------------------------------------- */
.cta {
  background:linear-gradient(120deg,var(--aj-accent),var(--aj-accent-hover)); border-radius:var(--aj-radius-band);
  padding:clamp(34px,5vw,56px); display:flex; align-items:center; justify-content:space-between;
  gap:32px; flex-wrap:wrap; color:#fff;
}
.cta h2 { font-stretch:125%; font-size:clamp(25px,3vw,33px); color:#fff; letter-spacing:-.01em; max-width:560px; }
.cta p { color:rgba(255,255,255,.84); font-size:16.5px; margin:10px 0 0; max-width:520px; }

/* ---- 404 ---------------------------------------------------------------- */
.lost { text-align:left; max-width:640px; }
.lost__code { font-family:var(--aj-font-heading); font-stretch:125%; font-weight:800; font-size:clamp(64px,10vw,110px); line-height:1; color:var(--aj-accent-tint); -webkit-text-stroke:2px var(--aj-accent); margin:0 0 12px; }

/* ---- Footer --------------------------------------------------------------- */
.footer { background:var(--aj-navy); color:#cbd5e1; font-size:15px; }
.footer .container { padding-block:64px 30px; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px; }
.footer__logo { height:48px; width:auto; display:block; margin-bottom:18px; }
.footer h2 { color:#fff; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:6px 0 14px; }
.footer ul { list-style:none; margin:0; padding:0; line-height:2; }
.footer a { color:#cbd5e1; text-decoration:none; }
.footer a:hover { color:#fff; text-decoration:underline; }
.footer p { margin:0 0 14px; line-height:1.6; }
.footer__bottom {
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:14px; color:#9fb0c4;
}
.footer__bottom p { margin:0; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width:980px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .hero__grid { grid-template-columns:1fr; gap:36px; }
  .hero .container { padding-block:44px 60px; }
}
@media (max-width:760px) {
  :root { --aj-gutter:16px; --aj-section-y:60px; }
  html { scroll-padding-top:128px; }
  .utility__tag { display:none; }
  .utility .container { justify-content:flex-end; }
  .mainbar .container { gap:10px 18px; padding-block:10px; }
  .brand img { height:40px; }
  .brand__tag { display:none; }
  .nav { margin-left:0; width:100%; gap:20px; order:3; }
  .nav a { font-size:15px; padding:4px 0; }
  .mainbar .btn { margin-left:auto; }
  .grid-3 { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; gap:28px; }
  .ip, .panel { padding:22px; }
  .ip .btn { width:100%; }
  .facts div { grid-template-columns:1fr; gap:2px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}
@media print {
  .utility, .mainbar, .footer, .cta, .band, .skip, .ip .btns { display:none; }
  body { font-size:11pt; }
  .hero { background:none; }
  .ip, .panel { box-shadow:none; }
}