.page { --ink: #17243d; --ink-deep: #0d172b; --paper: #f4f5ef; --white: #fbfcf8; --lime: #d8eb74; --lime-dark: #a9bd43; --muted: #697386; background: var(--paper); color: var(--ink); font-family: var(--font-inter), sans-serif; overflow: hidden; }
.page a { text-decoration: none; }
.header { border-bottom: 1px solid rgba(23,36,61,.12); background: rgba(244,245,239,.9); position: relative; z-index: 2; }
.headerInner { max-width: 1280px; margin: 0 auto; min-height: 74px; padding: 0 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:20px; font-weight:800; letter-spacing:-.06em; }
.logoImg { display:block; height:26px; width:auto; }
.logoMark { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:var(--ink); color:var(--lime); font-family:var(--font-space),sans-serif; font-size:20px; font-weight:700; line-height:1; }
.logoAccent { color:var(--lime-dark); }
.nav { display:flex; gap:28px; margin-left:auto; margin-right:10px; font-size:13px; font-weight:600; color:#687183; }
.nav a:hover,.textLink:hover { color:var(--ink); }
.headerActions { display:flex; align-items:center; gap:18px; }
.textLink { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:13px; font-weight:700; }
.headerButton,.primaryButton,.panelButton { display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:7px; background:var(--ink); color:white; font-size:13px; font-weight:750; padding:12px 16px; box-shadow:0 7px 18px rgba(13,23,43,.14); transition:transform .2s, background .2s; }
.headerButton:hover,.primaryButton:hover,.panelButton:hover { background:#293957; transform:translateY(-2px); }
.hero { max-width:1280px; margin:0 auto; padding:85px 34px 0; }
.heroGrid { display:grid; grid-template-columns:minmax(0, .94fr) minmax(520px,1.06fr); gap:52px; align-items:center; }
.signal { display:inline-flex; align-items:center; gap:8px; color:#697586; font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.signalDot { width:7px; height:7px; border-radius:50%; background:var(--lime-dark); box-shadow:0 0 0 4px rgba(169,189,67,.16); }
.hero h1 { max-width:820px; margin:22px 0 24px; color:var(--ink-deep); font-family:var(--font-space), sans-serif; font-size:clamp(38px, 4.2vw, 56px); font-weight:700; letter-spacing:-.075em; line-height:1.02; }
.heroLead { max-width:550px; margin:0; color:#5e6979; font-size:18px; line-height:1.6; letter-spacing:-.015em; }
.heroActions { display:flex; align-items:center; gap:18px; margin-top:32px; }
.primaryButton { background:var(--lime); color:var(--ink-deep); box-shadow:0 8px 20px rgba(169,189,67,.24); }
.primaryButton:hover { background:#e4f493; }
.secondaryButton { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:13px; font-weight:750; }
.secondaryButton:hover { color:#647a22; }
.heroProof { display:flex; align-items:center; gap:12px; margin-top:64px; }
.heroProof p { margin:0; color:#7a8491; font-size:12px; line-height:1.45; }.heroProof strong { color:var(--ink); }
.avatarStack { display:flex; }.avatarStack span { display:grid; place-items:center; width:29px; height:29px; margin-left:-7px; border:2px solid var(--paper); border-radius:50%; background:#b8c2cc; color:white; font-size:8px; font-weight:800; }.avatarStack span:first-child { margin-left:0; background:#768e6e; }.avatarStack span:nth-child(2){background:#a96756}.avatarStack span:nth-child(3){background:#4b6480}
.heroVisual { min-height:550px; position:relative; display:grid; place-items:center; }.sunMark { position:absolute; width:410px; height:410px; border-radius:50%; background:var(--lime); top:13px; right:30px; opacity:.9; }.dashboardWindow { width:min(100%, 540px); position:relative; z-index:1; overflow:hidden; border:1px solid rgba(255,255,255,.16); border-radius:12px; background:#192743; box-shadow:0 30px 60px rgba(23,36,61,.23), 0 2px 0 rgba(255,255,255,.16) inset; transform:rotate(2.2deg); }.windowTop { height:42px; padding:0 17px; display:flex; align-items:center; gap:14px; color:#8392a9; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.windowDots { display:flex; gap:5px; }.windowDots i { width:7px; height:7px; border-radius:50%; background:#62708a; }.windowDots i:first-child{background:#e18669}.windowDots i:nth-child(2){background:#d3d875}.windowDots i:nth-child(3){background:#7ab7a2}.livePill { margin-left:auto; color:var(--lime); font-size:8px; }.dashboardBody { padding:26px; }.dashboardHeader { display:flex; align-items:flex-start; justify-content:space-between; }.miniLabel { margin:0 0 6px; color:#8b9bb4; font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }.dashboardHeader h2 { margin:0; color:#f3f5ed; font-size:25px; letter-spacing:-.06em; }.ownerBadge { display:grid; place-items:center; width:35px; height:35px; border-radius:10px; background:var(--lime); color:var(--ink); font-size:11px; font-weight:800; }.metricRow { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:28px 0 23px; }.metric { padding:14px 15px; border:1px solid rgba(255,255,255,.1); border-radius:8px; background:rgba(255,255,255,.045); }.metric span,.metric em { display:block; color:#8c9bb0; font-size:10px; font-style:normal; }.metric strong { display:block; margin:7px 0 3px; color:#f7f9f2; font-family:var(--font-space),sans-serif; font-size:25px; letter-spacing:-.06em; }.metric em { color:var(--lime); font-size:9px; }.leadListHeader { display:flex; justify-content:space-between; padding-bottom:9px; color:#8c9bb0; border-bottom:1px solid rgba(255,255,255,.1); font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; letter-spacing:.1em; }.leadRow { display:flex; align-items:center; gap:11px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.07); }.leadIcon { display:grid; place-items:center; width:29px; height:29px; flex:0 0 auto; border-radius:8px; background:rgba(216,235,116,.12); color:var(--lime); }.leadRow div { min-width:0; flex:1; }.leadRow strong,.leadRow small { display:block; }.leadRow strong { color:#f3f5ed; font-size:12px; }.leadRow small { margin-top:3px; color:#8292aa; font-size:10px; }.leadStatus { color:var(--lime); font-family:var(--font-mono),monospace; font-size:9px; }.floatingNote { position:absolute; z-index:2; bottom:34px; left:3px; display:flex; align-items:center; gap:10px; padding:13px 16px 13px 12px; border:1px solid rgba(23,36,61,.09); border-radius:9px; background:var(--white); box-shadow:0 18px 35px rgba(23,36,61,.17); transform:rotate(-3deg); }.noteCheck { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--lime); color:var(--ink); }.floatingNote strong,.floatingNote small { display:block; }.floatingNote strong { color:var(--ink); font-size:11px; }.floatingNote small { margin-top:3px; color:#7a8491; font-size:10px; }
.heroRail { display:flex; align-items:center; gap:20px; min-height:70px; margin-top:28px; border-top:1px solid rgba(23,36,61,.14); color:#7c8693; font-family:var(--font-mono),monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }.heroRail strong { color:var(--ink); font-family:var(--font-inter),sans-serif; font-size:12px; letter-spacing:0; text-transform:none; }.railRule { width:1px; height:20px; margin-left:auto; background:rgba(23,36,61,.18); }
.problemSection,.nicheSection { max-width:1280px; margin:0 auto; padding:142px 34px; }.sectionIntro { max-width:710px; }.sectionIntro h2,.systemIntro h2,.plansHeading h2,.fitCopy h2 { margin:22px 0 0; color:var(--ink-deep); font-family:var(--font-space),sans-serif; font-size:clamp(34px,4.4vw,58px); line-height:1.02; letter-spacing:-.07em; }.problemGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:75px; }.problemGrid > div { padding-top:17px; border-top:1px solid rgba(23,36,61,.2); }.bigNumber { color:var(--lime-dark); font-family:var(--font-mono),monospace; font-size:11px; }.problemGrid h3 { margin:30px 0 12px; color:var(--ink); font-size:19px; letter-spacing:-.04em; }.problemGrid p { max-width:300px; margin:0; color:#707b8b; font-size:14px; line-height:1.65; }
.systemSection { padding:120px max(34px, calc((100vw - 1212px)/2)); background:var(--ink); color:white; }.systemIntro { display:grid; grid-template-columns:1fr 360px; align-items:end; gap:60px; }.systemIntro h2 { color:#f4f6ef; }.systemIntro p { margin:0 0 4px; color:#9aa8ba; font-size:15px; line-height:1.7; }.systemGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:67px; }.systemCard { min-height:430px; padding:25px; border:1px solid #dce1d4; border-radius:9px; background:#f9faf5; color:var(--ink); }.systemCardDark { border-color:#31405d; background:#233454; color:white; }.cardIcon,.cardIconLight { display:grid; place-items:center; width:35px; height:35px; border-radius:9px; background:var(--lime); color:var(--ink); }.cardIconLight { background:#e5ecd0; }.cardNumber { display:block; margin-top:44px; color:#8c97a6; font-family:var(--font-mono),monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }.systemCardDark .cardNumber { color:#a1b0c4; }.systemCard h3 { max-width:260px; margin:14px 0 14px; font-family:var(--font-space),sans-serif; font-size:26px; line-height:1.04; letter-spacing:-.06em; }.systemCard p { color:#6e7b8b; font-size:13px; line-height:1.6; }.systemCardDark p { color:#b4c0d0; }.cardMini { margin-top:48px; padding:14px; border:1px solid #40516f; border-radius:7px; background:#192743; }.cardMini span,.cardMini strong,.cardMini em { display:block; }.cardMini span { color:#93a2b7; font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; }.cardMini strong { margin-top:10px; color:var(--lime); font-size:12px; }.cardMini em { margin-top:9px; color:#dce3eb; font-size:11px; line-height:1.4; }.questionList { display:flex; flex-direction:column; gap:9px; margin-top:45px; border-top:1px solid #dfe4d8; padding-top:18px; }.questionList span { display:flex; align-items:center; gap:9px; color:#5c6879; font-size:12px; }.questionList svg { color:var(--lime-dark); }.reviewStrip { display:grid; grid-template-columns:auto auto; gap:4px 8px; align-items:center; margin-top:52px; border-top:1px solid #dfe4d8; padding-top:18px; }.stars { color:#9bad3e; letter-spacing:2px; }.reviewStrip strong { color:var(--ink); font-size:16px; }.reviewStrip small { grid-column:1/-1; color:#82909d; font-size:10px; }
.nicheSection { display:grid; grid-template-columns:.8fr 1fr; gap:95px; align-items:center; }.nicheHeading h2 { margin:22px 0 0; color:var(--ink-deep); font-family:var(--font-space),sans-serif; font-size:clamp(42px,5vw,65px); line-height:.98; letter-spacing:-.08em; }.nicheHeading em { color:var(--lime-dark); font-style:normal; }.nicheList { border-top:1px solid rgba(23,36,61,.2); }.nicheRow { display:grid; grid-template-columns:35px 1fr 1.45fr 18px; align-items:center; gap:16px; min-height:79px; border-bottom:1px solid rgba(23,36,61,.15); }.nicheMark { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background:var(--ink); color:var(--lime); font-family:var(--font-space),sans-serif; font-size:13px; font-weight:700; }.nicheRow strong { color:var(--ink); font-size:14px; }.nicheRow > span:nth-child(3) { color:#7b8592; font-size:12px; }.nicheRow svg { color:#9eacb8; }.nicheRow:hover svg { color:var(--lime-dark); transform:translateX(3px); }
.plansSection { padding:130px max(34px, calc((100vw - 1212px)/2)); background:#e8ebe3; }.plansHeading { max-width:620px; }.plansHeading p { max-width:480px; margin:20px 0 0; color:#707b8b; font-size:15px; line-height:1.65; }.planGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:60px; }.planCard { position:relative; display:flex; flex-direction:column; min-height:405px; padding:27px; border:1px solid #d4d9ce; border-radius:9px; background:#f8faf4; }.planFeatured { border:2px solid var(--ink); padding:26px; box-shadow:0 14px 0 var(--lime); }.popularTag { position:absolute; top:-13px; right:20px; padding:5px 9px; border-radius:4px; background:var(--lime); color:var(--ink); font-family:var(--font-mono),monospace; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }.planName { color:#697484; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.planPrice { margin-top:17px; color:var(--ink-deep); font-family:var(--font-space),sans-serif; font-size:47px; font-weight:700; letter-spacing:-.08em; }.planPrice small { margin-left:5px; color:#7c8792; font-family:var(--font-inter),sans-serif; font-size:11px; font-weight:500; letter-spacing:0; }.planCard p { min-height:52px; margin:12px 0 18px; color:#788290; font-size:13px; line-height:1.5; }.planCard ul { display:flex; flex-direction:column; gap:10px; margin:0 0 25px; padding:17px 0 0; border-top:1px solid #dce1d7; list-style:none; }.planCard li { display:flex; align-items:center; gap:8px; color:#596575; font-size:12px; }.planCard li svg { color:var(--lime-dark); }.planButton { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:auto; padding:11px 14px; border:1px solid #bdc5b8; border-radius:6px; color:var(--ink); font-size:12px; font-weight:750; }.planButton:hover { border-color:var(--ink); background:#eef1e9; }
.fitSection { padding:130px max(34px, calc((100vw - 1212px)/2)); background:var(--lime); }.fitInner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }.fitCopy h2 { max-width:500px; }.fitCopy > p { max-width:470px; margin:25px 0 0; color:#4e5d41; font-size:16px; line-height:1.65; }.fitChecks { display:flex; flex-direction:column; gap:11px; margin-top:28px; }.fitChecks span { display:flex; align-items:center; gap:9px; color:#37462f; font-size:12px; font-weight:700; }.fitChecks svg { color:#536728; }.fitPanel { padding:31px; border-radius:10px; background:var(--ink); color:white; box-shadow:0 22px 35px rgba(83,103,40,.24); }.panelTop { display:flex; justify-content:space-between; color:#96a5ba; font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.panelLive { color:var(--lime); }.fitPanel h3 { max-width:390px; margin:53px 0 16px; color:#f7f9f1; font-family:var(--font-space),sans-serif; font-size:31px; line-height:1.03; letter-spacing:-.06em; }.fitPanel p { max-width:400px; color:#aebacd; font-size:13px; line-height:1.6; }.panelButton { margin-top:18px; background:var(--lime); color:var(--ink); }.fitPanel small { display:block; margin-top:14px; color:#8594aa; font-size:10px; }
.footerBand { max-width:1280px; margin:0 auto; padding:38px 34px 45px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }.footerBand p { margin:10px 0 0; color:#7e8791; font-size:11px; }.footerLinks { display:flex; align-items:center; gap:20px; color:#8b949e; font-family:var(--font-mono),monospace; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }.footerLinks span:last-child { display:flex; align-items:center; gap:5px; }
@media (max-width: 950px) { .nav,.textLink { display:none; }.heroGrid,.systemIntro,.nicheSection,.fitInner { grid-template-columns:1fr; }.heroVisual { min-height:500px; margin-top:15px; }.systemIntro p { max-width:560px; }.systemGrid,.planGrid { grid-template-columns:1fr; }.systemCard,.planCard { min-height:0; }.systemCard { min-height:370px; }.planCard { padding:24px; }.nicheSection { gap:55px; } }
@media (max-width: 650px) { .headerInner,.hero,.problemSection,.nicheSection,.footerBand { padding-left:20px; padding-right:20px; }.headerInner { min-height:65px; }.headerButton { padding:10px 12px; font-size:11px; }.hero { padding-top:60px; }.hero h1 { font-size:52px; }.heroLead { font-size:16px; }.heroActions { align-items:flex-start; flex-direction:column; gap:16px; }.heroProof { margin-top:42px; }.heroVisual { min-height:380px; margin:0 -14px; }.sunMark { width:260px; height:260px; top:12px; right:15px; }.dashboardBody { padding:18px; }.dashboardHeader h2 { font-size:20px; }.metric strong { font-size:21px; }.leadStatus { display:none; }.floatingNote { left:4px; bottom:10px; }.heroRail { flex-wrap:wrap; gap:11px 14px; padding:15px 0; line-height:1.3; }.heroRail span:first-child { width:100%; }.railRule { display:none; }.problemSection,.nicheSection { padding-top:90px; padding-bottom:90px; }.sectionIntro h2,.systemIntro h2,.plansHeading h2,.fitCopy h2 { font-size:42px; }.problemGrid { grid-template-columns:1fr; gap:30px; margin-top:46px; }.problemGrid h3 { margin-top:18px; }.systemSection,.plansSection,.fitSection { padding:86px 20px; }.systemGrid,.planGrid { margin-top:42px; }.systemCard { min-height:0; padding:21px; }.systemCard h3 { font-size:25px; }.nicheHeading h2 { font-size:47px; }.nicheRow { grid-template-columns:29px 1fr 18px; gap:10px; }.nicheRow > span:nth-child(3) { display:none; }.fitInner { gap:44px; }.fitPanel { padding:23px; }.fitPanel h3 { margin-top:40px; font-size:28px; }.footerBand { align-items:flex-start; flex-direction:column; }.footerLinks { flex-wrap:wrap; gap:10px 16px; } }
@media (prefers-reduced-motion: reduce) { .headerButton,.primaryButton,.nicheRow svg { transition:none; } }

/* Review pass: keep accent text legible and make the preview explicitly illustrative. */
.page { --lime-dark: #778d27; overflow-x: clip; }
.page a:focus-visible { outline: 3px solid var(--lime-dark); outline-offset: 4px; border-radius: 5px; }
.heroLead { color: #4f5b6c; }
.heroProof p { color: #596576; }
.dashboardTitle { margin: 0; color: #f3f5ed; font-size: 25px; letter-spacing: -.06em; }
.floatingNote small { color: #596576; }
.srOnly { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }