/* meldliveapp.com - the public face of MELD.
   Deliberately separate from app.css so the hub UI cannot be affected by a
   change here, and vice versa. No external requests of any kind: system fonts,
   inline SVG, no images. */

:root {
  --bg: #1c1a17;
  --panel: #14120f;
  --line: rgba(232,227,217,.09);
  --txt: #e8e3d9;
  /* These two are alpha over a near-black page, so the alpha IS the contrast.
     --faint was .34, which composites to rgb(89,90,91) and gives 2.86:1
     against the background - well under the 4.5:1 WCAG AA needs for normal
     text, and it was carrying the inactive nav tabs, the footer links and the
     copyright line. .50 gives 4.99:1. --muted moves with it so the two stay
     visibly different, which is the only reason to have both. */
  --muted: #b3a89a;
  --faint: #8f8579;
  --accent: #e8a33d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }          /* the only "JS" the page needs */

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  /* Size and leading only. The TYPEFACE is set once in meld-chrome.css, which
     is the only stylesheet every page loads - /jam and the legal pages do not
     load this file, so a stack declared here reached most of the site and not
     all of it. */
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: var(--meld-page); max-width: 100%; margin: 0 auto; padding: 0 1.5rem; }

/* ------------------------------- hero -------------------------------- */

/* ===================== THE HERO: A DESK, NOT A SPLASH ==================== *
 *
 * Two columns: the offer on the left, a faceplate on the right. The old hero
 * was the wordmark at 96px, centred, over a full screen of nothing - which
 * told a first-time visitor the name of the company and not one thing about
 * what it does. This one says what it is and shows it in the same view.
 *
 * The right-hand panel is a picture of a channel strip, drawn in SVG and CSS.
 * It is aria-hidden: it is decoration, and a screen reader announcing four
 * knobs nobody can turn is worse than silence. */
.hero {
  /* Full-bleed band, page-width contents. Without this the headline sat hard
     against the window edge while every heading below it was indented, and
     the whole page looked like two different documents. */
  width: var(--meld-page); max-width: 100%; margin: 0 auto; padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 3rem;
  align-items: center;
  /* Exactly the space between the pinned bars, from their measured heights
     rather than a guess in rem. svh rather than vh because a phone's address
     bar counts against the height and vh does not know that. */
  /* Exactly the space between the pinned bars, from their MEASURED heights
     rather than a guess in rem - the guess was 110px too generous at every
     size. svh rather than vh because a phone's address bar counts against the
     height and vh does not know that.

     The old centred hero left a hole under the buttons at this height. The
     faceplate fills the right-hand column now, so the height reads as a full
     first screen instead of empty space. */
  min-height: calc(100svh - var(--nav-h, 52px) - var(--foot-h, 56px));
  padding-block: 3.4rem 3rem;
  position: relative;
  border-bottom: 2px solid var(--line);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(58% 50% at 22% 40%, rgba(232,163,61,.10), transparent 70%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-copy { display: flex; flex-direction: column; gap: 1.25rem; }

.hero-est { margin: 0; }
.hero-slash { color: var(--line-2); margin: 0 .35em; }

/* The faceplate lettering. Condensed and tight, because a channel strip is
   narrow and this is the type that belongs on one. Fluid so it never wraps
   into four lines on a laptop or overflow on a phone. */
.hero-head {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 6.4vw, 4.9rem);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--txt-bright);
}
.hero-accent { color: var(--accent); }
.hero-accent-txt { color: var(--accent); }

.hero-sub {
  margin: 0; max-width: 46ch;
  font-size: 1rem; line-height: 1.65; color: var(--muted);
}
.hero .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .25rem; }

.hero-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .78rem; line-height: 1.6; color: var(--faint);
}
.hero-tour { margin: 0; font-size: .88rem; color: var(--faint); }
.hero-tour-sep { margin: 0 .5em; color: var(--line-2); }

