/* Demo product pages (approved designs: pages 10–12) */
.mini-k em { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Hero */
.phero3 { padding: 22px 0 30px; }
.phero3 .hero2-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.phero3 h1 { font-size: clamp(2.1rem, 3.5vw, 3.2rem); line-height: 1.05; margin: 8px 0 14px; }
.phero3 .lead { font-size: 1rem; color: #2B2D33; margin-bottom: 16px; }
.phero3 .eyebrow-pill { margin-bottom: 4px; }
.pf-feats { margin: 0 0 20px; flex-wrap: wrap !important; }
.pf-feats > div { max-width: 210px; }
.phero3 .hero-actions { gap: 10px; }
.phero3 .hero-actions .btn { min-height: 52px; padding: 0 20px; }
.pvis { position: relative; min-height: 360px; display: flex; align-items: center; }
.pvis .laptop { margin: 0 9% 0 auto; }
.pphone { right: 0; left: auto; bottom: -4%; width: 24%; max-width: 160px; }
@media (max-width: 980px) { .pvis { min-height: 0; padding-bottom: 20px; } .pvis .laptop { margin: 0 auto; } }
.pdash { position: absolute; inset: 0; padding: 2.4em .9em .8em; display: grid; gap: .7em; align-content: start; font-size: 1em; }
.pd-top { display: flex; justify-content: space-between; align-items: center; }
.pd-top img { width: 3em; }
.pd-h { font-size: 1.15em; font-weight: 800; }
.pd-k { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.pd-k div { background: #F6F6F8; border-radius: .6em; padding: .55em; }
.pd-k small { display: block; color: #8B8E96; font-size: .78em; white-space: nowrap; overflow: hidden; }
.pd-k b { font-size: 1.15em; }
.pd-rows { display: grid; gap: .45em; }
.pd-rows div { display: flex; gap: .5em; align-items: center; font-size: .85em; }
.pd-rows i { width: 1.6em; height: 1.6em; border-radius: .4em; background: #FFE6CF; flex: none; }
.pd-rows span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptablet { position: absolute; left: 0; bottom: 2%; z-index: 3; width: 30%; max-width: 190px; aspect-ratio: 3 / 4.2; background: #111214; border-radius: 18px; padding: 8px; box-shadow: 0 24px 50px -18px rgba(31,31,31,.6); }
.ptablet-in { background: #fff; border-radius: 12px; height: 100%; padding: 10px; display: grid; align-content: start; gap: 10px; font-size: 8px; }
.pt-top { display: flex; gap: 6px; align-items: center; font-weight: 800; }
.pt-top img { width: 22px; }
.pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pt-grid span { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 8px; background: #FFF6EE; font-weight: 700; }
.pt-grid i { color: var(--orange); font-style: normal; }
.preceipt { position: absolute; left: 22%; bottom: -2%; z-index: 4; width: 17%; max-width: 110px; }
.pr-paper { background: #fff; border-radius: 3px 3px 0 0; padding: 8px 7px 6px; display: grid; gap: 4px; font-size: 6px; box-shadow: 0 4px 10px rgba(0,0,0,.15); margin: 0 10%; transform: translateY(6px); }
.pr-paper i { height: 3px; background: #E3E4E8; border-radius: 2px; }
.pr-box { height: 56px; background: linear-gradient(180deg, #2B2D33, #141416); border-radius: 10px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.6); }
@media (max-width: 560px) { .preceipt { display: none; } }
.pchip { position: absolute; right: -2%; z-index: 5; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-card); font-weight: 700; font-size: .82rem; max-width: 150px; line-height: 1.2; }
.pchip .i { color: var(--orange); flex: none; }
@media (max-width: 1250px) { .pchip { display: none; } }

/* Sticky section tabs */
.ptabs { position: sticky; top: var(--nav-h); z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.ptabs-in { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.ptabs-in::-webkit-scrollbar { display: none; }
.ptabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; text-decoration: none; color: #2B2D33; font-size: .84rem; font-weight: 600; white-space: nowrap; }
.ptabs a .i { color: #2B2D33; }
.ptabs a:hover { border-color: var(--orange); }
.ptabs a.on { background: var(--orange-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -8px rgba(255,122,0,.7); }
.ptabs a.on .i { color: #fff; }
html { scroll-padding-top: 150px; }

/* Sections */
.psec { padding: 22px 0 6px; }
.pover { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.6fr) minmax(0, .95fr); gap: 20px; align-items: start; }
@media (max-width: 1200px) { .pover { grid-template-columns: 1fr 1fr; } .pshots { grid-column: 1 / -1; order: 3; } }
@media (max-width: 760px) { .pover { grid-template-columns: 1fr; } }
.pov-h { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0 0 8px; }
.pover .muted { font-size: .9rem; line-height: 1.6; }
.pchecks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
@media (max-width: 420px) { .pchecks { grid-template-columns: 1fr; } }
.pchecks li { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: #2B2D33; }
.pchecks li i, .pwhy li i { width: 20px; height: 20px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; flex: none; font-style: normal; }
.pshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .pshots { grid-template-columns: 1fr; } }
.pshot { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--shadow-soft); cursor: zoom-in; }
.pshot:hover { border-color: #FFC48F; box-shadow: var(--shadow-card); }
.pshot-img { position: relative; display: block; aspect-ratio: 16 / 10; background: #1F1F1F; }
.pshot-img .mini { font-size: clamp(3px, .36vw, 5px); }
.pshot-b { display: grid; gap: 4px; padding: 10px 12px 12px; }
.pshot-b b { display: flex; gap: 8px; align-items: center; font-size: .9rem; }
.pshot-b b i { width: 22px; height: 22px; border-radius: 6px; background: var(--orange); color: #fff; display: grid; place-items: center; font-style: normal; flex: none; }
.pshot-b small { color: var(--text-2); font-size: .78rem; line-height: 1.45; }
.pwhy { position: relative; overflow: hidden; border-radius: 16px; padding: 20px; color: #fff; background: radial-gradient(120% 90% at 100% 100%, rgba(255,122,0,.55), transparent 60%), linear-gradient(160deg, #2A2523, #1F1F1F); }
.pwhy h3 { font-size: 1.2rem; margin: 0 0 14px; color: #fff; }
.pwhy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; position: relative; z-index: 1; }
.pwhy li { display: flex; gap: 10px; align-items: center; font-size: .88rem; }
.pwhy-bars { position: absolute; right: 14px; bottom: 0; display: flex; gap: 5px; align-items: flex-end; height: 70px; opacity: .55; }
.pwhy-bars span { width: 9px; background: var(--orange); border-radius: 2px 2px 0 0; }
.pfw { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .pfw { grid-template-columns: 1fr; } }
.pfeat { display: grid; gap: 10px; }
.pfeat-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pfeat-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pfw .pfeat-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .pfeat-4, .pfeat-5, .pfw .pfeat-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pfeat-4, .pfeat-5, .pfw .pfeat-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .pfeat-4, .pfeat-5, .pfw .pfeat-5 { grid-template-columns: 1fr; } }
.pfeat > div { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 14px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); min-width: 0; }
.pfeat i { width: 40px; height: 40px; border-radius: 50%; background: var(--peach); color: var(--orange); display: grid; place-items: center; font-style: normal; }
.pfeat b { display: block; font-size: .84rem; line-height: 1.25; }
.pfeat small { display: block; font-size: .74rem; color: var(--text-2); line-height: 1.35; margin-top: 3px; }
.pwho-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pwho-cards > div { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); }
.pwho-cards i { width: 52px; height: 52px; border-radius: 50%; background: var(--peach); color: var(--orange); display: grid; place-items: center; font-style: normal; }
.pwho-cards b { display: block; font-size: .88rem; }
.pwho-cards small { display: block; font-size: .76rem; color: var(--text-2); }
@media (max-width: 420px) { .pwho-cards { grid-template-columns: 1fr; } }
.pwho-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pwt { display: grid; gap: 6px; text-decoration: none; color: var(--ink); text-align: center; }
.pwt span { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: 10px; background: linear-gradient(160deg, #FFE7D1, #FFD0A6); color: var(--orange-700); }
.pwt b { font-size: .8rem; }
.pwt:hover span { box-shadow: 0 0 0 2px var(--orange); }
.pwho-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1200px) { .pwho-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pwho-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .pwho-row { grid-template-columns: 1fr; } }
.pwho-row > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pwr-art { width: 64px; height: 56px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(160deg, #FFE7D1, #FFD0A6); color: var(--orange-700); }
.pwho-row b { display: block; font-size: .84rem; }
.pwho-row small { display: block; font-size: .72rem; color: var(--text-2); line-height: 1.35; }
.pextra { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .pextra { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pextra { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .pextra { grid-template-columns: 1fr; } }
.pextra > div { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); }
.pextra i { width: 42px; height: 42px; border-radius: 10px; background: var(--orange-grad); color: #fff; display: grid; place-items: center; font-style: normal; }
.pextra b { display: block; font-size: .86rem; }
.pextra small { display: block; font-size: .76rem; color: var(--text-2); line-height: 1.35; }
.pbi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .pbi { grid-template-columns: 1fr; } }
.pben { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .pben { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .pben { grid-template-columns: 1fr; } }
.pben > div { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--shadow-soft); }
.pben i { width: 40px; height: 40px; border-radius: 50%; background: var(--peach); color: var(--orange); display: grid; place-items: center; font-style: normal; margin-bottom: 10px; }
.pben b { display: block; font-size: .86rem; }
.pben small { display: block; font-size: .76rem; color: var(--text-2); line-height: 1.4; margin-top: 4px; }
.pint { display: flex; flex-wrap: wrap; gap: 8px; }
.pint span { display: inline-flex; gap: 6px; align-items: center; padding: 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .82rem; font-weight: 600; }
.pint .i { color: var(--orange); }
.pstory { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-soft); margin-top: 38px; }
@media (max-width: 900px) { .pstory { margin-top: 0; } }
.pstory-q { width: 52px; height: 52px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; }
.pstory b { display: block; margin-bottom: 4px; }
.pstory p { margin: 0 0 12px; color: var(--text-2); font-size: .88rem; }

/* Bottom band with How It Works */
.pband { margin-top: 26px; }
.pband .bandw-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 1100px) { .pband .bandw-in { grid-template-columns: 1fr; } }
.phow-h { display: flex; gap: 10px; align-items: center; color: #fff; font-size: 1.2rem; margin: 0 0 14px; }
.phow-h::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 4px solid var(--orange); box-sizing: border-box; }
.phow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .phow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .phow { grid-template-columns: 1fr; } }
.phow li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding-right: 16px; }
.phow i { width: 52px; height: 52px; border-radius: 50%; background: var(--orange-grad); color: #fff; display: grid; place-items: center; font-style: normal; box-shadow: 0 0 0 5px rgba(255,122,0,.18); }
.phow em { display: block; font-style: normal; color: var(--orange); font-weight: 800; font-size: .82rem; }
.phow b { display: block; color: #fff; font-size: .88rem; }
.phow small { display: block; color: #D2D4D9; font-size: .74rem; line-height: 1.35; }
.phow .arr { position: absolute; right: -6px; top: 16px; color: var(--orange); }
@media (max-width: 760px) { .phow .arr { display: none; } }
.pband .hero-actions .btn { min-height: 46px; padding: 0 16px; font-size: .88rem; }
.pshot-img { overflow: hidden; }
.mini-tiles i svg { width: 1.5em; height: 1.5em; }
.pvis.has-chips .laptop { max-width: 520px !important; margin-right: 22%; }
.pvis.has-chips .pphone { right: 12%; }
.pvis.has-chips .pchip { right: -3%; }
@media (max-width: 1250px) { .pvis.has-chips .laptop { margin-right: 8%; } .pvis.has-chips .pphone { right: 0; } }
.phero3 h1.h1-sm { font-size: clamp(2rem, 3vw, 2.8rem); }
@media (min-width: 1251px) { .pvis.has-chips .laptop { margin-right: 27%; max-width: 500px !important; } .pvis.has-chips .pphone { right: 19%; width: 21%; } .pvis.has-chips .pchip { right: -2%; max-width: 140px; } }
@media (max-width: 980px) { .phero3 .hero2-grid { grid-template-columns: 1fr; } .pvis { margin-top: 18px; } }
@media (max-width: 560px) { .pshot-img .mini { font-size: 6px; } .pphone { width: 30%; } .ptablet { width: 36%; } }
.ptablet-in { overflow: hidden; }
@media (max-width: 560px) { .ptablet-in { padding: 6px; gap: 6px; font-size: 6px; } .pt-grid { gap: 4px; } .pt-grid span { padding: 5px 2px; } .pt-grid .i { width: 10px; height: 10px; } }

/* Store-style mockups (e-commerce / marketplace) */
.mini-store { display: flex; flex-direction: column; background: #fff; padding: 0; gap: 0; }
.st-top { display: flex; align-items: center; gap: 1em; padding: .8em 1.2em; border-bottom: 1px solid #EEE; }
.st-top .mini-logo { margin: 0; font-size: 1em; }
.st-search { flex: 1; display: flex; justify-content: space-between; align-items: center; border: 1px solid #E3E4E8; border-radius: .5em; padding: .35em .6em; color: #999; font-size: .8em; }
.st-search i { background: #FF7A00; color: #fff; border-radius: .3em; padding: .15em .35em; display: grid; place-items: center; font-style: normal; }
.st-pills { display: flex; gap: .5em; padding: .55em 1.2em; font-size: .78em; color: #444; overflow: hidden; white-space: nowrap; }
.st-pills span.on { background: #FF7A00; color: #fff; border-radius: .4em; padding: .1em .6em; font-weight: 700; }
.st-body { flex: 1; display: grid; grid-template-columns: 1fr; min-height: 0; padding: 0 1.2em 1em; gap: 1em; }
.st-body.has-side { grid-template-columns: 22% 1fr; padding-top: .8em; }
.st-cats { display: grid; gap: .35em; align-content: start; font-size: .78em; color: #444; }
.st-cats span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cats span.on { background: #FF7A00; color: #fff; border-radius: .4em; padding: .3em .6em; font-weight: 700; }
.st-main { display: grid; grid-template-rows: auto auto auto 1fr; gap: .6em; min-width: 0; min-height: 0; }
.st-banner { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: .6em; border-radius: .8em; padding: 1.1em 1.3em; background: radial-gradient(120% 120% at 80% 30%, #3A2F6B, #12131A 70%); color: #fff; min-height: 8.5em; }
.st-banner b { display: block; font-size: 1.55em; line-height: 1.1; font-weight: 800; }
.st-banner small { display: block; color: #D5D6DC; font-size: .8em; margin: .3em 0 .7em; }
.st-banner span { display: inline-block; background: #FF7A00; border-radius: .4em; padding: .3em .7em; font-size: .78em; font-weight: 700; }
.st-art { display: flex; gap: .6em; align-items: flex-end; justify-content: center; color: #FFB547; }
.st-perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.st-perks span { display: flex; gap: .4em; align-items: center; font-size: .72em; font-weight: 700; color: #333; white-space: nowrap; overflow: hidden; }
.st-perks .i { color: #FF7A00; flex: none; }
.st-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: .6em; }
.st-prods div { display: grid; gap: .2em; justify-items: center; text-align: center; border: 1px solid #EEE; border-radius: .6em; padding: .5em .3em; min-width: 0; font-size: .75em; }
.st-prods i { width: 100%; aspect-ratio: 1.6; border-radius: .4em; background: #F5F5F7; display: grid; place-items: center; color: #2B2D33; font-style: normal; }
.st-prods span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-prods b { color: #FF7A00; }

/* Phone variants */
.pphone-l { left: 0; right: auto; bottom: -6%; }
.pvis.phone-left .laptop { margin: 0 0 0 auto; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.pd-grid span { display: grid; justify-items: center; gap: .3em; padding: .7em .3em; border-radius: .7em; background: #FFF6EE; font-weight: 700; font-size: .82em; text-align: center; }
.pd-grid i { color: var(--orange); font-style: normal; }
.pd-grid .i { width: 1.6em; height: 1.6em; }
.pd-user { display: flex; gap: .5em; align-items: center; background: #F6F6F8; border-radius: .7em; padding: .5em; }
.pd-user i { width: 2.4em; height: 2.4em; border-radius: 50%; background: #FFD6AE; flex: none; }
.pd-user b { display: block; font-size: .9em; }
.pd-user small { color: #8B8E96; font-size: .75em; }
.pd-search { border: 1px solid #E3E4E8; border-radius: .6em; padding: .4em .6em; color: #999; font-size: .78em; }
.pd-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; text-align: center; font-size: .7em; }
.pd-cats span { display: grid; gap: .2em; justify-items: center; }
.pd-cats i { width: 2.2em; height: 2.2em; border-radius: .6em; background: #F5F5F7; display: grid; place-items: center; font-style: normal; color: #333; }
.pd-banner { border-radius: .8em; background: radial-gradient(120% 120% at 80% 30%, #3A2F6B, #12131A 70%); color: #fff; padding: .8em; font-weight: 800; font-size: 1em; line-height: 1.15; }
.pd-banner small { display: block; font-weight: 500; font-size: .7em; color: #D5D6DC; margin: .2em 0 .4em; }
.pd-banner span { display: inline-block; background: #FF7A00; border-radius: .4em; padding: .15em .5em; font-size: .65em; }
.pd-prods { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.pd-prods div { border: 1px solid #EEE; border-radius: .6em; padding: .4em; display: grid; gap: .2em; font-size: .72em; }
.pd-prods i { aspect-ratio: 1.3; border-radius: .4em; background: #F5F5F7; display: grid; place-items: center; font-style: normal; color: #333; }
.pd-prods b { color: #FF7A00; }
/* pages 13–17 fixes */
.pwho-tiles { align-items: start; }
.pwt { align-content: start; min-width: 0; }
.pwt span { width: 100%; }
.pfw { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr); }
@media (max-width: 1000px) { .pfw { grid-template-columns: 1fr; } }
.pfw .pfeat > div { grid-template-columns: 34px 1fr; gap: 8px; padding: 12px 10px; }
.pfw .pfeat i { width: 34px; height: 34px; }
.pfw .pfeat i .i { width: 18px; height: 18px; }
.st-main { grid-template-rows: auto auto auto auto; align-content: start; }
.st-prods { align-items: start; }
.st-prods i { aspect-ratio: 2.2; }