/* ============================================================
   harmony guides — stylesheet
   ------------------------------------------------------------
   1.  tokens
   2.  reset + base
   3.  animations
   4.  layout shell + starfield
   5.  nav
   6.  hero
   7.  catalog
   8.  about
   9.  pricing
   10. faq
   11. portfolio + footer
   12. modal + form
   13. responsive
   14. reduced motion / print
   ============================================================ */


/* ---------- 1. tokens -------------------------------------- */

:root {
  /* surfaces */
  --bg:            #EDE9E4;
  --cream:         #FAF6EF;
  --white:         #FFFFFF;
  --sand:          #F3EDE2;

  /* teal family */
  --teal:          #96D6D8;
  --teal-mint:     #E1F2F2;
  --teal-wash:     #EFF8F8;
  --teal-ink:      #14484A;
  --teal-mid:      #1E6E70;
  --teal-body:     #2E6062;
  --teal-shadow:   #6FB8BA;
  --teal-line:     #C6E4E4;

  /* rose family */
  --rose-wash:     #FFEDF3;
  --rose-wash-2:   #FFE4EE;
  --rose-wash-3:   #FFDDE8;
  --rose:          #A8455F;
  --rose-deep:     #8E3550;
  --rose-darkest:  #7E3145;
  --rose-line:     #E7B9C7;
  --rose-shadow:   #EBC7D4;
  --rose-body:     #6B4552;
  --rose-line-2:   #F1D9E1;

  /* neutrals */
  --ink:           #3A2E36;
  --ink-2:         #4A3F46;
  --muted:         #6B5A64;
  --clay:          #8A6E5C;
  --border:        #EADFD2;
  --chip:          #F7F4F0;   /* language pill fill — light, barely-there gray */
  --rose-soft:     #C77F93;   /* mid rose: visible at rest, still below --rose */
  --border-strong: #DCC9BC;
  --shadow-sand:   #CFC0AA;

  /* type */
  --font-display: 'Baloo 2', 'Noto Sans JP', 'Trebuchet MS', cursive;
  --font-body:    'Quicksand', 'Noto Sans JP', 'Segoe UI', sans-serif;
  /* Windows ships no flag-emoji glyphs, so flags need an explicit emoji font */
  --font-emoji:   'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --font-num:     'Outfit', 'Segoe UI', sans-serif;
  --font-accent:  'Jost', 'Segoe UI', sans-serif;

  /* geometry */
  --shell:      1020px;
  --r-sm:       14px;
  --r-md:       20px;
  --r-lg:       24px;
  --r-xl:       32px;
  --r-hero:     36px;
  --pill:       999px;

  --ease:       cubic-bezier(.2, .8, .3, 1);
  --ease-pop:   cubic-bezier(.2, .9, .3, 1.3);
}


/* ---------- 2. reset + base -------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must win over any display rule we set later.
   Without this, e.g. `.field-pair { display:grid }` re-shows a
   [hidden] element and half the conditional UI leaks out. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--teal-mid); text-decoration: none; }
a:hover { color: var(--teal-ink); }

input, select, textarea, button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; }

img { max-width: 100%; display: block; }

/* one consistent focus ring everywhere */
:focus-visible {
  outline: 3px solid var(--teal-mid);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* skip link */
.skip-link {
  position: absolute; left: 50%; top: 8px;
  transform: translate(-50%, -160%);
  z-index: 100;
  background: var(--white); color: var(--rose);
  padding: 12px 22px; border-radius: var(--pill);
  font-weight: 700; font-size: 14.5px;
  box-shadow: 0 4px 0 var(--rose-shadow);
  transition: transform .18s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ---------- 3. animations ---------------------------------- */

@keyframes popIn  { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise   { from { opacity: 0; transform: translateY(26px); }           to { opacity: 1; transform: none; } }
@keyframes float1 { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px)  rotate(-1deg); } }
@keyframes float2 { 0%, 100% { transform: translateY(0) rotate(6deg);  } 50% { transform: translateY(-7px)  rotate(2deg);  } }
@keyframes float3 { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-11px) rotate(-3deg); } }
@keyframes twinkle{ 0%, 100% { opacity: .25; transform: scale(.85); }   50% { opacity: 1; transform: scale(1.15); } }
@keyframes spin   { to { transform: rotate(360deg); } }

/* fill-mode MUST NOT be `both`/`forwards`: the final keyframe's
   `transform: none` would then stick permanently and outrank :hover
   transforms, which silently killed the lift on .hero__cta.
   `backwards` still hides the element during its delay.            */
.rise { animation: rise .6s var(--ease) backwards; }


/* ---------- 4. layout shell + starfield -------------------- */

.starfield {
  position: fixed; inset: 0;
  overflow: hidden; pointer-events: none; z-index: 0;
}
.starfield span {
  position: absolute;
  animation: twinkle 6s ease-in-out infinite;
}

.shell {
  position: relative; z-index: 1;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 22px 100px;
}

.section { border-radius: var(--r-xl); margin-top: 20px; }
.section--cream { background: var(--cream); }
.section--rose  { background: var(--rose-wash); }
.section--mint  { background: var(--teal-mint); }

.section-title {
  font-weight: 700; font-size: 28px; margin: 0 0 4px;
}
.section-sub {
  font-family: var(--font-accent); font-style: italic;
  font-size: 15.5px; color: var(--muted); margin: 0 0 24px;
}
.kicker {
  font-family: var(--font-accent); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: 11.5px;
}


/* ---------- 5. nav ----------------------------------------- */