/* ------------------------------ the faceplate ------------------------------ */
.console {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--radius-panel);
  padding: 1.15rem;
  display: flex; flex-direction: column; gap: 1rem;
  /* A fine horizontal grain, like a painted steel face. */
  background-image: repeating-linear-gradient(180deg,
    rgba(232,227,217,.022) 0 1px, transparent 1px 3px);
}
.console-head { display: flex; justify-content: space-between; align-items: baseline; }
.console-dbfs { font-family: var(--font-mono); font-weight: 500; font-size: .8rem; color: var(--accent); }
.console-strip { display: flex; gap: .9rem; align-items: flex-end; }
.knobs { display: flex; gap: .85rem; }
.knob { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
.knob svg { width: 44px; height: 44px; display: block; }
.knob-well { fill: var(--panel-2); stroke: var(--line); stroke-width: 1; }
.knob-track { fill: none; stroke: var(--line-2); stroke-width: 2.5; stroke-linecap: round; }
.knob-arc { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.knob-cap { fill: var(--panel-2); stroke: var(--line-2); stroke-width: 1; }
.knob-point { stroke: var(--txt); stroke-width: 1.6; stroke-linecap: round; }
.knob-lbl {
  font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}

.meters { display: flex; gap: .3rem; margin-left: auto; align-items: flex-end; }
.meter {
  width: 9px; height: 58px; background: var(--bg);
  border: 1px solid var(--line); display: flex; align-items: flex-end;
}
.meter i {
  display: block; width: 100%;
  /* Green through the working range, amber near the top: the meter says the
     same thing the numbers do. */
  background: linear-gradient(to top, var(--ok) 0 62%, var(--accent) 62% 88%, var(--warn) 88%);
}

.console-rule { height: 2px; background: var(--line); }
.console-take { display: flex; flex-direction: column; gap: .5rem; }
.console-take-head { display: flex; justify-content: space-between; align-items: baseline; }
.console-time { font-family: var(--font-mono); font-size: .66rem; color: var(--faint); }
.wave {
  background: var(--bg); border: 1px solid var(--line-2);
  padding: 0 .5rem; height: 132px; display: flex; align-items: center;
}
.wave svg { width: 100%; height: 108px; display: block; }
.wave rect { fill: var(--accent); }

.console-btns { display: flex; gap: .5rem; }
.console-btns span {
  flex: 1; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem 0;
  border: 1px solid var(--line-2); color: var(--muted);
}
.console-btns .on { border-color: var(--accent); color: var(--accent); }

/* One column below the point where two stop fitting. The faceplate goes first
   on a phone: it is the fastest way to say "this is a recording tool", and it
   is a picture rather than something to read. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 1.6rem; min-height: 0; padding: 2.2rem 0 2.4rem; }
  .hero-head { font-size: clamp(2.6rem, 11vw, 3.6rem); }

  /* THE OFFER FIRST, THEN THE PICTURE OF IT.
     This used to be `.console { order: -1 }` - the faceplate above the
     headline - on the reasoning that a picture says "recording tool" faster
     than a sentence does. The approved Mobile artboard does the opposite, and
     it is right: a phone shows one screenful, and spending it on a panel of
     controls nobody can operate means the first thing a visitor reads is
     nothing at all. Headline, sentence, the two buttons, THEN the faceplate. */
  .console { order: 1; }

  /* The buttons stack full width rather than sitting in a row, as the artboard
     has them - two half-width buttons on a 390px screen are two small buttons. */
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; }
  /* Higher specificity than the base rule, which is defined further down the
     file and would otherwise win and re-centre it. */
  .hero .actions .hero-jam { align-self: flex-start; margin-left: 0; margin-top: .4rem; }

  /* The cue has no job on a phone: the hero is not a full screen here, the
     next section is already in view, and it was landing ABOVE the faceplate -
     pointing down at something that was still above it. It stays in the markup
     for the desktop hero, which is where it means something. */
  .hero .scroll-cue { display: none; }

  /* A COMPACT FACEPLATE. The artboard drops the fourth knob, the take header
     and the transport row on a phone and keeps the part that reads as a
     channel strip at a glance: three dials, the meters and the waveform.
     Everything hidden here is decoration - none of it is a control. */
  .console { padding: .9rem; gap: .7rem; }
  .knobs .knob:nth-child(4) { display: none; }
  .console-take-head, .console-btns { display: none; }
  .console-rule { display: none; }
  .wave { height: 72px; padding: 0 .35rem; }
  .wave svg { height: 58px; }
  .knob svg { width: 38px; height: 38px; }

  /* "Est. 2026 /" goes; the artboard's eyebrow is the half that says something. */
  .hero-est .hero-est-year, .hero-est .hero-slash { display: none; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; border: 1px solid transparent;
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  font-weight: var(--btn-weight); font-size: var(--btn-size);
  letter-spacing: var(--btn-tracking);
  /* UPPERCASE, because the lettering on a console is uppercase. The tracking
     token opened up to match: caps set tight are a wall. */
  text-transform: uppercase;
  font-family: var(--font-display);
  transition: var(--btn-transition);
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { transform: translateY(-1px); background: var(--accent-hot); }
.btn-ghost { border: 1px solid var(--line); color: var(--txt); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------ sections ------------------------------ */

/* SCOPED, because this file is loaded by twelve pages and a bare `section`
   selector reaches every <section> on all of them. It was landing-page
   rhythm - 5rem of breathing room between full-width bands - applied to the
   six sections inside the Studio panel and the six on the account page, where
   it reads as a hole in the layout rather than rhythm:
     "on the studio page, there is some weird spacing"
   The pages that WANT the rhythm now opt in by name. A section added to any
   other page gets no padding it did not ask for. */
main.home section,
main.how section { padding: 5rem 0; }
.eyebrow {
  /* Same lettering as .lbl in meld-chrome.css, kept as its own class because
     the section eyebrows are amber and the panel labels are not. */
  font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: var(--label-tracking);
  font-size: var(--label-size); font-weight: 500; color: var(--accent);
  margin: 0 0 .7rem;
}
h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.7rem); line-height: 1.05;
  letter-spacing: -.004em;
  color: var(--txt-bright);
  margin: 0 0 2.5rem;
}

/* Reflows with the window rather than at one breakpoint. */
.cards {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27rem), 1fr));
}
/* (auto-fit above handles every width; the old fixed 3-column rule is gone.) */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.7rem 1.5rem;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: rgba(232,163,61,.35); transform: translateY(-2px); }
.card h3 { margin: 0 0 .1rem; font-size: 1.15rem; letter-spacing: .02em; }
.card .kind { font-size: .74rem; color: var(--accent);
              text-transform: uppercase; letter-spacing: .14em; }
.card p { color: var(--muted); margin: .9rem 0 0; font-size: .95rem; }

/* ------------------------------- social ------------------------------- */

/* Footer styling lives in meld-chrome.css - one definition, so the bar is
   the same height on every page. */


/* ------------------------------- footer ------------------------------- */

/* Scoped away from the shared bar. As a bare `footer` selector this also
   matched <footer class="meld-foot"> and added 2.2rem/3rem of padding to it,
   which is why the bar was a different height on pages that load this file. */
footer:not(.meld-foot) {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 3rem;
  color: var(--faint); font-size: .88rem;
}
.foot-inner {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
  align-items: center; justify-content: space-between;
}
footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--accent); }
.foot-links { display: flex; gap: 1.3rem; flex-wrap: wrap; }

@media (max-width: 600px) {
  .foot-inner { flex-direction: column; text-align: center; }
  /* Scoped like the rule above. THIS is the one Richard was seeing, and only
     on a phone - the desktop rule was scoped and the phone override was not,
     which is the shape of bug that survives every check done at a laptop. */
  main.home section,
  main.how section { padding: 3.5rem 0; }
}

/* Two of the three cards are now links. They must not look like links in the
   browser's default sense - no underline, no colour shift - only in the sense
   that the whole card lifts and the accent arrow appears. */
a.card { text-decoration: none; color: inherit; display: block; }
.card-go {
  display: inline-block; margin-top: 1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  opacity: .8; transition: opacity .15s ease, transform .15s ease;
}
a.card:hover .card-go { opacity: 1; transform: translateX(3px); }

/* The cue that the page continues.
   Bounces gently, stops entirely for anyone who has asked for less motion,
   and disappears once you have started scrolling - it has done its job by
   then and would only be in the way. */
.scroll-cue {
  /* In the flow, not absolutely positioned.
     Pinned to the hero's bottom edge it had no idea what else was down there,
     so on a short or narrow window it landed on top of the buttons. As a flex
     child with margin-top:auto it is pushed to the bottom of the space that is
     actually left, and can never overlap anything. */
  /* Left, with the rest of the hero copy. It was centred when the hero was a
     centred column; in the two-column layout that put it under the middle of
     nothing. */
  margin-top: auto; padding-top: 1.75rem;
  align-self: flex-start;
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  color: var(--faint); text-decoration: none;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .5rem 0;
  transition: color .15s ease, opacity .3s ease;
}
.scroll-cue:hover { color: var(--accent); }
.scroll-cue svg { width: 20px; height: 20px; animation: cue-bob 1.9s ease-in-out infinite; }

@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg { animation: none; }
}

/* Nothing to point at on a short screen, and no room to point from. */
@media (max-height: 560px) {
  .scroll-cue { display: none; }
}

/* ------------------------------ signup ------------------------------- */

.signup { border-top: 1px solid var(--line); text-align: center; }
.signup h2 { margin: .2rem 0 .6rem; font-size: 1.5rem; }
.signup-lede { color: var(--muted); max-width: 46ch; margin: 0 auto 1.6rem; }

