/* ==========================================================================
   LANDING TWO-TIER PICKER (2026-09-01)

   Loaded after css/styles.css, which owns the tokens used below. Namespaced
   .tier-pick / .tpc-* so nothing collides with the retired .pkg-check-* rules
   still sitting in styles.css — those are dead markup-wise but left in place
   so a revert is a single file swap.
   ========================================================================== */

.tier-pick{ display:grid; grid-template-columns:1fr; gap:14px; margin:18px 0 0; }

.tier-pick-card{
  position:relative; display:flex; flex-direction:column; gap:12px;
  width:100%; text-align:left; font-family:inherit; cursor:pointer;
  background:var(--white); border:2px solid var(--line); border-radius:18px;
  padding:18px 16px; transition:border-color .16s, box-shadow .16s, transform .16s;
}
.tier-pick-card:hover{ border-color:var(--orange-light); }
.tier-pick-card:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; }
.tier-pick-card.selected{ border-color:var(--orange); box-shadow:0 0 0 4px rgba(249,115,22,.12); }
.tier-pick-card.gold.selected{ border-color:var(--gold); box-shadow:0 0 0 4px rgba(184,134,11,.14); }

.tpc-flag{
  position:absolute; top:-11px; left:16px; display:inline-flex; align-items:center; gap:5px;
  background:var(--gold); color:#fff; font-size:10px; font-weight:800; letter-spacing:.7px;
  padding:4px 10px; border-radius:20px;
}
.tpc-flag svg{ width:12px; height:12px; }

.tpc-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
/* min-width:0 — a nowrap price otherwise forces the row past its container
   (CLAUDE.md CSS gotcha #2). */
.tpc-name{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.tpc-name b{ font-size:17px; font-weight:800; color:var(--ink); }
.tpc-name span{ font-size:12px; color:var(--muted); }
.tpc-price{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; line-height:1.15; }
.tpc-price s{ font-size:12px; color:var(--muted); }
.tpc-price .now{ font-size:24px; font-weight:800; color:var(--ink); }
.tier-pick-card.selected .tpc-price .now{ color:var(--orange-dark); }
.tier-pick-card.gold.selected .tpc-price .now{ color:var(--gold); }

.tpc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.tpc-list li{ display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink); line-height:1.45; }
.tpc-list li svg{ width:15px; height:15px; flex:0 0 15px; color:var(--success); margin-top:2px; }
.tpc-list li b{ font-weight:800; }

.tpc-pick{
  align-self:stretch; text-align:center; border-radius:10px; padding:9px;
  font-size:13px; font-weight:800; color:var(--muted);
  background:var(--cream); border:1px solid var(--line); transition:.16s;
}
.tier-pick-card.selected .tpc-pick{ background:var(--orange); border-color:var(--orange); color:#fff; }
.tier-pick-card.gold.selected .tpc-pick{ background:var(--gold); border-color:var(--gold); color:#fff; }
.tier-pick-card.selected .tpc-pick::after{ content:" ✓"; }

/* The differentiator line. Deliberately not a card — it is a claim about the
   product, and boxing it would make it read as another feature bullet. */
.tier-pick-moat{
  display:flex; align-items:flex-start; gap:9px; margin:16px 0 0;
  font-size:13px; line-height:1.5; color:var(--ink);
  background:var(--gold-bg); border-left:3px solid var(--gold);
  border-radius:0 12px 12px 0; padding:12px 14px;
}
.tier-pick-moat svg{ width:16px; height:16px; flex:0 0 16px; color:var(--gold); margin-top:2px; }
.tier-pick-moat b{ font-weight:800; }

.pkg-cta{ margin-top:16px; width:100%; justify-content:center; }

@media (min-width:820px){
  .tier-pick{ grid-template-columns:1fr 1fr; align-items:start; }
  .tier-pick-moat{ max-width:760px; margin-inline:auto; }
  .pkg-cta{ max-width:420px; margin-inline:auto; }
}

/* ==========================================================================
   REVIEW GALLERY — horizontal scroll (2026-09-02)
   Was `columns:1`, so nine screenshots stacked into a very tall column that
   pushed the picker and the compare table far below the fold. A swipe rail
   shows three at a glance and costs one screen instead of nine.
   ========================================================================== */
.msg-grid.msg-scroll{
  columns:auto; display:flex; gap:12px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  /* Bleed to the viewport edges so the rail reads as scrollable rather than
     as a clipped grid, then pad the ends back in so the first and last cards
     still line up with the rest of the page. */
  margin-inline:calc(50% - 50vw); padding:4px calc(50vw - 50% + 2px) 14px;
  scrollbar-width:thin;
}
.msg-grid.msg-scroll::-webkit-scrollbar{ height:6px; }
.msg-grid.msg-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.msg-grid.msg-scroll .msg-card{
  flex:0 0 78%; max-width:320px; margin:0; scroll-snap-align:center;
}
@media (min-width:820px){
  .msg-grid.msg-scroll .msg-card{ flex-basis:300px; }
}

/* ==========================================================================
   COMPARE TABLE — three ladder columns (2026-09-02)
   ========================================================================== */
.cmp2-three .cmp2-who{
  display:block; font-size:10.5px; font-weight:600; color:var(--muted);
  margin-top:3px; line-height:1.3;
}
.cmp2-three .cmp2-price s{ font-size:11px; color:var(--muted); margin-right:4px; font-weight:500; }
.cmp2-three .cmp2-row{ text-align:left; }