/* Shared styling for the standalone marketing pages (/pricing, /vs/*, /guides/*).
   These are plain HTML files served straight from wwwroot, deliberately outside the Blazor app
   so crawlers get real content — but that meant each one carried its own copy of this block.
   Four copies was the point to extract; edit here, not per page. */

:root { color-scheme: light; }
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: radial-gradient(72% 55% at 50% -6%, rgba(198, 96, 61, .14), transparent 60%) #faf6f0;
    color: #2a2521;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

a { color: #a64a28; }

.wrap { max-width: 840px; margin: 0 auto; padding: 28px 24px 80px; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 19px; color: #2a2521; text-decoration: none; }
.brand img { width: 26px; height: 26px; }

.pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: #c6603d; color: #fff; text-decoration: none;
    border-radius: 999px; padding: 11px 20px; font-weight: 600; font-size: 15px;
}
.pill:hover { background: #a64a28; }

h1 {
    font-family: 'Newsreader', Georgia, serif; font-weight: 500;
    font-size: clamp(34px, 5.4vw, 54px); line-height: 1.07; letter-spacing: -.015em; margin: 52px 0 0;
}
h2 {
    font-family: 'Newsreader', Georgia, serif; font-weight: 500;
    font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -.015em; margin: 56px 0 0;
}
h3 { font-size: 18px; margin: 32px 0 0; }
p { margin: 14px 0 0; color: #4a433c; }

.byline { color: #8b8175; font-size: 14px; margin: 16px 0 0; }
.lede { font-size: 19px; color: #6f655a; max-width: 36em; margin: 22px 0 0; }
.lede b { color: #2a2521; font-weight: 600; }

/* Wide tables scroll inside their own container — the page body never scrolls sideways. */
.tblwrap { overflow-x: auto; margin: 26px 0 0; }
table {
    border-collapse: collapse; width: 100%; min-width: 560px; background: #fff;
    border: 1px solid #ebe2d6; border-radius: 14px; overflow: hidden; font-size: 15px;
}
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid #f0e8dc; vertical-align: top; }
th { background: #f7f0e6; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; width: 30%; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 26px 0 0; }
.card { background: #fff; border: 1px solid #ebe2d6; border-radius: 18px; padding: 24px; }
.card h3 { margin: 0 0 6px; }
.card ul { margin: 12px 0 0; padding-left: 20px; color: #6f655a; font-size: 15px; }
.card li { margin-bottom: 8px; }

dl { margin: 22px 0 0; }
dt { font-weight: 600; font-size: 17px; margin-top: 24px; }
dd { margin: 8px 0 0; color: #6f655a; }

/* Pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 44px 0 0; }
.tier { background: #fff; border: 1px solid #ebe2d6; border-radius: 20px; padding: 28px 26px; box-shadow: 0 18px 44px -30px rgba(80, 40, 20, .3); }
.tier h2 { font-family: 'Hanken Grotesk', sans-serif; font-size: 20px; margin: 0; }
.price { font-family: 'Newsreader', Georgia, serif; font-size: 44px; font-weight: 500; margin: 10px 0 2px; }
.price span { font-family: 'Hanken Grotesk', sans-serif; font-size: 15px; color: #6f655a; font-weight: 400; }
.tier p { color: #6f655a; font-size: 15px; margin: 8px 0 0; }
.tier ul { list-style: none; padding: 0; margin: 20px 0 0; }
.tier li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15px; }
.tier li::before { content: "✓"; position: absolute; left: 0; color: #5e7a5a; font-weight: 700; }
h2.sec { margin: 64px 0 0; }

/* Guides: numbered steps, code, callouts */
ol { margin: 16px 0 0; padding-left: 22px; color: #4a433c; }
ol li { margin-bottom: 10px; }
ul.plain { margin: 14px 0 0; padding-left: 22px; color: #4a433c; }
ul.plain li { margin-bottom: 8px; }
code { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: #f3ece1; padding: 1px 5px; border-radius: 4px; }
pre { margin: 18px 0 0; background: #fff; border: 1px solid #ebe2d6; border-radius: 12px; padding: 16px 18px; overflow-x: auto; }
pre code { background: none; padding: 0; font-size: 14px; line-height: 1.55; }
.note { background: #fdf3e7; border: 1px solid #e8d3b4; border-radius: 12px; padding: 16px 18px; margin: 26px 0 0; }
.note p { margin: 0; color: #5b4632; font-size: 15.5px; }
.note p + p { margin-top: 10px; }

.foot {
    margin-top: 72px; padding-top: 24px; border-top: 1px solid #ebe2d6;
    color: #6f655a; font-size: 14px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
}
.foot nav a { margin-right: 14px; }