/* ================================================================
 * melotune 2.11.0 — marquee landing extensions
 * Layers on top of melotune-2.8.css. Used by index.html only.
 * Adds: dark cinematic hero, mood-grid ambient backdrop, screenshot
 * gallery, stations-three-rows showcase, pricing block, dividers.
 * ================================================================ */

/* ============== global mobile safety ============== */
/* Prevent any element from forcing the document wider than the viewport.
   `clip` is the modern equivalent of `hidden` but keeps sticky headers
   working; `hidden` is the universally-supported fallback. */
html{ overflow-x:hidden; overflow-x:clip; }
body{ overflow-x:hidden; overflow-x:clip; max-width:100vw; }
/* Every image is at most as wide as its container. Belt-and-braces
   against any image asset slipping past a more specific rule. */
img{ max-width:100%; height:auto; }

:root{
  --ink-dark: #0a0a09;
  --ink-dark-2: #131210;
  --ink-line: #2a2925;
  --paper: #f4f1ea;
  --paper-2: #d6d3ca;
  --mute-dark: #8d8c84;
  --mute-dark-2: #c7c6c0;
  /* mood-axis palette — sampled from the in-app screenshots */
  --hue-amber: 80;
  --hue-lilac: 320;
  --hue-mint:  160;
  --hue-blue:  240;
  --hue-rose:  25;
  --hue-indigo:280;
}

/* ============== v2.11 cinematic hero ============== */
.hero-v211{
  position:relative;
  background: radial-gradient(ellipse 90% 60% at 50% 30%,
                              #1a1815 0%, #0a0a09 70%);
  color:var(--paper);
  border-bottom:1px solid var(--ink-line);
  overflow:hidden;
  isolation:isolate;
  min-height:96vh;
}
.hero-v211 .wrap{
  position:relative; z-index:3;
  padding:90px 28px 80px;
  display:flex; flex-direction:column; justify-content:center;
  min-height:96vh;
}

/* mood-grid backdrop — populated by inline JS at end of hero */
.hero-v211 .mood-bg{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0.72;
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 50%,
                                      rgba(0,0,0,0.25) 0%, #000 90%);
          mask-image: radial-gradient(ellipse 70% 55% at 50% 50%,
                                      rgba(0,0,0,0.25) 0%, #000 90%);
}
.hero-v211 .mood-bg svg{
  width:100%; height:100%; display:block;
}

/* ============== mood-grid cell animation ============== */
/* Hot cells pulse stronger and faster; warm cells breathe slower.
   Per-cell stagger comes from inline animation-delay on each rect. */
.hero-v211 .mood-bg .cell-hot{
  animation: cellPulse 6s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.hero-v211 .mood-bg .cell-warm{
  animation: cellBreath 11s ease-in-out infinite;
  transform-origin: center; transform-box: fill-box;
}
.hero-v211 .mood-bg .cell-tracer{
  animation: tracerPulse 3.4s ease-in-out infinite;
  filter: drop-shadow(0 0 6px oklch(0.78 0.15 var(--hue-amber)));
}
@keyframes cellPulse{
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.82); }
}
@keyframes cellBreath{
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes tracerPulse{
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce){
  .hero-v211 .mood-bg .cell-hot,
  .hero-v211 .mood-bg .cell-warm,
  .hero-v211 .mood-bg .cell-tracer{ animation: none; }
}
/* vignette underneath the mood-grid to seat content in the centre */
.hero-v211 .vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background: radial-gradient(ellipse 60% 50% at 50% 55%,
                              rgba(10,10,9,0.55) 0%,
                              rgba(10,10,9,0.85) 65%,
                              rgba(10,10,9,0.95) 100%);
}

/* corner marks — WHYSL-style */
.hero-v211 .corner{
  position:absolute; z-index:4;
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--mute-dark); line-height:1.5;
}
.hero-v211 .corner b{ color:var(--mute-dark-2); font-weight:500; }
.hero-v211 .corner.tl{ top:22px; left:28px; }
.hero-v211 .corner.tr{ top:22px; right:28px; text-align:right; }
.hero-v211 .corner.bl{ bottom:22px; left:28px; }
.hero-v211 .corner.br{ bottom:22px; right:28px; text-align:right; }

