:root{ --bg: #ffffff; --bg-2: #f5f5f7; --bg-3: #ebebed; --black: #000000; --graphite: #1d1d1f; --graphite-2: #2c2c2e; --ink: #1d1d1f; --sub: #6e6e73; --line: #d2d2d7; --line-2: #e8e8ed; --ink-d: #f5f5f7; --sub-d: #a1a1a6; --line-d: #3a3a3c; --red: #E21C21; --red-l: #D70015; --red-d: #FF453A; --ok: #1E8E3E; --ok-d: #30D158; --warn: #B25E00; --font: "Inter","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif; --wrap: 1000px; color-scheme: light; }
.ph *{ box-sizing: border-box; }
html{ background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 58px; }
.ph{ margin: 0px; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -0.022em; -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.ph a{ color: inherit; text-decoration: none; }
.ph button, .ph input, .ph select, .ph textarea{ font: inherit; color: inherit; letter-spacing: inherit; }
.ph button{ cursor: pointer; background: none; border: 0px; padding: 0px; }
.ph :focus-visible{ outline: rgb(0, 113, 227) solid 2px; outline-offset: 2px; border-radius: 4px; }
.ph h1, .ph h2, .ph h3, .ph h4, .ph p{ margin: 0px; }
.ph h1, .ph h2, .ph h3, .ph h4{ font-weight: 600; text-wrap: balance; }
.ph img{ max-width: 100%; }
.ph .skip{ position: absolute; left: 16px; top: -60px; z-index: 2147483001; padding: 10px 16px; border-radius: 10px; background: var(--red); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s; }
.ph .skip:focus{ top: 12px; }
.ph .wrap{ max-width: var(--wrap); margin: 0px auto; padding-inline: max(16px, 4vw); }
.ph .wrap-w{ max-width: 1180px; margin: 0px auto; padding-inline: max(16px, 4vw); }
.ph sup{ font-size: 0.55em; vertical-align: super; line-height: 0; margin-left: 1px; }
.ph .sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); }
.ph .gnav{ position: static; height: 58px; background: rgba(20, 20, 22, 0.86); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.ph .gnav .inner{ max-width: 1180px; height: 58px; margin: 0px auto; padding: 0px 20px; display: flex; align-items: center; gap: 4px; justify-content: space-between; }
.ph .gnav .mk{ display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 21px; letter-spacing: -0.01em; color: rgb(255, 255, 255); }
.ph .gnav .mk img{ height: 24px; width: auto; display: block; }
.ph .gnav .links{ display: flex; gap: 2px; align-items: center; }
.ph .nd{ position: relative; }
.ph .ndb{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: rgb(199, 199, 204); padding: 6px 11px; border-radius: 8px; transition: background 0.18s, color 0.18s; }
.ph .ndb:hover, .ph .nd.open .ndb{ background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.ph .ndb.on{ color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.16); font-weight: 600; }
.ph .ndb svg{ opacity: 0.7; transition: transform 0.18s; }
.ph .nd.open .ndb svg{ transform: rotate(180deg); }
.ph .ndm{ position: absolute; top: calc(100% + 8px); left: 0px; min-width: 210px; background: rgb(28, 28, 31); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 6px; display: none; box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 44px; }
.ph .nd.open .ndm{ display: block; }
.ph .ndm a{ display: block; font-size: 13.5px; color: rgb(230, 230, 234); padding: 9px 12px; border-radius: 9px; white-space: nowrap; }
.ph .ndm a:hover{ background: rgba(255, 255, 255, 0.09); color: rgb(255, 255, 255); }
.ph .ndm a.on{ background: rgba(226, 28, 33, 0.22); color: rgb(255, 255, 255); font-weight: 600; }
.ph .msh{ display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(142, 142, 147); margin: 18px 0px 4px; }
.ph .msheet .ms1{ font-size: 20px; font-weight: 600; padding: 10px 0px; }
.ph .msheet .ms2{ font-size: 16px; font-weight: 500; color: rgb(199, 199, 204); padding: 9px 0px 9px 2px; }
.ph .finder{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ph .finder input{ flex: 1 1 230px; min-width: 0px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--ink); font-size: 15px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
.ph .finder input::placeholder{ color: rgb(142, 142, 147); }
.ph .finder input:focus{ outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.ph .finder-out:empty{ display: none; }
.ph .fhit{ margin-top: 14px; background: rgb(255, 255, 255); border: 1px solid var(--line-2); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: rgba(0, 0, 0, 0.07) 0px 6px 22px; }
.ph .fhit-top{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph .fmeta{ font-size: 13px; color: var(--sub); }
.ph .fhit p{ color: var(--sub); font-size: 15px; margin: 0px; }
.ph .facts-row{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.ph .facts-row .btn{ padding: 9px 16px; font-size: 14px; }
.ph .fnope{ margin-top: 14px; background: rgb(255, 255, 255); border: 1px dashed var(--line); border-radius: 14px; padding: 16px 18px; color: var(--sub); font-size: 15px; }
.ph .findbar{ background: var(--bg-2); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: 0px; }
.ph .findbar .wrap-w{ padding-block: clamp(22px, 2.6vw, 34px); }
.ph .fb{ display: grid; grid-template-columns: minmax(0px, 1fr) minmax(300px, 0.9fr); align-items: start; gap: 22px; }
@media (max-width: 820px) {
.ph .fb{ grid-template-columns: 1fr; }
}
.ph .fb .eb{ display: block; margin-bottom: 4px; }
.ph .fb .muted{ font-size: 14.5px; margin-top: 4px; }
.ph .fb-act{ display: flex; gap: 10px; flex-wrap: wrap; }
.ph .gnav .links a{ font-size: 13px; color: rgb(199, 199, 204); padding: 6px 11px; border-radius: 8px; white-space: nowrap; transition: background 0.18s, color 0.18s; }
.ph .gnav .links a:hover{ background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.ph .gnav .links a.on{ color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.16); font-weight: 600; }
.ph .gnav .book{ background: var(--red); color: rgb(255, 255, 255); font-size: 13px; padding: 7px 14px; border-radius: 980px; white-space: nowrap; }
.ph .gnav .book:hover{ background: rgb(239, 46, 51); color: rgb(255, 255, 255); }
.ph .burger{ display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: rgb(245, 245, 247); }
.ph .msheet{ position: fixed; inset: var(--ghead, 132px) 0px 0px; z-index: 49; background: rgb(20, 20, 22); color: rgb(245, 245, 247); padding: 16px max(16px, 5vw) 40px; display: flex; flex-direction: column; overflow: auto; }
.ph .msheet[hidden]{ display: none; }
.ph .msheet a{ font-size: 24px; font-weight: 600; letter-spacing: -0.02em; padding: 10px 0px; border-bottom: 1px solid var(--line-2); }
.ph .ribbon{ background: var(--bg-2); text-align: center; font-size: 14px; padding: 12px 16px; color: var(--sub); }
.ph .ribbon b{ color: var(--ink); font-weight: 600; }
.ph .ribbon a{ color: var(--red-l); }
.ph .ribbon a:hover{ text-decoration: underline; }
/* a link inside running text has to be findable without color: a thin underline, lifted off the baseline */
.ph .ribbon a, .ph figcaption a, .ph .prose a:not(.btn), .ph .src a, .ph .muted a, .ph .lede a, .ph p > a.more{ text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.ph .dot{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 7px; vertical-align: 1px; }
.ph .dot.off{ background: rgb(161, 161, 166); }
.ph section{ padding-block: clamp(56px, 7vw, 88px); }
.ph .sec-2{ background: var(--bg-2); }
.ph .sec-d{ background: var(--graphite); color: var(--ink-d); }
.ph .sec-b{ background: var(--black); color: var(--ink-d); }
.ph .center{ text-align: center; }
.ph .eb{ font-size: 15px; font-weight: 600; color: var(--red-l); letter-spacing: -0.01em; }
.ph .sec-d .eb, .ph .sec-b .eb, .ph .hero.dark .eb, .ph .tile.dark .eb, .ph .b-dark .eb{ color: var(--red-d); }   /* the dark-ground red: 4.9:1 on graphite, 6.2:1 on black; the light-ground red is only 3.1:1 there */
.ph .t-hero{ font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 700; }
.ph .t-1{ font-size: clamp(32px, 4.4vw, 48px); line-height: 1.07; letter-spacing: -0.02em; }
.ph .t-2{ font-size: clamp(24px, 2.8vw, 32px); line-height: 1.12; letter-spacing: -0.01em; }
.ph .t-3{ font-size: 21px; line-height: 1.2; letter-spacing: 0.011em; }
.ph .lede{ font-size: clamp(18px, 1.9vw, 21px); line-height: 1.35; color: var(--sub); max-width: 46ch; }
.ph .sec-d .lede, .ph .sec-b .lede{ color: var(--sub-d); }
.ph .center .lede{ margin-inline: auto; }
.ph .stack{ display: flex; flex-direction: column; gap: 14px; }
.ph .head{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.ph .muted{ color: var(--sub); }
.ph .btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0px 22px; border-radius: 980px; font-size: 17px; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.ph .btn.fill{ background: var(--red); color: rgb(255, 255, 255); }
.ph .btn.fill:hover{ background: rgb(239, 46, 51); }
.ph .btn.line{ box-shadow: inset 0 0 0 1px var(--red-l); color: var(--red-l); }
.ph .btn.line:hover{ background: var(--red-l); color: rgb(255, 255, 255); }
.ph .sec-d .btn.line, .ph .sec-b .btn.line{ box-shadow: inset 0 0 0 1px var(--red-d); color: var(--red-d); }
.ph .sec-d .btn.line:hover, .ph .sec-b .btn.line:hover{ background: var(--red-d); color: rgb(0, 0, 0); }
.ph .btn.ghost{ box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ph .btn.ghost:hover{ background: var(--bg-2); }
.ph .ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ph .center .ctas{ justify-content: center; }
.ph .more{ color: var(--red-l); font-size: 17px; }
.ph .more::after{ content: " ›"; }
.ph .more:hover{ text-decoration: underline; }
.ph .sec-d .more, .ph .sec-b .more{ color: var(--red-d); }
.ph .card[style*="#2c2c2e"] .more, .ph .tile.dark .more, .ph .loc header .more{ color: #FF6B62; }   /* on the mid-grey card the standard red is 4.1:1; this one is 4.9:1 */
.ph .hero{ padding-block: clamp(48px, 6vw, 72px) clamp(40px, 5vw, 64px); text-align: center; }
.ph .hero.dark{ background: var(--black); color: var(--ink-d); }
.ph .hero.dark .lede{ color: var(--sub-d); }
.ph .hero.dark .t-hero span{ color: var(--red-d); }
.ph .hero.dark .btn.ghost{ box-shadow: rgb(72, 72, 74) 0px 0px 0px 1px inset; color: var(--ink-d); }
.ph .hero.dark .btn.ghost:hover{ background: rgb(29, 29, 31); }
.ph .hero.dark .facts{ color: var(--sub-d); }
.ph .hero.dark .facts b{ color: rgb(255, 255, 255); }
.ph .hero .pillbar{ display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; border-radius: 980px; background: rgba(255, 69, 58, 0.14); color: var(--red-d); }
.ph .stats3{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px; margin-top: 30px; width: 100%; max-width: 620px; }
.ph .stat3{ background: rgb(29, 29, 31); border-radius: 14px; padding: 18px 14px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.ph .stat3 b{ font-size: 22px; font-weight: 600; color: rgb(255, 255, 255); letter-spacing: -0.02em; }
.ph .stat3 span{ font-size: 13px; color: var(--sub-d); }
.ph .hero .t-hero span{ color: var(--red-l); }
.ph .facts{ display: flex; gap: clamp(20px, 5vw, 56px); justify-content: center; flex-wrap: wrap; margin-top: 36px; font-size: 14px; color: var(--sub); }
.ph .facts b{ display: block; font-size: 24px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.ph .picker{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 12px; width: 100%; max-width: 620px; margin-top: 22px; }
.ph .pick{ background: rgb(29, 29, 31); border-radius: 14px; padding: 18px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-d); transition: background 0.2s, transform 0.2s; }
.ph .pick:hover{ background: rgb(44, 44, 46); transform: translateY(-2px); }
.ph .pick .gl{ width: 44px; height: 44px; color: rgb(210, 210, 215); }
.ph .pick .gl *{ vector-effect: non-scaling-stroke; }
.ph .card.issue{ align-items: flex-start; }
.ph .card.issue .gl{ width: 40px; height: 40px; color: var(--graphite); }
@media (max-width: 560px) {
.ph .picker{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
.ph .grid{ display: grid; gap: 16px; }
.ph .g2{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.ph .g3{ grid-template-columns: repeat(3, minmax(0px, 1fr)); }
.ph .g4{ grid-template-columns: repeat(4, minmax(0px, 1fr)); }
.ph .card{ background: var(--bg); border-radius: 18px; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; }
.ph .sec-2 .card{ background: rgb(255, 255, 255); }
.ph .card p{ color: var(--sub); font-size: 15px; }
.ph .card .tag{ align-self: flex-start; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgb(231, 246, 236); color: var(--ok); text-transform: uppercase; letter-spacing: 0px; }
.ph .card .tag.w{ background: rgb(253, 241, 224); color: var(--warn); }
.ph .card .gl{ width: 52px; height: 52px; color: var(--graphite); margin-bottom: 6px; }
.ph .card .gl *{ vector-effect: non-scaling-stroke; }
.ph .tiles{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; }
.ph .tile{ position: relative; border-radius: 20px; padding: 28px 26px 0px; min-height: 330px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; overflow: hidden; background: var(--bg-2); transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1); }
.ph .tile:hover{ transform: scale(1.012); }
.ph .tile.dark{ background: var(--graphite); color: var(--ink-d); }
.ph .tile.dark p{ color: var(--sub-d); }
.ph .tile p{ color: var(--sub); font-size: 15px; max-width: 30ch; }
.ph .tile .gl{ width: clamp(96px, 12vw, 124px); height: auto; margin-top: auto; margin-bottom: 26px; color: var(--graphite); }
.ph .tile .tart{ margin-top: auto; width: 76%; max-width: 260px; margin-bottom: 0px; }
.ph .tile .tart .art svg{ width: 100%; height: auto; aspect-ratio: 1 / 1; }
.ph .tile.dark .gl{ color: rgb(210, 210, 215); }
.ph .tile .gl *{ vector-effect: non-scaling-stroke; }
.ph .loc-filter{ display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.ph .loc-filter button{ padding: 8px 16px; border-radius: 980px; font-size: 14px; background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.ph .loc-filter button[aria-pressed="true"]{ background: var(--graphite); color: rgb(255, 255, 255); box-shadow: none; }
.ph .locs{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px; align-items: start; }
.ph .loc{ border-radius: 16px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 3px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; display: flex; flex-direction: column; }
.ph .loc header{ background: var(--graphite); color: rgb(255, 255, 255); padding: 20px 22px; display: flex; flex-direction: column; gap: 5px; }
.ph .loc header h3{ font-size: 22px; letter-spacing: -0.01em; }
.ph .loc header .addr{ font-size: 14px; color: rgb(199, 199, 204); }
.ph .loc header .rate{ font-size: 13px; color: rgb(161, 161, 166); }
.ph .loc .body{ padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1 1 0%; }
.ph .pill{ align-self: flex-start; font-size: 14px; font-weight: 600; padding: 7px 15px; border-radius: 980px; background: rgb(231, 246, 236); color: var(--ok); }
.ph .pill.off{ background: var(--bg-3); color: #5c5c61; }   /* --sub on --bg-3 is 4.3:1; this is 5.5:1 */
.ph table.hrs{ width: 100%; border-collapse: collapse; font-size: 14px; }
.ph table.hrs th{ text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sub); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.ph table.hrs td{ padding: 7px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.ph table.hrs td:last-child{ text-align: right; }
.ph table.hrs tr.now td{ background: rgb(255, 245, 245); font-weight: 600; }
.ph table.hrs tr.shut td:last-child{ color: var(--red-l); }
.ph .loc .acts{ display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ph .loc .acts a{ font-size: 14px; padding: 9px 14px; border-radius: 10px; background: var(--bg-2); color: var(--ink); }
.ph .loc .acts a:hover{ background: var(--bg-3); }
.ph .loc .acts a.pri{ background: var(--red); color: rgb(255, 255, 255); }
.ph .loc .acts a.pri:hover{ background: rgb(239, 46, 51); }
.ph .storecard{ max-width: 620px; margin: 0px auto; }
.ph .nearby{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; }
@media (max-width: 560px) {
.ph .stats3{ grid-template-columns: 1fr; }
.ph .nearby{ grid-template-columns: 1fr; }
}
.ph .rows{ display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ph .row{ display: grid; grid-template-columns: minmax(0px, 1fr) auto; gap: 6px 20px; padding: 20px 0px; border-bottom: 1px solid var(--line); }
.ph .row h4{ font-size: 19px; letter-spacing: 0.011em; }
.ph .row p{ grid-column: 1; color: var(--sub); font-size: 16px; max-width: 62ch; }
.ph .row .when{ font-size: 14px; color: var(--sub); white-space: nowrap; align-self: center; text-align: right; }
.ph .row .when b{ display: block; color: var(--ok); font-weight: 600; }
.ph .row .when.w b{ color: var(--warn); }
.ph .chips{ display: flex; gap: 8px; flex-wrap: wrap; }
.ph .chip{ font-size: 14px; padding: 7px 13px; border-radius: 980px; background: var(--bg-2); color: var(--ink); }
.ph .book-grid{ display: grid; grid-template-columns: minmax(0px, 1.35fr) minmax(0px, 1fr); gap: 24px; align-items: start; }
.ph .step{ background: rgb(255, 255, 255); border-radius: 18px; padding: 24px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ph .step .n{ font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sub); }
.ph .field{ display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--sub); }
.ph .inp, .ph select.inp, .ph textarea.inp{ width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: rgb(255, 255, 255); padding: 10px 12px; font-size: 16px; color: var(--ink); }
.ph textarea.inp{ min-height: 80px; resize: vertical; }
.ph .inp:focus{ outline: none; border-color: rgb(0, 113, 227); box-shadow: rgba(0, 113, 227, 0.18) 0px 0px 0px 3px; }
.ph .two{ display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
.ph .slots{ display: flex; flex-wrap: wrap; gap: 8px; }
.ph .slot{ padding: 9px 14px; border-radius: 10px; font-size: 15px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ph .slot[aria-pressed="true"]{ background: var(--graphite); color: rgb(255, 255, 255); box-shadow: none; }
.ph .slot[disabled]{ opacity: 0.4; cursor: not-allowed; }
.ph .summary{ position: sticky; top: 64px; background: var(--graphite); color: var(--ink-d); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.ph .summary .line{ display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: rgb(210, 210, 215); padding: 8px 0px; border-bottom: 1px solid var(--line-d); }
.ph .summary .line b{ color: rgb(255, 255, 255); font-weight: 600; text-align: right; }
.ph .summary .line.tot{ border-bottom: 0px; font-size: 17px; }
.ph .summary .off{ background: rgba(48, 209, 88, 0.14); color: var(--ok-d); border-radius: 10px; padding: 10px 12px; font-size: 14px; font-weight: 500; }
.ph .done{ background: rgb(255, 255, 255); border-radius: 18px; padding: 32px; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px; }
.ph .done .mark{ width: 56px; height: 56px; border-radius: 50%; background: rgb(231, 246, 236); color: var(--ok); display: flex; align-items: center; justify-content: center; }
.ph .faq{ max-width: 800px; margin: 0px auto; }
.ph .faq details{ border-bottom: 1px solid var(--line); }
.ph .faq summary{ list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0px; font-size: 18px; font-weight: 600; }
.ph .faq summary::-webkit-details-marker{ display: none; }
.ph .faq summary::after{ content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.6px solid var(--sub); border-bottom: 1.6px solid var(--sub); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s; }
.ph .faq details[open] summary::after{ transform: rotate(-135deg) translate(-2px, -2px); }
.ph .faq .a{ padding: 0px 0px 20px; color: var(--sub); max-width: 66ch; }
.ph .seg{ display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bg-3); }
.ph .seg button{ min-height: 32px; padding: 0px 14px; border-radius: 7px; font-size: 14px; color: #5c5c61; }
.ph .seg button[aria-pressed="true"],
.ph .seg button.on{ background: rgb(255, 255, 255); color: var(--ink); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 2px; }
.ph .hero.split{ padding: 0px; text-align: left; background: linear-gradient(rgb(246, 246, 248) 0%, rgb(239, 239, 242) 100%); color: var(--ink); }
.ph .hero-in{ display: grid; grid-template-columns: minmax(0px, 1.08fr) minmax(0px, 0.92fr); gap: clamp(16px, 3vw, 48px); align-items: center; padding-block: clamp(36px, 4.4vw, 64px) clamp(20px, 2.4vw, 32px); }
.ph .hero-txt{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: none; }
.ph .hero-txt .lede{ margin: 0px; max-width: 46ch; }
.ph .hero.split .t-hero{ font-size: clamp(38px, 4.6vw, 64px); letter-spacing: -0.035em; text-wrap: balance; }
.ph .hero.split .t-hero span{ color: var(--red-l); }
.ph .hero.split .ctas{ display: flex; flex-flow: wrap; gap: 12px; justify-content: flex-start; margin-top: 6px; }
.ph .hero.split .picker{ grid-template-columns: repeat(4, minmax(0px, 1fr)); max-width: 520px; gap: 10px; margin-top: 16px; }
.ph .hero.split .pick{ background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px; padding: 14px 8px 12px; font-size: 13px; }
.ph .hero.split .pick:hover{ background: rgb(255, 255, 255); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 26px; }
.ph .hero.split .pick .gl{ width: 34px; height: 34px; color: rgb(110, 110, 115); }
.ph .hero-art{ position: relative; min-height: clamp(260px, 34vw, 470px); display: flex; align-items: center; justify-content: center; }
.ph .hero-art .art{ width: 112%; max-width: none; margin-right: -6%; }
.ph .hero-art .art svg{ aspect-ratio: 1 / 1; width: 100%; height: auto; filter: drop-shadow(rgba(0, 0, 0, 0.18) 0px 30px 50px); }
.ph .strip{ border-top: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.62); }
.ph .strip-in{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; padding-block: 14px; }
.ph .si{ display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgb(58, 58, 60); padding: 6px 10px; border-left: 1px solid rgba(0, 0, 0, 0.08); }
.ph .si:first-child{ border-left: 0px; }
.ph .si .gl{ width: 22px; height: 22px; color: rgb(142, 142, 147); flex: 0 0 auto; }
.ph .bests-sec{ padding-block: clamp(28px, 3.6vw, 52px) 0px; }
.ph .bests{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 18px; }
.ph .best{ position: relative; overflow: hidden; border-radius: 20px; padding: 26px 24px 22px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; min-height: 340px; transition: transform 0.25s cubic-bezier(0, 0, 0.5, 1), box-shadow 0.25s; }
.ph .best:hover{ transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.16) 0px 18px 44px; }
.ph .best .eb{ font-size: 12px; }
.ph .best p{ font-size: 15px; max-width: 26ch; min-height: 3em; }
.ph .best .more{ align-self: start; }
.ph .best-art{ position: absolute; right: 4%; bottom: 6px; width: 50%; pointer-events: none; }
.ph .best-art .art svg{ aspect-ratio: 1 / 1; width: 100%; height: auto; }
.ph .b-lite{ background: rgb(236, 236, 237); color: var(--ink); }
.ph .b-lite p{ color: var(--sub); }
.ph .b-red{ background: var(--red); color: rgb(255, 255, 255); }
.ph .b-red .eb{ color: rgba(255, 255, 255, 0.82); }
.ph .b-red p{ color: rgba(255, 255, 255, 0.9); }
.ph .b-red .more{ color: rgb(255, 255, 255); }
.ph .b-dark{ background: var(--graphite); color: var(--ink-d); }
.ph .b-dark p{ color: var(--sub-d); }
.ph .b-dark .more{ color: rgb(255, 255, 255); }
.ph .story{ padding: 0px; background: rgb(255, 255, 255); color: var(--ink); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.ph .story .wrap-w{ padding-block: clamp(34px, 3.8vw, 54px); display: grid; grid-template-columns: minmax(0px, 1.15fr) minmax(0px, 0.85fr); gap: clamp(20px, 4vw, 52px); align-items: start; }
.ph .quote-xl{ margin: 0px; font-size: clamp(23px, 2.7vw, 36px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 600; max-width: 26ch; text-wrap: balance; }
.ph .quote-xl span{ color: var(--red-l); }
.ph .sig{ margin-top: 16px; font-size: 14px; color: var(--sub); display: flex; align-items: center; gap: 10px; }
.ph .sig::before{ content: ""; width: 26px; height: 2px; background: var(--red); border-radius: 2px; flex: 0 0 auto; }
.ph .vals{ display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0px; padding: 0px; border: 0px; }
.ph .val{ background: var(--bg-2); border-radius: 14px; padding: 16px 18px; }
.ph .val b{ display: block; font-size: 16px; margin-bottom: 4px; }
.ph .val p{ color: var(--sub); font-size: 14.5px; margin: 0px; }
.ph .repl{ background: linear-gradient(rgb(246, 246, 248), rgb(237, 237, 240)); }
.ph .repl .wrap{ padding-block: clamp(40px, 5vw, 72px); }
.ph .repl-in{ display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 62ch; }
.ph .repl .t-1{ max-width: 20ch; }
.ph .repl .ctas{ margin-top: 8px; justify-content: flex-start; }
@media (max-width: 880px) {
.ph .story .wrap-w{ grid-template-columns: 1fr; gap: 22px; }
}
.ph .mi{ width: 100%; height: 100%; display: block; overflow: visible; }
.ph .mi *{ vector-effect: non-scaling-stroke; }
/* The category icons on /buy/ are drawn small and narrow -- a phone, a watch,
   a plug. A non-scaling 5px stroke fills a shape that thin solid black, so
   these let the stroke scale with the box and carry their own weight. */
.ph .mi-cat *{ vector-effect: none; }
.ph .mi-batt .fill{ transform-origin: 23px 60px; fill: var(--red); animation: 4.4s cubic-bezier(0.4, 0, 0.2, 1) 0s infinite normal none running mfill; }
.ph .mi-batt .bolt{ fill: rgb(255, 255, 255); opacity: 0; animation: 4.4s ease 0s infinite normal none running mbolt; }
@keyframes mfill { 
0%{ transform: scaleX(0.06); fill: rgb(226, 28, 33); }
28%{ fill: rgb(232, 161, 0); }
55%{ transform: scaleX(1); fill: rgb(30, 142, 62); }
86%{ transform: scaleX(1); fill: rgb(30, 142, 62); }
100%{ transform: scaleX(0.06); fill: rgb(226, 28, 33); }
}
@keyframes mbolt { 
0%, 40%{ opacity: 0; }
58%, 84%{ opacity: 1; }
100%{ opacity: 0; }
}
.ph .mi-screen .crack{ stroke-dasharray: 120; stroke-dashoffset: 0; animation: 5s ease-in-out 0s infinite normal none running mcrack; }
.ph .mi-screen .tick{ stroke-dasharray: 60; stroke-dashoffset: 60; color: var(--ok); animation: 5s ease-in-out 0s infinite normal none running mtick; }
@keyframes mcrack { 
0%, 18%{ stroke-dashoffset: 0; opacity: 1; }
45%, 86%{ stroke-dashoffset: 120; opacity: 0; }
100%{ stroke-dashoffset: 0; opacity: 1; }
}
@keyframes mtick { 
0%, 45%{ stroke-dashoffset: 60; }
62%, 86%{ stroke-dashoffset: 0; }
92%, 100%{ stroke-dashoffset: 60; }
}
.ph .mi-port .plug{ animation: 3.6s ease-in-out 0s infinite normal none running mplug; }
.ph .mi-port .spark{ opacity: 0; color: var(--ok); animation: 3.6s ease-in-out 0s infinite normal none running mspark; }
@keyframes mplug { 
0%, 12%{ transform: translateY(16px); }
40%, 80%{ transform: translateY(0px); }
100%{ transform: translateY(16px); }
}
@keyframes mspark { 
0%, 38%{ opacity: 0; }
52%, 78%{ opacity: 1; }
100%{ opacity: 0; }
}
.ph .mi-water .drop{ animation: 3.4s ease-in 0s infinite normal none running mdrop; }
.ph .mi-water .wave{ animation: 3s ease-in-out 0s infinite normal none running mwave; }
.ph .mi-water .w2{ animation-delay: 0.35s; opacity: 0.5; }
@keyframes mdrop { 
0%{ transform: translateY(-14px); opacity: 0; }
25%{ opacity: 1; }
70%{ transform: translateY(10px); opacity: 1; }
100%{ transform: translateY(14px); opacity: 0; }
}
@keyframes mwave { 
0%, 100%{ transform: translateX(-4px); }
50%{ transform: translateX(4px); }
}
.ph .mi-clock .arc{ stroke-dasharray: 252; stroke-dashoffset: 252; color: var(--red-l); animation: 4s linear 0s infinite normal none running marc; }
.ph .mi-clock .hand{ transform-origin: 60px 60px; animation: 4s linear 0s infinite normal none running mhand; }
@keyframes marc { 
0%{ stroke-dashoffset: 252; }
70%, 100%{ stroke-dashoffset: 38; }
}
@keyframes mhand { 
0%{ transform: rotate(0deg); }
70%, 100%{ transform: rotate(305deg); }
}
.ph .mi-scan .beam{ animation: 3.2s cubic-bezier(0.5, 0, 0.5, 1) 0s infinite normal none running mbeam; color: var(--red-l); }
@keyframes mbeam { 
0%{ transform: translateY(0px); opacity: 0; }
10%{ opacity: 1; }
90%{ opacity: 1; }
100%{ transform: translateY(82px); opacity: 0; }
}
.ph .mi-glass .shard{ animation: 4s ease-in-out 0s infinite normal none running mshard; }
.ph .mi-glass .s2{ animation-delay: 0.18s; }
.ph .mi-glass .s3{ animation-delay: 0.36s; }
@keyframes mshard { 
0%, 10%{ transform: translate(0px, 0px); opacity: 1; }
45%{ transform: translate(6px, -6px); opacity: 0.25; }
80%, 100%{ transform: translate(0px, 0px); opacity: 1; }
}
.ph .mi-hdmi .plug2{ animation: 3.6s ease-in-out 0s infinite normal none running mplug; }
.ph .mi-shield .tick{ stroke-dasharray: 60; stroke-dashoffset: 60; color: var(--ok); animation: 3.6s ease-in-out 0s infinite normal none running mtick2; }
@keyframes mtick2 { 
0%, 20%{ stroke-dashoffset: 60; }
45%, 85%{ stroke-dashoffset: 0; }
100%{ stroke-dashoffset: 60; }
}
.ph .mi-chip .pins{ animation: 2.8s ease-in-out 0s infinite normal none running mpins; }
@keyframes mpins { 
0%, 100%{ opacity: 0.35; }
50%{ opacity: 1; color: var(--red-l); }
}
.ph .mi-lock .shackle{ transform-origin: 60px 52px; animation: 4s ease-in-out 0s infinite normal none running mlock; }
@keyframes mlock { 
0%, 15%{ transform: translateY(-8px); }
40%, 90%{ transform: translateY(0px); }
100%{ transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.ph .mi *{ animation: auto ease 0s 1 normal none running none !important; }
.ph .mi-batt .fill{ transform: scaleX(1); fill: rgb(30, 142, 62); }
}
.ph .fin{ background: linear-gradient(135deg, rgb(22, 22, 26) 0%, rgb(38, 38, 44) 60%, rgb(58, 20, 22) 100%); color: var(--ink-d); padding: 0px; }
.ph .fin .wrap-w{ padding-block: clamp(34px, 4vw, 58px); }
.ph .fin-in{ display: grid; grid-template-columns: minmax(0px, 1.02fr) minmax(0px, 0.98fr); gap: clamp(22px, 4vw, 52px); align-items: center; }
.ph .fin .t-1{ color: rgb(255, 255, 255); }
.ph .fin .t-1 span{ color: var(--red-d); }
.ph .fin .lede{ color: rgb(214, 214, 219); max-width: 46ch; }
.ph .fin .eb{ color: var(--red-d); }
.ph .fin .ctas{ justify-content: flex-start; margin-top: 6px; }
.ph .fin .btn.line{ box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; color: rgb(255, 255, 255); }
.ph .fin .btn.line:hover{ background: rgba(255, 255, 255, 0.1); }
.ph .fin-steps{ display: flex; flex-direction: column; gap: 12px; }
.ph .fst{ display: flex; gap: 14px; align-items: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 14px 16px; }
.ph .fst b{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: rgb(255, 255, 255); display: grid; place-items: center; font-size: 14px; }
.ph .fst h3{ font-size: 16px; margin: 2px 0px 4px; }
.ph .fst p{ margin: 0px; font-size: 14.5px; color: rgb(199, 199, 204); }
.ph .fin-card{ border: 1px solid rgba(226, 28, 33, 0.35); background: linear-gradient(rgb(255, 255, 255), rgb(255, 247, 247)); }
@media (max-width: 880px) {
.ph .fin-in{ grid-template-columns: 1fr; }
}
.ph .badges{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ph .bdg{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: rgb(255, 255, 255); color: var(--ink); box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px; }
.ph .bdg::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.ph .mibox{ display: block; width: 56px; height: 56px; color: var(--graphite); margin-bottom: 2px; }
.ph .mibox.sm{ width: 40px; height: 40px; }
.ph .mibox.xs{ width: 30px; height: 30px; position: absolute; right: 18px; top: 16px; color: var(--sub); opacity: 0.85; }
.ph .card.issue .mibox{ width: 46px; height: 46px; }
.ph .card.why{ display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ph .row{ position: relative; padding-right: 64px; }
.ph .tile .rend{ width: clamp(120px, 16vw, 168px); height: auto; margin-top: auto; margin-bottom: 22px; pointer-events: none; }
.ph .shot-band{ padding-block: clamp(28px, 4vw, 48px); }
.ph .shot{ margin: 0px; border-radius: 18px; overflow: hidden; background: var(--bg-2); box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 2px, rgba(0, 0, 0, 0.08) 0px 12px 34px; }
.ph .shot img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
/* the illustration wrappers are <span class="art">; line-height:0 kills the
   inline-image gap under them. Scoped to span because the blog articles are
   <article class="art"> -- unscoped, this collapsed every paragraph in every
   article to zero height and the text piled on top of itself. */
.ph span.art{ display: block; line-height: 0; }
.ph .art svg{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.ph .shot.wide .art svg{ aspect-ratio: 21 / 9; }
.ph .post .ph .art svg{ aspect-ratio: 16 / 9; }
.ph .locpic .art svg{ aspect-ratio: 21 / 9; }
.ph .shot.big img{ aspect-ratio: 21 / 9; }
.ph .shot figcaption{ padding: 12px 16px; font-size: 13px; color: var(--sub); background: rgb(255, 255, 255); }
.ph .duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ph .duo .shot img{ aspect-ratio: 4 / 3; height: auto; }
.ph .locpic{ border-radius: 14px 14px 0px 0px; overflow: hidden; background: var(--bg-3); }
.ph .locpic img{ display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ph .quote{ margin: 0px; background: rgb(255, 255, 255); border: 1px solid var(--line-2); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
.ph .quote .stars{ color: rgb(232, 161, 0); letter-spacing: 2px; font-size: 14px; }
.ph .quote blockquote{ margin: 0px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.ph .quote figcaption{ font-size: 13px; color: var(--sub); }
.ph .quote figcaption a{ color: var(--red-l); text-decoration: none; }
.ph .quote figcaption a:hover{ text-decoration: underline; }
.ph .post{ display: flex; flex-direction: column; background: rgb(255, 255, 255); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; transition: transform 0.22s, box-shadow 0.22s; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
.ph .post:hover{ transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px; }
.ph .post .ph{ display: block; background: var(--bg-3); }
.ph .post .ph img{ display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ph .post .body{ padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.ph .post .meta{ font-size: 13px; color: var(--sub); }
.ph .post p{ color: var(--sub); font-size: 15px; }
.ph .post.lead{ display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }
.ph .post.lead .ph img{ height: 100%; aspect-ratio: auto; min-height: 280px; }
.ph .post.lead .body{ padding: clamp(20px, 3vw, 34px); justify-content: center; gap: 12px; }
.ph .arthead{ padding-block: clamp(34px, 5vw, 56px) clamp(18px, 2vw, 26px); background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.ph .arthead .back{ font-size: 14px; color: var(--red-l); display: block; margin-bottom: 14px; }
.ph .arthead .eb{ display: block; margin-bottom: 6px; }
.ph .arthead .meta{ margin-top: 10px; font-size: 14px; color: var(--sub); }
.ph .art .shot{ margin-block: clamp(20px, 3vw, 30px); }
.ph .prose{ padding-block: clamp(18px, 3vw, 28px) clamp(14px, 2vw, 20px); max-width: 74ch; }
.ph .prose h2{ font-size: clamp(22px, 2.4vw, 28px); margin: 30px 0px 6px; }
.ph .prose h3{ font-size: clamp(18px, 2vw, 21px); margin: 22px 0px 4px; }
.ph .prose{ line-height: 1.62; }
.ph .prose p{ margin: 14px 0px; color: rgb(58, 58, 60); }
.ph .prose h2, .ph .prose h3{ line-height: 1.2; }
.ph .prose li{ line-height: 1.6; }
.ph .prose ul, .ph .prose ol{ margin: 12px 0px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: rgb(58, 58, 60); }
.ph .artcta{ margin-block: 10px 40px; padding: 24px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ph .staffbar{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-d); }
.ph .staffbar .staff{ display: inline-flex; align-items: center; gap: 10px; color: rgb(245, 245, 247); font-size: 13px; }
.ph .staffbar .staff:hover{ text-decoration: underline; }
.ph .staffbar .k{ background: var(--red); color: rgb(255, 255, 255); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.ph .staffbar .ar{ opacity: 0.7; }
.ph .staffbar .note{ font-size: 11px; color: var(--sub-d); }
.ph .statband{ background: var(--graphite); color: var(--ink-d); }
.ph .statband .wrap-w{ padding-block: clamp(30px, 3.6vw, 48px); }
.ph .statgrid{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px; }
.ph .stat4{ position: relative; display: flex; flex-direction: column; gap: 5px; padding: 18px 16px 16px; border-radius: 16px;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s, border-color .22s; }
.ph .stat4::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--sc); }
.ph .stat4::after{ content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px; border-radius:50%;
  background: var(--sc); opacity:.11; filter: blur(14px); transition: opacity .25s, transform .25s; }
.ph a.stat4:hover{ transform: translateY(-3px); background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.18); }
.ph a.stat4:hover::after{ opacity:.22; transform: scale(1.15); }
.ph a.stat4:focus-visible{ outline: 2px solid var(--sc); outline-offset: 3px; }
.ph .stat4 .si{ width: 26px; height: 26px; color: var(--sc); display:block; }
.ph .stat4 .si svg{ width:100%; height:100%; display:block; }
.ph .stat4 b{ font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums; display:flex; align-items:baseline; gap:3px; }
.ph .stat4 b .sk{ font-style: normal; color: var(--sc); font-size: .74em; }
.ph .stat4 b .un{ font-style: normal; font-size: .46em; font-weight: 600; color: var(--sub-d); letter-spacing: 0; margin-left: 3px; }
.ph .stat4 > span{ font-size: 14px; color: var(--sub-d); }
.ph .stat4 .go{ font-style: normal; font-size: 13px; font-weight: 600; color: var(--sc); opacity: 0; transform: translateY(-3px);
  transition: opacity .22s, transform .22s; margin-top: 2px; }
.ph .stat4 .go::after{ content: " \203A"; }
.ph a.stat4:hover .go, .ph a.stat4:focus-visible .go{ opacity: 1; transform: none; }
.ph .s-red{ --sc: #FF453A; } .ph .s-amber{ --sc: #FFB020; }
.ph .s-green{ --sc: #30D158; } .ph .s-sky{ --sc: #4DA3FF; }
@media (max-width: 780px){ .ph .stat4 .go{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .ph a.stat4:hover{ transform:none; } }
@media (max-width: 780px) {
.ph .statgrid{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
.ph .pol{ padding-block: 22px; border-top: 1px solid var(--line-2); }
.ph .pol:first-child{ border-top: 0px; padding-top: 6px; }
.ph .pol ul, .ph .pol ol{ margin: 12px 0px 0px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--sub); max-width: 78ch; }
.ph .pol li{ font-size: 15.5px; line-height: 1.5; }
.ph .fineline{ padding-block: 16px 4px; font-size: 12px; }
.ph .fineline a{ color: rgb(199, 199, 204); }
.ph .fineline a:hover{ color: rgb(255, 255, 255); text-decoration: underline; }
.ph footer{ background: var(--graphite); color: var(--sub-d); font-size: 12px; line-height: 1.4; }
.ph footer .wrap-w{ padding-block: 20px 24px; }
.ph .fine{ padding-bottom: 14px; border-bottom: 1px solid var(--line-d); }
.ph .fine ol{ margin: 0px; padding-left: 16px; display: flex; flex-direction: column; gap: 7px; }
.ph .dir{ display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 22px; padding-block: 22px; border-bottom: 1px solid var(--line-d); }
.ph .dir h4{ margin: 0px 0px 10px; font-size: 12px; color: rgb(245, 245, 247); }
.ph .dir ul{ list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 9px; }
.ph .dir a:hover{ color: rgb(245, 245, 247); text-decoration: underline; }
.ph .legal{ display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 14px; }
.ph .rv{ transition: transform 0.8s cubic-bezier(0, 0, 0.2, 1); }
.ph .rv.pre{ transform: translateY(26px); }
@media (prefers-reduced-motion: reduce) {
.ph *{ transition: none !important; scroll-behavior: auto !important; }
.ph .rv.pre{ transform: none; }
}
@media (max-width: 940px) {
.ph .gnav .links{ display: none; }
.ph .burger{ display: inline-flex; }
.ph .tiles, .ph .g3, .ph .g4{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.ph .locs, .ph .book-grid, .ph .g2{ grid-template-columns: 1fr; }
.ph .summary{ position: static; }
}
@media (max-width: 560px) {
.ph .tiles, .ph .g2, .ph .g3, .ph .g4{ grid-template-columns: 1fr; }
.ph .dir{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.ph .hero-in{ grid-template-columns: 1fr; padding-bottom: 0px; }
.ph .hero-txt{ max-width: none; align-items: center; text-align: center; }
.ph .hero.split .ctas{ justify-content: center; }
.ph .hero-art{ min-height: 0px; margin-top: 6px; }
.ph .hero-art .art{ width: 86%; margin-right: 0px; }
.ph .strip-in{ grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.ph .si:nth-child(3){ border-left: 0px; }
.ph .bests{ grid-template-columns: 1fr; }
.ph .best{ padding-bottom: 120px; }
.ph .post.lead{ grid-template-columns: 1fr; }
.ph .post.lead .ph img{ min-height: 0px; aspect-ratio: 16 / 9; }
.ph .duo{ grid-template-columns: 1fr; }
.ph .shot.big img{ aspect-ratio: 16 / 9; }
.ph .shot.wide .art svg{ aspect-ratio: 16 / 9; }
.ph .facts{ gap: 18px 28px; }
.ph .row{ grid-template-columns: 1fr; }
.ph .row .when{ text-align: left; }
}.ph .langbar{display:flex;justify-content:flex-end;margin-bottom:18px}
.ph .hero.dark .seg{background:rgba(255,255,255,.12)}
.ph .hero.dark .seg button{color:rgba(255,255,255,.72)}
.ph .hero.dark .seg button[aria-pressed="true"],.ph .hero.dark .seg button.on{background:#fff;color:var(--ink)}
.ph .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ph form.apply{max-width:720px;margin:0 auto}
.ph .step[hidden]{display:none!important}
.ph .stepbar{display:flex;gap:6px;max-width:720px;margin:0 auto 14px}
.ph .stepbar span{flex:1;height:4px;border-radius:99px;background:var(--bg-3)}
.ph .stepbar span.on{background:var(--red)}
.ph .step .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ph .field.chk{flex-direction:row;align-items:flex-start;gap:10px;line-height:1.5}
.ph .field.chk input{margin-top:3px;width:18px;height:18px;flex:0 0 auto}
.ph .inp:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,28,33,.18)}
.ph .step input[type=file].inp{padding:9px 12px;min-height:44px}
.ph .sent{background:#fff;border-radius:18px;padding:32px;text-align:center;max-width:720px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
.ph .sent .eb{display:block;margin-bottom:8px}
.ph .err{background:#fff4f4;border:1px solid rgba(226,28,33,.35);border-radius:12px;padding:12px 14px;margin-bottom:14px;color:#8a1020;max-width:720px;margin-left:auto;margin-right:auto}
@media(max-width:640px){.ph .step{padding:18px}.ph form.apply .two{grid-template-columns:1fr}}

/* ---- C: finder-led hero ---- */
.ph .hero.split .hero-find{display:flex;gap:8px;margin-top:20px;max-width:460px}
.ph .hero.split .hero-find input{
  flex:1;min-height:46px;border-radius:11px;border:1px solid var(--line);
  background:#fff;padding:10px 14px;font-size:16px;color:var(--ink);
}
.ph .hero.split .hero-find input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,28,33,.18)}
.ph .hero.split .hero-find .btn{white-space:nowrap;border-radius:11px}
.ph .hero-open{margin-top:10px;font-size:14px}
.ph .hero.split .finder-out:not(:empty){margin-top:14px;max-width:560px}
.ph .hero.split .ctas{margin-top:16px}

/* ---- B: one idea per panel ---- */
.ph .bpanels{padding-block:0}
.ph .bp{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:0;align-items:stretch;border-top:1px solid var(--line);
}
.ph .bpanels .bp:last-child{border-bottom:1px solid var(--line)}
.ph .bp-txt{padding:clamp(34px,4vw,58px) clamp(4px,3vw,44px) clamp(34px,4vw,58px) 0;display:flex;flex-direction:column;justify-content:center}
.ph .bp-txt .eb{margin-bottom:6px}
.ph .bp-txt .lede{margin-top:10px;max-width:44ch}
.ph .bp-txt .fine{margin-top:12px;max-width:52ch}
.ph .bp-txt .ctas{margin-top:20px}
.ph .rulebar{display:block;width:44px;height:3px;background:var(--red);margin-bottom:18px;border-radius:2px}
.ph .bp-art{
  position:relative;background:var(--bg-2);border-left:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;min-height:230px;
}
.ph .bp.flip .bp-txt{order:2;padding-left:clamp(4px,3vw,44px);padding-right:0}
.ph .bp.flip .bp-art{order:1;border-left:0;border-right:1px solid var(--line)}
.ph .bp-flag{
  position:absolute;left:18px;top:16px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--sub);
}
.ph .bp-art .art{display:block;width:100%;padding:26px;color:var(--red)}
.ph .bp-art .art svg{border-radius:10px}
.ph .bp-art .art svg{width:100%;height:auto;display:block}
/* the finance panel used a full-bleed graphite slab while every other panel
   sat on light grey -- give it the same light panel with a dark stage inside,
   so the three rows read as one rhythm */
.ph .bp.fin-panel .bp-art{background:var(--bg-2)}
.ph .bp.fin-panel .bp-art .art{
  color:var(--red-d);background:var(--graphite);border-radius:14px;
  width:auto;margin:clamp(20px,2.4vw,30px);padding:clamp(14px,2vw,22px);
}
.ph .bp.fin-panel .bp-flag{color:var(--sub)}
.ph .bp-art .art svg{max-width:330px;margin-inline:auto}

@media(max-width:820px){
  .ph .bp{grid-template-columns:1fr}
  .ph .bp-txt,.ph .bp.flip .bp-txt{order:2;padding:26px 0 34px}
  .ph .bp-art,.ph .bp.flip .bp-art{order:1;border:0;border-bottom:1px solid var(--line);min-height:170px;padding:26px 0}
  .ph .hero.split .hero-find{flex-direction:column;max-width:none}
  .ph .hero.split .hero-find .btn{width:100%}
}

/* ---- preserved original copy: collapsed, and readable when opened ---- */
.ph details.legacy{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ph details.legacy>summary{
  list-style:none;cursor:pointer;padding:18px 0;display:flex;flex-direction:column;gap:3px;
  position:relative;padding-right:34px;
}
.ph details.legacy>summary::-webkit-details-marker{display:none}
.ph details.legacy>summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);
  transform:rotate(45deg);transition:transform .2s;
}
.ph details.legacy[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
.ph details.legacy>summary:hover .t-3{color:var(--red)}
.ph details.legacy .prose{max-width:66ch;padding-block:4px 26px}
.ph details.legacy .prose p{margin:14px 0;line-height:1.62}
.ph details.legacy .prose h2,.ph details.legacy .prose h3{margin-top:26px}
.ph .prose ul.terms{
  display:flex;flex-direction:column;gap:0;padding:0;margin:6px 0 20px;list-style:none;
  max-width:none;
}
.ph .prose ul.terms li{
  padding:9px 0;border-bottom:1px solid var(--line-2);font-weight:600;color:var(--ink);
}
.ph .prose ul.terms li::first-letter{text-transform:uppercase}
@media(min-width:700px){
  .ph .prose ul.terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
}

/* ---- instant quote widget, in our own frame ---- */
.ph .qwrap{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 18px 40px -28px rgba(0,0,0,.4);
}
.ph iframe.qframe{display:block;width:100%;border:0;height:620px;transition:height .18s ease}
@media(max-width:640px){.ph iframe.qframe{height:760px}.ph .qwrap{border-radius:12px}}

/* ---- prepaid plan comparison ---- */
.ph .planresult{margin-top:22px}
.ph .planresult .head{margin-bottom:18px}
.ph .card.best-plan{box-shadow:inset 0 0 0 2px var(--red);background:#fff}
.ph .planprice{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:6px 0 10px;color:var(--ink)}
.ph .planprice span{font-size:14px;font-weight:500;color:var(--sub);letter-spacing:0;margin-left:4px}
.ph ul.planspec{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.ph ul.planspec li{padding-left:16px;position:relative;line-height:1.45}
.ph ul.planspec li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:99px;background:var(--line)}
.ph ul.planspec li.muted::before{background:var(--line-2)}
.ph .saves{margin-top:12px;font-weight:700;color:var(--ok);font-size:14.5px}
.ph .carrier{margin-bottom:26px}
.ph .carrier h3{margin-bottom:10px}
.ph .planrows{border-top:1px solid var(--line)}
.ph .planrow{
  display:grid;grid-template-columns:minmax(0,1.4fr) 96px minmax(0,1.2fr) auto;
  gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;
}
.ph .planrow .pri{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ph .planrow .pri i{font-style:normal;font-weight:500;color:var(--sub);font-size:13px}
@media(max-width:700px){
  .ph .planrow{grid-template-columns:1fr auto;row-gap:3px}
  .ph .planrow .pri{grid-row:1;grid-column:2}
  .ph .planrow span:not(.pri){font-size:13.5px}
}

/* ---- price your device ---- */
.ph .pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(20px,3vw,40px);align-items:start}
.ph .pd-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:26px}
.ph .pd-fields label:nth-child(-n+3){grid-column:1/-1}
.ph .pd-field{position:relative;display:block}
.ph .pd-field span{
  position:absolute;left:15px;top:9px;font-size:12px;color:var(--sub);pointer-events:none;letter-spacing:.01em;
}
.ph .pd-field select{
  width:100%;appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);border-radius:12px;background:var(--bg-2);
  padding:27px 38px 10px 14px;font-size:16px;font-weight:700;color:var(--ink);
  min-height:62px;cursor:pointer;
}
.ph .pd-field::after{
  content:"";position:absolute;right:16px;top:34px;width:9px;height:9px;
  border-right:2px solid var(--sub);border-bottom:2px solid var(--sub);
  transform:rotate(45deg);pointer-events:none;
}
.ph .pd-field select:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,28,33,.16)}

.ph .pd-q{margin-bottom:16px}
.ph .pd-qt{font-size:15px;font-weight:700;margin:0 0 8px}
.ph .pd-yn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:300px}
.ph .pd-opt{
  border:1.5px solid var(--line);background:var(--bg-2);border-radius:12px;
  padding:9px 12px;display:flex;flex-direction:row;align-items:center;gap:9px;
  cursor:pointer;color:var(--graphite);transition:border-color .15s,background .15s;
  min-height:48px;justify-content:flex-start;
}
.ph .pd-opt svg{width:24px;height:24px;flex:0 0 auto}
.ph .pd-opt span{font-size:15px;font-weight:600;color:var(--ink)}
.ph .pd-opt:hover{border-color:var(--sub)}
.ph .pd-opt.on.good{border-color:var(--ok);background:#F2FAF4;box-shadow:inset 0 0 0 1px var(--ok)}
.ph .pd-opt.on.good span,.ph .pd-opt.on.good svg{color:var(--ok)}
.ph .pd-opt.on.bad{border-color:var(--red);background:#FFF5F5;box-shadow:inset 0 0 0 1px var(--red)}
.ph .pd-opt.on.bad span,.ph .pd-opt.on.bad svg{color:var(--red)}
.ph .pd-opt.good:focus-visible{outline:2px solid var(--ok);outline-offset:2px}
.ph .pd-opt.bad:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .pd-q.missing .pd-qt{color:var(--red)}
.ph .pd-q.missing .pd-opt{border-color:rgba(226,28,33,.5)}
.ph .pd-go{width:100%;max-width:300px;min-height:54px;font-size:17px;font-weight:700;margin-top:4px}

.ph .pd-panel{position:sticky;top:74px;min-height:320px;display:flex;flex-direction:column;justify-content:center}
.ph .pd-panel .pd-idle{background:var(--bg-2);border:1px solid var(--line);border-radius:18px;padding:clamp(24px,3vw,34px)}
.ph .pd-idle{text-align:center;color:var(--sub)}
.ph .pd-idle svg{width:78px;height:78px;color:var(--red);opacity:.55;margin-bottom:14px}
.ph .pd-idle h3{color:var(--ink);margin:0 0 8px}
.ph .pd-idle p{margin:0;max-width:34ch;margin-left:auto;margin-right:auto}


/* result card -- these had gone missing, which left the tick/cross SVGs
   unbounded and filling the panel */
.ph .pd-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 14px 34px -14px rgba(0,0,0,.16)}
.ph .pd-head{padding:clamp(18px,2.4vw,24px);border-bottom:1px solid var(--line-2);background:var(--bg-2)}
.ph .pd-head h3{margin:0;font-size:clamp(19px,2.2vw,23px);letter-spacing:-.02em}
.ph .pd-spec{margin:3px 0 0;font-size:14px;color:var(--sub)}
.ph .pd-checks{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:7px}
.ph .pd-checks li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.35;color:var(--sub)}
.ph .pd-checks li svg{flex:0 0 auto;width:16px;height:16px;margin-top:1px}
.ph .pd-checks li.ok{color:var(--ok)}
.ph .pd-checks li.no{color:var(--red-l)}
.ph .pd-checks li.neutral{color:var(--sub)}
.ph .pd-body{padding:clamp(18px,2.4vw,24px);display:flex;flex-direction:column}
.ph .pd-body .eb{font-size:13px;margin-bottom:2px}
.ph .pd-price{margin:0 0 14px;font-size:clamp(38px,5.4vw,54px);font-weight:700;letter-spacing:-.035em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.ph .pd-small{margin:12px 0 0;font-size:13px;color:var(--sub)}
.ph .fnope{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,3vw,28px);text-align:center;color:var(--sub);margin:0}

.ph .pd-noted{border-top:1px solid var(--line);padding-top:14px;margin-bottom:14px}
.ph .pd-noted span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.ph .pd-noted ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:6px}
.ph .pd-noted li{font-size:14px;padding-left:16px;position:relative}
.ph .pd-noted li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:99px;background:var(--red)}
.ph .pd-clean{font-size:14.5px;color:var(--ok);font-weight:600;margin:0 0 14px}
.ph .pd-est{font-size:13.5px;color:var(--sub);background:#fff;border-radius:10px;padding:11px 13px;margin:0 0 16px}
.ph .pd-est b{color:var(--ink)}

@media(max-width:900px){
  .ph .pd{grid-template-columns:1fr}
  .ph .pd-panel{position:static;order:2}
  .ph .pd-yn,.ph .pd-go{max-width:360px}
}
@media(max-width:520px){
  .ph .pd-fields{grid-template-columns:1fr}
  .ph .pd-fields label:nth-child(-n+3){grid-column:auto}
}


/* ---- language switch ---- */
.ph .langsw{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:rgba(255,255,255,.12);margin-right:10px}
.ph .langsw button{
  min-height:26px;padding:0 9px;border-radius:6px;font-size:12px;font-weight:700;letter-spacing:.03em;
  color:rgba(255,255,255,.72);cursor:pointer;
}
.ph .langsw button[aria-pressed="true"]{background:#fff;color:var(--ink)}
.ph .langsw button:focus-visible{outline:2px solid #fff;outline-offset:1px}
@media(max-width:820px){.ph .langsw{margin-right:6px}.ph .langsw button{padding:0 7px;font-size:11px}}

/* language switch inside the mobile sheet */
.ph .msheet .mslang{display:flex;justify-content:center;padding-bottom:6px}
.ph .msheet .mslang .langsw{margin-right:0;background:rgba(255,255,255,.14)}
.ph .msheet .mslang .langsw button{font-size:13px;padding:4px 14px;height:auto}

/* ---- icons only animate while you can see them ---- */
.ph .card:hover .mi *, .ph .row:hover .mi *{ animation-duration: 1.9s; }
@media (prefers-reduced-motion: reduce){ .ph .mi *, .ph .mi.live *{ animation-play-state: paused; } }

/* ============ "Show us what's wrong" — the interactive repair ============ */
.ph .fixit{ background: linear-gradient(180deg,#fbfbfd 0%,#f2f2f5 100%); }
.ph .fixit .wrap-w{ padding-block: clamp(34px,4vw,58px); }

.ph .fx-card{ background:#fff; border:1px solid var(--line-2); border-radius:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 12px 32px -12px rgba(0,0,0,.12);
  padding: clamp(20px,3vw,36px); margin-top: clamp(18px,2.6vw,28px); }
.ph .fx-in{ display:grid; grid-template-columns: minmax(0,300px) minmax(0,1fr);
  gap: clamp(22px,4vw,48px); align-items:center; }

/* --- the phone sits on its own soft stage --- */
.ph .fx-stage{ display:flex; justify-content:center; align-items:center;
  background: radial-gradient(120% 100% at 50% 0%, #f7f7fa 0%, #ebebef 100%);
  border-radius:18px; padding: clamp(18px,2.6vw,30px); }
.ph .fx-phone{ position:relative; width:min(178px,54vw); }
.ph .fx-phone svg{ width:100%; height:auto; display:block; overflow:visible;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.20)); }
.ph .fx-body{ fill:#2b2b31; stroke:#45454d; stroke-width:3; }
.ph .fx-scr{ fill:#0f0f13; }
.ph .fx-notch{ fill:#3a3a42; }

/* every fault layer stays hidden until it is the chosen one */
.ph .fx-l{ opacity:0; pointer-events:none; transition:opacity .3s; }
.ph .fx-phone[data-fault="screen"] .fx-l-screen,
.ph .fx-phone[data-fault="batt"]   .fx-l-batt,
.ph .fx-phone[data-fault="port"]   .fx-l-port,
.ph .fx-phone[data-fault="glass"]  .fx-l-glass,
.ph .fx-phone[data-fault="water"]  .fx-l-water,
.ph .fx-phone[data-fault="cam"]    .fx-l-cam{ opacity:1; }

.ph .fx-ck{ stroke:#FF6B62; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:260; stroke-dashoffset:260; transition:stroke-dashoffset .55s ease, stroke .4s; }
.ph .fx-phone[data-state="broken"] .fx-ck{ stroke-dashoffset:0; }
.ph .fx-phone[data-state="fixing"] .fx-ck{ stroke-dashoffset:260; transition-duration:.7s; }
.ph .fx-phone[data-state="fixed"]  .fx-ck{ stroke-dashoffset:260; }

.ph .fx-bshell{ fill:none; stroke:#9a9aa2; stroke-width:4; }
.ph .fx-bcap{ fill:#9a9aa2; }
.ph .fx-bfill{ fill:#FF453A; transform-origin:bottom; transform:scaleY(.16); transform-box:fill-box;
  transition:transform .8s cubic-bezier(.4,0,.2,1), fill .8s; }
.ph .fx-phone[data-state="fixing"] .fx-bfill,
.ph .fx-phone[data-state="fixed"]  .fx-bfill{ transform:scaleY(1); fill:#30D158; }
.ph .fx-bolt{ fill:#fff; opacity:0; transition:opacity .4s .4s; }
.ph .fx-phone[data-state="fixed"] .fx-bolt{ opacity:1; }

.ph .fx-cable{ stroke:#9a9aa2; stroke-width:5; fill:none; stroke-linecap:round; }
.ph .fx-plug{ fill:#9a9aa2; transition:transform .5s cubic-bezier(.3,1.4,.4,1);
  transform-box:fill-box; transform-origin:center; }
.ph .fx-phone[data-state="broken"] .fx-plug{ transform:translateY(16px); }
.ph .fx-zap{ fill:#FF6B62; opacity:0; transition:opacity .35s, fill .4s; }
.ph .fx-phone[data-state="broken"] .fx-zap{ opacity:1; animation:fxflick 1s steps(2) infinite; }
.ph .fx-phone[data-state="fixed"] .fx-zap{ opacity:1; fill:#30D158; }
@keyframes fxflick{ 0%,100%{opacity:1} 50%{opacity:.25} }

.ph .fx-sh{ stroke:#FF6B62; stroke-width:3.2; fill:none; stroke-linecap:round; stroke-linejoin:round;
  transition:opacity .5s, transform .6s cubic-bezier(.4,0,.2,1); transform-box:fill-box; transform-origin:center; }
.ph .fx-phone[data-state="fixing"] .fx-sh,
.ph .fx-phone[data-state="fixed"]  .fx-sh{ opacity:0; transform:scale(.4); }

.ph .fx-drop{ fill:none; stroke:#5AB0FF; stroke-width:4; transition:opacity .5s, transform .6s;
  transform-box:fill-box; transform-origin:center; }
.ph .fx-wv{ fill:none; stroke:#5AB0FF; stroke-width:4; stroke-linecap:round; transition:opacity .5s; }
.ph .fx-wv2{ opacity:.5; }
.ph .fx-phone[data-state="fixing"] .fx-drop,
.ph .fx-phone[data-state="fixed"] .fx-drop{ opacity:0; transform:translateY(30px) scale(.5); }
.ph .fx-phone[data-state="fixing"] .fx-wv,
.ph .fx-phone[data-state="fixed"] .fx-wv{ opacity:0; }

.ph .fx-lens{ fill:none; stroke:#9a9aa2; stroke-width:4; }
.ph .fx-lens2{ stroke:#6a6a72; }
.ph .fx-ck2{ stroke-dasharray:120; stroke-dashoffset:120; }
.ph .fx-phone[data-state="broken"] .fx-ck2{ stroke-dashoffset:0; }
/* the X is a shorter dash than the cracks: 260 on a 120 pattern wraps round
   and the X came back over the green lens once it was "fixed" */
.ph .fx-phone[data-state="fixing"] .fx-ck2,
.ph .fx-phone[data-state="fixed"]  .fx-ck2{ stroke-dashoffset:120; }
.ph .fx-phone[data-state="fixed"] .fx-lens{ stroke:#30D158; }

/* once it is fixed the fault clears off the screen and the tick stands alone;
   the battery, the plug and the camera rings were all sitting under it */
.ph .fx-phone[data-state="fixed"] .fx-l{ opacity:0; transition-delay:.3s; }

.ph .fx-ok{ opacity:0; transition:opacity .3s; }
.ph .fx-okc{ fill:rgba(48,209,88,.16); stroke:#30D158; stroke-width:4; }
.ph .fx-okt{ fill:none; stroke:#30D158; stroke-width:8; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .45s ease .15s; }
.ph .fx-phone[data-state="fixed"] .fx-ok{ opacity:1; }
.ph .fx-phone[data-state="fixed"] .fx-okt{ stroke-dashoffset:0; }

.ph .fx-spark{ position:absolute; inset:0; border-radius:30px; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(48,209,88,.5), transparent 62%); }
.ph .fx-phone[data-state="fixed"] .fx-spark{ animation:fxpop .7s ease-out; }
@keyframes fxpop{ 0%{opacity:0;transform:scale(.6)} 35%{opacity:1} 100%{opacity:0;transform:scale(1.25)} }

/* --- the controls --- */
.ph .fx-side{ display:flex; flex-direction:column; gap:14px; }
.ph .fx-say{ margin:0; font-size:17px; line-height:1.4; color:var(--ink); font-weight:600;
  letter-spacing:-.01em; max-width:36ch; min-height:1.4em; }
.ph .fx-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ph .fx-chip{ font-size:14.5px; font-weight:600; color:var(--ink); padding:9px 15px; border-radius:999px;
  background:#fff; border:1px solid var(--line); cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, box-shadow .16s; }
.ph .fx-chip:hover{ border-color:var(--sub); box-shadow:0 1px 4px rgba(0,0,0,.07); }
.ph .fx-chip.on{ background:var(--ink); color:#fff; border-color:var(--ink); }
.ph .fx-chip:focus-visible{ outline:2px solid var(--red-l); outline-offset:2px; }

.ph .fx-go{ align-self:flex-start; font-size:16px; font-weight:600; color:#fff; background:var(--red);
  padding:12px 30px; border-radius:999px; cursor:pointer; border:0;
  transition:background .18s, transform .18s, box-shadow .18s;
  box-shadow:0 4px 14px -4px rgba(226,28,33,.55); }
.ph .fx-go:hover{ background:#ef2e33; transform:translateY(-1px); }
.ph .fx-go:focus-visible{ outline:2px solid var(--red-l); outline-offset:3px; }
.ph .fx-go[data-done="1"]{ background:var(--bg-3); color:var(--ink); box-shadow:none; }

.ph .fx-res{ background:linear-gradient(#fff,#fafafc); border:1px solid var(--line-2);
  border-left:3px solid #30D158; border-radius:14px; padding:16px 18px;
  display:flex; flex-direction:column; gap:7px; animation:fxrise .45s cubic-bezier(.2,.7,.3,1); }
@keyframes fxrise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.ph .fx-res[hidden]{ display:none; }
.ph .fx-tag{ align-self:flex-start; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ok); background:rgb(231,246,236); padding:3px 9px; border-radius:5px; }
.ph .fx-res .t-3{ margin:0; }
.ph .fx-res p{ margin:0; font-size:14.5px; color:var(--sub); }
.ph .fx-time{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.ph .fx-time b{ color:var(--ink); font-size:17px; }
.ph .fx-res .ctas{ margin-top:5px; justify-content:flex-start; }

@media (max-width:820px){
  .ph .fx-in{ grid-template-columns:1fr; gap:22px; }
  .ph .fx-stage{ padding:20px; }
  .ph .fx-phone{ width:min(150px,42vw); }
  .ph .fx-say{ max-width:none; }
  .ph .fx-go{ align-self:stretch; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .ph .fx-phone *, .ph .fx-spark{ transition:none !important; animation:none !important; }
}

/* icons pause off-screen -- needs to outrank the `animation` shorthand
   on .ph .mi-batt .fill, which carries its own play-state */
.ph .mi:not(.live) *{ animation-play-state: paused; }

/* six FAQ topics need to wrap on narrow screens instead of overflowing */
.ph .seg{ flex-wrap: wrap; justify-content: center; max-width: 100%; }
@media (max-width: 620px){
  .ph .seg{ gap: 4px; }
  .ph .seg button{ padding: 0 11px; font-size: 13.5px; }
}

/* ---- shop price guide ---- */
.ph .shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ph .shopcard{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:16px 17px;
  display:flex;flex-direction:column;gap:3px;transition:border-color .16s,box-shadow .16s}
.ph .shopcard:hover{border-color:var(--line);box-shadow:0 3px 14px -6px rgba(0,0,0,.16)}
.ph .shop-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ph .shopcard h3{margin:0;font-size:16.5px;letter-spacing:-.015em;line-height:1.2}
.ph .shop-yr{font-size:12px;font-weight:600;color:var(--sub);flex:0 0 auto}
.ph .shop-spec{margin:0;font-size:13px;color:var(--sub)}
.ph .shop-from{margin:9px 0 0;display:flex;align-items:baseline;gap:6px}
.ph .shop-from span{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.ph .shop-from b{font-size:25px;font-weight:700;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.ph .shop-range{margin:1px 0 0;font-size:12.5px;color:var(--sub);font-variant-numeric:tabular-nums}
@media(max-width:520px){.ph .shopgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .ph .shopcard{padding:13px 14px}.ph .shop-from b{font-size:22px}}

/* price guide: search + the "too new to price" state */
.ph .shopfind{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.ph .shopfind input{width:min(360px,100%);height:44px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line);background:#fff;font-size:15px;color:var(--ink)}
.ph .shopfind input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,28,33,.14)}
.ph .shopcount{font-size:13px;color:var(--sub)}
.ph .shopcard.is-new{border-style:dashed}
.ph .shop-new{margin:9px 0 0;display:flex;flex-direction:column;gap:1px}
.ph .shop-new{font-size:15px;font-weight:700;color:var(--ink)}
.ph .shop-new span{font-size:12.5px;font-weight:500;color:var(--sub)}

/* FAQ topics are all in the page for search engines; only one shows at a time */
.ph .faqgroup[hidden]{display:none}

/* sell page: details before the estimate */
.ph .pd-gate{margin-top:18px;padding:20px 22px;border:1px solid var(--line);border-radius:16px;
  background:var(--bg-2);animation:fxrise .35s cubic-bezier(.2,.7,.3,1)}
.ph .pd-gate[hidden]{display:none}
.ph .pd-gate h3{margin:0 0 4px}
.ph .pd-gate > p{margin:0 0 14px;color:var(--sub);font-size:15px}
.ph .pd-gate .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.ph .pd-gate .btn{margin-top:4px}
.ph .pd-gate .fine{margin-top:10px}
.ph .pd-gate-err{margin:0 0 10px;color:var(--red-l);font-size:14px;font-weight:600}
.ph .pd-gate-err[hidden]{display:none}
@media(max-width:560px){.ph .pd-gate .two{grid-template-columns:1fr}}

/* ---------- services page + footer legal bar ---------- */
.ph .svc-grid .card.svc{padding:22px 22px 20px;display:flex;flex-direction:column;gap:4px}
.ph .card.svc .mibox{width:52px;height:52px;margin-bottom:6px}
.ph .card.svc h3{margin:0 0 2px}
.ph .card.svc > p{margin:0 0 10px}
.ph .svc-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.ph .svc-list li{position:relative;padding-left:22px;font-size:15px}
.ph .svc-list li::before{content:"";position:absolute;left:2px;top:.52em;width:9px;height:5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
.ph .card.svc .fine{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line)}
.ph footer .legalbar{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:16px;border-top:1px solid var(--line-d)}
.ph footer .legalbar a{color:rgb(199,199,204);text-decoration:underline;text-underline-offset:3px}
.ph footer .legalbar a:hover{color:#fff}
.ph footer .legalbar a:last-child{margin-left:auto;text-decoration:none;color:var(--sub-d)}
.ph footer .legal{padding-top:12px;border-top:0}
@media(max-width:720px){.ph footer .legalbar a:last-child{margin-left:0}}

/* ---------- footer, five columns ---------- */
.ph footer .dir{grid-template-columns:repeat(5,minmax(0,1fr))}
.ph footer .fstores{padding-block:14px 0}
.ph footer .fstores h4{margin:0 0 8px;font-size:12px;color:#F5F5F7}
.ph footer .fstores ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
@media(max-width:980px){.ph footer .dir{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.ph footer .dir{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- about: linked cards and the store chip row ---------- */
.ph .card.lk{display:flex;flex-direction:column;gap:6px;padding:22px;text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s}
.ph .card.lk h3{margin:0}
.ph .card.lk p{margin:0;color:var(--sub)}
.ph .card.lk .more{margin-top:auto;padding-top:10px}
.ph .card.lk:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.05)}
.ph .center .chips,.ph .stack .chips{justify-content:center;margin-block:4px 6px}
.ph .chip:hover{background:var(--bg-3)}
.ph .legalnote{max-width:720px;margin:26px auto 0;font-size:13px;color:var(--sub)}
.ph .legalnote summary{cursor:pointer;font-weight:600}
.ph .legalnote p{margin:10px 0 0;line-height:1.6}
/* the site's fine print carries a rule underneath; inside a white box it reads as a stray line */
.ph .card .fine,.ph .step .fine{border-bottom:0;padding-bottom:0}
.ph .card.svc .fine{padding-top:10px;border-top:1px solid var(--line-d)}

/* ---------------------------------------------------------- Desk Hub */
/* display:flex used to beat the browser's own [hidden] rule, so the panel never
   actually closed and sat open on every store page. It hides properly now. */
.phc-panel[hidden]{ display: none !important; }

.phc-fab{ position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2147483000; white-space: nowrap; max-width: calc(100vw - 36px); box-sizing: border-box; line-height: 1.2; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px 12px 15px; border-radius: 999px; background: var(--red); color: rgb(255,255,255); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; box-shadow: rgba(0,0,0,0.2) 0px 6px 22px; transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s; }
.phc-fab:hover{ transform: translateY(-2px); box-shadow: rgba(0,0,0,0.26) 0px 10px 28px; }
.phc-fab.phc-hid{ opacity: 0; pointer-events: none; transform: scale(0.9); }
.phc-fab svg{ flex: 0 0 auto; }

.phc-panel{ position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 2147483001; width: min(346px, calc(100vw - 24px)); max-height: min(460px, calc(100vh - 100px)); display: flex; flex-direction: column; background: rgb(255,255,255); border: 1px solid var(--line-2); border-radius: 20px; overflow: hidden; box-shadow: rgba(0,0,0,0.18) 0px 14px 44px; }

/* a light header reads as a shop, not a system window */
.phc-head{ display: flex; align-items: center; gap: 10px; padding: 12px 10px 12px 14px; background: rgb(255,255,255); border-bottom: 1px solid var(--line-2); }
.phc-av{ flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: rgb(255,255,255); display: inline-flex; align-items: center; justify-content: center; }
.phc-ht{ display: flex; flex-direction: column; gap: 0px; min-width: 0px; margin-right: auto; }
.phc-ht strong{ font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.25; }
.phc-sub{ font-size: 11.5px; color: var(--sub); }
.phc-x{ flex: 0 0 auto; color: var(--sub); font-size: 20px; line-height: 1; width: 30px; height: 30px; border-radius: 9px; }
.phc-x:hover{ background: var(--bg-3); color: var(--ink); }

.phc-feed{ flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 2px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-2); }
.phc-row{ display: flex; }
.phc-row.phc-me{ justify-content: flex-end; }
.phc-b{ max-width: 88%; padding: 9px 13px; border-radius: 17px; font-size: 14.5px; line-height: 1.45; }
.phc-bot .phc-b{ background: rgb(255,255,255); border: 1px solid var(--line-2); border-bottom-left-radius: 6px; color: var(--ink); }
.phc-me .phc-b{ background: var(--red); color: rgb(255,255,255); border-bottom-right-radius: 6px; }
.phc-b a{ text-decoration: underline; text-underline-offset: 2px; }
.phc-wait .phc-b{ color: var(--sub); letter-spacing: 3px; }
.phc-chips{ display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0px 4px; }
.phc-chip{ padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255,255,255); font-size: 13px; color: var(--ink); transition: border-color 0.16s, color 0.16s; }
.phc-chip:hover{ border-color: var(--red); color: var(--red); }

.phc-form{ display: flex; gap: 7px; padding: 9px 10px; border-top: 1px solid var(--line-2); background: rgb(255,255,255); }
.phc-in{ flex: 1 1 auto; min-width: 0px; padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); font-size: 14.5px; }
.phc-in:focus{ outline: 2px solid var(--red); outline-offset: 1px; border-color: transparent; }
.phc-send{ flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: rgb(255,255,255); display: inline-flex; align-items: center; justify-content: center; }
.phc-send:hover{ background: var(--red-l); }
.phc-foot{ padding: 0px 14px 10px; font-size: 11px; line-height: 1.4; color: var(--sub); background: rgb(255,255,255); }
.phc-foot a{ text-decoration: underline; }

@media (max-width: 460px){
  .phc-fab .phc-fab-t{ display: none; }
  .phc-fab{ padding: 14px; right: 14px; bottom: 14px; }
  /* a sheet that leaves the page visible above it, not a takeover */
  .phc-panel{ right: 0px; left: 0px; bottom: 0px; width: auto; max-height: 62vh; border-radius: 20px 20px 0px 0px; border-left: 0px; border-right: 0px; border-bottom: 0px; }
}

/* Desk Hub: the nudge.
   It rises out from behind the button, sits for a few seconds, and sinks back.
   Slow in, slower out -- a shop sign lighting up, not a notification. */
/* The greeting grows out of the button's own corner and settles back into
   it, so it reads as the desk leaning out rather than a box appearing. */
.phc-tease{ position: fixed; right: 18px; bottom: 74px; z-index: 2147482999; width: min(252px, calc(100vw - 40px)); padding: 11px 15px; border-radius: 16px 16px 5px 16px; background: rgb(255,255,255); border: 1px solid var(--line-2); box-shadow: rgba(0,0,0,0.13) 0px 8px 26px; cursor: pointer; transform-origin: 100% 100%; opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.34s ease, transform 0.44s cubic-bezier(0.18,0.85,0.28,1); }
.phc-tease.in{ opacity: 1; transform: none; }
.phc-fab.phc-hi{ transform: translateY(-2px); box-shadow: rgba(226,28,33,0.28) 0px 10px 26px; }
.phc-tease:hover{ border-color: var(--red); }
.phc-tease p{ margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); }
@media (max-width: 460px){ .phc-tease{ right: 14px; bottom: 70px; } }
@media (prefers-reduced-motion: reduce){ .phc-tease{ transition: opacity 0.3s ease; transform: none; } .phc-fab.phc-hi{ transform: none; } }

.phc-retry{ display: block; width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--red); background: rgba(226,28,33,0.06); color: var(--red); font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.phc-retry:hover{ background: var(--red); color: rgb(255,255,255); }
.phc-call{ border-color: var(--line); color: var(--ink); background: var(--bg-2); }
.phc-call:hover{ background: var(--graphite); color: rgb(255,255,255); border-color: var(--graphite); }

/* ---- buy page: what's on the shelf right now ----
   Fed live from the tills. The whole card is the button: a customer who
   taps a phone wants the phone, not a link inside it. */
.ph .stk-bar{display:flex;flex-direction:column;align-items:center;gap:9px;margin-bottom:16px}
.ph .stkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:14px}
.ph .stk{display:flex}
.ph .stk-hit{display:flex;flex-direction:column;align-items:stretch;gap:3px;width:100%;
  padding:12px 13px 14px;border:1px solid var(--line-2);border-radius:14px;background:#fff;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.ph .stk-hit:hover{border-color:var(--line);box-shadow:0 6px 20px -10px rgba(0,0,0,.24);transform:translateY(-2px)}
.ph .stk-hit:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .stk-art{display:block;margin-bottom:9px;border-radius:10px;overflow:hidden;
  background:linear-gradient(158deg,#f4f5f8 0%,#e8e9ef 100%)}
.ph .stk-art .art,.ph .sh-art .art{display:block;width:100%;height:auto}
.ph .stk-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ph .stk-top b{font-size:16px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
.ph .stk-store{font-size:12px;font-weight:600;color:var(--red);flex:0 0 auto;text-align:right}
.ph .stk-bits{display:block;margin-top:2px;font-size:13px;color:var(--sub)}
.ph .stk-price{display:block;margin-top:8px;font-size:24px;font-weight:700;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ph .stk-ref{display:block;margin-top:auto;padding-top:8px;font-size:12px;color:var(--sub);
  font-variant-numeric:tabular-nums}
.ph .stk-none{grid-column:1/-1;margin:0;padding:26px 20px;text-align:center;font-size:15px;
  color:var(--sub);border:1px dashed var(--line);border-radius:14px;background:var(--bg-2)}
@media(max-width:520px){.ph .stkgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .ph .stk-hit{padding:10px 11px 12px}.ph .stk-price{font-size:21px}.ph .stk-top b{font-size:15px}}
@media(prefers-reduced-motion:reduce){.ph .stk-hit{transition:none}.ph .stk-hit:hover{transform:none}}

/* ---- one card per model ----
   The grid lists models now, so a model holding more than one phone says so,
   and the sheet is where the size and network get chosen. */
.ph .stk-n{position:absolute;top:10px;right:10px;z-index:2;padding:3px 9px;border-radius:999px;
  background:var(--ink);color:var(--bg);font-size:11px;font-weight:700;letter-spacing:.01em;
  font-variant-numeric:tabular-nums}
.ph .stk{position:relative}

/* ---- picking which one ----
   Each chip points at a real phone on a real shelf, so nothing here can be
   combined into something nobody has. */
.ph .sh-picks{margin:14px 0 0;padding:14px 15px;border:1px solid var(--line);border-radius:13px;
  background:var(--bg-2)}
.ph .sh-pick{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ph .sh-pick + .sh-pick{margin-top:10px}
.ph .sh-pickl{flex:0 0 68px;font-size:12px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sub)}
.ph .sh-pickr{display:flex;flex-wrap:wrap;gap:7px;flex:1 1 auto;min-width:0}
.ph .sh-chip{appearance:none;cursor:pointer;padding:7px 13px;border:1px solid var(--line);
  border-radius:999px;background:var(--bg);color:var(--ink);font:inherit;font-size:13.5px;
  font-weight:600;line-height:1;transition:border-color .15s,background .15s,color .15s}
.ph .sh-chip:hover{border-color:var(--ink)}
.ph .sh-chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .sh-chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.ph .sh-pickfine{margin:11px 0 0;font-size:12.5px;line-height:1.5;color:var(--sub)}
@media(max-width:520px){
  .ph .sh-picks{padding:12px 13px}
  .ph .sh-pick{gap:8px}
  .ph .sh-pickl{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){.ph .sh-chip{transition:none}}

/* ---- when the owner has the price behind a form ----
   The card says there is a price to be had rather than showing a blank, and
   the sheet makes the trade: a name, a phone, an email. */
.ph .stk-price.stk-ask{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--red)}
@media(max-width:520px){.ph .stk-price.stk-ask{font-size:15px}}

.ph .sh-ask{margin:14px 0 0;padding:16px 17px;border:1px solid var(--line);border-radius:14px;
  background:var(--bg-2)}
.ph .sh-askt{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--ink)}
.ph .sh-askf{display:grid;gap:10px}
.ph .sh-askf label{display:block}
.ph .sh-askf span{display:block;margin-bottom:5px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--sub)}
.ph .sh-askf input{width:100%;height:44px;padding:0 13px;border:1px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px}
.ph .sh-askf input:focus-visible{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.ph .sh-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ph .sh-askerr{margin:10px 0 0;font-size:13.5px;font-weight:600;color:var(--red)}
.ph .sh-asksend{width:100%;margin-top:13px}
.ph .sh-askfine{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--sub)}
@media(max-width:520px){.ph .sh-ask{padding:13px 14px}}

/* ---- in stock, and said so ----
   Green is the only colour on this sheet that means "yes, it is here". */
.ph .sh-av{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#12873f}
.ph .sh-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;flex:0 0 8px;
  box-shadow:0 0 0 3px rgba(22,163,74,.18)}
.ph .sh-pickstock{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:13px;
  line-height:1.5;color:#12873f;font-weight:600}
.ph .sh-pickstock b{font-variant-numeric:tabular-nums}

/* a size or colour we do not have today is still worth showing -- it tells
   somebody what to ask for -- but it cannot be chosen */
.ph .sh-chip-na{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px dashed var(--line);background:transparent;color:var(--sub);font-size:13.5px;
  font-weight:600;line-height:1;cursor:default}
.ph .sh-chip-x{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;opacity:.75}

@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ph .sh-av,
  :root:not([data-theme="light"]) .ph .sh-pickstock{color:#4ade80}
}
:root[data-theme="dark"] .ph .sh-av,
:root[data-theme="dark"] .ph .sh-pickstock{color:#4ade80}

/* ---- one device, in full ----
   Where a shop page would put a cart, this puts the store: the address,
   the number, and what time they shut today. */
.ph .sh-wrap{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:flex-start;
  justify-content:center;padding:28px 16px;overflow:auto}
.ph .sh-back{position:fixed;inset:0;background:rgba(14,14,18,.55);backdrop-filter:blur(2px)}
.ph .sh{position:relative;width:min(880px,100%);background:#fff;border-radius:20px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.45);animation:fxrise .26s cubic-bezier(.2,.7,.3,1)}
.ph .sh-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;
  background:var(--bg-3);color:var(--ink);font-size:23px;line-height:1;cursor:pointer}
.ph .sh-x:hover{background:var(--line)}
.ph .sh-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;padding:26px}
.ph .sh-art{border-radius:16px;overflow:hidden;align-self:start;
  background:linear-gradient(158deg,#f4f5f8 0%,#e6e8ee 100%)}
.ph .sh-col{min-width:0}
.ph .sh-eb{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--red)}
.ph .sh h3{margin:0;font-size:27px;letter-spacing:-.03em;line-height:1.15}
.ph .sh-sub{margin:5px 0 0;font-size:14.5px;color:var(--sub)}
.ph .sh-price{margin:12px 0 0;font-size:34px;font-weight:700;letter-spacing:-.035em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ph .sh-fine{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--sub)}
.ph .sh-call{margin-top:14px;width:100%;justify-content:center;text-align:center}
.ph .sh-map{margin-top:8px;width:100%;justify-content:center;text-align:center}
.ph .sh-addr{margin:10px 0 0;font-size:14px;color:var(--sub)}
.ph .sh-hours{margin-top:14px;padding:13px 15px;border:1px solid var(--line-2);border-radius:13px;
  background:var(--bg-2)}
.ph .sh-today{margin:0 0 7px;font-size:14.5px;font-weight:700;color:var(--ink)}
.ph .sh-hours table{width:100%;border-collapse:collapse;font-size:13.5px}
.ph .sh-hours th{width:9.5em;padding:2px 0;text-align:left;font-weight:500;color:var(--sub)}
.ph .sh-hours td{padding:2px 0;color:var(--sub);font-variant-numeric:tabular-nums}
.ph .sh-hours tr.on th,.ph .sh-hours tr.on td{color:var(--ink);font-weight:600}
.ph .sh-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;
  margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2)}
.ph .sh-facts dt{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--sub)}
.ph .sh-facts dd{margin:1px 0 0;font-size:14.5px;font-weight:600;color:var(--ink)}
.ph .sh-points{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;gap:9px}
.ph .sh-points li{position:relative;padding-left:22px;font-size:14px;line-height:1.5;color:var(--sub)}
.ph .sh-points li b{color:var(--ink)}
.ph .sh-points li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:5px;
  border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)}
@media(max-width:760px){
  .ph .sh-wrap{padding:0}
  .ph .sh{width:100%;border-radius:18px 18px 0 0;margin-top:34px}
  .ph .sh-in{grid-template-columns:1fr;gap:16px;padding:20px 18px 26px}
  .ph .sh-art{max-width:320px;margin-inline:auto;width:100%}
  .ph .sh h3{font-size:23px}.ph .sh-price{font-size:29px}
  .ph .sh-facts{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.ph .sh{animation:none}}

/* ---- the shelf, filtered ----
   A quiet strip of controls, not a form: pills for the shelf you want,
   a search, and one Refine button that opens everything else. The price
   slider sits on a histogram of what is actually in stock, so you can
   see where the devices are before you drag. */
.ph .trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px clamp(16px,3vw,40px);margin:0 0 18px;padding:0}
.ph .trust span{display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:500;
  letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.ph .trust svg{flex:0 0 auto;color:var(--ink)}

.ph .shelf{margin-bottom:18px}
.ph .stkpills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 12px}
.ph .stkpills:empty{display:none}
.ph .pill{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border:1px solid transparent;border-radius:999px;background:var(--bg-3);font:inherit;
  font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:background .14s,color .14s}
.ph .pill:hover{background:var(--line-2)}
.ph .pill:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .pill b{font-size:12px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.ph .pill.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.ph .pill.on b{color:rgba(255,255,255,.7)}

.ph .shelfrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.ph .shelffind{display:flex;align-items:center;gap:8px;height:42px;width:min(320px,100%);
  padding:0 15px;border-radius:999px;background:#fff;border:1px solid var(--line-2);
  color:var(--sub);transition:border-color .14s,box-shadow .14s}
.ph .shelffind:focus-within{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,28,33,.13)}
.ph .shelffind input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;font:inherit;
  font-size:14.5px;color:var(--ink);outline:none}
.ph .shelffind input::-webkit-search-cancel-button{-webkit-appearance:none}
.ph .shelfbtn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;font:inherit;font-size:14.5px;
  font-weight:600;color:var(--ink);cursor:pointer;transition:border-color .14s,background .14s}
.ph .shelfbtn:hover{border-color:var(--line)}
.ph .shelfbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .shelfbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ph .shelfbtn-n[hidden]{display:none}
.ph .shelfbtn-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 6px;border-radius:999px;background:var(--red);color:#fff;font-size:12px;
  font-weight:700;font-variant-numeric:tabular-nums}
.ph .shelfsort{position:relative;display:inline-flex;align-items:center}
.ph .shelfsort select{height:42px;padding:0 34px 0 16px;border:1px solid var(--line-2);
  border-radius:999px;background:#fff;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);
  cursor:pointer;-webkit-appearance:none;appearance:none}
.ph .shelfsort::after{content:"";position:absolute;right:15px;width:7px;height:7px;
  border-right:1.7px solid var(--sub);border-bottom:1.7px solid var(--sub);
  transform:translateY(-2px) rotate(45deg);pointer-events:none}
.ph .shelfsort select:focus-visible{outline:2px solid var(--red);outline-offset:2px}

.ph .shelfchips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
.ph .shelfchips:empty{display:none}
.ph .chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 6px 0 12px;
  border:1px solid var(--line-2);border-radius:999px;background:#fff;font:inherit;font-size:13px;
  font-weight:600;color:var(--ink);cursor:pointer}
.ph .chip span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  border-radius:50%;background:var(--bg-3);font-size:14px;line-height:1;color:var(--sub)}
.ph .chip:hover span{background:var(--red);color:#fff}
.ph .chip-clear{padding:0 12px;border-style:dashed;color:var(--red)}

/* the panel */
.ph .panel{margin-top:14px;border:1px solid var(--line-2);border-radius:18px;background:#fff;
  box-shadow:0 18px 40px -26px rgba(0,0,0,.35);overflow:hidden;
  animation:fxrise .22s cubic-bezier(.2,.7,.3,1)}
.ph .panel[hidden]{display:none}
.ph .panel-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px clamp(20px,3vw,34px);padding:20px clamp(18px,2.4vw,26px)}
.ph .pgroup{min-width:0}
.ph .pgroup h4{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 9px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
.ph .pgroup h4 span{font-size:14px;font-weight:700;letter-spacing:-.02em;text-transform:none;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ph .pgrid{display:flex;flex-wrap:wrap;gap:6px}
.ph .pchip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--line-2);border-radius:10px;background:#fff;font:inherit;font-size:13.5px;
  font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .14s,background .14s}
.ph .pchip:hover{border-color:var(--line)}
.ph .pchip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .pchip b{font-size:11.5px;font-weight:700;color:var(--sub);font-variant-numeric:tabular-nums}
.ph .pchip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.ph .pchip.on b{color:rgba(255,255,255,.7)}

/* price: the bars are the stock, the slider is you */
.ph .pprice{grid-column:1/-1}
.ph .phist{display:flex;align-items:flex-end;gap:2px;height:52px;margin-bottom:4px}
.ph .phist i{flex:1 1 0;border-radius:3px 3px 0 0;background:var(--line-2);
  transition:background .16s}
.ph .phist i.on{background:var(--red);opacity:.85}
.ph .prange{position:relative;height:26px}
.ph .ptrack,.ph .pfill{position:absolute;top:11px;height:4px;border-radius:2px}
.ph .ptrack{left:0;right:0;background:var(--line-2)}
.ph .pfill{background:var(--ink)}
.ph .prange input[type=range]{position:absolute;left:0;top:0;width:100%;height:26px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.ph .prange input[type=range]:focus{outline:none}
.ph .prange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:22px;height:22px;border-radius:50%;background:#fff;border:2px solid var(--ink);
  box-shadow:0 2px 6px rgba(0,0,0,.22);cursor:grab}
.ph .prange input[type=range]::-moz-range-thumb{pointer-events:auto;width:22px;height:22px;
  border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.22);
  cursor:grab}
.ph .prange input[type=range]:focus-visible::-webkit-slider-thumb{border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,28,33,.2)}
.ph .pends{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);
  font-variant-numeric:tabular-nums}

.ph .panel-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px clamp(18px,2.4vw,26px);border-top:1px solid var(--line-2);background:var(--bg-2)}
.ph .panel-clear{padding:0;border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ph .panel-clear:hover{color:var(--red)}
.ph .panel-done{height:40px;padding:0 20px;border:0;border-radius:999px;background:var(--ink);
  color:#fff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.ph .panel-done:hover{background:var(--red)}

.ph .shelfmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;flex-wrap:wrap}
.ph .stkcount{font-size:13.5px;color:var(--sub);font-variant-numeric:tabular-nums}
.ph .stktrade{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px;
  border-radius:999px;background:rgba(226,28,33,.08);font-size:14px;font-weight:600;
  color:var(--red);transition:background .14s}
.ph .stktrade:hover{background:rgba(226,28,33,.16)}

@media(max-width:620px){
  .ph #carry .lede{font-size:15.5px}
  .ph .trust{gap:10px 18px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scrollbar-width:none}
  .ph .trust::-webkit-scrollbar{display:none}
  .ph .trust span{flex:0 0 auto;font-size:13.5px;gap:8px}
  .ph .trust svg{width:18px;height:18px}
  .ph .stkpills{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;
    padding-bottom:2px;margin-inline:-4px;padding-inline:4px}
  .ph .stkpills::-webkit-scrollbar{display:none}
  .ph .pill{flex:0 0 auto}
  .ph .shelfrow{flex-wrap:wrap;justify-content:stretch;min-width:0;gap:8px}
  .ph .shelffind{flex:1 0 100%;width:auto;min-width:0}
  .ph .shelfbtn{flex:1 1 0;justify-content:center;padding:0 12px;gap:7px}
  .ph .shelfsort{flex:1 1 0}
  .ph .shelfsort select{width:100%;text-align:center}
  .ph .shelfsort{flex:0 0 auto}
  .ph .shelfsort select{padding:0 30px 0 13px;font-size:14px}
  .ph .panel-in{grid-template-columns:1fr;gap:18px;padding:18px}
  .ph .shelfmeta{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .ph .pill,.ph .pchip,.ph .shelfbtn,.ph .stktrade{transition:none}
  .ph .panel{animation:none}
}

/* ---- paging the shelf ---- */
.ph .stkpage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  margin-top:22px}
.ph .stkpage:empty{display:none}
.ph .pg{min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;
  background:#fff;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer;
  font-variant-numeric:tabular-nums;transition:border-color .14s,background .14s}
.ph .pg:hover:not([disabled]){border-color:var(--line)}
.ph .pg:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.ph .pg[disabled]{opacity:.35;cursor:default}
.ph .pg-arr{font-size:20px;line-height:1;padding:0}
.ph .pg-gap{padding:0 2px;color:var(--sub)}

/* ---- the rest of the shelf, from inside one device ---- */
.ph .sh-also{padding:20px 26px 26px;border-top:1px solid var(--line-2);background:var(--bg-2);
  border-radius:0 0 20px 20px}
.ph .sh-also h4{margin:0 0 12px;font-size:17px;letter-spacing:-.02em}
.ph .sh-alsogrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ph .sh-alsocard{display:flex;flex-direction:column;align-items:flex-start;padding:10px 11px 12px;
  border:1px solid var(--line-2);border-radius:12px;background:#fff;text-align:left;font:inherit;
  color:inherit;cursor:pointer;transition:border-color .14s,box-shadow .14s}
.ph .sh-alsocard:hover{border-color:var(--line);box-shadow:0 5px 16px -9px rgba(0,0,0,.22)}
.ph .sh-alsocard:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .sh-alsoart{display:block;width:100%;margin-bottom:8px;border-radius:9px;overflow:hidden;
  background:linear-gradient(158deg,#f4f5f8 0%,#e8e9ef 100%)}
.ph .sh-alsoart .art{display:block;width:100%;height:auto}
.ph .sh-alsot{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}
.ph .sh-alsob{margin-top:1px;font-size:12px;color:var(--sub)}
.ph .sh-alsop{margin-top:6px;font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .ph .sh-also{padding:16px 18px 24px;border-radius:0}
  .ph .sh-alsogrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- the three things people come for, under the nav ----
   Repairs and stores are in the nav; these are the errands nobody
   thinks to look for in a menu, so they get their own line. */
.ph .util{background:#fff;border-bottom:1px solid var(--line-2)}
.ph .util-in{max-width:1100px;margin:0 auto;padding:9px 20px;display:flex;align-items:center;
  gap:clamp(18px,4vw,42px)}
.ph .util-a{display:inline-flex;align-items:center;gap:8px;padding:4px 2px;font-size:14px;
  font-weight:500;letter-spacing:0;color:var(--graphite);white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .16s,border-color .16s}
.ph .util-a:hover{color:var(--red);border-bottom-color:var(--red)}
.ph .util-a:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}
.ph .util-i{display:inline-flex;color:var(--graphite);transition:color .16s,transform .35s cubic-bezier(.2,.7,.3,1)}
.ph .util-a:hover .util-i{color:var(--red)}
/* each icon does the thing it names, once, on hover */
.ph .util-a:hover .util-i svg{animation:none}
.ph .util-a:nth-child(1):hover .util-i{transform:rotate(180deg)}
.ph .util-tick{stroke-dasharray:12;stroke-dashoffset:0;transition:stroke-dashoffset .3s ease}
.ph .util-a:hover .util-tick{animation:utilDraw .45s ease}
@keyframes utilDraw{from{stroke-dashoffset:12}to{stroke-dashoffset:0}}
.ph .util-dot{transition:transform .25s cubic-bezier(.2,.7,.3,1);transform-origin:7.1px 6.5px}
.ph .util-a:hover .util-dot{transform:scale(1.35)}
.ph .util-wave{opacity:1;transition:opacity .2s}
.ph .util-a:hover .util-wave{animation:utilPulse .9s ease}
@keyframes utilPulse{0%{opacity:.25}40%{opacity:1}100%{opacity:1}}
@media(max-width:700px){
  .ph .util-in{gap:22px;padding:8px 16px;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch}
  .ph .util-in::-webkit-scrollbar{display:none}
  .ph .util-a{font-size:13px;gap:7px}
}
@media(prefers-reduced-motion:reduce){
  .ph .util-a,.ph .util-i{transition:none}
  .ph .util-a:hover .util-i{transform:none}
  .ph .util-a:hover .util-tick,.ph .util-a:hover .util-wave{animation:none}
}

/* ============================================================
   The header, in three bands.

   Small print on top, the brand and the search in the middle,
   what we fix and what we sell along the bottom. The whole thing
   slides out of the way when you scroll down a page and comes
   back the moment you scroll up, so a long shelf is not read
   through a letterbox.
   ============================================================ */
.ph .ghead{position:sticky;top:0;z-index:50;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.ph .ghead.gone{transform:translateY(-102%)}
.ph .ginner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;
  justify-content:space-between;gap:18px}

/* band one */
.ph .gtop{background:rgb(14,14,16);border-bottom:1px solid rgba(255,255,255,.07)}
.ph .gtop .ginner{height:34px}
.ph .gtop-l{display:flex;gap:18px;min-width:0;overflow:hidden}
.ph .gtop-l a{font-size:12.5px;color:rgba(255,255,255,.62);white-space:nowrap}
.ph .gtop-l a:hover{color:#fff}
.ph .gtop-r{display:flex;align-items:center;gap:14px}
.ph .gpin{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.78);white-space:nowrap}
.ph .gpin:hover{color:#fff}
.ph .gtop .langsw{margin-right:0}

/* band two */
.ph .gnav .inner{gap:clamp(12px,2.4vw,28px);justify-content:space-between}
.ph .gsearch{flex:1 1 auto;display:flex;align-items:center;gap:9px;height:40px;
  max-width:560px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.62);
  transition:background .16s,border-color .16s}
.ph .gsearch:focus-within{background:#fff;border-color:#fff;color:var(--sub)}
.ph .gsearch input{flex:1 1 auto;min-width:0;height:100%;border:0;background:none;
  font:inherit;font-size:14px;color:#fff;outline:none}
.ph .gsearch input::placeholder{color:rgba(255,255,255,.55)}
.ph .gsearch:focus-within input{color:var(--ink)}
.ph .gsearch:focus-within input::placeholder{color:var(--sub)}
.ph .gsearch input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---- the search dropdown ----
   Hangs under the box, never pushes the header around, and is the one thing
   on the bar allowed to sit above the page. Dark on the dark header and
   light on the white one, the same way the box itself flips. */
.ph .gsearch{position:relative}
.ph .gfind{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:60;
  max-height:min(70vh,440px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:13px;
  box-shadow:0 18px 44px rgba(10,13,20,.22);padding:6px}
.ph .gfind[hidden]{display:none}
.ph .gfind-g{display:block;padding:9px 11px 4px;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sub)}
.ph .gfind-row{display:block;padding:8px 11px;border-radius:9px;text-decoration:none;color:inherit}
.ph .gfind-row b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ph .gfind-row span{display:block;margin-top:1px;font-size:12.5px;line-height:1.45;color:var(--sub)}
.ph .gfind-row:hover,.ph .gfind-row.on{background:var(--bg-3)}
.ph .gfind-row.on{outline:2px solid var(--red);outline-offset:-2px}
.ph .gfind-no{margin:0;padding:11px 11px 7px;font-size:13.5px;line-height:1.5;color:var(--sub)}
.ph .gfind-no b{color:var(--ink)}
@media (max-width:760px){
  .ph .gfind{max-height:min(60vh,340px)}
}
.ph .gact{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.ph .ghelp{font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);white-space:nowrap}
.ph .ghelp:hover{color:#fff}

/* band three */
.ph .gcat{background:#fff;border-bottom:1px solid var(--line-2)}
.ph .gcat .ginner{height:46px;gap:24px}
.ph .gcat-l{display:flex;align-items:center;gap:6px;min-width:0;flex:0 0 auto;overflow:visible}
.ph .gcat-l a{padding:7px 10px;border-radius:9px;font-size:13.5px;font-weight:500;
  color:var(--ink);white-space:nowrap;transition:background .16s,color .16s}
.ph .gcat-l a:hover{background:var(--bg-3)}
.ph .gcat-l a.on{background:var(--bg-3);font-weight:600}
.ph .gcat-hot{color:var(--red)!important;font-weight:600!important}
.ph .gcat-hot:hover{background:rgba(226,28,33,.09)!important}
/* the dropdown is dark everywhere else on the site; here it sits on white */
.ph .gcat .ndb{font-size:13.5px;font-weight:500;color:var(--ink);padding:7px 10px;border-radius:9px}
.ph .gcat .ndb:hover,.ph .gcat .nd.open .ndb{background:var(--bg-3);color:var(--ink)}
.ph .gcat .ndm{background:#fff;border:1px solid var(--line-2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.28)}
.ph .gcat .ndm a{color:var(--ink)}
.ph .gcat .ndm a:hover{background:var(--bg-3);color:var(--ink)}
.ph .gcat .util-in{padding:0;gap:clamp(12px,1.9vw,26px);flex:1 1 auto;justify-content:flex-end}

@media(max-width:1180px){
  .ph .gtop-l a:nth-child(n+5){display:none}
}
@media(max-width:980px){
  .ph .gtop-l a:nth-child(n+3){display:none}
}
@media(max-width:860px){
  .ph .gtop{display:none}
  .ph .ghelp{display:none}
  .ph .gnav .inner{flex-wrap:wrap;height:auto;padding-block:9px;gap:10px}
  .ph .gnav{height:auto}
  .ph .gsearch{order:3;flex:1 0 100%;max-width:none}
  .ph .gcat .ginner{padding:0 16px;gap:16px;overflow-x:auto;scrollbar-width:none;
    justify-content:flex-start}
  .ph .gcat .ginner::-webkit-scrollbar{display:none}
  .ph .gcat-l{display:none}
  .ph .gcat .util-in{overflow:visible}
}
@media(prefers-reduced-motion:reduce){.ph .ghead{transition:none}}

/* ---- the header in daylight ----
   The dark bar was from the old site. Bright reads better against the
   product pictures, and the red has somewhere to stand out again. */
.ph .ghead{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.ph .gtop{background:var(--bg-2);border-bottom:1px solid var(--line-2)}
.ph .gtop-l a{color:var(--sub)}
.ph .gtop-l a:hover{color:var(--ink)}
.ph .gpin{color:var(--ink)}
.ph .gpin:hover{color:var(--red)}
.ph .gtop .langsw{background:rgba(0,0,0,.06)}
.ph .gtop .langsw button{color:var(--sub)}
.ph .gtop .langsw button[aria-pressed="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}
.ph .gtop .langsw button:focus-visible{outline-color:var(--red)}

.ph .gnav{background:#fff;border-bottom:1px solid var(--line-2);backdrop-filter:none}
.ph .gnav .mk{color:var(--ink)}
.ph .gnav .mk span span{color:var(--red)}
.ph .gsearch{background:var(--bg-3);border-color:transparent;color:var(--sub)}
.ph .gsearch:focus-within{background:#fff;border-color:var(--red);
  box-shadow:0 0 0 3px rgba(226,28,33,.14)}
.ph .gsearch input{color:var(--ink)}
.ph .gsearch input::placeholder{color:var(--sub)}
.ph .ghelp{color:var(--ink)}
.ph .ghelp:hover{color:var(--red)}
.ph .burger{color:var(--ink)}
.ph .gcat{border-bottom:1px solid var(--line-2)}

/* the full-screen menu follows the header rather than fighting it */
.ph .msheet{background:#fff;color:var(--ink)}
.ph .msheet a{color:var(--ink);border-bottom-color:var(--line-2)}
.ph .msheet .ms2{color:var(--sub)}
.ph .msheet .msh{color:var(--sub)}
.ph .msheet .mslang .langsw{background:rgba(0,0,0,.06)}
.ph .msheet .mslang .langsw button{color:var(--sub)}
.ph .msheet .mslang .langsw button[aria-pressed="true"]{background:#fff;color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* ---- the review line ----
   It was three grey lines nobody stopped for. The rating is the strongest
   thing we can say about the shops, so it gets a card, a real number and
   somewhere to go. */
.ph .proof{display:flex;align-items:center;flex-wrap:wrap;gap:18px clamp(20px,3vw,34px);
  padding:20px clamp(20px,2.6vw,28px);border-radius:18px;background:#fff;
  border:1px solid var(--line-2);box-shadow:0 14px 34px -22px rgba(0,0,0,.35);
  position:relative;overflow:hidden}
.ph .proof::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--red),#ffb020)}
.ph .proof-score{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  padding-right:clamp(18px,2.4vw,28px);border-right:1px solid var(--line-2)}
.ph .proof-score b{font-size:46px;font-weight:700;letter-spacing:-.045em;line-height:1;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ph .proof-stars{display:block;margin-top:5px;font-size:17px;letter-spacing:3px;
  color:#e8a100;line-height:1}
.ph .proof-score i{margin-top:4px;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.ph .proof-say{flex:1 1 300px;min-width:0}
.ph .proof-big{margin:0;font-size:clamp(19px,2.1vw,24px);font-weight:700;letter-spacing:-.025em;
  line-height:1.25;color:var(--ink);text-wrap:balance}
.ph .proof-big em{font-style:normal;color:var(--red)}
.ph .proof-sub{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--sub)}
.ph .proof-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;height:44px;
  padding:0 20px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;
  font-weight:600;white-space:nowrap;transition:background .16s,transform .16s}
.ph .proof-cta:hover{background:var(--red);color:#fff;transform:translateY(-1px)}
.ph .proof-cta:focus-visible{outline:2px solid var(--red);outline-offset:3px}
@media(max-width:700px){
  .ph .proof{gap:14px 18px;padding:18px}
  .ph .proof-score{flex-direction:row;align-items:baseline;gap:10px;padding:0;border-right:0}
  .ph .proof-score b{font-size:34px}
  .ph .proof-stars{margin-top:0}
  .ph .proof-cta{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.ph .proof-cta{transition:none}
  .ph .proof-cta:hover{transform:none}}

/* ---- the shelf controls, on a card ----
   Same object as the review card further down the page: white, one soft
   shadow, and a red-to-amber edge holding the left side. The strip used to
   float loose on the grey and read as three unrelated rows. */
.ph .shelfcard{position:relative;margin:0 0 20px;padding:20px clamp(18px,2.4vw,26px) 18px;
  border:1px solid var(--line-2);border-radius:18px;background:#fff;
  box-shadow:0 14px 34px -24px rgba(0,0,0,.35);overflow:visible}
.ph .shelfcard::before{content:"";position:absolute;top:0;bottom:0;left:0;width:4px;
  border-radius:18px 0 0 18px;background:linear-gradient(180deg,var(--red),#ffb020)}
.ph .shelfcard .shelf{margin-bottom:0}
.ph .shelfcard .trust{margin-bottom:14px}
.ph .shelfcard .trust{padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.ph .shelfcard .shelffind,.ph .shelfcard .shelfbtn,.ph .shelfcard .shelfsort select{
  background:var(--bg-2);border-color:var(--line-2)}
.ph .shelfcard .shelffind:focus-within{background:#fff}
.ph .shelfcard .shelfbtn.on{background:var(--ink);border-color:var(--ink)}
.ph .shelfcard .panel{box-shadow:none;border-color:var(--line-2);background:var(--bg-2)}
.ph .shelfcard .panel-foot{background:#fff}
.ph .shelfcard .pchip{background:#fff}
.ph .shelfcard .pchip.on{background:var(--ink)}
.ph .shelfcard .shelfmeta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}

/* the panel's own way out */
.ph .panel{position:relative}
.ph .panel-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;
  border-radius:50%;background:transparent;color:var(--sub);font-size:22px;line-height:1;
  cursor:pointer;transition:background .14s,color .14s}
.ph .panel-x:hover{background:var(--line-2);color:var(--ink)}
.ph .panel-x:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.ph .panel-in{padding-right:46px}
@media(max-width:620px){
  .ph .shelfcard{padding:16px 14px 14px;border-radius:16px}
  .ph .panel-in{padding-right:18px}
}

/* ---- lease-to-own, only where a shop can write one ---- */
.ph .stk-lease{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:8px;
  padding:4px 10px;border-radius:999px;background:rgba(226,28,33,.08);font-size:11.5px;font-weight:700;
  letter-spacing:.01em;color:var(--red)}
.ph .stk-lease::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.ph .sh-lease{margin:12px 0 0;padding:13px 15px;border:1px solid rgba(226,28,33,.28);border-radius:13px;
  background:rgba(226,28,33,.05);font-size:14px;line-height:1.5;color:var(--sub)}
.ph .sh-lease b{color:var(--red)}
.ph .sh-lease p{margin:0}
.ph .sh-apply{display:inline-flex;align-items:center;gap:7px;height:40px;margin-top:11px;padding:0 18px;
  border-radius:999px;background:var(--red);color:#fff;font-size:14.5px;font-weight:600;
  transition:background .14s}
.ph .sh-apply:hover{background:var(--ink);color:#fff}
.ph .sh-apply:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ph .sh-applyfine{margin-top:7px!important;font-size:12.5px;color:var(--sub)}