: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 { 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: 34px; font-weight: 600; }
.site-nav a:hover { color: var(--green); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }
.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; min-height: 650px; overflow: hidden; padding: 55px 80px; border-radius: 35px; background: var(--green); color: white; }
.phone-wrap { position: relative; align-self: end; height: 590px; }
.phone { position: absolute; left: 10%; bottom: -65px; z-index: 2; width: 310px; height: 620px; overflow: hidden; padding: 15px; border: 7px solid #222; border-radius: 48px; background: #f7f4ee; color: var(--ink); box-shadow: 0 30px 55px #25331e55; transform: rotate(-5deg); }
.phone-top { display: flex; justify-content: space-between; padding: 6px 14px 16px; font-size: .68rem; font-weight: 750; }
.phone-top b { width: 68px; height: 18px; border-radius: 20px; background: #222; }
.phone-title { display: flex; flex-direction: column; padding: 0 12px 12px; }
.phone-title small { color: var(--muted); font-size: .62rem; }
.phone-title strong { font-size: 1.2rem; }
.phone-tree { position: relative; height: 440px; border-radius: 20px; background-color: #efeeea; background-image: radial-gradient(#d5d2cd 1px, transparent 1px); background-size: 16px 16px; }
.tree-person { position: absolute; z-index: 2; display: grid; grid-template-columns: 34px auto; column-gap: 6px; align-items: center; min-width: 95px; padding: 7px; border: 1px solid #ded7cd; border-radius: 9px; background: white; box-shadow: 0 5px 12px #3a332a12; font-size: .57rem; }
.tree-person .portrait { grid-row: 1 / span 2; width: 34px; height: 34px; font-size: .7rem; }
.tree-person b, .tree-person small { grid-column: 2; }
.tree-person small { color: var(--muted); }
.tree-a { top: 52px; left: 91px; }.tree-b { bottom: 65px; left: 5px; }.tree-c { bottom: 65px; left: 92px; }.tree-d { bottom: 65px; right: 5px; }
.tree-line { position: absolute; z-index: 1; height: 1px; background: #a99375; transform-origin: left; }
.tree-line-a { width: 185px; left: 50px; top: 214px; }.tree-line-b { width: 108px; left: 143px; top: 110px; transform: rotate(90deg); }.tree-line-c { width: 105px; left: 50px; top: 214px; transform: rotate(-90deg); }
.phone-nav { display: flex; justify-content: space-around; padding-top: 13px; color: var(--muted); font-size: .58rem; }
.privacy-copy { position: relative; z-index: 2; max-width: 520px; padding-left: 30px; }
.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: 20px 0 28px; font-size: clamp(3rem, 4.5vw, 4.8rem); line-height: 1.04; letter-spacing: -.035em; }
.privacy-copy ul { margin: 0 0 30px; padding: 0; list-style: none; font-size: 1.05rem; line-height: 1.55; }
.privacy-copy li { margin: 11px 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 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-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-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: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-color: #f5f4f1; background-image: radial-gradient(#d7d3cd 1px, transparent 1px); background-size: 20px 20px; }
.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 { stroke: #9d8a70; stroke-width: 1.7; stroke-linecap: 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; }

.more-features { position: relative; min-height: 310px; overflow: hidden; border-radius: 28px; background: var(--green); color: white; }
.more-figure { position: absolute; left: 0; bottom: 0; width: 35%; height: 100%; background: var(--yellow); border-radius: 0 60% 0 0; }
.more-figure b { position: absolute; left: 35px; bottom: 25px; color: var(--ink); }
.leaf-one, .leaf-two { position: absolute; display: block; border-radius: 100% 0 100% 0; background: var(--green); transform: rotate(35deg); }.leaf-one { width: 125px; height: 185px; left: 70px; top: 40px; }.leaf-two { width: 85px; height: 125px; left: 175px; top: 100px; transform: rotate(70deg); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; width: 62%; margin-left: 38%; padding: 62px 45px; }
.more-grid p { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: .95rem; font-weight: 700; line-height: 1.45; }.more-grid span { font-size: 1.5rem; }

.no-surveillance { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }
.no-card { position: relative; min-height: 400px; overflow: hidden; padding: 38px; border-radius: 35px; background: var(--green); color: white; }
.no-card h2 { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-size: clamp(2.1rem, 3.8vw, 3.7rem); line-height: 1.06; letter-spacing: -.025em; }
.no-card h2 span { padding: 3px 10px; border-radius: 999px; background: white; color: var(--green); }
.fingerprint { position: absolute; right: -20px; bottom: -40px; width: 330px; height: 330px; }
.fingerprint i { position: absolute; inset: calc(var(--n, 0) * 25px); border: 2px solid #ffffff32; border-radius: 50% 50% 42% 58%; }.fingerprint i:nth-child(1) { --n: 0; }.fingerprint i:nth-child(2) { --n: 1; }.fingerprint i:nth-child(3) { --n: 2; }.fingerprint i:nth-child(4) { --n: 3; }.fingerprint i:nth-child(5) { --n: 4; }
.no-surveillance > p { max-width: 520px; color: var(--muted); font-size: 1.35rem; line-height: 1.55; }

.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; }

.proof h2, .pricing-heading h2, .faq > h2, .community > h2 { font-size: clamp(2.45rem, 5vw, 3.1rem); letter-spacing: -.025em; line-height: 1.08; }
.proof { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(42px, 6vw, 78px); padding: clamp(42px, 5vw, 64px); border-radius: 32px; background: var(--green); color: white; }
.proof-intro { max-width: 420px; }.proof-intro > span { display: inline-flex; margin-bottom: 20px; padding: 6px 11px; border: 1px solid #ffffff52; border-radius: 999px; color: #f3f7f0; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.proof-intro h2 { margin-bottom: 18px; }.proof-intro p { max-width: 36ch; margin: 0; color: white; font-size: 1.04rem; line-height: 1.65; }
.proof-board { display: grid; gap: 10px; }
.proof-board a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; min-height: 94px; padding: 18px 20px; border-radius: 18px; background: white; color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }.proof-board a:hover, .proof-board a:focus-visible { transform: translateX(4px); box-shadow: 0 12px 24px #24301e26; }.proof-index { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cream); color: #6f5533; font-size: .78rem; font-weight: 850; }.proof-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.proof-copy strong { font-size: 1.08rem; line-height: 1.3; }.proof-copy small { color: var(--muted); font-size: .88rem; line-height: 1.4; }.proof-board b { color: var(--green); font-size: 1.25rem; }

.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 { display: block; width: 197px; border-radius: 10px; transition: transform .2s ease, opacity .2s ease; }.store-badge:hover { transform: translateY(-2px); opacity: .9; }.store-badge:active { transform: translateY(1px); }.store-badge:focus-visible { outline: 3px solid white; outline-offset: 4px; }.store-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-wrap { opacity: 0; transform: translateY(26px); }
.motion-ready .privacy-showcase.is-in-view .phone-wrap { 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 { display: flex; flex-direction: column-reverse; min-height: 980px; padding: 60px 40px 0; }
  .privacy-copy { width: min(100%, 600px); padding: 0; }
  .phone-wrap { width: 100%; height: 580px; }
  .phone { left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .features { gap: 65px 30px; }.feature-strip { gap: 30px; }
  .more-figure { display: none; }.more-grid { width: 100%; margin: 0; }
  .no-surveillance { display: block; }.no-surveillance > p { margin: 36px auto 0; }
  .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 { min-height: 920px; padding: 52px 24px 0; border-radius: 28px; }
  .privacy-copy h2 { font-size: clamp(2.35rem, 10vw, 3.1rem); line-height: 1.07; }.privacy-copy h2 br { display: none; }.privacy-copy li { font-size: .98rem; }
  .phone-wrap { height: 550px; }.phone { bottom: -75px; width: 290px; height: 590px; transform: translateX(-50%) rotate(-2deg); }
  .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 { min-width: 0; max-width: 190px; }
  .tree-demo-toolbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .more-features { min-height: auto; }.more-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding: 40px 28px; }
  .no-surveillance { display: block; }.no-card { min-height: 340px; }.no-surveillance > p { margin-top: 35px; font-size: 1.05rem; }
  .open-pills { font-size: .82rem; }.open-source h2 { font-size: clamp(2.5rem, 11vw, 3.25rem); }.open-source h2 br { display: none; }
  .proof { grid-template-columns: 1fr; gap: 30px; padding: 30px 22px; border-radius: 24px; }.proof-intro > span { margin-bottom: 16px; }.proof-intro h2 { margin-bottom: 14px; }.proof-intro p { font-size: .98rem; }.proof-board { gap: 8px; }.proof-board a { min-height: 82px; padding: 15px 16px; gap: 14px; }.proof-index { width: 38px; height: 38px; }.proof-copy strong { font-size: 1rem; }.proof-copy small { font-size: .82rem; }
  .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: 190px; }
  .tree-demo-toolbar span { line-height: 1.3; white-space: normal; }
  .tree-demo-controls button { width: 44px; height: 44px; }
  .interactive-tree { margin-inline: -4px; border-radius: 20px; }
  .tree-demo-hint { font-size: .8rem; }
  .more-grid { gap: 24px 18px; padding: 34px 22px; }
  .no-card { padding: 28px; }
  .proof-board { padding: 12px; }
  .proof-board a { padding: 24px; }
  .site-footer { grid-template-columns: 1fr; }.footer-brand { grid-column: auto; }
}

@media (max-width: 360px) {
  .header-actions { gap: 6px; }
  .language-switch a { width: 34px; }
  .privacy-showcase { min-height: 850px; }
  .phone-wrap { height: 485px; }
  .phone { transform: translateX(-50%) scale(.84); transform-origin: bottom center; }
  .more-grid { grid-template-columns: 1fr; }
}

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