/* ==========================================================================
   Home — section composition only.
   Components (frame, art, selector, feature stack, buttons…) live in
   src/css/components/. Everything here is layout that only this page uses.
   Every space and size is a token on the 8pt grid (tokens.css §6).

   03 hero · 05 solutions · 04b challenge · 06 chapter (selector) · 07 approach
   08 teradata · 09 customers · 10 platform · 11 resources · 12 final CTA

   Shared with the inner pages since 2026-10-01, so no longer here:
   the story card (components/case.css), the resource list
   (components/resource-index.css) and the final CTA (components/final-cta.css).
   ========================================================================== */

/* Rhythm: one step of 80px at every width. Sections on the page ground sit
   80px apart; a section with its own fill has 80px above and below its content. */
.page-home {
  --space-section: var(--space-20);
  --space-section-sm: var(--space-20);
}

/* Every section title on this page is bold */
.page-home main h2 {
  font-weight: var(--weight-bold);
}

/* Display headings on this page run wider than the component default */
.page-home .section-heading__title.text-display-lg {
  max-width: 18ch;
}

.page-home .section-heading--center .section-heading__title {
  max-width: 20ch;
}

/* ==========================================================================
   03 HERO
   Centred type over a ruled stage. The artwork is the only colour.
   ========================================================================== */
/* The solutions section follows at the page's 80px (the proof band that sat
   16px under the stage was removed: client, GitHub #22, 2026-10-03) */
.hero {
  padding-block: var(--space-10) 0;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__title {
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero__line {
  display: block;
}

.hero__lead {
  max-width: 44rem;
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.hero__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* The trust proposition: a statement, not a disclaimer, and the first thing
   read, over the headline. Teal shield (the data is protected), the first
   sentence in full weight. */
.hero__trust {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--blue-100);
  border-radius: var(--radius-pill);
  background-color: var(--blue-50);
  color: var(--text-secondary);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--weight-medium);
  text-align: left;
}

.hero__trust strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.hero__trust-icon {
  flex-shrink: 0;
  width: var(--space-6);
  height: var(--space-6);
  fill: var(--teal-50);
  stroke: var(--teal-500);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phones: a two-line statement reads better as a block than as a pill */
@media (max-width: 639.98px) {
  .hero__trust {
    align-items: flex-start;
    border-radius: var(--radius-md);
  }
}

/* Stage */
.hero__stage {
  margin: var(--space-10) 0 0;
  padding: var(--space-8) var(--space-4);
  background-color: var(--surface-primary);
}

/* Dot grid at the edges only: it clears behind the artwork.
   One dot every 24px: every third point of the 8pt grid. */
.hero__stage.frame--ruled {
  background-image: radial-gradient(circle, var(--guide-dot) 0.75px, transparent 1.25px);
  background-size: var(--space-6) var(--space-6);
  background-position: center top;
}

.hero__stage > .art {
  isolation: isolate;
}

/* SCROLL: the artwork steps back as the stage passes under the header
   (--scroll-out, from data-scroll on the stage) */
.js .hero__stage[data-scroll] > .art {
  scale: calc(1 - var(--scroll-out, 0) * 0.08);
  opacity: calc(1 - var(--scroll-out, 0) * 0.5);
}

/* On its own layer, so each scroll frame only scales and fades the layer: without it the whole story
   artwork was painted again on every frame of the scroll */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__stage[data-scroll] > .art {
    will-change: scale, opacity;
  }
}

.hero__stage > .art::before {
  content: "";
  position: absolute;
  inset: calc(var(--space-6) * -1) 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--surface-primary) 52%, transparent 78%);
}

@media (min-width: 768px) {
  .hero {
    padding-top: var(--space-16);
  }

  .hero__stage {
    margin-top: var(--space-10);
    padding: var(--space-10) var(--space-8);
  }

  .hero__stage > .art {
    margin-inline: auto;
  }
}

/* Desktop: the hero is the first screen. The copy keeps its size and sits
   close; the stage takes the height that is left, so the whole artwork is
   in view before any scroll and the next section starts under the fold. The artwork keeps its full
   width (86%, 76% from 1200) wherever the screen has the height for it. On
   a shorter screen the gaps close first (the short tier, below); then the
   artwork gives way by what is missing, to no less than 64% of the stage;
   a screen shorter still scrolls to its foot.
   Its labels are part of the SVG, placed clear of the drawing by the generator. */
