/* The editorial layer: the devices Rex and RealPact carry their pages with.
   docs/LANDING-DESIGN-LANGUAGE.md §9.

   Three things separate those pages from a dense feature page, and all three
   are here: the subhead sits *beside* the headline rather than under it, the
   bands are enormous relative to the words in them, and every statement is a
   serif sentence whose continuation drops to a muted tone. */

/* ═══════════════════════════════════════════ two-tone serif statement ═══ */

/* Rex writes "Order to cash still runs on manual work." in near-black and
   "Execution is slow, context is fragmented…" in warm grey, same size, same
   line. The drop in tone does the work a smaller subhead would do, without
   breaking the typographic block. */
.say {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.875rem);
  line-height: 1.16;
  letter-spacing: -0.021em;
  color: var(--fg);
  text-wrap: pretty;
  max-width: 22ch;
}

.say--wide { max-width: 30ch; }

/* The continuation. Not a separate element in the reading order — the same
   sentence, carried on. */
.say i {
  font-style: normal;
  color: var(--fg-3);
}

.say--lg {
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  letter-spacing: -0.025em;
}

/* ═══════════════════════════════════════════════════ band breathing ═══ */

/* Rex's problem band is ~980px tall and holds three lines. That ratio is the
   whole difference between "editorial" and "feature page". */
.band--air {
  padding-block: clamp(56px, 7vw, 96px);
}

.band--air-lg {
  padding-block: clamp(64px, 8vw, 112px);
}

/* For bands that carry a visual and a list rather than one sentence. A touch
   airier than the first build — the cool/minimal reference sites give each
   feature block noticeably more room than a dense feature page does. */
.band--feat {
  padding-block: clamp(38px, 4.6vw, 68px);
}

/* Hairline with dot terminators, full measure. Rex sets one above and below
   every band so the page reads as ruled paper. */
.hr-dot {
  display: block;
  position: relative;
  height: 1px;
  background: var(--line);
}

/* No terminator dots: at this scale they read as specks of dirt rather than
   as a drawn rule. */

/* ══════════════════════════════════════════════════════ split hero ═══ */

/* RealPact and Rex both hang the subhead to the right of the headline at the
   same vertical position, rather than stacking it. It is the single most
   recognisable thing about either page. */
.hero2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

@media (min-width: 900px) {
  .hero2 {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(32px, 5vw, 96px);
    align-items: end;
  }
}

.hero2__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.hero2__h i {
  font-style: normal;
  color: var(--fg-3);
}

.hero2__sub {
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  line-height: 1.5;
  color: var(--fg);
  margin: 0;
  max-width: 42ch;
}

.hero2__sub i {
  font-style: normal;
  color: var(--fg-3);
}

/* ═══════════════════════════════════════════════════ sky backdrop ═══ */

/* RealPact floats its product shot on a painting; Rex floats its on a
   photograph. Neither is licensable here, so this is built: a deep
   instrument-panel field with a single horizon-teal aurora rising off the
   top-right, so the dark console reads as glowing rather than pasted on. The
   warm dusk gradient this replaced measured muddy — teal into tan into cream is
   three hues fighting; one hue with depth reads as expensive. */
.sky {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  /* Generous, because the field is doing the same job the photograph does on
     Rex: if the frame covers it, there is no atmosphere left to see. */
  padding: clamp(28px, 6vw, 96px);
  padding-bottom: 0;
  background:
    radial-gradient(72% 60% at 82% -12%, rgba(94, 154, 160, 0.32) 0%, rgba(94, 154, 160, 0) 58%),
    radial-gradient(64% 62% at 4% 112%, rgba(30, 74, 80, 0.34) 0%, rgba(30, 74, 80, 0) 60%),
    linear-gradient(168deg, #0e171a 0%, #0a1012 46%, #080c0d 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 40px 90px -30px rgba(0, 0, 0, 0.55);
}

/* A faint grid, the way an instrument bezel is machined — subliminal, not a
   texture you notice. Replaces the dusk haze banding. */
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 78%);
}

.sky > * { position: relative; }

/* The hero console glows on the dark field: a hairline teal ring plus a soft
   teal aura, over the depth shadow. Reads as a live instrument, not a pasted
   screenshot — the single most "AI product" detail above the fold. */
.sky .frame--lift {
  box-shadow:
    0 0 0 1px rgba(94, 154, 160, 0.12),
    0 2px 10px rgba(0, 0, 0, 0.45),
    0 44px 96px -32px rgba(0, 0, 0, 0.62),
    0 0 90px -24px rgba(94, 154, 160, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .sky .frame--lift { transition: box-shadow 400ms var(--ease-out); }
}

/* ═════════════════════════════════════════════════════ cost model ═══ */

.calc {
  display: grid;
  gap: clamp(26px, 4vw, 56px);
  align-items: start;
}

@media (min-width: 900px) {
  .calc {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
}

.calc__controls {
  display: grid;
  gap: 24px;
}

.calc__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.calc__name {
  font-size: 0.9375rem;
  color: var(--fg-2);
}

.calc__val {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.calc input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: ew-resize;
}

.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}

.calc input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: var(--line-strong);
}

