/* Console preview and shared footer, using the homepage palette. */
.console-announcement {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 24px;
  border: 1px solid #c2cff1;
  background: var(--pale);
  padding: 8px 12px;
  color: var(--blue);
  font: 11px/1.5 var(--mono);
  text-decoration: none;
}
.console-announcement:hover { border-color: var(--blue); background: #e0e9ff; }
.console-announcement-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.console-announcement > span:last-child { margin-left: 6px; }
.console-section { padding: 80px 0; border-block: 1px solid var(--line); background: var(--paper); scroll-margin-top: 24px; }
.console-heading { margin-bottom: 36px; }
.console-heading h1 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1.08; letter-spacing: -.045em; }
.console-heading h1 > span { color: var(--blue); }
.console-page .console-section { border-block: 0; padding-top: 60px; }
.console-page .header nav a { display: inline-flex; }
.console-intro { justify-self: end; max-width: 370px; padding-bottom: 3px; }
.console-intro > p { font-size: 15px; line-height: 1.85; color: var(--muted); }
.console-intro > .console-availability { margin-top: 14px; color: var(--blue); font-size: 13px; font-weight: 600; }
.console-preview { border: 1px solid #b6c7ee; background: #eef3ff; }
.console-tabs { display: flex; align-items: center; gap: 30px; padding: 0 26px; border-bottom: 1px solid #c8d5ef; }
.console-tabs button { display: flex; align-items: center; gap: 25px; padding: 19px 0 17px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #526582; font-size: 14px; }
.console-tabs button span { font: 13px var(--mono); color: #526582; }
.console-tabs button[aria-selected=true] { color: var(--blue); border-bottom-color: var(--blue); }
.console-tabs button:hover { color: var(--blue); }
.console-sample-label { margin-left: auto; font: 11px/1.5 var(--mono); color: #526582; letter-spacing: .035em; }
.console-panel { padding: 22px 22px 24px; }
.console-panel-copy { display: flex; justify-content: space-between; gap: 28px; align-items: baseline; margin: 0 2px 18px; }
.console-panel-copy .small-label { color: #48658e; font-size: 12px; }
.console-panel-copy p { max-width: 520px; font-size: 13px; line-height: 1.75; color: #526582; text-align: right; }
.console-shot-link { display: block; border: 1px solid var(--line); background: var(--paper); line-height: 0; box-shadow: 0 10px 30px #17242b0d; cursor: zoom-in; }
.console-shot-link:hover { border-color: #8ba4e2; }
.console-shot-link:focus-visible { outline: 3px solid #6484ff; outline-offset: 5px; }
.console-shot-link img { display: block; width: 100%; height: auto; }
.console-preview-note { margin-top: 15px; font: 11px/1.8 var(--mono); color: var(--muted); }
@media (max-width: 1100px) {
  .console-intro { max-width: 335px; }
  .console-sample-label { display: none; }
}
@media (max-width: 760px) {
  .console-announcement { font-size: 10px; gap: 8px; padding: 8px 10px; margin-bottom: 20px; }
  .console-section { padding: 48px 0; scroll-margin-top: 12px; }
  .console-page .console-section { padding-top: 36px; }
  .console-page .header nav .console-how-link { display: none; }
  .console-heading { margin-bottom: 26px; }
  .console-intro { justify-self: start; max-width: 500px; padding: 0; }
  .console-intro > p { font-size: 14px; }
  .console-tabs { padding: 0 16px; gap: 25px; }
  .console-tabs button { font-size: 13px; gap: 13px; padding: 16px 0; }
  .console-panel { padding: 16px 10px 12px; }
  .console-panel-copy { display: block; margin: 0 4px 15px; }
  .console-panel-copy .small-label { font-size: 11px; }
  .console-panel-copy p { text-align: left; font-size: 12px; margin-top: 6px; }
  .console-preview-note { font-size: 10px; }
}

.footer { flex-wrap: wrap; }
.footer > .footer-legal {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.footer-legal a:hover { color: var(--blue); }