/* PhoneRanked — single phone page */
.pr-phone {
	--pr-ink: #0E1726; --pr-text: #2A3342; --pr-muted: #5B6475; --pr-meta: #6B7587;
	--pr-bg: #F4F6FA; --pr-card: #FFFFFF; --pr-alt: #F8FAFC; --pr-border: #DEE3EC; --pr-line: #E9EDF3;
	--pr-accent: #1F5EFF; --pr-accent-hover: #1747C9; --pr-tint: #EEF3FF;
	--pr-green: #0B7F3E; --pr-green-tint: #E9F6EF; --pr-amber: #E8A317; --pr-red: #C93434;
	flex: 1 1 100%; min-width: 0; width: 100%;
	display: flex; flex-direction: column; gap: 24px; padding: 20px 0 48px;
	color: var(--pr-text); font-variant-numeric: tabular-nums;
}
.pr-phone h1, .pr-phone h2, .pr-phone h3 { color: var(--pr-ink); margin: 0; }
.pr-phone h2 { font-size: 26px; font-weight: 800; margin-bottom: 14px; }
.pr-phone h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.pr-card { background: var(--pr-card); border: 1px solid var(--pr-border); border-radius: 14px; padding: 18px; }
.pr-label { display: block; font-size: 12px; font-weight: 700; color: var(--pr-muted); }
.pr-na { color: #8F99AA; }
.pr-yes { color: var(--pr-green); font-weight: 700; }
.pr-no { color: var(--pr-red); font-weight: 700; }

/* breadcrumbs */
.pr-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--pr-meta); }
.pr-crumbs a { color: var(--pr-meta); text-decoration: none; }
.pr-crumbs a:hover { color: var(--pr-accent); }
.pr-crumbs [aria-current] { color: var(--pr-text); font-weight: 600; }

/* hero */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; border-radius: 18px; }
@media (min-width: 900px) { .pr-hero { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 40px; padding: 32px; } }
.pr-gallery { display: flex; flex-direction: column; gap: 10px; }
.pr-gallery-main { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--pr-bg); border-radius: 14px; overflow: hidden; }
.pr-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.pr-phone-placeholder { width: 38%; aspect-ratio: 1 / 2; border-radius: 22px; background: var(--pr-ink); box-shadow: inset 0 0 0 6px #2A3342; }
.pr-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pr-thumb { padding: 0; border: 0; border-radius: 10px; background: var(--pr-bg); overflow: hidden; cursor: pointer; aspect-ratio: 1 / 1; }
.pr-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pr-thumb.is-active { box-shadow: inset 0 0 0 2px var(--pr-accent); }

.pr-info { display: flex; flex-direction: column; gap: 16px; }
.pr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-tag { padding: 3px 10px; border-radius: 999px; background: #EEF1F6; color: var(--pr-text); font-size: 12px; font-weight: 700; text-decoration: none; }
.pr-tag-released { background: #E6F4EC; color: var(--pr-green); }
.pr-tag-announced, .pr-tag-updated { background: #E8EFFF; color: var(--pr-accent-hover); }
.pr-tag-rumored { background: #F1ECFF; color: #5A3FD1; }
.pr-title { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.6px; line-height: 1.1; }
.pr-sub { margin: -8px 0 0; font-size: 14px; color: var(--pr-meta); }

.pr-scorebox { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--pr-alt); border: 1px solid var(--pr-line); border-radius: 14px; }
.pr-scorebox > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.pr-scorebox a { font-size: 13px; color: var(--pr-muted); text-decoration: none; }
.pr-score-big { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 16px; color: #fff; }
.pr-score-big strong { font-size: 24px; line-height: 1; }
.pr-score-big span { font-size: 10px; font-weight: 700; opacity: .85; }
.is-high { background: var(--pr-green); } .is-mid { background: var(--pr-amber); color: var(--pr-ink); } .is-low { background: var(--pr-red); }

.pr-block { display: flex; flex-direction: column; gap: 8px; }
.pr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-pill { padding: 9px 14px; border-radius: 10px; border: 1px solid #C9D1DE; background: #fff; color: var(--pr-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pr-pill.is-active { border: 2px solid var(--pr-accent); background: var(--pr-tint); color: var(--pr-ink); font-weight: 700; padding: 8px 13px; }
.pr-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-swatch { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(14,23,38,.15); cursor: pointer; }
.pr-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--pr-accent); }

.pr-prices { display: flex; align-items: flex-end; gap: 24px; padding-top: 14px; border-top: 1px solid var(--pr-line); }
.pr-prices s { font-size: 20px; font-weight: 700; color: var(--pr-meta); }
.pr-price-now { font-size: 30px; font-weight: 800; color: var(--pr-ink); line-height: 1.1; }
.pr-discount { margin-bottom: 6px; padding: 3px 8px; border-radius: 6px; background: #E6F4EC; color: var(--pr-green); font-size: 12px; font-weight: 700; }

.pr-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pr-actions .pr-btn { flex: 1 1 auto; }
.pr-actions .pr-btn-accent { flex: 0 0 auto; }
.pr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; text-align: center; transition: background .15s, color .15s; }
.pr-btn-dark { background: var(--pr-ink); color: #fff; }
.pr-btn-dark:hover { background: #1A2536; color: #fff; }
.pr-btn-outline { border: 1.5px solid var(--pr-ink); color: var(--pr-ink); background: #fff; }
.pr-btn-outline:hover { background: var(--pr-ink); color: #fff; }
.pr-btn-accent { background: var(--pr-accent); color: #fff; }
.pr-btn-accent:hover { background: var(--pr-accent-hover); color: #fff; }
.pr-btn-outline-accent { border: 1.5px solid var(--pr-accent); color: var(--pr-accent); background: #fff; }
.pr-disclosure { margin: -6px 0 0; font-size: 11px; color: var(--pr-meta); }

/* section nav */
.pr-secnav { position: sticky; top: 0; z-index: 20; display: flex; gap: 6px; padding: 8px; overflow-x: auto; scrollbar-width: none; background: #fff; border: 1px solid var(--pr-border); border-radius: 14px; box-shadow: 0 6px 20px rgba(14,23,38,.06); }
.pr-secnav::-webkit-scrollbar { display: none; }
.pr-secnav a { flex: 0 0 auto; padding: 9px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--pr-muted); text-decoration: none; }
.pr-secnav a:hover { color: var(--pr-ink); }
.pr-secnav a.is-active { background: var(--pr-ink); color: #fff; }
.pr-section, #overview { scroll-margin-top: 80px; }

/* overview */
.pr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1024px) { .pr-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.pr-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pr-side { display: flex; flex-direction: column; gap: 16px; }
.pr-keyspecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .pr-keyspecs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.pr-keyspec { display: flex; gap: 12px; padding: 14px; background: #fff; border: 1px solid var(--pr-border); border-radius: 12px; }
.pr-keyspec-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--pr-tint); color: var(--pr-accent); }
.pr-keyspec strong { display: block; font-size: 15px; color: var(--pr-ink); }
.pr-keyspec small { display: block; font-size: 12px; color: var(--pr-muted); }
@media (max-width: 480px) { .pr-keyspec { flex-direction: column; gap: 6px; } .pr-keyspec-icon { width: 32px; height: 32px; } }

.pr-callout { padding: 16px 20px; border-radius: 10px; }
.pr-callout p { margin: 4px 0 0; line-height: 1.6; }
.pr-callout-green { background: var(--pr-green-tint); border-left: 5px solid var(--pr-green); }
.pr-callout-green strong { color: var(--pr-green); }
.pr-proscons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 700px) { .pr-proscons { grid-template-columns: 1fr 1fr; } }
.pr-pros-title { color: var(--pr-green) !important; } .pr-cons-title { color: var(--pr-red) !important; }
.pr-proscons ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.pr-list-pros li::before { content: "✓ "; color: var(--pr-green); font-weight: 800; }
.pr-list-cons li::before { content: "✕ "; color: var(--pr-red); font-weight: 800; }
.pr-content { padding: 28px 32px; line-height: 1.7; }
.pr-content h2 { font-size: 22px; margin: 24px 0 8px; }
.pr-content > *:first-child { margin-top: 0; }
@media (max-width: 600px) { .pr-content { padding: 18px 16px; } }

.pr-bar { margin-bottom: 12px; }
.pr-bar-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.pr-bar-top span { color: var(--pr-muted); } .pr-bar-top strong { color: var(--pr-ink); }
.pr-bar-track { height: 8px; border-radius: 4px; background: #E6EAF1; }
.pr-bar-track div { height: 8px; border-radius: 4px; background: var(--pr-accent); }
.pr-rival { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 8px; border: 1px solid var(--pr-line); border-radius: 10px; text-decoration: none; color: var(--pr-ink); font-weight: 700; font-size: 14px; }
.pr-rival img { width: 36px; height: 52px; object-fit: contain; }
.pr-rival span { flex: 1; }
.pr-rival em { font-style: normal; padding: 4px 9px; border-radius: 8px; background: var(--pr-tint); color: var(--pr-accent-hover); font-size: 12px; font-weight: 800; }

/* videos */
.pr-videos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 700px) { .pr-videos { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.pr-video { padding: 0; overflow: hidden; }
.pr-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #1A2536; cursor: pointer; }
.pr-yt img { width: 100%; height: 100%; object-fit: cover; }
.pr-yt-play { position: absolute; inset: 50% auto auto 50%; width: 64px; height: 44px; transform: translate(-50%, -50%); border-radius: 12px; background: rgba(14,23,38,.85); }
.pr-yt-play::after { content: ""; position: absolute; left: 26px; top: 13px; border: 9px solid transparent; border-left: 15px solid #fff; }
.pr-yt:hover .pr-yt-play { background: var(--pr-accent); }
.pr-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.pr-video-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.pr-video-body strong { color: var(--pr-ink); } .pr-video-body small { color: var(--pr-meta); font-weight: 600; }
.pr-video-body p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }

/* specs */
.pr-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
@media (min-width: 900px) { .pr-specs { grid-template-columns: 1fr 1fr; } }
.pr-spec { padding: 0; overflow: hidden; }
.pr-spec summary { padding: 12px 16px; font-weight: 800; color: var(--pr-ink); background: var(--pr-alt); cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.pr-spec summary::-webkit-details-marker { display: none; }
.pr-spec summary::after { content: "+"; color: var(--pr-accent); font-weight: 800; }
.pr-spec[open] summary::after { content: "−"; }
.pr-spec[open] summary { border-bottom: 1px solid var(--pr-line); }
.pr-spec dl { margin: 0; }
.pr-spec dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid var(--pr-line); }
.pr-spec dl > div:last-child { border-bottom: 0; }
.pr-spec dt { color: var(--pr-muted); flex-shrink: 0; }
.pr-spec dd { margin: 0; font-weight: 600; color: var(--pr-ink); text-align: right; }

/* prices */
.pr-pricegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pr-pricegrid strong { font-size: 22px; color: var(--pr-ink); }
.pr-pricegrid .is-good { background: var(--pr-green-tint); border-color: transparent; }
.pr-pricegrid .is-good strong { color: var(--pr-green); }

/* faq */
.pr-faq { margin-bottom: 8px; padding: 0; }
.pr-faq summary { padding: 16px 20px; font-weight: 800; color: var(--pr-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; color: var(--pr-accent); }
.pr-faq[open] summary::after { content: "−"; }
.pr-faq p { margin: 0; padding: 0 20px 16px; line-height: 1.6; }

/* mobile sticky bar */
.pr-mbar { display: none; }
@media (max-width: 767px) {
	.pr-phone { padding-bottom: 90px; }
	.pr-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--pr-border); box-shadow: 0 -6px 20px rgba(14,23,38,.08); }
	.pr-mbar > div { flex: 1; }
	.pr-mbar strong { font-size: 18px; color: var(--pr-ink); }
	.pr-mbar .pr-btn { padding: 10px 14px; font-size: 13px; }
	.pr-hero { border-radius: 14px; }
	.pr-phone h2 { font-size: 21px; }
}

/* v1.1 */
.pr-layout.no-side { grid-template-columns: minmax(0, 1fr); }
.pr-content > * { max-width: 780px; }
.pr-spec dl > div.is-long { flex-direction: column; gap: 4px; }
.pr-spec dl > div.is-long dd { text-align: left; font-weight: 500; line-height: 1.55; }
.pr-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pr-section-head h2 { margin: 0; }
.pr-section-head a { font-size: 14px; font-weight: 700; color: var(--pr-accent); text-decoration: none; }
.pr-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .pr-more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pr-more-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--pr-ink); transition: border-color .15s, box-shadow .15s; }
.pr-more-card:hover { border-color: var(--pr-accent); box-shadow: 0 6px 18px rgba(14,23,38,.08); }
.pr-more-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: var(--pr-bg); border-radius: 10px; overflow: hidden; }
.pr-more-img img { width: 100%; height: 100%; object-fit: contain; }
.pr-more-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--pr-muted); }
.pr-more-meta em { font-style: normal; padding: 2px 8px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 800; }
.pr-mini-placeholder { display: block; width: 30%; aspect-ratio: 1 / 2; border-radius: 10px; background: #2A3342; }
.pr-rival .pr-mini-placeholder { width: 26px; height: 48px; aspect-ratio: auto; }