:root { --bg:#F6F3EC; --card:#FFFFFF; --ink:#1E211C; --muted:#6B6F66; --line:#E3DED3; --green:#2F5D3A; --green-deep:#24492E; --gold:#C9A24A; --gold-soft:#F3E9CF; --tint:#EEF3EE; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif; font-size:17px; line-height:1.55; }
a { color:var(--green); }
h1,h2,h3 { font-family:Bitter,Georgia,serif; text-wrap:balance; margin:0; line-height:1.15; }
h2 { font-size:30px; font-weight:700; margin-bottom:18px; }
h3 { font-size:18px; font-weight:700; }
p { margin:10px 0; }
.muted { color:var(--muted); } .center { text-align:center; }
.btn { display:inline-block; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:600; text-decoration:none; }
.btn.primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn.ghost { background:transparent; }
.btn.big { padding:14px 24px; font-size:17px; }
.btn:hover { filter:brightness(0.96); }

.top { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 6vw; background:rgba(246,243,236,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-family:Bitter,Georgia,serif; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; }
.brand img { width:32px; height:32px; border-radius:8px; }
.top nav { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.top nav a:not(.btn) { color:var(--ink); text-decoration:none; font-weight:600; }

main { max-width:1180px; margin:0 auto; padding:0 6vw; }
.hero { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding:64px 0 40px; }
.eyebrow { font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color:var(--green); font-weight:700; margin-bottom:12px; }
.hero h1 { font-size:46px; font-weight:800; }
.lede { font-size:19px; color:var(--muted); max-width:56ch; margin:18px 0 22px; }
.cta { display:flex; gap:12px; flex-wrap:wrap; }
.platforms { margin-top:14px; color:var(--muted); font-size:14px; }
.frame { background:#fff; border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 20px 50px rgba(30,33,28,0.14); }
.frame img, .shot img { width:100%; height:auto; display:block; border-radius:8px; }

.strip { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:20px 0 60px; }
.strip div { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:2px; }
.strip b { font-family:Bitter,Georgia,serif; } .strip span { color:var(--muted); font-size:14px; }

.features { padding:20px 0 40px; }
.features .grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.features article { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px; }
.features article p { color:var(--muted); font-size:15px; margin:8px 0 0; }
.features article h3 { color:var(--green); }

.showcase { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 0 60px; }
.showcase .shot { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; }
.showcase figcaption, .shot figcaption { padding:10px 6px 4px; color:var(--muted); font-size:14px; }

.everywhere { display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center; padding:40px 0 60px; border-top:1px solid var(--line); }
.everywhere .shot { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 20px 50px rgba(30,33,28,0.12); }
.checks { list-style:none; padding:0; margin:14px 0 0; }
.checks li { padding:6px 0 6px 28px; position:relative; }
.checks li::before { content:"✓"; position:absolute; left:4px; color:var(--green); font-weight:800; }

.pricing { padding:40px 0; border-top:1px solid var(--line); text-align:center; }
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:24px; text-align:left; }
.plan { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; position:relative; }
.plan.featured { border-color:var(--green); box-shadow:0 14px 40px rgba(47,93,58,0.14); }
.plan .tag { position:absolute; top:-12px; left:22px; background:var(--gold); color:#1E211C; font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; }
.plan .price { font-family:Bitter,Georgia,serif; font-size:36px; font-weight:800; margin:8px 0 0; }
.plan .price span { font-size:15px; color:var(--muted); font-weight:400; }
.plan .alt { color:var(--muted); font-size:14px; }
.plan ul { padding-left:18px; margin:14px 0 18px; } .plan li { margin:5px 0; }

.download { padding:40px 0; border-top:1px solid var(--line); }
.dl { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.dl div { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; }
.dl small { color:var(--muted); display:block; margin-top:8px; }

.faq { padding:40px 0 60px; border-top:1px solid var(--line); max-width:760px; }
details { border-bottom:1px solid var(--line); padding:10px 0; }
summary { cursor:pointer; font-weight:700; font-family:Bitter,Georgia,serif; }
details p { color:var(--muted); }

footer { background:var(--green-deep); color:rgba(255,255,255,0.85); padding:40px 6vw 28px; margin-top:20px; }
footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; max-width:1180px; margin:0 auto; }
footer .brand { color:#fff; } footer .cols b { display:block; margin-bottom:8px; color:#fff; }
footer .cols a:not(.brand) { display:block; color:rgba(255,255,255,0.85); text-decoration:none; padding:3px 0; }
footer .fine { max-width:1180px; margin:26px auto 0; padding-top:16px; border-top:1px solid rgba(255,255,255,0.15); font-size:13px; color:rgba(255,255,255,0.7); }
footer .fine a { color:#fff; }

/* text pages */
.doc { max-width:820px; margin:0 auto; padding:40px 6vw 80px; }
.doc h1 { font-size:34px; margin-bottom:6px; }
.doc h2 { font-size:22px; margin-top:36px; padding-bottom:6px; border-bottom:2px solid var(--green); }
.doc h3 { margin-top:20px; }
.doc p, .doc li { max-width:70ch; }
.doc .updated { color:var(--muted); font-size:14px; margin-bottom:20px; }
.notice { background:var(--gold-soft); border-left:3px solid var(--gold); padding:10px 14px; border-radius:0 8px 8px 0; }

@media (max-width:900px) {
  .hero, .everywhere { grid-template-columns:1fr; gap:28px; padding-top:36px; }
  .hero h1 { font-size:36px; }
  .strip, .features .grid, .showcase, .plans, .dl { grid-template-columns:1fr 1fr; }
  footer .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .strip, .features .grid, .showcase, .plans, .dl, footer .cols { grid-template-columns:1fr; }
  .top nav a:not(.btn) { display:none; }
}