@media (min-width: 1024px) {
  .hero {
    /* over the hero when the page opens: the announcement band and the header, each with its rule */
    --hero-above: calc(var(--space-16) + var(--header-height) + 2 * var(--border-width));
    /* the gaps that close on a short screen: over the copy, over the buttons, over the stage, inside the stage */
    --hero-gap-top: var(--space-6);
    --hero-gap-actions: var(--space-6);
    --hero-gap-stage: var(--space-6);
    --hero-stage-pad: var(--space-4);
    /* the copy: the trust line and its gap, two title lines, two lines of lead, the buttons */
    --hero-copy: calc(
      var(--lh-body) + 2 * var(--space-2) + 2 * var(--border-width) + var(--space-4)
      + 2 * var(--lh-hero)
      + var(--space-4) + 2 * var(--lh-body-lg)
      + var(--hero-gap-actions) + var(--control-height-lg)
    );
    /* the stage around the artwork: the gap over it, its rules and padding, 16px of air under it */
    --hero-stage-chrome: calc(var(--hero-gap-stage) + 2 * var(--border-width) + 2 * var(--hero-stage-pad) + var(--space-4));
    /* the height the artwork has left, as a width (the viewBox is 1240 × 444) */
    --hero-art-room: calc((100svh - var(--hero-above) - var(--hero-gap-top) - var(--hero-copy) - var(--hero-stage-chrome)) * 1240 / 444);
    --hero-art-max: 86%;
    display: flex;
    flex-direction: column;
    /* a very tall screen is not filled: the stage would be more air than artwork */
    min-height: min(calc(100svh - var(--hero-above)), 60rem);
    padding-top: var(--hero-gap-top);
  }

  .hero__inner {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .hero__trust {
    margin-bottom: var(--space-4);
  }

  .hero__lead {
    max-width: 64rem;
    margin-top: var(--space-4);
    text-wrap: balance;
  }

  .hero__actions {
    margin-top: var(--hero-gap-actions);
  }

  /* The stage ends 16px over the fold; what height is spare is its own */
  .hero__stage {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--hero-gap-stage);
    padding-block: var(--hero-stage-pad);
  }

  .hero__stage > .art {
    width: clamp(64%, var(--hero-art-room), var(--hero-art-max));
    margin-inline: 0;
  }

  .hero__stage > .art::before {
    inset-block: calc(var(--hero-stage-pad) * -1);
  }
}

@media (min-width: 1200px) {
  .hero {
    --hero-art-max: 76%;
  }
}

/* The short tier: where the open gaps would cost the artwork its width
   (under 964px of height at the full container), the gaps step down, 40px
   in all, and the artwork holds its full width down to a 924px-high screen */
@media (min-width: 1024px) and (max-height: 963.98px) {
  .hero {
    --hero-gap-top: var(--space-4);
    --hero-gap-actions: var(--space-4);
    --hero-gap-stage: var(--space-4);
    --hero-stage-pad: var(--space-2);
  }
}

/* ==========================================================================
   04b THE CHALLENGE — the tension, then one record's journey (HOME-ART-09,
   components/identity-story.css). The heading runs over the whole row.
   From 1200px the copy and the four steps sit beside the artwork; below,
   the steps follow the artwork: a row of four from 768 (the artwork reads
   left to right there), a column on phones.

   The steps are the artwork's story in words: its names, its colours, and
   each one lights as the artwork tells it (data-step-for, SEQUENCE in
   animations.js). No script or reduced motion: every step is lit.
   ========================================================================== */
.challenge__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.challenge__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.challenge__title {
  max-width: 18ch;
}

/* Below 1200 the copy's two parts take their own places in the grid */
.challenge__copy {
  display: contents;
}

.challenge__text {
  max-width: 52ch;
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.challenge__art {
  order: 1;
  margin: var(--space-10) 0 0;
  padding: var(--space-6) var(--space-4);
  background-color: var(--surface-primary);
}

/* ---------- The four steps ----------
   A numbered tile on a dashed connector, then the part's name with its
   legend marker (as the artwork labels it) over one line of story. */
.challenge__steps {
  order: 2;
  display: grid;
  margin-top: var(--space-8);
  list-style: none;
  padding: 0;
}

.challenge__step {
  --step-color: var(--ill-system);
  --step-soft: var(--ill-system-soft);
  position: relative;
  display: grid;
  grid-template-columns: var(--space-10) minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-bottom: var(--space-8);
}

.challenge__step:last-child {
  padding-bottom: 0;
}

.challenge__step--core {
  --step-color: var(--ill-action);
  --step-soft: var(--ill-action-soft);
}

.challenge__step--sensitive {
  --step-color: var(--ill-sensitive);
  --step-soft: var(--ill-sensitive-soft);
}

.challenge__step--protected {
  --step-color: var(--ill-protected);
  --step-soft: var(--ill-protected-soft);
}

/* The way to the next step: a dashed connector, as in the artwork */
.challenge__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--space-10) + var(--space-1));
  bottom: var(--space-1);
  left: calc(var(--space-10) / 2 - 1px);
  border-left: 2px dashed var(--guide-line);
}

/* The tile is as tall as the name and the line beside it */
.challenge__step-index {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border: 1.5px solid var(--step-color);
  border-radius: var(--radius-sm);
  background-color: var(--surface-primary);
  font-family: var(--font-label);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--text-primary);
  transition:
    border-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.challenge__step-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--motion-base) var(--ease-standard);
}

