/**
 * GridPilot AI design tokens — Faradon brand system (Archivo + IBM Plex Mono, ink on paper).
 * Change these variables to restyle the whole product.
 * Toggle dark with <html data-theme="dark">.
 */
:root {
  --gp-canvas: #f4f5f7;
  --gp-canvas-soft: #f4f5f7;
  --gp-ink: #101418;
  --gp-ink-muted: #6b7280;
  --gp-ink-faint: #a3a8b1;
  --gp-border: rgba(16, 20, 24, 0.1);
  --gp-border-strong: #d9dce1;
  --gp-surface: #ffffff;
  --gp-surface-2: #eef0f3;
  --gp-primary: #101418;
  --gp-primary-fg: #f4f5f7;
  --gp-focus: #4b6a94;
  --gp-danger: #b23a3a;
  --gp-danger-soft: #f8eded;
  --gp-warn: #8a6222;
  --gp-warn-soft: #f6f1e7;
  --gp-ok: #2f6b4f;
  --gp-ok-soft: #edf4f0;
  --gp-info-soft: #eef2f7;
  --gp-radius-pill: 9999px;
  --gp-radius-card: 8px;
  --gp-radius-input: 6px;
  --gp-font-sans: "Archivo", "Segoe UI", Helvetica, Arial, sans-serif;
  --gp-font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;
  --gp-max: 1120px;
}

[data-theme="dark"] {
  --gp-canvas: #101418;
  --gp-canvas-soft: #131820;
  --gp-ink: #f4f5f7;
  --gp-ink-muted: #9aa1ab;
  --gp-ink-faint: #5b626c;
  --gp-border: rgba(244, 245, 247, 0.12);
  --gp-border-strong: rgba(244, 245, 247, 0.24);
  --gp-surface: #161b21;
  --gp-surface-2: #1c222a;
  --gp-primary: #f4f5f7;
  --gp-primary-fg: #101418;
  --gp-focus: #7f9bc4;
  --gp-danger: #e08484;
  --gp-danger-soft: #3a2323;
  --gp-warn: #d1a55c;
  --gp-warn-soft: #362d1c;
  --gp-ok: #7fbf9c;
  --gp-ok-soft: #1c3128;
  --gp-info-soft: #1c2633;
}

html, body {
  background: var(--gp-canvas);
  color: var(--gp-ink);
  font-family: var(--gp-font-sans);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}

/* Headings: Archivo medium, tight tracking (Tailwind preflight resets weight, so beat its specificity). */
body h1, body h2, body h3 {
  font-weight: 600;
  letter-spacing: -0.03em;
}
body strong, body b {
  font-weight: 600;
}

/* The product logo is a square avatar (black ground, one light) — round its corners everywhere it appears. */
img[src*="logo.svg"], img[src*="logo-512.png"] {
  border-radius: 22%;
}

/* ---------------------------------------------------------------- nav (same as gridpilotai.co) */
.gp-wrap {
  width: min(1320px, calc(100% - clamp(1.25rem, 4vw, 3.5rem) * 2));
  margin-inline: auto;
}
.gp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  color: var(--gp-ink);
  background: rgba(244, 245, 247, 0.86);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--gp-border);
}
[data-theme="dark"] .gp-nav {
  background: rgba(16, 20, 24, 0.86);
}
.gp-nav-inner {
  width: min(1320px, calc(100% - clamp(1.25rem, 4vw, 3.5rem) * 2));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  height: 64px;
}
.gp-nav-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.gp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.gp-logo img {
  width: 28px;
  height: 28px;
}
.gp-nav-divider {
  width: 1px;
  height: 20px;
  background: currentColor;
  opacity: 0.25;
}
.gp-by {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.85;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}
.gp-by:hover {
  opacity: 1;
}
.gp-nav-links {
  display: flex;
  gap: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  opacity: 0.9;
}
.gp-nav-links a {
  position: relative;
  padding: 0.25rem 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.gp-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gp-nav-links a:hover::after,
.gp-nav-links a.is-active::after {
  transform: scaleX(1);
}
.gp-nav-actions {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}
@media (max-width: 860px) {
  .gp-nav-links,
  .gp-by,
  .gp-nav-divider {
    display: none;
  }
}

/* Chat entry */
.chat-composer {
  box-shadow: 0 1px 2px rgba(16, 20, 24, 0.04), 0 8px 24px -16px rgba(16, 20, 24, 0.25);
}
.chat-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 20px;
}
.chat-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gp-ink-muted);
  animation: chat-dot 1.1s ease-in-out infinite;
}
.chat-dots i:nth-child(2) { animation-delay: 0.15s; }
.chat-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

