/* Owlwake — one stylesheet. No framework, no JavaScript anywhere on the site, and nothing loaded
   from another origin, which is why the page can send script-src 'none' and still say so in the
   footer. The one typeface is served from this domain (see fonts/NOTICE).

   Palette: "Night watch", chosen 10 Sep 2026 (docs/design/). Deep navy for trust, amber for
   attention, warm paper for the body.

   THE COLOUR RULE, as scoped on 10 Sep 2026: green, amber and red carry meaning (brand guide H.4
   — all quiet, watching closely, something's up) inside STATUS SURFACES only: the example alert,
   the example report, the status page, and the mark's four states. Amber is also the brand accent
   in ordinary page chrome, because it is the colour of the mark's eyes. What it must never do is
   what it was doing here on 10 Sep: red on six cost lines where nothing is wrong, and green as a
   bullet glyph. Decoration in a status colour is how a status page loses its language.

   SHAPE: three radii, by role. --r-pill for pills and circles, --r-surface for panels a reader
   treats as a separate object, --r-control for things you click or type into. Nothing else. */

@font-face {
  font-family: "Owlwake Display";
  src: url("fonts/owlwake-display.woff2") format("woff2");   /* relative: the console's preview serves this file at /site-static */
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --deep:#0f2a44;
  --deeper:#0a1e31;
  --ink:#16212c;
  --muted:#5b6b78;
  --paper:#fbfaf7;
  --surface:#ffffff;
  --line:#e6e2da;
  --on-deep:#dbe6ef;
  --on-deep-dim:#97aec2;

  --accent:#f0a02c;         /* attention: the mark's eyes, the primary button, the featured tier */
  --accent-hover:#ffb246;
  --quiet:#1f7a4d;          /* status: all quiet */
  --watch:#f0a02c;          /* status: watching closely */
  --alarm:#c8443c;          /* status: something's up */

  --r-pill:999px;
  --r-surface:10px;
  --r-control:6px;
  --measure:62ch;
  --display:"Owlwake Display", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: var(--display); font-weight: 600;
  line-height: 1.16; color: var(--deep); margin: 0 0 .5em; letter-spacing: -.01em;
}
h1 { font-size: clamp(2rem, 4.1vw, 3rem); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.22rem; }          /* was 1.06rem against a 1rem body: not a heading */
p { margin: 0 0 1em; max-width: var(--measure); }
a { color: var(--deep); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-control); }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: .6rem; top: .6rem; z-index: 50; background: var(--deep); color: #fff;
  padding: .6rem 1rem; border-radius: var(--r-control); text-decoration: none; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.wrap.narrow { max-width: 780px; }
main > section { padding: clamp(2.75rem, 6.5vw, 5rem) 0; }
/* the header is sticky, so an anchor jump must stop short of it */
section[id] { scroll-margin-top: 4.6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.section-lede { color: var(--muted); }
.note { color: var(--muted); font-size: .95rem; margin-top: 1.6rem; }

/* ---- header ------------------------------------------------------------ */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: 1140px; margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.lockup {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.22rem; color: var(--deep); text-decoration: none;
}
.lockup:hover { color: var(--deep); }
.wordmark { height: .78em; width: auto; display: block; }
.wide-nav { display: flex; gap: 1.35rem; font-size: .94rem; }
.wide-nav a { color: var(--muted); text-decoration: none; }
.wide-nav a:hover { color: var(--deep); }

/* the sections menu for narrow screens: a disclosure, not a script */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--deep);
  padding: .45rem .8rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-control);
}
.menu summary::-webkit-details-marker { display: none; }
.menu nav {
  position: absolute; right: 0; top: calc(100% + .55rem); z-index: 20;
  display: flex; flex-direction: column; min-width: 12rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: .4rem; box-shadow: 0 14px 30px rgba(15,42,68,.16);
}
.menu nav a { color: var(--ink); text-decoration: none; padding: .5rem .6rem; border-radius: var(--r-control); }
.menu nav a:hover { background: var(--paper); color: var(--deep); }
@media (max-width: 820px) { .wide-nav { display: none; } .menu { display: block; } }

