/* Foundry 27 site component layer.
   Every value resolves to a token from /tokens. No raw hex, no off-scale space.
   Dark-first: iron is the page, bone sections are the contrast beat.
   Layout vocabulary per design-system/readme.md and github.md. */

:root{
  /* Component sizes the design system fixes but does not tokenise. */
  --bar-h:56px;              /* boxed header bar */
  --bar-inset:16px;          /* float from the viewport edge */
  --edge:24px;               /* page gutter, == --gutter */
  --tick:11px;               /* registration tick arm */
  --grid-cell:48px;          /* technical grid pitch */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--surface-page);
  color:var(--text-on-dark);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}
img,canvas{max-width:100%;display:block}
/* SVG stays inline: these are icons sitting inside sentences and headings, and
   display:block would push every one of them onto its own line. Anything that
   is genuinely a block (the hero canvas, .diagram) sets that for itself. */
svg{max-width:100%;vertical-align:middle}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}

/* Links: base.css sets rust, which is unreadable on iron. On dark the link is
   bone and the hover is ember; rust returns inside .on-light. */
a{color:inherit;text-decoration:none}
.prose a{color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--iron-4)}
.prose a:hover{color:var(--ember);text-decoration-color:var(--ember)}
.on-light .prose a{color:var(--rust);text-decoration-color:var(--border-light)}
.on-light .prose a:hover{color:var(--ember)}

::selection{background:var(--ember);color:var(--iron)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

.skip{position:absolute;left:var(--sp-4);top:calc(var(--bar-inset)*-4);z-index:80;
  background:var(--bone);color:var(--iron);padding:var(--sp-3) var(--sp-5);
  font-family:var(--font-mono);font-size:var(--text-spec);letter-spacing:var(--ls-spec);
  text-transform:uppercase;transition:top var(--dur-2) var(--ease-precise)}
.skip:focus{top:var(--bar-inset)}

/* ---------------------------------------------------------------- layout */

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--edge)}
.bleed{padding:0 var(--edge)}
.section{padding-top:var(--sp-9)}
.section--tight{padding-top:var(--sp-8)}
.stack>*+*{margin-top:var(--sp-5)}

/* Bordered cell grid. No gaps, no floating cards: 1px dividers only. */
.cells{border:var(--hairline-dark);display:grid}
.cells>*{border-left:var(--hairline-dark)}
.cells>*:first-child{border-left:none}
.cells--3{grid-template-columns:repeat(3,1fr)}
.cells--4{grid-template-columns:repeat(4,1fr)}
.cells--2{grid-template-columns:repeat(2,1fr)}
.rows{border:var(--hairline-dark)}
.rows>*+*{border-top:var(--hairline-dark)}

.on-light{background:var(--surface-light);color:var(--ink)}
.on-light .cells,.on-light .rows,.on-light .cells>*,.on-light .rows>*+*{border-color:var(--border-light)}

/* ------------------------------------------------------------ type roles */

.display{
  font-weight:var(--weight-medium);
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:var(--ls-display);
  font-size:max(64px,8.9vw);
  margin-left:-.35vw;
}
.display>span{display:block}
.display--page{font-size:min(110px,7.5vw);line-height:.95;margin:0 0 var(--sp-5)}
.display--page>span{display:inline}
.h1{font-size:var(--text-h1);font-weight:var(--weight-medium);line-height:var(--lh-heading);letter-spacing:var(--ls-display)}
.h2{font-size:min(48px,3.2vw);font-weight:var(--weight-medium);text-transform:uppercase;line-height:var(--lh-heading)}
.h3{font-size:min(34px,2.2vw);font-weight:var(--weight-medium);text-transform:uppercase;line-height:1.02}
.h4{font-size:var(--text-h3);font-weight:var(--weight-medium);text-transform:uppercase;line-height:var(--lh-heading)}
.lead{font-size:var(--text-lead);line-height:1.5;color:var(--text-on-dark-soft);max-width:62ch}
.on-light .lead{color:var(--ink)}
.prose{font-size:var(--text-body);line-height:var(--lh-body);color:var(--text-on-dark-soft);max-width:66ch}
.prose p+p{margin-top:var(--sp-4)}
.on-light .prose{color:var(--ink)}   /* iron is the body tone on light per the DS; ink-soft is 4.47:1, just under AA */
.small{font-size:var(--text-small)}
.measure{max-width:52ch}

