/* ========================================================================
   stepkeep — proof.css
   Local-only proof (permissions, network panel) and pricing.
   Split from css/components.css; load order in HTML preserves the cascade.
   ======================================================================== */

/* --- Local-only proof ---------------------------------------------------- */

.local {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, var(--sp-8));
  align-items: start;
}

.local__copy p {
  margin-top: var(--sp-4);
  max-width: var(--measure);
}

.local__proof {
  display: grid;
  gap: var(--sp-5);
}

.permissions {
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}

.permissions__head {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: var(--sp-4);
}

.permissions__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.perm {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
  padding-block: 0.55rem;
  border-top: var(--border);
  font-size: var(--step--1);
}

.perm:last-child {
  border-bottom: var(--border);
}

.perm code {
  background: none;
  padding: 0;
  color: var(--ink);
  font-weight: 400;
}

.perm span {
  color: var(--slate);
}

.permissions__note {
  margin-top: var(--sp-4);
}

/* Network panel: the proof that nothing is uploaded. */
.netpanel {
  margin: 0;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.netpanel__tabs {
  display: flex;
  gap: 0.15rem;
  padding: 0.4rem 0.5rem 0;
  background: var(--paper-sunk);
  border-bottom: var(--border);
}

.netpanel__tab {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--slate);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius) var(--radius) 0 0;
}

.netpanel__tab--active {
  background: var(--surface);
  color: var(--ink);
  border: var(--border);
  border-bottom-color: transparent;
}

.netpanel__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
}

.netpanel__table th,
.netpanel__table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: var(--border);
  font-weight: 500;
}

.netpanel__table thead th {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate);
}

.netpanel__empty td {
  padding-block: var(--sp-6);
  text-align: center;
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.netpanel__foot {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  font-size: var(--step--1);
  color: var(--graphite);
}

.netpanel__zero {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--moss);
  line-height: 1;
}

/* --- Pricing ------------------------------------------------------------- */

.plans {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

.plan--featured {
  /* Not a Marker border: Marker on the card surface measures 1.83:1, which
     fails WCAG 1.4.11 for a graphical object, and darkening it enough to pass
     would break the "Marker appears once per composition" rule. The card is
     already unmistakable from the flag (the one Marker on this section), the
     ink rule and the lifted shadow. */
  border-color: var(--ink);
  border-width: 1px;
  box-shadow: var(--shadow-lift);
  position: relative;
}

.plan__flag {
  position: absolute;
  top: 0;
  left: var(--sp-5);
  transform: translateY(-50%);
  background: var(--marker);
  color: #163a2e;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius);
}

.plan__name {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin-bottom: var(--sp-3);
  color: var(--ink);
}

.price-amount {
  font-family: var(--font-head);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.plan__cur {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--slate);
}

.plan__once,
.plan__vat {
  font-size: var(--step--1);
  color: var(--slate);
}

.plan__for {
  font-size: var(--step--1);
  color: var(--slate);
  margin-bottom: var(--sp-4);
  min-height: 2.6em;
}

.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: grid;
  gap: 0.5rem;
  font-size: var(--step--1);
  border-top: var(--border);
  padding-top: var(--sp-4);
}

/* Pushed to the bottom of the card so the four buttons sit on one line across
   plans with different numbers of features. The margin on .plan__features is
   what the auto margin absorbs, so a card with no features still spaces right. */
.plan__cta {
  margin-top: auto;
}

.plan__features li {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
}

/* A plain rule-based mark, not a coloured check icon (§6.6). */
.plan__features li::before {
  content: '—';
  color: var(--slate);
  font-size: 0.9em;
  line-height: 1.5;
}

.plan .btn {
  margin-top: auto;
}


.business {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--border);
  border-radius: var(--radius-lg);
}

.business__name {
  font-size: var(--step-1);
  margin-bottom: var(--sp-2);
}

/* The band states its price the way the three cards do. It is the one plan a
   reader has to take on trust from a paragraph, so leaving the number inside the
   prose was the one place on this page that did not say the number. Set one step
   down from a card, because the band is wider and the figure would otherwise
   outweigh the featured plan. */
.business__price {
  margin-bottom: var(--sp-3);
}

.business__price .price-amount {
  font-size: 2.25rem;
}

.business__body {
  font-size: var(--step--1);
  color: var(--slate);
  max-width: 44rem;
}

/* The seat rule is an argument, not small print, so it is set at body size with
   a rule beside it rather than demoted into the terms below. Ink, not Marker:
   the featured plan's flag is already this composition's one saturated accent,
   and a second would spend the rule twice on one screen. */
.pricing__trust {
  margin-top: var(--sp-5);
  max-width: var(--measure);
  padding-left: var(--sp-4);
  border-left: 2px solid var(--ink);
}

/* The terms of the sale, set as a colophon rather than a paragraph: four labels
   a reader can aim at, four short answers under them. Running prose hides all
   four behind reading all four. */
.pricing__terms {
  display: grid;
  /* auto-fit, not a fixed count: the terms of the sale are the kind of list that
     loses an item the day a promise gets simpler. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.pricing__terms dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.pricing__terms dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--slate);
}

@media (max-width: 30rem) {
  .pricing__terms {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }
}