/* BayMachines — private AI infrastructure. Shared styles for / and /about. */

:root {
  /* Brand — steel */
  --steel-700: #3b474d;
  --steel-500: #56666d;
  --steel-300: #a7b4b8;
  /* Chassis grey — a 55% tint of steel-300. Fills the machine bodies in the hardware
     line-art so they read as metal enclosures instead of outlines on the page. Kept
     darker than the grafito-100 bays so the bays still separate from the enclosure. */
  --steel-100: #cfd6d8;
  /* Neutrals — graphite */
  --graphite-900: #1e1e1c;
  --graphite-700: #47453f;
  --grafito-400: #8b8880;
  --grafito-100: #e7e4dc;

  --paper: #ffffff;
  --paper-2: #f6f5f1;
  --white: #ffffff;
  --ink: var(--graphite-900);
  --text: var(--graphite-700);
  --muted: var(--grafito-400);
  --line: #ddd9d0;
  --line-soft: var(--grafito-100);
  --line-dark: #cac6bb;
  --accent: var(--steel-700);
  --yc-orange: #ff6600;
  --yc-orange-dark: #e85c00;
  --radius: 4px;
  --max: 1120px;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Archivo, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
/* Every image on the site is product or client artwork, so none of them are
   draggable or right-clickable: pointer-events takes the image out of hit testing,
   which removes both the drag ghost and the "Save image as" menu — a right click
   lands on the page (or on the wrapping link) instead. Not protection, the files
   still answer at their own URLs; it just stops the casual drag-off. */
img { max-width: 100%; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.shell { width: min(var(--max), calc(100% - 56px)); margin: 0 auto; }
[id] { scroll-margin-top: 26px; }
.eyebrow { margin: 0 0 22px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }

/* Vertical rails */
/* z-index: -1 keeps the rails behind page content without a blanket rule on
   body children — that rule outranked .demo-modal on specificity and broke it. */
.rails { position: fixed; inset: 0; z-index: -1; display: flex; justify-content: center; pointer-events: none; }
.rails i { width: min(calc(var(--max) + 76px), calc(100% - 24px)); border-right: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 26px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; transition: background .16s ease, border-color .16s ease, color .16s ease; }
.btn.primary { border-color: var(--steel-700); background: var(--steel-700); color: #fff; }
.btn.primary:hover { border-color: var(--steel-500); background: var(--steel-500); }
.btn.outline { border-color: var(--line-dark); background: transparent; color: var(--ink); }
.btn.outline:hover { border-color: var(--ink); background: rgba(30,30,28,.04); }
/* The arrow rides the button the same way it does on .text-link below. */
.btn.arrow { gap: 8px; }
.btn.arrow span { transition: transform .16s ease; }
.btn.arrow:hover span { transform: translateX(3px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 1px solid var(--line-dark); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.text-link:hover { border-bottom-color: var(--ink); }
.text-link span { transition: transform .16s ease; }
.text-link:hover span { transform: translateX(3px); }

/* Announcement bar */
.announce-bar { min-height: 38px; padding: 9px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: var(--steel-700); color: #fff; font-family: var(--mono); font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .09em; text-align: center; text-transform: uppercase; text-decoration: none; transition: background .16s ease; }
.announce-bar:hover { background: var(--steel-500); }
.yc-mark { flex: 0 0 auto; display: grid; place-items: center; width: 15px; height: 15px; margin: 0 7px 0 6px; border-radius: 1px; background: var(--yc-orange); color: #fff; font-family: var(--sans); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; text-transform: none; }
.announce-arrow { margin-left: 9px; transition: transform .16s ease; }
.announce-bar:hover .announce-arrow { transform: translateX(3px); }

/* Top strip */
.topbar { border-bottom: 1px solid var(--line-soft); background: var(--white); }
.topbar-inner { min-height: 88px; display: flex; align-items: center; }
.brand { display: flex; align-items: center; text-decoration: none; }
/* The only thing in the header besides the wordmark, so it sits hard right and
   runs shorter than a hero button. Written as .btn.head-cta because .btn is
   declared earlier in this file at the same specificity. */
.btn.head-cta { min-height: 40px; margin-left: auto; padding: 10px 20px; }
.hero-dark-page .topbar .btn.head-cta { border-color: var(--paper-2); background: var(--paper-2); color: var(--graphite-900); }
.hero-dark-page .topbar .btn.head-cta:hover { border-color: var(--white); background: var(--white); }
/* The wordmark is 1950x807, so height drives the size — a wider box just adds dead space */
.brand-logo { display: block; width: auto; height: 62px; }

/* Section scaffolding */
.section { padding: 104px 0 112px; border-top: 1px solid var(--line-soft); }
.section-head { max-width: 800px; margin-bottom: 60px; }
/* Every term here stays below the matching term in .hero h1, so the page headline
   outranks the section headings at every viewport rather than only at the top of
   the clamp. Raising the h1 instead was the other option, but 46px is the size the
   hero was set to. */
.section-head h2 { margin: 0; font-size: clamp(26px, 3.1vw, 39px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.section-head p { margin: 18px 0 0; max-width: 660px; color: var(--text); font-size: 16px; }
/* The two hardware marks read as provenance for the machines rather than for the
   company, so they sit on the baseline of the Hardware heading instead of in the hero.
   The heading keeps its own 800px measure inside the first column. */
.section-head-marks { display: grid; grid-template-columns: minmax(0, 800px) auto; align-items: end; gap: 26px 44px; max-width: none; }
/* Held off the right edge of the shell so the pair sits inside the column of text
   below it rather than against the rail. */
.section-head-marks .hw-partner { margin: 0 96px 4px 0; }

/* Hero */
/* Short bottom padding because the hero now ends on the NVIDIA badge, which
   already carries 58px of clearance above it. */
.hero { padding: 96px 0 54px; }
/* One sentence per block, so the break lands between the two clauses rather than
   wherever the width runs out. Capped below 50px so the pair stays above the 39px
   section headings without crowding the lead. Both are short enough to hold their own
   line on a phone, so the blocks stay in place all the way down. */
.hero h1 { max-width: 800px; margin: 0 0 22px; font-size: clamp(30px, 3.35vw, 44px); line-height: 1.1; letter-spacing: -.035em; font-weight: 600; }
.hero h1 span { display: block; text-wrap: balance; }
.hero-lead { max-width: 600px; margin: 0 0 20px; color: var(--ink); font-size: 18px; font-weight: 400; line-height: 1.52; letter-spacing: -.016em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* The line that sits over the headline. Mono and small so it reads as a standing
   fact about the company rather than as a second headline. */
.hero-flag { display: flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--muted); font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase; }
.hero-flag-mark { display: block; flex: none; }
.hero-dark .hero-flag { color: var(--steel-300); }

.hero-compliance { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 34px 0 32px; max-width: 860px; }
.compliance-eyebrow { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
/* Framework rings. One diameter, one hairline, one typeface: the row is a set
   rather than a collection of found logos, and nothing in it imitates an agency
   seal — no ring text, no crest — because none of these frameworks issue a badge
   to display in the first place. currentColor carries the ring, so a single
   colour swap moves the whole set between the dark hero and the light pages. */
.seal-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.seal {
  display: grid;
  place-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--line-dark);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}
.seal span { display: block; color: var(--muted); }
.seal-sub { font-size: .92em; font-weight: 400; letter-spacing: .02em; }

/* One deployment, not two pictures: the screen sits at the right edge of the shell and the
   machine stands in front of it and to its left, pulled tight by the negative margin so the
   two overlap. z-index puts the machine above the screen even though it comes first in the
   DOM, and the drop below the screen's floor line reads as nearer to the viewer. */
.hero-stage { --mon-w: clamp(280px, 44vw, 544px); display: flex; align-items: flex-end; justify-content: flex-end; }
/* Bottoms are aligned, so the bottom margin is what lifts the screen off the machine's
   floor line and sets it further back. Every size here tracks --mon-w. */
.stage-monitor { position: relative; flex: 0 0 auto; width: var(--mon-w); margin: 0 0 24px calc(var(--mon-w) * -.42); }
.stage-appliance { display: block; position: relative; z-index: 1; width: calc(var(--mon-w) * .8); height: auto; margin: 0 0 -36px; }
/* The frame is the layout box and its screen area is a transparent hole, so the console
   is absolutely placed behind it at the hole's measured percentages, bled half a percent
   under the bezel so no white line shows along the inside edge. */
.monitor-frame { display: block; position: relative; width: 100%; height: auto; }
.monitor-screen { position: absolute; left: 1.75%; top: 2.6%; width: 96.5%; height: 72%; background: var(--white); object-fit: cover; }

/* The NVIDIA mark has transparent negative space, so it only reads on a light
   background. Sized by height rather than width so its cap height holds whatever
   the row's type sits at. Still a flex row even though it carries a single mark:
   it is the slot for partner and origin marks, and a row keeps the right-aligned
   anchor if a second one returns. */
.hw-partner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px 26px; margin: 46px 0 0; }
.hw-partner img { display: block; width: auto; height: 36px; }

/* ── Dark hero variant (/hero-new) ───────────────────────────────────────────
   A photograph of a populated rack holds the right side of the hero and the copy
   sits on the left in the light end of the palette. Everything is scoped to the
   page class or to .hero-dark, so the block moves to the top of the file or out of
   it in one piece once the variant is decided. The announce bar and header are
   already dark or paint dark here, so the page opens on one dark field and turns
   to paper at the first section. */
/* Only the strip above the first section goes dark. The body stays paper so the
   sections below the hero keep their own ground. */
.hero-dark-page .topbar { border-bottom-color: rgba(255,255,255,.09); background: var(--graphite-900); }
/* A notch down from the 62px on paper: the lockup is white here and the header band
   is dark, so the same height reads heavier than it does on the light pages. */
.hero-dark-page .topbar .brand-logo { height: 56px; }
/* The photograph's own dark left third would carry the copy on its own, but the
   crop moves with the viewport, so a scrim guarantees the contrast at every width.
   It clears by 78% to leave the rack itself untouched. */
/* The frame is shown whole apart from the lower half of the desk, trimmed out of the
   asset so the rack reads 8% larger at the same hero height without losing the desk
   line it stands on. The asset is that crop on a 3.5:1 canvas, its own smooth left
   column stretched out to the left edge, so cover can hold the full height at every
   viewport up to 3.5:1 without cutting into the rack or leaving a join — an earlier
   pass let the section's graphite carry the left instead, and the photograph's desk
   met it 10 levels brighter, which read as a vertical cut.
   The hero takes the rest of the first screen (127px is the announce bar plus the
   header at this width) so the photograph closes the fold instead of handing the
   last band of it to the paper section below. Copy taller than that grows it. */
.hero.hero-dark {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 127px);
  min-height: calc(100svh - 127px);
  display: grid;
  align-content: center;
  /* Centred between these two, so the heavier bottom padding is what lifts the copy
     off the middle: it sits a little above centre, where the rack's cable run is,
     rather than level with the desk. */
  padding: 84px 0 176px;
  background: var(--graphite-900);
  color: var(--paper-2);
}
.hero-dark::before,
.hero-dark::after { content: ""; position: absolute; inset: 0; }
.hero-dark::before { z-index: -2; background: url(/hero-rack.jpg) right center / cover no-repeat; }
.hero-dark::after {
  z-index: -1;
  background: linear-gradient(96deg, rgba(20,20,19,.97) 0%, rgba(20,20,19,.95) 32%, rgba(20,20,19,.66) 50%, rgba(20,20,19,.2) 70%, rgba(20,20,19,0) 88%);
}
/* Half the shell, so the copy never reaches the rack. */
.hero-dark-copy { max-width: 520px; }
/* A step over the base hero: there is no monitor beside the headline here, so the
   type carries the top of the page on its own. Capped at the 50px the About and
   Contact headlines use, and written with both classes so the 30px floor further
   down the file — same specificity, later in the cascade — does not take it back. */
.hero.hero-dark h1 { max-width: none; font-size: clamp(32px, 3.7vw, 50px); color: var(--paper-2); }
.hero-dark .hero-lead { max-width: 460px; color: var(--grafito-100); }
.hero-dark .hero-compliance { max-width: none; gap: 12px 22px; margin: 32px 0 30px; }
.hero-dark .compliance-eyebrow { color: var(--grafito-400); }
.hero-dark .seal { color: rgba(255, 255, 255, .22); }
.hero-dark .seal span { color: var(--steel-300); }
.hero-dark .btn.primary { border-color: var(--paper-2); background: var(--paper-2); color: var(--graphite-900); }
.hero-dark .btn.primary:hover { border-color: var(--white); background: var(--white); }
.hero-dark .btn.outline { border-color: rgba(246,245,241,.34); color: var(--paper-2); }
.hero-dark .btn.outline:hover { border-color: var(--paper-2); background: rgba(255,255,255,.07); }

/* From a laptop up the copy has a whole screen to itself beside the photograph, so the
   block is scaled together — headline, lead, seal row, actions — about 16% over the
   sizes above, which keep their proportions and stay as they are on a phone and a
   tablet, where the copy already fills the width it is given. Each seal height repeats
   the ratio the paper row uses between plain, stacked and circular. */
@media (min-width: 901px) {
  .hero-dark-copy { max-width: 580px; }
  .hero.hero-dark h1 { font-size: clamp(36px, 4.3vw, 58px); }
  .hero-dark .hero-lead { max-width: 520px; font-size: 19px; }
  .hero-dark .hero-flag { margin-bottom: 20px; font-size: 11px; }
  .hero-dark .compliance-eyebrow { font-size: 11px; }
  .hero-dark .seal-row { gap: 16px; }
  .hero-dark .seal { width: 54px; height: 54px; font-size: 8.5px; }
  .hero-dark .btn { min-height: 54px; padding: 15px 32px; font-size: 16px; }
}

/* The taller copy needs 700px of the first screen at the desktop sizes, so on a short
   window the bottom cushion comes back down to keep the fold closing on the photograph
   rather than on the section below it. Paired with min-width so it never fights the
   stacked layout, which stops using min-height at all. */
@media (max-height: 900px) and (min-width: 901px) {
  .hero.hero-dark { padding-bottom: 140px; }
}
/* One more step for a laptop window this short, where the cushion is all that is left
   to give: below this the copy alone is taller than the screen. */
@media (max-height: 800px) and (min-width: 901px) {
  .hero.hero-dark { padding-bottom: 92px; }
}
/* And the last of it on a short laptop window: at this height the cushion is all there
   is left to give, since the copy alone fills the rest of the screen. */
@media (max-height: 740px) and (min-width: 901px) {
  .hero.hero-dark { padding-bottom: 56px; }
}
/* A 1366x768 laptop, the shortest frame worth fitting, has about this much viewport once
   the browser takes its share, so here the top cushion gives as well and the copy sits
   nearer the middle of the screen. */
@media (max-height: 700px) and (min-width: 901px) {
  .hero.hero-dark { padding-top: 64px; padding-bottom: 44px; }
}
@media (max-width: 900px) {
  /* The copy is taller than the frame by this width, so the min-height stops driving
     the height and the crop holds the rack against the right edge instead, with the
     scrim turned vertical: copy over the dark top, hardware showing through below. */
  /* The marquee closes the hero here, and it brings 24px of its own, so the
     cushion below it comes down to keep the band near the fold. */
  .hero.hero-dark { min-height: 0; padding: 76px 0 44px; }
  .hero-dark::after { background: linear-gradient(178deg, rgba(20,20,19,.96) 0%, rgba(20,20,19,.93) 52%, rgba(20,20,19,.87) 84%, rgba(20,20,19,.74) 100%); }
  .hero-dark-copy { max-width: 560px; }
}
/* The larger headline needs one step more than the base hero does: at the 32px floor,
   "Deployed on-premise." runs to a second row once the shell drops under ~290px. */
@media (max-width: 340px) {
  .hero.hero-dark h1 { font-size: 27px; }
}
@media (max-width: 620px) {
  .hero-dark-page .topbar .brand-logo { height: 50px; }
  .hero.hero-dark { padding: 60px 0 36px; }
}
/* Icon tile — shared by the capability cards */
.icon-tile { width: 46px; height: 46px; display: grid; place-items: center; margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--steel-700); }
.icon-tile svg { display: block; width: 22px; height: 22px; }

/* Four reasons. Four columns rather than three so the set stays one row — at
   three the fourth card dropped onto a row of its own and read as an
   afterthought instead of a peer. Column gap tightens to 26px to buy the
   narrower cards back some measure. */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 26px; }
/* The cards are independent blocks, so a heading that wraps to two lines while
   its neighbours take one would push its paragraph down out of line with the
   row. Reserving two lines on the heading keeps every paragraph on the same
   baseline without hard-coding a height. */
.reason h3 { margin: 0 0 10px; min-height: 2.5em; font-size: 17px; line-height: 1.25; letter-spacing: -.022em; font-weight: 600; }
.reason p { margin: 0; color: var(--text); font-size: 14px; }

/* Hardware products */
/* The customer strip. It sits inside the hero, so it brings its own band: the
   gradient is what darkens the photograph under the right-hand marks, since the
   hero's own overlay has already faded to nothing by that edge. On a phone the
   band goes back into the flow — absolute, it would sit under the buttons.
   The heights are per logo: the artwork ranges from a 7:1 wordmark to a square
   badge, so one height would make the wide marks tiny and the square ones huge. */
.hero-logos { margin-top: 48px; padding-top: 24px; }
.logo-marquee { display: flex; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 38px; }
/* Held back to .62 so the marks sit into the photograph instead of competing with
   the headline. */
.logo-row img { display: block; width: auto; opacity: .62; }
.logo-polemos { height: 26px; }
.logo-earendil { height: 43px; }
.logo-metalware { height: 18px; }
.logo-dynamic { height: 48px; }
.logo-foreshadow { height: 18px; }

/* Desktop: one static row across the band. Declared here rather than up in the
   first min-width block because these rules have to outrank the mobile defaults
   above, and at equal specificity that is decided by source order. */
@media (min-width: 901px) {
  .hero-logos { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 0 28px; background: linear-gradient(180deg, rgba(20,20,19,0) 0%, rgba(20,20,19,.74) 42%, rgba(20,20,19,.92) 100%); }
  /* The only row on the page that ignores the 1120px grid: spread across the full
     hero instead, so the marks run the width of the band the way the gradient does. */
  .hero-logos .shell { width: min(1600px, calc(100% - 96px)); max-width: none; }
  /* Undone here: as a flex item the row would shrink to its content and
     space-between would have nothing to distribute. Block puts it back on the full
     width of the band. */
  .logo-marquee { display: block; }
  /* The second copy of the row only exists to make the mobile loop seamless. */
  .logo-row-dup { display: none; }
}

/* Phone and tablet: five marks will not sit on one line and wrapped they filled a
   third of the screen, so the row becomes a marquee instead — two identical copies
   translated by exactly half the track, which puts copy two where copy one started
   and makes the restart invisible. It runs full-bleed and clips at the viewport,
   so the shell drops its gutters here. Marks are scaled down to about two thirds. */
@media (max-width: 900px) {
  .hero-logos { overflow: hidden; }
  .hero-logos .shell { width: 100%; }
  .logo-marquee { width: max-content; animation: logo-marquee 26s linear infinite; }
  .logo-row { flex-wrap: nowrap; justify-content: flex-start; gap: 0 34px; padding-right: 34px; }
  .logo-polemos { height: 18px; }
  .logo-earendil { height: 30px; }
  .logo-metalware { height: 13px; }
  .logo-dynamic { height: 33px; }
  .logo-foreshadow { height: 13px; }
}
@keyframes logo-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* A sliding row is decoration, so it stops for anyone who asked motion to stop;
   the first copy still reads, the rest is simply off-screen. */
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { animation: none; }
}

/* Defense deployments. The pair of machines is the composition from the other
   branch's hero: the stack sits behind and the rugged unit crosses in front of
   it, so the two read as one system rather than as two product shots. */
.deploy-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); align-items: center; gap: 24px 60px; }
.deploy-layout .section-head { margin-bottom: 22px; }
.deploy-note { margin: 0; color: var(--muted); font-size: 13px; }
/* The top padding is what reserves room for the stack and so also sets how far
   down the rugged unit starts: at 42% it sat almost clear of the stack and read as
   a second photograph, so it is pulled up to 29% and now stands across the stack's
   lower half, its base just below the stack's. */
.deploy-visual { position: relative; padding-top: 29%; }
.deploy-visual img { display: block; height: auto; }
.deploy-rugged { position: relative; z-index: 1; left: 24%; width: 65%; }
.deploy-stack { position: absolute; z-index: 0; top: 0; right: 0; width: 52%; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.product { display: flex; flex-direction: column; height: 100%; margin: 0; }
/* --pv-h is the usable height inside the box, so the three shots keep the same size
   progression they had in the hero row rather than each filling its own card. They
   sit on the box's bottom edge, which puts the whole row of machines on one baseline. */
.product-visual { --pv-h: 222px; display: grid; place-items: end center; height: 260px; overflow: hidden; padding: 12px 12px 26px; }
.product-shot { display: block; width: auto; max-width: 100%; }
#ai-box .product-shot { height: calc(var(--pv-h) * .51); }
#gpu-server .product-shot { height: calc(var(--pv-h) * .725); }
#private-cluster .product-shot { height: var(--pv-h); }
.product figcaption { display: flex; flex: 1; flex-direction: column; padding-top: 30px; border-top: 1px solid var(--line); }
.product-tier { margin: 0 0 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.product-name { margin: 0 0 8px; font-size: 21px; line-height: 1.18; letter-spacing: -.028em; font-weight: 600; }
.product-desc { margin: 0; color: var(--text); font-size: 14px; }
.section-foot { margin-top: 54px; }

/* Models + platform */
.model-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 34px; padding: 0; list-style: none; }
.model-row li { display: flex; align-items: center; gap: 9px; padding: 10px 17px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 500; letter-spacing: -.012em; }
/* Vendor marks ship as black artwork, so opacity alone settles them into the row */
.model-logo { display: block; width: 17px; height: 17px; object-fit: contain; opacity: .58; }
.software-note { max-width: 660px; margin: 0 0 54px; color: var(--text); font-size: 16px; }

/* Closing CTA */
.closing { padding: 40px 0 24px; text-align: center; }
.closing h2 { max-width: 700px; margin: 0 auto 34px; font-size: clamp(34px, 4.4vw, 53px); line-height: 1.05; letter-spacing: -.045em; font-weight: 600; }
.closing-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }

/* About page */
.about-hero { padding: 100px 0 108px; }
/* One line at every width. This heading renders at 17.66x its font size, so the
   old clamp(31px, 3.8vw, 50px) was never short of room — the 31px floor was what
   broke it: below a 604px viewport the floor held the type at 31px while the
   shell kept shrinking past the 548px the line needs. Sizing off the shell
   instead keeps the line fitted at every width, and the 50px cap stops it from
   growing once there is spare room. The 18.2 divisor is the 17.66 ratio plus a
   little slack for font-metric variation between browsers.
   Deliberately still wrappable: if some browser measures Archivo a shade wider,
   a wrap into two balanced lines is a far better failure than nowrap's
   horizontal overflow, so text-wrap: balance stays as the fallback. */
.about-hero h1 { max-width: 940px; margin: 0 0 28px; font-size: min(50px, calc((100vw - 60px) / 18.2)); line-height: 1.09; letter-spacing: -.035em; font-weight: 600; text-wrap: balance; }
/* One paragraph under the heading rather than a lead plus a note, so this is
   both. Measure and type size move together: characters per line is the ratio
   both. The measure is 940px to match the heading's exactly, so the two blocks
   share one left and one right edge instead of the paragraph stopping short of
   the headline, and the type is 16px so the whole thing stays quiet under it.
   That is a deliberately long line — 139 characters at the longest, where 60-80
   is the comfortable range — which is why the leading opens up to 1.7: the wider
   the measure, the more vertical separation the eye needs to find the start of
   the next line instead of re-reading the one it just left. Four lines total,
   with the last one full rather than a single trailing word. */
.mission { max-width: 940px; margin: 0; color: var(--ink); font-size: 16px; line-height: 1.7; letter-spacing: -.012em; }
.founders-block { margin-top: 96px; padding-top: 44px; border-top: 1px solid var(--line); }
.founders-layout { display: grid; grid-template-columns: .6fr 1.4fr; gap: 90px; align-items: start; }
.founder-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.founder { margin: 0; }
.founder-photo { width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.founder-photo img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.founder figcaption { padding-top: 20px; }
.founder-name { margin: 0 0 5px; font-size: 21px; line-height: 1.15; letter-spacing: -.024em; font-weight: 600; }
.founder-role { margin: 0 0 10px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.founder-education { margin: 0; color: var(--muted); font-size: 13px; }
.backers { padding: 96px 0 110px; border-top: 1px solid var(--line-soft); }
.backer-grid { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.backer-cell { min-width: 0; min-height: 126px; display: flex; align-items: center; justify-content: center; padding: 26px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.backer-logo { display: block; width: 82%; height: 58px; object-fit: contain; }
.backer-logo.logo-treeo { width: 86%; height: 78px; }
.backer-logo.logo-palus { width: 72%; height: 54px; }
.backer-logo.logo-pioneer { width: 96%; height: 76px; }
.backer-logo.logo-aws { width: 58%; height: 62px; }
.backers-more { margin: 16px 0 0; color: var(--muted); font-family: var(--mono); font-size: 10px; text-align: right; }

/* Contact page */
.contact-hero { padding: 76px 0 0; }
.contact-hero h1 { max-width: 780px; margin: 0 0 24px; font-size: clamp(31px, 3.8vw, 50px); line-height: 1.09; letter-spacing: -.035em; font-weight: 600; }
.contact-lead { max-width: 660px; margin: 0; color: var(--ink); font-size: 19px; line-height: 1.45; letter-spacing: -.02em; }

.contact-body { padding: 66px 0 96px; }
.contact-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 74px; align-items: start; }
/* The form runs taller than the aside, so pinning it keeps the deliverables and
   the direct contact details in view while the form is being filled in. */
.contact-aside { position: sticky; top: 26px; }
.aside-block + .aside-block { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--line); }
.aside-title { margin: 0 0 8px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.assess-list { margin: 0; padding: 0; list-style: none; counter-reset: assess; }
.assess-list li { position: relative; padding: 16px 0 16px 34px; border-bottom: 1px solid var(--line-soft); }
/* The block divider below already closes the list, so a fourth rule would read as a stray line */
.assess-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.assess-list li::before { counter-increment: assess; content: "0" counter(assess); position: absolute; top: 19px; left: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.assess-list strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.018em; }
/* The ring row is the last block in the aside, and it sits under a mono label
   rather than beside one, so it takes its own top offset. */
.aside-block .seal-row { gap: 12px; padding-top: 10px; }
.contact-direct { display: grid; justify-items: start; gap: 7px; padding-top: 4px; }
.contact-direct a { color: var(--text); font-family: var(--mono); font-size: 12px; text-decoration: none; }
.contact-direct a:hover { color: var(--ink); }
.contact-direct .footer-address { margin: 4px 0 0; font-size: 11px; }

/* Assessment form */
.form-card { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 24px 60px rgba(30,30,28,.09); }
.form-card-head { min-height: 54px; padding: 13px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; border-bottom: 1px solid var(--line-soft); background: var(--paper-2); }
.form-card-head h2 { margin: 0; font-size: 15px; letter-spacing: -.022em; font-weight: 600; }
.form-block { padding: 30px 32px 32px; border-bottom: 1px solid var(--line-soft); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 7px; }
.field.wide { grid-column: 1 / -1; }
.field label { padding: 0; color: var(--ink); font-size: 13px; font-weight: 500; }
.field .opt { color: var(--muted); font-weight: 400; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.field textarea { min-height: 78px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--steel-500); outline: 2px solid rgba(59,71,77,.16); outline-offset: 0; }
.form-foot { padding: 24px 32px 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.form-note { margin: 0; flex: 1 1 280px; max-width: 52ch; color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-note a { color: var(--text); }
.form-status { margin: 0 32px 26px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); color: var(--text); font-size: 13px; }
.contact-alt { border-top: 1px solid var(--line-soft); background: var(--paper-2); }
.contact-alt-inner { padding: 34px 0 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; }
.contact-alt h2 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.028em; font-weight: 600; }
.contact-alt p { margin: 0; color: var(--text); font-size: 14px; }

/* Footer */
footer { border-top: 1px solid var(--line-soft); background: var(--white); }
/* The second track's floor is the link columns' own min-content (3 × 105px + 2 × 30px gap).
   Anything larger overflowed the shell between 761px and 795px, just above the breakpoint
   where the footer stacks. The fr ratio still decides the split at desktop widths. */
.footer-main { display: grid; grid-template-columns: minmax(250px, 1fr) minmax(375px, .9fr); gap: 70px; padding: 60px 0 46px; }
.footer-brand-block { display: flex; align-items: flex-start; flex-direction: column; }
.footer-brand-block .brand { margin-bottom: 22px; }
.footer-address { margin: 0 0 12px; color: var(--text); font-family: var(--mono); font-size: 11px; font-style: normal; line-height: 1.8; }
.footer-phone { color: var(--text); font-family: var(--mono); font-size: 11px; text-decoration: none; }
.footer-phone:hover { color: var(--ink); }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(105px, 1fr)); gap: 30px; }
.footer-column { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; }
.footer-column-title { margin-bottom: 5px; color: var(--ink); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.footer-column a { color: var(--text); font-size: 12px; text-decoration: none; }
.footer-column a:hover { color: var(--ink); }
.footer-lower { padding: 26px 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-soft); color: var(--muted); font-family: var(--mono); font-size: 8.5px; letter-spacing: .05em; }
.footer-lower a { color: inherit; text-decoration: none; }
.footer-lower a:hover { color: var(--ink); }
.footer-contact { display: flex; align-items: center; gap: 20px; }

/* Contact-sales modal */
body.modal-open { overflow: hidden; }
.demo-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 8px 24px; }
.demo-modal[hidden] { display: none; }
.demo-modal-backdrop { position: absolute; inset: 0; background: rgba(30,30,28,.62); backdrop-filter: blur(3px); }
.demo-dialog { position: relative; width: min(100%, 980px); height: min(92vh, 780px); display: grid; grid-template-rows: 58px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--white); box-shadow: 0 30px 90px rgba(30,30,28,.3); }
.demo-modal-head { min-height: 58px; padding: 0 18px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); }
.demo-modal-head h2 { margin: 0; font-size: 19px; letter-spacing: -.025em; font-weight: 600; }
.demo-modal-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; font-size: 20px; line-height: 1; }
.demo-modal-close:hover { background: var(--paper-2); }
.demo-modal-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: var(--white); }