/* Hero mark on the chat screen: settles in, then a light sweeps across the facet */
.mark-hero {
  filter: drop-shadow(0 14px 24px rgba(16, 20, 24, 0.28));
  animation: mark-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  transform-origin: 50% 50%;
}
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.88) translateY(6px); }
  to { opacity: 1; transform: none; }
}
svg[data-brand-mark] {
  filter: drop-shadow(0 14px 24px rgba(16, 20, 24, 0.28));
}

/* AI theme: one gradient for everything the assistant touches */
:root {
  --gp-ai-a: #3d6ba8;
  --gp-ai-b: #5b57be;
  --gp-ai-c: #7a70cf;
  --gp-ai-grad: linear-gradient(135deg, var(--gp-ai-a) 0%, var(--gp-ai-b) 60%, var(--gp-ai-c) 100%);
  /* film grain, blended over the gradient surfaces */
  --gp-ai-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ai-text {
  background: var(--gp-ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-chip {
  color: #5b57be;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(var(--gp-surface), var(--gp-surface)) padding-box, var(--gp-ai-grad) border-box;
  font-family: var(--gp-font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ai-file {
  position: relative;
  background: var(--gp-ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ai-file::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  border-bottom: 1px dashed rgba(91, 87, 190, 0.7);
}
.ai-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(59, 108, 255, 0.1), rgba(123, 63, 242, 0.06) 55%, rgba(255, 92, 168, 0.03) 85%, transparent);
}
.ai-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 2px;
  border-radius: 2px;
  background: var(--gp-ai-grad);
}
.ai-bar {
  position: relative;
  background: var(--gp-ai-grain), var(--gp-ai-grad);
  background-blend-mode: soft-light, normal;
}
.ai-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: ai-sheen 1.8s ease-in-out infinite;
}
@keyframes ai-sheen {
  to { transform: translateX(100%); }
}
.ai-shimmer {
  background: linear-gradient(90deg, var(--gp-ink) 0%, var(--gp-ai-b) 40%, var(--gp-ai-c) 55%, var(--gp-ink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ai-shimmer 2s linear infinite;
}
@keyframes ai-shimmer {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
.ai-ring-dot {
  position: relative;
  display: inline-block;
  border-radius: 999px;
}
.ai-ring-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0 62%, var(--gp-ai-c) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ai-spin 1.1s linear infinite;
}
.ai-ring-dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  background: var(--gp-ai-grad);
}
@keyframes ai-spin {
  to { transform: rotate(360deg); }
}
.checks-banner summary::-webkit-details-marker { display: none; }
.checks-banner .checks-toggle-open { display: none; }
.checks-banner[open] .checks-toggle-open { display: inline; }
.checks-banner[open] .checks-toggle-closed { display: none; }
.checks-banner .checks-chevron { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.checks-banner[open] .checks-chevron { transform: rotate(180deg); }

/* Selects: no native chrome; a Lucide chevron on the right, same focus as inputs */
.gp-select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23101418' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.gp-select:focus {
  outline: none;
}
.gp-select option {
  font-family: var(--gp-font-sans);
  padding: 6px 10px;
}

/* Hover explanation on the AI mark: the tip is anchored to the field, so it never grows past it */
.ai-tip::after {
  content: attr(data-tip);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  width: max-content;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--gp-ink);
  color: var(--gp-primary-fg);
  font-family: var(--gp-font-sans);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ai-tip::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: calc(100% + 3px);
  border: 5px solid transparent;
  border-top-color: var(--gp-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.ai-tip:has(> .ai-mark:hover)::after,
.ai-tip:has(> .ai-mark:hover)::before {
  opacity: 1;
  transform: none;
}

/* A field the assistant is filling in / has just filled */
.ai-filling {
  border-color: var(--gp-ai-b) !important;
  box-shadow: 0 0 0 3px rgba(91, 87, 190, 0.16) !important;
}
.ai-filled {
  animation: ai-filled 1.4s ease-out;
}
@keyframes ai-filled {
  0% { background-color: rgba(91, 87, 190, 0.18); }
  100% { background-color: transparent; }
}

/* Packet sections: collapsed by default */
.packet-section summary::-webkit-details-marker { display: none; }
.packet-section .packet-toggle-open { display: none; }
.packet-section[open] .packet-toggle-open { display: inline; }
.packet-section[open] .packet-toggle-closed { display: none; }
.packet-section .packet-chevron { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.packet-section[open] .packet-chevron { transform: rotate(180deg); }

/* Intake sections: collapsible */
.intake-section summary::-webkit-details-marker { display: none; }
.intake-section .intake-chevron { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.intake-section[open] .intake-chevron { transform: rotate(180deg); }

/* State changes animate in place before the page repaints */
.checks-banner,
.intake-section,
.approve-banner,
.approve-banner .rounded-card {
  transition: background-color 0.6s ease, border-color 0.6s ease;
}
.approve-banner.is-ok {
  background-color: var(--gp-ok-soft) !important;
  border-color: rgba(47, 107, 79, 0.4) !important;
  border-left-color: var(--gp-ok) !important;
}
.approve-banner .rounded-card.is-ok {
  border-color: rgba(47, 107, 79, 0.3) !important;
}
.checks-banner.is-ok {
  background-color: var(--gp-ok-soft) !important;
  border-color: rgba(47, 107, 79, 0.4) !important;
  border-left-color: var(--gp-ok) !important;
}
.intake-section.is-ok {
  border-color: var(--gp-border) !important;
}

/* AI progress pattern */
.ai-orb {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--gp-ai-grain), var(--gp-ai-grad);
  background-blend-mode: soft-light, normal;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 18px -8px rgba(91, 87, 190, 0.55);
}
.ai-orb::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 999px;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(122, 112, 207, 0.9) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ai-spin 1.6s linear infinite;
}
.checks-banner .ai-orb::before { display: none; }
.ai-orb::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 1.5px solid var(--gp-ai-b);
  animation: ai-ring 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.checks-banner .ai-orb::after { display: none; }
@keyframes ai-ring {
  0% { transform: scale(0.85); opacity: 0.55; }
  100% { transform: scale(1.3); opacity: 0; }
}
.ai-pulse {
  animation: ai-pulse 1.1s ease-in-out infinite;
}
@keyframes ai-pulse {
  50% { opacity: 0.3; transform: scale(0.8); }
}

/* Chat motion */
.chat-hidden {
  opacity: 0;
  transform: translateY(6px);
}
.chat-reveal {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.chat-in {
  animation: chat-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes chat-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.chat-cursor::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: chat-blink 1s steps(1) infinite;
}
@keyframes chat-blink {
  50% { opacity: 0; }
}
.chip-pop {
  animation: chip-pop 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes chip-pop {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Accent panel (kept for dark feature surfaces) */
.gp-accent-panel {
  background:
    radial-gradient(110% 80% at 50% 110%, rgba(91, 124, 255, 0.45), transparent 60%),
    linear-gradient(180deg, #101418 0%, #0a0d11 100%);
}

@keyframes gp-spin {
  to { transform: rotate(360deg); }
}
.gp-spin {
  animation: gp-spin 0.8s linear infinite;
}

@keyframes gp-progress {
  from { width: 8%; }
  to { width: 92%; }
}
.gp-audit-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gp-focus) 18%, transparent);
}
.gp-audit-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--gp-focus);
  animation: gp-progress 3s ease-in-out forwards;
}

@keyframes gp-drawer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes gp-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gp-drawer-panel {
  animation: gp-drawer-in 0.28s cubic-bezier(0.32, 0.72, 0.24, 1) both;
}
.gp-drawer-backdrop {
  animation: gp-fade-in 0.2s ease-out both;
}
.gp-drawer-panel.closing {
  animation: gp-drawer-in 0.2s cubic-bezier(0.32, 0.72, 0.24, 1) reverse both;
}
.gp-drawer-backdrop.closing {
  animation: gp-fade-in 0.2s ease-out reverse both;
}

/* Quick Demo only: a larger, live filing journey. */
.qk-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; align-items:start; }
.qk-progress { padding:26px 24px 22px; border:1px solid #dfe7e2; border-radius:18px; background:linear-gradient(155deg,#f4fbf7 0%,#fff 42%); box-shadow:0 8px 32px #173e2d06; position:sticky; top:92px; }
.qk-progress-top { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.qk-progress-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:12px; background:#e1f1e8; color:#2d6a50; }
.qk-progress-mark svg { width:20px; height:20px; }
.qk-progress-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.12em; color:#547363; }
.qk-progress h2 { font-size:28px; line-height:1.14; letter-spacing:-1px; font-weight:500; color:#183d2c; margin:0 0 26px; }
.qk-progress-summary { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; color:#6a7c71; font-size:12px; }
.qk-progress-summary strong { font-size:36px; line-height:1; letter-spacing:-1.5px; color:#256348; font-weight:500; font-variant-numeric:tabular-nums; }
.qk-progress-summary strong small { font-size:17px; margin-left:2px; }
.qk-progress-track { height:16px; border-radius:20px; background:#e7f0ea; overflow:hidden; position:relative; }
.qk-progress-track > span { display:block; height:100%; background:linear-gradient(90deg,#286749,#45a478); border-radius:20px; transition:width .65s ease; }
.qk-progress-track > i { position:absolute; top:0; height:100%; background:linear-gradient(90deg,#72cc9e55,#72cc9edd,#72cc9e55); background-size:200% 100%; animation:qk-flow 1.8s linear infinite; border-radius:0 20px 20px 0; }
.qk-progress-status { color:#386b51; font-size:13px; min-height:20px; margin:12px 0 24px; }
.qk-stages { list-style:none; padding:0; margin:0; }
.qk-stage { position:relative; display:flex; align-items:center; gap:12px; min-height:72px; padding:10px 0; color:#87938b; }
.qk-stage:not(:last-child)::after { content:''; position:absolute; left:17px; top:53px; bottom:-18px; width:2px; background:#e9eeea; }
.qk-stage.is-done::after { background:#87ba9e; }
.qk-stage-icon { position:relative; z-index:1; flex-shrink:0; display:grid; place-items:center; width:36px; height:36px; border:1px solid #dfe7e2; border-radius:50%; background:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px; }
.qk-stage-icon svg { width:18px; height:18px; }
.qk-stage-copy { flex:1; min-width:0; }
.qk-stage-copy strong { display:block; font-size:16px; font-weight:500; }
.qk-stage-copy small { display:block; margin-top:3px; font-size:11px; line-height:1.4; }
.qk-stage.is-current { color:#1b4832; }
.qk-stage.is-current .qk-stage-icon { border:2px solid #38805c; background:#e7f5ec; box-shadow:0 0 0 5px #edf7f0; }
.qk-stage.is-done { color:#3c7555; }
.qk-stage.is-done .qk-stage-icon { color:#fff; background:#347553; border-color:#347553; animation:qk-check-in .3s ease-out; }
.qk-stage-tag { font-size:9px; font-weight:500; padding:4px 6px; border-radius:6px; background:#e5f3ea; color:#367652; }
.qk-stage-done { font-size:10px; color:#6c947c; }
.qk-progress-activity { display:flex; gap:10px; margin-top:22px; padding:14px; border-radius:12px; background:#f3f7f4; min-height:94px; }
.qk-activity-dot { flex-shrink:0; width:7px; height:7px; margin-top:6px; background:#85a491; border-radius:50%; }
.qk-progress-activity strong { color:#345642; font-size:12px; font-weight:500; }
.qk-progress-activity p { font-size:11px; line-height:1.6; color:#78877d; margin:4px 0 0; }
.qk-progress-activity.is-working .qk-activity-dot { background:#3c9668; animation:qk-pulse 1.6s ease-in-out infinite; }
@keyframes qk-flow { to { background-position:-200% 0; } }
@keyframes qk-pulse { 50% { box-shadow:0 0 0 5px #3c966820; opacity:.65; } }
@keyframes qk-check-in { from { transform:scale(.8); } to { transform:scale(1); } }
@media (max-width:1100px) and (min-width:901px) { .qk-layout { grid-template-columns:280px minmax(0,1fr); gap:18px; } .qk-progress { padding:22px 18px; } }
@media (max-width:900px) { .qk-layout { grid-template-columns:minmax(0,1fr); gap:16px; } .qk-progress { position:static; padding:20px; } .qk-progress-top { margin-bottom:10px; } .qk-progress h2 { font-size:24px; margin-bottom:14px; } .qk-progress h2 br { display:none; } .qk-progress h2 br::after { content:' '; } .qk-progress-status { margin-bottom:8px; } .qk-stages { display:flex; gap:6px; } .qk-stage { flex:1; min-width:0; flex-direction:column; gap:8px; text-align:center; min-height:0; } .qk-stage:not(:last-child)::after { top:27px; left:calc(50% + 22px); right:calc(-50% + 16px); bottom:auto; height:2px; width:auto; } .qk-stage-copy strong { font-size:11px; } .qk-stage-copy small,.qk-stage-tag,.qk-stage-done,.qk-progress-activity { display:none; } }
@media (prefers-reduced-motion:reduce) { .qk-progress *, .qk-progress *::after { animation:none!important; transition:none!important; } }

/* Quick Demo frame: brand, toolbar and workspace share one rounded surface. */
body:has(.qk-app-frame) { background:#e4e8f3; }
.qk-app-frame { display:flex; flex-direction:column; width:calc(100% - 40px); max-width:1500px; min-height:calc(100vh - 40px); margin:20px auto; background:#f8f9fb; border:1px solid #d9dee9; border-radius:22px; overflow:clip; box-shadow:0 12px 48px #2839510a; }
.qk-app-frame > .gp-nav { position:relative; top:auto; background:#fbfbfd; border-bottom:1px solid #e6e8ee; backdrop-filter:none; }
.qk-app-frame .gp-nav-inner { max-width:none; width:100%; padding:0 26px; min-height:66px; }
.qk-app-frame .gp-logo { gap:10px; font-size:22px; }
.qk-app-frame .gp-logo img { width:27px; height:27px; }
.qk-app-frame .gp-nav-links a { font-size:13px; }
.qk-app-frame > main.gp-wrap { width:100%; max-width:none; padding:24px; }
.qk-app-frame .qk-layout > section { height:calc(100vh - 156px); min-height:580px; border-radius:16px; }
.qk-app-frame .qk-progress { top:24px; }
@media (max-width:900px) { .qk-app-frame { width:calc(100% - 20px); margin:10px auto; min-height:calc(100vh - 20px); border-radius:18px; } .qk-app-frame .gp-nav-inner { padding:0 16px; } .qk-app-frame > main.gp-wrap { padding:16px; } }
@media (max-width:540px) { .qk-app-frame .gp-logo { font-size:18px; gap:7px; } .qk-app-frame .gp-logo img { width:23px; height:23px; } .qk-app-frame .gp-nav-inner { padding:0 12px; gap:8px; } .qk-app-frame .gp-nav-actions { gap:6px; } .qk-app-frame .gp-nav-actions > * { padding-left:8px; padding-right:8px; font-size:11px; } .qk-app-frame > main.gp-wrap { padding:12px; } }

/* Website controls sit outside the clean frame used for recording. */
.qk-site-toolbar { width:calc(100% - 40px); max-width:1500px; margin:0 auto; min-height:64px; padding:10px 4px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.qk-site-label { color:#53606b; font-size:13px; font-weight:500; text-decoration:none; }
.qk-site-actions { display:flex; align-items:center; gap:10px; }
.qk-site-toolbar + .qk-app-frame { margin-top:0; min-height:calc(100vh - 84px); }
.qk-site-toolbar + .qk-app-frame .qk-layout > section { height:calc(100vh - 200px); }
@media (max-width:900px) { .qk-site-toolbar { width:calc(100% - 20px); min-height:58px; padding:8px 4px; } .qk-site-toolbar + .qk-app-frame { min-height:calc(100vh - 68px); } }
@media (min-width:901px) and (max-height:1000px) {
  .qk-app-frame .qk-progress { padding-top:20px; padding-bottom:18px; }
  .qk-app-frame .qk-progress h2 { margin-bottom:20px; }
  .qk-app-frame .qk-progress-status { margin-bottom:14px; }
  .qk-app-frame .qk-stage { min-height:60px; }
  .qk-app-frame .qk-stage:not(:last-child)::after { top:48px; bottom:-12px; }
  .qk-app-frame .qk-progress-activity { margin-top:16px; min-height:78px; }
}

/* Demo mode links remain available on narrow screens. */
.gp-demo-switch { display:flex; align-items:center; flex-wrap:wrap; gap:6px; font-size:13px; }
.gp-demo-switch a { padding:7px 10px; border:1px solid transparent; border-radius:6px; color:var(--gp-ink-muted); white-space:nowrap; text-decoration:none; }
.gp-demo-switch a:hover { color:var(--gp-ink); border-color:var(--gp-border); }
.gp-demo-switch a[aria-current="page"] { color:var(--gp-ink); background:var(--gp-canvas-soft); border-color:var(--gp-border); }
@media (max-width:700px) {
  .gp-demo-nav .gp-nav-inner { flex-wrap:wrap; padding-top:12px; padding-bottom:12px; gap:10px; }
  .gp-demo-nav .gp-nav-brand { flex:1; }
  .gp-demo-nav .gp-demo-switch { order:3; flex-basis:100%; justify-content:center; }
  .gp-demo-nav .gp-nav-actions { gap:4px; }
  .gp-demo-nav .gp-nav-actions > * { padding-left:8px; padding-right:8px; font-size:11px; }
  .qk-site-toolbar { flex-wrap:wrap; justify-content:center; gap:6px; }
  .qk-site-actions { gap:6px; }
}

/* Keep the Guided packet readable when its action buttons wrap on phones. */
@media (max-width:639px) {
  .gp-guided-packet .gp-packet-ready { display:grid; grid-template-columns:36px minmax(0,1fr); align-items:start; gap:12px; }
  .gp-guided-packet .gp-packet-ready > a { grid-column:1 / -1; width:100%; justify-content:center; }
  .gp-guided-packet .gp-packet-checklist-cells { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
  .gp-guided-packet .gp-packet-file-section > summary { display:grid; grid-template-columns:20px minmax(0,1fr) auto; column-gap:10px; row-gap:8px; }
  .gp-guided-packet .gp-packet-file-section > summary > :nth-child(2) { grid-column:2 / -1; }
  .gp-guided-packet .gp-packet-file-section > summary > a { grid-column:2; justify-self:start; }
  .gp-guided-packet .gp-packet-file-section > summary > :last-child { grid-column:3; justify-self:end; }
  .gp-guided-packet .gp-packet-doc-row { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; padding-top:12px; padding-bottom:12px; }
  .gp-guided-packet .gp-packet-doc-row > :nth-child(1),
  .gp-guided-packet .gp-packet-doc-row > :nth-child(2) { grid-column:1 / -1; }
  .gp-guided-packet .gp-packet-doc-row > :nth-child(1) .truncate { white-space:normal; overflow-wrap:anywhere; }
  .gp-guided-packet .gp-packet-doc-row > :nth-child(2) { white-space:normal; overflow-wrap:anywhere; }
}

/* Shared interactive drawing canvas for the chat demos. */
.gp-opensld-frame { display: block; width: 100%; height: 480px; border: 0; background: #fff; }
@media (max-width: 640px) { .gp-opensld-frame { height: 390px; } }