/* ================================================================
 * melotune 2.8.0 design system
 * Paper-warm (#f4f1ea), ink-black, single desaturated green accent.
 * Geist + Geist Mono + Instrument Serif + Bebas Neue wordmark.
 * Shared across landing (index.html) + privacy / terms / support /
 * mood legal + help pages. Matches sym.bot aesthetic.
 * ================================================================ */

:root{
  --bg: #f4f1ea;
  --bg-2: #ece8dd;
  --ink: #0f0f0e;
  --ink-2: #2a2a27;
  --mute: #6b6a64;
  --mute-2: #8d8c84;
  --rule: #dad7cd;
  --rule-2: #c9c6bb;
  --accent: oklch(0.48 0.09 150);
  --accent-ink: oklch(0.35 0.06 150);
  --tag: #1a1a18;
  --maxw: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;font-feature-settings:"ss01","cv11";font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px;}
a:hover{color:var(--accent-ink)}
hr{border:0;border-top:1px solid var(--rule);margin:0}
.mono{font-family:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.serif{font-family:"Instrument Serif","Times New Roman",serif;font-weight:400;letter-spacing:-0.01em;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.nav{
  position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.2) blur(8px);
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  border-bottom:1px solid var(--rule);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
/* Wordmark — consumer-brand lockup: icon + MeloTune + TM + "by SYM.BOT".
   Bar height / link rhythm still match sym.bot + xmesh.dev, but the
   brand lockup itself keeps its MeloTune-specific consumer identity
   (camelcase, trademark, parent-brand attribution). */
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:15px;letter-spacing:-0.01em;line-height:1;color:var(--ink);}
.brand-logo{width:20px;height:20px;display:block;}
.brand sup{font-size:0.55em;vertical-align:super;color:var(--mute);margin-left:1px;}
.brand .mono{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.08em;color:var(--mute);margin-left:2px;}
.nav-links{display:flex;align-items:center;gap:22px;font-family:"Geist Mono",ui-monospace,monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-2);}
.nav-links a{text-decoration:none;display:inline-flex;align-items:center;color:var(--ink-2);transition:color .15s ease;}
.nav-links a:hover{color:var(--ink);}
.nav-links .pill{border:1px solid var(--rule-2);padding:6px 12px;border-radius:999px;font-size:11px;letter-spacing:0.14em;color:var(--ink);line-height:1;text-transform:uppercase;}

/* ---------- hero (landing only) ---------- */
.hero{padding:88px 0 56px;border-bottom:1px solid var(--rule);}
.eyebrow{font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab, var(--accent) 18%, transparent);}
h1.hero-title{
  font-family:"Geist",sans-serif;font-weight:400;
  font-size: clamp(44px, 6.2vw, 84px);
  line-height:1.02;letter-spacing:-0.035em;margin:26px 0 22px;max-width:16ch;
}
h1.hero-title em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;letter-spacing:-0.01em;}
.hero-lede{font-size:19px;max-width:62ch;color:var(--ink-2);line-height:1.5;}
.hero-actions{display:flex;gap:10px;margin-top:34px;flex-wrap:wrap;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:"Geist Mono",monospace;font-size:13px;letter-spacing:0.02em;
  padding:10px 14px;border-radius:6px;text-decoration:none;
  border:1px solid var(--rule-2);background:transparent;color:var(--ink);
}
.btn .v{color:var(--mute);margin-left:4px;font-size:11px;}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn.primary .v{color:color-mix(in oklab, var(--bg) 70%, transparent);}
.btn:hover{border-color:var(--ink);}
.btn.primary:hover{background:var(--ink-2);}

.hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:64px;border-top:1px solid var(--rule);padding-top:22px;}
.hero-meta .cell{padding-right:18px;}
.hero-meta .k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);margin-bottom:8px;}
.hero-meta .v{font-size:15px;color:var(--ink);}

