:root {
  --bg: #07111f;
  --bg-dark: #020817;
  --panel: #101d31;
  --panel-2: #10243b;
  --border: #243449;
  --text: #ffffff;
  --muted: #cbd5e1;
  --soft: #94a3b8;
  --blue: #38bdf8;
  --gold: #f4a261;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
a { color: inherit; }
img { max-width:100%; display:block; }
header { padding:18px 8%; display:flex; justify-content:space-between; align-items:center; background:rgba(7,17,31,.96); position:sticky; top:0; z-index:10; border-bottom:1px solid #1e293b; backdrop-filter: blur(10px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand img { width:44px; height:44px; object-fit:contain; border-radius:10px; background:#fff; padding:4px; }
.logoText { font-size:22px; font-weight:900; }
nav a { margin-left:20px; color:var(--muted); text-decoration:none; font-weight:800; font-size:14px; }
.hero { padding:86px 8% 70px; background:radial-gradient(circle at top right,#164e63 0,#07111f 42%,#020817 100%); }
.heroInner { display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center; }
.eyebrow { color:var(--blue); font-weight:900; text-transform:uppercase; letter-spacing:1px; font-size:14px; }
h1 { font-size:58px; line-height:1.04; max-width:940px; margin:16px 0; letter-spacing:-1px; }
h2 { font-size:38px; line-height:1.1; margin:12px 0; }
h3 { margin-top:0; }
p { color:var(--muted); font-size:18px; }
.hero p { font-size:21px; max-width:780px; }
.button { display:inline-block; margin:18px 10px 0 0; padding:14px 22px; border-radius:12px; background:var(--blue); color:#020617; font-weight:900; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.button.secondary { background:transparent; color:#fff; border:1px solid #475569; }
.button.gold { background:var(--gold); color:#020617; }
.button.block { display:block; text-align:center; width:100%; }
.heroPanel { background:#0f1d31; border:1px solid var(--border); border-radius:24px; padding:18px; box-shadow:0 18px 50px rgba(0,0,0,.35); }
.heroPanel img { border-radius:18px; width:100%; background:#fff; }
.panelCaption { margin-top:12px; color:#e2e8f0; font-weight:800; font-size:15px; }
section { padding:65px 8%; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:30px; }
.card { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:26px; }
.card h3 { color:var(--blue); font-size:22px; }
.dark { background:var(--bg-dark); }
.demoStrip, .blueStrip { background:var(--panel-2); }
.price { font-size:34px; font-weight:900; color:#fff; }
.screens { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; margin-top:28px; }
.screenShot { background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:12px; }
.screenShot img { border-radius:14px; width:100%; height:auto; }
.demo { background:var(--panel-2); text-align:center; }
.demoActions { margin-top:25px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.inlineNote { max-width:820px; margin:18px auto 0; color:var(--muted); }
.center { text-align:center; }
.narrow { max-width:920px; margin:0 auto; }
.steps { counter-reset: step; display:grid; gap:16px; margin-top:26px; }
.step { background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:20px; }
.step strong { color:#fff; }
.badge { display:inline-block; padding:6px 10px; border:1px solid #475569; border-radius:999px; color:#e2e8f0; font-weight:900; font-size:12px; margin:4px 6px 4px 0; }
footer { background:var(--bg-dark); padding:28px 8%; color:var(--soft); font-size:14px; }
.modalOverlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:1000; padding:24px; overflow:auto; }
.modalOverlay.active { display:block; }
.modalBox { width:min(980px,100%); margin:30px auto; background:var(--bg); border:1px solid #334155; border-radius:22px; overflow:hidden; box-shadow:0 22px 70px rgba(0,0,0,.55); }
.modalHeader { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 20px; border-bottom:1px solid var(--border); background:var(--panel); }
.modalHeader h3 { margin:0; color:#fff; font-size:22px; }
.modalClose { background:#17263d; color:#fff; border:1px solid #334155; border-radius:12px; padding:10px 13px; font-weight:900; cursor:pointer; }
.modalBody { padding:0; background:#fff; }
.formFrame { width:100%; height:82vh; min-height:720px; border:0; display:block; }
.calendarButtonWrap { padding:26px; background:var(--bg); text-align:center; }
.smallDirectLink { display:block; margin-top:16px; color:var(--blue); font-weight:800; }
details { max-width:980px; margin:24px auto 0; background:var(--panel); border:1px solid var(--border); border-radius:18px; overflow:hidden; text-align:left; }
summary { cursor:pointer; padding:18px 22px; font-weight:900; color:#fff; }
.detailsBody { padding:0 22px 22px; color:var(--muted); }
@media(max-width:800px){ .heroInner { grid-template-columns:1fr; } h1 { font-size:40px; } h2 { font-size:30px; } nav { display:none; } section { padding:48px 6%; } header { padding:14px 6%; } .formFrame { min-height:720px; height:80vh; } }


/* PuttParty paid/demo onboarding additions */
.pathNotice {
  margin: 22px auto 0;
  padding: 14px 18px;
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 14px;
  background: rgba(56,189,248,.08);
  max-width: 760px;
  font-weight: 700;
}
.progressList{display:grid;gap:10px;margin-top:16px}
.progressItem{border:1px solid rgba(15,61,46,.18);border-radius:12px;padding:12px 14px;background:#f8fafc;font-weight:700}
.progressItem::before{content:"□";margin-right:10px}
.progressItem.complete{background:#ecfdf5;border-color:rgba(15,61,46,.28)}
.progressItem.complete::before{content:"✓"}
.progressItem.active{background:#fff7ed;border-color:rgba(200,162,74,.42)}
.progressItem.active::before{content:"→"}
.cleanList{text-align:left;line-height:1.8;margin:16px auto;max-width:760px}
.cleanList li{margin-bottom:6px}