/* Outlined display line. Paired with a solid line, never used alone. */
.outline{color:transparent;-webkit-text-stroke:min(.115vw,2px) var(--text-on-dark)}
.on-light .outline{-webkit-text-stroke-color:var(--ink)}

/* An arrow following heading text needs its own breathing room. Flex rows use
   gap for this; headings are not flex, so set it here. */
.h2>svg,.h3>svg,.h4>svg{margin-left:.35em}

/* Spec label: the signature mono annotation. Plain-language facts only. */
.spec{font-family:var(--font-mono);font-size:var(--text-spec);letter-spacing:var(--ls-spec);
  text-transform:uppercase;color:var(--text-on-dark-soft);display:inline-block}
.spec--accent{color:var(--ember)}
.spec--faint{color:var(--text-on-dark-faint)}
.on-light .spec{color:var(--ink-soft)}
.on-light .spec--faint{color:var(--ink-faint)}
.specrow{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-5);
  flex-wrap:wrap;padding:0 var(--sp-1)}

/* Mono data. Machine-produced values only: counts, dates, ids, measurements. */
.mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em}
.num{font-weight:var(--weight-medium);font-size:min(72px,4.8vw);line-height:1;
  color:var(--text-on-dark);font-variant-numeric:tabular-nums}
.idx{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-on-dark-faint)}

/* Kerf: the 2px ember accent rule marking a section start or active state. */
.kerf{display:block;height:var(--kerf);width:100%;background:var(--ember);border:0}
.kerf--v{width:var(--kerf);height:auto;align-self:stretch}
.kerf--muted{background:var(--border-dark)}

.hair{border:0;border-top:var(--hairline-dark)}
.on-light .hair{border-top:var(--hairline-light)}

/* Registration ticks: hairline crosses at a frame's corners. */
.ticked{position:relative}
.ticked::before,.ticked::after{content:"";position:absolute;width:var(--tick);height:var(--tick);
  pointer-events:none;
  background:
    linear-gradient(var(--iron-4),var(--iron-4)) 0 50%/100% 1px no-repeat,
    linear-gradient(var(--iron-4),var(--iron-4)) 50% 0/1px 100% no-repeat}
.ticked::before{top:calc(var(--tick)/-2);left:calc(var(--tick)/-2)}
.ticked::after{bottom:calc(var(--tick)/-2);right:calc(var(--tick)/-2)}

/* --------------------------------------------------------------- header */

.bar{position:fixed;top:var(--bar-inset);left:var(--edge);right:var(--edge);z-index:50}
.bar__in{display:flex;align-items:center;height:var(--bar-h);
  border:1px solid var(--iron-4);
  background:var(--iron);
  background:color-mix(in srgb,var(--iron) 82%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(5px);
  backdrop-filter:saturate(180%) blur(5px)}
.bar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:0 18px;height:100%;flex:none}
.bar__word{font-weight:var(--weight-medium);font-size:var(--text-small);
  letter-spacing:var(--ls-wordmark);color:var(--text-on-dark);white-space:nowrap}
.bar__word b{font-weight:inherit;color:var(--ember);letter-spacing:.04em}
.bar__spec{display:flex;align-items:center;padding:0 18px;height:100%;
  border-left:var(--hairline-dark);white-space:nowrap}
.bar__gap{flex:1}
.bar__cell{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  flex:none;padding:0 18px;height:100%;border-left:var(--hairline-dark);
  font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-on-dark);white-space:nowrap}
.bar__cell[aria-current="page"]{color:var(--ember)}
.bar__toggle{display:none}
.drawer{display:none}

/* Invert on hover: bone field, iron text. The primary interactive tell. */
.inv{transition:background var(--dur-2) ease-in,color var(--dur-2) ease-in}
.inv:hover,.inv:focus-visible{background:var(--bone);color:var(--iron)}
.inv:hover .outline,.inv:focus-visible .outline{-webkit-text-stroke-color:var(--iron)}
.inv:hover .spec,.inv:hover .idx,.inv:hover .prose{color:var(--ink-soft)}

