/*
 * RackMapper-EP — homepage prototype styles
 * -----------------------------------------------------------------------
 * Design language target: premium commercial software (Linear / Figma /
 * Notion / Stripe / Framer-tier marketing pages) — confident large type,
 * generous whitespace, restrained shadows and a single accent colour
 * doing the work, rather than a boxed-in "admin template" look.
 *
 * v2 polish pass: same structure, same theme system, same typefaces,
 * same buttons/nav/feature-card set as v1 — this file only refines
 * spacing, hierarchy, the hero mock-up, the professionals section, and
 * adds tasteful motion. Nothing here changes what the page is made of,
 * only how it feels.
 *
 * Everything reads from css/tokens.css custom properties only — no
 * hard-coded colours — so the dark/violet and light/orange themes stay
 * two data states of one markup, never two stylesheets.
 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Top-nav anchor targets (Product/Workflow Help/Help) — the sticky .nav
   below would otherwise cover each section's own heading the instant a
   smooth-scroll anchor jump lands, since scrolling stops exactly at the
   target's top edge. */
#product, #workflow, #help { scroll-margin-top: calc(var(--nav-height) + var(--space-5)); }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--duration-med) var(--ease-out), color var(--duration-med) var(--ease-out);
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); }

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.15em;
  flex: none;
}

.accent-text { color: var(--accent); }

/* ---------------------------------------------------------------------
   Scroll reveal (progressive enhancement — see js/reveal.js)
--------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Stagger feature cards and capability points by DOM order so they settle
   in one after another rather than all at once. */
.feature-card.reveal:nth-child(1) { transition-delay: 0ms; }
.feature-card.reveal:nth-child(2) { transition-delay: 70ms; }
.feature-card.reveal:nth-child(3) { transition-delay: 140ms; }
.feature-card.reveal:nth-child(4) { transition-delay: 210ms; }
.feature-card.reveal:nth-child(5) { transition-delay: 280ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* ---------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95em;
  border-radius: var(--radius-pill);
  padding: 13px 24px;
  min-height: 44px;               /* touch target */
  border: 1px solid transparent;
  cursor: default;                /* placeholder-only in this prototype */
  white-space: nowrap;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.btn .icon { width: 0.9em; height: 0.9em; transition: transform var(--duration-fast) var(--ease-out); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Generic visible-focus fallback for plain links (nav, footer, and the
   legal pages' body copy) that don't already have their own bespoke
   :focus-visible treatment above — keeps keyboard focus visible and
   on-brand everywhere, rather than relying on each browser's own
   default outline. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.btn-sm { padding: 9px 18px; min-height: 36px; font-size: 0.86em; }
.btn-lg { padding: 16px 30px; font-size: 1.02em; }

.btn-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, var(--shadow-sm);
}
.btn-accent:hover {
  box-shadow: var(--shadow-accent), 0 1px 0 rgba(255, 255, 255, 0.12) inset;
  transform: translateY(-2px);
}
.btn-accent:hover .icon { transform: translateX(2px); }
.btn-accent:active { transform: translateY(0) scale(0.97); }

.btn-ghost {
  background: var(--bg-elevated);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.btn-ghost:active { transform: translateY(0) scale(0.97); }

/* Destructive actions (Delete Project, and its confirm dialog) — the
   same red already used for .context-menu-danger/.canvas-inspector-delete
   elsewhere in the app, now available as a real button variant. */
.btn-danger { background: rgba(220, 38, 38, 0.12); color: #dc2626; border-color: rgba(220, 38, 38, 0.35); }
.btn-danger:hover { background: rgba(220, 38, 38, 0.18); border-color: #dc2626; transform: translateY(-2px); }
.btn-danger:active { transform: translateY(0) scale(0.97); }

/* ---------------------------------------------------------------------
   Nav
--------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-7);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.08em;
  letter-spacing: 0.01em;
}
/* Colour-split wordmark ("Rack" neutral, "ulate" accent) to match the
   Rackulate logo lockups — both words share the same weight, only the
   accent colour differentiates "ulate", same treatment already used by
   .app-sidebar-brand-word in app-canvas.css. */
.brand-word strong { color: var(--accent); font-weight: 700; }
.brand-word { font-weight: 700; }
/* Fixed-pixel slot, not font-size/em-relative — deliberately independent
   of any inherited font-size cascade so the mark can never be sized off
   an unexpected computed value. 24x24 header/footer default; the
   compact sidebar override lives next to app-sidebar-brand-link in
   css/app-canvas.css. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  overflow: hidden;
  filter: drop-shadow(0 0 10px var(--accent-soft));
}
.brand-sm { font-size: 0.95em; }

/* Real Rackulate mark (rack-frame "R"), swapped per theme: the purple
   render for dark mode, the orange render for light mode. Both PNGs keep
   their own native proportions (they aren't identically framed) — the
   HTML width/height attributes on each <img> just reserve the slot
   before CSS/the image loads (never used for actual layout, since this
   rule always overrides them); object-fit:contain does the real
   proportion-preserving scale-to-fit, so neither mark is stretched to
   match the other. Same [data-theme] convention as the rest of the
   theme system (see css/tokens.css). Applies everywhere .brand-mark is
   used: header nav, footer, and the compact sidebar/nav lockup
   (app-sidebar-brand, styled in css/app-canvas.css). */
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-mark .logo-mark-light { display: none; }
html[data-theme="light"] .brand-mark .logo-mark-dark { display: none; }
html[data-theme="light"] .brand-mark .logo-mark-light { display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-right: auto;
  margin-left: var(--space-2);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--text-muted);
}
.nav-links a { position: relative; padding: var(--space-1) 0; transition: color var(--duration-fast) var(--ease-out); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1.5px;
  background: var(--accent);
  transition: right var(--duration-med) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { right: 0; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.05em;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-med) var(--ease-out);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); transform: rotate(24deg); }

/* ---------------------------------------------------------------------
   Hero
   ----------------------------------------------------------------------
   The application preview is the hero, not a mockup illustrating it —
   so the copy above it is deliberately compact and centred (a short
   headline + one primary action, the way Linear/Stripe/Framer-tier
   product pages introduce the screenshot that follows), and the
   preview itself runs in its own wider stage rather than being boxed
   into a half-width grid column next to the text. */
.hero {
  position: relative;
  padding: var(--space-7) 0 var(--space-8);
  overflow: clip;
}
.hero-glow {
  position: absolute;
  inset: -15% -10% auto -10%;
  height: 720px;
  background:
    radial-gradient(720px 460px at 16% 12%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 65%),
    radial-gradient(560px 400px at 88% 6%, color-mix(in srgb, var(--graphic-2) 15%, transparent), transparent 60%),
    radial-gradient(900px 500px at 50% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: glowDrift var(--glow-duration) ease-in-out infinite alternate;
}
@keyframes glowDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(2%, 1.5%) scale(1.04); opacity: 0.85; }
}

/* Hero inner — a premium left-copy / right-product split. Deliberately
   wider than the rest of the page's 1200px .wrap content column so the
   application preview gets real room to breathe; the copy column stays
   narrow and readable while the product does the selling on the right.
   Collapses back to the previous stacked, centred layout at laptop
   width and below (see the responsive block). */
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1960px;
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}

.hero-copy { max-width: 46ch; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-5);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.hero-title {
  font-size: clamp(2.2em, 3.1vw, 3.1em);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-6);
}

.hero-lede {
  font-size: 1.18em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 var(--space-4);
}

