/* ===========================================================================
   LYRIXSA AI — LIVE PRICING PAGE
   ---------------------------------------------------------------------------
   One stylesheet, authored top-down in the order the page renders. Every
   section's rules are scoped to that section's id (#hero .hr-*, #plans .pr-*)
   so a class name can be reused in two sections without either one bleeding
   into the other.

   The numbered banners below map 1:1 onto the HTML: "(§n)" is the section
   number in the page's own comment banners. Renumber BOTH when you add or
   remove a section.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ===== 1. TOKENS =========================================================
   Gold stays the one primary. Violet and cyan are energy accents only — the
   waveform, a glow, an icon plate — never a button, never body text, or the
   page stops reading as one brand.
   ======================================================================== */
:root{
  /* surfaces: a deeper base than a flat grey, so elevation reads */
  --bg:#0B0C0E;
  --s1:#111318;
  --s2:#16181D;
  --s3:#1D2027;
  --s4:#24272F;
  --border:#23262E;
  --border-strong:#343842;

  /* text */
  --t1:#F1F1EF;
  --t2:#9DA1AA;
  --t3:#666A73;

  /* primary */
  --accent:#F2A93C;
  --accent-2:#FFC96B;              /* highlight end of a gold gradient */
  --accent-soft:rgba(242,169,60,.12);
  --accent-border:rgba(242,169,60,.55);
  --ink-on-accent:#1A1300;

  /* energy accents — waveform, glows, icon plates. Used sparingly. */
  --violet:#7C5CFF;
  --violet-soft:rgba(124,92,255,.14);
  --violet-border:rgba(124,92,255,.42);
  --cyan:#34D3C0;
  --cyan-soft:rgba(52,211,192,.12);
  --cyan-border:rgba(52,211,192,.40);

  /* status */
  --success:#7FD9A8;
  --success-soft:rgba(127,217,168,.12);
  --danger:#E8735F;

  /* elevation — three real steps, not one shadow reused everywhere */
  --e1:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.7);
  --e2:0 2px 6px rgba(0,0,0,.45), 0 20px 46px -20px rgba(0,0,0,.85);
  --e3:0 4px 10px rgba(0,0,0,.5), 0 40px 90px -30px rgba(0,0,0,.95);
  --glow-gold:0 0 0 1px rgba(242,169,60,.22), 0 24px 70px -28px rgba(242,169,60,.45);
  --glow-violet:0 24px 80px -30px rgba(124,92,255,.55);

  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;

  /* Inter carries no pictographs — glyph fallbacks prevent tofu boxes. */
  --symbol:'Inter','Segoe UI Symbol','Noto Sans Symbols 2','Arial Unicode MS','DejaVu Sans','Apple Symbols',sans-serif;

  --hdr:64px;
  --bar:38px;
}

/* ===== 2. RESET / BASE =================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* offset for the fixed announcement bar + header */
  scroll-padding-top:calc(var(--hdr) + var(--bar) + 14px);
}
body{
  margin:0;
  background:var(--bg);
  color:var(--t1);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* belt-and-braces against sub-pixel overflow */
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  line-height:1.2;
  margin:0 0 12px;
  letter-spacing:-.01em;
}
p{margin:0 0 14px;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg,picture,video{max-width:100%; height:auto; display:block;}
ul{margin:0; padding:0; list-style:none;}
button{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;}
::selection{background:var(--accent-soft); color:var(--t1);}

/* ===== 3. LAYOUT ========================================================= */
.wrap{max-width:1120px; margin:0 auto; padding:0 24px; width:100%;}
section{padding:96px 0; position:relative;}
section.wrap{padding:96px 24px;}
.center{text-align:center;}
/* Visually hidden but available to assistive tech. Clip-based rather than an
   off-screen offset, so it never widens the document. */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0;
}
.lede{
  font-size:clamp(15px,1.6vw,17.5px);
  color:var(--t2);
  max-width:720px;
  margin:0 0 30px;
}
.lede.center{margin-left:auto; margin-right:auto;}
.eyebrow{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow.center{justify-content:center;}
/* Short gold rule that grows out of the eyebrow label. */
.eyebrow::after{
  content:''; height:1px; flex:1 1 auto; max-width:64px;
  background:linear-gradient(90deg,var(--accent-border),transparent);
}
.eyebrow.center::before{
  content:''; height:1px; flex:1 1 auto; max-width:64px;
  background:linear-gradient(270deg,var(--accent-border),transparent);
}
.h2{font-size:clamp(26px,4.2vw,42px); letter-spacing:-.025em; margin-bottom:16px;}
.h3{font-size:clamp(18px,2.2vw,22px); margin-bottom:10px;}
.divider{height:1px; background:var(--border); border:0; margin:0;}

/* Highlighted headline fragment — clone keeps the wash on every wrapped line */
.hl{
  color:var(--accent);
  background:linear-gradient(180deg,transparent 62%,var(--accent-soft) 62%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
/* Gold-to-highlight gradient text, for the one or two biggest headlines only. */
.grad{
  background:linear-gradient(96deg,var(--accent) 6%,var(--accent-2) 52%,var(--accent) 96%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent);
}

/* ===== 4. BUTTONS ======================================================== */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  padding:11px 20px; border-radius:var(--r-sm);
  border:1px solid transparent; cursor:pointer;
  transition:filter .15s, background .15s, border-color .15s, transform .15s, box-shadow .15s;
  text-align:center; text-decoration:none;
}
.btn:hover{text-decoration:none;}
.btn-accent{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--ink-on-accent);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 26px -12px rgba(242,169,60,.7);
}
.btn-accent:hover{filter:brightness(1.06); box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 14px 34px -12px rgba(242,169,60,.85);}
.btn-accent:active{transform:translateY(1px);}
.btn-ghost{background:rgba(255,255,255,.02); border-color:var(--border-strong); color:var(--t1);}
.btn-ghost:hover{border-color:var(--accent-border); color:var(--accent); background:var(--accent-soft);}
.btn-lg{padding:15px 28px; font-size:15px; border-radius:12px;}
.btn-arrow{font-family:var(--symbol); transition:transform .18s;}
.btn:hover .btn-arrow{transform:translateX(3px);}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.cta-row.center{justify-content:center;}
.fineprint{
  font-size:12.5px; color:var(--t3); margin:16px 0 0;
  display:flex; align-items:flex-start; gap:7px;
}
.fineprint.center{justify-content:center; text-align:center;}
.fineprint svg{flex:none; width:14px; height:14px; margin-top:3px; color:var(--success);}
.fineprint > span{min-width:0;}

/* ===== 5. PRIMITIVES ===================================================== */
.card{
  background:var(--s1);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:22px;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--s2); border:1px solid var(--border);
  color:var(--t2); padding:4px 9px; border-radius:20px;
}
.tag-soon{background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent);}

/* Hairline of light along a card's top edge — the cheapest way to make a dark
   surface read as lit rather than painted. Needs position:relative on the host. */
.sheen::after{
  content:''; position:absolute; left:16px; right:16px; top:0; height:1px;
  pointer-events:none; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 35%,rgba(242,169,60,.45) 55%,transparent);
}

/* Shared "device frame": offset gold platform + chrome bar + mono path. */
.frame{position:relative; margin:0;}
.frame::before{
  content:''; position:absolute; inset:16px -14px -16px 14px;
  border-radius:var(--r-lg);
  background:
    linear-gradient(140deg,rgba(242,169,60,.34),rgba(124,92,255,.16) 58%,transparent 88%);
  z-index:0;
}
.frame-in{
  position:relative; z-index:1;
  background:var(--s2);
  border:1px solid var(--border-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--e3);
}
/* inner top highlight, so the frame edge catches light */
.frame-in::after{
  content:''; position:absolute; inset:0 0 auto; height:1px; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  pointer-events:none;
}
.frame-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  background:linear-gradient(180deg,var(--s4),var(--s3));
  border-bottom:1px solid var(--border);
}
.frame-dots{display:flex; gap:5px; flex:none;}
.frame-dots i{width:8px; height:8px; border-radius:50%; background:var(--border-strong); display:block;}
.frame-dots i:first-child{background:rgba(232,115,95,.7);}
.frame-dots i:nth-child(2){background:rgba(242,169,60,.7);}
.frame-dots i:last-child{background:rgba(127,217,168,.6);}
.frame-path{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  color:var(--t3); letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.frame-in img{width:100%; display:block;}
/* Screenshot crop helper — used to omit personal data from a shot. */
.shot-crop{overflow:hidden; position:relative;}
.shot-crop img{display:block; width:100%;}

/* Photo mount: a cutout portrait needs a light source behind it or it floats
   on the dark page like a sticker. */
.plate{position:relative;}
.plate::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:105%; aspect-ratio:1/1;
  background:radial-gradient(circle,rgba(242,169,60,.20),rgba(124,92,255,.10) 46%,transparent 68%);
}
.plate img{position:relative; z-index:1;}

/* Radial gold bloom used to give alternating sections depth */
.bloom::before{
  content:''; position:absolute; pointer-events:none; z-index:0;
  /* Never wider than the section: a centred 120% box bleeds 10% of the
     viewport past each edge, which widens the document on narrow screens. */
  left:50%; top:-10%; width:min(980px,100%); aspect-ratio:1/1;
  transform:translateX(-50%);
  background:radial-gradient(circle,rgba(242,169,60,.10),transparent 62%);
}
.bloom > *{position:relative; z-index:1;}

/* Drawn checkmark — CSS geometry, never a font glyph */
.ticks li{position:relative; padding:0 0 0 28px; margin-bottom:11px; color:var(--t2); font-size:14.5px;}
.ticks li::before{
  content:''; position:absolute; left:3px; top:6px;
  width:13px; height:8px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
  transform-origin:left bottom;
}
.ticks li strong{color:var(--t1); font-weight:600;}

/* ---- WAVEFORM ------------------------------------------------------------
   A row of rounded bars, each with its own resting height (--h) and its own
   negative animation delay (--i). The delay is what makes it read as one wave
   travelling left to right rather than N bars pulsing at random: every bar
   runs the identical keyframe, just offset in time.

   Authored so the 0%/100% keyframe IS the resting state. prefers-reduced-motion
   collapses the duration, which parks every bar on that frame — a still, flat
   waveform rather than a shape frozen mid-pulse.
   ------------------------------------------------------------------------ */
.wave{
  display:flex; align-items:center; gap:.42%;
  width:100%; height:100%;
}
.wave i{
  display:block; flex:1 1 0; min-width:2px;
  height:var(--h,50%);
  border-radius:99px;
  background:linear-gradient(180deg,
    rgba(124,92,255,.85) 0%,
    var(--accent) 38%, var(--accent-2) 50%, var(--accent) 62%,
    rgba(124,92,255,.85) 100%);
  transform:scaleY(.34);
  animation:wave-flow 1.85s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -52ms);
  will-change:transform,opacity;
}
@keyframes wave-flow{
  0%,100%{transform:scaleY(.34); opacity:.5;}
  50%    {transform:scaleY(1);    opacity:1;}
}

