/* ═══════════════════════════════════════════════════════════════════════════
   SPECTRUM — the document colours, used as the page's connective tissue.

   product-system.css already gives every tool a --product-tone (PDF coral,
   Sheets green, Slides orange, Design magenta …) but until now those colours
   only appeared on the tool marks themselves. Everything between them — the
   section labels, the format chips, the promise strip, the progress bar — was
   the same indigo, so the page read like every other SaaS homepage.

   This sheet spends those eleven colours across the whole scroll. A reader
   should be able to glance at any band and know which kind of document it is
   about, and should remember the page afterwards as "the one with the colours".

   Loaded LAST, after theme.css, for two reasons:
     1. theme.css ships a generated `:root[data-theme="dark"] .eyebrow` rule at
        (0,3,0); tinting eyebrows here needs to win, and winning on cascade
        order is cheaper than a specificity arms race.
     2. Nothing here hardcodes a light surface, so it deliberately sits outside
        scripts/gen-landing-dark.mjs's FILES list — both themes are correct by
        construction rather than by generated override.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Ordered around the hue wheel, not by product menu order, so the ramp reads
     as one continuous spectrum instead of eleven separate stops:
     coral → red → orange → green → teal → blue → indigo → violet → purple →
     magenta, closing back on coral. */
  --spectrum: linear-gradient(90deg,
    var(--tone-pdf) 0%,
    var(--tone-video) 9%,
    var(--tone-slides) 19%,
    var(--tone-sheets) 30%,
    var(--tone-apps) 40%,
    var(--tone-notes) 50%,
    var(--tone-document) 61%,
    var(--tone-agent) 69%,
    var(--tone-forms) 79%,
    var(--tone-automate) 88%,
    var(--tone-design) 100%);
}

/* ── Tinted text ────────────────────────────────────────────────────────────
   The raw tones are picked to sit on a white chip, not to be read as 13px text:
   Slides orange on white is 2.6:1. Mixing each tone toward the page ink (light)
   or toward white (dark) keeps the hue recognisable while clearing 4.5:1 for
   every one of the eleven. Both mixes are declared on the element itself —
   --product-tone comes from the .tone-* class there, and a custom property
   declared on :root would resolve it in :root's context instead. */
.tone-tint { --tone-ink: color-mix(in srgb, var(--product-tone) 62%, #10163a); }
:root[data-theme="dark"] .tone-tint { --tone-ink: color-mix(in srgb, var(--product-tone) 58%, #ffffff); }
/* Dark bands keep the light-on-dark mix regardless of the page theme. */
.band-dark .tone-tint,
.agent-door .tone-tint { --tone-ink: color-mix(in srgb, var(--product-tone) 58%, #ffffff); }


/* ── 1 · Section eyebrows ───────────────────────────────────────────────────
   Every section used to announce itself in the same indigo. Now each carries
   the colour of the documents it talks about, with a small sheet-shaped chip
   drawn from ::before so no extra markup is needed. */
:root .eyebrow.tone-tint {
  color: var(--tone-ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow.tone-tint::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: 4px;
  background: var(--product-tone);
  /* The mark's own language: a lit sheet, so the chip glows rather than sits. */
  box-shadow: 0 2px 7px -1px color-mix(in srgb, var(--product-tone) 62%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .eyebrow.tone-tint::before { transition: transform .25s ease; }
  .head:hover .eyebrow.tone-tint::before { transform: rotate(-8deg) scale(1.12); }
}


/* ── 2 · The spectrum rule ──────────────────────────────────────────────────
   A hairline of all eleven document colours. Used where the page changes
   subject, so the scroll is punctuated in the product's own palette. */
.spectrum-rule {
  height: 3px;
  border: 0;
  margin: 0;
  background: var(--spectrum);
  opacity: .92;
}
.spectrum-rule.soft { height: 2px; opacity: .5; }

/* The reading-progress bar paints through the same ramp, so scrolling the page
   literally fills it with the document colours. */
.scroll-progress { background: var(--spectrum) !important; background-size: 100vw 100% !important; }


/* ── 3 · The promise strip ──────────────────────────────────────────────────
   Three claims that used to share one green tick. Each now belongs to a tool,
   so the strip previews the palette the rest of the page is built from. */
.promise-item .promise-mark {
  background: color-mix(in srgb, var(--product-tone) 13%, var(--surface));
  color: var(--tone-ink);
  border: 1px solid color-mix(in srgb, var(--product-tone) 26%, var(--line));
}
.promise-item b { color: var(--ink); }
.promise-item .promise-tool {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 2px;
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--product-tone) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--product-tone) 24%, var(--line));
}


/* ── 4 · Format chips ───────────────────────────────────────────────────────
   The single most literal use of the idea: a .xlsx chip in Sheets green, .pptx
   in Slides orange, MP4 in Video red. The formats section is a wall of grey
   pills otherwise, and this makes it scannable at a glance. */
.fmt .ext.tone-tint {
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--product-tone) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--product-tone) 30%, var(--line));
  font-weight: 700;
}
.fmt .ext.tone-tint:hover {
  background: color-mix(in srgb, var(--product-tone) 15%, var(--surface));
  border-color: color-mix(in srgb, var(--product-tone) 52%, var(--line));
}
/* Native Lumen formats keep their "this one is ours" emphasis, now in the tone
   of the editor that writes them. */
.fmt .ext.native.tone-tint {
  background: color-mix(in srgb, var(--product-tone) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--product-tone) 46%, var(--line));
}


/* ── 5 · Hero ───────────────────────────────────────────────────────────────
   A spectrum underline on the pill, so the colours are introduced in the first
   screen rather than arriving unannounced halfway down. */
.hpill { position: relative; overflow: hidden; }
.hpill::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--spectrum);
  opacity: .85;
}

