/* ACTUALIS — instrument panel.
   Palette, typography and motifs from branding/branding.png:
   carbon ground, hairline datum rules, measurement ticks, amber for signal
   only. Amber is #E08A24, from the brand guide. The macOS icon sheet once
   printed #C47A3A; that contradiction is resolved in favour of the guide and
   the tray now matches. */

:root {
  --carbon:  #0B0C0E;
  --slate:   #1F2430;
  --smoke:   #3A414E;
  --bone:    #F2EFE9;
  --amber:   #E08A24;

  --ground:  var(--carbon);
  --panel:   #12151B;
  --raised:  var(--slate);
  --rule:    #232935;
  --ink:     var(--bone);
  --ink-dim: #9AA1AC;
  --ink-mut: #6C7480;
  /* Emphasised body: one step brighter than --ink-dim without going to full
     bone. Used where two prose columns must rank against each other. */
  --ink-hi:  #C9CFD8;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 1140px;
}

/* The brand is a dark instrument. It commits to that on any host theme, so
   the palette is painted explicitly rather than inherited. */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- type */
h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.0625rem; line-height: 1.3; }
p  { margin: 0; }
a  { color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mut);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.eyebrow::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}
.lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--ink-dim); max-width: var(--measure); }
.mono { font-family: var(--mono); }
.dim  { color: var(--ink-dim); }
.mut  { color: var(--ink-mut); }
.amber { color: var(--amber); }

/* ------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.stack { display: flex; flex-direction: column; }
.gap-1 { gap: .5rem } .gap-2 { gap: 1rem } .gap-3 { gap: 1.5rem }
.gap-4 { gap: 2rem }  .gap-6 { gap: 3rem }

/* ------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--carbon) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.site-nav a {
  font-size: .875rem; color: var(--ink-dim); text-decoration: none;
  padding-block: .25rem; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--amber); }
/* The one nav item that leaves the site, so it gets the mark and no underline
   on hover -- it is a destination, not another section anchor. */
.site-nav a.gh { display: inline-flex; align-items: center; gap: .4rem; }
.site-nav a.gh:hover { border-bottom-color: transparent; color: var(--amber); }
.site-nav a.gh svg { flex: none; }
@media (max-width: 720px) { .site-nav .hide-sm { display: none; } }

/* ----------------------------------------------------------- wordmark */
.wordmark {
  display: inline-flex; align-items: baseline; gap: 0;
  font-family: var(--sans); font-weight: 400; line-height: 1;
  letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
/* The amber crossbar sits INSIDE the A's counter, per the logo lockups.
   line-height:1 is load-bearing: on the default line height the span's box is
   1.6em tall and `bottom` measures from below the descender, which puts the
   bar under the letter as an underline rather than inside it. With
   line-height:1 the baseline sits ~0.136em above the box bottom for Inter, so
   0.30em places the bar low in the counter where the sheet has it. */
.wordmark .A { position: relative; display: inline-block; line-height: 1; }
.wordmark .A::after {
  /* left is 37.5%, not 50%: letter-spacing sits inside the span's box, so
     the glyph's optical centre is left of the box centre. A's advance in
     Inter is ~0.66em against a 0.88em box with .22em tracking. */
  content: ""; position: absolute; left: 37.5%; transform: translateX(-50%);
  bottom: .30em; width: .32em; height: .07em;   /* centre at ~27% of cap */
  background: var(--amber);
}
.wordmark-sm { font-size: .9375rem; }
.wordmark-lg { font-size: clamp(1.75rem, 5vw, 2.75rem); letter-spacing: .26em; }

.logo-lockup { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.logo-lockup .mark { width: 26px; height: 26px; color: var(--ink); flex: none; }

/* -------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
/* Measurement marks — a datum scale running behind the hero, per the
   visual language block on the brand sheet. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 96px);
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.hero .wrap { position: relative; padding-block: clamp(4rem, 11vw, 7.5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); } }

.tagline {
  font-family: var(--mono); color: var(--amber);
  font-size: clamp(1rem, 2.1vw, 1.25rem); letter-spacing: .01em;
}
.tagline-rule { width: 34px; height: 2px; background: var(--amber); margin-top: .6rem; }

.claims { display: flex; flex-wrap: wrap; gap: .5rem; }
.claim {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .06em;
  color: var(--ink-dim);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: .3rem .6rem; background: var(--panel);
}
.claim b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------ buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .8125rem; letter-spacing: .04em;
  padding: .68rem 1.1rem; border-radius: 2px; text-decoration: none;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink);
  transition: border-color .15s, background .15s, color .15s;
}
.btn:hover { border-color: var(--smoke); background: var(--raised); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #17120A; font-weight: 500; }
.btn-primary:hover { background: #EE9832; border-color: #EE9832; color: #17120A; }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 3px;
}

/* -------------------------------------------------------------- code */
.term {
  border: 1px solid var(--rule); border-radius: 3px; background: #08090B;
  font-family: var(--mono); font-size: .8125rem; overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-bottom: 1px solid var(--rule);
  color: var(--ink-mut); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
}
.term-bar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--smoke); }
.term-body { padding: .9rem 1rem; overflow-x: auto; }
.term-body pre { margin: 0; }
.term .p  { color: var(--amber); }
.term .c  { color: var(--ink-mut); }
.term .v  { color: var(--ink); }

