/* ============================================================
   Tabletop Theatre — Terms of Service page
   Scoped under .tos-* so nothing here collides with the site's
   existing rules. Reuses root variables, .finale-wrap, .eyebrow,
   .contact-head, and .site-footer from style.css — no variables
   are redefined here.
   ============================================================ */

/* Page background sits on black (--ink) behind the finale card,
   since main content on this page IS the finale section. */
body.tos-page{
  background:var(--ink);
}

.tos-main{ background:var(--ink); }

/* .finale-wrap already gives the rounded top + var(--stage) fill;
   here it also needs to reach full page height instead of just
   trailing the homepage sections. */
.tos-wrap{
  min-height:calc(100vh - var(--header-h));
  padding-top:0.5rem;
}

.tos-scene{
  padding-top:clamp(2.5rem, 6vw, 5rem);
  padding-bottom:clamp(3rem, 7vw, 5.5rem);
  color:var(--text-on-dark);
}

.tos-layout{ width:min(60rem, 90%); margin-inline:auto; }

.tos-head h1{
  font-family:var(--font-display);
  font-size:var(--h2);
  margin-bottom:0.6rem;
}
.tos-updated{
  font-size:var(--p-sm);
  color:var(--text-muted-dark);
}
.tos-updated span{ font-style:italic; opacity:0.8; }

/* Card shell — same border/background language as .tt-quiz-card
   and .contact-card, adapted for long-form reading */
.tos-card{
  margin-top:clamp(2rem, 5vw, 3rem);
  background:hsla(0,0%,97%,0.05);
 
  padding:clamp(1.6rem, 4vw, 2.75rem);

  border:3px solid var(--parchment-deep);
  box-shadow:inset 0 0 0 2px var(--stage), inset 0 0 0 3px hsla(0,0%,97%,0.5);
}

.tos-card p{
  margin-bottom:1rem;
  color:var(--text-on-dark);
  opacity:0.92;
}
.tos-card p:last-child{ margin-bottom:0; }

.tos-intro{
  font-family:var(--font-script);
  font-size:clamp(1.5rem, 3vw, 1.9rem);
  color:var(--accent-second);
  opacity:1;
  margin-bottom:1rem;
}

.tos-note{ font-style:italic; opacity:0.75; }

.tos-section{
  margin-top:clamp(1.8rem, 4vw, 2.4rem);
  padding-top:clamp(1.8rem, 4vw, 2.4rem);
  border-top:1px dashed hsla(0,0%,100%,0.2);
}
.tos-card > .tos-section:first-of-type{ margin-top:1.6rem; }

.tos-section h2{
  display:flex; align-items:center; gap:0.7rem;
  font-family:var(--font-body); font-weight:600;
  font-size:var(--h3);
  margin-bottom:0.9rem;
  color:var(--text-on-dark);
}
.tos-num{
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; width:1.9rem; height:1.9rem; border-radius:50%;
  border:1.5px solid var(--coral);
  color:var(--coral);
  font-family:var(--font-display);
  font-size:0.9rem;
}

/* Facts list — Section 1's business details */
.tos-facts{ display:flex; flex-direction:column; gap:0.8rem; }
.tos-fact{
  display:flex; flex-wrap:wrap; gap:0.3rem 0.8rem;
  padding-bottom:0.8rem;
  border-bottom:1px dashed hsla(0,0%,100%,0.12);
}
.tos-fact:last-child{ border-bottom:none; padding-bottom:0; }
.tos-fact dt{
  flex-shrink:0; width:12rem; max-width:100%;
  font-size:var(--label-sm); letter-spacing:0.05em; text-transform:uppercase;
  opacity:0.6;
}
.tos-fact dd{ flex:1; min-width:12rem; opacity:0.92; }
.tos-fact dd a{ color:var(--accent-second); text-decoration:underline; text-underline-offset:2px; }

/* Pending-coverage checklist — Section 3 */
.tos-pending{
  list-style:none;
  display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 1.2rem;
}
.tos-pending li{
  display:flex; align-items:center; gap:0.6rem;
  font-size:var(--p-sm); opacity:0.85;
}
.tos-pending li::before{
  content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%;
  border:1.5px solid var(--coral); background:transparent;
}
@media (max-width:560px){
  .tos-pending{ grid-template-columns:1fr; }
}

.tos-back{
  display:inline-flex; align-items:center; gap:0.5rem;
  margin-top:clamp(2rem, 5vw, 2.75rem);
  color:var(--coral); font-weight:600; 
}
.tos-back:hover{ text-decoration:underline; text-underline-offset:3px; }