:root{
  --bg:#ffffff;
  --ink:#1e1e1e;
  --muted:#5c5c5c;
  --accent:#15803d;
  --accent-hover:#116430;
  --accent-soft:#e8f4ec;
  --tint:#f5faf7;
  --tint-border:#e2eee7;
  --card:#ffffff;
  --surface:#f7f7f7;
  --border:#ebebeb;
  --radius:12px;
  --display:"Space Grotesk",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:17px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.02em}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}

nav{display:flex;align-items:center;gap:16px;padding:22px 0}
.logo img{height:26px;width:auto}
nav .links{margin:0 auto;display:flex;align-items:center;gap:26px;border:1px solid var(--border);border-radius:999px;padding:11px 24px}
nav .links a{color:var(--ink);font-size:15px;font-weight:600}
nav .links a:hover{color:var(--accent);text-decoration:none}

.nav-item{position:relative}
.login{font-size:15px;font-weight:600;color:var(--ink)}
.login:hover{color:var(--accent);text-decoration:none}

.nav-item > a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;vertical-align:2px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);padding-top:15px;z-index:10}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{display:block}
.menu{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 5px 20px rgba(0,0,0,.08);padding:8px}
.menu a{display:block;padding:9px 14px;border-radius:8px;white-space:nowrap}
.menu a:hover{background:var(--surface)}

.buy-card{display:flex;gap:12px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 28px rgba(0,0,0,.1);padding:14px}
.buy-opt{display:block;min-width:250px;padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:background .15s,border-color .15s}
.buy-opt:hover{background:#fff;border-color:var(--accent);text-decoration:none}
.buy-opt .t{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.buy-opt:hover .t{color:var(--accent)}
.buy-opt .s{display:block;margin-top:6px;font-size:14px;font-weight:400;letter-spacing:0;color:var(--muted)}

.amz{display:inline-block;height:19px;width:auto;vertical-align:-4px}
.buy-opt .amz{height:28px}
@media (max-width:860px){
  nav{flex-wrap:wrap;justify-content:center;gap:14px}
  nav .links{order:3;width:100%;justify-content:center;gap:18px;flex-wrap:wrap}
  nav .logo{margin-right:auto}
}

.btn{display:inline-block;background:var(--accent);color:#fff;padding:13px 26px;border-radius:999px;font-weight:600;font-size:16px;border:1px solid var(--accent);transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.ghost:hover{background:var(--accent);color:#fff}

.hero{padding:100px 0 0;text-align:center}
.hero h1{font-size:clamp(38px,6.5vw,76px);margin:0 auto 24px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:800px;margin:0 auto 32px;color:var(--muted);font-size:20px}

.formkit-form{max-width:400px;margin:0 auto}
.formkit-field{margin-bottom:12px}
.formkit-input{width:100%;font:400 16px/1.4 inherit;padding:15px 24px;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--ink)}
.formkit-input:focus{outline:none;border-color:var(--accent)}
.formkit-submit{width:100%;font:600 16px/1.4 var(--display);padding:15px 26px;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:#fff;cursor:pointer;transition:background .15s,border-color .15s}
.formkit-submit:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.formkit-alert{list-style:none;margin-bottom:12px;font-size:15px;color:#b42318}
.formkit-alert:empty{display:none}
.formkit-powered-by-convertkit-container{margin-top:14px}
.formkit-powered-by-convertkit{font-size:13px;color:var(--muted)}

.wall{padding:80px 0 96px;overflow:hidden}
.marquee{overflow:hidden;margin-bottom:20px}
.track{display:flex;width:max-content;animation:drift 70s linear infinite}
.track.reverse{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .track{animation:none}
  .marquee{overflow-x:auto}
}
.quote{width:330px;flex:none;margin-right:20px;background:var(--tint);border:1px solid var(--tint-border);border-radius:var(--radius);padding:24px;transition:box-shadow .3s}
.quote:hover{box-shadow:0 5px 20px rgba(0,0,0,.08)}
.quote .who{margin-bottom:14px}
.quote .name{font-weight:600;line-height:1.3}
.quote .role{font-size:14px;color:var(--muted);line-height:1.3}
.quote p{color:var(--ink)}

section{padding:0 0 96px}
.label{font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:32px}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{display:flex;flex-direction:column;gap:14px}
.card .shot{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:box-shadow .3s}
.card .shot img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card:hover .shot{box-shadow:0 5px 20px rgba(0,0,0,.08)}
.card .tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-block;background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.card h3{font-size:26px}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent);text-decoration:none}
.card p{color:var(--muted)}
.card ul{list-style:none}
.card li{padding:4px 0 4px 26px;position:relative}
.card li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.card .more{font-weight:600;margin-top:auto;padding-top:4px}
.card .more-row{display:flex;gap:22px;flex-wrap:wrap;font-weight:600;margin-top:auto;padding-top:4px}

.feature{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.feature .txt{display:flex;flex-direction:column;gap:14px}

.head{display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:20px}
.head .label{border:0;padding:0;margin:0}
.arrows{margin-left:auto;display:flex;gap:8px}
.arrow{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;background:#fff;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.arrow:hover{border-color:var(--accent);color:var(--accent)}
.sub{color:var(--muted);max-width:640px;margin-bottom:28px}
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none}
.carousel::-webkit-scrollbar{display:none}
.tcard{flex:none;width:340px;scroll-snap-align:start;color:var(--ink)}
.tcard:hover{text-decoration:none}
.tshot{display:block;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:box-shadow .3s,border-color .15s}
.tshot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tcard:hover .tshot{border-color:var(--accent);box-shadow:0 5px 20px rgba(0,0,0,.08)}
.tcard h3{margin-top:14px;font-size:19px}
.tcard:hover h3{color:var(--accent)}

.phero{max-width:780px;padding:48px 0 80px}
.back{display:block;margin-bottom:24px;font-size:15px;font-weight:600;color:var(--muted)}
.back:hover{color:var(--accent);text-decoration:none}
.phero .tag{margin-bottom:18px}
.phero h1{font-size:clamp(34px,5vw,52px);margin-bottom:20px}
.phero .lead{font-size:20px;color:var(--muted);margin-bottom:30px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.pshot{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin-bottom:96px}
.pshot img{width:100%}
.feat{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px 36px}
.feat li{padding:4px 0 4px 28px;position:relative}
.feat li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.kit div{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;font-weight:600}
.kit span{display:block;margin-top:4px;font-weight:400;font-size:14px;color:var(--muted)}

.flow{border:1px solid var(--tint-border);border-radius:var(--radius);background:var(--tint);padding:48px 44px 40px}
.diagram{display:block;width:100%;height:auto}
.diagram [class]{transform-box:fill-box}
.diagram .paper,.diagram .doc,.diagram .field{fill:#fff;stroke:var(--border);stroke-width:1.6}
.diagram .headfill{fill:var(--accent-soft)}
.diagram .rule,.diagram .fold{stroke:var(--border);stroke-width:1.3;fill:none}
.diagram .cell,.diagram .bar,.diagram .caret{fill:var(--accent)}
.diagram .cover{fill:#fff}
.diagram .lbl{font:600 15px var(--display);fill:var(--muted)}
.diagram .pathtext{font:400 14px "Segoe UI",system-ui,sans-serif;fill:var(--ink)}
.diagram .dash,.diagram .tip,.diagram .trend{stroke:var(--accent);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.diagram .dash{--len:56;stroke-dasharray:56}
.diagram .trend{--len:120;stroke-dasharray:120}

.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;text-align:center}
.legend h3{font-size:20px;margin-bottom:8px}
.legend h3 span{color:var(--accent);margin-right:8px}
.legend p{color:var(--muted);font-size:15px;max-width:30ch;margin:0 auto}

.diagram .cell{animation:rise .38s ease-out both;animation-delay:var(--i,0s)}
.diagram .dash{animation:draw .45s ease-out both;animation-delay:calc(1s + var(--t2,0)*1.2s)}
.diagram .tip{animation:rise .3s ease-out both;animation-delay:calc(1.3s + var(--t2,0)*1.2s)}
.diagram .doc{animation:open .5s ease-out both;animation-delay:1.5s}
.diagram .cover{transform:translateX(150px);animation:reveal .95s cubic-bezier(.4,0,.2,1) both;animation-delay:2.6s}
.diagram .caret{opacity:0;animation:type .95s cubic-bezier(.4,0,.2,1) both;animation-delay:2.6s}
.diagram .bar{transform-origin:bottom;animation:grow .45s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(3.6s + var(--i,0s))}
.diagram .trend{animation:draw .8s ease-out both;animation-delay:4.25s}
.flow:not(.play) *{animation-play-state:paused}

@keyframes rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
@keyframes open{from{stroke:var(--border)}to{stroke:var(--accent)}}
@keyframes reveal{from{transform:translateX(0)}to{transform:translateX(150px)}}
@keyframes type{from{transform:translateX(0);opacity:1}88%{opacity:1}to{transform:translateX(150px);opacity:0}}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){.flow *{animation:none}}
@media (max-width:760px){
  .flow{padding:24px 20px}
  .legend{grid-template-columns:1fr;gap:22px;margin-top:26px;text-align:left}
  .legend p{margin:0;max-width:none}
}

.faq{max-width:780px}
.faq dt{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:6px}
.faq dd{color:var(--muted)}
.faq dd + dt{margin-top:26px}

.newsletter{text-align:center;border:1px solid var(--border);border-radius:var(--radius);padding:76px 32px;margin-bottom:96px;
  background-color:#fff;background-image:radial-gradient(#e7e7e7 1px,transparent 1px);background-size:16px 16px}
.newsletter h2{font-size:clamp(30px,4vw,42px);margin-bottom:14px}
.newsletter p{color:var(--muted);max-width:600px;margin:0 auto 30px}
.newsletter .formkit-form{max-width:560px}

footer.site{border-top:1px solid var(--border);padding:48px 0;display:grid;grid-template-columns:1.7fr 1.3fr .9fr .9fr .9fr;gap:32px;font-size:15px}
footer.site h4{font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
footer.site ul{list-style:none;display:grid;gap:10px}
footer.site li a{color:var(--ink)}
footer.site li a:hover{color:var(--accent)}
footer.site .about p{color:var(--muted);margin-top:12px;max-width:34ch}
footer.site .logo img{height:20px}

@media (max-width:760px){
  .hero{padding-top:48px}
  .wall{padding:56px 0 64px}
  section{padding-bottom:64px}
  .cards{grid-template-columns:1fr;gap:48px}
  .feature{grid-template-columns:1fr;gap:28px}
  .feat{grid-template-columns:1fr}
  .phero{padding:32px 0 56px}
  footer.site{grid-template-columns:1fr 1fr;gap:28px}
  footer.site .about{grid-column:1/-1}
}