/* ==========================================================================
   Refinement pass — composition polish for the marketing bands.

   ── HOW TO UNDO ──────────────────────────────────────────────────────────
   Everything in this file is additive and self-contained. To revert:
     1. delete the <link> to this file in _includes/head.html, or
     2. delete this file.
   To A/B it live without touching files, run in the console:
     document.documentElement.classList.toggle('no-refine')
   Every rule below is scoped to html:not(.no-refine) so that toggle is
   instant and total.
   ========================================================================== */

/* ── 1. Zig-zag ── the side-by-side bands all led with copy on the left, so
   four consecutive sections shared one silhouette. Flip the 2nd and 4th
   (Peek, Smart Notes) so the page alternates. DOM order is untouched, so
   reading order stays copy-then-demo. Desktop only: the stacked layout
   below 861px must keep copy first. */
@media (min-width: 861px) {
  html:not(.no-refine) section.band[data-theme="pink"] .feature-inner > .feature-copy,
  html:not(.no-refine) section.band[data-theme="cream"] .feature-inner > .feature-copy {
    grid-column: 2;
    grid-row: 1;
  }
  html:not(.no-refine) section.band[data-theme="pink"] .feature-inner > .feature-media,
  html:not(.no-refine) section.band[data-theme="cream"] .feature-inner > .feature-media {
    grid-column: 1;
    grid-row: 1;
  }

  /* ── 2 + 3. Asymmetric columns, top-aligned ── the copy is capped at 46ch
     and was sitting in a 544px half, leaving dead air beside it while the
     demos ran cramped. 5fr/7fr gives the demo the room and tightens the
     text. `align-items: start` fixes the float: with center alignment a
     347px copy block against a 724px demo began 188px down the band and
     read as unplaced. A small optical nudge lands the cap-height of the
     heading against the demo's top edge rather than its box edge. */
  html:not(.no-refine) .feature-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  html:not(.no-refine) section.band[data-theme="pink"] .feature-inner,
  html:not(.no-refine) section.band[data-theme="cream"] .feature-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  html:not(.no-refine) .feature-copy { padding-top: 0.35rem; }
}

/* ── 4. Paper grain ── the backgrounds were flat gradients. A static,
   desaturated fractal-noise layer at 2.5% makes them read as stock rather
   than screen, which is the right instinct for a notes app. Painted as a
   band-level layer (z-index 0) with the content lifted above it, so it can
   never intercept a pointer or sit over text. */
html:not(.no-refine) .band::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}
html:not(.no-refine) .band > * { position: relative; z-index: 1; }
/* Dark papers show grain more readily; ease it back so it stays texture. */
html.dark:not(.no-refine) .band::after { opacity: 0.018; }

/* ── 5. Eyebrow ── the section tag stays the filled pill from styles.css
   (an accent-rule variant lived here for a while and was retired). */

@media (prefers-reduced-motion: reduce) {
  html:not(.no-refine) .band::after { opacity: 0.02; }
}