/* The Synap: the phone lists, /upcoming-phones/, /latest-phones/ and /price-drops/. Prefix pl-.
   Built on the page deck (home.css .pg-*): breadcrumbs on the black, then one card (.pg-sheet) holding the title
   block and the list. The card already sits on the one shared width, so .pl adds no side padding of its own.
   The same paper, pills and controls as /phones/; the next launch borrows the phone page's black launch hero.
   No glass: nothing here sits over a photo or the gradient. Light by default; it follows a dark system setting
   through the style.css tokens. */

.pl {
  --pl-paper: #fff; --pl-line: rgba(0,0,0,.08); --pl-line-2: rgba(0,0,0,.16); --pl-mute: #646464; --pl-soft: rgba(0,0,0,.72);
  --pl-ph: rgba(0,0,0,.05); --pl-hover: rgba(0,0,0,.04); --pl-tag: rgba(0,0,0,.78); --pl-tag-line: rgba(0,0,0,.18);
  --pl-lift: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05);
  --pl-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
  font-size: var(--page-base);
  overflow-x: clip;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pl { --pl-paper: #0e0e0e; --pl-line: rgba(255,255,255,.1); --pl-line-2: rgba(255,255,255,.2); --pl-mute: #a7a7a7; --pl-soft: rgba(255,255,255,.75); --pl-ph: rgba(255,255,255,.06); --pl-hover: rgba(255,255,255,.06); --pl-tag: rgba(255,255,255,.85); --pl-tag-line: rgba(255,255,255,.24); --pl-lift: 0 0 0 0 transparent; }
  :root:not([data-theme="light"]) .pl-next { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
}
.pl [hidden] { display: none !important; }
.pl a { color: inherit; text-decoration: none; }
.pl :focus-visible { outline-color: var(--ink); }

/* ---------- the title block (page-head.php) and labels ---------- */
.pl-head .pg-lede { max-width: 52ch; }
.pl-label { display: block; margin: 0; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-mute); }

/* sections */
.pl-sec + .pl-sec { margin-top: 3.4em; }
.pl-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin-bottom: 1.1em; }
.pl-sec__n { font-size: var(--t-meta); color: var(--pl-mute); white-space: nowrap; }

/* the one small tag: outlined, or solid for the strongest state (as on the homepage and the phone page) */
.pl-tag { display: inline-flex; align-items: center; padding: .25em .75em; border-radius: 999px; font-size: var(--t-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--pl-tag); box-shadow: inset 0 0 0 1px var(--pl-tag-line); }
.pl-tag.is-solid { background: var(--ink); color: var(--bg); box-shadow: none; }

