/* ==========================================================================
   Restyle, first pass for every page (Nov 2026)
   Carries the homepage restyle's background logic across the site:
   1. June's motion-blur texture sits behind the nav and the top of each page,
      with the same shading, depth and dissolve as the homepage hero, then dissolves softly into the page.
   2. Film grain covers the page background only. It starts after that top
      texture and never sits over the content, cards or images.
   3. Section bands are see-through, so the page reads as one surface.
   Loaded after style.css. Remove the <link> to switch it off.
   ========================================================================== */
:root {
  --tex-top: url("/assets/img/texture/motion-blur-wide.webp");
  --tex-top-h: clamp(980px, 76vw, 1100px);   /* the depth of the homepage hero */
  --header-h: 92px;
  --grain: .16;
}
@media (max-width: 700px) {
  :root { --tex-top: url("/assets/img/texture/motion-blur-tall.webp"); --tex-top-h: 1140px; --header-h: 80px; }
}

/* Grain: fixed to the page background, under everything else */
body { background: var(--night); }
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.4 0 0 0 -1.2'/%3E%3C/filter%3E%3Cfilter id='d' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -2.4 0 0 0 1.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23l%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23d%29'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat;
  opacity: var(--grain);
}

/* The header sits on the texture */
.site-header--dark { background: transparent; position: relative; z-index: 20; }

/* Top texture: drawn from main, reaching up behind the header */
main { position: relative; isolation: isolate; }
main::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: calc(var(--header-h) * -1); height: var(--tex-top-h);
  /* the same shading and dissolve as the homepage hero */
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--night) 70%, transparent) 0%, transparent 26%),
    linear-gradient(90deg, color-mix(in srgb, var(--night) 50%, transparent) 0%, transparent 32%, transparent 68%, color-mix(in srgb, var(--night) 50%, transparent) 100%),
    var(--tex-top) center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* See-through sections, so the texture and grain run on behind them */
.hero, .pg-hero, .hero-product, section.band,
.band-sky, .band-violet, .band-warmth, .band-energy, .band-wash, .band-night, .moxie-band, .band-tickets, .grain {
  background: transparent;
}
.pg-hero { overflow: visible; }
.pg-hero::before { display: none; }          /* the old gradient glow; the gradient is retired on the site */
.hero-product.hero-split::after { display: none; }  /* old fade to cream */

/* ---------- The new bird ----------
   Mino's MyPholyo bird replaces the old Assistant illustration. */
.assistant-bird.moxie-pose { width: 168px; height: 168px; margin-left: -18px; object-fit: contain; }
.assistant-bird-float.moxie-pose { background: none; padding: 0; border-radius: 0; width: 170px; height: 170px; margin: -10px -10px 0 20px; }
@media (max-width: 760px) { .assistant-bird.moxie-pose, .assistant-bird-float.moxie-pose { width: 130px; height: 130px; margin-left: -12px; } }

/* ---------- Sections that fold away ----------
   Long legal pages open one section at a time, styled like the FAQs. */
.folds { margin-top: 28px; border-bottom: 1px solid var(--line-dark); }
.fold { border-top: 1px solid var(--line-dark); }
.fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 0;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.fold > summary::after { content: "+"; font-family: var(--sans); font-size: 1.6rem; line-height: 1; color: var(--ink-mute); flex: 0 0 auto; }
.fold[open] > summary::after { content: "\2013"; }
.fold > summary:hover h2, .fold > summary:focus-visible h2 { color: var(--energy); }
.fold > summary:focus-visible { outline: 2px solid var(--energy); outline-offset: 4px; border-radius: 4px; }
.fold-body { padding: 0 0 26px; }
.fold-body > :first-child { margin-top: 0; }

/* ---------- Coming soon label ----------
   Same pill as the homepage and How it works, for features that aren't live yet. */
.soon-pill { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 3px 9px; border: 1px solid var(--energy); border-radius: 999px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--energy); white-space: nowrap; }

/* ---------- Text over the texture ----------
   Mino's How it works treatment, used on every page: the intro copy sits on its own
   frosted dark panel, headlines carry a soft shadow, the italic orange is a lighter
   tint of Energy (full Energy drops below 3:1 on the bright streak), and the small
   label above the headline is a frosted pill. So the copy reads wherever the streak
   falls, at any screen size. */
main h1, main > :first-child h2 {
  text-shadow: 0 0 3px rgba(20, 15, 14, .6), 0 2px 22px rgba(20, 15, 14, .9), 0 0 60px rgba(20, 15, 14, .85), 0 0 110px rgba(20, 15, 14, .6);
}
main h1 em { color: #ffb285; }
main > :first-child .eyebrow, .hero .eyebrow, .pg-hero .eyebrow, .legal > .eyebrow {
  display: inline-block; color: var(--balance); background: rgba(38, 31, 30, .72);
  padding: 7px 12px; border-radius: 999px; margin-bottom: 18px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.hero-note {
  max-width: 40em; margin-top: 26px; padding: 22px 26px; border-radius: 20px;
  background: rgba(38, 31, 30, .74);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(241, 238, 231, .08);
}
.hero-note p, .hero-note .lead { color: var(--balance); max-width: none; margin: 0; }
.hero-note p + p { margin-top: 12px; }
@media (max-width: 760px) { .hero-note { padding: 18px 20px; margin-top: 20px; } }
/* smaller lines that still sit on the streak: dates, form notes, the "last updated" line */
main > :first-child .pg-meta, main > :first-child .updated, main > :first-child label,
main > :first-child .muted, main > :first-child .small {
  text-shadow: 0 1px 2px rgba(20, 15, 14, .9), 0 0 16px rgba(20, 15, 14, .85);
}