/* IncidentReady: the night-shift operations room.

   Brand direction approved 2026-10-07: 2 a.m., something is being exploited,
   and the clock has started. Urgent but calm. The only dark site of the six:
   near-black panels, white type, one signal amber for anything that counts
   down, a red reserved for "overdue". Barlow Condensed for the instrument
   panel, Barlow for reading. No monospace: the ones we tried slash their
   zeros, and a slashed zero in a price reads as a stray symbol. The page is
   one vertical incident timeline. Nothing is shared with the other five
   sites. Property names stay compatible with the inline blocks on the legal
   and order pages, which are light. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/BarlowCondensed-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500 700;
  font-display: swap; src: url("fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("fonts/Barlow-Italic.woff2") format("woff2"); }

:root {
  --night: #0d0f12;
  --panel: #161a1f;
  --panel-2: #1d2228;
  --edge: rgba(255, 255, 255, .12);
  --text: #e9e7e2;
  --dim: #a4a9b0;
  --amber: #ffb020;
  --red: #ff6a5c;
  /* light-page tokens for the legal and order pages */
  --paper: #f4f3f0;
  --paper-deep: #e9e7e2;
  --sheet: #ffffff;
  --ink: #111418;
  --ink-soft: #2f343b;
  --muted: #555b63;
  --rule: rgba(17, 20, 24, .16);
  --spot: #a4570a;
  --cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "Barlow", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --serif: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --max: 1200px;
  --gut: clamp(18px, 4vw, 52px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
body.ops { background: var(--night); color: var(--text); color-scheme: dark; }
body:not(.ops) { background: var(--paper); color: var(--ink-soft); }
img { display: block; max-width: 100%; height: auto; }
.ops a { color: var(--text); text-underline-offset: .2em; }
.ops a:hover { color: var(--amber); }
body:not(.ops) a { color: var(--ink); text-underline-offset: .2em; }
body:not(.ops) a:hover { color: var(--spot); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
p { margin: 0 0 1em; }
.ops b, .ops strong { color: #fff; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--amber); color: var(--night); padding: 12px 18px; }
.skip:focus { left: 0; }

.ops h1, .ops h2, .ops h3 { font-family: var(--cond); color: #fff; margin: 0; font-weight: 700; }
.ops h1 { font-size: clamp(50px, 7vw, 104px); line-height: .9; text-transform: uppercase; letter-spacing: .005em; }
.ops h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: .95; text-transform: uppercase; }
.ops h3 { font-size: 24px; line-height: 1.1; font-weight: 700; letter-spacing: .01em; }
.ops h1 .amb, .ops h2 .amb { color: var(--amber); }
.tag { font-family: var(--cond); font-weight: 500; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin: 0 0 16px; }

/* -- status bar and header ------------------------------------------------ */
.status { background: #000; border-bottom: 1px solid var(--edge); font-family: var(--cond); font-weight: 500;
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.status .wrap { display: flex; gap: 8px 24px; justify-content: space-between; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.status .live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
  margin-right: 10px; vertical-align: 1px; }
.bar { border-bottom: 1px solid var(--edge); }
.bar .wrap { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; min-height: 70px; }
.mark { font-family: var(--cond); font-weight: 700; font-size: 30px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff !important; text-decoration: none; margin-right: auto; }
.mark span { color: var(--amber); }
.bar nav { display: flex; gap: 6px 24px; flex-wrap: wrap; }
.bar nav a { font-family: var(--cond); font-weight: 500; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; padding: 6px 0; }
.bar nav a:hover { color: #fff; }
.bar .buy { background: var(--amber); color: var(--night) !important; font-family: var(--cond); font-weight: 700; font-size: 18px;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 11px 18px; }
.bar .buy:hover { background: #fff; }

/* -- buttons ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px 28px;
  background: var(--amber); color: var(--night) !important; font-family: var(--cond); font-weight: 700; font-size: 21px;
  letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 0; transition: background-color .15s; }
.btn:hover { background: #fff; }
.btn.line { background: transparent; color: var(--text) !important; box-shadow: inset 0 0 0 2px var(--edge); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--amber); color: var(--amber) !important; }

/* -- hero ------------------------------------------------------------------- */
.hero { padding: clamp(40px, 5vw, 76px) 0 clamp(48px, 6vw, 88px); border-bottom: 1px solid var(--edge); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.hero h1 { margin-bottom: 26px; }
.hero .lede { font-size: 20px; color: #d6d4cf; max-width: 32em; }
.deal { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--edge); }
.deal .price { font-family: var(--cond); font-weight: 700; font-size: 66px; line-height: .9; color: #fff; margin: 0; }
.deal .price small { display: block; font-weight: 500; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
.deal .ask { font-size: 16px; color: var(--dim); }
.promise { margin-top: 22px; font-size: 16px; color: #d6d4cf; border-left: 3px solid var(--amber); padding: 4px 0 4px 16px; max-width: 34em; }
.promise b { color: var(--amber); }

/* The clock console, as an instrument panel. */
.console { background: var(--panel); border: 1px solid var(--edge); padding: 22px 22px 18px; }
.c-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--edge); padding-bottom: 14px; margin-bottom: 16px; }
.c-title { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.c-track { display: flex; }
.c-track button, .c-input button { font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  text-transform: uppercase; min-height: 40px; padding: 8px 14px; background: transparent; color: var(--text);
  border: 1px solid var(--edge); cursor: pointer; }
.c-track button[aria-pressed="true"] { background: var(--amber); color: var(--night); border-color: var(--amber); }
.c-input { display: flex; gap: 10px; align-items: end; margin-bottom: 12px; flex-wrap: wrap; }
.c-input > div { flex: 1 1 220px; }
.c-input label { display: block; font-size: 14px; color: var(--dim); margin-bottom: 6px; }
.c-input input { width: 100%; font: 16px/1.2 var(--sans); padding: 9px 10px; min-height: 42px; background: var(--night);
  color: var(--text); border: 1px solid var(--edge); color-scheme: dark; }
.clocks { list-style: none; margin: 0; padding: 0; }
.clock { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--edge); }
.clock .lim { font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: .95; color: var(--amber); }
.clock .what { display: block; font-weight: 500; font-size: 16px; line-height: 1.3; color: #fff; }
.clock .when { display: block; font-size: 14px; color: var(--dim); margin-top: 3px; }
.clock .when .wk { color: var(--amber); }
.clock .left { font-family: var(--cond); font-weight: 700; font-size: 22px; text-align: right; white-space: nowrap; color: #fff; }
.clock .left small { display: block; font-weight: 500; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.clock .left.warn { color: var(--amber); }
.clock .left.over { color: var(--red); }
.c-note { font-size: 13.5px; line-height: 1.5; color: var(--dim); margin: 12px 0 0; border-top: 1px solid var(--edge); padding-top: 12px; }

/* -- sections ------------------------------------------------------------------ */
.sec { padding: clamp(60px, 7vw, 104px) 0; border-bottom: 1px solid var(--edge); }
.sec.panel { background: var(--panel); }
.sec header { max-width: 46em; margin-bottom: 44px; }
.sec .lead { font-size: 19px; color: #d6d4cf; margin-top: 16px; }

/* The incident timeline: what the law wants, and what the pack hands you. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 118px; top: 8px; bottom: 8px; width: 2px; background: var(--edge); }
.timeline li { display: grid; grid-template-columns: 100px 36px minmax(0, 1fr) minmax(0, 1fr); gap: 0 24px; padding: 0 0 46px; position: relative; }
.timeline .t { font-family: var(--cond); font-weight: 700; font-size: 40px; line-height: .95; color: var(--amber); text-align: right; }
.timeline .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--night); border: 3px solid var(--amber); margin: 10px 0 0 4px; z-index: 1; }
.timeline .law h3 { margin-bottom: 8px; }
.timeline .law p { color: #d6d4cf; font-size: 16.5px; margin: 0; }
.timeline .law .art { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 10px; }
.timeline .pack { background: var(--panel-2); border: 1px solid var(--edge); border-top: 3px solid var(--amber); padding: 16px 18px; font-size: 16px; color: #d6d4cf; align-self: start; }
.timeline .pack b { display: block; font-family: var(--cond); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-bottom: 6px; }

/* Manifest: what is in the pack. */
.manifest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.manifest > div { background: var(--night); padding: 24px 22px; }
.manifest .n { font-family: var(--cond); font-weight: 700; font-size: 48px; line-height: 1; color: var(--amber); margin: 0 0 12px; }
.manifest p { font-size: 16px; color: #d6d4cf; margin: 8px 0 0; }

/* Real pages. */
.pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.pages figure { margin: 0; }
.pages img { box-shadow: 0 0 0 1px var(--edge), 0 26px 50px -30px #000; }
.pages figcaption { font-family: var(--cond); font-weight: 500; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 14px; }
.pages figcaption b { color: var(--amber); margin-right: 8px; }
.pages-note { color: var(--dim); font-size: 15.5px; margin-top: 24px; max-width: 46em; }

/* On call: who is behind it. */
.oncall { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.oncall .card { border: 1px solid var(--edge); background: var(--panel-2); padding: 22px; }
.oncall dl { margin: 0; }
.oncall dt { font-family: var(--cond); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.oncall dd { margin: 2px 0 14px; color: #fff; font-size: 17px; overflow-wrap: anywhere; }
.oncall dd.name { font-family: var(--cond); font-weight: 700; font-size: 28px; }
.oncall p { color: #d6d4cf; font-size: 18px; }

/* Runbook: four steps after you pay. */
.after-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--amber); }
.after-steps li { padding: 22px 22px 6px 0; }
.after-steps li + li { border-left: 1px solid var(--edge); padding-left: 22px; }
.after-steps .when { font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.after-steps h3 { margin: 8px 0 8px; }
.after-steps p { color: #d6d4cf; font-size: 16px; margin: 0; }

/* Price. */
.vat { color: var(--dim); font-size: 15.5px; max-width: 54em; margin: 0 0 26px; }
.vat b { color: #fff; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.plan { background: var(--panel); border: 1px solid var(--edge); padding: 28px; display: flex; flex-direction: column; }
.plan.main { border-top: 4px solid var(--amber); }
.plan .unit { font-family: var(--cond); font-weight: 500; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0; }
.plan .name { font-family: var(--cond); font-weight: 700; font-size: 34px; text-transform: uppercase; color: #fff; margin: 4px 0 0; }
.plan .amt { font-family: var(--cond); font-weight: 700; font-size: 78px; line-height: 1; color: #fff; margin: 14px 0 6px; }
.plan .amt small { font-size: 22px; color: var(--dim); }
.plan ul { list-style: none; padding: 0; margin: 14px 0 24px; }
.plan li { padding: 9px 0 9px 22px; border-top: 1px solid var(--edge); color: #d6d4cf; font-size: 16.5px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; background: var(--amber); }
.plan .acts { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.fine { color: #c8c6c1; font-size: 15.5px; max-width: 54em; margin: 22px 0 0; }
.fine b, .fine a { color: #fff; }

/* Questions: verbatim answers (they match the FAQ JSON-LD in the head). */
.qa { border-top: 1px solid var(--edge); max-width: 900px; }
.qa details { border-bottom: 1px solid var(--edge); }
.qa summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-family: var(--cond);
  font-weight: 700; font-size: 25px; letter-spacing: .01em; color: #fff; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 30px; color: var(--amber); font-weight: 500; }
.qa details[open] summary::after { content: "\2212"; }
.qa .a { padding: 0 0 22px; color: #d6d4cf; font-size: 17px; max-width: 46em; }

/* Closing: the amber band. */
.closing { background: var(--amber); color: var(--night); padding: clamp(48px, 6vw, 84px) 0; }
.closing .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 22px 48px; align-items: center; }
.closing h2 { color: var(--night) !important; }
.closing p { font-size: 19px; margin: 14px 0 0; color: #23201a; }
.closing .btn { background: var(--night); color: var(--amber) !important; }
.closing .btn:hover { background: #000; }

/* Footer. */
.foot { padding: 46px 0 36px; font-size: 15px; color: var(--dim); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 48px; }
.foot .fh { font-family: var(--cond); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li a, .foot p a { display: inline-flex; align-items: center; min-height: 26px; color: var(--text); }
.foot .legal { border-top: 1px solid var(--edge); margin-top: 28px; padding-top: 18px; font-size: 14px; }

.buybar { display: none; }

@media (max-width: 980px) {
  .hero .wrap, .oncall, .closing .wrap { grid-template-columns: minmax(0, 1fr); }
  .manifest, .pages { grid-template-columns: minmax(0, 1fr); }
  .after-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .after-steps li:nth-child(3) { border-left: 0; padding-left: 0; }
  .timeline li { grid-template-columns: 80px 30px minmax(0, 1fr); }
  .timeline::before { left: 95px; }
  .timeline .pack { grid-column: 3; margin-top: 14px; }
  .plans, .foot .cols { grid-template-columns: minmax(0, 1fr); }
  .bar nav { display: none; }
}
@media (max-width: 700px) {
  body.ops { padding-bottom: 74px; }
  .bar .buy { display: none; }
  .buybar { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: #000; border-top: 2px solid var(--amber); }
  .buybar .p { font-family: var(--cond); font-weight: 700; font-size: 32px; line-height: 1; color: #fff; }
  .buybar .p small { font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-left: 6px; }
  .buybar a { background: var(--amber); color: var(--night); font-family: var(--cond); font-weight: 700; font-size: 19px; letter-spacing: .06em;
    text-transform: uppercase; text-decoration: none; min-height: 48px; padding: 0 18px; display: inline-flex; align-items: center; }
  .after-steps { grid-template-columns: minmax(0, 1fr); }
  .after-steps li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--edge); }
  .timeline li { grid-template-columns: 58px 24px minmax(0, 1fr); gap: 0 12px; }
  .timeline::before { left: 77px; }
  .timeline .t { font-size: 28px; }
  .clock { grid-template-columns: 56px minmax(0, 1fr); }
  .clock .left { grid-column: 2; text-align: left; }
  .btn { width: 100%; }
  .status .wrap span:last-child { display: none; }
}
@media print { .bar nav, .buybar, .btn { display: none; } body.ops { background: #fff; color: #000; } }