/* hero typography */
.hero-v211 .hero-eyebrow{
  display:flex; justify-content:center; gap:14px; align-items:center;
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:0.28em; text-transform:uppercase;
  color:var(--mute-dark); margin-bottom:30px;
}
.hero-v211 .hero-eyebrow .dot{
  width:6px;height:6px;border-radius:50%;
  background:oklch(0.70 0.13 var(--hue-amber));
  box-shadow:0 0 14px oklch(0.72 0.16 var(--hue-amber) / 0.6);
}
.hero-v211 h1{
  font-family:"Geist",sans-serif; font-weight:300;
  font-size: clamp(56px, 8.5vw, 132px);
  line-height:0.98; letter-spacing:-0.045em;
  text-align:center;
  margin:8px auto 28px; max-width:14ch;
  color:var(--paper);
}
.hero-v211 h1 em{
  font-family:"Instrument Serif",serif; font-style:italic; font-weight:400;
  letter-spacing:-0.01em;
  background: linear-gradient(180deg,
    var(--paper) 0%,
    oklch(0.75 0.13 var(--hue-amber)) 100%);
  -webkit-background-clip:text;  background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-v211 .lede{
  text-align:center; max-width:54ch; margin:0 auto 28px;
  color:var(--mute-dark-2); font-size:18px; line-height:1.55;
}
.hero-v211 .lede b{ color:var(--paper); font-weight:500; }
.hero-v211 .fine-print{
  text-align:center;
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mute-dark); margin:0 auto 36px;
  display:flex; justify-content:center; gap:20px; flex-wrap:wrap;
}
.hero-v211 .fine-print .sep{ color:var(--ink-line); }
.hero-v211 .actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.hero-v211 .btn{
  color:var(--paper); border-color:#3a3a36; background:transparent;
}
.hero-v211 .btn:hover{ border-color:var(--paper); color:var(--paper); }
.hero-v211 .btn.primary{
  background:var(--paper); color:var(--ink); border-color:var(--paper);
}
.hero-v211 .btn.primary:hover{ background:#fff; }
.hero-v211 .btn .v{ color:var(--mute-dark); }
.hero-v211 .btn.primary .v{ color:var(--mute); }

/* hero phone — single floating screenshot
   Default is a portrait phone (~280px wide, 42px radius). The .hero-phone-wide
   modifier swaps to a landscape composition (~880px wide, 18px radius). */
.hero-v211 .hero-phone{
  margin:64px auto 0; display:block;
  max-width:280px; width:70%;
  border-radius:42px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.05),
    0 40px 90px rgba(0,0,0,0.65),
    0 0 140px oklch(0.55 0.12 var(--hue-amber) / 0.25);
}
.hero-v211 .hero-phone-wide{
  max-width:880px; width:92%;
  border-radius:18px;
}

/* ============== stations showcase ============== */
.stations-showcase{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:stretch;
}
.stations-showcase .shot{
  background: linear-gradient(180deg, #0a0a09 0%, #1a1916 100%);
  border:1px solid var(--ink-line);
  border-radius:8px; padding:28px 24px;
  display:flex; justify-content:center; align-items:flex-start;
  position:relative;
}
.stations-showcase .shot::before{
  content:"§ home"; position:absolute; top:14px; left:18px;
  font-family:"Geist Mono",monospace; font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--mute-dark);
}
.stations-showcase .shot::after{
  content:"mood music stations"; position:absolute; top:14px; right:18px;
  font-family:"Geist Mono",monospace; font-size:10px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--mute-dark);
}
.stations-showcase .shot img{
  max-width:300px; width:100%; border-radius:22px; display:block;
  margin-top:28px;
}
.stations-showcase .rows{ align-self:center; }
.stations-showcase .rows .row{ border-top:1px solid var(--rule); padding:22px 0; }
.stations-showcase .rows .row:last-child{ border-bottom:1px solid var(--rule); }
.stations-showcase .rows .row-k{
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:8px;
  display:flex; gap:14px; align-items:center;
}
.stations-showcase .rows .row-k .idx{ color:var(--mute); }
.stations-showcase .rows .row-k .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  display:inline-block;
}
.stations-showcase .rows h4{
  margin:0 0 6px; font-weight:500; font-size:22px;
  letter-spacing:-0.015em; color:var(--ink);
}
.stations-showcase .rows p{
  margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.55;
}
@media (max-width:900px){
  .stations-showcase{ grid-template-columns:1fr; gap:36px; }
}

