/* ==========================================================================
   Plansyx landing page
   Implemented from the Claude Design canvas "Plansyx Landing.dc.html".
   ========================================================================== */

:root {
  /* Surfaces */
  --paper:        #E4EADC;
  --card:         #F7F9F4;
  --ink:          #0F1F1B;
  --panel:        #16281F;

  /* Lines */
  --rule:         #C3CFB8;
  --rule-soft:    #DDE5D3;
  --card-border:  #CFDAC5;
  --panel-border: #244034;
  --panel-rule:   #3A5548;

  /* Type on light */
  --text:         #0F1F1B;
  --text-strong:  #26382A;
  --text-muted:   #44553D;
  --label:        #5E7554;

  /* Type on dark */
  --cream:        #EEF2EA;
  --cream-muted:  #B9C6B2;
  --cream-dim:    #8FA487;
  --cream-faint:  #7C9273;

  /* Accent */
  --lime:         #A9EE5C;
  --lime-deep:    #8CCB4B;
  --moss:         #4C6B3C;

  /* Type stacks */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'DM Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Layout */
  --shell: 1320px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Anchor jumps must land below the sticky header. */
[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--text);
  background: var(--paper);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--moss); }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 3px;
}

img, svg { display: block; max-width: 100%; }

.shell { max-width: var(--shell); margin: 0 auto; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lime);
  color: var(--ink);
  padding: 12px 18px;
  font-family: var(--mono);
  font-size: 12px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Shared type primitives
   -------------------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 18px;
}
.eyebrow--accent { color: var(--lime); }

.micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.micro--label  { letter-spacing: 0.12em; color: var(--label); }
.micro--accent { color: var(--lime); }
.micro--faint  { color: var(--cream-faint); }

.h2 {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
}
.h2--sm { font-size: 40px; line-height: 1.08; }

.lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.lede--dark { color: var(--cream-muted); }

/* Section head: heading left, supporting paragraph right */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}
.section-head--ruled {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 30px;
  margin-bottom: 34px;
}

.section { padding: 96px 20px; }
.section--dark { background: var(--ink); color: var(--cream); }
.section--flush-top { padding-top: 0; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 6px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: var(--lime-deep); color: var(--ink); }

.btn--ghost { border: 1px solid var(--panel-rule); color: var(--cream); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }

.btn--lg { font-size: 11px; letter-spacing: 0.1em; padding: 14px 22px; }
.btn--sm { font-size: 10px; letter-spacing: 0.1em; padding: 10px 14px; border-radius: 5px; }

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--ink);
  color: var(--cream);
  padding: 0 20px;
  overflow: hidden;
}
.hero > .shell { position: relative; z-index: 1; }

/* Faint instrument grid + ambient glow behind the hero. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(238, 242, 234, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238, 242, 234, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 72%);
  pointer-events: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease;
}
.site-header.is-stuck {
  background: rgba(15, 31, 27, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(238, 242, 234, 0.09);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.9);
}

/* Scroll position rail, pinned above the header. */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: transparent;
}
.scroll-rail__fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--moss), var(--lime));
  box-shadow: 0 0 12px rgba(169, 238, 92, 0.5);
  transform-origin: left center;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 4px;
  transition: padding 300ms ease;
}
.site-header.is-stuck .nav { padding: 9px 4px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand__name {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--cream);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 14px;
}
.nav__links a {
  position: relative;
  color: var(--cream-muted);
  transition: color 200ms ease;
}
.nav__links a:hover { color: var(--lime); }
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.nav__links a.is-active { color: var(--cream); }
.nav__links a.is-active::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__signin { font-size: 13px; color: var(--cream-muted); }
.nav__signin:hover { color: var(--lime); }

.nav__links-signin { display: none; }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--panel-rule);
  border-radius: 6px;
  padding: 9px 10px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--cream);
}
.nav__toggle span + span { margin-top: 4px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__head {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 4px 34px;
}
.hero__headline {
  font-family: var(--display);
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
.hero__title-col { max-width: 760px; }
.hero__sub {
  max-width: 390px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cream-muted);
  margin: 0 0 8px;
}

.hero__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px;
  height: 300px;
  margin-bottom: 8px;
}

/* Imagery tiles. The hatch stays as the backdrop while media loads. */
.plate {
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: repeating-linear-gradient(135deg, #1B322B 0 8px, #16281F 8px 16px);
}
.plate--light {
  background: repeating-linear-gradient(135deg, #D3DEC8 0 8px, #CAD6BE 8px 16px);
}
.plate--light .micro { color: var(--label); }

.plate--media { margin: 0; }
.plate__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sits the imagery back a touch so the lime signal card stays the loudest
     thing in the hero. Relative colour relationships are untouched. */
  filter: saturate(0.94) brightness(0.94);
}
.plate--light .plate__media { filter: saturate(0.96); }

/* Captions sit over live imagery, so they override the muted label colour
   and lean on the scrim below rather than on the plate background. */
.plate__cap {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(238, 242, 234, 0.94);
  text-shadow: 0 1px 4px rgba(15, 31, 27, 0.9);
}
.plate--light .plate__cap {
  color: var(--ink);
  text-shadow: 0 1px 4px rgba(247, 249, 244, 0.9);
}

/* Scrim so the caption stays legible over any part of the raster. */
.plate--media::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(15, 31, 27, 0.9) 0%, rgba(15, 31, 27, 0.45) 22%, transparent 48%);
  pointer-events: none;
}
.plate--light.plate--media::before {
  background: linear-gradient(to top, rgba(228, 234, 220, 0.92) 0%, rgba(228, 234, 220, 0.5) 22%, transparent 48%);
}

/* The drought animation carries its own month label, burned into the bottom
   right of every frame at 84-92% across. The scrim's job is to keep OUR caption
   legible on the bottom left, and at 0.92 opacity down there it was ghosting
   that label almost to nothing. Masking the scrim to fade out by 80% keeps the
   full wash under the caption and leaves the label untouched.

   Masked rather than removed: the caption currently sits over blank map margin
   in all twelve months, but a future year's data could put colour under it, and
   the scrim is the only thing guaranteeing that stays readable. */
.plate--own-label.plate--media::before {
  -webkit-mask-image: linear-gradient(to right, #000 0 62%, transparent 80%);
  mask-image: linear-gradient(to right, #000 0 62%, transparent 80%);
}

.hero__mosaic .plate:nth-child(1) { grid-column: span 5; }
.hero__mosaic .plate:nth-child(2) { grid-column: span 3; }

/* The signal card carries a live fire/dryness map behind its own copy. The
   lime stays as the backdrop, so it is what shows while the raster loads and
   what the accent reads as if the image never arrives. */
.hero__signal {
  position: relative;
  overflow: hidden;
  grid-column: span 4;
  background: var(--lime);
  border-radius: 6px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--ink);
}
/* Absolute, so it drops out of the column flow instead of becoming a third
   flex item and pulling the label off the top edge. */
.hero__signal picture { position: absolute; inset: 0; z-index: 0; }

/* Cream rather than lime, because a lime wash would remap a data palette:
   the map has to keep meaning what its producer says it means. Weighted to
   the foot of the card, where the figure and the note sit. */
.hero__signal::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(232, 238, 224, 0.95) 0%,
    rgba(232, 238, 224, 0.78) 26%,
    rgba(232, 238, 224, 0) 56%
  );
  pointer-events: none;
}
.hero__signal > *:not(picture) { position: relative; z-index: 2; }
/* The knock-back on .plate__media exists to keep the two plates recessive
   behind this card. The card is a raster itself now, and its fire detections
   are small red crosses that cannot afford to be dimmed. */
.hero__signal .plate__media { filter: none; }

/* The lime survives as a chip once the raster covers the card. */
.hero__signal-tag {
  align-self: flex-start;
  background: var(--lime);
  border-radius: 3px;
  padding: 4px 8px;
}
.hero__signal-figure {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__signal-note { font-size: 13px; margin-top: 6px; line-height: 1.4; }
.hero__signal-source { margin: 10px 0 0; color: var(--label); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 20px;
  margin: 0;
}
.stat {
  flex: 1 1 220px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 20px 22px;
}
.stat__value {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.03em;
  color: var(--cream);
  margin: 0;
}
.stat__label {
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream-dim);
  margin: 6px 0 0;
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */

.grid { display: grid; gap: 12px; }
.grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--280 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid--200 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
/* The prediction-chain stages and the module row beneath them are one mapping:
   module N implements stage N. Both rows are pinned to five columns rather than
   left to auto-fit, which sizes them differently. Auto-fit collapses the spare
   track on the five-item stage row but not on the six-item module row, so the
   two rows would come out different widths and the columns would not line up. */
.grid--chain { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.grid--tight { gap: 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.card--dark {
  background: var(--panel);
  border-color: var(--panel-border);
  color: var(--cream);
}
.card--outline {
  background: none;
  border: 1px solid var(--panel-border);
  padding: 20px 22px;
  gap: 8px;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card__title {
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}
.card__body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

.status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 4px;
  background: var(--paper);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Hazard cards */
.hazard { min-height: 340px; }
.hazard__points {
  margin: auto 0 0;
  padding: 16px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--rule-soft);
}
.hazard__points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-strong);
}
.hazard__points li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lime-deep);
  margin-top: 6px;
  flex: none;
}

/* Prediction chain */
.chain-step {
  min-height: 200px;
  padding: 22px;
  gap: 12px;
}
.chain-step__name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.chain-step__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: auto 0 0;
}

/* Platform modules */
.module__name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0;
}
.module__body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cream-dim);
  margin: 0;
}
/* Plansyx API is not a sixth stage. It is how the five above are delivered, so
   it spans the row instead of sitting in a column of its own. */
.module--span { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Area of business: fields of practice + service list
   -------------------------------------------------------------------------- */

.fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
}
.field {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 9px 13px;
}

/* Spec-sheet rhythm rather than another card grid, because this section is a
   statement of scope, not a set of products. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  column-gap: 32px;
}
.capability {
  border-top: 1px solid var(--rule);
  padding: 18px 0 22px;
}
.capability__name {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 500;
  /* No top margin: the numbered "Service 0X" label that used to sit above this
     is gone, so the rule's own padding sets the gap. */
  margin: 0 0 7px;
}
.capability__body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 34ch;
}

/* --------------------------------------------------------------------------
   Data spine
   -------------------------------------------------------------------------- */

.data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 48px;
  align-items: start;
}
.data__lede { max-width: 520px; margin: 0 0 28px; line-height: 1.65; }
.data .h2 { margin: 0 0 20px; }

.data__table {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.data__row {
  display: flex;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.data__layer {
  flex: 0 0 150px;
  font-size: 14.5px;
  font-weight: 500;
  margin: 0;
}
.data__inputs {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.data__viz { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.data__viz .plate--light { grid-column: span 2; height: 230px; border-radius: 8px; }

.metric {
  border-radius: 8px;
  padding: 22px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric--dark { background: var(--ink); color: var(--cream); }
.metric--lime { background: var(--lime); color: var(--ink); }
.metric__figure {
  font-family: var(--display);
  font-size: 34px;
  letter-spacing: -0.03em;
}
.metric__note { font-size: 13px; line-height: 1.45; margin: 6px 0 0; }
.metric--dark .metric__note { color: var(--cream-dim); }

/* A bare 0.087 tells a reader nothing without its range, so the figure carries
   a track showing where it sits between no impact and total loss. */
.metric__scale { margin: 10px 0 0; display: block; }
.metric__scale-track {
  display: block;
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: rgba(238, 242, 234, 0.18);
}
.metric__scale-mark {
  position: absolute;
  top: -3px;
  width: 3px;
  height: 9px;
  border-radius: 1px;
  background: var(--lime);
}
.metric__scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--label);
}

/* --------------------------------------------------------------------------
   Customers · packages · trust
   -------------------------------------------------------------------------- */

.customer { min-height: 250px; padding: 24px; gap: 12px; }
.customer__name {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.customer__decision { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }
.customer__value {
  margin: auto 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-strong);
}

.package { min-height: 280px; gap: 14px; }
.package__name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.package__price {
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.03em;
  margin: 0;
}
/* A phrase, not a figure: 30px display type is sized for "$50k-$90k" and a
   three-word line at that size dominates the card. */
.package__price--text {
  font-size: 21px;
  letter-spacing: -0.02em;
  color: var(--cream);
}
.package__body { font-size: 14px; line-height: 1.55; color: var(--cream-dim); margin: 0; }
.package .btn { margin-top: auto; align-self: flex-start; }
.package__note {
  margin: 18px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cream-dim);
}

.trust { min-height: 190px; padding: 24px; gap: 10px; }
.trust__name {
  font-family: var(--display);
  font-size: 20px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.trust__body { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin: 0; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 900px; margin: 0 auto; }
.faq__title {
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0 0 28px;
  text-align: center;
}

.faq__item {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card);
  margin-bottom: 8px;
  overflow: hidden;
}
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding: 20px 22px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.faq__sign {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--label);
  flex: none;
}
.faq__a { padding: 0 22px 20px; }
.faq__a p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
  max-width: 660px;
}
.faq__item[data-open='false'] .faq__a { display: none; }

