/*
  boring works static site
  No external fonts. No frameworks. No tracking. No drama.
*/
:root {
  --page: #f2f5f8;
  --page-2: #e9eef4;
  --surface: #ffffff;
  --surface-muted: #f7f9fb;
  --ink: #151a21;
  --ink-soft: #364150;
  --muted: #657080;
  --line: #d4dce6;
  --line-strong: #b8c4d2;
  --blue: #315f9c;
  --blue-dark: #1f4778;
  --blue-soft: #dfeaf7;
  --blue-pale: #eef5fc;
  --shadow: 0 22px 70px rgba(21, 26, 33, 0.08);
  --shadow-soft: 0 12px 36px rgba(21, 26, 33, 0.06);
  --max: 1160px;
  --sans: Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 0%, rgba(49, 95, 156, 0.13), transparent 30rem),
    linear-gradient(180deg, var(--page), #fbfcfd 46%, var(--page));
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(49, 95, 156, 0.36); outline-offset: 4px; }
p, h1, h2, h3 { margin-top: 0; }
strong { font-weight: 700; }

.brand-boring {
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
}
.footer-brand .footer-boring { font-weight: 700; color: var(--ink); }
.footer-brand .footer-works { font-weight: 400; color: var(--muted); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);
  z-index: 20;
  padding: .7rem .9rem;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { transform: translateY(0); }

.shell { width: min(100% - 2rem, var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(212, 220, 230, .75);
  background: rgba(242, 245, 248, .86);
  backdrop-filter: blur(14px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
}
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: .34rem;
  letter-spacing: normal;
  line-height: 1;
  white-space: nowrap;
}
.wordmark-boring {
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.35rem;
}
.wordmark-works {
  font-family: Arial, sans-serif;
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--ink-soft);
}
.nav { display: flex; align-items: center; gap: .22rem; color: var(--ink-soft); font-size: .95rem; }
.nav a { padding: .56rem .74rem; }
.nav a:hover { background: rgba(255,255,255,.75); color: var(--ink); }
.nav .nav-cta { border: 1px solid var(--line-strong); background: rgba(255,255,255,.65); font-weight: 700; }

.hero { padding: clamp(4rem, 7vw, 7.4rem) 0 clamp(3.4rem, 6vw, 5.4rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(320px, .78fr); gap: clamp(2rem, 5vw, 4.6rem); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  border: 1px solid var(--line); background: rgba(255,255,255,.72);
  color: var(--ink-soft); font-size: .88rem; font-weight: 700; padding: .46rem .72rem; margin-bottom: 1.35rem;
}
.dot { width: .58rem; height: .58rem; background: var(--blue); box-shadow: 0 0 0 5px rgba(49,95,156,.12); }
.hero h1, .section h2, .cta-panel h2 { letter-spacing: normal; line-height: .98; }
.hero h1 {
  max-width: 880px;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(3.25rem, 8vw, 7rem);
  margin-bottom: 1.05rem;
}
.hero h1 .regular { font-family: Arial, sans-serif; font-weight: 400; color: var(--ink-soft); }
.hero h1 .lite { color: var(--blue); }
.hero-kicker { max-width: 770px; font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.17; letter-spacing: normal; font-weight: 700; margin-bottom: 1rem; }
.hero-copy { max-width: 680px; color: var(--ink-soft); font-size: clamp(1rem, 1.35vw, 1.15rem); margin-bottom: 1.7rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: 1.45rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .82rem 1.08rem; border: 1px solid var(--ink); font-weight: 700; letter-spacing: normal; }
.button-primary { background: var(--ink); color: #fff; }
.button-secondary { background: rgba(255,255,255,.74); border-color: var(--line-strong); color: var(--ink); }
.meta-row { display: flex; flex-wrap: wrap; gap: .58rem; color: var(--muted); font-size: .92rem; }
.meta-row span { border: 1px solid var(--line); padding: .35rem .56rem; background: rgba(255,255,255,.62); }

.panel { border: 1px solid var(--line); background: rgba(255,255,255,.86); box-shadow: var(--shadow); overflow: hidden; }
.utility-card { position: relative; }
.utility-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(49,95,156,.08), transparent 36%); }
.card-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--line); background: rgba(247,249,251,.76); }
.card-title, .small-mono, .section-label, .diagram-note, .log-row { font-family: var(--mono); }
.card-title { font-size: .8rem; color: var(--ink-soft); }
.controls { display: flex; gap: .35rem; }
.control { width: .72rem; height: .72rem; border: 1px solid var(--line-strong); background: #fff; }
.card-body { position: relative; padding: 1.2rem; }
.small-mono, .section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.small-mono { color: var(--muted); margin-bottom: .42rem; }
.mock-heading { font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.13; letter-spacing: normal; font-weight: 700; margin-bottom: 1rem; }
.progress-wrap { border: 1px solid var(--line); background: var(--page-2); height: 1rem; padding: .2rem; margin: 1rem 0 .85rem; }
.progress-bar { height: 100%; width: 68%; background: repeating-linear-gradient(90deg, var(--blue-dark), var(--blue-dark) 10px, var(--blue) 10px, var(--blue) 20px); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin: 1.1rem 0; }
.stat { border: 1px solid var(--line); background: rgba(255,255,255,.74); padding: .78rem; }
.stat strong { display: block; font-size: 1.12rem; letter-spacing: normal; }
.stat span { display: block; color: var(--muted); font-size: .78rem; }
.log-list { display: grid; gap: .5rem; margin-top: 1rem; }
.log-row { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: center; min-width: 0; border: 1px solid var(--line); background: rgba(255,255,255,.82); padding: .55rem; font-size: .77rem; color: var(--ink-soft); }
.url { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.badge { display: inline-flex; align-items: center; border: 1px solid rgba(49,95,156,.26); background: rgba(49,95,156,.1); color: var(--blue-dark); padding: .16rem .42rem; font-weight: 700; }

.brand-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.56); }
.brand-strip-inner { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; padding: 1.55rem 0; }
.brand-strip strong { font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.16; letter-spacing: normal; }
.brand-strip p { color: var(--ink-soft); margin-bottom: 0; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.section-tight { padding-top: 2.2rem; }
.section-header { max-width: 780px; margin-bottom: 2rem; }
.section-label { display: inline-block; color: var(--blue-dark); margin-bottom: .75rem; }
.section h2, .cta-panel h2 { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-size: clamp(2rem, 4vw, 4.1rem); margin-bottom: 1rem; }
.section-intro { max-width: 720px; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.16rem); }
.split-grid, .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.split-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.card, .feature-card, .use-card { border: 1px solid var(--line); background: rgba(255,255,255,.78); padding: clamp(1.08rem, 2vw, 1.45rem); box-shadow: var(--shadow-soft); }
.card.blue { background: rgba(223,234,247,.62); }
.card h3, .feature-card h3, .use-card h3 { margin-bottom: .55rem; font-size: 1.12rem; letter-spacing: normal; }
.card p, .feature-card p, .use-card p { color: var(--ink-soft); margin-bottom: 0; }
.feature-icon { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; background: var(--blue-soft); color: var(--blue-dark); margin-bottom: .95rem; font-family: var(--mono); font-weight: 700; }
.use-card { grid-column: span 2; min-height: 100%; }

