/* Legal pages (terms / privacy / refund) in the v5 landing's look.
   Fonts + tokens come from v5.css, which each page links first. */
.ot .lg{min-height:100vh;display:flex;flex-direction:column;background:var(--paper)}
.ot .lg-head{background:var(--night);color:var(--paper);padding:22px clamp(16px,3vw,22px) clamp(48px,7vw,80px)}
.ot .lg-nav{view-transition-name:lg-nav;max-width:1240px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ot .lg-tabs{display:flex;gap:8px;flex-wrap:wrap}
.ot .lg-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(244,239,227,.35);color:var(--paper);font:500 .8125rem/1 var(--mono)}
.ot .lg-tabs a[aria-current="page"]{background:var(--paper);border-color:var(--paper);color:var(--night)}
.ot .lg-title{max-width:880px;margin:clamp(40px,7vw,72px) auto 0}
.ot .lg-title h1{margin:0;font:800 clamp(3rem,9vw,6.5rem)/.88 var(--display);letter-spacing:-.05em;color:var(--paper);text-transform:lowercase}
.ot .lg-eff{margin:18px 0 0;font:500 .8125rem/1 var(--mono);color:var(--pink)}
.ot .lg-body{flex:1;padding:0 clamp(16px,3vw,22px) clamp(56px,8vw,96px)}
.ot .lg-card{max-width:880px;margin:clamp(-32px,-4vw,-24px) auto 0;background:var(--card);border-radius:24px;padding:clamp(12px,3vw,20px) clamp(20px,4vw,44px) clamp(28px,4vw,40px);
  box-shadow:0 1px 0 rgba(42,31,36,.06),0 30px 60px -36px rgba(42,31,36,.45)}
.ot .lg-card section{padding:22px 0;border-top:1.5px solid rgba(42,31,36,.1)}
.ot .lg-card section:first-child{border-top:0}
.ot .lg-card h2{margin:0 0 10px;font:800 clamp(1.25rem,2.4vw,1.5rem)/1.05 var(--display);letter-spacing:-.03em;color:var(--ink);text-transform:lowercase}
.ot .lg-card p,.ot .lg-card li{margin:0 0 10px;font:400 1rem/1.6 var(--display);color:var(--muted2);text-wrap:pretty}
.ot .lg-card ul{margin:0 0 10px;padding-left:1.2em}
.ot .lg-card p:last-child{margin-bottom:0}
.ot .lg-card a{color:var(--berry);text-decoration:underline;text-underline-offset:3px}
.ot .lg-card strong{color:var(--ink)}
.ot .lg-foot{background:var(--night);color:var(--paper);overflow:hidden}
.ot .lg-foot .foot-links{padding-top:40px}
.ot .lg-foot .wordmark{font-size:clamp(5rem,18vw,16rem)}

/* Q&A page (faq.html) */
.ot .faq-toc{display:flex;flex-wrap:nowrap;gap:8px;margin:clamp(8px,2vw,14px) 0 6px;padding:2px 0 4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.ot .faq-toc::-webkit-scrollbar{display:none}
.ot .faq-toc a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;border:1.5px solid rgba(42,31,36,.25);color:var(--ink);font:500 .75rem/1 var(--mono);white-space:nowrap;text-decoration:none}
.ot .faq-toc a:hover{background:var(--paper);border-color:var(--ink);opacity:1}
.ot .faq-group{scroll-margin-top:24px}
.ot .faq-group + .faq-group{margin-top:12px}
.ot .lg-card .faq-group h2{margin:18px 0 6px;font-size:clamp(1.5rem,3vw,2rem);color:var(--berry)}
.ot .faq-item{border-top:1.5px solid rgba(42,31,36,.1);interpolate-size:allow-keywords}
.ot .faq-item:first-of-type{border-top:0}
.ot .faq-item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;border-radius:8px}
.ot .faq-item summary::-webkit-details-marker{display:none}
.ot .faq-item summary:focus-visible{outline:2px solid var(--rose);outline-offset:4px}
.ot .faq-item summary h3{margin:0;font:700 clamp(1.0625rem,2vw,1.1875rem)/1.25 var(--display);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.ot .faq-icon{flex:none;position:relative;width:32px;height:32px;border-radius:999px;border:1.5px solid var(--ink);transition:background .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ot .faq-icon::before,.ot .faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--ink);border-radius:2px;transform:translate(-50%,-50%);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s}
.ot .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.ot .faq-item[open] .faq-icon{background:var(--pink);transform:rotate(180deg)}
.ot .faq-item[open] .faq-icon::after{transform:translate(-50%,-50%) rotate(0deg)}
/* smooth open/close where supported (Chrome/Edge 131+); elsewhere it simply opens */
.ot .faq-item::details-content{height:0;overflow:clip;transition:height .45s cubic-bezier(.2,.8,.2,1),content-visibility .45s allow-discrete}
.ot .faq-item[open]::details-content{height:auto}
.ot .faq-a{padding:0 48px 20px 0}
.ot .faq-a p{margin:0}
.ot .faq-cta{max-width:880px;margin:28px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
@media (max-width:639.98px){.ot .faq-a{padding-right:0}}
@media (prefers-reduced-motion:reduce){.ot .faq-item::details-content{transition:none}.ot .faq-icon,.ot .faq-icon::before,.ot .faq-icon::after{transition:none}}

/* Page to page: the logo + tabs bar is the same on every info page, so it is
   swapped in place with no animation at all — not faded, and never moved (an
   animated group slid in from above when the old page was scrolled down). */
::view-transition-group(lg-nav){animation:none}
::view-transition-old(lg-nav){display:none}
::view-transition-new(lg-nav){animation:none}