/* Self-hosted webfonts - shipped with the site so rendering never depends on a
   third party being reachable. The lockup's baseline maths is calibrated to these
   exact faces, so a fallback would misalign it; font-display:block keeps the text
   invisible for a moment rather than flashing mis-metricked fallback glyphs.
   Inter is one variable file per subset (Google's four weights were identical).
   Both faces are OFL licensed. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:block;src:url('assets/fonts/inter-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:block;src:url('assets/fonts/inter-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:block;src:url('assets/fonts/ptserif-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:block;src:url('assets/fonts/ptserif-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:block;src:url('assets/fonts/ptserif-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:block;src:url('assets/fonts/ptserif-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --red:#9D0931;
  --red-dark:#830726;
  --maroon:#6A1527;
  --navy:#0A3148;
  --navy-deep:#02283F;
  --navy-dark:#07283B;
  --teal:#0D6377;
  --teal-circle:#034D68;
  --cream:#F2F0EC;
  --cloud:#CBD5DB;
  --ink:#15374C;
  --muted:#536876;
  --line:#E6EBEE;
  --serif:"PT Serif", "PT Serif Fallback", Georgia, "Times New Roman", serif;
  --sans:Inter, "Inter Fallback", "Segoe UI", Arial, sans-serif;
  --max:81.75rem;
}
/* Metric-matched fallbacks: if the self-hosted woff2 above ever fails to load,
   these give Georgia / Segoe UI the SAME cap height and line metrics as PT Serif /
   Inter, so the brand lockup's baseline alignment still holds instead of drifting. */
@font-face{font-family:'PT Serif Fallback';src:local('Georgia');size-adjust:101.03%;ascent-override:102.84%;descent-override:28.31%;line-gap-override:0.00%}
@font-face{font-family:'Inter Fallback';src:local('Segoe UI');size-adjust:103.91%;ascent-override:93.23%;descent-override:23.21%;line-gap-override:0.00%}

/* Root font scales with viewport above the 1448px design width (16px at 1448),
   so the whole layout zooms proportionally on larger screens. */
html{font-size:clamp(16px, 1.1049vw, 25.6px);scroll-behavior:smooth;scroll-padding-top:6.125rem}
*{box-sizing:border-box}
body{margin:0;font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(var(--max),calc(100% - 3rem));margin:0 auto}

