:root { --ink:#0d1b2a; --ink-2:#1b2b45; --teal:#19c3b1; --teal-dark:#0e8f82; --paper:#f6f8fb; --line:#dde3ec; --dim:#5d6b82; --err:#c0392b; --ok:#1f9d6b; }
* { box-sizing:border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,sans-serif; background:var(--paper); color:#14213d; }
header { background:linear-gradient(160deg,var(--ink),var(--ink-2)); color:#fff; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; }
header a { color:#cfe; text-decoration:none; font-size:14px; }
main { max-width:720px; margin:28px auto; padding:0 20px 40px; }
h1 { font-size:24px; margin:0 0 6px; } h2 { font-size:16px; margin:26px 0 8px; } .sub { color:var(--dim); margin:0 0 18px; }
.card { background:#fff; border-radius:12px; padding:20px 22px; box-shadow:0 1px 3px rgba(13,27,42,.08); }
label { display:block; font-size:13px; font-weight:600; margin:12px 0 4px; }
input, select, textarea { width:100%; padding:9px 11px; border:1.5px solid var(--line); border-radius:8px; font:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:560px) { .row { grid-template-columns:1fr; } }
.hint { font-size:12px; color:var(--dim); margin-top:3px; }
button { margin-top:20px; background:var(--teal); border:0; color:#04332e; font-weight:700; padding:11px 20px; border-radius:10px; cursor:pointer; font-size:15px; }
button:disabled { opacity:.6; cursor:default; }
.msg { margin-top:14px; font-size:14px; min-height:20px; } .msg.err { color:var(--err); } .msg.ok { color:var(--ok); }

/* ---- Step indicator (both steps) ---- */
.steps { list-style:none; display:flex; gap:22px; padding:0; margin:0 0 18px; font-size:13px; font-weight:600; color:var(--dim); }
.steps li.on { color:var(--teal-dark); }
.steps li.done a { color:var(--dim); text-decoration:none; } .steps li.done a:hover { color:var(--teal-dark); text-decoration:underline; }

/* ---- Step 1: plan cards ---- */
.step-plans { max-width:1440px; margin:28px auto; padding:0 24px 40px; }
.step-plans > h1, .step-plans > .sub { text-align:left; }
.toggles { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.price-toggle { display:inline-flex; background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:4px; margin:4px 0 22px; }
.price-toggle button { margin:0; background:none; color:var(--dim); font-size:13px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:9px 18px; border-radius:7px; }
.price-toggle button.on { background:var(--ink); color:#fff; }
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; align-items:stretch; }
.plan-card { position:relative; background:#fff; border:1.5px solid var(--line); border-radius:16px; padding:24px 22px 22px; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(13,27,42,.06); }
.plan-card.popular { border:2px solid var(--teal); box-shadow:0 8px 24px rgba(25,195,177,.16); }
.plan-card .badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--teal); color:#04332e; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.plan-card h3 { margin:0 0 6px; font-size:20px; }
.plan-card.popular h3 { color:var(--teal-dark); }
.plan-card .tag { margin:0; color:var(--dim); font-size:14px; line-height:1.45; min-height:42px; }
.plan-card .price { display:flex; align-items:flex-end; gap:8px; margin:20px 0 18px; min-height:52px; }
.plan-card .amt { font-size:40px; font-weight:800; letter-spacing:-1px; line-height:1; color:var(--ink); }
.plan-card .amt.talk { font-size:30px; letter-spacing:-.5px; }
.plan-card .per { font-size:12px; line-height:1.3; color:var(--dim); padding-bottom:3px; }
.plan-card .choose { display:block; width:100%; margin:0; text-align:center; text-decoration:none; background:var(--teal); color:#04332e; font-weight:700; font-size:15px; padding:11px 16px; border-radius:999px; border:0; cursor:pointer; }
.plan-card .choose:hover { filter:brightness(1.05); }
.plan-card .choose.ghost { background:#fff; color:var(--teal-dark); border:1.5px solid var(--teal); }
.plan-card .choose.off { opacity:.5; cursor:default; }

.plan-card .incl { font-weight:700; font-size:14px; margin:20px 0 8px; padding-top:18px; border-top:1px solid var(--line); }
.plan-card ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.plan-card li { display:flex; gap:10px; align-items:flex-start; font-size:14px; line-height:1.4; }
.plan-card li svg { width:18px; height:18px; flex:none; margin-top:1px; }
.plan-card li.yes svg { color:var(--ok); }
.plan-card li.no { color:#8a97ab; } .plan-card li.no svg { color:#a9b4c4; }
.extras-box { margin-top:26px; background:#fff; border-radius:12px; padding:16px 22px; box-shadow:0 1px 3px rgba(13,27,42,.06); }
.extras-box h2 { margin:0 0 8px; font-size:15px; }
.extras-box ul { margin:0 0 8px; padding-left:18px; columns:2; column-gap:32px; font-size:14px; line-height:1.8; }
@media (max-width:700px) { .extras-box ul { columns:1; } }

/* ---- Step 2: the chosen plan at the top of the form ---- */
.chosen { border:1.5px solid var(--teal); background:#eefaf8; border-radius:10px; padding:12px 14px; }
.chosen-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.chosen-label { display:block; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--teal-dark); }
.chosen-head b { font-size:18px; margin-right:10px; }
.chosen-price { font-size:13.5px; color:#14213d; }
.chosen-head a { font-size:13.5px; font-weight:600; color:var(--teal-dark); white-space:nowrap; }
.chosen .hint { margin-top:4px; }
.check { display:flex; gap:9px; align-items:flex-start; font-weight:400; font-size:14px; margin:10px 0 0; }
.check input { width:auto; margin-top:4px; }
.check[hidden] { display:none; }

/* ---- Plan and billing summary (what the person registering confirms they have read) ---- */
.bill-summary { border:1.5px solid var(--line); border-radius:10px; background:#fbfcfe; padding:14px 16px; margin-top:8px; font-size:13.5px; line-height:1.5; }
.bill-summary .bs-title { font-weight:700; font-size:15px; margin:0 0 4px; color:var(--ink); }
.bill-summary h3 { font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--teal-dark); margin:14px 0 4px; }
.bill-summary ul { margin:0; padding-left:18px; }
.bill-summary li { margin:0 0 5px; }
.bill-summary .msg { margin:0; }
.terms-box { background:#f3f6fa; border:1px solid var(--line); border-radius:8px; padding:8px 14px 4px; font-size:13.5px; margin:6px 0; }
.terms-box ul { margin:6px 0; padding-left:20px; }
.legal-foot { margin:0 auto 24px; font-size:12px; color:var(--dim); text-align:center; }
[hidden] { display:none !important; }

/* ---- Former inline styles (moved out of the HTML) ----
   Each class name is doubled (.u-x.u-x) so it wins over general rules, exactly as the old inline style did. */
.u-margin-top-0.u-margin-top-0 {
  margin-top: 0;
}
.u-margin-0-0-4px.u-margin-0-0-4px {
  margin: 0 0 4px;
}/* demo notice above the form */
.reg-demo { max-width:720px; margin:28px auto 0; padding:0 20px; }
html.sg-demo-mode main#stepDetails { margin-top:0; }
/* Five plans side by side on a wide screen: slightly smaller prices so they fit. */
@media (min-width:1300px) { .plan-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); } .plan-card .amt { font-size:32px; } .plan-card .per { white-space:nowrap; } .plan-card { padding:22px 18px 20px; } }
/* The currency and price-type switches sit right under the heading; the price note follows them. */
.step-plans .toggles .price-toggle { margin:8px 0 22px; }

/* ---- Contact us dialog ---- */
.contact-dlg { width:min(560px, calc(100vw - 32px)); border:0; border-radius:14px; padding:0; box-shadow:0 20px 60px rgba(13,27,42,.3); color:#14213d; }
.contact-dlg::backdrop { background:rgba(13,27,42,.45); }
.contact-dlg form, .contact-done { padding:4px 22px 20px; }
.contact-head { display:flex; justify-content:space-between; align-items:center; padding:16px 22px 0; }
.contact-head h2 { margin:0; font-size:19px; }
.contact-dlg .x { margin:0; background:none; color:var(--dim); font-size:26px; line-height:1; padding:2px 8px; font-weight:400; }
.contact-dlg .x:hover { color:var(--ink); }
.contact-dlg label { display:block; font-weight:600; font-size:13.5px; margin:12px 0 4px; }
.contact-dlg .opt { font-weight:400; color:var(--dim); }
.contact-dlg textarea { resize:vertical; min-height:110px; }
.contact-dlg .hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-done p { font-size:15px; line-height:1.5; margin:14px 0 0; }
button.choose { font-family:inherit; }

/* "How billing works": a clear button beside the price switches, so people see it before they compare plans. */
.billing-link { margin: 4px 0 22px auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px;
  background: #e6f6f3; border: 1.5px solid var(--teal); color: var(--teal-dark); text-decoration: none; line-height: 1.2; }
.billing-link:hover { background: #d3f0ea; }
.billing-link b { display: block; font-size: 14px; color: #0b5e56; }
.billing-link small { display: block; font-size: 12px; color: var(--dim); }
.billing-link svg { flex: none; }
@media (max-width: 700px) { .billing-link { margin-left: 0; } }