:root {
  --pine-950: #102f29;
  --pine-900: #153f35;
  --pine-800: #1d5143;
  --pine-700: #276352;
  --pine-600: #347461;
  --sage-100: #edf3ea;
  --sage-200: #dce9dc;
  --sage-300: #c7dbcb;
  --cream: #fbf8ef;
  --cream-deep: #f2ecde;
  --ink: #17352e;
  --muted: #5c7168;
  --line: #c7d7c8;
  --brass: #c49346;
  --brass-soft: #f2e6c7;
  --white: #fff;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font: 1.0625rem/1.65 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--sage-300); color: var(--pine-950); }
:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; border-radius: 6px; }
.wrap { width: min(100% - 3rem, 72rem); margin-inline: auto; }
.narrow { width: min(100% - 3rem, 46rem); margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; color: var(--pine-700); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: currentColor; }
.lede { max-width: 39rem; margin: 0; color: var(--muted); font-size: clamp(1.08rem, 1.8vw, 1.25rem); }

/* Hero and navigation */
.hero { position: relative; z-index: 0; overflow: hidden; isolation: isolate; color: var(--cream); background: radial-gradient(circle at 83% 20%, rgba(191,214,192,.16) 0 1px, transparent 1.5px) 0 0/22px 22px, linear-gradient(125deg, var(--pine-950), var(--pine-800) 57%, var(--pine-700)); }
.hero::before, .hero::after { position: absolute; z-index: -1; content: ""; border: 1px solid rgba(247,244,232,.13); border-radius: 50%; pointer-events: none; }
.hero::before { width: 48rem; height: 48rem; right: -25rem; bottom: -28rem; }
.hero::after { width: 32rem; height: 32rem; right: -17rem; bottom: -20rem; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; }
.brand { display: inline-flex; align-items: center; gap: .72rem; color: var(--cream); font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 2.3rem; height: 2.3rem; border-radius: 9px; box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.navlinks { display: flex; align-items: center; gap: 1.35rem; }
.navlinks .link { color: rgba(251,248,239,.84); font-size: .92rem; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.navlinks .link:hover { color: var(--cream); }
.navlinks .nav-download { padding: .5rem .85rem; color: var(--pine-950); background: var(--cream); border-radius: 999px; }
.navlinks .nav-download:hover { color: var(--pine-950); background: var(--brass-soft); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(15rem,.85fr); align-items: center; gap: clamp(2rem,6vw,6rem); min-height: 37rem; padding: 4.2rem 0 5.5rem; }
.hero .eyebrow { color: var(--brass-soft); }
.hero h1 { max-width: 10ch; margin: 0 0 1.35rem; font: 400 clamp(3rem,7vw,5.25rem)/.98 var(--serif); letter-spacing: -.045em; }
.hero .lede { color: rgba(251,248,239,.78); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 2rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .82rem 1.3rem; border: 1px solid transparent; border-radius: 999px; background: var(--brass); color: var(--pine-950); box-shadow: 0 12px 25px rgba(7,31,25,.2); font-weight: 700; line-height: 1.2; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.btn:hover { background: #ddb66d; box-shadow: 0 16px 30px rgba(7,31,25,.28); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.text-link { color: var(--cream); font-size: .95rem; font-weight: 700; text-decoration: none; }
.text-link::after { content: " →"; color: var(--brass-soft); }
.meta { margin: 1.05rem 0 0; color: rgba(251,248,239,.66); font-size: .88rem; }
.trust-list { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 1.6rem 0 0; padding: 0; list-style: none; color: rgba(251,248,239,.8); font-size: .88rem; }
.trust-list li { display: flex; align-items: center; gap: .4rem; }
.trust-list li::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--brass); }
.hero-art { position: relative; justify-self: center; width: min(100%,24rem); padding: 1.35rem; }
.hero-art::before { position: absolute; inset: 0; content: ""; border: 1px solid rgba(251,248,239,.22); border-radius: 46% 54% 49% 51% / 42% 45% 55% 58%; transform: rotate(-8deg); }
.hero-art::after { position: absolute; z-index: -1; inset: 1.7rem -1.2rem -1rem 2.6rem; content: ""; background: var(--brass); border-radius: 48% 52% 52% 48% / 60% 42% 58% 40%; opacity: .24; }
.hero-icon { width: 100%; aspect-ratio: 1; border-radius: 22%; box-shadow: 0 30px 50px rgba(7,29,23,.36), 0 0 0 1px rgba(255,255,255,.18); }
.horizon { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; background: linear-gradient(90deg, var(--brass), var(--brass-soft) 35%, rgba(242,230,199,.14)); }

/* Shared layout */
main { background: var(--cream); }
section { position: relative; padding: clamp(4.5rem,8vw,7.5rem) 0; }
h2 { max-width: 18ch; margin: 0 0 1.15rem; font: 400 clamp(2.1rem,4.2vw,3.35rem)/1.04 var(--serif); letter-spacing: -.035em; }
h3 { margin: 2rem 0 .55rem; color: var(--pine-900); font-size: 1.12rem; }

/* Product introduction */
.showcase { padding-top: clamp(3.5rem,6vw,5.5rem); background: linear-gradient(180deg, var(--cream) 0 63%, var(--sage-100) 63% 100%); }
.showcase-grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(17rem,1.15fr); align-items: center; gap: clamp(2rem,7vw,7rem); }
.showcase-copy { padding-bottom: 2rem; }
.showcase-copy h2 { max-width: 13ch; }
.showcase-note { display: flex; gap: .85rem; align-items: flex-start; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--pine-700); font-size: .96rem; font-weight: 600; line-height: 1.5; }
.showcase-note::before { content: "01"; color: var(--brass); font: 1.7rem/.9 var(--serif); }
.showcase-still { position: relative; margin: 0; padding: clamp(1rem,3vw,2.5rem); overflow: hidden; border-radius: 2.25rem 2.25rem 0 0; background: var(--pine-800); box-shadow: 0 24px 50px rgba(21,63,53,.18); }
.showcase-still::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 12% 10%, rgba(242,230,199,.25), transparent 24rem); pointer-events: none; }
.showcase-still img { position: relative; width: min(100%,18rem); margin-inline: auto; border-radius: 1.3rem; box-shadow: 0 18px 38px rgba(0,0,0,.32); }
.showcase-still figcaption { position: relative; max-width: 32rem; margin: 1.25rem auto 0; color: rgba(251,248,239,.83); font-size: .92rem; text-align: center; }