/* ---------- header ---------- */
.site-header{background:#fff;border-bottom:1px solid #eef1f2;position:sticky;top:0;z-index:50}
.header-inner{height:5.375rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
/* Brand lockup. The EC inside the tile and the word "Consulting" are the same face
   at the same cap height on a shared baseline, and MARITIME SOFTWARE's baseline
   sits on the tile's bottom edge.

   EVERYTHING derives from --brand-tile, so the whole lockup scales as one unit and
   the alignment holds at any size or zoom. To resize it, change --brand-tile ONLY;
   never set .brand-name / .brand-tag / .brand-mark sizes directly, which is what
   previously broke the alignment on narrow viewports and at high browser zoom.

   Ratios come from the tile's own geometry (viewBox 110x103: EC cap 39.99 units,
   EC baseline y=61.55) plus measured font metrics - see scratchpad/lockup.py.
   The tile also carries ~9.2 units of plain red right of the C, so the small
   margin-left below lands ~13px of ink-to-ink air between the logo's C and the
   text: separated, but still reading as the one phrase "EC Consulting". */
.brand{--brand-tile:3.375rem;display:flex;align-items:flex-start;gap:0}
.brand-mark{width:var(--brand-tile);height:auto}
.brand-text{display:block;margin-left:calc(var(--brand-tile) * .0741)}
/* nowrap on both lines: if either ever wrapped, the baseline that the maths aligns
   would be the LAST line's, and the whole lockup would visibly drop */
.brand-name,.brand-tag{white-space:nowrap}
.brand-name{
  display:block;
  line-height:1;
  font-size:calc(var(--brand-tile) * .51937);
  margin-top:calc(var(--brand-tile) * .10511);   /* baseline onto the EC baseline */
  font-family:var(--serif);
  font-variant-caps:small-caps;
  letter-spacing:.045em;
  font-weight:400;
  color:#173A52;
}
.brand-tag{
  display:block;
  line-height:1;
  font-size:calc(var(--brand-tile) * .19437);
  margin-top:calc(var(--brand-tile) * .14719);   /* baseline onto the tile's bottom */
  font-family:var(--sans);
  font-weight:500;
  letter-spacing:.145em;                          /* matches the wordmark's width */
  text-transform:uppercase;
  color:#64798A;
}
.main-nav{display:flex;align-items:center;gap:2.125rem}
.main-nav a{
  font-family:var(--serif);
  font-size:.844rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#25455B;
  display:inline-flex;align-items:center;gap:.4375rem;
}
.main-nav a:hover{color:var(--red)}
.chev{
  width:0;height:0;display:inline-block;
  border-left:.25rem solid transparent;border-right:.25rem solid transparent;
  border-top:.3125rem solid #25455B;
  margin-top:1px;
}
.nav-cta{
  background:var(--red);
  color:#fff !important;
  font-family:var(--sans) !important;
  font-size:.719rem !important;
  font-weight:700;
  letter-spacing:.09em !important;
  padding:.75rem 1.375rem;
  text-align:center;
}
.nav-cta:hover{background:var(--red-dark);color:#fff !important}
.menu-toggle{display:none;background:#fff;border:1px solid var(--line);padding:.5rem .6875rem;font-weight:700;color:var(--ink)}

/* ---------- hero ---------- */
/* Aspect ratio matches the hero photo (1760x757) so the full image is always visible
   and the band scales with the page width. 757, not the original 764: the crop taken
   from the mockup carried ~6 rows of the page's white area along its top edge, which
   showed as a pale line across the hero's top-right (the left half hid it under the
   opaque end of the gradient). Those rows are trimmed from the file. */
/* max-width is load-bearing, not decoration. With BOTH aspect-ratio and min-height
   set, once min-height wins (viewport narrower than min-height * ratio) the engine
   resolves the WIDTH back from the ratio: 392px * 2.3249 = 911px, regardless of the
   viewport. That gave the whole page a horizontal scrollbar between 860px and 911px.
   Capping the width lets min-height win on height only, which is what was intended. */
.hero{position:relative;aspect-ratio:1760/757;min-height:24.5rem;max-width:100%;overflow:hidden;background:var(--navy)}
.hero-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(9,44,64,.985) 0%,
      rgba(9,44,64,.97) 16%,
      rgba(9,44,64,.9) 30%,
      rgba(9,44,64,.7) 42%,
      rgba(9,44,64,.4) 54%,
      rgba(9,44,64,.15) 68%,
      rgba(9,44,64,.03) 80%,
      rgba(9,44,64,0) 100%),
    url("assets/hero-clean.jpg?v=25") center/cover no-repeat;
}
.hero-inner{min-height:100%;display:flex;align-items:center;position:relative;z-index:1}
.hero-copy{max-width:40rem;padding-top:.25rem}
.hero h1{
  margin:0;
  font-family:var(--serif);
  font-size:2.8125rem;
  line-height:1.17;
  letter-spacing:-.005em;
  font-weight:400;
  color:#fff;
}
.hero-line{width:4.125rem;height:.1875rem;background:var(--red);margin:1.375rem 0 1.125rem}
.hero p{max-width:31.5rem;margin:0;color:rgba(255,255,255,.94);font-size:.969rem;line-height:1.55}
.hero-actions{display:flex;gap:1.125rem;margin-top:1.625rem;flex-wrap:wrap}
.button{
  height:3rem;
  padding:0 1.625rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.875rem;
  text-transform:uppercase;
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.09em;
  white-space:nowrap;
}
.button .arrow{font-size:.9375rem;line-height:1;translate:0 -1px}
.button.primary{background:var(--red);color:#fff;min-width:12.375rem}
.button.primary:hover{background:var(--red-dark)}
.button.outline{border:1.5px solid rgba(255,255,255,.72);color:#fff;min-width:14.5rem}
.button.outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* ---------- product cards ---------- */
.products{background:var(--cream);padding:2.25rem 0}
/* Carousel: three cards in view, the rest reachable by scrolling. A native
   scroll-snap container rather than a JS slider, so touch, trackpad and keyboard
   all work on their own and the buttons are only an extra affordance. */
.carousel-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2 * 1.3125rem) / 3);
  gap:1.3125rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;                  /* the arrows are the control */
  scroll-padding-left:1px;
  padding-bottom:.375rem;                /* room for the cards' drop shadow */
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track > .card{scroll-snap-align:start}
.carousel-track:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.card{
  background:#fff;
  border:1px solid #E9E7E2;
  box-shadow:0 2px 9px rgba(17,45,61,.04);
  min-height:9.375rem;
  display:grid;
  grid-template-columns:5.25rem 1fr;
  gap:1.375rem;
  align-items:center;
  padding:1.375rem 1.625rem;
  position:relative;
}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.25rem}
.card.red::after{background:var(--red)}
.card.navy::after{background:#17303F}
.card.teal::after{background:var(--teal)}
.card-icon{width:5.25rem;height:5.25rem}
.card h2{margin:0 0 .5625rem;font-family:var(--serif);font-size:1.344rem;line-height:1.12;font-weight:700;color:var(--ink)}
/* Roadmap card: the same shape as the shipped ones, but grey where they carry a brand
   accent, so it never reads as an available capability at a glance.

   "upcoming", NOT "soon": `.soon` is already the coming-soon page's main section and
   carries min-height:calc(100vh - 9rem). A card called `.card.soon` silently inherited
   it and stretched every card in the carousel to full viewport height, because they
   share one grid row. One flat stylesheet serves three pages, so generic modifier
   names are a real hazard here. Grep before naming one. */
.card.upcoming::after{background:#AFBCC4}
.card.upcoming .card-icon{opacity:.78}
.card-upcoming-label{
  display:block;margin-bottom:.3rem;
  font-family:var(--sans);font-size:.625rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#8695A0;
}
.card.red h2{color:var(--red)}
.card p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.5}

/* ---------- "in development" cues ---------- */
/* Small eyebrow above a heading. Carried over from the earlier version of the site;
   used in the hero and on coming-soon.html. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  margin:0 0 .8rem;
  font-family:var(--sans);font-size:.688rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  /* Slate rather than crimson: the eyebrow was the only pink on the site and
     read as the odd one out. Two weights are needed because it appears on both
     grounds, and one value cannot serve both - cloud on white measures 1.5:1,
     which is unreadable. This slate is the same one the logo lockup already
     uses for MARITIME SOFTWARE, and measures 4.5:1 on white. */
  color:#64798A;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.8}
.hero .eyebrow{color:#CBD5DB}   /* cloud, for the navy photo */

/* Status strip between the hero and the product cards */
.status-strip{background:#F7F3EE;border-bottom:1px solid #EAE3DA}
.status-inner{
  display:flex;align-items:baseline;gap:.85rem;
  padding:.85rem 0;font-size:.85rem;color:#5A4A44;
}
.status-inner strong{
  flex:none;
  font-family:var(--sans);font-size:.688rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);
  white-space:nowrap;
}
/* Cap the sentence at a readable measure instead of letting it run the full width */
.status-inner span{max-width:58rem}
.status-inner a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.status-inner a:hover{color:var(--red-dark)}

/* Roadmap panel: what exists now vs what is coming */
.roadmap{background:#fff;padding:2.75rem 0 2.5rem}
.roadmap-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:start}
.roadmap h2{margin:0 0 .6rem;font-family:var(--serif);font-size:1.75rem;line-height:1.12;font-weight:700;color:#183A50}
/* :not(.eyebrow) - a bare `.roadmap p` outranks `.eyebrow` and would recolour it */
.roadmap p:not(.eyebrow){margin:0 0 .9rem;color:var(--muted);font-size:.9rem;line-height:1.6}
.roadmap p:last-child{margin-bottom:0}
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.1rem}
.tag{
  padding:.3rem .6rem;border:1px solid #DCE3E8;border-radius:999px;
  background:#F4F7F9;color:#3D5A69;font-size:.75rem;letter-spacing:.02em;
}
.roadmap-next{
  border-left:3px solid var(--red);background:#F6F9FA;
  padding:1.25rem 1.5rem 1.35rem;
}
.roadmap-next h3{
  margin:0 0 .55rem;font-family:var(--serif);font-size:1.125rem;font-weight:700;color:#183A50;
}
.roadmap-next ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.875rem;line-height:1.75}
.roadmap-next li::marker{color:#B9C6CE}

.button.ghost{border:1.5px solid #C6D0D7;color:var(--ink)}
.button.ghost:hover{border-color:#8FA3AF;background:#F6F9FA}

/* ---------- coming-soon page ---------- */
/* min-height keeps the footer near the bottom of the viewport on this short page */
.soon{padding:4.5rem 0 5rem;min-height:calc(100vh - 9rem)}
/* The block stays the full content width so it lines up with the header's brand;
   only the text measure is capped. */
.soon h1,.soon-lead{max-width:44rem}
.soon h1{
  margin:0 0 1.1rem;font-family:var(--serif);font-size:2.4rem;line-height:1.18;
  font-weight:400;color:#173A52;
}
.soon-lead{margin:0 0 1rem;color:var(--muted);font-size:1rem;line-height:1.65}
.soon-actions{display:flex;gap:1rem;margin-top:1.9rem;flex-wrap:wrap}

/* ---------- integration band ---------- */
.integration{background:var(--cloud);padding:2.375rem 0}
.integration-grid{display:grid;grid-template-columns:1.62fr .88fr 1fr .86fr;gap:1.625rem;align-items:center}
.integration-lead{display:grid;grid-template-columns:7rem 1fr;gap:1.625rem;align-items:center}
.puzzle-icon{width:6.25rem;height:auto;opacity:.9}
.integration h2{margin:0 0 .5625rem;font-family:var(--serif);font-size:1.75rem;line-height:1.1;font-weight:700;color:#183A50}
.integration-lead p{margin:0;color:#3D5A69;font-size:.85rem;line-height:1.52}
.benefit{border-left:1px solid rgba(21,55,76,.18);padding-left:1.5rem;min-height:6rem}
.benefit-head{display:flex;align-items:center;gap:.625rem;margin-bottom:.625rem}
.benefit-head strong{font-family:var(--serif);font-size:.969rem;font-weight:700;color:#183A50}
.tick{width:1.1875rem;height:1.1875rem;border-radius:50%;position:relative;display:inline-block;flex:0 0 1.1875rem}
.tick-red{background:#B00D3D}
.tick::after{
  content:"";position:absolute;left:.3125rem;top:.3125rem;width:.4375rem;height:.25rem;
  border-left:.125rem solid #fff;border-bottom:.125rem solid #fff;transform:rotate(-45deg);
}
.benefit p{margin:0;color:#3D5A69;font-size:.8rem;line-height:1.5}

/* ---------- CTA ---------- */
/* One composed background image (contours -> navy -> ghost lighthouse), scales like the hero */
.cta{
  position:relative;
  background:var(--navy-deep) url("assets/cta-bg.jpg?v=25") center/cover no-repeat;
  color:#fff;
  aspect-ratio:2600/290;
  min-height:8.25rem;
  max-width:100%;      /* see the note on .hero: without this the ratio inflates the
                          width to 1183px whenever min-height wins, which is every
                          viewport between 860px and 1183px */
  overflow:hidden;
}
.cta-inner{
  position:relative;z-index:1;min-height:100%;
  display:grid;grid-template-columns:6rem 1fr auto;gap:1.625rem;align-items:center;
  /* right inset keeps the ghosted lighthouse visible beside the button, as in the design */
  padding:1.375rem 15rem 1.375rem 6.9rem;
}
.cta-badge{width:5.75rem;height:auto}
.cta-copy h2{margin:0 0 .375rem;font-family:var(--serif);font-size:1.531rem;line-height:1.15;font-weight:700}
.cta-copy p{margin:0;color:rgba(255,255,255,.88);font-size:.875rem}
.cta-button{
  background:var(--red);color:#fff;height:3.125rem;padding:0 1.625rem;min-width:10.5rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.8125rem;
  text-transform:uppercase;font-size:.75rem;font-weight:600;letter-spacing:.09em;white-space:nowrap;
}
.cta-button:hover{background:var(--red-dark)}
.cta-button .arrow{font-size:.9375rem;translate:0 -1px}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-dark);color:#adbec7;padding:.9375rem 0}
.footer-inner{display:flex;justify-content:space-between;gap:1.25rem;flex-wrap:wrap;font-size:.781rem}
.site-footer a{color:#dbe6eb}

/* ---------- interior pages (product.html) ---------- */
/* The full-bleed photo band is the homepage's signature, so interior pages get the
   same band at about half the height rather than a different treatment. */
.hero.compact{aspect-ratio:auto;min-height:19rem}
.hero.compact .hero-inner{padding:3rem 0}
.hero.compact h1{font-size:2.35rem}
.hero.compact p{max-width:35rem}

.section{padding:2.75rem 0}
.section.tint{background:var(--cream)}
.section.band{background:var(--cloud)}
.sec-title{margin:0 0 .7rem;font-family:var(--serif);font-size:1.75rem;line-height:1.12;font-weight:700;color:#183A50}
.sec-lead{margin:0 0 1.5rem;max-width:46rem;color:var(--muted);font-size:.938rem;line-height:1.6}
.band .sec-lead{color:#3D5A69}
.prose p{margin:0 0 .9rem;color:var(--muted);font-size:.9rem;line-height:1.62}
.prose p:last-child{margin-bottom:0}
.split{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:start}

/* Side panel, same card as the homepage's "Coming to this site" */
.panel{border-left:3px solid var(--red);background:#F6F9FA;padding:1.25rem 1.5rem 1.35rem}
.panel h3{margin:0 0 .6rem;font-family:var(--serif);font-size:1.125rem;font-weight:700;color:#183A50}
.panel ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.875rem;line-height:1.55}
.panel li{margin-bottom:.6rem}
.panel li:last-child{margin-bottom:0}
.panel li strong{color:#183A50}
.panel li::marker{color:#B9C6CE}

/* The seven S-1xx layers. A definition list, not cards: there are only three
   product icons and inventing four more would look worse than none. */
.coverage{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem 2.25rem;margin:0}
.coverage > div{padding-top:.85rem;border-top:1px solid #DFE6EA}
.coverage dt{font-family:var(--serif);font-size:1.031rem;font-weight:700;color:#183A50;margin-bottom:.3rem}
.coverage dd{margin:0;color:var(--muted);font-size:.85rem;line-height:1.55}
.coverage-note{margin:1.6rem 0 0;max-width:52rem;color:var(--muted);font-size:.875rem;line-height:1.6}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:1.7rem 2.25rem}
/* .three for sections with an odd count, so the last item is not left orphaned
   beside a gap. Needs its own entry in each media query below: `.pillars.three`
   outranks a bare `.pillars` there and would otherwise ignore the collapse. */
.pillars.three{grid-template-columns:repeat(3,1fr)}
.pillar h3{margin:0 0 .4rem;font-family:var(--serif);font-size:1.062rem;font-weight:700;color:#183A50}
.pillar p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.58}

.safety{display:grid;grid-template-columns:repeat(3,1fr);gap:1.625rem}

.footnote{
  margin:1.75rem 0 0;padding-top:1rem;border-top:1px solid #DFE6EA;
  max-width:46rem;color:#7B8B96;font-size:.781rem;line-height:1.55;
}

/* Carousel arrows: tall, narrow controls sitting ON the card edges, inside the
   track's own bounds. They were briefly placed outside it, in the page gutter,
   which broke the alignment every other section on the page shares. */
.carousel{position:relative}
/* The frame holds the track and the arrows and nothing else. The arrows centre
   on 50% of their positioned ancestor, so giving them a frame keeps them on the
   cards however much the band gains above them - the counter, for one. */
.carousel-frame{position:relative}
.carousel-count{
  margin:0 0 .75rem;text-align:right;color:var(--muted);
  font-size:.719rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.carousel-count[hidden]{display:none}
/* display:contents so the buttons position against the frame rather than the
   nav, but that beats the UA's [hidden] rule, so restore hiding explicitly */
.carousel-nav{display:contents}
.carousel-nav[hidden]{display:none}
.carousel-btn{
  position:absolute;top:calc(50% - .1875rem);transform:translateY(-50%);z-index:3;
  width:1.75rem;height:4.75rem;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.95);border:0;color:var(--ink);
  box-shadow:0 2px 12px rgba(17,45,61,.22);
  font-size:.938rem;line-height:1;cursor:pointer;
}
.carousel-btn[data-dir="-1"]{left:0}
.carousel-btn[data-dir="1"]{right:0}
.carousel-btn:hover:not(:disabled){background:#fff;color:var(--red)}
.carousel-btn:disabled{opacity:.35;cursor:default}
/* drag to scroll, wired up in index.html */
.carousel-track{cursor:grab}
.carousel-track.dragging{cursor:grabbing;user-select:none}

/* ---------- products band ---------- */
.makes{background:#fff;padding:2.75rem 0}
/* The band's heading matches the card headings exactly: same face, size and
   colour. Scoped to .makes so the product page's section titles keep 1.75rem.
   The eyebrow above carries the hierarchy the larger size used to. */
.makes .sec-title{font-size:1.344rem;color:var(--ink)}
.makes-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem}
.make{background:#fff;border:1px solid #E9E7E2;box-shadow:0 2px 9px rgba(17,45,61,.05);position:relative}
.make::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.25rem}
.make.a::after{background:var(--red)}
.make.b::after{background:#17303F}
/* fixed ratio box, so the cards stay aligned whatever shape an asset turns out
   to be. Screenshots get swapped often and their dimensions vary. */
.shot{width:100%;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid #E9E7E2;background:#0A2B40}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.make-body{padding:1.35rem 1.625rem 1.75rem}
.make h3{margin:0 0 .5rem;font-family:var(--serif);font-size:1.344rem;line-height:1.14;font-weight:700;color:var(--ink)}
.make.a h3{color:var(--red)}
.make p{margin:0 0 .9rem;color:var(--muted);font-size:.875rem;line-height:1.55}
.make a.more{color:var(--red);font-weight:600;font-size:.844rem;text-decoration:underline;text-underline-offset:2px}
.make a.more:hover{color:var(--red-dark)}
/* the data credit and the not-for-navigation label are required wherever this
   imagery appears: see DATA_LICENSING.md */
.shot-note{margin:1.25rem 0 0;color:#7B8B96;font-size:.719rem;line-height:1.5;max-width:64rem}
.roadmap-actions{margin-top:1.4rem}

/* ---------- product page imagery ----------
   Every capture keeps its title bar, menu bar and status line, so the border sits
   against window chrome rather than against chart. The dark ground behind the
   image is the application's own, which means a slow connection shows an empty
   window frame rather than a white hole. */
.figure{margin:2rem 0 0}
.figure img{display:block;width:100%;height:auto;background:#1F2226;border:1px solid #E4E1DB}
/* No max-width on the caption. The images run the full column, and a caption that
   stops 284px short of the picture it belongs to is what makes a column of figures
   read as ragged down the right-hand side. */
.figure figcaption,.rowcap{margin:.7rem 0 0;color:#7B8B96;font-size:.719rem;line-height:1.5}

/* Two things sit around every picture and they must not be confused with each other:
   our description of it, and the conditions the data comes with. The caption stays
   in caption grey below; the navigation warning goes above the frame, smaller,
   letter-spaced and in the accent red, where a warning belongs. */
.disclaimer{
  margin:2rem 0 .45rem;
  font-size:.625rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);
}
.disclaimer + .figure,.disclaimer + .triptych{margin-top:0}
/* The source and licence notice. Two columns so it can span the full column width,
   and so keep the same right edge as the pictures, without running a 190-character
   line of small type to get there. */
.datanote{
  margin:1.75rem 0 0;padding-top:1rem;border-top:1px solid #DCD8D0;
  display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;
  color:#7B8B96;font-size:.75rem;line-height:1.62;
}
.datanote p{margin:0}
/* If a figure ever has to carry a capture narrower than the column, pin it in px
   here rather than in rem: the layout growing on a large screen is not a reason to
   blow a screenshot up past its own pixels. Every current capture is 1920 or 1600
   wide and needs no pin. */
.figure.pinned{max-width:960px}

/* Day, dusk and night. Three at once rather than a toggle: the point is the
   comparison, and a comparison you have to click through is not one. */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:1.375rem;margin-top:2rem}
.triptych .figure{margin:0}
.triptych figcaption{
  margin:.55rem 0 0;color:var(--muted);
  font-size:.719rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .safety{grid-template-columns:1fr}
  .pillars.three{grid-template-columns:1fr 1fr}
  .integration-grid{grid-template-columns:1fr 1fr;row-gap:1.875rem}
  .integration-lead{grid-column:1 / -1}
  .cta-inner{padding-left:0;padding-right:7rem}
}
@media (max-width:1000px){
  html{scroll-padding-top:86px}
  .carousel-track{grid-auto-columns:calc((100% - 1.3125rem) / 2)}   /* two in view */
  .header-inner{height:74px;position:relative}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .main-nav.open{display:flex}
  .main-nav a{padding:11px 8px}
  .nav-cta{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@media (max-width:860px){
  .wrap{width:min(var(--max),calc(100% - 30px))}
  /* resize the lockup as ONE unit; setting the parts individually (as this block
     used to) breaks the baseline/cap alignment */
  .brand{--brand-tile:2.75rem}
  .hero{aspect-ratio:auto;min-height:520px}
  .hero-bg{background:
    linear-gradient(90deg,rgba(9,44,64,.9) 0%,rgba(9,44,64,.78) 100%),
    url("assets/hero-clean.jpg?v=25") center/cover no-repeat;
  }
  .hero-inner{min-height:520px;padding:44px 0}
  .hero h1{font-size:34px}
  .hero h1 br{display:none}
  .hero-actions{flex-direction:column;align-items:flex-start}
  .button{width:100%}
  .carousel-track{grid-auto-columns:100%}                            /* one in view */
  /* Three chart views side by side stop being readable long before the layout
     breaks; one at a time keeps the detail that makes them worth showing. */
  .triptych{grid-template-columns:1fr;gap:1.75rem}
  .datanote{grid-template-columns:1fr;gap:.9rem}
  .integration-grid{grid-template-columns:1fr}
  .integration-lead{grid-template-columns:1fr;justify-items:start}
  .benefit{border-left:0;border-top:1px solid rgba(21,55,76,.18);padding-left:0;padding-top:16px;min-height:0}
  .cta{aspect-ratio:auto;background-position:left center}
  .cta-inner{grid-template-columns:1fr;text-align:center;padding:30px 0}
  .cta-badge{margin:0 auto}
  .cta-button{justify-self:center}
  .status-inner{flex-wrap:wrap;gap:.35rem}
  .makes-grid{grid-template-columns:1fr}
  .roadmap-grid{grid-template-columns:1fr}
  .soon h1{font-size:30px}
  .hero.compact{min-height:0}
  .hero.compact h1{font-size:30px}
  .hero.compact .hero-inner{min-height:0;padding:34px 0}
  .split,.coverage,.pillars,.pillars.three{grid-template-columns:1fr}
}
/* very narrow phones: the fixed icon column would squeeze the card text to ~120px */
@media (max-width:400px){
  .card{grid-template-columns:3.5rem 1fr;gap:1rem;padding:1.125rem}
  .card-icon{width:3.5rem;height:3.5rem}
}