/* The Synap: Phone finder (/phone-finder/), class prefix pf-.
   Built on the page deck (home.css .pg-*): the three questions are the hero, on the brand gradient with glass chips
   exactly like the homepage picker (only the chosen chip lights up: white with ember text); the picks, tips and ways
   onward sit in the card below, in the same paper cards as the Best phones lists. Orange only marks what is chosen. */

.pf { --pf-card: #ffffff; --pf-edge: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); --pf-ph: #f0f0f0; --pf-line: rgba(0,0,0,.08); --pf-h2: clamp(22px, calc(.7vw + 12.6px), 32px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pf { --pf-card: #0e0e0e; --pf-edge: inset 0 0 0 1px rgba(255,255,255,.09); --pf-ph: #1a1a1a; --pf-line: rgba(255,255,255,.1); }
}
:root[data-theme="dark"] .pf { --pf-card: #0e0e0e; --pf-edge: inset 0 0 0 1px rgba(255,255,255,.09); --pf-ph: #1a1a1a; --pf-line: rgba(255,255,255,.1); }

/* ---------- the band: the questions on the gradient ---------- */
.pf-band { padding-bottom: calc(5em + var(--pg-r)); }
.pf-band .pg-h1 { max-width: 14ch; }
.pf-tool { margin-top: 2.6em; max-width: 48em; }
.pf-warm { margin: 0; max-width: 40em; font-size: var(--t-lead); line-height: 1.5; color: rgba(255,255,255,.88); }
.pf-warm a { color: #fff; box-shadow: inset 0 -1px 0 rgba(255,255,255,.5); }
.pf:not(.pf--js) .pf-ask, .pf:not(.pf--js) .pf-sum { display: none; }

.pf-progress { display: flex; align-items: center; gap: .9em; margin-bottom: 1.4em; }
.pf-dots { display: inline-flex; gap: .45em; }
.pf-dots i { width: .5em; height: .5em; border-radius: 50%; background: rgba(255,255,255,.28); transition: background-color .3s ease, transform .3s ease; }
.pf-dots i.is-done { background: rgba(255,255,255,.7); }
.pf-dots i.is-on { background: #fff; transform: scale(1.25); }
.pf-stepno { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.pf-stepno b { font-weight: 600; color: #fff; }

.pf-q { margin: 0; padding: 0; border: 0; min-width: 0; }
.pf-q[hidden] { display: none; }
.pf-q.is-on { animation: pf-in .45s cubic-bezier(.22,1,.36,1); }
@keyframes pf-in { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
.pf-q__t { display: block; float: left; width: 100%; margin: 0 0 1em; padding: 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.35); line-height: 1.15; letter-spacing: -0.025em; color: #F9F9F9; outline: none; }
.pf-q__t + * { clear: both; }
.pf-q__hint { display: block; margin-top: .45em; font-family: var(--font); font-size: var(--t-meta); font-weight: 500; letter-spacing: 0; color: rgba(255,255,255,.78); }
.pf-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.pf-chips .sy-bl { --bl-h: 1.35em; }

.pf-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.4em; margin-top: 2em; }
.pf-back { height: 3.125em; padding: 0 .4em; border: 0; background: none; font: inherit; font-size: var(--t-ui); font-weight: 500; color: rgba(255,255,255,.8); cursor: pointer; transition: color .25s ease; }
.pf-back:hover, .pf-back:focus-visible { color: #fff; }
.pf-back[hidden] { display: none; }
.pf-next { color: #F9F9F9; font-size: var(--t-ui); }
.pf-fit { font-size: var(--t-meta); color: rgba(255,255,255,.72); }

.pf-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .8em 1.4em; }
.pf-sum[hidden] { display: none; }
.pf-sum__t { margin: 0; font-size: var(--t-lead); color: #F9F9F9; }
.pf-sum__l { display: block; margin-bottom: .45em; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.pf-change { height: 2.6em; padding: 0 1.15em; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); font: inherit; font-size: var(--t-ui); font-weight: 500; color: #fff; cursor: pointer; transition: background-color .25s ease; }
.pf-change:hover, .pf-change:focus-visible { background: rgba(255,255,255,.2); }

/* ---------- the card: the picks ---------- */
.pf-head, .pf-res__head { margin-bottom: 1.8em; }
.pf-h2, .pf-res__t { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--pf-h2); line-height: 1.08; letter-spacing: -0.03em; color: var(--ink); outline: none; }
.pf-res__sum { margin: .7em 0 0; font-size: var(--t-ui); color: var(--ink-3); }
.pf-results { margin-bottom: 4.5em; scroll-margin-top: 1.5em; }

.pf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
/* fewer than three picks: they share the row instead of leaving empty columns; a single pick lies photo beside text */
@media (min-width: 1101px) {
  .pf-cards:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-cards:has(> :only-child) { grid-template-columns: minmax(0, 1fr); max-width: 56em; }
  .pf-cards:has(> :only-child) .pf-card { display: grid; grid-template-columns: minmax(0, 22em) minmax(0, 1fr); }
  .pf-cards:has(> :only-child) .pf-card__ph { aspect-ratio: auto; min-height: 100%; }
}
.pf-card { display: flex; flex-direction: column; padding: .375em; border-radius: 1.75em; background: var(--pf-card); box-shadow: var(--pf-edge); }
.pf-card__ph { display: block; aspect-ratio: 4 / 3; border-radius: calc(1.75em - .375em); overflow: hidden; background: var(--pf-ph); }
.pf-card__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pf-card__ph.is-product img { object-fit: contain; padding: 8%; }
.pf-row__ph.is-product img { object-fit: contain; padding: 10%; }
.pf-card:hover .pf-card__ph img { transform: scale(1.04); }
.pf-card__body { display: flex; flex: 1; flex-direction: column; padding: 1.2em 1.05em 1.05em; }
.pf-card__tag { display: inline-flex; align-items: center; gap: .45em; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pf-card.is-top .pf-card__tag::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #E85002; }
.pf-card__brand { margin-top: 1em; font-size: var(--t-meta); font-weight: 600; color: var(--ink-3); }
.pf-card__name { margin: .2em 0 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.2); line-height: 1.15; letter-spacing: -0.02em; }
.pf-card__name a { transition: color .25s ease; }
.pf-card__name a:hover, .pf-card__name a:focus-visible { color: var(--acc-text); }
.pf-card__price { margin: .5em 0 0; font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-card__price b { font-size: var(--t-ui); font-weight: 600; color: var(--ink); }
.pf-card__why { margin: 1em 0 0; font-size: var(--t-ui); line-height: 1.5; color: var(--ink-2); }
.pf-card__plus { margin: .6em 0 0; font-size: var(--t-meta); line-height: 1.45; color: var(--ink-3); }
.pf-card__specs { display: flex; flex-wrap: wrap; gap: .3em .9em; margin: 1em 0 0; padding: 1em 0 0; border-top: 1px solid var(--pf-line); list-style: none; font-size: var(--t-meta); color: var(--ink-3); }
.pf-card__go { align-self: flex-start; margin-top: auto; padding-top: 0; }
.pf-card__specs + .pf-card__go, .pf-card__why + .pf-card__go, .pf-card__plus + .pf-card__go { margin-top: 1.4em; }

.pf-acts { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.6em; }
.pf-none p { margin: 0; max-width: 40em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

.pf-also { margin-top: 3em; }
.pf-also__t { margin: 0 0 .6em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; }
.pf-also__list { margin: 0; padding: 0; list-style: none; }
.pf-row { display: grid; grid-template-columns: 4em minmax(0, 1fr) auto; gap: 1.1em; align-items: center; padding: .9em .4em; border-top: 1px solid var(--pf-line); border-radius: .9em; transition: background-color .25s ease; }
.pf-row:hover, .pf-row:focus-visible { background: var(--pf-line); }
.pf-row__ph { display: block; aspect-ratio: 1; border-radius: .8em; overflow: hidden; background: var(--pf-ph); }
.pf-row__ph img { width: 100%; height: 100%; object-fit: cover; }
.pf-row__t { min-width: 0; }
.pf-row__t b { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-ui); transition: color .25s ease; }
.pf-row:hover .pf-row__t b, .pf-row:focus-visible .pf-row__t b { color: var(--acc-text); }
.pf-row__t span { display: block; margin-top: .25em; font-size: var(--t-meta); color: var(--ink-3); }
.pf-row__p { font-size: var(--t-ui); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- tips and ways onward ---------- */
.pf-tips { margin-bottom: 4.5em; }
.pf-tips__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.pf-tip { padding: 1.6em 1.5em 1.7em; border-radius: 1.75em; background: var(--pf-card); box-shadow: var(--pf-edge); }
.pf-tip__n { display: block; font-family: var(--display); font-size: var(--t-card-title); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pf-tip__t { margin: 1em 0 .6em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; }
.pf-tip p { margin: 0; font-size: var(--t-ui); line-height: 1.55; color: var(--ink-2); }
.pf-more__list { display: flex; flex-wrap: wrap; gap: .6em; margin: 0; padding: 0; list-style: none; }

@media (prefers-reduced-motion: reduce) {
  .pf-q.is-on { animation: none; }
  .pf-card__ph img { transition: none; }
  .pf-card:hover .pf-card__ph img { transform: none; }
}
@media (max-width: 1100px) {
  .pf-cards { grid-template-columns: minmax(0, 1fr); }
  .pf-card { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); }
  .pf-card__ph { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 980px) {
  .pf-tips__list { grid-template-columns: minmax(0, 1fr); }
  .pf-q__t { font-size: calc(var(--t-card-title) * 1.25); }
}
@media (max-width: 560px) {
  .pf-card { display: flex; }
  .pf-card__ph { aspect-ratio: 4 / 3; min-height: 0; }
  .pf-row { grid-template-columns: 3.4em minmax(0, 1fr); }
  .pf-row__p { grid-column: 2; }
}
@media (pointer: coarse) {
  .pf .hp-chip { height: 44px; }
  .pf-back, .pf-change { min-height: 44px; }
}