/* Underline reveal: the wipe crosses from right to left. */
.ulink{
  background-image:linear-gradient(var(--ember),var(--ember)),linear-gradient(var(--ember),var(--ember));
  background-size:100% var(--kerf),0 var(--kerf);
  background-position:100% 100%,0 100%;
  background-repeat:no-repeat;
  transition:background-size 250ms var(--ease-precise);
  padding-bottom:3px;
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:.04em}
.ulink:hover,.ulink:focus-visible{background-size:0 var(--kerf),100% var(--kerf)}

/* --------------------------------------------------------------- buttons */

.btn{font-family:var(--font-body);font-weight:var(--weight-medium);letter-spacing:.02em;
  white-space:nowrap;border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:40px;padding:0 20px;font-size:var(--text-small);
  transition:background var(--dur-1) var(--ease-precise),color var(--dur-1) var(--ease-precise),
    border-color var(--dur-1) var(--ease-precise),transform var(--dur-1) var(--ease-precise)}
.btn:active{transform:translateY(1px)}
.btn--sm{height:32px;padding:0 14px;font-size:var(--text-xs)}
.btn--lg{height:48px;padding:0 26px;font-size:var(--text-small)}
/* The primary button is used as both <button> and <a>. base.css sets a bare
   a:hover{color:var(--ember)}, which at (0,1,1) outranks .btn--primary at
   (0,1,0) -- so the anchor form turned ember-on-ember on hover and the label
   vanished. Every state restates its own label colour, both to outrank that
   rule and because the label does not stay one colour across them:
     rest / focus   bone on rust        6.23:1
     hover          iron on ember       4.40:1  (bone here is only 3.01:1)
     active         bone on rust-deep   9.12:1
   The hover pairing is the design system's own ember field with iron on top,
   the same one ::selection uses. Order matters below: hover has to beat
   focus-visible when a keyboard focus is also hovered, and active has to beat
   hover, since active is always hovered too. */
.btn--primary{background:var(--rust);color:var(--bone)}
.btn--primary:focus-visible{color:var(--bone)}
.btn--primary:hover{background:var(--ember);color:var(--iron)}
.btn--primary:active{background:var(--rust-deep);color:var(--bone)}
.btn--secondary{background:transparent;color:var(--text-on-dark);border-color:var(--text-on-dark)}
.btn--secondary:hover{color:var(--ember);border-color:var(--ember)}
.on-light .btn--secondary{color:var(--ink);border-color:var(--ink)}
.on-light .btn--secondary:hover{color:var(--ember);border-color:var(--ember)}
.btn--ghost{background:transparent;color:var(--text-on-dark-soft)}
.btn--ghost:hover{color:var(--ember)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ----------------------------------------------------------- cards, tags */

.card{position:relative;background:var(--surface-raised);border:var(--hairline-dark);
  padding:var(--sp-5);color:var(--text-on-dark)}
.on-light .card{background:var(--surface-card-light);border-color:var(--border-light);color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;
  border:1px solid var(--text-on-dark-faint);color:var(--text-on-dark-soft);background:transparent}
.badge--positive{border-color:var(--positive);color:var(--positive)}
.badge--caution{border-color:var(--caution);color:var(--caution)}
.badge--critical{border-color:var(--critical);color:var(--critical)}
.badge--ember{border-color:var(--ember);color:var(--ember)}
.tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--text-spec);letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;
  background:var(--iron-2);border:var(--hairline-dark);color:var(--text-on-dark-soft)}

/* ----------------------------------------------------------------- forms
   Deviation from the design system's Input component: it sets labels in
   --text-on-dark-faint, which is 3.6:1 on iron and fails AA at 10px. Labels
   and hints carry information a person has to read, so they use the soft
   tone (7.4:1) here. Everything else matches the component. */

.field{display:flex;flex-direction:column;gap:7px;font-family:var(--font-body)}
.field>label,.field .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-on-dark-soft)}
.field .hint{font-size:var(--text-xs);color:var(--text-on-dark-soft);line-height:1.5}
.input,.textarea,.select{background:transparent;border:var(--hairline-dark);border-radius:var(--radius);
  color:var(--text-on-dark);font-family:var(--font-body);font-size:var(--text-small);
  padding:0 12px;height:40px;width:100%;
  transition:border-color var(--dur-1) var(--ease-precise)}
.textarea{height:auto;min-height:132px;padding:12px;line-height:var(--lh-body);resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-on-dark-faint)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--iron-4)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--ember)}
.selectw{position:relative;display:flex;flex-direction:column;gap:7px}
.select{appearance:none;padding-right:34px;cursor:pointer}
.select option{background:var(--iron-2);color:var(--text-on-dark)}
.selectw>svg{position:absolute;right:12px;bottom:14px;pointer-events:none}
.check{display:inline-flex;align-items:flex-start;gap:10px;cursor:pointer;
  font-size:var(--text-small);color:var(--text-on-dark);line-height:1.45}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{width:18px;height:18px;border:1px solid var(--text-on-dark-faint);flex:none;
  display:inline-flex;align-items:center;justify-content:center;margin-top:2px;
  transition:background var(--dur-1) var(--ease-precise),border-color var(--dur-1) var(--ease-precise)}
.check .box svg{opacity:0}
.check input:checked+.box{background:var(--rust);border-color:var(--rust)}
.check input:checked+.box svg{opacity:1}
.check input:focus-visible+.box{outline:2px solid var(--focus-ring);outline-offset:2px}
.check:hover .box{border-color:var(--ember)}
.req{color:var(--ember)}

/* ------------------------------------------------------------------ hero */

.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;border-bottom:var(--hairline-dark)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%}
/* Static fallback grid, shown when the canvas cannot run. */
.hero__grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--iron-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--iron-2) 1px,transparent 1px);
  background-size:var(--grid-cell) var(--grid-cell);background-position:center top}
.hero__in{position:relative;padding:0 var(--edge);margin-bottom:var(--sp-5)}
.hero__foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-6);
  margin:34px var(--sp-1) 40px;flex-wrap:wrap}
.hero__note{margin:0;max-width:440px;font-size:var(--text-small);line-height:1.55;
  color:var(--text-on-dark-soft)}

/* ------------------------------------------------------- service columns */

.svc{position:relative;padding:28px 28px 32px;display:flex;flex-direction:column;
  transition:background var(--dur-2) ease-in}
.svc::before{content:"";position:absolute;top:-1px;left:0;right:0;height:var(--kerf);
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform 300ms var(--ease-precise)}
.svc:hover::before,.svc:focus-within::before{transform:scaleX(1)}
.svc:hover,.svc:focus-within{background:var(--iron-2)}
.svc__title{margin:48px 0 14px}
.svc__list{margin-top:18px}
.svc__list li{display:flex;gap:10px;align-items:baseline;padding:6px 0;
  border-top:var(--hairline-dark);font-size:var(--text-small);color:var(--text-on-dark)}
.svc__list li>svg{color:var(--ember);flex:none;transform:translateY(1px)}

/* --------------------------------------------------------- process steps */

.step{padding:28px 24px 44px;display:flex;flex-direction:column;min-height:320px}
.step__no{font-weight:var(--weight-medium);font-size:min(88px,5.5vw);line-height:1;
  margin-bottom:var(--sp-5)}
.step__title{margin:0 0 var(--sp-3)}

/* ---------------------------------------------------------------- footer */

.foot{padding:var(--sp-8) var(--edge) var(--sp-6)}
.foot__grid{border:var(--hairline-dark);display:grid;grid-template-columns:1fr 1fr}
.foot__state{border-right:var(--hairline-dark);border-bottom:var(--hairline-dark);
  padding:var(--sp-6) 28px;min-height:220px;display:flex;flex-direction:column;
  justify-content:space-between}
.foot__big{font-weight:var(--weight-medium);text-transform:uppercase;
  font-size:min(56px,3.6vw);line-height:1;color:var(--text-on-dark)}
.foot__big span{display:block;margin-top:6px}
.foot__nav{display:flex;gap:28px;margin-top:var(--sp-6);flex-wrap:wrap;font-size:var(--text-small)}
.foot__meta{border-bottom:var(--hairline-dark);padding:var(--sp-6) 28px;display:flex;
  flex-direction:column;justify-content:space-between}
