/* HSH Design — /platform only. Loaded via $pageStyles, not by every page.
   Builds on components.css; adds nothing it already provides. */

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

.pf-hero {
  padding: 72px 56px 64px;
  display: grid;
  gap: 26px;
  border-bottom: 2.5px solid var(--ink);
}

.pf-hero__eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

.pf-hero__title {
  font-size: 58px;
  line-height: 1.02;
  letter-spacing: -.028em;
  font-weight: 600;
  max-width: 20ch;
}

.pf-hero__lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

.pf-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* ---------- Track sections ---------- */

.pf-track { border-top: 2.5px solid var(--ink); padding: 64px 56px 72px; }
.pf-track--band { background: var(--band); color: var(--on-band); border-top: none; }

.pf-track__head {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 0;
  margin-bottom: 44px;
}

.pf-track__num {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--muted);
  padding-top: 8px;
}
.pf-track--band .pf-track__num { color: var(--band-muted); }

.pf-track__title {
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 600;
  margin-bottom: 16px;
}

.pf-track__lede { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 56ch; }
.pf-track--band .pf-track__lede { color: var(--band-muted); }

/* ---------- The drawn chain (intake -> ... -> invoice) ---------- */

.pf-chain { width: 100%; height: auto; display: block; }

/* Scroll container for the wide drawn plates. On a phone a six-step chain
   scaled to 350px puts its labels at about 3px tall — legible to nobody. The
   plate keeps a readable minimum width below and this scrolls it instead, so
   the page body never scrolls sideways. */
.pf-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.pf-scroll-hint { display: none; }

.pf-chain-note {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 20px;
}
.pf-track--band .pf-scroll-hint { display: none; }

.pf-chain-note { color: var(--band-muted); }

/* ---------- Feature rows under a track ---------- */

.pf-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}
.pf-track--band .pf-features { border-top-color: var(--band-rule); }

.pf-feature {
  padding: 26px 28px 30px 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pf-track--band .pf-feature { border-right-color: var(--band-rule); border-bottom-color: var(--band-rule); }
.pf-feature:last-child { border-right: none; padding-right: 0; }

/* The final row carries no bottom rule — it would double up against whatever
   section follows. -n+3 is the last row at three columns and also covers the
   three-item grid under Design studio; the 960px query resets it for two. */
.pf-feature:nth-last-child(-n+3) { border-bottom: none; }

.pf-feature__title { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }
.pf-feature__desc { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 40ch; }
.pf-track--band .pf-feature__desc { color: var(--band-muted); }

/* ---------- White-label block ---------- */

.pf-white {
  border-top: 2.5px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.pf-white__copy {
  padding: 64px 48px 72px 56px;
  border-right: 2.5px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.pf-white__title {
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -.024em;
  font-weight: 600;
  max-width: 16ch;
}

.pf-white__copy p { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 46ch; }

.pf-white__art {
  background: var(--panel);
  padding: 56px 56px 64px 48px;
  display: flex;
  align-items: center;
}

/* ---------- Spec strip (numbers/facts, mono) ---------- */

.pf-specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--band-rule);
}

.pf-spec {
  padding: 22px 24px 24px 0;
  border-right: 1px solid var(--band-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-spec:last-child { border-right: none; padding-right: 0; }

.pf-spec__value {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--on-band);
}

.pf-spec__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--band-muted);
  line-height: 1.5;
}

/* ---------- Security list ---------- */

.pf-security {
  border-top: 2.5px solid var(--ink);
  padding: 64px 56px 72px;
}

.pf-security__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}

.pf-security__item {
  padding: 22px 32px 24px 0;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.pf-security__item:nth-child(odd) { border-right: 1px solid var(--rule); }

.pf-security__k {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--muted);
  flex: 0 0 28px;
  padding-left: 0;
}
.pf-security__v { font-size: 15.5px; line-height: 1.5; max-width: 48ch; }

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .pf-hero, .pf-track, .pf-security { padding-left: 32px; padding-right: 32px; }
  .pf-white__copy { padding-left: 32px; padding-right: 32px; }
  .pf-white__art { padding-left: 32px; padding-right: 32px; }
  .pf-hero__title { font-size: 46px; }
  .pf-track__head { grid-template-columns: 150px 1fr; }
  .pf-features { grid-template-columns: 1fr 1fr; }
  .pf-feature:nth-child(even) { border-right: none; padding-right: 0; }
  /* Two columns means the last row is the last two items, not the last three. */
  .pf-feature:nth-last-child(-n+3) { border-bottom: 1px solid var(--rule); }
  .pf-track--band .pf-feature:nth-last-child(-n+3) { border-bottom-color: var(--band-rule); }
  .pf-feature:nth-last-child(-n+2) { border-bottom: none; }
  .pf-specs { grid-template-columns: 1fr 1fr; }
  .pf-spec:nth-child(2) { border-right: none; padding-right: 0; }
  .pf-spec:nth-child(3), .pf-spec:nth-child(4) { border-top: 1px solid var(--band-rule); padding-top: 22px; }
}