/* Features */
.feature-intro { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); align-items: end; gap: 1.5rem 4rem; margin-bottom: 3rem; }
.feature-intro h2 { margin-bottom: 0; }
.features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 0; }
.features > div { position: relative; min-height: 11rem; padding: 1.55rem 1.55rem 1.45rem; overflow: hidden; border: 1px solid var(--line); border-radius: 1.05rem; background: rgba(255,255,255,.52); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.features > div::after { position: absolute; top: 1.45rem; right: 1.35rem; color: var(--sage-300); font: 2.4rem/.8 var(--serif); }
.features > div:nth-child(1)::after { content: "01"; }.features > div:nth-child(2)::after { content: "02"; }.features > div:nth-child(3)::after { content: "03"; }.features > div:nth-child(4)::after { content: "04"; }.features > div:nth-child(5)::after { content: "05"; }.features > div:nth-child(6)::after { content: "06"; }
.features > div:hover { border-color: var(--sage-300); box-shadow: 0 16px 28px rgba(29,81,67,.1); transform: translateY(-3px); }
.features dt { position: relative; z-index: 1; max-width: 15ch; margin-bottom: .6rem; color: var(--pine-900); font-size: 1.12rem; font-weight: 700; line-height: 1.25; }
.features dd { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.56; }
.band { background: var(--sage-100); }
.band .features > div { border-color: rgba(39,99,82,.17); background: var(--cream); }
.band .features > div::after { color: var(--sage-200); }

/* Screenshot gallery */
.screens-header { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: end; gap: 2rem 4rem; margin-bottom: 2.5rem; }.screens-header h2 { margin-bottom: 0; }
.shots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.shots figure { height: 100%; margin: 0; padding: .7rem; border: 1px solid rgba(242,230,199,.15); border-radius: 1.35rem; background: var(--pine-800); box-shadow: 0 14px 24px rgba(16,47,41,.12); }
.shots img { width: 100%; border-radius: .88rem; background: var(--pine-800); }
.shots figcaption { display: grid; gap: .4rem; margin: .95rem .25rem .35rem; color: rgba(251,248,239,.74); font-size: .86rem; line-height: 1.5; }.shots figcaption strong { color: var(--cream); font-size: .95rem; }

/* Download, permissions, and footer */
.install { background: var(--pine-900); color: var(--cream); }.install::before { position: absolute; inset: 0; content: ""; background: linear-gradient(100deg,rgba(196,147,70,.14),transparent 42%),radial-gradient(circle at 94% 19%,rgba(199,219,203,.13),transparent 19rem); pointer-events: none; }.install .narrow { position: relative; }.install h2,.install h3 { color: var(--cream); }.install .eyebrow { color: var(--brass-soft); }.install p,.install li { color: rgba(251,248,239,.78); }
.facts { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: .55rem 1.5rem; margin: 1.5rem 0 1.8rem; padding: 1.35rem; border: 1px solid rgba(251,248,239,.18); border-radius: 1rem; background: rgba(16,47,41,.28); }.facts dt { color: var(--brass-soft); font-size: .9rem; }.facts dd { margin: 0; overflow-wrap: anywhere; color: var(--cream); font-size: .94rem; }.btn.solid { background: var(--brass); color: var(--pine-950); }.install ol { margin: .65rem 0 0; padding-left: 1.25rem; }.install li { margin: .45rem 0; }
.permissions { background: var(--cream-deep); }.permissions-card { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 2rem 4rem; padding: clamp(1.5rem,4vw,3rem); border: 1px solid var(--line); border-radius: 1.5rem; background: var(--cream); box-shadow: 0 16px 32px rgba(37,75,60,.06); }.permissions-card h2 { max-width: 12ch; }.permissions-card p { color: var(--muted); }.permissions-card ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }.permissions-card li { position: relative; padding: .85rem 0 .85rem 1.7rem; border-bottom: 1px solid var(--line); color: var(--muted); }.permissions-card li::before { position: absolute; left: 0; content: "✓"; color: var(--pine-700); font-weight: 800; }.permissions-card strong { color: var(--pine-900); }.permissions-card a { color: var(--pine-700); font-weight: 700; text-underline-offset: .2em; }
footer { padding: 2.25rem 0 2.75rem; border-top: 1px solid var(--line); background: var(--cream); color: var(--muted); font-size: .92rem; }footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1.5rem; }footer a,.linklike { color: inherit; text-decoration: none; }footer a:hover,.linklike:hover { color: var(--pine-700); text-decoration: underline; text-underline-offset: .22em; }.linklike { padding: 0; border: 0; background: none; cursor: pointer; }

