/* ==========================================================
   Pop couture, November 2026 ("on charbonne"):
   - the try-on as a show: a big colour block of the chosen frame, XXL type, drawn phone + QR, light micro-animations
   - the atelier in three steps, reassurance, a complete footer, product page details, mobile menu in Syne
   Colours: --t1..--t4 = the frame picked in the try-on block (local), --p1..--p4 = the frame on screen (global).
   ========================================================== */
@property --t1 { syntax: '<color>'; inherits: true; initial-value: #8B5FA8; }
@property --t2 { syntax: '<color>'; inherits: true; initial-value: #3B2A4A; }
@property --t3 { syntax: '<color>'; inherits: true; initial-value: #EFE3F2; }
@property --t4 { syntax: '<color>'; inherits: true; initial-value: #C9A23A; }
:root { --pp-syne: 'Syne', 'Jost', sans-serif; --pp-ease: cubic-bezier(.2, .8, .2, 1); }

/* ---------- shared bits ---------- */
.pp-kicker { display: inline-flex; align-items: center; gap: 14px; font: 700 12px/1 var(--pp-syne); letter-spacing: .2em; text-transform: uppercase; }
.pp-live { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #fff; color: var(--t2, #171414); font: 700 11px/1 var(--pp-syne); letter-spacing: .16em; text-transform: uppercase; }
.pp-live i { width: 8px; height: 8px; border-radius: 50%; background: #E2453C; box-shadow: 0 0 0 0 rgba(226,69,60,.5); animation: ppPulse 1.8s ease-out infinite; }
@keyframes ppPulse { 0% { box-shadow: 0 0 0 0 rgba(226,69,60,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(226,69,60,0); } }
.pp-xxl { margin: 22px 0 0; font: 800 clamp(70px, 9.6vw, 164px)/.84 var(--pp-syne); letter-spacing: -.06em; text-transform: uppercase; max-width: 6.4ch; }
.pp-xxl i { font-style: normal; color: var(--t4); }
.pp-label { display: block; margin: 30px 0 12px; font: 700 11.5px/1 var(--pp-syne); letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.pp-small { margin: 18px 0 0; font-size: 13px; opacity: .75; }
.pp-p { font-size: 17px; line-height: 1.65; max-width: 33em; margin: 0; }
.pp-arrow { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pp-go { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 26px; padding: 20px 24px; border-radius: 999px; background: #fff; color: var(--t2); font: 700 15px/1.1 var(--pp-syne); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); transition: transform .3s var(--pp-ease); }
.pp-go:active { transform: scale(.97); }
.pp-go > svg:first-child { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pp-go .pp-arrow { margin-left: auto; }
.pp-badge { position: absolute; width: 150px; z-index: 3; animation: v8Spin 26s linear infinite; pointer-events: none; }
.pp-badge text { font: 800 10.5px/1 var(--pp-syne); letter-spacing: .12em; fill: #fff; }
.pp-disc { position: absolute; left: 50%; top: 50%; width: min(560px, 94%); aspect-ratio: 1; border-radius: 50%; background: var(--t4); transform: translate(-50%, -50%); }
.pp-ghost { position: absolute; z-index: 0; pointer-events: none; white-space: nowrap; font: 800 26vw/.8 var(--pp-syne); letter-spacing: -.06em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--t4) 55%, transparent); }
.pp-ghost > span { display: inline-block; }

/* ---------- home: the try-on block ---------- */
.pp-try { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); grid-template-areas: "head stage" "text stage"; column-gap: clamp(30px, 4vw, 80px);
  padding: clamp(80px, 8.5vw, 130px) var(--pad); color: #fff; background: color-mix(in srgb, var(--t1) 68%, var(--t2));
  transition: --t1 .9s ease, --t2 .9s ease, --t3 .9s ease, --t4 .9s ease; }
.pp-try-grid { display: contents; }
.pp-try-head { grid-area: head; position: relative; z-index: 1; align-self: end; }
.pp-try-text { grid-area: text; position: relative; z-index: 1; }
.pp-try-stage { grid-area: stage; position: relative; z-index: 1; display: grid; place-items: center; min-height: 640px; }
.pp-try .pp-ghost { left: -1vw; bottom: -7.4vw; font-size: 17vw; -webkit-text-stroke-color: color-mix(in srgb, var(--t4) 34%, transparent); bottom: -5.4vw; }
.pp-try-sub { margin: 18px 0 26px; font: italic 400 clamp(26px, 2.5vw, 40px)/1.1 'Bodoni Moda', Georgia, serif; color: var(--t4); }
.pp-try .pp-p { color: rgba(255,255,255,.9); }
.pp-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 600px; }
.pp-chips button { position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 8px 12px; border: 0; border-radius: 22px; background: var(--c3); color: #171414; cursor: pointer; font: inherit; transition: transform .35s var(--pp-ease), box-shadow .35s; }
.pp-chips button:hover { transform: translateY(-4px) rotate(-1.5deg); }
.pp-chips button.on { transform: translateY(-6px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--t1) 68%, var(--t2)), 0 0 0 6px #fff, 0 22px 40px -20px rgba(0,0,0,.6); }
.pp-chips button.on::after { content: ''; position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--c1); }
.pp-chip-img { display: block; width: 100%; }
.pp-chip-img img { width: 100%; height: 46px; object-fit: contain; display: block; filter: drop-shadow(0 4px 4px rgba(0,0,0,.15)); }
.pp-chip-name { font: 700 14px/1.1 var(--pp-syne); letter-spacing: -.01em; }
.pp-steps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 640px; }
.pp-steps li { display: flex; gap: 12px; align-items: flex-start; }
.pp-steps li > b { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--t2); font: 600 16px/1 'Jost', sans-serif; }
.pp-steps li > span { display: grid; gap: 3px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.78); }
.pp-steps strong { font: 700 18px/1.1 var(--pp-syne); color: #fff; letter-spacing: -.01em; }
.pp-try .pp-badge { top: 3%; left: 2%; }
.pp-phone { position: relative; z-index: 2; }
.pp-phone .fk-phone { width: 286px; }
.pp-phone .fk-phone-screen, .pp-tp-phone .fk-phone-screen, .pp-pdp-phone .fk-phone-screen { background: radial-gradient(120% 80% at 30% 15%, #fff 0%, var(--t3) 70%); }
.pp-phone .fk-live, .pp-tp-phone .fk-live, .pp-pdp-phone .fk-live { color: var(--t2); }
.pp-phone .fk-live::before, .pp-tp-phone .fk-live::before, .pp-pdp-phone .fk-live::before { background: #E2453C; }
.pp-qr.fk-qr-card { right: -96px; bottom: 34px; width: 172px; padding: 16px 16px 12px; border-radius: 24px; transform: rotate(6deg); transition: transform .5s var(--pp-ease); }
.pp-qr.fk-qr-card:hover { transform: rotate(0) scale(1.04); }
.pp-qr.fk-qr-card > span { color: var(--t2); font: 800 10.5px/1.2 var(--pp-syne); letter-spacing: .12em; }
.pp-arrow-note { position: absolute; z-index: 3; right: -110px; bottom: 236px; width: 96px; transform: rotate(68deg); }
.pp-arrow-note svg { width: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pp-mframe { position: relative; z-index: 2; width: 100%; display: grid; place-items: center; }
.pp-mframe img { width: 96%; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)) drop-shadow(0 24px 22px rgba(0,0,0,.22)); }
/* the micro-animation when a frame is picked (once, no loop) */
.pp-try.pop .fk-phone-frame, .pp-try.pop .pp-mframe img { animation: ppPop .7s var(--pp-ease); }
.pp-try.pop .pp-disc { animation: ppDisc .8s var(--pp-ease); }
.pp-try.pop .pp-ghost > span { animation: ppGhost .9s var(--pp-ease); }
@keyframes ppPop { 0% { opacity: 0; scale: .78; rotate: -6deg; } 60% { opacity: 1; scale: 1.06; rotate: 1.5deg; } 100% { scale: 1; rotate: 0deg; } }
@keyframes ppDisc { 0% { scale: .9; } 55% { scale: 1.03; } 100% { scale: 1; } }
@keyframes ppGhost { 0% { opacity: 0; transform: translateX(8%); } 100% { opacity: 1; transform: none; } }

/* ---------- try-on page ---------- */
.v7tp.pp-tp { padding: 0 0 clamp(60px, 6vw, 100px); background: var(--paper); color: var(--ink); transition: --t1 .9s ease, --t2 .9s ease, --t3 .9s ease, --t4 .9s ease; }
.pp-tp-head { position: relative; overflow: hidden; isolation: isolate; padding: clamp(46px, 5vw, 80px) var(--pad) clamp(120px, 11vw, 170px); color: #fff; background: color-mix(in srgb, var(--t1) 68%, var(--t2)); }
.pp-tp-head > *:not(.pp-ghost):not(.pp-badge) { position: relative; z-index: 1; }
.pp-tp-head .pp-xxl { max-width: none; font-size: clamp(64px, 10.4vw, 176px); }
.pp-tp-head .pp-p { margin-top: 22px; color: rgba(255,255,255,.9); }
.pp-tp-head .pp-ghost { right: -2vw; bottom: -4.6vw; font-size: 20vw; }
.pp-tp-head .pp-badge { right: var(--pad); top: clamp(36px, 4vw, 60px); }
.pp-tp-grid.v7tp-grid { position: relative; z-index: 2; margin-top: clamp(-120px, -8vw, -70px); padding: 0 var(--pad); }
.pp-tp-stage.v7tp-stage { background: var(--t3) !important; border-radius: 32px; overflow: hidden; box-shadow: 0 50px 90px -50px rgba(40,20,30,.45); transition: background .9s; }
.pp-tp-stage.v7tp-stage::after { display: none; }
.pp-tp-stage .pp-disc { width: 64%; background: color-mix(in srgb, var(--t4) 60%, #fff); top: 46%; }
.pp-tp-stage .v7tp-face { border-color: color-mix(in srgb, var(--t2) 22%, transparent); }
.pp-tp-stage .v7tp-frame { z-index: 1; width: 66%; }
.pp-tp-name { position: absolute; z-index: 2; left: 28px; top: 24px; display: grid; gap: 4px; }
.pp-tp-name b { font: 800 clamp(30px, 3vw, 48px)/.9 var(--pp-syne); letter-spacing: -.04em; color: var(--t2); text-transform: uppercase; }
.pp-tp-name span { font-size: 12.5px; letter-spacing: .06em; color: color-mix(in srgb, var(--t2) 75%, transparent); }
.pp-tp-stage .v7tp-slot { z-index: 2; border-radius: 22px; background: #fff; box-shadow: 0 24px 40px -26px rgba(40,20,30,.4); padding: 16px 22px 18px; }
.pp-tp-stage .v7tp-slot b { font: 700 19px/1.1 var(--pp-syne); }
.pp-tp-stage .v7tp-slot .pp-live { margin-bottom: 4px; }
.pp-tp-stage .v7tp-note { z-index: 3; border-radius: 14px; }
.pp-tp-side.v7tp-side { padding-top: clamp(90px, 9vw, 130px); }
.pp-tp-side .pp-label { margin: 0; color: var(--t2); opacity: 1; }
.pp-tp-list button { border: 0 !important; border-radius: 20px; background: color-mix(in srgb, var(--c3) 75%, #fff) !important; box-shadow: none !important; transition: transform .3s var(--pp-ease), background .3s; }
.pp-tp-list button:hover { transform: translateX(4px); }
.pp-tp-list button.on { background: var(--c3) !important; box-shadow: inset 0 0 0 2px var(--c1) !important; }
.pp-tp-list b { font-family: var(--pp-syne) !important; font-weight: 700 !important; letter-spacing: -.02em; }
.pp-tp-list i { font-weight: 500; }
.pp-tp .v7tp-info b { font-family: var(--pp-syne); font-weight: 700; letter-spacing: -.02em; }
.pp-tp-scan { position: relative; display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; padding: 20px 20px 20px 14px; border-radius: 28px; color: #fff; background: color-mix(in srgb, var(--t1) 68%, var(--t2)); overflow: hidden; }
.pp-tp-phone .fk-phone { width: 140px; padding: 6px; border-radius: 26px; animation: none; transform: rotate(-5deg); }
.pp-tp-phone .fk-phone-screen { border-radius: 21px; }
.pp-tp-phone .fk-phone-notch { width: 42px; height: 11px; margin-left: -21px; top: 6px; }
.pp-tp-phone .fk-live { top: 24px; left: 9px; font-size: 7px; padding: 4px 6px 4px 14px; }
.pp-tp-phone .fk-live::before { left: 6px; width: 4px; height: 4px; margin-top: -2px; }
.pp-tp-qr { display: grid; gap: 10px; justify-items: start; }
.pp-tp-qr .pp-qr.fk-qr-card { position: relative; right: auto; bottom: auto; width: 150px; transform: rotate(3deg); }
.pp-tp-qr .fk-qr-note { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.88); }
.pp-tp .pp-go { background: color-mix(in srgb, var(--t1) 68%, var(--t2)); color: #fff; }
.pp-tp .pp-small { color: var(--muted); opacity: 1; }
.pp-tp .pp-steps { max-width: none; margin: clamp(40px, 4vw, 64px) var(--pad) 0; gap: clamp(12px, 1.4vw, 20px); }
.pp-tp .pp-steps li { flex-direction: column; gap: 14px; padding: 24px 26px 28px; border-radius: 26px; background: var(--t3); transition: background .9s; }
.pp-tp .pp-steps li:nth-child(2) { background: color-mix(in srgb, var(--t4) 55%, #fff); }
.pp-tp .pp-steps li:nth-child(3) { background: color-mix(in srgb, var(--t1) 68%, var(--t2)); }
.pp-tp .pp-steps li > b { width: auto; height: auto; background: none; font-size: clamp(56px, 5vw, 84px); line-height: .8; color: var(--t2); letter-spacing: -.05em; }
.pp-tp .pp-steps li > span { color: var(--text-2); font-size: 14.5px; }
.pp-tp .pp-steps strong { color: var(--ink); font-size: 24px; }
.pp-tp .pp-steps li:nth-child(3) > b, .pp-tp .pp-steps li:nth-child(3) strong { color: #fff; }
.pp-tp .pp-steps li:nth-child(3) > span { color: rgba(255,255,255,.85); }

/* ---------- home: the atelier ---------- */
.pp-atelier { padding: clamp(80px, 9vw, 140px) var(--pad); background: var(--paper); color: var(--ink); }
.pp-at-head { max-width: 820px; }
.pp-at-head .v8-p { margin-top: 18px; }
.pp-at-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 30px); margin: clamp(36px, 4vw, 56px) 0 34px; }
.pp-at { position: relative; padding: 14px 14px 30px; border-radius: 30px; background: var(--c3); transition: transform .5s var(--pp-ease); transition-delay: var(--d, 0ms); }
.pp-at:hover { transform: translateY(-6px) rotate(-.6deg); transition-delay: 0ms; }
.pp-at-img { aspect-ratio: 4 / 4.3; overflow: hidden; border-radius: 999px 999px 20px 20px; background: #fff; }
.pp-at-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--pp-ease); }
.pp-at:hover .pp-at-img img { transform: scale(1.05); }
.pp-at-n { display: block; margin: 20px 12px 0; font: 800 58px/.8 var(--pp-syne); letter-spacing: -.05em; color: var(--c1); }
.pp-at h3 { margin: 14px 12px 0; font: 800 26px/1.05 var(--pp-syne); letter-spacing: -.03em; }
.pp-at p { margin: 10px 12px 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* ---------- product page ---------- */
.pdp-name { font-family: var(--pp-syne) !important; font-weight: 800 !important; letter-spacing: -.04em !important; text-transform: uppercase; }
.pp-assure-pdp { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-assure-pdp li { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--p3) 55%, #fff); transition: background 1s; }
.pp-assure-pdp svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--p2); stroke-width: 1.5; stroke-linejoin: round; }
.pp-assure-pdp li > span { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.pp-assure-pdp b { font: 500 14px/1.25 'Jost', sans-serif; color: var(--ink); }
.pp-pdp-phone { position: relative; display: grid; place-items: center; min-height: 540px; width: 100%; min-width: min(440px, 100%); }
.pp-pdp-phone .pp-disc { width: min(440px, 96%); background: var(--t3); }
.pp-pdp-phone .pp-disc::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: var(--t4); opacity: .55; }
.pp-pdp-phone .fk-phone { width: 236px; }
.pdp-try { background: color-mix(in srgb, var(--p3) 40%, #FFFCF8) !important; transition: background 1s; }
.pdp-try h2 { letter-spacing: -.04em; }

/* ---------- concierge: the label folds away once the page scrolls ---------- */
.bubble-label { transition: opacity .35s, transform .35s var(--pp-ease); }
html.pp-scrolled .bubble-label { opacity: 0; transform: translateX(14px) scale(.92); pointer-events: none; }

/* ---------- mobile menu ---------- */
.drawer-panel > a:not(.drawer-made), .drawer-panel .link-btn { font-family: var(--pp-syne) !important; font-weight: 700; font-size: 21px !important; letter-spacing: -.03em; }
.drawer-panel > a:not(.drawer-made):hover { color: var(--p1); }
.drawer-label { font-family: var(--pp-syne) !important; font-style: normal !important; font-weight: 700; font-size: 11.5px !important; letter-spacing: .2em; text-transform: uppercase; }
.pp-drawer-try { background: color-mix(in srgb, var(--p1) 68%, var(--p2)) !important; color: rgba(255,255,255,.85) !important; }
.pp-drawer-try b { font-family: var(--pp-syne) !important; font-weight: 700 !important; font-size: 17px !important; color: #fff !important; letter-spacing: -.02em; }
.pp-drawer-img { display: grid; place-items: center; width: 96px; height: 72px; border-radius: 14px; background: var(--p3); }
.pp-drawer-img img { width: 90% !important; height: auto !important; object-fit: contain !important; border-radius: 0 !important; }

/* ---------- footer ---------- */
.site-footer.pp-foot { background: #171414 !important; padding-top: 0 !important; }
.pp-assure { list-style: none; margin: 0 calc(var(--pad) * -1) clamp(56px, 6vw, 80px); padding: 26px var(--pad); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; background: var(--paper); color: var(--ink); border-top: 1px solid var(--v8-line); }
.pp-assure li { display: flex; gap: 14px; align-items: center; }
.pp-assure svg { flex: none; width: 46px; height: 46px; padding: 11px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; background: #8B5FA8; }
.pp-assure li:nth-child(2) svg { background: #1A8FB5; } .pp-assure li:nth-child(3) svg { background: #9A7333; } .pp-assure li:nth-child(4) svg { background: #C46E3E; }
.pp-assure li > span { display: grid; gap: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.pp-assure b { font: 500 15.5px/1.2 'Jost', sans-serif; color: var(--ink); }
.pp-foot .footer-top { border-color: rgba(255,255,255,.14) !important; }
.pp-foot .display-sm { font-size: clamp(30px, 3vw, 46px) !important; }
.pp-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); gap: 30px; padding: 54px 0 40px; border-bottom: 1px solid rgba(255,255,255,.14); }
.pp-foot-cols h3 { margin: 0 0 14px; font: 700 11.5px/1 var(--pp-syne); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.pp-foot-cols nav { display: grid; align-content: start; gap: 2px; }
.pp-foot-cols nav a, .pp-foot-btn { justify-self: start; padding: 5px 0; font-size: 15px; color: rgba(255,255,255,.86); background: none; border: 0; cursor: pointer; font-family: inherit; text-align: left; transition: color .2s; overflow-wrap: anywhere; }
.pp-foot-cols nav a:hover, .pp-foot-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.pp-foot-visit p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.86) !important; }
.pp-foot-visit .pp-foot-muted { font-size: 13px; color: rgba(255,255,255,.6) !important; }
.pp-foot-cta { margin-top: 6px; padding: 13px 22px; border: 0; border-radius: 999px; background: #fff; color: #171414; font: 700 13px/1 var(--pp-syne); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .3s, color .3s; }
.pp-foot-cta:hover { background: var(--p1); color: #fff; }
.pp-foot-mark { position: relative; display: flex; justify-content: space-between; gap: .2em; margin: clamp(30px, 4vw, 56px) 0 0; font: 800 clamp(40px, 7.4vw, 140px)/.82 var(--pp-syne); letter-spacing: -.055em; color: transparent; background: linear-gradient(90deg, #8B5FA8 0%, #1A8FB5 34%, #B88A3E 66%, #D9824E 100%); -webkit-background-clip: text; background-clip: text; user-select: none; }
.pp-foot .footer-bottom { color: rgba(255,255,255,.7) !important; align-items: center; }
.pp-foot .footer-bottom .footnote { color: rgba(255,255,255,.55); }
.pp-foot .footer-links a { color: rgba(255,255,255,.8); }
.pp-foot .lang-btn { padding: 8px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: none; color: #fff; cursor: pointer; font: 600 12px/1 var(--pp-syne); letter-spacing: .1em; }

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .pp-go.v7-mob { display: flex !important; }
  .pp-xxl { font-size: clamp(60px, 19vw, 104px); }
  .pp-try { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "text"; padding-top: 70px; padding-bottom: 76px; }
  .pp-try-sub { margin-bottom: 0; }
  .pp-try-stage { min-height: min(360px, 92vw); margin: 18px 0 8px; }
  .pp-try .pp-disc { width: min(300px, 80vw); }
  .pp-try .pp-badge { width: 88px; top: 0; right: 0; left: auto; }
  .pp-try .pp-ghost { font-size: 42vw; bottom: -9vw; }
  .pp-mframe { padding: 0; }
  .pp-chips { gap: 8px; }
  .pp-chips button { padding: 10px 4px; border-radius: 18px; }
  .pp-chip-img img { height: 34px; }
  .pp-chip-name { font-size: 12px; }
  .pp-steps { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
  .pp-tp-head { padding-bottom: 110px; }
  .pp-tp-head .pp-xxl { font-size: clamp(56px, 17vw, 96px); max-width: 6.4ch; }
  .pp-tp-head .pp-badge { width: 84px; top: 18px; right: 14px; }
  .pp-tp-head .pp-ghost { font-size: 40vw; bottom: -8vw; }
  .pp-tp-grid.v7tp-grid { margin-top: -80px; }
  .pp-tp-stage.v7tp-stage { margin: 0; border-radius: 26px; aspect-ratio: 4 / 4.6; }
  .pp-tp-stage .v7tp-frame { width: 86%; }
  .pp-tp-stage .pp-disc { width: 82%; }
  .pp-tp-name { left: 18px; top: 18px; }
  .pp-tp-side.v7tp-side { padding-top: 6px; }
  .pp-tp .pp-steps { grid-template-columns: 1fr; }
  .pp-tp .pp-steps li { flex-direction: row; align-items: center; padding: 18px 20px; }
  .pp-tp .pp-steps li > b { font-size: 52px; min-width: 44px; }
  .pp-at-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); padding: 0 var(--pad) 8px; scrollbar-width: none; }
  .pp-at-grid::-webkit-scrollbar { display: none; }
  .pp-at { scroll-snap-align: start; }
  .pp-assure-pdp { grid-template-columns: 1fr; }
  .pp-pdp-phone { min-height: 440px; order: 2; }
  .pp-pdp-phone .fk-phone { width: 200px; }
  .pp-assure { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .pp-assure svg { width: 40px; height: 40px; padding: 9px; }
  .pp-assure li { align-items: flex-start; flex-direction: column; gap: 10px; }
  .pp-foot-cols { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .pp-foot-visit { grid-column: 1 / -1; }
  .pp-foot-mark { font-size: 12.2vw; flex-direction: column; gap: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-badge, .pp-live i { animation: none; }
  .pp-try.pop .fk-phone-frame, .pp-try.pop .pp-mframe img, .pp-try.pop .pp-disc, .pp-try.pop .pp-ghost > span { animation: none; }
  .pp-try, .v7tp.pp-tp { transition: none; }
}