:root { --maxw: 1100px; --pad: 1rem; --radius: 10px; --muted: #666; --primary:#0b5fff; --primary-ink:#fff; --soft:#f7f7f8; --bg:#ffffff; --text:#111; --surface:#ffffff; --border:#eee; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial; color:var(--text); background:var(--bg); }
header { border-bottom: 1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:50; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
h1 { font-size: clamp(22px, 2.6vw, 28px); margin: 0; padding: 1rem 0 .75rem; }
nav[aria-label="Primary"] { padding-bottom: .4rem; }
.tabs { list-style:none; display:flex; gap:.25rem; padding:0; margin:0 0 .6rem 0; border-bottom:1px solid #eee; flex-wrap:wrap; }
.tabs [role="tab"] { appearance:none; border:0; background:transparent; padding:.55rem .8rem; border-radius:.5rem .5rem 0 0; cursor:pointer; font-weight:600; color:#555; }
.tabs [role="tab"][aria-selected="true"] { background:var(--soft); color:#111; }
.tabs [role="tab"]:focus-visible { outline: 3px solid #0b5fff4d; outline-offset:2px; }
section[role="tabpanel"] { display:none; padding: 1rem 0 1.2rem; }
section[role="tabpanel"][data-active="true"] { display:block; }
.hero { background:linear-gradient(180deg,#fff, #fafbff); border-bottom:1px solid #eee; }
.hero p { color: var(--muted); margin:.2rem 0 1rem; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.card { border:1px solid var(--border); border-radius: var(--radius); padding:1rem; background:var(--surface); }
.link-cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.link-card { text-decoration:none; color:inherit; border:1px solid var(--border); border-radius: var(--radius); padding:1rem; background:var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.03); transition: background .15s ease, border-color .15s ease, transform .05s ease; }
.link-card:hover { background:#fafbfc; border-color:#cfd8e3; }
.link-card:active { transform: translateY(1px); }
.link-card .card-title { font-weight:700; margin:0 0 .25rem 0; }
.kpi { color: var(--muted); font-size: 14px; margin:.35rem 0 0; word-break: break-all; }
.cta-row { display:flex; flex-wrap:wrap; gap:.5rem; margin:.7rem 0 1rem; }
.cta-row a, .cta-row button, .btn { text-decoration:none; border:1px solid var(--border); background:var(--surface); padding:.6rem .85rem; border-radius:10px; font-weight:600; display:inline-block; color:var(--text); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.btn:hover, .cta-row a:hover { background:#fafbfc; }
.btn:focus-visible, .cta-row a:focus-visible { outline: 3px solid #0b5fff4d; outline-offset:2px; }

/* Stripe price buttons grid */
#stripe-buttons { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:.5rem; margin:.4rem 0 1rem; }
#stripe-buttons .btn { background: var(--primary); color: var(--primary-ink); border-color: transparent; text-align:center; }
#stripe-buttons .btn:hover { filter: brightness(0.96); }
#stripe-buttons .btn:active { transform: translateY(1px); }

/* Subtle polish */
.hero { background:linear-gradient(180deg,#fff, var(--soft)); }
.card h3 { margin-top:0; }
.card strong { display:block; margin-bottom:.25rem; }
.small { font-size:13px; color:#888; }
footer { border-top:1px solid #eee; margin-top:1rem; padding:1rem 0; color:#666; font-size:14px; }

/* Header accent and layout */
.accent-bar { height:4px; background:linear-gradient(90deg,#6ee7f9,#8b5cf6,#ef4444); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.header-actions { display:flex; align-items:center; gap:.5rem; }
.btn-ghost { background:transparent; }

/* Brand icons (simple) */
.icon { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; font-size:13px; font-weight:800; margin-right:.4rem; color:#fff; }
.icon.venmo { background:#3D95CE; }
.icon.cash  { background:#00C244; }
.icon.stripe{ background:#635BFF; }


/* Dark theme variables */
[data-theme='dark'] { --bg:#0f1115; --text:#e5e7eb; --muted:#a3aab8; --surface:#151922; --border:#2a3242; --soft:#0f1219; }