.hero-sub {
  font-size: 1em;
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0 0 var(--space-7);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* ---- hero visual: one genuine application preview, nothing floating ----
   The product is the hero. No stat cards, no secondary chips, no
   decorative widgets layered on top — a single panel modelled directly
   on RM Layout's real screen: window chrome, the same 3-step project
   wizard, a vertical grouped tool rail (Select / View — the live app's
   own grouping and icon-over-label button anatomy), a dimensioned
   warehouse plan with real racking and CAD-style HUD chips, a real
   layers list, and the app's actual "3D View" / "Send to RM Install"
   actions. Nothing here is invented UI — it's the existing RackMapper
   design language, evolved into a cleaner, more premium version. */
.hero-stage { position: relative; z-index: 1; min-width: 0; }
.hero-visual {
  position: relative;
  perspective: 2200px;
}

/* A restrained 3D tilt — the preview sits at a slight angle, like a
   real screen caught at a natural viewing perspective, then gently
   straightens and lifts toward the viewer on hover. Gated to pointers
   that can actually hover (desktop/trackpad); touch devices and the
   stacked tablet/mobile layout below just get the flat, settled
   preview, since there's no hover state to straighten from. */
.app-preview {
  position: relative;
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
@media (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .app-preview {
    transform: rotateY(-7deg) rotateX(2.5deg) scale(0.97);
    transform-origin: 50% 50%;
  }
  .hero-visual:hover .app-preview {
    transform: rotateY(-1.5deg) rotateX(0.5deg) scale(1) translateY(-4px);
    box-shadow: var(--shadow-xl), var(--shadow-accent);
  }
}
@media not all and (min-width: 1181px) and (hover: hover) and (pointer: fine) {
  .hero-visual:hover .app-preview {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl), var(--shadow-accent);
  }
}

/* Window chrome. The drawing-tool row that used to live here was an
   invented toolbar — the real RM Layout keeps its tools in the vertical
   rail below, so the topbar now only carries what the real nav keeps
   up top: a project-status pill and the Save action. */
.app-preview-topbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated-2);
}
.app-preview-window-dots { display: flex; align-items: center; gap: 6px; }
.mock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
}
.app-preview-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.78em;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
}
.app-preview-suite {
  font-size: 0.85em;
  font-weight: 500;
  opacity: 0.7;
}
.app-preview-topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}
.mini-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.mini-status-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
  font-size: 0.85em;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

/* 3-step project wizard — the same Setup / Racking / Layout progression
   the real app steps through, shown mid-flight on step 3, which is
   exactly where this diagram screen lives. */
.app-preview-wizard {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.wizard-mini-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.6em;
  font-weight: 700;
  background: var(--bg-sunken);
  border: 1.5px solid var(--border-strong);
  color: var(--text-faint);
  flex: none;
}
.wizard-mini-step.wizard-mini-done {
  background: var(--bg-elevated-2);
  color: var(--text-muted);
}
.wizard-mini-step.wizard-mini-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.wizard-mini-line {
  width: 16px;
  height: 2px;
  background: var(--border-strong);
  flex: none;
}
.wizard-mini-label {
  font-size: 0.68em;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 4px;
  white-space: nowrap;
}

/* Project bar — sits between the wizard and the canvas, exactly where a
   real app would show which project is open and whether it's saved.
   Not a floating card: it's a full-width strip inside the same panel,
   styled quieter than the topbar so it reads as information, not
   another row of controls. */
.app-preview-projectbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.app-preview-project-id {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.app-preview-project-label {
  font-size: 0.68em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.app-preview-project-name {
  font-family: var(--font-display);
  font-size: 0.82em;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.66em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.app-preview-saved {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7em;
  font-weight: 500;
  color: var(--text-faint);
  white-space: nowrap;
}
.app-preview-saved .icon { color: var(--accent); width: 0.95em; height: 0.95em; }

.app-preview-body {
  display: flex;
  min-height: 460px;
}

/* Vertical grouped tool rail — Select / Add / Measure / View, the same
   component racking.html and warehouse.html use for their real drawing
   tools (defined once, here, since the homepage needs it too — this is
   the one shared base for every "grouped icon-over-label rail" in the
   product, not a homepage-only mockup piece). Full-size by default —
   sized for real touch use — with a `.tool-rail-compact` modifier below
   for the hero preview, which is a smaller, non-interactive screenshot
   rather than something meant to be tapped. */
.tool-rail {
  width: 108px;
  flex: none;
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-2);
  overflow-y: auto;
}
.tool-rail-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.tool-rail-group + .tool-rail-group { padding-top: var(--space-3); border-top: 1px solid var(--border); }
.tool-rail-group-label {
  text-align: center;
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding-bottom: 2px;
}
.tool-rail-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;                 /* touch target */
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  color: var(--text-muted);
  background: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.tool-rail-btn .icon { width: 1.25em; height: 1.25em; }
.tool-rail-btn span.tool-rail-btn-label { font-size: 0.66em; font-weight: 700; letter-spacing: 0.01em; text-align: center; }
.tool-rail-btn:hover { background: var(--bg-elevated-2); color: var(--text); }
.tool-rail-btn.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent);
}
.tool-rail-zoom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
  padding: 8px 4px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated-2);
  font-size: 0.74em;
  font-weight: 700;
  color: var(--text-muted);
}
.tool-rail-zoom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  color: var(--text-faint);
}
.tool-rail-zoom-btn:hover { background: var(--bg-elevated); color: var(--accent); }
.tool-rail-zoom-value { min-width: 3ch; text-align: center; }

/* Compact modifier — the hero preview's rail is a smaller, decorative
   screenshot (the whole preview is aria-hidden), so it drops the touch
   sizing and reads at a denser, illustrative scale. Same structure,
   same classes, no separate component. */
.tool-rail-compact { width: 88px; gap: var(--space-3); }
.tool-rail-compact .tool-rail-group { gap: 3px; }
.tool-rail-compact .tool-rail-group-label { font-size: 0.58em; }
.tool-rail-compact .tool-rail-btn {
  min-height: 0;
  gap: 2px;
  padding: 6px 2px;
  border: none;
}
.tool-rail-compact .tool-rail-btn .icon { width: 1.15em; height: 1.15em; }
.tool-rail-compact .tool-rail-btn span.tool-rail-btn-label { font-size: 0.6em; }
.tool-rail-compact .tool-rail-btn.is-active { box-shadow: 0 0 0 1px var(--accent-line) inset; border-color: transparent; }
.tool-rail-compact .tool-rail-btn-glyph { font-size: 1.05em; line-height: 1; letter-spacing: -0.05em; }
.tool-rail-compact .tool-rail-zoom {
  gap: 4px;
  margin-top: 2px;
  padding: 4px 2px;
  min-height: 0;
  font-size: 0.62em;
}
.tool-rail-compact .tool-rail-zoom-btn { width: 14px; height: 14px; }

/* Real, full-size tool rails (racking.html, warehouse.html) narrow at
   the same breakpoints the rest of the in-app shell does — the hero's
   .tool-rail-compact is excluded, since it's a fixed small decorative
   preview at every viewport width. */
@media (max-width: 1180px) {
  .tool-rail:not(.tool-rail-compact) { width: 92px; }
}
@media (max-width: 640px) {
  .tool-rail:not(.tool-rail-compact) { width: 64px; }
  .tool-rail:not(.tool-rail-compact) .tool-rail-group-label,
  .tool-rail:not(.tool-rail-compact) .tool-rail-btn-label { display: none; }
}

.app-preview-canvas {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: center;
}
.mock-layout { width: 100%; height: auto; }
.mock-dim-label {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  fill: var(--text-faint);
}
.mock-aisle-label {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  fill: var(--text-faint);
  letter-spacing: 0.04em;
}
.mock-dim-label-sm { font-size: 7px; }
.mock-walkway-label {
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 700;
  fill: #0ea5e9;
  letter-spacing: 0.05em;
}
.mock-measure-label {
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 800;
  fill: var(--accent);
}
/* A soft pulse on the active end of the in-progress measurement line —
   the one bit of motion inside the drawing itself, signalling "live"
   without being distracting. Respects prefers-reduced-motion via the
   global animation override at the top of this file. */
