/* The Synap: homepage (front page only). Ported from the approved draft, drafts/homepage.html.
   Palette: black #000, white #F9F9F9, grays #A7A7A7 #646464 #333333, brand orange #E85002,
   gradient #D9C3AB > #F16001 > #C10801 > #000. Every section is a sheet in a deck: rounded top corners,
   pinned once seen, the next sheet slides over it (pins are set by assets/js/home.js). */

body.home { --hp-r: 2.5em; }
.hp-deck { position: relative; font-size: clamp(14px, calc(.5vw + 6.4px), 24px); color: #F9F9F9; --t-h2: clamp(22px, calc(.7vw + 12.6px), 32px); }
.hp-deck a { color: inherit; text-decoration: none; }

/* ---------- the deck ---------- */
.hp-deck > .sy-hero { position: sticky; top: 0; }
.hp-sheet { position: sticky; top: 0; padding: 4.5em var(--page-pad) calc(4.5em + var(--hp-r)); border-radius: var(--hp-r) var(--hp-r) 0 0; background: #000; }
/* each sheet runs one corner radius further down and the next starts that much higher,
   so the rounded corners always sit over the sheet above (never over the page behind) */
.hp-sheet + .hp-sheet { margin-top: calc(-1 * var(--hp-r)); }
.hp-sheet--dark { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
.hp-sheet--light { background: #F9F9F9; color: #000; --bg: #F9F9F9; --lg-tint: transparent; --acc-text: #C8470A; }
.hp-sub + .hp-sub, .sy-ad + .hp-sub { margin-top: 4.5em; }
.hp-sheet--light .sy-ad__label { color: #646464; }
/* the footer is the last card: the spacer lets the last sheet stay pinned while the footer slides over it */
.hp-deck__spacer { height: calc(var(--hp-foot-h, 0px) - var(--hp-r)); }
/* on the homepage the footer card also overlaps the last sheet, like every card in the deck */
body.home .ft { position: relative; z-index: 2; margin-top: calc(-1 * var(--hp-foot-h, var(--hp-r))); border-radius: var(--hp-r) var(--hp-r) 0 0; }

/* justified copy: descriptive paragraphs are a tight, justified block; the last line stays ragged */
.hp-justify { text-align: justify; text-align-last: left; text-wrap: pretty; line-height: 1.14; letter-spacing: -0.012em; word-spacing: -0.02em; }

/* ---------- heads, labels, pills, arrows ---------- */
.hp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-bottom: 1.75em; }
.hp-label { display: block; margin-bottom: .8em; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hp-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; color: inherit; }
/* pills, tabs, chips, panels and the Pulse sheet are Liquid Glass: the material lives in style.css */
.hp-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5em; flex: none; height: 3.125em; padding: 0 .1875em 0 1.5em; border-radius: 999px; font-weight: 500; }
.hp-pill { max-width: 100%; }
.hp-pill > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-ui); }
.hp-deck a:hover .sy-go svg, .hp-deck a:focus-visible .sy-go svg { transform: rotate(45deg); }
/* hover, everywhere on the homepage: no underlines. The photo eases in 4% inside its frame, the title turns orange,
   the arrow circle fills brand orange. On the glass over the gradient (Pulse, picker results) the row lights up instead. */
.hp-hl { transition: color .25s ease; }
.hp-deck a:hover .hp-hl, .hp-deck a:focus-visible .hp-hl { color: var(--acc-text); }
.hp-ph img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.hp-deck a:hover .hp-ph img, .hp-deck a:focus-visible .hp-ph img { transform: scale(1.04); }
.hp-sheet--glass a:hover .hp-hl, .hp-sheet--glass a:focus-visible .hp-hl, .hp-results a:hover .hp-hl, .hp-results a:focus-visible .hp-hl { color: inherit; }
.hp-row, .hp-vs, .hp-res { transition: background-color .25s ease; border-radius: .9em; }
.hp-row:hover, .hp-vs:hover, .hp-res:hover, .hp-row:focus-visible, .hp-vs:focus-visible, .hp-res:focus-visible { background: rgba(255,255,255,.07); }
.hp-sheet--ember a:hover .sy-go, .hp-sheet--ember a:focus-visible .sy-go { background: #F9F9F9; color: #A63A07; }
@media (prefers-reduced-motion: reduce) { .hp-ph img { transition: none; } .hp-deck a:hover .hp-ph img { transform: none; } }
.hp-tag { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
/* a brand name keeps its own spelling (iQOO, not IQOO) */
.hp-tag--name { letter-spacing: .02em; text-transform: none; }
.hp-by { font-size: var(--t-meta); color: rgba(255,255,255,.55); }
.hp-by b { font-weight: 600; color: rgba(255,255,255,.9); }
/* the one small tag: launch status, "Best for gaming", price drops. Outlined, or solid for the strongest state */
.hp-tagpill { display: inline-flex; align-items: center; padding: .3em .75em; 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); }
.hp-tagpill.is-solid { background: #fff; color: #000; box-shadow: none; }
/* price drops, the most useful number in the Pulse: a white pill with the amount in orange (#C8470A on white is 4.6:1) */
.hp-tagpill.hp-drop { background: #F9F9F9; color: #C8470A; box-shadow: none; }
.hp-sheet--light .hp-tagpill { color: rgba(0,0,0,.78); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.hp-by__link { display: inline-flex; margin-left: .2em; padding: .15em .6em; border-radius: 999px; color: inherit; box-shadow: inset 0 0 0 1px currentColor; transition: color .25s ease; }
.hp-by__link:hover { color: var(--acc-text); }

/* light sheets */
.hp-sheet--light .hp-label, .hp-sheet--light .hp-tag, .hp-sheet--light .hp-by { color: #646464; }
.hp-sheet--light .hp-by b { color: #000; }
.hp-sheet--light .sy-go { background: #000; color: #fff; }
.hp-sheet--light :focus-visible { outline-color: #000; }

/* ---------- surfaces: glass (dark), paper (light), thin bezel, photo box ---------- */
.hp-glass { border-radius: 1.75em; }
.hp-paper { border-radius: 1.75em; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05), inset 0 0 0 1px rgba(0,0,0,.06); }
.hp-bezel { padding: .375em; }
.hp-ph { display: block; overflow: hidden; border-radius: calc(1.75em - .375em); background: rgba(255,255,255,.04); }
.hp-sheet--light .hp-ph { background: rgba(0,0,0,.05); }
.hp-ph img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hp-ph.is-product { background: #fff; }
.hp-ph.is-product img { object-fit: contain; padding: 8%; }

/* ---------- segmented control (light) ---------- */
.hp-seg { position: relative; display: inline-flex; align-items: stretch; height: 3.125em; max-width: 100%; padding: .25em; border-radius: 999px; overflow-x: auto; scrollbar-width: none; }
.hp-seg::-webkit-scrollbar { display: none; }
.hp-seg [role="tab"] { position: relative; z-index: 1; flex: none; padding: 0 1.4em; border: 0; border-radius: 999px; background: transparent; color: rgba(0,0,0,.62); font: inherit; font-size: var(--t-ui); font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .25s; }
.hp-seg [role="tab"]:hover { color: #000; }
.hp-seg [role="tab"][aria-selected="true"] { color: #F9F9F9; }
.hp-seg [role="tab"]:focus-visible { outline: 2px solid #000; outline-offset: -2px; }
.hp-seg__thumb { position: absolute; z-index: 0; top: .25em; bottom: .25em; left: 0; width: 0; border-radius: 999px; background: #C8470A; box-shadow: 0 2px 10px rgba(200,71,10,.28); transition: transform .45s cubic-bezier(.22,1,.36,1), width .45s cubic-bezier(.22,1,.36,1); }
/* until the script places the thumb, the selected tab paints its own pill */
.hp-seg:not(.has-thumb) [role="tab"][aria-selected="true"] { background: #C8470A; }

/* ---------- 2 Best phones right now ---------- */
.hp-best-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; margin-bottom: 1.75em; flex-wrap: wrap; }
.hp-best-panel[hidden] { display: none !important; }
.hp-best-panel.is-in { animation: hp-in .35s ease both; }
@keyframes hp-in { from { opacity: 0; } to { opacity: 1; } }
.hp-best { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1em; }
.hp-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; color: #000; }
.hp-pick__ph { position: relative; aspect-ratio: 4 / 5; }
.hp-badge { position: absolute; top: .9em; left: .9em; display: inline-flex; align-items: center; gap: .4em; padding: .45em .8em; border-radius: 999px; background: #fff; color: #000; font-size: var(--t-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.hp-badge svg { width: 1em; height: 1em; color: #E85002; }
.hp-pick__body { display: block; padding: 1.5em 1.8em; }
.hp-pick__name { display: block; margin-top: .5em; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-h2) * 1.1); letter-spacing: -0.03em; line-height: 1.1; }
.hp-pick__verdict { display: block; margin-top: .7em; max-width: 34ch; font-size: var(--t-lead); color: rgba(0,0,0,.72); }
.hp-pick__price { display: block; margin-top: 1.2em; font-size: var(--t-ui); font-weight: 600; }
.hp-pick__price span { display: block; margin-top: .2em; font-size: var(--t-meta); font-weight: 400; color: #646464; }
.hp-pick .hp-pill { margin-top: 1.6em; }
.hp-ranks { display: flex; flex-direction: column; padding: .6em 1.4em; }
.hp-rank { display: grid; grid-template-columns: 2.6em 4.6em minmax(0, 1fr) auto; gap: 1.1em; align-items: center; padding: 1em 0; border-top: 1px solid rgba(0,0,0,.08); color: #000; }
.hp-rank:first-child { border-top: 0; }
.hp-rank__n { font-family: var(--display); font-weight: 500; font-size: calc(var(--t-big) * .7); letter-spacing: -0.04em; color: rgba(0,0,0,.55); }
.hp-rank .hp-ph { aspect-ratio: 1; border-radius: .9em; }
.hp-rank__body { display: block; min-width: 0; }
.hp-rank .hp-hl { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; }
.hp-why { margin-top: .45em; }
.hp-rank__price { text-align: right; font-size: var(--t-ui); font-weight: 600; white-space: nowrap; }
/* Browse by brand */
.hp-brands { display: block; margin-top: 2.5em; padding-top: 2em; border-top: 1px solid rgba(0,0,0,.08); }
.hp-brands__row { display: flex; flex-wrap: wrap; gap: .5em; margin: 0; padding: 0; list-style: none; }
.hp-brand { display: inline-flex; align-items: center; height: 2.6em; padding: 0 1.15em; border-radius: 999px; font-size: var(--t-ui); font-weight: 500; color: #000; }
.hp-brand { transition: color .25s ease; }
.hp-brand .sy-bl, .hp-chip .sy-bl { --bl-h: 1.35em; }
.hp-brand:hover { color: var(--acc-text); }

/* ---------- 5 Coming to India ---------- */
.hp-cal { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5em) / 6); gap: 1em; margin: 0; padding: 2.2em 0 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hp-cal::-webkit-scrollbar { display: none; }
.hp-cal::before { content: ""; position: absolute; top: .55em; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08)); }
.hp-cal > li { display: flex; }
.hp-launch { flex: 1; display: flex; flex-direction: column; min-height: 17em; padding: 1.3em 1.3em 1.3em; color: #F9F9F9; }
.hp-launch::after { content: ""; position: absolute; top: -2.05em; left: 1.3em; width: .75em; height: .75em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .3em rgba(255,255,255,.12); }
.hp-launch.is-next::after { background: #F16001; box-shadow: 0 0 0 .3em rgba(241,96,1,.22); }
.hp-launch__date { display: flex; align-items: baseline; gap: .5em; }
.hp-launch__day { font-family: var(--display); font-weight: 500; font-size: var(--t-big); line-height: 1; letter-spacing: -0.04em; }
.hp-launch__mon { font-size: var(--t-ui); font-weight: 600; }
.hp-launch__when { display: block; margin-top: .4em; font-size: var(--t-meta); color: rgba(255,255,255,.62); }
.hp-launch__name { display: block; margin-top: 1.4em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); letter-spacing: -0.02em; line-height: 1.15; }
.hp-launch__name::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.hp-launch__name { transition: color .25s ease; }
.hp-launch:hover .hp-launch__name { color: var(--acc-text); }
.hp-launch:has(.hp-launch__name:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.hp-launch__name:focus-visible { outline: 0; }
.hp-launch__note { display: block; margin-top: .3em; font-size: var(--t-meta); font-style: italic; color: rgba(255,255,255,.62); }
.hp-launch__price { display: block; margin-top: .4em; font-size: var(--t-meta); color: rgba(255,255,255,.68); }
.hp-launch__foot { display: flex; align-items: center; justify-content: space-between; gap: .5em; margin-top: auto; padding-top: 1.4em; }

.hp-launch__count { font-size: var(--t-meta); font-weight: 600; }
.hp-remind { position: relative; z-index: 3; display: inline-flex; align-items: center; justify-content: center; gap: .5em; width: 100%; height: 2.6em; margin-top: 1em; border: 0; border-radius: 999px; font: inherit; font-size: var(--t-ui); font-weight: 500; color: #F9F9F9; cursor: pointer; }
.hp-remind svg { width: 1.1em; height: 1.1em; }
.hp-remind:hover { background: rgba(255,255,255,.1); }
.hp-remind:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- 3 The phone picker: the brand gradient with white film grain ----------
   The glow rises from the bottom-right corner. Small text only ever sits on the black-to-red part;
   the results panel is dark glass so it reads over any part of the glow. */
/* The grain and the gradient are one background (--ember, also used by the results panel below): white grain on top,
   blended with overlay so particles brighten the colour beneath and pure black stays pure black, then the three glows
   and a black base. Painting it in one go, with no separately blended layer, gives the glass over it one plain surface to frost. */
.hp-sheet--ember { color: #F9F9F9; background-color: #000;
  --ember: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 5 0 0 0 -2.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 45% 70% at 100% 0%, rgba(241,96,1,.5) 0%, rgba(241,96,1,0) 70%),
    radial-gradient(ellipse 55% 75% at 0% 100%, rgba(193,8,1,.55) 0%, rgba(193,8,1,0) 72%),
    radial-gradient(ellipse 95% 135% at 100% 100%, #D9C3AB 0%, #F16001 20%, #C10801 48%, rgba(193,8,1,0) 85%),
    linear-gradient(#000, #000);
  background-image: var(--ember);
  background-size: 200px 200px, auto, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal, normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
/* the gradient mirrored below the picker, so the glass Pulse sheet that slides over it only ever frosts the gradient */
.hp-sheet--ember::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: max(100%, 100vh); background: inherit; background-blend-mode: inherit; transform: scaleY(-1); pointer-events: none; }
.hp-sheet--ember :focus-visible { outline-color: #fff; }
.hp-sheet--ember .hp-label, .hp-sheet--ember .hp-title { color: #F9F9F9; }
.hp-sheet--ember .sy-go { background: #F9F9F9; color: #A63A07; }

.hp-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 4em; align-items: start; }
.hp-picker .hp-title { font-size: calc(var(--t-h2) * 1.25); max-width: 14ch; }
.hp-picker__sub { margin: 1.1em 0 0; max-width: 34ch; font-size: var(--t-lead); color: #F9F9F9; }
.hp-step { margin-top: 2.2em; }
.hp-step h3 { margin: 0 0 .9em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: #F9F9F9; }
.hp-step__hint { margin-left: .4em; font-weight: 500; letter-spacing: .04em; text-transform: none; color: rgba(255,255,255,.8); }
.hp-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.hp-chip { height: 2.6em; padding: 0 1.15em; border: 0; border-radius: 999px; font: inherit; font-size: var(--t-ui); font-weight: 500; color: #F9F9F9; cursor: pointer; transition: background .2s, color .2s; }
.hp-chip:hover { background: rgba(255,255,255,.1); }
.hp-chip[aria-pressed="true"] { background: #F9F9F9; color: #A63A07; box-shadow: none; }
.hp-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hp-results { padding: 1.4em; border-radius: 1.75em; }
.hp-results:empty { display: none; }
/* The results panel is the same glass, frosted from a still copy of the gradient behind it (blurred once, same blur,
   saturation and tint) instead of a live backdrop blur. On a panel this large Chrome redrew the live blur in pieces and
   left a seam down it (2026-10-10). The copy sits under the panel's own tint and bevel, and reaches 45px past its edges
   so the blur has real colour to sample there (the panel clips it, so it never widens the page on phones); home.js lines it up with the sheet (--fx/--fy: the panel's place in the
   sheet, --fw/--fh: the sheet's size). */
.hp-results { isolation: auto; -webkit-backdrop-filter: none; backdrop-filter: none; overflow: hidden; }
.hp-results::after { content: ""; position: absolute; inset: -45px; z-index: -1; pointer-events: none;
  background-image: var(--ember);
  background-size: 200px 200px, var(--fw) var(--fh), var(--fw) var(--fh), var(--fw) var(--fh), var(--fw) var(--fh);
  background-position: calc(45px - var(--fx)) calc(45px - var(--fy));
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-blend-mode: overlay, normal, normal, normal, normal;
  filter: var(--lg-filter); }
@media (prefers-reduced-transparency: reduce) { .hp-results::after { content: none; } }
.hp-results__h { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .2em .3em 1em; font-size: var(--t-meta); color: #F9F9F9; }
.hp-results__h b { font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); }
.hp-res { display: grid; grid-template-columns: 1.8em 5em minmax(0, 1fr) auto; gap: 1em; align-items: center; padding: .9em .3em; border-top: 1px solid rgba(255,255,255,.16); color: #F9F9F9; }
.hp-res__n { font-family: var(--display); font-size: var(--t-card-title); }
.hp-res .hp-ph { aspect-ratio: 1; border-radius: .9em; }
.hp-res__t { display: block; min-width: 0; }
.hp-res .hp-hl { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); }
.hp-res__why { display: block; margin-top: .3em; font-size: var(--t-meta); }
.hp-res__price { font-size: var(--t-ui); font-weight: 600; white-space: nowrap; }
.hp-results__empty { margin: 0; padding: 2em .3em; font-size: var(--t-ui); color: #F9F9F9; }
.hp-results__actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.2em; }
.hp-results .hp-pill { color: #F9F9F9; }

/* ---------- 4 The pulse: the whole sheet is one pane of Liquid Glass; the picker's gradient shows through it ---------- */
/* sheets are black by default; the glass sheet takes the glass tint instead (with the same solid fallback as every glass element) */
.hp-sheet--glass { background: var(--lg-tint); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hp-sheet--glass { background: rgba(8,8,8,.94); } }
@media (prefers-reduced-transparency: reduce) { .hp-sheet--glass { background: rgba(8,8,8,.94); } }
.hp-sheet--glass .hp-label { color: rgba(255,255,255,.74); }
.hp-pulse { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.hp-widget { min-width: 0; padding: .4em 2em .2em; }
.hp-widget:first-child { padding-left: 0; }
.hp-widget:last-child { padding-right: 0; }
.hp-widget + .hp-widget { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
.hp-widget__h { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .6em; }
.hp-widget__h h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; color: #F9F9F9; }
.hp-widget__h span { font-size: var(--t-meta); color: rgba(255,255,255,.74); }
.hp-list { margin: 0; padding: 0; list-style: none; }
.hp-widget__note { margin: .9em 0 0; font-size: var(--t-meta); line-height: 1.4; color: rgba(255,255,255,.74); }
.hp-row { display: grid; grid-template-columns: 1.6em 3.4em minmax(0, 1fr) auto; gap: .9em; align-items: center; padding: .85em 0; border-top: 1px solid rgba(255,255,255,.12); color: #F9F9F9; }
.hp-row__n { font-family: var(--display); font-size: var(--t-ui); color: rgba(255,255,255,.74); }
.hp-row .hp-ph { aspect-ratio: 1; border-radius: .7em; }
.hp-row__t { display: block; min-width: 0; }
.hp-row .hp-hl { display: block; font-size: var(--t-ui); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row__sub, .hp-row__sub s { display: block; margin-top: .2em; font-size: var(--t-meta); color: rgba(255,255,255,.74); }
.hp-row__sub s { display: inline; margin: 0; }
/* peach: still 4.6:1 when the sand corner of the gradient sits behind the glass */
.hp-up { font-size: var(--t-meta); font-weight: 600; white-space: nowrap; color: #FFB27F; }
/* market-style movement arrows: up for interest on Trending, down for a price that dropped */
.hp-trend { display: inline-block; width: 1.1em; height: 1.1em; flex: none; }
.hp-up .hp-trend { margin-right: .3em; vertical-align: -.2em; }
.hp-row__n--icon { display: grid; place-items: center start; }
.hp-row__n--icon .hp-trend { width: 1.15em; height: 1.15em; }

.hp-vs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9em; align-items: center; padding: .85em 0; border-top: 1px solid rgba(255,255,255,.12); color: #F9F9F9; }
.hp-pair { display: flex; }
.hp-pair .hp-ph { width: 2.6em; height: 2.6em; border-radius: 50%; box-shadow: 0 0 0 2px #000; }
.hp-pair .hp-ph + .hp-ph { margin-left: -.8em; }
.hp-vs .hp-hl { font-size: var(--t-ui); font-weight: 600; line-height: 1.35; }
.hp-vs .hp-hl i { font-style: normal; font-weight: 400; color: rgba(255,255,255,.74); }

/* ---------- 6 Reviews ---------- */
.hp-reviews { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.hp-rev { display: flex; flex-direction: column; color: #000; }
.hp-rev__ph { position: relative; aspect-ratio: 4 / 3; }
.hp-score { position: absolute; right: .8em; bottom: .8em; display: grid; place-items: center; align-content: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: #fff; color: #000; font-family: var(--display); font-weight: 600; font-size: var(--t-ui); line-height: 1.1; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.hp-score small { display: block; font-family: var(--font); font-size: max(.62em, 11px); font-weight: 500; color: rgba(0,0,0,.6); }
.hp-rev__body { display: flex; flex-direction: column; flex: 1; padding: 1.1em 1.05em .9em; }
.hp-rev .hp-hl { display: block; margin-top: .5em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; }
.hp-rev__verdict { display: block; margin-top: .6em; font-size: var(--t-ui); color: rgba(0,0,0,.72); }
.hp-buyif { display: grid; gap: .45em; margin-top: 1em; font-size: var(--t-meta); line-height: 1.4; }
.hp-buyif > span { display: grid; grid-template-columns: 4.8em 1fr; color: rgba(0,0,0,.72); }
.hp-buyif b { font-weight: 600; color: #000; }
.hp-rev__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: auto; padding-top: 1.2em; }
.hp-rev .hp-by, .hp-card .hp-by { display: flex; flex-direction: column; gap: .2em; min-width: 0; }

/* ---------- 7 Explainers and guides ---------- */
.hp-explain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.hp-ex { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 1.2em; align-items: center; color: #000; }
.hp-ex .hp-ph { aspect-ratio: 1; }
.hp-ex__body { display: block; padding: .8em 1em .8em 0; }
.hp-ex .hp-hl { 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; }
.hp-ex__mins { display: block; margin-top: .5em; font-size: var(--t-meta); color: #646464; }

/* ---------- 8 Latest: a masonry wall that fades into the sheet ---------- */
.hp-wall { position: relative; }
.hp-wall.is-faded { max-height: 58em; overflow: hidden; }
.hp-wall__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; align-items: start; }
.hp-wall__grid.is-masonry { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.hp-wall__col { display: flex; flex-direction: column; gap: 1em; min-width: 0; }
.hp-card { display: flex; flex-direction: column; color: #000; }
.hp-ph--tall { aspect-ratio: 4 / 5; }
.hp-ph--wide { aspect-ratio: 16 / 10; }
.hp-ph--square { aspect-ratio: 1 / 1; }
.hp-ph--port { aspect-ratio: 3 / 4; }
.hp-card__body { display: block; padding: 1.1em 1.05em .75em; }
.hp-card .hp-hl { display: block; margin-top: .55em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.22; letter-spacing: -0.02em; }
.hp-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 1.3em; }
.hp-wall__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 18em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: .5em; pointer-events: none; background: linear-gradient(180deg, rgba(249,249,249,0), rgba(249,249,249,.85) 55%, #F9F9F9 80%); }
.hp-wall__fade .hp-pill { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) { .hp-seg__thumb { transition: none; } .hp-best-panel.is-in { animation: none; } }

/* touch screens (phones and iPad): every control is at least 44px to hit */
@media (pointer: coarse) {
  .hp-chip, .hp-brand, .hp-remind { height: 44px; }
  .hp-seg { height: 52px; }
  .hp-pill { height: max(3.125em, 44px); }
}

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .hp-cal { grid-auto-columns: calc((100% - 3em) / 4); }
  .hp-reviews, .hp-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-wall__grid:not(.is-masonry) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hp-best { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
  body.home { --hp-r: 1.75em; }
  .hp-deck { font-size: 15px; }
  .hp-sheet { padding: 3.5em 20px calc(3.5em + var(--hp-r)); }
  .hp-head { flex-direction: column; align-items: flex-start; gap: 1.2em; }
  .hp-picker { grid-template-columns: minmax(0, 1fr); gap: 2.5em; }
  .hp-pick { grid-template-columns: minmax(0, 1fr); }
  .hp-pick__ph { aspect-ratio: 16 / 10; }
  .hp-cal { grid-auto-columns: 62%; }
  .hp-pulse, .hp-reviews, .hp-explain { grid-template-columns: minmax(0, 1fr); }
  .hp-widget { padding: 1.4em 0 .4em; }
  .hp-widget:first-child { padding-top: 0; }
  .hp-widget + .hp-widget { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
  .hp-rank { grid-template-columns: 2em 4em minmax(0, 1fr); }
  .hp-rank__price { grid-column: 3; text-align: left; }
  .hp-wall__grid:not(.is-masonry) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-wall__grid, .hp-wall__col { gap: .75em; }
  .hp-wall.is-faded { max-height: 60em; }
  .hp-wall__fade { height: 14em; }
}
/* iPad and other tablets (portrait): not the phone layout stretched wide */
@media (min-width: 640px) and (max-width: 980px) {
  .hp-sheet { padding-left: var(--side); padding-right: var(--side); }
  .hp-head { flex-direction: row; align-items: flex-end; }
  .hp-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hp-pick__ph { aspect-ratio: 4 / 5; }
  .hp-rank { grid-template-columns: 2.6em 4.6em minmax(0, 1fr) auto; }
  .hp-rank__price { grid-column: auto; text-align: right; }
  .hp-cal { grid-auto-columns: 40%; }
  .hp-reviews, .hp-explain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-pulse { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-widget { padding: .4em 1.6em .2em; }
  .hp-widget:first-child { padding-left: 0; padding-top: .4em; }
  .hp-widget:nth-child(2) { padding-right: 0; }
  .hp-widget + .hp-widget { box-shadow: inset 1px 0 0 rgba(255,255,255,.14); }
  .hp-widget:nth-child(3) { grid-column: 1 / -1; margin-top: 1.6em; padding: 1.4em 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
}
/* phones: picker results put the price under the name, so the name and the reason get the width */
@media (max-width: 560px) {
  .hp-res { grid-template-columns: 1.4em 4.2em minmax(0, 1fr); column-gap: .9em; row-gap: .2em; }
  .hp-res__n, .hp-res .hp-ph { grid-row: span 2; }
  .hp-res__price { grid-column: 3; }
}
/* the smallest phones (320 to 400px): tighter rank rows, tags may wrap instead of spilling out */
@media (max-width: 400px) {
  .hp-ranks { padding: .4em 1em; }
  .hp-rank { grid-template-columns: 1.6em 3.2em minmax(0, 1fr); gap: .75em; }
  .hp-tagpill { white-space: normal; }
  .hp-results { padding: 1.1em; }
}
@media (max-width: 560px) {
  .hp-wall__grid:not(.is-masonry) { grid-template-columns: minmax(0, 1fr); }
  .hp-wall.is-faded { max-height: 70em; }
}


/* ---------- The page deck: every inner page, like the homepage ----------
   Every page sits on black at the top (the homepage's dark header, breadcrumbs on black), then the page's main section
   is one card (.pg-sheet) with rounded top corners holding its title (template-parts/page-head.php) and its content
   together, then the footer card slides over it. Pages with a distinct hero (the phone page, a Compare matchup, the
   Phone finder) put that hero on the black first (template-parts/page-band.php), then the card.
   One width everywhere: content sits on --page-pad. Sky, 2026-10-10: one section is one card, no divider inside it. */
.pg { --pg-r: 2.5em; font-size: var(--page-base); color: var(--ink); }
.pg a { color: inherit; text-decoration: none; }
.pg-crumbs { padding: .6em var(--page-pad) 0; font-size: var(--t-meta); color: rgba(255,255,255,.5); }
/* links bright, the page you are on dim: 3:1 apart, so the links read as links without underlines (WCAG link-in-text).
   nav.pg-crumbs outranks the page modules' own "a { color: inherit }", so every page shows the same breadcrumbs. */
nav.pg-crumbs a { color: rgba(255,255,255,.92); }
nav.pg-crumbs a:hover, nav.pg-crumbs a:focus-visible { color: #ffffff; }
.pg-crumbs > span[aria-hidden="true"] { color: rgba(255,255,255,.4); }
.pg-crumbs [aria-current] { color: rgba(255,255,255,.5); }

/* the title block: label, h1, lede, meta, and an optional column on the right */
.pg-head { padding-bottom: 3.4em; }
.pg-label.pg-label--html { display: block; margin-bottom: 1.1em; letter-spacing: 0; text-transform: none; color: var(--ink); }
.pg-label--html .sy-bl { --bl-h: 3em; }
.pg-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4em; }
.pg-head__grid.has-aside { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: clamp(2em, 5vw, 6em); align-items: end; }
.pg-label { display: block; margin: 0 0 .9em; font-family: var(--font); font-size: var(--t-label); font-weight: 600; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.pg-h1 { margin: 0; max-width: 16ch; font-family: var(--display); font-weight: 500; font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
.pg-lede { margin: 1em 0 0; max-width: 44ch; font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.pg-meta { margin: 1.1em 0 0; font-size: var(--t-meta); color: var(--ink-3); }
.pg-meta b { font-weight: 600; color: var(--ink); }
.pg-aside { font-size: var(--t-lead); line-height: 1.45; color: var(--ink-2); }
.pg-aside p { margin: 0 0 .8em; }
.pg-aside .pg-label { margin-bottom: .9em; }
.pg-aside .hp-pill { margin-top: .8em; }

/* the main card */
.pg-sheet { position: relative; z-index: 1; margin-top: 1.2em; padding: 3.4em var(--page-pad) calc(5em + var(--pg-r)); border-radius: var(--pg-r) var(--pg-r) 0 0; background: var(--bg); color: var(--ink); }
.pg-sheet .sy-go { background: var(--ink); color: var(--bg); }
.pg-sheet a:hover .sy-go, .pg-sheet a:focus-visible .sy-go { background: #E85002; color: #fff; }
.pg-sheet .hp-pill { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pg-sheet { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }
}
:root[data-theme="dark"] .pg-sheet { box-shadow: inset 0 1px 0 rgba(255,255,255,.14); }

/* a hero section on the black, before the card (phone page, Compare matchup, Phone finder) */
.pg-band { position: relative; margin-top: 1.2em; padding: 3.4em var(--page-pad) calc(4.4em + var(--pg-r)); border-radius: var(--pg-r) var(--pg-r) 0 0; background: #000; color: #F9F9F9; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); --lg-tint: rgba(0,0,0,.3); --ink: #F9F9F9; --ink-2: rgba(255,255,255,.8); --ink-3: rgba(255,255,255,.62); }
.pg-band.hp-sheet--ember::after { content: none; }
/* the tools' band wears the homepage picker's grain gradient (the .pg-band shorthand above would reset it) */
.pg-band.hp-sheet--ember { background-color: #000; background-image: var(--ember); background-size: 200px 200px, auto, auto, auto, auto; background-blend-mode: overlay, normal, normal, normal, normal; }
.pg-band :focus-visible { outline-color: #fff; }
.pg .pg-band .hp-pill { color: #F9F9F9; }
.pg-band + .pg-sheet { margin-top: calc(-1 * var(--pg-r)); }
.pg-band .pg-head { padding-bottom: 0; } /* the band's own bottom padding is the space */
.pg-band .sy-go { background: #F9F9F9; color: #000; }
.pg-h1 .pg-vs { font-weight: 400; color: var(--ink-3); }

/* the footer card slides over the last card, as on the homepage */
body:not(.home) .ft { position: relative; z-index: 2; margin-top: calc(-1 * var(--pg-r, 2.5em)); }

@media (max-width: 980px) {
  .pg { --pg-r: 1.75em; font-size: 15px; }
  .pg-band { padding: 2.4em var(--page-pad) calc(3.2em + var(--pg-r)); }
  .pg-head__grid.has-aside { grid-template-columns: minmax(0, 1fr); row-gap: 2em; align-items: start; }
  .pg-h1 { font-size: clamp(30px, 8.6vw, 44px); }
  .pg-head { padding-bottom: 2.4em; }
  .pg-sheet { padding-top: 2.4em; padding-bottom: calc(3.5em + var(--pg-r)); }
  body:not(.home) .ft { margin-top: -1.75em; }
}
@media (pointer: coarse) {
  .pg-crumbs a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}

/* the deck in motion (assets/js/deck.js, inner pages): cards pin and the next slides over; the footer card slides over
   the last one. The spacer keeps that last card pinned while the footer rises, exactly as on the homepage. */
.pg-spacer { height: calc(var(--deck-foot-h, 0px) - var(--pg-r, 2.5em)); }
.pp > .pg-spacer { height: calc(var(--deck-foot-h, 0px) - var(--pp-r, 2.5em)); }
body.has-deck .ft { margin-top: calc(-1 * var(--deck-foot-h, 2.5em)); }