/* ===== 6. ANNOUNCEMENT BAR (§1) ========================================== */
#annc-bar{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height:var(--bar);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(90deg,rgba(242,169,60,.16),rgba(124,92,255,.10) 50%,rgba(242,169,60,.16));
  border-bottom:1px solid rgba(242,169,60,.3);
  padding:0 16px;
}
#annc-bar .ab-in{
  display:flex; align-items:center; gap:10px;
  min-width:0; max-width:100%;
}
#annc-bar .ab-pulse{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(242,169,60,.7);
  animation:ab-pulse 2.4s infinite;
}
@keyframes ab-pulse{
  0%{box-shadow:0 0 0 0 rgba(242,169,60,.55);}
  70%{box-shadow:0 0 0 9px rgba(242,169,60,0);}
  100%{box-shadow:0 0 0 0 rgba(242,169,60,0);}
}
#annc-bar .ab-txt{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#annc-bar .ab-cta{
  flex:none;
  font-size:11px; font-weight:600; color:var(--t1);
  border-bottom:1px solid var(--accent-border); padding-bottom:1px;
}
#annc-bar .ab-cta:hover{color:var(--accent); text-decoration:none;}

/* ===== 7. HEADER ========================================================= */
#site-header{
  position:fixed; top:var(--bar); left:0; right:0; z-index:55;
  height:var(--hdr);
  background:rgba(11,12,14,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
}
#site-header .hd-in{
  max-width:1120px; margin:0 auto; padding:0 24px; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#site-header .hd-logo{display:flex; align-items:center; gap:9px; min-width:0;}
#site-header .hd-logo img{height:30px; width:auto; flex:none;}
#site-header .hd-logo .hd-sub{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--t3);
  border-left:1px solid var(--border-strong); padding-left:9px;
  white-space:nowrap;
}
#site-header .hd-nav{display:flex; align-items:center; gap:26px;}
#site-header .hd-nav a{
  position:relative;
  font-size:13.5px; color:var(--t2); font-weight:500;
}
#site-header .hd-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .18s;
}
#site-header .hd-nav a:hover{color:var(--t1); text-decoration:none;}
#site-header .hd-nav a:hover::after{transform:scaleX(1);}
#site-header .hd-cta{flex:none;}
body{padding-top:calc(var(--hdr) + var(--bar));}

/* ===== 8. HERO (§2) ======================================================
   The singer is a transparent cutout sitting on the right, deliberately
   bleeding past the content column so the composition doesn't end on a hard
   edge. The waveform runs the full width behind her, with a second, fainter
   copy drawn OVER her — that's what makes the sound read as passing through
   the subject rather than sitting behind a cardboard cutout.
   ======================================================================== */
#hero{
  position:relative; overflow:hidden;
  padding:72px 0 84px;
  background:
    radial-gradient(1200px 520px at 68% 34%,rgba(124,92,255,.16),transparent 70%),
    radial-gradient(900px 480px at 18% 12%,rgba(242,169,60,.12),transparent 68%),
    var(--bg);
}
/* decorative layers */
#hero .hr-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
#hero .hr-rule{
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,169,60,.35),transparent);
}
/* the wave band, centred on the subject's midline */
#hero .hr-wave{
  position:absolute; left:-4%; right:-4%; top:50%;
  height:min(300px,42vh); transform:translateY(-50%);
  /* Fade both ends so the bars don't stop dead, and stay faint across the
     left half, where the copy lives — the copy scrim below finishes the
     job, but the band should not be fighting it at full strength. */
  -webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 18%,rgba(0,0,0,.42) 40%,#000 64%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 18%,rgba(0,0,0,.42) 40%,#000 64%,#000 88%,transparent);
  opacity:.5;
}
/* the copy of the wave that crosses in front of the photo */
#hero .hr-wave-front{
  /* This layer sits ABOVE the text (z-index 3) so it can cross the singer,
     so it must start clear of the copy column — hence 46%, not 34%. */
  position:absolute; left:46%; right:-4%; top:52%;
  height:min(210px,30vh); transform:translateY(-50%);
  z-index:3; pointer-events:none;
  mix-blend-mode:screen; opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%,#000 82%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 26%,#000 82%,transparent);
}
#hero .hr-grid{
  position:relative; z-index:2;
  /* the copy carries three display lines and needs the wider half */
  display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);
  gap:36px; align-items:center;
}
#hero .hr-copy{position:relative; z-index:2;}
/* The wave runs the full width of the hero, which is the whole idea — but
   the lede and the tick list still have to be read. So the copy column
   carries its own scrim, painted between the wave and the words: opaque
   where the text is, gone before it reaches the photo. z-index:-1 keeps it
   inside .hr-copy's stacking context, so it covers the wave (z-index 0)
   without ever covering its own text. */
#hero .hr-copy::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  /* Bled wide in EVERY direction, not just right: a radial that still has
     colour left when it meets an edge clips, and the clip reads as a grey
     rectangle lying over the hero. Ending at 74% of an oversized box means
     the falloff is always complete before any edge. */
  inset:-160px -260px -160px -260px;
  background:radial-gradient(closest-side at 44% 50%,
    rgba(11,12,14,.94) 0%, rgba(11,12,14,.9) 30%,
    rgba(11,12,14,.66) 52%, rgba(11,12,14,.28) 66%, transparent 76%);
}
#hero .hr-kicker{
  display:inline-flex; align-items:center; gap:9px;
  background:linear-gradient(180deg,rgba(242,169,60,.16),rgba(242,169,60,.07));
  border:1px solid var(--accent-border);
  color:var(--accent);
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  padding:7px 15px; border-radius:20px; margin-bottom:24px;
  box-shadow:0 10px 30px -14px rgba(242,169,60,.6);
}
#hero h1{
  /* 52px is the largest size at which "Then Actually Own It." still fits
     the copy column on one line at 1024px — above that the browser breaks
     it mid-phrase and the authored <br> stops meaning anything. */
  font-size:clamp(30px,4.6vw,52px);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.06;
  margin-bottom:20px;
  text-wrap:pretty;
}
/* The gold payoff line is deliberately a step down from the statement
   above it: it reads as the answer rather than a second shout. .66em is
   the largest size at which "Written, Sung, Licensed, Released." still fits
   the copy column on ONE line at 1024px, measured rather than guessed —
   above that the browser breaks it at a comma and the line stops scanning
   as a single phrase. */
#hero h1 .hr-l2{
  display:block;
  font-size:.66em; letter-spacing:-.026em;
  margin-top:.2em;
  /* Narrower than about 480px the four stages cannot hold one line at any size
     worth reading, so the break becomes a question of WHERE. Left to itself the
     browser fills greedily and orphans the last stage — "Written, Sung,
     Licensed," / "Released." — which reads as though Released were an
     afterthought rather than the point. balance splits it two and two. */
  text-wrap:balance;
}
#hero .hr-lede{font-size:clamp(15px,1.7vw,17.5px); color:var(--t2); margin-bottom:22px; max-width:560px;}
#hero .hr-lede strong{color:var(--t1); font-weight:600;}
/* Replaced a four-item tick list, which was the single biggest contributor to
   the hero feeling congested — four lines of body text between the lede and the
   buttons. The same three promises now cost one line. Separators are drawn as
   ::before on every item but the first, so there is no empty trailing pip. */
#hero .hr-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
  margin:0 0 28px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--t2);
}
#hero .hr-meta span{display:inline-flex; align-items:center; gap:16px;}
#hero .hr-meta span + span::before{
  content:''; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.7;
}

/* the photo column */
#hero .hr-art{
  position:relative; z-index:2;
  justify-self:end; align-self:end;
  /* bleed past the content column — #hero clips it */
  margin-right:clamp(-120px,-5vw,0px);
  width:min(560px,48vw);
}
#hero .hr-singer{
  width:100%; height:auto; display:block;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(242,169,60,.18));
}
/* floating chips pinned to the artwork */
#hero .hr-chip{
  position:absolute; z-index:4;
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(17,19,24,.88);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border-strong); border-radius:12px;
  padding:9px 13px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--t2);
  box-shadow:var(--e2);
  white-space:nowrap;
}
#hero .hr-chip b{color:var(--t1); font-weight:500;}
#hero .hr-chip svg{width:13px; height:13px; flex:none;}
#hero .hr-chip-1{left:-10%; top:14%; border-color:var(--accent-border); color:var(--accent);}
#hero .hr-chip-2{left:-16%; bottom:24%; border-color:var(--violet-border);}
#hero .hr-chip-2 svg{color:var(--violet);}
#hero .hr-chip-3{right:6%; bottom:7%; border-color:var(--cyan-border);}
#hero .hr-chip-3 svg{color:var(--cyan);}
/* the chips are decoration on top of a photo; below 860px the photo shrinks
   and they'd collide with the subject, so they're dropped there (see §18). */

/* ===== 9. PROOF STRIP (§3) ===============================================
   A band, not a section: no heading, no padding of its own beyond the rule
   lines. Its job is to answer "is this real?" in one glance before the reader
   commits to reading anything.
   ======================================================================== */
#proof{
  padding:0; border-block:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
#proof .pf-in{
  display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center;
  padding:26px 0;
}
#proof .pf-k{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--t3);
  max-width:236px; line-height:1.6; margin:0;
  padding-right:34px; border-right:1px solid var(--border);
}
#proof .pf-k b{color:var(--accent); font-weight:500; display:block;}
#proof .pf-stores{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px;
}
#proof .pf-store{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:-.01em; color:var(--t2);
  display:inline-flex; align-items:center; gap:9px;
  transition:color .16s;
}
/* The generic pip that used to stand in for a logo is gone now that each store
   carries its real mark. */
#proof .pf-store img{
  width:17px; height:17px; flex:none; display:block;
  /* The marks are brand-coloured on a near-black band, where Spotify green and
     Deezer coral both sit brighter than the text beside them. Holding them at
     .82 lets the row read as one strip at rest and come up to full colour
     together on hover, rather than six logos competing with the copy. */
  opacity:.82; transition:opacity .16s;
}
#proof .pf-stores:hover img{opacity:1;}
/* Amazon Music has no mark in the icon set. A lettermark is honest about that;
   a redrawn approximation of somebody else's logo is not. */
#proof .pf-mk{
  flex:none;
  display:inline-grid; place-items:center;
  width:17px; height:17px; border-radius:4px;
  background:var(--s3); border:1px solid var(--border-strong);
  font-family:'IBM Plex Mono',monospace; font-size:8px; font-weight:500;
  letter-spacing:.02em; color:var(--t2);
}
#proof .pf-store:hover{color:var(--t1);}
#proof .pf-more{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--t3);
}
#proof .pf-stats{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border-top:1px solid var(--border);
}
#proof .pf-stat{background:var(--bg); padding:22px 26px 24px;}
#proof .pf-stat .pf-n{
  display:block;
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(22px,3vw,30px); letter-spacing:-.03em;
  color:var(--t1); line-height:1.1; margin-bottom:6px;
}
#proof .pf-stat:nth-child(1) .pf-n{color:var(--accent);}
#proof .pf-stat:nth-child(2) .pf-n{color:var(--violet);}
#proof .pf-stat:nth-child(3) .pf-n{color:var(--cyan);}
#proof .pf-stat p{font-size:13.5px; color:var(--t2); margin:0;}

