/* Pricing menu body — category / section / row / tiered-price layout.
   From the Claude-design pricing handoff. Chrome (header/footer/hero/surface/buttons)
   comes from styles.css + pricing2.css; this file is only the menu interior. */

.surface-in{ max-width:var(--maxw,1080px); margin:0 auto; padding:34px 28px 90px; }

/* sticky quick nav */
.jump{ position:sticky; top:84px; z-index:20; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  padding:14px 10px; margin:0 -10px 26px; background:linear-gradient(180deg, rgba(246,237,220,.96), rgba(246,237,220,.7));
  backdrop-filter:blur(8px); border-radius:14px; }
.jump a{ font-size:13px; padding:8px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;
  color:var(--emerald-700); border:1px solid rgba(28,74,55,.2); transition:all .2s; }
.jump a:hover, .jump a.active{ background:var(--emerald-700); color:var(--cream); border-color:var(--emerald-700); }

/* category */
.cat{ padding:40px 0; border-top:1px solid rgba(20,45,35,.13); scroll-margin-top:120px; }
.cat:first-of-type{ border-top:none; padding-top:6px; }
.cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:8px; }
.cat-left{ display:flex; align-items:baseline; gap:16px; }
.cat-num{ font-family:var(--mono); font-size:14px; color:var(--gold); letter-spacing:.1em; }
.cat-name{ font-family:var(--display); font-weight:500; font-size:clamp(36px,5.4vw,58px); color:var(--emerald-800); line-height:1; margin:0; }
.cat-blurb{ font-size:14.5px; color:var(--ink-soft); max-width:30em; padding-bottom:7px; margin:0; }

.sec{ margin-top:26px; }
.sec-h{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.sec-h .tx{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); white-space:nowrap; }
.sec-h .tl{ flex:1; height:1px; background:rgba(20,45,35,.14); }
.sec-note{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }

/* single-price rows -> 2 columns */
.rows{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
.rows.full{ grid-template-columns:1fr; }
.row{ display:flex; align-items:baseline; gap:14px; padding:14px 0; border-bottom:1px solid rgba(20,45,35,.1); justify-content:space-between; }
.r-name{ font-family:var(--display); font-size:22px; font-weight:500; color:var(--ink); line-height:1.15;
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; flex:1 1 auto; min-width:0; }
.r-dur{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); white-space:nowrap; }
.r-sp{ display:none; }
.r-price{ font-family:var(--display); font-size:22px; font-weight:600; color:var(--emerald-700); white-space:nowrap; flex:0 0 auto; }
.r-price .pre{ font-family:var(--sans); font-size:11px; font-weight:400; color:var(--ink-soft); margin-inline-end:6px; }
.r-price .cur{ font-family:var(--mono); font-size:12px; font-weight:400; margin-inline-end:3px; color:var(--gold); }
.r-price.raw{ font-family:var(--sans); font-size:14px; font-weight:400; color:var(--ink-soft); }
.tag{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--emerald-700);
  border:1px solid rgba(28,74,55,.3); border-radius:999px; padding:3px 9px; display:inline-flex; align-items:center; gap:6px; transform:translateY(-2px); white-space:nowrap; }
.tag .gd{ width:5px; height:5px; border-radius:50%; background:var(--gold); }

/* tiered price block */
.tier-head{ display:grid; justify-content:end; margin-bottom:2px; }
.tier-head span{ width:74px; text-align:end; font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.r-tier{ display:grid; }
.r-tier span{ width:74px; text-align:end; font-family:var(--display); font-size:20px; font-weight:600; color:var(--emerald-700); font-variant-numeric:tabular-nums; }
.cat-book{ margin-top:24px; }

@media(max-width:760px){
  .surface-in{ padding:26px 18px 70px; }
  .rows{ grid-template-columns:1fr; gap:0; }
  .r-name{ font-size:19px; } .r-price{ font-size:19px; }
}