/* ============== player-modes gallery (4 screenshots) ============== */
.gallery{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.gallery .pmode{
  background: linear-gradient(180deg, #0a0a09 0%, #1a1916 100%);
  border:1px solid var(--ink-line);
  border-radius:8px; padding:22px 18px 24px;
  display:flex; flex-direction:column; gap:14px;
  color:var(--mute-dark-2);
}
.gallery .pmode .pmode-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mute-dark); margin-bottom:4px;
}
.gallery .pmode .pmode-head .num{ color:var(--mute-dark-2); }
.gallery .pmode .phone-wrap{
  display:flex; justify-content:center; padding:6px 0;
}
.gallery .pmode img{
  width:100%; max-width:220px; border-radius:18px; display:block;
}
.gallery .pmode .body{
  border-top:1px solid var(--ink-line); padding-top:14px;
}
.gallery .pmode h5{
  font-family:"Geist",sans-serif; font-weight:500;
  font-size:17px; margin:0 0 6px; letter-spacing:-0.01em;
  color:var(--paper);
}
.gallery .pmode p{
  font-size:13.5px; line-height:1.5; margin:0;
  color:var(--mute-dark-2);
}

/* gallery sits in its own dark band */
.s-dark{
  background: var(--ink-dark);
  color: var(--paper);
  border-bottom:1px solid var(--ink-line);
  border-top:1px solid var(--ink-line);
  padding:80px 0;
}
.s-dark .s-label{ color:var(--mute-dark); }
.s-dark .s-title{ color:var(--paper); }
.s-dark .s-sub{ color:var(--mute-dark-2); }
.s-dark .s-title em{
  background: linear-gradient(180deg,
    var(--paper) 0%,
    oklch(0.70 0.12 var(--hue-mint)) 100%);
  -webkit-background-clip:text;  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@media (max-width:1000px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:580px){  .gallery{ grid-template-columns:1fr; } }

/* ============== capture + ready-for-you split ============== */
.split-2{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.split-2 .panel{
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
  padding:38px 36px; background:var(--bg);
}
.split-2 .panel .tag{
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--mute);
  margin-bottom:14px;
}
.split-2 .panel h3{
  font-family:"Geist",sans-serif; font-weight:400;
  font-size:30px; line-height:1.1; letter-spacing:-0.02em; margin:0 0 14px;
}
.split-2 .panel h3 em{ font-family:"Instrument Serif",serif; font-style:italic; }
.split-2 .panel p{ color:var(--ink-2); margin:0 0 10px; font-size:15.5px; }
.split-2 .panel .mini{
  font-family:"Geist Mono",monospace; font-size:11.5px;
  letter-spacing:0.05em; color:var(--mute); margin-top:18px;
}
@media (max-width:780px){ .split-2{ grid-template-columns:1fr; } }

/* ============== pricing block ============== */
.pricing{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px;
  align-items:center;
  border:1px solid var(--rule); padding:44px 40px;
  background:var(--bg-2);
}
.pricing .price-main{
  font-family:"Geist",sans-serif; font-weight:300;
  font-size: clamp(56px, 7vw, 96px);
  line-height:1; letter-spacing:-0.04em;
  color:var(--ink);
}
.pricing .price-main em{
  font-family:"Instrument Serif",serif; font-style:italic; font-weight:400;
}
.pricing .price-main .per{
  font-family:"Geist Mono",monospace; font-size:14px;
  color:var(--mute); letter-spacing:0.06em;
  margin-left:10px; font-style:normal; font-weight:400;
}
.pricing .price-sub{
  color:var(--ink-2); margin:14px 0 22px; max-width:42ch; font-size:16px;
}
.pricing .price-trial{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Geist Mono",monospace; font-size:11.5px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent-ink);
  border:1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  padding:6px 12px; border-radius:999px;
  margin-bottom:12px;
}
.pricing ul{ list-style:none; padding:0; margin:0; }
.pricing ul li{
  padding:12px 0; border-top:1px solid var(--rule);
  font-size:14.5px; color:var(--ink-2);
  display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:baseline;
}
.pricing ul li:last-child{ border-bottom:1px solid var(--rule); }
.pricing ul li b{ color:var(--ink); font-weight:500; }
.pricing ul li .idx{
  font-family:"Geist Mono",monospace; font-size:11px;
  color:var(--mute); letter-spacing:0.1em;
}
@media (max-width:780px){
  .pricing{ grid-template-columns:1fr; padding:30px 24px; gap:24px; }
}

/* ============== reusable card-row layout (§02.5, §04) ==============
   3-up dark cards on desktop, 2-up tablet, 1-up phone.
   The header above uses a 280px label + 1fr content grid that also
   collapses to 1-col at phone width. */
.card-row-head{
  display:grid; grid-template-columns:280px 1fr; gap:40px;
  align-items:baseline; margin-bottom:36px;
}
.card-row-head .label{
  font-family:"Geist Mono",monospace; font-size:11.5px;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--mute-dark); padding-top:6px;
}
.card-row-head h3{
  font-family:"Geist",sans-serif; font-weight:400;
  font-size:clamp(26px,3vw,38px); line-height:1.1;
  letter-spacing:-0.02em; margin:0 0 10px;
}
.card-row-head h3 em{ font-family:"Instrument Serif",serif; font-style:italic; }
.card-row-head p{
  font-size:16px; line-height:1.55; max-width:60ch; margin:0;
  color:var(--mute-dark-2);
}