@media (max-width: 1080px) {
}
@media (max-width: 980px) {
  .reason-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .product-grid { grid-template-columns: 1fr; gap: 46px; }
  .deploy-layout { grid-template-columns: 1fr; gap: 40px; }
  .deploy-visual { max-width: 420px; }
  .product-visual { --pv-h: 182px; height: 220px; }
  .logo-row { justify-content: flex-start; gap: 20px 32px; }
  .founders-layout { grid-template-columns: 1fr; gap: 28px; }
  .contact-layout { grid-template-columns: 1fr; gap: 50px; }
  /* Stacked, the aside would push the form a full screen down, so the form leads
     and the supporting detail follows it. */
  .contact-layout .form-card { order: 1; }
  .contact-aside { position: static; order: 2; }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 32px, var(--max)); }
  .rails { display: none; }
  .section { padding: 72px 0 78px; }
  .section-head { margin-bottom: 40px; }
  /* No room for the marks beside the heading, so they stack under it, aligned with it.
     Flush left all the way down, with nothing re-centring it below 620: the eyebrow
     and the heading above it stay left-aligned at every width, and a centred mark
     under a left-aligned head reads as a stray graphic rather than part of the head. */
  .section-head-marks { grid-template-columns: 1fr; }
  .section-head-marks .hw-partner { justify-content: flex-start; margin: 6px 0 0; }
  .hero { padding: 66px 0 40px; }
  /* Overlapped, the pair only needs 1.5 monitors of width, so below the desktop clamp
     the monitor can track the viewport and still take most of it. */
  .hero-stage { --mon-w: 58vw; }
  .hw-partner { margin-top: 38px; }
  .hw-partner img { height: 26px; }
  /* The seals carry text, so on a phone they get scaled down as a set rather than
     wrapped onto more rows at desktop size */
  .hero-flag { font-size: 9.5px; letter-spacing: .1em; }
  .seal-row { gap: 10px; }
  .seal { width: 44px; height: 44px; font-size: 7.5px; letter-spacing: .02em; }
  .closing { padding: 20px 0 10px; }
  .about-hero { padding: 74px 0 80px; }
  .contact-hero { padding-top: 58px; }
  .contact-body { padding: 56px 0 72px; }
  .form-card-head { padding: 13px 20px; }
  .form-block { padding: 24px 20px 26px; }
  .form-foot { padding: 20px 20px 22px; }
  .form-status { margin: 0 20px 22px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .contact-alt-inner { padding: 28px 0 30px; }
  .founders-block { margin-top: 68px; }
  .backers { padding: 76px 0 86px; }
  .backer-grid { grid-template-columns: repeat(2, 1fr); }
  .backer-cell { min-height: 104px; }
  .footer-main { grid-template-columns: 1fr; gap: 40px; padding: 46px 0 36px; }
  .footer-columns { grid-template-columns: repeat(2, minmax(120px, 1fr)); row-gap: 32px; }
  .footer-lower { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-contact { align-items: flex-start; flex-direction: column; gap: 7px; }
  .demo-modal { padding: 8px 10px; }
  .demo-dialog { width: 100%; height: calc(100vh - 16px); grid-template-rows: 54px minmax(0, 1fr); }
  .demo-modal-head { min-height: 54px; padding: 0 12px 0 16px; }
}
@media (max-width: 620px) {
  .announce-bar { padding: 9px 16px; font-size: 9.5px; letter-spacing: .07em; }
  /* Overlapped at this width the screen would be about 200px across, which is too small
     to read as software at all, so the pair stacks and each one takes most of the width. */
  .hero-stage { --mon-w: min(86vw, 380px); flex-direction: column; align-items: center; }
  .stage-monitor { margin: 0; }
  .stage-appliance { width: min(74vw, 330px); margin: 0 0 30px; }
  /* Stacked, nothing hangs below the stage. */
  .platform-stage .hero-stage { margin-bottom: 0; }
}
@media (max-width: 480px) {
  .brand-logo { height: 50px; }
  /* Both sentences still fit their own line at this size, so the blocks hold. */
  .hero h1 { font-size: 30px; }
  .hero-lead { font-size: 17px; }
  .reason-grid { grid-template-columns: 1fr; gap: 28px; }
  /* One per row, so there is no neighbouring paragraph to line up with and the
     reserved second heading line would just be a gap. */
  .reason h3 { min-height: 0; }
  /* Percentage widths would force the model column past what the numerals leave,
     so at this size the browser distributes on content instead. */
  /* The routing view lives or dies on its Destination column, and at this width the
     20px of cell padding was enough to clip "On-premise" into an ellipsis. */
  /* No h1 size override here any more: a fixed 30px at this width is wider than
     the shell and was the second thing forcing the heading onto two lines. The
     shell-derived size above already lands near 23px here. */
  /* No .mission override here any more: the base is 16px, which is already the
     body size the rest of the phone layout uses, and the shell caps the measure
     well under the 940px max-width on its own. */
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .btn { width: 100%; }
  .btn.head-cta { width: auto; }
}