code.inline {
  font-family: var(--mono); font-size: .875em;
  background: var(--panel); border: 1px solid var(--rule);
  padding: .1em .38em; border-radius: 2px; color: var(--ink);
}

/* ------------------------------------------------------------ panels */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.cell { background: var(--panel); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.cell h3 { color: var(--ink); }
.cell p { color: var(--ink-dim); font-size: .9375rem; }

/* metric read-out, per the Run Summary motif */
.readout { display: flex; flex-direction: column; gap: .15rem; }
.readout .k { font-family: var(--mono); font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mut); }
.readout .v { font-family: var(--mono); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.readout .u { font-family: var(--mono); font-size: .75rem; color: var(--ink-mut); }
.readout.alert .v { color: var(--amber); }

/* tick scale */
.ticks { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.ticks i { display: block; width: 2px; background: var(--smoke); }
.ticks i.on { background: var(--amber); }

/* ------------------------------------------------------------- lists */
.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
/* The marker is positioned, not a flex item. As a flex child it made every
   inline element in the item — <strong>, <a> — a sibling column, so a list
   item with a bold lead-in wrapped into two ragged columns instead of one
   flowing paragraph. */
.checks li { position: relative; padding-left: 1.45rem; color: var(--ink-dim); font-size: .9375rem; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 10px; height: 1px; background: var(--amber);
}

/* --------------------------------------------------------- disclosure */
details.limit { border-top: 1px solid var(--rule); }
details.limit:last-of-type { border-bottom: 1px solid var(--rule); }
details.limit summary {
  cursor: pointer; list-style: none; padding: 1rem 0;
  display: flex; align-items: center; gap: .85rem; font-size: .9375rem;
}
details.limit summary::-webkit-details-marker { display: none; }
details.limit summary::before {
  content: "+"; font-family: var(--mono); color: var(--amber); font-size: .9rem; flex: none; width: 1ch;
}
details.limit[open] summary::before { content: "\2212"; }
details.limit .body { padding: 0 0 1.15rem 1.85rem; color: var(--ink-dim); font-size: .9375rem; max-width: var(--measure); }

/* ------------------------------------------------------------ contact */
.form-shell {
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel);
  padding: clamp(1.25rem, 3vw, 2rem);

  /* The CirqleSync form lives in a shadow root, so host CSS cannot reach it.
     It does expose custom properties, which DO cross the boundary by
     inheritance, and that is the whole supported theming surface. Without
     these the widget renders in its own light default -- a white card on a
     carbon page. Input text is `color: inherit` in the widget, so setting
     --cirqle-text carries into the fields and a dark input stays readable. */
  --cirqle-font: var(--sans);
  --cirqle-text: var(--bone);
  --cirqle-label: var(--ink-dim);
  --cirqle-input-bg: #0B0C0E;
  --cirqle-border: var(--smoke);
  --cirqle-brand: var(--amber);
  --cirqle-submit-text: #17120A;
  --cirqle-radius: 2px;
  --cirqle-max-width: 100%;
  --cirqle-success: #6FBF9A;   /* the widget defaults are tuned for light */
  --cirqle-error: #F0705F;
}

/* ------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--rule); padding-block: 2.5rem 3rem; }
.foot-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: flex-start; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.foot-links a { font-size: .8125rem; color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legalese { font-size: .75rem; color: var(--ink-mut); max-width: 46ch; }

/* ------------------------------------------------------------- prose */
.prose { max-width: var(--measure); display: flex; flex-direction: column; gap: 1.1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose h3 { margin-top: 1rem; color: var(--ink); }
.prose p, .prose li { color: var(--ink-dim); font-size: .9375rem; }
.prose ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .5rem; }
.prose a { color: var(--amber); text-underline-offset: 3px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.prose th, .prose td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mut); font-weight: 400; }
.table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 3px; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; position: fixed; z-index: 99; background: var(--amber); color: #17120A; padding: .6rem 1rem; border-radius: 2px; }

