/* =============================================================
   Legal pages — /privacy, /terms, /refund-policy, /cookies,
   /acceptable-use. Loaded on top of styles.css, which supplies the
   design tokens, the footer and the button styles.
   ============================================================= */

.legal-page{background:var(--white)}

/* ---------------- slim top bar ---------------- */
.legal__bar{
  border-bottom:1px solid var(--hairline);
  background:var(--white);
  position:sticky;
  top:0;
  z-index:10;
}
/* the legal pages carry the same header as everything else now */
.legal__bar{height:92px;position:sticky;top:0}
.legal__bar .nav{top:25px}
@media (max-width:1024px){
  .legal__bar{height:72px}
  .legal__bar .nav{top:15px}
}
.legal__back{
  font-size:15px;
  font-weight:600;
  color:var(--orange);
  white-space:nowrap;
  transition:opacity .3s var(--ease);
}
.legal__back:hover{opacity:.7}

/* ---------------- page head ---------------- */
.legal{padding-bottom:96px}

.legal__eyebrow{
  margin-top:64px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--orange);
}
.legal__h1{
  margin-top:10px;
  font-size:52px;
  font-weight:700;
  line-height:1.14;
  max-width:16ch;
}
.legal__date{
  margin-top:14px;
  font-size:17px;
  font-weight:500;
  color:var(--grey);
}

/* ---------------- unfilled-content notice ---------------- */
.legal__notice{
  margin-top:32px;
  max-width:74ch;
  padding:18px 22px;
  border:1px solid #e8c65a;
  border-left:4px solid #e0a800;
  border-radius:10px;
  background:#fffbe9;
  font-size:16px;
  line-height:1.5;
}
.legal__notice code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9em;
  background:rgba(32,32,32,.07);
  padding:1px 5px;
  border-radius:4px;
}

/* ---------------- body copy ---------------- */
.legal__body{
  margin-top:44px;
  max-width:74ch;          /* a comfortable reading measure */
}
.legal__body p{
  margin-top:14px;
  font-size:17.5px;
  font-weight:500;
  line-height:1.62;
  color:#2b2b2b;
}
.legal__h2{
  margin-top:44px;
  font-size:25px;
  font-weight:700;
  line-height:1.3;
  color:var(--black);
  scroll-margin-top:90px;
}
.legal__h2:first-child{margin-top:0}
.legal__num{color:var(--orange)}

.legal__list{margin-top:14px}
.legal__list li{
  position:relative;
  padding-left:26px;
  margin-top:11px;
  font-size:17.5px;
  font-weight:500;
  line-height:1.62;
  color:#2b2b2b;
}
.legal__list li::before{
  content:"";
  position:absolute;
  left:2px;top:.62em;
  width:8px;height:8px;
  border-radius:2px;
  background:var(--orange);
}

.legal__body a{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.legal__body a:hover{text-decoration-thickness:2px}

/* the .ph placeholder markers now live in styles.css — shared with the blog */

/* ---------------- cross-links to the other policies ---------------- */
.legal__more{
  margin-top:72px;
  padding-top:28px;
  border-top:1px solid var(--hairline);
  max-width:74ch;
}
.legal__more-title{
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
}
.legal__more ul{
  margin-top:16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
}
.legal__more a{
  display:inline-block;
  padding:9px 18px;
  border:1px solid var(--hairline);
  border-radius:65px;
  background:var(--card);
  font-size:15px;
  font-weight:600;
  transition:border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.legal__more a:hover{
  color:var(--orange);
  border-color:rgba(201,94,12,.55);
  transform:translateY(-2px);
}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  .legal__h1{font-size:42px}
  .legal__eyebrow{margin-top:44px}
  .legal{padding-bottom:64px}
  .legal__body{margin-top:32px}
  .legal__h2{margin-top:36px;font-size:23px}
  .legal__more{margin-top:52px}
}

@media (max-width:720px){
  .legal__bar-inner{padding-top:16px;padding-bottom:16px}
  .legal__h1{font-size:32px;max-width:none}
  .legal__date{font-size:16px}
  .legal__body p,.legal__list li{font-size:16.5px;line-height:1.6}
  .legal__h2{font-size:20px;margin-top:30px}
  .legal__notice{font-size:15px;padding:15px 17px}
  .ph__label{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  .legal__more a:hover{transform:none}
}

/* see the "Touch target sizes" note in styles.css */
@media (max-width:1024px){
  .legal__more a{min-height:44px;display:inline-flex;align-items:center}
}

/* The policies quote URLs, email addresses and defined terms verbatim. None
   of them overflow today, but a single long unbroken string in a future edit
   would push the whole column sideways on a 320px screen. */
.legal__body,.legal__body p,.legal__list li{overflow-wrap:break-word}