:root {
  --ink: #292725;
  --muted: #65635f;
  --paper: #f8f7f4;
  --white: #fff;
  --line: #e7e4df;
  --green: #577a49;
  --green-light: #dce8d5;
  --brand: #a8875b;
  --cream: #f2e8d7;
  --yellow: #efc84f;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.62; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
.page-width { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.section-space { padding-block: 96px; }
.pill { display: inline-flex; align-items: center; justify-content: center; min-width: 170px; min-height: 56px; padding: 14px 26px; border-radius: 999px; font-weight: 750; transition: transform .2s ease, background .2s ease; }
.pill:hover { transform: translateY(-2px); }
.pill:focus-visible, .site-nav a:focus-visible, .site-footer a:focus-visible, .feature-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.pill-dark { background: var(--ink); color: white; }
.pill-light { background: #f1f1f3; }

.site-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 112px; }
.brand { display: inline-flex; align-items: center; gap: 9px; width: max-content; font-size: 1.5rem; font-weight: 850; letter-spacing: -.035em; }
.brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-nav { display: flex; align-items: center; gap: 22px; font-weight: 600; }
.site-nav a:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.language-switch { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; font-weight: 800; }
.language-switch a { display: grid; place-items: center; width: 42px; height: 36px; border-radius: 999px; color: var(--muted); }
.language-switch a[aria-current="page"] { background: var(--ink); color: white; }
.github-count { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; }
.github-count svg, .github-button svg { width: 25px; fill: currentColor; }
.desktop-cta { min-width: 154px; min-height: 56px; }
.menu-toggle { display: none; width: 46px; height: 46px; padding: 11px; border: 0; background: transparent; }
.menu-toggle span { display: block; width: 22px; height: 2px; margin: 4px auto; background: var(--ink); }

.hero { padding-top: 90px; text-align: center; }
.hero-copy h1 { max-width: 1050px; margin: 0 auto 24px; font-size: clamp(3.6rem, 6vw, 5.9rem); font-weight: 850; letter-spacing: -.035em; line-height: 1.02; }
.hero-copy h1 span { color: var(--green); }
.hero-copy > p { color: var(--muted); font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500; line-height: 1.55; }
.hero-buttons { display: flex; justify-content: center; gap: 22px; margin-top: 42px; }
.family-fan { position: relative; height: 410px; margin-top: 70px; }
.hero > .family-fan:first-child { display: none; }
.family-card { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; width: 275px; height: 330px; border: 7px solid white; border-radius: 30px; box-shadow: 0 12px 28px #3d372f20; transform: rotate(var(--card-rotation)); animation: card-settle .68s cubic-bezier(.2,.8,.2,1) both; }
.family-card div { display: flex; flex-direction: column; }
.family-card strong { font-size: 1.35rem; }
.family-card small { color: #5c5752; }
.portrait { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; font-size: 2rem; font-weight: 850; filter: sepia(.16); }
.portrait-sosro { object-position: 50% 18%; }
.sister-left { object-position: 7% 50%; }
.sister-center { object-position: 50% 50%; }
.sister-right { object-position: 93% 50%; }
.portrait-gold { background: #ead4a8; color: #795b29; }
.portrait-green { background: #cbd9be; color: #526a43; }
.portrait-brand { background: #d8c3a3; color: #765b39; }
.portrait-rose { background: #e4c0b2; color: #895344; }
.fan-one { --card-rotation: -8deg; left: 5%; top: 40px; background: #f2dfb8; animation-delay: 40ms; }
.fan-two { --card-rotation: -2deg; left: 28%; top: 60px; z-index: 2; background: #dbe6d4; animation-delay: 110ms; }
.fan-three { --card-rotation: 3deg; right: 27%; top: 20px; z-index: 3; background: #e7d6bc; animation-delay: 180ms; }
.fan-four { --card-rotation: 8deg; right: 5%; top: 62px; background: #ead1c8; animation-delay: 250ms; }
.trust-row { display: flex; justify-content: center; gap: 72px; padding: 36px 0 76px; color: var(--muted); font-size: .82rem; font-weight: 800; letter-spacing: .06em; }

@keyframes card-settle {
  from { opacity: 0; transform: translateY(26px) scale(.96) rotate(0); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(var(--card-rotation)); }
}

.privacy-showcase { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; height: max-content; min-height: 460px; overflow: hidden; padding: 32px 56px; border-radius: 35px; background: var(--green); color: white; }
.phone-photo { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 55%; margin: 0; overflow: hidden; filter: drop-shadow(0 30px 34px #25331e42); -webkit-mask-image: linear-gradient(to left, #000 0%, #000 76%, transparent 100%); mask-image: linear-gradient(to left, #000 0%, #000 76%, transparent 100%); }
.phone-photo img { display: block; width: 145%; max-width: none; height: auto; transform: translate(-7%, -8%); }
.privacy-copy { position: relative; z-index: 2; grid-column: 1; grid-row: 1; max-width: 520px; padding-right: 24px; }
.mini-pill { display: inline-flex; padding: 7px 13px; border-radius: 999px; background: var(--cream); color: var(--ink); font-size: .72rem; font-weight: 750; }
.privacy-copy h2 { margin: 16px 0 20px; font-size: clamp(2.65rem, 4vw, 4.1rem); line-height: 1.04; letter-spacing: -.035em; }
.privacy-copy ul { margin: 0 0 22px; padding: 0; list-style: none; font-size: 1.02rem; line-height: 1.5; }
.privacy-copy li { margin: 8px 0; }
.privacy-copy li span { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: white; color: var(--green); font-size: .7rem; font-weight: 900; }
.inline-link { font-weight: 750; }
.inline-link span { margin-left: 8px; }
.privacy-orbits { position: absolute; inset: 0; pointer-events: none; }
.privacy-orbits i { position: absolute; border: 1px solid #ffffff26; border-radius: 50%; }
.privacy-orbits i:nth-child(1) { width: 440px; height: 440px; right: -130px; top: -110px; }.privacy-orbits i:nth-child(2) { width: 290px; height: 290px; right: -40px; top: -20px; }.privacy-orbits i:nth-child(3) { width: 180px; height: 180px; right: 45px; top: 65px; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 82px 56px; }
.feature { text-align: center; }
.feature-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; }
.feature-strip:focus-visible { outline: 3px solid var(--brand); outline-offset: 5px; }
.feature-strip .feature { display: flex; flex-direction: column; }
.feature-strip .feature-copy { flex: 1; margin: 0 auto; }
.feature-tree-full { grid-column: 1 / -1; }
.feature-tree-full .feature-copy { max-width: 68ch; }
.example-label { display: inline-block; margin-bottom: 12px; color: var(--green); font-size: .82rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.feature-copy { max-width: 470px; margin: auto; }
.feature h3 { margin-bottom: 12px; font-size: clamp(1.55rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.18; }
.feature p { color: var(--muted); font-size: 1.02rem; line-height: 1.65; }
.feature-link { display: inline-flex; align-items: center; gap: 8px; color: var(--green); font-size: .94rem; font-weight: 750; }
.feature-link span { transition: transform .2s ease; }
.feature-link:hover span, .feature-link:focus-visible span { transform: translateX(3px); }
.feature-art { position: relative; height: 360px; margin-top: 35px; overflow: hidden; border-radius: 24px; background: #f3f1ed; }
.visual-tree i { position: absolute; z-index: 1; height: 2px; background: #af9c82; transform-origin: left; }
.feature-tree-full .visual-tree { height: 500px; }
.visual-tree i:nth-child(1) { width: 52%; left: 24%; top: 55%; }.visual-tree i:nth-child(2) { width: 165px; left: 50%; top: 22%; transform: rotate(90deg); }.visual-tree i:nth-child(3) { display: none; }
.demo-node { position: absolute; z-index: 2; display: grid; grid-template-columns: 66px auto; column-gap: 12px; align-items: center; min-width: 230px; padding: 13px; border: 1px solid #ddd5ca; border-radius: 16px; background: white; text-align: left; box-shadow: 0 12px 26px #3b33291a; }
.demo-node .portrait { grid-row: 1 / span 2; width: 66px; height: 66px; }
.demo-node b, .demo-node small { grid-column: 2; }
.demo-node small { color: var(--muted); }
.demo-parent { top: 45px; left: calc(50% - 115px); }
.demo-one { left: 7%; bottom: 55px; }.demo-two { left: calc(50% - 115px); bottom: 55px; }.demo-three { right: 7%; bottom: 55px; }
.demo-credit { max-width: 78ch; margin: 18px auto 0; font-size: .86rem; line-height: 1.65; }.demo-credit a { text-decoration: underline; text-underline-offset: 2px; }
.interactive-tree { margin-top: 35px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #f3f1ed; text-align: left; box-shadow: 0 18px 40px #2d282214; }
.tree-demo-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fffdf9; }
.tree-demo-toolbar > div:first-child { display: flex; flex-direction: column; }
.tree-demo-toolbar strong { font-size: 1rem; line-height: 1.3; }
.tree-demo-toolbar span { color: var(--muted); font-size: .82rem; }
.tree-demo-actions { display: flex; align-items: center; gap: 10px; }
.tree-app-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 15px; border-radius: 11px; background: var(--green); color: white; font-size: .86rem; font-weight: 800; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.tree-app-link span { color: inherit; font-size: inherit; }
.tree-app-link:hover { background: #436e46; transform: translateY(-1px); }.tree-app-link:active { transform: translateY(1px); }.tree-app-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }.tree-app-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tree-demo-controls { display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.tree-demo-controls button { width: 46px; height: 46px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1.05rem; font-weight: 750; cursor: pointer; }
.tree-demo-controls button svg { display: block; width: 19px; height: 19px; margin: auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.tree-demo-controls button:last-child { border-right: 0; }
.tree-demo-controls button:hover { background: var(--cream); }
.tree-demo-viewport { position: relative; height: clamp(430px, 66svh, 620px); overflow: hidden; outline: none; touch-action: pan-y; cursor: grab; background: #f5f4f1; }
.tree-demo-viewport:active { cursor: grabbing; }
.tree-demo-viewport:focus-visible { box-shadow: inset 0 0 0 3px var(--brand); }
.tree-demo-stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.tree-demo-stage.is-settling { transition: transform .42s cubic-bezier(.2,.8,.2,1); }
.tree-demo-stage svg { position: absolute; top: 0; left: 0; overflow: visible; }
.tree-demo-stage line, .tree-demo-stage path { fill: none; stroke: #9d8a70; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tree-demo-stage .partner-connector { stroke: #83715a; }
.family-junction { fill: #8f7a61; }
.crossing-knockout { fill: #f5f4f1; }
.crossing-bridge { stroke: #8f7a61; stroke-width: 1.7; }
.partner-badge rect { fill: #f5f4f1; stroke: #ded8ce; stroke-width: 1; }
.partner-badge text { fill: #665b4d; font: 650 12px var(--sans); text-anchor: middle; }
.tree-line-draw { animation: tree-line-draw .62s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--draw-delay); }
.motion-ready .interactive-tree .tree-line-draw { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion-ready .interactive-tree.is-in-view .tree-line-draw { animation: tree-line-draw .62s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--draw-delay); }
.web-tree-node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 190px; min-height: 138px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: center; transform: translate(-50%, -32px); cursor: pointer; }
.web-tree-node .node-avatar { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border: 3px solid white; border-radius: 50%; background: var(--cream); color: #6f5533; font-size: 1rem; font-weight: 850; box-shadow: 0 5px 14px #2d28221c; }
.web-tree-node img.node-avatar { object-fit: cover; filter: sepia(.15); }
.web-tree-node strong { max-width: 190px; margin-top: 10px; overflow: hidden; font-size: .9rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.web-tree-node strong.compact { font-size: .78rem; letter-spacing: -.025em; }
.web-tree-node small { margin-top: 3px; color: var(--muted); font-size: .8rem; line-height: 1.25; }
.web-tree-node .node-life { margin-top: 2px; color: #71695f; font-size: .74rem; line-height: 1.25; }
.web-tree-node .node-avatar { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.web-tree-node.selected .node-avatar { border-color: var(--brand); box-shadow: 0 0 0 5px #a8875b2b, 0 7px 18px #2d282229; transform: translateY(-2px); }
.web-tree-node:hover .node-avatar { transform: translateY(-2px); }
.tree-demo-hint { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); background: #fffdf9; color: var(--muted); font-size: .84rem; line-height: 1.55; text-align: center; }

@keyframes tree-line-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
.visual-lock { background: #eee1ca; }
.lock-body { position: absolute; top: 70px; left: calc(50% - 55px); width: 110px; height: 100px; border-radius: 25px; background: var(--brand); transform: rotate(5deg); }
.lock-body:before { content: ''; position: absolute; top: -50px; left: 25px; width: 52px; height: 60px; border: 10px solid var(--brand); border-bottom: 0; border-radius: 32px 32px 0 0; }
.lock-body i { position: absolute; top: 35px; left: 47px; width: 15px; height: 34px; border-radius: 10px; background: white; }
.archive-file { position: absolute; right: 10%; bottom: 50px; display: flex; flex-direction: column; width: min(270px, 78%); padding: 20px; border: 1px solid #d2c1a7; border-radius: 13px; background: white; text-align: left; transform: rotate(-5deg); box-shadow: 0 15px 30px #4a3c2920; }
.archive-file small { color: var(--muted); font-size: .55rem; letter-spacing: .1em; }.archive-file strong { margin: 8px 0; }.archive-file span { color: var(--green); font-size: .68rem; font-weight: 750; }
.visual-export { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 28px); background: #e3ebdd; }
.visual-export div { display: grid; place-items: center; width: min(135px, 36%); height: 165px; border: 1px solid #bdc9b4; border-radius: 15px; background: white; font-size: clamp(.78rem, 1.2vw, 1.1rem); font-weight: 800; box-shadow: 0 12px 25px #40523712; }.visual-export div:first-child { transform: rotate(-6deg); }.visual-export div:last-child { transform: rotate(6deg); }.visual-export span { color: var(--green); font-size: clamp(1.8rem, 2.4vw, 2.4rem); }
.visual-names { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; background: #eadfd7; }
.visual-names span { width: 64%; padding: 15px; border: 1px solid #d4c2b6; border-radius: 12px; background: white; font-size: 1.05rem; font-weight: 700; box-shadow: 0 8px 18px #513c3010; }.visual-names span:nth-child(1) { transform: rotate(-4deg); }.visual-names span:nth-child(2) { margin-left: 40px; transform: rotate(2deg); }.visual-names span:nth-child(3) { margin-left: -30px; transform: rotate(-1deg); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }

.capability-showcase { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: clamp(44px, 6vw, 88px); margin-bottom: clamp(28px, 4vw, 52px); padding: clamp(44px, 6vw, 76px); border-radius: 32px; background: #263b2d; color: white; }
.capability-intro { align-self: start; position: sticky; top: 30px; }
.capability-intro > span { display: inline-flex; margin-bottom: 20px; padding: 7px 12px; border: 1px solid #ffffff42; border-radius: 999px; color: #e6efdf; font-size: .72rem; font-weight: 800; letter-spacing: .055em; line-height: 1.3; text-transform: uppercase; }
.capability-intro h2 { max-width: 10ch; margin-bottom: 22px; font-size: clamp(2.35rem, 4vw, 4rem); letter-spacing: -.035em; line-height: 1.04; }
.capability-intro p { max-width: 40ch; margin: 0; color: #e1eadc; font-size: 1.02rem; line-height: 1.68; }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.capability-item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; min-height: 210px; padding: 30px 28px; border-top: 1px solid #ffffff29; }
.capability-item:nth-child(odd) { padding-left: 0; border-right: 1px solid #ffffff29; }
.capability-item:nth-child(even) { padding-right: 0; }
.capability-item:nth-child(-n + 2) { border-top: 0; padding-top: 4px; }
.capability-item svg { width: 58px; height: 58px; padding: 13px; border-radius: 16px; background: var(--green-light); color: #314b37; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.capability-item h3 { margin: 2px 0 8px; font-size: 1.18rem; letter-spacing: -.015em; line-height: 1.25; }
.capability-item p { margin: 0; color: #dce7d6; font-size: .93rem; line-height: 1.6; }

.no-surveillance { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: clamp(48px, 7vw, 104px); padding: clamp(44px, 6vw, 72px); border-radius: 32px; background: #263b2d; color: white; }
.no-surveillance-intro h2 { max-width: 11ch; margin-bottom: 20px; font-size: clamp(2.45rem, 4.2vw, 4.15rem); letter-spacing: -.035em; line-height: 1.04; }
.no-surveillance-intro p { max-width: 43ch; margin: 0; color: #dce7d6; font-size: 1.02rem; line-height: 1.68; }
.privacy-promises { border-top: 1px solid #ffffff2b; }
.privacy-promise { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 18px; min-height: 112px; padding: 20px 0; border-bottom: 1px solid #ffffff2b; }
.no-mark { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #cfe0c4; border-radius: 15px; background: #dce8d5; color: #314b37; }
.no-mark svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.privacy-promise div { display: grid; gap: 4px; }
.privacy-promise strong { font-size: 1.28rem; letter-spacing: -.015em; line-height: 1.2; }
.privacy-promise small { color: #dce7d6; font-size: .92rem; line-height: 1.5; }
.trust-evidence { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding-top: 24px; border-top: 1px solid #ffffff2b; }
.trust-evidence strong { margin-right: auto; color: #dce7d6; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.trust-evidence a { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 750; }
.trust-evidence a span { color: #b9d2ae; font-size: 1.1em; transition: transform .2s ease; }
.trust-evidence a:hover span, .trust-evidence a:focus-visible span { transform: translateX(3px); }

.open-source { padding-inline: 24px; text-align: center; }
.open-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.open-pills span { padding: 5px 11px; border-radius: 999px; background: var(--green); color: white; font-weight: 800; }.open-pills span:nth-child(2) { transform: translateY(30px) rotate(-5deg); }.open-pills span:nth-child(3) { transform: rotate(4deg); }
.open-source h2 { margin: 62px 0 20px; font-size: clamp(2.7rem, 4.6vw, 4.9rem); line-height: 1.04; letter-spacing: -.035em; }
.open-source > p { max-width: 62ch; margin: 0 auto 30px; color: var(--muted); font-size: 1.05rem; line-height: 1.65; }
.github-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: white; }.github-button span { font-size: .8rem; }.github-button b { font-size: inherit; }

.pricing-heading h2, .faq > h2, .community > h2 { font-size: clamp(2.45rem, 5vw, 3.1rem); letter-spacing: -.025em; line-height: 1.08; }

.memory-mark { text-align: center; }
.heart-mark { color: var(--green); font-size: 1.8rem; }
.memory-mark h2 { margin: 5px 0 35px; font-size: 2.65rem; line-height: 1.02; letter-spacing: -.025em; }
.memory-window { position: relative; width: min(680px, calc(100% - 32px)); aspect-ratio: 700 / 566; margin: auto; overflow: hidden; border: 7px solid white; border-radius: 22px; box-shadow: 0 15px 45px #2d28221f; }
.memory-window img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.16); }
.memory-window b { position: absolute; right: 20px; bottom: 20px; padding: 10px 15px; border-radius: 999px; background: white; font-size: .8rem; }

.pricing-heading { max-width: 650px; margin-bottom: 40px; }.pricing-heading h2 { margin-bottom: 14px; }.pricing-heading p { margin: 0; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
.pricing-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.price-plan { display: flex; flex-direction: column; padding: clamp(30px, 4vw, 48px); border-radius: 28px; }.price-free { background: var(--green); color: white; }.price-pro { border: 1px solid var(--line); background: #f1f1ef; }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid #ffffff35; }.price-pro .plan-top { border-color: #d8d5cf; }.plan-top > span:not(.plan-price) { font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }.plan-top strong { font-size: clamp(2rem, 4vw, 3.35rem); letter-spacing: -.035em; line-height: .95; text-align: right; }.plan-price { display: grid; justify-items: end; gap: 7px; }.plan-price small { color: var(--muted); font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1; text-transform: uppercase; }
.price-plan h3 { min-height: 2.4em; margin: 30px 0 10px; font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -.025em; line-height: 1.12; }.price-plan > p { min-height: 3.2em; margin-bottom: 22px; color: inherit; font-size: .98rem; line-height: 1.6; opacity: .88; }.price-plan ul { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }.price-plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.45; }.price-plan li:before { content: '✓'; flex: none; font-weight: 900; }.price-pro li:before { color: var(--green); }
.price-free > p { opacity: 1; }

.faq { max-width: 900px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 21px 0; }
summary { position: relative; padding-right: 48px; cursor: pointer; list-style: none; font-size: 1.05rem; font-weight: 700; line-height: 1.5; }.faq summary::-webkit-details-marker { display: none; }.faq summary:after { content: '+'; position: absolute; right: 8px; color: var(--green); font-size: 1.35rem; transition: transform .18s ease; }.faq details[open] summary:after { transform: rotate(45deg); }.faq details p { max-width: 64ch; margin: 12px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.68; }

.community { max-width: 900px; }
.community-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 25px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; }.community-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 14px; background: var(--ink); color: white; font-weight: 850; }.community-card p { margin: 4px 0 0; color: var(--muted); font-size: .96rem; line-height: 1.55; }.community-card .pill { min-width: 150px; min-height: 48px; }

.availability { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 56px; margin-block: 100px 140px; padding: clamp(46px, 6vw, 72px); border-radius: 32px; background: var(--green); color: white; text-align: left; }.availability h2 { max-width: 760px; margin-bottom: 0; font-size: clamp(2.7rem, 5.4vw, 5rem); line-height: 1.05; letter-spacing: -.035em; }.availability > p { max-width: 58ch; margin: 0; color: white; font-size: 1.03rem; line-height: 1.6; }.store-buttons { grid-column: 2; grid-row: 1 / span 3; display: grid; justify-items: center; gap: 8px; }.store-badge, .web-app-badge { display: block; width: 197px; border-radius: 10px; transition: transform .2s ease, opacity .2s ease; }.store-badge:hover, .web-app-badge:hover { transform: translateY(-2px); opacity: .9; }.store-badge:active, .web-app-badge:active { transform: translateY(1px); }.store-badge:focus-visible, .web-app-badge:focus-visible { outline: 3px solid white; outline-offset: 4px; }.store-badge img, .web-app-badge img { display: block; width: 197px; max-width: 100%; height: auto; }.platforms { display: flex; justify-content: flex-start; gap: 10px; margin-top: 12px; }.platforms span { padding: 8px 13px; border: 1px solid #ffffff60; border-radius: 999px; font-size: .82rem; }

.site-footer { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 55px; padding-bottom: 35px; }.footer-brand p { max-width: 32ch; margin-top: 18px; color: var(--muted); font-size: .94rem; line-height: 1.6; }.site-footer > div:not(.footer-brand):not(.footer-bottom):not(.image-credits) { display: flex; flex-direction: column; gap: 10px; font-size: .9rem; }.site-footer > div strong { margin-bottom: 7px; }.site-footer > div a:not(.brand) { color: var(--muted); }.site-footer > div a:hover { color: var(--ink); }.image-credits { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; line-height: 1.65; }.image-credits strong { color: var(--ink); }.image-credits p { max-width: 78ch; margin: 5px 0 0; }.image-credits a { text-decoration: underline; }.footer-bottom { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

.motion-ready .privacy-showcase .phone-photo { opacity: 0; transform: translateY(26px); }
.motion-ready .privacy-showcase.is-in-view .phone-photo { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); }

@media (max-width: 1100px) {
  .site-nav { gap: 22px; }
  .header-actions { gap: 16px; }
  .desktop-cta { display: none; }
}

@media (max-width: 900px) {
  .page-width { width: calc(100% - 32px); }
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; position: absolute; z-index: 20; top: 92px; left: 24px; right: 24px; flex-direction: column; align-items: stretch; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 18px 45px #302a221f; }
  .site-nav.is-open { display: flex; }
  .desktop-cta { display: none; }
  .menu-toggle { display: block; }
  .hero { display: flex; flex-direction: column; padding-top: 32px; }
  .hero-copy { order: 1; }
  .hero > .family-fan:first-child { --mobile-card-width: clamp(138px, 48vw, 190px); --mobile-card-height: clamp(185px, 58vw, 230px); --stack-column: clamp(68px, 21vw, 120px); --stack-drop: calc(var(--mobile-card-height) * .5 + 74px); display: block; order: 2; height: clamp(365px, 112vw, 435px); margin: 48px calc((100vw - 100%) / -2) 50px; overflow: hidden; }
  .family-fan-desktop { display: none; }
  .hero > .family-fan:first-child .family-card { left: 50%; right: auto; width: var(--mobile-card-width); height: var(--mobile-card-height); margin-left: calc(var(--mobile-card-width) * -.5); border-width: 5px; border-radius: 22px; gap: 10px; }
  .hero > .family-fan:first-child .family-card .portrait { width: 62px; height: 62px; font-size: 1.3rem; }.hero > .family-fan:first-child .family-card strong { font-size: 1rem; }.hero > .family-fan:first-child .family-card small { font-size: .7rem; }
  .hero > .family-fan:first-child .fan-one { top: 12px; z-index: 1; translate: calc(var(--stack-column) * -1) 0; }
  .hero > .family-fan:first-child .fan-two { top: var(--stack-drop); z-index: 3; translate: calc(var(--stack-column) * -1) 0; }
  .hero > .family-fan:first-child .fan-three { top: var(--stack-drop); z-index: 4; translate: var(--stack-column) 0; }
  .hero > .family-fan:first-child .fan-four { top: 12px; z-index: 2; translate: var(--stack-column) 0; }
  .trust-row { order: 3; display: grid; grid-template-columns: repeat(2, max-content); gap: 12px 42px; padding-bottom: 64px; white-space: normal; }
  .privacy-showcase { grid-template-columns: minmax(0, 1.08fr) minmax(280px, .92fr); min-height: 500px; padding: 36px; }
  .privacy-copy { width: auto; padding: 0 16px 0 0; }
  .phone-photo { width: 46%; height: auto; margin: 0; -webkit-mask-image: linear-gradient(to left, #000 0%, #000 82%, transparent 100%); mask-image: linear-gradient(to left, #000 0%, #000 82%, transparent 100%); }
  .phone-photo img { width: 172%; height: auto; transform: translate(-24%, -5%); }
  .features { gap: 65px 30px; }.feature-strip { gap: 30px; }
  .capability-showcase { grid-template-columns: 1fr; }.capability-intro { position: static; }.capability-intro h2 { max-width: 14ch; }
  .no-surveillance { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { grid-template-columns: 1fr 1fr; gap: 42px 34px; }.footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 780px) {
  .page-width { width: calc(100% - 28px); }
  .section-space { padding-block: 68px; }
  .site-header { min-height: 82px; }
  .brand { font-size: 1.25rem; }.brand img { width: 28px; height: 28px; }
  .header-actions { gap: 12px; }.github-count { font-size: .78rem; }.github-count svg { width: 20px; }
  .github-count { display: none; }
  .hero-copy h1 { max-width: 12ch; font-size: clamp(2.55rem, 11vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; }.hero-copy h1 br { display: none; }.hero-copy > p { max-width: 30ch; margin-inline: auto; font-size: 1.1rem; }.hero-buttons { display: block; margin-top: 32px; }.hero-buttons .pill { width: min(250px, calc(100% - 24px)); margin: 6px; }
  .trust-row { gap: 12px 26px; padding-bottom: 56px; font-size: .76rem; letter-spacing: .04em; }
  .privacy-showcase { padding: 32px 24px; border-radius: 28px; }
  .privacy-copy h2 { margin: 14px 0 20px; font-size: clamp(2.25rem, 10vw, 2.9rem); line-height: 1.07; }.privacy-copy h2 br { display: none; }.privacy-copy li { margin-block: 7px; font-size: .96rem; }
  .features { display: block; }.feature-tree-full { margin-bottom: 48px; }.feature h3 { font-size: 1.5rem; }.feature-strip { display: flex; gap: 14px; margin-inline: calc((100vw - 100%) / -2); padding: 0 14px 18px; overflow-x: auto; scroll-padding-inline: 14px; scroll-snap-type: x mandatory; scrollbar-width: none; }.feature-strip::-webkit-scrollbar { display: none; }.feature-strip .feature { flex: 0 0 min(82vw, 320px); scroll-snap-align: center; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: #fbfaf7; text-align: left; }.feature-strip .feature-copy { flex: none; margin: 0; }.feature-strip .feature h3 { margin-bottom: 8px; font-size: 1.3rem; }.feature-strip .feature p { margin-bottom: 0; font-size: .92rem; line-height: 1.5; }.feature-strip .feature-art { height: 210px; margin-top: 20px; border-radius: 18px; }.feature-strip .archive-file { right: 6%; bottom: 18px; width: 78%; padding: 14px; }.feature-strip .visual-export div { width: 34%; height: 118px; }.feature-strip .visual-names span { padding: 11px; font-size: .9rem; }
  .feature-tree-full .visual-tree { height: 620px; }
  .demo-node { min-width: 210px; }
  .demo-parent { left: calc(50% - 105px); }
  .demo-one { left: 5%; bottom: 250px; }
  .demo-two { left: auto; right: 5%; bottom: 250px; }
  .demo-three { right: calc(50% - 105px); bottom: 45px; }
  .visual-tree i:nth-child(1) { width: 50%; left: 25%; top: 42%; }
  .visual-tree i:nth-child(2) { width: 320px; left: 50%; top: 17%; }
  .visual-tree i:nth-child(3) { display: block; width: 210px; left: 50%; top: 42%; transform: rotate(90deg); }
  .tree-demo-viewport { height: clamp(500px, 70svh, 590px); }
  .tree-demo-toolbar { align-items: center; gap: 12px; }
  .tree-demo-toolbar > div:first-child { flex: 1; min-width: 0; max-width: none; padding-right: 8px; }
  .tree-demo-toolbar span { white-space: normal; }
  .tree-demo-actions { flex: none; }
  .capability-showcase { padding: 38px 24px; border-radius: 26px; }.capability-grid { grid-template-columns: 1fr; }.capability-item { min-height: 0; padding: 24px 0; border-top: 1px solid #ffffff29; border-right: 0 !important; }.capability-item:first-child { border-top: 0; padding-top: 4px; }.capability-item:nth-child(2) { border-top: 1px solid #ffffff29; padding-top: 24px; }
  .no-surveillance { gap: 28px; padding: 38px 26px; border-radius: 26px; }.no-surveillance-intro h2 { max-width: 13ch; font-size: clamp(2.25rem, 10vw, 3rem); }.no-surveillance-intro p { font-size: .96rem; }.privacy-promise { min-height: 100px; }.privacy-promise strong { font-size: 1.16rem; }.trust-evidence { display: grid; grid-template-columns: 1fr; gap: 13px; padding-top: 22px; }.trust-evidence strong { margin: 0 0 3px; }.trust-evidence a { min-height: 32px; }
  .open-pills { font-size: .82rem; }.open-source h2 { font-size: clamp(2.5rem, 11vw, 3.25rem); }.open-source h2 br { display: none; }
  .memory-window { width: min(100%, 520px); }.memory-window b { left: 14px; right: 14px; bottom: 14px; text-align: center; }
  .pricing-heading { margin-bottom: 28px; }.pricing-layout { grid-template-columns: 1fr; gap: 14px; }.price-plan { padding: 28px 24px; border-radius: 24px; }.plan-top { padding-bottom: 22px; }.plan-top strong { font-size: clamp(1.9rem, 10vw, 2.25rem); }.price-plan h3 { min-height: 0; margin-top: 24px; }.price-plan > p { min-height: 0; }
  .community-card { display: flex; flex-wrap: wrap; }.community-card .pill { width: 100%; }
  .availability { display: block; margin-block: 70px 100px; padding: 42px 22px; border-radius: 26px; text-align: center; }.availability h2 { font-size: clamp(2.55rem, 11vw, 3.7rem); }.availability > p { margin-top: 14px; }.store-buttons { display: grid; justify-content: center; margin-top: 28px; }.store-badge { width: 197px; max-width: 100%; }.platforms { flex-wrap: wrap; justify-content: center; margin-top: 22px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .site-nav { top: 76px; left: 14px; right: 14px; }
  .language-switch a { width: 38px; }
  .hero > .family-fan:first-child { margin-bottom: 34px; }
  .tree-demo-toolbar { padding-inline: 12px; }
  .tree-demo-toolbar > div:first-child { max-width: none; }
  .tree-demo-toolbar span { line-height: 1.3; }
  .tree-demo-toolbar { flex-wrap: wrap; align-items: flex-start; }
  .tree-demo-toolbar > div:first-child { width: 100%; padding-right: 0; }
  .tree-demo-actions { width: 100%; justify-content: space-between; }
  .tree-app-link { min-height: 44px; padding-inline: 13px; }
  .tree-demo-controls button { width: 44px; height: 44px; }
  .interactive-tree { margin-inline: -4px; border-radius: 20px; }
  .tree-demo-hint { font-size: .8rem; }
  .capability-item { grid-template-columns: 52px minmax(0, 1fr); gap: 15px; }.capability-item svg { width: 52px; height: 52px; padding: 12px; }
  .privacy-promise { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }.no-mark { width: 46px; height: 46px; border-radius: 13px; }.no-mark svg { width: 28px; height: 28px; }
  .site-footer { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }
}

@media (max-width: 640px) {
  .privacy-showcase { display: flex; flex-direction: column-reverse; height: auto; padding: 32px 24px 0; }
  .privacy-copy { width: min(100%, 600px); padding: 0; }
  .phone-photo { position: relative; inset: auto; align-self: auto; width: calc(100% + 48px); height: 236px; margin: 0 -24px -24px; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%); }
  .phone-photo img { width: 150%; height: auto; transform: translate(-17%, -9%); }
}

@media (max-width: 360px) {
  .header-actions { gap: 6px; }
  .language-switch a { width: 34px; }
  .phone-photo { width: calc(100% + 48px); max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .family-card, .tree-line-draw { animation: none; }
  .pill, .feature-link span, .trust-evidence a span, .web-tree-node .node-avatar, summary:after, .tree-demo-stage, .motion-ready .privacy-showcase .phone-photo { transition: none; }
}