/* Unfold inner pages: contact, terms, privacy and 404. They share the nav, the capsule language and the ink footer. */

.page{padding-top:calc(env(safe-area-inset-top,0px) + 150px)}
.kicker{color:var(--mute-l);display:block;margin-bottom:22px}
.page-h{margin:0;font-size:clamp(54px,9.6vw,176px);line-height:.92;letter-spacing:-.035em;font-weight:720}
.page-h .thin{color:var(--thin-l)}
.page-h .ln{padding-bottom:.16em;margin-bottom:-.16em}

/* ---------- contact ---------- */
.c-top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:end;padding-bottom:clamp(56px,9vh,110px)}
.c-lead{margin:0 0 34px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--mute-l);max-width:36ch;letter-spacing:-.01em}
.channels{list-style:none;margin:0;padding:0;border-top:1px solid var(--bone2)}
.channels li{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--bone2)}
.channels span{color:var(--mute-l)}
.channels a,.channels b{font-weight:560;text-decoration:none;font-size:17px;letter-spacing:-.01em}
.channels a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease)}
.channels a:hover{background-size:100% 1.5px}

.c-form{background:var(--ink);color:var(--bone);border-radius:clamp(36px,4vw,56px);padding:clamp(28px,4.5vw,64px);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
.c-form h2{margin:0;font-size:clamp(36px,4.2vw,68px);line-height:.98;letter-spacing:-.035em;font-weight:720}
.c-form .side p{margin:18px 0 0;color:var(--mute-d);font-size:16px;line-height:1.5;max-width:28ch}
/* the address gets a line of its own, so it never hangs alone under the note */
.c-form .side p a{display:block;width:max-content;margin-top:6px}
form.msg{display:flex;flex-direction:column;gap:14px}
.topics{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0 0 6px;padding:0}
.topics legend{margin-bottom:12px;color:var(--mute-d)}
.topic{position:relative}
.topic input{position:absolute;opacity:0;pointer-events:none}
.topic span{display:inline-flex;padding:11px 18px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--ink3);color:var(--mute-d);font-size:15px;font-weight:560;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.topic input:checked + span{background:var(--bone);color:var(--ink);box-shadow:none}
.topic input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.field{position:relative;display:block}
.field input,.field textarea{width:100%;border:0;background:var(--ink2);border-radius:28px;padding:30px 24px 14px;font-size:17px;outline:none;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .3s,background .3s;resize:none}
.field input{height:66px;border-radius:99px;padding-inline:26px}
.field textarea{min-height:170px;line-height:1.5}
.field span{position:absolute;left:26px;top:22px;color:var(--mute-d);font-size:16px;pointer-events:none;transform-origin:0 0;transition:transform .4s var(--ease),color .3s}
.field input:focus,.field textarea:focus{box-shadow:inset 0 0 0 1.5px var(--mute-d);background:var(--ink3)}
.field input:focus + span,.field input:not(:placeholder-shown) + span,.field textarea:focus + span,.field textarea:not(:placeholder-shown) + span{transform:translateY(-12px) scale(.74)}
.field.bad input,.field.bad textarea{box-shadow:inset 0 0 0 1.5px #FF6B5E}
.field.bad span{color:#FF8A80}
.send{align-self:flex-start;margin-top:6px;position:relative;overflow:hidden;transition:width .6s var(--ease),background .4s}
.send .ok{display:none}
.send.sending{pointer-events:none;opacity:.7}
.send.done{background:var(--accent);color:#fff;pointer-events:none}
.send.done i{background:#fff;color:var(--accent)}
.sent-note{color:var(--mute-d);font-size:15px;min-height:1.4em;margin:0}

.faq{padding-block:clamp(80px,12vh,140px)}
.faq h2{margin:0 0 34px;font-size:clamp(36px,4.2vw,68px);letter-spacing:-.035em;font-weight:720;line-height:1}
.qa{border-radius:34px;box-shadow:inset 0 0 0 1.5px var(--bone2);margin-bottom:10px;transition:background .4s,box-shadow .4s}
.qa[open]{background:var(--ink);color:var(--bone);box-shadow:none}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 28px;font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.025em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{width:38px;height:38px;border-radius:99px;flex:none;display:grid;place-items:center;background:var(--bone2);transition:transform .5s var(--spring),background .4s}
.qa[open] summary i{transform:rotate(45deg);background:var(--ink3)}
.qa summary svg{width:14px;height:14px}
.qa .a{overflow:hidden}
.qa .a p{margin:0;padding:0 28px 26px;max-width:62ch;color:var(--mute-d);font-size:17px;line-height:1.55}
@media (max-width:900px){.c-top,.c-form{grid-template-columns:minmax(0,1fr)}}

/* ---------- legal ---------- */
.l-head{padding-bottom:clamp(40px,7vh,80px);display:flex;flex-direction:column;gap:28px}
.l-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--mute-l)}
.l-meta .pill-d{display:inline-flex;padding:9px 16px;border-radius:99px;box-shadow:inset 0 0 0 1.5px var(--bone2);font-size:14px;font-weight:560;color:var(--ink)}
.short{border-block:1px solid var(--bone2);padding-block:clamp(22px,3vw,32px);display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,110px);align-items:start}
.short .mono{color:var(--mute-l);padding-top:4px}
.short ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.short li{padding-left:clamp(16px,1.6vw,24px);border-left:1px solid var(--bone2);font-size:clamp(18px,1.5vw,21px);font-weight:600;letter-spacing:-.025em;line-height:1.3;max-width:24ch}
.l-body{display:grid;grid-template-columns:240px minmax(0,1fr);gap:clamp(32px,6vw,110px);padding-block:clamp(40px,7vh,80px) clamp(90px,14vh,160px);align-items:start}
.toc{position:sticky;top:110px;display:flex;flex-direction:column;gap:4px}
.toc .mono{color:var(--mute-l);margin-bottom:12px}
.toc #toc{border-left:1px solid var(--bone2)}
.toc a{position:relative;display:block;padding:9px 0 9px 18px;margin-left:-1px;border-left:1.5px solid transparent;color:var(--mute-l);text-decoration:none;font-size:15px;transition:color .3s,border-color .3s}
.toc a:hover,.toc a.on{color:var(--ink)}
.toc a.on{border-left-color:var(--ink)}
.prose{max-width:68ch;font-size:18px;line-height:1.65;color:color-mix(in srgb,var(--ink) 82%,var(--bone))}
.prose h2{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.04em;line-height:1.1;color:var(--ink);margin:64px 0 18px;scroll-margin-top:110px;display:flex;gap:16px;align-items:baseline}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;letter-spacing:-.025em;margin:34px 0 10px;color:var(--ink)}
.prose p{margin:0 0 18px}
.prose ul{margin:0 0 18px;padding:0;list-style:none}
.prose li{position:relative;padding-left:26px;margin-bottom:10px}
.prose li::before{content:"–";position:absolute;left:2px;top:0;color:var(--thin-l)}
.prose a{color:var(--ink);text-decoration-thickness:1.5px;text-underline-offset:3px}

@media (max-width:900px){.l-body{grid-template-columns:minmax(0,1fr)}.toc{position:static;display:none}.short{grid-template-columns:minmax(0,1fr);gap:18px}.short ul{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ---------- 404 ---------- */
.nf{min-height:100vh;min-height:100svh;background:var(--ink);color:var(--bone);display:flex;flex-direction:column;justify-content:center;gap:40px}
.nf-code{display:flex;align-items:center;gap:.08em;font-size:clamp(140px,26vw,420px);font-weight:720;letter-spacing:-.035em;line-height:.8;margin:0}
.nf-code i{display:inline-block;width:.62em;height:.36em;border-radius:99px;background:var(--bone);animation:nfb 3.2s var(--ease) infinite}
@keyframes nfb{0%,100%{width:.62em}45%{width:.22em}55%{width:.22em}}
.nf h1{margin:0;font-size:clamp(32px,4vw,64px);letter-spacing:-.035em;line-height:1;font-weight:720}
.nf h1 .thin{color:var(--mute-d)}