/* ===== 9a. MAKE A SONG (§3a) ==============================================
   The interactive proof. Deliberately shares the record idiom with 9b below
   rather than inventing a second visual language for the same object — but at
   larger sizes, because this is one result at the centre of attention rather
   than one of four in a grid.

   The box is gold-bordered and glowing where the sample cards are not: it is the
   only thing on the page asking the reader to DO something rather than read
   something, and it has to look like the exception.
   ========================================================================= */
#make{position:relative;}
#make .mk-head{max-width:760px; margin:0 auto 36px;}
#make .mk-box{
  max-width:860px; margin:0 auto;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--accent-border); border-radius:var(--r-lg);
  padding:34px;
  box-shadow:var(--glow-gold);
}
#make .mk-label{
  display:block; margin-bottom:11px;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
#make .mk-row{display:flex; gap:11px;}
#make .mk-input{
  /* min-width:0 with flex:1 — without it the long placeholder sets the flex
     base size and the input refuses to shrink, pushing the button out of the
     box. */
  flex:1 1 auto; min-width:0;
  background:var(--bg); border:1px solid var(--border-strong);
  border-radius:var(--r-sm); padding:15px 17px; min-height:54px;
  color:var(--t1); font-family:inherit; font-size:15.5px;
}
#make .mk-input::placeholder{color:var(--t3);}
#make .mk-input:focus{outline:none; border-color:var(--accent);}
#make .mk-go{flex:none; min-height:54px; white-space:nowrap;}
#make .mk-go-i{width:17px; height:17px;}
/* The button spends tens of seconds working, so it has to look busy and refuse
   a second click rather than silently starting a second generation. */
#make .mk-go[disabled]{opacity:.6; cursor:progress;}
#make .mk-picks{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:15px;
}
#make .mk-picks-l{font-size:12.5px; color:var(--t3); margin-right:2px;}
#make .mk-pick{
  background:var(--s3); border:1px solid var(--border); color:var(--t2);
  border-radius:99px; padding:7px 14px;
  font-family:inherit; font-size:12.5px; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
}
#make .mk-pick:hover,
#make .mk-pick:focus-visible{
  color:var(--accent); border-color:var(--accent-border);
  background:var(--accent-soft);
}
#make .mk-status{
  margin:18px 0 0; padding-top:17px; border-top:1px solid var(--border);
  font-size:14px; line-height:1.6; color:var(--t2);
}
#make .mk-status b{color:var(--t1); font-weight:600;}
#make .mk-status a{color:var(--accent);}
/* Three dots that actually move. A thirty-second wait behind one static line of
   text reads as a page that has died. */
#make .mk-dots{display:inline-block; margin-left:2px; white-space:nowrap;}
#make .mk-dots span{
  display:inline-block; width:4px; height:4px; margin-left:3px;
  border-radius:50%; background:var(--accent); opacity:.25;
  animation:mk-dot 1.25s linear infinite;
}
#make .mk-dots span:nth-child(2){animation-delay:.18s;}
#make .mk-dots span:nth-child(3){animation-delay:.36s;}
@keyframes mk-dot{0%,70%,100%{opacity:.25;} 35%{opacity:1;}}

/* --- the result ---------------------------------------------------------- */
#make .mk-result{
  margin-top:20px; padding-top:24px; border-top:1px solid var(--border);
}
#make .mk-track{display:grid; grid-template-columns:210px minmax(0,1fr); gap:26px;}
/* Square, because the layers inside are circles and border-radius:50% on a
   non-square box draws an ellipse. Same reasoning as #samples .sm-play, where
   that is exactly how it shipped broken once. */
#make .mk-play{
  position:relative; aspect-ratio:1 / 1; width:100%;
  background:none; border:0; padding:0; cursor:pointer;
  display:grid; place-items:center;
}
/* The groove. Radially symmetric on its own, so the conic sheen on top is what
   makes the rotation perceptible at all — see the long note in 9b. */
#make .mk-disc{
  position:absolute; inset:0; z-index:0; border-radius:50%; pointer-events:none;
  background:repeating-radial-gradient(circle,#0b0c0e 0 3px,#17191d 4px 6px);
  animation:sm-spin 3.6s linear infinite; animation-play-state:paused;
  will-change:transform;
}
#make .mk-disc::before{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,.075) 0deg,rgba(255,255,255,0) 55deg,rgba(255,255,255,0) 300deg,rgba(255,255,255,.055) 360deg);
}
#make .mk-disc::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 30px -10px rgba(0,0,0,.9);
}
/* The label rides this. Unlike 9b it is circular from the start: there is no
   "at rest" square artwork to preserve here — the record only exists once a song
   has been generated, so it may as well arrive as a record. */
#make .mk-spin{
  position:absolute; inset:19%; z-index:1; border-radius:50%; overflow:hidden;
  animation:sm-spin 3.6s linear infinite; animation-play-state:paused;
  will-change:transform;
}
#make .mk-art{
  width:100%; height:100%; display:block; object-fit:cover; border-radius:50%;
  background:var(--s3);
}
#make .mk-spindle{
  position:absolute; top:50%; left:50%; z-index:2;
  width:14%; height:14%; margin:-7% 0 0 -7%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#05060700 38%,#050607 39%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
/* The glyph does NOT ride the spinning layer — a rotating play triangle is
   unreadable. It sits on a still plate above it, centred rather than in a
   corner: this disc has no square artwork for a corner to sit in. */
#make .mk-ico{
  position:relative; z-index:3;
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(17,19,24,.84);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--accent-border); color:var(--accent);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.9);
  transition:background .18s, color .18s, transform .18s;
}
#make .mk-play:hover .mk-ico,
#make .mk-play:focus-visible .mk-ico{
  background:var(--accent); color:var(--ink-on-accent); transform:scale(1.06);
}
#make .mk-ico svg{width:21px; height:21px;}
/* One plate, two glyphs, so the control always shows the action it performs. */
#make .mk-ico svg:nth-child(2){display:none;}
#make.is-playing .mk-ico svg:nth-child(1){display:none;}
#make.is-playing .mk-ico svg:nth-child(2){display:block;}
#make.is-playing .mk-ico{
  background:var(--accent); color:var(--ink-on-accent); border-color:var(--accent);
}
/* animation-play-state, never adding or removing the animation: re-adding
   restarts at 0deg, which reads as the record skipping. */
#make.is-playing .mk-disc,
#make.is-playing .mk-spin{animation-play-state:running;}

#make .mk-badge{
  display:inline-block; margin-bottom:10px;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  color:var(--accent); border-radius:99px; padding:5px 12px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase;
}
#make .mk-title{
  font-size:clamp(19px,2.4vw,24px); letter-spacing:-.02em; margin:0 0 6px;
}
#make .mk-sub{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--t3);
}
#make .mk-sub .mk-genre{color:var(--t2);}
/* The rule only exists when there is a duration beside it to divide. An empty
   #mk-dur would otherwise leave a stray vertical tick after the genre — and it
   IS empty until the audio's own metadata arrives, since the response's
   metadata.length is "0:00" and is never shown. */
#make .mk-sub .mk-dur:not(:empty){
  padding-left:9px; border-left:1px solid var(--border-strong);
  font-variant-numeric:tabular-nums;
}
#make .mk-bar{
  height:3px; border-radius:99px; background:var(--s4); overflow:hidden;
}
#make .mk-fill{
  display:block; width:0; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--violet));
  transition:width .2s linear;
}
/* Scrolls rather than growing the section by the height of a lyric sheet. */
#make .mk-lyrics{
  list-style:none; margin:16px 0 0; padding:0;
  max-height:196px; overflow-y:auto;
  font-size:14px; line-height:1.75; color:var(--t3);
}
#make .mk-lyrics li{transition:color .2s;}
/* The line being sung, right now. */
#make .mk-lyrics li.is-now{color:var(--t1); font-weight:500;}
#make .mk-after{display:flex; flex-wrap:wrap; gap:11px; margin-top:24px;}
#make .mk-fine{
  margin:20px 0 0; padding-top:15px; border-top:1px solid var(--border);
  font-size:12px; line-height:1.6; color:var(--t3);
}

/* ===== 9b. SAMPLE SONGS (§3b) ============================================
   Lettered rather than renumbering everything below it — the (§n) references
   map onto the HTML's own section numbers, and §3b is inserted between §3 and
   §4 there for the same reason.

   Cover art is the whole point of the card, so it is the largest element and
   doubles as the play control: a 512px square of real artwork sells the output
   better than any button label could. The play glyph sits over it in a plate
   that only fills in on hover, so the art is never permanently obscured.
   ======================================================================== */
#samples{position:relative;}
#samples .sm-head{max-width:760px; margin:0 auto 40px;}
#samples .sm-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px;
}
#samples .sm-card{
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
#samples .sm-card:hover{
  border-color:var(--border-strong);
  transform:translateY(-3px);
  box-shadow:var(--e2);
}
/* the art IS the button */
#samples .sm-play{
  position:relative; display:block;
  aspect-ratio:1 / 1; overflow:hidden;
  background:var(--s3);
  text-decoration:none; color:inherit;
}
#samples .sm-art{
  /* Fills .sm-spin, which is what actually rotates. object-fit:cover matters
     more once that wrapper goes circular: the crop has to come from the centre
     of the artwork, not from a squashed copy of it. */
  width:100%; height:100%; display:block;
  object-fit:cover;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), filter .2s;
}
#samples .sm-card:hover .sm-art{transform:scale(1.045);}
/* --- the vinyl --------------------------------------------------------------
   Ported from #ai-proof .feat-vinyl-spin on /commercials. Three things carry
   over from that implementation because each one is load-bearing:

   1. The groove is a repeating radial gradient, and the SHEEN on top of it is
      conic and off-axis. A radially symmetric pattern spinning about its own
      centre is visually identical at every angle — without the sheen the disc
      is provably rotating and looks completely still.
   2. Rotation is toggled with animation-play-state, never by adding or removing
      the animation. Pausing holds the current angle and resuming continues from
      it; re-adding an animation restarts at 0deg, which reads as a skip.
   3. The animation is only ever running while the <audio> element is actually
      playing — .is-playing comes from initSamples() listening to the audio's
      own events, so the disc cannot spin over silence.

   Size changes use `inset`, not `transform:scale`. The keyframe owns the
   transform property, so a scale declared on the element would be overridden,
   and a scale written INTO the keyframe would apply at frame 0 and shrink every
   cover on page load. */
@keyframes sm-spin{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}

/* The groove sits under the art, full bleed, and is only revealed as the cover
   pulls in to become the label. */
#samples .sm-disc{
  position:absolute; inset:0; z-index:0; border-radius:50%;
  pointer-events:none; opacity:0;
  background:repeating-radial-gradient(circle,#0b0c0e 0 3px,#17191d 4px 6px);
  animation:sm-spin 3.6s linear infinite;
  animation-play-state:paused;
  transition:opacity .4s;
  will-change:transform;
}
#samples .sm-disc::before{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,.075) 0deg,rgba(255,255,255,0) 55deg,rgba(255,255,255,0) 300deg,rgba(255,255,255,.055) 360deg);
}
/* A rim, so the disc reads as an object rather than a texture. */
#samples .sm-disc::after{
  content:''; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 30px -10px rgba(0,0,0,.9);
}

