:root {
  color-scheme:light; --ink:#14233e; --muted:#5b687c; --accent:#165bde;
  --accent-dark:#104bb9; --line:#e1e7f0; --paper:#fbfcff; --pale:#eef4ff;
  font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--paper); scroll-behavior:smooth;
}
* { box-sizing:border-box; }
body { margin:0; }
a { color:var(--accent); text-underline-offset:4px; }
button,input,textarea,select { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
img { max-width:100%; }
.wrap { width:min(1180px,calc(100% - 64px)); margin:auto; }
nav { display:flex; align-items:center; justify-content:space-between; gap:28px; min-height:100px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:23px; font-weight:740; letter-spacing:-.8px; text-decoration:none; color:var(--ink); white-space:nowrap; }
.brand img { width:34px; height:34px; }
.brand-pro { color:var(--accent); }
nav .links { display:flex; align-items:center; gap:30px; font-size:14px; }
nav .links a { color:var(--muted); text-decoration:none; }
nav .links a:hover,footer a:hover { color:var(--accent); }
.nav-cta { display:flex; gap:22px; align-items:center; border:1px solid #ced9ed; border-radius:8px; padding:10px 15px; text-decoration:none; font-size:13px; font-weight:650; color:var(--ink); background:#fff; }
.nav-cta:hover { border-color:var(--accent); }
.hero { padding:76px 0 46px; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:1.65px; color:var(--accent); }
.status-dot { display:inline-block; flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); }
h1,h2,h3,p,figure { margin:0; }
h1 { font-size:clamp(48px,6.6vw,84px); font-weight:680; line-height:1.03; letter-spacing:-4.3px; margin:21px 0 25px; }
h1>span { color:var(--accent); }
h2 { font-size:clamp(34px,3.7vw,47px); font-weight:660; line-height:1.13; letter-spacing:-1.8px; margin:15px 0 23px; }
h3 { font-size:20px; line-height:1.35; font-weight:650; letter-spacing:-.4px; }
p { color:var(--muted); }
.hero-copy { font-size:20px; line-height:1.65; }
.hero-copy em { font-style:normal; color:var(--ink); }
.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:26px; margin-top:29px; }
.button,button { display:inline-flex; align-items:center; justify-content:center; gap:22px; background:var(--accent); color:white; border:1px solid var(--accent); border-radius:8px; padding:13px 22px; text-decoration:none; font-size:14px; font-weight:650; cursor:pointer; }
.button:hover,button:hover { background:var(--accent-dark); }
.button.secondary { background:white; color:var(--ink); border-color:#ced9ed; }
.button.secondary:hover { border-color:var(--accent); color:var(--accent); }
button:disabled { opacity:.6; cursor:wait; }
button[data-website-plan]:disabled { cursor:not-allowed; }
.text-link { display:inline-flex; align-items:center; gap:13px; text-decoration:none; font-size:14px; font-weight:650; }
.text-link:hover { text-decoration:underline; }
.hero-note { font-size:12px; margin-top:18px; color:#6b778a; }
.launch-note { font-size:11px; color:var(--muted); margin-top:7px; }
.product-showcase { scroll-margin-top:30px; padding:22px; border:1px solid #dce6f7; border-radius:18px; background:linear-gradient(145deg,#edf4ff,#f6f8fd 64%,#e9f1ff); box-shadow:0 22px 70px -40px #375f9a66; }
.preview-bar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 1px 17px; }
.preview-bar>span { display:flex; gap:8px; align-items:center; font-size:12px; font-weight:600; color:#526582; }
.theme-switch { display:flex; gap:3px; padding:3px; border:1px solid #d9e2f2; border-radius:7px; background:#e6edf8; }
.theme-switch button { min-width:62px; padding:5px 10px; font-size:11px; border:0; border-radius:4px; color:#536582; background:transparent; }
.theme-switch button[aria-pressed=true] { color:var(--ink); background:white; box-shadow:0 1px 4px #1a33551a; }
.product-frame img { width:100%; height:auto; aspect-ratio:1280/600; object-fit:cover; object-position:top; display:block; border:1px solid #1e283a38; border-radius:8px; background:#23292b; }
figcaption { font-size:11px; color:#6b778a; margin-top:12px; }
.product-frame figcaption { text-align:center; margin-bottom:-3px; }
.launch-film video { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border:1px solid #1e283a38; border-radius:8px; background:#11161f; }
.launch-film figcaption { max-width:760px; margin:14px auto 0; text-align:center; }
.film-credit { display:block; margin-top:6px; }
.light-detail .preview-bar { margin-right:20px; }

.compatibility-strip { display:flex; align-items:center; justify-content:center; gap:42px; padding:27px 0 29px; border-bottom:1px solid var(--line); }
.compatibility-strip span { display:flex; align-items:center; gap:8px; color:#65748a; font-size:12px; }
.compatibility-strip svg { width:14px; height:14px; stroke:var(--accent); stroke-width:1.8; fill:none; }
.section-space { padding-top:102px; }
.workspace-story { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:64px; }
.story-copy>p { font-size:15px; max-width:440px; }
.benefit-list { padding:0; list-style:none; display:grid; gap:12px; margin:24px 0; }
.benefit-list li { display:flex; align-items:flex-start; gap:10px; font-size:13px; color:#354964; }
.benefit-list li::before { content:'✓'; font-size:12px; color:var(--accent); }
.story-copy .quiet { font-size:12px; max-width:380px; }
.light-detail { padding:23px 0 18px 24px; background:#f0f4fa; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.detail-label { display:flex; align-items:center; gap:7px; font-size:11px; color:#596b85; margin-bottom:18px; }
.light-detail img { display:block; width:850px; height:auto; max-width:none; border:1px solid #d9e0ea; border-radius:6px 0 0 6px; box-shadow:0 12px 35px #20344d0f; }
.light-detail figcaption { margin:16px 0 0; }
.section-heading { text-align:center; margin:0 auto 40px; max-width:760px; }
.section-heading h2 { margin-bottom:17px; }
.section-heading>p { font-size:15px; }
.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.feature-card { display:flex; flex-direction:column; align-items:flex-start; padding:27px; background:white; border:1px solid var(--line); border-radius:11px; }
.feature-icon { display:grid; place-items:center; width:36px; height:36px; background:#eef4ff; border:1px solid #e0eafe; border-radius:8px; margin-bottom:23px; }
.feature-icon svg { width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.feature-card h3 { font-size:18px; margin-bottom:11px; }
.feature-card p { font-size:13px; line-height:1.8; margin-bottom:20px; }
.feature-card .native-baseline { font-size:12px; margin-bottom:17px; }
.native-baseline>span,.pro-benefit>span { display:block; margin-bottom:5px; font-size:10px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; }
.pro-benefit>span { color:var(--accent); }
.feature-card .pro-benefit { margin-bottom:0; }
.feature-tag { display:block; margin-top:auto; font-size:10px; font-weight:600; color:#6d7d95; }
.feature-footnote { margin:19px auto 0; max-width:800px; text-align:center; font-size:11px; color:#718097; }
.privacy-band { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; padding:43px 49px; margin-top:98px; border:1px solid #dce6f7; background:#edf3ff; border-radius:13px; }
.privacy-band h2 { font-size:37px; margin-bottom:0; }
.privacy-points { display:grid; gap:17px; }
.privacy-points p { font-size:12px; line-height:1.8; }
.privacy-points strong { color:#2d466a; font-weight:650; }
.privacy-points a { white-space:nowrap; }
.pricing { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:790px; margin:auto; }
.price-card { position:relative; padding:33px; border:1px solid #d9e2ef; border-radius:12px; background:white; }
.price-card.annual { border:1.5px solid #a7c3f6; background:linear-gradient(160deg,#f3f7ff,white 66%); }
.plan-label { display:block; font-size:11px; color:#6d7a8e; margin-bottom:12px; }
.price-card h3 { font-size:20px; }
.price { display:flex; align-items:baseline; gap:10px; font-size:54px; font-weight:650; letter-spacing:-2.5px; line-height:1.3; color:var(--ink); margin:21px 0 7px; }
.price span { font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); }
.price-card>p:not(.price) { font-size:12px; }
.price-card .button { display:flex; margin:25px 0 24px; width:100%; font-size:13px; gap:15px; }
.price-card ul { display:grid; gap:9px; padding:20px 0 0; margin:0; list-style:none; border-top:1px solid var(--line); font-size:12px; color:#52617a; }
.price-card li::before { content:'✓'; color:var(--accent); margin-right:9px; }
.savings { position:absolute; top:17px; right:17px; padding:4px 8px; border-radius:5px; background:#dfebff; font-size:10px; font-weight:700; color:#1651b9; }
.billing-note { max-width:780px; margin:24px auto 0; font-size:11px; line-height:1.85; text-align:center; }
.billing-panel { max-width:790px; margin:24px auto 0; font-size:13px; }
.billing-panel>p { text-align:center; }
.billing-panel [hidden] { display:none!important; }
.billing-panel>div { margin-top:18px; padding:22px; background:white; border:1px solid var(--line); border-radius:10px; }
.billing-panel h3 { margin-bottom:12px; }
.billing-panel input { min-width:0; font-size:13px; }
.billing-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.billing-actions button { font-size:12px; padding:10px 14px; gap:8px; }
#billing-status { margin-top:16px; font-size:13px; }
#billing-status[data-error=true] { color:#b42318; }
.install-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; margin-top:100px; padding:58px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.install-section>div>p { font-size:14px; max-width:405px; }
.availability { display:flex; align-items:center; gap:8px; width:fit-content; margin:24px 0 18px; padding:8px 10px; border:1px solid #dce4f1; border-radius:6px; color:#4f6481; background:#f2f6fc; font-size:11px; }
.install-steps { padding:0; margin:12px 0; list-style:none; display:grid; gap:27px; }
.install-steps li { display:flex; align-items:flex-start; gap:19px; }
.install-steps li>span { display:grid; place-items:center; flex:none; height:35px; width:35px; border:1px solid #dbe5f5; border-radius:8px; color:var(--accent); font-size:11px; font-weight:700; }
.install-steps h3 { font-size:16px; margin:3px 0 7px; }
.install-steps p { max-width:345px; font-size:12px; }
.faq { max-width:790px; margin:auto; }
.faq details { border-top:1px solid var(--line); padding:21px 0; }
.faq details:last-child { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; font-size:15px; font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:22px; }
.faq summary::after { content:'+'; font-size:20px; font-weight:400; color:#71809a; }
.faq details[open] summary::after { content:'−'; }
.faq summary::-webkit-details-marker { display:none; }
.faq p { font-size:13px; padding:16px 30px 0 0; }
footer { position:relative; margin-top:88px; padding:30px 0 36px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
footer .brand { font-size:20px; }
footer .links { display:flex; gap:24px; flex-wrap:wrap; margin:19px 0 20px; }
footer .links a { text-decoration:none; color:#51627b; }
footer p { font-size:11px; margin-top:6px; }
footer .legal { max-width:700px; color:#7a879a; font-size:10px; }
figcaption,.feature-tag,.feature-footnote,footer .legal,.hero-note { color:var(--muted); }
/* Shared support, terms and activation pages keep the same site typography. */
article { max-width:760px; padding:55px 0 70px; min-height:60vh; }
article h1 { font-size:43px; line-height:1.14; letter-spacing:-1.7px; margin:0 0 25px; }
article h2 { font-size:22px; letter-spacing:-.6px; margin:30px 0 11px; }
article p,article li { color:var(--muted); font-size:15px; }
article p+p { margin-top:15px; }
article a { overflow-wrap:anywhere; }
.card { border:1px solid var(--line); background:white; border-radius:12px; padding:25px; }
.note { color:var(--muted); font-size:14px; max-width:750px; }
label { display:block; margin-top:16px; font-weight:600; }
input,textarea,select { display:block; width:100%; margin:6px 0 12px; border:1px solid #b8c6dc; padding:10px 12px; border-radius:7px; background:white; color:var(--ink); }
textarea { min-height:150px; resize:vertical; }
.hidden,[hidden] { display:none!important; }
:focus-visible { outline:3px solid #4b8cfa; outline-offset:4px; }
.skip-link { position:absolute; top:-80px; left:20px; z-index:10; padding:10px 14px; background:white; }
.skip-link:focus { top:12px; }
@media(min-width:900px) { footer .links { position:absolute; right:0; top:20px; } }
@media(max-width:950px) {
  .wrap { width:calc(100% - 40px); }
  .workspace-story { gap:34px; }
  .light-detail img { width:740px; }
  .feature-card { padding:23px; }
  .privacy-band { padding:35px; gap:35px; }
  .install-section { gap:45px; }
}
@media(max-width:700px) {
  .wrap { width:calc(100% - 32px); }
  nav { min-height:80px; gap:12px; flex-wrap:wrap; padding:18px 0; }
  .brand { font-size:21px; }
  .brand img { width:30px; height:30px; }
  nav .links { gap:18px; font-size:12px; }
  .nav-cta { display:none; }
  .hero { padding:54px 0 32px; }
  h1 { font-size:55px; letter-spacing:-2.8px; margin:19px 0 22px; }
  .eyebrow { font-size:10px; letter-spacing:1.1px; }
  .hero-copy { font-size:16px; }
  .desktop-break { display:none; }
  .actions { gap:18px; margin-top:25px; }
  .hero-note { font-size:10px; margin-top:17px; }
  .button { padding:12px 17px; font-size:13px; }
  .text-link { font-size:12px; }
  .product-showcase { padding:10px; border-radius:11px; }
  .preview-bar { margin:2px 1px 11px; gap:8px; }
  .preview-bar>span { font-size:10px; max-width:170px; line-height:1.5; gap:6px; }
  .theme-switch button { min-width:43px; font-size:10px; padding:4px 7px; }
  .product-frame img { border-radius:4px; }
  figcaption { font-size:9px; line-height:1.5; }
  .compatibility-strip { gap:13px; justify-content:space-around; align-items:flex-start; padding:23px 0; }
  .compatibility-strip span { font-size:9px; max-width:100px; line-height:1.6; align-items:flex-start; gap:4px; }
  .compatibility-strip svg { flex:none; width:11px; margin-top:1px; }
  .section-space { padding-top:65px; }
  h2 { font-size:35px; letter-spacing:-1.4px; }
  .workspace-story { grid-template-columns:1fr; gap:30px; }
  .story-copy>p { max-width:none; font-size:14px; }
  .light-detail { padding:20px 0 17px 20px; }
  .light-detail img { width:720px; }
  .section-heading { margin-bottom:28px; }
  .features { grid-template-columns:1fr; gap:13px; }
  .feature-card { padding:24px; }
  .feature-icon { margin-bottom:19px; }
  .feature-card p { max-width:440px; margin-bottom:17px; }
  .privacy-band { grid-template-columns:1fr; padding:27px; gap:28px; margin-top:65px; }
  .privacy-band h2 { font-size:33px; }
  .pricing { grid-template-columns:1fr; gap:16px; }
  .price-card { padding:28px; }
  .price-card .button { max-width:400px; }
  .billing-note { font-size:10px; text-align:left; }
  .install-section { grid-template-columns:1fr; gap:30px; margin-top:65px; padding:38px 0; }
  .install-steps { gap:22px; }
  .faq summary { font-size:14px; }
  .faq p { font-size:12px; }
  footer { margin-top:60px; padding-bottom:30px; }
  footer .links { gap:17px; font-size:11px; }
  article { padding-top:38px; }
  article h1 { font-size:35px; }
}
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } }

/* Current free offer, alongside clearly labeled planned pricing. */
.free-badge { display:inline-block; margin:0 0 18px; padding:5px 10px; border-radius:6px; background:#e2f5e9; color:#165b35; font-size:12px; font-weight:700; }
.price.planned-price { font-size:32px; letter-spacing:-1px; color:#65748a; }
.price.planned-price s { text-decoration-thickness:2px; }
.free-price { color:var(--ink); font-size:38px !important; font-weight:650; margin:4px 0; }
.free-price span { font-size:14px; font-weight:400; color:var(--muted); }