.narrow-only { display: none; }
@media (max-width: 560px) { .wide-only { display: none; } .narrow-only { display: inline; } }

/* ---- buttons ----------------------------------------------------------- */
/* One primary, one secondary, one ghost. The primary is amber and it is the same button
   everywhere, including the submit at the bottom of the form, which is the only conversion
   on the page and used to be styled like a secondary pricing button. */
.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  background: var(--accent); color: var(--deeper);
  font: inherit; font-weight: 650; font-size: .96rem;
  padding: .62rem 1.15rem; border-radius: var(--r-control);
}
.btn:hover { background: var(--accent-hover); color: var(--deeper); }
.btn-lg { padding: .85rem 1.6rem; font-size: 1.02rem; }
.btn-small { padding: .5rem .95rem; font-size: .92rem; }
.btn-secondary { background: transparent; color: var(--deep); box-shadow: inset 0 0 0 1.5px var(--deep); }
.btn-secondary:hover { background: var(--deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--on-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-deep) 42%, transparent); }
.btn-ghost:hover { background: color-mix(in srgb, #fff 10%, transparent); color: #fff; }

/* ---- hero -------------------------------------------------------------- */
.hero { background: var(--deep); color: #fff; }
.hero h1 { color: #fff; max-width: 22ch; }   /* wide enough to break at the comma */
.hero .lede { font-size: 1.13rem; color: var(--on-deep); max-width: 48ch; }
.hero .reassure { color: var(--on-deep-dim); font-size: .94rem; margin-bottom: 0; }
.hero-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } }
.eyebrow {
  margin: 0 0 1rem; font-size: .95rem; font-weight: 600; color: var(--accent);
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.7rem 0 1rem; }

/* the example alert — a status surface, so the status colours mean what they say */
.alert {
  margin: 0 0 0 auto; max-width: 430px;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-surface); padding: 1.15rem 1.25rem;
  box-shadow: 0 22px 48px rgba(0,0,0,.28);
}
.alert-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .75rem; }
.alert-who { font-size: .82rem; color: var(--muted); }
.chip {
  font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--alarm) 13%, transparent); color: var(--alarm);
}
.alert p { font-size: .95rem; margin: 0 0 .6rem; }
/* two class selectors, so it beats `.alert p` on specificity instead of on !important */
.alert .alert-lead { font-weight: 600; color: var(--deep); font-family: var(--display); font-size: 1.08rem; }
.alert-sig { color: var(--muted); font-size: .88rem; }
.alert-foot { color: var(--muted); font-size: .78rem; margin: .5rem 0 0; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 26px; margin: .9rem 0 0; }
.bars i { flex: 1; height: 55%; border-radius: var(--r-pill); background: color-mix(in srgb, var(--quiet) 55%, transparent); }

/* the one ambient animation on the page: the mark blinks, eyes only, every nine seconds */
.eyes { transform-origin: 32px 35px; animation: blink 9s infinite; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.08); } }

/* ---- trust strip ------------------------------------------------------- */
main > section.strip { background: var(--deeper); color: var(--on-deep); padding: 1.05rem 0; }
.strip-grid { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(4, 1fr); font-size: .92rem; }
.strip p { margin: 0; max-width: none; }
.strip b { color: #fff; font-weight: 650; }
@media (max-width: 900px) { .strip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .strip-grid { grid-template-columns: 1fr; } }

/* ---- what we watch ----------------------------------------------------- */
/* A ranked list rather than six equal boxes: the section says it is ordered by what costs
   money, and a grid threw that ordering away. */
.watchlist { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.watchlist li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1.05rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--line); align-items: start;
}
@media (min-width: 880px) { .watchlist li { grid-template-columns: auto minmax(0, 1fr) 24ch; } }
.wico { display: block; padding-top: .2rem; }
.wmain { min-width: 0; }
.wmain h3 { margin: 0 0 .2rem; }
.wmain p { color: var(--muted); font-size: .97rem; margin: 0; }
.watchlist .cost { grid-column: 2; margin: .2rem 0 0; color: var(--muted); font-size: .89rem; max-width: none; }
@media (min-width: 880px) {
  .watchlist .cost { grid-column: 3; margin: 0; padding-left: 1.1rem; border-left: 2px solid var(--line); }
}
.ico { width: 26px; height: 26px; color: var(--accent); }

/* ---- how it works ------------------------------------------------------ */
.how { background: var(--surface); border-block: 1px solid var(--line); }
.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.steps li { position: relative; padding-left: 3.1rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.1rem; width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--deep); color: #fff; font-weight: 700; font-size: .95rem;
}
.steps h3 { margin-bottom: .3rem; }
.steps p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ---- pricing ----------------------------------------------------------- */
.toggle { display: inline-flex; margin: 1rem 0 1.7rem; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.toggle a { padding: .45rem 1.05rem; font-size: .9rem; color: var(--muted); text-decoration: none; }
.toggle a.on { background: var(--deep); color: #fff; }
.tiers { display: grid; gap: 1.3rem; grid-template-columns: repeat(3, 1fr); align-items: start; margin-top: .4rem; }
@media (max-width: 940px) { .tiers { grid-template-columns: 1fr; } }
.tier {
  position: relative; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-surface); padding: 1.6rem;
}
.tier-featured { border-color: var(--accent); border-width: 2px; box-shadow: 0 14px 34px rgba(15,42,68,.10); }
.badge {
  position: absolute; top: -.8rem; left: 1.4rem; margin: 0;
  background: var(--accent); color: var(--deeper);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .22rem .7rem; border-radius: var(--r-pill);
}
.price { font-family: var(--display); font-size: 2.5rem; font-weight: 600; color: var(--deep); letter-spacing: -.02em; margin-bottom: .1rem; }
.price .unit { display: block; font-family: inherit; font-size: .86rem; font-weight: 400; color: var(--muted); letter-spacing: normal; }
.who { font-weight: 600; margin: .7rem 0 1rem; font-size: .97rem; }
.tier ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.tier li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; color: var(--muted); font-size: .94rem; }
/* a neutral dash, not a green dot: green means healthy, not "list item" */
.tier li::before { content: ""; position: absolute; left: .2rem; top: .72rem; width: .55rem; height: 1.5px; background: var(--muted); }
/* "Coming soon" (launch spec §4.0): neutral on purpose. Green, amber and red are status, and this is not one. */
.soon {
  display: inline-block; margin-left: .3rem; vertical-align: .08em; white-space: nowrap;
  font-family: system-ui, sans-serif; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .08rem .45rem; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
}

.tablewrap { overflow-x: auto; margin-top: 2.4rem; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 34rem; }
caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .6rem; }
th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--line); }
thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; }
tbody th { font-weight: 500; color: var(--ink); }
.c { text-align: center; width: 15%; }
.yes { color: var(--deep); font-weight: 700; }
.no { color: color-mix(in srgb, var(--muted) 55%, transparent); }

/* ---- proof ------------------------------------------------------------- */
.proof { background: var(--deep); color: #fff; }
.proof h2 { color: #fff; }
/* only the text column, never the white report card sitting inside this section:
   `.proof p` also matched .verdict and .report-foot and left them pale on white */
.proof-grid > div p { color: var(--on-deep); }
.proof-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 880px) { .proof-grid { grid-template-columns: 1fr; } }
.report { margin: 0; background: var(--surface); color: var(--ink); border-radius: var(--r-surface);
  padding: 1.3rem 1.4rem; box-shadow: 0 20px 44px rgba(0,0,0,.3); }
.report-head { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--muted); margin-bottom: 1rem; }
.verdict { font-family: var(--display); font-size: 1.45rem; font-weight: 600; color: var(--quiet); margin: 0 0 .15rem; }
.verdict-sub { font-size: .87rem; color: var(--muted); margin: 0; }
.ledger { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .88rem; }
.ledger li { display: flex; gap: .7rem; padding: .45rem 0; border-top: 1px solid var(--line); color: var(--muted); }
.ledger b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.report-foot { font-size: .78rem; color: var(--muted); margin: .9rem 0 0; }

