/* ================================================================
   Agentic Frontier — pricing + contact pages (implemented from the
   Claude Design files "Agentic Frontier Pricing.dc.html" and
   "Agentic Frontier Contact.dc.html"). Loads after home.css, which
   carries the base rules, theme pairs, hover states and dialog.
   ================================================================ */

/* Pricing: sliders */
input[type="range"] { -webkit-appearance: none; appearance: none; height: 3px; background: var(--line); border-radius: 2px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: none; border-radius: 50%; background: var(--ink); cursor: pointer; }

/* Pricing: billing toggle + FAQ states (the design's bound styles) */
.bill-btn { background: transparent; color: var(--ink-faint); border: none; padding: 8px 16px; font-family: var(--font-body); font-size: 13px; cursor: pointer; }
.bill-btn[aria-pressed="true"] { background: rgba(var(--beam-rgb), 0.14); color: var(--ink); }
.faq-item { border-top: 1px solid var(--line-soft); }
.faq-q { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; background: none; border: none; padding: 24px 0; text-align: left; font-family: var(--font-body); font-size: 17px; color: var(--ink); cursor: pointer; }
.faq-q span { font-family: var(--font-mono); font-size: 15px; color: var(--ink-faint); }
.faq-a { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin: -6px 0 26px; max-width: 640px; }
.faq-a[hidden] { display: none; }
.hv-border:hover { border-color: var(--ink-soft) !important; }

/* Contact: fields (the design styles these at the element level) */
.contact-form input, .contact-form textarea, .contact-form select {
  font-family: var(--font-body); font-size: 14.5px; color: var(--ink); background: var(--ground-2);
  border: 1px solid var(--line); border-radius: 6px; padding: 12px 13px; width: 100%; box-sizing: border-box;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--ink-faint); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--ink-faint); }
.contact-form textarea { resize: vertical; min-height: 116px; line-height: 1.55; }
.topic-chip { background: transparent; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 6px; padding: 9px 15px; font-family: var(--font-body); font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.topic-chip[aria-pressed="true"] { background: rgba(var(--beam-rgb), 0.14); color: var(--ink); border-color: var(--ink-faint); }
.field-err { display: none; margin: 0; font-size: 12.5px; color: var(--neg); }
.field-err.on { display: block; }

/* Responsive */
@media (max-width: 1100px) {
}
/* The four-column layout only holds while every plan row fits on one line.
   Narrower than that the rows wrap by different amounts in each card and the
   label rail can no longer track them, so drop to three even columns. */
@media (min-width: 901px) and (max-width: 1239px) {
  #plans { grid-template-columns: repeat(3, 1fr) !important; }
  #planRail { display: none; }
}
@media (max-width: 900px) {
  .af-pad { padding-left: 22px !important; padding-right: 22px !important; }
  #plans { grid-template-columns: 1fr !important; }
  #planRail { display: none; }
  #compareWrap { overflow-x: auto; }
  #compareWrap table { min-width: 640px; }
  #estimator, #faqGrid, #contactGrid { grid-template-columns: 1fr !important; gap: 48px !important; }
  #contactGrid aside { padding-top: 0 !important; }
}
@media (max-width: 640px) {
  .contact-form .two-col { grid-template-columns: 1fr !important; }
}

/* Plan cards: equal-height colored columns; the rows area absorbs the
   slack so every CTA sits on the same baseline. */
.plan-card { display: flex; flex-direction: column; align-items: flex-start; }
.plan-rows { flex: 1; align-self: stretch; }
.plan-card .prow { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 13px 0; border-top: 1px solid var(--card-line); font-size: 14px; margin: 0; }
.plan-card .pr-hint { opacity: 0.7; font-size: 12.5px; text-align: right; }
.plan-cta { border: none; border-radius: 999px; padding: 11px 22px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 24px; }
.plan-cta:hover { box-shadow: var(--shadow-lift); }
.plan-foot { font-size: 12px; opacity: 0.7; margin: 12px 0 0; }
#planRail .rail-row { border-top: 1px solid var(--line-soft); padding: 14px 0; margin: 0; font-size: 13.5px; color: var(--ink-faint); }

/* Legal pages (privacy.html, terms.html): one narrow prose column */
.legal { max-width: 720px; margin: 0 auto; padding: 0 36px; }
.legal h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 10px; }
.legal .updated { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); margin: 0 0 44px; }
.legal h2 { font-family: var(--font-display); font-weight: 500; font-size: 22px; letter-spacing: -0.012em; margin: 44px 0 12px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.legal ul { padding-left: 22px; margin: 0 0 14px; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal code { font-family: var(--font-mono); font-size: 0.9em; }
.legal a { color: var(--ink); }

/* Every plan card's price block is the same height, so the row rail on the
   left stays aligned no matter how many lines a note wraps to. */
.plan-card .plan-note { min-height: 38px; }

/* Wherever the label rail is hidden, each row has to name itself or the plan
   cards become a list of bare values ("12 months", "Included"). */
@media (max-width: 1239px) {
  .plan-card .prow { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; }
  .plan-card .prow::before { content: attr(data-row); grid-column: 1 / -1; font-size: 12px; opacity: 0.62; }
}