/* ─────────────────────────────────────────────────────────────
   Web Box Apps LLC — site styles
   No external requests. No webfonts, no CDNs, no analytics.
   ───────────────────────────────────────────────────────────── */

/* ── tokens: light is the base, dark overrides ───────────────── */
:root {
  --bg:        #fbfcfd;
  --bg-alt:    #f2f5f8;
  --surface:   #ffffff;
  --surface-2: #f7f9fb;
  --border:    #e1e7ed;
  --border-2:  #cdd6df;
  --text:      #0f1821;
  --muted:     #566574;
  --dim:       #7b8996;
  --accent:    #0369a1;
  --accent-2:  #0284c7;
  --accent-bg: #e0f2fe;
  --shadow:    0 1px 2px rgba(16,24,33,.06), 0 8px 24px -12px rgba(16,24,33,.14);
  --peg:       rgba(15,24,33,.34);    /* masthead pegboard perforation */
  --peg-op:    .17;                   /* opacity of the whole masthead layer */

  --radius:    14px;
  --radius-sm: 9px;
  --maxw:      1000px;
  --gutter:    24px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg:        #0a0e13;
  --bg-alt:    #0e141b;
  --surface:   #121a23;
  --surface-2: #17212c;
  --border:    #1e2a36;
  --border-2:  #2b3a48;
  --text:      #e9eff5;
  --muted:     #93a3b3;
  --dim:       #6b7c8c;
  --accent:    #56c8fb;
  --accent-2:  #38bdf8;
  --accent-bg: #0b2b3d;
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  --peg:       rgba(233,239,245,.30);
  --peg-op:    .15;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0a0e13;
    --bg-alt:    #0e141b;
    --surface:   #121a23;
    --surface-2: #17212c;
    --border:    #1e2a36;
    --border-2:  #2b3a48;
    --text:      #e9eff5;
    --muted:     #93a3b3;
    --dim:       #6b7c8c;
    --accent:    #56c8fb;
    --accent-2:  #38bdf8;
    --accent-bg: #0b2b3d;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
    --peg:       rgba(233,239,245,.30);
    --peg-op:    .15;
    color-scheme: dark;
  }
}

/* ── reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .18s ease, color .18s ease;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 720px; }

/* accessibility: skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0; z-index: 100; font-weight: 600;
}
.skip:focus { left: 0; text-decoration: none; }

/* ── header ──────────────────────────────────────────────────── */
header {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(150%) blur(10px);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.hdr { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 660; letter-spacing: -.012em; color: var(--text); font-size: 16.5px; white-space: nowrap; flex: none; }
.brand:hover { text-decoration: none; }
.brand svg { width: 25px; height: 25px; flex: none; }
.brand .lid { transition: transform .22s cubic-bezier(.34,1.3,.64,1); transform-origin: 50% 88%; }
.brand:hover .lid { transform: translateY(-2.5px) rotate(-7deg); }

.nav-right { display: flex; align-items: center; gap: 6px; }
nav.main { display: flex; gap: 4px; }
nav.main a {
  color: var(--muted); font-size: 14.5px; font-weight: 500;
  padding: 7px 11px; border-radius: var(--radius-sm);
}
nav.main a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
nav.main a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

/* theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; margin-left: 4px;
}
.theme-toggle button {
  all: unset; cursor: pointer; display: grid; place-items: center;
  width: 28px; height: 26px; border-radius: 999px; color: var(--dim);
  transition: background .15s ease, color .15s ease;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
.theme-toggle button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.theme-toggle svg { width: 15px; height: 15px; }

/* ── hero ────────────────────────────────────────────────────── */
.hero { padding: 96px 0 76px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 340px at 12% -10%, var(--accent-bg), transparent 68%);
  opacity: .62;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
  margin: 0 0 18px; font-size: clamp(38px, 6.6vw, 66px); line-height: 1.03;
  letter-spacing: -.038em; font-weight: 700;
}
.tagline {
  font-size: clamp(19px, 2.9vw, 26px); color: var(--accent); margin: 0 0 24px;
  font-weight: 540; letter-spacing: -.018em;
}
.lede { font-size: 18.5px; color: var(--muted); max-width: 640px; margin: 0; }
.lede + .lede { margin-top: 14px; }

