/* ============================================================================
   About / Contact / Privacy / Terms — "Clear Coast"
   Legal pages are long ordered documents (terms has 24 clauses), so they get a
   sticky clause index and a measured single reading column rather than a hero.
   ========================================================================== */

.util-hero{position:relative;overflow:clip;padding-bottom:clamp(30px,4vh,50px)}
.util-hero .tag{margin-top:26px}
.util-h1{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(30px,4.2vw,56px);line-height:1.03;letter-spacing:-.018em;
  max-width:22ch;text-wrap:balance;
}
.util-hero--law .util-h1{font-size:clamp(28px,3.6vw,46px)}
.util-upd{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line-soft);
  color:var(--ink-mute);display:inline-block;
}

.util-body{border-top:1px solid var(--line-soft)}
.util-grid{display:grid;grid-template-columns:1fr}
.util-grid--law{grid-template-columns:.3fr 1fr;gap:56px;align-items:start}
.util-main{max-width:76ch}

/* ------------------------------------------------------------ clause index */
.util-toc{position:sticky;top:calc(var(--bar) + 30px)}
.util-toc-h{
  display:block;color:var(--ink-mute);padding-bottom:11px;margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.util-toc ol{max-height:min(62vh,620px);overflow-y:auto}
.util-toc li{border-bottom:1px solid var(--line-hair)}
.util-toc a{
  display:grid;grid-template-columns:26px 1fr;gap:9px;padding:8px 0;
  font-size:12.6px;line-height:1.45;color:var(--ink-soft);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.util-toc a .tnum{
  font-family:'Spline Sans Mono',monospace;font-size:9px;letter-spacing:.1em;
  color:var(--ink-mute);padding-top:2px;
}
@media(hover:hover){
  .util-toc a:hover{color:var(--green);padding-left:6px}
  .util-toc a:hover .tnum{color:var(--green)}
}

/* ------------------------------------------------------------- the clauses */
.util-sec{padding-bottom:34px;scroll-margin-top:calc(var(--bar) + 26px)}
.util-sec + .util-sec{border-top:1px solid var(--line-soft);padding-top:32px}
.util-h2{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  font-size:clamp(21px,2.2vw,30px);line-height:1.14;letter-spacing:-.012em;
  margin-bottom:14px;display:flex;gap:14px;align-items:baseline;
}
.util-n{
  font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--green);flex-shrink:0;
}
.util-h3{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  text-transform:uppercase;font-size:12.5px;letter-spacing:-.005em;
  margin:24px 0 9px;
}
.util-p{font-size:15.2px;line-height:1.78;color:var(--ink-soft);text-wrap:pretty}
.util-p + .util-p{margin-top:1em}
.util-ul{margin:14px 0 4px;border-top:1px solid var(--line-soft)}
.util-ul li{
  padding:9px 0 9px 17px;border-bottom:1px solid var(--line-soft);position:relative;
  font-size:14.6px;line-height:1.62;color:var(--ink-soft);
}
.util-ul li::before{
  content:"";position:absolute;left:0;top:1.02em;width:6px;height:1px;
  background:var(--green-br);
}

.util-cta{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:14px;padding-top:26px;border-top:2px solid var(--ink);
}
.util-cta .mono{color:var(--ink-mute)}

@media(max-width:980px){
  .util-grid--law{grid-template-columns:1fr;gap:30px}
  .util-toc{position:static}
  .util-toc ol{max-height:none;columns:2;column-gap:26px}
  .util-toc li{break-inside:avoid}
}
@media(max-width:560px){
  .util-toc ol{columns:1}
  .util-h2{gap:10px}
}