/* ============================================================================
   STRATYLIX — HOMEPAGE
   Homepage-only rules. Shared section patterns live in pages.css.
   ========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.sx-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Matches .sx-phero so the homepage and every inner page open at the same
     scale. See the note there on svh vs vh. */
  min-height: 78vh;
  min-height: min(78svh, 860px);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
  overflow: clip;
}
.sx-hero > .sx-container { width: 100%; }

/* Depth, not decoration. One soft radial wash centred behind the copy lifts
   the hero off the sections below it without touching the video or adding a
   single element to the DOM. Pure paint — no layout, no script, no asset. */
.sx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 18% 30%,
      color-mix(in srgb, var(--brand) 10%, transparent) 0%,
      transparent 62%);
}
/* Section transition: the hero fades into the surface beneath it instead of
   ending on an edge. A gradient, not an <hr>. */
.sx-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: clamp(3rem, 8vh, 6rem);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* Two named areas. The operations figure used to occupy a third and a second
   column; it now lives in the AI & Automation section, where its own core node
   ("AI & AUTOMATION") actually explains something rather than decorating.

   With the figure gone the hero is a single column, so the copy is held to a
   readable measure instead of being stretched across a 1440px viewport. */
.sx-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--sp-6);
  grid-template-areas:
    "head"
    "pitch";
}
.sx-hero__head  { grid-area: head; }
.sx-hero__pitch { grid-area: pitch; }

/* Hero eyebrow — a slim badge, not a button.
   Every colour here is an existing token: --brand is the site's cyan (#35D6EE
   dark, #0E93B4 light), --border-brand its 38% border, --glow-brand-soft the
   12% glow. No new cyan is introduced.
   It replaces a 1.75rem cyan rule that sat to the left of the text; the rule is
   gone rather than restyled, because the dot now carries that job. */
.sx-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  margin: 0;
  /* Slightly tighter on the left: the dot is optically smaller than a cap. */
  padding: 0.42em 0.95em 0.42em 0.8em;
  border: 1px solid var(--border-brand);
  border-radius: var(--r-pill);
  background: var(--eyebrow-bg);
  font-size: var(--fs-xs); font-weight: 650;
  /* Was 0.12em. The badge gives the text a frame, so it can carry a little
     more track without the words coming apart. */
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  box-shadow: var(--glow-brand-soft);
}
/* The badge sits over the hero video, which is dark but not uniformly so.
   A translucent well keeps the text legible wherever the frame lands. */
:root { --eyebrow-bg: rgba(5, 8, 14, 0.55); }
[data-surface="light"] { --eyebrow-bg: rgba(255, 255, 255, 0.72); }

.sx-eyebrow__dot {
  flex: 0 0 auto;
  width: 0.45em; height: 0.45em;
  border-radius: 50%;
  background: var(--brand);
  /* Two rings, both weak: a tight halo for presence and the shared soft glow.
     Deliberately short of neon — this sits next to body-size type. */
  box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--brand) 16%, transparent),
              var(--glow-brand-soft);
}
.sx-eyebrow__brand { color: var(--brand); }
.sx-eyebrow__sep   { color: var(--text-subtle); }
.sx-eyebrow__rest  { color: var(--text); }

/* Narrow screens: the full line needs ~390px of track and a phone container is
   ~350px, so it wraps either way. Left to itself the tail wrapped *inside* its
   own flex item, leaving the dot and STRATYLIX optically centred against a
   two-line block. Breaking it at the separator instead gives two clean rows,
   and the separator — decorative, already aria-hidden — is dropped because a
   trailing "·" at the end of row one reads as a typo. */
