/* Offerant - premium theme: white canvas, deep Babson green, jade accents */
:root {
  /* palette sampled from the hero photo: charcoal room, slate desks, dusty-mauve towers, haze sky, glass */
  --bg:#ffffff; --canvas:#f7f3f1; --tint:#f2ecea; --card:#ffffff;
  --ink:#141c1b; --ink2:#2c3534; --muted:#6a6f6d; --faint:#9a9796;
  --line:#e7e0dd; --line2:#d9cfcc;
  --brand:#2f3a3a; --brand2:#465252; --jade:#9b7f82; --mint:#e3cfcf; --brand-soft:#efe9e7; --brand-deep:#131d1c;
  --forest:#0e1514; --gold:#8c6d70; --gold-soft:#f4ecec; --sun:#c9a9ab; --glass:#a0a5b0; --haze:#f9f3f0; --mauve:#d7c6c5;
  --blue:#2f3a3a; --blue-soft:#efe9e7; --teal:#4f6466; --teal-soft:#e7eceb;
  --violet:#5d6372; --violet-soft:#eceef2; --green:#3f6a58; --green-soft:#e6efea;
  --amber:#8a6420; --amber-soft:#f7efdf; --red:#b0302a; --red-soft:#f8e9e7; --pink:#8c6d70; --pink-soft:#f4ecec;
  --shadow-sm:0 1px 2px rgba(14,21,20,.06);
  --shadow:0 1px 2px rgba(14,21,20,.05), 0 4px 14px rgba(14,21,20,.05), 0 18px 40px -18px rgba(14,21,20,.12);
  --shadow-lg:0 2px 4px rgba(14,21,20,.06), 0 24px 60px -20px rgba(14,21,20,.28);
  --radius:14px; --wrap:1240px;
  --display:"Space Grotesk", "Segoe UI", sans-serif;
  --sans:"Manrope", "Inter", "Segoe UI", -apple-system, Roboto, sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body { margin:0; font:15px/1.6 var(--sans);  background:var(--canvas); color:var(--ink);
  min-height:100vh; display:flex; flex-direction:column; }
::selection { background:#e3cfcf; color:var(--forest); }
a { color:var(--brand); text-decoration:none; transition:color .15s; } a:hover { color:var(--brand2); text-decoration:underline; text-underline-offset:3px; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 28px; width:100%; }
.num, .kpi .n, .hero-stats b, .step .big, .score, td { font-variant-numeric:tabular-nums; }

/* ---------- top navigation ---------- */
.site-nav { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.82); backdrop-filter:saturate(1.8) blur(16px);
  -webkit-backdrop-filter:saturate(1.8) blur(16px); border-bottom:1px solid rgba(14,21,20,.07); }
.site-nav::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand-deep), var(--brand2) 30%, var(--jade) 65%, var(--glass)); }
.site-nav .wrap { display:flex; align-items:center; gap:26px; height:68px; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; font-size:18px; color:var(--ink); letter-spacing:-.4px; }
.brand:hover { text-decoration:none; color:var(--ink); }
.brand .logo { width:34px; height:34px; display:block; flex:none; object-fit:contain; }
.brand .tag { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  background:var(--gold-soft); border:1px solid #e5d3d4; padding:1px 7px; border-radius:999px; }
.menu { display:flex; align-items:center; gap:2px; flex:1; }
.menu > a, .menu .dd > button { position:relative; color:var(--ink2); font-weight:550; font-size:14px; padding:8px 12px; border-radius:9px;
  background:none; border:0; box-shadow:none; cursor:pointer; display:flex; align-items:center; gap:6px; font-family:inherit; }
.menu > a:hover, .menu .dd > button:hover { background:rgba(47,58,58,.06); color:var(--brand); text-decoration:none; filter:none; transform:none; }
.menu > a.active, .menu .dd.active > button { color:var(--brand); }
.menu > a.active::after, .menu .dd.active > button::after { content:""; position:absolute; left:12px; right:12px; bottom:-15px; height:2px;
  border-radius:2px; background:var(--brand); }
.menu .dd > button .chev { opacity:.5; font-size:10px; transition:transform .2s; }
.menu .dd:hover > button .chev { transform:rotate(180deg); }
.menu .count, .dd-panel .count { background:var(--brand); color:#fff; font-size:10.5px; font-weight:700; border-radius:999px; padding:1px 7px;
  min-width:20px; text-align:center; line-height:1.5; }
.dd { position:relative; }
.dd-panel { position:absolute; top:calc(100% + 10px); left:-8px; min-width:320px; background:#fff; border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s, transform .16s, visibility .16s; }
.dd-panel::before { content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.dd:hover .dd-panel, .dd:focus-within .dd-panel { opacity:1; visibility:visible; transform:none; }
.dd-panel a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; color:var(--ink);
  font-weight:600; font-size:14px; }
.dd-panel a small { color:var(--muted); font-weight:400; display:block; font-size:12.5px; margin-top:1px; }
.dd-panel a:hover { background:var(--tint); text-decoration:none; color:var(--brand); }
.nav-right { display:flex; align-items:center; gap:10px; }
.status { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; white-space:nowrap; padding:5px 11px;
  border:1px solid var(--line); border-radius:999px; background:#fff; max-width:260px; overflow:hidden; text-overflow:ellipsis; }
.status .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 0 rgba(155,127,130,.6); animation:pulse 2s infinite; }
.status .dot.idle { background:#bdb6b4; animation:none; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(155,127,130,.55);} 70% { box-shadow:0 0 0 7px rgba(155,127,130,0);} 100% { box-shadow:0 0 0 0 rgba(155,127,130,0);} }
.burger { display:none; background:#fff; border:1px solid var(--line); color:var(--ink); box-shadow:none; padding:6px 10px; }
.mode-pill { font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:5px 11px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.mode-live { background:var(--green-soft); color:var(--green); border-color:#d3e1da; }
.mode-dry { background:var(--amber-soft); color:var(--amber); border-color:#f2dfa8; }
.mode-paused { background:var(--red-soft); color:var(--red); border-color:#f6c9c4; }
.btn.unlock { background:linear-gradient(180deg, #efe0e0, #c9a9ab); color:#1c2222; box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px -4px rgba(140,109,112,.6); }
.btn.unlock:hover { background:linear-gradient(180deg, #f6eaea, #d2b6b8); color:#1c2222; }

/* ---------- page header + hero ---------- */
.page-head { position:relative; overflow:hidden; background:#fff; border-bottom:1px solid var(--line); }
.page-head::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 200px at 100% 0%, rgba(155,127,130,.10), transparent 70%),
             radial-gradient(circle at 1px 1px, rgba(47,58,58,.10) 1px, transparent 0) 0 0 / 22px 22px;
  -webkit-mask-image:linear-gradient(90deg, transparent 30%, #000); mask-image:linear-gradient(90deg, transparent 30%, #000); }
.page-head .wrap { position:relative; padding-top:34px; padding-bottom:28px; }
.page-head h1 { font:600 34px/1.1 var(--display); letter-spacing:-1px; margin:0; color:var(--forest); }
.crumbs { font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--jade); margin-bottom:6px; }
.hero { position:relative; overflow:hidden; color:#fff; isolation:isolate; background-color:#0e1514;
  background-image:linear-gradient(90deg, rgba(10,14,14,.94) 0%, rgba(10,14,14,.78) 38%, rgba(10,14,14,.30) 72%, rgba(10,14,14,.12) 100%),
                   linear-gradient(0deg, rgba(10,14,14,.85) 0%, rgba(10,14,14,0) 45%),
                   url("hero.jpg");
  background-size:cover; background-position:center 62%; }
.hero .wrap { padding-top:96px; padding-bottom:118px; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#e3cfcf; padding:5px 12px 5px 6px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); border-radius:999px; margin-bottom:22px; backdrop-filter:blur(6px); }
.hero .eyebrow b { background:var(--mint); color:var(--forest); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.hero h1 { font:600 64px/1.02 var(--display); letter-spacing:-2.6px; margin:0 0 20px; max-width:820px; color:#fff; }
.hero h1 span { background:linear-gradient(90deg, #f3e6e5, #d7c6c5 45%, #a0a5b0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { font-size:18px; line-height:1.6; color:rgba(240,232,230,.78); max-width:620px; margin:0 0 32px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .btn.light { background:#fff; color:var(--forest); padding:12px 22px; font-size:15px; box-shadow:0 10px 30px -8px rgba(0,0,0,.45); }
.hero .btn.light:hover { background:#f4efed; color:var(--forest); }
.hero .btn.ghost { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); color:#fff; padding:11px 20px; font-size:15px; box-shadow:none; }
.hero .btn.ghost:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); color:#fff; }
.hero-stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; margin-top:52px; max-width:900px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); border-radius:18px; overflow:hidden; backdrop-filter:blur(10px); }
.hero-stats div { background:rgba(14,21,20,.55); padding:20px 22px; }
.hero-stats b { display:block; font:600 36px/1 var(--display); letter-spacing:-1.2px; color:#fff; margin-bottom:6px; }
.hero-stats span { font-size:12.5px; color:rgba(232,222,220,.7); font-weight:500; }
.lift { margin-top:-44px; position:relative; z-index:2; }
.section-title { font:600 22px/1.2 var(--display); letter-spacing:-.6px; margin:44px 0 16px; color:var(--forest); display:flex; align-items:center; gap:12px; }
.section-title::after { content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line2), transparent); }
.steps { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
.step { position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px 20px; box-shadow:var(--shadow);
  color:var(--ink); display:block; transition:transform .2s, box-shadow .2s, border-color .2s; overflow:hidden; }
.step::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg, var(--brand), var(--jade)); opacity:0; transition:opacity .2s; }
.step:hover { text-decoration:none; border-color:#dcd0ce; transform:translateY(-3px); box-shadow:var(--shadow-lg); color:var(--ink); }
.step:hover::before { opacity:1; }
.step .num { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; font-weight:700; font-size:13px; color:var(--brand);
  background:var(--brand-soft); border:1px solid #e2d8d6; margin-bottom:14px; }
.step b { display:block; margin-bottom:3px; font-size:15px; } .step span { color:var(--muted); font-size:13.5px; }
.step .big { position:absolute; right:20px; top:16px; font:600 32px/1 var(--display); letter-spacing:-1px; color:var(--brand); }

main.content { padding:30px 0 72px; flex:1; }
.site-foot { background:var(--forest); color:rgba(232,222,220,.6); font-size:13px; }
.site-foot .wrap { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding-top:22px; padding-bottom:22px; }
.site-foot b { color:#fff; font-weight:600; } .site-foot a { color:#e3cfcf; }

/* ---------- components ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow); }
.card h2 { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); margin:0 0 16px; display:flex; align-items:center; gap:10px; }
h1 { font-size:22px; margin:0 0 14px; } h3 { font-size:14px; margin:16px 0 6px; }
.grid { display:grid; gap:18px; }
.g4 { grid-template-columns:repeat(4, minmax(0,1fr)); } .g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.g2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.kpi { position:relative; overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); transition:transform .2s, box-shadow .2s; display:block; color:inherit; }
a.kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); text-decoration:none; }
.kpi .ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; margin-bottom:12px; }
.kpi .ico svg { width:18px; height:18px; }
.kpi .n { font:600 30px/1.05 var(--display); letter-spacing:-1px; }
.kpi .l { color:var(--muted); font-size:12.5px; font-weight:500; }
.c-blue { color:var(--blue);} .c-teal { color:var(--teal);} .c-violet { color:var(--violet);} .c-green { color:var(--green);}
.c-amber { color:var(--amber);} .c-pink { color:var(--pink);} .c-red { color:var(--red);}
.kpi .n { color:var(--forest); } .kpi .l { color:var(--muted); }
.bg-blue { background:var(--blue-soft); color:var(--blue);} .bg-teal { background:var(--teal-soft); color:var(--teal);}
.bg-violet { background:var(--violet-soft); color:var(--violet);} .bg-green { background:var(--green-soft); color:var(--green);}
.bg-amber { background:var(--amber-soft); color:var(--amber);} .bg-pink { background:var(--pink-soft); color:var(--pink);}

.badge { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; line-height:1.6; }
.b-blue { background:var(--blue-soft); color:var(--blue); border-color:#e2d8d6;} .b-green { background:var(--green-soft); color:var(--green); border-color:#d6e2dc;}
.b-amber { background:var(--amber-soft); color:var(--amber); border-color:#f1e0ad;} .b-red { background:var(--red-soft); color:var(--red); border-color:#f6cdc8;}
.b-gray { background:#f2edeb; color:var(--muted); border-color:var(--line);} .b-violet { background:var(--violet-soft); color:var(--violet); border-color:#cfe2ea;}
.b-teal { background:var(--teal-soft); color:var(--teal); border-color:#d6e2dc;}
.b-gold { background:var(--gold-soft); color:#8a6a00; border-color:#e5d3d4; }

table { width:100%; border-collapse:separate; border-spacing:0; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:11px; color:var(--faint); font-weight:700; text-transform:uppercase; letter-spacing:.07em; background:#fbf9f8; position:sticky; top:0; }
tr:last-child td { border-bottom:0; }
table tr { transition:background .12s; } table tr:hover td { background:#faf7f6; }
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
.muted { color:var(--muted); } .small { font-size:12.5px; }
form.inline { display:inline; }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=url], input[type=file], textarea, select {
  width:100%; padding:10px 12px; border:1px solid var(--line2); border-radius:10px; font:inherit; color:var(--ink); background:#fff;
  box-shadow:var(--shadow-sm); transition:border .15s, box-shadow .15s; }
input:hover, textarea:hover, select:hover { border-color:#cbbfbc; }
input:focus, textarea:focus, select:focus { outline:none; border-color:var(--jade); box-shadow:0 0 0 4px rgba(155,127,130,.14); }
textarea { min-height:96px; line-height:1.5; }
button, .btn { background:linear-gradient(180deg, var(--brand2), var(--brand)); color:#fff; border:1px solid var(--brand-deep); border-radius:10px;
  padding:9px 16px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(14,21,20,.15), 0 4px 12px -4px rgba(47,58,58,.45);
  transition:transform .12s, box-shadow .15s, background .15s; }
button:hover, .btn:hover { background:linear-gradient(180deg, #3c4848, var(--brand2)); color:#fff; text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(14,21,20,.15), 0 8px 20px -6px rgba(47,58,58,.55); }
button:active, .btn:active { transform:translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline:2px solid var(--jade); outline-offset:2px; }
button.secondary, .btn.secondary { background:#fff; color:var(--ink); border:1px solid var(--line2); box-shadow:var(--shadow-sm); }
button.secondary:hover, .btn.secondary:hover { background:var(--tint); color:var(--brand); border-color:#cbbfbc; }
button.danger { background:#fff; color:var(--red); border:1px solid #f1c7c2; box-shadow:var(--shadow-sm); }
button.danger:hover { background:var(--red-soft); color:var(--red); box-shadow:var(--shadow-sm); }
button.warn { background:linear-gradient(180deg, #e8a317, #c98500); border-color:#a86f00; }
button.success, .btn.success { background:linear-gradient(180deg, #556363, var(--jade)); border-color:#2f3a3a; }
.row { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; } .row > * { flex:1; min-width:220px; }
.flash { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dcd0ce; border-left:4px solid var(--jade);
  padding:12px 16px; border-radius:12px; margin-bottom:16px; font-weight:500; box-shadow:var(--shadow); animation:rise .35s ease-out; }
.flash::before { content:"✓"; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--brand-soft); color:var(--brand); font-weight:800; font-size:12px; flex:none; }
.kv { display:grid; grid-template-columns:220px 1fr; gap:10px 16px; } .kv > div:nth-child(odd) { color:var(--muted); font-size:13.5px; }
pre, .mono { font-family:"JetBrains Mono", ui-monospace, Consolas, monospace; font-size:12px; white-space:pre-wrap; }
.mono { background:#f3eeec; border:1px solid var(--line); border-radius:6px; padding:1px 6px; }
pre.mono, .draft-body.mono { padding:12px; }
ul.actions { margin:0; padding:0; list-style:none; }
ul.actions li a { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; margin-bottom:8px;
  background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:550; font-size:14px; transition:all .15s; }
ul.actions li a:hover { background:var(--tint); border-color:#dcd0ce; text-decoration:none; transform:translateX(3px); color:var(--brand); }
ul.actions li a::before { content:"→"; display:grid; place-items:center; width:24px; height:24px; flex:none; border-radius:7px;
  background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:13px; }
.score { font-weight:700; } .s-hi { color:var(--green);} .s-mid { color:var(--amber);} .s-lo { color:var(--red);}
.scorebar { height:5px; border-radius:999px; background:#ece6e3; overflow:hidden; min-width:60px; margin-top:5px; }
.scorebar > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--mint), var(--brand)); }
.draft-body { white-space:pre-wrap; background:#fbf9f8; border:1px solid var(--line); border-radius:12px; padding:14px 16px; line-height:1.65; }
.chart-box { position:relative; height:250px; }
.tl { list-style:none; margin:0; padding:0; max-height:440px; overflow:auto; }
.tl li { display:flex; gap:14px; padding:10px 4px; border-bottom:1px solid var(--line); }
.tl li:last-child { border-bottom:0; }
.tl .t { font-size:11.5px; color:var(--faint); white-space:nowrap; width:58px; font-variant-numeric:tabular-nums; }
.tl .d { font-size:13px; color:var(--ink2); margin-top:3px; }
.progress { height:8px; border-radius:999px; background:#ece6e3; overflow:hidden; }
.progress > span { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--jade), var(--brand)); transition:width .5s; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.thumb { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s; }
.thumb:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.thumb .shot { height:230px; background:#efe9e7 center top / cover no-repeat; border-bottom:1px solid var(--line); cursor:zoom-in; display:grid; place-items:center; color:var(--muted); }
.thumb .body { padding:14px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.lightbox { position:fixed; inset:0; background:rgba(10,14,14,.86); backdrop-filter:blur(6px); display:none; align-items:flex-start; justify-content:center;
  z-index:60; overflow:auto; padding:30px; cursor:zoom-out; }
.lightbox img { max-width:min(1100px, 96vw); border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.cmp { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cmp img { width:100%; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); cursor:zoom-in; }
.moved-up { color:var(--green); font-weight:700; } .moved-down { color:var(--red); font-weight:700; } .same { color:var(--muted); }
.kw { display:inline-block; background:var(--teal-soft); color:var(--teal); border-radius:6px; padding:0 7px; margin:2px 2px 0 0; font-size:11.5px; font-weight:600; }
.kw.miss { background:var(--red-soft); color:var(--red); }
.empty { text-align:center; padding:48px 20px; color:var(--muted); }

/* card accents */
.card h2::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--jade); box-shadow:0 0 0 3px var(--brand-soft); display:inline-block; flex:none; }
.kpi .ico, .bg-blue { background:var(--brand-soft); color:var(--brand); }

/* entrance motion */
@keyframes rise { from { transform:translateY(8px); } to { transform:none; } }
main.content .card, main.content .step, main.content .kpi, main.content .thumb { animation:rise .45s cubic-bezier(.2,.7,.2,1) both; }
main.content .grid > :nth-child(2), .steps > :nth-child(2) { animation-delay:.04s; }
main.content .grid > :nth-child(3), .steps > :nth-child(3) { animation-delay:.08s; }
main.content .grid > :nth-child(4), .steps > :nth-child(4) { animation-delay:.12s; }
.hero .wrap > * { animation:rise .6s cubic-bezier(.2,.7,.2,1) both; }
.hero .wrap > :nth-child(2) { animation-delay:.05s; } .hero .wrap > :nth-child(3) { animation-delay:.1s; }
.hero .wrap > :nth-child(4) { animation-delay:.15s; } .hero .wrap > :nth-child(5) { animation-delay:.2s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* setup wizard */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid var(--line2); border-radius:999px;
  background:#fff; cursor:pointer; font-weight:550; font-size:14px; transition:all .15s; box-shadow:var(--shadow-sm); }
.chip:hover { border-color:#cbbfbc; }
.chip:has(input:checked) { border-color:var(--brand); background:var(--brand-soft); color:var(--brand); box-shadow:0 0 0 3px rgba(47,58,58,.08); }
.chip input { accent-color:var(--brand); }
.wizard .card h2 { font-size:13px; }
.wizard label.small { display:block; margin:10px 0 5px; font-weight:600; color:var(--ink2); }

/* pricing / license */
.price-card { position:relative; overflow:hidden; color:#fff; border:0;
  background:linear-gradient(160deg, rgba(10,14,14,.9), rgba(10,14,14,.72)), url("hero.jpg") 70% 60% / cover; }
.price-card h2 { color:#e3cfcf; } .price-card h2::before { background:var(--mint); box-shadow:0 0 0 3px rgba(227,207,207,.2); }
.price-card .price { font:600 68px/1 var(--display); letter-spacing:-3px; margin:6px 0 4px; }
.price-card .price small { font:500 15px var(--sans); color:rgba(232,222,220,.7); letter-spacing:0; margin-left:6px; }
.price-card p, .price-card li { color:rgba(240,232,230,.82); }
.price-card ul { list-style:none; padding:0; margin:18px 0 24px; }
.price-card li { display:flex; gap:10px; padding:6px 0; font-size:14.5px; }
.price-card li::before { content:"✓"; flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:rgba(227,207,207,.18); color:var(--mint); font-size:11px; font-weight:800; }
.price-card .btn.buy { background:#fff; color:var(--forest); border:0; padding:14px 26px; font-size:16px; width:100%; justify-content:center;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5); }
.price-card .btn.buy:hover { background:#f4efed; color:var(--forest); }
.price-card .fine { font-size:12.5px; color:rgba(232,222,220,.6); text-align:center; margin-top:12px; }
.trust { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin-top:14px; }
.trust span::before { content:"●"; color:var(--jade); margin-right:6px; font-size:9px; vertical-align:2px; }
.conn { display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.conn:last-child { border-bottom:0; }
.conn .logo { width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-weight:800; color:var(--brand);
  background:var(--brand-soft); border:1px solid #e2d8d6; }
.conn .grow { flex:1; min-width:0; }

@media (max-width:1100px) {
  .g4, .steps, .hero-stats { grid-template-columns:repeat(2, minmax(0,1fr)); } .g3, .g2, .cmp { grid-template-columns:1fr; }
  .status { display:none; } .hero h1 { font-size:56px; }
}
@media (max-width:900px) {
  .burger { display:block; }
  .menu { display:none; position:absolute; top:68px; left:0; right:0; background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; padding:10px 16px; box-shadow:var(--shadow-lg); }
  .site-nav.open .menu { display:flex; }
  .menu > a.active::after, .menu .dd.active > button::after { display:none; }
  .dd-panel { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 0 12px; }
  .hero h1 { font-size:44px; } .hero .wrap { padding-top:48px; padding-bottom:80px; } .mode-pill { display:none; }
  .page-head h1 { font-size:32px; }
}
@media (max-width:600px) {
  .wrap { padding:0 16px; } .g4, .steps, .hero-stats { grid-template-columns:1fr 1fr; } .kv { grid-template-columns:1fr; }
  .hero h1 { font-size:38px; } .hero-stats b { font-size:32px; }
  /* header fits a phone: short Go live label, tighter controls */
  .hide-sm { display:none; } .nav-right { gap:6px; } .nav-right .btn, .nav-right button { padding:6px 10px !important; font-size:13px; }
}
@media (max-width:420px) { .brand-name { display:none; } }

/* plan cards */
.plan-card { position:relative; display:flex; flex-direction:column; margin-bottom:18px; }
.plan-card ul { flex:1; }
.plan-card.current { box-shadow:0 0 0 2px var(--jade), var(--shadow); }
.plan-price { font:600 56px/1 var(--display); letter-spacing:-2.4px; color:var(--forest); margin:6px 0 10px; }
.plan-price small, .price-card .price small { font:500 15px var(--sans); letter-spacing:0; color:var(--muted); margin-left:4px; }
.price-card .price small { color:rgba(232,222,220,.7); }
ul.ticks { list-style:none; padding:0; margin:14px 0 22px; }
ul.ticks li { display:flex; gap:10px; padding:6px 0; font-size:14.5px; color:var(--ink2); }
ul.ticks li::before { content:"✓"; flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:2px; border-radius:50%;
  background:var(--brand-soft); color:var(--brand); font-size:11px; font-weight:800; }
.btn.block { display:flex; width:100%; justify-content:center; padding:13px 20px; font-size:15px; }
.btn[aria-disabled="true"] { opacity:.6; cursor:default; }
.plan-pill { font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; background:var(--brand-soft);
  color:var(--brand); border:1px solid var(--line2); }
.plan-pill:hover { text-decoration:none; background:var(--tint); }

/* Gold / Platinum tiers */
.tier-badge { position:absolute; right:22px; top:20px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 11px; border-radius:999px; }
.tier-badge.gold { color:#5a4206; background:linear-gradient(135deg, #f7e7b4, #d9b45a 55%, #b8902e); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.tier-badge.platinum { color:#1d2224; background:linear-gradient(135deg, #ffffff, #dfe3e6 45%, #a9b0b5); box-shadow:inset 0 1px 0 #fff; }
.gold-card { border:1px solid #e6d3a1; background:linear-gradient(180deg, #fffaf0 0%, #ffffff 40%); }
.gold-card .plan-price { background:linear-gradient(90deg, #8a6514, #c49a35 60%, #8a6514); -webkit-background-clip:text; background-clip:text; color:transparent; }
.gold-card ul.ticks li::before { background:#f6ebcb; color:#8a6514; }
.gold-card .btn.secondary { border-color:#d9bf7a; color:#6e5110; }
.gold-card .btn.secondary:hover { background:#fbf3df; color:#5a4206; }
.platinum-card .price { background:linear-gradient(90deg, #ffffff, #d9dee1 45%, #9ea6ab 75%, #ffffff); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.platinum-card li::before { background:rgba(223,227,230,.18); color:#e8ecee; }
.plan-pill.gold { color:#6e5110; background:#fbf3df; border-color:#e6d3a1; }
.plan-pill.platinum { color:#1d2224; background:linear-gradient(135deg, #ffffff, #e3e7ea); border-color:#c9cfd3; }

.foot-brand { display:inline-flex; align-items:center; gap:8px; }
.foot-brand img { object-fit:contain; }

/* email connect steps + public site */
.steps-box { background:var(--tint); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:12px 0; }
.steps-box ol { margin:6px 0; padding-left:18px; line-height:1.8; }
details.card summary { cursor:pointer; }
.public .public-menu { justify-content:center; }
.auth-card { max-width:480px; margin:40px auto; padding:30px 32px; }
.auth-title { font:600 30px/1.15 var(--display); letter-spacing:-1px; margin:0 0 12px; color:var(--forest); }
.auth-card label.small { display:block; margin:12px 0 5px; font-weight:600; color:var(--ink2); }
.auth-error { background:var(--red-soft); color:var(--red); border:1px solid #f1c7c2; border-radius:10px; padding:10px 12px; margin:10px 0; font-size:14px; }
.tos-check { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--ink2); line-height:1.5; margin-top:12px; }
.tos-check input { margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--brand); }
button.block { width:100%; justify-content:center; padding:12px 18px; font-size:15px; }
.legal { max-width:820px; margin:10px auto 0; background:#fff; border:1px solid var(--line); border-radius:16px; padding:36px 42px; line-height:1.7; }
.legal h1 { font:600 38px/1.1 var(--display); letter-spacing:-1.2px; margin:0 0 6px; color:var(--forest); }
.legal h2 { font:600 19px/1.3 var(--display); margin:28px 0 8px; color:var(--forest); }
.legal-meta { color:var(--muted); font-size:13px; margin:0 0 18px; }
.legal-callout { background:var(--tint); border-left:4px solid var(--brand); padding:14px 16px; border-radius:0 10px 10px 0; }
.legal li { margin:6px 0; }
@media (max-width:600px) { .legal { padding:24px 18px; } .auth-card { padding:22px 18px; } }

/* Sign in with Google (Google's branding: white button, dark text, the G logo) */
.btn.google-btn { display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1f1f1f;
  border:1px solid #747775; box-shadow:none; font-weight:600; }
.btn.google-btn:hover { background:#f6f6f6; color:#1f1f1f; }
.or-divider { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted); font-size:12.5px; }
.or-divider::before, .or-divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* home: flash message sits above the step cards instead of under them */
.has-flash .lift { margin-top:18px; }
.g1 { display:grid; grid-template-columns:1fr; gap:16px; }
/* setup guide */
.levels .level { padding:18px 18px 12px; }
.levels .level.done { box-shadow:0 0 0 2px var(--jade), var(--shadow); }
.level-head { display:flex; align-items:center; gap:10px; }
.level-head .num { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--forest); color:#fff; font-weight:700; font-size:13px; flex:none; }
.level-head b { display:block; font-size:15px; line-height:1.2; }
.checks { list-style:none; margin:0; padding:0; }
.checks li { border-top:1px solid var(--line); }
.checks li a { display:flex; gap:10px; padding:9px 0; color:var(--ink); text-decoration:none; align-items:flex-start; }
.checks li a:hover b { text-decoration:underline; }
.checks .tick { flex:none; width:20px; height:20px; border-radius:50%; border:1.5px solid #cfc3c1; display:grid; place-items:center; font-size:11px; font-weight:800; margin-top:2px; color:#fff; }
.checks li.ok .tick { background:var(--jade); border-color:var(--jade); }
.checks li b { display:block; font-size:13.5px; font-weight:600; }
.checks li.ok b { color:var(--muted); font-weight:500; }
.checks li small { display:block; font-size:12px; color:var(--muted); line-height:1.35; }
@media (max-width:1100px) { .levels { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px) { .levels { grid-template-columns:1fr; } }

/* account menu (top right) */
.dd.acct > button { display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); color:var(--ink); padding:4px 8px 4px 4px; border-radius:999px; box-shadow:none; }
.dd.acct > button:hover { background:#f6f3f2; color:var(--ink); }
.avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--forest); color:#fff; font-weight:700; font-size:13px; }
.acct-panel { left:auto; right:0; min-width:290px; }
.acct-who { padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.acct-who b { display:block; font-size:14px; word-break:break-all; }
.acct-who small { color:var(--muted); font-size:12.5px; }
.acct-out { margin:8px 4px 2px; }
.acct-out button { width:100%; }
.tos-links a, .tos-check a { color:var(--brand); text-decoration:underline; font-weight:600; }
.status-card { border-left:4px solid var(--jade); }
.status-line { font-size:15px; }
.checks-inline { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--muted); }
.checks-inline .ok { color:var(--forest); }
.btn.block, button.block { display:block; width:100%; }
details.small summary { cursor:pointer; color:var(--muted); margin:10px 0 6px; }