/* Legal pages and FAQ */
.legal-hero { background: var(--pine-900); }.legal-hero::before { width: 24rem; height: 24rem; right: -12rem; bottom: -18rem; }.legal-hero::after { display: none; }.doc { padding: clamp(3rem,7vw,6rem) 0; }.doc h1 { max-width: 16ch; margin: 0 0 .65rem; color: var(--pine-900); font: 400 clamp(2.5rem,5vw,4rem)/1 var(--serif); letter-spacing: -.04em; }.doc h2 { max-width: none; margin: 3rem 0 .8rem; color: var(--pine-900); font-size: clamp(1.65rem,3vw,2.2rem); }.doc p,.doc li { color: var(--muted); }.doc a:not(.brand) { color: var(--pine-700); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .18em; }.updated { margin: 0 0 2.3rem; color: var(--muted); font-size: .94rem; }.doc ul,.doc ol { padding-left: 1.3rem; }.doc li { margin: .42rem 0; }.doc table { width: 100%; margin: 1.25rem 0; border: 1px solid var(--line); border-spacing: 0; border-radius: .8rem; background: var(--white); font-size: .92rem; }.doc th,.doc td { padding: .75rem .85rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.doc th:last-child,.doc td:last-child { border-right: 0; }.doc tr:last-child td { border-bottom: 0; }.doc th { color: var(--pine-900); background: var(--sage-100); font-weight: 700; }.doc td { color: var(--muted); }.table-scroll { overflow-x: auto; }.fill { padding: 0 .25em; border-radius: 3px; background: var(--brass-soft); }
.faq { border-bottom: 1px solid var(--line); }.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; color: var(--pine-900); font-weight: 700; cursor: pointer; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { content: "+"; color: var(--brass); font-size: 1.55rem; font-weight: 400; line-height: 1; }.faq[open] summary::after { content: "−"; }.faq p { max-width: 42rem; margin: 0 0 1.2rem; }

/* Cookie consent and counter compatibility */
.consent { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; left: 1rem; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom,0px)); border: 1px solid rgba(242,230,199,.24); border-radius: 1rem; background: var(--pine-950); box-shadow: 0 20px 55px rgba(6,28,22,.35); color: var(--cream); }.consent-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; width: min(100% - 2.25rem,68rem); margin-inline: auto; }.consent-copy { flex: 1 1 25rem; }.consent-copy strong { display: block; font-size: 1.02rem; }.consent-copy p { margin: .2rem 0 0; color: rgba(251,248,239,.75); font-size: .9rem; line-height: 1.5; }.consent-copy a { color: var(--brass-soft); }.consent-actions { display: flex; gap: .65rem; }.consent-btn { min-height: 2.7rem; padding: .55rem 1.1rem; border: 1px solid var(--brass); border-radius: 999px; background: var(--brass); color: var(--pine-950); font-weight: 700; cursor: pointer; }.consent-btn[data-choice="denied"] { background: transparent; color: var(--cream); }
.dl-count { display: inline-flex; align-items: center; gap: .55rem; margin: .9rem 0 0; color: var(--muted); font-size: .9rem; letter-spacing: .01em; }.dl-count .dl-num { color: var(--pine-700); font: 1.15rem var(--serif); font-variant-numeric: tabular-nums; }.dl-tick { width: .7rem; height: .38rem; border-bottom: 2px solid var(--pine-700); border-left: 2px solid var(--pine-700); transform: rotate(-45deg) translateY(-2px); }.install .dl-count { display: flex; color: rgba(251,248,239,.7); }.install .dl-count .dl-num { color: var(--brass-soft); }.install .dl-tick { border-color: var(--brass-soft); }.dl-num.bump { animation: dl-bump .5s ease; }@keyframes dl-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-4px); color: var(--brass); } 100% { transform: translateY(0); } }