/* ---- early access ------------------------------------------------------ */
.early { background: var(--surface); border-block: 1px solid var(--line); }
.early-grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: 1.1fr .9fr; align-items: start; margin-top: 1.5rem; }
@media (max-width: 880px) { .early-grid { grid-template-columns: 1fr; } }
.early form { display: grid; gap: .3rem; max-width: 34rem; }
label { margin-top: .8rem; font-size: .95rem; font-weight: 600; color: var(--deep); }
.optional { font-weight: 400; color: var(--muted); }
input, textarea, select {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-control); padding: .65rem .75rem;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.early button { margin-top: 1.2rem; justify-self: start; }
.after-form { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); max-width: 46ch; }
.thanks { background: color-mix(in srgb, var(--quiet) 12%, transparent);
  border-left: 4px solid var(--quiet); border-radius: var(--r-control); padding: .8rem 1rem; color: #14532d; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.team { display: flex; gap: 1.1rem; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-surface); padding: 1.35rem; }
.team .owl { flex: none; }
.team p { font-size: .96rem; margin: 0 0 .5rem; }
.team-sig { color: var(--muted); font-size: .9rem; margin: 0; }

/* ---- questions --------------------------------------------------------- */
.questions details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.questions summary { display: flex; justify-content: space-between; gap: 1rem; cursor: pointer;
  font-family: var(--display); font-size: 1.1rem; color: var(--deep); list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; color: var(--accent); font-weight: 700; }
.questions details[open] summary::after { content: "\2013"; }
.questions details p { margin: .7rem 0 0; color: var(--muted); font-size: .96rem; }

/* ---- footer ------------------------------------------------------------ */
.foot { background: var(--deeper); color: var(--on-deep); padding: 2.6rem 0; }
.foot a { color: #dfe9f1; }
.foot a:hover { color: var(--accent); }
.foot .tagline { font-family: var(--display); color: #fff; font-size: 1.3rem; }
.foot .fineprint { color: var(--on-deep-dim); font-size: .87rem; margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* A shared scan's page (/check/<token>). The label is status, so the alarm colour is its only use here. */
.check-head { padding: 3.5rem 0 1.5rem; }
.check-body { padding: 0 0 4rem; }
.check-finding { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 1.1rem 1.25rem; margin: 0 0 1rem; }
.check-finding h2 { font-size: 1.15rem; margin: .2rem 0 .5rem; }
.check-finding p { margin: 0 0 .45rem; }
.check-label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.check-label.needs { color: var(--alarm); }
.check-list { padding-left: 1.1rem; }
.check-list li { margin-bottom: .3rem; }
.check-close { margin: 2.5rem 0 1.5rem; }
.check-ran { margin: 2rem 0 0; color: var(--muted); }

/* A client's status page (/status/<slug>, and status.theirsite.com). Availability only; the three status colours. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.status-page { padding: 3rem 0 4rem; }
.status-page h1 { margin-bottom: .4rem; }
.status-page h2 { font-size: 1.05rem; margin: 2.2rem 0 .7rem; }
.status-state { font-size: 1.25rem; font-weight: 700; margin: 0; }
.status-state.up { color: var(--quiet); }
.status-state.down { color: var(--alarm); }
.status-state.unknown { color: var(--muted); }
.status-days { display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; }
.status-day { flex: 1; height: 2.2rem; min-width: 2px; border-radius: 2px; background: var(--quiet); }
.status-day.partial { background: var(--watch); }
.status-day.down { background: var(--alarm); }
.status-day.unwatched { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.status-outages { padding-left: 1.1rem; }
.status-outages li { margin-bottom: .3rem; }
.status-foot { margin-top: 2.5rem; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .4rem;
  flex-wrap: wrap; }