/* Stellar Upgrades — the proposal's components, for the website's money pages (Part 4).
   Ported from the residential proposal template (v3) so the site sells the way the proposal does. Every rule is
   scoped under .px (a proposal-style <section>), so nothing here can reach a page's older styles.
   Two deliberate differences from the proposal: nothing is set under 13px, and small grey and brass text is one
   step darker so every pair holds 4.5:1 on paper, soft paper and white. */
.px{--ink:#0e1613;--ink-2:#16211c;--paper:#fbfaf7;--paper-2:#f1efe9;--card:#fff;--text:#141c18;--text-2:#4a544f;--mute:#656e68;--line:rgba(20,28,24,.11);--line-d:rgba(255,255,255,.11);--brass:#8c7442;--brass-2:#c9b283;--brass-3:#6f5c33;--green:#1f6e4d;--green-2:#5fb48c;--red:#9e3f33;--red-2:#e0a79e;--on-ink:#f3f1ea;--on-ink-2:#a9b1ab;--display:"Inter Tight",Inter,system-ui,sans-serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--r:16px;--r2:24px;--sh:0 1px 2px rgba(20,28,24,.04),0 20px 50px rgba(20,28,24,.09);
  background:var(--paper);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;letter-spacing:-.005em;padding:76px 0;-webkit-font-smoothing:antialiased;scroll-margin-top:80px}
.px *{box-sizing:border-box}
.px.px-ink{background:var(--ink);color:var(--on-ink)}
.px.px-soft{background:var(--paper-2)}
.px .wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
.px h2,.px h3{font-family:var(--display);font-weight:600;line-height:1.04;margin:0;letter-spacing:-.03em;color:inherit}
.px h2{font-size:clamp(32px,4.3vw,58px)}
.px h3{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.02em;line-height:1.1}
.px p{margin:0}
.px a{color:inherit}
.px img{max-width:100%}
.px ul,.px ol{margin:0;padding:0}
.px figure{margin:0}
.px .eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-3)}
.px.px-ink .eyebrow{color:var(--brass-2)}
.px .lead{font-size:clamp(17px,1.4vw,20px);color:var(--text-2);max-width:60ch;line-height:1.5;letter-spacing:-.01em}
.px.px-ink .lead{color:var(--on-ink-2)}
.px .num{font-variant-numeric:tabular-nums}
.px .head{display:flex;flex-direction:column;gap:14px;margin-bottom:36px;max-width:860px}
.px .head.center{align-items:center;text-align:center;margin-left:auto;margin-right:auto}
.px .note{font-size:14px;color:var(--mute);line-height:1.55;max-width:82ch}
.px.px-ink .note{color:var(--on-ink-2)}
.px .note a,.px .lead a,.px .inl{text-decoration:underline;text-underline-offset:3px}
.px .swipe{display:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600;margin-bottom:10px}
.px .k{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:600}
.px .btn{font:inherit;font-size:16px;font-weight:600;border:0;border-radius:999px;padding:14px 24px;background:var(--ink);color:var(--on-ink);cursor:pointer;text-decoration:none;display:inline-block;box-shadow:none;transform:none;text-align:center}
.px .btn:hover{transform:none;box-shadow:none}
.px.px-ink .btn{background:var(--on-ink);color:var(--ink)}
.px .mt{margin-top:18px}
.px .mt2{margin-top:40px}