@media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0,1fr) minmax(14rem,.65fr); min-height: 0; }.showcase-grid { gap: 2.5rem; }.shots { grid-template-columns: repeat(2,minmax(0,1fr)); }.shots figure { max-width: 19rem; } }
@media (max-width: 700px) { .wrap,.narrow { width: min(100% - 2.25rem,46rem); }.nav { padding: 1rem 0; }.navlinks { gap: .8rem; }.navlinks .link:not(.nav-download) { display: none; }.hero-grid,.showcase-grid,.feature-intro,.screens-header,.permissions-card { grid-template-columns: 1fr; }.hero-grid { padding: 3rem 0 4rem; }.hero h1 { max-width: 11ch; }.hero-art { width: min(13.5rem,56vw); justify-self: start; order: -1; margin-left: .8rem; }.hero-art::after { inset: 1rem -1rem -1rem 1.3rem; }.showcase { background: linear-gradient(180deg,var(--cream) 0 48%,var(--sage-100) 48% 100%); }.showcase-copy { padding-bottom: 0; }.showcase-still { padding: 1rem; border-radius: 1.5rem 1.5rem 0 0; }.showcase-still img { width: min(100%,15.5rem); }.feature-intro,.screens-header { margin-bottom: 2rem; }.features { grid-template-columns: 1fr; }.features > div { min-height: 0; }.facts { grid-template-columns: 1fr; gap: .2rem; }.facts dd { margin-bottom: .6rem; }.permissions-card { gap: 1rem; }.consent { right: .7rem; bottom: .7rem; left: .7rem; } }
@media (max-width: 430px) { .navlinks .nav-download { padding: .48rem .7rem; font-size: .82rem; }.hero h1 { font-size: 2.85rem; }.shots { grid-template-columns: 1fr; }.shots figure { max-width: 17rem; margin-inline: auto; }.consent-actions { width: 100%; }.consent-btn { flex: 1; }footer .wrap { justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }
