/* ████████████████████████████████████████████████████████████████████
   SHOPIFY vs SHOPIFY PLUS — "versus / split" page, no page wrapper
   xph hero · xpg glance · xpl plans · xpf plus-features · xpr pricing · xpa advanced-vs-plus
   xpd which-fits · xpc case studies · xps scripts · xpq faq · xpz cta
   ████████████████████████████████████████████████████████████████████ */
:root{
  --xp-brand:#fa294f;--xp-brand2:#ff3d63;--xp-ink:#0d0b14;--xp-black:#050608;--xp-ground:#f4f2ee;--xp-paper:#fbfafb;
  --xp-mute:#5c5866;--xp-soft:#8a8694;--xp-line:rgba(13,11,20,.09);--xp-green:#00a876;--xp-ease:cubic-bezier(.16,1,.3,1);
  --xp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ═══ 01 · HERO (xph) ═══ */
.xph{position:relative;overflow:hidden;padding:96px 0 72px;background:var(--xp-paper);color:var(--xp-ink)}
@media(min-width:1024px){.xph{padding:112px 0 96px}}
.xph svg{width:1em;height:1em;flex-shrink:0}
.xph-sprite{position:absolute;width:0!important;height:0!important;overflow:hidden}
.xph-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:300px}
@media(min-width:1024px){.xph-stage{min-height:380px}}
.xph-side{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:56px 20px 32px}
@media(min-width:768px){.xph-side{padding:72px 48px 44px}}
.xph-std{background:var(--xp-ground);clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:16%}
.xph-plus{background:var(--xp-black);color:#fff;margin-left:-12%;clip-path:polygon(12% 0,100% 0,100% 100%,0 100%);padding-left:calc(12% + 24px);text-align:right;align-items:flex-end}
@media(min-width:768px){.xph-plus{padding-left:calc(14% + 48px)}}
.xph-plus::before{content:'';position:absolute;inset:0;background:radial-gradient(500px 300px at 80% 20%,rgba(250,41,79,.3),transparent 60%);pointer-events:none}
.xph-side>*{position:relative}
.xph-side-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--xp-mute)}
.xph-plus .xph-side-k{color:#ff8fa3}
.xph-side-n{font-size:clamp(20px,3.6vw,46px);font-weight:700;line-height:1;letter-spacing:-.04em}
.xph-plus .xph-side-n{font-size:clamp(44px,8vw,110px);color:var(--xp-brand)}
.xph-side-p{font-size:clamp(13px,1.6vw,17px);font-weight:600;color:var(--xp-mute)}
.xph-side-p strong{color:var(--xp-ink);font-size:1.25em}
.xph-plus .xph-side-p{color:rgba(255,255,255,.6)}
.xph-plus .xph-side-p strong{color:#fff}
.xph-side-s{font-size:12.5px;color:var(--xp-soft)}
.xph-plus .xph-side-s{color:rgba(255,255,255,.45)}
@media(max-width:600px){.xph-side-s{display:none}}
.xph-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);width:clamp(64px,9vw,108px);height:clamp(64px,9vw,108px);border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--xp-brand);color:#fff;font-size:clamp(20px,3vw,36px);font-weight:700;letter-spacing:-.04em;box-shadow:0 0 0 8px var(--xp-paper),0 20px 40px -10px rgba(250,41,79,.7);animation:xph-vs 3s ease-in-out infinite}
@keyframes xph-vs{50%{transform:translate(-50%,-50%) rotate(8deg) scale(1.05)}}
@media(prefers-reduced-motion:reduce){.xph-vs{animation:none}}
.xph-wrap{max-width:1320px;margin:0 auto;padding:40px 20px 0}
@media(min-width:768px){.xph-wrap{padding:56px 32px 0}}
.xph-h1{margin:0 0 24px;font-weight:700;font-size:clamp(40px,6.4vw,84px);line-height:1;letter-spacing:-.055em}
.xph-h1 span{display:inline-block;padding:0 .12em;color:var(--xp-brand);font-style:italic}
.xph-copy{display:grid;gap:18px}
@media(min-width:1024px){.xph-copy{grid-template-columns:1.1fr 1fr;gap:48px}}
.xph-lead{margin:0;font-size:18px;line-height:1.7;color:var(--xp-ink);font-weight:500}
.xph-p{margin:0;font-size:15.5px;line-height:1.8;color:var(--xp-mute)}
.xph-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.xph-jump a{padding:9px 14px;border-radius:999px;border:1.5px solid var(--xp-line);font-size:13.5px;font-weight:700;transition:all .2s}
.xph-jump a:hover{background:var(--xp-ink);border-color:var(--xp-ink);color:#fff}

/* ═══ 02 · GLANCE (xpg) ═══ */
.xpg{background:var(--xp-ground);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpg{padding:120px 0}}
.xpg-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpg-wrap{padding:0 32px}}
.xpg-head{display:grid;gap:16px;margin-bottom:32px}
@media(min-width:1024px){.xpg-head{grid-template-columns:1fr 1fr;gap:56px;align-items:end}}
.xpg-h2{margin:0;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpg-p{margin:0;font-size:16px;line-height:1.75;color:var(--xp-mute)}
.xpg-table{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--xp-line)}
.xpg-tr{display:grid;grid-template-columns:1fr;border-top:1px solid var(--xp-line)}
@media(min-width:800px){.xpg-tr{grid-template-columns:220px 1fr 1fr}}
.xpg-th{display:none}
@media(min-width:800px){.xpg-th{display:grid;border-top:0}}
.xpg-th span{padding:18px 20px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.xpg-th small{display:block;margin-top:2px;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--xp-soft)}
.xpg-th .xpg-plus{background:var(--xp-ink);color:#fff}
.xpg-f{padding:14px 20px 6px;font-size:13.5px;font-weight:800}
@media(min-width:800px){.xpg-f{padding:16px 20px;display:flex;align-items:center}}
.xpg-s,.xpg-p2{padding:6px 20px 12px;font-size:14px;line-height:1.55}
@media(min-width:800px){.xpg-s,.xpg-p2{padding:16px 20px}}
.xpg-s{color:var(--xp-mute)}
.xpg-p2{font-weight:700}
.xpg-tr .xpg-plus{background:var(--xp-ink);color:#fff}
.xpg-tr em{display:inline-block;margin-right:8px;padding:2px 7px;border-radius:5px;background:var(--xp-ground);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--xp-mute)}
.xpg-tr .xpg-plus em{background:var(--xp-brand);color:#fff}
@media(min-width:800px){.xpg-tr em{display:none}}
.xpg-tr:not(.xpg-th):hover .xpg-f{color:var(--xp-brand)}
.xpg-note{margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--xp-soft)}

/* ═══ 03 · PLANS (xpl) ═══ */
.xpl{background:var(--xp-paper);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpl{padding:120px 0}}
.xpl-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpl-wrap{padding:0 32px}}
.xpl-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}
.xpl-head>div{max-width:720px}
.xpl-h2{margin:0 0 14px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpl-p{margin:0;font-size:16px;line-height:1.75;color:var(--xp-mute)}
.xpl-bill{display:inline-flex;padding:4px;border-radius:999px;background:var(--xp-ground)}
.xpl-b{padding:10px 16px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:13.5px;font-weight:700;color:var(--xp-mute);cursor:pointer;transition:all .25s}
.xpl-b-on{background:var(--xp-ink);color:#fff}
.xpl-h3{margin:0 0 20px;font-weight:700;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em}
.xpl-tags{display:grid;gap:22px;margin-bottom:22px;padding-top:18px}
@media(min-width:960px){.xpl-tags{grid-template-columns:repeat(3,1fr)}}
.xpl-tag{position:relative;padding:40px 24px 24px;border-radius:10px 10px 24px 24px;background:#fff;border:1.5px solid var(--xp-ink);transform-origin:50% -18px;transition:transform .5s var(--xp-ease)}
.xpl-tag::before{content:'';position:absolute;left:50%;top:-20px;width:2px;height:26px;background:var(--xp-soft)}
.xpl-hole{position:absolute;left:50%;top:12px;width:14px;height:14px;margin-left:-7px;border-radius:50%;border:2px solid var(--xp-ink);background:var(--xp-paper)}
.xpl-tag-1{transform:rotate(-1.5deg)}.xpl-tag-2{transform:rotate(1deg)}.xpl-tag-3{transform:rotate(-.6deg);background:var(--xp-ink);color:#fff}
.xpl-tag:hover{transform:rotate(0)}
.xpl-tag-3 .xpl-hole{border-color:#fff;background:var(--xp-paper)}
.xpl-name{margin:0;font-size:22px;font-weight:700;letter-spacing:-.03em;text-align:center}
.xpl-price{position:relative;margin:10px 0 16px;text-align:center;font-size:14px;color:var(--xp-mute);min-height:64px}
.xpl-tag-3 .xpl-price{color:rgba(255,255,255,.6)}
.xpl-price b{font-size:40px;font-weight:700;letter-spacing:-.04em;color:var(--xp-ink)}
.xpl-tag-3 .xpl-price b{color:#fff}
.xpl-price small{display:block;font-size:11.5px;font-weight:700;color:var(--xp-brand)}
.xpl-y,.xpl-m{display:block;transition:opacity .3s}
.xpl-m{position:absolute;inset:0;opacity:0}
.xpl-tags[data-xpl-mode="monthly"] .xpl-y{opacity:0}
.xpl-tags[data-xpl-mode="monthly"] .xpl-m{opacity:1}
.xpl-spec{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 16px}
.xpl-spec div{padding:10px;border-radius:10px;background:var(--xp-ground);text-align:center}
.xpl-tag-3 .xpl-spec div{background:rgba(255,255,255,.08)}
.xpl-spec dt{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--xp-soft)}
.xpl-spec dd{margin:2px 0 0;font-size:15px;font-weight:800}
.xpl-text{margin:0;font-size:14px;line-height:1.72;color:var(--xp-mute)}
.xpl-tag-3 .xpl-text{color:rgba(255,255,255,.66)}
.xpl-all{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:28px;padding:16px 20px;border-radius:18px;border:1.5px dashed rgba(13,11,20,.2)}
.xpl-all-k{margin:0;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--xp-brand)}
.xpl-all ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.xpl-all li{padding:6px 11px;border-radius:999px;background:var(--xp-ground);font-size:12.5px;font-weight:700}
.xpl-who{max-width:900px}
.xpl-who p{margin:0 0 12px;font-size:15px;line-height:1.8;color:var(--xp-mute)}
.xpl-who a{color:var(--xp-brand);font-weight:700}

/* ═══ 04 · PLUS FEATURES (xpf) ═══ */
.xpf{background:var(--xp-black);color:#fff;padding:88px 0}
@media(min-width:768px){.xpf{padding:120px 0}}
.xpf svg{width:1em;height:1em;flex-shrink:0}
.xpf-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpf-wrap{padding:0 32px}}
.xpf-head{max-width:860px;margin-bottom:36px}
.xpf-h2{margin:0 0 14px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpf-p{margin:0;font-size:16px;line-height:1.75;color:rgba(255,255,255,.62)}
.xpf-rail{display:grid;gap:10px}
.xpf-panel{border-radius:22px;background:#0f0e15;border:1px solid rgba(255,255,255,.09);overflow:hidden;min-width:0}
.xpf-spine{display:flex;align-items:center;gap:12px;width:100%;padding:18px 20px;border:0;background:transparent;color:#fff;font:inherit;cursor:pointer;text-align:left}
.xpf-spine-n{font-family:var(--xp-mono);font-size:12px;color:rgba(255,255,255,.4)}
.xpf-spine-i{width:20px!important;height:20px!important;color:var(--xp-brand)}
.xpf-spine-t{font-size:15px;font-weight:800}
.xpf-body{padding:0 22px 24px}
.xpf-rail:not(.xpf-js) .xpf-spine{cursor:default}
.xpf-rail.xpf-js .xpf-panel:not(.xpf-panel-on) .xpf-body{display:none}
.xpf-panel-on{border-color:rgba(250,41,79,.4);background:#13111a}
@media(min-width:1100px){
  .xpf-rail.xpf-js{display:flex;gap:8px;height:640px}
  .xpf-rail.xpf-js .xpf-panel{flex:0 0 76px;display:flex;transition:flex .6s var(--xp-ease),background .3s}
  .xpf-rail.xpf-js .xpf-panel-on{flex:1 1 0;min-width:0}
  .xpf-rail.xpf-js .xpf-spine{flex:0 0 76px;flex-direction:column;justify-content:flex-start;padding:22px 0;gap:14px}
  .xpf-rail.xpf-js .xpf-spine-t{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.04em}
  .xpf-rail.xpf-js .xpf-panel-on .xpf-spine{border-right:1px solid rgba(255,255,255,.08)}
  .xpf-rail.xpf-js .xpf-panel:not(.xpf-panel-on):hover{background:#17151f}
  .xpf-rail.xpf-js .xpf-body{display:block;flex:1;min-width:0;padding:28px 32px;overflow-y:auto;scrollbar-width:thin}
  .xpf-rail.xpf-js .xpf-panel:not(.xpf-panel-on) .xpf-body{display:none}
}
@keyframes xpf-in{from{opacity:0;transform:translateX(12px)}}
.xpf-h3{margin:0 0 16px;font-weight:700;font-size:clamp(20px,2.3vw,28px);letter-spacing:-.03em;line-height:1.2}
.xpf-delta{display:grid;gap:8px;margin-bottom:18px}
@media(min-width:600px){.xpf-delta{grid-template-columns:1fr 1fr}}
.xpf-lock,.xpf-unlock{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:700}
.xpf-lock{background:rgba(255,255,255,.05);color:rgba(255,255,255,.6)}
.xpf-unlock{background:rgba(250,41,79,.14);color:#fff;border:1px solid rgba(250,41,79,.4)}
.xpf-unlock svg{color:var(--xp-brand2)}
.xpf-lock em,.xpf-unlock em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.xpf-text{margin:0 0 12px;font-size:14.5px;line-height:1.78;color:rgba(255,255,255,.66)}
.xpf-text a{color:#ff8fa3;font-weight:700}

/* ═══ 05 · PRICING (xpr) ═══ */
.xpr{background:var(--xp-paper);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpr{padding:120px 0}}
.xpr-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpr-wrap{padding:0 32px}}
.xpr-head{max-width:820px;margin-bottom:36px}
.xpr-h2{margin:0 0 14px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpr-p{margin:0;font-size:16px;line-height:1.75;color:var(--xp-mute)}
.xpr-h3{margin:0 0 16px;font-weight:700;font-size:clamp(19px,2.1vw,24px);letter-spacing:-.03em}
.xpr-grid{display:grid;gap:16px;margin-bottom:16px;align-items:start}
@media(min-width:1100px){.xpr-grid{grid-template-columns:1.2fr 1fr}}
.xpr-grid>*{min-width:0}
.xpr-std,.xpr-plus{padding:26px;border-radius:26px}
@media(min-width:1024px){.xpr-std,.xpr-plus{padding:36px}}
.xpr-std{background:var(--xp-ground)}
.xpr-plus{background:var(--xp-ink);color:#fff}
.xpr-scroll{overflow-x:auto;margin-bottom:16px;border-radius:16px}
.xpr-table{width:100%;min-width:560px;border-collapse:collapse;background:#fff}
.xpr-table th,.xpr-table td{padding:12px 14px;font-size:13.5px;text-align:left;border-bottom:1px solid var(--xp-line)}
.xpr-table thead th{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--xp-soft);background:#fff}
.xpr-table tbody th{font-weight:800}
.xpr-table tr:last-child td,.xpr-table tr:last-child th{border-bottom:0}
.xpr-text{margin:0 0 14px;font-size:14.5px;line-height:1.78;color:var(--xp-mute)}
.xpr-plus .xpr-text{color:rgba(255,255,255,.66)}
.xpr-text a{color:var(--xp-brand);font-weight:700}
.xpr-india{margin:0;padding:16px;border-radius:16px;background:#fff;border-left:4px solid var(--xp-brand);font-size:14px;line-height:1.7;color:var(--xp-mute)}
.xpr-india b{color:var(--xp-ink)}
.xpr-sketch{margin:4px 0 18px;padding:16px;border-radius:16px;background:rgba(255,255,255,.05)}
.xpr-sketch svg{display:block;width:100%;height:auto}
.xpr-ax{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5}
.xpr-ln{fill:none;stroke:var(--xp-brand);stroke-width:3;stroke-linejoin:round}
.xpr-mark{stroke:rgba(255,255,255,.25);stroke-dasharray:3 3}
.xpr-sketch text{fill:rgba(255,255,255,.75);font-size:9.5px;font-weight:700;font-family:inherit}
.xpr-sketch figcaption{margin-top:8px;font-size:11px;color:rgba(255,255,255,.4)}
.xpr-warn{padding:14px;border-radius:14px;border:1px dashed rgba(251,211,141,.4);color:#fbd38d!important;font-size:13.5px!important}
.xpr-fees{display:grid;gap:16px}
@media(min-width:1024px){.xpr-fees{grid-template-columns:1fr 1fr;gap:40px;align-items:center}}
.xpr-fees>*{min-width:0}
.xpr-fee-bars{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.xpr-fee-bars li{display:grid;grid-template-columns:80px 1fr 50px;gap:12px;align-items:center;font-size:14px;font-weight:700}
.xpr-fee-bars i{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--xp-ink) var(--xpr-w),var(--xp-ground) var(--xpr-w))}
.xpr-fee-plus i{background:linear-gradient(90deg,var(--xp-brand) var(--xpr-w),var(--xp-ground) var(--xpr-w))}
.xpr-fee-plus b{color:var(--xp-brand)}
.xpr-fee-bars b{text-align:right;font-family:var(--xp-mono)}
.xpr-calc{padding:26px;border-radius:26px;background:var(--xp-ground);border:1.5px solid var(--xp-ink)}
.xpr-calc-k{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--xp-brand)}
.xpr-calc-l{display:block;font-size:13px;font-weight:700;color:var(--xp-mute)}
.xpr-calc-rev{display:block;margin:4px 0 10px;font-size:clamp(30px,3.6vw,42px);font-weight:700;letter-spacing:-.04em}
.xpr-range{width:100%;accent-color:var(--xp-brand);margin:0 0 18px}
.xpr-calc-out{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}
.xpr-calc-out div{padding:12px;border-radius:12px;background:#fff}
.xpr-calc-out dt{font-size:11.5px;line-height:1.35;color:var(--xp-soft)}
.xpr-calc-out dd{margin:4px 0 0;font-size:19px;font-weight:800;font-family:var(--xp-mono)}
.xpr-calc-save{background:var(--xp-ink)!important}
.xpr-calc-save dt{color:rgba(255,255,255,.6)}
.xpr-calc-save dd{color:#4ade80}
.xpr-calc-n{margin:0;font-size:12px;line-height:1.55;color:var(--xp-soft)}

/* ═══ 06 · ADVANCED vs PLUS (xpa) ═══ */
.xpa{background:var(--xp-ground);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpa{padding:120px 0}}
.xpa-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpa-wrap{padding:0 32px}}
.xpa-head{max-width:900px;margin-bottom:36px}
.xpa-h2{margin:0 0 14px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpa-p{margin:0;font-size:16px;line-height:1.75;color:var(--xp-mute)}
.xpa-grid{display:grid;gap:14px;align-items:stretch}
@media(min-width:1024px){.xpa-grid{grid-template-columns:1fr 180px 1.2fr;gap:0}}
.xpa-grid>*{min-width:0}
.xpa-col{padding:26px;border-radius:24px}
@media(min-width:1024px){.xpa-col{padding:36px}}
.xpa-adv{background:#fff;border:1px solid var(--xp-line)}
.xpa-plus{background:var(--xp-ink);color:#fff}
.xpa-k{margin:0 0 8px;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--xp-soft)}
.xpa-plus .xpa-k{color:#ff8fa3}
.xpa-price{display:block;margin-bottom:18px;font-size:clamp(30px,3.6vw,42px);font-weight:700;letter-spacing:-.04em}
.xpa-price small{font-size:14px;font-weight:600;letter-spacing:0;color:var(--xp-soft);margin-left:4px}
.xpa-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.xpa-col li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.5}
.xpa-col li::before{content:'';position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--xp-soft)}
.xpa-plus li::before{background:var(--xp-brand)}
@media(min-width:760px){.xpa-plus ul{grid-template-columns:1fr 1fr}}
.xpa-gap{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:20px;position:relative}
@media(min-width:1024px){.xpa-gap{flex-direction:column-reverse;align-items:center;justify-content:center;padding:0 20px}}
.xpa-gap-bar{display:block;width:30px;border-radius:6px 6px 0 0}
.xpa-gap-a{height:14px;background:var(--xp-soft)}
.xpa-gap-p{height:108px;background:var(--xp-brand)}
@media(min-width:1024px){.xpa-gap{display:grid;grid-template-columns:30px 30px;align-content:center;align-items:end;column-gap:10px;row-gap:8px}.xpa-gap-bar{grid-row:1}.xpa-gap b{grid-row:2}.xpa-gap-l{grid-row:3}.xpa-gap b,.xpa-gap-l{grid-column:1/-1;text-align:center}}
.xpa-gap b{font-size:34px;font-weight:700;letter-spacing:-.04em;color:var(--xp-brand)}
.xpa-gap-l{font-size:12px;font-weight:700;color:var(--xp-mute)}
.xpa-verdict{margin:20px 0 0;padding:20px 24px;border-radius:20px;background:#fff;font-size:15.5px;line-height:1.75;font-weight:600;border-left:5px solid var(--xp-brand)}

/* ═══ 07 · WHICH FITS (xpd) ═══ */
.xpd{background:var(--xp-paper);color:var(--xp-ink);padding:64px 0 88px}
@media(min-width:768px){.xpd{padding:80px 0 120px}}
.xpd svg{width:1em;height:1em;flex-shrink:0}
.xpd-fork{max-width:640px;margin:0 auto 6px;padding:0 20px;display:none}
@media(min-width:1024px){.xpd-fork{display:block}}
.xpd-fork svg{width:100%!important;height:90px!important}
.xpd-fork path{fill:none;stroke:var(--xp-ink);stroke-width:3;stroke-dasharray:8 8;vector-effect:non-scaling-stroke}
.xpd-wrap{max-width:1320px;margin:0 auto;padding:0 20px;display:grid;gap:16px}
@media(min-width:768px){.xpd-wrap{padding:0 32px}}
@media(min-width:1024px){.xpd-wrap{grid-template-columns:1fr 1.2fr;align-items:start}}
.xpd-wrap>*{min-width:0}
.xpd-std,.xpd-plus{padding:28px;border-radius:28px;scroll-margin-top:100px}
@media(min-width:1024px){.xpd-std,.xpd-plus{padding:40px}}
.xpd-std{background:#eaf6f1;border:1.5px solid rgba(0,168,118,.3)}
.xpd-plus{background:var(--xp-ink);color:#fff}
.xpd-road{display:inline-block;margin-bottom:14px;padding:5px 12px;border-radius:999px;background:var(--xp-green);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.xpd-plus .xpd-road{background:var(--xp-brand)}
.xpd-h2{margin:0 0 14px;font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.08;letter-spacing:-.04em}
.xpd-h3{margin:20px 0 12px;font-weight:700;font-size:19px;letter-spacing:-.02em}
.xpd-p{margin:0 0 16px;font-size:15px;line-height:1.78;color:var(--xp-mute)}
.xpd-plus .xpd-p{color:rgba(255,255,255,.65)}
.xpd-p a{color:#007653;font-weight:700}
.xpd-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.xpd-list li{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:#fff;font-size:14.5px;line-height:1.55}
.xpd-list svg{flex-shrink:0;margin-top:3px;color:var(--xp-green)}
.xpd-signs{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.xpd-signs li{display:flex;gap:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.xpd-n{flex-shrink:0;width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--xp-brand);font-size:13px;font-weight:800}
.xpd-signs b{display:block;margin-bottom:4px;font-size:15px}
.xpd-signs p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.62)}
.xpd-rule{display:flex;gap:14px;align-items:center;margin:0;padding:16px;border-radius:16px;background:#fff;color:var(--xp-ink);font-size:14.5px;line-height:1.6}
.xpd-rule b{flex-shrink:0;font-size:34px;font-weight:800;letter-spacing:-.04em;color:var(--xp-brand)}
.xpd-rule a{color:var(--xp-brand);font-weight:700}

/* ═══ 08 · CASE STUDIES (xpc) ═══ */
.xpc{background:var(--xp-ground);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpc{padding:120px 0}}
.xpc-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpc-wrap{padding:0 32px}}
.xpc-head{max-width:820px;margin-bottom:40px}
.xpc-h2{margin:0 0 14px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpc-p{margin:0;font-size:16px;line-height:1.75;color:var(--xp-mute)}
.xpc-grid{display:grid;gap:16px}
@media(min-width:1100px){.xpc-grid{grid-template-columns:1fr 1fr}}
.xpc-case{min-width:0;padding:26px;border-radius:28px;background:#fff;border:1px solid var(--xp-line)}
@media(min-width:1024px){.xpc-case{padding:34px}}
.xpc-metro{background:var(--xp-ink);color:#fff;border-color:var(--xp-ink)}
.xpc-device{position:relative;margin:0 auto 26px;background:#fff;overflow:hidden}
.xpc-phone{width:170px;height:250px;padding:30px 12px 12px;border-radius:30px;border:6px solid var(--xp-ink);background:#f8f2ee;display:flex;flex-direction:column;gap:8px}
.xpc-notch{position:absolute;top:6px;left:50%;width:50px;height:10px;margin-left:-25px;border-radius:6px;background:var(--xp-ink)}
.xpc-ui-hero{display:block;height:80px;border-radius:12px;background:linear-gradient(135deg,#f5c9d4,#efd9c8)}
.xpc-ui-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.xpc-ui-row i{height:34px;border-radius:8px;background:#fff}
.xpc-ui-btn{margin-top:auto;padding:8px;border-radius:999px;background:var(--xp-ink);color:#fff;font-size:10px;font-weight:700;text-align:center}
.xpc-browser{width:100%;max-width:380px;height:250px;border-radius:14px;background:#1d1b24;border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:8px;padding:0 0 12px}
.xpc-bar{display:flex;align-items:center;gap:5px;padding:9px 12px;background:#26232f}
.xpc-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25)}
.xpc-bar em{margin-left:8px;padding:3px 10px;border-radius:6px;background:rgba(255,255,255,.08);font-style:normal;font-family:var(--xp-mono);font-size:9.5px;color:rgba(255,255,255,.6)}
.xpc-ui-mega{display:block;height:18px;margin:0 12px;border-radius:5px;background:rgba(255,255,255,.08)}
.xpc-ui-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px;flex:1}
.xpc-ui-grid i{border-radius:8px;background:linear-gradient(160deg,#5b4636,#2d241d)}
.xpc-ui-grid i:nth-child(2){background:linear-gradient(160deg,#c8b9a6,#8c7a65)}
.xpc-ui-grid i:nth-child(3){background:linear-gradient(160deg,#e5e1da,#a59d92)}
.xpc-ui-check{margin:0 12px;padding:8px 10px;border-radius:8px;background:var(--xp-brand);color:#fff;font-size:11px;font-weight:700}
.xpc-ui-check b{float:right}
.xpc-badge{position:absolute;right:10px;top:42px;padding:3px 9px;border-radius:999px;background:var(--xp-green);color:#fff;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.xpc-badge-plus{top:44px;background:var(--xp-brand)}
.xpc-h3{margin:0 0 16px;font-weight:700;font-size:clamp(20px,2.2vw,25px);letter-spacing:-.03em}
.xpc-spec{margin:0 0 16px;display:grid}
.xpc-spec div{display:grid;gap:2px 16px;padding:10px 0;border-top:1px solid var(--xp-line)}
@media(min-width:560px){.xpc-spec div{grid-template-columns:140px 1fr}}
.xpc-metro .xpc-spec div{border-top-color:rgba(255,255,255,.1)}
.xpc-spec dt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--xp-soft)}
.xpc-spec dd{margin:0;font-size:14px;line-height:1.55}
.xpc-why dd{font-weight:700;color:#007653}
.xpc-metro .xpc-why dd{color:#ff8fa3}
.xpc-text{margin:0;font-size:14.5px;line-height:1.78;color:var(--xp-mute)}
.xpc-metro .xpc-text{color:rgba(255,255,255,.65)}
.xpc-bridge{margin:24px 0 0;font-size:15px;line-height:1.75;color:var(--xp-mute)}
.xpc-bridge a{color:var(--xp-brand);font-weight:700}

/* ═══ 09 · SCRIPTS SUNSET (xps) ═══ */
.xps{background:var(--xp-black);color:#fff;padding:88px 0}
@media(min-width:768px){.xps{padding:112px 0}}
.xps-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xps-wrap{padding:0 32px}}
.xps-h2{max-width:780px;margin:0 0 36px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xps-line{list-style:none;margin:0 0 36px;padding:0;display:grid;gap:18px;position:relative}
@media(min-width:800px){.xps-line{grid-template-columns:repeat(3,1fr);gap:0}.xps-line::before{content:'';position:absolute;left:0;right:0;top:9px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.2),var(--xp-brand) 50%,#4ade80)}}
.xps-line li{position:relative;display:flex;flex-direction:column;gap:4px;padding-left:30px}
@media(min-width:800px){.xps-line li{padding:34px 20px 0 0}}
.xps-dot{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--xp-black);border:3px solid rgba(255,255,255,.4)}
.xps-cut .xps-dot{border-color:var(--xp-brand);box-shadow:0 0 0 6px rgba(250,41,79,.2)}
.xps-new .xps-dot{border-color:#4ade80}
.xps-line b{font-size:20px;font-weight:800;letter-spacing:-.02em}
.xps-cut b{color:var(--xp-brand2)}
.xps-new b{color:#4ade80}
.xps-old span{text-decoration:line-through;text-decoration-color:var(--xp-brand)}
.xps-line span{font-size:14px;color:rgba(255,255,255,.65)}
.xps-cols{columns:1;column-gap:40px}
@media(min-width:900px){.xps-cols{columns:2}}
.xps-cols p{break-inside:avoid;margin:0 0 16px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.66)}
.xps-cols a{color:#ff8fa3;font-weight:700}
.xps-who{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.xps-who div{padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.xps-who span{display:block;font-size:12.5px;color:rgba(255,255,255,.55)}
.xps-who b{font-size:20px;font-weight:800}
.xps-who div:last-child b{color:var(--xp-brand2)}

/* ═══ 10 · FAQ (xpq) ═══ */
.xpq{background:var(--xp-paper);color:var(--xp-ink);padding:88px 0}
@media(min-width:768px){.xpq{padding:120px 0}}
.xpq-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpq-wrap{padding:0 32px}}
.xpq-h2{margin:0 0 36px;font-weight:700;font-size:clamp(28px,4vw,48px);line-height:1.08;letter-spacing:-.04em}
.xpq-flow{columns:1;column-gap:14px}
@media(min-width:760px){.xpq-flow{columns:2}}
@media(min-width:1180px){.xpq-flow{columns:3}}
.xpq-card{break-inside:avoid;display:inline-block;width:100%;margin:0 0 14px;padding:24px;border-radius:22px;background:var(--xp-ground)}
.xpq-card-dark{background:var(--xp-ink);color:#fff}
.xpq-n{display:inline-block;margin-bottom:10px;padding:3px 9px;border-radius:6px;background:var(--xp-brand);color:#fff;font-family:var(--xp-mono);font-size:11px;font-weight:700}
.xpq-q{margin:0 0 10px;font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.02em}
.xpq-a{margin:0;font-size:14px;line-height:1.75;color:var(--xp-mute)}
.xpq-card-dark .xpq-a{color:rgba(255,255,255,.66)}
.xpq-a a{color:var(--xp-brand);font-weight:700}
.xpq-card-dark .xpq-a a{color:#ff8fa3}

/* ═══ 11 · CTA (xpz) ═══ */
.xpz{background:var(--xp-paper);padding:0 0 104px}
.xpz svg{width:1em;height:1em;flex-shrink:0}
.xpz-wrap{max-width:1320px;margin:0 auto;padding:0 20px}
@media(min-width:768px){.xpz-wrap{padding:0 32px}}
.xpz-card{position:relative;overflow:hidden;padding:48px 24px;border-radius:32px;text-align:center;background:linear-gradient(100deg,var(--xp-ground) 0 50%,var(--xp-ink) 50% 100%)}
@media(min-width:768px){.xpz-card{padding:72px 48px}}
.xpz-halves{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center;padding:0 24px;pointer-events:none}
.xpz-halves span{font-size:clamp(40px,9vw,120px);font-weight:800;letter-spacing:-.06em;opacity:.07}
.xpz-halves span:last-child{color:#fff}
.xpz-h2,.xpz-p,.xpz-ctas{position:relative}
.xpz-h2{display:inline-block;margin:0 0 16px;padding:10px 18px;border-radius:16px;background:#fff;font-weight:700;font-size:clamp(24px,3.4vw,42px);line-height:1.12;letter-spacing:-.04em;color:var(--xp-ink);box-shadow:0 20px 40px -24px rgba(13,11,20,.4)}
.xpz-p{max-width:620px;margin:0 auto 24px;padding:14px 18px;border-radius:14px;background:rgba(255,255,255,.92);font-size:15.5px;line-height:1.7;color:var(--xp-mute)}
.xpz-p a{color:var(--xp-brand);font-weight:700}
.xpz-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.xpz-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:var(--xp-brand);color:#fff;font-size:15px;font-weight:700;transition:transform .3s var(--xp-ease)}
.xpz-btn:hover{transform:translateY(-2px)}
.xpz-btn-ghost{background:#fff;color:var(--xp-ink)}
/* ═══ 01 · HERO (xpx) — growth staircase ═══
   Purane "01 · HERO (xph)" block ko is poore block se replace kar de. */
.xph-sprite{position:absolute;width:0!important;height:0!important;overflow:hidden}
.xpx{position:relative;overflow:hidden;padding:120px 0 72px;background:var(--xp-paper);color:var(--xp-ink)}
@media(min-width:1024px){.xpx{padding:148px 0 96px}}
.xpx svg{width:1em;height:1em;flex-shrink:0}
.xpx-wrap{max-width:1320px;margin:0 auto;padding:0 20px;display:grid;gap:44px;align-items:center}
@media(min-width:768px){.xpx-wrap{padding:0 32px}}
@media(min-width:1080px){.xpx-wrap{grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px}}

/* ─── copy ─── */
.xpx-h1{margin:0 0 24px;font-weight:700;font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:-.055em}
.xpx-vs{display:inline-block;padding:0 .08em;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--xp-soft)}
.xpx-plusword{position:relative;display:inline-block;white-space:nowrap;color:var(--xp-brand)}
.xpx-plusword::after{content:'';position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:99px;background:var(--xp-brand);opacity:.18}
.xpx-lead{margin:0 0 16px;font-size:18px;line-height:1.7;font-weight:500;color:var(--xp-ink)}
.xpx-p{margin:0;font-size:15.5px;line-height:1.8;color:var(--xp-mute)}
.xpx-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.xpx-jump a{padding:9px 14px;border-radius:999px;border:1.5px solid var(--xp-line);font-size:13.5px;font-weight:700;color:var(--xp-ink);text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.xpx-jump a:hover{background:var(--xp-ink);border-color:var(--xp-ink);color:#fff}

/* ─── stage (dark card) ─── */
.xpx-stage{position:relative;padding:22px;border-radius:28px;background:var(--xp-ink);color:#fff;box-shadow:0 50px 90px -60px rgba(13,11,20,.8)}
@media(min-width:768px){.xpx-stage{padding:28px}}
.xpx-stage::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 50% at 88% 0%,rgba(250,41,79,.28),transparent 70%)}
.xpx-stage>*{position:relative}

/* plot */
.xpx-plot{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;height:280px;padding-top:8px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 56px)}
@media(max-width:520px){.xpx-plot{height:220px;gap:8px}}
.xpx-col{display:flex;flex-direction:column;align-items:stretch;gap:10px;height:100%;justify-content:flex-end}
.xpx-col b{font-size:12.5px;font-weight:700;text-align:center;color:rgba(255,255,255,.6)}
.xpx-bar{position:relative;display:flex;align-items:flex-start;justify-content:center;border-radius:10px 10px 4px 4px;transform-origin:bottom;animation:xpx-rise .9s var(--xp-ease) both}
.xpx-col--1 .xpx-bar{height:24%;background:rgba(255,255,255,.14);animation-delay:.1s}
.xpx-col--2 .xpx-bar{height:38%;background:rgba(255,255,255,.22);animation-delay:.2s}
.xpx-col--3 .xpx-bar{height:52%;background:rgba(255,255,255,.32);animation-delay:.3s}
.xpx-col--plus .xpx-bar{height:calc(100% - 30px);background:linear-gradient(180deg,var(--xp-brand2),var(--xp-brand));box-shadow:0 0 0 1px rgba(255,255,255,.08),0 20px 50px -14px rgba(250,41,79,.75);animation-delay:.55s}
.xpx-col--plus b{color:#fff}
.xpx-bar__ico{width:20px!important;height:20px!important;margin-top:12px;color:#fff}

/* ceiling the standard bars stop under */
.xpx-ceil{position:absolute;left:0;right:calc(25% - 2px);bottom:calc((100% - 30px) * .58 + 30px);z-index:1;height:0;border-top:2px dashed rgba(255,255,255,.4);pointer-events:none}
.xpx-ceil em{position:absolute;left:0;bottom:6px;font-family:var(--xp-mono);font-size:11px;font-style:normal;letter-spacing:.02em;color:rgba(255,255,255,.55)}
/* Plus breaks through: the dashed line stops at the Plus bar, with two small shards */
.xpx-ceil::before,.xpx-ceil::after{content:'';position:absolute;right:-4px;width:9px;height:2px;border-radius:2px;background:rgba(255,255,255,.7)}
.xpx-ceil::before{top:-9px;transform:rotate(-35deg)}
.xpx-ceil::after{top:5px;transform:rotate(35deg)}

/* legend */
.xpx-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.xpx-legend>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.xpx-legend__plus{background:rgba(250,41,79,.14)!important;border-color:rgba(250,41,79,.45)!important}
.xpx-k{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.xpx-legend__plus .xpx-k{color:#ff8fa3}
.xpx-legend b{font-size:clamp(15px,1.6vw,18px);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.xpx-legend__plus b{font-size:clamp(22px,2.4vw,28px);color:#fff}
.xpx-price{font-size:13px;color:rgba(255,255,255,.6)}
.xpx-price strong{font-size:1.2em;color:#fff}
.xpx-s{font-size:12px;line-height:1.45;color:rgba(255,255,255,.45)}

/* unlocks */
.xpx-unlocks{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0}
.xpx-unlocks li{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.06);font-size:12px;font-weight:600;color:rgba(255,255,255,.8)}
.xpx-unlocks svg{width:14px!important;height:14px!important;color:var(--xp-brand2)}

@keyframes xpx-rise{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.xpx-bar{animation:none}}