.foot__addr{font-family:var(--font-mono);font-size:var(--text-xs);line-height:2;
  color:var(--text-on-dark-soft);margin-top:var(--sp-5);font-style:normal}
.foot__addr a:hover{color:var(--ember)}
.foot__cells{display:flex;border-right:var(--hairline-dark);border-bottom:var(--hairline-dark)}
.foot__cell{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);flex:1;
  min-height:46px;font-weight:var(--weight-medium);font-size:var(--text-xs);
  letter-spacing:.06em;text-transform:uppercase}
.foot__cell+.foot__cell{border-left:var(--hairline-dark)}
.foot__solo{display:flex;align-items:center;justify-content:center;
  border-bottom:var(--hairline-dark);min-height:46px}
.foot__legal{grid-column:1/-1;display:flex;align-items:center;justify-content:center;min-height:42px}

/* -------------------------------------------------------------- reveals */

.reveal{opacity:0;transform:translateY(22px);
  transition:opacity 560ms var(--ease-precise),transform 560ms var(--ease-precise)}
.reveal.in{opacity:1;transform:none}

/* -------------------------------------------------------------- banner */

.banner{border:var(--hairline-dark);border-left:var(--kerf) solid var(--ember);
  padding:var(--sp-4) var(--sp-5);background:var(--iron-2);font-size:var(--text-small);
  color:var(--text-on-dark-soft)}

/* ------------------------------------------------------------ responsive */

/* The header spec strip is decoration. It goes before the nav and the CTA
   get squeezed, since those cells no longer shrink. */
@media (max-width:1000px){
  .bar__spec{display:none}
}

@media (max-width:900px){
  .cells--3,.cells--4,.cells--2{grid-template-columns:1fr}
  .cells>*{border-left:none;border-top:var(--hairline-dark)}
  .cells>*:first-child{border-top:none}
  .on-light .cells>*{border-top-color:var(--border-light)}
  .foot__grid{grid-template-columns:1fr}
  .foot__state{border-right:none}
  .h2{font-size:32px}
  .h3{font-size:26px}
  .step{min-height:0}
  .step__no{font-size:64px}
  .foot__big{font-size:40px}
}
@media (max-width:760px){
  :root{--edge:16px}
  /* At this width the brand, the CTA and the toggle cannot all fit.
     The toggle wins: the CTA is the first item inside the drawer. */
  .bar__spec,.bar__cell--desk,.bar__cell.inv{display:none}
  .bar__brand{padding:0 14px;gap:var(--sp-2)}
  .bar__word{font-size:var(--text-xs)}
  .bar__toggle{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
    padding:0 18px;height:100%;border-left:var(--hairline-dark);background:none;
    border-top:0;border-right:0;border-bottom:0;color:var(--text-on-dark);cursor:pointer;
    font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-medium);
    letter-spacing:.04em;text-transform:uppercase}
  .drawer{position:fixed;inset:calc(var(--bar-inset) + var(--bar-h) + 8px) var(--edge) auto;
    z-index:49;border:1px solid var(--iron-4);background:var(--iron)}
  .drawer[data-open]{display:block}
  .drawer a{display:flex;align-items:center;justify-content:space-between;
    padding:var(--sp-4) var(--sp-5);border-bottom:var(--hairline-dark);
    text-transform:uppercase;font-size:var(--text-small);font-weight:var(--weight-medium);
    letter-spacing:.04em}
  .drawer a:last-child{border-bottom:none}
  .display{font-size:max(40px,11vw);margin-left:-.2vw}
  .display--page{font-size:max(40px,13vw)}
  .hero{min-height:88vh}
  .hero__foot{align-items:flex-start;flex-direction:column;gap:var(--sp-5)}
  .num{font-size:52px}
  .svc__title{margin-top:var(--sp-6)}
  .foot__cells{flex-direction:column}
  .foot__cell+.foot__cell{border-left:none;border-top:var(--hairline-dark)}
  .form__row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  /* Hover and focus feedback is held back, not cut: it only ever fires in
     answer to the pointer, it is colour and a 2px rule rather than travel, and
     Windows reports `reduce` for its plain animation-effects toggle -- so
     stripping it would leave those machines with no interactive tell at all.
     Shortened to --dur-1 so it still reads as immediate. */
  .inv,.ulink,.btn,.svc,.svc::before,.svc__head>svg,.input,.textarea,.select,.check .box,
  .det summary::after{transition-duration:var(--dur-1)!important}
}

