/* ==========================================================================
   noname.menu — shared styling for sub-pages (pricing + legal).
   Reuses the design tokens from colors_and_type.css — no new colours/type.
   ========================================================================== */
:root{ --maxw:1120px; --gutter:24px; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; } p{ margin:0; }
button{ font-family:var(--font-sans); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-xs);
  letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--amber-600);
}

/* buttons (mirror of index.html) */
.btn{
  font-family:var(--font-sans); font-weight:700; font-size:var(--text-base);
  border-radius:var(--radius-md); padding:0 22px; height:52px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; border:1px solid transparent; white-space:nowrap;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-primary{ background:var(--primary); color:var(--fg-on-primary); }
.btn-primary:hover{ background:var(--primary-hover); }
.btn-ghost{ background:transparent; color:var(--fg); border-color:var(--border-strong); }
.btn-ghost:hover{ background:var(--bg-sunken); }
.btn-sm{ height:44px; font-size:var(--text-sm); padding:0 16px; }

/* header (mirror) */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,245,.86); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.logo{ display:inline-flex; align-items:baseline; gap:1px; font-family:var(--font-sans); font-size:22px; letter-spacing:-0.03em; color:var(--ink-800); }
.logo .nn{ font-weight:800; } .logo .dot{ color:var(--primary); font-weight:800; } .logo .mn{ font-weight:500; color:var(--ink-600); }
.nav-r{ display:flex; align-items:center; gap:14px; }
.nav-link{ font-family:var(--font-sans); font-weight:600; font-size:var(--text-sm); color:var(--fg-muted); }
.nav-link:hover{ color:var(--fg); }

body{ background:var(--bg); color:var(--fg); font-family:var(--font-sans); }

/* page header band */
.page-head{ background:var(--bg-elevated); border-bottom:1px solid var(--border); padding:56px 0 48px; }
.page-head h1{ font-weight:800; font-size:clamp(30px,4vw,46px); line-height:1.1; letter-spacing:-0.025em; margin-top:10px; color:var(--fg); }
.page-head .lede{ color:var(--fg-muted); font-size:var(--text-lg); font-weight:500; line-height:1.5; margin-top:14px; max-width:60ch; }
.page-head .updated{ margin-top:18px; font-size:var(--text-sm); color:var(--fg-subtle); font-weight:600; }

/* legal body */
.legal{ padding:56px 0 96px; }
.legal .doc{ max-width:74ch; }
.legal h2{ font-weight:800; font-size:var(--text-2xl); letter-spacing:-0.02em; margin:40px 0 12px; color:var(--fg); }
.legal h2:first-child{ margin-top:0; }
.legal p, .legal li{ color:var(--fg-muted); font-size:var(--text-base); font-weight:450; line-height:1.65; }
.legal p{ margin:0 0 14px; }
.legal ul{ margin:0 0 14px; padding-left:20px; } .legal li{ margin:0 0 7px; }
.placeholder{
  border:1px dashed var(--amber-500); background:var(--amber-50); color:var(--amber-800);
  border-radius:var(--radius-md); padding:16px 18px; margin:14px 0 22px;
  font-size:var(--text-sm); font-weight:600; line-height:1.5;
}
.placeholder b{ color:var(--amber-800); }
.legal a.inline{ color:var(--amber-700); font-weight:600; text-decoration:underline; }

/* pricing */
.pricing{ padding:64px 0 96px; }
.price-card{
  max-width:520px; margin:40px auto 0; background:var(--bg-elevated);
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:36px 32px; text-align:center;
}
.price-market{ font-size:var(--text-sm); font-weight:700; color:var(--fg-subtle); letter-spacing:var(--tracking-caps); text-transform:uppercase; }
.price-amount{ display:flex; align-items:baseline; justify-content:center; gap:4px; margin:14px 0 6px; }
.price-amount .cur{ font-family:var(--font-mono); font-weight:800; font-size:40px; color:var(--fg); }
.price-amount .num{ font-family:var(--font-mono); font-weight:800; font-size:64px; line-height:1; letter-spacing:-0.03em; color:var(--fg); font-variant-numeric:tabular-nums; }
.price-per{ font-size:var(--text-lg); font-weight:600; color:var(--fg-muted); }
.price-note{ color:var(--fg-subtle); font-size:var(--text-sm); font-weight:500; margin-top:10px; }
.price-card .btn{ margin-top:24px; width:100%; }
.includes{ max-width:520px; margin:32px auto 0; }
.includes h3{ font-size:var(--text-sm); font-weight:700; color:var(--fg-subtle); letter-spacing:var(--tracking-caps); text-transform:uppercase; text-align:center; margin-bottom:16px; }
.includes ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.includes li{ display:flex; align-items:flex-start; gap:11px; color:var(--fg-muted); font-size:var(--text-base); font-weight:500; }
.includes li .tk{ color:var(--ok-500); flex-shrink:0; margin-top:2px; }
.includes li .tk svg{ width:18px; height:18px; }
.other-market{ max-width:560px; margin:56px auto 0; text-align:center; padding-top:40px; border-top:1px solid var(--border); }
.other-market h3{ font-weight:700; font-size:var(--text-xl); letter-spacing:-0.01em; color:var(--fg); }
.other-market p{ color:var(--fg-muted); font-size:var(--text-base); font-weight:500; line-height:1.5; margin:10px auto 18px; max-width:48ch; }
.price-footnote{ max-width:560px; margin:32px auto 0; text-align:center; color:var(--fg-subtle); font-size:var(--text-xs); font-weight:500; line-height:1.5; }

/* footer (mirror) */
footer{ background:#15130f; color:var(--ink-400); padding:48px 0; text-align:center; }
footer .meta{ font-size:var(--text-sm); }
footer .meta .brand .nn{ font-weight:800; color:var(--ink-200); }
footer .meta .brand .dot{ color:var(--amber-400); font-weight:800; }
footer .meta .brand .mn{ font-weight:500; color:var(--ink-400); }
.foot-links{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.foot-links a{ color:var(--ink-300); font-size:var(--text-sm); font-weight:600; }
.foot-links a:hover{ color:var(--ink-50); }

@media (max-width:880px){
  .page-head{ padding:40px 0 32px; }
  .price-card{ padding:28px 22px; }
}