/* --------------------------------------------------------------------------
   CTA + footer
   -------------------------------------------------------------------------- */

.cta { padding: 0 20px 20px; }
.cta__panel {
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--ink);
  border-radius: 14px;
  padding: 74px 48px;
  color: var(--cream);
}
.cta__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.cta__title {
  font-family: var(--display);
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
}
.cta__sub {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cream-muted);
  margin: 0;
  max-width: 520px;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.footer { padding: 44px 20px 34px; }
.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}
/* 260px was sized for the old one-line tagline. The tagline now names all five
   practice areas and runs about 195 characters, which wrapped to five lines in a
   narrow column while most of the footer sat empty. 660px lands it on two lines
   and still leaves the nav columns their own space at the far right. */
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 660px;
}
.footer__brand .brand__name { color: var(--text); font-size: 17px; }
.footer__tagline { font-size: 13px; color: var(--text-muted); line-height: 1.5; }
/* Each practice area is held on one line so a wrap lands on a separator rather
   than mid-phrase ("... & AI · natural / hazard & catastrophe risk analytics").
   Released at the phone breakpoint below, where the longest of them is wider
   than the column and has to be allowed to break. */
.footer__tagline > span { white-space: nowrap; }
/* Held narrower than the block above it: the ESDIS credit is the quietest thing
   in the footer and should not run the full measure of the tagline. */
.footer__credit {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--label);
  max-width: 470px;
}

.footer__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  font-size: 13px;
  color: var(--text-muted);
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}
.footer__col a { color: var(--text-muted); }
.footer__col a:hover { color: var(--moss); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  /* Five across stops being readable here; the stage name printed on each
     module card carries the mapping once the columns can no longer. */
  .grid--chain { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .hero__headline { font-size: 54px; }
  .h2 { font-size: 38px; }
  .h2--sm { font-size: 34px; }
  .cta__title { font-size: 38px; }
}

@media (max-width: 900px) {
  /* Top row stays brand + demo CTA + toggle; the section links and the
     secondary sign-in drop into the disclosure panel below. */
  .nav { flex-wrap: wrap; gap: 12px; }
  .nav__toggle { display: block; order: 3; }
  .nav__actions { order: 2; margin-left: auto; }
  .nav__signin { display: none; }
  .nav__links-signin { display: block; }
  .nav__links {
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 6px 0 10px;
  }
  .nav[data-open='false'] .nav__links { display: none; }

  .hero__mosaic { height: auto; grid-template-columns: 1fr; }
  .hero__mosaic .plate:nth-child(1),
  .hero__mosaic .plate:nth-child(2) { grid-column: span 1; }
  /* Stacked full-width at a fixed 160px, these plates get much wider than 1.82:1
     and object-fit crops the difference off the top and bottom. That is fine for
     the satellite photo, but the wide plate carries a map of the country: a
     clipped northern border and a missing Gulf coast read as a broken image, not
     a crop. Matching the plate to the asset's own ratio means nothing is cut at
     any width. */
  .hero__mosaic .plate:nth-child(1) { height: auto; aspect-ratio: 728 / 400; }
  .hero__mosaic .plate:nth-child(2) { height: 160px; }
  /* Stacked, the card sizes to its copy: enough for a flat lime block, too
     short to read a map in. */
  .hero__signal { grid-column: span 1; min-height: 200px; }

  .data { grid-template-columns: 1fr; gap: 36px; }
  .cta__panel { padding: 56px 28px; }
}

@media (max-width: 620px) {
  /* Headings reflow as one paragraph rather than keeping the desktop line
     breaks, so the masked line reveal steps aside here. */
  .js .line {
    display: inline;
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .js .line__i {
    display: inline;
    transform: none !important;
    transition: none !important;
  }

  .grid--chain { grid-template-columns: minmax(0, 1fr); }

  .section { padding: 64px 20px; }
  .section--flush-top { padding-top: 0; }

  .hero__headline { font-size: 40px; }
  .hero__headline br,
  .h2 br,
  .cta__title br { display: none; }

  .h2, .h2--sm { font-size: 30px; }
  .cta__title { font-size: 30px; }
  .faq__title { font-size: 26px; }

  .data__viz { grid-template-columns: 1fr; }
  .data__viz .plate--light { grid-column: span 1; height: 180px; }
  .data__row { flex-direction: column; gap: 6px; }
  .data__layer { flex: none; }

  .capabilities { grid-template-columns: 1fr; }
  .capability__body { max-width: none; }
  .footer__tagline > span { white-space: normal; }
  .footer__cols { gap: 32px; }
  .card, .customer, .trust { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ==========================================================================
   Motion layer
   Everything here is gated on `html.js`, so the page renders complete with
   scripting off, and is switched off wholesale under prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-dur: 760ms;
}

/* -- Reveal on scroll ---------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Mono labels resolve from a character scramble, so they must not slide. */
.js [data-reveal='label'] { transform: none; }

/* Group containers stay put; their children carry the motion. */
.js [data-reveal='group'] {
  opacity: 1;
  transform: none;
  transition: none;
}
.js [data-reveal='group'] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--reveal-dur) var(--ease-out),
    transform var(--reveal-dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal='group'].is-in > * {
  opacity: 1;
  transform: none;
}

/* -- Masked line reveal for headings -------------------------------------- */

.js [data-reveal='lines'] { transform: none; }
.js [data-reveal='lines'].is-in { opacity: 1; }

.line {
  display: block;
  overflow: hidden;
  /* Descenders would otherwise be clipped by the mask. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.line__i {
  display: block;
  transform: translateY(110%);
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal='lines'].is-in .line__i { transform: none; }

/* -- Count-up figures ----------------------------------------------------- */

[data-count] { font-variant-numeric: tabular-nums; }

/* -- Prediction chain: each step fills like a progress bar ---------------- */

.chain .chain-step { position: relative; overflow: hidden; }
.chain .chain-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lime), rgba(169, 238, 92, 0.15));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 120ms + 180ms);
}
.js .chain.is-in .chain-step::before { transform: scaleX(1); }
.js .chain:not(.is-in) .chain-step::before { transform: scaleX(0); }

