/* Home page: Plans, compact FAQ accordion, compact mission, and the enquiry dialogs.
   Uses the tokens declared in index.html's :root (--text, --muted, --green-br, --teal,
   --line, --radius). Kept out of index.html so the page's inline CSS stays small. */

/* Six feature cards read as 3 x 2, never 4 + 2 */
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

/* ───────── Plans ───────── */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.plan {
  display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(24,35,28,.88), rgba(12,19,15,.88));
  border: 1px solid rgba(255,255,255,.08);
}
.plan-free { border-color: rgba(61,220,151,.45); box-shadow: 0 0 0 1px rgba(61,220,151,.12), 0 18px 50px rgba(61,220,151,.08); }
.plan-tag {
  align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 14px;
  color: var(--teal); background: rgba(46,196,182,.14); border: 1px solid rgba(46,196,182,.34);
}
.plan-free .plan-tag { color: var(--green-br); background: rgba(61,220,151,.12); border-color: rgba(61,220,151,.4); }
.plan h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.4px; margin-bottom: 6px; line-height: 1.2; }
.plan-for { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
.plan ul.feat { margin-bottom: 24px; flex: 1; align-content: start; }
.plan .btn { align-self: stretch; justify-content: center; }
.plan-note { margin-top: 12px; min-height: 3em; font-size: 12.5px; color: var(--muted); line-height: 1.5; text-align: center; }
.plan-note a { color: var(--muted); text-decoration: underline; }

/* ───────── FAQ accordion (home shows the top few; the rest live in Help) ───────── */
.qa-list { max-width: 780px; margin: 0 auto; display: grid; gap: 10px; }
.qa {
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
  background: linear-gradient(180deg, rgba(24,35,28,.85), rgba(12,19,15,.85));
}
.qa[open] { border-color: rgba(61,220,151,.4); }
.qa summary {
  list-style: none; cursor: pointer; padding: 16px 48px 16px 20px; position: relative;
  font-weight: 600; font-size: 16px; line-height: 1.4;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--green-br); line-height: 1;
}
.qa[open] summary::after { content: '\2212'; }
.qa summary:focus-visible { outline: 2px solid var(--green-br); outline-offset: 2px; border-radius: 14px; }
.qa p { padding: 0 20px 18px; color: var(--muted); font-size: 15px; line-height: 1.62; }
.qa p a { color: var(--green-br); }
.faq-more { text-align: center; margin-top: 26px; }
.faq-more a { color: var(--green-br); font-weight: 600; }

/* ───────── Compact mission ───────── */
.mission-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .mission-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mission-row { grid-template-columns: 1fr; } }
.mission-row .m { padding: 18px 18px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07);
  background: rgba(18,26,21,.7); }
.mission-row h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.mission-row p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.mission-more { text-align: center; margin-top: 22px; color: var(--muted); font-size: 15px; }
.mission-more a { color: var(--green-br); font-weight: 600; }

.contact-line { text-align: center; margin-top: 26px; color: var(--muted); font-size: 14px; }
.contact-line a { color: var(--green-br); }

/* ───────── Enquiry dialogs ───────── */
dialog.inq {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
  margin: auto; padding: 0; border: 1px solid rgba(61,220,151,.3); border-radius: 22px;
  background: #0d1611; color: var(--text); box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
dialog.inq::backdrop { background: rgba(3,8,14,.72); backdrop-filter: blur(3px); }
.inq-in { padding: 28px 26px 24px; }
.inq h2 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -.5px; margin-bottom: 6px; padding-right: 36px; }
.inq .inq-sub { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin-bottom: 20px; }
.inq-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.inq-x:hover { background: rgba(255,255,255,.12); }
.inq .f { margin-bottom: 14px; }
.inq .f > label:not(.chk), .inq .f > legend { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.inq .f label .req { color: var(--rose); }
.inq input[type=text], .inq input[type=email], .inq input[type=tel], .inq input[type=url], .inq select, .inq textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15.5px; font-family: inherit;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); color: var(--text);
}
.inq select option { background: #0d1611; color: var(--text); }
.inq input:focus, .inq select:focus, .inq textarea:focus { outline: none; border-color: var(--green-br); }
.inq textarea { min-height: 96px; resize: vertical; }
.inq .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .inq .row2 { grid-template-columns: 1fr; } .inq-in { padding: 24px 18px 20px; } }
.inq fieldset { border: 0; padding: 0; min-width: 0; }
.inq .chk { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  border-radius: 12px; border: 1.5px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); font-size: 14.5px; }
.inq .chk:hover { border-color: rgba(61,220,151,.45); }
.inq .chk input { margin-top: 3px; accent-color: #3DDC97; }
.inq .chk b { display: block; color: var(--text); font-weight: 600; }
.inq .chk span span { color: var(--muted); font-size: 13px; }
/* Honeypot: off-screen rather than display:none, which some bots skip filling. */
.inq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inq-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.inq-status { font-size: 14px; min-height: 20px; margin-top: 12px; line-height: 1.5; }
.inq-status.ok { color: var(--green-br); }
.inq-status.err { color: var(--rose); }
.inq-status a { color: inherit; text-decoration: underline; }
.inq-fine { margin-top: 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.inq-fine a { color: var(--muted); text-decoration: underline; }

/* Busy button — spinner + no clicks while a request is in flight (notify form, enquiry dialogs). */
.is-loading { pointer-events: none; opacity: .85; cursor: progress; }
.is-loading::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: cc-spin .7s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .is-loading::before { animation-duration: 2.4s; } }