/* Shared chrome for the Resonink site pages (about / contact / privacy / terms).
   Same tokens as the app + landing: near-black ground, one violet accent,
   Fraunces for the voice. */
:root{
  --ground:#101013; --surface:#17171b; --accent:#8f7ae8; --accent-ink:#181334;
  --text:#ececee; --text-2:#9A9DA6; --hair:rgba(255,255,255,0.09);
  --serif:'Fraunces',Georgia,serif; --sans:system-ui,'Segoe UI',sans-serif;
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
/* the scrollbar wears the brand: a slim violet pill on a dark track */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0d0d10}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px;border:2.5px solid #0d0d10}
::-webkit-scrollbar-thumb:hover{background:#a89bf2}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#8f7ae8 #0d0d10}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
body{background:var(--ground);color:var(--text);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-0.02em;line-height:1.1;text-wrap:balance}
.mark{font-family:var(--mono);font-size:14px;letter-spacing:0.28em;text-decoration:none}
.mark b{font-weight:500}.mark span{color:var(--text-2);font-weight:400}
/* one header, every viewport and every page: the mark + the burger; all
   navigation lives in the full-screen serif menu (same as the landing) */
header{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;background:rgba(16,16,19,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:0.5px solid var(--hair)}
.burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;
  color:var(--text);cursor:pointer;border-radius:12px;margin:-4px -10px -4px 0}
.burger .l{display:block;width:19px;height:1.5px;background:currentColor;margin:3px 0}
.menu{position:fixed;inset:0;z-index:50;background:rgba(13,13,16,.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;padding:0 34px;
  opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.16,1,.3,1), visibility 0s .3s}
.menu.open{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.16,1,.3,1)}
.menu .m-in{width:100%;max-width:720px;margin:0 auto;display:flex;flex-direction:column}
.menu a{font-family:var(--serif);font-weight:400;font-size:clamp(30px,9vw,40px);letter-spacing:-0.02em;
  color:var(--text);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--hair);
  display:flex;justify-content:space-between;align-items:center;
  opacity:0;transform:translateY(14px);transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1)}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-of-type(2){transition-delay:.05s}
.menu.open a:nth-of-type(3){transition-delay:.1s}
.menu.open a:nth-of-type(4){transition-delay:.15s}
.menu.open a:nth-of-type(5){transition-delay:.2s}
.menu.open a:nth-of-type(6){transition-delay:.25s}
.menu.open a:nth-of-type(7){transition-delay:.3s}
.menu.open a:nth-of-type(8){transition-delay:.35s}
.menu a .n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--text-2)}
.menu .cta{border-bottom:0;margin-top:30px;background:var(--accent);color:var(--accent-ink);
  border-radius:999px;font-family:var(--sans);font-size:16px;font-weight:500;padding:15px 0;justify-content:center}
.menu .mclose{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;background:transparent;
  color:var(--text);font-size:20px;cursor:pointer;border-radius:12px;display:grid;place-items:center}
.menu .mmark{position:absolute;top:24px;left:20px}
/* mobile nav: top-align below the logo so the links get breathing room from it,
   with room for the added link and a slightly smaller size */
@media (max-width:640px){
  .menu{justify-content:flex-start;padding:92px 30px 32px;overflow-y:auto}
  .menu a{font-size:clamp(23px,6.2vw,30px);padding:11px 0}
  .menu .cta{margin-top:22px}
}
@media (prefers-reduced-motion:reduce){
  .menu,.menu a{transition:opacity .2s;transform:none}
}
main{max-width:720px;margin:0 auto;padding:88px 28px 120px}
h1{font-size:clamp(2.1rem,5vw,3.2rem);margin-bottom:10px}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2)}
.lead{color:var(--text-2);font-size:1.08rem;margin:16px 0 40px}
h2{font-family:var(--serif);font-weight:400;font-size:1.45rem;letter-spacing:-0.01em;margin:44px 0 12px}
p{margin:0 0 16px;max-width:65ch}
p.muted,li.muted{color:var(--text-2)}
ul{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px;max-width:60ch}
li::marker{color:var(--accent)}
.updated{font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.08em;margin-top:56px}
/* the landing page's footer, everywhere */
footer{border-top:0.5px solid var(--hair);padding:52px 32px 42px}
.foot-inner{max-width:1060px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:26px}
.foot-inner nav{display:grid;gap:9px;font-size:14px}
.foot-inner nav a{color:var(--text-2);text-decoration:none}
.foot-inner nav a:hover{color:var(--text)}
.foot-blurb{color:var(--text-2);font-size:13px;max-width:34ch;margin-top:14px}
.foot-cols{display:flex;align-items:flex-start;gap:70px;flex-wrap:wrap}
.foot-h{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);margin-bottom:4px}
.foot-bottom{max-width:1060px;margin:40px auto 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.06em}
/* FAQ accordions — serif questions, quiet plus/minus, hairline rhythm */
details{border-bottom:0.5px solid var(--hair)}
summary{font-family:var(--serif);font-weight:400;font-size:1.16rem;letter-spacing:-0.01em;
  padding:17px 34px 17px 0;cursor:pointer;list-style:none;position:relative;text-wrap:balance}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:15px;color:var(--text-2)}
details[open] summary::after{content:"−";color:var(--accent)}
details>div{padding:0 0 18px}
details>div p{color:var(--text-2)}
details>div strong,details>div em{color:var(--text);font-style:normal}
details>div a{color:var(--text)}

/* contact form */
form{display:grid;gap:18px;max-width:520px}
label{display:grid;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
input,textarea,select{background:var(--surface);border:1px solid var(--hair);border-radius:12px;color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 14px;width:100%}
input:hover,textarea:hover{border-color:rgba(255,255,255,.2)}
textarea{min-height:140px;resize:vertical}
button{justify-self:start;font-weight:500;font-size:15px;padding:13px 28px;border-radius:999px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
button:hover{filter:brightness(1.07)}
.formnote{font-size:.9rem;color:var(--text-2)}