/* The legend marker: a square for a part, a dot for safe data; centred on
   the first line, so a wrapped name keeps it in place */
.challenge__step-label::before {
  content: "";
  flex-shrink: 0;
  width: var(--space-2);
  height: var(--space-2);
  margin-top: calc((var(--lh-label) - var(--space-2)) / 2);
  background-color: var(--step-color);
  transition: background-color var(--motion-base) var(--ease-standard);
}

.challenge__step--protected .challenge__step-label::before {
  border-radius: 50%;
}

.challenge__step-text {
  grid-column: 2;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  transition: color var(--motion-base) var(--ease-standard);
}

/* While the artwork is on screen telling its story (.is-sequence-live and
   .is-in-view), a step waits in grey for its moment; the step being told
   (and, at the end, the last) carries a soft ring. Before the story, once
   the artwork has scrolled away (on narrow screens the steps sit under it),
   or without script, every step is lit. */
.challenge:has(.is-sequence-live.is-in-view) .challenge__step:not(.is-on) .challenge__step-index {
  border-color: var(--border-default);
}

.challenge:has(.is-sequence-live.is-in-view) .challenge__step:not(.is-on) :is(.challenge__step-index, .challenge__step-label, .challenge__step-text) {
  color: var(--text-tertiary);
}

.challenge:has(.is-sequence-live.is-in-view) .challenge__step:not(.is-on) .challenge__step-label::before {
  background-color: var(--neutral-300);
}

.challenge__step.is-on:is(:last-child, :has(+ .challenge__step:not(.is-on))) .challenge__step-index {
  box-shadow: 0 0 0 var(--space-1) var(--step-soft);
}

@media (min-width: 768px) {
  .challenge__title {
    max-width: none;
  }

  .challenge__art {
    padding: var(--space-8);
  }
}

/* 1024–1199: the steps in a row under the artwork, which reads left to
   right there (a 768 tablet keeps the column: four across wrap the names) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .challenge__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .challenge__step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding-bottom: 0;
  }

  .challenge__step-index {
    grid-row: auto;
    margin-bottom: var(--space-4);
  }

  .challenge__step-text {
    grid-column: 1;
    margin-top: var(--space-1);
  }

  .challenge__step:not(:last-child)::before {
    top: calc(var(--space-10) / 2 - 1px);
    bottom: auto;
    right: calc(var(--space-2) - var(--space-6));
    left: calc(var(--space-10) + var(--space-2));
    border-top: 2px dashed var(--guide-line);
    border-left: 0;
  }
}

@media (min-width: 1200px) {
  .challenge__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(var(--space-grid-gap) * 2);
    align-items: center;
  }

  .challenge__head {
    grid-column: 1 / -1;
    margin-bottom: var(--space-12);
  }

  .challenge__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
  }

  .challenge__text,
  .challenge__steps,
  .challenge__art {
    margin-top: 0;
  }

  /* The copy's own divider: the trade-off above, the way through below
     (.challenge__copy outranks the reset's ol[role="list"] padding) */
  .challenge__copy .challenge__steps {
    padding-top: var(--space-10);
    border-top: var(--border-width) var(--guide-style) var(--guide-line);
  }

  .challenge__art {
    padding: var(--space-8) var(--space-6);
  }
}