.signup-form {
  display: flex; gap: .6rem; justify-content: center;
  flex-wrap: wrap; max-width: 30rem; margin: 0 auto;
}
.signup-form input {
  flex: 1 1 16rem; min-width: 0;
  /* --field so the autofill repaint matches this field, not the site default. */
  background: var(--panel); --field: var(--panel); border: 1px solid var(--line);
  color: var(--txt); border-radius: 3px; padding: .8rem .9rem;
  font: inherit; font-size: 1rem;      /* 16px: anything smaller zooms iOS on focus */
  outline: none; transition: border-color .15s ease;
}
.signup-form input:focus { border-color: var(--accent); }
/* The one remaining outlier when the site was measured: 12.48px, 700 weight,
   uppercase, .12em tracking, against 15.2px/600/sentence-case everywhere else.
   It is the same action - a primary submit - so it gets the same shape. */
.signup-form button {
  font: inherit; font-size: var(--btn-size); font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  /* UPPERCASE, because the lettering on a console is uppercase. The tracking
     token opened up to match: caps set tight are a wall. */
  text-transform: uppercase;
  font-family: var(--font-display);
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  border: 1px solid var(--accent); background: var(--accent); color: #14120f;
  cursor: pointer; transition: var(--btn-transition);
}
.signup-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.signup-form button:hover { transform: translateY(-1px); background: #f5bd63; }
.signup-form button:disabled { opacity: .55; cursor: default; transform: none; }

.form-msg {
  margin: 1rem 0 0; font-size: .85rem; color: var(--muted); min-height: 1.3em;
}
.form-msg.ok { color: var(--accent); }
.form-msg.bad { color: #c4553d; }

/* Visible to screen readers, not on screen. The input has a placeholder, but
   a placeholder is not a label and vanishes the moment you type. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The plans line under the updates form. Quieter than the form it follows -
   someone who has read this far is being offered a detail, not a next step. */
.signup-plans {
  margin: 1.1rem 0 0;
  font-size: .85rem;
  color: var(--faint);
}
.signup-plans a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.signup-plans a:hover { border-bottom-color: var(--accent); }


/* The walkthrough offer under the hero buttons. Quiet on purpose - it is for
   the visitor who wants to be shown, not the one who wants to press Record. */
.hero-tour {
  margin: 1.1rem 0 0;
  font-size: .88rem; color: var(--faint);
  display: flex; align-items: center; justify-content: center;
  gap: .45rem; flex-wrap: wrap;
}
.hero-tour button {
  font: inherit; font-size: inherit; font-weight: 600;
  color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
  border-bottom: 1px solid transparent;
}
.hero-tour button:hover { border-bottom-color: var(--accent); }
.hero-tour button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hero-tour a { color: var(--faint); }
.hero-tour a:hover { color: var(--txt); }
.hero-tour-sep { opacity: .5; }

/* ==================== HOW IT GOES: THREE STEPS + A READOUT ================= *
 * Steps on the left, a measured readout on the right. The readout shows the
 * three figures MELD actually produces; see the comment in home.html for why
 * the comp's fourth strip is not here. */
.steps-wrap {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 3rem; align-items: start;
}
.steps { list-style: none; margin: 0; padding: 0; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.4rem;
  padding: 1.5rem 0; border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
  font-size: 1.5rem; font-weight: 500; color: var(--accent);
  line-height: 1.1; min-width: 2ch;
}
.step h3 {
  margin: 0 0 .45rem; font-size: 1.05rem; font-weight: 600;
  color: var(--txt-bright); font-family: var(--font-sans);
}
.step p { margin: 0; color: var(--muted); line-height: 1.65; font-size: .95rem; max-width: 54ch; }

.readout { padding: 1.15rem; position: sticky; top: calc(var(--nav-h, 52px) + 1.5rem); }
.readout-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; }
.readout-ready {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ok);
}
.readout-rows { margin: 0; }
.readout-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .85rem 0; border-top: 1px solid var(--line);
}
.readout-row:first-child { border-top: 0; }
.readout-row dt { color: var(--muted); font-size: .92rem; }
.readout-row dd { margin: 0; font-size: 1.35rem; font-weight: 500; color: var(--txt-bright); }
.readout-row dd span {
  font-size: .68rem; letter-spacing: .1em; color: var(--faint);
  margin-left: .35rem; text-transform: uppercase;
}
.readout-foot { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .steps-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .readout { position: static; }
}

/* The third path in the hero. Deliberately not a .btn: Jam needs a second
   musician online, so it must be reachable without competing with the two
   things a lone first-time visitor can finish by themselves. */
.hero-jam {
  align-self: center; margin-left: .35rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.hero-jam:hover { color: var(--accent); border-color: var(--accent); }
.hero-jam span { color: var(--faint); }