@media (max-width: 560px) {
  .sx-hero__eyebrow {
    flex-wrap: wrap;
    row-gap: 0.15em;
    padding: 0.5em 0.85em;
    /* Tighter than the desktop 0.14em, and a step down in size. At desktop
       metrics the tail alone needs ~330px and a 390px phone leaves ~300px
       inside the badge, so it broke to a third line and the pill grew to 82px
       — a blob, not an eyebrow. These metrics land it on two rows. */
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
  .sx-eyebrow__rest { flex-basis: 100%; }
  .sx-eyebrow__sep  { display: none; }
}
/* Display size, hero only. --fs-3xl caps at 56px and is shared with every
   inner page, so it is left alone; this scales 40px on a phone to 72px on a
   wide desktop, reaching ~63px at 1280 and ~68px at 1440. Tighter leading than
   body headings because the type is much larger. */
.sx-hero h1 {
  margin-top: var(--sp-5);
  /* In em, so the measure tracks the display size instead of fighting it. At
     18ch the line broke mid-clause — "for Intelligent / Operations." — which
     splits the emphasised phrase across two lines. 13em is wide enough for the
     break to land at the clause instead. */
  max-width: 13em;
  font-size: clamp(2.5rem, 3.2vw + 1.4rem, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  /* Prefers even line lengths over a long line followed by an orphan. */
  text-wrap: balance;
}

/* Only the second half of the headline carries the gradient. The whole H1 in
   gradient reads as decoration; one clause reads as emphasis.
   Contrast is the constraint, not taste: on light, --brand-strong is 2.28:1
   against #F5F8FB and would fail large-text 3:1 for the first stretch of the
   sweep, so the light ramp starts a stop later at --brand (3.37:1) and lands on
   --brand-deep (5.58:1). The dark ramp runs 14:1 to 6.4:1 and needs no help. */
.sx-hero__accent { color: var(--brand); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .sx-hero__accent {
    background-image: linear-gradient(115deg,
      var(--brand-strong), var(--brand) 55%, var(--brand-deep));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Sits on the glyph shapes, not behind the block. Kept well under the
       --glow-brand 22% so it reads as depth rather than as neon. */
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 16%, transparent));
  }
  [data-surface="light"] .sx-hero__accent {
    background-image: linear-gradient(115deg, var(--brand), var(--brand-deep));
    filter: none;
  }
}

/* The grid gap already separates the pitch from the visual above it. */
.sx-hero__pitch > :first-child { margin-top: 0; }
.sx-hero__lede {
  margin-top: var(--sp-6);
  /* Was 58ch, which at hero size ran past 800px on a wide screen. A measure
     capped in px holds the line length where it stays comfortable regardless
     of the font size. */
  max-width: min(66ch, 720px);
  font-size: clamp(1.0625rem, 0.35vw + 1rem, 1.25rem);
  line-height: 1.6;
  color: var(--text-muted);
}
.sx-hero__actions { margin-top: var(--sp-7); }

.sx-hero__tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  list-style: none;
  margin: var(--sp-7) 0 0; padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sx-hero__tags li { position: relative; }
.sx-hero__tags li + li::before {
  content: ""; position: absolute; left: calc(var(--sp-4) * -0.5);
  top: 50%; width: 3px; height: 3px; margin-top: -1.5px;
  border-radius: 50%; background: var(--brand); opacity: 0.7;
}

/* ---- operations figure ---------------------------------------------------
   Lives in the AI & Automation section. It kept the backing panel it was given
   in the hero: the section sits on --signature, and the figure's thin connector
   lines need the separation there too.
   -------------------------------------------------------------------------- */
.sx-aifigure {
  margin-top: var(--sp-7);
  /* The svg is capped at 460px and centres itself, so an uncapped panel left a
     wide empty margin either side of it. */
  max-width: 620px;
  margin-inline: auto;
}
/* The hero video is a wireframe mesh, and the diagram's own connector lines
   were getting lost in it. A quiet panel separates the two without turning the
   figure into a card. */
.sx-opsfig {
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
  .sx-opsfig { backdrop-filter: blur(7px); }
}
.sx-opsfig__svg { width: 100%; height: auto; max-width: 460px; margin-inline: auto; }

.sx-opsfig__node rect {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.sx-opsfig__node text {
  fill: var(--text);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 650;
  text-anchor: middle;
}
.sx-opsfig__plane rect { fill: var(--surface); stroke: var(--border); }
.sx-opsfig__plane text {
  fill: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: 0.1em;
  text-anchor: middle;
}
.sx-opsfig__plane--out rect {
  fill: color-mix(in srgb, var(--brand) 10%, var(--surface));
  stroke: var(--border-brand);
}
.sx-opsfig__plane--out text { fill: var(--brand); }

.sx-opsfig__flow path {
  stroke: var(--brand);
  stroke-width: 1.5;
  fill: none;
  opacity: .45;
  stroke-dasharray: 5 7;
  animation: sx-dash 2.4s linear infinite;
}
@keyframes sx-dash { to { stroke-dashoffset: -24; } }
.sx-opsfig__core text {
  fill: var(--brand);
  font-family: var(--font-display);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-anchor: middle;
}
.sx-opsfig__ring { fill: none; stroke: var(--border-brand); stroke-width: 1; }
.sx-opsfig__ring--spin {
  stroke: var(--brand);
  stroke-dasharray: 22 254;
  transform-origin: 199px 252px;
  animation: sx-orbit 9s linear infinite;
}
/* Single low-cost animation on the page; disabled for reduced motion. */
@keyframes sx-orbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sx-opsfig__ring--spin { animation: none; stroke-dasharray: none; opacity: 0.5; }
  .sx-opsfig__flow path { stroke-dasharray: none; animation: none; }
}

/* ---- about --------------------------------------------------------------- */
.sx-about { display: grid; gap: var(--sp-6); }
.sx-about__sidetitle {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--text-subtle); margin: 0 0 var(--sp-4);
}
.sx-acrostic { display: grid; gap: 2px; list-style: none; margin: 0; padding: 0; }
.sx-acrostic__row {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: center; gap: var(--sp-3);
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--surface-2) 55%, transparent);
}
.sx-acrostic__letter {
  font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700;
  color: var(--brand); text-align: center;
}
.sx-acrostic__word { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---- reveal --------------------------------------------------------------
   Content is visible by default; animations.js adds .is-armed only once it can
   guarantee a reveal, so a JS failure can never hide copy.
   -------------------------------------------------------------------------- */
.js-reveal.is-armed { opacity: 0; transform: translateY(16px); }
.js-reveal.is-armed.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal.is-armed { opacity: 1; transform: none; }
}

/* ---- responsive ---------------------------------------------------------- */
@media (min-width: 900px) {
  .sx-about { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: var(--sp-8); }
}

@media (min-width: 1040px) {
  .sx-hero__inner { gap: var(--sp-5); }
  /* The headline and the paragraph want different measures, so they no longer
     share one. 62ch is 626px, which is right for reading a paragraph and far
     too narrow for a 68px headline: it forced "for Intelligent / Operations."
     and split the emphasised clause across two lines. The head gets room for
     the first clause to sit on one line; the pitch keeps the reading measure. */
  .sx-hero__head  { max-width: 960px; }
  .sx-hero__pitch { max-width: 62ch; }
  .sx-hero h1 { max-width: 14em; }
}

/* ---- ROI estimator --------------------------------------------------------
   Four sliders on the left, two figures on the right. The range inputs are
   styled per-engine because -webkit- and -moz- expose different pseudo-
   elements and neither inherits from the other.
   -------------------------------------------------------------------------- */
.sx-roi { display: grid; gap: var(--sp-6); }

.sx-roi__inputs {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--brand) 3%, var(--surface));
}
.sx-roi__field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.sx-roi__val {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;   /* stops the layout jittering as it counts */
}

.sx-roi input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  cursor: pointer;
}
.sx-roi input[type="range"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sx-roi input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;            /* generous: this is a drag target */
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: var(--elev-2);
}
.sx-roi input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--brand);
  box-shadow: var(--elev-2);
}
.sx-roi input[type="range"]::-moz-range-track {
  height: 4px; border-radius: var(--r-pill); background: var(--surface-3);
}

.sx-roi__results {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-6);
  border: 1px solid var(--border-brand);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}
.sx-roi__rlabel {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sx-roi__rval {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.sx-roi__note {
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.sx-roi__cta { margin: 0; }

@media (min-width: 900px) {
  .sx-roi { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--sp-6); }
}

/* ---- capability strip -----------------------------------------------------
   A continuous marquee under the hero. Two identical tracks sit side by side
   and both translate -100%: as the first leaves the viewport the second is
   exactly where the first began, so the loop has no seam and needs no JS.

   The animation is a single transform, so it runs on the compositor and does
   not touch layout. It pauses on hover and under prefers-reduced-motion, where
   the strip becomes an ordinary wrapping list instead.
   -------------------------------------------------------------------------- */
.sx-capstrip {
  border-block: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  padding-block: var(--sp-4);
  overflow: hidden;
}
.sx-capstrip__viewport {
  display: flex;
  width: max-content;
  /* Fade both edges so items enter and leave rather than being chopped off. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Qualified: base.css carries `ul[role="list"] { padding: 0 }` at (0,1,1),
   which beat a bare .sx-capstrip__track and collapsed the padding — so the last
   item of one track butted straight into the first of the next and the loop
   read as "SUPPLY CHAINAI & AUTOMATION". */
.sx-capstrip__viewport .sx-capstrip__track {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--sp-7);
  margin: 0;
  padding: 0 calc(var(--sp-7) / 2);
  list-style: none;
  animation: sx-capscroll 38s linear infinite;
}
.sx-capstrip__track li {
  flex: 0 0 auto;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
/* Brand dot between items, drawn on the separator rather than as extra markup. */
.sx-capstrip__track li::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--sp-7) / -2);
  inset-block-start: 50%;
  width: 4px; height: 4px;
  margin-block-start: -2px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .55;
}
.sx-capstrip:hover .sx-capstrip__track { animation-play-state: paused; }
.sx-capstrip:hover .sx-capstrip__track li { color: var(--text-muted); }

