:root { --ink:#18241f; --paper:#f8f7f2; --white:#fffefb; --green:#1d725c; --green-dark:#125443; --mint:#d9eee6; --gold:#f2af49; --muted:#66736c; --line:#dcded6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
a { color:inherit; text-decoration:none; }
.site-header { width:min(1220px,calc(100% - 48px)); height:86px; margin:0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:30px; border-bottom:1px solid #18241f1f; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand>span:last-child { display:grid; line-height:1; }
.brand strong { font-size:16px; letter-spacing:-.035em; }
.brand small { margin-top:5px; color:var(--green); font-size:8px; letter-spacing:.34em; font-weight:900; }
.brand-mark { width:33px; height:33px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; transform:rotate(-8deg); }
.brand-mark i { display:block; align-self:end; border-radius:10px 10px 3px 3px; background:var(--green); }
.brand-mark i:first-child { height:18px; background:var(--gold); }
.brand-mark i:nth-child(2) { height:30px; }
.brand-mark i:nth-child(3) { height:23px; background:#77b4a5; }
nav { display:flex; align-items:center; gap:28px; font-size:12px; font-weight:800; }
nav a:hover { color:var(--green); }
.account-actions { justify-self:end; display:flex; align-items:center; gap:10px; }
.text-button,.account-button { border:0; background:transparent; min-height:40px; padding:0 14px; border-radius:999px; font-size:11px; font-weight:900; }
.account-button { background:var(--ink); color:#fff; padding-inline:18px; }
.account-button:hover { background:var(--green); }
.hero { width:min(1220px,calc(100% - 48px)); min-height:660px; margin:0 auto; padding:72px 0 92px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:85px; }
.eyebrow { display:flex; align-items:center; gap:9px; color:var(--green); font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow span { width:30px; height:2px; background:var(--gold); }
.hero h1 { margin:19px 0 24px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(56px,6.3vw,88px); line-height:.96; letter-spacing:-.055em; font-weight:500; }
.hero h1 em { color:var(--green); font-weight:500; }
.hero-copy>p { max-width:620px; margin:0; color:var(--muted); font-size:17px; line-height:1.75; }
.hero-actions { margin-top:31px; display:flex; align-items:center; gap:26px; }
.primary-button { border:0; border-radius:999px; padding:15px 21px; display:inline-flex; align-items:center; justify-content:center; gap:18px; background:var(--green); color:#fff; box-shadow:0 12px 28px #1d725c2e; font-size:12px; font-weight:900; transition:.2s; }
.primary-button:hover { background:var(--green-dark); transform:translateY(-1px); }
.primary-button:disabled { opacity:.65; cursor:wait; }
.primary-button.wide { width:100%; }
.text-link { border-bottom:1px solid #18241f4d; padding-bottom:4px; font-size:12px; font-weight:900; }
.trust-row { margin-top:24px; display:flex; flex-wrap:wrap; gap:16px; color:#68766f; font-size:9px; font-weight:800; }
.trust-row span::first-letter { color:var(--green); }
.dashboard-preview { position:relative; min-height:475px; padding:27px; border:8px solid #1f2b26; border-radius:30px; background:#fff; transform:rotate(1.5deg); box-shadow:0 28px 65px #18241f33; }
.dashboard-preview::before { content:""; position:absolute; z-index:-1; inset:-52px -35px; border-radius:48% 52% 44% 56%; background:#e2eee8; transform:rotate(-6deg); }
.preview-head { padding-bottom:18px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.preview-head .brand-mark { width:25px; height:25px; }
.preview-head .brand strong { font-size:11px; }
.preview-head .brand small { font-size:6px; }
.preview-head>span,.preview-greeting { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.14em; }
.preview-greeting { margin:25px 0 6px; }
.dashboard-preview>h2 { margin:0 0 20px; font-family:Georgia,serif; font-size:27px; }
.preview-app { padding:15px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; border:1px solid #cfe0d8; border-radius:14px; background:#f1f8f5; }
.preview-app>div:nth-child(2) { display:grid; gap:4px; }
.preview-app b { font-size:11px; }
.preview-app span { color:var(--green); font-size:8px; font-weight:800; }
.preview-app i { color:var(--green); font-size:9px; font-weight:900; font-style:normal; }
.app-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:14px; font-size:11px; font-weight:900; }
.mint { background:#cce9df; }.sun { background:#f8dfaa; }.sky { background:#cce3ec; }.ice { background:#d9e8ed; }
.preview-stat { margin-top:13px; padding:17px; display:grid; grid-template-columns:1fr auto; gap:4px; border-radius:14px; background:var(--ink); color:#fff; }
.preview-stat span { color:#8fc1b2; font-size:7px; letter-spacing:.14em; font-weight:900; }
.preview-stat strong { grid-row:1/3; grid-column:2; align-self:center; color:#aee2d1; font-family:Georgia,serif; font-size:27px; }
.preview-stat small { color:#98a8a1; font-size:8px; }
.preview-note { margin-top:13px; padding:14px; display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:13px; }
.preview-note>span { width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-weight:900; }
.preview-note p { margin:0; display:grid; gap:3px; }
.preview-note b { font-size:9px; }.preview-note small { color:var(--muted); font-size:8px; }
.apps-section { padding:100px max(24px,calc((100vw - 1220px)/2)); background:#1a2a24; color:#f9faf6; }
.section-heading { margin-bottom:44px; display:flex; justify-content:space-between; align-items:end; gap:50px; }
.section-number { color:#80b5a6; font-size:9px; font-weight:900; letter-spacing:.18em; }
.section-heading h2,.pricing-intro h2,.how-section h2,.code-section h2 { margin:10px 0 0; font-family:Georgia,serif; font-size:clamp(38px,4.5vw,60px); line-height:1.05; letter-spacing:-.04em; font-weight:500; }
.section-heading>p { max-width:420px; margin:0; color:#b6c1bc; font-size:14px; line-height:1.65; }
.featured-app { min-height:500px; padding:42px; display:grid; grid-template-columns:1.15fr .85fr; gap:70px; align-items:center; border:1px solid #ffffff1a; border-radius:25px; background:#f8f8f4; color:var(--ink); }
.featured-copy { position:relative; }
.featured-copy>.app-icon { margin-bottom:22px; }
.available-pill { position:absolute; top:0; right:0; padding:7px 10px; border-radius:999px; background:#d1ebdf; color:#176247; font-size:8px; font-weight:900; letter-spacing:.1em; }
.featured-copy>p { margin:0 0 8px; color:var(--green); font-size:9px; font-weight:900; letter-spacing:.15em; }
.featured-copy h3 { max-width:600px; margin:0 0 16px; font-family:Georgia,serif; font-size:clamp(33px,3.7vw,52px); line-height:1.03; letter-spacing:-.04em; }
.featured-copy>span { max-width:640px; display:block; color:var(--muted); font-size:14px; line-height:1.7; }
.featured-copy ul,.price-card ul { margin:22px 0 27px; padding:0; display:grid; gap:10px; list-style:none; }
.featured-copy li,.price-card li { position:relative; padding-left:22px; color:#536159; font-size:11px; }
.featured-copy li::before,.price-card li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }
.result-demo { padding:28px; border-radius:20px; background:#192923; color:#fff; box-shadow:0 20px 45px #0b17122b; }
.result-demo>span { color:#8fc1b2; font-size:8px; font-weight:900; letter-spacing:.15em; }
.result-demo>b { margin:7px 0 25px; display:block; font-family:Georgia,serif; font-size:20px; }
.result-demo>div { padding:17px 0; display:flex; justify-content:space-between; align-items:center; border-top:1px solid #ffffff1f; }
.result-demo small { color:#91a19a; font-size:8px; font-weight:900; letter-spacing:.1em; }
.result-demo strong { font-size:18px; }
.result-demo .retail-demo { margin:0 -11px; padding:20px 11px; border:0; border-radius:12px; background:#25473b; }
.result-demo .retail-demo strong { color:#aee2d1; font-family:Georgia,serif; font-size:32px; }
.result-demo footer { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.result-demo footer span { color:#84938c; display:grid; gap:5px; font-size:7px; letter-spacing:.09em; }
.result-demo footer b { color:#fff; font-size:15px; letter-spacing:0; }
.coming-grid { margin-top:18px; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }
.coming-grid article { min-height:260px; padding:23px; border-radius:18px; background:#f8f8f4; color:var(--ink); }
.coming-grid article>span { float:right; margin-top:-42px; color:#78837d; font-size:7px; font-weight:900; letter-spacing:.1em; }
.coming-grid p { margin:27px 0 7px; color:var(--green); font-size:8px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.coming-grid h3 { margin:0 0 12px; font-family:Georgia,serif; font-size:23px; }
.coming-grid small { color:var(--muted); font-size:11px; line-height:1.55; }
.pricing-section { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:112px 0; display:grid; grid-template-columns:1fr 430px; gap:100px; align-items:center; }
.pricing-intro .section-number { color:var(--green); }
.pricing-intro h2 { margin:14px 0 22px; }
.pricing-intro>p { max-width:560px; color:var(--muted); font-size:15px; line-height:1.75; }
.billing-toggle { width:fit-content; margin-top:29px; padding:5px; display:flex; gap:4px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.billing-toggle button { border:0; border-radius:999px; padding:11px 16px; background:transparent; font-size:10px; font-weight:900; }
.billing-toggle button.active { background:var(--ink); color:#fff; }
.billing-toggle span { margin-left:5px; color:#63b49d; font-size:7px; }
.price-card { padding:32px; border:1px solid #ced8d1; border-radius:23px; background:#fff; box-shadow:0 18px 50px #18241f14; }
.price-card>span { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.16em; }
.price { margin:16px 0 8px; display:flex; align-items:end; gap:12px; }
.price strong { font-family:Georgia,serif; font-size:54px; letter-spacing:-.05em; }
.price small { margin-bottom:8px; color:var(--muted); font-size:8px; line-height:1.4; }
.price-card>p { margin:0; color:var(--muted); font-size:11px; }
.price-card ul { padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stripe-note { margin-top:13px; display:block; text-align:center; color:#89938e; font-size:8px; }
.how-section { padding:100px max(24px,calc((100vw - 1120px)/2)); background:#e2eee8; }
.how-section .section-number { color:var(--green); }
.how-section h2 { max-width:720px; margin:13px 0 45px; }
.how-section>div { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.how-section article { padding:27px; border:1px solid #cbdcd4; border-radius:17px; background:#ffffff94; }
.how-section article>b { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#fff; font-size:10px; }
.how-section h3 { margin:23px 0 8px; font-family:Georgia,serif; font-size:20px; }
.how-section p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; }
.code-section { width:min(1120px,calc(100% - 48px)); margin:80px auto; padding:48px; display:flex; justify-content:space-between; align-items:center; gap:40px; border-radius:23px; background:var(--ink); color:#fff; }
.code-section>div>span { color:#8fc1b2; font-size:8px; font-weight:900; letter-spacing:.15em; }
.code-section h2 { margin:9px 0 10px; font-size:34px; }
.code-section p { margin:0; color:#aeb9b4; font-size:11px; }
.code-section>button { flex:none; border:0; border-radius:999px; padding:15px 20px; background:#aee2d1; color:var(--ink); font-size:10px; font-weight:900; }
.site-footer { width:min(1120px,calc(100% - 48px)); margin:0 auto; padding:35px 0 47px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.site-footer>p { text-align:center; }.site-footer>div { display:grid; gap:5px; text-align:right; }.site-footer a { color:var(--green); font-weight:900; }
.modal-backdrop { position:fixed; z-index:100; inset:0; padding:20px; display:grid; place-items:center; background:#0d1713b8; backdrop-filter:blur(5px); }
.account-modal { position:relative; width:min(470px,100%); max-height:90vh; overflow:auto; padding:35px; border-radius:23px; background:var(--white); box-shadow:0 28px 90px #0006; }
.modal-close { position:absolute; top:15px; right:15px; width:35px; height:35px; border:0; border-radius:50%; background:#edf0eb; font-size:23px; }
.modal-kicker { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.16em; }
.account-modal h2 { margin:10px 0 9px; font-family:Georgia,serif; font-size:34px; letter-spacing:-.035em; }
.account-modal>p { margin:0 0 24px; color:var(--muted); font-size:11px; line-height:1.6; }
.account-modal form { display:grid; gap:14px; }
.account-modal label { display:grid; gap:6px; }
.account-modal label span { color:#4f5d56; font-size:9px; font-weight:900; }
.account-modal input { width:100%; height:45px; padding:0 12px; border:1px solid #d5dad4; border-radius:10px; outline:0; background:#fff; font-size:12px; }
.account-modal input:focus { border-color:var(--green); box-shadow:0 0 0 3px #1d725c16; }
.form-message { margin-top:14px; padding:11px; border-radius:9px; background:#edf5f1; color:var(--green-dark); font-size:9px; line-height:1.5; }
.switch-auth { width:100%; margin-top:16px; border:0; background:transparent; color:var(--green); font-size:9px; font-weight:900; }
.account-email { margin-bottom:17px!important; }
.access-card { margin:18px 0; padding:14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; border:1px solid var(--line); border-radius:14px; }
.access-card.unlocked { border-color:#9ccab9; background:#edf7f3; }
.access-card>div:nth-child(2) { display:grid; gap:4px; }
.access-card b { font-size:10px; }.access-card span { color:var(--muted); font-size:8px; text-transform:capitalize; }
.access-card i { color:var(--green); font-size:8px; font-style:normal; font-weight:900; }
.account-links { margin-top:18px; padding-top:14px; display:flex; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); }
.account-links button { border:0; background:transparent; color:var(--green); font-size:8px; font-weight:900; }
@media (max-width:900px) { .site-header { grid-template-columns:1fr 1fr; }.site-header nav { display:none; }.hero { grid-template-columns:1fr; gap:70px; }.hero-copy { text-align:center; }.eyebrow,.hero-actions,.trust-row { justify-content:center; }.hero-copy>p { margin-inline:auto; }.dashboard-preview { width:min(520px,100%); margin:0 auto; }.featured-app { grid-template-columns:1fr; }.coming-grid { grid-template-columns:1fr 1fr; }.pricing-section { grid-template-columns:1fr; gap:45px; }.price-card { width:min(500px,100%); }.how-section>div { grid-template-columns:1fr; }.site-footer { grid-template-columns:1fr; text-align:center; }.site-footer>p,.site-footer>div { text-align:center; }.site-footer .brand { margin:auto; } }
@media (max-width:620px) { .site-header,.hero,.pricing-section,.code-section,.site-footer { width:min(100% - 30px,1220px); }.site-header { height:76px; }.account-actions .text-button { display:none; }.hero { min-height:auto; padding:52px 0 72px; }.hero h1 { font-size:clamp(48px,15vw,67px); }.hero-actions { flex-direction:column; gap:18px; }.trust-row { display:grid; }.dashboard-preview { padding:20px; transform:none; }.apps-section { padding-top:72px; padding-bottom:72px; }.section-heading { display:block; }.section-heading>p { margin-top:18px; }.featured-app { padding:25px 19px; }.result-demo { padding:22px 18px; }.coming-grid { grid-template-columns:1fr; }.pricing-section { padding:78px 0; }.billing-toggle { width:100%; }.billing-toggle button { flex:1; }.code-section { margin:55px auto; padding:31px 23px; display:block; }.code-section>button { margin-top:24px; }.account-modal { padding:31px 22px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }