/* Style 9 add-on components (2026-10-28). The pages use the 10/23 style 9 design: shared.css is
   the skin. This file only styles blocks added after that (store badges, the "what it takes to
   list" steps, the split section head, the wash tile, the phone frame). No global overrides. */
:root{--ink-2:#262b38;--ink-3:rgba(10,14,26,.62);--night:#0d1222}
.sec-head{display:grid;gap:14px;margin-bottom:40px}
.sec-head h2{margin-top:0}
.sec-head.split{align-items:end}
@media(min-width:980px){.sec-head.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}.sec-head.split .lead{margin-top:0}}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.badge{display:inline-block;line-height:0;border-radius:10px}
.badge img{height:52px;width:auto}
.badge.apple img{height:38px;margin:7px 4px} /* Apple's badge has no padding; 38px lines up with Google's 52px PNG */
.tile.wash{background:var(--blue-wash);border-color:var(--blue-line)}
/* ---------- "what you need to list" ---------- */
.need{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:nd}
.need>li{counter-increment:nd;position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--hair)}
.need>li::before{content:counter(nd);grid-row:span 3;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--blue-wash);color:var(--blue);font:400 24px/1 Newsreader,serif}
.need h3{font:600 17px/1.3 "Hanken Grotesk",sans-serif;color:var(--ink)}
.need p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.need .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.need .chips span{font-size:13px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--paper-2);color:var(--ink)}
.need .chips span.b{background:var(--blue);color:#fff}
.need>li.hl{background:var(--blue-wash);border-color:var(--blue-line)}
@media(min-width:760px){.need.cols{grid-template-columns:repeat(2,1fr)}.need.cols>li:last-child:nth-child(odd){grid-column:span 2}}
@media(min-width:1100px){.need.five{grid-template-columns:repeat(5,1fr)}.need.five>li{grid-template-columns:1fr;align-content:start}.need.five>li::before{grid-row:auto;margin-bottom:10px}.need.five>li:last-child:nth-child(odd){grid-column:auto}}
.phone{margin:0;justify-self:center;width:min(270px,70vw)}
.phone-f{border-radius:40px;overflow:hidden;border:8px solid var(--night);background:var(--night);box-shadow:0 40px 70px -40px rgba(10,14,26,.55)}
.phone img{width:100%;height:auto}
.phone figcaption{margin-top:14px;font-size:14px;line-height:1.45;color:var(--ink-3);text-align:center}
.closecard .stores{justify-content:center;margin-top:20px}
.hero .stores{justify-content:center}