@keyframes measurePulse {
  0%, 100% { r: 2; opacity: 1; }
  50% { r: 3; opacity: 0.55; }
}
.mock-measure-handle-active { animation: measurePulse 1.6s ease-in-out infinite; }

/* HUD chips — the live coordinate readout and snap increment that sit
   over the real app's canvas, reproduced with the same "X: — m · Y: —
   m" / "Snap: 100 mm" format the app itself uses. */
.canvas-hud {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  gap: 6px;
}
.hud-chip {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 0.62em;
  font-weight: 600;
  color: var(--text-faint);
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.app-preview-layers {
  width: 128px;
  flex: none;
  padding: var(--space-4);
  border-left: 1px solid var(--border);
  background: var(--bg-elevated-2);
}
.app-preview-layers-title {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 var(--space-3);
}
.layer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.78em;
  font-weight: 500;
  color: var(--text-muted);
  padding: 5px 0;
}
.layer-check {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
}
.layer-check-on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

@media (max-width: 1180px) {
  .app-preview-layers { width: 108px; }
}
@media (max-width: 760px) {
  .app-preview-layers { display: none; }
}

/* Run-status legend — the same colour-and-shape coding the real app's
   diagram legend uses to tell a saved run, a new one and a clash apart
   at a glance (shape as well as colour, so it still reads without
   relying on colour alone). */
.app-preview-legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 7px var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated-2);
  font-size: 0.66em;
  font-weight: 600;
  color: var(--text-faint);
}
.legend-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex: none;
}
.legend-dot-new { background: var(--accent); }
.legend-dot-existing { background: var(--border-strong); }
.legend-dot-clash { background: transparent; border: 1.5px dashed #dc2626; }

/* Status bar — a compact summary strip along the bottom, current
   warehouse dimensions and racking count, the same kind of file-facts
   readout a CAD-style tool keeps inline. The live coordinate readout
   and snap value now live in the canvas HUD chips above, and zoom
   lives with the rest of the view controls in the tool rail — so
   nothing is shown twice in two different places. */
.app-preview-statusbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 7px var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated-2);
  font-size: 0.68em;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.01em;
}
.statusbar-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.statusbar-item + .statusbar-item {
  padding-left: var(--space-4);
  border-left: 1px solid var(--border);
}

@media (max-width: 1180px) {
  .statusbar-item:nth-child(4) { display: none; }
}
@media (max-width: 760px) {
  .statusbar-item:nth-child(2) { display: none; }
}

/* Action bar — the app's own "3D View" and "Send to RM Install →"
   controls, reproduced with their real labels and button treatment
   (outline secondary / solid accent) instead of invented CTAs. */
.app-preview-actionbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
  background: var(--bg-elevated);
}
.btn-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.72em;
  font-weight: 700;
  white-space: nowrap;
}
.btn-mini .icon { width: 1em; height: 1em; }
.btn-mini-outline {
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}
.btn-mini-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
}

/* ---------------------------------------------------------------------
   Feature cards
--------------------------------------------------------------------- */
.features { padding: var(--space-7) 0 var(--space-7); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-6);
}

.feature-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-6);
  transition: border-color var(--duration-med) var(--ease-out),
              transform var(--duration-med) var(--ease-out),
              box-shadow var(--duration-med) var(--ease-out);
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--accent-line), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--duration-med) var(--ease-out);
  pointer-events: none;
}
.feature-card:hover {
  border-color: transparent;
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.feature-card:hover::before { opacity: 1; }

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-soft), transparent 70%), var(--bg-elevated-2);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 1.45em;
  margin-bottom: var(--space-5);
  transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out);
}
.feature-card:hover .feature-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 0 0 6px var(--accent-soft);
}

.feature-card h3 {
  font-size: 1.25em;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-3);
}
.feature-card p {
  font-size: 0.95em;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}

