:root {
  --bg: #0d1012;
  --surface: #151a1d;
  --surface-2: #1b2124;
  --line: #30383a;
  --text: #f0eee8;
  --muted: #a0a7a6;
  --soft: #6f7979;
  --accent: #c8f98f;
  --accent-dim: #74984c;
  --sans: 'DM Sans', Arial, sans-serif;
  --mono: 'DM Mono', monospace;
  color-scheme: dark;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
#product, #how-it-works, #pricing, #faq { scroll-margin-top: 96px; }
body { margin: 0; background: var(--bg); }
a { color: inherit; }
button { font: inherit; }
.shell { width: min(1240px, calc(100% - 80px)); margin-inline: auto; }
.nav { height: 82px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 17px; font-weight: 700; letter-spacing: -.065em; white-space: nowrap; }
.brand > span:last-child > span { color: #a4abaa; font-weight: 400; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #a9d879; border-radius: 5px; background: var(--accent); color: #202022; font-size: 19px; line-height: 1; }
.nav nav { display: flex; gap: 35px; padding-left: 70px; }
.nav nav a, .nav-action { color: var(--muted); text-decoration: none; font-size: 12px; transition: color .2s; }
.nav nav a:hover, .nav-action:hover { color: var(--text); }
.nav-action { display: inline-flex; gap: 22px; align-items: center; color: var(--text); font-weight: 700; }
.nav-action > span:last-child { color: var(--accent); font-size: 17px; }
.hero-layout { display: grid; grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr); gap: clamp(35px, 6vw, 100px); align-items: center; min-height: 720px; padding-block: 65px 84px; border-bottom: 1px solid var(--line); }
.hero { padding: 0 0 12px; }
.availability, .product-caption, .section-intro > span, .steps-copy > span, .pricing-head > span, .faq-heading > span, .closing > div > span { color: var(--accent); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.availability { display: flex; align-items: center; gap: 10px; }
.availability > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hero h1 { margin: 29px 0 26px; max-width: 630px; font-size: clamp(56px, 5.9vw, 91px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.hero h1 em, .section-intro h2 em, .steps h2 em, .pricing h2 em { font-family: var(--sans); font-style: normal; font-weight: 400; letter-spacing: -.035em; }
.hero h1 em { color: var(--accent); font-size: .93em; }
.intro { max-width: 475px; margin: 0; color: #b2bab7; font-size: 16px; line-height: 1.78; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 27px; min-height: 49px; padding: 0 18px; border: 1px solid transparent; border-radius: 5px; text-decoration: none; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s, transform .2s; }
.button:hover { transform: translateY(-2px); }
.button > span:last-child { font-size: 17px; font-weight: 400; }
.primary { background: var(--accent); color: #17191a; }
.primary:hover { background: #d9ffb1; }
.ghost { border-color: #465052; color: #e0e3df; }
.ghost:hover { border-color: #89918e; background: #191e20; }
.ghost > span:last-child { color: var(--accent); }
.microcopy { margin: 20px 0 0; color: var(--soft); font-size: 11px; }
.product { position: relative; min-width: 0; }
.product-caption { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin-bottom: 13px; color: #929c9a; font-size: 9px; letter-spacing: .07em; }
.product-caption p { max-width: 230px; margin: 0; }
.product-caption > span { color: var(--soft); font-size: 9px; letter-spacing: 0; white-space: nowrap; }
.product-caption i { display: inline-block; width: 3px; height: 3px; margin: 0 6px 2px; border-radius: 50%; background: var(--soft); }
.product-window { display: none; }
.phone-stage { position: relative; display: grid; place-items: center; height: 615px; overflow: hidden; border: 1px solid #343e40; border-radius: 9px; background: #161c1e; }
.phone-stage::before { content: ''; position: absolute; inset: 0; opacity: .35; background: linear-gradient(90deg,transparent calc(50% - .5px),#3d4948 50%,transparent calc(50% + .5px)), linear-gradient(transparent calc(50% - .5px),#3d4948 50%,transparent calc(50% + .5px)); pointer-events: none; }
.phone-stage::after { content: 'PILOT IDE  /  MOBILE WORKSPACE'; position: absolute; bottom: 20px; left: 22px; color: #6f7a7b; font: 9px var(--mono); letter-spacing: .09em; }
.phone-aura, .phone-ring, .floating-chip { display: none; }
.mobile-device { position: relative; z-index: 1; width: 304px; height: 563px; padding: 11px; overflow: hidden; border: 3px solid #444e4e; border-radius: 37px; background: #101416; box-shadow: 0 24px 50px #05080990, inset 0 0 0 1px #0a0d0e; transform: rotate(-3deg) translateY(18px); }
.mobile-device::after { content: ''; position: absolute; inset: 4px; border: 1px solid #6a747455; border-radius: 31px; pointer-events: none; }
.device-speaker { position: absolute; z-index: 2; top: 7px; left: 50%; width: 89px; height: 19px; border-radius: 0 0 12px 12px; background: #070a0b; transform: translateX(-50%); }
.device-status { display: flex; justify-content: space-between; padding: 4px 9px 0; color: #dfe4e1; font-size: 8px; font-weight: 700; }
.mobile-top { display: flex; align-items: center; justify-content: space-between; height: 45px; margin-top: 7px; padding-inline: 6px; border-bottom: 1px solid #283133; }
.mobile-brand { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.mobile-brand i { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 3px; background: var(--accent); color: #1b1c1c; font-size: 11px; font-style: normal; }
.mobile-brand strong span { color: #97a09e; font-weight: 400; }
.mobile-top button { border: 0; background: none; color: #aeb7b4; font-size: 12px; }
.mobile-project { position: relative; margin: 11px 5px 8px; padding: 9px 10px; border: 1px solid #323c3e; border-radius: 5px; background: #1b2224; }
.mobile-project span, .mobile-meta span, .mobile-files > span { display: block; color: #8b9695; font: 7px var(--mono); letter-spacing: .07em; }
.mobile-project b { display: block; margin-top: 4px; font-size: 10px; }
.mobile-project > i { position: absolute; top: 14px; right: 10px; color: #9ca8a5; font-size: 10px; font-style: normal; }
.mobile-meta { display: flex; justify-content: space-between; padding: 3px 7px; }
.mobile-meta b { display: flex; align-items: center; gap: 4px; color: #b7d3bd; font-size: 7px; }
.mobile-meta b i { width: 5px; height: 5px; border-radius: 50%; background: #87bd92; }
.mobile-message { max-width: 218px; margin: 8px 6px; padding: 9px 10px; border-radius: 7px; font-size: 8px; line-height: 1.5; }
.mobile-message.user { margin-left: auto; border-bottom-right-radius: 2px; background: #354144; color: #f1f3ef; }
.mobile-message.assistant { border: 1px solid #353f40; border-bottom-left-radius: 2px; background: #202729; color: #c6cfcb; }
.mobile-message.assistant b { color: #f0eee8; }
.mobile-working { display: flex; align-items: center; gap: 8px; margin: 11px 6px; padding: 8px 0; border-block: 1px solid #283233; }
.mobile-working > i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #6f9252; border-radius: 4px; color: var(--accent); font-size: 10px; font-style: normal; }
.mobile-working span { display: block; color: #959f9b; font: 7px var(--mono); text-transform: uppercase; }
.mobile-working b { display: block; margin-top: 3px; color: #d7dcda; font-size: 8px; }
.mobile-working em { font-style: normal; }
.mobile-working em i { display: inline-block; width: 3px; height: 3px; margin-left: 2px; border-radius: 50%; background: var(--accent); }
.mobile-approval { margin: 8px 6px; padding: 9px; border: 1px solid #507448; border-radius: 5px; background: #202b21; }
.mobile-approval > div { display: flex; align-items: center; gap: 7px; }
.mobile-approval > div > i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); color: #20201e; font-size: 10px; font-style: normal; font-weight: 700; }
.mobile-approval p { margin: 0; font-size: 8px; }
.mobile-approval p b { display: block; color: #e7f5e0; }
.mobile-approval p span { display: block; margin-top: 2px; color: #aaa79f; font-size: 7px; }
.mobile-approval button { width: 100%; margin-top: 8px; padding: 7px; border: 0; border-radius: 3px; background: var(--accent); color: #22201e; text-align: left; font-size: 8px; font-weight: 700; }
.mobile-approval strong { float: right; font-size: 11px; }
.mobile-files { margin: 10px 6px 0; padding: 9px; border-top: 1px solid #2b3435; }
.mobile-files > b { float: right; margin-top: -10px; padding: 1px 5px; border: 1px solid #384143; border-radius: 8px; color: #c3cbc7; font-size: 7px; }
.mobile-files p { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #cad0cb; font: 7px var(--mono); }
.mobile-files p i { display: grid; place-items: center; width: 11px; height: 11px; border: 1px solid #4a5555; border-radius: 2px; color: #a9b5af; font-style: normal; }
.mobile-files p em { margin-left: auto; color: #9dc7a4; font-style: normal; }
.mobile-composer { position: absolute; right: 11px; bottom: 20px; left: 11px; display: flex; align-items: center; padding: 9px; border: 1px solid #354042; border-radius: 5px; background: #1a2022; color: #8d9894; font-size: 8px; }
.mobile-composer b { display: grid; place-items: center; width: 16px; height: 16px; margin-left: auto; border-radius: 3px; background: var(--accent); color: #1d1f1e; font-size: 11px; }
.mobile-home { position: absolute; bottom: 7px; left: 50%; width: 80px; height: 3px; border-radius: 5px; background: #e9eeea; transform: translateX(-50%); }
.benefits { padding-block: 112px 120px; }
.section-intro h2, .steps h2, .pricing h2, .faq h2 { margin: 20px 0 0; font-size: clamp(43px, 4.4vw, 66px); font-weight: 600; line-height: 1.04; letter-spacing: -.05em; }
.section-intro h2 em, .steps h2 em, .pricing h2 em { color: var(--accent); }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 57px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.benefit-grid article { position: relative; min-height: 260px; padding: 29px 35px 32px 0; }
.benefit-grid article + article { padding-left: 35px; border-left: 1px solid var(--line); }
.number { color: var(--accent); font: 10px var(--mono); }
.benefit-icon { display: flex; align-items: center; gap: 4px; height: 36px; margin-top: 29px; color: var(--accent); font-size: 25px; }
.benefit-icon i { display: block; width: 5px; border-radius: 1px; background: var(--accent); }
.benefit-icon i:first-child { height: 11px; }
.benefit-icon i:nth-child(2) { height: 19px; }
.benefit-icon i:last-child { height: 27px; }
.benefit-grid h3 { margin: 18px 0 9px; font-size: 19px; font-weight: 600; letter-spacing: -.045em; }
.benefit-grid p { max-width: 300px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.steps { display: grid; grid-template-columns: .85fr 1.15fr; gap: 11%; padding-block: 105px; border-top: 1px solid var(--line); }
.steps-copy p { max-width: 360px; margin: 22px 0 26px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.under-link { display: inline-flex; gap: 28px; padding-bottom: 7px; border-bottom: 1px solid var(--accent); color: var(--text); text-decoration: none; font-size: 12px; font-weight: 700; }
.under-link span:last-child { color: var(--accent); }
.steps ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.steps li { display: flex; gap: 35px; padding: 27px 0 30px; border-bottom: 1px solid var(--line); }
.steps li > span { padding-top: 4px; color: var(--accent); font: 11px var(--mono); }
.steps h3 { margin: 0 0 7px; font-size: 18px; font-weight: 600; letter-spacing: -.035em; }
.steps li p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pricing { padding-block: 110px; border-top: 1px solid var(--line); }
.plan { margin: 0; color: var(--accent); font: 10px var(--mono); letter-spacing: .1em; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.pricing-option { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 468px; overflow: hidden; border: 1px solid #3e4a41; border-radius: 8px; background: #171d19; }
.pricing-option::before { content: ''; height: 4px; background: #435b43; }
.pricing-option.featured { border-color: #89b76b; background: #1d2a1f; }
.pricing-option.featured::before { background: var(--accent); }
.pricing-option-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 21px 27px; border-bottom: 1px solid #344138; }
.plan-number { color: #829184; font: 10px var(--mono); letter-spacing: .07em; }
.plan-period { color: var(--text); font-size: 16px; font-weight: 600; letter-spacing: -.025em; }
.pricing-option .plan { margin: 27px 27px 0; }
.pricing-option h3 { margin: 12px 27px 0; color: var(--text); font-size: clamp(40px, 4.1vw, 55px); font-weight: 600; line-height: 1; letter-spacing: -.055em; }
.pricing-option .price-period { margin: 7px 27px 0; color: var(--muted); font-size: 13px; }
.price-insight { display: flex; flex-direction: column; gap: 5px; min-height: 70px; margin: 24px 27px 0; padding: 13px 0; border-block: 1px solid #344138; }
.price-insight span { color: var(--muted); font-size: 12px; }
.price-insight strong { color: var(--accent); font-size: 12px; font-weight: 600; }
.pricing-option ul { display: grid; gap: 9px; margin: 20px 27px 25px; padding: 0; color: #c7d0c8; list-style: none; font-size: 12px; line-height: 1.4; }
.pricing-option li::before { content: '✓'; margin-right: 10px; color: var(--accent); }
.pricing-option .button { width: calc(100% - 54px); margin: auto 27px 27px; justify-content: space-between; text-align: left; }
.pricing-footnote { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
.faq { display: grid; grid-template-columns: .85fr 1.15fr; gap: 11%; padding-block: 110px 125px; border-top: 1px solid var(--line); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary b { color: var(--accent); font-size: 21px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary b { transform: rotate(45deg); }
.faq details p { max-width: 530px; margin: 0 0 23px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.closing { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 70px; padding: 56px 65px; border: 1px solid #4c6546; border-radius: 8px; background: #263226; }
.closing > div > span { display: flex; align-items: center; gap: 10px; }
.closing > div > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.closing h2 { margin: 17px 0 0; font-size: clamp(42px, 4.5vw, 65px); font-weight: 600; line-height: 1.02; letter-spacing: -.07em; }
.dark { background: var(--text); color: #1b1f20; white-space: nowrap; }
.dark:hover { background: #fff; }
.dark > span:last-child { color: var(--accent-dim); }
footer.shell { display: flex; align-items: center; gap: 30px; padding-block: 29px 40px; border-top: 1px solid var(--line); color: var(--soft); font-size: 11px; }
footer > span:nth-last-child(2) { flex: 1; }
footer .brand { font-size: 14px; }
footer .brand-mark { width: 24px; height: 24px; font-size: 15px; }
@font-face { font-family: CursorGothic; src: url('https://cursor.com/marketing-static/_next/static/media/CursorGothic_Regular-s.p.05-84umc_47y9.woff2?dpl=dpl_99EAFtyTGULaGyXoAjEGxTtPEwCx') format('woff2'); font-display: swap; font-weight: 400; }
@font-face { font-family: CursorGothic; src: url('https://cursor.com/marketing-static/_next/static/media/CursorGothic_Bold-s.p.15hkw~ebmtjvr.woff2?dpl=dpl_99EAFtyTGULaGyXoAjEGxTtPEwCx') format('woff2'); font-display: swap; font-weight: 700; }
.cursor-type { font-family: CursorGothic, Arial, sans-serif; letter-spacing: -.045em; }
@media (max-width: 1050px) {
  .shell { width: min(100% - 48px, 1240px); }
  .hero-layout { gap: 35px; }
  .hero h1 { font-size: clamp(54px, 6vw, 72px); }
  .phone-stage { height: 570px; }
  .mobile-device { transform: rotate(-3deg) translateY(26px) scale(.91); }
}
@media (max-width: 760px) {
  .shell { width: min(100% - 36px, 560px); }
  .nav { height: 68px; }
  .nav nav { display: none; }
  .nav-action { gap: 7px; font-size: 11px; }
  .hero-layout { display: block; min-height: 0; padding-block: 70px 75px; }
  .hero { padding: 0; }
  .hero h1 { max-width: 540px; margin-block: 22px 22px; font-size: clamp(55px, 12vw, 78px); }
  .intro { font-size: 14px; line-height: 1.7; }
  .hero-actions { margin-top: 28px; }
  .microcopy { margin-bottom: 61px; }
  .product-caption > span { display: none; }
  .phone-stage { height: 540px; }
  .mobile-device { transform: rotate(-3deg) translateY(20px) scale(.85); }
  .benefits { padding-block: 82px; }
  .section-intro h2, .steps h2, .pricing h2, .faq h2 { font-size: clamp(43px, 9vw, 56px); }
  .benefit-grid { display: block; margin-top: 38px; }
  .benefit-grid article, .benefit-grid article + article { min-height: 0; padding: 25px 0 31px; border-left: 0; border-bottom: 1px solid var(--line); }
  .benefit-grid article:last-child { border-bottom: 0; }
  .benefit-icon { margin-top: 20px; }
  .steps, .faq { grid-template-columns: 1fr; gap: 38px; padding-block: 83px; }
  .pricing { padding-block: 83px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .pricing-option { min-height: 0; }
  .faq { padding-bottom: 90px; }
  .closing { flex-direction: column; align-items: stretch; padding: 39px 30px; margin-bottom: 40px; }
  .closing .button { width: fit-content; }
  footer.shell { gap: 15px; }
  footer > span:nth-last-child(2) { display: none; }
  footer > span:last-child { margin-left: auto; }
}
@media (max-width: 400px) {
  .hero h1 { font-size: 51px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .phone-stage { height: 500px; }
  .mobile-device { transform: rotate(-3deg) translateY(29px) scale(.77); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button, .faq summary b { transition: none; } }
.compat{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:22px}
.compat-label{color:var(--soft);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.badge-row{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.badge{padding:7px 13px;border:1px solid #465052;border-radius:999px;background:#191e20;color:#e0e3df;font-size:12px;font-weight:700}