/* ------------------------------------------------------ the gap (Pro page)
   The three questions ARE this section's headline, so they carry the display
   size and the section title steps down to a deck. Three-across cards were
   tried and dropped: at that measure each question rendered smaller than the
   heading announcing it, which inverted the hierarchy. */
.deck{
  margin:0; font-weight:400; color:var(--ink-dim); max-width:48ch;
  font-size:clamp(1.125rem,1.9vw,1.375rem); line-height:1.45;
}
.gaplist{border-top:1px solid var(--rule); margin-top:.6rem}
.gapitem{display:grid; gap:.4rem; padding:1.6rem 0; border-bottom:1px solid var(--rule)}
@media (min-width:860px){
  .gapitem{grid-template-columns:minmax(0,22rem) minmax(0,1fr); gap:.4rem 3rem; align-items:start}
  .gapitem .scope{grid-column:1; grid-row:1}
  .gapitem h3   {grid-column:1; grid-row:2}
  .gapitem p    {grid-column:2; grid-row:1 / span 2}
}
.gapitem .scope{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-mut);
}
.gapitem h3{
  margin:0; font-weight:400; color:var(--ink); text-wrap:balance;
  font-size:clamp(1.375rem,2.4vw,1.75rem); line-height:1.15;
}
.gapitem p{margin:0; color:var(--ink-dim); font-size:.9375rem; line-height:1.7; max-width:58ch}

/* ---------------------------------------------- capability ledger (Pro page)
   Free and Pro are named once, in the header row, rather than on twelve
   repeated chips. Every row aligns to the same three columns so the Pro column
   reads straight down as one continuous argument — the point of the section,
   and the thing a grid of self-contained cards makes impossible. */
.ledger{border-top:1px solid var(--rule); margin-top:.6rem}
.lhead{display:none}
.lrow{display:grid; gap:.65rem; padding:1.5rem 0; border-bottom:1px solid var(--rule)}
@media (min-width:900px){
  .lhead,.lrow{
    display:grid; align-items:start; gap:0 2.25rem;
    grid-template-columns:minmax(0,14.5rem) minmax(0,1fr) minmax(0,1.55fr);
  }
  .lhead{
    padding:0 0 .75rem; font-family:var(--mono); font-size:.66rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut);
  }
  .lhead .pro{color:var(--amber)}
  .lpro{padding-left:1.4rem; border-left:1px solid #7A5320}
  .lab{display:none}
}
.lcap .k{
  display:block; margin-bottom:.3rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mut);
}
.lcap h3{margin:0; color:var(--ink); font-size:1.0625rem; font-weight:500; line-height:1.3}
.lfree,.lpro{margin:0; line-height:1.65}
.lfree{color:var(--ink-dim); font-size:.875rem}
.lpro {color:var(--ink-hi);  font-size:.9375rem}
/* Emphasis, not a link: an offset amber underline reads as highlighting.
   A flush 1px border-bottom looked like an anchor at paragraph size. */
.lpro em{
  color:var(--ink); font-style:normal;
  text-decoration:underline; text-decoration-color:rgba(224,138,36,.65);
  text-decoration-thickness:1px; text-underline-offset:.24em;
}
.lfree em{font-style:normal; color:var(--ink)}
.lab{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-mut); margin-right:.55rem;
}
.lpro .lab{color:var(--amber)}

/* Enterprise: a definition list, not four more cards. */
.deflist{margin:0;display:grid;gap:0}
.deflist dt{
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.02em;color:var(--amber);
  padding-top:.95rem;border-top:1px solid var(--rule);
}
.deflist dt:first-child{border-top:0;padding-top:0}
.deflist dd{margin:.3rem 0 .95rem;color:var(--ink-dim);font-size:.9rem}
.deflist dd:last-child{margin-bottom:0}

/* red, for the illustrative fleet terminal */
.term .r{color:#E86A5A}