/* Two lines: "Sensitive data needs to be" / "protected and used." */
@media (min-width: 768px) {
  .challenge__title-line {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .challenge__step-index,
  .challenge__step-label,
  .challenge__step-label::before,
  .challenge__step-text {
    transition: none;
  }
}

/* ==========================================================================
   05 SOLUTIONS — heading over the ecosystem on the left; the feature stack
   over the summary on the right. Both columns start and end level.
   ========================================================================== */
.solutions__inner {
  display: grid;
  gap: var(--space-10);
}

.solutions__title {
  max-width: 20ch;
}

/* The sub-header over the title (client, GitHub #21) */
.solutions__eyebrow + .solutions__title {
  margin-top: var(--space-4);
}

.solutions__text {
  max-width: 60ch;
  margin-top: var(--space-8);
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.solutions__art {
  max-width: 32.5rem;
  margin-top: var(--space-8);
}

/* The module the open feature is about */
.solutions[data-active-feature="ai"] .art-state--ai,
.solutions[data-active-feature="attacks"] .art-state--attacks,
.solutions[data-active-feature="quantum"] .art-state--quantum,
.solutions[data-active-feature="sharing"] .art-state--sharing,
.solutions[data-active-feature="nonprod"] .art-state--nonprod,
.solutions[data-active-feature="compliance"] .art-state--compliance {
  opacity: 1;
}

.solutions .art-ring {
  stroke: var(--blue-700);
  stroke-dasharray: none;
}

/* HOME-ART-18 · 8 Layers of Security: a state of the same figure. The two
   compositions (wide, and numbered for narrow columns: light-art.css) sit in
   the figure's one grid cell beside the raster; the "layers" feature shows
   them and takes the raster, its underlay and its overlay back. Each other
   feature hides them (display: none, so the rings tell themselves again the
   next time they show). */
.solutions__art > :is(picture, .art__overlay) {
  transition: opacity var(--motion-base) var(--ease-standard);
}

.solutions__art > .el {
  align-self: center;
}

/* In this figure the wide composition holds down to a 380px column (1024–1330 included),
   so item 07 keeps the figure's box like the other six; the numbered one is for phones */
@container (min-width: 23.75rem) {
  .solutions__art > .el--desktop {
    display: block;
  }

  .solutions__art > .el--mobile {
    display: none;
  }
}

.solutions:not([data-active-feature="layers"]) .solutions__art > .el {
  display: none;
}

.solutions[data-active-feature="layers"] .solutions__art > :is(picture, .art__overlay) {
  opacity: 0;
}

@keyframes solutions-layers-in {
  from {
    opacity: 0;
  }
}

.solutions[data-active-feature="layers"] .solutions__art > .el {
  animation: solutions-layers-in var(--motion-base) var(--ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
  .solutions__art > :is(picture, .art__overlay) {
    transition: none;
  }

  .solutions[data-active-feature="layers"] .solutions__art > .el {
    animation: none;
  }
}

/* The open solution's module leads the scene: a light veil takes the rest
   back. While the pointer (or keyboard focus) is on the stack, the veil
   deepens and the module stands alone. */
.solutions[data-active-feature="ai"] .art-veil--ai,
.solutions[data-active-feature="attacks"] .art-veil--attacks,
.solutions[data-active-feature="quantum"] .art-veil--quantum,
.solutions[data-active-feature="sharing"] .art-veil--sharing,
.solutions[data-active-feature="nonprod"] .art-veil--nonprod,
.solutions[data-active-feature="compliance"] .art-veil--compliance {
  opacity: 0.32;
}

@media (hover: hover) and (pointer: fine) {
  .solutions[data-active-feature="ai"]:has(.feature-stack:hover) .art-veil--ai,
  .solutions[data-active-feature="attacks"]:has(.feature-stack:hover) .art-veil--attacks,
  .solutions[data-active-feature="quantum"]:has(.feature-stack:hover) .art-veil--quantum,
  .solutions[data-active-feature="sharing"]:has(.feature-stack:hover) .art-veil--sharing,
  .solutions[data-active-feature="nonprod"]:has(.feature-stack:hover) .art-veil--nonprod,
  .solutions[data-active-feature="compliance"]:has(.feature-stack:hover) .art-veil--compliance {
    opacity: 0.72;
  }
}

.solutions[data-active-feature="ai"]:has(.feature__trigger:focus-visible) .art-veil--ai,
.solutions[data-active-feature="attacks"]:has(.feature__trigger:focus-visible) .art-veil--attacks,
.solutions[data-active-feature="quantum"]:has(.feature__trigger:focus-visible) .art-veil--quantum,
.solutions[data-active-feature="sharing"]:has(.feature__trigger:focus-visible) .art-veil--sharing,
.solutions[data-active-feature="nonprod"]:has(.feature__trigger:focus-visible) .art-veil--nonprod,
.solutions[data-active-feature="compliance"]:has(.feature__trigger:focus-visible) .art-veil--compliance {
  opacity: 0.72;
}

@media (min-width: 1024px) {
  .solutions__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: calc(var(--space-grid-gap) * 2);
  }

  /* The heading is level with the top of the stack, and the artwork's foot
     with the last line of the summary */
  .solutions__lead {
    display: flex;
    flex-direction: column;
  }

  .solutions__art {
    width: 100%;
    margin-top: auto;
    padding-top: var(--space-10);
  }
}

/* ==========================================================================
   06 DARK CHAPTER — platform selector ("Protection that stays with your data.")
   One artwork per capability since 2026-10-02 (client feedback); the single
   HOME-ART-02 scene is in _archive/2026-10-02-before-client-feedback-pass/.
   ========================================================================== */
.chapter {
  border-top: var(--border-width) solid var(--border-subtle);
}

/* Desktop: the heading and the whole selector fit one screen, under the
   stuck header. The heading runs on one line and the artwork gives way
   first: it is capped by the height the screen has left for it. */
@media (min-width: 1024px) {
  .chapter {
    /* where an in-page link lands (base.css), the band's top padding, one
       title line and its gap, and a margin under the frame */
    --chapter-chrome: calc(var(--header-height) + var(--space-4) + var(--space-section) + var(--lh-display-lg) + var(--space-10) + var(--space-4));
    /* less the stage's own padding; never below 28rem wide */
    --selector-art-max: max(28rem, calc((100svh - var(--chapter-chrome) - 2 * var(--space-6)) * 760 / 500));
  }

  .chapter .section-heading {
    max-width: none;
    margin-bottom: var(--space-10);
  }

  .page-home .chapter .section-heading__title {
    max-width: none;
  }
}

/* Which artwork shows, and how it changes: components/capability-art.css (HOME-ART-11…16) */

/* ==========================================================================
   07 APPROACH — three values in one frame: why the approach is different.
   A light band between the two dark chapters (06 and 08): the fills make
   the seams, so the band carries no rules of its own.
   ========================================================================== */
.approach {
  background-color: var(--surface-secondary);
}

/* Both sentences on one line, wherever the screen can hold them */
.page-home .approach .section-heading__title {
  max-width: none;
}

.approach__grid {
  display: grid;
  list-style: none;
  padding: 0;
  background-color: var(--surface-primary);
}

.value {
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
}

.value + .value {
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.value__title {
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
}

.value__text {
  max-width: 34ch;
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

/* The patented technology behind the benefit: a label, not a lesson */
.value__tech {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-family: var(--font-label);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-accent);
}

.value__tech::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  background-color: var(--ill-action);
}

.value__art {
  width: min(100%, 20rem);
  margin: var(--space-6) auto 0;
}

/* A one-row scene needs the width a two-row scene gets from its height */
.value__art--wide {
  width: min(100%, 30rem);
}

.approach__cta,
.platform__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-10);
}