/* The hint and the click-through status share one absolutely positioned slot at
   the bottom of .hero-tool-picker, so the picker's padding-bottom is the only
   thing reserving room for them — and 23px only ever fitted one line. Once the
   icon row wraps to two rows on a phone, a two-line hint overflows upward into
   the icons. Reserve by line count at the widths where wrapping actually
   happens instead of leaving it to chance. */
@media (max-width: 900px) { .hero-tool-picker { padding-bottom: 40px; } }
@media (max-width: 430px) { .hero-tool-picker { padding-bottom: 56px; } }

/* The tool row's hint line names the colour system explicitly. */
.hero-tool-hint .spectrum-word {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 750;
}


/* ── 6 · The final call to action ───────────────────────────────────────────
   Closes the page on the full ramp. */
.final { position: relative; }
.final::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--spectrum);
  opacity: .9;
}


/* ── 7 · Pricing ────────────────────────────────────────────────────────────
   The plan ladder used to be five identical cards whose only colour was the
   same indigo credits line. Each tier now steps along the spectrum, so the
   ladder is visible before a single price is read.

   Deliberately tinting the credits line and the ticks rather than adding a bar
   across the card top: .price.pop paints its brand border with the
   `linear-gradient(#fff,#fff) padding-box, var(--grad) border-box` trick and
   hangs a "Popular" tag over its top edge, and an absolutely positioned strip
   would fight both. */
.price { --plan-tone: var(--tone-hub); }
.price[data-tier="free"] { --plan-tone: var(--tone-sheets); }
.price[data-tier="plus"] { --plan-tone: var(--tone-notes); }
.price[data-tier="pro"] { --plan-tone: var(--tone-document); }
.price[data-tier="max"] { --plan-tone: var(--tone-forms); }
.price[data-tier="ultra"] { --plan-tone: var(--tone-design); }
.price[data-tier="family"] { --plan-tone: var(--tone-apps); }
.price[data-tier="family-max"] { --plan-tone: var(--tone-notes); }
.price[data-tier="team"] { --plan-tone: var(--tone-document); }
.price[data-tier="business"] { --plan-tone: var(--tone-automate); }

.price[data-tier] {
  --product-tone: var(--plan-tone);
  --tone-ink: color-mix(in srgb, var(--plan-tone) 62%, #10163a);
}
:root[data-theme="dark"] .price[data-tier] { --tone-ink: color-mix(in srgb, var(--plan-tone) 58%, #ffffff); }

/* The credits allowance is the number people actually compare — give it the
   tier's colour instead of one shared indigo. */
.price[data-tier] .cr { color: var(--tone-ink); }
.price[data-tier] li svg { stroke: var(--plan-tone); }


/* ── Motion ─────────────────────────────────────────────────────────────────
   The one animated element: the spectrum rule drifts very slowly, which makes
   the palette feel alive without competing with the films above it. */
@media (prefers-reduced-motion: no-preference) {
  .spectrum-rule.drift {
    background-size: 220% 100%;
    animation: spectrum-drift 26s linear infinite;
  }
  @keyframes spectrum-drift {
    from { background-position: 0% 50%; }
    to { background-position: 220% 50%; }
  }
}


/* ── Narrow screens ─────────────────────────────────────────────────────────
   Chips wrap tighter and the eyebrow chip shrinks so a tinted label still fits
   on one line at 360px. */
@media (max-width: 560px) {
  .eyebrow.tone-tint { gap: 7px; }
  .eyebrow.tone-tint::before { width: 11px; height: 11px; }
  .promise-item .promise-tool { margin-left: 6px; }
}