/* -- Ambient glow in the dark sections ------------------------------------ */

.section--dark,
.cta__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.section--dark > .shell,
.cta__panel > .cta__inner { position: relative; z-index: 1; }

.hero::after,
.section--dark::before,
.cta__panel::before {
  content: '';
  position: absolute;
  inset: -30% -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 18% 8%, rgba(169, 238, 92, 0.10), transparent 62%),
    radial-gradient(46% 52% at 88% 96%, rgba(169, 238, 92, 0.055), transparent 62%);
  animation: drift 22s ease-in-out infinite alternate;
}
.hero::after { inset: -20% -10% 20%; }

@keyframes drift {
  from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
  to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.06); }
}

/* -- Data plates read as a live acquisition ------------------------------- */

.plate { position: relative; overflow: hidden; }
/* Children carry their own stacking (media 0, scrim/sweep 1, caption 2); see
   the .plate--media rules above, and do not flatten them to a single layer. */
.plate > .plate__cap { position: relative; z-index: 2; }
.js .plate.is-in::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(169, 238, 92, 0.13) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: sweep 5.5s cubic-bezier(0.5, 0, 0.3, 1) 600ms infinite;
}
.js .plate--light.is-in::after {
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(76, 107, 60, 0.16) 50%,
    transparent 65%
  );
}

@keyframes sweep {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* -- Hover affordances ---------------------------------------------------- */

.card {
  transition:
    transform 320ms var(--ease-out),
    border-color 320ms ease,
    box-shadow 320ms var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--lime-deep);
  box-shadow: 0 18px 34px -26px rgba(15, 31, 27, 0.55);
}
.card--dark:hover,
.card--outline:hover {
  border-color: rgba(169, 238, 92, 0.42);
  box-shadow: 0 18px 34px -24px rgba(0, 0, 0, 0.8);
}

.faq__item { transition: border-color 260ms ease, background-color 260ms ease; }
.faq__item:hover { border-color: var(--lime-deep); }
.faq__a p {
  animation: answer-in 420ms var(--ease-out) both;
}
@keyframes answer-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.btn--lime:hover { transform: translateY(-1px); }
.btn { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); }

.capability { transition: border-color 280ms ease; }
.capability:hover { border-color: var(--lime-deep); }

/* -- Hero parallax (desktop only; JS writes the custom property) ---------- */

@media (min-width: 900px) {
  .js .hero__mosaic { will-change: transform; transform: translate3d(0, var(--parallax, 0px), 0); }
}