/* ── masthead texture: pegboard ──────────────────────────────────
   The perforation grid of a pegboard, drawn as a repeating radial-gradient. It reads
   as workshop instantly, stays completely calm behind type, and costs zero bytes —
   no image request at all.

   This replaced a darkened photograph of a real tool wall. The photo was rejected for
   two reasons that are worth recording: densely-hung tools are inherently chaotic and
   competed with the headline, and it was a diffusion render, so anything bright enough
   to see was also bright enough to reveal impossible tool geometry. A regular grid has
   neither problem. Unlike the photo it also works on the light theme, so both get it.

   Masked to fade out downward so the masthead dissolves into the page. */
.hero::before,
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    url(/assets/masthead-tools.svg),
    radial-gradient(circle at center, var(--peg) 1.6px, transparent 1.8px);
  background-repeat: no-repeat, repeat;
  background-position: center -6px, center 0;
  background-size: min(1500px, 112%) auto, 21px 21px;
  opacity: var(--peg-op);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
}
/* The interior pages have a shorter masthead, so the tools would crowd the heading.
   Grid only there — same material, less of it. */
.page-head::before { background-image: radial-gradient(circle at center, var(--peg) 1.6px, transparent 1.8px); }

/* ── page header (interior pages) ────────────────────────────── */
.page-head {
  padding: 68px 0 44px; border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h1 { margin: 0 0 12px; font-size: clamp(31px, 5vw, 46px); letter-spacing: -.032em; line-height: 1.08; font-weight: 700; }
.page-head p { margin: 0; color: var(--muted); font-size: 18px; max-width: 620px; }
.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 660; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

/* ── sections ────────────────────────────────────────────────── */
section { padding: 68px 0; border-bottom: 1px solid var(--border); }
section.tight { padding: 48px 0; }
section.alt { background: var(--bg-alt); }
h2.label {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--dim); font-weight: 660; margin: 0 0 28px;
}
h2.big { font-size: clamp(25px, 3.6vw, 33px); letter-spacing: -.026em; margin: 0 0 16px; font-weight: 680; line-height: 1.16; }
h3 { font-size: 19px; letter-spacing: -.016em; margin: 0 0 8px; font-weight: 650; }

.prose { color: var(--muted); font-size: 16.5px; max-width: 680px; }
.prose p { margin: 0 0 17px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 620; }
.prose ul { margin: 0 0 17px; padding-left: 21px; }
.prose li { margin-bottom: 8px; }
.prose h3 { color: var(--text); margin-top: 32px; }
.prose h3:first-child { margin-top: 0; }

.pull {
  border-left: 3px solid var(--accent); padding: 4px 0 4px 20px; margin: 30px 0;
  font-size: 19px; line-height: 1.5; color: var(--text); font-weight: 500; letter-spacing: -.012em;
}

