/* Marketing-page components, on top of static/brand/public.css.
   Loaded by signup/home.html and signup/pricing.html — the two pages that
   sell. The form pages and the legal shell need none of this and load only
   public.css, which is why the hero and vignette rules live here rather than
   there.

   THE VIGNETTES (.pk-ui) are hand-built representations of the product's real
   screens, not screenshots. Every control, column and status word in them is
   lifted from the actual templates — "Park sale", "Quick keys", "Get Rates",
   "Package Details", "Signature Required", "Picked up" — so the picture a
   prospect forms matches the software they get. Keep it that way: if a label
   here stops existing in the product, change it here too, or this becomes a
   promise the counter does not keep. The figures are illustrative and the page
   never calls them live quotes. */

/* ===========================================================================
   HERO
   =========================================================================== */

.pk-hero {
  padding: 68px 0 60px;
  background:
    radial-gradient(ellipse 70% 60% at 15% -10%, #FFF6E3 0, transparent 70%),
    radial-gradient(ellipse 60% 50% at 95% 10%, #FDEFE9 0, transparent 65%);
}
.pk-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 54px;
  align-items: center;
}
.pk-hero h1 { margin-bottom: 18px; }
.pk-hero h1 .accent { color: var(--pk-red); }
.pk-hero__lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 34em; }
.pk-hero .pk-btnrow { margin-top: 28px; }

.pk-hero__flag {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gold-wash); border: 1px solid #F3E1BE;
  color: #7A5410; border-radius: 999px;
  padding: 6px 15px 6px 8px; margin-bottom: 20px;
  font-size: .84rem; font-weight: 700;
}
.pk-hero__flag b {
  background: var(--pk-gold); color: var(--pk-navy);
  border-radius: 999px; padding: 2px 9px; font-size: .76rem;
}

/* The reassurance line under the buttons. Three facts, no adjectives. */
.pk-trust {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--pk-line);
  color: var(--pk-slate); font-size: .89rem; font-weight: 600;
}
.pk-trust span { display: inline-flex; align-items: center; gap: 7px; }
.pk-trust svg { width: 15px; height: 15px; color: var(--green); flex: none; }

/* ===========================================================================
   UI VIGNETTES
   =========================================================================== */

.pk-ui {
  background: #FFFFFF;
  border: 1px solid #E3DACA;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--pk-ink);
}
.pk-ui__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: var(--pk-navy);
  color: #FFFFFF;
  font-weight: 750; font-size: .82rem;
  letter-spacing: .02em;
}
.pk-ui__dots { display: flex; gap: 5px; }
.pk-ui__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.32); }
.pk-ui__tag {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px 9px;
}
.pk-ui__body { padding: 16px 17px 18px; }

