:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #edf1ed; background: #0c1015; font-synthesis: none; color-scheme: dark; --sage: #c5e1a2; --muted: #a5b0aa; --line: #2b3535; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 5px; }
.container { width: min(1160px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; z-index: 50; padding: 12px; background: var(--sage); color: #14241c; }
.skip-link:focus { top: 10px; }
.site-header { border-bottom: 1px solid #232d2d; background: #0c1015f5; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; letter-spacing: -.8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.brand-light { font-weight: 400; }.brand b { color: var(--sage); }
.header-inner nav { display: flex; gap: 32px; align-items: center; font-size: 13px; }
.header-inner nav a { text-decoration: none; color: #bcc5c0; padding-block: 14px; }
.header-inner nav { flex-shrink: 0; }
.header-inner nav a { white-space: nowrap; }
.header-inner nav a:hover, .header-inner nav a[aria-current] { color: var(--sage); }
.header-inner nav .nav-login { border: 1px solid #3e4b43; border-radius: 8px; padding: 12px 18px; color: var(--sage); }
.nav-login span { margin-left: 15px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; font-weight: 650; color: #adbdaf; margin: 0 0 22px; line-height: 1.7; }
.live-dot { display: inline-block; width: 6px; height: 6px; background: var(--sage); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 680px; gap: 35px; align-items: center; padding-block: 55px; }
h1,h2,h3,p { overflow-wrap: break-word; }
h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.12; letter-spacing: -2.8px; font-weight: 500; margin: 0 0 26px; }
h1 em,h2 em { font-family: Georgia, serif; font-weight: 400; color: var(--sage); }
.hero-intro { max-width: 425px; font-size: 16px; color: var(--muted); line-height: 1.85; margin: 0; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 32px; }
.button { display: inline-flex; gap: 22px; justify-content: center; align-items: center; text-decoration: none; min-height: 48px; padding: 13px 21px; border-radius: 8px; border: 1px solid #455345; font-weight: 600; font-size: 13px; }
.primary { background: var(--sage); border-color: var(--sage); color: #14241c; }
.primary:hover { background: #d8edbd; }.secondary { background: #17211f; color: #d0dfd1; }
.secondary:hover { background: #233029; }.button:disabled { opacity: .55; cursor: wait; }
.text-link { font-size: 13px; text-decoration: none; color: #cfdbc9; line-height: 1.7; }
.text-link:hover { text-decoration: underline; }.text-link span { margin-left: 10px; }
.hero-note { font-size: 11px; color: #7d8c83; margin: 23px 0 0; }
.hero-visual { position: relative; min-height: 548px; display: grid; place-items: center; isolation: isolate; }
.visual-orbit { position: absolute; border: 1px solid #283c30; border-radius: 50%; width: 440px; height: 440px; z-index: -1; }
.orbit-b { width: 350px; height: 350px; }
.demo-phone { width: 314px; background: #101719; border: 1px solid #4b5e53; padding: 9px; border-radius: 29px; box-shadow: 0 35px 80px #0006; transform: rotate(3deg); }
.phone-top { display: flex; justify-content: space-between; padding: 8px 17px 19px; color: #c9d0cd; font-size: 10px; }
.demo-feed-title { font-size: 16px; font-weight: 600; padding: 0 11px 14px; border-bottom: 1px solid #28312f; }
.demo-feed-title span { float: right; font-size: 10px; color: #92a496; padding-top: 5px; font-weight: 400; }
.demo-author { display: flex; align-items: center; gap: 8px; padding: 14px 8px; }
.demo-avatar { background: #3c5442; color: var(--sage); width: 31px; height: 31px; border-radius: 50%; display: grid; place-content: center; font-weight: 700; }
.demo-author b { font-size: 10px; }.demo-author small { display: block; font-size: 8px; color: #8ba093; margin-top: 3px; }.ellipsis { margin-left: auto; }
.demo-art { background: #c9d8b9; height: 265px; padding: 29px 25px; color: #2b3b30; position: relative; overflow: hidden; }
.art-overline { font-size: 7px; letter-spacing: 2px; position: relative; z-index: 1; }
.demo-art strong { font-size: 32px; display: block; letter-spacing: -1px; line-height: 1.13; position: relative; z-index: 1; padding-top: 30px; font-weight: 500; }
.demo-art em { font-family: Georgia,serif; font-weight: 400; }.art-foot { position: absolute; bottom: 23px; font-size: 7px; letter-spacing: 1px; }
.art-circle { position: absolute; width: 250px; height: 250px; border: 1px solid #7c9675; border-radius: 50%; right: -155px; top: -50px; }.circle-two { right: -120px; top: -85px; }
.demo-caption { font-size: 10px; line-height: 1.8; padding: 15px 9px; color: #c3cdc7; }.demo-caption b { color: #ecf0ed; }
.demo-review { border-top: 1px solid #29342e; display: flex; justify-content: space-between; font-size: 10px; align-items: center; padding: 9px 10px 14px; color: #b1cea0; }
.heart { font-size: 22px; vertical-align: middle; margin-right: 4px; }.reject { color: #889a8d; }
.floating-label { position: absolute; display: inline-flex; gap: 15px; align-items: center; font-size: 8px; letter-spacing: 1.5px; background: #202d24; border: 1px solid #445c46; border-radius: 7px; padding: 13px 16px; z-index: 2; box-shadow: 0 12px 28px #0004; }
.label-top { top: 18px; left: 10px; transform: rotate(-4deg); }.label-top span { font-size: 19px; color: var(--sage); }
.label-bottom { bottom: 25px; right: 0; transform: rotate(-3deg); }.check-mark { background: var(--sage); color: #223326; border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 15px; }
.network-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 29px; text-align: center; }
.network-strip > span { color: #87978c; font-size: 11px; }.network-strip > div { display: flex; justify-content: center; gap: 46px; align-items: center; margin-top: 20px; }
.network-strip b { font-size: 17px; font-weight: 500; color: #c0cdc3; }.network-strip > div > span { font-size: 17px; color: #87978c; }.network-strip small { display: block; font-size: 8px; color: #718277; margin-top: 4px; }
.section { padding-block: 95px; }.section-heading { max-width: 570px; }
h2 { font-size: clamp(30px, 3.3vw, 42px); font-weight: 500; line-height: 1.18; letter-spacing: -1.5px; margin: 0 0 22px; }
.section-heading > p:last-child, .feature-copy > p:not(.eyebrow), .circle-section > p:last-child { color: var(--muted); line-height: 1.85; font-size: 15px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 45px; }
.step-number { display: inline-block; font-family: Georgia,serif; color: var(--sage); font-size: 20px; border-bottom: 1px solid #3b503e; padding-bottom: 14px; width: 100%; }
.steps h3 { font-size: 20px; font-weight: 500; letter-spacing: -.5px; margin: 22px 0 14px; }.steps p { font-size: 13px; line-height: 1.9; color: #9daaa1; }
.feature-section { display: grid; grid-template-columns: 1fr .9fr; gap: 90px; padding: 54px; border: 1px solid #2d4033; border-radius: 17px; background: #15201b; }
.clean-list { list-style: none; margin: 25px 0; padding: 0; }.clean-list li { font-size: 12px; color: #c4d0c5; line-height: 1.7; padding: 7px 0 7px 21px; position: relative; }.clean-list li:before { content: "✓"; position: absolute; left: 0; color: var(--sage); }
.agent-illustration { align-self: center; text-align: center; background: #101915; border: 1px solid #2e4133; border-radius: 14px; padding: 32px; }.agent-illustration .eyebrow { color: #7f9987; }
.handoff-box { border: 1px solid #2f4534; border-radius: 9px; padding: 17px 14px; color: #becdc0; font-size: 12px; display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 10px; }
.handoff-box.focused { border-color: #70845c; background: #253624; color: #d8e8c9; }.handoff-box span { font-size: 20px; color: var(--sage); }.handoff-arrow { display: block; color: #769479; margin: 8px; }.agent-illustration > p:last-child { font-size: 10px; color: #82998a; margin-top: 24px; }
.circle-section { text-align: center; max-width: 740px; }.release-note { display: flex; gap: 45px; align-items: center; padding: 25px 30px; border: 1px solid var(--line); border-radius: 12px; }.release-note strong { font-size: 12px; font-weight: 550; }.release-note p { color: #8ea093; font-size: 12px; line-height: 1.85; margin-bottom: 0; }.release-note .button { flex-shrink: 0; }
.final-cta { text-align: center; padding-block: 100px; }.final-cta p:not(.eyebrow) { color: var(--muted); line-height: 1.7; margin-bottom: 26px; font-size: 14px; }
.site-footer { border-top: 1px solid var(--line); background: #0a0f12; padding-top: 45px; }.footer-main { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 34px; }.footer-main .brand { font-size: 19px; }.footer-main .brand img { width: 28px; height: 28px; }.footer-main p { font-size: 12px; color: #93a299; }.footer-main small { font-size: 10px; color: #6f8176; max-width: 270px; display: block; line-height: 1.7; }
.footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 34px; font-size: 11px; }.footer-main nav a { color: #b2c0b6; text-decoration: none; }.footer-main nav a:hover { text-decoration: underline; }
.footer-bottom { display: flex; gap: 25px; border-top: 1px solid #26312b; padding-block: 22px; font-size: 10px; color: #748579; }.footer-bottom span { margin-right: auto; }.footer-bottom a { text-decoration: none; }
.pricing-hero { text-align: center; padding-block: 72px 40px; max-width: 710px; }.pricing-hero h1 { margin-bottom: 20px; }.pricing-hero > p:not(.eyebrow) { color: var(--muted); line-height: 1.8; font-size: 15px; max-width: 485px; margin-inline: auto; }
.sandbox-note { display: flex; gap: 12px; border: 1px solid #40543e; background: #1a271e; color: #beceb8; border-radius: 9px; padding: 17px 19px; text-align: left; font-size: 12px; line-height: 1.75; margin-block: 27px; }.sandbox-note > span { font-size: 24px; color: var(--sage); line-height: 1.1; }.sandbox-note p { margin: 0; font-size: 11px; }.sandbox-note strong { font-weight: 600; }.sandbox-note div p { margin-top: 5px; }
.pricing-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 25px 20px; }.price-card { grid-column: span 2; border: 1px solid #314039; border-radius: 13px; background: #111b19; padding: 32px 27px; position: relative; }.price-card:nth-child(n+4) { grid-column: span 3; }.price-card.featured { border-color: #819e68; background: #1b2a20; }.plan-badge { font-size: 9px; background: var(--sage); color: #1d3021; border-radius: 5px; padding: 6px 11px; position: absolute; top: -13px; right: 22px; }.price-card .eyebrow { margin-bottom: 21px; }.price-card h2 { font-size: 46px; letter-spacing: -2px; margin-bottom: 7px; }.price-card h2 small { font-size: 11px; color: #8fa493; font-weight: 400; letter-spacing: 0; margin-left: 7px; }.plan-summary { font-size: 12px; color: #98af9e; margin-bottom: 26px; }.daily-allowance { border-block: 1px solid #334738; display: flex; align-items: center; gap: 16px; padding-block: 20px; }.daily-allowance strong { font-size: 38px; font-weight: 400; color: var(--sage); letter-spacing: -1px; }.daily-allowance span { font-size: 12px; color: #c6d5c7; line-height: 1.65; }.price-card .button { width: 100%; }
.pricing-fine-print { font-size: 11px; line-height: 1.8; color: #81968a; text-align: center; padding-top: 23px; max-width: 830px; }.pricing-details { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; }.pricing-details p:not(.eyebrow) { font-size: 13px; color: #9faf9f; line-height: 1.9; }.generation-card { background: #18221e; border: 1px solid #3a483e; padding: 30px; border-radius: 12px; }.small-spark { color: var(--sage); font-size: 30px; }.generation-card h3 { font-size: 22px; font-weight: 500; letter-spacing: -.5px; }.faq { max-width: 830px; padding-top: 0; }.faq details { border-bottom: 1px solid #324139; }.faq summary { cursor: pointer; padding: 23px 0; font-size: 14px; color: #d4ddd5; }.faq details p { color: #9eada2; line-height: 1.9; font-size: 13px; padding-bottom: 15px; }
.policy-layout { display: grid; grid-template-columns: 220px 1fr; gap: 75px; padding-block: 75px 100px; }.policy-layout aside nav { display: grid; gap: 16px; font-size: 12px; }.policy-layout aside a { text-decoration: none; color: #99aa9e; }.policy-layout aside a[aria-current] { color: var(--sage); }.policy-copy { max-width: 740px; }.policy-copy h1 { font-size: 43px; letter-spacing: -1.7px; }.policy-intro { color: #b0c0b4; font-size: 15px; line-height: 1.8; }.policy-copy h2 { font-size: 23px; letter-spacing: -.5px; margin: 38px 0 15px; }.policy-copy > p { color: #9eafa3; font-size: 14px; line-height: 1.95; }.policy-copy a { color: #c8dfb3; }.policy-copy code { font-size: 12px; overflow-wrap: anywhere; }
.billing-layout { max-width: 950px; padding-block: 75px 100px; }.billing-layout h1 { font-size: 46px; }.billing-panel { border: 1px solid #3b4b3e; border-radius: 12px; padding: 25px; font-size: 14px; line-height: 1.8; color: #baccbb; }.billing-panel h2 { font-size: 24px; letter-spacing: -.5px; }.billing-panel p { font-size: 13px; }.billing-choice-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 25px; }.billing-choice { padding: 24px; border: 1px solid #3b4c3e; background: #16221a; border-radius: 10px; }.billing-choice h3 { font-size: 21px; margin: 0 0 15px; }.billing-choice p { color: #a5b9a4; font-size: 13px; line-height: 1.7; }.billing-choice .button { margin-top: 10px; width: 100%; }.billing-links { display: flex; gap: 35px; margin-top: 30px; }#billing-message { color: #ceddc5; line-height: 1.8; font-size: 13px; }
.generation-section { padding-bottom: 75px; }.generation-intro { color: #a1b39f; line-height: 1.85; font-size: 14px; max-width: 680px; }.generation-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 30px; }.generation-pack { border: 1px solid #344c3a; background: #15221a; border-radius: 12px; padding: 25px 20px; display: flex; flex-direction: column; }.generation-pack .eyebrow { font-size: 8px; letter-spacing: 1.4px; }.generation-pack h3 { font-size: 32px; font-weight: 500; letter-spacing: -1px; margin: 0 0 10px; }.generation-pack h3 small { font-size: 10px; color: #92aa90; letter-spacing: 0; font-weight: 400; }.generation-pack p:not(.eyebrow) { color: #a2b79f; line-height: 1.9; font-size: 12px; margin-bottom: 25px; }.generation-pack .button { margin-top: auto; font-size: 11px; padding: 12px; }.generation-terms { margin-top: 20px; color: #7f9783; font-size: 11px; line-height: 1.9; }
@media (max-width: 960px) { .generation-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .price-card,.price-card:nth-child(n+4) { grid-column: auto; }.generation-section { padding-bottom: 45px; }.generation-grid { grid-template-columns: 1fr; }.generation-pack { padding: 25px; } }
@media (max-width: 960px) { .container { width: calc(100% - 48px); }.hero { gap: 0; }.hero-actions { flex-wrap: wrap; gap: 19px; }.visual-orbit { width: 330px; height: 330px; }.orbit-b { width: 270px; height: 270px; }.demo-phone { width: 287px; }.floating-label { font-size: 7px; padding: 10px 11px; }.feature-section { gap: 40px; padding: 35px; }.price-card { padding: 30px 20px; }.pricing-details { gap: 40px; }.policy-layout { gap: 35px; grid-template-columns: 170px 1fr; } }
@media (max-width: 700px) { .container { width: calc(100% - 40px); }.header-inner { min-height: 78px; gap: 14px; }.brand { font-size: 20px; gap: 8px; }.brand img { width: 30px; height: 30px; }.header-inner nav { gap: 13px; font-size: 11px; }.header-inner nav a:first-child { display: none; }.header-inner nav .nav-login { padding: 10px 12px; }.nav-login span { margin-left: 5px; }
.hero { grid-template-columns: 1fr; padding-block: 47px 32px; gap: 28px; }.hero h1 { font-size: 45px; letter-spacing: -2px; }.hero-intro { font-size: 14px; max-width: 420px; }.hero-actions { margin-top: 25px; gap: 19px; }.hero-note { font-size: 10px; }.hero-visual { min-height: 530px; width: 100%; max-width: 410px; margin-inline: auto; }.demo-phone { width: 286px; }.label-top { top: 12px; left: 0; }.label-bottom { bottom: 9px; right: 0; }.visual-orbit { width: 310px; height: 310px; }.orbit-b { width: 245px; height: 245px; }.network-strip { padding-block: 23px; }.network-strip > div { gap: 15px 23px; flex-wrap: wrap; margin-top: 18px; }.network-strip b,.network-strip > div > span { font-size: 14px; }
.section { padding-block: 60px; }.section h2,.feature-section h2 { font-size: 33px; }.steps { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }.steps h3 { margin-top: 18px; }.steps p { max-width: 420px; }.feature-section { grid-template-columns: 1fr; padding: 29px 23px; gap: 28px; }.feature-copy > p:not(.eyebrow) { font-size: 14px; }.agent-illustration { padding: 25px 20px; }.circle-section { padding-block: 65px; }.circle-section > p:last-child { font-size: 14px; }.release-note { flex-direction: column; padding: 25px; gap: 22px; align-items: flex-start; }.release-note .button { width: 100%; }.final-cta { padding-block: 65px; }.final-cta h2 { font-size: 34px; }.footer-main { flex-direction: column; gap: 28px; }.footer-main nav { gap: 16px 24px; }.footer-bottom { flex-wrap: wrap; gap: 17px; line-height: 1.6; }.footer-bottom span { flex-basis: 100%; }
.pricing-hero { padding-block: 50px 27px; }.pricing-hero h1 { font-size: 44px; }.pricing-hero > p:not(.eyebrow) { font-size: 14px; }.pricing-grid { grid-template-columns: 1fr; gap: 25px; max-width: 440px; }.price-card { padding: 28px; }.price-card .clean-list { margin-block: 21px; }.pricing-fine-print { padding-top: 18px; }.pricing-details { grid-template-columns: 1fr; gap: 27px; }.pricing-details h2 { font-size: 30px; }.faq { padding-top: 0; }.faq summary { font-size: 13px; line-height: 1.7; }
.policy-layout { grid-template-columns: 1fr; gap: 37px; padding-block: 40px 65px; }.policy-layout aside .eyebrow { margin-bottom: 13px; }.policy-layout aside nav { display: flex; flex-wrap: wrap; gap: 13px 20px; font-size: 11px; line-height: 1.8; }.policy-copy h1 { font-size: 35px; letter-spacing: -1px; }.policy-copy .eyebrow { font-size: 9px; }.policy-copy h2 { font-size: 22px; }.policy-copy > p { font-size: 13px; }.sandbox-note { padding: 15px; }
.billing-layout { padding-block: 45px 65px; }.billing-layout h1 { font-size: 36px; }.billing-choice-grid { grid-template-columns: 1fr; }.billing-panel { padding: 22px; }.billing-panel h2 { font-size: 22px; }
}
@media (max-width: 360px) { .container { width: calc(100% - 32px); }.brand { font-size: 17px; gap: 6px; }.brand img { width: 27px; height: 27px; }.header-inner nav { gap: 9px; font-size: 10px; }.header-inner nav .nav-login { padding: 10px; }.hero h1 { font-size: 38px; }.hero-visual { min-height: 515px; }.demo-phone { width: 263px; }.demo-art { padding: 25px 20px; height: 248px; }.demo-art strong { font-size: 29px; }.visual-orbit { width: 275px; height: 275px; }.orbit-b { width: 230px; height: 230px; }.floating-label { letter-spacing: 1px; }.hero-actions { gap: 17px; }.button { padding: 13px 17px; font-size: 12px; }.text-link { font-size: 12px; }.pricing-hero h1 { font-size: 38px; }.price-card { padding: 27px 23px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
@media (max-width: 360px) { .header-inner { gap: 8px; }.header-inner .brand { font-size: 16px; } }