@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{color-scheme:light;--ink:#18372d;--forest:#153e32;--paper:#f8f5ed;--soft:#e5eddf;--line:#d6ded0;--muted:#486357;--white:#fffdf8;font-family:"DM Sans",Arial,sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}
body{margin:0}
a{color:inherit;text-decoration:none}
button,select{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #b96d24;outline-offset:4px}
.top,.hero,.feature-section,.pricing-section,footer{width:min(1220px,calc(100% - 100px));margin-inline:auto}
.top{display:flex;align-items:center;justify-content:space-between;min-height:88px;border-bottom:1px solid var(--line);gap:20px}
.brand{font:34px/1 "Instrument Serif",Georgia,serif;display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.brand img,.app-name img{border-radius:7px}
nav,.actions,.hero-actions{display:flex;align-items:center;gap:28px}
nav a,.actions,.hero-actions{font-size:14px;font-weight:600}
nav a:hover,.text-link:hover,footer>a:last-child:hover{text-decoration:underline;text-underline-offset:5px}
select,.quiet{border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);min-height:42px;padding:7px 11px}
.quiet{background:transparent;white-space:nowrap}
.hero{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:clamp(34px,6vw,90px);padding:90px 0 98px}
.eyebrow{letter-spacing:.15em;font-size:11px;font-weight:700;margin:0 0 21px}
h1,h2,h3,p{margin:0}
h1,h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400}
h1{font-size:clamp(68px,7.8vw,123px);line-height:.87;letter-spacing:-.025em;max-width:550px}
.lede{font-size:18px;line-height:1.6;max-width:425px;margin:29px 0 30px;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--forest);border-radius:8px;padding:11px 20px;background:var(--forest);color:var(--white);font-weight:700;font-size:14px;text-align:center}
.button:hover{background:#24634f}
.demo-frame{border:1px solid #c8d3c6;background:var(--white);border-radius:20px;box-shadow:0 23px 55px #1b432116;overflow:hidden;scroll-margin-top:22px}
.demo-bar,.demo-title,.chart-header{display:flex;justify-content:space-between;align-items:center;gap:12px}
.demo-bar{padding:13px 22px;background:var(--forest);color:var(--white)}
.app-name{display:flex;align-items:center;gap:8px;font:23px "Instrument Serif",Georgia,serif}
.demo-label{font-size:10px;letter-spacing:.12em;color:#d6e5d0;font-weight:700}
.demo-body{padding:24px}
.demo-title h2{font-size:clamp(26px,3vw,38px);line-height:1}
.demo-title select{min-height:37px;font-size:13px}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:20px 0 24px}
.metrics div{display:grid;gap:7px;background:#f2f3e9;border-radius:9px;padding:12px 10px}
.metrics div:last-child{background:var(--soft)}
.metrics span,.chart-header span{font-size:12px;color:var(--muted)}
.metrics strong{font-size:clamp(17px,2.3vw,27px);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-header{padding-bottom:12px;font-size:14px}
.categories{list-style:none;padding:0;margin:0 0 21px;display:grid;gap:12px}
.categories li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;font-size:13px}
.categories li span:nth-child(2){color:var(--muted);font-variant-numeric:tabular-nums}
.bar{height:6px;background:#e5ebdf;border-radius:9px;grid-column:1/-1;overflow:hidden}
.bar i{height:100%;display:block;background:#59866a;border-radius:inherit;transition:width .22s ease}
.bar i[data-over="true"]{background:#a95b39}
.demo-action{background:var(--soft);border:1px solid #d7e2d5;border-radius:8px;min-height:42px;padding:7px 12px;color:var(--ink);font-size:13px;font-weight:700}
.demo-action:hover{background:#d6e5cf}
.demo-note{font-size:12px;color:var(--muted);margin-top:9px;min-height:30px}
.feature-section{border-top:1px solid var(--line);padding:52px 0 62px}
.feature-section h2,.pricing-section h2{font-size:clamp(42px,5vw,70px);line-height:.97}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:29px;margin-top:33px}
.feature-grid article{border-top:1px solid var(--line);padding-top:17px}
.feature-grid span{font-size:25px;color:#497359}
.feature-grid h3{font-size:19px;margin:9px 0}
.feature-grid p,.pricing-section p{color:var(--muted);line-height:1.55}
.pricing-section{display:grid;grid-template-columns:1fr minmax(275px,.75fr);gap:38px;background:var(--soft);border-radius:18px;padding:clamp(24px,5vw,60px);align-items:center}
.pricing-section h2+p{margin-top:15px}
.price-card{background:var(--white);border-radius:13px;padding:24px}
.price-card strong{font:54px/1 "Instrument Serif",Georgia,serif}
.price-card span{font-size:15px}
.price-card .renewal{margin:10px 0 18px;font-weight:600}
.price-card .status{font-size:12px;margin-top:9px}
footer{display:flex;justify-content:space-between;align-items:center;padding:35px 0 42px;gap:15px}
footer>a:last-child{font-size:14px}
dialog{width:min(440px,calc(100% - 32px));border:1px solid var(--line);border-radius:16px;background:var(--white);color:var(--ink);padding:31px}
dialog::backdrop{background:#122a23a6}
dialog h2{font-size:43px;line-height:1}
dialog p{margin:14px 0 21px;line-height:1.55}
.close{position:absolute;right:10px;top:7px;border:0;background:none;color:var(--ink);font-size:24px;width:44px;height:44px}
@media(max-width:900px){.top,.hero,.feature-section,.pricing-section,footer{width:calc(100% - 52px)}.hero{gap:28px;padding:60px 0}.demo-body{padding:17px}.actions{gap:9px}.hero-actions{gap:15px}}
@media(max-width:710px){.hero,.pricing-section{grid-template-columns:1fr}.hero{padding:48px 0 54px;gap:38px}.top nav{display:none}.top{min-height:69px}.brand{font-size:30px}.lede{margin:20px 0 22px}.feature-grid{grid-template-columns:1fr;gap:23px}.feature-section{padding:43px 0}.metrics strong{font-size:20px}}
@media(max-width:390px){.top,.hero,.feature-section,.pricing-section,footer{width:calc(100% - 32px)}.brand{gap:6px}.top .brand img{width:26px;height:26px}.metrics strong{font-size:16px}.metrics div{padding:10px 6px}.pricing-section{padding:18px}.price-card{padding:17px}}
@media(prefers-reduced-motion:reduce){.bar i{transition:none}}

.why-preview { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: clamp(20px,5vw,52px); background: var(--soft); border-radius: 18px; }
.why-preview p { margin-top: .8rem; max-width: 65ch; }
footer { flex-wrap: wrap; }

.flag-picker { display: flex; align-items: center; gap: 3px; }
.flag-picker button,.flag-picker a { display: grid; place-items: center; width: 33px; min-height: 36px; padding: 1px; border: 1px solid transparent; border-radius: 7px; background: transparent; font-size: 19px; }
.flag-picker [aria-pressed="true"],.flag-picker [aria-current="true"] { background: var(--soft); border-color: var(--line); }
a.quiet { display: inline-flex; align-items: center; }
.hero-visual { display: block; padding: 14px; background: var(--soft); border-radius: 22px; }
.hero-visual img { display: block; width: 100%; height: auto; border-radius: 14px; }
.hero h1 { font-size: clamp(55px,7vw,105px); }
.hero .lede { max-width: 52ch; }
.page-intro,.sample-section { width: min(1220px,calc(100% - 52px)); margin-inline: auto; }
.page-intro { padding: clamp(38px,8vw,100px) 0; }
.page-intro h1 { max-width: 950px; font-size: clamp(48px,7vw,100px); line-height: .95; }
.page-intro p { margin-top: 1rem; max-width: 58ch; line-height: 1.65; color: var(--muted); }
.sample-section { max-width: 800px; margin-bottom: 3rem; }
.demo-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.table-wrap { overflow-x: auto; margin-top: 1.5rem; }
.table-wrap table { width: 100%; min-width: 550px; border-collapse: collapse; text-align: left; background: var(--white); }
.table-wrap th,.table-wrap td { padding: 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap thead { background: var(--forest); color: var(--white); }
.feature-section details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.feature-section h2 + details { margin-top: 1rem; }
.feature-section summary { cursor: pointer; font-weight: 700; }
.feature-section details p,.feature-section > p { margin-top: .65rem; color: var(--muted); line-height: 1.6; max-width: 70ch; }
.feature-section .hero-actions { margin-top: 1rem; }
.price-card p { margin: .4rem 0; }
.price-card button { margin-top: .8rem; }
button:disabled { opacity: .65; cursor: default; }
@media(max-width:710px) { .top { flex-wrap: wrap; padding: 10px 0; gap: 8px; } .top nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; gap: 14px; } .page-intro,.sample-section { width: calc(100% - 32px); } }

.hero .intro { min-width: 0; }
.hero .demo-frame { min-width: 0; }
.example-note { font-size: .875rem; }
.home-cta { margin-top: 2rem; padding: clamp(22px,5vw,50px); border-radius: 18px; background: var(--soft); }

.feature-grid .motion-card { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem; box-shadow: 0 8px 20px #153e320c; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.motion-card:hover,.motion-card:focus-within { transform: translateY(-5px); box-shadow: 0 14px 28px #153e321c; border-color: #80a087; }
.motion-card .card-emoji { display: inline-grid; place-items: center; min-width: 2.7rem; height: 2.7rem; background: var(--soft); border-radius: 10px; }
.budget-callout { margin-top: 1.7rem; background: var(--soft); border-radius: 16px; padding: clamp(1.1rem,3vw,2rem); }
.budget-callout p { margin-top: .6rem; max-width: 66ch; }
.story-card > strong { display: inline-block; color: var(--forest); background: var(--soft); border-radius: 20px; padding: .3rem .65rem; }
.yes-mark,.no-mark { display: inline-block; margin-right: .55em; font-weight: 700; }
.yes-mark { color: #176b3e; }
.no-mark { color: #a42428; }
.addon-section { margin-top: 3rem; }
.addon-section .text-link { display: inline-block; margin-top: .65rem; }
@media (prefers-reduced-motion: reduce) { .feature-grid .motion-card { transition: none; } .motion-card:hover,.motion-card:focus-within { transform: none; } }

.hero .intro h1 { font-size: clamp(46px, 6.5vw, 99px); line-height: 1.02; overflow-wrap: break-word; }
.hero .intro .lede { margin: 1.4rem 0 1.5rem; line-height: 1.55; }
.hero .intro .button { max-width: 100%; line-height: 1.35; }
.story-heading { margin-top: 1.75rem; }
.story-heading + .feature-grid { margin-top: 1rem; }