@keyframes sx-capscroll { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .sx-capstrip__viewport { width: auto; mask-image: none; -webkit-mask-image: none; }
  .sx-capstrip__track { animation: none; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
  .sx-capstrip__track + .sx-capstrip__track { display: none; }
  .sx-capstrip__track li::after { display: none; }
}

/* ---- statement ------------------------------------------------------------
   One claim, set large, with no card or list around it. The contrast between
   the two halves of the line is the whole point, so the second half carries
   the bright ink and the first is deliberately plain.

   Side by side from 900px. Set large and capped at 22ch, the statement filled
   a little over half the measure and left the rest of a 506px band empty; the
   support now occupies it instead of stacking underneath, which uses the space
   and takes ~120px off the section. Bottom-aligned, so the small text sits on
   the statement's last line rather than floating beside its middle.
   -------------------------------------------------------------------------- */
.sx-statement {
  padding-block: clamp(3.25rem, 6vw, 5.5rem);
  border-bottom: 1px solid var(--hairline);
  background:
    radial-gradient(60% 70% at 15% 0%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%),
    var(--surface);
}
.sx-statement__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 900px) {
  .sx-statement__inner {
    /* The statement column has to stay wider than the 22ch cap below, or the
       cap stops being the thing that sets the line breaks and the claim runs
       to four lines instead of two. */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    column-gap: var(--sp-8);
  }
}
.sx-statement__line {
  margin: var(--sp-4) 0 0;
  max-width: 22ch;
  font-size: clamp(2rem, 3.6vw + 1rem, 3.6rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--text-subtle);
  text-wrap: balance;
}
.sx-statement__em { display: block; color: var(--text); }
/* Rule and cyan tick, the same mark the Why field uses on each of its four
   items — the support reads as another entry in that argument rather than as
   an unrelated caption. */
.sx-statement__body {
  position: relative;
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  max-width: 46ch;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;
}
.sx-statement__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--brand);
  opacity: 0.75;
}

/* ---- Why Stratylix ---------------------------------------------------------
   Part 13. Four facets of one argument, not four features — so it is a
   connected field, not a card grid. Cards would imply each item stands alone
   and that they are equal and interchangeable; they are neither.

   The connection is drawn, not decorated. One continuous set of rules runs
   through all four items; at >=900px the column divider and the second row's
   rule cross at a single point that carries a cyan node — four pillars, one
   core, which is the section's whole positioning in one mark. A short cyan
   tick at the left end of each item's rule ties its number into the same grid.

   Everything else is deliberately plain: no cards, no glass, no gradient, no
   glow, no icons, no imagery. The credibility of this section comes from what
   it says; the only job of the drawing is to show that the four say one thing.

   FOUR ranks per item — number, name, claim, substantiation — each a distinct
   size/weight/colour, so a scanner can enter at any of them and still get the
   argument. The number is its own block, never inline with the name: run
   together they read as one word ("01Enterprise").
   -------------------------------------------------------------------------- */
.sx-why__grid {
  display: grid;
  gap: 0;
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.sx-why__item {
  position: relative;
  padding-block: var(--sp-5) var(--sp-6);
  /* --border, not --hairline: the rules are the drawing here, so they have to
     be visible enough for the cyan tick to read as part of a line rather than
     as a stray dash. Still one step below --border-strong. */
  border-top: 1px solid var(--border);
}
/* The cyan tick. 1px tall and 28px long, laid over the left end of the item's
   own rule so the number appears plugged into the grid rather than floating
   above it. Decorative only — no element, no text, nothing announced. */
.sx-why__item::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--brand);
  opacity: 0.75;
}