.nav {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 22px;
  padding: 12px 28px 12px 34px;   /* brand pulled right, links pulled left */
  background: var(--teal);
  border-radius: var(--pill);
}
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--teal-ink);
}
.flag {
  font-family: var(--font-emoji);
  font-style: normal; font-weight: 400;
  line-height: 1;
}
.nav__brand-name {
  font-family: var(--font-display); font-weight: 700; font-size: 20px;
}
.nav__links {
  display: flex; gap: 4px; align-items: center;
  font-size: 15px; font-weight: 700;
}
.nav__link {
  color: var(--teal-ink);
  padding: 9px 15px; border-radius: var(--pill);
  transition: background .14s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--teal-ink);
  background: rgba(255, 255, 255, .55);
}
.nav__cta {
  background: var(--cream); color: var(--teal-ink);
  padding: 11px 20px; border-radius: var(--pill);
  margin-left: 6px;
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 0 var(--shadow-sand);
  transition: background .14s var(--ease), color .14s var(--ease), transform .1s var(--ease);
}
.nav__cta:hover { background: var(--rose-wash); color: var(--rose); }
.nav__cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow-sand); }


/* ---------- 6. hero ---------------------------------------- */

.hero {
  margin-top: 20px;
  background: var(--rose-wash);
  border-radius: var(--r-hero);
  padding: 44px 46px;
  display: grid; grid-template-columns: 1.25fr .75fr;
  gap: 34px; align-items: center;
  overflow: hidden;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); color: var(--rose);
  border-radius: var(--pill); padding: 8px 16px;
  font-family: var(--font-accent); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; font-size: 11.5px;
  box-shadow: 0 3px 0 var(--rose-shadow);
  margin-bottom: 18px;
}
.hero__title {
  font-weight: 800; font-size: 50px; line-height: 1.08;
  letter-spacing: -.02em; margin: 0 0 14px; color: var(--ink);
  display: flex; flex-wrap: wrap; gap: 0 .26em;
}
.hero__title span { display: inline-block; }
.hero__lede {
  max-width: 440px; margin: 0;
  font-size: 16.5px; line-height: 1.65;
  color: var(--muted); font-weight: 600;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  background: var(--white); color: var(--rose);
  padding: 12px 22px; border-radius: var(--pill);
  font-size: 14.5px; font-weight: 700;
  box-shadow: 0 4px 0 var(--rose-shadow);
  transition: background .14s var(--ease), transform .1s var(--ease);
}
.hero__cta:hover { background: var(--rose-wash-2); color: var(--rose); }
.hero__cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }

.hero__art { position: relative; width: 100%; }
.hero__frame {
  aspect-ratio: 3 / 4; border-radius: 28px; overflow: hidden;
  background: repeating-linear-gradient(135deg,
    #ffd9ec, #ffd9ec 10px, #ffe6f2 10px, #ffe6f2 20px);
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 18px;
  font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 12.5px; color: var(--clay); line-height: 1.6;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* once real art is in, drop the placeholder padding so it fills the frame */
.hero__frame--has-img { padding: 0; }

/* The OC art fades rather than rises: animating `transform` puts the image on
   a composited layer, and dropping that layer when the animation ends forces a
   re-rasterisation — a visible little pop in sharpness/scale. Opacity alone
   never changes how the bitmap is scaled. */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-in { animation: fadeIn .8s var(--ease) backwards; }

@keyframes bubbleIn {
  from { opacity: 0; scale: .55; }
  to   { opacity: 1; scale: 1; }
}
/* Each bubble drifts in on its own beat, then keeps floating. The entrance
   animates `scale`, which is its own property, so it never fights the float
   loops' `transform`. `backwards` keeps each one invisible until its turn. */
.hero__sticker {
  position: absolute;
  background: var(--white); color: var(--rose);
  border-radius: 20px 20px 20px 6px;
  padding: 11px 16px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  box-shadow: 0 4px 0 var(--rose-shadow);
  top: -14px; left: -22px;
  animation: bubbleIn .85s var(--ease-pop) .5s backwards,
             float1 5.5s ease-in-out infinite;
}
.hero__note {
  position: absolute; top: 34%; right: -18px;
  background: var(--teal); color: var(--teal-ink);
  border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 0 var(--teal-shadow);
  animation: bubbleIn .85s var(--ease-pop) .85s backwards,
             float2 6.5s ease-in-out infinite;
}
.hero__tag {
  position: absolute; bottom: 16px; left: -20px;
  background: var(--white); color: var(--rose-deep);
  border-radius: var(--r-sm); padding: 7px 13px;
  font-family: var(--font-accent); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; font-size: 10.5px;
  box-shadow: 0 3px 0 var(--rose-shadow);
  animation: bubbleIn .85s var(--ease-pop) 1.2s backwards,
             float3 7.5s ease-in-out infinite;
}
.hero__spark {
  position: absolute; bottom: -10px; right: 8px;
  color: var(--rose-line); font-size: 26px;
  animation: bubbleIn .85s var(--ease-pop) 1.55s backwards,
             float2 6s ease-in-out infinite -2s;
}


/* ---------- 7. catalog ------------------------------------- */

.catalog { padding: 26px 22px 22px; }
.catalog__title {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px;
  margin: 0 0 16px; padding-left: 4px;
  color: var(--rose);
  display: flex; align-items: baseline; gap: 9px; width: fit-content;
}
/* soft candy underline behind the words only, not the heart */
.catalog__title > span {
  background-image: linear-gradient(var(--rose-wash-2), var(--rose-wash-2));
  background-repeat: no-repeat;
  background-size: 100% 9px;
  background-position: 0 84%;
}
.catalog__title::after {
  content: '♡';
  font-size: .62em; color: var(--rose-line);
}

.search { position: relative; margin-bottom: 12px; }
.search__icon {
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 16px; color: var(--muted); pointer-events: none;
}
.search__input {
  width: 100%;
  padding: 16px 22px 16px 48px;
  border-radius: var(--pill);
  border: 2px solid var(--border);
  background: var(--white);
  font-size: 15.5px; font-weight: 600; color: var(--ink);
  outline: none;
  transition: border-color .14s var(--ease);
}
.search__input:focus { border-color: var(--teal-mid); }
.search__input::placeholder { color: var(--clay); font-weight: 600; }

.filters {
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-bottom: 16px;
  position: relative; z-index: 5;   /* keeps open panels above the song list */
}

/* ---- custom multi-select dropdown ---------------------------- */
.dd {
  position: relative; display: inline-flex;
  flex: 0 0 auto;        /* never let the filter row squeeze it */
  width: max-content;    /* .dd, trigger and panel all share one width */
}
.dd__trigger { width: 100%; }
.dd.is-open { z-index: 6; }

.dd__trigger {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border: 2px solid var(--border);
  border-radius: var(--pill);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; outline: none;
  box-shadow: 0 3px 0 var(--border);
  position: relative;
  /* border-radius is deliberately NOT transitioned — animating the corner
     morph is what made opening look jittery. It snaps; the panel animates. */
  transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.dd__trigger:hover { border-color: var(--border-strong); }

/* open: square off the bottom and drop the shadow so the trigger and
   the panel read as one continuous shape */
/* A *transparent* bottom border is not invisible — the browser still mitres
   the corner where it meets the teal side borders, cutting a 45° notch out of
   the stroke at the seam. Removing the border entirely (and giving the padding
   those 2px back, so the height and the label don't move) leaves the side
   strokes ending square, flush with the panel's. */
.dd.is-open .dd__trigger {
  border-color: var(--teal-line);
  border-bottom-width: 0;
  padding-bottom: 13px;
  border-radius: var(--r-md) var(--r-md) 0 0;
  box-shadow: none;
  z-index: 2;
}
/* masks the panel's top border across the trigger only — inset to the padding
   box so the panel's own side strokes stay unbroken */
.dd.is-open .dd__trigger::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--white);
}
/* a selected filter tints the trigger without shouting */
.dd.has-value .dd__trigger { border-color: var(--rose-shadow); color: var(--rose); }
/* while open, the trigger must match the panel's border or the seam shows */
.dd.has-value.is-open .dd__trigger {
  border-color: var(--teal-line);
  border-bottom-color: transparent;
}

/* keyboard users still get a ring; mouse users never see one */
.dd__trigger:focus-visible {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px var(--teal-wash);
}
.dd.is-open .dd__trigger:focus-visible { box-shadow: none; }

.dd__label { white-space: nowrap; }
.dd__caret {
  position: relative; flex-shrink: 0;
  width: 12px; height: 12px;
  transition: transform .18s var(--ease);
}
/* a text "▾" has uneven vertical bearing, so rotating it visibly shifted the
   arrow. This triangle is centred in a fixed 12x12 box: 180deg maps it exactly
   onto itself, so the arrow stays put. */
.dd__caret::before {
  content: '';
  position: absolute; left: 1px; top: 3.5px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--clay);
}
.dd.is-open .dd__caret { transform: rotate(180deg); }

.dd__panel {
  position: absolute;
  top: 100%; left: 0;
  min-width: 100%; width: max-content; max-width: 300px;
  /* sits flush under the trigger; the trigger's ::after masks this top
     border for its own width, leaving it visible only where the panel is
     wider — which is what makes the tab shape. */
  margin: 0; padding: 6px;
  z-index: 1;
  background: var(--white);
  border: 2px solid var(--teal-line);
  /* Same width as the trigger (the usual case): BOTH top corners must be
     square, or the top-right radius curves inward and bites a notch out of
     the right-hand stroke at the seam. Only round it when the panel really
     is wider — that's the tab shape. JS sets .is-wide. */
  border-radius: 0 0 var(--r-md) var(--r-md);
  box-shadow: 0 6px 0 var(--border);
  max-height: 260px; overflow-y: auto;
  overscroll-behavior: contain;
}
.dd.is-wide .dd__panel { border-radius: 0 var(--r-md) var(--r-md) var(--r-md); }
.dd__panel[hidden] { display: none; }
.dd.is-open .dd__panel { animation: ddIn .13s var(--ease) both; }
@keyframes ddIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dd__opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 10px;
  border: none; background: transparent;
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600; color: var(--ink);
  cursor: pointer; outline: none;
}
.dd__opt:hover, .dd__opt:focus-visible { background: var(--rose-wash); }
.dd__opt.is-on { color: var(--rose); }

.dd__check {
  position: relative; flex-shrink: 0;
  width: 19px; height: 19px;
  border: 2px solid var(--border-strong);
  border-radius: 7px;
  background: var(--white);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.dd__opt:hover .dd__check { border-color: var(--rose-line); }
.dd__opt.is-on .dd__check { background: var(--rose); border-color: var(--rose); }
.dd__opt.is-on .dd__check::after {
  content: '';
  position: absolute; left: 4.5px; top: 1px;
  width: 5px; height: 9.5px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.dd__opt-text { flex: 1; min-width: 0; }
.filters__count {
  flex: 1;
  font-family: var(--font-accent); font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  font-size: 11.5px; color: var(--muted);
}
.filters__reset {
  border: none; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--rose);
  text-decoration: underline; padding: 6px 4px;
}

.cat-scroll {
  max-height: 330px; overflow-y: auto;
  /* top/bottom room so the first and last rows aren't clipped by the
     scroll box when :hover lifts them 2px */
  padding: 4px 8px 4px 3px;
  display: flex; flex-direction: column; gap: 9px;
  overscroll-behavior: contain;
}
.cat-scroll::-webkit-scrollbar { width: 10px; }
.cat-scroll::-webkit-scrollbar-track { background: var(--sand); border-radius: var(--pill); }
.cat-scroll::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--pill);
  border: 2px solid var(--sand);
}
.cat-scroll { scrollbar-color: var(--border-strong) var(--sand); scrollbar-width: thin; }

