[hidden] { display: none !important; }

.abo-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.abo-header-inner {
  max-width: 70rem;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .4rem 1rem;
  padding: .7rem clamp(.85rem, 4vw, 2rem);
}

.abo-brand {
  text-decoration: none;
  font-size: 1.1rem;
}

.abo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: var(--deep);
  font-size: .85rem;
  font-weight: 700;
}

.abo-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.abo-main {
  max-width: 70rem;
  padding: clamp(1rem, 4vw, 3rem) clamp(.85rem, 4vw, 2rem) 3rem;
}

.abo-layout, .abo-flow {
  display: grid;
  align-items: start;
  gap: 1rem;
  min-width: 0;
}

.abo-layout { grid-template-areas: "flow" "intro"; }
.abo-intro { grid-area: intro; }
.abo-flow { grid-area: flow; }

.abo-intro {
  display: grid;
  justify-items: start;
  gap: .8rem;
  color: #fff8e7;
  background: var(--deep);
  border-radius: 1.35rem;
  padding: clamp(1.1rem, 4vw, 2rem);
}

.abo-intro h2 { max-width: 17ch; font-size: clamp(1.5rem, 4vw, 2.35rem); }
.abo-intro p, .abo-intro li { color: #e9f0e5; }
.abo-intro ol { margin: .25rem 0 0; padding-inline-start: 1.45rem; }
.abo-intro li { padding-inline-start: .3rem; }
.abo-intro li + li { margin-top: .65rem; }

.abo-panel {
  display: grid;
  gap: 1rem;
  min-width: 0;
  padding: clamp(1rem, 4vw, 1.7rem);
}

.abo-panel h1 { font-size: clamp(1.75rem, 5vw, 2.8rem); }
.abo-panel > .badge { justify-self: start; }
.abo-panel form { margin: 0; }
.abo-panel fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.abo-panel legend { margin-bottom: .5rem; padding: 0; font-size: .86rem; font-weight: 720; }

.abo-plans { display: grid; gap: .55rem; }
.abo-plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
  min-height: 3.75rem;
  padding: .6rem .75rem;
  border: 1px solid #b7c3b7;
  border-radius: .75rem;
  cursor: pointer;
}
.abo-plan:has(:checked) { border-color: var(--green); background: var(--sage); }
.abo-plan input { margin: 0; width: 1rem; height: 1rem; accent-color: var(--green); }
.abo-plan strong, .abo-plan small { display: block; }
.abo-plan small { font-size: .78rem; color: var(--muted); }

.abo-left { justify-self: start; }
.abo-primary { justify-self: stretch; }
.abo-panel a.btn, .abo-panel a.text-button { text-underline-offset: .2em; }
.abo-problem, .abo-state {
  padding: .75rem .85rem;
  border-radius: .75rem;
  background: var(--peach);
  color: #714125;
}
.abo-problem { border: 1px solid #dfbda5; }
.abo-state[data-active="true"] { background: var(--sage); color: var(--deep); }
.abo-summary { display: flex; flex-wrap: wrap; gap: .65rem 1.35rem; margin: 0; }
.abo-summary dt { color: var(--muted); font-size: .78rem; }
.abo-summary dd { margin: 0; font-weight: 700; }
.abo-review-form, .abo-panel .abo-agreement, .abo-doc-links { display: grid; gap: .65rem; }
.abo-panel .abo-agreement { margin-block: .35rem; }
.abo-address { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr); gap: .65rem; }
.abo-doc-links a { width: fit-content; text-underline-offset: .2em; }
.abo-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .55rem; }
.abo-check input { width: 1rem; height: 1rem; margin: .2rem 0 0; accent-color: var(--green); }
.abo-footer { max-width: 70rem; margin-inline: auto; padding: 0 clamp(.85rem, 4vw, 2rem) 1rem; }
.abo-leadership { display: grid; gap: .65rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#leadership-code { font-family: ui-monospace, monospace; }

@media (min-width: 42rem) {
  .abo-layout {
    grid-template-areas: "intro flow";
    grid-template-columns: minmax(14rem, 1fr) minmax(22rem, 1.75fr);
  }
  .abo-primary { justify-self: start; }
}

@media (min-width: 57rem) {
  .abo-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}