:root{
  color-scheme:dark;
  --bg:#0b0d12;
  --panel:#12151c;
  --panel-raised:#171b23;
  --line:#2b303a;
  --text:#f4f4f6;
  --muted:#a4abb7;
  --lime:#c8f169;
  --font:'Segoe UI',Arial,sans-serif;
  --display:'Segoe UI Variable Display','Segoe UI',Arial,sans-serif;
  --mono:'Cascadia Code',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{min-width:320px;margin:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
::selection{background:var(--lime);color:#111907}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.container{width:min(100% - 56px,1180px);margin-inline:auto}
.skip-link{position:fixed;z-index:100;top:-100px;left:12px;padding:10px 14px;background:var(--lime);color:#111907}
.skip-link:focus{top:10px}

/* Navigation follows the desktop application's palette. */
.site-header{border-bottom:1px solid #242a32;background:#0b0d12}
.header-inner{display:flex;align-items:center;gap:42px;min-height:78px}
.brand{display:inline-flex;align-items:center;gap:10px;flex:none;font:800 17px var(--display);letter-spacing:-.055em}
.brand img{border-radius:8px}
.header-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.header-nav a{color:#bac1ca;font-size:13px;font-weight:600}
.header-nav a:hover,.inline-link:hover{color:var(--lime)}
.header-action{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:42px;padding:0 17px;border:1px solid #687956;border-radius:5px;color:var(--lime);font-size:13px;font-weight:750;white-space:nowrap}
.header-action:hover{border-color:var(--lime);background:#c8f16914}
.header-action span{font-size:17px;font-weight:400}

.eyebrow{display:flex;align-items:center;gap:12px;margin:0;color:var(--lime);font:800 11px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.eyebrow-line{display:block;width:22px;height:2px;background:var(--lime)}
h1,h2,h3,p,figure{margin-top:0}
h1,h2,h3{font-family:var(--display);letter-spacing:-.055em}
.button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:13px 20px;border:1px solid transparent;border-radius:7px;font-size:14px;font-weight:750;line-height:1.15;transition:transform .15s ease,background .15s ease}
.button:hover{transform:translateY(-2px)}
.button span{font-size:18px;font-weight:400}
.button-primary{background:var(--lime);color:#12190c}
.button-primary:hover{background:#dcff91}
.button-quiet{border-color:#444d59;background:#141820;color:var(--text)}
.button-quiet:hover{border-color:#96ae6e;background:#1b221d}

/* A real application capture is the main proof in the hero. */
.hero{padding-top:94px;padding-bottom:78px}
.hero-copy{max-width:1020px}
.hero h1{max-width:1020px;margin:20px 0 23px;font-size:clamp(50px,6.1vw,88px);font-weight:750;line-height:1.035}
.hero-highlight{color:var(--lime)}
.hero-lead{max-width:740px;color:#bac2cd;font-size:clamp(17px,1.65vw,21px);line-height:1.55}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-meta{margin:19px 0 0;color:#8f99a6;font-size:12px;font-weight:550}
.hero-meta span{padding-inline:8px;color:#677180}
.hero-product{margin:70px 0 0}
.product-frame{overflow:hidden;padding:7px;border:1px solid #53644d;border-radius:14px;background:#151a20;box-shadow:0 25px 50px #0006}
.product-frame img{width:100%;height:auto;border-radius:7px}
.hero-product figcaption,.feature-shot figcaption{display:flex;align-items:center;gap:8px;margin-top:11px;color:#8c97a3;font-size:12px;line-height:1.4}
.caption-mark{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime)}

.flow-strip{border-block:1px solid #303943;background:#141820;color:#e4e8ec}
.flow-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.flow-inner span{display:flex;align-items:center;gap:18px;min-height:76px;font-size:13px;font-weight:650}
.flow-inner span+span{border-left:1px solid #38404a;padding-left:25px}
.flow-inner b{color:var(--lime);font:800 12px var(--mono);letter-spacing:.04em}
.section{padding-block:118px}
.how-section{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:100px}
.section-heading h2,.feature-copy h2,.faq-intro h2,.video-inner h2,.included-heading h2{margin:15px 0 0;font-size:clamp(36px,4.2vw,58px);font-weight:720;line-height:1.09}
.section-lead{margin:0 0 34px;color:#b3bdc7;font-size:18px;line-height:1.62}
.how-list{margin:0;padding:0;list-style:none}
.how-list li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:24px 0;border-top:1px solid #343b44}
.how-list li:last-child{border-bottom:1px solid #343b44}
.how-list li>span{padding-top:5px;color:var(--lime);font:800 12px var(--mono)}
.how-list h3{margin:0 0 6px;font-size:21px;font-weight:720}
.how-list p{max-width:530px;margin:0;color:#a5afbb;font-size:15px;line-height:1.6}
.inline-link{display:inline-flex;align-items:center;gap:10px;color:var(--lime);font-size:14px;font-weight:750;text-decoration:underline;text-underline-offset:4px}
.how-link{margin-top:29px}

/* Feature images remain visible, framed like the desktop window. */
.feature-dark{background:#11151c}
.feature-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:62px}
.feature-copy h2{margin-bottom:26px}
.feature-copy>p:not(.eyebrow){max-width:500px;margin-bottom:17px;color:#b0bac4;font-size:16px;line-height:1.64}
.feature-footnote{display:inline-block;margin-top:13px;padding-top:12px;border-top:1px solid #4a5349;color:var(--lime);font:700 12px var(--mono);letter-spacing:.06em}
.feature-shot{min-width:0;margin:0}
.feature-shot img{width:100%;height:100%;max-height:550px;aspect-ratio:1.44;object-fit:cover;object-position:center;border:1px solid #49544c;border-radius:8px;background:#0b0d12}
.feature-shot figcaption{color:#8f9aa5}
.shot-timeline img{object-position:center 43%}
.caption-section{background:#0e1218}
.feature-reverse{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.shot-captions img{border-color:#49544c;object-position:center 45%}

/* Included features answer what the buyer will receive. */
.included-section{border-block:1px solid #343e31;background:#171d19}
.included-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:100px}
.included-heading h2{max-width:530px;margin-bottom:20px}
.included-heading>p:not(.eyebrow){max-width:480px;color:#aeb9b0;font-size:16px;line-height:1.6}
.included-heading .button{margin-top:18px}
.included-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;align-content:start;margin:0;padding:0;list-style:none}
.included-list li{display:grid;grid-template-columns:27px 1fr;gap:10px;min-height:108px;padding:18px 0;border-top:1px solid #465044}
.included-list li:nth-last-child(-n+2){border-bottom:1px solid #465044}
.included-list li>span{padding-top:3px;color:var(--lime);font:700 11px var(--mono)}
.included-list strong{font-size:16px}
.included-list p{margin:5px 0 0;color:#acb7ae;font-size:13px;line-height:1.5}

/* A video section appears only after a real demo URL has been configured. */
.video-section{background:#11151c}
.video-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:90px}
.video-inner h2{margin-bottom:22px}
.video-inner p:not(.eyebrow){max-width:460px;color:#afb9c4;font-size:16px;line-height:1.62}
.video-area{min-width:0}
.video-demo{overflow:hidden;aspect-ratio:16/9;border:1px solid #46524a;border-radius:8px;background:#090b0e}
.video-demo video,.video-demo iframe{display:block;width:100%;height:100%;border:0}
.video-demo>a{display:grid;place-items:center;width:100%;height:100%;color:var(--lime);font-weight:700}

.faq-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:100px}
.faq-intro h2{max-width:420px}
.faq-list{border-top:1px solid #343c46}
.faq-list details{border-bottom:1px solid #343c46}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:74px;padding:19px 2px;cursor:pointer;list-style:none;font-size:16px;font-weight:700}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #698152;border-radius:50%;color:var(--lime);font-size:19px;font-weight:400;line-height:1;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list details p{max-width:590px;margin:-2px 38px 22px 2px;color:#a7b0bc;font-size:15px;line-height:1.65}

/* A single prominent closing action, without invented discounts or scarcity. */
.offer-section{border-top:1px solid #506a42;background:#151d16}
.offer-inner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:end;gap:80px;padding-block:96px}
.offer-section h2{max-width:720px;margin:16px 0 20px;font-size:clamp(42px,4.7vw,66px);font-weight:750;line-height:1.05}
.offer-section p:not(.eyebrow){max-width:580px;margin:0;color:#b7c3b7;font-size:17px;line-height:1.5}
.offer-action{padding-bottom:6px}
.button-dark{width:100%;background:var(--lime);color:#12190c}
.button-dark:hover{background:#dcff91}
.checkout-pending{display:flex;flex-direction:column;gap:8px;padding:21px 0 0;border-top:1px solid #5a7548}
.checkout-pending strong{font-size:18px;letter-spacing:-.025em}
.checkout-pending span{color:#aebcae;font-size:14px;line-height:1.5}
.site-footer{border-top:1px solid #242b31;background:#0a0c10;color:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:98px}
.footer-inner>span{color:#939da7;font-size:12px}
.footer-brand{font-size:16px}

@media(max-width:950px){
  .container{width:min(100% - 40px,740px)}
  .header-inner{gap:22px}
  .header-nav{gap:16px}
  .hero{padding-top:75px}
  .how-section,.feature-grid,.feature-reverse,.included-grid,.video-inner,.faq-section,.offer-inner{grid-template-columns:1fr;gap:38px}
  .section{padding-block:85px}
  .feature-copy h2{max-width:670px}
  .feature-copy>p:not(.eyebrow){max-width:680px}
  .feature-reverse .feature-shot{order:2}
  .feature-reverse .feature-copy{order:1}
  .feature-shot img{max-height:none}
  .included-list{max-width:740px}
  .offer-inner{align-items:start}
  .offer-action{max-width:480px}
}
@media(max-width:620px){
  .container{width:min(100% - 32px,520px)}
  .header-inner{min-height:64px;gap:9px}
  .brand{font-size:16px}
  .brand img{width:29px;height:29px}
  .header-nav{display:none}
  .header-action{min-height:36px;margin-left:auto;padding:0 11px;font-size:11px;gap:6px}
  .header-action span{font-size:14px}
  .hero{padding-top:62px;padding-bottom:58px}
  .hero h1{margin-block:17px 18px;font-size:clamp(41px,10.8vw,58px);letter-spacing:-.066em}
  .hero-lead{font-size:16px;line-height:1.57}
  .hero-actions{flex-direction:column;margin-top:24px}
  .hero-actions .button{width:100%}
  .hero-meta{font-size:11px;line-height:1.6}
  .hero-meta span{padding-inline:3px}
  .hero-product{margin-top:44px}
  .product-frame{aspect-ratio:1.18;padding:4px;border-radius:8px}
  .product-frame img{width:100%;height:100%;border-radius:4px;object-fit:cover;object-position:center}
  .hero-product figcaption{font-size:11px;line-height:1.5}
  .flow-inner{grid-template-columns:1fr;gap:0;padding-block:9px}
  .flow-inner span{min-height:41px;font-size:12px}
  .flow-inner span+span{border-left:0;padding-left:0}
  .section{padding-block:68px}
  .section-heading h2,.feature-copy h2,.faq-intro h2,.video-inner h2,.included-heading h2{font-size:clamp(35px,9vw,45px)}
  .how-section,.feature-grid,.video-inner,.faq-section{gap:27px}
  .section-lead{margin-bottom:14px;font-size:16px}
  .how-list li{grid-template-columns:28px 1fr;gap:10px;padding-block:19px}
  .how-list h3{font-size:19px}
  .how-list p{font-size:14px}
  .feature-copy h2{margin-bottom:18px}
  .feature-copy>p:not(.eyebrow){font-size:15px}
  .feature-shot img{aspect-ratio:1.18}
  .shot-timeline img{object-position:center}
  .shot-captions img{aspect-ratio:1.1}
  .feature-shot figcaption{font-size:11px}
  .included-grid{gap:27px}
  .included-heading>p:not(.eyebrow){font-size:15px}
  .included-heading .button{width:100%}
  .included-list{grid-template-columns:1fr}
  .included-list li{min-height:0;padding:17px 0}
  .included-list li:nth-last-child(2){border-bottom:0}
  .faq-list summary{min-height:66px;font-size:15px}
  .faq-list details p{margin-right:0;font-size:14px}
  .offer-inner{gap:24px;padding-block:70px}
  .offer-section h2{font-size:clamp(39px,10vw,52px)}
  .offer-section p:not(.eyebrow){font-size:15px}
  .checkout-pending strong{font-size:16px}
  .footer-inner{align-items:flex-start;flex-direction:column;justify-content:center;gap:12px;padding-block:22px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .button,.faq-list summary span{transition:none}
}