/* Packages, comparison table, shared terms. Uses tokens from styles.css. */

/* Currency selector: native radios styled as a segmented control */
.currency { margin: 0 0 1.75rem; padding: 0; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.currency[hidden] { display: none; } /* shown by pricing.js; stays hidden without JS */
.currency__legend { float: left; margin-right: .25rem; padding: 0; color: var(--muted); font: 500 .75rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.currency__options { display: inline-flex; flex-wrap: wrap; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }
.currency__option { position: relative; cursor: pointer; }
.currency__option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.currency__option span {
  display: block; min-height: 2.75rem; padding: .8rem 1.1rem; border-radius: var(--radius-sm);
  color: var(--muted); font: 600 .9375rem/1.2 var(--font-body); white-space: nowrap;
  transition: background-color var(--fast), color var(--fast);
}
.currency__option:hover span { color: var(--ivory); }
.currency__option input:checked + span { background: var(--lime); color: var(--graphite); }
.currency__option input:focus-visible + span { outline: 3px solid var(--lime); outline-offset: 3px; }

/* Cards */
.pkgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.pkg {
  position: relative; display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.75rem 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raised);
}
.pkg--recommended { border: 2px solid var(--lime); background: #1e211c; box-shadow: 0 30px 60px -30px rgb(201 247 85 / .25); }
.pkg__badge {
  position: absolute; top: -.85rem; left: 1.5rem; padding: .3rem .6rem; border-radius: 4px;
  background: var(--lime); color: var(--graphite); font: 600 .6875rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
}
.pkg__head { display: grid; gap: .5rem; }
.pkg__name { font-size: 1.375rem; }
.pkg__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.pkg__amount { font: 700 clamp(2rem, 1.6rem + 1vw, 2.5rem)/1 var(--font-display); letter-spacing: -.03em; }
.pkg--recommended .pkg__amount { color: var(--lime); }
.pkg__note, .pkg__from { color: var(--muted); font-size: .8125rem; }
.pkg__from { font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }
.pkg__fit { color: var(--muted); font-size: .9375rem; line-height: 1.5; }
.pkg__facts { display: grid; gap: .35rem; padding-block: 1rem; border-block: 1px solid var(--line); font-size: .9375rem; }
.pkg__facts b { color: var(--ivory); }
.pkg__plus { font-size: .8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: -.5rem; }
.pkg .ticks { font-size: .875rem; line-height: 1.5; }
.pkg .ticks code { font-family: var(--font-mono); font-size: .8em; }
.pkg__excl { margin-top: auto; font-size: .875rem; }
.pkg__excl summary { cursor: pointer; color: var(--muted); font-weight: 500; padding-block: .25rem; }
.pkg__excl summary::marker { color: var(--red); }
.pkg__excl summary:hover { color: var(--ivory); }
.pkg__excl p { margin-top: .5rem; color: var(--muted); line-height: 1.5; }
.pkg__cta { justify-content: center; width: 100%; text-align: center; }

/* Disclosures — visible next to the cards, not hidden in the footer */
.pkg-disclosure {
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.5rem; padding: 1rem 1.25rem;
  border: 1px dashed #3a3d38; border-radius: var(--radius); color: var(--muted); font-size: .875rem;
}
.pkg-disclosure b { color: var(--ivory); font-weight: 600; }

/* Comparison table */
.compare__title { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); margin-bottom: 1.25rem; font-size: 1.5rem; }
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.compare:focus-visible { outline-offset: 2px; }
.compare table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .875rem; }
.compare th, .compare td { padding: .85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 600 1rem/1.3 var(--font-display); background: var(--raised); }
.compare tbody th { font-weight: 500; color: var(--muted); }
.compare th:first-child { position: sticky; left: 0; z-index: 1; background: var(--graphite); min-width: 11rem; }
.compare thead th:first-child { background: var(--raised); }
.compare .is-rec { background: rgb(201 247 85 / .07); }
.compare thead .is-rec { background: #1e211c; box-shadow: inset 0 3px 0 var(--lime); }
.compare__rec { display: block; margin-top: .25rem; font: 500 .625rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

.pkg-scope-note { margin-top: 1.25rem; max-width: 60rem; color: var(--muted); font-size: .875rem; }

/* Shared terms (light section) */
.terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.term { padding-block: 1.5rem; border-top: 1px solid var(--ivory-line); }
.term h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.term ul { display: grid; gap: .5rem; }
.term li { position: relative; padding-left: 1rem; color: var(--ink-muted); font-size: .9375rem; line-height: 1.5; }
.term ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--graphite); }
.milestones { display: grid; gap: .5rem; }
.milestones li { padding-left: 0; }
.milestones b { display: inline-block; min-width: 3rem; color: var(--graphite); font: 700 1.125rem/1 var(--font-display); }
.term__note { margin-top: .75rem; color: var(--ink-muted); font-size: .8125rem; }

.custom-quote {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  margin-top: 2.5rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); border-radius: var(--radius-lg); background: #fffdf8; border: 1px solid var(--ivory-line);
}
.custom-quote > div { flex: 1 1 32rem; }
.custom-quote h3 { font-size: 1.375rem; margin-bottom: .5rem; }
.custom-quote p { color: var(--ink-muted); font-size: .9375rem; }
.btn--dark { background: var(--graphite); color: var(--ivory); }
.btn--dark:hover { background: #2a2d29; }

@media (max-width: 1200px) {
  .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
}
@media (max-width: 880px) {
  .terms { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .pkgs { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
}