/* =============================================================================
   WipZen design system — COMPONENTS
   Every class here is documented in README.md with its variants and states.
   ========================================================================== */

/* =========================================================== 1. BUTTON === */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 6px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-full);
  box-shadow: var(--elevation-1);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--t-base) var(--ease),
    background-position var(--t-base) var(--ease),
    color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}

.btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-block: -4px;
}

.btn--sm { padding: 12px 20px; }
.btn--sm svg { width: 14px; height: 14px; }
.btn--lg { padding: 17px 24px; font-size: 16px; }

.btn:focus-visible {
  outline: none;
  box-shadow: var(--elevation-1), var(--focus-ring);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .55;
  pointer-events: none;
}

/* Primary — a vertical ramp painted at 200% height. Hover slides the
   background-position rather than recolouring, so the transition is smooth
   and the text layer never repaints. */
.btn--primary {
  border: 1px solid var(--brand-btn-top);
  padding: 13px 25px;
  color: var(--white);
  background-image: linear-gradient(
    180deg,
    var(--brand-btn-top) 0%,
    var(--brand-btn-mid) 50%,
    var(--brand-btn-bot) 100%
  );
  background-size: 100% 200%;
  background-position: 0 0;
}

.btn--primary.btn--sm { padding: 11px 19px; }
.btn--primary.btn--lg { padding: 16px 23px; }
.btn--primary:hover { background-position: 0 100%; color: var(--white); }
.btn--primary:active { background-position: 0 100%; box-shadow: none; }

.btn--secondary {
  padding: 13px 25px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--heading);
}

.btn--secondary.btn--sm { padding: 11px 19px; }
.btn--secondary.btn--lg { padding: 16px 23px; }
.btn--secondary:hover { background: var(--control-fill); color: var(--heading); }

.btn--outline {
  padding: 13px 25px;
  border: 1px solid var(--border);
  background: none;
  box-shadow: none;
  color: var(--heading);
}

.btn--outline.btn--sm { padding: 11px 19px; }
.btn--outline.btn--lg { padding: 16px 23px; }
.btn--outline:hover { background: var(--control-fill); color: var(--heading); }
.btn--outline:focus-visible { box-shadow: var(--focus-ring); }

.btn--ghost {
  background: none;
  box-shadow: none;
  color: var(--heading);
}

.btn--ghost:hover { background: var(--control-fill); color: var(--heading); }
.btn--ghost:focus-visible { box-shadow: var(--focus-ring); }

.btn--block { width: 100%; }

/* A text link that behaves like a CTA: label plus an arrow that nudges. */
.link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-brand);
}

.link-cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--t-base) var(--ease);
}

.link-cta:hover svg { transform: translateX(3px); }

/* ============================================================ 2. BADGE === */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  padding: 2px 8px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}

.badge svg { width: 12px; height: 12px; }

.badge--brand   { background: var(--brand-softer);  border: 1px solid var(--brand-soft);     color: var(--fg-brand-strong); }
.badge--success { background: var(--success-soft);  border: 1px solid #cdf2de;               color: var(--success-strong); }
.badge--danger  { background: var(--danger-soft);   border: 1px solid var(--danger-medium);  color: var(--danger-strong); }
.badge--warning { background: var(--warning-soft);  border: 1px solid var(--warning-medium); color: var(--fg-warning); }
.badge--neutral { background: var(--control-fill);  border: 1px solid var(--border);         color: var(--body); }

/* ============================================================= 3. PILL === */
/* The hero announcement chip. */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: var(--elevation-1);
  font-size: 14px;
  font-weight: 500;
  color: var(--heading);
}

.pill:hover { color: var(--heading); border-color: var(--brand-soft); }
.pill__label { color: var(--body); }
.pill > svg { width: 14px; height: 14px; color: var(--body-subtle); }

/* ============================================================= 4. CARD === */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elevation-1);
  padding: 24px;
}

.card--flat { box-shadow: none; }
.card--soft { background: var(--card-soft); }
.card--lg   { border-radius: var(--r-xl); padding: 32px; }

/* For content that should meet the card's edge — a full-bleed table. */
.card--bleed { padding: 0; overflow: hidden; }

.card--feature {
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}

.card--feature:hover {
  box-shadow: var(--elevation-2);
  border-color: transparent;
  transform: translateY(-2px);
}

/* ============================================================== 5. NAV === */

.mnav {
  background: var(--band);
  border-bottom: 1px solid var(--border-on-band);
}

.mnav__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
}

.mnav__start {
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--heading);
}

.brand:hover { color: var(--heading); }

.brand__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background-image: linear-gradient(180deg, var(--brand-light) 0%, var(--brand-strong) 100%);
  box-shadow: var(--elevation-1);
  color: var(--white);
}

.brand__mark svg { width: 16px; height: 16px; }

/* Reduced mark for the dashboard mock's own header bar. */
.brand--sm { font-size: 15px; }
.brand__mark--sm { width: 22px; height: 22px; }
.brand__mark--sm svg { width: 13px; height: 13px; }

.mnav__links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.mnav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading);
}

.mnav__link:hover { color: var(--fg-brand); }

.mnav__link[aria-current="page"] {
  color: var(--fg-brand-strong);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
}

.mnav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mnav__sales {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-inline-end: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading);
}

.mnav__sales:hover { color: var(--fg-brand); }
.mnav__sales svg { width: 16px; height: 16px; }

/* Mobile toggle — hidden until the breakpoint. */
.mnav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-on-band);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--heading);
  cursor: pointer;
}

.mnav__toggle svg { width: 18px; height: 18px; }
.mnav__toggle .icon-close { display: none; }
.mnav__toggle[aria-expanded="true"] .icon-close { display: block; }
.mnav__toggle[aria-expanded="true"] .icon-menu  { display: none; }

@media (min-width: 861px) {
  .mnav__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    gap: 24px;
  }
}

@media (max-width: 860px) {
  .mnav__toggle { display: inline-flex; }

  /* Wraps to its own row under the logo when open. */
  .mnav__panel {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding-block: 8px 20px;
  }

  .mnav__panel.is-open { display: flex; }

  .mnav__panel .mnav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .mnav__panel .mnav__link {
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-on-band);
  }

  .mnav__panel .mnav__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 16px;
  }

  .mnav__panel .mnav__sales {
    margin: 0;
    justify-content: center;
    padding: 12px;
  }

  .mnav__panel .btn { width: 100%; }
}

/* =========================================================== 6. FOOTER === */

.msite-foot {
  background: var(--band);
  border-top: 1px solid var(--border-on-band);
  padding-block: 72px 32px;
}

.msite-foot__row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  gap: 48px 32px;
}

.msite-foot__blurb {
  margin-top: 16px;
  font-size: 14px;
  color: var(--body-subtle);
  max-width: 34ch;
}

.msite-foot__address {
  margin-top: 20px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--body-subtle);
}

.msite-foot__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--heading);
  margin-bottom: 16px;
}

.msite-foot__list li + li { margin-top: 12px; }

.msite-foot__list a {
  font-size: 14px;
  color: var(--body-subtle);
}

.msite-foot__list a:hover { color: var(--fg-brand); }

.msite-foot__base {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-on-band);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--body-subtle);
}

@media (max-width: 1080px) {
  .msite-foot__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msite-foot__brandcol { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .msite-foot__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .msite-foot__base { justify-content: flex-start; }
}

/* ========================================================== 7. FEATURE === */

.feature__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: var(--brand-softer);
  color: var(--brand-strong);
}

.feature__icon svg { width: 16px; height: 16px; }
.feature h3 { margin-bottom: 8px; }
.feature p { font-size: 15px; color: var(--body); }

.feature__icon--danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.feature__icon--success { background: var(--success-soft); color: var(--success-strong); }
.feature__icon--warning { background: var(--warning-soft); color: var(--fg-warning); }

/* ======================================================= 8. CHECK LIST === */

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.check-list li + li { margin-top: 14px; }

.check-list svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--brand);
}

.check-list__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--heading);
}

.check-list__desc {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--body-subtle);
}

/* Compact variant used inside pricing cards. */
.check-list--compact li + li { margin-top: 10px; }
.check-list--compact li { font-size: 14px; color: var(--body); }
.check-list--compact svg { margin-top: 2px; width: 15px; height: 15px; }

/* ============================================================= 9. STAT === */

.stat { text-align: center; }

.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--heading);
  line-height: 1.1;
}

.stat__label {
  margin-top: 8px;
  font-size: 14px;
  color: var(--body-subtle);
}

.stat__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0 auto 12px;
  border-radius: var(--r-md);
  background: var(--brand-softer);
  color: var(--brand-strong);
}

.stat__icon svg { width: 16px; height: 16px; }

/* ============================================================= 10. FAQ === */

.faq { display: grid; gap: 12px; }

.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--elevation-1);
  overflow: hidden;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--heading);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-lg);
}

.faq__q {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.faq__chev {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  color: var(--body-subtle);
  transition: transform var(--t-base) var(--ease);
}

.faq details[open] .faq__chev { transform: rotate(180deg); }

.faq__body {
  padding: 0 24px 20px 52px;
  font-size: 15px;
  color: var(--body);
}

.faq__body p + p { margin-top: 12px; }

/* --- Disclosure animation -------------------------------------------------
   <details> snaps open natively. The CSS-only fix is to transition
   ::details-content between block-size 0 and auto, but that silently does
   nothing in several current engines even where CSS.supports() reports the
   pseudo-element and interpolate-size — no transition is ever created. So the
   height is driven from site.js instead, which wraps everything after <summary>
   in .details-anim and animates that box.

   The wrapper carries no padding of its own — .faq__body keeps it, inside —
   because animating a padded element to height 0 leaves a visible stub. */

   flow-root gives the wrapper its own block formatting context, so a child's
   top margin cannot collapse out of it and make the measured height wrong.
   Clipping is applied inline by the script only while an animation runs, which
   keeps focus rings inside the panel from being cut off the rest of the time. */

.details-anim { display: flow-root; }

@media (max-width: 560px) {
  .faq__body { padding-left: 24px; }
}

/* =========================================================== 11. PROSE === */
/* Long-form legal typography. */

.prose {
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
}

.prose > * + * { margin-top: 20px; }

.prose h2 {
  margin-top: 56px;
  font-size: 26px;
  line-height: 1.25;
  scroll-margin-top: 96px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  margin-top: 32px;
  font-size: 17px;
  scroll-margin-top: 96px;
}

.prose ul,
.prose ol { padding-left: 24px; }

.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--border-strong); }

