/* Hero only: the public navigation and lower sections keep their own styles. */
.hero { grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: 28px; padding: 44px 5vw 48px; max-width: 1380px; }
.hero-copy { padding: 14px 0; }
.hero-eyebrow { margin: 0 0 24px; color: #d94025; text-transform: uppercase; font-size: 12px; font-weight: 750; letter-spacing: .045em; }
.hero h1 { color: #101114; font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -.045em; line-height: 1.08; margin-bottom: 20px; }
.hero p.lead { font-size: 16px; line-height: 1.6; color: #737b91; max-width: 43ch; margin-bottom: 28px; }
.hero-ctas { gap: 12px; }
.hero-ctas .btn { border-radius: 9px; font-size: 13px; padding: 14px 19px; }
.hero-ctas .btn-primary { background: #e64c32; box-shadow: 0 5px 12px #dc49321a; }
.hero-ctas .btn-primary:hover { background: #c93923; }
.hero-ctas .btn-primary span { display: inline-block; margin-left: 18px; font-size: 21px; line-height: 12px; }
.hero-ctas .btn-outline { color: #d54029; border-color: #ef9e8e; }
.hero-note { color: #8a8e9c; font-size: 11px; margin-top: 17px; max-width: none; }
.hero-demo { position: relative; height: clamp(380px, 39vw, 510px); min-width: 0; overflow: hidden; border: 1px solid #eff0f3; border-radius: 18px; background: #fff; box-shadow: 0 10px 36px #24284204; }
.hero-model { position: absolute; inset: 16px 55px 20px 0; touch-action: pan-y; }
.hero-model canvas { display: block; cursor: grab; touch-action: pan-y !important; }
.hero-model canvas:active { cursor: grabbing; }
.hero-demo-fallback { position: absolute; width: 82%; height: 85%; left: 9%; top: 9%; object-fit: contain; pointer-events: none; }
.hero-demo.is-ready .hero-demo-fallback { display: none; }
.hero-demo-badge { position: absolute; top: 15px; left: 15px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid #eceef3; background: #fffffff2; box-shadow: 0 3px 9px #15213004; border-radius: 24px; font-size: 10px; color: #2c344c; pointer-events: none; }
.hero-demo svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-demo-badge svg, .hero-demo-controls svg { width: 18px; height: 18px; flex-shrink: 0; color: #f04c2f; }
.hero-demo-controls { position: absolute; z-index: 2; right: 13px; top: 15px; display: grid; gap: 22px; }
.hero-board-controls, .hero-motion-controls { display: grid; gap: 8px; }
.hero-demo-controls button { display: flex; align-items: center; gap: 9px; min-height: 37px; padding: 8px 12px; border: 1px solid #eceef3; border-radius: 11px; background: #fffffff2; color: #202940; font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.2; cursor: pointer; box-shadow: 0 4px 10px #15213005; }
.hero-demo-controls button:hover { border-color: #ef9e8e; }
.hero-demo-controls button[aria-pressed="true"] { border-color: #f0b4a7; background: #fffaf8; }
.hero-demo-controls button:disabled { cursor: wait; opacity: .5; }
.board-swatch { width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0; border: 1px solid #00000009; }
.board-swatch-white { background: linear-gradient(135deg, #fff, #e6e7eb); }
.board-swatch-kraft { background: linear-gradient(135deg, #d8b893, #b89373); }
.hero-demo-hint { position: absolute; bottom: 14px; left: 12px; right: 12px; text-align: center; margin: 0; font-size: 10px; color: #858b9b; pointer-events: none; }
.hero-turn-arrow { position: absolute; width: 76px; height: 76px; color: #a9adb7; pointer-events: none; }
.hero-turn-arrow-left { left: 5%; bottom: 15%; }
.hero-turn-arrow-right { right: 7%; bottom: 9%; }
@media(max-width: 1100px) { .hero { gap: 22px; padding-left: 4vw; padding-right: 4vw; } .hero-ctas .btn { padding: 13px 14px; font-size: 12px; } .hero-demo-controls button { padding: 8px; font-size: 10px; } }
@media(max-width: 800px) { .hero { grid-template-columns: 1fr; padding-top: 28px; gap: 24px; } .hero-copy { max-width: 600px; } .hero h1 { font-size: clamp(34px, 6vw, 48px); } .hero p.lead { max-width: 52ch; } .hero-demo { height: 470px; } }
@media(max-width: 480px) { .hero { padding: 26px 5vw 30px; } .hero-eyebrow { margin-bottom: 18px; font-size: 10px; } .hero h1 { font-size: clamp(28px, 8.2vw, 38px); } .hero p.lead { font-size: 14px; margin-bottom: 22px; } .hero-ctas { flex-direction: row; align-items: center; gap: 8px; } .hero-ctas .btn { font-size: 11px; padding: 13px 10px; } .hero-ctas .btn-primary span { margin-left: 7px; } .hero-note { font-size: 10px; } .hero-demo { height: 380px; } .hero-demo-badge { left: 9px; top: 11px; padding: 8px; font-size: 9px; gap: 5px; } .hero-demo-controls { right: 9px; top: 11px; gap: 18px; } .hero-demo-controls button { min-height: 38px; padding: 7px; font-size: 9px; gap: 5px; } .hero-model { inset: 30px -22px 10px; } .hero-turn-arrow { width: 55px; height: 55px; } }
@media(prefers-reduced-motion: reduce) { .hero .btn { transition: none; } }
/* Keep the controls clear of the printed lid on narrow screens. */
@media(max-width: 480px) {
  .hero-demo { height: 420px; }
  .hero-model { inset: 14px 6px 112px; }
  .hero-demo-controls { top: auto; bottom: 34px; left: 12px; right: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-demo-controls button { font-size: 10px; gap: 8px; min-height: 35px; }
  .hero-turn-arrow-left, .hero-turn-arrow-right { bottom: 32%; }
}