/* 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; }
img { max-width: 100%; }
.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 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; }

/* Compliance badges */
.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; }
.badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin: 0; padding: 0; list-style: none; }
/* Every seal is dark artwork on transparency, so one opacity pass mutes them evenly.
   Muted less than the three originals were: the rim text on the circular seals turns to
   grey mush below about 55% and the row stops reading as a set of named frameworks. */
.badge { display: block; width: auto; height: 38px; filter: opacity(.6); }
/* The HIPAA mark stacks its symbol over the wordmark, so it needs the extra height to read */
.badge-hipaa { height: 45px; }
/* The circular seals carry their text around the rim, which needs a little more height
   than a wordmark at the same optical weight */
.badge-itar, .badge-cmmc, .badge-glba, .badge-nis2 { height: 47px; }
.compliance-note { max-width: 560px; margin: 20px 0 0; color: var(--muted); font-size: 10.5px; line-height: 1.55; }
/* The note is a third child of the flex row, so it takes a full line of its own
   under the label and the seals instead of sitting beside them */
.hero-compliance .compliance-note { flex: 1 0 100%; margin: 2px 0 0; }

/* 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; }
/* Both marks have transparent negative space, so they only read on a light
   background. Set to a shared height rather than a shared width: the two are
   different shapes, and matching the cap height is what makes them look like a
   pair. */
.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,
.hero-dark .compliance-note { color: var(--grafito-400); }
/* The seals here are the light artwork, white on transparency, so they take a
   higher opacity than the dark set does on paper to land at the same weight. */
.hero-dark .badge-row { gap: 16px 26px; }
.hero-dark .badge { filter: opacity(.78); }
.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: 21px; }
  .hero-dark .compliance-eyebrow { font-size: 11px; }
  .hero-dark .compliance-note { font-size: 12px; }
  .hero-dark .badge-row { gap: 16px 26px; }
  .hero-dark .badge { height: 44px; }
  .hero-dark .badge-hipaa { height: 53px; }
  .hero-dark .badge-itar, .hero-dark .badge-cmmc, .hero-dark .badge-glba, .hero-dark .badge-nis2 { height: 55px; }
  .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. */
  .hero.hero-dark { min-height: 0; padding: 76px 0 80px; }
  .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 68px; }
}
/* Seven seals across is the point of the row — split over two lines it reads as a list
   instead of a strip — and at the phone set of 28/33/34 it stops fitting just under this
   width. So from here down the seals and the spaces between them track the viewport
   instead of wrapping: the vw terms meet that set exactly at 440px, and the widest row
   they produce, at 320px, still clears the shell. */
@media (max-width: 440px) {
  .hero-dark .badge-row { flex-wrap: nowrap; gap: 14px clamp(16px, 5.6vw, 26px); }
  .hero-dark .badge-row li { flex: 0 0 auto; }
  .hero-dark .badge { height: clamp(20px, 6.36vw, 28px); }
  .hero-dark .badge-hipaa { height: clamp(24px, 7.5vw, 33px); }
  .hero-dark .badge-itar,
  .hero-dark .badge-cmmc,
  .hero-dark .badge-glba,
  .hero-dark .badge-nis2 { height: clamp(25px, 7.73vw, 34px); }
}

/* Icon tile — shared by reasons, industries, and flow steps */
.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; }
.icon-tile.step { color: var(--steel-700); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; }

/* Four reasons */
.reason-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 30px; }
.reason h3 { margin: 0 0 10px; 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 */
.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-systems .product-shot { height: calc(var(--pv-h) * .51); }
#gpu-servers .product-shot { height: calc(var(--pv-h) * .725); }
#clusters .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 + software */
.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; }

/* Product interface mock */

/* Common workloads */
.use-block { margin-top: 76px; padding-top: 40px; border-top: 1px solid var(--line); }
.use-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 30px; }
.use h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.25; letter-spacing: -.022em; font-weight: 600; }
.use p { margin: 0; color: var(--text); font-size: 14px; }

/* Industries + compliance */
.industry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 34px; }
.industry h3 { margin: 0 0 12px; font-size: 19px; line-height: 1.2; letter-spacing: -.028em; font-weight: 600; }
.industry p { margin: 0; max-width: 34ch; color: var(--text); font-size: 14px; }
.compliance { margin-top: 84px; padding-top: 42px; border-top: 1px solid var(--line); }
.compliance h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.028em; font-weight: 600; }
.compliance p { max-width: 720px; margin: 0 0 26px; color: var(--text); font-size: 15px; }
.compliance ul { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0; padding: 0; list-style: none; }
.compliance li { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compliance li:not(:last-child)::after { content: "·"; margin-left: 12px; color: var(--line-dark); }

/* End-to-end flow */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 30px; }
.flow-step h3 { margin: 0 0 10px; font-size: 17px; line-height: 1.22; letter-spacing: -.022em; font-weight: 600; }
.flow-step p { margin: 0; color: var(--text); font-size: 14px; }

/* Included vs additional — the standard offer reads first and wider, so the add-ons
   land as an extension of it rather than as a second thing to decide about. */
.offer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 30px 40px; margin-top: 84px; padding-top: 42px; border-top: 1px solid var(--line); }
.offer-block h3 { margin: 0 0 16px; font-size: 17px; letter-spacing: -.022em; font-weight: 600; }
.offer-block ul { margin: 0; padding: 0; list-style: none; }
.offer-block li { padding: 10px 0; border-top: 1px solid var(--line-soft); color: var(--text); font-size: 14px; }
.offer-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* 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; }
.about-hero h1 { max-width: 820px; margin: 0 0 28px; font-size: clamp(31px, 3.8vw, 50px); line-height: 1.09; letter-spacing: -.035em; font-weight: 600; }
.mission { max-width: 800px; margin: 0 0 24px; color: var(--ink); font-size: 23px; line-height: 1.42; letter-spacing: -.024em; }
.company-note { max-width: 700px; margin: 0; color: var(--text); font-size: 16px; }
.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; }
/* A supporting note in a sidebar rather than a claim under the headline, so the row
   runs about four fifths of the hero size — each override repeats the ratio the hero
   uses between the plain, stacked and circular seals. */
.aside-block .badge-row { gap: 14px 22px; padding-top: 4px; }
.aside-block .badge { height: 30px; }
.aside-block .badge-hipaa { height: 36px; }
.aside-block .badge-itar, .aside-block .badge-cmmc, .aside-block .badge-glba, .aside-block .badge-nis2 { height: 37px; }
.aside-block .compliance-note { margin-top: 16px; }
.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; }
  .product-visual { --pv-h: 182px; height: 220px; }
  .flow { grid-template-columns: repeat(2, 1fr); gap: 40px 30px; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 42px 30px; }
  .use-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 30px; }
  .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. */
  .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 */
  .badge { height: 28px; }
  .badge-hipaa { height: 33px; }
  .badge-itar, .badge-cmmc, .badge-glba, .badge-nis2 { height: 34px; }
  .badge-row { gap: 14px 16px; }
  .compliance-note { font-size: 9.5px; }
  .industry-grid { grid-template-columns: 1fr; gap: 38px; }
  .compliance { margin-top: 52px; }
  .flow { grid-template-columns: 1fr; gap: 38px; }
  .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; }
  /* Stacked, the pair is centred, so the marks centre with it instead of hugging the edge. */
  .hw-partner { justify-content: center; }
  .use-grid { grid-template-columns: 1fr; gap: 28px; }
}
@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; }
  /* 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. */
  .about-hero h1 { font-size: 30px; }
  .mission { font-size: 20px; }
  .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  .btn { width: 100%; }
}