:root{--ink:#1c2927;--muted:#667671;--green:#177553;--green2:#d9ede3;--stroke:#dce7e1;--cream:#f6f7f3;--paper:#fff;--navy:#0e2623;--red:#b54245;--gold:#f8efdf}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;line-height:1.63;font-size:17px;-webkit-font-smoothing:antialiased}
.section{padding:96px 22px}
.wrap{max-width:1140px;margin:auto}
.narrow{max-width:780px;margin:auto}
.serif{font-family:Georgia,'Times New Roman',serif;letter-spacing:-.025em} .eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.17em;font-weight:800;color:var(--green)}
h1{font-size:clamp(42px,5.2vw,75px);font-weight:600;line-height:1.06;margin:22px 0 24px}
h2{font-size:clamp(31px,3.5vw,49px);font-weight:600;line-height:1.17;margin:14px 0 21px}
h3{font-size:23px;line-height:1.25;margin:0 0 10px}
p{margin:0 0 19px}
.lead{font-size:21px;line-height:1.58}
.muted{color:var(--muted)}
.small{font-size:13px}
.micro{font-size:12px}strong{font-weight:750}a{color:inherit}b{font-weight:800}
nav{position:sticky;z-index:5;top:0;background:#fffffff2;backdrop-filter:blur(16px);border-bottom:1px solid var(--stroke)}nav .nav-inner{max-width:1160px;padding:13px 22px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap}
.logo{background:var(--navy);color:#b2e6ce;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.nav-badge{font-size:12px;color:var(--muted)}
.nav-cta{padding:9px 14px;border-radius:10px;border:1px solid #c0d9cd;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;background:#18845d;border-radius:13px;padding:16px 23px;font-size:15px;font-weight:800;box-shadow:0 10px 22px #075c4130;transition:.2s}
.button:hover{background:#0e6c4b;transform:translateY(-1px)}
.button svg{width:18px;height:18px}
.button.light{background:#fff;color:#113e30}
.button.light:hover{background:#e1f2e9}
.hero{background:radial-gradient(ellipse at top right,#1b493b,#0e2824 65%);color:white;position:relative}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:55px;padding:84px 0 88px}
.hero h1{max-width:680px}
.hero p{color:#c4dbd0;max-width:580px}
.hero .eyebrow{color:#83d9ac}
.hero .fine{font-size:13px;color:#a7c4b8;margin:17px 0 0}
.hero .eyebrow span{display:inline-block;border:1px solid #4b816b;border-radius:100px;padding:5px 11px}
.demo-box{background:#fff;color:var(--ink);border-radius:22px;padding:27px;box-shadow:0 30px 80px #0004;max-width:438px;margin:auto}
.demo-box .top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--stroke);padding-bottom:15px;gap:15px}
.demo-box .tag{background:var(--green2);color:var(--green);font-weight:750;font-size:10px;letter-spacing:.04em;padding:6px 10px;border-radius:100px}
.metric-large{font-family:Georgia,serif;font-size:48px;line-height:1.1;color:var(--green);padding:19px 0 6px;font-weight:600}
.kpis{display:flex;gap:15px;justify-content:space-between;border-bottom:1px solid var(--stroke);padding:8px 0 21px}
.kpis div{font-size:12px;color:var(--muted)}
.kpis strong{display:block;color:var(--ink);font-size:19px}
.mini-bars{padding-top:21px}
.line{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:700;margin-bottom:6px}
.track{height:11px;background:#ecf0ed;border-radius:99px;overflow:hidden;margin:0 0 17px}
.fill{height:100%;border-radius:99px}
.pos{background:#239b70}
.neg{background:#d06a69}
.demo-box .notice{font-size:12px;color:#667671;margin-top:16px;border-top:1px solid var(--stroke);padding-top:13px}
.chip{border:1px solid var(--stroke);border-radius:40px;padding:7px 12px;display:inline-block;font-size:13px;color:var(--green);font-weight:700;margin-bottom:18px}
.intro{font-size:21px;line-height:1.66;max-width:800px}
.pullquote{border-left:4px solid #17885d;padding:7px 0 7px 24px;font-family:Georgia,serif;font-size:clamp(23px,2.6vw,31px);line-height:1.4;margin:36px 0;color:#113b2d}
.math-panel{background:var(--cream);border:1px solid var(--stroke);border-radius:22px;padding:30px;margin:34px 0}
.math-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
.math-kpi{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:20px 14px;text-align:center}
.math-kpi .value{display:block;font-size:28px;font-weight:800}
.math-kpi span:last-child{font-size:12px;color:var(--muted)}
.math-conclusion{font-family:Georgia,serif;font-size:25px;margin-top:25px;color:var(--red);text-align:center}
.soft{background:var(--cream)}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}
.question-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:30px}
.question{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:24px}
.question .num{font-size:12px;color:var(--green);font-weight:800;letter-spacing:.12em;margin-bottom:10px}
.question h3{font-size:19px}
.question p{font-size:15px;color:var(--muted);margin:0}
.case{background:#12332d;color:#fff}
.case .eyebrow{color:#91dfbb}
.case p{color:#d2e0d8}
.case .case-intro{max-width:820px;margin:0 0 35px}
.case-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:40px 0}
.case-kpi{background:#ffffff14;border:1px solid #ffffff28;border-radius:14px;padding:18px 22px}
.case-kpi label{display:block;font-size:12px;color:#a9caba}
.case-kpi strong{display:block;font-size:28px;color:white;font-variant-numeric:tabular-nums}
.white-panel{background:#fff;color:var(--ink);border-radius:22px;padding:34px;margin:32px 0}
.white-panel h3{font-size:28px;margin-bottom:18px}
.instrument{display:flex;justify-content:space-between;gap:15px;font-weight:750}
.bar-track{height:16px;background:#edf2ee;border-radius:8px;overflow:hidden;margin:8px 0 21px}
.bar-fill{height:100%;border-radius:8px}
.case .insight{border:1px solid #669d81;background:#ffffff0d;border-radius:15px;padding:25px;margin:32px 0}
.insight strong{font-size:23px;font-family:Georgia,serif}
.insight p{margin:10px 0 0}
.time-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.time-card{border-radius:14px;padding:23px;border:1px solid #dce7e1}
.time-card.good{background:#e6f4ec}
.time-card.bad{background:#fff1f1}
.time-card .time-title{font-size:14px;font-weight:750}
.time-card .big{font-weight:850;font-size:clamp(26px,3vw,39px);font-variant-numeric:tabular-nums;margin:11px 0}
.time-card.bad .big{color:var(--red)}
.time-card.good .big{color:var(--green)}
.time-card p{font-size:14px;margin:0;color:#50635b}
.screenshot-card{background:#fff;border-radius:20px;padding:14px;border:1px solid var(--stroke);box-shadow:0 20px 45px #09292013;margin:32px 0}
.screenshot-card img{width:100%;height:auto;display:block;border-radius:10px;cursor:zoom-in}
.screenshot-card figcaption{padding:13px 10px 4px;font-size:12px;color:var(--muted)}
.price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:30px}
.price{border:1px solid var(--stroke);border-radius:20px;padding:33px;background:#fff}
.price.full{border:2px solid #19845b;background:#f3faf6}
.price .price-num{color:var(--green);font-weight:800;font-size:24px;margin-bottom:14px}
.price ul{padding-left:22px;margin:14px 0}
.price li{margin-bottom:9px;font-size:15px}
.rule{height:1px;background:var(--stroke);margin:26px 0}
.footnote{font-size:13px;color:var(--muted)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:35px}
.step{background:var(--cream);border:1px solid var(--stroke);padding:28px;border-radius:16px}
.step .number{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#d6eddf;color:#166442;font-weight:900;margin-bottom:20px}
.step h3{font-size:19px}
.step p{font-size:15px;margin:0;color:var(--muted)}
.platforms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px;margin:32px 0}
.platform{border:1px solid var(--stroke);border-radius:16px;padding:23px;background:#fff}
.platform h3{font-size:20px}
.platform p{color:var(--muted);font-size:14px;margin:0}
.trust{background:#eff7f1}
.trust-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px}
.trust-points{list-style:none;padding:0;margin:0}
.trust-points li{margin-bottom:19px;padding-left:29px;position:relative;font-size:16px}
.trust-points li:before{content:'✓';position:absolute;left:0;top:0;color:var(--green);font-weight:900}
.faq details{border-bottom:1px solid #cadae0;padding:19px 0}
.faq summary{font-weight:750;cursor:pointer}
.faq details p{font-size:15px;color:var(--muted);margin:12px 0 0}
.cta-final{background:var(--navy);color:#fff;text-align:center}
.cta-final h2{max-width:800px;margin:16px auto 21px}
.cta-final p{max-width:700px;margin:0 auto 27px;color:#b5d6c9}
.cta-final .fine{color:#a5c1b7;font-size:13px;margin-top:19px}footer{background:#0b201d;color:#96b1a6;padding:28px 22px;text-align:center;font-size:12px}
.disclaimer{background:#fff7e8;border:1px solid #f1ddbb;border-radius:12px;color:#6b5b43;font-size:13px;line-height:1.55;padding:15px 18px}
.center{text-align:center}
.center p{max-width:780px;margin-left:auto;margin-right:auto}
.article-meta{margin:10px 0 0;color:#accbbd;font-size:13px}
@media(max-width:800px){.hero-grid,.two-col,.trust-grid{grid-template-columns:1fr;gap:32px}
.hero-grid{padding:60px 0 64px}
.demo-box{transform:none}
.section{padding:70px 19px}
.math-grid,.steps,.platforms{grid-template-columns:1fr}
.question-list,.price-grid{grid-template-columns:1fr}
.nav-badge{display:none}
.hero h1{font-size:clamp(38px,10vw,58px)}
.case-kpis{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.white-panel{padding:22px}
.time-grid{grid-template-columns:1fr}
.case-kpi strong{font-size:24px}
.lead{font-size:19px}
.intro{font-size:18px}}
@media(max-width:500px){.case-kpis{grid-template-columns:1fr}
.nav-cta{font-size:12px;padding:7px 9px}
.brand{font-size:15px}
.logo{width:30px;height:30px}
.demo-box{padding:19px}
.metric-large{font-size:42px}
.section{padding:56px 17px}
.math-panel{padding:15px}}

/* Article-only layout. Keep content inside its columns, including at 320 px. */
html { scroll-padding-top: 90px; }
body { overflow-wrap: anywhere; }
img { max-width: 100%; }
.hero { padding-inline: 22px; }
.hero-grid > *, .wrap > *, .two-col > *, .trust-grid > *, .price-grid > *, .time-grid > * { min-width: 0; }
.demo-box { width: 100%; }
.metric-large { font-size: clamp(30px, 3.4vw, 48px); }
.nav-inner { min-height: 70px; }
.brand img { flex: 0 0 34px; }
.nav-badge a { text-decoration: none; }
.nav-cta, .platform-link { display: inline-flex; align-items: center; min-height: 44px; }
.nav-cta { text-align: center; }
.platform-link { margin-top: 16px; font-size: 14px; color: #146444; font-weight: 700; }
.case .white-panel p { color: var(--ink); }
.time-card { color: var(--ink); }
.hero .eyebrow { font-size: 11px; letter-spacing: .12em; }
.hero h1 { padding-right: 3px; overflow-wrap: normal; font-size: clamp(42px, 4.9vw, 70px); }
.hero .demo-box .notice { color: #53655c; }
.line, .instrument { flex-wrap: wrap; }
.line span:last-child, .instrument span:last-child { font-variant-numeric: tabular-nums; }
.case-kpi label, .case-kpi > span { display: block; font-size: 13px; color: #bfd8cc; }
.screenshot-card { margin-inline: 0; }
.screenshot-link { display: block; border-radius: 10px; }
.screenshot-card figcaption { font-size: 14px; }
.access-note { max-width: 850px; margin: 24px auto 0; color: #53655c; font-size: 15px; }
.price .footnote { font-size: 15px; }
.faq summary { min-height: 44px; padding-block: 8px; }
.faq details p { font-size: 16px; }
.disclaimer a { text-underline-offset: 3px; }
.button { min-height: 48px; max-width: 100%; text-align: center; }
footer { font-size: 14px; color: #bfd4ca; }
footer .legal-links { display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: center; margin-block: 16px; }
footer a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.footer-brand { font-size: 18px; font-weight: 800; text-decoration: none; }
footer .footer-channel { display: flex; align-items: flex-start; gap: 10px; max-width: 380px; margin: 20px auto 0; padding-top: 20px; border-top: 1px solid #36564a; color: #bfd4ca; text-align: left; text-decoration: none; line-height: 1.5; }
.footer-channel-icon { flex: 0 0 24px; margin-top: 2px; }
.footer-channel > span { min-width: 0; }
.footer-channel strong { display: block; font-size: 14px; font-weight: 600; }
.footer-channel-action { display: block; margin-top: 4px; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.footer-channel:hover .footer-channel-action { text-decoration-thickness: 2px; }
.skip-link { position: absolute; left: 20px; top: -100px; z-index: 10; padding: 12px 16px; background: white; color: #12332d; }
.skip-link:focus { position: fixed; top: 12px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #b26400; outline-offset: 4px; }
.hero a:focus-visible, .cta-final a:focus-visible { outline-color: #c8ef9f; }
@media (max-width: 1100px) and (min-width: 801px) {
  .hero-grid { gap: 32px; }
  .hero h1 { font-size: 58px; }
  .demo-box { padding: 23px; }
}
@media (max-width: 800px) {
  .section { padding: 60px 20px; }
  .hero { padding-inline: 20px; }
  .hero-grid { padding: 48px 0 56px; }
  .hero h1 { font-size: clamp(34px, 8.6vw, 56px); line-height: 1.12; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .hero .eyebrow span { padding: 6px 9px; }
  .hero .lead { font-size: 18px; }
  .demo-box { margin-inline: auto; padding: 22px; }
  .metric-large { font-size: clamp(30px, 8.5vw, 42px); }
  .demo-box .top { flex-wrap: wrap; gap: 10px; }
  .case-kpis { grid-template-columns: minmax(0, 1fr); margin-block: 28px; }
  .case-kpi { padding: 18px 20px; }
  .case-kpi strong { font-size: 26px; }
  .white-panel, .price { padding: 24px 20px; }
  .white-panel h3 { font-size: 25px; }
  .time-card { padding: 22px 20px; }
  .time-card .big { font-size: clamp(25px, 7vw, 36px); }
  .math-panel { padding: 16px; }
  .pullquote { padding-left: 18px; }
  .trust-grid { gap: 36px; }
  .nav-inner { gap: 12px !important; padding-inline: 20px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .button:hover { transform: none; }
}