@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/anton-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); }
/* YooPick: bold orange + deep navy, poster-style display type (Anton) with Inter for reading. */
:root {
  --orange: #ff6a13; --orange-btn: #c84605; --orange-btn-h: #b03c04; --orange-d: #c2410c; --orange-l: #fff1e8;
  --navy: #14243a; --navy-2: #1d3352; --ink: #161b26; --muted: #5b6474; --line: #e7e2da;
  --cream: #faf7f2; --white: #fff; --ok: #0f7a43; --bad: #c62828;
  --r: 18px; --r-sm: 12px; --shadow: 0 18px 40px -18px rgba(20, 36, 58, .35);
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink); background: var(--cream); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.wrap--narrow { width: min(780px, 100% - 32px); }
.center { text-align: center; } .center-row { justify-content: center; }
[hidden] { display: none !important; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.small { font-size: .875rem; color: var(--muted); }

/* type */
.display { font: 400 clamp(2.6rem, 6.4vw, 4.9rem)/1 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--navy); }
.h1 { font: 400 clamp(2.1rem, 4.6vw, 3.3rem)/1.05 var(--display); text-transform: uppercase; color: var(--navy); }
.h2 { font: 400 clamp(1.9rem, 4vw, 2.9rem)/1.05 var(--display); text-transform: uppercase; color: var(--navy); }
.h3 { font-size: 1.15rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.h4 { font-size: 1rem; font-weight: 700; margin-top: 1.2em; }
.lead { font-size: 1.15rem; color: #394151; max-width: 36em; }
.sub { color: var(--muted); font-size: 1.08rem; max-width: 40em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; color: var(--orange-d); background: var(--orange-l); padding: 6px 12px; border-radius: 99px; }
.link { color: var(--orange-d); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link:hover { text-decoration: underline; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 99px; border: 2px solid var(--orange-btn);
  background: var(--orange-btn); color: #fff; font: 700 1rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { background: var(--orange-btn-h); border-color: var(--orange-btn-h); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(255, 106, 19, .7); }
.btn:active { transform: none; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: none; }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--orange-l); border-color: var(--orange-l); color: var(--navy); }
.btn--sm { min-height: 38px; padding: 0 16px; font-size: .9rem; }
.btn--lg { min-height: 54px; padding: 0 28px; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* header */
.announce { background: var(--navy); color: #fff; font-size: .85rem; font-weight: 500; text-align: center; padding: 8px 16px; display: flex; gap: 8px; justify-content: center; align-items: center; }
.announce .i { color: var(--orange); }
.top { position: sticky; top: 0; z-index: 50; background: rgba(250, 247, 242, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.brand img { width: 74px; height: auto; }
.top__nav { display: flex; gap: 22px; margin-left: auto; }
.top__nav a, .mnav a { text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--navy); }
.top__nav a:hover { color: var(--orange-d); }
.top__act { display: flex; align-items: center; gap: 12px; }
.lang { font-weight: 700; font-size: .85rem; text-decoration: none; border: 1.5px solid var(--line); border-radius: 99px; padding: 6px 10px; color: var(--navy); }
.lang:hover { border-color: var(--navy); }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 10px; }
.burger span { display: block; height: 2px; background: var(--navy); margin: 6px 0; transition: transform .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mnav { display: grid; padding: 8px 16px 18px; border-top: 1px solid var(--line); }
.mnav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.mnav[hidden] { display: none; }
@media (max-width: 960px) { .top__nav { display: none; } .burger { display: block; } .top__act { margin-left: auto; } }
@media (max-width: 420px) { .top__act .btn { display: none; } }

/* hero */
.hero { position: relative; overflow: hidden; padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 60%; height: 140%; background: linear-gradient(160deg, var(--orange) 0 48%, var(--navy) 48% 100%); transform: skewX(-14deg); opacity: .95; z-index: -1; }
.hero__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero__copy .eyebrow { margin-bottom: 18px; }
.hero .btn--ghost { background: var(--cream); }
.hero .btn--ghost:hover { background: var(--navy); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.badges { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 14px; font-weight: 600; color: var(--navy); }
.badges li { display: flex; gap: 6px; align-items: center; }
.badges .i { color: var(--ok); }
.hero__price { color: var(--muted); }
.hero__price strong { color: var(--orange-d); font-size: 1.3rem; }
.hero__art { position: relative; height: clamp(420px, 48vw, 560px); }
.hero__art .case--front { position: absolute; height: 92%; right: 16%; top: 4%; transform: rotate(6deg); z-index: 2; box-shadow: 0 40px 60px -25px rgba(0, 0, 0, .55); }
.hero__art .case--back { position: absolute; height: 82%; right: 46%; top: 12%; transform: rotate(-9deg); z-index: 1; opacity: .96; }
.hero__art .case--back .case__screen { background: radial-gradient(circle at 30% 20%, #ffb37a, var(--orange) 45%, var(--orange-d)); }
.hero__art .case--back .case__screen::after { content: ''; position: absolute; inset: 0; background: url(/assets/img/logo-white.png) center 62% / 58% no-repeat; opacity: .9; }
.sticker { position: absolute; z-index: 3; display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); font-size: .82rem; color: var(--muted); }
.sticker b { display: block; font: 400 1.3rem/1 var(--display); color: var(--navy); }
.sticker .i { width: 28px; height: 28px; color: var(--orange); }
.sticker--time { left: 0; top: 18%; } .sticker--ship { right: 0; bottom: 6%; }
@media (max-width: 860px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero::before { right: -40%; top: auto; bottom: -10%; width: 110%; height: 52%; }
  .hero__art { height: 420px; max-width: 420px; width: 100%; margin: 0 auto; }
}

/* phone case component */
.case { position: relative; aspect-ratio: var(--ar, .488); height: 100%; border-radius: 15% / 7.2%; background: linear-gradient(145deg, #2a303b, #10141b); padding: 2.4%; }
.case__screen { position: relative; width: 100%; height: 100%; border-radius: 13% / 6.4%; overflow: hidden; background: linear-gradient(180deg, #eef0f4, #d9dde5); }
.case__screen > img { width: 100%; height: 100%; object-fit: cover; }
.case__cam { position: absolute; pointer-events: none; z-index: 2; }
.case__cam i { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a5568 0 12%, #0d1117 32%, #000 70%); box-shadow: 0 0 0 2px rgba(255, 255, 255, .14); }
.case--iphone .case__cam { top: 3.4%; left: 6%; width: 38%; aspect-ratio: 1; border-radius: 26%; background: rgba(16, 19, 26, .9); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12); }
.case--iphone .case__cam i { width: 40%; aspect-ratio: 1; }
.case--iphone .case__cam i:nth-child(1) { top: 7%; left: 7%; } .case--iphone .case__cam i:nth-child(2) { top: 53%; left: 7%; } .case--iphone .case__cam i:nth-child(3) { top: 30%; left: 53%; }
.case--samsung .case__cam { top: 3.4%; left: 9%; width: 12.5%; height: 25%; }
.case--samsung .case__cam i { width: 100%; aspect-ratio: 1; left: 0; background-color: #000; box-shadow: 0 0 0 3px rgba(16, 19, 26, .9), 0 0 0 4px rgba(255, 255, 255, .15); }
.case--samsung .case__cam i:nth-child(1) { top: 0; } .case--samsung .case__cam i:nth-child(2) { top: 33%; } .case--samsung .case__cam i:nth-child(3) { top: 66%; }
.case--pixel .case__cam { top: 9%; left: 2.4%; right: 2.4%; height: 10%; background: rgba(16, 19, 26, .92); border-radius: 40px; }
.case--pixel .case__cam i { height: 62%; aspect-ratio: 1; top: 19%; }
.case--pixel .case__cam i:nth-child(1) { left: 14%; } .case--pixel .case__cam i:nth-child(2) { left: 30%; } .case--pixel .case__cam i:nth-child(3) { right: 14%; height: 34%; top: 33%; }
.case--none .case__cam { display: none; }
.case--mini { height: 150px; margin: 0 auto 16px; }

/* sections */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section .h2 { margin-bottom: .35em; }
.how { background: var(--white); }
.how__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.how__track { background: var(--cream); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); }
.how__track--online { background: var(--navy); color: #fff; }
.how__track--online .how__label { color: #fff; }
.how__track--online .steps p { color: #c8d1df; }
.how__label { display: flex; gap: 8px; align-items: center; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-d); margin-bottom: 18px; }
.how__track--online .how__label .i { color: var(--orange); }
.steps { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 18px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps h4 { font-size: 1.08rem; margin: 6px 0 2px; }
.steps p { margin: 0; color: var(--muted); }
.steps__n { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--orange-btn); color: #fff; display: grid; place-items: center; font: 400 1.35rem/1 var(--display); }
@media (max-width: 760px) { .how__grid { grid-template-columns: 1fr; } }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 32px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px; text-align: center; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pcard h3 { font: 400 1.6rem/1 var(--display); text-transform: uppercase; color: var(--navy); margin-bottom: 4px; }
.pcard__name { color: var(--muted); margin-bottom: 10px; }
.pcard__price { font: 400 2.6rem/1 var(--display); color: var(--orange-d); margin: 0; }
.pcard__note { font-size: .85rem; color: var(--ok); font-weight: 600; }
.pcard__models { text-align: left; margin: 0 0 18px; font-size: .9rem; color: var(--muted); flex: 1; }
.pcard__models summary { cursor: pointer; font-weight: 600; color: var(--navy); text-align: center; list-style: none; }
.pcard__models summary::after { content: ' ▾'; }
.pcard__models[open] summary::after { content: ' ▴'; }
.pcard__models p { margin: 10px 0 0; }

.why { background: var(--white); }
.why__in { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.why__media img { border-radius: var(--r); box-shadow: var(--shadow); width: 100%; max-width: 380px; margin-inline: auto; }
.feats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 24px 0; }
.feat { display: flex; gap: 14px; }
.feat h3 { font-size: 1.05rem; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--muted); font-size: .95rem; }
.i--feat { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--orange-l); color: var(--orange-d); }
.guarantee { display: flex; gap: 12px; align-items: center; background: var(--navy); color: #fff; border-radius: var(--r-sm); padding: 16px 20px; margin: 0; }
.guarantee .i { color: var(--orange); width: 28px; height: 28px; }
@media (max-width: 860px) { .why__in { grid-template-columns: 1fr; } .feats { grid-template-columns: 1fr; } .why__media { order: 2; } }

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 28px 0 20px; }
.gallery figure { margin: 0; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 3 / 4; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } }

.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 28px; }
.review { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.review blockquote { margin: 10px 0 12px; font-size: 1.02rem; }
.review figcaption { font-weight: 700; color: var(--navy); }
.stars { color: #f5a400; display: flex; gap: 2px; }

.location { background: var(--navy); color: #fff; }
.location .h2 { color: #fff; }
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.loc__mall { display: flex; gap: 12px; font-size: 1.08rem; margin: 18px 0 26px; }
.loc__mall .i { color: var(--orange); width: 28px; height: 28px; }
.loc__mall em { color: var(--orange); font-style: normal; font-weight: 600; }
.location .h3 .i { color: var(--orange); }
.hours { border-collapse: collapse; width: 100%; max-width: 420px; margin-bottom: 8px; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); text-align: left; font-weight: 500; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.location .small { color: #b6c1d2; margin-bottom: 22px; }
.loc__media { display: grid; grid-template-columns: .8fr 1.2fr; gap: 14px; }
.loc__machine { border-radius: var(--r); width: 100%; height: 100%; object-fit: cover; max-height: 460px; }
.map { border-radius: var(--r); background: var(--navy-2); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; gap: 8px; min-height: 300px; overflow: hidden; }
.map .btn--ghost { color: #fff; border-color: #fff; }
.map .btn--ghost:hover { background: #fff; color: var(--navy); }
.map iframe { border: 0; width: 100%; height: 100%; min-height: 300px; }
.map.is-loaded { padding: 0; }
@media (max-width: 860px) { .loc { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .loc__media { grid-template-columns: 1fr; } .loc__machine { max-height: 380px; } }

.faq { background: var(--cream); }
.qa { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 10px; }
.qa summary { cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 600; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--orange); font-weight: 400; }
.qa[open] summary::after { content: '–'; }
.qa p { padding: 0 20px 18px; margin: 0; color: #394151; }

.cta-band { background: linear-gradient(120deg, var(--orange-btn), #a83a04); color: #fff; padding: clamp(40px, 6vw, 72px) 0; }
.cta-band__in { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-band .h2 { color: #fff; margin-bottom: .2em; }
.cta-band p { margin: 0; font-size: 1.08rem; }

/* footer */
.foot { background: var(--ink); color: #c9cfda; padding: 56px 0 24px; font-size: .95rem; }
.foot__grid { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr 1fr; gap: 32px; }
.foot__grid a { display: flex; gap: 8px; align-items: center; text-decoration: none; padding: 4px 0; color: #e6e9ef; }
.foot__grid a:hover { color: var(--orange); }
.foot__h { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: #8a93a3; margin: 0 0 10px; }
.foot__h + a { margin-top: 0; }
.foot__grid div > .foot__h:not(:first-child) { margin-top: 20px; }
.foot__tag { margin-top: 14px; }
.foot__bottom { border-top: 1px solid #2b3240; margin-top: 36px; padding-top: 18px; font-size: .85rem; color: #8a93a3; }
@media (max-width: 760px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .foot__grid { grid-template-columns: 1fr; } }

/* order form */
.order-head { padding: 40px 0 8px; }
.order { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; padding-bottom: 80px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(18px, 3vw, 28px); margin: 0 0 20px; min-width: 0; }
.panel__h { display: flex; gap: 12px; align-items: center; font-size: 1.2rem; font-weight: 700; color: var(--navy); padding: 0; margin-bottom: 18px; }
.panel__n { width: 32px; height: 32px; border-radius: 50%; background: var(--orange-btn); color: #fff; display: grid; place-items: center; font: 400 1.05rem/1 var(--display); flex: none; }
.order__side { position: sticky; top: 92px; }
@media (max-width: 960px) { .order { grid-template-columns: 1fr; } .order__side { position: static; } }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: #2c3442; }
.field input, .field select, .field textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid #d6d0c6; border-radius: 10px; background: #fff; color: var(--ink); min-height: 48px; }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); outline: none; box-shadow: 0 0 0 3px rgba(255, 106, 19, .18); }
.field.is-bad input, .field.is-bad select { border-color: var(--bad); }
.field__err { display: block; color: var(--bad); font-size: .82rem; font-style: normal; min-height: 0; margin-top: 4px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.row3 { display: grid; grid-template-columns: 1.2fr 1fr .8fr; gap: 0 14px; }
@media (max-width: 560px) { .row2, .row3 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: .92rem; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--orange); margin: 2px 0 0; flex: none; }
.check a { color: var(--orange-d); font-weight: 600; }
.check.is-bad span { color: var(--bad); }
.help { margin-top: 14px; font-size: .92rem; }
.help summary { cursor: pointer; color: var(--orange-d); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.help p { margin: 8px 0 0; color: var(--muted); }

.line { display: grid; grid-template-columns: 1fr 120px auto; gap: 12px; align-items: end; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--line); }
.line .field { margin: 0; }
.line__rm { border: 0; background: none; color: var(--muted); cursor: pointer; min-height: 48px; padding: 0 6px; font-size: .85rem; text-decoration: underline; }
.line__rm[hidden] { display: none; }
.brands { display: flex; gap: 8px; flex-wrap: wrap; }
.brands-field { grid-column: 1 / -1; }
.brands label { flex: 1; min-width: 92px; position: relative; }
/* visually hidden radio: must not inherit .field input sizing, or it covers the selects */
.field .brands input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.brands span { display: block; color: var(--ink); text-align: center; padding: 12px 8px; border: 1.5px solid #d6d0c6; border-radius: 10px; font-weight: 600; cursor: pointer; font-size: .9rem; }
.brands input:checked + span { border-color: var(--orange-btn); background: var(--orange-l); color: #a83a04; }
.brands input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 640px) { .line { grid-template-columns: 1fr 96px; } .line .line__rm { grid-column: 1 / -1; justify-self: start; min-height: 32px; } }

.photo { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-bottom: 14px; }
.photo__stage { height: 440px; display: flex; justify-content: center; }
.case--editor .case__screen { background: repeating-conic-gradient(#f1ede6 0 25%, #fff 0 50%) 0 0 / 22px 22px; touch-action: none; }
.case--editor #editor-img { position: absolute; max-width: none; width: auto; height: auto; cursor: grab; user-select: none; -webkit-user-drag: none; }
.case--editor #editor-img:active { cursor: grabbing; }
.drop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 22% 12% 12%; cursor: pointer; color: var(--navy); font-weight: 600; font-size: .92rem; }
.drop .i { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--orange-btn); color: #fff; }
.drop small { color: var(--muted); font-weight: 400; font-size: .76rem; }
.drop.is-over { background: rgba(255, 106, 19, .1); }
.photo__tools[hidden] { display: none; }
.zoom { display: flex; gap: 12px; align-items: center; font-weight: 600; margin: 10px 0 14px; }
.zoom input { flex: 1; accent-color: var(--orange); }
.photo__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.note { font-size: .88rem; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; }
.note:empty { display: none; }
.note.is-warn { background: #fff4e5; color: #8a4b00; }
.note.is-ok { background: #e9f7ef; color: var(--ok); }
@media (max-width: 640px) { .photo { grid-template-columns: 1fr; } .photo__stage { height: 400px; } }

.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 8px; }
.choice__opt { display: flex; gap: 10px; border: 1.5px solid #d6d0c6; border-radius: 12px; padding: 14px; cursor: pointer; }
.choice__opt:has(input:checked) { border-color: var(--orange); background: var(--orange-l); }
.choice__opt input { accent-color: var(--orange); margin-top: 3px; }
.choice__opt small { display: block; color: var(--muted); }
@media (max-width: 560px) { .choice { grid-template-columns: 1fr; } }

.summary__lines { list-style: none; padding: 0; margin: 0 0 14px; }
.summary__lines li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.summary__lines li:empty { display: none; }
.summary__tot { margin: 0 0 16px; }
.summary__tot div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--muted); }
.summary__tot dd { margin: 0; font-variant-numeric: tabular-nums; }
.summary__grand { color: var(--ink) !important; font-weight: 700; font-size: 1.25rem; border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 10px !important; }
.summary__grand dd { color: var(--orange-d); }
.form-err { color: var(--bad); font-weight: 600; font-size: .92rem; }
.form-err:empty { display: none; }
.secure { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; }
.secure .i { color: var(--ok); }

/* thanks / track / legal */
.done-icon { width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.done-icon .i { width: 44px; height: 44px; stroke-width: 2.6; }
.refbox { display: inline-flex; flex-direction: column; gap: 2px; background: #fff; border: 2px dashed var(--orange); border-radius: var(--r-sm); padding: 12px 22px; margin: 10px 0 18px; }
.refbox span { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.refbox b { font: 400 1.8rem/1.1 var(--display); color: var(--navy); letter-spacing: .04em; }
.trackform { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 14px; align-items: end; }
.trackform .field { margin: 0; }
@media (max-width: 640px) { .trackform { grid-template-columns: 1fr; } }
.timeline { list-style: none; padding: 0; margin: 20px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; font-size: .88rem; color: var(--muted); }
.timeline li span { display: block; height: 8px; border-radius: 99px; background: var(--line); margin-bottom: 8px; }
.timeline li.done span, .timeline li.now span { background: var(--orange); }
.timeline li.now { color: var(--navy); font-weight: 700; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 99px; font-weight: 600; font-size: .85rem; }
.pill--bad { background: #fde8e8; color: var(--bad); }
.prose h2 { font-size: 1.2rem; margin-top: 1.6em; color: var(--navy); }
.prose p { color: #394151; }
.prose a { color: var(--orange-d); }
.center .h3 { justify-content: center; }
#lines { min-height: 98px; }
/* research additions: promo, compare strip, bulk badge */
.promo { display: flex; gap: 10px; align-items: flex-end; }
.promo .field { flex: 1; margin: 0; }
.promo .btn { min-height: 48px; }
.promo__msg { font-size: .88rem; font-weight: 600; margin: 6px 0 4px; }
.promo__msg:empty { display: none; }
.promo__msg.is-ok { color: var(--ok); } .promo__msg.is-bad { color: var(--bad); }
.merchant { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 12px; }
.bulk-badge { display: inline-flex; gap: 8px; align-items: center; background: var(--navy); color: #fff; border-radius: 99px; padding: 8px 16px; font-weight: 600; margin: 4px 0 0; }
.bulk-badge .i { color: var(--orange); }
.compare { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0; margin-top: 28px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.compare > div { padding: 22px 26px; }
.compare span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.compare p { margin: 0; }
.compare__them { background: #fff; color: var(--muted); }
.compare__them p { text-decoration: line-through; text-decoration-color: rgba(198, 40, 40, .5); }
.compare__us { background: var(--navy); color: #fff; }
.compare__us span { color: var(--orange); }
.compare__us b { font: 400 1.5rem/1 var(--display); color: #fff; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
/* payments */
.stripe-note { display: flex; gap: 8px; align-items: flex-start; }
.testmode { background: #fff4e0; color: #8a4b00; border: 1px dashed #e0a24a; border-radius: 10px; padding: 8px 12px; font-size: .82rem; font-weight: 600; }
.paybox { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin: 6px auto 18px; max-width: 520px; }
.paybox p { color: var(--muted); }