.sx-why__num {
  margin: 0;
  font-family: var(--font-display);
  /* Large enough to anchor the item, small enough that four of them do not
     become the section. Caps out well below the h2 so the heading still leads. */
  font-size: clamp(2rem, 1.2vw + 1.7rem, 2.75rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sx-why__label {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* --text-muted, not --text-subtle: these four names ARE the scan layer, and
     at 13px uppercase they were the least legible text in the section. Size,
     caps and tracking already keep them subordinate to the claim below, so the
     extra contrast costs no hierarchy (5.3:1 -> 9.1:1). */
  color: var(--text-muted);
}
.sx-why__head {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 30ch;
  text-wrap: balance;
}
.sx-why__text {
  margin: var(--sp-3) 0 0;
  max-width: 54ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
  text-wrap: pretty;    /* no single-word last line on a three-line paragraph */
}

/* Two columns once there is room. Kept to two rather than four so each
   statement retains a readable measure, and so the set reads as 2 x 2 —
   two pairs — rather than as a four-across feature strip. */
@media (min-width: 900px) {
  .sx-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-8);
    margin-block-start: var(--sp-7);
  }
  .sx-why__item { padding-block: var(--sp-5) var(--sp-7); }
  /* The column divider, drawn on the right-hand item so it cannot double up.
     Pulled half the gap left and padded back by the same amount, so the rule
     sits in the middle of the gutter while the text stays flush to its
     grid column. */
  .sx-why__item:nth-child(even) {
    border-left: 1px solid var(--border);
    margin-inline-start: calc(var(--sp-8) / -2);
    padding-inline-start: calc(var(--sp-8) / 2);
  }
  .sx-why__item:nth-child(even)::after { left: calc(var(--sp-8) / 2); }
  /* The left-hand items reach the divider the same way, so the row rules meet
     it from both sides and the junction is a true cross rather than two lines
     stopping short of each other. Content width is unchanged: the box grows by
     half the gap and the padding gives it straight back. */
  .sx-why__item:nth-child(odd) {
    margin-inline-end: calc(var(--sp-8) / -2);
    padding-inline-end: calc(var(--sp-8) / 2);
  }

  /* The core node. Item 4's top-left corner IS the crossing point of the
     column divider and the second row's rule, whatever the row heights turn
     out to be, so the node is anchored to it rather than positioned by hand.
     The bg-coloured ring breaks both lines around the dot the way a node
     breaks an edge in a network diagram. */
  .sx-why__item:nth-child(4)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--border-brand);
  }
}

/* ---- Why Stratylix conversion band -----------------------------------------
   The section's conclusion, not a second closing CTA. One surface step above
   the section, one hairline, one primary button — the page's real closing CTA
   is a full section with an eyebrow, two buttons and the contact rail, and
   this must not compete with it.
   -------------------------------------------------------------------------- */
.sx-whycta {
  position: relative;
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  margin-block-start: var(--sp-7);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
/* A cyan segment on the band's top edge, centred on the container — which is
   exactly where the node above it sits. The four points converge on one core,
   and the core leads here. Three tick-lengths wide so it reads as the same
   drawing, and gradient-faded at both ends so it does not become a second
   border. */
.sx-whycta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 96px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
              transparent, var(--brand) 30%, var(--brand) 70%, transparent);
}
.sx-whycta__copy { min-width: 0; }
.sx-whycta__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 34ch;
  text-wrap: balance;
}
.sx-whycta__text {
  margin: var(--sp-3) 0 0;
  max-width: 60ch;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
}
.sx-whycta__action { margin: 0; }
.sx-whycta__action .sx-btn { white-space: normal; }

@media (min-width: 900px) {
  .sx-whycta {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--sp-7);
    padding: var(--sp-7);
  }
}

/* ---- homepage About (brief) ----------------------------------------------
   A pointer to about.html, not a second copy of it. Portrait is small and
   inline; the full story and the credentials live on the page built for them.
   -------------------------------------------------------------------------- */
.sx-about-brief { display: grid; gap: var(--sp-6); align-items: start; }
.sx-about-brief__lede {
  margin-top: var(--sp-4); max-width: 58ch;
  font-size: var(--fs-md); color: var(--text-muted);
}
.sx-about-brief__founder {
  display: grid; grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--sp-4); align-items: center; margin: 0;
  padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
}
.sx-about-brief__founder picture { display: block; }
.sx-about-brief__founder img {
  width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 0 0 1px var(--border), 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.sx-about-brief__founder figcaption p { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sx-about-brief__founder figcaption p + p { margin-top: var(--sp-2); }
.sx-about-brief__name { color: var(--text-muted) !important; font-size: var(--fs-xs) !important; }

@media (min-width: 900px) {
  .sx-about-brief { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--sp-8); }
  .sx-about-brief__founder { border-top: 0; padding-top: 0; }
}