/* ==========================================================================
   Inner pages — composition shared by every page under solutions/,
   platform/, company/, customers/, teradata/ and resources/.
   Components (frame, art, buttons, case, resource index, final CTA…) live
   in src/css/components/. Everything here is layout only these pages use.
   Every space and size is a token on the 8pt grid (tokens.css §6).

   01 page hero + story index · 02 outcomes (the three story chapters)
   03 principle band · 04 related pages · 05 customers · 06 teradata
   07 resources hub

   The challenge template (solutions, platform, about):
   hero → three outcomes → principle → related → final CTA (partial).
   ========================================================================== */

/* Rhythm: the homepage's. 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-inner {
  --space-section: var(--space-20);
  --space-section-sm: var(--space-20);
}

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

/* A frame's corner marks close in on it once the block it holds has arrived
   (the homepage's entrance, home.css) */
@keyframes frame-lock {
  0%,
  40% {
    inset: calc((var(--border-width) + var(--space-4)) * -1);
    opacity: 0;
  }
}

.js .page-inner .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;
}

/* ---------- Check list: short facts, one per rule ---------- */
.check-list {
  width: 100%;
  padding: 0;
  list-style: none;
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

.check-list__item {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: var(--border-width) var(--guide-style) var(--guide-line);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.check-list__item .icon {
  color: var(--ill-action);
}

/* A name and its line: the name leads, the line explains */
.check-list__item strong {
  display: block;
}

.check-list__note {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-weight: var(--weight-regular);
}

/* ==========================================================================
   01 PAGE HERO
   Left-aligned, where the homepage's is centred: the page's name, its
   promise in two tones, one paragraph and the actions. Beside it (under it
   below 1024px) the story index: the page's three outcomes as its contents.
   Replaced by the internal hero (components/
   internal-hero.css): every inner page uses it since 2026-10-03, with the
   story index in its right column; .page-hero is kept for rollback only.
   ========================================================================== */
.page-hero {
  padding-top: var(--space-10);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-10);
}

.page-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Where the page sits, then its name: "Solutions / Compliance" */
.page-hero__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  font-family: var(--font-label);
  font-size: var(--text-eyebrow-caps);
  line-height: var(--lh-eyebrow-caps);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}

.page-hero__crumb-group,
.page-hero__crumb-rule {
  color: var(--text-tertiary);
}

.page-hero__title {
  max-width: 20ch;
  margin-top: var(--space-4);
  font-size: var(--text-hero);
  line-height: var(--lh-hero);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.page-hero__line {
  display: block;
}

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

.page-hero__actions {
  align-self: stretch; /* so the buttons can fill the row where they stack (<480px) */
  margin-top: var(--space-8);
}

/* ---------- Story index: the page's contents, three numbered entries ---------- */
.story-index {
  padding: var(--space-6) var(--space-4) var(--space-2);
  background-color: var(--surface-primary);
}

.story-index__label {
  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);
}

.story-index__list {
  margin-top: var(--space-4);
  padding: 0;
  list-style: none;
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

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

.story-index__link {
  position: relative;
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-2);
  min-height: var(--space-16);
  padding: var(--space-4) var(--space-2);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--motion-base) var(--ease-standard);
}

/* The rule that draws along the entry, as in the resource index */
.story-index__link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--border-width) * -1);
  left: 0;
  height: 2px;
  background-color: var(--guide-mark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--motion-slow) var(--ease-out);
}

.story-index__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(--text-tertiary);
  transition: color var(--motion-base) var(--ease-standard);
}

.story-index__title {
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-subheading);
  transition: color var(--motion-base) var(--ease-standard);
}

/* The arrow points down the page: these are in-page links */
.story-index__arrow {
  color: var(--text-tertiary);
  rotate: 90deg;
  transition:
    color var(--motion-base) var(--ease-standard),
    translate var(--motion-base) var(--ease-out);
}

.story-index__link:is(:hover, :focus-visible) {
  background-color: var(--surface-secondary);
}

.story-index__link:is(:hover, :focus-visible)::after {
  transform: none;
}

.story-index__link:is(:hover, :focus-visible) :is(.story-index__number, .story-index__title, .story-index__arrow) {
  color: var(--text-accent);
}

.story-index__link:is(:hover, :focus-visible) .story-index__arrow {
  translate: 0 var(--space-1);
}

.story-index__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: calc(var(--focus-ring-width) * -1);
}

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

  .page-hero__title {
    margin-top: var(--space-6);
  }

  .story-index {
    padding: var(--space-8) var(--space-6) var(--space-4);
  }
}

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

  /* Each clause runs as wide as the column lets it */
  .page-hero__title {
    max-width: none;
  }
}

/* The copy takes two thirds: most promises then set in two or three lines */
@media (min-width: 1200px) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

/* ==========================================================================
   02 OUTCOMES — the page's three story chapters
   Each is one framed card: the words (number, headline, the tension, the
   turn, what changes, the technology behind it) and the scene on a tinted
   ground. The scene changes sides from one chapter to the next.
   ========================================================================== */
.outcomes {
  display: grid;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

.outcome {
  display: grid;
  background-color: var(--surface-primary);
}

.outcome__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}

.outcome__index {
  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(--text-tertiary);
}

.outcome__title {
  max-width: 20ch;
  margin-top: var(--space-4);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tracking-heading);
}

/* The tension: said plainly, at reading size */
.outcome__lead {
  max-width: 40ch;
  margin-top: var(--space-6);
  color: var(--text-primary);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
}

/* The turn: what Anonomatic changes */
.outcome__text {
  max-width: 48ch;
  margin-top: var(--space-4);
  color: var(--text-secondary);
}

.outcome .check-list {
  margin-top: var(--space-6);
}

.outcome .check-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* The technology behind the outcome: a label, not a lesson (the homepage's .value__tech) */
.outcome__tech {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  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);
}

/* A text link inside a chapter, under its list */
.outcome__link {
  margin-top: var(--space-4);
}

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

/* The scene. Rasters differ in shape (a row of tiles, a single tall tile),
   so each figure gives its own ratio (--art-ratio: width / height, from the
   manifest) and the artwork is as wide as its cell allows up to the width at
   which it would be --art-height tall. */
.outcome__art {
  --art-height: 16rem;
  grid-template-columns: minmax(0, min(100%, calc(var(--art-height) * var(--art-ratio, 2))));
  justify-content: center;
  align-content: center;
  padding: var(--space-8) var(--space-4);
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
  background-color: var(--surface-secondary);
}

@media (min-width: 768px) {
  .outcome__body {
    padding: var(--space-10);
  }

  .outcome__art {
    --art-height: 22rem;
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  /* Words and scene side by side, in equal halves */
  .outcome {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outcome--reverse .outcome__art {
    order: -1;
    border-right: var(--border-width) var(--guide-style) var(--guide-line);
    border-left: 0;
  }

  .outcome__body {
    justify-content: center;
    padding: var(--space-10);
  }

  .outcome__art {
    --art-height: 24rem;
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

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

/* ==========================================================================
   03 PRINCIPLE — the dark band every challenge page comes back to: the
   product runs where the data lives (src/partials/principle.html)
   ========================================================================== */
.principle__panel {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
}

.principle__icon {
  width: var(--space-12);
  height: var(--space-12);
  fill: var(--ill-protected-soft);
  stroke: var(--ill-protected);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.principle__title {
  max-width: 20ch;
  margin-top: var(--space-6);
}

.principle__link {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .principle__panel {
    padding: var(--space-10);
  }
}

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

/* ==========================================================================
   04 RELATED — where to go next: a heading beside the resource index
   (components/resource-index.css)
   ========================================================================== */
.related__inner {
  display: grid;
  gap: var(--space-10);
}

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

.related__title {
  max-width: 14ch;
}

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

  /* Beside its heading the entry is narrow: title over line until 1200px */
  .related .resource__body {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .related .resource__text {
    margin-top: 0;
  }
}

/* The final CTA follows on the same ground: the section's 80px is the gap */

/* ==========================================================================
   05 CUSTOMERS — a story is an outcome card with the client's name over it
   and its figures under the words (.case__metrics, components/case.css)
   ========================================================================== */
.outcome__client {
  margin-top: var(--space-4);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-subheading);
  color: var(--text-secondary);
}

.outcome__client + .outcome__title {
  margin-top: var(--space-2);
}

.outcome .case__metrics {
  width: 100%;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
}

/* The C&A scene's label sits above the artwork, as on the homepage (components/case.css) */
.outcome__art [data-label="ca-teradata"] { --x: 100%; --y: calc(var(--space-2) * -1); }

/* A story set into another page (the data-sharing page's L.A. Trust callout) */
.callout .section-heading {
  max-width: none;
}

@media (min-width: 1024px) {
  .callout .section-heading {
    flex-direction: row;
    align-items: flex-end;
    align-items: last baseline;
    justify-content: space-between;
    gap: var(--space-8);
  }

  .callout .section-heading > .btn-text {
    flex-shrink: 0;
  }
}

/* ==========================================================================
   06 TERADATA — the partner page: the internal hero with the integration scene,
   what is built in, what extends it, and the support registration
   ========================================================================== */
/* The hero is the shared internal hero (components/internal-hero.css); the
   integration scene's callouts sit above and below the drawing */
.internal-hero__art [data-label="td-environment"] { --x: 0%; --y: calc(var(--space-2) * -1); }
.internal-hero__art [data-label="td-builtin"] { --x: 38%; --y: 93%; }
.internal-hero__art [data-label="td-extend"] { --x: 100%; --y: calc(var(--space-2) * -1); }

/* Client, GitHub #30: the official Teradata logo (orange, never recoloured)
   stands in for the word in the headline. Sized so the wordmark's lowercase
   matches Open Sans' x-height (0.535em; the logo's x-height is 19.7 of its
   29 units), its baseline on the text's baseline */
.internal-hero__title-logo {
  display: inline-block;
  width: auto;
  height: 0.79em;
  vertical-align: -0.04em;
}

.td-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(--text-tertiary);
}

/* What is built in: the statement beside the list */
.builtin__panel {
  display: grid;
  gap: var(--space-8);
  padding: var(--space-6);
  background-color: var(--surface-primary);
}

.builtin__title {
  max-width: 14ch;
  margin-top: var(--space-4);
}

.builtin__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);
}

.builtin__note {
  margin-top: var(--space-6);
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
}

@media (min-width: 640px) {
  .builtin .check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-8);
  }
}

