/* Support, Privacy and Terms pages (/support /privacy /terms). Same kit as the landing page:
   tokens.css, base.css, button.css, wordmark.css, footer.css, then this file. No JavaScript:
   the questions use native <details>, styled like the landing FAQ (firefly + cream bubble). */
.lg-body{--db-container:52rem;min-height:100vh;display:flex;flex-direction:column}   /* one reading column for header, page and footer */
.lg-skip{position:absolute;left:-999px;top:0}
.lg-skip:focus{left:var(--db-s4);top:var(--db-s4);z-index:9;background:var(--db-gold);color:var(--db-on-gold);padding:var(--db-s2) var(--db-s4);border-radius:var(--db-r-pill)}

/* header */
.lg-nav{position:sticky;top:0;z-index:5;background:rgba(12,16,46,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--db-border)}
.lg-nav__bar{display:flex;align-items:center;gap:var(--db-s5);min-height:68px}
.lg-nav__bar nav{margin-left:auto}
.lg-nav__links{display:flex;gap:var(--db-s5);list-style:none;margin:0;padding:0}
.lg-nav__links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;font-weight:600;font-size:var(--db-fs-small);color:var(--db-muted)}
.lg-nav__links a:hover{color:var(--db-ink)}
.lg-nav__links a[aria-current="page"]{color:var(--db-gold)}

/* hero */
.lg-hero{position:relative;padding:clamp(2.5rem,7vh,4.5rem) 0 var(--db-s7)}
.lg-hero__inner{display:grid;grid-template-columns:1fr auto;gap:var(--db-s6);align-items:center}
.lg-hero h1{font-size:var(--db-fs-h2);font-weight:800;line-height:var(--db-lh-tight);letter-spacing:-.015em}
.lg-hero h1 b{color:var(--db-gold);font-weight:800}
.lg-hero__lead{margin-top:var(--db-s4);font-size:var(--db-fs-lead);color:var(--db-muted);max-width:44ch}
.lg-hero__date{margin-top:var(--db-s4);font-size:var(--db-fs-small);color:var(--db-muted)}
.lg-hero__bug{width:clamp(96px,12vw,150px);height:auto;filter:drop-shadow(0 0 28px rgba(255,206,92,.42));animation:lg-float 5s ease-in-out infinite}
@keyframes lg-float{50%{transform:translateY(-8px)}}

/* the short version: three promise tiles */
.lg-promises{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--db-s4);margin-top:var(--db-s6)}
.lg-promise{background:var(--db-card);border:var(--db-border);border-radius:var(--db-r-lg);padding:var(--db-s5);
  border-top:4px solid var(--lg-c,var(--db-gold))}
.lg-promise b{display:block;font-size:1.12rem;font-weight:800;color:var(--db-ink)}
.lg-promise span{display:block;margin-top:var(--db-s1);font-size:var(--db-fs-small);color:var(--db-muted)}
.lg-promise:nth-child(1){--lg-c:var(--db-age-5-6)}
.lg-promise:nth-child(2){--lg-c:var(--db-age-6-7)}
.lg-promise:nth-child(3){--lg-c:var(--db-age-2-4)}

/* long-form text */
.lg-main{flex:1;padding-bottom:var(--db-s8)}
.lg-doc{max-width:none}
.lg-doc section{padding:var(--db-s6) 0;border-top:var(--db-border)}
.lg-doc h2{font-size:var(--db-fs-h3);font-weight:800;color:var(--db-ink)}
.lg-doc p,.lg-doc li{color:#dcdcf0;line-height:1.65}
.lg-doc p{margin-top:var(--db-s3)}
.lg-doc ul{margin:var(--db-s3) 0 0;padding-left:1.2em}
.lg-doc li{margin-top:var(--db-s2)}
.lg-doc li::marker{color:var(--db-gold)}
.lg-doc a{color:var(--db-gold);text-underline-offset:3px}
.lg-doc strong{color:var(--db-ink)}

/* support: two ways to reach us */
.lg-reach{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--db-s4);margin-top:var(--db-s6)}
.lg-reach a{display:flex;flex-direction:column;gap:var(--db-s1);text-decoration:none;background:var(--db-card);border:var(--db-border);
  border-radius:var(--db-r-lg);padding:var(--db-s5);transition:border-color .2s,transform .2s}
.lg-reach a:hover{border-color:rgba(255,206,92,.6);transform:translateY(-2px)}
.lg-reach b{font-size:1.15rem;font-weight:800;color:var(--db-ink)}
.lg-reach span{font-size:var(--db-fs-small);color:var(--db-muted)}
.lg-reach em{font-style:normal;color:var(--db-gold);font-weight:700}

/* support: questions as native details, the landing FAQ look */
.lg-faq{margin-top:var(--db-s4)}
.lg-faq details{border-bottom:var(--db-border)}
.lg-faq details:first-child{border-top:var(--db-border)}
.lg-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--db-s4);min-height:44px;
  padding:var(--db-s5) 0;font-weight:700;font-size:var(--db-fs-lead);color:var(--db-ink);cursor:pointer}
.lg-faq summary::-webkit-details-marker{display:none}
.lg-faq summary::after{content:"+";flex:none;width:28px;text-align:center;font-size:1.8rem;line-height:1;color:var(--db-gold);transition:transform .2s}
.lg-faq details[open] summary::after{transform:rotate(45deg)}
.lg-faq__a{display:flex;gap:var(--db-s3);align-items:flex-start;padding:0 0 var(--db-s5)}
.lg-faq__a img{width:38px;height:38px;flex:none;border-radius:50%;background:var(--db-card-2);padding:4px}
.lg-faq__a div{position:relative;background:var(--db-cream);color:var(--db-ink-light);border-radius:var(--db-r-lg);padding:var(--db-s4) var(--db-s5);
  font-size:var(--db-fs-small);line-height:1.6}
.lg-faq__a div::before{content:"";position:absolute;left:-6px;top:16px;width:14px;height:14px;background:var(--db-cream);border-radius:3px;transform:rotate(45deg)}
.lg-faq__a p+p{margin-top:var(--db-s2)}
.lg-faq__a a{color:var(--db-gold-ink);font-weight:700}

.lg-footer{margin-top:auto;padding:var(--db-s6) 0}

@media (max-width:760px){
  .lg-nav__bar{gap:var(--db-s3)}
  .lg-nav .db-wordmark{--wm-size:1.12rem}
  .lg-nav__links{gap:var(--db-s3)}
  .lg-nav__links a{font-size:.875rem}
  .lg-nav__home{display:none}
  .lg-hero__inner{grid-template-columns:1fr}
  .lg-hero__bug{display:none}
  .lg-promises,.lg-reach{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.lg-hero__bug{animation:none}.lg-reach a{transition:none}}