/* the problem / the solution */
.px .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.px .pgrid>*{min-width:0}
.px .pcol{display:flex;flex-direction:column;gap:18px}
.px .plist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.px .plist li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.px .plist .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:600}
.px .plist b{display:block;font-size:18px;font-weight:600;color:var(--text)}
.px .plist span{font-size:15px;color:var(--text-2)}
.px .plist.good .ic{background:rgba(31,110,77,.1);color:var(--green)}
.px .plist.bad .ic{background:rgba(158,63,51,.1);color:var(--red)}
.px.px-ink .plist{border-top-color:var(--line-d)}
.px.px-ink .plist li{border-bottom-color:var(--line-d)}
.px.px-ink .plist b{color:var(--on-ink)}
.px.px-ink .plist span{color:var(--on-ink-2)}
.px.px-ink .plist.bad .ic{background:rgba(158,63,51,.18);color:var(--red-2)}
.px.px-ink .plist.good .ic{background:rgba(95,180,140,.16);color:var(--green-2)}
.px .flip{display:flex;align-items:center;gap:14px;margin-top:10px;padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);font-size:16px}
.px .flip b{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.px .flip .arrow{font-size:22px;color:var(--brass)}

/* how it works: three steps */
.px .plain{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none}
.px .plain>li{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.px .plain .big{font-family:var(--display);font-weight:600;font-size:44px;line-height:1;color:var(--brass)}
.px .plain p{color:var(--text-2);font-size:16px}

/* where you are today: the bill, the yearly rise, the 30-year ledger */
.px .today{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.px .today>*{min-width:0}
.px .bigstat{font-family:var(--display);font-weight:600;font-size:clamp(60px,8vw,112px);line-height:.95;letter-spacing:-.05em}
.px .bigstat small{font-family:var(--sans);font-weight:500;font-size:clamp(15px,1.4vw,19px);color:var(--on-ink-2);letter-spacing:0;margin-left:12px}
.px .ctl{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-end}
.px .ctl label,.px .ctl .lab{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-ink-2);display:block;margin-bottom:8px}
.px .billin{display:flex;align-items:center;border:1px solid var(--line-d);border-radius:14px;padding:0 14px;background:rgba(255,255,255,.05);font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--on-ink)}
.px .billin input{font:inherit;border:0;outline:none;width:6ch;padding:10px 4px;background:transparent;color:var(--on-ink);-moz-appearance:textfield}
.px .billin input::-webkit-outer-spin-button,.px .billin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.px .billin:focus-within{border-color:var(--on-ink)}
.px .billin span{color:var(--on-ink-2);font-size:15px;font-family:var(--sans);font-weight:500}
.px .seg{display:inline-flex;background:rgba(255,255,255,.05);border:1px solid var(--line-d);border-radius:14px;padding:4px;gap:2px;flex-wrap:wrap}
.px .seg button{font:inherit;font-size:15px;font-weight:600;border:0;background:transparent;color:var(--on-ink-2);padding:9px 14px;border-radius:10px;cursor:pointer}
.px .seg button[aria-pressed="true"]{background:var(--on-ink);color:var(--ink)}
.px .seg.light{background:var(--card);border-color:var(--line)}
.px .seg.light button{color:var(--text-2)}
.px .seg.light button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.px .ledger{border-top:1px solid var(--on-ink)}
.px .ledger .row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line-d)}
.px .ledger .row span{color:var(--on-ink-2)}
.px .ledger .row b{font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--on-ink)}
.px .ledger .row.total b{font-family:var(--display);font-size:42px;letter-spacing:-.04em;color:var(--red-2)}
.px .ledger .own{display:flex;justify-content:space-between;padding:16px 0;color:var(--on-ink-2)}
.px .ledger .own b{font-size:22px;color:var(--on-ink);font-weight:600}

/* why now: fact cards */
.px .wfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.px .wfact{border:1px solid var(--line);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:12px;background:var(--card);min-width:0}
.px .wfact .big{font-family:var(--display);font-weight:600;font-size:clamp(34px,2.9vw,42px);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.px .wfact p{font-size:15px;color:var(--text-2)}
.px .wfact .cite{font-size:13px;color:var(--mute);letter-spacing:.04em;margin-top:auto;text-transform:uppercase;line-height:1.45}

/* what we install: product cards */
.px .parts{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.px .part{display:grid;grid-template-columns:36% 1fr;gap:18px;align-items:start;align-content:start;padding:18px;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);min-width:0}
.px .part figure{border-radius:var(--r);overflow:hidden;background:var(--paper-2);aspect-ratio:1/1;position:relative;display:block}
.px .part figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;padding:8%}
.px .part .copy{display:flex;flex-direction:column;gap:10px;min-width:0}
.px .part .copy p{color:var(--text-2);font-size:15px}
.px .part .copy .eyebrow{color:var(--text-2)}
.px .part h3{font-size:20px}
.px .spec{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:4px;border-top:1px solid var(--line);padding-top:12px}
.px .spec div{font-size:13px;color:var(--mute)}
.px .spec b{display:block;font-size:14px;color:var(--text);font-weight:600;margin-top:2px}
.px .specrow{display:flex;gap:8px;flex-wrap:wrap}
.px .specbtn{align-self:flex-start;font-size:13px;font-weight:600;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--text);background:var(--card)}
.px .specbtn::after{content:" \2197";color:var(--brass)}

/* choose your package */
.px .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.px .opt{border:1.5px solid var(--line);border-radius:var(--r2);display:flex;flex-direction:column;background:var(--card);text-align:left;overflow:hidden;min-width:0}
.px .opt.sel{border-color:var(--ink);box-shadow:var(--sh)}
.px .opt .photo{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden}
.px .opt .photo img{width:100%;height:100%;object-fit:cover;display:block}
.px .opt .photo.fit{background:#fff}
.px .opt .photo.fit img{object-fit:contain;padding:6%}
.px .opt .body{padding:26px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.px .pill{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--paper-2);color:var(--text-2);align-self:flex-start}
.px .opt.sel .pill{background:var(--ink);color:var(--on-ink)}
.px .opt h3{font-size:24px}
.px .opt ul{padding-left:20px;color:var(--text-2);display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.px .opt li b{font-weight:600;color:var(--text)}
.px .opt li small{display:block;color:var(--mute);font-size:13px;line-height:1.45}
.px .opt .fitfor{font-size:14px;color:var(--text-2);border-top:1px solid var(--line);padding-top:12px;margin-top:4px}
.px .tbtn{margin-top:auto;font:inherit;font-size:15px;font-weight:600;border:0;background:var(--ink);color:var(--on-ink);padding:13px 16px;border-radius:999px;cursor:pointer;text-align:center;text-decoration:none;display:block}

/* what each package shows you: app screens by tier */
.px .apps{margin-top:72px}
.px .approw{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.px .approw.off{display:none}
.px .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;min-width:0}
.px .approw .lab b{display:block;font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em}
.px .approw .lab span{font-size:14px;color:var(--text-2);display:block;margin-top:6px}
.px .phone{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden;box-shadow:var(--sh);min-width:0}
.px .phone .shot{background:#f7f7f7;aspect-ratio:4/5;overflow:hidden}
.px .phone .shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.px .phone .shot.land img{object-fit:contain;object-position:center;background:#f7f7f7}
.px .phone .cap{padding:14px 16px}
.px .phone .cap b{display:block;font-size:15px;font-weight:600}
.px .phone .cap span{font-size:13px;color:var(--text-2)}

/* what you're deciding: two columns */
.px .decide{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:start}
.px .dcol{border-radius:var(--r2);padding:28px;min-width:0}
.px .dcol.stay{background:rgba(255,255,255,.04);border:1px solid var(--line-d);color:var(--on-ink-2)}
.px .dcol.go{background:var(--card);color:var(--text);box-shadow:0 30px 60px rgba(0,0,0,.35)}
.px .dh{display:flex;flex-direction:column;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line-d);margin-bottom:6px}
.px .dcol.go .dh{border-bottom-color:var(--text)}
.px .dcol.stay .dh h3{color:var(--on-ink)}
.px .dcol.stay .pill{background:rgba(255,255,255,.08);color:var(--on-ink-2)}
.px .dcol.go .pill{background:var(--ink);color:var(--on-ink)}
.px .dl{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--line-d);align-items:baseline}
.px .dcol.go .dl{border-bottom-color:var(--line)}
.px .dl:last-child{border-bottom:0}
.px .dl>span{font-size:15px}
.px .dl b{font-family:var(--display);font-weight:600;font-size:24px;letter-spacing:-.03em;text-align:right;color:var(--on-ink)}
.px .dcol.go .dl b{color:var(--text)}
.px .dl b.neg{color:var(--red-2)}
.px .dl b.pos{color:var(--green)}
.px .dl small{grid-column:1/-1;font-size:13px;color:var(--on-ink-2);line-height:1.4}
.px .dcol.go .dl small{color:var(--mute)}
.px .dcol.go .btn{background:var(--ink);color:var(--on-ink);margin-top:14px}

/* the money: stat tiles */
.px .annual{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.px .an{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card);min-width:0}
.px .an .v{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.03em;line-height:1.05;margin-top:8px}
.px .an .sm{font-size:14px;color:var(--text-2);margin-top:6px}
.px .an.dark{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.px .an.dark .k{color:var(--brass-2)}
.px .an.dark .sm{color:var(--on-ink-2)}

/* five ways to pay */
.px .pay{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:0;list-style:none}
.px .pay>li{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--card);display:flex;flex-direction:column;gap:8px;min-width:0}
.px .pay .how{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-3);font-weight:600}
.px .pay b{font-size:16px;font-weight:600}
.px .pay .pm{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.px .pay p{font-size:14px;color:var(--text-2)}

/* everything included */
.px .inc{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 56px}
.px .inc .grp h3{font-size:20px;padding-bottom:12px;border-bottom:1px solid var(--text);margin-bottom:4px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.px .inc .grp h3 span{font-family:var(--sans);font-size:13px;color:var(--mute);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.px .inc .grp ul{list-style:none}
.px .inc .grp li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.px .inc .grp li em{font-style:normal;font-size:13px;font-weight:600;letter-spacing:.1em;color:var(--green);white-space:nowrap}
.px .inc .grp li em.o{color:var(--brass-3)}
.px .inc .grp li small{display:block;color:var(--mute);font-size:14px}

/* warranties: year cards on ink */
.px .war{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none}
.px .war.n6{grid-template-columns:repeat(3,1fr)}
.px .wcard{border:1px solid var(--line-d);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03)}
.px .wcard .y{font-family:var(--display);font-weight:600;font-size:54px;line-height:1;color:var(--on-ink);letter-spacing:-.05em}
.px .wcard b{font-size:16px;color:var(--on-ink);font-weight:600}
.px .wcard p{font-size:14px;color:var(--on-ink-2)}

/* how it happens */
.px .proc{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;list-style:none}
.px .proc.four{grid-template-columns:repeat(4,1fr)}
.px .pstep{border-top:1px solid var(--text);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.px .pstep .when{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-3)}
.px .pstep b{font-size:17px;font-weight:600}
.px .pstep p{color:var(--text-2);font-size:15px}

/* who builds it */
.px .crewgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.px .crewgrid>*{min-width:0}
.px .mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--text);padding-top:18px}
.px .mini div{font-size:13px;color:var(--mute)}
.px .mini b{display:block;font-family:var(--display);font-weight:600;font-size:30px;color:var(--text);letter-spacing:-.03em}
.px .crewimg{border-radius:var(--r2);overflow:hidden;box-shadow:var(--sh)}
.px .crewimg img{display:block;width:100%;height:auto}

/* website additions in the same language: photo rows, a proof card, plain tables behind a disclosure */
.px .shotsrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.px .shotsrow.c2{grid-template-columns:1fr 1fr}
.px .shotsrow.c4{grid-template-columns:repeat(4,1fr)}
.px .pshot{border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden;min-width:0;display:flex;flex-direction:column}
.px .pshot a{display:block;text-decoration:none}
.px .pshot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.px .pshot.tall img{aspect-ratio:4/5}
.px .pshot.sq img{aspect-ratio:1/1}
.px .pshot figcaption{padding:14px 16px;font-size:14px;color:var(--text-2);line-height:1.45}
.px .pshot figcaption b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.px .proof{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);overflow:hidden}
.px .proof figure{background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-right:1px solid var(--line)}
.px .proof figure img{display:block;width:100%;height:auto}
.px .proof .pbody{padding:26px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.px .proof .vs{display:flex;align-items:baseline;gap:14px;font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.03em}
.px .proof .vs .was{color:var(--red)}
.px .proof .vs .now{color:var(--green)}
.px .proof .vs i{font-style:normal;color:var(--brass);font-size:22px}
.px .proof p{font-size:15px;color:var(--text-2)}
/* inside a blog post the row keeps to the article's column, clear of the floating table of contents */
.px.px-narrow{padding:52px 0}
.px.px-narrow .wrap{max-width:788px}
.px.px-narrow h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.1}
.px.px-narrow .head{margin-bottom:24px}
.px details.more{margin-top:28px;border-top:1px solid var(--line)}
.px.px-ink details.more{border-top-color:var(--line-d)}
.px details.more>summary{cursor:pointer;font-weight:600;font-size:16px;padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.px details.more>summary::-webkit-details-marker{display:none}
.px details.more>summary::after{content:"+";font-weight:400;font-size:24px;line-height:1;color:var(--brass)}
.px.px-ink details.more>summary::after{color:var(--brass-2)}
.px details.more[open]>summary::after{content:"\2212"}
.px .tblwrap{overflow-x:auto;padding-bottom:8px}
.px table.tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.px table.tbl th,.px table.tbl td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.px.px-ink table.tbl th,.px.px-ink table.tbl td{border-bottom-color:var(--line-d)}
.px table.tbl th{font-weight:600;color:var(--mute);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.px.px-ink table.tbl th{color:var(--on-ink-2)}
.px table.tbl td:first-child{font-weight:600;white-space:nowrap}
.px .links{margin-top:28px;font-size:15px;color:var(--text-2)}
.px.px-ink .links{color:var(--on-ink-2)}
.px .links a{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:980px){
  .px .today,.px .crewgrid,.px .pgrid,.px .decide,.px .proof{grid-template-columns:1fr}
  .px .pgrid,.px .today{gap:36px}
  .px .proof figure{border-right:0;border-bottom:1px solid var(--line)}
  .px .wfacts,.px .plain,.px .annual,.px .war,.px .war.n6{grid-template-columns:1fr 1fr}
  .px .proc,.px .proc.four,.px .pay{grid-template-columns:1fr 1fr 1fr}
  .px .opts{grid-template-columns:1fr 1fr}
  .px .parts{grid-template-columns:1fr}
  .px .approw{grid-template-columns:1fr}
  .px .shotsrow.c4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .px{font-size:16px;padding:52px 0}
  .px .wrap{padding-left:16px;padding-right:16px}
  .px .wfacts,.px .inc,.px .mini,.px .plain,.px .pay,.px .annual,.px .war,.px .war.n6{grid-template-columns:1fr}
  .px .mini{grid-template-columns:repeat(3,1fr)}
  .px .opts,.px .parts,.px .shots,.px .shotsrow,.px .shotsrow.c4,.px .shotsrow.c2{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .px .opts::-webkit-scrollbar,.px .parts::-webkit-scrollbar,.px .shots::-webkit-scrollbar,.px .shotsrow::-webkit-scrollbar{display:none}
  .px .opt,.px .part{flex:0 0 86%;scroll-snap-align:start}
  .px .shots .phone{flex:0 0 76%;scroll-snap-align:start}
  .px .shotsrow .pshot{flex:0 0 82%;scroll-snap-align:start}
  .px .part{grid-template-columns:1fr}
  .px .part figure{aspect-ratio:4/3}
  .px .swipe{display:block}
  .px .m-hide{display:none}
  .px .proc,.px .proc.four{grid-template-columns:1fr 1fr}
  .px .dcol{padding:22px}
  .px .apps{margin-top:52px}
  .px .ledger .row.total b{font-size:34px}
}

/* two cards side by side (the bundles page, the EV page) */
.px .opts.two{grid-template-columns:1fr 1fr;max-width:940px;margin-left:auto;margin-right:auto}
@media (max-width:640px){.px .opts.two{display:flex}}