/* ===========================================================
   LOCKED — UTILITY EDITORIAL SYSTEM (APPROVED)
   Do not casually redesign. Treat like hubs / guides / bond pages:
   structure and brand-stable tokens are frozen.

   Company pages = brief marketing. Legal = reading document.
   Not category-tiered — brand navy + gold thread only.
   Contact lives here (not bond-page chrome).

   Reference pattern: About IllinoisBONDS
   (src/hubs/about.md → .util-ed).
   Other utilities follow .util-ed / .util-ed--legal.
   Hub, guide, and bond-page systems are locked separately.
   =========================================================== */

.util-ed *,
.util-ed *::before,
.util-ed *::after{
  box-sizing:border-box;
}

.util-ed{
  --util-ink:#0f172a;
  --util-muted:#334155;
  --util-line:color-mix(in srgb,var(--util-ink) 18%,#c0caf0);
  --util-paper:#ffffff;
  --util-paper-soft:#f4f6fa;
  --util-paper-deep:#eef1f6;
  --util-accent:#b8922e;
  --util-accent-on-paper:#1a2a8a;
  --util-accent-soft:color-mix(in srgb,var(--util-accent-on-paper) 32%,transparent);
  --util-accent-wash:color-mix(in srgb,var(--util-accent-on-paper) 9%,transparent);
  --util-accent-soft-on-dark:color-mix(in srgb,var(--util-accent) 45%,transparent);
  --util-hover:#6b7fe0;
  --util-border:#c0caf0;
  --util-hero-gradient:linear-gradient(165deg,#0b1220 0%,#111827 45%,#1a2a8a 100%);
  --util-max:720px;
  --util-max-wide:960px;

  color:var(--util-ink);
  font-family:inherit;
  margin:0 calc(-50vw + 50%);
  width:100vw;
  padding:0;
  background:var(--util-paper);
}

.util-ed .util-inner{
  max-width:var(--util-max);
  margin:0 auto;
  padding:0 24px;
}

.util-ed .util-inner--wide{
  max-width:var(--util-max-wide);
}

.util-ed .util-hero{
  background-color:#0b1220;
  background-image:
    radial-gradient(ellipse 65% 70% at 90% 10%,color-mix(in srgb,var(--util-accent) 18%,transparent) 0%,transparent 55%),
    var(--util-hero-gradient);
  padding:clamp(52px,7vh,80px) 0 clamp(44px,6vh,64px);
  position:relative;
}

.util-ed .util-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:3px;
  background:linear-gradient(90deg,var(--util-accent) 0%,color-mix(in srgb,var(--util-accent) 30%,transparent) 45%,transparent 100%);
}

.util-ed .util-eyebrow{
  margin:0 0 16px;
  color:var(--util-accent-on-paper);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.4;
  text-transform:uppercase;
}

.util-ed .util-hero .util-eyebrow{
  color:var(--util-accent);
}

.util-ed .util-hero h1{
  max-width:16em;
  margin:0 0 16px!important;
  color:#fff!important;
  font-family:Georgia,"Times New Roman",Times,serif!important;
  font-size:clamp(1.75rem,2.8vw,2.4rem)!important;
  font-weight:500!important;
  line-height:1.18!important;
  letter-spacing:-.02em;
}

.util-ed .util-lede{
  max-width:46ch;
  margin:0 0 24px;
  color:rgba(255,248,235,.82);
  font-size:1.0625rem;
  line-height:1.65;
}

.util-ed .util-hero-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px 28px;
}

.util-ed .util-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:12px 26px;
  border:1px solid #fff;
  border-radius:2px;
  background:#fff;
  color:var(--util-ink)!important;
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none!important;
  transition:background .15s ease,border-color .15s ease;
}

.util-ed .util-btn:hover{
  background:color-mix(in srgb,var(--util-accent) 35%,#fff);
  border-color:var(--util-accent);
}

.util-ed .util-btn-ghost{
  color:rgba(255,248,235,.88)!important;
  font-size:.875rem;
  font-weight:500;
  text-decoration:none!important;
  border-bottom:1px solid var(--util-accent-soft-on-dark);
  padding-bottom:2px;
}

.util-ed .util-btn-ghost:hover{
  color:#fff!important;
  border-bottom-color:var(--util-accent);
}

.util-ed .util-anchors{
  border-bottom:1px solid var(--util-line);
  background:var(--util-paper);
}

.util-ed .util-anchors-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px;
  margin:0;
  padding:16px 0;
  list-style:none;
}

