*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
:root { --page-bg: #E8E8E8; --page-text: #181818; --page-muted: rgba(24,24,24,0.64); --panel-bg: rgba(24,24,24,0.96); --panel-text: #EBEBEB; --panel-muted: rgba(235,235,235,0.72); --panel-border: rgba(255,255,255,0.08); --brand-coral: #D08989; --brand-indigo: #8996D0; --brand-teal: #89D0C0; --brand-ochre: #E3B55C; }
body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--page-bg); color: var(--page-text); line-height: 1.6; min-height: 100vh; }
button,input,textarea { font: inherit; } button { cursor: pointer; }
.pw { max-width: 1240px; margin: 0 auto; padding: 2.25rem 1.25rem 3.5rem; }
.page-topbar { display: flex; justify-content: flex-start; margin-bottom: 0.7rem; }
.brand-link { display: inline-flex; align-items: center; justify-content: center; width: clamp(70px, 9vw, 96px); border-radius: 18px; text-decoration: none; transition: transform 0.2s ease, opacity 0.2s ease; }
.brand-link:hover { transform: translateY(-1px); opacity: 0.92; }
.brand-link:focus-visible { outline: 2px solid rgba(24,24,24,0.32); outline-offset: 4px; }
.brand-link img { display: block; width: 100%; height: auto; }
.page-head { text-align: center; margin-bottom: 1.4rem; }
.page-head .ey { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(24,24,24,0.52); margin-bottom: 0.5rem; }
.page-head h1 { font-size: clamp(1.8rem, 3.8vw, 2.25rem); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; color: #181818; }
.page-head .sub { margin-top: 0.65rem; font-size: 0.98rem; color: rgba(24,24,24,0.7); max-width: 580px; margin-left: auto; margin-right: auto; }
.page-head::after { content: ''; display: block; width: min(240px, 42vw); height: 8px; margin: 1rem auto 0; border-radius: 999px; background: linear-gradient(90deg, var(--brand-coral) 0 25%, var(--brand-indigo) 25% 50%, var(--brand-teal) 50% 75%, var(--brand-ochre) 75% 100%); opacity: 0.72; }
.support-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0.8rem; margin-bottom: 1.3rem; }
.support-strip-bottom { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 1.35rem; margin-bottom: 0; }
.support-card { display: grid; gap: 0.25rem; padding: 1rem 1.05rem; border-radius: 16px; background: rgba(255,255,255,0.6); border: 1px solid rgba(24,24,24,0.08); color: #181818; text-decoration: none; box-shadow: 0 12px 30px rgba(0,0,0,0.06); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.support-card:hover { transform: translateY(-1px); border-color: rgba(24,24,24,0.14); box-shadow: 0 16px 36px rgba(0,0,0,0.08); }
.support-card strong { font-size: 1rem; line-height: 1.25; }
.support-card span:last-child { color: rgba(24,24,24,0.68); font-size: 0.82rem; line-height: 1.55; }
.support-kicker { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(24,24,24,0.5); font-weight: 700; }
.support-card-static { cursor: default; }
.support-card-static:hover { transform: none; }
.stepbar { display: grid; grid-template-columns: repeat(7,1fr); gap: 0.5rem; margin-bottom: 1.3rem; }
.step-pill { border-radius: 999px; padding: 0.6rem 0.75rem; border: 1px solid rgba(24,24,24,0.12); background: rgba(255,255,255,0.55); color: rgba(24,24,24,0.64); text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; }
.step-pill.is-active { background: #181818; color: #EBEBEB; border-color: #181818; }
.step-pill.is-complete { background: rgba(24,24,24,0.08); color: #181818; border-color: rgba(24,24,24,0.08); }
.pg { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.pg.is-preview-hidden { grid-template-columns: 1fr; }
.pg.is-preview-hidden .pp { display: none; }
@media (min-width: 1020px) { .pg { grid-template-columns: minmax(0,400px) minmax(0,1fr); align-items: start; } .pg.is-preview-hidden { grid-template-columns: minmax(0,1fr); } }
.pg.is-preview-hidden .card-form-grid,
.pg.is-preview-hidden .review-grid { grid-template-columns: 1fr; }
.builder-card,.pp { background: var(--panel-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--panel-border); border-radius: 18px; color: var(--panel-text); min-width: 0; box-shadow: 0 26px 58px rgba(0,0,0,0.12); }
.builder-card { padding: 1.5rem; }
@media (min-width: 1020px) { .builder-card { position: sticky; top: 1.25rem; } }
@media (min-width: 1020px) { .pg.is-preview-hidden .builder-card { position: static; } }
.step-panel { display: none; } .step-panel.is-active { display: block; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
.panel-head > div:first-child { min-width: 0; }
.panel-head-actions { display: flex; align-items: flex-start; justify-content: flex-end; flex-shrink: 0; }
.preview-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 10.5rem; border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; background: rgba(255,255,255,0.05); color: #EBEBEB; padding: 0.72rem 0.9rem; font-weight: 600; transition: all 0.2s ease; }
.preview-toggle-btn:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.09); }
@media (max-width: 720px) { .panel-head { flex-direction: column; } .panel-head-actions { width: 100%; } .preview-toggle-btn { width: 100%; } }
.panel-kicker { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(238,232,236,0.45); margin-bottom: 0.35rem; }
.panel-head h2 { font-size: 1.4rem; line-height: 1.2; margin-bottom: 0.4rem; }
.panel-head p { color: var(--panel-muted); font-size: 0.92rem; }
.fields-grid,.card-form-grid,.review-grid,.social-fields,.highlight-grid { display: grid; gap: 1rem; }
.fields-grid { grid-template-columns: 1fr; }
@media (min-width: 620px) { .fields-grid { grid-template-columns: 1fr 1fr; } }
.fields-grid-single { grid-template-columns: 1fr; }
.field-block,.review-card,.card-editor,.summary-box,.payment-box { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 0.95rem; }
.field-block-full { grid-column: 1 / -1; }
.fl,.cl { display: block; font-size: 0.83rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.45rem; color: #f4edf1; }
.ch { display: block; font-size: 0.72rem; color: rgba(244,237,241,0.52); font-weight: 400; margin-top: 0.08rem; }
.fi { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff; padding: 0.8rem 0.85rem; border-radius: 12px; outline: none; transition: border-color 0.2s ease, background 0.2s ease; }
.fi:focus { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.07); }
.fi.is-invalid { border-color: rgba(255,136,136,0.72); background: rgba(255,136,136,0.08); }
.fi::placeholder,.ta::placeholder { color: rgba(255,255,255,0.38); }
.ta { resize: vertical; min-height: 96px; }
.file-input { padding: 0.65rem 0.85rem; }
.help,.counter,.file-status { margin-top: 0.4rem; font-size: 0.74rem; color: rgba(244,237,241,0.62); }
.help.is-error { color: #ffb7b7; }
.preview-note { color: rgba(244,237,241,0.78); }
.field-error { margin-top: 0.45rem; font-size: 0.74rem; color: #ffb7b7; }
.field-error[hidden] { display: none; }
.help-centre { text-align: center; }
.file-status.is-ok { color: #b8e6c0; } .file-status.is-bad { color: #ffb7b7; }
.counter.is-near { color: #f5dea8; } .counter.is-max { color: #ffb7b7; }
.tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
#bt-tog { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tg,.primary-btn,.ghost-btn,.ptb-btn,.car-btn { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: transparent; color: #eee8ec; padding: 0.72rem 0.85rem; transition: all 0.2s ease; }
.tg,.ptb-btn { font-size: 0.84rem; font-weight: 500; }
.tg:hover,.ghost-btn:hover,.primary-btn:hover,.ptb-btn:hover,.car-btn:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.tg.on,.ptb-btn.on { border-color: rgba(255,255,255,0.45); background: rgba(255,255,255,0.1); color: #fff; }
.primary-btn { background: #fff; color: #241c23; border: none; font-weight: 700; }
.primary-btn-full { width: 100%; }
.ghost-btn { color: #eee8ec; font-weight: 600; }
.panel-actions { display: flex; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.cr { display: flex; align-items: center; gap: 0.7rem; } .cr-secondary { margin-top: 0.55rem; }
.ciw { position: relative; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); cursor: pointer; flex-shrink: 0; }
.ciw input[type="color"] { position: absolute; top: -8px; left: -8px; width: calc(100% + 16px); height: calc(100% + 16px); border: none; cursor: pointer; background: none; }
.ciw input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } .ciw input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; } .ciw input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
.cx { font-size: 0.78rem; color: rgba(232,222,222,0.72); letter-spacing: 0.02em; }
.swatch-static { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.12); flex-shrink: 0; }
.cw { display: none; align-items: flex-start; gap: 0.45rem; margin-top: 0.55rem; padding: 0.55rem 0.7rem; background: rgba(227,181,92,0.12); border: 1px solid rgba(227,181,92,0.25); border-radius: 8px; font-size: 0.7rem; line-height: 1.5; color: #f2d898; }
.cw.show { display: flex; }
.sg { display: grid; grid-template-columns: repeat(5,1fr); gap: 0.35rem; }
.sb { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.25rem; background: transparent; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: rgba(232,222,222,0.55); font-size: 0.6rem; font-weight: 500; }
.sb:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); } .sb.on { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); color: #fff; } .sb svg { width: 16px; height: 16px; }
.summary-box .st { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,222,222,0.48); margin-bottom: 0.45rem; }
.sl { list-style: none; color: rgba(232,222,222,0.78); font-size: 0.8rem; line-height: 1.75; }
.sl li { padding-left: 1em; text-indent: -1em; } .sl li::before { content: '• '; opacity: 0.45; }
.highlight-grid,.card-form-grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .card-form-grid,.review-grid { grid-template-columns: 1fr 1fr; } }
.social-field-row { display: grid; gap: 0.35rem; }
.social-chip { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: rgba(244,237,241,0.78); }
.social-chip svg { width: 15px; height: 15px; }
.social-chip .ph { font-size: 0.95rem; line-height: 1; }
.card-form-note { margin-bottom: 0.85rem; padding: 0.8rem 0.95rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.045); color: rgba(244,237,241,0.78); font-size: 0.8rem; line-height: 1.55; }
.card-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.65rem; }
.card-editor-meta { margin-bottom: 0.6rem; }
.card-toggle-btn { border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.04); color: rgba(244,237,241,0.82); padding: 0.48rem 0.78rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; }
.card-toggle-btn.on { border-color: rgba(255,255,255,0.34); background: rgba(255,255,255,0.12); color: #fff; }
.card-editor.is-inactive { background: rgba(255,255,255,0.03); }
.card-editor-body.is-hidden { opacity: 0.6; }
.icon-picker-bar { display: flex; align-items: center; margin-bottom: 0.55rem; }
.icon-picker-toggle { width: 100%; display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.78rem 0.85rem; border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; background: rgba(255,255,255,0.05); color: #fff; font-weight: 600; text-align: left; }
.icon-picker-toggle:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.08); }
.icon-picker-current { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.08); flex-shrink: 0; }
.icon-picker-current .ph { font-size: 1.15rem; line-height: 1; }
.icon-picker-copy { display: grid; gap: 0.12rem; flex: 1; min-width: 0; }
.icon-picker-copy strong { font-size: 0.82rem; font-weight: 700; }
.icon-picker-copy span { font-size: 0.72rem; color: rgba(244,237,241,0.68); font-weight: 500; }
.icon-picker-chevron { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: rgba(244,237,241,0.72); flex-shrink: 0; transition: transform 0.2s ease, color 0.2s ease; }
.icon-picker-toggle.is-open .icon-picker-chevron { transform: rotate(180deg); color: #fff; }
.icon-picker-chevron svg { width: 16px; height: 16px; }
.icon-search-panel { margin-bottom: 0.85rem; padding: 0.8rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.03); }
.icon-search-input { margin-bottom: 0.7rem; }
.icon-picker-results { max-height: 280px; overflow-y: auto; padding-right: 0.18rem; }
.icon-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(46px,1fr)); gap: 0.5rem; }
.icon-choice { width: 100%; aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; background: rgba(255,255,255,0.03); color: rgba(244,237,241,0.84); transition: all 0.2s ease; }
.icon-choice:hover { border-color: rgba(255,255,255,0.24); background: rgba(255,255,255,0.07); }
.icon-choice.on { border-color: rgba(255,255,255,0.44); background: rgba(255,255,255,0.11); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
.icon-choice .ph { font-size: 1.2rem; line-height: 1; }
.icon-choice-empty { font-size: 0.76rem; color: rgba(244,237,241,0.7); }
.card-editor h3,.review-card h3 { font-size: 0.95rem; }
.review-card h3 { margin-bottom: 0.55rem; }
.review-card dl { display: grid; gap: 0.45rem; }
.review-card dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(244,237,241,0.46); }
.review-card dd { color: rgba(244,237,241,0.84); font-size: 0.82rem; }
.payment-box { text-align: center; }
.payment-price { font-size: 1.35rem; font-weight: 700; color: #fff; margin-bottom: 0.35rem; }
.payment-price-was { text-decoration: line-through; opacity: 0.58; margin-right: 0.2rem; }
.payment-copy { font-size: 0.92rem; color: rgba(244,237,241,0.76); margin-bottom: 1rem; }
.payment-links a { color: #fff; font-weight: 700; text-underline-offset: 0.18em; }
.payment-links a:hover { color: #f4edf1; }
.expectation-box { margin: 0 0 1rem; padding: 0.95rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.04); text-align: left; }
.expectation-copy { color: rgba(244,237,241,0.82); font-size: 0.84rem; margin-bottom: 0.8rem; }
.consent-check { display: flex; align-items: flex-start; gap: 0.7rem; color: rgba(244,237,241,0.84); font-size: 0.8rem; line-height: 1.5; text-align: left; }
.consent-check input { margin-top: 0.18rem; flex-shrink: 0; }
.consent-check.is-invalid { color: #ffb7b7; }
.turnstile-box { margin: 0 0 1rem; padding: 0.95rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.04); }
.turnstile-copy { color: rgba(244,237,241,0.82); font-size: 0.84rem; margin-bottom: 0.75rem; }
.turnstile-box .help { margin-top: 0.7rem; }
.preview-export-box { margin: 0 0 1rem; padding: 0.95rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; background: rgba(255,255,255,0.04); text-align: left; }
.export-kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,222,222,0.48); margin-bottom: 0.45rem; }
.export-copy { color: rgba(244,237,241,0.82); font-size: 0.84rem; margin-bottom: 0.8rem; }
.export-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 0.65rem; max-width: 260px; margin: 0 auto; }
.export-actions .ghost-btn { width: 100%; }
.export-status { margin-top: 0.75rem; }
.export-status.is-error { color: #ffb7b7; }
.export-status.is-success { color: #b8e6c0; }
.export-link-wrap { margin-top: 0.15rem; }
.export-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }
.pp { overflow: hidden; min-width: 0; }
.ptb { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ptb-l { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(232,222,222,0.42); }
.ptb-r { display: flex; align-items: center; gap: 0.65rem; }
.ptb-d,.pv-ft-d { display: flex; gap: 5px; }
.ptb-dt,.pv-ft-dt { width: 7px; height: 7px; border-radius: 50%; }
.pv-wrap { padding: 1rem; }
.pv-frame { margin: 0 auto; transition: width 0.25s ease; } .pv-frame.is-desktop { width: 100%; } .pv-frame.is-mobile { width: min(390px,100%); }
.pv { overflow: hidden; border-radius: 18px; transition: background 0.35s ease, color 0.35s ease; }
.pv-banner { width: 100%; height: 156px; position: relative; overflow: hidden; transition: all 0.35s ease; display: none; }
.pv-banner.show { display: block; }
.pv-banner-pattern,.pv-hero-bg { position: absolute; inset: 0; } .pv-banner-pattern { opacity: 0.08; }
.pv-banner-img,.pv-pfp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.pv-banner.has-image .pv-banner-img,.pv-pfp.has-image .pv-pfp-img { display: block; }
.pv-banner.has-image .pv-banner-pattern,.pv-banner.has-image .pv-banner-inner,.pv-pfp.has-image .pv-pfp-inner { display: none; }
.pv-banner-inner,.pv-pfp-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.4; }
.pv-hero { text-align: center; padding: 2.2rem 1.25rem 1.9rem; position: relative; overflow: hidden; }
.pv-hero.has-banner { padding-top: 1.6rem; }
.pv-pfp { width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 1.2rem; position: relative; overflow: hidden; display: none; }
.pv-pfp.show { display: block; }
.pv-pfp-inner svg { width: 30px; height: 30px; opacity: 0.5; }
.pv-hero-name { font-size: clamp(1.55rem,4vw,2.15rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; position: relative; }
.pv-hero-tagline,.pv-sh p,.pv-card p,.pv-hll,.pv-ct p,.pv-ft { transition: color 0.35s ease; }
.pv-hero-tagline { margin-top: 0.8rem; font-size: 0.95rem; line-height: 1.62; max-width: 420px; margin-left: auto; margin-right: auto; position: relative; }
.pv-socials { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; position: relative; min-height: 36px; }
.pv-si { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; animation: fadeUp 0.25s ease both; flex-shrink: 0; overflow: hidden; }
.pv-si-text { width: auto; min-height: 38px; padding: 0 0.9rem; font-size: 0.72rem; font-weight: 600; }
.pv-si .ph { font-size: 1rem; line-height: 1; }
.pv-si svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.pv-divider { height: 1px; margin: 0 1.25rem; transition: background 0.35s ease; }
.pv-services,.pv-hl { padding: 1.6rem 1.25rem; }
.pv-sh,.pv-hlh { margin-bottom: 1rem; }
.pv-ey { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.35rem; }
.pv-sh h4,.pv-hlh h4,.pv-ct h4 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.pv-sh p,.pv-ct p { font-size: 0.84rem; line-height: 1.62; }
.pv-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pv-cards.is-single { grid-template-columns: minmax(0,1fr); max-width: 560px; margin: 0 auto; }
.pv-frame.is-mobile .pv-cards { grid-template-columns: 1fr; }
.pv-layout { display: none; } .pv-layout.show { display: block; }
.pv-card { padding: 1rem 0.95rem; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 176px; }
.pv-frame.is-mobile .pv-card { min-height: 188px; }
.pv-frame.is-desktop .pv-card { min-height: 168px; }
.pv-ci { width: 34px; height: 34px; margin-bottom: 0.6rem; display: flex; align-items: center; justify-content: center; }
.pv-ci .ph { font-size: 1rem; line-height: 1; }
.pv-ci svg { width: 18px; height: 18px; display: block; flex-shrink: 0; }
.pv-card h5 { font-size: 0.88rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.28rem; letter-spacing: -0.01em; }
.pv-card p { font-size: 0.76rem; line-height: 1.55; max-width: 24ch; }
.pv-carousel-shell { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; }
.car-btn { width: 40px; height: 40px; border-radius: 999px; font-size: 1.4rem; line-height: 1; padding: 0; }
.car-btn:disabled { opacity: 0.35; cursor: default; }
.pv-car-window { overflow: hidden; }
.pv-car-track { display: flex; gap: 0.75rem; transition: transform 0.28s ease; will-change: transform; }
.pv-slide { flex: 0 0 clamp(220px,78%,300px); }
.pv-frame.is-mobile .pv-slide { flex-basis: 84%; }
.pv-hll { list-style: none; font-size: 0.8rem; line-height: 1.8; }
.pv-hll li { padding-left: 1em; text-indent: -1em; } .pv-hll li::before { content: '— '; opacity: 0.34; }
.pv-ct { padding: 2rem 1.25rem; text-align: center; }
.pv-ct-btn { display: inline-block; margin-top: 0.95rem; padding: 0.58rem 1.5rem; border: none; cursor: default; font-size: 0.82rem; font-weight: 600; }
.pv-ft { padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-top: 1px solid transparent; font-size: 0.72rem; }
.pv-ft-copy { display: grid; gap: 0.18rem; }
#pv-footer-extra { font-size: 0.66rem; opacity: 0.9; }
.toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(80px); background: rgba(30,12,12,0.92); border: 1px solid rgba(255,255,255,0.12); color: #e8dede; padding: 0.75rem 1.1rem; border-radius: 12px; font-size: 0.82rem; font-weight: 500; opacity: 0; transition: all 0.3s ease; z-index: 100; pointer-events: none; white-space: nowrap; }
.toast.vis { opacity: 1; transform: translateX(-50%) translateY(0); } .toast.err { border-color: #c97070; }
.primary-btn:disabled,.ghost-btn:disabled,.ptb-btn:disabled,.car-btn:disabled { opacity: 0.62; cursor: not-allowed; }
.honeypot-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.info-page-body { background: linear-gradient(180deg, #f2efea 0%, #ebe6df 100%); color: #181818; min-height: 100vh; }
.info-shell { max-width: 980px; margin: 0 auto; padding: 1.6rem 1.1rem 3rem; }
.info-nav { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-bottom: 1rem; }
.info-nav-link { display: inline-flex; align-items: center; justify-content: center; padding: 0.7rem 0.95rem; border-radius: 999px; border: 1px solid rgba(24,24,24,0.1); background: rgba(255,255,255,0.7); color: #181818; text-decoration: none; font-size: 0.84rem; font-weight: 600; }
.info-nav-link:hover { border-color: rgba(24,24,24,0.18); background: rgba(255,255,255,0.9); }
.info-hero,.info-section { background: rgba(255,255,255,0.72); border: 1px solid rgba(24,24,24,0.08); border-radius: 22px; box-shadow: 0 18px 48px rgba(0,0,0,0.06); }
.info-hero { padding: 1.5rem; margin-bottom: 1rem; }
.info-kicker { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(24,24,24,0.5); margin-bottom: 0.45rem; }
.info-hero h1 { font-size: clamp(1.8rem, 4vw, 2.45rem); line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 0.55rem; }
.info-hero p { color: rgba(24,24,24,0.72); max-width: 60ch; }
.info-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.info-pill { display: inline-flex; align-items: center; padding: 0.4rem 0.7rem; border-radius: 999px; background: rgba(24,24,24,0.06); color: rgba(24,24,24,0.72); font-size: 0.78rem; font-weight: 600; }
.price-was { text-decoration: line-through; opacity: 0.58; margin-right: 0.2rem; }
.faq-list { display: grid; gap: 0.85rem; }
.faq-item { padding: 1.05rem 1.1rem; }
.faq-item summary { cursor: pointer; list-style: none; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p + p { margin-top: 0.75rem; }
.faq-item p, .faq-item li { color: rgba(24,24,24,0.76); }
.faq-item ul { margin: 0.75rem 0 0 1.1rem; }
.terms-pre { margin: 0; white-space: pre-wrap; font: inherit; line-height: 1.72; color: rgba(24,24,24,0.82); }
.terms-section { padding: 1.2rem 1.25rem; }
.terms-section + .terms-section { margin-top: 1rem; }
.terms-section h2 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.info-footer-note { margin-top: 1rem; color: rgba(24,24,24,0.62); font-size: 0.82rem; }
@media (max-width: 820px) { .stepbar { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 900px) { .support-strip { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .export-actions { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .pw,.info-shell { padding-left: 1rem; padding-right: 1rem; } .panel-actions { flex-direction: column-reverse; } .panel-actions .primary-btn,.panel-actions .ghost-btn { width: 100%; } .ptb { flex-direction: column; align-items: flex-start; } .ptb-r { width: 100%; justify-content: space-between; } .icon-picker { grid-template-columns: repeat(6,minmax(0,1fr)); } .info-hero,.info-section { border-radius: 18px; } }