.pk-ui__label {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .66rem; font-weight: 800; color: var(--pk-slate);
  margin: 0 0 8px;
}
.pk-ui__fields { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.pk-ui__field {
  border: 1px solid #E6DFD1; border-radius: 8px;
  padding: 7px 11px; background: #FCFAF5;
  font-weight: 650; font-size: .82rem;
}
.pk-ui__field small { display: block; font-size: .66rem; font-weight: 600; color: var(--pk-slate); letter-spacing: .04em; text-transform: uppercase; }

.pk-ui__rule { height: 1px; background: var(--line-soft); margin: 15px -17px; }

/* --- rate rows --- */
.pk-rate {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 10px 11px; border-radius: 10px;
  border: 1px solid transparent;
}
.pk-rate + .pk-rate { margin-top: 4px; }
.pk-rate--best { background: var(--green-wash); border-color: #BEE0CC; }
.pk-rate__carrier {
  font-size: .62rem; font-weight: 800; letter-spacing: .05em;
  text-align: center; border-radius: 6px; padding: 5px 3px;
  background: var(--navy-wash); color: var(--pk-navy);
}
.pk-rate--best .pk-rate__carrier { background: #FFFFFF; color: var(--green); }
.pk-rate__svc { font-weight: 650; }
.pk-rate__eta { display: block; color: var(--pk-slate); font-size: .74rem; font-weight: 600; }
.pk-rate__amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-rate__flag {
  display: block; font-size: .62rem; font-weight: 800;
  color: var(--green); text-transform: uppercase; letter-spacing: .07em;
}

/* --- sale lines --- */
.pk-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px dashed var(--line-soft);
}
.pk-line__name { font-weight: 620; }
.pk-line__meta { display: block; color: var(--pk-slate); font-size: .74rem; font-weight: 600; }
.pk-line__amt { font-weight: 750; font-variant-numeric: tabular-nums; }
.pk-line--total { border-bottom: 0; padding-top: 12px; font-size: 1.02rem; }
.pk-line--total .pk-line__name,
.pk-line--total .pk-line__amt { font-weight: 850; color: var(--pk-navy); }
.pk-line--sub { color: var(--pk-slate); border-bottom: 0; padding-bottom: 2px; }

/* --- mini controls --- */
.pk-ui__actions { display: flex; gap: 8px; margin-top: 15px; }
.pk-ui__btn {
  flex: 1; text-align: center; border-radius: 9px;
  padding: 10px 8px; font-weight: 750; font-size: .82rem;
  background: var(--surface-sunk); color: var(--pk-navy); border: 1px solid var(--pk-line);
}
.pk-ui__btn--go { background: var(--pk-red-text); color: #FFFFFF; border-color: var(--pk-red-text); flex: 1.4; }
.pk-ui__keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.pk-ui__key {
  font-size: .73rem; font-weight: 700; border-radius: 7px;
  padding: 6px 10px; background: var(--gold-wash);
  border: 1px solid #F2E2C2; color: #7A5410;
}

/* --- mailbox wall --- */
.pk-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pk-box {
  border-radius: 9px; padding: 9px 6px; text-align: center;
  border: 1px solid var(--pk-line); background: #FCFAF5;
}
.pk-box b { display: block; font-size: .88rem; font-variant-numeric: tabular-nums; }
.pk-box span { font-size: .6rem; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--pk-slate); }
.pk-box--rented { background: var(--green-wash); border-color: #C6E3D2; }
.pk-box--rented span { color: var(--green); }
.pk-box--due { background: var(--red-wash); border-color: #F3CCC8; }
.pk-box--due span { color: var(--pk-red-dark); }

.pk-stats { display: flex; gap: 8px; margin-top: 14px; }
.pk-stat {
  flex: 1; border: 1px solid var(--pk-line); border-radius: 10px;
  padding: 9px 10px; background: #FCFAF5;
}
.pk-stat b { display: block; font-size: 1.15rem; font-weight: 850; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pk-stat span { font-size: .66rem; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; color: var(--pk-slate); }

/* ===========================================================================
   ALTERNATING STORY ROWS
   =========================================================================== */

.pk-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.pk-story + .pk-story { margin-top: 76px; }
.pk-story--flip .pk-story__art { order: -1; }
.pk-story h2 { font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.95rem); }
.pk-story__body > p { color: var(--ink-soft); font-size: 1.03rem; max-width: 46ch; }
.pk-story .pk-ticks { margin-top: 16px; }

/* ===========================================================================
   CAPABILITY GRID
   =========================================================================== */

.pk-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 18px; }
.pk-cap {
  background: var(--surface); border: 1px solid var(--pk-line);
  border-radius: var(--radius-lg); padding: 22px;
}
.pk-cap h3 { font-size: 1.02rem; display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.pk-cap h3 svg { width: 19px; height: 19px; color: var(--pk-red); flex: none; }
.pk-cap ul { list-style: none; margin: 0; padding: 0; }
.pk-cap li {
  padding: 6px 0; font-size: .92rem; color: var(--ink-soft);
  border-top: 1px solid var(--line-soft);
}
.pk-cap li:first-child { border-top: 0; }

/* ===========================================================================
   CARRIER STRIP
   =========================================================================== */

.pk-carriers {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 18px;
}
.pk-carrier {
  border: 1px solid var(--pk-line); border-radius: 12px;
  background: var(--surface); box-shadow: var(--shadow-sm);
  padding: 14px 26px;
  font-weight: 850; font-size: 1.06rem; letter-spacing: .02em;
  color: var(--pk-navy);
}

/* ===========================================================================
   PRICING PREVIEW
   =========================================================================== */

.pk-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); gap: 20px; }
.pk-price__card {
  background: var(--surface); border: 1px solid var(--pk-line);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column;
}
.pk-price__card--lead { border-color: var(--pk-gold); box-shadow: var(--shadow-md); position: relative; }
.pk-price__badge {
  position: absolute; top: -12px; left: 28px;
  background: var(--pk-gold); color: var(--pk-navy);
  font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 13px;
}
.pk-price__amt { font-size: 2.5rem; font-weight: 850; color: var(--pk-navy); line-height: 1; margin: 10px 0 4px; }
.pk-price__amt small { font-size: .95rem; font-weight: 650; color: var(--pk-slate); }
.pk-price__tag { color: var(--pk-slate); font-size: .93rem; margin-bottom: 14px; }
.pk-price__card .pk-btn { margin-top: auto; }
.pk-price__card .pk-ticks { margin-bottom: 22px; }

/* ===========================================================================
   PARTNER BAND (dealer + integrator)
   =========================================================================== */

.pk-partner { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; }
.pk-partner__card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: var(--radius-lg); padding: 26px;
}
.pk-partner__card h3 { margin-bottom: 8px; }
.pk-partner__card p { color: #B7C6E0; font-size: .96rem; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */

@media (max-width: 940px) {
  .pk-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .pk-hero { padding-top: 48px; }
  .pk-story { grid-template-columns: 1fr; gap: 32px; }
  .pk-story--flip .pk-story__art { order: 0; }
  .pk-story + .pk-story { margin-top: 56px; }
  .pk-story__body > p { max-width: none; }
}
@media (max-width: 420px) {
  .pk-boxes { grid-template-columns: repeat(3, 1fr); }
  .pk-carrier { padding: 12px 18px; font-size: .96rem; }
}

/* ===========================================================================
   THE FOUR SIGN-UP DOORS
   ===========================================================================

   THE CLASS IS THE BARE `card`, NOT `pk-card`, AND MUST STAY THAT WAY.
   config/test_documented_counts.py counts the literal string

       a class="card" href

   inside signup/home.html to derive how many sign-up flows the product offers,
   and asserts CLAUDE.md and README.md both agree with that number. Rename the
   class and the gate reads zero flows while the page still shows four — a
   green build over a wrong document. The count has already moved twice (the
   integrator door withdrawn as H7-01, restored as API-01), which is precisely
   why it is pinned rather than written down. Style it, never rename it, and
   keep the attribute order `class` then `href`.

   `card` is safe as a global name here only because this stylesheet is loaded
   by the marketing home and by nothing else. */

.pk-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 20px; }

.pk-doors .card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--pk-line);
  border-radius: var(--radius-lg);
  padding: 26px;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pk-doors .card:hover {
  text-decoration: none; transform: translateY(-4px);
  box-shadow: var(--shadow-md); border-color: var(--pk-gold);
}
.pk-doors .card h3 { margin: 0 0 6px; font-size: 1.12rem; }
.pk-doors .card p { color: var(--pk-slate); font-size: .93rem; margin: 0; }
.pk-doors .card .pk-card__go { margin-top: auto; padding-top: 16px; }

