.thelis-product {
--thelis-ff-display: 'Syne', sans-serif;
--thelis-ff-mono:    'JetBrains Mono', monospace;
--thelis-ff-title:   'Cormorant Garamond', Georgia, serif;
--thelis-red:        #E8294A;
--thelis-red-dark:   #c91e38;
--thelis-red-glow:   rgba(232, 41, 74, 0.28);
--thelis-red-dim:    rgba(232, 41, 74, 0.06);
--thelis-black:      #111118;
--thelis-white:      #ffffff;
--thelis-light:      #f7f5f1;
--thelis-gray:       rgba(17, 17, 24, 0.50);
--thelis-border:     rgba(17, 17, 24, 0.08);
--thelis-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
--thelis-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
overflow-x: hidden;
max-width: none !important;
padding: 0 !important;
margin-top: 0 !important;
font-family: var(--thelis-ff-display);
} #primary.thelis-product .zp-hero,
#primary.thelis-product .zp-specs,
#primary.thelis-product .zp-why,
#primary.thelis-product .zp-cta,
#primary .zp-hero,
#primary .zp-specs,
#primary .zp-why,
#primary .zp-cta {
background: #111118 !important;
}
#primary.thelis-product .zp-intro,
#primary.thelis-product .zp-run,
#primary.thelis-product .zp-deploy,
#primary .zp-intro,
#primary .zp-run,
#primary .zp-deploy {
background: #f7f5f1 !important;
} @keyframes zpBlurUp {
from { opacity: 0; transform: translateY(48px); filter: blur(14px); }
to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}
@keyframes zpDotDrift {
0%, 100% { background-position: 0 0;     }
50%      { background-position: 10px -8px; }
}
@keyframes zpShimmer {
from { left: -100%; }
to   { left:  200%; }
}
@keyframes zpPulse {
0%, 100% { opacity: 0.5; transform: scale(1);    }
50%      { opacity: 1;   transform: scale(1.18); }
} .zp-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--thelis-red);
}
.zp-label::before {
content: '';
width: 36px;
height: 1px;
background: var(--thelis-red);
opacity: 0.6;
flex-shrink: 0;
}
.zp-label--dim { color: #E8294A; }
.zp-section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 48px;
}
.zp-section-num {
font-family: var(--thelis-ff-title);
font-size: 80px;
font-weight: 600;
line-height: 1;
user-select: none;
color: var(--thelis-black);
opacity: 0.04;
}
.zp-section-num--light { color: var(--thelis-white); opacity: 0.06; }
.zp-section-title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(28px, 4vw, 52px);
font-weight: 700;
letter-spacing: -2px;
line-height: 1.08;
color: var(--thelis-black) !important;
margin: 0 0 40px;
}
.zp-section-title--light { color: var(--thelis-white) !important; }
.zp-section-lead {
font-family: var(--thelis-ff-display);
font-size: clamp(16px, 1.6vw, 19px);
font-weight: 300;
line-height: 1.7;
color: var(--thelis-gray);
max-width: 720px;
margin: 0 0 56px;
}
.zp-section-lead--light { color: rgba(255, 255, 255, 0.72) !important; } .zp-intro::after,
.zp-specs::after,
.zp-run::after,
.zp-why::after,
.zp-deploy::after,
.zp-cta::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--thelis-red), transparent);
z-index: 3;
} .zp-hero {
background: var(--thelis-black);
position: relative;
padding: 148px 0 96px;
overflow: hidden;
}
.zp-hero::before {
content: '';
position: absolute;
inset: -5%;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.07) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
animation: zpDotDrift 22s ease-in-out infinite;
}
.zp-hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--thelis-red) 40%, transparent 100%);
opacity: 0.35;
z-index: 1;
}
.zp-hero .container { position: relative; z-index: 2; }
.zp-hero__layout {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 72px;
align-items: center;
} .zp-breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 56px;
animation: zpBlurUp 0.7s var(--thelis-ease-out) 0.05s both;
}
.zp-breadcrumb a {
color: rgba(255, 255, 255, 0.65) !important;
text-decoration: none !important;
transition: color 0.2s;
}
.zp-breadcrumb a:hover    { color: rgba(255, 255, 255, 0.88) !important; }
.zp-breadcrumb__sep       { color: rgba(255, 255, 255, 0.32) !important; }
.zp-breadcrumb__current   { color: var(--thelis-red) !important; }
.zp-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--thelis-red) !important;
margin-bottom: 22px;
animation: zpBlurUp 0.8s var(--thelis-ease-out) 0.12s both;
}
.zp-hero__eyebrow::before {
content: '';
width: 36px; height: 1px;
background: var(--thelis-red);
opacity: 0.6;
}
.zp-hero__title {
font-family: var(--thelis-ff-display) !important;
font-size: clamp(56px, 8vw, 104px);
font-weight: 700;
letter-spacing: -3px;
line-height: 1.0;
color: var(--thelis-white) !important;
margin: 0 0 24px;
animation: zpBlurUp 1.3s var(--thelis-ease-out) 0.22s both;
}
.zp-hero__subtitle {
font-family: var(--thelis-ff-title);
font-style: italic;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 500;
color: rgba(255, 255, 255, 0.90) !important;
margin: 0 0 24px;
line-height: 1.25;
animation: zpBlurUp 0.9s var(--thelis-ease-out) 0.42s both;
}
.zp-hero__desc {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
color: rgba(255, 255, 255, 0.72) !important;
max-width: 540px;
line-height: 1.75;
margin: 0 0 36px;
animation: zpBlurUp 0.9s var(--thelis-ease-out) 0.56s both;
} .zp-hero__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 40px;
animation: zpBlurUp 0.9s var(--thelis-ease-out) 0.66s both;
}
.zp-chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 2px;
background: rgba(255, 255, 255, 0.03);
}
.zp-chip__val {
font-family: var(--thelis-ff-mono);
font-size: 15px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--thelis-red) !important;
}
.zp-chip__key {
font-family: var(--thelis-ff-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55) !important;
}
.zp-hero__cta {
display: flex;
flex-wrap: wrap;
gap: 14px;
animation: zpBlurUp 0.9s var(--thelis-ease-out) 0.76s both;
} .zp-hero__visual {
position: relative;
animation: zpBlurUp 1.1s var(--thelis-ease-out) 0.5s both;
}
.zp-hero__frame {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 4px;
background: rgba(255, 255, 255, 0.02);
padding: 22px;
overflow: hidden;
}
.zp-hero__frame::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 30%, rgba(232, 41, 74, 0.16), transparent 60%);
pointer-events: none;
}
.zp-hero__frame img {
display: block;
width: 100%;
height: auto;
border-radius: 2px;
position: relative;
z-index: 1;
} .zp-hero__frame::after {
content: '';
position: absolute;
top: 12px; left: 12px;
width: 18px; height: 18px;
border-top: 1.5px solid rgba(232, 41, 74, 0.7);
border-left: 1.5px solid rgba(232, 41, 74, 0.7);
z-index: 2;
}
.zp-hero__badge {
position: absolute;
bottom: 18px; right: 18px;
z-index: 3;
display: flex;
gap: 10px;
align-items: center;
padding: 9px 16px;
background: rgba(17, 17, 24, 0.78);
border: 1px solid rgba(232, 41, 74, 0.5);
border-radius: 2px;
font-family: var(--thelis-ff-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(4px);
}
.zp-hero__badge .sep { color: var(--thelis-red) !important; } .zp-hero__frame--diagram { padding: 28px; }
.zp-hero__frame svg {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
} @keyframes zpNetParticle {
0%   { stroke-dashoffset:  0;   opacity: 0; }
6%   { opacity: 1; }
94%  { opacity: 1; }
100% { stroke-dashoffset: -100; opacity: 0; }
}
@keyframes zpNetRingPulse {
0%, 100% { transform: scale(1);   opacity: 0.20; }
50%      { transform: scale(1.5); opacity: 0;    }
}
.zp-net-svg { width: 100%; height: auto; display: block; }
.zp-net-p { animation: zpNetParticle 2.6s linear infinite; }
.zp-net-ring {
transform-box: fill-box;
transform-origin: center;
animation: zpNetRingPulse 2.6s ease-in-out infinite;
}
.zp-net-ring--outer { animation-duration: 3.4s; } .zp-proof {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 56px;
padding-top: 44px;
border-top: 1px solid var(--thelis-border);
}
.zp-proof__val {
display: block;
font-family: var(--thelis-ff-display);
font-size: clamp(34px, 5vw, 58px);
font-weight: 700;
letter-spacing: -2px;
line-height: 1;
color: var(--thelis-red);
}
.zp-proof__label {
display: block;
margin-top: 12px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--thelis-gray);
} .zp-ticker {
background: #0c0c10 !important;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
padding: 22px 0;
overflow: hidden;
}
.zp-ticker__inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 14px 28px;
}
.zp-ticker__item {
display: inline-flex;
align-items: baseline;
gap: 9px;
font-family: var(--thelis-ff-mono);
}
.zp-ticker__val {
font-size: 13px;
font-weight: 700;
color: var(--thelis-white) !important;
letter-spacing: 0.5px;
}
.zp-ticker__key {
font-size: 9px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42) !important;
}
.zp-ticker__dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--thelis-red);
flex-shrink: 0;
} .zp-intro,
.zp-run,
.zp-deploy {
position: relative;
padding: 120px 0;
}
.zp-specs,
.zp-why {
position: relative;
padding: 120px 0;
overflow: hidden;
} .zp-specs::before,
.zp-why::before {
content: '';
position: absolute;
inset: -5%;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.06) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
animation: zpDotDrift 24s ease-in-out infinite;
}
.zp-specs .container,
.zp-why .container { position: relative; z-index: 2; } .zp-pillars {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.zp-pillar {
background: var(--thelis-white);
border-radius: 4px;
border-top: 2px solid transparent;
padding: 36px 32px;
transition: transform 0.45s var(--thelis-spring), box-shadow 0.25s ease, border-top-color 0.25s ease;
}
.zp-pillar:hover {
transform: translateY(-6px);
border-top-color: var(--thelis-red);
box-shadow: 0 18px 48px rgba(17, 17, 24, 0.08);
}
.zp-pillar__icon {
width: 44px; height: 44px;
color: var(--thelis-red);
margin-bottom: 22px;
}
.zp-pillar__icon svg { width: 100%; height: 100%; }
.zp-pillar h3 {
font-family: var(--thelis-ff-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--thelis-black);
margin: 0 0 12px;
}
.zp-pillar p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: var(--thelis-gray);
margin: 0;
} .zp-origin {
margin-top: 48px;
font-family: var(--thelis-ff-mono);
font-size: 12px;
letter-spacing: 1px;
color: var(--thelis-gray);
}
.zp-origin a {
color: var(--thelis-red) !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(232, 41, 74, 0.3);
transition: border-color 0.2s;
}
.zp-origin a:hover { border-color: var(--thelis-red); } .zp-specs__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 56px;
}
.zp-specgroup {
padding: 28px 0 8px;
}
.zp-specgroup__title {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--thelis-red) !important;
margin: 0 0 12px;
}
.zp-specgroup__title::before {
content: '';
width: 22px; height: 1px;
background: var(--thelis-red);
opacity: 0.7;
}
.zp-spec-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 24px;
padding: 13px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.zp-spec-key {
font-family: var(--thelis-ff-mono);
font-size: 12px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.55) !important;
flex-shrink: 0;
}
.zp-spec-val {
font-family: var(--thelis-ff-display);
font-size: 15px;
font-weight: 400;
color: rgba(255, 255, 255, 0.92) !important;
text-align: right;
}
.zp-spec-val--tbd { color: rgba(255, 255, 255, 0.40) !important; font-style: italic; }
.zp-specs__note {
margin-top: 40px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.45) !important;
} .zp-configs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 0 0 56px;
}
.zp-config {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.10);
border-top: 2px solid transparent;
border-radius: 6px;
padding: 28px 24px;
text-align: center;
transition: transform 0.45s var(--thelis-spring), border-top-color 0.25s ease, background 0.25s ease;
}
.zp-config:hover {
transform: translateY(-5px);
border-top-color: var(--thelis-red);
background: rgba(255, 255, 255, 0.05);
}
.zp-config--top {
border-color: rgba(232, 41, 74, 0.45);
background: rgba(232, 41, 74, 0.07);
}
.zp-config__tier {
display: block;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55) !important;
margin-bottom: 14px;
}
.zp-config--top .zp-config__tier { color: var(--thelis-red) !important; }
.zp-config__mem {
display: block;
font-family: var(--thelis-ff-display);
font-size: clamp(34px, 4vw, 46px);
font-weight: 700;
letter-spacing: -2px;
line-height: 1;
color: #ffffff !important;
}
.zp-config__sub {
display: block;
font-family: var(--thelis-ff-mono);
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.40) !important;
margin-top: 12px;
}
.zp-configs__caption {
margin: 0 0 56px;
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.62) !important;
max-width: 760px;
}
.zp-configs__caption strong { color: rgba(255, 255, 255, 0.88) !important; font-weight: 600; } .zp-run__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.zp-usecard {
display: grid;
grid-template-columns: 56px 1fr;
gap: 22px;
align-items: start;
background: var(--thelis-white);
border: 1px solid var(--thelis-border);
border-radius: 4px;
padding: 32px;
transition: transform 0.4s var(--thelis-spring), box-shadow 0.25s ease;
}
.zp-usecard:hover {
transform: translateY(-5px);
box-shadow: 0 16px 44px rgba(17, 17, 24, 0.07);
}
.zp-usecard__icon {
width: 44px; height: 44px;
color: var(--thelis-red);
border: 1px solid rgba(232, 41, 74, 0.25);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
.zp-usecard__icon svg { width: 24px; height: 24px; }
.zp-usecard h3 {
font-family: var(--thelis-ff-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--thelis-black);
margin: 0 0 8px;
}
.zp-usecard p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.6;
color: var(--thelis-gray);
margin: 0;
} .zp-why__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.zp-benefit {
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 2px solid transparent;
border-radius: 4px;
padding: 36px 32px;
transition: transform 0.45s var(--thelis-spring), border-top-color 0.25s ease, background 0.25s ease;
}
.zp-benefit:hover {
transform: translateY(-6px);
border-top-color: var(--thelis-red);
background: rgba(255, 255, 255, 0.04);
}
.zp-benefit__icon {
width: 40px; height: 40px;
color: var(--thelis-red);
margin-bottom: 20px;
}
.zp-benefit__icon svg { width: 100%; height: 100%; }
.zp-benefit h3 {
font-family: var(--thelis-ff-display);
font-size: 18px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--thelis-white) !important;
margin: 0 0 12px;
}
.zp-benefit p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72) !important;
margin: 0;
} .zp-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 64px;
}
.zp-step {
position: relative;
background: var(--thelis-white);
border: 1px solid var(--thelis-border);
border-radius: 4px;
padding: 36px 32px;
}
.zp-step__num {
font-family: var(--thelis-ff-mono);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
color: var(--thelis-red);
margin-bottom: 16px;
}
.zp-step h3 {
font-family: var(--thelis-ff-display);
font-size: 19px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--thelis-black);
margin: 0 0 10px;
}
.zp-step p {
font-family: var(--thelis-ff-display);
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: var(--thelis-gray);
margin: 0;
} .zp-bundle {
display: grid;
grid-template-columns: 1fr auto;
gap: 40px;
align-items: center;
background: rgba(232, 41, 74, 0.05);
border: 1px solid rgba(232, 41, 74, 0.20);
border-left: 3px solid var(--thelis-red);
border-radius: 4px;
padding: 40px 48px;
}
.zp-bundle__label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--thelis-ff-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--thelis-red);
margin-bottom: 16px;
}
.zp-bundle__label::before {
content: '';
width: 22px; height: 1px;
background: var(--thelis-red);
opacity: 0.7;
}
.zp-bundle h3 {
font-family: var(--thelis-ff-title);
font-style: italic;
font-size: clamp(22px, 2.6vw, 30px);
font-weight: 600;
color: var(--thelis-black);
margin: 0 0 12px;
line-height: 1.25;
}
.zp-bundle p {
font-family: var(--thelis-ff-display);
font-size: 15px;
font-weight: 300;
line-height: 1.6;
color: var(--thelis-gray);
margin: 0;
max-width: 560px;
}
.zp-bundle__cta { flex-shrink: 0; } .zp-cta {
background: var(--thelis-black);
position: relative;
padding: 120px 0;
overflow: hidden;
}
.zp-cta::before {
content: '';
position: absolute;
inset: -5%;
background-image: radial-gradient(circle, rgba(232, 41, 74, 0.07) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
animation: zpDotDrift 22s ease-in-out infinite;
}
.zp-cta .container { position: relative; z-index: 2; }
.zp-cta__inner { max-width: 760px; }
.zp-cta__title {
font-family: var(--thelis-ff-title) !important;
font-size: clamp(34px, 5vw, 64px);
font-weight: 600;
letter-spacing: -1px;
line-height: 1.08;
color: var(--thelis-white) !important;
margin: 16px 0 20px;
}
.zp-cta__title em {
font-style: italic;
color: var(--thelis-red) !important;
}
.zp-cta__desc {
font-family: var(--thelis-ff-display);
font-size: 16px;
font-weight: 300;
line-height: 1.7;
color: rgba(255, 255, 255, 0.72) !important;
margin: 0 0 36px;
max-width: 560px;
}
.zp-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
} @media (max-width: 1024px) {
.zp-hero { padding: 120px 0 80px; }
.zp-hero__layout { grid-template-columns: 1fr; gap: 48px; }
.zp-hero__visual { order: -1; max-width: 520px; }
.zp-pillars { grid-template-columns: repeat(2, 1fr); }
.zp-why__grid { grid-template-columns: 1fr; }
.zp-steps { grid-template-columns: 1fr; }
.zp-specs__grid { grid-template-columns: 1fr; gap: 0 0; }
.zp-configs { grid-template-columns: 1fr; }
.zp-proof { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.zp-bundle { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 768px) {
.zp-intro, .zp-run, .zp-deploy, .zp-specs, .zp-why, .zp-cta { padding: 80px 0; }
.zp-section-header { margin-bottom: 36px; }
.zp-section-num { font-size: 56px; }
.zp-pillars { grid-template-columns: 1fr; }
.zp-run__grid { grid-template-columns: 1fr; }
.zp-usecard { grid-template-columns: 1fr; gap: 16px; }
.zp-bundle { padding: 32px 28px; }
.zp-hero__cta .btn, .zp-cta__actions .btn { width: 100%; text-align: center; }
}