/* The layer the cover rides on. Square and full bleed at rest, so nothing about
   the card changes until something plays. */
#samples .sm-spin{
  position:absolute; inset:0; z-index:1; display:block;
  overflow:hidden; border-radius:0;
  animation:sm-spin 3.6s linear infinite;
  animation-play-state:paused;
  transition:inset .45s cubic-bezier(.3,.7,.2,1), border-radius .45s cubic-bezier(.3,.7,.2,1);
  will-change:transform;
}
/* How much groove shows is the one judgement call in this effect, so it was
   rendered at 13/18/23/28% and picked by eye (_dev/_probe_inset.py).

   On /commercials the label is 118px of a 285px disc — 41% of the diameter,
   about right for a real 7-inch. Matching that here would need a 28% inset and
   would turn four covers into four thumbnails, and the art is the point of this
   section. 13% left a rim so thin it read as a circular crop rather than a
   record. 20% is the balance: a groove ring wide enough to be unmistakably
   vinyl, with the artwork still the largest thing on the card. */
#samples .sm-card.is-playing .sm-spin{inset:20%; border-radius:50%;}
#samples .sm-card.is-playing .sm-disc{opacity:1;}
#samples .sm-card.is-playing .sm-spin,
#samples .sm-card.is-playing .sm-disc{animation-play-state:running;}

/* The spindle hole. Hidden at rest — a hole punched through square artwork
   looks like a defect; over a circular label it is the thing that finishes it. */
#samples .sm-spindle{
  /* Percentages here resolve against .sm-play, not the label, so this is sized
     to look right against the 60%-diameter label the 20% inset produces —
     roughly a real spindle hole relative to a 7-inch centre. */
  position:absolute; top:50%; left:50%; z-index:2;
  width:9%; height:9%; margin:-4.5% 0 0 -4.5%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,#05060700 38%,#050607 39%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  opacity:0; transition:opacity .3s .15s;
}
#samples .sm-card.is-playing .sm-spindle{opacity:1;}

/* While playing, the cover is a spinning label, so the hover zoom is wrong:
   it would push the artwork out past the circular crop. */
#samples .sm-card.is-playing:hover .sm-art{transform:none;}

/* Keeps the art legible under the glyph without a full scrim over the whole
   square: the gradient only darkens the corner the plate sits in. */
#samples .sm-play::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* z-index above the rotating layers, or the scrim spins with them. It also
     fades out while playing: the scrim exists to keep the glyph legible over
     square artwork, and once the cover has pulled in to a circle the glyph is
     sitting over bare groove, which needs no help. */
  z-index:3;
  background:linear-gradient(215deg,transparent 52%,rgba(11,12,14,.72));
  opacity:.85; transition:opacity .2s;
}
#samples .sm-card:hover .sm-play::after{opacity:1;}
/* After the :hover rule, not before it — equal specificity, so source order
   decides, and the playing state has to win. The pointer is almost always still
   over the card at this moment, since a click is what started playback. */
#samples .sm-card.is-playing .sm-play::after,
#samples .sm-card.is-playing:hover .sm-play::after{opacity:0;}
#samples .sm-ico{
  /* 4, above the scrim (3) and both rotating layers (0/1). */
  position:absolute; z-index:4; right:12px; bottom:12px;
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(17,19,24,.82);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--accent-border); color:var(--accent);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.9);
  transition:background .18s, color .18s, transform .18s;
}
#samples .sm-play:hover .sm-ico,
#samples .sm-play:focus-visible .sm-ico{
  background:var(--accent); color:#0B0C0E; transform:scale(1.06);
}
#samples .sm-ico svg{width:19px; height:19px;}
/* One plate, two glyphs: the pause path is hidden until the card is the one
   playing, so the control always shows the action it will perform. */
#samples .sm-ico svg:nth-child(2){display:none;}
#samples .sm-card.is-playing .sm-ico svg:nth-child(1){display:none;}
#samples .sm-card.is-playing .sm-ico svg:nth-child(2){display:block;}
#samples .sm-card.is-playing .sm-ico{
  background:var(--accent); color:#0B0C0E;
  border-color:var(--accent);
}
#samples .sm-card.is-playing{border-color:var(--accent-border);}

#samples .sm-body{
  display:flex; flex-direction:column;
  padding:16px 17px 17px; gap:0;
}
#samples .sm-title{
  font-size:16px; letter-spacing:-.015em; margin:0 0 5px;
  /* a long title must not push the card taller than its siblings */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#samples .sm-sub{
  display:flex; align-items:center; gap:9px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--t3);
  margin:0 0 9px;
}
#samples .sm-sub .sm-dur{
  padding-left:9px; border-left:1px solid var(--border-strong);
  font-variant-numeric:tabular-nums;
}
#samples .sm-note{
  font-size:13px; line-height:1.55; color:var(--t2);
  margin:0 0 13px; flex:1 1 auto;
}
/* Progress. Zero-width and inert until JS sets it, so it reads as a rule
   rather than an empty trough on a no-JS render. */
#samples .sm-bar{
  height:3px; border-radius:99px; background:var(--s4);
  overflow:hidden; margin-top:auto;
}
#samples .sm-fill{
  display:block; width:0; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--violet));
  transition:width .2s linear;
}
#samples .sm-foot{
  margin:36px auto 0; max-width:820px; text-align:center;
  font-size:14px; color:var(--t2);
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border); border-radius:var(--r);
  padding:18px 22px;
}
#samples .sm-foot strong{color:var(--t1);}
/* The shared player is a controller, not a control surface. */
#samples #sm-audio{display:none;}

/* ===== 10. WHAT IS LYRIXSA (§4) ==========================================
   Photo-led: the portrait carries the feeling, the numbered rail carries the
   argument. Two columns so neither has to do both jobs.
   ======================================================================== */
#what-is{
  background:var(--s1); border-bottom:1px solid var(--border);
  overflow:hidden;
}
#what-is .wi-grid{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:64px; align-items:center;
}
#what-is .wi-photo{position:relative;}
#what-is .wi-photo img{
  width:100%; max-width:440px;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.7));
}
/* a small waveform under the portrait, tying the photo to the product */
#what-is .wi-photo-wave{
  position:relative; z-index:2;
  height:54px; max-width:440px; margin:-10px 0 0;
  opacity:.65;
  -webkit-mask-image:linear-gradient(90deg,#000,#000 70%,transparent);
          mask-image:linear-gradient(90deg,#000,#000 70%,transparent);
}
#what-is .wi-rail{position:relative;}
#what-is .wi-step{
  position:relative; padding:0 0 26px 58px;
}
#what-is .wi-step:last-child{padding-bottom:0;}
/* the connecting line, drawn between the numbers */
#what-is .wi-step::before{
  content:''; position:absolute; left:17px; top:38px; bottom:0;
  width:1px; background:linear-gradient(180deg,var(--accent-border),var(--border) 70%);
}
#what-is .wi-step:last-child::before{display:none;}
#what-is .wi-num{
  position:absolute; left:0; top:0;
  width:35px; height:35px; border-radius:11px;
  display:grid; place-items:center;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  background:var(--s3); border:1px solid var(--border-strong); color:var(--accent);
}
#what-is .wi-step:hover .wi-num{border-color:var(--accent-border); background:var(--accent-soft);}
#what-is .wi-step h3{font-size:17.5px; margin-bottom:6px;}
#what-is .wi-step p{font-size:14px; color:var(--t2); margin:0;}
#what-is .wi-foot{
  margin:52px 0 0; text-align:center;
  font-size:14.5px; color:var(--t2);
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border);
  border-radius:var(--r); padding:20px 24px;
  position:relative;
}
#what-is .wi-foot strong{color:var(--t1);}

/* ===== 11. FOUR WAYS IN (§5) ============================================= */
#create-ways{overflow:hidden;}
#create-ways .cw-head{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px; align-items:center; margin-bottom:44px;
}
#create-ways .cw-photo{justify-self:end;}
#create-ways .cw-photo img{
  width:100%; max-width:340px;
  filter:drop-shadow(0 26px 48px rgba(0,0,0,.72));
  /* the source asset is cropped at the waist, so without this the figure
     ends on a hard horizontal edge */
  -webkit-mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 74%,transparent 99%);
}
#create-ways .cw-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px;
}
#create-ways .cw-card{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px; display:flex; flex-direction:column; gap:14px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
#create-ways .cw-card:hover{
  border-color:var(--border-strong); transform:translateY(-3px); box-shadow:var(--e2);
}
#create-ways .cw-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px;}
#create-ways .cw-ico{
  flex:none; width:44px; height:44px; border-radius:13px;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  display:grid; place-items:center; color:var(--accent);
  transition:transform .2s;
}
#create-ways .cw-card:hover .cw-ico{transform:scale(1.06) rotate(-3deg);}
/* Each route gets its own accent so the four read as four different doors. */
#create-ways .cw-card:nth-child(2) .cw-ico{
  background:var(--violet-soft); border-color:var(--violet-border); color:var(--violet);
}
#create-ways .cw-card:nth-child(3) .cw-ico{
  background:var(--cyan-soft); border-color:var(--cyan-border); color:var(--cyan);
}
#create-ways .cw-card:nth-child(4) .cw-ico{
  background:var(--success-soft); border-color:rgba(127,217,168,.4); color:var(--success);
}
#create-ways .cw-ico svg{width:21px; height:21px;}
#create-ways .cw-card h3{font-size:18px; margin:0 0 7px;}
#create-ways .cw-card p{font-size:14px; color:var(--t2); margin:0;}
#create-ways .cw-meta{
  display:flex; flex-wrap:wrap; gap:7px;
  padding-top:4px; margin-top:auto;
}
#create-ways .cw-note{
  margin-top:28px; font-size:13.5px; color:var(--t3);
  display:flex; align-items:flex-start; gap:8px;
}
#create-ways .cw-note svg{flex:none; width:15px; height:15px; margin-top:3px; color:var(--t3);}
/* min-width:0 lets the text block shrink below its longest word at 320px */
#create-ways .cw-note > span{min-width:0; flex:1 1 auto;}
#create-ways .cw-note strong{color:var(--t2); font-weight:600;}
#create-ways .cw-note .tag{vertical-align:1px;}

/* ===== 12. IN ACTION (§6) ================================================ */
#in-action{
  background:
    radial-gradient(900px 420px at 80% 8%,rgba(124,92,255,.10),transparent 70%),
    var(--s1);
  border-block:1px solid var(--border); overflow:hidden;
}
#in-action .ia-head{max-width:760px; margin:0 auto 38px; text-align:center;}
/* Tab strip */
#in-action .ia-tabs{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  margin-bottom:34px;
}
#in-action .ia-tab{
  background:var(--s2); border:1px solid var(--border);
  color:var(--t2); border-radius:20px; padding:9px 17px;
  font-size:13px; font-weight:500; cursor:pointer;
  transition:.16s; white-space:nowrap;
}
#in-action .ia-tab:hover{color:var(--t1); border-color:var(--border-strong);}
#in-action .ia-tab[aria-selected="true"]{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  border-color:transparent; color:var(--ink-on-accent); font-weight:600;
  box-shadow:0 8px 22px -10px rgba(242,169,60,.7);
}
#in-action .ia-panel[hidden]{display:none;}
#in-action .ia-panel{
  /* minmax(0,…) keeps the columns from being pushed wider than the panel by
     their own min-content (the nowrap mono path + screenshot). */
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:48px; align-items:center;
}
#in-action .ia-copy h3{font-size:clamp(20px,2.4vw,26px); letter-spacing:-.02em; margin-bottom:12px;}
#in-action .ia-copy p{font-size:14.5px; color:var(--t2);}
#in-action .ia-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:12px;
}
#in-action .ia-note{
  font-size:12px; color:var(--t3); margin-top:18px;
  padding-top:15px; border-top:1px solid var(--border);
}

