:root { color-scheme:light; --ink:#17262c; --soft:#4f646b; --muted:#687a81; --line:#d4dfe2; --paper:#f2f5f6; --white:#fff; --graphite:#172126; --cyan:#14bfd0; --teal:#176e78; --sans:"IBM Plex Sans",sans-serif; --mono:"IBM Plex Mono",monospace; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.58 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-underline-offset:3px; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #df8b39; outline-offset:3px; }
::selection { background:#b8edf0; color:#15353a; }
.signup-header { display:flex; min-height:75px; align-items:center; justify-content:space-between; gap:20px; padding:12px clamp(20px,5vw,74px); background:var(--graphite); color:#f6f8f9; }
.signup-header > a:first-child { display:block; width:190px; }
.signup-header img { display:block; width:100%; height:auto; }
.signup-header > a:last-child { color:#e2e9eb; font-size:13px; }
.signup-main { display:grid; width:min(1180px,100%); grid-template-columns:minmax(0,1fr) minmax(360px,.82fr); align-items:start; gap:clamp(42px,8vw,112px); margin:0 auto; padding:74px 28px 92px; }
.signup-copy { padding-top:17px; }
.eyebrow { margin:0 0 13px; color:#52727c; font:500 12px/1.35 var(--mono); letter-spacing:.09em; }
h1,h2,p { margin-top:0; }
h1 { max-width:11ch; margin-bottom:20px; color:#16262c; font-size:clamp(42px,5.6vw,67px); font-weight:600; letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
.signup-copy > p:not(.eyebrow) { max-width:58ch; color:var(--soft); font-size:17px; }
.signup-price { display:grid; gap:3px; margin:32px 0 28px; padding:18px 19px; border:1px solid var(--line); background:#fff; }
.signup-price span { color:#52666d; font-size:13px; }
.signup-price strong { color:#1a3138; font:500 26px var(--mono); }
.signup-price small { color:#5d6f76; font-size:12px; }
.signup-steps { display:grid; gap:16px; margin:0; padding:0; list-style:none; }
.signup-steps li { display:flex; align-items:flex-start; gap:12px; }
.signup-steps li > span { display:grid; width:26px; height:26px; flex:none; place-items:center; border:1px solid #a8c8cc; border-radius:50%; color:#286a72; font:12px var(--mono); }
.signup-steps strong,.signup-steps small { display:block; }
.signup-steps strong { color:#283d43; font-size:14px; }
.signup-steps small { color:#62747a; font-size:13px; }
.signup-panel { padding:30px; border:1px solid var(--line); background:var(--white); }
.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:22px; }
.panel-heading h2 { margin:0 0 5px; font-size:24px; font-weight:600; letter-spacing:-.025em; }
.panel-heading p { margin:0; color:#5c6e74; font-size:13px; }
.panel-lock { padding:6px 8px; border:1px solid #c7d9d9; color:#296c70; font:11px var(--mono); }
form { display:grid; gap:9px; }
label { margin-top:4px; color:#344a50; font-size:13px; font-weight:600; }
label span { color:#64747a; font-weight:400; }
.legal-consent { display:grid; grid-template-columns:20px 1fr; align-items:start; gap:10px; margin:9px 0 2px; padding:12px; border:1px solid var(--line); background:#f7f9fa; }
.legal-consent[hidden] { display:none; }
.legal-consent input { width:18px; min-height:18px; height:18px; margin:2px 0 0; accent-color:#087f82; }
.legal-consent label { margin:0; color:#465a61; font-size:12px; font-weight:400; line-height:1.55; }
.legal-consent a { color:#126d73; font-weight:600; }
input { width:100%; min-height:46px; padding:11px 13px; border:1px solid #c4d1d5; border-radius:3px; background:#fff; color:var(--ink); font:15px var(--sans); }
input::placeholder { color:#718188; opacity:1; }
input:focus-visible { border-color:#27848d; outline-offset:1px; }
.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
#checkoutButton { display:flex; min-height:50px; align-items:center; justify-content:space-between; gap:14px; margin-top:7px; padding:11px 15px; border:1px solid #0ca9b7; border-radius:3px; background:var(--cyan); color:#12292d; cursor:pointer; font:600 14px var(--sans); text-align:left; }
#checkoutButton:hover:not(:disabled) { background:#55d8e0; }
#checkoutButton:disabled { border-color:#acb9bc; background:#d8e0e2; color:#41545a; cursor:not-allowed; }
.form-message,.status-panel { padding:13px 14px; border:1px solid #e1bbb4; background:#fff8f6; color:#773c35; font-size:13px; }
.form-message { margin:4px 0 0; }
.status-panel { margin-bottom:20px; }
.status-panel[hidden] { display:none; }
.status-panel strong { display:block; margin-bottom:4px; font-size:15px; }
.status-panel p { margin:0 0 9px; }
.status-panel a { color:#155e68; font-weight:600; }
.secure-note { margin:17px 0 0; color:#5f7076; font-size:12px; }
.signup-footer { display:flex; justify-content:space-between; gap:20px; padding:18px clamp(20px,5vw,74px); background:var(--graphite); color:#c7d2d6; font-size:12px; }
.signup-footer a { color:#fff; }
@media (max-width:760px) { .signup-main { grid-template-columns:1fr; gap:30px; padding:47px 20px 60px; } .signup-copy { padding:0; } h1 { max-width:13ch; font-size:45px; } .signup-copy > p:not(.eyebrow) { font-size:15px; } .signup-price { margin:23px 0; } .signup-panel { padding:23px 19px; } }
@media (max-width:520px) { .signup-header { min-height:67px; padding:11px 18px; } .signup-header > a:first-child { width:155px; } .signup-header > a:last-child { font-size:12px; } .signup-main { padding-right:18px; padding-left:18px; } h1 { font-size:40px; } .signup-footer { flex-direction:column; gap:8px; padding:18px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }