/* Third product, in the existing Halloween visual language. */
.demo-pane[hidden], #product-checkout-form[hidden], #draw-highlight[hidden], #demo-play-toggle[hidden], .purchase-steps[hidden], .purchase-included[hidden], .payment-methods[hidden] { display: none !important; }
.draw-loading #features, .draw-loading #workflow, .draw-loading #free, .draw-loading #faq, .draw-loading #subtitle-update { display: none !important; }
.draw-loading .hero-benefits, .draw-loading .hero-reassurance, .draw-loading #product-free-button, .draw-loading #after-effects-chip, .draw-loading #product-eyebrow, .draw-loading .compatibility, .draw-loading .purchase-included, .draw-loading .purchase-steps, .draw-loading #buy-benefits, .draw-loading .checkout-delivery, .draw-loading .purchase-fit, .draw-loading .purchase-essentials, .draw-loading #bundle-offer, .draw-loading #buy-eyebrow, .draw-loading #checkout-label, .draw-loading .hero-demo-link, .draw-loading .purchase-value-label { display: none !important; }
.draw-no-script { padding: 28px; border: 1px solid #785033; color: #e3c3a6; line-height: 1.8; }
.draw-announcement { display: flex; align-items: center; gap: 16px; padding: 14px 22px; margin-top: 20px; border: 1px solid #694021; background: linear-gradient(100deg, #ff913e12, transparent 70%); color: #d9c7b3; font-size: 12px; text-decoration: none; }
.draw-announcement:hover { border-color: #ff913e; }
.draw-announcement-tag, .draw-announcement small { font: 10px/1.7 var(--mono); color: #d09f73; }
.draw-announcement-tag { padding: 3px 7px; background: #ff913e; color: #160d06; flex-shrink: 0; }
.draw-announcement strong { color: #ffb47c; letter-spacing: .06em; }
.draw-announcement small { margin-left: auto; text-align: right; }
.sales-page .product-switcher-track, .tool-guide-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sales-page .product-switch { min-width: 0; }
.sales-page .product-switch-copy { min-width: 0; }
.sales-page .product-switch-copy strong { font-size: clamp(10px, .92vw, 13px); }
.product-logo--draw { border-color: #92592f; background: linear-gradient(135deg, #ff913e21, #0b0907); }
.product-logo--draw b { color: #f1ece5; }
.product-logo--draw i { color: #ff913e; }
.draw-new-label { color: #ffb47c; font: 8px/1.5 var(--mono); }
.tools-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.tool-card { min-width: 0; padding: 28px; display: flex; flex-direction: column; text-decoration: none; color: #eee5db; border: 1px solid #42362c; background: #0c0b09cf; transition: border-color .2s, background .2s; }
.tool-card:hover, .tool-card[aria-current="true"] { border-color: #c97e47; background: #16110cd9; }
.tool-card--draw { border-color: #8b562e; background: radial-gradient(ellipse at 90% 0, #ff913e14, transparent 75%), #0c0b09cf; }
.tool-card-code { font: 10px/1.6 var(--mono); color: #a99179; letter-spacing: .1em; display: flex; justify-content: space-between; }
.tool-card-code i { font-style: normal; color: #ffae72; }
.tool-card > strong { font-size: clamp(18px, 1.65vw, 24px); margin-top: 24px; letter-spacing: -.025em; }
.tool-card > p { color: #bba996; font-size: 13px; line-height: 1.8; margin: 12px 0 26px; }
.tool-card-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 10px/1.8 var(--mono); color: #ffb37b; }
.tool-card-bottom b { font-weight: 400; }
.tools-pack-note { padding: 20px 0 0; margin-bottom: 0; font-size: 12px; line-height: 1.8; color: #a9947f; }
.tools-pack-note > span { font: 9px/1.8 var(--mono); color: #e2a97a; margin-right: 12px; }
.tools-pack-note a { color: #ffd0aa; text-underline-offset: 4px; margin-left: 12px; }
/* Draw has no text-demo sidebar: do not reserve Text's empty first column. */
.demo-showcase[data-demo-layout="draw"] { display: block; max-width: 960px; }
.demo-video-shell[data-demo-product="draw"] { display: block; overflow: visible; padding: 0; background: #090909; border-color: #6e452a; }
.demo-video-shell[data-demo-product="draw"] > .video-badge { display: none; }
.demo-pane--draw { padding: 0; min-width: 0; }
.draw-demo-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid #4b3525; font: 10px/1.7 var(--mono); color: #dbb798; letter-spacing: .07em; }
.draw-demo-top small { font: inherit; color: #958678; }
.draw-demo-stage { position: relative; isolation: isolate; aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 80% 70%, #71482625, transparent 60%), linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg,#ffffff05 1px, transparent 1px), #0d0d0d; background-size: auto, 36px 36px, 36px 36px, auto; overflow: hidden; }
.draw-demo-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.draw-demo-scene { position: absolute; inset: 0; padding: 14% 10%; display: flex; flex-direction: column; justify-content: center; }
.draw-demo-scene > span { font-weight: 800; font-size: clamp(30px, 5.5vw, 76px); line-height: 1.04; letter-spacing: -.055em; color: #f2e8dd; }
.draw-demo-scene em { font-style: normal; color: #8c7d6e; }
.draw-demo-scene > i { font: 9px/1.8 var(--mono); color: #7f7062; letter-spacing: .13em; margin-top: 20px; }
.draw-effect-controls { padding: 14px 18px; display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; border-block: 1px solid #4b3525; }
.draw-effect-controls button, #draw-demo-pause { min-height: 40px; border: 1px solid #50402f; background: #100d0b; color: #c3ad98; font: 10px/1.5 var(--mono); cursor: pointer; padding: 8px; }
.draw-effect-controls button:hover, .draw-effect-controls button[aria-pressed="true"] { color: #ffd4b2; border-color: #ff913e; background: #ff913e15; }
.draw-demo-foot { display: flex; align-items: center; gap: 24px; padding: 12px 22px; }
.draw-demo-foot p { font-size: 11px; line-height: 1.8; color: #9f8f7f; max-width: 720px; margin: 0; }
#draw-demo-pause { margin-left: auto; min-width: 94px; }
.draw-panel-preview { border-top: 1px solid #382b20; }
.draw-panel-preview summary { padding: 16px 22px; font-size: 12px; color: #cdb29c; cursor: pointer; display: flex; justify-content: space-between; }
.draw-panel-preview img { display: block; width: min(100%, 760px); height: auto; margin: 0 auto; border-top: 1px solid #3e2f23; }
.draw-highlight { padding: 30px; border: 1px solid #674127; background: radial-gradient(ellipse at 70% 80%, #ff913e20, transparent 65%), #0b0907; }
.draw-highlight > span { color: #bc8c62; font: 9px/1.8 var(--mono); letter-spacing: .16em; }
.draw-highlight > strong { display: block; font-size: clamp(24px, 3vw, 45px); line-height: 1.15; letter-spacing: -.04em; color: #ffb170; margin-top: 20px; }
.draw-highlight p { font-size: 12px; line-height: 1.8; color: #c0a88e; }
html[data-product="draw"] .sales-page .edition-matrix > div { grid-template-columns: minmax(0,1fr) minmax(85px, .2fr) minmax(85px,.2fr); }
html[data-product="draw"] .edition-matrix b { font: 11px/1.6 var(--mono); }
html[data-product="draw"] .product-availability { padding: 20px; margin-bottom: 0; color: #f0cda8; background: #ff913e0d; line-height: 1.8; }
html[data-product="draw"] .hero-update-badge { display: none; }
html[data-product="draw"] .payment-notice { display: none; }
html[data-product="draw"] .sales-page .hero { padding-bottom: 42px; }
a[aria-disabled="true"] { opacity: .48; cursor: default; }
.draw-release-update { margin: 28px 0; padding: 28px; border: 1px solid #785033; background: #ff913e0c; }
.draw-release-update > span { color: #ffb578; font: 10px/1.6 var(--mono); letter-spacing: .1em; }
.draw-release-update h2 { margin: 14px 0 12px; font-size: 28px; }
.draw-release-update p { color: #bba38b; line-height: 1.8; max-width: 760px; }
.draw-release-update a { color: #ffbe8e; text-underline-offset: 4px; }
@media (max-width: 1050px) {
  .sales-page .product-switcher-track, .tool-guide-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .draw-effect-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .draw-announcement small { display: none; }
  .tool-card { padding: 22px; }
  .tool-card-bottom { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  .draw-announcement { gap: 12px; padding: 12px 16px; font-size: 11px; line-height: 1.8; }
  .draw-announcement strong { display: block; }
  .tools-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-card { padding: 22px; }
  .tool-card > strong { margin-top: 14px; font-size: 23px; }
  .tool-card > p { margin-bottom: 16px; }
  .tools-pack-note > span { display: block; }
  .tools-pack-note a { display: inline-block; margin-left: 0; }
  .draw-demo-top { padding: 12px; font-size: 8px; letter-spacing: .02em; }
  .draw-demo-top small { display: none; }
  .draw-demo-scene > span { font-size: clamp(27px, 8vw, 52px); }
  .draw-demo-scene > i { font-size: 6px; margin-top: 10px; letter-spacing: .06em; }
  .draw-effect-controls { padding: 10px; gap: 6px; }
  .draw-effect-controls button { font-size: 8px; min-height: 40px; padding: 6px; }
  .draw-demo-foot { padding: 12px; gap: 10px; }
  .draw-demo-foot p { font-size: 9px; }
  #draw-demo-pause { min-width: 75px; font-size: 9px; }
  .draw-panel-preview summary { padding: 14px 12px; font-size: 10px; }
  html[data-product="draw"] .sales-page .edition-matrix > div { grid-template-columns: minmax(0,1fr) 65px 65px; }
  html[data-product="draw"] .edition-matrix b { font-size: 8px; padding: 8px 4px; }
  .draw-release-update { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: none; }
  html.product-switching .hero-title-wrap, html.product-switching .hero-lead, html.product-switching .hero-actions, html.product-switching [data-product-section], html.product-switching #features, html.product-switching #workflow, html.product-switching #buy { animation: none !important; }
}