/* Ecosystem section, 509(a)(2) explainer, AYCE Token card, footer attribution, chat options and capacity note. */
.ecosystem { padding-block: 48px; }
.ecosystem-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; counter-reset: eco; }
.ecosystem-list li { counter-increment: eco; padding: 20px; border: 1px solid var(--line, #dfe2dc); background: #fff; }
.ecosystem-list li::before { content: counter(eco, decimal-leading-zero); display: block; margin-bottom: 8px; color: #755921; font-size: 12px; letter-spacing: .12em; }
.ecosystem-list h3 { margin: 0 0 8px; font-size: 20px; letter-spacing: -.3px; }
.ecosystem-list p { margin: 0; color: var(--muted, #5f645f); font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.ecosystem-list a { color: #214d3f; text-decoration: underline; text-underline-offset: 3px; }
.ecosystem-closing { max-width: 78ch; margin: 24px 0 0; color: var(--muted, #5f645f); font-size: 15px; line-height: 1.7; }
.charity-explainer { margin: 20px 0 0; padding: 18px 20px; border: 1px solid var(--line, #dfe2dc); background: #fff; }
.charity-explainer h3 { margin: 0 0 8px; font-size: 18px; }
.charity-explainer ul { margin: 0 0 12px; padding-left: 20px; }
.charity-explainer li { margin: 0 0 8px; font-size: 14.5px; line-height: 1.6; }
.charity-explainer p { margin: 0; font-size: 14px; color: var(--muted, #5f645f); }
.footer-attribution { flex: 1 1 100%; margin: 12px 0 0; color: var(--muted, #5f645f); font-size: 12px; line-height: 1.5; }
/* AYCE Token card (edits E22, E23). Top-level card sections flow inside an auto-row grid without sharing cells,
   so the notes are never drawn on top of each other (only .ayce-slot input uses position: absolute). */
.ayce-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 28px; margin: 24px 0 0; padding: 24px; border: 1px solid var(--line, #dfe2dc); background: #fff; max-width: none; text-align: left; }
.ayce-card > * { min-width: 0; }
.ayce-card .price-card-heading { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px; text-align: left; }
.ayce-card h3 { margin: 0; font-size: 22px; }
.ayce-card .plan-description { margin: 8px 0 0; color: var(--muted, #5f645f); }
.ayce-card .plan-price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; }
.ayce-card .plan-price span:first-child { font-size: 36px; font-weight: 700; letter-spacing: -1px; }
.ayce-points { margin: 0; padding-left: 20px; }
.ayce-card li { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.ayce-notes { display: flex; flex-direction: column; gap: 6px; }
.ayce-note, .ayce-signin-hint, .ayce-status { margin: 0; color: var(--muted, #5f645f); font-size: 13px; overflow-wrap: anywhere; }
.ayce-status { min-height: 1.4em; }
.ayce-status[data-error="true"] { color: #9e2634; }
.ayce-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ayce-action .ayce-status { flex: 1 1 220px; }
.ayce-card [hidden] { display: none !important; }
.ayce-booking { display: block; padding-top: 14px; border-top: 1px solid var(--line, #dfe2dc); }
.ayce-booking h4 { margin: 0 0 6px; font-size: 18px; }
.ayce-rules { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.ayce-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 24px; }
.ayce-picker > * { min-width: 0; }
.ayce-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 24px; }
.ayce-zones, .ayce-length { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ayce-label { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--ink, #151916); }
.ayce-chip, .ayce-nav, .ayce-day { font: inherit; color: var(--ink, #151916); background: #fff; border: 1px solid #cbd1c6; cursor: pointer; }
.ayce-chip { min-height: 44px; padding: 8px 14px; border-radius: 24px; font-size: 14px; font-weight: 600; }
.ayce-chip small { font-size: 12px; font-weight: 400; color: var(--muted, #5f645f); }
.ayce-chip[aria-pressed="true"] { background: var(--dark, #17201c); color: #fff; border-color: var(--dark, #17201c); }
.ayce-chip[aria-pressed="true"] small { color: #d6dcd1; }
.ayce-length select { min-height: 44px; padding: 8px 12px; border: 1px solid #cbd1c6; border-radius: 10px; background: #fff; font-size: 14px; }
.ayce-calendar { border: 1px solid var(--line, #dfe2dc); border-radius: 12px; padding: 6px; background: #fbfcfa; overflow-x: auto; }
.ayce-month-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ayce-month { margin: 0; font-size: 15px; font-weight: 700; text-align: center; flex: 1 1 auto; }
.ayce-nav { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; }
.ayce-nav:disabled { opacity: .35; cursor: default; }
.ayce-grid { width: 100%; min-width: 308px; border-collapse: collapse; table-layout: fixed; }
.ayce-grid th { padding: 4px 0; font-size: 12px; font-weight: 600; color: var(--muted, #5f645f); text-align: center; }
.ayce-grid td { padding: 0; text-align: center; }
.ayce-day { width: 100%; min-width: 44px; min-height: 44px; padding: 0; border-radius: 10px; font-size: 14px; }
.ayce-day.is-today { border-color: var(--dark, #17201c); }
.ayce-day.is-off { color: #858a83; background: #f1f2ee; border-color: #e3e6df; cursor: not-allowed; }
.ayce-day.is-selected { background: var(--dark, #17201c); color: #fff; border-color: var(--dark, #17201c); }
.ayce-slots { margin: 0; padding: 0; border: 0; min-width: 0; }
.ayce-slots legend { padding: 0 0 6px; font-size: 14px; font-weight: 700; }
.ayce-slot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; }
.ayce-slot { position: relative; display: block; }
.ayce-slot input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ayce-slot span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 4px 8px; border: 1px solid #cbd1c6; border-radius: 10px; background: #fff; font-size: 14px; white-space: nowrap; }
.ayce-slot input:checked + span { background: var(--dark, #17201c); color: #fff; border-color: var(--dark, #17201c); }
.ayce-slot input:disabled { cursor: not-allowed; }
.ayce-slot input:disabled + span { color: #858a83; background: #f1f2ee; border-color: #e3e6df; }
.ayce-slot input:focus-visible + span, .ayce-day:focus-visible, .ayce-chip:focus-visible, .ayce-nav:focus-visible, .ayce-length select:focus-visible { outline: 3px solid #477828; outline-offset: 2px; }
.ayce-summary { display: flex; flex-direction: column; gap: 10px; }
.ayce-summary dl { display: grid; gap: 6px; margin: 0; }
.ayce-summary dl > div { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ayce-summary dt { flex: 0 0 64px; font-size: 13px; font-weight: 700; color: var(--muted, #5f645f); }
.ayce-summary dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.ayce-summary .button { align-self: flex-start; }
.ayce-summary .button:disabled { opacity: .5; cursor: not-allowed; }
.ayce-open { margin: 0; font-size: 13px; color: var(--muted, #5f645f); }
@media (min-width: 700px) {
  .ayce-picker { grid-template-columns: minmax(250px, 1fr) minmax(0, 1fr); }
  .ayce-controls { grid-column: 1 / -1; }
  .ayce-summary { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  .ayce-card { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); align-items: start; }
  .ayce-intro { grid-column: 1; }
  .ayce-points { grid-column: 2; align-self: center; }
  .ayce-notes, .ayce-booking, .ayce-action { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .ayce-picker { grid-template-columns: minmax(250px, 1.1fr) minmax(230px, 1fr) minmax(230px, .9fr); }
  .ayce-summary { grid-column: auto; }
}
@media (max-width: 420px) {
  .ayce-card { padding: 16px; }
  .ayce-grid td { padding: 1px; }
  .ayce-slot-list { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
.wth-chat__options { display: grid; gap: 14px; margin: 0 0 16px; }
.wth-chat__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.wth-chat__field legend { padding: 0; margin: 0 0 6px; color: var(--wth-chat-ink); font-size: .86rem; font-weight: 600; }
.wth-chat__choices { display: grid; gap: 8px; }
.wth-chat .wth-chat__choice { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: start; margin: 0; padding: 10px 12px; border: 1px solid var(--wth-chat-line); border-radius: 12px; background: #fff; font-size: .86rem; font-weight: 400; cursor: pointer; }
.wth-chat .wth-chat__choice input { margin: 4px 0 0; }
.wth-chat .wth-chat__choice span { grid-column: 2; font-size: .9rem; font-weight: 650; }
.wth-chat .wth-chat__choice small { grid-column: 2; color: var(--wth-chat-muted); font-size: .76rem; line-height: 1.5; }
.wth-chat .wth-chat__choice:has(input:disabled) { opacity: .62; cursor: not-allowed; background: #f5f7f4; }
.wth-chat .wth-chat__choice:has(input:checked) { border-color: #31531f; background: #f3f8ec; }
.wth-chat .wth-chat__choice:has(input:focus-visible) { outline: 3px solid #477828; outline-offset: 3px; }
.wth-chat__option-help, .wth-chat__capacity { margin: 0; color: var(--wth-chat-muted); font-size: .78rem; line-height: 1.65; max-width: 88ch; }
.wth-chat__capacity { margin-top: 14px; }
.wth-chat__credits { margin: 0; font-size: .84rem; }
@media (min-width: 720px) { .wth-chat__choices { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wth-chat__field:first-child .wth-chat__choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* API off-peak pricing line (edit E24), directly under the API rates. */
.api-offpeak { margin: 14px 0 0; padding: 12px 16px; border: 1px solid #cbd1c2; border-radius: 3px; background: #eef3d8; color: #244034; font-size: 16px; font-weight: 700; line-height: 1.45; }
.credit-packs-section { margin: 40px 0; padding-top: 28px; border-top: 1px solid rgba(15, 23, 42, 0.12); }
.credit-packs-section .section-heading { margin-bottom: 24px; }
.credit-packs-section .section-heading h3 { margin: 6px 0 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }