@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap');

:root { color-scheme:dark; --ink:#f2f5f7; --muted:#9da8b2; --paper:#0d1218; --white:#171e27; --line:#2b3540; --orange:#f4744f; --orange-dark:#ff8a68; --blue:#17343d; --lavender:#2c2740; --serif:'Playfair Display', Georgia, serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px, calc(100% - 64px)); margin:0 auto; }
.site-header { height:84px; width:min(1280px, calc(100% - 64px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:28px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.04em; font-size:20px; }
.brand-mark,.mini-mark { display:grid; place-items:center; background:var(--ink); color:white; width:29px; height:29px; border-radius:8px 8px 8px 2px; font-family:var(--serif); font-style:italic; font-size:17px; }
.nav-links { display:flex; gap:30px; color:#69737b; font-size:14px; margin-left:auto; }
.nav-links a:hover,.nav-links .active { color:var(--ink); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:30px; border-radius:7px; padding:15px 20px; border:0; font:600 14px 'DM Sans'; cursor:pointer; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }.button-primary { background:var(--orange); color:var(--white); }.button-primary:hover { background:var(--orange-dark); }.button-quiet { background:var(--white); border:1px solid var(--line); gap:12px; padding:11px 15px; }.button-small { font-size:13px; }.button-full { width:100%; gap:10px; }.text-link,.card-link { font-size:14px; font-weight:600; }.text-link { color:#667078; }.text-link span,.card-link span { margin-left:16px; }.back-link { display:inline-block; font-size:13px; color:#7c858b; margin-bottom:36px; }.eyebrow,.tag,.pane-label { font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#7d878c; }.eyebrow { display:flex; align-items:center; gap:10px; }.pulse-dot { width:7px; height:7px; background:var(--orange); border-radius:50%; display:inline-block; }.hero { min-height:660px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px; }.hero-copy { padding-bottom:30px; }.hero h1,.product-hero h1,.help-hero h1 { font-size:clamp(48px, 6vw, 80px); line-height:1.04; letter-spacing:-.075em; margin:24px 0; font-weight:600; }.hero h1 em,.product-hero h1 em,.help-hero h1 em,h2 em { font-family:var(--serif); font-weight:600; letter-spacing:-.07em; }.hero-lede { max-width:490px; color:#67717a; font-size:17px; line-height:1.7; }.hero-actions { display:flex; align-items:center; gap:26px; margin-top:32px; }.hero-proof { display:flex; align-items:center; gap:14px; color:#8a9295; font-size:12px; margin-top:62px; }.avatar-stack { display:flex; }.avatar-stack span { display:grid; place-items:center; width:27px; height:27px; margin-right:-7px; border:2px solid var(--paper); border-radius:50%; background:#d2e5e8; color:#476066; font:11px var(--mono); }.avatar-stack span:nth-child(2) { background:#e8d5c5; }.avatar-stack span:nth-child(3) { background:#ded7ec; }.avatar-stack span:last-child { background:var(--ink); color:white; }.hero-art { height:480px; position:relative; display:grid; place-items:center; }.orbit { position:absolute; border:1px solid #dce4e3; border-radius:50%; transform:rotate(-23deg); }.orbit-one { width:470px;height:280px; }.orbit-two { width:370px;height:470px; }.window-card { position:absolute; border:1px solid rgba(255,255,255,.9); box-shadow:0 24px 60px rgba(36,51,62,.12); border-radius:11px; background:rgba(255,255,255,.88); }.browser-card { width:310px; height:215px; top:72px; left:34px; transform:rotate(-8deg); overflow:hidden; }.window-bar { height:34px; display:flex; align-items:center; gap:5px; padding:0 12px; border-bottom:1px solid #e8ecea; color:#a2abad; font:9px var(--mono); }.window-bar i { width:6px; height:6px; border-radius:50%; background:#f6b49e; }.window-bar i:nth-child(2){background:#d8e7bc}.window-bar i:nth-child(3){background:#d4d1ed}.window-bar span { margin-left:10px; }.browser-lines { padding:28px 24px; }.browser-lines b { display:block; height:8px; width:78%; margin:0 0 13px; border-radius:4px; background:#d9e3e4; }.browser-lines b:nth-child(2){width:53%}.browser-lines b:nth-child(3){width:92%;background:#e5dff0}.browser-lines b:nth-child(4){width:66%}.browser-lines b:nth-child(5){width:39%}.selection { position:absolute; left:105px; top:102px; color:#43828a; background:#cce6e8; padding:4px 6px; font:9px var(--mono); }.assistant-card { width:310px; min-height:210px; right:26px; bottom:58px; padding:15px 17px; transform:rotate(5deg); background:#fff; }.assistant-top { display:flex; align-items:center; gap:8px; font-size:11px; }.assistant-top .mini-mark { width:22px;height:22px;font-size:12px;border-radius:6px 6px 6px 2px; }.menu-dots { margin-left:auto;color:#b2b9b9; letter-spacing:2px; }.assistant-card p { margin:28px 0 10px; font-size:18px; letter-spacing:-.04em; }.prompt-line { border:1px solid #e4e8e7; border-radius:5px; padding:10px; color:#899194; font-size:10px; }.prompt-line span { float:right; color:var(--orange); }.sparkle { position:absolute; top:42px; right:34px; color:var(--orange); font-size:26px; }.art-label { position:absolute; font:10px var(--mono); color:#929b9d; }.label-context { top:33px; right:79px; }.label-answer { bottom:26px; left:52px; }.logo-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); height:76px; display:flex; align-items:center; justify-content:space-between; color:#a1a8a8; font:10px var(--mono); letter-spacing:.09em; }.section { padding:140px 0; }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:50px; margin-bottom:56px; }.section-heading h2,.cta-section h2 { font-size:54px; line-height:1.05; letter-spacing:-.07em; margin:16px 0 0; }.section-heading>p { width:290px; color:#7b8589; font-size:14px; line-height:1.7; margin:0 0 7px; }.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }.product-card { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:#fff; }.product-visual { height:236px; position:relative; overflow:hidden; }.codebuddy-visual { background:#dcebee; }.extension-visual { background:#eee8f4; }.vscode-visual { background:#f3e7de; }.visual-window { position:absolute; top:83px; left:84px; padding:12px 20px; border-radius:7px; color:#597177; background:#fff; box-shadow:0 14px 30px #9dbdc255; font:15px var(--mono); transform:rotate(-7deg); }.visual-orb { position:absolute; right:79px; top:76px; display:grid; place-items:center; width:74px;height:74px; border-radius:50%; background:var(--orange); color:white; font-size:33px; box-shadow:0 12px 25px #e57a5c66; }.visual-caption { position:absolute; bottom:22px; left:25px; font:10px var(--mono); color:#768487; }.extension-tab { position:absolute; top:72px; left:109px; width:65px;height:76px; border:7px solid #b5a6cf; border-bottom-width:12px; border-radius:8px; color:#8c7aaa; display:grid;place-items:center; font-size:26px; transform:rotate(-8deg); }.extension-tab.small { left:159px;top:102px;width:51px;height:58px;border-width:5px; border-bottom-width:9px;background:#f8f4fa; }.code-symbol { position:absolute; top:68px; left:87px; padding:23px 26px; color:#bf7e5a; background:#fff7f0; border-radius:8px; box-shadow:0 14px 25px #c99b8250; font:26px var(--mono); transform:rotate(8deg); }.product-card-body { padding:25px 26px 29px; }.product-card h3 { font-size:23px; letter-spacing:-.05em; margin:14px 0 8px; }.product-card p { min-height:68px; color:#7a8588; font-size:13px; line-height:1.65; }.card-link { display:inline-block; margin-top:14px; }.card-link.muted { color:#9aa2a2; }.quote-section { background:var(--ink); color:white; }.quote-inner { padding:116px 0 112px; position:relative; max-width:900px; }.quote-mark { color:var(--orange); font:100px var(--serif); line-height:.5; }.quote-inner blockquote { font-size:37px; letter-spacing:-.05em; line-height:1.25; max-width:790px; margin:23px 0 26px; }.quote-inner p { color:#92a0a4; font:11px var(--mono); }.cta-section { display:flex; justify-content:space-between; align-items:end; padding:130px 0; }.cta-section h2 { margin-bottom:0; }.site-footer { min-height:92px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:#9aa2a3; font-size:12px; }.site-footer .brand { color:var(--ink); }.site-footer>div { display:flex; gap:25px; }.site-footer a:hover { color:var(--ink); }
.product-hero { min-height:640px; display:grid; grid-template-columns: .9fr 1.1fr; gap:70px; align-items:center; }.product-hero h1 { font-size:64px; margin:20px 0; }.price-row { display:flex; align-items:center; gap:15px; margin:28px 0 26px; color:#7e8789; font-size:12px; line-height:1.4; }.price { font-size:35px; color:var(--ink); font-weight:600; letter-spacing:-.07em; }.fine-print { color:#9aa1a1; font-size:11px; margin-top:15px; }.product-showcase { height:450px; position:relative; display:grid; place-items:center; }.showcase-glow { position:absolute; width:430px;height:430px; border-radius:50%; background:linear-gradient(135deg,#e2e8f5,#f6d9cd); filter:blur(2px); }.showcase-window { width:450px; height:290px; position:relative; z-index:1; border-radius:10px; background:#fff; box-shadow:0 30px 70px #27354125; overflow:hidden; transform:rotate(3deg); }.showcase-top { height:42px; border-bottom:1px solid #edf0ef; display:flex; align-items:center; gap:9px; padding:0 16px; font-size:12px; }.showcase-top .mini-mark { width:23px;height:23px;font-size:13px; }.window-controls { margin-left:auto; color:#b5bcbc; font-size:11px; letter-spacing:5px; }.showcase-content { display:grid; grid-template-columns:1fr 1.1fr; height:248px; }.source-pane { background:#f3f8f7; padding:27px 22px; }.pane-label { font-size:9px; }.source-pane b { display:block; font-size:15px; line-height:1.35; margin-top:27px; letter-spacing:-.04em; }.fake-copy { display:block; height:6px; width:95%; background:#d7e5e3; border-radius:4px; margin-top:30px; }.fake-copy.short { width:64%; margin-top:10px; }.prompt-pane { padding:27px 23px; }.prompt-pane p { color:#687476; font-size:12px; line-height:1.6; margin:28px 0 34px; }.prompt-pane button { background:var(--orange); color:white; border:0; border-radius:4px; padding:9px 12px; font-size:10px; }.floating-chip { position:absolute; z-index:2; background:white; padding:10px 13px; border-radius:6px; box-shadow:0 10px 24px #31465121; color:#7d878a; font:10px var(--mono); }.chip-one { top:58px; right:8px; }.chip-two { bottom:47px; left:28px; color:#c66548; }.feature-section { padding:120px 0 140px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; }.feature-icon { display:grid; place-items:center; background:var(--blue); width:44px;height:44px;border-radius:8px;color:#548187;font-size:20px; }.feature-grid>div:nth-child(2) .feature-icon { background:var(--lavender); color:#82729e; }.feature-grid>div:nth-child(3) .feature-icon { background:#f3dfd3; color:#b36d4d; }.feature-grid h3 { font-size:17px; letter-spacing:-.03em; margin:20px 0 8px; }.feature-grid p { color:#7a8588; font-size:13px; max-width:260px; line-height:1.7; }.tutorial-section { background:#eaf0ee; padding:120px 0; }.video-placeholder { height:280px; border-radius:10px; background:#28343b; color:white; display:flex; align-items:center; gap:25px; padding:45px; position:relative; overflow:hidden; }.video-placeholder:after { content:''; position:absolute; width:380px;height:380px; border:1px solid #ffffff20; border-radius:50%; right:80px;top:-80px; }.play-button { display:grid;place-items:center; width:66px;height:66px; border-radius:50%; background:var(--orange); font-size:18px; padding-left:3px; position:relative;z-index:1; }.video-placeholder h3 { font-size:25px; margin:15px 0 2px; letter-spacing:-.04em; }.video-placeholder p { color:#a8b4b5; font-size:13px; margin:0; }.purchase-band { background:#f3e4dc; }.purchase-inner { min-height:245px; display:flex; justify-content:space-between; align-items:center; }.purchase-inner h2 { font-size:38px; margin:0 0 5px; letter-spacing:-.06em; }.purchase-inner p { color:#856f65; margin:0; font-size:14px; }.checkout-header { border-bottom:1px solid var(--line); max-width:none; padding:0 32px; }.secure-label { color:#899394; font:11px var(--mono); }.checkout-page { min-height:690px; display:grid; grid-template-columns:1fr 440px; align-items:center; gap:100px; }.checkout-intro h1 { font-size:66px; line-height:1.02; letter-spacing:-.08em; margin:20px 0; }.checkout-intro>p:last-child { color:#7b8587; max-width:320px; }.checkout-card { padding:32px; background:white; border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 50px #2637430d; }.order-summary { display:flex; align-items:start; gap:14px; padding-bottom:25px; border-bottom:1px solid var(--line); }.summary-icon { display:grid;place-items:center;width:43px;height:43px;background:var(--orange);color:white;border-radius:8px;font-size:21px; }.order-summary h2 { margin:5px 0 2px; font-size:20px; letter-spacing:-.04em; }.order-summary p { color:#8a9394; font-size:12px; line-height:1.45; margin:0; }.order-summary strong { margin-left:auto; font-size:20px; }.checkout-card form { padding-top:26px; }.checkout-card label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }.checkout-card input { width:100%; border:1px solid #d6dede; border-radius:5px; padding:13px; font:14px 'DM Sans'; outline-color:var(--orange); }.form-note,.stripe-note { color:#9aa2a3; font-size:11px; }.form-note { margin:8px 0 22px; }.stripe-note { text-align:center; line-height:1.6; margin:16px 0 0; }.checkout-message { margin-top:20px; padding:13px; border-radius:5px; background:#edf5ed; color:#52715b; font-size:12px; }.help-hero { padding:110px 0 88px; }.help-hero h1 { font-size:68px; }.help-content { display:grid; grid-template-columns:1fr 330px; gap:120px; padding-bottom:150px; }.faq-list details { padding:24px 0; border-top:1px solid var(--line); }.faq-list details:last-of-type { border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; list-style:none; font-size:17px; font-weight:600; letter-spacing:-.03em; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary:after { content:'+'; float:right; color:var(--orange); font:24px var(--mono); font-weight:400; }.faq-list details[open] summary:after { content:'−'; }.faq-list details p { max-width:600px; margin:18px 0 0; color:#768185; font-size:14px; line-height:1.75; }.help-aside { display:flex; flex-direction:column; gap:16px; }.aside-card { background:#e7efed; border-radius:9px; padding:28px; }.aside-card:nth-child(2) { background:#eee9f3; }.aside-card h3 { font-size:21px; line-height:1.15; letter-spacing:-.05em; margin:17px 0 9px; }.aside-card p { color:#758184; font-size:13px; line-height:1.7; }.help-contact { display:flex; gap:17px; margin-top:50px; align-items:start; }.help-contact h3 { margin:0 0 4px; font-size:17px; }.help-contact p { color:#7a8588; font-size:13px; margin:0; }.help-contact a { color:var(--orange-dark); }
@media (max-width:800px) { .shell,.site-header { width:min(100% - 36px,1160px); }.site-header { height:72px; }.nav-links { display:none; }.hero,.product-hero,.checkout-page { grid-template-columns:1fr; gap:35px; }.hero { padding:75px 0 100px; }.hero-art { order:-1; height:330px; transform:scale(.78); margin:-35px -50px; }.hero h1,.product-hero h1,.checkout-intro h1,.help-hero h1 { font-size:49px; }.hero-proof { margin-top:38px; }.logo-strip { overflow:hidden; gap:32px; justify-content:start; white-space:nowrap; }.section,.feature-section,.tutorial-section { padding:90px 0; }.section-heading { display:block; }.section-heading>p { width:auto; max-width:380px; margin-top:25px; }.section-heading h2,.cta-section h2 { font-size:43px; }.product-grid,.feature-grid { grid-template-columns:1fr; }.product-visual { height:220px; }.quote-inner blockquote { font-size:28px; }.cta-section,.purchase-inner { display:block; padding:90px 0; }.cta-section .button,.purchase-inner .button { margin-top:30px; }.product-hero { padding:55px 0 90px; }.product-showcase { transform:scale(.78); margin:-50px -55px; }.feature-grid { gap:35px; }.video-placeholder { height:340px; padding:28px; align-items:end; }.video-placeholder h3 { font-size:21px; }.checkout-page { padding:75px 0 110px; gap:15px; }.checkout-card { padding:23px; }.help-hero { padding:85px 0 65px; }.help-content { grid-template-columns:1fr; gap:55px; padding-bottom:90px; }.site-footer { flex-wrap:wrap; gap:18px; padding:25px 0; }.site-footer>div { order:3; width:100%; }.button-small { padding:10px; }.button-small span { display:none; } }

.checkout-card select { width:100%; border:1px solid #d6dede; border-radius:5px; padding:13px; margin-top:18px; background:var(--paper); color:var(--ink); font:14px 'DM Sans'; outline-color:var(--orange); }.promo-field { margin-bottom:22px; }.promo-switch { color:#9aa2a3; font-size:11px; margin:18px 0 0; text-align:center; }.text-button { border:0; padding:0; background:none; color:var(--orange-dark); cursor:pointer; font:600 11px 'DM Sans'; }.checkout-card form > label[for="platform"] { display:block; margin-top:18px; }

.account-page { min-height:700px; display:grid; place-items:center; padding:75px 0 110px; }.account-card { width:min(100%, 540px); padding:38px; background:var(--white); border:1px solid var(--line); border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.25); }.account-card h1 { font-size:48px; line-height:1.04; letter-spacing:-.075em; margin:20px 0; }.account-card h1 em { font-family:var(--serif); font-weight:600; }.account-card > p:not(.eyebrow) { color:#a1adb3; font-size:14px; line-height:1.7; }.account-card form { margin-top:28px; }.account-card label { display:block; font-size:12px; font-weight:600; margin:18px 0 8px; }.account-card input { width:100%; border:1px solid #3a4650; border-radius:5px; padding:13px; background:var(--paper); color:var(--ink); font:14px 'DM Sans'; outline-color:var(--orange); }.account-card .button { margin-top:14px; }.account-divider { border-top:1px solid var(--line); margin:34px 0 27px; }.download-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 0; border-top:1px solid var(--line); color:#dce4e8; font:13px var(--mono); }.download-row .button { flex-shrink:0; }.account-error { background:#432421; color:#ffb0a0; }

/* Dark theme surfaces and contrast tuning. */
.brand-mark,.mini-mark { background:#f2f5f7; color:#17202b; }
.button-quiet { background:#171e27; color:var(--ink); }
.nav-links a:hover,.nav-links .active,.site-footer a:hover { color:#fff; }
.text-link { color:#b4bec6; }
.back-link { color:#9ba6ad; }
.eyebrow,.tag,.pane-label { color:#93a0a8; }
.hero-lede { color:#aab4bc; }
.hero-proof { color:#8f9aa2; }
.hero-art .orbit { border-color:#2c3b43; }
.window-card { border-color:rgba(255,255,255,.12); box-shadow:0 24px 60px rgba(0,0,0,.32); background:#19212a; }
.browser-card { background:#19212a; }
.window-bar { border-color:#2d3740; color:#87939c; }
.browser-lines b { background:#33444b; }.browser-lines b:nth-child(3) { background:#423b59; }
.assistant-card { background:#1b242e; }.assistant-card p { color:#f2f5f7; }.prompt-line { border-color:#34414b; color:#9ba7ae; }
.art-label { color:#89969d; }.logo-strip { color:#8f9aa2; }
.product-card { background:#151c24; border-color:var(--line); }
.codebuddy-visual { background:#17363d; }.extension-visual { background:#28243a; }.vscode-visual { background:#3a2925; }
.visual-window,.assistant-card,.showcase-window,.floating-chip { background:#1b242e; color:#dce4e8; }
.visual-window { box-shadow:0 14px 30px rgba(0,0,0,.3); }.visual-caption { color:#9caab0; }
.product-card p,.feature-grid p,.section-heading>p { color:#9ba7ae; }
.card-link.muted { color:#aab4ba; }
.quote-section { background:#070a0e; }.quote-inner p { color:#92a0a4; }
.site-footer { color:#8f9aa2; border-color:var(--line); }.site-footer .brand { color:var(--ink); }
.price { color:var(--ink); }.price-row,.fine-print { color:#a1adb3; }
.showcase-glow { background:linear-gradient(135deg,#23394a,#53382f); opacity:.9; }
.showcase-window { background:#19212a; box-shadow:0 30px 70px rgba(0,0,0,.45); }.showcase-top { border-color:#2d3740; }
.source-pane { background:#172a2d; }.prompt-pane p { color:#a9b5ba; }.fake-copy { background:#30484b; }.fake-copy.short { background:#30484b; }
.floating-chip { box-shadow:0 10px 24px rgba(0,0,0,.4); }.chip-two { color:#ff9b7d; }
.tutorial-section { background:#131c22; }.video-placeholder { background:#202d35; }
.purchase-band { background:#30251f; }.purchase-inner p { color:#b9a095; }
.checkout-card { background:#151c24; border-color:var(--line); box-shadow:0 20px 50px rgba(0,0,0,.25); }
.checkout-intro>p:last-child { color:#a1adb3; }.order-summary { border-color:var(--line); }.order-summary p { color:#9ba7ae; }
.checkout-card input { background:#0d1218; color:var(--ink); border-color:#3a4650; }.checkout-card input::placeholder { color:#6f7c85; }
.form-note,.stripe-note { color:#8f9ba3; }.checkout-message { background:#193025; color:#9bd1a9; }
.faq-list details { border-color:var(--line); }.faq-list details p { color:#a0acb2; }.aside-card { background:#172d31; }.aside-card:nth-child(2) { background:#29243a; }.aside-card p { color:#a1adb2; }
.help-contact p { color:#9da9af; }.help-contact a { color:var(--orange-dark); }

/* Romium product card. */
.romium-visual { background:#29362f; }