/*
 * Design sources:
 *  - Old Ohmic Test Systems site (github repo shanemmattner/ohmic-test-website, styles.css): palette, sticky header, gradient hero, card grid, footer.
 *  - https://www.saleae.com/ : short promise hero with product image beside the text, one primary CTA.
 *  - https://flipper.net/ : labeled-row tech-spec table; one block per capability.
 *  - https://www.crowdsupply.com/securinghw/tigard : audience named in plain words; CTA jumps to an on-page anchor.
 *  - https://www.crowdsupply.com/1bitsquared/glasgow : explicit "who it is for" list; specs as plain rows.
 *  - https://black-magic.org/ : developer-first copy, proof over adjectives.
 *  - https://www.getresponse.com/blog/waitlist-landing-page : short waitlist form, optional survey after.
 * Install block: https://deno.com/ (command + Copy button, one line below) and https://bun.sh/ (install kept out of the menu).
 * Static: one first-party script (copy.js, Download copy button), no external assets, no web fonts. Light theme only.
 */
:root { color-scheme: light; --primary:#607D8B; --primary-dark:#455A64; --accent:#003366; --accent-light:#1a4d80; --text:#1f2937; --text-light:#6b7280; --bg:#fff; --bg-light:#f9fafb; --line:#e5e7eb; --pill:#e8eef6; --hero-bg:linear-gradient(135deg,#455A64 0%,#003366 55%,#002147 100%); }
*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
section[id] { scroll-margin-top:72px; }
img { max-width:100%; height:auto; }
a { color:var(--accent); }
h1,h2,h3 { font-weight:700; letter-spacing:-.02em; line-height:1.2; margin:0 0 .75rem; text-wrap:balance; }
/* No one-word last lines: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-wrap-style */
p, li, figcaption, td { text-wrap:pretty; }
h1 { font-size:clamp(2rem,6vw,3rem); }
h2 { font-size:clamp(1.6rem,4vw,2.25rem); }
h3 { font-size:1.25rem; }
p { margin:0 0 1rem; }
.wrap { max-width:1120px; margin:0 auto; padding:0 1.25rem; }
:focus-visible { outline:3px solid var(--accent-light); outline-offset:2px; }

/* Header */
.header { position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line); }
.header-in { max-width:1120px; margin:0 auto; padding:.6rem 1.25rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-weight:700; font-size:1.2rem; text-decoration:none; white-space:nowrap; }
.nav { display:flex; align-items:center; gap:1.25rem; }
.nl { color:var(--text); text-decoration:none; font-weight:500; }
.nl:hover { color:var(--accent); }