/* -- Reduced motion: hand back a completely static page ------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal] > *,
  .js [data-reveal='group'] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .line__i { transform: none !important; transition: none !important; }
  .js .chain .chain-step::before { transform: scaleX(1) !important; transition: none !important; }
  .hero::after,
  .section--dark::before,
  .cta__panel::before,
  .js .plate.is-in::after { animation: none !important; }
  .js .plate.is-in::after { content: none; }
  .card:hover, .btn--lime:hover { transform: none; }
  .js .hero__mosaic { transform: none !important; }
  .faq__a p { animation: none !important; }
}

/* ==========================================================================
   Document pages (Privacy, Terms, Intended use)
   Same chrome and motion as the landing page, with a reading layout: a sticky
   contents rail beside a single measured column of prose.
   ========================================================================== */

.doc-head { padding: 52px 20px 58px; }
.doc-head .eyebrow { margin-bottom: 16px; }

.doc-title {
  font-family: var(--display);
  font-size: 52px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
  max-width: 820px;
}
.doc-standfirst {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cream-muted);
  margin: 22px 0 0;
  max-width: 620px;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 30px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--panel-border);
  list-style: none;
}
.doc-meta div { display: flex; flex-direction: column; gap: 5px; }
.doc-meta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.doc-meta dd { font-size: 13.5px; color: var(--cream-muted); margin: 0; }

/* -- Layout ---------------------------------------------------------------- */

.doc {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 20px 96px;
}

.doc-toc { position: sticky; top: 104px; }
.doc-toc__title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 14px;
}
.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  border-top: 1px solid var(--rule);
}
.doc-toc li { counter-increment: toc; border-bottom: 1px solid var(--rule); }
.doc-toc a {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color 160ms ease;
}
.doc-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--label);
  padding-top: 3px;
  flex: none;
}
.doc-toc a:hover { color: var(--moss); }

/* -- Prose ----------------------------------------------------------------- */

.prose { max-width: 700px; }
.prose > *:first-child { margin-top: 0; }
.prose > section:first-child > h2 { margin-top: 0; padding-top: 0; border-top: 0; }

.prose h2 {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 52px 0 16px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.prose h3 {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
  margin: 30px 0 10px;
}

.prose p,
.prose li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.prose strong { color: var(--text); font-weight: 500; }
.prose a {
  color: var(--moss);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--ink); }

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prose ol { counter-reset: item; }
.prose li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--lime-deep);
}
.prose ol > li { counter-increment: item; }
.prose ol > li::before {
  content: counter(item) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--label);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
  font-size: 14px;
}
.prose th, .prose td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.55;
  color: var(--text-muted);
}
.prose th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  border-bottom-color: var(--text-muted);
  font-weight: 400;
}

/* Callout for the statements that carry the most weight. */
.doc-note {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--lime-deep);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0 0 22px;
}
.doc-note > *:last-child { margin-bottom: 0; }
.doc-note__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  display: block;
  margin-bottom: 8px;
}

/* Facts only Plansyx can supply. Deliberately conspicuous so no placeholder
   reaches production unnoticed. */
.todo {
  background: rgba(169, 238, 92, 0.3);
  border-bottom: 1px dashed var(--moss);
  padding: 0 3px;
  font-style: normal;
  color: var(--ink);
  cursor: help;
}

/* -- Cross-links between the three documents -------------------------------- */

.doc-next { padding: 0 20px 90px; }
.doc-next__inner {
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  padding-top: 30px;
}
.doc-next__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
.doc-next__card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 320ms var(--ease-out), border-color 320ms ease;
}
.doc-next__card:hover { transform: translateY(-3px); border-color: var(--lime-deep); }
.doc-next__card[aria-current='page'] {
  background: none;
  border-style: dashed;
  opacity: 0.55;
  pointer-events: none;
}
.doc-next__name {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.doc-next__body { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* -- Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .doc-title { font-size: 42px; }
}

@media (max-width: 900px) {
  .doc {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-top: 48px;
  }
  /* The rail becomes a plain index above the text rather than a floating one. */
  .doc-toc { position: static; }
  .doc-toc ol { columns: 2; column-gap: 28px; }
  .doc-toc li { break-inside: avoid; }
}

@media (max-width: 620px) {
  .doc-head { padding: 38px 20px 44px; }
  .doc-title { font-size: 32px; }
  .doc-standfirst { font-size: 15px; }
  .doc-toc ol { columns: 1; }
  .prose h2 { font-size: 22px; margin-top: 40px; }
  .doc { padding-bottom: 64px; }
  .doc-next { padding-bottom: 64px; }
}

/* The landing page marks the section you are in; the contents rail does the
   same, driven by the same observer in main.js. */
.doc-toc a.is-active { color: var(--ink); }
.doc-toc a.is-active::before { color: var(--moss); }