/* Feral Watt content pages (about, faq, learn). Loaded after styles.css. */

.page-head { padding: 28px 0 8px; max-width: 68ch }
.page-head.split { max-width: none }
.page-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 8vw, 60px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page-head .lede { margin-top: 0; max-width: 56ch; font-size: 18px }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
@media (min-width: 800px) {
  .split { grid-template-columns: 1.25fr .75fr; gap: 40px }
}
.split .cat { width: min(240px, 60vw) }
@media (min-width: 800px) { .split .cat { width: min(320px, 100%) } }
.page-head.split { padding-bottom: 28px }

.copy { max-width: 66ch }
.copy p, .copy li { font-size: 17px }
.copy p { margin: 0 0 14px; text-wrap: pretty }
.copy ul, .copy ol { margin: 0 0 14px; padding-left: 22px }
.copy li { margin: 0 0 8px }
.copy li::marker { color: var(--accent) }
.copy strong { font-weight: 500; color: var(--text) }
.copy em { font-style: normal; color: var(--accent) }
.copy a { border-bottom: 1px solid var(--rule) }
.copy h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  margin: 26px 0 8px;
}
.muted { color: var(--muted) }

.pull, .copy .pull {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 34px);
  line-height: 1.08;
  margin: 6px 0 18px;
  max-width: 26ch;
}
.pull em { font-style: normal; color: var(--accent) }

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 8px 0 6px;
}
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr } }
@media (min-width: 900px) { .cards.three { grid-template-columns: repeat(3, 1fr) } }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px 18px 16px;
}
.card h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 6px;
}
.card p { margin: 0; color: var(--muted); font-size: 15.5px }
.card .step-num { margin-bottom: 8px }
a.card { display: block; color: var(--text); transition: border-color .15s }
a.card:hover { border-color: var(--muted); filter: none }
a.card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.card .more {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 4px 0 16px;
}
.tags li {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
  margin: 0;
}

/* Definition-style rows (bill anatomy, rate comparison) */
.defs { margin: 6px 0 10px; border-top: 1px solid var(--rule) }
.def {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 720px) { .def { grid-template-columns: 210px 1fr } }
.def dt {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 3px;
}
.def dd { margin: 0; font-size: 16.5px }
.def dd p { margin: 0 0 8px }
.def dd p:last-child { margin-bottom: 0 }

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  margin: 6px 0 12px;
}
.compare th, .compare td {
  text-align: left;
  vertical-align: top;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--rule);
}
.compare thead th {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
}
.compare tbody th {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .compare thead { display: none }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100% }
  .compare tr { padding: 12px 0; border-bottom: 1px solid var(--rule) }
  .compare th, .compare td { border: 0; padding: 4px 0 }
  .compare td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.note {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  max-width: 66ch;
  font-size: 15.5px;
}
.note p { margin: 0 0 8px }
.note p:last-child { margin: 0 }
.note .label { color: var(--accent); margin-bottom: 6px }

.timeline { list-style: none; padding: 0; margin: 8px 0 12px; border-left: 2px solid var(--rule) }
.timeline li { position: relative; padding: 0 0 18px 22px; margin: 0 }
.timeline li::before {
  content: "";
  position: absolute;
  left: -7px; top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--accent);
}
.timeline .when {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}
.timeline p { margin: 0; font-size: 16.5px }

/* FAQ */
.faq-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.faq-toc a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 12px;
}
.faq-toc a:hover { border-color: var(--muted); filter: none }
.faq-group { scroll-margin-top: 16px }
.faq-list { display: grid; gap: 10px; max-width: 760px }
.faq-list details {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.faq-list details[open] { border-color: #4A4238 }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 48px 16px 18px;
  position: relative;
  font-family: var(--body);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.35;
  color: var(--text);
  border-radius: 10px;
}
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
}
.faq-list details[open] > summary::after { content: "\2212" }
.faq-list summary:hover { color: var(--accent) }
.faq-list summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }
.faq-answer { padding: 0 18px 16px; color: var(--text); font-size: 16.5px; max-width: 66ch }
.faq-answer p { margin: 0 0 10px; text-wrap: pretty }
.faq-answer p:last-child { margin-bottom: 0 }
.faq-answer ul, .faq-answer ol { margin: 0 0 10px; padding-left: 20px }
.faq-answer li { margin: 0 0 6px }
.faq-answer li::marker { color: var(--accent) }
.faq-answer a { border-bottom: 1px solid var(--rule) }
/* Collapsed "Where we can't switch you" list inside an FAQ answer */
.faq-answer details.faq-more { margin: 12px 0 0; background: var(--ground); border-radius: 8px }
.faq-answer details.faq-more > summary { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 44px 12px 14px; color: var(--accent) }
.faq-answer details.faq-more > summary::after { right: 14px; font-size: 18px }
.faq-answer details.faq-more > p, .faq-answer details.faq-more > ul { padding-left: 14px; padding-right: 14px; font-size: 15px }
.faq-answer details.faq-more > ul { padding-left: 32px; padding-bottom: 12px; margin-bottom: 0 }

/* Closing call to action */
.cta-band {
  margin: 8px 0 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 720px) {
  .cta-band { grid-template-columns: auto 1fr auto; padding: 26px 28px; gap: 24px }
}
.cta-band img { width: 84px; height: auto; display: block }
.cta-band h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 5vw, 32px);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 4px;
}
.cta-band p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 48ch }
.cta-band .btn { white-space: nowrap }

.crumbs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 0;
}
.crumbs a { color: var(--muted); border-bottom: 1px solid var(--rule) }
.crumbs a:hover { color: var(--text) }

.next-reads { margin-top: 8px }

/* How it works page: numbered journey */
ol.journey { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: 760px }
.journey-step { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 12px; padding: 18px 18px 16px }
.journey-step h3 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; margin: 0 0 8px; line-height: 1.1 }
.journey-step p { margin: 0 0 10px; color: var(--muted); font-size: 16px }
.journey-step p:last-of-type { margin-bottom: 0 }
.journey-step p.step-num { color: var(--accent); margin: 0 0 8px; font-size: 12px }

/* Tip pages (learn-tip-*.html): skimmable on a phone. Short paragraphs, roomy spacing, hero graphic up top. */
article.tip .page-head { padding-bottom: 4px }
article.tip .page-head .lede { font-size: 19px; line-height: 1.5; color: var(--text) }
.tip-hero { margin: 18px 0 30px; max-width: 520px }
.tip-hero img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule) }
.copy.tip-copy { max-width: 62ch }
.copy.tip-copy p, .copy.tip-copy li { font-size: 18px; line-height: 1.65 }
.copy.tip-copy p { margin: 0 0 20px }
.copy.tip-copy h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 6vw, 28px);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--accent);
  margin: 40px 0 12px;
}
.copy.tip-copy ol, .copy.tip-copy ul { margin: 0 0 22px; padding-left: 26px }
.copy.tip-copy li { margin: 0 0 12px; padding-left: 4px }
.copy.tip-copy .tip-sig { margin-top: 8px; line-height: 1.5 }
@media (max-width: 560px) {
  .tip-hero { margin: 14px -4px 26px }
  .copy.tip-copy p, .copy.tip-copy li { font-size: 17.5px }
}