/* Shared shell for the secondary pages (pricing, legal, contact, 404).
   index.html keeps its own inline CSS: it is the only page that needs the
   hero/preview/steps layout, and inlining keeps the entry page a single
   round trip. Everything below is the same type scale and palette. */
:root { --paper:#f7f3ec; --surface:#fffdf9; --ink:#29241d; --muted:#6d675f; --line:#ded6c9; --green:#376348; --green-soft:#e7f0e8; --radius:12px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.58 "IBM Plex Sans",Arial,sans-serif; }
.shell { width:min(1120px,calc(100% - 40px)); margin:auto; }
.skip { position:absolute; top:-60px; left:10px; z-index:2; padding:10px; color:#fff; background:var(--ink); }
.skip:focus { top:10px; }
.mark,h1,h2,h3 { font-family:Fraunces,Georgia,serif; }
.eyebrow { margin:0 0 13px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
nav { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.mark { font-size:24px; font-weight:600; letter-spacing:-.035em; text-decoration:none; color:var(--ink); }
.mark span { color:var(--green); }
nav ul { display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; font-size:15px; }
nav ul a { color:var(--muted); text-decoration:none; }
.button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; border:1px solid var(--ink); border-radius:8px; padding:10px 16px; color:var(--surface); background:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:.15s; }
.button:hover { background:#443d33; transform:translateY(-1px); }
a:focus-visible { outline:3px solid #84aa8d; outline-offset:3px; }

.page-head { max-width:720px; padding:72px 0 40px; }
h1 { margin:0 0 16px; font-size:clamp(36px,4.4vw,54px); font-weight:520; letter-spacing:-.04em; line-height:1.08; }
.page-head p { margin:0; color:var(--muted); font-size:clamp(18px,2vw,21px); line-height:1.5; }
.updated { margin:16px 0 0!important; font-size:15px; }

.prose { max-width:720px; padding-bottom:80px; }
.prose h2 { margin:44px 0 10px; font-size:clamp(24px,2.6vw,30px); font-weight:520; letter-spacing:-.03em; line-height:1.2; }
.prose h3 { margin:28px 0 6px; font-size:19px; font-weight:560; letter-spacing:-.02em; }
.prose p, .prose li { color:var(--muted); font-size:17px; }
.prose p { margin:0 0 14px; }
.prose ul { margin:0 0 14px; padding-left:22px; }
.prose li { margin-bottom:7px; }
.prose strong { color:var(--ink); }
.prose a { color:var(--ink); text-underline-offset:3px; }
.prose table { width:100%; border-collapse:collapse; margin:0 0 20px; }
.prose th, .prose td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:16px; color:var(--muted); }
.prose th { color:var(--ink); font-weight:600; }
.callout { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:20px 22px; margin:0 0 20px; }
.callout p:last-child { margin-bottom:0; }

.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:840px; margin:0 0 28px; }
.plan { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:26px; }
.plan.featured { border-color:var(--green); }
.plan h2 { margin:0 0 4px; font-size:27px; font-weight:560; letter-spacing:-.03em; }
.plan .price { margin:0 0 4px; font-family:Fraunces,Georgia,serif; font-size:38px; letter-spacing:-.04em; }
.plan .price small { color:var(--muted); font-family:"IBM Plex Sans",Arial,sans-serif; font-size:15px; letter-spacing:0; }
.plan .who { margin:0 0 18px; color:var(--muted); font-size:15px; }
.plan ul { margin:0 0 22px; padding:0; list-style:none; }
.plan li { padding:9px 0; border-top:1px solid var(--line); color:var(--muted); font-size:15px; }
.plan .button { width:100%; }
.plan .badge { display:inline-block; margin-bottom:10px; border-radius:99px; padding:4px 9px; color:var(--green); background:var(--green-soft); font-size:12px; font-weight:600; }

footer { padding:30px 0 46px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer p { margin:0 0 5px; }
footer a { color:var(--muted); text-underline-offset:3px; }

@media (max-width:700px) {
  body { font-size:17px; }
  .shell { width:min(100% - 28px,1120px); }
  nav { min-height:68px; }
  nav ul li:not(:last-child) { display:none; }
  nav ul { gap:0; }
  nav .button { min-height:38px; padding:8px 10px; font-size:13px; }
  .page-head { padding:44px 0 28px; }
  .plans { grid-template-columns:1fr; gap:18px; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }