/* Shared look for static marketing pages (§4.1, §33): sticky header, hero,
   bands, cards, screenshots, FAQ, column footer. Products recolor it from
   their own product.css. */

@layer components {

  :root {
    --tint: light-dark(#f1f5fc, #131922);
    --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px -8px rgb(0 0 0 / .18);
    scroll-padding-block-start: 5rem;
  }

  /* Header: sticky bar, brand left, nav right. */

  body > header {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
    border-image:
      linear-gradient(to top, var(--border) 1px, color-mix(in srgb, var(--surface) 92%, transparent) 1px)
      fill 0 / 0 / 0 100vw;
    backdrop-filter: blur(8px);

    & nav a:not(.button) {
      color: var(--text);
      text-decoration: none;

      &:hover {
        color: var(--accent);
      }
    }
  }

  .brand {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    color: var(--text);
    font-weight: 700;
    text-decoration: none;

    & img {
      border-radius: var(--radius-sm);
    }
  }

  /* Buttons. */

  .button {
    font-weight: 600;

    &[aria-disabled="true"] {
      cursor: default;
    }
  }

  .button--large {
    padding: var(--space-3) var(--space-6);
    font-size: 1.0625rem;
  }

  /* Type. */

  h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    letter-spacing: -.02em;
  }

  h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    letter-spacing: -.01em;
  }

  h3 {
    font-size: 1.125rem;
  }

  .eyebrow {
    color: var(--accent);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .lead {
    color: var(--text-muted);
    font-size: 1.1875rem;
  }

  .fine-print {
    color: var(--text-muted);
    font-size: .875rem;
  }

  /* Sections. Full-bleed backgrounds without leaving the content width. */

  main {
    padding-block: 0;
  }

  main > section {
    padding-block: clamp(3rem, 8vw, 6rem);
  }

  section > * + *,
  .hero > div > * + * {
    margin-block-start: var(--space-4);
  }

  .hero {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    border-image: linear-gradient(var(--tint), var(--surface)) fill 0 / 0 / 0 100vw;

    @media (width >= 60rem) {
      grid-template-columns: 2fr 3fr;
    }

    & .cluster {
      margin-block-start: var(--space-6);
    }
  }

  .hero {
    border-image: linear-gradient(var(--tint), var(--surface)) fill 0 / 0 / 0 100vw;
  }

  .hero-art {
    justify-self: center;
    inline-size: 100%;
    max-inline-size: min(26rem, 75vw);
    block-size: auto;
  }

  .tint {
    border-image: linear-gradient(var(--tint) 0 0) fill 0 / 0 / 0 100vw;
  }

  .band {
    text-align: center;

    & > p {
      margin-inline: auto;
    }

    & > .grid,
    & > details {
      text-align: start;
    }
  }

  .shot {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow);

    & img {
      display: block;
      inline-size: 100%;
      block-size: auto;
    }
  }

  /* Cards in a grid. */

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
    margin-block-start: var(--space-8);
    padding: 0;
    list-style: none;
  }

  .card {
    padding: var(--space-6);
    background: var(--surface);

    & > * + * {
      margin-block-start: var(--space-2);
    }
  }

  .steps {
    counter-reset: step;

    & li::before {
      counter-increment: step;
      content: counter(step);
      display: grid;
      place-items: center;
      inline-size: 2rem;
      block-size: 2rem;
      margin-block-end: var(--space-3);
      border-radius: 50%;
      background: var(--accent);
      color: var(--surface);
      font-weight: 700;
    }
  }

  .price {
    font-size: 2rem;
    font-weight: 700;

    & span {
      color: var(--text-muted);
      font-size: 1rem;
      font-weight: 400;
    }
  }

  /* Screenshot beside text. */

  .split {
    display: grid;
    gap: var(--space-8);
    align-items: center;

    @media (width >= 60rem) {
      grid-template-columns: 2fr 3fr;

      &.split--flip > div {
        order: 1;
      }
    }

    & > div > * + * {
      margin-block-start: var(--space-4);
    }
  }

  /* FAQ. */

  .faq details {
    max-inline-size: 48rem;
    margin-inline: auto;
    border-block-end: 1px solid var(--border);
    padding-block: var(--space-4);

    & summary {
      font-weight: 600;
      cursor: pointer;
    }

    & p {
      margin-block-start: var(--space-2);
      color: var(--text-muted);
    }
  }

  /* Closing call to action. */

  .cta {
    text-align: center;
    border-image: linear-gradient(var(--tint) 0 0) fill 0 / 0 / 0 100vw;

    & p {
      margin-inline: auto;
    }
  }

  /* Footer: brand plus link columns. */

  body > footer {
    padding-block: var(--space-8);
    font-size: .9375rem;

    & > * + * {
      margin-block-start: var(--space-6);
    }
  }

  .footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-6);

    & > :first-child {
      grid-column: span 2;
    }

    & > * > * + * {
      margin-block-start: var(--space-2);
    }

    & nav {
      display: grid;
      align-content: start;
    }

    & h2 {
      color: var(--text);
      font-size: .875rem;
      font-weight: 700;
    }

    & nav a {
      color: var(--text-muted);
      text-decoration: none;

      &:hover {
        color: var(--accent);
      }
    }
  }

  /* Legal pages: page hero, then a readable column. */

  .page-hero {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-image: linear-gradient(var(--tint), var(--surface)) fill 0 / 0 / 0 100vw;

    & > * + * {
      margin-block-start: var(--space-3);
    }

    & h1 {
      font-size: clamp(2rem, 4vw, 2.75rem);
    }
  }

  .prose {
    max-inline-size: 48rem;
    padding-block-end: var(--space-8);

    & > * + * {
      margin-block-start: var(--space-4);
    }

    & h2 {
      margin-block-start: var(--space-8);
      font-size: 1.375rem;
    }

    & ul,
    & ol {
      padding-inline-start: var(--space-6);
    }

    & li + li {
      margin-block-start: var(--space-2);
    }
  }

  /* Spinning cube mark (from cube/clrblu-spinning-cube.html). Pure CSS; every
     dimension derives from --cube-size, so setting that one scales it all. */

  .cube {
    --cube-size: 180px;
    --cube-duration: 14s;
    --cube-blue: rgb(70 155 255);
    --cube-face: 12%;
    --cube-edge: 55%;
    --cube-text-size: calc(var(--cube-size) * .19);
    --cube-text: #1f6ed4;
    --cube-text-depth: #0d4ea6;
    --cube-shadow: 14%;
    --cube-tilt: rotateX(-28deg) rotateY(35deg) rotateZ(45deg);

    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: calc(var(--cube-size) * 1.44);
    block-size: calc(var(--cube-size) * 1.44);
    perspective: calc(var(--cube-size) * 5);

    & > * {
      grid-area: 1 / 1;
    }
  }

  .cube-body {
    position: relative;
    inline-size: var(--cube-size);
    block-size: var(--cube-size);
    transform-style: preserve-3d;
    transform: var(--cube-tilt);
    animation: cube-spin var(--cube-duration) linear infinite;
  }

  .cube-face {
    position: absolute;
    inset: 0;
    border: 1.5px solid color-mix(in srgb, var(--cube-blue) var(--cube-edge), transparent);
    background: linear-gradient(145deg,
      color-mix(in srgb, white calc(var(--cube-face) * 1.5), transparent),
      color-mix(in srgb, var(--cube-blue) calc(var(--cube-face) * .83), transparent) 55%,
      color-mix(in srgb, color-mix(in srgb, var(--cube-blue), black 35%) calc(var(--cube-face) * .67), transparent));
    box-shadow: inset 0 0 calc(var(--cube-size) * .1) color-mix(in srgb, var(--cube-blue) 10%, transparent);
  }

  .cube-face--front  { transform: translateZ(calc(var(--cube-size) / 2)); }
  .cube-face--back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face--right  { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face--left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face--top    { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
  .cube-face--bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

  .cube-word {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%) translateZ(calc(var(--cube-size) * .045));
    color: var(--cube-text);
    font: 700 var(--cube-text-size) / 1 system-ui, sans-serif;
    letter-spacing: -.04em;
    text-shadow:
      .03em .03em 0 var(--cube-text-depth),
      .06em .06em 0 color-mix(in srgb, var(--cube-text-depth) 85%, transparent),
      .09em .09em 0 color-mix(in srgb, var(--cube-text-depth) 55%, transparent);
    white-space: nowrap;
  }

  .cube-shadow {
    inline-size: calc(var(--cube-size) * .58);
    block-size: calc(var(--cube-size) * .1);
    border-radius: 50%;
    background: color-mix(in srgb, color-mix(in srgb, var(--cube-blue), black 25%) var(--cube-shadow), transparent);
    filter: blur(calc(var(--cube-size) * .055));
    transform: translateY(calc(var(--cube-size) * .57));
  }

  @keyframes cube-spin {
    from { transform: rotateX(-28deg) rotateY(0deg) rotateZ(45deg); }
    to   { transform: rotateX(-28deg) rotateY(360deg) rotateZ(45deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .cube-body {
      animation: none;
    }
  }

  /* In the header the cube sits beside the brand name, overhanging the bar. */

  .brand .cube {
    --cube-size: 2.25rem;
    margin-block: calc(var(--cube-size) * -.3);
  }
}