/* Card finder: issuer badge, issuer line and bank filter (loaded only on card pages). */
.pc-badge { flex: none; min-width: 46px; height: 30px; padding: 0 5px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: #57534E; direction: ltr; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.pc-badge-amex { background: #016FD0; }
.pc-badge-chase { background: #124A8E; }
.pc-badge-capone { background: #0B3A5B; }
.pc-badge-citi { background: #0F5AA8; }
.pc-badge-bofa { background: #B91C1C; }
.pc-badge-discover { background: #C2410C; }
.pc-badge-wf { background: #B3261E; }
.pc-badge-usb { background: #1E3A8A; }
.pc-badge-barclays { background: #0E7490; }
.pc-badge-synchrony { background: #3F3F46; }
.pc-issuer { display: block; font-size: .72rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 1.2; margin-bottom: .1rem; }
.pc-card-name strong { display: block; line-height: 1.25; }
.pc-bank { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .8rem; flex-wrap: wrap; }
.pc-bank label { font-weight: 650; }
.pc-bank select { flex: 1; min-width: 0; max-width: 100%; font: inherit; padding: .45rem .6rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.cc-sub .cc-issuer { font-weight: 700; color: var(--ink); }

/* Browse by type: chip row (scrolls sideways on phones), list/tiles toggle, tiles, More info page, logos. */
.pc-chips-h { margin: .6rem 0 .2rem; font-weight: 650; color: var(--muted); }
.pc-chips { display: flex; gap: .45rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .35rem .1rem .55rem; margin: .2rem -.1rem .4rem; }
.pc-chips::-webkit-scrollbar { display: none; }
.pc-chips-wrap { flex-wrap: wrap; overflow: visible; }
.pc-chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 650; font-size: .88rem; text-decoration: none; white-space: nowrap; }
.pc-chip:hover { border-color: var(--ink); }
.pc-chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pc-cico { flex: none; width: 16px; height: 16px; }
.pc-cico-frame { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-inline-start: -.3rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg, #f7f5ef); }
.pc-chip.is-on .pc-cico-frame { border-color: color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 12%, transparent); }
.pc-chip-n { font-size: .74rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--line); color: var(--ink); }
.pc-chip.is-on .pc-chip-n { background: rgba(255,255,255,.2); color: #fff; }
.pc-crumbs { margin: .2rem 0 .1rem; color: var(--muted); }
.pc-crumbs a { color: var(--brand-deep); text-decoration: none; font-weight: 600; }
.pc-intro { margin: .2rem 0 .6rem; font-size: 1rem; }
.pc-count { margin: .3rem 0 .5rem; }
.pc-chev { display: inline-block; }
[dir=rtl] .pc-chev { transform: scaleX(-1); }
.pc-tools { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .8rem; }
.pc-tools .pc-bank { margin: 0; flex: 1 1 14rem; }
.pc-view { display: inline-flex; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.pc-view-btn { padding: .4rem .8rem; min-height: 36px; display: inline-flex; align-items: center; font-weight: 650; font-size: .85rem; color: var(--ink); text-decoration: none; background: var(--surface); }
.pc-view-btn.is-on { background: var(--ink); color: #fff; }
.pc-more { margin-inline-start: auto; }
.pc-badge-logo { padding: 0 7px; }
.pc-badge-logo img { display: block; }
.pc-badge-logo:not(.pc-badge-full) img { width: 22px; height: 22px; }
.pc-badge-usaa { background: #12395B; }
/* Banks' own full-colour logos sit on a white chip, unchanged; the chip keeps them clear on any surface. */
.pc-badge.pc-badge-full { background: #fff; padding: 0 6px; box-shadow: inset 0 0 0 1px rgba(28,25,23,.14); }
.pc-badge-full img { max-width: 60px; max-height: 20px; }
/* Phones: the bank picker gets its own row so "All banks (238)" reads in full; List/Tiles goes under it. */
.pc-badge-robinhood { background: #1F2A1E; }
.pc-badge-goldman { background: #6E93C6; }
.pc-net { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.pc-sub .pc-net { margin-inline-start: .1rem; }
.pc-tiles { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (min-width: 560px) { .pc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pc-wrap .pc-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pc-tile { min-width: 0; }
.pc-tile-link { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: .25rem; padding: .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.pc-tile-link:hover { border-color: var(--ink); }
.pc-tile-top { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .2rem; }
.pc-tile-top .pc-net { width: 20px; height: 20px; }
.pc-tile-name { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.pc-tile-fee { color: var(--muted); }
.pc-tile-perk { color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.pc-tile .odds { margin-top: .15rem; font-size: .68rem; white-space: normal; }
.pc-tile-more { margin-top: auto; padding-top: .3rem; color: var(--brand-deep); font-weight: 650; }
.pc-detail { margin: .4rem 0 1rem; }
.pc-detail-h { font-size: 1.3rem; margin: 0; line-height: 1.25; }
.pc-detail .pc-terms { font-size: .92rem; margin-top: .4rem; }
.pc-detail .pc-terms div { padding: .3rem 0; border-bottom: 1px solid var(--line); grid-template-columns: 9rem minmax(0, 1fr); }
.pc-checked { margin: .6rem 0 0; }
.pc-also { margin: .4rem 0 1rem; }
.pc-also-h { font-size: 1rem; margin: 0 0 .2rem; }

/* Bank + Sort by + List/Tile icons (one plain GET form). Phones: Bank on its own row, Sort by + icons under it. */
.pc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; width: 100%; }
.pc-field { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.pc-field label { font-weight: 650; white-space: nowrap; }
.pc-field select { min-width: 0; max-width: 100%; font: inherit; padding: .45rem .6rem; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); }
.pc-field-bank { flex: 1 1 14rem; }
.pc-field-bank select { flex: 1; }
.pc-field-sort { flex: 1 1 18rem; }
.pc-field-sort select { flex: 1; }
.pc-js .pc-apply { display: none; }
.pc-field-sort .pc-view { margin-inline-start: auto; }
.pc-view-btn { padding: 0; width: 42px; justify-content: center; }
.pc-view-btn + .pc-view-btn { border-inline-start: 1.5px solid var(--line); }
.pc-view-btn:not(.is-on):hover { background: var(--line); }
.pc-view-btn:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -3px; }
.pc-ico { display: block; }
@media (max-width: 559px) { .pc-field-bank { flex-basis: 100%; } .pc-field-sort { flex-basis: 100%; } }

/* The answers banner (templates/cards/_answers.html): every answer as a small chip. Tap a chip to change it in place
   (a little panel of that question's choices), × removes it, Clear all empties it. Not sticky; it scrolls away. */
.pc-answers { position: relative; margin: .3rem 0 .7rem; padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pc-answers:focus { outline: none; }
.pc-answers.is-busy { opacity: .55; pointer-events: none; transition: opacity .1s; }
.pc-achips { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; min-width: 0; }
.pc-answers-h { font-weight: 700; color: var(--muted); margin-inline-end: .15rem; }
.pc-clear-li { margin-inline-start: auto; padding-inline: .2rem; }
.pc-clear { margin: 0; }
.pc-clear .pc-linkbtn { font-size: .8rem; font-weight: 650; white-space: nowrap; }
.pc-ach { display: inline-flex; align-items: center; max-width: 100%; min-height: 30px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font-size: .78rem; font-weight: 650; line-height: 1.3; }
.pc-ach-d { min-width: 0; }
.pc-ach-s { display: flex; align-items: center; gap: .3rem; min-height: 30px; box-sizing: border-box; padding-block: .2rem; padding-inline: .65rem .15rem; border-radius: 999px; cursor: pointer; list-style: none; user-select: none; }
.pc-ach-s::-webkit-details-marker { display: none; }
.pc-ach-s::marker { content: ""; }
.pc-ach-s:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; }
.pc-ach-f .pc-ach-s { cursor: default; }
.pc-ach-l { overflow-wrap: anywhere; }
.pc-ach-caret { flex: none; opacity: .65; transition: transform .15s; }
.pc-ach-d[open] .pc-ach-caret { transform: rotate(180deg); }
.pc-ach:has(.pc-ach-d[open]) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pc-ach-xf { display: flex; margin: 0; }
.pc-ach-x { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-inline-end: 1px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1; text-decoration: none; cursor: pointer; }
.pc-ach-x:hover { background: var(--line); color: var(--ink); }
.pc-ach-x:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: -2px; }
/* The change panel spans the banner, right under the chip (the chip's own box is too narrow on a phone). */
.pc-ach-pop { position: absolute; inset-inline: .45rem; z-index: 5; margin-top: .35rem; padding: .6rem .65rem .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(28,25,23,.18); }
.pc-ach-q { margin: 0 0 .45rem; font-weight: 700; color: var(--ink); }
.pc-ach-opts { display: flex; flex-wrap: wrap; gap: .35rem; }
.pc-ach-opt { font: inherit; font-size: .84rem; font-weight: 650; min-height: 36px; padding: .35rem .75rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.pc-ach-opt:hover { border-color: var(--ink); }
.pc-ach-opt.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pc-ach-add { display: inline-flex; align-items: center; gap: .25rem; min-height: 30px; box-sizing: border-box; padding: 0 .65rem; border-radius: 999px; border: 1.5px dashed #CFCBBE; color: var(--brand-deep); font-size: .78rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pc-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }

/* Sideways chip rows (card types on /cards/, categories in the app): without JavaScript they wrap onto more lines;
   with cards.js they scroll sideways (swipe, trackpad, keyboard focus) with a fade and a ‹ › button on any side
   that has more, so the hidden options are visibly there and one tap away. */
.pc-scroller { position: relative; }
.pc-scroller.is-on > .pc-chips, .pc-scroller.is-on > .cc-cats { margin-inline: 0; }
.pc-scroller > .pc-chips, .pc-scroller > .cc-cats { flex-wrap: wrap; overflow: visible; }
.pc-scroller.is-on > .pc-chips, .pc-scroller.is-on > .cc-cats { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 48px; }
/* With JavaScript on, start as the one-line scroller cards.js turns it into, so the row never jumps from wrapped to one line. */
@media (scripting: enabled) { .pc-scroller > .pc-chips, .pc-scroller > .cc-cats { margin-inline: 0; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 48px; } }
.pc-scroller::before, .pc-scroller::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .15s; }
.pc-scroller::before { inset-inline-start: 0; background: linear-gradient(to right, var(--bg) 35%, rgba(246,245,240,0)); }
.pc-scroller::after { inset-inline-end: 0; background: linear-gradient(to left, var(--bg) 35%, rgba(246,245,240,0)); }
[dir=rtl] .pc-scroller::before { background: linear-gradient(to left, var(--bg) 35%, rgba(246,245,240,0)); }
[dir=rtl] .pc-scroller::after { background: linear-gradient(to right, var(--bg) 35%, rgba(246,245,240,0)); }
.pc-scroller.can-start::before, .pc-scroller.can-end::after { opacity: 1; }
.pc-sc-btn { position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin-top: -17px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(28,25,23,.18); cursor: pointer; }
.pc-sc-btn:hover { border-color: var(--ink); }
.pc-sc-btn svg { display: block; }
[dir=rtl] .pc-sc-btn svg { transform: scaleX(-1); }
.pc-sc-start { inset-inline-start: 0; }
.pc-sc-end { inset-inline-end: 0; }
.pc-scroller.can-start > .pc-sc-start, .pc-scroller.can-end > .pc-sc-end { display: inline-flex; }

/* Questions: "Skip all" in the top row. */
.pc-skipall { margin-inline-start: .6rem; font-weight: 700; color: var(--brand-deep); text-decoration: none; white-space: nowrap; }

/* Card artwork (static/img/cards/): issuer's own art identifying the product; hidden when the card has no image. */
.pc-art { display: block; margin: 0 auto .45rem; border-radius: 8px; overflow: hidden; background: #f2f3f5; aspect-ratio: 8 / 5; }
.pc-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pc-card .pc-art, .pc-detail .pc-art { max-width: 320px; }
.pc-art-detail { margin-bottom: .8rem; }

/* Navy/gold band on the public card detail (approved direction) */
.pc-navy { background: linear-gradient(168deg, #0b2140, #0f2b52 60%, #1a3a68); border-radius: calc(var(--radius) - 6px) calc(var(--radius) - 6px) 0 0; margin: -.9rem -.9rem 0; padding: 1rem .9rem 2.8rem; }
.pc-navy .pc-detail-h { color: #fff; }
.pc-navy .pc-issuer { color: #dcbb6e; }
.pc-navy .pc-art { background: transparent; aspect-ratio: auto; }
.pc-navy .pc-art img { border-radius: 10px; outline: 1px solid rgba(220,187,110,.4); outline-offset: -1px; box-shadow: 0 12px 26px rgba(5,12,26,.45); }
.pc-detail .pc-terms { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: -2.2rem; position: relative; z-index: 2; padding-inline: .15rem; }
.pc-detail .pc-terms div { display: flex; flex-direction: column-reverse; align-items: center; justify-content: center; text-align: center; border: 1px solid var(--line); border-radius: 14px; padding: .75rem .6rem; background: #fff; box-shadow: 0 8px 22px rgba(15,43,82,.12); }
.pc-detail .pc-terms div.wide { grid-column: 1 / -1; flex-direction: column; align-items: stretch; text-align: start; padding: .75rem .9rem; }
.pc-detail .pc-terms div.wide dt { margin: 0 0 .25rem; }
.pc-detail .pc-terms div.wide dd { font-size: .95rem; font-weight: 550; line-height: 1.4; }
.pc-detail .pc-terms dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pc-detail .pc-terms dd { font-size: 1.05rem; font-weight: 750; }

/* ==== Listing declutter: navy header, one filter bar, thumbnail cards ==== */
/* Paint the full-width band separately: clipping the header also clips its open menu. */
.pc-wrap .pc-top { position: relative; z-index: 30; isolation: isolate; background: var(--navy); color: #fff; padding: .6rem 0; margin-bottom: .7rem; }
.pc-wrap .pc-top::before { content: ""; position: absolute; z-index: -1; inset-inline: -100vmax; top: -100vmax; bottom: 0; background: var(--navy); pointer-events: none; }
.pc-wrap .pc-top::after { content: ""; position: absolute; inset-inline: -100vmax; bottom: -3px; height: 3px; background: var(--gold); }
.pc-wrap .pc-top .brand, .pc-wrap .pc-top a { color: #fff; }
.pc-wrap .pc-top .land-nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; }
.pc-wrap .pc-top .land-menu-btn { color: #fff; }

.pc-bar { position: relative; display: flex; gap: .4rem; align-items: stretch; margin: 0 0 .5rem; }
.pc-fp { flex: .8 1 0; min-width: 0; }
.pc-fbtn { list-style: none; display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 .7rem; border: 1px solid var(--navy); border-radius: 6px; background: #fff; color: var(--navy); font-weight: 650; font-size: .92rem; cursor: pointer; box-sizing: border-box; }
.pc-fbtn::-webkit-details-marker { display: none; }
.pc-fbtn::marker { content: ""; }
.pc-fp[open] > .pc-fbtn { background: var(--navy); color: #fff; }
.pc-fn { min-width: 20px; padding: 0 .35rem; border-radius: 10px; background: var(--navy); color: #fff; font-size: .74rem; font-weight: 700; text-align: center; }
.pc-fp[open] .pc-fn { background: #fff; color: var(--navy); }
.pc-fpanel { position: absolute; inset-inline: 0; top: calc(100% + .3rem); z-index: 20; max-height: 70vh; overflow-y: auto; padding: .4rem .7rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 30px rgba(15,43,82,.18); }
.pc-fpanel .pc-chips-h { display: none; }
.pc-fpanel .pc-answers { margin: .2rem 0 .6rem; border: 0; padding: 0; background: none; }
.pc-fpanel .pc-chip { min-height: 34px; padding: .25rem .65rem; border-radius: 6px; border-width: 1px; font-size: .86rem; }
.pc-fpanel .pc-field-bank { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
.pc-fpanel .pc-field-bank select { width: 100%; border-radius: 6px; border-width: 1px; min-height: 42px; }
.pc-bar .pc-tools { flex: 1.3 1 0; min-width: 0; margin: 0; display: block; }
.pc-bar .pc-filter { width: 100%; margin: 0; }
.pc-bar .pc-field-sort { display: flex; align-items: stretch; gap: .35rem; width: 100%; }
.pc-bar .pc-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pc-bar .pc-field-sort select { flex: 1 1 auto; min-width: 0; width: 100%; min-height: 44px; border-radius: 6px; border-width: 1px; border-color: var(--navy); font-size: .9rem; padding: .3rem .4rem; }
.pc-bar .pc-view { flex: none; margin: 0; border-radius: 6px; border-width: 1px; }
.pc-bar .pc-view-btn { width: 34px; min-height: 42px; color: var(--muted); }
.pc-bar .pc-view-btn.is-on { background: #e9e6da; color: var(--navy); }
.pc-bar .pc-view-btn + .pc-view-btn { border-inline-start-width: 1px; }
.pc-asum { margin: 0 0 .5rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pc-wrap .pc-rtitle { font-size: 1.25rem; margin: .4rem 0 .1rem; }
.pc-wrap .pc-note { background: none; border: 0; border-radius: 0; padding: 0; margin: 0 0 .6rem; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.pc-wrap .pc-count { font-size: .78rem; margin: 0 0 .5rem; }

.pc-wrap .pc-list { gap: .6rem; }
.pc-wrap .pc-list .pc-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: .75rem; padding: .75rem; border-radius: 6px; box-shadow: none; }
.pc-wrap .pc-list .pc-card > * { grid-column: 1 / -1; min-width: 0; }
.pc-wrap .pc-list .pc-art { grid-column: 1; grid-row: 1; width: 96px; margin: 0; border-radius: 5px; aspect-ratio: 8 / 5; align-self: start; }
.pc-wrap .pc-list .pc-art + .pc-card-top { grid-column: 2; grid-row: 1; flex-wrap: wrap; align-content: flex-start; gap: 0; }
.pc-wrap .pc-list .pc-art + .pc-card-top .pc-badge { display: none; }
.pc-wrap .pc-list .pc-card-name { flex: 1 1 100%; }
.pc-wrap .pc-list .pc-card-name strong { font-size: 1.05rem; color: var(--navy); }
.pc-wrap .pc-list .pc-issuer { display: block; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc-wrap .pc-list .pc-card .odds { order: 3; flex: 1 1 100%; margin: .25rem 0 0; padding: 0; min-height: 0; border: 0; background: none; border-radius: 0; font-size: .78rem; font-weight: 700; white-space: normal; }
.pc-wrap .pc-card .odds::before { content: "● "; font-size: .6rem; vertical-align: 1px; }
.pc-wrap .pc-list .pc-perk { margin: .55rem 0 .45rem; font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--green); }
.pc-wrap .pc-list .pc-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .6rem; margin: 0 0 .6rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.pc-wrap .pc-list .pc-terms > div { order: 1; display: flex; flex-direction: column-reverse; gap: .05rem; grid-template-columns: none; }
.pc-wrap .pc-list .pc-terms > .pc-t-reg { order: 2; }
.pc-wrap .pc-list .pc-terms > .pc-t-intro { order: 3; grid-column: 1 / -1; }
.pc-wrap .pc-list .pc-terms > .pc-t-welcome { order: 4; grid-column: 1 / -1; }
.pc-wrap .pc-list .pc-terms dt { font-size: .7rem; color: var(--muted); }
.pc-wrap .pc-list .pc-terms dd { font-weight: 650; font-size: .84rem; color: var(--navy); }
.pc-wrap .pc-list .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.pc-wrap .pc-list .btn-row .btn { border-radius: 6px; }
.pc-wrap .pc-list .btn-row .btn-ink { flex: 1 1 8rem; justify-content: center; background: var(--navy); border-color: var(--navy); color: #fff; }
.pc-wrap .pc-list .btn-row .pc-more { flex: 1 1 7rem; justify-content: center; border: 1px solid var(--navy); color: var(--navy); background: #fff; }
.pc-wrap .pc-list .btn-row a.btn:not(.btn-ink):not(.pc-more) { flex: 1 0 100%; order: 3; border: 0; background: none; padding: .1rem 0; min-height: 0; justify-content: flex-start; text-decoration: underline; font-weight: 600; font-size: .85rem; }
@media (min-width: 700px) { .pc-wrap .pc-fpanel { inset-inline-end: auto; width: 100%; } }
html:has(body.pc) { overflow-x: clip; }
body.pc { overflow-x: clip; }

/* signed-in card browser: same Filters panel and compact rows */
.cc-filters2 { margin: 0 0 .6rem; }
.cc-filters2 input[type=search] { width: 100%; min-height: 44px; margin-bottom: .5rem; border-radius: 6px; }
.pc-fpanel-form { display: grid; gap: .25rem; padding: .6rem .7rem .8rem; }
.pc-fpanel-form label { font-weight: 650; color: var(--muted); margin-top: .35rem; }
.pc-fpanel-form select { width: 100%; min-height: 42px; border-radius: 6px; border-width: 1px; }
.cc-filters2 .pc-bar .pc-field-sort { display: flex; width: 100%; }
.cc-filters2 .pc-field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cc-filters2 .pc-field-sort select { flex: 1; min-width: 0; width: 100%; min-height: 44px; border-radius: 6px; border-width: 1px; border-color: var(--navy); font-size: .9rem; }

/* Shared desktop width for card browsing. Individual card details keep their
   original reading column; phone/tablet rules stay unchanged below 1000px.
   The in-place finder has its own focused width inside the landing page. */
@media (min-width: 1000px) {
  .pc-wrap:not(.pc-wrap-detail), .container.cc-wrap { max-width: 1100px; }
  .pc-wrap:not(.pc-wrap-detail) .pc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pc-wrap:not(.pc-wrap-detail) .pc-list { max-width: 860px; margin-inline: auto; }
}
@media (min-width: 1400px) {
  .pc-wrap:not(.pc-wrap-detail), .container.cc-wrap { max-width: 1320px; }
}
/* Card art fills the tile and the picture stays centred inside it: without a definite width the
   aspect-ratio panel shrank to each image's own proportions on wide tiles, so panels came out
   different widths and looked off-centre. object-fit: contain centres the artwork; no cropping. */
.pc-tiles .pc-art { width: 100%; }

/* In-place questions (templates/cards/_finder.html, static/js/cards.js): a panel on the page itself; on phones the
   script makes it a bottom sheet (a modal dialog) above the chat button and the compare tray. */
.pc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pc-finder { max-width: 560px; margin: 0 auto 1.4rem; padding: .35rem 1rem 1rem; scroll-margin-top: 1rem; }
.pc-finder[hidden], .pc-fstep[hidden] { display: none; }
.pc-finder:focus, .pc-finder .pc-title:focus { outline: none; }
.pc-finder .pc-q { max-width: none; }
.pc-finder .pc-nav { gap: .5rem; margin: 0 0 .7rem; }
.pc-finder .pc-skipall { margin-inline-start: .2rem; }
.pc-finder .pc-opts { margin: .8rem 0; }
.pc-finder-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 1.6rem; line-height: 1; color: var(--muted); text-decoration: none; margin-inline-end: -.5rem; }
.pc-finder-x:hover { background: var(--line); color: var(--ink); }
.pc-hero.is-finding { padding-bottom: 1.2rem; }
.pc-hero.is-finding .btn-row { display: none; }
.pc-fstep.is-busy .pc-opt, .pc-fstep.is-busy .pc-skip { pointer-events: none; }
.pc-fstep.is-busy .pc-opt.is-on { opacity: .75; }
.pc-fstep.pc-in-fwd { animation: pc-in-fwd .22s ease-out; }
.pc-fstep.pc-in-back { animation: pc-in-back .22s ease-out; }
[dir=rtl] .pc-fstep.pc-in-fwd { animation-name: pc-in-back; }
[dir=rtl] .pc-fstep.pc-in-back { animation-name: pc-in-fwd; }
@keyframes pc-in-fwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes pc-in-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.pc-finder-bg { position: fixed; inset: 0; z-index: 44; background: rgba(15,43,82,.45); }
.pc-finder.is-sheet { position: fixed; z-index: 45; inset-inline: 0; bottom: 0; max-width: none; margin: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: var(--radius) var(--radius) 0 0; padding: .35rem 1rem calc(1rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(15,43,82,.2); animation: pc-sheet-up .24s ease-out; }
@keyframes pc-sheet-up { from { transform: translateY(48px); opacity: .5; } to { transform: none; opacity: 1; } }
html.pc-sheet-open, html.pc-sheet-open body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .pc-fstep.pc-in-fwd, .pc-fstep.pc-in-back, .pc-finder.is-sheet { animation: none; } }

/* Category chips sit above the bar (not inside Filters); Bank and Sort are two compact dropdowns side by side. */
.pc-scroller .pc-chip { min-height: 38px; padding: .25rem .65rem; border-radius: 6px; border-width: 1px; font-size: .86rem; }
.pc-bar { flex-wrap: wrap; align-items: stretch; }
.pc-bar .pc-fp { flex: 0 0 auto; min-width: 7.5rem; }
.pc-bar .pc-tools { flex: 1 1 22rem; max-width: 38rem; }
.pc-bar .pc-selects { display: flex; align-items: stretch; gap: .35rem; width: 100%; }
.pc-bar .pc-selects .pc-field { flex: 1 1 0; min-width: 0; margin: 0; }
.pc-bar .pc-selects .pc-field select { width: 100%; min-width: 0; min-height: 44px; border-radius: 6px; border-width: 1px; border-color: var(--navy); font-size: .9rem; padding: .3rem .4rem; text-overflow: ellipsis; }
.pc-bar .pc-selects .pc-view { flex: none; margin: 0; }
@media (max-width: 559px) {
  /* phone: Filters + layout toggle on the first row, Bank and Sort half-width each on the second */
  .pc-bar { display: grid; grid-template-columns: 1.1fr 1fr; gap: .4rem; }
  .pc-bar .pc-tools, .pc-bar .pc-filter, .pc-bar .pc-selects { display: contents; }
  .pc-bar .pc-fp { grid-column: 1; grid-row: 1; min-width: 0; }
  .pc-bar .pc-view { grid-column: 2; grid-row: 1; justify-self: end; }
  .pc-bar .pc-selects .pc-field-bank { grid-column: 1; grid-row: 2; }
  .pc-bar .pc-selects .pc-field-sort { grid-column: 2; grid-row: 2; }
  .pc-bar .pc-selects .pc-apply { grid-column: 1 / -1; grid-row: 3; }
  /* no answers yet: no Filters button. Bank and Sort keep half width each; the layout toggle gets its own row */
  .pc-bar-nofp .pc-selects .pc-field-bank { grid-column: 1; grid-row: 1; }
  .pc-bar-nofp .pc-selects .pc-field-sort { grid-column: 2; grid-row: 1; }
  .pc-bar-nofp .pc-view { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .pc-bar-nofp .pc-selects .pc-apply { grid-row: 3; }
}

/* Chip icons in the site's navy/gold palette: navy icon in a white frame with a gold edge; the selected chip turns navy
   with a deep-navy frame and a gold icon. */
.pc-scroller .pc-cico-frame { border-color: var(--gold); background: #fff; color: var(--navy); }
.pc-scroller .pc-chip:hover { border-color: var(--navy); }
.pc-scroller .pc-chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.pc-scroller .pc-chip.is-on .pc-cico-frame { background: var(--navy-deep); border-color: var(--gold); color: var(--gold); }
.pc-scroller .pc-chip.is-on .pc-chip-n { background: rgba(255,255,255,.16); color: #fff; }

/* Category tiles: icon above the label, taller than the Filters / Bank / Sort controls so they read as categories. */
.pc-scroller .pc-chip { flex: 0 0 6.1rem; flex-direction: column; justify-content: flex-start; align-items: center; gap: .35rem; min-height: 6.6rem; padding: .6rem .35rem .5rem; border-radius: 8px; text-align: center; white-space: normal; line-height: 1.15; font-size: .8rem; }
.pc-scroller .pc-chip .pc-chip-t { display: block; text-wrap: balance; }
.pc-scroller .pc-cico-frame { width: 40px; height: 40px; margin: 0; border-radius: 10px; }
.pc-scroller .pc-cico { width: 22px; height: 22px; }
.pc-scroller .pc-chip-n { margin-top: auto; padding: 0; background: none; font-size: .72rem; font-weight: 600; color: var(--muted); }
.pc-scroller .pc-chip.is-on { box-shadow: inset 0 -3px 0 var(--gold); }
.pc-scroller .pc-chip.is-on .pc-chip-n { background: none; color: rgba(255,255,255,.78); }
.pc-scroller .pc-chip { gap: .8rem; min-height: 7.2rem; font-weight: 400; }
.pc-scroller .pc-chip .pc-chip-t { font-weight: 400; }
.pc-scroller .pc-chip-n { font-weight: 500; }

/* Advertiser disclosure popup (cards pages): link opens a small panel in the site's navy/gold style. */
.pc-disc { position: relative; display: inline; }
.pc-disc-btn { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pc-disc.is-open .pc-disc-btn { text-decoration-color: var(--gold); }
.pc-disc-pop { position: absolute; z-index: 40; top: calc(100% + 12px); inset-inline-start: 0; display: block; width: min(24rem, 86vw); padding: 1rem 1.1rem 1rem; background: #fff; color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--gold); border-radius: 6px; box-shadow: 0 10px 28px rgba(15,43,82,.18); font-size: .88rem; line-height: 1.5; font-weight: 400; text-align: start; }
.pc-disc-pop[hidden] { display: none; }
.pc-disc-pop::before { content: ""; position: absolute; top: -9px; inset-inline-start: 1.4rem; width: 14px; height: 14px; background: #fff; border-top: 3px solid var(--gold); border-inline-start: 1px solid var(--line); transform: rotate(45deg); }
.pc-disc-h { display: block; margin: 0 1.6rem .55rem 0; color: var(--navy); font-size: 1.1rem; line-height: 1.25; }
[dir=rtl] .pc-disc-h { margin: 0 0 .55rem 1.6rem; }
.pc-disc-p { display: block; margin: 0 0 .6rem; color: var(--ink); }
.pc-disc-more { display: inline-block; margin-top: .1rem; color: var(--navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pc-disc-x { position: absolute; top: .45rem; inset-inline-end: .55rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--navy); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pc-disc-x:hover { background: var(--bg); }
@media (max-width: 559px) {
  .pc-disc-pop { position: fixed; inset-inline: 12px; bottom: 12px; top: auto; width: auto; max-height: 80vh; overflow: auto; }
  .pc-disc-pop::before { display: none; }
}
[dir=rtl] .pc-disc-arr { display: inline-block; transform: scaleX(-1); }