/* ---------------------------------------------------------------------
   "Built for racking professionals" — full redesign
--------------------------------------------------------------------- */
.pro-banner { padding: var(--space-5) 0 var(--space-8); }

.pro-banner-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-7);
  padding: var(--space-8) var(--space-8);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-elevated-2) 70%);
  box-shadow: var(--shadow-md);
}

.pro-banner-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.7;
  background:
    radial-gradient(560px 320px at 88% -10%, var(--accent-soft), transparent 60%),
    repeating-linear-gradient(100deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0 3px,
      transparent 3px 38px);
  -webkit-mask-image: linear-gradient(120deg, #000 30%, transparent 85%);
  mask-image: linear-gradient(120deg, #000 30%, transparent 85%);
}

.pro-banner-mark {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: var(--radius-md);
  background: radial-gradient(120% 120% at 30% 20%, var(--accent-soft), transparent 70%), var(--bg-elevated-2);
  border: 1px solid var(--accent-line);
  color: var(--accent);
  font-size: 1.9em;
  box-shadow: 0 0 0 8px var(--accent-soft);
}

.pro-banner-content { position: relative; z-index: 1; }

.eyebrow-on-panel { margin-bottom: var(--space-3); }

.pro-banner-content h2 {
  font-size: clamp(1.5em, 2.6vw, 1.9em);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: var(--space-4);
}
.pro-banner-lede {
  color: var(--text-muted);
  font-size: 1.02em;
  max-width: 60ch;
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.pro-banner-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.pro-banner-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.9em;
  font-weight: 600;
  color: var(--text);
}
.pro-banner-points .icon {
  color: var(--accent);
  width: 1.05em;
  height: 1.05em;
}

@media (max-width: 720px) {
  .pro-banner-inner { flex-direction: column; align-items: flex-start; padding: var(--space-6); gap: var(--space-5); }
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-6) 0;
}
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-brand-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.footer-tagline {
  font-size: 0.82em;
  color: var(--text-muted);
  margin: 0;
}
.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  text-align: right;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  justify-content: flex-end;
}
.footer-links a {
  font-size: 0.82em;
  color: var(--text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text);
}
.footer-note {
  font-size: 0.82em;
  color: var(--text-faint);
  margin: 0;
}
.footer-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-note a:hover,
.footer-note a:focus-visible {
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .footer-meta { align-items: flex-start; text-align: left; }
  .footer-links { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------- */

/* Laptop: the left-copy/right-product split needs real room for the
   copy column to stay readable and the preview to stay legible — below
   this width it collapses back to the previous stacked, centred hero
   (copy above, full-width preview below), same as before this split
   existed. */
@media (max-width: 1180px) {
  .wrap { padding: 0 var(--space-6); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); text-align: center; }
  .hero-copy { max-width: 640px; margin: 0 auto; }
  .eyebrow { justify-content: center; }
  .hero-actions { justify-content: center; }
}

/* Tablet: nav links step aside, the app preview keeps its full detail
   but the rail's group labels drop out to save width. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero { padding: var(--space-7) 0 var(--space-7); }
  .pro-banner-inner { align-items: center; }
}

/* Mobile: single column throughout, full-width buttons for easy tapping,
   reduced outer padding so content isn't squeezed. The application
   preview stays intact — same wizard, same four tool-rail groups, same
   layers and legend — just condensed to icon-only controls so it keeps
   reading as the real, full-featured app rather than a cut-down demo. */
@media (max-width: 560px) {
  .wrap { padding: 0 var(--space-4); }
  .hero-inner { padding: 0 var(--space-4); }
  .hero { padding: var(--space-6) 0 var(--space-6); }
  .hero-title { letter-spacing: -0.015em; }
  .hero-sub { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .hero-actions .btn { width: 100%; }
  .features { padding: var(--space-7) 0 var(--space-6); }
  .pro-banner { padding: var(--space-5) 0 var(--space-8); }
  .pro-banner-mark { width: 56px; height: 56px; font-size: 1.5em; }

  .app-preview-suite,
  .wizard-mini-label,
  .canvas-hud,
  .app-preview-legend,
  .tool-rail-group-label,
  .tool-rail-btn-label { display: none; }
  .app-preview-title { font-size: 0.74em; }
  .tool-rail-compact { width: 44px; }
  .tool-rail-compact .tool-rail-btn { padding: 6px; }
  .app-preview-body { min-height: 320px; }
}

/* ---------------------------------------------------------------------
   Legal pages (legal.html / privacy.html / cookies.html / terms.html)
   -----------------------------------------------------------------------
   Same shell as Home (tokens.css + this file, same .nav/.wrap/.brand/
   .site-footer, same dark/light theme system) but without Home's
   scroll-driven background scene, reveal animations or app-canvas.css —
   these are plain reference documents, not the product itself, so they
   stay lightweight and load only what they actually use.
--------------------------------------------------------------------- */
.legal-body { background: var(--bg); }

.legal-main { padding: var(--space-8) 0 var(--space-9); }

.legal-crumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.86em;
  color: var(--text-faint);
  margin-bottom: var(--space-6);
}
.legal-crumb a { color: var(--text-muted); }
.legal-crumb a:hover, .legal-crumb a:focus-visible { color: var(--text); }
.legal-crumb [aria-current="page"] { color: var(--text-faint); }

.legal-doc { max-width: 760px; }
.legal-doc h1 {
  font-size: clamp(1.8em, 1.4em + 1.5vw, 2.4em);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.legal-updated {
  font-size: 0.86em;
  color: var(--text-faint);
  margin-bottom: var(--space-7);
}
.legal-doc h2 {
  font-size: 1.3em;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.legal-doc section:first-of-type h2 { margin-top: var(--space-6); padding-top: 0; border-top: none; }
.legal-doc h3 {
  font-size: 1.05em;
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.legal-doc p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.legal-doc ul, .legal-doc ol {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 var(--space-4);
  padding-left: 1.3em;
}
.legal-doc li { margin-bottom: var(--space-2); }
.legal-doc li:last-child { margin-bottom: 0; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover, .legal-doc a:focus-visible { color: var(--text); }

/* A visibly flagged gap — required legal/operator detail not yet
   supplied, called out on-page rather than silently invented (see each
   page's own content for what's still missing before launch). */
.legal-placeholder {
  background: var(--warn-soft);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  font-size: 0.92em;
  color: var(--text);
}
.legal-placeholder strong { color: var(--warn); }

.legal-crosslinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-8) 0 var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.legal-crosslinks a { font-size: 0.92em; color: var(--text-muted); }
.legal-crosslinks a:hover, .legal-crosslinks a:focus-visible { color: var(--accent); }
.legal-crosslinks a[aria-current="page"] { color: var(--text); font-weight: 600; text-decoration: none; }

.legal-home-link { font-size: 0.92em; color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-1); }
.legal-home-link:hover, .legal-home-link:focus-visible { color: var(--accent); }
.legal-home-link .icon { width: 0.9em; height: 0.9em; transform: rotate(180deg); }

@media (max-width: 640px) {
  .legal-main { padding: var(--space-6) 0 var(--space-7); }
  .legal-doc h2 { margin-top: var(--space-7); }
}

/* ---------------------------------------------------------------------
   Mobile edge breathing room (iPhone/small-screen safe area)
   Appended at file end so it wins the cascade over every narrower-
   breakpoint rule above targeting the same selectors, without editing
   those rules directly. Only touches left/right padding — never a
   shorthand `padding` — so existing vertical spacing is untouched.
--------------------------------------------------------------------- */
@media (max-width: 600px) {
  .wrap {
    padding-left: var(--edge-pad-l);
    padding-right: var(--edge-pad-r);
  }
  .legal-body { overflow-x: hidden; }
}