/* ===== 13. THE TIMELINE (§7) =============================================
   Four stages on one rail. The rail is a single gradient line behind the
   nodes, so the stages read as one continuous journey — which is the whole
   argument of the section — instead of four unrelated cards.
   ======================================================================== */
#pipeline .tl{position:relative; margin-top:52px;}
/* the rail */
#pipeline .tl::before{
  content:''; position:absolute; z-index:0;
  left:0; right:0; top:22px; height:2px;
  background:linear-gradient(90deg,
    transparent, var(--accent) 6%, var(--accent) 34%,
    var(--violet) 66%, var(--cyan) 92%, transparent);
  opacity:.55;
}
#pipeline .tl-row{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px;
}
#pipeline .tl-step{position:relative; padding-top:0;}
#pipeline .tl-node{
  width:46px; height:46px; border-radius:15px; margin-bottom:18px;
  display:grid; place-items:center;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--ink-on-accent);
  font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:500;
  box-shadow:0 0 0 6px var(--bg), 0 10px 26px -10px rgba(242,169,60,.8);
}
#pipeline .tl-step:nth-child(3) .tl-node{
  background:linear-gradient(180deg,#9A80FF,var(--violet)); color:#fff;
  box-shadow:0 0 0 6px var(--bg), 0 10px 26px -10px rgba(124,92,255,.9);
}
#pipeline .tl-step:nth-child(4) .tl-node{
  background:linear-gradient(180deg,#5FE4D3,var(--cyan)); color:#062B26;
  box-shadow:0 0 0 6px var(--bg), 0 10px 26px -10px rgba(52,211,192,.85);
}
#pipeline .tl-verb{
  display:block;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;
}
#pipeline .tl-step:nth-child(3) .tl-verb{color:var(--violet);}
#pipeline .tl-step:nth-child(4) .tl-verb{color:var(--cyan);}
#pipeline .tl-step h3{font-size:17px; margin-bottom:8px;}
#pipeline .tl-step p{font-size:13.8px; color:var(--t2); margin:0 0 13px;}
#pipeline .tl-tags{display:flex; flex-wrap:wrap; gap:6px;}

#pipeline .pl-proof{
  margin-top:64px;
  /* minmax(0,…) not 1fr: a bare 1fr keeps min-width:auto, so the items'
     min-content can force a track wider than the container. */
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start;
}
#pipeline .pl-sub{font-size:14px; color:var(--t2); max-width:680px;}
#pipeline .pl-cap{
  font-size:12px; color:var(--t3); margin-top:15px; line-height:1.55;
}
#pipeline .pl-cap strong{color:var(--t2); font-weight:600;}
#pipeline .pl-cap em{font-style:normal; color:var(--t2); font-weight:600;}
/* The certificate is cropped in the asset itself (license-certificate-rights.png),
   not with negative margins — the licensee block never ships to the browser. */

/* ===== 14. PRICING — TWO TIERS (§8) ======================================
   Two plans, each billable monthly or yearly, chosen by the segmented toggle
   above the grid. The toggle is two real <button>s in a radiogroup rather than
   a checkbox: "monthly or yearly" is a choice between two named options, and
   both labels need to be readable at once.

   Prices are authored in the markup AND held in config.js; main.js rewrites
   the .pr-amt / .pr-eq / .pr-note nodes when the period changes. Both periods
   ship in the HTML — the inactive one is hidden with [hidden], so with JS off
   the page still shows complete, correct monthly pricing.
   ======================================================================== */
#plans{
  overflow:hidden;
  background:
    radial-gradient(900px 500px at 50% 0%,rgba(242,169,60,.10),transparent 68%),
    var(--bg);
}
#plans .pr-head{max-width:760px; margin:0 auto 34px; text-align:center;}

/* ---- the "why ongoing access" strip, folded in above the cards ---- */
#plans .pr-why{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r);
  max-width:980px; margin:0 auto 40px; overflow:hidden;
}
#plans .pr-why-item{
  background:var(--s1); padding:20px 22px;
  display:flex; gap:13px; align-items:flex-start;
}
#plans .pr-why-ico{
  flex:none; width:34px; height:34px; border-radius:10px;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  display:grid; place-items:center; color:var(--accent);
}
#plans .pr-why-item:nth-child(2) .pr-why-ico{
  background:var(--violet-soft); border-color:var(--violet-border); color:var(--violet);
}
#plans .pr-why-item:nth-child(3) .pr-why-ico{
  background:var(--cyan-soft); border-color:var(--cyan-border); color:var(--cyan);
}
#plans .pr-why-ico svg{width:17px; height:17px;}
#plans .pr-why-item h3{font-size:14.5px; margin:1px 0 4px;}
#plans .pr-why-item p{font-size:13px; color:var(--t2); margin:0;}

/* ---- billing toggle ---- */
#plans .pr-toggle-wrap{display:flex; justify-content:center; margin-bottom:14px;}
#plans .pr-toggle{
  display:inline-flex; align-items:center; gap:4px;
  background:var(--s2); border:1px solid var(--border);
  border-radius:999px; padding:5px;
  box-shadow:var(--e1), 0 1px 0 rgba(255,255,255,.05) inset;
}
#plans .pr-tog{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; cursor:pointer;
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px;
  color:var(--t2); padding:9px 20px; border-radius:999px;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .16s, color .16s, box-shadow .16s;
  white-space:nowrap;
}
#plans .pr-tog:hover{color:var(--t1);}
#plans .pr-tog[aria-checked="true"]{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--ink-on-accent);
  box-shadow:0 8px 22px -10px rgba(242,169,60,.8);
}
/* The saving badge has to stay legible against both the panel and, when the
   yearly option is selected, the solid accent fill behind it. */
#plans .pr-save{
  font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  color:var(--accent); padding:3px 7px; border-radius:20px;
}
#plans .pr-tog[aria-checked="true"] .pr-save{
  background:rgba(26,19,0,.16); border-color:rgba(26,19,0,.32); color:var(--ink-on-accent);
}
#plans .pr-toggle-note{
  text-align:center; font-size:12.5px; color:var(--t3); margin:0 0 36px;
}

/* ---- the two cards ---- */
#plans .pr-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px; align-items:start;
  max-width:940px; margin:0 auto;
}
#plans .pr-card{
  position:relative; display:flex; flex-direction:column; height:100%;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border);
  border-radius:var(--r-xl); padding:34px 30px;
  box-shadow:var(--e1);
  overflow:hidden;
}
/* The featured card is the recommendation, so it carries the accent border,
   the gold wash, the ribbon and the only real lift on the page. */
#plans .pr-card.is-featured{
  border-color:var(--accent-border);
  box-shadow:var(--glow-gold), var(--e2);
}
#plans .pr-card.is-featured::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% -10%,rgba(242,169,60,.16),transparent 58%);
}
#plans .pr-card > *{position:relative; z-index:1;}
#plans .pr-ribbon{
  position:absolute; top:0; right:26px; z-index:2;
  font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.11em; text-transform:uppercase;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--ink-on-accent);
  padding:5px 12px; border-radius:0 0 8px 8px;
}
#plans .pr-name{font-size:21px; margin:0 0 7px;}
#plans .pr-tagline{font-size:13.5px; color:var(--t2); margin:0 0 22px; min-height:38px;}

/* ---- price block ---- */
#plans .pr-price{padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--border);}
#plans .pr-amt{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(38px,5.4vw,52px); letter-spacing:-.04em; color:var(--t1);
  display:inline-flex; align-items:flex-start; gap:3px; line-height:1;
}
#plans .pr-cur{font-size:.48em; margin-top:.26em; color:var(--accent);}
#plans .pr-int{
  font-family:'Inter',sans-serif; font-weight:500;
  font-size:13.5px; color:var(--t2); letter-spacing:0;
  align-self:flex-end; margin-left:5px; margin-bottom:.2em;
}
/* monthly equivalent on a yearly price, e.g. "$30.83 a month" */
#plans .pr-eq{
  display:inline-block; margin-top:12px;
  font-size:12.5px; color:var(--accent);
  background:var(--accent-soft); border:1px solid var(--accent-border);
  border-radius:20px; padding:4px 11px;
}
#plans .pr-note{display:block; font-size:12px; color:var(--t3); margin-top:8px;}

/* ---- features ---- */
#plans .pr-feats{margin-bottom:24px; flex:1 1 auto;}
#plans .pr-feats li{font-size:13.8px; margin-bottom:10px;}
#plans .pr-feats li:last-child{margin-bottom:0;}
/* An excluded capability, drawn so it cannot be mistaken for an included one:
   muted, and marked with a dash rather than a tick. */
#plans .pr-excl li{
  position:relative; padding-left:28px; margin-top:10px;
  font-size:13.5px; color:var(--t3);
}
#plans .pr-excl li::before{
  content:''; position:absolute; left:5px; top:9px;
  width:10px; height:1.5px; background:var(--t3); border-radius:1px;
}
#plans .pr-cta .btn{width:100%;}
#plans .pr-card .fineprint{justify-content:center; text-align:center;}

/* ---- reassurance strip under the grid ---- */
#plans .pr-foot{
  max-width:940px; margin:36px auto 0;
  padding:20px 24px;
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r);
  font-size:13px; color:var(--t2); text-align:center; line-height:1.65;
}
#plans .pr-foot strong{color:var(--t1);}
#plans .pr-legal{
  max-width:840px; margin:18px auto 0;
  font-size:12px; color:var(--t3); text-align:center; line-height:1.6;
}

/* ===== 14b. PRICING CALL (§8 on the landing page) ========================
   The landing page's stand-in for the section above, which now lives on
   /pricing/. Section 14 keeps its number rather than being renumbered: the
   rules are unchanged and still in use, just on a different document.

   The two plates are <a>s, not cards: everything here is a route to the same
   destination, so making them look clickable is honest. They deliberately do
   NOT restate the feature lists — the whole point of the split was to stop
   this page carrying 160 lines of pricing.
   ======================================================================== */
#plans-call{
  overflow:hidden;
  /* the same wash section 14 used, so the page's rhythm is unchanged where
     the section was lifted out */
  background:
    radial-gradient(900px 500px at 50% 0%,rgba(242,169,60,.10),transparent 68%),
    var(--bg);
}
#plans-call .pc-in{max-width:760px; margin:0 auto; text-align:center;}
#plans-call .pc-pair{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;
  margin:32px 0 28px; text-align:left;
}
#plans-call .pc-plan{
  display:flex; flex-direction:column; gap:6px;
  padding:22px 22px 20px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
#plans-call .pc-plan:hover{
  border-color:var(--border-strong);
  transform:translateY(-3px);
  box-shadow:var(--e2);
  text-decoration:none;
}
#plans-call .pc-plan.is-featured{border-color:var(--accent-border);}
#plans-call .pc-name{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
#plans-call .pc-amt{
  font-family:var(--f-display); font-size:38px; font-weight:800;
  letter-spacing:-.03em; color:var(--t1); line-height:1;
}
#plans-call .pc-int{
  font-family:var(--f-body); font-size:13px; font-weight:500;
  letter-spacing:0; color:var(--t3);
}
#plans-call .pc-note{font-size:13px; color:var(--t2); line-height:1.5;}
#plans-call .pc-foot{
  max-width:620px; margin:18px auto 0;
  font-size:12.5px; color:var(--t3); line-height:1.6;
}

/* ===== 14c. SUB-PAGE FURNITURE (/pricing/) ===============================
   Two small pieces the landing page has no use for. Kept in the shared
   stylesheet rather than inlined on that page so there is one stylesheet to
   cache across both documents.
   ======================================================================== */
/* Breadcrumb. It is a real nav element as well as a BreadcrumbList in JSON-LD:
   the markup is what a visitor uses to get back, the structured data is what
   puts "lyrixsa.com > Pricing" in the search result instead of a bare URL. */
.pg-crumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:30px; padding-bottom:0;
  font-size:12px; color:var(--t3); letter-spacing:.01em;
}
.pg-crumb a{color:var(--t2); text-decoration:none;}
.pg-crumb a:hover{color:var(--accent);}
.pg-crumb span[aria-current]{color:var(--t1);}

/* The route back into the argument, for someone who arrived here from a search
   for the price and has seen none of the reasons for it. */
.pg-back{border-top:1px solid var(--border); background:var(--s1);}
.pg-back .pg-back-in{max-width:660px; margin:0 auto; text-align:center;}
.pg-back .pg-back-in p{
  margin:12px 0 22px; font-size:14.5px; color:var(--t2); line-height:1.7;
}
.pg-back .cta-row{justify-content:center;}

/* ===== 15. FAQ (§9) ====================================================== */
#faq{background:var(--s1); border-block:1px solid var(--border);}
#faq .fq-head{max-width:660px; margin:0 auto 38px; text-align:center;}
#faq .fq-list{max-width:840px; margin:0 auto; display:grid; gap:10px;}
#faq .fq-item{
  background:var(--bg); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  transition:border-color .18s, background .18s;
}
#faq .fq-item:hover{border-color:var(--border-strong);}
#faq .fq-item:has(.fq-q[aria-expanded="true"]){
  border-color:var(--accent-border);
  background:linear-gradient(180deg,var(--s2),var(--bg));
}
#faq .fq-q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; text-align:left; cursor:pointer;
  background:none; border:0; padding:19px 22px;
  font-family:'Space Grotesk',sans-serif; font-size:15.5px; font-weight:600;
  color:var(--t1); line-height:1.45;
}
#faq .fq-q:hover{color:var(--accent);}
#faq .fq-ico{
  flex:none; width:22px; height:22px; position:relative; margin-top:1px;
  border-radius:7px; background:var(--s3); border:1px solid var(--border);
  transition:background .2s, border-color .2s;
}
#faq .fq-q[aria-expanded="true"] .fq-ico{
  background:var(--accent-soft); border-color:var(--accent-border);
}
#faq .fq-ico::before,#faq .fq-ico::after{
  content:''; position:absolute; background:var(--accent);
  border-radius:1px; transition:transform .2s, opacity .2s;
}
#faq .fq-ico::before{left:5px; right:5px; top:10px; height:1.8px;}
#faq .fq-ico::after{top:5px; bottom:5px; left:9.6px; width:1.8px;}
#faq .fq-q[aria-expanded="true"] .fq-ico::after{transform:scaleY(0); opacity:0;}
#faq .fq-a{
  overflow:hidden; max-height:0;
  transition:max-height .26s ease, opacity .2s ease;
  opacity:0;
}
#faq .fq-a.on{opacity:1;}
#faq .fq-a p{
  font-size:14.5px; color:var(--t2); margin:0 0 20px; padding:0 52px 0 22px;
}
#faq .fq-soon{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-border); border-radius:20px;
  padding:3px 8px; margin-left:8px; vertical-align:2px;
  white-space:nowrap; font-weight:500;
}

/* ===== 16. FINAL CTA (§10) ===============================================
   The two listeners bleed off the right edge behind the copy, with the wave
   running through the whole band — the closing echo of the hero.
   ======================================================================== */
#final{
  position:relative; overflow:hidden;
  padding:104px 0;
  background:
    radial-gradient(1000px 500px at 30% 50%,rgba(242,169,60,.14),transparent 70%),
    radial-gradient(700px 420px at 88% 60%,rgba(124,92,255,.16),transparent 70%),
    var(--bg);
  border-top:1px solid var(--border);
}
#final .fn-bg{position:absolute; inset:0; z-index:0; pointer-events:none;}
#final .fn-photo{
  position:absolute; right:-6%; bottom:0; z-index:1;
  width:min(720px,52vw); pointer-events:none;
  /* fade the cutout into the section so it reads as part of the band */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent 2%,#000 26%);
          mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(0deg,transparent 2%,#000 26%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  opacity:.85;
}
#final .fn-wave{
  position:absolute; left:0; right:0; bottom:16%; height:min(180px,24vh);
  z-index:0; opacity:.34;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent);
}
#final .fn-in{position:relative; z-index:2; max-width:620px;}
/* Same treatment as the hero: the closing band's wave was running straight
   through the CTA fineprint. */
#final .fn-in::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-170px -280px -170px -280px;
  background:radial-gradient(closest-side at 46% 50%,
    rgba(11,12,14,.9) 0%, rgba(11,12,14,.86) 30%,
    rgba(11,12,14,.6) 52%, rgba(11,12,14,.24) 66%, transparent 76%);
}
#final .fn-logo{height:44px; width:auto; margin:0 0 26px;}
#final h2{
  font-size:clamp(30px,5.2vw,52px); font-weight:700;
  letter-spacing:-.035em; line-height:1.05; margin-bottom:18px;
}
#final p{font-size:clamp(15px,1.7vw,17.5px); color:var(--t2); max-width:520px; margin:0 0 30px;}
#final .fn-micro{
  display:flex; flex-wrap:wrap; gap:9px; margin-top:32px;
}

/* ===== 17. FOOTER (§11) ================================================== */
#site-footer{
  background:var(--s1); border-top:1px solid var(--border);
  padding:60px 0 34px; font-size:13.5px;
}
#site-footer .ft-in{max-width:1120px; margin:0 auto; padding:0 24px;}
#site-footer .ft-top{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:40px;
  padding-bottom:32px; border-bottom:1px solid var(--border);
}
#site-footer .ft-mark{height:38px; width:auto; margin-bottom:16px;}
#site-footer .ft-blurb{color:var(--t2); font-size:13.5px; max-width:340px;}
#site-footer .ft-co{color:var(--t3); font-size:12.5px; margin:14px 0 0;}
#site-footer h4{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--t3);
  margin-bottom:15px;
}
#site-footer .ft-links li{margin-bottom:10px;}
#site-footer .ft-links a{color:var(--t2); font-size:13.5px;}
#site-footer .ft-links a:hover{color:var(--accent);}
#site-footer .ft-doc{
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--t2); font-size:13.5px; font-family:'Inter',sans-serif;
  text-align:left; line-height:1.6;
}
#site-footer .ft-doc:hover{color:var(--accent); text-decoration:underline;}
#site-footer .ft-legal-note{
  color:var(--t3); font-size:12px; margin-top:14px; line-height:1.55;
}
#site-footer .ft-disc{
  padding:26px 0; border-bottom:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
}
#site-footer .ft-disc-item .ft-k{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--t2);
  margin-bottom:8px;
}
#site-footer .ft-disc-item p{font-size:12px; color:var(--t3); line-height:1.62; margin:0 0 9px;}
#site-footer .ft-disc-item em{color:var(--t2); font-style:normal; font-weight:600;}
#site-footer .ft-note{
  font-size:11.5px; color:var(--t3); line-height:1.65; margin:24px 0 0;
}
#site-footer .ft-bottom{
  display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between;
  padding-top:24px;
}
#site-footer .ft-copy{color:var(--t3); font-size:12.5px; margin:0;}

/* ===== 17b. LEGAL MODAL ================================================== */
#legal-modal[hidden]{display:none;}
/* 600, not 120. The cookie bar sits at 500 and its own comment already
   documents the modal as being above it — but at 120 it was below, so "Read the
   Privacy Policy" inside the bar opened the dialog BEHIND the bar, which then
   covered the bottom 116px of it including the first lines of the document.
   Raising the modal is the correct half to change: the bar is pinned furniture
   that everything else should clear, and the dialog is the thing the visitor
   just asked for. */
#legal-modal{
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#legal-modal .lg-scrim{
  position:absolute; inset:0; background:rgba(5,5,7,.84);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
#legal-modal .lg-box{
  position:relative; z-index:1;
  width:100%; max-width:820px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--s1); border:1px solid var(--border-strong);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--e3);
}
#legal-modal .lg-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px 16px; border-bottom:1px solid var(--border); flex:none;
}
#legal-modal .lg-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:8px;
}
#legal-modal h2{font-size:clamp(18px,2.4vw,23px); margin:0;}
#legal-modal .lg-date{font-size:12px; color:var(--t3); margin:7px 0 0;}
#legal-modal .lg-x{
  flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  display:grid; place-items:center; transition:.15s;
}
#legal-modal .lg-x:hover{color:var(--t1); border-color:var(--border-strong);}
#legal-modal .lg-x svg{width:17px; height:17px;}
#legal-modal .lg-tabs{
  display:flex; gap:7px; padding:14px 24px; flex:none;
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
#legal-modal .lg-tabs::-webkit-scrollbar{display:none;}
#legal-modal .lg-tab{
  flex:none; cursor:pointer; white-space:nowrap;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:500;
  transition:.15s;
}
#legal-modal .lg-tab:hover{color:var(--t1);}
#legal-modal .lg-tab[aria-selected="true"]{
  background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent);
}
#legal-modal .lg-body{
  padding:22px 24px 30px; overflow-y:auto; flex:1 1 auto;
  font-size:13.8px; color:var(--t2); line-height:1.72;
  overscroll-behavior:contain;
}
/* Every heading in these documents carries its ordinal in its own <span>:
   <h3><span>1</span>Information We Collect</h3>. Without a rule for that span
   it is a plain inline and the two strings run together — the live page read
   "AThird-Party Account Access" and "1Information We Collect". These rules are
   ported from public/aistudio/assets/css/studio.css, where the same documents
   are rendered by the same modal script, so one document does not look like two
   different documents depending on which page opened it. */