.card-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.card-row .pmode{
  background:linear-gradient(180deg,#0a0a09 0%,#1a1916 100%);
  border:1px solid var(--ink-line); border-radius:8px;
  padding:22px 18px 24px;
  display:flex; flex-direction:column; gap:14px;
  color:var(--mute-dark-2);
}
.card-row .pmode-head{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:"Geist Mono",monospace; font-size:10.5px;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--mute-dark);
}
.card-row .pmode-head .num{ color:var(--mute-dark-2); text-align:right; }
.card-row .pmode .phone-wrap{
  display:flex; justify-content:center; padding:6px 0;
}
.card-row .pmode img{
  width:100%; max-width:220px; border-radius:18px; display:block;
}
.card-row .pmode .body{
  border-top:1px solid var(--ink-line); padding-top:14px;
}
.card-row .pmode h5{
  font-family:"Geist",sans-serif; font-weight:500;
  font-size:17px; margin:0 0 6px; letter-spacing:-0.01em;
  color:var(--paper);
}
.card-row .pmode p{
  font-size:13.5px; line-height:1.5; margin:0;
  color:var(--mute-dark-2);
}

@media (max-width:1000px){
  .card-row{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:780px){
  .card-row-head{ grid-template-columns:1fr; gap:12px; margin-bottom:28px; }
  .card-row-head .label{ padding-top:0; }
}
@media (max-width:580px){
  .card-row{ grid-template-columns:1fr; gap:18px; }
  .card-row .pmode img{ max-width:260px; }
}

/* ============== quick-feature row (icons strip) ============== */
.qf{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.qf .item{
  padding:22px 24px 22px 0; border-right:1px solid var(--rule);
}
.qf .item:last-child{ border-right:0; padding-right:0; }
.qf .item:not(:first-child){ padding-left:24px; }
.qf .item .k{
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--ink);
  margin-bottom:8px; font-weight:500;
}
.qf .item .v{
  font-family:"Geist Mono",monospace; font-size:12.5px;
  color:var(--ink-2); line-height:1.55;
}
@media (max-width:780px){
  .qf{ grid-template-columns:1fr 1fr; }
  .qf .item{ padding:18px 14px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  .qf .item:nth-child(2n){ border-right:0; }
  .qf .item:nth-last-child(-n+2){ border-bottom:0; }
  .qf .item:not(:first-child){ padding-left:14px; }
}

/* ============== hero pillars (transparent on dark) ============== */
.hero-v211 .hero-pillars{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin:42px 0 30px;
  border-top:1px solid #2a2925; border-bottom:1px solid #2a2925;
  max-width:760px; margin-left:auto; margin-right:auto;
}
.hero-v211 .hero-pillars .pillar{
  padding:18px 22px 18px 0; border-right:1px solid #2a2925;
}
.hero-v211 .hero-pillars .pillar:last-child{ border-right:0; padding-right:0; }
.hero-v211 .hero-pillars .pillar:not(:first-child){ padding-left:22px; }
.hero-v211 .hero-pillars .pillar-k{
  font-family:"Geist Mono",monospace; font-size:11px;
  letter-spacing:0.20em; text-transform:uppercase;
  color:var(--paper); margin-bottom:8px; font-weight:500;
}
.hero-v211 .hero-pillars .pillar-v{
  font-family:"Geist Mono",monospace; font-size:11.5px;
  color:var(--mute-dark-2); line-height:1.55;
}
@media (max-width:780px){
  .hero-v211 .hero-pillars{ grid-template-columns:1fr; }
  .hero-v211 .hero-pillars .pillar{
    padding:14px 0; border-right:0; border-bottom:1px solid #2a2925;
  }
  .hero-v211 .hero-pillars .pillar:not(:first-child){ padding-left:0; }
  .hero-v211 .hero-pillars .pillar:last-child{ border-bottom:0; }
  .hero-v211 .corner.br, .hero-v211 .corner.bl{ display:none; }
}