/* ==========================================================================
   Collsta website — Legal pages (/terms/, /privacy/, /cookies/)

   Subpages of the same site, not a separate documentation theme: the header,
   the footer, the tokens and the typography are the homepage's own. Only the
   reading layout is new, and it exists for one reason — legal text is read,
   not scanned, so measure and rhythm matter more than anything visual.

   No animation, no scene, no extra JS. The pages load the four stylesheets
   they actually use (tokens, base, nav, footer) plus this one.
   ========================================================================== */

.is-legal{background:var(--surface-page)}

/* ==========================================================================
   Page head — deliberately quiet
   ========================================================================== */
.lg{
  position:relative;
  /* Clears the fixed header, then a calm band before the title. */
  padding-top:calc(var(--nav-h) + clamp(34px,5vw,72px));
  padding-bottom:clamp(56px,7vw,104px);
  overflow:hidden;
  isolation:isolate;
}
@supports (overflow:clip){
  .is-legal .lg{overflow:clip}
}

/* A single very soft wash, kept well inside the block so no edge of it can
   land on a section boundary. Nothing else decorates these pages. */
.lg::before{
  content:"";
  position:absolute;
  left:50%;top:-12%;
  width:min(84vw,1000px);
  aspect-ratio:1.8;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(184,171,242,.26) 0%,
    rgba(255,154,163,.10) 48%,
    rgba(184,171,242,0) 72%);
  z-index:0;
  pointer-events:none;
}

.lg__head{position:relative;z-index:1}
.lg__title{
  margin-top:clamp(10px,1.4vw,16px);
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:clamp(32px,4vw,50px);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--navy);
}
.lg__dates{
  margin-top:clamp(12px,1.4vw,16px);
  font-size:var(--fs-small);
  color:var(--text-meta);
  line-height:1.6;
}
/* The generator emits .lg-dates; keep both names working so a rename in the
   build script cannot silently drop the styling. */
.lg-dates{
  margin-top:clamp(12px,1.4vw,16px);
  font-size:var(--fs-small);
  color:var(--text-meta);
  line-height:1.6;
}

/* ==========================================================================
   Reading layout
   ========================================================================== */
.lg__body{
  position:relative;z-index:1;
  margin-top:clamp(30px,4vw,56px);
  display:grid;
  /* Contents rail, then the document. The rail is narrow on purpose — it is a
     way back to a section, not a second navigation. */
  grid-template-columns:minmax(0,232px) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
}

/* The measure. Set in px, not ch: `ch` is the width of a digit (~0.62em in
   Inter) while average prose runs ~0.5em, so 78ch renders as ~98 characters a
   line — noticeably long. 780px sits at the lower end of the 760–900px the
   brief asks for and brings the line down to ~92, which is as short as that
   range allows. */
.lg-doc{
  max-width:780px;
  font-size:17px;
  line-height:1.72;
  color:var(--text-body);
}

/* ---- Contents ---- */
.lg-toc{
  position:sticky;
  top:calc(var(--nav-h) + 20px);
  padding:clamp(14px,1.4vw,20px);
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  max-height:calc(100svh - var(--nav-h) - 48px);
  overflow-y:auto;
}
.lg-toc__title{
  font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-meta);
  margin-bottom:10px;
}
ol.lg-toc__list{
  list-style:none;margin:0;padding:0;
  counter-reset:none;
  display:flex;flex-direction:column;
}
.lg-toc__link{
  display:block;
  padding:6px 8px;
  margin-inline:-8px;
  border-radius:8px;
  font-size:12.5px;
  line-height:1.4;
  color:var(--text-meta);
  transition:color var(--dur-mid) var(--ease-out),
             background var(--dur-mid) var(--ease-out);
}
.lg-toc__link:hover{color:var(--navy);background:var(--bg-soft)}

/* ---- Document body ---- */
.lg-h2{
  margin-top:clamp(34px,4vw,56px);
  margin-bottom:14px;
  font-family:var(--font-display);
  font-weight:var(--fw-extrabold);
  font-size:clamp(19px,1.9vw,24px);
  line-height:1.3;
  letter-spacing:var(--ls-tight);
  color:var(--navy);
  /* Anchored headings must not land under the fixed header when jumped to. */
  scroll-margin-top:calc(var(--nav-h) + 24px);
}
.lg-doc > .lg-h2:first-child{margin-top:0}
.lg-h2__n{color:var(--purple)}

.lg-h3{
  margin-top:clamp(24px,2.6vw,34px);
  margin-bottom:10px;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(15.5px,1.4vw,17.5px);
  line-height:1.35;
  color:var(--navy);
}
.lg-h3__n{color:var(--purple)}

.lg-p{margin:0 0 clamp(13px,1.4vw,18px)}
.lg-p:last-child{margin-bottom:0}

ul.lg-list{
  list-style:none;
  margin:0 0 clamp(13px,1.4vw,18px);
  padding:0;
}
.lg-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:7px;
}
.lg-list li::before{
  content:"";
  position:absolute;
  left:4px;top:.72em;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--lavender);
}
.lg-list li:last-child{margin-bottom:0}

/* ---- Links inside the legal text ---- */
.lg-link{
  color:var(--purple);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--lavender);
  border-radius:3px;
  transition:color var(--dur-mid) var(--ease-out),
             text-decoration-color var(--dur-mid) var(--ease-out);
}
.lg-link:hover{
  color:var(--purple-bright);
  text-decoration-color:currentColor;
}

/* ---- Footer: mark the page you are on ---- */
.is-legal .ft__link[aria-current="page"]{
  color:var(--navy);
  font-weight:var(--fw-semibold);
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (max-width:960px){
  .lg__body{grid-template-columns:minmax(0,1fr);gap:24px}
  /* A sticky rail in a single column would follow the reader down the page
     covering the text; above the document, as a plain list, it does the same
     job without the fight. */
  .lg-toc{position:static;max-height:none}
  ol.lg-toc__list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 12px;
  }
  .lg-doc{max-width:none}
}

@media (max-width:640px){
  ol.lg-toc__list{grid-template-columns:minmax(0,1fr)}
  .lg-doc{font-size:16.5px;line-height:1.7}
  .lg-toc__link{padding:9px 8px}
}