.song {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: center;
  padding: 13px 20px;
  border: 2px solid var(--border);
  border-radius: 22px;
  cursor: pointer; background: var(--white);
  text-align: left; width: 100%;
  font: inherit; color: inherit;
  transition: border-color .14s var(--ease), background .14s var(--ease), transform .14s var(--ease);
}
.song:hover {
  border-color: var(--teal);
  background: var(--teal-wash);
  transform: translateY(-2px);
}
.song__main { display: block; min-width: 0; }
.song__line {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.song__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; letter-spacing: -.01em;
}
.song__artist {
  font-family: var(--font-display); font-size: 15.5px;
  font-weight: 600; color: var(--rose);
}
.lang-pills { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lang-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 9px 2px;
  border-radius: var(--pill);
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--muted); background: var(--chip);
  line-height: 1.55; white-space: nowrap;
}
.lang-pill .flag { font-size: 13.5px; line-height: 1; }
.song__tags {
  display: flex; gap: 7px; margin-top: 6px;
  flex-wrap: wrap; align-items: center;
}
.tag {
  font-size: 12.5px; font-weight: 700;
  padding: 5px 11px; border-radius: var(--pill);
}
.tag--harmony { background: var(--teal-mint); color: var(--teal-ink); }
.tag--arr     { background: var(--rose-wash); color: var(--rose); }
/* complexity reads as a level, not another chip: small caps, letter-spaced,
   with a dot that colour-codes how involved the guide is */
.tag--cx {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 2px;
  font-family: var(--font-accent);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--clay);
  white-space: nowrap;
}
.tag--cx::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.tag--cx-simple       { color: var(--teal-mid); }
.tag--cx-semi-complex { color: var(--clay); }
.tag--cx-complex      { color: var(--rose); }
.song__right { display: flex; align-items: center; gap: 11px; }
.song__yt {
  font-size: 12px; font-weight: 700; color: var(--rose); white-space: nowrap;
}
.song__chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sand); color: var(--clay);
  font-size: 19px; font-weight: 700; line-height: 1;
  padding-bottom: 2px; flex-shrink: 0;
}

.empty {
  padding: 26px 20px; text-align: center;
  font-size: 15px; font-weight: 700; color: var(--muted);
}

.custom-cta {
  margin-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px 22px;
  border: 2.5px dashed var(--rose-line);
  border-radius: 22px; cursor: pointer;
  background: var(--rose-wash);
  width: 100%; text-align: left; font: inherit; color: inherit;
  transition: background .14s var(--ease);
}
.custom-cta:hover { background: var(--rose-wash-2); }
.custom-cta__title {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--rose);
}
.custom-cta__sub {
  display: block;
  font-size: 14px; font-weight: 600; color: var(--muted); margin-top: 2px;
}
.custom-cta__btn {
  font-size: 14.5px; font-weight: 700; color: var(--white);
  background: var(--rose); border-radius: var(--pill);
  padding: 12px 20px; white-space: nowrap;
  box-shadow: 0 4px 0 var(--rose-deep);
}


/* ---------- 8. about --------------------------------------- */

.about {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-top: 56px;
}
.about__card {
  border-radius: 30px; padding: 32px;
  display: flex; flex-direction: column;
}
.about__card--rose { background: var(--rose-wash); }
.about__card--mint { background: var(--teal-mint); }
.about__card h2 { font-weight: 700; font-size: 24px; margin: 0 0 12px; }
.about__card--rose h2 { color: var(--rose-deep); }
.about__card--mint h2 { color: var(--teal-ink); margin-bottom: 14px; }
.about__card p {
  font-size: 15.5px; line-height: 1.7; font-weight: 600; margin: 0;
}
.about__card--rose p { color: var(--rose-body); }
.about__card--mint p { color: var(--teal-body); }
.about__card--mint p + p { margin-top: 12px; }
.about__term {
  display: block; color: var(--teal-ink);
  font-family: var(--font-display); font-size: 17px;
}
.about__socials {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: auto; padding-top: 24px;
}
.social {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); color: var(--rose);
  padding: 11px 20px; border-radius: var(--pill);
  font-size: 14px; font-weight: 700;
  box-shadow: 0 4px 0 var(--rose-shadow);
  transition: background .14s var(--ease), transform .1s var(--ease);
}
.social__ext {
  font-size: 11px; line-height: 1;
  opacity: .55; margin-left: -1px;
  transition: transform .16s var(--ease), opacity .16s var(--ease);
}
.social:hover .social__ext { opacity: 1; transform: translate(1px, -1px); }

.social:hover { background: var(--rose-wash-2); color: var(--rose); }
.social:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }


/* ---------- 9. pricing ------------------------------------- */

.pricing { padding: 34px; }
.price-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.price-card { border-radius: var(--r-lg); padding: 26px; }
.price-card--teal { background: var(--teal-wash); }
.price-card--rose,
.price-card--rose-deep { background: var(--rose-wash); }
.price-card--teal .price-card__kicker { color: var(--teal-mid); }
.price-card--rose .price-card__kicker,
.price-card--rose-deep .price-card__kicker { color: var(--rose); }
.price-card__price {
  font-family: var(--font-num); font-weight: 600; font-size: 34px;
  letter-spacing: -.015em; margin: 6px 0;
}
.price-card--teal .price-card__price { color: var(--teal-ink); }
.price-card--rose .price-card__price { color: var(--rose); }
.price-card--rose-deep .price-card__price { color: var(--rose-deep); }
.price-card p {
  font-size: 14.5px; line-height: 1.6; font-weight: 600; margin: 0;
}
.price-card--teal p { color: var(--teal-body); }
.price-card--rose p,
.price-card--rose-deep p { color: var(--muted); }

.subhead {
  font-weight: 700; font-size: 20px; margin: 32px 0 4px;
}
.subhead + .section-sub { margin-bottom: 14px; }