.util-ed .util-anchors a{
  color:var(--util-muted);
  font-size:.8125rem;
  font-weight:600;
  letter-spacing:.03em;
  text-decoration:none;
}

.util-ed .util-anchors a:hover{
  color:var(--util-accent-on-paper);
}

.util-ed .util-sec{
  padding:clamp(24px,3.5vh,36px) 0;
  background:var(--util-paper);
}

.util-ed .util-sec + .util-sec{
  border-top:1px solid var(--util-line);
}

.util-ed .util-sec-soft{
  background:var(--util-paper-soft);
  --util-line:color-mix(in srgb,var(--util-ink) 22%,var(--util-border));
}

.util-ed .util-sec .util-eyebrow{
  color:var(--util-accent-on-paper);
}

.util-ed .util-sec h2{
  max-width:18em;
  margin:0 0 12px!important;
  color:var(--util-ink)!important;
  font-family:Georgia,"Times New Roman",Times,serif!important;
  font-size:clamp(1.35rem,2vw,1.7rem)!important;
  font-weight:500!important;
  line-height:1.22!important;
  letter-spacing:-.015em;
}

.util-ed .util-desc{
  max-width:52ch;
  margin:0 0 16px;
  color:var(--util-muted);
  font-size:1rem;
  line-height:1.7;
}

.util-ed .util-prose{
  max-width:60ch;
  margin:0;
  color:var(--util-ink);
  font-size:1.015625rem;
  line-height:1.75;
}

.util-ed .util-prose + .util-prose,
.util-ed .util-prose--spaced{
  margin-top:1.25em;
}

.util-ed .util-prose a{
  color:var(--util-accent-on-paper);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--util-accent-soft);
}

.util-ed .util-prose a:hover{
  border-bottom-color:var(--util-hover);
}

.util-ed .util-updated{
  margin:0 0 28px;
  color:var(--util-muted);
  font-size:.875rem;
  font-style:italic;
}

.util-ed .util-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  max-width:52ch;
}

.util-ed .util-list li{
  padding:14px 0;
  border-top:1px solid var(--util-line);
  color:var(--util-ink);
  font-size:.96875rem;
  line-height:1.55;
}

.util-ed .util-list li:first-child{
  border-top:2px solid var(--util-accent-soft);
}

.util-ed .util-list li:last-child{
  border-bottom:1px solid var(--util-line);
}

.util-ed .util-list a{
  color:var(--util-accent-on-paper);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--util-accent-soft);
}

.util-ed .util-list a:hover{
  border-bottom-color:var(--util-hover);
}

.util-ed .util-topics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 40px;
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.util-ed .util-topics li{
  padding:14px 0;
  border-top:1px solid var(--util-line);
  color:var(--util-ink);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.4;
}

.util-ed .util-topics li:nth-child(-n+2){
  border-top:2px solid var(--util-accent-soft);
}

.util-ed .util-topics li:nth-last-child(-n+2){
  border-bottom:1px solid var(--util-line);
}

@media (max-width:720px){
  .util-ed .util-topics{
    grid-template-columns:1fr;
  }

  .util-ed .util-topics li:nth-child(-n+2){
    border-top:1px solid var(--util-line);
  }

  .util-ed .util-topics li:first-child{
    border-top:2px solid var(--util-accent-soft);
  }

  .util-ed .util-topics li:nth-last-child(-n+2){
    border-bottom:none;
  }

  .util-ed .util-topics li:last-child{
    border-bottom:1px solid var(--util-line);
  }
}

.util-ed .util-steps{
  margin:12px 0 0;
  padding:0;
  list-style:none;
  counter-reset:util-step;
}

.util-ed .util-steps li{
  display:grid;
  grid-template-columns:2.5rem minmax(0,1fr);
  gap:12px 16px;
  padding:20px 0;
  border-top:1px solid var(--util-line);
  counter-increment:util-step;
}

.util-ed .util-steps li:first-child{
  border-top:2px solid var(--util-accent-soft);
}

.util-ed .util-steps li:last-child{
  border-bottom:1px solid var(--util-line);
}

.util-ed .util-steps li::before{
  content:counter(util-step);
  color:var(--util-accent-on-paper);
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:1.25rem;
  font-weight:500;
  line-height:1.2;
}

.util-ed .util-step-title{
  margin:0 0 4px;
  font-size:1.015625rem;
  font-weight:600;
  line-height:1.35;
}

.util-ed .util-step-body{
  margin:0;
  color:var(--util-muted);
  font-size:.875rem;
  line-height:1.55;
}

.util-ed .util-callout{
  margin:28px 0 0;
  padding:20px 0 0;
  border-top:2px solid var(--util-accent-on-paper);
  max-width:52ch;
}

.util-ed .util-callout-label{
  margin:0 0 8px;
  color:var(--util-accent-on-paper);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.util-ed .util-callout p{
  margin:0;
  font-family:Georgia,"Times New Roman",Times,serif;
  font-size:1.125rem;
  font-weight:500;
  line-height:1.55;
}

.util-ed .util-resource{
  margin:0;
  padding:0;
  list-style:none;
}

.util-ed .util-resource li{
  border-top:1px solid var(--util-line);
}

.util-ed .util-resource li:first-child{
  border-top:2px solid var(--util-accent-soft);
}

.util-ed .util-resource li:last-child{
  border-bottom:1px solid var(--util-line);
}

.util-ed .util-resource a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:baseline;
  padding:16px 0;
  text-decoration:none;
  color:inherit;
}

.util-ed .util-resource-title{
  margin:0 0 4px;
  font-size:1rem;
  font-weight:600;
}

.util-ed .util-resource-summary{
  margin:0;
  max-width:48ch;
  color:var(--util-muted);
  font-size:.875rem;
  line-height:1.5;
}

.util-ed .util-resource-action{
  color:var(--util-accent-on-paper);
  font-size:.8125rem;
  font-weight:600;
  white-space:nowrap;
}

.util-ed .util-resource a:hover .util-resource-title{
  color:var(--util-accent-on-paper);
}

.util-ed .util-contact-block{
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.util-ed .util-contact-block li{
  padding:16px 0;
  border-top:1px solid var(--util-line);
}

.util-ed .util-contact-block li:first-child{
  border-top:2px solid var(--util-accent-soft);
}

.util-ed .util-contact-block li:last-child{
  border-bottom:1px solid var(--util-line);
}

.util-ed .util-contact-label{
  margin:0 0 4px;
  color:var(--util-accent-on-paper);
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.util-ed .util-contact-value{
  margin:0;
  font-size:1.0625rem;
  font-weight:600;
}

.util-ed .util-contact-value a{
  color:var(--util-ink);
  text-decoration:none;
  border-bottom:1px solid var(--util-accent-soft);
}

.util-ed .util-contact-value a:hover{
  color:var(--util-accent-on-paper);
}

.util-ed .util-close{
  padding:clamp(36px,5.5vh,56px) 0;
  border-top:3px solid var(--util-accent);
  background:
    radial-gradient(ellipse 50% 80% at 0% 100%,var(--util-accent-wash) 0%,transparent 55%),
    var(--util-paper-deep);
}

.util-ed .util-close .util-eyebrow{
  color:var(--util-accent-on-paper);
}

.util-ed .util-close h2{
  max-width:16em;
  margin:0 0 12px!important;
  color:var(--util-ink)!important;
  font-family:Georgia,"Times New Roman",Times,serif!important;
  font-size:clamp(1.35rem,2vw,1.7rem)!important;
  font-weight:500!important;
  line-height:1.22!important;
}

.util-ed .util-close .util-desc{
  margin-bottom:24px;
}

.util-ed .util-close .util-btn{
  background:var(--util-ink);
  border-color:var(--util-ink);
  color:#fff!important;
}

.util-ed .util-close .util-btn:hover{
  background:var(--util-accent-on-paper);
  border-color:var(--util-hover);
  color:#fff!important;
}

.util-ed .util-close-meta{
  margin:16px 0 0;
  color:var(--util-muted);
  font-size:.8125rem;
  line-height:1.55;
}

.util-ed .util-close-meta a{
  color:var(--util-ink);
  text-decoration:none;
  border-bottom:1px solid var(--util-accent);
}

/* Legal: quieter hero padding */
.util-ed--legal .util-hero{
  padding:clamp(44px,6vh,64px) 0 clamp(36px,5vh,52px);
}

.util-ed--legal .util-sec h2{
  margin-top:2em!important;
}

.util-ed--legal .util-sec h2:first-of-type{
  margin-top:0!important;
}

@media (max-width:720px){
  .util-ed .util-resource a{
    grid-template-columns:1fr;
    gap:6px;
  }

  .util-ed .util-hero{
    padding:44px 0 40px;
  }

  .util-ed .util-sec{
    padding:28px 0;
  }

  .util-ed .util-close{
    padding:32px 0;
  }
}