/* ══════════════════════════════════════════════════════════════
   TREOS page (F1)

   Loaded after home.css, which this page reuses for the header, footer,
   .compare table, .btn set and the .treos__frame dashboard mock. Only the
   page-specific sections live here.

   Content source: TREOS.docx supplied by the client, 2026-07-23. There are
   no product screenshots — see the PENDING ASSET note in the markup.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────  HERO  ───────────────── */
.treos-hero {
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--paper);
  padding: calc(var(--s-10) + 64px) 0 var(--s-10);
  overflow: hidden;
}
/* A faint engineering grid — this is a product page, so the texture should
   read as system rather than as photography. */
.treos-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(250, 250, 249, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250, 250, 249, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
.treos-hero__inner { position: relative; max-width: 62ch; }
.treos-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: var(--s-4) 0 var(--s-5);
}
.treos-hero__title em { font-style: italic; color: var(--gold-soft); }
.treos-hero__lede {
  font-size: clamp(1.02rem, 0.94rem + 0.4vw, 1.2rem);
  line-height: 1.7;
  font-weight: 300;
  color: rgba(250, 250, 249, 0.78);
  margin: 0 0 var(--s-7);
}
.treos-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

/* ─────────────────  WHY  ───────────────── */
.treos-why {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  z-index: 1;
}
.treos-why__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}
.treos-why__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-5);
  color: var(--ink);
}
.treos-why__title em { font-style: italic; color: var(--gold); }
.treos-why__body {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  line-height: 1.72;
  font-weight: 300;
  color: var(--mute);
  margin: 0 0 var(--s-4);
  max-width: 62ch;
}
.treos-why__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: flex-start;
}
.treos-why__pills li {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px 7px;
}

@media (max-width: 900px) {
  .treos-why__split { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ─────────────────  FLOW  ───────────────── */
.treos-flow {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  z-index: 1;
}
.treos-flow__head { max-width: 58ch; margin-bottom: var(--s-8); }
.treos-flow__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--paper);
}
.treos-flow__lede {
  font-size: 1.02rem;
  line-height: 1.68;
  font-weight: 300;
  color: rgba(250, 250, 249, 0.7);
  margin: 0;
}
.treos-flow__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.treos-flow__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) 0 0;
  border-top: 1px solid rgba(250, 250, 249, 0.18);
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 300;
  color: var(--paper);
}
/* The chain: an arrow between consecutive steps on the same row. Suppressed
   at the end of each row and on the last item, so it never points at nothing. */
.treos-flow__step::after {
  content: "→";
  position: absolute;
  top: calc(var(--s-5) + 2px);
  right: calc(var(--s-5) * -0.62);
  color: var(--gold);
  font-size: 0.9rem;
  line-height: 1;
}
.treos-flow__step:nth-child(4n)::after,
.treos-flow__step:last-child::after { content: none; }
.treos-flow__i {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--gold);
}

@media (max-width: 1000px) {
  .treos-flow__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-5); }
  .treos-flow__step:nth-child(4n)::after { content: "→"; }
  .treos-flow__step:nth-child(2n)::after { content: none; }
  .treos-flow__step:last-child::after { content: none; }
}
@media (max-width: 560px) {
  .treos-flow__list { grid-template-columns: 1fr; }
  .treos-flow__step::after { content: none !important; }
}

/* ─────────────────  CORE MODULES  ───────────────── */
.treos-mods {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  z-index: 1;
}
.treos-mods__head { margin-bottom: var(--s-8); }
.treos-mods__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 0;
  color: var(--ink);
}
.treos-mods__title em { font-style: italic; color: var(--gold); }
.treos-mods__list { display: flex; flex-direction: column; }
.treos-mod {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  padding: var(--s-7) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.treos-mod__idx {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin: 0 0 var(--s-3);
}
.treos-mod__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.treos-mod__sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin: 0 0 var(--s-4);
}
.treos-mod__body {
  font-size: 1rem;
  line-height: 1.72;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
  max-width: 52ch;
}
/* Feature lists are long and flat; two columns keeps them scannable without
   turning into a wall. */
.treos-mod__feats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.treos-mod__feats li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink);
}
.treos-mod__feats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

@media (max-width: 900px) {
  .treos-mod { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 520px) {
  .treos-mod__feats { grid-template-columns: 1fr; }
}

/* ─────────────────  DASHBOARDS  ───────────────── */
.treos-dash {
  background: var(--paper-2, #f5f5f4);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.treos-dash__split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
.treos-dash__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 var(--s-4);
  color: var(--ink);
}
.treos-dash__body {
  font-size: 1rem;
  line-height: 1.72;
  font-weight: 300;
  color: var(--mute);
  margin: 0 0 var(--s-6);
  max-width: 50ch;
}
.treos-dash__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.treos-dash__tags li {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px 6px;
}
.treos-dash__media { margin: 0; }
.treos-dash__cap {
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--mute-2);
}

@media (max-width: 900px) {
  .treos-dash__split { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ─────────────────  BUSINESS BENEFITS  ───────────────── */
.treos-benefits {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  z-index: 1;
}
.treos-benefits__head { margin-bottom: var(--s-8); }
.treos-benefits__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--s-3) 0 0;
  color: var(--ink);
}
.treos-benefits__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.treos-benefit {
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.treos-benefit__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s-3);
}
.treos-benefit__body {
  font-size: 0.94rem;
  line-height: 1.65;
  font-weight: 300;
  color: var(--mute);
  margin: 0;
}

/* ─────────────────  CLOSING CTA  ───────────────── */
.treos-cta {
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-10) 0;
  position: relative;
  z-index: 1;
}
.treos-cta__inner { max-width: 68ch; }
.treos-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 var(--s-5);
}
.treos-cta__title em { font-style: italic; color: var(--gold-soft); }
.treos-cta__body {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.14rem);
  line-height: 1.72;
  font-weight: 300;
  color: rgba(250, 250, 249, 0.76);
  margin: 0 0 var(--s-7);
}
.treos-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

/* ─────────────────  SCROLL REVEAL  ─────────────────
   Same contract as css/home.css: hidden only when `.js` is present, and
   `.reveal-off` (set by the reveal.js failure path) kills the transition. */
.js :where(
  .treos-hero__inner > *,
  .treos-why__text > *,
  .treos-why__pills li,
  .treos-flow__head > *,
  .treos-flow__step,
  .treos-mods__head > *,
  .treos-mod,
  .treos-dash__text > *,
  .treos-dash__media,
  .treos-benefits__head > *,
  .treos-benefit,
  .treos-cta__inner > *
) {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--d-slow) var(--ease-emph),
    transform var(--d-slow) var(--ease-emph);
}
.js .is-revealed { opacity: 1; transform: none; }
.reveal-off :where(
  .treos-hero__inner > *,
  .treos-why__text > *,
  .treos-why__pills li,
  .treos-flow__head > *,
  .treos-flow__step,
  .treos-mods__head > *,
  .treos-mod,
  .treos-dash__text > *,
  .treos-dash__media,
  .treos-benefits__head > *,
  .treos-benefit,
  .treos-cta__inner > *
) {
  transition: none;
}