.melody-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.melody-card {
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--r-md); padding: 18px 20px;
}
.melody-card__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.melody-card__label { font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.melody-card__price {
  font-family: var(--font-num); font-size: 17px; font-weight: 600;
  color: var(--rose); white-space: nowrap;
}
.melody-card p {
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
  font-weight: 600; margin: 6px 0 0;
}

.callout {
  margin-top: 12px; background: var(--teal-mint);
  border-radius: var(--r-md); padding: 14px 20px;
  font-size: 14px; font-weight: 600; color: var(--teal-body);
}
.callout--tight { border-radius: 18px; padding: 12px 16px; font-size: 13.5px; }

.addon-list { display: flex; flex-direction: column; gap: 9px; }
.addon-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; padding: 16px 22px;
  background: var(--white); border: 2px solid var(--border);
  border-radius: var(--r-md);
}
.addon-row__label { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.addon-row__desc { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.addon-row__price {
  font-family: var(--font-num); font-size: 19px; font-weight: 600;
  color: var(--rose); white-space: nowrap;
}


/* ---------- button hover lift ------------------------------- */
/* every chunky pill button rises a little and drops a deeper shadow */
.nav__cta, .hero__cta, .social, .portfolio__btn, .btn-primary, .btn-soft {
  transition: background .14s var(--ease), color .14s var(--ease),
              transform .13s var(--ease), box-shadow .13s var(--ease);
}
.nav__cta:hover        { transform: translateY(-2px); box-shadow: 0 6px 0 var(--shadow-sand); }
.hero__cta:hover       { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-shadow); }
.social:hover          { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-shadow); }
.portfolio__btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-darkest); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 7px 0 var(--rose-darkest); }
.btn-soft:hover        { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-shadow); }
.custom-cta:hover .custom-cta__btn { transform: translateY(-2px); box-shadow: 0 6px 0 var(--rose-deep); }
.custom-cta__btn { transition: transform .13s var(--ease), box-shadow .13s var(--ease); }

/* the press still wins over the hover lift */
.nav__cta:active       { transform: translateY(2px); box-shadow: 0 2px 0 var(--shadow-sand); }
.hero__cta:active      { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }
.social:active         { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }
.portfolio__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-darkest); }
.btn-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--rose-darkest); }
.btn-soft:active       { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }

@media (prefers-reduced-motion: reduce) {
  .nav__cta, .hero__cta, .social, .portfolio__btn, .btn-primary, .btn-soft,
  .custom-cta__btn, .faq__icon, .faq__a-wrap { transition: none; }
  .dd.is-open .dd__panel { animation: none; }
}

/* ---------- 10. faq ---------------------------------------- */

.faq { padding: 34px; }
.faq__title { font-weight: 700; font-size: 28px; margin: 0 0 20px; color: var(--teal-ink); }
.faq__list { display: flex; flex-direction: column; gap: 9px; }
.faq__item {
  border: 2px solid var(--teal-line);
  border-radius: var(--r-md); overflow: hidden; background: var(--white);
}
.faq__item:nth-child(even) { border-color: var(--rose-line-2); }
.faq__q {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; text-align: left;
  border: none; background: transparent;
  padding: 17px 22px; cursor: pointer;
}
.faq__q-text {
  font-family: var(--font-display); font-weight: 700;
  font-size: 17px; color: var(--ink);
}
.faq__icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--teal-mint); color: var(--teal-ink);
  flex-shrink: 0;
  /* --ease-pop overshoots past 180deg and springs back, which read as a
     jitter right as the + reformed. A non-overshooting curve lands clean. */
  transition: transform .34s var(--ease), background .18s var(--ease);
}
/* the +/− is drawn from two bars so the vertical one can retract mid-spin */
.faq__icon::before,
.faq__icon::after {
  content: ''; position: absolute;
  background: currentColor; border-radius: 2px;
}
/* whole pixels + explicit centring: half-pixel boxes shimmer mid-rotation */
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after  { width: 2px; height: 12px;
  transition: transform .34s var(--ease); }

.faq__item.is-open .faq__icon { transform: rotate(180deg); }
.faq__item.is-open .faq__icon::after { transform: scaleY(0); }
.faq__item:nth-child(even) .faq__icon { background: var(--rose-wash); color: var(--rose); }
/* 0fr -> 1fr animates to the answer's natural height, no magic max-height */
.faq__a-wrap {
  display: grid; grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows .34s var(--ease), visibility 0s .34s;
}
.faq__item.is-open .faq__a-wrap {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows .34s var(--ease), visibility 0s;
}
/* the clipper must carry NO padding — padding is not collapsed by a 0fr row,
   which would leave every closed item 20px tall */
.faq__a-wrap > .faq__a-clip { overflow: hidden; min-height: 0; }

.faq__a {
  padding: 0 22px 20px;
  font-size: 15px; line-height: 1.7; font-weight: 600; color: var(--ink-2);
}


/* ---------- 11. portfolio + footer ------------------------- */

.portfolio {
  padding: 34px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
}
.portfolio__kicker { color: var(--rose); }
.portfolio h2 { font-weight: 700; font-size: 28px; margin: 4px 0 6px; color: var(--rose-deep); }
.portfolio p {
  font-family: var(--font-accent); font-style: italic; font-size: 15.5px;
  color: var(--rose-body); margin: 0; max-width: 46ch;
}
/* a link slot that has no URL yet in config.js — visible but inert */
.social--unset,
.portfolio__btn.is-unset {
  opacity: .45;
  box-shadow: none;
  cursor: default;
  outline: 2px dashed currentColor;
  outline-offset: -2px;
}
.portfolio__btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--rose); color: var(--white);
  padding: 12px 22px; border-radius: var(--pill);
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 0 var(--rose-darkest);
  /* box-shadow must be listed here too — this rule comes after the shared
     hover-lift block, so omitting it made the shadow jump instead of ease. */
  transition: background .14s var(--ease), color .14s var(--ease),
              transform .13s var(--ease), box-shadow .13s var(--ease);
}
.portfolio__btn:hover { background: var(--rose-deep); color: var(--white); }
.portfolio__btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-darkest); }

.footer {
  margin-top: 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer__note {
  font-family: var(--font-accent); font-style: italic;
  font-size: 15px; color: var(--muted);
}
.footer__top {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-wash); color: var(--rose);
  padding: 12px 22px; border-radius: var(--pill);
  font-size: 14.5px; font-weight: 700;
  box-shadow: 0 4px 0 var(--rose-shadow);
}
.footer__top:hover { background: var(--rose-wash-3); color: var(--rose); }


/* ---------- 12. modal + form ------------------------------- */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(58, 46, 54, .36);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto; z-index: 50;
  animation: fadeIn .18s ease;
}