#legal-modal .lg-body h3{
  display:flex; align-items:baseline; gap:11px;
  color:var(--t1); font-size:15.5px; letter-spacing:-.01em;
  margin:30px 0 11px; padding-top:18px; border-top:1px solid var(--border);
}
#legal-modal .lg-body h3:first-child{margin-top:0; padding-top:0; border-top:0;}
#legal-modal .lg-body h3 > span{
  flex:none; min-width:26px; height:26px; border-radius:7px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); border:1px solid var(--accent-border);
  color:var(--accent);
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:400;
}
#legal-modal .lg-body h4{
  display:flex; align-items:baseline; gap:9px;
  color:var(--t1); font-size:13.8px; margin:22px 0 9px;
}
#legal-modal .lg-body h4 > span{
  flex:none; font-family:'IBM Plex Mono',monospace; font-size:10px;
  letter-spacing:.05em; color:var(--t3);
}
/* Sub-headings with no ordinal ("Important", "Copyright Notice") — the
   documents mark these .lg-plain precisely so they are not mistaken for a
   numbered clause. */
#legal-modal .lg-body h4.lg-plain{
  display:block;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-top:28px;
}
#legal-modal .lg-body h4:first-child{margin-top:0;}
/* Clause numbers (1.1, 3.2 …) hang in the margin so the clause text still
   forms one straight left edge down the page. */
#legal-modal .lg-body p.lg-cl{
  padding-left:44px; position:relative; margin-bottom:11px;
}
#legal-modal .lg-body p.lg-cl > b{
  position:absolute; left:0; top:0; font-weight:400;
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--t3);
}
#legal-modal .lg-body a{color:var(--accent); word-break:break-word;}
#legal-modal .lg-body em{font-style:normal; font-weight:600; color:var(--t1);}
#legal-modal .lg-body p{margin:0 0 12px;}
#legal-modal .lg-body ul,
#legal-modal .lg-body ol{margin:0 0 12px; padding-left:20px; list-style:disc;}
#legal-modal .lg-body ol{list-style:decimal;}
#legal-modal .lg-body li{margin-bottom:7px;}
#legal-modal .lg-body strong{color:var(--t1);}
#legal-modal .lg-body table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:12.5px;}
#legal-modal .lg-body th,
#legal-modal .lg-body td{
  border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top;
}
#legal-modal .lg-body th{color:var(--t1); background:var(--s2); font-weight:600;}
@media (max-width:560px){
  #legal-modal{padding:12px;}
  #legal-modal .lg-box{max-height:92vh; border-radius:13px;}
  #legal-modal .lg-head{padding:18px 17px 14px;}
  #legal-modal .lg-tabs{padding:12px 17px;}
  #legal-modal .lg-body{padding:18px 17px 26px; font-size:13.5px;}
}

/* ===== 17c. COOKIE NOTICE ================================================
   Pinned to the bottom rather than shown as a modal: a modal over a pricing
   page blocks the thing the visitor came for, and a consent prompt that has to
   be dismissed before the price can be read costs more conversions than the
   analytics it protects are worth.

   z-index sits below the legal modal (600) so "Read the Privacy Policy" opens
   OVER the bar rather than behind it.
   ======================================================================== */
#cookie-bar{
  position:fixed; z-index:500; left:0; right:0; bottom:0;
  background:rgba(13,14,17,.94);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--border-strong);
  box-shadow:0 -18px 50px -24px rgba(0,0,0,.9);
}
#cookie-bar[hidden]{display:none;}
#cookie-bar .ck-in{
  max-width:1120px; margin:0 auto; padding:16px 24px;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:16px 28px; align-items:center;
}
#cookie-bar .ck-txt{
  margin:0; font-size:13px; line-height:1.6; color:var(--t2);
  max-width:74ch;
}
#cookie-bar .ck-txt strong{color:var(--t1);}
#cookie-bar .ck-txt em{color:var(--t1); font-style:normal; font-weight:500;}
/* A button, not an anchor, because it opens the in-page legal modal — an
   <a href="#"> that never navigates lies to the status bar and to a keyboard
   user about what is going to happen. Styled as a link because that is what
   it behaves like. */
#cookie-bar .ck-link{
  background:none; border:0; padding:0; margin-left:4px;
  font:inherit; color:var(--accent); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
#cookie-bar .ck-link:hover{color:var(--accent-2);}
#cookie-bar .ck-btns{display:flex; gap:10px; flex:none; align-items:center;}
#cookie-bar .ck-btn{font-size:12px; padding:10px 18px; white-space:nowrap;}
/* The choice currently in force. Without this the reopened bar shows the same
   two buttons as a first run and cannot answer "what did I choose?", which is
   the only question anyone opens Cookie settings to ask. */
#cookie-bar .ck-state{
  display:block; margin-top:9px; font-size:12px; color:var(--t3);
}
/* display:block above is an AUTHOR rule, so it outranks the UA stylesheet's
   [hidden]{display:none} and un-hides the span on a first run — empty, but still
   a block claiming its margin, which put 7px onto a bar that is already tight at
   320px. main.js drives the attribute, so the attribute has to stay
   authoritative. */
#cookie-bar .ck-state[hidden]{display:none;}
#cookie-bar .ck-state b{color:var(--t1); font-weight:600;}
#cookie-bar .ck-btn[aria-pressed="true"]{
  border-color:var(--accent-border); color:var(--accent);
  background:var(--accent-soft);
}
#cookie-bar .ck-btn[aria-pressed="true"]::after{
  content:' \2713'; /* the active choice needs to survive a mono-tone screen */
}
/* Only a REOPENED bar gets a close button. A first-run bar has to be answered,
   so offering an X there would be a third, silent answer to a consent question
   — and silence must stay "denied", not "dismissed". */
#cookie-bar .ck-x{
  position:absolute; top:8px; right:10px;
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  background:transparent; border:1px solid var(--border); color:var(--t3);
  display:none; place-items:center; transition:.15s;
}
#cookie-bar .ck-x:hover{color:var(--t1); border-color:var(--border-strong);}
#cookie-bar .ck-x svg{width:15px; height:15px;}
#cookie-bar.is-reopened .ck-x{display:grid;}
#cookie-bar.is-reopened .ck-in{padding-right:52px;}
/* "You can change your mind any time from Cookie settings in the footer" is a
   signpost for a first run. On a reopened bar the visitor is standing IN that
   control, so it points at itself — and it pushes down the one line that is
   actually new, the current choice. */
#cookie-bar.is-reopened .ck-more{display:none;}

/* ===== 18. RESPONSIVE ====================================================
   Verified at 1920 · 1440 · 1200 · 1024 · 860 · 768 · 560 · 414 · 390 · 320
   ======================================================================== */

/* --- large desktop: cap type growth, keep the wrap centred --- */
@media (min-width:1600px){
  .wrap{max-width:1180px;}
  #hero .hr-art{width:600px;}
}

/* --- 1200px: the hero chips run out of gutter to sit in --- */
@media (max-width:1200px){
  #hero .hr-chip-1{left:-2%;}
  #hero .hr-chip-2{left:-6%;}
}

/* --- 1024px: 4-up grids to 2-up, tighten the hero --- */
@media (max-width:1024px){
  section{padding:80px 0;}
  section.wrap{padding:80px 24px;}
  #hero .hr-grid{gap:28px;}
  #hero .hr-chip{font-size:9.5px; padding:8px 11px;}
  #hero .hr-chip-1{left:0;}
  #hero .hr-chip-2{left:-2%;}
  #what-is .wi-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px;}
  #create-ways .cw-head{gap:32px;}
  #pipeline .tl-row{grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 26px;}
  /* the rail only makes sense across one row of nodes */
  #pipeline .tl::before{display:none;}
  #in-action .ia-panel{gap:34px;}
  #samples .sm-grid{gap:18px;}
  #plans .pr-why{grid-template-columns:minmax(0,1fr);}
  #site-header .hd-nav{gap:20px;}
}

/* --- 900px: header nav gives way to the CTA only --- */
@media (max-width:900px){
  #site-header .hd-nav{display:none;}
  #site-header .hd-logo .hd-sub{display:none;}
}

/* --- 860px: the primary single-column collapse --- */
@media (max-width:860px){
  section{padding:64px 0;}
  section.wrap{padding:64px 24px;}
  #hero{padding:52px 0 60px;}
  #hero .hr-grid{grid-template-columns:minmax(0,1fr); gap:34px;}
  #hero .hr-lede{max-width:none;}
  #hero .hr-art{
    order:2; justify-self:center; margin-right:0;
    width:min(400px,78vw);
  }
  /* decorative chips would land on the subject's face at this size */
  #hero .hr-chip{display:none;}
  #hero .hr-wave{height:min(220px,32vh); opacity:.42;}
  #hero .hr-wave-front{left:8%; opacity:.28;}
  #what-is .wi-grid{grid-template-columns:minmax(0,1fr); gap:34px;}
  #what-is .wi-photo{justify-self:center; text-align:center;}
  #what-is .wi-photo img{margin:0 auto;}
  #what-is .wi-photo-wave{margin-left:auto; margin-right:auto;}
  #create-ways .cw-head{grid-template-columns:minmax(0,1fr); gap:28px;}
  #create-ways .cw-photo{justify-self:center; order:2;}
  #create-ways .cw-grid{grid-template-columns:minmax(0,1fr);}
  #in-action .ia-panel{grid-template-columns:minmax(0,1fr); gap:28px;}
  #in-action .ia-copy{order:2;}
  /* Four 1:1 covers across a 860px viewport would be 190px each and the
     titles would start truncating, so the grid halves. */
  #samples .sm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* The record and its metadata stack. Below this the 210px disc leaves a lyric
     column too narrow to read a sung line in, and the lyrics are the proof. */
  #make .mk-box{padding:28px 22px;}
  #make .mk-track{grid-template-columns:minmax(0,1fr); gap:22px;}
  #make .mk-play{max-width:240px; margin:0 auto;}
  #pipeline .pl-proof{grid-template-columns:minmax(0,1fr); gap:38px;}
  #plans .pr-grid{grid-template-columns:minmax(0,1fr); gap:20px; max-width:520px;}
  #plans .pr-tagline{min-height:0;}
  #proof .pf-in{grid-template-columns:minmax(0,1fr); gap:18px;}
  #proof .pf-k{max-width:none; padding:0 0 16px; border-right:0; border-bottom:1px solid var(--border);}
  #proof .pf-k b{display:inline;}
  #final{padding:76px 0;}
  #final .fn-in{max-width:none;}
  /* the photo becomes a low-contrast backdrop rather than a co-star */
  #final .fn-photo{width:min(460px,72vw); right:-14%; opacity:.4;}
  #site-footer .ft-top{grid-template-columns:1fr 1fr; gap:30px;}
  #site-footer .ft-brand{grid-column:1 / -1;}
  /* the offset gold platform gets tight on narrow screens */
  .frame::before{inset:12px -9px -12px 9px;}
}

/* --- 768px --- */
@media (max-width:768px){
  #proof .pf-stats{grid-template-columns:minmax(0,1fr);}
  #site-footer .ft-disc{grid-template-columns:1fr; gap:20px;}
  /* Horizontal scroll beats an unreadable wrapped pile of chips.
     No negative-margin bleed here — it would push the document wider than
     the viewport and produce a page-level horizontal scrollbar. */
  #in-action .ia-tabs{
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    padding-bottom:8px;
    scrollbar-width:none; -ms-overflow-style:none;
    /* let the row settle against the edge when scrolled */
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  #in-action .ia-tabs::-webkit-scrollbar{display:none;}
  #in-action .ia-tab{scroll-snap-align:start;}
}

/* --- 620px: announcement bar sheds its inline CTA --- */
@media (max-width:620px){
  #annc-bar .ab-cta{display:none;}
  #annc-bar .ab-txt{font-size:10.5px; letter-spacing:.09em;}
  /* The two price plates stack. Side by side below this the $37/$67 figures
     stay legible but the one-line descriptions under them wrap to three, and
     two ragged three-line blocks read worse than two stacked clean ones. */
  #plans-call .pc-pair{grid-template-columns:minmax(0,1fr); gap:12px;}
}

/* --- 560px: phone layout --- */
@media (max-width:560px){
  :root{--hdr:58px;}
  section{padding:54px 0;}
  section.wrap{padding:54px 20px;}
  .wrap{padding:0 20px;}
  .lede{font-size:14.5px;}
  .eyebrow{font-size:10.5px; letter-spacing:.12em;}
  #hero{padding:40px 0 52px;}
  #hero h1{font-size:clamp(27px,8vw,35px); letter-spacing:-.028em;}
  /* .72em of a 27px h1 is too small to carry the price, so the payoff line
     comes back up to parity on phones. .86em, not .88: "Written, Sung,
     Licensed, Released." needs 358px of the 358px available at 390px — it fit
     by nothing, and lost the bet at 360px. Measured, not guessed. */
  #hero h1 .hr-l2{font-size:.86em; margin-top:.22em;}
  #hero .hr-copy::before{inset:-110px -150px -110px -150px;}
  #final .fn-in::before{inset:-110px -150px -110px -150px;}
  #hero .hr-kicker{font-size:10px; letter-spacing:.1em; padding:6px 12px; margin-bottom:18px;}
  .btn{width:100%;}
  .btn-lg{padding:14px 22px;}
  .cta-row{flex-direction:column; align-items:stretch; gap:10px;}
  #site-header .hd-cta .btn{width:auto; font-size:12.5px; padding:9px 14px;}
  #site-header .hd-logo img{height:26px;}
  #proof .pf-stat{padding:18px 20px 20px;}
  #proof .pf-store{font-size:14px;}
  #proof .pf-store img,
  #proof .pf-mk{width:15px; height:15px;}
  #hero .hr-meta{font-size:10px; letter-spacing:.09em; gap:7px 13px; margin-bottom:24px;}
  /* Two 1:1 covers side by side still work at 560px; one per row would make
     the section four full-width screens tall for no gain. */
  /* The field and its button stack. Side by side at this width the button
     squeezes the input down to about eight visible characters. 16px on the
     input specifically, because iOS zooms the whole page in on any smaller
     font size in a text field. */
  #make .mk-box{padding:24px 18px;}
  #make .mk-row{flex-direction:column; gap:11px;}
  #make .mk-input{font-size:16px; min-height:56px;}
  /* The label takes its own row: .btn is width:100% at this width, so the four
     starting points already wrap, and leaving the label inline with them put a
     single orphaned chip beside it. */
  #make .mk-picks{gap:7px;}
  #make .mk-picks-l{flex:1 0 100%; margin:0 0 2px;}
  #make .mk-lyrics{max-height:168px; font-size:13.5px;}
  #make .mk-fine{font-size:11.5px;}
  #samples .sm-grid{gap:14px;}
  #samples .sm-title{font-size:15px;}
  #samples .sm-note{font-size:12.5px;}
  #samples .sm-ico{width:36px; height:36px; right:9px; bottom:9px;}
  #samples .sm-ico svg{width:16px; height:16px;}
  #samples .sm-foot{padding:16px 18px; font-size:13px;}
  /* The bar stacks. The buttons stay on ONE row rather than going full width
     like the page's other CTAs: a stacked pair cost 58px, and at 254px tall the
     bar was covering the hero's second CTA. Two 1fr columns give each button
     ~165px at 390px, which "Essential only" fits without wrapping. */
  #cookie-bar .ck-in{grid-template-columns:minmax(0,1fr); gap:12px; padding:13px 20px;}
  #cookie-bar .ck-txt{font-size:12.5px; line-height:1.55;}
  #cookie-bar .ck-more{display:none;}
  #cookie-bar .ck-btns{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
  /* Accept sits on the right, where the thumb is, and reads last. */
  #cookie-bar .ck-btns .btn{width:100%; padding:11px 10px; font-size:12px;}
  /* The bar is one column here, so the close button would sit over the text
     rather than beside it. Reserving the gutter on the text alone keeps the
     full-width buttons full width — they are the primary targets and shrinking
     them for the benefit of a secondary control is the wrong trade. */
  #cookie-bar.is-reopened .ck-in{padding-right:20px;}
  #cookie-bar.is-reopened .ck-txt{padding-right:34px;}
  #cookie-bar .ck-state{font-size:11.5px; margin-top:7px;}
  /* .ck-more is hidden at this width, so the state line is the only thing that
     tells a reopened bar apart from a first run — it has to stay. */
  #what-is .wi-step{padding-left:50px;}
  #what-is .wi-foot{padding:17px 18px; font-size:13.5px;}
  #create-ways .cw-card{padding:22px;}
  #pipeline .tl-row{grid-template-columns:minmax(0,1fr); gap:0;}
  #pipeline .tl-step{padding-left:62px; padding-bottom:28px;}
  #pipeline .tl-node{position:absolute; left:0; top:0; margin:0; box-shadow:var(--e1);}
  /* vertical rail, drawn per step so it stops at the last node */
  #pipeline .tl-step:not(:last-child)::before{
    content:''; position:absolute; left:23px; top:52px; bottom:8px; width:2px;
    background:linear-gradient(180deg,var(--accent-border),var(--border));
  }
  #pipeline .tl-step:last-child{padding-bottom:0;}
  #plans .pr-card{padding:28px 22px; border-radius:var(--r-lg);}
  #plans .pr-tog{font-size:12.5px; padding:8px 14px; gap:6px;}
  #plans .pr-foot{padding:17px 18px; font-size:12.5px;}
  #plans-call .pc-plan{padding:18px 18px 16px;}
  #plans-call .pc-amt{font-size:33px;}
  #plans-call .pc-pair{margin:26px 0 24px;}
  .pg-crumb{padding-top:22px;}
  #faq .fq-q{font-size:14.5px; gap:12px; padding:17px 18px;}
  #faq .fq-a p{padding:0 18px; font-size:14px;}
  #final{padding:62px 0;}
  #final .fn-logo{height:36px;}
  #final .fn-photo{display:none;}
  #site-footer{padding:46px 0 28px;}
  #site-footer .ft-top{grid-template-columns:1fr; gap:26px;}
  #site-footer .ft-bottom{flex-direction:column; gap:8px;}
  .frame::before{inset:9px -7px -9px 7px;}
}

/* --- 400px and below: 320px is the floor we support --- */
@media (max-width:400px){
  .wrap{padding:0 16px;}
  section.wrap{padding:48px 16px;}
  #hero{padding:34px 0 44px;}
  #hero h1{font-size:26px; letter-spacing:-.024em;}
  #hero .hr-lede{font-size:14px;}
  .h2{font-size:23px;}
  #plans .pr-card{padding:24px 18px;}
  /* the toggle is the one row that cannot shrink its way out of a 320px
     viewport, so the two options stack instead of overflowing */
  #plans .pr-toggle{width:100%; flex-direction:column; gap:3px; border-radius:14px;}
  #plans .pr-tog{width:100%; justify-content:center; border-radius:11px;}
  #plans .pr-why-item{padding:16px 18px;}
  /* 400px and below: two covers would be ~150px each, at which point the
     genre/duration line wraps. One per row, art and copy side by side, so
     the section stays four cards rather than four screens. */
  #samples .sm-grid{grid-template-columns:minmax(0,1fr);}
  #samples .sm-card{flex-direction:row; align-items:stretch;}
  /* Square, NOT aspect-ratio:auto. A 104px-wide column is only as tall as the
     body copy makes it — measured at 104x77 — and border-radius:50% on that box
     gives a 1.35:1 ellipse instead of a record. Squaring it also fixes the
     rotating layers for free, since every vinyl rule is a percentage of this
     box. align-self overrides the row's stretch, which would otherwise win over
     aspect-ratio and hand the height straight back to the body copy. */
  #samples .sm-play{flex:none; width:104px; aspect-ratio:1 / 1; align-self:center;}
  /* 26px in the corner. Over the old 62x46 label a 30px plate covered about a
     third of the artwork; against 3-7% at every other width that was the art
     hiding behind its own button. Here it clears the 62px label completely:
     label centre (52,52) r=31, plate centre (86,86) r=13, and the centres are
     48px apart, so 48 > 31+13 and the two never touch. At rest it still sits
     over the square artwork, which is what the corner scrim was drawn for. */
  #samples .sm-ico{width:26px; height:26px; right:5px; bottom:5px;}
  #samples .sm-ico svg{width:13px; height:13px;}
  #samples .sm-body{padding:13px 14px; min-width:0;}
  #samples .sm-note{display:none;}
  #final h2{font-size:27px;}
  #site-footer .ft-in{padding:0 16px;}
  .tag{font-size:9.5px; padding:4px 7px;}
  #annc-bar .ab-txt{font-size:9.5px;}
}

/* ===== 19. MOTION / PRINT ===============================================
   The waveform is the one animation on the page that runs forever. Collapsing
   its duration parks every bar on the 0%/100% keyframe, which is authored as
   the resting state — so reduced-motion gets a still waveform, not a shape
   frozen at an arbitrary point in its pulse.
   ======================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* The rule above collapses the DURATION but still applies the transform, so
     the cover art would jump to 1.045 instantly on hover. Cancelling the
     transform itself is what actually honours the preference. */
  #samples .sm-card:hover .sm-art{transform:none;}
  #samples .sm-card:hover{transform:none;}
  /* No spin. The .001ms duration above would otherwise turn a 3.6s rotation
     into a strobe, which is worse than the thing the preference asks to avoid.
     The cover still pulls in to a circle and the groove still shows, so the
     playing state is just as legible standing still — and audio is untouched. */
  #samples .sm-disc,
  #samples .sm-spin{animation:none !important;}
  /* Same reasoning for the generated record, and for the loading dots: a
     .001ms opacity cycle is a flicker, and that one runs for half a minute.
     Cancelling it parks the dots at their .25 resting opacity, so they read as
     three quiet dots rather than as a control that failed to start. */
  #make .mk-disc,
  #make .mk-spin,
  #make .mk-dots span{animation:none !important;}
  /* The rule above collapses the DURATION but still applies the transform, so
     the play plate would jump to 1.06 instantly on hover. */
  #make .mk-play:hover .mk-ico{transform:none;}
}

/* Reveal-on-scroll: opt-in, and inert until JS marks the document ready */
.reveal{opacity:0; transform:translateY(16px);}
html.js-ready .reveal{transition:opacity .55s ease, transform .55s ease;}
html.js-ready .reveal.in{opacity:1; transform:none;}
html:not(.js-ready) .reveal{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important;}
}