/* ===========================================================================
   HERO ART + ROUTE DIVIDER + LOTTIE FALLBACKS
   =========================================================================== */

/* The hero art is a LAYERED COMPOSITION: the ship desk, with the register
   hanging off its bottom-right corner. The overlap is the point — it is the
   page's one-sentence argument, that rating a parcel and ringing it up are the
   same screen — but it has to clear the primary card's action row. The first
   cut sat at `bottom: -46px` and covered "Get Rates" and the caption both,
   which is worse than not overlapping at all: it hid the exact control the
   vignette exists to show. Keep the register's top edge BELOW the ship card's
   buttons; `--pk-stack-drop` is what tunes that. */
/* THE LAYERED HERO ART — ship desk, with the register hanging off its
   bottom-right corner. The overlap is the page's one-sentence argument: rating
   a parcel and ringing it up are the same screen.

   IT IS A GRID, NOT AN ABSOLUTE OVERLAY, AND THAT IS THE WHOLE TRICK. The first
   two attempts positioned the register absolutely and tuned a negative offset
   by eye. Both covered "Get Rates" — the single control the vignette exists to
   show — because an absolutely positioned card contributes no height, so the
   overlap is (register height − reserved padding) and silently grows with any
   copy change inside the register. Measured, that was a 94px overlap against a
   52px safe zone.

   In flow, `margin-top` IS the overlap: exactly 34px, whatever either card's
   height turns out to be. The stack also sizes itself, so the caption below
   needs no reserved space and cannot be rendered through. */