.modal {
  width: 100%; max-width: 620px;
  background: var(--cream);
  border-radius: var(--r-xl); overflow: hidden;
  box-shadow: 0 40px 90px -40px rgba(58, 46, 54, .55);
  animation: popIn .24s var(--ease-pop);
}
.modal__head {
  padding: 26px 30px; background: var(--rose-wash);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
}
.modal__kicker { color: var(--rose); }
.modal__title {
  font-weight: 800; font-size: 28px; margin: 2px 0;
  letter-spacing: -.01em; color: var(--rose-deep);
}
.modal__sub { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--rose-body); }
.modal__lang { margin-top: 9px; display: flex; }
.modal__lang .lang-pill {
  font-size: 12px; padding: 2px 11px 3px;
  background: rgba(58, 46, 54, .06); color: var(--rose-body);
}
.modal__lang .flag { font-size: 15px; }
.modal__close {
  display: flex; align-items: center; justify-content: center;
  border: none; background: var(--white);
  width: 38px; height: 38px; border-radius: 50%;
  cursor: pointer; font-size: 18px; line-height: 1;
  color: var(--rose); flex-shrink: 0; padding: 0;
  transition: background .14s var(--ease);
}
.modal__close:hover { background: var(--teal-line); }
.modal__body { padding: 26px 30px 30px; }
.modal__body--form { padding-bottom: 32px; }

.field-label {
  display: block; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; margin-bottom: 6px;
}
.field-label .opt { color: var(--muted); font-size: 13px; font-weight: 600; }
.field-hint { font-size: 13.5px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.field { margin-bottom: 20px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }

.input, .textarea {
  width: 100%; padding: 14px 16px;
  border-radius: 18px; border: 2px solid var(--border);
  background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--ink);
  outline: none;
  transition: border-color .14s var(--ease);
}
.input:focus, .textarea:focus { border-color: var(--teal-mid); }
.input::placeholder, .textarea::placeholder { color: var(--clay); }
.textarea { resize: vertical; min-height: 88px; }
.input[aria-invalid="true"] { border-color: var(--rose); background: #FFF7FA; }

.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.pill-btn {
  border: 2px solid var(--border); background: var(--white); color: var(--muted);
  border-radius: var(--pill); padding: 12px 20px;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
  transition: all .12s var(--ease);
}
.pill-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--border); }
.pill-btn.is-on {
  border-color: var(--rose-line); background: var(--rose-wash);
  color: var(--rose); box-shadow: 0 3px 0 var(--rose-shadow);
}
.pill-btn.is-on--teal {
  border-color: var(--teal); background: var(--teal-mint);
  color: var(--teal-ink); box-shadow: 0 3px 0 var(--teal-shadow);
}

.addon-btn {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; text-align: left;
  border: 2px solid var(--border); background: var(--white);
  border-radius: var(--r-md); padding: 14px 18px;
  cursor: pointer; width: 100%;
  box-shadow: 0 3px 0 var(--border);
  transition: all .12s var(--ease);
}
.addon-btn.is-on {
  border-color: var(--rose-line); background: var(--rose-wash);
  box-shadow: 0 3px 0 var(--rose-shadow);
}
.addon-btn__label {
  display: block; font-family: var(--font-display);
  font-size: 16px; font-weight: 700; color: var(--muted);
}
.addon-btn.is-on .addon-btn__label,
.addon-btn.is-on .addon-btn__price { color: var(--rose); }
.addon-btn__desc {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--muted); margin-top: 1px;
}
.addon-btn__price {
  font-size: 15px; font-weight: 700; color: var(--muted); white-space: nowrap;
}

.version-list { display: flex; flex-direction: column; gap: 12px; }
.version {
  border: 2px solid var(--border); border-radius: var(--r-lg);
  padding: 18px 20px; background: var(--white);
}
.version__row { display: flex; align-items: center; gap: 13px; }
.version__main { flex: 1; min-width: 0; }
.version__label { font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.version__meta {
  display: flex; align-items: center; gap: 9px;
  margin-top: 4px;
  font-family: var(--font-accent);
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.version__cx { display: inline-flex; align-items: center; gap: 6px; color: var(--clay); }
.version__cx::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.version__cx--simple       { color: var(--teal-mid); }
.version__cx--semi-complex { color: var(--clay); }
.version__cx--complex      { color: var(--rose); }
.version__tracks { color: var(--muted); }
.version__tracks::before { content: '· '; }
.version__client {
  font-size: 12.5px; font-weight: 600; color: var(--clay);
  margin-top: 3px; font-style: italic;
}
.version__yt-btn {
  display: flex; align-items: center; gap: 6px;
  border: none; background: var(--rose-wash); color: var(--rose);
  border-radius: var(--pill); padding: 11px 14px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 3px 0 var(--rose-shadow);
}
.version__yt-btn:hover { background: var(--rose-wash-3); }
.version__embed {
  margin-top: 14px; aspect-ratio: 16 / 9;
  border-radius: var(--r-md); overflow: hidden; background: var(--sand);
}
.version__embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* ---- inline audio preview ------------------------------------ */
.version__audio { margin-top: 14px; }
/* "bubble" treatment: white card, soft pink hairline, outlined play button */
.aplay {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 22px 10px 18px;
  background: var(--white);
  border: 2px solid var(--rose-line-2);
  border-radius: var(--pill);
  box-shadow: 0 10px 30px -18px rgba(168, 69, 95, .55);
}
.aplay__btn {
  flex-shrink: 0;
  width: 29px; height: 29px; border-radius: 50%;
  background: var(--rose-wash);
  border: 2px solid var(--rose);
  color: var(--rose);
  font-size: 9.5px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background .15s var(--ease), transform .18s var(--ease-pop);
}
.aplay__btn:hover { background: var(--rose-wash-3); }
.aplay__btn:active { transform: scale(.88); }
.aplay__btn:focus-visible { outline: 3px solid var(--rose-shadow); outline-offset: 2px; }

.aplay__bar {
  flex: 1; min-width: 0; height: 10px;
  margin-left: 12px;      /* breathing room after the play button */
  background: var(--rose-wash);
  border-radius: var(--pill);
  cursor: pointer; position: relative;
}
.aplay__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; background: var(--rose-line);
  border-radius: var(--pill);
  pointer-events: none;
}
.aplay__knob {
  position: absolute; top: 50%; left: 0;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  background: var(--rose);
  border: 3px solid var(--white);
  box-shadow: 0 3px 10px -2px rgba(168, 69, 95, .6);
  pointer-events: none;
}
/* deliberately no bob — the knob just runs straight across */
.aplay__time {
  flex-shrink: 0;
  font-family: var(--font-num); font-size: 12.5px; font-weight: 600;
  color: var(--rose); font-variant-numeric: tabular-nums;
  /* fits "0:00 / 0:00" so the bar doesn't resize once metadata loads */
  min-width: 74px; text-align: right;
}
.aplay.is-missing { opacity: .55; }

/* volume: just the speaker until you reach for it, then a little slider */
.aplay__vol {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.aplay__volbtn {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  border: none; background: transparent;
  /* --rose-line only hit 1.7:1 on white — invisible. This clears the 3:1
     minimum for a UI control while staying quieter than the timestamp. */
  color: var(--rose-soft); cursor: pointer;
  transition: color .14s var(--ease);
}
.aplay__volbtn:hover,
.aplay__vol:focus-within .aplay__volbtn { color: var(--rose); }
.aplay.is-muted .aplay__volbtn { color: var(--rose); }
.aplay__volbtn:focus-visible { outline: 2px solid var(--rose-shadow); outline-offset: 2px; border-radius: 4px; }

.aplay__volbar {
  position: relative;
  /* The width is RESERVED, not animated. Growing it on hover reflowed the
     row and slid the speaker button out from under the pointer, so you had
     to chase it to click. Only opacity changes now; nothing moves. */
  width: 52px; height: 6px;
  background: var(--rose-wash);
  border-radius: var(--pill);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease);
}
.aplay:hover .aplay__volbar,
.aplay__vol:focus-within .aplay__volbar { opacity: 1; pointer-events: auto; }
.aplay__volfill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 100%; background: var(--rose-line);
  border-radius: var(--pill); pointer-events: none;
}

