@charset "utf-8";
/* ==========================================================================
   CybrIQ design system.

   One palette, one type scale, one spacing scale, five breakpoints.
   Structure is carried by rules, never by cards: a container takes a navy
   top border, cells are divided by hairlines, and the first cell drops both
   its left border and its left padding so the grid aligns to the text column.
   No shadows and no gradients, with one deliberate exception documented at
   .rung-n.

   Every color pair in here is checked by scripts/check-contrast.py against
   WCAG 2.2 AA. Do not add a pair without running it.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Type scale. Eleven steps, whole pixels, no exceptions. */
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px;
  --t-16: 16px; --t-17: 17px; --t-19: 19px; --t-23: 23px; --t-31: 31px;
  --t-46: 46px;

  /* Spacing scale. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 44px; --s-8: 62px; --s-9: 96px;

  /* Measure. */
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --measure: 62ch;

  /* Brand. */
  --navy:       #0f1c30;
  --navy-deep:  #0a1a34;
  --navy-soft:  #24395c;

  /* Family accent. Product pages override --accent only. */
  /* The accent is the orange from the logo's tagline, which is the one colour
     the mark actually carries besides the charcoal and the owl's blue. The
     teal that used to sit here appears nowhere in the logo.
     Two values because one orange cannot do both jobs: #e36419 is the brand
     orange and clears 3:1, which is all a rule or a mark owes, and text needs
     4.5:1 against the paper band as well as the page, which no orange that
     still reads as this orange can manage. */
  --accent:      #e36419;
  --accent-deep: #a8420c;
  --accent-tint: #fef0e6;

  /* Product accents. Hue is taken from each product's own shipped mark, so the
     page accent and the logo are the same color. Lightness and chroma are
     solved in OKLCH so all eight carry equal weight. The olive band is left
     empty on purpose: it is the least-liked region there is (Palmer & Schloss,
     PNAS 2010). Regenerate with scripts/solve-palette.py; do not hand-edit. */
  --crosstrust:     #e1660a;  --crosstrust-deep: #8c3b00;
  --roomiq:         #238707;  --roomiq-deep:    #176900;
  --crossconnect:   #03855c;  --crossconnect-deep: #006746;
  --crossvenue:     #008083;  --crossvenue-deep: #026365;
  --crossscan:      #067e93;  --crossscan-deep: #006273;
  --spacesiq:       #1e6cd3;  --spacesiq-deep:  #0052b0;
  --crosscheck:     #7e52c7;  --crosscheck-deep: #6439a5;
  --crossroom:      #9946b1;  --crossroom-deep: #7b2e90;

  /* Status. */
  --good: #1f7a4d;  --warn: #8a6410;  --bad: #a32a20;
  /* Text drawn on top of the accent. In dark mode the accent becomes a light
     cyan, and white text on it measured 1.5:1, which fails WCAG badly on every
     primary button including the main call to action. This flips with the
     theme so the button text is always readable on its own background. */
  --on-accent: #ffffff;

  /* Neutrals, cool. */
  --bg:        #fbfcfe;
  --bg-soft:   #f4f6fa;
  --bg-paper:  #eaeef6;
  --ink:       #131c2e;
  --ink-soft:  #414c63;
  --ink-faint: #5b6579;
  --line:      #d9e0ec;
  --line-soft: #e8edf5;
  --on-dark:        #ffffff;
  --on-dark-soft:   rgba(255,255,255,.80);
  --on-dark-faint:  rgba(255,255,255,.62);
  --on-dark-line:   rgba(255,255,255,.18);
  --accent-on-dark: #ff9a5c;

  /* The primary button has its own two tokens because it cannot borrow one.
     --navy is the heading colour, and in the dark theme headings become nearly
     white, so a button painted with it turned white with a white label.
     These two are the old site's own button colours, which are the logo's
     orange taken dark enough to carry a white label: 4.66:1 at rest and 6.09:1
     on hover. The brighter brand orange cannot do it at 3.44:1. */
  --btn-bg:       #c25210;
  --btn-bg-hover: #a8420c;
  --act-bg:         #0a1a34;   /* the one dark band */

  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --ease: 160ms cubic-bezier(.2,.6,.3,1);
  --header-h: 68px;
}

/* Dark mode. Tokens only, so every component follows without edits. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crosstrust:     #fd9b68;  --crosstrust-deep: #fec2a3;
    --roomiq:         #86cd79;  --roomiq-deep:    #a3e697;
    --crossconnect:   #55d29e;  --crossconnect-deep: #7cebb9;
    --crossvenue:     #00d1d5;  --crossvenue-deep: #54eaed;
    --crossscan:      #17cced;  --crossscan-deep: #70e4fe;
    --spacesiq:       #8ab9fe;  --spacesiq-deep:  #b5d3ff;
    --crosscheck:     #c1a5fe;  --crosscheck-deep: #d6c7ff;
    --crossroom:      #db9bef;  --crossroom-deep: #efbbff;
    --accent-tint: #3a2114;
    --btn-bg: #ff9a5c; --btn-bg-hover: #ffb184;
  --scan:           #01d1d2;  --scan-deep:      #54eaea;
  --spacesiq:       #8ab9fe;  --spacesiq-deep:  #b5d3ff;
  --connect:        #99b5ff;  --connect-deep:   #bed0fe;
  --trust:          #c4a3ff;  --trust-deep:     #d9c6ff;
  --room:           #ff939d;  --room-deep:      #febec1;
  --roomiq:         #86cd79;  --roomiq-deep:    #a3e697;
  --venue:          #e9aa47;  --venue-deep:     #ffc674;
  --check:          #72cf88;  --check-deep:     #93e8a5;
    --good: #57c78e; --warn: #d6a93f; --bad: #ef6b60;
    --on-accent: #06121c;
  }
}
[data-theme="dark"] {
  --bg: #0d1420; --bg-soft: #131c2b; --bg-paper: #182234;
  --ink: #e8edf6; --ink-soft: #b3bed1; --ink-faint: #94a1b8;
  --line: #2a3852; --line-soft: #1e293c;
  --navy: #e8edf6; --navy-deep: #060c15;
  --accent: #ff9a5c; --accent-deep: #ffb184; --accent-tint: #3a2114;
  /* On a dark page the navy button would disappear into the page, so the
     button becomes the orange and takes the dark label. */
  --btn-bg: #ff9a5c; --btn-bg-hover: #ffb184;
  --act-bg: #1d2a40;
--scan:           #01d1d2;  --scan-deep:      #54eaea;
  --crosstrust:     #fd9b68;  --crosstrust-deep: #fec2a3;
  --roomiq:         #86cd79;  --roomiq-deep:    #a3e697;
  --crossconnect:   #55d29e;  --crossconnect-deep: #7cebb9;
  --crossvenue:     #00d1d5;  --crossvenue-deep: #54eaed;
  --crossscan:      #17cced;  --crossscan-deep: #70e4fe;
  --spacesiq:       #8ab9fe;  --spacesiq-deep:  #b5d3ff;
  --crosscheck:     #c1a5fe;  --crosscheck-deep: #d6c7ff;
  --crossroom:      #db9bef;  --crossroom-deep: #efbbff;
  --good: #57c78e; --warn: #d6a93f; --bad: #ef6b60;
  --on-accent: #06121c;
}

/* A box that scrolls its own overflow rather than making the page scroll.
   Wrap any wide table in one. It lived only in the dashboard stylesheet, so a
   wrapped table on a public page still pushed the whole page sideways. */
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroller > table { min-width: max-content; }
/* max-content is right for a table of values, where a wrapped port number or
   a broken product name is worse than a scrollbar. It is wrong for a table of
   sentences: the comparison table came out 2139px wide inside a 1132px holder,
   so a third of it was off-screen at any window size, and the hidden third was
   the column the page exists to show. Nothing caught it, because the holder
   scrolls and so the page itself never overflowed. A table that holds prose
   wraps and fits. */
/* Automatic layout, not fixed: these tables have one short column and one
   that holds a paragraph, and dividing the width equally between them serves
   neither. The browser distributes by content, which is what it is good at. */
.scroller > table.wraps { min-width: 0; width: 100%; }
.wraps tbody th { white-space: normal; }
/* The compatibility tables carry a product name in the first column and a
   paragraph in the last, so the name is held to a sensible share and the rest
   is left alone. */
.wraps tbody th:first-child { min-width: 8.5rem; }
@media (max-width: 760px) {
  /* Four columns of sentences on a phone is one word per line. Below this the
     holder scrolls again, which is what it is for. */
  .scroller > table.wraps { min-width: 640px; }
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-synthesis-weight: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--t-16)/1.62 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -0.011em; font-weight: 700; color: var(--navy); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--accent-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
table { border-collapse: collapse; width: 100%; }

/* WCAG 2.2: 2.4.11 Focus Not Obscured. The header is sticky. */
:target, a, button, input, select, textarea, summary, [tabindex], section[id] {
  scroll-margin-top: calc(var(--header-h) + var(--s-5));
}
/* WCAG 2.2: 2.4.13 Focus Appearance. 2px perimeter, plus a ring for 3:1. */
:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-tint); border-radius: var(--r-sm);
}
[data-theme="dark"] :focus-visible, :root:not([data-theme="light"]) :focus-visible {
  outline-color: var(--accent);
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--navy-deep); color: #fff; padding: var(--s-3) var(--s-4);
  font-weight: 600; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; }
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Layout ------------------------------------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); }
.wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--s-5); }
main > section { padding: var(--s-7) 0; }
main > section.tight { padding: var(--s-6) 0; }
main > section.act { padding: var(--s-8) 0; }
.band-soft  { background: var(--bg-soft);  border-block: 1px solid var(--line-soft); }
.band-paper { background: var(--bg-paper); border-block: 1px solid var(--line); }
.act { background: var(--act-bg); color: var(--on-dark-soft); border-block: 1px solid var(--line); }
.act h1, .act h2, .act h3, .act b { color: var(--on-dark); }
.act p { color: var(--on-dark-soft); }
.measure { max-inline-size: var(--measure); }
.stack > * + * { margin-top: var(--s-4); }
.twocol { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-7); align-items: start; }

/* --- Type --------------------------------------------------------------- */
.d1 { font-size: clamp(31px, 1.6rem + 2vw, 46px); line-height: 1.06; letter-spacing: -0.017em; max-inline-size: 19ch; text-wrap: balance; }
.d2 { font-size: var(--t-31); line-height: 1.12; letter-spacing: -0.015em; font-weight: 800; max-inline-size: 26ch; text-wrap: balance; }
.d3 { font-size: var(--t-23); line-height: 1.2;  letter-spacing: -0.01em;  font-weight: 800; max-inline-size: 30ch; text-wrap: balance; }
.lede { font-size: var(--t-19); line-height: 1.55; color: var(--ink-soft); }
.say  { font-size: var(--t-17); line-height: 1.62; color: var(--ink-soft); max-inline-size: 58ch; }
.say + .say { margin-top: var(--s-3); }
.small { font-size: var(--t-14); line-height: 1.55; color: var(--ink-faint); }
.fig { font-variant-numeric: tabular-nums lining-nums; }

.brow {
  display: block; font-family: var(--mono); font-size: var(--t-11); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: var(--s-3);
}
.brow .hot { color: var(--accent-deep); }
.brow .hot::after { content: "\2022"; color: var(--ink-faint); margin: 0 9px; }
.act .brow { color: var(--on-dark-faint); }
.act .brow .hot { color: var(--accent-on-dark); }
.act .brow .hot::after { color: var(--on-dark-faint); }

.hand {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line);
  font: italic var(--t-16)/1.6 var(--serif); color: var(--ink-faint); max-inline-size: 56ch;
}
.hand b { font-style: normal; font-family: var(--sans); color: var(--ink-soft); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center;
  min-height: 44px; padding: var(--s-3) var(--s-5); border-radius: var(--r-sm);
  font: 600 var(--t-15)/1 var(--sans); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
/* Navy, not the accent. A page carries one or two of these and they are the
   loudest thing on it; in orange they would shout, and the orange is worth
   more kept for the eyebrows and the rules where it marks the structure. This
   is also how the old site did it. */
.btn-primary { background: var(--btn-bg); color: var(--on-accent); }
.btn-primary:hover { background: var(--btn-bg-hover); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); }
.act .btn-secondary { color: var(--on-dark); border-color: var(--on-dark-line); }
.act .btn-secondary:hover { border-color: var(--on-dark); }
.btn-lg { min-height: 50px; padding: var(--s-4) var(--s-6); font-size: var(--t-16); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.more {
  display: inline-block; min-height: 24px; padding: 2px 0; margin-top: var(--s-5);
  font: 600 var(--t-15)/1.5 var(--sans); color: var(--accent-deep); text-decoration: none;
}
.more::after { content: " \2192"; display: inline-block; transition: transform var(--ease); }
.more:hover { text-decoration: underline; }
@media (hover:hover) and (prefers-reduced-motion: no-preference) {
  .more:hover::after { transform: translateX(3px); }
}

/* --- Rules as gutters. The signature. ----------------------------------- */
.grid {
  display: grid; border-top: 1px solid var(--navy); margin-top: var(--s-6);
}
.grid > * {
  padding: var(--s-5) var(--s-5) var(--s-4);
  border-left: 1px solid var(--line);
}
.grid > *:first-child { border-left: 0; padding-left: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid .k {
  display: block; font-family: var(--mono); font-size: var(--t-11); letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--s-2);
}
.grid b, .grid h3 { display: block; font-size: var(--t-17); color: var(--navy); font-weight: 700; margin-bottom: var(--s-2); line-height: 1.28; }
.grid p { font-size: var(--t-14); line-height: 1.55; color: var(--ink-soft); }
.grid .pn { display: block; font-family: var(--mono); font-size: var(--t-11); color: var(--accent-deep); letter-spacing: .08em; margin-bottom: var(--s-2); }
.act .grid { border-top-color: var(--on-dark-line); }
.act .grid > * { border-left-color: var(--on-dark-line); }
.act .grid b { color: var(--on-dark); }
.act .grid p { color: var(--on-dark-soft); }

/* Numbered vertical rail. Used for sequences and ladders. */
.rail { list-style: none; border-top: 1px solid var(--navy); margin-top: var(--s-6); }
.rail > li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--line);
}
.rail > li:last-child { border-bottom: 0; }
.rail .n {
  font-family: var(--mono); font-size: var(--t-12); color: var(--accent-deep);
  letter-spacing: .08em; padding-top: 4px; font-variant-numeric: tabular-nums;
}
.rail b { display: block; font-size: var(--t-17); color: var(--navy); margin-bottom: var(--s-1); }
.rail p { font-size: var(--t-15); line-height: 1.6; color: var(--ink-soft); max-inline-size: 66ch; }

/* --- Figures. Real screens, captioned and credited. --------------------- */
figure.shot { margin: var(--s-6) 0 0; }
.shotwrap { position: relative; display: block; }
figure.shot img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
figure.shot.inset { max-width: 760px; margin-inline: auto; }
figure.shot figcaption {
  margin-top: var(--s-3); font-size: var(--t-13); line-height: 1.55; color: var(--ink-faint);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-5); align-items: start;
}
figure.shot figcaption b { color: var(--ink-soft); font-weight: 600; }
figure.shot figcaption .credit {
  font-family: var(--mono); font-size: var(--t-11); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); text-align: right; white-space: nowrap;
}
.pin {
  position: absolute; z-index: 2; transform: translate(-50%,-50%); pointer-events: none;
  width: 26px; height: 26px; border-radius: 50%; background: var(--navy-deep); color: #fff;
  font: 700 var(--t-13)/26px var(--mono); text-align: center;
  box-shadow: 0 0 0 3px rgba(255,255,255,.92);
}
.pinkey { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-3); list-style: none; }
.pinkey li { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-13); color: var(--ink-soft); font-weight: 600; }
.pinkey i {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-deep);
  color: #fff; font: 700 var(--t-11)/20px var(--mono); text-align: center; font-style: normal;
}

/* --- Figures as objects: big numbers ------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s-6); margin-top: var(--s-6); }
.stat { border-top: 1px solid var(--navy); padding-top: var(--s-4); }
.stat .n {
  display: block; font-family: var(--mono); font-size: var(--t-46); line-height: 1; font-weight: 600;
  color: var(--accent-deep); letter-spacing: -0.02em; margin-bottom: var(--s-3);
  font-variant-numeric: tabular-nums;
}
.stat .n.word { font-size: var(--t-23); }
.stat p { font-size: var(--t-14); line-height: 1.55; color: var(--ink-soft); max-inline-size: 30ch; }
.stat .src {
  display: block; margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-11);
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
}

/* --- The ladder. Limits become a work plan. ---------------------------- */
.ladder { list-style: none; border-top: 1px solid var(--navy); margin-top: var(--s-6); max-width: 82ch; }
.ladder > li { display: flex; gap: var(--s-5); padding: var(--s-5) 0; border-bottom: 1px solid var(--line); }
.ladder > li:last-child { border-bottom: 0; }
/* The one exception to the flat rule, and it is deliberate: this component
   carries the company's most important argument, so its numeral has weight.
   Documented in docs/v3-design-system-rollout.md section 10.3. Do not
   generalise it to any other component. */
.ladder .n {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-deep); color: var(--on-accent);
  font: 750 var(--t-16)/1 var(--sans); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.ladder b { display: block; font-size: var(--t-16); color: var(--navy); margin-bottom: var(--s-1); }
.ladder p { font-size: var(--t-15); line-height: 1.6; color: var(--ink-soft); }

/* --- Pull statement ----------------------------------------------------- */
.pull {
  font-size: var(--t-16); line-height: 1.6; color: var(--ink-faint);
  border-left: 2px solid var(--accent); padding-left: var(--s-5); margin: 0;
}
.pull b { color: var(--navy); font-weight: 700; }

