/* HAWK product page: builds on releases/release.css (header, typography, footer). */
.product-header { max-width:860px; padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,56px); }
.product-name { margin:0; max-width:none; font-size:clamp(46px,6vw,84px); font-weight:600; line-height:1; letter-spacing:-.04em; }

/* Two-panel animation, as wide as the releases' wide figures. */
.hawk-animation { width:min(1040px, calc(100vw - 48px)); margin:clamp(8px,2vw,24px) 0 0 50%; transform:translateX(-50%); }
.hawk-panels { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.hawk-panel { position:relative; aspect-ratio:4 / 3; margin:0; border:1px solid rgba(209,209,255,.45); border-radius:28px; overflow:hidden; background:var(--bg); isolation:isolate; }
.hawk-panel canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.hawk-foot { display:flex; align-items:flex-start; gap:32px; margin-top:16px; padding:0 4px; }
.hawk-foot p { flex:1; margin:0; font:14px/1.6 Arial,sans-serif; color:var(--muted); }
.hawk-controls { display:flex; align-items:center; gap:8px; flex:none; }
.hawk-controls button { font:12px/1 Arial,sans-serif; cursor:pointer; }
.hawk-toggle { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid rgba(209,209,255,.2); border-radius:999px; background:transparent; color:var(--quiet); }
.hawk-toggle::before { content:""; width:7px; height:7px; border-radius:50%; background:#eb5350; opacity:.35; }
.hawk-toggle[aria-pressed="true"] { border-color:#d1d1ff; color:#d1d1ff; }
.hawk-toggle[aria-pressed="true"]::before { opacity:1; }
.hawk-seg { display:inline-flex; border:1px solid rgba(209,209,255,.2); border-radius:999px; overflow:hidden; }
.hawk-seg button { padding:7px 9px; border:0; background:transparent; color:var(--quiet); }
.hawk-seg button[aria-pressed="true"] { background:#d1d1ff; color:var(--bg); }
.hawk-controls button:focus-visible { outline:1px solid #d1d1ff; outline-offset:3px; }
.hawk-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); border-radius:28px; transition:opacity .6s ease; }
.hawk-loading.done { opacity:0; pointer-events:none; }
.hawk-loading .bar { width:min(200px, 40%); height:2px; background:rgba(209,209,255,.2); border-radius:2px; overflow:hidden; }
.hawk-loading .bar span { display:block; height:100%; width:0; background:#d1d1ff; transition:width .2s ease; }

/* Overview: text font everywhere except titles */
.release-content .product-lead { margin-top:clamp(40px,6vw,64px); }
.release-content h2.section-title { display:block; margin:64px 0 18px; padding:0; border:0; font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.01em; }
.spec-list { margin:0; border-top:1px solid var(--line); }
.spec-list div { display:grid; grid-template-columns:200px 1fr; gap:24px; padding:13px 0; border-bottom:1px solid var(--line); font:15px/1.55 Arial,sans-serif; }
.spec-list dt { color:var(--muted); }
.spec-list dd { margin:0; color:var(--ink); }
.release-content .spec-note { margin:14px 0 0; font-size:13px; color:var(--quiet); }

/* Request a demo */
.demo { margin-top:64px; padding:clamp(28px,4vw,40px); border:1px solid rgba(209,209,255,.28); border-radius:28px; }
.release-content .demo h2.section-title { margin:0 0 6px; }
.release-content .demo > p { margin:0 0 24px; font-size:15px; color:var(--muted); }
.demo-form { display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
.demo-form label { display:flex; flex-direction:column; gap:8px; }
.demo-form .wide { grid-column:1 / -1; }
.demo-form label > span { font:13px/1.4 Arial,sans-serif; color:var(--muted); }
.demo-form input:not([type=checkbox]), .demo-form textarea { width:100%; padding:10px 0; border:0; border-bottom:1px solid rgba(209,210,255,.28); border-radius:0; color:var(--ink); background:transparent; font:16px/1.5 Arial,sans-serif; }
.demo-form textarea { resize:vertical; min-height:84px; }
.demo-form input:focus, .demo-form textarea:focus { outline:none; border-bottom-color:#d1d2ff; }
.demo-form .consent { flex-direction:row; align-items:flex-start; gap:10px; }
.demo-form .consent input { margin:3px 0 0; accent-color:#d1d2ff; }
.demo-form .consent span { font:13px/1.5 Arial,sans-serif; letter-spacing:0; text-transform:none; color:var(--quiet); }
.demo-form .trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.demo-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.demo-actions button, .demo-done button { padding:12px 22px; border:1px solid var(--ink); border-radius:16px; color:var(--bg); background:var(--ink); font:600 14px/1 Arial,sans-serif; cursor:pointer; }
.demo-actions button:hover { background:#d1d2ff; }
.demo-actions button:disabled { opacity:.5; cursor:progress; }
.release-content .demo-status { margin:0; font-size:14px; color:var(--muted); }
.release-content .demo-status[data-state="error"] { color:#ef8398; }
.demo-done[hidden], .demo-form[hidden] { display:none; }
.demo-done:focus { outline:none; }
.release-content .demo-done p { margin:0 0 22px; color:var(--ink); }
.demo-done button { color:var(--muted); background:none; border-color:var(--line); }

@media (max-width:760px) {
  .hawk-animation { width:100%; margin-left:0; transform:none; }
  .hawk-panels { grid-template-columns:1fr; gap:12px; }
  .hawk-panel, .hawk-loading { border-radius:22px; }
  .hawk-foot { flex-direction:column; gap:12px; }
  .spec-list div { grid-template-columns:1fr; gap:2px; }
  .demo-form { grid-template-columns:1fr; }
}
