html { scroll-padding-top: 145px; }
.header .nav { min-height: 110px; }
.header .brand { flex: 0 1 344px; }
.header .brand img { max-height: none; }
.footer-brand { width: min(282px, 70%); }
.footer .wrap { align-items: center; }
.plan [hidden] { display: none; }

.hero { background: radial-gradient(ellipse at 80% 25%, #152f51, #0c1626 48%, #090d14 80%); }
.hero-grid { grid-template-columns: .8fr 1.2fr; min-height: 0; padding: clamp(38px, 6vw, 90px) 0; }
.hero h1 { font-size: clamp(2.75rem, 5.2vw, 5.3rem); }
.hero h1 span { color: var(--accent); }
.hero .lead { max-width: 30rem; }

.demo-console {
  min-width: 0;
  background: #101a28;
  border: 1px solid #3b6087;
  border-radius: 15px;
  box-shadow: 0 18px 45px #060a117d;
  overflow: hidden;
}
.console-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(#1a2e47, #142336);
  border-bottom: 1px solid #314b69;
}
.console-header h2 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); letter-spacing: -.035em; }
.console-header p, .console-note { color: var(--muted); font-size: .81rem; margin: 6px 0 0; }
.demo-options { display: flex; gap: 3px; padding: 3px; border: 1px solid #334e6c; border-radius: 8px; background: #0c1725; }
.demo-options button, .demo-rotate {
  min-height: 37px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: .79rem;
  white-space: nowrap;
}
.demo-options button[aria-pressed="true"] { background: #24547d; border-color: #497ba4; }
.demo-options button:hover, .demo-rotate:hover { background: #2b5275; }
.console-body { display: grid; grid-template-columns: minmax(98px, .6fr) minmax(0, 1.4fr); gap: 12px; padding: 14px 18px 0; }
.demo-inputs { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 7px; }
.demo-inputs label, #demo-sheet { color: var(--muted); font-size: .8rem; font-weight: 600; }
.demo-inputs input, .demo-inputs select, #demo-sheet select {
  display: block;
  width: 100%;
  min-height: 34px;
  margin-top: 2px;
  padding: 4px 7px;
  background: #0a121e;
  color: var(--text);
  border: 1px solid #415a79;
  border-radius: 5px;
  font: inherit;
  font-size: .9rem;
}
.console-preview { display: grid; grid-template-rows: auto minmax(170px, 1fr) auto; align-content: start; min-width: 0; }
.console-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding-bottom: 6px; }
.demo-rotate { border-color: #334e6c; }
#demo-drawing { width: 100%; height: 100%; min-height: 224px; background: #0a121e; border: 1px solid #304963; border-radius: 7px; }
#demo-sheet { margin-top: 5px; }
.console-status { margin: 12px 18px 0; color: var(--accent); font-size: .92rem; font-weight: 650; }
.console-status[data-error] { color: #ffd294; }
.console-note { padding: 0 18px 14px; }
.demo-console [hidden] { display: none !important; }

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: 12ch; }
  .hero-copy .lead { margin: 16px 0; }
  .header .brand { flex-basis: 288px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 16px; }
  .header { position: relative; }
  .header .nav { min-height: 0; }
  .header .brand { flex-basis: min(252px, 100%); }
  .hero-grid { padding: 32px 0; }
  .console-header { flex-wrap: wrap; padding: 13px; }
  .console-body { padding: 12px 13px 0; }
  .console-status { margin-inline: 13px; }
  .console-note { padding-inline: 13px; }
}
@media (max-width: 390px) {
  .console-body { grid-template-columns: minmax(0, 1fr); }
  .demo-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #demo-drawing { min-height: 190px; }
}