.local-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(1.2rem, 3vw, 2.4rem); align-items: stretch; padding: clamp(1.25rem, 3vw, 2rem); background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(223,234,247,.78)), #fff; }
.local-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 1.4rem; }
.local-item { display: flex; align-items: center; gap: .55rem; padding: .65rem .7rem; border: 1px solid rgba(49,95,156,.2); background: rgba(255,255,255,.65); font-weight: 700; color: var(--ink-soft); }
.local-diagram { display: grid; place-items: center; min-height: 300px; border: 1px solid rgba(49,95,156,.2); background: rgba(255,255,255,.6); }
.diagram-note { color: var(--muted); font-size: .78rem; text-align: center; margin-top: .8rem; }

.product-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.2rem, 4vw, 3.6rem); align-items: start; }
.product-list { display: grid; gap: .8rem; }
.product-row { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,.78); }
.number { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; background: var(--ink); color: #fff; font-family: var(--mono); font-size: .85rem; font-weight: 700; }
.product-row p { color: var(--ink-soft); margin-bottom: 0; }
.cta-panel { text-align: center; padding: clamp(2rem, 5vw, 4rem); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(238,245,252,.78)), #fff; }
.cta-panel h2 { max-width: 840px; margin-inline: auto; }
.cta-panel p { max-width: 650px; margin-inline: auto; color: var(--ink-soft); margin-bottom: 1.5rem; }
.center-actions { justify-content: center; margin-bottom: 0; }
.site-footer { padding: 2.6rem 0; color: var(--muted); border-top: 1px solid var(--line); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .92rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.footer-links a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }

@media (max-width: 920px) {
  .nav a:not(.nav-cta) { display: none; }
  .hero-grid, .brand-strip-inner, .local-panel, .product-feature { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .shell { width: min(100% - 1.1rem, var(--max)); }
  .wordmark-boring, .wordmark-works { font-size: 1.18rem; }
  .nav-cta { display: none; }
  .hero h1 { font-size: clamp(3.05rem, 17vw, 4.35rem); }
  .stats, .split-grid, .grid-3, .grid-6, .local-list { grid-template-columns: 1fr; }
  .use-card { grid-column: auto; }
  .log-row { grid-template-columns: auto minmax(0, 1fr); }
  .log-row .badge:last-child { grid-column: 1 / -1; width: fit-content; }
}