@media (min-width: 768px) {
  .builtin__panel {
    padding: var(--space-10);
  }
}

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

/* What extends it: four capabilities in one frame, two by two, on the page's own white (designer 2026-10-08) */
.extend__grid {
  display: grid;
  padding: 0;
  list-style: none;
  background-color: var(--surface-primary);
}

.capability {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--space-6);
}

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

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

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

.capability .btn-text {
  margin-top: auto;
  padding-top: var(--space-4);
}

@media (min-width: 768px) {
  .extend__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .capability:nth-child(2) {
    border-top: 0;
  }

  .capability:nth-child(even) {
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

@media (min-width: 1200px) {
  .capability {
    padding: var(--space-10);
  }
}

/* Support and training: what is inside, and the registration */
.support__panel {
  display: grid;
  background-color: var(--surface-primary);
}

.support__copy,
.support__form {
  padding: var(--space-6);
}

.support__form {
  border-top: var(--border-width) var(--guide-style) var(--guide-line);
  background-color: var(--surface-secondary);
}

.support__title {
  max-width: 14ch;
  margin-top: var(--space-4);
}

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

.support .check-list {
  margin-top: var(--space-8);
}

.support .check-list__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.access-form {
  display: grid;
  gap: var(--space-6);
}

.access-form__title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.access-form__note {
  color: var(--text-tertiary);
  font-size: var(--text-body-sm);
  line-height: var(--lh-body-sm);
}

/* Sent: the form gives way to its confirmation (src/js/access-form.js) */
.access-form__done {
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.access-form__done .icon {
  --icon-size: 2rem;
  color: var(--ill-protected);
}

.access-form__done-title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tracking-heading);
}

.access-form__done-text {
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .support__copy,
  .support__form {
    padding: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .support__panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .support__form {
    display: grid;
    align-content: center;
    border-top: 0;
    border-left: var(--border-width) var(--guide-style) var(--guide-line);
  }
}

@media (min-width: 1200px) {
  .support__copy,
  .support__form {
    padding: var(--space-12);
  }
}

/* ==========================================================================
   07 RESOURCES HUB — the hero, then the index at full width
   ========================================================================== */
.page-hero--plain .page-hero__inner {
  grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .page-inner .frame[data-reveal].is-revealing::before {
    animation: none;
  }

  .story-index__link,
  .story-index__link::after,
  .story-index__number,
  .story-index__title,
  .story-index__arrow {
    transition: none;
  }
}