/* ---------- buttons: the homepage pill on paper, Remind me with its bell ---------- */
.pl-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5em; max-width: 100%; height: 3.125em; padding: 0 .1875em 0 1.5em; border: 0; border-radius: 999px; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line), var(--pl-lift); color: var(--ink); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color .25s ease; }
.pl-pill > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-ui); }
.pl-pill .sy-go { background: var(--ink); color: var(--bg); }
button.pl-pill:hover .sy-go, button.pl-pill:focus-visible .sy-go { background: #E85002; color: #fff; }
.pl-pill:hover .sy-go svg, .pl-pill:focus-visible .sy-go svg { transform: rotate(45deg); }
.pl-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.pl-pill--dark { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); color: #F9F9F9; }
.pl-pill--dark .sy-go { background: #F9F9F9; color: #000; }
.pl-pill--dark:hover, .pl-pill--dark:focus-visible { background: rgba(255,255,255,.08); }
.pl-pill--dark:focus-visible { outline-color: #fff; }

.pl-remind { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 1.2em; flex: none; height: 3.125em; padding: 0 .1875em 0 1.35em; border: 0; border-radius: 999px; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line-2); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .25s ease; }
.pl-remind > span:first-child { font-size: var(--t-ui); white-space: nowrap; }
.pl-remind__i { display: inline-grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--ink); color: var(--bg); transition: background-color .25s ease, color .25s ease; }
.pl-remind__i svg { width: 1.1em; height: 1.1em; }
.pl-remind:hover .pl-remind__i, .pl-remind:focus-visible .pl-remind__i { background: #E85002; color: #fff; }
.pl-remind:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 999px; }
.pl-remind--dark { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); color: #F9F9F9; }
.pl-remind--dark .pl-remind__i { background: #F9F9F9; color: #000; }
.pl-remind--dark:hover, .pl-remind--dark:focus-visible { background: rgba(255,255,255,.08); }
.pl-remind--dark:focus-visible { outline-color: #fff; }

/* ---------- the next launch: the phone page's black launch hero, as one panel ---------- */
.pl-next { display: grid; grid-template-columns: minmax(0, 25em) minmax(0, 1fr); gap: 3.4em; align-items: center; margin: 0 0 4.2em; padding: .375em 3.4em .375em .375em; border-radius: 1.75em; background: #000; color: #F9F9F9; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.pl-next :focus-visible { outline-color: #fff; }
.pl-next__media { min-width: 0; }
.pl-next__ph { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: calc(1.75em - .375em); background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); }
.pl-next__ph > img { position: absolute; inset: 0; }
.pl-next__ph.is-product { background: #fff; }
.pl-next__body { min-width: 0; padding: 2.2em 0; }
.pl-next__label { display: flex; align-items: center; gap: .7em; margin: 0; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.pl-next__dot { flex: none; width: .6em; height: .6em; border-radius: 50%; background: #F16001; box-shadow: 0 0 0 .3em rgba(241,96,1,.22); animation: sy-live 2.4s ease-in-out infinite; }
.pl-next__brand { display: block; margin-top: 1.8em; font-size: var(--t-label); font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.62); }
.pl-next__name { margin: .3em 0 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-hero) * .86); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: break-word; }
.pl-next__link { color: #F9F9F9; transition: color .25s ease; }
.pl-next__link:hover, .pl-next__link:focus-visible { color: #F16001; }
.pl-next__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: .2em; }
.pl-next__status { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin: 1.1em 0 0; font-size: var(--t-meta); color: rgba(255,255,255,.72); }
.pl-next .pl-tag { color: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pl-next .pl-tag.is-solid { background: #F9F9F9; color: #000; box-shadow: none; }
.pl-next__note { margin: .7em 0 0; font-size: var(--t-meta); font-style: italic; color: rgba(255,255,255,.62); }
.pl-next__specs { display: flex; flex-wrap: wrap; gap: .45em; margin: 1.3em 0 0; padding: 0; list-style: none; }
.pl-next__specs li { padding: .4em .85em; border-radius: 999px; background: rgba(255,255,255,.08); font-size: var(--t-meta); font-weight: 500; line-height: 1.3; color: #F9F9F9; }
.pl-next__launch { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2em 2em; margin: 2em 0 0; padding: 1.2em 1.25em 1.2em 1.4em; border-radius: 1.4em; background: rgba(255,255,255,.07); }
.pl-next__k { display: block; font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.pl-cd { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin-top: .55em; font-variant-numeric: tabular-nums; }
.pl-cd__u { display: inline-flex; align-items: baseline; gap: .3em; }
.pl-cd__u b { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * 1.1); line-height: 1; letter-spacing: -0.04em; color: #F9F9F9; }
.pl-cd__u i { font-style: normal; font-size: var(--t-meta); color: rgba(255,255,255,.7); }
.pl-next__past { margin: .5em 0 0; max-width: 26em; font-size: var(--t-lead); line-height: 1.4; color: #e6e6e6; }
.pl-next__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2em 2em; margin-top: 1.8em; }
.pl-next__price { margin: .4em 0 0; font-family: var(--display); font-weight: 500; font-size: var(--t-big); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: #F9F9F9; }
.pl-next__none { margin: .5em 0 0; font-size: var(--t-ui); color: rgba(255,255,255,.78); }

/* wide screens: the name on the left, the countdown and the price stacked on the right, so the panel never stretches thin */
@media (min-width: 1181px) {
  .pl-next__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27em); grid-template-areas: "head launch" "head foot"; column-gap: 3em; align-items: center; }
  .pl-next__head { grid-area: head; }
  .pl-next__launch { grid-area: launch; align-self: end; margin-top: 0; }
  .pl-next__foot { grid-area: foot; align-self: start; }
  .pl-next__body > .pl-next__foot:nth-child(2) { grid-row: 1 / span 2; align-self: center; }
}

/* ---------- the launch calendar ---------- */
.pl-cal__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em 2em; margin-bottom: 1.6em; }
.pl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; max-width: 100%; }
/* how sure: the catalogue's status switch, as toggle buttons */
.pl-seg { display: inline-flex; align-items: stretch; height: 3.125em; max-width: 100%; padding: .25em; border-radius: 999px; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line), var(--pl-lift); overflow-x: auto; scrollbar-width: none; }
.pl-seg::-webkit-scrollbar { display: none; }
.pl-seg__o { flex: none; display: inline-flex; align-items: center; padding: 0 1.25em; border: 0; border-radius: 999px; background: transparent; color: var(--pl-soft); font: inherit; font-size: var(--t-ui); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
.pl-seg__o:hover { color: var(--ink); }
.pl-seg__o[aria-pressed="true"] { background: #C8470A; color: #F9F9F9; box-shadow: 0 2px 10px rgba(200,71,10,.28); }
.pl-seg__o:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* brand: a native select dressed as the catalogue's dropdown pill */
.pl-select { position: relative; display: inline-flex; align-items: center; height: 3.125em; max-width: 100%; }
.pl-select select { height: 100%; max-width: 100%; padding: 0 2.7em 0 1.35em; border: 0; border-radius: 999px; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line), var(--pl-lift); color: var(--ink); font: inherit; font-size: var(--t-ui); font-weight: 500; cursor: pointer; -webkit-appearance: none; appearance: none; transition: color .25s ease; }
.pl-select select:hover { color: var(--acc-text); }
.pl-select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pl-select .sy-chev { position: absolute; right: 1.1em; width: .8em; height: .8em; pointer-events: none; color: var(--ink); }

.pl-group + .pl-group { margin-top: 2.6em; }
.pl-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; margin: 0 0 .9em; padding: 0 .3em; }
.pl-group__t { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.pl-group__n { font-size: var(--t-meta); color: var(--pl-mute); white-space: nowrap; }

/* rows on one paper panel per month, hairlines between them */
.pl-rows { margin: 0; padding: .25em 1.6em; list-style: none; border-radius: 1.75em; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line), var(--pl-lift); }
.pl-row, .pl-drow { position: relative; display: grid; align-items: center; gap: .6em 1.4em; padding: 1.15em 0; color: var(--ink); }
/* a hairline above every row that follows a visible one (the filter hides rows) */
.pl-row:not([hidden]) ~ .pl-row, .pl-drow + .pl-drow { border-top: 1px solid var(--pl-line); }
/* fixed price and action columns, so prices line up down the month */
.pl-row { grid-template-columns: 3.4em 5.4em minmax(0, 1fr) 7.5em 13em; grid-template-areas: "date ph body price act"; }

.pl-date { grid-area: date; display: flex; flex-direction: column; line-height: 1; }
.pl-date b { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * .8); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pl-date > span { margin-top: .35em; font-size: var(--t-meta); font-weight: 600; color: var(--pl-mute); }
.pl-date.is-loose b { font-size: calc(var(--t-big) * .6); letter-spacing: -0.03em; }
.pl-row.is-next .pl-date b { color: var(--acc-text); }

.pl-row__ph { grid-area: ph; position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 1.1em; background: var(--pl-ph); color: var(--pl-mute); }
.pl-row__ph > img { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pl-noimg { width: 26%; height: auto; opacity: .45; }
.pl-row__body { grid-area: body; min-width: 0; }
.pl-row__brand { display: block; font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .02em; color: var(--pl-mute); }
.pl-row__name { margin: .35em 0 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.15; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pl-row__link { transition: color .25s ease; }
.pl-row__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: .9em; }
.pl-row__link:focus-visible { outline: 0; }
.pl-row__when { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .75em; margin: .6em 0 0; font-size: var(--t-meta); line-height: 1.35; color: var(--pl-soft); font-variant-numeric: tabular-nums; }
/* the date is in the date block on wide screens; still read out, and shown on phones where the block goes */
.pl-when__d { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-row__count { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* a live countdown: the small orange dot says it is ticking */
.pl-row__count.is-live::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .45em; border-radius: 50%; background: #E85002; vertical-align: .08em; }
.pl-row__specs { display: flex; flex-wrap: wrap; margin: .45em 0 0; padding: 0; list-style: none; font-size: var(--t-meta); line-height: 1.4; color: var(--pl-mute); }
.pl-row__specs li { white-space: nowrap; }
.pl-row__specs li + li::before { content: "·"; margin: 0 .5em; }
.pl-row__price { grid-area: price; margin: 0; text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pl-row__pre { display: block; font-size: var(--t-meta); color: var(--pl-mute); }
.pl-row__price b { font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; white-space: nowrap; }
.pl-row__act { grid-area: act; display: flex; align-items: center; justify-content: flex-end; gap: .8em; }
.pl-rows .sy-go { width: 2.5em; height: 2.5em; background: var(--ink); color: var(--bg); }
.pl-rows .pl-remind { height: 2.75em; gap: .9em; padding-left: 1.15em; }
.pl-rows .pl-remind__i { width: 2.35em; height: 2.35em; }

/* hover and keyboard focus on a row: the name turns orange, the photo eases in, the arrow fills orange
   (not while the pointer is on Remind me or the matchup link, which answer for themselves) */
.pl-row:hover:not(:has(.pl-remind:hover, .pl-vs:hover)) .pl-row__link, .pl-drow:hover:not(:has(.pl-vs:hover)) .pl-row__link,
.pl-row:has(.pl-row__link:focus-visible) .pl-row__link, .pl-drow:has(.pl-row__link:focus-visible) .pl-row__link { color: var(--acc-text); }
.pl-row:hover:not(:has(.pl-remind:hover)) .pl-row__ph img, .pl-drow:hover:not(:has(.pl-vs:hover)) .pl-row__ph img,
.pl-row:has(.pl-row__link:focus-visible) .pl-row__ph img, .pl-drow:has(.pl-row__link:focus-visible) .pl-row__ph img { transform: scale(1.04); }
.pl-row:hover:not(:has(.pl-remind:hover)) .pl-row__act > .sy-go, .pl-drow:hover:not(:has(.pl-vs:hover)) .pl-row__act > .sy-go,
.pl-row:has(.pl-row__link:focus-visible) .pl-row__act > .sy-go, .pl-drow:has(.pl-row__link:focus-visible) .pl-row__act > .sy-go { background: #E85002; color: #fff; }
.pl-row:hover:not(:has(.pl-remind:hover)) .pl-row__act > .sy-go svg, .pl-drow:hover:not(:has(.pl-vs:hover)) .pl-row__act > .sy-go svg,
.pl-row:has(.pl-row__link:focus-visible) .pl-row__act > .sy-go svg, .pl-drow:has(.pl-row__link:focus-visible) .pl-row__act > .sy-go svg { transform: rotate(45deg); }
.pl-row:has(.pl-row__link:focus-visible), .pl-drow:has(.pl-row__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: .9em; }

/* nothing matches the filter */
.pl-none { padding: 3em 1.5em; border-radius: 1.75em; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line); text-align: center; }
.pl-none__t { margin: 0 0 1.3em; font-family: var(--display); font-weight: 500; font-size: var(--pl-h2); line-height: 1.1; letter-spacing: -0.03em; }

/* ---------- price drops ---------- */
.pl-drow { grid-template-columns: 2.4em 5.4em minmax(0, 1fr) auto 15.5em; grid-template-areas: "n ph body pay act"; }
.pl-drow__n { grid-area: n; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * .62); letter-spacing: -0.04em; color: var(--pl-mute); font-variant-numeric: tabular-nums; }
.pl-drow__when { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .75em; margin: .6em 0 0; font-size: var(--t-meta); line-height: 1.35; color: var(--pl-soft); }
.pl-drow__pay { grid-area: pay; display: grid; grid-template-columns: 8em 10em; align-items: center; gap: 1.6em; }
.pl-drow__money { margin: 0; text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pl-drow__now { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; white-space: nowrap; }
.pl-drow__was { display: block; margin-top: .25em; font-size: var(--t-meta); color: var(--pl-mute); white-space: nowrap; }
.pl-drow__was s { text-decoration-thickness: 1px; }
.pl-drow__drop { display: flex; flex-direction: column; align-items: flex-start; gap: .35em; margin: 0; }
/* the drop, the most useful number here: orange on a soft orange pill (4.8:1), with the market-style down arrow */
.pl-drop { display: inline-flex; align-items: center; gap: .4em; padding: .3em .8em .3em .65em; border-radius: 999px; background: var(--acc-soft); color: var(--acc-text); font-size: var(--t-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-drow__pct { padding-left: .25em; font-size: var(--t-meta); color: var(--pl-mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-vs { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .35em; height: 2.75em; max-width: 14em; padding: 0 1.1em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pl-line-2); font-size: var(--t-meta); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s ease; }
.pl-vs__k { font-weight: 500; color: var(--pl-mute); }
.pl-vs:hover, .pl-vs:focus-visible { color: var(--acc-text); }
.pl-vs:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }


/* ---------- latest: the newest three lead, the rest in the shared card grid ---------- */
.pl-lead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.pl-lead.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 62em; }
.pl-lead.is-1 { grid-template-columns: minmax(0, 30em); }
.pl-lead > li, .pl-grid > li { display: flex; min-width: 0; }
.pl-lead > li > .ct-card, .pl-grid > li > .ct-card { flex: 1; }
.pl-lead .ct-card__ph { aspect-ratio: 4 / 3; }
.pl-lead .ct-card__body { padding: 1.2em 1.1em .85em; }
.pl-lead .ct-card__name { font-size: calc(var(--t-card-title) * 1.3); }
.pl-grid { --pl-cols: 4; display: grid; grid-template-columns: repeat(var(--pl-cols), minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
/* the launch date on a card: a quiet line under the name, not a tag */
.pl .ct-card .ct-card__note { margin-top: .5em; padding: 0; border-radius: 0; box-shadow: none; font-weight: 600; color: var(--pl-soft); }

/* ---------- the end of the page: note, links across, the page's own words ---------- */
.pl-note { max-width: 60em; margin: 3.5em 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--pl-mute); }
.pl-more { margin-top: 4.5em; }
.pl-more__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr)); gap: 1em; margin: 1.2em 0 0; padding: 0; list-style: none; }
.pl-more__list > li { display: flex; min-width: 0; }
.pl-tile { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 1.2em; min-width: 0; padding: 1.2em 1em 1.2em 1.4em; border-radius: 1.75em; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line), var(--pl-lift); }
.pl-tile__body { min-width: 0; }
.pl-tile__t { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; transition: color .25s ease; }
.pl-tile__d { display: block; margin-top: .4em; font-size: var(--t-meta); line-height: 1.4; color: var(--pl-mute); }
.pl-tile .sy-go { width: 2.5em; height: 2.5em; background: var(--ink); color: var(--bg); }
.pl-tile:hover .pl-tile__t, .pl-tile:focus-visible .pl-tile__t { color: var(--acc-text); }
.pl-tile:hover .sy-go svg, .pl-tile:focus-visible .sy-go svg { transform: rotate(45deg); }
.pl-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 1.75em; }
.pl-prose { max-width: 44em; margin: 3.5em 0 0; font-size: var(--fs-body); color: var(--pl-soft); }
.pl-prose a { color: var(--acc-text); }

/* ---------- the empty state: a calm note over a faint row of empty cards ---------- */
.pl-empty { position: relative; padding-bottom: 1em; }
.pl-ghost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 40%, transparent 82%); mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 40%, transparent 82%); }
.pl-ghost__card { display: flex; flex-direction: column; gap: .7em; padding: .375em .375em 2.4em; border-radius: 1.75em; background: var(--pl-paper); box-shadow: inset 0 0 0 1px var(--pl-line); }
.pl-ghost__card i { display: block; aspect-ratio: 1 / 1; margin-bottom: .5em; border-radius: calc(1.75em - .375em); background: var(--pl-ph); }
.pl-ghost__card b { display: block; width: 38%; height: .65em; margin: 0 .85em; border-radius: 999px; background: var(--pl-ph); }
.pl-ghost__card b + b { width: 68%; height: .9em; }
.pl-empty__msg { position: relative; max-width: 36em; margin: -9em auto 0; text-align: center; }
.pl-empty__t { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--pl-h2); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.pl-empty__d { margin: .8em auto 0; max-width: 32em; font-size: var(--t-lead); line-height: 1.45; color: var(--pl-soft); text-wrap: pretty; }
.pl-empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1.8em; }
.pl-empty + .pl-more { margin-top: 3.5em; }

/* ---------- responsive: four across on the shared width, five only on very wide screens ---------- */
.pl-ghost__card:nth-child(n+5) { display: none; }
@media (min-width: 1800px) {
  .pl-grid { --pl-cols: 5; }
  .pl-ghost { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pl-ghost__card:nth-child(5) { display: flex; }
}
@media (max-width: 1300px) {
  .pl-next { grid-template-columns: minmax(0, 22em) minmax(0, 1fr); gap: 2.6em; padding-right: 2.6em; }
}
/* narrower desktops and tablets: price (and the drop) move under the name */
@media (max-width: 1180px) {
  .pl-row { grid-template-columns: 3.2em 5em minmax(0, 1fr) auto; grid-template-areas: "date ph body act" "date ph price act"; }
  .pl-row__price { justify-self: start; }
  .pl-row__price { text-align: left; }
  .pl-row__pre { display: inline; margin-right: .3em; }
  .pl-drow { grid-template-columns: 2.2em 5em minmax(0, 1fr) auto; grid-template-areas: "n ph body act" "n ph pay act"; }
  .pl-drow__pay { grid-template-columns: auto auto; justify-content: start; gap: 1.6em; }
  .pl-drow__money { text-align: left; }
  .pl-drow__drop { flex-direction: row; align-items: center; gap: .6em; }
}
@media (max-width: 980px) {
  .pl { font-size: 15px; }
  .pl-grid { --pl-cols: 3; gap: .8em; }
  .pl-lead { gap: .8em; }
  .pl-ghost { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8em; }
  .pl-ghost__card:nth-child(n+4) { display: none; }
  .pl-next { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 1.8em; padding-right: 1.8em; }
  .pl-next__body { padding: 1.6em 0; }
  .pl-next__name { font-size: clamp(28px, 4.4vw, 40px); }
  .pl-rows { padding: .2em 1.2em; }
}
/* phones: the photo leads each row; the date block steps aside (the date reads in the line under the name) */
@media (max-width: 639px) {
  .pl-next { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 3em; padding: .375em; }
  .pl-next__ph { aspect-ratio: 4 / 3; }
  .pl-next__body { padding: 1.5em 1em 1.1em; }
  .pl-next__launch { padding: 1.1em 1.1em 1.1em 1.2em; }
  .pl-next__foot { margin-top: 1.5em; }
  .pl-cal__head { margin-bottom: 1.2em; }
  .pl-bar { width: 100%; }
  .pl-rows { padding: .1em 1em; border-radius: 1.4em; }
  .pl-row { grid-template-columns: 4.4em minmax(0, 1fr); grid-template-areas: "ph body" "ph price" ". act"; align-items: start; column-gap: 1em; row-gap: .55em; padding: 1em 0; }
  .pl-date { display: none; }
  .pl-when__d { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .pl-row__ph { border-radius: .9em; }
  .pl-row__specs li:nth-child(3) { display: none; }
  .pl-row__act { justify-content: flex-start; }
  .pl-row__act > .sy-go, .pl-row__act.is-bare { display: none; }
  .pl-drow { grid-template-columns: 4.4em minmax(0, 1fr); grid-template-areas: "ph body" "ph pay" ". act"; align-items: start; column-gap: 1em; row-gap: .6em; padding: 1em 0; }
  .pl-drow__n { display: none; }
  .pl-drow__pay { grid-template-columns: minmax(0, 1fr); gap: .5em; }
  .pl-drow__drop { flex-wrap: wrap; }
  .pl-grid { --pl-cols: 2; gap: .6em; }
  .pl-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .pl-lead > li:first-child { grid-column: 1 / -1; }
  .pl-lead.is-1 { grid-template-columns: minmax(0, 1fr); }
  .pl-lead > li:not(:first-child) .ct-card__ph { aspect-ratio: 1 / 1; }
  .pl-lead > li:not(:first-child) .ct-card__name { font-size: var(--t-card-title); }
  .pl-lead > li:not(:first-child) .ct-card__body { padding: .8em .6em .55em; }
  .pl-ghost { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; }
  .pl-ghost__card:nth-child(n+3) { display: none; }
  .pl-empty__msg { margin-top: -6em; }
  .pl-tile { padding: 1.1em .9em 1.1em 1.2em; }
}
@media (max-width: 400px) {
  .pl-seg { width: 100%; }
  .pl-seg__o { flex: 1 1 auto; justify-content: center; padding: 0 .5em; }
  .pl-next__launch { flex-direction: column; align-items: flex-start; }
  .pl-cd { gap: .3em .8em; }
  .pl-rows .pl-remind { padding-left: 1em; }
}

/* touch screens: every control is at least 44px to hit */
@media (pointer: coarse) {
  .pl-seg { height: 52px; }
  .pl-select { height: max(3.125em, 44px); }
  .pl-pill, .pl-remind, .pl-rows .pl-remind { height: max(3.125em, 44px); }
  .pl-vs { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-next__dot { animation: none; }
  .pl-row__ph > img, .pl-row__link, .pl-next__link, .pl-tile__t { transition: none; }
  .pl-row:hover .pl-row__ph img, .pl-drow:hover .pl-row__ph img { transform: none !important; }
}