/* ==========================================================================
   Cloudstore Central — Page-specific compositions
   ========================================================================== */

/* Hero */
.hero {
  position: relative;
  background: var(--colour-navy);
  color: var(--text-on-inverse);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40rem 30rem at 80% -10%, color-mix(in srgb, var(--colour-cyan) 22%, transparent), transparent 70%),
    radial-gradient(30rem 24rem at 0% 110%, color-mix(in srgb, var(--colour-teal) 18%, transparent), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, #fff 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, #fff 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(60rem 40rem at 70% 30%, #000, transparent 75%);
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero-inner { padding-block: clamp(3.5rem, 2.5rem + 6vw, 7rem); max-width: 56rem; }
.hero h1 { color: #fff; }
.hero .lead { color: var(--text-on-inverse); max-width: 46ch; }
.hero .cluster { margin-top: var(--space-lg); }

.hero-split {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
/* Full-width hero: let the container span the viewport so the hero image
   has more room, while the copy column stays capped at a comfortable measure. */
@media (min-width: 64rem) {
  .hero > .container {
    max-width: none;
  }
  .hero-split {
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .hero-media .hero-image { max-width: 56rem; margin-inline: auto; }
}

/* Page header (interior) */
.page-header { background: var(--bg-subtle); border-bottom: var(--border-hairline); }
.page-header .container { padding-block: var(--space-xl); }
.page-header h1 { max-width: 22ch; }
.page-header .lead { margin-top: var(--space-sm); }

/* Page header with a decorative background image (interior pages).
   An abstract "Secure Signal" banner sits behind a navy gradient scrim so the
   eyebrow/heading/lead stay legible (WCAG 2.2 AA) over any part of the image. */
.page-header--image {
  position: relative;
  isolation: isolate;
  background: var(--colour-navy);
  border-bottom: none;
  overflow: hidden;
  color: var(--text-on-inverse);
}
.page-header--image .container { padding-block: clamp(var(--space-xl), 2rem + 3vw, var(--space-3xl)); }
.page-header__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.page-header--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Fallback scrim for browsers without color-mix(): keeps text contrast. */
  background: linear-gradient(
    90deg,
    rgba(10, 14, 23, 0.92) 0%,
    rgba(5, 6, 12, 0.78) 55%,
    rgba(5, 6, 12, 0.6) 100%
  );
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--colour-ink) 90%, transparent) 0%,
      color-mix(in srgb, var(--colour-navy) 78%, transparent) 55%,
      color-mix(in srgb, var(--colour-navy) 60%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      color-mix(in srgb, var(--colour-ink) 55%, transparent) 0%,
      transparent 60%
    );
}
.page-header--image .eyebrow { color: var(--colour-cyan); }
.page-header--image h1 { color: #fff; }
.page-header--image .lead { color: var(--text-on-inverse); }
.page-header--image .article-meta { color: var(--text-on-inverse-muted); }

/* Section heading block */
.section-head { max-width: 52ch; margin-bottom: var(--space-xl); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: var(--space-2xs); }
.section-head h2 + .lead { margin-top: var(--space-sm); }

/* Logo / trust strip (no invented logos — text statements only) */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-xl);
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* Final CTA band */
/* ----- home: workflow video ----- */
.home-video {
  margin: 0 auto;
  max-width: 62rem;
}
.home-video__player {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: var(--border-default);
  box-shadow: var(--shadow-md);
  background: var(--colour-ink);
}
.home-video__caption {
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  text-align: center;
}

/* ----- mid-page CTA band (home) ----- */
.cta-strip {
  background: linear-gradient(120deg, var(--colour-ink), var(--colour-navy));
  color: var(--text-on-inverse);
  border-block: 1px solid color-mix(in srgb, var(--colour-cyan) 25%, transparent);
}
.cta-strip__inner {
  padding-block: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
}
.cta-strip__copy { max-width: 46rem; }
.cta-strip h2 { color: #fff; font-size: var(--fs-h3); margin: 0 0 var(--space-2xs); }
.cta-strip p { color: var(--text-on-inverse-muted); margin: 0; }
.cta-strip__actions { flex: 0 0 auto; }

.final-cta { background: var(--colour-ink); color: var(--text-on-inverse); }
.final-cta .container { padding-block: var(--space-2xl); }
.final-cta h2 { color: #fff; max-width: 24ch; }
.final-cta p { color: var(--text-on-inverse-muted); max-width: 52ch; }
.final-cta .cluster { margin-top: var(--space-lg); }
.final-cta .button-secondary {
  background: var(--text-on-inverse);
  color: var(--colour-ink);
  border-color: transparent;
}
.final-cta .button-secondary:hover { background: #fff; color: var(--colour-ink); border-color: transparent; }

/* Feature row (alternating) */
.feature-row { display: grid; gap: var(--space-xl); align-items: center; }
@media (min-width: 64rem) {
  .feature-row { grid-template-columns: 1fr 1fr; }
  .feature-row.reverse > :first-child { order: 2; }
}

/* Definition / spec list */
.spec-list { display: grid; gap: 0; }
.spec-list > div {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: var(--border-hairline);
}
@media (max-width: 40rem) { .spec-list > div { grid-template-columns: 1fr; gap: var(--space-3xs); } }
.spec-list dt { font-weight: var(--fw-semibold); }
.spec-list dd { color: var(--text-secondary); margin: 0; }

/* Use-case list with ticks */
.tick-list { list-style: none; padding: 0; display: grid; gap: var(--space-2xs); }
.tick-list li { display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--space-2xs); align-items: start; }
.tick-list li::before {
  content: "";
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.25rem;
  background: var(--colour-teal);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Filters (markets / insights) */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  align-items: center;
  padding: var(--space-sm) 0;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.35rem 0.9rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border: var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--colour-cloud-white);
  color: var(--text-secondary);
}
.filter-chip:hover { border-color: var(--colour-neutral-dark); color: var(--text-primary); }
.filter-chip[aria-pressed="true"] { background: var(--colour-ink); color: #fff; border-color: var(--colour-ink); }

.is-filtered-out { display: none; }

/* Article / insight body */
.article-body { max-width: var(--width-narrow); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-sm); font-size: var(--fs-small); color: var(--text-muted); }
.article-body > * + * { margin-top: var(--space-md); }
.article-body h2 { margin-top: var(--space-xl); }

/* On-this-page nav */
.toc { position: sticky; top: calc(var(--header-height) + 1rem); }
.toc h2 { font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--text-muted); }
.toc ul { list-style: none; padding: 0; margin-top: var(--space-sm); display: grid; gap: var(--space-3xs); border-left: var(--border-hairline); }
.toc a { display: block; padding: var(--space-3xs) var(--space-sm); font-size: var(--fs-small); color: var(--text-secondary); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.toc a:hover { color: var(--text-primary); border-color: var(--colour-cyan); }

/* Cookie consent bar */
.cookie-bar {
  position: fixed;
  left: var(--space-md); right: var(--space-md); bottom: var(--space-md);
  z-index: 80;
  max-width: 32rem;
  margin-inline: auto;
  background: var(--colour-cloud-white);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-lg);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar h2 { font-size: var(--fs-h4); }
.cookie-bar p { font-size: var(--fs-small); color: var(--text-secondary); margin-top: var(--space-2xs); }
.cookie-bar .cluster { margin-top: var(--space-md); }

.cookie-prefs { display: grid; gap: var(--space-sm); }

/* Contact layout */
.contact-grid { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 64rem) { .contact-grid { grid-template-columns: 1.4fr 1fr; } }

/* Design-system swatches */
.swatch-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.swatch { border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.swatch__chip { height: 4rem; }
.swatch__meta { padding: var(--space-2xs) var(--space-xs); font-size: var(--fs-small); }
.swatch__meta code { display: block; color: var(--text-muted); font-size: 0.78rem; }

.ds-section { padding-block: var(--space-2xl); border-bottom: var(--border-hairline); }
.ds-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }

/* ===================================================================
   Generator-authored page support classes (added for content pages).
   Loaded after components/forms/diagrams so it may refine those bases.
   =================================================================== */

/* Hero */
.hero-copy .eyebrow { color: var(--colour-cyan); }
.hero-media { margin: 0; }
.hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg, 0 24px 60px -28px rgba(0, 0, 0, 0.55));
}