/* ---------- section scaffolding ---------- */
section.s{padding:80px 0;border-bottom:1px solid var(--rule);}
.s-head{display:grid;grid-template-columns:180px 1fr;gap:40px;margin-bottom:48px;align-items:baseline;}
.s-label{font-family:"Geist Mono",monospace;font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);padding-top:14px;}
.s-title{font-family:"Geist",sans-serif;font-weight:400;font-size: clamp(32px, 3.8vw, 48px);line-height:1.05;letter-spacing:-0.025em;margin:0;max-width:22ch;}
.s-title em{font-family:"Instrument Serif",serif;font-style:italic;}
.s-sub{color:var(--ink-2);max-width:62ch;margin-top:14px;font-size:17px;line-height:1.55;}

/* ---------- mesh hero card (landing only) ---------- */
.mesh{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:stretch;}
.mesh .copy p{color:var(--ink-2);margin:0 0 14px;max-width:58ch;}
.feature-list{list-style:none;padding:0;margin:24px 0 0;border-top:1px solid var(--rule);}
.feature-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:15.5px;color:var(--ink-2);align-items:baseline;}
.feature-list li .idx{font-family:"Geist Mono",monospace;font-size:11.5px;color:var(--mute);letter-spacing:0.1em;}
.feature-list li b{color:var(--ink);font-weight:500;}

/* diagram */
.diagram{
  position:relative;background:var(--bg-2);border:1px solid var(--rule);border-radius:2px;
  padding:24px;min-height:440px;display:flex;flex-direction:column;
  font-family:"Geist Mono",monospace;
}
.diag-head{display:flex;justify-content:space-between;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);margin-bottom:18px;}
.diag-svg{flex:1;width:100%;}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:11px;color:var(--mute);border-top:1px solid var(--rule);padding-top:12px;margin-top:12px;}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:50%;background:var(--ink);display:inline-block;font-style:normal;}
.legend i.acc{background:var(--accent);}
.legend i.out{background:transparent;border:1px solid var(--ink);}

/* ---------- learns grid (landing only) ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);border-left:1px solid var(--rule);}
.grid-2 .cell{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:28px 28px 32px;background:var(--bg);}
.grid-2 .cell .k{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);margin-bottom:10px;display:flex;justify-content:space-between;}
.grid-2 .cell h4{font-weight:500;font-size:20px;letter-spacing:-0.015em;margin:0 0 8px;}
.grid-2 .cell p{color:var(--ink-2);font-size:15px;margin:0;}

/* ---------- signals table (landing only) ---------- */
table.signals{width:100%;border-collapse:collapse;font-size:14.5px;}
table.signals th,table.signals td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--rule);vertical-align:top;}
table.signals th{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute);font-weight:400;background:transparent;}
table.signals td.mono-col{font-family:"Geist Mono",monospace;color:var(--ink);font-size:13px;white-space:nowrap;}
table.signals td.weight{font-family:"Geist Mono",monospace;color:var(--accent-ink);font-size:13px;}
table.signals tr:last-child td{border-bottom:0;}
.table-wrap{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow-x:auto;}

/* ---------- under the hood (landing only) ---------- */
.hood{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--rule);}
.hood .col{padding:28px 28px 28px 0;border-right:1px solid var(--rule);}
.hood .col:last-child{border-right:0;padding-right:0;}
.hood .col:not(:first-child){padding-left:28px;}
.hood .tag{font-family:"Geist Mono",monospace;font-size:11px;color:var(--mute);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:10px;}
.hood h4{margin:0 0 6px;font-weight:500;font-size:18px;letter-spacing:-0.01em;}
.hood p{margin:0;color:var(--ink-2);font-size:14.5px;}

