/* Pricing, sign-up and mobile pages: on top of legal.css (the plain page layout). */
.account-main{max-width:1120px;margin:0 auto;padding:64px 28px 85px;font:16px/1.65 "DM Sans",sans-serif;color:#424b43}
.account-main.narrow{max-width:520px}
.account-main h1{font-size:clamp(34px,5.5vw,58px);line-height:1.08;letter-spacing:-.045em;color:#1d291f;margin:8px 0 16px}
.account-main h2{color:#1f2b21}
.account-main .lead{font-size:18px;max-width:680px;margin:0 0 28px}
.account-main .eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#55745e}
.account-main a:not(.button){color:#1d7041;text-decoration:underline}
.button.wide{width:100%}
.interval-toggle{display:inline-flex;padding:4px;border:1px solid #d4e0d5;border-radius:999px;background:#fff;margin-bottom:22px}
.interval-toggle button{border:0;background:none;padding:8px 18px;border-radius:999px;font:600 13px "DM Sans",sans-serif;color:#465447;cursor:pointer}
.interval-toggle button[aria-pressed=true]{background:#1d291f;color:#fff}
.interval-toggle em{font-style:normal;color:#2f9a62;margin-left:4px}
.interval-toggle button[aria-pressed=true] em{color:#9fe0b9}
.plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 36px}
.plan-grid.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:820px}
.plan-card{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #d4e0d5;border-radius:16px;padding:26px 22px}
.plan-card h2{margin:0;font-size:22px}
.plan-featured{border:2px solid #277b58;box-shadow:0 18px 40px rgba(39,123,88,.12)}
.plan-badge{position:absolute;top:-12px;left:22px;background:#277b58;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px}
.plan-summary{font-size:14px;color:#5b6a5e;margin:0;min-height:44px}
.plan-price{display:flex;align-items:baseline;gap:6px}
.plan-price strong{font-size:40px;letter-spacing:-.03em;color:#173d28}
.plan-price span{font-size:14px;color:#637169}
.plan-billing{font-size:12px;color:#637169}
.plan-card ul{list-style:none;padding:0;margin:6px 0 10px;font-size:14px;flex:1}
.plan-card li{padding:6px 0 6px 24px;border-top:1px solid #edf2ee;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23277b58' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 9px/14px}
.plan-cta{justify-content:center}
.demo-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;border-radius:16px;background:#1d291f;color:#dfe9e2;margin:0 0 40px}
.demo-band h2{color:#fff;margin:0 0 6px;font-size:22px}
.demo-band p{margin:0}
.demo-band .button{background:#9fe0b9;color:#173d28;border-color:#9fe0b9;flex-shrink:0}
.account-card{background:#fff;border:1px solid #d4e0d5;border-radius:16px;padding:26px;margin-bottom:18px}
.account-card h2{margin-top:0}
.social-buttons{display:grid;gap:10px}
.social-buttons .button{justify-content:center}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;font-size:12px;color:#7a887d}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:#e2eae3}
#register-form{display:grid;gap:14px}
#register-form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:#2a362c}
#register-form input{height:44px;padding:0 12px;border:1px solid #cfdcd1;border-radius:8px;font:15px "DM Sans",sans-serif}
#register-form input:focus{outline:2px solid #277b58;outline-offset:1px}
#register-form small{font-weight:400;color:#69796b}
.form-error{margin:0;padding:10px 12px;border-radius:8px;background:#fdeceb;color:#9b2c22;font-size:14px}
.fine{font-size:12px;color:#69796b;margin:16px 0 0}
.switch{text-align:center;font-size:14px}
@media(max-width:1000px){.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.plan-grid,.plan-grid.two{grid-template-columns:1fr}.demo-band{flex-direction:column;align-items:flex-start}.account-main{padding:40px 16px 60px}}
.social-buttons .button{gap:10px}
.brand-icon{width:18px;height:18px;flex-shrink:0}
.platform-title{display:flex;align-items:center;gap:10px}
.platform-icon{width:28px;height:28px;flex-shrink:0;color:#1d291f}

/* Sign up: the pitch on the left and the form on the right, so the page fits a laptop screen without scrolling. */
.signup-main{max-width:1040px;padding-top:40px;padding-bottom:40px}
.signup-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:56px;align-items:start}
.signup-intro{padding-top:24px}
.signup-main h1{font-size:clamp(32px,4vw,46px)}
.signup-main .lead{font-size:17px;margin-bottom:20px}
.signup-points{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:15px}
.signup-points li{padding-left:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23277b58' stroke-width='2'/%3E%3C/svg%3E") no-repeat 0 4px/15px}
.signup-panel .account-card{padding:22px;margin-bottom:12px}
.signup-panel .social-buttons{grid-template-columns:1fr 1fr}
.signup-panel .social-buttons .button{min-height:42px;padding:0 12px;font-size:13px}
.signup-panel .divider{margin:14px 0}
.signup-panel #register-form{gap:10px}
.signup-panel #register-form input{height:40px}
.signup-panel #register-form label small{float:right;font-weight:400}
.signup-panel #register-form .button{min-height:44px;margin-top:4px}
.signup-panel .fine{margin-top:12px;font-size:11.5px;line-height:1.5}
.signup-panel .switch{margin:0}
@media(max-width:860px){.signup-layout{grid-template-columns:1fr;gap:20px}.signup-intro{padding-top:0}.signup-points{display:none}}
@media(max-width:420px){.signup-panel .social-buttons{grid-template-columns:1fr}}
.signup-panel #register-form label{display:block}
.signup-panel #register-form input{display:block;width:100%;margin-top:6px;box-sizing:border-box}
@media(max-width:640px){.signup-main{padding-top:22px}.signup-main h1{font-size:30px;margin-bottom:10px}.signup-main .lead{font-size:15px;line-height:1.55;margin-bottom:6px}.signup-panel .account-card{padding:18px}}

/* ---- Colors for both themes: pricing, sign-up and mobile ---- */
.account-main .button{background:#1d291f;color:#fff;border:1px solid #1d291f}
.account-main .button:hover{background:#2f4537;border-color:#2f4537}
.account-main .button.button-outline{background:#fff;color:#1d291f;border:1px solid #1d291f}
.account-main .button.button-outline:hover{background:#eef4ef}
.account-main .demo-band .button{background:#9fe0b9;color:#173d28;border-color:#9fe0b9}
#register-form input{background:#fff;color:#1d291f;border:1px solid #b9c8bc}
#register-form input::placeholder{color:#8a978c}
#register-form input:hover{border-color:#8fa594}
#register-form input:focus{outline:none;border-color:#277b58;box-shadow:0 0 0 3px rgba(39,123,88,.18)}

html[data-theme="dark"] .account-main{color:#c4cac4}
html[data-theme="dark"] .account-main h1,html[data-theme="dark"] .account-main h2{color:#ededeb}
html[data-theme="dark"] .account-main .eyebrow{color:#91c9a8}
html[data-theme="dark"] .account-main a:not(.button){color:#91c9a8}
html[data-theme="dark"] .account-main .button{background:#e8eee9;color:#18251c;border-color:#e8eee9}
html[data-theme="dark"] .account-main .button:hover{background:#b9d6c3;border-color:#b9d6c3}
html[data-theme="dark"] .account-main .button.button-outline{background:transparent;color:#ededeb;border-color:#5d655e}
html[data-theme="dark"] .account-main .button.button-outline:hover{background:#232623;border-color:#ededeb}
html[data-theme="dark"] .account-main .demo-band .button{background:#9fe0b9;color:#173d28;border-color:#9fe0b9}
html[data-theme="dark"] .interval-toggle{background:#191b19;border-color:#303331}
html[data-theme="dark"] .interval-toggle button{color:#b9beba}
html[data-theme="dark"] .interval-toggle button[aria-pressed=true]{background:#e8eee9;color:#18251c}
html[data-theme="dark"] .interval-toggle button[aria-pressed=true] em{color:#277b58}
html[data-theme="dark"] .plan-card,html[data-theme="dark"] .account-card{background:#191b19;border-color:#303331}
html[data-theme="dark"] .plan-featured{border-color:#91c9a8;box-shadow:0 18px 40px rgba(0,0,0,.4)}
html[data-theme="dark"] .plan-badge{background:#91c9a8;color:#101010}
html[data-theme="dark"] .plan-summary{color:#a5aaa6}
html[data-theme="dark"] .plan-price strong{color:#ededeb}
html[data-theme="dark"] .plan-price span,html[data-theme="dark"] .plan-billing,html[data-theme="dark"] .fine{color:#929c93}
html[data-theme="dark"] .plan-card li{border-top-color:#262926}
html[data-theme="dark"] .demo-band{background:#1b241d;color:#c4cac4;border:1px solid #2a332c}
html[data-theme="dark"] .divider{color:#929c93}
html[data-theme="dark"] .divider::before,html[data-theme="dark"] .divider::after{background:#303331}
html[data-theme="dark"] #register-form label{color:#dfe3df}
html[data-theme="dark"] #register-form small{color:#929c93}
html[data-theme="dark"] #register-form input{background:#101210;color:#ededeb;border-color:#3b413c}
html[data-theme="dark"] #register-form input::placeholder{color:#6f786f}
html[data-theme="dark"] #register-form input:hover{border-color:#5d655e}
html[data-theme="dark"] #register-form input:focus{border-color:#91c9a8;box-shadow:0 0 0 3px rgba(145,201,168,.2)}
html[data-theme="dark"] .form-error{background:#3a1c19;color:#ffb4a8}
html[data-theme="dark"] .platform-icon{color:#ededeb}
html[data-theme="dark"] .social-buttons .brand-icon path[fill="currentColor"]{fill:#ededeb}

/* Download page */
.plan-grid.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:980px}
.download-primary{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 30px}
.download-primary .button{min-height:50px;padding:0 26px;font-size:15px}
.download-primary small{color:#637169;font-size:13px}
html[data-theme="dark"] .download-primary small{color:#929c93}
.download-note{font-size:13px;color:#637169;max-width:760px}
html[data-theme="dark"] .download-note{color:#929c93}
@media(max-width:800px){.plan-grid.three{grid-template-columns:1fr}}