/* Gentle entrance for the hero image (motion-safe only). */
@media (prefers-reduced-motion: no-preference) {
  .hero-image {
    animation: hero-image-enter 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes hero-image-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to { opacity: 1; transform: none; }
  }
}

/* Card grids */
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
@media (min-width: 48rem) { .card-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Card variants */
.card-article { display: flex; flex-direction: column; }
.card-article .card-cta { margin-top: var(--space-sm); }
.card-meta { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-2xs); }

/* "View all" links beneath grids */
.section-more { margin-top: var(--space-lg); }
.icon-inline { width: 1em; height: 1em; vertical-align: -0.125em; }

/* Muted note — secondary colour on light backgrounds, lighter tone on inverse sections */
.muted-note { color: var(--text-secondary); font-size: var(--fs-small); }
.section-inverse .muted-note,
.callout .muted-note,
.final-cta .muted-note { color: var(--text-on-inverse-muted); }

/* Ghost button on dark backgrounds */
.button-ghost.button-on-dark { color: #fff; border-color: color-mix(in srgb, #fff 45%, transparent); }
.button-ghost.button-on-dark:hover { background: color-mix(in srgb, #fff 12%, transparent); }

/* Overview groups (services / technology landing) */
.overview-groups { display: flex; flex-direction: column; gap: var(--space-2xl); }
.overview-group > h2 { margin-bottom: var(--space-lg); }

/* Split aside */
.split__aside .diagram { margin: 0; }

/* Two-column tick lists */
.two-col { display: grid; gap: var(--space-xl); }
@media (min-width: 48rem) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col h3 { margin-bottom: var(--space-sm); }

/* Note callout (light) — refines the dark .callout base */
.callout--note {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: var(--bg-subtle);
  color: var(--text-primary);
  border: var(--border-hairline);
  border-left: 3px solid var(--colour-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.callout--note h2, .callout--note h3 { color: var(--text-primary); }
.callout--note p { margin: 0; color: var(--text-secondary); }
.callout--mt-20 { margin-top: 20px; }
.callout--mt-30 { margin-top: 30px; }
.callout__icon { color: var(--colour-teal); flex-shrink: 0; line-height: 0; }
.callout__icon svg { width: 1.4rem; height: 1.4rem; display: block; }

/* Related terms / also-covers heading */
.related-terms-title { font-size: var(--fs-h4); margin-bottom: var(--space-md); }

/* Filter bar */
.filter-bar__label { font-weight: var(--fw-semibold); margin-bottom: var(--space-sm); }
.filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* Pull quote in articles */
.pull-quote {
  border-left: 3px solid var(--colour-cyan);
  padding-left: var(--space-lg);
  margin: var(--space-xl) 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
.pull-quote p { margin: 0; }

/* Contact aside */
.contact-aside {
  background: var(--bg-subtle);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.contact-aside h2 { margin-top: 0; }

/* Form support bits */
.req { color: var(--colour-error); }
.checkbox { display: flex; gap: var(--space-sm); align-items: flex-start; }
.checkbox input { margin-top: 0.2em; width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.checkbox span { font-size: var(--fs-small); color: var(--text-secondary); }
.field-consent { margin-top: var(--space-sm); }
.form-note { font-size: var(--fs-small); color: var(--text-muted); margin-top: var(--space-sm); }

/* Legal pages */
.legal-body h2 { margin-top: var(--space-xl); }
.legal-body .callout--note { margin-bottom: var(--space-lg); }

/* Platform layer stack */
.layer-stack__item {
  background: var(--bg-subtle);
  border: var(--border-hairline);
  border-left: 3px solid var(--colour-cyan);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.layer-stack__item h3 { margin: 0 0 var(--space-2xs); font-size: var(--fs-h4); }
.layer-stack__item p { margin: 0; color: var(--text-secondary); }

/* Platform architecture diagram wrapper */
.platform-architecture .diagram { margin: 0 auto; max-width: 60rem; }

/* Platform Overview — module cards (three are visually prominent) */
.module-card { display: flex; flex-direction: column; gap: var(--space-2xs); }
.module-card h3 { font-size: var(--fs-h4); }
.module-card .text-link { margin-top: auto; }
.module-card--prominent {
  border-color: var(--colour-teal);
  border-left: 3px solid var(--colour-teal);
  box-shadow: var(--shadow-md);
}
.module-card__flag {
  margin: 0;
  font-size: var(--fs-tiny, 0.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-teal);
}

/* How Cloudstore Works — numbered operational lifecycle */
.numbered-steps {
  counter-reset: step;
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}
.numbered-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  min-height: 1.9rem;
  display: flex;
  align-items: center;
}
.numbered-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--colour-navy);
  color: #fff;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}

/* How Cloudstore Works — audience scenario cards */
.scenario-card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2xs); }
.scenario-card__list { margin: 0; }
.scenario-card__list dt {
  font-size: var(--fs-tiny, 0.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--colour-teal);
  margin-top: var(--space-xs);
}
.scenario-card__list dd { margin: 0; color: var(--text-secondary); }