/* ------------------------------------------------------------- disclosure */

.det summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:var(--sp-2)}
.det summary::-webkit-details-marker{display:none}
.det summary::after{content:"";width:9px;height:9px;flex:none;margin-left:auto;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform var(--dur-2) var(--ease-precise);color:var(--text-on-dark-faint)}
.det[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.det summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:4px}

.mark{flex:none}

/* Anchors used as grid cells need to fill them. */
.cells>a.inv{display:block}
a.foot__cell{display:flex}

/* ------------------------------------------------------------ spec tables
   The design system's answer to a photograph: hairline-ruled tables and
   drawn diagrams that carry information, not decoration. */

.spectable{width:100%;border-collapse:collapse;font-size:var(--text-small);
  line-height:1.5;text-align:left}
.spectable caption{text-align:left;padding:0 0 var(--sp-4)}
.spectable th,.spectable td{padding:14px 16px;border-top:var(--hairline-dark);
  vertical-align:top;font-weight:400}
.spectable thead th{border-top:0;padding-bottom:10px;
  font-family:var(--font-mono);font-size:var(--text-spec);letter-spacing:var(--ls-spec);
  text-transform:uppercase;color:var(--text-on-dark-soft)}
.spectable tbody td:first-child{color:var(--text-on-dark-soft)}
.spectable tbody td:last-child{color:var(--text-on-dark)}
.spectable--kv tbody th{font-family:var(--font-mono);font-size:var(--text-spec);
  letter-spacing:var(--ls-spec);text-transform:uppercase;color:var(--text-on-dark-soft);
  width:38%;white-space:nowrap}
.spectable--kv tbody td{color:var(--text-on-dark)}
.on-light .spectable th,.on-light .spectable td{border-top-color:var(--border-light)}
.on-light .spectable thead th,.on-light .spectable tbody td:first-child,
.on-light .spectable--kv tbody th{color:var(--ink-soft)}
.on-light .spectable tbody td:last-child,.on-light .spectable--kv tbody td{color:var(--ink)}
.tablewrap{overflow-x:auto}

/* Drawn diagrams. Hairline construction, one ember accent, no fills. */
.diagram{width:100%;height:auto;display:block}
.diagram text{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--text-on-dark-faint)}
.diagram .lbl-on{fill:var(--text-on-dark)}
.diagram .lbl-em{fill:var(--ember)}
.diagram .ln{stroke:var(--iron-4);stroke-width:1;fill:none}
.diagram .ln-em{stroke:var(--ember);stroke-width:1.5;fill:none}
.diagram .ln-dash{stroke:var(--iron-3);stroke-width:1;fill:none;stroke-dasharray:3 4}

@media (max-width:760px){
  .spectable{font-size:var(--text-xs)}
  .spectable th,.spectable td{padding:12px 10px}
  .spectable--kv tbody th{width:auto}
}

/* ---------------------------------------------------- icons and fit lists
   Icons are small and structural: they label a column, they never carry it. */

.svc__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.svc__head>svg{color:var(--text-on-dark-faint);transition:color var(--dur-2) var(--ease-precise)}
.svc:hover .svc__head>svg,.svc:focus-within .svc__head>svg{color:var(--ember)}
.on-light .svc__head>svg{color:var(--ink-faint)}
.step__ic{color:var(--text-on-dark-faint);margin-bottom:var(--sp-4)}

.fitlist li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-top:var(--hairline-dark);font-size:var(--text-small);line-height:1.5}
.fitlist li>svg{flex:none;margin-top:3px;color:var(--ember)}
.fitlist--no li>svg{color:var(--ink-faint)}
.on-light .fitlist li{border-top-color:var(--border-light)}

/* Call-to-action band: statement left, one button right. */
.cta{grid-template-columns:1fr auto;align-items:center;gap:40px;padding:40px 36px}
.cta>*{border-left:none}
@media (max-width:760px){
  .cta{grid-template-columns:1fr;gap:var(--sp-5)}
  .cta>*+*{border-top:none}
}