@import "styles.css";

/* ---------- Coming Soon page ---------- */
body.cs-page{margin:0;padding:0;background:var(--neutral-6);overflow:hidden}
body.cs-page a{color:var(--color-primary);text-decoration:none}
body.cs-page a:hover{text-decoration:underline}
@keyframes cs-drift-a{0%{transform:translate3d(-6%,-4%,0) scale(1)}50%{transform:translate3d(6%,5%,0) scale(1.14)}100%{transform:translate3d(-6%,-4%,0) scale(1)}}
@keyframes cs-drift-b{0%{transform:translate3d(5%,6%,0) scale(1.08)}50%{transform:translate3d(-7%,-5%,0) scale(0.94)}100%{transform:translate3d(5%,6%,0) scale(1.08)}}
@keyframes cs-drift-c{0%{transform:translate3d(0,3%,0) scale(0.96)}50%{transform:translate3d(4%,-6%,0) scale(1.12)}100%{transform:translate3d(0,3%,0) scale(0.96)}}
@keyframes cs-grid{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-56px,0)}}
@keyframes cs-ring{0%{transform:scale(0.55);opacity:0}12%{opacity:0.5}100%{transform:scale(1.9);opacity:0}}
@keyframes cs-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cs-letter{from{opacity:0;transform:translateY(22px) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes cs-sweep{0%{transform:translateX(-110%)}55%{transform:translateX(240%)}100%{transform:translateX(240%)}}
@keyframes cs-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.35;transform:scale(0.7)}}
@keyframes cs-bar{0%{transform:scaleX(0.08)}100%{transform:scaleX(0.42)}}
@media (max-width:600px){.cs-rings{width:300px !important;height:300px !important;margin-left:-150px !important;top:-16px !important}}
@media (max-height:520px){.cs-rings{display:none}}
@media (prefers-reduced-motion:reduce){body.cs-page *{animation-duration:0.001ms !important;animation-iteration-count:1 !important}}

/* ---------- Legal doc pages (Privacy Policy / Terms & Conditions) ---------- */
body.doc-page{margin:0;padding:0;background:var(--color-surface-container-low);scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){
  body.doc-page{scroll-behavior:smooth}
}
body.doc-page a{color:var(--color-primary);text-decoration:none}
body.doc-page a:hover{color:var(--primary-30);text-decoration:underline}
.doc h2{font-family:'Roboto Flex',system-ui,sans-serif;font-size:26px;line-height:1.25;font-weight:700;letter-spacing:-0.01em;color:var(--color-on-surface);margin:0 0 14px;scroll-margin-top:88px}
.doc h3{font-family:'Roboto Flex',system-ui,sans-serif;font-size:17px;line-height:1.4;font-weight:600;color:var(--color-on-surface);margin:26px 0 8px}
.doc p{font-family:'Roboto Flex',system-ui,sans-serif;font-size:16px;line-height:1.75;color:var(--color-on-surface-variant);margin:0 0 14px;text-wrap:pretty}
.doc ul{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.doc li{position:relative;padding-left:22px;font-family:'Roboto Flex',system-ui,sans-serif;font-size:16px;line-height:1.6;color:var(--color-on-surface-variant)}
.doc li::before{content:"";position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:999px;background:var(--color-outline)}
.doc section{padding:34px 0;border-top:1px solid var(--color-outline-variant)}
.doc section:first-of-type{border-top:none;padding-top:8px}
.toc a{display:block;padding:6px 10px;border-radius:8px;font-size:13.5px;line-height:1.4;color:var(--color-on-surface-variant);text-decoration:none}
.toc a:hover{background:var(--color-surface-container-high);color:var(--color-on-surface);text-decoration:none}
.toc a.active{background:var(--color-primary-container);color:var(--color-on-primary-container)}
@media (max-width:900px){.shell{grid-template-columns:1fr !important}.toc-wrap{display:none !important}}
@media (max-width:640px){
  .page{padding:32px 16px 64px !important}
  .bar{padding:12px 16px !important;flex-wrap:wrap;gap:10px}
  .bar nav{gap:6px}
  .bar nav a,.bar nav span{padding:6px 12px !important;font-size:13px !important}
  .doc{padding:4px 20px 28px !important;border-radius:12px !important}
  .doc h2{font-size:21px !important}
  .doc h3{font-size:16px !important}
  .doc p,.doc li{font-size:15px !important}
  .doc section{padding:26px 0 !important}
  .foot{padding:22px 16px !important}
}
@media (max-width:400px){.doc{padding:4px 14px 24px !important}}