@media (max-width: 760px) {
  .pf-hero { padding: 40px 20px 36px; gap: 18px; }
  .pf-hero__title { font-size: 33px; line-height: 1.05; }
  .pf-hero__lede { font-size: 16px; }
  .pf-hero__actions { flex-direction: column; }
  .pf-hero__actions .btn { width: 100%; justify-content: space-between; }

  .pf-track, .pf-security { padding: 40px 20px 44px; }
  .pf-track__head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
  .pf-track__num { padding-top: 0; }
  .pf-track__title { font-size: 27px; }

  /* Columns become stacked rows; the rule moves from right to bottom so the
     grid stays rule-divided instead of collapsing into gaps. */
  .pf-features, .pf-specs { grid-template-columns: 1fr; margin-top: 32px; }
  .pf-feature, .pf-spec {
    border-right: none !important;
    padding-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-top: 22px;
  }
  .pf-track--band .pf-feature, .pf-track--band .pf-spec { border-bottom-color: var(--band-rule); }
  .pf-feature:last-child, .pf-spec:last-child { border-bottom: none; padding-bottom: 0; }
  .pf-feature:nth-child(3), .pf-spec:nth-child(3), .pf-spec:nth-child(4) { border-top: none; }

  /* Below this width the plates stop scaling and start scrolling. */
  .pf-scroll .pf-chain { min-width: 680px; }
  .pf-scroll--board .pf-chain { min-width: 860px; }
  .pf-scroll--canvas .pf-chain { min-width: 900px; }
  .pf-scroll-hint {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--band-muted);
    margin-top: 10px;
  }

  .pf-white { grid-template-columns: 1fr; }
  .pf-white__copy { padding: 40px 20px 36px; border-right: none; border-bottom: 2.5px solid var(--ink); }
  .pf-white__title { font-size: 30px; }
  .pf-white__art { padding: 32px 20px 40px; }

  .pf-security__grid { grid-template-columns: 1fr; }
  .pf-security__item { padding: 18px 0 20px; }
  .pf-security__item:nth-child(odd) { border-right: none; }
}

/* ---------- Trust and pricing pages (share this sheet with /platform) ---------- */

.pf-lead { padding: 56px 56px 0; max-width: 74ch; }
.pf-lead p { font-size: 18px; line-height: 1.6; color: var(--muted); }
.pf-lead p + p { margin-top: 18px; }

/* A control: what it is, and the mechanism that makes it true. */
.trust-group { border-top: 2.5px solid var(--ink); padding: 56px 56px 60px; }

.trust-list { margin-top: 36px; border-top: 1px solid var(--rule); }

.trust-item {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

.trust-item__what {
  padding: 24px 32px 26px 0;
  border-right: 1px solid var(--rule);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
}

.trust-item__how { padding: 24px 0 26px 32px; }
.trust-item__how p { font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 62ch; }

/* The specific, checkable number — 16 bytes, 45 days, 8 attempts. */
.trust-item__fact {
  display: inline-block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 6px 10px;
}

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

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  margin-top: 36px;
}

/* Every column is the SAME box. Nothing here may vary per column: the
   moment one gets its own padding, the labels, the rules under the figures,
   the feature lists and the buttons all stop lining up with each other, and
   in a three-column price table that is the first thing anyone notices.
   The trailing padding stays on the last column too — the 28px of dead space
   at the right edge is invisible, and equal columns are worth more than a
   flush edge here. */
.price {
  padding: 32px 28px 36px 0;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.price:last-child { border-right: none; }

/* The tier most shops should pick.
   An inset box-shadow rather than a border or a background: a border would
   push this column's content 3px below the others, and a background needs
   symmetric padding, which is what broke the alignment the first time. This
   changes no geometry at all. */
.price--featured { box-shadow: inset 0 3px 0 var(--lime); }
.price--featured .price__label { color: var(--ink); }

.price__period {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The plan CTAs must be one size. .btn--lime is deliberately chunkier than
   .btn elsewhere on the site — 20px/30px padding against 15px/24px, and a
   2.5px border against 2px — which is right for a lone hero button and wrong
   for three sitting side by side, where it made one CTA 11px taller than its
   neighbours. Normalised here only, so the hero button keeps its weight. */
.price .btn {
  margin-top: auto;
  padding: 16px 22px;
  font-size: 11px;
  border-width: 2px;
  white-space: nowrap;
}
.price__includes { margin-bottom: 24px; }

.price__label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.price__name { font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.price__figure {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.price__for { font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 40ch; }

.price__includes { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; }
.price__includes li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.price__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 9px;
  height: 9px;
  background: var(--lime);
}

@media (max-width: 960px) {
  .pf-lead, .trust-group { padding-left: 32px; padding-right: 32px; }
  .trust-item { grid-template-columns: 220px 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price { border-right: none; padding-right: 0; border-bottom: 1px solid var(--rule); }
  .price:last-child { border-bottom: none; }
}

@media (max-width: 760px) {
  .pf-lead { padding: 32px 20px 0; }
  .pf-lead p { font-size: 16.5px; }
  .trust-group { padding: 36px 20px 40px; }

  /* Rule moves from the middle to the bottom so the pair stacks as one block. */
  .trust-item { grid-template-columns: 1fr; }
  .trust-item__what { border-right: none; padding: 20px 0 8px; }
  .trust-item__how { padding: 0 0 22px; }
  .price { padding: 24px 0 26px; }
  /* Stacked, the marker reads better as a rule above the column than as an
     inset edge. Pulled up 1px so it covers the previous column's hairline
     instead of sitting just under it as a doubled line. */
  .price--featured {
    box-shadow: none;
    border-top: 3px solid var(--lime);
    margin-top: -1px;
    padding-top: 21px;
  }
}