/* The Synap: the phone page, /phones/{slug}/ (class prefix pp-).
   A black hero sheet with rounded top corners, then the light reading sheet slides over it, like the homepage deck.
   Sizes are in em from one base that grows with the screen (the homepage's); text uses the type tokens in style.css.
   Light by default, and it follows a dark system setting through the style.css tokens. No glass here: the hero is
   plain black and the sheet is plain light, and glass only belongs over photos or the brand gradient. */

.pp {
  --pp-r: 2.5em; --pp-side: 3.125em; --pp-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
  --pp-card: #ffffff; --pp-card-edge: rgba(0,0,0,.06); --pp-soft: rgba(0,0,0,.05);
  font-size: clamp(14px, calc(.5vw + 6.4px), 24px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pp { --pp-card: #0e0e0e; --pp-card-edge: rgba(255,255,255,.09); --pp-soft: rgba(255,255,255,.06); }
  :root:not([data-theme="light"]) .pp-sheet { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
}
.pp a { color: inherit; text-decoration: none; }
.pp-in { max-width: calc(80em + 2 * var(--pp-side)); margin: 0 auto; padding: 0 var(--pp-side); }
.pp-num, .pp-table, .pp-price__now, .pp-cd { font-variant-numeric: tabular-nums; }
.pp-label { display: block; font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- breadcrumbs ---------- */
.pp-crumbs { padding: .6em 0 0; font-size: var(--t-meta); color: rgba(255,255,255,.5); } /* on the black, like every page */
.pp-crumbs a { color: rgba(255,255,255,.92); transition: color .25s ease; }
.pp-crumbs a:hover, .pp-crumbs a:focus-visible { color: #fff; }
.pp-crumbs ol { display: flex; flex-wrap: wrap; gap: .25em .6em; margin: 0; padding: 0; list-style: none; }
.pp-crumbs li { display: inline-flex; align-items: center; gap: .6em; min-width: 0; }
.pp-crumbs li + li::before { content: "/"; color: rgba(255,255,255,.4); }
.pp-crumbs [aria-current] { color: rgba(255,255,255,.5); }

/* ---------- hero: the black sheet ---------- */
.pp-hero { position: relative; margin-top: 1.4em; padding: 3.75em 0 calc(4.5em + var(--pp-r)); border-radius: var(--pp-r) var(--pp-r) 0 0; background: #000; color: #F9F9F9; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.pp-hero :focus-visible { outline-color: #fff; }
.pp-hero .pp-label { color: rgba(255,255,255,.58); }
.pp-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); grid-template-areas: "media ." "media head" "media rest" "media ."; grid-template-rows: 1fr auto auto 1fr; column-gap: 4.5em; }
.pp-hero__grid.is-text { grid-template-columns: minmax(0, 46em); grid-template-areas: "head" "rest"; grid-template-rows: auto auto; }
.pp-hero__head { grid-area: head; min-width: 0; }
.pp-hero__media { grid-area: media; align-self: center; min-width: 0; }
.pp-hero__rest { grid-area: rest; min-width: 0; padding-top: 2.2em; }
.pp-hero__rest:not(:has(*)) { display: none; }

/* the photo box: sample photos fill it, real product shots sit whole on white */
.pp-ph { position: relative; display: block; overflow: hidden; border-radius: 1.375em; background: var(--pp-soft); }
.pp-ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.pp-ph.is-product { background: #fff; }
.pp-ph.is-product img { object-fit: contain; padding: 8%; }
.pp-hero__ph { aspect-ratio: 4 / 5; border-radius: 1.75em; background: rgba(255,255,255,.05); }
.pp-hero__ph.is-product { background: #fff; }

.pp-brand { display: inline-block; font-size: var(--t-label); font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.62); transition: color .25s ease; }
/* a bigger tap area than the small label shows (24px and up), with no change to the layout */
a.pp-brand { padding-block: .6em; margin-block: -.6em; }
.pp-brand .sy-bl { --bl-h: 2em; }
.pp-brand .sy-bl__name { font-size: var(--t-meta); }
a.pp-brand:hover, a.pp-brand:focus-visible { color: #F16001; }
.pp-name { margin: .3em 0 0; font-family: var(--display); font-weight: 500; font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.035em; color: #F9F9F9; text-wrap: balance; overflow-wrap: break-word; }
.pp-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .9em; margin: 1.2em 0 0; font-size: var(--t-meta); color: rgba(255,255,255,.7); }
.pp-note-dark { margin: .7em 0 0; font-size: var(--t-meta); font-style: italic; color: rgba(255,255,255,.62); }
/* the one small tag: outlined, or solid for the strongest state (as on the homepage) */
.pp-tag { display: inline-flex; align-items: center; padding: .3em .8em; border-radius: 999px; font-size: var(--t-meta); font-weight: 600; line-height: 1.3; white-space: nowrap; color: rgba(255,255,255,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.pp-tag.is-solid { background: #F9F9F9; color: #000; box-shadow: none; }

.pp-verdict { margin: 0 0 2em; max-width: 32em; font-size: var(--t-lead); line-height: 1.45; color: #e6e6e6; }
.pp-verdict p { margin: 0; }
.pp-verdict .pp-label { margin-bottom: .55em; }
.pp-scorelink { display: inline-flex; align-items: baseline; gap: .1em; margin-top: .8em; padding: .3em .85em; border-radius: 999px; font-size: var(--t-meta); font-weight: 500; line-height: 1.3; color: rgba(255,255,255,.85); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transition: color .25s ease, background-color .25s ease; }
.pp-scorelink b { margin-right: .05em; font-family: var(--display); font-weight: 600; color: #F9F9F9; }
.pp-scorelink:hover, .pp-scorelink:focus-visible { color: #F9F9F9; background: rgba(255,255,255,.08); }

/* price */
.pp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .75em; margin: .45em 0 0; }
.pp-price__now { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * 1.2); line-height: 1; letter-spacing: -0.04em; color: #F9F9F9; }
.pp-price__for { font-size: var(--t-ui); color: rgba(255,255,255,.7); }
.pp-price__none { margin: .5em 0 0; font-size: var(--t-lead); color: rgba(255,255,255,.78); }
.pp-price__sub { display: flex; flex-wrap: wrap; align-items: center; gap: .55em 1.1em; margin: 1em 0 0; font-size: var(--t-meta); line-height: 1.4; color: rgba(255,255,255,.7); }
.pp-price__sub s { text-decoration-thickness: 1px; }
.pp-price__sub + .pp-price__emi { margin-top: .6em; }
/* the version picker (template-parts/phone/hero.php): one tile per version, the picked one ringed */
.pp-vers { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.6em, 1fr)); gap: .5em; margin-top: 1.1em; }
.pp-ver { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .3em; min-height: 3.9em; padding: .75em .9em; border: 0; border-radius: 1em; background: rgba(255,255,255,.07); color: #F9F9F9; font: inherit; text-align: left; cursor: pointer; transition: background-color .25s ease, box-shadow .25s ease; }
.pp-ver:hover { background: rgba(255,255,255,.11); }
.pp-ver[aria-checked="true"] { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1.5px #F9F9F9; }
.pp-ver:focus-visible { outline-offset: 3px; }
.pp-ver__name { font-size: var(--t-meta); font-weight: 600; color: rgba(255,255,255,.82); }
.pp-ver__price { font-size: var(--t-ui); font-weight: 500; font-variant-numeric: tabular-nums; }
.pp-ver__tag { display: inline-flex; align-items: center; gap: .35em; font-size: var(--t-label); font-weight: 600; letter-spacing: .04em; color: #F16001; }
.pp-ver__tag::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
.pp-ver__note { margin: .7em 0 0; font-size: var(--t-meta); line-height: 1.4; color: rgba(255,255,255,.72); }
/* a price cut: a white pill with the amount in orange (#C8470A on white is 4.6:1), as in the homepage Pulse */
.pp-drop { display: inline-flex; align-items: center; padding: .3em .8em; border-radius: 999px; background: #F9F9F9; color: #C8470A; font-weight: 600; white-space: nowrap; }

/* the six headline specs */
.pp-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5em; margin: 2em 0 0; }
.pp-key { min-width: 0; padding: .85em 1em .95em; border-radius: 1.1em; background: rgba(255,255,255,.07); }
.pp-key dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.58); }
.pp-key dd { margin: .5em 0 0; font-size: var(--t-ui); font-weight: 500; line-height: 1.3; color: #F9F9F9; overflow-wrap: anywhere; }

.pp-strong { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1em; margin: 1.6em 0 0; }
.pp-strong ul { display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; list-style: none; }

/* upcoming: countdown and Remind me */
.pp-launch { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.4em 2em; margin: 0 0 2em; padding: 1.25em 1.25em 1.25em 1.4em; border-radius: 1.4em; background: rgba(255,255,255,.07); }
.pp-cd { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin-top: .55em; }
.pp-cd__u { display: inline-flex; align-items: baseline; gap: .3em; }
.pp-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; }
.pp-cd__u i { font-style: normal; font-size: var(--t-meta); color: rgba(255,255,255,.7); }
.pp-launch__past { margin: .5em 0 0; max-width: 26em; font-size: var(--t-lead); line-height: 1.4; color: #e6e6e6; }
.pp-remind { display: inline-flex; align-items: center; gap: 1.3em; flex: none; height: 3.125em; padding: 0 .1875em 0 1.4em; border: 0; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); color: #F9F9F9; font: inherit; font-weight: 500; cursor: pointer; transition: background-color .25s ease; }
.pp-remind > span:first-child { font-size: var(--t-ui); }
.pp-remind__i { display: inline-grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; background: #F9F9F9; color: #000; transition: background-color .25s ease, color .25s ease; }
.pp-remind__i svg { width: 1.1em; height: 1.1em; }
.pp-remind:hover, .pp-remind:focus-visible { background: rgba(255,255,255,.08); }
.pp-remind:hover .pp-remind__i, .pp-remind:focus-visible .pp-remind__i { background: #E85002; color: #fff; }
.pp-remind:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- the reading sheet ---------- */
.pp-sheet { position: relative; z-index: 1; margin-top: calc(-1 * var(--pp-r)); padding-bottom: calc(4em + var(--pp-r)); /* the footer card slides over it */ border-radius: var(--pp-r) var(--pp-r) 0 0; background: var(--bg); }
.pp-sheet > .pp-in:first-child { padding-top: 1.5em; }

/* section nav: sticks while you read; the current section gets a small orange dot */
.pp-nav { position: sticky; top: 0; z-index: 30; border-radius: var(--pp-r) var(--pp-r) 0 0; background: var(--bg); transition: box-shadow .3s ease, border-radius .3s ease; }
.pp-nav.is-stuck { border-radius: 0; box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(0,0,0,.06); }
.pp-nav__in { display: flex; align-items: center; justify-content: space-between; gap: 2em; min-height: 4.5em; }
.pp-nav__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; color: var(--ink); opacity: 0; transform: translateY(.4em); transition: opacity .3s ease, transform .3s ease; }
.pp-nav.is-stuck .pp-nav__name { opacity: 1; transform: none; }
.pp-nav__name span { margin-left: .7em; font-family: var(--font); font-size: var(--t-ui); font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pp-nav__list { position: relative; display: flex; flex: none; gap: .15em; max-width: 100%; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pp-nav__list::-webkit-scrollbar { display: none; }
.pp-nav__list.is-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5em), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5em), transparent); }
.pp-nav__list a { position: relative; display: inline-flex; align-items: center; height: 2.75em; padding: 0 1.1em; border-radius: 999px; font-size: var(--t-ui); font-weight: 500; white-space: nowrap; color: var(--ink-3); transition: color .2s ease, background-color .2s ease; }
.pp-nav__list a:hover { color: var(--ink); background: var(--bg-2); }
.pp-nav__list a[aria-current="true"] { color: var(--ink); }
.pp-nav__list a::after { content: ""; position: absolute; left: 50%; bottom: .35em; width: .36em; height: .36em; margin-left: -.18em; border-radius: 50%; background: #E85002; opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .25s ease; }
.pp-nav__list a[aria-current="true"]::after { opacity: 1; transform: none; }
.pp-nav__list a:focus-visible { outline-offset: -2px; }

.pp-sec { padding-top: 5em; scroll-margin-top: 4.5em; }
.pp-in > .pp-sec:first-child { padding-top: 2.5em; }
.pp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em 3em; margin-bottom: 2.2em; }
.pp-title { margin: .45em 0 0; font-family: var(--display); font-weight: 500; font-size: var(--pp-h2); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.pp-intro { margin: .75em 0 0; max-width: 38em; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.pp-empty { margin: 0; padding: 2em 0; border-top: 1px solid var(--line); font-size: var(--t-lead); color: var(--ink-2); }

/* paper cards (white on light, near-black on dark) */
.pp-card { display: block; border-radius: 1.75em; background: var(--pp-card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05), inset 0 0 0 1px var(--pp-card-edge); }

/* hover, as everywhere on the site: no underlines; titles turn orange, photos ease in, arrow circles fill orange */
.pp-hl { transition: color .25s ease; }
.pp a:hover .pp-hl, .pp a:focus-visible .pp-hl { color: var(--acc-text); }
.pp a:hover .pp-ph img, .pp a:focus-visible .pp-ph img { transform: scale(1.04); }
.pp a:hover .sy-go svg, .pp a:focus-visible .sy-go svg { transform: rotate(45deg); }
.pp-sheet .sy-go { background: var(--ink); color: var(--bg); }
.pp-sheet a:hover .sy-go, .pp-sheet a:focus-visible .sy-go { background: #E85002; color: #fff; }
.pp-pill { color: var(--ink); }
/* the site-wide focus ring (style.css) squares corners off: keep each control's own shape while it shows */
.pp-card:focus-visible { border-radius: 1.75em; }
.pp-nav__list a:focus-visible, .pp-remind:focus-visible, .pp-scorelink:focus-visible, .pp-pill:focus-visible { border-radius: 999px; }

/* ---------- is it any good: our review, our take ---------- */
.pp-review { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5em; align-items: start; padding: 2em 2.2em 2em 2em; }
.pp-score { display: grid; place-items: center; align-content: center; width: 6.25em; height: 6.25em; margin: 0; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-family: var(--display); line-height: 1; text-align: center; } /* the same ring as the score in an article */
.pp-score__n { display: grid; place-items: center; }
.pp-score b { font-weight: 500; font-size: var(--t-big); letter-spacing: -0.04em; }
.pp-score small { margin-top: .45em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pp-review__verdict { margin: 0; max-width: 30em; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.25); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.pp-buyif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 2em; margin: 1.6em 0 0; }
.pp-buyif div { padding-top: .9em; border-top: 1px solid var(--line); }
.pp-buyif dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pp-buyif dd { margin: .45em 0 0; font-size: var(--t-ui); line-height: 1.45; color: var(--ink); }
.pp-review__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.8em; }
.pp-by { font-size: var(--t-meta); color: var(--ink-3); }
.pp-by b { font-weight: 600; color: var(--ink); }
.pp-prose { max-width: 42em; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); }
.pp-review + .pp-prose { margin-top: 2.5em; }
.pp-prose > :last-child { margin-bottom: 0; }
/* links inside text: the thin orange underline every article and company page uses */
.pp-prose a, .pp-source a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--acc-text) 60%, transparent); transition: color .25s ease, text-decoration-color .25s ease; }
.pp-prose a:hover, .pp-prose a:focus-visible, .pp-source a:hover, .pp-source a:focus-visible { color: var(--acc-text); text-decoration-color: currentColor; }
.pp-prose h2, .pp-prose h3 { margin: 1.6em 0 .5em; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- every spec ---------- */
.pp-specs { border-bottom: 1px solid var(--line); }
.pp-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: .8em 3em; padding: 1.8em 0; border-top: 1px solid var(--line); }
.pp-group__h { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.pp-table { width: 100%; border-collapse: collapse; font-size: var(--t-ui); line-height: 1.45; }
.pp-table th, .pp-table td { padding: .85em 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.pp-table tr:first-child > * { padding-top: .15em; border-top: 0; }
.pp-table tr:last-child > * { padding-bottom: 0; }
.pp-table th { width: 36%; padding-right: 2em; font-weight: 500; color: var(--ink-3); }
.pp-table td { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.pp-vline { display: flex; justify-content: space-between; gap: 1.5em; max-width: 22em; }
.pp-vline + .pp-vline { margin-top: .4em; }

/* ---------- what to compare it with ---------- */
.pp-rivals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.pp-rivals.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-rivals > li, .pp-cards > li, .pp-stories > li { display: flex; min-width: 0; }
.pp-rival { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: .375em; }
.pp-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .375em; }
.pp-pair .pp-ph { aspect-ratio: 1; }
.pp-pair__vs { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; border-radius: 50%; background: var(--pp-card); color: var(--ink); font-family: var(--display); font-size: var(--t-meta); font-weight: 500; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.pp-rival__b { display: block; padding: 1.1em 1em .2em; }
.pp-rival__t { display: block; margin-top: .45em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; }
.pp-rival__t i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.pp-rival__m { display: block; margin-top: .55em; font-size: var(--t-meta); color: var(--ink-2); }
.pp-rival__why { display: block; margin-top: .25em; font-size: var(--t-meta); color: var(--ink-3); }
.pp-rival__f { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; padding: 1.1em 0 0 1em; font-weight: 500; }
.pp-rival__f > span:first-child { font-size: var(--t-ui); }

/* ---------- what else: stories, similar phones, more from the brand ---------- */
.pp-sub + .pp-sub { margin-top: 3.75em; }
.pp-sub__h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1em 2em; margin-bottom: 1.3em; }
.pp-sub__h h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-card-title) * 1.15); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.pp-sub__h p { margin: .4em 0 0; font-size: var(--t-meta); color: var(--ink-3); }
.pp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.pp-mini { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: .375em; }
.pp-mini__ph { aspect-ratio: 1; }
.pp-mini__b { display: block; padding: 1em 1em .75em; }
.pp-mini__brand { display: block; font-size: var(--t-label); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.pp-mini__name { display: block; margin-top: .45em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; }
.pp-mini__price { display: block; margin-top: .45em; font-size: var(--t-ui); font-weight: 600; }
.pp-stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.pp-story { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: .375em; }
.pp-story__ph { aspect-ratio: 16 / 10; }
.pp-story__ph.is-empty { display: none; }
.pp-story__b { display: block; padding: 1em 1em .75em; }
.pp-story__t { display: block; margin-top: .45em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.22; letter-spacing: -0.02em; }
.pp-story__m { display: block; margin-top: .7em; font-size: var(--t-meta); color: var(--ink-3); }

/* ---------- source and freshness, quietly at the end ---------- */
.pp-source { margin-top: 5em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3); }
.pp-source p { margin: 0; }
.pp-source p + p { margin-top: .35em; }
.pp-source a { color: var(--ink-2); transition: color .25s ease; }
.pp-source a:hover, .pp-source a:focus-visible { color: var(--acc-text); }

/* ---------- the photos (template-parts/phone/gallery.php): colours, then Product and Lifestyle ---------- */
.pp-gal { min-width: 0; }
.pp-gal:not(.is-js) .pp-gal__set + .pp-gal__set { margin-top: 1em; } /* both groups stacked, only without JavaScript */
.pp-gal__set[hidden] { display: none; }
.pp-gal__track { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: 1.75em; outline-offset: 4px; }
.pp-gal__track::-webkit-scrollbar { display: none; }
.pp-gal__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.pp-gal .pp-hero__ph:not(.is-product):not(.is-plain) { background: #111; }
/* a studio shot on one flat colour: shown whole, on a panel of that same colour, so it reads like a cut-out */
.pp-ph.is-plain { background: var(--ph-bg, #f2f2f2); }
.pp-ph.is-plain img { object-fit: contain; padding: 5%; }
.pp-gal__colour img[hidden] { display: none; }

/* with thumbnails and colours under it, the frame is square on tablets and computers, so the whole hero (frame,
   strip, colours, switch) fits a laptop screen; phones keep their landscape frame */
@media (min-width: 641px) { .pp-gal .pp-hero__ph { width: 100%; aspect-ratio: 1 / 1; max-height: max(340px, calc(100svh - 370px)); } } /* shorter laptop screens: the frame gives way first */

/* thumbnails: a sliding strip of the open group, right under the frame; the chosen one ringed, the rest dimmed */
.pp-gal__thumbs { display: flex; align-items: center; gap: .3em; margin-top: .75em; }
.pp-gal__strip { position: relative; display: flex; flex: 1; gap: .5em; min-width: 0; padding: 3px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.pp-gal__strip::-webkit-scrollbar { display: none; }
.pp-th { flex: 0 0 calc((100% - 3.4 * .5em) / 4.4); padding: 0; border: 0; border-radius: .85em; background: transparent; cursor: pointer; opacity: .55; box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: opacity .25s ease, box-shadow .25s ease; }
.pp-th:hover { opacity: .85; }
.pp-th.is-on { opacity: 1; box-shadow: 0 0 0 2px #F9F9F9; }
.pp-th:focus-visible { outline-offset: 3px; }
.pp-th__ph { display: block; aspect-ratio: 1; overflow: hidden; border-radius: .85em; background: #111; }
.pp-th__ph.is-product { background: #fff; }
.pp-th__ph.is-plain { background: var(--ph-bg, #f2f2f2); }
.pp-th__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pp-th__ph.is-product img, .pp-th__ph.is-plain img { object-fit: contain; padding: 10%; }
.pp-th__ph img[hidden] { display: none; }
.pp-gal .sy-ctrl:disabled { opacity: .3; cursor: default; background: transparent; }
@media (pointer: coarse) { .pp-gal__thumbs .sy-ctrl { display: none; } } /* touch: the strip and the frame swipe */
@media (max-width: 640px) { .pp-th { flex-basis: calc((100% - 2.6 * .5em) / 3.6); } }

/* under the strip: the colours on the left, the Product / Lifestyle switch on the right */
.pp-gal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8em 1em; margin-top: 1.1em; }
.pp-gal:not(.is-js) .pp-gal__bar { display: none; }
.pp-gal__swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; }
.pp-sw { position: relative; flex: none; width: 2em; height: 2em; padding: 0; border: 0; border-radius: 50%; background: var(--sw, #888); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); cursor: pointer; transition: box-shadow .25s ease; }
.pp-sw::after { content: ""; position: absolute; inset: -.35em; border-radius: 50%; } /* a tap area a little bigger than the swatch */
.pp-sw:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 2px #000, 0 0 0 3.5px rgba(255,255,255,.45); }
.pp-sw[aria-checked="true"] { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 2px #000, 0 0 0 3.5px #F9F9F9; }
.pp-sw:focus-visible { outline-offset: 5px; }
.pp-gal__name { margin-left: .3em; font-size: var(--t-meta); font-weight: 500; color: rgba(255,255,255,.8); }
.pp-gal .hp-seg { height: 2.6em; font-size: .9em; }
.pp-gal .hp-seg [role="tab"] { padding: 0 1.15em; color: rgba(255,255,255,.75); }
.pp-gal .hp-seg [role="tab"]:hover { color: #fff; }
.pp-gal .hp-seg [role="tab"][aria-selected="true"] { color: #F9F9F9; }
.pp-gal .hp-seg [role="tab"]:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pp-gal__track, .pp-gal__strip { scroll-behavior: auto; }
  .pp-th, .pp-sw, .pp-ver { transition: none; }
  html { scroll-behavior: auto; }
  .pp-ph img, .pp-nav, .pp-nav__name, .pp-nav__list a::after { transition: none; }
  .pp a:hover .pp-ph img, .pp a:focus-visible .pp-ph img { transform: none; }
}

/* touch screens: every control is at least 44px to hit */
@media (pointer: coarse) {
  .pp-nav__list a { height: 44px; }
  .pp-remind { height: max(3.125em, 44px); }
  .pp-crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .pp-hero__grid { column-gap: 3.5em; }
}
@media (max-width: 1100px) {
  .pp-rivals, .pp-rivals.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .pp { font-size: 15px; --pp-r: 1.75em; --pp-side: var(--side, 20px); }
  .pp-hero { margin-top: 1.1em; padding: 2.4em 0 calc(3.2em + var(--pp-r)); }
  .pp-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "rest"; grid-template-rows: auto; column-gap: 0; }
  .pp-hero__grid.is-text { grid-template-columns: minmax(0, 1fr); }
  .pp-hero__media { margin-top: 1.6em; }
  .pp-hero__ph { aspect-ratio: 4 / 3; }
  .pp-hero__rest { padding-top: 1.8em; }
  .pp-name { font-size: clamp(32px, 8.6vw, 44px); }
  .pp-nav__name { display: none; }
  .pp-nav__in { min-height: 3.75em; }
  .pp-nav__list { margin: 0 -.6em; }
  .pp-sec { padding-top: 3.75em; scroll-margin-top: 3.75em; }
  .pp-head { flex-direction: column; align-items: flex-start; margin-bottom: 1.6em; }
  .pp-group { grid-template-columns: minmax(0, 1fr); gap: .9em; }
  .pp-cards, .pp-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
  .pp-rivals { gap: .75em; }
  .pp-review { gap: 1.8em; padding: 1.6em; }
  .pp-source { margin-top: 3.75em; }
}
/* iPad and other tablets (portrait): photo beside the facts, not the phone layout stretched wide */
@media (min-width: 640px) and (max-width: 980px) {
  .pp-hero__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-areas: "media head" "media rest"; grid-template-rows: auto 1fr; column-gap: 2.2em; }
  .pp-hero__media { margin-top: 0; align-self: center; }
  .pp-hero__ph { aspect-ratio: 4 / 5; }
  .pp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pp-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-group { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: .8em 2em; }
}
@media (max-width: 760px) and (min-width: 640px) {
  .pp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pp-nav__list { gap: 0; }
  .pp-nav__list a { padding: 0 .7em; }
  .pp-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-review { grid-template-columns: minmax(0, 1fr); padding: 1.4em 1.3em; }
  .pp-score { width: 5em; height: 5em; }
  .pp-buyif { grid-template-columns: minmax(0, 1fr); }
  /* spec rows stack: label over value */
  .pp-table, .pp-table tbody, .pp-table tr, .pp-table th, .pp-table td { display: block; width: auto; }
  .pp-table tr { padding: .8em 0; border-top: 1px solid var(--line); }
  .pp-table tr:first-child { padding-top: 0; border-top: 0; }
  .pp-table tr:last-child { padding-bottom: 0; }
  .pp-table th, .pp-table td, .pp-table tr:first-child > *, .pp-table tr:last-child > * { padding: 0; border: 0; }
  .pp-table th { margin-bottom: .2em; font-size: var(--t-meta); }
  .pp-group { padding: 1.4em 0; }
  .pp-launch { padding: 1.1em; }
  /* rivals become rows: the two photos on the left, the matchup on the right */
  .pp-rivals, .pp-rivals.is-3 { grid-template-columns: minmax(0, 1fr); }
  .pp-rival { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); align-items: center; column-gap: .9em; }
  .pp-pair { gap: .25em; }
  .pp-pair .pp-ph { border-radius: 1em; }
  .pp-pair__vs { width: 2.1em; height: 2.1em; margin: -1.05em 0 0 -1.05em; font-size: 11px; }
  .pp-rival__b { padding: .5em .4em .5em 0; }
  .pp-rival__t { margin-top: .3em; }
  .pp-rival__f { grid-column: 1 / -1; padding: .7em 0 0 .9em; }
  .pp-stories { grid-template-columns: minmax(0, 1fr); }
  .pp-mini__b { padding: .85em .7em .6em; }
}
@media (max-width: 400px) {
  .pp-nav__list a { padding: 0 .55em; }
  .pp-keys { gap: .4em; }
  .pp-key { padding: .75em .8em .8em; }
  .pp-cd { gap: .3em .8em; }
  .pp-tag { white-space: normal; }
}