/* ---------- footer ---------- */
footer{padding:56px 0 40px;color:var(--mute);font-size:13px;}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:24px;}
.foot-grid h6{font-family:"Geist Mono",monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--mute-2);margin:0 0 14px;font-weight:400;}
.foot-grid a{display:block;color:var(--ink-2);text-decoration:none;margin-bottom:8px;}
.foot-legal{margin-top:48px;border-top:1px solid var(--rule);padding-top:18px;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px;font-size:12px;color:var(--mute-2);}
.foot-legal .product-of{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--mute);}
.foot-legal .meta{display:flex;flex-direction:column;gap:4px;text-align:right;max-width:56ch;}
.foot-legal .meta .line{font-family:"Geist Mono",ui-monospace,monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute);line-height:1.9;}
.foot-legal .meta .fine{margin-top:8px;font-size:10.5px;letter-spacing:0.02em;color:var(--mute-2);font-family:"Geist",ui-sans-serif,system-ui,sans-serif;text-transform:none;line-height:1.55;}
@media (max-width: 720px){.foot-legal .meta{text-align:left;}}

/* code-ish badge */
.ver-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:"Geist Mono",monospace;
  font-size:11.5px;letter-spacing:0.08em;color:var(--ink);
  padding:4px 8px;border:1px solid var(--rule-2);border-radius:4px;background:var(--bg);
}
.ver-badge .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}

/* pull quote */
.pull{
  font-family:"Instrument Serif",serif;font-weight:400;font-size: clamp(28px, 3.2vw, 42px);
  line-height:1.18;letter-spacing:-0.015em;color:var(--ink);max-width:26ch;
}
.pull em{font-style:italic;}

/* ================================================================
 * LONG-FORM CONTENT PAGES (privacy, terms, support, mood)
 * Typography + layout for legal and help content in the same system.
 * ================================================================ */

.content-page{
  max-width:760px;margin:0 auto;padding:80px 28px 64px;
}
.content-page .page-eyebrow{
  font-family:"Geist Mono",monospace;font-size:12px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:22px;
}
.content-page h1{
  font-family:"Geist",sans-serif;font-weight:400;
  font-size:clamp(40px, 5.2vw, 64px);line-height:1.04;letter-spacing:-0.03em;
  margin:0 0 12px;color:var(--ink);
}
.content-page h1 em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400;}
.content-page .subtitle{
  font-family:"Geist Mono",monospace;font-size:13px;color:var(--mute);
  margin:0 0 48px;letter-spacing:0.02em;
}
.content-page h2{
  font-family:"Geist",sans-serif;font-weight:500;
  font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  margin:40px 0 12px;color:var(--ink);
}
.content-page h3{
  font-family:"Geist",sans-serif;font-weight:500;
  font-size:17px;line-height:1.3;letter-spacing:-0.01em;
  margin:28px 0 8px;color:var(--ink);
}
.content-page p,
.content-page li{
  color:var(--ink-2);font-size:16px;line-height:1.65;
}
.content-page ul,
.content-page ol{padding-left:22px;margin:12px 0;}
.content-page li{margin-bottom:6px;}
.content-page strong{color:var(--ink);font-weight:500;}
.content-page a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;}
.content-page a:hover{color:var(--ink);}
.content-page code{
  font-family:"Geist Mono",monospace;font-size:0.92em;
  padding:1px 6px;border-radius:3px;background:var(--bg-2);color:var(--ink);
}
.content-page .content-card{
  border-top:1px solid var(--rule);
  padding:28px 0;
}
.content-page .content-card:last-child{border-bottom:1px solid var(--rule);}
.content-page .content-card > *:first-child{margin-top:0;}

/* legacy header shim — pages that still ship <header class="header"> will
   be migrated to .nav, but until then keep them readable. */
.header{display:none;}

/* small screens */
@media (max-width: 900px){
  .mesh{grid-template-columns:1fr;gap:36px;}
  .s-head{grid-template-columns:1fr;gap:12px;}
  .s-label{padding-top:0;}
  .hero-meta{grid-template-columns:repeat(2,1fr);row-gap:22px;}
  .grid-2{grid-template-columns:1fr;}
  .hood{grid-template-columns:1fr;}
  .hood .col{border-right:0;border-bottom:1px solid var(--rule);padding: 24px 0;}
  .hood .col:not(:first-child){padding-left:0;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .content-page{padding:56px 22px 48px;}
}