/* Buttons */
.btn, button { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.7rem 1.5rem; border:2px solid var(--accent); border-radius:8px; background:var(--accent); color:#fff; font:inherit; font-weight:600; text-decoration:none; cursor:pointer; text-align:center; }
.btn:hover, button:hover { background:var(--accent-light); border-color:var(--accent-light); }
.btn-sm { padding:.4rem 1rem; }
.btn-light { background:#fff; color:var(--accent); border-color:#fff; }
.btn-light:hover { background:#eef2f7; border-color:#eef2f7; }
/* One filled button per screen; the second action is a text link (https://tailscale.com/ hero). */
.btn-outline { background:transparent; color:var(--accent); }
.btn-outline:hover { background:var(--pill); color:var(--accent); border-color:var(--accent); }
.textlink { display:inline-flex; align-items:center; min-height:2.75rem; color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:.2em; }

/* Hero */
.hero { background:var(--hero-bg); color:#fff; padding:3rem 0; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
.eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; opacity:.7; margin-bottom:.75rem; }
.sub { font-size:1.15rem; opacity:.92; }
.tagline { font-size:1.15rem; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero .note { font-size:.9rem; opacity:.8; margin-top:1rem; }
.hero-img { display:block; width:100%; border-radius:16px; box-shadow:0 20px 50px rgba(0,0,0,.4); }

/* Strip */

/* Sections and cards */
.section { padding:4rem 0; }
/* One left edge for every heading, lead, table and image (https://linear.app/). */
.section > .wrap > h2, .section > .wrap > .lead { text-align:left; }
.services { background:var(--bg-light); }
.lead { color:var(--text-light); font-size:1.1rem; margin-bottom:2rem; }

/* Agents */
.two { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }

/* Video */
.video { position:relative; width:100%; max-width:none; aspect-ratio:16/9; margin:1.5rem 0 0; border-radius:12px; overflow:hidden; background:#000; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Why */

/* Specs */
table.spec { width:100%; max-width:820px; margin:0 auto; border-collapse:collapse; table-layout:fixed; }
table.spec th, table.spec td { text-align:left; padding:.8rem 1rem; vertical-align:top; overflow-wrap:anywhere; border-bottom:1px solid var(--line); }
table.spec th { width:38%; color:var(--accent); font-weight:600; }
table.spec tr:nth-child(odd) { background:var(--bg-light); }

/* Signup */
.signup { background:var(--hero-bg); color:#fff; }
.signup h2 { text-align:left; }
/* Text starts level with the form, so no empty band above it at 1440 (https://linear.app/). */
.signup .two { align-items:start; }
.signup .lead { color:#fff; max-width:45ch; }
.formcard { background:#fff; color:var(--text); border-radius:12px; padding:2rem; }
.formcard a { color:var(--accent); }
label { display:block; font-weight:600; margin-bottom:.25rem; }
.field { margin:0 0 1rem; }
fieldset label, .check label { display:inline; font-weight:400; }
input[type=email], input[type=text], select, textarea { width:100%; max-width:100%; min-height:2.75rem; padding:.55rem .7rem; font:inherit; color:var(--text); background:#fff; border:1px solid #cbd5e1; border-radius:8px; }
textarea { resize:vertical; }
input[type=checkbox] { width:1.2rem; height:1.2rem; vertical-align:middle; accent-color:var(--accent); }
.check { background:#e6f0fb; border-radius:8px; padding:.7rem .9rem; margin:0 0 1rem; }
.moreq { margin:0 0 1rem; }
.moreq summary { cursor:pointer; color:var(--accent); font-weight:600; min-height:2.75rem; display:flex; align-items:center; list-style:none; }
.moreq summary::-webkit-details-marker { display:none; }
.moreq summary::before { content:"\25B8"; margin-right:.5rem; }
.moreq[open] summary::before { content:"\25BE"; }
fieldset { border:1px solid var(--line); border-radius:8px; padding:.5rem 1rem 1rem; margin:1rem 0; min-width:0; display:grid; grid-template-columns:1fr; gap:.2rem .75rem; }
fieldset p { margin:0; padding:.35rem 0; }
legend { font-weight:700; padding:0 .4rem; }
.hint { font-weight:400; color:var(--text-light); font-size:.9rem; }
.submit { margin:0 0 1rem; }
.submit button { width:100%; }
.formcard .note { color:var(--text-light); font-size:.9rem; margin:0; }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
/* "Other" text box shows only when its Other box is checked; no script needed. */
.other { display:none; margin-left:.5rem; width:auto; max-width:100%; min-height:2.75rem; padding:.25rem .5rem; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:var(--text); font:inherit; }
input:checked ~ .other { display:inline-block; }

/* Footer */
/* FAQ: plain <details> list, SEGGER-style (https://www.segger.com/products/debug-probes/j-link/),
   native disclosure (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details). */
.faq { background:var(--bg-light); }
.faq details { max-width:65ch; border-top:1px solid var(--line); }
.faq details:last-of-type { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-weight:600; min-height:2.75rem; padding:.75rem 0; display:flex; align-items:baseline; list-style:none; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"\25B8"; margin-right:.5rem; color:var(--accent); }
.faq details[open] summary::before { content:"\25BE"; }
.faq details p { margin:0 0 1rem 1.25rem; color:var(--text-light); }
.footer { background:#003366; color:#fff; text-align:center; padding:2.5rem 1.25rem; }
.footer a { color:#fff; text-decoration:underline; }
.footer p { margin:0 0 .75rem; }
.ots { display:inline-block; vertical-align:middle; width:9rem; height:auto; background:#fff; padding:.3rem .5rem; border-radius:6px; }
.otsfoot .ots { width:12rem; }
.tm { font-size:.8rem; opacity:.8; }

/* Plain pages */
main.page { max-width:42rem; margin:0 auto; padding:2rem 1.25rem 3rem; }
main.page h2 { margin-top:1.75rem; font-size:1.2rem; }
/* Security page data path: stacked on phones, one row on wide screens. */
.flow { margin:1rem 0 1.25rem; }
.flow ol { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; align-items:stretch; gap:.4rem; }
.flow .node { border:2px solid var(--accent); border-radius:8px; padding:.6rem .8rem; background:var(--bg-light); text-align:center; }
.flow .node b { display:block; color:var(--accent); }
.flow .node span { display:block; color:var(--text-light); font-size:.9rem; }
.flow .link { text-align:center; color:var(--text-light); font-size:.9rem; }
.flow .link::before { content:"\2195"; display:block; color:var(--accent); font-size:1.2rem; line-height:1; }
.flow figcaption { margin-top:.6rem; font-weight:600; text-align:center; }
@media (min-width:720px) {
  .flow ol { flex-direction:row; align-items:center; }
  .flow .node { flex:1 1 0; }
  .flow .link { flex:0 1 7rem; }
  .flow .link::before { content:"\2194"; }
}
@media (min-width:1000px) {
  .flow { margin-left:-6rem; margin-right:-6rem; }
}

@media (max-width:767px) {
  .nl { display:none; }
  /* Compact header button on phones, so the hero button stays the one primary action (https://linear.app/ at 390 px). */
  .nav .btn { font-size:.875rem; min-height:2.25rem; padding:.3rem .8rem; border-width:1.5px; }
  .hero { padding:2rem 0; }
  .section { padding:2.75rem 0; }
  .formcard { padding:1.25rem; }
  .logo { font-size:1.05rem; }
}
@media (min-width:768px) {
  fieldset { grid-template-columns:repeat(2,1fr); }
  fieldset legend { grid-column:1 / -1; }
  .two { grid-template-columns:1fr 1fr; gap:3rem; }
  .submit button { width:100%; }
}
@media (min-width:900px) {
  .hero { padding:4.5rem 0; }
  .hero-grid { grid-template-columns:11fr 9fr; gap:3rem; }
}
/* Header shows the company logo; the product is Scout (Shane, 2026-10-09). */
.logo-ots { display:block; height:30px; width:auto; }
@media (max-width:480px) { .logo-ots { height:24px; } }
/* Demo poster inside the iframe's srcdoc; https://css-tricks.com/lazy-load-embedded-youtube-videos/ */
.ytdoc { margin:0; background:#000; }
.yt { position:fixed; inset:0; display:block; }
.yt img { width:100%; height:100%; object-fit:cover; display:block; }
.play { position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px; border-radius:50%; background:rgba(0,51,102,.9); box-shadow:0 4px 16px rgba(0,0,0,.4); }
.play::after { content:""; position:absolute; left:29px; top:22px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff; }
.yt:hover .play { background:#1a4d80; }
.lead { max-width:65ch; }
/* Three pillars, plain columns under a rule; no card chrome (https://www.saleae.com/ section style). */
.pillars { display:grid; grid-template-columns:1fr; gap:2rem; margin-top:2rem; }
.pillars article { border-top:3px solid var(--accent); padding-top:1.25rem; }
.pillars h3 { color:var(--accent); }
.pillars p { color:var(--text-light); margin:0; }
.nw { white-space:nowrap; }
@media (min-width:768px) { .pillars { grid-template-columns:repeat(3,1fr); gap:2.5rem; } }
/* Specs: table beside the board render (https://www.segger.com/products/debug-probes/j-link/ spec tables). */
.spec-grid { display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; margin-top:1.5rem; }
.spec-grid table.spec { max-width:none; margin:0; }
.spec-img { display:block; width:100%; border-radius:12px; background:#eceef0; }
.cellnote { display:block; margin-top:.35rem; color:var(--text-light); font-size:.9rem; }
@media (min-width:900px) { .spec-grid { grid-template-columns:3fr 2fr; gap:3rem; } }
/* At phone width the value column gets more room. */
@media (max-width:899px) { table.spec th { width:34%; } }
/* VS Code section: one screenshot, then a two-column feature list (https://flipper.net/ one block per capability). */
.vscode { background:var(--bg-light); }
.shot { margin:0 0 2rem; }
.shot img { display:block; width:100%; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); background:#000; }
.shot figcaption { color:var(--text-light); font-size:.95rem; margin-top:.6rem; }
.vsc { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:1rem 2.5rem; }
.vsc li { border-top:1px solid var(--line); padding-top:.75rem; color:var(--text-light); }
.vsc strong { color:var(--accent); }
.vsc code { font-size:.9em; }
@media (min-width:768px) { .vsc { grid-template-columns:repeat(2,1fr); } }

/* Specs centered (Shane, 2026-10-09). */
.specs .wrap > h2 { text-align:center; }
.specs .spec-grid { grid-template-columns:1fr; justify-items:center; }
.specs .spec-grid table.spec { max-width:820px; margin:0 auto; }
#agent-quickstart pre { overflow-x:auto; background:var(--bg-light); border:1px solid var(--line); padding:1rem; border-radius:6px; }
/* Download: command box with a Copy button (button is un-hidden by copy.js). */
.dl { margin-top:1rem; max-width:48rem; }
.cmd { display:flex; flex-wrap:nowrap; align-items:stretch; gap:.5rem; margin:0 0 .4rem; }
.cmd pre { flex:1 1 0; min-width:0; margin:0; overflow-x:auto; background:var(--bg-light); border:1px solid var(--line); padding:.6rem .9rem; border-radius:6px; }
.cmd code { user-select:all; white-space:pre; }
.cmd button { flex:0 0 auto; min-width:4.5rem; min-height:2.5rem; }
.cmd button[hidden] { display:none; }
@media (max-width:600px) {
  .cmd { gap:.35rem; }
  .cmd pre { padding:.5rem .55rem; }
  .cmd code { font-size:.8rem; }
  .cmd button { min-width:3.5rem; }
}
.dl-alt { margin:0; font-size:.875rem; color:var(--text-light); }