.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(14, 22, 29, 0.3);
}

.calc input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}

.calc input[type="range"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.calc__out {
  border-left: 2px solid var(--accent);
  padding-left: clamp(20px, 3vw, 34px);
}

.calc__big {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 5.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.calc__cap {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-top: 16px;
}

.calc__note {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  margin-top: 7px;
}

.calc__break {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
}

.calc__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.875rem;
  color: var(--fg-2);
}

.calc__line b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════ chip row ═══ */

/* Rex names the things being replaced as flat grey chips — "Inboxes, Legacy
   systems, Offshore teams, Excel sheets". Naming them is what makes the
   problem land; a reader recognises their own desk. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--fg-3);
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════ outcome trio ═══ */

.outs {
  display: grid;
  gap: clamp(44px, 6vw, 76px);
}

@media (min-width: 900px) {
  .outs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.out__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 20px;
}

.out__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.1vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: pretty;
}

.out__p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fg-2);
  margin-top: 14px;
  max-width: 36ch;
}

/* The consequence line on a problem card. The card says what breaks; this
   says what it costs, which is the part an owner is actually buying against. */
.card__cost {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg);
}

/* ══════════════════════════════════════════════════════ feature band ═══ */

/* Zaplar's four feature sections are 536px each and identical in shape:
   mono eyebrow, short heading, one line, one visual. Repeating one shape at
   one height is what makes that page feel composed rather than assembled. */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 64px);
  align-items: center;
}

@media (min-width: 940px) {
  .feat {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(44px, 6vw, 96px);
    /* Zaplar runs its four feature sections at an identical height. Equalising
       here rather than on the frame keeps every band the same without
       stretching a short mock into empty space. */
    min-height: 420px;
  }

  /* Alternate the side the visual sits on so the eye has somewhere to go.
     The tracks have to swap with it: `order` fills grid columns in visual
     order, so without this the visual lands in the narrow column. */
  .feat--flip { grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr); }
  .feat--flip .feat__copy { order: 2; }
  .feat--flip .feat__vis { order: 1; }
}

.feat__k {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

.feat__h {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  line-height: 1.13;
  letter-spacing: -0.022em;
  color: var(--fg);
  margin-top: 20px;
  text-wrap: pretty;
}

.feat__p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--fg-2);
  margin-top: 18px;
  max-width: 44ch;
}

.feat__list {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.feat__list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--fg-2);
}

.feat__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.feat__vis { min-width: 0; }

/* The mock is shown, not hidden behind a disclosure. Tall ones crop with a
   fade; short ones stay their natural height and sit centred, because pinning
   every frame leaves dead space inside the short ones. The band is equalised
   instead — see .feat min-height. */
.feat__vis .frame {
  max-height: 400px;
  overflow: hidden;
  position: relative;
  /* A mask rather than a ::after overlay: .frame already carries loop-sweep's
     ::after for the specular pass, and the two collide on the same element. */
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
}

/* ══════════════════════════════════════════════════ everything else ═══ */

.more {
  display: grid;
  gap: clamp(26px, 3.4vw, 44px);
}

@media (min-width: 700px) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .more { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.more__h {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: 9px;
}

.more__h::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.more__p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--fg-3);
  margin-top: 9px;
  padding-left: 14px;
}

/* ════════════════════════════════════════════════════════════ mobile ═══ */

/* Touch targets. A 24px slider and a 19px footer link are fine with a mouse
   and unusable with a thumb; 44px is the floor on a coarse pointer. */
@media (pointer: coarse) {
  .calc input[type="range"],
  .policy input[type="range"] {
    height: 44px;
  }

  .calc input[type="range"]::-webkit-slider-thumb { margin-top: -16px; }
  .policy input[type="range"]::-webkit-slider-thumb { margin-top: -15.5px; }

  .footer__col li a,
  .footer__base a {
    display: inline-block;
    padding-block: 9px;
  }

  /* The reservation rows in the demo are the primary control on mobile. */
  .res { min-height: 56px; }

  /* The nav's small button is the one CTA visible on every screen. */
  .btn--sm { min-height: 44px; }

  .wordmark { min-height: 44px; }
}

/* Stacked, every band's padding is paid twice over — once above the copy and
   once above the visual. Tighten the whole rhythm rather than any one band. */
@media (max-width: 700px) {
  .band--air { padding-block: clamp(40px, 9vw, 56px); }
  .band--feat { padding-block: clamp(26px, 6vw, 36px); }
  .feat { gap: 24px; }
  .calc { gap: 28px; }
  .outs { gap: 34px; }
  .more { gap: 26px; }

  /* A left rule plus indent costs 34px of a 350px column for no information. */
  .calc__out {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 24px;
  }

  .hero2 { gap: 20px; }
}