/* /privacy and /terms: the landing page's type and colors, one idea per section, a line diagram, details on request. */
.legal{padding:56px 24px 40px}
.legal .wrap{max-width:1040px}
.legal-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:56px}
.legal-head .updated{font-size:15px;color:#626977}
.idea{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;padding:44px 0;border-top:1px solid rgba(14,16,24,0.08)}
.idea:nth-of-type(even) .diagram{order:-1}
.idea h2{margin:0 0 12px;font-size:clamp(30px,3.6vw,44px);line-height:1.05;font-weight:800;letter-spacing:-0.035em;text-wrap:balance}
.idea p{margin:0;font-size:20px;line-height:1.5;color:#3D4250;text-wrap:pretty}
.idea .num{display:inline-block;font-size:15px;font-weight:700;color:#13756B;margin-bottom:10px}
.diagram{background:#FFFFFF;border-radius:28px;padding:20px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.diagram svg{width:100%;height:100%;overflow:visible}
.diagram text{font:600 15px/1 inherit;fill:#3D4250}
.diagram .lg-ink{stroke:#1B1D26;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.diagram .lg-soft{stroke:#C9CDD6;stroke-width:2.4;fill:none;stroke-dasharray:6 8;stroke-linecap:round}
.diagram .lg-teal{fill:#22A699}.diagram .lg-teal-s{stroke:#22A699;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.diagram .lg-card{fill:#FFFFFF;stroke:#1B1D26;stroke-width:2.4}
.diagram .lg-bar{fill:#8F96F0}.diagram .lg-scr{fill:#1B1D26;opacity:.85}
details.more{margin-top:18px;border-radius:18px;background:#FFFFFF;box-shadow:0 0 0 1px rgba(14,16,24,0.08)}
details.more>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;font-size:17px;display:flex;align-items:center;gap:10px;min-height:48px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid #626977;border-bottom:2px solid #626977;transform:rotate(45deg);transition:transform .2s ease}
details.more[open]>summary::after{transform:rotate(-135deg)}
details.more ul{margin:0;padding:0 22px 18px 38px;display:flex;flex-direction:column;gap:8px;font-size:17px;line-height:1.5;color:#3D4250}
.limits{margin:56px 0 0;padding:36px;border-radius:28px;background:#1B1D26;color:#FFFFFF}
.limits h2{margin:0 0 14px;font-size:32px;font-weight:800;letter-spacing:-0.03em}
.limits ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:18px;line-height:1.5;color:rgba(255,255,255,0.86)}
.services{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.service{padding:18px 20px;border-radius:20px;background:#FFFFFF}
.service b{display:block;font-size:18px;margin-bottom:4px}.service span{font-size:15px;color:#626977;line-height:1.45}
.terms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.term{padding:26px 24px 22px;border-radius:24px;background:#FFFFFF;display:flex;flex-direction:column;gap:10px}
.term h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-0.025em}
.term p{margin:0;font-size:18px;line-height:1.5;color:#3D4250}
.term details.more{margin-top:auto}
.contact{margin-top:48px;font-size:18px;color:#3D4250}.contact a{color:#13756B;font-weight:700}

/* motion: a lock rides the wire, a key turns, text scrambles, a wall rises, a document fades out */
@keyframes ride{0%{transform:translateX(0)}100%{transform:translateX(134px)}}
@keyframes turn{0%,30%{transform:rotate(0)}55%,100%{transform:rotate(90deg)}}
@keyframes scramble{0%,40%{opacity:1}55%,100%{opacity:0}}
@keyframes appear{0%,45%{opacity:0}60%,100%{opacity:1}}
@keyframes mask{0%,35%{opacity:1}50%,100%{opacity:0}}
@keyframes leave{0%,30%{opacity:1;transform:translateY(0)}70%,100%{opacity:0;transform:translateY(-18px)}}
.anim-ride{animation:ride 3.2s cubic-bezier(.5,0,.5,1) infinite}
.anim-turn{transform-box:fill-box;transform-origin:center;animation:turn 4s ease-in-out infinite}
.anim-scramble{animation:scramble 4s ease-in-out infinite}
.anim-appear{animation:appear 4s ease-in-out infinite}
.anim-mask{animation:mask 4s ease-in-out infinite}
.anim-leave{animation:leave 4.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.anim-ride,.anim-turn,.anim-scramble,.anim-appear,.anim-mask,.anim-leave{animation:none}.anim-scramble,.anim-mask{opacity:0}.anim-ride{transform:translateX(67px)}}
@media (max-width:820px){.idea{grid-template-columns:1fr;gap:22px}.idea:nth-of-type(even) .diagram{order:0}.limits{padding:26px 22px}}