/* ==========================================================================
   tls-term.css — the billing-term pill (Billed annually / Month to month).
   --------------------------------------------------------------------------
   ONE control, set once, that governs every recurring rate on a page: any
   node carrying data-annual/data-monthly. The figures own the prices; this
   control owns none. Extracted out of pricing.html so the pill can roll onto
   the for-*.html vertical pages without duplicating the rules per page.

   html:not(.js) .term{ display:none } is the no-JS fallback — without JS the
   control is hidden and the page reads as annual, which is what the markup
   and each page's copy already say by default.

   THEMING: this file reads --plane/--line-strong/--f-mono/--caption/--muted/
   --text/--cyan/--cyan-bright, which pricing.html gets for free from
   /tls-stack.css. The five for-*.html vertical pages each run their own
   bespoke token world (none of them load tls-stack.css), so those pages
   alias these names to their own tokens inside a scoped `.term{ ... }`
   block in their own <style>. The thumb wash also honors two optional,
   purely-local overrides — --term-thumb-bg / --term-thumb-border — for
   worlds whose accent doesn't read well as flat cyan; both fall back to
   the original STACK cyan so pricing.html is unaffected either way.
   ========================================================================== */
.term{ margin: 26px 0 0; padding: 0; border: 0; }
.term-legend{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .term{ display: none; }

.term-pill{
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 4px; border-radius: 999px;
  background: var(--plane); border: 1px solid var(--line-strong);
}
/* Absolutely positioned, so it leaves the grid flow and the two columns stay
   equal. Equal columns are what make the 100% travel land exactly. */
.term-thumb{
  position: absolute; top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px); border-radius: 999px;
  background: var(--term-thumb-bg, rgba(79,216,240,0.12)); border: 1px solid var(--term-thumb-border, rgba(79,216,240,0.45));
  transition: transform 320ms var(--ease);
}
.term-pill[data-term="monthly"] .term-thumb{ transform: translateX(100%); }

.term-opt{
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: var(--f-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--caption);
  transition: color 220ms var(--ease);
}
.term-opt:hover{ color: var(--text); }
.term-opt input{ position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.term-opt:has(input:focus-visible){ outline: 2px solid var(--cyan); outline-offset: 3px; }
.term-pill[data-term="annual"] .term-opt--annual,
.term-pill[data-term="monthly"] .term-opt--monthly{ color: var(--cyan-bright); }

.term-note{ margin: 12px 0 0; font-size: 0.86rem; color: var(--caption); line-height: 1.5; }
.term-note b{ color: var(--muted); }

@media (max-width: 460px){
  .term-pill{ display: grid; width: 100%; }
  .term-opt{ padding: 9px 8px; font-size: 10px; letter-spacing: 0.07em; }
}
@media (prefers-reduced-motion: reduce){
  .term-thumb, .term-opt{ transition: none; }
}