@media (hover: none) {
  /* no hover on touch — always show it */
  .aplay__volbar { opacity: 1; pointer-events: auto; }
}

/* ---------- request-type chooser ---------------------------- */
.choose { display: grid; gap: 14px; }
@media (min-width: 620px) { .choose { grid-template-columns: 1fr 1fr; } }

.choose__card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  text-align: left; width: 100%;
  padding: 22px 22px 20px;
  border: 2px solid var(--rose-line-2);
  border-radius: var(--r-lg);
  background: var(--white);
  cursor: pointer; font: inherit; color: inherit;
  box-shadow: 0 4px 0 var(--rose-shadow);
  transition: background .14s var(--ease), border-color .14s var(--ease),
              transform .13s var(--ease), box-shadow .13s var(--ease);
}
.choose__card:hover {
  background: var(--rose-wash);
  border-color: var(--rose-line);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--rose-shadow);
}
.choose__card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--rose-shadow); }
.choose__card:focus-visible { outline: 3px solid var(--rose-shadow); outline-offset: 3px; }

.choose__card--alt { border-color: var(--teal-line); box-shadow: 0 4px 0 var(--teal-shadow); }
.choose__card--alt:hover {
  background: var(--teal-wash); border-color: var(--teal);
  box-shadow: 0 6px 0 var(--teal-shadow);
}
.choose__card--alt:active { box-shadow: 0 2px 0 var(--teal-shadow); }
.choose__card--alt .choose__icon,
.choose__card--alt .choose__title { color: var(--teal-ink); }
.choose__card--alt .choose__go { color: var(--teal-mid); }

.choose__icon  { font-size: 20px; color: var(--rose); line-height: 1; }
.choose__title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--rose); }
.choose__sub   { font-size: 14px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.choose__go {
  margin-top: 8px;
  font-family: var(--font-accent); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px;
  color: var(--rose);
}

.btn-back {
  display: block; width: 100%; margin-top: 12px;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  color: var(--muted); padding: 8px 4px;
}
.btn-back:hover { color: var(--rose); }

.btn-primary {
  width: 100%; border: none;
  background: var(--rose); color: var(--white);
  padding: 17px; border-radius: var(--pill);
  box-shadow: 0 5px 0 var(--rose-darkest);
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  cursor: pointer;
  transition: background .14s var(--ease), transform .1s var(--ease);
}
.btn-primary:hover:not(:disabled) { background: var(--rose-deep); }
.btn-primary:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--rose-darkest); }
.btn-primary:disabled { opacity: .6; cursor: progress; }
.btn-primary--spaced { margin-top: 22px; }

.btn-soft {
  border: none; background: var(--rose-wash); color: var(--rose);
  padding: 14px 28px; border-radius: var(--pill);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  cursor: pointer; box-shadow: 0 4px 0 var(--rose-shadow);
}
.btn-soft:hover { background: var(--rose-wash-3); }

.form-note {
  text-align: center; font-family: var(--font-accent); font-style: italic;
  font-size: 14.5px; color: var(--muted); margin: 12px 0 0;
}
.arr-only {
  border-top: 2px dashed var(--border);
  padding-top: 22px; margin-bottom: 20px;
}
.arr-only__badge {
  display: inline-block; background: var(--rose-wash);
  border-radius: var(--pill); padding: 6px 14px;
  font-size: 13px; font-weight: 700; color: var(--rose); margin-bottom: 16px;
}

.form-error {
  background: var(--rose-wash); color: var(--rose-deep);
  border: 2px solid var(--rose-line); border-radius: 18px;
  padding: 13px 18px; font-size: 14px; font-weight: 700;
  margin-bottom: 16px;
}

.sent { padding: 44px 40px 48px; text-align: center; }
.sent__check {
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--rose-wash); color: var(--rose);
  font-size: 28px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.sent h3 { font-weight: 700; font-size: 26px; margin: 0 0 8px; }