.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose dl { margin-top: 16px; }
.prose dt { font-weight: 600; color: var(--heading); }
.prose dd { margin: 4px 0 16px; }

.prose table {
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.prose th,
.prose td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.prose th {
  background: var(--control-fill);
  font-weight: 600;
  color: var(--heading);
}

.prose tbody tr:last-child td { border-bottom: 0; }

.prose__note {
  padding: 16px 20px;
  border: 1px solid var(--brand-soft);
  border-radius: var(--r-lg);
  background: var(--brand-softer);
  font-size: 15px;
}

.prose__note strong { color: var(--brand-strong); }

/* Wide content scrolls inside its own box; the page never scrolls sideways.
   `position: relative` is load-bearing: the screen-reader-only labels inside the
   comparison table are absolutely positioned, and without a positioned ancestor
   here they resolve against the section, escape this box's clip, and stretch the
   page's scroll area to the full width of the table. */
.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================= 12. TOC === */

.toc {
  position: sticky;
  top: 32px;
  align-self: start;
}

.toc__title {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body-subtle);
  margin-bottom: 16px;
}

.toc__list li + li { margin-top: 2px; }

.toc__list a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  color: var(--body-subtle);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.toc__list a:hover { color: var(--heading); background: var(--control-fill); }

.toc__list a.is-active {
  border-left-color: var(--brand);
  background: var(--brand-softer);
  color: var(--fg-brand-strong);
  font-weight: 500;
}

/* ============================================================ 13. PLAN === */

.plan-wrap { position: relative; }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--elevation-1);
  padding: 32px;
}

.plan__name {
  font-size: 20px;
  margin-bottom: 6px;
}

.plan__desc {
  font-size: 14px;
  color: var(--body-subtle);
  min-height: 42px;
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 24px;
}

.plan__amount {
  font-family: var(--font-mono);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--heading);
}

.plan__period { font-size: 14px; color: var(--body-subtle); }

.plan__billed {
  margin-top: 10px;
  font-size: 13px;
  color: var(--body-subtle);
}

/* The CTA sits above the feature list so all three line up, despite the
   lists running 8, 14 and 20 items. */
.plan__cta { margin-top: 24px; }

.plan__rule {
  margin: 28px 0 24px;
  border-top: 1px solid var(--border);
}

.plan__features-title {
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body-subtle);
  margin-bottom: 16px;
}

.plan--featured {
  border-color: var(--brand);
  box-shadow: var(--elevation-3);
}

.plan__flag {
  position: absolute;
  top: -11px;
  left: 32px;
  background: var(--card);
}

/* ========================================================= 14. COMPARE === */

.compare {
  font-size: 14px;
  min-width: 720px;
}

.compare th,
.compare td {
  padding: 14px 20px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.compare thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card);
  border-bottom: 1px solid var(--border-medium);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--heading);
}

.compare thead th:not(:first-child) { text-align: center; }

/* The price under each plan name in the header row. */
.compare__price {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  color: var(--body-subtle);
}

.compare tbody th {
  font-weight: 500;
  color: var(--heading);
}

.compare td { color: var(--body); text-align: center; }

.compare tbody tr:hover { background: var(--card-soft); }

.compare .row-group th {
  background: var(--control-fill);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--body-subtle);
}

.compare .yes { color: var(--success-strong); }
.compare .no  { color: var(--fg-disabled); }
.compare .yes svg,
.compare .no svg { width: 16px; height: 16px; margin-inline: auto; }

.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-bottom: 0; }

/* ========================================================== 15. AVATAR === */

.avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--brand-softer);
  color: var(--brand-strong);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
}

.avatar--lg { width: 64px; height: 64px; font-size: 17px; }
.avatar--xs { width: 26px; height: 26px; font-size: 10px; }

.avatar-stack { display: flex; }

.avatar-stack .avatar {
  width: 24px;
  height: 24px;
  font-size: 9px;
  border: 2px solid var(--card);
}

.avatar-stack .avatar + .avatar { margin-left: -8px; }

/* ============================================================ 16. LOGO === */
/* Neutral wordmarks for the "trusted by" strip. */

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 56px);
}

.logo-strip li {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--border-strong);
  transition: color var(--t-base) var(--ease);
}

.logo-strip li:hover { color: var(--body-subtle); }