@media (min-width: 1024px) {
  /* The outer columns hold the one-row scenes, so they are the wider ones */
  .approach__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr);
  }

  .value {
    padding: var(--space-8);
  }

  .value + .value {
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }

  .value__art {
    margin-top: auto;
    padding-top: var(--space-8);
  }

  /* One-row scenes run into the column's side padding to gain size */
  .value__art--wide {
    width: calc(100% + 2 * var(--space-6));
    max-width: none;
    margin-inline: calc(var(--space-6) * -1);
  }
}

/* ==========================================================================
   08 TERADATA — the partner chapter
   ========================================================================== */
/* Teradata orange is this chapter's primary colour (tokens.css: the logo's own
   #FF5F02). It marks what is Teradata's: the eyebrow, the headline's second
   clause, the main CTA, the numbers, the Teradata environment in the artwork.
   Anonomatic stays blue (built-in lane, mark, "Built in"), identity stays
   gold, protected data stays teal. */
.teradata {
  --text-accent: var(--teradata-orange);
  --text-heading-accent: var(--teradata-orange);
}

.teradata__top {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

/* Primary CTA in Teradata orange. The label is navy-950, not white:
   6.05:1 on the fill (white is 3.05:1). Hover 7.09:1, pressed 4.98:1.
   The roll (buttons.css) and the blue focus ring are untouched. */
.btn.btn-teradata {
  background-color: var(--teradata-orange);
  color: var(--navy-950);
}

.btn.btn-teradata:hover {
  background-color: var(--teradata-orange-hover);
  color: var(--navy-950);
}

.btn.btn-teradata:active {
  background-color: var(--teradata-orange-active);
}

/* Three lines: Built-in data / protection for / Teradata customers. */
.teradata__title {
  max-width: 18ch;
  margin-top: var(--space-4);
}

.teradata__text {
  max-width: 40ch;
  margin-top: var(--space-6);
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

.teradata__actions {
  margin-top: var(--space-8);
}

.teradata__columns {
  display: grid;
  margin-top: var(--space-section-head);
  list-style: none;
  padding: 0;
}

.td-column {
  padding: var(--space-6);
}

.td-column + .td-column {
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.td-column__number {
  font-family: var(--font-label);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--teradata-orange);
}

.td-column__title {
  margin-top: var(--space-6);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.td-column__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-label);
  line-height: var(--lh-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.td-column__tag::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  background-color: var(--navy-400);
}

.td-column__tag--core::before {
  background-color: var(--ill-action);
}

.td-column__tag--protected::before {
  border-radius: 50%;
  background-color: var(--ill-protected);
}

/* "For Teradata customers" is Teradata's own: its marker is the logo orange */
.td-column__tag--teradata::before {
  background-color: var(--teradata-orange);
}

.td-column__list {
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.td-column__list li {
  padding-block: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  color: var(--text-primary);
}

/* Client, GitHub #6: "Make orange" (Teradata's own instruction to customers) */
.td-column__note {
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  color: var(--teradata-orange); /* 6.05:1 on navy-950 */
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
}

/* Support & training is a gateway: the portal itself lives on /teradata/ */
.td-column__action {
  --action-link: var(--teradata-orange); /* 6.05:1 on navy-950 */
  --action-link-hover: var(--teradata-orange-hover); /* 7.09:1 */
  margin-top: var(--space-4);
}

/* Artwork: the Teradata environment is orange. The boundary is dashed like
   the rest of the scene's guides and passes behind the racks (underlay); the
   ports are where links leave the Teradata platform. */
.teradata__art .art-boundary--teradata {
  fill: none;
  stroke: var(--teradata-orange);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-dasharray: 8 6;
  vector-effect: non-scaling-stroke;
  animation: art-ring-march 1s steps(14) infinite; /* one dash + one gap is 14px: 1px a step */
}

.js .teradata__art [data-motion~="line"]:not(.is-in-view) .art-boundary--teradata {
  animation-play-state: paused;
}

.teradata__art .art-port--teradata {
  stroke: var(--teradata-orange);
}

.art-label--teradata::before {
  background-color: var(--teradata-orange);
}

@media (prefers-reduced-motion: reduce) {
  .teradata__art .art-boundary--teradata {
    animation: none;
  }
}

/* The drawing fills its box to the top edge, so the two callouts at the top
   sit in a band above it (the figure's own padding, one label line high)
   and can never lie on the modules. "Built in" sits in the clear corner
   under the platform. */
.teradata__art [data-label="td-environment"] { --x: 0%; --y: calc(var(--space-2) * -1); }
.teradata__art [data-label="td-builtin"] { --x: 38%; --y: 93%; }
.teradata__art [data-label="td-extend"] { --x: 100%; --y: calc(var(--space-2) * -1); }

@media (min-width: 768px) {
  .teradata__art {
    padding-top: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .teradata__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-grid-gap);
  }

  /* Two columns: "03 Support & training" is off the site for now (client 2026-10-08) */
  .teradata__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .td-column {
    padding: var(--space-8);
  }

  .td-column + .td-column {
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

/* The copy column stays wide enough for the headline's longest line */
@media (min-width: 1200px) {
  .teradata__top {
    grid-template-columns: minmax(30rem, 5fr) minmax(0, 7fr);
  }
}

/* ==========================================================================
   09 CUSTOMER EVIDENCE — two stories, no carousel
   ========================================================================== */
.page-home .customers__heading {
  max-width: none;
}

.page-home .customers__heading .section-heading__title {
  max-width: 32ch;
}

/* The story card (.cases, .case) is components/case.css */

@media (min-width: 1024px) {
  /* One sentence per line */
  .customers__heading .text-soft {
    display: block;
  }

  /* The action sits across from the heading, on its last line */
  .customers__heading {
    flex-direction: row;
    align-items: flex-end;
    align-items: last baseline;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .customers__cta {
    flex-shrink: 0;
  }
}

/* Desktop, on a screen tall enough to hold the heading and a story: the
   heading and its action stay under the header while the stories pile up.
   The first story stops under the heading, the second slides over it and
   stops a step lower, then the heading and both stories leave together (the
   heading sticks inside .container, which ends with the list). A card that
   sticks cannot share a grid row, so the list is a plain block here and
   animations.js gives the cards one height (--stack-height) and reports the
   heading's height (--stack-head), both from data-stack. */
@media (min-width: 1024px) and (min-height: 52rem) {
  .js .customers {
    --customers-head-gap: calc(var(--space-section-head) - var(--space-6));
  }

  .js .customers__heading {
    position: sticky;
    top: var(--header-height);
    z-index: 2;
    /* The extra top padding is pulled back by the margin, so the section
       rests where it did; stuck, it gives the text room under the header */
    margin-top: calc(var(--space-4) * -1);
    margin-bottom: var(--customers-head-gap);
    padding-block: var(--space-4) var(--space-6);
    background-color: var(--surface-primary); /* the stories pass under it */
  }

  .js .cases {
    display: block;
    /* Where the pile is complete, the heading and the first story let go and
       leave with the second. Each sticks inside its parent's content box, so
       the boxes are shortened by the second story's stop (16px below the
       first) and, for the heading, by one story more less its own margin; the padding and the
       opposite margin hand the space back, so nothing below moves. */
    padding-bottom: var(--space-4);
    margin-bottom: calc((var(--stack-height, 0px) + var(--space-4) - var(--customers-head-gap)) * -1);
  }

  .js .customers > .container {
    padding-bottom: calc(var(--stack-height, 0px) + var(--space-4) - var(--customers-head-gap));
  }

  .js .case:last-child {
    margin-bottom: calc(var(--space-4) * -1);
  }

  .js .case {
    position: sticky;
    top: calc(var(--header-height) + var(--stack-head, 0px));
    min-height: var(--stack-height, 0);
    /* SCROLL: a story steps back as the next one covers it (--stack-cover, animations.js) */
    scale: calc(1 - var(--stack-cover, 0) * 0.04);
    opacity: calc(1 - var(--stack-cover, 0) * 0.4);
    transform-origin: center top;
    will-change: scale, opacity; /* its own layer: covered on scroll without painting the card again */
  }

  .js .case + .case {
    top: calc(var(--header-height) + var(--stack-head, 0px) + var(--space-4));
    margin-top: var(--space-6);
  }
}

/* ==========================================================================
   SCROLL MOTION: what this page adds to the entrances (animations.css)
   ========================================================================== */
/* A frame's corner marks close in on it from 16px out, once the block it
   holds has arrived. Same length and delay as the block's own entrance. */
@keyframes frame-lock {
  0%,
  40% {
    inset: calc((var(--border-width) + var(--space-4)) * -1);
    opacity: 0;
  }
}

.js .page-home .frame[data-reveal].is-revealing::before {
  will-change: transform; /* its own layer while the marks close in: each frame repaints four small marks, not the artwork the frame holds */
  --reveal-delay: inherit; /* the frame's own delay: the property does not inherit by itself (animations.css) */
  animation: frame-lock var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__stage[data-scroll] > .art,
  .js .case {
    scale: none;
    opacity: 1;
  }

  .js .page-home .frame[data-reveal].is-revealing::before {
    animation: none;
  }
}

/* ==========================================================================
   10 PLATFORM ARCHITECTURE
   ========================================================================== */
.platform {
  background: linear-gradient(var(--surface-primary), var(--surface-soft-tint));
  border-block: var(--border-width) solid var(--border-default);
}

/* Two-tone headline on two lines, as wide as it needs */
.page-home .platform .section-heading__title {
  max-width: none;
}

@media (min-width: 768px) {
  .platform .section-heading__title .text-soft {
    display: block;
  }
}

/* The diagram (components/platform-architecture.css) sits straight on the section,
   close to its headline and its links: the artwork carries its own margin */
.platform .section-heading {
  margin-bottom: var(--space-8);
}

.platform .section-heading__intro {
  max-width: 56ch;
  text-wrap: balance;
}

/* From 1024px the intro runs wider than the heading block's 48rem so it sets
   in three balanced lines */
@media (min-width: 1024px) {
  .platform .section-heading {
    max-width: 56rem;
  }

  .platform .section-heading__intro {
    max-width: 52rem;
  }
}

/* The platform pages, one step from the diagram that names them */
.platform__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-8);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.platform__stage {
  margin: 0;
}

.platform__art {
  --flow-width: 3;
  --flow-dash: 24px;
  --signal-width: 2;
  margin: 0;
  padding: var(--space-8) var(--space-4);
  background-color: var(--surface-primary);
}

.platform__art svg {
  display: block;
  width: 100%;
  height: auto;
}

/* display: block above would defeat the variant swap, so restate it */
.platform__art .illustration-variant--desktop {
  display: none;
}

@media (min-width: 768px) {
  .platform__art {
    padding: var(--space-12) var(--space-8);
  }

  .platform__art .illustration-variant--desktop {
    display: block;
  }

  .platform__art .illustration-variant--mobile {
    display: none;
  }
}

@media (min-width: 1200px) {
  .platform__art {
    padding: var(--space-16) var(--space-12);
  }
}

/* Diagram parts (HOME-ART-07). Sizes below are artwork units. */
.arch-node {
  fill: var(--surface-primary);
  stroke: var(--navy-200);
  stroke-width: 1;
}

.arch-node--system {
  fill: var(--navy-800);
  stroke: var(--navy-800);
}

.arch-node--core {
  fill: var(--blue-50);
  stroke: var(--blue-500);
  stroke-width: 1.5;
}

.arch-node--capability {
  fill: var(--surface-primary);
  stroke: var(--blue-300);
}

.arch-node--output {
  fill: var(--teal-50);
  stroke: var(--teal-500);
}

.arch-gate {
  fill: var(--blue-500);
}

.arch-link {
  fill: none;
  stroke-width: 1.5;
}

.arch-link--sensitive { stroke: var(--gold-500); }
.arch-link--protected { stroke: var(--teal-500); }

.arch-token--sensitive { fill: var(--gold-500); }
.arch-token--protected { fill: var(--teal-500); }

.arch-text {
  font-family: var(--font-body);
  font-size: 16px; /* artwork units */
  font-weight: var(--weight-semibold);
  fill: var(--text-primary);
}

.arch-text--inverse { fill: #f3f6fa; }

.arch-text--core {
  font-size: 24px; /* artwork units */
  fill: var(--blue-900);
}

.arch-caption {
  font-family: var(--font-label);
  font-size: 12px; /* artwork units */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  fill: var(--text-tertiary);
}

.arch-caption--sensitive { fill: var(--gold-700); }
.arch-caption--core { fill: var(--blue-700); }
.arch-caption--protected { fill: var(--teal-700); }

/* ==========================================================================
   10b DEPLOYMENT — components/deploy.css (the panel, HOME-ART-10)
   ========================================================================== */
/* Two lines from 768px: the statement, then where */
@media (min-width: 768px) {
  .deploy__title .text-soft {
    display: block;
  }
}

/* ==========================================================================
   11 RESOURCES — an editorial index
   The heading and its line on the left; four numbered entries on the
   right, each one link: index · title and line · arrow, dashed rules
   between. On hover or focus a blue rule draws along the entry, the title
   takes the link blue and the arrow steps forward.
   ========================================================================== */
.resources__inner {
  display: grid;
  gap: var(--space-10);
}

.resources__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.resources__title {
  max-width: 14ch;
}

.resources__intro {
  max-width: 36ch;
  color: var(--text-secondary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

/* The list itself (.resources__list, .resource) is components/resource-index.css */

@media (min-width: 1024px) {
  .resources__inner {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--space-grid-gap) * 2);
    align-items: start;
  }

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

  .resource__text {
    margin-top: var(--space-1);
  }
}

@media (min-width: 1200px) {
  .resource__body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .resource__text {
    margin-top: 0;
  }
}

/* ==========================================================================
   12 FINAL CTA: components/final-cta.css (shared with the inner pages)
   ========================================================================== */

/* ---------- Earlier final-CTA artwork (kept until the redesign is approved) ----------
   home-cta-transform.svg (.final-cta__flow) and home-cta-wave.svg (.final-cta__wave). */
.final-cta__flow {
  --flow-width: 2;
  --flow-dash: 48px;
  --signal-width: 1.5;
  margin-top: var(--space-section-sm);
}

/* The line keeps one height at every width and shows its middle on phones */
.cta-transform {
  display: block;
  width: 100%;
  height: var(--space-24);
}

.cta-transform__rail {
  fill: none;
  stroke: var(--border-default);
  stroke-width: 1;
}

.cta-transform__sensitive { fill: var(--gold-500); }
.cta-transform__protected { fill: var(--teal-500); }
.cta-transform__core { fill: var(--blue-500); }

/* Wave: gold lines run in from the left, meet at the mark and leave as calmer
   teal lines. Full-bleed. Below 960px it keeps its height and shows its middle.
   Lengths are artwork units: the strokes are about 1px at every width. */
.final-cta__wave {
  margin-top: var(--space-10);
}

.cta-wave {
  --motion-draw: 1800ms;
  --wave-stroke: 2;
  display: block;
  width: 100%;
  height: auto;
  min-height: var(--space-40);
}

.cta-wave__stop-sensitive { stop-color: var(--ill-sensitive); }
.cta-wave__stop-action { stop-color: var(--ill-action); }
.cta-wave__stop-protected { stop-color: var(--ill-protected); }

.cta-wave__stop-wash {
  stop-color: var(--blue-100);
  stop-opacity: 0.45;
}

.cta-wave__stop-clear {
  stop-color: var(--blue-100);
  stop-opacity: 0;
}

.cta-wave__axis {
  fill: none;
  stroke: var(--guide-line);
  stroke-width: var(--wave-stroke);
}

.cta-wave__line {
  fill: none;
  stroke-width: var(--wave-stroke);
}

.cta-wave__body {
  fill-opacity: 0.07;
}

.cta-wave__rider .particle-face {
  stroke: var(--surface-primary);
  stroke-width: var(--wave-stroke);
}

/* The mark sits on a plain disc: lines enter at the gold port and leave at the teal one */
.cta-wave__orbit {
  fill: none;
  stroke: var(--blue-300);
  stroke-width: var(--wave-stroke);
  stroke-linecap: round;
  stroke-dasharray: 0 8;
}

.cta-wave__disc {
  fill: var(--surface-primary);
  stroke: var(--blue-200);
  stroke-width: var(--wave-stroke);
  transition: stroke var(--motion-slow) var(--ease-standard);
}

.cta-wave__port {
  stroke: var(--surface-primary);
  stroke-width: var(--wave-stroke);
}

.cta-wave__port--in { fill: var(--ill-sensitive); }
.cta-wave__port--out { fill: var(--ill-protected); }

/* One ring leaves the disc each time a record is protected */
.cta-wave__pulse {
  fill: none;
  stroke: var(--ill-action);
  stroke-width: var(--wave-stroke);
  opacity: 0;
  transform: scale(1.36);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity calc(var(--motion-slow) * 2) var(--ease-out),
    transform calc(var(--motion-slow) * 2) var(--ease-out);
}

[data-core].is-signal .cta-wave__pulse {
  opacity: 0.6;
  transform: none;
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform 0s;
}

[data-core].is-signal .cta-wave__disc {
  stroke: var(--ill-action);
  transition-duration: var(--motion-fast);
}

@media (min-width: 768px) {
  .final-cta__wave {
    margin-top: var(--space-12);
  }
}

@media (min-width: 1200px) {
  .cta-wave {
    --wave-stroke: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resource,
  .resource__arrow,
  .cta-wave__disc,
  .cta-wave__pulse {
    transition: none;
  }
}