/* Prices (/prices/): three panels, then the market for reference. The page is the blog's shell
 * (halfsecond-blog.css: its dark hero, its closing call), the panels and the table are this file's.
 * Same faces as the rest: Space Grotesk titles, Satoshi texts. White ground, one black panel.
 * Without script, or with reduced motion: everything is there.
 */
.hs-prices .hs-pr-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 40px var(--pad) 0;
}
.hs-pr-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--hair);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}
.hs-pr-panel--ink { background: #000; color: #fff; border-color: #000; }
.hs-pr-panel__idx {
  display: flex;
  justify-content: flex-start;
  margin: 0 0 clamp(36px, 4vw, 64px);
  font-size: 14px;
  font-weight: 500;
  color: var(--soft);
}
.hs-pr-panel--ink .hs-pr-panel__idx { color: rgba(255, 255, 255, .55); }
.hs-pr-panel__name {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(32px, 3.2vw, 48px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.hs-pr-panel__tag { margin: 14px 0 0; font-size: 17px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; color: var(--grey); text-wrap: pretty; }
.hs-pr-panel--ink .hs-pr-panel__tag { color: rgba(255, 255, 255, .66); }

.hs-pr-price { margin-top: clamp(28px, 3vw, 44px); padding-top: 24px; border-top: 2px solid currentColor; }
.hs-pr-price__pre { margin: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.hs-pr-panel--ink .hs-pr-price__pre { color: rgba(255, 255, 255, .55); }
.hs-pr-price__amt { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.hs-pr-price__amt b {
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}
.hs-pr-price__amt span { font-size: 18px; font-weight: 500; color: var(--soft); }
.hs-pr-panel--ink .hs-pr-price__amt span { color: rgba(255, 255, 255, .55); }
.hs-pr-price__note { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.hs-pr-panel--ink .hs-pr-price__note { color: rgba(255, 255, 255, .66); }

.hs-pr-facts { margin: 28px 0 0; display: grid; gap: 14px; }
.hs-pr-facts div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.hs-pr-facts dt { font-size: 14px; font-weight: 500; color: var(--soft); }
.hs-pr-facts dd { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.hs-pr-panel--ink .hs-pr-facts dt { color: rgba(255, 255, 255, .55); }

.hs-pr-h {
  margin: clamp(32px, 3.4vw, 48px) 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--soft);
}
.hs-pr-panel--ink .hs-pr-h { border-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .55); }

.hs-pr-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
/* no numbering: the steps are in order, the page does not count them */
.hs-pr-steps li { position: relative; padding-left: 0; }
.hs-pr-steps b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.hs-pr-steps span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.hs-pr-panel--ink .hs-pr-steps span { color: rgba(255, 255, 255, .66); }

.hs-pr-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.hs-pr-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.hs-pr-list li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: currentColor; opacity: .5; }

.hs-pr-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding: 0 24px;
  height: 56px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: transform .5s var(--ease), background-color .3s ease;
}
.hs-pr-panel .hs-pr-list + .hs-pr-cta { margin-top: clamp(32px, 3.4vw, 48px); }
.hs-pr-panel > .hs-pr-cta { margin-top: clamp(32px, 3.4vw, 48px); }
.hs-pr-panel--ink .hs-pr-cta { background: #fff; color: #000; }
.hs-pr-cta .hs-arrow { width: 20px; height: 20px; }
@media (hover: hover) { .hs-pr-cta:hover { transform: scale(1.02); } }
.hs-pr-cta:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ------------------------------------------------------------------ the market, for reference */
.hs-pr-bench { padding: clamp(96px, 10vw, 160px) var(--pad) 0; }
.hs-pr-bench__head { margin-left: 0; }
.hs-pr-bench__title {
  margin: 0;
  font-family: var(--hs-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(34px, 4.2vw, 64px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
}
.hs-pr-bench__lead { max-width: 52ch; margin: 18px 0 0; font-size: 17px; font-weight: 500; line-height: 1.45; letter-spacing: -.02em; color: var(--grey); }
.hs-pr-table { width: 100%; margin: 40px 0 0; border-collapse: collapse; }
.hs-pr-table th, .hs-pr-table td { padding: 16px 16px 16px 0; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; font-size: 15px; line-height: 1.4; }
.hs-pr-table thead th { padding-top: 0; border-top: 0; font-size: 14px; font-weight: 500; color: var(--soft); }
.hs-pr-table tbody th { font-weight: 600; }
.hs-pr-table td:nth-child(2) { white-space: nowrap; font-weight: 500; }
.hs-pr-table a { color: var(--grey); text-decoration: underline; text-underline-offset: 3px; }
.hs-pr-table a:hover { color: var(--ink); }

@media (max-width: 1199.98px) {
  .hs-prices .hs-pr-panels { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
  .hs-pr-bench__head { margin-left: 0; }
  .hs-pr-table { width: 100%; margin-left: 0; }
}
@media (max-width: 639px) {
  .hs-pr-table thead { display: none; }
  .hs-pr-table, .hs-pr-table tbody, .hs-pr-table tr, .hs-pr-table th, .hs-pr-table td { display: block; }
  .hs-pr-table tr { padding: 14px 0; border-top: 1px solid var(--hair); }
  .hs-pr-table th, .hs-pr-table td { padding: 2px 0; border: 0; }
  .hs-pr-table td:nth-child(2) { white-space: normal; }
}

.hs-pr-price__amt { flex-wrap: wrap; }
.hs-pr-price__amt .hs-pr-price__from { font-size: 18px; font-weight: 500; color: var(--soft); margin-right: 2px; }
.hs-pr-panel--ink .hs-pr-price__amt .hs-pr-price__from { color: rgba(255, 255, 255, .55); }

/* four packages: two by two on a wide screen, one column below */
.hs-pr-panel--ink { grid-column: auto; }

/* ---------------------------------------------------------------- the four on one row (2026-10-18)
   An overview: the four packages side by side, each with its price, its delivery and what is included,
   nothing more. The detail of the steps is the home's Process. Two by two on a tablet, one column on a
   phone. */
.hs-prices .hs-pr-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: none; }
.hs-pr-panel { padding: 24px 22px 22px; }
.hs-pr-panel__idx { margin: 0 0 28px; }
.hs-pr-panel__name { font-size: clamp(26px, 2.1vw, 34px); }
.hs-pr-panel__tag { margin-top: 10px; font-size: 15px; min-height: 3em; }
.hs-pr-price { margin-top: 22px; padding-top: 18px; }
.hs-pr-price__amt b { font-size: clamp(30px, 2.6vw, 40px); }
.hs-pr-price__amt span { font-size: 15px; }
.hs-pr-price__note { margin-top: 10px; font-size: 14px; min-height: 6em; }
.hs-pr-delivery { margin: 18px 0 0; display: grid; gap: 2px; font-size: 15px; font-weight: 500; line-height: 1.35; min-height: 3.7em; }
.hs-pr-delivery span { font-size: 13px; color: var(--soft); }
.hs-pr-panel--ink .hs-pr-delivery span { color: rgba(255, 255, 255, .55); }
.hs-pr-h { margin: 22px 0 12px; padding-top: 16px; }
.hs-pr-list { gap: 9px; margin-bottom: 26px; }
.hs-pr-list li { font-size: 14px; }
.hs-pr-cta { margin-top: auto !important; height: 48px; padding: 0 18px; justify-content: center; }
.hs-pr-process { max-width: 70ch; margin: 28px 0 0 36px; font-size: 15px; line-height: 1.5; color: var(--grey); }
@media (max-width: 1199.98px) {
  .hs-prices .hs-pr-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-pr-panel__tag, .hs-pr-price__note, .hs-pr-delivery { min-height: 0; }
}
@media (max-width: 639px) {
  .hs-prices .hs-pr-panels { grid-template-columns: minmax(0, 1fr); }
  .hs-pr-process { margin-left: 22px; margin-right: 22px; }
}
.hs-pr-panel__name { font-size: clamp(20px, 1.55vw, 26px); white-space: nowrap; }
.hs-pr-price__note { min-height: 4.9em; }
.hs-pr-panels .hs-pr-cta, .hs-pr-panels .hs-pr-cta span { color: #fff; }
.hs-pr-panels .hs-pr-panel--ink .hs-pr-cta, .hs-pr-panels .hs-pr-panel--ink .hs-pr-cta span { color: #000; }
@media (max-width: 1199.98px) { .hs-pr-panel__name { font-size: clamp(26px, 3.4vw, 34px); white-space: normal; } .hs-pr-price__note { min-height: 0; } }