.sent p {
  font-size: 15.5px; line-height: 1.65; font-weight: 600;
  color: var(--ink-2); margin: 0 0 22px;
}
.sent__summary {
  text-align: left; background: var(--white);
  border: 2px solid var(--border); border-radius: var(--r-md);
  padding: 16px 18px; margin: 0 0 18px;
  font-family: ui-monospace, 'Cascadia Mono', monospace;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; max-height: 220px; overflow-y: auto;
}

.spinner {
  display: inline-block; width: 15px; height: 15px;
  border: 2.5px solid rgba(255,255,255,.45);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px; margin-right: 8px;
}

body.modal-open { overflow: hidden; }


/* ---------- 13. responsive --------------------------------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding: 34px 30px; gap: 30px; }
  .hero__title { font-size: 40px; }
  .hero__art { max-width: 320px; margin: 0 auto; }
  .about { grid-template-columns: 1fr; margin-top: 40px; }
  .price-grid { grid-template-columns: 1fr; }
  .melody-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .shell { padding: 0 14px 70px; }
  html { scroll-padding-top: 150px; }

  .nav {
    border-radius: 26px;
    padding: 12px 14px;
    justify-content: center;
  }
  .nav__links { flex-wrap: wrap; justify-content: center; gap: 2px; }
  .nav__link { padding: 8px 11px; font-size: 14px; }
  .nav__cta { margin-left: 0; padding: 10px 16px; font-size: 14px; }

  .hero { padding: 28px 22px; border-radius: 28px; }
  .hero__title { font-size: 34px; }
  .hero__lede { font-size: 15.5px; }
  .hero__sticker { left: -8px; }
  .hero__tag { left: -8px; }
  .hero__note { right: -6px; }

  .catalog { padding: 22px 16px 18px; }
  .cat-scroll { max-height: none; padding-right: 0; }
  .song { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  .song__right { justify-content: flex-end; }

  .custom-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .custom-cta__btn { text-align: center; }

  .pricing, .faq, .portfolio { padding: 26px 20px; }
  .about__card { padding: 26px 22px; }
  .section-title, .faq__title, .portfolio h2 { font-size: 24px; }

  .addon-row { flex-direction: column; gap: 8px; }

  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal {
    max-width: none; border-radius: 0; min-height: 100%;
    animation: fadeIn .18s ease;
  }
  .modal__head { padding: 22px 20px; position: sticky; top: 0; z-index: 2; }
  .modal__title { font-size: 24px; }
  .modal__body { padding: 22px 20px 28px; }
  .field-pair { grid-template-columns: 1fr; }
  .sent { padding: 34px 22px 40px; }

  .footer { flex-direction: column; align-items: stretch; text-align: center; }
  .footer__top { justify-content: center; }
}


/* ---------- 14. reduced motion ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .starfield { display: none; }
}


/* ---------- 15. sparkle + cursor glitter -------------------- */

/* The shimmer keeps --ink as its base stops, so the word reads normally and
   only a warm highlight travels across it. Guarded by @supports: without
   background-clip:text the transparent fill would erase the word entirely. */
.sparkle-word { position: relative; }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .sparkle-ink {
    background-image: linear-gradient(
      100deg,
      var(--ink) 0%, var(--ink) 42%,
      var(--rose) 48%, #E8B963 52%, var(--rose) 56%,
      var(--ink) 62%, var(--ink) 100%
    );
    background-size: 280% 100%;
    /* MUST tile. With no-repeat, any background-position outside 0–100% left
       part of the text with no image behind it — and since the fill is
       transparent, those letters simply disappeared. */
    background-repeat: repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sparkleSheen 4.2s ease-in-out 1.1s infinite;
  }
}

/* stays within 0–100% so the text is always fully covered */
@keyframes sparkleSheen {
  0%        { background-position: 100% 0; }
  55%, 100% { background-position: 0% 0; }
}

.sparkle-star {
  position: absolute;
  pointer-events: none;
  color: #E8B963;
  line-height: 1;
  opacity: 0;
  text-shadow: 0 0 6px rgba(232, 185, 99, .55);
  animation: sparkleTwinkle 2.8s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
  0%, 70%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  12%           { opacity: 1; transform: scale(1.15) rotate(18deg); }
  26%           { opacity: .5; transform: scale(.85) rotate(28deg); }
}

/* cursor trail */
.glitter-layer {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.glitter {
  position: absolute;
  pointer-events: none;
  line-height: 1;
  will-change: transform, opacity;
  animation: glitterFall linear forwards;
}
@keyframes glitterFall {
  0%   { opacity: 0;  transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  18%  { opacity: .95; transform: translate(-50%, -50%) scale(1) rotate(calc(var(--rot) * .3)); }
  100% { opacity: 0;  transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.35) rotate(var(--rot)); }
}

@media (prefers-reduced-motion: reduce) {
  .sparkle-ink { animation: none; }
  .sparkle-star { display: none; }
  .glitter-layer { display: none; }
}

/* Secondary hero CTA. White outline rather than pink: the hero sits on
   --rose-wash, so a pink border washes out (1.4:1) while white reads as a
   crisp cut-out against it, with the drop shadow carrying the edge.
   Hover reveals mint — the palette's other half, and the colour of the faq
   section this button actually points at. */
.hero__cta--soft {
  display: flex; width: fit-content;
  margin-top: 10px;
  background: transparent;
  color: var(--rose-deep);
  border: 2px solid var(--white);
  box-shadow: 0 4px 0 var(--rose-shadow);
}
.hero__cta--soft:hover {
  background: var(--teal-mint);
  color: var(--teal-ink);
  border-color: var(--white);
  box-shadow: 0 6px 0 var(--teal-shadow);
}
.hero__cta--soft:active {
  background: var(--teal-mint);
  color: var(--teal-ink);
  box-shadow: 0 2px 0 var(--teal-shadow);
}
.hero__cta--soft:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}