/* --- Recognition list: sentences a reader has said out loud ------------- */
.pick { list-style: none; border-top: 1px solid var(--navy); margin-top: var(--s-6); }
.pick li { border-bottom: 1px solid var(--line); }
.pick a {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-6); align-items: center;
  padding: var(--s-4) var(--s-3) var(--s-4) 0; text-decoration: none;
  transition: background-color var(--ease);
}
.pick q { font: italic var(--t-17)/1.5 var(--serif); color: var(--ink-soft); quotes: "\201C" "\201D"; }
.pick q b { color: var(--ink); font-weight: 700; font-style: normal; font-family: var(--sans); }
/* Each answer wears its own product's colour. The fallback keeps any other
   list that uses .pick working as it did. */
.pick .ans { font: 700 var(--t-15)/1 var(--sans); color: var(--pick-accent, var(--accent-deep)); white-space: nowrap; }
.pick .ans::after { content: " \2192"; }
@media (hover:hover) { .pick a:hover { background: var(--bg-soft); } .pick a:hover .ans { text-decoration: underline; } }

/* --- Tables ------------------------------------------------------------- */
.spec-table caption { text-align: left; font-family: var(--mono); font-size: var(--t-11); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding-bottom: var(--s-3); }
.spec-table thead th { font: 600 var(--t-11)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--navy); }
.spec-table tbody th { text-align: left; font-size: var(--t-16); font-weight: 700; padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); border-bottom: 1px solid var(--line); border-left: 2px solid var(--accent); white-space: nowrap; vertical-align: top; }
.spec-table tbody th a { color: var(--navy); text-decoration: none; }
.spec-table tbody th a:hover { color: var(--accent-deep); text-decoration: underline; }
.spec-table tbody td { font-size: var(--t-16); line-height: 1.55; color: var(--ink-soft); padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec-table td.cad { font-family: var(--mono); font-size: var(--t-12); letter-spacing: .05em; color: var(--ink-faint); white-space: nowrap; }
@media (hover:hover) { .spec-table tbody tr:hover { background: var(--bg-soft); } }

/* --- Responsive. Five breakpoints, and no more. ------------------------- */
@media (max-width: 1050px) {
  .grid-4 { grid-template-columns: repeat(2,1fr); }
  .grid-4 > *:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .grid-4 > *:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px) {
  .twocol { grid-template-columns: 1fr; gap: var(--s-6); }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-3 > * { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .grid-3 > *:first-child { border-top: 0; }
}
@media (max-width: 720px) {
  :root { --t-31: 27px; --t-46: 38px; --t-23: 21px; }
  .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 > *, .grid-4 > * { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); }
  .grid-2 > *:first-child, .grid-4 > *:first-child { border-top: 0; }
  .stats { grid-template-columns: 1fr; }
  figure.shot figcaption { grid-template-columns: 1fr; gap: var(--s-2); }
  figure.shot figcaption .credit { text-align: left; }
  .pick a { grid-template-columns: 1fr; gap: var(--s-2); }
}
@media (max-width: 560px) {
  .wrap, .wrap-narrow { padding: 0 var(--s-4); }
  .ladder > li { gap: var(--s-4); }
  .pin { width: 22px; height: 22px; font-size: var(--t-11); line-height: 22px; }
}
/* Somebody who has asked their operating system to stop moving things has
   asked every page, not the four stylesheets that happened to remember. There
   were nineteen transitions and animations across the site and reduced-motion
   blocks covering some of them. This covers all of them, including the ones
   nobody has written yet. Motion is reduced to a single frame rather than
   removed, because a transition with no duration still fires its events and
   anything waiting on transitionend keeps working. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .site-header, .site-footer, .skip-link, .searchbar { display: none; }
  body { background: #fff; color: #000; }
  /* On paper a link is a piece of underlined text going nowhere, so the address
     goes next to it. Internal links get the site in front of the path, because
     a bare /pricing on a printout is not something anybody can type. */
  .doc-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  .doc-body a[href^="/"]::after    { content: " (cybriq.io" attr(href) ")"; font-size: 0.85em; }
  .doc-nav, .doc-toc, .doc-pager, .assist, .cta-band { display: none; }
  /* Nothing that carries one idea should be split across two sheets. */
  .card, figure, table, blockquote, .kpi { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 18mm; }
}

/* Line icons inherit the current color. Kept here rather than in a page
   sheet, because a component that only styles correctly on one page is a trap. */
.ico { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mark { display: block; }