/* ==========================================================================
   PrecisionOps — precisionopsapp.com
   Design system.

   The look is drawn from the product's own world: an equipment data plate.
   Every condenser in the field carries one — a riveted rectangle with stamped
   label/value rows and registration ticks at the corners. That artifact is
   also this site's whole argument, because the one thing PrecisionOps does
   that its competitors will not is publish its numbers. So the plate holds
   the price, the running costs, and the five-year comparison, and the rest of
   the page stays quiet around it.

   Ground is drafting vellum rather than white. Structure is hairline rules
   rather than shadowed cards. One accent, brass amber, and it only ever
   appears on a registration tick or the featured plate.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces. --paper is a faint green-grey, the colour of drafting vellum;
     it keeps large screenshots from glaring the way pure white does. */
  --paper:        #F1F3F1;
  --surface:      #FFFFFF;
  --surface-sunk: #E7EBE7;

  /* Ink */
  --ink:          #14191A;
  --ink-2:        #3E4A4C;
  --ink-3:        #77858A;
  --ink-invert:   #F1F3F1;

  /* Rules. Nearly every division on this site is a 1px line, so these two
     carry more weight than they look like they should. */
  --rule:         #D2D8D3;
  --rule-strong:  #A9B3AC;

  /* Gauge blue. The low-side manifold gauge, and the only structural colour. */
  --blue:         #0F4C64;
  --blue-deep:    #0A3547;
  --blue-tint:    #E3EEF2;

  /* Brass. The single accent. Registration ticks and the featured plate. */
  --mark:         #E0A21A;
  --mark-deep:    #A8760B;
  --mark-tint:    #FBF1DA;

  /* Type */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* A 1.25 scale, tightened at the top so display sizes stay usable at 360px */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.375rem;
  --t-xl:   1.75rem;
  --t-2xl:  2.25rem;
  --t-3xl:  3rem;
  --t-4xl:  3.75rem;

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --wrap:        1180px;
  --wrap-narrow: 760px;
  --radius:      3px;
  --header-h:    68px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
}

body {
  margin: 0;
  min-width: 360px;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  /* Semi-expanded. Archivo's width axis is the reason this face is here —
     at 112% the headlines read engineered rather than merely bold. */
  font-stretch: 112%;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6vw, var(--t-4xl)); }
h2 { font-size: clamp(1.75rem, 4.2vw, var(--t-3xl)); }
h3 { font-size: clamp(1.25rem, 2.4vw, var(--t-lg)); letter-spacing: -0.01em; }
h4 { font-size: var(--t-md); font-stretch: 105%; letter-spacing: 0; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

strong { color: var(--ink); font-weight: 600; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.25em; }
li { margin-bottom: var(--s-2); }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--mark-tint); color: var(--ink); }

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.wrap-narrow { max-width: var(--wrap-narrow); }

.band { padding-block: var(--s-9); }
.band-tight { padding-block: var(--s-8); }

/* Section divisions are hairlines, never colour changes. */
.band-rule { border-top: 1px solid var(--rule); }

.band-tint { background: var(--surface); border-block: 1px solid var(--rule); }

.band-ink {
  background: var(--ink);
  color: #B9C4C6;
  border-block: 1px solid var(--ink);
}
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: #FFFFFF; }
.band-ink a { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   4. Eyebrow — the stamped label
   -------------------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}

/* The rule that trails an eyebrow reads as the top edge of a form field —
   it belongs to the label, not to the section. */
.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.eyebrow-solo::after { display: none; }
.eyebrow-mark { color: var(--mark-deep); }
.band-ink .eyebrow { color: #8A9698; }
.band-ink .eyebrow::after { background: #2B3335; }

/* --------------------------------------------------------------------------
   5. Section headers
   -------------------------------------------------------------------------- */

.head { max-width: 60ch; margin-bottom: var(--s-7); }
.head-center { margin-inline: auto; text-align: center; }
.head-center .eyebrow { justify-content: center; }
.head-center .eyebrow::after { display: none; }

.head p {
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.6;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.0625rem, 1.6vw, var(--t-lg));
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0.6875rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--blue); border-color: var(--blue); color: #FFFFFF; }
.btn-primary:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #FFFFFF; }

.btn-ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }

.btn-mark { background: var(--mark); border-color: var(--mark); color: var(--ink); }
.btn-mark:hover { background: var(--mark-deep); border-color: var(--mark-deep); color: #FFFFFF; }

.band-ink .btn-ghost { border-color: #3A4446; color: #FFFFFF; }
.band-ink .btn-ghost:hover { background: #1E2527; border-color: #6B7679; color: #FFFFFF; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.btn-note {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(241, 243, 241, 0.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}

.site-header.is-stuck {
  border-bottom-color: var(--rule);
  background: rgba(241, 243, 241, 0.96);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand img { width: 30px; height: 30px; }

.brand-name {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  font-stretch: 108%;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1;
}

/* The parent credit. Small, permanent, and a live link — this product is a
   Protean Hollow product and the header should never let that be a question. */
.brand-parent {
  display: none;
  padding-left: var(--s-4);
  margin-left: var(--s-1);
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  line-height: 1.3;
}
.brand-parent strong { display: block; color: var(--ink-2); font-weight: 500; }
.brand-parent:hover { color: var(--blue); }
.brand-parent:hover strong { color: var(--blue); }

.site-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--s-5);
}

.site-nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.site-nav a.is-current { color: var(--ink); border-bottom-color: var(--mark); }

.nav-actions { display: none; align-items: center; gap: var(--s-3); margin-left: var(--s-2); }

.menu-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--paper);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav a {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-stretch: 108%;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--rule);
}

.mobile-nav .btn { margin-top: var(--s-4); font-size: var(--t-base); }

.mobile-nav-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-5); }

.mobile-nav-parent {
  margin-top: var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   8. The spec plate — signature element
   -------------------------------------------------------------------------- */

.plate {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
}

/* Registration ticks. Two opposite corners rather than four: an engineer's
   drawing marks the datum corners, not every corner. */
.plate::before,
.plate::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid var(--mark);
  pointer-events: none;
}
.plate::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.plate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0.6875rem var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-sunk);
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.plate-head span:last-child { color: var(--ink-3); letter-spacing: 0.06em; }

.plate-rows { padding: var(--s-2) var(--s-5) var(--s-4); }

/* The leader dots between label and value are the data-plate detail that
   makes the block read as a specification rather than a price list. */
.plate-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 0.6875rem;
  border-bottom: 1px dotted var(--rule);
}
.plate-row:last-child { border-bottom: 0; }

.plate-row dt,
.plate-label {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.plate-row dd,
.plate-value {
  margin: 0 0 0 auto;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--t-sm);
}

/* Written against `.plate-row dd` rather than as a bare class: the element
   selector in that rule outranks a lone class and would otherwise cancel the
   display size out. */
.plate-row dd.plate-value-lg,
.plate-value-lg {
  font-family: var(--display);
  font-size: var(--t-xl);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Numbered steps inside a plate. The counter is legitimate here: the buying
   sequence is an actual sequence, each step depending on the one before. */
ol.plate-rows { list-style: none; counter-reset: step; padding-left: var(--s-5); }

ol.plate-rows li {
  position: relative;
  padding-left: var(--s-7);
  padding-block: var(--s-4);
  border-bottom: 1px dotted var(--rule);
  margin: 0;
  color: var(--ink-2);
}
ol.plate-rows li:last-child { border-bottom: 0; }

ol.plate-rows li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.15em;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--mark-deep);
}

.plate-featured { border-color: var(--mark); }
.plate-featured .plate-head { background: var(--mark-tint); color: var(--mark-deep); }

.plate-foot {
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--s-8) var(--s-9); position: relative; overflow: hidden; }

/* A reticle behind the hero, echoing the logo mark. Faint enough to read as
   paper texture rather than as a graphic. */
.hero::before {
  content: '';
  position: absolute;
  top: -140px;
  right: -180px;
  width: 620px;
  height: 620px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: 170px;
  right: -180px;
  width: 620px;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}

.hero .wrap { position: relative; z-index: 1; }

.hero h1 { margin-bottom: var(--s-5); }

.hero-lede { max-width: 46ch; margin-bottom: var(--s-6); }

.hero-grid { display: grid; gap: var(--s-7); }

.hero-plate { max-width: 420px; margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   10. Screenshot frame + platform toggle
   -------------------------------------------------------------------------- */

.shot {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.shot-tabs {
  display: flex;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.shot-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 42px;
  padding: 0 var(--s-4);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.shot-tab svg { width: 14px; height: 14px; }
.shot-tab:hover { color: var(--ink-2); background: rgba(255,255,255,.5); }

.shot-tab[aria-selected="true"] {
  color: var(--ink);
  background: var(--surface);
  border-bottom-color: var(--mark);
}

.shot-views { position: relative; background: var(--surface-sunk); }
.shot-view { display: none; }
.shot-view.is-active { display: block; }

.shot-view img { width: 100%; }

/* Mobile captures are tall and narrow; centring them on the sunk ground beats
   stretching a phone screenshot to a desktop frame's width. */
.shot-view[data-view="mobile"] img {
  max-width: 300px;
  margin-inline: auto;
  padding-block: var(--s-5);
}

.shot-caption {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   11. Spec grid — capabilities as a ruled sheet, not shadowed cards
   -------------------------------------------------------------------------- */

.specgrid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.specgrid-cell { background: var(--surface); padding: var(--s-5); }

.specgrid-cell h3 { margin-bottom: var(--s-2); font-size: var(--t-md); font-stretch: 105%; }
.specgrid-cell p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

.specgrid-cell-key { background: var(--blue-tint); }

/* --------------------------------------------------------------------------
   12. Chips
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }

.chips li {
  margin: 0;
  padding: 0.3125rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   13. Showcase rows
   -------------------------------------------------------------------------- */

.showcase { display: grid; gap: var(--s-6); align-items: center; padding-block: var(--s-8); }
.showcase + .showcase { border-top: 1px solid var(--rule); }

.showcase-body h3 { font-size: clamp(1.5rem, 3vw, var(--t-2xl)); margin-bottom: var(--s-4); }
.showcase-body p { color: var(--ink-2); }

.showcase-list { list-style: none; padding: 0; margin: var(--s-5) 0 0; }

.showcase-list li {
  position: relative;
  padding-left: var(--s-6);
  padding-block: var(--s-2);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}

/* A crosshair tick, not a checkmark. Checkmarks imply a competitor comparison
   table; these are simply the specification's line items. */
.showcase-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.15em;
  width: 9px;
  height: 9px;
  border-left: 1px solid var(--mark-deep);
  border-bottom: 1px solid var(--mark-deep);
}

/* --------------------------------------------------------------------------
   14. Tables
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 540px; }

.data-table th {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}

.data-table td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule); color: var(--ink-2); vertical-align: top; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td:last-child { font-weight: 600; color: var(--ink); white-space: nowrap; }

.data-table .row-ours td { background: var(--blue-tint); }
.data-table .row-ours td:first-child { font-weight: 600; color: var(--ink); }

.tag-required,
.tag-optional {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0.0625rem 0.4375rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.tag-required { background: var(--blue); color: #FFFFFF; }
.tag-optional { background: var(--surface-sunk); color: var(--ink-3); }

.footnote { font-size: var(--t-sm); color: var(--ink-3); max-width: 78ch; margin-top: var(--s-4); }
.footnote strong { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   15. Calculator
   -------------------------------------------------------------------------- */

.calc { display: grid; gap: var(--s-5); padding: var(--s-5); }

.calc-fields { display: grid; gap: var(--s-4); }

.calc label {
  display: grid;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.calc input[type="number"],
.calc select {
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  width: 100%;
}

.calc-checks { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

.calc-checks label {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 36px;
  font-family: var(--body);
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
  cursor: pointer;
}

.calc-checks input { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }

.calc-out {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-strong);
}

.calc-out-total {
  font-family: var(--display);
  font-size: var(--t-2xl);
  font-stretch: 112%;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.calc-out-note { font-size: var(--t-sm); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   16. Portal gallery
   -------------------------------------------------------------------------- */

.portal-tabs { flex-wrap: wrap; }
.portal-shot { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  background: rgba(10, 14, 15, 0.92);
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--radius); }

.lightbox-close {
  position: absolute;
  top: var(--s-4);
  right: var(--s-4);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid #4A5456;
  border-radius: var(--radius);
  color: #FFFFFF;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   17. Prose (legal, support)
   -------------------------------------------------------------------------- */

.prose { max-width: 72ch; }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--s-5); font-size: var(--t-md); }
.prose p, .prose li { color: var(--ink-2); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin-bottom: var(--s-4); }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border: 1px solid var(--rule); text-align: left; }
.prose th { background: var(--surface-sunk); }

.toc {
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-bottom: var(--s-7);
}
/* The legal documents number their own sections, so the list keeps its
   markers; the landing-page variant does not. */
.toc ul, .toc ol { columns: 2; column-gap: var(--s-6); margin: 0; }
.toc ul { list-style: none; padding: 0; }
.toc ol { padding-left: 1.25em; }
.toc li { break-inside: avoid; font-size: var(--t-sm); }

.prose .toc h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: var(--t-md);
  margin-bottom: var(--s-4);
}

@media (max-width: 599.98px) {
  .toc ul, .toc ol { columns: 1; }
}

/* Legal documents. These blocks are lifted verbatim from the source
   agreements, so the class names come from them rather than from this
   stylesheet, and the wording is not ours to restyle away. */
.legal-content h1 { margin-bottom: var(--s-3); }

.last-updated {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-6);
}
.last-updated strong { color: var(--ink-2); font-weight: 500; }

.note-box,
.important-box {
  padding: var(--s-5);
  border-radius: var(--radius);
  margin-bottom: var(--s-6);
}
.note-box { background: var(--surface); border: 1px solid var(--rule); }
.important-box { background: var(--mark-tint); border: 1px solid var(--mark); }
.note-box p:last-child, .important-box p:last-child { margin-bottom: 0; }

.legal-table-wrap { overflow-x: auto; margin-bottom: var(--s-5); -webkit-overflow-scrolling: touch; }
.legal-table-wrap table { min-width: 520px; }

.legal-closing {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-strong);
  font-size: var(--t-sm);
  color: var(--ink-3);
}

/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--display);
  font-size: var(--t-md);
  font-stretch: 105%;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 400;
  color: var(--ink-3);
  line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq details[open] summary { color: var(--blue); }

.faq-body { padding-bottom: var(--s-5); max-width: 68ch; }
.faq-body p { font-size: var(--t-sm); }

/* --------------------------------------------------------------------------
   18. Notice
   -------------------------------------------------------------------------- */

.notice {
  padding: var(--s-5);
  background: var(--mark-tint);
  border: 1px solid var(--mark);
  border-radius: var(--radius);
}
.notice h3 { font-size: var(--t-md); margin-bottom: var(--s-2); color: var(--mark-deep); }
.notice p { font-size: var(--t-sm); margin: 0; color: var(--ink-2); }

.notice-plain { background: var(--surface); border-color: var(--rule); }
.notice-plain h3 { color: var(--ink); }

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-4); }
.form-row { display: grid; gap: var(--s-4); }

.field { display: grid; gap: var(--s-2); }

.field > span {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field input,
.field select,
.field textarea {
  min-height: 46px;
  padding: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: var(--t-base);
  color: var(--ink);
  width: 100%;
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); }

/* --------------------------------------------------------------------------
   20. Parent lockup — Protean Hollow
   -------------------------------------------------------------------------- */

.parent-band { display: grid; gap: var(--s-6); align-items: center; }

.parent-links { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-5) 0 0; }

.parent-links a {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
  background: var(--surface);
}
.parent-links a:hover { border-color: var(--ink); color: var(--ink); }

.band-ink .parent-links a { background: transparent; border-color: #3A4446; color: #B9C4C6; }
.band-ink .parent-links a:hover { border-color: #8A9698; color: #FFFFFF; }

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: #8A9698; padding-block: var(--s-8) var(--s-6); font-size: var(--t-sm); }

.footer-grid { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); border-bottom: 1px solid #262E30; }

.footer-col h4 {
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B7679;
  margin-bottom: var(--s-4);
}

.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: var(--s-2); }
.footer-col a { color: #B9C4C6; text-decoration: none; }
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }

.footer-brand { display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--s-4); }
.footer-brand img { width: 30px; height: 30px; }
.footer-brand span { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; font-stretch: 108%; color: #FFFFFF; }

.footer-parent { max-width: 34ch; }
.footer-parent strong { color: #FFFFFF; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  padding-top: var(--s-5);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: #6B7679;
}

/* --------------------------------------------------------------------------
   22. Page header (interior pages)
   -------------------------------------------------------------------------- */

.page-head { padding-block: var(--s-8) var(--s-7); border-bottom: 1px solid var(--rule); }
.page-head h1 { margin-bottom: var(--s-4); }
.page-head .lede { max-width: 60ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }

/* --------------------------------------------------------------------------
   23. Motion
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   24. Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .specgrid { grid-template-columns: repeat(2, 1fr); }
  .calc-fields { grid-template-columns: repeat(2, 1fr); }
  .calc-checks { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .site-nav { display: flex; }
  .nav-actions { display: flex; }
  .menu-btn { display: none; }
  .brand-parent { display: block; }

  /* Top-aligned, not centred: the left column runs long, and centring the
     screenshot against it leaves a hole under the header. */
  .hero-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: var(--s-8); align-items: start; }
  .hero-grid > figure { margin-top: 3.25rem; }

  .showcase { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .showcase-flip .showcase-body { order: 2; }

  .specgrid { grid-template-columns: repeat(4, 1fr); }
  .parent-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .buy-grid { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   25. Generic grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: var(--s-5); }
.buy-grid { display: grid; gap: var(--s-5); align-items: start; }
.cols-3 { display: grid; gap: var(--s-5); }

/* Bounded, not open-ended. An unbounded min-width:640 rule sits after the
   900px block in source order and, at equal specificity, would win at desktop
   sizes and quietly hold .cols-3 at two columns. */
@media (min-width: 640px) and (max-width: 899.98px) {
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
}

/* Buy cards reuse the plate so the pricing reads in the same register as the
   spec tables it sits beside. */
.buy-card { display: flex; flex-direction: column; height: 100%; }
.buy-card .plate-rows { display: flex; flex-direction: column; flex: 1; }
.buy-card .buy-price { font-family: var(--display); font-size: var(--t-3xl); font-stretch: 112%; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); margin-top: var(--s-3); }
.buy-card .buy-price small { display: block; margin-top: var(--s-2); font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.buy-card .buy-lede { margin-block: var(--s-4); font-size: var(--t-sm); color: var(--ink-2); }
.buy-card ul { list-style: none; padding: 0; margin: 0 0 var(--s-5); }
.buy-card ul li { position: relative; padding-left: var(--s-5); padding-block: var(--s-2); border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.buy-card ul li::before { content: ''; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; border-left: 1px solid var(--mark-deep); border-bottom: 1px solid var(--mark-deep); }
.buy-card .btn { margin-top: auto; width: 100%; }

/* --------------------------------------------------------------------------
   26. Utilities
   -------------------------------------------------------------------------- */

.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.center { text-align: center; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--blue);
  color: #FFFFFF;
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { top: var(--s-4); color: #FFFFFF; }