/* ── product card ────────────────────────────────────────────── */
.product {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 30px; color: inherit;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.product:hover {
  text-decoration: none; border-color: var(--border-2);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.product-top { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 7px; }
.product h3 { margin: 0; font-size: 24px; letter-spacing: -.024em; font-weight: 680; }
.chip {
  font-size: 11px; font-weight: 660; letter-spacing: .07em; text-transform: uppercase;
  background: var(--accent-bg); color: var(--accent); padding: 3.5px 9px; border-radius: 999px;
}
.product .sub { color: var(--accent); font-size: 15.5px; margin: 0 0 15px; font-weight: 520; }
.product p { color: var(--muted); margin: 0 0 20px; max-width: 640px; }
.product .go { font-size: 14.5px; font-weight: 560; color: var(--accent); display: inline-flex; align-items: center; gap: 7px; }
.product .go i { font-style: normal; transition: transform .16s ease; }
.product:hover .go i { transform: translateX(4px); }

.soon {
  margin-top: 20px; color: var(--dim); font-size: 14.5px;
  display: flex; align-items: center; gap: 9px;
}
.soon::before { content: ""; height: 1px; width: 26px; background: var(--border-2); flex: none; }

/* ── principles grid ─────────────────────────────────────────── */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.tile .num { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .1em; display: block; margin-bottom: 11px; }
.tile h3 { font-size: 17px; margin-bottom: 7px; }
.tile p { color: var(--muted); font-size: 15px; margin: 0; line-height: 1.6; }

/* ── contact rows ────────────────────────────────────────────── */
.rows { display: grid; gap: 14px; }
.row {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 24px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.row .who { flex: 1 1 190px; min-width: 0; }
.row h3 { margin: 0 0 5px; font-size: 17px; }
.row .who p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.row .addr { flex: 0 0 auto; align-self: center; }
.row .addr a { font-size: 16px; font-weight: 560; letter-spacing: -.008em; }

/* ── facts table ─────────────────────────────────────────────── */
.facts { width: 100%; border-collapse: collapse; font-size: 15px; }
.facts th, .facts td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.facts th { color: var(--dim); font-weight: 560; width: 42%; padding-right: 20px; }
.facts td { color: var(--text); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }

/* ── footer ──────────────────────────────────────────────────── */
footer { padding: 48px 0 60px; color: var(--dim); font-size: 14px; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-bottom: 34px; }
.foot-col h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .13em;
  color: var(--dim); margin: 0 0 13px; font-weight: 660;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { color: var(--muted); font-size: 14.5px; }
.foot-col a:hover { color: var(--text); text-decoration: none; }
.foot-brand { max-width: 260px; }
.foot-brand p { margin: 11px 0 0; color: var(--dim); font-size: 14px; line-height: 1.6; }
.foot-bottom {
  border-top: 1px solid var(--border); padding-top: 22px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
}
.foot-note { color: var(--dim); font-size: 13px; }
.no-track {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--dim); border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
}
.no-track svg { width: 13px; height: 13px; flex: none; }

/* ── 404 ─────────────────────────────────────────────────────── */
.oops { padding: 110px 0 96px; text-align: center; }
.oops .code { font-size: 78px; font-weight: 700; letter-spacing: -.045em; color: var(--accent); line-height: 1; margin: 0 0 14px; }
.oops h1 { font-size: clamp(25px, 4vw, 34px); margin: 0 0 14px; letter-spacing: -.026em; }
.oops p { color: var(--muted); max-width: 430px; margin: 0 auto 30px; }
.btn {
  display: inline-block; background: var(--accent); color: #fff; font-weight: 560;
  padding: 11px 22px; border-radius: var(--radius-sm); font-size: 15px;
}
.btn:hover { text-decoration: none; filter: brightness(1.08); }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero { padding: 66px 0 54px; }
  section { padding: 52px 0; }
  .page-head { padding: 48px 0 34px; }
  .product { padding: 24px 21px; }
  nav.main a { padding: 7px 8px; font-size: 14px; }
  .brand span.full { display: none; }
  .row { flex-direction: column; gap: 12px; }
  .row .addr { align-self: flex-start; }
  /* flex-basis switches axis with the container: 190px is a WIDTH in the desktop row
     but becomes a minimum HEIGHT once this flips to column, padding every contact
     block out to 190px tall and stranding the address far below its blurb. */
  .row .who { flex: 1 1 auto; }
  .facts th { width: 46%; }
}
/* Phones. The header packs brand + 3 nav links + a 3-button theme toggle onto one row,
   which does not fit narrow viewports without help.

   The breakpoint is 430px, NOT 380px, and that matters: 360px (Galaxy S22) and 390-393px
   (iPhone 12 through 16) are the two most common phone widths in the wild, and a 380px
   breakpoint falls straight between them — 375 was fixed, 393 overflowed by 6px and 360
   by 14px, so those phones got a sideways scroll. Verified at 360/375/393/768 after. */
@media (max-width: 430px) {
  .wrap { padding-inline: 16px; }
  .hdr { gap: 6px; }
  .brand { font-size: 15px; gap: 7px; }
  .brand svg { width: 22px; height: 22px; }
  .nav-right { gap: 2px; }
  nav.main { gap: 0; }
  nav.main a { padding: 7px 5px; font-size: 13px; }
  .theme-toggle { margin-left: 2px; padding: 2px; }
  /* WCAG 2.2 SC 2.5.8 (AA) wants 24x24 CSS px minimum. These were 24x23 — failing by a
     single pixel of height. Height costs nothing horizontally (the header row is 64px
     tall), so there is no reason to be under it. */
  .theme-toggle button { width: 26px; height: 26px; }
  .theme-toggle svg { width: 13px; height: 13px; }
}

/* Footer links were ~20px tall — under the same 24px minimum, and footers are exactly
   where a mis-tap is most annoying (Privacy vs Terms sit next to each other). Padding
   only; the visual rhythm is unchanged. */
footer .foot-col ul a,
footer .foot-bottom a {
  display: inline-block;
  padding-block: 4px;
}

/* ── print ───────────────────────────────────────────────────── */
@media print {
  header, footer, .theme-toggle, .hero::after { display: none; }
  body { background: #fff; color: #000; }
  a { color: #000; text-decoration: underline; }
}