.pk-hero__stack { display: grid; grid-template-columns: minmax(0, 1fr); }
.pk-hero__stack > .pk-ui:first-child { grid-row: 1; }
.pk-hero__stack > .pk-ui + .pk-ui {
  grid-row: 2;
  position: relative; z-index: 2;
  width: 58%;
  margin: -34px -14px 0 auto;
  box-shadow: var(--shadow-lg);
}

/* THE SAFE ZONE the overlap lands in. The ship card's action row ends flush
   with its own padding, so anything laid over that corner covers a button.
   52px of extra padding gives the register something to overlap that is not
   one — keep it comfortably larger than the 34px above. */
.pk-hero__stack > .pk-ui:first-child .pk-ui__body { padding-bottom: 52px; }

.pk-hero__caption { margin: 14px 0 0; }

.pk-routewrap { padding: 8px 0 4px; }

.pk-lottie__fallback { display: block; }

/* Below this the columns are too narrow to layer two cards without mush, so the
   register is dropped rather than stacked — it appears again in full in the
   "At the counter" story row, so nothing is lost. The stack's reserved padding
   goes with it, or the caption floats in dead space. */
/* Below this the columns are too narrow to layer two cards without mush, so the
   register is dropped rather than stacked — it appears again in full in the
   "At the counter" story row, so nothing is lost. The safe zone goes with it;
   52px of empty card under the buttons with nothing overlapping it is just a
   hole. */
@media (max-width: 1040px) {
  .pk-hero__stack > .pk-ui + .pk-ui { display: none; }
  .pk-hero__stack > .pk-ui:first-child .pk-ui__body { padding-bottom: 18px; }
}

/* ===========================================================================
   ADD-ON PACK GRID  (signup/pricing.html)
   ===========================================================================

   `pack-name` IS LOAD-BEARING. apps/signup/tests.py asserts on the rendered
   string `class="pack-name">Warehouse Pro<` and `class="pack-name">POS Pro<` as
   positive controls, and on the ABSENCE of `class="pack-name">Payroll<` — the
   D-04 finding, where a priced public offer to perform statutory tax filing was
   advertised by a pack no code stood behind. Those assertions are how a pack
   flipped back on without an integration behind it fails in CI instead of on
   the live pricing page. Keep the class name and keep it adjacent to the name.

   Same for `pack-price` carrying the unit: a metered pack's price is a per-unit
   RATE, and "$25/mo" for Own Carrier Accounts understates any store with more
   than one linked account — which the invoice then contradicts. */

.pk-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.pk-pack {
  background: var(--surface); border: 1px solid var(--pk-line);
  border-radius: var(--radius); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.pk-pack:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pk-gold); }
.pk-pack__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pack-name { font-weight: 800; font-size: 1.06rem; color: var(--pk-navy); }
.pack-price { font-weight: 850; white-space: nowrap; color: var(--pk-navy); font-variant-numeric: tabular-nums; }
.pack-price small { font-size: .76rem; font-weight: 650; color: var(--pk-slate); }
.pk-pack__blurb { color: var(--pk-slate); font-size: .89rem; margin: 0; }