/* The ruled ledger — this page's signature device.
 *
 * Every shop in this market keeps a hand-ruled exercise book. Presenting the
 * system as entries in one does two jobs: it tells an owner "this is the book,
 * but it adds up for you", and it puts the stock-list scanner in its correct
 * place as ONE ROW among thirty capabilities rather than the whole product.
 */

/* ---- Hero ledger -------------------------------------------------------- */

.hero {
  padding-block: var(--s-16) var(--s-12);
}

.hero__grid {
  display: grid;
  gap: var(--s-12);
  align-items: start;
}

@media (min-width: 960px) {
  .hero__grid {
    /* The photo column leads slightly: the headline is short and the proof
       block carries both the image and the four ledger entries. */
    grid-template-columns: 1fr 1.12fr;
    gap: var(--s-16);
    align-items: center;
  }
}

.hero__title {
  /* The column, not this value, is what actually breaks the line here, so a
     measure alone left "A point of" stranded on its own. Balancing the four
     lines is what fixes it; the max-width just stops the headline running the
     full column on wide screens. */
  max-width: 18ch;
  text-wrap: balance;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

.hero__trust {
  margin-top: var(--s-6);
  font-size: var(--step--1);
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}
.hero__trust span::after {
  content: '·';
  margin-inline-start: var(--s-3);
  color: var(--rule);
}
.hero__trust span:last-child::after { content: none; }

/* ---- Hero proof --------------------------------------------------------- */

/* The photograph and the index below it are ONE object: a plate tipped into the
 * book, with its entry ruled underneath. They share an edge, so the hairline
 * closing the photo is the same hairline opening the first row.
 */
.hero__proof {
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  overflow: hidden;
}

/* .plate carries `margin: var(--s-8) 0 0` for the below-fold plates. Inside the
 * proof block the photo must sit flush against the frame, and the frame is the
 * plate's border now — so the margin, the plate's own border and its radius all
 * come off. Scoped one level deeper than `.plate` so it wins without !important.
 */
.hero__proof .plate {
  margin: 0;
}
.hero__proof .plate__img {
  display: block;
  border: 0;
  border-radius: 0;
}

/* The caption is the plate's, so it sits inside the frame rather than hanging
 * off it — no left rule here, the frame already encloses it. */
.hero__proof .plate__caption {
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-left: 0;
  border-bottom: var(--hairline) solid var(--rule);
  max-width: none;
}

/* The index: the capability ledger's own groups, ruled like the book.
 *
 * The rules are the 1px grid gap with the container's colour showing through,
 * not per-cell borders. The rows are generated from capabilities.json, so any
 * nth-child border maths would quietly mis-rule itself the day a group is
 * added; this draws correctly for any number of entries, in one or two columns.
 */
.hero__index {
  display: grid;
  gap: var(--hairline);
  margin: 0;
  background: var(--rule);
}

@media (min-width: 480px) {
  .hero__index { grid-template-columns: 1fr 1fr; }
}

.hero__entry {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding: var(--s-3) var(--s-4);
  background: var(--paper-raised);
  /* The rows arrive in sequence — the book filling in. Kept from the day-book
     this replaces: the photograph needs no entrance, but the ledger still
     writes itself. */
  animation: ledger-in 0.5s ease both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.hero__entry dt {
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero__entry dd {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink);
}

@keyframes ledger-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__entry { animation: none; }
}

/* ---- Capability ledger -------------------------------------------------- */

.ledger + .ledger { margin-top: var(--s-12); }

.ledger__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
}

.ledger__title {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}

.ledger__lead {
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.ledger__rows { margin: 0; }

.ledger__row {
  display: grid;
  gap: var(--s-1) var(--s-8);
  padding-block: var(--s-4);
  border-bottom: var(--hairline) solid var(--rule);
}

@media (min-width: 760px) {
  .ledger__row {
    grid-template-columns: minmax(12rem, 18rem) 1fr;
    align-items: baseline;
  }
}

.ledger__name {
  font-weight: 600;
  color: var(--ink);
}

.ledger__detail {
  margin: 0;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.ledger__link {
  color: var(--violet);
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Plates -------------------------------------------------------------
 *
 * Product screenshots, framed like figures in a manual: hairline rule, paper
 * mount, mono caption. Deliberately quiet — the ledger stays the one bold
 * element on the page, and these exist to prove the product is real.
 */

.plate {
  margin: var(--s-8) 0 0;
}

.plate__img {
  width: 100%;
  height: auto;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}

.plate__caption {
  margin-top: var(--s-3);
  padding-left: var(--s-3);
  border-left: 2px solid var(--rule);
  font-family: var(--font-data);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Phone screenshots are tall and narrow; sitting them at full width would
   dwarf everything around them. */
.plate--device .plate__img { max-width: 300px; }

.plates-pair {
  display: grid;
  gap: var(--s-8);
  align-items: start;
}
@media (min-width: 760px) {
  .plates-pair { grid-template-columns: 1.6fr 1fr; }
}

/* ---- Contact routes ------------------------------------------------------ */

.contact__rows {
  display: grid;
  gap: 0;
  margin-top: var(--s-4);
  max-width: 32rem;
}
.contact__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: var(--hairline) solid var(--rule);
  text-decoration: none;
  min-height: 48px;
}
.contact__row:first-child { border-top: var(--hairline) solid var(--rule); }
.contact__row:hover .contact__value { color: var(--violet); }
.contact__label { font-weight: 600; }
.contact__value { color: var(--ink-soft); text-align: right; }

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

.billing {
  display: inline-flex;
  padding: 4px;
  border: var(--hairline) solid var(--rule);
  border-radius: 999px;
  background: var(--paper-raised);
}
.billing__opt {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: var(--s-2) var(--s-4);
  min-height: 40px;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.billing__opt[aria-pressed='true'] {
  background: var(--violet);
  color: var(--violet-ink);
}

.plans {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
}
@media (min-width: 860px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
}
.plan--popular { border-color: var(--violet); border-width: 2px; }

.plan__badge {
  align-self: flex-start;
  font-family: var(--font-data);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--violet);
}
.plan__name { font-size: var(--step-1); }
.plan__desc { color: var(--ink-soft); font-size: var(--step--1); }

.plan__price { display: flex; align-items: baseline; gap: var(--s-2); margin-top: var(--s-2); }
.plan__amount {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -0.03em;
}
.plan__period { color: var(--ink-soft); font-size: var(--step--1); }

.plan__devices {
  font-family: var(--font-data);
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-bottom: var(--s-3);
  border-bottom: var(--hairline) solid var(--rule);
}

.plan__features { list-style: none; margin: 0; padding: 0; flex: 1; }
.plan__features li {
  position: relative;
  padding-left: var(--s-6);
  margin-bottom: var(--s-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.plan__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--stamp);
  font-weight: 700;
}

.plan__cta { margin-top: var(--s-4); }

.pricing-note {
  margin-top: var(--s-6);
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq__item {
  padding-block: var(--s-6);
  border-bottom: var(--hairline) solid var(--rule);
}
.faq__q { font-size: var(--step-1); margin-bottom: var(--s-2); }
.faq__a { color: var(--ink-soft); max-width: var(--measure); }

/* ---- Forms -------------------------------------------------------------- */

.field { display: block; margin-bottom: var(--s-4); max-width: 32rem; }
.field__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.field__input {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3);
  font: inherit;
  color: var(--ink);
  background: var(--paper-raised);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius);
}
.field__input:focus-visible { border-color: var(--violet); }
textarea.field__input { min-height: 8rem; resize: vertical; }

.form__status { margin-top: var(--s-4); font-size: var(--step--1); }
.form__status[data-state='error'] { color: var(--flag); }
.form__status[data-state='ok'] { color: var(--stamp); }