/* ============================================================================
   JBSG additions on top of the baker-roofing system.
   Baker's _shared.css is left untouched so the system stays traceable to source.
   ========================================================================== */

/* ---------- rule-under -------------------------------------------------------
   Red rule struck under headline words for emphasis.

   Uses a real text-decoration rather than a background gradient. Baker runs
   sub-1.0 line-heights, and a gradient anchors to the bottom of the line BOX,
   so a phrase that wraps draws its first fragment's rule straight through the
   line beneath it. text-decoration anchors to each line's own baseline, so it
   survives wrapping at any viewport.

   Deliberate deviation from the Baker spec, which bans coloured headline words.
   This colours the rule, never the glyph, so the headline stays ink-only.
   -------------------------------------------------------------------------- */
.rule-under {
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.1em;
  text-decoration-skip-ink: none;
}

/* ---------- hero-split -------------------------------------------------------
   Two-column hero: copy left, supporting visual right. Baker's page-hero
   gradient already falls off toward the right (120deg, .92 to .55), so the
   visual sits in the lighter half by design rather than fighting it.
   -------------------------------------------------------------------------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 940px) {
  .hero-split { grid-template-columns: 1fr; gap: 38px; }
}

/* ---------- mappack ----------------------------------------------------------
   Illustrative diagram of a Google local map pack. Deliberately NOT a
   screenshot and deliberately not Google's chrome: it uses the Baker palette
   and generic placeholder names so it reads as an explanatory diagram rather
   than a fabricated search result for a real business.

   The rows animate from third place to first. Rank numbers live on a static
   rail so the businesses slide past the positions rather than carrying their
   own numbers with them.
   -------------------------------------------------------------------------- */
.mappack {
  --row-h: 60px;
  --climb: 3.6s;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 26px 64px rgba(0, 0, 0, .42);
  color: var(--ink-deep);
  font-family: var(--font-body);
  width: 100%;
  max-width: 470px;
  margin-left: auto;
}
@media (max-width: 940px) {
  .mappack { margin-left: 0; }
}

.mappack__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--grey);
}
.mappack__glass {
  width: 14px; height: 14px;
  border: 2px solid var(--ink-quiet);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.mappack__glass::after {
  content: '';
  position: absolute;
  right: -5px; bottom: -4px;
  width: 6px; height: 2px;
  background: var(--ink-quiet);
  transform: rotate(45deg);
}
.mappack__q { font-size: .9rem; color: var(--ink-muted); }

.mappack__map {
  height: 116px;
  position: relative;
  background-color: #e4e0db;
  background-image:
    linear-gradient(var(--grey) 1px, transparent 1px),
    linear-gradient(90deg, var(--grey) 1px, transparent 1px);
  background-size: 34px 34px, 47px 47px;
  border-bottom: 1px solid var(--grey);
}
.mappack__pin {
  position: absolute;
  width: 15px; height: 15px;
  background: var(--ink-quiet);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.mappack__pin.is-you {
  width: 22px; height: 22px;
  background: var(--accent);
  animation: mp-pin var(--climb) 1 both;
}

/* results area ------------------------------------------------------------- */
.mappack__results {
  position: relative;
  height: calc(var(--row-h) * 3);
}
.mappack__ranks {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 36px;
  display: grid;
  grid-template-rows: repeat(3, var(--row-h));
  align-items: center;
  justify-items: center;
  z-index: 2;
  pointer-events: none;
}
.mappack__ranks span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink-quiet);
}
.mappack__ranks span:first-child { animation: mp-rank-one var(--climb) 1 both; }

.mappack__row {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--row-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 0 36px;
  border-bottom: 1px solid var(--grey);
  animation-duration: var(--climb);
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.65, 0, .35, 1);
}
/* Starting slots are set here as well as in the keyframes, so the panel is
   never briefly stacked at 0 before the animation takes hold. */
.mappack__row.is-you    { transform: translateY(calc(var(--row-h) * 2));
                          animation-name: mp-you, mp-you-hot; z-index: 1; }
.mappack__row.is-comp-a { transform: translateY(0);
                          animation-name: mp-comp-a; }
.mappack__row.is-comp-b { transform: translateY(var(--row-h));
                          animation-name: mp-comp-b; }

.mappack__name { font-weight: 600; font-size: .95rem; line-height: 1.2; margin: 0; }
.mappack__meta { font-size: .78rem; color: var(--ink-muted); margin: 3px 0 0; }
.mappack__stars { color: var(--accent); letter-spacing: .5px; }
.mappack__tag {
  margin-left: auto;
  flex: none;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
}

/* the climb ----------------------------------------------------------------
   Plays once on load and holds at first place. Third to second happens almost
   immediately so the movement is caught rather than waited for, then a beat at
   second, then the climb to first. Looping this would keep pulling the eye back
   while somebody is trying to read the headline next to it. */
@keyframes mp-you {
  0%,   11%  { transform: translateY(calc(var(--row-h) * 2)); }
  28%,  45%  { transform: translateY(var(--row-h)); }
  62%,  100% { transform: translateY(0); }
}
@keyframes mp-comp-a {
  0%,   45%  { transform: translateY(0); }
  62%,  100% { transform: translateY(var(--row-h)); }
}
@keyframes mp-comp-b {
  0%,   11%  { transform: translateY(var(--row-h)); }
  28%,  100% { transform: translateY(calc(var(--row-h) * 2)); }
}
/* the payoff: the row only lights up once it holds first */
@keyframes mp-you-hot {
  0%,   58%  { background: transparent;              box-shadow: inset 0 0 0 var(--accent); }
  70%,  100% { background: rgba(253, 58, 32, .07);   box-shadow: inset 4px 0 0 var(--accent); }
}
@keyframes mp-rank-one {
  0%,   58%  { color: var(--ink-quiet); }
  70%,  100% { color: var(--accent); }
}
@keyframes mp-pin {
  0%,   58%  { box-shadow: 0 0 0 0 rgba(253, 58, 32, 0); }
  70%,  100% { box-shadow: 0 0 0 6px rgba(253, 58, 32, .22); }
}

/* Respect reduced motion: hold the finished state, no movement. */
@media (prefers-reduced-motion: reduce) {
  .mappack__row,
  .mappack__ranks span:first-child,
  .mappack__pin.is-you { animation: none; }
  .mappack__row.is-you {
    transform: translateY(0);
    background: rgba(253, 58, 32, .07);
    box-shadow: inset 4px 0 0 var(--accent);
  }
  .mappack__row.is-comp-a { transform: translateY(var(--row-h)); }
  .mappack__row.is-comp-b { transform: translateY(calc(var(--row-h) * 2)); }
  .mappack__ranks span:first-child { color: var(--accent); }
  .mappack__pin.is-you { box-shadow: 0 0 0 6px rgba(253, 58, 32, .22); }
}

.mappack__caption {
  font-size: .8rem;
  color: var(--paper);
  opacity: .72;
  margin: 14px 0 0;
  text-align: right;
  max-width: 470px;
  margin-left: auto;
}
@media (max-width: 940px) {
  .mappack__caption { text-align: left; margin-left: 0; }
}

/* ---------- statement --------------------------------------------------------
   Centered, type-led section for a single claim. Baker has no centered pattern
   (every source block is left-aligned or a two-column panel), so this is an
   addition rather than a transcription. It stays inside the system's logic by
   doing what Baker does everywhere else: let the display type carry the page
   and add nothing decorative around it.
   -------------------------------------------------------------------------- */
.statement { text-align: center; padding: 24px 0; }
.statement h2 { text-transform: uppercase; margin: 0; }
.statement__terms {
  max-width: 58ch;
  margin: 32px auto 0;
  color: var(--ink-muted);
}
.statement__terms + .statement__terms { margin-top: 14px; }
.statement__actions {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- stack-panel ------------------------------------------------------
   Itemised value stack. Reads as an invoice on purpose: each line is a real
   deliverable with what it would cost bought separately, prices set in the
   mono face and right-aligned so they form a scannable column, and the total
   pulled out under a red rule at full display scale. The anchor only works if
   the total is the loudest thing in the panel.

   Sits inside Baker's own .icon-grid so it inherits the 3px mortar gap.
   -------------------------------------------------------------------------- */
.stack-lede {
  max-width: 62ch;
  margin: -14px 0 30px;
}
.stack-panel {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
}
.stack-panel__kicker {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.stack-panel h3 {
  color: var(--paper);
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1;
  margin: 0 0 20px;
}
.stack-panel__items {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.stack-panel__items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(245, 245, 245, .11);
  font-size: .92rem;
  color: var(--paper-72);
}
.stack-panel__items li:last-child { border-bottom: 0; }
.stack-panel__price {
  font-family: var(--font-mono);
  font-size: .84rem;
  color: var(--paper);
  flex: none;
}
.stack-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid var(--accent);
}
.stack-panel__total-label {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: .72;
}
.stack-panel__total-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: var(--accent);
  flex: none;
}
.stack-bridge {
  margin: var(--gap-mortar) 0 0;
  background: var(--bg-warm);
  border-radius: var(--radius);
  padding: 30px 34px;
  text-align: center;
  font-size: 1.05rem;
  color: var(--ink-deep);
}
.stack-bridge strong { font-weight: 700; }