
:root{
  --oc-conv-bg:#f5f8ff;
  --oc-conv-line:#dbe5ff;
  --oc-conv-text:#16335f;
  --oc-conv-soft:#eef4ff;
  --oc-conv-accent:#0b3d91;
  --oc-conv-ink:#0f172a;
  --oc-conv-muted:#5b6b82;
  --oc-conv-success:#0d7a44;
}
.convSection{padding:22px 0}
.convWrap{max-width:1120px;margin:0 auto}
.convEyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--oc-conv-soft);border:1px solid var(--oc-conv-line);color:var(--oc-conv-text);font-size:13px;font-weight:700;letter-spacing:.01em}
.convOutcomeGrid,.convAudienceGrid,.convFaqGrid,.convFormTrust{display:grid;gap:16px}
.convOutcomeGrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.convAudienceGrid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:16px}
.convCard,.convAudienceCard,.convAssistCard,.convMetricCard,.convFaqCard,.convPriceCard,.convValueCard,.convSummaryCard,.convInfoCard{background:#fff;border:1px solid var(--oc-conv-line);border-radius:22px;box-shadow:0 18px 44px rgba(15,23,42,.07)}
.convCard,.convAudienceCard,.convAssistCard,.convMetricCard,.convFaqCard,.convValueCard,.convSummaryCard,.convInfoCard{padding:20px}
.convCard h3,.convAudienceCard h3,.convAssistCard h3,.convMetricCard h3,.convFaqCard h3,.convValueCard h3,.convSummaryCard h3,.convInfoCard h3{margin:0 0 10px;color:var(--oc-conv-ink)}
.convCard p,.convAudienceCard p,.convAssistCard p,.convMetricCard p,.convFaqCard p,.convValueCard p,.convSummaryCard p,.convInfoCard p{margin:0;color:var(--oc-conv-muted)}
.convAudienceCard{min-height:100%}
.convAudienceCard .k{display:inline-block;margin-bottom:10px;padding:6px 10px;border-radius:999px;background:var(--oc-conv-soft);font-size:12px;font-weight:700;color:var(--oc-conv-text)}
.convMiniList,.convChecklist,.convPoints{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.convMiniList li,.convChecklist li,.convPoints li{padding-left:24px;position:relative;color:var(--oc-conv-ink)}
.convMiniList li::before,.convChecklist li::before,.convPoints li::before{content:'✓';position:absolute;left:0;top:0;color:var(--oc-conv-success);font-weight:800}
.convSplit{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:20px;align-items:start}
.convPanel{padding:24px;border-radius:28px;background:linear-gradient(180deg,#fff 0%,#f6f9ff 100%);border:1px solid var(--oc-conv-line);box-shadow:0 24px 52px rgba(11,61,145,.08)}
.convMetricStack{display:grid;gap:14px}
.convMetricCard .n{font-size:13px;font-weight:700;color:var(--oc-conv-text);margin-bottom:6px}
.convMetricCard .v{font-size:15px;color:var(--oc-conv-ink)}
.convTrustRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.convTrustPill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:#fff;border:1px solid var(--oc-conv-line);font-size:13px;color:var(--oc-conv-text)}
.convNote{margin-top:14px;padding:14px 16px;border-radius:18px;background:#fff;border:1px dashed var(--oc-conv-line);color:var(--oc-conv-muted)}
.convPricingHero{padding:22px;border-radius:28px;background:linear-gradient(135deg,#0b3d91 0%,#1e57b4 100%);color:#fff;box-shadow:0 28px 55px rgba(11,61,145,.22)}
.convPricingHero h1,.convPricingHero h2,.convPricingHero p{color:#fff;margin-top:0}
.convPricingHero .muted{color:rgba(255,255,255,.85)!important}
.convPricingGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:18px}
.convPriceCard{padding:24px;position:relative;overflow:hidden}
.convPriceCard.featured{border:2px solid #0b3d91;transform:translateY(-4px)}
.convPriceCard.best{border:2px solid #1f8f5f}
.convPriceBadge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--oc-conv-soft);font-size:12px;font-weight:700;color:var(--oc-conv-text);margin-bottom:12px}
.convPriceTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.convPriceValue{font-size:38px;line-height:1;font-weight:800;color:var(--oc-conv-ink);margin:8px 0 4px}
.convPriceValue span{font-size:15px;font-weight:600;color:var(--oc-conv-muted)}
.convPriceSub{color:var(--oc-conv-muted);margin-bottom:16px}
.convPriceFoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--oc-conv-line);display:grid;gap:12px}
.convPriceHint{font-size:13px;color:var(--oc-conv-muted)}
.convInfoGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.convFaqGrid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.convCTABand{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px;border-radius:28px;background:linear-gradient(180deg,#f7faff 0%,#eef4ff 100%);border:1px solid var(--oc-conv-line);margin-top:20px}
.convCTABand h2,.convCTABand p{margin:0}
.convCTABand p{color:var(--oc-conv-muted)}
.regConv{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);gap:22px;align-items:start}
.regConv__form .authCard{margin:0}
.regConv__aside{display:grid;gap:16px}
.convSummaryCard .price{font-size:32px;font-weight:800;line-height:1;color:var(--oc-conv-ink);margin-top:8px}
.convSummaryCard .price span{font-size:14px;font-weight:600;color:var(--oc-conv-muted)}
.convSummaryCard .planName{font-size:22px;font-weight:800;color:var(--oc-conv-ink);margin:6px 0}
.convPlanMeta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.convPlanMeta span{padding:7px 10px;border-radius:999px;background:var(--oc-conv-soft);font-size:12px;font-weight:700;color:var(--oc-conv-text)}
.convInfoCard .steps{display:grid;gap:12px;margin-top:14px}
.convInfoCard .step{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start}
.convInfoCard .step .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--oc-conv-soft);color:var(--oc-conv-text);font-weight:800}
.convLeadHero{padding:22px;border-radius:28px;background:linear-gradient(180deg,#fff 0%,#f5f9ff 100%);border:1px solid var(--oc-conv-line);box-shadow:0 18px 44px rgba(15,23,42,.07)}
.convLeadHero .heroCtas{margin-top:14px}
.convLeadGrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:18px;margin-top:18px}
.convAssistCard .muted,.convInfoCard .muted,.convSummaryCard .muted{color:var(--oc-conv-muted)!important}
.convFormPanel{background:#fff;border:1px solid var(--oc-conv-line);border-radius:24px;padding:20px;box-shadow:0 18px 44px rgba(15,23,42,.07)}
.convFormIntro{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.convFormIntro .t{font-size:22px;font-weight:800;color:var(--oc-conv-ink)}
.convFormIntro .p{color:var(--oc-conv-muted)}
.convFormTrust{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.convFormTrust .item{padding:12px 14px;border-radius:18px;background:var(--oc-conv-bg);border:1px solid var(--oc-conv-line);font-size:14px;color:var(--oc-conv-text)}
.convInlineNote{margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--oc-conv-bg);border:1px solid var(--oc-conv-line);font-size:14px;color:var(--oc-conv-text)}
.formSection .formRow label{display:block;margin-bottom:6px;font-weight:700;color:var(--oc-conv-ink)}
.formSection .formRow input,.formSection .formRow textarea,.formSection .formRow select{min-height:46px}
.formSection .formRow textarea{min-height:132px}
.formSection .formRow .fieldHint{margin-top:6px;font-size:13px;color:var(--oc-conv-muted)}
.formStatus{margin-top:12px;font-size:14px;font-weight:700}
button.is-loading,.btn.is-loading,.pubBtn.is-loading{opacity:.78;pointer-events:none}
button.is-loading::after,.btn.is-loading::after,.pubBtn.is-loading::after{content:' ···';animation:ocdots 1.1s infinite}
@keyframes ocdots{0%{opacity:.35}50%{opacity:1}100%{opacity:.35}}
.convLabel{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--oc-conv-soft);font-size:12px;font-weight:700;color:var(--oc-conv-text)}
.convHeroList{display:grid;gap:10px;margin:18px 0 0;padding:0;list-style:none}
.convHeroList li{padding-left:28px;position:relative;color:#10213e}
.convHeroList li::before{content:'→';position:absolute;left:0;top:0;color:#0b3d91;font-weight:900}
@media (max-width: 980px){
  .convSplit,.regConv,.convLeadGrid,.convPricingGrid,.convOutcomeGrid,.convInfoGrid,.convFaqGrid,.convAudienceGrid,.convFormTrust{grid-template-columns:1fr}
  .convPriceCard.featured{transform:none}
}
@media (max-width: 720px){
  .convCTABand{flex-direction:column;align-items:flex-start}
  .convPricingHero,.convPanel,.convFormPanel,.convCard,.convAudienceCard,.convAssistCard,.convMetricCard,.convFaqCard,.convPriceCard,.convValueCard,.convSummaryCard,.convInfoCard{border-radius:20px}
}
