.draft-11 .draft-hero { padding: 42px 0 30px; }
.draft-11 .d11-hero-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-bottom: 24px; }
.draft-11 .draft-heading { margin: 0; }
.draft-11 .draft-heading h1 { font-size: clamp(34px, 4vw, 48px); max-width: 650px; }
.draft-11 .draft-lead { font-size: 17px; margin: 0; }
.draft-11 .d11-hero-offer { border-left: 1px solid #3d5d86; padding-left: 28px; }
.draft-11 .d11-top-price { margin: 0 0 16px; }
.draft-11 .d11-top-price strong { color: #e6f0ff; display: block; font-size: 35px; letter-spacing: -.04em; }
.draft-11 .d11-top-price strong span { font-size: 15px; font-weight: 400; letter-spacing: 0; }
.draft-11 .d11-top-price > span { display: block; color: #93b6e3; font-size: 13px; margin-top: 2px; }
.draft-11 .d11-hero-offer .btn { white-space: normal; text-align: center; justify-content: center; }
.draft-11 .d11-comparison { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.draft-11 .d11-comparison-arrow { display: flex; align-items: center; justify-content: center; color: #86b6f3; font-size: 26px; }
.draft-11 .draft-section { padding: 28px 0; }
.draft-11.full-access-draft .draft-fine { font-size: 12px; }
.draft-11 .dc-footer { font-size: 12px; }
.draft-11 .footer .disclaimer { font-size: 12px; }
.draft-11 .draft-section > h2 { margin-bottom: 18px; font-size: 26px; }
.draft-11 .d11-difference .draft-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.draft-11 .d11-difference article { padding: 16px 20px; background: #121e31; border-radius: 10px; }
.draft-11 .d11-difference .draft-eyebrow { margin-bottom: 8px; }
.draft-11 .d11-difference .draft-list { margin: 0; font-size: 13px; line-height: 1.6; }
.draft-11 .d11-difference li { margin: 5px 0; }
.draft-11 .d11-included { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.draft-11 .d11-included article { border-left: 2px solid #375d88; padding: 4px 0 4px 14px; }
.draft-11 .d11-included h3 { font-size: 14px; margin-bottom: 6px; }
.draft-11 .d11-included p { font-size: 12px; line-height: 1.6; margin: 0; }
.draft-11 .draft-record { padding: 18px 22px; }
.draft-11 .draft-record p:not(.draft-record-value) { font-size: 12px; }
.draft-11 .d11-pricing { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.draft-11 .d11-pricing h2 { font-size: 28px; line-height: 1.2; max-width: 380px; }
.draft-11 .d11-pricing .draft-price { padding: 22px; }
.draft-11 .d11-pricing .draft-amount { font-size: 45px; margin: 14px 0 4px; }
.draft-11 .draft-accordions > details > summary { padding: 16px 4px; }
.draft-11 .draft-accordions p { margin: 0; }
.draft-11 .d11-final { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.draft-11 #faq .draft-accordions > details:last-child { border-bottom: 0; }
.draft-11 .d11-final h2 { font-size: 26px; margin-bottom: 8px; }
.draft-11 .d11-final p { font-size: 13px; margin: 0; }
.draft-11 .d11-final .d11-availability { margin: 12px 0; }
.draft-11 .d11-final .btn { white-space: normal; }
.draft-11 .d11-final .draft-fine { margin-top: 12px; font-size: 12px; }
@media (max-width: 760px) {
  .draft-11 .d11-hero-top, .draft-11 .d11-pricing { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .draft-11 .draft-hero { padding-top: 28px; }
  .draft-11 .d11-hero-offer { padding: 16px 18px; border: 1px solid #365881; border-radius: 10px; background: #14253d; }
  .draft-11 .d11-top-price strong { font-size: 30px; }
  .draft-11 .d11-comparison { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .draft-11 .d11-comparison-arrow { transform: rotate(90deg); height: 28px; }
  .draft-11 .d11-difference .draft-split { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .draft-11 .d11-included { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .draft-11 .d11-final { flex-direction: column; align-items: start; gap: 16px; }
}

/* Use the homepage Discord components; only adapt their column layout. */
.draft-11 .d11-preview { margin: 0; min-width: 0; padding: 20px; border: 1px solid #94a3b826; border-radius: 14px; background: #15213266; }
.draft-11 .d11-preview figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.draft-11 .d11-preview figcaption strong { font-size: 17px; color: #e8edf6; }
.draft-11 .d11-preview figcaption .d11-access-badge { display: inline-flex; align-items: center; padding: 6px 11px; font-size: 13px; line-height: 1.3; font-weight: 600; border: 1px solid #94a3b833; border-radius: 999px; background: #0f172a66; color: #c5cfdd; white-space: nowrap; }
.draft-11 .d11-preview figcaption .d11-access-badge-full { border-color: #60a5fa55; background: #3b82f61c; color: #a8cfff; }
.draft-11 .d11-preview figcaption span { font-size: 12px; color: #a5afbf; }
.draft-11 .d11-preview figcaption .d11-caption-text {
  min-width: 0;
  min-height: calc(2 * 1.5em);
  display: block;
  line-height: 1.5;
}
.draft-11 .d11-preview figcaption .d11-caption-text .public-outcome-delay {
  font-size: inherit;
  line-height: inherit;
}
.draft-11 .d11-design-options { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-11 .d11-design-options a { padding: 5px 8px; color: #a9bdd8; border: 1px solid transparent; border-radius: 6px; }
.draft-11 .d11-design-options a[aria-current="page"] { color: #b1d2ff; border-color: #385a83; background: #1b3150; }
.draft-11 .dc-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.draft-11 .dc-field-value { white-space: normal; overflow-wrap: anywhere; }
.draft-11 .d11-preview:last-child .dc-field-value { background: #24497840; border-radius: 3px; padding: 2px 5px; margin-left: -5px; }
.draft-11 .d11-public-link { grid-column: 1 / -1; }
.draft-11 .draft-main .btn.btn-spotlight { min-height: 56px; padding: 16px 24px; font-size: 16px; line-height: 1.4; justify-content: center; white-space: normal; text-align: center; }
.draft-11 .d11-hero-offer > .btn, .draft-11 .d11-final .btn { width: 100%; }
.draft-11 .d11-final > div:last-child { width: min(100%, 400px); }
.draft-11 .d11-availability { color: #80b8ff; font-size: 13px; font-weight: 600; line-height: 1.5; margin: 12px 0; text-align: center; }
.draft-11 .draft-actions { display: block; }
.draft-11 .draft-sticky[hidden] { display: none; }
.draft-11 .draft-sticky .btn { min-width: 240px; }
.draft-11 .draft-sticky .d11-availability { font-size: 12px; text-align: left; margin: 4px 0 0; }
.full-access-draft.draft-11 { padding-bottom: 0; }
@media (max-width: 760px) {
  .draft-11 .d11-preview { padding: 16px; }
  .draft-11 .d11-preview figcaption { flex-direction: column; align-items: start; }
  .draft-11 .d11-preview figcaption .d11-caption-text {
    width: 100%;
    font-size: 12px;
  }
  .draft-11 .draft-preview-bar > .container { flex-wrap: wrap; }
  .draft-11 .draft-sticky { padding: 8px 16px; gap: 12px; }
  .draft-11 .draft-sticky > div { flex: 1; min-width: 0; max-width: none; }
  .draft-11 .draft-sticky strong { display: none; }
  .draft-11 .draft-sticky .btn { flex: 0 0 auto; min-width: 0; max-width: 52%; font-size: 13px; padding: 10px 12px; min-height: 44px; }
  .draft-11 .draft-sticky .d11-availability { font-size: 12px; line-height: 1.4; }
}
@media (max-width: 500px) {
  .draft-11 .dc-fields { grid-template-columns: minmax(0, 1fr); }
}